set the active modes based on config (active_travel_options.modes_list)

If there is no active_travel_options.modes_list, set the default active modes

www/js/metrics/ActiveMinutesTableCard.tsx

@@ -13,17 +13,22 @@ import { useTranslation } from 'react-i18next';
 import { ACTIVE_MODES } from './WeeklyActiveMinutesCard';
 import { labelKeyToRichMode } from '../survey/multilabel/confirmHelper';
 import TimelineContext from '../TimelineContext';
+import useAppConfig from '../useAppConfig';
 
 type Props = { userMetrics?: MetricsData };
 const ActiveMinutesTableCard = ({ userMetrics }: Props) => {
   const { colors } = useTheme();
   const { dateRange } = useContext(TimelineContext);
   const { t } = useTranslation();
+  const appConfig = useAppConfig();
+  // modes to consider as "active" for the purpose of calculating "active minutes", default : ['walk', 'bike']
+  const activeModes =
+    appConfig?.metrics?.phone_dashboard_ui?.active_travel_options?.modes_list ?? ACTIVE_MODES;
 
   const cumulativeTotals = useMemo(() => {
     if (!userMetrics?.duration) return [];
     const totals = {};
-    ACTIVE_MODES.forEach((mode) => {
+    activeModes.forEach((mode) => {
       const sum = userMetrics.duration.reduce(
         (acc, day) => acc + (valueForModeOnDay(day, mode) || 0),
         0,
@@ -40,7 +45,7 @@ const ActiveMinutesTableCard = ({ userMetrics }: Props) => {
       .reverse()
       .map((week) => {
         const totals = {};
-        ACTIVE_MODES.forEach((mode) => {
+        activeModes.forEach((mode) => {
           const sum = week.reduce((acc, day) => acc + (valueForModeOnDay(day, mode) || 0), 0);
           totals[mode] = secondsToMinutes(sum);
         });
@@ -54,7 +59,7 @@ const ActiveMinutesTableCard = ({ userMetrics }: Props) => {
     return userMetrics.duration
       .map((day) => {
         const totals = {};
-        ACTIVE_MODES.forEach((mode) => {
+        activeModes.forEach((mode) => {
           const sum = valueForModeOnDay(day, mode) || 0;
           totals[mode] = secondsToMinutes(sum);
         });
@@ -85,7 +90,7 @@ const ActiveMinutesTableCard = ({ userMetrics }: Props) => {
         <DataTable>
           <DataTable.Header>
             <DataTable.Title> </DataTable.Title>
-            {ACTIVE_MODES.map((mode, i) => (
+            {activeModes.map((mode, i) => (
               <DataTable.Title style={{ padding: 5 }} key={i}>
                 {labelKeyToRichMode(mode)}
               </DataTable.Title>
@@ -94,7 +99,7 @@ const ActiveMinutesTableCard = ({ userMetrics }: Props) => {
           {allTotals.slice(from, to).map((total, i) => (
             <DataTable.Row key={i} style={{ minHeight: 0, padding: 5 }}>
               <DataTable.Cell>{total['period']}</DataTable.Cell>
-              {ACTIVE_MODES.map((mode, j) => (
+              {activeModes.map((mode, j) => (
                 <DataTable.Cell key={j}>
                   {total[mode]} {t('metrics.minutes')}
                 </DataTable.Cell>

www/js/metrics/DailyActiveMinutesCard.tsx

@@ -8,20 +8,23 @@ import { labelKeyToRichMode, labelOptions } from '../survey/multilabel/confirmHe
 import LineChart from '../components/LineChart';
 import { getBaseModeByText } from '../diary/diaryHelper';
 import { tsForDayOfMetricData, valueForModeOnDay } from './metricsHelper';
-
-const ACTIVE_MODES = ['walk', 'bike'] as const;
-type ActiveMode = (typeof ACTIVE_MODES)[number];
+import useAppConfig from '../useAppConfig';
+import { ACTIVE_MODES } from './WeeklyActiveMinutesCard';
 
 type Props = { userMetrics?: MetricsData };
 const DailyActiveMinutesCard = ({ userMetrics }: Props) => {
   const { colors } = useTheme();
   const { t } = useTranslation();
+  const appConfig = useAppConfig();
+  // modes to consider as "active" for the purpose of calculating "active minutes", default : ['walk', 'bike']
+  const activeModes =
+    appConfig?.metrics?.phone_dashboard_ui?.active_travel_options?.modes_list ?? ACTIVE_MODES;
 
   const dailyActiveMinutesRecords = useMemo(() => {
     const records: { label: string; x: number; y: number }[] = [];
     const recentDays = userMetrics?.duration?.slice(-14);
     recentDays?.forEach((day) => {
-      ACTIVE_MODES.forEach((mode) => {
+      activeModes.forEach((mode) => {
         const activeSeconds = valueForModeOnDay(day, mode);
         records.push({
           label: labelKeyToRichMode(mode),

www/js/metrics/WeeklyActiveMinutesCard.tsx

@@ -9,6 +9,7 @@ import BarChart from '../components/BarChart';
 import { labelKeyToRichMode, labelOptions } from '../survey/multilabel/confirmHelper';
 import { getBaseModeByText } from '../diary/diaryHelper';
 import TimelineContext from '../TimelineContext';
+import useAppConfig from '../useAppConfig';
 
 export const ACTIVE_MODES = ['walk', 'bike'] as const;
 type ActiveMode = (typeof ACTIVE_MODES)[number];
@@ -18,12 +19,15 @@ const WeeklyActiveMinutesCard = ({ userMetrics }: Props) => {
   const { colors } = useTheme();
   const { dateRange } = useContext(TimelineContext);
   const { t } = useTranslation();
-
+  const appConfig = useAppConfig();
+  // modes to consider as "active" for the purpose of calculating "active minutes", default : ['walk', 'bike']
+  const activeModes =
+    appConfig?.metrics?.phone_dashboard_ui?.active_travel_options?.modes_list ?? ACTIVE_MODES;
   const weeklyActiveMinutesRecords = useMemo(() => {
     if (!userMetrics?.duration) return [];
     const records: { x: string; y: number; label: string }[] = [];
     const [recentWeek, prevWeek] = segmentDaysByWeeks(userMetrics?.duration, dateRange[1]);
-    ACTIVE_MODES.forEach((mode) => {
+    activeModes.forEach((mode) => {
       if (prevWeek) {
         const prevSum = prevWeek?.reduce(
           (acc, day) => acc + (valueForModeOnDay(day, mode) || 0),

www/js/types/appConfigTypes.ts

@@ -22,6 +22,9 @@ export type AppConfig = {
       engagement_options?: {
         leaderboard_metric: [string, string];
       };
+      active_travel_options?: {
+        modes_list: string[];
+      };
     };
   };
   reminderSchemes?: ReminderSchemesConfig;