@classic-homes/charts-svelte 0.2.0 → 0.3.0

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

@@ -4,32 +4,32 @@
     ScatterChart as EChartsScatterChart,
     LineChart as EChartsLineChart,
   } from 'echarts/charts';
-  import {
-    GridComponent,
-    TooltipComponent,
-    LegendComponent,
-    TitleComponent,
-  } from 'echarts/components';
-  import { CanvasRenderer } from 'echarts/renderers';
+  import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components';
   import type { EChartsOption } from 'echarts';
 
-  import type { ScatterChartProps, DataPointEventParams } from '@classic-homes/charts-core';
+  import type { ScatterChartProps } from '@classic-homes/charts-core';
   import {
     buildAxis,
     buildDataLabel,
     buildLegend,
     buildTooltip,
+    chartFormatters,
     escapeHtml,
     formatTooltipValue,
     generateScatterChartDescription,
     getChartColors,
     gridInset,
     mergeChartOption,
+    resolveValueFormatter,
+    scatterTable,
     seriesLabelLookup,
+    trendLine,
     withPointLabels,
+    withReferenceMarks,
   } from '@classic-homes/charts-core';
 
   import { cn } from '../../utils.js';
+  import { chartEvents, toDataPointParams } from '../../events.js';
   import { useChart } from '../../composables/useChart.svelte.js';
   import {
     useChartLegend,
@@ -45,8 +45,6 @@
     GridComponent,
     TooltipComponent,
     LegendComponent,
-    TitleComponent,
-    CanvasRenderer,
   ]);
 
   interface Props extends Omit<ScatterChartProps, 'class'>, CustomLegendProps {
@@ -58,8 +56,11 @@
     description,
     data,
     height = 400,
+    minHeight,
+    maxHeight,
     loading,
     error,
+    onRetry,
     emptyMessage,
     theme = 'auto',
     animation = true,
@@ -69,35 +70,53 @@
     showTrendLine = false,
     symbolSize = 10,
     showLabels = false,
+    valueFormat,
+    locale,
     labelFormatter,
     xAxisConfig,
     yAxisConfig,
+    referenceLines,
+    referenceBands,
     tooltipFormatter,
     tooltipValueFormatter,
     legend: legendConfig,
     renderLegend,
     onLegendChange,
     option: optionOverride,
+    onReady,
+    events,
+    showDataTable,
+    exportable,
+    patterns,
     onClick,
+    onHover,
     class: className,
   }: Props = $props();
 
   const isEmpty = $derived(!data?.series?.length || data.series.every((s) => !s.data?.length));
 
