feat: custom date picker for analytics overview

frontends/dashboard/src/analytics/api/analytics.ts

@@ -19,6 +19,7 @@ import {
   UsageGraphResponse,
   RecommendationEvent,
   EventData,
+  DateRangeFilter,
 } from "shared/types";
 import { transformAnalyticsFilter } from "../utils/formatDate";
 
@@ -257,17 +258,15 @@ export const getNoResultQueries = async (
 };
 
 export const getQueryCounts = async (
-  gt_date: Date,
+  dateRange: DateRangeFilter,
   datasetId: string,
 ): Promise<SearchTypeCount[]> => {
   const response = await fetch(`${apiHost}/analytics/search`, {
     credentials: "include",
     method: "POST",
     body: JSON.stringify({
       filter: transformAnalyticsFilter({
-        date_range: {
-          gt: gt_date,
-        },
+        date_range: dateRange,
       }),
       type: "count_queries",
     }),

frontends/dashboard/src/analytics/components/charts/QueryCounts.tsx

@@ -1,12 +1,12 @@
-import { SearchTypeCount } from "shared/types";
+import { DateRangeFilter, SearchTypeCount } from "shared/types";
 import { createSignal, For, Show, useContext } from "solid-js";
 import { createQuery } from "@tanstack/solid-query";
 import { getQueryCounts } from "../../api/analytics";
 import { toTitleCase } from "../../utils/titleCase";
-import { Select } from "shared/ui";
-import { DateRangeOption, dateRanges } from "../FilterBar";
+import { DateRangePicker } from "shared/ui";
 import { CTRSummary } from "./CTRSummary";
 import { DatasetContext } from "../../../contexts/DatasetContext";
+import { subDays } from "date-fns";
 
 const displaySearchType = (type: SearchTypeCount["search_type"]) => {
   switch (type) {
@@ -27,14 +27,15 @@ const displaySearchType = (type: SearchTypeCount["search_type"]) => {
 
 export const QueryCounts = () => {
   const dataset = useContext(DatasetContext);
-  const [dateSelection, setDateSelection] = createSignal<DateRangeOption>(
-    dateRanges[2],
-  );
+
+  const [dateRange, setDateRange] = createSignal<DateRangeFilter>({
+    gt: subDays(new Date(), 7),
+  });
 
   const queryCountsQuery = createQuery(() => ({
-    queryKey: ["queryCounts", { gt_date: dateSelection().date }],
+    queryKey: ["queryCounts", { filter: dateRange }],
     queryFn: () => {
-      return getQueryCounts(dateSelection().date, dataset.datasetId());
+      return getQueryCounts(dateRange(), dataset.datasetId());
     },
   }));
 
@@ -48,14 +49,9 @@ export const QueryCounts = () => {
           </div>
         </div>
         <div>
-          <Select
-            class="min-w-[80px] !bg-white"
-            display={(s) => s.label}
-            selected={dateSelection()}
-            onSelected={(e) => {
-              setDateSelection(e);
-            }}
-            options={dateRanges}
+          <DateRangePicker
+            value={dateRange()}
+            onChange={(e) => setDateRange(e)}
           />
         </div>
       </div>
@@ -91,9 +87,7 @@ export const QueryCounts = () => {
       </Show>
       <CTRSummary
         filter={{
-          date_range: {
-            gt: dateSelection().date,
-          },
+          date_range: dateRange(),
         }}
       />
     </div>

frontends/dashboard/src/analytics/pages/AnalyticsOverviewPage.tsx

@@ -1,16 +1,26 @@
+import { subHours } from "date-fns/subHours";
 import { Card } from "../components/charts/Card";
 import { HeadQueries } from "../components/charts/HeadQueries";
 import { QueryCounts } from "../components/charts/QueryCounts";
 import { SearchUsageGraph } from "../components/charts/SearchUsageGraph";
 import { CTRInfoPanel } from "../components/CTRInfoPanel";
-import {
-  SimpleTimeRangeSelector,
-  useSimpleTimeRange,
-} from "../components/SimpleTimeRangeSelector";
+import { DateRangeFilter } from "shared/types";
+import { createSignal } from "solid-js";
+import { DateRangePicker } from "shared/ui";
+import { Granularity } from "trieve-ts-sdk";
 
 export const AnalyticsOverviewPage = () => {
-  const rpsDate = useSimpleTimeRange();
-  const headQueriesDate = useSimpleTimeRange();
+  const [rpsDateRange, setRpsDateRange] = createSignal<DateRangeFilter>({
+    gt: subHours(new Date(), 1),
+  });
+
+  const [rpsGranularity, setRpsGranularity] =
+    createSignal<Granularity>("minute");
+
+  const [headQueriesDate, setHeadQueriesDate] = createSignal<DateRangeFilter>({
+    gt: subHours(new Date(), 1),
+  });
+
   return (
     <>
       <div class="grid grid-cols-2 items-start gap-2">
@@ -23,27 +33,30 @@ export const AnalyticsOverviewPage = () => {
         <Card
           title="Requests Per Second"
           controller={
-            <SimpleTimeRangeSelector
-              setDateOption={rpsDate.setDateOption}
-              dateOption={rpsDate.dateOption()}
+            <DateRangePicker
+              onChange={(e) => setRpsDateRange(e)}
+              value={rpsDateRange()}
+              initialSelectedPresetId={3}
+              onGranularitySuggestion={(e) => setRpsGranularity(e)}
             />
           }
           class="flex flex-col justify-between px-4"
           width={1}
         >
           <SearchUsageGraph
             params={{
-              filter: rpsDate.filter(),
-              granularity: rpsDate.granularity(),
+              filter: { date_range: rpsDateRange() },
+              granularity: rpsGranularity(),
             }}
           />
         </Card>
 
         <Card
           controller={
-            <SimpleTimeRangeSelector
-              setDateOption={headQueriesDate.setDateOption}
-              dateOption={headQueriesDate.dateOption()}
+            <DateRangePicker
+              onChange={(e) => setHeadQueriesDate(e)}
+              initialSelectedPresetId={3}
+              value={headQueriesDate()}
             />
           }
           title="Head Queries"
@@ -52,7 +65,7 @@ export const AnalyticsOverviewPage = () => {
         >
           <HeadQueries
             params={{
-              filter: headQueriesDate.filter(),
+              filter: { date_range: headQueriesDate() },
             }}
           />
         </Card>