Revize 8cca41c0

Re #8775 - Agregovat grafy se stejným typem sensoru

• graph loading decomposition
• some bugs fixed

src/app/sensor/components/sensor.component.ts

@@ -88 +88 @@
     ).subscribe(
       observations => {
         if (observations) {
-          GraphLoader.getGraph(this.sensorId, observations[this.sensorId].data, observations[this.sensorId].interval, '#view');
+        //  GraphLoader.getGraph(this.sensorId, observations[this.sensorId].data, observations[this.sensorId].interval, '#view');
+          GraphLoader.getGraph(this.sensorId, observations[this.sensorId].data, '#view', true);
         } else {
-          GraphLoader.getGraph(null, null, null, null);
+          GraphLoader.getGraph(null, null, '#view', null);
         }
       }, err => this.toastService.showError(err.error.message));
   }
@@ -115 +116 @@
     ).subscribe(
       observations => {
         if (observations) {
-          GraphLoader.getObservationGraph(this.sensorId, observations, '#view');
+         // GraphLoader.getObservationGraph(this.sensorId, observations, '#view');
+          GraphLoader.getGraph(this.sensorId, observations[this.sensorId].data, '#view', false);
         } else {
-          GraphLoader.getObservationGraph(null, null, null);
+         // GraphLoader.getObservationGraph(null, null, null);
+          GraphLoader.getGraph(null, null, '#view', null);
         }
       }, err => this.toastService.showError(err.error.message));
   }

src/app/shared/graph-loading/emptygraph.ts

@@ +1 @@
+import {Graph} from "./graph";
+
+declare var require: any
+
+export class EmptyGraph implements Graph{
+
+  message: string;
+
+  constructor(message) {
+    this.message = message;
+  }
+
+
+  getConfig(): {} {
+    return require('/src/vega/config/config.json');
+  }
+
+  getSpec(): {} {
+    const lodash = require('lodash/object');
+    const rvalue: any = {};
+    let base = require('/src/vega/base/empty.json');
+    lodash.merge(rvalue, base);
+    rvalue.signals[0].value = this.message;
+    return rvalue;
+  }
+
+}

src/app/shared/graph-loading/graph.ts

@@ +1 @@
+export interface Graph {
+  getSpec(): {},
+  getConfig(): {}
+}

src/app/shared/graph-loading/graphcollection.ts

@@ -1 @@
-declare var require: any
-
-export class GraphCollection {
-
-  array;
-
-
-  constructor() {
-    this.array = [];
-  }
-
-  addGraph(sensorId, data) {
-    let element : any = {};
-    element.sensor = sensorId;
-    element.data = data;
-    this.array.push(element);
-  }
-
-  getObject() {
-    return this.array();
-  }
-
-}

src/app/shared/graph-loading/graphloader.ts

@@ -1 @@
-declare var require: any
+import {Graph} from './graph';
+import {EmptyGraph} from "./emptygraph";
+import {SingleGraph} from "./singlegraph";
+import {MultiGraph} from "./multigraph";
 
