hazo_dataviz 0.3.0 → 0.4.0

package/CHANGE_LOG.md

@@ -1,6 +1,20 @@
 # hazo_dataviz — Change Log
 
-## 0.3.0 — 2026-06-13 (unreleased)
+## 0.4.0 — 2026-06-14
+
+Interactive time-series widgets with grain roll-up + recharts moved to peerDependencies.
+
+- **`TimeSeriesChart`** (`src/charts/time_series_chart.tsx`) — new interactive chart component supporting single- and multi-series data; renders as recharts `LineChart` or `BarChart` with a built-in segmented `ChartControls` toolbar (uncontrolled by default, externally controlled when `grain`/`chartType`/`onGrainChange`/`onChartTypeChange` props are all supplied); auto-rolls up daily data to weekly / monthly / quarterly / yearly via `aggregateSeries`; optional `referenceDate` marker (day grain only); SSR-safe mount guard
+- **`ChartControls`** (`src/charts/chart_controls.tsx`) — standalone segmented-control toolbar for grain (Daily / Weekly / Monthly / Quarterly / Yearly) and chart-type (Line / Bar) selection; fully themeable via `ChartTheme`; exported types `ChartControlsProps`, `ChartType`, `ChartTheme`
+- **`aggregateSeries` / `bucketDate`** extracted to `src/lib/time_bucket.ts`; both now exported from `./client` for consumer reuse
+- **recharts** moved from `dependencies` to `peerDependencies` (`"^2.15.4 || ^3.0.0"`) + `devDependencies` (`^2.15.4`), so consumers (e.g. seo_monitor on recharts 3) supply the single copy
+- **`hazo_core` peer** floor lowered from `^1.2.0` to `^1.0.0` (allows consumers on any hazo_core 1.x; workspace policy forbids `>=` ranges)
+- **Fix (client-safety)**: `lib/format.ts` no longer imports `format_date` from `hazo_core` — that symbol is server-only (absent from hazo_core's `client` export condition), which broke client bundling for consumers on `hazo_core >=1.0.0`. The `date` format case now uses a self-contained formatter (default `dmy`); only client-safe `formatCurrency`/`formatNumber` remain imported
+- **Tests**: added unit coverage for the new surface — `ChartControls` render/interaction (`src/charts/__tests__/chart_controls.test.tsx`), `TimeSeriesChart` empty-state (`src/charts/__tests__/time_series_chart.test.tsx`; full recharts render stays browser-only per the jest ESM/recharts limitation), and the client-safe date formatter codes in `format.test.ts`. Added `/autotest` scenarios for `aggregateSeries`/`bucketDate` grain roll-up and `formatValue`
+- **Test-app**: new **Widgets** sidebar page (`test-app/app/widgets/page.tsx`) that renders `TimeSeriesChart` + `ChartControls` interactively — uncontrolled built-in toolbar, multi-series with per-series agg, a shared controlled toolbar driving two charts, the `referenceDate` marker, and the empty state — over 120 days of deterministic synthetic data
+- **Fix (test-app)**: bumped the test-app's `hazo_dataviz` dep range `^0.3.0` → `^0.4.0` and removed a nested published-`0.3.0` self-shadow under `node_modules/` that was masking the live workspace source (caret on `0.3.0` excludes `0.4.0`)
+
+## 0.3.0 — 2026-06-13
 
 "Studio" visual restyle — a warm, editorial light theme applied to every shipped
 visualizer and to the test-app showroom.

package/README.md

@@ -4,15 +4,15 @@ Headless data-visualization primitives for hazo apps. A descriptor-driven data l
 
 ## Status
 
-**v0.3.0** — in development (not yet published to npm). Data layer + built-in visualizers + auto-selection complete. The server-SQL runner is deferred (blocked on `hazo_connect` GROUP BY support — see FR-003).
+**v0.4.0** — Data layer + built-in visualizers + auto-selection complete, plus interactive time-series widgets (`TimeSeriesChart` / `ChartControls`) with client-side grain roll-up. The server-SQL runner is deferred (blocked on `hazo_connect` GROUP BY support — see FR-003).
 
 ## Install
 
 ```bash
-npm install hazo_dataviz hazo_core
+npm install hazo_dataviz hazo_core recharts
 ```
 
-Peer deps: `hazo_core` (required); `hazo_connect` / `hazo_ui` / `hazo_api` (optional). The visualizers depend on `recharts` and `react` (recharts is a direct dep; react is a peer).
+Peer deps: `hazo_core` (required); `recharts` (required for the chart components — `^2.15.4 || ^3.0.0`, supply one copy yourself); `react` / `react-dom`; `hazo_connect` / `hazo_ui` / `hazo_api` (optional).
 
 ## Quick start — data layer
 
@@ -98,11 +98,37 @@ For hand-built charts (not query-driven), `hazo_dataviz/client` exports lightwei
 recharts wrappers: `LineChart` (single series) and `MultiLineChart` (multi series),
 both with null-gap handling and responsive sizing.
 
+### Interactive time-series widgets
+
+`TimeSeriesChart` is a higher-level widget for daily time-series data with built-in
+grain roll-up. It accepts single- (`data`) or multi-series (`series`) input, renders as
+a line or bar chart, and rolls daily points up to weekly / monthly / quarterly / yearly
+via `aggregateSeries` as the grain changes. It ships a segmented `ChartControls` toolbar
+(uncontrolled by default; pass all of `grain` / `chartType` / `onGrainChange` /
+`onChartTypeChange` to control it externally and share one toolbar across charts).
+
+```tsx
+import { TimeSeriesChart } from 'hazo_dataviz/client';
+
+<TimeSeriesChart
+  dates={dates}                    // ['2024-01-01', ...]
+  series={[
+    { label: 'Revenue', color: '#f5563d', data: revenue, agg: 'sum' },
+    { label: 'Sessions', color: '#14a098', data: sessions, agg: 'avg' },
+  ]}
+  unit="k"
+  referenceDate="2024-03-01"       // dashed "today" marker (day grain only)
+/>
+```
+
+`ChartControls` (grain + chart-type segmented control) and the pure helpers
+`aggregateSeries` / `bucketDate` are also exported standalone for consumer reuse.
+
 ## Exports
 
 | Entry point | Exports |
 |---|---|
-| `hazo_dataviz` (server) / `hazo_dataviz/client` | `parseDescriptor`, `parseQuery`, `derivePickerOptions`, `createInMemoryRunner`, `useDataQuery`, `formatValue` / `formatPercent` / `formatCompact`, `LineChart`, `MultiLineChart`, `CONTRACT_VERSION`, + types |
+| `hazo_dataviz` (server) / `hazo_dataviz/client` | `parseDescriptor`, `parseQuery`, `derivePickerOptions`, `createInMemoryRunner`, `useDataQuery`, `formatValue` / `formatPercent` / `formatCompact`, `LineChart`, `MultiLineChart`, `TimeSeriesChart`, `ChartControls`, `aggregateSeries`, `bucketDate`, `CONTRACT_VERSION`, + types |
 | `hazo_dataviz/visualizers` | `VisualizerView`, `builtinVisualizers`, `selectVisualizer`, `deriveEncoding`, `classifyShape`, + `Visualizer` / `VisualizerOpts` / `QueryShape` types |
 | `hazo_dataviz/testing` | Fixtures (`prices`, `sector_breakdown`, `sparse`) + `createInMemoryRunner` re-export |
 | `hazo_dataviz/api` | HTTP route handler factories (`hazo_api`-based) |

package/SETUP_CHECKLIST.md

@@ -9,7 +9,9 @@ npm install hazo_dataviz hazo_core recharts
 ```
 
 - `hazo_core` is a required peer dependency.
-- `recharts` is required by the built-in visualizers and `./client` chart primitives.
+- `recharts` is a required peer dependency (`^2.15.4 || ^3.0.0`) of the built-in
+  visualizers and `./client` chart primitives (`LineChart`, `MultiLineChart`,
+  `TimeSeriesChart`) — supply a single copy in the consuming app.
 - `react` / `react-dom` are peer deps (^18 or ^19).
 - `hazo_connect` / `hazo_ui` / `hazo_api` are optional peers — only needed if you use
   the (future) server-SQL runner or the `./api` route handlers.

package/dist/charts/chart_controls.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import type { TimeGrain } from '../schema/descriptor.js';
+export type { TimeGrain };
+export type ChartType = 'line' | 'bar';
+export interface ChartTheme {
+    /** primary text / active control text */
+    ink: string;
+    /** muted text / inactive control text */
+    muted: string;
+    /** hairline borders */
+    hairline: string;
+    /** control surface background (inactive) */
+    surface: string;
+    /** active segment background */
+    active: string;
+}
+export interface ChartControlsProps {
+    grain: TimeGrain;
+    chartType: ChartType;
+    onGrainChange: (g: TimeGrain) => void;
+    onChartTypeChange: (t: ChartType) => void;
+    /** subset of grains to show; default ['day','week','month','year'] */
+    grains?: TimeGrain[];
+    /** subset of chart types to show; default ['line','bar'] */
+    chartTypes?: ChartType[];
+    /** partial theme override; sensible light defaults when omitted */
+    theme?: Partial<ChartTheme>;
+    className?: string;
+}
+export declare function ChartControls({ grain, chartType, onGrainChange, onChartTypeChange, grains, chartTypes, theme, className, }: ChartControlsProps): React.ReactElement;
+//# sourceMappingURL=chart_controls.d.ts.map

package/dist/charts/chart_controls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart_controls.d.ts","sourceRoot":"","sources":["../../src/charts/chart_controls.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAGzD,YAAY,EAAE,SAAS,EAAE,CAAC;AAI1B,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,KAAK,CAAC;AAEvC,MAAM,WAAW,UAAU;IACzB,yCAAyC;IACzC,GAAG,EAAE,MAAM,CAAC;IACZ,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,4CAA4C;IAC5C,OAAO,EAAE,MAAM,CAAC;IAChB,gCAAgC;IAChC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,SAAS,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;IACrB,aAAa,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IACtC,iBAAiB,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C,sEAAsE;IACtE,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;IACzB,mEAAmE;IACnE,KAAK,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA+ID,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,SAAS,EACT,aAAa,EACb,iBAAiB,EACjB,MAAuB,EACvB,UAAgC,EAChC,KAAK,EACL,SAAS,GACV,EAAE,kBAAkB,GAAG,KAAK,CAAC,YAAY,CA+BzC"}

package/dist/charts/chart_controls.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ── Constants ─────────────────────────────────────────────────────────────────
+const DEFAULT_THEME = {
+    ink: '#2f2a25',
+    muted: '#9a9087',
+    hairline: '#e7ddd0',
+    surface: 'transparent',
+    active: '#f0ebe3',
+};
+const DEFAULT_GRAINS = ['day', 'week', 'month', 'year'];
+const DEFAULT_CHART_TYPES = ['line', 'bar'];
+const GRAIN_LABELS = {
+    day: 'Daily',
+    week: 'Weekly',
+    month: 'Monthly',
+    quarter: 'Quarterly',
+    year: 'Yearly',
+};
+const CHART_TYPE_LABELS = {
+    line: 'Line',
+    bar: 'Bar',
+};
+// ── Tiny SVG icons (optional visual hint beside each label) ───────────────────
+function LineIcon() {
+    return (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", style: { flexShrink: 0 }, children: _jsx("polyline", { points: "1,9 4,5 7,7 11,2" }) }));
+}
+function BarIcon() {
+    return (_jsxs("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "currentColor", "aria-hidden": "true", style: { flexShrink: 0 }, children: [_jsx("rect", { x: "1", y: "7", width: "2.5", height: "4", rx: "0.5" }), _jsx("rect", { x: "4.75", y: "4", width: "2.5", height: "7", rx: "0.5" }), _jsx("rect", { x: "8.5", y: "1", width: "2.5", height: "10", rx: "0.5" })] }));
+}
+function SegmentedGroup({ options, value, getLabel, getIcon, getTestId, onChange, theme, }) {
+    return (_jsx("div", { style: {
+            display: 'inline-flex',
+            border: `1px solid ${theme.hairline}`,
+            borderRadius: 8,
+            overflow: 'hidden',
+        }, children: options.map((opt, idx) => {
+            const isActive = opt === value;
+            const isFirst = idx === 0;
+            return (_jsxs("button", { type: "button", "data-testid": getTestId(opt), "aria-pressed": isActive, onClick: () => onChange(opt), style: {
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: 5,
+                    padding: '5px 11px',
+                    fontSize: 12,
+                    fontWeight: isActive ? 600 : 400,
+                    lineHeight: 1,
+                    color: isActive ? theme.ink : theme.muted,
+                    background: isActive ? theme.active : theme.surface,
+                    border: 'none',
+                    borderLeft: isFirst ? 'none' : `1px solid ${theme.hairline}`,
+                    cursor: 'pointer',
+                    whiteSpace: 'nowrap',
+                    transition: 'background 0.12s, color 0.12s',
+                    // Reset browser button styles
+                    outline: 'none',
+                    appearance: 'none',
+                    WebkitAppearance: 'none',
+                }, children: [getIcon ? getIcon(opt) : null, getLabel(opt)] }, opt));
+        }) }));
+}
+// ── ChartControls ─────────────────────────────────────────────────────────────
+function getChartTypeIcon(t) {
+    if (t === 'line')
+        return _jsx(LineIcon, {});
+    return _jsx(BarIcon, {});
+}
+export function ChartControls({ grain, chartType, onGrainChange, onChartTypeChange, grains = DEFAULT_GRAINS, chartTypes = DEFAULT_CHART_TYPES, theme, className, }) {
+    const t = { ...DEFAULT_THEME, ...theme };
+    return (_jsxs("div", { className: className, style: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 8,
+        }, children: [_jsx(SegmentedGroup, { options: grains, value: grain, getLabel: (g) => GRAIN_LABELS[g], getTestId: (g) => `grain-${g}`, onChange: onGrainChange, theme: t }), _jsx(SegmentedGroup, { options: chartTypes, value: chartType, getLabel: (ct) => CHART_TYPE_LABELS[ct], getIcon: getChartTypeIcon, getTestId: (ct) => `charttype-${ct}`, onChange: onChartTypeChange, theme: t })] }));
+}

package/dist/charts/time_series_chart.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import type { ChartType, ChartTheme } from './chart_controls.js';
+import type { Agg, TimeGrain } from '../schema/descriptor.js';
+import type { ChartDataSeries } from '../types/index.js';
+export interface TimeSeriesSeries {
+    label?: string;
+    color: string;
+    data: ChartDataSeries;
+    /** per-series aggregation for the grain roll-up; default 'sum' */
+    agg?: Agg;
+}
+export interface TimeSeriesChartProps {
+    dates: string[];
+    /** multi-series form */
+    series?: TimeSeriesSeries[];
+    /** single-series convenience form (used when `series` is omitted) */
+    data?: ChartDataSeries;
+    color?: string;
+    label?: string;
+    agg?: Agg;
+    height?: number;
+    unit?: string;
+    theme?: Partial<ChartTheme>;
+    /** draws a "today" reference marker, ONLY when the active grain === 'day' */
+    referenceDate?: string;
+    grain?: TimeGrain;
+    chartType?: ChartType;
+    onGrainChange?: (g: TimeGrain) => void;
+    onChartTypeChange?: (t: ChartType) => void;
+    /** when uncontrolled, render the ChartControls header (default true uncontrolled, false controlled) */
+    showControls?: boolean;
+    /** grains to offer in the (uncontrolled) controls; passthrough to ChartControls */
+    grains?: TimeGrain[];
+    className?: string;
+}
+export declare function TimeSeriesChart(props: TimeSeriesChartProps): React.ReactElement;
+//# sourceMappingURL=time_series_chart.d.ts.map

package/dist/charts/time_series_chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time_series_chart.d.ts","sourceRoot":"","sources":["../../src/charts/time_series_chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjE,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAIzD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,eAAe,CAAC;IACtB,kEAAkE;IAClE,GAAG,CAAC,EAAE,GAAG,CAAC;CACX;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,wBAAwB;IACxB,MAAM,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC5B,qEAAqE;IACrE,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,GAAG,CAAC;IACV,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAC5B,6EAA6E;IAC7E,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IACvC,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IAC3C,uGAAuG;IACvG,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mFAAmF;IACnF,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAoED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,KAAK,CAAC,YAAY,CAkN/E"}

package/dist/charts/time_series_chart.js

@@ -0,0 +1,123 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { LineChart as RLineChart, Line, BarChart as RBarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, ReferenceLine, } from 'recharts';
+import { aggregateSeries } from '../lib/time_bucket.js';
+import { ChartControls } from './chart_controls.js';
+// ── Default theme ──────────────────────────────────────────────────────────────
+const DEFAULT_THEME = {
+    ink: '#2f2a25',
+    muted: '#9a9087',
+    hairline: '#ece6dd',
+    surface: '#fffdf9',
+    active: '#f0ebe3',
+};
+function CustomTooltip({ active, label, payload, unit, theme }) {
+    if (!active || !payload || payload.length === 0)
+        return null;
+    return (_jsxs("div", { style: {
+            background: theme.surface,
+            border: `1px solid ${theme.hairline}`,
+            borderRadius: 6,
+            padding: '7px 10px',
+            fontSize: 12,
+            color: theme.ink,
+            boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
+        }, children: [_jsx("div", { style: { fontWeight: 600, marginBottom: payload.length > 1 ? 4 : 0 }, children: label }), payload.map((entry, i) => (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [_jsx("span", { style: {
+                            display: 'inline-block',
+                            width: 8,
+                            height: 8,
+                            borderRadius: '50%',
+                            background: entry.color ?? theme.ink,
+                            flexShrink: 0,
+                        } }), _jsx("span", { style: { color: theme.muted }, children: entry.name ? `${entry.name}: ` : '' }), _jsx("span", { children: entry.value != null ? `${entry.value}${unit ?? ''}` : '—' })] }, i)))] }));
+}
+// ── TimeSeriesChart ────────────────────────────────────────────────────────────
+export function TimeSeriesChart(props) {
+    const { dates, series, data, color, label, agg, height = 220, unit, theme, referenceDate, grain: grainProp, chartType: chartTypeProp, onGrainChange, onChartTypeChange, grains, className, } = props;
+    // ── Controlled vs uncontrolled ────────────────────────────────────────────
+    const isControlled = grainProp !== undefined && chartTypeProp !== undefined;
+    const [grainState, setGrainState] = React.useState(grainProp ?? 'day');
+    const [typeState, setTypeState] = React.useState(chartTypeProp ?? 'line');
+    const activeGrain = isControlled ? grainProp : grainState;
+    const activeType = isControlled ? chartTypeProp : typeState;
+    const showControls = props.showControls ?? !isControlled;
+    const handleGrain = React.useCallback((g) => {
+        if (!isControlled)
+            setGrainState(g);
+        onGrainChange?.(g);
+    }, [isControlled, onGrainChange]);
+    const handleType = React.useCallback((t) => {
+        if (!isControlled)
+            setTypeState(t);
+        onChartTypeChange?.(t);
+    }, [isControlled, onChartTypeChange]);
+    // ── SSR mount guard ───────────────────────────────────────────────────────
+    const [mounted, setMounted] = React.useState(false);
+    React.useEffect(() => { setMounted(true); }, []);
+    // ── Resolve merged theme ──────────────────────────────────────────────────
+    const t = { ...DEFAULT_THEME, ...theme };
+    // ── Normalize series ──────────────────────────────────────────────────────
+    let resolvedSeries;
+    if (series && series.length > 0) {
+        resolvedSeries = series;
+    }
+    else if (data) {
+        resolvedSeries = [{ label, color: color ?? '#38bdf8', data, agg }];
+    }
+    else {
+        resolvedSeries = [];
+    }
+    // ── Empty state ───────────────────────────────────────────────────────────
+    if (resolvedSeries.length === 0) {
+        return (_jsx("div", { className: className, style: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height,
+                color: t.muted,
+                fontSize: 14,
+            }, children: "No data" }));
+    }
+    // ── Roll-up ───────────────────────────────────────────────────────────────
+    const rolled = resolvedSeries.map((s) => aggregateSeries(dates, s.data, activeGrain, s.agg ?? 'sum'));
+    const bucketDates = rolled[0]?.dates ?? [];
+    // Build recharts row objects: [{ x: date, s0: val, s1: val, ... }]
+    const seriesMeta = resolvedSeries.map((s, i) => ({
+        key: `s${i}`,
+        color: s.color,
+        label: s.label ?? (resolvedSeries.length > 1 ? `Series ${i + 1}` : ''),
+    }));
+    const chartRows = bucketDates.map((d, i) => {
+        const row = { x: d };
+        for (let si = 0; si < rolled.length; si++) {
+            row[`s${si}`] = rolled[si]?.values[i] ?? null;
+        }
+        return row;
+    });
+    // ── Axis formatters ───────────────────────────────────────────────────────
+    const yTickFmt = (v) => unit ? `${v}${unit}` : String(v);
+    // ── ReferenceLine guard ───────────────────────────────────────────────────
+    const showReference = referenceDate !== undefined &&
+        activeGrain === 'day' &&
+        bucketDates.includes(referenceDate);
+    // ── Shared axis / grid props ──────────────────────────────────────────────
+    const xAxisProps = {
+        dataKey: 'x',
+        tick: { fontSize: 11, fill: t.muted },
+        axisLine: { stroke: t.hairline },
+        tickLine: false,
+        minTickGap: 28,
+    };
+    const yAxisProps = {
+        tick: { fontSize: 11, fill: t.muted },
+        axisLine: { stroke: t.hairline },
+        tickLine: false,
+        width: 40,
+        tickFormatter: yTickFmt,
+    };
+    const tooltipEl = (_jsx(Tooltip, { isAnimationActive: false, content: (tooltipProps) => (_jsx(CustomTooltip, { active: tooltipProps.active, label: String(tooltipProps.label ?? ''), payload: tooltipProps.payload, unit: unit, theme: t })) }));
+    const referenceEl = showReference ? (_jsx(ReferenceLine, { x: referenceDate, stroke: "#fbbf24", strokeDasharray: "4 3", label: { value: 'today', position: 'insideTopRight', fontSize: 10, fill: '#fbbf24' } })) : null;
+    // ── Render ────────────────────────────────────────────────────────────────
+    return (_jsxs("div", { className: className, children: [showControls && (_jsx("div", { style: { marginBottom: 8 }, children: _jsx(ChartControls, { grain: activeGrain, chartType: activeType, onGrainChange: handleGrain, onChartTypeChange: handleType, grains: grains, theme: theme }) })), _jsx("div", { style: { height, width: '100%' }, children: mounted && activeType === 'bar' ? (_jsx(ResponsiveContainer, { width: "100%", height: height, children: _jsxs(RBarChart, { data: chartRows, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: t.hairline }), _jsx(XAxis, { ...xAxisProps }), _jsx(YAxis, { ...yAxisProps }), tooltipEl, referenceEl, seriesMeta.map((s) => (_jsx(Bar, { dataKey: s.key, name: s.label, fill: s.color, isAnimationActive: false }, s.key)))] }) })) : mounted ? (_jsx(ResponsiveContainer, { width: "100%", height: height, children: _jsxs(RLineChart, { data: chartRows, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: t.hairline }), _jsx(XAxis, { ...xAxisProps }), _jsx(YAxis, { ...yAxisProps }), tooltipEl, referenceEl, seriesMeta.map((s) => (_jsx(Line, { type: "monotone", dataKey: s.key, name: s.label, stroke: s.color, dot: false, connectNulls: false, isAnimationActive: false }, s.key)))] }) })) : null })] }));
+}

package/dist/index.client.d.ts

@@ -11,7 +11,12 @@ export type { Result, Column, Encoding, QueryRunner, PickerOptions } from './typ
 export type { QueryStatus, UseDataQueryResult } from './hooks/use_data_query.js';
 export { LineChart } from './charts/line_chart.js';
 export { MultiLineChart } from './charts/multi_line_chart.js';
+export { TimeSeriesChart } from './charts/time_series_chart.js';
+export { ChartControls } from './charts/chart_controls.js';
+export { aggregateSeries, bucketDate } from './lib/time_bucket.js';
 export type { LineChartProps } from './charts/line_chart.js';
 export type { MultiLineChartProps } from './charts/multi_line_chart.js';
+export type { TimeSeriesChartProps, TimeSeriesSeries } from './charts/time_series_chart.js';
+export type { ChartControlsProps, ChartType, ChartTheme } from './charts/chart_controls.js';
 export type { ChartDataPoint, ChartDataSeries, MultiSeries } from './types/index.js';
 //# sourceMappingURL=index.client.d.ts.map

package/dist/index.client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../src/index.client.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC5E,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,YAAY,EACV,iBAAiB,EACjB,KAAK,EACL,GAAG,EACH,SAAS,EACT,MAAM,EACN,QAAQ,GACT,MAAM,wBAAwB,CAAC;AAChC,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACnF,YAAY,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAC7F,YAAY,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAGjF,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,YAAY,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACxE,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../src/index.client.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC5E,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,YAAY,EACV,iBAAiB,EACjB,KAAK,EACL,GAAG,EACH,SAAS,EACT,MAAM,EACN,QAAQ,GACT,MAAM,wBAAwB,CAAC;AAChC,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACnF,YAAY,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAC7F,YAAY,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAGjF,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACnE,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,YAAY,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACxE,YAAY,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5F,YAAY,EAAE,kBAAkB,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAC5F,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/index.client.js

@@ -9,3 +9,6 @@ export { useDataQuery } from './hooks/use_data_query.js';
 // Bespoke chart components (recharts-based)
 export { LineChart } from './charts/line_chart.js';
 export { MultiLineChart } from './charts/multi_line_chart.js';
+export { TimeSeriesChart } from './charts/time_series_chart.js';
+export { ChartControls } from './charts/chart_controls.js';
+export { aggregateSeries, bucketDate } from './lib/time_bucket.js';

package/dist/lib/format.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"format.d.ts","sourceRoot":"","sources":["../../src/lib/format.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAItD,wBAAgB,WAAW,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAclE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,SAAI,GAAG,MAAM,CAMjE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAKnD"}
+{"version":3,"file":"format.d.ts","sourceRoot":"","sources":["../../src/lib/format.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAwBtD,wBAAgB,WAAW,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAclE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,SAAI,GAAG,MAAM,CAMjE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAKnD"}

package/dist/lib/format.js

@@ -1,5 +1,25 @@
-import { formatCurrency, formatNumber, format_date } from 'hazo_core';
+import { formatCurrency, formatNumber } from 'hazo_core';
 const LOCALE = 'en-US';
+/**
+ * Client-safe date formatter. hazo_core's `format_date` is server-only (it is
+ * absent from hazo_core's `client` export condition), and this module is part
+ * of the client barrel, so we format dates self-contained here instead.
+ * Supported `dateFormat` codes mirror the common hazo_core ones; default `dmy`.
+ */
+function formatDateValue(value, dateFormat) {
+    const d = new Date(value);
+    if (Number.isNaN(d.getTime()))
+        return value;
+    const dd = String(d.getUTCDate()).padStart(2, '0');
+    const mm = String(d.getUTCMonth() + 1).padStart(2, '0');
+    const yyyy = String(d.getUTCFullYear());
+    switch (dateFormat) {
+        case 'mdy': return `${mm}/${dd}/${yyyy}`;
+        case 'ymd': return `${yyyy}-${mm}-${dd}`;
+        case 'dmy':
+        default: return `${dd}/${mm}/${yyyy}`;
+    }
+}
 export function formatValue(value, format) {
     if (value === null || value === undefined)
         return '';
@@ -13,7 +33,7 @@ export function formatValue(value, format) {
         case 'compact':
             return formatCompact(Number(value));
         case 'date':
-            return format_date(String(value), format.dateFormat ?? 'dmy');
+            return formatDateValue(String(value), format.dateFormat);
     }
 }
 export function formatPercent(value, decimals = 2) {

package/dist/lib/runners/in_memory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"in_memory.d.ts","sourceRoot":"","sources":["../../../src/lib/runners/in_memory.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAkB,MAAM,4BAA4B,CAAC;AAEpF,OAAO,KAAK,EAAkB,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAmGxE,wBAAgB,oBAAoB,CAClC,UAAU,EAAE,iBAAiB,EAC7B,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,GAC9B,WAAW,CAkMb"}
+{"version":3,"file":"in_memory.d.ts","sourceRoot":"","sources":["../../../src/lib/runners/in_memory.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAEpE,OAAO,KAAK,EAAkB,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAgCxE,wBAAgB,oBAAoB,CAClC,UAAU,EAAE,iBAAiB,EAC7B,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,GAC9B,WAAW,CAkMb"}

package/dist/lib/runners/in_memory.js

@@ -1,70 +1,5 @@
 import { HazoError } from 'hazo_core';
-// ---------------------------------------------------------------------------
-// Time-grain bucketing
-// ---------------------------------------------------------------------------
-function isoWeek(d) {
-    // ISO 8601: week starts Monday; week 1 = week containing first Thursday
-    const thursday = new Date(d);
-    thursday.setUTCDate(d.getUTCDate() - ((d.getUTCDay() + 6) % 7) + 3);
-    const yearStart = new Date(Date.UTC(thursday.getUTCFullYear(), 0, 1));
-    const weekNum = Math.ceil(((thursday.getTime() - yearStart.getTime()) / 86400000 + 1) / 7);
-    return `${thursday.getUTCFullYear()}-W${String(weekNum).padStart(2, '0')}`;
-}
-function bucketDate(value, grain) {
-    const d = value instanceof Date ? value : new Date(String(value));
-    if (isNaN(d.getTime()))
-        return String(value);
-    const y = d.getUTCFullYear();
-    const m = d.getUTCMonth(); // 0-based
-    switch (grain) {
-        case 'day':
-            return `${y}-${String(m + 1).padStart(2, '0')}-${String(d.getUTCDate()).padStart(2, '0')}`;
-        case 'week':
-            return isoWeek(d);
-        case 'month':
-            return `${y}-${String(m + 1).padStart(2, '0')}`;
-        case 'quarter':
-            return `${y}-Q${Math.floor(m / 3) + 1}`;
-        case 'year':
-            return String(y);
-    }
-}
-// ---------------------------------------------------------------------------
-// Aggregation helpers (SQL null semantics — nulls are skipped)
-// ---------------------------------------------------------------------------
-function numericValues(vals) {
-    return vals.filter((v) => v !== null && v !== undefined && typeof v === 'number' && !isNaN(v));
-}
-function aggregate(vals, agg, rawVals) {
-    if (agg === 'count')
-        return vals.filter((v) => v !== null && v !== undefined).length;
-    const nums = numericValues(vals);
-    if (nums.length === 0)
-        return null;
-    switch (agg) {
-        case 'sum': return nums.reduce((a, b) => a + b, 0);
-        case 'avg': return nums.reduce((a, b) => a + b, 0) / nums.length;
-        case 'min': return Math.min(...nums);
-        case 'max': return Math.max(...nums);
-        case 'last': {
-            // last = value at max raw value in the group (rawVals = temporal dim values)
-            if (!rawVals || rawVals.length === 0)
-                return nums[nums.length - 1] ?? null;
-            let maxRaw = rawVals[0];
-            let lastVal = vals[0];
-            for (let i = 1; i < rawVals.length; i++) {
-                const rv = rawVals[i];
-                const curr = typeof rv === 'string' || typeof rv === 'number' ? rv : String(rv);
-                const max = typeof maxRaw === 'string' || typeof maxRaw === 'number' ? maxRaw : String(maxRaw);
-                if (curr > max) {
-                    maxRaw = rv;
-                    lastVal = vals[i];
-                }
-            }
-            return lastVal ?? null;
-        }
-    }
-}
+import { bucketDate, aggregate } from '../time_bucket.js';
 // ---------------------------------------------------------------------------
 // Filter application
 // ---------------------------------------------------------------------------

package/dist/lib/time_bucket.d.ts

@@ -0,0 +1,16 @@
+import type { Agg, TimeGrain } from '../schema/descriptor.js';
+import type { ChartDataSeries } from '../types/index.js';
+export declare function isoWeek(d: Date): string;
+export declare function bucketDate(value: unknown, grain: TimeGrain): string;
+export declare function aggregate(vals: unknown[], agg: Agg, rawVals?: unknown[]): unknown;
+/**
+ * Buckets parallel `dates`/`values` arrays by `grain` and aggregates each
+ * bucket with `agg`. Output order follows first-seen bucket key order
+ * (ascending when input dates are ascending). Nulls are skipped per SQL
+ * semantics; a bucket with no numeric values returns null.
+ */
+export declare function aggregateSeries(dates: string[], values: ChartDataSeries, grain: TimeGrain, agg: Agg): {
+    dates: string[];
+    values: ChartDataSeries;
+};
+//# sourceMappingURL=time_bucket.d.ts.map

package/dist/lib/time_bucket.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time_bucket.d.ts","sourceRoot":"","sources":["../../src/lib/time_bucket.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAMzD,wBAAgB,OAAO,CAAC,CAAC,EAAE,IAAI,GAAG,MAAM,CAOvC;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,GAAG,MAAM,CAiBnE;AAUD,wBAAgB,SAAS,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,GAAG,OAAO,CA0BjF;AAMD;;;;;GAKG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,MAAM,EAAE,EACf,MAAM,EAAE,eAAe,EACvB,KAAK,EAAE,SAAS,EAChB,GAAG,EAAE,GAAG,GACP;IAAE,KAAK,EAAE,MAAM,EAAE,CAAC;IAAC,MAAM,EAAE,eAAe,CAAA;CAAE,CAuB9C"}

package/dist/lib/time_bucket.js

@@ -0,0 +1,99 @@
+// ---------------------------------------------------------------------------
+// Time-grain bucketing and series aggregation utilities.
+// Extracted from runners/in_memory.ts so they can be used by chart helpers.
+// ---------------------------------------------------------------------------
+// ---------------------------------------------------------------------------
+// ISO week / date bucketing
+// ---------------------------------------------------------------------------
+export function isoWeek(d) {
+    // ISO 8601: week starts Monday; week 1 = week containing first Thursday
+    const thursday = new Date(d);
+    thursday.setUTCDate(d.getUTCDate() - ((d.getUTCDay() + 6) % 7) + 3);
+    const yearStart = new Date(Date.UTC(thursday.getUTCFullYear(), 0, 1));
+    const weekNum = Math.ceil(((thursday.getTime() - yearStart.getTime()) / 86400000 + 1) / 7);
+    return `${thursday.getUTCFullYear()}-W${String(weekNum).padStart(2, '0')}`;
+}
+export function bucketDate(value, grain) {
+    const d = value instanceof Date ? value : new Date(String(value));
+    if (isNaN(d.getTime()))
+        return String(value);
+    const y = d.getUTCFullYear();
+    const m = d.getUTCMonth(); // 0-based
+    switch (grain) {
+        case 'day':
+            return `${y}-${String(m + 1).padStart(2, '0')}-${String(d.getUTCDate()).padStart(2, '0')}`;
+        case 'week':
+            return isoWeek(d);
+        case 'month':
+            return `${y}-${String(m + 1).padStart(2, '0')}`;
+        case 'quarter':
+            return `${y}-Q${Math.floor(m / 3) + 1}`;
+        case 'year':
+            return String(y);
+    }
+}
+// ---------------------------------------------------------------------------
+// Aggregation helpers (SQL null semantics — nulls are skipped)
+// ---------------------------------------------------------------------------
+function numericValues(vals) {
+    return vals.filter((v) => v !== null && v !== undefined && typeof v === 'number' && !isNaN(v));
+}
+export function aggregate(vals, agg, rawVals) {
+    if (agg === 'count')
+        return vals.filter((v) => v !== null && v !== undefined).length;
+    const nums = numericValues(vals);
+    if (nums.length === 0)
+        return null;
+    switch (agg) {
+        case 'sum': return nums.reduce((a, b) => a + b, 0);
+        case 'avg': return nums.reduce((a, b) => a + b, 0) / nums.length;
+        case 'min': return Math.min(...nums);
+        case 'max': return Math.max(...nums);
+        case 'last': {
+            // last = value at max raw value in the group (rawVals = temporal dim values)
+            if (!rawVals || rawVals.length === 0)
+                return nums[nums.length - 1] ?? null;
+            let maxRaw = rawVals[0];
+            let lastVal = vals[0];
+            for (let i = 1; i < rawVals.length; i++) {
+                const rv = rawVals[i];
+                const curr = typeof rv === 'string' || typeof rv === 'number' ? rv : String(rv);
+                const max = typeof maxRaw === 'string' || typeof maxRaw === 'number' ? maxRaw : String(maxRaw);
+                if (curr > max) {
+                    maxRaw = rv;
+                    lastVal = vals[i];
+                }
+            }
+            return lastVal ?? null;
+        }
+    }
+}
+// ---------------------------------------------------------------------------
+// aggregateSeries — bucket parallel date/value arrays into time-grain buckets
+// ---------------------------------------------------------------------------
+/**
+ * Buckets parallel `dates`/`values` arrays by `grain` and aggregates each
+ * bucket with `agg`. Output order follows first-seen bucket key order
+ * (ascending when input dates are ascending). Nulls are skipped per SQL
+ * semantics; a bucket with no numeric values returns null.
+ */
+export function aggregateSeries(dates, values, grain, agg) {
+    // Use a Map to preserve insertion order (first-seen = ascending for sorted input)
+    const buckets = new Map();
+    for (let i = 0; i < dates.length; i++) {
+        const key = bucketDate(dates[i], grain);
+        const val = values[i] !== undefined ? values[i] : null;
+        if (!buckets.has(key)) {
+            buckets.set(key, []);
+        }
+        buckets.get(key).push(val);
+    }
+    const outDates = [];
+    const outValues = [];
+    for (const [key, vals] of buckets) {
+        outDates.push(key);
+        const aggregated = aggregate(vals, agg);
+        outValues.push(typeof aggregated === 'number' ? aggregated : null);
+    }
+    return { dates: outDates, values: outValues };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hazo_dataviz",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Headless data visualization primitives for hazo apps",
   "type": "module",
   "module": "./dist/index.js",
@@ -42,16 +42,16 @@
     "build:test-app": "npm run build && cd test-app && npm run build"
   },
   "dependencies": {
-    "recharts": "^2.15.4",
     "zod": "^4.1.12"
   },
   "peerDependencies": {
     "hazo_api": "^2.4.0",
-    "hazo_connect": "^3.6.0",
-    "hazo_core": "^1.1.0",
+    "hazo_connect": "^3.7.0",
+    "hazo_core": "^1.0.0",
     "hazo_ui": "^4.0.0",
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "recharts": "^2.15.4 || ^3.0.0"
   },
   "peerDependenciesMeta": {
     "hazo_connect": {
@@ -66,6 +66,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.2.4",
+    "recharts": "^2.15.4",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",
     "@types/jest": "^30.0.0",