@classic-homes/charts-svelte 0.1.1

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

@@ -0,0 +1,207 @@
+<script lang="ts">
+  import * as echarts from 'echarts/core';
+  import { PieChart as EChartsPieChart } from 'echarts/charts';
+  import { TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import type { EChartsOption } from 'echarts';
+
+  import type { DonutChartProps, SliceEventParams } from '@classic-homes/charts-core';
+  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 ChartContainer from '../base/ChartContainer.svelte';
+
+  // Register required ECharts modules
+  echarts.use([EChartsPieChart, TooltipComponent, LegendComponent, TitleComponent, CanvasRenderer]);
+
+  interface Props extends Omit<DonutChartProps, 'class'> {
+    class?: string;
+  }
+
+  let {
+    title,
+    description,
+    data,
+    height = 400,
+    loading,
+    error,
+    emptyMessage,
+    theme = 'auto',
+    animation = true,
+    showLegend = true,
+    showTooltip = true,
+    showLabels = true,
+    labelPosition = 'outside',
+    innerRadius = '50%',
+    centerLabel,
+    centerValue,
+    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 {};
+
+    const graphicElements: unknown[] = [];
+
+    if (centerLabel || centerValue) {
+      graphicElements.push({
+        type: 'group',
+        left: 'center',
+        top: '40%',
+        children: [
+          ...(centerValue !== undefined
+            ? [
+                {
+                  type: 'text',
+                  style: {
+                    text: String(centerValue),
+                    fontSize: 28,
+                    fontWeight: 'bold',
+                    fill: 'currentColor',
+                    align: 'center',
+                  },
+                  top: 0,
+                  left: 'center',
+                },
+              ]
+            : []),
+          ...(centerLabel
+            ? [
+                {
+                  type: 'text',
+                  style: {
+                    text: centerLabel,
+                    fontSize: 14,
+                    fill: '#888',
+                    align: 'center',
+                  },
+                  top: centerValue !== undefined ? 35 : 0,
+                  left: 'center',
+                },
+              ]
+            : []),
+        ],
+      });
+    }
+
+    return {
+      tooltip: showTooltip
+        ? {
+            trigger: 'item',
+            formatter: '{a} <br/>{b}: {c} ({d}%)',
+          }
+        : undefined,
+      legend: showLegend
+        ? {
+            orient: 'horizontal',
+            bottom: 0,
+            data: data.map((d) => d.name),
+          }
+        : undefined,
+      graphic:
+        graphicElements.length > 0 ? (graphicElements as EChartsOption['graphic']) : undefined,
+      series: [
+        {
+          name: title,
+          type: 'pie',
+          radius: [innerRadius, '70%'],
+          center: ['50%', '45%'],
+          avoidLabelOverlap: true,
+          data: data.map((item) => ({
+            name: item.name,
+            value: item.value,
+            itemStyle: item.color ? { color: item.color } : undefined,
+          })),
+          label: showLabels
+            ? {
+                show: true,
+                position: labelPosition,
+                formatter: labelPosition === 'inside' ? '{d}%' : '{b}: {d}%',
+              }
+            : {
+                show: false,
+              },
+          labelLine: {
+            show: showLabels && labelPosition === 'outside',
+          },
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: 'rgba(0, 0, 0, 0.5)',
+            },
+          },
+        },
+      ],
+      animation: animation && !reducedMotion.value,
+    };
+  });
+
+  const accessibilityDescription = $derived(
+    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);
+      });
+    }
+
+    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/DonutChart.svelte.d.ts

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

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

