feat: Initial support for aggregating data

lobodart · Jan 24, 2021 · 13dfd89 · 13dfd89
1 parent 1eccee8
commit 13dfd89
Show file tree

Hide file tree

Showing 11 changed files with 319 additions and 31 deletions.
diff --git a/.devcontainer/ui-lovelace.yaml b/.devcontainer/ui-lovelace.yaml
@@ -66,20 +66,13 @@ views:
         hours_to_show: 200
         series:
           - entity: sensor.humidity
-          # - entity: sensor.random0_100
-          #   type: bar
-            # extend_to_end: true
-      # - type: custom:apexcharts-card
-      #   hours_to_show: 0.25
-      #   series:
-      #     - entity: sensor.non_existent
-      #       # extend_to_end: true
-      # - type: custom:apexcharts-card
-      #   series:
-      #     - entity: sensor.random0_100
-      #       type: bubble
-      #     - entity: sensor.random0_100
-      #       type: bubble
-      #   apex_config:
-      #     chart:
-      #       type: bubble
+
+      - type: custom:apexcharts-card
+        hours_to_show: 24
+        series:
+          - entity: sensor.humidity
+            curve: smooth
+            type: area
+            group_by:
+              duration: 5h
+              func: avg
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,6 +36,8 @@
     "localforage": "^1.9.0",
     "lz-string": "^1.4.4",
     "moment": "^2.29.1",
+    "moment-range": "^4.0.2",
+    "parse-duration": "^0.4.4",
     "ts-interface-checker": "^0.1.13"
   },
   "devDependencies": {

diff --git a/src/apex-layouts.ts b/src/apex-layouts.ts
@@ -1,5 +1,5 @@
 import { HomeAssistant } from 'custom-card-helpers';
-import moment from 'moment';
+import { moment } from './const';
 import { ChartCardConfig } from './types';
 import { computeName, computeUom, mergeDeep } from './utils';
 
@@ -20,9 +20,9 @@ export function getLayoutConfig(config: ChartCardConfig, hass: HomeAssistant | u
     grid: {
       strokeDashArray: 3,
     },
-    series: config?.series.map((serie) => {
+    series: config?.series.map((serie, index) => {
       return {
-        name: serie.name || serie.entity,
+        name: computeName(index, config, hass?.states),
         type: serie.type,
         data: [],
       };
@@ -34,6 +34,9 @@ export function getLayoutConfig(config: ChartCardConfig, hass: HomeAssistant | u
         datetimeUTC: false,
       },
     },
+    yaxis: {
+      decimalsInFloat: 1,
+    },
     tooltip: {
       x: {
         formatter:
@@ -68,7 +71,7 @@ export function getLayoutConfig(config: ChartCardConfig, hass: HomeAssistant | u
       curve: config.series.map((serie) => {
         return serie.curve || 'smooth';
       }),
-      lineCap: 'round',
+      lineCap: 'butt',
     },
     noData: {
       text: 'Loading...',

diff --git a/src/apexcharts-card.ts b/src/apexcharts-card.ts
@@ -13,6 +13,8 @@ import GraphEntry from './graphEntry';
 import { createCheckers } from 'ts-interface-checker';
 import { ChartCardExternalConfig } from './types-config';
 import exportedTypeSuite from './types-config-ti';
+import { DEFAULT_DURATION, DEFAULT_FUNC, DEFAULT_HOURS_TO_SHOW, DEFAULT_SERIE_TYPE } from './const';
+import parse from 'parse-duration';
 
 /* eslint no-console: 0 */
 console.info(
@@ -106,7 +108,7 @@ class ChartsCard extends LitElement {
 
     this._config = mergeDeep(
       {
-        hours_to_show: 24,
+        hours_to_show: DEFAULT_HOURS_TO_SHOW,
         cache: true,
         useCompress: false,
         show: { loading: true },
@@ -118,7 +120,16 @@ class ChartsCard extends LitElement {
     if (this._config) {
       this._graphs = this._config.series.map((serie, index) => {
         serie.extend_to_end = serie.extend_to_end !== undefined ? serie.extend_to_end : true;
-        serie.type = serie.type || 'line';
+        serie.type = serie.type || DEFAULT_SERIE_TYPE;
+        if (!serie.group_by) {
+          serie.group_by = { duration: DEFAULT_DURATION, func: DEFAULT_FUNC };
+        } else {
+          serie.group_by.duration = serie.group_by.duration || DEFAULT_DURATION;
+          serie.group_by.func = serie.group_by.func || DEFAULT_FUNC;
+        }
+        if (!parse(serie.group_by.duration)) {
+          throw `Can't parse 'group_by' duration: '${serie.group_by.duration}'`;
+        }
         if (serie.entity) {
           return new GraphEntry(
             serie.entity,
@@ -127,6 +138,7 @@ class ChartsCard extends LitElement {
             this._config!.hours_to_show,
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             this._config!.cache,
+            serie,
           );
         }
         return undefined;

diff --git a/src/const.ts b/src/const.ts
@@ -1 +1,10 @@
+import Moment from 'moment';
+import { extendMoment } from 'moment-range';
+
+export const moment = extendMoment(Moment);
 export const ONE_HOUR = 1000 * 3600;
+
+export const DEFAULT_HOURS_TO_SHOW = 24;
+export const DEFAULT_SERIE_TYPE = 'line';
+export const DEFAULT_DURATION = '1h';
+export const DEFAULT_FUNC = 'raw';