Fix grid card size (#9044)

* Fix grid card size

* Remove console

* Rename

gallery/src/components/demo-card.js

@@ -15,6 +15,10 @@ class DemoCard extends PolymerElement {
           margin: 0 0 20px;
           color: var(--primary-color);
         }
+        h2 small {
+          font-size: 0.5em;
+          color: var(--primary-text-color);
+        }
         #card {
           max-width: 400px;
           width: 100vw;
@@ -34,7 +38,12 @@ class DemoCard extends PolymerElement {
           }
         }
       </style>
-      <h2>[[config.heading]]</h2>
+      <h2>
+        [[config.heading]]
+        <template is="dom-if" if="[[_size]]">
+          <small>(size [[_size]])</small>
+        </template>
+      </h2>
       <div class="root">
         <div id="card"></div>
         <template is="dom-if" if="[[showConfig]]">
@@ -55,6 +64,9 @@ class DemoCard extends PolymerElement {
         observer: "_configChanged",
       },
       showConfig: Boolean,
+      _size: {
+        type: Number,
+      },
     };
   }
 
@@ -70,6 +82,17 @@ class DemoCard extends PolymerElement {
 
     const el = this._createCardElement(safeLoad(config.config)[0]);
     card.appendChild(el);
+    this._getSize(el);
+  }
+
+  async _getSize(el) {
+    await customElements.whenDefined(el.localName);
+
+    if (!("getCardSize" in el)) {
+      this._size = undefined;
+      return;
+    }
+    this._size = await el.getCardSize();
   }
 
   _createCardElement(cardConfig) {

gallery/src/demos/demo-hui-grid-and-stack-card.ts

@@ -49,6 +49,100 @@ const ENTITIES = [
 ];
 
 const CONFIGS = [
+  {
+    heading: "Default Grid",
+    config: `
+- type: grid
+  cards:
+    - type: entity
+      entity: light.kitchen_lights
+    - type: entity
+      entity: light.bed_light
+    - type: entity
+      entity: device_tracker.demo_paulus
+    - type: sensor
+      entity: sensor.illumination
+      graph: line
+    - type: entity
+      entity: device_tracker.demo_anne_therese
+    `,
+  },
+  {
+    heading: "Non-square Grid with 2 columns",
+    config: `
+- type: grid
+  columns: 2
+  square: false
+  cards:
+    - type: entity
+      entity: light.kitchen_lights
+    - type: entity
+      entity: light.bed_light
+    - type: entity
+      entity: device_tracker.demo_paulus
+    - type: sensor
+      entity: sensor.illumination
+      graph: line
+    `,
+  },
+  {
+    heading: "Default Grid with title",
+    config: `
+- type: grid
+  title: Kitchen
+  cards:
+    - type: entity
+      entity: light.kitchen_lights
+    - type: entity
+      entity: light.bed_light
+    - type: entity
+      entity: device_tracker.demo_paulus
+    - type: sensor
+      entity: sensor.illumination
+      graph: line
+    - type: entity
+      entity: device_tracker.demo_anne_therese
+    `,
+  },
+  {
+    heading: "Columns 4",
+    config: `
+- type: grid
+  cards:
+    - type: entity
+      entity: light.kitchen_lights
+    - type: entity
+      entity: light.bed_light
+    - type: entity
+      entity: device_tracker.demo_paulus
+    - type: sensor
+      entity: sensor.illumination
+      graph: line
+    `,
+  },
+  {
+    heading: "Columns 2",
+    config: `
+- type: grid
+  columns: 2
+  cards:
+    - type: entity
+      entity: light.kitchen_lights
+    - type: entity
+      entity: light.bed_light
+    `,
+  },
+  {
+    heading: "Columns 1",
+    config: `
+- type: grid
+  columns: 1
+  cards:
+  - type: entity
+    entity: light.kitchen_lights
+    `,
+  },
+
   {
     heading: "Vertical Stack",
     config: `
@@ -99,45 +193,9 @@ const CONFIGS = [
       entity: light.bed_light
     `,
   },
-  {
-    heading: "Default Grid",
-    config: `
-- type: grid
-  cards:
-    - type: entity
-      entity: light.kitchen_lights
-    - type: entity
-      entity: light.bed_light
-    - type: entity
-      entity: device_tracker.demo_paulus
-    - type: sensor
-      entity: sensor.illumination
-      graph: line
-    - type: entity
-      entity: device_tracker.demo_anne_therese
-    `,
-  },
-  {
-    heading: "Non-square Grid with 2 columns",
-    config: `
-- type: grid
-  columns: 2
-  square: false
-  cards:
-    - type: entity
-      entity: light.kitchen_lights
-    - type: entity
-      entity: light.bed_light
-    - type: entity
-      entity: device_tracker.demo_paulus
-    - type: sensor
-      entity: sensor.illumination
-      graph: line
-    `,
-  },
 ];
 
-@customElement("demo-hui-stack-card")
+@customElement("demo-hui-grid-and-stack-card")
 class DemoStack extends LitElement {
   @query("#demos") private _demoRoot!: HTMLElement;
 
@@ -155,4 +213,8 @@ class DemoStack extends LitElement {
   }
 }
 
-customElements.define("demo-hui-stack-card", DemoStack);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-grid-and-stack-card": DemoStack;
+  }
+}

src/panels/lovelace/cards/hui-grid-card.ts

@@ -5,6 +5,11 @@ import { GridCardConfig } from "./types";
 import { LovelaceCardEditor } from "../types";
 
 const DEFAULT_COLUMNS = 3;
+const SQUARE_ROW_HEIGHTS_BY_COLUMNS = {
+  1: 5,
+  2: 3,
+  3: 2,
+};
 
 class HuiGridCard extends HuiStackCard<GridCardConfig> {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
@@ -18,8 +23,11 @@ class HuiGridCard extends HuiStackCard<GridCardConfig> {
     }
 
     if (this.square) {
-      // When we're square, each row is size 2.
-      return (this._cards.length / this.columns) * 2;
+      const rowHeight = SQUARE_ROW_HEIGHTS_BY_COLUMNS[this.columns] || 1;
+      return (
+        (this._cards.length / this.columns) * rowHeight +
+        (this._config.title ? 1 : 0)
+      );
     }
 
     const promises: Array<Promise<number> | number> = [];
@@ -28,11 +36,16 @@ class HuiGridCard extends HuiStackCard<GridCardConfig> {
       promises.push(computeCardSize(element));
     }
 
-    const results = await Promise.all(promises);
+    const cardSizes = await Promise.all(promises);
 
-    const maxCardSize = Math.max(...results);
+    let totalHeight = this._config.title ? 1 : 0;
 
-    return maxCardSize * (this._cards.length / this.columns);
+    // Each column will adjust to max card size of it's row
+    for (let start = 0; start < cardSizes.length; start += this.columns) {
+      totalHeight += Math.max(...cardSizes.slice(start, start + this.columns));
+    }
+
+    return totalHeight;
   }
 
   get columns() {

src/panels/lovelace/header-footer/hui-graph-header-footer.ts

@@ -104,7 +104,7 @@ export class HuiGraphHeaderFooter extends LitElement
     if (!this._coordinates) {
       return html`
         <div class="container">
-          <ha-circular-progress active></ha-circular-progress>
+          <ha-circular-progress active size="small"></ha-circular-progress>
         </div>
       `;
     }
@@ -210,7 +210,7 @@ export class HuiGraphHeaderFooter extends LitElement
     return css`
       ha-circular-progress {
         position: absolute;
-        top: calc(50% - 28px);
+        top: calc(50% - 14px);
       }
       .container {
         display: flex;