Mercurial > gemma

comparison client/src/components/gauge/HydrologicalConditions.vue @ 3147:25c0cbfcc515

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: gauge diagrams: fixed bug related to same clippath id in multiple diagrams
author Markus Kottlaender <markus@intevation.de>
date Fri, 03 May 2019 11:32:25 +0200
parents b6cc4838d2c0
children cdfb0093b7b1
comparison
equal deleted inserted replaced
3146:b6cc4838d2c0 3147:25c0cbfcc515
235 235
236 // define visible area, everything outside this area will be hidden 236 // define visible area, everything outside this area will be hidden
237 this.svg 237 this.svg
238 .append("defs") 238 .append("defs")
239 .append("clipPath") 239 .append("clipPath")
240 .attr("id", "clip") 240 .attr("id", "hydrocond-clip")
241 .append("rect") 241 .append("rect")
242 .attr("width", this.dimensions.width) 242 .attr("width", this.dimensions.width)
243 .attr("height", this.dimensions.mainHeight); 243 .attr("height", this.dimensions.mainHeight);
244 244
245 // DRAW DIAGRAM PARTS 245 // DRAW DIAGRAM PARTS
280 }, 280 },
281 setInlineStyles() { 281 setInlineStyles() {
282 this.svg.selectAll(".hide").attr("fill-opacity", 0); 282 this.svg.selectAll(".hide").attr("fill-opacity", 0);
283 this.svg 283 this.svg
284 .selectAll(".line") 284 .selectAll(".line")
285 .attr("clip-path", "url(#clip)") 285 .attr("clip-path", "url(#hydrocond-clip)")
286 .attr("stroke-width", 2) 286 .attr("stroke-width", 2)
287 .attr("fill", "none"); 287 .attr("fill", "none");
288 this.svg.selectAll(".line.mean").attr("stroke", "red"); 288 this.svg.selectAll(".line.mean").attr("stroke", "red");
289 this.svg.selectAll(".line.median").attr("stroke", "black"); 289 this.svg.selectAll(".line.median").attr("stroke", "black");
290 this.svg.selectAll(".line.q25").attr("stroke", "orange"); 290 this.svg.selectAll(".line.q25").attr("stroke", "orange");
291 this.svg.selectAll(".line.q75").attr("stroke", "purple"); 291 this.svg.selectAll(".line.q75").attr("stroke", "purple");
292 this.svg 292 this.svg
293 .selectAll(".area") 293 .selectAll(".area")
294 .attr("clip-path", "url(#clip)") 294 .attr("clip-path", "url(#hydrocond-clip)")
295 .attr("stroke", "none") 295 .attr("stroke", "none")
296 .attr("fill", "lightsteelblue"); 296 .attr("fill", "lightsteelblue");
297 this.svg 297 this.svg
298 .selectAll(".hdc-line, .ldc-line, .mw-line") 298 .selectAll(".hdc-line, .ldc-line, .mw-line")
299 .attr("stroke-width", 1) 299 .attr("stroke-width", 1)
300 .attr("fill", "none") 300 .attr("fill", "none")
301 .attr("clip-path", "url(#clip)"); 301 .attr("clip-path", "url(#hydrocond-clip)");
302 this.svg.selectAll(".hdc-line").attr("stroke", "red"); 302 this.svg.selectAll(".hdc-line").attr("stroke", "red");
303 this.svg.selectAll(".ldc-line").attr("stroke", "green"); 303 this.svg.selectAll(".ldc-line").attr("stroke", "green");
304 this.svg.selectAll(".mw-line").attr("stroke", "grey"); 304 this.svg.selectAll(".mw-line").attr("stroke", "grey");
305 this.svg 305 this.svg
306 .selectAll(".ref-waterlevel-label") 306 .selectAll(".ref-waterlevel-label")
309 this.svg 309 this.svg
310 .selectAll(".now-line") 310 .selectAll(".now-line")
311 .attr("stroke", "#999") 311 .attr("stroke", "#999")
312 .attr("stroke-width", 1) 312 .attr("stroke-width", 1)
313 .attr("stroke-dasharray", "5, 5") 313 .attr("stroke-dasharray", "5, 5")
314 .attr("clip-path", "url(#clip)"); 314 .attr("clip-path", "url(#hydrocond-clip)");
315 this.svg 315 this.svg
316 .selectAll(".now-line-label") 316 .selectAll(".now-line-label")
317 .attr("fill", "#999") 317 .attr("fill", "#999")
318 .style("font-size", "11px"); 318 .style("font-size", "11px");
319 this.svg 319 this.svg
334 .attr("fill-opacity", 0.2); 334 .attr("fill-opacity", 0.2);
335 this.svg 335 this.svg
336 .selectAll(".brush .handle") 336 .selectAll(".brush .handle")
337 .attr("stroke", "rgba(23, 162, 184, 0.5)") 337 .attr("stroke", "rgba(23, 162, 184, 0.5)")
338 .attr("fill", "rgba(23, 162, 184, 0.5)"); 338 .attr("fill", "rgba(23, 162, 184, 0.5)");
339 this.svg.selectAll(".chart-dots").attr("clip-path", "url(#clip)"); 339 this.svg
340 .selectAll(".chart-dots")
341 .attr("clip-path", "url(#hydrocond-clip)");
340 this.svg 342 this.svg
341 .selectAll(".chart-dots .chart-dot") 343 .selectAll(".chart-dots .chart-dot")
342 .attr("fill", "black") 344 .attr("fill", "black")
343 .attr("stroke", "black") 345 .attr("stroke", "black")
344 .attr("stroke-opacity", 0) 346 .attr("stroke-opacity", 0)