@classic-homes/charts-react 0.6.0 → 0.7.0

package/dist/index.cjs

@@ -880,6 +880,7 @@ var LineChart = React6.forwardRef(
     showDataTable,
     exportable,
     patterns,
+    selected,
     onClick,
     onHover,
     class: className,
@@ -914,16 +915,21 @@ var LineChart = React6.forwardRef(
       const series = data.series.map((source, index) => ({
         name: source.name,
         type: "line",
-        data: (0, import_charts_core6.withForecastPoints)(
-          (0, import_charts_core6.withPointLabels)(plotted[index].data, source.labels, formatters.label, {
-            position: "top"
-          }),
-          source,
-          showDataPoints ? 6 : 0
+        data: (0, import_charts_core6.withSelectedPoints)(
+          (0, import_charts_core6.withForecastPoints)(
+            (0, import_charts_core6.withPointLabels)(plotted[index].data, source.labels, formatters.label, {
+              position: "top"
+            }),
+            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 || (0, import_charts_core6.forecastStart)(source) !== void 0,
+        // Forecast and selected points show even when the others are hidden (size 0)
+        showSymbol: showSymbol || (0, import_charts_core6.forecastStart)(source) !== void 0 || (0, import_charts_core6.selectionShowsSymbols)(selected),
         symbolSize: showDataPoints ? 6 : 0,
         connectNulls,
         stack: stacked ? "Total" : void 0,
@@ -1020,6 +1026,7 @@ var LineChart = React6.forwardRef(
       );
     }, [
       data,
+      selected,
       isEmpty,
       showTooltip,
       showLegend,
@@ -1060,7 +1067,10 @@ var LineChart = React6.forwardRef(
       onCreated: onReady
     });
     const format = (0, import_charts_core6.resolveValueFormatter)(valueFormat, locale);
-    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core6.generateLineChartDescription)(title, data, format) : void 0);
+    const accessibilityDescription = (0, import_charts_core6.withSelectionDescription)(
+      description || (!isEmpty ? (0, import_charts_core6.generateLineChartDescription)(title, data, format) : void 0),
+      selected
+    );
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       ChartContainer,
       {
@@ -1146,6 +1156,7 @@ var BarChart = React7.forwardRef(
     showDataTable,
     exportable,
     patterns,
+    selected,
     onClick,
     onHover,
     class: className,
@@ -1200,12 +1211,17 @@ var BarChart = React7.forwardRef(
         data.series.map((source, index) => ({
           name: source.name,
           type: "bar",
-          data: (0, import_charts_core7.withForecastBars)(
-            (0, import_charts_core7.withPointLabels)(plotted[index].data, source.labels, formatters.label, {
-              position: labelPosition
-            }),
-            source,
-            source.color || chartColors.series[index % chartColors.series.length]
+          data: (0, import_charts_core7.withSelectedBars)(
+            (0, import_charts_core7.withForecastBars)(
+              (0, import_charts_core7.withPointLabels)(plotted[index].data, source.labels, formatters.label, {
+                position: labelPosition
+              }),
+              source,
+              source.color || chartColors.series[index % chartColors.series.length]
+            ),
+            data.categories,
+            selected,
+            (0, import_charts_core7.isGhostSeries)(source) ? import_charts_core7.GHOST_BAR_OPACITY : 1
           ),
           stack: stackIds[index],
           itemStyle: {
@@ -1289,6 +1305,7 @@ var BarChart = React7.forwardRef(
       );
     }, [
       data,
+      selected,
       isEmpty,
       showTooltip,
       showLegend,
@@ -1327,7 +1344,10 @@ var BarChart = React7.forwardRef(
       onCreated: onReady
     });
     const format = (0, import_charts_core7.resolveValueFormatter)(valueFormat, locale);
-    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core7.generateBarChartDescription)(title, data, format) : void 0);
+    const accessibilityDescription = (0, import_charts_core7.withSelectionDescription)(
+      description || (!isEmpty ? (0, import_charts_core7.generateBarChartDescription)(title, data, format) : void 0),
+      selected
+    );
     const resolvedHeight = isHorizontal ? (0, import_charts_core7.resolveChartHeight)(height, data?.categories?.length ?? 0, {
       rowHeight,
       minHeight,
@@ -1404,6 +1424,7 @@ var PieChart = React8.forwardRef(
     showDataTable,
     exportable,
     patterns,
+    selected,
     onClick,
     class: className,
     ...props
@@ -1453,12 +1474,15 @@ var PieChart = React8.forwardRef(
               type: "pie",
               radius: innerRadius ? [innerRadius, "70%"] : "70%",
               center: (0, import_charts_core8.legendCenter)(legendConfig, showLegend && !customLegend, ["50%", "45%"]),
-              data: data.map((item) => ({
-                name: item.name,
-                value: item.value,
-                itemStyle: item.color ? { color: item.color } : void 0,
-                label: (0, import_charts_core8.pointLabel)(item.label, labelFormatter, { position: labelPosition })
-              })),
+              data: (0, import_charts_core8.withSelectedSlices)(
+                data.map((item) => ({
+                  name: item.name,
+                  value: item.value,
+                  itemStyle: item.color ? { color: item.color } : void 0,
+                  label: (0, import_charts_core8.pointLabel)(item.label, labelFormatter, { position: labelPosition })
+                })),
+                selected
+              ),
               label: (0, import_charts_core8.buildDataLabel)(
                 {
                   show: true,
@@ -1482,6 +1506,7 @@ var PieChart = React8.forwardRef(
       );
     }, [
       data,
+      selected,
       isEmpty,
       showTooltip,
       showLegend,
@@ -1507,7 +1532,10 @@ var PieChart = React8.forwardRef(
       onReady: legend.attach,
       onCreated: onReady
     });
-    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core8.generatePieChartDescription)(title, data, false) : void 0);
+    const accessibilityDescription = (0, import_charts_core8.withSelectionDescription)(
+      description || (!isEmpty ? (0, import_charts_core8.generatePieChartDescription)(title, data, false) : void 0),
+      selected
+    );
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       ChartContainer,
       {
@@ -1593,6 +1621,8 @@ var AreaChart = React9.forwardRef(
     showDataTable,
     exportable,
     patterns,
+    showDataPoints = false,
+    selected,
     onClick,
     onHover,
     class: className,
@@ -1622,18 +1652,25 @@ var AreaChart = React9.forwardRef(
       });
       const plotted = isPercent ? (0, import_charts_core9.toPercentStack)(data.series) : data.series;
       const getLabel = (0, import_charts_core9.seriesLabelLookup)(data.series);
-      const showSymbol = showLabels || (0, import_charts_core9.hasPointLabels)(data.series);
+      const showSymbol = showDataPoints || showLabels || (0, import_charts_core9.hasPointLabels)(data.series);
+      const pointSize = showDataPoints ? 6 : showSymbol ? 4 : 0;
       const legendBottom = builtInLegend && (legendConfig?.position ?? "bottom") === "bottom";
       const series = data.series.map((source, index) => {
         const base = source.color || chartColors.series[index % chartColors.series.length];
         return {
           name: source.name,
           type: "line",
-          data: (0, import_charts_core9.withForecastPoints)(
-            (0, import_charts_core9.withPointLabels)(plotted[index].data, source.labels, formatters.label, {
-              position: "top"
-            }),
-            source
+          data: (0, import_charts_core9.withSelectedPoints)(
+            (0, import_charts_core9.withForecastPoints)(
+              (0, import_charts_core9.withPointLabels)(plotted[index].data, source.labels, formatters.label, {
+                position: "top"
+              }),
+              source,
+              pointSize
+            ),
+            data.categories,
+            selected,
+            { pointSize, ringColor: chartColors.surface }
           ),
           smooth,
           connectNulls,
@@ -1654,8 +1691,9 @@ var AreaChart = React9.forwardRef(
           emphasis: {
             focus: "series"
           },
-          // Forecast points show even when the others are hidden (size 0)
-          ...(0, import_charts_core9.forecastStart)(source) === void 0 ? { showSymbol } : { showSymbol: true, symbolSize: showSymbol ? 4 : 0 }
+          // Forecast and selected points show even when the others are hidden (size 0)
+          showSymbol: showSymbol || (0, import_charts_core9.forecastStart)(source) !== void 0 || (0, import_charts_core9.selectionShowsSymbols)(selected),
+          symbolSize: pointSize
         };
       });
       return (0, import_charts_core9.mergeChartOption)(
@@ -1737,6 +1775,8 @@ var AreaChart = React9.forwardRef(
       );
     }, [
       data,
+      selected,
+      showDataPoints,
       isEmpty,
       showTooltip,
       showLegend,
@@ -1776,7 +1816,10 @@ var AreaChart = React9.forwardRef(
       onCreated: onReady
     });
     const format = (0, import_charts_core9.resolveValueFormatter)(valueFormat, locale);
-    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core9.generateAreaChartDescription)(title, data, format) : void 0);
+    const accessibilityDescription = (0, import_charts_core9.withSelectionDescription)(
+      description || (!isEmpty ? (0, import_charts_core9.generateAreaChartDescription)(title, data, format) : void 0),
+      selected
+    );
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       ChartContainer,
       {
@@ -2117,6 +2160,7 @@ var DonutChart = React11.forwardRef(
     showDataTable,
     exportable,
     patterns,
+    selected,
     onClick,
     class: className,
     ...props
@@ -2213,12 +2257,15 @@ var DonutChart = React11.forwardRef(
               radius: [innerRadius, "70%"],
               center: pieCenter,
               avoidLabelOverlap: true,
-              data: data.map((item) => ({
-                name: item.name,
-                value: item.value,
-                itemStyle: item.color ? { color: item.color } : void 0,
-                label: (0, import_charts_core11.pointLabel)(item.label, labelFormatter, { position: labelPosition })
-              })),
+              data: (0, import_charts_core11.withSelectedSlices)(
+                data.map((item) => ({
+                  name: item.name,
+                  value: item.value,
+                  itemStyle: item.color ? { color: item.color } : void 0,
+                  label: (0, import_charts_core11.pointLabel)(item.label, labelFormatter, { position: labelPosition })
+                })),
+                selected
+              ),
               label: (0, import_charts_core11.buildDataLabel)(
                 {
                   show: true,
@@ -2245,6 +2292,7 @@ var DonutChart = React11.forwardRef(
       );
     }, [
       data,
+      selected,
       isEmpty,
       showTooltip,
       showLegend,
@@ -2273,7 +2321,10 @@ var DonutChart = React11.forwardRef(
       onReady: legend.attach,
       onCreated: onReady
     });
-    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core11.generatePieChartDescription)(title, data, true) : void 0);
+    const accessibilityDescription = (0, import_charts_core11.withSelectionDescription)(
+      description || (!isEmpty ? (0, import_charts_core11.generatePieChartDescription)(title, data, true) : void 0),
+      selected
+    );
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       ChartContainer,
       {

package/dist/index.js

@@ -456,7 +456,10 @@ import {
   withPointLabels,
   withGhostSeries,
   withReferenceMarks,
-  withZoomInset
+  withZoomInset,
+  selectionShowsSymbols,
+  withSelectedPoints,
+  withSelectionDescription
 } from "@classic-homes/charts-core";
 
 // src/lib/events.ts
@@ -863,6 +866,7 @@ var LineChart = React6.forwardRef(
     showDataTable,
     exportable,
     patterns,
+    selected,
     onClick,
     onHover,
     class: className,
@@ -897,16 +901,21 @@ var LineChart = React6.forwardRef(
       const series = data.series.map((source, index) => ({
         name: source.name,
         type: "line",
-        data: withForecastPoints(
-          withPointLabels(plotted[index].data, source.labels, formatters.label, {
-            position: "top"
-          }),
-          source,
-          showDataPoints ? 6 : 0
+        data: withSelectedPoints(
+          withForecastPoints(
+            withPointLabels(plotted[index].data, source.labels, formatters.label, {
+              position: "top"
+            }),
+            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) !== void 0,
+        // Forecast and selected points show even when the others are hidden (size 0)
+        showSymbol: showSymbol || forecastStart(source) !== void 0 || selectionShowsSymbols(selected),
         symbolSize: showDataPoints ? 6 : 0,
         connectNulls,
         stack: stacked ? "Total" : void 0,
@@ -1003,6 +1012,7 @@ var LineChart = React6.forwardRef(
       );
     }, [
       data,
+      selected,
       isEmpty,
       showTooltip,
       showLegend,
@@ -1043,7 +1053,10 @@ var LineChart = React6.forwardRef(
       onCreated: onReady
     });
     const format = resolveValueFormatter(valueFormat, locale);
-    const accessibilityDescription = description || (!isEmpty ? generateLineChartDescription(title, data, format) : void 0);
+    const accessibilityDescription = withSelectionDescription(
+      description || (!isEmpty ? generateLineChartDescription(title, data, format) : void 0),
+      selected
+    );
     return /* @__PURE__ */ jsx7(
       ChartContainer,
       {
@@ -1111,7 +1124,11 @@ import {
   withGhostSeries as withGhostSeries2,
   withPointLabels as withPointLabels2,
   withReferenceMarks as withReferenceMarks2,
-  withZoomInset as withZoomInset2
+  withZoomInset as withZoomInset2,
+  GHOST_BAR_OPACITY,
+  isGhostSeries,
+  withSelectedBars,
+  withSelectionDescription as withSelectionDescription2
 } from "@classic-homes/charts-core";
 import { jsx as jsx8 } from "react/jsx-runtime";
 echarts4.use([
@@ -1162,6 +1179,7 @@ var BarChart = React7.forwardRef(
     showDataTable,
     exportable,
     patterns,
+    selected,
     onClick,
     onHover,
     class: className,
@@ -1216,12 +1234,17 @@ var BarChart = React7.forwardRef(
         data.series.map((source, index) => ({
           name: source.name,
           type: "bar",
-          data: withForecastBars(
-            withPointLabels2(plotted[index].data, source.labels, formatters.label, {
-              position: labelPosition
-            }),
-            source,
-            source.color || chartColors.series[index % chartColors.series.length]
+          data: withSelectedBars(
+            withForecastBars(
+              withPointLabels2(plotted[index].data, source.labels, formatters.label, {
+                position: labelPosition
+              }),
+              source,
+              source.color || chartColors.series[index % chartColors.series.length]
+            ),
+            data.categories,
+            selected,
+            isGhostSeries(source) ? GHOST_BAR_OPACITY : 1
           ),
           stack: stackIds[index],
           itemStyle: {
@@ -1305,6 +1328,7 @@ var BarChart = React7.forwardRef(
       );
     }, [
       data,
+      selected,
       isEmpty,
       showTooltip,
       showLegend,
@@ -1343,7 +1367,10 @@ var BarChart = React7.forwardRef(
       onCreated: onReady
     });
     const format = resolveValueFormatter2(valueFormat, locale);
-    const accessibilityDescription = description || (!isEmpty ? generateBarChartDescription(title, data, format) : void 0);
+    const accessibilityDescription = withSelectionDescription2(
+      description || (!isEmpty ? generateBarChartDescription(title, data, format) : void 0),
+      selected
+    );
     const resolvedHeight = isHorizontal ? resolveChartHeight(height, data?.categories?.length ?? 0, {
       rowHeight,
       minHeight,
@@ -1398,7 +1425,9 @@ import {
   mergeChartOption as mergeChartOption3,
   pointLabel,
   resolveValueFormatter as resolveValueFormatter3,
-  sliceTable
+  sliceTable,
+  withSelectedSlices,
+  withSelectionDescription as withSelectionDescription3
 } from "@classic-homes/charts-core";
 import { jsx as jsx9 } from "react/jsx-runtime";
 echarts5.use([EChartsPieChart, TooltipComponent3, LegendComponent3, TitleComponent3, CanvasRenderer4]);
@@ -1434,6 +1463,7 @@ var PieChart = React8.forwardRef(
     showDataTable,
     exportable,
     patterns,
+    selected,
     onClick,
     class: className,
     ...props
@@ -1483,12 +1513,15 @@ var PieChart = React8.forwardRef(
               type: "pie",
               radius: innerRadius ? [innerRadius, "70%"] : "70%",
               center: legendCenter(legendConfig, showLegend && !customLegend, ["50%", "45%"]),
-              data: data.map((item) => ({
-                name: item.name,
-                value: item.value,
-                itemStyle: item.color ? { color: item.color } : void 0,
-                label: pointLabel(item.label, labelFormatter, { position: labelPosition })
-              })),
+              data: withSelectedSlices(
+                data.map((item) => ({
+                  name: item.name,
+                  value: item.value,
+                  itemStyle: item.color ? { color: item.color } : void 0,
+                  label: pointLabel(item.label, labelFormatter, { position: labelPosition })
+                })),
+                selected
+              ),
               label: buildDataLabel3(
                 {
                   show: true,
@@ -1512,6 +1545,7 @@ var PieChart = React8.forwardRef(
       );
     }, [
       data,
+      selected,
       isEmpty,
       showTooltip,
       showLegend,
@@ -1537,7 +1571,10 @@ var PieChart = React8.forwardRef(
       onReady: legend.attach,
       onCreated: onReady
     });
-    const accessibilityDescription = description || (!isEmpty ? generatePieChartDescription(title, data, false) : void 0);
+    const accessibilityDescription = withSelectionDescription3(
+      description || (!isEmpty ? generatePieChartDescription(title, data, false) : void 0),
+      selected
+    );
     return /* @__PURE__ */ jsx9(
       ChartContainer,
       {
@@ -1603,7 +1640,10 @@ import {
   withPointLabels as withPointLabels3,
   withGhostSeries as withGhostSeries3,
   withReferenceMarks as withReferenceMarks3,
-  withZoomInset as withZoomInset3
+  withZoomInset as withZoomInset3,
+  selectionShowsSymbols as selectionShowsSymbols2,
+  withSelectedPoints as withSelectedPoints2,
+  withSelectionDescription as withSelectionDescription4
 } from "@classic-homes/charts-core";
 import { jsx as jsx10 } from "react/jsx-runtime";
 echarts6.use([
@@ -1654,6 +1694,8 @@ var AreaChart = React9.forwardRef(
     showDataTable,
     exportable,
     patterns,
+    showDataPoints = false,
+    selected,
     onClick,
     onHover,
     class: className,
@@ -1683,18 +1725,25 @@ var AreaChart = React9.forwardRef(
       });
       const plotted = isPercent ? toPercentStack3(data.series) : data.series;
       const getLabel = seriesLabelLookup3(data.series);
-      const showSymbol = showLabels || hasPointLabels2(data.series);
+      const showSymbol = showDataPoints || showLabels || hasPointLabels2(data.series);
+      const pointSize = showDataPoints ? 6 : showSymbol ? 4 : 0;
       const legendBottom = builtInLegend && (legendConfig?.position ?? "bottom") === "bottom";
       const series = data.series.map((source, index) => {
         const base = source.color || chartColors.series[index % chartColors.series.length];
         return {
           name: source.name,
           type: "line",
-          data: withForecastPoints2(
-            withPointLabels3(plotted[index].data, source.labels, formatters.label, {
-              position: "top"
-            }),
-            source
+          data: withSelectedPoints2(
+            withForecastPoints2(
+              withPointLabels3(plotted[index].data, source.labels, formatters.label, {
+                position: "top"
+              }),
+              source,
+              pointSize
+            ),
+            data.categories,
+            selected,
+            { pointSize, ringColor: chartColors.surface }
           ),
           smooth,
           connectNulls,
@@ -1715,8 +1764,9 @@ var AreaChart = React9.forwardRef(
           emphasis: {
             focus: "series"
           },
-          // Forecast points show even when the others are hidden (size 0)
-          ...forecastStart2(source) === void 0 ? { showSymbol } : { showSymbol: true, symbolSize: showSymbol ? 4 : 0 }
+          // Forecast and selected points show even when the others are hidden (size 0)
+          showSymbol: showSymbol || forecastStart2(source) !== void 0 || selectionShowsSymbols2(selected),
+          symbolSize: pointSize
         };
       });
       return mergeChartOption4(
@@ -1798,6 +1848,8 @@ var AreaChart = React9.forwardRef(
       );
     }, [
       data,
+      selected,
+      showDataPoints,
       isEmpty,
       showTooltip,
       showLegend,
@@ -1837,7 +1889,10 @@ var AreaChart = React9.forwardRef(
       onCreated: onReady
     });
     const format = resolveValueFormatter4(valueFormat, locale);
-    const accessibilityDescription = description || (!isEmpty ? generateAreaChartDescription(title, data, format) : void 0);
+    const accessibilityDescription = withSelectionDescription4(
+      description || (!isEmpty ? generateAreaChartDescription(title, data, format) : void 0),
+      selected
+    );
     return /* @__PURE__ */ jsx10(
       ChartContainer,
       {
@@ -2178,7 +2233,9 @@ import {
   pointLabel as pointLabel2,
   resolveValueFormatter as resolveValueFormatter6,
   sliceTable as sliceTable2,
-  THEME_DARK as THEME_DARK4
+  THEME_DARK as THEME_DARK4,
+  withSelectedSlices as withSelectedSlices2,
+  withSelectionDescription as withSelectionDescription5
 } from "@classic-homes/charts-core";
 import { jsx as jsx12 } from "react/jsx-runtime";
 echarts8.use([EChartsPieChart2, TooltipComponent6, LegendComponent6, TitleComponent6, CanvasRenderer7]);
@@ -2216,6 +2273,7 @@ var DonutChart = React11.forwardRef(
     showDataTable,
     exportable,
     patterns,
+    selected,
     onClick,
     class: className,
     ...props
@@ -2312,12 +2370,15 @@ var DonutChart = React11.forwardRef(
               radius: [innerRadius, "70%"],
               center: pieCenter,
               avoidLabelOverlap: true,
-              data: data.map((item) => ({
-                name: item.name,
-                value: item.value,
-                itemStyle: item.color ? { color: item.color } : void 0,
-                label: pointLabel2(item.label, labelFormatter, { position: labelPosition })
-              })),
+              data: withSelectedSlices2(
+                data.map((item) => ({
+                  name: item.name,
+                  value: item.value,
+                  itemStyle: item.color ? { color: item.color } : void 0,
+                  label: pointLabel2(item.label, labelFormatter, { position: labelPosition })
+                })),
+                selected
+              ),
               label: buildDataLabel6(
                 {
                   show: true,
@@ -2344,6 +2405,7 @@ var DonutChart = React11.forwardRef(
       );
     }, [
       data,
+      selected,
       isEmpty,
       showTooltip,
       showLegend,
@@ -2372,7 +2434,10 @@ var DonutChart = React11.forwardRef(
       onReady: legend.attach,
       onCreated: onReady
     });
-    const accessibilityDescription = description || (!isEmpty ? generatePieChartDescription2(title, data, true) : void 0);
+    const accessibilityDescription = withSelectionDescription5(
+      description || (!isEmpty ? generatePieChartDescription2(title, data, true) : void 0),
+      selected
+    );
     return /* @__PURE__ */ jsx12(
       ChartContainer,
       {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/charts-react",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "React ECharts components for Classic Theme",
   "type": "module",
   "main": "dist/index.cjs",