@@ -0,0 +1,203 @@
+<script lang="ts">
+  import * as echarts from 'echarts/core';
+  import { LineChart as EChartsLineChart } from 'echarts/charts';
+  import {
+    GridComponent,
+    TooltipComponent,
+    LegendComponent,
+    TitleComponent,
+  } from 'echarts/components';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import type { EChartsOption } from 'echarts';
+
+  import type { LineChartProps, DataPointEventParams } from '@classic-homes/charts-core';
+  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 ChartContainer from '../base/ChartContainer.svelte';
+
+  // Register required ECharts modules
+  echarts.use([
+    EChartsLineChart,
+    GridComponent,
+    TooltipComponent,
+    LegendComponent,
+    TitleComponent,
+    CanvasRenderer,
+  ]);
+
+  interface Props extends Omit<LineChartProps, 'class'> {
+    class?: string;
+  }
+
+  let {
+    title,
+    description,
+    data,
+    height = 400,
+    loading,
+    error,
+    emptyMessage,
+    theme = 'auto',
+    animation = true,
+    showLegend = true,
+    showTooltip = true,
+    showGrid = true,
+    smooth = false,
+    areaFilled = false,
+    showDataPoints = false,
+    stacked = false,
+    onClick,
+    onHover,
+    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?.categories?.length || !data?.series?.length || data.series.every((s) => !s.data?.length)
+  );
+
+  const option: EChartsOption = $derived.by(() => {
+    if (isEmpty) return {};
+
+    return {
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true,
+      },
+      tooltip: showTooltip
+        ? {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'cross',
+              label: {
+                backgroundColor: '#6a7985',
+              },
+            },
+          }
+        : undefined,
+      legend: showLegend
+        ? {
+            data: data.series.map((s) => s.name),
+            bottom: 0,
+          }
+        : undefined,
+      xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        data: data.categories,
+        splitLine: {
+          show: showGrid,
+        },
+      },
+      yAxis: {
+        type: 'value',
+        splitLine: {
+          show: showGrid,
+        },
+      },
+      series: data.series.map((series) => ({
+        name: series.name,
+        type: 'line',
+        data: series.data,
+        smooth,
+        showSymbol: showDataPoints,
+        symbolSize: showDataPoints ? 6 : 0,
+        stack: stacked ? 'Total' : undefined,
+        areaStyle: areaFilled ? { opacity: 0.3 } : undefined,
+        itemStyle: series.color ? { color: series.color } : undefined,
+        emphasis: {
+          focus: 'series',
+        },
+      })),
+      animation: animation && !reducedMotion.value,
+    };
+  });
+
+  const accessibilityDescription = $derived(
+    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);
+      });
+    }
+
+    // Resize handler
+    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/LineChart.svelte.d.ts

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

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

@@ -0,0 +1,156 @@
+<script lang="ts">
+  import * as echarts from 'echarts/core';
+  import { PieChart as EChartsPieChart } from 'echarts/charts';
+  import { TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import type { EChartsOption } from 'echarts';
+
+  import type { PieChartProps, SliceEventParams } from '@classic-homes/charts-core';
+  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 ChartContainer from '../base/ChartContainer.svelte';
+
+  // Register required ECharts modules
+  echarts.use([EChartsPieChart, TooltipComponent, LegendComponent, TitleComponent, CanvasRenderer]);
+
+  interface Props extends Omit<PieChartProps, 'class'> {
+    class?: string;
+  }
+
+  let {
+    title,
+    description,
+    data,
+    height = 400,
+    loading,
+    error,
+    emptyMessage,
+    theme = 'auto',
+    animation = true,
+    showLegend = true,
+    showTooltip = true,
+    showLabels = true,
+    labelPosition = 'outside',
+    innerRadius = 0,
+    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} ({d}%)',
+          }
+        : undefined,
+      legend: showLegend
+        ? {
+            orient: 'horizontal',
+            bottom: 0,
+            data: data.map((d) => d.name),
+          }
+        : undefined,
+      series: [
+        {
+          name: title,
+          type: 'pie',
+          radius: innerRadius === 0 ? '70%' : ['50%', '70%'],
+          center: ['50%', '45%'],
+          data: data.map((item) => ({
+            name: item.name,
+            value: item.value,
+            itemStyle: item.color ? { color: item.color } : undefined,
+          })),
+          label: showLabels
+            ? {
+                show: true,
+                position: labelPosition,
+                formatter: labelPosition === 'inside' ? '{d}%' : '{b}: {d}%',
+              }
+            : {
+                show: false,
+              },
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: 'rgba(0, 0, 0, 0.5)',
+            },
+          },
+        },
+      ],
+      animation: animation && !reducedMotion.value,
+    };
+  });
+
+  const accessibilityDescription = $derived(
+    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);
+      });
+    }
+
+    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/PieChart.svelte.d.ts

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