@burdenoff/microfe-bigconsole 2026.613.3 → 2026.613.4

package/dist/bigconsole/components/widgets/chart/charts/LineChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.js","names":[],"sources":["../../../../../../src/bigconsole/components/widgets/chart/charts/LineChart.tsx"],"sourcesContent":["/**\n * LineChart Component\n *\n * Line chart using Recharts.\n */\n\nimport { type FC, memo, useMemo } from 'react';\nimport {\n  LineChart as RechartsLineChart,\n  Line,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  ResponsiveContainer,\n  Legend,\n} from 'recharts';\nimport { ChartTooltip } from '../ChartTooltip';\nimport type { ChartConfig, ChartData } from './types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface LineChartProps {\n  /** Chart data */\n  data: ChartData[];\n  /** Chart configuration */\n  config: ChartConfig;\n  /** Series to hide */\n  hiddenSeries?: string[];\n  /** Click handler for data points */\n  onDataClick?: (data: ChartData, index: number) => void;\n}\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst DEFAULT_COLORS = [\n  'var(--color-chart-1)',\n  'var(--color-chart-2)',\n  'var(--color-chart-3)',\n  'var(--color-chart-4)',\n  'var(--color-chart-5)',\n];\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const LineChart: FC<LineChartProps> = memo(function LineChart({\n  data = [],\n  config,\n  hiddenSeries = [],\n  onDataClick,\n}) {\n  // Extract data keys (series)\n  const dataKeys = useMemo(() => {\n    if (!data?.length) return [];\n    const keys = Object.keys(data[0]).filter((key) => key !== config.xAxisKey && typeof data[0][key] === 'number');\n    return keys;\n  }, [data, config.xAxisKey]);\n\n  // Format value\n  const formatValue = (value: number | string): string => {\n    if (typeof value !== 'number') return String(value);\n    return new Intl.NumberFormat('en-US', {\n      notation: value >= 10000 ? 'compact' : 'standard',\n      maximumFractionDigits: 2,\n    }).format(value);\n  };\n\n  if (!data?.length) {\n    return null;\n  }\n\n  return (\n    <ResponsiveContainer width=\"100%\" height=\"100%\">\n      <RechartsLineChart\n        data={data}\n        margin={{ top: 10, right: 10, left: 0, bottom: 0 }}\n        onClick={(e) => {\n          if (e?.activePayload?.[0] && onDataClick) {\n            onDataClick(e.activePayload[0].payload, e.activeTooltipIndex || 0);\n          }\n        }}\n      >\n        {config.showGrid !== false && (\n          <CartesianGrid strokeDasharray=\"3 3\" stroke=\"var(--color-border-default)\" opacity={0.5} />\n        )}\n\n        <XAxis\n          dataKey={config.xAxisKey || 'name'}\n          tick={{ fill: 'var(--color-text-secondary)', fontSize: 12 }}\n          tickLine={{ stroke: 'var(--color-border-default)' }}\n          axisLine={{ stroke: 'var(--color-border-default)' }}\n          label={\n            config.xAxisLabel\n              ? {\n                  value: config.xAxisLabel,\n                  position: 'insideBottom',\n                  offset: -5,\n                  fill: 'var(--color-text-secondary)',\n                }\n              : undefined\n          }\n        />\n\n        <YAxis\n          tick={{ fill: 'var(--color-text-secondary)', fontSize: 12 }}\n          tickLine={{ stroke: 'var(--color-border-default)' }}\n          axisLine={{ stroke: 'var(--color-border-default)' }}\n          tickFormatter={formatValue}\n          label={\n            config.yAxisLabel\n              ? {\n                  value: config.yAxisLabel,\n                  angle: -90,\n                  position: 'insideLeft',\n                  fill: 'var(--color-text-secondary)',\n                }\n              : undefined\n          }\n        />\n\n        <Tooltip\n          content={<ChartTooltip valueFormatter={formatValue} />}\n          cursor={{ stroke: 'var(--color-border-default)' }}\n        />\n\n        {config.showLegend !== false && (\n          <Legend\n            wrapperStyle={{ paddingTop: 20 }}\n            formatter={(value) => <span style={{ color: 'var(--color-text-primary)' }}>{value}</span>}\n          />\n        )}\n\n        {dataKeys.map((key, index) => (\n          <Line\n            key={key}\n            type={config.curveType || 'monotone'}\n            dataKey={key}\n            name={config.seriesNames?.[key] || key}\n            stroke={config.colors?.[index] || DEFAULT_COLORS[index % DEFAULT_COLORS.length]}\n            strokeWidth={2}\n            dot={config.showDots !== false}\n            activeDot={{ r: 6 }}\n            hide={hiddenSeries.includes(key)}\n            connectNulls\n          />\n        ))}\n      </RechartsLineChart>\n    </ResponsiveContainer>\n  );\n});\n\nexport default LineChart;\n"],"mappings":";;;;;AAuCA,IAAM,IAAiB;CACrB;CACA;CACA;CACA;CACA;CACD,EAMY,IAAgC,EAAK,SAAmB,EACnE,UAAO,EAAE,EACT,WACA,kBAAe,EAAE,EACjB,kBACC;CAED,IAAM,IAAW,QACV,GAAM,SACE,OAAO,KAAK,EAAK,GAAG,CAAC,QAAQ,MAAQ,MAAQ,EAAO,YAAY,OAAO,EAAK,GAAG,MAAS,SAAS,GADpF,EAAE,EAG3B,CAAC,GAAM,EAAO,SAAS,CAAC,EAGrB,KAAe,MACf,OAAO,KAAU,WACd,IAAI,KAAK,aAAa,SAAS;EACpC,UAAU,KAAS,MAAQ,YAAY;EACvC,uBAAuB;EACxB,CAAC,CAAC,OAAO,EAAM,GAJsB,OAAO,EAAM;AAWrD,QAJK,GAAM,SAKT,kBAAC,GAAD;EAAqB,OAAM;EAAO,QAAO;YACvC,kBAAC,GAAD;GACQ;GACN,QAAQ;IAAE,KAAK;IAAI,OAAO;IAAI,MAAM;IAAG,QAAQ;IAAG;GAClD,UAAU,MAAM;AACd,IAAI,GAAG,gBAAgB,MAAM,KAC3B,EAAY,EAAE,cAAc,GAAG,SAAS,EAAE,sBAAsB,EAAE;;aALxE;IASG,EAAO,aAAa,MACnB,kBAAC,GAAD;KAAe,iBAAgB;KAAM,QAAO;KAA8B,SAAS;KAAO,CAAA;IAG5F,kBAAC,GAAD;KACE,SAAS,EAAO,YAAY;KAC5B,MAAM;MAAE,MAAM;MAA+B,UAAU;MAAI;KAC3D,UAAU,EAAE,QAAQ,+BAA+B;KACnD,UAAU,EAAE,QAAQ,+BAA+B;KACnD,OACE,EAAO,aACH;MACE,OAAO,EAAO;MACd,UAAU;MACV,QAAQ;MACR,MAAM;MACP,GACD,KAAA;KAEN,CAAA;IAEF,kBAAC,GAAD;KACE,MAAM;MAAE,MAAM;MAA+B,UAAU;MAAI;KAC3D,UAAU,EAAE,QAAQ,+BAA+B;KACnD,UAAU,EAAE,QAAQ,+BAA+B;KACnD,eAAe;KACf,OACE,EAAO,aACH;MACE,OAAO,EAAO;MACd,OAAO;MACP,UAAU;MACV,MAAM;MACP,GACD,KAAA;KAEN,CAAA;IAEF,kBAAC,GAAD;KACE,SAAS,kBAAC,GAAD,EAAc,gBAAgB,GAAe,CAAA;KACtD,QAAQ,EAAE,QAAQ,+BAA+B;KACjD,CAAA;IAED,EAAO,eAAe,MACrB,kBAAC,GAAD;KACE,cAAc,EAAE,YAAY,IAAI;KAChC,YAAY,MAAU,kBAAC,QAAD;MAAM,OAAO,EAAE,OAAO,6BAA6B;gBAAG;MAAa,CAAA;KACzF,CAAA;IAGH,EAAS,KAAK,GAAK,MAClB,kBAAC,GAAD;KAEE,MAAM,EAAO,aAAa;KAC1B,SAAS;KACT,MAAM,EAAO,cAAc,MAAQ;KACnC,QAAQ,EAAO,SAAS,MAAU,EAAe,IAAQ,EAAe;KACxE,aAAa;KACb,KAAK,EAAO,aAAa;KACzB,WAAW,EAAE,GAAG,GAAG;KACnB,MAAM,EAAa,SAAS,EAAI;KAChC,cAAA;KACA,EAVK,EAUL,CACF;IACgB;;EACA,CAAA,GA/Ef;EAiFT"}
+{"version":3,"file":"LineChart.js","names":[],"sources":["../../../../../../src/bigconsole/components/widgets/chart/charts/LineChart.tsx"],"sourcesContent":["/**\n * LineChart Component\n *\n * Line chart using Recharts.\n */\n\nimport { type FC, memo, useMemo } from 'react';\nimport {\n  LineChart as RechartsLineChart,\n  Line,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  ResponsiveContainer,\n  Legend,\n} from 'recharts';\nimport { ChartTooltip } from '../ChartTooltip';\nimport type { ChartConfig, ChartData } from './types';\nimport { buildReferenceElements } from './referenceElements';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface LineChartProps {\n  /** Chart data */\n  data: ChartData[];\n  /** Chart configuration */\n  config: ChartConfig;\n  /** Series to hide */\n  hiddenSeries?: string[];\n  /** Click handler for data points */\n  onDataClick?: (data: ChartData, index: number) => void;\n}\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst DEFAULT_COLORS = [\n  'var(--color-chart-1)',\n  'var(--color-chart-2)',\n  'var(--color-chart-3)',\n  'var(--color-chart-4)',\n  'var(--color-chart-5)',\n];\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const LineChart: FC<LineChartProps> = memo(function LineChart({\n  data = [],\n  config,\n  hiddenSeries = [],\n  onDataClick,\n}) {\n  // Extract data keys (series)\n  const dataKeys = useMemo(() => {\n    if (!data?.length) return [];\n    const keys = Object.keys(data[0]).filter((key) => key !== config.xAxisKey && typeof data[0][key] === 'number');\n    return keys;\n  }, [data, config.xAxisKey]);\n\n  // Format value\n  const formatValue = (value: number | string): string => {\n    if (typeof value !== 'number') return String(value);\n    return new Intl.NumberFormat('en-US', {\n      notation: value >= 10000 ? 'compact' : 'standard',\n      maximumFractionDigits: 2,\n    }).format(value);\n  };\n\n  if (!data?.length) {\n    return null;\n  }\n\n  return (\n    <ResponsiveContainer width=\"100%\" height=\"100%\">\n      <RechartsLineChart\n        data={data}\n        margin={{ top: 10, right: 10, left: 0, bottom: 0 }}\n        onClick={(e) => {\n          if (e?.activePayload?.[0] && onDataClick) {\n            onDataClick(e.activePayload[0].payload, e.activeTooltipIndex || 0);\n          }\n        }}\n      >\n        {config.showGrid !== false && (\n          <CartesianGrid strokeDasharray=\"3 3\" stroke=\"var(--color-border-default)\" opacity={0.5} />\n        )}\n\n        <XAxis\n          dataKey={config.xAxisKey || 'name'}\n          tick={{ fill: 'var(--color-text-secondary)', fontSize: 12 }}\n          tickLine={{ stroke: 'var(--color-border-default)' }}\n          axisLine={{ stroke: 'var(--color-border-default)' }}\n          label={\n            config.xAxisLabel\n              ? {\n                  value: config.xAxisLabel,\n                  position: 'insideBottom',\n                  offset: -5,\n                  fill: 'var(--color-text-secondary)',\n                }\n              : undefined\n          }\n        />\n\n        <YAxis\n          tick={{ fill: 'var(--color-text-secondary)', fontSize: 12 }}\n          tickLine={{ stroke: 'var(--color-border-default)' }}\n          axisLine={{ stroke: 'var(--color-border-default)' }}\n          tickFormatter={formatValue}\n          scale={config.logScale ? 'log' : 'auto'}\n          domain={config.logScale ? ['auto', 'auto'] : undefined}\n          allowDataOverflow={config.logScale || undefined}\n          label={\n            config.yAxisLabel\n              ? {\n                  value: config.yAxisLabel,\n                  angle: -90,\n                  position: 'insideLeft',\n                  fill: 'var(--color-text-secondary)',\n                }\n              : undefined\n          }\n        />\n\n        <Tooltip\n          content={<ChartTooltip valueFormatter={formatValue} />}\n          cursor={{ stroke: 'var(--color-border-default)' }}\n        />\n\n        {config.showLegend !== false && (\n          <Legend\n            wrapperStyle={{ paddingTop: 20 }}\n            formatter={(value) => <span style={{ color: 'var(--color-text-primary)' }}>{value}</span>}\n          />\n        )}\n\n        {buildReferenceElements(config.referenceLines)}\n\n        {dataKeys.map((key, index) => (\n          <Line\n            key={key}\n            type={config.curveType || 'monotone'}\n            dataKey={key}\n            name={config.seriesNames?.[key] || key}\n            stroke={config.colors?.[index] || DEFAULT_COLORS[index % DEFAULT_COLORS.length]}\n            strokeWidth={2}\n            dot={config.showDots !== false}\n            activeDot={{ r: 6 }}\n            hide={hiddenSeries.includes(key)}\n            connectNulls\n          />\n        ))}\n      </RechartsLineChart>\n    </ResponsiveContainer>\n  );\n});\n\nexport default LineChart;\n"],"mappings":";;;;;;AAwCA,IAAM,IAAiB;CACrB;CACA;CACA;CACA;CACA;CACD,EAMY,IAAgC,EAAK,SAAmB,EACnE,UAAO,EAAE,EACT,WACA,kBAAe,EAAE,EACjB,kBACC;CAED,IAAM,IAAW,QACV,GAAM,SACE,OAAO,KAAK,EAAK,GAAG,CAAC,QAAQ,MAAQ,MAAQ,EAAO,YAAY,OAAO,EAAK,GAAG,MAAS,SAAS,GADpF,EAAE,EAG3B,CAAC,GAAM,EAAO,SAAS,CAAC,EAGrB,KAAe,MACf,OAAO,KAAU,WACd,IAAI,KAAK,aAAa,SAAS;EACpC,UAAU,KAAS,MAAQ,YAAY;EACvC,uBAAuB;EACxB,CAAC,CAAC,OAAO,EAAM,GAJsB,OAAO,EAAM;AAWrD,QAJK,GAAM,SAKT,kBAAC,GAAD;EAAqB,OAAM;EAAO,QAAO;YACvC,kBAAC,GAAD;GACQ;GACN,QAAQ;IAAE,KAAK;IAAI,OAAO;IAAI,MAAM;IAAG,QAAQ;IAAG;GAClD,UAAU,MAAM;AACd,IAAI,GAAG,gBAAgB,MAAM,KAC3B,EAAY,EAAE,cAAc,GAAG,SAAS,EAAE,sBAAsB,EAAE;;aALxE;IASG,EAAO,aAAa,MACnB,kBAAC,GAAD;KAAe,iBAAgB;KAAM,QAAO;KAA8B,SAAS;KAAO,CAAA;IAG5F,kBAAC,GAAD;KACE,SAAS,EAAO,YAAY;KAC5B,MAAM;MAAE,MAAM;MAA+B,UAAU;MAAI;KAC3D,UAAU,EAAE,QAAQ,+BAA+B;KACnD,UAAU,EAAE,QAAQ,+BAA+B;KACnD,OACE,EAAO,aACH;MACE,OAAO,EAAO;MACd,UAAU;MACV,QAAQ;MACR,MAAM;MACP,GACD,KAAA;KAEN,CAAA;IAEF,kBAAC,GAAD;KACE,MAAM;MAAE,MAAM;MAA+B,UAAU;MAAI;KAC3D,UAAU,EAAE,QAAQ,+BAA+B;KACnD,UAAU,EAAE,QAAQ,+BAA+B;KACnD,eAAe;KACf,OAAO,EAAO,WAAW,QAAQ;KACjC,QAAQ,EAAO,WAAW,CAAC,QAAQ,OAAO,GAAG,KAAA;KAC7C,mBAAmB,EAAO,YAAY,KAAA;KACtC,OACE,EAAO,aACH;MACE,OAAO,EAAO;MACd,OAAO;MACP,UAAU;MACV,MAAM;MACP,GACD,KAAA;KAEN,CAAA;IAEF,kBAAC,GAAD;KACE,SAAS,kBAAC,GAAD,EAAc,gBAAgB,GAAe,CAAA;KACtD,QAAQ,EAAE,QAAQ,+BAA+B;KACjD,CAAA;IAED,EAAO,eAAe,MACrB,kBAAC,GAAD;KACE,cAAc,EAAE,YAAY,IAAI;KAChC,YAAY,MAAU,kBAAC,QAAD;MAAM,OAAO,EAAE,OAAO,6BAA6B;gBAAG;MAAa,CAAA;KACzF,CAAA;IAGH,EAAuB,EAAO,eAAe;IAE7C,EAAS,KAAK,GAAK,MAClB,kBAAC,GAAD;KAEE,MAAM,EAAO,aAAa;KAC1B,SAAS;KACT,MAAM,EAAO,cAAc,MAAQ;KACnC,QAAQ,EAAO,SAAS,MAAU,EAAe,IAAQ,EAAe;KACxE,aAAa;KACb,KAAK,EAAO,aAAa;KACzB,WAAW,EAAE,GAAG,GAAG;KACnB,MAAM,EAAa,SAAS,EAAI;KAChC,cAAA;KACA,EAVK,EAUL,CACF;IACgB;;EACA,CAAA,GApFf;EAsFT"}