+  // `valueFormat` applies to y values; format x with `xAxisConfig.formatter`
+  const formatters = $derived(
+    chartFormatters({ valueFormat, locale, tooltipValueFormatter, labelFormatter })
+  );
+
+  // Per-element colours that follow the resolved chart theme
+  const chartColors = $derived.by(() => getChartColors(chart.theme));
+
   const option: EChartsOption = $derived.by(() => {
     if (isEmpty) return {};
 
     const getLabel = seriesLabelLookup(data.series);
 
-    const series: EChartsOption['series'] = data.series.map((s) => ({
+    const series: Record<string, unknown>[] = data.series.map((s) => ({
       name: s.name,
       type: 'scatter',
-      data: withPointLabels(s.data, s.labels, labelFormatter, { position: 'top' }),
-      symbolSize: typeof symbolSize === 'function' ? symbolSize : symbolSize,
+      data: withPointLabels(s.data, s.labels, formatters.label, { position: 'top' }),
+      symbolSize,
       itemStyle: s.color ? { color: s.color } : undefined,
       label: buildDataLabel({ show: true, position: 'top' }, undefined, {
         show: showLabels,
-        formatter: labelFormatter,
+        formatter: formatters.label,
         getLabel,
       }),
       emphasis: {
@@ -109,47 +128,24 @@
       },
     }));
 
-    // Add trend lines if enabled
+    // Trend lines share their series' name and colour, so the legend toggles
+    // both together; they ignore the pointer
     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;
-
-        // A loop: spreading large arrays into Math.min/max overflows the stack
-        let minX = Infinity;
-        let maxX = -Infinity;
-        for (const [x] of s.data) {
-          if (x < minX) minX = x;
-          if (x > maxX) maxX = x;
-        }
-
-        (series as unknown[]).push({
-          name: `${s.name} Trend`,
+        const ends = trendLine(s.data);
+        if (!ends) return;
+        series.push({
+          name: s.name,
           type: 'line',
-          data: [
-            [minX, slope * minX + intercept],
-            [maxX, slope * maxX + intercept],
-          ],
+          data: ends,
           smooth: false,
           showSymbol: false,
+          silent: true,
+          tooltip: { show: false },
           lineStyle: {
             type: 'dashed',
             opacity: 0.7,
+            color: s.color || chartColors.series[index % chartColors.series.length],
           },
           emphasis: {
             disabled: true,
@@ -175,14 +171,14 @@
               const p = params as { seriesName?: string; value?: number[] };
               if (!p.value) return '';
               const x = formatTooltipValue(p.value[0], tooltipValueFormatter);
-              const y = formatTooltipValue(p.value[1], tooltipValueFormatter);
+              const y = formatTooltipValue(p.value[1], formatters.tooltip);
               return `${escapeHtml(p.seriesName)}<br/>X: ${escapeHtml(x)}<br/>Y: ${escapeHtml(y)}`;
             },
           },
           {
             show: showTooltip,
             formatter: tooltipFormatter,
-            valueFormatter: tooltipValueFormatter,
+            valueFormatter: formatters.tooltip,
             getLabel,
           }
         ),
@@ -207,9 +203,14 @@
               show: showGrid,
             },
           },
-          yAxisConfig
+          formatters.axis(yAxisConfig)
         ),
-        series,
+        series: withReferenceMarks(series, referenceLines, referenceBands, {
+          valueAxis: 'y',
+          format: formatters.format,
+          color: chartColors.reference,
+          bandColor: chartColors.referenceBand,
+        }),
       } as EChartsOption,
       optionOverride
     );
@@ -219,6 +220,10 @@
     description || (!isEmpty ? generateScatterChartDescription(title, data) : undefined)
   );
 
+  const dataTable = $derived(
+    isEmpty ? undefined : scatterTable(data, xAxisConfig?.name, yAxisConfig?.name)
+  );
+
   // Legend selection state, shared with a custom legend
   const legend = useChartLegend({
     names: () => data?.series?.map((s) => s.name) ?? [],
@@ -235,23 +240,14 @@
     theme: () => theme,
     animation: () => animation,
     isEmpty: () => isEmpty,
-    onReady: (instance) => {
-      legend.attach(instance);
-      if (onClick) {
-        instance.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);
-        });
-      }
-    },
+    patterns: () => patterns,
+    events: () =>
+      chartEvents(events, {
+        click: onClick && ((params) => onClick(toDataPointParams(params, 'click'))),
+        mouseover: onHover && ((params) => onHover(toDataPointParams(params, 'mouseover'))),
+      }),
+    onReady: (instance) => legend.attach(instance),
+    onCreated: () => onReady,
   });
 </script>
 
@@ -263,13 +259,21 @@
   {title}
   description={accessibilityDescription}
   {height}
+  {minHeight}
+  {maxHeight}
   {loading}
   {error}
+  {onRetry}
   empty={isEmpty}
   {emptyMessage}
   class={cn(className)}
   legend={renderLegend ? customLegend : undefined}
   legendPosition={legendConfig?.position}
+  {dataTable}
+  {showDataTable}
+  format={resolveValueFormatter(valueFormat, locale)}
+  {exportable}
+  exportImage={chart.exportImage}
 >
   <div bind:this={chart.container} class="h-full w-full"></div>
 </ChartContainer>

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

@@ -4,36 +4,25 @@
     CandlestickChart as EChartsCandlestickChart,
     BarChart as EChartsBarChart,
   } from 'echarts/charts';
-  import {
-    GridComponent,
-    TooltipComponent,
-    TitleComponent,
-    DataZoomComponent,
-  } from 'echarts/components';
-  import { CanvasRenderer } from 'echarts/renderers';
+  import { GridComponent, TooltipComponent } from 'echarts/components';
   import type { EChartsOption } from 'echarts';
 
   import type { CandlestickChartProps, CandlestickEventParams } from '@classic-homes/charts-core';
   import {
     buildAxis,
     buildTooltip,
+    candlestickTable,
     getChartColors,
     mergeChartOption,
+    resolveValueFormatter,
   } from '@classic-homes/charts-core';
 
   import { cn } from '../../utils.js';
+  import { chartEvents } from '../../events.js';
   import { useChart } from '../../composables/useChart.svelte.js';
   import ChartContainer from '../base/ChartContainer.svelte';
 
