@shtabapp/ui-kit 1.84.0 → 1.85.1

package/dist/utils/chart/core/buildChartSeriesPoints.js

@@ -0,0 +1,7 @@
+//#region src/utils/chart/core/buildChartSeriesPoints.ts
+var buildChartSeriesPoints = (labels, values) => labels.map((label, labelIndex) => ({
+	label,
+	value: values[labelIndex] ?? 0
+}));
+//#endregion
+export { buildChartSeriesPoints };

package/dist/utils/chart/core/chartCssVariables.cjs

@@ -0,0 +1,151 @@
+//#region src/utils/chart/core/chartCssVariables.ts
+var CHART_CSS_VARIABLES = {
+	axisLabel: "--s-ui-chart-axis-label",
+	grid: "--s-ui-chart-grid",
+	crosshair: "--s-ui-chart-crosshair",
+	legendLabel: "--s-ui-chart-legend-label",
+	seriesPrimary: "--s-ui-chart-series-primary",
+	seriesFillStart: "--s-ui-chart-series-fill-start",
+	seriesFillEnd: "--s-ui-chart-series-fill-end",
+	seriesFillOpacity: "--s-ui-chart-series-fill-opacity",
+	skeletonSeries: "--s-ui-chart-skeleton-series",
+	skeletonPalette1: "--s-ui-chart-skeleton-palette-1",
+	skeletonPalette2: "--s-ui-chart-skeleton-palette-2",
+	skeletonPalette3: "--s-ui-chart-skeleton-palette-3",
+	skeletonPalette4: "--s-ui-chart-skeleton-palette-4",
+	skeletonPalette5: "--s-ui-chart-skeleton-palette-5",
+	skeletonPalette6: "--s-ui-chart-skeleton-palette-6",
+	skeletonFillStart: "--s-ui-chart-skeleton-fill-start",
+	skeletonFillEnd: "--s-ui-chart-skeleton-fill-end",
+	skeletonFillOpacity: "--s-ui-chart-skeleton-fill-opacity",
+	fillMuted: "--s-ui-chart-fill-muted",
+	exportBackground: "--s-ui-chart-export-background",
+	tooltipBackground: "--s-ui-chart-tooltip-background",
+	tooltipText: "--s-ui-chart-tooltip-text",
+	stackedPalette1: "--s-ui-chart-stacked-palette-1",
+	stackedPalette2: "--s-ui-chart-stacked-palette-2",
+	stackedPalette3: "--s-ui-chart-stacked-palette-3",
+	stackedPalette4: "--s-ui-chart-stacked-palette-4",
+	stackedPalette5: "--s-ui-chart-stacked-palette-5",
+	stackedPalette6: "--s-ui-chart-stacked-palette-6",
+	barStackedPalette1: "--s-ui-chart-bar-stacked-palette-1",
+	barStackedPalette2: "--s-ui-chart-bar-stacked-palette-2",
+	barStackedPalette3: "--s-ui-chart-bar-stacked-palette-3",
+	barStackedPalette4: "--s-ui-chart-bar-stacked-palette-4",
+	barStackedPalette5: "--s-ui-chart-bar-stacked-palette-5",
+	barStackedPalette6: "--s-ui-chart-bar-stacked-palette-6",
+	barHoverOutline: "--s-ui-chart-bar-hover-outline",
+	barValueLabel: "--s-ui-chart-bar-value-label",
+	barValueLabelMuted: "--s-ui-chart-bar-value-label-muted",
+	barAxisLabelMuted: "--s-ui-chart-bar-axis-label-muted",
+	barTrend: "--s-ui-chart-bar-trend",
+	barSkeletonPalette1: "--s-ui-chart-bar-skeleton-palette-1",
+	barSkeletonPalette2: "--s-ui-chart-bar-skeleton-palette-2",
+	barSkeletonPalette3: "--s-ui-chart-bar-skeleton-palette-3",
+	barSkeletonPalette4: "--s-ui-chart-bar-skeleton-palette-4",
+	barSkeletonPalette5: "--s-ui-chart-bar-skeleton-palette-5",
+	barSkeletonPalette6: "--s-ui-chart-bar-skeleton-palette-6",
+	piePalette1: "--s-ui-chart-pie-palette-1",
+	piePalette2: "--s-ui-chart-pie-palette-2",
+	piePalette3: "--s-ui-chart-pie-palette-3",
+	piePalette4: "--s-ui-chart-pie-palette-4",
+	piePalette5: "--s-ui-chart-pie-palette-5",
+	piePalette6: "--s-ui-chart-pie-palette-6",
+	piePalette7: "--s-ui-chart-pie-palette-7",
+	piePalette8: "--s-ui-chart-pie-palette-8",
+	pieSegmentBorder: "--s-ui-chart-pie-segment-border",
+	pieBadgeBackground: "--s-ui-chart-pie-badge-background",
+	pieBadgeBorder: "--s-ui-chart-pie-badge-border",
+	pieBadgeText: "--s-ui-chart-pie-badge-text",
+	pieHoverShadow: "--s-ui-chart-pie-hover-shadow",
+	pieSkeletonPalette1: "--s-ui-chart-pie-skeleton-palette-1",
+	pieSkeletonPalette2: "--s-ui-chart-pie-skeleton-palette-2",
+	pieSkeletonPalette3: "--s-ui-chart-pie-skeleton-palette-3",
+	pieSkeletonPalette4: "--s-ui-chart-pie-skeleton-palette-4",
+	pieSkeletonPalette5: "--s-ui-chart-pie-skeleton-palette-5",
+	pieSkeletonPalette6: "--s-ui-chart-pie-skeleton-palette-6",
+	pieSkeletonPalette7: "--s-ui-chart-pie-skeleton-palette-7",
+	pieSkeletonPalette8: "--s-ui-chart-pie-skeleton-palette-8",
+	barHorizontalFillDefault: "--s-ui-chart-bar-horizontal-fill-default",
+	barHorizontalSkeletonFill: "--s-ui-chart-bar-horizontal-skeleton-fill",
+	barHorizontalCategoryLabel: "--s-ui-chart-bar-horizontal-category-label",
+	barHorizontalCategoryLabelSkeleton: "--s-ui-chart-bar-horizontal-category-label-skeleton",
+	progressLine: "--s-ui-chart-progress-line",
+	referenceFill: "--s-ui-chart-reference-fill",
+	multiLinePalette1: "--s-ui-chart-multi-line-palette-1",
+	multiLinePalette2: "--s-ui-chart-multi-line-palette-2",
+	multiLinePalette3: "--s-ui-chart-multi-line-palette-3",
+	burnupGoal: "--s-ui-chart-burnup-goal",
+	burnupPlan: "--s-ui-chart-burnup-plan",
+	burnupFact: "--s-ui-chart-burnup-fact",
+	burnupFactFillStart: "--s-ui-chart-burnup-fact-fill-start",
+	burnupFactFillEnd: "--s-ui-chart-burnup-fact-fill-end",
+	burnupToday: "--s-ui-chart-burnup-today",
+	burnupTagBackground: "--s-ui-chart-burnup-tag-background"
+};
+var STACKED_SERIES_PALETTE_CSS_VARIABLES = [
+	CHART_CSS_VARIABLES.stackedPalette1,
+	CHART_CSS_VARIABLES.stackedPalette2,
+	CHART_CSS_VARIABLES.stackedPalette3,
+	CHART_CSS_VARIABLES.stackedPalette4,
+	CHART_CSS_VARIABLES.stackedPalette5,
+	CHART_CSS_VARIABLES.stackedPalette6
+];
+var SKELETON_SERIES_PALETTE_CSS_VARIABLES = [
+	CHART_CSS_VARIABLES.skeletonPalette1,
+	CHART_CSS_VARIABLES.skeletonPalette2,
+	CHART_CSS_VARIABLES.skeletonPalette3,
+	CHART_CSS_VARIABLES.skeletonPalette4,
+	CHART_CSS_VARIABLES.skeletonPalette5,
+	CHART_CSS_VARIABLES.skeletonPalette6
+];
+var BAR_STACKED_SERIES_PALETTE_CSS_VARIABLES = [
+	CHART_CSS_VARIABLES.barStackedPalette1,
+	CHART_CSS_VARIABLES.barStackedPalette2,
+	CHART_CSS_VARIABLES.barStackedPalette3,
+	CHART_CSS_VARIABLES.barStackedPalette4,
+	CHART_CSS_VARIABLES.barStackedPalette5,
+	CHART_CSS_VARIABLES.barStackedPalette6
+];
+var BAR_SKELETON_SERIES_PALETTE_CSS_VARIABLES = [
+	CHART_CSS_VARIABLES.barSkeletonPalette1,
+	CHART_CSS_VARIABLES.barSkeletonPalette2,
+	CHART_CSS_VARIABLES.barSkeletonPalette3,
+	CHART_CSS_VARIABLES.barSkeletonPalette4,
+	CHART_CSS_VARIABLES.barSkeletonPalette5,
+	CHART_CSS_VARIABLES.barSkeletonPalette6
+];
+var PIE_SLICE_PALETTE_CSS_VARIABLES = [
+	CHART_CSS_VARIABLES.piePalette1,
+	CHART_CSS_VARIABLES.piePalette2,
+	CHART_CSS_VARIABLES.piePalette3,
+	CHART_CSS_VARIABLES.piePalette4,
+	CHART_CSS_VARIABLES.piePalette5,
+	CHART_CSS_VARIABLES.piePalette6,
+	CHART_CSS_VARIABLES.piePalette7,
+	CHART_CSS_VARIABLES.piePalette8
+];
+var PIE_SKELETON_SLICE_PALETTE_CSS_VARIABLES = [
+	CHART_CSS_VARIABLES.pieSkeletonPalette1,
+	CHART_CSS_VARIABLES.pieSkeletonPalette2,
+	CHART_CSS_VARIABLES.pieSkeletonPalette3,
+	CHART_CSS_VARIABLES.pieSkeletonPalette4,
+	CHART_CSS_VARIABLES.pieSkeletonPalette5,
+	CHART_CSS_VARIABLES.pieSkeletonPalette6,
+	CHART_CSS_VARIABLES.pieSkeletonPalette7,
+	CHART_CSS_VARIABLES.pieSkeletonPalette8
+];
+var MULTI_LINE_SERIES_PALETTE_CSS_VARIABLES = [
+	CHART_CSS_VARIABLES.multiLinePalette1,
+	CHART_CSS_VARIABLES.multiLinePalette2,
+	CHART_CSS_VARIABLES.multiLinePalette3
+];
+//#endregion
+exports.BAR_SKELETON_SERIES_PALETTE_CSS_VARIABLES = BAR_SKELETON_SERIES_PALETTE_CSS_VARIABLES;
+exports.BAR_STACKED_SERIES_PALETTE_CSS_VARIABLES = BAR_STACKED_SERIES_PALETTE_CSS_VARIABLES;
+exports.CHART_CSS_VARIABLES = CHART_CSS_VARIABLES;
+exports.MULTI_LINE_SERIES_PALETTE_CSS_VARIABLES = MULTI_LINE_SERIES_PALETTE_CSS_VARIABLES;
+exports.PIE_SKELETON_SLICE_PALETTE_CSS_VARIABLES = PIE_SKELETON_SLICE_PALETTE_CSS_VARIABLES;
+exports.PIE_SLICE_PALETTE_CSS_VARIABLES = PIE_SLICE_PALETTE_CSS_VARIABLES;
+exports.SKELETON_SERIES_PALETTE_CSS_VARIABLES = SKELETON_SERIES_PALETTE_CSS_VARIABLES;
+exports.STACKED_SERIES_PALETTE_CSS_VARIABLES = STACKED_SERIES_PALETTE_CSS_VARIABLES;

