Adding commuter rail ridership to dashboard

common/components/nav/CommuterRailDropdown.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SidebarTabs } from '../../../modules/navigation/SidebarTabs';
-import { TRIP_PAGES, COMMUTER_RAIL_OVERVIEW } from '../../constants/pages';
+import { COMMUTER_RAIL_OVERVIEW } from '../../constants/pages';
 import { CommuterRailRouteSelection } from './CommuterRailRouteSelection';
 
 interface CommuterRailDropdownProps {
@@ -18,8 +18,10 @@ export const CommuterRailDropdown: React.FC<CommuterRailDropdownProps> = ({ clos
         role={'navigation'}
       >
         <SidebarTabs tabs={COMMUTER_RAIL_OVERVIEW} close={close} />
-        <hr className="h-[1px] w-3/4 self-center border-neutral-500" />
-        <SidebarTabs tabs={TRIP_PAGES} close={close} />
+
+        {/* TODO: Once we have reliable travel data for CR */}
+        {/* <hr className="h-[1px] w-3/4 self-center border-neutral-500" /> */}
+        {/* <SidebarTabs tabs={TRIP_PAGES} close={close} /> */}
       </div>
     </div>
   );

common/components/nav/MenuDropdown.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import Link from 'next/link';
 import React, { useEffect, useState } from 'react';
 import { LINE_OBJECTS } from '../../constants/lines';
-import { BUS_DEFAULTS } from '../../state/defaults/dateDefaults';
+import { BUS_DEFAULTS, COMMUTER_RAIL_DEFAULTS } from '../../state/defaults/dateDefaults';
 import { lineColorBackground } from '../../styles/general';
 import type { Line } from '../../types/lines';
 import type { Route } from '../../types/router';
@@ -38,15 +38,20 @@ export const MenuDropdown: React.FC<MenuDropdownProps> = ({ line, route, childre
     }
   }, [line]);
 
+  const href = React.useMemo(() => {
+    switch (line) {
+      case 'line-bus':
+        return `/bus/trips/single?busRoute=1&date=${BUS_DEFAULTS.singleTripConfig.date}`;
+      case 'line-commuter-rail':
+        return `/commuter-rail/ridership?crRoute=CR-Lowell&startDate=${COMMUTER_RAIL_DEFAULTS.lineConfig.startDate}&endDate=${COMMUTER_RAIL_DEFAULTS.lineConfig.endDate}`;
+      default:
+        return getLineSelectionItemHref(line, route);
+    }
+  }, [line, route]);
+
   return (
     <div className={classNames('w-full')}>
-      <Link
-        href={
-          line === 'line-bus'
-            ? `/bus/trips/single?busRoute=1&date=${BUS_DEFAULTS.singleTripConfig.date}`
-            : getLineSelectionItemHref(line, route)
-        }
-      >
+      <Link href={href}>
         <div
           className={classNames(
             'flex w-full flex-row items-center gap-2 rounded-t-md py-1 pl-1 text-sm',

common/components/notices/BetaDataNotice.tsx

@@ -20,7 +20,7 @@ export const BetaDataNotice: React.FC = () => {
   const isEndDateAfterBusMaxDay = endDate !== undefined && dayjs(endDate).isAfter(BUS_MAX_DAY);
 
   if (
-    (line === 'line-bus' || linePath === 'bus') &&
+    (line === 'line-commuter-rail' || linePath === 'commuter-rail') &&
     (isStartDateAfterBusMaxDay || isEndDateAfterBusMaxDay)
   ) {
     return (
@@ -30,7 +30,9 @@ export const BetaDataNotice: React.FC = () => {
             <ExclamationTriangleIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" />
           </div>
           <div className="ml-3">
-            <h3 className="text-sm font-medium text-yellow-800">Real-time bus data is in beta</h3>
+            <h3 className="text-sm font-medium text-yellow-800">
+              Real-time Commuter Rail data is in beta
+            </h3>
             <div className="mt-2 text-sm text-yellow-700">
               <p>
                 TransitMatters collects this data using the{' '}
@@ -46,8 +48,7 @@ export const BetaDataNotice: React.FC = () => {
                 Please expect reduced accuracy.
               </p>
               <p>
-                We favor official performance data from the MBTA when it's available. Technical
-                details of our data collection are available in our{' '}
+                Technical details of our data collection are available in our{' '}
                 <Link
                   href="https://github.com/transitmatters/gobble"
                   rel="noopener noreferrer"

common/components/notices/GobbleDataNotice.tsx

@@ -21,8 +21,10 @@ export const GobbleDataNotice: React.FC = () => {
   const isEndDateAfterBusMaxDay = endDate !== undefined && dayjs(endDate).isAfter(BUS_MAX_DAY);
 
   if (
-    (line === 'line-bus' || linePath === 'bus') &&
-    (isStartDateAfterBusMaxDay || isEndDateAfterBusMaxDay)
+    ((line === 'line-bus' || linePath === 'bus') &&
+      (isStartDateAfterBusMaxDay || isEndDateAfterBusMaxDay)) ||
+    line === 'line-commuter-rail' ||
+    linePath === 'commuter-rail'
   ) {
     return (
       <div className={'flex items-center'}>

common/components/notices/SameDayNotice.tsx

@@ -6,21 +6,16 @@ import { TODAY_STRING } from '../../constants/dates';
 
 export const SameDayNotice: React.FC = () => {
   const {
-    line,
     query: { date, endDate },
   } = useDelimitatedRoute();
   const isToday = date === TODAY_STRING || endDate === TODAY_STRING;
 
-  if (isToday && line !== 'line-bus') {
+  if (isToday) {
     return (
       <div className={'flex items-center'}>
         <FontAwesomeIcon icon={faCalendarDay} size={'lg'} />
         <div className={'mx-3 my-2 text-sm italic'}>
-          <p>
-            Due to data not being cleaned yet, today's data may not be fully accurate and may look
-            messy.
-          </p>
-          <p>Data is cleaned up overnight and should be more accurate tomorrow.</p>
+          <p>Data from today may not be complete. Data comes in with a delay of up to two hours</p>
         </div>
       </div>
     );

common/constants/baselines.ts

@@ -1,4 +1,4 @@
-import type { BusRouteId, Line } from '../types/lines';
+import type { BusRouteId, CommuterRailRoute, Line } from '../types/lines';
 
 // These are manually chosen based off the peak *monthly* scheduled service. Selecting highest value "
 export const PEAK_SCHEDULED_SERVICE = {
@@ -20,7 +20,7 @@ export const PEAK_SPEED = {
 
 // These are manually chosen based off the peak value. Need to be updated when all data is generated.
 export const PEAK_RIDERSHIP: {
-  [key in Exclude<Line, 'line-bus' | 'line-commuter-rail'> | BusRouteId | 'DEFAULT']: number;
+  [key in Exclude<Line, 'line-bus'> | BusRouteId | CommuterRailRoute | 'DEFAULT']: number;
 } = {
   'line-red': 213703,
   'line-orange': 169578,
@@ -58,6 +58,19 @@ export const PEAK_RIDERSHIP: {
   '111': 11258,
   '114116117': 12867,
   '220221222': 3370,
+  'CR-Fitchburg': 9302,
+  'CR-Franklin': 11671,
+  'CR-Greenbush': 6114,
+  'CR-Haverhill': 7112,
+  'CR-Lowell': 10925,
+  'CR-Worcester': 18637,
+  'CR-Fairmount': 2652,
+  'CR-Kingston': 6089,
+  'CR-Middleborough': 6863,
+  'CR-Needham': 6690,
+  'CR-Newburyport': 14972,
+  'CR-Providence': 25728,
+  'line-commuter-rail': 126755,
   DEFAULT: 520580,
 };
 

common/constants/colors.ts

@@ -1,3 +1,4 @@
+import type { Line } from '../types/lines';
 import { hexWithAlpha } from '../utils/general';
 
 export const COLORS = {
@@ -44,20 +45,24 @@ export const CHART_COLORS = {
   BLOCKS_SOLID: '#d2d2d2',
 };
 
-export const LINE_COLORS = {
-  'line-red': '#D13434',
-  'line-orange': '#ed8b00',
-  'line-blue': '#003da5',
-  'line-green': '#00834d',
-  'line-bus': '#ffc72c',
+export const LINE_COLORS: { [key in Line | 'default']: string } = {
+  'line-red': COLORS.mbta.red,
+  'line-orange': COLORS.mbta.orange,
+  'line-blue': COLORS.mbta.blue,
+  'line-green': COLORS.mbta.green,
+  'line-bus': COLORS.mbta.bus,
+  'line-commuter-rail': COLORS.mbta.commuterRail,
   default: '#303030',
 };
 
-export const LINE_COLORS_LEVELS = {
+export const LINE_COLORS_LEVELS: {
+  [key in Line | 'default']: { [num in number]: string } | string;
+} = {
   'line-red': { 0: '#D13434', 1: '#d64949', 2: '#da5e5e', 3: '#df7272' },
   'line-orange': { 0: '#ed8b00', 1: '#ff9907', 2: '#ffa321', 3: '#ffae3b' },
   'line-blue': { 0: '#003da5', 1: '#0046bf', 2: '#0050d8', 3: '#0059f2' },
   'line-green': { 0: '#00834d', 1: '#009d5c', 2: '#00b66b', 3: '#00d07a' },
   'line-bus': { 0: '#ffc72c', 1: '#ffce46', 2: '#ffd55f', 3: '#ffdb79' },
+  'line-commuter-rail': { 0: '#80276c', 1: '#8f2f7e', 2: '#9e3790', 3: '#ad41a2' },
   default: '#303030',
 };

common/constants/dashboardTabs.ts

@@ -1,7 +1,5 @@
-import { BUS_DEFAULTS } from '../state/defaults/dateDefaults';
-import type { QueryParams } from '../types/router';
-
-export type Tab = 'Subway' | 'Bus' | 'System';
+import { BUS_DEFAULTS, COMMUTER_RAIL_DEFAULTS } from '../state/defaults/dateDefaults';
+import type { QueryParams, Tab } from '../types/router';
 
 export const DASHBOARD_TABS: {
   [key in Tab]: { name: Tab; path: string; disabled?: boolean; query?: QueryParams };
@@ -13,4 +11,9 @@ export const DASHBOARD_TABS: {
     path: '/bus/trips/single',
     query: { busRoute: '1', date: BUS_DEFAULTS.singleTripConfig.date },
   },
+  'Commuter Rail': {
+    name: 'Commuter Rail',
+    path: '/commuter-rail',
+    query: { crRoute: 'CR-Lowell', date: COMMUTER_RAIL_DEFAULTS.singleTripConfig.date },
+  },
 };

common/constants/dates.ts

@@ -8,7 +8,7 @@ import type {
   DateSelectionDefaultOptions,
   SingleDateParams,
 } from '../components/inputs/DateSelection/types/DateSelectionTypes';
-import type { Tab } from './dashboardTabs';
+import type { Tab } from '../types/router';
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
@@ -40,6 +40,7 @@ export const BUS_MAX_DAY = dayjs(BUS_MAX_DATE);
 export const BUS_MAX_DATE_MINUS_ONE_WEEK = dayjs(BUS_MAX_DATE)
   .subtract(7, 'days')
   .format(DATE_FORMAT);
+export const COMMUTER_RAIL_MIN_DATE = '2022-06-22';
 
 export const getESTDayjs = (date: string) => {
   return dayjs(date).tz(est);
@@ -72,6 +73,14 @@ export const FLAT_PICKER_OPTIONS: {
     altFormat: 'M j, Y',
     dateFormat: 'Y-m-d',
   },
+  'Commuter Rail': {
+    enableTime: false,
+    minDate: COMMUTER_RAIL_MIN_DATE,
+    maxDate: TODAY_STRING,
+    altInput: true,
+    altFormat: 'M j, Y',
+    dateFormat: 'Y-m-d',
+  },
 };
 
 const SINGLE_RAPID_PRESETS: {
@@ -143,6 +152,7 @@ export const SINGLE_PRESETS: {
   Subway: SINGLE_RAPID_PRESETS,
   Bus: SINGLE_RAPID_PRESETS,
   System: SINGLE_RAPID_PRESETS,
+  'Commuter Rail': SINGLE_RAPID_PRESETS,
 };
 
 const RANGE_RAPID_PRESETS: {
@@ -265,6 +275,7 @@ export const RANGE_PRESETS: {
   Subway: RANGE_RAPID_PRESETS,
   Bus: RANGE_RAPID_PRESETS,
   System: RANGE_RAPID_PRESETS,
+  'Commuter Rail': RANGE_RAPID_PRESETS,
 };
 
 export type DatePresetKey =

common/constants/pages.ts

@@ -141,7 +141,7 @@ export const ALL_PAGES: PageMap = {
     key: 'ridership',
     path: '/ridership',
     name: 'Ridership',
-    lines: ['line-red', 'line-blue', 'line-green', 'line-orange', 'line-bus'],
+    lines: ['line-red', 'line-blue', 'line-green', 'line-orange', 'line-bus', 'line-commuter-rail'],
     icon: faUsers,
     dateStoreSection: 'line',
   },

common/constants/stations.ts

@@ -1,5 +1,5 @@
 /* eslint-disable import/max-dependencies */
-import type { LineShort } from '../types/lines';
+import { COMMUTER_RAIL_ROUTES, type LineShort } from '../types/lines';
 import type { LineMap } from '../types/stations';
 import stations_json from './stations.json';
 import bus_1 from './bus_constants/1.json';
@@ -82,5 +82,7 @@ export const getBusRoutes = (): string[] => {
 };
 
 export const getCommuterRailRoutes = (): string[] => {
+  return COMMUTER_RAIL_ROUTES;
+  // TODO: use this once we are on trips
   return Object.keys(commuterRailStations);
 };

common/layouts/DashboardLayout.tsx

@@ -14,7 +14,7 @@ interface DashboardLayoutProps {
 export const DashboardLayout: React.FC<DashboardLayoutProps> = ({ children }) => {
   const isMobile = !useBreakpoint('md');
   const { line, page, query, tab } = useDelimitatedRoute();
-  const { busRoute } = query;
+  const { busRoute, crRoute } = query;
   const dateStoreSection = page ? ALL_PAGES[page]?.dateStoreSection : undefined;
   const showControlParams =
     dateStoreSection && (line || tab === 'System') && dateStoreSection !== 'today';

common/state/dateStore.ts

@@ -1,6 +1,6 @@
 import { create } from 'zustand';
 import { OVERVIEW_OPTIONS, TODAY_STRING } from '../constants/dates';
-import type { Tab } from '../constants/dashboardTabs';
+import type { Tab } from '../types/router';
 import type {
   LineSectionParams,
   MultiTripsSectionParams,

common/state/defaults/dateDefaults.ts

@@ -1,4 +1,4 @@
-import type { Tab } from '../../constants/dashboardTabs';
+import type { Tab } from '../../types/router';
 import type { DateStoreSection } from '../../constants/pages';
 import type { DateStoreConfiguration } from '../types/dateStoreTypes';
 import {
@@ -7,6 +7,7 @@ import {
   TODAY_STRING,
   YESTERDAY_STRING,
   TODAY_SERVICE_STARTED,
+  COMMUTER_RAIL_MIN_DATE,
 } from '../../constants/dates';
 import type { WithOptional } from '../../types/general';
 
@@ -34,6 +35,20 @@ export const BUS_DEFAULTS: WithOptional<DateStoreConfiguration, 'systemConfig' |
     },
   };
 
+export const COMMUTER_RAIL_DEFAULTS: WithOptional<
+  DateStoreConfiguration,
+  'systemConfig' | 'overviewPreset'
+> = {
+  lineConfig: { startDate: OVERVIEW_OPTIONS.year.startDate, endDate: TODAY_STRING },
+  multiTripConfig: {
+    startDate: COMMUTER_RAIL_MIN_DATE,
+    endDate: TODAY_STRING,
+  },
+  singleTripConfig: {
+    date: TODAY_SERVICE_STARTED ? TODAY_STRING : YESTERDAY_STRING,
+  },
+};
+
 const SYSTEM_DEFAULTS: Partial<DateStoreConfiguration> = {
   systemConfig: { startDate: OVERVIEW_OPTIONS.year.startDate, endDate: TODAY_STRING },
 };
@@ -42,6 +57,7 @@ const TAB_DATE_MAP: { [key in Tab]: Partial<DateStoreConfiguration> } = {
   Subway: SUBWAY_DEFAULTS,
   Bus: BUS_DEFAULTS,
   System: SYSTEM_DEFAULTS,
+  'Commuter Rail': COMMUTER_RAIL_DEFAULTS,
 };
 
 export const getDefaultDates = (dateStoreSection: DateStoreSection, tab: Tab) => {

common/styles/general.ts

@@ -10,7 +10,7 @@ export const lineColorBackground: DefaultStyleMap = {
   DEFAULT: `bg-stone-800`,
 };
 
-export const lineColorLightBorder = {
+export const lineColorLightBorder: DefaultStyleMap = {
   'line-red': `border-mbta-lightRed`,
   'line-orange': `border-mbta-lightOrange`,
   'line-green': `border-mbta-lightGreen`,

common/types/lines.ts

@@ -93,7 +93,13 @@ export const GTFS_COLOR_LINE_IDS = ['line-Red', 'line-Orange', 'line-Blue', 'lin
 export type GtfsColorLineId = (typeof GTFS_COLOR_LINE_IDS)[number];
 
 export const HEAVY_RAIL_LINES: Line[] = ['line-red', 'line-orange', 'line-blue'];
-export const LANDING_RAIL_LINES: Line[] = ['line-red', 'line-orange', 'line-blue', 'line-green'];
+export const LANDING_RAIL_LINES: Line[] = [
+  'line-red',
+  'line-orange',
+  'line-blue',
+  'line-green',
+  'line-commuter-rail',
+];
 
 export const RAIL_LINES = ['red', 'orange', 'green', 'blue'];
 export const BUS_ROUTES: BusRoute[] = [
@@ -174,3 +180,9 @@ export const BUS_PATH = {
     line: 'bus',
   },
 };
+
+export const COMMUTER_RAIL_PATH = {
+  params: {
+    line: 'commuter-rail',
+  },
+};

common/types/router.ts

@@ -28,4 +28,4 @@ export type QueryParams = {
 
 export type QueryTypeOptions = 'single' | 'range';
 
-export type Tab = 'Bus' | 'Subway' | 'System';
+export type Tab = 'Bus' | 'Subway' | 'Commuter Rail' | 'System';