@classic-homes/charts-svelte 0.1.1

package/dist/lib/components/base/ChartContainer.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+  import ChartSkeleton from './ChartSkeleton.svelte';
+  import ChartError from './ChartError.svelte';
+  import ChartEmpty from './ChartEmpty.svelte';
+
+  interface Props {
+    title: string;
+    description?: string;
+    height?: number | string;
+    loading?: boolean;
+    error?: string | null;
+    empty?: boolean;
+    emptyMessage?: string;
+    onRetry?: () => void;
+    class?: string;
+    wrapperClass?: string;
+    children: Snippet;
+  }
+
+  let {
+    title,
+    description,
+    height = 400,
+    loading,
+    error,
+    empty,
+    emptyMessage,
+    onRetry,
+    class: className,
+    wrapperClass,
+    children,
+  }: Props = $props();
+
+  const heightStyle = $derived(typeof height === 'number' ? `${height}px` : height);
+  const descriptionId = $derived(
+    description ? `${title.replace(/\s+/g, '-').toLowerCase()}-desc` : undefined
+  );
+</script>
+
+{#if loading}
+  <ChartSkeleton {height} class={wrapperClass} />
+{:else if error}
+  <ChartError message={error} {height} {onRetry} class={wrapperClass} />
+{:else if empty}
+  <ChartEmpty message={emptyMessage} {height} class={wrapperClass} />
+{:else}
+  <div
+    role="img"
+    aria-label={title}
+    aria-describedby={descriptionId}
+    data-testid="chart-container"
+    class={cn('rounded-lg border border-border bg-card', wrapperClass)}
+  >
+    {#if description}
+      <span id={descriptionId} class="sr-only">{description}</span>
+    {/if}
+    <div class={cn('h-full w-full', className)} style:height={heightStyle}>
+      {@render children()}
+    </div>
+  </div>
+{/if}

package/dist/lib/components/base/ChartContainer.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title: string;
+    description?: string;
+    height?: number | string;
+    loading?: boolean;
+    error?: string | null;
+    empty?: boolean;
+    emptyMessage?: string;
+    onRetry?: () => void;
+    class?: string;
+    wrapperClass?: string;
+    children: Snippet;
+}
+declare const ChartContainer: import("svelte").Component<Props, {}, "">;
+type ChartContainer = ReturnType<typeof ChartContainer>;
+export default ChartContainer;

package/dist/lib/components/base/ChartEmpty.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    message?: string;
+    height?: number | string;
+    class?: string;
+  }
+
+  let { message = 'No data available', height = 400, class: className }: Props = $props();
+
+  const heightStyle = $derived(typeof height === 'number' ? `${height}px` : height);
+</script>
+
+<div
+  data-testid="chart-empty"
+  class={cn(
+    'flex flex-col items-center justify-center rounded-lg border border-border bg-muted/50',
+    className
+  )}
+  style:height={heightStyle}
+>
+  <svg
+    class="mb-3 h-10 w-10 text-muted-foreground"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.5"
+      d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
+    />
+  </svg>
+  <p class="text-sm text-muted-foreground">{message}</p>
+</div>

package/dist/lib/components/base/ChartEmpty.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    message?: string;
+    height?: number | string;
+    class?: string;
+}
+declare const ChartEmpty: import("svelte").Component<Props, {}, "">;
+type ChartEmpty = ReturnType<typeof ChartEmpty>;
+export default ChartEmpty;

package/dist/lib/components/base/ChartError.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    message: string;
+    height?: number | string;
+    onRetry?: () => void;
+    class?: string;
+  }
+
+  let { message, height = 400, onRetry, class: className }: Props = $props();
+
+  const heightStyle = $derived(typeof height === 'number' ? `${height}px` : height);
+</script>
+
+<div
+  data-testid="chart-error"
+  role="alert"
+  class={cn(
+    'flex flex-col items-center justify-center rounded-lg border border-destructive/50 bg-destructive/10',
+    className
+  )}
+  style:height={heightStyle}
+>
+  <svg
+    class="mb-3 h-10 w-10 text-destructive"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      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>
+  {#if onRetry}
+    <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"
+    >
+      Retry
+    </button>
+  {/if}
+</div>

package/dist/lib/components/base/ChartError.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    message: string;
+    height?: number | string;
+    onRetry?: () => void;
+    class?: string;
+}
+declare const ChartError: import("svelte").Component<Props, {}, "">;
+type ChartError = ReturnType<typeof ChartError>;
+export default ChartError;

