@classic-homes/charts-svelte 0.1.36 → 0.1.38

package/dist/lib/components/base/ChartContainer.svelte

@@ -33,10 +33,11 @@
     children,
   }: Props = $props();
 
+  // Unique per instance: two charts may share a title
+  const uid = $props.id();
+
   const heightStyle = $derived(typeof height === 'number' ? `${height}px` : height);
-  const descriptionId = $derived(
-    description ? `${title.replace(/\s+/g, '-').toLowerCase()}-desc` : undefined
-  );
+  const descriptionId = $derived(description ? `${uid}-desc` : undefined);
 </script>
 
 {#if loading}

package/dist/lib/components/base/ChartError.svelte

@@ -37,9 +37,11 @@
       d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
     />
   </svg>
-  <p class="mb-2 text-sm font-medium text-destructive">{message}</p>
+  <!-- text-destructive on the destructive tint fails AA; the icon and border carry the colour -->
+  <p class="mb-2 text-sm font-medium text-foreground">{message}</p>
   {#if onRetry}
     <button
+      type="button"
       onclick={onRetry}
       class="rounded-md bg-destructive px-3 py-1.5 text-xs font-medium text-destructive-foreground transition-colors hover:bg-destructive/90"
     >

package/dist/lib/components/base/index.d.ts

@@ -2,3 +2,12 @@ export { default as ChartContainer } from './ChartContainer.svelte';
 export { default as ChartSkeleton } from './ChartSkeleton.svelte';
 export { default as ChartError } from './ChartError.svelte';
 export { default as ChartEmpty } from './ChartEmpty.svelte';
+import type { ComponentProps } from 'svelte';
+import type ChartContainer from './ChartContainer.svelte';
+import type ChartSkeleton from './ChartSkeleton.svelte';
+import type ChartError from './ChartError.svelte';
+import type ChartEmpty from './ChartEmpty.svelte';
+export type ChartContainerProps = ComponentProps<typeof ChartContainer>;
+export type ChartSkeletonProps = ComponentProps<typeof ChartSkeleton>;
+export type ChartErrorProps = ComponentProps<typeof ChartError>;
+export type ChartEmptyProps = ComponentProps<typeof ChartEmpty>;

package/dist/lib/components/core/AreaChart.svelte

@@ -11,11 +11,10 @@
   import type { EChartsOption } from 'echarts';
 
   import type { AreaChartProps, DataPointEventParams } from '@classic-homes/charts-core';
+  import { colorWithAlpha, getChartColors } from '@classic-homes/charts-core';
 
   import { cn } from '../../utils.js';
-  import { useChartTheme } from '../../composables/useChartTheme.svelte.js';
-  import { useReducedMotion } from '../../composables/useReducedMotion.svelte.js';
-  import { useChartResize } from '../../composables/useChartResize.svelte.js';
+  import { useChart } from '../../composables/useChart.svelte.js';
   import ChartContainer from '../base/ChartContainer.svelte';
 
   // Register required ECharts modules
@@ -52,17 +51,13 @@
     class: className,
   }: Props = $props();
 
-  let containerEl: HTMLDivElement | null = $state(null);
-  let chart: echarts.ECharts | null = null;
-
-  const chartTheme = useChartTheme(() => theme);
-  const reducedMotion = useReducedMotion();
-  const chartResize = useChartResize();
-
   const isEmpty = $derived(
     !data?.categories?.length || !data?.series?.length || data.series.every((s) => !s.data?.length)
   );
 
+  // Per-element colours that follow the resolved chart theme
+  const chartColors = $derived.by(() => getChartColors(chart.theme));
+
   const option: EChartsOption = $derived.by(() => {
     if (isEmpty) return {};
 
@@ -79,7 +74,7 @@
             axisPointer: {
               type: 'cross',
               label: {
-                backgroundColor: '#6a7985',
+                backgroundColor: chartColors.axisPointerLabel,
               },
             },
           }
@@ -101,38 +96,31 @@
           show: showGrid,
         },
       },
