fix: WIP Chart and tooltips are not informative

apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_overview/components/charts/index.tsx

@@ -19,21 +19,24 @@ export const KeysOverviewLogsCharts = ({
     timeseries: verificationTimeseries,
     isLoading: verificationIsLoading,
     isError: verificationIsError,
+    granularity: verificationGranularity,
   } = useFetchVerificationTimeseries(apiId);
 
   const {
     timeseries: activeKeysTimeseries,
     isLoading: activeKeysIsLoading,
     isError: activeKeysIsError,
-    granularity,
+    granularity: activeKeysGranularity,
   } = useFetchActiveKeysTimeseries(apiId);
 
   const handleSelectionChange = ({
     start,
     end,
+    granularity,
   }: {
     start: number;
     end: number;
+    granularity?: typeof verificationGranularity;
   }) => {
     const activeFilters = filters.filter(
       (f) => !["startTime", "endTime", "since"].includes(f.field),
@@ -90,7 +93,12 @@ export const KeysOverviewLogsCharts = ({
           isError={verificationIsError}
           enableSelection
           onMount={onMount}
-          onSelectionChange={handleSelectionChange}
+          onSelectionChange={(selection) =>
+            handleSelectionChange({
+              ...selection,
+              granularity: verificationGranularity,
+            })
+          }
           config={createOutcomeChartConfig()}
           labels={{
             title: "REQUESTS",
@@ -100,6 +108,7 @@ export const KeysOverviewLogsCharts = ({
             secondaryKey: "error",
           }}
           tooltipItems={[{ label: "Invalid", dataKey: "error" }]}
+          granularity={verificationGranularity}
         />
       </div>
       <div className="w-full md:w-1/2 max-md:h-72">
@@ -108,9 +117,15 @@ export const KeysOverviewLogsCharts = ({
           isLoading={activeKeysIsLoading}
           isError={activeKeysIsError}
           enableSelection
-          onSelectionChange={handleSelectionChange}
+          onSelectionChange={(selection) =>
+            handleSelectionChange({
+              ...selection,
+              granularity: activeKeysGranularity,
+            })
+          }
           config={keysChartConfig}
           labels={keysChartLabels}
+          granularity={activeKeysGranularity}
         />
       </div>
     </div>

apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/[keyId]/components/charts/index.tsx

@@ -64,6 +64,7 @@ export const KeyDetailsLogsChart = ({
         onMount={onMount}
         onSelectionChange={handleSelectionChange}
         config={createOutcomeChartConfig()}
+        granularity={granularity}
         labels={{
           title: "REQUESTS",
           primaryLabel: "VALID",

apps/dashboard/app/(app)/[workspaceSlug]/ratelimits/[namespaceId]/_overview/components/charts/index.tsx

@@ -102,6 +102,7 @@ export const RatelimitOverviewLogsCharts = ({
           isError={isError}
           enableSelection
           onSelectionChange={handleSelectionChange}
+          granularity={granularity}
           config={{
             success: {
               label: "Passed",

apps/dashboard/app/(app)/[workspaceSlug]/ratelimits/[namespaceId]/logs/components/charts/index.tsx

@@ -67,6 +67,7 @@ export function RatelimitLogsChart({
       isLoading={isLoading}
       isError={isError}
       enableSelection
+      granularity={granularity}
     />
   );
 }

apps/dashboard/components/logs/chart/index.tsx

@@ -8,18 +8,25 @@ import {
   ChartTooltipContent,
 } from "@/components/ui/chart";
 import { formatNumber } from "@/lib/fmt";
+import type { CompoundTimeseriesGranularity } from "@/lib/trpc/routers/utils/granularity";
 import { Grid } from "@unkey/icons";
 import { useEffect, useRef, useState } from "react";
-import { Bar, BarChart, ReferenceArea, ResponsiveContainer, YAxis } from "recharts";
+import {
+  Bar,
+  BarChart,
+  ReferenceArea,
+  ResponsiveContainer,
+  YAxis,
+} from "recharts";
 import { createTimeIntervalFormatter } from "../overview-charts/utils";
 import { LogsChartError } from "./components/logs-chart-error";
 import { LogsChartLoading } from "./components/logs-chart-loading";
 import { calculateTimePoints } from "./utils/calculate-timepoints";
 import { formatTimestampLabel } from "./utils/format-timestamp";
 
 type Selection = {
-  start: string | number;
-  end: string | number;
+  start: number | undefined;
+  end: number | undefined;
   startTimestamp?: number;
   endTimestamp?: number;
 };
@@ -30,6 +37,13 @@ type TimeseriesData = {
   [key: string]: unknown;
 };
 
+export type ChartMouseEvent = {
+  activeLabel?: string | number;
+  activePayload?: ReadonlyArray<{
+    payload: TimeseriesData;
+  }>;
+};
+
 type LogsTimeseriesBarChartProps = {
   data?: TimeseriesData[];
   config: ChartConfig;
@@ -39,6 +53,7 @@ type LogsTimeseriesBarChartProps = {
   isLoading?: boolean;
   isError?: boolean;
   enableSelection?: boolean;
+  granularity?: CompoundTimeseriesGranularity;
 };
 
 export function LogsTimeseriesBarChart({
@@ -50,9 +65,13 @@ export function LogsTimeseriesBarChart({
   isLoading,
   isError,
   enableSelection = false,
+  granularity,
 }: LogsTimeseriesBarChartProps) {
   const chartRef = useRef<HTMLDivElement>(null);
-  const [selection, setSelection] = useState<Selection>({ start: "", end: "" });
+  const [selection, setSelection] = useState<Selection>({
+    start: undefined,
+    end: undefined,
+  });
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: We need this to re-trigger distanceToTop calculation
   useEffect(() => {
@@ -62,31 +81,42 @@ export function LogsTimeseriesBarChart({
     }
   }, [onMount, isLoading, isError]);
 
-  // biome-ignore lint/suspicious/noExplicitAny: those are safe to leave
-  const handleMouseDown = (e: any) => {
-    if (!enableSelection) {
+  const handleMouseDown = (e: ChartMouseEvent) => {
+    if (!enableSelection || e.activeLabel === undefined) {
       return;
     }
+
     const timestamp = e.activePayload?.[0]?.payload?.originalTimestamp;
+    const numericLabel = Number(e.activeLabel);
+
+    if (!Number.isFinite(numericLabel) || !timestamp) {
+      return;
+    }
+
     setSelection({
-      start: e.activeLabel,
-      end: e.activeLabel,
+      start: numericLabel,
+      end: numericLabel,
       startTimestamp: timestamp,
       endTimestamp: timestamp,
     });
   };
 
-  // biome-ignore lint/suspicious/noExplicitAny: those are safe to leave
-  const handleMouseMove = (e: any) => {
-    if (!enableSelection) {
+  const handleMouseMove = (e: ChartMouseEvent) => {
+    if (!enableSelection || e.activeLabel === undefined) {
       return;
     }
-    if (selection.start) {
+    if (selection.start !== undefined) {
       const timestamp = e.activePayload?.[0]?.payload?.originalTimestamp;
+      const numericLabel = Number(e.activeLabel);
+
+      if (!Number.isFinite(numericLabel) || !timestamp) {
+        return;
+      }
+
       setSelection((prev) => ({
         ...prev,
-        end: e.activeLabel,
-        startTimestamp: timestamp,
+        end: numericLabel,
+        endTimestamp: timestamp,
       }));
     }
   };
@@ -95,17 +125,27 @@ export function LogsTimeseriesBarChart({
     if (!enableSelection) {
       return;
     }
-    if (selection.start && selection.end && onSelectionChange) {
-      if (!selection.startTimestamp || !selection.endTimestamp) {
+    if (
+      selection.start !== undefined &&
+      selection.end !== undefined &&
+      onSelectionChange
+    ) {
+      if (
+        selection.startTimestamp === undefined ||
+        selection.endTimestamp === undefined
+      ) {
         return;
       }
 
-      const [start, end] = [selection.startTimestamp, selection.endTimestamp].sort((a, b) => a - b);
+      const [start, end] = [
+        selection.startTimestamp,
+        selection.endTimestamp,
+      ].sort((a, b) => a - b);
       onSelectionChange({ start, end });
     }
     setSelection({
-      start: "",
-      end: "",
+      start: undefined,
+      end: undefined,
       startTimestamp: undefined,
       endTimestamp: undefined,
     });
@@ -125,16 +165,19 @@ export function LogsTimeseriesBarChart({
         {data
           ? calculateTimePoints(
               data[0]?.originalTimestamp ?? Date.now(),
-              data.at(-1)?.originalTimestamp ?? Date.now(),
-            ).map((time, i) => (
-              // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-              <div key={i} className="z-10">
+              data.at(-1)?.originalTimestamp ?? Date.now()
+            ).map((time) => (
+              <div key={time.getTime()} className="z-10">
                 {formatTimestampLabel(time)}
               </div>
             ))
           : null}
       </div>
-      <ResponsiveContainer width="100%" height={height} className="border-b border-gray-4">
+      <ResponsiveContainer
+        width="100%"
+        height={height}
+        className="border-b border-gray-4"
+      >
         <ChartContainer config={config}>
           <BarChart
             data={data}
@@ -157,7 +200,11 @@ export function LogsTimeseriesBarChart({
                 strokeOpacity: 0.7,
               }}
               content={({ active, payload, label }) => {
-                if (!active || !payload?.length || payload?.[0]?.payload.total === 0) {
+                if (
+                  !active ||
+                  !payload?.length ||
+                  payload?.[0]?.payload.total === 0
+                ) {
                   return null;
                 }
 
@@ -175,7 +222,9 @@ export function LogsTimeseriesBarChart({
                               <span className="capitalize text-accent-9 text-xs w-[2ch] inline-block">
                                 All
                               </span>
-                              <span className="capitalize text-accent-12 text-xs">Total</span>
+                              <span className="capitalize text-accent-12 text-xs">
+                                Total
+                              </span>
                             </div>
                             <div className="ml-auto">
                               <span className="font-mono tabular-nums text-accent-12">
@@ -188,25 +237,39 @@ export function LogsTimeseriesBarChart({
                     }
                     className="rounded-lg shadow-lg border border-gray-4"
                     labelFormatter={(_, payload) =>
-                      //@ts-expect-error This is okay to ignore
-                      createTimeIntervalFormatter(data, "HH:mm")(payload)
+                      createTimeIntervalFormatter(
+                        data,
+                        undefined,
+                        granularity
+                      )(
+                        (payload ?? []).map(
+                          (p) => (p as { payload: TimeseriesData }).payload
+                        )
+                      )
                     }
                   />
                 );
               }}
             />
             {Object.keys(config).map((key) => (
-              <Bar key={key} dataKey={key} stackId="a" fill={config[key].color} />
-            ))}
-            {enableSelection && selection.start && selection.end && (
-              <ReferenceArea
-                isAnimationActive
-                x1={Math.min(Number(selection.start), Number(selection.end))}
-                x2={Math.max(Number(selection.start), Number(selection.end))}
-                fill="hsl(var(--chart-selection))"
-                radius={[4, 4, 0, 0]}
+              <Bar
+                key={key}
+                dataKey={key}
+                stackId="a"
+                fill={config[key].color}
               />
-            )}
+            ))}
+            {enableSelection &&
+              selection.start !== undefined &&
+              selection.end !== undefined && (
+                <ReferenceArea
+                  isAnimationActive
+                  x1={Math.min(selection.start, selection.end)}
+                  x2={Math.max(selection.start, selection.end)}
+                  fill="hsl(var(--chart-selection))"
+                  radius={[4, 4, 0, 0]}
+                />
+              )}
           </BarChart>
         </ChartContainer>
       </ResponsiveContainer>