@classic-homes/charts-svelte 0.6.0 → 0.7.0

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

@@ -32,6 +32,9 @@
     withGhostSeries,
     withReferenceMarks,
     withZoomInset,
+    selectionShowsSymbols,
+    withSelectedPoints,
+    withSelectionDescription,
   } from '@classic-homes/charts-core';
 
   import { cn } from '../../utils.js';
@@ -90,6 +93,8 @@
     showDataTable,
     exportable,
     patterns,
+    showDataPoints = false,
+    selected,
     onClick,
     onHover,
     class: className,
@@ -120,7 +125,8 @@
     const plotted = isPercent ? toPercentStack(data.series) : data.series;
     const getLabel = seriesLabelLookup(data.series);
     // ECharts hides line labels along with the symbol
-    const showSymbol = showLabels || hasPointLabels(data.series);
+    const showSymbol = showDataPoints || showLabels || hasPointLabels(data.series);
+    const pointSize = showDataPoints ? 6 : showSymbol ? 4 : 0;
     const legendBottom = builtInLegend && (legendConfig?.position ?? 'bottom') === 'bottom';
 
     const series = data.series.map((source, index) => {
@@ -129,14 +135,20 @@
       return {
         name: source.name,
         type: 'line',
-        data: withForecastPoints(
-          withPointLabels(
-            pairWithCategories(data.categories, plotted[index].data, xAxisConfig?.type),
-            source.labels,
-            formatters.label,
-            { position: 'top' }
+        data: withSelectedPoints(
+          withForecastPoints(
+            withPointLabels(
+              pairWithCategories(data.categories, plotted[index].data, xAxisConfig?.type),
+              source.labels,
+              formatters.label,
+              { position: 'top' }
+            ),
+            source,
+            pointSize
           ),
-          source
+          data.categories,
+          selected,
+          { pointSize, ringColor: chartColors.surface }
         ),
         smooth,
         connectNulls,
@@ -159,10 +171,10 @@
         emphasis: {
           focus: 'series',
         },
-        // Forecast points show even when the others are hidden (size 0)
-        ...(forecastStart(source) === undefined
-          ? { showSymbol }
-          : { showSymbol: true, symbolSize: showSymbol ? 4 : 0 }),
+        // Forecast and selected points show even when the others are hidden (size 0)
+        showSymbol:
+          showSymbol || forecastStart(source) !== undefined || selectionShowsSymbols(selected),
+        symbolSize: pointSize,
       };
     });
 
@@ -241,8 +253,11 @@
   });
 
   const accessibilityDescription = $derived(
-    description ||
-      (!isEmpty ? generateAreaChartDescription(title, data, formatters.format) : undefined)
+    withSelectionDescription(
+      description ||
+        (!isEmpty ? generateAreaChartDescription(title, data, formatters.format) : undefined),
+      selected
+    )
   );
 
   const dataTable = $derived(isEmpty ? undefined : categoryTable(data));

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

@@ -36,6 +36,10 @@
     withoutGhostSeries,
     withReferenceMarks,
     withZoomInset,
+    GHOST_BAR_OPACITY,
+    isGhostSeries,
+    withSelectedBars,
+    withSelectionDescription,
   } from '@classic-homes/charts-core';
 
   import { cn } from '../../utils.js';
@@ -94,6 +98,7 @@
     showDataTable,
     exportable,
     patterns,
+    selected,
     onClick,
     onHover,
     class: className,
