Added line color options for above/below specified values

Fix accuracy when set to higher than available data points in history

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,15 +55,15 @@ 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
 ```
 
 If you went the `git clone` route, just run `git pull` from inside your `config/www/mini-graph-card/` directory, to get the latest version of the code. Then add the new version number to the end of the card reference url in your `ui-lovelace.yaml` like below.
 
 ```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
 

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 `<path> attribute d: Expected number` errors.
 - Decreased the default font size slightly #4

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 {
           <div>
             ${this.line ? html`
             <svg width='100%' height='100%' viewBox='0 0 500 ${this.config.height}'>
-              <path d=${this.line} fill='none' stroke=${config.line_color} stroke-width=${config.line_width} />
+              <path d=${this.line} fill='none' stroke=${this.computeColor()} stroke-width=${config.line_width} />
             </svg>` : '' }
           </div>
         </div>
@@ -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);
   }

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"