diff --git a/common/components/charts/ByHourHistogram/ByHourHistogram.tsx b/common/components/charts/ByHourHistogram/ByHourHistogram.tsx index a127353b..e0bf4dbe 100644 --- a/common/components/charts/ByHourHistogram/ByHourHistogram.tsx +++ b/common/components/charts/ByHourHistogram/ByHourHistogram.tsx @@ -11,6 +11,7 @@ import { } from 'chart.js'; import Color from 'color'; +import type { Context } from 'chartjs-plugin-datalabels'; import { useBreakpoint } from '../../../hooks/useBreakpoint'; import { watermarkLayout } from '../../../constants/charts'; import type { ByHourDataset, DisplayStyle, ValueAxis as ValueAxis } from './types'; @@ -68,6 +69,20 @@ export const ByHourHistogram: React.FC = (props) => { const ref = useRef(); const isMobile = !useBreakpoint('md'); + const tooltipFormat = React.useCallback( + ({ datasetIndex, dataIndex }: Context) => { + const dataset = data[datasetIndex]; + const value = dataset.data[dataIndex]; + const { label } = dataset; + + if (datasetRoundTrips) { + return `${label}: ${value} ${valueAxis.tooltipItemLabel ?? ''} (${Math.round(60 / value)}m headways)`.trim(); + } + return `${label}: ${value} ${valueAxis.tooltipItemLabel ?? ''}`.trim(); + }, + [data, datasetRoundTrips, valueAxis.tooltipItemLabel] + ); + const chartData = useMemo(() => { return { labels: timeLabels, @@ -118,17 +133,13 @@ export const ByHourHistogram: React.FC = (props) => { mode: 'index' as const, callbacks: { label: (context) => { - const { datasetIndex, dataIndex } = context; - const dataset = data[datasetIndex]; - const value = dataset.data[dataIndex]; - const { label } = dataset; - return `${label}: ${value} ${valueAxis.tooltipItemLabel ?? ''} ${datasetRoundTrips ? `(${Math.round((60 / value) * 2)}m headways)` : ''}`.trim(); + return tooltipFormat(context); }, }, }, }, }; - }, [valueAxis.title, valueAxis.tooltipItemLabel, isMobile, data, datasetRoundTrips]); + }, [valueAxis.title, isMobile, tooltipFormat]); return ( = (props) => { ref={ref} data={chartData} options={chartOptions} - height={isMobile ? 240 : 80} + height={isMobile ? 200 : 75} plugins={[ChartjsPluginWatermark]} /> ); diff --git a/modules/service/DailyServiceHistogram.tsx b/modules/service/DailyServiceHistogram.tsx index a06b7406..f04013f4 100644 --- a/modules/service/DailyServiceHistogram.tsx +++ b/modules/service/DailyServiceHistogram.tsx @@ -28,12 +28,12 @@ export const DailyServiceHistogram: React.FC = (props) => { return [ { label: prettyDate(startDate), - data: startServiceLevels!, + data: startServiceLevels!.map((value) => value / 2), style: { opacity: 0.5 }, }, { label: prettyDate(endDate), - data: endServiceLevels!, + data: endServiceLevels!.map((value) => value / 2), }, ]; }, [scheduledService, dayKind]);