Mercurial > gemma

comparison client/src/components/gauge/HydrologicalConditions.vue @ 3722:f180de37903c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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]);