Make the Dashboard tab configurable, and implement new components

package.cordovabuild.json

@@ -139,7 +139,7 @@
     "cordova-custom-config": "^5.1.1",
     "cordova-plugin-ibeacon": "git+https://github.com/louisg1337/cordova-plugin-ibeacon.git",
     "core-js": "^2.5.7",
-    "e-mission-common": "git+https://github.com/JGreenlee/e-mission-common.git#0.4.4",
+    "e-mission-common": "github:JGreenlee/e-mission-common#semver:0.5.1",
     "enketo-core": "^6.1.7",
     "enketo-transformer": "^4.0.0",
     "fast-xml-parser": "^4.2.2",

package.serve.json

@@ -65,7 +65,7 @@
     "chartjs-adapter-luxon": "^1.3.1",
     "chartjs-plugin-annotation": "^3.0.1",
     "core-js": "^2.5.7",
-    "e-mission-common": "git+https://github.com/JGreenlee/e-mission-common.git#0.4.4",
+    "e-mission-common": "github:JGreenlee/e-mission-common#semver:0.5.1",
     "enketo-core": "^6.1.7",
     "enketo-transformer": "^4.0.0",
     "fast-xml-parser": "^4.2.2",

www/__tests__/metricsHelper.test.ts

@@ -1,51 +1,53 @@
+import { DateTime } from 'luxon';
 import {
   calculatePercentChange,
   formatDate,
   formatDateRangeOfDays,
   getLabelsForDay,
   getUniqueLabelsForDays,
+  secondsToHours,
+  secondsToMinutes,
   segmentDaysByWeeks,
+  metricToValue,
+  tsForDayOfMetricData,
+  valueForFieldOnDay,
+  generateSummaryFromData,
+  isCustomLabels,
+  isAllCustom,
+  isOnFoot,
 } from '../js/metrics/metricsHelper';
