Fix issue with historic trip data Y axis. (#845)

* Fix issue with historic trip data Y axis. * lint
transitmatters · Aug 24, 2023 · ffcbf73 · ffcbf73
1 parent ae8b1d1
commit ffcbf73
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 61 deletions.
diff --git a/common/components/charts/AggregateLineChart.tsx b/common/components/charts/AggregateLineChart.tsx
@@ -43,7 +43,6 @@ export const AggregateLineChart: React.FC<AggregateLineProps> = ({
   suggestedYMin,
   suggestedYMax,
   showLegend = true,
-  isHomescreen = false,
   byTime = false,
 }) => {
   const ref = useRef();
@@ -171,7 +170,7 @@ export const AggregateLineChart: React.FC<AggregateLineProps> = ({
       </ChartDiv>
       <div className="flex flex-row items-end gap-4 ">
         {showLegend && <LegendLongTerm />}
-        {!isHomescreen && startDate && (
+        {startDate && (
           <DownloadButton
             data={data}
             datasetName={fname}

diff --git a/common/components/charts/SingleChartWrapper.tsx b/common/components/charts/SingleChartWrapper.tsx
@@ -12,7 +12,6 @@ interface SingleChartWrapperProps {
   toStation: Station | undefined;
   fromStation: Station | undefined;
   type: 'headways' | 'traveltimes' | 'dwells';
-  isHomescreen?: boolean;
   showLegend?: boolean;
 }
 
@@ -21,7 +20,6 @@ export const SingleChartWrapper: React.FC<SingleChartWrapperProps> = ({
   toStation,
   fromStation,
   type,
-  isHomescreen,
   showLegend,
 }) => {
   const dataReady = !query.isError && query.data && toStation && fromStation;
@@ -34,7 +32,6 @@ export const SingleChartWrapper: React.FC<SingleChartWrapperProps> = ({
           traveltimes={query.data}
           toStation={toStation}
           fromStation={fromStation}
-          isHomescreen={isHomescreen}
           showLegend={showLegend}
         />
       );
@@ -44,17 +41,11 @@ export const SingleChartWrapper: React.FC<SingleChartWrapperProps> = ({
           headways={query.data}
           fromStation={fromStation}
           toStation={toStation}
-          isHomescreen={isHomescreen}
         />
       );
     case 'dwells':
       return (
-        <DwellsSingleChart
-          dwells={query.data}
-          fromStation={fromStation}
-          toStation={toStation}
-          isHomescreen={isHomescreen}
-        />
+        <DwellsSingleChart dwells={query.data} fromStation={fromStation} toStation={toStation} />
       );
   }
 };
diff --git a/common/components/charts/SingleDayLineChart.tsx b/common/components/charts/SingleDayLineChart.tsx
@@ -5,12 +5,11 @@ import { enUS } from 'date-fns/locale';
 import React, { useMemo, useRef } from 'react';
 import ChartjsPluginWatermark from 'chartjs-plugin-watermark';
 import type { DataPoint } from '../../types/dataPoints';
-import { CHART_COLORS, COLORS, LINE_COLORS } from '../../../common/constants/colors';
+import { CHART_COLORS, COLORS } from '../../../common/constants/colors';
 import { useAlertStore } from '../../../modules/tripexplorer/AlertStore';
 import type { SingleDayLineProps } from '../../../common/types/charts';
 import { getAlertAnnotations } from '../../../modules/service/utils/graphUtils';
 import { prettyDate } from '../../utils/date';
-import { useDelimitatedRoute } from '../../utils/router';
 import { DownloadButton } from '../buttons/DownloadButton';
 import { useBreakpoint } from '../../hooks/useBreakpoint';
 import { watermarkLayout } from '../../constants/charts';
@@ -66,15 +65,24 @@ export const SingleDayLineChart: React.FC<SingleDayLineProps> = ({
   fname,
   bothStops = false,
   location,
-  isHomescreen = false,
   showLegend = true,
 }) => {
   const ref = useRef();
   const alerts = useAlertStore((store) => store.alerts)?.filter((alert) => alert.applied);
   const alertAnnotations = date && alerts ? getAlertAnnotations(alerts, date) : [];
   const isMobile = !useBreakpoint('md');
   const labels = useMemo(() => data.map((item) => item[pointField]), [data, pointField]);
-  const { line } = useDelimitatedRoute();
+
+  // Format benchmark data if it exists.
+  const benchmarkData = data.map((datapoint) =>
+    benchmarkField && datapoint[benchmarkField] ? datapoint[benchmarkField] : undefined
+  );
+  const displayBenchmarkData = benchmarkData.every((datapoint) => datapoint !== undefined);
+  // Have to use `as number` because typescript doesn't understand `datapoint` is not undefined.
+  const benchmarkDataFormatted = displayBenchmarkData
+    ? benchmarkData.map((datapoint) => ((datapoint as number) / 60).toFixed(2))
+    : null;
+
   return (
     <ChartBorder>
       <ChartDiv isMobile={isMobile}>
@@ -90,30 +98,21 @@ export const SingleDayLineChart: React.FC<SingleDayLineProps> = ({
                 label: `Actual`,
                 fill: false,
                 borderColor: '#a0a0a030',
-                pointBackgroundColor:
-                  isHomescreen && line
-                    ? LINE_COLORS[line]
-                    : pointColors(data, metricField, benchmarkField),
-                pointBorderWidth: isHomescreen ? 0 : undefined,
+                pointBackgroundColor: pointColors(data, metricField, benchmarkField),
                 pointHoverRadius: 3,
-                pointHoverBackgroundColor:
-                  isHomescreen && line
-                    ? LINE_COLORS[line]
-                    : pointColors(data, metricField, benchmarkField),
+                pointHoverBackgroundColor: pointColors(data, metricField, benchmarkField),
                 pointRadius: 3,
                 pointHitRadius: 10,
                 data: data.map((datapoint) => ((datapoint[metricField] as number) / 60).toFixed(2)),
               },
               {
                 label: `Benchmark MBTA`,
                 backgroundColor: '#a0a0a030',
-                data: benchmarkField
-                  ? data.map((datapoint) => ((datapoint[benchmarkField] as number) / 60).toFixed(2))
-                  : [],
+                data: benchmarkDataFormatted,
                 pointRadius: 0,
                 pointHoverRadius: 3,
                 fill: true,
-                hidden: benchmarkField === undefined,
+                hidden: !displayBenchmarkData,
               },
             ],
           }}
@@ -218,7 +217,7 @@ export const SingleDayLineChart: React.FC<SingleDayLineProps> = ({
         {alerts && <AlertsDisclaimer alerts={alerts} />}
         <div className="flex flex-row items-end gap-4 ">
           {showLegend && benchmarkField ? <LegendSingleDay /> : <div className="w-full" />}
-          {!isHomescreen && date && (
+          {date && (
             <DownloadButton
               data={data}
               datasetName={fname}

diff --git a/common/types/charts.ts b/common/types/charts.ts
@@ -75,7 +75,6 @@ export interface LineProps {
   pointField: PointField; // X value
   bothStops?: boolean;
   fname: DataName;
-  isHomescreen?: boolean;
   showLegend?: boolean;
 }
 
@@ -117,5 +116,4 @@ export interface HeadwaysChartProps {
   fromStation: Station;
   toStation: Station;
   showLegend?: boolean;
-  isHomescreen?: boolean;
 }
diff --git a/modules/dwells/charts/DwellsSingleChart.tsx b/modules/dwells/charts/DwellsSingleChart.tsx
@@ -10,14 +10,12 @@ interface DwellsSingleChartProps {
   dwells: SingleDayDataPoint[];
   toStation: Station;
   fromStation: Station;
-  isHomescreen?: boolean;
 }
 
 export const DwellsSingleChart: React.FC<DwellsSingleChartProps> = ({
   dwells,
   toStation,
   fromStation,
-  isHomescreen = false,
 }) => {
   const {
     linePath,
@@ -35,10 +33,9 @@ export const DwellsSingleChart: React.FC<DwellsSingleChartProps> = ({
         location={getLocationDetails(fromStation, toStation)}
         fname={'dwells'}
         showLegend={false}
-        isHomescreen={isHomescreen}
       />
     );
-  }, [dwells, fromStation, linePath, date, toStation, isHomescreen]);
+  }, [dwells, fromStation, linePath, date, toStation]);
 
   return chart;
 };
diff --git a/modules/headways/charts/HeadwaysSingleChart.tsx b/modules/headways/charts/HeadwaysSingleChart.tsx
@@ -10,7 +10,6 @@ export const HeadwaysSingleChart: React.FC<HeadwaysChartProps> = ({
   toStation,
   fromStation,
   showLegend = true,
-  isHomescreen = false,
 }) => {
   const {
     linePath,
@@ -33,19 +32,9 @@ export const HeadwaysSingleChart: React.FC<HeadwaysChartProps> = ({
         location={getLocationDetails(fromStation, toStation)}
         fname={'headways'}
         showLegend={showLegend && anyHeadwayBenchmarks}
-        isHomescreen={isHomescreen}
       />
     );
-  }, [
-    linePath,
-    headways,
-    date,
-    fromStation,
-    toStation,
-    showLegend,
-    anyHeadwayBenchmarks,
-    isHomescreen,
-  ]);
+  }, [linePath, headways, date, fromStation, toStation, showLegend, anyHeadwayBenchmarks]);
 
   return chart;
 };
diff --git a/modules/traveltimes/charts/TravelTimesSingleChart.tsx b/modules/traveltimes/charts/TravelTimesSingleChart.tsx
@@ -11,15 +11,13 @@ interface TravelTimesSingleChartProps {
   toStation: Station;
   fromStation: Station;
   showLegend?: boolean;
-  isHomescreen?: boolean;
 }
 
 export const TravelTimesSingleChart: React.FC<TravelTimesSingleChartProps> = ({
   traveltimes,
   toStation,
   fromStation,
   showLegend = true,
-  isHomescreen = false,
 }) => {
   const {
     linePath,
@@ -43,19 +41,9 @@ export const TravelTimesSingleChart: React.FC<TravelTimesSingleChartProps> = ({
         location={getLocationDetails(fromStation, toStation)}
         fname={'traveltimes'}
         showLegend={showLegend && anyTravelBenchmarks}
-        isHomescreen={isHomescreen}
       />
     );
-  }, [
-    linePath,
-    traveltimes,
-    date,
-    fromStation,
-    toStation,
-    showLegend,
-    anyTravelBenchmarks,
-    isHomescreen,
-  ]);
+  }, [linePath, traveltimes, date, fromStation, toStation, showLegend, anyTravelBenchmarks]);
 
   return chart;
 };