@flux-ui/statistics 3.0.0-next.68 → 3.0.0-next.69

package/dist/index.js

@@ -1,11 +1,21 @@
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, customRef, defineComponent, inject, markRaw, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, openBlock, provide, ref, renderList, renderSlot, toDisplayString, toValue, unref, useSlots, useTemplateRef, watch, watchEffect, withCtx } from "vue";
-import { merge } from "lodash-es";
 import { useI18n } from "vue-i18n";
 import { FluxIcon, FluxPane, FluxToolbar, FluxTooltip, iconRegistry } from "@flux-ui/components";
+import { merge } from "lodash-es";
 import { init } from "echarts/core";
 //#region ../internals/dist/data/index.js
 var oe = `#ef4444`, _e$1 = `#f97316`, Oe = `#f59e0b`, ze = `#eab308`, Xe = `#84cc16`, st = `#22c55e`, vt = `#10b981`, kt = `#14b8a6`, Bt = `#06b6d4`, Zt = `#0ea5e9`, an = `#dbeafe`, sn = `#93c5fd`, ln = `#3b82f6`, dn = `#1d4ed8`, bn = `#6366f1`, jn = `#8b5cf6`, Hn = `#a855f7`, $n = `#d946ef`, ur = `#ec4899`, gr = `#fff1f2`;
 //#endregion
+//#region src/composable/useChartBaseSetup.ts
+function useChartBaseSetup() {
+	const { t } = useI18n({ useScope: "parent" });
+	const chartRef = useTemplateRef("chartRef");
+	return {
+		t,
+		chartInstance: computed(() => chartRef.value?.chartInstance ?? null)
+	};
+}
+//#endregion
 //#region src/composable/useChartLegend.ts
 var FluxStatisticsChartLegendInjectionKey = Symbol("flux-statistics-chart-legend");
 function createChartLegendContext() {
@@ -72,71 +82,6 @@ function useChartHoverSync(chartInstance, legendContext, options) {
 	});
 }
 //#endregion
-//#region src/util/baseOptions.ts
-var FOREGROUND_LABEL = {
-	show: true,
-	color: "var(--foreground-secondary)"
-};
-var HIDDEN_AXIS = { show: false };
-var DASHED_SPLIT_LINE = {
-	show: true,
-	lineStyle: {
-		type: "dashed",
-		color: "var(--gray-200)"
-	}
-};
-function buildCartesianGrid(xAxisLabels, yAxisLabels) {
-	if (!xAxisLabels && !yAxisLabels) return {
-		left: 0,
-		right: 0,
-		top: 0,
-		bottom: 0,
-		containLabel: false
-	};
-	return {
-		left: yAxisLabels ? 9 : 0,
-		right: 9,
-		top: 9,
-		bottom: xAxisLabels ? 9 : 0,
-		containLabel: true
-	};
-}
-function buildCartesianBaseOptions(config = {}) {
-	const xAxisLabels = config.xAxisLabels ?? false;
-	const yAxisLabels = config.yAxisLabels ?? false;
-	const showSplitLines = config.splitLines ?? false;
-	const xSplitLine = showSplitLines && config.xAxisType === "value" ? DASHED_SPLIT_LINE : HIDDEN_AXIS;
-	const ySplitLine = showSplitLines && config.yAxisType !== "category" ? DASHED_SPLIT_LINE : HIDDEN_AXIS;
-	return {
-		grid: buildCartesianGrid(xAxisLabels, yAxisLabels),
-		tooltip: { trigger: config.tooltipTrigger ?? "item" },
-		xAxis: {
-			type: config.xAxisType ?? "category",
-			show: true,
-			scale: config.scale && config.xAxisType === "value",
-			splitLine: xSplitLine,
-			axisLabel: xAxisLabels ? FOREGROUND_LABEL : HIDDEN_AXIS,
-			axisLine: HIDDEN_AXIS,
-			axisTick: HIDDEN_AXIS
-		},
-		yAxis: {
-			type: config.yAxisType ?? "value",
-			show: true,
-			scale: config.scale && config.yAxisType !== "category",
-			splitLine: ySplitLine,
-			axisLabel: yAxisLabels ? FOREGROUND_LABEL : HIDDEN_AXIS,
-			axisLine: HIDDEN_AXIS,
-			axisTick: HIDDEN_AXIS
-		}
-	};
-}
-var POLAR_BASE_OPTIONS = {
-	tooltip: { show: false },
-	xAxis: { show: false },
-	yAxis: { show: false },
-	grid: { show: false }
-};
-//#endregion
 //#region src/util/colors.ts
 var CSS_VAR_PATTERN = /var\((--[^,)]+)(?:,\s*([^)]+))?\)/g;
 var themeVersion = ref(0);
@@ -185,7 +130,29 @@ function deepResolveCssVars(value, root) {
 	return changed ? out : value;
 }
 //#endregion
-//#region src/util/seriesDefaults.ts
+//#region src/util/icons.ts
+function renderIconSvg(name, color, size = 14) {
+	if (!name) return "";
+	const icon = iconRegistry[name];
+	if (!icon) return "";
+	const [width, height, , , pathData] = icon;
+	return `<svg viewBox="0 0 ${width} ${height}" width="${size}" height="${size}" focusable="false" aria-hidden="true">${(Array.isArray(pathData) ? pathData : [pathData]).map((d) => `<path d="${d}" fill="${color}"/>`).join("")}</svg>`;
+}
+//#endregion
+//#region src/util/series/chartColors.ts
+var CHART_DEFAULT_COLORS = [
+	"var(--chart-1)",
+	"var(--chart-2)",
+	"var(--chart-3)",
+	"var(--chart-4)"
+];
+function resolveChartColor(color) {
+	if (!color) return;
+	if (color.startsWith("#") || color.startsWith("var(")) return color;
+	return `var(--${color}-600)`;
+}
+//#endregion
+//#region src/util/series/defaults.ts
 var SOFT_EMPHASIS = { focus: "none" };
 var PIE_EMPHASIS = {
 	focus: "none",
@@ -386,23 +353,7 @@ var GAUGE_SERIES_DEFAULTS = {
 	}
 };
 //#endregion
-//#region src/util/convert.ts
-function resolveChartColor(color) {
-	if (!color) return;
-	if (color.startsWith("#") || color.startsWith("var(")) return color;
-	return `var(--${color}-600)`;
-}
-function extractLabels(series) {
-	for (const s of series) {
-		const labels = [];
-		let hasAny = false;
-		for (const point of s.data) if (typeof point === "object" && point !== null && typeof point.label === "string") {
-			labels.push(point.label);
-			hasAny = true;
-		} else labels.push("");
-		if (hasAny) return labels;
-	}
-}
+//#region src/util/series/converters.ts
 function extractValues(data) {
 	return data.map((point) => typeof point === "number" ? point : point.value);
 }
@@ -633,6 +584,19 @@ function toGaugeSeries(s, fallbackColor, index, total) {
 		}
 	};
 }
