@mantine-vue/charts 3.2.0 → 3.4.0

package/cjs/index.cjs

@@ -34,6 +34,7 @@ function registerECharts() {
 	if (registered) return;
 	(0, echarts_core.use)([
 		echarts_charts.BarChart,
+		echarts_charts.CandlestickChart,
 		echarts_charts.EffectScatterChart,
 		echarts_charts.FunnelChart,
 		echarts_charts.GaugeChart,
@@ -53,6 +54,8 @@ function registerECharts() {
 		echarts_components.GridComponent,
 		echarts_components.LegendComponent,
 		echarts_components.MarkLineComponent,
+		echarts_components.MarkAreaComponent,
+		echarts_components.MarkPointComponent,
 		echarts_components.PolarComponent,
 		echarts_components.RadarComponent,
 		echarts_components.TitleComponent,
@@ -326,6 +329,36 @@ function markLine(referenceLines) {
 		}))
 	};
 }
+function markArea(referenceAreas) {
+	if (!referenceAreas?.length) return void 0;
+	return {
+		silent: true,
+		data: referenceAreas.map((area) => [{
+			xAxis: area.x1,
+			yAxis: area.y1,
+			itemStyle: {
+				color: resolveColor(area.color, "#868e96"),
+				opacity: .15
+			},
+			label: typeof area.label === "string" ? { formatter: area.label } : area.label
+		}, {
+			xAxis: area.x2,
+			yAxis: area.y2
+		}])
+	};
+}
+function markPoint(referenceDots) {
+	if (!referenceDots?.length) return void 0;
+	return {
+		silent: true,
+		data: referenceDots.map((dot) => ({
+			coord: [dot.x, dot.y],
+			symbolSize: (dot.r ?? 6) * 2,
+			itemStyle: { color: resolveColor(dot.color, "#868e96") },
+			label: typeof dot.label === "string" ? { formatter: dot.label } : dot.label
+		}))
+	};
+}
 function cartesianOption(props, kind) {
 	const data = list(props.data);
 	const series = list(props.series);
@@ -347,13 +380,15 @@ function cartesianOption(props, kind) {
 	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 stack = chartType === "stacked" || chartType === "percent" || chartType === "stream" ? "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
+			markLine: index === 0 ? markLine(props.referenceLines) : void 0,
+			markArea: index === 0 ? markArea(props.referenceAreas) : void 0,
+			markPoint: index === 0 ? markPoint(props.referenceDots) : void 0
 		};
 		if (itemKind === "bar") return {
 			...base,
@@ -384,7 +419,7 @@ function cartesianOption(props, kind) {
 			symbolSize: 6,
 			lineStyle: {
 				color,
-				width: num(props.strokeWidth, 2),
+				width: chartType === "stream" ? 0 : num(props.strokeWidth, 2),
 				type: item.strokeDasharray ? "dashed" : "solid"
 			},
 			itemStyle: {
@@ -401,6 +436,19 @@ function cartesianOption(props, kind) {
 			}
 		};
 	});
+	if (kind === "area" && chartType === "stream") mapped.unshift({
+		type: "line",
+		stack: "stack",
+		silent: true,
+		symbol: "none",
+		data: data.map((entry) => -series.reduce((total, item) => {
+			const value = entry[item.name];
+			return total + (typeof value === "number" && Number.isFinite(value) ? value : 0);
+		}, 0) / 2),
+		lineStyle: { opacity: 0 },
+		areaStyle: { opacity: 0 },
+		tooltip: { show: false }
+	});
 	return {
 		animationDurationUpdate: num(props.tooltipAnimationDuration, 0),
 		color: series.map((item) => resolveColor(item.color)),
@@ -429,7 +477,7 @@ function cartesianOption(props, kind) {
 		},
 		yAxis: horizontal ? [{
 			...valueAxis,
-			show: bool(props.withYAxis, true),
+			show: chartType === "stream" ? false : bool(props.withYAxis, true),
 			...obj(props.yAxisProps)
 		}, {
 			...valueAxis,
@@ -512,17 +560,30 @@ function scatterOption(props, bubble = false) {
 			show: bool(props.withXAxis, true),
 			...obj(props.xAxisProps)
 		},
-		yAxis: {
+		yAxis: props.withRightYAxis ? [{
 			type: "value",
 			show: bool(props.withYAxis, true),
+			name: props.yAxisLabel,
+			...obj(props.yAxisProps)
+		}, {
+			type: "value",
+			show: true,
+			position: "right",
+			name: props.rightYAxisLabel,
+			...obj(props.rightYAxisProps)
+		}] : {
+			type: "value",
+			show: bool(props.withYAxis, true),
+			name: props.yAxisLabel,
 			...obj(props.yAxisProps)
 		},
 		series: (series.length ? series : [{
 			name: String(props.name ?? "value"),
 			color: props.color
-		}]).map((item) => ({
+		}]).map((item, index) => ({
 			type: "scatter",
 			name: item.label ?? item.name,
+			yAxisIndex: item.yAxisId === "right" ? 1 : 0,
 			data: data.filter((entry) => !entry.name || entry.name === item.name).map((entry) => [
 				entry[xKey],
 				entry[yKey],
@@ -530,10 +591,287 @@ function scatterOption(props, bubble = false) {
 				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) }
+			itemStyle: { color: resolveColor(item.color) },
+			markLine: index === 0 ? markLine(props.referenceLines) : void 0,
+			markArea: index === 0 ? markArea(props.referenceAreas) : void 0,
+			markPoint: index === 0 ? markPoint(props.referenceDots) : void 0
 		}))
 	};
 }
+function gaugeOption(props) {
+	const min = num(props.min, 0);
+	const max = num(props.max, 100);
+	const value = num(props.value, min);
+	const sections = list(props.sections);
+	const range = max - min || 1;
+	const axisColors = sections.length ? sections.map((section) => [Math.max(0, Math.min(1, (section.value - min) / range)), resolveColor(section.color)]) : [[1, resolveColor(props.trackColor, "#e9ecef")]];
+	const format = typeof props.valueFormatter === "function" ? props.valueFormatter : (input) => String(input);
+	return { series: [{
+		type: "gauge",
+		min,
+		max,
+		startAngle: 90 - num(props.startAngle, -120),
+		endAngle: 90 - num(props.endAngle, 120),
+		radius: "90%",
+		axisLine: { lineStyle: {
+			width: num(props.thickness, 12),
+			color: axisColors
+		} },
+		progress: sections.length ? { show: false } : {
+			show: true,
+			width: num(props.thickness, 12),
+			roundCap: bool(props.roundCaps, false),
+			itemStyle: { color: resolveColor(props.filledColor) }
+		},
+		pointer: typeof props.target === "number" ? {
+			show: true,
+			width: num(props.targetSize, 2),
+			length: "85%",
+			itemStyle: { color: resolveColor(props.targetColor, "#212529") }
+		} : { show: false },
+		axisTick: { show: false },
+		splitLine: { show: false },
+		axisLabel: { show: false },
+		anchor: { show: false },
+		title: { show: false },
+		detail: {
+			show: props.label !== null,
+			formatter: typeof props.label === "string" ? props.label : format(value),
+			color: "inherit"
+		},
+		data: [{ value: typeof props.target === "number" ? props.target : value }]
+	}] };
+}
+function normalizeSegmentValue(value) {
+	return Number.isFinite(value) ? Math.max(0, value) : 0;
+}
+function waffleOption(props) {
+	const rows = Math.max(1, num(props.rows, 10));
+	const columns = Math.max(1, num(props.columns, 10));
+	const cellCount = rows * columns;
+	const data = list(props.data);
+	const values = data.map((item) => normalizeSegmentValue(item.value));
+	const sum = values.reduce((total, value) => total + value, 0);
+	const denominator = props.total == null ? sum : Math.max(num(props.total, sum), sum);
+	const filledTarget = denominator ? Math.round(sum / denominator * cellCount) : 0;
+	const allocated = values.map((value) => sum ? Math.floor(value / sum * filledTarget) : 0);
+	let remainder = filledTarget - allocated.reduce((total, value) => total + value, 0);
+	const fractions = values.map((value, index) => ({
+		index,
+		fraction: sum ? value / sum * filledTarget - allocated[index] : 0
+	})).sort((a, b) => b.fraction - a.fraction);
+	for (let index = 0; index < fractions.length && remainder > 0; index += 1, remainder -= 1) allocated[fractions[index].index] += 1;
+	const cells = data.flatMap((_, segmentIndex) => Array.from({ length: allocated[segmentIndex] }, () => segmentIndex));
+	while (cells.length < cellCount) cells.push(-1);
+	const direction = String(props.fillDirection ?? "left-to-right");
+	const points = cells.map((segmentIndex, index) => {
+		let x = index % columns;
+		let y = Math.floor(index / columns);
+		if (direction === "right-to-left") x = columns - 1 - x;
+		if (direction === "top-to-bottom" || direction === "bottom-to-top") {
+			x = Math.floor(index / rows);
+			y = index % rows;
+			if (direction === "bottom-to-top") y = rows - 1 - y;
+		}
+		const item = data[segmentIndex];
+		return {
+			value: [
+				x,
+				y,
+				segmentIndex
+			],
+			name: item?.name,
+			itemStyle: { color: item ? resolveColor(item.color) : resolveColor(props.emptyColor, "#e9ecef") }
+		};
+	});
+	return {
+		grid: {
+			left: 0,
+			right: 0,
+			top: 0,
+			bottom: bool(props.withLegend, true) ? 36 : 0
+		},
+		xAxis: {
+			type: "value",
+			min: -.5,
+			max: columns - .5,
+			show: false
+		},
+		yAxis: {
+			type: "value",
+			min: -.5,
+			max: rows - .5,
+			inverse: true,
+			show: false
+		},
+		legend: {
+			show: bool(props.withLegend, true),
+			data: data.map((item) => item.name),
+			top: props.legendPosition === "top" ? 0 : void 0,
+			bottom: props.legendPosition === "bottom" ? 0 : void 0,
+			left: props.legendPosition === "left" ? 0 : void 0,
+			right: props.legendPosition === "right" ? 0 : void 0
+		},
+		tooltip: {
+			show: bool(props.withTooltip, false),
+			formatter: (params) => {
+				const item = data[params.value?.[2]];
+				if (!item) return "";
+				return typeof props.getTooltipLabel === "function" ? String(props.getTooltipLabel({
+					...item,
+					count: allocated[params.value[2]]
+				})) : `${item.name}: ${item.value}`;
+			}
+		},
+		series: [{
+			type: "scatter",
+			symbol: "roundRect",
+			symbolSize: num(props.cellSize, 20),
+			data: points
+		}]
+	};
+}
+function matrixOption(props) {
+	const data = list(props.data);
+	const xLabels = list(props.xLabels).length ? list(props.xLabels) : [...new Set(data.map((cell) => cell.x))];
+	const yLabels = list(props.yLabels).length ? list(props.yLabels) : [...new Set(data.map((cell) => cell.y))];
+	const values = data.flatMap((cell) => typeof cell.value === "number" ? [cell.value] : []);
+	const domain = props.domain ?? [Math.min(0, ...values), Math.max(1, ...values)];
+	const colors = list(props.colors).length ? list(props.colors).map((color) => resolveColor(color)) : [
+		"#ebfbee",
+		"#8ce99a",
+		"#40c057",
+		"#2b8a3e"
+	];
+	return {
+		grid: {
+			left: bool(props.withYLabels, false) ? num(props.yLabelsWidth, 60) : 0,
+			right: 0,
+			top: props.xLabelsPosition === "top" && bool(props.withXLabels, false) ? num(props.xLabelsHeight, 60) : 0,
+			bottom: props.xLabelsPosition !== "top" && bool(props.withXLabels, false) ? num(props.xLabelsHeight, 60) : bool(props.withLegend, false) ? 30 : 0
+		},
+		xAxis: {
+			type: "category",
+			data: xLabels,
+			position: props.xLabelsPosition === "top" ? "top" : "bottom",
+			show: bool(props.withXLabels, false),
+			axisLabel: {
+				rotate: num(props.xLabelsRotation, -90),
+				fontSize: num(props.fontSize, 12)
+			}
+		},
+		yAxis: {
+			type: "category",
+			data: yLabels,
+			inverse: true,
+			show: bool(props.withYLabels, false),
+			axisLabel: { fontSize: num(props.fontSize, 12) }
+		},
+		visualMap: {
+			show: bool(props.withLegend, false),
+			min: domain[0],
+			max: domain[1],
+			inRange: { color: colors },
+			orient: "horizontal",
+			left: "center",
+			bottom: 0,
+			text: props.legendLabels ?? ["More", "Less"]
+		},
+		tooltip: {
+			show: bool(props.withTooltip, false) && typeof props.getTooltipLabel === "function",
+			formatter: (params) => {
+				const cell = data[params.dataIndex];
+				return String(props.getTooltipLabel?.(cell) ?? "");
+			},
+			...obj(props.tooltipProps)
+		},
+		series: [{
+			type: "heatmap",
+			data: data.map((cell) => {
+				const extra = typeof props.getCellProps === "function" ? props.getCellProps(cell) : {};
+				const empty = cell.value === null || !Number.isFinite(cell.value);
+				return {
+					value: [
+						xLabels.indexOf(cell.x),
+						yLabels.indexOf(cell.y),
+						cell.value,
+						cell
+					],
+					...extra,
+					itemStyle: {
+						...empty && props.emptyColor ? { color: resolveColor(props.emptyColor) } : {},
+						...obj(extra.itemStyle)
+					}
+				};
+			}),
+			itemStyle: {
+				borderWidth: num(props.gap, 1),
+				borderColor: "transparent",
+				borderRadius: num(props.cellRadius, 2)
+			}
+		}]
+	};
+}
+function candlestickOption(props) {
+	const data = list(props.data);
+	const keys = {
+		open: "open",
+		high: "high",
+		low: "low",
+		close: "close",
+		...obj(props.dataKeys)
+	};
+	const dataKey = String(props.dataKey ?? "date");
+	return {
+		grid: {
+			left: 48,
+			right: 16,
+			top: 16,
+			bottom: 38,
+			containLabel: true,
+			...obj(props.gridProps)
+		},
+		tooltip: {
+			trigger: "axis",
+			show: bool(props.withTooltip, true),
+			...obj(props.tooltipProps)
+		},
+		xAxis: {
+			type: "category",
+			data: data.map((item) => String(item[dataKey] ?? "")),
+			show: bool(props.withXAxis, true),
+			name: props.xAxisLabel,
+			...obj(props.xAxisProps)
+		},
+		yAxis: {
+			type: "value",
+			scale: true,
+			show: bool(props.withYAxis, true),
+			name: props.yAxisLabel,
+			...obj(props.yAxisProps)
+		},
+		series: [{
+			type: "candlestick",
+			data: data.map((item) => [
+				item[keys.open],
+				item[keys.close],
+				item[keys.low],
+				item[keys.high]
+			]),
+			barMaxWidth: props.maxCandleWidth,
+			itemStyle: {
+				color: resolveColor(props.upColor, "#12b886"),
+				color0: resolveColor(props.downColor, "#fa5252"),
+				borderColor: resolveColor(props.upColor, "#12b886"),
+				borderColor0: resolveColor(props.downColor, "#fa5252"),
+				borderWidth: num(props.candleStrokeWidth, 1)
+			},
+			markLine: markLine(props.referenceLines),
+			markArea: markArea(props.referenceAreas),
+			markPoint: markPoint(props.referenceDots)
+		}]
+	};
+}
 function sparklineOption(props) {
 	const data = list(props.data);
 	const trend = props.trendColors;
@@ -718,6 +1056,10 @@ var BarsList = createChartComponent("BarsList", (p) => cartesianOption({
 	withTooltip: false,
 	maxBarWidth: p.barHeight
 }, "bar"));
+var GaugeChart = createChartComponent("GaugeChart", gaugeOption);
+var WaffleChart = createChartComponent("WaffleChart", waffleOption);
+var MatrixChart = createChartComponent("MatrixChart", matrixOption);
+var CandlestickChart = createChartComponent("CandlestickChart", candlestickOption);
 //#endregion
 //#region src/ChartTooltip/ChartTooltip.ts
 var ChartTooltip = (0, vue.defineComponent)({
@@ -808,13 +1150,16 @@ exports.AreaChart = AreaChart;
 exports.BarChart = BarChart;
 exports.BarsList = BarsList;
 exports.BubbleChart = BubbleChart;
+exports.CandlestickChart = CandlestickChart;
 exports.ChartLegend = ChartLegend;
 exports.ChartTooltip = ChartTooltip;
 exports.CompositeChart = CompositeChart;
 exports.DonutChart = DonutChart;
 exports.FunnelChart = FunnelChart;
+exports.GaugeChart = GaugeChart;
 exports.Heatmap = Heatmap;
 exports.LineChart = LineChart;
+exports.MatrixChart = MatrixChart;
 exports.PieChart = PieChart;
 exports.RadarChart = RadarChart;
 exports.RadialBarChart = RadialBarChart;
@@ -822,6 +1167,7 @@ exports.SankeyChart = SankeyChart;
 exports.ScatterChart = ScatterChart;
 exports.Sparkline = Sparkline;
 exports.Treemap = Treemap;
+exports.WaffleChart = WaffleChart;
 exports.getSeriesLabels = getSeriesLabels;
 
 //# sourceMappingURL=index.cjs.map