Mercurial > gemma

changeset 3185:505414dfe3e7

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
available_fairway_depth: move statistic dialog to store
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 07 May 2019 17:38:25 +0200
parents 1ba2a7d22fbb
children 928cdc06ff37
files client/src/components/Statistics.vue client/src/components/fairway/AvailableFairwayDepth.vue client/src/store/diagram.js
diffstat 3 files changed, 84 insertions(+), 66 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/Statistics.vue	Tue May 07 16:59:11 2019 +0200
+++ b/client/src/components/Statistics.vue	Tue May 07 17:38:25 2019 +0200
@@ -44,6 +44,28 @@
             >
           </select>
         </div>
+        <div class="d-flex flex-column mt-3">
+          <div class="d-flex flex-column mb-3">
+            <small class="my-auto text-muted"
+              ><translate>Type</translate></small
+            >
+            <select class="form-control">
+              <option>Monthly</option>
+              <option>Quaterly</option>
+              <option>Yearly</option>
+            </select>
+          </div>
+          <div class="d-flex flex-column mb-3">
+            <small for="from" class="my-auto text-muted"
+              ><translate>Date from</translate></small
+            ><input id="from" class="form-control" type="date" />
+          </div>
+          <div class="d-flex flex-column">
+            <small for="to" class="my-auto text-muted"
+              ><translate>Date to</translate></small
+            ><input id="to" class="form-control" type="date" />
+          </div>
+        </div>
         <div class="mt-3">
           <button
             @click="openFairwaydepth"
--- a/client/src/components/fairway/AvailableFairwayDepth.vue	Tue May 07 16:59:11 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Tue May 07 17:38:25 2019 +0200
@@ -2,29 +2,8 @@
   <div class="d-flex flex-column flex-fill">
     <UIBoxHeader icon="chart-area" :title="title" :closeCallback="close" />
     <UISpinnerOverlay v-if="loading" />
-    <div class="mt-3 d-flex flex-row">
-      <div class="d-flex flex-column mr-auto">
-        <div class="d-flex flex-row">
-          <div class="mr-3 my-auto ml-auto">
-            <select class="form-control mr-3">
-              <option>Monthly</option>
-              <option>Quaterly</option>
-              <option>Yearly</option>
-            </select>
-          </div>
-          <div class="d-flex flex-row mr-3">
-            <label for="from" class="my-auto mr-3"
-              ><translate>from</translate></label
-            ><input class="form-control" type="date" />
-          </div>
-          <div class="d-flex flex-row mr-auto">
-            <label for="to" class="my-auto mr-3"
-              ><translate>to</translate></label
-            ><input class="form-control" type="date" />
-          </div>
-        </div>
-        <div :id="containerId" class="diagram-container"></div>
-      </div>
+    <div class="mt-3 d-flex flex-row my-auto">
+      <div :id="containerId" class="diagram-container"></div>
     </div>
   </div>
 </template>
@@ -50,24 +29,15 @@
 import app from "@/main";
 import { displayError } from "@/lib/errors";
 import debounce from "debounce";
-import { HTTP } from "@/lib/http";
 import { diagram } from "@/lib/mixins";
 import { mapState } from "vuex";
 
