kumo-svelte 0.1.0-beta.0

package/dist/components/chart/Color.js

@@ -0,0 +1,81 @@
+var ChartCategoricalLightColors;
+(function (ChartCategoricalLightColors) {
+    ChartCategoricalLightColors["Blue"] = "#4290F0";
+    ChartCategoricalLightColors["Yellow"] = "#F5B647";
+    ChartCategoricalLightColors["Pink"] = "#E8649D";
+    ChartCategoricalLightColors["Purple"] = "#8D58EE";
+    ChartCategoricalLightColors["Teal"] = "#50C3B6";
+    ChartCategoricalLightColors["Orange"] = "#D37536";
+})(ChartCategoricalLightColors || (ChartCategoricalLightColors = {}));
+var ChartCategoricalDarkColors;
+(function (ChartCategoricalDarkColors) {
+    ChartCategoricalDarkColors["Blue"] = "#4290F0";
+    ChartCategoricalDarkColors["Yellow"] = "#EEB720";
+    ChartCategoricalDarkColors["Pink"] = "#E8649D";
+    ChartCategoricalDarkColors["Purple"] = "#8D58EE";
+    ChartCategoricalDarkColors["Teal"] = "#50C3B6";
+    ChartCategoricalDarkColors["Orange"] = "#D37536";
+})(ChartCategoricalDarkColors || (ChartCategoricalDarkColors = {}));
+var ChartSemanticLightColors;
+(function (ChartSemanticLightColors) {
+    ChartSemanticLightColors["Attention"] = "#FC574A";
+    ChartSemanticLightColors["Warning"] = "#F8A054";
+    ChartSemanticLightColors["Success"] = "#00A63E";
+    ChartSemanticLightColors["Neutral"] = "#B9D6FF";
+    ChartSemanticLightColors["Disabled"] = "#CBCBCB";
+    ChartSemanticLightColors["Skeleton"] = "#DDDDDD";
+})(ChartSemanticLightColors || (ChartSemanticLightColors = {}));
+var ChartSemanticDarkColors;
+(function (ChartSemanticDarkColors) {
+    ChartSemanticDarkColors["Attention"] = "#FC574A";
+    ChartSemanticDarkColors["Warning"] = "#F8A054";
+    ChartSemanticDarkColors["Success"] = "#00A63E";
+    ChartSemanticDarkColors["Neutral"] = "#8EC5FF";
+    ChartSemanticDarkColors["Disabled"] = "#878787";
+    ChartSemanticDarkColors["Skeleton"] = "#5C5C5C";
+})(ChartSemanticDarkColors || (ChartSemanticDarkColors = {}));
+const sequentialLight = {
+    blues: ['#E1EAF4', '#8EBCF6', '#4290F0', '#0E58B4', '#03254F']
+};
+const sequentialDark = {
+    blues: ['#03254F', '#0E58B4', '#4290F0', '#A6BFDD', '#E1EAF4']
+};
+export const CHART_LIGHT_COLORS = [
+    ChartCategoricalLightColors.Blue,
+    ChartCategoricalLightColors.Yellow,
+    ChartCategoricalLightColors.Pink,
+    ChartCategoricalLightColors.Purple,
+    ChartCategoricalLightColors.Teal,
+    ChartCategoricalLightColors.Orange
+];
+export const CHART_DARK_COLORS = [
+    ChartCategoricalDarkColors.Blue,
+    ChartCategoricalDarkColors.Yellow,
+    ChartCategoricalDarkColors.Pink,
+    ChartCategoricalDarkColors.Purple,
+    ChartCategoricalDarkColors.Teal,
+    ChartCategoricalDarkColors.Orange
+];
+export var ChartPalette;
+(function (ChartPalette) {
+    function semantic(name, isDarkMode = false) {
+        return isDarkMode ? ChartSemanticDarkColors[name] : ChartSemanticLightColors[name];
+    }
+    ChartPalette.semantic = semantic;
+    function categorical(index, isDarkMode = false) {
+        return isDarkMode ? CHART_DARK_COLORS[index % CHART_DARK_COLORS.length] : CHART_LIGHT_COLORS[index % CHART_LIGHT_COLORS.length];
+    }
+    ChartPalette.categorical = categorical;
+    function sequential(palette, isDarkMode = false) {
+        return isDarkMode ? [...sequentialDark[palette]] : [...sequentialLight[palette]];
+    }
+    ChartPalette.sequential = sequential;
+    function text(variant, isDarkMode = false) {
+        const colors = {
+            light: { primary: '#6B7280', secondary: '#9CA3AF' },
+            dark: { primary: '#9CA3AF', secondary: '#6B7280' }
+        };
+        return isDarkMode ? colors.dark[variant] : colors.light[variant];
+    }
+    ChartPalette.text = text;
+})(ChartPalette || (ChartPalette = {}));

