@mantine-vue/charts 1.1.1

package/esm/index.mjs

@@ -0,0 +1,780 @@
+import { computed, defineComponent, h, ref } from "vue";
+import VChart from "vue-echarts";
+import { use } from "echarts/core";
+import { BarChart as BarChart$1, EffectScatterChart, FunnelChart as FunnelChart$1, GaugeChart, GraphChart, HeatmapChart, LineChart as LineChart$1, PieChart as PieChart$1, RadarChart as RadarChart$1, SankeyChart as SankeyChart$1, ScatterChart as ScatterChart$1, TreemapChart } from "echarts/charts";
+import { AriaComponent, CalendarComponent, DataZoomComponent, DatasetComponent, GraphicComponent, GridComponent, LegendComponent, MarkLineComponent, PolarComponent, RadarComponent, TitleComponent, ToolboxComponent, TooltipComponent, TransformComponent, VisualMapComponent } from "echarts/components";
+import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
+//#region src/internal/echarts.ts
+var registered = false;
+function registerECharts() {
+	if (registered) return;
+	use([
+		BarChart$1,
+		EffectScatterChart,
+		FunnelChart$1,
+		GaugeChart,
+		GraphChart,
+		HeatmapChart,
+		LineChart$1,
+		PieChart$1,
+		RadarChart$1,
+		SankeyChart$1,
+		ScatterChart$1,
+		TreemapChart,
+		AriaComponent,
+		CalendarComponent,
+		DatasetComponent,
+		DataZoomComponent,
+		GraphicComponent,
+		GridComponent,
+		LegendComponent,
+		MarkLineComponent,
+		PolarComponent,
+		RadarComponent,
+		TitleComponent,
+		ToolboxComponent,
+		TooltipComponent,
+		TransformComponent,
+		VisualMapComponent,
+		CanvasRenderer,
+		SVGRenderer
+	]);
+	registered = true;
+}
+//#endregion
+//#region src/internal/component.ts
+registerECharts();
+function createChartComponent(name, buildOption) {
+	return defineComponent({
+		name: `Mantine${name}`,
+		inheritAttrs: false,
+		props: {
+			option: Object,
+			height: {
+				type: [Number, String],
+				default: 300
+			},
+			width: {
+				type: [Number, String],
+				default: "100%"
+			},
+			loading: Boolean,
+			autoresize: {
+				type: Boolean,
+				default: true
+			},
+			renderer: {
+				type: String,
+				default: "canvas"
+			},
+			initOptions: Object
+		},
+		emits: [
+			"click",
+			"dblclick",
+			"mouseover",
+			"mouseout",
+			"legendselectchanged",
+			"datazoom"
+		],
+		setup(props, { attrs, emit, expose }) {
+			const chart = ref();
+			const option = computed(() => ({
+				...buildOption(attrs),
+				...props.option
+			}));
+			expose({
+				getEchartsInstance: () => chart.value?.chart,
+				resize: () => chart.value?.resize(),
+				setOption: (next) => chart.value?.setOption(next)
+			});
+			const size = (value) => typeof value === "number" ? `${value}px` : value;
+			const rootAttributes = computed(() => Object.fromEntries(Object.entries(attrs).filter(([key]) => [
+				"id",
+				"dir",
+				"role",
+				"tabindex",
+				"title"
+			].includes(key) || key.startsWith("aria-") || key.startsWith("data-") && key !== "data")));
+			return () => h("div", {
+				...rootAttributes.value,
+				class: [
+					"mantine-Chart-root",
+					`mantine-${name}-root`,
+					attrs.class
+				],
+				style: [{
+					width: size(props.width),
+					height: size(props.height)
+				}, attrs.style]
+			}, [h(VChart, {
+				ref: chart,
+				option: option.value,
+				autoresize: props.autoresize,
+				loading: props.loading,
+				initOptions: {
+					...props.initOptions,
+					renderer: props.renderer
+				},
+				class: "mantine-Chart-container",
+				onClick: (event) => emit("click", event),
+				onDblclick: (event) => emit("dblclick", event),
+				onMouseover: (event) => emit("mouseover", event),
+				onMouseout: (event) => emit("mouseout", event),
+				onLegendselectchanged: (event) => emit("legendselectchanged", event),
+				onDatazoom: (event) => emit("datazoom", event)
+			})]);
+		}
+	});
+}
+//#endregion
+//#region src/internal/colors.ts
+var shadeMap = {
+	blue: [
+		"#e7f5ff",
+		"#d0ebff",
+		"#a5d8ff",
+		"#74c0fc",
+		"#4dabf7",
+		"#339af0",
+		"#228be6",
+		"#1c7ed6",
+		"#1971c2",
+		"#1864ab"
+	],
+	cyan: [
+		"#e3fafc",
+		"#c5f6fa",
+		"#99e9f2",
+		"#66d9e8",
+		"#3bc9db",
+		"#22b8cf",
+		"#15aabf",
+		"#1098ad",
+		"#0c8599",
+		"#0b7285"
+	],
+	green: [
+		"#ebfbee",
+		"#d3f9d8",
+		"#b2f2bb",
+		"#8ce99a",
+		"#69db7c",
+		"#51cf66",
+		"#40c057",
+		"#37b24d",
+		"#2f9e44",
+		"#2b8a3e"
+	],
+	grape: [
+		"#f8f0fc",
+		"#f3d9fa",
+		"#eebefa",
+		"#e599f7",
+		"#da77f2",
+		"#cc5de8",
+		"#be4bdb",
+		"#ae3ec9",
+		"#9c36b5",
+		"#862e9c"
+	],
+	gray: [
+		"#f8f9fa",
+		"#f1f3f5",
+		"#e9ecef",
+		"#dee2e6",
+		"#ced4da",
+		"#adb5bd",
+		"#868e96",
+		"#495057",
+		"#343a40",
+		"#212529"
+	],
+	orange: [
+		"#fff4e6",
+		"#ffe8cc",
+		"#ffd8a8",
+		"#ffc078",
+		"#ffa94d",
+		"#ff922b",
+		"#fd7e14",
+		"#f76707",
+		"#e8590c",
+		"#d9480f"
+	],
+	pink: [
+		"#fff0f6",
+		"#ffdeeb",
+		"#fcc2d7",
+		"#faa2c1",
+		"#f783ac",
+		"#f06595",
+		"#e64980",
+		"#d6336c",
+		"#c2255c",
+		"#a61e4d"
+	],
+	red: [
+		"#fff5f5",
+		"#ffe3e3",
+		"#ffc9c9",
+		"#ffa8a8",
+		"#ff8787",
+		"#ff6b6b",
+		"#fa5252",
+		"#f03e3e",
+		"#e03131",
+		"#c92a2a"
+	],
+	teal: [
+		"#e6fcf5",
+		"#c3fae8",
+		"#96f2d7",
+		"#63e6be",
+		"#38d9a9",
+		"#20c997",
+		"#12b886",
+		"#0ca678",
+		"#099268",
+		"#087f5b"
+	],
+	violet: [
+		"#f3f0ff",
+		"#e5dbff",
+		"#d0bfff",
+		"#b197fc",
+		"#9775fa",
+		"#845ef7",
+		"#7950f2",
+		"#7048e8",
+		"#6741d9",
+		"#5f3dc4"
+	],
+	yellow: [
+		"#fff9db",
+		"#fff3bf",
+		"#ffec99",
+		"#ffe066",
+		"#ffd43b",
+		"#fcc419",
+		"#fab005",
+		"#f59f00",
+		"#f08c00",
+		"#e67700"
+	]
+};
+function resolveColor(color, fallback = "#228be6") {
+	if (typeof color !== "string" || !color) return fallback;
+	const [name, rawShade] = color.split(".");
+	const shade = Number(rawShade ?? 6);
+	return shadeMap[name]?.[Number.isInteger(shade) ? shade : 6] ?? color;
+}
+//#endregion
+//#region src/internal/options.ts
+var bool = (value, fallback) => typeof value === "boolean" ? value : fallback;
+var num = (value, fallback) => typeof value === "number" ? value : fallback;
+var obj = (value) => value && typeof value === "object" ? value : {};
+var list = (value) => Array.isArray(value) ? value : [];
+var formatter = (props) => typeof props.valueFormatter === "function" ? props.valueFormatter : void 0;
+function tooltip(props) {
+	if (!bool(props.withTooltip, true)) return { show: false };
+	const format = formatter(props);
+	return {
+		trigger: "axis",
+		transitionDuration: num(props.tooltipAnimationDuration, 0) / 1e3,
+		valueFormatter: format ? (value) => format(Number(value)) : void 0,
+		...obj(props.tooltipProps)
+	};
+}
+function markLine(referenceLines) {
+	if (!referenceLines?.length) return void 0;
+	return {
+		silent: true,
+		symbol: "none",
+		data: referenceLines.map((line) => ({
+			xAxis: line.x,
+			yAxis: line.y,
+			label: typeof line.label === "string" ? { formatter: line.label } : line.label,
+			lineStyle: {
+				color: resolveColor(line.color, "#868e96"),
+				type: line.strokeDasharray ? "dashed" : "solid"
+			}
+		}))
+	};
+}
+function cartesianOption(props, kind) {
+	const data = list(props.data);
+	const series = list(props.series);
+	const dataKey = String(props.dataKey ?? "name");
+	const horizontal = props.orientation !== "vertical";
+	const chartType = String(props.type ?? "default");
+	const category = data.map((item) => item[dataKey]);
+	const commonAxis = { axisLabel: { color: resolveColor(props.textColor, "#868e96") } };
+	const categoryAxis = {
+		type: "category",
+		data: category,
+		...commonAxis
+	};
+	const valueAxis = {
+		type: "value",
+		name: props.yAxisLabel,
+		...commonAxis
+	};
+	const mapped = series.map((item, index) => {
+		const itemKind = kind === "composite" ? item.type ?? "line" : kind === "area" ? "line" : kind;
+		const color = resolveColor(item.color, resolveColor(`blue.${6 + index % 3}`));
+		const stack = chartType === "stacked" || chartType === "percent" ? "stack" : item.stackId;
+		const base = {
+			name: item.label ?? item.name,
+			data: data.map((entry) => entry[item.name]),
+			yAxisIndex: item.yAxisId ? 1 : 0,
+			stack,
+			markLine: index === 0 ? markLine(props.referenceLines) : void 0
+		};
+		if (itemKind === "bar") return {
+			...base,
+			type: "bar",
+			barMaxWidth: props.maxBarWidth,
+			barMinHeight: num(props.minBarSize, 0),
+			itemStyle: {
+				color,
+				opacity: num(props.fillOpacity, 1)
+			},
+			label: {
+				show: bool(props.withBarValueLabel, false),
+				position: horizontal ? "top" : "right"
+			}
+		};
+		return {
+			...base,
+			type: "line",
+			smooth: ![
+				"linear",
+				"step",
+				"stepBefore",
+				"stepAfter"
+			].includes(String(props.curveType ?? item.curveType ?? "monotone")),
+			step: String(props.curveType).startsWith("step") ? "middle" : false,
+			connectNulls: bool(props.connectNulls, true),
+			showSymbol: bool(props.withDots, true),
+			symbolSize: 6,
+			lineStyle: {
+				color,
+				width: num(props.strokeWidth, 2),
+				type: item.strokeDasharray ? "dashed" : "solid"
+			},
+			itemStyle: {
+				color,
+				opacity: num(props.fillOpacity, 1)
+			},
+			areaStyle: itemKind === "area" ? {
+				color,
+				opacity: num(props.fillOpacity, .2)
+			} : void 0,
+			label: {
+				show: bool(props.withPointLabels, false),
+				position: "top"
+			}
+		};
+	});
+	return {
+		animationDurationUpdate: num(props.tooltipAnimationDuration, 0),
+		color: series.map((item) => resolveColor(item.color)),
+		grid: {
+			left: 48,
+			right: bool(props.withRightYAxis, false) ? 48 : 16,
+			top: bool(props.withLegend, false) ? 44 : 16,
+			bottom: 38,
+			containLabel: true,
+			...obj(props.gridProps)
+		},
+		legend: {
+			show: bool(props.withLegend, false),
+			...obj(props.legendProps)
+		},
+		tooltip: tooltip(props),
+		xAxis: horizontal ? {
+			...categoryAxis,
+			show: bool(props.withXAxis, true),
+			name: props.xAxisLabel,
+			...obj(props.xAxisProps)
+		} : {
+			...valueAxis,
+			show: bool(props.withXAxis, true),
+			...obj(props.xAxisProps)
+		},
+		yAxis: horizontal ? [{
+			...valueAxis,
+			show: bool(props.withYAxis, true),
+			...obj(props.yAxisProps)
+		}, {
+			...valueAxis,
+			show: bool(props.withRightYAxis, false),
+			position: "right",
+			name: props.rightYAxisLabel,
+			...obj(props.rightYAxisProps)
+		}] : {
+			...categoryAxis,
+			show: bool(props.withYAxis, true),
+			...obj(props.yAxisProps)
+		},
+		series: mapped
+	};
+}
+function radialOption(props, donut = false) {
+	const data = list(props.data);
+	return {
+		color: data.map((item) => resolveColor(item.color)),
+		legend: {
+			show: bool(props.withLabels, false) || bool(props.withLegend, false),
+			...obj(props.legendProps)
+		},
+		tooltip: {
+			trigger: "item",
+			show: bool(props.withTooltip, true),
+			...obj(props.tooltipProps)
+		},
+		series: [{
+			type: "pie",
+			radius: donut ? [`${num(props.thickness, 40)}%`, "75%"] : ["0%", "75%"],
+			startAngle: num(props.startAngle, 90),
+			minAngle: num(props.minAngle, 0),
+			padAngle: num(props.paddingAngle, 0),
+			roseType: props.type === "pie" ? void 0 : props.type === "donut" ? void 0 : props.type,
+			label: {
+				show: bool(props.withLabels, false),
+				formatter: props.withLabelsLine ? "{b}: {d}%" : "{b}"
+			},
+			labelLine: { show: bool(props.withLabelsLine, false) },
+			data: data.map((item) => ({
+				...item,
+				itemStyle: { color: resolveColor(item.color) }
+			}))
+		}],
+		graphic: props.chartLabel ? [{
+			type: "text",
+			left: "center",
+			top: "middle",
+			style: {
+				text: String(props.chartLabel),
+				fill: resolveColor(props.chartLabelColor, "#212529"),
+				fontSize: num(props.chartLabelFontSize, 18)
+			}
+		}] : void 0
+	};
+}
+function scatterOption(props, bubble = false) {
+	const data = list(props.data);
+	const series = list(props.series);
+	const xKey = String(props.dataKey ?? props.xAxisKey ?? "x");
+	const yKey = String(props.yAxisKey ?? "y");
+	const zKey = String(props.zAxisKey ?? "z");
+	return {
+		grid: {
+			containLabel: true,
+			...obj(props.gridProps)
+		},
+		legend: {
+			show: bool(props.withLegend, false),
+			...obj(props.legendProps)
+		},
+		tooltip: {
+			trigger: "item",
+			show: bool(props.withTooltip, true),
+			...obj(props.tooltipProps)
+		},
+		xAxis: {
+			type: "value",
+			show: bool(props.withXAxis, true),
+			...obj(props.xAxisProps)
+		},
+		yAxis: {
+			type: "value",
+			show: bool(props.withYAxis, true),
+			...obj(props.yAxisProps)
+		},
+		series: (series.length ? series : [{
+			name: String(props.name ?? "value"),
+			color: props.color
+		}]).map((item) => ({
+			type: "scatter",
+			name: item.label ?? item.name,
+			data: data.filter((entry) => !entry.name || entry.name === item.name).map((entry) => [
+				entry[xKey],
+				entry[yKey],
+				entry[zKey],
+				entry
+			]),
+			symbolSize: bubble ? (value) => Math.max(4, Math.sqrt(Number(value[2] ?? 1)) * num(props.range, 4)) : num(props.size, 10),
+			itemStyle: { color: resolveColor(item.color) }
+		}))
+	};
+}
+function sparklineOption(props) {
+	const data = list(props.data);
+	const trend = props.trendColors;
+	const color = trend ? resolveColor(data.at(-1) > data[0] ? trend.positive : data.at(-1) < data[0] ? trend.negative : trend.neutral) : resolveColor(props.color);
+	return {
+		grid: {
+			left: 0,
+			right: 0,
+			top: 1,
+			bottom: 1
+		},
+		xAxis: {
+			type: "category",
+			show: false
+		},
+		yAxis: {
+			type: "value",
+			show: false,
+			scale: true
+		},
+		series: [{
+			type: "line",
+			data,
+			showSymbol: false,
+			connectNulls: bool(props.connectNulls, true),
+			smooth: props.curveType !== "linear",
+			lineStyle: {
+				color,
+				width: num(props.strokeWidth, 2)
+			},
+			areaStyle: bool(props.withGradient, true) ? {
+				color,
+				opacity: num(props.fillOpacity, .6)
+			} : void 0
+		}]
+	};
+}
+function radarOption(props) {
+	const data = list(props.data);
+	const series = list(props.series);
+	const key = String(props.dataKey ?? "name");
+	const max = num(props.maxValue, Math.max(1, ...data.flatMap((row) => series.map((s) => Number(row[s.name] ?? 0)))));
+	return {
+		legend: { show: bool(props.withLegend, false) },
+		tooltip: { show: bool(props.withTooltip, true) },
+		radar: {
+			indicator: data.map((row) => ({
+				name: String(row[key]),
+				max
+			})),
+			shape: props.shape === "circle" ? "circle" : "polygon"
+		},
+		series: [{
+			type: "radar",
+			data: series.map((s) => ({
+				name: s.label ?? s.name,
+				value: data.map((row) => Number(row[s.name] ?? 0)),
+				lineStyle: { color: resolveColor(s.color) },
+				itemStyle: { color: resolveColor(s.color) },
+				areaStyle: bool(props.withPolarGrid, false) ? {} : void 0
+			}))
+		}]
+	};
+}
+function simpleOption(type, props) {
+	const data = list(props.data);
+	if (type === "sankey") return {
+		tooltip: { show: bool(props.withTooltip, true) },
+		series: [{
+			type,
+			data: list(props.nodes ?? data),
+			links: list(props.links),
+			emphasis: { focus: "adjacency" },
+			...obj(props.sankeyProps)
+		}]
+	};
+	return {
+		tooltip: { show: bool(props.withTooltip, true) },
+		legend: { show: bool(props.withLegend, false) },
+		series: [{
+			type,
+			data: data.map((item) => ({
+				...item,
+				itemStyle: { color: resolveColor(item.color) }
+			})),
+			...obj(props[`${type}Props`])
+		}]
+	};
+}
+function radialBarOption(props) {
+	const data = list(props.data);
+	return {
+		legend: { show: bool(props.withLegend, false) },
+		tooltip: { show: bool(props.withTooltip, true) },
+		polar: {},
+		angleAxis: {
+			max: num(props.maxValue, 100),
+			show: false
+		},
+		radiusAxis: {
+			type: "category",
+			data: data.map((i) => i.name),
+			show: bool(props.withLabels, true)
+		},
+		series: [{
+			type: "bar",
+			coordinateSystem: "polar",
+			roundCap: true,
+			data: data.map((i) => ({
+				value: i.value,
+				itemStyle: { color: resolveColor(i.color) }
+			}))
+		}]
+	};
+}
+function heatmapOption(props) {
+	const input = props.data && typeof props.data === "object" ? props.data : {};
+	const data = Object.entries(input).map(([date, value]) => [date, value]);
+	const values = Object.values(input);
+	const date = (value, fallback) => value instanceof Date ? value.toISOString().slice(0, 10) : typeof value === "string" ? value : fallback;
+	const start = date(props.startDate, String(data[0]?.[0] ?? (/* @__PURE__ */ new Date()).toISOString().slice(0, 10)));
+	const end = date(props.endDate, String(data.at(-1)?.[0] ?? start));
+	return {
+		tooltip: { show: bool(props.withTooltip, false) },
+		visualMap: {
+			show: bool(props.withLegend, false),
+			min: props.domain?.[0] ?? Math.min(0, ...values),
+			max: props.domain?.[1] ?? Math.max(1, ...values),
+			inRange: { color: list(props.colors).length ? list(props.colors).map((color) => resolveColor(color)) : ["#ebfbee", "#2f9e44"] },
+			orient: "horizontal",
+			left: "center",
+			bottom: 0
+		},
+		calendar: {
+			range: [start, end],
+			cellSize: num(props.rectSize, 10) + num(props.gap, 1),
+			dayLabel: {
+				show: bool(props.withWeekdayLabels, false),
+				firstDay: num(props.firstDayOfWeek, 1)
+			},
+			monthLabel: { show: bool(props.withMonthLabels, false) },
+			itemStyle: {
+				borderWidth: num(props.gap, 1),
+				borderColor: "transparent",
+				borderRadius: num(props.rectRadius, 2)
+			}
+		},
+		series: [{
+			type: "heatmap",
+			coordinateSystem: "calendar",
+			data
+		}]
+	};
+}
+//#endregion
+//#region src/charts.ts
+var AreaChart = createChartComponent("AreaChart", (p) => cartesianOption(p, "area"));
+var BarChart = createChartComponent("BarChart", (p) => cartesianOption(p, "bar"));
+var LineChart = createChartComponent("LineChart", (p) => cartesianOption(p, "line"));
+var CompositeChart = createChartComponent("CompositeChart", (p) => cartesianOption(p, "composite"));
+var PieChart = createChartComponent("PieChart", (p) => radialOption(p));
+var DonutChart = createChartComponent("DonutChart", (p) => radialOption(p, true));
+var ScatterChart = createChartComponent("ScatterChart", (p) => scatterOption(p));
+var BubbleChart = createChartComponent("BubbleChart", (p) => scatterOption(p, true));
+var RadarChart = createChartComponent("RadarChart", radarOption);
+var RadialBarChart = createChartComponent("RadialBarChart", radialBarOption);
+var FunnelChart = createChartComponent("FunnelChart", (p) => simpleOption("funnel", p));
+var Treemap = createChartComponent("Treemap", (p) => simpleOption("treemap", p));
+var SankeyChart = createChartComponent("SankeyChart", (p) => simpleOption("sankey", p));
+var Sparkline = createChartComponent("Sparkline", sparklineOption);
+var Heatmap = createChartComponent("Heatmap", heatmapOption);
+var BarsList = createChartComponent("BarsList", (p) => cartesianOption({
+	...p,
+	dataKey: "name",
+	series: [{
+		name: "value",
+		color: p.barColor
+	}],
+	orientation: "vertical",
+	withXAxis: false,
+	withYAxis: true,
+	withTooltip: false,
+	maxBarWidth: p.barHeight
+}, "bar"));
+//#endregion
+//#region src/ChartTooltip/ChartTooltip.ts
+var ChartTooltip = defineComponent({
+	name: "MantineChartTooltip",
+	props: {
+		label: null,
+		payload: Array,
+		unit: String,
+		type: {
+			type: String,
+			default: "area"
+		},
+		segmentId: String,
+		series: Array,
+		valueFormatter: Function,
+		showColor: {
+			type: Boolean,
+			default: true
+		}
+	},
+	setup(props) {
+		const labels = computed(() => Object.fromEntries((props.series ?? []).map((item) => [item.name, item.label ?? item.name])));
+		return () => {
+			const payload = props.segmentId ? props.payload?.filter((item) => item.name === props.segmentId || item.dataKey === props.segmentId) : props.payload;
+			if (!payload?.length) return null;
+			return h("div", {
+				class: "mantine-ChartTooltip-tooltip",
+				"data-type": props.type
+			}, [props.label != null ? h("div", { class: "mantine-ChartTooltip-tooltipLabel" }, [props.label]) : null, h("div", { class: "mantine-ChartTooltip-tooltipBody" }, payload.map((item) => h("div", { class: "mantine-ChartTooltip-tooltipItem" }, [h("div", { class: "mantine-ChartTooltip-tooltipItemBody" }, [props.showColor ? h("span", {
+				class: "mantine-ChartTooltip-tooltipItemColor",
+				style: { background: resolveColor(item.color) }
+			}) : null, h("span", { class: "mantine-ChartTooltip-tooltipItemName" }, labels.value[item.name ?? ""] ?? item.name)]), h("span", { class: "mantine-ChartTooltip-tooltipItemData" }, `${props.valueFormatter ? props.valueFormatter(Number(item.value)) : item.value ?? ""}${props.unit ?? item.unit ?? ""}`)])))]);
+		};
+	}
+});
+//#endregion
+//#region src/ChartLegend/ChartLegend.ts
+var ChartLegend = defineComponent({
+	name: "MantineChartLegend",
+	props: {
+		payload: Array,
+		onHighlight: {
+			type: Function,
+			required: true
+		},
+		legendPosition: {
+			type: String,
+			required: true
+		},
+		series: Array,
+		showColor: {
+			type: Boolean,
+			default: true
+		},
+		centered: Boolean
+	},
+	setup(props) {
+		return () => h("div", {
+			class: "mantine-ChartLegend-legend",
+			"data-position": props.legendPosition,
+			"data-centered": props.centered || void 0,
+			onMouseleave: () => props.onHighlight(null)
+		}, props.payload?.map((item) => {
+			const key = item.dataKey ?? item.name ?? "";
+			const label = props.series?.find((s) => s.name === key)?.label ?? key;
+			return h("div", {
+				class: "mantine-ChartLegend-legendItem",
+				onMouseenter: () => props.onHighlight(key)
+			}, [props.showColor ? h("span", {
+				class: "mantine-ChartLegend-legendItemColor",
+				style: { background: resolveColor(item.color) }
+			}) : null, h("span", { class: "mantine-ChartLegend-legendItemName" }, label)]);
+		}));
+	}
+});
+//#endregion
+//#region src/utils/get-series-labels/get-series-labels.ts
+function getSeriesLabels(series) {
+	return Object.fromEntries((series ?? []).map((item) => [item.name, item.label ?? item.name]));
+}
+//#endregion
+export { AreaChart, BarChart, BarsList, BubbleChart, ChartLegend, ChartTooltip, CompositeChart, DonutChart, FunnelChart, Heatmap, LineChart, PieChart, RadarChart, RadialBarChart, SankeyChart, ScatterChart, Sparkline, Treemap, getSeriesLabels };
+
+//# sourceMappingURL=index.mjs.map