Mercurial > gemma
changeset 3111:f269bd001e78
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