Mercurial > gemma

changeset 3111:f269bd001e78

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: remove css classes and adjust styles for hydrological-diagram
author Fadi Abbud <fadi.abbud@intevation.de>
date Fri, 26 Apr 2019 11:01:45 +0200
parents 8db113582f64
children e838609bc10d
files client/src/components/gauge/HydrologicalConditions.vue
diffstat 1 files changed, 7 insertions(+), 89 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/gauge/HydrologicalConditions.vue	Fri Apr 26 09:36:49 2019 +0200
+++ b/client/src/components/gauge/HydrologicalConditions.vue	Fri Apr 26 11:01:45 2019 +0200
@@ -38,88 +38,6 @@
   </div>
 </template>
 
-<style lang="sass" scoped>
-.diagram-container
-  /deep/
-    .hide
-      opacity: 0
-    .line
-      clip-path: url(#clip)
-      stroke-width: 2
-      fill: none
-      &.mean
-        stroke: red
-      &.median
-        stroke: black
-      &.q25
-        stroke: orange
-      &.q75
-        stroke: purple
-    .area
-      clip-path: url(#clip)
-      stroke: none
-      fill: lightsteelblue
-
-    .hdc-line,
-    .ldc-line,
-    .mw-line
-      stroke-width: 1
-      fill: none
-      clip-path: url(#clip)
-    .hdc-line
-      stroke: red
-    .ldc-line
-      stroke: green
-    .mw-line
-      stroke: grey
-    .ref-waterlevel-label
-      font-size: 11px
-      fill: #999
-    .now-line
-      stroke: #999
-      stroke-width: 1
-      stroke-dasharray: 5, 5
-      clip-path: url(#clip)
-    .now-line-label
-      font-size: 11px
-      fill: #999
-
-    .tick
-      line
-        stroke-dasharray: 5
-        stroke: #ccc
-
-    .zoom
-      cursor: move
-      fill: none
-      pointer-events: all
-    .brush
-      .selection
-        stroke: none
-        fill-opacity: 0.2
-      .handle
-        stroke: rgba($color-info, 0.5)
-        fill: rgba($color-info, 0.5)
-
-    .chart-dots
-      clip-path: url(#clip)
-      .chart-dot
-        fill: black
-        stroke: black
-        pointer-events: none
-        opacity: 0
-        transition: opacity 0.1s
-    .chart-tooltip
-      opacity: 0
-      transition: opacity 0.3s
-      rect
-        fill: #fff
-        stroke: #ccc
-      text
-        fill: #666
-        font-size: 12px
-</style>
-
 <script>
 /* This is Free Software under GNU Affero General Public License v >= 3.0
  * without warranty, see README.md and license for details.
@@ -380,21 +298,21 @@
         .attr("fill", "none")
         .attr("pointer-events", "all");
       this.svg
-        .selectAll(".brush")
-        .selectAll(".selection")
+        .selectAll(".brush .selection")
         .attr("stroke", "none")
         .attr("fill-opacity", 0.2);
       this.svg
-        .selectAll(".brush")
-        .selectAll(".handle")
+        .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-dot")
+        .selectAll(".chart-dots .chart-dot")
+        .attr("fill", "black")
+        .attr("stroke", "black")
         .attr("stroke-opacity", 0)
+        .style("pointer-events", "none")
         .attr("fill-opacity", 0)
-        .attr("stroke", "steelblue")
-        .style("pointer-events", "none")
         .transition()
         .attr("fill-opacity", "0.1s");
       this.svg