fix: WIP Chart and tooltips are not informative

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

@@ -19,13 +19,14 @@ 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 = ({
@@ -40,8 +41,8 @@ export const KeysOverviewLogsCharts = ({
     );
 
     let adjustedEnd = end;
-    if (start === end && granularity) {
-      adjustedEnd = end + getTimeBufferForGranularity(granularity);
+    if (start === end && verificationGranularity) {
+      adjustedEnd = end + getTimeBufferForGranularity(verificationGranularity);
     }
     updateFilters([
       ...activeFilters,
@@ -100,6 +101,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">
@@ -111,6 +113,7 @@ export const KeysOverviewLogsCharts = ({
           onSelectionChange={handleSelectionChange}
           config={keysChartConfig}
           labels={keysChartLabels}
+          granularity={activeKeysGranularity}
         />
       </div>
     </div>

apps/dashboard/app/(app)/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)/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)/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,6 +8,7 @@ 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";
@@ -18,8 +19,8 @@ import { calculateTimePoints } from "./utils/calculate-timepoints";
 import { formatTimestampLabel } from "./utils/format-timestamp";
 
 type Selection = {
-  start: string | number;
-  end: string | number;
+  start: string | number | undefined;
+  end: string | number | undefined;
   startTimestamp?: number;
   endTimestamp?: number;
 };
@@ -30,6 +31,13 @@ type TimeseriesData = {
   [key: string]: unknown;
 };
 
+type ChartMouseEvent = {
+  activeLabel?: string | number;
+  activePayload?: Array<{
+    payload: TimeseriesData;
+  }>;
+};
+
 type LogsTimeseriesBarChartProps = {
   data?: TimeseriesData[];
   config: ChartConfig;
@@ -39,6 +47,7 @@ type LogsTimeseriesBarChartProps = {
   isLoading?: boolean;
   isError?: boolean;
   enableSelection?: boolean;
+  granularity?: CompoundTimeseriesGranularity;
 };
 
 export function LogsTimeseriesBarChart({
@@ -50,9 +59,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,8 +75,7 @@ export function LogsTimeseriesBarChart({
     }
   }, [onMount, isLoading, isError]);
 
-  // biome-ignore lint/suspicious/noExplicitAny: those are safe to leave
-  const handleMouseDown = (e: any) => {
+  const handleMouseDown = (e: ChartMouseEvent) => {
     if (!enableSelection) {
       return;
     }
@@ -76,8 +88,7 @@ export function LogsTimeseriesBarChart({
     });
   };
 
-  // biome-ignore lint/suspicious/noExplicitAny: those are safe to leave
-  const handleMouseMove = (e: any) => {
+  const handleMouseMove = (e: ChartMouseEvent) => {
     if (!enableSelection) {
       return;
     }
@@ -104,8 +115,8 @@ export function LogsTimeseriesBarChart({
       onSelectionChange({ start, end });
     }
     setSelection({
-      start: "",
-      end: "",
+      start: undefined,
+      end: undefined,
       startTimestamp: undefined,
       endTimestamp: undefined,
     });
@@ -126,9 +137,8 @@ export function LogsTimeseriesBarChart({
           ? 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">
+            ).map((time) => (
+              <div key={time.getTime()} className="z-10">
                 {formatTimestampLabel(time)}
               </div>
             ))
@@ -187,8 +197,11 @@ 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,
+                        "HH:mm",
+                        granularity,
+                      )(payload as TimeseriesData[])
                     }
                   />
                 );

apps/dashboard/components/logs/chart/utils/format-timestamp.ts

@@ -3,7 +3,7 @@ import { format, fromUnixTime } from "date-fns";
 
 export const formatTimestampLabel = (timestamp: string | number | Date) => {
   const date = new Date(timestamp);
-  return format(date, "MMM dd, h:mma").toUpperCase();
+  return format(date, "MMM dd, h:mm a").toUpperCase();
 };
 
 export const formatTimestampForChart = (
@@ -14,21 +14,21 @@ export const formatTimestampForChart = (
 
   switch (granularity) {
     case "perMinute":
-      return format(localDate, "HH:mm:ss");
+      return format(localDate, "h:mm:ss a");
     case "per5Minutes":
     case "per15Minutes":
     case "per30Minutes":
-      return format(localDate, "HH:mm");
+      return format(localDate, "h:mm a");
     case "perHour":
     case "per2Hours":
     case "per4Hours":
     case "per6Hours":
-      return format(localDate, "MMM d, HH:mm");
+      return format(localDate, "MMM d, h:mm a");
     case "perDay":
       return format(localDate, "MMM d");
 
     case "per12Hours":
-      return format(localDate, "MMM d, HH:mm");
+      return format(localDate, "MMM d, h:mm a");
     case "per3Days":
       return format(localDate, "MMM d");
     case "perWeek":
@@ -52,5 +52,5 @@ const isUnixMicro = (unix: string | number): boolean => {
 
 export const formatTimestampTooltip = (value: string | number) => {
   const date = isUnixMicro(value) ? unixMicroToDate(value) : new Date(value);
-  return format(date, "MMM dd HH:mm:ss");
+  return format(date, "MMM dd h:mm:ss a");
 };

apps/dashboard/components/logs/overview-charts/overview-area-chart.tsx

@@ -1,4 +1,5 @@
 "use client";
+
 import { calculateTimePoints } from "@/components/logs/chart/utils/calculate-timepoints";
 import { formatTimestampLabel } from "@/components/logs/chart/utils/format-timestamp";
 import {
@@ -8,7 +9,8 @@ import {
   ChartTooltipContent,
 } from "@/components/ui/chart";
 import { formatNumber } from "@/lib/fmt";
-import { cn } from "@unkey/ui/src/lib/utils";
+import { cn } from "@/lib/utils";
+import { format } from "date-fns";
 import { useState } from "react";
 import {
   Area,
@@ -18,10 +20,54 @@ import {
   ResponsiveContainer,
   YAxis,
 } from "recharts";
+
 import { OverviewAreaChartError } from "./overview-area-chart-error";
 import { OverviewAreaChartLoader } from "./overview-area-chart-loader";
 import type { Selection, TimeseriesData } from "./types";
-import { createTimeIntervalFormatter } from "./utils";
+
+// Helper function to format tooltip timestamps based on granularity and data span
+const formatTooltipTimestamp = (
+  timestamp: number | string,
+  granularity?: string,
+  data?: TimeseriesData[],
+) => {
+  const date = new Date(timestamp);
+
+  // If we have data, check if it spans multiple days
+  if (data && data.length > 1) {
+    const firstDay = new Date(data[0].originalTimestamp);
+    const lastDay = new Date(data[data.length - 1].originalTimestamp);
+
+    // Check if the data spans multiple calendar days
+    const firstDayStr = firstDay.toDateString();
+    const lastDayStr = lastDay.toDateString();
+
+    if (firstDayStr !== lastDayStr) {
+      // Data spans multiple days, always show date + time
+      return format(date, "MMM dd, h:mm a");
+    }
+  }
+
+  // For granularities less than 12 hours on same day, show only time
+  if (
+    granularity &&
+    [
+      "perMinute",
+      "per5Minutes",
+      "per15Minutes",
+      "per30Minutes",
+      "perHour",
+      "per2Hours",
+      "per4Hours",
+      "per6Hours",
+    ].includes(granularity)
+  ) {
+    return format(date, "h:mm a");
+  }
+
+  // For granularities 12 hours or more, show date + time
+  return format(date, "MMM dd, h:mm a");
+};
 
 export type ChartMetric = {
   key: string;
@@ -46,6 +92,7 @@ export interface TimeseriesAreaChartProps {
   isError?: boolean;
   enableSelection?: boolean;
   labels: TimeseriesChartLabels;
+  granularity?: string;
 }
 
 export const OverviewAreaChart = ({
@@ -56,6 +103,7 @@ export const OverviewAreaChart = ({
   isError,
   enableSelection = false,
   labels,
+  granularity,
 }: TimeseriesAreaChartProps) => {
   const [selection, setSelection] = useState<Selection>({ start: "", end: "" });
 
@@ -241,10 +289,81 @@ export const OverviewAreaChart = ({
                       label={label}
                       active={active}
                       className="rounded-lg shadow-lg border border-gray-4"
-                      labelFormatter={(_, tooltipPayload) =>
-                        //@ts-expect-error safe to leave as is for now
-                        createTimeIntervalFormatter(data, "HH:mm")(tooltipPayload)
-                      }
+                      labelFormatter={(_, tooltipPayload) => {
+                        if (!tooltipPayload?.[0]?.payload?.originalTimestamp) {
+                          return "";
+                        }
+
+                        const currentPayload = tooltipPayload[0].payload;
+                        const currentTimestamp = currentPayload.originalTimestamp;
+
+                        if (!data?.length) {
+                          return (
+                            <div className="px-4">
+                              <span className="font-mono text-accent-9 text-xs whitespace-nowrap">
+                                {formatTooltipTimestamp(currentTimestamp, granularity, data)}
+                              </span>
+                            </div>
+                          );
+                        }
+
+                        // Find position in the data array
+                        const currentIndex = data.findIndex(
+                          (item) => item?.originalTimestamp === currentTimestamp,
+                        );
+
+                        // If this is the last item or not found, just show current timestamp
+                        if (currentIndex === -1 || currentIndex >= data.length - 1) {
+                          return (
+                            <div className="px-4">
+                              <span className="font-mono text-accent-9 text-xs whitespace-nowrap">
+                                {formatTooltipTimestamp(currentTimestamp, granularity, data)}
+                              </span>
+                            </div>
+                          );
+                        }
+
+                        // Get the next point in the sequence for interval display
+                        const nextPoint = data[currentIndex + 1];
+                        if (!nextPoint) {
+                          return (
+                            <div className="px-4">
+                              <span className="font-mono text-accent-9 text-xs whitespace-nowrap">
+                                {formatTooltipTimestamp(currentTimestamp, granularity, data)}
+                              </span>
+                            </div>
+                          );
+                        }
+
+                        // Format both timestamps - considers both granularity and data span
+                        const formattedCurrentTimestamp = formatTooltipTimestamp(
+                          currentTimestamp,
+                          granularity,
+                          data,
+                        );
+                        const formattedNextTimestamp = formatTooltipTimestamp(
+                          nextPoint.originalTimestamp,
+                          granularity,
+                          data,
+                        );
+
+                        // Get timezone abbreviation
+                        const timezone =
+                          new Intl.DateTimeFormat("en-US", {
+                            timeZoneName: "short",
+                          })
+                            .formatToParts(new Date())
+                            .find((part) => part.type === "timeZoneName")?.value || "";
+
+                        // Return formatted interval with timezone info
+                        return (
+                          <div className="px-4">
+                            <span className="font-mono text-accent-9 text-xs whitespace-nowrap">
+                              {formattedCurrentTimestamp} - {formattedNextTimestamp} ({timezone})
+                            </span>
+                          </div>
+                        );
+                      }}
                     />
                   );
                 }}