feat: add grid lines

README.md

@@ -115,6 +115,7 @@ We recommend looking at the [Example usage section](#example-usage) to understan
 | state_map | [state map object](#state-map-object) |  | v0.8.0 | List of entity states to convert (order matters as position becomes a value on the graph).
 | 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
+| grid_line_type | string |  | v0.12.x | Show grids lines using `hour` / `day` / `week` and the value of hours_to_show
 
 
 #### Entities object

src/main.js

@@ -507,11 +507,12 @@ class MiniGraphCard extends LitElement {
   }
 
   renderSvg() {
-    const { height } = this.config;
+    const { height, grid_line_type = false } = this.config;
     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 +526,44 @@ class MiniGraphCard extends LitElement {
       </svg>`;
   }
 
+  renderGridLines() {
+    const {
+      height, hours_to_show, grid_line_type,
+    } = this.config;
+
+    const containerWidth = 500;
+    let numLines;
+    let xRatio;
+
+    switch (grid_line_type) {
+      case 'hour':
+      default:
+        numLines = hours_to_show;
+        xRatio = containerWidth / numLines;
+        break;
+      case 'day':
+        numLines = Math.round(hours_to_show / 24);
+        xRatio = (containerWidth / numLines);
+        break;
+      case 'week':
+        numLines = Math.round(hours_to_show / 168);
+        xRatio = containerWidth / numLines;
+        break;
+    }
+    const lines = [];
+
+    for (let i = 0; i < numLines; i += 1) {
+      const x = xRatio * (i + 0.5);
+      if (i % 2 === 0) {
+        lines.push(svg`<line x1=${x} y1="0" x2=${x} y2=${height} stroke="lightgray" stroke-width="0.5" opacity="0.5"/>`);
+      } else {
+        lines.push(svg`<line x1=${x} y1="0" x2=${x} y2=${height} stroke="lightgray" stroke-width="0.5" opacity="1"/>`);
+      }
+    }
+
+    return lines;
+  }
+
   setTooltip(entity, index, value, label = null) {
     const {
       group_by,