drizzle-cube 0.5.7 → 0.6.0

package/dist/client/chunks/chart-tree-map-Ceq5sLZA.js

@@ -0,0 +1,323 @@
+import { n as e } from "./rolldown-runtime-CWhphoD1.js";
+import { D as t, E as n, P as r, S as i, c as a, s as o, w as s } from "./chart-activity-grid-DX0SJbxs.js";
+import { S as c, T as l, b as u, w as d, x as f } from "./chart-area-of01_62R.js";
+import p, { useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { Treemap as _ } from "recharts";
+import { scaleOrdinal as v, scaleQuantize as y } from "d3";
+//#region src/client/components/charts/TreeMapChart.helpers.ts
+function b(e) {
+	return e ? Array.isArray(e) ? e[0] : e : "";
+}
+function x(e) {
+	return typeof e == "string" ? parseFloat(e) : e || 0;
+}
+function S(e) {
+	return typeof e == "string" ? parseFloat(e) : e;
+}
+function C(e, r, i, s) {
+	let c = b(r.xAxis), l = b(r.yAxis), u = Array.isArray(r.series) ? r.series[0] : r.series, d = t(i, c), f = (e) => n(e[c], d) || String(e[c]) || "Unknown";
+	if (!u) return {
+		treemapData: e.map((e, t) => ({
+			name: f(e),
+			size: x(e[l]),
+			fill: s?.colors && s.colors[t % s.colors.length] || o[t % o.length]
+		})),
+		isNumericSeries: !1,
+		seriesField: u
+	};
+	let p = e.map((e) => S(e[u])).filter((e) => !isNaN(e)), m = p.length === e.length && p.every((e) => typeof e == "number");
+	if (m) {
+		let t = y().domain([Math.min(...p), Math.max(...p)]).range(a);
+		return {
+			treemapData: e.map((e) => ({
+				name: f(e),
+				size: x(e[l]),
+				fill: t(S(e[u])),
+				series: String(e[u])
+			})),
+			isNumericSeries: m,
+			seriesField: u
+		};
+	}
+	let h = [...new Set(e.map((e) => String(e[u])))], g = v().domain(h).range(s?.colors || o);
+	return {
+		treemapData: e.map((e) => ({
+			name: f(e),
+			size: x(e[l]),
+			fill: g(String(e[u])),
+			series: String(e[u])
+		})),
+		isNumericSeries: m,
+		seriesField: u
+	};
+}
+function w(e) {
+	return typeof e == "boolean" ? e ? "Active" : "Inactive" : e === "true" || e === "false" ? e === "true" ? "Active" : "Inactive" : String(e);
+}
+function T(e, t) {
+	let n = e[0], r = Object.keys(n), i = r.find((e) => typeof n[e] == "string" || e.toLowerCase().includes("name") || e.toLowerCase().includes("label") || e.toLowerCase().includes("category")) || r[0], a = r.find((e) => e.toLowerCase().includes("size")) || r.find((e) => typeof n[e] == "number" && e !== i) || r[1];
+	return a ? {
+		treemapData: e.map((e, n) => ({
+			name: w(e[i]),
+			size: x(e[a]),
+			fill: t?.colors && t.colors[n % t.colors.length] || o[n % o.length]
+		})),
+		isNumericSeries: !1,
+		seriesField: void 0
+	} : null;
+}
+function E(e, t, n, r) {
+	let i = t?.xAxis && t?.yAxis ? C(e, t, n, r) : T(e, r);
+	return i ? {
+		...i,
+		treemapData: i.treemapData.filter((e) => e.size != null && e.size > 0)
+	} : null;
+}
+function D(e, t) {
+	let n = e.map((e) => S(e[t]));
+	return {
+		min: Math.min(...n),
+		max: Math.max(...n)
+	};
+}
+function O(e, t) {
+	return t ? s(e, t) : e.toFixed(2);
+}
+function k(e, t, n, r, i, s) {
+	if (!n || !r) return [];
+	if (i) {
+		let { min: t, max: n } = D(e, r);
+		return a.map((e, r) => {
+			let i = r / (a.length - 1);
+			return {
+				value: O(t + (n - t) * i, s),
+				type: "rect",
+				color: e
+			};
+		});
+	}
+	let c = [...new Set(t.map((e) => e.series).filter(Boolean))];
+	return c.length > 1 ? c.map((e, t) => ({
+		value: e,
+		type: "rect",
+		color: o[t % o.length]
+	})) : [];
+}
+function A(e, t) {
+	return !t || typeof e == "string" && e.includes("%") ? e : typeof e == "number" ? e + 60 : `calc(${e} + 60px)`;
+}
+//#endregion
+//#region src/client/components/charts/TreeMapContent.tsx
+function j(e, t) {
+	return e === null ? .8 : e === t ? 1 : .6;
+}
+function M(e, t) {
+	return t ? s(e, t) : typeof e == "number" ? e.toLocaleString() : String(e);
+}
+function N({ treemapData: e, colorPalette: t, hoveredIndex: n, setHoveredIndex: r, leftYAxisFormat: i, drillEnabled: a, onDataPointClick: s, queryObject: c, chartConfig: l }) {
+	return function(u) {
+		let { x: d, y: f, width: p, height: m, index: _, name: v, size: y } = u;
+		return p < 20 || m < 20 ? null : /* @__PURE__ */ g("g", { children: [/* @__PURE__ */ h("rect", {
+			x: d,
+			y: f,
+			width: p,
+			height: m,
+			style: {
+				fill: e[_]?.fill || t?.colors && t.colors[_ % t.colors.length] || o[_ % o.length],
+				fillOpacity: j(n, _),
+				stroke: "#fff",
+				strokeWidth: 2,
+				cursor: a ? "pointer" : "default",
+				pointerEvents: "all"
+			},
+			onMouseEnter: () => r(_),
+			onMouseLeave: () => r(null),
+			onClick: a && s ? (t) => {
+				t.stopPropagation();
+				let n = e[_];
+				n && s && s({
+					dataPoint: n,
+					clickedField: c?.measures?.[0] || l?.yAxis?.[0] || "",
+					xValue: v,
+					position: {
+						x: t.clientX,
+						y: t.clientY
+					},
+					nativeEvent: t
+				});
+			} : void 0
+		}), /* @__PURE__ */ h("foreignObject", {
+			x: d,
+			y: f,
+			width: p,
+			height: m,
+			style: {
+				pointerEvents: "none",
+				overflow: "visible"
+			},
+			children: /* @__PURE__ */ g("div", {
+				style: {
+					width: "100%",
+					height: "100%",
+					display: "flex",
+					flexDirection: "column",
+					alignItems: "center",
+					justifyContent: "center",
+					padding: "4px",
+					boxSizing: "border-box",
+					color: "#ffffff",
+					textShadow: "0 1px 2px rgba(0,0,0,0.8)",
+					fontFamily: "system-ui, -apple-system, sans-serif",
+					overflow: "hidden"
+				},
+				children: [p > 40 && m > 30 && /* @__PURE__ */ h("div", {
+					style: {
+						fontSize: `${Math.max(10, Math.min(p / 8, m / 8, 16))}px`,
+						fontWeight: "600",
+						textAlign: "center",
+						lineHeight: "1.2",
+						marginBottom: p > 60 && m > 45 ? "4px" : "0",
+						wordBreak: "break-word",
+						hyphens: "auto"
+					},
+					children: v
+				}), p > 60 && m > 45 && /* @__PURE__ */ h("div", {
+					style: {
+						fontSize: `${Math.max(8, Math.min(p / 10, m / 10, 14))}px`,
+						textAlign: "center",
+						opacity: .9
+					},
+					children: M(y, i)
+				})]
+			})
+		})] });
+	};
+}
+//#endregion
+//#region src/client/components/charts/TreeMapLegend.tsx
+function P({ seriesLabel: e, data: t, seriesField: n, leftYAxisFormat: r }) {
+	let { min: i, max: o } = D(t, n);
+	return /* @__PURE__ */ g("div", {
+		className: "dc:flex dc:flex-col dc:items-center",
+		children: [/* @__PURE__ */ h("div", {
+			className: "dc:text-xs dc:font-semibold text-dc-text-primary dc:mb-2",
+			children: e
+		}), /* @__PURE__ */ g("div", {
+			className: "dc:flex dc:items-center dc:gap-2",
+			children: [
+				/* @__PURE__ */ h("span", {
+					className: "dc:text-xs text-dc-text-muted",
+					children: O(i, r)
+				}),
+				/* @__PURE__ */ h("div", {
+					className: "dc:h-4 dc:rounded-sm",
+					style: {
+						width: "200px",
+						background: `linear-gradient(to right, ${a.join(", ")})`
+					}
+				}),
+				/* @__PURE__ */ h("span", {
+					className: "dc:text-xs text-dc-text-muted",
+					children: O(o, r)
+				})
+			]
+		})]
+	});
+}
+function F({ legendPayload: e }) {
+	return /* @__PURE__ */ h("div", {
+		className: "dc:flex dc:flex-wrap dc:justify-center dc:gap-4",
+		children: e.map((e, t) => /* @__PURE__ */ g("div", {
+			className: "dc:flex dc:items-center dc:gap-2",
+			children: [/* @__PURE__ */ h("div", {
+				className: "dc:w-3 dc:h-3 rounded-xs",
+				style: { backgroundColor: e.color }
+			}), /* @__PURE__ */ h("span", {
+				className: "dc:text-xs text-dc-text-muted",
+				children: e.value
+			})]
+		}, t))
+	});
+}
+function I({ isNumericSeries: e, seriesField: t, seriesLabel: n, legendPayload: r, data: i, leftYAxisFormat: a }) {
+	return /* @__PURE__ */ h("div", {
+		className: "dc:flex dc:justify-center dc:items-center dc:mt-4 dc:pb-2",
+		children: e && t ? /* @__PURE__ */ h(P, {
+			seriesLabel: n,
+			data: i,
+			seriesField: t,
+			leftYAxisFormat: a
+		}) : /* @__PURE__ */ h(F, { legendPayload: r })
+	});
+}
+//#endregion
+//#region src/client/components/charts/TreeMapChart.tsx
+var L = /* @__PURE__ */ e({ default: () => R }), R = p.memo(function({ data: e, chartConfig: t, displayConfig: n = {}, queryObject: a, height: o = "100%", colorPalette: p, onDataPointClick: v, drillEnabled: y }) {
+	let { t: b } = r(), [x, S] = m(null), C = i();
+	try {
+		let r = {
+			showTooltip: n?.showTooltip ?? !0,
+			showLegend: n?.showLegend ?? !0,
+			leftYAxisFormat: n?.leftYAxisFormat
+		};
+		if (!e || e.length === 0) return /* @__PURE__ */ h(f, {
+			height: o,
+			hint: b("chart.runtime.noDataHint.treemap")
+		});
+		let i = E(e, t, a, p);
+		if (!i) return /* @__PURE__ */ h(u, {
+			height: o,
+			hint: b("chart.runtime.configErrorHint.treemapNumeric")
+		});
+		let { treemapData: c, isNumericSeries: m, seriesField: w } = i;
+		if (c.length === 0) return /* @__PURE__ */ h(f, {
+			height: o,
+			titleKey: "chart.runtime.noValidData",
+			hint: "No valid data points for treemap chart after transformation"
+		});
+		let T = N({
+			treemapData: c,
+			colorPalette: p,
+			hoveredIndex: x,
+			setHoveredIndex: S,
+			leftYAxisFormat: r.leftYAxisFormat,
+			drillEnabled: y,
+			onDataPointClick: v,
+			queryObject: a,
+			chartConfig: t
+		}), D = k(e, c, r.showLegend, w, m, r.leftYAxisFormat), O = r.showLegend && D.length > 0;
+		return /* @__PURE__ */ g("div", {
+			className: "dc:w-full",
+			style: { height: A(o, O) },
+			children: [/* @__PURE__ */ h(l, {
+				height: O ? "calc(100% - 50px)" : "100%",
+				children: /* @__PURE__ */ h(_, {
+					data: c,
+					dataKey: "size",
+					aspectRatio: 4 / 3,
+					stroke: "#fff",
+					content: /* @__PURE__ */ h(T, {}),
+					children: r.showTooltip && /* @__PURE__ */ h(d, { formatter: r.leftYAxisFormat ? (e, t) => [s(e, r.leftYAxisFormat), t] : void 0 })
+				})
+			}), O && /* @__PURE__ */ h(I, {
+				isNumericSeries: m,
+				seriesField: w,
+				seriesLabel: w ? C(w) : "",
+				legendPayload: D,
+				data: e,
+				leftYAxisFormat: r.leftYAxisFormat
+			})]
+		});
+	} catch (e) {
+		return /* @__PURE__ */ h(c, {
+			height: o,
+			chartType: "TreeMap Chart",
+			error: e
+		});
+	}
+});
+//#endregion
+export { L as n, R as t };
+
+//# sourceMappingURL=chart-tree-map-Ceq5sLZA.js.map

package/dist/client/chunks/chart-tree-map-Ceq5sLZA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-tree-map-Ceq5sLZA.js","names":[],"sources":["../../../src/client/components/charts/TreeMapChart.helpers.ts","../../../src/client/components/charts/TreeMapContent.tsx","../../../src/client/components/charts/TreeMapLegend.tsx","../../../src/client/components/charts/TreeMapChart.tsx"],"sourcesContent":["/**\n * Co-located helpers for TreeMapChart.\n *\n * Pure data-shaping + legend computation extracted from the component. No\n * behaviour change — mirrors the original inline logic exactly.\n */\nimport { scaleQuantize, scaleOrdinal } from 'd3'\nimport { CHART_COLORS, CHART_COLORS_GRADIENT } from '../../utils/chartConstants'\nimport { formatTimeValue, getFieldGranularity, formatAxisValue } from '../../utils/chartUtils'\nimport type { AxisFormatConfig, ChartAxisConfig, ColorPalette, CubeQuery } from '../../types'\n\nexport interface TreemapDatum {\n  name: string\n  size: number\n  fill?: string\n  series?: string\n  // Index signature so the rows satisfy recharts' Treemap data + drill payloads\n  [key: string]: unknown\n}\n\n/** First element of a config field that may be a string, string[] or undefined. */\nfunction pickField(value: string | string[] | undefined): string {\n  if (!value) return ''\n  return Array.isArray(value) ? value[0] : value\n}\n\n/** Coerce a possibly-string numeric cell to a number (NaN-safe via fallback). */\nfunction toNumber(value: unknown): number {\n  return typeof value === 'string' ? parseFloat(value) : ((value as number) || 0)\n}\n\n/** Numeric value of a series cell (string or number), used for colour scaling. */\nfunction seriesNumber(value: unknown): number {\n  return typeof value === 'string' ? parseFloat(value) : (value as number)\n}\n\nexport interface TreemapBuildResult {\n  treemapData: TreemapDatum[]\n  isNumericSeries: boolean\n  seriesField?: string\n}\n\n/** Build treemap rows from the new (configured) chart config format. */\nfunction buildFromConfig(\n  data: Record<string, any>[],\n  chartConfig: ChartAxisConfig,\n  queryObject: CubeQuery | undefined,\n  colorPalette: ColorPalette | undefined\n): TreemapBuildResult {\n  const xAxisField = pickField(chartConfig.xAxis)\n  const yAxisField = pickField(chartConfig.yAxis)\n  const seriesField = Array.isArray(chartConfig.series) ? chartConfig.series[0] : chartConfig.series\n  const granularity = getFieldGranularity(queryObject, xAxisField)\n\n  const nameOf = (item: Record<string, any>) =>\n    formatTimeValue(item[xAxisField], granularity) || String(item[xAxisField]) || 'Unknown'\n\n  if (!seriesField) {\n    // No series grouping - use index-based colors\n    const treemapData = data.map((item, index) => ({\n      name: nameOf(item),\n      size: toNumber(item[yAxisField]),\n      fill: (colorPalette?.colors && colorPalette.colors[index % colorPalette.colors.length]) ||\n        CHART_COLORS[index % CHART_COLORS.length]\n    }))\n    return { treemapData, isNumericSeries: false, seriesField }\n  }\n\n  // Check if series field is numeric for color scaling\n  const seriesValues = data\n    .map((item) => seriesNumber(item[seriesField]))\n    .filter((val) => !isNaN(val))\n  const isNumericSeries =\n    seriesValues.length === data.length && seriesValues.every((val) => typeof val === 'number')\n\n  if (isNumericSeries) {\n    const colorScale = scaleQuantize<string>()\n      .domain([Math.min(...seriesValues), Math.max(...seriesValues)])\n      .range(CHART_COLORS_GRADIENT)\n    const treemapData = data.map((item) => ({\n      name: nameOf(item),\n      size: toNumber(item[yAxisField]),\n      fill: colorScale(seriesNumber(item[seriesField])),\n      series: String(item[seriesField])\n    }))\n    return { treemapData, isNumericSeries, seriesField }\n  }\n\n  const uniqueSeriesValues = [...new Set(data.map((item) => String(item[seriesField])))]\n  const colorScale = scaleOrdinal<string>()\n    .domain(uniqueSeriesValues)\n    .range(colorPalette?.colors || CHART_COLORS)\n  const treemapData = data.map((item) => ({\n    name: nameOf(item),\n    size: toNumber(item[yAxisField]),\n    fill: colorScale(String(item[seriesField])),\n    series: String(item[seriesField])\n  }))\n  return { treemapData, isNumericSeries, seriesField }\n}\n\n/** Resolve a friendly name for a legacy/auto-detected row. */\nfunction legacyName(value: unknown): string {\n  if (typeof value === 'boolean') return value ? 'Active' : 'Inactive'\n  if (value === 'true' || value === 'false') return value === 'true' ? 'Active' : 'Inactive'\n  return String(value)\n}\n\n/** Build treemap rows by auto-detecting name/size fields (legacy format). */\nfunction buildFromAutoDetect(\n  data: Record<string, any>[],\n  colorPalette: ColorPalette | undefined\n): TreemapBuildResult | null {\n  const firstRow = data[0]\n  const keys = Object.keys(firstRow)\n\n  const nameField =\n    keys.find(\n      (key) =>\n        typeof firstRow[key] === 'string' ||\n        key.toLowerCase().includes('name') ||\n        key.toLowerCase().includes('label') ||\n        key.toLowerCase().includes('category')\n    ) || keys[0]\n\n  const sizeField =\n    keys.find((key) => key.toLowerCase().includes('size')) ||\n    keys.find((key) => typeof firstRow[key] === 'number' && key !== nameField) ||\n    keys[1]\n\n  if (!sizeField) return null\n\n  const treemapData = data.map((item, index) => ({\n    name: legacyName(item[nameField]),\n    size: toNumber(item[sizeField]),\n    fill: (colorPalette?.colors && colorPalette.colors[index % colorPalette.colors.length]) ||\n      CHART_COLORS[index % CHART_COLORS.length]\n  }))\n  return { treemapData, isNumericSeries: false, seriesField: undefined }\n}\n\n/**\n * Build treemap data (config or auto-detect), then drop non-positive sizes.\n * Returns `null` when the legacy path can't find a usable size field.\n */\nexport function buildTreemapData(\n  data: Record<string, any>[],\n  chartConfig: ChartAxisConfig | undefined,\n  queryObject: CubeQuery | undefined,\n  colorPalette: ColorPalette | undefined\n): TreemapBuildResult | null {\n  const result =\n    chartConfig?.xAxis && chartConfig?.yAxis\n      ? buildFromConfig(data, chartConfig, queryObject, colorPalette)\n      : buildFromAutoDetect(data, colorPalette)\n\n  if (!result) return null\n\n  return {\n    ...result,\n    treemapData: result.treemapData.filter((item) => item.size != null && item.size > 0)\n  }\n}\n\n/** Min/max of the (numeric) series field across the raw rows. */\nexport function seriesMinMax(\n  data: Record<string, any>[],\n  seriesField: string\n): { min: number; max: number } {\n  const values = data.map((item) => seriesNumber(item[seriesField]))\n  return { min: Math.min(...values), max: Math.max(...values) }\n}\n\n/** Format a numeric value with the optional axis format (or `.toFixed(2)`). */\nexport function formatSeriesValue(value: number, format: AxisFormatConfig | undefined): string {\n  return format ? formatAxisValue(value, format) : value.toFixed(2)\n}\n\nexport interface LegendEntry {\n  value: string\n  type: 'rect'\n  color: string\n}\n\n/**\n * Build the legend entries for the treemap: a gradient ramp for numeric series,\n * or discrete swatches for categorical series. Empty when not applicable.\n */\nexport function buildTreemapLegend(\n  data: Record<string, any>[],\n  treemapData: TreemapDatum[],\n  showLegend: boolean,\n  seriesField: string | undefined,\n  isNumericSeries: boolean,\n  leftYAxisFormat: AxisFormatConfig | undefined\n): LegendEntry[] {\n  if (!showLegend || !seriesField) return []\n\n  if (isNumericSeries) {\n    const { min, max } = seriesMinMax(data, seriesField)\n    return CHART_COLORS_GRADIENT.map((color, index) => {\n      const ratio = index / (CHART_COLORS_GRADIENT.length - 1)\n      const value = min + (max - min) * ratio\n      return { value: formatSeriesValue(value, leftYAxisFormat), type: 'rect' as const, color }\n    })\n  }\n\n  const uniqueSeries = [...new Set(treemapData.map((item) => item.series).filter(Boolean))]\n  if (uniqueSeries.length > 1) {\n    return uniqueSeries.map((series, index) => ({\n      value: series as string,\n      type: 'rect' as const,\n      color: CHART_COLORS[index % CHART_COLORS.length]\n    }))\n  }\n  return []\n}\n\n/** Adjust the outer container height to make room for a legend, if present. */\nexport function adjustHeightForLegend(\n  height: string | number,\n  hasLegend: boolean\n): string | number {\n  if (!hasLegend) return height\n  if (typeof height === 'string' && height.includes('%')) return height\n  if (typeof height === 'number') return height + 60\n  return `calc(${height} + 60px)`\n}\n","import React from 'react'\nimport { CHART_COLORS } from '../../utils/chartConstants'\nimport { formatAxisValue } from '../../utils/chartUtils'\nimport type { AxisFormatConfig, ChartAxisConfig, ColorPalette, CubeQuery } from '../../types'\nimport type { ChartDataPointClickEvent } from '../../types/drill'\nimport type { TreemapDatum } from './TreeMapChart.helpers'\n\ninterface TreeMapContentOptions {\n  treemapData: TreemapDatum[]\n  colorPalette?: ColorPalette\n  hoveredIndex: number | null\n  setHoveredIndex: (index: number | null) => void\n  leftYAxisFormat?: AxisFormatConfig\n  drillEnabled?: boolean\n  onDataPointClick?: (event: ChartDataPointClickEvent) => void\n  queryObject?: CubeQuery\n  chartConfig?: ChartAxisConfig\n}\n\n/** Fill opacity for a treemap cell given the currently hovered index. */\nfunction cellOpacity(hoveredIndex: number | null, index: number): number {\n  if (hoveredIndex === null) return 0.8\n  return hoveredIndex === index ? 1 : 0.6\n}\n\n/** Format the size label shown inside a treemap cell. */\nfunction formatSize(size: unknown, format: AxisFormatConfig | undefined): string {\n  if (format) return formatAxisValue(size as number, format)\n  return typeof size === 'number' ? size.toLocaleString() : String(size)\n}\n\n/**\n * Build the Recharts `content` renderer for treemap cells.\n *\n * Encapsulates the per-cell rect + foreignObject overlay, hover state and drill\n * click handler that previously lived inline in TreeMapChart (the highest-\n * complexity hot spots). Behaviour is identical to the original.\n */\nexport function makeTreeMapContent({\n  treemapData,\n  colorPalette,\n  hoveredIndex,\n  setHoveredIndex,\n  leftYAxisFormat,\n  drillEnabled,\n  onDataPointClick,\n  queryObject,\n  chartConfig,\n}: TreeMapContentOptions) {\n  return function CustomizedContent(props: any) {\n    const { x, y, width, height, index, name, size } = props\n\n    if (width < 20 || height < 20) return null // Skip very small cells\n\n    const handleClick = (event: React.MouseEvent) => {\n      event.stopPropagation()\n      const cellData = treemapData[index]\n      if (cellData && onDataPointClick) {\n        // Use query measures for proper field name (chartConfig.yAxis may hold labels)\n        const measureField = queryObject?.measures?.[0] || chartConfig?.yAxis?.[0] || ''\n        onDataPointClick({\n          dataPoint: cellData,\n          clickedField: measureField,\n          xValue: name,\n          position: { x: event.clientX, y: event.clientY },\n          nativeEvent: event\n        })\n      }\n    }\n\n    const fill =\n      treemapData[index]?.fill ||\n      ((colorPalette?.colors && colorPalette.colors[index % colorPalette.colors.length]) ||\n        CHART_COLORS[index % CHART_COLORS.length])\n\n    return (\n      <g>\n        <rect\n          x={x}\n          y={y}\n          width={width}\n          height={height}\n          style={{\n            fill,\n            fillOpacity: cellOpacity(hoveredIndex, index),\n            stroke: '#fff',\n            strokeWidth: 2,\n            cursor: drillEnabled ? 'pointer' : 'default',\n            pointerEvents: 'all'\n          }}\n          onMouseEnter={() => setHoveredIndex(index)}\n          onMouseLeave={() => setHoveredIndex(null)}\n          onClick={drillEnabled && onDataPointClick ? handleClick : undefined}\n        />\n        <foreignObject\n          x={x}\n          y={y}\n          width={width}\n          height={height}\n          style={{ pointerEvents: 'none', overflow: 'visible' }}\n        >\n          <div\n            style={{\n              width: '100%',\n              height: '100%',\n              display: 'flex',\n              flexDirection: 'column',\n              alignItems: 'center',\n              justifyContent: 'center',\n              padding: '4px',\n              boxSizing: 'border-box',\n              color: '#ffffff',\n              textShadow: '0 1px 2px rgba(0,0,0,0.8)',\n              fontFamily: 'system-ui, -apple-system, sans-serif',\n              overflow: 'hidden'\n            }}\n          >\n            {width > 40 && height > 30 && (\n              <div\n                style={{\n                  fontSize: `${Math.max(10, Math.min(width / 8, height / 8, 16))}px`,\n                  fontWeight: '600',\n                  textAlign: 'center',\n                  lineHeight: '1.2',\n                  marginBottom: width > 60 && height > 45 ? '4px' : '0',\n                  wordBreak: 'break-word',\n                  hyphens: 'auto'\n                }}\n              >\n                {name}\n              </div>\n            )}\n            {width > 60 && height > 45 && (\n              <div\n                style={{\n                  fontSize: `${Math.max(8, Math.min(width / 10, height / 10, 14))}px`,\n                  textAlign: 'center',\n                  opacity: 0.9\n                }}\n              >\n                {formatSize(size, leftYAxisFormat)}\n              </div>\n            )}\n          </div>\n        </foreignObject>\n      </g>\n    )\n  }\n}\n","import { CHART_COLORS_GRADIENT } from '../../utils/chartConstants'\nimport type { AxisFormatConfig } from '../../types'\nimport {\n  seriesMinMax,\n  formatSeriesValue,\n  type LegendEntry\n} from './TreeMapChart.helpers'\n\ninterface TreeMapLegendProps {\n  isNumericSeries: boolean\n  seriesField?: string\n  seriesLabel: string\n  legendPayload: LegendEntry[]\n  data: Record<string, any>[]\n  leftYAxisFormat?: AxisFormatConfig\n}\n\n/** Gradient ramp legend for a numeric series field. */\nfunction NumericLegend({\n  seriesLabel,\n  data,\n  seriesField,\n  leftYAxisFormat,\n}: {\n  seriesLabel: string\n  data: Record<string, any>[]\n  seriesField: string\n  leftYAxisFormat?: AxisFormatConfig\n}) {\n  const { min, max } = seriesMinMax(data, seriesField)\n  return (\n    <div className=\"dc:flex dc:flex-col dc:items-center\">\n      <div className=\"dc:text-xs dc:font-semibold text-dc-text-primary dc:mb-2\">\n        {seriesLabel}\n      </div>\n      <div className=\"dc:flex dc:items-center dc:gap-2\">\n        <span className=\"dc:text-xs text-dc-text-muted\">\n          {formatSeriesValue(min, leftYAxisFormat)}\n        </span>\n        <div\n          className=\"dc:h-4 dc:rounded-sm\"\n          style={{\n            width: '200px',\n            background: `linear-gradient(to right, ${CHART_COLORS_GRADIENT.join(', ')})`\n          }}\n        />\n        <span className=\"dc:text-xs text-dc-text-muted\">\n          {formatSeriesValue(max, leftYAxisFormat)}\n        </span>\n      </div>\n    </div>\n  )\n}\n\n/** Discrete swatch legend for a categorical series field. */\nfunction CategoricalLegend({ legendPayload }: { legendPayload: LegendEntry[] }) {\n  return (\n    <div className=\"dc:flex dc:flex-wrap dc:justify-center dc:gap-4\">\n      {legendPayload.map((item, index) => (\n        <div key={index} className=\"dc:flex dc:items-center dc:gap-2\">\n          <div className=\"dc:w-3 dc:h-3 rounded-xs\" style={{ backgroundColor: item.color }} />\n          <span className=\"dc:text-xs text-dc-text-muted\">{item.value}</span>\n        </div>\n      ))}\n    </div>\n  )\n}\n\n/** Treemap legend wrapper — gradient for numeric series, swatches otherwise. */\nexport function TreeMapLegend({\n  isNumericSeries,\n  seriesField,\n  seriesLabel,\n  legendPayload,\n  data,\n  leftYAxisFormat,\n}: TreeMapLegendProps) {\n  return (\n    <div className=\"dc:flex dc:justify-center dc:items-center dc:mt-4 dc:pb-2\">\n      {isNumericSeries && seriesField ? (\n        <NumericLegend\n          seriesLabel={seriesLabel}\n          data={data}\n          seriesField={seriesField}\n          leftYAxisFormat={leftYAxisFormat}\n        />\n      ) : (\n        <CategoricalLegend legendPayload={legendPayload} />\n      )}\n    </div>\n  )\n}\n","import React, { useState } from 'react'\nimport { useTranslation } from '../../hooks/useTranslation'\nimport { Treemap } from 'recharts'\nimport ChartContainer from './ChartContainer'\nimport ChartTooltip from './ChartTooltip'\nimport { ChartEmptyState, ChartConfigError, ChartRenderError } from './ChartStates'\nimport { formatAxisValue } from '../../utils/chartUtils'\nimport { useCubeFieldLabel } from '../../hooks/useCubeFieldLabel'\nimport {\n  buildTreemapData,\n  buildTreemapLegend,\n  adjustHeightForLegend\n} from './TreeMapChart.helpers'\nimport { makeTreeMapContent } from './TreeMapContent'\nimport { TreeMapLegend } from './TreeMapLegend'\nimport type { ChartProps } from '../../types'\n\nconst TreeMapChart = React.memo(function TreeMapChart({\n  data,\n  chartConfig,\n  displayConfig = {},\n  queryObject,\n  height = \"100%\",\n  colorPalette,\n  onDataPointClick,\n  drillEnabled\n}: ChartProps) {\n  const { t } = useTranslation()\n  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)\n  // Use specialized hook to avoid re-renders from unrelated context changes\n  const getFieldLabel = useCubeFieldLabel()\n\n  try {\n    const safeDisplayConfig = {\n      showTooltip: displayConfig?.showTooltip ?? true,\n      showLegend: displayConfig?.showLegend ?? true,\n      leftYAxisFormat: displayConfig?.leftYAxisFormat\n    }\n\n    if (!data || data.length === 0) {\n      return <ChartEmptyState height={height} hint={t('chart.runtime.noDataHint.treemap')} />\n    }\n\n    // Build treemap rows (config or auto-detect) — null means no usable size field\n    const built = buildTreemapData(data, chartConfig, queryObject, colorPalette)\n    if (!built) {\n      return <ChartConfigError height={height} hint={t('chart.runtime.configErrorHint.treemapNumeric')} />\n    }\n\n    const { treemapData, isNumericSeries, seriesField } = built\n\n    if (treemapData.length === 0) {\n      return (\n        <ChartEmptyState\n          height={height}\n          titleKey=\"chart.runtime.noValidData\"\n          hint=\"No valid data points for treemap chart after transformation\"\n        />\n      )\n    }\n\n    // Custom content renderer for treemap cells with HTML overlays\n    const CustomizedContent = makeTreeMapContent({\n      treemapData,\n      colorPalette,\n      hoveredIndex,\n      setHoveredIndex,\n      leftYAxisFormat: safeDisplayConfig.leftYAxisFormat,\n      drillEnabled,\n      onDataPointClick,\n      queryObject,\n      chartConfig\n    })\n\n    // Build legend payload (gradient for numeric series, swatches otherwise)\n    const legendPayload = buildTreemapLegend(\n      data,\n      treemapData,\n      safeDisplayConfig.showLegend,\n      seriesField,\n      isNumericSeries,\n      safeDisplayConfig.leftYAxisFormat\n    )\n\n    const hasLegend = safeDisplayConfig.showLegend && legendPayload.length > 0\n    const adjustedHeight = adjustHeightForLegend(height, hasLegend)\n\n    return (\n      <div className=\"dc:w-full\" style={{ height: adjustedHeight }}>\n        <ChartContainer height={hasLegend ? `calc(100% - 50px)` : \"100%\"}>\n          <Treemap\n            data={treemapData}\n            dataKey=\"size\"\n            aspectRatio={4 / 3}\n            stroke=\"#fff\"\n            content={<CustomizedContent />}\n          >\n            {safeDisplayConfig.showTooltip && (\n              <ChartTooltip\n                formatter={safeDisplayConfig.leftYAxisFormat\n                  ? (value: any, name: string) => [formatAxisValue(value, safeDisplayConfig.leftYAxisFormat), name]\n                  : undefined\n                }\n              />\n            )}\n          </Treemap>\n        </ChartContainer>\n\n        {/* Custom Legend outside ChartContainer */}\n        {hasLegend && (\n          <TreeMapLegend\n            isNumericSeries={isNumericSeries}\n            seriesField={seriesField}\n            seriesLabel={seriesField ? getFieldLabel(seriesField) : ''}\n            legendPayload={legendPayload}\n            data={data}\n            leftYAxisFormat={safeDisplayConfig.leftYAxisFormat}\n          />\n        )}\n      </div>\n    )\n  } catch (error) {\n    // 'TreeMapChart rendering error\n    return <ChartRenderError height={height} chartType=\"TreeMap Chart\" error={error} />\n  }\n})\n\nexport default TreeMapChart\n"],"mappings":";;;;;;;;AAqBA,SAAS,EAAU,GAA8C;CAE/D,OADK,IACE,MAAM,QAAQ,CAAK,IAAI,EAAM,KAAK,IADtB;AAErB;AAGA,SAAS,EAAS,GAAwB;CACxC,OAAO,OAAO,KAAU,WAAW,WAAW,CAAK,IAAM,KAAoB;AAC/E;AAGA,SAAS,EAAa,GAAwB;CAC5C,OAAO,OAAO,KAAU,WAAW,WAAW,CAAK,IAAK;AAC1D;AASA,SAAS,EACP,GACA,GACA,GACA,GACoB;CACpB,IAAM,IAAa,EAAU,EAAY,KAAK,GACxC,IAAa,EAAU,EAAY,KAAK,GACxC,IAAc,MAAM,QAAQ,EAAY,MAAM,IAAI,EAAY,OAAO,KAAK,EAAY,QACtF,IAAc,EAAoB,GAAa,CAAU,GAEzD,KAAU,MACd,EAAgB,EAAK,IAAa,CAAW,KAAK,OAAO,EAAK,EAAW,KAAK;CAEhF,IAAI,CAAC,GAQH,OAAO;EAAE,aANW,EAAK,KAAK,GAAM,OAAW;GAC7C,MAAM,EAAO,CAAI;GACjB,MAAM,EAAS,EAAK,EAAW;GAC/B,MAAO,GAAc,UAAU,EAAa,OAAO,IAAQ,EAAa,OAAO,WAC7E,EAAa,IAAQ,EAAa;EACtC,EACS;EAAa,iBAAiB;EAAO;CAAY;CAI5D,IAAM,IAAe,EAClB,KAAK,MAAS,EAAa,EAAK,EAAY,CAAC,EAC7C,QAAQ,MAAQ,CAAC,MAAM,CAAG,CAAC,GACxB,IACJ,EAAa,WAAW,EAAK,UAAU,EAAa,OAAO,MAAQ,OAAO,KAAQ,QAAQ;CAE5F,IAAI,GAAiB;EACnB,IAAM,IAAa,EAAsB,EACtC,OAAO,CAAC,KAAK,IAAI,GAAG,CAAY,GAAG,KAAK,IAAI,GAAG,CAAY,CAAC,CAAC,EAC7D,MAAM,CAAqB;EAO9B,OAAO;GAAE,aANW,EAAK,KAAK,OAAU;IACtC,MAAM,EAAO,CAAI;IACjB,MAAM,EAAS,EAAK,EAAW;IAC/B,MAAM,EAAW,EAAa,EAAK,EAAY,CAAC;IAChD,QAAQ,OAAO,EAAK,EAAY;GAClC,EACS;GAAa;GAAiB;EAAY;CACrD;CAEA,IAAM,IAAqB,CAAC,GAAG,IAAI,IAAI,EAAK,KAAK,MAAS,OAAO,EAAK,EAAY,CAAC,CAAC,CAAC,GAC/E,IAAa,EAAqB,EACrC,OAAO,CAAkB,EACzB,MAAM,GAAc,UAAU,CAAY;CAO7C,OAAO;EAAE,aANW,EAAK,KAAK,OAAU;GACtC,MAAM,EAAO,CAAI;GACjB,MAAM,EAAS,EAAK,EAAW;GAC/B,MAAM,EAAW,OAAO,EAAK,EAAY,CAAC;GAC1C,QAAQ,OAAO,EAAK,EAAY;EAClC,EACS;EAAa;EAAiB;CAAY;AACrD;AAGA,SAAS,EAAW,GAAwB;CAG1C,OAFI,OAAO,KAAU,YAAkB,IAAQ,WAAW,aACtD,MAAU,UAAU,MAAU,UAAgB,MAAU,SAAS,WAAW,aACzE,OAAO,CAAK;AACrB;AAGA,SAAS,EACP,GACA,GAC2B;CAC3B,IAAM,IAAW,EAAK,IAChB,IAAO,OAAO,KAAK,CAAQ,GAE3B,IACJ,EAAK,MACF,MACC,OAAO,EAAS,MAAS,YACzB,EAAI,YAAY,EAAE,SAAS,MAAM,KACjC,EAAI,YAAY,EAAE,SAAS,OAAO,KAClC,EAAI,YAAY,EAAE,SAAS,UAAU,CACzC,KAAK,EAAK,IAEN,IACJ,EAAK,MAAM,MAAQ,EAAI,YAAY,EAAE,SAAS,MAAM,CAAC,KACrD,EAAK,MAAM,MAAQ,OAAO,EAAS,MAAS,YAAY,MAAQ,CAAS,KACzE,EAAK;CAUP,OARK,IAQE;EAAE,aANW,EAAK,KAAK,GAAM,OAAW;GAC7C,MAAM,EAAW,EAAK,EAAU;GAChC,MAAM,EAAS,EAAK,EAAU;GAC9B,MAAO,GAAc,UAAU,EAAa,OAAO,IAAQ,EAAa,OAAO,WAC7E,EAAa,IAAQ,EAAa;EACtC,EACS;EAAa,iBAAiB;EAAO,aAAa,KAAA;CAAU,IAR9C;AASzB;AAMA,SAAgB,EACd,GACA,GACA,GACA,GAC2B;CAC3B,IAAM,IACJ,GAAa,SAAS,GAAa,QAC/B,EAAgB,GAAM,GAAa,GAAa,CAAY,IAC5D,EAAoB,GAAM,CAAY;CAI5C,OAFK,IAEE;EACL,GAAG;EACH,aAAa,EAAO,YAAY,QAAQ,MAAS,EAAK,QAAQ,QAAQ,EAAK,OAAO,CAAC;CACrF,IALoB;AAMtB;AAGA,SAAgB,EACd,GACA,GAC8B;CAC9B,IAAM,IAAS,EAAK,KAAK,MAAS,EAAa,EAAK,EAAY,CAAC;CACjE,OAAO;EAAE,KAAK,KAAK,IAAI,GAAG,CAAM;EAAG,KAAK,KAAK,IAAI,GAAG,CAAM;CAAE;AAC9D;AAGA,SAAgB,EAAkB,GAAe,GAA8C;CAC7F,OAAO,IAAS,EAAgB,GAAO,CAAM,IAAI,EAAM,QAAQ,CAAC;AAClE;AAYA,SAAgB,EACd,GACA,GACA,GACA,GACA,GACA,GACe;CACf,IAAI,CAAC,KAAc,CAAC,GAAa,OAAO,CAAC;CAEzC,IAAI,GAAiB;EACnB,IAAM,EAAE,QAAK,WAAQ,EAAa,GAAM,CAAW;EACnD,OAAO,EAAsB,KAAK,GAAO,MAAU;GACjD,IAAM,IAAQ,KAAS,EAAsB,SAAS;GAEtD,OAAO;IAAE,OAAO,EADF,KAAO,IAAM,KAAO,GACO,CAAe;IAAG,MAAM;IAAiB;GAAM;EAC1F,CAAC;CACH;CAEA,IAAM,IAAe,CAAC,GAAG,IAAI,IAAI,EAAY,KAAK,MAAS,EAAK,MAAM,EAAE,OAAO,OAAO,CAAC,CAAC;CAQxF,OAPI,EAAa,SAAS,IACjB,EAAa,KAAK,GAAQ,OAAW;EAC1C,OAAO;EACP,MAAM;EACN,OAAO,EAAa,IAAQ,EAAa;CAC3C,EAAE,IAEG,CAAC;AACV;AAGA,SAAgB,EACd,GACA,GACiB;CAIjB,OAHI,CAAC,KACD,OAAO,KAAW,YAAY,EAAO,SAAS,GAAG,IAAU,IAC3D,OAAO,KAAW,WAAiB,IAAS,KACzC,QAAQ,EAAO;AACxB;;;AC/MA,SAAS,EAAY,GAA6B,GAAuB;CAEvE,OADI,MAAiB,OAAa,KAC3B,MAAiB,IAAQ,IAAI;AACtC;AAGA,SAAS,EAAW,GAAe,GAA8C;CAE/E,OADI,IAAe,EAAgB,GAAgB,CAAM,IAClD,OAAO,KAAS,WAAW,EAAK,eAAe,IAAI,OAAO,CAAI;AACvE;AASA,SAAgB,EAAmB,EACjC,gBACA,iBACA,iBACA,oBACA,oBACA,iBACA,qBACA,gBACA,kBACwB;CACxB,OAAO,SAA2B,GAAY;EAC5C,IAAM,EAAE,MAAG,MAAG,UAAO,WAAQ,UAAO,SAAM,YAAS;EAyBnD,OAvBI,IAAQ,MAAM,IAAS,KAAW,OAwBpC,kBAAC,KAAD,EAAA,UAAA,CACE,kBAAC,QAAD;GACK;GACA;GACI;GACC;GACR,OAAO;IACL,MAZN,EAAY,IAAQ,QAClB,GAAc,UAAU,EAAa,OAAO,IAAQ,EAAa,OAAO,WACxE,EAAa,IAAQ,EAAa;IAW9B,aAAa,EAAY,GAAc,CAAK;IAC5C,QAAQ;IACR,aAAa;IACb,QAAQ,IAAe,YAAY;IACnC,eAAe;GACjB;GACA,oBAAoB,EAAgB,CAAK;GACzC,oBAAoB,EAAgB,IAAI;GACxC,SAAS,KAAgB,KAtCV,MAA4B;IAC/C,EAAM,gBAAgB;IACtB,IAAM,IAAW,EAAY;IAC7B,AAAI,KAAY,KAGd,EAAiB;KACf,WAAW;KACX,cAHmB,GAAa,WAAW,MAAM,GAAa,QAAQ,MAAM;KAI5E,QAAQ;KACR,UAAU;MAAE,GAAG,EAAM;MAAS,GAAG,EAAM;KAAQ;KAC/C,aAAa;IACf,CAAC;GAEL,IAwBgE,KAAA;EAC3D,CAAA,GACD,kBAAC,iBAAD;GACK;GACA;GACI;GACC;GACR,OAAO;IAAE,eAAe;IAAQ,UAAU;GAAU;aAEpD,kBAAC,OAAD;IACE,OAAO;KACL,OAAO;KACP,QAAQ;KACR,SAAS;KACT,eAAe;KACf,YAAY;KACZ,gBAAgB;KAChB,SAAS;KACT,WAAW;KACX,OAAO;KACP,YAAY;KACZ,YAAY;KACZ,UAAU;IACZ;cAdF,CAgBG,IAAQ,MAAM,IAAS,MACtB,kBAAC,OAAD;KACE,OAAO;MACL,UAAU,GAAG,KAAK,IAAI,IAAI,KAAK,IAAI,IAAQ,GAAG,IAAS,GAAG,EAAE,CAAC,EAAE;MAC/D,YAAY;MACZ,WAAW;MACX,YAAY;MACZ,cAAc,IAAQ,MAAM,IAAS,KAAK,QAAQ;MAClD,WAAW;MACX,SAAS;KACX;eAEC;IACE,CAAA,GAEN,IAAQ,MAAM,IAAS,MACtB,kBAAC,OAAD;KACE,OAAO;MACL,UAAU,GAAG,KAAK,IAAI,GAAG,KAAK,IAAI,IAAQ,IAAI,IAAS,IAAI,EAAE,CAAC,EAAE;MAChE,WAAW;MACX,SAAS;KACX;eAEC,EAAW,GAAM,CAAe;IAC9B,CAAA,CAEJ;;EACQ,CAAA,CACd,EAAA,CAAA;CAEP;AACF;;;AClIA,SAAS,EAAc,EACrB,gBACA,SACA,gBACA,sBAMC;CACD,IAAM,EAAE,QAAK,WAAQ,EAAa,GAAM,CAAW;CACnD,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aACZ;EACE,CAAA,GACL,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,QAAD;KAAM,WAAU;eACb,EAAkB,GAAK,CAAe;IACnC,CAAA;IACN,kBAAC,OAAD;KACE,WAAU;KACV,OAAO;MACL,OAAO;MACP,YAAY,6BAA6B,EAAsB,KAAK,IAAI,EAAE;KAC5E;IACD,CAAA;IACD,kBAAC,QAAD;KAAM,WAAU;eACb,EAAkB,GAAK,CAAe;IACnC,CAAA;GACH;IACF;;AAET;AAGA,SAAS,EAAkB,EAAE,oBAAmD;CAC9E,OACE,kBAAC,OAAD;EAAK,WAAU;YACZ,EAAc,KAAK,GAAM,MACxB,kBAAC,OAAD;GAAiB,WAAU;aAA3B,CACE,kBAAC,OAAD;IAAK,WAAU;IAA2B,OAAO,EAAE,iBAAiB,EAAK,MAAM;GAAI,CAAA,GACnF,kBAAC,QAAD;IAAM,WAAU;cAAiC,EAAK;GAAY,CAAA,CAC/D;KAHK,CAGL,CACN;CACE,CAAA;AAET;AAGA,SAAgB,EAAc,EAC5B,oBACA,gBACA,gBACA,kBACA,SACA,sBACqB;CACrB,OACE,kBAAC,OAAD;EAAK,WAAU;YACZ,KAAmB,IAClB,kBAAC,GAAD;GACe;GACP;GACO;GACI;EAClB,CAAA,IAED,kBAAC,GAAD,EAAkC,iBAAgB,CAAA;CAEjD,CAAA;AAET;;;iDC1EM,IAAe,EAAM,KAAK,SAAsB,EACpD,SACA,gBACA,mBAAgB,CAAC,GACjB,gBACA,YAAS,QACT,iBACA,qBACA,mBACa;CACb,IAAM,EAAE,SAAM,EAAe,GACvB,CAAC,GAAc,KAAmB,EAAwB,IAAI,GAE9D,IAAgB,EAAkB;CAExC,IAAI;EACF,IAAM,IAAoB;GACxB,aAAa,GAAe,eAAe;GAC3C,YAAY,GAAe,cAAc;GACzC,iBAAiB,GAAe;EAClC;EAEA,IAAI,CAAC,KAAQ,EAAK,WAAW,GAC3B,OAAO,kBAAC,GAAD;GAAyB;GAAQ,MAAM,EAAE,kCAAkC;EAAI,CAAA;EAIxF,IAAM,IAAQ,EAAiB,GAAM,GAAa,GAAa,CAAY;EAC3E,IAAI,CAAC,GACH,OAAO,kBAAC,GAAD;GAA0B;GAAQ,MAAM,EAAE,8CAA8C;EAAI,CAAA;EAGrG,IAAM,EAAE,gBAAa,oBAAiB,mBAAgB;EAEtD,IAAI,EAAY,WAAW,GACzB,OACE,kBAAC,GAAD;GACU;GACR,UAAS;GACT,MAAK;EACN,CAAA;EAKL,IAAM,IAAoB,EAAmB;GAC3C;GACA;GACA;GACA;GACA,iBAAiB,EAAkB;GACnC;GACA;GACA;GACA;EACF,CAAC,GAGK,IAAgB,EACpB,GACA,GACA,EAAkB,YAClB,GACA,GACA,EAAkB,eACpB,GAEM,IAAY,EAAkB,cAAc,EAAc,SAAS;EAGzE,OACE,kBAAC,OAAD;GAAK,WAAU;GAAY,OAAO,EAAE,QAHf,EAAsB,GAAQ,CAGP,EAAe;aAA3D,CACE,kBAAC,GAAD;IAAgB,QAAQ,IAAY,sBAAsB;cACxD,kBAAC,GAAD;KACE,MAAM;KACN,SAAQ;KACR,aAAa,IAAI;KACjB,QAAO;KACP,SAAS,kBAAC,GAAD,CAAoB,CAAA;eAE5B,EAAkB,eACjB,kBAAC,GAAD,EACE,WAAW,EAAkB,mBACxB,GAAY,MAAiB,CAAC,EAAgB,GAAO,EAAkB,eAAe,GAAG,CAAI,IAC9F,KAAA,EAEL,CAAA;IAEI,CAAA;GACK,CAAA,GAGf,KACC,kBAAC,GAAD;IACmB;IACJ;IACb,aAAa,IAAc,EAAc,CAAW,IAAI;IACzC;IACT;IACN,iBAAiB,EAAkB;GACpC,CAAA,CAEA;;CAET,SAAS,GAAO;EAEd,OAAO,kBAAC,GAAD;GAA0B;GAAQ,WAAU;GAAuB;EAAQ,CAAA;CACpF;AACF,CAAC"}

package/dist/client/chunks/{chart-waterfall-DcHbbPaG.js → chart-waterfall-DyvQReN5.js}

@@ -1,6 +1,6 @@
 import { n as e } from "./rolldown-runtime-CWhphoD1.js";
-import { _ as t, i as n, k as r, y as i } from "./chart-activity-grid-CiHrLH6Y.js";
-import { c as a, l as o, s } from "./chart-area-CXFK-Grv.js";
+import { P as t, S as n, l as r, w as i } from "./chart-activity-grid-DX0SJbxs.js";
+import { C as a, T as o, w as s } from "./chart-area-of01_62R.js";
 import c, { useMemo as l } from "react";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 import { Bar as f, CartesianGrid as p, Cell as m, ComposedChart as h, LabelList as g, Legend as _, Line as v, XAxis as y, YAxis as b } from "recharts";
@@ -47,7 +47,7 @@ function D(e) {
 	});
 }
 var O = c.memo(function({ data: e, chartConfig: c, displayConfig: x = {}, height: O = "100%", onDataPointClick: k, drillEnabled: A }) {
-	let { t: j } = r(), M = t(), N = x?.showTotal ?? !0, P = x?.showConnectorLine ?? !0, F = x?.showDataLabels ?? !1, I = x?.leftYAxisFormat, { xAxisField: L, yAxisField: R, configError: z } = l(() => {
+	let { t: j } = t(), M = n(), N = x?.showTotal ?? !0, P = x?.showConnectorLine ?? !0, F = x?.showDataLabels ?? !1, I = x?.leftYAxisFormat, { xAxisField: L, yAxisField: R, configError: z } = l(() => {
 		let e = Array.isArray(c?.xAxis) ? c.xAxis[0] : c?.x, t = Array.isArray(c?.yAxis) ? c.yAxis[0] : c?.y?.[0];
 		return {
 			xAxisField: e,
@@ -106,7 +106,7 @@ var O = c.memo(function({ data: e, chartConfig: c, displayConfig: x = {}, height
 				children: /* @__PURE__ */ d(h, {
 					data: H,
 					margin: {
-						...n,
+						...r,
 						left: 40
 					},
 					accessibilityLayer: !1,
@@ -118,14 +118,14 @@ var O = c.memo(function({ data: e, chartConfig: c, displayConfig: x = {}, height
 						/* @__PURE__ */ u(y, {
 							dataKey: "label",
 							type: "category",
-							tick: /* @__PURE__ */ u(s, {}),
+							tick: /* @__PURE__ */ u(a, {}),
 							height: 60
 						}),
 						/* @__PURE__ */ u(b, {
 							tick: { fontSize: 12 },
 							tickFormatter: I ? (e) => i(e, I) : void 0
 						}),
-						/* @__PURE__ */ u(a, {
+						/* @__PURE__ */ u(s, {
 							formatter: (e, t, n) => {
 								if (t === "_connector") return ["", ""];
 								let r = n?.payload;
@@ -234,4 +234,4 @@ var O = c.memo(function({ data: e, chartConfig: c, displayConfig: x = {}, height
 //#endregion
 export { x as t };
 
-//# sourceMappingURL=chart-waterfall-DcHbbPaG.js.map
+//# sourceMappingURL=chart-waterfall-DyvQReN5.js.map

package/dist/client/chunks/{chart-waterfall-DcHbbPaG.js.map → chart-waterfall-DyvQReN5.js.map}

@@ -1 +1 @@
-{"version":3,"file":"chart-waterfall-DcHbbPaG.js","names":[],"sources":["../../../src/client/components/charts/WaterfallChart.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport { useTranslation } from '../../hooks/useTranslation'\nimport { ComposedChart, Bar, Line, XAxis, YAxis, CartesianGrid, Cell, LabelList, Legend } from 'recharts'\nimport ChartContainer from './ChartContainer'\nimport ChartTooltip from './ChartTooltip'\nimport AngledXAxisTick from './AngledXAxisTick'\nimport { CHART_MARGINS } from '../../utils/chartConstants'\nimport { formatAxisValue } from '../../utils/chartUtils'\nimport { useCubeFieldLabel } from '../../hooks/useCubeFieldLabel'\nimport type { ChartProps } from '../../types'\n\nconst POSITIVE_COLOR = '#22c55e'\nconst NEGATIVE_COLOR = '#ef4444'\nconst TOTAL_COLOR = '#6366f1'\nconst CONNECTOR_COLOR = '#94a3b8'\n\ninterface WaterfallDataPoint {\n  label: string\n  value: number\n  runningBase: number\n  isTotal: boolean\n  isNegative: boolean\n  displayValue: number\n  originalIndex: number\n}\n\nfunction transformToWaterfall(\n  data: Record<string, unknown>[],\n  xField: string,\n  yField: string,\n  showTotal: boolean,\n  getFieldLabel: (field: string) => string\n): WaterfallDataPoint[] {\n  let running = 0\n  const result: WaterfallDataPoint[] = data.map((row, i) => {\n    const label = String(row[xField] ?? `Row ${i + 1}`)\n    const rawValue = row[yField]\n    const parsed = typeof rawValue === 'number' ? rawValue : parseFloat(String(rawValue ?? ''))\n    const value = isNaN(parsed) ? 0 : parsed\n    const isNegative = value < 0\n    const base = isNegative ? running + value : running\n    const point: WaterfallDataPoint = {\n      label,\n      value: Math.abs(value),\n      runningBase: base,\n      isTotal: false,\n      isNegative,\n      displayValue: value,\n      originalIndex: i,\n    }\n    running += value\n    return point\n  })\n\n  if (showTotal) {\n    const totalLabel = getFieldLabel(yField) || 'Total'\n    result.push({\n      label: totalLabel,\n      value: Math.abs(running),\n      runningBase: running >= 0 ? 0 : running,\n      isTotal: true,\n      isNegative: running < 0,\n      displayValue: running,\n      originalIndex: result.length,\n    })\n  }\n\n  return result\n}\n\ninterface ValueLabelProps {\n  x?: number\n  y?: number\n  width?: number\n  value?: number\n  isNegative?: boolean\n  displayValue?: number\n}\n\nfunction ValueLabel(props: ValueLabelProps) {\n  const { x = 0, y = 0, width = 0, value = 0, isNegative, displayValue } = props\n  if (displayValue === undefined || displayValue === null) return null\n  const numericValue = Number(displayValue)\n  const isNeg = isNegative || numericValue < 0\n  const yPos = isNeg ? y + value + 14 : y - 6\n  return (\n    <text\n      x={x + width / 2}\n      y={yPos}\n      fill=\"currentColor\"\n      textAnchor=\"middle\"\n      fontSize={11}\n    >\n      {numericValue >= 0 ? '+' : ''}{numericValue.toLocaleString()}\n    </text>\n  )\n}\n\nconst WaterfallChart = React.memo(function WaterfallChart({\n  data,\n  chartConfig,\n  displayConfig = {},\n  height = '100%',\n  onDataPointClick,\n  drillEnabled,\n}: ChartProps) {\n  const { t } = useTranslation()\n  const getFieldLabel = useCubeFieldLabel()\n\n  const showTotal = displayConfig?.showTotal ?? true\n  const showConnectorLine = displayConfig?.showConnectorLine ?? true\n  const showDataLabels = displayConfig?.showDataLabels ?? false\n  const yAxisFormat = displayConfig?.leftYAxisFormat\n\n  const { xAxisField, yAxisField, configError } = useMemo(() => {\n    const xAxisField: string | undefined = Array.isArray(chartConfig?.xAxis)\n      ? chartConfig.xAxis[0]\n      : chartConfig?.x\n    const yAxisField: string | undefined = Array.isArray(chartConfig?.yAxis)\n      ? chartConfig.yAxis[0]\n      : chartConfig?.y?.[0]\n    const configError =\n      !xAxisField || !yAxisField\n        ? 'Waterfall chart requires an X-axis dimension and a Y-axis measure'\n        : null\n    return { xAxisField, yAxisField, configError }\n  }, [chartConfig])\n\n  const waterfallData = useMemo(() => {\n    if (configError || !data || data.length === 0 || !xAxisField || !yAxisField) return []\n    return transformToWaterfall(\n      data as Record<string, unknown>[],\n      xAxisField,\n      yAxisField,\n      showTotal,\n      getFieldLabel\n    )\n  }, [data, xAxisField, yAxisField, showTotal, getFieldLabel, configError])\n\n  const connectorData = useMemo(() => {\n    if (!showConnectorLine || waterfallData.length === 0) return []\n    return waterfallData.map((d) => {\n      const connectorY = d.isNegative ? d.runningBase : d.runningBase + d.value\n      return { label: d.label, _connector: connectorY }\n    })\n  }, [waterfallData, showConnectorLine])\n\n  const chartData = useMemo(() => {\n    return waterfallData.map((d, i) => ({\n      ...d,\n      _connector: connectorData[i]?._connector,\n    }))\n  }, [waterfallData, connectorData])\n\n  try {\n    if (!data || data.length === 0) {\n      return (\n        <div className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted\" style={{ height }}>\n          <div className=\"dc:text-center\">\n            <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">{t('chart.runtime.noData')}</div>\n            <div className=\"dc:text-xs text-dc-text-secondary\">{t('chart.runtime.noDataHint.waterfall')}</div>\n          </div>\n        </div>\n      )\n    }\n\n    if (configError) {\n      return (\n        <div className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-warning\" style={{ height }}>\n          <div className=\"dc:text-center\">\n            <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">{t('chart.runtime.configError')}</div>\n            <div className=\"dc:text-xs\">{configError}</div>\n          </div>\n        </div>\n      )\n    }\n    return (\n      <div className=\"dc:relative dc:w-full\" style={{ height }}>\n        <ChartContainer height=\"100%\">\n          <ComposedChart data={chartData} margin={{ ...CHART_MARGINS, left: 40 }} accessibilityLayer={false}>\n            <CartesianGrid strokeDasharray=\"3 3\" style={{ pointerEvents: 'none' }} />\n            <XAxis dataKey=\"label\" type=\"category\" tick={<AngledXAxisTick />} height={60} />\n            <YAxis\n              tick={{ fontSize: 12 }}\n              tickFormatter={yAxisFormat ? (v) => formatAxisValue(v, yAxisFormat) : undefined}\n            />\n            <ChartTooltip\n              formatter={(value: any, name: any, props: any) => {\n                if (name === '_connector') return ['', '']\n                const entry = props?.payload\n                if (!entry) return [value, name]\n                const displayValue = entry.displayValue ?? value\n                return [\n                  yAxisFormat ? formatAxisValue(displayValue, yAxisFormat) : displayValue?.toLocaleString?.() ?? displayValue,\n                  entry.isTotal ? 'Total' : entry.isNegative ? 'Decrease' : 'Increase',\n                ]\n              }}\n              labelFormatter={(label: string) => label}\n            />\n            <Legend\n              wrapperStyle={{ fontSize: '12px', paddingTop: '8px' }}\n              {...{\n                payload: [\n                  { value: 'Increase', type: 'rect' as const, color: POSITIVE_COLOR },\n                  { value: 'Decrease', type: 'rect' as const, color: NEGATIVE_COLOR },\n                  ...(showTotal ? [{ value: 'Total', type: 'rect' as const, color: TOTAL_COLOR }] : []),\n                ],\n              }}\n            />\n            <Bar dataKey=\"runningBase\" stackId=\"wf\" fill=\"transparent\" legendType=\"none\" isAnimationActive={false} />\n            <Bar\n              dataKey=\"value\"\n              stackId=\"wf\"\n              isAnimationActive={false}\n              cursor={drillEnabled ? 'pointer' : undefined}\n              onClick={(barData: any, _index: number, event: React.MouseEvent) => {\n                if (onDataPointClick && drillEnabled && barData && !barData.isTotal) {\n                  onDataPointClick({\n                    dataPoint: barData,\n                    clickedField: yAxisField!,\n                    xValue: barData.label,\n                    position: { x: event.clientX, y: event.clientY },\n                    nativeEvent: event,\n                  })\n                }\n              }}\n            >\n              {showDataLabels && (\n                <LabelList\n                  dataKey=\"displayValue\"\n                  content={(props: any) => (\n                    <ValueLabel\n                      {...props}\n                      runningBase={chartData[props.index]?.runningBase}\n                      isNegative={chartData[props.index]?.isNegative}\n                      displayValue={chartData[props.index]?.displayValue}\n                    />\n                  )}\n                />\n              )}\n              {chartData.map((entry, index) => (\n                <Cell\n                  key={`cell-${index}`}\n                  fill={entry.isTotal ? TOTAL_COLOR : entry.isNegative ? NEGATIVE_COLOR : POSITIVE_COLOR}\n                />\n              ))}\n            </Bar>\n            {showConnectorLine && (\n              <Line\n                type=\"stepAfter\"\n                dataKey=\"_connector\"\n                stroke={CONNECTOR_COLOR}\n                strokeWidth={1.5}\n                strokeDasharray=\"4 2\"\n                dot={false}\n                activeDot={false}\n                legendType=\"none\"\n                isAnimationActive={false}\n              />\n            )}\n          </ComposedChart>\n        </ChartContainer>\n      </div>\n    )\n  } catch (error) {\n    return (\n      <div className=\"dc:flex dc:flex-col dc:items-center dc:justify-center dc:w-full text-dc-error dc:p-4\" style={{ height }}>\n        <div className=\"dc:text-center\">\n          <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">{t('chart.runtime.chartError', { chartType: 'Waterfall Chart' })}</div>\n          <div className=\"dc:text-xs dc:mb-2\">{error instanceof Error ? error.message : t('chart.runtime.unknownError')}</div>\n          <div className=\"dc:text-xs text-dc-text-muted\">{t('chart.runtime.checkConfig')}</div>\n        </div>\n      </div>\n    )\n  }\n})\n\nexport default WaterfallChart\n"],"mappings":"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"}
+{"version":3,"file":"chart-waterfall-DyvQReN5.js","names":[],"sources":["../../../src/client/components/charts/WaterfallChart.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport { useTranslation } from '../../hooks/useTranslation'\nimport { ComposedChart, Bar, Line, XAxis, YAxis, CartesianGrid, Cell, LabelList, Legend } from 'recharts'\nimport ChartContainer from './ChartContainer'\nimport ChartTooltip from './ChartTooltip'\nimport AngledXAxisTick from './AngledXAxisTick'\nimport { CHART_MARGINS } from '../../utils/chartConstants'\nimport { formatAxisValue } from '../../utils/chartUtils'\nimport { useCubeFieldLabel } from '../../hooks/useCubeFieldLabel'\nimport type { ChartProps } from '../../types'\n\nconst POSITIVE_COLOR = '#22c55e'\nconst NEGATIVE_COLOR = '#ef4444'\nconst TOTAL_COLOR = '#6366f1'\nconst CONNECTOR_COLOR = '#94a3b8'\n\ninterface WaterfallDataPoint {\n  label: string\n  value: number\n  runningBase: number\n  isTotal: boolean\n  isNegative: boolean\n  displayValue: number\n  originalIndex: number\n}\n\nfunction transformToWaterfall(\n  data: Record<string, unknown>[],\n  xField: string,\n  yField: string,\n  showTotal: boolean,\n  getFieldLabel: (field: string) => string\n): WaterfallDataPoint[] {\n  let running = 0\n  const result: WaterfallDataPoint[] = data.map((row, i) => {\n    const label = String(row[xField] ?? `Row ${i + 1}`)\n    const rawValue = row[yField]\n    const parsed = typeof rawValue === 'number' ? rawValue : parseFloat(String(rawValue ?? ''))\n    const value = isNaN(parsed) ? 0 : parsed\n    const isNegative = value < 0\n    const base = isNegative ? running + value : running\n    const point: WaterfallDataPoint = {\n      label,\n      value: Math.abs(value),\n      runningBase: base,\n      isTotal: false,\n      isNegative,\n      displayValue: value,\n      originalIndex: i,\n    }\n    running += value\n    return point\n  })\n\n  if (showTotal) {\n    const totalLabel = getFieldLabel(yField) || 'Total'\n    result.push({\n      label: totalLabel,\n      value: Math.abs(running),\n      runningBase: running >= 0 ? 0 : running,\n      isTotal: true,\n      isNegative: running < 0,\n      displayValue: running,\n      originalIndex: result.length,\n    })\n  }\n\n  return result\n}\n\ninterface ValueLabelProps {\n  x?: number\n  y?: number\n  width?: number\n  value?: number\n  isNegative?: boolean\n  displayValue?: number\n}\n\nfunction ValueLabel(props: ValueLabelProps) {\n  const { x = 0, y = 0, width = 0, value = 0, isNegative, displayValue } = props\n  if (displayValue === undefined || displayValue === null) return null\n  const numericValue = Number(displayValue)\n  const isNeg = isNegative || numericValue < 0\n  const yPos = isNeg ? y + value + 14 : y - 6\n  return (\n    <text\n      x={x + width / 2}\n      y={yPos}\n      fill=\"currentColor\"\n      textAnchor=\"middle\"\n      fontSize={11}\n    >\n      {numericValue >= 0 ? '+' : ''}{numericValue.toLocaleString()}\n    </text>\n  )\n}\n\nconst WaterfallChart = React.memo(function WaterfallChart({\n  data,\n  chartConfig,\n  displayConfig = {},\n  height = '100%',\n  onDataPointClick,\n  drillEnabled,\n}: ChartProps) {\n  const { t } = useTranslation()\n  const getFieldLabel = useCubeFieldLabel()\n\n  const showTotal = displayConfig?.showTotal ?? true\n  const showConnectorLine = displayConfig?.showConnectorLine ?? true\n  const showDataLabels = displayConfig?.showDataLabels ?? false\n  const yAxisFormat = displayConfig?.leftYAxisFormat\n\n  const { xAxisField, yAxisField, configError } = useMemo(() => {\n    const xAxisField: string | undefined = Array.isArray(chartConfig?.xAxis)\n      ? chartConfig.xAxis[0]\n      : chartConfig?.x\n    const yAxisField: string | undefined = Array.isArray(chartConfig?.yAxis)\n      ? chartConfig.yAxis[0]\n      : chartConfig?.y?.[0]\n    const configError =\n      !xAxisField || !yAxisField\n        ? 'Waterfall chart requires an X-axis dimension and a Y-axis measure'\n        : null\n    return { xAxisField, yAxisField, configError }\n  }, [chartConfig])\n\n  const waterfallData = useMemo(() => {\n    if (configError || !data || data.length === 0 || !xAxisField || !yAxisField) return []\n    return transformToWaterfall(\n      data as Record<string, unknown>[],\n      xAxisField,\n      yAxisField,\n      showTotal,\n      getFieldLabel\n    )\n  }, [data, xAxisField, yAxisField, showTotal, getFieldLabel, configError])\n\n  const connectorData = useMemo(() => {\n    if (!showConnectorLine || waterfallData.length === 0) return []\n    return waterfallData.map((d) => {\n      const connectorY = d.isNegative ? d.runningBase : d.runningBase + d.value\n      return { label: d.label, _connector: connectorY }\n    })\n  }, [waterfallData, showConnectorLine])\n\n  const chartData = useMemo(() => {\n    return waterfallData.map((d, i) => ({\n      ...d,\n      _connector: connectorData[i]?._connector,\n    }))\n  }, [waterfallData, connectorData])\n\n  try {\n    if (!data || data.length === 0) {\n      return (\n        <div className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-text-muted\" style={{ height }}>\n          <div className=\"dc:text-center\">\n            <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">{t('chart.runtime.noData')}</div>\n            <div className=\"dc:text-xs text-dc-text-secondary\">{t('chart.runtime.noDataHint.waterfall')}</div>\n          </div>\n        </div>\n      )\n    }\n\n    if (configError) {\n      return (\n        <div className=\"dc:flex dc:items-center dc:justify-center dc:w-full text-dc-warning\" style={{ height }}>\n          <div className=\"dc:text-center\">\n            <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">{t('chart.runtime.configError')}</div>\n            <div className=\"dc:text-xs\">{configError}</div>\n          </div>\n        </div>\n      )\n    }\n    return (\n      <div className=\"dc:relative dc:w-full\" style={{ height }}>\n        <ChartContainer height=\"100%\">\n          <ComposedChart data={chartData} margin={{ ...CHART_MARGINS, left: 40 }} accessibilityLayer={false}>\n            <CartesianGrid strokeDasharray=\"3 3\" style={{ pointerEvents: 'none' }} />\n            <XAxis dataKey=\"label\" type=\"category\" tick={<AngledXAxisTick />} height={60} />\n            <YAxis\n              tick={{ fontSize: 12 }}\n              tickFormatter={yAxisFormat ? (v) => formatAxisValue(v, yAxisFormat) : undefined}\n            />\n            <ChartTooltip\n              formatter={(value: any, name: any, props: any) => {\n                if (name === '_connector') return ['', '']\n                const entry = props?.payload\n                if (!entry) return [value, name]\n                const displayValue = entry.displayValue ?? value\n                return [\n                  yAxisFormat ? formatAxisValue(displayValue, yAxisFormat) : displayValue?.toLocaleString?.() ?? displayValue,\n                  entry.isTotal ? 'Total' : entry.isNegative ? 'Decrease' : 'Increase',\n                ]\n              }}\n              labelFormatter={(label: string) => label}\n            />\n            <Legend\n              wrapperStyle={{ fontSize: '12px', paddingTop: '8px' }}\n              {...{\n                payload: [\n                  { value: 'Increase', type: 'rect' as const, color: POSITIVE_COLOR },\n                  { value: 'Decrease', type: 'rect' as const, color: NEGATIVE_COLOR },\n                  ...(showTotal ? [{ value: 'Total', type: 'rect' as const, color: TOTAL_COLOR }] : []),\n                ],\n              }}\n            />\n            <Bar dataKey=\"runningBase\" stackId=\"wf\" fill=\"transparent\" legendType=\"none\" isAnimationActive={false} />\n            <Bar\n              dataKey=\"value\"\n              stackId=\"wf\"\n              isAnimationActive={false}\n              cursor={drillEnabled ? 'pointer' : undefined}\n              onClick={(barData: any, _index: number, event: React.MouseEvent) => {\n                if (onDataPointClick && drillEnabled && barData && !barData.isTotal) {\n                  onDataPointClick({\n                    dataPoint: barData,\n                    clickedField: yAxisField!,\n                    xValue: barData.label,\n                    position: { x: event.clientX, y: event.clientY },\n                    nativeEvent: event,\n                  })\n                }\n              }}\n            >\n              {showDataLabels && (\n                <LabelList\n                  dataKey=\"displayValue\"\n                  content={(props: any) => (\n                    <ValueLabel\n                      {...props}\n                      runningBase={chartData[props.index]?.runningBase}\n                      isNegative={chartData[props.index]?.isNegative}\n                      displayValue={chartData[props.index]?.displayValue}\n                    />\n                  )}\n                />\n              )}\n              {chartData.map((entry, index) => (\n                <Cell\n                  key={`cell-${index}`}\n                  fill={entry.isTotal ? TOTAL_COLOR : entry.isNegative ? NEGATIVE_COLOR : POSITIVE_COLOR}\n                />\n              ))}\n            </Bar>\n            {showConnectorLine && (\n              <Line\n                type=\"stepAfter\"\n                dataKey=\"_connector\"\n                stroke={CONNECTOR_COLOR}\n                strokeWidth={1.5}\n                strokeDasharray=\"4 2\"\n                dot={false}\n                activeDot={false}\n                legendType=\"none\"\n                isAnimationActive={false}\n              />\n            )}\n          </ComposedChart>\n        </ChartContainer>\n      </div>\n    )\n  } catch (error) {\n    return (\n      <div className=\"dc:flex dc:flex-col dc:items-center dc:justify-center dc:w-full text-dc-error dc:p-4\" style={{ height }}>\n        <div className=\"dc:text-center\">\n          <div className=\"dc:text-sm dc:font-semibold dc:mb-1\">{t('chart.runtime.chartError', { chartType: 'Waterfall Chart' })}</div>\n          <div className=\"dc:text-xs dc:mb-2\">{error instanceof Error ? error.message : t('chart.runtime.unknownError')}</div>\n          <div className=\"dc:text-xs text-dc-text-muted\">{t('chart.runtime.checkConfig')}</div>\n        </div>\n      </div>\n    )\n  }\n})\n\nexport default WaterfallChart\n"],"mappings":"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"}

package/dist/client/chunks/{charts-core-CrBDYN6N.js → charts-core-DaXSt1Dd.js}

@@ -1,4 +1,4 @@
-import { k as e, y as t } from "./chart-activity-grid-CiHrLH6Y.js";
+import { P as e, w as t } from "./chart-activity-grid-DX0SJbxs.js";
 import { useMemo as n } from "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/client/components/AnalysisBuilder/SectionHeading.tsx
@@ -212,4 +212,4 @@ function c({ value: s, onChange: c, axisLabel: l, previewValue: u = 125e4 }) {
 //#endregion
 export { a as n, c as t };
 
-//# sourceMappingURL=charts-core-CrBDYN6N.js.map
+//# sourceMappingURL=charts-core-DaXSt1Dd.js.map

package/dist/client/chunks/{charts-core-CrBDYN6N.js.map → charts-core-DaXSt1Dd.js.map}

@@ -1 +1 @@
-{"version":3,"file":"charts-core-CrBDYN6N.js","names":[],"sources":["../../../src/client/components/AnalysisBuilder/SectionHeading.tsx","../../../src/client/components/charts/AxisFormatControls.tsx"],"sourcesContent":["/**\n * SectionHeading Component\n *\n * A reusable section heading for the Analysis Builder panels.\n * Provides consistent styling that can be easily adjusted in one place.\n */\n\nimport type { ReactNode } from 'react'\n\ninterface SectionHeadingProps {\n  children: ReactNode\n  /** Optional className to add additional styles */\n  className?: string\n}\n\n/**\n * Consistent section heading style for Analysis Builder panels.\n * Change the styles here to update all section headings at once.\n */\nexport default function SectionHeading({ children, className = '' }: SectionHeadingProps) {\n  return (\n    <h3 className={`dc:text-sm dc:font-semibold text-dc-primary dc:uppercase dc:tracking-wide ${className}`}>\n      {children}\n    </h3>\n  )\n}\n","/**\n * AxisFormatControls Component\n *\n * A reusable component for configuring axis number formatting.\n * Provides controls for unit type, abbreviation, decimal places, and custom labels.\n */\n\nimport { useMemo } from 'react'\nimport { useTranslation } from '../../hooks/useTranslation'\nimport SectionHeading from '../AnalysisBuilder/SectionHeading'\nimport type { AxisFormatConfig } from '../../types'\nimport { formatAxisValue } from '../../utils/chartUtils'\n\ninterface AxisFormatControlsProps {\n  value: AxisFormatConfig\n  onChange: (config: AxisFormatConfig) => void\n  axisLabel: string // \"X-Axis\", \"Left Y-Axis\", \"Right Y-Axis\"\n  /** Sample value for preview (default: 1250000) */\n  previewValue?: number\n}\n\n/**\n * Get the currency symbol for the user's locale\n */\nfunction getLocaleCurrencySymbol(): string {\n  const locale = typeof navigator !== 'undefined' ? navigator.language : 'en-US'\n  // Format a number as currency and extract just the symbol\n  const formatted = new Intl.NumberFormat(locale, {\n    style: 'currency',\n    currency: getCurrencyCodeForLocale(locale),\n    currencyDisplay: 'narrowSymbol'\n  }).format(0)\n  // Extract the currency symbol (remove digits, spaces, and common separators)\n  return formatted.replace(/[\\d.,\\s]/g, '').trim() || '$'\n}\n\n/**\n * Get the currency code for a given locale (duplicated from chartUtils for component isolation)\n */\nfunction getCurrencyCodeForLocale(locale: string): string {\n  const parts = locale.split('-')\n  const region = parts[1]?.toUpperCase()\n  const currencyMap: Record<string, string> = {\n    'US': 'USD', 'CA': 'CAD', 'GB': 'GBP', 'UK': 'GBP', 'AU': 'AUD', 'NZ': 'NZD',\n    'EU': 'EUR', 'DE': 'EUR', 'FR': 'EUR', 'IT': 'EUR', 'ES': 'EUR', 'NL': 'EUR',\n    'BE': 'EUR', 'AT': 'EUR', 'IE': 'EUR', 'PT': 'EUR', 'FI': 'EUR',\n    'JP': 'JPY', 'CN': 'CNY', 'KR': 'KRW', 'IN': 'INR', 'BR': 'BRL', 'MX': 'MXN',\n    'CH': 'CHF', 'SE': 'SEK', 'NO': 'NOK', 'DK': 'DKK', 'PL': 'PLN', 'RU': 'RUB',\n    'ZA': 'ZAR', 'SG': 'SGD', 'HK': 'HKD', 'TW': 'TWD', 'TH': 'THB', 'MY': 'MYR',\n    'PH': 'PHP', 'ID': 'IDR', 'VN': 'VND', 'AE': 'AED', 'SA': 'SAR', 'IL': 'ILS', 'TR': 'TRY',\n  }\n  return currencyMap[region] || 'USD'\n}\n\n/**\n * Single axis format control section\n */\nexport function AxisFormatControls({\n  value,\n  onChange,\n  axisLabel,\n  previewValue = 1250000\n}: AxisFormatControlsProps) {\n  const { t } = useTranslation()\n  const config = useMemo(() => value || {}, [value])\n\n  // Get locale-aware currency symbol for the button\n  const currencySymbol = useMemo(() => getLocaleCurrencySymbol(), [])\n\n  // Generate preview of formatted value\n  const preview = useMemo(() => {\n    return formatAxisValue(previewValue, config)\n  }, [previewValue, config])\n\n  const handleChange = (updates: Partial<AxisFormatConfig>) => {\n    onChange({ ...config, ...updates })\n  }\n\n  const unitButtons: Array<{ value: AxisFormatConfig['unit']; label: string }> = [\n    { value: 'currency', label: currencySymbol },\n    { value: 'percent', label: '%' },\n    { value: 'number', label: '#' },\n    { value: 'custom', label: t('chart.runtime.axisFormat.custom') }\n  ]\n\n  return (\n    <div className=\"dc:space-y-3 dc:pb-4\">\n      {/* Axis Header */}\n      <SectionHeading>{axisLabel}</SectionHeading>\n\n      {/* Label Input */}\n      <div className=\"dc:space-y-1\">\n        <label className=\"dc:text-xs text-dc-text-secondary\">{t('chart.runtime.axisFormat.label')}</label>\n        <input\n          type=\"text\"\n          value={config.label || ''}\n          onChange={(e) => handleChange({ label: e.target.value || undefined })}\n          placeholder={t('chart.runtime.axisFormat.autoLabel')}\n          className=\"dc:w-full dc:px-2 dc:py-1 dc:text-sm dc:border border-dc-border dc:rounded-sm focus:ring-dc-accent focus:border-dc-accent bg-dc-surface text-dc-text\"\n        />\n      </div>\n\n      {/* Unit Type */}\n      <div className=\"dc:space-y-1\">\n        <label className=\"dc:text-xs text-dc-text-secondary\">{t('chart.runtime.axisFormat.unit')}</label>\n        <div className=\"dc:flex dc:border border-dc-border dc:rounded-sm dc:overflow-hidden\">\n          {unitButtons.map((btn) => (\n            <button\n              key={btn.value}\n              type=\"button\"\n              onClick={() => handleChange({ unit: btn.value })}\n              className={`dc:flex-1 dc:px-2 dc:py-1.5 dc:text-sm dc:font-medium dc:transition-colors ${\n                config.unit === btn.value\n                  ? 'bg-dc-primary text-white'\n                  : 'bg-dc-surface text-dc-text hover:bg-dc-border'\n              }`}\n            >\n              {btn.label}\n            </button>\n          ))}\n        </div>\n      </div>\n\n      {/* Custom Prefix/Suffix (only when Custom is selected) */}\n      {config.unit === 'custom' && (\n        <div className=\"dc:flex dc:gap-2\">\n          <div className=\"dc:flex-1 dc:space-y-1\">\n            <label className=\"dc:text-xs text-dc-text-secondary\">{t('chart.runtime.axisFormat.prefix')}</label>\n            <input\n              type=\"text\"\n              value={config.customPrefix || ''}\n              onChange={(e) => handleChange({ customPrefix: e.target.value || undefined })}\n              placeholder={t('chart.runtime.axisFormat.prefixExample')}\n              className=\"dc:w-full dc:px-2 dc:py-1 dc:text-sm dc:border border-dc-border dc:rounded-sm focus:ring-dc-accent focus:border-dc-accent bg-dc-surface text-dc-text\"\n            />\n          </div>\n          <div className=\"dc:flex-1 dc:space-y-1\">\n            <label className=\"dc:text-xs text-dc-text-secondary\">{t('chart.runtime.axisFormat.suffix')}</label>\n            <input\n              type=\"text\"\n              value={config.customSuffix || ''}\n              onChange={(e) => handleChange({ customSuffix: e.target.value || undefined })}\n              placeholder={t('chart.runtime.axisFormat.suffixExample')}\n              className=\"dc:w-full dc:px-2 dc:py-1 dc:text-sm dc:border border-dc-border dc:rounded-sm focus:ring-dc-accent focus:border-dc-accent bg-dc-surface text-dc-text\"\n            />\n          </div>\n        </div>\n      )}\n\n      {/* Abbreviation Toggle */}\n      <div className=\"dc:space-y-1\">\n        <label className=\"dc:text-xs text-dc-text-secondary\">{t('chart.runtime.axisFormat.abbreviation')}</label>\n        <div className=\"dc:flex dc:border border-dc-border dc:rounded-sm dc:overflow-hidden\">\n          <button\n            type=\"button\"\n            onClick={() => handleChange({ abbreviate: true })}\n            className={`dc:flex-1 dc:px-3 dc:py-1.5 dc:text-sm dc:font-medium dc:transition-colors ${\n              config.abbreviate !== false\n                ? 'bg-dc-primary text-white'\n                : 'bg-dc-surface text-dc-text hover:bg-dc-border'\n            }`}\n          >\n            {t('chart.runtime.axisFormat.yes')}\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => handleChange({ abbreviate: false })}\n            className={`dc:flex-1 dc:px-3 dc:py-1.5 dc:text-sm dc:font-medium dc:transition-colors ${\n              config.abbreviate === false\n                ? 'bg-dc-primary text-white'\n                : 'bg-dc-surface text-dc-text hover:bg-dc-border'\n            }`}\n          >\n            {t('chart.runtime.axisFormat.no')}\n          </button>\n        </div>\n      </div>\n\n      {/* Decimals */}\n      <div className=\"dc:space-y-1\">\n        <label className=\"dc:text-xs text-dc-text-secondary\">{t('chart.runtime.axisFormat.decimals')}</label>\n        <div className=\"dc:flex dc:gap-2\">\n          <button\n            type=\"button\"\n            onClick={() => {\n              const current = config.decimals ?? 2\n              if (current > 0) handleChange({ decimals: current - 1 })\n            }}\n            disabled={(config.decimals ?? 2) <= 0}\n            className=\"dc:flex-1 dc:px-3 dc:py-2 dc:text-sm dc:border border-dc-border dc:rounded-sm bg-dc-surface text-dc-text hover:bg-dc-border dc:disabled:opacity-40 dc:disabled:cursor-not-allowed dc:transition-colors\"\n          >\n            ← .0\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => {\n              const current = config.decimals ?? 2\n              if (current < 4) handleChange({ decimals: current + 1 })\n            }}\n            disabled={(config.decimals ?? 2) >= 4}\n            className=\"dc:flex-1 dc:px-3 dc:py-2 dc:text-sm dc:border border-dc-border dc:rounded-sm bg-dc-surface text-dc-text hover:bg-dc-border dc:disabled:opacity-40 dc:disabled:cursor-not-allowed dc:transition-colors\"\n          >\n            .00 →\n          </button>\n        </div>\n      </div>\n\n      {/* Preview */}\n      <div className=\"dc:space-y-1\">\n        <label className=\"dc:text-xs text-dc-text-secondary\">{t('chart.runtime.axisFormat.preview')}</label>\n        <div className=\"dc:text-sm dc:font-mono text-dc-text\">\n          {preview}\n        </div>\n      </div>\n    </div>\n  )\n}\n\ninterface MultiAxisFormatControlsProps {\n  displayConfig: {\n    xAxisFormat?: AxisFormatConfig\n    leftYAxisFormat?: AxisFormatConfig\n    rightYAxisFormat?: AxisFormatConfig\n  }\n  onChange: (updates: {\n    xAxisFormat?: AxisFormatConfig\n    leftYAxisFormat?: AxisFormatConfig\n    rightYAxisFormat?: AxisFormatConfig\n  }) => void\n  /** Which axes to show controls for */\n  showAxes?: {\n    xAxis?: boolean\n    leftYAxis?: boolean\n    rightYAxis?: boolean\n  }\n}\n\n/**\n * Container component for multiple axis format controls\n */\nexport function MultiAxisFormatControls({\n  displayConfig,\n  onChange,\n  showAxes = { leftYAxis: true, rightYAxis: true }\n}: MultiAxisFormatControlsProps) {\n  const { t } = useTranslation()\n  return (\n    <div className=\"dc:space-y-4\">\n      {showAxes.leftYAxis && (\n        <AxisFormatControls\n          axisLabel={t('chart.runtime.axisFormat.leftYAxis')}\n          value={displayConfig.leftYAxisFormat || {}}\n          onChange={(config) =>\n            onChange({\n              ...displayConfig,\n              leftYAxisFormat: Object.keys(config).length > 0 ? config : undefined\n            })\n          }\n        />\n      )}\n\n      {showAxes.rightYAxis && (\n        <AxisFormatControls\n          axisLabel={t('chart.runtime.axisFormat.rightYAxis')}\n          value={displayConfig.rightYAxisFormat || {}}\n          onChange={(config) =>\n            onChange({\n              ...displayConfig,\n              rightYAxisFormat: Object.keys(config).length > 0 ? config : undefined\n            })\n          }\n        />\n      )}\n\n      {showAxes.xAxis && (\n        <AxisFormatControls\n          axisLabel={t('chart.runtime.axisFormat.xAxis')}\n          value={displayConfig.xAxisFormat || {}}\n          onChange={(config) =>\n            onChange({\n              ...displayConfig,\n              xAxisFormat: Object.keys(config).length > 0 ? config : undefined\n            })\n          }\n          previewValue={2024} // Use a year-like number for X-axis preview\n        />\n      )}\n    </div>\n  )\n}\n\nexport default AxisFormatControls\n"],"mappings":"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"}
+{"version":3,"file":"charts-core-DaXSt1Dd.js","names":[],"sources":["../../../src/client/components/AnalysisBuilder/SectionHeading.tsx","../../../src/client/components/charts/AxisFormatControls.tsx"],"sourcesContent":["/**\n * SectionHeading Component\n *\n * A reusable section heading for the Analysis Builder panels.\n * Provides consistent styling that can be easily adjusted in one place.\n */\n\nimport type { ReactNode } from 'react'\n\ninterface SectionHeadingProps {\n  children: ReactNode\n  /** Optional className to add additional styles */\n  className?: string\n}\n\n/**\n * Consistent section heading style for Analysis Builder panels.\n * Change the styles here to update all section headings at once.\n */\nexport default function SectionHeading({ children, className = '' }: SectionHeadingProps) {\n  return (\n    <h3 className={`dc:text-sm dc:font-semibold text-dc-primary dc:uppercase dc:tracking-wide ${className}`}>\n      {children}\n    </h3>\n  )\n}\n","/**\n * AxisFormatControls Component\n *\n * A reusable component for configuring axis number formatting.\n * Provides controls for unit type, abbreviation, decimal places, and custom labels.\n */\n\nimport { useMemo } from 'react'\nimport { useTranslation } from '../../hooks/useTranslation'\nimport SectionHeading from '../AnalysisBuilder/SectionHeading'\nimport type { AxisFormatConfig } from '../../types'\nimport { formatAxisValue } from '../../utils/chartUtils'\n\ninterface AxisFormatControlsProps {\n  value: AxisFormatConfig\n  onChange: (config: AxisFormatConfig) => void\n  axisLabel: string // \"X-Axis\", \"Left Y-Axis\", \"Right Y-Axis\"\n  /** Sample value for preview (default: 1250000) */\n  previewValue?: number\n}\n\n/**\n * Get the currency symbol for the user's locale\n */\nfunction getLocaleCurrencySymbol(): string {\n  const locale = typeof navigator !== 'undefined' ? navigator.language : 'en-US'\n  // Format a number as currency and extract just the symbol\n  const formatted = new Intl.NumberFormat(locale, {\n    style: 'currency',\n    currency: getCurrencyCodeForLocale(locale),\n    currencyDisplay: 'narrowSymbol'\n  }).format(0)\n  // Extract the currency symbol (remove digits, spaces, and common separators)\n  return formatted.replace(/[\\d.,\\s]/g, '').trim() || '$'\n}\n\n/**\n * Get the currency code for a given locale (duplicated from chartUtils for component isolation)\n */\nfunction getCurrencyCodeForLocale(locale: string): string {\n  const parts = locale.split('-')\n  const region = parts[1]?.toUpperCase()\n  const currencyMap: Record<string, string> = {\n    'US': 'USD', 'CA': 'CAD', 'GB': 'GBP', 'UK': 'GBP', 'AU': 'AUD', 'NZ': 'NZD',\n    'EU': 'EUR', 'DE': 'EUR', 'FR': 'EUR', 'IT': 'EUR', 'ES': 'EUR', 'NL': 'EUR',\n    'BE': 'EUR', 'AT': 'EUR', 'IE': 'EUR', 'PT': 'EUR', 'FI': 'EUR',\n    'JP': 'JPY', 'CN': 'CNY', 'KR': 'KRW', 'IN': 'INR', 'BR': 'BRL', 'MX': 'MXN',\n    'CH': 'CHF', 'SE': 'SEK', 'NO': 'NOK', 'DK': 'DKK', 'PL': 'PLN', 'RU': 'RUB',\n    'ZA': 'ZAR', 'SG': 'SGD', 'HK': 'HKD', 'TW': 'TWD', 'TH': 'THB', 'MY': 'MYR',\n    'PH': 'PHP', 'ID': 'IDR', 'VN': 'VND', 'AE': 'AED', 'SA': 'SAR', 'IL': 'ILS', 'TR': 'TRY',\n  }\n  return currencyMap[region] || 'USD'\n}\n\n/**\n * Single axis format control section\n */\nexport function AxisFormatControls({\n  value,\n  onChange,\n  axisLabel,\n  previewValue = 1250000\n}: AxisFormatControlsProps) {\n  const { t } = useTranslation()\n  const config = useMemo(() => value || {}, [value])\n\n  // Get locale-aware currency symbol for the button\n  const currencySymbol = useMemo(() => getLocaleCurrencySymbol(), [])\n\n  // Generate preview of formatted value\n  const preview = useMemo(() => {\n    return formatAxisValue(previewValue, config)\n  }, [previewValue, config])\n\n  const handleChange = (updates: Partial<AxisFormatConfig>) => {\n    onChange({ ...config, ...updates })\n  }\n\n  const unitButtons: Array<{ value: AxisFormatConfig['unit']; label: string }> = [\n    { value: 'currency', label: currencySymbol },\n    { value: 'percent', label: '%' },\n    { value: 'number', label: '#' },\n    { value: 'custom', label: t('chart.runtime.axisFormat.custom') }\n  ]\n\n  return (\n    <div className=\"dc:space-y-3 dc:pb-4\">\n      {/* Axis Header */}\n      <SectionHeading>{axisLabel}</SectionHeading>\n\n      {/* Label Input */}\n      <div className=\"dc:space-y-1\">\n        <label className=\"dc:text-xs text-dc-text-secondary\">{t('chart.runtime.axisFormat.label')}</label>\n        <input\n          type=\"text\"\n          value={config.label || ''}\n          onChange={(e) => handleChange({ label: e.target.value || undefined })}\n          placeholder={t('chart.runtime.axisFormat.autoLabel')}\n          className=\"dc:w-full dc:px-2 dc:py-1 dc:text-sm dc:border border-dc-border dc:rounded-sm focus:ring-dc-accent focus:border-dc-accent bg-dc-surface text-dc-text\"\n        />\n      </div>\n\n      {/* Unit Type */}\n      <div className=\"dc:space-y-1\">\n        <label className=\"dc:text-xs text-dc-text-secondary\">{t('chart.runtime.axisFormat.unit')}</label>\n        <div className=\"dc:flex dc:border border-dc-border dc:rounded-sm dc:overflow-hidden\">\n          {unitButtons.map((btn) => (\n            <button\n              key={btn.value}\n              type=\"button\"\n              onClick={() => handleChange({ unit: btn.value })}\n              className={`dc:flex-1 dc:px-2 dc:py-1.5 dc:text-sm dc:font-medium dc:transition-colors ${\n                config.unit === btn.value\n                  ? 'bg-dc-primary text-white'\n                  : 'bg-dc-surface text-dc-text hover:bg-dc-border'\n              }`}\n            >\n              {btn.label}\n            </button>\n          ))}\n        </div>\n      </div>\n\n      {/* Custom Prefix/Suffix (only when Custom is selected) */}\n      {config.unit === 'custom' && (\n        <div className=\"dc:flex dc:gap-2\">\n          <div className=\"dc:flex-1 dc:space-y-1\">\n            <label className=\"dc:text-xs text-dc-text-secondary\">{t('chart.runtime.axisFormat.prefix')}</label>\n            <input\n              type=\"text\"\n              value={config.customPrefix || ''}\n              onChange={(e) => handleChange({ customPrefix: e.target.value || undefined })}\n              placeholder={t('chart.runtime.axisFormat.prefixExample')}\n              className=\"dc:w-full dc:px-2 dc:py-1 dc:text-sm dc:border border-dc-border dc:rounded-sm focus:ring-dc-accent focus:border-dc-accent bg-dc-surface text-dc-text\"\n            />\n          </div>\n          <div className=\"dc:flex-1 dc:space-y-1\">\n            <label className=\"dc:text-xs text-dc-text-secondary\">{t('chart.runtime.axisFormat.suffix')}</label>\n            <input\n              type=\"text\"\n              value={config.customSuffix || ''}\n              onChange={(e) => handleChange({ customSuffix: e.target.value || undefined })}\n              placeholder={t('chart.runtime.axisFormat.suffixExample')}\n              className=\"dc:w-full dc:px-2 dc:py-1 dc:text-sm dc:border border-dc-border dc:rounded-sm focus:ring-dc-accent focus:border-dc-accent bg-dc-surface text-dc-text\"\n            />\n          </div>\n        </div>\n      )}\n\n      {/* Abbreviation Toggle */}\n      <div className=\"dc:space-y-1\">\n        <label className=\"dc:text-xs text-dc-text-secondary\">{t('chart.runtime.axisFormat.abbreviation')}</label>\n        <div className=\"dc:flex dc:border border-dc-border dc:rounded-sm dc:overflow-hidden\">\n          <button\n            type=\"button\"\n            onClick={() => handleChange({ abbreviate: true })}\n            className={`dc:flex-1 dc:px-3 dc:py-1.5 dc:text-sm dc:font-medium dc:transition-colors ${\n              config.abbreviate !== false\n                ? 'bg-dc-primary text-white'\n                : 'bg-dc-surface text-dc-text hover:bg-dc-border'\n            }`}\n          >\n            {t('chart.runtime.axisFormat.yes')}\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => handleChange({ abbreviate: false })}\n            className={`dc:flex-1 dc:px-3 dc:py-1.5 dc:text-sm dc:font-medium dc:transition-colors ${\n              config.abbreviate === false\n                ? 'bg-dc-primary text-white'\n                : 'bg-dc-surface text-dc-text hover:bg-dc-border'\n            }`}\n          >\n            {t('chart.runtime.axisFormat.no')}\n          </button>\n        </div>\n      </div>\n\n      {/* Decimals */}\n      <div className=\"dc:space-y-1\">\n        <label className=\"dc:text-xs text-dc-text-secondary\">{t('chart.runtime.axisFormat.decimals')}</label>\n        <div className=\"dc:flex dc:gap-2\">\n          <button\n            type=\"button\"\n            onClick={() => {\n              const current = config.decimals ?? 2\n              if (current > 0) handleChange({ decimals: current - 1 })\n            }}\n            disabled={(config.decimals ?? 2) <= 0}\n            className=\"dc:flex-1 dc:px-3 dc:py-2 dc:text-sm dc:border border-dc-border dc:rounded-sm bg-dc-surface text-dc-text hover:bg-dc-border dc:disabled:opacity-40 dc:disabled:cursor-not-allowed dc:transition-colors\"\n          >\n            ← .0\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => {\n              const current = config.decimals ?? 2\n              if (current < 4) handleChange({ decimals: current + 1 })\n            }}\n            disabled={(config.decimals ?? 2) >= 4}\n            className=\"dc:flex-1 dc:px-3 dc:py-2 dc:text-sm dc:border border-dc-border dc:rounded-sm bg-dc-surface text-dc-text hover:bg-dc-border dc:disabled:opacity-40 dc:disabled:cursor-not-allowed dc:transition-colors\"\n          >\n            .00 →\n          </button>\n        </div>\n      </div>\n\n      {/* Preview */}\n      <div className=\"dc:space-y-1\">\n        <label className=\"dc:text-xs text-dc-text-secondary\">{t('chart.runtime.axisFormat.preview')}</label>\n        <div className=\"dc:text-sm dc:font-mono text-dc-text\">\n          {preview}\n        </div>\n      </div>\n    </div>\n  )\n}\n\ninterface MultiAxisFormatControlsProps {\n  displayConfig: {\n    xAxisFormat?: AxisFormatConfig\n    leftYAxisFormat?: AxisFormatConfig\n    rightYAxisFormat?: AxisFormatConfig\n  }\n  onChange: (updates: {\n    xAxisFormat?: AxisFormatConfig\n    leftYAxisFormat?: AxisFormatConfig\n    rightYAxisFormat?: AxisFormatConfig\n  }) => void\n  /** Which axes to show controls for */\n  showAxes?: {\n    xAxis?: boolean\n    leftYAxis?: boolean\n    rightYAxis?: boolean\n  }\n}\n\ntype AxisKey = 'xAxisFormat' | 'leftYAxisFormat' | 'rightYAxisFormat'\n\ninterface AxisEntry {\n  show: boolean | undefined\n  key: AxisKey\n  labelKey: string\n  previewValue?: number\n}\n\n/**\n * Container component for multiple axis format controls. Each configured axis\n * renders an `AxisFormatControls`; the per-axis entries are data-driven so the\n * three branches collapse into a single map.\n */\nexport function MultiAxisFormatControls({\n  displayConfig,\n  onChange,\n  showAxes = { leftYAxis: true, rightYAxis: true }\n}: MultiAxisFormatControlsProps) {\n  const { t } = useTranslation()\n\n  const entries: AxisEntry[] = [\n    { show: showAxes.leftYAxis, key: 'leftYAxisFormat', labelKey: 'chart.runtime.axisFormat.leftYAxis' },\n    { show: showAxes.rightYAxis, key: 'rightYAxisFormat', labelKey: 'chart.runtime.axisFormat.rightYAxis' },\n    // Use a year-like number for X-axis preview\n    { show: showAxes.xAxis, key: 'xAxisFormat', labelKey: 'chart.runtime.axisFormat.xAxis', previewValue: 2024 }\n  ]\n\n  const updateAxis = (key: AxisKey, config: AxisFormatConfig) =>\n    onChange({ ...displayConfig, [key]: Object.keys(config).length > 0 ? config : undefined })\n\n  return (\n    <div className=\"dc:space-y-4\">\n      {entries.filter((entry) => entry.show).map((entry) => (\n        <AxisFormatControls\n          key={entry.key}\n          axisLabel={t(entry.labelKey)}\n          value={displayConfig[entry.key] || {}}\n          onChange={(config) => updateAxis(entry.key, config)}\n          previewValue={entry.previewValue}\n        />\n      ))}\n    </div>\n  )\n}\n\nexport default AxisFormatControls\n"],"mappings":"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"}