@classic-homes/charts-react 0.4.2 → 0.6.0

package/dist/index.cjs

@@ -914,11 +914,16 @@ var LineChart = React6.forwardRef(
       const series = data.series.map((source, index) => ({
         name: source.name,
         type: "line",
-        data: (0, import_charts_core6.withPointLabels)(plotted[index].data, source.labels, formatters.label, {
-          position: "top"
-        }),
+        data: (0, import_charts_core6.withForecastPoints)(
+          (0, import_charts_core6.withPointLabels)(plotted[index].data, source.labels, formatters.label, {
+            position: "top"
+          }),
+          source,
+          showDataPoints ? 6 : 0
+        ),
         smooth,
-        showSymbol,
+        // Forecast points show even when the others are hidden (size 0)
+        showSymbol: showSymbol || (0, import_charts_core6.forecastStart)(source) !== void 0,
         symbolSize: showDataPoints ? 6 : 0,
         connectNulls,
         stack: stacked ? "Total" : void 0,
@@ -960,7 +965,8 @@ var LineChart = React6.forwardRef(
               show: showTooltip,
               formatter: tooltipFormatter,
               valueFormatter: formatters.tooltip,
-              getLabel
+              getLabel,
+              forecastTag: (0, import_charts_core6.forecastTagLookup)(data.series)
             }
           ),
           legend: (0, import_charts_core6.buildLegend)(
@@ -990,12 +996,25 @@ var LineChart = React6.forwardRef(
             },
             formatters.axis(yAxisConfig)
           ),
-          series: (0, import_charts_core6.withReferenceMarks)(series, referenceLines, referenceBands, {
-            valueAxis: "y",
-            format: formatters.format,
-            color: chartColors.reference,
-            bandColor: chartColors.referenceBand
-          })
+          series: (0, import_charts_core6.withForecastLines)(
+            (0, import_charts_core6.withReferenceMarks)(
+              (0, import_charts_core6.withGhostSeries)(series, data.series),
+              referenceLines,
+              referenceBands,
+              {
+                valueAxis: "y",
+                format: formatters.format,
+                color: chartColors.reference,
+                bandColor: chartColors.referenceBand
+              }
+            ),
+            data.series,
+            {
+              colors: data.series.map(
+                (s, i) => s.color || chartColors.series[i % chartColors.series.length]
+              )
+            }
+          )
         },
         optionOverride
       );
@@ -1176,35 +1195,43 @@ var BarChart = React7.forwardRef(
       const labelPosition = isHorizontal ? "right" : "top";
       const zoomAxis = isHorizontal ? "y" : "x";
       const legendBottom = builtInLegend && (legendConfig?.position ?? "bottom") === "bottom";
-      const stackIds = data.series.map(() => stacked ? "Total" : void 0);
-      const series = data.series.map((source, index) => ({
-        name: source.name,
-        type: "bar",
-        data: (0, import_charts_core7.withPointLabels)(plotted[index].data, source.labels, formatters.label, {
-          position: labelPosition
-        }),
-        stack: stackIds[index],
-        itemStyle: {
-          ...source.color && { color: source.color },
-          borderRadius: (0, import_charts_core7.barCornerRadius)(isHorizontal, stackIds, index)
-        },
-        label: (0, import_charts_core7.buildDataLabel)({ show: true, position: labelPosition }, void 0, {
-          show: showValues,
-          formatter: formatters.label,
-          getLabel
-        }),
-        emphasis: {
-          focus: "series"
-        }
-      }));
+      const stackIds = data.series.map((s) => (0, import_charts_core7.ghostStackId)(stacked ? "Total" : void 0, s));
+      const series = (0, import_charts_core7.withGhostSeries)(
+        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]
+          ),
+          stack: stackIds[index],
+          itemStyle: {
+            ...source.color && { color: source.color },
+            borderRadius: (0, import_charts_core7.barCornerRadius)(isHorizontal, stackIds, index)
+          },
+          label: (0, import_charts_core7.buildDataLabel)({ show: true, position: labelPosition }, void 0, {
+            show: showValues,
+            formatter: formatters.label,
+            getLabel
+          }),
+          emphasis: {
+            focus: "series"
+          }
+        })),
+        data.series
+      );
       const format2 = (0, import_charts_core7.resolveValueFormatter)(valueFormat, locale);
