Mercurial > gemma
comparison client/src/components/gauge/HydrologicalConditions.vue @ 3722:f180de37903c
client: hydrological conditions diagram: handle gauges without reference waterlevels
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 20 Jun 2019 18:10:08 +0200 |
parents | afc8ac7001ee |
children | 05bbd1a97567 |
comparison
equal
deleted
inserted
replaced
3721:ed4820efb7e6 | 3722:f180de37903c |
---|---|
541 updaters.push(this.drawWaterlevelLineChart("median")); | 541 updaters.push(this.drawWaterlevelLineChart("median")); |
542 updaters.push(this.drawWaterlevelLineChart("q25")); | 542 updaters.push(this.drawWaterlevelLineChart("q25")); |
543 updaters.push(this.drawWaterlevelLineChart("q75")); | 543 updaters.push(this.drawWaterlevelLineChart("q75")); |
544 updaters.push(this.drawWaterlevelLineChart("mean", this.yearWaterlevels)); | 544 updaters.push(this.drawWaterlevelLineChart("mean", this.yearWaterlevels)); |
545 updaters.push(this.drawNowLines()); | 545 updaters.push(this.drawNowLines()); |
546 this.drawRefLines(refWaterLevels); // static, doesn't need an updater | 546 if (refWaterLevels) { |
547 this.drawRefLines(refWaterLevels); // static, doesn't need an updater | |
548 } | |
547 | 549 |
548 // INTERACTIONS | 550 // INTERACTIONS |
549 | 551 |
550 // create rectanlge on the main chart area to capture mouse events | 552 // create rectanlge on the main chart area to capture mouse events |
551 const eventRect = this.svg | 553 const eventRect = this.svg |
671 const navHeight = +svgHeight - navMargin.top - navMargin.bottom; | 673 const navHeight = +svgHeight - navMargin.top - navMargin.bottom; |
672 | 674 |
673 return { width, mainHeight, navHeight, mainMargin, navMargin }; | 675 return { width, mainHeight, navHeight, mainMargin, navMargin }; |
674 }, | 676 }, |
675 getExtent(refWaterLevels) { | 677 getExtent(refWaterLevels) { |
676 const waterlevelsRelevantForExtent = []; | 678 const waterlevelValues = []; |
677 this.longtermWaterlevels.forEach(wl => { | 679 this.longtermWaterlevels.forEach(wl => { |
678 waterlevelsRelevantForExtent.push(wl.min, wl.max); | 680 waterlevelValues.push(wl.min, wl.max); |
679 }); | 681 }); |
680 waterlevelsRelevantForExtent.push( | 682 if (refWaterLevels) { |
681 refWaterLevels.HDC + (refWaterLevels.HDC - refWaterLevels.LDC) / 8, | 683 waterlevelValues.push( |
682 Math.max( | 684 refWaterLevels.HDC + (refWaterLevels.HDC - refWaterLevels.LDC) / 8, |
683 refWaterLevels.LDC - (refWaterLevels.HDC - refWaterLevels.LDC) / 4, | 685 Math.max( |
684 0 | 686 refWaterLevels.LDC - (refWaterLevels.HDC - refWaterLevels.LDC) / 4, |
685 ) | 687 0 |
686 ); | 688 ) |
689 ); | |
690 } else { | |
691 let delta = d3.max(waterlevelValues) - d3.min(waterlevelValues); | |
692 waterlevelValues.push( | |
693 d3.max(waterlevelValues) + delta * 0.1, | |
694 d3.min(waterlevelValues) - delta * 0.1 | |
695 ); | |
696 } | |
687 return { | 697 return { |
688 // set min/max values for the date axis | 698 // set min/max values for the date axis |
689 date: [startOfYear(new Date()), endOfYear(new Date())], | 699 date: [startOfYear(new Date()), endOfYear(new Date())], |
690 // set min/max values for the waterlevel axis | 700 // set min/max values for the waterlevel axis |
691 // including HDC (+ 1/8 HDC-LDC) and LDC (- 1/4 HDC-LDC) | 701 // including HDC (+ 1/8 HDC-LDC) and LDC (- 1/4 HDC-LDC) |
692 waterlevel: d3.extent(waterlevelsRelevantForExtent) | 702 waterlevel: d3.extent(waterlevelValues) |
693 }; | 703 }; |
694 }, | 704 }, |
695 getScale() { | 705 getScale() { |
696 // scaling helpers to convert real world values into pixels | 706 // scaling helpers to convert real world values into pixels |
697 const x = d3.scaleTime().range([0, this.dimensions.width]); | 707 const x = d3.scaleTime().range([0, this.dimensions.width]); |