From 5932f2fc7ebb260677753b3c7526d3fb42b6da95 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 20:03:03 +0000
Subject: [PATCH] fix(yaxis): when `in_chart: false`, `yaxis` generated config
 would be wrong

Fixes #724
---
 .devcontainer/ui-lovelace.yaml | 21 +++++++++++-
 src/apexcharts-card.ts         | 62 +++++++++++++++++-----------------
 2 files changed, 51 insertions(+), 32 deletions(-)

diff --git a/.devcontainer/ui-lovelace.yaml b/.devcontainer/ui-lovelace.yaml
index 54db414..0c7715f 100644
--- a/.devcontainer/ui-lovelace.yaml
+++ b/.devcontainer/ui-lovelace.yaml
@@ -1355,6 +1355,12 @@ views:
         stacked: true
         cache: false
         graph_span: 5min
+        header:
+          show: true
+          show_states: true
+          colorize_states: true
+        yaxis:
+          - id: should_work
         series:
           - entity: sensor.random0_100
             stack_group: group1
@@ -1366,12 +1372,25 @@ views:
               duration: 1min
             show:
               in_legend: false
+              in_header: false
           - entity: sensor.random0_100
             stack_group: group1
             type: column
+            show:
+              in_header: false
             # name: pioup
           - entity: sensor.random_0_1000
             type: column
+            show:
+              in_header: false
+            group_by:
+              duration: 1min
+          - entity: sensor.random_0_1000
+            name: only in header
+            type: column
+            show:
+              in_chart: false
+              in_header: true
             group_by:
               duration: 1min
-            # stack_group: group1
+            # stack_group: group1
\ No newline at end of file
diff --git a/src/apexcharts-card.ts b/src/apexcharts-card.ts
index a0dff1c..8ee642d 100644
--- a/src/apexcharts-card.ts
+++ b/src/apexcharts-card.ts
@@ -372,36 +372,6 @@ class ChartsCard extends LitElement {
 
       const defColors = this._config?.color_list || DEFAULT_COLORS;
       if (this._config) {
-        if (this._config.yaxis && this._config.yaxis.length > 1) {
-          if (
-            this._config.series.some((serie) => {
-              return !serie.yaxis_id;
-            })
-          ) {
-            throw new Error(`Multiple yaxis detected: Some series are missing the 'yaxis_id' configuration.`);
-          }
-          if (
-            this._config.yaxis.some((yaxis) => {
-              return !yaxis.id;
-            })
-          ) {
-            throw new Error(`Multiple yaxis detected: Some yaxis are missing an 'id'.`);
-          }
-        }
-        if (this._config.yaxis) {
-          const yAxisConfig = this._generateYAxisConfig(this._config);
-          if (this._config.apex_config) {
-            this._config.apex_config.yaxis = yAxisConfig;
-          } else {
-            this._config.apex_config = {
-              yaxis: yAxisConfig,
-            };
-          }
-          this._yAxisConfig?.forEach((yaxis) => {
-            [yaxis.min, yaxis.min_type] = this._getTypeOfMinMax(yaxis.min);
-            [yaxis.max, yaxis.max_type] = this._getTypeOfMinMax(yaxis.max);
-          });
-        }
         this._graphs = this._config.series.map((serie, index) => {
           serie.index = index;
           serie.ignore_history = !!(
@@ -493,6 +463,36 @@ class ChartsCard extends LitElement {
             this._config!.series_in_brush.push(serie);
           }
         });
+        if (this._config.yaxis && this._config.yaxis.length > 1) {
+          if (
+            this._config.series_in_graph.some((serie) => {
+              return !serie.yaxis_id;
+            })
+          ) {
+            throw new Error(`Multiple yaxis detected: Some series are missing the 'yaxis_id' configuration.`);
+          }
+          if (
+            this._config.yaxis.some((yaxis) => {
+              return !yaxis.id;
+            })
+          ) {
+            throw new Error(`Multiple yaxis detected: Some yaxis are missing an 'id'.`);
+          }
+        }
+        if (this._config.yaxis) {
+          const yAxisConfig = this._generateYAxisConfig(this._config);
+          if (this._config.apex_config) {
+            this._config.apex_config.yaxis = yAxisConfig;
+          } else {
+            this._config.apex_config = {
+              yaxis: yAxisConfig,
+            };
+          }
+          this._yAxisConfig?.forEach((yaxis) => {
+            [yaxis.min, yaxis.min_type] = this._getTypeOfMinMax(yaxis.min);
+            [yaxis.max, yaxis.max_type] = this._getTypeOfMinMax(yaxis.max);
+          });
+        }
         this._headerColors = this._headerColors.slice(0, this._config?.series.length);
       }
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -508,7 +508,7 @@ class ChartsCard extends LitElement {
     if (!config.yaxis) return undefined;
     const burned: boolean[] = [];
     this._yAxisConfig = JSON.parse(JSON.stringify(config.yaxis));
-    const yaxisConfig: ApexYAxis[] = config.series.map((serie, serieIndex) => {
+    const yaxisConfig: ApexYAxis[] = config.series_in_graph.map((serie, serieIndex) => {
       let idx = -1;
       if (config.yaxis?.length !== 1) {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion