Mercurial > gemma

changeset 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
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")