@classic-homes/charts-svelte 0.1.1

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

@@ -0,0 +1,113 @@
+<script lang="ts">
+  import * as echarts from 'echarts/core';
+  import { GaugeChart as EChartsGaugeChart } from 'echarts/charts';
+  import { TitleComponent } from 'echarts/components';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import type { EChartsOption } from 'echarts';
+
+  import type { GaugeChartProps } 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([EChartsGaugeChart, TitleComponent, CanvasRenderer]);
+
+  interface Props extends Omit<GaugeChartProps, 'class'> {
+    class?: string;
+  }
+
+  let {
+    title,
+    description,
+    value,
+    min = 0,
+    max = 100,
+    height = 400,
+    loading,
+    error,
+    emptyMessage,
+    theme = 'auto',
+    animation = true,
+    splitNumber = 10,
+    showProgress = true,
+    formatValue,
+    class: className,
+  }: Props = $props();
+
+  let containerEl: HTMLDivElement | null = $state(null);
+  let chart: echarts.ECharts | null = null;
+
+  const chartTheme = useChartTheme(() => theme);
+  const reducedMotion = useReducedMotion();
+
+  const option: EChartsOption = $derived({
+    series: [
+      {
+        type: 'gauge',
+        center: ['50%', '60%'],
+        radius: '80%',
+        min,
+        max,
+        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 },
+        anchor: { show: true, size: 20, itemStyle: { borderWidth: 2 } },
+        pointer: { width: 6, length: '60%' },
+        title: { show: true, offsetCenter: [0, '70%'], fontSize: 14 },
+        detail: {
+          valueAnimation: animation && !reducedMotion.value,
+          fontSize: 28,
+          fontWeight: 'bold',
+          offsetCenter: [0, '40%'],
+          formatter: formatValue || '{value}',
+        },
+        data: [{ value, name: title }],
+      },
+    ],
+    animation: animation && !reducedMotion.value,
+  });
+
+  const accessibilityDescription = $derived(
+    description || `${title}. Gauge showing value ${value} on scale from ${min} to ${max}.`
+  );
+
+  // Initialize chart instance (only depends on container and theme)
+  $effect(() => {
+    if (!containerEl) return;
+    if (chart) chart.dispose();
+    chart = echarts.init(containerEl, chartTheme.theme);
+
+    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) {
+      chart.setOption(option, { notMerge: true, lazyUpdate: true });
+    }
+  });
+</script>
+
+<ChartContainer
+  {title}
+  description={accessibilityDescription}
+  {height}
+  {loading}
+  {error}
+  {emptyMessage}
+  class={cn(className)}
+>
+  <div bind:this={containerEl} class="h-full w-full"></div>
+</ChartContainer>

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

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

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

@@ -0,0 +1,159 @@
+<script lang="ts">
+  import * as echarts from 'echarts/core';
+  import { HeatmapChart as EChartsHeatmapChart } from 'echarts/charts';
+  import {
+    GridComponent,
+    TooltipComponent,
+    TitleComponent,
+    VisualMapComponent,
+  } from 'echarts/components';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import type { EChartsOption } from 'echarts';
+
+  import type { HeatmapChartProps, HeatmapEventParams } 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([
+    EChartsHeatmapChart,
+    GridComponent,
+    TooltipComponent,
+    TitleComponent,
+    VisualMapComponent,
+    CanvasRenderer,
+  ]);
+
+  interface Props extends Omit<HeatmapChartProps, 'class'> {
+    class?: string;
+  }
+
+  let {
+    title,
+    description,
+    data,
+    xAxis,
+    yAxis,
+    height = 400,
+    loading,
+    error,
+    emptyMessage,
+    theme = 'auto',
+    animation = true,
+    showTooltip = true,
+    showValues = 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?.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));
+
+  const option: EChartsOption = $derived.by(() => {
+    if (isEmpty) return {};
+
+    return {
+      tooltip: showTooltip
+        ? {
+            position: 'top' as const,
+            formatter: (params: unknown) => {
+              const p = params as { value?: [number, number, number] };
+              if (!p.value) return '';
+              const [xIdx, yIdx, value] = p.value;
+              return `${xAxis[xIdx]} / ${yAxis[yIdx]}: ${value}`;
+            },
+          }
+        : undefined,
+      grid: { left: '3%', right: '10%', bottom: '3%', containLabel: true },
+      xAxis: { type: 'category', data: xAxis, splitArea: { show: true } },
+      yAxis: { type: 'category', data: yAxis, splitArea: { show: true } },
+      visualMap: {
+        min: minValue,
+        max: maxValue,
+        calculable: true,
+        orient: 'vertical',
+        right: '0%',
+        top: 'center',
+      },
+      series: [
+        {
+          name: title,
+          type: 'heatmap',
+          data: data.data,
+          label: showValues ? { show: true } : undefined,
+          emphasis: { itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)' } },
+        },
+      ],
+      animation: animation && !reducedMotion.value,
+    };
+  });
+
+  const accessibilityDescription = $derived(
+    description ||
+      (!isEmpty
+        ? `${title}. Heatmap with ${xAxis.length} columns and ${yAxis.length} rows.`
+        : 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 [xIdx, yIdx, value] = (params.value as [number, number, number]) || [0, 0, 0];
+        onClick({
+          type: params.type || 'click',
+          componentType: params.componentType || 'series',
+          xIndex: xIdx,
+          yIndex: yIdx,
+          xLabel: xAxis[xIdx],
+          yLabel: yAxis[yIdx],
+          value,
+        } as HeatmapEventParams);
+      });
+    }
+
+    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/HeatmapChart.svelte.d.ts

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

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

