From 35c5391c0425c1d195f2f35b885aa8689c02129d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=B4me=20Wiedemann?= <jerome@wnetworks.org>
Date: Fri, 26 Feb 2021 17:40:14 +0000
Subject: [PATCH] feat(header): Standard header title home-assistant format
 using `standard_format`

Fixes #35
---
 .devcontainer/ui-lovelace.yaml |  9 +++++++++
 README.md                      |  1 +
 src/apexcharts-card.ts         | 13 ++++++++++---
 src/types-config-ti.ts         |  1 +
 src/types-config.ts            |  1 +
 5 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/.devcontainer/ui-lovelace.yaml b/.devcontainer/ui-lovelace.yaml
index 5d84b93..d9fb978 100644
--- a/.devcontainer/ui-lovelace.yaml
+++ b/.devcontainer/ui-lovelace.yaml
@@ -842,6 +842,11 @@ views:
             graph_span: 2h
             brush:
               selection_span: 10m
+            header:
+              show: true
+              title: test
+              standard_format: true
+              show_states: false
             series:
               - entity: sensor.random0_100
                 color: blue
@@ -861,3 +866,7 @@ views:
                 show:
                   in_brush: true
                   in_chart: false
+          - type: entities
+            title: test
+            entities:
+              - sensor.random0_100
diff --git a/README.md b/README.md
index 3e79d00..a161753 100644
--- a/README.md
+++ b/README.md
@@ -185,6 +185,7 @@ The card stricly validates all the options available (but not for the `apex_conf
 | `hidden_by_default` | boolean | `false` | v1.6.0 | See [experimental](#hidden_by_default-experimental-feature) |
 | `extremas` | boolean or string | `false` | v1.7.0 | If `true`, will show the min and the max of the serie in the chart. If the value is `time`, it will display also the time of the min/max value on top of the value. This feature doesn't work with `stacked: true`. |
 | `in_brush` | boolean | `false` | NEXT_VERSION | See [brush](#brush-experimental-feature) |
+| `standard_format` | boolean | `false` | NEXT_VERSION | Display the title using the standard Home-Assistant card format |
 
 
 ### Main `show` Options
diff --git a/src/apexcharts-card.ts b/src/apexcharts-card.ts
index c1b8461..e312997 100644
--- a/src/apexcharts-card.ts
+++ b/src/apexcharts-card.ts
@@ -1,5 +1,6 @@
 import 'array-flat-polyfill';
 import { LitElement, html, customElement, property, TemplateResult, CSSResult, PropertyValues } from 'lit-element';
+import { ifDefined } from 'lit-html/directives/if-defined';
 import { ClassInfo, classMap } from 'lit-html/directives/class-map';
 import { ChartCardConfig, ChartCardSeriesConfig, EntityCachePoints, EntityEntryCache, HistoryPoint } from './types';
 import { getLovelace, HomeAssistant } from 'custom-card-helpers';
@@ -431,8 +432,10 @@ class ChartsCard extends LitElement {
       'with-header': this._config.header?.show || true,
     };
 
+    const standardHeaderTitle = this._config.header?.standard_format ? this._config.header?.title : undefined;
+
     return html`
-      <ha-card>
+      <ha-card header=${ifDefined(standardHeaderTitle)}>
         <div id="spinner-wrapper">
           <div id="spinner" class=${classMap(spinnerClass)}>
             <div></div>
@@ -442,7 +445,9 @@ class ChartsCard extends LitElement {
           </div>
         </div>
         <div class=${classMap(wrapperClasses)}>
-          ${this._config.header?.show ? this._renderHeader() : html``}
+          ${this._config.header?.show && (this._config.header.show_states || !this._config.header.standard_format)
+            ? this._renderHeader()
+            : html``}
           <div id="graph-wrapper">
             <div id="graph"></div>
             ${this._config.series_in_brush.length ? html`<div id="brush"></div>` : ``}
@@ -473,7 +478,9 @@ class ChartsCard extends LitElement {
     };
     return html`
       <div id="header" class=${classMap(classes)}>
-        ${this._config?.header?.title ? html`<div id="header__title">${this._config.header.title}</div>` : html``}
+        ${!this._config?.header?.standard_format && this._config?.header?.title
+          ? html`<div id="header__title">${this._config.header.title}</div>`
+          : html``}
         ${this._config?.header?.show_states ? this._renderStates() : html``}
       </div>
     `;
diff --git a/src/types-config-ti.ts b/src/types-config-ti.ts
index 207f389..369cc2f 100644
--- a/src/types-config-ti.ts
+++ b/src/types-config-ti.ts
@@ -109,6 +109,7 @@ export const ChartCardHeaderExternalConfig = t.iface([], {
   "title": t.opt("string"),
   "show_states": t.opt("boolean"),
   "colorize_states": t.opt("boolean"),
+  "standard_format": t.opt("boolean"),
 });
 
 export const ChartCardColorThreshold = t.iface([], {
diff --git a/src/types-config.ts b/src/types-config.ts
index 620cd73..a26b8f1 100644
--- a/src/types-config.ts
+++ b/src/types-config.ts
@@ -108,6 +108,7 @@ export interface ChartCardHeaderExternalConfig {
   title?: string;
   show_states?: boolean;
   colorize_states?: boolean;
+  standard_format?: boolean;
 }
 
 export interface ChartCardColorThreshold {