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