feat: add scale_factor and extend value_factor (next)

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_multiplier | number | 1 | Set a scale factor to use on the graph's value
+| value_factor | number | 0 | (DEPRECATED) 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_multiplier: -2.1
   - sensor.humidity
 ```
 

src/buildConfig.js

@@ -129,6 +129,7 @@ export default (config) => {
     state_map: [],
     cache: true,
     value_factor: 0,
+    value_multiplier: 1,
     tap_action: {
       action: 'more-info',
     },

src/graph.js

@@ -5,7 +5,18 @@ import {
 } from './const';
 
 export default class Graph {
-  constructor(width, height, margin, hours = 24, points = 1, aggregateFuncName = 'avg', groupBy = 'interval', smoothing = true, logarithmic = false) {
+  constructor({
+    width,
+    height,
+    margin,
+    hours = 24,
+    points = 1,
+    aggregateFuncName = 'avg',
+    scaleFactor = 1,
+    groupBy = 'interval',
+    smoothing = true,
+    logarithmic = false,
+  }) {
     const aggregateFuncMap = {
       avg: this._average,
       median: this._median,
@@ -28,6 +39,7 @@ export default class Graph {
     this.points = points;
     this.hours = hours;
     this.aggregateFuncName = aggregateFuncName;
+    this._scaleFactor = scaleFactor;
     this._calcPoint = aggregateFuncMap[aggregateFuncName] || this._average;
     this._smoothing = smoothing;
     this._logarithmic = logarithmic;
@@ -64,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) {
@@ -97,14 +110,19 @@ export default class Graph {
     return coords;
   }
 
+  _scale(value) {
+    return this._scaleFactor * 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

@@ -104,25 +104,27 @@ class MiniGraphCard extends LitElement {
     this.config = buildConfig(config, this.config);
     this._md5Config = SparkMD5.hash(JSON.stringify(this.config));
     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(
-          500,
-          this.config.height,
-          [this.config.show.fill ? 0 : this.config.line_width, this.config.line_width],
-          this.config.hours_to_show,
-          this.config.points_per_hour,
-          entity.aggregate_func || this.config.aggregate_func,
-          this.config.group_by,
-          getFirstDefinedItem(
+        entity => new Graph({
+          width: 500,
+          height: this.config.height,
+          margin: [this.config.show.fill ? 0 : this.config.line_width, this.config.line_width],
+          hours: this.config.hours_to_show,
+          points: this.config.points_per_hour,
+          aggregateFuncName: entity.aggregate_func || this.config.aggregate_func,
+          groupBy: this.config.group_by,
+          smoothing: getFirstDefinedItem(
             entity.smoothing,
             this.config.smoothing,
             !entity.entity.startsWith('binary_sensor.'), // turn off for binary sensor by default
           ),
-          this.config.logarithmic,
-        ),
+          logarithmic: this.config.logarithmic,
+          scaleFactor: (entity.value_multiplier ? entity.value_multiplier : 1)
+            * (entity.value_factor ? 10 ** entity.value_factor : valueFactor),
+        }),
       );
     }
   }
@@ -293,7 +295,7 @@ class MiniGraphCard extends LitElement {
           style=${entityConfig.state_adaptive_color ? `color: ${this.computeColor(state, id)};` : ''}>
           ${entityConfig.show_indicator ? this.renderIndicator(state, id) : ''}
           <span class="state__value ellipsis">
-            ${this.computeState(isPrimary && tooltipValue || state)}
+            ${this.computeState(isPrimary && tooltipValue || state, entityConfig.value_multiplier)}
           </span>
           <span class="state__uom ellipsis">
             ${this.computeUom(isPrimary && entity || id)}
@@ -578,7 +580,7 @@ class MiniGraphCard extends LitElement {
           <div class="info__item">
             <span class="info__item__type">${entry.type}</span>
             <span class="info__item__value">
-              ${this.computeState(entry.state)} ${this.computeUom(0)}
+              ${this.computeState(entry.state, entry.value_multiplier)} ${this.computeUom(0)}
             </span>
             <span class="info__item__time">
               ${entry.type !== 'avg' ? getTime(new Date(entry.last_changed), this.config.format, this._hass.language) : ''}
@@ -680,7 +682,7 @@ class MiniGraphCard extends LitElement {
     );
   }
 
-  computeState(inState) {
+  computeState(inState, default_value_multiplier) {
     if (this.config.state_map.length > 0) {
       const stateMap = Number.isInteger(inState)
         ? this.config.state_map[inState]
@@ -701,14 +703,16 @@ class MiniGraphCard extends LitElement {
     }
     const dec = this.config.decimals;
     const value_factor = 10 ** this.config.value_factor;
+    const value_multiplier = default_value_multiplier || this.config.value_multiplier || 1;
 
     if (dec === undefined || Number.isNaN(dec) || Number.isNaN(state)) {
-      return this.numberFormat(Math.round(state * value_factor * 100) / 100, this._hass.language);
+      return this.numberFormat((Math.round(state * value_factor * value_multiplier * 100) / 100),
+        this._hass.language);
     }
 
     const x = 10 ** dec;
     return this.numberFormat(
-      (Math.round(state * value_factor * x) / x).toFixed(dec),
+      (Math.round(state * value_factor * x * value_multiplier) / x).toFixed(dec),
       this._hass.language, dec,
     );
   }
@@ -941,7 +945,7 @@ class MiniGraphCard extends LitElement {
     if (stateHistory.length === 0) return;
 
     if (this.entity[0] && entity.entity_id === this.entity[0].entity_id) {
-      this.updateExtrema(stateHistory);
+      this.updateExtrema(stateHistory, this.config.entities[index].value_multiplier || 1);
     }
 
     if (this.config.entities[index].fixed_value === true) {
@@ -963,19 +967,22 @@ class MiniGraphCard extends LitElement {
     return this._hass.callApi('GET', url);
   }
 
-  updateExtrema(history) {
+  updateExtrema(history, value_multiplier) {
     const { extrema, average } = this.config.show;
     this.abs = [
       ...(extrema ? [{
         type: 'min',
+        value_multiplier,
         ...getMin(history, 'state'),
       }] : []),
       ...(average ? [{
         type: 'avg',
+        value_multiplier,
         state: getAvg(history, 'state'),
       }] : []),
       ...(extrema ? [{
         type: 'max',
+        value_multiplier,
         ...getMax(history, 'state'),
       }] : []),
     ];