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,16 @@
-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 { TimeEntry } from "data/time-entries"
 import { useAtomValue } from "lib/yaasl"
 import { cn } from "utils/cn"
 import { vstack } from "utils/styles"
 import { timeHelpers } from "utils/time-helpers"
 
 import { getTimeStats, TimeStats } from "./get-time-stats"
+import { filteredStatsEntries } from "./stats-side-route"
 import { TimeStatsChart } from "./time-stats-chart"
 
 const getEntries = <TObj extends object>(obj: TObj) =>
@@ -128,13 +129,18 @@ const StatsModeHeader = ({
 )
 
 const StatsCharts = ({ mode }: { mode: Mode }) => {
-  const timeEntries = useAtomValue(timeEntriesData)
-
-  const data = {
-    weekday: () => getDayStats(timeEntries),
-    month: () => getMonthStats(timeEntries),
-    year: () => getYearStats(timeEntries),
-  }[mode]()
+  const filtered = useAtomValue(filteredStatsEntries)
+
+  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 +162,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>
     )
@@ -166,23 +172,23 @@ const StatsCharts = ({ mode }: { mode: Mode }) => {
   return (
     <div className={cn(vstack({ gap: 8 }), "w-full max-w-xl gap-10 *:h-48")}>
       <TimeStatsChart
-        caption="Start time"
+        caption="Start time (avg)"
         timeStats={data}
         type="start"
         dotLabel={({ y }) => timeHelpers.fromMinutes(y)}
         tickLabel={tick}
         transformX={transform}
       />
       <TimeStatsChart
-        caption="End time"
+        caption="End time (avg)"
         timeStats={data}
         type="end"
         dotLabel={({ y }) => timeHelpers.fromMinutes(y)}
         tickLabel={tick}
         transformX={transform}
       />
       <TimeStatsChart
-        caption="Work time"
+        caption="Work time (avg)"
         timeStats={data}
         type="total"
         dotLabel={({ y }) => `${(y / 60).toFixed(1)}h`}

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

@@ -0,0 +1,107 @@
+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, createSelector, 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()
+const statsFilterData = createAtom<StatsFilter>({
+  name: "stats-filter",
+  defaultValue: createYearFilter(year),
+})
+
+export const filteredStatsEntries = createSelector(
+  [timeEntriesData, statsFilterData],
+  (entries, { start, end }) =>
+    Object.fromEntries(
+      Object.entries(entries).filter(([date]) =>
+        dateHelpers.isInRange(date, start, end)
+      )
+    )
+)
+
+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.values(
+    useAtomValue(filteredStatsEntries)
+  ).flat()
+
+  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,
 }