@bonnard/react 0.2.1 → 0.3.1

package/dist/dashboard.js

@@ -1,4 +1,4 @@
-import { a as BarChart, i as LineChart, n as PieChart, o as BigValue, r as AreaChart, t as DataTable, u as useBonnard } from "./data-table-C3K4rPh2.js";
+import { a as BarChart, i as LineChart, n as PieChart, o as BigValue, r as AreaChart, t as DataTable, u as useBonnard } from "./data-table-Db3BSi5Z.js";
 import { useCallback, useEffect, useRef, useState } from "react";
 import DOMPurify from "isomorphic-dompurify";
 import matter from "gray-matter";
@@ -807,8 +807,8 @@ function SectionRenderer({ section, queryStates }) {
 	return /* @__PURE__ */ jsx("div", {
 		style: {
 			borderRadius: "var(--bon-radius, 8px)",
-			border: "1px solid var(--bon-border, rgba(128,128,128,0.2))",
-			backgroundColor: "var(--bon-card-bg, transparent)",
+			border: "1px solid var(--bon-border)",
+			backgroundColor: "var(--bon-bg-card)",
 			padding: 16
 		},
 		children: inner

package/dist/{data-table-C3K4rPh2.js → data-table-Db3BSi5Z.js}

@@ -262,10 +262,14 @@ function formatAxisLabel(val) {
 	}
 	return val;
 }
-/** ECharts y-axis formatter — compact numbers */
-function axisValueFormatter(val) {
+/** ECharts y-axis formatter — uses explicit format or compact fallback */
+function axisValueFormatter(val, yFmt) {
+	if (yFmt) return applyFormat(val, yFmt);
 	if (Math.abs(val) >= 1e6) return `${(val / 1e6).toFixed(1)}M`;
-	if (Math.abs(val) >= 1e3) return `${(val / 1e3).toFixed(0)}K`;
+	if (Math.abs(val) >= 1e3) {
+		const k = val / 1e3;
+		return k % 1 === 0 ? `${k}K` : `${k.toFixed(1)}K`;
+	}
 	return String(val);
 }
 /** Convert snake_case or camelCase field names to Title Case */
@@ -316,6 +320,21 @@ function BigValue({ data, value, title, fmt }) {
 //#endregion
 //#region src/lib/build-series.ts
 /**
+* Pure data transformation: splits flat query results into multi-series datasets.
+*
+* Four cases:
+* | y columns | series prop | Result                        |
+* |-----------|-------------|-------------------------------|
+* | Single    | None        | 1 dataset (current behavior)  |
+* | Single    | Set         | N datasets (per series value)  |
+* | Multiple  | None        | N datasets (per y column)      |
+* | Multiple  | Set         | N*M datasets                   |
+*/
+/** Strip view/cube prefix and convert snake_case to Title Case for legend labels */
+function humanizeField(name) {
+	return (name.includes(".") ? name.slice(name.indexOf(".") + 1) : name).replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+/**
 * Build multi-series datasets from flat query data.
 *
 * @param data  - Flat array of row objects from query
@@ -338,7 +357,7 @@ function buildSeries(data, x, y, series) {
 	if (!series) return {
 		labels: data.map((row) => String(row[x] ?? "")),
 		datasets: yColumns.map((col) => ({
-			name: col,
+			name: humanizeField(col),
 			values: data.map((row) => {
 				const val = row[col];
 				return val == null ? null : Number(val);
@@ -368,7 +387,7 @@ function buildSeries(data, x, y, series) {
 	}
 	const datasets = [];
 	for (const sk of seriesKeys) for (const col of yColumns) {
-		const name = yColumns.length === 1 ? sk : `${sk} - ${col}`;
+		const name = yColumns.length === 1 ? sk : `${sk} - ${humanizeField(col)}`;
 		const values = xValues.map((xRaw) => {
 			const row = lookup.get(`${xRaw}\0${sk}`);
 			if (!row) return null;
@@ -486,7 +505,7 @@ function BarChart({ data, x, y, title, horizontal, series, type, yFmt }) {
 		axisLabel: {
 			color: theme.text.label,
 			fontSize: 12,
-			formatter: axisValueFormatter
+			formatter: (v) => axisValueFormatter(v, yFmt)
 		},
 		splitLine: { lineStyle: { color: theme.gridLine } }
 	};
@@ -577,7 +596,7 @@ function LineChart({ data, x, y, title, series, type, yFmt }) {
 			axisLabel: {
 				color: theme.text.label,
 				fontSize: 12,
-				formatter: axisValueFormatter
+				formatter: (v) => axisValueFormatter(v, yFmt)
 			},
 			splitLine: { lineStyle: { color: theme.gridLine } }
 		},
@@ -651,7 +670,7 @@ function AreaChart({ data, x, y, title, series, type, yFmt }) {
 			axisLabel: {
 				color: theme.text.label,
 				fontSize: 12,
-				formatter: axisValueFormatter
+				formatter: (v) => axisValueFormatter(v, yFmt)
 			},
 			splitLine: { lineStyle: { color: theme.gridLine } }
 		},

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as BarChart, c as PALETTES, i as LineChart, l as BonnardContext, n as PieChart, o as BigValue, r as AreaChart, s as CHART_COLORS, t as DataTable, u as useBonnard } from "./data-table-C3K4rPh2.js";
+import { a as BarChart, c as PALETTES, i as LineChart, l as BonnardContext, n as PieChart, o as BigValue, r as AreaChart, s as CHART_COLORS, t as DataTable, u as useBonnard } from "./data-table-Db3BSi5Z.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { createClient } from "@bonnard/sdk";

package/dist/lib/build-series.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"build-series.d.ts","sourceRoot":"","sources":["../../src/lib/build-series.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,MAAM,WAAW,aAAa;IAC5B,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,iEAAiE;IACjE,MAAM,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,iBAAiB;IAChC,4BAA4B;IAC5B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,6BAA6B;IAC7B,QAAQ,EAAE,aAAa,EAAE,CAAC;CAC3B;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CACzB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC/B,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,MAAM,CAAC,EAAE,MAAM,GACd,iBAAiB,CA+EnB"}
+{"version":3,"file":"build-series.d.ts","sourceRoot":"","sources":["../../src/lib/build-series.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAUH,MAAM,WAAW,aAAa;IAC5B,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,iEAAiE;IACjE,MAAM,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,iBAAiB;IAChC,4BAA4B;IAC5B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,6BAA6B;IAC7B,QAAQ,EAAE,aAAa,EAAE,CAAC;CAC3B;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CACzB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC/B,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,MAAM,CAAC,EAAE,MAAM,GACd,iBAAiB,CA+EnB"}

package/dist/theme/chart-theme.d.ts

@@ -69,8 +69,8 @@ export declare function formatValue(val: unknown): string;
 export declare function tooltipFormatter(yFmt?: string): ((val: number) => string);
 /** Format axis label — detects ISO dates and formats them nicely */
 export declare function formatAxisLabel(val: string): string;
-/** ECharts y-axis formatter — compact numbers */
-export declare function axisValueFormatter(val: number): string;
+/** ECharts y-axis formatter — uses explicit format or compact fallback */
+export declare function axisValueFormatter(val: number, yFmt?: string): string;
 /** Convert snake_case or camelCase field names to Title Case */
 export declare function formatColumnHeader(col: string): string;
 //# sourceMappingURL=chart-theme.d.ts.map

package/dist/theme/chart-theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-theme.d.ts","sourceRoot":"","sources":["../../src/theme/chart-theme.ts"],"names":[],"mappings":"AAKA,sCAAsC;AACtC,eAAO,MAAM,QAAQ;;;;;CAuBX,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,QAAQ,CAAC;AAGhD,eAAO,MAAM,YAAY,EAAE,SAAS,MAAM,EAAqB,CAAC;AAEhE,8BAA8B;AAC9B,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACtD,OAAO,EAAE;QACP,eAAe,EAAE,MAAM,CAAC;QACxB,WAAW,EAAE,MAAM,CAAC;QACpB,SAAS,EAAE,MAAM,CAAC;QAClB,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;CACpB;AA0BD,wBAAgB,aAAa,CAAC,MAAM,EAAE,OAAO,GAAG,gBAAgB,CAE/D;AAED,iDAAiD;AACjD,wBAAgB,YAAY,CAAC,KAAK,EAAE,gBAAgB;;;;;;;;;;oBAQhC,MAAM,EAAE,WAAW,OAAO,QAAQ,WAAW,SAAS,OAAO,QAAQ;QAAE,WAAW,EAAE,MAAM,EAAE,CAAC;QAAC,QAAQ,EAAE,MAAM,EAAE,CAAA;KAAE;EAWrI;AAED,gDAAgD;AAChD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB;;;;;;;;;;;;;;EAWlD;AAED,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,0EAA0E;AAC1E,wBAAgB,UAAU,CAAC,SAAS,EAAE,MAAM,EAAE,GAAG,OAAO,CAQvD;AAED,kEAAkE;AAClE,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM,CAGtD;AAED,4CAA4C;AAC5C,wBAAgB,UAAU,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAEnD;AAED,sEAAsE;AACtE,wBAAgB,WAAW,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM,CAQhD;AAED,gFAAgF;AAChF,wBAAgB,gBAAgB,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC,CAKzE;AAED,oEAAoE;AACpE,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAgBnD;AAED,iDAAiD;AACjD,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAItD;AAED,gEAAgE;AAChE,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAKtD"}
+{"version":3,"file":"chart-theme.d.ts","sourceRoot":"","sources":["../../src/theme/chart-theme.ts"],"names":[],"mappings":"AAKA,sCAAsC;AACtC,eAAO,MAAM,QAAQ;;;;;CAuBX,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,QAAQ,CAAC;AAGhD,eAAO,MAAM,YAAY,EAAE,SAAS,MAAM,EAAqB,CAAC;AAEhE,8BAA8B;AAC9B,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACtD,OAAO,EAAE;QACP,eAAe,EAAE,MAAM,CAAC;QACxB,WAAW,EAAE,MAAM,CAAC;QACpB,SAAS,EAAE,MAAM,CAAC;QAClB,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;CACpB;AA0BD,wBAAgB,aAAa,CAAC,MAAM,EAAE,OAAO,GAAG,gBAAgB,CAE/D;AAED,iDAAiD;AACjD,wBAAgB,YAAY,CAAC,KAAK,EAAE,gBAAgB;;;;;;;;;;oBAQhC,MAAM,EAAE,WAAW,OAAO,QAAQ,WAAW,SAAS,OAAO,QAAQ;QAAE,WAAW,EAAE,MAAM,EAAE,CAAC;QAAC,QAAQ,EAAE,MAAM,EAAE,CAAA;KAAE;EAWrI;AAED,gDAAgD;AAChD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB;;;;;;;;;;;;;;EAWlD;AAED,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,0EAA0E;AAC1E,wBAAgB,UAAU,CAAC,SAAS,EAAE,MAAM,EAAE,GAAG,OAAO,CAQvD;AAED,kEAAkE;AAClE,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM,CAGtD;AAED,4CAA4C;AAC5C,wBAAgB,UAAU,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAEnD;AAED,sEAAsE;AACtE,wBAAgB,WAAW,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM,CAQhD;AAED,gFAAgF;AAChF,wBAAgB,gBAAgB,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC,CAKzE;AAED,oEAAoE;AACpE,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAgBnD;AAED,0EAA0E;AAC1E,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CASrE;AAED,gEAAgE;AAChE,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAKtD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonnard/react",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "description": "Bonnard embedded analytics — React charts, dashboards, and hooks",
   "repository": {
     "type": "git",