-  echarts.use([
-    EChartsCandlestickChart,
-    EChartsBarChart,
-    GridComponent,
-    TooltipComponent,
-    TitleComponent,
-    DataZoomComponent,
-    CanvasRenderer,
-  ]);
+  echarts.use([EChartsCandlestickChart, EChartsBarChart, GridComponent, TooltipComponent]);
 
   interface Props extends Omit<CandlestickChartProps, 'class'> {
     class?: string;
@@ -44,22 +33,39 @@
     description,
     data,
     height = 400,
+    minHeight,
+    maxHeight,
     loading,
     error,
+    onRetry,
     emptyMessage,
     theme = 'auto',
     animation = true,
     showTooltip = true,
     showVolume = false,
+    showGrid = true,
+    zoomStart = 80,
     xAxisConfig,
     yAxisConfig,
     tooltipFormatter,
     tooltipValueFormatter,
     option: optionOverride,
+    valueFormat,
+    locale,
+    onReady,
+    events,
+    showDataTable,
+    exportable,
+    patterns,
     onClick,
     class: className,
   }: Props = $props();
 
+  // `valueFormat` writes values in tooltips and the data table
+  const valueFormatter = $derived(
+    tooltipValueFormatter ?? resolveValueFormatter(valueFormat, locale)
+  );
+
   const isEmpty = $derived(!data?.dates?.length || !data?.data?.length);
 
   // Per-element colours that follow the resolved chart theme
@@ -75,11 +81,12 @@
         name: title,
         type: 'candlestick',
         data: candlestickData,
+        // ECharts draws rising candles with `color` and falling ones with `color0`
         itemStyle: {
-          color: chartColors.destructive,
-          color0: chartColors.success,
-          borderColor: chartColors.destructive,
-          borderColor0: chartColors.success,
+          color: chartColors.success,
+          color0: chartColors.destructive,
+          borderColor: chartColors.success,
+          borderColor0: chartColors.destructive,
         },
       },
     ];
@@ -95,7 +102,7 @@
           data: data.dates,
           boundaryGap: false,
           axisLine: { onZero: false },
-          splitLine: { show: false },
+          splitLine: { show: showGrid },
           min: 'dataMin',
           max: 'dataMax',
         },
@@ -103,7 +110,10 @@
       ),
     ];
     const yAxisArr: unknown[] = [
-      buildAxis({ scale: true, splitArea: { show: true } }, yAxisConfig),
+      buildAxis(
+        { scale: true, splitArea: { show: showGrid }, splitLine: { show: showGrid } },
+        yAxisConfig
+      ),
     ];
 
     if (showVolume && data.volume) {
@@ -143,14 +153,14 @@
       {
         tooltip: buildTooltip(
           { trigger: 'axis', axisPointer: { type: 'cross' } },
-          { show: showTooltip, formatter: tooltipFormatter, valueFormatter: tooltipValueFormatter }
+          { show: showTooltip, formatter: tooltipFormatter, valueFormatter }
         ),
         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 },
+          { type: 'inside', start: zoomStart, end: 100 },
+          { show: true, type: 'slider', top: '90%', start: zoomStart, end: 100 },
         ],
         series: seriesArr,
       } as EChartsOption,
@@ -163,31 +173,36 @@
       (!isEmpty ? `${title}. Candlestick chart with ${data.dates.length} data points.` : undefined)
   );
 
+  const dataTable = $derived(isEmpty ? undefined : candlestickTable(data));
+
   // Manage ECharts instance lifecycle (init, theme, resize, option updates)
   const chart = useChart({
     option: () => option,
     theme: () => theme,
     animation: () => animation,
     isEmpty: () => isEmpty,
-    onReady: (instance) => {
-      if (onClick) {
-        instance.on('click', (params) => {
-          const dataIndex = params.dataIndex || 0;
-          const item = data.data[dataIndex];
-          if (!item) return;
-          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);
-        });
-      }
-    },
+    patterns: () => patterns,
+    events: () =>
+      chartEvents(events, {
+        click:
+          onClick &&
+          ((params) => {
+            const dataIndex = params.dataIndex || 0;
+            const item = data.data[dataIndex];
+            if (!item) return;
+            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);
+          }),
+      }),
+    onCreated: () => onReady,
   });
 </script>
 
@@ -195,11 +210,19 @@
   {title}
   description={accessibilityDescription}
   {height}
+  {minHeight}
+  {maxHeight}
   {loading}
   {error}
+  {onRetry}
   empty={isEmpty}
   {emptyMessage}
   class={cn(className)}
+  {dataTable}
+  {showDataTable}
+  format={valueFormatter}
+  {exportable}
+  exportImage={chart.exportImage}
 >
   <div bind:this={chart.container} class="h-full w-full"></div>
 </ChartContainer>

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