-      const stackedSeries = data.series.map((s) => ({ data: s.data }));
+      const isSolid = (index) => data.series[index].variant !== "ghost";
+      const stackedSeries = data.series.filter((_, index) => isSolid(index)).map((s) => ({ data: s.data }));
       const totalSeries = showTotal ? (0, import_charts_core7.buildStackTotalSeries)(data.categories, stackedSeries, {
         stacked,
         position: labelPosition,
         format: format2
       }) : [];
-      const endLabels = !isHorizontal ? [] : totalSeries.length ? [...(0, import_charts_core7.stackTotals)(stackedSeries, stacked).values()].flat().map((t) => (0, import_charts_core7.formatValue)(t, format2)) : showValues ? plotted.flatMap((s) => s.data.map((value) => (0, import_charts_core7.formatValue)(value, formatters.format))) : [];
+      const endLabels = !isHorizontal ? [] : totalSeries.length ? [...(0, import_charts_core7.stackTotals)(stackedSeries, stacked).values()].flat().map((t) => (0, import_charts_core7.formatValue)(t, format2)) : showValues ? plotted.filter((_, index) => isSolid(index)).flatMap((s) => s.data.map((value) => (0, import_charts_core7.formatValue)(value, formatters.format))) : [];
       return (0, import_charts_core7.mergeChartOption)(
         {
           grid: {
@@ -1232,7 +1259,8 @@ var BarChart = React7.forwardRef(
               show: showTooltip,
               formatter: tooltipFormatter,
               valueFormatter: formatters.tooltip,
-              getLabel
+              getLabel,
+              forecastTag: (0, import_charts_core7.forecastTagLookup)(data.series)
             }
           ),
           legend: (0, import_charts_core7.buildLegend)(
@@ -1601,9 +1629,12 @@ var AreaChart = React9.forwardRef(
         return {
           name: source.name,
           type: "line",
-          data: (0, import_charts_core9.withPointLabels)(plotted[index].data, source.labels, formatters.label, {
-            position: "top"
-          }),
+          data: (0, import_charts_core9.withForecastPoints)(
+            (0, import_charts_core9.withPointLabels)(plotted[index].data, source.labels, formatters.label, {
+              position: "top"
+            }),
+            source
+          ),
           smooth,
           connectNulls,
           stack: stacked ? "Total" : void 0,
@@ -1623,7 +1654,8 @@ var AreaChart = React9.forwardRef(
           emphasis: {
             focus: "series"
           },
-          showSymbol
+          // 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 }
         };
       });
       return (0, import_charts_core9.mergeChartOption)(
@@ -1653,7 +1685,8 @@ var AreaChart = React9.forwardRef(
               show: showTooltip,
               formatter: tooltipFormatter,
               valueFormatter: formatters.tooltip,
-              getLabel
+              getLabel,
+              forecastTag: (0, import_charts_core9.forecastTagLookup)(data.series)
             }
           ),
           legend: (0, import_charts_core9.buildLegend)(
@@ -1680,12 +1713,25 @@ var AreaChart = React9.forwardRef(
             },
             formatters.axis(yAxisConfig)
           ),
-          series: (0, import_charts_core9.withReferenceMarks)(series, referenceLines, referenceBands, {
-            valueAxis: "y",
-            format: formatters.format,
-            color: chartColors.reference,
-            bandColor: chartColors.referenceBand
-          })
+          series: (0, import_charts_core9.withForecastLines)(
+            (0, import_charts_core9.withReferenceMarks)(
+              (0, import_charts_core9.withGhostSeries)(series, data.series),
+              referenceLines,
+              referenceBands,
+              {
+                valueAxis: "y",
+                format: formatters.format,
+                color: chartColors.reference,
+                bandColor: chartColors.referenceBand
+              }
+            ),
+            data.series,
+            {
+              colors: data.series.map(
+                (s, i) => s.color || chartColors.series[i % chartColors.series.length]
+              )
+            }
+          )
         },
         optionOverride
       );

package/dist/index.js

@@ -440,6 +440,10 @@ import {
   buildTooltip,
   categoryTable,
   chartFormatters,
+  forecastStart,
+  forecastTagLookup,
+  withForecastLines,
+  withForecastPoints,
   generateLineChartDescription,
   getChartColors,
   hasPointLabels,
@@ -450,6 +454,7 @@ import {
   THEME_DARK as THEME_DARK2,
   toPercentStack,
   withPointLabels,
+  withGhostSeries,
   withReferenceMarks,
   withZoomInset
 } from "@classic-homes/charts-core";
@@ -892,11 +897,16 @@ var LineChart = React6.forwardRef(
       const series = data.series.map((source, index) => ({
         name: source.name,
         type: "line",
-        data: withPointLabels(plotted[index].data, source.labels, formatters.label, {
-          position: "top"
-        }),
+        data: withForecastPoints(
+          withPointLabels(plotted[index].data, source.labels, formatters.label, {
+            position: "top"
+          }),
+          source,
+          showDataPoints ? 6 : 0
+        ),
         smooth,
-        showSymbol,
+        // Forecast points show even when the others are hidden (size 0)
+        showSymbol: showSymbol || forecastStart(source) !== void 0,
         symbolSize: showDataPoints ? 6 : 0,
         connectNulls,
         stack: stacked ? "Total" : void 0,
@@ -938,7 +948,8 @@ var LineChart = React6.forwardRef(
               show: showTooltip,
               formatter: tooltipFormatter,
               valueFormatter: formatters.tooltip,
-              getLabel
+              getLabel,
+              forecastTag: forecastTagLookup(data.series)
             }
           ),
           legend: buildLegend(
@@ -968,12 +979,25 @@ var LineChart = React6.forwardRef(
             },
             formatters.axis(yAxisConfig)
           ),
-          series: withReferenceMarks(series, referenceLines, referenceBands, {
-            valueAxis: "y",
-            format: formatters.format,
-            color: chartColors.reference,
-            bandColor: chartColors.referenceBand
-          })
+          series: withForecastLines(
+            withReferenceMarks(
+              withGhostSeries(series, data.series),
+              referenceLines,
+              referenceBands,
+              {
+                valueAxis: "y",
+                format: formatters.format,
+                color: chartColors.reference,
+                bandColor: chartColors.referenceBand
+              }
+            ),
+            data.series,
+            {
+              colors: data.series.map(
+                (s, i) => s.color || chartColors.series[i % chartColors.series.length]
+              )
+            }
+          )
         },
         optionOverride
       );
@@ -1070,7 +1094,10 @@ import {
   buildTooltip as buildTooltip2,
   categoryTable as categoryTable2,
   chartFormatters as chartFormatters2,
+  forecastTagLookup as forecastTagLookup2,
+  withForecastBars,
   formatValue,
+  ghostStackId,
   generateBarChartDescription,
   getChartColors as getChartColors2,
   gridInset as gridInset2,
@@ -1081,6 +1108,7 @@ import {
   stackTotals,
   toPercentStack as toPercentStack2,
   withEndLabelInset,
+  withGhostSeries as withGhostSeries2,
   withPointLabels as withPointLabels2,
   withReferenceMarks as withReferenceMarks2,
   withZoomInset as withZoomInset2
@@ -1183,35 +1211,43 @@ var BarChart = React7.forwardRef(
       const labelPosition = isHorizontal ? "right" : "top";
       const zoomAxis = isHorizontal ? "y" : "x";
       const legendBottom = builtInLegend && (legendConfig?.position ?? "bottom") === "bottom";
-      const stackIds = data.series.map(() => stacked ? "Total" : void 0);
-      const series = data.series.map((source, index) => ({
-        name: source.name,
-        type: "bar",
-        data: withPointLabels2(plotted[index].data, source.labels, formatters.label, {
-          position: labelPosition
-        }),
-        stack: stackIds[index],
-        itemStyle: {
-          ...source.color && { color: source.color },
-          borderRadius: barCornerRadius(isHorizontal, stackIds, index)
-        },
-        label: buildDataLabel2({ show: true, position: labelPosition }, void 0, {
-          show: showValues,
-          formatter: formatters.label,
-          getLabel
-        }),
-        emphasis: {
-          focus: "series"
-        }
-      }));
+      const stackIds = data.series.map((s) => ghostStackId(stacked ? "Total" : void 0, s));
+      const series = withGhostSeries2(
+        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]
+          ),
+          stack: stackIds[index],
+          itemStyle: {
+            ...source.color && { color: source.color },
+            borderRadius: barCornerRadius(isHorizontal, stackIds, index)
+          },
+          label: buildDataLabel2({ show: true, position: labelPosition }, void 0, {
+            show: showValues,
+            formatter: formatters.label,
+            getLabel
+          }),
+          emphasis: {
+            focus: "series"
+          }
+        })),
+        data.series
+      );
       const format2 = resolveValueFormatter2(valueFormat, locale);
-      const stackedSeries = data.series.map((s) => ({ data: s.data }));
+      const isSolid = (index) => data.series[index].variant !== "ghost";
+      const stackedSeries = data.series.filter((_, index) => isSolid(index)).map((s) => ({ data: s.data }));
       const totalSeries = showTotal ? buildStackTotalSeries(data.categories, stackedSeries, {
         stacked,
         position: labelPosition,
         format: format2
       }) : [];
-      const endLabels = !isHorizontal ? [] : totalSeries.length ? [...stackTotals(stackedSeries, stacked).values()].flat().map((t) => formatValue(t, format2)) : showValues ? plotted.flatMap((s) => s.data.map((value) => formatValue(value, formatters.format))) : [];
+      const endLabels = !isHorizontal ? [] : totalSeries.length ? [...stackTotals(stackedSeries, stacked).values()].flat().map((t) => formatValue(t, format2)) : showValues ? plotted.filter((_, index) => isSolid(index)).flatMap((s) => s.data.map((value) => formatValue(value, formatters.format))) : [];
       return mergeChartOption2(
         {
           grid: {
@@ -1239,7 +1275,8 @@ var BarChart = React7.forwardRef(
               show: showTooltip,
               formatter: tooltipFormatter,
               valueFormatter: formatters.tooltip,
-              getLabel
+              getLabel,
+              forecastTag: forecastTagLookup2(data.series)
             }
           ),
           legend: buildLegend2(
@@ -1549,6 +1586,10 @@ import {
   buildTooltip as buildTooltip4,
   categoryTable as categoryTable3,
   chartFormatters as chartFormatters3,
+  forecastStart as forecastStart2,
+  forecastTagLookup as forecastTagLookup3,
+  withForecastLines as withForecastLines2,
+  withForecastPoints as withForecastPoints2,
   colorWithAlpha,
   generateAreaChartDescription,
   getChartColors as getChartColors4,
@@ -1560,6 +1601,7 @@ import {
   THEME_DARK as THEME_DARK3,
   toPercentStack as toPercentStack3,
   withPointLabels as withPointLabels3,
+  withGhostSeries as withGhostSeries3,
   withReferenceMarks as withReferenceMarks3,
   withZoomInset as withZoomInset3
 } from "@classic-homes/charts-core";
@@ -1648,9 +1690,12 @@ var AreaChart = React9.forwardRef(
         return {
           name: source.name,
           type: "line",
-          data: withPointLabels3(plotted[index].data, source.labels, formatters.label, {
-            position: "top"
-          }),
+          data: withForecastPoints2(
+            withPointLabels3(plotted[index].data, source.labels, formatters.label, {
+              position: "top"
+            }),
+            source
+          ),
           smooth,
           connectNulls,
           stack: stacked ? "Total" : void 0,
@@ -1670,7 +1715,8 @@ var AreaChart = React9.forwardRef(
           emphasis: {
             focus: "series"
           },
-          showSymbol
+          // Forecast points show even when the others are hidden (size 0)
+          ...forecastStart2(source) === void 0 ? { showSymbol } : { showSymbol: true, symbolSize: showSymbol ? 4 : 0 }
         };
       });
       return mergeChartOption4(
@@ -1700,7 +1746,8 @@ var AreaChart = React9.forwardRef(
               show: showTooltip,
               formatter: tooltipFormatter,
               valueFormatter: formatters.tooltip,
-              getLabel
+              getLabel,
+              forecastTag: forecastTagLookup3(data.series)
             }
           ),
           legend: buildLegend4(
@@ -1727,12 +1774,25 @@ var AreaChart = React9.forwardRef(
             },
             formatters.axis(yAxisConfig)
           ),
-          series: withReferenceMarks3(series, referenceLines, referenceBands, {
-            valueAxis: "y",
-            format: formatters.format,
-            color: chartColors.reference,
-            bandColor: chartColors.referenceBand
-          })
+          series: withForecastLines2(
+            withReferenceMarks3(
+              withGhostSeries3(series, data.series),
+              referenceLines,
+              referenceBands,
+              {
+                valueAxis: "y",
+                format: formatters.format,
+                color: chartColors.reference,
+                bandColor: chartColors.referenceBand
+              }
+            ),
+            data.series,
+            {
+              colors: data.series.map(
+                (s, i) => s.color || chartColors.series[i % chartColors.series.length]
+              )
+            }
+          )
         },
         optionOverride
       );

package/package.json

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