feat(invert): Negates/Inverts the data for a serie (#13)

Author: RomRider

.devcontainer/ui-lovelace.yaml

@@ -169,6 +169,13 @@ views:
             dropShadow:
               enabled: true
         series:
+          - entity: sensor.random0_100
+            extend_to_end: false
+            type: column
+            invert: true
+            group_by:
+              func: avg
+              fill: 'null'
           - entity: sensor.random0_100
             extend_to_end: false
             type: column

README.md

@@ -116,6 +116,7 @@ The card stricly validates all the options available (but not for the `apex_conf
 | `extend_to_end` | boolean | `true` | v1.0.0 | If the last data is older than the end time displayed on the graph, setting to true will extend the value until the end of the timeline. Only works for `line` and `area` types. |
 | `unit` | string | | v1.0.0 | Override the unit of the sensor |
 | `group_by` | object | | v1.0.0 | See [group_by](#group_by-options) |
+| `invert` | boolean | `false` | NEXT_VERSION | Negates the data (`1` -> `-1`). Usefull to display opposites values like network in (standard)/out (inverted) |
 
 
 ### `show` Options

src/apexcharts-card.ts

@@ -336,13 +336,14 @@ class ChartsCard extends LitElement {
               this._lastState[index] = (this._lastState[index] as number).toFixed(1);
             }
           }
-          return {
-            data:
-              this._config?.series[index].extend_to_end && this._config?.series[index].type !== 'column'
-                ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                  [...graph.history, ...[[end.getTime(), graph.history.slice(-1)[0]![1]]]]
-                : graph.history,
-          };
+          let data: (number | null)[][] = [];
+          if (this._config?.series[index].extend_to_end && this._config?.series[index].type !== 'column') {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            data = [...graph.history, ...[[end.getTime(), graph.history.slice(-1)[0]![1]]]];
+          } else {
+            data = graph.history;
+          }
+          return this._config?.series[index].invert ? { data: this._invertData(data) } : { data };
         }),
         xaxis: {
           min: start.getTime(),
@@ -358,6 +359,13 @@ class ChartsCard extends LitElement {
     this._updating = false;
   }
 
+  private _invertData(data: (number | null)[][]): (number | null)[][] {
+    return data.map((item) => {
+      if (item[1] === null) return item;
+      return [item[0], -item[1]];
+    });
+  }
+
   private _getSpanDates(): { start: Date; end: Date } {
     let end = new Date();
     let start = new Date(end.getTime() - this._graphSpan + 1);

src/types-config-ti.ts

@@ -34,6 +34,7 @@ export const ChartCardSeriesExternalConfig = t.iface([], {
   "curve": t.opt(t.union(t.lit('smooth'), t.lit('straight'), t.lit('stepline'))),
   "extend_to_end": t.opt("boolean"),
   "unit": t.opt("string"),
+  "invert": t.opt("boolean"),
   "group_by": t.opt(t.iface([], {
     "duration": t.opt("string"),
     "func": t.opt("GroupByFunc"),

src/types-config.ts

@@ -28,6 +28,7 @@ export interface ChartCardSeriesExternalConfig {
   curve?: 'smooth' | 'straight' | 'stepline';
   extend_to_end?: boolean;
   unit?: string;
+  invert?: boolean;
   group_by?: {
     duration?: string;
     func?: GroupByFunc;