-      series: data.series.map((series, index) => ({
-        name: series.name,
-        type: 'line',
-        data: series.data,
-        smooth,
-        stack: stacked ? 'Total' : undefined,
-        areaStyle: gradient
-          ? {
-              opacity: 0.8,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color:
-                    series.color ||
-                    `rgba(${60 + index * 40}, ${160 - index * 20}, ${180 - index * 30}, 0.8)`,
-                },
-                {
-                  offset: 1,
-                  color:
-                    series.color ||
-                    `rgba(${60 + index * 40}, ${160 - index * 20}, ${180 - index * 30}, 0.1)`,
-                },
-              ]),
-            }
-          : { opacity: 0.5 },
-        itemStyle: series.color ? { color: series.color } : undefined,
-        emphasis: {
-          focus: 'series',
-        },
-        showSymbol: false,
-      })),
-      animation: animation && !reducedMotion.value,
+      series: data.series.map((series, index) => {
+        // Fade the series colour (theme palette unless overridden) downwards
+        const base = series.color || chartColors.series[index % chartColors.series.length];
+        return {
+          name: series.name,
+          type: 'line',
+          data: series.data,
+          smooth,
+          stack: stacked ? 'Total' : undefined,
+          areaStyle: gradient
+            ? {
+                opacity: 0.8,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: colorWithAlpha(base, 0.8) },
+                  { offset: 1, color: colorWithAlpha(base, 0.1) },
+                ]),
+              }
+            : { opacity: 0.5 },
+          itemStyle: series.color ? { color: series.color } : undefined,
+          emphasis: {
+            focus: 'series',
+          },
+          showSymbol: false,
+        };
+      }),
     };
   });
 
@@ -143,46 +131,28 @@
         : undefined)
   );
 
-  // Initialize chart instance (only depends on container and theme)
-  $effect(() => {
-    if (!containerEl) return;
-
-    if (chart) {
-      chart.dispose();
-    }
-
-    chart = echarts.init(containerEl, chartTheme.theme);
-
-    if (onClick) {
-      chart.on('click', (params) => {
-        onClick({
-          type: params.type || 'click',
-          componentType: params.componentType || 'series',
-          seriesIndex: params.seriesIndex,
-          seriesName: params.seriesName || '',
-          dataIndex: params.dataIndex || 0,
-          name: params.name || '',
-          value: params.value as number,
-          color: params.color as string,
-        } as DataPointEventParams);
-      });
-    }
-
-    // Set up ResizeObserver for container-aware resizing
-    chartResize.observe(containerEl, chart);
-
-    return () => {
-      chartResize.cleanup();
-      chart?.dispose();
-      chart = null;
-    };
-  });
-
-  // Update options when they change (handles both initial and subsequent updates)
-  $effect(() => {
-    if (chart && !isEmpty) {
-      chart.setOption(option, { notMerge: true, lazyUpdate: true });
-    }
+  // Manage ECharts instance lifecycle (init, theme, resize, option updates)
+  const chart = useChart({
+    option: () => option,
+    theme: () => theme,
+    animation: () => animation,
+    isEmpty: () => isEmpty,
+    onReady: (instance) => {
+      if (onClick) {
+        instance.on('click', (params) => {
+          onClick({
+            type: params.type || 'click',
+            componentType: params.componentType || 'series',
+            seriesIndex: params.seriesIndex,
+            seriesName: params.seriesName || '',
+            dataIndex: params.dataIndex || 0,
+            name: params.name || '',
+            value: params.value as number,
+            color: params.color as string,
+          } as DataPointEventParams);
+        });
+      }
+    },
   });
 </script>
 
@@ -196,5 +166,5 @@
   {emptyMessage}
   class={cn(className)}
 >
-  <div bind:this={containerEl} class="h-full w-full"></div>
+  <div bind:this={chart.container} class="h-full w-full"></div>
 </ChartContainer>

package/dist/lib/components/core/BarChart.svelte

@@ -14,9 +14,7 @@
   import { generateBarChartDescription } from '@classic-homes/charts-core';
 
   import { cn } from '../../utils.js';
-  import { useChartTheme } from '../../composables/useChartTheme.svelte.js';
-  import { useReducedMotion } from '../../composables/useReducedMotion.svelte.js';
-  import { useChartResize } from '../../composables/useChartResize.svelte.js';
+  import { useChart } from '../../composables/useChart.svelte.js';
   import ChartContainer from '../base/ChartContainer.svelte';
 
   // Register required ECharts modules
@@ -53,13 +51,6 @@
     class: className,
   }: Props = $props();
 
-  let containerEl: HTMLDivElement | null = $state(null);
-  let chart: echarts.ECharts | null = null;
-
-  const chartTheme = useChartTheme(() => theme);
-  const reducedMotion = useReducedMotion();
-  const chartResize = useChartResize();
-
   const isEmpty = $derived(
     !data?.categories?.length || !data?.series?.length || data.series.every((s) => !s.data?.length)
   );
@@ -123,7 +114,6 @@
           focus: 'series',
         },
       })),
