feat: show timerange on chart tooltip

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

@@ -11,10 +11,11 @@ import { formatNumber } from "@/lib/fmt";
 import { Grid } from "@unkey/icons";
 import { useEffect, useRef, useState } from "react";
 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, formatTimestampTooltip } from "./utils/format-timestamp";
+import { formatTimestampLabel } from "./utils/format-timestamp";
 
 type Selection = {
   start: string | number;
@@ -183,18 +184,7 @@ export function LogsTimeseriesBarChart({
                       </div>
                     }
                     className="rounded-lg shadow-lg border border-gray-4"
-                    labelFormatter={(_, tooltipPayload) => {
-                      const originalTimestamp = tooltipPayload[0]?.payload?.originalTimestamp;
-                      return originalTimestamp ? (
-                        <div>
-                          <span className="font-mono text-accent-9 text-xs px-4">
-                            {formatTimestampTooltip(originalTimestamp)}
-                          </span>
-                        </div>
-                      ) : (
-                        ""
-                      );
-                    }}
+                    labelFormatter={(_, payload) => createTimeIntervalFormatter(data)(payload)}
                   />
                 );
               }}

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

@@ -1,9 +1,6 @@
 "use client";
 import { calculateTimePoints } from "@/components/logs/chart/utils/calculate-timepoints";