package/dist/lib/components/base/ChartSkeleton.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    height?: number | string;
+    class?: string;
+  }
+
+  let { height = 400, class: className }: Props = $props();
+
+  const heightStyle = $derived(typeof height === 'number' ? `${height}px` : height);
+</script>
+
+<div
+  data-testid="chart-skeleton"
+  class={cn('animate-pulse rounded-lg border border-border bg-muted', className)}
+  style:height={heightStyle}
+>
+  <div class="flex h-full flex-col p-4">
+    <!-- Title skeleton -->
+    <div class="mb-4 h-5 w-1/3 rounded bg-muted-foreground/20"></div>
+
+    <!-- Chart area skeleton -->
+    <div class="flex flex-1 items-end gap-2 px-4 pb-8">
+      {#each [40, 65, 45, 80, 55, 70, 50] as barHeight}
+        <div class="flex-1 rounded-t bg-muted-foreground/20" style:height="{barHeight}%"></div>
+      {/each}
+    </div>
+
+    <!-- X-axis skeleton -->
+    <div class="flex justify-between px-4">
+      {#each [1, 2, 3, 4, 5, 6, 7] as _}
+        <div class="h-3 w-8 rounded bg-muted-foreground/20"></div>
+      {/each}
+    </div>
+  </div>
+</div>

package/dist/lib/components/base/ChartSkeleton.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    height?: number | string;
+    class?: string;
+}
+declare const ChartSkeleton: import("svelte").Component<Props, {}, "">;
+type ChartSkeleton = ReturnType<typeof ChartSkeleton>;
+export default ChartSkeleton;

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

@@ -0,0 +1,4 @@
+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';

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

@@ -0,0 +1,4 @@
+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';

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

@@ -0,0 +1,198 @@
+<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 { 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 ChartContainer from '../base/ChartContainer.svelte';
+
+  // Register required ECharts modules
+  echarts.use([
+    EChartsLineChart,
+    GridComponent,
+    TooltipComponent,
+    LegendComponent,
+    TitleComponent,
+    CanvasRenderer,
+  ]);
+
+  interface Props extends Omit<AreaChartProps, 'class'> {
+    class?: string;
+  }
+
+  let {
+    title,
+    description,
+    data,
+    height = 400,
+    loading,
+    error,
+    emptyMessage,
+    theme = 'auto',
+    animation = true,
+    showLegend = true,
+    showTooltip = true,
+    showGrid = true,
+    smooth = false,
+    stacked = false,
+    gradient = 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?.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,
+      },
+      yAxis: {
+        type: 'value',
+        splitLine: {
+          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,
+      })),
+      animation: animation && !reducedMotion.value,
+    };
+  });
+
+  const accessibilityDescription = $derived(
+    description ||
+      (!isEmpty
+        ? `${title}. Area chart with ${data.categories.length} data points across ${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);
+
+    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/AreaChart.svelte.d.ts

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

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

@@ -0,0 +1,186 @@
+<script lang="ts">
+  import * as echarts from 'echarts/core';
+  import { BarChart as EChartsBarChart } from 'echarts/charts';
+  import {
+    GridComponent,
+    TooltipComponent,
+    LegendComponent,
+    TitleComponent,
+  } from 'echarts/components';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import type { EChartsOption } from 'echarts';
+
+  import type { BarChartProps, DataPointEventParams } from '@classic-homes/charts-core';
+  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 ChartContainer from '../base/ChartContainer.svelte';
+
+  // Register required ECharts modules
+  echarts.use([
+    EChartsBarChart,
+    GridComponent,
+    TooltipComponent,
+    LegendComponent,
+    TitleComponent,
+    CanvasRenderer,
+  ]);
+
+  interface Props extends Omit<BarChartProps, 'class'> {
+    class?: string;
+  }
+
+  let {
+    title,
+    description,
+    data,
+    height = 400,
+    loading,
+    error,
+    emptyMessage,
+    theme = 'auto',
+    animation = true,
+    showLegend = true,
+    showTooltip = true,
+    showGrid = true,
+    orientation = 'vertical',
+    stacked = false,
+    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?.categories?.length || !data?.series?.length || data.series.every((s) => !s.data?.length)
+  );
+
+  const isHorizontal = $derived(orientation === 'horizontal');
+
+  const option: EChartsOption = $derived.by(() => {
+    if (isEmpty) return {};
+
+    const categoryAxis = {
+      type: 'category' as const,
+      data: data.categories,
+      axisTick: {
+        alignWithLabel: true,
+      },
+    };
+
+    const valueAxis = {
+      type: 'value' as const,
+      splitLine: {
+        show: showGrid,
+      },
+    };
+
+    return {
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true,
+      },
+      tooltip: showTooltip
+        ? {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow',
+            },
+          }
+        : undefined,
+      legend: showLegend
+        ? {
+            data: data.series.map((s) => s.name),
+            bottom: 0,
+          }
+        : undefined,
+      xAxis: isHorizontal ? valueAxis : categoryAxis,
+      yAxis: isHorizontal ? categoryAxis : valueAxis,
+      series: data.series.map((series) => ({
+        name: series.name,
+        type: 'bar',
+        data: series.data,
+        stack: stacked ? 'Total' : undefined,
+        itemStyle: series.color ? { color: series.color } : undefined,
+        label: showValues
+          ? {
+              show: true,
+              position: isHorizontal ? 'right' : 'top',
+            }
+          : undefined,
+        emphasis: {
+          focus: 'series',
+        },
+      })),
+      animation: animation && !reducedMotion.value,
+    };
+  });
+
+  const accessibilityDescription = $derived(
+    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);
+      });
+    }
+
+    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/BarChart.svelte.d.ts

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