-export class GraphLoader {
+declare var require: any
 
 
-  static getGraphType(sensorId) {
-    const lodash = require('lodash/object');
 
-    if (sensorId >= 480000000 && sensorId < 490000000) {
+export class GraphLoader {
 
-      const rvalue: any = {};
-      const base = require('/src/vega/base/default.json');
-      const chart = require('/src/vega/body/barchart.json');
-      const tooltip = require('/src/vega/tooltip/samm-tooltip.json')
-      lodash.merge(rvalue, base, chart, tooltip);
-      return rvalue;
 
-    } else if ((sensorId >= 470020000 && sensorId < 470030000) || (sensorId >= 470060000 && sensorId < 470090000) ||
-      (sensorId >= 470130000 && sensorId < 470140000) || (sensorId >= 470180000 && sensorId < 470190000)) {
+  static getGraphType(sensors, data, isAnalytics): Graph {
+    if (sensors == null) {
+      return new EmptyGraph("Selected no sensors.");
 
-      const rvalue: any = {};
-      const base = require('/src/vega/base/default.json');
-      const chart = require('/src/vega/body/windchart.json');
-      const tooltip = require('/src/vega/tooltip/samm-tooltip.json')
-      lodash.merge(rvalue, base, chart, tooltip);
-      return rvalue;
+    } else if (Array.isArray(sensors)) {
+      if (sensors.length == 0) {
+        return new EmptyGraph("Selected no sensors.");
+      } else if (sensors.length == 1) {
+        return new SingleGraph(sensors[0], isAnalytics, data, 10000);
+      } else {
+        return new MultiGraph(isAnalytics, data, 10000);
+      }
 
     } else {
-
-      const rvalue: any = {};
-      const base = require('/src/vega/base/default.json');
-      const chart = require('/src/vega/body/linechart.json');
-      const tooltip = require('/src/vega/tooltip/samm-tooltip.json')
-      lodash.merge(rvalue, base, chart, tooltip);
-      return rvalue;
-
+      return new SingleGraph(sensors, isAnalytics, data, 10000);
     }
   }
 
-  static getObservationSpec(sensorId) {
-    const lodash = require('lodash/object');
-
-    const rvalue: any = {};
-    const base = require('/src/vega/base/default.json');
-    const chart = require('/src/vega/body/linechart-observations.json');
-    const tooltip = require('/src/vega/tooltip/value-tooltip.json')
-    lodash.merge(rvalue, base, chart, tooltip);
-    return rvalue;
-
-  }
-
-  static getGraph(sensorId, data, interval, element) {
-    const spec = this.getGraphType(sensorId);
-    const config = require('/src/vega/config/config-analytics.json');
-
-    spec.data[0].values = data;
-    spec.signals[0].value = interval;
-
-
-    this.showGraph(spec, config, element);
-
-
-
-  }
-
-  static getObservationGraph(sensorId, data, element) {
 
-    const spec = this.getObservationSpec(sensorId);
-    const config = require('/src/vega/config/config-observations.json');
-
-    spec.data[0].values = data;
-    spec.signals[0].value = 3600;
-
-
-    this.showGraph(spec, config, element);
-
-
-  }
-
-  static getMultilineGraph(sensors, data, element) {
-    let spec = this.getMultilineSpec(sensors);
-
-    const config = require('/src/vega/config/config-multiline.json');
-
-    spec.data[0].values = data;
-    spec.signals[0].value = 3600;
+  static getGraph(sensors, data, element, isAnalytics) {
+    let graph = this.getGraphType(sensors,data, isAnalytics);
+    let config = graph.getConfig();
+    let spec = graph.getSpec();
+    spec['data'][0].values = data;
 
     this.showGraph(spec, config, element);
-  }
-
-  static getMultilineSpec(sensors) {
-    const lodash = require('lodash/object');
-
-    const rvalue: any = {};
-    const base = require('/src/vega/base/default.json');
-    const chart = require('/src/vega/body/multilinechart.json');
-    const tooltip = require('/src/vega/tooltip/multiline-tooltip.json')
-    lodash.merge(rvalue, base, chart, tooltip);
-    rvalue.marks[0].marks[0].marks[0].marks[2].encode.enter.tooltip.signal = this.getTooltipMessage(sensors);
-    return rvalue;
-  }
-
-  static getTooltipMessage(sensors) {
-    let message = "{title: timeFormat(datum.dateTime, '%A, %e. %B %Y, %X'), ";
-
-    for(const key of sensors) {
-      message += ("'" + key + "': datum['" + key + "'], ");
-    }
-
-    message += "}";
-
-    return message;
 
   }
 

src/app/shared/graph-loading/multigraph.ts

@@ +1 @@
+import {Graph} from "./graph";
+
+declare var require: any
+
+export class MultiGraph implements Graph{
+
+  isAnalytics: boolean;
+  data: any [];
+  interval: number;
+
+  constructor(isAnalytics: boolean, data: any [], interval: number) {
+    this.isAnalytics = isAnalytics;
+    this.data = data;
+    this.interval = interval;
+
+  }
+
+
+  getConfig(): {} {
+    const lodash = require('lodash/object');
+    const rvalue: any = {};
+    let config1 = require('/src/vega/config/config.json');
+    lodash.merge(rvalue, config1);
+    let config2 = require('/src/vega/config/config-multiline.json');
+
+
+    for(let key in config2.signals) {
+      let obj = config2.signals[key];
+      rvalue.signals.push(obj);
+    }
+
+    return config1;
+  }
+
+  getSpec(): {} {
+    const lodash = require('lodash/object');
+    const rvalue: any = {};
+    const base = require('/src/vega/base/default.json');
+    const body = require('/src/vega/body/multilinechart.json');
+    const tooltip = require('/src/vega/tooltip/multiline-tooltip.json');
+
+    lodash.merge(rvalue, base, body, tooltip);
+
+    rvalue.data[0].values = this.data;
+    rvalue.signals[0].value = this.interval;
+    rvalue.marks[0].marks[0].marks[0].marks[2].encode.enter.tooltip.signal = this.getTooltipMessage();
+
+    return rvalue;
+  }
+
+  private getTooltipMessage() {
+    let message = "{title: timeFormat(datum.dateTime, '%A, %e. %B %Y, %X')";
+    this.data.forEach(function (e) {
+      message += (", '" + e.sensor.sensorName + "': datum['" + e.sensor.sensorName + "'] + ' " + e.sensor.phenomenon.unit +"' ");
+    })
+
+    message += "}";
+    return message;
+  }
+
+}

src/app/shared/graph-loading/singlegraph.ts

@@ +1 @@
+import {Graph} from "./graph";
+
+declare var require: any
+
+export class SingleGraph implements Graph{
+  isAnalytics: boolean;
+  sensorId: number;
+  interval: number;
+  data: any [];
+
+  constructor(sensorId: number, isAnalytics: boolean, data: any[], interval: number) {
+    this.sensorId = sensorId;
+    this.isAnalytics = isAnalytics;
+    this.interval = interval;
+    this.data = data;
+  }
+
+  getConfig(): {} {
+    const lodash = require('lodash/object');
+    const rvalue: any = {};
+    let config1 = require('/src/vega/config/config.json');
+    lodash.merge(rvalue, config1);
+    let config2;
+    if(this.isAnalytics) {
+      config2 = require('/src/vega/config/config-analytics.json');
+    } else {
+      config2 = require('/src/vega/config/config-observations.json');
+    }
+
+    for(let key in config2.signals) {
+      let obj = config2.signals[key];
+      rvalue.signals.push(obj);
+    }
+
+    return config1;
+  }
+
+  getSpec(): {} {
+    const lodash = require('lodash/object');
+    const rvalue: any = {};
+    const base = require('/src/vega/base/default.json');
+    const body = this.getBodySpec();
+    const tooltip = this.getTooltipSpec();
+    lodash.merge(rvalue, base, body, tooltip);
+
+
+    rvalue.data[0].values = this.data;
+    rvalue.signals[0].value = this.interval;
+
+    return rvalue;
+  }
+
+
+ private getBodySpec() {
+    if (this.sensorId >= 480000000 && this.sensorId < 490000000) {
+      return require('/src/vega/body/barchart.json');
+    } else if ((this.sensorId >= 470020000 && this.sensorId < 470030000) || (this.sensorId >= 470060000 && this.sensorId < 470090000) ||
+      (this.sensorId >= 470130000 && this.sensorId < 470140000) || (this.sensorId >= 470180000 && this.sensorId < 470190000)) {
+      return require('/src/vega/body/windchart.json');
+    } else {
+      //TODO pridat min/max
+      return require('/src/vega/body/linechart.json');
+    }
+  }
+
+
+  private getTooltipSpec() {
+      if(this.isAnalytics) {
+        return require('/src/vega/tooltip/samm-tooltip.json');
+      } else {
+        return require('/src/vega/tooltip/value-tooltip.json');
+      }
+    }
+
+}

src/app/unit/components/unit.component.ts

@@ -64 +64 @@
             if (!this.sensorGroups.some(group => group === sensorType)) {
               this.sensorGroups.push(sensorType);
               setTimeout(() => {
-                GraphLoader.getGraph(null, null, null, '#vega_container_' + sensor.sensorId.toString().slice(0, 5));
+                //GraphLoader.getAnalyticsGraph(null, null, null, '#vega_container_' + sensor.sensorId.toString().slice(0, 5));
+                GraphLoader.getGraph(null, null, '#vega_container_' + sensor.sensorId.toString().slice(0, 5),null );
               }, 0);
             }
           });
@@ -109 +110 @@
             if (response.status === 200) {
               return response.body;
             } else if (response.status === 204) {
-              GraphLoader.getGraph(null, null, null, '#vega_container_' + selectSens.toString().slice(0, 5));
+              //GraphLoader.getAnalyticsGraph(null, null, null, '#vega_container_' + selectSens.toString().slice(0, 5));
+              GraphLoader.getGraph(null, null, '#vega_container_' + selectSens.toString().slice(0, 5),null );
               this.toastService.showWarningNoData();
               return response.body;
             } else {
@@ -124 +126 @@
               if (data[key].data) {
                 const view = '#vega_container_' + key.slice(0, 5);
                 if (this.selectedSensors.some(sens => sens.toString() === key)) {
-                  GraphLoader.getGraph(key, data[key].data, data[key].interval, view);
+                  //GraphLoader.getAnalyticsGraph(key, data[key].data, data[key].interval, view);
+                  //GraphLoader.getGraph(this.selectedSensors, this.filteredAnalyticsData(groupId), view, true);
                 } else {
-                  GraphLoader.getGraph(null, null, null, view);
+                  GraphLoader.getGraph(null, null, view, null);
                 }
               }
             }
@@ -155 +158 @@
             if (data[key].data) {
               const view = '#vega_container_' + key.slice(0, 5);
               if (this.selectedSensors.some(sens => sens.toString() === key)) {
-                GraphLoader.getGraph(key, data[key].data, data[key].interval, view);
+               // GraphLoader.getAnalyticsGraph(key, data[key].data, data[key].interval, view);
+                GraphLoader.getGraph(this.selectedSensors, this.analyticsData, view, true);
               } else {
-                GraphLoader.getGraph(null, null, null, view);
+                //GraphLoader.getAnalyticsGraph(null, null, null, view);
+                GraphLoader.getGraph(null, null, view, null);
               }
             }
           }
@@ -175 +180 @@
     const groupId = sensorId.toString().slice(0, 5);
     const sensorGroupElement = '#vega_container_' + groupId;
     if (!this.selectedSensors.find(sensId => sensId.toString().slice(0, 5) === groupId)) { // if group of sensors is empty show empty graph
-      GraphLoader.getGraph(null, null, null, sensorGroupElement);
+      //GraphLoader.getAnalyticsGraph(null, null, null, sensorGroupElement);
+      GraphLoader.getGraph(null, null, sensorGroupElement, null);
     } else {
       if (this.useAnalyticsData) { // use analytics data
         if (event.checked) { // if checked > add to graph
           if (this.analyticsData.some(sens => sens.sensorId === sensorId)) { // if already data for selected sensor in memory
-            GraphLoader.getGraph(sensorId, this.analyticsData.find(sens => sens.sensorId === sensorId).data,
-              this.analyticsData.find(sens => sens.sensorId === sensorId).interval, sensorGroupElement);
+            //GraphLoader.getAnalyticsGraph(sensorId, this.analyticsData.find(sens => sens.sensorId === sensorId).data,
+            // this.analyticsData.find((sens => sens.sensorId === sensorId).interval, sensorGroupElement);
+            GraphLoader.getGraph(this.selectedSensors, this.analyticsData, sensorGroupElement, true);
+
           } else { // get data from server for added sensor and show graph for selected sensors
             this.showGraph(false, sensorId);
           }
         } else { // remove sensor from graph
-          GraphLoader.getGraph(sensorId, this.analyticsData.find(sens => sens.sensorId === sensorId).data,
-            this.analyticsData.find(sens => sens.sensorId === sensorId).interval, sensorGroupElement);
+          //GraphLoader.getAnalyticsGraph(sensorId, this.analyticsData.find(sens => sens.sensorId === sensorId).data,
+          // this.analyticsData.find(sens => sens.sensorId === sensorId).interval, sensorGroupElement);
+          GraphLoader.getGraph(this.selectedSensors, this.analyticsData, sensorGroupElement, true);
+
         }
       } else { // use observations data
         if (event.checked) { // if checked > add to graph
           if (this.observationsData.some(sens => sens.sensorId.toString() === sensorId)) { // if already data for selected sensor in memory
-            GraphLoader.getMultilineGraph(this.selectedSensors, this.filteredObservationData(groupId), sensorGroupElement)
+            GraphLoader.getGraph(this.selectedSensors, this.filteredObservationData(groupId), sensorGroupElement, false);
+            //GraphLoader.getMultilineGraph(this.selectedSensors, this.filteredObservationData(groupId), sensorGroupElement)
           } else { // get data from server for added sensor and show graph for selected sensors
             this.showGraph(false, sensorId);
           }
         } else { // remove sensor from graph
-          GraphLoader.getMultilineGraph(this.selectedSensors, this.filteredObservationData(groupId), sensorGroupElement)
+          //GraphLoader.getMultilineGraph(this.selectedSensors, this.filteredObservationData(groupId), sensorGroupElement)
+          GraphLoader.getGraph(this.selectedSensors, this.filteredObservationData(groupId), sensorGroupElement, false);
         }
       }
     }
@@ -215 +227 @@
   /**
    * Filter analytics data only fro selected sensors.
    */
-  filteredAnalyticsData(): any {
-    return this.analyticsData.filter(sen => this.selectedSensors.includes(sen.sensorId.toString()));
+  filteredAnalyticsData(sensorGroupId: string): any {
+    return this.analyticsData.filter(sen => this.selectedSensors.includes(sen.sensorId.toString()) &&
+      sen.sensorId.toString().slice(0, 5) === sensorGroupId);
   }
 
   private getObservations(range: Date[], changedDate: boolean, changedSensorId: string) {
@@ -250 +263 @@
               const view = '#vega_container_' + selectSens.toString().slice(0, 5);
               setTimeout(() => {
                 console.log(this.selectedSensors);
-                GraphLoader.getMultilineGraph(this.selectedSensors, this.filteredObservationData(selectSens.toString().slice(0, 5)), view);
+                //GraphLoader.getMultilineGraph(this.selectedSensors, this.filteredObservationData(selectSens.toString().slice(0, 5)), view);
+                GraphLoader.getGraph(this.selectedSensors,  this.filteredObservationData(changedSensorId.toString().slice(0, 5)), view, false);
               }, 10);
             }
           })
@@ -280 +294 @@
           const view = '#vega_container_' + changedSensorId.toString().slice(0, 5);
           if (observations) {
             console.log(this.observationsData);
-            GraphLoader.getMultilineGraph(this.selectedSensors, this.filteredObservationData(changedSensorId.toString().slice(0, 5)), view);
+            GraphLoader.getGraph(this.selectedSensors,  this.filteredObservationData(changedSensorId.toString().slice(0, 5)), view, false);
+            //GraphLoader.getMultilineGraph(this.selectedSensors, this.filteredObservationData(changedSensorId.toString().slice(0, 5)), view);
           } else {
-            GraphLoader.getMultilineGraph(null, null, null);
+            //GraphLoader.getMultilineGraph(null, null, null);
+            GraphLoader.getGraph(this.selectedSensors,  this.filteredObservationData(changedSensorId.toString().slice(0, 5)), view, false);
           }
         }, err => this.toastService.showError(err.error.message));
     }

