ui-svelte 0.2.11 → 0.2.13

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

@@ -1,4 +1,8 @@
+import { type Snippet } from 'svelte';
 type Color = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'muted';
+type Size = 'sm' | 'md' | 'lg' | 'xl';
+type LegendPosition = 'top' | 'right' | 'bottom' | 'left' | 'none';
+type Palette = 'default' | 'rainbow' | 'ocean' | 'sunset' | 'forest' | 'neon';
 type DataPoint = {
     x: number;
     y: number;
@@ -20,9 +24,11 @@ type Props = {
     margin?: Margin;
     color?: Color;
     colors?: Color[];
-    showPoints?: boolean;
-    showGrid?: boolean;
-    showLegend?: boolean;
+    hidePoints?: boolean;
+    hideGrid?: boolean;
+    hideLegend?: boolean;
+    hideXAxis?: boolean;
+    hideYAxis?: boolean;
     curve?: 'linear' | 'smooth';
     strokeWidth?: number;
     pointRadius?: number;
@@ -30,6 +36,23 @@ type Props = {
     empty?: boolean;
     emptyText?: string;
     rootClass?: string;
+    chartClass?: string;
+    size?: Size;
+    palette?: Palette;
+    legendPosition?: LegendPosition;
+    disableAnimation?: boolean;
+    animationDuration?: number;
+    valueFormatter?: (value: number) => string;
+    xFormatter?: (value: number) => string;
+    onClick?: (point: DataPoint, seriesName: string, index: number) => void;
+    onHover?: (point: DataPoint | null, seriesName: string, index: number) => void;
+    tooltipContent?: Snippet<[{
+        point: DataPoint;
+        seriesName: string;
+        color: Color;
+    }]>;
+    showGradientFill?: boolean;
+    showGlow?: boolean;
 };
 declare const LineChart: import("svelte").Component<Props, {}, "">;
 type LineChart = ReturnType<typeof LineChart>;

package/dist/charts/PieChart.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
 	import { cn } from '../utils/class-names.js';
-	import { onMount } from 'svelte';
+	import { onMount, untrack, type Snippet } from 'svelte';
+
+	type Color = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'muted';
+	type Size = 'sm' | 'md' | 'lg' | 'xl';
+	type LegendPosition = 'top' | 'right' | 'bottom' | 'left' | 'none';
+	type Palette = 'default' | 'rainbow' | 'ocean' | 'sunset' | 'forest' | 'neon';
 
 	type Slice = DataPoint & {
 		startAngle: number;
@@ -8,57 +13,97 @@
 		midAngle: number;
 		percentage: number;
 		color: Color;
+		index: number;
 	};
 
-	type Color = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'muted';
-
 	type DataPoint = {
 		label: string;
 		value: number;
 		color?: Color;
+		disabled?: boolean;
 	};
 
 	type Props = {
 		data?: DataPoint[];
-		colors?: Color[];
 		donut?: boolean;
 		donutWidth?: number;
-		showLabels?: boolean;
-		showValues?: boolean;
-		showLegend?: boolean;
-		showPercentages?: boolean;
+		size?: Size;
+		palette?: Palette;
+		legendPosition?: LegendPosition;
 		centerLabel?: string;
 		centerValue?: string | number;
 		startAngle?: number;
 		padAngle?: number;
+		disableAnimation?: boolean;
+		animationDuration?: number;
+		showGlow?: boolean;
+		showGradient?: boolean;
+		hideLabels?: boolean;
+		hideValues?: boolean;
+		hideLegend?: boolean;
+		hidePercentages?: boolean;
 		loading?: boolean;
 		empty?: boolean;
 		emptyText?: string;
 		rootClass?: string;
 		chartClass?: string;
+		valueFormatter?: (value: number) => string;
+		onClick?: (slice: DataPoint, index: number) => void;
+		onHover?: (slice: DataPoint | null, index: number) => void;
+		selected?: number[];
+		centerContent?: Snippet;
+		tooltipContent?: Snippet<[{ slice: Slice; percentage: number }]>;
 	};
 
 	let {
 		data = [],
-		colors = ['primary', 'secondary', 'success', 'info', 'warning', 'danger', 'muted'] as Color[],
 		donut = false,
 		donutWidth = 60,
-		showLabels = true,
-		showValues = true,
-		showLegend = true,
-		showPercentages = true,
+		size = 'md',
+		palette,
+		legendPosition = 'right',
 		centerLabel = 'Total',
 		centerValue = undefined,
 		startAngle = -90,
 		padAngle = 0,
+		disableAnimation = false,
+		animationDuration = 800,
+		showGlow = false,
+		showGradient = false,
+		hideLabels = false,
+		hideValues = false,
+		hideLegend = false,
+		hidePercentages = false,
 		loading = false,
 		empty = false,
 		emptyText = 'No data available',
 		rootClass,
-		chartClass
+		chartClass,
+		valueFormatter,
+		onClick,
+		onHover,
+		selected = [],
+		centerContent,
+		tooltipContent
 	}: Props = $props();
 
-	const colorClass = {
+	const sizePresets: Record<Size, { height: number; labelSize: number; valueSize: number }> = {
+		sm: { height: 150, labelSize: 10, valueSize: 18 },
+		md: { height: 224, labelSize: 12, valueSize: 24 },
+		lg: { height: 300, labelSize: 14, valueSize: 32 },
+		xl: { height: 400, labelSize: 16, valueSize: 40 }
+	};
+
+	const colorPalettes: Record<Palette, Color[]> = {
+		default: ['primary', 'secondary', 'success', 'info', 'warning', 'danger', 'muted'],
+		rainbow: ['danger', 'warning', 'success', 'info', 'primary', 'secondary', 'muted'],
+		ocean: ['info', 'primary', 'secondary', 'success', 'muted', 'warning', 'danger'],
+		sunset: ['warning', 'danger', 'secondary', 'primary', 'info', 'success', 'muted'],
+		forest: ['success', 'primary', 'info', 'secondary', 'muted', 'warning', 'danger'],
+		neon: ['secondary', 'primary', 'success', 'warning', 'danger', 'info', 'muted']
+	};
+
+	const colorClass: Record<Color, string> = {
 		primary: 'is-primary',
 		secondary: 'is-secondary',
 		success: 'is-success',
@@ -68,39 +113,71 @@
 		muted: 'is-muted'
 	};
 
+	function getSliceColor(item: DataPoint, index: number): Color {
+		if (item.color) return item.color;
+		if (palette) {
+			const paletteColors = colorPalettes[palette];
+			return paletteColors[index % paletteColors.length];
+		}
+		return colorPalettes.default[index % colorPalettes.default.length];
+	}
+
+	function formatValue(value: number): string {
+		if (valueFormatter) return valueFormatter(value);
+		return String(value);
+	}
+
 	let containerEl: HTMLDivElement | undefined = $state();
 	let containerSize = $state({ width: 0, height: 0 });
+	let animationFrameId: number | null = null;
 
-	let width = $derived(containerSize.width);
-	let height = $derived(containerSize.height);
+	let tooltipData = $state<Slice | null>(null);
+	let tooltipPosition = $state<{ x: number; y: number }>({ x: 0, y: 0 });
+	let isTooltipActive = $state(false);
+	let hoveredIndex = $state<number | null>(null);
+
+	let sizeConfig = $derived(sizePresets[size]);
+	let effectiveHeight = $derived(sizeConfig.height);
+
+	let width = $derived(containerSize.width || effectiveHeight);
+	let height = $derived(containerSize.height || effectiveHeight);
+	let viewBoxSize = $derived(Math.min(width, height) || effectiveHeight);
 
 	let total = $derived(data.reduce((sum, d) => sum + d.value, 0));
 
+	// svelte-ignore state_referenced_locally
+	let displayPercentages = $state<number[]>(data.map(() => 0));
+
 	let slices = $derived.by((): Slice[] => {
 		const startRad = (startAngle * Math.PI) / 180;
 		let currentAngle = startRad;
 		const padRad = (padAngle * Math.PI) / 180;
 
 		return data.map((d, i) => {
-			const percentage = (d.value / total) * 100;
-			const angle = (d.value / total) * 2 * Math.PI - padRad;
-			const startAngle = currentAngle;
-			const endAngle = currentAngle + angle;
-			const midAngle = startAngle + angle / 2;
+			const percentage = total > 0 ? (d.value / total) * 100 : 0;
+			const angle = total > 0 ? (d.value / total) * 2 * Math.PI - padRad : 0;
+			const sliceStartAngle = currentAngle;
+			const sliceEndAngle = currentAngle + angle;
+			const midAngle = sliceStartAngle + angle / 2;
 
-			currentAngle = endAngle + padRad;
+			currentAngle = sliceEndAngle + padRad;
 
 			return {
 				...d,
-				startAngle,
-				endAngle,
+				startAngle: sliceStartAngle,
+				endAngle: sliceEndAngle,
 				midAngle,
 				percentage,
-				color: d.color || colors[i % colors.length]
+				color: getSliceColor(d, i),
+				index: i
 			};
 		});
 	});
 
+	let gradientIds = $derived(
+		data.map((_, i) => `pie-gradient-${i}-${Math.random().toString(36).slice(2, 9)}`)
+	);
+
 	function createArc(
 		startAngle: number,
 		endAngle: number,
@@ -130,24 +207,102 @@
 		return path;
 	}
 
-	let tooltipData = $state<Slice | null>(null);
-	let tooltipPosition = $state<{ x: number; y: number }>({ x: 0, y: 0 });
-	let isTooltipActive = $state(false);
+	onMount(() => {
+		const updateSize = () => {
+			if (containerEl) {
+				const rect = containerEl.getBoundingClientRect();
+				containerSize = { width: rect.width, height: rect.height };
+			}
+		};
+
+		const handleScroll = () => {
+			if (isTooltipActive) {
+				isTooltipActive = false;
+				hoveredIndex = null;
+				tooltipData = null;
+			}
+		};
+
+		updateSize();
+		const resizeObserver = new ResizeObserver(updateSize);
+		if (containerEl) {
+			resizeObserver.observe(containerEl);
+		}
+
+		window.addEventListener('scroll', handleScroll, true);
+
+		return () => {
+			if (animationFrameId !== null) {
+				cancelAnimationFrame(animationFrameId);
+			}
+			resizeObserver.disconnect();
+			window.removeEventListener('scroll', handleScroll, true);
+		};
+	});
+
+	$effect(() => {
+		const targetPercentages = slices.map((s) => s.percentage / 100);
+
+		if (animationFrameId !== null) {
+			cancelAnimationFrame(animationFrameId);
+			animationFrameId = null;
+		}
+
+		if (!disableAnimation) {
+			const startTime = Date.now();
+			const startPercentages = untrack(() => [...displayPercentages]);
+
+			const animate = () => {
+				const now = Date.now();
+				const progress = Math.min((now - startTime) / animationDuration, 1);
+				const easeProgress = 1 - Math.pow(1 - progress, 3);
+
+				const newPercentages = startPercentages.map(
+					(start, i) => start + ((targetPercentages[i] || 0) - start) * easeProgress
+				);
+
+				displayPercentages = newPercentages;
+
+				if (progress < 1) {
+					animationFrameId = requestAnimationFrame(animate);
+				} else {
+					animationFrameId = null;
+				}
+			};
+
+			animationFrameId = requestAnimationFrame(animate);
+		} else {
+			displayPercentages = targetPercentages;
+		}
+	});
 
 	function handleSliceHover(slice: Slice, event: MouseEvent): void {
+		if (slice.disabled) return;
+
 		const target = event.target as SVGPathElement;
 		const rect = target.getBoundingClientRect();
 
 		tooltipData = slice;
 		tooltipPosition = {
-			x: rect.right + 8,
-			y: rect.top + rect.height / 2
+			x: rect.left + rect.width / 2,
+			y: rect.top - 10
 		};
 		isTooltipActive = true;
+		hoveredIndex = slice.index;
+
+		if (onHover) {
+			onHover(slice, slice.index);
+		}
 	}
 
 	function handleSliceLeave(): void {
 		isTooltipActive = false;
+		hoveredIndex = null;
+
+		if (onHover) {
+			onHover(null, -1);
+		}
+
 		setTimeout(() => {
 			if (!isTooltipActive) {
 				tooltipData = null;
@@ -155,27 +310,57 @@
 		}, 100);
 	}
 
-	onMount(() => {
-		const updateSize = () => {
-			if (containerEl) {
-				const rect = containerEl.getBoundingClientRect();
-				containerSize = { width: rect.width, height: rect.height };
-			}
-		};
+	function handleSliceClick(slice: Slice): void {
+		if (onClick && !slice.disabled) {
+			onClick(slice, slice.index);
+		}
+	}
 
-		updateSize();
-		const resizeObserver = new ResizeObserver(updateSize);
-		if (containerEl) {
-			resizeObserver.observe(containerEl);
+	let containerLayoutClass = $derived(() => {
+		switch (legendPosition) {
+			case 'top':
+				return 'flex-col-reverse';
+			case 'bottom':
+				return 'flex-col';
+			case 'left':
+				return 'flex-row-reverse';
+			case 'right':
+			default:
+				return 'flex-row';
 		}
+	});
 
-		return () => {
-			resizeObserver.disconnect();
-		};
+	let legendLayoutClass = $derived(() => {
+		switch (legendPosition) {
+			case 'top':
+			case 'bottom':
+				return 'flex-row flex-wrap';
+			default:
+				return 'flex-col';
+		}
+	});
+
+	let responsiveLabelFontSize = $derived(() => {
+		const baseSize = 300;
+		const scale = viewBoxSize / baseSize;
+		return Math.max(8, Math.min(sizeConfig.labelSize * scale, sizeConfig.labelSize));
+	});
+
+	let responsiveValueFontSize = $derived(() => {
+		const baseSize = 300;
+		const scale = viewBoxSize / baseSize;
+		return Math.max(14, Math.min(sizeConfig.valueSize * scale, sizeConfig.valueSize));
+	});
+
+	let shouldShowCenterText = $derived(viewBoxSize >= 100);
+
+	let computedCenterValue = $derived(() => {
+		const val = centerValue ?? total;
+		return valueFormatter && typeof val === 'number' ? valueFormatter(val) : val;
 	});
 </script>
 
-<div class={cn('pie-chart-container', rootClass)}>
+<div class={cn('pie-chart-container', `is-${size}`, containerLayoutClass(), rootClass)}>
 	{#if loading}
 		<div class="pie-chart-loading">
 			<svg class="pie-chart-loading-spinner" viewBox="0 0 24 24">
@@ -213,64 +398,107 @@
 			<span>{emptyText}</span>
 		</div>
 	{:else}
-		<div bind:this={containerEl} class={cn('pie-chart', chartClass)}>
-			<svg class="pie-chart-svg">
+		<div bind:this={containerEl} class={cn('pie-chart', `is-${size}`, chartClass)}>
+			<svg class="pie-chart-svg" viewBox="0 0 {viewBoxSize} {viewBoxSize}">
+				{#if showGradient}
+					<defs>
+						{#each slices as slice, i}
+							<linearGradient id={gradientIds[i]} x1="0%" y1="0%" x2="100%" y2="0%">
+								<stop offset="0%" style="stop-color:var(--color-{slice.color})" />
+								<stop
+									offset="100%"
+									style="stop-color:var(--color-{slice.color}-dark, var(--color-{slice.color}))"
+								/>
+							</linearGradient>
+						{/each}
+					</defs>
+				{/if}
+
 				{#if slices.length > 0}
-					{@const centerX = width / 2}
-					{@const centerY = height / 2}
-					{@const radius = Math.min(width, height) / 2}
+					{@const centerX = viewBoxSize / 2}
+					{@const centerY = viewBoxSize / 2}
+					{@const radius = viewBoxSize / 2 - 10}
 					{@const innerRadius = donut ? radius - donutWidth : 0}
 
 					<g transform="translate({centerX}, {centerY})">
-						{#each slices as slice}
-							{@const labelRadius = donut ? radius - donutWidth / 2 : radius * 0.7}
+						{#each slices as slice, i}
+							{@const isSelected = selected.includes(i)}
+							{@const isHovered = hoveredIndex === i}
+							{@const isDisabled = slice.disabled}
+							{@const labelRadius = donut ? radius - donutWidth / 2 : radius * 0.65}
 							{@const labelX = Math.cos(slice.midAngle) * labelRadius}
 							{@const labelY = Math.sin(slice.midAngle) * labelRadius}
 
 							<!-- svelte-ignore a11y_no_static_element_interactions -->
+							<!-- svelte-ignore a11y_click_events_have_key_events -->
 							<path
 								d={createArc(slice.startAngle, slice.endAngle, innerRadius, radius)}
-								class="pie-chart-slice is-{slice.color}"
+								class={cn(
+									'pie-chart-slice',
+									colorClass[slice.color],
+									isSelected && 'is-selected',
+									showGlow && 'has-glow',
+									isHovered && 'is-hovered',
+									isDisabled && 'is-disabled'
+								)}
+								style={showGradient ? `fill: url(#${gradientIds[i]});` : ''}
 								onmouseenter={(e) => handleSliceHover(slice, e)}
 								onmouseleave={handleSliceLeave}
+								onclick={() => handleSliceClick(slice)}
 							/>
 
-							{#if showLabels && slice.percentage > 5}
+							{#if !hideLabels && slice.percentage > 5}
 								<text
 									x={labelX}
 									y={labelY}
 									class="pie-chart-slice-label"
 									text-anchor="middle"
 									dominant-baseline="middle"
+									style="font-size: {responsiveLabelFontSize()}px;"
 								>
-									{#if showPercentages}
+									{#if !hidePercentages}
 										{slice.percentage.toFixed(1)}%
-									{:else if showValues}
-										{slice.value}
+									{:else if !hideValues}
+										{formatValue(slice.value)}
 									{/if}
 								</text>
 							{/if}
 						{/each}
 
-						{#if donut}
-							<text
-								x="0"
-								y="-5"
-								class="pie-chart-center-value"
-								text-anchor="middle"
-								dominant-baseline="middle"
-							>
-								{centerValue ?? total}
-							</text>
-							<text
-								x="0"
-								y="15"
-								class="pie-chart-center-label"
-								text-anchor="middle"
-								dominant-baseline="middle"
-							>
-								{centerLabel}
-							</text>
+						{#if donut && shouldShowCenterText}
+							{#if centerContent}
+								<foreignObject
+									x={-innerRadius * 0.7}
+									y={-innerRadius * 0.4}
+									width={innerRadius * 1.4}
+									height={innerRadius * 0.8}
+								>
+									<div class="pie-chart-center-custom">
+										{@render centerContent()}
+									</div>
+								</foreignObject>
+							{:else}
+								<text
+									x="0"
+									y="-8"
+									class="pie-chart-center-value"
+									text-anchor="middle"
+									dominant-baseline="middle"
+									style="font-size: {responsiveValueFontSize()}px;"
+								>
+									{computedCenterValue()}
+								</text>
+								<text
+									x="0"
+									y="12"
+									class="pie-chart-center-label"
+									text-anchor="middle"
+									dominant-baseline="middle"
+									style="font-size: {responsiveLabelFontSize()}px;"
+								>
+									{centerLabel}
+								</text>
+							{/if}
 						{/if}
 					</g>
 				{/if}
@@ -280,28 +508,41 @@
 		{#if tooltipData && isTooltipActive}
 			<div
 				class="pie-chart-tooltip"
-				style="top: {tooltipPosition.y}px; left: {tooltipPosition.x}px;"
+				style="left: {tooltipPosition.x}px; top: {tooltipPosition.y}px;"
 			>
-				<div class="pie-chart-tooltip-content">
-					<div class="pie-chart-tooltip-title">{tooltipData.label}</div>
-					<div class="pie-chart-tooltip-row">
-						<div class="pie-chart-tooltip-color is-{tooltipData.color}"></div>
-						<span class="pie-chart-tooltip-value">
-							{tooltipData.value} ({tooltipData.percentage.toFixed(1)}%)
-						</span>
+				{#if tooltipContent}
+					{@render tooltipContent({ slice: tooltipData, percentage: tooltipData.percentage })}
+				{:else}
+					<div class="pie-chart-tooltip-content">
+						<div class="pie-chart-tooltip-title">{tooltipData.label}</div>
+						<div class="pie-chart-tooltip-row">
+							<div class="pie-chart-tooltip-color is-{tooltipData.color}"></div>
+							<span class="pie-chart-tooltip-value">
+								{formatValue(tooltipData.value)} ({tooltipData.percentage.toFixed(1)}%)
+							</span>
+						</div>
 					</div>
-				</div>
+				{/if}
 			</div>
 		{/if}
 
-		{#if showLegend}
-			<div class="pie-chart-legend">
-				{#each slices as slice}
-					<div class="pie-chart-legend-item">
+		{#if !hideLegend && legendPosition !== 'none'}
+			<div class={cn('pie-chart-legend', legendLayoutClass())}>
+				{#each slices as slice, i}
+					{@const isSelected = selected.includes(i)}
+					<div
+						class={cn('pie-chart-legend-item', isSelected && 'is-selected')}
+						onclick={() => handleSliceClick(slice)}
+						onkeydown={(e) => e.key === 'Enter' && handleSliceClick(slice)}
+						role="button"
+						tabindex="0"
+					>
 						<div class={cn('pie-chart-legend-color', colorClass[slice.color])}></div>
 						<span>{slice.label}</span>
-						{#if showValues}
-							<span class="pie-chart-legend-value">({slice.value})</span>
+						{#if !hideValues}
+							<span class="pie-chart-legend-value">
+								({formatValue(slice.value)})
+							</span>
 						{/if}
 					</div>
 				{/each}

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

@@ -1,27 +1,55 @@
+import { type Snippet } from 'svelte';
 type Color = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'muted';
+type Size = 'sm' | 'md' | 'lg' | 'xl';
+type LegendPosition = 'top' | 'right' | 'bottom' | 'left' | 'none';
+type Palette = 'default' | 'rainbow' | 'ocean' | 'sunset' | 'forest' | 'neon';
 type DataPoint = {
     label: string;
     value: number;
     color?: Color;
+    disabled?: boolean;
+};
+type Slice = DataPoint & {
+    startAngle: number;
+    endAngle: number;
+    midAngle: number;
+    percentage: number;
+    color: Color;
+    index: number;
 };
 type Props = {
     data?: DataPoint[];
-    colors?: Color[];
     donut?: boolean;
     donutWidth?: number;
-    showLabels?: boolean;
-    showValues?: boolean;
-    showLegend?: boolean;
-    showPercentages?: boolean;
+    size?: Size;
+    palette?: Palette;
+    legendPosition?: LegendPosition;
     centerLabel?: string;
     centerValue?: string | number;
     startAngle?: number;
     padAngle?: number;
+    disableAnimation?: boolean;
+    animationDuration?: number;
+    showGlow?: boolean;
+    showGradient?: boolean;
+    hideLabels?: boolean;
+    hideValues?: boolean;
+    hideLegend?: boolean;
+    hidePercentages?: boolean;
     loading?: boolean;
     empty?: boolean;
     emptyText?: string;
     rootClass?: string;
     chartClass?: string;
+    valueFormatter?: (value: number) => string;
+    onClick?: (slice: DataPoint, index: number) => void;
+    onHover?: (slice: DataPoint | null, index: number) => void;
+    selected?: number[];
+    centerContent?: Snippet;
+    tooltipContent?: Snippet<[{
+        slice: Slice;
+        percentage: number;
+    }]>;
 };
 declare const PieChart: import("svelte").Component<Props, {}, "">;
 type PieChart = ReturnType<typeof PieChart>;