feat: add grid lines

README.md

@@ -116,7 +116,6 @@ We recommend looking at the [Example usage section](#example-usage) to understan
 | value_factor | number | 0 | v0.9.4 | Scale value by order of magnitude (e.g. convert Watts to kilo Watts), use negative value to scale down.
 | logarithmic | boolean | `false` | v0.10.0 | Use a Logarithmic scale for the graph
 
-
 #### Entities object
 Entities may be listed directly (as per `sensor.temperature` in the example below), or defined using
 properties of the Entity object detailed in the following table (as per `sensor.pressure` in the example below).
@@ -168,6 +167,8 @@ All properties are optional.
 | labels_secondary | `hover` | `true` / `false` / `hover` | Display secondary Y-axis labels.
 | name_adaptive_color | `false` | `true` / `false` | Make the name color adapt with the primary entity color.
 | icon_adaptive_color | `false` | `true` / `false` | Make the icon color adapt with the primary entity color.
+| grid_line_type | `hour` | `5minute` / `hour` / `day` / `week` | Show grids lines using  and the value of hours_to_show.
+| grid_line_frequency | 2 |  | Define the frequecy of thin / thick lines you want.
 
 #### Line color object
 See [dynamic line color](#dynamic-line-color) for example usage.

src/main.js

@@ -507,11 +507,13 @@ class MiniGraphCard extends LitElement {
   }
 
   renderSvg() {
-    const { height } = this.config;
+    const { height, show } = this.config;
+    const grid_line_type = show.grid_line_type ? show.grid_line_type : false;
     return svg`
       <svg width='100%' height=${height !== 0 ? '100%' : 0} viewBox='0 0 500 ${height}'
         @click=${e => e.stopPropagation()}>
         <g>
+          ${grid_line_type ? this.renderGridLines() : ''}
           <defs>
             ${this.renderSvgGradient(this.gradient)}
           </defs>
@@ -525,6 +527,49 @@ class MiniGraphCard extends LitElement {
       </svg>`;
   }
 
+  renderGridLines() {
+    const {
+      height, hours_to_show, show,
+    } = this.config;
+    const grid_line_type = show.grid_line_type ? show.grid_line_type : false;
+    const grid_line_frequency = show.grid_line_frequency ? show.grid_line_frequency : 2;
+
+    const containerWidth = 500;
+    let numLines;
+
+    let rounded_hours_to_show = Math.round(hours_to_show);
+    if (rounded_hours_to_show < 1) rounded_hours_to_show = 1;
+
+    switch (grid_line_type) {
+      case '5minute':
+        numLines = rounded_hours_to_show * 12;
+        break;
+      case 'hour':
+      default:
+        numLines = rounded_hours_to_show;
+        break;
+      case 'day':
+        numLines = Math.round(rounded_hours_to_show / 24);
+        break;
+      case 'week':
+        numLines = Math.round(rounded_hours_to_show / 168);
+        break;
+    }
+    const xRatio = containerWidth / numLines;
+    const lines = [];
+
+    for (let i = 0; i < numLines; i += 1) {
+      const x = xRatio * (i + 0.5);
+      if (i % grid_line_frequency > 0) {
+        lines.push(svg`<line x1=${x} y1="0" x2=${x} y2=${height} stroke="var(--divider-color)" stroke-width="0.5" opacity="0.5"/>`);
+      } else {
+        lines.push(svg`<line x1=${x} y1="0" x2=${x} y2=${height} stroke="rgb(from var(--divider-color) R G B /0.5)" stroke-width="0.5" opacity="1"/>`);
+      }
+    }
+
+    return lines;
+  }
+
   setTooltip(entity, index, value, label = null) {
     const {
       group_by,