-import {
-  DayOfClientMetricData,
-  DayOfMetricData,
-  DayOfServerMetricData,
-} from '../js/metrics/metricsTypes';
+import { DayOfMetricData } from '../js/metrics/metricsTypes';
 
 describe('metricsHelper', () => {
   describe('getUniqueLabelsForDays', () => {
     const days1 = [
-      { label_a: 1, label_b: 2 },
-      { label_c: 1, label_d: 3 },
-    ] as any as DayOfServerMetricData[];
-    it("should return unique labels for days with 'label_*'", () => {
+      { mode_confirm_a: 1, mode_confirm_b: 2 },
+      { mode_confirm_b: 1, mode_confirm_c: 3 },
+      { mode_confirm_c: 1, mode_confirm_d: 3 },
+    ] as any as DayOfMetricData[];
+    it("should return unique labels for days with 'mode_confirm_*'", () => {
       expect(getUniqueLabelsForDays(days1)).toEqual(['a', 'b', 'c', 'd']);
     });
-
-    const days2 = [
-      { mode_a: 1, mode_b: 2 },
-      { mode_c: 1, mode_d: 3 },
-    ] as any as DayOfClientMetricData[];
-    it("should return unique labels for days with 'mode_*'", () => {
-      expect(getUniqueLabelsForDays(days2)).toEqual(['a', 'b', 'c', 'd']);
-    });
   });
 
   describe('getLabelsForDay', () => {
-    const day1 = { label_a: 1, label_b: 2 } as any as DayOfServerMetricData;
-    it("should return labels for a day with 'label_*'", () => {
+    const day1 = { mode_confirm_a: 1, mode_confirm_b: 2 } as any as DayOfMetricData;
+    it("should return labels for a day with 'mode_confirm_*'", () => {
       expect(getLabelsForDay(day1)).toEqual(['a', 'b']);
     });
+  });
 
-    const day2 = { mode_a: 1, mode_b: 2 } as any as DayOfClientMetricData;
-    it("should return labels for a day with 'mode_*'", () => {
-      expect(getLabelsForDay(day2)).toEqual(['a', 'b']);
+  describe('secondsToMinutes', () => {
+    it("should convert from seconds to minutes properly", () => {
+      expect(secondsToMinutes(360)).toEqual(6);
     });
   });
 
-  // secondsToMinutes
-
-  // secondsToHours
+  describe('secondsToHours', () => {
+    it("should convert from seconds to hours properly", () => {
+      expect(secondsToHours(3600)).toEqual(1);
+    });
+  });
 
   describe('segmentDaysByWeeks', () => {
     const days1 = [
@@ -55,7 +57,7 @@ describe('metricsHelper', () => {
       { date: '2021-01-08' },
       { date: '2021-01-09' },
       { date: '2021-01-10' },
-    ] as any as DayOfClientMetricData[];
+    ] as any as DayOfMetricData[];
 
     it("should segment days with 'date' into weeks", () => {
       expect(segmentDaysByWeeks(days1, '2021-01-10')).toEqual([
@@ -70,59 +72,168 @@ describe('metricsHelper', () => {
         [{ date: '2021-01-01' }, { date: '2021-01-02' }],
       ]);
     });
-
-    const days2 = [
-      { fmt_time: '2021-01-01T00:00:00Z' },
-      { fmt_time: '2021-01-02T00:00:00Z' },
-      { fmt_time: '2021-01-04T00:00:00Z' },
-      { fmt_time: '2021-01-08T00:00:00Z' },
-      { fmt_time: '2021-01-09T00:00:00Z' },
-      { fmt_time: '2021-01-10T00:00:00Z' },
-    ] as any as DayOfServerMetricData[];
-    it("should segment days with 'fmt_time' into weeks", () => {
-      expect(segmentDaysByWeeks(days2, '2021-01-10')).toEqual([
-        // most recent week
-        [
-          { fmt_time: '2021-01-04T00:00:00Z' },
-          { fmt_time: '2021-01-08T00:00:00Z' },
-          { fmt_time: '2021-01-09T00:00:00Z' },
-          { fmt_time: '2021-01-10T00:00:00Z' },
-        ],
-        // prior week
-        [{ fmt_time: '2021-01-01T00:00:00Z' }, { fmt_time: '2021-01-02T00:00:00Z' }],
-      ]);
-    });
   });
 
   describe('formatDate', () => {
-    const day1 = { date: '2021-01-01' } as any as DayOfClientMetricData;
+    const day1 = { date: '2021-01-01' } as any as DayOfMetricData;
     it('should format date', () => {
       expect(formatDate(day1)).toEqual('1/1');
     });
-
-    const day2 = { fmt_time: '2021-01-01T00:00:00Z' } as any as DayOfServerMetricData;
-    it('should format date', () => {
-      expect(formatDate(day2)).toEqual('1/1');
-    });
   });
 
   describe('formatDateRangeOfDays', () => {
     const days1 = [
       { date: '2021-01-01' },
       { date: '2021-01-02' },
       { date: '2021-01-04' },
-    ] as any as DayOfClientMetricData[];
+    ] as any as DayOfMetricData[];
     it('should format date range for days with date', () => {
       expect(formatDateRangeOfDays(days1)).toEqual('1/1 - 1/4');
     });
+  });
+
+  describe('metricToValue', () => {
+    const metric = {
+      walking: 10,
+      nUsers: 5,
+    };
+    it('returns correct value for user population', () => {
+      const result = metricToValue('user', metric, 'walking');
+      expect(result).toBe(10); 
+    });
+
+    it('returns correct value for aggregate population', () => {
+      const result = metricToValue('aggregate', metric, 'walking');
+      expect(result).toBe(2); 
+    });
+  });
+
+  describe('isOnFoot', () => {
+    it('returns true for on foot mode', () => {
+      const result = isOnFoot('WALKING');
+      expect(result).toBe(true);
+    });
+
+    it('returns false for non on foot mode', () => {
+      const result = isOnFoot('DRIVING'); 
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('calculatePercentChange', () => {
+    it('calculates percent change correctly for low and high values', () => {
+      const pastWeekRange = { low: 10, high: 30 };
+      const previousWeekRange = { low: 5, high: 10 };
+      const result = calculatePercentChange(pastWeekRange, previousWeekRange);
+      expect(result.low).toBe(100);
+      expect(result.high).toBe(200);
+    });
+  });
+
+  describe('tsForDayOfMetricData', () => {
+    const mockDay = { 
+      date: '2024-05-28T12:00:00Z',
+      nUsers: 10, 
+    };
+    let _datesTsCache;
+    beforeEach(() => {
+      _datesTsCache = {};
+    });
+
+    it('calculates timestamp for a given day', () => {
+      const expectedTimestamp = DateTime.fromISO(mockDay.date).toSeconds();
+      const result = tsForDayOfMetricData(mockDay);
+      expect(result).toBe(expectedTimestamp);
+    });
+
+    it('caches the timestamp for subsequent calls with the same day', () => {
+      const firstResult = tsForDayOfMetricData(mockDay);
+      const secondResult = tsForDayOfMetricData(mockDay);
+      expect(secondResult).toBe(firstResult);
+    });
+  });
+
+  describe('valueForFieldOnDay', () => {
+    const mockDay = {
+      date: '2024-05-28T12:00:00Z',
+      nUsers: 10,
+      field_key: 'example_value'
+    };
+
+    it('returns the value for a specified field and key', () => {
+      const result = valueForFieldOnDay(mockDay, 'field', 'key');
+      expect(result).toBe('example_value');
+    });
+  });
 
-    const days2 = [
-      { fmt_time: '2021-01-01T00:00:00Z' },
-      { fmt_time: '2021-01-02T00:00:00Z' },
-      { fmt_time: '2021-01-04T00:00:00Z' },
-    ] as any as DayOfServerMetricData[];
-    it('should format date range for days with fmt_time', () => {
-      expect(formatDateRangeOfDays(days2)).toEqual('1/1 - 1/4');
+  describe('generateSummaryFromData', () => {
+    const modeMap = [
+        { key: 'mode1', values: [['value1', 10], ['value2', 20]] },
+        { key: 'mode2', values: [['value3', 30], ['value4', 40]] },
+      ];
+    it('returns summary with sum for non-speed metric', () => {
+      const metric = 'some_metric';
+      const expectedResult = [
+        { key: 'mode1', values: 30 }, 
+        { key: 'mode2', values: 70 }, 
+      ];
+      const result = generateSummaryFromData(modeMap, metric);
+      expect(result).toEqual(expectedResult);
+    });
+
+    it('returns summary with average for speed metric', () => {
+      const metric = 'mean_speed';
+      const expectedResult = [
+        { key: 'mode1', values: 15 }, 
+        { key: 'mode2', values: 35 }, 
+      ];
+      const result = generateSummaryFromData(modeMap, metric);
+      expect(result).toEqual(expectedResult);
+    });
+  });
+
+  describe('isCustomLabels', () => {
+    const modeMap = [
+      { key: 'label_mode1', values: [['value1', 10], ['value2', 20]] },
+      { key: 'label_mode2', values: [['value3', 30], ['value4', 40]] },
+    ];
+
+    it('returns true for all custom labels', () => {
+      const result = isCustomLabels(modeMap);
+      expect(result).toBe(true);
+    });
+
+    it('returns true for all sensed labels', () => {
+      const result = isCustomLabels(modeMap);
+      expect(result).toBe(true);
+    });
+
+    it('returns false for mixed custom and sensed labels', () => {
+      const result = isCustomLabels(modeMap);
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('isAllCustom', () => {
+    it('returns true when all keys are custom', () => {
+      const isSensedKeys = [false, false, false]; 
+      const isCustomKeys = [true, true, true];
+      const result = isAllCustom(isSensedKeys, isCustomKeys);
+      expect(result).toBe(true);
+    });
+
+    it('returns false when all keys are sensed', () => {
+      const isSensedKeys = [true, true, true]; 
+      const isCustomKeys = [false, false, false];
+      const result = isAllCustom(isSensedKeys, isCustomKeys);
+      expect(result).toBe(false);
+    });
+
+    it('returns undefined for mixed custom and sensed keys', () => {
+      const isSensedKeys = [true, false, true]; 
+      const isCustomKeys = [false, true, false];
+      const result = isAllCustom(isSensedKeys, isCustomKeys);
+      expect(result).toBe(undefined);
     });
   });
 });

www/i18n/en.json

@@ -115,7 +115,9 @@
     "trips": "trips",
     "hours": "hours",
     "minutes": "minutes",
-    "custom": "Custom"
+    "responses": "responses",
+    "custom": "Custom",
+    "no-data": "No data"
   },
 
   "diary": {
@@ -192,8 +194,9 @@
     "chart": "Chart",
     "change-data": "Change dates:",
     "distance": "Distance",
-    "trips": "Trips",
+    "count": "Trip Count",
     "duration": "Duration",
+    "response_count": "Response Count",
     "fav-mode": "My Favorite Mode",
     "speed": "My Speed",
     "footprint": "My Footprint",
@@ -222,7 +225,22 @@
     "weekly-goal-footnote": "³Weekly goal based on CDC recommendation of 150 minutes of moderate activity per week.",
     "labeled": "Labeled",
     "unlabeled": "Unlabeled²",
-    "footprint-label": "Footprint (kg CO₂)"
+    "footprint-label": "Footprint (kg CO₂)",
+    "surveys": "Surveys",
+    "leaderboard": "Leaderboard",
+    "survey-response-rate": "Survey Response Rate (%)",
+    "survey-leaderboard-desc": "This data has been accumulated since ",
+    "comparison": "Comparison",
+    "you": "You",
+    "others": "Others in group",
+    "trip-categories": "Trip Categories",
+    "ev-roading-trip": "EV Roaming trip",
+    "ev-return-trip": "EV Return trip",
+    "gas-car-trip": "Gas Car trip",
+    "response": "Response",
+    "no-response": "No Response",
+    "you-are-in": "You're in",
+    "place": " place!"
   },
 
   "details": {

www/js/Main.tsx

@@ -51,7 +51,9 @@ const Main = () => {
   const timelineContext = useTimelineContext();
 
   const routes = useMemo(() => {
-    const showMetrics = appConfig?.survey_info?.['trip-labels'] == 'MULTILABEL';
+    const showMetrics =
+      appConfig?.metrics?.phone_dashboard_ui ||
+      appConfig?.survey_info?.['trip-labels'] == 'MULTILABEL';
     return showMetrics ? defaultRoutes(t) : defaultRoutes(t).filter((r) => r.key != 'metrics');
   }, [appConfig, t]);