feat: Pass scale factor down to the graph to have correct rendering

Author: X-Ryl669

README.md

@@ -140,13 +140,16 @@ properties of the Entity object detailed in the following table (as per `sensor.
 | y_axis | string |  | If 'secondary', displays using the secondary y-axis on the right.
 | fixed_value | boolean |  | Set to true to graph the entity's current state as a fixed value instead of graphing its state history.
 | smoothing | boolean |  | Override for a flag indicating whether to make graph line smooth.
+| value_multipler | number | 1 | Set a multiplier to use on the graph's value
+| value_factor | number | 0 | Scale value by order of magnitude (e.g. convert Watts to kilo Watts), use negative value to scale down.
 
 ```yaml
 entities:
   - sensor.temperature
   - entity: sensor.pressure
     name: Pressure
     show_state: true
+    value_multipler: -2.1
   - sensor.humidity
 ```
 

src/graph.js

@@ -12,6 +12,7 @@ export default class Graph {
     hours = 24,
     points = 1,
     aggregateFuncName = 'avg',
+    valueMultipler = 1,
     groupBy = 'interval',
     smoothing = true,
     logarithmic = false,
@@ -38,6 +39,7 @@ export default class Graph {
     this.points = points;
     this.hours = hours;
     this.aggregateFuncName = aggregateFuncName;
+    this._valueMultipler = valueMultipler;
     this._calcPoint = aggregateFuncMap[aggregateFuncName] || this._average;
     this._smoothing = smoothing;
     this._logarithmic = logarithmic;
@@ -74,8 +76,9 @@ export default class Graph {
     histGroups.length = requiredNumOfPoints;
 
     this.coords = this._calcPoints(histGroups);
-    this.min = Math.min(...this.coords.map(item => Number(item[V])));
-    this.max = Math.max(...this.coords.map(item => Number(item[V])));
+    this.min = this._scale(Math.min(...this.coords.map(item => Number(item[V]))));
+    this.max = this._scale(Math.max(...this.coords.map(item => Number(item[V]))));
+    if (this.min > this.max) [this.min, this.max] = [this.max, this.min];
   }
 
   _reducer(res, item) {
@@ -107,14 +110,19 @@ export default class Graph {
     return coords;
   }
 
+  _scale(value) {
+    return this._valueMultipler * value;
+  }
+
   _calcY(coords) {
     // account for logarithmic graph
     const max = this._logarithmic ? Math.log10(Math.max(1, this.max)) : this.max;
     const min = this._logarithmic ? Math.log10(Math.max(1, this.min)) : this.min;
 
     const yRatio = ((max - min) / this.height) || 1;
     const coords2 = coords.map((coord) => {
-      const val = this._logarithmic ? Math.log10(Math.max(1, coord[V])) : coord[V];
+      const val = this._logarithmic
+        ? Math.log10(Math.max(1, this._scale(coord[V]))) : this._scale(coord[V]);
       const coordY = this.height - ((val - min) / yRatio) + this.margin[Y] * 2;
       return [coord[X], coordY, coord[V]];
     });

src/main.js

@@ -106,6 +106,7 @@ class MiniGraphCard extends LitElement {
     const entitiesChanged = !compareArray(this.config.entities || [], config.entities);
     if (!this.Graph || entitiesChanged) {
       if (this._hass) this.hass = this._hass;
+      const valueFactor = 10 ** this.config.value_factor;
       this.Graph = this.config.entities.map(
         entity => new Graph({
           width: 500,
@@ -121,6 +122,8 @@ class MiniGraphCard extends LitElement {
             !entity.entity.startsWith('binary_sensor.'), // turn off for binary sensor by default
           ),
           logarithmic: this.config.logarithmic,
+          valueMultipler: (entity.value_multipler ? entity.value_multipler : 1)
+            * (entity.value_factor ? 10 ** entity.value_factor : valueFactor),
         }),
       );
     }