hazo_dataviz 0.5.0 → 0.6.1

package/CHANGE_LOG.md

@@ -1,5 +1,22 @@
 # hazo_dataviz — Change Log
 
+## 0.6.0 — 2026-08-02
+
+Legends, a themeable `LineChart`, and a modernised default look. Additive: no prop was removed or renamed, and a chart that passes no new props renders the same data with a cleaner frame.
+
+- **New `src/charts/chart_common.tsx`**, exported from `./client` — `ChartLegend`, `ChartTooltip`, `DEFAULT_CHART_THEME`, `resolveChartTheme`, plus the `ChartLegendEntry` / `ChartTooltipProps` types. `TimeSeriesChart` and `LineChart` each carried a private copy of this furniture and had already drifted apart; there is now one of each.
+- **`TimeSeriesChart.showLegend?: boolean`** — swatch legend under the plot. Defaults to `true` when every series carries a `label` and there is more than one, so the common "Added vs Done" chart gets a legend without asking. Pass `false` to suppress, `true` to force one on a single labelled series.
+- **`LineChart` gained `theme`, `label` and `showLegend`.** `theme` is the significant one: **`LineChart` previously took no theme at all**, so it rendered recharts' stock light-mode axes, gridlines and tooltip whatever the host app looked like — near-white hairlines on a dark card, while `TimeSeriesChart` on the same page themed correctly. Unset fields fall back to `DEFAULT_CHART_THEME`, so passing nothing preserves the old appearance exactly.
+- **Legends are HTML below the SVG, not recharts' `<Legend>`.** recharts carves legend space out of the `height` the caller passed, so switching one on would silently shrink the plot, and its default text colour is not theme-aware — the same bug being fixed above. Outside the SVG the legend costs no plot height and inherits nothing.
+- **Modernised default marks** (both charts, and both `TimeSeriesChart` types):
+  - Horizontal-only gridlines (`vertical={false}`), hairline, widely dashed (`2 6`). A full cross-hatch was the single most dated thing about the old frame, and vertical rules add nothing a time axis doesn't already give.
+  - Axis lines dropped — with a horizontal grid the baseline gridline already reads as the axis, and drawing both stacked two near-identical rules. Tick labels gained margin.
+  - Lines: `strokeWidth` 1 → 2, round caps and joins, and an `activeDot` ringed in the theme's tooltip surface so a hover marker reads as sitting *on* the line.
+  - Bars: 3px top corner radius, `maxBarSize` 28, tighter `barGap`.
+  - Themed tooltip cursor. recharts' stock cursor is an opaque light-grey band — a bright slab across the plot on any dark theme. Lines now get a dashed hairline, bars a faint wash of the theme's own `active`.
+  - A small plot margin so a peak's stroke and the last point's active dot are no longer clipped by the container edge.
+- **Tests**: `src/charts/__tests__/chart_common.test.tsx` — 11 cases covering theme merge, legend entry/colour rendering and the empty-list null, and the tooltip's unit suffix, null-value dash, single-vs-multi series naming, and opaque-background fallback. These run fully under jsdom; the chart bodies still can't (recharts pre-bundles a React-18 jsx-runtime), which is exactly why the legend and tooltip are plain HTML.
+
 ## 0.5.0 — 2026-07-21
 
 New pure inline-SVG chart primitive, extracted from a first consumer (stocktools' bespoke `ProgressRing`).

package/dist/charts/chart_common.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import type { ChartTheme } from './chart_controls.js';
+/**
+ * The package's stock "Studio" look: warm, light, low-contrast. Every chart
+ * merges `{ ...DEFAULT_CHART_THEME, ...props.theme }`, so a consumer only
+ * names the fields it wants to move.
+ *
+ * These are deliberately literal colours, not CSS custom properties: theme
+ * fields land on recharts' SVG *presentation attributes* (`fill`, `stroke`),
+ * not always a React `style` object, and custom-property resolution inside
+ * portalled/attribute-driven SVG is not reliable enough to ship blind.
+ */
+export declare const DEFAULT_CHART_THEME: ChartTheme;
+/** Merge a partial override over the package default. */
+export declare function resolveChartTheme(theme?: Partial<ChartTheme>): ChartTheme;
+export interface TooltipEntry {
+    color?: string;
+    name?: string | number;
+    value?: number | string | null;
+}
+export interface ChartTooltipProps {
+    active?: boolean;
+    label?: string;
+    payload?: TooltipEntry[];
+    unit?: string;
+    theme: ChartTheme;
+}
+export declare function ChartTooltip({ active, label, payload, unit, theme, }: ChartTooltipProps): React.ReactElement | null;
+export interface ChartLegendEntry {
+    label: string;
+    color: string;
+}
+/**
+ * A themed swatch row, rendered as plain HTML *below* the chart rather than
+ * through recharts' own `<Legend>`.
+ *
+ * Deliberate: recharts reserves vertical space for `<Legend>` out of the
+ * `height` the caller passed, so switching a legend on silently shrinks the
+ * plot — and its default text colour is not theme-aware, which is the exact
+ * bug this package already has one instance of. Outside the SVG, the legend
+ * costs the chart no plot height and inherits nothing from recharts.
+ */
+export declare function ChartLegend({ entries, theme, className, }: {
+    entries: ChartLegendEntry[];
+    theme: ChartTheme;
+    className?: string;
+}): React.ReactElement | null;
+//# sourceMappingURL=chart_common.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chart_common.d.ts","sourceRoot":"","sources":["../../src/charts/chart_common.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEtD;;;;;;;;;GASG;AACH,eAAO,MAAM,mBAAmB,EAAE,UAOjC,CAAC;AAEF,yDAAyD;AACzD,wBAAgB,iBAAiB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,GAAG,UAAU,CAEzE;AAID,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;CAChC;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,UAAU,CAAC;CACnB;AAED,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,KAAK,EACL,OAAO,EACP,IAAI,EACJ,KAAK,GACN,EAAE,iBAAiB,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAyD/C;AAID,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,SAAS,GACV,EAAE;IACD,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,KAAK,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAmC5B"}

package/dist/charts/chart_common.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The package's stock "Studio" look: warm, light, low-contrast. Every chart
+ * merges `{ ...DEFAULT_CHART_THEME, ...props.theme }`, so a consumer only
+ * names the fields it wants to move.
+ *
+ * These are deliberately literal colours, not CSS custom properties: theme
+ * fields land on recharts' SVG *presentation attributes* (`fill`, `stroke`),
+ * not always a React `style` object, and custom-property resolution inside
+ * portalled/attribute-driven SVG is not reliable enough to ship blind.
+ */
+export const DEFAULT_CHART_THEME = {
+    ink: '#2f2a25',
+    muted: '#9a9087',
+    hairline: '#ece6dd',
+    surface: '#fffdf9',
+    active: '#f0ebe3',
+    tooltipSurface: '#fffdf9',
+};
+/** Merge a partial override over the package default. */
+export function resolveChartTheme(theme) {
+    return { ...DEFAULT_CHART_THEME, ...theme };
+}
+export function ChartTooltip({ active, label, payload, unit, theme, }) {
+    if (!active || !payload || payload.length === 0)
+        return null;
+    return (_jsxs("div", { style: {
+            // Must be opaque to be readable; `surface` is commonly 'transparent'
+            // so the chart area can show the host card through it.
+            background: theme.tooltipSurface ??
+                (theme.surface === 'transparent' ? '#171717' : theme.surface),
+            border: `1px solid ${theme.hairline}`,
+            borderRadius: 8,
+            padding: '8px 10px',
+            fontSize: 12,
+            lineHeight: 1.5,
+            color: theme.ink,
+            boxShadow: '0 4px 16px rgba(0,0,0,0.18)',
+        }, children: [_jsx("div", { style: {
+                    fontWeight: 600,
+                    marginBottom: payload.length > 1 ? 5 : 0,
+                    color: theme.ink,
+                }, 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,
+                        } }), payload.length > 1 && entry.name ? (_jsx("span", { style: { color: theme.muted }, children: `${entry.name}: ` })) : null, _jsx("span", { style: { fontVariantNumeric: 'tabular-nums' }, children: entry.value != null ? `${entry.value}${unit ?? ''}` : '—' })] }, i)))] }));
+}
+/**
+ * A themed swatch row, rendered as plain HTML *below* the chart rather than
+ * through recharts' own `<Legend>`.
+ *
+ * Deliberate: recharts reserves vertical space for `<Legend>` out of the
+ * `height` the caller passed, so switching a legend on silently shrinks the
+ * plot — and its default text colour is not theme-aware, which is the exact
+ * bug this package already has one instance of. Outside the SVG, the legend
+ * costs the chart no plot height and inherits nothing from recharts.
+ */
+export function ChartLegend({ entries, theme, className, }) {
+    if (entries.length === 0)
+        return null;
+    return (_jsx("div", { className: className, style: {
+            display: 'flex',
+            flexWrap: 'wrap',
+            alignItems: 'center',
+            gap: '4px 16px',
+            marginTop: 10,
+            fontSize: 12,
+            color: theme.muted,
+        }, children: entries.map((entry) => (_jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', gap: 6 }, children: [_jsx("span", { style: {
+                        display: 'inline-block',
+                        width: 9,
+                        height: 9,
+                        borderRadius: '50%',
+                        background: entry.color,
+                        flexShrink: 0,
+                    } }), entry.label] }, entry.label))) }));
+}

package/dist/charts/line_chart.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { ChartTheme } from './chart_controls.js';
 import type { ChartDataSeries } from '../types/index.js';
 export interface LineChartProps {
     data: ChartDataSeries;
@@ -8,7 +9,28 @@ export interface LineChartProps {
     height?: number;
     unit?: string;
     showTooltip?: boolean;
+    /**
+     * Series name. Shown in the legend, and as the tooltip's heading when
+     * there is no meaningful x label. Omit and the chart stays anonymous —
+     * usually right, since a single-line chart is normally already titled by
+     * its host card.
+     */
+    label?: string;
+    /**
+     * Show the swatch legend under the plot. Defaults to true when `label` is
+     * set. The legend is HTML below the SVG, so it never eats plot height.
+     */
+    showLegend?: boolean;
+    /**
+     * Axis / grid / tooltip colours. **Pass this on any non-light host.**
+     * Until v0.6.0 this component took no theme at all and rendered recharts'
+     * stock light-mode axes and gridlines whatever the surrounding app looked
+     * like — near-white hairlines on a dark card. Unset fields fall back to
+     * `DEFAULT_CHART_THEME`, the same warm-light default `TimeSeriesChart`
+     * uses, so the old appearance is still what you get if you pass nothing.
+     */
+    theme?: Partial<ChartTheme>;
     className?: string;
 }
-export declare function LineChart({ data, dates, color, width, height, unit, showTooltip, className, }: LineChartProps): React.ReactElement;
+export declare function LineChart({ data, dates, color, width, height, unit, showTooltip, label, showLegend, theme, className, }: LineChartProps): React.ReactElement;
 //# sourceMappingURL=line_chart.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"line_chart.d.ts","sourceRoot":"","sources":["../../src/charts/line_chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzD,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,eAAe,CAAC;IACtB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,KAAK,EACL,KAAK,EACL,MAAM,EACN,IAAS,EACT,WAAkB,EAClB,SAAS,GACV,EAAE,cAAc,GAAG,KAAK,CAAC,YAAY,CA2DrC"}
+{"version":3,"file":"line_chart.d.ts","sourceRoot":"","sources":["../../src/charts/line_chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAOtD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzD,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,eAAe,CAAC;IACtB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAKD,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,KAAK,EACL,KAAK,EACL,MAAM,EACN,IAAS,EACT,WAAkB,EAClB,KAAK,EACL,UAAU,EACV,KAAK,EACL,SAAS,GACV,EAAE,cAAc,GAAG,KAAK,CAAC,YAAY,CA6GrC"}

package/dist/charts/line_chart.js

@@ -1,26 +1,29 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { LineChart as RechartsLineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, } from 'recharts';
-export function LineChart({ data, dates, color, width, height, unit = '', showTooltip = true, className, }) {
+import { ChartLegend, ChartTooltip, resolveChartTheme, } from './chart_common.js';
+/** See `TimeSeriesChart`'s copy — same reasoning, same numbers. */
+const CHART_MARGIN = { top: 8, right: 8, bottom: 0, left: -4 };
+export function LineChart({ data, dates, color, width, height, unit = '', showTooltip = true, label, showLegend, theme, className, }) {
+    const t = resolveChartTheme(theme);
+    const chartHeight = height ?? 130;
     // Empty data guard — render a placeholder, never throw
     if (!data || data.length === 0) {
         return (_jsx("div", { className: className, style: {
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-                height: height ?? 130,
-                color: '#9ca3af',
+                height: chartHeight,
+                color: t.muted,
                 fontSize: 14,
             }, children: "No data" }));
     }
     const chartData = dates.map((d, i) => ({ x: d, value: data[i] ?? null }));
-    const chartHeight = height ?? 130;
-    const tooltipFormatter = unit
-        ? (v) => [`${v}${unit}`, '']
-        : undefined;
-    const inner = (_jsxs(RechartsLineChart, { data: chartData, width: width !== undefined ? width : undefined, height: width !== undefined ? chartHeight : undefined, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3" }), _jsx(XAxis, { dataKey: "x" }), _jsx(YAxis, { tickFormatter: (v) => unit ? `${v}${unit}` : String(v) }), showTooltip && _jsx(Tooltip, { formatter: tooltipFormatter }), _jsx(Line, { type: "monotone", dataKey: "value", stroke: color, dot: false, connectNulls: false, isAnimationActive: false })] }));
+    const legendVisible = showLegend ?? label != null;
+    const inner = (_jsxs(RechartsLineChart, { data: chartData, margin: CHART_MARGIN, width: width !== undefined ? width : undefined, height: width !== undefined ? chartHeight : undefined, children: [_jsx(CartesianGrid, { vertical: false, strokeDasharray: "2 6", stroke: t.hairline, strokeOpacity: 0.9 }), _jsx(XAxis, { dataKey: "x", tick: { fontSize: 11, fill: t.muted }, axisLine: false, tickLine: false, tickMargin: 10, minTickGap: 28 }), _jsx(YAxis, { tick: { fontSize: 11, fill: t.muted }, axisLine: false, tickLine: false, tickMargin: 8, width: 40, tickFormatter: (v) => (unit ? `${v}${unit}` : String(v)) }), showTooltip && (_jsx(Tooltip, { isAnimationActive: false, cursor: { stroke: t.muted, strokeWidth: 1, strokeDasharray: '3 3' }, content: (tooltipProps) => (_jsx(ChartTooltip, { active: tooltipProps.active, label: String(tooltipProps.label ?? ''), payload: tooltipProps.payload, unit: unit, theme: t })) })), _jsx(Line, { type: "monotone", dataKey: "value", name: label, stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", dot: false, activeDot: { r: 4, strokeWidth: 2, stroke: t.tooltipSurface ?? t.surface }, connectNulls: false, isAnimationActive: false })] }));
+    const legendEl = legendVisible && label != null ? (_jsx(ChartLegend, { entries: [{ label, color }], theme: t })) : null;
     if (width !== undefined) {
-        return (_jsx("div", { style: { width, height: chartHeight, overflow: 'hidden' }, className: className, children: inner }));
+        return (_jsxs("div", { className: className, children: [_jsx("div", { style: { width, height: chartHeight, overflow: 'hidden' }, children: inner }), legendEl] }));
     }
-    return (_jsx("div", { className: className, children: _jsx(ResponsiveContainer, { width: "100%", height: chartHeight, children: inner }) }));
+    return (_jsxs("div", { className: className, children: [_jsx(ResponsiveContainer, { width: "100%", height: chartHeight, children: inner }), legendEl] }));
 }

package/dist/charts/time_series_chart.d.ts

@@ -31,6 +31,17 @@ export interface TimeSeriesChartProps {
     showControls?: boolean;
     /** grains to offer in the (uncontrolled) controls; passthrough to ChartControls */
     grains?: TimeGrain[];
+    /**
+     * Show the swatch legend under the plot. Defaults to true whenever more
+     * than one series carries a `label` — with a single unlabelled series
+     * there is nothing to disambiguate, and the chart title already says what
+     * the line is. Pass `false` to suppress it, or `true` to force one on a
+     * single labelled series.
+     *
+     * The legend renders as HTML below the SVG, so switching it on never eats
+     * into the `height` you asked for.
+     */
+    showLegend?: boolean;
     className?: string;
 }
 export declare function TimeSeriesChart(props: TimeSeriesChartProps): React.ReactElement;

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

@@ -1 +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;AA0ED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,KAAK,CAAC,YAAY,CAkN/E"}
+{"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;AAQjE,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;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAYD,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,KAAK,CAAC,YAAY,CAiQ/E"}

package/dist/charts/time_series_chart.js

@@ -4,39 +4,17 @@ 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',
-    tooltipSurface: '#fffdf9',
-};
-function CustomTooltip({ active, label, payload, unit, theme }) {
-    if (!active || !payload || payload.length === 0)
-        return null;
-    return (_jsxs("div", { style: {
-            // Tooltip must be opaque to be readable; `surface` is often transparent.
-            background: theme.tooltipSurface ?? (theme.surface === 'transparent' ? '#171717' : 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,
-                        } }), payload.length > 1 && entry.name ? (_jsx("span", { style: { color: theme.muted }, children: `${entry.name}: ` })) : null, _jsx("span", { children: entry.value != null ? `${entry.value}${unit ?? ''}` : '—' })] }, i)))] }));
-}
+import { ChartLegend, ChartTooltip, resolveChartTheme, } from './chart_common.js';
 // ── TimeSeriesChart ────────────────────────────────────────────────────────────
+/**
+ * Breathing room round the plot. `top: 8` stops a peak's stroke being clipped
+ * by the container edge; `right: 8` does the same for the last point's active
+ * dot; `left: -4` claws back the gap recharts leaves beside a `width: 40`
+ * Y axis whose labels are short.
+ */
+const CHART_MARGIN = { top: 8, right: 8, bottom: 0, left: -4 };
 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;
+    const { dates, series, data, color, label, agg, height = 220, unit, theme, referenceDate, grain: grainProp, chartType: chartTypeProp, onGrainChange, onChartTypeChange, grains, showLegend, className, } = props;
     // ── Controlled vs uncontrolled ────────────────────────────────────────────
     const isControlled = grainProp !== undefined && chartTypeProp !== undefined;
     const [grainState, setGrainState] = React.useState(grainProp ?? 'day');
@@ -58,7 +36,7 @@ export function TimeSeriesChart(props) {
     const [mounted, setMounted] = React.useState(false);
     React.useEffect(() => { setMounted(true); }, []);
     // ── Resolve merged theme ──────────────────────────────────────────────────
-    const t = { ...DEFAULT_THEME, ...theme };
+    const t = resolveChartTheme(theme);
     // ── Normalize series ──────────────────────────────────────────────────────
     let resolvedSeries;
     if (series && series.length > 0) {
@@ -104,22 +82,50 @@ export function TimeSeriesChart(props) {
         activeGrain === 'day' &&
         bucketDates.includes(referenceDate);
     // ── Shared axis / grid props ──────────────────────────────────────────────
+    //
+    // No `axisLine`: with a horizontal-only grid the bottom gridline already
+    // reads as the baseline, and drawing both puts two near-identical rules on
+    // top of each other.
     const xAxisProps = {
         dataKey: 'x',
         tick: { fontSize: 11, fill: t.muted },
-        axisLine: { stroke: t.hairline },
+        axisLine: false,
         tickLine: false,
+        tickMargin: 10,
         minTickGap: 28,
     };
     const yAxisProps = {
         tick: { fontSize: 11, fill: t.muted },
-        axisLine: { stroke: t.hairline },
+        axisLine: false,
         tickLine: false,
+        tickMargin: 8,
         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 })) }));
+    // Vertical gridlines carry no information a time axis doesn't already
+    // give, and a full cross-hatch is the single biggest thing that dates a
+    // chart. Horizontal only, hairline, widely dashed.
+    const gridEl = (_jsx(CartesianGrid, { vertical: false, strokeDasharray: "2 6", stroke: t.hairline, strokeOpacity: 0.9 }));
+    const tooltipEl = (_jsx(Tooltip, { isAnimationActive: false, 
+        // recharts' stock cursor is an opaque light-grey band, which on a dark
+        // theme is a bright slab across the plot. Line charts get a hairline;
+        // bar charts get a faint wash of the theme's own `active`.
+        cursor: activeType === 'bar'
+            ? { fill: t.active, fillOpacity: 0.45 }
+            : { stroke: t.muted, strokeWidth: 1, strokeDasharray: '3 3' }, content: (tooltipProps) => (_jsx(ChartTooltip, { active: tooltipProps.active, label: String(tooltipProps.label ?? ''), payload: tooltipProps.payload, unit: unit, theme: t })) }));
+    // ── Legend ────────────────────────────────────────────────────────────────
+    const legendEntries = seriesMeta
+        .filter((s) => s.label !== '')
+        .map((s) => ({ label: s.label, color: s.color }));
+    const legendVisible = showLegend ?? (legendEntries.length > 1 && legendEntries.length === seriesMeta.length);
     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 })] }));