package/dist/components/chart/SankeyChart.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+  import type { EChartsOption } from 'echarts';
+  import Chart, { type ChartEvents } from './Chart.svelte';
+  import { ChartPalette } from './Color';
+
+  export interface SankeyNodeData {
+    id?: string;
+    name: string;
+    color?: string;
+    value?: number;
+    tooltipData?: Record<string, number | string>;
+    isDrillable?: boolean;
+    childCount?: number;
+  }
+
+  export interface SankeyLinkData {
+    id?: string;
+    source: number;
+    target: number;
+    value: number;
+    isDrillable?: boolean;
+  }
+
+  export interface SankeyTooltipParams {
+    type: 'node' | 'link';
+    name: string;
+    node?: SankeyNodeData;
+    link?: { source: string; target: string; value: number };
+    color?: string;
+  }
+
+  interface Props {
+    echarts: any;
+    nodes: SankeyNodeData[];
+    links: SankeyLinkData[];
+    height?: number;
+    showNodeValues?: boolean;
+    formatValue?: (value: number) => string;
+    tooltipFormatter?: (params: SankeyTooltipParams) => string;
+    nodeWidth?: number;
+    nodePadding?: number;
+    showTooltip?: boolean;
+    defaultNodeColor?: string;
+    left?: number | string;
+    right?: number | string;
+    linkColor?: 'gradient' | 'gray';
+    linkOpacity?: number;
+    class?: string;
+    isDarkMode?: boolean;
+    onNodeClick?: (node: SankeyNodeData) => void;
+    onLinkClick?: (link: SankeyLinkData) => void;
+  }
+
+  let {
+    echarts,
+    nodes,
+    links,
+    height = 400,
+    showNodeValues,
+    formatValue = (value: number) => value.toLocaleString(),
+    tooltipFormatter,
+    nodeWidth = 8,
+    nodePadding = 10,
+    showTooltip = true,
+    defaultNodeColor,
+    left,
+    right,
+    linkColor = 'gradient',
+    linkOpacity = 0.5,
+    class: className,
+    isDarkMode = false,
+    onNodeClick,
+    onLinkClick
+  }: Props = $props();
+
+  const escapeHtml = (str: string): string =>
+    str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+  const escapeRichText = (str: string): string => str.replace(/[{}|]/g, (char) => `\\${char}`);
+  const sanitizeColor = (color: string): string => (/^#(?:[0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color) ? color : '#666');
+
+  let options = $derived.by(() => {
+    const hasNodeValues = nodes.some((node) => node.value !== undefined);
+    const shouldShowValues = showNodeValues ?? hasNodeValues;
+    const labelColor = ChartPalette.text('primary', isDarkMode);
+    const secondaryColor = ChartPalette.text('secondary', isDarkMode);
+    const nodeDataMap = new Map(nodes.map((node) => [node.name, node]));
+    const chartNodes = nodes.map((node, index) => ({
+      name: node.name,
+      value: node.value,
+      itemStyle: { color: node.color ?? defaultNodeColor ?? ChartPalette.categorical(index, isDarkMode) }
+    }));
+    const chartLinks = links.map((link) => ({ source: nodes[link.source]?.name ?? '', target: nodes[link.target]?.name ?? '', value: link.value }));
+
+    return {
+      backgroundColor: 'transparent',
+      animation: true,
+      animationDuration: 500,
+      animationDurationUpdate: 300,
+      animationEasingUpdate: 'cubicInOut',
+      tooltip: showTooltip
+        ? {
+            trigger: 'item',
+            triggerOn: 'mousemove',
+            dangerousHtmlFormatter: (params: any) => {
+              if (params?.dataType === 'node' && params.name) {
+                const nodeData = nodeDataMap.get(params.name);
+                const color = sanitizeColor(nodeData?.color ?? params.color ?? '#666');
+                if (tooltipFormatter) return tooltipFormatter({ type: 'node', name: params.name, node: nodeData, color });
+                return `<div style="display:flex;align-items:center;gap:6px;"><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${color}"></span><strong>${escapeHtml(params.name)}</strong></div>`;
+              }
+              if (params?.dataType === 'edge' && params.data) {
+                const { source, target, value } = params.data;
+                if (tooltipFormatter) return tooltipFormatter({ type: 'link', name: `${source} -> ${target}`, link: { source, target, value } });
+                const sourceColor = sanitizeColor(nodeDataMap.get(source ?? '')?.color ?? '#666');
+                const targetColor = sanitizeColor(nodeDataMap.get(target ?? '')?.color ?? '#666');
+                return `<div style="display:flex;align-items:center;gap:6px;margin-bottom:4px;"><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${sourceColor}"></span><strong>${escapeHtml(source ?? '')}</strong><span style="color:${secondaryColor}">-></span><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${targetColor}"></span><strong>${escapeHtml(target ?? '')}</strong></div><strong>${value !== undefined ? escapeHtml(formatValue(value)) : ''}</strong>`;
+              }
+              return '';
+            }
+          }
+        : undefined,
+      series: [
+        {
+          type: 'sankey',
+          ...(left !== undefined && { left }),
+          ...(right !== undefined && { right }),
+          data: chartNodes,
+          links: chartLinks,
+          draggable: false,
+          emphasis: { focus: 'adjacency' },
+          nodeWidth,
+          nodeGap: nodePadding,
+          lineStyle: { color: linkColor === 'gradient' ? 'source' : '#d1d5db', opacity: linkColor === 'gradient' ? linkOpacity : 0.4, curveness: 0.5 },
+          label: {
+            show: true,
+            color: labelColor,
+            fontSize: 12,
+            formatter: shouldShowValues
+              ? (params: { name?: string }) => {
+                  const name = params.name ?? '';
+                  const nodeData = nodeDataMap.get(name);
+                  return nodeData?.value !== undefined ? `{value|${escapeRichText(formatValue(nodeData.value))}}\n{name|${escapeRichText(name)}}` : escapeRichText(name);
+                }
+              : undefined,
+            rich: shouldShowValues
+              ? {
+                  value: { fontSize: 11, color: labelColor, lineHeight: 16 },
+                  name: { fontSize: 12, color: labelColor, fontWeight: 700 }
+                }
+              : undefined
+          }
+        }
+      ]
+    } as EChartsOption;
+  });
+
+  let events = $derived<Partial<ChartEvents>>({
+    click: (params: any) => {
+      if (params.dataType === 'node' && onNodeClick && params.name) {
+        onNodeClick({ ...nodes.find((node) => node.name === params.name), name: params.name });
+      } else if (params.dataType === 'edge' && onLinkClick && params.data) {
+        const sourceIndex = nodes.findIndex((node) => node.name === params.data.source);
+        const targetIndex = nodes.findIndex((node) => node.name === params.data.target);
+        if (sourceIndex === -1 || targetIndex === -1) return;
+        const originalLink = links.find((link) => link.source === sourceIndex && link.target === targetIndex);
+        onLinkClick({ ...originalLink, source: sourceIndex, target: targetIndex, value: params.data.value ?? 0 });
+      }
+    }
+  });
+</script>
+
+<Chart {echarts} options={options as any} {height} class={className} {isDarkMode} onEvents={events} />

package/dist/components/chart/SankeyChart.svelte.d.ts

@@ -0,0 +1,51 @@
+export interface SankeyNodeData {
+    id?: string;
+    name: string;
+    color?: string;
+    value?: number;
+    tooltipData?: Record<string, number | string>;
+    isDrillable?: boolean;
+    childCount?: number;
+}
+export interface SankeyLinkData {
+    id?: string;
+    source: number;
+    target: number;
+    value: number;
+    isDrillable?: boolean;
+}
+export interface SankeyTooltipParams {
+    type: 'node' | 'link';
+    name: string;
+    node?: SankeyNodeData;
+    link?: {
+        source: string;
+        target: string;
+        value: number;
+    };
+    color?: string;
+}
+interface Props {
+    echarts: any;
+    nodes: SankeyNodeData[];
+    links: SankeyLinkData[];
+    height?: number;
+    showNodeValues?: boolean;
+    formatValue?: (value: number) => string;
+    tooltipFormatter?: (params: SankeyTooltipParams) => string;
+    nodeWidth?: number;
+    nodePadding?: number;
+    showTooltip?: boolean;
+    defaultNodeColor?: string;
+    left?: number | string;
+    right?: number | string;
+    linkColor?: 'gradient' | 'gray';
+    linkOpacity?: number;
+    class?: string;
+    isDarkMode?: boolean;
+    onNodeClick?: (node: SankeyNodeData) => void;
+    onLinkClick?: (link: SankeyLinkData) => void;
+}
+declare const SankeyChart: import("svelte").Component<Props, {}, "">;
+type SankeyChart = ReturnType<typeof SankeyChart>;
+export default SankeyChart;

package/dist/components/chart/TimeseriesChart.svelte

@@ -0,0 +1,237 @@
+<script lang="ts">
+  import type { SeriesOption } from 'echarts';
+  import type { EChartsType } from 'echarts/core';
+  import Chart, { type ChartEvents, type KumoChartOption } from './Chart.svelte';
+
+  export interface TimeseriesData {
+    name: string;
+    data: [number, number][];
+    color: string;
+  }
+
+  interface Props {
+    echarts: any;
+    type?: 'line' | 'bar';
+    data: TimeseriesData[];
+    xAxisName?: string;
+    xAxisTickCount?: number;
+    xAxisTickFormat?: (value: number) => string;
+    yAxisTickFormat?: (value: number) => string;
+    yAxisTickLabelFormat?: (value: number) => string;
+    yAxisName?: string;
+    yAxisTickCount?: number;
+    tooltipValueFormat?: (value: number) => string;
+    incomplete?: { before?: number; after?: number };
+    height?: number;
+    onTimeRangeChange?: (from: number, to: number) => void;
+    isDarkMode?: boolean;
+    gradient?: boolean;
+    loading?: boolean;
+    ariaDescription?: string;
+    animation?: boolean;
+    animationDuration?: number;
+    optionUpdateBehavior?: Record<string, unknown>;
+  }
+
+  let {
+    echarts,
+    type = 'line',
+    data,
+    xAxisName,
+    xAxisTickCount,
+    xAxisTickFormat,
+    yAxisTickFormat,
+    yAxisTickLabelFormat,
+    yAxisName,
+    yAxisTickCount,
+    tooltipValueFormat,
+    incomplete,
+    height = 350,
+    onTimeRangeChange,
+    isDarkMode = false,
+    gradient = false,
+    loading = false,
+    ariaDescription,
+    animation = true,
+    animationDuration = 600,
+    optionUpdateBehavior
+  }: Props = $props();
+
+  let chartRef: EChartsType | null = $state(null);
+
+  const colorWithOpacity = (color: string, alpha: number): string => {
+    const a = Math.max(0, Math.min(1, alpha));
+    const rgbMatch = color.match(/rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i);
+    if (rgbMatch) return `rgba(${rgbMatch[1]}, ${rgbMatch[2]}, ${rgbMatch[3]}, ${a})`;
+    let hex = color.replace(/^#/, '');
+    if (hex.length === 3) hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+    if (hex.length === 8) hex = hex.slice(0, 6);
+    return `rgba(${parseInt(hex.slice(0, 2), 16)}, ${parseInt(hex.slice(2, 4), 16)}, ${parseInt(hex.slice(4, 6), 16)}, ${a})`;
+  };
+
+  const pad = (n: number) => n.toString().padStart(2, '0');
+  const formatTimestamp = (ts: number | string | Date): string => {
+    const d = new Date(ts);
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+  };
+
+  let options = $derived.by(() => {
+    const incompleteBefore = incomplete?.before;
+    const incompleteAfter = incomplete?.after;
+    const series: SeriesOption[] = [];
+    const seriesType = type === 'bar' ? ({ type: 'bar', stack: 'total' } as const) : ({ type: 'line', showSymbol: false } as const);
+
+    for (const s of data) {
+      const incompleteBeforePoints = incompleteBefore && type === 'line' ? s.data.filter((point) => point[0] <= incompleteBefore) : [];
+      const incompleteAfterPoints = incompleteAfter && type === 'line' ? s.data.filter((point) => point[0] >= incompleteAfter) : [];
+      const completePoints =
+        incompleteBeforePoints.length > 0 || incompleteAfterPoints.length > 0
+          ? s.data.slice(Math.max(0, incompleteBeforePoints.length - 1), Math.max(0, s.data.length - incompleteAfterPoints.length + 1))
+          : s.data;
+
+      series.push({
+        data: completePoints,
+        color: s.color,
+        name: s.name,
+        emphasis: { focus: 'series' },
+        ...(gradient && type === 'line'
+          ? {
+              areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: colorWithOpacity(s.color, 0.4) },
+                  { offset: 1, color: colorWithOpacity(s.color, 0) }
+                ])
+              }
+            }
+          : {}),
+        ...seriesType
+      });
+
+      const incompleteConfig = {
+        color: s.color,
+        name: s.name,
+        type: 'line' as const,
+        lineStyle: { type: 'dashed' as const },
+        showSymbol: false,
+        emphasis: { focus: 'series' as const }
+      };
+      if (incompleteBeforePoints.length > 0) series.push({ ...incompleteConfig, data: incompleteBeforePoints });
+      if (incompleteAfterPoints.length > 0) series.push({ ...incompleteConfig, data: incompleteAfterPoints });
+    }
+
+    return {
+      aria: { enabled: true, ...(ariaDescription && { label: { description: ariaDescription } }) },
+      brush: {
+        xAxisIndex: 'all',
+        brushType: 'lineX',
+        brushMode: 'single',
+        outOfBrush: { colorAlpha: 0.3 },
+        brushStyle: { borderWidth: 1, color: 'rgba(120,140,180,0.3)', borderColor: 'rgba(120,140,180,0.8)' }
+      },
+      tooltip: {
+        trigger: 'axis',
+        appendTo: 'body',
+        axisPointer: { type: 'shadow' },
+        dangerousHtmlFormatter: (params: any) => {
+          const items = Array.isArray(params) ? params : [params];
+          const seenNames = new Set<string>();
+          const filtered = items.filter((param: any) => {
+            if (seenNames.has(param.seriesName)) return false;
+            seenNames.add(param.seriesName);
+            return true;
+          });
+          const ts = filtered[0]?.value?.[0] ?? filtered[0]?.axisValue;
+          const header = ts != null ? `<div style="font-weight:600;margin-bottom:4px;">${echarts.format.encodeHTML(formatTimestamp(ts))}</div>` : '';
+          const rows = filtered
+            .map((param: any) => {
+              const value = param?.value?.[1];
+              const formatFn = tooltipValueFormat ?? yAxisTickLabelFormat;
+              const formattedValue = formatFn ? echarts.format.encodeHTML(String(formatFn(value))) : echarts.format.encodeHTML(String(value));
+              return `${param.marker} ${echarts.format.encodeHTML(param.seriesName)}: <strong>${formattedValue}</strong>`;
+            })
+            .join('<br/>');
+          return `${header}${rows}`;
+        }
+      },
+      backgroundColor: 'transparent',
+      animation,
+      animationDuration,
+      animationDurationUpdate: 300,
+      animationEasing: 'cubicOut',
+      animationEasingUpdate: 'cubicOut',
+      toolbox: { show: false },
+      xAxis: {
+        name: xAxisName,
+        nameLocation: 'middle',
+        nameGap: 30,
+        type: 'time',
+        splitLine: { show: false },
+        axisLine: { show: false },
+        splitNumber: xAxisTickCount ?? 5,
+        ...(xAxisTickFormat && { axisLabel: { formatter: (value: number) => xAxisTickFormat(value) } })
+      },
+      yAxis: {
+        name: yAxisName,
+        nameLocation: 'middle',
+        nameGap: 40,
+        type: 'value',
+        axisTick: { show: true },
+        axisLabel: { margin: 15, ...(yAxisTickFormat && { formatter: (value: number) => yAxisTickFormat(value) }) },
+        splitLine: { show: true, lineStyle: { type: 'dashed', width: 1 } },
+        splitNumber: yAxisTickCount
+      },
+      grid: { left: yAxisName ? 30 : 24, right: 24, top: 24, bottom: xAxisName ? 30 : 24 },
+      series
+    } satisfies KumoChartOption;
+  });
+
+  let events = $derived<Partial<ChartEvents>>(
+    onTimeRangeChange
+      ? {
+          brushend: (params: any) => {
+            const range = params.areas?.[0]?.coordRange;
+            if (!range) return;
+            onTimeRangeChange(range[0], range[1]);
+            chartRef?.dispatchAction({ type: 'brush', areas: [] });
+          }
+        }
+      : {}
+  );
+
+  $effect(() => {
+    if (chartRef && onTimeRangeChange && !loading) {
+      chartRef.dispatchAction({
+        type: 'takeGlobalCursor',
+        key: 'brush',
+        brushOption: { brushType: 'lineX', brushMode: 'single' }
+      });
+    }
+  });
+</script>
+
+<div class="relative w-full" style:height={`${height}px`}>
+  {#if loading}
+    {@const mid = height / 2}
+    {@const amp = Math.min(height * 0.12, 28)}
+    {@const period = 400}
+    {@const wavePath = Array.from({ length: 121 }, (_, i) => {
+      const x = -period + (i / 120) * period * 3;
+      const y = mid + Math.sin((i / 120) * 2 * Math.PI * 3) * amp;
+      return `${i === 0 ? 'M' : 'L'}${x.toFixed(2)},${y.toFixed(2)}`;
+    }).join(' ')}
+    <div aria-hidden="true" class="absolute inset-0 overflow-hidden" style:height={`${height}px`}>
+      <svg width="100%" height={height} viewBox={`0 0 ${period} ${height}`} preserveAspectRatio="none" class="w-full animate-pulse">
+        <path
+          d={wavePath}
+          fill="none"
+          stroke={isDarkMode ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.2)'}
+          stroke-width="2"
+          style:animation="kumo-chart-wave 2.4s linear infinite"
+          style:transform-origin="0 0"
+        ></path>
+      </svg>
+    </div>
+  {:else}
+    <Chart {echarts} bind:chartRef options={options} {height} {isDarkMode} onEvents={events} optionUpdateBehavior={optionUpdateBehavior as any} />
+  {/if}
+</div>

package/dist/components/chart/TimeseriesChart.svelte.d.ts

@@ -0,0 +1,34 @@
+export interface TimeseriesData {
+    name: string;
+    data: [number, number][];
+    color: string;
+}
+interface Props {
+    echarts: any;
+    type?: 'line' | 'bar';
+    data: TimeseriesData[];
+    xAxisName?: string;
+    xAxisTickCount?: number;
+    xAxisTickFormat?: (value: number) => string;
+    yAxisTickFormat?: (value: number) => string;
+    yAxisTickLabelFormat?: (value: number) => string;
+    yAxisName?: string;
+    yAxisTickCount?: number;
+    tooltipValueFormat?: (value: number) => string;
+    incomplete?: {
+        before?: number;
+        after?: number;
+    };
+    height?: number;
+    onTimeRangeChange?: (from: number, to: number) => void;
+    isDarkMode?: boolean;
+    gradient?: boolean;
+    loading?: boolean;
+    ariaDescription?: string;
+    animation?: boolean;
+    animationDuration?: number;
+    optionUpdateBehavior?: Record<string, unknown>;
+}
+declare const TimeseriesChart: import("svelte").Component<Props, {}, "">;
+type TimeseriesChart = ReturnType<typeof TimeseriesChart>;
+export default TimeseriesChart;

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

@@ -0,0 +1,7 @@
+export { default as Chart } from './Chart.svelte';
+export { default as ChartLegend } from './ChartLegend.svelte';
+export { default as TimeseriesChart } from './TimeseriesChart.svelte';
+export { default as SankeyChart } from './SankeyChart.svelte';
+export { ChartPalette, CHART_DARK_COLORS, CHART_LIGHT_COLORS } from './Color';
+export type { ChartSemanticColorName } from './Color';
+export type { KumoChartOption, SafeTooltipOption, ChartEvents } from './Chart.svelte';

package/dist/components/chart/index.js

@@ -0,0 +1,5 @@
+export { default as Chart } from './Chart.svelte';
+export { default as ChartLegend } from './ChartLegend.svelte';
+export { default as TimeseriesChart } from './TimeseriesChart.svelte';
+export { default as SankeyChart } from './SankeyChart.svelte';
+export { ChartPalette, CHART_DARK_COLORS, CHART_LIGHT_COLORS } from './Color';