Add "show_names" option to history graphs (#14546)

src/components/chart/state-history-chart-line.ts

@@ -26,7 +26,7 @@ class StateHistoryChartLine extends LitElement {
 
   @property() public identifier?: string;
 
-  @property({ type: Boolean }) public isSingleDevice = false;
+  @property({ type: Boolean }) public showNames = true;
 
   @property({ attribute: false }) public endTime!: Date;
 
@@ -101,7 +101,7 @@ class StateHistoryChartLine extends LitElement {
             propagate: true,
           },
           legend: {
-            display: !this.isSingleDevice,
+            display: this.showNames,
             labels: {
               usePointStyle: true,
             },

src/components/chart/state-history-chart-timeline.ts

@@ -83,7 +83,7 @@ export class StateHistoryChartTimeline extends LitElement {
 
   @property() public identifier?: string;
 
-  @property({ type: Boolean }) public isSingleDevice = false;
+  @property({ type: Boolean }) public showNames = true;
 
   @property({ type: Boolean }) public chunked = false;
 
@@ -175,8 +175,7 @@ export class StateHistoryChartTimeline extends LitElement {
             drawTicks: false,
           },
           ticks: {
-            display:
+            display: this.chunked || this.showNames,
-              this.chunked || !this.isSingleDevice || this.data.length !== 1,
           },
           afterSetDimensions: (y) => {
             y.maxWidth = y.chart.width * 0.18;

src/components/chart/state-history-charts.ts

@@ -48,7 +48,7 @@ class StateHistoryCharts extends LitElement {
 
   @property({ type: Boolean, attribute: "up-to-now" }) public upToNow = false;
 
-  @property({ type: Boolean, attribute: "no-single" }) public noSingle = false;
+  @property({ type: Boolean }) public showNames = true;
 
   @property({ type: Boolean }) public isLoadingData = false;
 
@@ -128,8 +128,7 @@ class StateHistoryCharts extends LitElement {
           .unit=${item.unit}
           .data=${item.data}
           .identifier=${item.identifier}
-          .isSingleDevice=${!this.noSingle &&
+          .showNames=${this.showNames}
-          this.historyData.line?.length === 1}
           .endTime=${this._computedEndTime}
           .names=${this.names}
         ></state-history-chart-line>
@@ -141,8 +140,7 @@ class StateHistoryCharts extends LitElement {
         .data=${item}
         .startTime=${this._computedStartTime}
         .endTime=${this._computedEndTime}
-        .isSingleDevice=${!this.noSingle &&
+        .showNames=${this.showNames}
-        this.historyData.timeline?.length === 1}
         .names=${this.names}
         .narrow=${this.narrow}
         .chunked=${this.virtualize}

src/dialogs/more-info/ha-more-info-history.ts

@@ -67,12 +67,14 @@ export class MoreInfoHistory extends LitElement {
                 .statTypes=${statTypes}
                 .names=${this._statNames}
                 hideLegend
+                .showNames=${false}
               ></statistics-chart>`
             : html`<state-history-charts
                 up-to-now
                 .hass=${this.hass}
                 .historyData=${this._stateHistory}
                 .isLoadingData=${!this._stateHistory}
+                .showNames=${false}
               ></state-history-charts>`}`
       : ""}`;
   }

src/panels/history/ha-panel-history.ts

@@ -163,7 +163,6 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {
                   .hass=${this.hass}
                   .historyData=${this._stateHistory}
                   .endTime=${this._endDate}
-                  no-single
                 >
                 </state-history-charts>
               `}

src/panels/lovelace/cards/hui-history-graph-card.ts

@@ -144,7 +144,7 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
             .historyData=${this._stateHistory}
             .names=${this._names}
             up-to-now
-            no-single
+            .showNames=${this._config.show_names}
           ></state-history-charts>
         </div>
       </ha-card>

src/panels/lovelace/cards/types.ts

@@ -300,6 +300,7 @@ export interface HistoryGraphCardConfig extends LovelaceCardConfig {
   hours_to_show?: number;
   refresh_interval?: number;
   title?: string;
+  show_names?: boolean;
 }
 
 export interface StatisticsGraphCardConfig extends LovelaceCardConfig {

src/panels/lovelace/editor/config-elements/hui-history-graph-card-editor.ts

@@ -4,6 +4,7 @@ import { customElement, property, state } from "lit/decorators";
 import {
   array,
   assert,
+  boolean,
   number,
   object,
   optional,
@@ -28,6 +29,7 @@ const cardConfigStruct = assign(
     title: optional(string()),
     hours_to_show: optional(number()),
     refresh_interval: optional(number()),
+    show_names: optional(boolean()),
   })
 );