package/dist/utils/chart/core/chartCssVariables.js

@@ -0,0 +1,144 @@
+//#region src/utils/chart/core/chartCssVariables.ts
+var CHART_CSS_VARIABLES = {
+	axisLabel: "--s-ui-chart-axis-label",
+	grid: "--s-ui-chart-grid",
+	crosshair: "--s-ui-chart-crosshair",
+	legendLabel: "--s-ui-chart-legend-label",
+	seriesPrimary: "--s-ui-chart-series-primary",
+	seriesFillStart: "--s-ui-chart-series-fill-start",
+	seriesFillEnd: "--s-ui-chart-series-fill-end",
+	seriesFillOpacity: "--s-ui-chart-series-fill-opacity",
+	skeletonSeries: "--s-ui-chart-skeleton-series",
+	skeletonPalette1: "--s-ui-chart-skeleton-palette-1",
+	skeletonPalette2: "--s-ui-chart-skeleton-palette-2",
+	skeletonPalette3: "--s-ui-chart-skeleton-palette-3",
+	skeletonPalette4: "--s-ui-chart-skeleton-palette-4",
+	skeletonPalette5: "--s-ui-chart-skeleton-palette-5",
+	skeletonPalette6: "--s-ui-chart-skeleton-palette-6",
+	skeletonFillStart: "--s-ui-chart-skeleton-fill-start",
+	skeletonFillEnd: "--s-ui-chart-skeleton-fill-end",
+	skeletonFillOpacity: "--s-ui-chart-skeleton-fill-opacity",
+	fillMuted: "--s-ui-chart-fill-muted",
+	exportBackground: "--s-ui-chart-export-background",
+	tooltipBackground: "--s-ui-chart-tooltip-background",
+	tooltipText: "--s-ui-chart-tooltip-text",
+	stackedPalette1: "--s-ui-chart-stacked-palette-1",
+	stackedPalette2: "--s-ui-chart-stacked-palette-2",
+	stackedPalette3: "--s-ui-chart-stacked-palette-3",
+	stackedPalette4: "--s-ui-chart-stacked-palette-4",
+	stackedPalette5: "--s-ui-chart-stacked-palette-5",
+	stackedPalette6: "--s-ui-chart-stacked-palette-6",
+	barStackedPalette1: "--s-ui-chart-bar-stacked-palette-1",
+	barStackedPalette2: "--s-ui-chart-bar-stacked-palette-2",
+	barStackedPalette3: "--s-ui-chart-bar-stacked-palette-3",
+	barStackedPalette4: "--s-ui-chart-bar-stacked-palette-4",
+	barStackedPalette5: "--s-ui-chart-bar-stacked-palette-5",
+	barStackedPalette6: "--s-ui-chart-bar-stacked-palette-6",
+	barHoverOutline: "--s-ui-chart-bar-hover-outline",
+	barValueLabel: "--s-ui-chart-bar-value-label",
+	barValueLabelMuted: "--s-ui-chart-bar-value-label-muted",
+	barAxisLabelMuted: "--s-ui-chart-bar-axis-label-muted",
+	barTrend: "--s-ui-chart-bar-trend",
+	barSkeletonPalette1: "--s-ui-chart-bar-skeleton-palette-1",
+	barSkeletonPalette2: "--s-ui-chart-bar-skeleton-palette-2",
+	barSkeletonPalette3: "--s-ui-chart-bar-skeleton-palette-3",
+	barSkeletonPalette4: "--s-ui-chart-bar-skeleton-palette-4",
+	barSkeletonPalette5: "--s-ui-chart-bar-skeleton-palette-5",
+	barSkeletonPalette6: "--s-ui-chart-bar-skeleton-palette-6",
+	piePalette1: "--s-ui-chart-pie-palette-1",
+	piePalette2: "--s-ui-chart-pie-palette-2",
+	piePalette3: "--s-ui-chart-pie-palette-3",
+	piePalette4: "--s-ui-chart-pie-palette-4",
+	piePalette5: "--s-ui-chart-pie-palette-5",
+	piePalette6: "--s-ui-chart-pie-palette-6",
+	piePalette7: "--s-ui-chart-pie-palette-7",
+	piePalette8: "--s-ui-chart-pie-palette-8",
+	pieSegmentBorder: "--s-ui-chart-pie-segment-border",
+	pieBadgeBackground: "--s-ui-chart-pie-badge-background",
+	pieBadgeBorder: "--s-ui-chart-pie-badge-border",
+	pieBadgeText: "--s-ui-chart-pie-badge-text",
+	pieHoverShadow: "--s-ui-chart-pie-hover-shadow",
+	pieSkeletonPalette1: "--s-ui-chart-pie-skeleton-palette-1",
+	pieSkeletonPalette2: "--s-ui-chart-pie-skeleton-palette-2",
+	pieSkeletonPalette3: "--s-ui-chart-pie-skeleton-palette-3",
+	pieSkeletonPalette4: "--s-ui-chart-pie-skeleton-palette-4",
+	pieSkeletonPalette5: "--s-ui-chart-pie-skeleton-palette-5",
+	pieSkeletonPalette6: "--s-ui-chart-pie-skeleton-palette-6",
+	pieSkeletonPalette7: "--s-ui-chart-pie-skeleton-palette-7",
+	pieSkeletonPalette8: "--s-ui-chart-pie-skeleton-palette-8",
+	barHorizontalFillDefault: "--s-ui-chart-bar-horizontal-fill-default",
+	barHorizontalSkeletonFill: "--s-ui-chart-bar-horizontal-skeleton-fill",
+	barHorizontalCategoryLabel: "--s-ui-chart-bar-horizontal-category-label",
+	barHorizontalCategoryLabelSkeleton: "--s-ui-chart-bar-horizontal-category-label-skeleton",
+	progressLine: "--s-ui-chart-progress-line",
+	referenceFill: "--s-ui-chart-reference-fill",
+	multiLinePalette1: "--s-ui-chart-multi-line-palette-1",
+	multiLinePalette2: "--s-ui-chart-multi-line-palette-2",
+	multiLinePalette3: "--s-ui-chart-multi-line-palette-3",
+	burnupGoal: "--s-ui-chart-burnup-goal",
+	burnupPlan: "--s-ui-chart-burnup-plan",
+	burnupFact: "--s-ui-chart-burnup-fact",
+	burnupFactFillStart: "--s-ui-chart-burnup-fact-fill-start",
+	burnupFactFillEnd: "--s-ui-chart-burnup-fact-fill-end",
+	burnupToday: "--s-ui-chart-burnup-today",
+	burnupTagBackground: "--s-ui-chart-burnup-tag-background"
+};
+var STACKED_SERIES_PALETTE_CSS_VARIABLES = [
+	CHART_CSS_VARIABLES.stackedPalette1,
+	CHART_CSS_VARIABLES.stackedPalette2,
+	CHART_CSS_VARIABLES.stackedPalette3,
+	CHART_CSS_VARIABLES.stackedPalette4,
+	CHART_CSS_VARIABLES.stackedPalette5,
+	CHART_CSS_VARIABLES.stackedPalette6
+];
+var SKELETON_SERIES_PALETTE_CSS_VARIABLES = [
+	CHART_CSS_VARIABLES.skeletonPalette1,
+	CHART_CSS_VARIABLES.skeletonPalette2,
+	CHART_CSS_VARIABLES.skeletonPalette3,
+	CHART_CSS_VARIABLES.skeletonPalette4,
+	CHART_CSS_VARIABLES.skeletonPalette5,
+	CHART_CSS_VARIABLES.skeletonPalette6
+];
+var BAR_STACKED_SERIES_PALETTE_CSS_VARIABLES = [
+	CHART_CSS_VARIABLES.barStackedPalette1,
+	CHART_CSS_VARIABLES.barStackedPalette2,
+	CHART_CSS_VARIABLES.barStackedPalette3,
+	CHART_CSS_VARIABLES.barStackedPalette4,
+	CHART_CSS_VARIABLES.barStackedPalette5,
+	CHART_CSS_VARIABLES.barStackedPalette6
+];
+var BAR_SKELETON_SERIES_PALETTE_CSS_VARIABLES = [
+	CHART_CSS_VARIABLES.barSkeletonPalette1,
+	CHART_CSS_VARIABLES.barSkeletonPalette2,
+	CHART_CSS_VARIABLES.barSkeletonPalette3,
+	CHART_CSS_VARIABLES.barSkeletonPalette4,
+	CHART_CSS_VARIABLES.barSkeletonPalette5,
+	CHART_CSS_VARIABLES.barSkeletonPalette6
+];
+var PIE_SLICE_PALETTE_CSS_VARIABLES = [
+	CHART_CSS_VARIABLES.piePalette1,
+	CHART_CSS_VARIABLES.piePalette2,
+	CHART_CSS_VARIABLES.piePalette3,
+	CHART_CSS_VARIABLES.piePalette4,
+	CHART_CSS_VARIABLES.piePalette5,
+	CHART_CSS_VARIABLES.piePalette6,
+	CHART_CSS_VARIABLES.piePalette7,
+	CHART_CSS_VARIABLES.piePalette8
+];
+var PIE_SKELETON_SLICE_PALETTE_CSS_VARIABLES = [
+	CHART_CSS_VARIABLES.pieSkeletonPalette1,
+	CHART_CSS_VARIABLES.pieSkeletonPalette2,
+	CHART_CSS_VARIABLES.pieSkeletonPalette3,
+	CHART_CSS_VARIABLES.pieSkeletonPalette4,
+	CHART_CSS_VARIABLES.pieSkeletonPalette5,
+	CHART_CSS_VARIABLES.pieSkeletonPalette6,
+	CHART_CSS_VARIABLES.pieSkeletonPalette7,
+	CHART_CSS_VARIABLES.pieSkeletonPalette8
+];
+var MULTI_LINE_SERIES_PALETTE_CSS_VARIABLES = [
+	CHART_CSS_VARIABLES.multiLinePalette1,
+	CHART_CSS_VARIABLES.multiLinePalette2,
+	CHART_CSS_VARIABLES.multiLinePalette3
+];
+//#endregion
+export { BAR_SKELETON_SERIES_PALETTE_CSS_VARIABLES, BAR_STACKED_SERIES_PALETTE_CSS_VARIABLES, CHART_CSS_VARIABLES, MULTI_LINE_SERIES_PALETTE_CSS_VARIABLES, PIE_SKELETON_SLICE_PALETTE_CSS_VARIABLES, PIE_SLICE_PALETTE_CSS_VARIABLES, SKELETON_SERIES_PALETTE_CSS_VARIABLES, STACKED_SERIES_PALETTE_CSS_VARIABLES };

