feat(header): Standard header title home-assistant format using `stan…

…dard_format`

Fixes #35

.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

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

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>
     `;

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([], {

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 {