@classic-homes/charts-react 0.3.0 → 0.4.1

package/dist/index.cjs

@@ -1107,6 +1107,7 @@ var BarChart = React7.forwardRef(
     orientation = "vertical",
     stacked = false,
     showValues = false,
+    showTotal = false,
     valueFormat,
     locale,
     labelFormatter,
@@ -1175,14 +1176,18 @@ 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: stacked ? "Total" : void 0,
-        itemStyle: source.color ? { color: source.color } : void 0,
+        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,
@@ -1192,6 +1197,14 @@ var BarChart = React7.forwardRef(
           focus: "series"
         }
       }));
+      const format2 = (0, import_charts_core7.resolveValueFormatter)(valueFormat, locale);
+      const stackedSeries = data.series.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))) : [];
       return (0, import_charts_core7.mergeChartOption)(
         {
           grid: {
@@ -1200,7 +1213,10 @@ var BarChart = React7.forwardRef(
             bottom: "3%",
             containLabel: true,
             ...(0, import_charts_core7.withZoomInset)(
-              (0, import_charts_core7.gridInset)(legendConfig, builtInLegend, xAxisConfig, yAxisConfig),
+              (0, import_charts_core7.withEndLabelInset)(
+                (0, import_charts_core7.gridInset)(legendConfig, builtInLegend, xAxisConfig, yAxisConfig),
+                endLabels
+              ),
               dataZoom,
               zoomAxis
             )
@@ -1233,7 +1249,7 @@ var BarChart = React7.forwardRef(
             isHorizontal ? categoryAxis : valueAxis,
             isHorizontal ? yAxisConfig : formatters.axis(yAxisConfig)
           ),
-          series: (0, import_charts_core7.withReferenceMarks)(series, referenceLines, referenceBands, {
+          series: (0, import_charts_core7.withReferenceMarks)([...series, ...totalSeries], referenceLines, referenceBands, {
             valueAxis: isHorizontal ? "x" : "y",
             inverse: isHorizontal,
             format: formatters.format,
@@ -1253,6 +1269,7 @@ var BarChart = React7.forwardRef(
       isPercent,
       stacked,
       showValues,
+      showTotal,
       valueFormat,
       locale,
       labelFormatter,
@@ -2651,7 +2668,7 @@ var GaugeChart = React14.forwardRef(
     animation = true,
     splitNumber = 10,
     showProgress = true,
-    formatValue,
+    formatValue: formatValue2,
     showTooltip = true,
     valueFormat,
     locale,
@@ -2674,7 +2691,7 @@ var GaugeChart = React14.forwardRef(
       () => (0, import_charts_core14.resolveValueFormatter)(valueFormat, locale),
       [valueFormat, locale]
     );
-    const valueFormatter = formatValue ?? format;
+    const valueFormatter = formatValue2 ?? format;
     const option = React14.useMemo(() => {
       return (0, import_charts_core14.mergeChartOption)(
         {

package/dist/index.js

@@ -1061,13 +1061,16 @@ import {
 } from "echarts/components";
 import { CanvasRenderer as CanvasRenderer3 } from "echarts/renderers";
 import {
+  barCornerRadius,
   buildAxis as buildAxis2,
   buildDataLabel as buildDataLabel2,
   buildDataZoom as buildDataZoom2,
   buildLegend as buildLegend2,
+  buildStackTotalSeries,
   buildTooltip as buildTooltip2,
   categoryTable as categoryTable2,
   chartFormatters as chartFormatters2,
+  formatValue,
   generateBarChartDescription,
   getChartColors as getChartColors2,
   gridInset as gridInset2,
@@ -1075,7 +1078,9 @@ import {
   resolveChartHeight,
   resolveValueFormatter as resolveValueFormatter2,
   seriesLabelLookup as seriesLabelLookup2,
+  stackTotals,
   toPercentStack as toPercentStack2,
+  withEndLabelInset,
   withPointLabels as withPointLabels2,
   withReferenceMarks as withReferenceMarks2,
   withZoomInset as withZoomInset2
@@ -1109,6 +1114,7 @@ var BarChart = React7.forwardRef(
     orientation = "vertical",
     stacked = false,
     showValues = false,
+    showTotal = false,
     valueFormat,
     locale,
     labelFormatter,
@@ -1177,14 +1183,18 @@ 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: stacked ? "Total" : void 0,
-        itemStyle: source.color ? { color: source.color } : void 0,
+        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,
@@ -1194,6 +1204,14 @@ var BarChart = React7.forwardRef(
           focus: "series"
         }
       }));
+      const format2 = resolveValueFormatter2(valueFormat, locale);
+      const stackedSeries = data.series.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))) : [];
       return mergeChartOption2(
         {
           grid: {
@@ -1202,7 +1220,10 @@ var BarChart = React7.forwardRef(
             bottom: "3%",
             containLabel: true,
             ...withZoomInset2(
-              gridInset2(legendConfig, builtInLegend, xAxisConfig, yAxisConfig),
+              withEndLabelInset(
+                gridInset2(legendConfig, builtInLegend, xAxisConfig, yAxisConfig),
+                endLabels
+              ),
               dataZoom,
               zoomAxis
             )
@@ -1235,7 +1256,7 @@ var BarChart = React7.forwardRef(
             isHorizontal ? categoryAxis : valueAxis,
             isHorizontal ? yAxisConfig : formatters.axis(yAxisConfig)
           ),
-          series: withReferenceMarks2(series, referenceLines, referenceBands, {
+          series: withReferenceMarks2([...series, ...totalSeries], referenceLines, referenceBands, {
             valueAxis: isHorizontal ? "x" : "y",
             inverse: isHorizontal,
             format: formatters.format,
@@ -1255,6 +1276,7 @@ var BarChart = React7.forwardRef(
       isPercent,
       stacked,
       showValues,
+      showTotal,
       valueFormat,
       locale,
       labelFormatter,
@@ -2763,7 +2785,7 @@ var GaugeChart = React14.forwardRef(
     animation = true,
     splitNumber = 10,
     showProgress = true,
-    formatValue,
+    formatValue: formatValue2,
     showTooltip = true,
     valueFormat,
     locale,
@@ -2786,7 +2808,7 @@ var GaugeChart = React14.forwardRef(
       () => resolveValueFormatter9(valueFormat, locale),
       [valueFormat, locale]
     );
-    const valueFormatter = formatValue ?? format;
+    const valueFormatter = formatValue2 ?? format;
     const option = React14.useMemo(() => {
       return mergeChartOption9(
         {

package/package.json

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