@milaboratories/miplots4 1.1.0 → 1.2.0

package/dist/selection/ChartRenderer.js

@@ -0,0 +1,254 @@
+import { Error as e } from "../common/Error.js";
+import { TextMeasurer as t } from "../utils/TextMeasurer/TextMeasurer.js";
+import { arrangeLegendParts as n } from "../utils/arrangeLegendParts.js";
+import { splitTextByWidth as r } from "../utils/splitTextByWidth.js";
+import "../discrete/utils/index.js";
+import { AGGREGATE_RIBBON_COLOR as i } from "./constants.js";
+import { formatCount as a, formatPercent as o } from "./utils.js";
+import { ChartsGroup as s } from "./components/ChartsGroup.js";
+import { scaleOrdinal as c } from "d3-scale";
+import { createRoot as l } from "react-dom/client";
+import { Fragment as u, jsx as d } from "react/jsx-runtime";
+var f = class {
+	reactRoot = null;
+	parentNode = null;
+	rootNode = null;
+	component = /* @__PURE__ */ d(u, {});
+	cellPlotWidth = 0;
+	cellPlotHeight = 0;
+	nCols = 1;
+	nRows = 1;
+	isFaceted = !1;
+	cellLabelHeight = 0;
+	orderedFaceted = {
+		facetKeys: [],
+		byFacet: {},
+		groupNames: []
+	};
+	facetLabels = {};
+	facetTitles = {};
+	grouped = !1;
+	groupNames = [];
+	colorMap = /* @__PURE__ */ new Map();
+	solidColor = "";
+	xLabelsByFacet = {};
+	xCountsByFacet = {};
+	xLabelsPosition = "center";
+	maxLabelLines = 1;
+	maxLabelPx = 0;
+	yTickWidth = 0;
+	labelBlock = 0;
+	xTitleHeight = 0;
+	yTitleWidth = 0;
+	yTickReserve = 0;
+	xLabelTopReserve = 0;
+	topPad = 0;
+	rightPad = 12;
+	fullLeftPad = 0;
+	fullBottomPad = 0;
+	colLeftPads = [];
+	rowBottomPads = [];
+	colXOffsets = [0];
+	rowYOffsets = [0];
+	gridWidth = 0;
+	gridHeight = 0;
+	legend = {
+		width: 0,
+		height: 0,
+		items: []
+	};
+	mainTitle = [];
+	margins = {
+		top: 24,
+		bottom: 24,
+		left: 24,
+		right: 24
+	};
+	totalWidth = 0;
+	totalHeight = 0;
+	clear() {
+		this.parentNode && this.rootNode && (this.parentNode.removeChild(this.rootNode), this.parentNode = null, this.rootNode = null), setTimeout(() => {
+			this.reactRoot?.unmount(), this.reactRoot = null;
+		});
+	}
+	init(e) {
+		this.parentNode === null && (this.parentNode = e, this.rootNode = document.createElement("div"), this.parentNode.appendChild(this.rootNode), this.reactRoot = l(this.rootNode));
+	}
+	updateChartSizes(e, t) {
+		this.cellPlotWidth = e, this.cellPlotHeight = t;
+	}
+	updateGrid({ faceted: e, facetLabels: t, facetBy: n, facetSettings: i }) {
+		let a = i.order?.length ? i.order.filter((t) => e.facetKeys.includes(t)) : e.facetKeys;
+		if (this.orderedFaceted = {
+			...e,
+			facetKeys: a
+		}, this.facetLabels = t, this.isFaceted = n.length > 0, this.isFaceted) {
+			let e = Math.max(this.cellPlotWidth, 40);
+			this.facetTitles = {};
+			let n = 1;
+			for (let i of a) {
+				let a = (t[i] ?? []).join(" / "), o = a ? r(a, e, 20) : [];
+				this.facetTitles[i] = o, o.length > n && (n = o.length);
+			}
+			this.cellLabelHeight = 48 + (n - 1) * 24;
+		} else this.facetTitles = {}, this.cellLabelHeight = 0;
+		let o = a.length;
+		this.nCols = Math.min(o, i.nCols ?? Math.max(1, Math.ceil(Math.sqrt(o)))), this.nRows = i.nRows ?? Math.max(1, Math.ceil(o / this.nCols));
+	}
+	updateGroupingMaps(e, t) {
+		let n = typeof t == "object" && !!t;
+		this.grouped = n && !!e;
+		let r = e?.order ? e.order.map(String).filter((e) => this.orderedFaceted.groupNames.includes(e)) : this.orderedFaceted.groupNames;
+		this.groupNames = [...r, ...this.orderedFaceted.groupNames.filter((e) => !r.includes(e))];
+		let a = e?.inheritedAes;
+		if (this.colorMap = /* @__PURE__ */ new Map(), this.grouped && a) for (let e of this.groupNames) {
+			let t = a[e]?.fillColor;
+			t && this.colorMap.set(e, t);
+		}
+		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";
+		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);
+			}
+			this.xLabelsByFacet[e] = n, this.xCountsByFacet[e] = i;
+		}
+	}
+	updateCaptionsSize(e, n) {
+		let r = new t("500 14px Manrope");
+		n.hiddenLabels ? (this.yTickWidth = 0, this.yTickReserve = n.showTicks ? 4 : 0) : (this.yTickWidth = r.getTextWidth(o(100)), this.yTickReserve = 40), e.hiddenLabels ? (this.labelBlock = 0, this.xLabelTopReserve = e.showTicks ? 4 : 0) : (this.labelBlock = this.xLabelsPosition === "center" ? this.maxLabelLines * 20 : this.xLabelsPosition === "45deg" ? Math.ceil(this.maxLabelPx * .71) + 10 : Math.ceil(this.maxLabelPx) + 10, this.xLabelTopReserve = 6), this.xTitleHeight = e.title ? 26 : 0, this.yTitleWidth = n.title ? 24 : 0;
+	}
+	updateChartDimensions() {
+		this.fullLeftPad = this.yTitleWidth + this.yTickWidth + this.yTickReserve, this.fullBottomPad = this.xLabelTopReserve + this.labelBlock + this.xTitleHeight, this.topPad = 20, this.rightPad = 12, this.colLeftPads = Array.from({ length: this.nCols }, (e, t) => !this.isFaceted || t === 0 ? this.fullLeftPad : 12);
+		let e = this.orderedFaceted.facetKeys.length % this.nCols !== 0;
+		this.rowBottomPads = Array.from({ length: this.nRows }, (t, n) => {
+			let r = n === this.nRows - 1 || n === this.nRows - 2 && e;
+			return !this.isFaceted || r ? this.fullBottomPad : 12;
+		}), this.colXOffsets = [0];
+		for (let [e, t] of this.colLeftPads.entries()) this.colXOffsets.push(this.colXOffsets[e] + t + this.cellPlotWidth + this.rightPad);
+		this.rowYOffsets = [0];
+		for (let [e, t] of this.rowBottomPads.entries()) this.rowYOffsets.push(this.rowYOffsets[e] + this.topPad + this.cellLabelHeight + this.cellPlotHeight + t);
+		this.gridWidth = this.colXOffsets[this.nCols], this.gridHeight = this.rowYOffsets[this.nRows];
+	}
+	updateLegendSize(e, t) {
+		if (!e || !this.grouped || this.groupNames.length === 0) {
+			this.legend = {
+				width: 0,
+				height: 0,
+				items: []
+			};
+			return;
+		}
+		let r = n([{
+			id: "selection-group",
+			type: "discreteColor",
+			title: t?.columnName.label ?? t?.columnName.value ?? "",
+			width: 0,
+			height: 0,
+			left: 0,
+			top: 0,
+			values: this.groupNames,
+			scale: c().domain(this.groupNames).range(this.groupNames.map((e) => this.colorMap.get(e) ?? "")),
+			labels: Object.fromEntries(this.groupNames.map((e) => [e, e === "null" ? t?.columnName.nullValueLabel ?? "N/A" : e]))
+		}], this.cellPlotHeight);
+		this.legend = {
+			width: r.reduce((e, t) => Math.max(e, t.left + t.width), 0) + 24,
+			height: this.cellPlotHeight,
+			items: r
+		};
+	}
+	createMainTitle(e, t) {
+		this.mainTitle = t && e ? r(e, Math.max(this.cellPlotWidth, 40), 20) : [];
+	}
+	updateMargins() {
+		let e = this.mainTitle.length > 0 ? this.mainTitle.length * 24 + 48 : 0;
+		this.margins = {
+			top: Math.max(e, 24),
+			bottom: 24,
+			left: 24,
+			right: 24 + this.legend.width
+		}, this.totalWidth = this.margins.left + this.gridWidth + this.margins.right, this.totalHeight = this.margins.top + this.gridHeight + this.margins.bottom;
+	}
+	render({ faceted: e, facetLabels: t, width: n, height: r, title: i, showTitle: a, grouping: o, showLegend: c, facetBy: l, facetSettings: u, xAxis: f, yAxis: p, frame: m, titlePosition: h, fillColor: g, opacity: _ }) {
+		this.updateChartSizes(n, r), this.updateGrid({
+			faceted: e,
+			facetLabels: t,
+			facetBy: l,
+			facetSettings: u
+		}), this.updateGroupingMaps(o, g), this.createAxisLabels(f), this.updateCaptionsSize(f, p), this.updateChartDimensions(), this.updateLegendSize(c, o), this.createMainTitle(i, a), this.updateMargins();
+		let v = /* @__PURE__ */ d(s, {
+			facetData: {
+				faceted: this.orderedFaceted,
+				facetLabels: this.facetLabels,
+				facetTitles: this.facetTitles
+			},
+			gridLayout: {
+				nRows: this.nRows,
+				nCols: this.nCols,
+				totalWidth: this.totalWidth,
+				totalHeight: this.totalHeight,
+				margins: this.margins,
+				cellPlotWidth: this.cellPlotWidth,
+				cellPlotHeight: this.cellPlotHeight,
+				cellLabelHeight: this.cellLabelHeight,
+				topPad: this.topPad,
+				rightPad: this.rightPad,
+				colLeftPads: this.colLeftPads,
+				rowBottomPads: this.rowBottomPads,
+				colXOffsets: this.colXOffsets,
+				rowYOffsets: this.rowYOffsets,
+				sharedX: this.isFaceted,
+				sharedY: this.isFaceted
+			},
+			xAxis: {
+				labelsByFacet: this.xLabelsByFacet,
+				countsByFacet: this.xCountsByFacet,
+				countsFontSize: 14,
+				labelsPosition: this.xLabelsPosition,
+				showGrid: f.showGrid,
+				showTicks: f.showTicks,
+				hiddenLabels: f.hiddenLabels,
+				title: f.title
+			},
+			yAxis: {
+				showGrid: p.showGrid,
+				showTicks: p.showTicks,
+				hiddenLabels: p.hiddenLabels,
+				title: p.title
+			},
+			style: {
+				frameType: this.isFaceted ? "full" : m,
+				barColor: this.solidColor,
+				opacity: _,
+				colorMap: this.colorMap,
+				nullValueLabel: o?.columnName.nullValueLabel
+			},
+			title: {
+				text: this.mainTitle,
+				show: this.mainTitle.length > 0,
+				position: h
+			},
+			legend: this.legend,
+			showFacetLabels: this.isFaceted,
+			grouped: this.grouped,
+			orderedGroupNames: this.groupNames
+		});
+		this.component = v, this.reactRoot?.render(v);
+	}
+	renderError(t) {
+		this.reactRoot?.render(/* @__PURE__ */ d(e, { message: t }));
+	}
+};
+export { f as default };
+
+//# sourceMappingURL=ChartRenderer.js.map

