From 1eccee87bc59fb0f3eb012f6b3024fd8ddef04d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=B4me=20Wiedemann?= <jerome@wnetworks.org>
Date: Sat, 23 Jan 2021 21:15:35 +0000
Subject: [PATCH] feat: Floating header

---
 .devcontainer/ui-lovelace.yaml |  5 ++++-
 src/apexcharts-card.ts         | 25 ++++++++++++++++---------
 src/styles.ts                  | 14 ++++++++++----
 src/types-config-ti.ts         |  3 ++-
 src/types-config.ts            |  3 ++-
 5 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/.devcontainer/ui-lovelace.yaml b/.devcontainer/ui-lovelace.yaml
index dad7b63..c7823ff 100644
--- a/.devcontainer/ui-lovelace.yaml
+++ b/.devcontainer/ui-lovelace.yaml
@@ -20,7 +20,7 @@ views:
             cache: true
             layout: minimal
             header:
-              display: false
+              show: false
           - type: custom:apexcharts-card
             stacked: true
             series:
@@ -47,6 +47,9 @@ views:
         hours_to_show: 0.20
         cache: true
         layout: minimal
+        header:
+          floating: true
+
 
       - type: custom:apexcharts-card
         stacked: true
diff --git a/src/apexcharts-card.ts b/src/apexcharts-card.ts
index a908cfa..d5a5929 100644
--- a/src/apexcharts-card.ts
+++ b/src/apexcharts-card.ts
@@ -102,7 +102,7 @@ class ChartsCard extends LitElement {
 
   public setConfig(config: ChartCardExternalConfig) {
     const { ChartCardExternalConfig } = createCheckers(exportedTypeSuite);
-    ChartCardExternalConfig.check(config);
+    ChartCardExternalConfig.strictCheck(config);
 
     this._config = mergeDeep(
       {
@@ -110,7 +110,7 @@ class ChartsCard extends LitElement {
         cache: true,
         useCompress: false,
         show: { loading: true },
-        header: { display: true },
+        header: { show: true },
       },
       JSON.parse(JSON.stringify(config)),
     );
@@ -147,6 +147,10 @@ class ChartsCard extends LitElement {
     const spinnerClass: ClassInfo = {
       'lds-ring': this._config.show?.loading && this._updating ? true : false,
     };
+    const wrapperClasses: ClassInfo = {
+      wrapper: true,
+      'with-header': this._config.header?.show || true,
+    };
 
     return html`
       <ha-card>
@@ -158,8 +162,8 @@ class ChartsCard extends LitElement {
             <div></div>
           </div>
         </div>
-        <div class="wrapper ${this._config.header?.display ? 'with-header' : ''}">
-          ${this._config.header?.display ? this._renderHeader() : html``}
+        <div class=${classMap(wrapperClasses)}>
+          ${this._config.header?.show ? this._renderHeader() : html``}
           <div id="graph-wrapper">
             <div id="graph"></div>
           </div>
@@ -184,13 +188,16 @@ class ChartsCard extends LitElement {
   }
 
   private _renderHeader(): TemplateResult {
+    const classes: ClassInfo = {
+      floating: this._config?.header?.floating || false,
+    };
     return html`
-      <div class="header">
-        <div class="title">
-          <span class="state">${this._entities[0].state}</span>
-          <span class="uom">${computeUom(0, this._config, this._entities)}</span>
+      <div id="header" class=${classMap(classes)}>
+        <div id="header__title">
+          <span id="state">${this._entities[0].state}</span>
+          <span id="uom">${computeUom(0, this._config, this._entities)}</span>
         </div>
-        <div class="subtitble">${computeName(0, this._config, this._entities)}</div>
+        <div id="header__subtitle">${computeName(0, this._config, this._entities)}</div>
       </div>
     `;
   }
diff --git a/src/styles.ts b/src/styles.ts
index f7b328c..e4ea82e 100644
--- a/src/styles.ts
+++ b/src/styles.ts
@@ -27,21 +27,27 @@ export const styles: CSSResult = css`
     overflow: visible !important;
   }
 
-  .header {
+  #header {
     padding-top: 10px;
     padding-left: 10px;
     grid-area: header;
   }
-  .title > .state {
+  #header.floating {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+
+  #header__title > #state {
     font-size: 1.8em;
     font-weight: 500;
   }
-  .title > .uom {
+  #header__title > #uom {
     font-size: 1em;
     font-weight: 400;
     opacity: 0.8;
   }
-  .subtitble {
+  #header__subtitle {
     font-size: 0.8em;
     font-weight: 300;
   }
diff --git a/src/types-config-ti.ts b/src/types-config-ti.ts
index 89b3edd..bb945b2 100644
--- a/src/types-config-ti.ts
+++ b/src/types-config-ti.ts
@@ -28,7 +28,8 @@ export const ChartCardSeriesExternalConfig = t.iface([], {
 });
 
 export const ChartCardHeaderExternalConfig = t.iface([], {
-  "display": t.opt("boolean"),
+  "show": t.opt("boolean"),
+  "floating": t.opt("boolean"),
 });
 
 const exportedTypeSuite: t.ITypeSuite = {
diff --git a/src/types-config.ts b/src/types-config.ts
index 91797b1..1c18834 100644
--- a/src/types-config.ts
+++ b/src/types-config.ts
@@ -23,5 +23,6 @@ export interface ChartCardSeriesExternalConfig {
 }
 
 export interface ChartCardHeaderExternalConfig {
-  display?: boolean;
+  show?: boolean;
+  floating?: boolean;
 }