From 12cb8933270eb133aece07938acef6fec70ff58d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=B4me=20Wiedemann?= <jerome@wnetworks.org>
Date: Tue, 9 Jul 2024 11:52:20 +0000
Subject: [PATCH] feat(series): hide specific serie in legend with `in_legend:
 false`

Closes #74
---
 .devcontainer/ui-lovelace.yaml | 4 +++-
 src/apex-layouts.ts            | 9 +++++++++
 src/apexcharts-card.ts         | 3 +++
 src/const.ts                   | 2 ++
 src/types-config-ti.ts         | 1 +
 src/types-config.ts            | 1 +
 6 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/.devcontainer/ui-lovelace.yaml b/.devcontainer/ui-lovelace.yaml
index f63e633..54db414 100644
--- a/.devcontainer/ui-lovelace.yaml
+++ b/.devcontainer/ui-lovelace.yaml
@@ -1353,7 +1353,7 @@ views:
     cards:
       - type: custom:apexcharts-card
         stacked: true
-        # cache: false
+        cache: false
         graph_span: 5min
         series:
           - entity: sensor.random0_100
@@ -1364,6 +1364,8 @@ views:
             name: tes2t
             group_by:
               duration: 1min
+            show:
+              in_legend: false
           - entity: sensor.random0_100
             stack_group: group1
             type: column
diff --git a/src/apex-layouts.ts b/src/apex-layouts.ts
index 2462128..4938d7e 100644
--- a/src/apex-layouts.ts
+++ b/src/apex-layouts.ts
@@ -3,6 +3,7 @@ import parse from 'parse-duration';
 import {
   DEFAULT_AREA_OPACITY,
   DEFAULT_FLOAT_PRECISION,
+  DEFAULT_LEGEND_MARKER_WIDTH,
   DEFAULT_SERIE_TYPE,
   HOUR_24,
   NO_VALUE,
@@ -72,6 +73,7 @@ export function getLayoutConfig(
       position: 'bottom',
       show: true,
       formatter: getLegendFormatter(config, hass),
+      markers: getLegendMarkers(config),
     },
     stroke: {
       curve: getStrokeCurve(config, false),
@@ -390,6 +392,9 @@ function getLegendFormatter(config: ChartCardConfig, hass: HomeAssistant | undef
       undefined,
       hass2?.states[conf.series_in_graph[opts.seriesIndex].entity],
     );
+    if (!conf.series_in_graph[opts.seriesIndex].show.in_legend) {
+      return [];
+    }
     if (!conf.series_in_graph[opts.seriesIndex].show.legend_value) {
       return [name];
     } else {
@@ -430,6 +435,10 @@ function getLegendFormatter(config: ChartCardConfig, hass: HomeAssistant | undef
   };
 }
 
+function getLegendMarkers(config: ChartCardConfig) {
+  return { width: config.series_in_graph.map((serie) => (serie.show.in_legend ? DEFAULT_LEGEND_MARKER_WIDTH : 0)) };
+}
+
 function getStrokeCurve(config: ChartCardConfig, brush: boolean) {
   const series = brush ? config.series_in_brush : config.series_in_graph;
   return series.map((serie) => {
diff --git a/src/apexcharts-card.ts b/src/apexcharts-card.ts
index dec69c3..a0dff1c 100644
--- a/src/apexcharts-card.ts
+++ b/src/apexcharts-card.ts
@@ -61,6 +61,7 @@ import {
   DEFAULT_FLOAT_PRECISION,
   DEFAULT_SHOW_IN_CHART,
   DEFAULT_SHOW_IN_HEADER,
+  DEFAULT_SHOW_IN_LEGEND,
   DEFAULT_SHOW_LEGEND_VALUE,
   DEFAULT_SHOW_NAME_IN_HEADER,
   DEFAULT_SHOW_OFFSET_IN_NAME,
@@ -429,6 +430,7 @@ class ChartsCard extends LitElement {
           }
           if (!serie.show) {
             serie.show = {
+              in_legend: DEFAULT_SHOW_IN_LEGEND,
               legend_value: DEFAULT_SHOW_LEGEND_VALUE,
               in_header: DEFAULT_SHOW_IN_HEADER,
               in_chart: DEFAULT_SHOW_IN_CHART,
@@ -436,6 +438,7 @@ class ChartsCard extends LitElement {
               offset_in_name: DEFAULT_SHOW_OFFSET_IN_NAME,
             };
           } else {
+            serie.show.in_legend = serie.show.in_legend === undefined ? DEFAULT_SHOW_IN_LEGEND : serie.show.in_legend;
             serie.show.legend_value =
               serie.show.legend_value === undefined ? DEFAULT_SHOW_LEGEND_VALUE : serie.show.legend_value;
             serie.show.in_chart = serie.show.in_chart === undefined ? DEFAULT_SHOW_IN_CHART : serie.show.in_chart;
diff --git a/src/const.ts b/src/const.ts
index 17a63dd..bced4e0 100644
--- a/src/const.ts
+++ b/src/const.ts
@@ -13,6 +13,7 @@ export const DEFAULT_DURATION = '1h';
 export const DEFAULT_FUNC = 'raw';
 export const DEFAULT_GROUP_BY_FILL = 'last';
 export const DEFAULT_FILL_RAW = 'null';
+export const DEFAULT_SHOW_IN_LEGEND = true;
 export const DEFAULT_SHOW_LEGEND_VALUE = true;
 export const DEFAULT_SHOW_IN_HEADER = true;
 export const DEFAULT_SHOW_IN_CHART = true;
@@ -48,3 +49,4 @@ export const DEFAULT_MAX = 100;
 
 export const DEFAULT_UPDATE_DELAY = 1500;
 export const DEFAULT_AREA_OPACITY = 0.7;
+export const DEFAULT_LEGEND_MARKER_WIDTH = 12;
diff --git a/src/types-config-ti.ts b/src/types-config-ti.ts
index fb56512..bc63dec 100644
--- a/src/types-config-ti.ts
+++ b/src/types-config-ti.ts
@@ -111,6 +111,7 @@ export const ActionsConfig = t.iface([], {
 
 export const ChartCardSeriesShowConfigExt = t.iface([], {
   "as_duration": t.opt("ChartCardPrettyTime"),
+  "in_legend": t.opt("boolean"),
   "legend_value": t.opt("boolean"),
   "in_header": t.opt(t.union("boolean", t.lit('raw'), t.lit('before_now'), t.lit('after_now'))),
   "name_in_header": t.opt("boolean"),
diff --git a/src/types-config.ts b/src/types-config.ts
index 0d02a19..6597d82 100644
--- a/src/types-config.ts
+++ b/src/types-config.ts
@@ -111,6 +111,7 @@ export interface ActionsConfig {
 
 export interface ChartCardSeriesShowConfigExt {
   as_duration?: ChartCardPrettyTime;
+  in_legend?: boolean;
   legend_value?: boolean;
   in_header?: boolean | 'raw' | 'before_now' | 'after_now';
   name_in_header?: boolean;