diff client/src/components/gauge/Waterlevel.vue @ 2701:e622689d73bd

client: waterlevel diagram: use endpoint
author Markus Kottlaender <markus@intevation.de>
date Mon, 18 Mar 2019 15:43:03 +0100
parents 04b082a86d50
children f393fabfdd35
line wrap: on
line diff
--- a/client/src/components/gauge/Waterlevel.vue	Mon Mar 18 15:34:37 2019 +0100
+++ b/client/src/components/gauge/Waterlevel.vue	Mon Mar 18 15:43:03 2019 +0100
@@ -1,5 +1,11 @@
 <template>
-  <div class="flex-fill diagram-container"></div>
+  <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>
 </template>
 
 <style lang="sass" scoped>
@@ -105,11 +111,11 @@
   },
   methods: {
     drawDiagram() {
-      if (!this.selectedGauge || !this.waterlevels.length) return;
-
       // remove old diagram
       d3.select(".diagram-container svg").remove();
 
+      if (!this.selectedGauge || !this.waterlevels.length) return;
+
       // get HDC/LDC/MW of the gauge
       let refWaterLevels = JSON.parse(
         this.selectedGauge.properties.reference_water_levels