feat(trip-explorer): speed for station pairs

common/components/charts/AggregateLineChart.tsx

@@ -44,12 +44,15 @@ export const AggregateLineChart: React.FC<AggregateLineProps> = ({
   suggestedYMax,
   showLegend = true,
   byTime = false,
+  yUnit = 'Minutes',
 }) => {
   const ref = useRef();
   const hourly = timeUnit === 'hour';
   const isMobile = !useBreakpoint('md');
   const labels = useMemo(() => data.map((item) => item[pointField]), [data, pointField]);
 
+  const multiplier = yUnit === 'Minutes' ? 1 / 60 : 1;
+
   return (
     <ChartBorder>
       <ChartDiv isMobile={isMobile}>
@@ -72,7 +75,7 @@ export const AggregateLineChart: React.FC<AggregateLineProps> = ({
                 pointRadius: byTime ? 0 : 3,
                 pointHitRadius: 10,
                 stepped: byTime,
-                data: data.map((item: AggregateDataPoint) => (item['50%'] / 60).toFixed(2)),
+                data: data.map((item: AggregateDataPoint) => (item['50%'] * multiplier).toFixed(2)),
               },
               {
                 label: '25th percentile',
@@ -81,7 +84,7 @@ export const AggregateLineChart: React.FC<AggregateLineProps> = ({
                 stepped: byTime,
                 tension: 0.4,
                 pointRadius: 0,
-                data: data.map((item: AggregateDataPoint) => (item['25%'] / 60).toFixed(2)),
+                data: data.map((item: AggregateDataPoint) => (item['25%'] * multiplier).toFixed(2)),
               },
               {
                 label: '75th percentile',
@@ -90,7 +93,7 @@ export const AggregateLineChart: React.FC<AggregateLineProps> = ({
                 stepped: byTime,
                 tension: 0.4,
                 pointRadius: 0,
-                data: data.map((item: AggregateDataPoint) => (item['75%'] / 60).toFixed(2)),
+                data: data.map((item: AggregateDataPoint) => (item['75%'] * multiplier).toFixed(2)),
               },
             ],
           }}
@@ -99,7 +102,7 @@ export const AggregateLineChart: React.FC<AggregateLineProps> = ({
               y: {
                 title: {
                   display: true,
-                  text: 'Minutes',
+                  text: yUnit,
                 },
                 ticks: {
                   precision: 1,
@@ -146,10 +149,11 @@ export const AggregateLineChart: React.FC<AggregateLineProps> = ({
                 position: 'nearest',
                 callbacks: {
                   label: (tooltipItem) => {
-                    return `${tooltipItem.dataset.label}: ${getFormattedTimeString(
-                      tooltipItem.parsed.y,
-                      'minutes'
-                    )}`;
+                    return `${tooltipItem.dataset.label}: ${
+                      yUnit === 'Minutes'
+                        ? getFormattedTimeString(tooltipItem.parsed.y, 'minutes')
+                        : `${tooltipItem.parsed.y} ${yUnit}`
+                    }`;
                   },
                 },
               },

common/components/charts/SingleChartWrapper.tsx

@@ -6,12 +6,13 @@ import { ChartPlaceHolder } from '../graphics/ChartPlaceHolder';
 import { TravelTimesSingleChart } from '../../../modules/traveltimes/charts/TravelTimesSingleChart';
 import { HeadwaysSingleChart } from '../../../modules/headways/charts/HeadwaysSingleChart';
 import { DwellsSingleChart } from '../../../modules/dwells/charts/DwellsSingleChart';
+import { SpeedBetweenStationsSingleChart } from '../../../modules/speed/charts/SpeedBetweenStationsSingleChart';
 
 interface SingleChartWrapperProps {
   query: UseQueryResult<SingleDayDataPoint[]>;
   toStation: Station | undefined;
   fromStation: Station | undefined;
-  type: 'headways' | 'traveltimes' | 'dwells';
+  type: 'headways' | 'traveltimes' | 'dwells' | 'speeds';
   showLegend?: boolean;
 }
 
@@ -47,5 +48,14 @@ export const SingleChartWrapper: React.FC<SingleChartWrapperProps> = ({
       return (
         <DwellsSingleChart dwells={query.data} fromStation={fromStation} toStation={toStation} />
       );
+    case 'speeds':
+      return (
+        <SpeedBetweenStationsSingleChart
+          traveltimes={query.data}
+          fromStation={fromStation}
+          toStation={toStation}
+          showLegend={showLegend}
+        />
+      );
   }
 };

common/components/charts/SingleDayLineChart.tsx

@@ -65,6 +65,7 @@ export const SingleDayLineChart: React.FC<SingleDayLineProps> = ({
   fname,
   bothStops = false,
   location,
+  units,
   showLegend = true,
 }) => {
   const ref = useRef();
@@ -79,10 +80,15 @@ export const SingleDayLineChart: React.FC<SingleDayLineProps> = ({
   );
   const displayBenchmarkData = benchmarkData.every((datapoint) => datapoint !== undefined);
   // Have to use `as number` because typescript doesn't understand `datapoint` is not undefined.
+  const multiplier = units === 'Minutes' ? 1 / 60 : 1;
   const benchmarkDataFormatted = displayBenchmarkData
-    ? benchmarkData.map((datapoint) => ((datapoint as number) / 60).toFixed(2))
+    ? benchmarkData.map((datapoint) => ((datapoint as number) * multiplier).toFixed(2))
     : null;
 
+  const convertedData = data.map((datapoint) =>
+    ((datapoint[metricField] as number) * multiplier).toFixed(2)
+  );
+
   return (
     <ChartBorder>
       <ChartDiv isMobile={isMobile}>
@@ -103,7 +109,7 @@ export const SingleDayLineChart: React.FC<SingleDayLineProps> = ({
                 pointHoverBackgroundColor: pointColors(data, metricField, benchmarkField),
                 pointRadius: 3,
                 pointHitRadius: 10,
-                data: data.map((datapoint) => ((datapoint[metricField] as number) / 60).toFixed(2)),
+                data: convertedData,
               },
               {
                 label: `Benchmark MBTA`,
@@ -133,10 +139,11 @@ export const SingleDayLineChart: React.FC<SingleDayLineProps> = ({
                     ) {
                       return '';
                     }
-                    return `${tooltipItem.dataset.label}: ${getFormattedTimeString(
-                      tooltipItem.parsed.y,
-                      'minutes'
-                    )}`;
+                    return `${tooltipItem.dataset.label}: ${
+                      units === 'Minutes'
+                        ? getFormattedTimeString(tooltipItem.parsed.y, 'minutes')
+                        : `${tooltipItem.parsed.y} ${units}`
+                    }`;
                   },
                   afterBody: (tooltipItems) => {
                     return departureFromNormalString(
@@ -162,7 +169,7 @@ export const SingleDayLineChart: React.FC<SingleDayLineProps> = ({
                 },
                 title: {
                   display: true,
-                  text: 'Minutes',
+                  text: units,
                   color: COLORS.design.subtitleGrey,
                 },
               },