Revize c2c2ce48

Re #8773 - Implementovat grafy pro jeden sensor

+ barchart for one sensor
+ windchart for one sensor
+ linechart for one sensor

package-lock.json

@@ -1705 +1705 @@
       "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==",
       "dev": true
     },
+    "@types/clone": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/clone/-/clone-2.1.0.tgz",
+      "integrity": "sha512-d/aS/lPOnUSruPhgNtT8jW39fHRVTLQy9sodysP1kkG8EdAtdZu1vt8NJaYA8w/6Z9j8izkAsx1A/yJhcYR1CA=="
+    },
     "@types/component-emitter": {
       "version": "1.2.10",
       "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.10.tgz",
@@ -1723 +1728 @@
       "integrity": "sha512-C7srjHiVG3Ey1nR6d511dtDkCEjxuN9W1HWAEjGq8kpcwmNM6JJkpC0xvabM7BXTG2wDq8Eu33iH9aQKa7IvLQ==",
       "dev": true
     },
+    "@types/fast-json-stable-stringify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
+      "integrity": "sha512-mky/O83TXmGY39P1H9YbUpjV6l6voRYlufqfFCvel8l1phuy8HRjdWc1rrPuN53ITBJlbyMSV6z3niOySO5pgQ=="
+    },
     "@types/glob": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz",
@@ -2121 +2131 @@
     "ansi-regex": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
-      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
-      "dev": true
+      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
     },
     "ansi-styles": {
       "version": "3.2.1",
@@ -2248 +2257 @@
       "integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=",
       "dev": true
     },
+    "array-flat-polyfill": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/array-flat-polyfill/-/array-flat-polyfill-1.0.1.tgz",
+      "integrity": "sha512-hfJmKupmQN0lwi0xG6FQ5U8Rd97RnIERplymOv/qpq8AoNKPPAnxJadjFA23FNWm88wykh9HmpLJUUwUtNU/iw=="
+    },
     "array-flatten": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
@@ -3147 +3161 @@
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
       "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
-      "dev": true,
       "requires": {
         "string-width": "^4.2.0",
         "strip-ansi": "^6.0.0",
@@ -4778 +4791 @@
     "emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
     },
     "emojis-list": {
       "version": "3.0.0",
@@ -4985 +4997 @@
     "escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
-      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
-      "dev": true
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
     },
     "escape-html": {
       "version": "1.0.3",
@@ -5378 +5389 @@
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "fast-glob": {
       "version": "3.2.5",
@@ -5403 +5413 @@
     "fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "dev": true
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
     },
     "fastparse": {
       "version": "1.1.2",
@@ -5809 +5818 @@
     "get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-      "dev": true
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
     },
     "get-intrinsic": {
       "version": "1.1.1",
@@ -6785 +6793 @@
     "is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
     },
     "is-glob": {
       "version": "4.0.1",
@@ -11160 +11167 @@
     "require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
-      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
-      "dev": true
+      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I="
     },
     "require-main-filename": {
       "version": "2.0.0",
@@ -12619 +12625 @@
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
       "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==",
-      "dev": true,
       "requires": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -12667 +12672 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
       "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
-      "dev": true,
       "requires": {
         "ansi-regex": "^5.0.0"
       }
@@ -13714 +13718 @@
         "vega-util": "^1.15.2"
       }
     },
+    "vega-lite": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/vega-lite/-/vega-lite-5.1.0.tgz",
+      "integrity": "sha512-HEyf0iHnCNmWkWFIbEmMphcJwZpcBnfnU8v+Ojrndr7ihDueojHMOSikoyz/GNpdkai+QFxLboA6DDCTtFv9iQ==",
+      "requires": {
+        "@types/clone": "~2.1.0",
+        "@types/fast-json-stable-stringify": "^2.0.0",
+        "array-flat-polyfill": "^1.0.1",
+        "clone": "~2.1.2",
+        "fast-deep-equal": "~3.1.3",
+        "fast-json-stable-stringify": "~2.1.0",
+        "json-stringify-pretty-compact": "~3.0.0",
+        "tslib": "~2.2.0",
+        "vega-event-selector": "~2.0.6",
+        "vega-expression": "~4.0.1",
+        "vega-util": "~1.16.1",
+        "yargs": "~16.2.0"
+      },
+      "dependencies": {
+        "clone": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+          "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18="
+        },
+        "tslib": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
+          "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
+        }
+      }
+    },
     "vega-loader": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/vega-loader/-/vega-loader-4.4.0.tgz",
