Fixed issue where unknown/unavailable history would make the graph no…

…t render #6

Added line margins

Made graph line ends rounded

Adjusted line Y-scale

Updated to lit-element 0.6.2

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.4
+  - url: /local/mini-graph-card.js?v=0.0.5
     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.4
+  - url: /local/mini-graph-card/mini-graph-card.js?v=0.0.5
     type: module
 ```
 
@@ -55,15 +55,15 @@ custom_updater:
 
 ```yaml
 resources:
-  - url: /local/mini-graph-card.js?v=0.0.4
+  - url: /local/mini-graph-card.js?v=0.0.5
     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.4
+  - url: /local/mini-graph-card/mini-graph-card.js?v=0.0.5
     type: module
 ```
 

changelog.md

@@ -1,3 +1,10 @@
+## v0.0.5
+- Fixed issue where unknown/unavailable history would make the graph not render #6
+- Fixed issue where graph line would rendering outside svg boundary and get clipped
+- Made graph line ends rounded
+- Adjusted line Y-scale
+- Updated to lit-element 0.6.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

mini-graph-card.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from 'https://unpkg.com/@polymer/lit-element@^0.6.1/lit-element.js?module';
+import { LitElement, html, svg } from 'https://unpkg.com/@polymer/lit-element@^0.6.2/lit-element.js?module';
 import Graph from './mini-graph-lib.js';
 
 const FONT_SIZE = 14;
@@ -42,20 +42,22 @@ class MiniGraphCard extends LitElement {
       throw new Error('Specify an entity from within the sensor domain.');
 
     this.style = 'display: flex;';
-    config.icon = config.icon || false;
-    config.more_info = (config.more_info !== false ? true : false);
-    config.hours_to_show = config.hours_to_show || 24;
-    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;
+    const conf = Object.assign({
+      icon: false,
+      more_info: true,
+      hours_to_show: 24,
+      accuracy: 10,
+      height: 100,
+      line_color: 'var(--accent-color)',
+      line_width: 5,
+      font_size: FONT_SIZE
+    }, config);
+    conf.font_size = (config.font_size / 100) * FONT_SIZE;
+    conf.accuracy = Number(conf.accuracy);
+    conf.height = Number(conf.height);
+    conf.line_width = Number(conf.line_width);
 
-    this.config = config;
+    this.config = conf;
   }
 
   async getHistory({config} = this) {
@@ -89,7 +91,7 @@ class MiniGraphCard extends LitElement {
     return html`
       ${this._style()}
       <ha-card ?group=${config.group} @click='${(e) => this.handleMore()}'
-        ?more-info=${config.more_info} style='font-size: ${config.font_scale}px;'>
+        ?more-info=${config.more_info} style='font-size: ${config.font_size}px;'>
         <div class='flex'>
           <div class='icon'>
             <ha-icon icon=${this.computeIcon(entity)}></ha-icon>
@@ -104,9 +106,10 @@ class MiniGraphCard extends LitElement {
         </div>
         <div class='graph'>
           <div>
-            ${this.line ? html`
-            <svg width='100%' height='100%' viewBox='0 0 500 ${this.config.height}'>
-              <path d=${this.line} fill='none' stroke=${this.computeColor()} stroke-width=${config.line_width} />
+            ${this.line ? svg`
+            <svg width='100%' viewBox='0 0 500 ${this.config.height}'>
+              <path d=${this.line} fill='none' stroke=${this.computeColor()}
+                stroke-width=${config.line_width} stroke-linecap='round' stroke-linejoin='round' />
             </svg>` : '' }
           </div>
         </div>
@@ -240,7 +243,6 @@ class MiniGraphCard extends LitElement {
         #measurement {
           display: inline-block;
           font-size: 1.4em;
-
           font-weight: 400;
           line-height: 1.2em;
           margin-top: .1em;

mini-graph-lib.js

@@ -4,17 +4,16 @@ export default function getGraph(graphData, width, height, line_width) {
   return getPath(coords);
 }
 
-function getValueArray(graphData) {
-  return graphData.map((item) => {
-    return Number(item.state);
-  })
+function getValueArray(items) {
+  return items.map(item => Number(item.state) || 0);
 }
 
 function calcCoordinates(values, width, height, line_width) {
   const margin = line_width;
   width -= margin * 2;
-  const min = Math.floor(Math.min.apply(null, values) * 0.95);
-  const max = Math.ceil(Math.max.apply(null, values) * 1.05);
+  height -= margin * 2;
+  const min = Math.floor(Math.min.apply(null, values) * 0.995);
+  const max = Math.ceil(Math.max.apply(null, values) * 1.005);
 
   const yRatio = (max - min) / height;
   const xRatio = width / (values.length - 1);

tracker.json

@@ -1,7 +1,7 @@
 {
     "mini-graph-card": {
-      "updated_at": "2018-10-07",
-      "version": "0.0.4",
+      "updated_at": "2018-10-10",
+      "version": "0.0.5",
       "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"