feat(StatsSideRoute): Add date filters for stats route

Author: PrettyCoffee

src/app/router.tsx

@@ -8,13 +8,15 @@ import { SearchRoute } from "./routes/search/search-route"
 import { SettingsRoute } from "./routes/settings/settings-route"
 import { SettingsSideRoute } from "./routes/settings/settings-side-route"
 import { StatsRoute } from "./routes/stats/stats-route"
+import { StatsSideRoute } from "./routes/stats/stats-side-route"
 
 const AppRouter = () => (
   <AppLayout
     sideContent={
       <Switch>
         <Route path="/settings/*" component={SettingsSideRoute} />
         <Route path="/settings" component={SettingsSideRoute} />
+        <Route path="/stats" component={StatsSideRoute} />
         <Route path="/" component={MainSideRoute} />
       </Switch>
     }

src/app/routes/stats/stats-route.tsx

@@ -1,15 +1,17 @@
-import { Dispatch, Fragment, useState } from "react"
+import { Dispatch, Fragment, useMemo, useState } from "react"
 
 import { ClockPlus } from "lucide-react"
 
 import { ContextInfo } from "components/ui/context-info"
 import { timeEntriesData, TimeEntry } from "data/time-entries"
 import { useAtomValue } from "lib/yaasl"
 import { cn } from "utils/cn"
+import { dateHelpers } from "utils/date-helpers"
 import { vstack } from "utils/styles"
 import { timeHelpers } from "utils/time-helpers"
 
 import { getTimeStats, TimeStats } from "./get-time-stats"
+import { statsFilterData } from "./stats-side-route"
 import { TimeStatsChart } from "./time-stats-chart"
 
 const getEntries = <TObj extends object>(obj: TObj) =>
@@ -129,12 +131,28 @@ const StatsModeHeader = ({
 
 const StatsCharts = ({ mode }: { mode: Mode }) => {
   const timeEntries = useAtomValue(timeEntriesData)
+  const statsFilter = useAtomValue(statsFilterData)
+
+  const filtered = useMemo(
+    () =>
+      Object.fromEntries(
+        Object.entries(timeEntries).filter(([date]) =>
+          dateHelpers.isInRange(date, statsFilter.start, statsFilter.end)
+        )
+      ),
+    [timeEntries, statsFilter]
+  )
 
-  const data = {
-    weekday: () => getDayStats(timeEntries),
-    month: () => getMonthStats(timeEntries),
-    year: () => getYearStats(timeEntries),
-  }[mode]()
+  const data = useMemo(() => {
+    switch (mode) {
+      case "weekday":
+        return getDayStats(filtered)
+      case "month":
+        return getMonthStats(filtered)
+      case "year":
+        return getYearStats(filtered)
+    }
+  }, [mode, filtered])
 
   const tick = {
     weekday: weekdayTick,
@@ -156,8 +174,8 @@ const StatsCharts = ({ mode }: { mode: Mode }) => {
           icon={ClockPlus}
           label="Insufficient data"
         >
-          You will need to add more data first, to be able to see stats here.
-          (at least 2 {mode}s)
+          You will need to provide more data, to be able to see stats here. (at
+          least 2 {mode}s)
         </ContextInfo>
       </div>
     )

src/app/routes/stats/stats-side-route.tsx

@@ -0,0 +1,99 @@
+import { Button } from "components/ui/button"
+import { DateInput } from "components/ui/date-input"
+import { Divider } from "components/ui/divider"
+import { InputLabel } from "components/ui/input-label"
+import { timeEntriesData } from "data/time-entries"
+import { createAtom, useAtomValue } from "lib/yaasl"
+import { dateHelpers } from "utils/date-helpers"
+import { getLocale } from "utils/get-locale"
+
+interface StatsFilter {
+  name: string
+  start: string
+  end: string
+}
+
+const createYearFilter = (year: number) => ({
+  name: `${year}`,
+  start: `${year}-01-01`,
+  end: `${year}-12-31`,
+})
+
+const year = new Date().getFullYear()
+export const statsFilterData = createAtom<StatsFilter>({
+  name: "stats-filter",
+  defaultValue: createYearFilter(year),
+})
+
+export const StatsSideRoute = () => {
+  const selectedFilter = useAtomValue(statsFilterData)
+  const entries = useAtomValue(timeEntriesData)
+  const dates = Object.keys(entries)
+    .sort()
+    .map(date => new Date(date))
+
+  const years = [...new Set(dates.map(date => date.getFullYear()))].sort(
+    (a, b) => b - a
+  )
+
+  const matchingEntries = Object.entries(entries).flatMap(([date, entries]) =>
+    dateHelpers.isInRange(date, selectedFilter.start, selectedFilter.end)
+      ? entries
+      : []
+  )
+
+  const predefinedFilters: StatsFilter[] = [
+    {
+      name: "All",
+      start: dateHelpers.stringify(dates[0]!),
+      end: dateHelpers.stringify(dates.at(-1)!),
+    },
+    ...years.map(createYearFilter),
+  ]
+
+  return (
+    <div>
+      <InputLabel label="Predefined Filters" />
+      {predefinedFilters.map(filter => (
+        <Button
+          key={filter.name}
+          onClick={() => statsFilterData.set(filter)}
+          active={
+            selectedFilter.start === filter.start &&
+            selectedFilter.end === filter.end
+          }
+        >
+          {filter.name}
+        </Button>
+      ))}
+
+      <Divider color="gentle" className="my-4" />
+
+      <InputLabel label="Start date">
+        <DateInput
+          locale={getLocale()}
+          value={selectedFilter.start}
+          onChange={start =>
+            statsFilterData.set(state => ({ ...state, start, name: "Custom" }))
+          }
+          max={dateHelpers.today()}
+        />
+      </InputLabel>
+
+      <InputLabel label="End date">
+        <DateInput
+          locale={getLocale()}
+          value={selectedFilter.end}
+          onChange={end =>
+            statsFilterData.set(state => ({ ...state, end, name: "Custom" }))
+          }
+          max={dateHelpers.today()}
+        />
+      </InputLabel>
+
+      <Divider color="gentle" className="my-4" />
+
+      <InputLabel label={`${matchingEntries.length} Matching time entries`} />
+    </div>
+  )
+}

src/components/ui/input-label.tsx

@@ -9,7 +9,7 @@ import { vstack } from "utils/styles"
 interface InputLabelProps extends ClassNameProp {
   label: string
   htmlFor?: string
-  children: ((id: string) => ReactNode) | ReactNode
+  children?: ((id: string) => ReactNode) | ReactNode
 }
 
 export const InputLabel = ({

src/utils/date-helpers.ts

@@ -30,9 +30,13 @@ const stringify = (date: Date | ParsedDate) => {
 
 const today = () => stringify(new Date())
 
+const isInRange = (date: string, start: string, end: string) =>
+  [date, start, end].sort()[1] === date
+
 export const dateHelpers = {
   today,
   parse,
   stringify,
   daysSince,
+  isInRange,
 }