@classic-homes/charts-svelte 0.1.37 → 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,6 +11,7 @@
   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 { useChart } from '../../composables/useChart.svelte.js';
@@ -54,6 +55,9 @@
     !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 {};
 
@@ -70,7 +74,7 @@
             axisPointer: {
               type: 'cross',
               label: {
-                backgroundColor: '#6a7985',
+                backgroundColor: chartColors.axisPointerLabel,
               },
             },
           }
@@ -92,37 +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,
-      })),
+      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,
+        };
+      }),
     };
   });
 

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

@@ -6,7 +6,7 @@
   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 { useChart } from '../../composables/useChart.svelte.js';
@@ -42,6 +42,9 @@
 
   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 {};
 
@@ -61,7 +64,7 @@
                     text: String(centerValue),
                     fontSize: 28,
                     fontWeight: 'bold',
-                    fill: 'currentColor',
+                    fill: chartColors.foreground,
                     align: 'center',
                   },
                   top: 0,
@@ -76,7 +79,7 @@
                   style: {
                     text: centerLabel,
                     fontSize: 14,
-                    fill: '#888',
+                    fill: chartColors.mutedForeground,
                     align: 'center',
                   },
                   top: centerValue !== undefined ? 35 : 0,

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

@@ -11,7 +11,7 @@
   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 { useChart } from '../../composables/useChart.svelte.js';
@@ -57,6 +57,9 @@
     !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 {};
 
@@ -73,7 +76,7 @@
             axisPointer: {
               type: 'cross',
               label: {
-                backgroundColor: '#6a7985',
+                backgroundColor: chartColors.axisPointerLabel,
               },
             },
           }

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

