Mercurial > gemma
comparison client/src/components/gauge/Waterlevel.vue @ 3726:be939dcdfdfd
client: waterlevel diagrams: make now line label not update its position when zooming
Of course the line and label could both be updated and move with the time but since all other data is static after generating
the diagram once, a moving now line would be to fancy... but I was tempted.
| author | Markus Kottlaender <markus@intevation.de> |
|---|---|
| date | Thu, 20 Jun 2019 19:16:26 +0200 |
| parents | 05bbd1a97567 |
| children | 2b6734a6730a |
comparison
equal
deleted
inserted
replaced
| 3725:18777f6df3ef | 3726:be939dcdfdfd |
|---|---|
| 860 .chunk(d => (d.predicted ? "predicted" : "line")) | 860 .chunk(d => (d.predicted ? "predicted" : "line")) |
| 861 .chunkDefinitions({ predicted: {} }) | 861 .chunkDefinitions({ predicted: {} }) |
| 862 ); | 862 ); |
| 863 }, | 863 }, |
| 864 drawNowLines() { | 864 drawNowLines() { |
| 865 const now = new Date(); | |
| 866 const nowCoords = [ | |
| 867 { x: now, y: this.extent.waterlevel[0] }, | |
| 868 { x: now, y: this.extent.waterlevel[1] } | |
| 869 ]; | |
| 865 const nowLine = d3 | 870 const nowLine = d3 |
| 866 .line() | 871 .line() |
| 867 .x(d => this.scale.x(d.x)) | 872 .x(d => this.scale.x(d.x)) |
| 868 .y(d => this.scale.y(d.y)); | 873 .y(d => this.scale.y(d.y)); |
| 869 const nowLabel = selection => { | 874 const nowLabel = selection => { |
| 870 selection.attr( | 875 selection.attr( |
| 871 "transform", | 876 "transform", |
| 872 `translate(${this.scale.x(new Date())}, ${this.scale.y( | 877 `translate(${this.scale.x(now)}, ${this.scale.y( |
| 873 this.extent.waterlevel[1] | 878 this.extent.waterlevel[1] |
| 874 )})` | 879 )})` |
| 875 ); | 880 ); |
| 876 }; | 881 }; |
| 877 | 882 |
| 878 // draw in main | 883 // draw in main |
| 879 this.diagram | 884 this.diagram |
| 880 .append("path") | 885 .append("path") |
| 881 .datum([ | 886 .datum(nowCoords) |
| 882 { x: new Date(), y: this.extent.waterlevel[0] }, | |
| 883 { x: new Date(), y: this.extent.waterlevel[1] } | |
| 884 ]) | |
| 885 .attr("class", "now-line") | 887 .attr("class", "now-line") |
| 886 .attr("d", nowLine); | 888 .attr("d", nowLine); |
| 887 this.diagram // label | 889 this.diagram // label |
| 888 .append("text") | 890 .append("text") |
| 889 .text(this.$gettext("Now")) | 891 .text(this.$gettext("Now")) |
| 892 .call(nowLabel); | 894 .call(nowLabel); |
| 893 | 895 |
| 894 // draw in nav | 896 // draw in nav |
| 895 this.navigation | 897 this.navigation |
| 896 .append("path") | 898 .append("path") |
| 897 .datum([ | 899 .datum(nowCoords) |
| 898 { x: new Date(), y: this.extent.waterlevel[0] }, | |
| 899 { x: new Date(), y: this.extent.waterlevel[1] } | |
| 900 ]) | |
| 901 .attr("class", "now-line") | 900 .attr("class", "now-line") |
| 902 .attr( | 901 .attr( |
| 903 "d", | 902 "d", |
| 904 d3 | 903 d3 |
| 905 .line() | 904 .line() |