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]);