feat(datalabels): Option to display total when chart is stacked (#75)

Fixes #73

.devcontainer/ui-lovelace.yaml

@@ -83,7 +83,7 @@ views:
               floating: true
 
           - type: custom:apexcharts-card
-            stacked: false
+            stacked: true
             experimental:
               color_threshold: true
               hidden_by_default: true
@@ -92,6 +92,8 @@ views:
               - entity: sensor.random_0_1000
                 name: test1
                 type: column
+                show:
+                  datalabels: true
                 group_by:
                   duration: 1m
                   func: last
@@ -109,6 +111,7 @@ views:
                 type: column
                 show:
                   hidden_by_default: true
+                  datalabels: total
                 group_by:
                   duration: 1m
                   func: last

README.md

@@ -178,7 +178,7 @@ The card stricly validates all the options available (but not for the `apex_conf
 | `as_duration` | string | | v1.3.0 | Will pretty print the states as durations. Doesn't affect the graph, only the tooltip/legend/header display. You provide the source unit of your sensor. Valid values are `millisecond`, `second`, `minute`, `hour`, `day`, `week`, `month`, `year`.<br/>Eg: if the state is `345` and `as_duration` is set to `minute` then it would display `5h 45m` |
 | `in_header` | boolean | `true` | v1.4.0 | If `show_states` is enabled, this would show/hide this specific serie in the header |
 | `in_chart` | boolean | `true` | v1.4.0 | If `false`, hides the serie from the chart |
-| `datalabels` | boolean | `false` | v1.5.0 | If `true` will show the value of each point for this serie directly in the chart. Don't use it if you have a lot of points displayed, it will be a mess |
+| `datalabels` | boolean or string | `false` | v1.5.0 | If `true` will show the value of each point for this serie directly in the chart. Don't use it if you have a lot of points displayed, it will be a mess. If you set it to `total` (introduced in NEXT_VERSION), it will display the stacked total value (only works when `stacked: true`) |
 | `hidden_by_default` | boolean | `false` | v1.6.0 | See [experimental](#hidden_by_default-experimental-feature) |
 
 

src/apex-layouts.ts

@@ -276,6 +276,9 @@ function getYTooltipFormatter(config: ChartCardConfig, hass: HomeAssistant | und
 
 function getDataLabelsFormatter(config: ChartCardConfig) {
   return function (value, opts, conf = config) {
+    if (conf.series_in_graph[opts.seriesIndex].show.datalabels === 'total') {
+      return opts.w.globals.stackedSeriesTotals[opts.dataPointIndex];
+    }
     if (value === null) return;
     let lValue = value;
     if (lValue !== null && typeof lValue === 'number' && !Number.isInteger(lValue)) {

src/types-config-ti.ts

@@ -66,7 +66,7 @@ export const ChartCardAllSeriesExternalConfig = t.iface([], {
     "legend_value": t.opt("boolean"),
     "in_header": t.opt("boolean"),
     "in_chart": t.opt("boolean"),
-    "datalabels": t.opt("boolean"),
+    "datalabels": t.opt(t.union("boolean", t.lit('total'))),
     "hidden_by_default": t.opt("boolean"),
   })),
   "group_by": t.opt(t.iface([], {
@@ -101,7 +101,7 @@ export const ChartCardSeriesExternalConfig = t.iface([], {
     "legend_value": t.opt("boolean"),
     "in_header": t.opt("boolean"),
     "in_chart": t.opt("boolean"),
-    "datalabels": t.opt("boolean"),
+    "datalabels": t.opt(t.union("boolean", t.lit('total'))),
     "hidden_by_default": t.opt("boolean"),
   })),
   "group_by": t.opt(t.iface([], {

src/types-config.ts

@@ -63,7 +63,7 @@ export interface ChartCardAllSeriesExternalConfig {
     legend_value?: boolean;
     in_header?: boolean;
     in_chart?: boolean;
-    datalabels?: boolean;
+    datalabels?: boolean | 'total';
     hidden_by_default?: boolean;
   };
   group_by?: {
@@ -102,7 +102,7 @@ export interface ChartCardSeriesExternalConfig {
     legend_value?: boolean;
     in_header?: boolean;
     in_chart?: boolean;
-    datalabels?: boolean;
+    datalabels?: boolean | 'total';
     hidden_by_default?: boolean;
   };
   group_by?: {

src/types.ts

@@ -28,7 +28,7 @@ export interface ChartCardSeriesConfig extends ChartCardSeriesExternalConfig {
     legend_value: boolean;
     in_header: boolean;
     in_chart: boolean;
-    datalabels?: boolean;
+    datalabels?: boolean | 'total';
     hidden_by_default?: boolean;
   };
 }