fix ActiveMinutes components

WeeklyActiveMinutesCard.tsx:
Add records even if the total is 0 so that both "Walk" and "Regular bike" will show up in the legend.

DailyActiveMinutesCard.tsx:
The line chart was not showing any points at all. Turns out it's because the timestamp values were strings and needed to be numbers.
We will now add records with 'null' values even if there is no value for a mode on a day. Both "Walk" and "Regular bike" now show in the legend.
Adding 'spanGaps' to the chart options (in Chart.tsx), causes a line on the chart to connect only values that were on consecutive days; otherwise there will be a gap between entries on non-consecutive days.
This gives users a nice way to visualize having a "streak" of days they used a particular active mode.

www/js/components/Chart.tsx

@@ -112,6 +112,7 @@ const Chart = ({
           responsive: true,
           maintainAspectRatio: false,
           resizeDelay: 1,
+          spanGaps: 1000 * 60 * 60 * 24, // 1 day
           scales: {
             ...(isHorizontal
               ? {

www/js/metrics/DailyActiveMinutesCard.tsx

@@ -18,21 +18,19 @@ const DailyActiveMinutesCard = ({ userMetrics }: Props) => {
   const { t } = useTranslation();
 
   const dailyActiveMinutesRecords = useMemo(() => {
-    const records: { label: string; x: string; y: number }[] = [];
+    const records: { label: string; x: number; y: number }[] = [];
     const recentDays = userMetrics?.duration?.slice(-14);
     recentDays?.forEach((day) => {
       ACTIVE_MODES.forEach((mode) => {
         const activeSeconds = valueForModeOnDay(day, mode);
-        if (activeSeconds) {
-          records.push({
-            label: labelKeyToRichMode(mode),
-            x: `${tsForDayOfMetricData(day) * 1000}`, // vertical chart, milliseconds on X axis
-            y: activeSeconds && activeSeconds / 60, // minutes on Y axis
-          });
-        }
+        records.push({
+          label: labelKeyToRichMode(mode),
+          x: tsForDayOfMetricData(day) * 1000, // vertical chart, milliseconds on X axis
+          y: activeSeconds ? activeSeconds / 60 : null, // minutes on Y axis
+        });
       });
     });
-    return records as { label: ActiveMode; x: string; y: number }[];
+    return records as { label: ActiveMode; x: number; y: number }[];
   }, [userMetrics?.duration]);
 
   return (

www/js/metrics/WeeklyActiveMinutesCard.tsx

@@ -24,20 +24,20 @@ const WeeklyActiveMinutesCard = ({ userMetrics }: Props) => {
     const records: { x: string; y: number; label: string }[] = [];
     const [recentWeek, prevWeek] = segmentDaysByWeeks(userMetrics?.duration, dateRange[1]);
     ACTIVE_MODES.forEach((mode) => {
-      const prevSum = prevWeek?.reduce((acc, day) => acc + (valueForModeOnDay(day, mode) || 0), 0);
-      if (prevSum) {
-        // `${t('main-metrics.prev-week')}\n(${formatDateRangeOfDays(lastWeekDistance)})`
+      if (prevWeek) {
+        const prevSum = prevWeek?.reduce(
+          (acc, day) => acc + (valueForModeOnDay(day, mode) || 0),
+          0,
+        );
         const xLabel = `${t('main-metrics.prev-week')}\n(${formatDateRangeOfDays(prevWeek)})`;
         records.push({ label: labelKeyToRichMode(mode), x: xLabel, y: prevSum / 60 });
       }
       const recentSum = recentWeek?.reduce(
         (acc, day) => acc + (valueForModeOnDay(day, mode) || 0),
         0,
       );
-      if (recentSum) {
-        const xLabel = `${t('main-metrics.past-week')}\n(${formatDateRangeOfDays(recentWeek)})`;
-        records.push({ label: labelKeyToRichMode(mode), x: xLabel, y: recentSum / 60 });
-      }
+      const xLabel = `${t('main-metrics.past-week')}\n(${formatDateRangeOfDays(recentWeek)})`;
+      records.push({ label: labelKeyToRichMode(mode), x: xLabel, y: recentSum / 60 });
     });
     return records as { label: ActiveMode; x: string; y: number }[];
   }, [userMetrics?.duration]);