-const MOCKDATA = `#label,# >= LDC [h],# < 200.00 [h],# >= 200.00 [h],# >= 230.00 [h],# >= 250.00 [h]
-01-2019, 22.000,1.000, 4.000,6.000, 20.000
-02-2019, 24.000,0.000,0.000,0.000, 23.000
-03-2019, 30.000,0.000,0.000,0.000, 30.000
-04-2019, 30.000,0.000,0.000,0.000, 30.000
-05-2019, 30.000,0.000,0.000,0.000, 30.000`;
-
 export default {
   mixins: [diagram],
   data() {
     return {
       containerId: "availablefairwaydepth",
       loading: false,
-      fwData: null,
       width: 1000,
       height: 600,
       paddingRight: 100,
@@ -89,7 +59,7 @@
     this.loadData();
   },
   computed: {
-    ...mapState("diagram", ["selectedFairwayAvailabilityFeature"]),
+    ...mapState("diagram", ["selectedFairwayAvailabilityFeature", "fwData"]),
     availability() {
       return this.plainAvailability;
     },
@@ -104,40 +74,12 @@
     close() {
       this.$store.commit("application/paneSetup", "DEFAULT");
     },
-    prepareLegend(header) {
-      const headerEntries = header.split(",");
-      headerEntries.shift();
-      return headerEntries.map(x => {
-        return x.split("#")[1].trim();
-      });
-    },
-    prepare(data) {
-      const csv = data.split("\n");
-      this.legend = this.prepareLegend(csv.shift());
-      let transformed = csv.map(e => {
-        const result = e.split(",");
-        const label = result.shift();
-        const ldc = result.shift();
-        const highestLevel = result.pop();
-        return {
-          label: label,
-          ldc: ldc,
-          highestLevel: highestLevel,
-          lowerLevels: result
-        };
-      });
-      this.fwData = transformed;
-    },
     loadData() {
-      const URL = `/data/bottleneck/fairway-depth/${
-        this.featureName
-      }?from=2019-01-01T15:04:05%2b00:00&to=2019-05-02T15:04:05%2b07:00&mode=monthly`;
-      HTTP.get(URL, {
-        headers: { "X-Gemma-Auth": localStorage.getItem("token") }
-      })
+      this.$store
+        .dispatch("diagram/loadAvailableFairwayDepth", {
+          featureName: this.featureName
+        })
         .then(() => {
-          // const { data } = response;
-          this.prepare(MOCKDATA);
           this.drawDiagram();
         })
         .catch(error => {
--- a/client/src/store/diagram.js	Tue May 07 16:59:11 2019 +0200
+++ b/client/src/store/diagram.js	Tue May 07 17:38:25 2019 +0200
@@ -12,9 +12,20 @@
  * Thomas Junk <thomas.junk@intevation.de>
  */
 
+import { HTTP } from "@/lib/http";
+
+const MOCKDATA = `#label,# >= LDC [h],# < 200.00 [h],# >= 200.00 [h],# >= 230.00 [h],# >= 250.00 [h]
+01-2019, 22.000,1.000, 4.000,6.000, 20.000
+02-2019, 24.000,0.000,0.000,0.000, 23.000
+03-2019, 30.000,0.000,0.000,0.000, 30.000
+04-2019, 30.000,0.000,0.000,0.000, 30.000
+05-2019, 30.000,0.000,0.000,0.000, 30.000`;
+
 const init = () => {
   return {
-    selectedFairwayAvailabilityFeature: null
+    selectedFairwayAvailabilityFeature: null,
+    fwData: null,
+    legend: null
   };
 };
 
@@ -25,6 +36,49 @@
   mutations: {
     setSelectedFairwayAvailability: (state, feature) => {
       state.selectedFairwayAvailabilityFeature = feature;
+    },
+    setFwData: (state, fwData) => {
+      state.fwData = fwData;
+    },
+    setLegend: (state, header) => {
+      const headerEntries = header.split(",");
+      headerEntries.shift();
+      state.legend = headerEntries.map(x => {
+        return x.split("#")[1].trim();
+      });
+    }
+  },
+  actions: {
+    loadAvailableFairwayDepth: ({ commit }, options) => {
+      return new Promise((resolve, reject) => {
+        const { featureName } = options;
+        const URL = `/data/bottleneck/fairway-depth/${featureName}?from=2019-01-01T15:04:05%2b00:00&to=2019-05-02T15:04:05%2b07:00&mode=monthly`;
+        HTTP.get(URL, {
+          headers: { "X-Gemma-Auth": localStorage.getItem("token") }
+        })
+          .then(response => {
+            const data = MOCKDATA;
+            const csv = data.split("\n");
+            commit("setLegend", csv.shift());
+            let transformed = csv.map(e => {
+              const result = e.split(",");
+              const label = result.shift();
+              const ldc = result.shift();
+              const highestLevel = result.pop();
+              return {
+                label: label,
+                ldc: ldc,
+                highestLevel: highestLevel,
+                lowerLevels: result
+              };
+            });
+            commit("setFwData", transformed);
+            resolve(response);
+          })
+          .catch(error => {
+            reject(error);
+          });
+      });
     }
   }
 };