From 1fe02e8d6c12c29932d7dcc0efca2170ef0297aa Mon Sep 17 00:00:00 2001
From: Denis Shulyaka <Shulyaka@gmail.com>
Date: Thu, 13 Jul 2023 18:04:04 +0300
Subject: [PATCH] Add current humidity to humidifier history chart (#17288)

* Add current humidity to humidifier history chart

* state-humidifier-on-color
---
 .../chart/state-history-chart-line.ts         | 85 +++++++++++++++++--
 src/data/history.ts                           |  2 +
 src/resources/ha-style.ts                     |  2 +-
 src/translations/en.json                      |  3 +
 4 files changed, 84 insertions(+), 8 deletions(-)

diff --git a/src/components/chart/state-history-chart-line.ts b/src/components/chart/state-history-chart-line.ts
index b90d57fb62..37f831c192 100644
--- a/src/components/chart/state-history-chart-line.ts
+++ b/src/components/chart/state-history-chart-line.ts
@@ -328,23 +328,94 @@ class StateHistoryChartLine extends LitElement {
           }
         });
       } else if (domain === "humidifier") {
+        const hasAction = states.states.some(
+          (entityState) => entityState.attributes?.action
+        );
+        const hasCurrent = states.states.some(
+          (entityState) => entityState.attributes?.current_humidity
+        );
+
+        const hasHumidifying =
+          hasAction &&
+          states.states.some(
+            (entityState: LineChartState) =>
+              entityState.attributes?.action === "humidifying"
+          );
+        const hasDrying =
+          hasAction &&
+          states.states.some(
+            (entityState: LineChartState) =>
+              entityState.attributes?.action === "drying"
+          );
+
         addDataSet(
           `${this.hass.localize("ui.card.humidifier.target_humidity_entity", {
             name: name,
           })}`
         );
-        addDataSet(
-          `${this.hass.localize("ui.card.humidifier.on_entity", {
-            name: name,
-          })}`,
-          true
-        );
+
+        if (hasCurrent) {
+          addDataSet(
+            `${this.hass.localize(
+              "ui.card.humidifier.current_humidity_entity",
+              {
+                name: name,
+              }
+            )}`
+          );
+        }
+
+        // If action attribute is available, we used it to shade the area below the humidity.
+        // If action attribute is not available, we shade the area when the device is on
+        if (hasHumidifying) {
+          addDataSet(
+            `${this.hass.localize("ui.card.humidifier.humidifying", {
+              name: name,
+            })}`,
+            true,
+            computedStyles.getPropertyValue("--state-humidifier-on-color")
+          );
+        } else if (hasDrying) {
+          addDataSet(
+            `${this.hass.localize("ui.card.humidifier.drying", {
+              name: name,
+            })}`,
+            true,
+            computedStyles.getPropertyValue("--state-humidifier-on-color")
+          );
+        } else {
+          addDataSet(
+            `${this.hass.localize("ui.card.humidifier.on_entity", {
+              name: name,
+            })}`,
+            true
+          );
+        }
 
         states.states.forEach((entityState) => {
           if (!entityState.attributes) return;
           const target = safeParseFloat(entityState.attributes.humidity);
+          // If the current humidity is not available, then we fill up to the target humidity
+          const current = hasCurrent
+            ? safeParseFloat(entityState.attributes?.current_humidity)
+            : target;
           const series = [target];
-          series.push(entityState.state === "on" ? target : null);
+
+          if (hasCurrent) {
+            series.push(current);
+          }
+
+          if (hasHumidifying) {
+            series.push(
+              entityState.attributes?.action === "humidifying" ? current : null
+            );
+          } else if (hasDrying) {
+            series.push(
+              entityState.attributes?.action === "drying" ? current : null
+            );
+          } else {
+            series.push(entityState.state === "on" ? current : null);
+          }
           pushData(new Date(entityState.last_changed), series);
         });
       } else {
diff --git a/src/data/history.ts b/src/data/history.ts
index 8202f44167..653dbef356 100644
--- a/src/data/history.ts
+++ b/src/data/history.ts
@@ -29,6 +29,8 @@ const LINE_ATTRIBUTES_TO_KEEP = [
   "hvac_action",
   "humidity",
   "mode",
+  "action",
+  "current_humidity",
 ];
 
 export interface LineChartState {
diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts
index 4bdac11926..aefe6e6479 100644
--- a/src/resources/ha-style.ts
+++ b/src/resources/ha-style.ts
@@ -156,7 +156,7 @@ documentContainer.innerHTML = `<custom-style>
       --state-device_tracker-active-color: var(--blue-color);
       --state-device_tracker-home-color: var(--green-color);
       --state-fan-active-color: var(--cyan-color);
-      --state-humidifier-active-color: var(--blue-color);
+      --state-humidifier-on-color: var(--blue-color);
       --state-light-active-color: var(--amber-color);
       --state-lock-jammed-color: var(--red-color);
       --state-lock-locked-color: var(--green-color);
diff --git a/src/translations/en.json b/src/translations/en.json
index ea9e09b5ef..b55a6dc042 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -134,6 +134,9 @@
         "state": "State",
         "mode": "Mode",
         "target_humidity_entity": "{name} target humidity",
+        "current_humidity_entity": "{name} current humidity",
+        "humidifying": "{name} humidifying",
+        "drying": "{name} drying",
         "on_entity": "{name} on"
       },
       "light": {