+    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, margin: CHART_MARGIN, barGap: 2, children: [gridEl, _jsx(XAxis, { ...xAxisProps }), _jsx(YAxis, { ...yAxisProps }), tooltipEl, referenceEl, seriesMeta.map((s) => (_jsx(Bar, { dataKey: s.key, name: s.label, fill: s.color, radius: [3, 3, 0, 0], maxBarSize: 28, isAnimationActive: false }, s.key)))] }) })) : mounted ? (_jsx(ResponsiveContainer, { width: "100%", height: height, children: _jsxs(RLineChart, { data: chartRows, margin: CHART_MARGIN, children: [gridEl, _jsx(XAxis, { ...xAxisProps }), _jsx(YAxis, { ...yAxisProps }), tooltipEl, referenceEl, seriesMeta.map((s) => (_jsx(Line, { type: "monotone", dataKey: s.key, name: s.label, stroke: s.color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", dot: false, 
+                                // A hover dot ringed in the chart surface reads as a marker
+                                // sitting on the line rather than a blob merged into it.
+                                activeDot: {
+                                    r: 4,
+                                    strokeWidth: 2,
+                                    stroke: t.tooltipSurface ?? t.surface,
+                                }, connectNulls: false, isAnimationActive: false }, s.key)))] }) })) : null }), legendVisible ? _jsx(ChartLegend, { entries: legendEntries, theme: t }) : null] }));
 }