package/dist/selection/ChartRenderer.js.map

@@ -0,0 +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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"}

package/dist/selection/SelectionSettingsImpl.d.ts

@@ -0,0 +1,53 @@
+import { AesRecord, ColumnName, DataValue, FrameType, SettingsInterface, TitlePosition } from '../types';
+import { SelectionSettings } from '../types/selection';
+export type SelectionFillColor = string | {
+    type: string;
+    value?: string;
+};
+export type SelectionXAxisSettings = {
+    title: string;
+    showGrid: boolean;
+    showTicks: boolean;
+    hiddenLabels: boolean;
+    labelsPosition: 'center' | '45deg' | '90deg' | null;
+};
+export type SelectionYAxisSettings = {
+    title: string;
+    showGrid: boolean;
+    showTicks: boolean;
+    hiddenLabels: boolean;
+};
+export declare class SelectionSettingsImpl implements SettingsInterface {
+    readonly id: string;
+    readonly type = "selection";
+    readonly selectionStage: ColumnName;
+    readonly weight: ColumnName | undefined;
+    readonly grouping: {
+        columnName: ColumnName;
+        order?: DataValue[];
+        inheritedAes?: AesRecord;
+    } | undefined;
+    readonly showLegend: boolean;
+    readonly facetBy: ColumnName[];
+    readonly facetSettings: {
+        order?: string[];
+        nRows?: number;
+        nCols?: number;
+    };
+    readonly title: {
+        name: string;
+        show: boolean;
+        position: TitlePosition;
+    };
+    readonly xAxis: SelectionXAxisSettings;
+    readonly yAxis: SelectionYAxisSettings;
+    readonly frame: FrameType;
+    readonly fillColor: SelectionFillColor;
+    readonly opacity: number;
+    readonly size: {
+        width: number;
+        height: number;
+    };
+    constructor(settings: SelectionSettings);
+}
+//# sourceMappingURL=SelectionSettingsImpl.d.ts.map

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