package/dist/utils/chart/core/chartInteractivity.cjs

@@ -0,0 +1,178 @@
+const require_chartCssVariables = require("./chartCssVariables.cjs");
+const require_readCssColor = require("../css/readCssColor.cjs");
+const require_createChartAreaFillGradient = require("../line/createChartAreaFillGradient.cjs");
+//#region src/utils/chart/core/chartInteractivity.ts
+var hoverDimStateByChart = /* @__PURE__ */ new WeakMap();
+var normalizeHovered = (hovered, kind) => {
+	if (hovered === null) return null;
+	if (typeof hovered === "number") return kind === "series" ? {
+		index: 0,
+		datasetIndex: hovered
+	} : {
+		index: hovered,
+		datasetIndex: 0
+	};
+	return hovered;
+};
+var isSameHovered = (a, b) => {
+	if (a === null || b === null) return a === b;
+	return a.index === b.index && a.datasetIndex === b.datasetIndex;
+};
+var applyElementDim = (chart, hovered, mutedColor) => {
+	const dataset = chart.data.datasets[0];
+	const baseColors = dataset?.hoverBackgroundColor;
+	if (!dataset || !Array.isArray(baseColors)) return;
+	dataset.backgroundColor = hovered === null ? [...baseColors] : baseColors.map((color, index) => index === hovered.index ? color : mutedColor);
+};
+var preserveColorFormat = (dataset, currentValue, color) => Array.isArray(currentValue) ? (dataset.data ?? []).map(() => color) : color;
+var resolveMutedFill = (hoverBackgroundColor, mutedColor) => typeof hoverBackgroundColor === "function" ? (context) => require_createChartAreaFillGradient.createChartAreaFillGradient(context, mutedColor, require_createChartAreaFillGradient.CHART_AREA_FILL_END_COLOR, require_createChartAreaFillGradient.CHART_AREA_FILL_OPACITY) : mutedColor;
+var applySeriesDim = (chart, hovered, mutedColor) => {
+	chart.data.datasets.forEach((dataset, datasetIndex) => {
+		const isOriginal = hovered === null || datasetIndex === hovered.datasetIndex;
+		const { hoverBackgroundColor, hoverBorderColor } = dataset;
+		if (Array.isArray(hoverBackgroundColor)) dataset.backgroundColor = isOriginal ? [...hoverBackgroundColor] : hoverBackgroundColor.map(() => mutedColor);
+		else if (hoverBackgroundColor !== void 0) dataset.backgroundColor = preserveColorFormat(dataset, dataset.backgroundColor, isOriginal ? hoverBackgroundColor : resolveMutedFill(hoverBackgroundColor, mutedColor));
+		if (hoverBorderColor !== void 0 && !Array.isArray(hoverBorderColor)) dataset.borderColor = preserveColorFormat(dataset, dataset.borderColor, isOriginal ? hoverBorderColor : mutedColor);
+	});
+};
+var applySegmentDim = (chart, hovered, mutedColor) => {
+	chart.data.datasets.forEach((dataset, datasetIndex) => {
+		const { hoverBackgroundColor } = dataset;
+		if (hoverBackgroundColor === void 0) return;
+		dataset.backgroundColor = (dataset.data ?? []).map((_, pointIndex) => {
+			if (!(hovered === null || datasetIndex === hovered.datasetIndex && pointIndex === hovered.index)) return mutedColor;
+			return Array.isArray(hoverBackgroundColor) ? hoverBackgroundColor[pointIndex] : hoverBackgroundColor;
+		});
+	});
+};
+var applyCategoryDim = (chart, hovered, mutedColor) => {
+	chart.data.datasets.forEach((dataset) => {
+		const { hoverBackgroundColor } = dataset;
+		if (!Array.isArray(hoverBackgroundColor)) return;
+		dataset.backgroundColor = hoverBackgroundColor.map((color, pointIndex) => hovered === null || dataset.categories?.[pointIndex] === hovered.index ? color : mutedColor);
+	});
+};
+var DIM_APPLIERS = {
+	element: applyElementDim,
+	series: applySeriesDim,
+	segment: applySegmentDim,
+	category: applyCategoryDim
+};
+var readChartHoveredElement = (chart) => hoverDimStateByChart.get(chart)?.hovered ?? null;
+var isChartPointDimmed = (chart, datasetIndex, pointIndex) => {
+	const state = hoverDimStateByChart.get(chart);
+	const hovered = state?.hovered ?? null;
+	if (!state || hovered === null) return false;
+	switch (state.kind) {
+		case "series": return datasetIndex !== hovered.datasetIndex;
+		case "element": return pointIndex !== hovered.index;
+		case "category": return chart.data.datasets[datasetIndex]?.categories?.[pointIndex] !== hovered.index;
+		case "segment": return datasetIndex !== hovered.datasetIndex || pointIndex !== hovered.index;
+	}
+};
+var isChartCategoryDimmed = (chart, pointIndex) => chart.data.datasets.every((_, datasetIndex) => !chart.isDatasetVisible(datasetIndex) || isChartPointDimmed(chart, datasetIndex, pointIndex));
+var isChartHighlightActive = (chart) => chart.data.datasets.some((dataset, datasetIndex) => chart.isDatasetVisible(datasetIndex) && (dataset.data ?? []).some((_, pointIndex) => isChartPointDimmed(chart, datasetIndex, pointIndex)));
+var dimChart = (chart, kind, hoveredIndex, mutedColor, showPointer = false, source = "external") => {
+	const previousState = hoverDimStateByChart.get(chart);
+	const pinned = previousState?.pinned ?? null;
+	const pointed = normalizeHovered(hoveredIndex, kind);
+	const hovered = pointed ?? pinned;
+	if (isSameHovered(previousState?.hovered ?? null, hovered)) return;
+	hoverDimStateByChart.set(chart, {
+		hovered,
+		pinned,
+		kind,
+		mutedColor,
+		source
+	});
+	DIM_APPLIERS[kind](chart, hovered, mutedColor);
+	chart.canvas.style.cursor = pointed !== null && showPointer ? "pointer" : "";
+	chart.update();
+};
+var pinChartElement = (chart, kind, pinnedIndex, mutedColor) => {
+	const pinned = normalizeHovered(pinnedIndex, kind);
+	hoverDimStateByChart.set(chart, {
+		hovered: pinned,
+		pinned,
+		kind,
+		mutedColor,
+		source: "external"
+	});
+	DIM_APPLIERS[kind](chart, pinned, mutedColor);
+	chart.update();
+};
+var resetChartHoverDim = (chart, source) => {
+	const state = hoverDimStateByChart.get(chart);
+	if (!state || isSameHovered(state.hovered, state.pinned) || source !== void 0 && state.source !== source) return;
+	hoverDimStateByChart.set(chart, {
+		...state,
+		hovered: state.pinned
+	});
+	DIM_APPLIERS[state.kind](chart, state.pinned, state.mutedColor);
+	chart.canvas.style.cursor = "";
+	chart.update();
+};
+var CHART_HOVER_RESET_PLUGIN = {
+	id: "sChartHoverDimReset",
+	beforeEvent: (chart, args) => args.replay && hoverDimStateByChart.get(chart)?.source === "external" ? false : void 0,
+	afterEvent: (chart, args) => {
+		if (args.event.type === "mouseout") resetChartHoverDim(chart, "canvas");
+	}
+};
+var resolveHoveredIndex = (elements, kind) => {
+	const active = elements[0];
+	if (!active) return null;
+	return kind === "element" ? active.index : active.datasetIndex;
+};
+var resolveHoveredElement = (elements) => {
+	const active = elements[0];
+	if (!active) return null;
+	return {
+		index: active.index,
+		datasetIndex: active.datasetIndex
+	};
+};
+var createChartInteractivity = ({ kind, skeleton, colorHostElement, onIndexClick, onElementIndexClick, onHoverIndexChange }) => {
+	if (skeleton) return { plugins: [] };
+	const mutedColor = readChartMutedColor(colorHostElement);
+	const showPointer = Boolean(onIndexClick || onElementIndexClick);
+	const handlers = {
+		onHover: (_event, elements, chart) => {
+			dimChart(chart, kind, resolveHoveredElement(elements), mutedColor, showPointer, "canvas");
+			onHoverIndexChange?.(resolveHoveredIndex(elements, kind));
+		},
+		plugins: [CHART_HOVER_RESET_PLUGIN]
+	};
+	if (onIndexClick || onElementIndexClick) handlers.onClick = (_event, elements) => {
+		if (onIndexClick) {
+			const index = resolveHoveredIndex(elements, kind);
+			if (index !== null) onIndexClick(index);
+		}
+		const active = elements[0];
+		if (active && onElementIndexClick) onElementIndexClick(active.index, active.datasetIndex);
+	};
+	return handlers;
+};
+var readChartMutedColor = (colorHostElement) => require_readCssColor.readCssColor(require_chartCssVariables.CHART_CSS_VARIABLES.fillMuted, colorHostElement);
+var exportChartImage = (chart, colorHostElement) => {
+	if (!chart.canvas.width || !chart.canvas.height) return;
+	const exportCanvas = document.createElement("canvas");
+	exportCanvas.width = chart.canvas.width;
+	exportCanvas.height = chart.canvas.height;
+	const context = exportCanvas.getContext("2d");
+	if (!context) return;
+	context.fillStyle = require_readCssColor.readCssColor(require_chartCssVariables.CHART_CSS_VARIABLES.exportBackground, colorHostElement) || "#ffffff";
+	context.fillRect(0, 0, exportCanvas.width, exportCanvas.height);
+	context.drawImage(chart.canvas, 0, 0);
+	return exportCanvas.toDataURL("image/png");
+};
+//#endregion
+exports.createChartInteractivity = createChartInteractivity;
+exports.dimChart = dimChart;
+exports.exportChartImage = exportChartImage;
+exports.isChartCategoryDimmed = isChartCategoryDimmed;
+exports.isChartHighlightActive = isChartHighlightActive;
+exports.isChartPointDimmed = isChartPointDimmed;
+exports.pinChartElement = pinChartElement;
+exports.readChartHoveredElement = readChartHoveredElement;
+exports.readChartMutedColor = readChartMutedColor;

