@classic-homes/charts-svelte 0.1.1

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

@@ -0,0 +1,224 @@
+<script lang="ts">
+  import * as echarts from 'echarts/core';
+  import { ScatterChart as EChartsScatterChart } from 'echarts/charts';
+  import {
+    GridComponent,
+    TooltipComponent,
+    LegendComponent,
+    TitleComponent,
+  } from 'echarts/components';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import type { EChartsOption } from 'echarts';
+
+  import type { ScatterChartProps, DataPointEventParams } from '@classic-homes/charts-core';
+  import { generateScatterChartDescription } 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 ChartContainer from '../base/ChartContainer.svelte';
+
+  // Register required ECharts modules
+  echarts.use([
+    EChartsScatterChart,
+    GridComponent,
+    TooltipComponent,
+    LegendComponent,
+    TitleComponent,
+    CanvasRenderer,
+  ]);
+
+  interface Props extends Omit<ScatterChartProps, 'class'> {
+    class?: string;
+  }
+
+  let {
+    title,
+    description,
+    data,
+    height = 400,
+    loading,
+    error,
+    emptyMessage,
+    theme = 'auto',
+    animation = true,
+    showLegend = true,
+    showTooltip = true,
+    showGrid = true,
+    showTrendLine = false,
+    symbolSize = 10,
+    onClick,
+    class: className,
+  }: Props = $props();
+
+  let containerEl: HTMLDivElement | null = $state(null);
+  let chart: echarts.ECharts | null = null;
+
+  const chartTheme = useChartTheme(() => theme);
+  const reducedMotion = useReducedMotion();
+
+  const isEmpty = $derived(!data?.series?.length || data.series.every((s) => !s.data?.length));
+
+  const option: EChartsOption = $derived.by(() => {
+    if (isEmpty) return {};
+
+    const series: EChartsOption['series'] = data.series.map((s) => ({
+      name: s.name,
+      type: 'scatter',
+      data: s.data,
+      symbolSize: typeof symbolSize === 'function' ? symbolSize : symbolSize,
+      itemStyle: s.color ? { color: s.color } : undefined,
+      emphasis: {
+        focus: 'series',
+        itemStyle: {
+          shadowBlur: 10,
+          shadowColor: 'rgba(0, 0, 0, 0.5)',
+        },
+      },
+    }));
+
+    // Add trend lines if enabled
+    if (showTrendLine) {
+      data.series.forEach((s, index) => {
+        if (s.data.length < 2) return;
+
+        const n = s.data.length;
+        let sumX = 0,
+          sumY = 0,
+          sumXY = 0,
+          sumX2 = 0;
+
+        s.data.forEach(([x, y]) => {
+          sumX += x;
+          sumY += y;
+          sumXY += x * y;
+          sumX2 += x * x;
+        });
+
+        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);
+
+        (series as unknown[]).push({
+          name: `${s.name} Trend`,
+          type: 'line',
+          data: [
+            [minX, slope * minX + intercept],
+            [maxX, slope * maxX + intercept],
+          ],
+          smooth: false,
+          showSymbol: false,
+          lineStyle: {
+            type: 'dashed',
+            opacity: 0.7,
+          },
+          emphasis: {
+            disabled: true,
+          },
+          z: index,
+        });
+      });
+    }
+
+    return {
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true,
+      },
+      tooltip: showTooltip
+        ? {
+            trigger: 'item' as const,
+            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]}`;
+            },
+          }
+        : undefined,
+      legend: showLegend
+        ? {
+            data: data.series.map((s) => s.name),
+            bottom: 0,
+          }
+        : undefined,
+      xAxis: {
+        type: 'value',
+        splitLine: {
+          show: showGrid,
+        },
+      },
+      yAxis: {
+        type: 'value',
+        splitLine: {
+          show: showGrid,
+        },
+      },
+      series,
+      animation: animation && !reducedMotion.value,
+    };
+  });
+
+  const accessibilityDescription = $derived(
+    description || (!isEmpty ? generateScatterChartDescription(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);
+      });
+    }
+
+    const handleResize = () => chart?.resize();
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      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 });
+    }
+  });
+</script>
+
+<ChartContainer
+  {title}
+  description={accessibilityDescription}
+  {height}
+  {loading}
+  {error}
+  empty={isEmpty}
+  {emptyMessage}
+  class={cn(className)}
+>
+  <div bind:this={containerEl} class="h-full w-full"></div>
+</ChartContainer>

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

@@ -0,0 +1,7 @@
+import type { ScatterChartProps } from '@classic-homes/charts-core';
+interface Props extends Omit<ScatterChartProps, 'class'> {
+    class?: string;
+}
+declare const ScatterChart: import("svelte").Component<Props, {}, "">;
+type ScatterChart = ReturnType<typeof ScatterChart>;
+export default ScatterChart;

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

@@ -0,0 +1,6 @@
+export { default as LineChart } from './LineChart.svelte';
+export { default as BarChart } from './BarChart.svelte';
+export { default as PieChart } from './PieChart.svelte';
+export { default as AreaChart } from './AreaChart.svelte';
+export { default as ScatterChart } from './ScatterChart.svelte';
+export { default as DonutChart } from './DonutChart.svelte';

package/dist/lib/components/core/index.js

@@ -0,0 +1,6 @@
+export { default as LineChart } from './LineChart.svelte';
+export { default as BarChart } from './BarChart.svelte';
+export { default as PieChart } from './PieChart.svelte';
+export { default as AreaChart } from './AreaChart.svelte';
+export { default as ScatterChart } from './ScatterChart.svelte';
+export { default as DonutChart } from './DonutChart.svelte';

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

@@ -0,0 +1,200 @@
+<script lang="ts">
+  import * as echarts from 'echarts/core';
+  import {
+    CandlestickChart as EChartsCandlestickChart,
+    BarChart as EChartsBarChart,
+  } from 'echarts/charts';
+  import {
+    GridComponent,
+    TooltipComponent,
+    TitleComponent,
+    DataZoomComponent,
+  } from 'echarts/components';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import type { EChartsOption } from 'echarts';
+
+  import type { CandlestickChartProps, CandlestickEventParams } 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 ChartContainer from '../base/ChartContainer.svelte';
+
+  echarts.use([
+    EChartsCandlestickChart,
+    EChartsBarChart,
+    GridComponent,
+    TooltipComponent,
+    TitleComponent,
+    DataZoomComponent,
+    CanvasRenderer,
+  ]);
+
+  interface Props extends Omit<CandlestickChartProps, 'class'> {
+    class?: string;
+  }
+
+  let {
+    title,
+    description,
+    data,
+    height = 400,
+    loading,
+    error,
+    emptyMessage,
+    theme = 'auto',
+    animation = true,
+    showTooltip = true,
+    showVolume = false,
+    onClick,
+    class: className,
+  }: Props = $props();
+
+  let containerEl: HTMLDivElement | null = $state(null);
+  let chart: echarts.ECharts | null = null;
+
+  const chartTheme = useChartTheme(() => theme);
+  const reducedMotion = useReducedMotion();
+
+  const isEmpty = $derived(!data?.dates?.length || !data?.data?.length);
+
+  const option: EChartsOption = $derived.by(() => {
+    if (isEmpty) return {};
+
+    const candlestickData = data.data.map((item) => [item.open, item.close, item.low, item.high]);
+
+    const seriesArr: EChartsOption['series'] = [
+      {
+        name: title,
+        type: 'candlestick',
+        data: candlestickData,
+        itemStyle: {
+          color: '#ef4444',
+          color0: '#22c55e',
+          borderColor: '#ef4444',
+          borderColor0: '#22c55e',
+        },
+      },
+    ];
+
+    const gridArr: { left: string; right: string; top: number | string; height: string }[] = [
+      { left: '10%', right: '10%', top: 60, height: showVolume ? '50%' : '70%' },
+    ];
+    const xAxisArr: unknown[] = [
+      {
+        type: 'category',
+        data: data.dates,
+        boundaryGap: false,
+        axisLine: { onZero: false },
+        splitLine: { show: false },
+        min: 'dataMin',
+        max: 'dataMax',
+      },
+    ];
+    const yAxisArr: unknown[] = [{ scale: true, splitArea: { show: true } }];
+
+    if (showVolume && data.volume) {
+      gridArr.push({ left: '10%', right: '10%', top: '73%', height: '12%' });
+      xAxisArr.push({
+        type: 'category',
+        gridIndex: 1,
+        data: data.dates,
+        boundaryGap: false,
+        axisLine: { onZero: false },
+        axisTick: { show: false },
+        splitLine: { show: false },
+        axisLabel: { show: false },
+        min: 'dataMin',
+        max: 'dataMax',
+      });
+      yAxisArr.push({
+        scale: true,
+        gridIndex: 1,
+        splitNumber: 2,
+        axisLabel: { show: false },
+        axisLine: { show: false },
+        axisTick: { show: false },
+        splitLine: { show: false },
+      });
+      (seriesArr as unknown[]).push({
+        name: 'Volume',
+        type: 'bar',
+        xAxisIndex: 1,
+        yAxisIndex: 1,
+        data: data.volume,
+        itemStyle: { color: '#6b7280' },
+      });
+    }
+
+    return {
+      tooltip: showTooltip ? { trigger: 'axis', axisPointer: { type: 'cross' } } : undefined,
+      grid: gridArr,
+      xAxis: xAxisArr as EChartsOption['xAxis'],
+      yAxis: yAxisArr as EChartsOption['yAxis'],
+      dataZoom: [
+        { type: 'inside', start: 80, end: 100 },
+        { show: true, type: 'slider', top: '90%', start: 80, end: 100 },
+      ],
+      series: seriesArr,
+      animation: animation && !reducedMotion.value,
+    };
+  });
+
+  const accessibilityDescription = $derived(
+    description ||
+      (!isEmpty ? `${title}. Candlestick chart with ${data.dates.length} data points.` : 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) => {
+        const dataIndex = params.dataIndex || 0;
+        const item = data.data[dataIndex];
+        onClick({
+          type: params.type || 'click',
+          componentType: params.componentType || 'series',
+          date: data.dates[dataIndex],
+          open: item.open,
+          close: item.close,
+          high: item.high,
+          low: item.low,
+          volume: data.volume?.[dataIndex],
+        } as CandlestickEventParams);
+      });
+    }
+
+    const handleResize = () => chart?.resize();
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      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 });
+    }
+  });
+</script>
+
+<ChartContainer
+  {title}
+  description={accessibilityDescription}
+  {height}
+  {loading}
+  {error}
+  empty={isEmpty}
+  {emptyMessage}
+  class={cn(className)}
+>
+  <div bind:this={containerEl} class="h-full w-full"></div>
+</ChartContainer>

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

@@ -0,0 +1,7 @@
+import type { CandlestickChartProps } from '@classic-homes/charts-core';
+interface Props extends Omit<CandlestickChartProps, 'class'> {
+    class?: string;
+}
+declare const CandlestickChart: import("svelte").Component<Props, {}, "">;
+type CandlestickChart = ReturnType<typeof CandlestickChart>;
+export default CandlestickChart;

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

@@ -0,0 +1,142 @@
+<script lang="ts">
+  import * as echarts from 'echarts/core';
+  import { FunnelChart as EChartsFunnelChart } from 'echarts/charts';
+  import { TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import type { EChartsOption } from 'echarts';
+
+  import type { FunnelChartProps, SliceEventParams } 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 ChartContainer from '../base/ChartContainer.svelte';
+
+  echarts.use([
+    EChartsFunnelChart,
+    TooltipComponent,
+    LegendComponent,
+    TitleComponent,
+    CanvasRenderer,
+  ]);
+
+  interface Props extends Omit<FunnelChartProps, 'class'> {
+    class?: string;
+  }
+
+  let {
+    title,
+    description,
+    data,
+    height = 400,
+    loading,
+    error,
+    emptyMessage,
+    theme = 'auto',
+    animation = true,
+    showLegend = true,
+    showTooltip = true,
+    sort = 'descending',
+    orientation = 'vertical',
+    showLabels = true,
+    onClick,
+    class: className,
+  }: Props = $props();
+
+  let containerEl: HTMLDivElement | null = $state(null);
+  let chart: echarts.ECharts | null = null;
+
+  const chartTheme = useChartTheme(() => theme);
+  const reducedMotion = useReducedMotion();
+
+  const isEmpty = $derived(!data?.length);
+
+  const option: EChartsOption = $derived.by(() => {
+    if (isEmpty) return {};
+
+    return {
+      tooltip: showTooltip ? { trigger: 'item', formatter: '{a} <br/>{b}: {c}' } : undefined,
+      legend: showLegend ? { data: data.map((d) => d.name), bottom: 0 } : undefined,
+      series: [
+        {
+          name: title,
+          type: 'funnel',
+          left: '10%',
+          top: 60,
+          bottom: 60,
+          width: '80%',
+          min: 0,
+          max: Math.max(...data.map((d) => d.value)),
+          minSize: '0%',
+          maxSize: '100%',
+          sort,
+          orient: orientation,
+          gap: 2,
+          label: showLabels
+            ? { show: true, position: 'inside', formatter: '{b}: {c}' }
+            : { show: false },
+          labelLine: { show: false },
+          emphasis: { label: { fontSize: 16 } },
+          data: data.map((item) => ({
+            name: item.name,
+            value: item.value,
+            itemStyle: item.color ? { color: item.color } : undefined,
+          })),
+        },
+      ],
+      animation: animation && !reducedMotion.value,
+    };
+  });
+
+  const accessibilityDescription = $derived(
+    description || (!isEmpty ? `${title}. Funnel chart with ${data.length} stages.` : 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,
+          color: params.color as string,
+        } as SliceEventParams);
+      });
+    }
+
+    const handleResize = () => chart?.resize();
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      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 });
+    }
+  });
+</script>
+
+<ChartContainer
+  {title}
+  description={accessibilityDescription}
+  {height}
+  {loading}
+  {error}
+  empty={isEmpty}
+  {emptyMessage}
+  class={cn(className)}
+>
+  <div bind:this={containerEl} class="h-full w-full"></div>
+</ChartContainer>

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

@@ -0,0 +1,7 @@
+import type { FunnelChartProps } from '@classic-homes/charts-core';
+interface Props extends Omit<FunnelChartProps, 'class'> {
+    class?: string;
+}
+declare const FunnelChart: import("svelte").Component<Props, {}, "">;
+type FunnelChart = ReturnType<typeof FunnelChart>;
+export default FunnelChart;