package/dist/index.client.d.ts

@@ -13,6 +13,8 @@ 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 { ChartLegend, ChartTooltip, DEFAULT_CHART_THEME, resolveChartTheme, } from './charts/chart_common.js';
+export type { ChartLegendEntry, ChartTooltipProps } from './charts/chart_common.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';

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,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;AAGrF,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,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;AAK3D,OAAO,EACL,WAAW,EACX,YAAY,EACZ,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,0BAA0B,CAAC;AAClC,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AACpF,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;AAGrF,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/index.client.js

@@ -11,6 +11,11 @@ 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';
+// Shared chart furniture — exported so a consumer building a chart out of
+// another library (or hazo_ui's dependency-free Sparkline/StackedBars) can
+// still put the same themed legend under it rather than hand-rolling a
+// second, slightly-different swatch row.
+export { ChartLegend, ChartTooltip, DEFAULT_CHART_THEME, resolveChartTheme, } from './charts/chart_common.js';
 export { aggregateSeries, bucketDate } from './lib/time_bucket.js';
 // Bespoke chart components (pure inline-SVG, no recharts dependency)
 export { RadialGauge } from './charts/radial_gauge.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hazo_dataviz",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "description": "Headless data visualization primitives for hazo apps",
   "type": "module",
   "module": "./dist/index.js",
@@ -46,9 +46,9 @@
   },
   "peerDependencies": {
     "hazo_api": "^2.6.0",
-    "hazo_connect": "^3.9.2",
-    "hazo_core": "^1.2.1",
-    "hazo_ui": "^6.1.0",
+    "hazo_connect": "^4.0.0",
+    "hazo_core": "^2.0.0",
+    "hazo_ui": "^6.8.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "recharts": "^2.15.4 || ^3.0.0"
@@ -66,7 +66,6 @@
   },
   "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",
@@ -79,6 +78,7 @@
     "postcss": "^8.4.49",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "recharts": "^2.15.4",
     "tailwindcss": "^4.2.4",
     "ts-jest": "^29.4.5",
     "typescript": "^5.7.2"