@@ -0,0 +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"}

package/dist/selection/SelectionSettingsImpl.js

@@ -0,0 +1,47 @@
+import { SelectionSettingsSchema as e } from "../types/selection.js";
+import t from "lodash";
+var n = class {
+	id;
+	type = "selection";
+	selectionStage;
+	weight;
+	grouping;
+	showLegend;
+	facetBy;
+	facetSettings;
+	title;
+	xAxis;
+	yAxis;
+	frame;
+	fillColor;
+	opacity;
+	size;
+	constructor(n) {
+		e.parse(n), this.id = t.uniqueId("settings"), this.selectionStage = n.selectionStage, this.weight = n.weight, this.grouping = n.grouping, this.showLegend = n.legend?.show ?? !0, this.facetBy = n.facetBy ?? [], this.facetSettings = {
+			order: n.facetSettings?.order,
+			nRows: n.facetSettings?.nRows,
+			nCols: n.facetSettings?.nCols
+		}, this.title = {
+			name: n.title.name,
+			show: n.title.show ?? !0,
+			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
+		}, this.yAxis = {
+			title: n.yAxis?.title ?? "",
+			showGrid: n.yAxis?.showGrid ?? !0,
+			showTicks: n.yAxis?.showTicks ?? !0,
+			hiddenLabels: n.yAxis?.hiddenLabels ?? !1
+		}, this.frame = n.frame?.type ?? "left-bottom", this.fillColor = n.fillColor, this.opacity = n.opacity ?? 1, this.size = {
+			width: n.size?.width ?? 800,
+			height: n.size?.height ?? 500
+		};
+	}
+};
+export { n as SelectionSettingsImpl };
+
+//# sourceMappingURL=SelectionSettingsImpl.js.map