package/dist/bigconsole/components/widgets/chart/charts/ScatterChart.js

@@ -0,0 +1,128 @@
+import e from "../ChartTooltip.js";
+import { buildReferenceElements as t } from "./referenceElements.js";
+import { memo as n, useMemo as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { CartesianGrid as o, Legend as s, ResponsiveContainer as c, Scatter as l, ScatterChart as u, Tooltip as d, XAxis as f, YAxis as p, ZAxis as m } from "recharts";
+//#region src/bigconsole/components/widgets/chart/charts/ScatterChart.tsx
+var h = [
+	"var(--color-chart-1)",
+	"var(--color-chart-2)",
+	"var(--color-chart-3)",
+	"var(--color-chart-4)",
+	"var(--color-chart-5)"
+], g = n(function({ data: n = [], config: g, onDataClick: _ }) {
+	let { xKey: v, yKey: y } = r(() => {
+		if (g.xField && g.yField) return {
+			xKey: g.xField,
+			yKey: g.yField
+		};
+		let e = n.length ? Object.keys(n[0]).filter((e) => typeof n[0][e] == "number") : [];
+		return {
+			xKey: g.xField || e[0] || "x",
+			yKey: g.yField || e[1] || "y"
+		};
+	}, [
+		g.xField,
+		g.yField,
+		n
+	]), b = g.sizeField, x = g.colorField, S = r(() => {
+		if (!x) return [{
+			name: g.seriesNames?.[y] || y,
+			points: n
+		}];
+		let e = /* @__PURE__ */ new Map();
+		for (let t of n) {
+			let n = String(t[x] ?? "—");
+			e.has(n) || e.set(n, []), e.get(n).push(t);
+		}
+		return Array.from(e.entries()).map(([e, t]) => ({
+			name: e,
+			points: t
+		}));
+	}, [
+		n,
+		x,
+		y,
+		g.seriesNames
+	]), C = (e) => typeof e == "number" ? new Intl.NumberFormat("en-US", {
+		notation: Math.abs(e) >= 1e4 ? "compact" : "standard",
+		maximumFractionDigits: 2
+	}).format(e) : String(e);
+	return n?.length ? /* @__PURE__ */ i(c, {
+		width: "100%",
+		height: "100%",
+		children: /* @__PURE__ */ a(u, {
+			margin: {
+				top: 10,
+				right: 10,
+				left: 0,
+				bottom: 0
+			},
+			children: [
+				g.showGrid !== !1 && /* @__PURE__ */ i(o, {
+					strokeDasharray: "3 3",
+					stroke: "var(--color-border-default)",
+					opacity: .5
+				}),
+				/* @__PURE__ */ i(f, {
+					type: "number",
+					dataKey: v,
+					name: g.xAxisLabel || v,
+					tick: {
+						fill: "var(--color-text-secondary)",
+						fontSize: 12
+					},
+					tickLine: { stroke: "var(--color-border-default)" },
+					axisLine: { stroke: "var(--color-border-default)" },
+					tickFormatter: C,
+					scale: g.logScale ? "log" : "auto",
+					domain: g.logScale ? ["auto", "auto"] : void 0
+				}),
+				/* @__PURE__ */ i(p, {
+					type: "number",
+					dataKey: y,
+					name: g.yAxisLabel || y,
+					tick: {
+						fill: "var(--color-text-secondary)",
+						fontSize: 12
+					},
+					tickLine: { stroke: "var(--color-border-default)" },
+					axisLine: { stroke: "var(--color-border-default)" },
+					tickFormatter: C,
+					scale: g.logScale ? "log" : "auto",
+					domain: g.logScale ? ["auto", "auto"] : void 0
+				}),
+				b && /* @__PURE__ */ i(m, {
+					type: "number",
+					dataKey: b,
+					range: [40, 400],
+					name: b
+				}),
+				/* @__PURE__ */ i(d, {
+					content: /* @__PURE__ */ i(e, { valueFormatter: C }),
+					cursor: {
+						strokeDasharray: "3 3",
+						stroke: "var(--color-border-default)"
+					}
+				}),
+				S.length > 1 && g.showLegend !== !1 && /* @__PURE__ */ i(s, { formatter: (e) => /* @__PURE__ */ i("span", {
+					style: { color: "var(--color-text-primary)" },
+					children: e
+				}) }),
+				t(g.referenceLines),
+				S.map((e, t) => /* @__PURE__ */ i(l, {
+					name: e.name,
+					data: e.points,
+					fill: g.colors?.[t] || h[t % h.length],
+					onClick: (e) => {
+						_ && e?.payload && _(e.payload, 0);
+					}
+				}, e.name))
+			]
+		})
+	}) : null;
+});
+//#endregion
+export { g as default };
+
+//# sourceMappingURL=ScatterChart.js.map

package/dist/bigconsole/components/widgets/chart/charts/ScatterChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScatterChart.js","names":[],"sources":["../../../../../../src/bigconsole/components/widgets/chart/charts/ScatterChart.tsx"],"sourcesContent":["/**\n * ScatterChart Component\n *\n * Scatter / bubble chart using Recharts `ScatterChart`. Plots `xField` vs\n * `yField`; an optional `sizeField` drives bubble radius (ZAxis) and an\n * optional `colorField` splits points into colored groups.\n */\n\nimport { type FC, memo, useMemo } from 'react';\nimport {\n  ScatterChart as RechartsScatterChart,\n  Scatter,\n  XAxis,\n  YAxis,\n  ZAxis,\n  CartesianGrid,\n  Tooltip,\n  ResponsiveContainer,\n  Legend,\n} from 'recharts';\nimport { ChartTooltip } from '../ChartTooltip';\nimport type { ChartConfig, ChartData } from './types';\nimport { buildReferenceElements } from './referenceElements';\n\nexport interface ScatterChartProps {\n  data: ChartData[];\n  config: ChartConfig;\n  hiddenSeries?: string[];\n  onDataClick?: (data: ChartData, index: number) => void;\n}\n\nconst DEFAULT_COLORS = [\n  'var(--color-chart-1)',\n  'var(--color-chart-2)',\n  'var(--color-chart-3)',\n  'var(--color-chart-4)',\n  'var(--color-chart-5)',\n];\n\nexport const ScatterChart: FC<ScatterChartProps> = memo(function ScatterChart({ data = [], config, onDataClick }) {\n  // Resolve axis fields, falling back to the first two numeric fields.\n  const { xKey, yKey } = useMemo(() => {\n    if (config.xField && config.yField) return { xKey: config.xField, yKey: config.yField };\n    const numeric = data.length ? Object.keys(data[0]).filter((k) => typeof data[0][k] === 'number') : [];\n    return { xKey: config.xField || numeric[0] || 'x', yKey: config.yField || numeric[1] || 'y' };\n  }, [config.xField, config.yField, data]);\n\n  const sizeKey = config.sizeField;\n  const colorKey = config.colorField;\n\n  // Group points by colorField (single group when absent).\n  const groups = useMemo(() => {\n    if (!colorKey) return [{ name: config.seriesNames?.[yKey] || yKey, points: data }];\n    const map = new Map<string, ChartData[]>();\n    for (const row of data) {\n      const key = String(row[colorKey] ?? '—');\n      if (!map.has(key)) map.set(key, []);\n      map.get(key)!.push(row);\n    }\n    return Array.from(map.entries()).map(([name, points]) => ({ name, points }));\n  }, [data, colorKey, yKey, config.seriesNames]);\n\n  const formatValue = (value: number | string): string => {\n    if (typeof value !== 'number') return String(value);\n    return new Intl.NumberFormat('en-US', {\n      notation: Math.abs(value) >= 10000 ? 'compact' : 'standard',\n      maximumFractionDigits: 2,\n    }).format(value);\n  };\n\n  if (!data?.length) return null;\n\n  return (\n    <ResponsiveContainer width=\"100%\" height=\"100%\">\n      <RechartsScatterChart margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>\n        {config.showGrid !== false && (\n          <CartesianGrid strokeDasharray=\"3 3\" stroke=\"var(--color-border-default)\" opacity={0.5} />\n        )}\n        <XAxis\n          type=\"number\"\n          dataKey={xKey}\n          name={config.xAxisLabel || xKey}\n          tick={{ fill: 'var(--color-text-secondary)', fontSize: 12 }}\n          tickLine={{ stroke: 'var(--color-border-default)' }}\n          axisLine={{ stroke: 'var(--color-border-default)' }}\n          tickFormatter={formatValue}\n          scale={config.logScale ? 'log' : 'auto'}\n          domain={config.logScale ? ['auto', 'auto'] : undefined}\n        />\n        <YAxis\n          type=\"number\"\n          dataKey={yKey}\n          name={config.yAxisLabel || yKey}\n          tick={{ fill: 'var(--color-text-secondary)', fontSize: 12 }}\n          tickLine={{ stroke: 'var(--color-border-default)' }}\n          axisLine={{ stroke: 'var(--color-border-default)' }}\n          tickFormatter={formatValue}\n          scale={config.logScale ? 'log' : 'auto'}\n          domain={config.logScale ? ['auto', 'auto'] : undefined}\n        />\n        {sizeKey && <ZAxis type=\"number\" dataKey={sizeKey} range={[40, 400]} name={sizeKey} />}\n        <Tooltip\n          content={<ChartTooltip valueFormatter={formatValue} />}\n          cursor={{ strokeDasharray: '3 3', stroke: 'var(--color-border-default)' }}\n        />\n        {groups.length > 1 && config.showLegend !== false && (\n          <Legend formatter={(value) => <span style={{ color: 'var(--color-text-primary)' }}>{value}</span>} />\n        )}\n        {buildReferenceElements(config.referenceLines)}\n        {groups.map((g, i) => (\n          <Scatter\n            key={g.name}\n            name={g.name}\n            data={g.points}\n            fill={config.colors?.[i] || DEFAULT_COLORS[i % DEFAULT_COLORS.length]}\n            onClick={(point) => {\n              if (onDataClick && point?.payload) onDataClick(point.payload as ChartData, 0);\n            }}\n          />\n        ))}\n      </RechartsScatterChart>\n    </ResponsiveContainer>\n  );\n});\n\nexport default ScatterChart;\n"],"mappings":"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"}

package/dist/bigconsole/components/widgets/chart/charts/WaterfallChart.js

@@ -0,0 +1,111 @@
+import e from "../ChartTooltip.js";
+import { buildReferenceElements as t } from "./referenceElements.js";
+import { memo as n, useMemo as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Bar as o, BarChart as s, CartesianGrid as c, Cell as l, ResponsiveContainer as u, Tooltip as d, XAxis as f, YAxis as p } from "recharts";
+//#region src/bigconsole/components/widgets/chart/charts/WaterfallChart.tsx
+var m = "var(--color-status-success)", h = "var(--color-status-error)", g = "var(--color-chart-1)", _ = n(function({ data: n = [], config: _, onDataClick: v }) {
+	let y = _.labelField || _.xAxisKey || "name", b = _.valueField || "value", x = r(() => {
+		if (!n.length) return [];
+		let e = 0, t = n.map((t) => {
+			let n = typeof t[b] == "number" ? t[b] : Number(t[b]) || 0, r = n >= 0 ? e : e + n;
+			return e += n, {
+				name: String(t[y] ?? ""),
+				base: r,
+				delta: Math.abs(n),
+				cumulative: e,
+				isTotal: !1,
+				sign: n >= 0 ? "up" : "down"
+			};
+		});
+		return _.showTotal && t.push({
+			name: _.totalLabel || "Total",
+			base: 0,
+			delta: e,
+			cumulative: e,
+			isTotal: !0,
+			sign: "total"
+		}), t;
+	}, [
+		n,
+		y,
+		b,
+		_.showTotal,
+		_.totalLabel
+	]), S = (e) => typeof e == "number" ? new Intl.NumberFormat("en-US", {
+		notation: Math.abs(e) >= 1e4 ? "compact" : "standard",
+		maximumFractionDigits: 2
+	}).format(e) : String(e);
+	return x.length ? /* @__PURE__ */ i(u, {
+		width: "100%",
+		height: "100%",
+		children: /* @__PURE__ */ a(s, {
+			data: x,
+			margin: {
+				top: 10,
+				right: 10,
+				left: 0,
+				bottom: 0
+			},
+			onClick: (e) => {
+				e?.activePayload?.[0] && v && v(e.activePayload[0].payload, e.activeTooltipIndex || 0);
+			},
+			children: [
+				_.showGrid !== !1 && /* @__PURE__ */ i(c, {
+					strokeDasharray: "3 3",
+					stroke: "var(--color-border-default)",
+					opacity: .5,
+					vertical: !1
+				}),
+				/* @__PURE__ */ i(f, {
+					dataKey: "name",
+					tick: {
+						fill: "var(--color-text-secondary)",
+						fontSize: 12
+					},
+					tickLine: { stroke: "var(--color-border-default)" },
+					axisLine: { stroke: "var(--color-border-default)" }
+				}),
+				/* @__PURE__ */ i(p, {
+					tick: {
+						fill: "var(--color-text-secondary)",
+						fontSize: 12
+					},
+					tickLine: { stroke: "var(--color-border-default)" },
+					axisLine: { stroke: "var(--color-border-default)" },
+					tickFormatter: S
+				}),
+				/* @__PURE__ */ i(d, {
+					content: /* @__PURE__ */ i(e, { valueFormatter: S }),
+					cursor: {
+						fill: "var(--color-bg-muted)",
+						opacity: .5
+					}
+				}),
+				t(_.referenceLines),
+				/* @__PURE__ */ i(o, {
+					dataKey: "base",
+					stackId: "wf",
+					fill: "transparent",
+					isAnimationActive: !1
+				}),
+				/* @__PURE__ */ i(o, {
+					dataKey: "delta",
+					stackId: "wf",
+					radius: [
+						4,
+						4,
+						0,
+						0
+					],
+					name: "Change",
+					children: x.map((e, t) => /* @__PURE__ */ i(l, { fill: e.sign === "total" ? g : e.sign === "up" ? m : h }, t))
+				})
+			]
+		})
+	}) : null;
+});
+//#endregion
+export { _ as default };
+
+//# sourceMappingURL=WaterfallChart.js.map

package/dist/bigconsole/components/widgets/chart/charts/WaterfallChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WaterfallChart.js","names":[],"sources":["../../../../../../src/bigconsole/components/widgets/chart/charts/WaterfallChart.tsx"],"sourcesContent":["/**\n * WaterfallChart Component\n *\n * Bridge / waterfall chart (budget-vs-actual, P&L) using a Recharts stacked\n * BarChart: a transparent \"base\" bar floats each visible delta bar to its\n * running cumulative position. Positive steps render success-toned, negative\n * steps danger-toned, and an optional final bar shows the cumulative total.\n */\n\nimport { type FC, memo, useMemo } from 'react';\nimport {\n  BarChart as RechartsBarChart,\n  Bar,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  ResponsiveContainer,\n  Cell,\n} from 'recharts';\nimport { ChartTooltip } from '../ChartTooltip';\nimport type { ChartConfig, ChartData } from './types';\nimport { buildReferenceElements } from './referenceElements';\n\nexport interface WaterfallChartProps {\n  data: ChartData[];\n  config: ChartConfig;\n  hiddenSeries?: string[];\n  onDataClick?: (data: ChartData, index: number) => void;\n}\n\ninterface WaterfallRow {\n  name: string;\n  base: number;\n  delta: number;\n  cumulative: number;\n  isTotal: boolean;\n  sign: 'up' | 'down' | 'total';\n}\n\nconst COLOR_UP = 'var(--color-status-success)';\nconst COLOR_DOWN = 'var(--color-status-error)';\nconst COLOR_TOTAL = 'var(--color-chart-1)';\n\nexport const WaterfallChart: FC<WaterfallChartProps> = memo(function WaterfallChart({\n  data = [],\n  config,\n  onDataClick,\n}) {\n  const labelKey = config.labelField || config.xAxisKey || 'name';\n  const valueKey = config.valueField || 'value';\n\n  const rows: WaterfallRow[] = useMemo(() => {\n    if (!data.length) return [];\n    let cumulative = 0;\n    const out: WaterfallRow[] = data.map((d) => {\n      const delta = typeof d[valueKey] === 'number' ? (d[valueKey] as number) : Number(d[valueKey]) || 0;\n      const base = delta >= 0 ? cumulative : cumulative + delta;\n      cumulative += delta;\n      return {\n        name: String(d[labelKey] ?? ''),\n        base,\n        delta: Math.abs(delta),\n        cumulative,\n        isTotal: false,\n        sign: delta >= 0 ? 'up' : 'down',\n      };\n    });\n    if (config.showTotal) {\n      out.push({\n        name: config.totalLabel || 'Total',\n        base: 0,\n        delta: cumulative,\n        cumulative,\n        isTotal: true,\n        sign: 'total',\n      });\n    }\n    return out;\n  }, [data, labelKey, valueKey, config.showTotal, config.totalLabel]);\n\n  const formatValue = (value: number | string): string => {\n    if (typeof value !== 'number') return String(value);\n    return new Intl.NumberFormat('en-US', {\n      notation: Math.abs(value) >= 10000 ? 'compact' : 'standard',\n      maximumFractionDigits: 2,\n    }).format(value);\n  };\n\n  if (!rows.length) return null;\n\n  return (\n    <ResponsiveContainer width=\"100%\" height=\"100%\">\n      <RechartsBarChart\n        data={rows}\n        margin={{ top: 10, right: 10, left: 0, bottom: 0 }}\n        onClick={(e) => {\n          if (e?.activePayload?.[0] && onDataClick) {\n            onDataClick(e.activePayload[0].payload, e.activeTooltipIndex || 0);\n          }\n        }}\n      >\n        {config.showGrid !== false && (\n          <CartesianGrid strokeDasharray=\"3 3\" stroke=\"var(--color-border-default)\" opacity={0.5} vertical={false} />\n        )}\n        <XAxis\n          dataKey=\"name\"\n          tick={{ fill: 'var(--color-text-secondary)', fontSize: 12 }}\n          tickLine={{ stroke: 'var(--color-border-default)' }}\n          axisLine={{ stroke: 'var(--color-border-default)' }}\n        />\n        <YAxis\n          tick={{ fill: 'var(--color-text-secondary)', fontSize: 12 }}\n          tickLine={{ stroke: 'var(--color-border-default)' }}\n          axisLine={{ stroke: 'var(--color-border-default)' }}\n          tickFormatter={formatValue}\n        />\n        <Tooltip\n          content={<ChartTooltip valueFormatter={formatValue} />}\n          cursor={{ fill: 'var(--color-bg-muted)', opacity: 0.5 }}\n        />\n        {buildReferenceElements(config.referenceLines)}\n        {/* Transparent floating base */}\n        <Bar dataKey=\"base\" stackId=\"wf\" fill=\"transparent\" isAnimationActive={false} />\n        {/* Visible delta, colored by direction */}\n        <Bar dataKey=\"delta\" stackId=\"wf\" radius={[4, 4, 0, 0]} name=\"Change\">\n          {rows.map((r, i) => (\n            <Cell key={i} fill={r.sign === 'total' ? COLOR_TOTAL : r.sign === 'up' ? COLOR_UP : COLOR_DOWN} />\n          ))}\n        </Bar>\n      </RechartsBarChart>\n    </ResponsiveContainer>\n  );\n});\n\nexport default WaterfallChart;\n"],"mappings":";;;;;;AAwCA,IAAM,IAAW,+BACX,IAAa,6BACb,IAAc,wBAEP,IAA0C,EAAK,SAAwB,EAClF,UAAO,EAAE,EACT,WACA,kBACC;CACD,IAAM,IAAW,EAAO,cAAc,EAAO,YAAY,QACnD,IAAW,EAAO,cAAc,SAEhC,IAAuB,QAAc;AACzC,MAAI,CAAC,EAAK,OAAQ,QAAO,EAAE;EAC3B,IAAI,IAAa,GACX,IAAsB,EAAK,KAAK,MAAM;GAC1C,IAAM,IAAQ,OAAO,EAAE,MAAc,WAAY,EAAE,KAAuB,OAAO,EAAE,GAAU,IAAI,GAC3F,IAAO,KAAS,IAAI,IAAa,IAAa;AAEpD,UADA,KAAc,GACP;IACL,MAAM,OAAO,EAAE,MAAa,GAAG;IAC/B;IACA,OAAO,KAAK,IAAI,EAAM;IACtB;IACA,SAAS;IACT,MAAM,KAAS,IAAI,OAAO;IAC3B;IACD;AAWF,SAVI,EAAO,aACT,EAAI,KAAK;GACP,MAAM,EAAO,cAAc;GAC3B,MAAM;GACN,OAAO;GACP;GACA,SAAS;GACT,MAAM;GACP,CAAC,EAEG;IACN;EAAC;EAAM;EAAU;EAAU,EAAO;EAAW,EAAO;EAAW,CAAC,EAE7D,KAAe,MACf,OAAO,KAAU,WACd,IAAI,KAAK,aAAa,SAAS;EACpC,UAAU,KAAK,IAAI,EAAM,IAAI,MAAQ,YAAY;EACjD,uBAAuB;EACxB,CAAC,CAAC,OAAO,EAAM,GAJsB,OAAO,EAAM;AASrD,QAFK,EAAK,SAGR,kBAAC,GAAD;EAAqB,OAAM;EAAO,QAAO;YACvC,kBAAC,GAAD;GACE,MAAM;GACN,QAAQ;IAAE,KAAK;IAAI,OAAO;IAAI,MAAM;IAAG,QAAQ;IAAG;GAClD,UAAU,MAAM;AACd,IAAI,GAAG,gBAAgB,MAAM,KAC3B,EAAY,EAAE,cAAc,GAAG,SAAS,EAAE,sBAAsB,EAAE;;aALxE;IASG,EAAO,aAAa,MACnB,kBAAC,GAAD;KAAe,iBAAgB;KAAM,QAAO;KAA8B,SAAS;KAAK,UAAU;KAAS,CAAA;IAE7G,kBAAC,GAAD;KACE,SAAQ;KACR,MAAM;MAAE,MAAM;MAA+B,UAAU;MAAI;KAC3D,UAAU,EAAE,QAAQ,+BAA+B;KACnD,UAAU,EAAE,QAAQ,+BAA+B;KACnD,CAAA;IACF,kBAAC,GAAD;KACE,MAAM;MAAE,MAAM;MAA+B,UAAU;MAAI;KAC3D,UAAU,EAAE,QAAQ,+BAA+B;KACnD,UAAU,EAAE,QAAQ,+BAA+B;KACnD,eAAe;KACf,CAAA;IACF,kBAAC,GAAD;KACE,SAAS,kBAAC,GAAD,EAAc,gBAAgB,GAAe,CAAA;KACtD,QAAQ;MAAE,MAAM;MAAyB,SAAS;MAAK;KACvD,CAAA;IACD,EAAuB,EAAO,eAAe;IAE9C,kBAAC,GAAD;KAAK,SAAQ;KAAO,SAAQ;KAAK,MAAK;KAAc,mBAAmB;KAAS,CAAA;IAEhF,kBAAC,GAAD;KAAK,SAAQ;KAAQ,SAAQ;KAAK,QAAQ;MAAC;MAAG;MAAG;MAAG;MAAE;KAAE,MAAK;eAC1D,EAAK,KAAK,GAAG,MACZ,kBAAC,GAAD,EAAc,MAAM,EAAE,SAAS,UAAU,IAAc,EAAE,SAAS,OAAO,IAAW,GAAc,EAAvF,EAAuF,CAClG;KACE,CAAA;IACW;;EACC,CAAA,GA1CC;EA4CzB"}

package/dist/bigconsole/components/widgets/chart/charts/index.js

@@ -1,5 +1,9 @@
+import "./referenceElements.js";
 import "./LineChart.js";
 import "./BarChart.js";
 import "./AreaChart.js";
 import "./PieChart.js";
 import "./FunnelChart.js";
+import "./ComboChart.js";
+import "./WaterfallChart.js";
+import "./ScatterChart.js";

package/dist/bigconsole/components/widgets/chart/charts/referenceElements.js

@@ -0,0 +1,49 @@
+import { intentToCssVar as e } from "../../utils/conditionalFormat.js";
+import { jsx as t } from "react/jsx-runtime";
+import { ReferenceArea as n, ReferenceLine as r } from "recharts";
+//#region src/bigconsole/components/widgets/chart/charts/referenceElements.tsx
+function i(i, a) {
+	return i?.length ? i.map((i, o) => {
+		let s = e(i.color ?? "danger"), c = (i.axis ?? "y") === "y", l = a?.yAxisId;
+		if (i.value2 != null) {
+			let e = Math.min(i.value, i.value2), r = Math.max(i.value, i.value2);
+			return /* @__PURE__ */ t(n, {
+				...c ? {
+					y1: e,
+					y2: r
+				} : {
+					x1: e,
+					x2: r
+				},
+				...l == null ? {} : { yAxisId: l },
+				fill: s,
+				fillOpacity: .1,
+				stroke: s,
+				strokeOpacity: .3,
+				label: i.label ? {
+					value: i.label,
+					fill: s,
+					fontSize: 11,
+					position: "insideTopLeft"
+				} : void 0
+			}, `ref-band-${o}`);
+		}
+		return /* @__PURE__ */ t(r, {
+			...c ? { y: i.value } : { x: i.value },
+			...l == null ? {} : { yAxisId: l },
+			stroke: s,
+			strokeWidth: 1.5,
+			strokeDasharray: i.dashed === !1 ? void 0 : "6 4",
+			label: i.label ? {
+				value: i.label,
+				fill: s,
+				fontSize: 11,
+				position: "right"
+			} : void 0
+		}, `ref-line-${o}`);
+	}) : [];
+}
+//#endregion
+export { i as buildReferenceElements };
+
+//# sourceMappingURL=referenceElements.js.map

package/dist/bigconsole/components/widgets/chart/charts/referenceElements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"referenceElements.js","names":[],"sources":["../../../../../../src/bigconsole/components/widgets/chart/charts/referenceElements.tsx"],"sourcesContent":["/**\n * Reference / threshold line & band helpers (Recharts).\n *\n * Builds `ReferenceLine` / `ReferenceArea` elements from a widget's\n * `config.referenceLines`. Colors are resolved from semantic intents so\n * targets / control limits / SLAs stay theme-aware.\n */\n\nimport { ReferenceLine, ReferenceArea } from 'recharts';\nimport type { ReactElement } from 'react';\nimport { intentToCssVar, type SemanticIntent } from '../../utils/conditionalFormat';\n\nexport interface ReferenceLineConfig {\n  axis?: 'x' | 'y';\n  value: number;\n  value2?: number;\n  label?: string;\n  color?: SemanticIntent;\n  dashed?: boolean;\n}\n\n/**\n * Build reference line/band elements for a cartesian chart.\n * `yAxisIds` lets dual-axis charts target the correct axis (defaults to none).\n */\nexport function buildReferenceElements(\n  referenceLines: ReferenceLineConfig[] | undefined,\n  opts?: { yAxisId?: string | number }\n): ReactElement[] {\n  if (!referenceLines?.length) return [];\n\n  return referenceLines.map((ref, index) => {\n    const color = intentToCssVar(ref.color ?? 'danger');\n    const onY = (ref.axis ?? 'y') === 'y';\n    const yAxisId = opts?.yAxisId;\n\n    // Band (shaded area) when a second bound is supplied.\n    if (ref.value2 != null) {\n      const lo = Math.min(ref.value, ref.value2);\n      const hi = Math.max(ref.value, ref.value2);\n      return (\n        <ReferenceArea\n          key={`ref-band-${index}`}\n          {...(onY ? { y1: lo, y2: hi } : { x1: lo, x2: hi })}\n          {...(yAxisId != null ? { yAxisId } : {})}\n          fill={color}\n          fillOpacity={0.1}\n          stroke={color}\n          strokeOpacity={0.3}\n          label={ref.label ? { value: ref.label, fill: color, fontSize: 11, position: 'insideTopLeft' } : undefined}\n        />\n      );\n    }\n\n    return (\n      <ReferenceLine\n        key={`ref-line-${index}`}\n        {...(onY ? { y: ref.value } : { x: ref.value })}\n        {...(yAxisId != null ? { yAxisId } : {})}\n        stroke={color}\n        strokeWidth={1.5}\n        strokeDasharray={ref.dashed === false ? undefined : '6 4'}\n        label={ref.label ? { value: ref.label, fill: color, fontSize: 11, position: 'right' } : undefined}\n      />\n    );\n  });\n}\n"],"mappings":";;;;AAyBA,SAAgB,EACd,GACA,GACgB;AAGhB,QAFK,GAAgB,SAEd,EAAe,KAAK,GAAK,MAAU;EACxC,IAAM,IAAQ,EAAe,EAAI,SAAS,SAAS,EAC7C,KAAO,EAAI,QAAQ,SAAS,KAC5B,IAAU,GAAM;AAGtB,MAAI,EAAI,UAAU,MAAM;GACtB,IAAM,IAAK,KAAK,IAAI,EAAI,OAAO,EAAI,OAAO,EACpC,IAAK,KAAK,IAAI,EAAI,OAAO,EAAI,OAAO;AAC1C,UACE,kBAAC,GAAD;IAEE,GAAK,IAAM;KAAE,IAAI;KAAI,IAAI;KAAI,GAAG;KAAE,IAAI;KAAI,IAAI;KAAI;IAClD,GAAK,KAAW,OAAqB,EAAE,GAAhB,EAAE,YAAS;IAClC,MAAM;IACN,aAAa;IACb,QAAQ;IACR,eAAe;IACf,OAAO,EAAI,QAAQ;KAAE,OAAO,EAAI;KAAO,MAAM;KAAO,UAAU;KAAI,UAAU;KAAiB,GAAG,KAAA;IAChG,EARK,YAAY,IAQjB;;AAIN,SACE,kBAAC,GAAD;GAEE,GAAK,IAAM,EAAE,GAAG,EAAI,OAAO,GAAG,EAAE,GAAG,EAAI,OAAO;GAC9C,GAAK,KAAW,OAAqB,EAAE,GAAhB,EAAE,YAAS;GAClC,QAAQ;GACR,aAAa;GACb,iBAAiB,EAAI,WAAW,KAAQ,KAAA,IAAY;GACpD,OAAO,EAAI,QAAQ;IAAE,OAAO,EAAI;IAAO,MAAM;IAAO,UAAU;IAAI,UAAU;IAAS,GAAG,KAAA;GACxF,EAPK,YAAY,IAOjB;GAEJ,GApCkC,EAAE"}

package/dist/bigconsole/components/widgets/kpi-comparison/KPIComparisonWidget.js

@@ -1,7 +1,8 @@
-import { memo as e } from "react";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { conditionalStyleToClassName as e, resolveConditionalStyle as t } from "../utils/conditionalFormat.js";
+import { memo as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/bigconsole/components/widgets/kpi-comparison/KPIComparisonWidget.tsx
-function r(e, t) {
+function a(e, t) {
 	return t === "$" ? new Intl.NumberFormat("en-US", {
 		style: "currency",
 		currency: "USD",
@@ -12,21 +13,21 @@ function r(e, t) {
 		maximumFractionDigits: 1
 	}).format(e);
 }
-function i(e, t) {
+function o(e, t) {
 	return !e || e === "stable" ? "text-text-secondary" : e === "up" && (t ?? 0) >= 0 ? "text-state-success" : e === "down" && (t ?? 0) < 0 ? "text-state-error" : "text-text-secondary";
 }
-function a(e) {
+function s(e) {
 	return e === "up" ? "↑" : e === "down" ? "↓" : "→";
 }
-var o = e(function({ widget: e, data: o, onClick: s, onDrilldown: c }) {
-	let l = !!e.drilldown?.enabled, u = e.config, d = [], f = u?.valueField || u?.value_field || "value", p = u?.labelField || u?.label_field || "label", m = (e) => Object.entries(e).filter(([, e]) => typeof e == "number").map(([e, t]) => ({
+var c = n(function({ widget: n, data: c, onClick: l, onDrilldown: u }) {
+	let d = !!n.drilldown?.enabled, f = n.config, p = f?.conditionalRules, m = [], h = f?.valueField || f?.value_field || "value", g = f?.labelField || f?.label_field || "label", _ = (e) => Object.entries(e).filter(([, e]) => typeof e == "number").map(([e, t]) => ({
 		id: e,
 		label: e.replace(/([A-Z])/g, " $1").replace(/^./, (e) => e.toUpperCase()),
 		value: t,
 		unit: e.toLowerCase().includes("sales") || e.toLowerCase().includes("revenue") || e.toLowerCase().includes("value") ? "$" : void 0
-	})), h = (e, t) => {
+	})), v = (e, t) => {
 		let n = [
-			f,
+			h,
 			"value",
 			"revenue",
 			"amount",
@@ -51,7 +52,7 @@ var o = e(function({ widget: e, data: o, onClick: s, onDrilldown: c }) {
 		}
 		if (r === null) return null;
 		let i = [
-			p,
+			g,
 			"label",
 			"name",
 			"title",
@@ -68,24 +69,24 @@ var o = e(function({ widget: e, data: o, onClick: s, onDrilldown: c }) {
 			id: `kpi-${t}`,
 			label: a,
 			value: r,
-			unit: f.toLowerCase().includes("revenue") || f.toLowerCase().includes("sales") ? "$" : void 0,
+			unit: h.toLowerCase().includes("revenue") || h.toLowerCase().includes("sales") ? "$" : void 0,
 			trend: s,
 			trendValue: typeof o == "number" ? o : void 0
 		};
 	};
-	if (o?.kpis && Array.isArray(o.kpis)) d = o.kpis;
-	else if (Array.isArray(o) && o.length > 0) {
-		for (let e = 0; e < Math.min(o.length, 4); e++) {
-			let t = o[e];
+	if (c?.kpis && Array.isArray(c.kpis)) m = c.kpis;
+	else if (Array.isArray(c) && c.length > 0) {
+		for (let e = 0; e < Math.min(c.length, 4); e++) {
+			let t = c[e];
 			if (t && typeof t == "object") {
-				let n = h(t, e);
-				n && d.push(n);
+				let n = v(t, e);
+				n && m.push(n);
 			}
 		}
-		if (d.length === 0 && o.length > 0) {
-			let e = o[0];
-			d = Object.entries(e).filter(([, e]) => typeof e == "number").slice(0, 4).map(([e]) => {
-				let t = o.reduce((t, n) => {
+		if (m.length === 0 && c.length > 0) {
+			let e = c[0];
+			m = Object.entries(e).filter(([, e]) => typeof e == "number").slice(0, 4).map(([e]) => {
+				let t = c.reduce((t, n) => {
 					let r = n[e];
 					return t + (typeof r == "number" ? r : 0);
 				}, 0);
@@ -97,92 +98,95 @@ var o = e(function({ widget: e, data: o, onClick: s, onDrilldown: c }) {
 				};
 			});
 		}
-	} else if (typeof o == "number" || typeof o == "string") {
-		let t = typeof o == "string" ? parseFloat(o) : o;
-		isNaN(t) || (d = [{
+	} else if (typeof c == "number" || typeof c == "string") {
+		let e = typeof c == "string" ? parseFloat(c) : c;
+		isNaN(e) || (m = [{
 			id: "primary",
-			label: (u?.subtitle || e.title || "Value").trim(),
-			value: t,
-			unit: u?.format === "currency" ? "$" : u?.format === "percent" ? "%" : void 0
+			label: (f?.subtitle || n.title || "Value").trim(),
+			value: e,
+			unit: f?.format === "currency" ? "$" : f?.format === "percent" ? "%" : void 0
 		}]);
-	} else if (o && typeof o == "object" && !Array.isArray(o)) {
-		let e = o;
-		"summary" in e && e.summary && typeof e.summary == "object" && (d = m(e.summary)), d.length === 0 && (d = m(e));
+	} else if (c && typeof c == "object" && !Array.isArray(c)) {
+		let e = c;
+		"summary" in e && e.summary && typeof e.summary == "object" && (m = _(e.summary)), m.length === 0 && (m = _(e));
 	}
-	return d.length ? /* @__PURE__ */ t("div", {
+	return m.length ? /* @__PURE__ */ r("div", {
 		className: "h-full p-4 overflow-auto",
-		children: /* @__PURE__ */ t("div", {
+		children: /* @__PURE__ */ r("div", {
 			className: "grid grid-cols-2 gap-3",
-			children: d.map((e) => /* @__PURE__ */ n("div", {
+			children: m.map((n) => /* @__PURE__ */ i("div", {
 				className: `
                 p-3 rounded-lg border border-border-default bg-bg-muted/30
-                ${s || l ? "cursor-pointer hover:border-action-primary-bg transition-colors" : ""}
+                ${l || d ? "cursor-pointer hover:border-action-primary-bg transition-colors" : ""}
               `,
 				onClick: () => {
-					l && c && c({
-						kpiId: e.id,
-						kpiLabel: e.label,
-						kpiValue: e.value,
-						kpiUnit: e.unit,
-						kpiTrend: e.trend,
-						kpiTrendValue: e.trendValue,
-						kpiTarget: e.target,
-						kpiPreviousValue: e.previousValue
-					}), s?.(e);
+					d && u && u({
+						kpiId: n.id,
+						kpiLabel: n.label,
+						kpiValue: n.value,
+						kpiUnit: n.unit,
+						kpiTrend: n.trend,
+						kpiTrendValue: n.trendValue,
+						kpiTarget: n.target,
+						kpiPreviousValue: n.previousValue
+					}), l?.(n);
 				},
 				children: [
-					/* @__PURE__ */ t("p", {
+					/* @__PURE__ */ r("p", {
 						className: "text-xs text-text-secondary truncate mb-1",
-						children: e.label
+						children: n.label
 					}),
-					/* @__PURE__ */ t("p", {
-						className: "text-xl font-semibold text-text-primary",
-						children: r(e.value, e.unit)
+					/* @__PURE__ */ r("p", {
+						className: `text-xl font-semibold ${e(t(n.value, p, {
+							[n.label]: n.value,
+							value: n.value
+						})) || "text-text-primary"}`,
+						children: a(n.value, n.unit)
 					}),
-					e.trendValue !== void 0 && /* @__PURE__ */ n("div", {
-						className: `flex items-center gap-1 mt-1 text-xs ${i(e.trend, e.trendValue)}`,
-						children: [/* @__PURE__ */ t("span", { children: a(e.trend) }), /* @__PURE__ */ n("span", { children: [
-							e.trendValue >= 0 ? "+" : "",
-							e.trendValue.toFixed(1),
+					n.trendValue !== void 0 && /* @__PURE__ */ i("div", {
+						className: `flex items-center gap-1 mt-1 text-xs ${o(n.trend, n.trendValue)}`,
+						children: [/* @__PURE__ */ r("span", { children: s(n.trend) }), /* @__PURE__ */ i("span", { children: [
+							n.trendValue >= 0 ? "+" : "",
+							n.trendValue.toFixed(1),
 							"%"
 						] })]
 					}),
-					e.target !== void 0 && /* @__PURE__ */ n("div", {
+					n.target !== void 0 && /* @__PURE__ */ i("div", {
 						className: "mt-2",
-						children: [/* @__PURE__ */ n("div", {
+						children: [/* @__PURE__ */ i("div", {
 							className: "flex justify-between text-[10px] text-text-tertiary mb-0.5",
-							children: [/* @__PURE__ */ t("span", { children: "vs target" }), /* @__PURE__ */ n("span", { children: [(e.value / e.target * 100).toFixed(0), "%"] })]
-						}), /* @__PURE__ */ t("div", {
+							children: [/* @__PURE__ */ r("span", { children: "vs target" }), /* @__PURE__ */ i("span", { children: [(n.value / n.target * 100).toFixed(0), "%"] })]
+						}), /* @__PURE__ */ r("div", {
 							className: "h-1 bg-bg-muted rounded-full overflow-hidden",
-							children: /* @__PURE__ */ t("div", {
-								className: `h-full rounded-full ${e.value >= e.target ? "bg-state-success" : "bg-action-primary-bg"}`,
-								style: { width: `${Math.min(e.value / e.target * 100, 100)}%` }
+							children: /* @__PURE__ */ r("div", {
+								className: `h-full rounded-full ${n.value >= n.target ? "bg-state-success" : "bg-action-primary-bg"}`,
+								style: { width: `${Math.min(n.value / n.target * 100, 100)}%` }
 							})
 						})]
 					})
 				]
-			}, e.id))
+			}, n.id))
 		})
-	}) : /* @__PURE__ */ t("div", {
+	}) : /* @__PURE__ */ r("div", {
 		className: "flex items-center justify-center h-full text-text-secondary text-sm",
-		children: /* @__PURE__ */ n("div", {
+		children: /* @__PURE__ */ i("div", {
 			className: "text-center",
-			children: [/* @__PURE__ */ t("svg", {
+			children: [/* @__PURE__ */ r("svg", {
 				className: "w-12 h-12 mx-auto mb-2 text-text-tertiary",
 				fill: "none",
 				stroke: "currentColor",
 				viewBox: "0 0 24 24",
-				children: /* @__PURE__ */ t("path", {
+				children: /* @__PURE__ */ r("path", {
 					strokeLinecap: "round",
 					strokeLinejoin: "round",
 					strokeWidth: 1.5,
 					d: "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
 				})
-			}), /* @__PURE__ */ t("p", { children: "No KPI data" })]
+			}), /* @__PURE__ */ r("p", { children: "No KPI data" })]
 		})
 	});
 });
 //#endregion
-export { o as default };
+export { c as default };
 
 //# sourceMappingURL=KPIComparisonWidget.js.map