@@ -61,7 +61,7 @@
         {
           name: title,
           type: 'pie',
-          radius: innerRadius === 0 ? '70%' : ['50%', '70%'],
+          radius: innerRadius ? [innerRadius, '70%'] : '70%',
           center: ['50%', '45%'],
           data: data.map((item) => ({
             name: item.name,

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

@@ -1,6 +1,9 @@
 <script lang="ts">
   import * as echarts from 'echarts/core';
-  import { ScatterChart as EChartsScatterChart } from 'echarts/charts';
+  import {
+    ScatterChart as EChartsScatterChart,
+    LineChart as EChartsLineChart,
+  } from 'echarts/charts';
   import {
     GridComponent,
     TooltipComponent,
@@ -11,7 +14,7 @@
   import type { EChartsOption } from 'echarts';
 
   import type { ScatterChartProps, DataPointEventParams } from '@classic-homes/charts-core';
-  import { generateScatterChartDescription } from '@classic-homes/charts-core';
+  import { escapeHtml, generateScatterChartDescription } from '@classic-homes/charts-core';
 
   import { cn } from '../../utils.js';
   import { useChart } from '../../composables/useChart.svelte.js';
@@ -20,6 +23,8 @@
   // Register required ECharts modules
   echarts.use([
     EChartsScatterChart,
+    // Trend lines are line series
+    EChartsLineChart,
     GridComponent,
     TooltipComponent,
     LegendComponent,
@@ -91,9 +96,13 @@
         const slope = (n * sumXY - sumX * sumY) / (n * sumX2 - sumX * sumX);
         const intercept = (sumY - slope * sumX) / n;
 
-        const xValues = s.data.map(([x]) => x);
-        const minX = Math.min(...xValues);
-        const maxX = Math.max(...xValues);
+        // A loop: spreading large arrays into Math.min/max overflows the stack
+        let minX = Infinity;
+        let maxX = -Infinity;
+        for (const [x] of s.data) {
+          if (x < minX) minX = x;
+          if (x > maxX) maxX = x;
+        }
 
         (series as unknown[]).push({
           name: `${s.name} Trend`,
@@ -129,7 +138,7 @@
             formatter: (params: unknown) => {
               const p = params as { seriesName?: string; value?: number[] };
               if (!p.value) return '';
-              return `${p.seriesName}<br/>X: ${p.value[0]}<br/>Y: ${p.value[1]}`;
+              return `${escapeHtml(p.seriesName)}<br/>X: ${escapeHtml(p.value[0])}<br/>Y: ${escapeHtml(p.value[1])}`;
             },
           }
         : undefined,

package/dist/lib/components/extended/CandlestickChart.svelte

@@ -14,6 +14,7 @@
   import type { EChartsOption } from 'echarts';
 
   import type { CandlestickChartProps, CandlestickEventParams } from '@classic-homes/charts-core';
+  import { getChartColors } from '@classic-homes/charts-core';
 
   import { cn } from '../../utils.js';
   import { useChart } from '../../composables/useChart.svelte.js';
@@ -51,6 +52,9 @@
 
   const isEmpty = $derived(!data?.dates?.length || !data?.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 {};
 
@@ -62,10 +66,10 @@
         type: 'candlestick',
         data: candlestickData,
         itemStyle: {
-          color: '#ef4444',
-          color0: '#22c55e',
-          borderColor: '#ef4444',
-          borderColor0: '#22c55e',
+          color: chartColors.destructive,
+          color0: chartColors.success,
+          borderColor: chartColors.destructive,
+          borderColor0: chartColors.success,
         },
       },
     ];
@@ -115,7 +119,7 @@
         xAxisIndex: 1,
         yAxisIndex: 1,
         data: data.volume,
-        itemStyle: { color: '#6b7280' },
+        itemStyle: { color: chartColors.mutedForeground },
       });
     }
 
@@ -148,6 +152,7 @@
         instance.on('click', (params) => {
           const dataIndex = params.dataIndex || 0;
           const item = data.data[dataIndex];
+          if (!item) return;
           onClick({
             type: params.type || 'click',
             componentType: params.componentType || 'series',

package/dist/lib/components/extended/FunnelChart.svelte

@@ -59,7 +59,8 @@
           bottom: 60,
           width: '80%',
           min: 0,
-          max: Math.max(...data.map((d) => d.value)),
+          // reduce, not Math.max(...): spreading large arrays overflows the stack
+          max: data.reduce((m, d) => (d.value > m ? d.value : m), -Infinity),
           minSize: '0%',
           maxSize: '100%',
           sort,

package/dist/lib/components/extended/GaugeChart.svelte

@@ -6,6 +6,7 @@
   import type { EChartsOption } from 'echarts';
 
   import type { GaugeChartProps } from '@classic-homes/charts-core';
+  import { getChartColors } from '@classic-homes/charts-core';
 
   import { cn } from '../../utils.js';
   import { useChart } from '../../composables/useChart.svelte.js';
@@ -42,6 +43,9 @@
     animation: () => animation,
   });
 
+  // Per-element colours that follow the resolved chart theme
+  const chartColors = $derived.by(() => getChartColors(chart.theme));
+
   const option: EChartsOption = $derived({
     series: [
       {
@@ -53,9 +57,17 @@
         splitNumber,
         progress: showProgress ? { show: true, width: 18 } : undefined,
         axisLine: { lineStyle: { width: 18 } },
-        axisTick: { distance: -30, splitNumber: 5, lineStyle: { width: 2, color: '#999' } },
-        splitLine: { distance: -32, length: 10, lineStyle: { width: 3, color: '#999' } },
-        axisLabel: { distance: -20, color: '#999', fontSize: 12 },
+        axisTick: {
+          distance: -30,
+          splitNumber: 5,
+          lineStyle: { width: 2, color: chartColors.mutedForeground },
+        },
+        splitLine: {
+          distance: -32,
+          length: 10,
+          lineStyle: { width: 3, color: chartColors.mutedForeground },
+        },
+        axisLabel: { distance: -20, color: chartColors.mutedForeground, fontSize: 12 },
         anchor: { show: true, size: 20, itemStyle: { borderWidth: 2 } },
         pointer: { width: 6, length: '60%' },
         title: { show: true, offsetCenter: [0, '70%'], fontSize: 14 },

package/dist/lib/components/extended/HeatmapChart.svelte

@@ -11,6 +11,7 @@
   import type { EChartsOption } from 'echarts';
 
   import type { HeatmapChartProps, HeatmapEventParams } from '@classic-homes/charts-core';
+  import { escapeHtml } from '@classic-homes/charts-core';
 
   import { cn } from '../../utils.js';
   import { useChart } from '../../composables/useChart.svelte.js';
@@ -49,9 +50,18 @@
 
   const isEmpty = $derived(!data?.data?.length || !xAxis?.length || !yAxis?.length);
 
-  const values = $derived(data?.data?.map(([, , value]) => value) || []);
-  const minValue = $derived(data?.min ?? Math.min(...values));
-  const maxValue = $derived(data?.max ?? Math.max(...values));
+  // A loop: spreading large arrays into Math.min/max overflows the call stack
+  const extent = $derived.by(() => {
+    let min = Infinity;
+    let max = -Infinity;
+    for (const [, , value] of data?.data ?? []) {
+      if (value < min) min = value;
+      if (value > max) max = value;
+    }
+    return { min, max };
+  });
+  const minValue = $derived(data?.min ?? extent.min);
+  const maxValue = $derived(data?.max ?? extent.max);
 
   const option: EChartsOption = $derived.by(() => {
     if (isEmpty) return {};
@@ -64,7 +74,7 @@
               const p = params as { value?: [number, number, number] };
               if (!p.value) return '';
               const [xIdx, yIdx, value] = p.value;
-              return `${xAxis[xIdx]} / ${yAxis[yIdx]}: ${value}`;
+              return `${escapeHtml(xAxis[xIdx])} / ${escapeHtml(yAxis[yIdx])}: ${escapeHtml(value)}`;
             },
           }
         : undefined,

package/dist/lib/components/extended/TreemapChart.svelte

@@ -6,6 +6,7 @@
   import type { EChartsOption } from 'echarts';
 
   import type { TreemapChartProps, TreemapEventParams } from '@classic-homes/charts-core';
+  import { escapeHtml, getChartColors } from '@classic-homes/charts-core';
 
   import { cn } from '../../utils.js';
   import { useChart } from '../../composables/useChart.svelte.js';
@@ -35,6 +36,9 @@
 
   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 {};
 
@@ -43,7 +47,7 @@
         ? {
             formatter: (params: unknown) => {
               const p = params as { name?: string; value?: number };
-              return `${p.name}: ${p.value}`;
+              return `${escapeHtml(p.name)}: ${escapeHtml(p.value)}`;
             },
           }
         : undefined,
@@ -53,7 +57,7 @@
           data,
           roam: false,
           levels: (levels || [
-            { itemStyle: { borderColor: '#555', borderWidth: 4, gapWidth: 4 } },
+            { itemStyle: { borderColor: chartColors.divider, borderWidth: 4, gapWidth: 4 } },
             {
               colorSaturation: [0.3, 0.6],
               itemStyle: { borderColorSaturation: 0.7, gapWidth: 2, borderWidth: 2 },

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

@@ -1,3 +1,3 @@
-export { ChartContainer, ChartSkeleton, ChartError, ChartEmpty } from './base/index.js';
+export { ChartContainer, ChartSkeleton, ChartError, ChartEmpty, type ChartContainerProps, type ChartSkeletonProps, type ChartErrorProps, type ChartEmptyProps, } from './base/index.js';
 export { LineChart, BarChart, PieChart, AreaChart, ScatterChart, DonutChart, } from './core/index.js';
 export { RadarChart, FunnelChart, GaugeChart, HeatmapChart, TreemapChart, CandlestickChart, SankeyChart, } from './extended/index.js';

package/dist/lib/components/index.js

@@ -1,5 +1,5 @@
 // Base components
-export { ChartContainer, ChartSkeleton, ChartError, ChartEmpty } from './base/index.js';
+export { ChartContainer, ChartSkeleton, ChartError, ChartEmpty, } from './base/index.js';
 // Core charts
 export { LineChart, BarChart, PieChart, AreaChart, ScatterChart, DonutChart, } from './core/index.js';
 // Extended charts

package/dist/lib/composables/useChart.svelte.js

@@ -1,9 +1,26 @@
 import { untrack } from 'svelte';
 import * as echarts from 'echarts/core';
+import { getReplaceMerge } from '@classic-homes/charts-core';
 import { useChartTheme } from './useChartTheme.svelte.js';
 import { useChartResize } from './useChartResize.svelte.js';
 import { useReducedMotion } from './useReducedMotion.svelte.js';
-const SET_OPTION_OPTS = { notMerge: false, lazyUpdate: true };
+const isComponentType = (mainType) => echarts.ComponentModel.hasClass(mainType);
+// The option last applied to each instance; a fresh instance has none
+const appliedOptions = new WeakMap();
+/**
+ * Apply a complete option on top of the one last applied to this instance.
+ * Series, graphics and components that dropped out of the option are replaced
+ * so they disappear; everything else is merged so legend selection and
+ * dataZoom ranges survive data updates.
+ */
+function applyOption(chart, next) {
+    const prev = appliedOptions.get(chart) ?? null;
+    chart.setOption(next, {
+        replaceMerge: getReplaceMerge(prev, next, isComponentType),
+        lazyUpdate: true,
+    });
+    appliedOptions.set(chart, next);
+}
 /**
  * Composable to manage ECharts instance lifecycle
  * Matches behavior of React useChart hook
@@ -34,7 +51,7 @@ export function useChart(opts) {
         // or callback changes update the chart instead of re-initializing it
         untrack(() => {
             if (!(opts.isEmpty?.() ?? false)) {
-                chart.setOption(resolveOption(), SET_OPTION_OPTS);
+                applyOption(chart, resolveOption());
             }
             opts.onReady?.(chart);
         });
@@ -55,7 +72,7 @@ export function useChart(opts) {
         const empty = opts.isEmpty?.() ?? false;
         if (!chart || chart.isDisposed() || empty)
             return;
-        chart.setOption(option, SET_OPTION_OPTS);
+        applyOption(chart, option);
     });
     return {
         get container() {

package/dist/lib/composables/useChartTheme.svelte.d.ts

@@ -3,7 +3,8 @@
  */
 export declare function registerClassicThemes(): void;
 /**
- * Create a reactive chart theme based on system/document dark mode
+ * Create a reactive chart theme based on the document dark mode class. 'auto'
+ * follows the `.dark` class on <html>, the same switch the token CSS keys on.
  * @param getPreference - A getter function that returns the current theme preference
  */
 export declare function useChartTheme(getPreference: () => 'light' | 'dark' | 'auto'): {

package/dist/lib/composables/useChartTheme.svelte.js

@@ -12,7 +12,8 @@ export function registerClassicThemes() {
     themesRegistered = true;
 }
 /**
- * Create a reactive chart theme based on system/document dark mode
+ * Create a reactive chart theme based on the document dark mode class. 'auto'
+ * follows the `.dark` class on <html>, the same switch the token CSS keys on.
  * @param getPreference - A getter function that returns the current theme preference
  */
 export function useChartTheme(getPreference) {
@@ -49,13 +50,8 @@ export function useChartTheme(getPreference) {
             attributes: true,
             attributeFilter: ['class'],
         });
-        // Also listen for media query changes
-        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-        const handleMediaChange = () => updateTheme();
-        mediaQuery.addEventListener('change', handleMediaChange);
         return () => {
             observer.disconnect();
-            mediaQuery.removeEventListener('change', handleMediaChange);
         };
     });
     return {

package/dist/lib/index.d.ts

@@ -3,7 +3,7 @@
  *
  * Svelte ECharts components for the Classic Theme design system
  */
-export { ChartContainer, ChartSkeleton, ChartError, ChartEmpty, LineChart, BarChart, PieChart, AreaChart, ScatterChart, DonutChart, RadarChart, FunnelChart, GaugeChart, HeatmapChart, TreemapChart, CandlestickChart, SankeyChart, } from './components/index.js';
-export { useChart, useChartTheme, registerClassicThemes, useReducedMotion, type UseChartOptions, type UseChartReturn, } from './composables/index.js';
+export { ChartContainer, ChartSkeleton, ChartError, ChartEmpty, type ChartContainerProps, type ChartSkeletonProps, type ChartErrorProps, type ChartEmptyProps, LineChart, BarChart, PieChart, AreaChart, ScatterChart, DonutChart, RadarChart, FunnelChart, GaugeChart, HeatmapChart, TreemapChart, CandlestickChart, SankeyChart, } from './components/index.js';
+export { useChart, useChartTheme, useChartResize, registerClassicThemes, useReducedMotion, type UseChartOptions, type UseChartReturn, } from './composables/index.js';
 export { cn } from './utils.js';
 export type { BaseChartProps, LineChartProps, BarChartProps, PieChartProps, DonutChartProps, AreaChartProps, ScatterChartProps, RadarChartProps, FunnelChartProps, GaugeChartProps, HeatmapChartProps, TreemapChartProps, CandlestickChartProps, SankeyChartProps, LineChartData, LineSeriesData, BarChartData, BarSeriesData, PieSliceData, AreaChartData, AreaSeriesData, ScatterChartData, ScatterSeriesData, RadarChartData, RadarSeriesData, RadarIndicator, FunnelSliceData, HeatmapData, TreemapNode, TreemapLevel, CandlestickData, CandlestickItem, SankeyData, SankeyNode, SankeyLink, BaseEventParams, DataPointEventParams, SliceEventParams, HeatmapEventParams, TreemapEventParams, CandlestickEventParams, SankeyEventParams, } from '@classic-homes/charts-core';

package/dist/lib/index.js

@@ -12,6 +12,6 @@ LineChart, BarChart, PieChart, AreaChart, ScatterChart, DonutChart,
 // Extended charts
 RadarChart, FunnelChart, GaugeChart, HeatmapChart, TreemapChart, CandlestickChart, SankeyChart, } from './components/index.js';
 // Composables
-export { useChart, useChartTheme, registerClassicThemes, useReducedMotion, } from './composables/index.js';
+export { useChart, useChartTheme, useChartResize, registerClassicThemes, useReducedMotion, } from './composables/index.js';
 // Utils
 export { cn } from './utils.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/charts-svelte",
-  "version": "0.1.37",
+  "version": "0.1.38",
   "description": "Svelte ECharts components for Classic Theme",
   "type": "module",
   "svelte": "./dist/lib/index.js",