package/dist/selection/SelectionSettingsImpl.js.map

@@ -0,0 +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"}

package/dist/selection/components/Chart/Bars/GroupSelectedBars.d.ts

@@ -0,0 +1,8 @@
+import { BarsCommon } from '../types';
+export declare const GroupSelectedBars: import('react').NamedExoticComponent<{
+    common: BarsCommon;
+    facetActiveGroup: string;
+    color: string;
+    onGroupClick: (name: string) => void;
+}>;
+//# sourceMappingURL=GroupSelectedBars.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GroupSelectedBars.d.ts","sourceRoot":"","sources":["../../../../../src/selection/components/Chart/Bars/GroupSelectedBars.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAI3C,eAAO,MAAM,iBAAiB;YAMpB,UAAU;sBACA,MAAM;WACjB,MAAM;kBACC,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI;EAuEpC,CAAC"}

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

@@ -0,0 +1,57 @@
+import { useFunction as e } from "../../../../utils/hooks/useFunction.js";
+import "../../../constants.js";
+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);
+	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({
+			stageIndex: l,
+			section: e,
+			stage: u,
+			anchorX: g,
+			anchorY: t,
+			groupName: o
+		});
+	}), D = e(() => c(o));
+	return /* @__PURE__ */ a(r, { children: [
+		w > 0 && /* @__PURE__ */ i("rect", {
+			x: m,
+			y: S,
+			width: h,
+			height: w,
+			fill: s,
+			opacity: .4 * f,
+			onMouseEnter: () => E("discarded", S + w / 2),
+			onMouseLeave: p.onLeave,
+			onClick: D,
+			style: { cursor: "pointer" }
+		}),
+		T > 0 && /* @__PURE__ */ i("rect", {
+			x: m,
+			y: C,
+			width: h,
+			height: T,
+			fill: s,
+			opacity: f,
+			onMouseEnter: () => E("preserved", C + T / 2),
+			onMouseLeave: p.onLeave,
+			onClick: D,
+			style: { cursor: "pointer" }
+		}),
+		w > 0 && T > 0 && /* @__PURE__ */ i("line", {
+			x1: m,
+			y1: C,
+			x2: m + h,
+			y2: C,
+			stroke: "#333",
+			strokeWidth: 1,
+			strokeDasharray: "4,3"
+		})
+	] });
+});
+export { o as GroupSelectedBars };
+
+//# sourceMappingURL=GroupSelectedBars.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { BarsCommon } from '../types';
+export declare const StackedBars: React.NamedExoticComponent<{
+    common: BarsCommon;
+    stackOrder: string[];
+    colorMap: Map<string, string>;
+    fallbackColor: string;
+    hoveredGroup: string | null;
+    onGroupHover: (name: string | null) => void;
+    onGroupClick: (name: string) => void;
+}>;
+//# sourceMappingURL=StackedBars.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,58 @@
+import { useFunction as e } from "../../../../utils/hooks/useFunction.js";
+import { DESATURATE_ALPHA as t, DIM_OPACITY as n } from "../../../constants.js";
+import { toPercent as r } from "../../../utils.js";
+import { memo as i } from "react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+const c = i(function({ common: i, stackOrder: c, colorMap: l, fallbackColor: u, hoveredGroup: d, onGroupHover: f, onGroupClick: p }) {
+	let { stageIndex: m, stage: h, geometry: g, layerOpacity: _, tooltip: v } = i, { left: y, width: b, centerX: x, height: S, yScale: C } = g, w = e((e, t, n) => {
+		f(e), v.onEnter({
+			stageIndex: m,
+			section: t,
+			stage: h,
+			anchorX: x,
+			anchorY: n,
+			groupName: e
+		});
+	}), 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;
+	for (let e of c) {
+		let r = D.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", {
+				x: y,
+				y: j,
+				width: b,
+				height: i,
+				fill: l.get(e) ?? u,
+				opacity: (s ? n : 1) * _,
+				onMouseEnter: () => w(e, "preserved", t),
+				onMouseLeave: T,
+				onClick: () => E(e),
+				style: { cursor: "pointer" }
+			}, `bar-p-${m}-${e}`)), j += i;
+		}
+		if (a > 0) {
+			let r = M + a / 2;
+			A.push(/* @__PURE__ */ o("rect", {
+				x: y,
+				y: M,
+				width: b,
+				height: a,
+				fill: l.get(e) ?? u,
+				opacity: (s ? n : t) * _,
+				onMouseEnter: () => w(e, "discarded", r),
+				onMouseLeave: T,
+				onClick: () => E(e),
+				style: { cursor: "pointer" }
+			}, `bar-d-${m}-${e}`)), M += a;
+		}
+	}
+	return /* @__PURE__ */ s(a, { children: [k, A] });
+});
+export { c as StackedBars };
+
+//# sourceMappingURL=StackedBars.js.map

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

