Mercurial > gemma

comparison client/src/components/gauge/Waterlevel.vue @ 4295:0bb735a412af

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: fix drawing of Now label on Diagram (Waterlevels)
author Fadi Abbud <fadi.abbud@intevation.de>
date Fri, 30 Aug 2019 16:54:12 +0200
parents c8b18408cc55
children 275220c82026
comparison
equal deleted inserted replaced
4294:c8b18408cc55 4295:0bb735a412af
389 updaters.push(this.drawAxes({ diagram, dimensions, axes, navigation })); 389 updaters.push(this.drawAxes({ diagram, dimensions, axes, navigation }));
390 updaters.push(this.drawWaterlevelChart({ scale, diagram })); 390 updaters.push(this.drawWaterlevelChart({ scale, diagram }));
391 if (this.hasPredictions) { 391 if (this.hasPredictions) {
392 updaters.push(this.drawPredictionAreas({ scale, diagram, navigation })); 392 updaters.push(this.drawPredictionAreas({ scale, diagram, navigation }));
393 } 393 }
394 updaters.push(this.drawNowLines({ scale, extent, diagram, navigation })); 394 updaters.push(
395 this.drawNowLines({ scale, extent, diagram, navigation, dimensions })
396 );
395 397
396 // static, don't need updater 398 // static, don't need updater
397 this.drawNavigationChart({ scale, navigation }); 399 this.drawNavigationChart({ scale, navigation });
398 this.drawRefLines({ refWaterLevels, diagram, scale, dimensions, extent }); 400 this.drawRefLines({ refWaterLevels, diagram, scale, dimensions, extent });
399 401
694 .append("g") 696 .append("g")
695 .attr("class", "line") 697 .attr("class", "line")
696 .datum(this.waterlevels) 698 .datum(this.waterlevels)
697 .call(lineChunked); 699 .call(lineChunked);
698 }, 700 },
699 drawNowLines({ scale, extent, diagram, navigation }) { 701 drawNowLines({ scale, extent, diagram, navigation, dimensions }) {
700 const [lo, hi] = extent.waterlevel; 702 const [lo, hi] = extent.waterlevel;
701 const dy = Math.ceil(0.15 * (hi - lo)); 703 const dy = Math.ceil(0.15 * (hi - lo));
702 const nowLine = d3 704 const nowLine = d3
703 .line() 705 .line()
704 .x(d => scale.x(d.x)) 706 .x(d => scale.x(d.x))
705 .y(d => scale.y(d.y)); 707 .y(d => scale.y(d.y));
706 708
707 const nowLabel = selection => { 709 const nowLabel = selection => {
708 selection.attr( 710 selection
709 "transform", 711 .attr(
710 `translate(${scale.x(new Date())}, ${scale.y(hi + dy * 0.4)})` 712 "transform",
711 ); 713 `translate(${scale.x(new Date())}, ${scale.y(hi + dy * 0.4)})`
714 )
715 // hide Now label outside the diagram y-axises
716 .attr(
717 "opacity",
718 scale.x(new Date()) >= dimensions.width || scale.x(new Date()) <= 0
719 ? 0
720 : 1
721 );
712 }; 722 };
713 723
714 // draw in main 724 // draw in main
715 diagram 725 diagram
716 .append("path") 726 .append("path")