hazo_dataviz 0.4.2 → 0.5.0

package/CHANGE_LOG.md

@@ -1,5 +1,13 @@
 # hazo_dataviz — Change Log
 
+## 0.5.0 — 2026-07-21
+
+New pure inline-SVG chart primitive, extracted from a first consumer (stocktools' bespoke `ProgressRing`).
+
+- **`RadialGauge`** (`src/charts/radial_gauge.tsx`) — new donut/radial-gauge micro-viz component exported from `./client`; accepts `value` (0–100, clamped), optional `size` (default 72), `strokeWidth` (default 7), `color` (defaults to `pickColor(0)` from the package's own Studio palette), `trackColor` (default `#E5E7EB`), `label` (`ReactNode`, rendered centered — omitted entirely when not supplied), `className`, `style`. Pure inline SVG (two concentric `<circle>`s, `strokeDasharray`/`strokeDashoffset` arc math, no recharts dependency) — headless like `ChartControls`, styleable by the consumer via `color`/`trackColor`/`style`. Faithfully ports the stroke-dashoffset/clamp math from stocktools' bespoke `progress-ring.tsx`, which is being rewritten as a thin wrapper around this component (variant→color mapping only, zero visual change for its 2 existing consumers).
+- **Tests**: `src/charts/__tests__/radial_gauge.test.tsx` — value clamping (below 0 / above 100 / mid-range), exact stroke-dashoffset for known values, label rendering (string, `ReactNode`, omitted), color/trackColor overrides, size/strokeWidth defaults (15 cases, `@testing-library/react` — pure SVG renders cleanly under jsdom like `ChartControls`).
+- **Test-app**: new "RadialGauge — 0.5.0" demo section on the **Widgets** page (`test-app/app/widgets/page.tsx`) — five gauges showing 0%/38%/62%/100% with default vs. overridden colors, plus a larger custom size/stroke/trackColor/label example. Test-app's `hazo_dataviz` dep range bumped `^0.4.0` → `^0.5.0`.
+
 ## 0.4.2 — 2026-06-14
 
 - **Fix (`TimeSeriesChart` tooltip readability)**: on dark/transparent themes the hover tooltip used `theme.surface` as its background, which is typically `'transparent'` so the bars showed through and the text washed out. Added an optional `ChartTheme.tooltipSurface` (opaque tooltip background, falls back to `surface`, and defaults to a solid dark `#171717` when `surface` is `'transparent'`). Consumers can set `tooltipSurface` to match their card; the chart area itself stays transparent.

package/dist/charts/radial_gauge.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+export interface RadialGaugeProps {
+    /** 0–100; values outside that range are clamped. */
+    value: number;
+    size?: number;
+    strokeWidth?: number;
+    /** Arc (progress) stroke color. Defaults to the package's own palette[0]. */
+    color?: string;
+    /** Track (background) stroke color. */
+    trackColor?: string;
+    /** Content rendered in the center of the ring, e.g. "62%". */
+    label?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function RadialGauge({ value, size, strokeWidth, color, trackColor, label, className, style, }: RadialGaugeProps): React.ReactElement;
+//# sourceMappingURL=radial_gauge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radial_gauge.d.ts","sourceRoot":"","sources":["../../src/charts/radial_gauge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,gBAAgB;IAC/B,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAID,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,IAAS,EACT,WAAe,EACf,KAAK,EACL,UAAgC,EAChC,KAAK,EACL,SAAS,EACT,KAAK,GACN,EAAE,gBAAgB,GAAG,KAAK,CAAC,YAAY,CA2DvC"}

package/dist/charts/radial_gauge.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { pickColor } from '../visualizers/palette.js';
+const DEFAULT_TRACK_COLOR = '#E5E7EB';
+export function RadialGauge({ value, size = 72, strokeWidth = 7, color, trackColor = DEFAULT_TRACK_COLOR, label, className, style, }) {
+    const pct = Math.min(100, Math.max(0, value));
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const offset = circumference * (1 - pct / 100);
+    const arcColor = color ?? pickColor(0);
+    return (_jsxs("div", { className: className, style: {
+            position: 'relative',
+            flexShrink: 0,
+            width: size,
+            height: size,
+            ...style,
+        }, children: [_jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, style: { transform: 'rotate(-90deg)' }, children: [_jsx("circle", { cx: size / 2, cy: size / 2, r: radius, fill: "none", stroke: trackColor, strokeWidth: strokeWidth }), _jsx("circle", { cx: size / 2, cy: size / 2, r: radius, fill: "none", stroke: arcColor, strokeWidth: strokeWidth, strokeLinecap: "round", strokeDasharray: circumference, strokeDashoffset: offset })] }), label != null && (_jsx("div", { style: {
+                    position: 'absolute',
+                    inset: 0,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }, children: label }))] }));
+}

package/dist/index.client.d.ts

@@ -19,4 +19,6 @@ 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';
+export { RadialGauge } from './charts/radial_gauge.js';
+export type { RadialGaugeProps } from './charts/radial_gauge.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,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"}
+{"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"}

package/dist/index.client.js

@@ -12,3 +12,5 @@ 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';
+// 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.4.2",
+  "version": "0.5.0",
   "description": "Headless data visualization primitives for hazo apps",
   "type": "module",
   "module": "./dist/index.js",
@@ -45,10 +45,10 @@
     "zod": "^4.1.12"
   },
   "peerDependencies": {
-    "hazo_api": "^2.4.0",
-    "hazo_connect": "^3.7.0",
-    "hazo_core": "^1.0.0",
-    "hazo_ui": "^4.0.0",
+    "hazo_api": "^2.6.0",
+    "hazo_connect": "^3.9.2",
+    "hazo_core": "^1.2.1",
+    "hazo_ui": "^6.1.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "recharts": "^2.15.4 || ^3.0.0"