From 4d6c11ce31372408cd173bd7a6e5e58b685bbb0c Mon Sep 17 00:00:00 2001
From: Philip Allgaier <mail@spacegaier.de>
Date: Wed, 27 Jan 2021 17:22:01 +0100
Subject: [PATCH] Enforce "good" states of binary_sensor as green in history
 timeline chart (#8145)

---
 src/components/entity/ha-chart-base.js        |  8 +++-
 .../state-history-chart-timeline.js           | 39 ++++++++++++++++++-
 2 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/src/components/entity/ha-chart-base.js b/src/components/entity/ha-chart-base.js
index 749b79ac3b..a6ed78fe48 100644
--- a/src/components/entity/ha-chart-base.js
+++ b/src/components/entity/ha-chart-base.js
@@ -638,8 +638,14 @@ class HaChartBase extends mixinBehaviors(
       const name = data[3];
       if (name === null) return Color().hsl(0, 40, 38);
       if (name === undefined) return Color().hsl(120, 40, 38);
-      const name1 = name.toLowerCase();
+      let name1 = name.toLowerCase();
       if (ret === undefined) {
+        if (data[4]) {
+          // Invert on/off if data[4] is true. Required for some binary_sensor device classes
+          // (BINARY_SENSOR_DEVICE_CLASS_COLOR_INVERTED) where "off" is the good (= green color) value.
+          name1 = name1 === "on" ? "off" : name1 === "off" ? "on" : name1;
+        }
+
         ret = colorDict[name1];
       }
       if (ret === undefined) {
diff --git a/src/components/state-history-chart-timeline.js b/src/components/state-history-chart-timeline.js
index 50c234f35f..727e5af83d 100644
--- a/src/components/state-history-chart-timeline.js
+++ b/src/components/state-history-chart-timeline.js
@@ -3,10 +3,27 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { formatDateTimeWithSeconds } from "../common/datetime/format_date_time";
+import { computeDomain } from "../common/entity/compute_domain";
 import { computeRTL } from "../common/util/compute_rtl";
 import LocalizeMixin from "../mixins/localize-mixin";
 import "./entity/ha-chart-base";
 
+/** Binary sensor device classes for which the static colors for on/off need to be inverted.
+ *  List the ones were "off" = good or normal state = should be rendered "green".
+ */
+const BINARY_SENSOR_DEVICE_CLASS_COLOR_INVERTED = new Set([
+  "battery",
+  "door",
+  "garage_door",
+  "gas",
+  "lock",
+  "opening",
+  "problem",
+  "safety",
+  "smoke",
+  "window",
+]);
+
 class StateHistoryChartTimeline extends LocalizeMixin(PolymerElement) {
   static get template() {
     return html`
@@ -129,6 +146,12 @@ class StateHistoryChartTimeline extends LocalizeMixin(PolymerElement) {
       let prevLastChanged = startTime;
       const entityDisplay = names[stateInfo.entity_id] || stateInfo.name;
 
+      const invertOnOff =
+        computeDomain(stateInfo.entity_id) === "binary_sensor" &&
+        BINARY_SENSOR_DEVICE_CLASS_COLOR_INVERTED.has(
+          this.hass.states[stateInfo.entity_id].attributes.device_class
+        );
+
       const dataRow = [];
       stateInfo.data.forEach((state) => {
         let newState = state.state;
@@ -144,7 +167,13 @@ class StateHistoryChartTimeline extends LocalizeMixin(PolymerElement) {
         if (prevState !== null && newState !== prevState) {
           newLastChanged = new Date(state.last_changed);
 
-          dataRow.push([prevLastChanged, newLastChanged, locState, prevState]);
+          dataRow.push([
+            prevLastChanged,
+            newLastChanged,
+            locState,
+            prevState,
+            invertOnOff,
+          ]);
 
           prevState = newState;
           locState = state.state_localize;
@@ -157,7 +186,13 @@ class StateHistoryChartTimeline extends LocalizeMixin(PolymerElement) {
       });
 
       if (prevState !== null) {
-        dataRow.push([prevLastChanged, endTime, locState, prevState]);
+        dataRow.push([
+          prevLastChanged,
+          endTime,
+          locState,
+          prevState,
+          invertOnOff,
+        ]);
       }
       datasets.push({ data: dataRow, entity_id: stateInfo.entity_id });
       labels.push(entityDisplay);