diff --git a/README.md b/README.md index f932f8c..b6ed496 100755 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ The card works with entities from within the **sensor** domain and displays the ```yaml resources: - - url: /local/mini-graph-card.js?v=0.0.3 + - url: /local/mini-graph-card.js?v=0.0.4 type: module ``` @@ -32,7 +32,7 @@ git clone https://github.com/kalkih/mini-graph-card.git ```yaml resources: - - url: /local/mini-graph-card/mini-graph-card.js?v=0.0.3 + - url: /local/mini-graph-card/mini-graph-card.js?v=0.0.4 type: module ``` @@ -55,7 +55,7 @@ custom_updater: ```yaml resources: - - url: /local/mini-graph-card.js?v=0.0.3 + - url: /local/mini-graph-card.js?v=0.0.4 type: module ``` @@ -63,7 +63,7 @@ If you went the `git clone` route, just run `git pull` from inside your `config/ ```yaml resources: - - url: /local/mini-graph-card/mini-graph-card.js?v=0.0.3 + - url: /local/mini-graph-card/mini-graph-card.js?v=0.0.4 type: module ``` @@ -79,12 +79,17 @@ resources: | name | string | optional | v0.0.1 | Set a custom `friendly_name` which is displayed beside the icon. | unit | string | optional | v0.0.1 | Set a custom unit of measurement. | accuracy | number | 10 | v0.0.1 | Specify how many data points should be used to render the graph, higher number equals higher detailed graph. Results can vary depending on how often your sensor updates. *(Recommended to keep between 5 & 25).* -| hours_to_show | number | 24 | v0.0.3 | Specify how many hours to show. +| hours_to_show | number | 24 | v0.0.2 | Specify how many hours to show. | height | number | 150 | v0.0.1 | Set a custom height of the line graph. | font_size | number | 100 | v0.0.3 | Adjust the font size of the state value, as percentage of the original size. | line_color | string | 'var(accent-color)' | v0.0.1 | Set a custom color for the line in the graph. | line_width | number | 5 | v0.0.1 | Set a custom width of the line. | more_info | boolean | true | v0.0.1 | Set to `false` to disable the "more info" dialog when clicking on the card. +| line_value_above | number | optional | v0.0.4 | Set a threshold where if current state is above this value, the line color will change to what's specified in `line_value_below`. +| line_color_above | string | optional | v0.0.4 | Set the line color for `line_value_above` +| line_value_below | number | optional | v0.0.4 | See `line_value_above`. +| line_color_below | string | optional | v0.0.4 | See `line_color_above`. + ### Example usage diff --git a/changelog.md b/changelog.md index bc80ee9..f1e23f2 100755 --- a/changelog.md +++ b/changelog.md @@ -1,4 +1,8 @@ -## v0.0.2 +## v0.0.4 +- Added options to have the line change color if the state is above/below specified values +- Fixed graph when setting accuracy option to a higher value than the available data points in history + +## v0.0.3 - Added option `font_size` to modify the font size scale of the state #4 - Fixed ` attribute d: Expected number` errors. - Decreased the default font size slightly #4 diff --git a/mini-graph-card.js b/mini-graph-card.js index 54b1d75..df12353 100755 --- a/mini-graph-card.js +++ b/mini-graph-card.js @@ -53,6 +53,10 @@ class MiniGraphCard extends LitElement { config.accuracy = Number(config.accuracy) || 10; config.height = Number(config.height) || 100; config.line_color = config.line_color || 'var(--accent-color)'; + config.line_value_above = config.line_value_above || false; + config.line_value_below = config.line_value_below || false; + config.line_color_above = config.line_color_above || config.line_color; + config.line_color_below = config.line_color_below || config.line_color; config.line_width = Number(config.line_width) || 5; config.font_scale = (config.font_size / 100) * FONT_SIZE || FONT_SIZE; @@ -65,16 +69,18 @@ class MiniGraphCard extends LitElement { startTime.setHours(endTime.getHours() - config.hours_to_show); const stateHistory = await this.fetchRecent(config.entity, startTime, endTime); const history = stateHistory[0]; - const values = [history[history.length - 1]]; + const valArray = [history[history.length - 1]]; let pos = history.length - 1; - let increment = Math.ceil(history.length / config.accuracy); + const accuracy = (this.config.accuracy) <= pos ? this.config.accuracy : pos; + let increment = Math.ceil(history.length / accuracy); + if (accuracy === pos) increment = 1; increment = (increment <= 0) ? 1 : increment; - for (let i = config.accuracy; i >= 2; i--) { + for (let i = accuracy; i >= 1; i--) { pos -= increment; - values.unshift(pos >= 0 ? history[pos] : history[0]); + valArray.unshift(pos >= 0 ? history[pos] : history[0]); } - this.line = Graph(values, 500, config.height, config.line_width); + this.line = Graph(valArray, 500, this.config.height, config.line_width); } shouldUpdate(changedProps) { @@ -105,7 +111,7 @@ class MiniGraphCard extends LitElement {
${this.line ? html` - + ` : '' }
@@ -130,6 +136,15 @@ class MiniGraphCard extends LitElement { return e; } + computeColor() { + const state = Number(this.entity.state) || 0; + const above = this.config.line_value_above; + const below = this.config.line_value_below; + if (above && state > above) return this.config.line_color_above + if (below && state < below) return this.config.line_color_below + return this.config.line_color; + } + computeName() { return this.config.name || this.entity.attributes.friendly_name; } @@ -146,12 +161,9 @@ class MiniGraphCard extends LitElement { async fetchRecent(entityId, startTime, endTime) { let url = 'history/period'; - if (startTime) - url += '/' + startTime.toISOString(); - + if (startTime) url += '/' + startTime.toISOString(); url += '?filter_entity_id=' + entityId; - if (endTime) - url += '&end_time=' + endTime.toISOString(); + if (endTime) url += '&end_time=' + endTime.toISOString(); return await this._hass.callApi('GET', url); } diff --git a/tracker.json b/tracker.json index 485d37b..5cc489e 100755 --- a/tracker.json +++ b/tracker.json @@ -1,7 +1,7 @@ { "mini-graph-card": { - "updated_at": "2018-10-06", - "version": "0.0.3", + "updated_at": "2018-10-07", + "version": "0.0.4", "remote_location": "https://raw.githubusercontent.com/kalkih/mini-graph-card/master/mini-graph-card.js", "visit_repo": "https://github.com/kalkih/mini-graph-card", "changelog": "https://github.com/kalkih/mini-graph-card/releases/latest"