@@ -0,0 +1,131 @@
+<script lang="ts">
+  import * as echarts from 'echarts/core';
+  import { RadarChart as EChartsRadarChart } from 'echarts/charts';
+  import {
+    TooltipComponent,
+    LegendComponent,
+    TitleComponent,
+    RadarComponent,
+  } from 'echarts/components';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import type { EChartsOption } from 'echarts';
+
+  import type { RadarChartProps } 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([
+    EChartsRadarChart,
+    TooltipComponent,
+    LegendComponent,
+    TitleComponent,
+    RadarComponent,
+    CanvasRenderer,
+  ]);
+
+  interface Props extends Omit<RadarChartProps, 'class'> {
+    class?: string;
+  }
+
+  let {
+    title,
+    description,
+    data,
+    indicators,
+    height = 400,
+    loading,
+    error,
+    emptyMessage,
+    theme = 'auto',
+    animation = true,
+    showLegend = true,
+    showTooltip = true,
+    shape = 'polygon',
+    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 || !indicators?.length || data.series.every((s) => !s.data?.length)
+  );
+
+  const option: EChartsOption = $derived.by(() => {
+    if (isEmpty) return {};
+
+    return {
+      tooltip: showTooltip ? { trigger: 'item' } : undefined,
+      legend: showLegend ? { data: data.series.map((s) => s.name), bottom: 0 } : undefined,
+      radar: {
+        indicator: indicators.map((ind) => ({
+          name: ind.name,
+          max: ind.max,
+          min: ind.min,
+        })),
+        shape,
+      },
+      series: [
+        {
+          type: 'radar',
+          data: data.series.map((series) => ({
+            name: series.name,
+            value: series.data,
+            itemStyle: series.color ? { color: series.color } : undefined,
+            areaStyle: { opacity: 0.2 },
+          })),
+        },
+      ],
+      animation: animation && !reducedMotion.value,
+    };
+  });
+
+  const accessibilityDescription = $derived(
+    description ||
+      (!isEmpty
+        ? `${title}. Radar chart with ${indicators.length} dimensions comparing ${data.series.length} series.`
+        : undefined)
+  );
+
+  // Initialize chart instance (only depends on container and theme)
+  $effect(() => {
+    if (!containerEl) return;
+    if (chart) chart.dispose();
+    chart = echarts.init(containerEl, chartTheme.theme);
+
+    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/RadarChart.svelte.d.ts

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

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

@@ -0,0 +1,129 @@
+<script lang="ts">
+  import * as echarts from 'echarts/core';
+  import { SankeyChart as EChartsSankeyChart } from 'echarts/charts';
+  import { TooltipComponent, TitleComponent } from 'echarts/components';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import type { EChartsOption } from 'echarts';
+
+  import type { SankeyChartProps, SankeyEventParams } 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([EChartsSankeyChart, TooltipComponent, TitleComponent, CanvasRenderer]);
+
+  interface Props extends Omit<SankeyChartProps, 'class'> {
+    class?: string;
+  }
+
+  let {
+    title,
+    description,
+    data,
+    height = 400,
+    loading,
+    error,
+    emptyMessage,
+    theme = 'auto',
+    animation = true,
+    showTooltip = true,
+    orient = 'horizontal',
+    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?.nodes?.length || !data?.links?.length);
+
+  const option: EChartsOption = $derived.by(() => {
+    if (isEmpty) return {};
+
+    return {
+      tooltip: showTooltip ? { trigger: 'item', triggerOn: 'mousemove' } : undefined,
+      series: [
+        {
+          type: 'sankey',
+          orient,
+          emphasis: { focus: 'adjacency' },
+          data: data.nodes.map((node) => ({
+            name: node.name,
+            itemStyle: node.color ? { color: node.color } : undefined,
+          })),
+          links: data.links.map((link) => ({
+            source: link.source,
+            target: link.target,
+            value: link.value,
+          })),
+          lineStyle: { color: 'gradient', curveness: 0.5 },
+          label: { position: orient === 'horizontal' ? 'right' : 'bottom' },
+        },
+      ],
+      animation: animation && !reducedMotion.value,
+    };
+  });
+
+  const accessibilityDescription = $derived(
+    description ||
+      (!isEmpty
+        ? `${title}. Sankey diagram with ${data.nodes.length} nodes and ${data.links.length} links.`
+        : 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 isEdge = params.dataType === 'edge';
+        onClick({
+          type: params.type || 'click',
+          componentType: params.componentType || 'series',
+          dataType: isEdge ? 'edge' : 'node',
+          name: params.name || '',
+          value: isEdge ? (params.value as number) : undefined,
+          source: isEdge ? (params.data as { source?: string })?.source : undefined,
+          target: isEdge ? (params.data as { target?: string })?.target : undefined,
+        } as SankeyEventParams);
+      });
+    }
+
+    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/SankeyChart.svelte.d.ts

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

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

@@ -0,0 +1,133 @@
+<script lang="ts">
+  import * as echarts from 'echarts/core';
+  import { TreemapChart as EChartsTreemapChart } from 'echarts/charts';
+  import { TooltipComponent, TitleComponent } from 'echarts/components';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import type { EChartsOption } from 'echarts';
+
+  import type { TreemapChartProps, TreemapEventParams } 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([EChartsTreemapChart, TooltipComponent, TitleComponent, CanvasRenderer]);
+
+  interface Props extends Omit<TreemapChartProps, 'class'> {
+    class?: string;
+  }
+
+  let {
+    title,
+    description,
+    data,
+    levels,
+    height = 400,
+    loading,
+    error,
+    emptyMessage,
+    theme = 'auto',
+    animation = true,
+    showTooltip = 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
+        ? {
+            formatter: (params: unknown) => {
+              const p = params as { name?: string; value?: number };
+              return `${p.name}: ${p.value}`;
+            },
+          }
+        : undefined,
+      series: [
+        {
+          type: 'treemap',
+          data,
+          roam: false,
+          levels: (levels || [
+            { itemStyle: { borderColor: '#555', borderWidth: 4, gapWidth: 4 } },
+            {
+              colorSaturation: [0.3, 0.6],
+              itemStyle: { borderColorSaturation: 0.7, gapWidth: 2, borderWidth: 2 },
+            },
+            { colorSaturation: [0.3, 0.5], itemStyle: { borderColorSaturation: 0.6, gapWidth: 1 } },
+            { colorSaturation: [0.3, 0.5] },
+          ]) as unknown[],
+          label: { show: true, formatter: '{b}' },
+          upperLabel: { show: true, height: 30 },
+          breadcrumb: { show: true },
+        },
+      ] as EChartsOption['series'],
+      animation: animation && !reducedMotion.value,
+    };
+  });
+
+  const accessibilityDescription = $derived(
+    description || (!isEmpty ? `${title}. Treemap chart showing hierarchical 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) => {
+        const treePathInfo = params.treePathInfo || [];
+        onClick({
+          type: params.type || 'click',
+          componentType: params.componentType || 'series',
+          name: params.name || '',
+          value: params.value as number,
+          path: treePathInfo.map((item: { name?: string }) => item.name || ''),
+          depth: treePathInfo.length - 1,
+        } as TreemapEventParams);
+      });
+    }
+
+    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>