feat: Show value in legend

RomRider · Jan 22, 2021 · 869a7f8 · 869a7f8
1 parent c5a8ee2
commit 869a7f8
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/src/apex-layouts.ts b/src/apex-layouts.ts
@@ -1,8 +1,9 @@
+import { HomeAssistant } from 'custom-card-helpers';
 import moment from 'moment';
 import { ChartCardConfig } from './types';
 import { getMilli, mergeDeep } from './utils';
 
-export function getLayoutConfig(config: ChartCardConfig): unknown {
+export function getLayoutConfig(config: ChartCardConfig, hass: HomeAssistant | undefined = undefined): unknown {
   const def = {
     chart: {
       stacked: config?.stacked,
@@ -49,6 +50,19 @@ export function getLayoutConfig(config: ChartCardConfig): unknown {
         postion: 'topRight',
       },
     },
+    legend: {
+      formatter: function (seriesName, opts, conf = config, hass2 = hass) {
+        return [
+          seriesName,
+          ' - ',
+          `<strong>${opts.w.globals.series[opts.seriesIndex].slice(-1)}${
+            conf.series[opts.seriesIndex].unit ||
+            hass2?.states[conf.series[opts.seriesIndex].entity].attributes.unit_of_measurement ||
+            ''
+          }</strong>`,
+        ];
+      },
+    },
     stroke: {
       curve: config.series.map((serie) => {
         return serie.curve || 'smooth';

diff --git a/src/apexcharts-card.ts b/src/apexcharts-card.ts
@@ -180,7 +180,7 @@ class ChartsCard extends LitElement {
     if (!this._apexChart && this.shadowRoot && this._config && this.shadowRoot.querySelector('#graph')) {
       this._loaded = true;
       const graph = this.shadowRoot.querySelector('#graph');
-      this._apexChart = new ApexCharts(graph, getLayoutConfig(this._config));
+      this._apexChart = new ApexCharts(graph, getLayoutConfig(this._config, this._hass));
       this._apexChart.render();
     }
   }