@czi-sds/data-viz 2.3.0 → 2.4.0

package/dist/shared/StackedBarChart.esm.js

@@ -0,0 +1,483 @@
+"use client";
+import { n as _objectWithoutProperties, t as _objectSpread2 } from "./objectSpread2.esm.js";
+import { cloneElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import styled from "@emotion/styled";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Legend, Tooltip, TooltipTable, fontHeaderS, fontTabularSemiboldXxxxs, generateDiscreteColors, getCorners, getMode, getSemanticColors, getSpaces } from "@czi-sds/components";
+import { useTheme } from "@mui/material";
+//#region src/core/StackedBarChart/style.ts
+const ChartWrapper = styled("div")`
+  display: flex;
+  flex-direction: column;
+  width: ${(props) => typeof props.width === "number" ? `${props.width}px` : props.width};
+`;
+const TitleContainer = styled("div")`
+  display: flex;
+  align-items: center;
+
+  ${(props) => {
+	const spaces = 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 = styled("div")`
+  ${fontHeaderS}
+
+  ${(props) => {
+	var _semanticColors$base;
+	const semanticColors = 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 = styled("div")`
+  ${fontTabularSemiboldXxxxs}
+
+  ${(props) => {
+	var _semanticColors$base2, _semanticColors$base3;
+	const spaces = getSpaces(props);
+	const corners = getCorners(props);
+	const semanticColors = 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 = styled("div")`
+  ${(props) => {
+	var _semanticColors$base4;
+	const { width, barHeight, isEmpty } = props;
+	const corners = getCorners(props);
+	const semanticColors = 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 = styled("div")`
+  ${(props) => {
+	const { color, height, percentage, opacity, disabled, isLast } = props;
+	const spaces = 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 = styled("div")`
+  ${(props) => {
+	const spaces = 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 _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) => _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 _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__ */ 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__ */ jsx(Tooltip, {
+		title: null,
+		componentSlot: /* @__PURE__ */ jsx(TooltipTable, _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) : 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 = _objectWithoutProperties(props, _excluded);
+	const barHeight = Math.max(1, barHeightProp);
+	const theme = useTheme();
+	const [hoveredIndex, setHoveredIndex] = useState(null);
+	const [animatedItems, setAnimatedItems] = useState([]);
+	const [autoColorMap, setAutoColorMap] = useState(/* @__PURE__ */ new Map());
+	const [animatedRemainingPercentage, setAnimatedRemainingPercentage] = useState(0);
+	const previousProcessedRef = useRef([]);
+	const previousDataKeysRef = useRef(/* @__PURE__ */ new Set());
+	const previousColorOptionsRef = useRef(null);
+	const isDarkMode = useMemo(() => getMode({ theme }) === "dark", [theme]);
+	const generateColorMap = useCallback((items) => {
+		const palette = generateDiscreteColors(items.length, _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
+	]);
+	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 } = 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 = 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 _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
+	]);
+	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, _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 : _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 = useMemo(() => new Set(selectedIndices), [selectedIndices]);
+	const { styledItems, updatedRemainingPercentage, updatedRemainingValue } = 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 = 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 = useCallback((_item, index) => {
+		setHoveredIndex(index);
+		if (onLegendItemMouseEnter && data[index]) onLegendItemMouseEnter(data[index], index);
+	}, [onLegendItemMouseEnter, data]);
+	const handleLegendItemLeave = useCallback((_item, index) => {
+		setHoveredIndex(null);
+		if (onLegendItemMouseLeave && data[index]) onLegendItemMouseLeave(data[index], index);
+	}, [onLegendItemMouseLeave, data]);
+	const handleLegendItemClickInternal = useCallback((_item, index) => {
+		if (onLegendItemClick && data[index]) onLegendItemClick(data[index], index);
+	}, [onLegendItemClick, data]);
+	const handleSelectionChange = useCallback((newSelectedIndices) => {
+		if (!onSelectionChange) return;
+		onSelectionChange(newSelectedIndices, data.filter((item, itemIndex) => newSelectedIndices.includes(itemIndex)));
+	}, [onSelectionChange, data]);
+	const handleSegmentClick = 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 = useMemo(() => {
+		for (let i = styledItems.length - 1; i >= 0; i--) if (styledItems[i].percentage > 0) return i;
+		return -1;
+	}, [styledItems]);
+	const chartContent = /* @__PURE__ */ jsxs(StyledStackedBarChartWrapper, { children: [/* @__PURE__ */ 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__ */ 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__ */ jsx(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__ */ jsx(ChartWrapper, _objectSpread2(_objectSpread2({ width }, rest), {}, { children: chartContent }));
+	return /* @__PURE__ */ jsxs(ChartWrapper, _objectSpread2(_objectSpread2({ width }, rest), {}, { children: [/* @__PURE__ */ jsxs(TitleContainer, { children: [/* @__PURE__ */ jsx(ChartTitle, { children: title }), !hideBadge && displayBadge && /* @__PURE__ */ jsx(StyledBadge, { children: displayBadge })] }), chartContent] }));
+};
+//#endregion
+export { StackedBarChart as t };

package/dist/shared/colorScales.cjs.d.ts

@@ -0,0 +1,45 @@
+//#region src/common/colorScales.d.ts
+/** RGB triplet with each channel in the range 0-255. */
+type Rgb = [number, number, number];
+/** A stop on a continuous color scale, positioned at `t` in the range 0-1. */
+interface ContinuousColorStop {
+  t: number;
+  color: string;
+}
+/**
+ * A band on a stepped color scale. `threshold` is the upper bound of the band
+ * on the normalized 0-1 value range; `label` is rendered above the band in the
+ * legend.
+ */
+interface SteppedColorStop {
+  threshold: number;
+  color: string;
+  label: string;
+}
+/**
+ * How values map to colors, both in a visualization and in its legend. A
+ * continuous scale interpolates between its stops and renders as a gradient
+ * bar; a stepped scale renders as discrete bands.
+ */
+type ColorScale = {
+  kind: "continuous";
+  stops: ContinuousColorStop[];
+} | {
+  kind: "stepped";
+  stops: SteppedColorStop[];
+};
+/**
+ * Perceptually uniform sequential scale (matplotlib's plasma), the default for
+ * value overlays.
+ */
+declare const PLASMA_COLOR_SCALE: ColorScale;
+/**
+ * Colors a raw value against a scale, normalizing it into `min`-`max` first.
+ * Returns null when the value sits at or below `min`, or when the range is
+ * degenerate, so callers can fall back to a neutral color.
+ */
+declare function sampleColorScale(scale: ColorScale, value: number, max: number, min?: number): Rgb | null;
+/** CSS `linear-gradient` spanning a continuous scale, for the legend bar. */
+declare function toCssGradient(stops: ContinuousColorStop[]): string;
+//#endregion
+export { sampleColorScale as a, SteppedColorStop as i, ContinuousColorStop as n, toCssGradient as o, PLASMA_COLOR_SCALE as r, ColorScale as t };

package/dist/shared/colorScales.cjs.js

@@ -0,0 +1,126 @@
+"use client";
+//#region src/common/colorScales.ts
+/**
+* Perceptually uniform sequential scale (matplotlib's plasma), the default for
+* value overlays.
+*/
+const PLASMA_COLOR_SCALE = {
+	kind: "continuous",
+	stops: [
+		{
+			color: "#0D0887",
+			t: 0
+		},
+		{
+			color: "#7E03A8",
+			t: .25
+		},
+		{
+			color: "#CC4778",
+			t: .5
+		},
+		{
+			color: "#F89441",
+			t: .75
+		},
+		{
+			color: "#F0F921",
+			t: 1
+		}
+	]
+};
+/** Parses `#RRGGBB` (or `RRGGBB`) into an RGB triplet. */
+function hexToRgb(hex) {
+	const h = hex.replace("#", "");
+	return [
+		parseInt(h.substring(0, 2), 16),
+		parseInt(h.substring(2, 4), 16),
+		parseInt(h.substring(4, 6), 16)
+	];
+}
+/** Linearly interpolates a continuous scale at `t`, clamped to 0-1. */
+function sampleContinuousScale(stops, t) {
+	if (stops.length === 0) return [
+		0,
+		0,
+		0
+	];
+	const first = stops[0];
+	const last = stops[stops.length - 1];
+	const clamped = Math.min(1, Math.max(0, t));
+	let lo = first;
+	let hi = last;
+	for (let i = 0; i < stops.length - 1; i++) {
+		const current = stops[i];
+		const next = stops[i + 1];
+		if (clamped >= current.t && clamped <= next.t) {
+			lo = current;
+			hi = next;
+			break;
+		}
+	}
+	const loRgb = hexToRgb(lo.color);
+	const hiRgb = hexToRgb(hi.color);
+	const f = hi.t === lo.t ? 0 : (clamped - lo.t) / (hi.t - lo.t);
+	return [
+		Math.round(loRgb[0] + f * (hiRgb[0] - loRgb[0])),
+		Math.round(loRgb[1] + f * (hiRgb[1] - loRgb[1])),
+		Math.round(loRgb[2] + f * (hiRgb[2] - loRgb[2]))
+	];
+}
+/**
+* Picks the band a normalized value falls into on a stepped scale.
+*
+* A value lands in the first band whose threshold it falls short of, which puts
+* each threshold at the bottom of the band above it: against thresholds of 0.5,
+* 0.7 and 0.9, a value of exactly 0.7 reads as the 0.7-0.9 band, not the one
+* below.
+*/
+function sampleSteppedScale(stops, t) {
+	for (const stop of stops) if (t < stop.threshold) return hexToRgb(stop.color);
+	const last = stops[stops.length - 1];
+	return last ? hexToRgb(last.color) : [
+		0,
+		0,
+		0
+	];
+}
+/**
+* Colors a raw value against a scale, normalizing it into `min`-`max` first.
+* Returns null when the value sits at or below `min`, or when the range is
+* degenerate, so callers can fall back to a neutral color.
+*/
+function sampleColorScale(scale, value, max, min = 0) {
+	if (max <= min || value <= min) return null;
+	const t = Math.min(1, (value - min) / (max - min));
+	return scale.kind === "continuous" ? sampleContinuousScale(scale.stops, t) : sampleSteppedScale(scale.stops, t);
+}
+/** CSS `linear-gradient` spanning a continuous scale, for the legend bar. */
+function toCssGradient(stops) {
+	return `linear-gradient(to right, ${stops.map((stop) => `${stop.color} ${stop.t * 100}%`).join(", ")})`;
+}
+//#endregion
+Object.defineProperty(exports, "PLASMA_COLOR_SCALE", {
+	enumerable: true,
+	get: function() {
+		return PLASMA_COLOR_SCALE;
+	}
+});
+Object.defineProperty(exports, "sampleColorScale", {
+	enumerable: true,
+	get: function() {
+		return sampleColorScale;
+	}
+});
+Object.defineProperty(exports, "sampleSteppedScale", {
+	enumerable: true,
+	get: function() {
+		return sampleSteppedScale;
+	}
+});
+Object.defineProperty(exports, "toCssGradient", {
+	enumerable: true,
+	get: function() {
+		return toCssGradient;
+	}
+});