feat: line_width per entity

README.md

@@ -126,6 +126,7 @@ properties of the Entity object detailed in the following table (as per `sensor.
 | entity ***(required)*** | string |         | Entity id of the sensor.
 | attribute | string |         | Retrieves an attribute or [sub-attribute (attr1.attr2...)](#accessing-attributes-in-complex-structures) instead of the state
 | name | string |         | Set a custom display name, defaults to entity's friendly_name.
+| line_width | number |         | Override for a thickness of the line.
 | color | string |         | Set a custom color, overrides all other color options including thresholds.
 | unit | string |         | Set a custom unit of measurement, overrides `unit` set in base config (`''` value for an empty unit).
 | aggregate_func | string |         | Override for aggregate function used to calculate point on the graph, `avg`, `median`, `min`, `max`, `first`, `last`, `sum`.

src/main.js

@@ -100,18 +100,36 @@ class MiniGraphCard extends LitElement {
     };
   }
 
+  getMinMaxLineWidth() {
+    const arr = this.config.entities
+      .map(entityConfig => entityConfig.line_width)
+      .filter(line_width => line_width !== undefined && !Number.isNaN(line_width));
+    return ({
+      min: Math.min(
+        this.config.line_width,
+        ...arr,
+      ),
+      max: Math.max(
+        this.config.line_width,
+        ...arr,
+      ),
+    });
+  }
+
   setConfig(config) {
     this.config = buildConfig(config, this.config);
     this._md5Config = SparkMD5.hash(JSON.stringify(this.config));
     const entitiesChanged = !compareArray(this.config.entities || [], config.entities);
 
     if (!this.Graph || entitiesChanged) {
       if (this._hass) this.hass = this._hass;
+      const min_line_width = this.getMinMaxLineWidth().min;
+      const max_line_width = this.getMinMaxLineWidth().max;
       this.Graph = this.config.entities.map(
         entity => new Graph(
           500,
           this.config.height,
-          [this.config.show.fill ? 0 : this.config.line_width, this.config.line_width],
+          [this.config.show.fill ? 0 : min_line_width, max_line_width],
           this.config.hours_to_show,
           this.config.points_per_hour,
           entity.aggregate_func || this.config.aggregate_func,
@@ -438,7 +456,7 @@ class MiniGraphCard extends LitElement {
         fill='none'
         stroke-dasharray=${this.length[i] || 'none'} stroke-dashoffset=${this.length[i] || 'none'}
         stroke=${'white'}
-        stroke-width=${this.config.line_width}
+        stroke-width=${this.config.entities[i].line_width || this.config.line_width}
         d=${this.line[i]}
       />`;
 
@@ -458,7 +476,7 @@ class MiniGraphCard extends LitElement {
         style=${`--mcg-hover: ${color};`}
         stroke=${color}
         fill=${color}
-        cx=${point[X]} cy=${point[Y]} r=${this.config.line_width}
+        cx=${point[X]} cy=${point[Y]} r=${this.config.entities[i].line_width || this.config.line_width}
         @mouseover=${() => this.setTooltip(i, point[3], point[V])}
         @mouseout=${() => (this.tooltip = {})}
       />
@@ -477,7 +495,7 @@ class MiniGraphCard extends LitElement {
         style="animation-delay: ${this.config.animate ? `${i * 0.5 + 0.5}s` : '0s'}"
         fill=${color}
         stroke=${color}
-        stroke-width=${this.config.line_width / 2}>
+        stroke-width=${(this.config.entities[i].line_width || this.config.line_width) / 2}>
         ${points.map(point => this.renderSvgPoint(point, i))}
       </g>`;
   }