Mercurial > gemma
changeset 3147:25c0cbfcc515
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 |
files | client/src/components/gauge/HydrologicalConditions.vue client/src/components/gauge/Waterlevel.vue |
diffstat | 2 files changed, 18 insertions(+), 14 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/gauge/HydrologicalConditions.vue Fri May 03 10:33:51 2019 +0200 +++ b/client/src/components/gauge/HydrologicalConditions.vue Fri May 03 11:32:25 2019 +0200 @@ -237,7 +237,7 @@ this.svg .append("defs") .append("clipPath") - .attr("id", "clip") + .attr("id", "hydrocond-clip") .append("rect") .attr("width", this.dimensions.width) .attr("height", this.dimensions.mainHeight); @@ -282,7 +282,7 @@ this.svg.selectAll(".hide").attr("fill-opacity", 0); this.svg .selectAll(".line") - .attr("clip-path", "url(#clip)") + .attr("clip-path", "url(#hydrocond-clip)") .attr("stroke-width", 2) .attr("fill", "none"); this.svg.selectAll(".line.mean").attr("stroke", "red"); @@ -291,14 +291,14 @@ this.svg.selectAll(".line.q75").attr("stroke", "purple"); this.svg .selectAll(".area") - .attr("clip-path", "url(#clip)") + .attr("clip-path", "url(#hydrocond-clip)") .attr("stroke", "none") .attr("fill", "lightsteelblue"); this.svg .selectAll(".hdc-line, .ldc-line, .mw-line") .attr("stroke-width", 1) .attr("fill", "none") - .attr("clip-path", "url(#clip)"); + .attr("clip-path", "url(#hydrocond-clip)"); this.svg.selectAll(".hdc-line").attr("stroke", "red"); this.svg.selectAll(".ldc-line").attr("stroke", "green"); this.svg.selectAll(".mw-line").attr("stroke", "grey"); @@ -311,7 +311,7 @@ .attr("stroke", "#999") .attr("stroke-width", 1) .attr("stroke-dasharray", "5, 5") - .attr("clip-path", "url(#clip)"); + .attr("clip-path", "url(#hydrocond-clip)"); this.svg .selectAll(".now-line-label") .attr("fill", "#999") @@ -336,7 +336,9 @@ .selectAll(".brush .handle") .attr("stroke", "rgba(23, 162, 184, 0.5)") .attr("fill", "rgba(23, 162, 184, 0.5)"); - this.svg.selectAll(".chart-dots").attr("clip-path", "url(#clip)"); + this.svg + .selectAll(".chart-dots") + .attr("clip-path", "url(#hydrocond-clip)"); this.svg .selectAll(".chart-dots .chart-dot") .attr("fill", "black")
--- a/client/src/components/gauge/Waterlevel.vue Fri May 03 10:33:51 2019 +0200 +++ b/client/src/components/gauge/Waterlevel.vue Fri May 03 11:32:25 2019 +0200 @@ -436,7 +436,7 @@ this.svg .append("defs") .append("clipPath") - .attr("id", "clip") + .attr("id", "waterlevel-clip") .append("rect") .attr("width", this.dimensions.width) .attr("height", this.dimensions.mainHeight); @@ -481,7 +481,7 @@ setInlineStyles() { this.svg .selectAll(".line") - .attr("clip-path", "url(#clip)") + .attr("clip-path", "url(#waterlevel-clip)") .selectAll("path") .attr("stroke", "steelblue") .attr("stroke-width", 2) @@ -504,7 +504,7 @@ .selectAll(".hdc-line, .mw-line, .ldc-line") .attr("stroke-width", 1) .attr("fill", "none") - .attr("clip-path", "url(#clip)"); + .attr("clip-path", "url(#waterlevel-clip)"); this.svg.selectAll(".hdc-line").attr("stroke", "red"); this.svg.selectAll(".ldc-line").attr("stroke", "green"); this.svg.selectAll(".mw-line").attr("stroke", "grey"); @@ -518,7 +518,7 @@ .attr("stroke", "#999") .attr("stroke-width", 1) .attr("stroke-dasharray", "5, 5") - .attr("clip-path", "url(#clip)"); + .attr("clip-path", "url(#waterlevel-clip)"); this.svg .selectAll(".now-line-label") .attr("font-size", "11px") @@ -527,20 +527,20 @@ .selectAll(".prediction-area") .attr("fill", "steelblue") .attr("fill-opacity", 0.2) - .attr("clip-path", "url(#clip)"); + .attr("clip-path", "url(#waterlevel-clip)"); this.svg .selectAll("path.nash-sutcliffe") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1) - .attr("clip-path", "url(#clip)"); + .attr("clip-path", "url(#waterlevel-clip)"); this.svg .selectAll("path.nash-sutcliffe.ns72") .attr("fill", "rgba(0, 0, 0, 0.05)"); this.svg .selectAll("text.nash-sutcliffe") .style("font-size", "10px") - .attr("clip-path", "url(#clip)") + .attr("clip-path", "url(#waterlevel-clip)") .selectAll("tspan:last-child") .style("font-size", "9px") .attr("fill", "#777"); @@ -563,7 +563,9 @@ .selectAll(".brush .handle") .attr("stroke", "rgba(23, 162, 184, 0.5)") .attr("fill", "rgba(23, 162, 184, 0.5)"); - this.svg.selectAll(".chart-dots").attr("clip-path", "url(#clip)"); + this.svg + .selectAll(".chart-dots") + .attr("clip-path", "url(#waterlevel-clip)"); this.svg .selectAll(".chart-dots .chart-dot") .attr("fill", "steelblue")