-      animation: animation && !reducedMotion.value,
     };
   });
 
@@ -131,46 +121,28 @@
     description || (!isEmpty ? generateBarChartDescription(title, data) : undefined)
   );
 
-  // Initialize chart instance (only depends on container and theme)
-  $effect(() => {
-    if (!containerEl) return;
-
-    if (chart) {
-      chart.dispose();
-    }
-
-    chart = echarts.init(containerEl, chartTheme.theme);
-
-    if (onClick) {
-      chart.on('click', (params) => {
-        onClick({
-          type: params.type || 'click',
-          componentType: params.componentType || 'series',
-          seriesIndex: params.seriesIndex,
-          seriesName: params.seriesName || '',
-          dataIndex: params.dataIndex || 0,
-          name: params.name || '',
-          value: params.value as number,
-          color: params.color as string,
-        } as DataPointEventParams);
-      });
-    }
-
-    // Set up ResizeObserver for container-aware resizing
-    chartResize.observe(containerEl, chart);
-
-    return () => {
-      chartResize.cleanup();
-      chart?.dispose();
-      chart = null;
-    };
-  });
-
-  // Update options when they change (handles both initial and subsequent updates)
-  $effect(() => {
-    if (chart && !isEmpty) {
-      chart.setOption(option, { notMerge: true, lazyUpdate: true });
-    }
+  // Manage ECharts instance lifecycle (init, theme, resize, option updates)
+  const chart = useChart({
+    option: () => option,
+    theme: () => theme,
+    animation: () => animation,
+    isEmpty: () => isEmpty,
+    onReady: (instance) => {
+      if (onClick) {
+        instance.on('click', (params) => {
+          onClick({
+            type: params.type || 'click',
+            componentType: params.componentType || 'series',
+            seriesIndex: params.seriesIndex,
+            seriesName: params.seriesName || '',
+            dataIndex: params.dataIndex || 0,
+            name: params.name || '',
+            value: params.value as number,
+            color: params.color as string,
+          } as DataPointEventParams);
+        });
+      }
+    },
   });
 </script>
 
@@ -184,5 +156,5 @@
   {emptyMessage}
   class={cn(className)}
 >
-  <div bind:this={containerEl} class="h-full w-full"></div>
+  <div bind:this={chart.container} class="h-full w-full"></div>
 </ChartContainer>

package/dist/lib/components/core/DonutChart.svelte

@@ -6,12 +6,10 @@
   import type { EChartsOption } from 'echarts';
 
   import type { DonutChartProps, SliceEventParams } from '@classic-homes/charts-core';
-  import { generatePieChartDescription } from '@classic-homes/charts-core';
+  import { generatePieChartDescription, getChartColors } from '@classic-homes/charts-core';
 
   import { cn } from '../../utils.js';
-  import { useChartTheme } from '../../composables/useChartTheme.svelte.js';
-  import { useReducedMotion } from '../../composables/useReducedMotion.svelte.js';
-  import { useChartResize } from '../../composables/useChartResize.svelte.js';
+  import { useChart } from '../../composables/useChart.svelte.js';
   import ChartContainer from '../base/ChartContainer.svelte';
 
   // Register required ECharts modules
@@ -42,15 +40,11 @@
     class: className,
   }: Props = $props();
 
-  let containerEl: HTMLDivElement | null = $state(null);
-  let chart: echarts.ECharts | null = null;
-
-  const chartTheme = useChartTheme(() => theme);
-  const reducedMotion = useReducedMotion();
-  const chartResize = useChartResize();
-
   const isEmpty = $derived(!data?.length);
 
+  // Per-element colours that follow the resolved chart theme
+  const chartColors = $derived.by(() => getChartColors(chart.theme));
+
   const option: EChartsOption = $derived.by(() => {
     if (isEmpty) return {};
 
@@ -70,7 +64,7 @@
                     text: String(centerValue),
                     fontSize: 28,
                     fontWeight: 'bold',
-                    fill: 'currentColor',
+                    fill: chartColors.foreground,
                     align: 'center',
                   },
                   top: 0,
@@ -85,7 +79,7 @@
                   style: {
                     text: centerLabel,
                     fontSize: 14,
-                    fill: '#888',
+                    fill: chartColors.mutedForeground,
                     align: 'center',
                   },
                   top: centerValue !== undefined ? 35 : 0,
@@ -146,7 +140,6 @@
           },
         },
       ],
