diff --git a/www/js/metrics/ActiveMinutesTableCard.tsx b/www/js/metrics/ActiveMinutesTableCard.tsx index 57587e018..7d53ae766 100644 --- a/www/js/metrics/ActiveMinutesTableCard.tsx +++ b/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) => { - {ACTIVE_MODES.map((mode, i) => ( + {activeModes.map((mode, i) => ( {labelKeyToRichMode(mode)} @@ -94,7 +99,7 @@ const ActiveMinutesTableCard = ({ userMetrics }: Props) => { {allTotals.slice(from, to).map((total, i) => ( {total['period']} - {ACTIVE_MODES.map((mode, j) => ( + {activeModes.map((mode, j) => ( {total[mode]} {t('metrics.minutes')} diff --git a/www/js/metrics/DailyActiveMinutesCard.tsx b/www/js/metrics/DailyActiveMinutesCard.tsx index b72c20ec6..7fe63d51d 100644 --- a/www/js/metrics/DailyActiveMinutesCard.tsx +++ b/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), diff --git a/www/js/metrics/WeeklyActiveMinutesCard.tsx b/www/js/metrics/WeeklyActiveMinutesCard.tsx index 5078f2cfc..8331320e9 100644 --- a/www/js/metrics/WeeklyActiveMinutesCard.tsx +++ b/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), diff --git a/www/js/types/appConfigTypes.ts b/www/js/types/appConfigTypes.ts index f36f4b819..dc5479eaa 100644 --- a/www/js/types/appConfigTypes.ts +++ b/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;