@@ -15610 +15645 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
       "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
       "requires": {
         "ansi-styles": "^4.0.0",
         "string-width": "^4.1.0",
@@ -15621 +15655 @@
           "version": "4.3.0",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
           "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
           "requires": {
             "color-convert": "^2.0.1"
           }
@@ -15630 +15663 @@
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
           "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
           "requires": {
             "color-name": "~1.1.4"
           }
@@ -15638 +15670 @@
         "color-name": {
           "version": "1.1.4",
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
         }
       }
     },
@@ -15680 +15711 @@
     "y18n": {
       "version": "5.0.5",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.5.tgz",
-      "integrity": "sha512-hsRUr4FFrvhhRH12wOdfs38Gy7k2FFzB9qgN9v3aLykRq0dRcdcpz5C9FxdS2NuhOrI/628b/KSTJ3rwHysYSg==",
-      "dev": true
+      "integrity": "sha512-hsRUr4FFrvhhRH12wOdfs38Gy7k2FFzB9qgN9v3aLykRq0dRcdcpz5C9FxdS2NuhOrI/628b/KSTJ3rwHysYSg=="
     },
     "yallist": {
       "version": "4.0.0",
@@ -15698 +15728 @@
       "version": "16.2.0",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
       "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
-      "dev": true,
       "requires": {
         "cliui": "^7.0.2",
         "escalade": "^3.1.1",
@@ -15712 +15741 @@
     "yargs-parser": {
       "version": "20.2.6",
       "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.6.tgz",
-      "integrity": "sha512-AP1+fQIWSM/sMiET8fyayjx/J+JmTPt2Mr0FkrgqB4todtfa53sOsrSAcIrJRD5XS20bKUwaDIuMkWKCEiQLKA==",
-      "dev": true
+      "integrity": "sha512-AP1+fQIWSM/sMiET8fyayjx/J+JmTPt2Mr0FkrgqB4todtfa53sOsrSAcIrJRD5XS20bKUwaDIuMkWKCEiQLKA=="
     },
     "yn": {
       "version": "3.1.1",

package.json

@@ -32 +32 @@
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
     "vega": "^5.20.2",
-    "vega-embed": "^6.17.0",
+    "vega-tooltip": "^0.25.1",
     "zone.js": "~0.11.3"
   },
   "devDependencies": {

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

@@ -41 +41 @@
     this.showGraph();
   }
 
+
+  getGraph(sensorId, data, interval) {
+    let spec = this.getGraphType(sensorId);
+    const vega = require('vega');
+    const vegaTooltip = require('vega-tooltip');
+
+    spec.data[0].values = data;
+    spec.signals[0].value = interval;
+
+
+    let handler = new vegaTooltip.Handler();
+
+    /*const view = new vega.View(vega.parse(spec), {
+      renderer: 'canvas',
+      container: '#view',
+      hover: 'true'}).runAsync();*/
+
+    const loc = vega.locale({
+      "decimal": ",",
+      "thousands": "\u00a0",
+      "grouping": [3],
+      "currency": ["", "\u00a0Kč"]
+    },{
+      "dateTime": "%A,%e.%B %Y, %X",
+      "date": "%-d.%-m.%Y",
+      "time": "%H:%M:%S",
+      "periods": ["AM", "PM"],
+      "days": ["neděle", "pondělí", "úterý", "středa", "čvrtek", "pátek", "sobota"],
+      "shortDays": ["ne.", "po.", "út.", "st.", "čt.", "pá.", "so."],
+      "months": ["leden", "únor", "březen", "duben", "květen", "červen", "červenec", "srpen", "září", "říjen", "listopad", "prosinec"],
+      "shortMonths": ["led", "úno", "břez", "dub", "kvě", "čer", "červ", "srp", "zář", "říj", "list", "pros"]
+    });
+
+    let view = new vega.View(vega.parse(spec))
+      .tooltip(handler.call)
+      .initialize('#view')
+      .hover()
+      .locale(loc)
+      .runAsync();
+
+
+
+  }
+
+  getGraphType(sensorId) {
+    let spec;
+
+    if(sensorId >= 480000000 && sensorId < 490000000) {
+      spec = require('/src/vega/aggregate-barchart.json');
+    } else if((sensorId >= 470020000 && sensorId <  470030000) || (sensorId >=470060000 && sensorId < 470090000) ||
+      (sensorId >= 470130000 && sensorId < 470140000) || (sensorId >=470180000 && sensorId < 470190000)) {
+      spec = require('/src/vega/aggregate-windchart.json');
+    } else {
+      spec = require('/src/vega/aggregate-linechart.json');
+    }
+
+    return spec;
+
+  }
+
   showGraph() {
     let agg = 'HOUR';
-    let range: Date[] = [moment().subtract(12, 'months').toDate(), moment().toDate()];
-    const vega = require('vega');
-    const spec = require('/src/vega/data.json');
+    let range: Date[] = [moment().subtract(9, 'months').toDate(), moment().toDate()];
+   // const vega = require('vega');
+   // const spec = require('/src/vega/data.json');
 /*    this.observationService.getObservation({
       unit_id: this.unitId,
       sensor_id: this.sensorId,
@@ -75 +135 @@
       to: moment(range[1]).format('yyyy-MM-DD HH:mm:ssZ').slice(0, -3), interval: agg}).subscribe(
       observations => {
         if (observations){
-          spec.data[0].values = observations[this.sensorId].data;
+          this.getGraph(this.sensorId, observations[this.sensorId].data, observations[this.sensorId].interval);
         } else {
-          spec.data[0].values = null;
+          //TODO observace null
         }
 
-        const view = new vega.View(vega.parse(spec), {
-          renderer: 'canvas',
-          container: '#view',
-          hover: 'true'}).runAsync();
+
       }
     )
 

src/vega/aggregate-barchart.json

@@ +1 @@
+{
+  "$schema": "https://vega.github.io/schema/vega/v5.json",
+  "width": 800,
+  "height": 200,
+  "padding": 5,
+
+  "data": [
+    {
+      "name": "table",
+      "values": null,
+      "transform": [
+        {
+          "type": "formula",
+          "expr": "toDate(datum[\"timestamp\"])",
+          "as": "dateTime"
+        },
+        {
+          "type": "timeunit",
+          "field": "dateTime",
+          "units": ["year","month", "date", "hours", "minutes", "seconds"],
+          "step": {"signal": "timeStep"}
+        },
+        {
+          "type": "formula",
+          "expr": "time(datum[\"unit0\"] + (timeStep * 100))",
+          "as": "barStart"
+        },
+        {
+          "type": "formula",
+          "expr": "time(datum[\"unit1\"] - (timeStep * 100))",
+          "as": "barEnd"
+        }
+      ]
+    }
+
+      ],
+
+
+
+  "signals": [
+    {
+      "name": "timeStep",
+      "value": null
+    },
+    {
+      "name": "detailDomain"
+    }
+
+  ],
+
+  "marks": [
+    {
+      "type": "group",
+      "name": "detail",
+      "encode": {
+        "enter": {
+          "height": {"value": 390},
+          "width": {"value": 800}
+        }
+      },
+      "scales": [
+        {
+          "name": "xDetail",
+          "type": "time",
+          "range": "width",
+          "domain": {"data": "table", "field": "dateTime"},
+          "domainRaw": {"signal": "detailDomain"}
+        },
+        {
+          "name": "yDetail",
+          "type": "linear",
+          "range": [390, 0],
+          "domain": {"data": "table", "field": "avg"},
+          "nice": true, "zero": true
+        }
+      ],
+      "axes": [
+        {"orient": "bottom", "scale": "xDetail"},
+        {"orient": "left", "scale": "yDetail"}
+      ],
+      "marks": [
+        {
+          "type": "group",
+          "encode": {
+            "enter": {
+              "height": {"field": {"group": "height"}},
+              "width": {"field": {"group": "width"}},
+              "clip": {"value": true}
+            }
+          },
+          "marks": [
+            {
+              "type": "rect",
+              "from": {"data":"table"},
+              "encode": {
+                "enter": {
+                  "tooltip": {
+                    "signal": "{title: timeFormat(datum.dateTime, '%A,%e.%B %Y, %X')  ,  'avg': datum.avg, 'sum': datum.sum, 'max': datum.max, 'min': datum.min }"
+                  }},
+                "update": {
+                  "x": {"scale": "xDetail", "field": "barStart"},
+                  "x2": {"scale": "xDetail", "field": "barEnd"},
+                  "y": {"scale": "yDetail", "field": "avg"},
+                  "y2": {"scale": "yDetail", "value": 0},
+                  "color": {"value": "both"},
+                  "fill": {"value": "steelBlue"}
+                },
+                "hover": {
+                  "fill": {"value": "red"},
+                  "size": {"value": 60}
+                }
+              }
+            }
+
+
+
+          ]
+        }
+      ]
+    },
+
+    {
+      "type": "group",
+      "name": "overview",
+      "encode": {
+        "enter": {
+          "x": {"value": 0},
+          "y": {"value": 430},
+          "height": {"value": 70},
+          "width": {"value": 720},
+          "fill": {"value": "transparent"}
+        }
+      },
+      "signals": [
+        {
+          "name": "brush", "value": 0,
+          "on": [
+            {
+              "events": "@overview:mousedown",
+              "update": "[x(), x()]"
+            },
+            {
+              "events": "[@overview:mousedown, window:mouseup] > window:mousemove!",
+              "update": "[brush[0], clamp(x(), 0, width)]"
+            },
+            {
+              "events": {"signal": "delta"},
+              "update": "clampRange([anchor[0] + delta, anchor[1] + delta], 0, width)"
+            }
+          ]
+        },
+        {
+          "name": "anchor", "value": null,
+          "on": [{"events": "@brush:mousedown", "update": "slice(brush)"}]
+        },
+        {
+          "name": "xdown", "value": 0,
+          "on": [{"events": "@brush:mousedown", "update": "x()"}]
+        },
+        {
+          "name": "delta", "value": 0,
+          "on": [
+            {
+              "events": "[@brush:mousedown, window:mouseup] > window:mousemove!",
+              "update": "x() - xdown"
+            }
+          ]
+        },
+        {
+          "name": "detailDomain",
+          "push": "outer",
+          "on": [
+            {
+              "events": {"signal": "brush"},
+              "update": "span(brush) ? invert('xOverview', brush) : null"
+            }
+          ]
+        }
+      ],
+      "scales": [
+        {
+          "name": "xOverview",
+          "type": "time",
+          "range": "width",
+          "domain": {"data": "table", "field": "dateTime"}
+        },
+        {
+          "name": "yOverview",
+          "type": "linear",
+          "range": [70, 0],
+          "domain": {"data": "table", "field": "value"},
+          "nice": true, "zero": true
+        }
+      ],
+      "axes": [
+        {"orient": "bottom", "scale": "xOverview"}
+      ],
+      "marks": [
+
+
+        {
+          "type": "rect",
+          "name": "brush",
+          "encode": {
+            "enter": {
+              "y": {"value": 0},
+              "height": {"value": 70},
+              "fill": {"value": "#333"},
+              "fillOpacity": {"value": 0.2}
+            },
+            "update": {
+              "x": {"signal": "brush[0]"},
+              "x2": {"signal": "brush[1]"}
+            }
+          }
+        },
+        {
+          "type": "rect",
+          "interactive": false,
+          "encode": {
+            "enter": {
+              "y": {"value": 0},
+              "height": {"value": 70},
+              "width": {"value": 1},
+              "fill": {"value": "firebrick"}
+            },
+            "update": {
+              "x": {"signal": "brush[0]"}
+            }
+          }
+        },
+        {
+          "type": "rect",
+          "interactive": false,
+          "encode": {
+            "enter": {
+              "y": {"value": 0},
+              "height": {"value": 70},
+              "width": {"value": 1},
+              "fill": {"value": "firebrick"}
+            },
+            "update": {
+              "x": {"signal": "brush[1]"}
+            }
+          }
+        }
+      ]
+    }
+  ]
+}
+
+
+

src/vega/aggregate-linechart.json

@@ +1 @@
+{
+  "$schema": "https://vega.github.io/schema/vega/v5.json",
+  "width": 800,
+  "height": 200,
+  "padding": 5,
+
+  "data": [
+    {
+      "name": "table",
+      "values": null,
+      "transform": [
+        {
+          "type": "formula",
+          "expr": "toDate(datum[\"timestamp\"])",
+          "as": "dateTime"
+        },
+        {
+          "type": "timeunit",
+          "field": "dateTime",
+          "units": ["year","month", "date", "hours", "minutes", "seconds"],
+          "step": {"signal": "timeStep"}
+        }
+      ]
+    },
+    {
+      "name": "table2",
+      "source": "table",
+      "transform":[
+        {
+          "type": "lookup",
+          "from": "table",
+          "key": "unit0",
+          "fields": ["unit1"],
+          "as": ["obj"]
+        }
+
+      ]
+    },
+    {
+      "name": "table3",
+      "source": "table",
+      "transform": [
+        {
+          "type": "aggregate",
+          "fields": ["dateTime", "dateTime"],
+          "ops": ["min", "max"],
+          "as": ["dateMinTemp", "dateMaxTemp"]
+        },
+        {
+          "type": "formula",
+          "expr":"time(datum[\"dateMinTemp\"] - (timeStep * 500))",
+          "as": "dateMin"
+        },
+        {
+          "type": "formula",
+          "expr":"time(datum[\"dateMaxTemp\"] + (timeStep * 500))",
+          "as": "dateMax"
+        }
+      ]
+    }
+  ],
+
+  "signals": [
+    {
+      "name": "timeStep",
+      "value": null
+    },
+    {
+      "name": "detailDomain"
+    }
+
+  ],
+
+  "marks": [
+    {
+      "type": "group",
+      "name": "detail",
+      "encode": {
+        "enter": {
+          "height": {"value": 390},
+          "width": {"value": 800}
+        }
+      },
+      "scales": [
+        {
+          "name": "xDetail",
+          "type": "time",
+          "range": "width",
+          "domain": {"data": "table3", "fields": ["dateMin", "dateMax"]},
+          "domainRaw": {"signal": "detailDomain"}
+        },
+        {
+          "name": "yDetail",
+          "type": "linear",
+          "range": [390, 0],
+          "domain": {"data": "table", "field": "avg"},
+          "nice": true, "zero": true
+        }
+      ],
+      "axes": [
+        {"orient": "bottom", "scale": "xDetail"},
+        {"orient": "left", "scale": "yDetail"}
+      ],
+      "marks": [
+        {
+          "type": "group",
+          "encode": {
+            "enter": {
+              "height": {"field": {"group": "height"}},
+              "width": {"field": {"group": "width"}},
+              "clip": {"value": true}
+            }
+          },
+          "marks": [
+            {
+              "type": "symbol",
+              "from": {"data":"table"},
+              "encode": {
+                "enter": {
+                  "tooltip": {
+                    "signal": "{title: timeFormat(datum.dateTime, '%A, %e. %B %Y, %X')  ,  'avg': datum.avg, 'sum': datum.sum, 'max': datum.max, 'min': datum.min }"
+                  }},
+                "update": {
+                  "shape": {"value": "circle"},
+                  "size": {"value": 30},
+                  "x": {"scale": "xDetail", "field": "dateTime"},
+                  "y": {"scale": "yDetail", "field": "avg"},
+                  "color": {"value": "both"},
+                  "strokeWidth": {"value": 4},
+                  "fill": {"value": "steelblue"}
+                },
+                "hover": {
+                  "fill": {"value": "red"},
+                  "size": {"value": 60}
+                }
+              }
+            },
+            {
+              "type": "rule",
+              "from": {
+                "data": "table2"
+              },
+              "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": "avg"
+                  },
+                  "y2": [
+                    {
+                      "test": "isValid(datum.obj)",
+                      "scale": "yDetail",
+                      "field": "obj.avg"
+                    },
+                    {
+                      "scale": "yDetail",
+                      "field": "avg"
+                    }
+                  ],
+                  "stroke": {
+                    "value": "steelblue"
+                  },
+                  "strokeWidth": {
+                    "value": 1
+                  }
+                }
+              }
+            }
+
+
+          ]
+        }
+      ]
+    },
+
+    {
+      "type": "group",
+      "name": "overview",
+      "encode": {
+        "enter": {
+          "x": {"value": 0},
+          "y": {"value": 430},
+          "height": {"value": 70},
+          "width": {"value": 720},
+          "fill": {"value": "transparent"}
+        }
+      },
+      "signals": [
+        {
+          "name": "brush", "value": 0,
+          "on": [
+            {
+              "events": "@overview:mousedown",
+              "update": "[x(), x()]"
+            },
+            {
+              "events": "[@overview:mousedown, window:mouseup] > window:mousemove!",
+              "update": "[brush[0], clamp(x(), 0, width)]"
+            },
+            {
+              "events": {"signal": "delta"},
+              "update": "clampRange([anchor[0] + delta, anchor[1] + delta], 0, width)"
+            }
+          ]
+        },
+        {
+          "name": "anchor", "value": null,
+          "on": [{"events": "@brush:mousedown", "update": "slice(brush)"}]
+        },
+        {
+          "name": "xdown", "value": 0,
+          "on": [{"events": "@brush:mousedown", "update": "x()"}]
+        },
+        {
+          "name": "delta", "value": 0,
+          "on": [
+            {
+              "events": "[@brush:mousedown, window:mouseup] > window:mousemove!",
+              "update": "x() - xdown"
+            }
+          ]
+        },
+        {
+          "name": "detailDomain",
+          "push": "outer",
+          "on": [
+            {
+              "events": {"signal": "brush"},
+              "update": "span(brush) ? invert('xOverview', brush) : null"
+            }
+          ]
+        }
+      ],
+      "scales": [
+        {
+          "name": "xOverview",
+          "type": "time",
+          "range": "width",
+          "domain": {"data": "table3", "fields": ["dateMin", "dateMax"]}
+        },
+        {
+          "name": "yOverview",
+          "type": "linear",
+          "range": [70, 0],
+          "domain": {"data": "table", "field": "avg"},
+          "nice": true, "zero": true
+        }
+      ],
+      "axes": [
+        {"orient": "bottom", "scale": "xOverview"}
+      ],
+      "marks": [
+        {
+          "type": "symbol",
+          "from": {"data":"table"},
+          "encode": {
+            "update": {
+              "shape": {"value": "circle"},
+              "size": {"value": 10},
+              "x": {"scale": "xOverview", "field": "dateTime"},
+              "y": {"scale": "yOverview", "field": "avg"},
+              "color": {"value": "both"},
+              "strokeWidth": {"value": 4}
+            }
+          }
+        },
+        {
+          "type": "rule",
+          "from": {
+            "data": "table2"
+          },
+          "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": "avg"
+              },
+              "y2": [
+                {
+                  "test": "isValid(datum.obj)",
+                  "scale": "yOverview",
+                  "field": "obj.avg"
+                },
+                {
+                  "scale": "yOverview",
+                  "field": "avg"
+                }
+              ],
+              "stroke": {
+                "value": "steelblue"
+              },
+              "strokeWidth": {
+                "value": 1
+              }
+            }
+          }
+        },
+
+        {
+          "type": "rect",
+          "name": "brush",
+          "encode": {
+            "enter": {
+              "y": {"value": 0},
+              "height": {"value": 70},
+              "fill": {"value": "#333"},
+              "fillOpacity": {"value": 0.2}
+            },
+            "update": {
+              "x": {"signal": "brush[0]"},
+              "x2": {"signal": "brush[1]"}
+            }
+          }
+        },
+        {
+          "type": "rect",
+          "interactive": false,
+          "encode": {
+            "enter": {
+              "y": {"value": 0},
+              "height": {"value": 70},
+              "width": {"value": 1},
+              "fill": {"value": "firebrick"}
+            },
+            "update": {
+              "x": {"signal": "brush[0]"}
+            }
+          }
+        },
+        {
+          "type": "rect",
+          "interactive": false,
+          "encode": {
+            "enter": {
+              "y": {"value": 0},
+              "height": {"value": 70},
+              "width": {"value": 1},
+              "fill": {"value": "firebrick"}
+            },
+            "update": {
+              "x": {"signal": "brush[1]"}
+            }
+          }
+        }
+      ]
+    }
+  ]
+}
+
+
+

src/vega/aggregate-windchart.json

@@ +1 @@
+{
+  "$schema": "https://vega.github.io/schema/vega/v5.json",
+  "width": 720,
+  "height": 200,
+  "padding": 5,
+
+
+
+  "data": [
+    {
+      "name": "table",
+      "values": null,
+      "transform": [
+        {
+          "type": "formula",
+          "expr": "toDate(datum[\"timestamp\"])",
+          "as": "dateTime"
+        }]
+
+    },
+    {
+      "name": "table2",
+      "source": "table",
+      "transform": [
+        {
+          "type": "aggregate",
+          "fields": ["dateTime", "dateTime"],
+          "ops": ["min", "max"],
+          "as": ["dateMinTemp", "dateMaxTemp"]
+        },
+        {
+          "type": "formula",
+          "expr":"time(datum[\"dateMinTemp\"] - (timeStep * 1000))",
+          "as": "dateMin"
+        },
+        {
+          "type": "formula",
+          "expr":"time(datum[\"dateMaxTemp\"] + (timeStep * 1000))",
+          "as": "dateMax"
+        },
+        {
+          "type": "formula",
+          "expr":"time(datum[\"dateMax\"]) - time(datum[\"dateMin\"])",
+          "as": "range"
+        }
+      ]
+    }
+  ],
+
+  "signals": [
+    {
+      "name": "timeStep",
+      "value": null
+    },
+    {
+      "name": "arrowCount",
+      "value": 25
+    },
+    {
+      "name": "selectionWidth",
+      "update": "floor((arrowCount * (timeStep * 1000) * width) / data('table2')[0].range)"
+    },
+    {
+      "name": "detailDomain",
+      "update": "[time(data('table2')[0].dateMin), time(data('table2')[0].dateMin) + ((timeStep * 1000) * arrowCount)] "
+    }
+  ],
+
+  "marks": [
+    {
+      "type": "group",
+      "name": "detail",
+      "encode": {
+        "enter": {
+          "height": {"value": 60},
+          "width": {"value": 720}
+        }
+      },
+      "scales": [
+        {
+          "name": "xDetail",
+          "type": "time",
+          "range": "width",
+          "domain": {"signal": "detailDomain"}
+        }
+      ],
+      "axes": [
+        {"orient": "bottom", "scale": "xDetail"}
+      ],
+      "marks": [
+        {
+          "type": "group",
+          "encode": {
+            "enter": {
+              "height": {"field": {"group": "height"}},
+              "width": {"field": {"group": "width"}},
+              "clip": {"value": true}
+            }
+          },
+          "marks": [
+            {
+              "type": "symbol",
+              "from": {"data": "table"},
+              "encode": {
+                "enter": {
+                  "tooltip": {
+                    "signal": "{title: timeFormat(datum.dateTime, '%B %d, %Y %H:%M') , 'avg': datum.avg, 'sum': datum.sum, 'max': datum.max, 'min': datum.min}"
+                  }
+                },
+                "hover": { "fill": {"value": "red"} },
+                "update": {
+                  "shape": {"value": "arrow"},
+                  "size": {"value": 500},
+                  "x": {"scale": "xDetail", "field": "dateTime"},
+                  "y": {"value":30},
+                  "angle":{"field": "avg"},
+                  "color": {"value": "both"},
+                  "strokeWidth": {"value": 1},
+                  "fill": {"value": "steelblue"}
+
+                }
+
+              }
+            }
+          ]
+        }
+      ]
+    },
+
+    {
+      "type": "group",
+      "name": "overview",
+      "encode": {
+        "enter": {
+          "x": {"value": 0},
+          "y": {"value": 100},
+          "height": {"value": 70},
+          "width": {"value": 720},
+          "fill": {"value": "transparent"}
+        }
+      },
+      "signals": [
+        {
+          "name": "brush",
+          "update": "[0,selectionWidth]",
+          "on": [
+            {
+              "events": {"signal": "delta"},
+              "update": "clampRange([anchor[0] + delta, anchor[1] + delta], 0, width)"
+            }
+
+          ]
+        },
+        {
+          "name": "anchor", "value": null,
+          "on": [{"events": "@brush:mousedown", "update": "slice(brush)"}]
+        },
+        {
+          "name": "xdown", "value": 0,
+          "on": [{"events": "@brush:mousedown", "update": "x()"}]
+        },
+        {
+          "name": "delta", "value": 0,
+          "on": [
+            {
+              "events": "[@brush:mousedown, window:mouseup] > window:mousemove!",
+              "update": "x() - xdown"
+            }
+          ]
+        },
+        {
+          "name": "detailDomain",
+          "push": "outer",
+          "on": [
+            {
+              "events": {"signal": "brush"},
+              "update": "invert('xOverview', brush)"
+            }
+          ]
+        }],
+      "scales": [
+        {
+          "name": "xOverview",
+          "type": "time",
+          "range": "width",
+          "domain": {"data": "table2", "fields": ["dateMin", "dateMax"]}
+        },
+        {
+          "name": "yOverview",
+          "type": "linear",
+          "range": [70, 0],
+          "nice": true, "zero": true
+        }
+      ],
+      "axes": [
+        {"orient": "bottom", "scale": "xOverview"}
+      ],
+      "marks": [
+
+        {
+          "type": "rect",
+          "name": "brush",
+          "encode": {
+            "enter": {
+              "y": {"value": 0},
+              "height": {"value": 70},
+              "fill": {"value": "#333"},
+              "fillOpacity": {"value": 0.2}
+            },
+            "update": {
+              "x": {"signal": "brush[0]"},
+              "x2": {"signal": "brush[1]"}
+            }
+          }
+        },
+        {
+          "type": "rect",
+          "interactive": false,
+          "encode": {
+            "enter": {
+              "y": {"value": 0},
+              "height": {"value": 70},
+              "width": {"value": 1},
+              "fill": {"value": "firebrick"}
+            },
+            "update": {
+              "x": {"signal": "brush[0]"}
+            }
+          }
+        },
+        {
+          "type": "rect",
+          "interactive": false,
+          "encode": {
+            "enter": {
+              "y": {"value": 0},
+              "height": {"value": 70},
+              "width": {"value": 1},
+              "fill": {"value": "firebrick"}
+            },
+            "update": {
+              "x": {"signal": "brush[1]"}
+            }
+          }
+        }
+
+
+      ]
+    }
+
+
+
+
+
+
+  ]
+}

src/vega/basic-barchart.json

@@ +1 @@
+{
+  "$schema": "https://vega.github.io/schema/vega/v5.json",
+  "width": 800,
+  "height": 200,
+  "padding": 5,
+
+  "data": [
+    {
+      "name": "table",
+      "values": null,
+      "transform": [
+        {
+          "type": "formula",
+          "expr": "toDate(datum[\"time\"])",
+          "as": "dateTime"
+        },
+        {
+          "type": "timeunit",
+          "field": "dateTime",
+          "units": ["year","month", "date", "hours", "minutes", "seconds"],
+          "step": {"signal": "timeStep"}
+        },
+        {
+          "type": "formula",
+          "expr": "time(datum[\"unit0\"] + (timeStep * 100))",
+          "as": "barStart"
+        },
+        {
+          "type": "formula",
+          "expr": "time(datum[\"unit1\"] - (timeStep * 100))",
+          "as": "barEnd"
+        }
+      ]
+    },
+    {
+      "name": "table2",
+      "source": "table",
+      "transform":[
+        {
+          "type": "lookup",
+          "from": "table",
+          "key": "unit0",
+          "fields": ["unit1"],
+          "as": ["obj"]
+        }
+
+      ]
+
+    }
+  ],
+
+  "signals": [
+    {
+      "name": "detailDomain"
+    },
+    {
+      "name": "timeStep",
+      "value": 1800
+    }
+  ],
+
+  "marks": [
+    {
+      "type": "group",
+      "name": "detail",
+      "encode": {
+        "enter": {
+          "height": {"value": 390},
+          "width": {"value": 800}
+        }
+      },
+      "scales": [
+        {
+          "name": "xDetail",
+          "type": "time",
+          "range": "width",
+          "domain": {"data": "table", "field": "dateTime"},
+          "domainRaw": {"signal": "detailDomain"}
+        },
+        {
+          "name": "yDetail",
+          "type": "linear",
+          "range": [390, 0],
+          "domain": {"data": "table", "field": "value"},
+          "nice": true, "zero": true
+        }
+      ],
+      "axes": [
+        {"orient": "bottom", "scale": "xDetail"},
+        {"orient": "left", "scale": "yDetail"}
+      ],
+      "marks": [
+        {
+          "type": "group",
+          "encode": {
+            "enter": {
+              "height": {"field": {"group": "height"}},
+              "width": {"field": {"group": "width"}},
+              "clip": {"value": true}
+            }
+          },
+          "marks": [
+            {
+              "type": "rect",
+              "from": {"data":"table"},
+              "encode": {
+                "enter": {
+                  "tooltip": {
+                    "signal": "{title: timeFormat(datum.dateTime, '%B %d, %Y %H:%M')  , 'gid': datum.gid , 'value': datum.value }"
+                  }},
+                "update": {
+                  "x": {"scale": "xDetail", "field": "barStart"},
+                  "x2": {"scale": "xDetail", "field": "barEnd"},
+                  "y": {"scale": "yDetail", "field": "value"},
+                  "y2": {"scale": "yDetail", "value": 0},
+                  "color": {"value": "both"},
+                  "fill": {"value": "steelblue"}
+                },
+                "hover": {
+                  "fill": {"value": "red"},
+                  "size": {"value": 60}
+                }
+              }
+            }
+
+
+
+          ]
+        }
+      ]
+    },
+
+    {
+      "type": "group",
+      "name": "overview",
+      "encode": {
+        "enter": {
+          "x": {"value": 0},
+          "y": {"value": 430},
+          "height": {"value": 70},
+          "width": {"value": 720},
+          "fill": {"value": "transparent"}
+        }
+      },
+      "signals": [
+        {
+          "name": "brush", "value": 0,
+          "on": [
+            {
+              "events": "@overview:mousedown",
+              "update": "[x(), x()]"
+            },
+            {
+              "events": "[@overview:mousedown, window:mouseup] > window:mousemove!",
+              "update": "[brush[0], clamp(x(), 0, width)]"
+            },
+            {
+              "events": {"signal": "delta"},
+              "update": "clampRange([anchor[0] + delta, anchor[1] + delta], 0, width)"
+            }
+          ]
+        },
+        {
+          "name": "anchor", "value": null,
+          "on": [{"events": "@brush:mousedown", "update": "slice(brush)"}]
+        },
+        {
+          "name": "xdown", "value": 0,
+          "on": [{"events": "@brush:mousedown", "update": "x()"}]
+        },
+        {
+          "name": "delta", "value": 0,
+          "on": [
+            {
+              "events": "[@brush:mousedown, window:mouseup] > window:mousemove!",
+              "update": "x() - xdown"
+            }
+          ]
+        },
+        {
+          "name": "detailDomain",
+          "push": "outer",
+          "on": [
+            {
+              "events": {"signal": "brush"},
+              "update": "span(brush) ? invert('xOverview', brush) : null"
+            }
+          ]
+        }
+      ],
+      "scales": [
+        {
+          "name": "xOverview",
+          "type": "time",
+          "range": "width",
+          "domain": {"data": "table", "field": "dateTime"}
+        },
+        {
+          "name": "yOverview",
+          "type": "linear",
+          "range": [70, 0],
+          "domain": {"data": "table", "field": "value"},
+          "nice": true, "zero": true
+        }
+      ],
+      "axes": [
+        {"orient": "bottom", "scale": "xOverview"}
+      ],
+      "marks": [
+
+
+        {
+          "type": "rect",
+          "name": "brush",
+          "encode": {
+            "enter": {
+              "y": {"value": 0},
+              "height": {"value": 70},
+              "fill": {"value": "#333"},
+              "fillOpacity": {"value": 0.2}
+            },