@czi-sds/data-viz 2.3.0 → 2.4.0

package/dist/shared/StackedBarChart.cjs.js

@@ -0,0 +1,489 @@
+"use client";
+const require_objectSpread2 = require("./objectSpread2.cjs.js");
+let react = require("react");
+let _emotion_styled = require("@emotion/styled");
+_emotion_styled = require_objectSpread2.__toESM(_emotion_styled);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _czi_sds_components = require("@czi-sds/components");
+let _mui_material = require("@mui/material");
+//#region src/core/StackedBarChart/style.ts
+const ChartWrapper = (0, _emotion_styled.default)("div")`
+  display: flex;
+  flex-direction: column;
+  width: ${(props) => typeof props.width === "number" ? `${props.width}px` : props.width};
+`;
+const TitleContainer = (0, _emotion_styled.default)("div")`
+  display: flex;
+  align-items: center;
+
+  ${(props) => {
+	const spaces = (0, _czi_sds_components.getSpaces)(props);
+	return `
+      gap: ${spaces === null || spaces === void 0 ? void 0 : spaces.s}px;
+      margin-bottom: ${spaces === null || spaces === void 0 ? void 0 : spaces.l}px;
+    `;
+}}
+`;
+const ChartTitle = (0, _emotion_styled.default)("div")`
+  ${_czi_sds_components.fontHeaderS}
+
+  ${(props) => {
+	var _semanticColors$base;
+	const semanticColors = (0, _czi_sds_components.getSemanticColors)(props);
+	return `
+      color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base = semanticColors.base) === null || _semanticColors$base === void 0 ? void 0 : _semanticColors$base.textPrimary};
+    `;
+}}
+`;
+const StyledBadge = (0, _emotion_styled.default)("div")`
+  ${_czi_sds_components.fontTabularSemiboldXxxxs}
+
+  ${(props) => {
+	var _semanticColors$base2, _semanticColors$base3;
+	const spaces = (0, _czi_sds_components.getSpaces)(props);
+	const corners = (0, _czi_sds_components.getCorners)(props);
+	const semanticColors = (0, _czi_sds_components.getSemanticColors)(props);
+	return `
+      padding: ${spaces === null || spaces === void 0 ? void 0 : spaces.xxxs}px ${spaces === null || spaces === void 0 ? void 0 : spaces.xxs}px;
+      border-radius: ${corners === null || corners === void 0 ? void 0 : corners.m}px;
+      background-color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base2 = semanticColors.base) === null || _semanticColors$base2 === void 0 ? void 0 : _semanticColors$base2.backgroundTertiary};
+      color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base3 = semanticColors.base) === null || _semanticColors$base3 === void 0 ? void 0 : _semanticColors$base3.textSecondary};
+    `;
+}}
+`;
+const BarContainer = (0, _emotion_styled.default)("div")`
+  ${(props) => {
+	var _semanticColors$base4;
+	const { width, barHeight, isEmpty } = props;
+	const corners = (0, _czi_sds_components.getCorners)(props);
+	const semanticColors = (0, _czi_sds_components.getSemanticColors)(props);
+	const finalWidth = typeof width === "number" ? `${width}px` : width;
+	return `
+      display: flex;
+      border-radius: ${corners === null || corners === void 0 ? void 0 : corners.s}px;
+      width: ${finalWidth};
+      height: ${barHeight}px;
+      background-color: ${isEmpty ? semanticColors === null || semanticColors === void 0 || (_semanticColors$base4 = semanticColors.base) === null || _semanticColors$base4 === void 0 ? void 0 : _semanticColors$base4.backgroundTertiary : "transparent"};
+      overflow: hidden;
+    `;
+}}
+`;
+const BarSegment = (0, _emotion_styled.default)("div")`
+  ${(props) => {
+	const { color, height, percentage, opacity, disabled, isLast } = props;
+	const spaces = (0, _czi_sds_components.getSpaces)(props);
+	const gap = (spaces === null || spaces === void 0 ? void 0 : spaces.xxxs) || 0;
+	return `
+      background-color: ${color};
+      height: ${height}px;
+      flex-grow: ${percentage};
+      flex-basis: 0;
+      flex-shrink: 1;
+      margin-right: ${percentage > 0 && !isLast ? `${gap}px` : 0};
+      opacity: ${opacity};
+      transition: opacity 0.2s ease-in-out, flex-grow 0.25s ease-in-out, margin-right 0.25s ease-out;
+      cursor: ${disabled ? "default" : "pointer"};
+      pointer-events: ${disabled ? "none" : "auto"};
+    `;
+}}
+`;
+const StyledStackedBarChartWrapper = (0, _emotion_styled.default)("div")`
+  ${(props) => {
+	const spaces = (0, _czi_sds_components.getSpaces)(props);
+	return `
+      display: flex;
+      flex-direction: column;
+      gap: ${spaces === null || spaces === void 0 ? void 0 : spaces.m}px;
+    `;
+}}
+`;
+//#endregion
+//#region src/core/StackedBarChart/index.tsx
+const _excluded = [
+	"title",
+	"badge",
+	"hideBadge",
+	"data",
+	"width",
+	"barHeight",
+	"showLegend",
+	"showLegendValues",
+	"legendValueFormat",
+	"selectedIndices",
+	"onSelectionChange",
+	"onSegmentMouseEnter",
+	"onSegmentMouseLeave",
+	"onLegendItemMouseEnter",
+	"onLegendItemMouseLeave",
+	"onSegmentClick",
+	"onLegendItemClick",
+	"selectionBehavior",
+	"mode",
+	"maxAmount",
+	"remainingLabel",
+	"remainingUnit",
+	"unit",
+	"colorGeneratorOptions"
+];
+const calculateBadgeText = (totalItems, selectedCount) => {
+	if (selectedCount === 0 || selectedCount === totalItems) return `${totalItems}`;
+	return `${selectedCount} of ${totalItems}`;
+};
+const calculateLegendValue = (item, showLegendValues, legendValueFormat, globalUnit) => {
+	if (!showLegendValues) return void 0;
+	if (legendValueFormat === "percentage") return `${Math.round(item.percentage)}%`;
+	const effectiveUnit = item.unit || globalUnit;
+	return effectiveUnit ? `${item.value} ${effectiveUnit}` : `${item.value}`;
+};
+const getSegmentOpacity = (index, hoveredIndex, selectedIndicesSet, selectionBehavior) => {
+	const hasSelection = selectedIndicesSet.size > 0;
+	if (selectionBehavior === "hide") return 1;
+	if (hoveredIndex !== null) return hoveredIndex === index || selectedIndicesSet.has(index) ? 1 : .2;
+	if (hasSelection) return selectedIndicesSet.has(index) ? 1 : .2;
+	return 1;
+};
+const applyCumulativeHideStyling = (items, selectedIndicesSet, selectedTotal, hasRemaining, effectiveMaxAmount) => {
+	const newRemainingValue = hasRemaining ? effectiveMaxAmount - selectedTotal : 0;
+	const newRemainingPercentage = hasRemaining ? newRemainingValue / effectiveMaxAmount * 100 : 0;
+	return {
+		styledItems: items.map((item) => {
+			const isSelected = selectedIndicesSet.has(item.originalIndex);
+			return require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, item), {}, { percentage: isSelected ? item.percentage : 0 });
+		}),
+		updatedRemainingPercentage: newRemainingPercentage,
+		updatedRemainingValue: newRemainingValue
+	};
+};
+const applyProportionalHideStyling = (items, selectedIndicesSet, selectedTotal) => {
+	if (selectedTotal === 0) return {
+		styledItems: items.map((item) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, item), {}, { percentage: 0 })),
+		updatedRemainingPercentage: 0,
+		updatedRemainingValue: 0
+	};
+	return {
+		styledItems: items.map((item) => {
+			const newPercentage = selectedIndicesSet.has(item.originalIndex) ? item.value / selectedTotal * 100 : 0;
+			return require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, item), {}, { percentage: newPercentage });
+		}),
+		updatedRemainingPercentage: 0,
+		updatedRemainingValue: 0
+	};
+};
+const applySelectionStyling = (items, selectedIndicesSet, selectionBehavior, mode, hasRemaining, effectiveMaxAmount, baseRemainingPercentage, baseRemainingValue) => {
+	const hasSelection = selectedIndicesSet.size > 0;
+	if (selectionBehavior !== "hide" || !hasSelection) return {
+		styledItems: items,
+		updatedRemainingPercentage: baseRemainingPercentage,
+		updatedRemainingValue: baseRemainingValue
+	};
+	const selectedTotal = items.filter((item) => selectedIndicesSet.has(item.originalIndex)).reduce((sum, item) => sum + item.value, 0);
+	return mode === "cumulative" ? applyCumulativeHideStyling(items, selectedIndicesSet, selectedTotal, hasRemaining, effectiveMaxAmount) : applyProportionalHideStyling(items, selectedIndicesSet, selectedTotal);
+};
+const buildLegendItems = (dataWithPercentages, options) => {
+	const { showLegendValues, legendValueFormat, unit, hasRemaining, showLegend, remainingValue, remainingPercentage, remainingLabel, remainingUnit, theme } = options;
+	const legendItems = dataWithPercentages.map((item) => ({
+		name: item.name,
+		value: calculateLegendValue(item, showLegendValues, legendValueFormat, unit),
+		color: item.color,
+		disabled: item.disabled
+	}));
+	if (hasRemaining && showLegend) {
+		var _theme$palette;
+		let remainingValueDisplay;
+		if (!showLegendValues) remainingValueDisplay = void 0;
+		else if (legendValueFormat === "percentage") remainingValueDisplay = `${Math.round(remainingPercentage)}%`;
+		else {
+			const effectiveRemainingUnit = remainingUnit || unit || "";
+			remainingValueDisplay = effectiveRemainingUnit ? `${remainingValue} ${effectiveRemainingUnit}` : `${remainingValue}`;
+		}
+		legendItems.push({
+			name: remainingLabel,
+			value: remainingValueDisplay,
+			color: theme === null || theme === void 0 || (_theme$palette = theme.palette) === null || _theme$palette === void 0 || (_theme$palette = _theme$palette.sds) === null || _theme$palette === void 0 || (_theme$palette = _theme$palette.base) === null || _theme$palette === void 0 ? void 0 : _theme$palette.backgroundTertiary,
+			disabled: true
+		});
+	}
+	return legendItems;
+};
+const renderBarSegment = (item, options) => {
+	const { barHeight, hoveredIndex, selectedIndicesSet, selectionBehavior, isLast, onMouseEnter, onMouseLeave, onClick } = options;
+	const isHidden = selectionBehavior === "hide" && item.percentage === 0;
+	const barSegment = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BarSegment, {
+		color: item.color,
+		percentage: item.isEntering || item.isExiting ? 0 : item.percentage,
+		height: barHeight,
+		opacity: getSegmentOpacity(item.originalIndex, hoveredIndex, selectedIndicesSet, selectionBehavior),
+		isLast,
+		"data-hide": isHidden,
+		onMouseEnter,
+		onMouseLeave,
+		onClick
+	});
+	return item.tooltip !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_czi_sds_components.Tooltip, {
+		title: null,
+		componentSlot: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_czi_sds_components.TooltipTable, require_objectSpread2._objectSpread2({}, item.tooltip)),
+		placement: "top",
+		open: hoveredIndex === item.originalIndex && !isHidden,
+		disableInteractive: true,
+		slotProps: { popper: {
+			disablePortal: false,
+			modifiers: [{
+				name: "offset",
+				options: { offset: [0, 0] }
+			}]
+		} },
+		children: barSegment
+	}, item.key) : (0, react.cloneElement)(barSegment, { key: item.key });
+};
+const StackedBarChart = (props) => {
+	var _theme$palette4;
+	const { title, badge, hideBadge = false, data, width = "100%", barHeight: barHeightProp = 16, showLegend = true, showLegendValues = true, legendValueFormat = "percentage", selectedIndices = [], onSelectionChange, onSegmentMouseEnter, onSegmentMouseLeave, onLegendItemMouseEnter, onLegendItemMouseLeave, onSegmentClick, onLegendItemClick, selectionBehavior = "dim", mode = "proportional", maxAmount, remainingLabel = "Remaining", remainingUnit, unit, colorGeneratorOptions } = props, rest = require_objectSpread2._objectWithoutProperties(props, _excluded);
+	const barHeight = Math.max(1, barHeightProp);
+	const theme = (0, _mui_material.useTheme)();
+	const [hoveredIndex, setHoveredIndex] = (0, react.useState)(null);
+	const [animatedItems, setAnimatedItems] = (0, react.useState)([]);
+	const [autoColorMap, setAutoColorMap] = (0, react.useState)(/* @__PURE__ */ new Map());
+	const [animatedRemainingPercentage, setAnimatedRemainingPercentage] = (0, react.useState)(0);
+	const previousProcessedRef = (0, react.useRef)([]);
+	const previousDataKeysRef = (0, react.useRef)(/* @__PURE__ */ new Set());
+	const previousColorOptionsRef = (0, react.useRef)(null);
+	const isDarkMode = (0, react.useMemo)(() => (0, _czi_sds_components.getMode)({ theme }) === "dark", [theme]);
+	const generateColorMap = (0, react.useCallback)((items) => {
+		const palette = (0, _czi_sds_components.generateDiscreteColors)(items.length, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, colorGeneratorOptions || {}), {}, { isDarkMode }));
+		const newColorMap = /* @__PURE__ */ new Map();
+		items.forEach((item, index) => {
+			var _theme$palette2;
+			newColorMap.set(item.name, palette[index] || (theme === null || theme === void 0 || (_theme$palette2 = theme.palette) === null || _theme$palette2 === void 0 || (_theme$palette2 = _theme$palette2.sds) === null || _theme$palette2 === void 0 || (_theme$palette2 = _theme$palette2.base) === null || _theme$palette2 === void 0 ? void 0 : _theme$palette2.ornamentSecondary));
+		});
+		return newColorMap;
+	}, [
+		colorGeneratorOptions,
+		isDarkMode,
+		theme
+	]);
+	(0, react.useEffect)(() => {
+		const autoItems = data.filter((item) => !item.color);
+		const currentDataKeys = new Set(data.map((item) => item.name));
+		const previousDataKeys = previousDataKeysRef.current;
+		const previousColorOptions = previousColorOptionsRef.current;
+		const colorOptionsChanged = !previousColorOptions || previousColorOptions.isDarkMode !== isDarkMode || previousColorOptions.options !== colorGeneratorOptions;
+		previousDataKeysRef.current = currentDataKeys;
+		previousColorOptionsRef.current = {
+			options: colorGeneratorOptions,
+			isDarkMode
+		};
+		if (autoItems.length === 0) {
+			if (autoColorMap.size > 0) setAutoColorMap(/* @__PURE__ */ new Map());
+			return;
+		}
+		const hasNewItems = autoItems.some((item) => !previousDataKeys.has(item.name));
+		if (autoColorMap.size === 0 || hasNewItems || colorOptionsChanged) setAutoColorMap(generateColorMap(autoItems));
+		else {
+			const autoKeys = new Set(autoItems.map((item) => item.name));
+			const updatedMap = new Map(autoColorMap);
+			let hasChanges = false;
+			for (const key of Array.from(updatedMap.keys())) if (!autoKeys.has(key)) {
+				updatedMap.delete(key);
+				hasChanges = true;
+			}
+			if (hasChanges) setAutoColorMap(updatedMap);
+		}
+	}, [
+		data,
+		colorGeneratorOptions,
+		isDarkMode,
+		theme,
+		generateColorMap
+	]);
+	const displayBadge = badge !== null && badge !== void 0 ? badge : calculateBadgeText(data.length, selectedIndices.length);
+	const { effectiveMaxAmount, hasRemaining, remainingValue, remainingPercentage } = (0, react.useMemo)(() => {
+		const total = data.reduce((sum, item) => sum + item.value, 0);
+		const maxAmountValue = mode === "cumulative" && maxAmount ? maxAmount : total;
+		const hasRemainingSegment = mode === "cumulative" && total < maxAmountValue;
+		const remaining = hasRemainingSegment ? maxAmountValue - total : 0;
+		return {
+			effectiveMaxAmount: maxAmountValue,
+			hasRemaining: hasRemainingSegment,
+			remainingValue: remaining,
+			remainingPercentage: hasRemainingSegment ? remaining / maxAmountValue * 100 : 0
+		};
+	}, [
+		data,
+		mode,
+		maxAmount
+	]);
+	const dataWithPercentages = (0, react.useMemo)(() => {
+		return data.map((item, index) => {
+			var _theme$palette3;
+			const resolvedColor = item.color || autoColorMap.get(item.name) || (theme === null || theme === void 0 || (_theme$palette3 = theme.palette) === null || _theme$palette3 === void 0 || (_theme$palette3 = _theme$palette3.sds) === null || _theme$palette3 === void 0 || (_theme$palette3 = _theme$palette3.base) === null || _theme$palette3 === void 0 ? void 0 : _theme$palette3.ornamentSecondary);
+			return require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, item), {}, {
+				color: resolvedColor,
+				percentage: effectiveMaxAmount > 0 ? item.value / effectiveMaxAmount * 100 : 0,
+				key: item.name,
+				originalIndex: index,
+				isEntering: false,
+				isExiting: false
+			});
+		});
+	}, [
+		data,
+		effectiveMaxAmount,
+		autoColorMap,
+		theme
+	]);
+	(0, react.useEffect)(() => {
+		const prevItems = previousProcessedRef.current;
+		const nextItems = dataWithPercentages;
+		const nextItemsMap = new Map(nextItems.map((item) => [item.key, item]));
+		if (prevItems.length === 0) {
+			setAnimatedItems(nextItems);
+			setAnimatedRemainingPercentage(remainingPercentage);
+			previousProcessedRef.current = nextItems;
+			return;
+		}
+		const step1Items = [...prevItems];
+		let currentInsertionIndex = 0;
+		for (const item of nextItems) {
+			const step1Index = step1Items.findIndex((step1Item) => step1Item.key === item.key);
+			if (step1Index === -1) {
+				step1Items.splice(currentInsertionIndex, 0, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, item), {}, { isEntering: true }));
+				currentInsertionIndex++;
+			} else currentInsertionIndex = step1Index + 1;
+		}
+		setAnimatedItems(step1Items);
+		const timeoutIds = [];
+		timeoutIds.push(window.setTimeout(() => {
+			setAnimatedItems(step1Items.map((item) => {
+				var _nextItemsMap$get;
+				return (_nextItemsMap$get = nextItemsMap.get(item.key)) !== null && _nextItemsMap$get !== void 0 ? _nextItemsMap$get : require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, item), {}, { isExiting: true });
+			}));
+			setAnimatedRemainingPercentage(remainingPercentage);
+			timeoutIds.push(window.setTimeout(() => {
+				setAnimatedItems(nextItems);
+				previousProcessedRef.current = nextItems;
+			}, 350));
+		}, 0));
+		return () => {
+			timeoutIds.forEach((id) => window.clearTimeout(id));
+		};
+	}, [dataWithPercentages, remainingPercentage]);
+	const selectedIndicesSet = (0, react.useMemo)(() => new Set(selectedIndices), [selectedIndices]);
+	const { styledItems, updatedRemainingPercentage, updatedRemainingValue } = (0, react.useMemo)(() => applySelectionStyling(animatedItems, selectedIndicesSet, selectionBehavior, mode, hasRemaining, effectiveMaxAmount, animatedRemainingPercentage, remainingValue), [
+		animatedItems,
+		selectedIndicesSet,
+		selectionBehavior,
+		mode,
+		hasRemaining,
+		effectiveMaxAmount,
+		animatedRemainingPercentage,
+		remainingValue
+	]);
+	const isHideMode = selectionBehavior === "hide" && selectedIndices.length > 0;
+	const displayRemainingPercentage = isHideMode ? updatedRemainingPercentage : animatedRemainingPercentage;
+	const displayRemainingValue = isHideMode ? updatedRemainingValue : remainingValue;
+	const legendItems = (0, react.useMemo)(() => buildLegendItems(dataWithPercentages, {
+		showLegendValues,
+		legendValueFormat,
+		unit,
+		hasRemaining,
+		showLegend,
+		remainingValue: displayRemainingValue,
+		remainingPercentage: displayRemainingPercentage,
+		remainingLabel,
+		remainingUnit,
+		theme
+	}), [
+		dataWithPercentages,
+		showLegendValues,
+		legendValueFormat,
+		unit,
+		hasRemaining,
+		showLegend,
+		displayRemainingValue,
+		displayRemainingPercentage,
+		remainingLabel,
+		remainingUnit,
+		theme
+	]);
+	const handleLegendItemHover = (0, react.useCallback)((_item, index) => {
+		setHoveredIndex(index);
+		if (onLegendItemMouseEnter && data[index]) onLegendItemMouseEnter(data[index], index);
+	}, [onLegendItemMouseEnter, data]);
+	const handleLegendItemLeave = (0, react.useCallback)((_item, index) => {
+		setHoveredIndex(null);
+		if (onLegendItemMouseLeave && data[index]) onLegendItemMouseLeave(data[index], index);
+	}, [onLegendItemMouseLeave, data]);
+	const handleLegendItemClickInternal = (0, react.useCallback)((_item, index) => {
+		if (onLegendItemClick && data[index]) onLegendItemClick(data[index], index);
+	}, [onLegendItemClick, data]);
+	const handleSelectionChange = (0, react.useCallback)((newSelectedIndices) => {
+		if (!onSelectionChange) return;
+		onSelectionChange(newSelectedIndices, data.filter((item, itemIndex) => newSelectedIndices.includes(itemIndex)));
+	}, [onSelectionChange, data]);
+	const handleSegmentClick = (0, react.useCallback)((index) => {
+		if (onSegmentClick && data[index]) onSegmentClick(data[index], index);
+		if (!onSelectionChange) return;
+		handleSelectionChange(selectedIndicesSet.has(index) ? selectedIndices.filter((i) => i !== index) : [...selectedIndices, index]);
+	}, [
+		onSelectionChange,
+		onSegmentClick,
+		data,
+		selectedIndices,
+		selectedIndicesSet,
+		handleSelectionChange
+	]);
+	const lastVisibleIndex = (0, react.useMemo)(() => {
+		for (let i = styledItems.length - 1; i >= 0; i--) if (styledItems[i].percentage > 0) return i;
+		return -1;
+	}, [styledItems]);
+	const chartContent = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledStackedBarChartWrapper, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(BarContainer, {
+		width,
+		barHeight,
+		isEmpty: styledItems.length === 0 && !hasRemaining,
+		children: [styledItems.map((item, index) => {
+			return renderBarSegment(item, {
+				barHeight,
+				hoveredIndex,
+				selectedIndicesSet,
+				selectionBehavior,
+				isLast: index === lastVisibleIndex && !hasRemaining,
+				onMouseEnter: () => {
+					if (!item.isExiting) {
+						setHoveredIndex(item.originalIndex);
+						if (onSegmentMouseEnter && data[item.originalIndex]) onSegmentMouseEnter(data[item.originalIndex], item.originalIndex);
+					}
+				},
+				onMouseLeave: () => {
+					setHoveredIndex(null);
+					if (onSegmentMouseLeave && data[item.originalIndex]) onSegmentMouseLeave(data[item.originalIndex], item.originalIndex);
+				},
+				onClick: () => !item.isExiting && handleSegmentClick(item.originalIndex)
+			});
+		}), previousProcessedRef.current.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BarSegment, {
+			color: theme === null || theme === void 0 || (_theme$palette4 = theme.palette) === null || _theme$palette4 === void 0 || (_theme$palette4 = _theme$palette4.sds) === null || _theme$palette4 === void 0 || (_theme$palette4 = _theme$palette4.base) === null || _theme$palette4 === void 0 ? void 0 : _theme$palette4.backgroundTertiary,
+			percentage: displayRemainingPercentage,
+			height: barHeight,
+			isLast: true,
+			opacity: 1,
+			disabled: true
+		}, "remaining")]
+	}), showLegend && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_czi_sds_components.Legend, {
+		items: legendItems,
+		showValues: showLegendValues,
+		onItemMouseEnter: handleLegendItemHover,
+		onItemMouseLeave: handleLegendItemLeave,
+		onItemClick: onLegendItemClick ? handleLegendItemClickInternal : void 0,
+		selectedIndices,
+		onSelectionChange: onSelectionChange ? handleSelectionChange : void 0,
+		hoveredIndex
+	})] });
+	if (!title) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartWrapper, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({ width }, rest), {}, { children: chartContent }));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ChartWrapper, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({ width }, rest), {}, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TitleContainer, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartTitle, { children: title }), !hideBadge && displayBadge && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledBadge, { children: displayBadge })] }), chartContent] }));
+};
+//#endregion
+Object.defineProperty(exports, "StackedBarChart", {
+	enumerable: true,
+	get: function() {
+		return StackedBarChart;
+	}
+});