drizzle-cube 0.8.0 → 0.8.2

package/dist/client/chunks/DotStripChart-ChwsVeRU.js

@@ -0,0 +1,408 @@
+import { F as e, S as t, o as n, s as r, w as i } from "./chart-activity-grid-CJzxC18G.js";
+import { D as a, O as o, k as s } from "./chart-area-C66dgy84.js";
+import c, { useMemo as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+var p = {
+	small: 3.5,
+	medium: 5,
+	large: 7
+}, m = 1.5;
+function h(e) {
+	if (e == null || e === "") return null;
+	let t = typeof e == "number" ? e : parseFloat(String(e));
+	return Number.isFinite(t) ? t : null;
+}
+function g(e) {
+	let t = e.length;
+	if (t === 0) return null;
+	let n = Math.floor(t / 2);
+	return t % 2 == 0 ? (e[n - 1] + e[n]) / 2 : e[n];
+}
+function _(e) {
+	if (e === 0) return 0;
+	let t = Math.ceil(e / 2);
+	return e % 2 == 1 ? t : -t;
+}
+function v(e, t, n) {
+	let r = 2 * n + m, i = 2 * n + m, a = [...e].sort((e, t) => e.value - t.value || e.label.localeCompare(t.label)), o = /* @__PURE__ */ new Map(), s = [];
+	for (let e of a) {
+		let n = t(e.value), a = _(16);
+		for (let e = 0; e <= 16; e++) {
+			let t = _(e), i = o.get(t);
+			if (!i || i.every((e) => Math.abs(n - e) >= r)) {
+				a = t;
+				break;
+			}
+		}
+		let c = o.get(a);
+		c ? c.push(n) : o.set(a, [n]), s.push({
+			...e,
+			x: n,
+			lane: a,
+			y: a * i
+		});
+	}
+	return s;
+}
+function y(e, t) {
+	let n = e.reduce((e, t) => Math.max(e, Math.abs(t.lane)), 0), r = 2 * t + m, i = (2 * n + 1) * r + 24;
+	return Math.min(Math.max(i, 44), 220);
+}
+function b(e, t, n) {
+	return e === null || t === null || n < 2 || e <= 0 ? null : t / e;
+}
+function x(e, t, n, r, i) {
+	let a = [], o = /* @__PURE__ */ new Map();
+	for (let i of e) {
+		let e = String(i[t] ?? "");
+		o.has(e) || (o.set(e, []), a.push(e));
+		let s = h(i[n]);
+		s !== null && o.get(e).push({
+			value: s,
+			label: r ? String(i[r] ?? "") : e,
+			row: i
+		});
+	}
+	let s = a.map((e) => {
+		let t = o.get(e);
+		return {
+			label: e,
+			values: t.slice(0, 500),
+			truncated: t.length > 500
+		};
+	});
+	if (i !== "none") {
+		let e = (e) => g(e.map((e) => e.value).sort((e, t) => e - t));
+		s = [...s].sort((t, n) => {
+			if (i === "count") return n.values.length - t.values.length;
+			let r = e(t.values), a = e(n.values);
+			return r === null && a === null ? 0 : r === null ? 1 : a === null ? -1 : i === "valueDesc" ? a - r : r - a;
+		});
+	}
+	return s.slice(0, 50);
+}
+function ee(e) {
+	if (e.length === 0) return {
+		min: 0,
+		max: 1
+	};
+	let t = Math.min(...e), n = Math.max(...e);
+	if (t === n) {
+		let e = Math.abs(t) * .1 || 1;
+		return {
+			min: t - e,
+			max: n + e
+		};
+	}
+	let r = (n - t) * .1;
+	return {
+		min: t - r,
+		max: n + r
+	};
+}
+function S(e, t, n = 5) {
+	if (t === e) return [e];
+	let r = (t - e) / (n - 1);
+	return Array.from({ length: n }, (t, n) => e + n * r);
+}
+//#endregion
+//#region src/client/components/charts/DotStripChart.tsx
+var C = 190, w = 44, T = 24, te = 60, ne = 36;
+function E(e) {
+	return Array.isArray(e) ? typeof e[0] == "string" ? e[0] : void 0 : typeof e == "string" && e !== "" ? e : void 0;
+}
+function re({ band: e, width: t, radius: n, ticks: r, scale: i, showGrid: a, showMedianMarker: o, showExtremeLabels: s, color: c, accentColor: u, drillEnabled: p, onDotClick: m, onDotHover: h, onDotLeave: g }) {
+	let _ = e.height / 2, v = l(() => {
+		if (!s || e.dots.length < 2) return /* @__PURE__ */ new Set();
+		let t = [...e.dots].sort((e, t) => e.value - t.value);
+		return /* @__PURE__ */ new Set([t[0], t[t.length - 1]]);
+	}, [e.dots, s]);
+	return /* @__PURE__ */ f("svg", {
+		width: t,
+		height: e.height,
+		viewBox: `0 0 ${t} ${e.height}`,
+		"data-testid": `dot-strip-band-${e.label}`,
+		children: [
+			a && r.map((t, n) => /* @__PURE__ */ d("line", {
+				x1: i(t),
+				x2: i(t),
+				y1: 0,
+				y2: e.height,
+				stroke: "currentColor",
+				strokeOpacity: .08,
+				strokeWidth: 1,
+				className: "text-dc-text-secondary"
+			}, n)),
+			e.dots.length > 0 && /* @__PURE__ */ d("line", {
+				x1: i(e.min),
+				x2: i(e.max),
+				y1: _,
+				y2: _,
+				stroke: "currentColor",
+				strokeOpacity: .25,
+				strokeWidth: 1,
+				className: "text-dc-text-secondary"
+			}),
+			o && e.median !== null && /* @__PURE__ */ d("line", {
+				x1: i(e.median),
+				x2: i(e.median),
+				y1: _ - Math.min(_ - 2, 16),
+				y2: _ + Math.min(_ - 2, 16),
+				stroke: "currentColor",
+				strokeOpacity: .55,
+				strokeWidth: 2,
+				className: "text-dc-text-secondary",
+				"data-testid": `dot-strip-median-${e.label}`
+			}),
+			e.dots.map((t, r) => {
+				let i = v.has(t);
+				return /* @__PURE__ */ f("g", { children: [/* @__PURE__ */ d("circle", {
+					cx: t.x,
+					cy: _ + t.y,
+					r: n,
+					fill: i ? u : c,
+					stroke: "var(--dc-surface, #ffffff)",
+					strokeWidth: 1.25,
+					cursor: p ? "pointer" : void 0,
+					"data-testid": "dot-strip-dot",
+					onClick: (n) => m(e, t, n),
+					onMouseEnter: (n) => h(e, t, n),
+					onMouseLeave: g
+				}), i && /* @__PURE__ */ d("text", {
+					x: t.x,
+					y: _ + t.y + (t.y <= 0 ? -n - 6 : n + 14),
+					textAnchor: "middle",
+					fontSize: 11,
+					fill: u,
+					"data-testid": `dot-strip-extreme-${t.label}`,
+					children: t.label
+				})] }, `${t.label}-${r}`);
+			})
+		]
+	});
+}
+var D = c.memo(function({ data: m, chartConfig: h, displayConfig: _ = {}, height: D = "100%", colorPalette: O, onDataPointClick: k, drillEnabled: A }) {
+	let { t: j } = e(), M = t(), { containerRef: N, dimensions: ie } = n(), [P, F] = u(null), ae = _.showGrid !== !1, I = _.showTooltip !== !1, oe = _.showMedianMarker !== !1, L = _.showBandStats !== !1, R = _.showExtremeLabels === !0, z = p[_.dotSize ?? "medium"] ?? p.medium, B = _.bandSort ?? "none", V = _.xAxisFormat, { bandField: H, valueField: U, labelField: W, configError: G } = l(() => {
+		let e = E(h?.xAxis) ?? E(h?.x), t = E(h?.yAxis) ?? E(h?.y), n = E(h?.series);
+		return !e || !t ? {
+			bandField: e,
+			valueField: t,
+			labelField: n,
+			configError: j("chart.runtime.configErrorHint.dotStrip")
+		} : {
+			bandField: e,
+			valueField: t,
+			labelField: n,
+			configError: null
+		};
+	}, [h, j]), K = Math.max((ie.width || 720) - C - T, 80), q = L ? te : ne, { bands: J, ticks: Y, scale: X, truncated: se } = l(() => {
+		let e = {
+			bands: [],
+			ticks: [],
+			scale: (e) => 0,
+			truncated: !1
+		};
+		if (G || !H || !U || !m || m.length === 0) return e;
+		let t = m, n = x(t, H, U, W, B), r = ee(n.flatMap((e) => e.values.map((e) => e.value))), i = r.max - r.min, a = Math.max(K - 2 * z - 2, 10), o = (e) => z + 1 + (i === 0 ? a / 2 : (e - r.min) / i * a);
+		return {
+			bands: n.map((e) => {
+				let t = v(e.values, o, z), n = e.values.map((e) => e.value).sort((e, t) => e - t), r = n.length > 0 ? n[0] : null, i = n.length > 0 ? n[n.length - 1] : null;
+				return {
+					label: e.label,
+					dots: t,
+					count: t.length,
+					median: g(n),
+					min: r,
+					max: i,
+					spread: b(r, i, t.length),
+					noData: t.length === 0,
+					height: Math.max(y(t, z), q),
+					truncated: e.truncated
+				};
+			}),
+			ticks: S(r.min, r.max, 5),
+			scale: o,
+			truncated: new Set(t.map((e) => String(e[H] ?? ""))).size > 50
+		};
+	}, [
+		m,
+		H,
+		U,
+		W,
+		B,
+		G,
+		K,
+		z,
+		q
+	]), Z = O?.colors ?? r, ce = Z[0], le = Z[+(Z.length > 1)], Q = (e) => i(e, V), $ = (e, t, n) => {
+		!k || !A || !H || k({
+			dataPoint: t.row,
+			clickedField: H,
+			xValue: e.label,
+			position: {
+				x: n.clientX,
+				y: n.clientY
+			},
+			nativeEvent: n
+		});
+	}, ue = (e, t, n) => {
+		I && F({
+			band: e.label,
+			dot: t,
+			clientX: n.clientX,
+			clientY: n.clientY
+		});
+	};
+	if (G) return /* @__PURE__ */ d(a, {
+		height: D,
+		hint: G
+	});
+	if (!m || m.length === 0) return /* @__PURE__ */ d(o, {
+		height: D,
+		hint: j("chart.runtime.noDataHint.dotStrip")
+	});
+	if (J.length === 0) return /* @__PURE__ */ d(o, {
+		height: D,
+		titleKey: "chart.runtime.noValidData",
+		hint: j("chart.runtime.noValidDataHint.dotStrip")
+	});
+	try {
+		return /* @__PURE__ */ f("div", {
+			ref: N,
+			className: "dc:relative dc:w-full dc:overflow-y-auto",
+			style: { height: D },
+			children: [
+				/* @__PURE__ */ f("div", {
+					className: "dc:grid dc:items-stretch",
+					style: { gridTemplateColumns: `${C}px 1fr` },
+					"data-testid": "dot-strip-grid",
+					children: [
+						J.map((e) => /* @__PURE__ */ f(c.Fragment, { children: [/* @__PURE__ */ f("div", {
+							className: "dc:flex dc:flex-col dc:justify-center dc:gap-1 dc:pr-3 dc:py-2 dc:border-b border-dc-border",
+							style: { minHeight: e.height },
+							children: [/* @__PURE__ */ d("div", {
+								className: "dc:text-sm dc:font-semibold dc:truncate text-dc-text",
+								title: e.label,
+								children: e.label || j("chart.runtime.dotStrip.unlabelledBand")
+							}), L && /* @__PURE__ */ f("div", {
+								className: "dc:flex dc:flex-wrap dc:gap-1 dc:text-xs",
+								children: [/* @__PURE__ */ d("span", {
+									className: "dc:rounded-sm dc:px-1.5 dc:py-0.5 bg-dc-surface-secondary text-dc-text-secondary",
+									children: j(e.truncated ? "chart.runtime.dotStrip.countTruncated" : "chart.runtime.dotStrip.count", { count: e.count })
+								}), e.noData ? /* @__PURE__ */ d("span", {
+									className: "dc:rounded-sm dc:px-1.5 dc:py-0.5 bg-dc-surface-secondary text-dc-text-muted",
+									children: j("chart.runtime.dotStrip.noDataRecorded")
+								}) : e.spread !== null && /* @__PURE__ */ d("span", {
+									className: "dc:rounded-sm dc:px-1.5 dc:py-0.5 bg-dc-surface-secondary text-dc-text-secondary",
+									children: j("chart.runtime.dotStrip.spread", { spread: e.spread.toFixed(2) })
+								})]
+							})]
+						}), /* @__PURE__ */ d("div", {
+							className: "dc:flex dc:items-center dc:border-b border-dc-border",
+							style: {
+								minHeight: e.height,
+								paddingRight: T
+							},
+							children: /* @__PURE__ */ d(re, {
+								band: e,
+								width: K,
+								radius: z,
+								ticks: Y,
+								scale: X,
+								showGrid: ae,
+								showMedianMarker: oe,
+								showExtremeLabels: R,
+								color: ce,
+								accentColor: le,
+								drillEnabled: A === !0,
+								onDotClick: $,
+								onDotHover: ue,
+								onDotLeave: () => F(null)
+							})
+						})] }, e.label)),
+						/* @__PURE__ */ d("div", {}),
+						/* @__PURE__ */ d("div", {
+							style: { paddingRight: T },
+							children: /* @__PURE__ */ f("svg", {
+								width: K,
+								height: w,
+								viewBox: `0 0 ${K} ${w}`,
+								"data-testid": "dot-strip-axis",
+								children: [
+									/* @__PURE__ */ d("line", {
+										x1: 0,
+										x2: K,
+										y1: 1,
+										y2: 1,
+										stroke: "currentColor",
+										strokeOpacity: .2,
+										className: "text-dc-text-secondary"
+									}),
+									Y.map((e, t) => /* @__PURE__ */ f("g", {
+										transform: `translate(${X(e)}, 0)`,
+										children: [/* @__PURE__ */ d("line", {
+											y1: 1,
+											y2: 7,
+											stroke: "currentColor",
+											strokeOpacity: .4,
+											className: "text-dc-text-secondary"
+										}), /* @__PURE__ */ d("text", {
+											y: 22,
+											textAnchor: "middle",
+											fontSize: 11,
+											fill: "currentColor",
+											className: "text-dc-text-secondary",
+											children: Q(e)
+										})]
+									}, t)),
+									U && /* @__PURE__ */ d("text", {
+										x: K / 2,
+										y: 39,
+										textAnchor: "middle",
+										fontSize: 11,
+										fill: "currentColor",
+										className: "text-dc-text-muted",
+										children: M(U)
+									})
+								]
+							})
+						})
+					]
+				}),
+				se && /* @__PURE__ */ d("div", {
+					className: "dc:text-xs text-dc-warning dc:text-center dc:mt-1",
+					children: j("chart.runtime.dotStrip.truncated", { max: 50 })
+				}),
+				I && P && /* @__PURE__ */ f("div", {
+					className: "dc:fixed dc:z-50 dc:pointer-events-none dc:rounded-sm dc:px-2 dc:py-1 dc:text-xs dc:shadow-lg bg-dc-surface text-dc-text dc:border border-dc-border",
+					style: {
+						left: P.clientX + 12,
+						top: P.clientY + 12
+					},
+					"data-testid": "dot-strip-tooltip",
+					children: [
+						/* @__PURE__ */ d("div", {
+							className: "dc:font-semibold",
+							children: P.dot.label
+						}),
+						/* @__PURE__ */ d("div", {
+							className: "text-dc-text-secondary",
+							children: P.band
+						}),
+						/* @__PURE__ */ d("div", { children: Q(P.dot.value) })
+					]
+				})
+			]
+		});
+	} catch (e) {
+		return /* @__PURE__ */ d(s, {
+			height: D,
+			chartType: "Dot Strip Chart",
+			error: e
+		});
+	}
+});
+//#endregion
+export { D as default };
+
+//# sourceMappingURL=DotStripChart-ChwsVeRU.js.map

package/dist/client/chunks/DotStripChart-ChwsVeRU.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DotStripChart-ChwsVeRU.js","names":[],"sources":["../../../src/client/components/charts/DotStripChart.helpers.ts","../../../src/client/components/charts/DotStripChart.tsx"],"sourcesContent":["/**\n * Layout maths for the dot strip (beeswarm) chart.\n *\n * Kept out of the component — like `ScatterChart.helpers.ts` and\n * `BubbleChart.render.ts` — so the swarm packing can be unit-tested without a\n * DOM. Everything here is pure: same input, same output, every time.\n */\n\n/** Hard caps so one pathological band cannot blow up the layout. */\nexport const MAX_BANDS = 50\nexport const MAX_DOTS_PER_BAND = 500\nexport const MAX_LANES = 8\n\nexport const MIN_ROW_HEIGHT = 44\nexport const MAX_ROW_HEIGHT = 220\n/** Vertical breathing room added above and below the outermost lanes. */\nexport const ROW_VERTICAL_PADDING = 12\n\nexport const DOT_RADIUS: Record<'small' | 'medium' | 'large', number> = {\n  small: 3.5,\n  medium: 5,\n  large: 7,\n}\n\n/** Gap between the edges of two adjacent dots in the same lane. */\nexport const DOT_GAP = 1.5\n\nexport interface DotDatum {\n  /** Raw numeric value of the measure. */\n  value: number\n  /** Identity label for the dot (from the optional series dimension). */\n  label: string\n  /** The source row, handed back on click. */\n  row: Record<string, unknown>\n}\n\nexport interface PlacedDot extends DotDatum {\n  /** Pixel x within the plot area. */\n  x: number\n  /** Lane index: 0 is the centre line, then +1, -1, +2, -2, … */\n  lane: number\n  /** Pixel y offset from the band's centre line. */\n  y: number\n}\n\nexport interface BandStats {\n  /** The band's own label (the value of the band dimension). */\n  label: string\n  dots: PlacedDot[]\n  count: number\n  median: number | null\n  min: number | null\n  max: number | null\n  /**\n   * max / min. `null` when it cannot be stated meaningfully — fewer than two\n   * dots, or a non-positive minimum (the ratio is infinite or sign-flipped).\n   */\n  spread: number | null\n  /** True when the band has rows but not one usable numeric value. */\n  noData: boolean\n  /** Rendered height of this band's row, in px. */\n  height: number\n  /** True when the band's dots were truncated at MAX_DOTS_PER_BAND. */\n  truncated: boolean\n}\n\nexport function parseNumeric(v: unknown): number | null {\n  if (v === undefined || v === null || v === '') return null\n  const n = typeof v === 'number' ? v : parseFloat(String(v))\n  return Number.isFinite(n) ? n : null\n}\n\nexport function median(sortedValues: number[]): number | null {\n  const n = sortedValues.length\n  if (n === 0) return null\n  const mid = Math.floor(n / 2)\n  return n % 2 === 0 ? (sortedValues[mid - 1] + sortedValues[mid]) / 2 : sortedValues[mid]\n}\n\n/**\n * Walk lanes outward from the centre: 0, +1, -1, +2, -2, …\n * Returns the lane index for the nth step.\n */\nfunction laneAtStep(step: number): number {\n  if (step === 0) return 0\n  const magnitude = Math.ceil(step / 2)\n  return step % 2 === 1 ? magnitude : -magnitude\n}\n\n/**\n * Greedy deterministic beeswarm packing.\n *\n * Dots are sorted by x (ties broken by label, so the output is stable for a\n * given input rather than dependent on row order) and each is dropped into the\n * first lane — searched outward from the centre — where it clears every dot\n * already in that lane by at least `2r + gap`. Beyond `MAX_LANES` the dot is\n * forced onto the outermost lane and simply overlaps; the surface-coloured\n * stroke keeps that readable.\n *\n * A force simulation would do this too, but it settles asynchronously and\n * non-deterministically, which makes it untestable and jittery on re-render.\n */\nexport function packSwarm(dots: DotDatum[], scale: (v: number) => number, radius: number): PlacedDot[] {\n  const minSeparation = 2 * radius + DOT_GAP\n  const laneHeight = 2 * radius + DOT_GAP\n\n  const sorted = [...dots].sort((a, b) => (a.value - b.value) || a.label.localeCompare(b.label))\n\n  // lane index -> x positions already placed in that lane\n  const lanes = new Map<number, number[]>()\n  const placed: PlacedDot[] = []\n\n  for (const dot of sorted) {\n    const x = scale(dot.value)\n\n    let chosenLane = laneAtStep(2 * MAX_LANES)\n    for (let step = 0; step <= 2 * MAX_LANES; step++) {\n      const lane = laneAtStep(step)\n      const occupied = lanes.get(lane)\n      if (!occupied || occupied.every((other) => Math.abs(x - other) >= minSeparation)) {\n        chosenLane = lane\n        break\n      }\n    }\n\n    const occupied = lanes.get(chosenLane)\n    if (occupied) occupied.push(x)\n    else lanes.set(chosenLane, [x])\n\n    placed.push({ ...dot, x, lane: chosenLane, y: chosenLane * laneHeight })\n  }\n\n  return placed\n}\n\n/** Row height needed to show every lane the swarm used. */\nexport function swarmHeight(placed: PlacedDot[], radius: number): number {\n  const maxAbsLane = placed.reduce((acc, d) => Math.max(acc, Math.abs(d.lane)), 0)\n  const laneHeight = 2 * radius + DOT_GAP\n  const needed = (2 * maxAbsLane + 1) * laneHeight + 2 * ROW_VERTICAL_PADDING\n  return Math.min(Math.max(needed, MIN_ROW_HEIGHT), MAX_ROW_HEIGHT)\n}\n\n/** max / min, or null when the ratio would be meaningless. */\nexport function computeSpread(min: number | null, max: number | null, count: number): number | null {\n  if (min === null || max === null || count < 2) return null\n  if (min <= 0) return null\n  return max / min\n}\n\nexport type BandSort = 'none' | 'valueDesc' | 'valueAsc' | 'count'\n\n/**\n * Group rows into bands, in the order requested. Sorting happens before the\n * swarm is packed so row heights follow the rows the user actually sees.\n */\nexport function groupIntoBands(\n  rows: Record<string, unknown>[],\n  bandField: string,\n  valueField: string,\n  labelField: string | undefined,\n  sort: BandSort\n): Array<{ label: string; values: DotDatum[]; truncated: boolean }> {\n  const order: string[] = []\n  const grouped = new Map<string, DotDatum[]>()\n\n  for (const row of rows) {\n    const bandLabel = String(row[bandField] ?? '')\n    if (!grouped.has(bandLabel)) {\n      grouped.set(bandLabel, [])\n      order.push(bandLabel)\n    }\n    const value = parseNumeric(row[valueField])\n    if (value === null) continue\n    grouped.get(bandLabel)!.push({\n      value,\n      label: labelField ? String(row[labelField] ?? '') : bandLabel,\n      row,\n    })\n  }\n\n  let bands = order.map((label) => {\n    const all = grouped.get(label)!\n    return {\n      label,\n      values: all.slice(0, MAX_DOTS_PER_BAND),\n      truncated: all.length > MAX_DOTS_PER_BAND,\n    }\n  })\n\n  if (sort !== 'none') {\n    const medianOf = (values: DotDatum[]) => median(values.map((d) => d.value).sort((a, b) => a - b))\n    bands = [...bands].sort((a, b) => {\n      if (sort === 'count') return b.values.length - a.values.length\n      const ma = medianOf(a.values)\n      const mb = medianOf(b.values)\n      if (ma === null && mb === null) return 0\n      if (ma === null) return 1\n      if (mb === null) return -1\n      return sort === 'valueDesc' ? mb - ma : ma - mb\n    })\n  }\n\n  return bands.slice(0, MAX_BANDS)\n}\n\n/** Nicely padded numeric domain across every dot in every band. */\nexport function computeDomain(values: number[]): { min: number; max: number } {\n  if (values.length === 0) return { min: 0, max: 1 }\n  const rawMin = Math.min(...values)\n  const rawMax = Math.max(...values)\n  if (rawMin === rawMax) {\n    const pad = Math.abs(rawMin) * 0.1 || 1\n    return { min: rawMin - pad, max: rawMax + pad }\n  }\n  const pad = (rawMax - rawMin) * 0.1\n  return { min: rawMin - pad, max: rawMax + pad }\n}\n\n/** Evenly spaced axis ticks across the domain. */\nexport function computeTicks(min: number, max: number, count = 5): number[] {\n  if (max === min) return [min]\n  const step = (max - min) / (count - 1)\n  return Array.from({ length: count }, (_, i) => min + i * step)\n}\n","import React, { useMemo, useState } from 'react'\nimport { useTranslation } from '../../hooks/useTranslation.js'\nimport { useCubeFieldLabel } from '../../hooks/useCubeFieldLabel.js'\nimport { CHART_COLORS } from '../../utils/chartConstants.js'\nimport { formatAxisValue } from '../../utils/chartUtils.js'\nimport { ChartConfigError, ChartEmptyState, ChartRenderError } from './ChartStates.js'\nimport { useChartDimensions } from './useChartDimensions.js'\nimport {\n  DOT_RADIUS,\n  MAX_BANDS,\n  computeDomain,\n  computeSpread,\n  computeTicks,\n  groupIntoBands,\n  median,\n  packSwarm,\n  swarmHeight,\n  type BandSort,\n  type BandStats,\n  type PlacedDot,\n} from './DotStripChart.helpers.js'\nimport type { ChartProps } from '../../types.js'\n\nconst GUTTER_WIDTH = 190\nconst AXIS_HEIGHT = 44\nconst PLOT_PADDING_X = 24\n\n/**\n * Height the left gutter needs for its own content, so a band with a flat swarm\n * still gets a row tall enough for the name and the badges. Folded into the\n * band height rather than left to the grid, so the strip SVG always fills the\n * whole row and its gridlines stay continuous between bands.\n *\n * `dc:text-sm` line (20) + `dc:gap-1` (4) + badge line (20) + `dc:py-2` (16).\n */\nconst GUTTER_HEIGHT_WITH_STATS = 60\nconst GUTTER_HEIGHT_NAME_ONLY = 36\n\n/**\n * Read a drop zone's field, tolerating both shapes it is stored in: the\n * AnalysisBuilder writes a bare string into any zone with `maxItems: 1`\n * (`addFieldToAxis` in `AnalysisBuilder/utils/axisConfigUtils.ts`), while the\n * agent's `inferChartConfig` always writes an array.\n */\nfunction firstField(value: unknown): string | undefined {\n  if (Array.isArray(value)) return typeof value[0] === 'string' ? value[0] : undefined\n  return typeof value === 'string' && value !== '' ? value : undefined\n}\n\ninterface HoveredDot {\n  band: string\n  dot: PlacedDot\n  clientX: number\n  clientY: number\n}\n\n/**\n * One band's strip: gridlines, the baseline, the median tick and the swarm.\n * The x-scale is passed in so every band and the axis share one domain.\n */\nfunction BandStrip({\n  band,\n  width,\n  radius,\n  ticks,\n  scale,\n  showGrid,\n  showMedianMarker,\n  showExtremeLabels,\n  color,\n  accentColor,\n  drillEnabled,\n  onDotClick,\n  onDotHover,\n  onDotLeave,\n}: {\n  band: BandStats\n  width: number\n  radius: number\n  ticks: number[]\n  scale: (v: number) => number\n  showGrid: boolean\n  showMedianMarker: boolean\n  showExtremeLabels: boolean\n  color: string\n  accentColor: string\n  drillEnabled: boolean\n  onDotClick: (band: BandStats, dot: PlacedDot, event: React.MouseEvent) => void\n  onDotHover: (band: BandStats, dot: PlacedDot, event: React.MouseEvent) => void\n  onDotLeave: () => void\n}) {\n  const centreY = band.height / 2\n  const extremes = useMemo(() => {\n    if (!showExtremeLabels || band.dots.length < 2) return new Set<PlacedDot>()\n    const sorted = [...band.dots].sort((a, b) => a.value - b.value)\n    return new Set<PlacedDot>([sorted[0], sorted[sorted.length - 1]])\n  }, [band.dots, showExtremeLabels])\n\n  return (\n    <svg\n      width={width}\n      height={band.height}\n      viewBox={`0 0 ${width} ${band.height}`}\n      data-testid={`dot-strip-band-${band.label}`}\n    >\n      {showGrid &&\n        ticks.map((tick, i) => (\n          <line\n            key={i}\n            x1={scale(tick)}\n            x2={scale(tick)}\n            y1={0}\n            y2={band.height}\n            stroke=\"currentColor\"\n            strokeOpacity={0.08}\n            strokeWidth={1}\n            className=\"text-dc-text-secondary\"\n          />\n        ))}\n\n      {band.dots.length > 0 && (\n        <line\n          x1={scale(band.min!)}\n          x2={scale(band.max!)}\n          y1={centreY}\n          y2={centreY}\n          stroke=\"currentColor\"\n          strokeOpacity={0.25}\n          strokeWidth={1}\n          className=\"text-dc-text-secondary\"\n        />\n      )}\n\n      {showMedianMarker && band.median !== null && (\n        <line\n          x1={scale(band.median)}\n          x2={scale(band.median)}\n          y1={centreY - Math.min(centreY - 2, 16)}\n          y2={centreY + Math.min(centreY - 2, 16)}\n          stroke=\"currentColor\"\n          strokeOpacity={0.55}\n          strokeWidth={2}\n          className=\"text-dc-text-secondary\"\n          data-testid={`dot-strip-median-${band.label}`}\n        />\n      )}\n\n      {band.dots.map((dot, i) => {\n        const isExtreme = extremes.has(dot)\n        return (\n          <g key={`${dot.label}-${i}`}>\n            <circle\n              cx={dot.x}\n              cy={centreY + dot.y}\n              r={radius}\n              fill={isExtreme ? accentColor : color}\n              stroke=\"var(--dc-surface, #ffffff)\"\n              strokeWidth={1.25}\n              cursor={drillEnabled ? 'pointer' : undefined}\n              data-testid=\"dot-strip-dot\"\n              onClick={(event) => onDotClick(band, dot, event)}\n              onMouseEnter={(event) => onDotHover(band, dot, event)}\n              onMouseLeave={onDotLeave}\n            />\n            {isExtreme && (\n              <text\n                x={dot.x}\n                y={centreY + dot.y + (dot.y <= 0 ? -radius - 6 : radius + 14)}\n                textAnchor=\"middle\"\n                fontSize={11}\n                fill={accentColor}\n                data-testid={`dot-strip-extreme-${dot.label}`}\n              >\n                {dot.label}\n              </text>\n            )}\n          </g>\n        )\n      })}\n    </svg>\n  )\n}\n\nconst DotStripChart = React.memo(function DotStripChart({\n  data,\n  chartConfig,\n  displayConfig = {},\n  height = '100%',\n  colorPalette,\n  onDataPointClick,\n  drillEnabled,\n}: ChartProps) {\n  const { t } = useTranslation()\n  const getFieldLabel = useCubeFieldLabel()\n  const { containerRef, dimensions } = useChartDimensions()\n  const [hovered, setHovered] = useState<HoveredDot | null>(null)\n\n  const showGrid = displayConfig.showGrid !== false\n  const showTooltip = displayConfig.showTooltip !== false\n  const showMedianMarker = displayConfig.showMedianMarker !== false\n  const showBandStats = displayConfig.showBandStats !== false\n  const showExtremeLabels = displayConfig.showExtremeLabels === true\n  const radius = DOT_RADIUS[displayConfig.dotSize ?? 'medium'] ?? DOT_RADIUS.medium\n  const bandSort: BandSort = displayConfig.bandSort ?? 'none'\n  const xAxisFormat = displayConfig.xAxisFormat\n\n  const { bandField, valueField, labelField, configError } = useMemo(() => {\n    const bandField = firstField(chartConfig?.xAxis) ?? firstField(chartConfig?.x)\n    const valueField = firstField(chartConfig?.yAxis) ?? firstField(chartConfig?.y)\n    const labelField = firstField(chartConfig?.series)\n\n    if (!bandField || !valueField) {\n      return {\n        bandField,\n        valueField,\n        labelField,\n        configError: t('chart.runtime.configErrorHint.dotStrip'),\n      }\n    }\n    return { bandField, valueField, labelField, configError: null as string | null }\n  }, [chartConfig, t])\n\n  const plotWidth = Math.max((dimensions.width || 720) - GUTTER_WIDTH - PLOT_PADDING_X, 80)\n\n  const gutterHeight = showBandStats ? GUTTER_HEIGHT_WITH_STATS : GUTTER_HEIGHT_NAME_ONLY\n\n  const { bands, ticks, scale, truncated } = useMemo(() => {\n    const empty = { bands: [] as BandStats[], ticks: [] as number[], scale: (_: number) => 0, truncated: false }\n    if (configError || !bandField || !valueField || !data || data.length === 0) return empty\n\n    const rows = data as Record<string, unknown>[]\n    const grouped = groupIntoBands(rows, bandField, valueField, labelField, bandSort)\n\n    const allValues = grouped.flatMap((b) => b.values.map((d) => d.value))\n    const domain = computeDomain(allValues)\n    const span = domain.max - domain.min\n    const inner = Math.max(plotWidth - 2 * radius - 2, 10)\n    const scale = (v: number) => radius + 1 + (span === 0 ? inner / 2 : ((v - domain.min) / span) * inner)\n\n    const bands: BandStats[] = grouped.map((group) => {\n      const placed = packSwarm(group.values, scale, radius)\n      const sortedValues = group.values.map((d) => d.value).sort((a, b) => a - b)\n      const min = sortedValues.length > 0 ? sortedValues[0] : null\n      const max = sortedValues.length > 0 ? sortedValues[sortedValues.length - 1] : null\n      return {\n        label: group.label,\n        dots: placed,\n        count: placed.length,\n        median: median(sortedValues),\n        min,\n        max,\n        spread: computeSpread(min, max, placed.length),\n        noData: placed.length === 0,\n        height: Math.max(swarmHeight(placed, radius), gutterHeight),\n        truncated: group.truncated,\n      }\n    })\n\n    return {\n      bands,\n      ticks: computeTicks(domain.min, domain.max, 5),\n      scale,\n      truncated: new Set(rows.map((r) => String(r[bandField] ?? ''))).size > MAX_BANDS,\n    }\n  }, [data, bandField, valueField, labelField, bandSort, configError, plotWidth, radius, gutterHeight])\n\n  const palette = colorPalette?.colors ?? CHART_COLORS\n  const color = palette[0]\n  const accentColor = palette[palette.length > 1 ? 1 : 0]\n\n  const formatValue = (v: number) => formatAxisValue(v, xAxisFormat)\n\n  const handleDotClick = (band: BandStats, dot: PlacedDot, event: React.MouseEvent) => {\n    if (!onDataPointClick || !drillEnabled || !bandField) return\n    onDataPointClick({\n      dataPoint: dot.row,\n      clickedField: bandField,\n      xValue: band.label,\n      position: { x: event.clientX, y: event.clientY },\n      nativeEvent: event,\n    })\n  }\n\n  const handleDotHover = (band: BandStats, dot: PlacedDot, event: React.MouseEvent) => {\n    if (!showTooltip) return\n    setHovered({ band: band.label, dot, clientX: event.clientX, clientY: event.clientY })\n  }\n\n  if (configError) {\n    return <ChartConfigError height={height} hint={configError} />\n  }\n\n  if (!data || data.length === 0) {\n    return <ChartEmptyState height={height} hint={t('chart.runtime.noDataHint.dotStrip')} />\n  }\n\n  if (bands.length === 0) {\n    return (\n      <ChartEmptyState\n        height={height}\n        titleKey=\"chart.runtime.noValidData\"\n        hint={t('chart.runtime.noValidDataHint.dotStrip')}\n      />\n    )\n  }\n\n  try {\n    return (\n      <div ref={containerRef} className=\"dc:relative dc:w-full dc:overflow-y-auto\" style={{ height }}>\n        <div\n          className=\"dc:grid dc:items-stretch\"\n          style={{ gridTemplateColumns: `${GUTTER_WIDTH}px 1fr` }}\n          data-testid=\"dot-strip-grid\"\n        >\n          {bands.map((band) => (\n            <React.Fragment key={band.label}>\n              <div\n                className=\"dc:flex dc:flex-col dc:justify-center dc:gap-1 dc:pr-3 dc:py-2 dc:border-b border-dc-border\"\n                style={{ minHeight: band.height }}\n              >\n                <div className=\"dc:text-sm dc:font-semibold dc:truncate text-dc-text\" title={band.label}>\n                  {band.label || t('chart.runtime.dotStrip.unlabelledBand')}\n                </div>\n                {showBandStats && (\n                  <div className=\"dc:flex dc:flex-wrap dc:gap-1 dc:text-xs\">\n                    <span className=\"dc:rounded-sm dc:px-1.5 dc:py-0.5 bg-dc-surface-secondary text-dc-text-secondary\">\n                      {t(\n                        band.truncated\n                          ? 'chart.runtime.dotStrip.countTruncated'\n                          : 'chart.runtime.dotStrip.count',\n                        { count: band.count }\n                      )}\n                    </span>\n                    {band.noData ? (\n                      <span className=\"dc:rounded-sm dc:px-1.5 dc:py-0.5 bg-dc-surface-secondary text-dc-text-muted\">\n                        {t('chart.runtime.dotStrip.noDataRecorded')}\n                      </span>\n                    ) : (\n                      band.spread !== null && (\n                        <span className=\"dc:rounded-sm dc:px-1.5 dc:py-0.5 bg-dc-surface-secondary text-dc-text-secondary\">\n                          {t('chart.runtime.dotStrip.spread', { spread: band.spread.toFixed(2) })}\n                        </span>\n                      )\n                    )}\n                  </div>\n                )}\n              </div>\n              <div\n                className=\"dc:flex dc:items-center dc:border-b border-dc-border\"\n                style={{ minHeight: band.height, paddingRight: PLOT_PADDING_X }}\n              >\n                <BandStrip\n                  band={band}\n                  width={plotWidth}\n                  radius={radius}\n                  ticks={ticks}\n                  scale={scale}\n                  showGrid={showGrid}\n                  showMedianMarker={showMedianMarker}\n                  showExtremeLabels={showExtremeLabels}\n                  color={color}\n                  accentColor={accentColor}\n                  drillEnabled={drillEnabled === true}\n                  onDotClick={handleDotClick}\n                  onDotHover={handleDotHover}\n                  onDotLeave={() => setHovered(null)}\n                />\n              </div>\n            </React.Fragment>\n          ))}\n\n          <div />\n          <div style={{ paddingRight: PLOT_PADDING_X }}>\n            <svg\n              width={plotWidth}\n              height={AXIS_HEIGHT}\n              viewBox={`0 0 ${plotWidth} ${AXIS_HEIGHT}`}\n              data-testid=\"dot-strip-axis\"\n            >\n              <line x1={0} x2={plotWidth} y1={1} y2={1} stroke=\"currentColor\" strokeOpacity={0.2} className=\"text-dc-text-secondary\" />\n              {ticks.map((tick, i) => (\n                <g key={i} transform={`translate(${scale(tick)}, 0)`}>\n                  <line y1={1} y2={7} stroke=\"currentColor\" strokeOpacity={0.4} className=\"text-dc-text-secondary\" />\n                  <text\n                    y={22}\n                    textAnchor=\"middle\"\n                    fontSize={11}\n                    fill=\"currentColor\"\n                    className=\"text-dc-text-secondary\"\n                  >\n                    {formatValue(tick)}\n                  </text>\n                </g>\n              ))}\n              {valueField && (\n                <text\n                  x={plotWidth / 2}\n                  y={39}\n                  textAnchor=\"middle\"\n                  fontSize={11}\n                  fill=\"currentColor\"\n                  className=\"text-dc-text-muted\"\n                >\n                  {getFieldLabel(valueField)}\n                </text>\n              )}\n            </svg>\n          </div>\n        </div>\n\n        {truncated && (\n          <div className=\"dc:text-xs text-dc-warning dc:text-center dc:mt-1\">\n            {t('chart.runtime.dotStrip.truncated', { max: MAX_BANDS })}\n          </div>\n        )}\n\n        {showTooltip && hovered && (\n          <div\n            className=\"dc:fixed dc:z-50 dc:pointer-events-none dc:rounded-sm dc:px-2 dc:py-1 dc:text-xs dc:shadow-lg bg-dc-surface text-dc-text dc:border border-dc-border\"\n            style={{ left: hovered.clientX + 12, top: hovered.clientY + 12 }}\n            data-testid=\"dot-strip-tooltip\"\n          >\n            <div className=\"dc:font-semibold\">{hovered.dot.label}</div>\n            <div className=\"text-dc-text-secondary\">{hovered.band}</div>\n            <div>{formatValue(hovered.dot.value)}</div>\n          </div>\n        )}\n      </div>\n    )\n  } catch (error) {\n    return <ChartRenderError height={height} chartType=\"Dot Strip Chart\" error={error} />\n  }\n})\n\nexport default DotStripChart\n"],"mappings":"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"}

package/dist/client/chunks/{ProportionBarChart-BVcbGY2C.js → ProportionBarChart-D-Qt9nkF.js}

@@ -1,5 +1,5 @@
-import { P as e, S as t, w as n } from "./chart-activity-grid-DvD_4wJz.js";
-import { D as r, O as i, k as a, s as o } from "./chart-area-DPp3hSOK.js";
+import { F as e, S as t, w as n } from "./chart-activity-grid-CJzxC18G.js";
+import { D as r, O as i, k as a, s as o } from "./chart-area-C66dgy84.js";
 import s, { useMemo as c } from "react";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/client/components/charts/ProportionBarChart.tsx
@@ -106,4 +106,4 @@ var d = s.memo(function({ data: s, chartConfig: d, displayConfig: f = {}, height
 //#endregion
 export { d as default };
 
-//# sourceMappingURL=ProportionBarChart-BVcbGY2C.js.map
+//# sourceMappingURL=ProportionBarChart-D-Qt9nkF.js.map

package/dist/client/chunks/{ProportionBarChart-BVcbGY2C.js.map → ProportionBarChart-D-Qt9nkF.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ProportionBarChart-BVcbGY2C.js","names":[],"sources":["../../../src/client/components/charts/ProportionBarChart.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport { useTranslation } from '../../hooks/useTranslation.js'\nimport { useCubeFieldLabel } from '../../hooks/useCubeFieldLabel.js'\nimport { ChartEmptyState, ChartConfigError, ChartRenderError } from './ChartStates.js'\nimport { getSeriesColor } from './cartesianChartHelpers.js'\nimport { formatAxisValue } from '../../utils/chartUtils.js'\nimport type { ChartProps } from '../../types.js'\n\ninterface Segment {\n  /**\n   * React key. Category labels are not reliably unique - a query can return\n   * duplicates, and every null collapses to the same empty string - so the key\n   * is tied to the source row instead. Stable across sorting, which reorders\n   * the segments under the same identity.\n   */\n  id: string\n  label: string\n  value: number\n  share: number\n  color: string\n}\n\n/**\n * A single 100%-wide stacked bar plus a labelled percentage legend.\n *\n * A flatter alternative to a pie chart for part-to-whole breakdowns: shares are\n * far easier to compare along one axis than as angles, and it costs a fraction\n * of the vertical space. Deliberately plain HTML rather than Recharts — there is\n * no axis, scale or interaction to justify an SVG chart.\n */\nconst ProportionBarChart = React.memo(function ProportionBarChart({\n  data,\n  chartConfig,\n  displayConfig = {},\n  height = '100%',\n  colorPalette\n}: ChartProps) {\n  const { t } = useTranslation()\n  const getFieldLabel = useCubeFieldLabel()\n\n  const categoryField = useMemo(() => {\n    const x = chartConfig?.xAxis\n    return (Array.isArray(x) ? x[0] : x) || ''\n  }, [chartConfig?.xAxis])\n\n  const valueField = useMemo(() => {\n    const y = chartConfig?.yAxis\n    return (Array.isArray(y) ? y[0] : y) || ''\n  }, [chartConfig?.yAxis])\n\n  const sortSegments = displayConfig.sortSegments ?? false\n\n  const { segments, total } = useMemo(() => {\n    if (!data || !categoryField || !valueField) return { segments: [] as Segment[], total: 0 }\n\n    const rows = data\n      .map((row: any, sourceIndex: number) => {\n        const raw = row?.[valueField]\n        const num = typeof raw === 'number' ? raw : parseFloat(String(raw))\n        const label = String(row?.[categoryField] ?? '')\n        return {\n          id: `${sourceIndex}:${label}`,\n          label,\n          // Negative shares cannot be drawn in a part-to-whole bar.\n          value: !isNaN(num) && isFinite(num) && num > 0 ? num : 0\n        }\n      })\n      .filter((row) => row.value > 0)\n\n    if (sortSegments) rows.sort((a, b) => b.value - a.value)\n\n    const sum = rows.reduce((acc, row) => acc + row.value, 0)\n    return {\n      total: sum,\n      segments: rows.map((row, index) => ({\n        ...row,\n        share: sum > 0 ? (row.value / sum) * 100 : 0,\n        color: getSeriesColor(colorPalette, index)\n      }))\n    }\n  }, [data, categoryField, valueField, colorPalette, sortSegments])\n\n  try {\n    if (!data || data.length === 0) {\n      return <ChartEmptyState height={height} hint={t('chart.runtime.noDataHint.proportionBar')} />\n    }\n\n    if (!categoryField || !valueField) {\n      return <ChartConfigError height={height} hint={t('chart.runtime.configErrorHint.proportionBar')} />\n    }\n\n    if (segments.length === 0 || total === 0) {\n      return (\n        <ChartEmptyState\n          height={height}\n          titleKey=\"chart.runtime.noValidData\"\n          hint={t('chart.runtime.noValidDataHint.proportionBar')}\n        />\n      )\n    }\n\n    const showLabels = displayConfig.showLabels ?? true\n    const showPercentages = displayConfig.showPercentages ?? true\n    const decimals = displayConfig.decimals ?? 0\n\n    return (\n      <div\n        className=\"dc:w-full dc:h-full dc:flex dc:flex-col dc:justify-center dc:gap-3 dc:px-3 dc:py-2 dc:overflow-hidden\"\n        // Fill the parent rather than the `height` prop, which is a pixel value\n        // that can exceed the visible panel and push this short content low.\n        style={{ height: '100%', minHeight: '80px' }}\n        data-testid=\"proportion-bar\"\n      >\n        <div className=\"dc:flex dc:w-full dc:overflow-hidden dc:rounded-sm\" style={{ height: 10 }}>\n          {segments.map((segment) => (\n            <div\n              key={segment.id}\n              data-testid=\"proportion-bar-segment\"\n              title={`${segment.label}: ${formatAxisValue(segment.value, displayConfig.leftYAxisFormat)}`}\n              style={{ width: `${segment.share}%`, backgroundColor: segment.color }}\n            />\n          ))}\n        </div>\n\n        {(showLabels || showPercentages) && (\n          <div className=\"dc:flex dc:flex-wrap dc:gap-x-6 dc:gap-y-2\">\n            {segments.map((segment) => (\n              <div key={segment.id} className=\"dc:flex dc:flex-col dc:gap-0.5 dc:min-w-0\">\n                {showLabels && (\n                  <span\n                    className=\"text-dc-text-muted dc:uppercase dc:truncate dc:font-semibold\"\n                    style={{ fontSize: '11px', letterSpacing: '0.06em' }}\n                  >\n                    {segment.label}\n                  </span>\n                )}\n                {showPercentages && (\n                  <span\n                    className=\"dc:font-semibold dc:leading-none\"\n                    style={{ fontSize: '18px', color: segment.color }}\n                  >\n                    {segment.share.toFixed(decimals)}%\n                  </span>\n                )}\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    )\n  } catch (error) {\n    return <ChartRenderError height={height} chartType={getFieldLabel(valueField)} error={error} />\n  }\n})\n\nexport default ProportionBarChart\n"],"mappings":"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"}
+{"version":3,"file":"ProportionBarChart-D-Qt9nkF.js","names":[],"sources":["../../../src/client/components/charts/ProportionBarChart.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport { useTranslation } from '../../hooks/useTranslation.js'\nimport { useCubeFieldLabel } from '../../hooks/useCubeFieldLabel.js'\nimport { ChartEmptyState, ChartConfigError, ChartRenderError } from './ChartStates.js'\nimport { getSeriesColor } from './cartesianChartHelpers.js'\nimport { formatAxisValue } from '../../utils/chartUtils.js'\nimport type { ChartProps } from '../../types.js'\n\ninterface Segment {\n  /**\n   * React key. Category labels are not reliably unique - a query can return\n   * duplicates, and every null collapses to the same empty string - so the key\n   * is tied to the source row instead. Stable across sorting, which reorders\n   * the segments under the same identity.\n   */\n  id: string\n  label: string\n  value: number\n  share: number\n  color: string\n}\n\n/**\n * A single 100%-wide stacked bar plus a labelled percentage legend.\n *\n * A flatter alternative to a pie chart for part-to-whole breakdowns: shares are\n * far easier to compare along one axis than as angles, and it costs a fraction\n * of the vertical space. Deliberately plain HTML rather than Recharts — there is\n * no axis, scale or interaction to justify an SVG chart.\n */\nconst ProportionBarChart = React.memo(function ProportionBarChart({\n  data,\n  chartConfig,\n  displayConfig = {},\n  height = '100%',\n  colorPalette\n}: ChartProps) {\n  const { t } = useTranslation()\n  const getFieldLabel = useCubeFieldLabel()\n\n  const categoryField = useMemo(() => {\n    const x = chartConfig?.xAxis\n    return (Array.isArray(x) ? x[0] : x) || ''\n  }, [chartConfig?.xAxis])\n\n  const valueField = useMemo(() => {\n    const y = chartConfig?.yAxis\n    return (Array.isArray(y) ? y[0] : y) || ''\n  }, [chartConfig?.yAxis])\n\n  const sortSegments = displayConfig.sortSegments ?? false\n\n  const { segments, total } = useMemo(() => {\n    if (!data || !categoryField || !valueField) return { segments: [] as Segment[], total: 0 }\n\n    const rows = data\n      .map((row: any, sourceIndex: number) => {\n        const raw = row?.[valueField]\n        const num = typeof raw === 'number' ? raw : parseFloat(String(raw))\n        const label = String(row?.[categoryField] ?? '')\n        return {\n          id: `${sourceIndex}:${label}`,\n          label,\n          // Negative shares cannot be drawn in a part-to-whole bar.\n          value: !isNaN(num) && isFinite(num) && num > 0 ? num : 0\n        }\n      })\n      .filter((row) => row.value > 0)\n\n    if (sortSegments) rows.sort((a, b) => b.value - a.value)\n\n    const sum = rows.reduce((acc, row) => acc + row.value, 0)\n    return {\n      total: sum,\n      segments: rows.map((row, index) => ({\n        ...row,\n        share: sum > 0 ? (row.value / sum) * 100 : 0,\n        color: getSeriesColor(colorPalette, index)\n      }))\n    }\n  }, [data, categoryField, valueField, colorPalette, sortSegments])\n\n  try {\n    if (!data || data.length === 0) {\n      return <ChartEmptyState height={height} hint={t('chart.runtime.noDataHint.proportionBar')} />\n    }\n\n    if (!categoryField || !valueField) {\n      return <ChartConfigError height={height} hint={t('chart.runtime.configErrorHint.proportionBar')} />\n    }\n\n    if (segments.length === 0 || total === 0) {\n      return (\n        <ChartEmptyState\n          height={height}\n          titleKey=\"chart.runtime.noValidData\"\n          hint={t('chart.runtime.noValidDataHint.proportionBar')}\n        />\n      )\n    }\n\n    const showLabels = displayConfig.showLabels ?? true\n    const showPercentages = displayConfig.showPercentages ?? true\n    const decimals = displayConfig.decimals ?? 0\n\n    return (\n      <div\n        className=\"dc:w-full dc:h-full dc:flex dc:flex-col dc:justify-center dc:gap-3 dc:px-3 dc:py-2 dc:overflow-hidden\"\n        // Fill the parent rather than the `height` prop, which is a pixel value\n        // that can exceed the visible panel and push this short content low.\n        style={{ height: '100%', minHeight: '80px' }}\n        data-testid=\"proportion-bar\"\n      >\n        <div className=\"dc:flex dc:w-full dc:overflow-hidden dc:rounded-sm\" style={{ height: 10 }}>\n          {segments.map((segment) => (\n            <div\n              key={segment.id}\n              data-testid=\"proportion-bar-segment\"\n              title={`${segment.label}: ${formatAxisValue(segment.value, displayConfig.leftYAxisFormat)}`}\n              style={{ width: `${segment.share}%`, backgroundColor: segment.color }}\n            />\n          ))}\n        </div>\n\n        {(showLabels || showPercentages) && (\n          <div className=\"dc:flex dc:flex-wrap dc:gap-x-6 dc:gap-y-2\">\n            {segments.map((segment) => (\n              <div key={segment.id} className=\"dc:flex dc:flex-col dc:gap-0.5 dc:min-w-0\">\n                {showLabels && (\n                  <span\n                    className=\"text-dc-text-muted dc:uppercase dc:truncate dc:font-semibold\"\n                    style={{ fontSize: '11px', letterSpacing: '0.06em' }}\n                  >\n                    {segment.label}\n                  </span>\n                )}\n                {showPercentages && (\n                  <span\n                    className=\"dc:font-semibold dc:leading-none\"\n                    style={{ fontSize: '18px', color: segment.color }}\n                  >\n                    {segment.share.toFixed(decimals)}%\n                  </span>\n                )}\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    )\n  } catch (error) {\n    return <ChartRenderError height={height} chartType={getFieldLabel(valueField)} error={error} />\n  }\n})\n\nexport default ProportionBarChart\n"],"mappings":"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"}