Mercurial > gemma

diff client/src/components/gauge/HydrologicalConditions.vue @ 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 4a1211727d5f
children 37c2a73ed001
line wrap: on
line diff
--- 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,