diff --git a/README.md b/README.md index 8b2a9b7e..0c5d890b 100644 --- a/README.md +++ b/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`. diff --git a/src/main.js b/src/main.js index e5f95f26..85beb2e9 100644 --- a/src/main.js +++ b/src/main.js @@ -100,6 +100,22 @@ 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)); @@ -107,11 +123,13 @@ class MiniGraphCard extends LitElement { 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))} `; }