From e1c5b015bd753c2d2b5a33dd564f0b150d66f2d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=B4me=20W?= <jerome@wnetworks.org>
Date: Wed, 10 Feb 2021 16:34:03 +0100
Subject: [PATCH] feat(datalabels): Option to display total when chart is
 stacked (#75)

Fixes #73
---
 .devcontainer/ui-lovelace.yaml | 5 ++++-
 README.md                      | 2 +-
 src/apex-layouts.ts            | 3 +++
 src/types-config-ti.ts         | 4 ++--
 src/types-config.ts            | 4 ++--
 src/types.ts                   | 2 +-
 6 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/.devcontainer/ui-lovelace.yaml b/.devcontainer/ui-lovelace.yaml
index c1667bc..f3fc215 100644
--- a/.devcontainer/ui-lovelace.yaml
+++ b/.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
diff --git a/README.md b/README.md
index 1753e5d..658f7de 100644
--- a/README.md
+++ b/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) |
 
 
diff --git a/src/apex-layouts.ts b/src/apex-layouts.ts
index 25c46cb..c604dfe 100644
--- a/src/apex-layouts.ts
+++ b/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)) {
diff --git a/src/types-config-ti.ts b/src/types-config-ti.ts
index e0d8764..af2354c 100644
--- a/src/types-config-ti.ts
+++ b/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([], {
diff --git a/src/types-config.ts b/src/types-config.ts
index 5fa2db4..d69a2ad 100644
--- a/src/types-config.ts
+++ b/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?: {
diff --git a/src/types.ts b/src/types.ts
index 170eca3..f0332e6 100644
--- a/src/types.ts
+++ b/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;
   };
 }