Mercurial > gemma

comparison client/src/components/gauge/Waterlevel.vue @ 3576:1109a38f7ff1

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: waterlevel format in diagrams changed from cm to m and localized
author Markus Kottlaender <markus@intevation.de>
date Mon, 03 Jun 2019 16:58:02 +0200
parents f6d67697f158
children c03170a1c333
comparison
equal deleted inserted replaced
3575:818cc2deff98 3576:1109a38f7ff1
495 .tickSizeInner(this.dimensions.mainHeight) 495 .tickSizeInner(this.dimensions.mainHeight)
496 .tickSizeOuter(0), 496 .tickSizeOuter(0),
497 y: d3 497 y: d3
498 .axisRight(this.scale.y) 498 .axisRight(this.scale.y)
499 .tickSizeInner(this.dimensions.width) 499 .tickSizeInner(this.dimensions.width)
500 .tickSizeOuter(0), 500 .tickSizeOuter(0)
501 .tickFormat(d => this.$options.filters.waterlevel(d)),
501 x2: d3.axisBottom(this.scale.x2) 502 x2: d3.axisBottom(this.scale.x2)
502 }; 503 };
503 504
504 // DRAW DIAGRAM/NAVIGATION AREAS 505 // DRAW DIAGRAM/NAVIGATION AREAS
505 506
772 .call(this.axes.x) 773 .call(this.axes.x)
773 .selectAll(".tick text") 774 .selectAll(".tick text")
774 .attr("y", 15); 775 .attr("y", 15);
775 this.diagram // label 776 this.diagram // label
776 .append("text") 777 .append("text")
777 .text(this.$gettext("Waterlevel [cm]")) 778 .text(this.$gettext("Waterlevel [m]"))
778 .attr("text-anchor", "middle") 779 .attr("text-anchor", "middle")
779 .attr( 780 .attr(
780 "transform", 781 "transform",
781 `translate(-45, ${this.dimensions.mainHeight / 2}) rotate(-90)` 782 `translate(-45, ${this.dimensions.mainHeight / 2}) rotate(-90)`
782 ); 783 );
961 .attr("y", this.scale.y(refWaterLevels[ref]) - 13) 962 .attr("y", this.scale.y(refWaterLevels[ref]) - 13)
962 .attr("width", 55) 963 .attr("width", 55)
963 .attr("height", 12); 964 .attr("height", 12);
964 this.diagram 965 this.diagram
965 .append("text") 966 .append("text")
966 .text(`${ref} (${refWaterLevels[ref]})`) 967 .text(
968 `${ref} (${this.$options.filters.waterlevel(
969 refWaterLevels[ref]
970 )})`
971 )
967 .attr("class", "ref-waterlevel-label") 972 .attr("class", "ref-waterlevel-label")
968 .attr("x", 5) 973 .attr("x", 5)
969 .attr("y", this.scale.y(refWaterLevels[ref]) - 3); 974 .attr("y", this.scale.y(refWaterLevels[ref]) - 3);
970 } 975 }
971 } 976 }
1168 .attr("x", 0) 1173 .attr("x", 0)
1169 .attr("y", 0) 1174 .attr("y", 0)
1170 .attr("dy", "1.4em") 1175 .attr("dy", "1.4em")
1171 .attr("dominant-baseline", "hanging") 1176 .attr("dominant-baseline", "hanging")
1172 .attr("text-anchor", "middle") 1177 .attr("text-anchor", "middle")
1173 .text(d.max + " cm"); 1178 .text(this.$options.filters.waterlevel(d.max) + " m");
1174 tooltipText 1179 tooltipText
1175 .append("tspan") 1180 .append("tspan")
1176 .attr("x", 0) 1181 .attr("x", 0)
1177 .attr("y", 0) 1182 .attr("y", 0)
1178 .attr("dy", "2.6em") 1183 .attr("dy", "2.6em")
1179 .attr("dominant-baseline", "hanging") 1184 .attr("dominant-baseline", "hanging")
1180 .attr("text-anchor", "middle") 1185 .attr("text-anchor", "middle")
1181 .attr("class", "font-weight-bold") 1186 .attr("class", "font-weight-bold")
1182 .text(d.waterlevel + " cm"); 1187 .text(this.$options.filters.waterlevel(d.waterlevel) + " m");
1183 tooltipText 1188 tooltipText
1184 .append("tspan") 1189 .append("tspan")
1185 .attr("x", 0) 1190 .attr("x", 0)
1186 .attr("y", 0) 1191 .attr("y", 0)
1187 .attr("dy", "3.8em") 1192 .attr("dy", "3.8em")
1188 .attr("dominant-baseline", "hanging") 1193 .attr("dominant-baseline", "hanging")
1189 .attr("text-anchor", "middle") 1194 .attr("text-anchor", "middle")
1190 .text(d.min + " cm"); 1195 .text(this.$options.filters.waterlevel(d.min) + " m");
1191 } else { 1196 } else {
1192 tooltipText 1197 tooltipText
1193 .append("tspan") 1198 .append("tspan")
1194 .attr("x", 0) 1199 .attr("x", 0)
1195 .attr("y", 0) 1200 .attr("y", 0)
1196 .attr("dy", "1.4em") 1201 .attr("dy", "1.4em")
1197 .attr("dominant-baseline", "hanging") 1202 .attr("dominant-baseline", "hanging")
1198 .attr("text-anchor", "middle") 1203 .attr("text-anchor", "middle")
1199 .attr("class", "font-weight-bold") 1204 .attr("class", "font-weight-bold")
1200 .text(d.waterlevel + " cm"); 1205 .text(this.$options.filters.waterlevel(d.waterlevel) + " m");
1201 } 1206 }
1202 1207
1203 // get text dimensions 1208 // get text dimensions
1204 const textBBox = tooltipText.node().getBBox(); 1209 const textBBox = tooltipText.node().getBBox();
1205 1210