@classic-homes/charts-react 0.5.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.cjs +52 -38
  2. package/dist/index.js +56 -38
  3. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -997,12 +997,17 @@ var LineChart = React6.forwardRef(
997
997
  formatters.axis(yAxisConfig)
998
998
  ),
999
999
  series: (0, import_charts_core6.withForecastLines)(
1000
- (0, import_charts_core6.withReferenceMarks)(series, referenceLines, referenceBands, {
1001
- valueAxis: "y",
1002
- format: formatters.format,
1003
- color: chartColors.reference,
1004
- bandColor: chartColors.referenceBand
1005
- }),
1000
+ (0, import_charts_core6.withReferenceMarks)(
1001
+ (0, import_charts_core6.withGhostSeries)(series, data.series),
1002
+ referenceLines,
1003
+ referenceBands,
1004
+ {
1005
+ valueAxis: "y",
1006
+ format: formatters.format,
1007
+ color: chartColors.reference,
1008
+ bandColor: chartColors.referenceBand
1009
+ }
1010
+ ),
1006
1011
  data.series,
1007
1012
  {
1008
1013
  colors: data.series.map(
@@ -1190,39 +1195,43 @@ var BarChart = React7.forwardRef(
1190
1195
  const labelPosition = isHorizontal ? "right" : "top";
1191
1196
  const zoomAxis = isHorizontal ? "y" : "x";
1192
1197
  const legendBottom = builtInLegend && (legendConfig?.position ?? "bottom") === "bottom";
1193
- const stackIds = data.series.map(() => stacked ? "Total" : void 0);
1194
- const series = data.series.map((source, index) => ({
1195
- name: source.name,
1196
- type: "bar",
1197
- data: (0, import_charts_core7.withForecastBars)(
1198
- (0, import_charts_core7.withPointLabels)(plotted[index].data, source.labels, formatters.label, {
1199
- position: labelPosition
1198
+ const stackIds = data.series.map((s) => (0, import_charts_core7.ghostStackId)(stacked ? "Total" : void 0, s));
1199
+ const series = (0, import_charts_core7.withGhostSeries)(
1200
+ data.series.map((source, index) => ({
1201
+ name: source.name,
1202
+ type: "bar",
1203
+ data: (0, import_charts_core7.withForecastBars)(
1204
+ (0, import_charts_core7.withPointLabels)(plotted[index].data, source.labels, formatters.label, {
1205
+ position: labelPosition
1206
+ }),
1207
+ source,
1208
+ source.color || chartColors.series[index % chartColors.series.length]
1209
+ ),
1210
+ stack: stackIds[index],
1211
+ itemStyle: {
1212
+ ...source.color && { color: source.color },
1213
+ borderRadius: (0, import_charts_core7.barCornerRadius)(isHorizontal, stackIds, index)
1214
+ },
1215
+ label: (0, import_charts_core7.buildDataLabel)({ show: true, position: labelPosition }, void 0, {
1216
+ show: showValues,
1217
+ formatter: formatters.label,
1218
+ getLabel
1200
1219
  }),
1201
- source,
1202
- source.color || chartColors.series[index % chartColors.series.length]
1203
- ),
1204
- stack: stackIds[index],
1205
- itemStyle: {
1206
- ...source.color && { color: source.color },
1207
- borderRadius: (0, import_charts_core7.barCornerRadius)(isHorizontal, stackIds, index)
1208
- },
1209
- label: (0, import_charts_core7.buildDataLabel)({ show: true, position: labelPosition }, void 0, {
1210
- show: showValues,
1211
- formatter: formatters.label,
1212
- getLabel
1213
- }),
1214
- emphasis: {
1215
- focus: "series"
1216
- }
1217
- }));
1220
+ emphasis: {
1221
+ focus: "series"
1222
+ }
1223
+ })),
1224
+ data.series
1225
+ );
1218
1226
  const format2 = (0, import_charts_core7.resolveValueFormatter)(valueFormat, locale);
1219
- const stackedSeries = data.series.map((s) => ({ data: s.data }));
1227
+ const isSolid = (index) => data.series[index].variant !== "ghost";
1228
+ const stackedSeries = data.series.filter((_, index) => isSolid(index)).map((s) => ({ data: s.data }));
1220
1229
  const totalSeries = showTotal ? (0, import_charts_core7.buildStackTotalSeries)(data.categories, stackedSeries, {
1221
1230
  stacked,
1222
1231
  position: labelPosition,
1223
1232
  format: format2
1224
1233
  }) : [];
1225
- 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))) : [];
1234
+ 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))) : [];
1226
1235
  return (0, import_charts_core7.mergeChartOption)(
1227
1236
  {
1228
1237
  grid: {
@@ -1705,12 +1714,17 @@ var AreaChart = React9.forwardRef(
1705
1714
  formatters.axis(yAxisConfig)
1706
1715
  ),
1707
1716
  series: (0, import_charts_core9.withForecastLines)(
1708
- (0, import_charts_core9.withReferenceMarks)(series, referenceLines, referenceBands, {
1709
- valueAxis: "y",
1710
- format: formatters.format,
1711
- color: chartColors.reference,
1712
- bandColor: chartColors.referenceBand
1713
- }),
1717
+ (0, import_charts_core9.withReferenceMarks)(
1718
+ (0, import_charts_core9.withGhostSeries)(series, data.series),
1719
+ referenceLines,
1720
+ referenceBands,
1721
+ {
1722
+ valueAxis: "y",
1723
+ format: formatters.format,
1724
+ color: chartColors.reference,
1725
+ bandColor: chartColors.referenceBand
1726
+ }
1727
+ ),
1714
1728
  data.series,
1715
1729
  {
1716
1730
  colors: data.series.map(
package/dist/index.js CHANGED
@@ -454,6 +454,7 @@ import {
454
454
  THEME_DARK as THEME_DARK2,
455
455
  toPercentStack,
456
456
  withPointLabels,
457
+ withGhostSeries,
457
458
  withReferenceMarks,
458
459
  withZoomInset
459
460
  } from "@classic-homes/charts-core";
@@ -979,12 +980,17 @@ var LineChart = React6.forwardRef(
979
980
  formatters.axis(yAxisConfig)
980
981
  ),
981
982
  series: withForecastLines(
982
- withReferenceMarks(series, referenceLines, referenceBands, {
983
- valueAxis: "y",
984
- format: formatters.format,
985
- color: chartColors.reference,
986
- bandColor: chartColors.referenceBand
987
- }),
983
+ withReferenceMarks(
984
+ withGhostSeries(series, data.series),
985
+ referenceLines,
986
+ referenceBands,
987
+ {
988
+ valueAxis: "y",
989
+ format: formatters.format,
990
+ color: chartColors.reference,
991
+ bandColor: chartColors.referenceBand
992
+ }
993
+ ),
988
994
  data.series,
989
995
  {
990
996
  colors: data.series.map(
@@ -1091,6 +1097,7 @@ import {
1091
1097
  forecastTagLookup as forecastTagLookup2,
1092
1098
  withForecastBars,
1093
1099
  formatValue,
1100
+ ghostStackId,
1094
1101
  generateBarChartDescription,
1095
1102
  getChartColors as getChartColors2,
1096
1103
  gridInset as gridInset2,
@@ -1101,6 +1108,7 @@ import {
1101
1108
  stackTotals,
1102
1109
  toPercentStack as toPercentStack2,
1103
1110
  withEndLabelInset,
1111
+ withGhostSeries as withGhostSeries2,
1104
1112
  withPointLabels as withPointLabels2,
1105
1113
  withReferenceMarks as withReferenceMarks2,
1106
1114
  withZoomInset as withZoomInset2
@@ -1203,39 +1211,43 @@ var BarChart = React7.forwardRef(
1203
1211
  const labelPosition = isHorizontal ? "right" : "top";
1204
1212
  const zoomAxis = isHorizontal ? "y" : "x";
1205
1213
  const legendBottom = builtInLegend && (legendConfig?.position ?? "bottom") === "bottom";
1206
- const stackIds = data.series.map(() => stacked ? "Total" : void 0);
1207
- const series = data.series.map((source, index) => ({
1208
- name: source.name,
1209
- type: "bar",
1210
- data: withForecastBars(
1211
- withPointLabels2(plotted[index].data, source.labels, formatters.label, {
1212
- position: labelPosition
1214
+ const stackIds = data.series.map((s) => ghostStackId(stacked ? "Total" : void 0, s));
1215
+ const series = withGhostSeries2(
1216
+ data.series.map((source, index) => ({
1217
+ name: source.name,
1218
+ type: "bar",
1219
+ data: withForecastBars(
1220
+ withPointLabels2(plotted[index].data, source.labels, formatters.label, {
1221
+ position: labelPosition
1222
+ }),
1223
+ source,
1224
+ source.color || chartColors.series[index % chartColors.series.length]
1225
+ ),
1226
+ stack: stackIds[index],
1227
+ itemStyle: {
1228
+ ...source.color && { color: source.color },
1229
+ borderRadius: barCornerRadius(isHorizontal, stackIds, index)
1230
+ },
1231
+ label: buildDataLabel2({ show: true, position: labelPosition }, void 0, {
1232
+ show: showValues,
1233
+ formatter: formatters.label,
1234
+ getLabel
1213
1235
  }),
1214
- source,
1215
- source.color || chartColors.series[index % chartColors.series.length]
1216
- ),
1217
- stack: stackIds[index],
1218
- itemStyle: {
1219
- ...source.color && { color: source.color },
1220
- borderRadius: barCornerRadius(isHorizontal, stackIds, index)
1221
- },
1222
- label: buildDataLabel2({ show: true, position: labelPosition }, void 0, {
1223
- show: showValues,
1224
- formatter: formatters.label,
1225
- getLabel
1226
- }),
1227
- emphasis: {
1228
- focus: "series"
1229
- }
1230
- }));
1236
+ emphasis: {
1237
+ focus: "series"
1238
+ }
1239
+ })),
1240
+ data.series
1241
+ );
1231
1242
  const format2 = resolveValueFormatter2(valueFormat, locale);
1232
- const stackedSeries = data.series.map((s) => ({ data: s.data }));
1243
+ const isSolid = (index) => data.series[index].variant !== "ghost";
1244
+ const stackedSeries = data.series.filter((_, index) => isSolid(index)).map((s) => ({ data: s.data }));
1233
1245
  const totalSeries = showTotal ? buildStackTotalSeries(data.categories, stackedSeries, {
1234
1246
  stacked,
1235
1247
  position: labelPosition,
1236
1248
  format: format2
1237
1249
  }) : [];
1238
- 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))) : [];
1250
+ 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))) : [];
1239
1251
  return mergeChartOption2(
1240
1252
  {
1241
1253
  grid: {
@@ -1589,6 +1601,7 @@ import {
1589
1601
  THEME_DARK as THEME_DARK3,
1590
1602
  toPercentStack as toPercentStack3,
1591
1603
  withPointLabels as withPointLabels3,
1604
+ withGhostSeries as withGhostSeries3,
1592
1605
  withReferenceMarks as withReferenceMarks3,
1593
1606
  withZoomInset as withZoomInset3
1594
1607
  } from "@classic-homes/charts-core";
@@ -1762,12 +1775,17 @@ var AreaChart = React9.forwardRef(
1762
1775
  formatters.axis(yAxisConfig)
1763
1776
  ),
1764
1777
  series: withForecastLines2(
1765
- withReferenceMarks3(series, referenceLines, referenceBands, {
1766
- valueAxis: "y",
1767
- format: formatters.format,
1768
- color: chartColors.reference,
1769
- bandColor: chartColors.referenceBand
1770
- }),
1778
+ withReferenceMarks3(
1779
+ withGhostSeries3(series, data.series),
1780
+ referenceLines,
1781
+ referenceBands,
1782
+ {
1783
+ valueAxis: "y",
1784
+ format: formatters.format,
1785
+ color: chartColors.reference,
1786
+ bandColor: chartColors.referenceBand
1787
+ }
1788
+ ),
1771
1789
  data.series,
1772
1790
  {
1773
1791
  colors: data.series.map(
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@classic-homes/charts-react",
3
- "version": "0.5.0",
3
+ "version": "0.6.0",
4
4
  "description": "React ECharts components for Classic Theme",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs",