Improve time formatting (#9)

.eslintrc.cjs

@@ -5,10 +5,11 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:react-hooks/recommended',
+    'prettier',
   ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
-  plugins: ['react', 'react-hooks', '@typescript-eslint', 'import', 'react-refresh'],
+  plugins: ['react', 'react-hooks', '@typescript-eslint', 'import', 'react-refresh', 'prettier'],
   rules: {
     'import/named': 'warn',
     'import/no-self-import': 'error',
@@ -28,6 +29,7 @@ module.exports = {
         ignoreTypeImports: false,
       },
     ],
+    'prettier/prettier': 'error',
     'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
   },
 };

.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+*.pyc
 
 # Editor directories and files
 .vscode/*

package.json

@@ -48,12 +48,14 @@
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.16",
     "eslint": "^8.55.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-prettier": "^5.1.2",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "postcss": "^8.4.33",
-    "prettier": "3.2.1",
+    "prettier": "3.2.5",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.2.2",
     "vite": "^5.0.8"

src/api/traveltimes.ts

@@ -52,10 +52,7 @@ export const fetchAggregateData = async (
   return name === QueryNameKeys.traveltimes ? responseJson : { by_date: responseJson };
 };
 
-export const useTripExplorerQueries = (
-  parameters: AggregateAPIOptions,
-  enabled = true
-) => {
+export const useTripExplorerQueries = (parameters: AggregateAPIOptions, enabled = true) => {
   const queryTypes = [QueryNameKeys.traveltimes, QueryNameKeys.headways, QueryNameKeys.dwells];
   const dependencies = aggregateQueryDependencies;
   // Create objects with keys of query names which contains keys and parameters.
@@ -78,8 +75,7 @@ export const useTripExplorerQueries = (
     queries: queryTypes.map((name) => {
       return {
         queryKey: [name, queries[name].params],
-        queryFn: () =>
-          fetchAggregateData(name, queries[name].params),
+        queryFn: () => fetchAggregateData(name, queries[name].params),
         enabled,
         staleTime: ONE_MINUTE,
       };

src/api/types.ts

@@ -17,7 +17,6 @@ export const QUERIES: { [key in RouteType]: QueryNameOptions[] } = {
   cr: [QueryNameKeys.traveltimes, QueryNameKeys.headways],
 };
 
-
 export enum AggregateAPIParams {
   stop = 'stop',
   fromStop = 'from_stop',

src/components/DirectionIndicator.tsx

@@ -0,0 +1,15 @@
+import { ArrowDownCircleIcon } from '@heroicons/react/24/solid';
+import { ArrowUpCircleIcon } from '@heroicons/react/24/solid';
+import React from 'react';
+
+interface DirectionIndicatorProps {
+  direction?: 'up' | 'down';
+}
+
+export const DirectionIndicator: React.FC<DirectionIndicatorProps> = ({ direction }) => {
+  if (direction === 'up') {
+    return <ArrowUpCircleIcon className={`ml-1 h-6 w-6 inline-block text-red-500`} />;
+  } else if (direction === 'down') {
+    return <ArrowDownCircleIcon className={`ml-1 h-6 w-6 inline-block text-green-500`} />;
+  }
+};

src/components/Shutdowns/ChartContainer.tsx

@@ -4,6 +4,7 @@ import { Shutdown } from '../../types';
 import TravelTimesChart from '../charts/TravelTimesChart';
 import { AggregateDataResponse } from '../charts/types';
 import { useBreakpoint } from '../../hooks/useBreakpoint';
+import { getFormattedTimeValue } from '../../utils/time';
 
 interface ChartContainerProps {
   shutdown: Shutdown;
@@ -19,13 +20,13 @@ const ChartContainer = ({ before, after, shutdown, title }: ChartContainerProps)
   const beforeData = before.data!.by_date.filter((datapoint) => datapoint.peak === 'all');
   const afterData = after.data!.by_date.filter((datapoint) => datapoint.peak === 'all');
 
-  const beforeAvg = (beforeData.reduce((a, b) => a + b['50%'], 0) / beforeData.length / 60).toFixed(
-    2
-  );
+  const beforeAvg = beforeData.reduce((a, b) => a + b['50%'], 0) / beforeData.length;
+
+  const afterAvg = afterData.reduce((a, b) => a + b['50%'], 0) / afterData.length;
 
-  const afterAvg = (afterData.reduce((a, b) => a + b['50%'], 0) / afterData.length / 60).toFixed(2);
+  const difference = Number(afterAvg) - Number(beforeAvg);
+  const direction = !isNaN(difference) ? (beforeAvg > afterAvg ? 'down' : 'up') : undefined;
 
-  const difference = (Number(afterAvg) - Number(beforeAvg)).toFixed(2);
   return (
     <div className="flex md:flex-row flex-col gap-4 ">
       <div className={`flex-1 ${cardStyles}`}>
@@ -36,26 +37,26 @@ const ChartContainer = ({ before, after, shutdown, title }: ChartContainerProps)
       </div>
       <div className="flex md:flex-col flex-row md:gap-4 gap-2  ">
         <div className={`flex flex-col flex-1 ${cardStyles} justify-center text-center`}>
-          <dt className="md:truncate text-sm font-medium text-gray-500 align-middle ">
+          <dt className="md:truncate text-sm font-medium text-gray-700 dark:text-white align-middle ">
             {!isMobile ? 'Before' : 'Before shutdown'}
           </dt>
-          <dd className="mt-1 text-xl md:text-3xl font-semibold tracking-tight text-gray-900">
-            {beforeAvg}
+          <dd className="mt-1 text-xl md:text-3xl font-semibold tracking-tight">
+            {getFormattedTimeValue(beforeAvg, true)}
           </dd>
         </div>
         <div className={`flex flex-col flex-1 ${cardStyles} justify-center text-center`}>
-          <dt className="md:truncate text-sm font-medium text-gray-500">
+          <dt className="md:truncate text-sm font-medium text-gray-700 dark:text-white">
             {' '}
             {!isMobile ? 'After' : 'After shutdown'}
           </dt>
-          <dd className="mt-1 text-xl md:text-3xl font-semibold tracking-tight text-gray-900">
-            {afterAvg}
+          <dd className="mt-1 text-xl md:text-3xl font-semibold tracking-tight">
+            {getFormattedTimeValue(afterAvg, true)}
           </dd>
         </div>
         <div className={`flex flex-col flex-1 ${cardStyles} justify-center text-center`}>
-          <dt className="md:truncate text-sm font-medium text-gray-500">Change</dt>
-          <dd className="mt-1 text-xl md:text-3xl font-semibold tracking-tight text-gray-900">
-            {difference}
+          <dt className="md:truncate text-sm font-medium text-gray-700 dark:text-white">Change</dt>
+          <dd className="mt-1 text-xl md:text-3xl font-semibold tracking-tight">
+            {getFormattedTimeValue(difference, true, direction)}
           </dd>
         </div>
       </div>

src/components/UnitText.tsx

@@ -0,0 +1,15 @@
+import classNames from 'classnames';
+import React from 'react';
+
+interface UnitTextProps {
+  text: string;
+  isLarge?: boolean;
+}
+
+export const UnitText: React.FC<UnitTextProps> = ({ text, isLarge = false }) => {
+  return (
+    <span className={classNames('text-gray-700 dark:text-white', isLarge ? 'text-sm' : 'text-xs')}>
+      {text}
+    </span>
+  );
+};

src/components/WidgetText.tsx

@@ -0,0 +1,15 @@
+import classNames from 'classnames';
+import React from 'react';
+
+interface WidgetTextProps {
+  text: string;
+  isLarge?: boolean;
+}
+
+export const WidgetText: React.FC<WidgetTextProps> = ({ text, isLarge = false }) => {
+  return (
+    <span className={classNames('text-gray-700 dark:text-white', isLarge ? 'text-2xl' : 'text-sm')}>
+      {text}
+    </span>
+  );
+};

src/components/charts/AggregateLineChart.tsx

@@ -11,8 +11,8 @@ import { writeError } from '../../utils/chartError';
 import { CHART_COLORS } from '../../constants/colors';
 import { watermarkLayout } from '../../utils/watermark';
 import { AggregateDataPoint } from '../../api/types';
-import { AggregateLineProps } from './types';
 import { useStore } from '../../store';
+import { AggregateLineProps } from './types';
 
 const xAxisLabel = (startDate: string, endDate: string, hourly: boolean) => {
   if (hourly) {
@@ -156,6 +156,8 @@ export const AggregateLineChart: React.FC<AggregateLineProps> = ({
           afterDraw: (chart: ChartJS) => {
             if (startDate === undefined || endDate === undefined || beforeData.length === 0) {
               writeError(chart);
+            } else if (afterData.length === 0 || afterData.length < 7) {
+              writeError(chart, 'Analysis still in progress, numbers not final.');
             }
           },
         },

src/components/charts/TravelTimesChart.tsx

@@ -1,9 +1,9 @@
-import { AggregateLineChart } from './AggregateLineChart';
+import dayjs from 'dayjs';
 import { Shutdown } from '../../types';
-import { AggregateDataPoint, PointFieldKeys } from './types';
 import { CHART_COLORS } from '../../constants/colors';
 import { getLocationDetails } from '../../utils/stations';
-import dayjs from 'dayjs';
+import { AggregateLineChart } from './AggregateLineChart';
+import { AggregateDataPoint, PointFieldKeys } from './types';
 
 interface TravelTimesChartProps {
   shutdown: Shutdown;

src/constants/colors.ts

@@ -1,10 +1,8 @@
-
 export const hexWithAlpha = (hexColor: string, alpha: number) => {
   const opacity = Math.round(Math.min(Math.max(alpha || 1, 0), 1) * 255);
   return hexColor + opacity.toString(16).toUpperCase();
 };
 
-
 export const COLORS = {
   mbta: {
     red: '#D13434',
@@ -45,4 +43,3 @@ export const CHART_COLORS = {
   ANNOTATIONS: hexWithAlpha('#202020', 0.4),
   BLOCKS: hexWithAlpha('#202020', 0.2),
 };
-

src/constants/styles.ts

@@ -1 +1 @@
-export const cardStyles = 'rounded-lg bg-white dark:dark:bg-slate-700 dark:text-white p-4 shadow'
+export const cardStyles = 'rounded-lg bg-white dark:dark:bg-slate-700 dark:text-white p-4 shadow';