Convert state history chart to LitElement + add warning if history is disabled (#7994)

Co-authored-by: Ian Richardson <iantrich@gmail.com>
Co-authored-by: Bram Kragten <mail@bramkragten.nl>

.github/ISSUE_TEMPLATE/BUG_REPORT.md

@@ -77,8 +77,8 @@ DO NOT DELETE ANY TEXT from this template! Otherwise, your issue may be closed w
 ## Problem-relevant frontend configuration
 
 <!--
-  An example configuration that caused the problem for you, e.g. the YAML configuration 
-  of the used cards. Fill this out even if it seems unimportant to you. Please be sure 
+  An example configuration that caused the problem for you, e.g. the YAML configuration
+  of the used cards. Fill this out even if it seems unimportant to you. Please be sure
   to remove personal information like passwords, private URLs and other credentials.
 -->
 

src/components/ha-sidebar.ts

@@ -774,7 +774,10 @@ class HaSidebar extends LitElement {
           font-weight: 400;
           color: var(--sidebar-menu-button-text-color, --primary-text-color);
           border-bottom: 1px solid var(--divider-color);
-          background-color: var(--sidebar-menu-button-background-color, --primary-background-color);
+          background-color: var(
+            --sidebar-menu-button-background-color,
+            --primary-background-color
+          );
           font-size: 20px;
           align-items: center;
           padding-left: calc(4px + env(safe-area-inset-left));

src/components/state-history-charts.js

@@ -1,111 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import LocalizeMixin from "../mixins/localize-mixin";
-import "./ha-circular-progress";
-import "./state-history-chart-line";
-import "./state-history-chart-timeline";
-
-class StateHistoryCharts extends LocalizeMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: block;
-          /* height of single timeline chart = 58px */
-          min-height: 58px;
-        }
-        .info {
-          text-align: center;
-          line-height: 58px;
-          color: var(--secondary-text-color);
-        }
-      </style>
-      <template
-        is="dom-if"
-        class="info"
-        if="[[_computeIsLoading(isLoadingData)]]"
-      >
-        <div class="info">
-          [[localize('ui.components.history_charts.loading_history')]]
-        </div>
-      </template>
-
-      <template
-        is="dom-if"
-        class="info"
-        if="[[_computeIsEmpty(isLoadingData, historyData)]]"
-      >
-        <div class="info">
-          [[localize('ui.components.history_charts.no_history_found')]]
-        </div>
-      </template>
-
-      <template is="dom-if" if="[[historyData.timeline.length]]">
-        <state-history-chart-timeline
-          hass="[[hass]]"
-          data="[[historyData.timeline]]"
-          end-time="[[_computeEndTime(endTime, upToNow, historyData)]]"
-          no-single="[[noSingle]]"
-          names="[[names]]"
-        ></state-history-chart-timeline>
-      </template>
-
-      <template is="dom-repeat" items="[[historyData.line]]">
-        <state-history-chart-line
-          hass="[[hass]]"
-          unit="[[item.unit]]"
-          data="[[item.data]]"
-          identifier="[[item.identifier]]"
-          is-single-device="[[_computeIsSingleLineChart(item.data, noSingle)]]"
-          end-time="[[_computeEndTime(endTime, upToNow, historyData)]]"
-          names="[[names]]"
-        ></state-history-chart-line>
-      </template>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      historyData: {
-        type: Object,
-        value: null,
-      },
-      names: Object,
-
-      isLoadingData: Boolean,
-
-      endTime: {
-        type: Object,
-      },
-
-      upToNow: Boolean,
-      noSingle: Boolean,
-    };
-  }
-
-  _computeIsSingleLineChart(data, noSingle) {
-    return !noSingle && data && data.length === 1;
-  }
-
-  _computeIsEmpty(isLoadingData, historyData) {
-    const historyDataEmpty =
-      !historyData ||
-      !historyData.timeline ||
-      !historyData.line ||
-      (historyData.timeline.length === 0 && historyData.line.length === 0);
-    return !isLoadingData && historyDataEmpty;
-  }
-
-  _computeIsLoading(isLoading) {
-    return isLoading && !this.historyData;
-  }
-
-  _computeEndTime(endTime, upToNow) {
-    // We don't really care about the value of historyData, but if it change we want to update
-    // endTime.
-    return upToNow ? new Date() : endTime;
-  }
-}
-customElements.define("state-history-charts", StateHistoryCharts);

src/components/state-history-charts.ts

@@ -0,0 +1,116 @@
+import "./ha-circular-progress";
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import "./state-history-chart-line";
+import "./state-history-chart-timeline";
+import { isComponentLoaded } from "../common/config/is_component_loaded";
+import type { HomeAssistant } from "../types";
+import { HistoryResult } from "../data/history";
+
+@customElement("state-history-charts")
+class StateHistoryCharts extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public historyData!: HistoryResult;
+
+  @property({ type: Boolean }) public names = false;
+
+  @property({ attribute: false }) public endTime?: Date;
+
+  @property({ type: Boolean }) public upToNow = false;
+
+  @property({ type: Boolean, attribute: "no-single" }) public noSingle = false;
+
+  @property({ type: Boolean }) public isLoadingData = false;
+
+  protected render(): TemplateResult {
+    if (!isComponentLoaded(this.hass, "history")) {
+      return html` <div class="info">
+        ${this.hass.localize("ui.components.history_charts.history_disabled")}
+      </div>`;
+    }
+
+    if (this.isLoadingData && !this.historyData) {
+      return html` <div class="info">
+        ${this.hass.localize("ui.components.history_charts.loading_history")}
+      </div>`;
+    }
+
+    if (this._isHistoryEmpty()) {
+      return html` <div class="info">
+        ${this.hass.localize("ui.components.history_charts.no_history_found")}
+      </div>`;
+    }
+
+    const computedEndTime = this.upToNow
+      ? new Date()
+      : this.endTime || new Date();
+
+    return html`
+      ${this.historyData.timeline.length
+        ? html`
+            <state-history-chart-timeline
+              .hass=${this.hass}
+              .data=${this.historyData.timeline}
+              .endTime=${computedEndTime}
+              .noSingle=${this.noSingle}
+              .names=${this.names}
+            ></state-history-chart-timeline>
+          `
+        : html``}
+      ${this.historyData.line.map(
+        (line) => html`
+          <state-history-chart-line
+            .hass=${this.hass}
+            .unit=${line.unit}
+            .data=${line.data}
+            .identifier=${line.identifier}
+            .isSingleDevice=${!this.noSingle &&
+            line.data &&
+            line.data.length === 1}
+            .endTime=${computedEndTime}
+            .names=${this.names}
+          ></state-history-chart-line>
+        `
+      )}
+    `;
+  }
+
+  private _isHistoryEmpty(): boolean {
+    const historyDataEmpty =
+      !this.historyData ||
+      !this.historyData.timeline ||
+      !this.historyData.line ||
+      (this.historyData.timeline.length === 0 &&
+        this.historyData.line.length === 0);
+    return !this.isLoadingData && historyDataEmpty;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      :host {
+        display: block;
+        /* height of single timeline chart = 58px */
+        min-height: 58px;
+      }
+      .info {
+        text-align: center;
+        line-height: 58px;
+        color: var(--secondary-text-color);
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "state-history-charts": StateHistoryCharts;
+  }
+}

src/translations/en.json

@@ -416,6 +416,7 @@
         }
       },
       "history_charts": {
+        "history_disabled": "History integration disabled",
         "loading_history": "Loading state history...",
         "no_history_found": "No state history found."
       },