diff --git a/common/components/charts/AggregateLineChart.tsx b/common/components/charts/AggregateLineChart.tsx index 6f79ab649..26c960f6e 100644 --- a/common/components/charts/AggregateLineChart.tsx +++ b/common/components/charts/AggregateLineChart.tsx @@ -43,7 +43,6 @@ export const AggregateLineChart: React.FC = ({ suggestedYMin, suggestedYMax, showLegend = true, - isHomescreen = false, byTime = false, }) => { const ref = useRef(); @@ -171,7 +170,7 @@ export const AggregateLineChart: React.FC = ({
{showLegend && } - {!isHomescreen && startDate && ( + {startDate && ( = ({ toStation, fromStation, type, - isHomescreen, showLegend, }) => { const dataReady = !query.isError && query.data && toStation && fromStation; @@ -34,7 +32,6 @@ export const SingleChartWrapper: React.FC = ({ traveltimes={query.data} toStation={toStation} fromStation={fromStation} - isHomescreen={isHomescreen} showLegend={showLegend} /> ); @@ -44,17 +41,11 @@ export const SingleChartWrapper: React.FC = ({ headways={query.data} fromStation={fromStation} toStation={toStation} - isHomescreen={isHomescreen} /> ); case 'dwells': return ( - + ); } }; diff --git a/common/components/charts/SingleDayLineChart.tsx b/common/components/charts/SingleDayLineChart.tsx index 76219451c..f2f2ee8d5 100644 --- 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,7 +65,6 @@ export const SingleDayLineChart: React.FC = ({ fname, bothStops = false, location, - isHomescreen = false, showLegend = true, }) => { const ref = useRef(); @@ -74,7 +72,17 @@ export const SingleDayLineChart: React.FC = ({ 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 ( @@ -90,16 +98,9 @@ export const SingleDayLineChart: React.FC = ({ 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)), @@ -107,13 +108,11 @@ export const SingleDayLineChart: React.FC = ({ { 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 = ({ {alerts && }
{showLegend && benchmarkField ? :
} - {!isHomescreen && date && ( + {date && ( = ({ dwells, toStation, fromStation, - isHomescreen = false, }) => { const { linePath, @@ -35,10 +33,9 @@ export const DwellsSingleChart: React.FC = ({ 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 index f50c26fd4..091a8f4d9 100644 --- a/modules/headways/charts/HeadwaysSingleChart.tsx +++ b/modules/headways/charts/HeadwaysSingleChart.tsx @@ -10,7 +10,6 @@ export const HeadwaysSingleChart: React.FC = ({ toStation, fromStation, showLegend = true, - isHomescreen = false, }) => { const { linePath, @@ -33,19 +32,9 @@ export const HeadwaysSingleChart: React.FC = ({ 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 index 0ca7ae68c..3b182fe64 100644 --- a/modules/traveltimes/charts/TravelTimesSingleChart.tsx +++ b/modules/traveltimes/charts/TravelTimesSingleChart.tsx @@ -11,7 +11,6 @@ interface TravelTimesSingleChartProps { toStation: Station; fromStation: Station; showLegend?: boolean; - isHomescreen?: boolean; } export const TravelTimesSingleChart: React.FC = ({ @@ -19,7 +18,6 @@ export const TravelTimesSingleChart: React.FC = ({ toStation, fromStation, showLegend = true, - isHomescreen = false, }) => { const { linePath, @@ -43,19 +41,9 @@ export const TravelTimesSingleChart: React.FC = ({ 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; };