Mercurial > gemma
comparison client/src/components/gauge/Waterlevel.vue @ 3719:916534d9d6f6
client: waterlevel diagram: handle gauges without reference waterlevels
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 20 Jun 2019 17:03:38 +0200 |
parents | 116c5fe6a5d7 |
children | 05bbd1a97567 |
comparison
equal
deleted
inserted
replaced
3718:7431c6680b90 | 3719:916534d9d6f6 |
---|---|
563 } | 563 } |
564 updaters.push(this.drawNowLines()); | 564 updaters.push(this.drawNowLines()); |
565 | 565 |
566 // static, don't need updater | 566 // static, don't need updater |
567 this.drawNavigationChart(); | 567 this.drawNavigationChart(); |
568 this.drawRefLines(refWaterLevels); | 568 if (refWaterLevels) { |
569 this.drawRefLines(refWaterLevels); | |
570 } | |
569 | 571 |
570 updaters.push(this.drawNashSutcliffe(72)); | 572 updaters.push(this.drawNashSutcliffe(72)); |
571 updaters.push(this.drawNashSutcliffe(48)); | 573 updaters.push(this.drawNashSutcliffe(48)); |
572 updaters.push(this.drawNashSutcliffe(24)); | 574 updaters.push(this.drawNashSutcliffe(24)); |
573 | 575 |
728 const navHeight = +svgHeight - navMargin.top - navMargin.bottom; | 730 const navHeight = +svgHeight - navMargin.top - navMargin.bottom; |
729 | 731 |
730 return { width, mainHeight, navHeight, mainMargin, navMargin }; | 732 return { width, mainHeight, navHeight, mainMargin, navMargin }; |
731 }, | 733 }, |
732 getExtent(refWaterLevels) { | 734 getExtent(refWaterLevels) { |
735 let waterlevelValues = [...this.waterlevels.map(wl => wl.waterlevel)]; | |
736 if (refWaterLevels) { | |
737 waterlevelValues.push( | |
738 refWaterLevels.HDC + (refWaterLevels.HDC - refWaterLevels.LDC) / 8, | |
739 Math.max( | |
740 refWaterLevels.LDC - (refWaterLevels.HDC - refWaterLevels.LDC) / 4, | |
741 0 | |
742 ) | |
743 ); | |
744 } else { | |
745 let delta = d3.max(waterlevelValues) - d3.min(waterlevelValues); | |
746 waterlevelValues.push( | |
747 d3.max(waterlevelValues) + delta * 0.1, | |
748 d3.min(waterlevelValues) - delta * 0.1 | |
749 ); | |
750 } | |
751 | |
733 return { | 752 return { |
734 // set min/max values for the date axis | 753 // set min/max values for the date axis |
735 date: [ | 754 date: [ |
736 this.waterlevels[0].date, | 755 this.waterlevels[0].date, |
737 endOfDay(this.waterlevels[this.waterlevels.length - 1].date) | 756 endOfDay(this.waterlevels[this.waterlevels.length - 1].date) |
738 ], | 757 ], |
739 // set min/max values for the waterlevel axis | 758 // set min/max values for the waterlevel axis |
740 // including HDC (+ 1/8 HDC-LDC) and LDC (- 1/4 HDC-LDC) | 759 // including HDC (+ 1/8 HDC-LDC) and LDC (- 1/4 HDC-LDC) |
741 waterlevel: d3.extent( | 760 // or, if no refWaterlevels exist, +-10% of delta between min and max wl |
742 [ | 761 waterlevel: d3.extent(waterlevelValues) |
743 ...this.waterlevels, | |
744 { | |
745 waterlevel: | |
746 refWaterLevels.HDC + | |
747 (refWaterLevels.HDC - refWaterLevels.LDC) / 8 | |
748 }, | |
749 { | |
750 waterlevel: Math.max( | |
751 refWaterLevels.LDC - | |
752 (refWaterLevels.HDC - refWaterLevels.LDC) / 4, | |
753 0 | |
754 ) | |
755 } | |
756 ], | |
757 d => d.waterlevel | |
758 ) | |
759 }; | 762 }; |
760 }, | 763 }, |
761 getScale() { | 764 getScale() { |
762 // scaling helpers to convert real world values into pixels | 765 // scaling helpers to convert real world values into pixels |
763 const x = d3.scaleTime().range([0, this.dimensions.width]); | 766 const x = d3.scaleTime().range([0, this.dimensions.width]); |