feat(RunDistanceByMonthForPeriod): add new chart

client/src/components/Nav/TrackedCategorySubList.tsx

@@ -19,7 +19,7 @@ export default function TrackedCategorySubList({
 
   const isTrackingEnabled = eventTypeTracking[eventType];
 
-  if (!isTrackingEnabled && !showLog) return null;
+  if (!isTrackingEnabled && !showLog) return;
 
   return (
     <EriNav.SubList

client/src/components/pages/Stats/SleepChartForWeek.tsx

@@ -28,7 +28,7 @@ export default function SleepChartForWeek({ dateFrom }: Props) {
     });
   }
 
-  if (data.every(({ minutesSlept }) => minutesSlept === undefined)) return null;
+  if (data.every(({ minutesSlept }) => minutesSlept === undefined)) return;
 
   return (
     <Paper>

client/src/components/pages/Stats/SummaryForCalendarPeriod.tsx

@@ -92,7 +92,7 @@ export default function SummaryForCalendarPeriod({
     !secondsMeditatedInCurrentPeriod &&
     !secondsMeditatedInPreviousPeriod
   )
-    return null;
+    return;
 
   return (
     <Paper>

client/src/components/pages/Stats/Year/MeditationByMonthForPeriod.tsx

@@ -29,7 +29,7 @@ export default function MeditationByMonthForPeriod({
   );
   const navigate = useNavigate();
 
-  if (!hasMeditationsInPeriod) return null;
+  if (!hasMeditationsInPeriod) return;
 
   const months = eachMonthOfInterval({ start: dateFrom, end: dateTo }).slice(
     0,

client/src/components/pages/Stats/Year/PushUpsByMonthForPeriod.tsx

@@ -10,6 +10,7 @@ import { monthShortFormatter } from "../../../../formatters/dateTimeFormatters";
 import { integerFormatter } from "../../../../formatters/numberFormatters";
 import { useNavigate } from "react-router-dom";
 import { useSelector } from "react-redux";
+import EventIcon from "../../../shared/EventIcon";
 
 interface Props {
   dateFrom: Date;
@@ -25,7 +26,7 @@ export default function PushUpsByMonthForPeriod({ dateFrom, dateTo }: Props) {
   );
   const navigate = useNavigate();
 
-  if (!hasPushUpsInPeriod) return null;
+  if (!hasPushUpsInPeriod) return;
 
   const months = eachMonthOfInterval({ start: dateFrom, end: dateTo }).slice(
     0,
@@ -34,7 +35,10 @@ export default function PushUpsByMonthForPeriod({ dateFrom, dateTo }: Props) {
 
   return (
     <Paper>
-      <h3>Total push-ups by month</h3>
+      <h3>
+        <EventIcon eventType="push-ups" margin="end" />
+        Total push-ups by month
+      </h3>
       <Chart.ColumnChart
         aria-label="Chart displaying total push-ups by month"
         data={months.map((month) => {

client/src/components/pages/Stats/Year/RunDistanceByMonthForPeriod.tsx

@@ -0,0 +1,68 @@
+import { Chart, Paper } from "eri";
+import {
+  formatIsoDateInLocalTimezone,
+  formatIsoMonthInLocalTimezone,
+} from "../../../../utils";
+import { RootState } from "../../../../store";
+import { eachMonthOfInterval } from "date-fns";
+import eventsSlice from "../../../../store/eventsSlice";
+import { monthShortFormatter } from "../../../../formatters/dateTimeFormatters";
+import { useNavigate } from "react-router-dom";
+import { useSelector } from "react-redux";
+import EventIcon from "../../../shared/EventIcon";
+import { formatMetersToOneNumberWithUnits } from "../../../../formatters/formatDistance";
+
+interface Props {
+  dateFrom: Date;
+  dateTo: Date;
+}
+
+export default function RunDistanceByMonthForPeriod({
+  dateFrom,
+  dateTo,
+}: Props) {
+  const hasRunDistanceInPeriod = useSelector((state: RootState) =>
+    eventsSlice.selectors.hasRunDistanceInPeriod(state, dateFrom, dateTo),
+  );
+  const noramlizedTotalRunDistanceByMonth = useSelector(
+    eventsSlice.selectors.normalizedTotalRunDistanceByMonth,
+  );
+  const navigate = useNavigate();
+
+  if (!hasRunDistanceInPeriod) return;
+
+  const months = eachMonthOfInterval({ start: dateFrom, end: dateTo }).slice(
+    0,
+    -1,
+  );
+
+  return (
+    <Paper>
+      <h3>
+        <EventIcon eventType="runs" margin="end" />
+        Total run distance by month
+      </h3>
+      <Chart.ColumnChart
+        aria-label="Chart displaying total run distance by month"
+        data={months.map((month) => {
+          const totalMeters =
+            noramlizedTotalRunDistanceByMonth.byId[
+              formatIsoDateInLocalTimezone(month)
+            ] ?? 0;
+          const label = monthShortFormatter.format(month);
+          return {
+            key: label,
+            label: label,
+            onClick: () =>
+              navigate(`/stats/months/${formatIsoMonthInLocalTimezone(month)}`),
+            title: formatMetersToOneNumberWithUnits(totalMeters),
+            y: totalMeters / 1e3,
+          };
+        })}
+        rotateXLabels
+        xAxisTitle="Month"
+        yAxisTitle="Kilometers"
+      />
+    </Paper>
+  );
+}

client/src/components/pages/Stats/Year/SleepByMonthForPeriod.tsx

@@ -38,7 +38,7 @@ export default function SleepByMonthForPeriod({ dateFrom, dateTo }: Props) {
     };
   });
 
-  if (data.every(({ y }) => y === undefined)) return null;
+  if (data.every(({ y }) => y === undefined)) return;
   return (
     <Paper>
       <h3>Average sleep by month</h3>

client/src/components/pages/Stats/Year/index.tsx

@@ -23,6 +23,7 @@ import WeightChartForPeriod from "../WeightChartForPeriod";
 import { formatIsoYearInLocalTimezone } from "../../../../utils";
 import withStatsPage from "../../../hocs/withStatsPage";
 import PushUpsByMonthForPeriod from "./PushUpsByMonthForPeriod";
+import RunDistanceByMonthForPeriod from "./RunDistanceByMonthForPeriod";
 
 interface Props {
   date: Date;
@@ -41,7 +42,12 @@ function Year({ date, nextDate, prevDate, showNext, showPrevious }: Props) {
   let view: ReactElement;
   switch (activeView) {
     case "exercise":
-      view = <PushUpsByMonthForPeriod dateFrom={date} dateTo={nextDate} />;
+      view = (
+        <>
+          <RunDistanceByMonthForPeriod dateFrom={date} dateTo={nextDate} />
+          <PushUpsByMonthForPeriod dateFrom={date} dateTo={nextDate} />
+        </>
+      );
       break;
     case "location":
       view = <LocationForPeriod dateFrom={date} dateTo={nextDate} />;

client/src/components/shared/StatsViewControls/index.tsx

@@ -111,7 +111,7 @@ export default function StatsViewControls({
       icon: <EventIcon eventType="meditations" margin="end" />,
     });
 
-  if (!buttons.length) return null;
+  if (!buttons.length) return;
 
   return (
     <Paper>

client/src/formatters/formatDistance.ts

@@ -4,12 +4,13 @@ export const integerMeterFormatter = Intl.NumberFormat(undefined, {
   unit: "meter",
 });
 
-const kilometerFormatter = new Intl.NumberFormat(undefined, {
+const kilometerFormatter = Intl.NumberFormat(undefined, {
   maximumFractionDigits: 1,
   style: "unit",
   unit: "kilometer",
 });
+
 export const formatMetersToOneNumberWithUnits = (meters: number) =>
   meters < 1000
     ? integerMeterFormatter.format(meters)
-    : kilometerFormatter.format(meters / 1000);
+    : kilometerFormatter.format(meters / 1e3);