fix(histogram): restore temporal execution and rendering

js/packages/storybook/.storybook/preview.tsx

@@ -2,7 +2,6 @@ import { theme } from "@datarecce/ui/theme";
 import CssBaseline from "@mui/material/CssBaseline";
 import { ThemeProvider as MuiThemeProvider } from "@mui/material/styles";
 import type { Preview } from "@storybook/react-vite";
-import "chartjs-adapter-date-fns";
 import { useEffect } from "react";
 
 // Import styles from @datarecce/ui

js/packages/storybook/package.json

@@ -27,7 +27,6 @@
     "@vitejs/plugin-react": "^6.0.5",
     "@vitest/browser-playwright": "^4.1.10",
     "@vitest/coverage-v8": "^4.1.10",
-    "chartjs-adapter-date-fns": "^3.0.0",
     "msw": "^2.15.0",
     "playwright": "^1.62.1",
     "storybook": "^10.5.7",

js/packages/ui/package.json

@@ -157,6 +157,7 @@
     "ag-grid-community": "^36.0.1",
     "ag-grid-react": "^36.0.1",
     "chart.js": "^4.5.0",
+    "chartjs-adapter-date-fns": "^3.0.0",
     "common-tags": "^1.8.0",
     "date-fns": "^4.1.0",
     "file-saver": "^2.0.5",

js/packages/ui/src/api/index.ts