package/dist/utils/chart/core/chartInteractivity.js

@@ -0,0 +1,170 @@
+import { CHART_CSS_VARIABLES } from "./chartCssVariables.js";
+import { readCssColor } from "../css/readCssColor.js";
+import { CHART_AREA_FILL_END_COLOR, CHART_AREA_FILL_OPACITY, createChartAreaFillGradient } from "../line/createChartAreaFillGradient.js";
+//#region src/utils/chart/core/chartInteractivity.ts
+var hoverDimStateByChart = /* @__PURE__ */ new WeakMap();
+var normalizeHovered = (hovered, kind) => {
+	if (hovered === null) return null;
+	if (typeof hovered === "number") return kind === "series" ? {
+		index: 0,
+		datasetIndex: hovered
+	} : {
+		index: hovered,
+		datasetIndex: 0
+	};
+	return hovered;
+};
+var isSameHovered = (a, b) => {
+	if (a === null || b === null) return a === b;
+	return a.index === b.index && a.datasetIndex === b.datasetIndex;
+};
+var applyElementDim = (chart, hovered, mutedColor) => {
+	const dataset = chart.data.datasets[0];
+	const baseColors = dataset?.hoverBackgroundColor;
+	if (!dataset || !Array.isArray(baseColors)) return;
+	dataset.backgroundColor = hovered === null ? [...baseColors] : baseColors.map((color, index) => index === hovered.index ? color : mutedColor);
+};
+var preserveColorFormat = (dataset, currentValue, color) => Array.isArray(currentValue) ? (dataset.data ?? []).map(() => color) : color;
+var resolveMutedFill = (hoverBackgroundColor, mutedColor) => typeof hoverBackgroundColor === "function" ? (context) => createChartAreaFillGradient(context, mutedColor, CHART_AREA_FILL_END_COLOR, CHART_AREA_FILL_OPACITY) : mutedColor;
+var applySeriesDim = (chart, hovered, mutedColor) => {
+	chart.data.datasets.forEach((dataset, datasetIndex) => {
+		const isOriginal = hovered === null || datasetIndex === hovered.datasetIndex;
+		const { hoverBackgroundColor, hoverBorderColor } = dataset;
+		if (Array.isArray(hoverBackgroundColor)) dataset.backgroundColor = isOriginal ? [...hoverBackgroundColor] : hoverBackgroundColor.map(() => mutedColor);
+		else if (hoverBackgroundColor !== void 0) dataset.backgroundColor = preserveColorFormat(dataset, dataset.backgroundColor, isOriginal ? hoverBackgroundColor : resolveMutedFill(hoverBackgroundColor, mutedColor));
+		if (hoverBorderColor !== void 0 && !Array.isArray(hoverBorderColor)) dataset.borderColor = preserveColorFormat(dataset, dataset.borderColor, isOriginal ? hoverBorderColor : mutedColor);
+	});
+};
+var applySegmentDim = (chart, hovered, mutedColor) => {
+	chart.data.datasets.forEach((dataset, datasetIndex) => {
+		const { hoverBackgroundColor } = dataset;
+		if (hoverBackgroundColor === void 0) return;
+		dataset.backgroundColor = (dataset.data ?? []).map((_, pointIndex) => {
+			if (!(hovered === null || datasetIndex === hovered.datasetIndex && pointIndex === hovered.index)) return mutedColor;
+			return Array.isArray(hoverBackgroundColor) ? hoverBackgroundColor[pointIndex] : hoverBackgroundColor;
+		});
+	});
+};
+var applyCategoryDim = (chart, hovered, mutedColor) => {
+	chart.data.datasets.forEach((dataset) => {
+		const { hoverBackgroundColor } = dataset;
+		if (!Array.isArray(hoverBackgroundColor)) return;
+		dataset.backgroundColor = hoverBackgroundColor.map((color, pointIndex) => hovered === null || dataset.categories?.[pointIndex] === hovered.index ? color : mutedColor);
+	});
+};
+var DIM_APPLIERS = {
+	element: applyElementDim,
+	series: applySeriesDim,
+	segment: applySegmentDim,
+	category: applyCategoryDim
+};
+var readChartHoveredElement = (chart) => hoverDimStateByChart.get(chart)?.hovered ?? null;
+var isChartPointDimmed = (chart, datasetIndex, pointIndex) => {
+	const state = hoverDimStateByChart.get(chart);
+	const hovered = state?.hovered ?? null;
+	if (!state || hovered === null) return false;
+	switch (state.kind) {
+		case "series": return datasetIndex !== hovered.datasetIndex;
+		case "element": return pointIndex !== hovered.index;
+		case "category": return chart.data.datasets[datasetIndex]?.categories?.[pointIndex] !== hovered.index;
+		case "segment": return datasetIndex !== hovered.datasetIndex || pointIndex !== hovered.index;
+	}
+};
+var isChartCategoryDimmed = (chart, pointIndex) => chart.data.datasets.every((_, datasetIndex) => !chart.isDatasetVisible(datasetIndex) || isChartPointDimmed(chart, datasetIndex, pointIndex));
+var isChartHighlightActive = (chart) => chart.data.datasets.some((dataset, datasetIndex) => chart.isDatasetVisible(datasetIndex) && (dataset.data ?? []).some((_, pointIndex) => isChartPointDimmed(chart, datasetIndex, pointIndex)));
+var dimChart = (chart, kind, hoveredIndex, mutedColor, showPointer = false, source = "external") => {
+	const previousState = hoverDimStateByChart.get(chart);
+	const pinned = previousState?.pinned ?? null;
+	const pointed = normalizeHovered(hoveredIndex, kind);
+	const hovered = pointed ?? pinned;
+	if (isSameHovered(previousState?.hovered ?? null, hovered)) return;
+	hoverDimStateByChart.set(chart, {
+		hovered,
+		pinned,
+		kind,
+		mutedColor,
+		source
+	});
+	DIM_APPLIERS[kind](chart, hovered, mutedColor);
+	chart.canvas.style.cursor = pointed !== null && showPointer ? "pointer" : "";
+	chart.update();
+};
+var pinChartElement = (chart, kind, pinnedIndex, mutedColor) => {
+	const pinned = normalizeHovered(pinnedIndex, kind);
+	hoverDimStateByChart.set(chart, {
+		hovered: pinned,
+		pinned,
+		kind,
+		mutedColor,
+		source: "external"
+	});
+	DIM_APPLIERS[kind](chart, pinned, mutedColor);
+	chart.update();
+};
+var resetChartHoverDim = (chart, source) => {
+	const state = hoverDimStateByChart.get(chart);
+	if (!state || isSameHovered(state.hovered, state.pinned) || source !== void 0 && state.source !== source) return;
+	hoverDimStateByChart.set(chart, {
+		...state,
+		hovered: state.pinned
+	});
+	DIM_APPLIERS[state.kind](chart, state.pinned, state.mutedColor);
+	chart.canvas.style.cursor = "";
+	chart.update();
+};
+var CHART_HOVER_RESET_PLUGIN = {
+	id: "sChartHoverDimReset",
+	beforeEvent: (chart, args) => args.replay && hoverDimStateByChart.get(chart)?.source === "external" ? false : void 0,
+	afterEvent: (chart, args) => {
+		if (args.event.type === "mouseout") resetChartHoverDim(chart, "canvas");
+	}
+};
+var resolveHoveredIndex = (elements, kind) => {
+	const active = elements[0];
+	if (!active) return null;
+	return kind === "element" ? active.index : active.datasetIndex;
+};
+var resolveHoveredElement = (elements) => {
+	const active = elements[0];
+	if (!active) return null;
+	return {
+		index: active.index,
+		datasetIndex: active.datasetIndex
+	};
+};
+var createChartInteractivity = ({ kind, skeleton, colorHostElement, onIndexClick, onElementIndexClick, onHoverIndexChange }) => {
+	if (skeleton) return { plugins: [] };
+	const mutedColor = readChartMutedColor(colorHostElement);
+	const showPointer = Boolean(onIndexClick || onElementIndexClick);
+	const handlers = {
+		onHover: (_event, elements, chart) => {
+			dimChart(chart, kind, resolveHoveredElement(elements), mutedColor, showPointer, "canvas");
+			onHoverIndexChange?.(resolveHoveredIndex(elements, kind));
+		},
+		plugins: [CHART_HOVER_RESET_PLUGIN]
+	};
+	if (onIndexClick || onElementIndexClick) handlers.onClick = (_event, elements) => {
+		if (onIndexClick) {
+			const index = resolveHoveredIndex(elements, kind);
+			if (index !== null) onIndexClick(index);
+		}
+		const active = elements[0];
+		if (active && onElementIndexClick) onElementIndexClick(active.index, active.datasetIndex);
+	};
+	return handlers;
+};
+var readChartMutedColor = (colorHostElement) => readCssColor(CHART_CSS_VARIABLES.fillMuted, colorHostElement);
+var exportChartImage = (chart, colorHostElement) => {
+	if (!chart.canvas.width || !chart.canvas.height) return;
+	const exportCanvas = document.createElement("canvas");
+	exportCanvas.width = chart.canvas.width;
+	exportCanvas.height = chart.canvas.height;
+	const context = exportCanvas.getContext("2d");
+	if (!context) return;
+	context.fillStyle = readCssColor(CHART_CSS_VARIABLES.exportBackground, colorHostElement) || "#ffffff";
+	context.fillRect(0, 0, exportCanvas.width, exportCanvas.height);
+	context.drawImage(chart.canvas, 0, 0);
+	return exportCanvas.toDataURL("image/png");
+};
+//#endregion
+export { createChartInteractivity, dimChart, exportChartImage, isChartCategoryDimmed, isChartHighlightActive, isChartPointDimmed, pinChartElement, readChartHoveredElement, readChartMutedColor };

package/dist/utils/chart/core/chartSkeletonConfig.cjs

@@ -0,0 +1,17 @@
+//#region src/utils/chart/core/chartSkeletonConfig.ts
+var createChartSkeletonInteraction = (skeleton, loadedInteraction) => {
+	if (!skeleton) return loadedInteraction;
+	return {
+		mode: "nearest",
+		intersect: false
+	};
+};
+var createChartSkeletonTooltipEnabled = (skeleton) => !skeleton;
+var resolveChartSkeletonPlugins = (skeleton, plugins) => {
+	if (skeleton) return [];
+	return plugins;
+};
+//#endregion
+exports.createChartSkeletonInteraction = createChartSkeletonInteraction;
+exports.createChartSkeletonTooltipEnabled = createChartSkeletonTooltipEnabled;
+exports.resolveChartSkeletonPlugins = resolveChartSkeletonPlugins;