-import {
-  formatTimestampLabel,
-  formatTimestampTooltip,
-} from "@/components/logs/chart/utils/format-timestamp";
+import { formatTimestampLabel } from "@/components/logs/chart/utils/format-timestamp";
 import {
   type ChartConfig,
   ChartContainer,
@@ -24,6 +21,7 @@ import {
 import { OverviewAreaChartError } from "./overview-area-chart-error";
 import { OverviewAreaChartLoader } from "./overview-area-chart-loader";
 import type { Selection, TimeseriesData } from "./types";
+import { createTimeIntervalFormatter } from "./utils";
 
 export type ChartMetric = {
   key: string;
@@ -241,18 +239,9 @@ export const OverviewAreaChart = ({
                       label={label}
                       active={active}
                       className="rounded-lg shadow-lg border border-gray-4"
-                      labelFormatter={(_, tooltipPayload) => {
-                        const originalTimestamp = tooltipPayload[0]?.payload?.originalTimestamp;
-                        return originalTimestamp ? (
-                          <div>
-                            <span className="font-mono text-accent-9 text-xs px-4">
-                              {formatTimestampTooltip(originalTimestamp)}
-                            </span>
-                          </div>
-                        ) : (
-                          ""
-                        );
-                      }}
+                      labelFormatter={(_, tooltipPayload) =>
+                        createTimeIntervalFormatter(data)(tooltipPayload)
+                      }
                     />
                   );
                 }}

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

@@ -1,10 +1,7 @@
 "use client";
 
 import { calculateTimePoints } from "@/components/logs/chart/utils/calculate-timepoints";
-import {
-  formatTimestampLabel,
-  formatTimestampTooltip,
-} from "@/components/logs/chart/utils/format-timestamp";
+import { formatTimestampLabel } from "@/components/logs/chart/utils/format-timestamp";
 import {
   type ChartConfig,
   ChartContainer,
@@ -18,6 +15,7 @@ import { Bar, BarChart, CartesianGrid, ReferenceArea, ResponsiveContainer, YAxis
 import { OverviewChartError } from "./overview-bar-chart-error";
 import { OverviewChartLoader } from "./overview-bar-chart-loader";
 import type { Selection, TimeseriesData } from "./types";
+import { createTimeIntervalFormatter } from "./utils";
 
 type ChartTooltipItem = {
   label: string;
@@ -244,18 +242,9 @@ export function OverviewBarChart({
                         </div>
                       }
                       className="rounded-lg shadow-lg border border-gray-4"
-                      labelFormatter={(_, tooltipPayload) => {
-                        const originalTimestamp = tooltipPayload[0]?.payload?.originalTimestamp;
-                        return originalTimestamp ? (
-                          <div>
-                            <span className="font-mono text-accent-9 text-xs px-4">
-                              {formatTimestampTooltip(originalTimestamp)}
-                            </span>
-                          </div>
-                        ) : (
-                          ""
-                        );
-                      }}
+                      labelFormatter={(_, tooltipPayload) =>
+                        createTimeIntervalFormatter(data)(tooltipPayload)
+                      }
                     />
                   );
                 }}

apps/dashboard/components/logs/overview-charts/utils.tsx

@@ -0,0 +1,70 @@
+// components/logs/chart/utils/format-interval.ts
+
+import { formatTimestampTooltip } from "../chart/utils/format-timestamp";
+import type { TimeseriesData } from "./types";
+
+/**
+ * Creates a tooltip formatter that displays time intervals between data points
+ *
+ * @param data - The chart data array containing timestamp information
+ * @returns A formatter function for use with chart tooltips
+ */
+export function createTimeIntervalFormatter(data?: TimeseriesData[]) {
+  return (tooltipPayload: any[]) => {
+    // Basic validation checks
+    if (!tooltipPayload?.[0]?.payload) {
+      return "";
+    }
+
+    const currentPayload = tooltipPayload[0].payload;
+    const currentTimestamp = currentPayload.originalTimestamp;
+    const currentDisplayX = currentPayload.displayX;
+
+    // If we don't have necessary data, fallback to displaying just the current point
+    if (!currentTimestamp || !currentDisplayX || !data?.length) {
+      return (
+        <div>
+          <span className="font-mono text-accent-9 text-xs px-4">
+            {currentDisplayX || formatTimestampTooltip(currentTimestamp)}
+          </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>
+          <span className="font-mono text-accent-9 text-xs px-4">{currentDisplayX}</span>
+        </div>
+      );
+    }
+
+    // Get the next point in the sequence
+    const nextPoint = data[currentIndex + 1];
+    if (!nextPoint) {
+      return (
+        <div>
+          <span className="font-mono text-accent-9 text-xs px-4">{currentDisplayX}</span>
+        </div>
+      );
+    }
+
+    // Format the next timestamp
+    const nextDisplayX =
+      nextPoint.displayX ||
+      (nextPoint.originalTimestamp ? formatTimestampTooltip(nextPoint.originalTimestamp) : "");
+
+    // Return formatted interval
+    return (
+      <div>
+        <span className="font-mono text-accent-9 text-xs px-4">
+          {currentDisplayX} - {nextDisplayX}
+        </span>
+      </div>
+    );
+  };
+}

apps/dashboard/components/stats-card/components/chart/stats-chart.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { formatTimestampTooltip } from "@/components/logs/chart/utils/format-timestamp";
+import { createTimeIntervalFormatter } from "@/components/logs/overview-charts/utils";
 import {
   type ChartConfig,
   ChartContainer,
@@ -97,18 +97,7 @@ export function StatsTimeseriesBarChart<T extends BaseTimeseriesData>({
                     </div>
                   }
                   className="rounded-lg shadow-lg border border-gray-4"
-                  labelFormatter={(_, tooltipPayload) => {
-                    const originalTimestamp = tooltipPayload[0]?.payload?.originalTimestamp;
-                    return originalTimestamp ? (
-                      <div>
-                        <span className="font-mono text-accent-9 text-xs px-4">
-                          {formatTimestampTooltip(originalTimestamp)}
-                        </span>
-                      </div>
-                    ) : (
-                      ""
-                    );
-                  }}
+                  labelFormatter={(_, payload) => createTimeIntervalFormatter(data)(payload)}
                 />
               );
             }}

internal/clickhouse/src/ratelimits.ts

@@ -126,7 +126,7 @@ function createTimeseriesQuery(interval: TimeInterval, whereClause: string) {
     ORDER BY x ASC
     WITH FILL
       FROM toUnixTimestamp64Milli(CAST(toStartOfInterval(toDateTime(fromUnixTimestamp64Milli({startTime: Int64})), INTERVAL ${interval.stepSize} ${interval.step}) AS DateTime64(3)))
-      TO toUnixTimestamp64Milli(CAST(toStartOfInterval(toDateTime(fromUnixTimestamp64Milli({endTime: Int64})), INTERVAL ${interval.stepSize} ${intervalUnit}) AS DateTime64(3))) + ${stepMs}
+      TO toUnixTimestamp64Milli(CAST(toStartOfInterval(toDateTime(fromUnixTimestamp64Milli({endTime: Int64})), INTERVAL ${interval.stepSize} ${interval.step}) AS DateTime64(3))) + ${stepMs}
       STEP ${stepMs}`;
 }