@@ -1,11 +1,10 @@
 <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 { TooltipComponent, LegendComponent } from 'echarts/components';
   import type { EChartsOption } from 'echarts';
 
-  import type { FunnelChartProps, SliceEventParams } from '@classic-homes/charts-core';
+  import type { FunnelChartProps } from '@classic-homes/charts-core';
   import {
     buildDataLabel,
     buildLegend,
@@ -16,9 +15,12 @@
     itemLabelLookup,
     mergeChartOption,
     pointLabel,
+    resolveValueFormatter,
+    sliceTable,
   } from '@classic-homes/charts-core';
 
   import { cn } from '../../utils.js';
+  import { chartEvents, toSliceParams } from '../../events.js';
   import { useChart } from '../../composables/useChart.svelte.js';
   import {
     useChartLegend,
@@ -26,13 +28,7 @@
   } from '../../composables/useChartLegend.svelte.js';
   import ChartContainer from '../base/ChartContainer.svelte';
 
-  echarts.use([
-    EChartsFunnelChart,
-    TooltipComponent,
-    LegendComponent,
-    TitleComponent,
-    CanvasRenderer,
-  ]);
+  echarts.use([EChartsFunnelChart, TooltipComponent, LegendComponent]);
 
   interface Props extends Omit<FunnelChartProps, 'class'>, CustomLegendProps {
     class?: string;
@@ -43,8 +39,11 @@
     description,
     data,
     height = 400,
+    minHeight,
+    maxHeight,
     loading,
     error,
+    onRetry,
     emptyMessage,
     theme = 'auto',
     animation = true,
@@ -60,10 +59,22 @@
     renderLegend,
     onLegendChange,
     option: optionOverride,
+    valueFormat,
+    locale,
+    onReady,
+    events,
+    showDataTable,
+    exportable,
+    patterns,
     onClick,
     class: className,
   }: Props = $props();
 
+  // `valueFormat` writes values in tooltips and the data table
+  const valueFormatter = $derived(
+    tooltipValueFormatter ?? resolveValueFormatter(valueFormat, locale)
+  );
+
   const isEmpty = $derived(!data?.length);
 
   const option: EChartsOption = $derived.by(() => {
@@ -78,17 +89,17 @@
             trigger: 'item',
             // A string template ignores valueFormatter, so format the value here
             formatter:
-              tooltipValueFormatter && !tooltipFormatter
+              valueFormatter && !tooltipFormatter
                 ? (params: unknown) => {
                     const p = params as { seriesName?: string; name?: string; value?: unknown };
-                    return `${escapeHtml(p.seriesName)} <br/>${escapeHtml(p.name)}: ${escapeHtml(formatTooltipValue(p.value, tooltipValueFormatter))}`;
+                    return `${escapeHtml(p.seriesName)} <br/>${escapeHtml(p.name)}: ${escapeHtml(formatTooltipValue(p.value, valueFormatter))}`;
                   }
                 : '{a} <br/>{b}: {c}',
           },
           {
             show: showTooltip,
             formatter: tooltipFormatter,
-            valueFormatter: tooltipValueFormatter,
+            valueFormatter,
             getLabel,
           }
         ),
@@ -147,26 +158,21 @@
     onLegendChange: () => onLegendChange,
   });
 
+  const dataTable = $derived(isEmpty ? undefined : sliceTable(data, 'Stage'));
+
   // Manage ECharts instance lifecycle (init, theme, resize, option updates)
   const chart = useChart({
     option: () => option,
     theme: () => theme,
     animation: () => animation,
     isEmpty: () => isEmpty,
-    onReady: (instance) => {
-      legend.attach(instance);
-      if (onClick) {
-        instance.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);
-        });
-      }
-    },
+    patterns: () => patterns,
+    events: () =>
+      chartEvents(events, {
+        click: onClick && ((params) => onClick(toSliceParams(params, 'click'))),
+      }),
+    onReady: (instance) => legend.attach(instance),
+    onCreated: () => onReady,
   });
 </script>
 
@@ -178,13 +184,21 @@
   {title}
   description={accessibilityDescription}
   {height}
+  {minHeight}
+  {maxHeight}
   {loading}
   {error}
+  {onRetry}
   empty={isEmpty}
   {emptyMessage}
   class={cn(className)}
   legend={renderLegend ? customLegend : undefined}
   legendPosition={legendConfig?.position}
+  {dataTable}
+  {showDataTable}
+  format={valueFormatter}
+  {exportable}
+  exportImage={chart.exportImage}
 >
   <div bind:this={chart.container} class="h-full w-full"></div>
 </ChartContainer>