@@ -117,6 +117,7 @@ export type {
   HistogramDiffParams,
   HistogramDiffResult,
   HistogramResult,
+  HistogramWireValue,
   ProfileDiffParams,
   ProfileDiffResult,
   ProfileDiffViewOptions,

js/packages/ui/src/api/profile.ts

@@ -93,18 +93,21 @@ export interface HistogramDiffParams {
   model: string;
   column_name: string;
   column_type: string;
+  num_bins?: number;
 }
 
 export interface HistogramResult {
   counts: number[];
   total: number;
 }
 
+export type HistogramWireValue = number | string;
+
 export interface HistogramDiffResult {
   base: HistogramResult;
   current: HistogramResult;
-  min: number;
-  max: number;
-  bin_edges: number[];
-  labels?: string[];
+  min: HistogramWireValue | null;
+  max: HistogramWireValue | null;
+  bin_edges: HistogramWireValue[];
+  labels?: string[] | null;
 }

js/packages/ui/src/components/data/HistogramChart.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import "chartjs-adapter-date-fns";
 import {
   BarElement,
   CategoryScale,
@@ -99,7 +100,16 @@ function formatBinRange(
   return `${formatEdge(start)} - ${formatEdge(end)}`;
 }
 
+function formatUtcHistogramEdge(value: number): string {
+  if (!Number.isFinite(value)) return String(value);
+  const iso = new Date(value).toISOString();
+  return iso.endsWith("T00:00:00.000Z")
+    ? iso.slice(0, 10)
+    : iso.replace(".000Z", "Z");
+}
+
 const MAX_EDGE_TICK_LABELS = 8;
+type HistogramChartValue = number | { x: number; y: number };
 
 /**
  * HistogramChart Component
@@ -142,8 +152,6 @@ function HistogramChartComponent({
   title,
   dataType = "numeric",
   samples = 0,
-  min = 0,
-  max = 0,
   binEdges,
   baseData,
   currentData,
@@ -159,6 +167,8 @@ function HistogramChartComponent({
   const comparisonColors = semanticColors.comparison;
   const isDatetime = dataType === "datetime";
   const isNumeric = dataType === "numeric";
+  const baseCounts = baseData.counts ?? [];
+  const currentCounts = currentData.counts ?? [];
   const formatNumericEdge = useMemo(
     () => createHistogramEdgeFormatter(binEdges),
     [binEdges],
@@ -181,11 +191,19 @@ function HistogramChartComponent({
   );
 
   // Build chart data
-  const chartData = useMemo<ChartData<"bar">>(() => {
+  const chartData = useMemo<ChartData<"bar", HistogramChartValue[]>>(() => {
     const labels = binEdges
       .slice(0, -1)
       .map((_, i) =>
-        formatBinRange(binEdges, i, isNumeric ? formatNumericEdge : undefined),
+        formatBinRange(
+          binEdges,
+          i,
+          isNumeric
+            ? formatNumericEdge
+            : isDatetime
+              ? formatUtcHistogramEdge
+              : undefined,
+        ),
       );
 
     const buildDataset = (
@@ -195,7 +213,10 @@ function HistogramChartComponent({
     ) => {
       const counts = data.counts ?? [];
       const chartValues = isDatetime
-        ? counts.map((v, i) => [binEdges[i], v] as [number, number])
+        ? counts.map((v, i) => ({
+            x: (binEdges[i] + binEdges[i + 1]) / 2,
+            y: v,
+          }))
         : isNumeric
           ? counts.map((v, i) => ({
               x: (binEdges[i] + binEdges[i + 1]) / 2,
@@ -205,7 +226,7 @@ function HistogramChartComponent({
 
       return {
         label,
-        data: chartValues as number[],
+        data: chartValues,
         backgroundColor: colors.chartFill,
         borderColor: colors.border,
         hoverBackgroundColor: colors.chartFill,
@@ -240,7 +261,7 @@ function HistogramChartComponent({
 
   // Build chart options
   const chartOptions = useMemo<ChartOptions<"bar">>(() => {
-    const maxCount = Math.max(...currentData.counts, ...baseData.counts);
+    const maxCount = Math.max(0, ...currentCounts, ...baseCounts);
     const edgeTickInterval = Math.max(
       1,
       Math.ceil((binEdges.length - 1) / (MAX_EDGE_TICK_LABELS - 1)),
@@ -307,13 +328,16 @@ function HistogramChartComponent({
               const range = formatBinRange(
                 binEdges,
                 dataIndex,
-                isNumeric ? formatNumericEdge : undefined,
+                isNumeric
+                  ? formatNumericEdge
+                  : isDatetime
+                    ? formatUtcHistogramEdge
+                    : undefined,
               );
               return `${dataTypeLabel}\n${range}`;
             },
             label({ datasetIndex, dataIndex, dataset }) {
-              const counts =
-                datasetIndex === 0 ? currentData.counts : baseData.counts;
+              const counts = datasetIndex === 0 ? currentCounts : baseCounts;
               const count = counts[dataIndex];
               const percent =
                 samples > 0 ? formatIntervalMinMax(count / samples) : "";
@@ -327,15 +351,18 @@ function HistogramChartComponent({
           ? {
               display: !hideAxis,
               type: "timeseries",
-              min,
-              max,
+              min: firstEdge,
+              max: terminalEdge,
               adapters: { date: {} },
               time: { minUnit: "day" },
               grid: { display: false },
               ticks: {
                 minRotation: 30,
                 maxRotation: 30,
                 maxTicksLimit: 8,
+                callback(value) {
+                  return formatUtcHistogramEdge(value as number);
+                },
                 color: themeColors.textColor,
               },
             }
@@ -394,11 +421,11 @@ function HistogramChartComponent({
     isDatetime,
     isNumeric,
     samples,
-    min,
-    max,
     binEdges,
     baseData,
     currentData,
+    baseCounts,
+    currentCounts,
     hideAxis,
     animate,
     themeColors,

js/packages/ui/src/components/data/__tests__/HistogramChart.geometry.test.tsx

@@ -12,7 +12,7 @@ import { vi } from "vitest";
 import { HistogramChart } from "../HistogramChart";
 
 interface CapturedChartProps {
-  data: ChartData<"bar">;
+  data: ChartData<"bar", (number | { x: number; y: number })[]>;
   options: ChartOptions<"bar">;
   plugins?: Plugin<"bar">[];
 }
@@ -26,6 +26,7 @@ interface RenderedBar {
     y?: { active(): boolean };
   };
   hidden: boolean;
+  skip?: boolean;
   width: number;
   x: number;
   y: number;
@@ -82,7 +83,66 @@ function createCanvas() {
   };
 }
 
-describe("HistogramChart numeric geometry", () => {
+describe("HistogramChart real Chart.js configuration", () => {
+  it("keeps every temporal interval inside edge-derived bounds with real Chart.js", () => {
+    const binEdges = [
+      Date.UTC(2026, 0, 1),
+      Date.UTC(2026, 0, 2),
+      Date.UTC(2026, 0, 4),
+    ];
+    render(
+      <HistogramChart
+        title="Temporal histogram"
+        dataType="datetime"
+        min={binEdges[0] + 6 * 60 * 60 * 1000}
+        max={binEdges[2] - 6 * 60 * 60 * 1000}
+        binEdges={binEdges}
+        baseData={{ counts: [2, 3] }}
+        currentData={{ counts: [5, 7] }}
+      />,
+    );
+
+    const { data, options } = getLastChartProps();
+    const chart = new ChartJS(createCanvas() as never, {
+      type: "bar",
+      data,
+      options: {
+        ...options,
+        animation: false,
+        plugins: {
+          ...options.plugins,
+          legend: { display: false },
+          title: { ...options.plugins?.title, display: false },
+        },
+        responsive: false,
+      },
+      platform: BasicPlatform,
+    });
+
+    try {
+      expect(chart.scales.x.type).toBe("timeseries");
+      expect(chart.scales.x.min).toBe(binEdges[0]);
+      expect(chart.scales.x.max).toBe(binEdges[2]);
+      expect(data.datasets[0].data).toEqual([
+        { x: Date.UTC(2026, 0, 1, 12), y: 5 },
+        { x: Date.UTC(2026, 0, 3), y: 7 },
+      ]);
+      const bars = chart.getDatasetMeta(0).data as unknown as RenderedBar[];
+      expect(bars).toHaveLength(2);
+      for (const bar of bars) {
+        expect(bar.skip).not.toBe(true);
+        expect(bar.x - bar.width / 2).toBeGreaterThanOrEqual(
+          chart.chartArea.left,
+        );
+        expect(bar.x + bar.width / 2).toBeLessThanOrEqual(
+          chart.chartArea.right,
+        );
+      }
+    } finally {
+      chart.destroy();
+    }
+  });
+
   it.each([
     { binEdges: [0, 20], counts: [5] },
     { binEdges: [0, 20, 40, 60, 80, 100], counts: [1, 2, 3, 4, 5] },