fix: card height in grid

README.md

@@ -92,7 +92,7 @@ We recommend looking at the [Example usage section](#example-usage) to understan
 | cache | boolean | `true` | v0.9.0 | Enable/disable local caching of history data.
 | show | list |  | v0.2.0 | List of UI elements to display/hide, for available items see [available show options](#available-show-options).
 | animate | boolean | `false` | v0.2.0 | Add a reveal animation to the graph.
-| height | number | `150` | v0.0.1 | Set a custom height of the line graph.
+| height | number | `150` | v0.0.1 | Set a custom height of the graph. Disregarded, if the card has a fixed size already, e.g. in sections/grid view.
 | bar_spacing | number | `4` | v0.9.0 | Set the spacing between bars in bar graph.
 | line_width | number | `5` | v0.0.1 | Set the thickness of the line.
 | line_color | string/list | `var(--accent-color)` | v0.0.1 | Set a custom color for the graph line, provide a list of colors for multiple graph entries.

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`
@@ -442,16 +442,24 @@ class MiniGraphCard extends LitElement {
   renderSvgPoint(point, i) {
     const color = this.gradient[i] ? this.computeColor(point[V], i) : 'inherit';
     return svg`
-      <circle
-        class='line--point'
-        ?inactive=${this.tooltip.index !== point[3]}
-        style=${`--mcg-hover: ${color};`}
+    <g
+      class='line--point--group'
+      ?inactive=${this.tooltip.index !== point[3]}
+      @mouseover=${() => this.setTooltip(i, point[3], point[V])}
+      @mouseout=${() => (this.tooltip = {})}
+    >
+      <line
+        class='line--point--border'
+        x1=${point[X]} y1=${point[Y]} x2=${point[X]} y2=${point[Y]}
+        stroke-linecap="round" stroke-width=${this.config.line_width * 2}
         stroke=${color}
-        fill=${color}
-        cx=${point[X]} cy=${point[Y]} r=${this.config.line_width}
-        @mouseover=${() => this.setTooltip(i, point[3], point[V])}
-        @mouseout=${() => (this.tooltip = {})}
       />
+      <line
+        class='line--point--fill'
+        x1=${point[X]} y1=${point[Y]} x2=${point[X]} y2=${point[Y]}
+        stroke-linecap="round" stroke-width=${this.config.line_width}
+      />
+    </g>
     `;
   }
 
@@ -539,6 +547,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>

src/style.js

@@ -1,16 +1,13 @@
 import { css } from 'lit-element';
 
 const style = css`
-  :host {
-    display: flex;
-    flex-direction: column;
-  }
   ha-card {
     flex-direction: column;
     flex: 1;
     padding: 16px 0;
     position: relative;
     overflow: hidden;
+    height: 100%;
   }
   ha-card > div {
     padding: 0px 16px 16px 16px;
@@ -234,6 +231,8 @@ const style = css`
     right: 0;
   }
   .graph {
+    flex: auto;
+    min-height: 0;
     align-self: flex-end;
     box-sizing: border-box;
     display: flex;
@@ -245,10 +244,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;
@@ -268,24 +270,32 @@ const style = css`
   .line[anim="false"] {
     animation: pop .25s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
   }
+  .line {
+    vector-effect: non-scaling-stroke;
+  }
+  .line--point--group {
+    cursor: pointer;
+  }
+  .line--point--border {
+    vector-effect: non-scaling-stroke;
+  }
+  .line--point--fill {
+    stroke: var(--primary-background-color, white);
+    vector-effect: non-scaling-stroke;
+  }
+  .line--point--group:hover .line--point--fill {
+    visibility: hidden;
+  }
   .line--points[inactive],
   .line--rect[inactive],
   .fill--rect[inactive] {
     opacity: 0 !important;
     animation: none !important;
     transition: all .15s !important;
   }
-  .line--points[tooltip] .line--point[inactive] {
+  .line--points[tooltip] .line--point--group[inactive] {
     opacity: 0;
   }
-  .line--point {
-    cursor: pointer;
-    fill: var(--primary-background-color, white);
-    stroke-width: inherit;
-  }
-  .line--point:hover {
-    fill: var(--mcg-hover, inherit) !important;
-  }
   .bars {
     animation: pop .25s cubic-bezier(0.215, 0.61, 0.355, 1);
   }
@@ -299,8 +309,9 @@ const style = css`
     opacity: .5;
     cursor: pointer;
   }
-  ha-card[gradient] .line--point:hover {
-    fill: var(--primary-text-color, white);
+  ha-card[gradient] .line--point--group:hover .line--point--fill {
+    visibility: unset;
+    stroke: var(--primary-text-color, white);
   }
   path,
   .line--points,