From f96100b8169bf324f6818418de94e5f60c4b1013 Mon Sep 17 00:00:00 2001
From: dev <akloeckner@users.noreply.github.com>
Date: Mon, 13 Jan 2025 01:14:11 +0100
Subject: [PATCH] fix: card height in grid

This changes the card height to occupy the assigned height in grid/sections view.
The Graph will be stretched to fill this space.
Its aspect ration will change. Change the `height` option to make it look better.

How is it done:

:host.height = 100%
=> fixes height of entire card to fill space, if there is a defined space

graph.flex = auto
=> assigns remaining space in card to the graph itself

graph_container.height = 100%
=> makes the container fill the entire space

graph__container__svg:
.position=relative
.width=100%
.height=100%
=> makes the container use the entire space. Not only in flex width.

The relative positioning changes the z-order of the graph and the labels.
So, this is fixed in the main source code.

The SVG also is freed aspect-ratio-wise, otherwise it could not fill the entire space.
---
 src/main.js  | 5 +++--
 src/style.js | 7 ++++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/main.js b/src/main.js
index 43a7bc0..0aa247c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -329,11 +329,11 @@ class MiniGraphCard extends LitElement {
       <div class="graph">
         ${ready ? html`
             <div class="graph__container">
-              ${this.renderLabels()}
-              ${this.renderLabelsSecondary()}
               <div class="graph__container__svg">
                 ${this.renderSvg()}
               </div>
+              ${this.renderLabels()}
+              ${this.renderLabelsSecondary()}
             </div>
             ${this.renderLegend()}
         ` : html`
@@ -539,6 +539,7 @@ class MiniGraphCard extends LitElement {
     const { height } = this.config;
     return svg`
       <svg width='100%' height=${height !== 0 ? '100%' : 0} viewBox='0 0 500 ${height}'
+        preserveAspectRatio='none'
         @click=${e => e.stopPropagation()}>
         <g>
           <defs>
diff --git a/src/style.js b/src/style.js
index 0139587..66c76c2 100644
--- a/src/style.js
+++ b/src/style.js
@@ -4,6 +4,7 @@ const style = css`
   :host {
     display: flex;
     flex-direction: column;
+    height: 100%;
   }
   ha-card {
     flex-direction: column;
@@ -234,6 +235,7 @@ const style = css`
     right: 0;
   }
   .graph {
+    flex: auto;
     align-self: flex-end;
     box-sizing: border-box;
     display: flex;
@@ -245,10 +247,13 @@ const style = css`
     display: flex;
     flex-direction: row;
     position: relative;
+    height: 100%;
   }
   .graph__container__svg {
     cursor: default;
-    flex: 1;
+    position: relative;
+    width: 100%;
+    height: 100%;
   }
   svg {
     overflow: hidden;