@classic-homes/charts-svelte 0.1.35 → 0.1.37

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

@@ -13,9 +13,7 @@
   import type { AreaChartProps, DataPointEventParams } 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,13 +50,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)
   );
@@ -132,7 +123,6 @@
         },
         showSymbol: false,
       })),
-      animation: animation && !reducedMotion.value,
     };
   });
 
@@ -143,46 +133,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 +168,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

@@ -9,9 +9,7 @@
   import { generatePieChartDescription } 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,13 +40,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?.length);
 
   const option: EChartsOption = $derived.by(() => {
@@ -146,7 +137,6 @@
           },
         },
       ],
-      animation: animation && !reducedMotion.value,
     };
   });
 
@@ -154,44 +144,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 +177,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

@@ -14,9 +14,7 @@
   import { generateLineChartDescription } 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,13 +53,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)
   );
@@ -121,7 +112,6 @@
           focus: 'series',
         },
       })),
-      animation: animation && !reducedMotion.value,
     };
   });
 
@@ -129,64 +119,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 +169,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/PieChart.svelte

@@ -9,9 +9,7 @@
   import { generatePieChartDescription } 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
@@ -40,13 +38,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?.length);
 
   const option: EChartsOption = $derived.by(() => {
@@ -95,7 +86,6 @@
           },
         },
       ],
-      animation: animation && !reducedMotion.value,
     };
   });
 
@@ -103,44 +93,26 @@
     description || (!isEmpty ? generatePieChartDescription(title, data, false) : 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>
 
@@ -154,5 +126,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>