@@ -157,15 +162,20 @@
       data.series.map((source, index) => ({
         name: source.name,
         type: 'bar',
-        data: withForecastBars(
-          withPointLabels(
-            pairWithCategories(data.categories, plotted[index].data, categoryAxisType),
-            source.labels,
-            formatters.label,
-            { position: labelPosition }
+        data: withSelectedBars(
+          withForecastBars(
+            withPointLabels(
+              pairWithCategories(data.categories, plotted[index].data, categoryAxisType),
+              source.labels,
+              formatters.label,
+              { position: labelPosition }
+            ),
+            source,
+            source.color || chartColors.series[index % chartColors.series.length]
           ),
-          source,
-          source.color || chartColors.series[index % chartColors.series.length]
+          data.categories,
+          selected,
+          isGhostSeries(source) ? GHOST_BAR_OPACITY : 1
         ),
         stack: stackIds[index],
         itemStyle: {
@@ -267,8 +277,11 @@
   });
 
   const accessibilityDescription = $derived(
-    description ||
-      (!isEmpty ? generateBarChartDescription(title, data, formatters.format) : undefined)
+    withSelectionDescription(
+      description ||
+        (!isEmpty ? generateBarChartDescription(title, data, formatters.format) : undefined),
+      selected
+    )
   );
 
   const dataTable = $derived(isEmpty ? undefined : categoryTable(data));

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

@@ -20,6 +20,8 @@
     pointLabel,
     resolveValueFormatter,
     sliceTable,
+    withSelectedSlices,
+    withSelectionDescription,
   } from '@classic-homes/charts-core';
 
   import { cn } from '../../utils.js';
@@ -72,6 +74,7 @@
     showDataTable,
     exportable,
     patterns,
+    selected,
     onClick,
     class: className,
   }: Props = $props();
@@ -181,12 +184,15 @@
             radius: [innerRadius, '70%'],
             center: pieCenter,
             avoidLabelOverlap: true,
-            data: data.map((item) => ({
-              name: item.name,
-              value: item.value,
-              itemStyle: item.color ? { color: item.color } : undefined,
-              label: pointLabel(item.label, labelFormatter, { position: labelPosition }),
-            })),
+            data: withSelectedSlices(
+              data.map((item) => ({
+                name: item.name,
+                value: item.value,
+                itemStyle: item.color ? { color: item.color } : undefined,
+                label: pointLabel(item.label, labelFormatter, { position: labelPosition }),
+              })),
+              selected
+            ),
             label: buildDataLabel(
               {
                 show: true,
@@ -214,7 +220,10 @@
   });
 
   const accessibilityDescription = $derived(
-    description || (!isEmpty ? generatePieChartDescription(title, data, true) : undefined)
+    withSelectionDescription(
+      description || (!isEmpty ? generatePieChartDescription(title, data, true) : undefined),
+      selected
+    )
   );
 
   const dataTable = $derived(isEmpty ? undefined : sliceTable(data));

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

@@ -31,6 +31,9 @@
     withGhostSeries,
     withReferenceMarks,
     withZoomInset,
+    selectionShowsSymbols,
+    withSelectedPoints,
+    withSelectionDescription,
   } from '@classic-homes/charts-core';
 
   import { cn } from '../../utils.js';
@@ -90,6 +93,7 @@
     showDataTable,
     exportable,
     patterns,
+    selected,
     onClick,
     onHover,
     class: className,
@@ -126,19 +130,25 @@
     const series = data.series.map((source, index) => ({
       name: source.name,
       type: 'line',
-      data: withForecastPoints(
-        withPointLabels(
-          pairWithCategories(data.categories, plotted[index].data, xAxisConfig?.type),
-          source.labels,
-          formatters.label,
-          { position: 'top' }
+      data: withSelectedPoints(
+        withForecastPoints(
+          withPointLabels(
+            pairWithCategories(data.categories, plotted[index].data, xAxisConfig?.type),
+            source.labels,
+            formatters.label,
+            { position: 'top' }
+          ),
+          source,
+          showDataPoints ? 6 : 0
         ),
-        source,
-        showDataPoints ? 6 : 0
+        data.categories,
+        selected,
+        { pointSize: showDataPoints ? 6 : 0, ringColor: chartColors.surface }
       ),
       smooth,
-      // Forecast points show even when the others are hidden (size 0)
-      showSymbol: showSymbol || forecastStart(source) !== undefined,
+      // Forecast and selected points show even when the others are hidden (size 0)
+      showSymbol:
+        showSymbol || forecastStart(source) !== undefined || selectionShowsSymbols(selected),
       symbolSize: showDataPoints ? 6 : 0,
       connectNulls,
       stack: source.stack ?? (stacked ? 'Total' : undefined),
@@ -232,8 +242,11 @@
   });
 
   const accessibilityDescription = $derived(
-    description ||
-      (!isEmpty ? generateLineChartDescription(title, data, formatters.format) : undefined)
+    withSelectionDescription(
+      description ||
+        (!isEmpty ? generateLineChartDescription(title, data, formatters.format) : undefined),
+      selected
+    )
   );
 
   const dataTable = $derived(isEmpty ? undefined : categoryTable(data));

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

@@ -19,6 +19,8 @@
     pointLabel,
     resolveValueFormatter,
     sliceTable,
+    withSelectedSlices,
+    withSelectionDescription,
   } from '@classic-homes/charts-core';
 
   import { cn } from '../../utils.js';
@@ -69,6 +71,7 @@
     showDataTable,
     exportable,
     patterns,
+    selected,
     onClick,
     class: className,
   }: Props = $props();
@@ -122,12 +125,15 @@
             type: 'pie',
             radius: innerRadius ? [innerRadius, '70%'] : '70%',
             center: legendCenter(legendConfig, showLegend && !renderLegend, ['50%', '45%']),
-            data: data.map((item) => ({
-              name: item.name,
-              value: item.value,
-              itemStyle: item.color ? { color: item.color } : undefined,
-              label: pointLabel(item.label, labelFormatter, { position: labelPosition }),
-            })),
+            data: withSelectedSlices(
+              data.map((item) => ({
+                name: item.name,
+                value: item.value,
+                itemStyle: item.color ? { color: item.color } : undefined,
+                label: pointLabel(item.label, labelFormatter, { position: labelPosition }),
+              })),
+              selected
+            ),
             label: buildDataLabel(
               {
                 show: true,
@@ -152,7 +158,10 @@
   });
 
   const accessibilityDescription = $derived(
-    description || (!isEmpty ? generatePieChartDescription(title, data, false) : undefined)
+    withSelectionDescription(
+      description || (!isEmpty ? generatePieChartDescription(title, data, false) : undefined),
+      selected
+    )
   );
 
   const dataTable = $derived(isEmpty ? undefined : sliceTable(data));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/charts-svelte",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Svelte ECharts components for Classic Theme",
   "type": "module",
   "svelte": "./dist/lib/index.js",