Change phrasing "peak" to "Historical maximum" (#825)

* Change phrasing "peak" to "Historical maximum" * comments * Landing chart work (#828) * Change configuration of landing charts and copy. * lint * small fix --------- Co-authored-by: Patrick Cleary <[email protected]>
transitmatters · Aug 11, 2023 · 722fac6 · 722fac6
1 parent a014708
commit 722fac6
Show file tree

Hide file tree

Showing 20 changed files with 50 additions and 63 deletions.
diff --git a/copy/landingCopy.tsx b/copy/landingCopy.tsx
@@ -1,28 +1,15 @@
 import React from 'react';
 import type { LandingCharts } from '../modules/landing/types';
-const DESCRIPTION_STYLE = 'text-stone-90000 text-lg';
+const DESCRIPTION_STYLE = 'text-stone-900 text-lg';
 const BASELINE_STYLE = 'text-stone-900 italic text-xs text-center';
 
 //  copy from: https://docs.google.com/document/d/1kpJqbsNrJpW8gqfeuIjd2KplDacQyorAKE2w5wB6HUY/edit
 
-export const SpeedBaseline = (
-  <p className={BASELINE_STYLE}>
-    Peak speed is the calendar month with the highest average daily speed per line.
-  </p>
-);
+export const SpeedBaseline = <p className={BASELINE_STYLE}>Compared to historical maximums.</p>;
 
-export const ServiceBaseline = (
-  <p className={BASELINE_STYLE}>
-    Peak service is the calendar month with the highest average daily service per line.
-  </p>
-);
+export const ServiceBaseline = <p className={BASELINE_STYLE}>Compared to historical maximums. </p>;
 
-export const RidershipBaseline = (
-  <p className={BASELINE_STYLE}>
-    Peak ridership is the four-week period with the highest average <b>weekday</b> ridership per
-    line.
-  </p>
-);
+export const RidershipBaseline = <p className={BASELINE_STYLE}>Compared to historical maximums.</p>;
 
 export const SpeedDescription = (
   <p className={DESCRIPTION_STYLE}>

diff --git a/modules/commute/speed/utils/utils.ts b/modules/commute/speed/utils/utils.ts
@@ -1,5 +1,6 @@
+import { PEAK_SPEED } from '../../../../common/constants/baselines';
 import type { SpeedDataPoint } from '../../../../common/types/dataPoints';
-import { CORE_TRACK_LENGTHS, PEAK_MPH } from '../../../speed/constants/speeds';
+import { CORE_TRACK_LENGTHS } from '../../../speed/constants/speeds';
 
 export const calculateCommuteSpeedWidgetValues = (
   weeklyData: SpeedDataPoint[],
@@ -14,7 +15,7 @@ export const calculateCommuteSpeedWidgetValues = (
   const weeklyAverageMPH = CORE_TRACK_LENGTHS[line ?? 'DEFAULT'] / weeklyAverage;
   const weeklyComp = Math.round((100 * (MPH - weeklyAverageMPH)) / weeklyAverageMPH);
   const peakComp = Math.round(
-    (100 * (MPH - PEAK_MPH[line ?? 'DEFAULT'])) / PEAK_MPH[line ?? 'DEFAULT']
+    (100 * (MPH - PEAK_SPEED[line ?? 'DEFAULT'])) / PEAK_SPEED[line ?? 'DEFAULT']
   );
 
   return {

diff --git a/modules/landing/LandingChartDiv.tsx b/modules/landing/LandingChartDiv.tsx
@@ -4,7 +4,7 @@ interface LandingChartDivProps {
 }
 export const LandingChartDiv: React.FC<LandingChartDivProps> = ({ children }) => {
   return (
-    <div className="flex h-fit w-full max-w-lg shrink-0 flex-col gap-y-1 rounded-md border-2 border-slate-600 bg-white px-4 py-2 lg:max-w-sm xl:max-w-lg">
+    <div className="flex h-fit w-full max-w-lg  flex-col gap-y-1 rounded-md border-2 border-slate-600 bg-white px-4 py-2">
       {children}
     </div>
   );

diff --git a/modules/landing/LandingChartWidget.tsx b/modules/landing/LandingChartWidget.tsx
@@ -9,12 +9,14 @@ interface LandingChartWidgetProps {
 
 export const LandingChartWidget: React.FC<LandingChartWidgetProps> = ({ title, children }) => {
   return (
-    <div className="flex w-full flex-col justify-center gap-x-8 gap-y-4 px-4 md:px-8 lg:flex-row lg:gap-y-8 lg:px-12">
-      <div className="shrink-1 flex max-w-md flex-col gap-y-2">
-        <h2 className="text-7xl font-thin text-stone-900 lg:text-5xl xl:text-7xl">{title}</h2>
-        {LandingChartCopyMap[title]}
+    <div className="flex w-full max-w-5xl flex-col gap-x-8 gap-y-4 px-4 md:px-8  lg:items-center lg:gap-y-8 lg:px-12">
+      <h2 className="w-full text-7xl font-thin text-stone-900 lg:text-5xl xl:text-7xl">{title}</h2>
+      <div className="flex w-full flex-col gap-x-8 gap-y-4 lg:flex-row lg:gap-y-8">
+        <div className="flex w-[76rem] flex-initial flex-col gap-y-2">{children}</div>
+        <div className="flex w-full min-w-[200px] max-w-md flex-initial shrink flex-col gap-y-2">
+          {LandingChartCopyMap[title]}
+        </div>
       </div>
-      {children}
     </div>
   );
 };
diff --git a/modules/landing/LandingCharts.tsx b/modules/landing/LandingCharts.tsx
@@ -15,7 +15,7 @@ export const LandingCharts: React.FC = () => {
     line: 'line-red',
   });
   return (
-    <div className="flex flex-col items-center gap-8">
+    <div className="flex flex-col items-center gap-8 lg:gap-12">
       <LandingChartWidget title="Speed">
         <OverallSpeedChartWrapper />
       </LandingChartWidget>

diff --git a/modules/landing/charts/LandingPageChart.tsx b/modules/landing/charts/LandingPageChart.tsx
@@ -4,12 +4,16 @@ import { Line } from 'react-chartjs-2';
 import type { ChartDataset } from 'chart.js';
 
 import 'chartjs-adapter-date-fns';
+import ChartjsPluginWatermark from 'chartjs-plugin-watermark';
+
 import { enUS } from 'date-fns/locale';
 import { COLORS } from '../../../common/constants/colors';
 import { THREE_MONTHS_AGO_STRING, TODAY_STRING } from '../../../common/constants/dates';
 import { SPEED_RANGE_PARAM_MAP } from '../../speed/constants/speeds';
 import { LANDING_RAIL_LINES } from '../../../common/types/lines';
 import { LINE_OBJECTS } from '../../../common/constants/lines';
+import { watermarkLayout } from '../../../common/constants/charts';
+import { useBreakpoint } from '../../../common/hooks/useBreakpoint';
 
 interface LandingPageChartsProps {
   datasets: ChartDataset<'line'>[];
@@ -18,10 +22,12 @@ interface LandingPageChartsProps {
 }
 
 export const LandingPageChart: React.FC<LandingPageChartsProps> = ({ datasets, labels, id }) => {
+  const isMobile = !useBreakpoint('md');
+
   const chart = useMemo(() => {
     const { tooltipFormat, unit, callbacks } = SPEED_RANGE_PARAM_MAP.week;
     return (
-      <div className="h-[240px]">
+      <div className="chart-container relative h-[240px] w-full lg:max-w-md">
         <Line
           id={id}
           redraw={true}
@@ -36,12 +42,14 @@ export const LandingPageChart: React.FC<LandingPageChartsProps> = ({ datasets, l
               intersect: false,
               mode: 'index',
             },
+            // @ts-expect-error The watermark plugin doesn't have typescript support
+            watermark: watermarkLayout(isMobile),
             plugins: {
               tooltip: {
                 position: 'nearest',
                 callbacks: {
                   label: (value) =>
-                    `${value.formattedValue}% of peak (${
+                    `${value.formattedValue}% of historical maximum (${
                       LINE_OBJECTS[LANDING_RAIL_LINES[value.datasetIndex]].name
                     })`,
                   ...callbacks,
@@ -56,14 +64,13 @@ export const LandingPageChart: React.FC<LandingPageChartsProps> = ({ datasets, l
                 suggestedMax: 100,
                 display: true,
                 grid: { display: false },
-
                 ticks: {
                   color: COLORS.design.darkGrey,
                   callback: (value) => `${value}%`,
                 },
                 title: {
                   display: true,
-                  text: 'Percentage of peak',
+                  text: 'Percentage of historical maximum',
                   color: COLORS.design.darkGrey,
                 },
               },
@@ -72,7 +79,6 @@ export const LandingPageChart: React.FC<LandingPageChartsProps> = ({ datasets, l
                 max: TODAY_STRING,
                 type: 'time',
                 grid: { display: false },
-
                 time: {
                   unit: unit,
                   tooltipFormat: tooltipFormat,
@@ -93,9 +99,10 @@ export const LandingPageChart: React.FC<LandingPageChartsProps> = ({ datasets, l
               },
             },
           }}
+          plugins={[ChartjsPluginWatermark]}
         />
       </div>
     );
-  }, [datasets, labels, id]);
+  }, [datasets, labels, id, isMobile]);
   return chart;
 };
diff --git a/modules/landing/charts/OverallRidershipChart.tsx b/modules/landing/charts/OverallRidershipChart.tsx
@@ -14,8 +14,8 @@ export const OverallRidershipChart: React.FC<OverallRidershipChartProps> = ({ ri
   const datasets = convertToRidershipDataset(ridershipData);
   return (
     <LandingChartDiv>
-      {RidershipBaseline}
       <LandingPageChart datasets={datasets} labels={labels} id="system-ridership" />
+      {RidershipBaseline}
     </LandingChartDiv>
   );
 };
diff --git a/modules/landing/charts/OverallServiceChart.tsx b/modules/landing/charts/OverallServiceChart.tsx
@@ -15,8 +15,8 @@ export const OverallServiceChart: React.FC<OverallServiceChartProps> = ({ servic
 
   return (
     <LandingChartDiv>
-      {ServiceBaseline}
       <LandingPageChart datasets={datasets} labels={labels} id="system-service" />
+      {ServiceBaseline}
     </LandingChartDiv>
   );
 };
diff --git a/modules/landing/charts/OverallSpeedChart.tsx b/modules/landing/charts/OverallSpeedChart.tsx
@@ -14,8 +14,8 @@ export const OverallSpeedChart: React.FC<OverallSpeedChartProps> = ({ speedData
   const datasets = convertToSpeedDataset(speedData);
   return (
     <LandingChartDiv>
-      {SpeedBaseline}
       <LandingPageChart datasets={datasets} labels={labels} id="system-speed" />
+      {SpeedBaseline}
     </LandingChartDiv>
   );
 };
diff --git a/modules/landing/utils.ts b/modules/landing/utils.ts
@@ -28,7 +28,6 @@ export const convertToSpeedDataset = (data: { [key in Line]?: DeliveredTripMetri
     const datasetOptions = getDatasetOptions(line);
     return {
       ...datasetOptions,
-      label: `% of peak`,
       data:
         data[line]?.map((datapoint) =>
           datapoint.miles_covered
@@ -47,7 +46,6 @@ export const convertToServiceDataset = (data: { [key in Line]?: DeliveredTripMet
     const datasetOptions = getDatasetOptions(line);
     return {
       ...datasetOptions,
-      label: `% of peak`,
       data:
         data[line]?.map((datapoint) =>
           datapoint.miles_covered
@@ -64,7 +62,6 @@ export const convertToRidershipDataset = (data: { [key in Line]: RidershipCount[
       const datasetOptions = getDatasetOptions(line);
       return {
         ...datasetOptions,
-        label: `% of peak`,
         data: data[line]?.map((datapoint) =>
           datapoint.count
             ? Math.round(10 * 100 * (datapoint.count / PEAK_RIDERSHIP[line])) / 10

diff --git a/modules/ridership/RidershipGraph.tsx b/modules/ridership/RidershipGraph.tsx
@@ -71,7 +71,7 @@ export const RidershipGraph: React.FC<RidershipGraphProps> = ({
 
                 {
                   // This null dataset produces the entry in the legend for the peak annotation.
-                  label: `peak (${PEAK_RIDERSHIP[routeIndex ?? 'DEFAULT']})`,
+                  label: `Historical Maximum (${PEAK_RIDERSHIP[routeIndex ?? 'DEFAULT']})`,
                   backgroundColor: CHART_COLORS.ANNOTATIONS,
                   data: null,
                 },
@@ -100,7 +100,7 @@ export const RidershipGraph: React.FC<RidershipGraphProps> = ({
                       return `${context.parsed.y} (${(
                         (100 * context.parsed.y) /
                         PEAK_RIDERSHIP[routeIndex ?? 'DEFAULT']
-                      ).toFixed(1)}% of peak)`;
+                      ).toFixed(1)}% of historical maximum)`;
                     },
                   },
                 },

diff --git a/modules/ridership/RidershipGraphWrapper.tsx b/modules/ridership/RidershipGraphWrapper.tsx
@@ -39,7 +39,7 @@ export const RidershipGraphWrapper: React.FC<RidershipGraphWrapperProps> = ({
           layoutKind="no-delta"
         />
         <WidgetForCarousel
-          analysis={'of peak'}
+          analysis={'of Historical Maximum'}
           sentimentDirection={'positiveOnIncrease'}
           layoutKind="no-delta"
           widgetValue={new PercentageWidgetValue(percentage)}

diff --git a/modules/service/PercentageServiceGraph.tsx b/modules/service/PercentageServiceGraph.tsx
@@ -24,7 +24,7 @@ interface PercentageServiceGraphProps {
   config: ParamsType;
   startDate: string;
   endDate: string;
-  comparison: 'Peak' | 'Scheduled';
+  comparison: 'Historical Maximum' | 'Scheduled';
   showTitle?: boolean;
 }
 

diff --git a/modules/service/PercentageServiceGraphWrapper.tsx b/modules/service/PercentageServiceGraphWrapper.tsx
@@ -18,8 +18,8 @@ interface PercentageServiceGraphWrapperProps {
   config: ParamsType;
   startDate: string;
   endDate: string;
-  comparison: 'Scheduled' | 'Peak';
-  setComparison: React.Dispatch<SetStateAction<'Scheduled' | 'Peak'>>;
+  comparison: 'Scheduled' | 'Historical Maximum';
+  setComparison: React.Dispatch<SetStateAction<'Scheduled' | 'Historical Maximum'>>;
 }
 
 export const PercentageServiceGraphWrapper: React.FC<PercentageServiceGraphWrapperProps> = ({
@@ -62,7 +62,10 @@ export const PercentageServiceGraphWrapper: React.FC<PercentageServiceGraphWrapp
       </CarouselGraphDiv>
       <div className={'flex w-full justify-center pt-2'}>
         <ButtonGroup
-          options={Object.entries({ Scheduled: 'Scheduled', Peak: 'Peak' })}
+          options={Object.entries({
+            Scheduled: 'Scheduled',
+            'Historical Maximum': 'Historical Maximum',
+          })}
           pressFunction={setComparison}
           additionalDivClass="md:w-auto"
           additionalButtonClass="md:w-fit"

diff --git a/modules/service/ServiceDetails.tsx b/modules/service/ServiceDetails.tsx
@@ -22,7 +22,7 @@ export function ServiceDetails() {
     lineShort,
     query: { startDate, endDate },
   } = useDelimitatedRoute();
-  const [comparison, setComparison] = useState<'Peak' | 'Scheduled'>('Scheduled');
+  const [comparison, setComparison] = useState<'Historical Maximum' | 'Scheduled'>('Scheduled');
   const config = getSpeedGraphConfig(dayjs(startDate), dayjs(endDate));
   const enabled = Boolean(startDate && endDate && line && config.agg);
   const tripsData = useDeliveredTripMetrics(

diff --git a/modules/service/ServiceGraph.tsx b/modules/service/ServiceGraph.tsx
@@ -89,7 +89,7 @@ export const ServiceGraph: React.FC<ServiceGraphProps> = ({
                 },
                 {
                   // This null dataset produces the entry in the legend for the baseline annotation.
-                  label: `Peak (${peak})`,
+                  label: `Historical Maximum (${peak})`,
                   backgroundColor: CHART_COLORS.ANNOTATIONS,
                   data: null,
                 },
@@ -117,7 +117,7 @@ export const ServiceGraph: React.FC<ServiceGraphProps> = ({
                     label: (context) => {
                       return `${context.datasetIndex === 0 ? 'Actual:' : 'Scheduled:'} ${
                         context.parsed.y
-                      } (${((100 * context.parsed.y) / peak).toFixed(1)}% of peak)`;
+                      } (${((100 * context.parsed.y) / peak).toFixed(1)}% of historical maximum)`;
                     },
                   },
                 },

diff --git a/modules/service/ServiceGraphWrapper.tsx b/modules/service/ServiceGraphWrapper.tsx
@@ -38,7 +38,7 @@ export const ServiceGraphWrapper: React.FC<ServiceGraphWrapperProps> = ({
         <WidgetForCarousel
           layoutKind="no-delta"
           sentimentDirection={'positiveOnIncrease'}
-          analysis={`Peak - ${config.getWidgetTitle(peak.date)}`}
+          analysis={`Historical Maximum - ${config.getWidgetTitle(peak.date)}`}
           widgetValue={new TripsWidgetValue(peak ? peak.count : undefined)}
         />
       </WidgetCarousel>

diff --git a/modules/speed/SpeedGraph.tsx b/modules/speed/SpeedGraph.tsx
@@ -15,7 +15,6 @@ import { ChartBorder } from '../../common/components/charts/ChartBorder';
 import { ChartDiv } from '../../common/components/charts/ChartDiv';
 import { PEAK_SPEED } from '../../common/constants/baselines';
 import { getShuttlingBlockAnnotations } from '../service/utils/graphUtils';
-import { PEAK_MPH } from './constants/speeds';
 import type { ParamsType } from './constants/speeds';
 
 interface SpeedGraphProps {
@@ -68,7 +67,7 @@ export const SpeedGraph: React.FC<SpeedGraphProps> = ({
               },
               {
                 // This null dataset produces the entry in the legend for the baseline annotation.
-                label: `Peak (${peak})`,
+                label: `Historical Maximum (${peak})`,
                 backgroundColor: CHART_COLORS.ANNOTATIONS,
                 data: null,
               },
@@ -96,7 +95,7 @@ export const SpeedGraph: React.FC<SpeedGraphProps> = ({
                   label: (context) => {
                     return `${context.parsed.y} (${((100 * context.parsed.y) / peak).toFixed(
                       1
-                    )}% of peak)`;
+                    )}% of historical maximum)`;
                   },
                 },
               },
@@ -130,7 +129,6 @@ export const SpeedGraph: React.FC<SpeedGraphProps> = ({
             scales: {
               y: {
                 suggestedMin: 0,
-                suggestedMax: PEAK_MPH[line ?? 'DEFAULT'],
                 display: true,
                 ticks: {
                   color: COLORS.design.subtitleGrey,

diff --git a/modules/speed/SpeedGraphWrapper.tsx b/modules/speed/SpeedGraphWrapper.tsx
@@ -42,7 +42,7 @@ export const SpeedGraphWrapper: React.FC<SpeedGraphWrapperProps> = ({
         />
         <WidgetForCarousel
           widgetValue={new MPHWidgetValue(peak.mph, undefined)}
-          analysis={`Peak (${config.getWidgetTitle(peak.date)})`}
+          analysis={`Historical Maximum - ${config.getWidgetTitle(peak.date)}`}
           sentimentDirection={'positiveOnIncrease'}
           layoutKind="no-delta"
         />

diff --git a/modules/speed/constants/speeds.ts b/modules/speed/constants/speeds.ts
@@ -2,7 +2,6 @@ import type { TooltipCallbacks, TooltipItem, TooltipModel } from 'chart.js';
 import type { _DeepPartialObject } from 'chart.js/dist/types/utils';
 import dayjs from 'dayjs';
 import { todayOrDate } from '../../../common/constants/dates';
-import { PEAK_COMPLETE_TRIP_TIMES } from '../../../common/constants/baselines';
 
 export type AggType = 'daily' | 'weekly' | 'monthly';
 export type ParamsType = {
@@ -77,11 +76,4 @@ export const CORE_TRACK_LENGTHS = {
   DEFAULT: 1,
 };
 
-export const PEAK_MPH = {
-  'line-red': CORE_TRACK_LENGTHS['line-red'] / (PEAK_COMPLETE_TRIP_TIMES['line-red'].value / 3600),
-  'line-orange':
-    CORE_TRACK_LENGTHS['line-orange'] / (PEAK_COMPLETE_TRIP_TIMES['line-orange'].value / 3600),
-  'line-blue':
-    CORE_TRACK_LENGTHS['line-blue'] / (PEAK_COMPLETE_TRIP_TIMES['line-blue'].value / 3600),
-  DEFAULT: 1,
-};
+// Peak_MPH removed in #825