Mercurial > gemma

comparison client/src/components/gauge/Waterlevel.vue @ 4125:0f69d256fa12

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: fix drawing of diagram in case reference waterlevels are missing
author Fadi Abbud <fadi.abbud@intevation.de>
date Thu, 01 Aug 2019 16:46:13 +0200
parents 5317ae66f654
children 2a3bd5f3fc99
comparison
equal deleted inserted replaced
4124:acd87a3d246b 4125:0f69d256fa12
552 .selectAll(".chart-tooltip text") 552 .selectAll(".chart-tooltip text")
553 .attr("fill", "666") 553 .attr("fill", "666")
554 .style("font-size", "0.8em"); 554 .style("font-size", "0.8em");
555 }, 555 },
556 getExtent(refWaterLevels) { 556 getExtent(refWaterLevels) {
557 let rest;
558 if (refWaterLevels) {
559 // set min/max values for the waterlevel axis
560 // including HDC (+ 1/8 HDC-LDC) and LDC (- 1/4 HDC-LDC)
561 rest = [
562 {
563 waterlevel:
564 refWaterLevels.HDC + (refWaterLevels.HDC - refWaterLevels.LDC) / 8
565 },
566 {
567 waterlevel: Math.max(
568 refWaterLevels.LDC -
569 (refWaterLevels.HDC - refWaterLevels.LDC) / 4,
570 0
571 )
572 }
573 ];
574 } else {
575 rest = [];
576 }
557 return { 577 return {
558 // set min/max values for the date axis 578 // set min/max values for the date axis
559 date: [ 579 date: [
560 this.waterlevels[0].date, 580 this.waterlevels[0].date,
561 endOfDay(this.waterlevels[this.waterlevels.length - 1].date) 581 endOfDay(this.waterlevels[this.waterlevels.length - 1].date)
562 ], 582 ],
563 // set min/max values for the waterlevel axis 583 waterlevel: d3.extent([...this.waterlevels, ...rest], d => d.waterlevel)
564 // including HDC (+ 1/8 HDC-LDC) and LDC (- 1/4 HDC-LDC)
565 waterlevel: d3.extent(
566 [
567 ...this.waterlevels,
568 {
569 waterlevel:
570 refWaterLevels.HDC +
571 (refWaterLevels.HDC - refWaterLevels.LDC) / 8
572 },
573 {
574 waterlevel: Math.max(
575 refWaterLevels.LDC -
576 (refWaterLevels.HDC - refWaterLevels.LDC) / 4,
577 0
578 )
579 }
580 ],
581 d => d.waterlevel
582 )
583 }; 584 };
584 }, 585 },
585 getScale({ dimensions, extent }) { 586 getScale({ dimensions, extent }) {
586 // scaling helpers to convert real world values into pixels 587 // scaling helpers to convert real world values into pixels
587 const x = d3.scaleTime().range([0, dimensions.width]); 588 const x = d3.scaleTime().range([0, dimensions.width]);
772 diagram.select(".prediction-area").attr("d", predictionArea()); 773 diagram.select(".prediction-area").attr("d", predictionArea());
773 }; 774 };
774 }, 775 },
775 drawRefLines({ refWaterLevels, diagram, scale, dimensions, extent }) { 776 drawRefLines({ refWaterLevels, diagram, scale, dimensions, extent }) {
776 // filling area between HDC and LDC 777 // filling area between HDC and LDC
777 diagram 778 if (refWaterLevels) {
778 .append("rect") 779 diagram
779 .attr("class", "hdc-ldc-area") 780 .append("rect")
780 .attr("x", 0) 781 .attr("class", "hdc-ldc-area")
781 .attr("y", scale.y(refWaterLevels.HDC)) 782 .attr("x", 0)
782 .attr("width", dimensions.width) 783 .attr("y", scale.y(refWaterLevels.HDC))
783 .attr( 784 .attr("width", dimensions.width)
784 "height", 785 .attr(
785 scale.y(refWaterLevels.LDC) - scale.y(refWaterLevels.HDC) 786 "height",
786 ); 787 scale.y(refWaterLevels.LDC) - scale.y(refWaterLevels.HDC)
788 );
789 }
787 790
788 const refWaterlevelLine = d3 791 const refWaterlevelLine = d3
789 .line() 792 .line()
790 .x(d => scale.x(d.x)) 793 .x(d => scale.x(d.x))
791 .y(d => scale.y(d.y)); 794 .y(d => scale.y(d.y));