Service page improvements

common/components/charts/ByHourHistogram/ByHourHistogram.tsx

@@ -1,5 +1,6 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useRef } from 'react';
 import { Bar as BarChart } from 'react-chartjs-2';
+import ChartjsPluginWatermark from 'chartjs-plugin-watermark';
 import {
   Chart as ChartJS,
   CategoryScale,
@@ -10,7 +11,9 @@ 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';
 import { resolveStyle } from './styles';
 
@@ -20,6 +23,8 @@ interface Props {
   style?: Partial<DisplayStyle>;
   data: ByHourDataset[];
   valueAxis: ValueAxis;
+  /** Whether the dataset is roundtrips, and we want to additionally convert and show the values as headways */
+  datasetRoundTrips?: boolean;
 }
 
 const allTimeLabels = ['AM', 'PM']
@@ -51,13 +56,33 @@ const stripZeroHoursAndRotateMidnightToEnd = (
 };
 
 export const ByHourHistogram: React.FC<Props> = (props) => {
-  const { data: dataWithZeros, valueAxis, style: baseStyle = null } = props;
+  const {
+    data: dataWithZeros,
+    valueAxis,
+    style: baseStyle = null,
+    datasetRoundTrips = false,
+  } = props;
   const { data, timeLabels } = useMemo(
     () => stripZeroHoursAndRotateMidnightToEnd(dataWithZeros),
     [dataWithZeros]
   );
+  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,
@@ -96,6 +121,9 @@ export const ByHourHistogram: React.FC<Props> = (props) => {
           },
         },
       },
+      responsive: true,
+      maintainAspectRatio: false,
+      watermark: watermarkLayout(isMobile),
       plugins: {
         legend: {
           display: true,
@@ -105,17 +133,22 @@ export const ByHourHistogram: React.FC<Props> = (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 ?? ''}`.trim();
+              return tooltipFormat(context);
             },
           },
         },
       },
     };
-  }, [valueAxis.title, valueAxis.tooltipItemLabel, data]);
+  }, [valueAxis.title, isMobile, tooltipFormat]);
 
-  return <BarChart data={chartData} options={chartOptions} height={isMobile ? 50 : 70} />;
+  return (
+    <BarChart
+      redraw
+      ref={ref}
+      data={chartData}
+      options={chartOptions}
+      height={isMobile ? 200 : 75}
+      plugins={[ChartjsPluginWatermark]}
+    />
+  );
 };

common/components/charts/TimeSeriesChart/TimeSeriesChart.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 import { Line as LineChart } from 'react-chartjs-2';
+import ChartjsPluginWatermark from 'chartjs-plugin-watermark';
 import {
   Chart as ChartJS,
   CategoryScale,
@@ -17,7 +18,6 @@ import {
 } from 'chart.js';
 import Annotation from 'chartjs-plugin-annotation';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
-import ChartjsPluginWatermark from 'chartjs-plugin-watermark';
 import 'chartjs-adapter-date-fns';
 import type { ChartData } from 'chart.js';
 
@@ -26,6 +26,7 @@ import { useBreakpoint } from '../../../hooks/useBreakpoint';
 import { ChartDiv } from '../ChartDiv';
 import { CHART_COLORS, COLORS } from '../../../constants/colors';
 
+import { watermarkLayout } from '../../../constants/charts';
 import type {
   AppliedDisplayStyle,
   Benchmark,
@@ -225,6 +226,7 @@ export const TimeSeriesChart = <Data extends Dataset[]>(props: Props<Data>) => {
       interaction: {
         intersect: false,
       },
+      watermark: watermarkLayout(isMobile),
       plugins: {
         datalabels: {
           display: false,

modules/service/DailyServiceHistogram.tsx

@@ -5,6 +5,7 @@ import { ByHourHistogram } from '../../common/components/charts/ByHourHistogram'
 import { useDelimitatedRoute } from '../../common/utils/router';
 import { prettyDate } from '../../common/utils/date';
 import { ButtonGroup } from '../../common/components/general/ButtonGroup';
+import { CarouselGraphDiv } from '../../common/components/charts/CarouselGraphDiv';
 
 interface Props {
   scheduledService: ScheduledService;
@@ -27,23 +28,26 @@ export const DailyServiceHistogram: React.FC<Props> = (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]);
 
   return (
     <>
-      <ByHourHistogram
-        data={data}
-        style={{ color }}
-        valueAxis={{ title: 'Scheduled round trips', tooltipItemLabel: 'round trips' }}
-      />
+      <CarouselGraphDiv>
+        <ByHourHistogram
+          data={data}
+          style={{ color }}
+          valueAxis={{ title: 'Scheduled round trips', tooltipItemLabel: 'round trips' }}
+          datasetRoundTrips
+        />
+      </CarouselGraphDiv>
       <div className={'flex w-full justify-center pt-2'}>
         <ButtonGroup
           line={line}