@makolabs/ripple 0.0.1-dev.3 → 0.0.1-dev.31

package/dist/charts/Chart.svelte

@@ -0,0 +1,543 @@
+<script lang="ts">
+	import { onMount, onDestroy, tick } from 'svelte';
+	import { cn } from '../helper/cls.js';
+	import * as echarts from 'echarts/core';
+	// @ts-expect-error - ECharts types are not available
+	import { LineChart, BarChart, PieChart } from 'echarts/charts';
+	import {
+		// @ts-expect-error - ECharts types are not available
+		GridComponent,
+		// @ts-expect-error - ECharts types are not available
+		TooltipComponent,
+		// @ts-expect-error - ECharts types are not available
+		TitleComponent,
+		// @ts-expect-error - ECharts types are not available
+		LegendComponent,
+		// @ts-expect-error - ECharts types are not available
+		DataZoomComponent,
+		// @ts-expect-error - ECharts types are not available
+		ToolboxComponent,
+		// @ts-expect-error - ECharts types are not available
+		MarkLineComponent,
+		// @ts-expect-error - ECharts types are not available
+		MarkPointComponent,
+		// @ts-expect-error - ECharts types are not available
+		GraphicComponent
+	} from 'echarts/components';
+	// @ts-expect-error - ECharts types are not available
+	import { SVGRenderer } from 'echarts/renderers';
+	import {
+		type ChartProps,
+		type ChartColorString,
+		type ChartColors,
+		type SeriesConfig
+	} from '../index.js';
+	import { defaultChartColors } from '../variants.js';
+
+	// @ts-expect-error - ECharts types are not available
+	echarts.use([
+		LineChart,
+		BarChart,
+		PieChart,
+		GridComponent,
+		TooltipComponent,
+		TitleComponent,
+		LegendComponent,
+		DataZoomComponent,
+		ToolboxComponent,
+		MarkLineComponent,
+		MarkPointComponent,
+		SVGRenderer,
+		GraphicComponent
+	]);
+
+	let {
+		data = [],
+		config,
+		height = '400px',
+		width = '100%',
+		class: className = '',
+		colors = {},
+		onpointclick,
+		onchartrender
+	}: ChartProps<any> = $props();
+
+	const theme = 'light';
+	const AnimationDuration = 1200;
+
+	const xAxis = $derived(config.xAxis);
+	const yAxis = $derived(config.yAxis);
+	const series = $derived(config.series);
+
+	const grid = $derived(
+		config.grid || {
+			horizontal: true,
+			vertical: false,
+			containLabel: true
+		}
+	);
+	const legend = $derived({
+		show: true,
+		position: 'top',
+		orient: 'horizontal',
+		...(config.legend || {})
+	});
+	const tooltip = $derived(
+		config.tooltip || {
+			show: true,
+			trigger: 'axis',
+			formatter: undefined
+		}
+	);
+	const toolbox = $derived(
+		config.toolbox || {
+			show: false,
+			features: {
+				saveAsImage: true,
+				dataView: false,
+				dataZoom: false,
+				magicType: true,
+				restore: true
+			}
+		}
+	);
+
+	// Check if we have a pie/donut chart
+	const hasPieChart = $derived(series.some((s) => s.type === 'pie'));
+
+	let chartContainer: HTMLDivElement;
+	// @ts-expect-error - ECharts types are not available
+	let chart: echarts.ECharts;
+	let resizeObserver: ResizeObserver;
+
+	const chartColors: ChartColors = { ...defaultChartColors, ...colors };
+	const baseColors = [
+		chartColors.health,
+		chartColors.other,
+		chartColors.property,
+		chartColors.auto,
+		chartColors.life,
+		chartColors.default
+	];
+
+	function getColor(color?: ChartColorString): string | undefined {
+		return color ? chartColors[color as keyof ChartColors] || color : undefined;
+	}
+
+	function getAreaStyle(seriesConfig: SeriesConfig<any>) {
+		if (!seriesConfig.color) return undefined;
+		const baseLinearAreaStyle = {
+			type: 'linear',
+			x: 0,
+			y: 0,
+			x2: 0,
+			y2: 1
+		};
+		const color = getColor(seriesConfig.color);
+		const opacity = seriesConfig.areaOpacity || 0.2;
+		const opacityHex = Math.floor(opacity * 255)
+			.toString(16)
+			.padStart(2, '0');
+		return {
+			color: {
+				...baseLinearAreaStyle,
+				colorStops: [
+					{
+						offset: 0,
+						color: color + opacityHex
+					},
+					{
+						offset: 1,
+						color: color + '00'
+					}
+				]
+			}
+		};
+	}
+
+	function getSeriesColors(count: number): string[] {
+		let colors = [...baseColors];
+		while (colors.length < count) {
+			const index = colors.length % baseColors.length;
+			const baseColor = baseColors[index];
+			const r = parseInt(baseColor.slice(1, 3), 16);
+			const g = parseInt(baseColor.slice(3, 5), 16);
+			const b = parseInt(baseColor.slice(5, 7), 16);
+			const factor = 0.8 + (colors.length / baseColors.length) * 0.4;
+			const newColor = `#${Math.min(255, Math.floor(r * factor))
+				.toString(16)
+				.padStart(2, '0')}${Math.min(255, Math.floor(g * factor))
+				.toString(16)
+				.padStart(2, '0')}${Math.min(255, Math.floor(b * factor))
+				.toString(16)
+				.padStart(2, '0')}`;
+			colors.push(newColor);
+		}
+
+		return colors.slice(0, count);
+	}
+
+	function formatValue(value: any, format?: (value: any) => string, unit?: string): string {
+		if (format) {
+			return format(value);
+		}
+
+		if (unit) {
+			return `${value}${unit}`;
+		}
+
+		return String(value);
+	}
+
+	function configureSeries(): any[] {
+		return series.map((seriesConfig) => {
+			const seriesType = seriesConfig.type || 'line';
+
+			if (seriesType === 'pie') {
+				const pieData = data.map((item) => ({
+					value: item[seriesConfig.dataKey],
+					name: item[xAxis?.dataKey] || item.label
+				}));
+
+				return {
+					name: seriesConfig.name || seriesConfig.dataKey,
+					type: 'pie',
+					radius: seriesConfig.radius || ['0%', '70%'],
+					avoidLabelOverlap: true,
+					itemStyle: {
+						borderRadius: 4,
+						borderWidth: 2,
+						borderColor: '#fff',
+						color: getColor(seriesConfig.color)
+					},
+					label: {
+						show: seriesConfig.showLabel !== undefined ? seriesConfig.showLabel : true
+					},
+					labelLine: {
+						show: seriesConfig.showLabel !== undefined ? seriesConfig.showLabel : true
+					},
+					data: pieData,
+					animation: true,
+					animationDuration: AnimationDuration,
+					emphasis: seriesConfig.emphasis || { focus: 'series' }
+				};
+			}
+
+			const isHorizontalBar = seriesType === 'horizontal-bar';
+			const actualType = isHorizontalBar ? 'bar' : seriesType;
+
+			const seriesData = data.map((item) => ({
+				value: item[seriesConfig.dataKey],
+				name: item[xAxis.dataKey]
+			}));
+
+			const barSeriesCount = series.filter(
+				(s) => s.type === 'bar' || s.type === 'horizontal-bar'
+			).length;
+
+			return {
+				name: seriesConfig.name || seriesConfig.dataKey,
+				type: actualType,
+				yAxisIndex: seriesConfig.yAxisIndex || 0,
+				data: seriesData,
+				stack: seriesConfig.stack,
+				color: getColor(seriesConfig.color),
+				emphasis: seriesConfig.emphasis || { focus: 'series' },
+				animation: true,
+				animationDuration: AnimationDuration,
+
+				...(actualType === 'line' && {
+					smooth: seriesConfig.smooth !== undefined ? seriesConfig.smooth : true,
+					showSymbol: seriesConfig.showSymbol !== undefined ? seriesConfig.showSymbol : true,
+					symbolSize: 6,
+					lineStyle: {
+						width: seriesConfig.lineWidth || 2,
+						color: getColor(seriesConfig.color),
+						type: seriesConfig.lineStyle?.type || 'solid'
+					},
+					areaStyle: getAreaStyle(seriesConfig)
+				}),
+
+				...(actualType === 'bar' && {
+					name: seriesConfig.name || seriesConfig.dataKey,
+					type: actualType,
+					yAxisIndex: seriesConfig.yAxisIndex || 0,
+					data: seriesData,
+					stack: null,
+					barWidth:
+						seriesConfig.barWidth ||
+						(barSeriesCount > 3 ? '15%' : barSeriesCount > 1 ? '25%' : '60%'),
+					barCategoryGap: '20%',
+					barGap: '10%',
+					color: getColor(seriesConfig.color),
+					itemStyle: {
+						color: getColor(seriesConfig.color),
+						borderRadius: [4, 4, 0, 0],
+						opacity: seriesConfig.opacity || 1
+					}
+				}),
+
+				label: {
+					show: seriesConfig.showLabel || false,
+					position: actualType === 'line' ? 'top' : 'inside',
+					// @ts-expect-error - ECharts types are not available
+					formatter: (params) => {
+						const yAxisIndex = seriesConfig.yAxisIndex || 0;
+						const axisConfig = yAxis[yAxisIndex];
+						return formatValue(params.value, axisConfig.format, axisConfig.unit);
+					}
+				}
+			};
+		});
+	}
+
+	function defaultFormatter(params: any) {
+		if (Array.isArray(params)) {
+			const item = params[0];
+			let html = `<div style="font-weight: bold; margin-bottom: 5px;">${item.name}</div>`;
+
+			params.forEach((param) => {
+				const seriesItem = series.find(
+					(s) => s.name === param.seriesName || s.dataKey === param.seriesName
+				);
+
+				if (seriesItem?.type === 'pie') {
+					html += `<div style="display: flex; align-items: center; margin: 3px 0;">
+						<span style="display: inline-block; width: 10px; height: 10px; background: ${param.color}; border-radius: 50%; margin-right: 5px;"></span>
+						<span>${param.seriesName}: ${param.value} (${param.percent}%)</span>
+					</div>`;
+				} else {
+					const yAxisIndex = seriesItem?.yAxisIndex || 0;
+					const axisConfig = yAxis[yAxisIndex];
+					const formattedValue = formatValue(param.value, axisConfig.format, axisConfig.unit);
+
+					html += `<div style="display: flex; align-items: center; margin: 3px 0;">
+						<span style="display: inline-block; width: 10px; height: 10px; background: ${param.color}; border-radius: 50%; margin-right: 5px;"></span>
+						<span>${param.seriesName}: ${formattedValue}</span>
+					</div>`;
+				}
+			});
+
+			return html;
+		} else {
+			if (params.seriesType === 'pie') {
+				return `${params.name}: ${params.value} (${params.percent}%)`;
+			}
+
+			const seriesItem = series.find(
+				(s) => s.name === params.seriesName || s.dataKey === params.seriesName
+			);
+			const yAxisIndex = seriesItem?.yAxisIndex || 0;
+			const axisConfig = yAxis[yAxisIndex];
+			const formattedValue = formatValue(params.value, axisConfig.format, axisConfig.unit);
+
+			return `${params.seriesName}: ${formattedValue}`;
+		}
+	}
+
+	function updateChart() {
+		if (!chart || !data || !series) return;
+
+		const colorPalette = getSeriesColors(series.length);
+
+		if (hasPieChart) {
+			// Configure for pie chart
+			const pieOptions = {
+				color: colorPalette,
+
+				tooltip: {
+					show: tooltip.show,
+					trigger: 'item',
+					formatter: tooltip.formatter || '{b}: {c} ({d}%)'
+				},
+
+				legend: {
+					show: legend.show,
+					type: 'scroll',
+					orient: legend.orient,
+					...(legend.position === 'top' && { top: 0, left: 'center' }),
+					...(legend.position === 'bottom' && { bottom: 0, left: 'center' }),
+					...(legend.position === 'left' && { left: 0, top: 'middle' }),
+					...(legend.position === 'right' && { right: 0, top: 'middle' })
+				},
+
+				series: configureSeries()
+			};
+
+			// Add center text if specified in the first pie series
+			const pieSeriesWithCenterText = series.find((s) => s.type === 'pie' && s.centerText);
+			if (pieSeriesWithCenterText?.centerText) {
+				// @ts-expect-error - ECharts types are not available
+				pieOptions.graphic = {
+					elements: [
+						{
+							type: 'text',
+							left: 'center',
+							top: 'center',
+							style: {
+								text: pieSeriesWithCenterText.centerText,
+								fontSize: 20,
+								fontWeight: 'bold'
+							}
+						}
+					]
+				};
+			}
+
+			chart.setOption(pieOptions, true);
+		} else {
+			// Regular chart configuration
+			const categories = data.map((item) => item[xAxis.dataKey]);
+
+			const options = {
+				color: colorPalette,
+
+				tooltip: {
+					show: tooltip.show,
+					trigger: tooltip.trigger,
+					formatter: tooltip.formatter || defaultFormatter
+				},
+
+				legend: {
+					show: legend.show,
+					type: 'scroll',
+					orient: legend.orient,
+					...(legend.position === 'top' && { top: 0, left: 'center' }),
+					...(legend.position === 'bottom' && { bottom: 0, left: 'center' }),
+					...(legend.position === 'left' && { left: 0, top: 'middle' }),
+					...(legend.position === 'right' && { right: 0, top: 'middle' })
+				},
+
+				grid: {
+					top: legend.position === 'top' ? '15%' : grid.top || '10%',
+					right: grid.right || '3%',
+					bottom: legend.position === 'bottom' ? '15%' : grid.bottom || '10%',
+					left: grid.left || '3%',
+					containLabel: grid.containLabel !== undefined ? grid.containLabel : true
+				},
+
+				xAxis: {
+					type: 'category',
+					data: categories,
+					axisLabel: {
+						...(xAxis.tick && {
+							fontSize: xAxis.tick.fontSize,
+							rotate: xAxis.tick.rotate,
+							interval: xAxis.tick.interval
+						}),
+						formatter: xAxis.format || '{value}'
+					},
+					boundaryGap: series.every((s) => s.type === 'line')
+						? false
+						: series.some((s) => s.type === 'bar' || s.type === 'horizontal-bar')
+							? true
+							: undefined,
+					name: xAxis.label,
+					nameLocation: 'middle',
+					nameGap: 30,
+					splitLine: {
+						show: grid.vertical || false
+					},
+					axisLine: xAxis.axisLine || {
+						show: false
+					}
+				},
+
+				yAxis: yAxis.map((axis, index) => ({
+					type: 'value',
+					name: axis.label,
+					nameLocation: 'middle',
+					nameGap: 50,
+					nameRotate: 90,
+					position: axis.position || (index === 0 ? 'left' : 'right'),
+					min: axis.min,
+					max: axis.max,
+					axisLine: axis.axisLine || {
+						show: false
+					},
+					axisLabel: {
+						// @ts-expect-error - ECharts types are not available
+						formatter: (value) => formatValue(value, axis.format, axis.unit)
+					},
+					splitLine: {
+						show: index === 0 ? grid.horizontal || true : false
+					}
+				})),
+
+				toolbox: toolbox.show
+					? {
+							feature: {
+								...(toolbox.features?.saveAsImage && { saveAsImage: {} }),
+								...(toolbox.features?.dataView && { dataView: { readOnly: false } }),
+								...(toolbox.features?.dataZoom && { dataZoom: { yAxisIndex: 'none' } }),
+								...(toolbox.features?.magicType && {
+									magicType: { type: ['line', 'bar', 'stack'] }
+								}),
+								...(toolbox.features?.restore && { restore: {} })
+							}
+						}
+					: undefined,
+
+				series: configureSeries()
+			};
+
+			chart.setOption(options, true);
+		}
+
+		if (onchartrender) {
+			onchartrender({
+				detail: {
+					chart,
+					options: chart.getOption()
+				}
+			});
+		}
+	}
+
+	onMount(() => {
+		// @ts-expect-error - ECharts types are not available
+		chart = echarts.init(chartContainer, theme);
+
+		// Instantly triggering resizes disables animation, hence the timeout
+		setTimeout(() => {
+			resizeObserver = new ResizeObserver(() => {
+				chart?.resize();
+			});
+			resizeObserver.observe(chartContainer);
+		}, AnimationDuration);
+
+		updateChart();
+		// @ts-expect-error - ECharts types are not available
+		chart.on('click', (params) => {
+			if (onpointclick) {
+				onpointclick({
+					detail: {
+						seriesIndex: params.seriesIndex,
+						dataIndex: params.dataIndex,
+						seriesName: params.seriesName,
+						name: params.name,
+						value: params.value,
+						originalData: data[params.dataIndex]
+					}
+				});
+			}
+		});
+	});
+
+	$effect(() => {
+		if (chart && data && series) {
+			updateChart();
+		}
+	});
+
+	onDestroy(() => {
+		resizeObserver?.disconnect();
+		chart?.dispose();
+	});
+</script>
+
+<div
+	class={cn('advanced-chart', className)}
+	style="height: {height}; width: {width}"
+	bind:this={chartContainer}
+></div>

package/dist/charts/Chart.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type ChartProps } from '../index.js';
+declare const Chart: import("svelte").Component<ChartProps<any>, {}, "">;
+type Chart = ReturnType<typeof Chart>;
+export default Chart;