fix(log): color_thresholds render incorectly with logaritmic on (#542)

Fixes #531
kalkih · Jan 22, 2022 · b704885 · b704885
1 parent 57219bd
commit b704885
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 4 deletions.
diff --git a/.devcontainer/configuration.yaml b/.devcontainer/configuration.yaml
@@ -34,3 +34,7 @@ sensor:
     name: random_big
     minimum: 12309812
     maximum: 22309812
+  - platform: random
+    name: random_0_1000
+    minimum: 0
+    maximum: 1000
diff --git a/.devcontainer/ui-lovelace.yaml b/.devcontainer/ui-lovelace.yaml
@@ -30,3 +30,26 @@ views:
             aggregate_func: median
           - entity: sensor.random0_100
             name: Random AVG
+      - type: custom:mini-graph-card
+        hours_to_show: 1
+        points_per_hour: 120
+        lower_bound: 0
+        upper_bound: 1000
+        logarithmic: true
+        smoothing: false
+        height: 400
+        show:
+          points: true
+        entities:
+          - entity: sensor.random_0_1000
+            name: log(0 - 1000) Gradients
+            aggregate_func: last
+        color_thresholds:
+          - value: 0
+            color: "#00ff00"
+          - value: 10
+            color: "#ffff00"
+          - value: 100
+            color: "#ff9900"
+          - value: 500
+            color: "#ff0000"
diff --git a/src/graph.js b/src/graph.js
@@ -153,8 +153,10 @@ export default class Graph {
     return path;
   }
 
-  computeGradient(thresholds) {
-    const scale = this._max - this._min;
+  computeGradient(thresholds, logarithmic) {
+    const scale = logarithmic
+      ? Math.log10(Math.max(1, this._max)) - Math.log10(Math.max(1, this._min))
+      : this._max - this._min;
 
     return thresholds.map((stop, index, arr) => {
       let color;
@@ -165,9 +167,19 @@ export default class Graph {
         const factor = (arr[index - 1].value - this._min) / (arr[index - 1].value - stop.value);
         color = interpolateColor(arr[index - 1].color, stop.color, factor);
       }
+      let offset;
+      if (scale <= 0) {
+        offset = 0;
+      } else if (logarithmic) {
+        offset = (Math.log10(Math.max(1, this._max))
+          - Math.log10(Math.max(1, stop.value)))
+          * (100 / scale);
+      } else {
+        offset = (this._max - stop.value) * (100 / scale);
+      }
       return {
         color: color || stop.color,
-        offset: scale <= 0 ? 0 : (this._max - stop.value) * (100 / scale),
+        offset,
       };
     });
   }

diff --git a/src/main.js b/src/main.js
@@ -739,7 +739,9 @@ class MiniGraphCard extends LitElement {
             this.points[i] = this.Graph[i].getPoints();
           }
           if (config.color_thresholds.length > 0 && !config.entities[i].color)
-            this.gradient[i] = this.Graph[i].computeGradient(config.color_thresholds);
+            this.gradient[i] = this.Graph[i].computeGradient(
+              config.color_thresholds, this.config.logarithmic,
+            );
         }
       });
       this.line = [...this.line];