Mercurial > gemma

comparison client/src/components/fairway/AvailableFairwayDepth.vue @ 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 c0cd5dfec153
comparison
equal deleted inserted replaced
3184:1ba2a7d22fbb 3185:505414dfe3e7
1 <template> 1 <template>
2 <div class="d-flex flex-column flex-fill"> 2 <div class="d-flex flex-column flex-fill">
3 <UIBoxHeader icon="chart-area" :title="title" :closeCallback="close" /> 3 <UIBoxHeader icon="chart-area" :title="title" :closeCallback="close" />
4 <UISpinnerOverlay v-if="loading" /> 4 <UISpinnerOverlay v-if="loading" />
5 <div class="mt-3 d-flex flex-row"> 5 <div class="mt-3 d-flex flex-row my-auto">
6 <div class="d-flex flex-column mr-auto"> 6 <div :id="containerId" class="diagram-container"></div>
7 <div class="d-flex flex-row">
8 <div class="mr-3 my-auto ml-auto">
9 <select class="form-control mr-3">
10 <option>Monthly</option>
11 <option>Quaterly</option>
12 <option>Yearly</option>
13 </select>
14 </div>
15 <div class="d-flex flex-row mr-3">
16 <label for="from" class="my-auto mr-3"
17 ><translate>from</translate></label
18 ><input class="form-control" type="date" />
19 </div>
20 <div class="d-flex flex-row mr-auto">
21 <label for="to" class="my-auto mr-3"
22 ><translate>to</translate></label
23 ><input class="form-control" type="date" />
24 </div>
25 </div>
26 <div :id="containerId" class="diagram-container"></div>
27 </div>
28 </div> 7 </div>
29 </div> 8 </div>
30 </template> 9 </template>
31 10
32 <style></style> 11 <style></style>
48 */ 27 */
49 import * as d3 from "d3"; 28 import * as d3 from "d3";
50 import app from "@/main"; 29 import app from "@/main";
51 import { displayError } from "@/lib/errors"; 30 import { displayError } from "@/lib/errors";
52 import debounce from "debounce"; 31 import debounce from "debounce";
53 import { HTTP } from "@/lib/http";
54 import { diagram } from "@/lib/mixins"; 32 import { diagram } from "@/lib/mixins";
55 import { mapState } from "vuex"; 33 import { mapState } from "vuex";
56
57 const MOCKDATA = `#label,# >= LDC [h],# < 200.00 [h],# >= 200.00 [h],# >= 230.00 [h],# >= 250.00 [h]
58 01-2019, 22.000,1.000, 4.000,6.000, 20.000
59 02-2019, 24.000,0.000,0.000,0.000, 23.000
60 03-2019, 30.000,0.000,0.000,0.000, 30.000
61 04-2019, 30.000,0.000,0.000,0.000, 30.000
62 05-2019, 30.000,0.000,0.000,0.000, 30.000`;
63 34
64 export default { 35 export default {
65 mixins: [diagram], 36 mixins: [diagram],
66 data() { 37 data() {
67 return { 38 return {
68 containerId: "availablefairwaydepth", 39 containerId: "availablefairwaydepth",
69 loading: false, 40 loading: false,
70 fwData: null,
71 width: 1000, 41 width: 1000,
72 height: 600, 42 height: 600,
73 paddingRight: 100, 43 paddingRight: 100,
74 spaceBetween: 80, 44 spaceBetween: 80,
75 labelPaddingTop: 15, 45 labelPaddingTop: 15,
87 }, 57 },
88 mounted() { 58 mounted() {
89 this.loadData(); 59 this.loadData();
90 }, 60 },
91 computed: { 61 computed: {
92 ...mapState("diagram", ["selectedFairwayAvailabilityFeature"]), 62 ...mapState("diagram", ["selectedFairwayAvailabilityFeature", "fwData"]),
93 availability() { 63 availability() {
94 return this.plainAvailability; 64 return this.plainAvailability;
95 }, 65 },
96 title() { 66 title() {
97 return `Available Fairway Depth: ${this.featureName}`; 67 return `Available Fairway Depth: ${this.featureName}`;
102 }, 72 },
103 methods: { 73 methods: {
104 close() { 74 close() {
105 this.$store.commit("application/paneSetup", "DEFAULT"); 75 this.$store.commit("application/paneSetup", "DEFAULT");
106 }, 76 },
107 prepareLegend(header) {
108 const headerEntries = header.split(",");
109 headerEntries.shift();
110 return headerEntries.map(x => {
111 return x.split("#")[1].trim();
112 });
113 },
114 prepare(data) {
115 const csv = data.split("\n");
116 this.legend = this.prepareLegend(csv.shift());
117 let transformed = csv.map(e => {
118 const result = e.split(",");
119 const label = result.shift();
120 const ldc = result.shift();
121 const highestLevel = result.pop();
122 return {
123 label: label,
124 ldc: ldc,
125 highestLevel: highestLevel,
126 lowerLevels: result
127 };
128 });
129 this.fwData = transformed;
130 },
131 loadData() { 77 loadData() {
132 const URL = `/data/bottleneck/fairway-depth/${ 78 this.$store
133 this.featureName 79 .dispatch("diagram/loadAvailableFairwayDepth", {
134 }?from=2019-01-01T15:04:05%2b00:00&to=2019-05-02T15:04:05%2b07:00&mode=monthly`; 80 featureName: this.featureName
135 HTTP.get(URL, { 81 })
136 headers: { "X-Gemma-Auth": localStorage.getItem("token") }
137 })
138 .then(() => { 82 .then(() => {
139 // const { data } = response;
140 this.prepare(MOCKDATA);
141 this.drawDiagram(); 83 this.drawDiagram();
142 }) 84 })
143 .catch(error => { 85 .catch(error => {
144 console.log(error); 86 console.log(error);
145 const { status, data } = error.response; 87 const { status, data } = error.response;