Add text when no statistics found (#9642)

* Add text when no statistics found

* Update src/components/entity/ha-statistic-picker.ts

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>

* fix typos

* Update src/components/entity/ha-statistic-picker.ts

* Prettier

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>

src/components/entity/ha-entities-picker.ts

@@ -131,6 +131,9 @@ class HaEntitiesPickerLight extends LitElement {
   private async _addEntity(event: PolymerChangedEvent<string>) {
     event.stopPropagation();
     const toAdd = event.detail.value;
+    if (!toAdd) {
+      return;
+    }
     (event.currentTarget as any).value = "";
     if (!toAdd) {
       return;

src/components/entity/ha-statistic-picker.ts

@@ -22,46 +22,12 @@ import { compare } from "../../common/string/compare";
 import { getStatisticIds, StatisticsMetaData } from "../../data/history";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
+import { documentationUrl } from "../../util/documentation-url";
 import "../ha-combo-box";
 import type { HaComboBox } from "../ha-combo-box";
 import "../ha-svg-icon";
 import "./state-badge";
 
-// vaadin-combo-box-item
-
-const rowRenderer: ComboBoxLitRenderer<{
-  id: string;
-  name: string;
-  state?: HassEntity;
-}> = (item) => html`<style>
-    paper-icon-item {
-      padding: 0;
-      margin: -8px;
-    }
-    #content {
-      display: flex;
-      align-items: center;
-    }
-    ha-svg-icon {
-      padding-left: 2px;
-      color: var(--secondary-text-color);
-    }
-    :host(:not([selected])) ha-svg-icon {
-      display: none;
-    }
-    :host([selected]) paper-icon-item {
-      margin-left: 0;
-    }
-  </style>
-  <ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
-  <paper-icon-item>
-    <state-badge slot="item-icon" .stateObj=${item.state}></state-badge>
-    <paper-item-body two-line="">
-      ${item.name}
-      <span secondary>${item.id}</span>
-    </paper-item-body>
-  </paper-icon-item>`;
-
 @customElement("ha-statistic-picker")
 export class HaStatisticPicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -99,6 +65,53 @@ export class HaStatisticPicker extends LitElement {
 
   private _init = false;
 
+  private _rowRenderer: ComboBoxLitRenderer<{
+    id: string;
+    name: string;
+    state?: HassEntity;
+  }> = (item) => html`<style>
+      paper-icon-item {
+        padding: 0;
+        margin: -8px;
+      }
+      #content {
+        display: flex;
+        align-items: center;
+      }
+      ha-svg-icon {
+        padding-left: 2px;
+        color: var(--secondary-text-color);
+      }
+      :host(:not([selected])) ha-svg-icon {
+        display: none;
+      }
+      :host([selected]) paper-icon-item {
+        margin-left: 0;
+      }
+      a {
+        color: var(--primary-color);
+      }
+    </style>
+    <ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
+    <paper-icon-item>
+      <state-badge slot="item-icon" .stateObj=${item.state}></state-badge>
+      <paper-item-body two-line="">
+        ${item.name}
+        <span secondary
+          >${item.id === "" || item.id === "__missing"
+            ? html`<a
+                target="_blank"
+                rel="noopener noreferrer"
+                href="${documentationUrl(this.hass, "/more-info/statistics/")}"
+                >${this.hass.localize(
+                  "ui.components.statistic-picker.learn_more"
+                )}</a
+              >`
+            : item.id}</span
+        >
+      </paper-item-body>
+    </paper-icon-item>`;
+
   private _getStatistics = memoizeOne(
     (
       statisticIds: StatisticsMetaData[],
@@ -110,7 +123,7 @@ export class HaStatisticPicker extends LitElement {
           {
             id: "",
             name: this.hass.localize(
-              "ui.components.statistics-picker.no_statistics"
+              "ui.components.statistic-picker.no_statistics"
             ),
           },
         ];
@@ -142,10 +155,27 @@ export class HaStatisticPicker extends LitElement {
         });
       });
 
-      if (output.length === 1) {
+      if (!output.length) {
-        return output;
+        return [
+          {
+            id: "",
+            name: this.hass.localize("ui.components.statistic-picker.no_match"),
+          },
+        ];
       }
-      return output.sort((a, b) => compare(a.name || "", b.name || ""));
+
+      if (output.length > 1) {
+        output.sort((a, b) => compare(a.name || "", b.name || ""));
+      }
+
+      output.push({
+        id: "__missing",
+        name: this.hass.localize(
+          "ui.components.statistic-picker.missing_entity"
+        ),
+      });
+
+      return output;
     }
   );
 
@@ -195,7 +225,7 @@ export class HaStatisticPicker extends LitElement {
           ? this.hass.localize("ui.components.statistic-picker.statistic")
           : this.label}
         .value=${this._value}
-        .renderer=${rowRenderer}
+        .renderer=${this._rowRenderer}
         .disabled=${this.disabled}
         item-value-path="id"
         item-id-path="id"
@@ -216,7 +246,10 @@ export class HaStatisticPicker extends LitElement {
 
   private _statisticChanged(ev: PolymerChangedEvent<string>) {
     ev.stopPropagation();
-    const newValue = ev.detail.value;
+    let newValue = ev.detail.value;
+    if (newValue === "__missing") {
+      newValue = "";
+    }
 
     if (newValue !== this._value) {
       this._setValue(newValue);

src/components/entity/ha-statistics-picker.ts

@@ -90,6 +90,9 @@ class HaStatisticsPicker extends LitElement {
   private async _addStatistic(event: PolymerChangedEvent<string>) {
     event.stopPropagation();
     const toAdd = event.detail.value;
+    if (!toAdd) {
+      return;
+    }
     (event.currentTarget as any).value = "";
     if (!toAdd) {
       return;

src/panels/config/core/ha-config-core-form.ts

@@ -155,7 +155,7 @@ class ConfigCoreForm extends LitElement {
               <a
                 href="https://en.wikipedia.org/wiki/ISO_4217#Active_codes"
                 target="_blank"
-                rel="noopener noreferer"
+                rel="noopener noreferrer"
                 >${this.hass.localize(
                   "ui.panel.config.core.section.core.core_config.find_currency_value"
                 )}</a

src/panels/config/energy/components/ha-energy-device-settings.ts

@@ -47,7 +47,7 @@ export class EnergyDeviceSettings extends LitElement {
             )}
             <a
               target="_blank"
-              rel="noopener noreferer"
+              rel="noopener noreferrer"
               href="${documentationUrl(
                 this.hass,
                 "/docs/energy/individual-devices/"

src/panels/config/energy/components/ha-energy-grid-settings.ts

@@ -73,7 +73,7 @@ export class EnergyGridSettings extends LitElement {
             ${this.hass.localize("ui.panel.config.energy.grid.sub")}
             <a
               target="_blank"
-              rel="noopener noreferer"
+              rel="noopener noreferrer"
               href="${documentationUrl(
                 this.hass,
                 "/docs/energy/electricity-grid/"

src/panels/config/energy/components/ha-energy-solar-settings.ts

@@ -47,7 +47,7 @@ export class EnergySolarSettings extends LitElement {
             ${this.hass.localize("ui.panel.config.energy.solar.sub")}
             <a
               target="_blank"
-              rel="noopener noreferer"
+              rel="noopener noreferrer"
               href="${documentationUrl(
                 this.hass,
                 "/docs/energy/solar-panels/"

src/translations/en.json

@@ -390,6 +390,13 @@
           "failed_create_area": "Failed to create area."
         }
       },
+      "statistic-picker": {
+        "statistic": "Statistic",
+        "no_statistics": "You don't have any statistics",
+        "no_match": "No matching statistics found",
+        "missing_entity": "Why is my entity not listed?",
+        "learn_more": "Learn more about statistics"
+      },
       "addon-picker": {
         "addon": "Add-on",
         "error": {