diff --git a/copy/landingCopy.tsx b/copy/landingCopy.tsx index 0a4524779..57564b57b 100644 --- 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 = ( -

- Peak speed is the calendar month with the highest average daily speed per line. -

-); +export const SpeedBaseline =

Compared to historical maximums.

; -export const ServiceBaseline = ( -

- Peak service is the calendar month with the highest average daily service per line. -

-); +export const ServiceBaseline =

Compared to historical maximums.

; -export const RidershipBaseline = ( -

- Peak ridership is the four-week period with the highest average weekday ridership per - line. -

-); +export const RidershipBaseline =

Compared to historical maximums.

; export const SpeedDescription = (

diff --git a/modules/landing/LandingChartDiv.tsx b/modules/landing/LandingChartDiv.tsx index 86f4f01a4..0128406ea 100644 --- a/modules/landing/LandingChartDiv.tsx +++ b/modules/landing/LandingChartDiv.tsx @@ -4,7 +4,7 @@ interface LandingChartDivProps { } export const LandingChartDiv: React.FC = ({ children }) => { return ( -

+
{children}
); diff --git a/modules/landing/LandingChartWidget.tsx b/modules/landing/LandingChartWidget.tsx index 53c91fa7e..380cdcd76 100644 --- a/modules/landing/LandingChartWidget.tsx +++ b/modules/landing/LandingChartWidget.tsx @@ -9,12 +9,14 @@ interface LandingChartWidgetProps { export const LandingChartWidget: React.FC = ({ title, children }) => { return ( -
-
-

{title}

- {LandingChartCopyMap[title]} +
+

{title}

+
+
{children}
+
+ {LandingChartCopyMap[title]} +
- {children}
); }; diff --git a/modules/landing/LandingCharts.tsx b/modules/landing/LandingCharts.tsx index 1a60b45e4..93487eb39 100644 --- a/modules/landing/LandingCharts.tsx +++ b/modules/landing/LandingCharts.tsx @@ -15,7 +15,7 @@ export const LandingCharts: React.FC = () => { line: 'line-red', }); return ( -
+
diff --git a/modules/landing/charts/LandingPageChart.tsx b/modules/landing/charts/LandingPageChart.tsx index 7f6916492..a6e16859f 100644 --- 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,6 +22,8 @@ interface LandingPageChartsProps { } export const LandingPageChart: React.FC = ({ 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 = ({ datasets, l intersect: false, mode: 'index', }, + watermark: watermarkLayout(isMobile), plugins: { tooltip: { position: 'nearest', @@ -91,9 +98,10 @@ export const LandingPageChart: React.FC = ({ datasets, l }, }, }} + plugins={[ChartjsPluginWatermark]} />
); - }, [datasets, labels, id]); + }, [datasets, labels, id, isMobile]); return chart; }; diff --git a/modules/landing/charts/OverallRidershipChart.tsx b/modules/landing/charts/OverallRidershipChart.tsx index c22c1848b..97ddcff20 100644 --- a/modules/landing/charts/OverallRidershipChart.tsx +++ b/modules/landing/charts/OverallRidershipChart.tsx @@ -14,8 +14,8 @@ export const OverallRidershipChart: React.FC = ({ ri const datasets = convertToRidershipDataset(ridershipData); return ( - {RidershipBaseline} + {RidershipBaseline} ); }; diff --git a/modules/landing/charts/OverallServiceChart.tsx b/modules/landing/charts/OverallServiceChart.tsx index 20b82bbbc..25fe07c66 100644 --- a/modules/landing/charts/OverallServiceChart.tsx +++ b/modules/landing/charts/OverallServiceChart.tsx @@ -15,8 +15,8 @@ export const OverallServiceChart: React.FC = ({ servic return ( - {ServiceBaseline} + {ServiceBaseline} ); }; diff --git a/modules/landing/charts/OverallSpeedChart.tsx b/modules/landing/charts/OverallSpeedChart.tsx index 63caf2e04..6d902f71c 100644 --- a/modules/landing/charts/OverallSpeedChart.tsx +++ b/modules/landing/charts/OverallSpeedChart.tsx @@ -14,8 +14,8 @@ export const OverallSpeedChart: React.FC = ({ speedData const datasets = convertToSpeedDataset(speedData); return ( - {SpeedBaseline} + {SpeedBaseline} ); };