-      animation: animation && !reducedMotion.value,
     };
   });
 
@@ -154,44 +147,26 @@
     description || (!isEmpty ? generatePieChartDescription(title, data, true) : undefined)
   );
 
-  // Initialize chart instance (only depends on container and theme)
-  $effect(() => {
-    if (!containerEl) return;
-
-    if (chart) {
-      chart.dispose();
-    }
-
-    chart = echarts.init(containerEl, chartTheme.theme);
-
-    if (onClick) {
-      chart.on('click', (params) => {
-        onClick({
-          type: params.type || 'click',
-          componentType: params.componentType || 'series',
-          name: params.name || '',
-          value: params.value as number,
-          percent: params.percent,
-          color: params.color as string,
-        } as SliceEventParams);
-      });
-    }
-
-    // Set up ResizeObserver for container-aware resizing
-    chartResize.observe(containerEl, chart);
-
-    return () => {
-      chartResize.cleanup();
-      chart?.dispose();
-      chart = null;
-    };
-  });
-
-  // Update options when they change (handles both initial and subsequent updates)
-  $effect(() => {
-    if (chart && !isEmpty) {
-      chart.setOption(option, { notMerge: true, lazyUpdate: true });
-    }
+  // Manage ECharts instance lifecycle (init, theme, resize, option updates)
+  const chart = useChart({
+    option: () => option,
+    theme: () => theme,
+    animation: () => animation,
+    isEmpty: () => isEmpty,
+    onReady: (instance) => {
+      if (onClick) {
+        instance.on('click', (params) => {
+          onClick({
+            type: params.type || 'click',
+            componentType: params.componentType || 'series',
+            name: params.name || '',
+            value: params.value as number,
+            percent: params.percent,
+            color: params.color as string,
+          } as SliceEventParams);
+        });
+      }
+    },
   });
 </script>
 
@@ -205,5 +180,5 @@
   {emptyMessage}
   class={cn(className)}
 >
-  <div bind:this={containerEl} class="h-full w-full"></div>
+  <div bind:this={chart.container} class="h-full w-full"></div>
 </ChartContainer>

package/dist/lib/components/core/LineChart.svelte

@@ -11,12 +11,10 @@
   import type { EChartsOption } from 'echarts';
 
   import type { LineChartProps, DataPointEventParams } from '@classic-homes/charts-core';
-  import { generateLineChartDescription } from '@classic-homes/charts-core';
+  import { generateLineChartDescription, getChartColors } from '@classic-homes/charts-core';
 
   import { cn } from '../../utils.js';
-  import { useChartTheme } from '../../composables/useChartTheme.svelte.js';
-  import { useReducedMotion } from '../../composables/useReducedMotion.svelte.js';
-  import { useChartResize } from '../../composables/useChartResize.svelte.js';
+  import { useChart } from '../../composables/useChart.svelte.js';
   import ChartContainer from '../base/ChartContainer.svelte';
 
   // Register required ECharts modules
@@ -55,17 +53,13 @@
     class: className,
   }: Props = $props();
 
-  let containerEl: HTMLDivElement | null = $state(null);
-  let chart: echarts.ECharts | null = null;
-
-  const chartTheme = useChartTheme(() => theme);
-  const reducedMotion = useReducedMotion();
-  const chartResize = useChartResize();
-
   const isEmpty = $derived(
     !data?.categories?.length || !data?.series?.length || data.series.every((s) => !s.data?.length)
   );
 
+  // Per-element colours that follow the resolved chart theme
+  const chartColors = $derived.by(() => getChartColors(chart.theme));
+
   const option: EChartsOption = $derived.by(() => {
     if (isEmpty) return {};
 
@@ -82,7 +76,7 @@
             axisPointer: {
               type: 'cross',
               label: {
-                backgroundColor: '#6a7985',
+                backgroundColor: chartColors.axisPointerLabel,
               },
             },
           }
@@ -121,7 +115,6 @@
           focus: 'series',
         },
       })),