@@ -0,0 +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"}

package/dist/selection/components/Chart/Bars/UngroupedBars.d.ts

@@ -0,0 +1,6 @@
+import { BarsCommon } from '../types';
+export declare const UngroupedBars: import('react').NamedExoticComponent<{
+    common: BarsCommon;
+    barColor: string;
+}>;
+//# sourceMappingURL=UngroupedBars.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UngroupedBars.d.ts","sourceRoot":"","sources":["../../../../../src/selection/components/Chart/Bars/UngroupedBars.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAI3C,eAAO,MAAM,aAAa;YAIhB,UAAU;cACR,MAAM;EAqChB,CAAC"}

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

@@ -0,0 +1,38 @@
+import { useFunction as e } from "../../../../utils/hooks/useFunction.js";
+import { DESATURATE_ALPHA as t } from "../../../constants.js";
+import { toPercent as n } from "../../../utils.js";
+import { memo as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+const s = r(function({ common: r, barColor: s }) {
+	let { stageIndex: c, stage: l, geometry: u, layerOpacity: d, tooltip: f } = r, { left: p, width: m, centerX: h, height: g, yScale: _ } = u, v = l.total > 0 ? _(n(l.surviving / l.total)) : g, y = g - v, b = v, x = e((e, t) => {
+		f.onEnter({
+			stageIndex: c,
+			section: e,
+			stage: l,
+			anchorX: h,
+			anchorY: t
+		});
+	});
+	return /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("rect", {
+		x: p,
+		y: v,
+		width: m,
+		height: y,
+		fill: s,
+		opacity: d,
+		onMouseEnter: () => x("preserved", v + y / 2),
+		onMouseLeave: f.onLeave
+	}), /* @__PURE__ */ a("rect", {
+		x: p,
+		y: 0,
+		width: m,
+		height: b,
+		fill: s,
+		opacity: t * d,
+		onMouseEnter: () => x("discarded", b / 2),
+		onMouseLeave: f.onLeave
+	})] });
+});
+export { s as UngroupedBars };
+
+//# sourceMappingURL=UngroupedBars.js.map