Change configuration of landing charts and copy.

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}>

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>
   );

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>
   );
 };

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>

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,6 +22,8 @@ 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 (
@@ -36,6 +42,7 @@ export const LandingPageChart: React.FC<LandingPageChartsProps> = ({ datasets, l
               intersect: false,
               mode: 'index',
             },
+            watermark: watermarkLayout(isMobile),
             plugins: {
               tooltip: {
                 position: 'nearest',
@@ -91,9 +98,10 @@ export const LandingPageChart: React.FC<LandingPageChartsProps> = ({ datasets, l
               },
             },
           }}
+          plugins={[ChartjsPluginWatermark]}
         />
       </div>
     );
-  }, [datasets, labels, id]);
+  }, [datasets, labels, id, isMobile]);
   return chart;
 };

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>
   );
 };

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>
   );
 };

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>
   );
 };