-      animation: animation && !reducedMotion.value,
     };
   });
 
@@ -129,64 +122,43 @@
     description || (!isEmpty ? generateLineChartDescription(title, data) : undefined)
   );
 
-  // Initialize chart instance (only depends on container and theme)
-  $effect(() => {
-    if (!containerEl) return;
-
-    // Dispose existing chart if any
-    if (chart) {
-      chart.dispose();
-    }
-
-    // Create new chart instance
-    chart = echarts.init(containerEl, chartTheme.theme);
-
-    // Setup event handlers
-    if (onClick) {
-      chart.on('click', (params) => {
-        onClick({
-          type: params.type || 'click',
-          componentType: params.componentType || 'series',
-          seriesIndex: params.seriesIndex,
-          seriesName: params.seriesName || '',
-          dataIndex: params.dataIndex || 0,
-          name: params.name || '',
-          value: params.value as number,
-          color: params.color as string,
-        } as DataPointEventParams);
-      });
-    }
-
-    if (onHover) {
-      chart.on('mouseover', (params) => {
-        onHover({
-          type: params.type || 'mouseover',
-          componentType: params.componentType || 'series',
-          seriesIndex: params.seriesIndex,
-          seriesName: params.seriesName || '',
-          dataIndex: params.dataIndex || 0,
-          name: params.name || '',
-          value: params.value as number,
-          color: params.color as string,
-        } as DataPointEventParams);
-      });
-    }
-
-    // Set up ResizeObserver for container-aware resizing
-    chartResize.observe(containerEl, chart);
-
-    return () => {
-      chartResize.cleanup();
-      chart?.dispose();
-      chart = null;
-    };
-  });
-
-  // Update options when they change (handles both initial and subsequent updates)
-  $effect(() => {
-    if (chart && !isEmpty) {
-      chart.setOption(option, { notMerge: true, lazyUpdate: true });
-    }
+  // Manage ECharts instance lifecycle (init, theme, resize, option updates)
+  const chart = useChart({
+    option: () => option,
+    theme: () => theme,
+    animation: () => animation,
+    isEmpty: () => isEmpty,
+    onReady: (instance) => {
+      if (onClick) {
+        instance.on('click', (params) => {
+          onClick({
+            type: params.type || 'click',
+            componentType: params.componentType || 'series',
+            seriesIndex: params.seriesIndex,
+            seriesName: params.seriesName || '',
+            dataIndex: params.dataIndex || 0,
+            name: params.name || '',
+            value: params.value as number,
+            color: params.color as string,
+          } as DataPointEventParams);
+        });
+      }
+
+      if (onHover) {
+        instance.on('mouseover', (params) => {
+          onHover({
+            type: params.type || 'mouseover',
+            componentType: params.componentType || 'series',
+            seriesIndex: params.seriesIndex,
+            seriesName: params.seriesName || '',
+            dataIndex: params.dataIndex || 0,
+            name: params.name || '',
+            value: params.value as number,
+            color: params.color as string,
+          } as DataPointEventParams);
+        });
+      }
+    },
   });
 </script>
 
@@ -200,5 +172,5 @@
   {emptyMessage}
   class={cn(className)}
 >
-  <div bind:this={containerEl} class="h-full w-full"></div>
+  <div bind:this={chart.container} class="h-full w-full"></div>
 </ChartContainer>