Mercurial > gemma

comparison client/src/components/fairway/AvailableFairwayDepth.vue @ 3180:429e28295902

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
available_fairway_depth: implement reactivity
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 07 May 2019 14:06:23 +0200
parents 8159bd2aaf93
children 1ba2a7d22fbb
comparison
equal deleted inserted replaced
3179:6ddd3755350c 3180:429e28295902
1 <template> 1 <template>
2 <div> 2 <div>
3 <h1>Available Fairway Depth</h1> 3 <h1>Available Fairway Depth</h1>
4 <UISpinnerOverlay v-if="loading" /> 4 <UISpinnerOverlay v-if="loading" />
5 <div class="d-flex flex-row"> 5 <div class="d-flex flex-row">
6 <div class="ml-3 mr-auto">
7 <ul>
8 <li v-for="(entry, index) in legend" :key="index">{{ entry }}</li>
9 </ul>
10 </div>
11 <div class="d-flex flex-column mr-auto"> 6 <div class="d-flex flex-column mr-auto">
12 <div class="d-flex flex-row"> 7 <div class="d-flex flex-row">
13 <div class="mr-3 ml-auto"> 8 <div class="mr-3 my-auto ml-auto">
14 <select class="mr-3"> 9 <select class="form-control mr-3">
15 <option>Monthly</option> 10 <option>Monthly</option>
16 <option>Quaterly</option> 11 <option>Quaterly</option>
17 <option>Yearly</option> 12 <option>Yearly</option>
18 </select> 13 </select>
19 </div> 14 </div>
20 <div class="mr-3"> 15 <div class="d-flex flex-row mr-3">
21 <label for="from" class="mr-3"><translate>from</translate></label 16 <label for="from" class="my-auto mr-3"
22 ><input /> 17 ><translate>from</translate></label
18 ><input class="form-control" type="date" />
23 </div> 19 </div>
24 <div class="mr-auto"> 20 <div class="d-flex flex-row mr-auto">
25 <label for="to" class="mr-3"><translate>to</translate></label 21 <label for="to" class="my-auto mr-3"
26 ><input /> 22 ><translate>to</translate></label
23 ><input class="form-control" type="date" />
27 </div> 24 </div>
28 </div> 25 </div>
29 <div class="diagram-container"></div> 26 <div :id="containerId" class="diagram-container"></div>
30 </div> 27 </div>
31 </div> 28 </div>
32 </div> 29 </div>
33 </template> 30 </template>
34 31
50 * Markus Kottländer <markus.kottlaender@intevation.de> 47 * Markus Kottländer <markus.kottlaender@intevation.de>
51 */ 48 */
52 import * as d3 from "d3"; 49 import * as d3 from "d3";
53 import app from "@/main"; 50 import app from "@/main";
54 import { displayError } from "@/lib/errors"; 51 import { displayError } from "@/lib/errors";
52 import debounce from "debounce";
55 import { HTTP } from "@/lib/http"; 53 import { HTTP } from "@/lib/http";
54 import { diagram } from "@/lib/mixins";
56 55
57 const MOCKDATA = `#label,# >= LDC [h],# < 200.00 [h],# >= 200.00 [h],# >= 230.00 [h],# >= 250.00 [h] 56 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 57 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 58 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 59 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 60 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`; 61 05-2019, 30.000,0.000,0.000,0.000, 30.000`;
63 62
64 export default { 63 export default {
64 mixins: [diagram],
65 data() { 65 data() {
66 return { 66 return {
67 containerId: "availablefairwaydepth",
67 loading: false, 68 loading: false,
68 fwData: null, 69 fwData: null,
69 width: 1000, 70 width: 1000,
70 height: 600, 71 height: 600,
71 paddingRight: 100, 72 paddingRight: 100,
74 scalePaddingLeft: 50, 75 scalePaddingLeft: 50,
75 paddingTop: 10, 76 paddingTop: 10,
76 legend: "", 77 legend: "",
77 diagram: null, 78 diagram: null,
78 yScale: null, 79 yScale: null,
79 barsWidth: 60 80 barsWidth: 60,
81 dimensions: null
80 }; 82 };
81 }, 83 },
84 created() {
85 window.addEventListener("resize", debounce(this.drawDiagram), 100);
86 },
82 mounted() { 87 mounted() {
83 this.yScale = d3
84 .scaleLinear()
85 .domain([-33, 33])
86 .range([this.height - 30, 0]);
87 this.loadData(); 88 this.loadData();
88 }, 89 },
89 computed: { 90 computed: {
90 availability() { 91 availability() {
91 return this.plainAvailability; 92 return this.plainAvailability;
135 message: `${status}: ${data.message || data}` 136 message: `${status}: ${data.message || data}`
136 }); 137 });
137 }); 138 });
138 }, 139 },
139 drawDiagram() { 140 drawDiagram() {
141 this.dimensions = this.getDimensions();
142 this.yScale = d3
143 .scaleLinear()
144 .domain([-33, 33])
145 .range([this.dimensions.mainHeight - 30, 0]);
140 d3.select(".diagram-container svg").remove(); 146 d3.select(".diagram-container svg").remove();
141 this.generateDiagramContainer(); 147 this.generateDiagramContainer();
142 this.drawBars(); 148 this.drawBars();
143 this.drawScaleLabel(); 149 this.drawScaleLabel();
144 this.drawScale(); 150 this.drawScale();
145 }, 151 },
146 generateDiagramContainer() { 152 generateDiagramContainer() {
147 const diagram = d3 153 const diagram = d3
148 .select(".diagram-container") 154 .select(".diagram-container")
149 .append("svg") 155 .append("svg")
150 .attr("width", this.width) 156 .attr("width", this.dimensions.width)
151 .attr("height", this.height); 157 .attr("height", this.dimensions.mainHeight);
152 this.diagram = diagram 158 this.diagram = diagram
153 .append("g") 159 .append("g")
154 .attr("transform", `translate(0 ${this.paddingTop})`); 160 .attr("transform", `translate(0 ${this.paddingTop})`);
155 }, 161 },
156 drawBars() { 162 drawBars() {
214 .append("text") 220 .append("text")
215 .text(d => d.label) 221 .text(d => d.label)
216 .attr("y", this.yScale(0) + this.labelPaddingTop); 222 .attr("y", this.yScale(0) + this.labelPaddingTop);
217 }, 223 },
218 drawScaleLabel() { 224 drawScaleLabel() {
219 const center = this.height / 2; 225 const center = this.dimensions.mainHeight / 2;
220 this.diagram 226 this.diagram
221 .append("text") 227 .append("text")
222 .text(this.$options.LEGEND) 228 .text(this.$options.LEGEND)
223 .attr("text-anchor", "middle") 229 .attr("text-anchor", "middle")
224 .attr("x", 0) 230 .attr("x", 0)