Mercurial > gemma

changeset 2839:162804509c3e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: spuc7/8: added legends
author Markus Kottlaender <markus@intevation.de>
date Wed, 27 Mar 2019 19:22:39 +0100
parents 522ed5eb449c
children 503a73e9a755
files client/src/components/DiagramLegend.vue client/src/components/gauge/HydrologicalConditions.vue client/src/components/gauge/Waterlevel.vue
diffstat 3 files changed, 81 insertions(+), 14 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/DiagramLegend.vue	Wed Mar 27 19:15:25 2019 +0100
+++ b/client/src/components/DiagramLegend.vue	Wed Mar 27 19:22:39 2019 +0100
@@ -1,10 +1,15 @@
 <template>
-  <div :class="['border-right', { collapsed }]" id="diagram-legend">
+  <div :class="['d-flex border-right', { collapsed }]" id="diagram-legend">
     <span class="box-control toggle" @click="collapsed = !collapsed">
       <font-awesome-icon icon="angle-left" fixed-width />
     </span>
-    <div style="overflow: hidden">
-      <slot />
+    <div
+      class="d-flex align-items-center justify-content-center w-100"
+      style="overflow: hidden"
+    >
+      <div class="text-left">
+        <slot />
+      </div>
     </div>
   </div>
 </template>
@@ -12,7 +17,7 @@
 <style lang="sass" scoped>
 #diagram-legend
   position: relative
-  width: 280px
+  width: 200px
   .toggle
     margin-left: 0
     position: absolute
@@ -26,6 +31,14 @@
       left: 0.25rem
       svg
         transform: rotateY(180deg)
+  .legend
+    margin: 10px 0
+    span
+      vertical-align: middle
+      display: inline-block
+      width: 15px
+      height: 15px
+      border-radius: 50%
 </style>
 
 <script>
--- a/client/src/components/gauge/HydrologicalConditions.vue	Wed Mar 27 19:15:25 2019 +0100
+++ b/client/src/components/gauge/HydrologicalConditions.vue	Wed Mar 27 19:22:39 2019 +0100
@@ -1,9 +1,35 @@
 <template>
-  <div
-    class="d-flex flex-fill justify-content-center align-items-center diagram-container"
-  >
-    <div v-if="!longtermWaterlevels.length">
-      <translate>No data available.</translate>
+  <div class="d-flex flex-fill">
+    <DiagramLegend>
+      <div class="legend">
+        <span style="background-color: red"></span>
+        {{ yearCompare }}
+      </div>
+      <div class="legend">
+        <span style="background-color: orange"></span> Q25%
+      </div>
+      <div class="legend">
+        <span style="background-color: black"></span> Median
+      </div>
+      <div class="legend">
+        <span style="background-color: purple"></span> Q75%
+      </div>
+      <div class="legend"><span style="background-color: red"></span> HDC</div>
+      <div class="legend">
+        <span style="background-color: green"></span> LDC
+      </div>
+      <div class="legend"><span style="background-color: grey"></span> MW</div>
+      <div class="legend">
+        <span style="background-color: lightsteelblue"></span>
+        Amplitude
+      </div>
+    </DiagramLegend>
+    <div
+      class="d-flex flex-fill justify-content-center align-items-center diagram-container"
+    >
+      <div v-if="!longtermWaterlevels.length">
+        <translate>No data available.</translate>
+      </div>
     </div>
   </div>
 </template>
@@ -111,6 +137,9 @@
 import { startOfYear, endOfYear } from "date-fns";
 
 export default {
+  components: {
+    DiagramLegend: () => import("@/components/DiagramLegend")
+  },
   data() {
     return {
       svg: null,
--- a/client/src/components/gauge/Waterlevel.vue	Wed Mar 27 19:15:25 2019 +0100
+++ b/client/src/components/gauge/Waterlevel.vue	Wed Mar 27 19:22:39 2019 +0100
@@ -1,9 +1,31 @@
 <template>
-  <div
-    class="d-flex flex-fill justify-content-center align-items-center diagram-container"
-  >
-    <div v-if="!waterlevels.length">
-      <translate>No data available.</translate>
+  <div class="d-flex flex-fill">
+    <DiagramLegend>
+      <div class="legend">
+        <span style="background-color: steelblue"></span> Waterlevel
+      </div>
+      <div class="legend">
+        <span
+          style="width: 5px; height: 5px; background-color: rgba(70, 130, 180, 0.6); border: solid 5px rgba(70, 130, 180, 0.2); background-clip: padding-box; box-sizing: content-box;"
+        ></span>
+        Prediction
+      </div>
+      <div class="legend">
+        <span style="background-color: rgba(0, 255, 0, 0.1)"></span> Navigable
+        Range
+      </div>
+      <div class="legend"><span style="background-color: red"></span> HDC</div>
+      <div class="legend">
+        <span style="background-color: green"></span> LDC
+      </div>
+      <div class="legend"><span style="background-color: grey"></span> MW</div>
+    </DiagramLegend>
+    <div
+      class="d-flex flex-fill justify-content-center align-items-center diagram-container"
+    >
+      <div v-if="!waterlevels.length">
+        <translate>No data available.</translate>
+      </div>
     </div>
   </div>
 </template>
@@ -132,6 +154,9 @@
 const d3 = Object.assign(d3Base, { lineChunked });
 
 export default {
+  components: {
+    DiagramLegend: () => import("@/components/DiagramLegend")
+  },
   data() {
     return {
       svg: null,