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_lines_type | `hour` | `5minute` / `hour` / `day` / `week` | Show grid lines dependently on `hours_to_show` value.
+| grid_lines_ratio | 2 |  | Grid lines: thin / thick lines amount ratio (0 - no thin lines)
 
 #### Line color object
 See [dynamic line color](#dynamic-line-color) for example usage.
@@ -259,6 +260,8 @@ The following theme variables can be set in your HA theme to customize the appea
 |------|:-------:|-------------|
 | mcg-title-letter-spacing |  | Letter spacing of the card title (`name` option).
 | mcg-title-font-weight | 500 | Font weight of the card title.
+| mcg-grid-line-thick-color | rgb(from var(--divider-color) R G B /0.5) | Grid "thick" line color.
+| mcg-grid-line-thin-color | var(--divider-color) | Grid "thin" line color.
 
 ### 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_lines_type = show.grid_lines_type ? show.grid_lines_type : false;
     return svg`
       <svg width='100%' height=${height !== 0 ? '100%' : 0} viewBox='0 0 500 ${height}'
         @click=${e => e.stopPropagation()}>
         <g>
+          ${grid_lines_type ? this.renderGridLines() : ''}
           <defs>
             ${this.renderSvgGradient(this.gradient)}
           </defs>
@@ -525,6 +527,54 @@ class MiniGraphCard extends LitElement {
       </svg>`;
   }
 
+  renderGridLines() {
+    const {
+      height, hours_to_show, show,
+    } = this.config;
+    const grid_lines_type = show.grid_lines_type ? show.grid_lines_type : false;
+    const grid_lines_ratio = (show.grid_lines_ratio && Number.isInteger(show.grid_lines_ratio))
+      ? show.grid_lines_ratio
+      : 2;
+
+    const containerWidth = 500;
+    let spanInHours;
+
+    switch (grid_lines_type) {
+      case '5minute':
+        spanInHours = 1 / 12;
+        break;
+      case 'hour':
+      default:
+        spanInHours = 1;
+        break;
+      case 'day':
+        spanInHours = 24;
+        break;
+      case 'week':
+        spanInHours = 168;
+    }
+
+    let numLines = hours_to_show / spanInHours;
+    const spanFactor = Math.ceil(hours_to_show / spanInHours) / (hours_to_show / spanInHours);
+    const thickPart = containerWidth * spanFactor / Math.ceil(numLines);
+    const thinPart = thickPart / (grid_lines_ratio + 1);
+    numLines *= (grid_lines_ratio + 1);
+
+    const lines = [];
+    for (let i = 0; i < numLines - 1; i += 1) {
+      const x = containerWidth - thinPart * (i + 1);
+      // const timeLabel = hours_to_show / numLines * (i + 1);
+
+      if ((i + 1) % (grid_lines_ratio + 1) > 0) {
+        lines.push(svg`<line x1=${x} y1="0" x2=${x} y2=${height} stroke="var(--mcg-grid-line-thin-color, var(--divider-color))" stroke-width="0.5"/>`);
+      } else {
+        lines.push(svg`<line x1=${x} y1="0" x2=${x} y2=${height} stroke="var(--mcg-grid-line-thick-color, rgb(from var(--divider-color) R G B /0.5))" stroke-width="0.5"/>`);
+      }
+    }
+
+    return lines;
+  }
+
   setTooltip(entity, index, value, label = null) {
     const {
       group_by,