fix: fill empty dates in rag usage chart

Author: SaraVieira

frontends/analytics/src/components/SingleQueryInfo.tsx

@@ -54,18 +54,23 @@ export const SingleQuery = (props: SingleQueryProps) => {
           )}
         </div>
         <div class="h-2" />
-        <div class="flex-start flex justify-center gap-2">
-          <DataSquare label="Search Type" value={props.data.search_type} />
-          <DataSquare
-            label="Dataset"
-            value={datasetName() || props.data.dataset_id}
-          />
-          <DataSquare label="Results" value={props.data.results.length} />
-          <DataSquare label="Latency" value={`${props.data.latency}ms`} />
-          <DataSquare
-            label="Top Score"
-            value={props.data.top_score.toPrecision(4)}
-          />
+        <div>
+          <h3 class="text-base font-semibold leading-6 text-gray-900">
+            Last 30 days
+          </h3>
+          <dl class="m-auto mt-5 grid max-w-4xl grid-cols-1 divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow md:grid-cols-5 md:divide-x md:divide-y-0">
+            <DataSquare label="Search Type" value={props.data.search_type} />
+            <DataSquare
+              label="Dataset"
+              value={datasetName() || props.data.dataset_id}
+            />
+            <DataSquare label="Results" value={props.data.results.length} />
+            <DataSquare label="Latency" value={`${props.data.latency}ms`} />
+            <DataSquare
+              label="Top Score"
+              value={props.data.top_score.toPrecision(4)}
+            />
+          </dl>
         </div>
         <div class="h-4" />
         <div class="text-bold mb-2 h-2 w-full border-t-2 border-t-neutral-300/80 text-neutral-800 outline-neutral-500" />
@@ -101,9 +106,13 @@ export const DataSquare = (props: {
   value: number | string;
 }) => {
   return (
-    <div class="rounded-md border border-neutral-200 bg-white p-3 text-center shadow-md">
-      <div>{props.label}</div>
-      <div class="font-medium">{props.value}</div>
+    <div class="px-4 py-5 sm:p-6">
+      <dt class="text-base font-normal text-gray-900">{props.label}</dt>
+      <dd class="mt-1 flex items-baseline justify-start md:block lg:flex">
+        <div class="flex items-baseline text-xl font-semibold text-fuchsia-600">
+          {props.value}
+        </div>
+      </dd>
     </div>
   );
 };

frontends/analytics/src/components/charts/Card.tsx

@@ -16,7 +16,7 @@ export const Card = (props: CardProps) => {
       style={{
         "grid-column": `span ${props.width}`,
       }}
-      class={`shadow-sm rounded-md border border-neutral-100 bg-white p-4 ${classStuff.class}`}
+      class={`rounded-md border border-neutral-100 bg-white p-4 shadow-sm ${classStuff.class}`}
     >
       <div class="mb-4 flex items-center justify-between">
         <div>

frontends/analytics/src/components/charts/RAGUsageGraph.tsx

@@ -22,6 +22,7 @@ interface RAGUsageProps {
 import "chartjs-adapter-date-fns";
 import { Card } from "./Card";
 import { parseCustomDateString } from "../../utils/formatDate";
+import { eachDayOfInterval, isSameDay, subDays } from "date-fns";
 
 export const RAGUsageGraph = (props: RAGUsageProps) => {
   const dataset = useContext(DatasetContext);
@@ -92,6 +93,9 @@ export const RAGUsageGraph = (props: RAGUsageProps) => {
                 },
               },
               type: "time",
+              time: {
+                unit: "day",
+              },
               title: {
                 text: "Timestamp",
                 display: true,
@@ -130,12 +134,32 @@ export const RAGUsageGraph = (props: RAGUsageProps) => {
       // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
       chartInstance.options.scales["x"].time.unit = undefined;
     }
+    const info = eachDayOfInterval({
+      start: props.params.filter.date_range?.gte || subDays(new Date(), 7),
+      end: props.params.filter.date_range?.lte || new Date(),
+    }).map((d) => {
+      return data.reduce(
+        (acc, curr) => {
+          const parsedDate = new Date(parseCustomDateString(curr.time_stamp));
+          if (isSameDay(parsedDate, d)) {
+            acc = {
+              time_stamp: parsedDate,
+              requests: curr.requests,
+            };
+          }
+
+          return acc;
+        },
+        {
+          time_stamp: d,
+          requests: 0,
+        },
+      );
+    });
 
     // Update the chart data;
-    chartInstance.data.labels = data.map(
-      (point) => new Date(parseCustomDateString(point.time_stamp)),
-    );
-    chartInstance.data.datasets[0].data = data.map((point) => point.requests);
+    chartInstance.data.labels = info.map((point) => point.time_stamp);
+    chartInstance.data.datasets[0].data = info.map((point) => point.requests);
     chartInstance.update();
   });
 

frontends/analytics/src/pages/tablePages/SearchTablePage.tsx

@@ -108,21 +108,22 @@ export const SearchTablePage = () => {
 
   return (
     <div>
-
       <div class="my-4 rounded-md bg-white">
         <Show
           fallback={<div class="py-8 text-center">Loading...</div>}
           when={searchTableQuery.data}
         >
-        <Card>
-        <FilterBar noPadding filters={filters} setFilters={setFilters} />
-        <TanStackTable
-            pages={pages}
-            perPage={10}
-            table={table}
-            onRowClick={(row: SearchQueryEvent) => navigate(`/query/${row.id}`)}
-          />
-        </Card>
+          <Card>
+            <FilterBar noPadding filters={filters} setFilters={setFilters} />
+            <TanStackTable
+              pages={pages}
+              perPage={10}
+              table={table}
+              onRowClick={(row: SearchQueryEvent) =>
+                navigate(`/query/${row.id}`)
+              }
+            />
+          </Card>
         </Show>
       </div>
     </div>