Cleaner minimum row calculation

Card is considered small when its row size is 3 or less
Simpler sections checking
Simpler card height style

src/graph.js

@@ -45,6 +45,10 @@ export default class Graph {
 
   set history(data) { this._history = data; }
 
+  setHeight(newHeight) { this.height = newHeight - this.margin[Y] * 4; }
+
+  setWidth(newWidth) { this.width = newWidth - this.margin[X] * 2; }
+
   update(history = undefined) {
     if (history) {
       this._history = history;

src/main.js

@@ -48,7 +48,7 @@ class MiniGraphCard extends LitElement {
     this.stateChanged = false;
     this.initial = true;
     this._md5Config = undefined;
-    this.sections = this.checkSections();
+    this.sections = false;
     this.graphHeight = 100;
     this.graphWidth = 500;
   }
@@ -108,10 +108,7 @@ class MiniGraphCard extends LitElement {
     this._md5Config = SparkMD5.hash(JSON.stringify(this.config));
     const entitiesChanged = !compareArray(this.config.entities || [], config.entities);
 
-    const layout = this.getCurrentLayout();
-
-    this.graphWidth = this.sections ? layout.grid_columns * 120 : 500;
-    this.graphHeight = this.sections ? this.getGraphHeightSections() * 56 : this.config.height;
+    this.graphHeight = this.config.height;
 
     if (!this.Graph || entitiesChanged) {
       if (this._hass) this.hass = this._hass;
@@ -136,23 +133,7 @@ class MiniGraphCard extends LitElement {
   }
 
   checkSections() {
-    let root = document.querySelector('home-assistant');
-    root = root && root.shadowRoot;
-    root = root && root.querySelector('home-assistant-main');
-    root = root && root.shadowRoot;
-    root = root && root.querySelector('ha-drawer');
-    root = root && root.querySelector('partial-panel-resolver');
-    root = root && root.shadowRoot || root;
-    root = root && root.querySelector('ha-panel-lovelace');
-    root = root && root.shadowRoot;
-    root = root && root.querySelector('hui-root');
-    if (root) {
-      const ll = root.lovelace;
-      ll.current_view = root.___curView;
-      const panelType = ll.rawConfig.views[ll.current_view].type;
-      return panelType === 'sections';
-    }
-    return false;
+    return this.layout === 'grid';
   }
 
   getCurrentLayout() {
@@ -166,35 +147,14 @@ class MiniGraphCard extends LitElement {
   }
 
   getLayoutSize(layout) {
-    if (!this.sections) {
-      return '';
-    }
-    if (layout.grid_rows === 2) {
-      return 'small';
-    }
-    return '';
+    return this.sections && layout.grid_rows <= 3 ? 'small' : '';
   }
 
   getGraphHeightSections() {
     const layout = this.getCurrentLayout();
-    if (!this.config.show.name
-      && !this.config.show.state
-      && !this.config.show.icon
-      && this.config.show.extrema) {
-      return Math.max(layout.grid_rows - 1, 1);
-    }
-    if (!this.config.show.name
-      && !this.config.show.state
-      && !this.config.show.icon) {
-      return layout.grid_rows;
-    }
-    if (this.config.show.extrema) {
-      return Math.max(layout.grid_rows - 3, 1);
-    }
-    if (layout.grid_rows >= 3) {
-      return Math.max(layout.grid_rows - 2, 1);
-    }
-    return Math.max(layout.grid_rows - 1, 1);
+    const headerRows = this.getHeaderRows() + (this.getLayoutSize(layout) === '' ? 1 : 0);
+
+    return Math.max(layout.grid_rows - headerRows, 1);
   }
 
   connectedCallback() {
@@ -252,6 +212,7 @@ class MiniGraphCard extends LitElement {
       return this.renderWarnings();
     }
     const layout = this.getCurrentLayout();
+    this.sections = this.checkSections();
     return html`
       <ha-card
         class="flex ${this.sections ? 'sections' : ''} ${this.getLayoutSize(layout)}"
@@ -394,6 +355,19 @@ class MiniGraphCard extends LitElement {
   }
 
   renderGraph() {
+    if (this.sections) {
+      const layout = this.getCurrentLayout();
+      const graphRows = this.getGraphHeightSections();
+
+      this.graphWidth = layout.grid_columns * 120 + 8;
+      this.graphHeight = graphRows * 56 + 8;
+
+      this.Graph.forEach((_, index) => {
+        this.Graph[index].setWidth(this.graphWidth);
+        this.Graph[index].setHeight(this.graphHeight);
+      });
+    }
+
     return this.config.show.graph ? html`
       <div class="graph">
         <div class="graph__container">
@@ -1085,58 +1059,16 @@ class MiniGraphCard extends LitElement {
     }
   }
 
+  getHeaderRows() {
+    return ((this.config.show.name || this.config.show.icon || this.config.show.state) ? 1 : 0)
+      + ((this.config.show.extrema || this.config.show.average) ? 1 : 0);
+  }
+
   getLayoutOptions() {
-    if (!this.config.show.state
-      && this.config.show.extrema) {
-      return {
-        grid_rows: 2,
-        grid_columns: 2,
-        grid_min_rows: 3,
-        grid_min_columns: 2,
-      };
-    }
-    if (!this.config.show.name
-      && !this.config.show.state
-      && !this.config.show.icon) {
-      return {
-        grid_rows: 2,
-        grid_columns: 2,
-        grid_min_rows: 1,
-        grid_min_columns: 2,
-      };
-    }
-    if (!this.config.show.name
-      && !this.config.show.state
-      && !this.config.show.icon
-      && this.config.show.extrema) {
-      return {
-        grid_rows: 2,
-        grid_columns: 2,
-        grid_min_rows: 2,
-        grid_min_columns: 2,
-      };
-    }
-    if (this.config.show.extrema
-      && !this.config.show.fill) {
-      return {
-        grid_rows: 5,
-        grid_columns: 2,
-        grid_min_rows: 5,
-        grid_min_columns: 2,
-      };
-    }
-    if (this.config.show.extrema) {
-      return {
-        grid_rows: 4,
-        grid_columns: 2,
-        grid_min_rows: 4,
-        grid_min_columns: 2,
-      };
-    }
     return {
-      grid_rows: 2,
+      grid_rows: 1 + this.getHeaderRows(),
       grid_columns: 2,
-      grid_min_rows: 2,
+      grid_min_rows: 1 + this.getHeaderRows(),
       grid_min_columns: 2,
     };
   }

src/style.js

@@ -4,6 +4,7 @@ const style = css`
   :host {
     display: flex;
     flex-direction: column;
+    height: 100%;
   }
   ha-card {
     flex-direction: column;
@@ -13,8 +14,6 @@ const style = css`
     overflow: hidden;
   }
   ha-card.sections {
-    min-height: calc((var(--row-size, 1)*(var(--row-height) + var(--row-gap))) - var(--row-gap));
-    max-height: calc((var(--row-size, 1)*(var(--row-height) + var(--row-gap))) - var(--row-gap));
   }
   ha-card > div {
     padding: 0px 16px 16px 16px;
@@ -53,9 +52,6 @@ const style = css`
     order: -1;
     padding: 0 16px 8px 16px;
   }
-  ha-card[fill].sections .graph__legend {
-    padding: 0 16px 0px 16px;
-  }
   ha-card[fill] .info {
     padding-bottom: 16px;
   }