Add current humidity to humidifier history chart (#17288)

* Add current humidity to humidifier history chart

* state-humidifier-on-color

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", {
+        if (hasCurrent) {
-            name: name,
+          addDataSet(
-          })}`,
+            `${this.hass.localize(
-          true
+              "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 {

src/data/history.ts

@@ -29,6 +29,8 @@ const LINE_ATTRIBUTES_TO_KEEP = [
   "hvac_action",
   "humidity",
   "mode",
+  "action",
+  "current_humidity",
 ];
 
 export interface LineChartState {

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);

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": {