src/vega/base/empty.json

@@ +1 @@
+{
+
+  "data":[
+    {
+      "name": "source",
+      "values": null
+    }
+  ],
+
+  "signals": [
+    {
+      "name": "text",
+      "value": "Sample text."
+    }
+  ],
+
+  "scales": [
+    {
+      "name": "xscale",
+      "domain": [0,0],
+      "range": "width"
+    },
+    {
+      "name": "yscale",
+      "domain": [0,0],
+      "range": "height"
+    }
+  ],
+
+  "axes":[
+    {
+      "orient": "bottom",
+      "scale": "xscale"
+    },
+    {
+      "orient": "left",
+      "scale": "yscale"
+    }
+  ],
+
+  "marks": [
+
+
+    {
+      "type": "text",
+      "align": "center",
+      "baseline": "middle",
+      "encode": {
+        "enter": {
+          "text": {"signal": "text"},
+          "x": {"scale": "xscale", "value": 0},
+          "y": {"scale": "yscale", "value": 0},
+          "align": {"value": "center"},
+          "baseline": {"value": "middle"}
+        }
+      }
+    }
+  ]
+}

src/vega/body/linechart-observations.json

@@ -1 @@
-{
-  "data": [
-    {},
-    {},
-    {},
-    {},
-    {
-      "name": "ranks",
-      "source": "table",
-      "transform": [
-        {
-          "type": "window",
-          "sort": {
-            "field": "dateTime",
-            "order": "ascending"
-          },
-          "ops": [
-            "rank"
-          ],
-          "fields": [
-            "value"
-          ],
-          "as": [
-            "rank"
-          ]
-        },
-        {
-          "type": "formula",
-          "expr": "datum.rank + 1",
-          "as": "nextRank"
-        }
-      ]
-    },
-    {
-      "name": "lookup",
-      "source": "ranks",
-      "transform": [
-        {
-          "type": "lookup",
-          "from": "ranks",
-          "key": "rank",
-          "fields": [
-            "nextRank"
-          ],
-          "as": [
-            "tempObj"
-          ]
-        },
-        {
-          "type": "formula",
-          "expr": "(datum.tempObj == null || datum.tempObj.dateTime - datum.dateTime > maxTimeDifference) ? null : datum.tempObj",
-          "as": "obj"
-        }
-      ]
-    }
-  ],
-  "marks": [
-    {
-      "scales": [
-        {},
-        {
-          "name": "yDetail",
-          "type": "linear",
-          "range": [390, 0],
-          "domain": {
-            "fields": [
-              {"data": "range", "field": "valueMax"},
-              {"data":  "table", "field": "value"}
-            ]
-          },
-          "nice": true, "zero": true
-        }
-      ],
-      "axes": [
-        {},
-        {"orient": "left", "scale": "yDetail"}
-      ],
-      "marks": [
-        {
-          "marks": [
-            {
-              "type": "symbol",
-              "from": {"data":"lookup"},
-              "encode": {
-                "enter": {
-                  "tooltip": {
-                    "signal": "{title: timeFormat(datum.dateTime, '%A, %e. %B %Y, %X') }"
-                  }},
-                "update": {
-                  "shape": {"value": "circle"},
-                  "size": {"value": 30},
-                  "x": {"scale": "xDetail", "field": "dateTime"},
-                  "y": {"scale": "yDetail", "field": "value"},
-                  "color": {"value": "both"},
-                  "strokeWidth": {"value": 4},
-                  "fill": {"value": "steelblue"}
-                },
-                "hover": {
-                  "fill": {"value": "red"},
-                  "size": {"value": 60}
-                }
-              }
-            },
-            {
-              "type": "rule",
-              "from": {
-                "data": "lookup"
-              },
-              "encode": {
-                "update": {
-                  "x": {
-                    "scale": "xDetail",
-                    "field": "dateTime"
-                  },
-                  "x2": [
-                    {
-                      "test": "isValid(datum.obj)",
-                      "scale": "xDetail",
-                      "field": "obj.dateTime"
-                    },
-                    {
-                      "scale": "xDetail",
-                      "field": "dateTime"
-                    }
-                  ],
-                  "y": {
-                    "scale": "yDetail",
-                    "field": "value"
-                  },
-                  "y2": [
-                    {
-                      "test": "isValid(datum.obj)",
-                      "scale": "yDetail",
-                      "field": "obj.value"
-                    },
-                    {
-                      "scale": "yDetail",
-                      "field": "value"
-                    }
-                  ],
-                  "stroke": {
-                    "value": "steelblue"
-                  },
-                  "strokeWidth": {
-                    "value": 1
-                  }
-                }
-              }
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "signals": [
-        {
-          "value": 0,
-          "on": [
-            {},
-            {
-              "events": "@overview:mousedown",
-              "update": "[x(), x()]"
-            },
-            {
-              "events": "[@overview:mousedown, window:mouseup] > window:mousemove!",
-              "update": "[brush[0], clamp(x(), 0, width)]"
-            }
-          ]
-        }
-      ],
-      "marks": [
-        {},
-        {},
-        {},
-        {
-          "type": "symbol",
-          "from": {"data":"table"},
-          "encode": {
-            "update": {
-              "shape": {"value": "circle"},
-              "size": {"value": 10},
-              "x": {"scale": "xOverview", "field": "dateTime"},
-              "y": {"scale": "yOverview", "field": "value"},
-              "color": {"value": "both"},
-              "strokeWidth": {"value": 4}
-            }
-          }
-        },
-        {
-          "type": "rule",
-          "from": {
-            "data": "lookup"
-          },
-          "encode": {
-            "update": {
-              "x": {
-                "scale": "xOverview",
-                "field": "dateTime"
-              },
-              "x2": [
-                {
-                  "test": "isValid(datum.obj)",
-                  "scale": "xOverview",
-                  "field": "obj.dateTime"
-                },
-                {
-                  "scale": "xOverview",
-                  "field": "dateTime"
-                }
-              ],
-              "y": {
-                "scale": "yOverview",
-                "field": "value"
-              },
-              "y2": [
-                {
-                  "test": "isValid(datum.obj)",
-                  "scale": "yOverview",
-                  "field": "obj.value"
-                },
-                {
-                  "scale": "yOverview",
-                  "field": "value"
-                }
-              ],
-              "stroke": {
-                "value": "steelblue"
-              },
-              "strokeWidth": {
-                "value": 1
-              }
-            }
-          }
-        }
-      ]
-    }
-  ]
-}

src/vega/body/linechart.json

@@ -5 +5 @@
     {},
     {},
     {
-      "name": "timeunit",
+      "name": "ranks",
       "source": "table",
       "transform": [
         {
-          "type": "timeunit",
-          "field": "dateTime",
-          "units": ["year","month", "date", "hours", "minutes", "seconds"],
-          "step": {"signal": "timeStep"}
+          "type": "window",
+          "sort": {
+            "field": "dateTime",
+            "order": "ascending"
+          },
+          "ops": [
+            "rank"
+          ],
+          "fields": [
+            "value"
+          ],
+          "as": [
+            "rank"
+          ]
+        },
+        {
+          "type": "formula",
+          "expr": "datum.rank + 1",
+          "as": "nextRank"
         }
       ]
     },
     {
       "name": "lookup",
-      "source": "timeunit",
-      "transform":[
+      "source": "ranks",
+      "transform": [
         {
           "type": "lookup",
-          "from": "timeunit",
-          "key": "unit0",
-          "fields": ["unit1"],
-          "as": ["obj"]
+          "from": "table",
+          "key": "rank",
+          "fields": [
+            "nextRank"
+          ],
+          "as": [
+            "nextObj"
+          ]
+        },
+        {
+          "type": "lookup",
+          "from": "table",
+          "key": "rank",
+          "fields": [
+            "prevRank"
+          ],
+          "as": [
+            "prevObj"
+          ]
+        },
+        {
+          "type": "formula",
+          "expr": "(datum.nextObj == null || datum.nextObj.dateTime - datum.dateTime > maxTimeDifference) ? null : datum.nextObj",
+          "as": "obj"
+        },
+        {
+          "type": "formula",
+          "expr": "datum.prevObj == null ?  data('range')[0].dateMin : (time(datum.prevObj.dateTime) + time(datum.dateTime)) / 2",
+          "as": "dateStart"
+        },
+        {
+          "type": "formula",
+          "expr": "datum.nextObj == null ?  data('range')[0].dateMax : (time(datum.nextObj.dateTime) + time(datum.dateTime)) / 2",
+          "as": "dateEnd"
         }
       ]
     }
   ],
+
+  "signals": [
+    {},
+    {},
+    {
+      "name": "tooltipSignal",
+      "value": {},
+      "on": [
+        {
+          "events": "@tooltip-hitarea:mouseover",
+          "update": "datum"
+        },
+        {
+          "events": "@tooltip-hitarea:mouseout",
+          "update": "{}"
+        }
+      ]
+    }
+  ],
+
   "marks": [
     {
       "scales": [
@@ -38 +103 @@
           "name": "yDetail",
           "type": "linear",
           "range": [390, 0],
-          "domain": {"data": "range", "field": "valueMax"},
+          "domain": {
+            "fields": [
+              {"data": "range", "field": "valueMax"},
+              {"data":  "table", "field": "value"}
+            ]
+          },
           "nice": true, "zero": true
         }
       ],
@@ -49 +119 @@
       "marks": [
         {
           "marks": [
+            {
+              "name": "tooltip-hitarea",
+              "type": "rect",
+              "interactive": true,
+              "from": {
+                "data": "lookup"
+              },
+              "encode": {
+                "enter": {
+                  "tooltip": {
+                    "signal": null
+                  }
+                },
+                "update": {
+                  "x": {
+                    "scale": "xDetail",
+                    "field": "dateStart"
+                  },
+                  "x2": {
+                    "scale": "xDetail",
+                    "field": "dateEnd"
+                  },
+                  "y": {
+                    "scale": "yDetail",
+                    "band": 1
+                  },
+                  "y2": {
+                    "scale": "yDetail",
+                    "value": 0
+                  },
+                  "fill": {
+                    "value": "#00ff00"
+                  },
+                  "fillOpacity": {
+                    "value": 0.0
+                  }
+                }
+              }
+            },
             {
               "type": "symbol",
-              "from": {"data":"table"},
+              "from": {"data":"lookup"},
               "encode": {
                 "enter": {
                   "tooltip": {
@@ -65 +174 @@
                   "color": {"value": "both"},
                   "strokeWidth": {"value": 4},
                   "fill": {"value": "steelblue"}
-                },
-                "hover": {
-                  "fill": {"value": "red"},
-                  "size": {"value": 60}
                 }
               }
             },
@@ -81 +186 @@
                 "update": {
                   "x": {
                     "scale": "xDetail",
-                    "field": "unit0"
+                    "field": "dateTime"
                   },
                   "x2": [
                     {
                       "test": "isValid(datum.obj)",
                       "scale": "xDetail",
-                      "field": "obj.unit0"
+                      "field": "obj.dateTime"
                     },
                     {
                       "scale": "xDetail",
-                      "field": "unit0"
+                      "field": "dateTime"
                     }
                   ],
                   "y": {
@@ -117 +222 @@
                   }
                 }
               }
+            },
+
+            {
+              "type": "rule",
+              "interactive": false,
+              "zindex": 20,
+              "encode": {
+                "enter": {
+                },
+                "update": {
+                  "x": {
+                    "scale": "xDetail",
+                    "signal": "tooltipSignal.dateTime"
+                  },
+                  "y": {
+                    "scale": "yDetail",
+                    "band": 1
+                  },
+                  "y2": {
+                    "scale": "yDetail",
+                    "value": 0
+                  },
+                  "strokeOpacity": [
+                    {
+                      "test": "tooltipSignal.dateTime > 1",
+                      "value": 1
+                    },
+                    {
+                      "value": 0
+                    }
+                  ]
+                }
+              }
             }
           ]
         }
@@ -166 +304 @@
             "update": {
               "x": {
                 "scale": "xOverview",
-                "field": "unit0"
+                "field": "dateTime"
               },
               "x2": [
                 {
                   "test": "isValid(datum.obj)",
                   "scale": "xOverview",
-                  "field": "obj.unit0"
+                  "field": "obj.dateTime"
                 },
                 {
                   "scale": "xOverview",
-                  "field": "unit0"
+                  "field": "dateTime"
                 }
               ],
               "y": {

src/vega/body/multilinechart.json

@@ -26 +26 @@
             },
             {
               "signal": "sensorPath"
+            },
+            {
+              "signal": "axeLegendPath"
+            },
+            {
+              "signal": "axeLegendUnit"
             }
           ],
           "as": [
             "value",
             "timestamp",
-            "sensor"
+            "sensor",
+            "axeLegend",
+            "axeUnit"
           ]
         }
       ]
@@ -261 +269 @@
         {},
         {
           "orient": "left",
-          "scale": "yDetail"
+          "scale": "yDetail",
+          "grid": true,
+          "title": {"signal":  "data('table')[0].axeLegend"},
+          "encode": {
+          "labels": {
+            "update": {
+              "text":  {"signal": "datum.value + ' ' + data('table')[0].axeUnit"}
+            }
+          }
+        }
         }
       ],
       "marks": [
@@ -368 +385 @@
                   "encode": {
                     "enter": {
                       "tooltip": {
-                        "signal": "{title: timeFormat(datum.dateTime, '%A, %e. %B %Y, %X')  ,  '123': datum['123'], '456': datum['456'], '789': datum['789'] }"
+                        "signal": null
                       }
                     },
                     "update": {

src/vega/config/config-analytics.json

@@ -1 +1 @@
 {
-  "$schema": "https://vega.github.io/schema/vega/v5.json",
-  "width": 800,
-  "height": 200,
-  "padding": 5,
   "signals": [
     {"name": "valuePath", "value": "avg"},
-    {"name":  "timestampPath", "value":  "timestamp"},
-    {"name":  "detailHeight", "value": 390},
-    {"name": "overviewHeight", "value":  70},
-    {"name":  "overviewHeightStart", "value" : 430},
-    {"name":  "maxTimeDifference", "value": 10000000}
-  ]
+    {"name":  "timestampPath", "value":  "timestamp"}
+    ]
 }

src/vega/config/config-multiline.json

@@ -1 +1 @@
 {
-  "$schema": "https://vega.github.io/schema/vega/v5.json",
-  "width": 800,
-  "height": 200,
-  "padding": 5,
   "signals": [
     {"name":  "dataPath", "value":  "data"},
     {"name": "valuePath", "value": "data.value"},
     {"name":  "timestampPath", "value":  "data.time"},
-    {"name":  "sensorPath", "value":  "sensorId"},
-    {"name":  "detailHeight", "value": 390},
-    {"name": "overviewHeight", "value":  70},
-    {"name":  "overviewHeightStart", "value" : 430},
-    {"name":  "maxTimeDifference", "value": 10000000}
+    {"name":  "sensorPath", "value":  "sensor.sensorName"},
+    {"name":  "axeLegendPath", "value":  "sensor.phenomenon.phenomenonName"},
+    {"name":  "axeLegendUnit", "value":  "sensor.phenomenon.unit"}
   ]
 }

src/vega/config/config-observations.json

@@ -1 +1 @@
 {
-  "$schema": "https://vega.github.io/schema/vega/v5.json",
-  "width": 800,
-  "height": 200,
-  "padding": 5,
   "signals": [
     {"name": "valuePath", "value": "value"},
     {"name":  "timestampPath", "value":  "time"},
-    {"name":  "detailHeight", "value": 390},
-    {"name": "overviewHeight", "value":  70},
-    {"name":  "overviewHeightStart", "value" : 430},
-    {"name":  "maxTimeDifference", "value": 10000000}
+    {"name":  "gidPath", "value":  "gid"}
   ]
 }

src/vega/config/config.json

@@ +1 @@
+{
+  "$schema": "https://vega.github.io/schema/vega/v5.json",
+  "width": 800,
+  "height": 200,
+  "padding": 5,
+  "signals": [
+    {"name":  "detailHeight", "value": 390},
+    {"name": "overviewHeight", "value":  70},
+    {"name":  "overviewHeightStart", "value" : 430},
+    {"name":  "maxTimeDifference", "value": 10000000}
+  ]
+}

src/vega/tooltip/value-tooltip.json

@@ -8 +8 @@
           "fields": [
             {"signal" :  "valuePath"},
             {"signal":  "timestampPath"},
-            "gid"
-
+            {"signal":  "gidPath"}
           ],
           "as": [
             "value",

src/vega/trashbin/linechart.json

@@ +1 @@
+{
+  "data": [
+    {},
+    {},
+    {},
+    {},
+    {
+      "name": "timeunit",
+      "source": "table",
+      "transform": [
+        {
+          "type": "timeunit",
+          "field": "dateTime",
+          "units": ["year","month", "date", "hours", "minutes", "seconds"],
+          "step": {"signal": "timeStep"}
+        }
+      ]
+    },
+    {
+      "name": "lookup",
+      "source": "timeunit",
+      "transform":[
+        {
+          "type": "lookup",
+          "from": "timeunit",
+          "key": "unit0",
+          "fields": ["unit1"],
+          "as": ["obj"]
+        }
+      ]
+    }
+  ],
+  "marks": [
+    {
+      "scales": [
+        {},
+        {
+          "name": "yDetail",
+          "type": "linear",
+          "range": [390, 0],
+          "domain": {"data": "range", "field": "valueMax"},
+          "nice": true, "zero": true
+        }
+      ],
+      "axes": [
+        {},
+        {"orient": "left", "scale": "yDetail"}
+      ],
+      "marks": [
+        {
+          "marks": [
+            {
+              "type": "symbol",
+              "from": {"data":"table"},
+              "encode": {
+                "enter": {
+                  "tooltip": {
+                    "signal": "{title: timeFormat(datum.dateTime, '%A, %e. %B %Y, %X') }"
+                  }},
+                "update": {
+                  "shape": {"value": "circle"},
+                  "size": {"value": 30},
+                  "x": {"scale": "xDetail", "field": "dateTime"},
+                  "y": {"scale": "yDetail", "field": "value"},
+                  "color": {"value": "both"},
+                  "strokeWidth": {"value": 4},
+                  "fill": {"value": "steelblue"}
+                },
+                "hover": {
+                  "fill": {"value": "red"},
+                  "size": {"value": 60}
+                }
+              }
+            },
+            {
+              "type": "rule",
+              "from": {
+                "data": "lookup"
+              },
+              "encode": {
+                "update": {
+                  "x": {
+                    "scale": "xDetail",
+                    "field": "unit0"
+                  },
+                  "x2": [
+                    {
+                      "test": "isValid(datum.obj)",
+                      "scale": "xDetail",
+                      "field": "obj.unit0"
+                    },
+                    {
+                      "scale": "xDetail",
+                      "field": "unit0"
+                    }
+                  ],
+                  "y": {
+                    "scale": "yDetail",
+                    "field": "value"
+                  },
+                  "y2": [
+                    {
+                      "test": "isValid(datum.obj)",
+                      "scale": "yDetail",
+                      "field": "obj.value"
+                    },
+                    {
+                      "scale": "yDetail",
+                      "field": "value"
+                    }
+                  ],
+                  "stroke": {
+                    "value": "steelblue"
+                  },
+                  "strokeWidth": {
+                    "value": 1
+                  }
+                }
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "signals": [
+        {
+          "value": 0,
+          "on": [
+            {},
+            {
+              "events": "@overview:mousedown",
+              "update": "[x(), x()]"
+            },
+            {
+              "events": "[@overview:mousedown, window:mouseup] > window:mousemove!",
+              "update": "[brush[0], clamp(x(), 0, width)]"
+            }
+          ]
+        }
+      ],
+      "marks": [
+        {},
+        {},
+        {},
+        {
+          "type": "symbol",
+          "from": {"data":"table"},
+          "encode": {
+            "update": {
+              "shape": {"value": "circle"},
+              "size": {"value": 10},
+              "x": {"scale": "xOverview", "field": "dateTime"},
+              "y": {"scale": "yOverview", "field": "value"},
+              "color": {"value": "both"},
+              "strokeWidth": {"value": 4}
+            }
+          }
+        },
+        {
+          "type": "rule",
+          "from": {
+            "data": "lookup"
+          },
+          "encode": {
+            "update": {
+              "x": {
+                "scale": "xOverview",
+                "field": "unit0"
+              },
+              "x2": [
+                {
+                  "test": "isValid(datum.obj)",
+                  "scale": "xOverview",
+                  "field": "obj.unit0"
+                },
+                {
+                  "scale": "xOverview",
+                  "field": "unit0"
+                }
+              ],
+              "y": {
+                "scale": "yOverview",
+                "field": "value"
+              },
+              "y2": [
+                {
+                  "test": "isValid(datum.obj)",
+                  "scale": "yOverview",
+                  "field": "obj.value"
+                },
+                {
+                  "scale": "yOverview",
+                  "field": "value"
+                }
+              ],
+              "stroke": {
+                "value": "steelblue"
+              },
+              "strokeWidth": {
+                "value": 1
+              }
+            }
+          }
+        }
+      ]
+    }
+  ]
+}