+//#endregion
+//#region src/util/series/labels.ts
+function extractLabels(series) {
+	for (const s of series) {
+		const labels = [];
+		let hasAny = false;
+		for (const point of s.data) if (typeof point === "object" && point !== null && typeof point.label === "string") {
+			labels.push(point.label);
+			hasAny = true;
+		} else labels.push("");
+		if (hasAny) return labels;
+	}
+}
 function cartesianFallbackLabels(series) {
 	const longest = series.reduce((max, s) => Math.max(max, s.data.length), 0);
 	return Array.from({ length: longest }, (_, i) => String(i + 1));
@@ -6855,56 +6819,7 @@ function K(e, t, n) {
 	Object.defineProperty(e, t, { value: n });
 }
 //#endregion
-//#region src/util/iconSvg.ts
-function renderIconSvg(name, color, size = 14) {
-	if (!name) return "";
-	const icon = iconRegistry[name];
-	if (!icon) return "";
-	const [width, height, , , pathData] = icon;
-	return `<svg viewBox="0 0 ${width} ${height}" width="${size}" height="${size}" focusable="false" aria-hidden="true">${(Array.isArray(pathData) ? pathData : [pathData]).map((d) => `<path d="${d}" fill="${color}"/>`).join("")}</svg>`;
-}
-//#endregion
-//#region src/util/defaultOptions.ts
-var CHART_DEFAULT_COLORS = [
-	"var(--chart-1)",
-	"var(--chart-2)",
-	"var(--chart-3)",
-	"var(--chart-4)"
-];
-function buildTooltipFormatter(t, styles, getSeriesIcons, valueFormatter) {
-	return (params) => {
-		const items = Array.isArray(params) ? params : [params];
-		if (items.length === 0) return "";
-		const rawTitle = items[0].axisValueLabel ?? items[0].axisValue ?? items[0].name ?? "";
-		const title = rawTitle ? t(String(rawTitle)) : "";
-		const icons = getSeriesIcons?.();
-		return renderTooltip(t, styles, title, items.map((param) => ({
-			name: param.seriesName ?? "",
-			value: extractValue(param.value),
-			color: param.color,
-			icon: icons?.[param.seriesIndex],
-			seriesIndex: param.seriesIndex,
-			dataIndex: param.dataIndex
-		})), -1, valueFormatter);
-	};
-}
-function buildCartesianTooltipOptions(t, styles, getSeriesIcons, valueFormatter) {
-	return { tooltip: {
-		show: true,
-		trigger: "axis",
-		formatter: buildTooltipFormatter(t, styles, getSeriesIcons, valueFormatter)
-	} };
-}
-function buildSharedItemTooltipFormatter(t, styles, getItems, getTitle, valueFormatter) {
-	return (params) => {
-		const param = Array.isArray(params) ? params[0] : params;
-		if (!param) return "";
-		const items = getItems();
-		const activeIndex = param.dataIndex ?? -1;
-		const rawTitle = getTitle?.() ?? "";
-		return renderTooltip(t, styles, rawTitle ? t(String(rawTitle)) : "", items, activeIndex, valueFormatter);
-	};
-}
+//#region src/util/tooltips/render.ts
 function renderTooltip(t, styles, title, items, activeIndex = -1, valueFormatter) {
 	if (items.length === 0) return "";
 	const titleHtml = title ? `<div class="${styles.statisticsChartTooltipTitle}">${title}</div>` : "";
@@ -6920,7 +6835,7 @@ function renderTooltip(t, styles, title, items, activeIndex = -1, valueFormatter
             <div class="${styles.statisticsChartTooltipSeriesValue}${activeClass}">${display}</div>
         `;
 	}).join("");
-	return `${titleHtml}<div class="${styles.statisticsChartTooltipBody}">${body}</div>`;
+	return `<div class="${styles.statisticsChartTooltip}">${titleHtml}<div class="${styles.statisticsChartTooltipBody}">${body}</div></div>`;
 }
 function extractValue(value) {
 	if (Array.isArray(value)) {
@@ -6937,7 +6852,10 @@ function formatValue(value) {
 	if (typeof value === "number") return Number.isInteger(value) ? p$2(value) : value.toString();
 	return String(value ?? "");
 }
-function buildBoxPlotTooltipOptions(t, styles, getSeries, getPalette) {
+//#endregion
+//#region src/util/tooltips/buildBoxPlotTooltip.ts
+function buildBoxPlotTooltip(input) {
+	const { t, styles, getSeries, getPalette } = input;
 	const formatter = (params) => {
 		const param = Array.isArray(params) ? params[0] : params;
 		if (!param) return "";
@@ -6983,7 +6901,61 @@ function buildBoxPlotTooltipOptions(t, styles, getSeries, getPalette) {
 		formatter
 	} };
 }
-function buildHeatmapTooltipOptions(t, styles, getSeries) {
+//#endregion
+//#region src/util/tooltips/buildCartesianTooltip.ts
+function buildCartesianTooltip(input) {
+	const { t, styles, getSeriesIcons, valueFormatter } = input;
+	const formatter = (params) => {
+		const items = Array.isArray(params) ? params : [params];
+		if (items.length === 0) return "";
+		const rawTitle = items[0].axisValueLabel ?? items[0].axisValue ?? items[0].name ?? "";
+		const title = rawTitle ? t(String(rawTitle)) : "";
+		const icons = getSeriesIcons();
+		return renderTooltip(t, styles, title, items.map((param) => ({
+			name: param.seriesName ?? "",
+			value: extractValue(param.value),
+			color: param.color,
+			icon: icons[param.seriesIndex],
+			seriesIndex: param.seriesIndex,
+			dataIndex: param.dataIndex
+		})), -1, valueFormatter);
+	};
+	return { tooltip: {
+		show: true,
+		trigger: "axis",
+		formatter
+	} };
+}
+//#endregion
+//#region src/util/tooltips/buildGaugeTooltip.ts
+function buildGaugeTooltip(input) {
+	const { t, styles, getSeries, getPalette } = input;
+	const formatter = (params) => {
+		const param = Array.isArray(params) ? params[0] : params;
+		if (!param) return "";
+		const series = getSeries();
+		const palette = getPalette();
+		const seriesIndex = param.seriesIndex ?? 0;
+		const s = series[seriesIndex];
+		if (!s) return "";
+		const color = palette[seriesIndex % palette.length];
+		return renderTooltip(t, styles, s.name ? t(String(s.name)) : "", [{
+			name: "",
+			value: s.value,
+			color,
+			icon: s.icon
+		}]);
+	};
+	return { tooltip: {
+		show: true,
+		trigger: "item",
+		formatter
+	} };
+}
+//#endregion
+//#region src/util/tooltips/buildHeatmapTooltip.ts
+function buildHeatmapTooltip(input) {
+	const { t, styles, getSeries } = input;
 	const formatter = (params) => {
 		const param = Array.isArray(params) ? params[0] : params;
 		if (!param) return "";
@@ -7005,18 +6977,25 @@ function buildHeatmapTooltipOptions(t, styles, getSeries) {
 		formatter
 	} };
 }
-function buildTreemapTooltipOptions(t, styles) {
+//#endregion
+//#region src/util/tooltips/buildRadarTooltip.ts
+function buildRadarTooltip(input) {
+	const { t, styles, getSeries, getIndicators, getPalette } = input;
 	const formatter = (params) => {
 		const param = Array.isArray(params) ? params[0] : params;
 		if (!param) return "";
-		const data = param.data;
-		if (!data) return "";
-		const color = data.color ?? "var(--primary-600)";
-		return renderTooltip(t, styles, data.name ? t(String(data.name)) : "", [{
-			name: "",
-			value: data.value ?? "",
+		const series = getSeries();
+		const indicators = getIndicators();
+		const palette = getPalette();
+		const ringIndex = param.dataIndex ?? 0;
+		const ring = series[ringIndex];
+		if (!ring) return "";
+		const color = palette[ringIndex % palette.length];
+		return renderTooltip(t, styles, ring.name ? t(String(ring.name)) : "", indicators.map((indicator, idx) => ({
+			name: indicator.name,
+			value: ring.values[idx] ?? "",
 			color
-		}]);
+		})));
 	};
 	return { tooltip: {
 		show: true,
@@ -7024,21 +7003,38 @@ function buildTreemapTooltipOptions(t, styles) {
 		formatter
 	} };
 }
-function buildGaugeTooltipOptions(t, styles, getSeries, getPalette) {
+//#endregion
+//#region src/util/tooltips/buildSharedItemTooltip.ts
+function buildSharedItemTooltip(input) {
+	const { t, styles, getItems, getTitle, valueFormatter } = input;
 	const formatter = (params) => {
 		const param = Array.isArray(params) ? params[0] : params;
 		if (!param) return "";
-		const series = getSeries();
-		const palette = getPalette();
-		const seriesIndex = param.seriesIndex ?? 0;
-		const s = series[seriesIndex];
-		if (!s) return "";
-		const color = palette[seriesIndex % palette.length];
-		return renderTooltip(t, styles, s.name ? t(String(s.name)) : "", [{
+		const items = getItems();
+		const activeIndex = param.dataIndex ?? -1;
+		const rawTitle = getTitle?.() ?? "";
+		return renderTooltip(t, styles, rawTitle ? t(String(rawTitle)) : "", items, activeIndex, valueFormatter);
+	};
+	return { tooltip: {
+		show: true,
+		trigger: "item",
+		formatter
+	} };
+}
+//#endregion
+//#region src/util/tooltips/buildTreemapTooltip.ts
+function buildTreemapTooltip(input) {
+	const { t, styles } = input;
+	const formatter = (params) => {
+		const param = Array.isArray(params) ? params[0] : params;
+		if (!param) return "";
+		const data = param.data;
+		if (!data) return "";
+		const color = data.color ?? "var(--primary-600)";
+		return renderTooltip(t, styles, data.name ? t(String(data.name)) : "", [{
 			name: "",
-			value: s.value,
-			color,
-			icon: s.icon
+			value: data.value ?? "",
+			color
 		}]);
 	};
 	return { tooltip: {
@@ -7047,7 +7043,484 @@ function buildGaugeTooltipOptions(t, styles, getSeries, getPalette) {
 		formatter
 	} };
 }
-function buildDefaultOptions() {
+//#endregion
+//#region src/util/options/buildCartesianBaseOptions.ts
+var FOREGROUND_LABEL = {
+	show: true,
+	color: "var(--foreground-secondary)"
+};
+var HIDDEN_AXIS = { show: false };
+var DASHED_SPLIT_LINE = {
+	show: true,
+	lineStyle: {
+		type: "dashed",
+		color: "var(--gray-200)"
+	}
+};
+function buildCartesianGrid(xAxisLabels, yAxisLabels, minPadding = 0) {
+	if (!xAxisLabels && !yAxisLabels) return {
+		left: minPadding,
+		right: minPadding,
+		top: minPadding,
+		bottom: minPadding,
+		containLabel: false
+	};
+	return {
+		left: yAxisLabels ? 21 : minPadding,
+		right: 21,
+		top: 21,
+		bottom: xAxisLabels ? 21 : minPadding,
+		containLabel: true
+	};
+}
+function buildCartesianBaseOptions(config = {}) {
+	const xAxisLabels = config.xAxisLabels ?? false;
+	const yAxisLabels = config.yAxisLabels ?? false;
+	const showSplitLines = config.splitLines ?? false;
+	const minPadding = config.minPadding ?? 0;
+	const xSplitLine = showSplitLines && config.xAxisType === "value" ? DASHED_SPLIT_LINE : HIDDEN_AXIS;
+	const ySplitLine = showSplitLines && config.yAxisType !== "category" ? DASHED_SPLIT_LINE : HIDDEN_AXIS;
+	return {
+		grid: buildCartesianGrid(xAxisLabels, yAxisLabels, minPadding),
+		tooltip: {
+			appendTo: "body",
+			snap: true,
+			trigger: config.tooltipTrigger ?? "item"
+		},
+		xAxis: {
+			type: config.xAxisType ?? "category",
+			show: true,
+			scale: config.scale && config.xAxisType === "value",
+			splitLine: xSplitLine,
+			axisLabel: xAxisLabels ? FOREGROUND_LABEL : HIDDEN_AXIS,
+			axisLine: HIDDEN_AXIS,
+			axisTick: HIDDEN_AXIS
+		},
+		yAxis: {
+			type: config.yAxisType ?? "value",
+			show: true,
+			scale: config.scale && config.yAxisType !== "category",
+			splitLine: ySplitLine,
+			axisLabel: yAxisLabels ? FOREGROUND_LABEL : HIDDEN_AXIS,
+			axisLine: HIDDEN_AXIS,
+			axisTick: HIDDEN_AXIS
+		}
+	};
+}
+//#endregion
+//#region src/util/options/cartesian/buildAreaChartOptions.ts
+function buildAreaChartOptions(input) {
+	const { series, labels, palette, t, styles, tooltip = false, tooltipValueFormatter, xAxisLabels = false, yAxisLabels = false, splitLines = false, advancedOptions = {} } = input;
+	const xLabels = labels ?? extractLabels(series) ?? cartesianFallbackLabels(series);
+	return merge({}, buildCartesianBaseOptions({
+		xAxisLabels,
+		yAxisLabels,
+		splitLines
+	}), { xAxis: {
+		type: "category",
+		data: xLabels,
+		boundaryGap: false
+	} }, tooltip ? buildCartesianTooltip({
+		t,
+		styles,
+		getSeriesIcons: () => series.map((s) => s.icon),
+		valueFormatter: tooltipValueFormatter
+	}) : { tooltip: { show: false } }, advancedOptions, {
+		series: series.map((s, i) => toAreaSeries({
+			...s,
+			name: s.name ? t(String(s.name)) : void 0
+		}, palette[i])),
+		color: palette
+	});
+}
+//#endregion
+//#region src/util/options/cartesian/buildBarChartOptions.ts
+function buildBarChartOptions(input) {
+	const { series, labels, palette, t, styles, tooltip = false, tooltipValueFormatter, xAxisLabels = false, yAxisLabels = false, splitLines = false, advancedOptions = {} } = input;
+	const xLabels = labels ?? extractLabels(series) ?? cartesianFallbackLabels(series);
+	return merge({}, buildCartesianBaseOptions({
+		xAxisLabels,
+		yAxisLabels,
+		splitLines,
+		minPadding: 12
+	}), { xAxis: {
+		type: "category",
+		data: xLabels
+	} }, tooltip ? buildCartesianTooltip({
+		t,
+		styles,
+		getSeriesIcons: () => series.map((s) => s.icon),
+		valueFormatter: tooltipValueFormatter
+	}) : { tooltip: { show: false } }, advancedOptions, {
+		series: series.map((s, i) => toBarSeries({
+			...s,
+			name: s.name ? t(String(s.name)) : void 0
+		}, palette[i])),
+		color: palette
+	});
+}
+//#endregion
+//#region src/util/options/cartesian/buildBoxPlotChartOptions.ts
+function resolveBoxPlotLabels(series, labels) {
+	if (labels) return labels;
+	for (const s of series) if (s.data.map((p) => p.label ?? "").filter(Boolean).length > 0) return s.data.map((p) => p.label ?? "");
+}
+function buildBoxPlotChartOptions(input) {
+	const { series, labels, palette, t, styles, tooltip = false, xAxisLabels = false, yAxisLabels = false, splitLines = false, advancedOptions = {} } = input;
+	const xLabels = resolveBoxPlotLabels(series, labels);
+	const base = buildCartesianBaseOptions({
+		xAxisLabels,
+		yAxisLabels,
+		splitLines,
+		minPadding: 12
+	});
+	const xAxisOverride = xLabels ? { xAxis: {
+		type: "category",
+		data: xLabels
+	} } : void 0;
+	const tooltipOptions = tooltip ? buildBoxPlotTooltip({
+		t,
+		styles,
+		getSeries: () => series,
+		getPalette: () => palette
+	}) : { tooltip: { show: false } };
+	const echartsSeries = series.map((s, i) => toBoxPlotSeries({
+		...s,
+		name: s.name ? t(String(s.name)) : void 0
+	}, palette[i]));
+	return merge({}, base, xAxisOverride ?? {}, tooltipOptions, advancedOptions, {
+		series: echartsSeries,
+		color: palette
+	});
+}
+//#endregion
+//#region src/util/options/cartesian/buildBubbleChartOptions.ts
+function buildBubbleChartOptions(input) {
+	const { series, palette, t, styles, tooltip = false, xAxisLabels = false, yAxisLabels = false, splitLines = false, advancedOptions = {} } = input;
+	return merge({}, buildCartesianBaseOptions({
+		xAxisType: "value",
+		yAxisType: "value",
+		scale: true,
+		xAxisLabels,
+		yAxisLabels,
+		splitLines,
+		minPadding: 12
+	}), tooltip ? buildCartesianTooltip({
+		t,
+		styles,
+		getSeriesIcons: () => series.map((s) => s.icon)
+	}) : { tooltip: { show: false } }, advancedOptions, {
+		series: series.map((s, i) => toBubbleSeries({
+			...s,
+			name: s.name ? t(String(s.name)) : void 0
+		}, palette[i])),
+		color: palette
+	});
+}
+//#endregion
+//#region src/util/options/cartesian/buildCandlestickChartOptions.ts
+function resolveCandlestickLabels(series, labels) {
+	if (labels) return labels;
+	for (const s of series) if (s.data.map((p) => p.label ?? "").filter(Boolean).length > 0) return s.data.map((p) => p.label ?? "");
+}
+function candlestickLegendItemBuilder(s) {
+	return [{
+		color: resolveChartColor(s.positiveColor) ?? "var(--success-500)",
+		icon: s.icon,
+		label: "Up"
+	}, {
+		color: resolveChartColor(s.negativeColor) ?? "var(--danger-500)",
+		label: "Down"
+	}];
+}
+function buildCandlestickChartOptions(input) {
+	const { series, labels, t, styles, tooltip = false, xAxisLabels = false, yAxisLabels = false, splitLines = false, advancedOptions = {} } = input;
+	const xLabels = resolveCandlestickLabels(series, labels);
+	const base = buildCartesianBaseOptions({
+		scale: true,
+		xAxisLabels,
+		yAxisLabels,
+		splitLines,
+		minPadding: 12
+	});
+	const xAxisOverride = xLabels ? { xAxis: {
+		type: "category",
+		data: xLabels
+	} } : void 0;
+	const tooltipOptions = tooltip ? buildCartesianTooltip({
+		t,
+		styles,
+		getSeriesIcons: () => series.map((s) => s.icon)
+	}) : { tooltip: { show: false } };
+	const echartsSeries = series.map((s) => toCandlestickSeries({
+		...s,
+		name: s.name ? t(String(s.name)) : void 0
+	}));
+	return merge({}, base, xAxisOverride ?? {}, tooltipOptions, advancedOptions, { series: echartsSeries });
+}
+//#endregion
+//#region src/util/options/cartesian/buildHeatmapChartOptions.ts
+var HIDDEN = { show: false };
+var labelStyle = (show) => ({
+	show,
+	color: "var(--foreground-secondary)"
+});
+function buildHeatmapChartOptions(input) {
+	const { series, xLabels, yLabels, t, styles, tooltip = false, xAxisLabels = false, yAxisLabels = false, advancedOptions = {} } = input;
+	const translatedXLabels = xLabels.map((label) => t(String(label)));
+	const translatedYLabels = yLabels.map((label) => t(String(label)));
+	return merge({}, {
+		grid: buildCartesianGrid(xAxisLabels, yAxisLabels, 12),
+		color: [ln],
+		visualMap: {
+			show: false,
+			min: 0,
+			max: 100,
+			inRange: { color: [
+				an,
+				sn,
+				ln,
+				dn
+			] }
+		},
+		xAxis: {
+			type: "category",
+			data: translatedXLabels,
+			axisLabel: labelStyle(xAxisLabels),
+			axisLine: HIDDEN,
+			axisTick: HIDDEN,
+			splitLine: HIDDEN
+		},
+		yAxis: {
+			type: "category",
+			data: translatedYLabels,
+			axisLabel: labelStyle(yAxisLabels),
+			axisLine: HIDDEN,
+			axisTick: HIDDEN,
+			splitLine: HIDDEN
+		}
+	}, tooltip ? buildHeatmapTooltip({
+		t,
+		styles,
+		getSeries: () => series
+	}) : { tooltip: { show: false } }, advancedOptions, { series: series.map((s) => toHeatmapSeries({
+		...s,
+		name: s.name ? t(String(s.name)) : void 0
+	}, xLabels, yLabels)) });
+}
+//#endregion
+//#region src/util/options/cartesian/buildLineChartOptions.ts
+function buildLineChartOptions(input) {
+	const { series, labels, palette, t, styles, tooltip = false, tooltipValueFormatter, xAxisLabels = false, yAxisLabels = false, splitLines = false, advancedOptions = {} } = input;
+	const xLabels = labels ?? extractLabels(series) ?? cartesianFallbackLabels(series);
+	return merge({}, buildCartesianBaseOptions({
+		xAxisLabels,
+		yAxisLabels,
+		splitLines
+	}), { xAxis: {
+		type: "category",
+		data: xLabels,
+		boundaryGap: false
+	} }, tooltip ? buildCartesianTooltip({
+		t,
+		styles,
+		getSeriesIcons: () => series.map((s) => s.icon),
+		valueFormatter: tooltipValueFormatter
+	}) : { tooltip: { show: false } }, advancedOptions, {
+		series: series.map((s, i) => toLineSeries({
+			...s,
+			name: s.name ? t(String(s.name)) : void 0
+		}, palette[i])),
+		color: palette
+	});
+}
+//#endregion
+//#region src/util/options/cartesian/buildMixedChartOptions.ts
+function buildMixedChartOptions(input) {
+	const { series, labels, palette, t, styles, tooltip = false, tooltipValueFormatter, xAxisLabels = false, yAxisLabels = false, splitLines = false, advancedOptions = {} } = input;
+	const xLabels = labels ?? extractLabels(series) ?? cartesianFallbackLabels(series);
+	return merge({}, buildCartesianBaseOptions({
+		tooltipTrigger: "axis",
+		xAxisLabels,
+		yAxisLabels,
+		splitLines,
+		minPadding: 12
+	}), { xAxis: {
+		type: "category",
+		data: xLabels
+	} }, tooltip ? buildCartesianTooltip({
+		t,
+		styles,
+		getSeriesIcons: () => series.map((s) => s.icon),
+		valueFormatter: tooltipValueFormatter
+	}) : { tooltip: { show: false } }, advancedOptions, {
+		series: series.map((s, i) => toMixedSeries({
+			...s,
+			name: s.name ? t(String(s.name)) : void 0
+		}, palette[i])),
+		color: palette
+	});
+}
+//#endregion
+//#region src/util/options/cartesian/buildScatterChartOptions.ts
+function buildScatterChartOptions(input) {
+	const { series, palette, t, styles, tooltip = false, xAxisLabels = false, yAxisLabels = false, splitLines = false, advancedOptions = {} } = input;
+	return merge({}, buildCartesianBaseOptions({
+		xAxisType: "value",
+		yAxisType: "value",
+		scale: true,
+		xAxisLabels,
+		yAxisLabels,
+		splitLines,
+		minPadding: 12
+	}), tooltip ? buildCartesianTooltip({
+		t,
+		styles,
+		getSeriesIcons: () => series.map((s) => s.icon)
+	}) : { tooltip: { show: false } }, advancedOptions, {
+		series: series.map((s, i) => toScatterSeries({
+			...s,
+			name: s.name ? t(String(s.name)) : void 0
+		}, palette[i])),
+		color: palette
+	});
+}
+//#endregion
+//#region src/util/options/buildCircularBaseOptions.ts
+function buildCircularBaseOptions() {
+	return {
+		tooltip: { show: false },
+		xAxis: { show: false },
+		yAxis: { show: false },
+		grid: { show: false }
+	};
+}
+//#endregion
+//#region src/util/options/circular/buildDonutChartOptions.ts
+function buildDonutChartOptions(input) {
+	const { slices, palette, tooltipItems, title, t, styles, tooltip = false, tooltipValueFormatter, advancedOptions = {} } = input;
+	const tooltipOptions = tooltip ? buildSharedItemTooltip({
+		t,
+		styles,
+		getItems: () => tooltipItems,
+		getTitle: () => title,
+		valueFormatter: tooltipValueFormatter
+	}) : { tooltip: { show: false } };
+	const echartsSeries = [toDonutSeries(slices, palette)];
+	return merge({}, buildCircularBaseOptions(), tooltipOptions, advancedOptions, {
+		series: echartsSeries,
+		color: palette
+	});
+}
+//#endregion
+//#region src/util/options/circular/buildGaugeChartOptions.ts
+function gaugeLegendItemBuilder(s, color, _index, t) {
+	return {
+		color,
+		icon: s.icon,
+		label: s.name ? t(String(s.name)) : "",
+		value: s.value
+	};
+}
+function buildGaugeChartOptions(input) {
+	const { series, palette, t, styles, tooltip = false, advancedOptions = {} } = input;
+	const tooltipOptions = tooltip ? buildGaugeTooltip({
+		t,
+		styles,
+		getSeries: () => series,
+		getPalette: () => palette
+	}) : { tooltip: { show: false } };
+	const echartsSeries = series.map((s, i) => toGaugeSeries({
+		...s,
+		name: s.name ? t(String(s.name)) : s.name
+	}, palette[i], i, series.length));
+	return merge({}, buildCircularBaseOptions(), tooltipOptions, advancedOptions, {
+		series: echartsSeries,
+		color: palette
+	});
+}
+//#endregion
+//#region src/util/options/circular/buildPieChartOptions.ts
+function buildPieChartOptions(input) {
+	const { slices, palette, tooltipItems, title, t, styles, tooltip = false, tooltipValueFormatter, advancedOptions = {} } = input;
+	const tooltipOptions = tooltip ? buildSharedItemTooltip({
+		t,
+		styles,
+		getItems: () => tooltipItems,
+		getTitle: () => title,
+		valueFormatter: tooltipValueFormatter
+	}) : { tooltip: { show: false } };
+	const echartsSeries = [toPieSeries(slices, palette)];
+	return merge({}, buildCircularBaseOptions(), tooltipOptions, advancedOptions, {
+		series: echartsSeries,
+		color: palette
+	});
+}
+//#endregion
+//#region src/util/options/circular/buildPolarAreaChartOptions.ts
+function buildPolarAreaChartOptions(input) {
+	const { slices, palette, tooltipItems, title, t, styles, tooltip = false, tooltipValueFormatter, advancedOptions = {} } = input;
+	const tooltipOptions = tooltip ? buildSharedItemTooltip({
+		t,
+		styles,
+		getItems: () => tooltipItems,
+		getTitle: () => title,
+		valueFormatter: tooltipValueFormatter
+	}) : { tooltip: { show: false } };
+	const echartsSeries = [toPolarAreaSeries(slices, palette)];
+	return merge({}, buildCircularBaseOptions(), tooltipOptions, advancedOptions, {
+		series: echartsSeries,
+		color: palette
+	});
+}
+//#endregion
+//#region src/util/options/circular/buildRadarChartOptions.ts
+function buildRadarChartOptions(input) {
+	const { series, indicators, palette, t, styles, tooltip = false, advancedOptions = {} } = input;
+	const radarConfig = { radar: {
+		indicator: indicators.map((i) => ({
+			name: t(String(i.name)),
+			max: i.max
+		})),
+		splitLine: { lineStyle: { color: "var(--gray-200)" } },
+		splitArea: { show: false },
+		axisLine: { lineStyle: { color: "var(--gray-200)" } },
+		axisName: {
+			color: "var(--foreground-secondary)",
+			fontSize: 12,
+			fontWeight: 500
+		}
+	} };
+	const tooltipOptions = tooltip ? buildRadarTooltip({
+		t,
+		styles,
+		getSeries: () => series,
+		getIndicators: () => indicators,
+		getPalette: () => palette
+	}) : { tooltip: { show: false } };
+	const echartsSeries = [toRadarSeries(series.map((s) => ({
+		...s,
+		name: s.name ? t(String(s.name)) : void 0
+	})), palette)];
+	return merge({}, buildCircularBaseOptions(), radarConfig, tooltipOptions, advancedOptions, {
+		series: echartsSeries,
+		color: palette
+	});
+}
+//#endregion
+//#region src/util/options/circular/buildTreemapChartOptions.ts
+function buildTreemapChartOptions(input) {
+	const { nodes, palette = CHART_DEFAULT_COLORS, t, styles, tooltip = false, advancedOptions = {} } = input;
+	const tooltipOptions = tooltip ? buildTreemapTooltip({
+		t,
+		styles
+	}) : { tooltip: { show: false } };
+	const echartsSeries = [toTreemapSeries(nodes, palette)];
+	return merge({}, buildCircularBaseOptions(), tooltipOptions, advancedOptions, { series: echartsSeries });
+}
+//#endregion
+//#region src/util/options/buildBaseOptions.ts
+function buildBaseOptions() {
 	return {
 		color: [
 			"var(--chart-1)",
@@ -7066,13 +7539,16 @@ function buildDefaultOptions() {
 			borderWidth: 0,
 			padding: 0,
 			extraCssText: "box-shadow: none;",
-			className: "flux-statistics-tooltip"
+			axisPointer: {
+				appendTo: "body",
+				snap: true
+			}
 		},
 		legend: { show: false }
 	};
 }
 //#endregion
-//#region src/util/sparklineOptions.ts
+//#region src/util/sparkline.ts
 function buildSparklineOptions(variant, color, series) {
 	const data = series[0]?.data ?? [];
 	const base = {
@@ -7152,8 +7628,8 @@ function useChartSeriesSetup(seriesGetter, options = {}) {
 	};
 }
 //#endregion
-//#region src/composable/usePieSlicesSetup.ts
-function usePieSlicesSetup(slicesGetter) {
+//#region src/composable/useChartSlicesSetup.ts
+function useChartSlicesSetup(slicesGetter) {
 	const { t } = useI18n({ useScope: "parent" });
 	const legendContext = inject(FluxStatisticsChartLegendInjectionKey, null);
 	const chartRef = useTemplateRef("chartRef");
@@ -10267,7 +10743,7 @@ useMode(definition$2);
 useMode(definition$1);
 useMode(definition);
 //#endregion
-//#region ../../node_modules/.bun/@basmilius+http-client@3.33.0+ceec7979b6f4ef20/node_modules/@basmilius/http-client/dist/index.mjs
+//#region ../../node_modules/.bun/@basmilius+http-client@3.33.0+644299353f754fd6/node_modules/@basmilius/http-client/dist/index.mjs
 function adapter_default(Parent) {
 	return class extends Parent {
 		constructor(...args) {
@@ -10828,6 +11304,7 @@ function useECharts(target, options) {
 var Chart_module_default = {
 	pane: `pane`,
 	statisticsChart: `statistics-chart`,
+	statisticsChartTooltip: `statistics-chart-tooltip`,
 	statisticsChartTooltipTitle: `statistics-chart-tooltip-title`,
 	statisticsChartTooltipBody: `statistics-chart-tooltip-body`,
 	statisticsChartTooltipSeriesColor: `statistics-chart-tooltip-series-color`,
@@ -10847,7 +11324,7 @@ var FluxStatisticsChart_default = /* @__PURE__ */ defineComponent({
 	props: { options: { default: () => ({}) } },
 	setup(__props, { expose: __expose }) {
 		const chart = useTemplateRef("chart");
-		const defaults = buildDefaultOptions();
+		const defaults = buildBaseOptions();
 		const { chartInstance } = useECharts(chart, computed(() => {
 			const merged = merge({}, defaults, __props.options);
 			if (__props.options && __props.options.color !== void 0) merged.color = __props.options.color;
@@ -10869,7 +11346,7 @@ var FluxStatisticsChart_default = /* @__PURE__ */ defineComponent({
 var FluxStatisticsAreaChart_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxStatisticsAreaChart",
 	props: {
-		advancedOptions: { default: () => ({}) },
+		advancedOptions: {},
 		labels: {},
 		series: {},
 		splitLines: {
@@ -10892,25 +11369,19 @@ var FluxStatisticsAreaChart_default = /* @__PURE__ */ defineComponent({
 	},
 	setup(__props) {
 		const { t, palette } = useChartSeriesSetup(() => __props.series);
-		const xLabels = computed(() => __props.labels ?? extractLabels(__props.series) ?? cartesianFallbackLabels(__props.series));
-		const echartsSeries = computed(() => __props.series.map((s, i) => toAreaSeries({
-			...s,
-			name: s.name ? t(String(s.name)) : void 0
-		}, palette.value[i])));
-		const mergedOptions = computed(() => {
-			return merge({}, buildCartesianBaseOptions({
-				xAxisLabels: __props.xAxisLabels,
-				yAxisLabels: __props.yAxisLabels,
-				splitLines: __props.splitLines
-			}), { xAxis: {
-				type: "category",
-				data: xLabels.value,
-				boundaryGap: false
-			} }, __props.tooltip ? buildCartesianTooltipOptions(t, Chart_module_default, () => __props.series.map((s) => s.icon), __props.tooltipValueFormatter) : { tooltip: { show: false } }, __props.advancedOptions, {
-				series: echartsSeries.value,
-				color: palette.value
-			});
-		});
+		const mergedOptions = computed(() => buildAreaChartOptions({
+			series: __props.series,
+			labels: __props.labels,
+			palette: palette.value,
+			t,
+			styles: Chart_module_default,
+			tooltip: __props.tooltip,
+			tooltipValueFormatter: __props.tooltipValueFormatter,
+			xAxisLabels: __props.xAxisLabels,
+			yAxisLabels: __props.yAxisLabels,
+			splitLines: __props.splitLines,
+			advancedOptions: __props.advancedOptions
+		}));
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(FluxStatisticsChart_default, {
 				ref: "chartRef",
@@ -10924,7 +11395,7 @@ var FluxStatisticsAreaChart_default = /* @__PURE__ */ defineComponent({
 var FluxStatisticsBarChart_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxStatisticsBarChart",
 	props: {
-		advancedOptions: { default: () => ({}) },
+		advancedOptions: {},
 		labels: {},
 		series: {},
 		splitLines: {
@@ -10947,24 +11418,19 @@ var FluxStatisticsBarChart_default = /* @__PURE__ */ defineComponent({
 	},
 	setup(__props) {
 		const { t, palette } = useChartSeriesSetup(() => __props.series);
-		const xLabels = computed(() => __props.labels ?? extractLabels(__props.series) ?? cartesianFallbackLabels(__props.series));
-		const echartsSeries = computed(() => __props.series.map((s, i) => toBarSeries({
-			...s,
-			name: s.name ? t(String(s.name)) : void 0
-		}, palette.value[i])));
-		const mergedOptions = computed(() => {
-			return merge({}, buildCartesianBaseOptions({
-				xAxisLabels: __props.xAxisLabels,
-				yAxisLabels: __props.yAxisLabels,
-				splitLines: __props.splitLines
-			}), { xAxis: {
-				type: "category",
-				data: xLabels.value
-			} }, __props.tooltip ? buildCartesianTooltipOptions(t, Chart_module_default, () => __props.series.map((s) => s.icon), __props.tooltipValueFormatter) : { tooltip: { show: false } }, __props.advancedOptions, {
-				series: echartsSeries.value,
-				color: palette.value
-			});
-		});
+		const mergedOptions = computed(() => buildBarChartOptions({
+			series: __props.series,
+			labels: __props.labels,
+			palette: palette.value,
+			t,
+			styles: Chart_module_default,
+			tooltip: __props.tooltip,
+			tooltipValueFormatter: __props.tooltipValueFormatter,
+			xAxisLabels: __props.xAxisLabels,
+			yAxisLabels: __props.yAxisLabels,
+			splitLines: __props.splitLines,
+			advancedOptions: __props.advancedOptions
+		}));
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(FluxStatisticsChart_default, {
 				ref: "chartRef",
@@ -11034,7 +11500,7 @@ var FluxStatisticsBase_default = /* @__PURE__ */ defineComponent({
 var FluxStatisticsBoxPlotChart_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxStatisticsBoxPlotChart",
 	props: {
-		advancedOptions: { default: () => ({}) },
+		advancedOptions: {},
 		labels: {},
 		series: {},
 		splitLines: {
@@ -11056,30 +11522,18 @@ var FluxStatisticsBoxPlotChart_default = /* @__PURE__ */ defineComponent({
 	},
 	setup(__props) {
 		const { t, palette } = useChartSeriesSetup(() => __props.series);
-		const xLabels = computed(() => {
-			if (__props.labels) return __props.labels;
-			for (const s of __props.series) if (s.data.map((p) => p.label ?? "").filter(Boolean).length > 0) return s.data.map((p) => p.label ?? "");
-		});
-		const echartsSeries = computed(() => __props.series.map((s, i) => toBoxPlotSeries({
-			...s,
-			name: s.name ? t(String(s.name)) : void 0
-		}, palette.value[i])));
-		const mergedOptions = computed(() => {
-			const base = buildCartesianBaseOptions({
-				xAxisLabels: __props.xAxisLabels,
-				yAxisLabels: __props.yAxisLabels,
-				splitLines: __props.splitLines
-			});
-			const xAxisOverride = xLabels.value ? { xAxis: {
-				type: "category",
-				data: xLabels.value
-			} } : void 0;
-			const tooltipOptions = __props.tooltip ? buildBoxPlotTooltipOptions(t, Chart_module_default, () => __props.series, () => palette.value) : { tooltip: { show: false } };
-			return merge({}, base, xAxisOverride ?? {}, tooltipOptions, __props.advancedOptions, {
-				series: echartsSeries.value,
-				color: palette.value
-			});
-		});
+		const mergedOptions = computed(() => buildBoxPlotChartOptions({
+			series: __props.series,
+			labels: __props.labels,
+			palette: palette.value,
+			t,
+			styles: Chart_module_default,
+			tooltip: __props.tooltip,
+			xAxisLabels: __props.xAxisLabels,
+			yAxisLabels: __props.yAxisLabels,
+			splitLines: __props.splitLines,
+			advancedOptions: __props.advancedOptions
+		}));
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(FluxStatisticsChart_default, {
 				ref: "chartRef",
@@ -11093,7 +11547,7 @@ var FluxStatisticsBoxPlotChart_default = /* @__PURE__ */ defineComponent({
 var FluxStatisticsBubbleChart_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxStatisticsBubbleChart",
 	props: {
-		advancedOptions: { default: () => ({}) },
+		advancedOptions: {},
 		series: {},
 		splitLines: {
 			type: Boolean,
@@ -11114,23 +11568,17 @@ var FluxStatisticsBubbleChart_default = /* @__PURE__ */ defineComponent({
 	},
 	setup(__props) {
 		const { t, palette } = useChartSeriesSetup(() => __props.series);
-		const echartsSeries = computed(() => __props.series.map((s, i) => toBubbleSeries({
-			...s,
-			name: s.name ? t(String(s.name)) : void 0
-		}, palette.value[i])));
-		const mergedOptions = computed(() => {
-			return merge({}, buildCartesianBaseOptions({
-				xAxisType: "value",
-				yAxisType: "value",
-				scale: true,
-				xAxisLabels: __props.xAxisLabels,
-				yAxisLabels: __props.yAxisLabels,
-				splitLines: __props.splitLines
-			}), __props.tooltip ? buildCartesianTooltipOptions(t, Chart_module_default, () => __props.series.map((s) => s.icon)) : { tooltip: { show: false } }, __props.advancedOptions, {
-				series: echartsSeries.value,
-				color: palette.value
-			});
-		});
+		const mergedOptions = computed(() => buildBubbleChartOptions({
+			series: __props.series,
+			palette: palette.value,
+			t,
+			styles: Chart_module_default,
+			tooltip: __props.tooltip,
+			xAxisLabels: __props.xAxisLabels,
+			yAxisLabels: __props.yAxisLabels,
+			splitLines: __props.splitLines,
+			advancedOptions: __props.advancedOptions
+		}));
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(FluxStatisticsChart_default, {
 				ref: "chartRef",
@@ -11144,7 +11592,7 @@ var FluxStatisticsBubbleChart_default = /* @__PURE__ */ defineComponent({
 var FluxStatisticsCandlestickChart_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxStatisticsCandlestickChart",
 	props: {
-		advancedOptions: { default: () => ({}) },
+		advancedOptions: {},
 		labels: {},
 		series: {},
 		splitLines: {
@@ -11165,36 +11613,18 @@ var FluxStatisticsCandlestickChart_default = /* @__PURE__ */ defineComponent({
 		}
 	},
 	setup(__props) {
-		const { t } = useChartSeriesSetup(() => __props.series, { getLegendItem: (s) => [{
-			color: resolveChartColor(s.positiveColor) ?? "var(--success-500)",
-			icon: s.icon,
-			label: "Up"
-		}, {
-			color: resolveChartColor(s.negativeColor) ?? "var(--danger-500)",
-			label: "Down"
-		}] });
-		const xLabels = computed(() => {
-			if (__props.labels) return __props.labels;
-			for (const s of __props.series) if (s.data.map((p) => p.label ?? "").filter(Boolean).length > 0) return s.data.map((p) => p.label ?? "");
-		});
-		const echartsSeries = computed(() => __props.series.map((s) => toCandlestickSeries({
-			...s,
-			name: s.name ? t(String(s.name)) : void 0
-		})));
-		const mergedOptions = computed(() => {
-			const base = buildCartesianBaseOptions({
-				scale: true,
-				xAxisLabels: __props.xAxisLabels,
-				yAxisLabels: __props.yAxisLabels,
-				splitLines: __props.splitLines
-			});
-			const xAxisOverride = xLabels.value ? { xAxis: {
-				type: "category",
-				data: xLabels.value
-			} } : void 0;
-			const tooltipOptions = __props.tooltip ? buildCartesianTooltipOptions(t, Chart_module_default, () => __props.series.map((s) => s.icon)) : { tooltip: { show: false } };
-			return merge({}, base, xAxisOverride ?? {}, tooltipOptions, __props.advancedOptions, { series: echartsSeries.value });
-		});
+		const { t } = useChartSeriesSetup(() => __props.series, { getLegendItem: candlestickLegendItemBuilder });
+		const mergedOptions = computed(() => buildCandlestickChartOptions({
+			series: __props.series,
+			labels: __props.labels,
+			t,
+			styles: Chart_module_default,
+			tooltip: __props.tooltip,
+			xAxisLabels: __props.xAxisLabels,
+			yAxisLabels: __props.yAxisLabels,
+			splitLines: __props.splitLines,
+			advancedOptions: __props.advancedOptions
+		}));
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(FluxStatisticsChart_default, {
 				ref: "chartRef",
@@ -11251,6 +11681,17 @@ var FluxStatisticsChange_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
+//#endregion
+//#region src/component/FluxStatisticsLegendScope.vue
+var FluxStatisticsLegendScope_default = /* @__PURE__ */ defineComponent({
+	__name: "FluxStatisticsLegendScope",
+	setup(__props) {
+		provide(FluxStatisticsChartLegendInjectionKey, createChartLegendContext());
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default");
+		};
+	}
+});
 var ChartPane_module_default = {
 	statisticsChartPane: `statistics-chart-pane`,
 	statisticsChartPaneBody: `statistics-chart-pane-body`,
@@ -11271,7 +11712,6 @@ var FluxStatisticsChartPane_default = /* @__PURE__ */ defineComponent({
 	},
 	setup(__props) {
 		const slots = useSlots();
-		provide(FluxStatisticsChartLegendInjectionKey, createChartLegendContext());
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(FluxStatisticsBase_default, {
 				class: normalizeClass(unref(ChartPane_module_default).statisticsChartPane),
@@ -11283,10 +11723,13 @@ var FluxStatisticsChartPane_default = /* @__PURE__ */ defineComponent({
 					"--min-height": __props.minHeight && `${__props.minHeight}px`
 				})
 			}, createSlots({
-				content: withCtx(() => [createElementVNode("div", { class: normalizeClass(unref(ChartPane_module_default).statisticsChartPaneBody) }, [createElementVNode("div", { class: normalizeClass(unref(ChartPane_module_default).statisticsChartPaneContainer) }, [renderSlot(_ctx.$slots, "default")], 2), renderSlot(_ctx.$slots, "legend")], 2), slots.toolbar ? (openBlock(), createBlock(unref(FluxToolbar), { key: 0 }, {
-					default: withCtx(() => [renderSlot(_ctx.$slots, "toolbar")]),
+				content: withCtx(() => [createVNode(FluxStatisticsLegendScope_default, null, {
+					default: withCtx(() => [createElementVNode("div", { class: normalizeClass(unref(ChartPane_module_default).statisticsChartPaneBody) }, [createElementVNode("div", { class: normalizeClass(unref(ChartPane_module_default).statisticsChartPaneContainer) }, [renderSlot(_ctx.$slots, "default")], 2), renderSlot(_ctx.$slots, "legend")], 2), slots.toolbar ? (openBlock(), createBlock(unref(FluxToolbar), { key: 0 }, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "toolbar")]),
+						_: 3
+					})) : createCommentVNode("", true)]),
 					_: 3
-				})) : createCommentVNode("", true)]),
+				})]),
 				_: 2
 			}, [slots.info ? {
 				name: "info",
@@ -11423,7 +11866,7 @@ var FluxStatisticsDetailsTableRow_default = /* @__PURE__ */ defineComponent({
 var FluxStatisticsDonutChart_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxStatisticsDonutChart",
 	props: {
-		advancedOptions: { default: () => ({}) },
+		advancedOptions: {},
 		slices: {},
 		title: {},
 		tooltip: {
@@ -11433,19 +11876,17 @@ var FluxStatisticsDonutChart_default = /* @__PURE__ */ defineComponent({
 		tooltipValueFormatter: { type: Function }
 	},
 	setup(__props) {
-		const { t, palette, tooltipItems } = usePieSlicesSetup(() => __props.slices);
-		const echartsSeries = computed(() => [toDonutSeries(__props.slices, palette.value)]);
-		const tooltipOptions = computed(() => {
-			if (!__props.tooltip) return { tooltip: { show: false } };
-			return { tooltip: {
-				show: true,
-				trigger: "item",
-				formatter: buildSharedItemTooltipFormatter(t, Chart_module_default, () => tooltipItems.value, () => __props.title, __props.tooltipValueFormatter)
-			} };
-		});
-		const mergedOptions = computed(() => merge({}, POLAR_BASE_OPTIONS, tooltipOptions.value, __props.advancedOptions, {
-			series: echartsSeries.value,
-			color: palette.value
+		const { t, palette, tooltipItems } = useChartSlicesSetup(() => __props.slices);
+		const mergedOptions = computed(() => buildDonutChartOptions({
+			slices: __props.slices,
+			palette: palette.value,
+			tooltipItems: tooltipItems.value,
+			title: __props.title,
+			t,
+			styles: Chart_module_default,
+			tooltip: __props.tooltip,
+			tooltipValueFormatter: __props.tooltipValueFormatter,
+			advancedOptions: __props.advancedOptions
 		}));
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(FluxStatisticsChart_default, {
@@ -11533,7 +11974,7 @@ var FluxStatisticsGrid_default = /* @__PURE__ */ defineComponent({
 var FluxStatisticsHeatmapChart_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxStatisticsHeatmapChart",
 	props: {
-		advancedOptions: { default: () => ({}) },
+		advancedOptions: {},
 		series: {},
 		tooltip: {
 			type: Boolean,
@@ -11551,56 +11992,18 @@ var FluxStatisticsHeatmapChart_default = /* @__PURE__ */ defineComponent({
 		yLabels: { default: () => [] }
 	},
 	setup(__props) {
-		const { t } = useI18n({ useScope: "parent" });
-		const translatedXLabels = computed(() => __props.xLabels.map((label) => t(String(label))));
-		const translatedYLabels = computed(() => __props.yLabels.map((label) => t(String(label))));
-		const echartsSeries = computed(() => __props.series.map((s) => toHeatmapSeries({
-			...s,
-			name: s.name ? t(String(s.name)) : void 0
-		}, __props.xLabels, __props.yLabels)));
-		const mergedOptions = computed(() => {
-			return merge({}, {
-				...buildCartesianBaseOptions({
-					yAxisType: "category",
-					xAxisLabels: __props.xAxisLabels,
-					yAxisLabels: __props.yAxisLabels
-				}),
-				color: [ln],
-				visualMap: {
-					show: false,
-					min: 0,
-					max: 100,
-					inRange: { color: [
-						an,
-						sn,
-						ln,
-						dn
-					] }
-				},
-				xAxis: {
-					type: "category",
-					data: translatedXLabels.value,
-					axisLabel: {
-						show: __props.xAxisLabels,
-						color: "var(--foreground-secondary)"
-					},
-					axisLine: { show: false },
-					axisTick: { show: false },
-					splitLine: { show: false }
-				},
-				yAxis: {
-					type: "category",
-					data: translatedYLabels.value,
-					axisLabel: {
-						show: __props.yAxisLabels,
-						color: "var(--foreground-secondary)"
-					},
-					axisLine: { show: false },
-					axisTick: { show: false },
-					splitLine: { show: false }
-				}
-			}, __props.tooltip ? buildHeatmapTooltipOptions(t, Chart_module_default, () => __props.series) : { tooltip: { show: false } }, __props.advancedOptions, { series: echartsSeries.value });
-		});
+		const { t } = useChartBaseSetup();
+		const mergedOptions = computed(() => buildHeatmapChartOptions({
+			series: __props.series,
+			xLabels: __props.xLabels,
+			yLabels: __props.yLabels,
+			t,
+			styles: Chart_module_default,
+			tooltip: __props.tooltip,
+			xAxisLabels: __props.xAxisLabels,
+			yAxisLabels: __props.yAxisLabels,
+			advancedOptions: __props.advancedOptions
+		}));
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(FluxStatisticsChart_default, { options: mergedOptions.value }, null, 8, ["options"]);
 		};
@@ -11611,7 +12014,7 @@ var FluxStatisticsHeatmapChart_default = /* @__PURE__ */ defineComponent({
 var FluxStatisticsLineChart_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxStatisticsLineChart",
 	props: {
-		advancedOptions: { default: () => ({}) },
+		advancedOptions: {},
 		labels: {},
 		series: {},
 		splitLines: {
@@ -11634,25 +12037,19 @@ var FluxStatisticsLineChart_default = /* @__PURE__ */ defineComponent({
 	},
 	setup(__props) {
 		const { t, palette } = useChartSeriesSetup(() => __props.series);
-		const xLabels = computed(() => __props.labels ?? extractLabels(__props.series) ?? cartesianFallbackLabels(__props.series));
-		const echartsSeries = computed(() => __props.series.map((s, i) => toLineSeries({
-			...s,
-			name: s.name ? t(String(s.name)) : void 0
-		}, palette.value[i])));
-		const mergedOptions = computed(() => {
-			return merge({}, buildCartesianBaseOptions({
-				xAxisLabels: __props.xAxisLabels,
-				yAxisLabels: __props.yAxisLabels,
-				splitLines: __props.splitLines
-			}), { xAxis: {
-				type: "category",
-				data: xLabels.value,
-				boundaryGap: false
-			} }, __props.tooltip ? buildCartesianTooltipOptions(t, Chart_module_default, () => __props.series.map((s) => s.icon), __props.tooltipValueFormatter) : { tooltip: { show: false } }, __props.advancedOptions, {
-				series: echartsSeries.value,
-				color: palette.value
-			});
-		});
+		const mergedOptions = computed(() => buildLineChartOptions({
+			series: __props.series,
+			labels: __props.labels,
+			palette: palette.value,
+			t,
+			styles: Chart_module_default,
+			tooltip: __props.tooltip,
+			tooltipValueFormatter: __props.tooltipValueFormatter,
+			xAxisLabels: __props.xAxisLabels,
+			yAxisLabels: __props.yAxisLabels,
+			splitLines: __props.splitLines,
+			advancedOptions: __props.advancedOptions
+		}));
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(FluxStatisticsChart_default, {
 				ref: "chartRef",
@@ -11708,6 +12105,7 @@ var FluxStatisticsKpi_default = /* @__PURE__ */ defineComponent({
 });
 var Legend_module_default = {
 	statisticsLegend: `statistics-legend`,
+	statisticsChartPaneBody: `statistics-chart-pane-body`,
 	statisticsLegendItem: `statistics-legend-item`,
 	isHovered: `is-hovered`,
 	statisticsLegendItemColor: `statistics-legend-item-color`,
@@ -11951,7 +12349,7 @@ var FluxStatisticsMetric_default = /* @__PURE__ */ defineComponent({
 var FluxStatisticsMixedChart_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxStatisticsMixedChart",
 	props: {
-		advancedOptions: { default: () => ({}) },
+		advancedOptions: {},
 		labels: {},
 		series: {},
 		splitLines: {
@@ -11974,25 +12372,19 @@ var FluxStatisticsMixedChart_default = /* @__PURE__ */ defineComponent({
 	},
 	setup(__props) {
 		const { t, palette } = useChartSeriesSetup(() => __props.series);
-		const xLabels = computed(() => __props.labels ?? extractLabels(__props.series) ?? cartesianFallbackLabels(__props.series));
-		const echartsSeries = computed(() => __props.series.map((s, i) => toMixedSeries({
-			...s,
-			name: s.name ? t(String(s.name)) : void 0
-		}, palette.value[i])));
-		const mergedOptions = computed(() => {
-			return merge({}, buildCartesianBaseOptions({
-				tooltipTrigger: "axis",
-				xAxisLabels: __props.xAxisLabels,
-				yAxisLabels: __props.yAxisLabels,
-				splitLines: __props.splitLines
-			}), { xAxis: {
-				type: "category",
-				data: xLabels.value
-			} }, __props.tooltip ? buildCartesianTooltipOptions(t, Chart_module_default, () => __props.series.map((s) => s.icon), __props.tooltipValueFormatter) : { tooltip: { show: false } }, __props.advancedOptions, {
-				series: echartsSeries.value,
-				color: palette.value
-			});
-		});
+		const mergedOptions = computed(() => buildMixedChartOptions({
+			series: __props.series,
+			labels: __props.labels,
+			palette: palette.value,
+			t,
+			styles: Chart_module_default,
+			tooltip: __props.tooltip,
+			tooltipValueFormatter: __props.tooltipValueFormatter,
+			xAxisLabels: __props.xAxisLabels,
+			yAxisLabels: __props.yAxisLabels,
+			splitLines: __props.splitLines,
+			advancedOptions: __props.advancedOptions
+		}));
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(FluxStatisticsChart_default, {
 				ref: "chartRef",
@@ -12001,12 +12393,83 @@ var FluxStatisticsMixedChart_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
+var PercentageBar_module_default = {
+	statisticsPercentageBar: `statistics-percentage-bar`,
+	statisticsPercentageBarTrack: `statistics-percentage-bar-track`,
+	statisticsPercentageBarSegment: `statistics-percentage-bar-segment`,
+	isHovered: `is-hovered`,
+	isHoverActive: `is-hover-active`,
+	statisticsPercentageBarTooltip: `statistics-percentage-bar-tooltip`
+};
+//#endregion
+//#region src/component/FluxStatisticsPercentageBar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["onMouseenter"];
+//#endregion
+//#region src/component/FluxStatisticsPercentageBar.vue
+var FluxStatisticsPercentageBar_default = /* @__PURE__ */ defineComponent({
+	__name: "FluxStatisticsPercentageBar",
+	props: { items: {} },
+	setup(__props) {
+		const SEMANTIC_COLORS = [
+			"gray",
+			"primary",
+			"danger",
+			"info",
+			"success",
+			"warning"
+		];
+		const props = __props;
+		const legendContext = inject(FluxStatisticsChartLegendInjectionKey, null);
+		const legendItems = computed(() => props.items.map((item) => ({
+			color: resolveColor(item.color),
+			icon: item.icon,
+			label: item.label,
+			value: item.displayValue
+		})));
+		const hoveredIndex = computed(() => legendContext?.hoveredIndex.value ?? null);
+		watchEffect(() => {
+			if (legendContext) legendContext.items.value = legendItems.value;
+		});
+		function resolveColor(color) {
+			if (!color) return;
+			if (SEMANTIC_COLORS.includes(color)) return `var(--${color}-600)`;
+			return color;
+		}
+		function onSegmentEnter(index) {
+			if (legendContext) legendContext.hoveredIndex.value = index;
+		}
+		function onSegmentLeave() {
+			if (legendContext) legendContext.hoveredIndex.value = null;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(PercentageBar_module_default).statisticsPercentageBar) }, [createElementVNode("div", { class: normalizeClass(unref(clsx)(unref(PercentageBar_module_default).statisticsPercentageBarTrack, hoveredIndex.value !== null && unref(PercentageBar_module_default).isHoverActive)) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, index) => {
+				return openBlock(), createBlock(unref(FluxTooltip), { key: index }, {
+					content: withCtx(() => [createElementVNode("div", { class: normalizeClass(unref(PercentageBar_module_default).statisticsPercentageBarTooltip) }, [item.icon ? (openBlock(), createBlock(unref(FluxIcon), {
+						key: 0,
+						name: item.icon,
+						size: 16
+					}, null, 8, ["name"])) : createCommentVNode("", true), createElementVNode("span", null, toDisplayString(unref(m)(item.value)) + " " + toDisplayString(item.label), 1)], 2)]),
+					default: withCtx(() => [createElementVNode("div", {
+						class: normalizeClass(unref(clsx)(unref(PercentageBar_module_default).statisticsPercentageBarSegment, hoveredIndex.value === index && unref(PercentageBar_module_default).isHovered)),
+						style: normalizeStyle({
+							backgroundColor: resolveColor(item.color),
+							flexGrow: item.value
+						}),
+						onMouseenter: ($event) => onSegmentEnter(index),
+						onMouseleave: onSegmentLeave
+					}, null, 46, _hoisted_1)]),
+					_: 2
+				}, 1024);
+			}), 128))], 2)], 2);
+		};
+	}
+});
 //#endregion
 //#region src/component/FluxStatisticsPieChart.vue
 var FluxStatisticsPieChart_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxStatisticsPieChart",
 	props: {
-		advancedOptions: { default: () => ({}) },
+		advancedOptions: {},
 		slices: {},
 		title: {},
 		tooltip: {
@@ -12016,19 +12479,17 @@ var FluxStatisticsPieChart_default = /* @__PURE__ */ defineComponent({
 		tooltipValueFormatter: { type: Function }
 	},
 	setup(__props) {
-		const { t, palette, tooltipItems } = usePieSlicesSetup(() => __props.slices);
-		const echartsSeries = computed(() => [toPieSeries(__props.slices, palette.value)]);
-		const tooltipOptions = computed(() => {
-			if (!__props.tooltip) return { tooltip: { show: false } };
-			return { tooltip: {
-				show: true,
-				trigger: "item",
-				formatter: buildSharedItemTooltipFormatter(t, Chart_module_default, () => tooltipItems.value, () => __props.title, __props.tooltipValueFormatter)
-			} };
-		});
-		const mergedOptions = computed(() => merge({}, POLAR_BASE_OPTIONS, tooltipOptions.value, __props.advancedOptions, {
-			series: echartsSeries.value,
-			color: palette.value
+		const { t, palette, tooltipItems } = useChartSlicesSetup(() => __props.slices);
+		const mergedOptions = computed(() => buildPieChartOptions({
+			slices: __props.slices,
+			palette: palette.value,
+			tooltipItems: tooltipItems.value,
+			title: __props.title,
+			t,
+			styles: Chart_module_default,
+			tooltip: __props.tooltip,
+			tooltipValueFormatter: __props.tooltipValueFormatter,
+			advancedOptions: __props.advancedOptions
 		}));
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(FluxStatisticsChart_default, {
@@ -12043,7 +12504,7 @@ var FluxStatisticsPieChart_default = /* @__PURE__ */ defineComponent({
 var FluxStatisticsPolarAreaChart_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxStatisticsPolarAreaChart",
 	props: {
-		advancedOptions: { default: () => ({}) },
+		advancedOptions: {},
 		slices: {},
 		title: {},
 		tooltip: {
@@ -12053,19 +12514,17 @@ var FluxStatisticsPolarAreaChart_default = /* @__PURE__ */ defineComponent({
 		tooltipValueFormatter: { type: Function }
 	},
 	setup(__props) {
-		const { t, palette, tooltipItems } = usePieSlicesSetup(() => __props.slices);
-		const echartsSeries = computed(() => [toPolarAreaSeries(__props.slices, palette.value)]);
-		const tooltipOptions = computed(() => {
-			if (!__props.tooltip) return { tooltip: { show: false } };
-			return { tooltip: {
-				show: true,
-				trigger: "item",
-				formatter: buildSharedItemTooltipFormatter(t, Chart_module_default, () => tooltipItems.value, () => __props.title, __props.tooltipValueFormatter)
-			} };
-		});
-		const mergedOptions = computed(() => merge({}, POLAR_BASE_OPTIONS, tooltipOptions.value, __props.advancedOptions, {
-			series: echartsSeries.value,
-			color: palette.value
+		const { t, palette, tooltipItems } = useChartSlicesSetup(() => __props.slices);
+		const mergedOptions = computed(() => buildPolarAreaChartOptions({
+			slices: __props.slices,
+			palette: palette.value,
+			tooltipItems: tooltipItems.value,
+			title: __props.title,
+			t,
+			styles: Chart_module_default,
+			tooltip: __props.tooltip,
+			tooltipValueFormatter: __props.tooltipValueFormatter,
+			advancedOptions: __props.advancedOptions
 		}));
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(FluxStatisticsChart_default, {
@@ -12080,7 +12539,7 @@ var FluxStatisticsPolarAreaChart_default = /* @__PURE__ */ defineComponent({
 var FluxStatisticsRadarChart_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxStatisticsRadarChart",
 	props: {
-		advancedOptions: { default: () => ({}) },
+		advancedOptions: {},
 		indicators: {},
 		series: {},
 		tooltip: {
@@ -12090,60 +12549,14 @@ var FluxStatisticsRadarChart_default = /* @__PURE__ */ defineComponent({
 	},
 	setup(__props) {
 		const { t, palette } = useChartSeriesSetup(() => __props.series, { mode: "data" });
-		const echartsSeries = computed(() => [toRadarSeries(__props.series.map((s) => ({
-			...s,
-			name: s.name ? t(String(s.name)) : void 0
-		})), palette.value)]);
-		const radarConfig = computed(() => ({ radar: {
-			indicator: __props.indicators.map((i) => ({
-				name: t(String(i.name)),
-				max: i.max
-			})),
-			splitLine: { lineStyle: { color: "var(--gray-200)" } },
-			splitArea: { show: false },
-			axisLine: { lineStyle: { color: "var(--gray-200)" } },
-			axisName: {
-				color: "var(--foreground-secondary)",
-				fontSize: 12,
-				fontWeight: 500
-			}
-		} }));
-		const tooltipFormatter = (params) => {
-			const param = Array.isArray(params) ? params[0] : params;
-			if (!param) return "";
-			const ringIndex = param.dataIndex ?? 0;
-			const ring = __props.series[ringIndex];
-			if (!ring) return "";
-			const styles = Chart_module_default;
-			const color = palette.value[ringIndex % palette.value.length];
-			const title = ring.name ? t(String(ring.name)) : "";
-			const tooltipItems = __props.indicators.map((indicator, idx) => ({
-				name: indicator.name,
-				value: ring.values[idx] ?? "",
-				color
-			}));
-			const titleHtml = title ? `<div class="${styles.statisticsChartTooltipTitle}">${title}</div>` : "";
-			const body = tooltipItems.map((item) => {
-				const translatedName = item.name ? t(String(item.name)) : "";
-				return `
-                <div class="${styles.statisticsChartTooltipSeriesColor} ${styles.isActive}" style="background: ${item.color}"></div>
-                <div class="${styles.statisticsChartTooltipSeriesName} ${styles.isActive}">${translatedName}</div>
-                <div class="${styles.statisticsChartTooltipSeriesValue} ${styles.isActive}">${item.value}</div>
-            `;
-			}).join("");
-			return `${titleHtml}<div class="${styles.statisticsChartTooltipBody}">${body}</div>`;
-		};
-		const tooltipOptions = computed(() => {
-			if (!__props.tooltip) return { tooltip: { show: false } };
-			return { tooltip: {
-				show: true,
-				trigger: "item",
-				formatter: tooltipFormatter
-			} };
-		});
-		const mergedOptions = computed(() => merge({}, POLAR_BASE_OPTIONS, radarConfig.value, tooltipOptions.value, __props.advancedOptions, {
-			series: echartsSeries.value,
-			color: palette.value
+		const mergedOptions = computed(() => buildRadarChartOptions({
+			series: __props.series,
+			indicators: __props.indicators,
+			palette: palette.value,
+			t,
+			styles: Chart_module_default,
+			tooltip: __props.tooltip,
+			advancedOptions: __props.advancedOptions
 		}));
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(FluxStatisticsChart_default, {
@@ -12158,7 +12571,7 @@ var FluxStatisticsRadarChart_default = /* @__PURE__ */ defineComponent({
 var FluxStatisticsRadialBar_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxStatisticsRadialBar",
 	props: {
-		advancedOptions: { default: () => ({}) },
+		advancedOptions: {},
 		series: {},
 		tooltip: {
 			type: Boolean,
@@ -12166,22 +12579,15 @@ var FluxStatisticsRadialBar_default = /* @__PURE__ */ defineComponent({
 		}
 	},
 	setup(__props) {
-		const { t, palette } = useChartSeriesSetup(() => __props.series, { getLegendItem: (s, color, _, translate) => ({
-			color,
-			icon: s.icon,
-			label: s.name ? translate(String(s.name)) : "",
-			value: s.value
-		}) });
-		const echartsSeries = computed(() => __props.series.map((s, i) => toGaugeSeries({
-			...s,
-			name: s.name ? t(String(s.name)) : s.name
-		}, palette.value[i], i, __props.series.length)));
-		const mergedOptions = computed(() => {
-			return merge({}, POLAR_BASE_OPTIONS, __props.tooltip ? buildGaugeTooltipOptions(t, Chart_module_default, () => __props.series, () => palette.value) : { tooltip: { show: false } }, __props.advancedOptions, {
-				series: echartsSeries.value,
-				color: palette.value
-			});
-		});
+		const { t, palette } = useChartSeriesSetup(() => __props.series, { getLegendItem: gaugeLegendItemBuilder });
+		const mergedOptions = computed(() => buildGaugeChartOptions({
+			series: __props.series,
+			palette: palette.value,
+			t,
+			styles: Chart_module_default,
+			tooltip: __props.tooltip,
+			advancedOptions: __props.advancedOptions
+		}));
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(FluxStatisticsChart_default, {
 				ref: "chartRef",
@@ -12195,7 +12601,7 @@ var FluxStatisticsRadialBar_default = /* @__PURE__ */ defineComponent({
 var FluxStatisticsScatterChart_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxStatisticsScatterChart",
 	props: {
-		advancedOptions: { default: () => ({}) },
+		advancedOptions: {},
 		series: {},
 		splitLines: {
 			type: Boolean,
@@ -12216,23 +12622,17 @@ var FluxStatisticsScatterChart_default = /* @__PURE__ */ defineComponent({
 	},
 	setup(__props) {
 		const { t, palette } = useChartSeriesSetup(() => __props.series);
-		const echartsSeries = computed(() => __props.series.map((s, i) => toScatterSeries({
-			...s,
-			name: s.name ? t(String(s.name)) : void 0
-		}, palette.value[i])));
-		const mergedOptions = computed(() => {
-			return merge({}, buildCartesianBaseOptions({
-				xAxisType: "value",
-				yAxisType: "value",
-				scale: true,
-				xAxisLabels: __props.xAxisLabels,
-				yAxisLabels: __props.yAxisLabels,
-				splitLines: __props.splitLines
-			}), __props.tooltip ? buildCartesianTooltipOptions(t, Chart_module_default, () => __props.series.map((s) => s.icon)) : { tooltip: { show: false } }, __props.advancedOptions, {
-				series: echartsSeries.value,
-				color: palette.value
-			});
-		});
+		const mergedOptions = computed(() => buildScatterChartOptions({
+			series: __props.series,
+			palette: palette.value,
+			t,
+			styles: Chart_module_default,
+			tooltip: __props.tooltip,
+			xAxisLabels: __props.xAxisLabels,
+			yAxisLabels: __props.yAxisLabels,
+			splitLines: __props.splitLines,
+			advancedOptions: __props.advancedOptions
+		}));
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(FluxStatisticsChart_default, {
 				ref: "chartRef",
@@ -12293,7 +12693,7 @@ var FluxStatisticsSparkline_default = /* @__PURE__ */ defineComponent({
 var FluxStatisticsTreemapChart_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxStatisticsTreemapChart",
 	props: {
-		advancedOptions: { default: () => ({}) },
+		advancedOptions: {},
 		nodes: {},
 		tooltip: {
 			type: Boolean,
@@ -12301,11 +12701,14 @@ var FluxStatisticsTreemapChart_default = /* @__PURE__ */ defineComponent({
 		}
 	},
 	setup(__props) {
-		const { t } = useI18n({ useScope: "parent" });
-		const echartsSeries = computed(() => [toTreemapSeries(__props.nodes, CHART_DEFAULT_COLORS)]);
-		const mergedOptions = computed(() => {
-			return merge({}, POLAR_BASE_OPTIONS, __props.tooltip ? buildTreemapTooltipOptions(t, Chart_module_default) : { tooltip: { show: false } }, __props.advancedOptions, { series: echartsSeries.value });
-		});
+		const { t } = useChartBaseSetup();
+		const mergedOptions = computed(() => buildTreemapChartOptions({
+			nodes: __props.nodes,
+			t,
+			styles: Chart_module_default,
+			tooltip: __props.tooltip,
+			advancedOptions: __props.advancedOptions
+		}));
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(FluxStatisticsChart_default, { options: mergedOptions.value }, null, 8, ["options"]);
 		};
@@ -12339,6 +12742,6 @@ var CHART_COLORFUL_COLORS = [
 	gr
 ];
 //#endregion
-export { CHART_COLORFUL_COLORS, CHART_COLORS, FluxStatisticsAreaChart_default as FluxStatisticsAreaChart, FluxStatisticsBarChart_default as FluxStatisticsBarChart, FluxStatisticsBase_default as FluxStatisticsBase, FluxStatisticsBoxPlotChart_default as FluxStatisticsBoxPlotChart, FluxStatisticsBubbleChart_default as FluxStatisticsBubbleChart, FluxStatisticsCandlestickChart_default as FluxStatisticsCandlestickChart, FluxStatisticsChange_default as FluxStatisticsChange, FluxStatisticsChart_default as FluxStatisticsChart, FluxStatisticsChartLegendInjectionKey, FluxStatisticsChartPane_default as FluxStatisticsChartPane, FluxStatisticsComparison_default as FluxStatisticsComparison, FluxStatisticsDetailsTable_default as FluxStatisticsDetailsTable, FluxStatisticsDetailsTableRow_default as FluxStatisticsDetailsTableRow, FluxStatisticsDonutChart_default as FluxStatisticsDonutChart, FluxStatisticsEmpty_default as FluxStatisticsEmpty, FluxStatisticsGrid_default as FluxStatisticsGrid, FluxStatisticsHeatmapChart_default as FluxStatisticsHeatmapChart, FluxStatisticsKpi_default as FluxStatisticsKpi, FluxStatisticsLegend_default as FluxStatisticsLegend, FluxStatisticsLegendItem_default as FluxStatisticsLegendItem, FluxStatisticsLineChart_default as FluxStatisticsLineChart, FluxStatisticsMeter_default as FluxStatisticsMeter, FluxStatisticsMetric_default as FluxStatisticsMetric, FluxStatisticsMixedChart_default as FluxStatisticsMixedChart, FluxStatisticsPieChart_default as FluxStatisticsPieChart, FluxStatisticsPolarAreaChart_default as FluxStatisticsPolarAreaChart, FluxStatisticsRadarChart_default as FluxStatisticsRadarChart, FluxStatisticsRadialBar_default as FluxStatisticsRadialBar, FluxStatisticsScatterChart_default as FluxStatisticsScatterChart, FluxStatisticsSparkline_default as FluxStatisticsSparkline, FluxStatisticsTreemapChart_default as FluxStatisticsTreemapChart, createChartLegendContext, useChartHoverSync, useChartSeriesSetup, useECharts, usePieSlicesSetup };
+export { CHART_COLORFUL_COLORS, CHART_COLORS, FluxStatisticsAreaChart_default as FluxStatisticsAreaChart, FluxStatisticsBarChart_default as FluxStatisticsBarChart, FluxStatisticsBase_default as FluxStatisticsBase, FluxStatisticsBoxPlotChart_default as FluxStatisticsBoxPlotChart, FluxStatisticsBubbleChart_default as FluxStatisticsBubbleChart, FluxStatisticsCandlestickChart_default as FluxStatisticsCandlestickChart, FluxStatisticsChange_default as FluxStatisticsChange, FluxStatisticsChart_default as FluxStatisticsChart, FluxStatisticsChartLegendInjectionKey, FluxStatisticsChartPane_default as FluxStatisticsChartPane, FluxStatisticsComparison_default as FluxStatisticsComparison, FluxStatisticsDetailsTable_default as FluxStatisticsDetailsTable, FluxStatisticsDetailsTableRow_default as FluxStatisticsDetailsTableRow, FluxStatisticsDonutChart_default as FluxStatisticsDonutChart, FluxStatisticsEmpty_default as FluxStatisticsEmpty, FluxStatisticsGrid_default as FluxStatisticsGrid, FluxStatisticsHeatmapChart_default as FluxStatisticsHeatmapChart, FluxStatisticsKpi_default as FluxStatisticsKpi, FluxStatisticsLegend_default as FluxStatisticsLegend, FluxStatisticsLegendItem_default as FluxStatisticsLegendItem, FluxStatisticsLegendScope_default as FluxStatisticsLegendScope, FluxStatisticsLineChart_default as FluxStatisticsLineChart, FluxStatisticsMeter_default as FluxStatisticsMeter, FluxStatisticsMetric_default as FluxStatisticsMetric, FluxStatisticsMixedChart_default as FluxStatisticsMixedChart, FluxStatisticsPercentageBar_default as FluxStatisticsPercentageBar, FluxStatisticsPieChart_default as FluxStatisticsPieChart, FluxStatisticsPolarAreaChart_default as FluxStatisticsPolarAreaChart, FluxStatisticsRadarChart_default as FluxStatisticsRadarChart, FluxStatisticsRadialBar_default as FluxStatisticsRadialBar, FluxStatisticsScatterChart_default as FluxStatisticsScatterChart, FluxStatisticsSparkline_default as FluxStatisticsSparkline, FluxStatisticsTreemapChart_default as FluxStatisticsTreemapChart, createChartLegendContext, useChartBaseSetup, useChartHoverSync, useChartSeriesSetup, useChartSlicesSetup, useECharts };
 
 //# sourceMappingURL=index.js.map