Mercurial > gemma
annotate client/src/components/fairway/AvailableFairwayDepth.vue @ 3279:215173f62900
available_fairway_depth: improve legend layout
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Thu, 16 May 2019 09:24:50 +0200 |
parents | 050e72ce5cf7 |
children | 8fb81b45085f |
rev | line source |
---|---|
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
1 <template> |
3184
1ba2a7d22fbb
available_fairway_depth: display selected feature
Thomas Junk <thomas.junk@intevation.de>
parents:
3180
diff
changeset
|
2 <div class="d-flex flex-column flex-fill"> |
1ba2a7d22fbb
available_fairway_depth: display selected feature
Thomas Junk <thomas.junk@intevation.de>
parents:
3180
diff
changeset
|
3 <UIBoxHeader icon="chart-area" :title="title" :closeCallback="close" /> |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
4 <UISpinnerOverlay v-if="loading" /> |
3279
215173f62900
available_fairway_depth: improve legend layout
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3273
diff
changeset
|
5 <div class="d-flex flex-fill"> |
215173f62900
available_fairway_depth: improve legend layout
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3273
diff
changeset
|
6 <DiagramLegend> |
215173f62900
available_fairway_depth: improve legend layout
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3273
diff
changeset
|
7 <div v-for="(entry, index) in legend" :key="index" class="legend"> |
215173f62900
available_fairway_depth: improve legend layout
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3273
diff
changeset
|
8 <span |
215173f62900
available_fairway_depth: improve legend layout
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3273
diff
changeset
|
9 :style=" |
215173f62900
available_fairway_depth: improve legend layout
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3273
diff
changeset
|
10 `${legendStyle( |
215173f62900
available_fairway_depth: improve legend layout
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3273
diff
changeset
|
11 index |
215173f62900
available_fairway_depth: improve legend layout
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3273
diff
changeset
|
12 )}; border-radius: 0; width: 40px; height: 20px;` |
215173f62900
available_fairway_depth: improve legend layout
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3273
diff
changeset
|
13 " |
215173f62900
available_fairway_depth: improve legend layout
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3273
diff
changeset
|
14 ></span> |
215173f62900
available_fairway_depth: improve legend layout
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3273
diff
changeset
|
15 {{ entry }} |
215173f62900
available_fairway_depth: improve legend layout
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3273
diff
changeset
|
16 </div> |
215173f62900
available_fairway_depth: improve legend layout
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3273
diff
changeset
|
17 <div> |
3267
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
18 <select |
3273
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
19 @change="applyChange" |
3267
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
20 v-model="form.template" |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
21 class="form-control d-block custom-select-sm w-100 mt-1" |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
22 > |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
23 <option |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
24 v-for="template in templates" |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
25 :value="template" |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
26 :key="template.name" |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
27 > |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
28 {{ template.name }} |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
29 </option> |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
30 </select> |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
31 <button |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
32 @click="downloadPDF" |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
33 type="button" |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
34 class="btn btn-sm btn-info d-block w-100 mt-1" |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
35 > |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
36 <translate>Export to PDF</translate> |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
37 </button> |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
38 </div> |
3279
215173f62900
available_fairway_depth: improve legend layout
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3273
diff
changeset
|
39 </DiagramLegend> |
3267
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
40 <div |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
41 ref="diagramContainer" |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
42 :id="containerId" |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
43 class="mx-auto my-auto diagram-container" |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
44 ></div> |
3135 | 45 </div> |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
46 </div> |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
47 </template> |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
48 |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
49 <style></style> |
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
50 |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
51 <script> |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
52 /* This is Free Software under GNU Affero General Public License v >= 3.0 |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
53 * without warranty, see README.md and license for details. |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
54 * |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
55 * SPDX-License-Identifier: AGPL-3.0-or-later |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
56 * License-Filename: LICENSES/AGPL-3.0.txt |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
57 * |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
58 * Copyright (C) 2018 by via donau |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
59 * – Österreichische Wasserstraßen-Gesellschaft mbH |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
60 * Software engineering by Intevation GmbH |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
61 * |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
62 * Author(s): |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
63 * Thomas Junk <thomas.junk@intevation.de> |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
64 * Markus Kottländer <markus.kottlaender@intevation.de> |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
65 */ |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
66 import * as d3 from "d3"; |
3135 | 67 import app from "@/main"; |
3180
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
68 import debounce from "debounce"; |
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
69 import { diagram } from "@/lib/mixins"; |
3184
1ba2a7d22fbb
available_fairway_depth: display selected feature
Thomas Junk <thomas.junk@intevation.de>
parents:
3180
diff
changeset
|
70 import { mapState } from "vuex"; |
3191
c0cd5dfec153
statistics: persist fields to vuex
Thomas Junk <thomas.junk@intevation.de>
parents:
3185
diff
changeset
|
71 import filters from "@/lib/filters.js"; |
3267
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
72 import jsPDF from "jspdf"; |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
73 import canvg from "canvg"; |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
74 import { pdfgen } from "@/lib/mixins"; |
3273
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
75 import { HTTP } from "@/lib/http"; |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
76 import { displayError } from "@/lib/errors"; |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
77 |
3213
b3a1ecdda797
available_fairway_depth: hours in days
Thomas Junk <thomas.junk@intevation.de>
parents:
3210
diff
changeset
|
78 const hoursInDays = x => x / 24; |
b3a1ecdda797
available_fairway_depth: hours in days
Thomas Junk <thomas.junk@intevation.de>
parents:
3210
diff
changeset
|
79 |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
80 export default { |
3267
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
81 mixins: [diagram, pdfgen], |
3279
215173f62900
available_fairway_depth: improve legend layout
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3273
diff
changeset
|
82 components: { |
215173f62900
available_fairway_depth: improve legend layout
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3273
diff
changeset
|
83 DiagramLegend: () => import("@/components/DiagramLegend") |
215173f62900
available_fairway_depth: improve legend layout
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3273
diff
changeset
|
84 }, |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
85 data() { |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
86 return { |
3180
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
87 containerId: "availablefairwaydepth", |
3134
ab00165540fe
available_fairway_depths: Component made visible
Thomas Junk <thomas.junk@intevation.de>
parents:
3131
diff
changeset
|
88 loading: false, |
3135 | 89 width: 1000, |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
90 height: 600, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
91 paddingRight: 100, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
92 spaceBetween: 80, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
93 labelPaddingTop: 15, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
94 scalePaddingLeft: 50, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
95 paddingTop: 10, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
96 diagram: null, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
97 yScale: null, |
3180
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
98 barsWidth: 60, |
3267
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
99 dimensions: null, |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
100 pdf: { |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
101 doc: null, |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
102 width: null, |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
103 height: null |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
104 }, |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
105 form: { |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
106 template: null |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
107 }, |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
108 templateData: null, |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
109 templates: [], |
3273
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
110 defaultTemplate: { |
3267
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
111 name: "Default", |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
112 properties: { |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
113 paperSize: "a4" |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
114 }, |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
115 elements: [ |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
116 { |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
117 type: "diagram", |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
118 position: "topleft", |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
119 offset: { x: 20, y: 60 }, |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
120 width: 290, |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
121 height: 100 |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
122 }, |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
123 { |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
124 type: "diagramtitle", |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
125 position: "topleft", |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
126 offset: { x: 20, y: 20 }, |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
127 fontsize: 20, |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
128 color: "steelblue" |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
129 }, |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
130 { |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
131 type: "diagramlegend", |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
132 position: "topleft", |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
133 offset: { x: 30, y: 160 }, |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
134 color: "black" |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
135 } |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
136 ] |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
137 } |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
138 }; |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
139 }, |
3180
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
140 created() { |
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
141 window.addEventListener("resize", debounce(this.drawDiagram), 100); |
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
142 }, |
3134
ab00165540fe
available_fairway_depths: Component made visible
Thomas Junk <thomas.junk@intevation.de>
parents:
3131
diff
changeset
|
143 mounted() { |
3191
c0cd5dfec153
statistics: persist fields to vuex
Thomas Junk <thomas.junk@intevation.de>
parents:
3185
diff
changeset
|
144 this.drawDiagram(); |
3273
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
145 this.templates[0] = this.defaultTemplate; |
3267
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
146 this.form.template = this.templates[0]; |
3273
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
147 this.templateData = this.form.template; |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
148 HTTP.get("/templates/diagram", { |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
149 headers: { |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
150 "X-Gemma-Auth": localStorage.getItem("token"), |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
151 "Content-type": "text/xml; charset=UTF-8" |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
152 } |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
153 }) |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
154 .then(response => { |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
155 if (response.data.length) { |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
156 this.templates = response.data; |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
157 this.form.template = this.templates[0]; |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
158 this.templates[this.templates.length] = this.defaultTemplate; |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
159 this.applyChange(); |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
160 } |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
161 }) |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
162 .catch(e => { |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
163 const { status, data } = e.response; |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
164 displayError({ |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
165 title: this.$gettext("Backend Error"), |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
166 message: `${status}: ${data.message || data}` |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
167 }); |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
168 }); |
3134
ab00165540fe
available_fairway_depths: Component made visible
Thomas Junk <thomas.junk@intevation.de>
parents:
3131
diff
changeset
|
169 }, |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
170 computed: { |
3210
66e90b48387a
available_fairway-depth: store refactored
Thomas Junk <thomas.junk@intevation.de>
parents:
3192
diff
changeset
|
171 ...mapState("fairwayavailability", [ |
3191
c0cd5dfec153
statistics: persist fields to vuex
Thomas Junk <thomas.junk@intevation.de>
parents:
3185
diff
changeset
|
172 "selectedFairwayAvailabilityFeature", |
c0cd5dfec153
statistics: persist fields to vuex
Thomas Junk <thomas.junk@intevation.de>
parents:
3185
diff
changeset
|
173 "fwData", |
c0cd5dfec153
statistics: persist fields to vuex
Thomas Junk <thomas.junk@intevation.de>
parents:
3185
diff
changeset
|
174 "from", |
c0cd5dfec153
statistics: persist fields to vuex
Thomas Junk <thomas.junk@intevation.de>
parents:
3185
diff
changeset
|
175 "to", |
3216
ee6a4e8af766
available_fairway_depth: legend POC
Thomas Junk <thomas.junk@intevation.de>
parents:
3213
diff
changeset
|
176 "frequency", |
ee6a4e8af766
available_fairway_depth: legend POC
Thomas Junk <thomas.junk@intevation.de>
parents:
3213
diff
changeset
|
177 "legend" |
3191
c0cd5dfec153
statistics: persist fields to vuex
Thomas Junk <thomas.junk@intevation.de>
parents:
3185
diff
changeset
|
178 ]), |
c0cd5dfec153
statistics: persist fields to vuex
Thomas Junk <thomas.junk@intevation.de>
parents:
3185
diff
changeset
|
179 fromDate() { |
c0cd5dfec153
statistics: persist fields to vuex
Thomas Junk <thomas.junk@intevation.de>
parents:
3185
diff
changeset
|
180 return this.from; |
c0cd5dfec153
statistics: persist fields to vuex
Thomas Junk <thomas.junk@intevation.de>
parents:
3185
diff
changeset
|
181 }, |
c0cd5dfec153
statistics: persist fields to vuex
Thomas Junk <thomas.junk@intevation.de>
parents:
3185
diff
changeset
|
182 toDate() { |
c0cd5dfec153
statistics: persist fields to vuex
Thomas Junk <thomas.junk@intevation.de>
parents:
3185
diff
changeset
|
183 return this.to; |
c0cd5dfec153
statistics: persist fields to vuex
Thomas Junk <thomas.junk@intevation.de>
parents:
3185
diff
changeset
|
184 }, |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
185 availability() { |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
186 return this.plainAvailability; |
3184
1ba2a7d22fbb
available_fairway_depth: display selected feature
Thomas Junk <thomas.junk@intevation.de>
parents:
3180
diff
changeset
|
187 }, |
1ba2a7d22fbb
available_fairway_depth: display selected feature
Thomas Junk <thomas.junk@intevation.de>
parents:
3180
diff
changeset
|
188 title() { |
3191
c0cd5dfec153
statistics: persist fields to vuex
Thomas Junk <thomas.junk@intevation.de>
parents:
3185
diff
changeset
|
189 return `Available Fairway Depth: ${ |
c0cd5dfec153
statistics: persist fields to vuex
Thomas Junk <thomas.junk@intevation.de>
parents:
3185
diff
changeset
|
190 this.featureName |
c0cd5dfec153
statistics: persist fields to vuex
Thomas Junk <thomas.junk@intevation.de>
parents:
3185
diff
changeset
|
191 } (${filters.surveyDate(this.fromDate)} - ${filters.surveyDate( |
c0cd5dfec153
statistics: persist fields to vuex
Thomas Junk <thomas.junk@intevation.de>
parents:
3185
diff
changeset
|
192 this.toDate |
3268
1a97a079ef1b
client: diagram-template: fix typo
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3267
diff
changeset
|
193 )}) ${this.$gettext(this.frequency)}`; |
3184
1ba2a7d22fbb
available_fairway_depth: display selected feature
Thomas Junk <thomas.junk@intevation.de>
parents:
3180
diff
changeset
|
194 }, |
1ba2a7d22fbb
available_fairway_depth: display selected feature
Thomas Junk <thomas.junk@intevation.de>
parents:
3180
diff
changeset
|
195 featureName() { |
1ba2a7d22fbb
available_fairway_depth: display selected feature
Thomas Junk <thomas.junk@intevation.de>
parents:
3180
diff
changeset
|
196 return this.selectedFairwayAvailabilityFeature.properties.name; |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
197 } |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
198 }, |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
199 methods: { |
3273
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
200 applyChange() { |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
201 if (this.form.template.hasOwnProperty("properties")) { |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
202 this.templateData = this.defaultTemplate; |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
203 return; |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
204 } |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
205 if (this.form.template) { |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
206 HTTP.get("/templates/diagram/" + this.form.template.name, { |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
207 headers: { |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
208 "X-Gemma-Auth": localStorage.getItem("token"), |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
209 "Content-type": "text/xml; charset=UTF-8" |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
210 } |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
211 }) |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
212 .then(response => { |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
213 this.templateData = response.data.template_data; |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
214 }) |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
215 .catch(e => { |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
216 const { status, data } = e.response; |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
217 displayError({ |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
218 title: this.$gettext("Backend Error"), |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
219 message: `${status}: ${data.message || data}` |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
220 }); |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
221 }); |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
222 } |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
223 }, |
3267
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
224 downloadPDF() { |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
225 this.pdf.doc = new jsPDF( |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
226 "l", |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
227 "mm", |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
228 this.templateData.properties.paperSize |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
229 ); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
230 // pdf width and height in millimeter (landscape) |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
231 this.pdf.width = |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
232 this.templateData.properties.paperSize === "a3" ? 420 : 297; |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
233 this.pdf.height = |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
234 this.templateData.properties.paperSize === "a3" ? 297 : 210; |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
235 if (this.templateData) { |
3273
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
236 // default values if some are missing in template |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
237 let defaultFontSize = 11, |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
238 defaultColor = "black", |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
239 defaultWidth = 70, |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
240 defaultTextColor = "black", |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
241 defaultBorderColor = "white", |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
242 defaultBgColor = "white", |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
243 defaultRounding = 2, |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
244 defaultPadding = 2, |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
245 defaultOffset = { x: 0, y: 0 }; |
3267
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
246 this.templateData.elements.forEach(e => { |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
247 switch (e.type) { |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
248 case "diagram": { |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
249 this.addDiagram( |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
250 e.position, |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
251 e.offset || defaultOffset, |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
252 e.width, |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
253 e.height |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
254 ); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
255 break; |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
256 } |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
257 case "diagramtitle": { |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
258 this.addDiagramTitle( |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
259 e.position, |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
260 e.offset || defaultOffset, |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
261 e.fontsize || defaultFontSize, |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
262 e.color || defaultColor |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
263 ); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
264 break; |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
265 } |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
266 case "diagramlegend": { |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
267 this.addDiagramLegend( |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
268 e.position, |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
269 e.offset || defaultOffset, |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
270 e.color || defaultColor |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
271 ); |
3273
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
272 break; |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
273 } |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
274 case "text": { |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
275 this.addText( |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
276 e.position, |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
277 e.offset || defaultOffset, |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
278 e.width || defaultWidth, |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
279 e.fontsize || defaultFontSize, |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
280 e.color || defaultTextColor, |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
281 e.text |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
282 ); |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
283 break; |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
284 } |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
285 case "image": { |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
286 this.addImage( |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
287 e.url, |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
288 e.format, |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
289 e.position, |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
290 e.offset || defaultOffset, |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
291 e.width, |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
292 e.height |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
293 ); |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
294 break; |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
295 } |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
296 case "box": { |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
297 this.addBox( |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
298 e.position, |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
299 e.offset, |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
300 e.width, |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
301 e.height, |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
302 e.rounding === 0 || e.rounding ? e.rounding : defaultRounding, |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
303 e.color || defaultBgColor, |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
304 e.brcolor || defaultBorderColor |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
305 ); |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
306 break; |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
307 } |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
308 case "textbox": { |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
309 this.addTextBox( |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
310 e.position, |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
311 e.offset || defaultOffset, |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
312 e.width, |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
313 e.height, |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
314 e.rounding === 0 || e.rounding ? e.rounding : defaultRounding, |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
315 e.padding || defaultPadding, |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
316 e.fontsize || defaultFontSize, |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
317 e.color || defaultTextColor, |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
318 e.background || defaultBgColor, |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
319 e.text, |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
320 e.brcolor || defaultBorderColor |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
321 ); |
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
322 break; |
3267
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
323 } |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
324 } |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
325 }); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
326 } |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
327 this.pdf.doc.save(`Available Fairway Depth: ${this.featureName}`); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
328 }, |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
329 addDiagram(position, offset, width, height) { |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
330 let x = offset.x, |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
331 y = offset.y; |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
332 var svg = this.$refs.diagramContainer.innerHTML; |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
333 if (svg) { |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
334 svg = svg.replace(/\r?\n|\r/g, "").trim(); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
335 } |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
336 if (!width) { |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
337 width = this.templateData.properties.paperSize === "a3" ? 380 : 290; |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
338 } |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
339 if (!height) { |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
340 height = this.templateData.properties.paperSize === "a3" ? 130 : 100; |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
341 } |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
342 if (["topright", "bottomright"].indexOf(position) !== -1) { |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
343 x = this.pdf.width - offset.x - width; |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
344 } |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
345 if (["bottomright", "bottomleft"].indexOf(position) !== -1) { |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
346 y = this.pdf.height - offset.y - height; |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
347 } |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
348 var canvas = document.createElement("canvas"); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
349 canvas.width = window.innerWidth; |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
350 canvas.height = window.innerHeight / 2; |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
351 canvg(canvas, svg, { |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
352 ignoreMouse: true, |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
353 ignoreAnimation: true, |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
354 ignoreDimensions: true |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
355 }); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
356 var imgData = canvas.toDataURL("image/png"); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
357 this.pdf.doc.addImage(imgData, "PNG", x, y, width, height); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
358 }, |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
359 addDiagramTitle(position, offset, size, color) { |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
360 let x = offset.x, |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
361 y = offset.y; |
3273
050e72ce5cf7
client: diagram-template: add template elements and get templates from backend(fairway avalibilty)
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3268
diff
changeset
|
362 let title = `Available Fairway Depth: ${this.featureName}`; |
3267
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
363 let width = |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
364 (this.pdf.doc.getStringUnitWidth(title) * size) / (72 / 25.6) + |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
365 size / 2; |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
366 // if position is on the right, x needs to be calculate with pdf width and |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
367 // the size of the element |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
368 if (["topright", "bottomright"].indexOf(position) !== -1) { |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
369 x = this.pdf.width - offset.x - width; |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
370 } |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
371 if (["bottomright", "bottomleft"].indexOf(position) !== -1) { |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
372 y = this.pdf.height - offset.y - this.getTextHeight(1); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
373 } |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
374 this.pdf.doc.setTextColor(color); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
375 this.pdf.doc.setFontSize(size); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
376 this.pdf.doc.setFontStyle("bold"); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
377 this.pdf.doc.text(title, x, y, { baseline: "hanging" }); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
378 }, |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
379 addDiagramLegend(position, offset, color) { |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
380 let x = offset.x, |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
381 y = offset.y; |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
382 |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
383 this.pdf.doc.setFontSize(10); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
384 this.pdf.doc.setTextColor(color); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
385 this.pdf.doc.setDrawColor("rgb(255, 133, 94)"); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
386 this.pdf.doc.setFillColor("rgb(255, 133, 94)"); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
387 this.pdf.doc.rect(x, y, 8, 4, "FD"); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
388 this.pdf.doc.text(">= LDC [h]", x + 10, y + 3); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
389 |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
390 this.pdf.doc.setDrawColor("rgb(255, 66, 79)"); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
391 this.pdf.doc.setFillColor("rgb(255, 66, 79)"); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
392 this.pdf.doc.rect(x, y + 5, 8, 4, "FD"); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
393 this.pdf.doc.text("< 200.00 [h]", x + 10, y + 8); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
394 |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
395 this.pdf.doc.setDrawColor("rgb(255, 115, 124)"); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
396 this.pdf.doc.setFillColor("rgb(255, 115, 124)"); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
397 this.pdf.doc.rect(x, y + 10, 8, 4, "FD"); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
398 this.pdf.doc.text(">= 200.00 [h]", x + 10, y + 13); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
399 |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
400 this.pdf.doc.setDrawColor("rgb(255, 153, 160)"); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
401 this.pdf.doc.setFillColor("rgb(255, 153, 160)"); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
402 this.pdf.doc.rect(x, y + 15, 8, 4, "FD"); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
403 this.pdf.doc.text(">= 230.00 [h]", x + 10, y + 18); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
404 |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
405 this.pdf.doc.setDrawColor("rgb(45, 132, 179)"); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
406 this.pdf.doc.setFillColor("rgb(45, 132, 179)"); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
407 this.pdf.doc.rect(x, y + 20, 8, 4, "FD"); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
408 this.pdf.doc.text(">= 250.00 [h]", x + 10, y + 23); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
409 }, |
3239
a7d44d1ae57d
available_fairway_depth: legend
Thomas Junk <thomas.junk@intevation.de>
parents:
3235
diff
changeset
|
410 legendStyle(index) { |
a7d44d1ae57d
available_fairway_depth: legend
Thomas Junk <thomas.junk@intevation.de>
parents:
3235
diff
changeset
|
411 if (index == 0) return `background-color: ${this.$options.COLORS.LDC};`; |
a7d44d1ae57d
available_fairway_depth: legend
Thomas Junk <thomas.junk@intevation.de>
parents:
3235
diff
changeset
|
412 if (index < 4) |
a7d44d1ae57d
available_fairway_depth: legend
Thomas Junk <thomas.junk@intevation.de>
parents:
3235
diff
changeset
|
413 return `background-color: ${this.$options.COLORS.REST[index - 1]};`; |
a7d44d1ae57d
available_fairway_depth: legend
Thomas Junk <thomas.junk@intevation.de>
parents:
3235
diff
changeset
|
414 return `background-color: ${this.$options.COLORS.HIGHEST};`; |
a7d44d1ae57d
available_fairway_depth: legend
Thomas Junk <thomas.junk@intevation.de>
parents:
3235
diff
changeset
|
415 }, |
3184
1ba2a7d22fbb
available_fairway_depth: display selected feature
Thomas Junk <thomas.junk@intevation.de>
parents:
3180
diff
changeset
|
416 close() { |
1ba2a7d22fbb
available_fairway_depth: display selected feature
Thomas Junk <thomas.junk@intevation.de>
parents:
3180
diff
changeset
|
417 this.$store.commit("application/paneSetup", "DEFAULT"); |
1ba2a7d22fbb
available_fairway_depth: display selected feature
Thomas Junk <thomas.junk@intevation.de>
parents:
3180
diff
changeset
|
418 }, |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
419 drawDiagram() { |
3235
0c5a28ffe9ee
available_fairway_depth: flexible layouting options
Thomas Junk <thomas.junk@intevation.de>
parents:
3216
diff
changeset
|
420 this.dimensions = this.getDimensions({ |
0c5a28ffe9ee
available_fairway_depth: flexible layouting options
Thomas Junk <thomas.junk@intevation.de>
parents:
3216
diff
changeset
|
421 main: { top: 20, right: 20, bottom: 110, left: 200 } |
0c5a28ffe9ee
available_fairway_depth: flexible layouting options
Thomas Junk <thomas.junk@intevation.de>
parents:
3216
diff
changeset
|
422 }); |
3180
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
423 this.yScale = d3 |
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
424 .scaleLinear() |
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
425 .domain([-33, 33]) |
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
426 .range([this.dimensions.mainHeight - 30, 0]); |
3134
ab00165540fe
available_fairway_depths: Component made visible
Thomas Junk <thomas.junk@intevation.de>
parents:
3131
diff
changeset
|
427 d3.select(".diagram-container svg").remove(); |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
428 this.generateDiagramContainer(); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
429 this.drawBars(); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
430 this.drawScaleLabel(); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
431 this.drawScale(); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
432 }, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
433 generateDiagramContainer() { |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
434 const diagram = d3 |
3134
ab00165540fe
available_fairway_depths: Component made visible
Thomas Junk <thomas.junk@intevation.de>
parents:
3131
diff
changeset
|
435 .select(".diagram-container") |
ab00165540fe
available_fairway_depths: Component made visible
Thomas Junk <thomas.junk@intevation.de>
parents:
3131
diff
changeset
|
436 .append("svg") |
3180
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
437 .attr("width", this.dimensions.width) |
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
438 .attr("height", this.dimensions.mainHeight); |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
439 this.diagram = diagram |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
440 .append("g") |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
441 .attr("transform", `translate(0 ${this.paddingTop})`); |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
442 }, |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
443 drawBars() { |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
444 const everyBar = this.diagram |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
445 .selectAll("g") |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
446 .data(this.fwData) |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
447 .enter() |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
448 .append("g") |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
449 .attr("transform", (d, i) => { |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
450 const dx = this.paddingRight + i * this.spaceBetween; |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
451 return `translate(${dx})`; |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
452 }); |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
453 this.drawSingleBars(everyBar); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
454 this.drawLabelPerBar(everyBar); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
455 }, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
456 drawSingleBars(everyBar) { |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
457 this.drawLDC(everyBar); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
458 this.drawHighestLevel(everyBar); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
459 this.drawLowerLevels(everyBar); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
460 }, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
461 drawLowerLevels(everyBar) { |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
462 everyBar |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
463 .selectAll("g") |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
464 .data(d => d.lowerLevels.reverse()) |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
465 .enter() |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
466 .append("rect") |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
467 .attr("y", this.yScale(0)) |
3128
1610d3042bbb
fairway_availability: generative code fixed
Thomas Junk <thomas.junk@intevation.de>
parents:
3125
diff
changeset
|
468 .attr("height", d => { |
3213
b3a1ecdda797
available_fairway_depth: hours in days
Thomas Junk <thomas.junk@intevation.de>
parents:
3210
diff
changeset
|
469 return this.yScale(0) - this.yScale(hoursInDays(d)); |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
470 }) |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
471 .attr("width", this.barsWidth) |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
472 .attr("fill", (d, i) => { |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
473 return this.$options.COLORS.REST[i]; |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
474 }); |
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
475 }, |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
476 fnheight(name) { |
3213
b3a1ecdda797
available_fairway_depth: hours in days
Thomas Junk <thomas.junk@intevation.de>
parents:
3210
diff
changeset
|
477 return d => this.yScale(0) - this.yScale(hoursInDays(d[name])); |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
478 }, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
479 drawLDC(everyBar) { |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
480 const height = this.fnheight("ldc"); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
481 everyBar |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
482 .append("rect") |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
483 .attr("y", this.yScale(0)) |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
484 .attr("height", height) |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
485 .attr("width", this.barsWidth) |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
486 .attr("transform", d => `translate(0 ${-1 * height(d)})`) |
3216
ee6a4e8af766
available_fairway_depth: legend POC
Thomas Junk <thomas.junk@intevation.de>
parents:
3213
diff
changeset
|
487 .attr("fill", this.$options.COLORS.LDC) |
ee6a4e8af766
available_fairway_depth: legend POC
Thomas Junk <thomas.junk@intevation.de>
parents:
3213
diff
changeset
|
488 .attr("id", "ldc"); |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
489 }, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
490 drawHighestLevel(everyBar) { |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
491 const height = this.fnheight("highestLevel"); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
492 everyBar |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
493 .append("rect") |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
494 .attr("y", this.yScale(0)) |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
495 .attr("height", height) |
3216
ee6a4e8af766
available_fairway_depth: legend POC
Thomas Junk <thomas.junk@intevation.de>
parents:
3213
diff
changeset
|
496 .attr("width", this.barsWidth - 5) |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
497 .attr("transform", d => `translate(0 ${-1 * height(d)})`) |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
498 .attr("fill", this.$options.COLORS.HIGHEST); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
499 }, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
500 drawLabelPerBar(everyBar) { |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
501 everyBar |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
502 .append("text") |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
503 .text(d => d.label) |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
504 .attr("y", this.yScale(0) + this.labelPaddingTop); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
505 }, |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
506 drawScaleLabel() { |
3180
429e28295902
available_fairway_depth: implement reactivity
Thomas Junk <thomas.junk@intevation.de>
parents:
3153
diff
changeset
|
507 const center = this.dimensions.mainHeight / 2; |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
508 this.diagram |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
509 .append("text") |
3135 | 510 .text(this.$options.LEGEND) |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
511 .attr("text-anchor", "middle") |
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
512 .attr("x", 0) |
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
513 .attr("y", 0) |
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
514 .attr("dy", "1em") |
3135 | 515 .attr("transform", `translate(0, ${center}), rotate(-90)`); |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
516 }, |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
517 drawScale() { |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
518 const yAxis = d3.axisLeft().scale(this.yScale); |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
519 this.diagram |
3125
383720d8d98e
fairway_availability: generative code for diagram added
Thomas Junk <thomas.junk@intevation.de>
parents:
3033
diff
changeset
|
520 .append("g") |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
521 .attr("transform", `translate(${this.scalePaddingLeft})`) |
3267
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
522 .call(yAxis) |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
523 .selectAll(".tick text") |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
524 .attr("fill", "black") |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
525 .select(function() { |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
526 return this.parentNode; |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
527 }) |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
528 .selectAll(".tick line") |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
529 .attr("stroke", "black"); |
b07b4cca5e34
client: diagram-template: implement pdf-template for fairway availability diagram
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3239
diff
changeset
|
530 this.diagram.selectAll(".domain").attr("stroke", "black"); |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
531 } |
3135 | 532 }, |
3216
ee6a4e8af766
available_fairway_depth: legend POC
Thomas Junk <thomas.junk@intevation.de>
parents:
3213
diff
changeset
|
533 LEGEND: app.$gettext("Sum of days"), |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
534 COLORS: { |
3216
ee6a4e8af766
available_fairway_depth: legend POC
Thomas Junk <thomas.junk@intevation.de>
parents:
3213
diff
changeset
|
535 LDC: "#FF855E", |
3153
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
536 HIGHEST: "#2D84B3", |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
537 REST: ["#FF424F", "#FF737C", "#FF99A0"] |
8159bd2aaf93
fairway_depth_diagram: display of mockdata
Thomas Junk <thomas.junk@intevation.de>
parents:
3135
diff
changeset
|
538 } |
3033
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
539 }; |
c2c1e3e3af1c
Available fairway depth: rudimentary thoughts / prototype. Tbd;
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
540 </script> |