@shtabapp/ui-kit 1.85.0 → 1.85.1

package/dist/components/SChartBar/SChartBar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,151 @@
+import { CHART_CSS_VARIABLES } from "../../utils/chart/core/chartCssVariables.js";
+import SChartLegend_default from "../SChartLegend/SChartLegend.vue.js";
+import SChartSkeletonHost_default from "../SChartSkeletonHost/SChartSkeletonHost.vue.js";
+import { readCssColor } from "../../utils/chart/css/readCssColor.js";
+import { resolveCssColorValue } from "../../utils/chart/css/resolveCssColorValue.js";
+import { resolveBarStackedSeriesColor } from "../../utils/chart/bar/resolveBarStackedSeriesColor.js";
+import { useChart } from "../../composables/useChart.js";
+import { useChartInteractivity } from "../../composables/useChartInteractivity.js";
+import { buildChartLegendItems } from "../../utils/chart/core/buildChartLegendItems.js";
+import { useHasListener } from "../../composables/useHasListener.js";
+import { buildBarChartConfig } from "./utils/buildBarChartConfig.js";
+import { skeletonBarSeries } from "./utils/skeletonBarSeries.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, unref, useTemplateRef, withCtx } from "vue";
+//#region src/components/SChartBar/SChartBar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "s-ui-chart-bar__canvas-wrap" };
+var SChartBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "SChartBar",
+	props: {
+		series: { default: () => [] },
+		mode: { default: "grouped" },
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		yMax: {},
+		yMin: {},
+		yStep: {},
+		rightYMax: {},
+		rightYStep: {},
+		mirrorYAxis: {
+			type: Boolean,
+			default: false
+		},
+		target: {},
+		showLegend: {
+			type: Boolean,
+			default: true
+		},
+		showValues: {
+			type: Boolean,
+			default: false
+		},
+		formatValue: { type: Function },
+		formatYTick: { type: Function },
+		categories: { default: () => [] },
+		highlightedYTick: {},
+		legendSize: {},
+		maxBarThickness: {},
+		formatTooltip: { type: Function }
+	},
+	emits: ["pointClick"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const chartRootRef = useTemplateRef("chartRootRef");
+		const chartCanvasRef = useTemplateRef("chartCanvasRef");
+		const chartSeries = computed(() => {
+			if (__props.loading) return skeletonBarSeries;
+			return __props.mode === "grouped" ? __props.series : __props.series.slice(0, 1);
+		});
+		const handlePointClick = (pointIndex, seriesIndex) => {
+			const seriesItem = chartSeries.value[seriesIndex];
+			const point = seriesItem?.points[pointIndex];
+			if (seriesItem && point) emit("pointClick", pointIndex, seriesIndex, point, seriesItem);
+		};
+		const hasPointClickListener = useHasListener("onPointClick");
+		const chartConfig = computed(() => {
+			if (!__props.loading && __props.series.length === 0) return null;
+			return buildBarChartConfig({
+				seriesList: chartSeries.value,
+				colorHostElement: chartRootRef.value,
+				yMax: __props.loading ? 50 : __props.yMax,
+				yMin: __props.loading ? void 0 : __props.yMin,
+				yStep: __props.loading ? 10 : __props.yStep,
+				rightYMax: __props.rightYMax,
+				rightYStep: __props.rightYStep,
+				mirrorYAxis: __props.mirrorYAxis,
+				target: __props.loading ? void 0 : __props.target,
+				skeleton: __props.loading,
+				showValues: __props.showValues,
+				formatValue: __props.formatValue,
+				formatYTick: __props.formatYTick,
+				mode: __props.mode,
+				categories: __props.categories,
+				highlightedYTick: __props.highlightedYTick,
+				maxBarThickness: __props.maxBarThickness,
+				formatTooltip: __props.formatTooltip,
+				onPointClick: hasPointClickListener() ? handlePointClick : void 0
+			});
+		});
+		const hasCategoryLegend = computed(() => !__props.loading && __props.categories.length > 0);
+		const dimmableLegendItems = computed(() => {
+			if (hasCategoryLegend.value) return __props.categories.map((category) => ({
+				label: category.label,
+				color: resolveCssColorValue(category.color, chartRootRef.value)
+			}));
+			return buildChartLegendItems(chartSeries.value, (seriesIndex, fillColor) => resolveBarStackedSeriesColor(seriesIndex, chartRootRef.value, fillColor, __props.loading));
+		});
+		const targetLegendItems = computed(() => {
+			if (__props.loading || !__props.target?.legendLabel) return [];
+			return [{
+				label: __props.target.legendLabel,
+				color: __props.target.color ? resolveCssColorValue(__props.target.color, chartRootRef.value) : readCssColor(CHART_CSS_VARIABLES.grid, chartRootRef.value),
+				marker: "line"
+			}];
+		});
+		const legendItems = computed(() => [...dimmableLegendItems.value, ...targetLegendItems.value]);
+		const { chartInstance } = useChart({
+			canvasRef: chartCanvasRef,
+			config: chartConfig,
+			enabled: computed(() => __props.loading || __props.series.length > 0)
+		});
+		const { exportImage, handleLegendItemHover } = useChartInteractivity({
+			chartInstance,
+			canvasRef: chartCanvasRef,
+			colorHostElement: chartRootRef,
+			legendDimKind: () => hasCategoryLegend.value ? "category" : "series"
+		});
+		const handleLegendHover = (index) => {
+			handleLegendItemHover(index !== null && index < dimmableLegendItems.value.length ? index : null);
+		};
+		__expose({ exportImage });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "chartRootRef",
+				ref: chartRootRef,
+				class: normalizeClass(["s-ui-chart-bar", { "s-ui-chart-bar--skeleton": __props.loading }])
+			}, [createElementVNode("div", _hoisted_1, [createVNode(unref(SChartSkeletonHost_default), { loading: __props.loading }, {
+				default: withCtx(() => [createElementVNode("canvas", {
+					ref_key: "chartCanvasRef",
+					ref: chartCanvasRef,
+					class: "s-ui-chart-bar__canvas"
+				}, null, 512)]),
+				_: 1
+			}, 8, ["loading"])]), __props.showLegend && legendItems.value.length ? (openBlock(), createBlock(unref(SChartLegend_default), {
+				key: 0,
+				items: legendItems.value,
+				size: __props.legendSize,
+				disabled: __props.loading,
+				interactive: !__props.loading,
+				onItemHover: handleLegendHover
+			}, null, 8, [
+				"items",
+				"size",
+				"disabled",
+				"interactive"
+			])) : createCommentVNode("", true)], 2);
+		};
+	}
+});
+//#endregion
+export { SChartBar_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/SChartBar/utils/buildBarChartConfig.cjs

@@ -0,0 +1,166 @@
+const require_chartCssVariables = require("../../../utils/chart/core/chartCssVariables.cjs");
+const require_readCssColor = require("../../../utils/chart/css/readCssColor.cjs");
+const require_resolveCssColorValue = require("../../../utils/chart/css/resolveCssColorValue.cjs");
+const require_buildCartesianChartScales = require("../../../utils/chart/core/buildCartesianChartScales.cjs");
+const require_chartSkeletonConfig = require("../../../utils/chart/core/chartSkeletonConfig.cjs");
+const require_resolveChartValueRange = require("../../../utils/chart/core/resolveChartValueRange.cjs");
+const require_resolveBarStackedSeriesColor = require("../../../utils/chart/bar/resolveBarStackedSeriesColor.cjs");
+const require_chartInteractivity = require("../../../utils/chart/core/chartInteractivity.cjs");
+const require_buildChartMirrorScale = require("../../../utils/chart/core/buildChartMirrorScale.cjs");
+const require_applyChartHighlightedYTick = require("../../../utils/chart/core/applyChartHighlightedYTick.cjs");
+const require_splitChartAxisLabel = require("../../../utils/chart/core/splitChartAxisLabel.cjs");
+const require_createBarTargetLinePlugin = require("./createBarTargetLinePlugin.cjs");
+const require_createBarValueLabelPlugin = require("./createBarValueLabelPlugin.cjs");
+//#region src/components/SChartBar/utils/buildBarChartConfig.ts
+var DEFAULT_Y_STEP = 5;
+var BAR_BORDER_RADIUS = 4;
+var BAR_X_TICK_FONT_SIZE = 12;
+var RIGHT_Y_AXIS_ID = "yRight";
+var Y_RANGE_PADDING_RATIO = 1.05;
+var VALUE_LABEL_LAYOUT_PADDING_TOP = 16;
+var HISTOGRAM_BAR_PERCENTAGE = .92;
+var HISTOGRAM_CATEGORY_PERCENTAGE = 1;
+var resolveAxisRange = (seriesList, explicitMin, explicitMax, step) => {
+	return require_resolveChartValueRange.resolveChartValueRange(seriesList.flatMap((seriesItem) => seriesItem.points.map((point) => point.value * Y_RANGE_PADDING_RATIO)), {
+		yMin: explicitMin,
+		yMax: explicitMax,
+		yStep: step
+	});
+};
+var buildBarChartConfig = ({ seriesList, colorHostElement, yMax, yMin, yStep = DEFAULT_Y_STEP, rightYMax, rightYStep = DEFAULT_Y_STEP, mirrorYAxis = false, target, skeleton = false, showValues = false, formatValue, formatYTick, mode = "grouped", categories = [], highlightedYTick, maxBarThickness, formatTooltip, onPointClick }) => {
+	if (seriesList.length === 0) return null;
+	const leftSeries = seriesList.filter((seriesItem) => seriesItem.axis !== "right");
+	const rightSeries = seriesList.filter((seriesItem) => seriesItem.axis === "right");
+	const axisLabelColor = require_readCssColor.readCssColor(require_chartCssVariables.CHART_CSS_VARIABLES.axisLabel, colorHostElement);
+	const gridColor = require_readCssColor.readCssColor(require_chartCssVariables.CHART_CSS_VARIABLES.grid, colorHostElement);
+	const tooltipBackgroundColor = require_readCssColor.readCssColor(require_chartCssVariables.CHART_CSS_VARIABLES.tooltipBackground, colorHostElement);
+	const tooltipTextColor = require_readCssColor.readCssColor(require_chartCssVariables.CHART_CSS_VARIABLES.tooltipText, colorHostElement);
+	const mutedAxisLabelColor = require_readCssColor.readCssColor(require_chartCssVariables.CHART_CSS_VARIABLES.barAxisLabelMuted, colorHostElement);
+	const leftRange = resolveAxisRange(leftSeries, yMin, yMax, yStep);
+	const rightRange = resolveAxisRange(rightSeries, void 0, rightYMax, rightYStep);
+	const isHistogram = mode === "histogram";
+	const categoryColors = categories.map((category) => require_resolveCssColorValue.resolveCssColorValue(category.color, colorHostElement));
+	const baseScales = require_buildCartesianChartScales.buildCartesianChartScales({
+		axisLabelColor,
+		gridColor,
+		yMin: leftRange.min,
+		yMax: leftRange.max,
+		yStep,
+		xTickFontSize: BAR_X_TICK_FONT_SIZE,
+		...formatYTick ? { formatYAxisTick: (tickValue) => typeof tickValue === "number" ? formatYTick(tickValue) : tickValue } : {}
+	});
+	const yTicksOptions = highlightedYTick && !skeleton ? require_applyChartHighlightedYTick.applyChartHighlightedYTick(baseScales.y.ticks, {
+		highlightedTick: highlightedYTick,
+		yStep,
+		axisLabelColor,
+		colorHostElement
+	}) : { ticks: baseScales.y.ticks };
+	const leftAxis = isHistogram ? {
+		...baseScales.y,
+		display: false
+	} : {
+		...baseScales.y,
+		...yTicksOptions
+	};
+	const buildSecondaryAxis = (axisMin, axisMax) => require_buildChartMirrorScale.buildChartMirrorScale({
+		min: axisMin,
+		max: axisMax,
+		tickOptions: yTicksOptions
+	});
+	const secondaryAxis = rightSeries.length > 0 ? { [RIGHT_Y_AXIS_ID]: buildSecondaryAxis(rightRange.min, rightRange.max) } : mirrorYAxis && !isHistogram ? { [require_buildChartMirrorScale.CHART_MIRROR_Y_AXIS_ID]: buildSecondaryAxis(leftRange.min, leftRange.max) } : {};
+	const scales = {
+		x: {
+			...baseScales.x,
+			...isHistogram ? { border: {
+				display: true,
+				color: gridColor
+			} } : {},
+			ticks: {
+				...baseScales.x.ticks,
+				color: ({ chart, index }) => require_chartInteractivity.isChartCategoryDimmed(chart, index) ? mutedAxisLabelColor : axisLabelColor
+			}
+		},
+		y: leftAxis,
+		...secondaryAxis
+	};
+	const interactivity = require_chartInteractivity.createChartInteractivity({
+		kind: "segment",
+		skeleton,
+		colorHostElement,
+		onElementIndexClick: onPointClick
+	});
+	return {
+		type: "bar",
+		data: {
+			labels: seriesList[0]?.points.map((point) => require_splitChartAxisLabel.splitChartAxisLabel(point.label)) ?? [],
+			datasets: seriesList.map((seriesItem, seriesIndex) => {
+				const seriesColor = require_resolveBarStackedSeriesColor.resolveBarStackedSeriesColor(seriesIndex, colorHostElement, seriesItem.fillColor, skeleton);
+				const colors = seriesItem.points.map((point) => {
+					if (point.fillColor) return require_resolveCssColorValue.resolveCssColorValue(point.fillColor, colorHostElement);
+					return (point.category === void 0 ? void 0 : categoryColors[point.category]) ?? seriesColor;
+				});
+				return {
+					label: seriesItem.label,
+					data: seriesItem.points.map((point) => point.value),
+					backgroundColor: colors,
+					hoverBackgroundColor: colors,
+					borderWidth: 0,
+					hoverBorderWidth: 0,
+					borderRadius: BAR_BORDER_RADIUS,
+					yAxisID: seriesItem.axis === "right" ? RIGHT_Y_AXIS_ID : "y",
+					...maxBarThickness ? { maxBarThickness } : {},
+					captions: seriesItem.points.map((point) => point.caption),
+					categories: seriesItem.points.map((point) => point.category),
+					...isHistogram ? {
+						barPercentage: HISTOGRAM_BAR_PERCENTAGE,
+						categoryPercentage: HISTOGRAM_CATEGORY_PERCENTAGE
+					} : {}
+				};
+			})
+		},
+		options: {
+			responsive: true,
+			maintainAspectRatio: false,
+			layout: showValues ? { padding: { top: VALUE_LABEL_LAYOUT_PADDING_TOP } } : void 0,
+			onHover: interactivity.onHover,
+			onClick: interactivity.onClick,
+			hover: skeleton ? void 0 : {
+				mode: "nearest",
+				intersect: true
+			},
+			interaction: require_chartSkeletonConfig.createChartSkeletonInteraction(skeleton, {
+				mode: "nearest",
+				intersect: true
+			}),
+			plugins: {
+				legend: { display: false },
+				tooltip: {
+					enabled: require_chartSkeletonConfig.createChartSkeletonTooltipEnabled(skeleton),
+					backgroundColor: tooltipBackgroundColor,
+					titleColor: tooltipTextColor,
+					bodyColor: tooltipTextColor,
+					displayColors: false,
+					...formatTooltip ? { callbacks: {
+						title: () => [],
+						label: (context) => formatTooltip(context.dataIndex, context.datasetIndex)
+					} } : {}
+				}
+			},
+			scales
+		},
+		plugins: require_chartSkeletonConfig.resolveChartSkeletonPlugins(skeleton, [
+			require_createBarTargetLinePlugin.createBarTargetLinePlugin({
+				target,
+				colorHostElement,
+				rightAxisId: RIGHT_Y_AXIS_ID
+			}),
+			...showValues ? [require_createBarValueLabelPlugin.createBarValueLabelPlugin({
+				colorHostElement,
+				formatValue
+			})] : [],
+			...interactivity.plugins
+		])
+	};
+};
+//#endregion
+exports.buildBarChartConfig = buildBarChartConfig;

package/dist/components/SChartBar/utils/buildBarChartConfig.js

@@ -0,0 +1,166 @@
+import { CHART_CSS_VARIABLES } from "../../../utils/chart/core/chartCssVariables.js";
+import { readCssColor } from "../../../utils/chart/css/readCssColor.js";
+import { resolveCssColorValue } from "../../../utils/chart/css/resolveCssColorValue.js";
+import { buildCartesianChartScales } from "../../../utils/chart/core/buildCartesianChartScales.js";
+import { createChartSkeletonInteraction, createChartSkeletonTooltipEnabled, resolveChartSkeletonPlugins } from "../../../utils/chart/core/chartSkeletonConfig.js";
+import { resolveChartValueRange } from "../../../utils/chart/core/resolveChartValueRange.js";
+import { resolveBarStackedSeriesColor } from "../../../utils/chart/bar/resolveBarStackedSeriesColor.js";
+import { createChartInteractivity, isChartCategoryDimmed } from "../../../utils/chart/core/chartInteractivity.js";
+import { CHART_MIRROR_Y_AXIS_ID, buildChartMirrorScale } from "../../../utils/chart/core/buildChartMirrorScale.js";
+import { applyChartHighlightedYTick } from "../../../utils/chart/core/applyChartHighlightedYTick.js";
+import { splitChartAxisLabel } from "../../../utils/chart/core/splitChartAxisLabel.js";
+import { createBarTargetLinePlugin } from "./createBarTargetLinePlugin.js";
+import { createBarValueLabelPlugin } from "./createBarValueLabelPlugin.js";
+//#region src/components/SChartBar/utils/buildBarChartConfig.ts
+var DEFAULT_Y_STEP = 5;
+var BAR_BORDER_RADIUS = 4;
+var BAR_X_TICK_FONT_SIZE = 12;
+var RIGHT_Y_AXIS_ID = "yRight";
+var Y_RANGE_PADDING_RATIO = 1.05;
+var VALUE_LABEL_LAYOUT_PADDING_TOP = 16;
+var HISTOGRAM_BAR_PERCENTAGE = .92;
+var HISTOGRAM_CATEGORY_PERCENTAGE = 1;
+var resolveAxisRange = (seriesList, explicitMin, explicitMax, step) => {
+	return resolveChartValueRange(seriesList.flatMap((seriesItem) => seriesItem.points.map((point) => point.value * Y_RANGE_PADDING_RATIO)), {
+		yMin: explicitMin,
+		yMax: explicitMax,
+		yStep: step
+	});
+};
+var buildBarChartConfig = ({ seriesList, colorHostElement, yMax, yMin, yStep = DEFAULT_Y_STEP, rightYMax, rightYStep = DEFAULT_Y_STEP, mirrorYAxis = false, target, skeleton = false, showValues = false, formatValue, formatYTick, mode = "grouped", categories = [], highlightedYTick, maxBarThickness, formatTooltip, onPointClick }) => {
+	if (seriesList.length === 0) return null;
+	const leftSeries = seriesList.filter((seriesItem) => seriesItem.axis !== "right");
+	const rightSeries = seriesList.filter((seriesItem) => seriesItem.axis === "right");
+	const axisLabelColor = readCssColor(CHART_CSS_VARIABLES.axisLabel, colorHostElement);
+	const gridColor = readCssColor(CHART_CSS_VARIABLES.grid, colorHostElement);
+	const tooltipBackgroundColor = readCssColor(CHART_CSS_VARIABLES.tooltipBackground, colorHostElement);
+	const tooltipTextColor = readCssColor(CHART_CSS_VARIABLES.tooltipText, colorHostElement);
+	const mutedAxisLabelColor = readCssColor(CHART_CSS_VARIABLES.barAxisLabelMuted, colorHostElement);
+	const leftRange = resolveAxisRange(leftSeries, yMin, yMax, yStep);
+	const rightRange = resolveAxisRange(rightSeries, void 0, rightYMax, rightYStep);
+	const isHistogram = mode === "histogram";
+	const categoryColors = categories.map((category) => resolveCssColorValue(category.color, colorHostElement));
+	const baseScales = buildCartesianChartScales({
+		axisLabelColor,
+		gridColor,
+		yMin: leftRange.min,
+		yMax: leftRange.max,
+		yStep,
+		xTickFontSize: BAR_X_TICK_FONT_SIZE,
+		...formatYTick ? { formatYAxisTick: (tickValue) => typeof tickValue === "number" ? formatYTick(tickValue) : tickValue } : {}
+	});
+	const yTicksOptions = highlightedYTick && !skeleton ? applyChartHighlightedYTick(baseScales.y.ticks, {
+		highlightedTick: highlightedYTick,
+		yStep,
+		axisLabelColor,
+		colorHostElement
+	}) : { ticks: baseScales.y.ticks };
+	const leftAxis = isHistogram ? {
+		...baseScales.y,
+		display: false
+	} : {
+		...baseScales.y,
+		...yTicksOptions
+	};
+	const buildSecondaryAxis = (axisMin, axisMax) => buildChartMirrorScale({
+		min: axisMin,
+		max: axisMax,
+		tickOptions: yTicksOptions
+	});
+	const secondaryAxis = rightSeries.length > 0 ? { [RIGHT_Y_AXIS_ID]: buildSecondaryAxis(rightRange.min, rightRange.max) } : mirrorYAxis && !isHistogram ? { [CHART_MIRROR_Y_AXIS_ID]: buildSecondaryAxis(leftRange.min, leftRange.max) } : {};
+	const scales = {
+		x: {
+			...baseScales.x,
+			...isHistogram ? { border: {
+				display: true,
+				color: gridColor
+			} } : {},
+			ticks: {
+				...baseScales.x.ticks,
+				color: ({ chart, index }) => isChartCategoryDimmed(chart, index) ? mutedAxisLabelColor : axisLabelColor
+			}
+		},
+		y: leftAxis,
+		...secondaryAxis
+	};
+	const interactivity = createChartInteractivity({
+		kind: "segment",
+		skeleton,
+		colorHostElement,
+		onElementIndexClick: onPointClick
+	});
+	return {
+		type: "bar",
+		data: {
+			labels: seriesList[0]?.points.map((point) => splitChartAxisLabel(point.label)) ?? [],
+			datasets: seriesList.map((seriesItem, seriesIndex) => {
+				const seriesColor = resolveBarStackedSeriesColor(seriesIndex, colorHostElement, seriesItem.fillColor, skeleton);
+				const colors = seriesItem.points.map((point) => {
+					if (point.fillColor) return resolveCssColorValue(point.fillColor, colorHostElement);
+					return (point.category === void 0 ? void 0 : categoryColors[point.category]) ?? seriesColor;
+				});
+				return {
+					label: seriesItem.label,
+					data: seriesItem.points.map((point) => point.value),
+					backgroundColor: colors,
+					hoverBackgroundColor: colors,
+					borderWidth: 0,
+					hoverBorderWidth: 0,
+					borderRadius: BAR_BORDER_RADIUS,
+					yAxisID: seriesItem.axis === "right" ? RIGHT_Y_AXIS_ID : "y",
+					...maxBarThickness ? { maxBarThickness } : {},
+					captions: seriesItem.points.map((point) => point.caption),
+					categories: seriesItem.points.map((point) => point.category),
+					...isHistogram ? {
+						barPercentage: HISTOGRAM_BAR_PERCENTAGE,
+						categoryPercentage: HISTOGRAM_CATEGORY_PERCENTAGE
+					} : {}
+				};
+			})
+		},
+		options: {
+			responsive: true,
+			maintainAspectRatio: false,
+			layout: showValues ? { padding: { top: VALUE_LABEL_LAYOUT_PADDING_TOP } } : void 0,
+			onHover: interactivity.onHover,
+			onClick: interactivity.onClick,
+			hover: skeleton ? void 0 : {
+				mode: "nearest",
+				intersect: true
+			},
+			interaction: createChartSkeletonInteraction(skeleton, {
+				mode: "nearest",
+				intersect: true
+			}),
+			plugins: {
+				legend: { display: false },
+				tooltip: {
+					enabled: createChartSkeletonTooltipEnabled(skeleton),
+					backgroundColor: tooltipBackgroundColor,
+					titleColor: tooltipTextColor,
+					bodyColor: tooltipTextColor,
+					displayColors: false,
+					...formatTooltip ? { callbacks: {
+						title: () => [],
+						label: (context) => formatTooltip(context.dataIndex, context.datasetIndex)
+					} } : {}
+				}
+			},
+			scales
+		},
+		plugins: resolveChartSkeletonPlugins(skeleton, [
+			createBarTargetLinePlugin({
+				target,
+				colorHostElement,
+				rightAxisId: RIGHT_Y_AXIS_ID
+			}),
+			...showValues ? [createBarValueLabelPlugin({
+				colorHostElement,
+				formatValue
+			})] : [],
+			...interactivity.plugins
+		])
+	};
+};
+//#endregion
+export { buildBarChartConfig };

package/dist/components/SChartBar/utils/createBarTargetLinePlugin.cjs

@@ -0,0 +1,53 @@
+const require_chartCssVariables = require("../../../utils/chart/core/chartCssVariables.cjs");
+const require_readCssColor = require("../../../utils/chart/css/readCssColor.cjs");
+const require_resolveCssColorValue = require("../../../utils/chart/css/resolveCssColorValue.cjs");
+//#region src/components/SChartBar/utils/createBarTargetLinePlugin.ts
+var LINE_WIDTH = 1;
+var DASH_PATTERN = [4, 4];
+var LABEL_FONT = "500 10px var(--s-ui-font-family-label)";
+var LABEL_OFFSET_Y = 4;
+var isSingleValue = (values) => values.length > 0 && new Set(values).size === 1;
+var createBarTargetLinePlugin = ({ target, colorHostElement, rightAxisId }) => ({
+	id: "barTargetLine",
+	afterDatasetsDraw(chart) {
+		if (!target || target.values.length === 0) return;
+		const scaleId = target.axis === "right" ? rightAxisId : "y";
+		const scale = chart.scales[scaleId];
+		const xScale = chart.scales.x;
+		if (!scale || !xScale) return;
+		const { ctx, chartArea } = chart;
+		const color = target.color ? require_resolveCssColorValue.resolveCssColorValue(target.color, colorHostElement) : require_readCssColor.readCssColor(require_chartCssVariables.CHART_CSS_VARIABLES.grid, colorHostElement);
+		ctx.save();
+		ctx.strokeStyle = color;
+		ctx.lineWidth = LINE_WIDTH;
+		ctx.setLineDash(target.solid ? [] : DASH_PATTERN);
+		const [firstValue] = target.values;
+		if (firstValue !== void 0 && isSingleValue(target.values)) {
+			const y = scale.getPixelForValue(firstValue);
+			ctx.beginPath();
+			ctx.moveTo(chartArea.left, y);
+			ctx.lineTo(chartArea.right, y);
+			ctx.stroke();
+			if (target.label) {
+				ctx.setLineDash([]);
+				ctx.fillStyle = color;
+				ctx.font = LABEL_FONT;
+				ctx.textAlign = "left";
+				ctx.fillText(target.label, chartArea.left, y - LABEL_OFFSET_Y);
+			}
+		} else {
+			const bandWidth = (chartArea.right - chartArea.left) / target.values.length;
+			target.values.forEach((value, index) => {
+				if (value <= 0) return;
+				const y = scale.getPixelForValue(value);
+				ctx.beginPath();
+				ctx.moveTo(chartArea.left + bandWidth * index, y);
+				ctx.lineTo(chartArea.left + bandWidth * (index + 1), y);
+				ctx.stroke();
+			});
+		}
+		ctx.restore();
+	}
+});
+//#endregion
+exports.createBarTargetLinePlugin = createBarTargetLinePlugin;

package/dist/components/SChartBar/utils/createBarTargetLinePlugin.js

@@ -0,0 +1,53 @@
+import { CHART_CSS_VARIABLES } from "../../../utils/chart/core/chartCssVariables.js";
+import { readCssColor } from "../../../utils/chart/css/readCssColor.js";
+import { resolveCssColorValue } from "../../../utils/chart/css/resolveCssColorValue.js";
+//#region src/components/SChartBar/utils/createBarTargetLinePlugin.ts
+var LINE_WIDTH = 1;
+var DASH_PATTERN = [4, 4];
+var LABEL_FONT = "500 10px var(--s-ui-font-family-label)";
+var LABEL_OFFSET_Y = 4;
+var isSingleValue = (values) => values.length > 0 && new Set(values).size === 1;
+var createBarTargetLinePlugin = ({ target, colorHostElement, rightAxisId }) => ({
+	id: "barTargetLine",
+	afterDatasetsDraw(chart) {
+		if (!target || target.values.length === 0) return;
+		const scaleId = target.axis === "right" ? rightAxisId : "y";
+		const scale = chart.scales[scaleId];
+		const xScale = chart.scales.x;
+		if (!scale || !xScale) return;
+		const { ctx, chartArea } = chart;
+		const color = target.color ? resolveCssColorValue(target.color, colorHostElement) : readCssColor(CHART_CSS_VARIABLES.grid, colorHostElement);
+		ctx.save();
+		ctx.strokeStyle = color;
+		ctx.lineWidth = LINE_WIDTH;
+		ctx.setLineDash(target.solid ? [] : DASH_PATTERN);
+		const [firstValue] = target.values;
+		if (firstValue !== void 0 && isSingleValue(target.values)) {
+			const y = scale.getPixelForValue(firstValue);
+			ctx.beginPath();
+			ctx.moveTo(chartArea.left, y);
+			ctx.lineTo(chartArea.right, y);
+			ctx.stroke();
+			if (target.label) {
+				ctx.setLineDash([]);
+				ctx.fillStyle = color;
+				ctx.font = LABEL_FONT;
+				ctx.textAlign = "left";
+				ctx.fillText(target.label, chartArea.left, y - LABEL_OFFSET_Y);
+			}
+		} else {
+			const bandWidth = (chartArea.right - chartArea.left) / target.values.length;
+			target.values.forEach((value, index) => {
+				if (value <= 0) return;
+				const y = scale.getPixelForValue(value);
+				ctx.beginPath();
+				ctx.moveTo(chartArea.left + bandWidth * index, y);
+				ctx.lineTo(chartArea.left + bandWidth * (index + 1), y);
+				ctx.stroke();
+			});
+		}
+		ctx.restore();
+	}
+});
+//#endregion
+export { createBarTargetLinePlugin };

package/dist/components/SChartBar/utils/createBarValueLabelPlugin.cjs

@@ -0,0 +1,37 @@
+const require_chartCssVariables = require("../../../utils/chart/core/chartCssVariables.cjs");
+const require_readCssColor = require("../../../utils/chart/css/readCssColor.cjs");
+const require_chartInteractivity = require("../../../utils/chart/core/chartInteractivity.cjs");
+const require_resolveChartLabelFont = require("../../../utils/chart/css/resolveChartLabelFont.cjs");
+//#region src/components/SChartBar/utils/createBarValueLabelPlugin.ts
+var LABEL_GAP = 4;
+var LABEL_FONT_SIZE = 10;
+var LABEL_FONT_WEIGHT = 500;
+var createBarValueLabelPlugin = ({ colorHostElement, formatValue }) => ({
+	id: "barValueLabel",
+	afterDatasetsDraw(chart) {
+		const labelColor = require_readCssColor.readCssColor(require_chartCssVariables.CHART_CSS_VARIABLES.barValueLabel, colorHostElement);
+		const mutedLabelColor = require_readCssColor.readCssColor(require_chartCssVariables.CHART_CSS_VARIABLES.barValueLabelMuted, colorHostElement);
+		const { ctx } = chart;
+		ctx.save();
+		ctx.font = require_resolveChartLabelFont.resolveChartLabelFont({
+			size: LABEL_FONT_SIZE,
+			weight: LABEL_FONT_WEIGHT,
+			colorHostElement
+		});
+		ctx.textAlign = "center";
+		chart.data.datasets.forEach((dataset, datasetIndex) => {
+			if (!chart.isDatasetVisible(datasetIndex)) return;
+			chart.getDatasetMeta(datasetIndex).data.forEach((element, pointIndex) => {
+				const value = dataset.data[pointIndex];
+				if (typeof value !== "number") return;
+				const isNegative = value < 0;
+				ctx.fillStyle = require_chartInteractivity.isChartPointDimmed(chart, datasetIndex, pointIndex) ? mutedLabelColor : labelColor;
+				ctx.textBaseline = isNegative ? "top" : "bottom";
+				ctx.fillText(formatValue ? formatValue(value) : String(value), element.x, isNegative ? element.y + LABEL_GAP : element.y - LABEL_GAP);
+			});
+		});
+		ctx.restore();
+	}
+});
+//#endregion
+exports.createBarValueLabelPlugin = createBarValueLabelPlugin;

package/dist/components/SChartBar/utils/createBarValueLabelPlugin.js

@@ -0,0 +1,37 @@
+import { CHART_CSS_VARIABLES } from "../../../utils/chart/core/chartCssVariables.js";
+import { readCssColor } from "../../../utils/chart/css/readCssColor.js";
+import { isChartPointDimmed } from "../../../utils/chart/core/chartInteractivity.js";
+import { resolveChartLabelFont } from "../../../utils/chart/css/resolveChartLabelFont.js";
+//#region src/components/SChartBar/utils/createBarValueLabelPlugin.ts
+var LABEL_GAP = 4;
+var LABEL_FONT_SIZE = 10;
+var LABEL_FONT_WEIGHT = 500;
+var createBarValueLabelPlugin = ({ colorHostElement, formatValue }) => ({
+	id: "barValueLabel",
+	afterDatasetsDraw(chart) {
+		const labelColor = readCssColor(CHART_CSS_VARIABLES.barValueLabel, colorHostElement);
+		const mutedLabelColor = readCssColor(CHART_CSS_VARIABLES.barValueLabelMuted, colorHostElement);
+		const { ctx } = chart;
+		ctx.save();
+		ctx.font = resolveChartLabelFont({
+			size: LABEL_FONT_SIZE,
+			weight: LABEL_FONT_WEIGHT,
+			colorHostElement
+		});
+		ctx.textAlign = "center";
+		chart.data.datasets.forEach((dataset, datasetIndex) => {
+			if (!chart.isDatasetVisible(datasetIndex)) return;
+			chart.getDatasetMeta(datasetIndex).data.forEach((element, pointIndex) => {
+				const value = dataset.data[pointIndex];
+				if (typeof value !== "number") return;
+				const isNegative = value < 0;
+				ctx.fillStyle = isChartPointDimmed(chart, datasetIndex, pointIndex) ? mutedLabelColor : labelColor;
+				ctx.textBaseline = isNegative ? "top" : "bottom";
+				ctx.fillText(formatValue ? formatValue(value) : String(value), element.x, isNegative ? element.y + LABEL_GAP : element.y - LABEL_GAP);
+			});
+		});
+		ctx.restore();
+	}
+});
+//#endregion
+export { createBarValueLabelPlugin };