feat: Floating header

lobodart · Jan 23, 2021 · 1eccee8 · 1eccee8
1 parent 39d4b8e
commit 1eccee8
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 16 deletions.
diff --git 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
@@ -102,15 +102,15 @@ class ChartsCard extends LitElement {
 
   public setConfig(config: ChartCardExternalConfig) {
     const { ChartCardExternalConfig } = createCheckers(exportedTypeSuite);
-    ChartCardExternalConfig.check(config);
+    ChartCardExternalConfig.strictCheck(config);
 
     this._config = mergeDeep(
       {
         hours_to_show: 24,
         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
@@ -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
@@ -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
@@ -23,5 +23,6 @@ export interface ChartCardSeriesExternalConfig {
 }
 
 export interface ChartCardHeaderExternalConfig {
-  display?: boolean;
+  show?: boolean;
+  floating?: boolean;
 }