@classic-homes/charts-svelte 0.3.2 → 0.4.1

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

@@ -7,13 +7,16 @@
   import type { BarChartProps } from '@classic-homes/charts-core';
   import {
     allSeriesEmpty,
+    barCornerRadius,
     buildAxis,
     buildDataLabel,
     buildDataZoom,
     buildLegend,
+    buildStackTotalSeries,
     buildTooltip,
     categoryTable,
     chartFormatters,
+    formatValue,
     generateBarChartDescription,
     getChartColors,
     gridInset,
@@ -22,8 +25,10 @@
     resolveChartHeight,
     resolveValueFormatter,
     seriesLabelLookup,
+    stackTotals,
     toPercentStack,
     withPointLabels,
+    withEndLabelInset,
     withReferenceMarks,
     withZoomInset,
   } from '@classic-homes/charts-core';
@@ -64,6 +69,7 @@
     orientation = 'vertical',
     stacked = false,
     showValues = false,
+    showTotal = false,
     valueFormat,
     locale,
     labelFormatter,
@@ -138,6 +144,7 @@
     const zoomAxis = isHorizontal ? 'y' : 'x';
     const legendBottom = builtInLegend && (legendConfig?.position ?? 'bottom') === 'bottom';
 
+    const stackIds = data.series.map((s) => s.stack ?? (stacked ? 'Total' : undefined));
     const series = data.series.map((source, index) => ({
       name: source.name,
       type: 'bar',
@@ -147,8 +154,11 @@
         formatters.label,
         { position: labelPosition }
       ),
-      stack: source.stack ?? (stacked ? 'Total' : undefined),
-      itemStyle: source.color ? { color: source.color } : undefined,
+      stack: stackIds[index],
+      itemStyle: {
+        ...(source.color && { color: source.color }),
+        borderRadius: barCornerRadius(isHorizontal, stackIds, index),
+      },
       label: buildDataLabel({ show: true, position: labelPosition }, undefined, {
         show: showValues,
         formatter: formatters.label,
@@ -159,6 +169,26 @@
       },
     }));
 
+    // Totals use the value format, not the percent one: they show the raw sum
+    const format = resolveValueFormatter(valueFormat, locale);
+    const totalSeries = showTotal
+      ? buildStackTotalSeries(data.categories, data.series, {
+          stacked,
+          position: labelPosition,
+          format,
+          axisType: categoryAxisType,
+        })
+      : [];
+
+    // Labels past the end of horizontal bars need room beside the plot
+    const endLabels = !isHorizontal
+      ? []
+      : totalSeries.length
+        ? [...stackTotals(data.series, stacked).values()].flat().map((t) => formatValue(t, format))
+        : showValues
+          ? plotted.flatMap((s) => s.data.map((value) => formatValue(value, formatters.format)))
+          : [];
+
     return mergeChartOption(
       {
         grid: {
@@ -167,7 +197,10 @@
           bottom: '3%',
           containLabel: true,
           ...withZoomInset(
-            gridInset(legendConfig, builtInLegend, xAxisConfig, yAxisConfig),
+            withEndLabelInset(
+              gridInset(legendConfig, builtInLegend, xAxisConfig, yAxisConfig),
+              endLabels
+            ),
             dataZoom,
             zoomAxis
           ),
@@ -200,7 +233,7 @@
           isHorizontal ? categoryAxis : valueAxis,
           isHorizontal ? yAxisConfig : formatters.axis(yAxisConfig)
         ),
-        series: withReferenceMarks(series, referenceLines, referenceBands, {
+        series: withReferenceMarks([...series, ...totalSeries], referenceLines, referenceBands, {
           valueAxis: isHorizontal ? 'x' : 'y',
           inverse: isHorizontal,
           format: formatters.format,

package/package.json

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