Tweaks to chart format and colors (#835)

* Tweaks to chart format and colors * Linting * Changes based on feedback * Change captializations
transitmatters · Aug 21, 2023 · ae8b1d1 · ae8b1d1
1 parent ebdcb14
commit ae8b1d1
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 12 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -26,8 +26,8 @@ Steps to reproduce the behavior:
 **Device Info (please complete the following information):**
  - Device: [e.g. iPhone 6, Laptop]
  - OS: [e.g. iOS, Windows]
- - Browser: [e.g. chrome, safari]
- - Version: [e.g. 22]
+ - Browser: [e.g. Chrome, Safari]
+ - Browser Version: [e.g. 22]
 
 **Additional context**
 <!-- Add any other context about the problem here. -->
diff --git a/.github/workflows/healthcheck.yml b/.github/workflows/healthcheck.yml
@@ -1,6 +1,7 @@
 name: healthcheck
 
 on:
+  workflow_dispatch:
   schedule:
     - cron: '15 23 * * *' # 7:15PM EST every day
 

diff --git a/common/types/basicWidgets.tsx b/common/types/basicWidgets.tsx
@@ -145,7 +145,7 @@ export class PercentageWidgetValue extends BaseWidgetValue implements WidgetValu
 
 export class TripsWidgetValue extends BaseWidgetValue implements WidgetValueInterface {
   getUnits() {
-    return 'Trips';
+    return 'Round trips';
   }
 
   getFormattedValue(isLarge?: boolean) {
@@ -188,7 +188,7 @@ export class MPHWidgetValue extends BaseWidgetValue implements WidgetValueInterf
 
 export class RidersWidgetValue extends BaseWidgetValue implements WidgetValueInterface {
   getUnits() {
-    return 'Riders';
+    return 'Fare validations';
   }
 
   getFormattedValue(isLarge?: boolean) {

diff --git a/modules/ridership/RidershipGraph.tsx b/modules/ridership/RidershipGraph.tsx
@@ -58,7 +58,7 @@ export const RidershipGraph: React.FC<RidershipGraphProps> = ({
               labels,
               datasets: [
                 {
-                  label: `Riders`,
+                  label: `Fare validations`,
                   borderColor: lineColor,
                   backgroundColor: hexWithAlpha(lineColor, 0.8),
                   pointRadius: 0,
@@ -71,7 +71,9 @@ export const RidershipGraph: React.FC<RidershipGraphProps> = ({
 
                 {
                   // This null dataset produces the entry in the legend for the peak annotation.
-                  label: `Historical Maximum (${PEAK_RIDERSHIP[routeIndex ?? 'DEFAULT']})`,
+                  label: `Historical Maximum (${PEAK_RIDERSHIP[
+                    routeIndex ?? 'DEFAULT'
+                  ].toLocaleString('en-us')} fare validations)`,
                   backgroundColor: CHART_COLORS.ANNOTATIONS,
                   data: null,
                 },
@@ -97,7 +99,7 @@ export const RidershipGraph: React.FC<RidershipGraphProps> = ({
                   callbacks: {
                     ...callbacks,
                     label: (context) => {
-                      return `${context.parsed.y} (${(
+                      return `${context.parsed.y.toLocaleString('en-us')} (${(
                         (100 * context.parsed.y) /
                         PEAK_RIDERSHIP[routeIndex ?? 'DEFAULT']
                       ).toFixed(1)}% of historical maximum)`;
@@ -139,7 +141,7 @@ export const RidershipGraph: React.FC<RidershipGraphProps> = ({
                   },
                   title: {
                     display: true,
-                    text: 'Trips',
+                    text: 'Fare validations',
                     color: COLORS.design.subtitleGrey,
                   },
                 },

diff --git a/modules/service/ServiceGraph.tsx b/modules/service/ServiceGraph.tsx
@@ -73,7 +73,7 @@ export const ServiceGraph: React.FC<ServiceGraphProps> = ({
                   ),
                 },
                 {
-                  label: `MBTA scheduled trips`,
+                  label: `Scheduled round trips`,
                   stepped: true,
                   fill: true,
                   pointBorderWidth: 0,
@@ -89,7 +89,7 @@ export const ServiceGraph: React.FC<ServiceGraphProps> = ({
                 },
                 {
                   // This null dataset produces the entry in the legend for the baseline annotation.
-                  label: `Historical Maximum (${peak})`,
+                  label: `Historical Maximum (${peak.toLocaleString('en-us')} round trips)`,
                   backgroundColor: CHART_COLORS.ANNOTATIONS,
                   data: null,
                 },
@@ -157,7 +157,7 @@ export const ServiceGraph: React.FC<ServiceGraphProps> = ({
                   },
                   title: {
                     display: true,
-                    text: 'trips',
+                    text: 'Round trips',
                     color: COLORS.design.subtitleGrey,
                   },
                 },

diff --git a/modules/speed/SpeedGraph.tsx b/modules/speed/SpeedGraph.tsx
@@ -53,6 +53,7 @@ export const SpeedGraph: React.FC<SpeedGraphProps> = ({
             datasets: [
               {
                 label: `MPH`,
+                backgroundColor: COLORS.design.background,
                 borderColor: LINE_COLORS[line ?? 'default'],
                 pointRadius: 0,
                 pointBorderWidth: 0,
@@ -67,7 +68,7 @@ export const SpeedGraph: React.FC<SpeedGraphProps> = ({
               },
               {
                 // This null dataset produces the entry in the legend for the baseline annotation.
-                label: `Historical Maximum (${peak})`,
+                label: `Historical Maximum (${peak} mph)`,
                 backgroundColor: CHART_COLORS.ANNOTATIONS,
                 data: null,
               },