Mercurial > gemma

comparison client/src/components/gauge/Waterlevel.vue @ 2596:8774054959a7

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: added Gauges dialog/tool to show waterlevel diagrams
author Markus Kottlaender <markus@intevation.de>
date Tue, 12 Mar 2019 12:07:02 +0100
parents 1686ec185155
children 85f9bf4a6eba
comparison
equal deleted inserted replaced
2595:dda4cec8e67b 2596:8774054959a7
35 import * as d3 from "d3"; 35 import * as d3 from "d3";
36 import debounce from "debounce"; 36 import debounce from "debounce";
37 37
38 export default { 38 export default {
39 computed: { 39 computed: {
40 ...mapState("gauges", ["selectedGauge"]), 40 ...mapState("gauges", ["selectedGauge", "waterlevels"])
41 },
42 watch: {
41 waterlevels() { 43 waterlevels() {
42 let data = []; 44 this.drawDiagram();
43 let waterlevel = 2.5;
44 for (let i = 1; i <= 365; i++) {
45 let date = new Date();
46 date.setFullYear(2018);
47 date.setDate(date.getDate() + i);
48 waterlevel *= Math.random() * (1.02 - 0.98) + 0.98;
49 data.push({ date, waterlevel });
50 }
51 return data;
52 } 45 }
53 }, 46 },
54 methods: { 47 methods: {
55 drawDiagram() { 48 drawDiagram() {
56 var svgWidth = document.querySelector(".diagram-container").clientWidth; 49 var svgWidth = document.querySelector(".diagram-container").clientWidth;