@milaboratories/miplots4 1.2.1 → 1.2.3

package/dist/scatterplot/components/Grid.js

@@ -1,96 +1,134 @@
 import { GRID_GRAY as e } from "../../constants.js";
-import { getLineShape as t } from "../../utils/getLineShape.js";
-import { isContinuousAxis as n, isNumericScale as r } from "../utils/isNumericScale.js";
-import { useEffect as i, useState as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-var c = 1;
-function l(e, t) {
-	return r(e) ? e.ticks().filter((e) => !t.includes(e)) : e.domain();
+import { numberFormat as t } from "../../utils/numberFormat.js";
+import { getLineShape as n } from "../../utils/getLineShape.js";
+import { resolveSignificantLinesStyle as r } from "../../utils/significantLinesStyle.js";
+import { isContinuousAxis as i, isNumericScale as a } from "../utils/isNumericScale.js";
+import { useEffect as o, useState as s } from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+var d = 11, f = 1;
+function p(e, t) {
+	return a(e) ? e.ticks().filter((e) => !t.includes(e)) : e.domain();
 }
-function u({ scaleX: u, scaleY: d, width: f, height: p, axisX: m, axisY: h, frameType: g, updatingKey: _ = "" }) {
-	let { significantLines: v = [] } = m, { significantLines: y = [] } = h, [b, x] = a(() => l(u, v)), [S, C] = a(() => l(d, y));
-	return i(() => {
-		let e = l(u, v), t = l(d, y);
-		x(e), C(t);
+function m({ scaleX: m, scaleY: h, width: g, height: _, axisX: v, axisY: y, frameType: b, updatingKey: x = "" }) {
+	let { significantLines: S = [] } = v, { significantLines: C = [] } = y, [w, T] = s(() => p(m, S)), [E, D] = s(() => p(h, C));
+	return o(() => {
+		let e = p(m, S), t = p(h, C);
+		T(e), D(t);
 	}, [
-		u,
-		d,
-		_
-	]), /* @__PURE__ */ s("g", {
+		m,
+		h,
+		x
+	]), /* @__PURE__ */ u("g", {
 		stroke: e,
 		children: [
-			m.showGrid && b.map((e) => {
-				let t = u(e);
-				return /* @__PURE__ */ o("line", {
+			v.showGrid && w.map((e) => {
+				let t = m(e);
+				return /* @__PURE__ */ l("line", {
 					x1: t,
 					x2: t,
 					y1: 0,
-					y2: p
-				}, `x_${t}_${p}`);
+					y2: _
+				}, `x_${t}_${_}`);
 			}),
-			h.showGrid && S.map((e) => {
-				let t = d(e);
-				return /* @__PURE__ */ o("line", {
+			y.showGrid && E.map((e) => {
+				let t = h(e);
+				return /* @__PURE__ */ l("line", {
 					x1: 0,
-					x2: f,
+					x2: g,
 					y1: t,
 					y2: t
-				}, `y_${t}_${f}`);
+				}, `y_${t}_${g}`);
 			}),
-			r(u) && n(m) && /* @__PURE__ */ o("g", {
-				strokeDasharray: t(m.significantLinesStyle),
-				stroke: "#110529",
-				children: v.map((e) => {
-					let t = u(e);
-					return /* @__PURE__ */ o("line", {
-						x1: t,
-						x2: t,
-						y1: 0,
-						y2: p
-					}, `significant_${t}_${p}`);
-				})
-			}),
-			r(d) && n(h) && /* @__PURE__ */ o("g", {
-				strokeDasharray: t(h.significantLinesStyle),
-				stroke: "#110529",
-				children: y.map((e) => {
-					let t = d(e);
-					return /* @__PURE__ */ o("line", {
-						x1: 0,
-						x2: f,
-						y1: t,
-						y2: t
-					}, `significant_${t}_${f}`);
-				})
-			}),
-			g !== "empty" && /* @__PURE__ */ s("g", {
-				strokeWidth: c,
+			a(m) && i(v) && (() => {
+				let e = r(v.significantLinesStyle, "x");
+				return /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("g", {
+					strokeDasharray: n(e.shape),
+					stroke: "#110529",
+					children: S.map((e) => {
+						let t = m(e);
+						return /* @__PURE__ */ l("line", {
+							x1: t,
+							x2: t,
+							y1: 0,
+							y2: _
+						}, `significant_${t}_${_}`);
+					})
+				}), e.showLabel && /* @__PURE__ */ l("g", {
+					fill: "#110529",
+					fontSize: 10,
+					stroke: "none",
+					children: S.map((n) => {
+						let r = m(n);
+						if (r < 0 || r > g) return null;
+						let i = r < 24 ? "start" : r > g - 24 ? "end" : "middle", a = i === "start" ? 3 : i === "end" ? -3 : 0, o = e.labelPosition === "bottom" ? _ - 3 : d;
+						return /* @__PURE__ */ l("text", {
+							x: r + a,
+							y: o,
+							textAnchor: i,
+							children: t(n)
+						}, `significant_label_${r}`);
+					})
+				})] });
+			})(),
+			a(h) && i(y) && (() => {
+				let e = r(y.significantLinesStyle, "y");
+				return /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("g", {
+					strokeDasharray: n(e.shape),
+					stroke: "#110529",
+					children: C.map((e) => {
+						let t = h(e);
+						return /* @__PURE__ */ l("line", {
+							x1: 0,
+							x2: g,
+							y1: t,
+							y2: t
+						}, `significant_${t}_${g}`);
+					})
+				}), e.showLabel && /* @__PURE__ */ l("g", {
+					fill: "#110529",
+					fontSize: 10,
+					stroke: "none",
+					children: C.map((n) => {
+						let r = h(n);
+						if (r < 0 || r > _) return null;
+						let i = r < d + 3 ? r + d : r - 3, a = e.labelPosition === "right";
+						return /* @__PURE__ */ l("text", {
+							x: a ? g - 4 : 4,
+							y: i,
+							textAnchor: a ? "end" : "start",
+							children: t(n)
+						}, `significant_label_${r}`);
+					})
+				})] });
+			})(),
+			b !== "empty" && /* @__PURE__ */ u("g", {
+				strokeWidth: f,
 				children: [
-					(m.showGrid || g !== "left") && /* @__PURE__ */ o("line", {
-						stroke: g === "left" ? "#E1E3EB" : "#110529",
+					(v.showGrid || b !== "left") && /* @__PURE__ */ l("line", {
+						stroke: b === "left" ? "#E1E3EB" : "#110529",
 						x1: "0",
-						x2: f,
-						y1: p,
-						y2: p
+						x2: g,
+						y1: _,
+						y2: _
 					}),
-					(m.showGrid || g !== "bottom") && /* @__PURE__ */ o("line", {
-						stroke: g === "bottom" ? "#E1E3EB" : "#110529",
+					(v.showGrid || b !== "bottom") && /* @__PURE__ */ l("line", {
+						stroke: b === "bottom" ? "#E1E3EB" : "#110529",
 						x1: "0",
 						x2: "0",
 						y1: "0",
-						y2: p
+						y2: _
 					}),
-					(m.showGrid || g === "full") && /* @__PURE__ */ o("line", {
-						stroke: g === "full" ? "#110529" : "#E1E3EB",
-						x1: f,
-						x2: f,
+					(v.showGrid || b === "full") && /* @__PURE__ */ l("line", {
+						stroke: b === "full" ? "#110529" : "#E1E3EB",
+						x1: g,
+						x2: g,
 						y1: "0",
-						y2: p
+						y2: _
 					}),
-					(h.showGrid || g === "full") && /* @__PURE__ */ o("line", {
-						stroke: g === "full" ? "#110529" : "#E1E3EB",
+					(y.showGrid || b === "full") && /* @__PURE__ */ l("line", {
+						stroke: b === "full" ? "#110529" : "#E1E3EB",
 						x1: "0",
-						x2: f,
+						x2: g,
 						y1: "0",
 						y2: "0"
 					})
@@ -99,6 +137,6 @@ function u({ scaleX: u, scaleY: d, width: f, height: p, axisX: m, axisY: h, fram
 		]
 	});
 }
-export { u as Grid };
+export { m as Grid };
 
 //# sourceMappingURL=Grid.js.map

package/dist/scatterplot/components/Grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","names":[],"sources":["../../../src/scatterplot/components/Grid.tsx"],"sourcesContent":["import { BLACK, GRID_GRAY } from '../../constants';\nimport type { AxisSettings, AxisSettingsContinuous, FrameType } from '../../types';\nimport { getLineShape } from '../../utils/getLineShape';\nimport React from 'react';\nimport { useEffect, useState } from 'react';\nimport type { ChartScales } from './types';\nimport { isContinuousAxis, isNumericScale } from '../utils/isNumericScale';\n\ntype PointValue = { valueOf(): number; } & string;\n\nconst GRID_FRAME_WIDTH = 1;\n\ninterface GridProps {\n    scaleY: ChartScales['y'];\n    scaleX: ChartScales['x'];\n    width: number;\n    height: number;\n    axisX: AxisSettings;\n    axisY: AxisSettings;\n    frameType: FrameType;\n    updatingKey?: string;\n}\n\nfunction getTicks(scale: ChartScales['x' | 'y'], significantLines: number[]): (string | number)[] {\n    if (isNumericScale(scale)) {\n        return scale.ticks().filter(t => !significantLines.includes(t));\n    }\n    return scale.domain();\n}\n\nexport function Grid({ scaleX, scaleY, width, height, axisX, axisY, frameType, updatingKey = '' }: GridProps) {\n    const { significantLines: significantLinesX = [] } = axisX as AxisSettingsContinuous;\n    const { significantLines: significantLinesY = [] } = axisY as AxisSettingsContinuous;\n\n    const [ticksX, setTicksX] = useState<(string | number)[]>(() => getTicks(scaleX, significantLinesX));\n    const [ticksY, setTicksY] = useState<(string | number)[]>(() => getTicks(scaleY, significantLinesY));\n\n    useEffect(() => {\n        const ticksX = getTicks(scaleX, significantLinesX);\n        const ticksY = getTicks(scaleY, significantLinesY);\n        setTicksX(ticksX);\n        setTicksY(ticksY);\n    }, [scaleX, scaleY, updatingKey]);\n\n    return (\n        <g stroke={GRID_GRAY}>\n            {axisX.showGrid &&\n                ticksX.map((tick) => {\n                    const x = scaleX(tick as PointValue);\n                    return (\n                        <line key={`x_${x}_${height}`} x1={x} x2={x} y1={0} y2={height} />\n                    );\n                })}\n            {axisY.showGrid &&\n                ticksY.map(tick => {\n                    const y = scaleY(tick as PointValue);\n                    return (\n                        <line key={`y_${y}_${width}`} x1={0} x2={width} y1={y} y2={y} />\n                    );\n                })}\n            {isNumericScale(scaleX) && isContinuousAxis(axisX) && (\n                <g strokeDasharray={getLineShape(axisX.significantLinesStyle)} stroke={BLACK}>\n                    {significantLinesX.map(v => {\n                        const x = scaleX(v);\n                        return (\n                            <line key={`significant_${x}_${height}`} x1={x} x2={x} y1={0} y2={height} />\n                        );\n                    })}\n                </g>\n            )}\n            {isNumericScale(scaleY) && isContinuousAxis(axisY)  && (\n                <g strokeDasharray={getLineShape(axisY.significantLinesStyle)} stroke={BLACK}>\n                    {significantLinesY.map(v => {\n                        const y = scaleY(v);\n                        return (\n                            <line key={`significant_${y}_${width}`} x1={0} x2={width} y1={y} y2={y} />\n                        );\n                    })}\n                </g>\n            )}\n            {frameType !== 'empty' && (\n                <g strokeWidth={GRID_FRAME_WIDTH}>\n                    {(axisX.showGrid || frameType !== 'left') && <line stroke={frameType === 'left' ? GRID_GRAY : BLACK} x1=\"0\" x2={width} y1={height} y2={height} />}\n                    {(axisX.showGrid || frameType !== 'bottom') && <line stroke={frameType === 'bottom' ? GRID_GRAY : BLACK} x1=\"0\" x2=\"0\" y1=\"0\" y2={height} />}\n                    {(axisX.showGrid || frameType === 'full') && <line stroke={frameType === 'full' ? BLACK : GRID_GRAY} x1={width} x2={width} y1=\"0\" y2={height} />}\n                    {(axisY.showGrid || frameType === 'full') && <line stroke={frameType === 'full' ? BLACK : GRID_GRAY} x1=\"0\" x2={width} y1=\"0\" y2=\"0\" />}\n                </g>\n            )}\n        </g>\n    );\n}\n"],"mappings":";;;;;AAUA,IAAM,IAAmB;AAazB,SAAS,EAAS,GAA+B,GAAiD;AAI9F,QAHI,EAAe,EAAM,GACd,EAAM,OAAO,CAAC,QAAO,MAAK,CAAC,EAAiB,SAAS,EAAE,CAAC,GAE5D,EAAM,QAAQ;;AAGzB,SAAgB,EAAK,EAAE,WAAQ,WAAQ,UAAO,WAAQ,UAAO,UAAO,cAAW,iBAAc,MAAiB;CAC1G,IAAM,EAAE,kBAAkB,IAAoB,EAAE,KAAK,GAC/C,EAAE,kBAAkB,IAAoB,EAAE,KAAK,GAE/C,CAAC,GAAQ,KAAa,QAAoC,EAAS,GAAQ,EAAkB,CAAC,EAC9F,CAAC,GAAQ,KAAa,QAAoC,EAAS,GAAQ,EAAkB,CAAC;AASpG,QAPA,QAAgB;EACZ,IAAM,IAAS,EAAS,GAAQ,EAAkB,EAC5C,IAAS,EAAS,GAAQ,EAAkB;AAElD,EADA,EAAU,EAAO,EACjB,EAAU,EAAO;IAClB;EAAC;EAAQ;EAAQ;EAAY,CAAC,EAG7B,kBAAC,KAAD;EAAG,QAAQ;YAAX;GACK,EAAM,YACH,EAAO,KAAK,MAAS;IACjB,IAAM,IAAI,EAAO,EAAmB;AACpC,WACI,kBAAC,QAAD;KAA+B,IAAI;KAAG,IAAI;KAAG,IAAI;KAAG,IAAI;KAAU,EAAvD,KAAK,EAAE,GAAG,IAA6C;KAExE;GACL,EAAM,YACH,EAAO,KAAI,MAAQ;IACf,IAAM,IAAI,EAAO,EAAmB;AACpC,WACI,kBAAC,QAAD;KAA8B,IAAI;KAAG,IAAI;KAAO,IAAI;KAAG,IAAI;KAAK,EAArD,KAAK,EAAE,GAAG,IAA2C;KAEtE;GACL,EAAe,EAAO,IAAI,EAAiB,EAAM,IAC9C,kBAAC,KAAD;IAAG,iBAAiB,EAAa,EAAM,sBAAsB;IAAE,QAAA;cAC1D,EAAkB,KAAI,MAAK;KACxB,IAAM,IAAI,EAAO,EAAE;AACnB,YACI,kBAAC,QAAD;MAAyC,IAAI;MAAG,IAAI;MAAG,IAAI;MAAG,IAAI;MAAU,EAAjE,eAAe,EAAE,GAAG,IAA6C;MAElF;IACF,CAAA;GAEP,EAAe,EAAO,IAAI,EAAiB,EAAM,IAC9C,kBAAC,KAAD;IAAG,iBAAiB,EAAa,EAAM,sBAAsB;IAAE,QAAA;cAC1D,EAAkB,KAAI,MAAK;KACxB,IAAM,IAAI,EAAO,EAAE;AACnB,YACI,kBAAC,QAAD;MAAwC,IAAI;MAAG,IAAI;MAAO,IAAI;MAAG,IAAI;MAAK,EAA/D,eAAe,EAAE,GAAG,IAA2C;MAEhF;IACF,CAAA;GAEP,MAAc,WACX,kBAAC,KAAD;IAAG,aAAa;cAAhB;MACM,EAAM,YAAY,MAAc,WAAW,kBAAC,QAAD;MAAM,QAAQ,MAAc,SAAA,YAAA;MAA4B,IAAG;MAAI,IAAI;MAAO,IAAI;MAAQ,IAAI;MAAU,CAAA;MAC/I,EAAM,YAAY,MAAc,aAAa,kBAAC,QAAD;MAAM,QAAQ,MAAc,WAAA,YAAA;MAA8B,IAAG;MAAI,IAAG;MAAI,IAAG;MAAI,IAAI;MAAU,CAAA;MAC1I,EAAM,YAAY,MAAc,WAAW,kBAAC,QAAD;MAAM,QAAQ,MAAc,SAAA,YAAA;MAA4B,IAAI;MAAO,IAAI;MAAO,IAAG;MAAI,IAAI;MAAU,CAAA;MAC9I,EAAM,YAAY,MAAc,WAAW,kBAAC,QAAD;MAAM,QAAQ,MAAc,SAAA,YAAA;MAA4B,IAAG;MAAI,IAAI;MAAO,IAAG;MAAI,IAAG;MAAM,CAAA;KACvI;;GAER"}
+{"version":3,"file":"Grid.js","names":[],"sources":["../../../src/scatterplot/components/Grid.tsx"],"sourcesContent":["import { BLACK, GRID_GRAY } from '../../constants';\nimport type { AxisSettings, AxisSettingsContinuous, FrameType } from '../../types';\nimport { getLineShape } from '../../utils/getLineShape';\nimport { numberFormat } from '../../utils/numberFormat';\nimport { resolveSignificantLinesStyle } from '../../utils/significantLinesStyle';\nimport React from 'react';\nimport { useEffect, useState } from 'react';\nimport type { ChartScales } from './types';\nimport { isContinuousAxis, isNumericScale } from '../utils/isNumericScale';\n\nconst LABEL_EDGE_OFFSET = 11;\n\ntype PointValue = { valueOf(): number; } & string;\n\nconst GRID_FRAME_WIDTH = 1;\n\ninterface GridProps {\n    scaleY: ChartScales['y'];\n    scaleX: ChartScales['x'];\n    width: number;\n    height: number;\n    axisX: AxisSettings;\n    axisY: AxisSettings;\n    frameType: FrameType;\n    updatingKey?: string;\n}\n\nfunction getTicks(scale: ChartScales['x' | 'y'], significantLines: number[]): (string | number)[] {\n    if (isNumericScale(scale)) {\n        return scale.ticks().filter(t => !significantLines.includes(t));\n    }\n    return scale.domain();\n}\n\nexport function Grid({ scaleX, scaleY, width, height, axisX, axisY, frameType, updatingKey = '' }: GridProps) {\n    const { significantLines: significantLinesX = [] } = axisX as AxisSettingsContinuous;\n    const { significantLines: significantLinesY = [] } = axisY as AxisSettingsContinuous;\n\n    const [ticksX, setTicksX] = useState<(string | number)[]>(() => getTicks(scaleX, significantLinesX));\n    const [ticksY, setTicksY] = useState<(string | number)[]>(() => getTicks(scaleY, significantLinesY));\n\n    useEffect(() => {\n        const ticksX = getTicks(scaleX, significantLinesX);\n        const ticksY = getTicks(scaleY, significantLinesY);\n        setTicksX(ticksX);\n        setTicksY(ticksY);\n    }, [scaleX, scaleY, updatingKey]);\n\n    return (\n        <g stroke={GRID_GRAY}>\n            {axisX.showGrid &&\n                ticksX.map((tick) => {\n                    const x = scaleX(tick as PointValue);\n                    return (\n                        <line key={`x_${x}_${height}`} x1={x} x2={x} y1={0} y2={height} />\n                    );\n                })}\n            {axisY.showGrid &&\n                ticksY.map(tick => {\n                    const y = scaleY(tick as PointValue);\n                    return (\n                        <line key={`y_${y}_${width}`} x1={0} x2={width} y1={y} y2={y} />\n                    );\n                })}\n            {isNumericScale(scaleX) && isContinuousAxis(axisX) && (() => {\n                const xStyle = resolveSignificantLinesStyle(axisX.significantLinesStyle, 'x');\n                return (\n                    <>\n                        <g strokeDasharray={getLineShape(xStyle.shape)} stroke={BLACK}>\n                            {significantLinesX.map(v => {\n                                const x = scaleX(v);\n                                return (\n                                    <line key={`significant_${x}_${height}`} x1={x} x2={x} y1={0} y2={height} />\n                                );\n                            })}\n                        </g>\n                        {xStyle.showLabel && (\n                            <g fill={BLACK} fontSize={10} stroke=\"none\">\n                                {significantLinesX.map(v => {\n                                    const x = scaleX(v);\n                                    if (x < 0 || x > width) return null;\n                                    const anchor = x < 24 ? 'start' : x > width - 24 ? 'end' : 'middle';\n                                    const dx = anchor === 'start' ? 3 : anchor === 'end' ? -3 : 0;\n                                    const y = xStyle.labelPosition === 'bottom'\n                                        ? height - 3\n                                        : LABEL_EDGE_OFFSET;\n                                    return (\n                                        <text key={`significant_label_${x}`} x={x + dx} y={y} textAnchor={anchor}>\n                                            {numberFormat(v)}\n                                        </text>\n                                    );\n                                })}\n                            </g>\n                        )}\n                    </>\n                );\n            })()}\n            {isNumericScale(scaleY) && isContinuousAxis(axisY) && (() => {\n                const yStyle = resolveSignificantLinesStyle(axisY.significantLinesStyle, 'y');\n                return (\n                    <>\n                        <g strokeDasharray={getLineShape(yStyle.shape)} stroke={BLACK}>\n                            {significantLinesY.map(v => {\n                                const y = scaleY(v);\n                                return (\n                                    <line key={`significant_${y}_${width}`} x1={0} x2={width} y1={y} y2={y} />\n                                );\n                            })}\n                        </g>\n                        {yStyle.showLabel && (\n                            <g fill={BLACK} fontSize={10} stroke=\"none\">\n                                {significantLinesY.map(v => {\n                                    const y = scaleY(v);\n                                    if (y < 0 || y > height) return null;\n                                    const labelY = y < LABEL_EDGE_OFFSET + 3\n                                        ? y + LABEL_EDGE_OFFSET\n                                        : y - 3;\n                                    const onRight = yStyle.labelPosition === 'right';\n                                    const x = onRight ? width - 4 : 4;\n                                    return (\n                                        <text key={`significant_label_${y}`} x={x} y={labelY} textAnchor={onRight ? 'end' : 'start'}>\n                                            {numberFormat(v)}\n                                        </text>\n                                    );\n                                })}\n                            </g>\n                        )}\n                    </>\n                );\n            })()}\n            {frameType !== 'empty' && (\n                <g strokeWidth={GRID_FRAME_WIDTH}>\n                    {(axisX.showGrid || frameType !== 'left') && <line stroke={frameType === 'left' ? GRID_GRAY : BLACK} x1=\"0\" x2={width} y1={height} y2={height} />}\n                    {(axisX.showGrid || frameType !== 'bottom') && <line stroke={frameType === 'bottom' ? GRID_GRAY : BLACK} x1=\"0\" x2=\"0\" y1=\"0\" y2={height} />}\n                    {(axisX.showGrid || frameType === 'full') && <line stroke={frameType === 'full' ? BLACK : GRID_GRAY} x1={width} x2={width} y1=\"0\" y2={height} />}\n                    {(axisY.showGrid || frameType === 'full') && <line stroke={frameType === 'full' ? BLACK : GRID_GRAY} x1=\"0\" x2={width} y1=\"0\" y2=\"0\" />}\n                </g>\n            )}\n        </g>\n    );\n}\n"],"mappings":"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"}

package/dist/selection/ChartRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartRenderer.d.ts","sourceRoot":"","sources":["../../src/selection/ChartRenderer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ChartRenderer.d.ts","sourceRoot":"","sources":["../../src/selection/ChartRenderer.tsx"],"names":[],"mappings":"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"}

package/dist/selection/ChartRenderer.js

@@ -108,19 +108,18 @@ var f = class {
 		this.solidColor = n ? i : t;
 	}
 	createAxisLabels(e) {
-		let n = new t("500 14px Manrope"), i = this.orderedFaceted.facetKeys, o = i.map((e) => this.orderedFaceted.byFacet[e]?.stages.length ?? 0).reduce((e, t) => Math.max(e, t), 0), s = 0;
-		for (let e of i) for (let t of this.orderedFaceted.byFacet[e]?.stages ?? []) s = Math.max(s, n.getTextWidth(t.label));
-		this.maxLabelPx = s;
-		let c = o > 0 ? this.cellPlotWidth / o : this.cellPlotWidth;
-		this.xLabelsPosition = e.labelsPosition ?? (s > c * .65 ? "90deg" : "center");
-		let l = this.xLabelsPosition !== "center";
+		let n = new t("500 14px Manrope"), i = this.orderedFaceted.facetKeys, o = 0;
+		for (let e of i) for (let t of this.orderedFaceted.byFacet[e]?.filterNames ?? []) o = Math.max(o, n.getTextWidth(t));
+		this.maxLabelPx = o, this.xLabelsPosition = e.labelsPosition ?? "45deg";
+		let s = this.xLabelsPosition !== "center";
 		this.xLabelsByFacet = {}, this.xCountsByFacet = {}, this.maxLabelLines = 1;
 		for (let e of i) {
-			let t = this.orderedFaceted.byFacet[e]?.stages ?? [], n = {}, i = {};
-			for (let [e, o] of t.entries()) {
-				let t = l ? [o.label] : r(o.label, 120, 14);
-				n[String(e)] = t, i[String(e)] = a(o.total), this.maxLabelLines = Math.max(this.maxLabelLines, t.length);
+			let t = this.orderedFaceted.byFacet[e], n = {}, i = {};
+			for (let [e, i] of (t?.filterNames ?? []).entries()) {
+				let t = s ? [i] : r(i, 120, 14);
+				n[String(e)] = t, this.maxLabelLines = Math.max(this.maxLabelLines, t.length);
 			}
+			for (let [e, n] of (t?.stages ?? []).entries()) i[String(e)] = a(n.total);
 			this.xLabelsByFacet[e] = n, this.xCountsByFacet[e] = i;
 		}
 	}
@@ -215,7 +214,6 @@ var f = class {
 				countsByFacet: this.xCountsByFacet,
 				countsFontSize: 14,
 				labelsPosition: this.xLabelsPosition,
-				showGrid: f.showGrid,
 				showTicks: f.showTicks,
 				hiddenLabels: f.hiddenLabels,
 				title: f.title

package/dist/selection/ChartRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChartRenderer.js","names":[],"sources":["../../src/selection/ChartRenderer.tsx"],"sourcesContent":["import { scaleOrdinal } from 'd3-scale';\nimport type { ReactElement } from 'react';\nimport type { Root } from 'react-dom/client';\nimport { createRoot } from 'react-dom/client';\n\nimport { Error } from '../common/Error';\nimport type { LegendData, LegendItem } from '../common/types';\nimport { TITLE_LINE_HEIGHT, TITLE_MARGIN } from '../constants';\nimport { splitTextByWidth } from '../discrete/utils';\nimport type { ColumnName, FrameType, TitlePosition } from '../types';\nimport { arrangeLegendParts } from '../utils/arrangeLegendParts';\nimport { TextMeasurer } from '../utils/TextMeasurer/TextMeasurer';\nimport { ChartsGroup } from './components/ChartsGroup';\nimport type { Margins } from './components/types';\nimport {\n  AGGREGATE_RIBBON_COLOR,\n  AXIS_LABEL_LINE_HEIGHT,\n  COUNT_LINE_HEIGHT,\n  FACET_TITLE_FONT_PX,\n  FACET_TITLE_LINE,\n  FACET_TITLE_LINE_HEIGHT,\n  LABEL_LINE_HEIGHT_PX,\n  LABEL_ROTATION_THRESHOLD,\n  LABEL_WRAP_WIDTH_PX,\n  MIN_MARGIN,\n  MIN_PADDING,\n  X_COUNT_BOTTOM_PAD,\n  X_LABEL_TOP_PAD,\n  Y_TICK_RESERVE,\n} from './constants';\nimport type { FacetedSelectionData } from './createSelectionData';\nimport type {\n  SelectionFillColor,\n  SelectionSettingsImpl,\n  SelectionXAxisSettings,\n  SelectionYAxisSettings,\n} from './SelectionSettingsImpl';\nimport { formatCount, formatPercent } from './utils';\n\ntype GroupingSettings = NonNullable<SelectionSettingsImpl['grouping']>;\n\nclass ChartRenderer {\n  reactRoot: Root | null = null;\n  parentNode: HTMLElement | null = null;\n  rootNode: HTMLElement | null = null;\n  component: ReactElement = <></>;\n\n  // Single-cell plot dimensions (inputs to the grid layout).\n  cellPlotWidth = 0;\n  cellPlotHeight = 0;\n\n  // Grid shape.\n  nCols = 1;\n  nRows = 1;\n  isFaceted = false;\n  cellLabelHeight = 0;\n  orderedFaceted: FacetedSelectionData = { facetKeys: [], byFacet: {}, groupNames: [] };\n  facetLabels: Record<string, string[]> = {};\n  // Pre-wrapped per-facet title lines, sized to fit `cellPlotWidth`.\n  facetTitles: Record<string, string[]> = {};\n\n  // Grouping/color resolution.\n  grouped = false;\n  groupNames: string[] = [];\n  colorMap: Map<string, string> = new Map();\n  solidColor = '';\n\n  // Axis labels (per-facet, multiline support) + auto-rotation decision.\n  xLabelsByFacet: Record<string, Record<string, string[]>> = {};\n  xCountsByFacet: Record<string, Record<string, string>> = {};\n  xLabelsPosition: 'center' | '45deg' | '90deg' = 'center';\n  maxLabelLines = 1;\n  maxLabelPx = 0;\n\n  // Caption-derived padding pieces.\n  yTickWidth = 0;\n  labelBlock = 0;\n  xTitleHeight = 0;\n  yTitleWidth = 0;\n  // Tick-area reserves: full when labels are shown (room for tick mark + offset\n  // + axis title clearance), shrunk to the tick-mark width alone when labels\n  // are hidden so the chart can reclaim the freed space.\n  yTickReserve = 0;\n  xLabelTopReserve = 0;\n\n  // Per-cell paddings + grid offsets.\n  topPad = 0;\n  rightPad = MIN_PADDING;\n  fullLeftPad = 0;\n  fullBottomPad = 0;\n  colLeftPads: number[] = [];\n  rowBottomPads: number[] = [];\n  colXOffsets: number[] = [0];\n  rowYOffsets: number[] = [0];\n  gridWidth = 0;\n  gridHeight = 0;\n\n  // Outer layout.\n  legend: LegendData = { width: 0, height: 0, items: [] };\n  mainTitle: string[] = [];\n  margins: Margins = { top: MIN_MARGIN, bottom: MIN_MARGIN, left: MIN_MARGIN, right: MIN_MARGIN };\n  totalWidth = 0;\n  totalHeight = 0;\n\n  clear() {\n    if (this.parentNode && this.rootNode) {\n      this.parentNode.removeChild(this.rootNode);\n      this.parentNode = null;\n      this.rootNode = null;\n    }\n    setTimeout(() => {\n      this.reactRoot?.unmount();\n      this.reactRoot = null;\n    });\n  }\n\n  init(node: HTMLElement) {\n    if (this.parentNode === null) {\n      this.parentNode = node;\n      this.rootNode = document.createElement('div');\n      this.parentNode.appendChild(this.rootNode);\n      this.reactRoot = createRoot(this.rootNode);\n    }\n  }\n\n  updateChartSizes(width: number, height: number) {\n    this.cellPlotWidth = width;\n    this.cellPlotHeight = height;\n  }\n\n  updateGrid({\n    faceted,\n    facetLabels,\n    facetBy,\n    facetSettings,\n  }: {\n    faceted: FacetedSelectionData;\n    facetLabels: Record<string, string[]>;\n    facetBy: ColumnName[];\n    facetSettings: SelectionSettingsImpl['facetSettings'];\n  }) {\n    const orderedFacetKeys = facetSettings.order?.length\n      ? facetSettings.order.filter((k) => faceted.facetKeys.includes(k))\n      : faceted.facetKeys;\n    this.orderedFaceted = { ...faceted, facetKeys: orderedFacetKeys };\n    this.facetLabels = facetLabels;\n    this.isFaceted = facetBy.length > 0;\n\n    if (this.isFaceted) {\n      const wrapWidth = Math.max(this.cellPlotWidth, 40);\n      this.facetTitles = {};\n      let maxLines = 1;\n      for (const fk of orderedFacetKeys) {\n        const text = (facetLabels[fk] ?? []).join(' / ');\n        const lines = text ? splitTextByWidth(text, wrapWidth, FACET_TITLE_FONT_PX) : [];\n        this.facetTitles[fk] = lines;\n        if (lines.length > maxLines) maxLines = lines.length;\n      }\n      this.cellLabelHeight = FACET_TITLE_LINE + (maxLines - 1) * FACET_TITLE_LINE_HEIGHT;\n    } else {\n      this.facetTitles = {};\n      this.cellLabelHeight = 0;\n    }\n\n    const n = orderedFacetKeys.length;\n    this.nCols = Math.min(n, facetSettings.nCols ?? Math.max(1, Math.ceil(Math.sqrt(n))));\n    this.nRows = facetSettings.nRows ?? Math.max(1, Math.ceil(n / this.nCols));\n  }\n\n  updateGroupingMaps(grouping: GroupingSettings | undefined, fillColor: SelectionFillColor) {\n    // fillColor's shape is the \"fixed vs grouping\" signal (mirrors scatterplot\n    // dotFill). When a MappingLink, render grouped/stacked using\n    // `grouping.inheritedAes`. When a string, render solid bars in that color.\n    const isMappedFill = typeof fillColor === 'object' && fillColor !== null;\n    this.grouped = isMappedFill && Boolean(grouping);\n\n    const orderedGroupNames = grouping?.order\n      ? grouping.order.map(String).filter((n) => this.orderedFaceted.groupNames.includes(n))\n      : this.orderedFaceted.groupNames;\n    this.groupNames = [\n      ...orderedGroupNames,\n      ...this.orderedFaceted.groupNames.filter((n) => !orderedGroupNames.includes(n)),\n    ];\n\n    // colorMap is only consulted on the grouped path (Chart.tsx ungrouped/\n    // active-group paths use solidColor instead). Compose populates\n    // grouping.inheritedAes whenever fillColor is a MappingLink; missing\n    // entries fall back to the solid bar color downstream so the chart still\n    // renders if a group key drops out.\n    const inheritedAes = grouping?.inheritedAes;\n    this.colorMap = new Map<string, string>();\n    if (this.grouped && inheritedAes) {\n      for (const name of this.groupNames) {\n        const c = inheritedAes[name]?.fillColor;\n        if (c) this.colorMap.set(name, c);\n      }\n    }\n\n    // Concrete bar color for the ungrouped path. When fillColor is a\n    // MappingLink (grouped), Chart.tsx routes the unified ribbon through\n    // AGGREGATE_RIBBON_COLOR instead, so this value is only consulted as a\n    // (rare) colorMap-miss fallback in the active-group branch.\n    this.solidColor = isMappedFill ? AGGREGATE_RIBBON_COLOR : fillColor;\n  }\n\n  createAxisLabels(xAxis: SelectionXAxisSettings) {\n    const tm = new TextMeasurer('500 14px Manrope');\n    const facetKeys = this.orderedFaceted.facetKeys;\n\n    // Auto-rotate decision: the same `cellPlotWidth` drives every cell, so one\n    // decision applies to all. Rotate when any label is >65% of its band\n    // width — below that threshold a centered (possibly two-line) label still\n    // fits.\n    const nStages = facetKeys\n      .map((fk) => this.orderedFaceted.byFacet[fk]?.stages.length ?? 0)\n      .reduce((a, b) => Math.max(a, b), 0);\n    let maxLabelPx = 0;\n    for (const fk of facetKeys) {\n      for (const stage of this.orderedFaceted.byFacet[fk]?.stages ?? []) {\n        maxLabelPx = Math.max(maxLabelPx, tm.getTextWidth(stage.label));\n      }\n    }\n    this.maxLabelPx = maxLabelPx;\n    const bandWidth = nStages > 0 ? this.cellPlotWidth / nStages : this.cellPlotWidth;\n    // User override (form-set rotation) wins over the auto-decision.\n    this.xLabelsPosition =\n      xAxis.labelsPosition ??\n      (maxLabelPx > bandWidth * LABEL_ROTATION_THRESHOLD ? '90deg' : 'center');\n    const rotateLabels = this.xLabelsPosition !== 'center';\n\n    // Per-facet stage labels + counts. Centered → wrap to two lines at 120px;\n    // rotated 90° → one line per stage.\n    this.xLabelsByFacet = {};\n    this.xCountsByFacet = {};\n    this.maxLabelLines = 1;\n    for (const fk of facetKeys) {\n      const stages = this.orderedFaceted.byFacet[fk]?.stages ?? [];\n      const labels: Record<string, string[]> = {};\n      const counts: Record<string, string> = {};\n      for (const [i, stage] of stages.entries()) {\n        const lines = rotateLabels\n          ? [stage.label]\n          : splitTextByWidth(stage.label, LABEL_WRAP_WIDTH_PX, LABEL_LINE_HEIGHT_PX);\n        labels[String(i)] = lines;\n        counts[String(i)] = formatCount(stage.total);\n        this.maxLabelLines = Math.max(this.maxLabelLines, lines.length);\n      }\n      this.xLabelsByFacet[fk] = labels;\n      this.xCountsByFacet[fk] = counts;\n    }\n  }\n\n  updateCaptionsSize(xAxis: SelectionXAxisSettings, yAxis: SelectionYAxisSettings) {\n    const tm = new TextMeasurer('500 14px Manrope');\n\n    // Y axis: when labels are hidden, drop tick-label width AND most of the\n    // tick reserve (room for tick mark + offset + axis-title clearance).\n    // Histogram pattern: hidden → just tick-mark size, no offset.\n    if (yAxis.hiddenLabels) {\n      this.yTickWidth = 0;\n      this.yTickReserve = yAxis.showTicks ? 4 : 0;\n    } else {\n      // \"100%\" is the widest formatPercent output for selection's [0, 100]\n      // Y scale, regardless of d3's tick count choice.\n      this.yTickWidth = tm.getTextWidth(formatPercent(100));\n      this.yTickReserve = Y_TICK_RESERVE;\n    }\n\n    // X axis: same gating for label height block + the gap above the label.\n    if (xAxis.hiddenLabels) {\n      this.labelBlock = 0;\n      this.xLabelTopReserve = xAxis.showTicks ? 4 : 0;\n    } else {\n      const rotateLabels = this.xLabelsPosition !== 'center';\n      this.labelBlock = !rotateLabels\n        ? this.maxLabelLines * AXIS_LABEL_LINE_HEIGHT\n        : this.xLabelsPosition === '45deg'\n          ? Math.ceil(this.maxLabelPx * 0.71) + 10\n          : Math.ceil(this.maxLabelPx) + 10;\n      this.xLabelTopReserve = X_LABEL_TOP_PAD;\n    }\n\n    this.xTitleHeight = xAxis.title ? AXIS_LABEL_LINE_HEIGHT + 6 : 0;\n    this.yTitleWidth = yAxis.title ? AXIS_LABEL_LINE_HEIGHT + 4 : 0;\n  }\n\n  updateChartDimensions() {\n    // Axis paddings: full = reserve space for labels/title; slim = MIN_PADDING.\n    // Selection always uses edge-only axes when faceted (stages and Y range\n    // are structurally identical across cells), mirroring histogram's layout.\n    this.fullLeftPad = this.yTitleWidth + this.yTickWidth + this.yTickReserve;\n    this.fullBottomPad = this.xLabelTopReserve + this.labelBlock + this.xTitleHeight;\n    // topPad reserves only the count-label strip above each bar — vertical\n    // breathing room between rows comes from `cellLabelHeight` (facet title)\n    // + the previous row's `bottomPad`. Adding MIN_MARGIN here would\n    // double-count that gap and the stacked padding looks too loose\n    // compared to histogram/discrete.\n    this.topPad = COUNT_LINE_HEIGHT + X_COUNT_BOTTOM_PAD;\n    this.rightPad = MIN_PADDING;\n\n    // Per-column / per-row paddings. When faceted, only col 0 reserves the\n    // full Y-axis space and only the row(s) hosting bottom-edge cells reserve\n    // full X-axis-label space; other cells use MIN_PADDING. Non-faceted (a\n    // single cell) reserves both axes for that one cell.\n    this.colLeftPads = Array.from({ length: this.nCols }, (_, c) =>\n      !this.isFaceted || c === 0 ? this.fullLeftPad : MIN_PADDING,\n    );\n    // A row is \"bottom-edge\" if it's the last row, or it's nRows-2 in a\n    // ragged grid (some columns have only nRows-1 cells, so their last cell\n    // sits in row nRows-2 and needs the X-axis label space).\n    const n = this.orderedFaceted.facetKeys.length;\n    const isRagged = n % this.nCols !== 0;\n    this.rowBottomPads = Array.from({ length: this.nRows }, (_, r) => {\n      const isBottomRow = r === this.nRows - 1 || (r === this.nRows - 2 && isRagged);\n      return !this.isFaceted || isBottomRow ? this.fullBottomPad : MIN_PADDING;\n    });\n\n    this.colXOffsets = [0];\n    for (const [c, leftPad] of this.colLeftPads.entries()) {\n      this.colXOffsets.push(this.colXOffsets[c] + leftPad + this.cellPlotWidth + this.rightPad);\n    }\n    this.rowYOffsets = [0];\n    for (const [r, bottomPad] of this.rowBottomPads.entries()) {\n      this.rowYOffsets.push(\n        this.rowYOffsets[r] + this.topPad + this.cellLabelHeight + this.cellPlotHeight + bottomPad,\n      );\n    }\n    this.gridWidth = this.colXOffsets[this.nCols];\n    this.gridHeight = this.rowYOffsets[this.nRows];\n  }\n\n  updateLegendSize(showLegend: boolean, grouping: GroupingSettings | undefined) {\n    if (!showLegend || !this.grouped || this.groupNames.length === 0) {\n      this.legend = { width: 0, height: 0, items: [] };\n      return;\n    }\n    const legendItems: LegendItem[] = [\n      {\n        id: 'selection-group',\n        type: 'discreteColor',\n        title: grouping?.columnName.label ?? grouping?.columnName.value ?? '',\n        width: 0,\n        height: 0,\n        left: 0,\n        top: 0,\n        values: this.groupNames,\n        scale: scaleOrdinal<string, string>()\n          .domain(this.groupNames)\n          .range(this.groupNames.map((n) => this.colorMap.get(n) ?? '')),\n        labels: Object.fromEntries(\n          this.groupNames.map((n) => [\n            n,\n            n === 'null' ? (grouping?.columnName.nullValueLabel ?? 'N/A') : n,\n          ]),\n        ),\n      },\n    ];\n    // Legend height matches the grid's plot-body strip, like discrete.\n    const arranged = arrangeLegendParts(legendItems, this.cellPlotHeight);\n    const maxRight = arranged.reduce((m, it) => Math.max(m, it.left + it.width), 0);\n    this.legend = { width: maxRight + MIN_MARGIN, height: this.cellPlotHeight, items: arranged };\n  }\n\n  createMainTitle(title: string, showTitle: boolean) {\n    this.mainTitle =\n      showTitle && title ? splitTextByWidth(title, Math.max(this.cellPlotWidth, 40), 20) : [];\n  }\n\n  updateMargins() {\n    const titleBlock =\n      this.mainTitle.length > 0 ? this.mainTitle.length * TITLE_LINE_HEIGHT + TITLE_MARGIN * 2 : 0;\n    this.margins = {\n      top: Math.max(titleBlock, MIN_MARGIN),\n      bottom: MIN_MARGIN,\n      left: MIN_MARGIN,\n      right: MIN_MARGIN + this.legend.width,\n    };\n    this.totalWidth = this.margins.left + this.gridWidth + this.margins.right;\n    this.totalHeight = this.margins.top + this.gridHeight + this.margins.bottom;\n  }\n\n  render({\n    faceted,\n    facetLabels,\n    width,\n    height,\n    title,\n    showTitle,\n    grouping,\n    showLegend,\n    facetBy,\n    facetSettings,\n    xAxis,\n    yAxis,\n    frame,\n    titlePosition,\n    fillColor,\n    opacity,\n  }: {\n    faceted: FacetedSelectionData;\n    facetLabels: Record<string, string[]>;\n    width: number;\n    height: number;\n    title: string;\n    showTitle: boolean;\n    grouping: GroupingSettings | undefined;\n    showLegend: boolean;\n    facetBy: ColumnName[];\n    facetSettings: SelectionSettingsImpl['facetSettings'];\n    xAxis: SelectionXAxisSettings;\n    yAxis: SelectionYAxisSettings;\n    frame: FrameType;\n    titlePosition: TitlePosition;\n    fillColor: SelectionFillColor;\n    opacity: number;\n  }) {\n    this.updateChartSizes(width, height);\n    this.updateGrid({ faceted, facetLabels, facetBy, facetSettings });\n    this.updateGroupingMaps(grouping, fillColor);\n    this.createAxisLabels(xAxis);\n    this.updateCaptionsSize(xAxis, yAxis);\n    this.updateChartDimensions();\n    this.updateLegendSize(showLegend, grouping);\n    this.createMainTitle(title, showTitle);\n    this.updateMargins();\n\n    const component = (\n      <ChartsGroup\n        facetData={{\n          faceted: this.orderedFaceted,\n          facetLabels: this.facetLabels,\n          facetTitles: this.facetTitles,\n        }}\n        gridLayout={{\n          nRows: this.nRows,\n          nCols: this.nCols,\n          totalWidth: this.totalWidth,\n          totalHeight: this.totalHeight,\n          margins: this.margins,\n          cellPlotWidth: this.cellPlotWidth,\n          cellPlotHeight: this.cellPlotHeight,\n          cellLabelHeight: this.cellLabelHeight,\n          topPad: this.topPad,\n          rightPad: this.rightPad,\n          colLeftPads: this.colLeftPads,\n          rowBottomPads: this.rowBottomPads,\n          colXOffsets: this.colXOffsets,\n          rowYOffsets: this.rowYOffsets,\n          sharedX: this.isFaceted,\n          sharedY: this.isFaceted,\n        }}\n        xAxis={{\n          labelsByFacet: this.xLabelsByFacet,\n          countsByFacet: this.xCountsByFacet,\n          countsFontSize: 14,\n          labelsPosition: this.xLabelsPosition,\n          showGrid: xAxis.showGrid,\n          showTicks: xAxis.showTicks,\n          hiddenLabels: xAxis.hiddenLabels,\n          title: xAxis.title,\n        }}\n        yAxis={{\n          showGrid: yAxis.showGrid,\n          showTicks: yAxis.showTicks,\n          hiddenLabels: yAxis.hiddenLabels,\n          title: yAxis.title,\n        }}\n        style={{\n          frameType: this.isFaceted ? 'full' : frame,\n          barColor: this.solidColor,\n          opacity,\n          colorMap: this.colorMap,\n          nullValueLabel: grouping?.columnName.nullValueLabel,\n        }}\n        title={{\n          text: this.mainTitle,\n          show: this.mainTitle.length > 0,\n          position: titlePosition,\n        }}\n        legend={this.legend}\n        showFacetLabels={this.isFaceted}\n        grouped={this.grouped}\n        orderedGroupNames={this.groupNames}\n      />\n    );\n    this.component = component;\n    this.reactRoot?.render(component);\n  }\n\n  renderError(message: string) {\n    this.reactRoot?.render(<Error message={message} />);\n  }\n}\n\nexport default ChartRenderer;\n"],"mappings":"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"}
+{"version":3,"file":"ChartRenderer.js","names":[],"sources":["../../src/selection/ChartRenderer.tsx"],"sourcesContent":["import { scaleOrdinal } from 'd3-scale';\nimport type { ReactElement } from 'react';\nimport type { Root } from 'react-dom/client';\nimport { createRoot } from 'react-dom/client';\n\nimport { Error } from '../common/Error';\nimport type { LegendData, LegendItem } from '../common/types';\nimport { TITLE_LINE_HEIGHT, TITLE_MARGIN } from '../constants';\nimport { splitTextByWidth } from '../discrete/utils';\nimport type { ColumnName, FrameType, TitlePosition } from '../types';\nimport { arrangeLegendParts } from '../utils/arrangeLegendParts';\nimport { TextMeasurer } from '../utils/TextMeasurer/TextMeasurer';\nimport { ChartsGroup } from './components/ChartsGroup';\nimport type { Margins } from './components/types';\nimport {\n  AGGREGATE_RIBBON_COLOR,\n  AXIS_LABEL_LINE_HEIGHT,\n  COUNT_LINE_HEIGHT,\n  FACET_TITLE_FONT_PX,\n  FACET_TITLE_LINE,\n  FACET_TITLE_LINE_HEIGHT,\n  LABEL_LINE_HEIGHT_PX,\n  LABEL_WRAP_WIDTH_PX,\n  MIN_MARGIN,\n  MIN_PADDING,\n  X_COUNT_BOTTOM_PAD,\n  X_LABEL_TOP_PAD,\n  Y_TICK_RESERVE,\n} from './constants';\nimport type { FacetedSelectionData } from './createSelectionData';\nimport type {\n  SelectionFillColor,\n  SelectionSettingsImpl,\n  SelectionXAxisSettings,\n  SelectionYAxisSettings,\n} from './SelectionSettingsImpl';\nimport { formatCount, formatPercent } from './utils';\n\ntype GroupingSettings = NonNullable<SelectionSettingsImpl['grouping']>;\n\nclass ChartRenderer {\n  reactRoot: Root | null = null;\n  parentNode: HTMLElement | null = null;\n  rootNode: HTMLElement | null = null;\n  component: ReactElement = <></>;\n\n  // Single-cell plot dimensions (inputs to the grid layout).\n  cellPlotWidth = 0;\n  cellPlotHeight = 0;\n\n  // Grid shape.\n  nCols = 1;\n  nRows = 1;\n  isFaceted = false;\n  cellLabelHeight = 0;\n  orderedFaceted: FacetedSelectionData = { facetKeys: [], byFacet: {}, groupNames: [] };\n  facetLabels: Record<string, string[]> = {};\n  // Pre-wrapped per-facet title lines, sized to fit `cellPlotWidth`.\n  facetTitles: Record<string, string[]> = {};\n\n  // Grouping/color resolution.\n  grouped = false;\n  groupNames: string[] = [];\n  colorMap: Map<string, string> = new Map();\n  solidColor = '';\n\n  // Axis labels (per-facet, multiline support) + auto-rotation decision.\n  xLabelsByFacet: Record<string, Record<string, string[]>> = {};\n  xCountsByFacet: Record<string, Record<string, string>> = {};\n  xLabelsPosition: 'center' | '45deg' | '90deg' = 'center';\n  maxLabelLines = 1;\n  maxLabelPx = 0;\n\n  // Caption-derived padding pieces.\n  yTickWidth = 0;\n  labelBlock = 0;\n  xTitleHeight = 0;\n  yTitleWidth = 0;\n  // Tick-area reserves: full when labels are shown (room for tick mark + offset\n  // + axis title clearance), shrunk to the tick-mark width alone when labels\n  // are hidden so the chart can reclaim the freed space.\n  yTickReserve = 0;\n  xLabelTopReserve = 0;\n\n  // Per-cell paddings + grid offsets.\n  topPad = 0;\n  rightPad = MIN_PADDING;\n  fullLeftPad = 0;\n  fullBottomPad = 0;\n  colLeftPads: number[] = [];\n  rowBottomPads: number[] = [];\n  colXOffsets: number[] = [0];\n  rowYOffsets: number[] = [0];\n  gridWidth = 0;\n  gridHeight = 0;\n\n  // Outer layout.\n  legend: LegendData = { width: 0, height: 0, items: [] };\n  mainTitle: string[] = [];\n  margins: Margins = { top: MIN_MARGIN, bottom: MIN_MARGIN, left: MIN_MARGIN, right: MIN_MARGIN };\n  totalWidth = 0;\n  totalHeight = 0;\n\n  clear() {\n    if (this.parentNode && this.rootNode) {\n      this.parentNode.removeChild(this.rootNode);\n      this.parentNode = null;\n      this.rootNode = null;\n    }\n    setTimeout(() => {\n      this.reactRoot?.unmount();\n      this.reactRoot = null;\n    });\n  }\n\n  init(node: HTMLElement) {\n    if (this.parentNode === null) {\n      this.parentNode = node;\n      this.rootNode = document.createElement('div');\n      this.parentNode.appendChild(this.rootNode);\n      this.reactRoot = createRoot(this.rootNode);\n    }\n  }\n\n  updateChartSizes(width: number, height: number) {\n    this.cellPlotWidth = width;\n    this.cellPlotHeight = height;\n  }\n\n  updateGrid({\n    faceted,\n    facetLabels,\n    facetBy,\n    facetSettings,\n  }: {\n    faceted: FacetedSelectionData;\n    facetLabels: Record<string, string[]>;\n    facetBy: ColumnName[];\n    facetSettings: SelectionSettingsImpl['facetSettings'];\n  }) {\n    const orderedFacetKeys = facetSettings.order?.length\n      ? facetSettings.order.filter((k) => faceted.facetKeys.includes(k))\n      : faceted.facetKeys;\n    this.orderedFaceted = { ...faceted, facetKeys: orderedFacetKeys };\n    this.facetLabels = facetLabels;\n    this.isFaceted = facetBy.length > 0;\n\n    if (this.isFaceted) {\n      const wrapWidth = Math.max(this.cellPlotWidth, 40);\n      this.facetTitles = {};\n      let maxLines = 1;\n      for (const fk of orderedFacetKeys) {\n        const text = (facetLabels[fk] ?? []).join(' / ');\n        const lines = text ? splitTextByWidth(text, wrapWidth, FACET_TITLE_FONT_PX) : [];\n        this.facetTitles[fk] = lines;\n        if (lines.length > maxLines) maxLines = lines.length;\n      }\n      this.cellLabelHeight = FACET_TITLE_LINE + (maxLines - 1) * FACET_TITLE_LINE_HEIGHT;\n    } else {\n      this.facetTitles = {};\n      this.cellLabelHeight = 0;\n    }\n\n    const n = orderedFacetKeys.length;\n    this.nCols = Math.min(n, facetSettings.nCols ?? Math.max(1, Math.ceil(Math.sqrt(n))));\n    this.nRows = facetSettings.nRows ?? Math.max(1, Math.ceil(n / this.nCols));\n  }\n\n  updateGroupingMaps(grouping: GroupingSettings | undefined, fillColor: SelectionFillColor) {\n    // fillColor's shape is the \"fixed vs grouping\" signal (mirrors scatterplot\n    // dotFill). When a MappingLink, render grouped/stacked using\n    // `grouping.inheritedAes`. When a string, render solid bars in that color.\n    const isMappedFill = typeof fillColor === 'object' && fillColor !== null;\n    this.grouped = isMappedFill && Boolean(grouping);\n\n    const orderedGroupNames = grouping?.order\n      ? grouping.order.map(String).filter((n) => this.orderedFaceted.groupNames.includes(n))\n      : this.orderedFaceted.groupNames;\n    this.groupNames = [\n      ...orderedGroupNames,\n      ...this.orderedFaceted.groupNames.filter((n) => !orderedGroupNames.includes(n)),\n    ];\n\n    // colorMap is only consulted on the grouped path (Chart.tsx ungrouped/\n    // active-group paths use solidColor instead). Compose populates\n    // grouping.inheritedAes whenever fillColor is a MappingLink; missing\n    // entries fall back to the solid bar color downstream so the chart still\n    // renders if a group key drops out.\n    const inheritedAes = grouping?.inheritedAes;\n    this.colorMap = new Map<string, string>();\n    if (this.grouped && inheritedAes) {\n      for (const name of this.groupNames) {\n        const c = inheritedAes[name]?.fillColor;\n        if (c) this.colorMap.set(name, c);\n      }\n    }\n\n    // Concrete bar color for the ungrouped path. When fillColor is a\n    // MappingLink (grouped), Chart.tsx routes the unified ribbon through\n    // AGGREGATE_RIBBON_COLOR instead, so this value is only consulted as a\n    // (rare) colorMap-miss fallback in the active-group branch.\n    this.solidColor = isMappedFill ? AGGREGATE_RIBBON_COLOR : fillColor;\n  }\n\n  createAxisLabels(xAxis: SelectionXAxisSettings) {\n    const tm = new TextMeasurer('500 14px Manrope');\n    const facetKeys = this.orderedFaceted.facetKeys;\n\n    let maxLabelPx = 0;\n    for (const fk of facetKeys) {\n      for (const name of this.orderedFaceted.byFacet[fk]?.filterNames ?? []) {\n        maxLabelPx = Math.max(maxLabelPx, tm.getTextWidth(name));\n      }\n    }\n    this.maxLabelPx = maxLabelPx;\n    this.xLabelsPosition = xAxis.labelsPosition ?? '45deg';\n    const rotateLabels = this.xLabelsPosition !== 'center';\n\n    // labels = filter name per gap (N); counts = population total per bar (N+1).\n    // Centered labels wrap to two lines; rotated stay on one.\n    this.xLabelsByFacet = {};\n    this.xCountsByFacet = {};\n    this.maxLabelLines = 1;\n    for (const fk of facetKeys) {\n      const facetData = this.orderedFaceted.byFacet[fk];\n      const labels: Record<string, string[]> = {};\n      const counts: Record<string, string> = {};\n      for (const [gapIndex, name] of (facetData?.filterNames ?? []).entries()) {\n        const lines = rotateLabels\n          ? [name]\n          : splitTextByWidth(name, LABEL_WRAP_WIDTH_PX, LABEL_LINE_HEIGHT_PX);\n        labels[String(gapIndex)] = lines;\n        this.maxLabelLines = Math.max(this.maxLabelLines, lines.length);\n      }\n      for (const [barIndex, stage] of (facetData?.stages ?? []).entries()) {\n        counts[String(barIndex)] = formatCount(stage.total);\n      }\n      this.xLabelsByFacet[fk] = labels;\n      this.xCountsByFacet[fk] = counts;\n    }\n  }\n\n  updateCaptionsSize(xAxis: SelectionXAxisSettings, yAxis: SelectionYAxisSettings) {\n    const tm = new TextMeasurer('500 14px Manrope');\n\n    // Y axis: when labels are hidden, drop tick-label width AND most of the\n    // tick reserve (room for tick mark + offset + axis-title clearance).\n    // Histogram pattern: hidden → just tick-mark size, no offset.\n    if (yAxis.hiddenLabels) {\n      this.yTickWidth = 0;\n      this.yTickReserve = yAxis.showTicks ? 4 : 0;\n    } else {\n      // \"100%\" is the widest formatPercent output for selection's [0, 100]\n      // Y scale, regardless of d3's tick count choice.\n      this.yTickWidth = tm.getTextWidth(formatPercent(100));\n      this.yTickReserve = Y_TICK_RESERVE;\n    }\n\n    // X axis: same gating for label height block + the gap above the label.\n    if (xAxis.hiddenLabels) {\n      this.labelBlock = 0;\n      this.xLabelTopReserve = xAxis.showTicks ? 4 : 0;\n    } else {\n      const rotateLabels = this.xLabelsPosition !== 'center';\n      this.labelBlock = !rotateLabels\n        ? this.maxLabelLines * AXIS_LABEL_LINE_HEIGHT\n        : this.xLabelsPosition === '45deg'\n          ? Math.ceil(this.maxLabelPx * 0.71) + 10\n          : Math.ceil(this.maxLabelPx) + 10;\n      this.xLabelTopReserve = X_LABEL_TOP_PAD;\n    }\n\n    this.xTitleHeight = xAxis.title ? AXIS_LABEL_LINE_HEIGHT + 6 : 0;\n    this.yTitleWidth = yAxis.title ? AXIS_LABEL_LINE_HEIGHT + 4 : 0;\n  }\n\n  updateChartDimensions() {\n    // Axis paddings: full = reserve space for labels/title; slim = MIN_PADDING.\n    // Selection always uses edge-only axes when faceted (stages and Y range\n    // are structurally identical across cells), mirroring histogram's layout.\n    this.fullLeftPad = this.yTitleWidth + this.yTickWidth + this.yTickReserve;\n    this.fullBottomPad = this.xLabelTopReserve + this.labelBlock + this.xTitleHeight;\n    // topPad reserves only the count-label strip above each bar — vertical\n    // breathing room between rows comes from `cellLabelHeight` (facet title)\n    // + the previous row's `bottomPad`. Adding MIN_MARGIN here would\n    // double-count that gap and the stacked padding looks too loose\n    // compared to histogram/discrete.\n    this.topPad = COUNT_LINE_HEIGHT + X_COUNT_BOTTOM_PAD;\n    this.rightPad = MIN_PADDING;\n\n    // Per-column / per-row paddings. When faceted, only col 0 reserves the\n    // full Y-axis space and only the row(s) hosting bottom-edge cells reserve\n    // full X-axis-label space; other cells use MIN_PADDING. Non-faceted (a\n    // single cell) reserves both axes for that one cell.\n    this.colLeftPads = Array.from({ length: this.nCols }, (_, c) =>\n      !this.isFaceted || c === 0 ? this.fullLeftPad : MIN_PADDING,\n    );\n    // A row is \"bottom-edge\" if it's the last row, or it's nRows-2 in a\n    // ragged grid (some columns have only nRows-1 cells, so their last cell\n    // sits in row nRows-2 and needs the X-axis label space).\n    const n = this.orderedFaceted.facetKeys.length;\n    const isRagged = n % this.nCols !== 0;\n    this.rowBottomPads = Array.from({ length: this.nRows }, (_, r) => {\n      const isBottomRow = r === this.nRows - 1 || (r === this.nRows - 2 && isRagged);\n      return !this.isFaceted || isBottomRow ? this.fullBottomPad : MIN_PADDING;\n    });\n\n    this.colXOffsets = [0];\n    for (const [c, leftPad] of this.colLeftPads.entries()) {\n      this.colXOffsets.push(this.colXOffsets[c] + leftPad + this.cellPlotWidth + this.rightPad);\n    }\n    this.rowYOffsets = [0];\n    for (const [r, bottomPad] of this.rowBottomPads.entries()) {\n      this.rowYOffsets.push(\n        this.rowYOffsets[r] + this.topPad + this.cellLabelHeight + this.cellPlotHeight + bottomPad,\n      );\n    }\n    this.gridWidth = this.colXOffsets[this.nCols];\n    this.gridHeight = this.rowYOffsets[this.nRows];\n  }\n\n  updateLegendSize(showLegend: boolean, grouping: GroupingSettings | undefined) {\n    if (!showLegend || !this.grouped || this.groupNames.length === 0) {\n      this.legend = { width: 0, height: 0, items: [] };\n      return;\n    }\n    const legendItems: LegendItem[] = [\n      {\n        id: 'selection-group',\n        type: 'discreteColor',\n        title: grouping?.columnName.label ?? grouping?.columnName.value ?? '',\n        width: 0,\n        height: 0,\n        left: 0,\n        top: 0,\n        values: this.groupNames,\n        scale: scaleOrdinal<string, string>()\n          .domain(this.groupNames)\n          .range(this.groupNames.map((n) => this.colorMap.get(n) ?? '')),\n        labels: Object.fromEntries(\n          this.groupNames.map((n) => [\n            n,\n            n === 'null' ? (grouping?.columnName.nullValueLabel ?? 'N/A') : n,\n          ]),\n        ),\n      },\n    ];\n    // Legend height matches the grid's plot-body strip, like discrete.\n    const arranged = arrangeLegendParts(legendItems, this.cellPlotHeight);\n    const maxRight = arranged.reduce((m, it) => Math.max(m, it.left + it.width), 0);\n    this.legend = { width: maxRight + MIN_MARGIN, height: this.cellPlotHeight, items: arranged };\n  }\n\n  createMainTitle(title: string, showTitle: boolean) {\n    this.mainTitle =\n      showTitle && title ? splitTextByWidth(title, Math.max(this.cellPlotWidth, 40), 20) : [];\n  }\n\n  updateMargins() {\n    const titleBlock =\n      this.mainTitle.length > 0 ? this.mainTitle.length * TITLE_LINE_HEIGHT + TITLE_MARGIN * 2 : 0;\n    this.margins = {\n      top: Math.max(titleBlock, MIN_MARGIN),\n      bottom: MIN_MARGIN,\n      left: MIN_MARGIN,\n      right: MIN_MARGIN + this.legend.width,\n    };\n    this.totalWidth = this.margins.left + this.gridWidth + this.margins.right;\n    this.totalHeight = this.margins.top + this.gridHeight + this.margins.bottom;\n  }\n\n  render({\n    faceted,\n    facetLabels,\n    width,\n    height,\n    title,\n    showTitle,\n    grouping,\n    showLegend,\n    facetBy,\n    facetSettings,\n    xAxis,\n    yAxis,\n    frame,\n    titlePosition,\n    fillColor,\n    opacity,\n  }: {\n    faceted: FacetedSelectionData;\n    facetLabels: Record<string, string[]>;\n    width: number;\n    height: number;\n    title: string;\n    showTitle: boolean;\n    grouping: GroupingSettings | undefined;\n    showLegend: boolean;\n    facetBy: ColumnName[];\n    facetSettings: SelectionSettingsImpl['facetSettings'];\n    xAxis: SelectionXAxisSettings;\n    yAxis: SelectionYAxisSettings;\n    frame: FrameType;\n    titlePosition: TitlePosition;\n    fillColor: SelectionFillColor;\n    opacity: number;\n  }) {\n    this.updateChartSizes(width, height);\n    this.updateGrid({ faceted, facetLabels, facetBy, facetSettings });\n    this.updateGroupingMaps(grouping, fillColor);\n    this.createAxisLabels(xAxis);\n    this.updateCaptionsSize(xAxis, yAxis);\n    this.updateChartDimensions();\n    this.updateLegendSize(showLegend, grouping);\n    this.createMainTitle(title, showTitle);\n    this.updateMargins();\n\n    const component = (\n      <ChartsGroup\n        facetData={{\n          faceted: this.orderedFaceted,\n          facetLabels: this.facetLabels,\n          facetTitles: this.facetTitles,\n        }}\n        gridLayout={{\n          nRows: this.nRows,\n          nCols: this.nCols,\n          totalWidth: this.totalWidth,\n          totalHeight: this.totalHeight,\n          margins: this.margins,\n          cellPlotWidth: this.cellPlotWidth,\n          cellPlotHeight: this.cellPlotHeight,\n          cellLabelHeight: this.cellLabelHeight,\n          topPad: this.topPad,\n          rightPad: this.rightPad,\n          colLeftPads: this.colLeftPads,\n          rowBottomPads: this.rowBottomPads,\n          colXOffsets: this.colXOffsets,\n          rowYOffsets: this.rowYOffsets,\n          sharedX: this.isFaceted,\n          sharedY: this.isFaceted,\n        }}\n        xAxis={{\n          labelsByFacet: this.xLabelsByFacet,\n          countsByFacet: this.xCountsByFacet,\n          countsFontSize: 14,\n          labelsPosition: this.xLabelsPosition,\n          showTicks: xAxis.showTicks,\n          hiddenLabels: xAxis.hiddenLabels,\n          title: xAxis.title,\n        }}\n        yAxis={{\n          showGrid: yAxis.showGrid,\n          showTicks: yAxis.showTicks,\n          hiddenLabels: yAxis.hiddenLabels,\n          title: yAxis.title,\n        }}\n        style={{\n          frameType: this.isFaceted ? 'full' : frame,\n          barColor: this.solidColor,\n          opacity,\n          colorMap: this.colorMap,\n          nullValueLabel: grouping?.columnName.nullValueLabel,\n        }}\n        title={{\n          text: this.mainTitle,\n          show: this.mainTitle.length > 0,\n          position: titlePosition,\n        }}\n        legend={this.legend}\n        showFacetLabels={this.isFaceted}\n        grouped={this.grouped}\n        orderedGroupNames={this.groupNames}\n      />\n    );\n    this.component = component;\n    this.reactRoot?.render(component);\n  }\n\n  renderError(message: string) {\n    this.reactRoot?.render(<Error message={message} />);\n  }\n}\n\nexport default ChartRenderer;\n"],"mappings":";;;;;;;;;;;AAwCA,IAAM,IAAN,MAAoB;CAClB,YAAyB;CACzB,aAAiC;CACjC,WAA+B;CAC/B,YAA0B,kBAAA,GAAA,EAAK,CAAA;CAG/B,gBAAgB;CAChB,iBAAiB;CAGjB,QAAQ;CACR,QAAQ;CACR,YAAY;CACZ,kBAAkB;CAClB,iBAAuC;EAAE,WAAW,EAAE;EAAE,SAAS,EAAE;EAAE,YAAY,EAAE;EAAE;CACrF,cAAwC,EAAE;CAE1C,cAAwC,EAAE;CAG1C,UAAU;CACV,aAAuB,EAAE;CACzB,2BAAgC,IAAI,KAAK;CACzC,aAAa;CAGb,iBAA2D,EAAE;CAC7D,iBAAyD,EAAE;CAC3D,kBAAgD;CAChD,gBAAgB;CAChB,aAAa;CAGb,aAAa;CACb,aAAa;CACb,eAAe;CACf,cAAc;CAId,eAAe;CACf,mBAAmB;CAGnB,SAAS;CACT,WAAA;CACA,cAAc;CACd,gBAAgB;CAChB,cAAwB,EAAE;CAC1B,gBAA0B,EAAE;CAC5B,cAAwB,CAAC,EAAE;CAC3B,cAAwB,CAAC,EAAE;CAC3B,YAAY;CACZ,aAAa;CAGb,SAAqB;EAAE,OAAO;EAAG,QAAQ;EAAG,OAAO,EAAE;EAAE;CACvD,YAAsB,EAAE;CACxB,UAAmB;EAAE,KAAA;EAAiB,QAAA;EAAoB,MAAA;EAAkB,OAAA;EAAmB;CAC/F,aAAa;CACb,cAAc;CAEd,QAAQ;AAMN,EALI,KAAK,cAAc,KAAK,aAC1B,KAAK,WAAW,YAAY,KAAK,SAAS,EAC1C,KAAK,aAAa,MAClB,KAAK,WAAW,OAElB,iBAAiB;AAEf,GADA,KAAK,WAAW,SAAS,EACzB,KAAK,YAAY;IACjB;;CAGJ,KAAK,GAAmB;AACtB,EAAI,KAAK,eAAe,SACtB,KAAK,aAAa,GAClB,KAAK,WAAW,SAAS,cAAc,MAAM,EAC7C,KAAK,WAAW,YAAY,KAAK,SAAS,EAC1C,KAAK,YAAY,EAAW,KAAK,SAAS;;CAI9C,iBAAiB,GAAe,GAAgB;AAE9C,EADA,KAAK,gBAAgB,GACrB,KAAK,iBAAiB;;CAGxB,WAAW,EACT,YACA,gBACA,YACA,oBAMC;EACD,IAAM,IAAmB,EAAc,OAAO,SAC1C,EAAc,MAAM,QAAQ,MAAM,EAAQ,UAAU,SAAS,EAAE,CAAC,GAChE,EAAQ;AAKZ,MAJA,KAAK,iBAAiB;GAAE,GAAG;GAAS,WAAW;GAAkB,EACjE,KAAK,cAAc,GACnB,KAAK,YAAY,EAAQ,SAAS,GAE9B,KAAK,WAAW;GAClB,IAAM,IAAY,KAAK,IAAI,KAAK,eAAe,GAAG;AAClD,QAAK,cAAc,EAAE;GACrB,IAAI,IAAW;AACf,QAAK,IAAM,KAAM,GAAkB;IACjC,IAAM,KAAQ,EAAY,MAAO,EAAE,EAAE,KAAK,MAAM,EAC1C,IAAQ,IAAO,EAAiB,GAAM,GAAA,GAA+B,GAAG,EAAE;AAEhF,IADA,KAAK,YAAY,KAAM,GACnB,EAAM,SAAS,MAAU,IAAW,EAAM;;AAEhD,QAAK,kBAAA,MAAsC,IAAW,KAAA;QAGtD,CADA,KAAK,cAAc,EAAE,EACrB,KAAK,kBAAkB;EAGzB,IAAM,IAAI,EAAiB;AAE3B,EADA,KAAK,QAAQ,KAAK,IAAI,GAAG,EAAc,SAAS,KAAK,IAAI,GAAG,KAAK,KAAK,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,EACrF,KAAK,QAAQ,EAAc,SAAS,KAAK,IAAI,GAAG,KAAK,KAAK,IAAI,KAAK,MAAM,CAAC;;CAG5E,mBAAmB,GAAwC,GAA+B;EAIxF,IAAM,IAAe,OAAO,KAAc,cAAY;AACtD,OAAK,UAAU,KAAgB,EAAQ;EAEvC,IAAM,IAAoB,GAAU,QAChC,EAAS,MAAM,IAAI,OAAO,CAAC,QAAQ,MAAM,KAAK,eAAe,WAAW,SAAS,EAAE,CAAC,GACpF,KAAK,eAAe;AACxB,OAAK,aAAa,CAChB,GAAG,GACH,GAAG,KAAK,eAAe,WAAW,QAAQ,MAAM,CAAC,EAAkB,SAAS,EAAE,CAAC,CAChF;EAOD,IAAM,IAAe,GAAU;AAE/B,MADA,KAAK,2BAAW,IAAI,KAAqB,EACrC,KAAK,WAAW,EAClB,MAAK,IAAM,KAAQ,KAAK,YAAY;GAClC,IAAM,IAAI,EAAa,IAAO;AAC9B,GAAI,KAAG,KAAK,SAAS,IAAI,GAAM,EAAE;;AAQrC,OAAK,aAAa,IAAe,IAAyB;;CAG5D,iBAAiB,GAA+B;EAC9C,IAAM,IAAK,IAAI,EAAa,mBAAmB,EACzC,IAAY,KAAK,eAAe,WAElC,IAAa;AACjB,OAAK,IAAM,KAAM,EACf,MAAK,IAAM,KAAQ,KAAK,eAAe,QAAQ,IAAK,eAAe,EAAE,CACnE,KAAa,KAAK,IAAI,GAAY,EAAG,aAAa,EAAK,CAAC;AAI5D,EADA,KAAK,aAAa,GAClB,KAAK,kBAAkB,EAAM,kBAAkB;EAC/C,IAAM,IAAe,KAAK,oBAAoB;AAM9C,EAFA,KAAK,iBAAiB,EAAE,EACxB,KAAK,iBAAiB,EAAE,EACxB,KAAK,gBAAgB;AACrB,OAAK,IAAM,KAAM,GAAW;GAC1B,IAAM,IAAY,KAAK,eAAe,QAAQ,IACxC,IAAmC,EAAE,EACrC,IAAiC,EAAE;AACzC,QAAK,IAAM,CAAC,GAAU,OAAU,GAAW,eAAe,EAAE,EAAE,SAAS,EAAE;IACvE,IAAM,IAAQ,IACV,CAAC,EAAK,GACN,EAAiB,GAAA,KAAA,GAAgD;AAErE,IADA,EAAO,OAAO,EAAS,IAAI,GAC3B,KAAK,gBAAgB,KAAK,IAAI,KAAK,eAAe,EAAM,OAAO;;AAEjE,QAAK,IAAM,CAAC,GAAU,OAAW,GAAW,UAAU,EAAE,EAAE,SAAS,CACjE,GAAO,OAAO,EAAS,IAAI,EAAY,EAAM,MAAM;AAGrD,GADA,KAAK,eAAe,KAAM,GAC1B,KAAK,eAAe,KAAM;;;CAI9B,mBAAmB,GAA+B,GAA+B;EAC/E,IAAM,IAAK,IAAI,EAAa,mBAAmB;AA8B/C,EAzBI,EAAM,gBACR,KAAK,aAAa,GAClB,KAAK,eAAe,EAAM,YAAY,IAAI,MAI1C,KAAK,aAAa,EAAG,aAAa,EAAc,IAAI,CAAC,EACrD,KAAK,eAAA,KAIH,EAAM,gBACR,KAAK,aAAa,GAClB,KAAK,mBAAmB,EAAM,YAAY,IAAI,MAG9C,KAAK,aADgB,KAAK,oBAAoB,WAE1C,KAAK,gBAAA,KACL,KAAK,oBAAoB,UACvB,KAAK,KAAK,KAAK,aAAa,IAAK,GAAG,KACpC,KAAK,KAAK,KAAK,WAAW,GAAG,IACnC,KAAK,mBAAA,IAGP,KAAK,eAAe,EAAM,QAAA,KAAqC,GAC/D,KAAK,cAAc,EAAM,QAAA,KAAqC;;CAGhE,wBAAwB;AAkBtB,EAdA,KAAK,cAAc,KAAK,cAAc,KAAK,aAAa,KAAK,cAC7D,KAAK,gBAAgB,KAAK,mBAAmB,KAAK,aAAa,KAAK,cAMpE,KAAK,SAAA,IACL,KAAK,WAAA,IAML,KAAK,cAAc,MAAM,KAAK,EAAE,QAAQ,KAAK,OAAO,GAAG,GAAG,MACxD,CAAC,KAAK,aAAa,MAAM,IAAI,KAAK,cAAA,GACnC;EAKD,IAAM,IADI,KAAK,eAAe,UAAU,SACnB,KAAK,UAAU;AAMpC,EALA,KAAK,gBAAgB,MAAM,KAAK,EAAE,QAAQ,KAAK,OAAO,GAAG,GAAG,MAAM;GAChE,IAAM,IAAc,MAAM,KAAK,QAAQ,KAAM,MAAM,KAAK,QAAQ,KAAK;AACrE,UAAO,CAAC,KAAK,aAAa,IAAc,KAAK,gBAAA;IAC7C,EAEF,KAAK,cAAc,CAAC,EAAE;AACtB,OAAK,IAAM,CAAC,GAAG,MAAY,KAAK,YAAY,SAAS,CACnD,MAAK,YAAY,KAAK,KAAK,YAAY,KAAK,IAAU,KAAK,gBAAgB,KAAK,SAAS;AAE3F,OAAK,cAAc,CAAC,EAAE;AACtB,OAAK,IAAM,CAAC,GAAG,MAAc,KAAK,cAAc,SAAS,CACvD,MAAK,YAAY,KACf,KAAK,YAAY,KAAK,KAAK,SAAS,KAAK,kBAAkB,KAAK,iBAAiB,EAClF;AAGH,EADA,KAAK,YAAY,KAAK,YAAY,KAAK,QACvC,KAAK,aAAa,KAAK,YAAY,KAAK;;CAG1C,iBAAiB,GAAqB,GAAwC;AAC5E,MAAI,CAAC,KAAc,CAAC,KAAK,WAAW,KAAK,WAAW,WAAW,GAAG;AAChE,QAAK,SAAS;IAAE,OAAO;IAAG,QAAQ;IAAG,OAAO,EAAE;IAAE;AAChD;;EAwBF,IAAM,IAAW,EAtBiB,CAChC;GACE,IAAI;GACJ,MAAM;GACN,OAAO,GAAU,WAAW,SAAS,GAAU,WAAW,SAAS;GACnE,OAAO;GACP,QAAQ;GACR,MAAM;GACN,KAAK;GACL,QAAQ,KAAK;GACb,OAAO,GAA8B,CAClC,OAAO,KAAK,WAAW,CACvB,MAAM,KAAK,WAAW,KAAK,MAAM,KAAK,SAAS,IAAI,EAAE,IAAI,GAAG,CAAC;GAChE,QAAQ,OAAO,YACb,KAAK,WAAW,KAAK,MAAM,CACzB,GACA,MAAM,SAAU,GAAU,WAAW,kBAAkB,QAAS,EACjE,CAAC,CACH;GACF,CACF,EAEgD,KAAK,eAAe;AAErE,OAAK,SAAS;GAAE,OADC,EAAS,QAAQ,GAAG,MAAO,KAAK,IAAI,GAAG,EAAG,OAAO,EAAG,MAAM,EAAE,EAAE,GAAA;GACjC,QAAQ,KAAK;GAAgB,OAAO;GAAU;;CAG9F,gBAAgB,GAAe,GAAoB;AACjD,OAAK,YACH,KAAa,IAAQ,EAAiB,GAAO,KAAK,IAAI,KAAK,eAAe,GAAG,EAAE,GAAG,GAAG,EAAE;;CAG3F,gBAAgB;EACd,IAAM,IACJ,KAAK,UAAU,SAAS,IAAI,KAAK,UAAU,SAAA,KAAA,KAAgD;AAQ7F,EAPA,KAAK,UAAU;GACb,KAAK,KAAK,IAAI,GAAA,GAAuB;GACrC,QAAA;GACA,MAAA;GACA,OAAA,KAAoB,KAAK,OAAO;GACjC,EACD,KAAK,aAAa,KAAK,QAAQ,OAAO,KAAK,YAAY,KAAK,QAAQ,OACpE,KAAK,cAAc,KAAK,QAAQ,MAAM,KAAK,aAAa,KAAK,QAAQ;;CAGvE,OAAO,EACL,YACA,gBACA,UACA,WACA,UACA,cACA,aACA,eACA,YACA,kBACA,UACA,UACA,UACA,kBACA,cACA,cAkBC;AASD,EARA,KAAK,iBAAiB,GAAO,EAAO,EACpC,KAAK,WAAW;GAAE;GAAS;GAAa;GAAS;GAAe,CAAC,EACjE,KAAK,mBAAmB,GAAU,EAAU,EAC5C,KAAK,iBAAiB,EAAM,EAC5B,KAAK,mBAAmB,GAAO,EAAM,EACrC,KAAK,uBAAuB,EAC5B,KAAK,iBAAiB,GAAY,EAAS,EAC3C,KAAK,gBAAgB,GAAO,EAAU,EACtC,KAAK,eAAe;EAEpB,IAAM,IACJ,kBAAC,GAAD;GACE,WAAW;IACT,SAAS,KAAK;IACd,aAAa,KAAK;IAClB,aAAa,KAAK;IACnB;GACD,YAAY;IACV,OAAO,KAAK;IACZ,OAAO,KAAK;IACZ,YAAY,KAAK;IACjB,aAAa,KAAK;IAClB,SAAS,KAAK;IACd,eAAe,KAAK;IACpB,gBAAgB,KAAK;IACrB,iBAAiB,KAAK;IACtB,QAAQ,KAAK;IACb,UAAU,KAAK;IACf,aAAa,KAAK;IAClB,eAAe,KAAK;IACpB,aAAa,KAAK;IAClB,aAAa,KAAK;IAClB,SAAS,KAAK;IACd,SAAS,KAAK;IACf;GACD,OAAO;IACL,eAAe,KAAK;IACpB,eAAe,KAAK;IACpB,gBAAgB;IAChB,gBAAgB,KAAK;IACrB,WAAW,EAAM;IACjB,cAAc,EAAM;IACpB,OAAO,EAAM;IACd;GACD,OAAO;IACL,UAAU,EAAM;IAChB,WAAW,EAAM;IACjB,cAAc,EAAM;IACpB,OAAO,EAAM;IACd;GACD,OAAO;IACL,WAAW,KAAK,YAAY,SAAS;IACrC,UAAU,KAAK;IACf;IACA,UAAU,KAAK;IACf,gBAAgB,GAAU,WAAW;IACtC;GACD,OAAO;IACL,MAAM,KAAK;IACX,MAAM,KAAK,UAAU,SAAS;IAC9B,UAAU;IACX;GACD,QAAQ,KAAK;GACb,iBAAiB,KAAK;GACtB,SAAS,KAAK;GACd,mBAAmB,KAAK;GACxB,CAAA;AAGJ,EADA,KAAK,YAAY,GACjB,KAAK,WAAW,OAAO,EAAU;;CAGnC,YAAY,GAAiB;AAC3B,OAAK,WAAW,OAAO,kBAAC,GAAD,EAAgB,YAAW,CAAA,CAAC"}

package/dist/selection/SelectionSettingsImpl.d.ts

@@ -6,7 +6,6 @@ export type SelectionFillColor = string | {
 };
 export type SelectionXAxisSettings = {
     title: string;
-    showGrid: boolean;
     showTicks: boolean;
     hiddenLabels: boolean;
     labelsPosition: 'center' | '45deg' | '90deg' | null;

package/dist/selection/SelectionSettingsImpl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionSettingsImpl.d.ts","sourceRoot":"","sources":["../../src/selection/SelectionSettingsImpl.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,SAAS,EACT,UAAU,EACV,SAAS,EACT,SAAS,EACT,iBAAiB,EACjB,aAAa,EACd,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE3E,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,cAAc,EAAE,QAAQ,GAAG,OAAO,GAAG,OAAO,GAAG,IAAI,CAAC;CACrD,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,qBAAa,qBAAsB,YAAW,iBAAiB;IAC7D,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,IAAI,eAAe;IAE5B,QAAQ,CAAC,cAAc,EAAE,UAAU,CAAC;IACpC,QAAQ,CAAC,MAAM,EAAE,UAAU,GAAG,SAAS,CAAC;IAExC,QAAQ,CAAC,QAAQ,EACb;QACE,UAAU,EAAE,UAAU,CAAC;QACvB,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;QACpB,YAAY,CAAC,EAAE,SAAS,CAAC;KAC1B,GACD,SAAS,CAAC;IACd,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAE7B,QAAQ,CAAC,OAAO,EAAE,UAAU,EAAE,CAAC;IAC/B,QAAQ,CAAC,aAAa,EAAE;QACtB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QACjB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IAEF,QAAQ,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,aAAa,CAAA;KAAE,CAAC;IACzE,QAAQ,CAAC,KAAK,EAAE,sBAAsB,CAAC;IACvC,QAAQ,CAAC,KAAK,EAAE,sBAAsB,CAAC;IACvC,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAE1B,QAAQ,CAAC,SAAS,EAAE,kBAAkB,CAAC;IACvC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;gBAErC,QAAQ,EAAE,iBAAiB;CA4CxC"}
+{"version":3,"file":"SelectionSettingsImpl.d.ts","sourceRoot":"","sources":["../../src/selection/SelectionSettingsImpl.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,SAAS,EACT,UAAU,EACV,SAAS,EACT,SAAS,EACT,iBAAiB,EACjB,aAAa,EACd,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE3E,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,cAAc,EAAE,QAAQ,GAAG,OAAO,GAAG,OAAO,GAAG,IAAI,CAAC;CACrD,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,qBAAa,qBAAsB,YAAW,iBAAiB;IAC7D,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,IAAI,eAAe;IAE5B,QAAQ,CAAC,cAAc,EAAE,UAAU,CAAC;IACpC,QAAQ,CAAC,MAAM,EAAE,UAAU,GAAG,SAAS,CAAC;IAExC,QAAQ,CAAC,QAAQ,EACb;QACE,UAAU,EAAE,UAAU,CAAC;QACvB,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;QACpB,YAAY,CAAC,EAAE,SAAS,CAAC;KAC1B,GACD,SAAS,CAAC;IACd,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAE7B,QAAQ,CAAC,OAAO,EAAE,UAAU,EAAE,CAAC;IAC/B,QAAQ,CAAC,aAAa,EAAE;QACtB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QACjB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IAEF,QAAQ,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,aAAa,CAAA;KAAE,CAAC;IACzE,QAAQ,CAAC,KAAK,EAAE,sBAAsB,CAAC;IACvC,QAAQ,CAAC,KAAK,EAAE,sBAAsB,CAAC;IACvC,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAE1B,QAAQ,CAAC,SAAS,EAAE,kBAAkB,CAAC;IACvC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;gBAErC,QAAQ,EAAE,iBAAiB;CA2CxC"}

package/dist/selection/SelectionSettingsImpl.js

@@ -27,7 +27,6 @@ var n = class {
 			position: n.title.position ?? "center"
 		}, this.xAxis = {
 			title: n.xAxis?.title ?? "",
-			showGrid: n.xAxis?.showGrid ?? !1,
 			showTicks: n.xAxis?.showTicks ?? !0,
 			hiddenLabels: n.xAxis?.hiddenLabels ?? !1,
 			labelsPosition: n.xAxis?.labelsPosition ?? null

package/dist/selection/SelectionSettingsImpl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionSettingsImpl.js","names":[],"sources":["../../src/selection/SelectionSettingsImpl.ts"],"sourcesContent":["import lodash from 'lodash';\n\nimport type {\n  AesRecord,\n  ColumnName,\n  DataValue,\n  FrameType,\n  SettingsInterface,\n  TitlePosition,\n} from '../types';\nimport { SelectionSettingsSchema } from '../types/selection';\nimport type { SelectionSettings } from '../types/selection';\n\nexport type SelectionFillColor = string | { type: string; value?: string };\n\nexport type SelectionXAxisSettings = {\n  title: string;\n  showGrid: boolean;\n  showTicks: boolean;\n  hiddenLabels: boolean;\n  labelsPosition: 'center' | '45deg' | '90deg' | null;\n};\n\nexport type SelectionYAxisSettings = {\n  title: string;\n  showGrid: boolean;\n  showTicks: boolean;\n  hiddenLabels: boolean;\n};\n\nexport class SelectionSettingsImpl implements SettingsInterface {\n  readonly id: string;\n  readonly type = 'selection';\n\n  readonly selectionStage: ColumnName;\n  readonly weight: ColumnName | undefined;\n\n  readonly grouping:\n    | {\n        columnName: ColumnName;\n        order?: DataValue[];\n        inheritedAes?: AesRecord;\n      }\n    | undefined;\n  readonly showLegend: boolean;\n\n  readonly facetBy: ColumnName[];\n  readonly facetSettings: {\n    order?: string[];\n    nRows?: number;\n    nCols?: number;\n  };\n\n  readonly title: { name: string; show: boolean; position: TitlePosition };\n  readonly xAxis: SelectionXAxisSettings;\n  readonly yAxis: SelectionYAxisSettings;\n  readonly frame: FrameType;\n\n  readonly fillColor: SelectionFillColor;\n  readonly opacity: number;\n  readonly size: { width: number; height: number };\n\n  constructor(settings: SelectionSettings) {\n    SelectionSettingsSchema.parse(settings);\n    this.id = lodash.uniqueId('settings');\n\n    this.selectionStage = settings.selectionStage;\n    this.weight = settings.weight;\n    this.grouping = settings.grouping;\n    this.showLegend = settings.legend?.show ?? true;\n\n    this.facetBy = settings.facetBy ?? [];\n    this.facetSettings = {\n      order: settings.facetSettings?.order,\n      nRows: settings.facetSettings?.nRows,\n      nCols: settings.facetSettings?.nCols,\n    };\n\n    this.title = {\n      name: settings.title.name,\n      show: settings.title.show ?? true,\n      position: settings.title.position ?? 'center',\n    };\n\n    this.xAxis = {\n      title: settings.xAxis?.title ?? '',\n      showGrid: settings.xAxis?.showGrid ?? false,\n      showTicks: settings.xAxis?.showTicks ?? true,\n      hiddenLabels: settings.xAxis?.hiddenLabels ?? false,\n      labelsPosition: settings.xAxis?.labelsPosition ?? null,\n    };\n    this.yAxis = {\n      title: settings.yAxis?.title ?? '',\n      showGrid: settings.yAxis?.showGrid ?? true,\n      showTicks: settings.yAxis?.showTicks ?? true,\n      hiddenLabels: settings.yAxis?.hiddenLabels ?? false,\n    };\n    this.frame = settings.frame?.type ?? 'left-bottom';\n    this.fillColor = settings.fillColor;\n    this.opacity = settings.opacity ?? 1;\n\n    this.size = {\n      width: settings.size?.width ?? 800,\n      height: settings.size?.height ?? 500,\n    };\n  }\n}\n"],"mappings":";;AA8BA,IAAa,IAAb,MAAgE;CAC9D;CACA,OAAgB;CAEhB;CACA;CAEA;CAOA;CAEA;CACA;CAMA;CACA;CACA;CACA;CAEA;CACA;CACA;CAEA,YAAY,GAA6B;AAuCvC,EAtCA,EAAwB,MAAM,EAAS,EACvC,KAAK,KAAK,EAAO,SAAS,WAAW,EAErC,KAAK,iBAAiB,EAAS,gBAC/B,KAAK,SAAS,EAAS,QACvB,KAAK,WAAW,EAAS,UACzB,KAAK,aAAa,EAAS,QAAQ,QAAQ,IAE3C,KAAK,UAAU,EAAS,WAAW,EAAE,EACrC,KAAK,gBAAgB;GACnB,OAAO,EAAS,eAAe;GAC/B,OAAO,EAAS,eAAe;GAC/B,OAAO,EAAS,eAAe;GAChC,EAED,KAAK,QAAQ;GACX,MAAM,EAAS,MAAM;GACrB,MAAM,EAAS,MAAM,QAAQ;GAC7B,UAAU,EAAS,MAAM,YAAY;GACtC,EAED,KAAK,QAAQ;GACX,OAAO,EAAS,OAAO,SAAS;GAChC,UAAU,EAAS,OAAO,YAAY;GACtC,WAAW,EAAS,OAAO,aAAa;GACxC,cAAc,EAAS,OAAO,gBAAgB;GAC9C,gBAAgB,EAAS,OAAO,kBAAkB;GACnD,EACD,KAAK,QAAQ;GACX,OAAO,EAAS,OAAO,SAAS;GAChC,UAAU,EAAS,OAAO,YAAY;GACtC,WAAW,EAAS,OAAO,aAAa;GACxC,cAAc,EAAS,OAAO,gBAAgB;GAC/C,EACD,KAAK,QAAQ,EAAS,OAAO,QAAQ,eACrC,KAAK,YAAY,EAAS,WAC1B,KAAK,UAAU,EAAS,WAAW,GAEnC,KAAK,OAAO;GACV,OAAO,EAAS,MAAM,SAAS;GAC/B,QAAQ,EAAS,MAAM,UAAU;GAClC"}
+{"version":3,"file":"SelectionSettingsImpl.js","names":[],"sources":["../../src/selection/SelectionSettingsImpl.ts"],"sourcesContent":["import lodash from 'lodash';\n\nimport type {\n  AesRecord,\n  ColumnName,\n  DataValue,\n  FrameType,\n  SettingsInterface,\n  TitlePosition,\n} from '../types';\nimport { SelectionSettingsSchema } from '../types/selection';\nimport type { SelectionSettings } from '../types/selection';\n\nexport type SelectionFillColor = string | { type: string; value?: string };\n\nexport type SelectionXAxisSettings = {\n  title: string;\n  showTicks: boolean;\n  hiddenLabels: boolean;\n  labelsPosition: 'center' | '45deg' | '90deg' | null;\n};\n\nexport type SelectionYAxisSettings = {\n  title: string;\n  showGrid: boolean;\n  showTicks: boolean;\n  hiddenLabels: boolean;\n};\n\nexport class SelectionSettingsImpl implements SettingsInterface {\n  readonly id: string;\n  readonly type = 'selection';\n\n  readonly selectionStage: ColumnName;\n  readonly weight: ColumnName | undefined;\n\n  readonly grouping:\n    | {\n        columnName: ColumnName;\n        order?: DataValue[];\n        inheritedAes?: AesRecord;\n      }\n    | undefined;\n  readonly showLegend: boolean;\n\n  readonly facetBy: ColumnName[];\n  readonly facetSettings: {\n    order?: string[];\n    nRows?: number;\n    nCols?: number;\n  };\n\n  readonly title: { name: string; show: boolean; position: TitlePosition };\n  readonly xAxis: SelectionXAxisSettings;\n  readonly yAxis: SelectionYAxisSettings;\n  readonly frame: FrameType;\n\n  readonly fillColor: SelectionFillColor;\n  readonly opacity: number;\n  readonly size: { width: number; height: number };\n\n  constructor(settings: SelectionSettings) {\n    SelectionSettingsSchema.parse(settings);\n    this.id = lodash.uniqueId('settings');\n\n    this.selectionStage = settings.selectionStage;\n    this.weight = settings.weight;\n    this.grouping = settings.grouping;\n    this.showLegend = settings.legend?.show ?? true;\n\n    this.facetBy = settings.facetBy ?? [];\n    this.facetSettings = {\n      order: settings.facetSettings?.order,\n      nRows: settings.facetSettings?.nRows,\n      nCols: settings.facetSettings?.nCols,\n    };\n\n    this.title = {\n      name: settings.title.name,\n      show: settings.title.show ?? true,\n      position: settings.title.position ?? 'center',\n    };\n\n    this.xAxis = {\n      title: settings.xAxis?.title ?? '',\n      showTicks: settings.xAxis?.showTicks ?? true,\n      hiddenLabels: settings.xAxis?.hiddenLabels ?? false,\n      labelsPosition: settings.xAxis?.labelsPosition ?? null,\n    };\n    this.yAxis = {\n      title: settings.yAxis?.title ?? '',\n      showGrid: settings.yAxis?.showGrid ?? true,\n      showTicks: settings.yAxis?.showTicks ?? true,\n      hiddenLabels: settings.yAxis?.hiddenLabels ?? false,\n    };\n    this.frame = settings.frame?.type ?? 'left-bottom';\n    this.fillColor = settings.fillColor;\n    this.opacity = settings.opacity ?? 1;\n\n    this.size = {\n      width: settings.size?.width ?? 800,\n      height: settings.size?.height ?? 500,\n    };\n  }\n}\n"],"mappings":";;AA6BA,IAAa,IAAb,MAAgE;CAC9D;CACA,OAAgB;CAEhB;CACA;CAEA;CAOA;CAEA;CACA;CAMA;CACA;CACA;CACA;CAEA;CACA;CACA;CAEA,YAAY,GAA6B;AAsCvC,EArCA,EAAwB,MAAM,EAAS,EACvC,KAAK,KAAK,EAAO,SAAS,WAAW,EAErC,KAAK,iBAAiB,EAAS,gBAC/B,KAAK,SAAS,EAAS,QACvB,KAAK,WAAW,EAAS,UACzB,KAAK,aAAa,EAAS,QAAQ,QAAQ,IAE3C,KAAK,UAAU,EAAS,WAAW,EAAE,EACrC,KAAK,gBAAgB;GACnB,OAAO,EAAS,eAAe;GAC/B,OAAO,EAAS,eAAe;GAC/B,OAAO,EAAS,eAAe;GAChC,EAED,KAAK,QAAQ;GACX,MAAM,EAAS,MAAM;GACrB,MAAM,EAAS,MAAM,QAAQ;GAC7B,UAAU,EAAS,MAAM,YAAY;GACtC,EAED,KAAK,QAAQ;GACX,OAAO,EAAS,OAAO,SAAS;GAChC,WAAW,EAAS,OAAO,aAAa;GACxC,cAAc,EAAS,OAAO,gBAAgB;GAC9C,gBAAgB,EAAS,OAAO,kBAAkB;GACnD,EACD,KAAK,QAAQ;GACX,OAAO,EAAS,OAAO,SAAS;GAChC,UAAU,EAAS,OAAO,YAAY;GACtC,WAAW,EAAS,OAAO,aAAa;GACxC,cAAc,EAAS,OAAO,gBAAgB;GAC/C,EACD,KAAK,QAAQ,EAAS,OAAO,QAAQ,eACrC,KAAK,YAAY,EAAS,WAC1B,KAAK,UAAU,EAAS,WAAW,GAEnC,KAAK,OAAO;GACV,OAAO,EAAS,MAAM,SAAS;GAC/B,QAAQ,EAAS,MAAM,UAAU;GAClC"}

package/dist/selection/components/Chart/Bars/GroupSelectedBars.js

@@ -4,7 +4,7 @@ import { toPercent as t } from "../../../utils.js";
 import { memo as n } from "react";
 import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
 const o = n(function({ common: n, facetActiveGroup: o, color: s, onGroupClick: c }) {
-	let { stageIndex: l, stage: u, geometry: d, layerOpacity: f, tooltip: p } = n, { left: m, width: h, centerX: g, height: _, yScale: v } = d, y = u.groups.find((e) => e.name === o), b = y?.surviving ?? 0, x = b + (y?.discarded ?? 0);
+	let { stageIndex: l, stage: u, geometry: d, layerOpacity: f, tooltip: p } = n, { left: m, width: h, centerX: g, height: _, yScale: v } = d, y = u.groups.get(o), b = y?.surviving ?? 0, x = b + (y?.discarded ?? 0);
 	if (x <= 0) return null;
 	let S = v(t(x / u.total)), C = v(t(b / u.total)), w = C - S, T = _ - C, E = e((e, t) => {
 		p.onEnter({

package/dist/selection/components/Chart/Bars/GroupSelectedBars.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupSelectedBars.js","names":[],"sources":["../../../../../src/selection/components/Chart/Bars/GroupSelectedBars.tsx"],"sourcesContent":["import { memo } from 'react';\n\nimport { useFunction } from '../../../../utils/hooks/useFunction';\nimport { DESATURATE_ALPHA, DIVIDER_STROKE } from '../../../constants';\nimport { toPercent } from '../../../utils';\nimport type { BarsCommon } from '../types';\n\n// Group-selected bars: only the active group is drawn, with its preserved /\n// discarded segments at actual heights and a dashed divider between them.\nexport const GroupSelectedBars = memo(function GroupSelectedBars({\n  common,\n  facetActiveGroup,\n  color,\n  onGroupClick,\n}: {\n  common: BarsCommon;\n  facetActiveGroup: string;\n  color: string;\n  onGroupClick: (name: string) => void;\n}) {\n  const { stageIndex, stage, geometry, layerOpacity, tooltip } = common;\n  const { left, width, centerX, height, yScale } = geometry;\n\n  const groupData = stage.groups.find((g) => g.name === facetActiveGroup);\n  const gSurviving = groupData?.surviving ?? 0;\n  const gDiscarded = groupData?.discarded ?? 0;\n  const gTotal = gSurviving + gDiscarded;\n  if (gTotal <= 0) return null;\n\n  const yOverlayTop = yScale(toPercent(gTotal / stage.total));\n  const ySurvivingTop = yScale(toPercent(gSurviving / stage.total));\n  const discardedHeight = ySurvivingTop - yOverlayTop;\n  const preservedHeight = height - ySurvivingTop;\n\n  const handleEnter = useFunction((section: 'preserved' | 'discarded', anchorY: number) => {\n    tooltip.onEnter({\n      stageIndex,\n      section,\n      stage,\n      anchorX: centerX,\n      anchorY,\n      groupName: facetActiveGroup,\n    });\n  });\n  const handleClick = useFunction(() => onGroupClick(facetActiveGroup));\n\n  return (\n    <>\n      {discardedHeight > 0 && (\n        <rect\n          x={left}\n          y={yOverlayTop}\n          width={width}\n          height={discardedHeight}\n          fill={color}\n          opacity={DESATURATE_ALPHA * layerOpacity}\n          onMouseEnter={() => handleEnter('discarded', yOverlayTop + discardedHeight / 2)}\n          onMouseLeave={tooltip.onLeave}\n          onClick={handleClick}\n          style={{ cursor: 'pointer' }}\n        />\n      )}\n      {preservedHeight > 0 && (\n        <rect\n          x={left}\n          y={ySurvivingTop}\n          width={width}\n          height={preservedHeight}\n          fill={color}\n          opacity={layerOpacity}\n          onMouseEnter={() => handleEnter('preserved', ySurvivingTop + preservedHeight / 2)}\n          onMouseLeave={tooltip.onLeave}\n          onClick={handleClick}\n          style={{ cursor: 'pointer' }}\n        />\n      )}\n      {discardedHeight > 0 && preservedHeight > 0 && (\n        <line\n          x1={left}\n          y1={ySurvivingTop}\n          x2={left + width}\n          y2={ySurvivingTop}\n          stroke={DIVIDER_STROKE}\n          strokeWidth={1}\n          strokeDasharray=\"4,3\"\n        />\n      )}\n    </>\n  );\n});\n"],"mappings":";;;;;AASA,MAAa,IAAoB,EAAK,SAA2B,EAC/D,WACA,qBACA,UACA,mBAMC;CACD,IAAM,EAAE,eAAY,UAAO,aAAU,iBAAc,eAAY,GACzD,EAAE,SAAM,UAAO,YAAS,WAAQ,cAAW,GAE3C,IAAY,EAAM,OAAO,MAAM,MAAM,EAAE,SAAS,EAAiB,EACjE,IAAa,GAAW,aAAa,GAErC,IAAS,KADI,GAAW,aAAa;AAE3C,KAAI,KAAU,EAAG,QAAO;CAExB,IAAM,IAAc,EAAO,EAAU,IAAS,EAAM,MAAM,CAAC,EACrD,IAAgB,EAAO,EAAU,IAAa,EAAM,MAAM,CAAC,EAC3D,IAAkB,IAAgB,GAClC,IAAkB,IAAS,GAE3B,IAAc,GAAa,GAAoC,MAAoB;AACvF,IAAQ,QAAQ;GACd;GACA;GACA;GACA,SAAS;GACT;GACA,WAAW;GACZ,CAAC;GACF,EACI,IAAc,QAAkB,EAAa,EAAiB,CAAC;AAErE,QACE,kBAAA,GAAA,EAAA,UAAA;EACG,IAAkB,KACjB,kBAAC,QAAD;GACE,GAAG;GACH,GAAG;GACI;GACP,QAAQ;GACR,MAAM;GACN,SAAA,KAA4B;GAC5B,oBAAoB,EAAY,aAAa,IAAc,IAAkB,EAAE;GAC/E,cAAc,EAAQ;GACtB,SAAS;GACT,OAAO,EAAE,QAAQ,WAAW;GAC5B,CAAA;EAEH,IAAkB,KACjB,kBAAC,QAAD;GACE,GAAG;GACH,GAAG;GACI;GACP,QAAQ;GACR,MAAM;GACN,SAAS;GACT,oBAAoB,EAAY,aAAa,IAAgB,IAAkB,EAAE;GACjF,cAAc,EAAQ;GACtB,SAAS;GACT,OAAO,EAAE,QAAQ,WAAW;GAC5B,CAAA;EAEH,IAAkB,KAAK,IAAkB,KACxC,kBAAC,QAAD;GACE,IAAI;GACJ,IAAI;GACJ,IAAI,IAAO;GACX,IAAI;GACJ,QAAA;GACA,aAAa;GACb,iBAAgB;GAChB,CAAA;EAEH,EAAA,CAAA;EAEL"}
+{"version":3,"file":"GroupSelectedBars.js","names":[],"sources":["../../../../../src/selection/components/Chart/Bars/GroupSelectedBars.tsx"],"sourcesContent":["import { memo } from 'react';\n\nimport { useFunction } from '../../../../utils/hooks/useFunction';\nimport { DESATURATE_ALPHA, DIVIDER_STROKE } from '../../../constants';\nimport { toPercent } from '../../../utils';\nimport type { BarsCommon } from '../types';\n\n// Group-selected bars: only the active group is drawn, with its preserved /\n// discarded segments at actual heights and a dashed divider between them.\nexport const GroupSelectedBars = memo(function GroupSelectedBars({\n  common,\n  facetActiveGroup,\n  color,\n  onGroupClick,\n}: {\n  common: BarsCommon;\n  facetActiveGroup: string;\n  color: string;\n  onGroupClick: (name: string) => void;\n}) {\n  const { stageIndex, stage, geometry, layerOpacity, tooltip } = common;\n  const { left, width, centerX, height, yScale } = geometry;\n\n  const groupData = stage.groups.get(facetActiveGroup);\n  const gSurviving = groupData?.surviving ?? 0;\n  const gDiscarded = groupData?.discarded ?? 0;\n  const gTotal = gSurviving + gDiscarded;\n  if (gTotal <= 0) return null;\n\n  const yOverlayTop = yScale(toPercent(gTotal / stage.total));\n  const ySurvivingTop = yScale(toPercent(gSurviving / stage.total));\n  const discardedHeight = ySurvivingTop - yOverlayTop;\n  const preservedHeight = height - ySurvivingTop;\n\n  const handleEnter = useFunction((section: 'preserved' | 'discarded', anchorY: number) => {\n    tooltip.onEnter({\n      stageIndex,\n      section,\n      stage,\n      anchorX: centerX,\n      anchorY,\n      groupName: facetActiveGroup,\n    });\n  });\n  const handleClick = useFunction(() => onGroupClick(facetActiveGroup));\n\n  return (\n    <>\n      {discardedHeight > 0 && (\n        <rect\n          x={left}\n          y={yOverlayTop}\n          width={width}\n          height={discardedHeight}\n          fill={color}\n          opacity={DESATURATE_ALPHA * layerOpacity}\n          onMouseEnter={() => handleEnter('discarded', yOverlayTop + discardedHeight / 2)}\n          onMouseLeave={tooltip.onLeave}\n          onClick={handleClick}\n          style={{ cursor: 'pointer' }}\n        />\n      )}\n      {preservedHeight > 0 && (\n        <rect\n          x={left}\n          y={ySurvivingTop}\n          width={width}\n          height={preservedHeight}\n          fill={color}\n          opacity={layerOpacity}\n          onMouseEnter={() => handleEnter('preserved', ySurvivingTop + preservedHeight / 2)}\n          onMouseLeave={tooltip.onLeave}\n          onClick={handleClick}\n          style={{ cursor: 'pointer' }}\n        />\n      )}\n      {discardedHeight > 0 && preservedHeight > 0 && (\n        <line\n          x1={left}\n          y1={ySurvivingTop}\n          x2={left + width}\n          y2={ySurvivingTop}\n          stroke={DIVIDER_STROKE}\n          strokeWidth={1}\n          strokeDasharray=\"4,3\"\n        />\n      )}\n    </>\n  );\n});\n"],"mappings":";;;;;AASA,MAAa,IAAoB,EAAK,SAA2B,EAC/D,WACA,qBACA,UACA,mBAMC;CACD,IAAM,EAAE,eAAY,UAAO,aAAU,iBAAc,eAAY,GACzD,EAAE,SAAM,UAAO,YAAS,WAAQ,cAAW,GAE3C,IAAY,EAAM,OAAO,IAAI,EAAiB,EAC9C,IAAa,GAAW,aAAa,GAErC,IAAS,KADI,GAAW,aAAa;AAE3C,KAAI,KAAU,EAAG,QAAO;CAExB,IAAM,IAAc,EAAO,EAAU,IAAS,EAAM,MAAM,CAAC,EACrD,IAAgB,EAAO,EAAU,IAAa,EAAM,MAAM,CAAC,EAC3D,IAAkB,IAAgB,GAClC,IAAkB,IAAS,GAE3B,IAAc,GAAa,GAAoC,MAAoB;AACvF,IAAQ,QAAQ;GACd;GACA;GACA;GACA,SAAS;GACT;GACA,WAAW;GACZ,CAAC;GACF,EACI,IAAc,QAAkB,EAAa,EAAiB,CAAC;AAErE,QACE,kBAAA,GAAA,EAAA,UAAA;EACG,IAAkB,KACjB,kBAAC,QAAD;GACE,GAAG;GACH,GAAG;GACI;GACP,QAAQ;GACR,MAAM;GACN,SAAA,KAA4B;GAC5B,oBAAoB,EAAY,aAAa,IAAc,IAAkB,EAAE;GAC/E,cAAc,EAAQ;GACtB,SAAS;GACT,OAAO,EAAE,QAAQ,WAAW;GAC5B,CAAA;EAEH,IAAkB,KACjB,kBAAC,QAAD;GACE,GAAG;GACH,GAAG;GACI;GACP,QAAQ;GACR,MAAM;GACN,SAAS;GACT,oBAAoB,EAAY,aAAa,IAAgB,IAAkB,EAAE;GACjF,cAAc,EAAQ;GACtB,SAAS;GACT,OAAO,EAAE,QAAQ,WAAW;GAC5B,CAAA;EAEH,IAAkB,KAAK,IAAkB,KACxC,kBAAC,QAAD;GACE,IAAI;GACJ,IAAI;GACJ,IAAI,IAAO;GACX,IAAI;GACJ,QAAA;GACA,aAAa;GACb,iBAAgB;GAChB,CAAA;EAEH,EAAA,CAAA;EAEL"}

package/dist/selection/components/Chart/Bars/StackedBars.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StackedBars.d.ts","sourceRoot":"","sources":["../../../../../src/selection/components/Chart/Bars/StackedBars.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAKpC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAI3C,eAAO,MAAM,WAAW;YASd,UAAU;gBACN,MAAM,EAAE;cACV,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC;mBACd,MAAM;kBACP,MAAM,GAAG,IAAI;kBACb,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI;kBAC7B,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI;EA+EpC,CAAC"}
+{"version":3,"file":"StackedBars.d.ts","sourceRoot":"","sources":["../../../../../src/selection/components/Chart/Bars/StackedBars.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAKpC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAI3C,eAAO,MAAM,WAAW;YASd,UAAU;gBACN,MAAM,EAAE;cACV,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC;mBACd,MAAM;kBACP,MAAM,GAAG,IAAI;kBACb,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI;kBAC7B,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI;EA8EpC,CAAC"}

package/dist/selection/components/Chart/Bars/StackedBars.js

@@ -15,16 +15,16 @@ const c = i(function({ common: i, stackOrder: c, colorMap: l, fallbackColor: u,
 		});
 	}), T = e(() => {
 		f(null), v.onLeave();
-	}), E = e((e) => p(e)), D = new Map(h.groups.map((e) => [e.name, e])), O = h.total > 0 ? C(r(h.surviving / h.total)) : S, k = [], A = [], j = O, M = 0;
+	}), E = e((e) => p(e)), D = h.total > 0 ? C(r(h.surviving / h.total)) : S, O = [], k = [], A = D, j = 0;
 	for (let e of c) {
-		let r = D.get(e);
+		let r = h.groups.get(e);
 		if (!r) continue;
 		let i = r.surviving / h.total * S, a = r.discarded / h.total * S, s = d && d !== e;
 		if (i > 0) {
-			let t = j + i / 2;
-			k.push(/* @__PURE__ */ o("rect", {
+			let t = A + i / 2;
+			O.push(/* @__PURE__ */ o("rect", {
 				x: y,
-				y: j,
+				y: A,
 				width: b,
 				height: i,
 				fill: l.get(e) ?? u,
@@ -33,13 +33,13 @@ const c = i(function({ common: i, stackOrder: c, colorMap: l, fallbackColor: u,
 				onMouseLeave: T,
 				onClick: () => E(e),
 				style: { cursor: "pointer" }
-			}, `bar-p-${m}-${e}`)), j += i;
+			}, `bar-p-${m}-${e}`)), A += i;
 		}
 		if (a > 0) {
-			let r = M + a / 2;
-			A.push(/* @__PURE__ */ o("rect", {
+			let r = j + a / 2;
+			k.push(/* @__PURE__ */ o("rect", {
 				x: y,
-				y: M,
+				y: j,
 				width: b,
 				height: a,
 				fill: l.get(e) ?? u,
@@ -48,10 +48,10 @@ const c = i(function({ common: i, stackOrder: c, colorMap: l, fallbackColor: u,
 				onMouseLeave: T,
 				onClick: () => E(e),
 				style: { cursor: "pointer" }
-			}, `bar-d-${m}-${e}`)), M += a;
+			}, `bar-d-${m}-${e}`)), j += a;
 		}
 	}
-	return /* @__PURE__ */ s(a, { children: [k, A] });
+	return /* @__PURE__ */ s(a, { children: [O, k] });
 });
 export { c as StackedBars };
 

package/dist/selection/components/Chart/Bars/StackedBars.js.map

@@ -1 +1 @@
-{"version":3,"file":"StackedBars.js","names":[],"sources":["../../../../../src/selection/components/Chart/Bars/StackedBars.tsx"],"sourcesContent":["import React, { memo } from 'react';\n\nimport { useFunction } from '../../../../utils/hooks/useFunction';\nimport { DESATURATE_ALPHA, DIM_OPACITY } from '../../../constants';\nimport { toPercent } from '../../../utils';\nimport type { BarsCommon } from '../types';\n\n// Stacked-grouped bars: per-group rects above and below the divider, stacked\n// in caller-provided order. Hover dims non-hovered groups.\nexport const StackedBars = memo(function StackedBars({\n  common,\n  stackOrder,\n  colorMap,\n  fallbackColor,\n  hoveredGroup,\n  onGroupHover,\n  onGroupClick,\n}: {\n  common: BarsCommon;\n  stackOrder: string[];\n  colorMap: Map<string, string>;\n  fallbackColor: string;\n  hoveredGroup: string | null;\n  onGroupHover: (name: string | null) => void;\n  onGroupClick: (name: string) => void;\n}) {\n  const { stageIndex, stage, geometry, layerOpacity, tooltip } = common;\n  const { left, width, centerX, height, yScale } = geometry;\n\n  const handleEnter = useFunction(\n    (groupName: string, section: 'preserved' | 'discarded', anchorY: number) => {\n      onGroupHover(groupName);\n      tooltip.onEnter({ stageIndex, section, stage, anchorX: centerX, anchorY, groupName });\n    },\n  );\n  const handleLeave = useFunction(() => {\n    onGroupHover(null);\n    tooltip.onLeave();\n  });\n  const handleClick = useFunction((groupName: string) => onGroupClick(groupName));\n\n  const groupByName = new Map(stage.groups.map((g) => [g.name, g]));\n  const dividerY = stage.total > 0 ? yScale(toPercent(stage.surviving / stage.total)) : height;\n  const preserved: React.JSX.Element[] = [];\n  const discarded: React.JSX.Element[] = [];\n  // Both halves stack top-to-bottom in stackOrder so a given group appears at\n  // the same vertical reading order in preserved and discarded — without this\n  // the two halves are mirrored around the divider and the same group ends up\n  // adjacent to the divider on both sides.\n  let yP = dividerY;\n  let yD = 0;\n  for (const groupName of stackOrder) {\n    const groupData = groupByName.get(groupName);\n    if (!groupData) continue;\n    const survivingHeight = (groupData.surviving / stage.total) * height;\n    const discardedHeight = (groupData.discarded / stage.total) * height;\n    const dimmed = hoveredGroup && hoveredGroup !== groupName;\n\n    if (survivingHeight > 0) {\n      const anchorY = yP + survivingHeight / 2;\n      preserved.push(\n        <rect\n          key={`bar-p-${stageIndex}-${groupName}`}\n          x={left}\n          y={yP}\n          width={width}\n          height={survivingHeight}\n          fill={colorMap.get(groupName) ?? fallbackColor}\n          opacity={(dimmed ? DIM_OPACITY : 1) * layerOpacity}\n          onMouseEnter={() => handleEnter(groupName, 'preserved', anchorY)}\n          onMouseLeave={handleLeave}\n          onClick={() => handleClick(groupName)}\n          style={{ cursor: 'pointer' }}\n        />,\n      );\n      yP += survivingHeight;\n    }\n    if (discardedHeight > 0) {\n      const anchorY = yD + discardedHeight / 2;\n      discarded.push(\n        <rect\n          key={`bar-d-${stageIndex}-${groupName}`}\n          x={left}\n          y={yD}\n          width={width}\n          height={discardedHeight}\n          fill={colorMap.get(groupName) ?? fallbackColor}\n          opacity={(dimmed ? DIM_OPACITY : DESATURATE_ALPHA) * layerOpacity}\n          onMouseEnter={() => handleEnter(groupName, 'discarded', anchorY)}\n          onMouseLeave={handleLeave}\n          onClick={() => handleClick(groupName)}\n          style={{ cursor: 'pointer' }}\n        />,\n      );\n      yD += discardedHeight;\n    }\n  }\n  return (\n    <>\n      {preserved}\n      {discarded}\n    </>\n  );\n});\n"],"mappings":";;;;;AASA,MAAa,IAAc,EAAK,SAAqB,EACnD,WACA,eACA,aACA,kBACA,iBACA,iBACA,mBASC;CACD,IAAM,EAAE,eAAY,UAAO,aAAU,iBAAc,eAAY,GACzD,EAAE,SAAM,UAAO,YAAS,WAAQ,cAAW,GAE3C,IAAc,GACjB,GAAmB,GAAoC,MAAoB;AAE1E,EADA,EAAa,EAAU,EACvB,EAAQ,QAAQ;GAAE;GAAY;GAAS;GAAO,SAAS;GAAS;GAAS;GAAW,CAAC;GAExF,EACK,IAAc,QAAkB;AAEpC,EADA,EAAa,KAAK,EAClB,EAAQ,SAAS;GACjB,EACI,IAAc,GAAa,MAAsB,EAAa,EAAU,CAAC,EAEzE,IAAc,IAAI,IAAI,EAAM,OAAO,KAAK,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,EAC3D,IAAW,EAAM,QAAQ,IAAI,EAAO,EAAU,EAAM,YAAY,EAAM,MAAM,CAAC,GAAG,GAChF,IAAiC,EAAE,EACnC,IAAiC,EAAE,EAKrC,IAAK,GACL,IAAK;AACT,MAAK,IAAM,KAAa,GAAY;EAClC,IAAM,IAAY,EAAY,IAAI,EAAU;AAC5C,MAAI,CAAC,EAAW;EAChB,IAAM,IAAmB,EAAU,YAAY,EAAM,QAAS,GACxD,IAAmB,EAAU,YAAY,EAAM,QAAS,GACxD,IAAS,KAAgB,MAAiB;AAEhD,MAAI,IAAkB,GAAG;GACvB,IAAM,IAAU,IAAK,IAAkB;AAgBvC,GAfA,EAAU,KACR,kBAAC,QAAD;IAEE,GAAG;IACH,GAAG;IACI;IACP,QAAQ;IACR,MAAM,EAAS,IAAI,EAAU,IAAI;IACjC,UAAU,IAAS,IAAc,KAAK;IACtC,oBAAoB,EAAY,GAAW,aAAa,EAAQ;IAChE,cAAc;IACd,eAAe,EAAY,EAAU;IACrC,OAAO,EAAE,QAAQ,WAAW;IAC5B,EAXK,SAAS,EAAW,GAAG,IAW5B,CACH,EACD,KAAM;;AAER,MAAI,IAAkB,GAAG;GACvB,IAAM,IAAU,IAAK,IAAkB;AAgBvC,GAfA,EAAU,KACR,kBAAC,QAAD;IAEE,GAAG;IACH,GAAG;IACI;IACP,QAAQ;IACR,MAAM,EAAS,IAAI,EAAU,IAAI;IACjC,UAAU,IAAS,IAAc,KAAoB;IACrD,oBAAoB,EAAY,GAAW,aAAa,EAAQ;IAChE,cAAc;IACd,eAAe,EAAY,EAAU;IACrC,OAAO,EAAE,QAAQ,WAAW;IAC5B,EAXK,SAAS,EAAW,GAAG,IAW5B,CACH,EACD,KAAM;;;AAGV,QACE,kBAAA,GAAA,EAAA,UAAA,CACG,GACA,EACA,EAAA,CAAA;EAEL"}
+{"version":3,"file":"StackedBars.js","names":[],"sources":["../../../../../src/selection/components/Chart/Bars/StackedBars.tsx"],"sourcesContent":["import React, { memo } from 'react';\n\nimport { useFunction } from '../../../../utils/hooks/useFunction';\nimport { DESATURATE_ALPHA, DIM_OPACITY } from '../../../constants';\nimport { toPercent } from '../../../utils';\nimport type { BarsCommon } from '../types';\n\n// Stacked-grouped bars: per-group rects above and below the divider, stacked\n// in caller-provided order. Hover dims non-hovered groups.\nexport const StackedBars = memo(function StackedBars({\n  common,\n  stackOrder,\n  colorMap,\n  fallbackColor,\n  hoveredGroup,\n  onGroupHover,\n  onGroupClick,\n}: {\n  common: BarsCommon;\n  stackOrder: string[];\n  colorMap: Map<string, string>;\n  fallbackColor: string;\n  hoveredGroup: string | null;\n  onGroupHover: (name: string | null) => void;\n  onGroupClick: (name: string) => void;\n}) {\n  const { stageIndex, stage, geometry, layerOpacity, tooltip } = common;\n  const { left, width, centerX, height, yScale } = geometry;\n\n  const handleEnter = useFunction(\n    (groupName: string, section: 'preserved' | 'discarded', anchorY: number) => {\n      onGroupHover(groupName);\n      tooltip.onEnter({ stageIndex, section, stage, anchorX: centerX, anchorY, groupName });\n    },\n  );\n  const handleLeave = useFunction(() => {\n    onGroupHover(null);\n    tooltip.onLeave();\n  });\n  const handleClick = useFunction((groupName: string) => onGroupClick(groupName));\n\n  const dividerY = stage.total > 0 ? yScale(toPercent(stage.surviving / stage.total)) : height;\n  const preserved: React.JSX.Element[] = [];\n  const discarded: React.JSX.Element[] = [];\n  // Both halves stack top-to-bottom in stackOrder so a given group appears at\n  // the same vertical reading order in preserved and discarded — without this\n  // the two halves are mirrored around the divider and the same group ends up\n  // adjacent to the divider on both sides.\n  let yP = dividerY;\n  let yD = 0;\n  for (const groupName of stackOrder) {\n    const groupData = stage.groups.get(groupName);\n    if (!groupData) continue;\n    const survivingHeight = (groupData.surviving / stage.total) * height;\n    const discardedHeight = (groupData.discarded / stage.total) * height;\n    const dimmed = hoveredGroup && hoveredGroup !== groupName;\n\n    if (survivingHeight > 0) {\n      const anchorY = yP + survivingHeight / 2;\n      preserved.push(\n        <rect\n          key={`bar-p-${stageIndex}-${groupName}`}\n          x={left}\n          y={yP}\n          width={width}\n          height={survivingHeight}\n          fill={colorMap.get(groupName) ?? fallbackColor}\n          opacity={(dimmed ? DIM_OPACITY : 1) * layerOpacity}\n          onMouseEnter={() => handleEnter(groupName, 'preserved', anchorY)}\n          onMouseLeave={handleLeave}\n          onClick={() => handleClick(groupName)}\n          style={{ cursor: 'pointer' }}\n        />,\n      );\n      yP += survivingHeight;\n    }\n    if (discardedHeight > 0) {\n      const anchorY = yD + discardedHeight / 2;\n      discarded.push(\n        <rect\n          key={`bar-d-${stageIndex}-${groupName}`}\n          x={left}\n          y={yD}\n          width={width}\n          height={discardedHeight}\n          fill={colorMap.get(groupName) ?? fallbackColor}\n          opacity={(dimmed ? DIM_OPACITY : DESATURATE_ALPHA) * layerOpacity}\n          onMouseEnter={() => handleEnter(groupName, 'discarded', anchorY)}\n          onMouseLeave={handleLeave}\n          onClick={() => handleClick(groupName)}\n          style={{ cursor: 'pointer' }}\n        />,\n      );\n      yD += discardedHeight;\n    }\n  }\n  return (\n    <>\n      {preserved}\n      {discarded}\n    </>\n  );\n});\n"],"mappings":";;;;;AASA,MAAa,IAAc,EAAK,SAAqB,EACnD,WACA,eACA,aACA,kBACA,iBACA,iBACA,mBASC;CACD,IAAM,EAAE,eAAY,UAAO,aAAU,iBAAc,eAAY,GACzD,EAAE,SAAM,UAAO,YAAS,WAAQ,cAAW,GAE3C,IAAc,GACjB,GAAmB,GAAoC,MAAoB;AAE1E,EADA,EAAa,EAAU,EACvB,EAAQ,QAAQ;GAAE;GAAY;GAAS;GAAO,SAAS;GAAS;GAAS;GAAW,CAAC;GAExF,EACK,IAAc,QAAkB;AAEpC,EADA,EAAa,KAAK,EAClB,EAAQ,SAAS;GACjB,EACI,IAAc,GAAa,MAAsB,EAAa,EAAU,CAAC,EAEzE,IAAW,EAAM,QAAQ,IAAI,EAAO,EAAU,EAAM,YAAY,EAAM,MAAM,CAAC,GAAG,GAChF,IAAiC,EAAE,EACnC,IAAiC,EAAE,EAKrC,IAAK,GACL,IAAK;AACT,MAAK,IAAM,KAAa,GAAY;EAClC,IAAM,IAAY,EAAM,OAAO,IAAI,EAAU;AAC7C,MAAI,CAAC,EAAW;EAChB,IAAM,IAAmB,EAAU,YAAY,EAAM,QAAS,GACxD,IAAmB,EAAU,YAAY,EAAM,QAAS,GACxD,IAAS,KAAgB,MAAiB;AAEhD,MAAI,IAAkB,GAAG;GACvB,IAAM,IAAU,IAAK,IAAkB;AAgBvC,GAfA,EAAU,KACR,kBAAC,QAAD;IAEE,GAAG;IACH,GAAG;IACI;IACP,QAAQ;IACR,MAAM,EAAS,IAAI,EAAU,IAAI;IACjC,UAAU,IAAS,IAAc,KAAK;IACtC,oBAAoB,EAAY,GAAW,aAAa,EAAQ;IAChE,cAAc;IACd,eAAe,EAAY,EAAU;IACrC,OAAO,EAAE,QAAQ,WAAW;IAC5B,EAXK,SAAS,EAAW,GAAG,IAW5B,CACH,EACD,KAAM;;AAER,MAAI,IAAkB,GAAG;GACvB,IAAM,IAAU,IAAK,IAAkB;AAgBvC,GAfA,EAAU,KACR,kBAAC,QAAD;IAEE,GAAG;IACH,GAAG;IACI;IACP,QAAQ;IACR,MAAM,EAAS,IAAI,EAAU,IAAI;IACjC,UAAU,IAAS,IAAc,KAAoB;IACrD,oBAAoB,EAAY,GAAW,aAAa,EAAQ;IAChE,cAAc;IACd,eAAe,EAAY,EAAU;IACrC,OAAO,EAAE,QAAQ,WAAW;IAC5B,EAXK,SAAS,EAAW,GAAG,IAW5B,CACH,EACD,KAAM;;;AAGV,QACE,kBAAA,GAAA,EAAA,UAAA,CACG,GACA,EACA,EAAA,CAAA;EAEL"}