diff client/src/components/gauge/HydrologicalConditions.vue @ 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
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")