Mercurial > gemma

annotate client/src/components/fairway/AvailableFairwayDepthLNWL.vue @ 3471:48d09fb1d6c7

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
legend
author Thomas Junk <thomas.junk@intevation.de>
date Mon, 27 May 2019 12:03:07 +0200
parents dfa97aad1134
children a39795393c7c
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
3296
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
1 <template>
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
2 <div class="d-flex flex-column flex-fill">
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
3 <UIBoxHeader icon="chart-area" :title="title" :closeCallback="close" />
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
4 <UISpinnerOverlay v-if="loading" />
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
5 <div class="d-flex flex-fill">
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
6 <DiagramLegend>
3366
8974efd71917 fa_LNWL: cleanup
Thomas Junk <thomas.junk@intevation.de>
parents: 3333
diff changeset
7 <div v-for="(entry, index) in legendLNWL" :key="index" class="legend">
3296
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
8 {{ entry }}
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
9 </div>
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
10 <div>
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
11 <select
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
12 @change="applyChange"
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
13 v-model="form.template"
3466
dfa97aad1134 client: unify the buttons style for diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3463
diff changeset
14 class="form-control d-block custom-select-sm w-100 mt-2"
3296
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
15 >
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
16 <option
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
17 v-for="template in templates"
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
18 :value="template"
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
19 :key="template.name"
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
20 >
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
21 {{ template.name }}
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
22 </option>
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
23 </select>
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
24 <button
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
25 @click="downloadPDF"
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
26 type="button"
3466
dfa97aad1134 client: unify the buttons style for diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3463
diff changeset
27 class="btn btn-sm btn-info d-block w-100 mt-2"
3296
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
28 >
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
29 <translate>Export to PDF</translate>
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
30 </button>
3450
213b703bdd85 afdLNWL: CSV-Export
Thomas Junk <thomas.junk@intevation.de>
parents: 3437
diff changeset
31 <a
213b703bdd85 afdLNWL: CSV-Export
Thomas Junk <thomas.junk@intevation.de>
parents: 3437
diff changeset
32 :href="dataLink"
213b703bdd85 afdLNWL: CSV-Export
Thomas Junk <thomas.junk@intevation.de>
parents: 3437
diff changeset
33 :download="csvFileName"
3466
dfa97aad1134 client: unify the buttons style for diagram legend
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3463
diff changeset
34 class="mt-2 btn btn-sm btn-info w-100"
3437
6a044d6c2cdc afd: csv download
Thomas Junk <thomas.junk@intevation.de>
parents: 3419
diff changeset
35 >Download CSV</a
6a044d6c2cdc afd: csv download
Thomas Junk <thomas.junk@intevation.de>
parents: 3419
diff changeset
36 >
3296
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
37 </div>
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
38 </DiagramLegend>
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
39 <div
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
40 ref="diagramContainer"
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
41 :id="containerId"
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
42 class="mx-auto my-auto diagram-container"
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
43 ></div>
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
44 </div>
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
45 </div>
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
46 </template>
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
47
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
48 <style></style>
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
49
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
50 <script>
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
51 /* This is Free Software under GNU Affero General Public License v >= 3.0
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
52 * without warranty, see README.md and license for details.
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
53 *
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
54 * SPDX-License-Identifier: AGPL-3.0-or-later
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
55 * License-Filename: LICENSES/AGPL-3.0.txt
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
56 *
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
57 * Copyright (C) 2018 by via donau
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
58 * – Österreichische Wasserstraßen-Gesellschaft mbH
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
59 * Software engineering by Intevation GmbH
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
60 *
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
61 * Author(s):
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
62 * Thomas Junk <thomas.junk@intevation.de>
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
63 * Markus Kottländer <markus.kottlaender@intevation.de>
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
64 * Fadi Abbud <fadi.abbud@intevation.de>
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
65 */
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
66 import * as d3 from "d3";
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
67 import app from "@/main";
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
68 import debounce from "debounce";
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
69 import { diagram } from "@/lib/mixins";
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
70 import { mapState } from "vuex";
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
71 import filters from "@/lib/filters.js";
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
72 import jsPDF from "jspdf";
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
73 import canvg from "canvg";
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
74 import { pdfgen } from "@/lib/mixins";
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
75 import { HTTP } from "@/lib/http";
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
76 import { displayError } from "@/lib/errors";
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
77
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
78 export default {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
79 mixins: [diagram, pdfgen],
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
80 components: {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
81 DiagramLegend: () => import("@/components/DiagramLegend")
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
82 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
83 data() {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
84 return {
3299
ef52926ce2fc available_fairwaydepth_vs_lnwl: Scales adjusted
Thomas Junk <thomas.junk@intevation.de>
parents: 3296
diff changeset
85 containerId: "availablefairwaydepthlnwl",
3296
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
86 loading: false,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
87 labelPaddingTop: 15,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
88 scalePaddingLeft: 50,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
89 paddingTop: 10,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
90 diagram: null,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
91 yScale: null,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
92 dimensions: null,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
93 pdf: {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
94 doc: null,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
95 width: null,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
96 height: null
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
97 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
98 form: {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
99 template: null
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
100 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
101 templateData: null,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
102 templates: [],
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
103 defaultTemplate: {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
104 name: "Default",
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
105 properties: {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
106 paperSize: "a4"
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
107 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
108 elements: [
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
109 {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
110 type: "diagram",
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
111 position: "topleft",
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
112 offset: { x: 20, y: 60 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
113 width: 290,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
114 height: 100
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
115 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
116 {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
117 type: "diagramtitle",
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
118 position: "topleft",
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
119 offset: { x: 70, y: 20 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
120 fontsize: 20,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
121 color: "steelblue"
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
122 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
123 {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
124 type: "diagramlegend",
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
125 position: "topleft",
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
126 offset: { x: 30, y: 160 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
127 color: "black"
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
128 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
129 ]
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
130 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
131 };
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
132 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
133 created() {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
134 window.addEventListener("resize", debounce(this.drawDiagram), 100);
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
135 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
136 mounted() {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
137 this.drawDiagram();
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
138 this.templates[0] = this.defaultTemplate;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
139 this.form.template = this.templates[0];
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
140 this.templateData = this.form.template;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
141 HTTP.get("/templates/diagram", {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
142 headers: {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
143 "X-Gemma-Auth": localStorage.getItem("token"),
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
144 "Content-type": "text/xml; charset=UTF-8"
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
145 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
146 })
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
147 .then(response => {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
148 if (response.data.length) {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
149 this.templates = response.data;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
150 this.form.template = this.templates[0];
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
151 this.templates[this.templates.length] = this.defaultTemplate;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
152 this.applyChange();
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
153 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
154 })
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
155 .catch(e => {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
156 const { status, data } = e.response;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
157 displayError({
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
158 title: this.$gettext("Backend Error"),
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
159 message: `${status}: ${data.message || data}`
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
160 });
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
161 });
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
162 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
163 computed: {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
164 ...mapState("fairwayavailability", [
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
165 "selectedFairwayAvailabilityFeature",
3299
ef52926ce2fc available_fairwaydepth_vs_lnwl: Scales adjusted
Thomas Junk <thomas.junk@intevation.de>
parents: 3296
diff changeset
166 "fwLNWLData",
3296
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
167 "from",
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
168 "to",
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
169 "frequency",
3471
Thomas Junk <thomas.junk@intevation.de>
parents: 3466
diff changeset
170 "csv",
Thomas Junk <thomas.junk@intevation.de>
parents: 3466
diff changeset
171 "depthlimit1",
Thomas Junk <thomas.junk@intevation.de>
parents: 3466
diff changeset
172 "depthlimit2",
Thomas Junk <thomas.junk@intevation.de>
parents: 3466
diff changeset
173 "widthlimit1",
Thomas Junk <thomas.junk@intevation.de>
parents: 3466
diff changeset
174 "widthlimit2"
3296
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
175 ]),
3471
Thomas Junk <thomas.junk@intevation.de>
parents: 3466
diff changeset
176 legendLNWL() {
Thomas Junk <thomas.junk@intevation.de>
parents: 3466
diff changeset
177 const d = [this.depthlimit1, this.depthlimit2].sort();
Thomas Junk <thomas.junk@intevation.de>
parents: 3466
diff changeset
178 const w = [this.widthlimit1, this.widthlimit2].sort();
Thomas Junk <thomas.junk@intevation.de>
parents: 3466
diff changeset
179 const lowerBound = [d[0], w[0]].filter(x => x).join(", ");
Thomas Junk <thomas.junk@intevation.de>
parents: 3466
diff changeset
180 const upperBound = [d[1], w[1]].filter(x => x).join(", ");
Thomas Junk <thomas.junk@intevation.de>
parents: 3466
diff changeset
181 return [
Thomas Junk <thomas.junk@intevation.de>
parents: 3466
diff changeset
182 `> LDC`,
Thomas Junk <thomas.junk@intevation.de>
parents: 3466
diff changeset
183 `< ${lowerBound}`,
Thomas Junk <thomas.junk@intevation.de>
parents: 3466
diff changeset
184 `< ${upperBound}`,
Thomas Junk <thomas.junk@intevation.de>
parents: 3466
diff changeset
185 `>= ${upperBound}`
Thomas Junk <thomas.junk@intevation.de>
parents: 3466
diff changeset
186 ];
Thomas Junk <thomas.junk@intevation.de>
parents: 3466
diff changeset
187 },
3437
6a044d6c2cdc afd: csv download
Thomas Junk <thomas.junk@intevation.de>
parents: 3419
diff changeset
188 dataLink() {
6a044d6c2cdc afd: csv download
Thomas Junk <thomas.junk@intevation.de>
parents: 3419
diff changeset
189 return `data:text/csv;charset=utf-8, ${encodeURIComponent(this.csv)}`;
6a044d6c2cdc afd: csv download
Thomas Junk <thomas.junk@intevation.de>
parents: 3419
diff changeset
190 },
6a044d6c2cdc afd: csv download
Thomas Junk <thomas.junk@intevation.de>
parents: 3419
diff changeset
191 csvFileName() {
6a044d6c2cdc afd: csv download
Thomas Junk <thomas.junk@intevation.de>
parents: 3419
diff changeset
192 return `${this.$gettext("fairwayavailabilityLNWL")}-${
6a044d6c2cdc afd: csv download
Thomas Junk <thomas.junk@intevation.de>
parents: 3419
diff changeset
193 this.selectedFairwayAvailabilityFeature.properties.name
6a044d6c2cdc afd: csv download
Thomas Junk <thomas.junk@intevation.de>
parents: 3419
diff changeset
194 }-${filters.surveyDate(this.fromDate)}-${filters.surveyDate(
6a044d6c2cdc afd: csv download
Thomas Junk <thomas.junk@intevation.de>
parents: 3419
diff changeset
195 this.toDate
6a044d6c2cdc afd: csv download
Thomas Junk <thomas.junk@intevation.de>
parents: 3419
diff changeset
196 )}-${this.$gettext(this.frequency)}-.csv`;
6a044d6c2cdc afd: csv download
Thomas Junk <thomas.junk@intevation.de>
parents: 3419
diff changeset
197 },
3296
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
198 fromDate() {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
199 return this.from;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
200 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
201 toDate() {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
202 return this.to;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
203 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
204 availability() {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
205 return this.plainAvailability;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
206 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
207 title() {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
208 return `Available Fairway Depth vs LNWL: ${
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
209 this.featureName
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
210 } (${filters.surveyDate(this.fromDate)} - ${filters.surveyDate(
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
211 this.toDate
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
212 )}) ${this.$gettext(this.frequency)}`;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
213 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
214 featureName() {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
215 return this.selectedFairwayAvailabilityFeature.properties.name;
3461
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
216 },
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
217 widthPerItem() {
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
218 return Math.min(
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
219 (this.dimensions.width - this.scalePaddingLeft) /
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
220 this.fwLNWLData.length,
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
221 180
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
222 );
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
223 },
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
224 ldcWidth() {
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
225 return this.widthPerItem * 0.3;
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
226 },
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
227 afdWidth() {
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
228 return this.widthPerItem * 0.5;
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
229 },
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
230 spaceBetween() {
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
231 return this.widthPerItem * 0.2;
3296
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
232 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
233 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
234 methods: {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
235 applyChange() {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
236 if (this.form.template.hasOwnProperty("properties")) {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
237 this.templateData = this.defaultTemplate;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
238 return;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
239 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
240 if (this.form.template) {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
241 HTTP.get("/templates/diagram/" + this.form.template.name, {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
242 headers: {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
243 "X-Gemma-Auth": localStorage.getItem("token"),
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
244 "Content-type": "text/xml; charset=UTF-8"
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
245 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
246 })
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
247 .then(response => {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
248 this.templateData = response.data.template_data;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
249 })
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
250 .catch(e => {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
251 const { status, data } = e.response;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
252 displayError({
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
253 title: this.$gettext("Backend Error"),
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
254 message: `${status}: ${data.message || data}`
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
255 });
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
256 });
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
257 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
258 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
259 downloadPDF() {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
260 this.pdf.doc = new jsPDF(
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
261 "l",
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
262 "mm",
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
263 this.templateData.properties.paperSize
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
264 );
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
265 // pdf width and height in millimeter (landscape)
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
266 this.pdf.width =
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
267 this.templateData.properties.paperSize === "a3" ? 420 : 297;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
268 this.pdf.height =
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
269 this.templateData.properties.paperSize === "a3" ? 297 : 210;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
270 if (this.templateData) {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
271 // default values if some are missing in template
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
272 let defaultFontSize = 11,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
273 defaultColor = "black",
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
274 defaultWidth = 70,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
275 defaultTextColor = "black",
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
276 defaultBorderColor = "white",
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
277 defaultBgColor = "white",
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
278 defaultRounding = 2,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
279 defaultPadding = 2,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
280 defaultOffset = { x: 0, y: 0 };
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
281 this.templateData.elements.forEach(e => {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
282 switch (e.type) {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
283 case "diagram": {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
284 this.addDiagram(
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
285 e.position,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
286 e.offset || defaultOffset,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
287 e.width,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
288 e.height
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
289 );
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
290 break;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
291 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
292 case "diagramtitle": {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
293 let title = `Available Fairway Depth vs LNWL: ${
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
294 this.featureName
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
295 }`;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
296 this.addDiagramTitle(
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
297 e.position,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
298 e.offset || defaultOffset,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
299 e.fontsize || defaultFontSize,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
300 e.color || defaultColor,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
301 title
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
302 );
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
303 break;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
304 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
305 case "diagramlegend": {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
306 this.addDiagramLegend(
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
307 e.position,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
308 e.offset || defaultOffset,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
309 e.color || defaultColor
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
310 );
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
311 break;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
312 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
313 case "text": {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
314 this.addText(
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
315 e.position,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
316 e.offset || defaultOffset,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
317 e.width || defaultWidth,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
318 e.fontsize || defaultFontSize,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
319 e.color || defaultTextColor,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
320 e.text
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
321 );
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
322 break;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
323 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
324 case "image": {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
325 this.addImage(
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
326 e.url,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
327 e.format,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
328 e.position,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
329 e.offset || defaultOffset,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
330 e.width,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
331 e.height
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
332 );
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
333 break;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
334 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
335 case "box": {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
336 this.addBox(
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
337 e.position,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
338 e.offset,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
339 e.width,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
340 e.height,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
341 e.rounding === 0 || e.rounding ? e.rounding : defaultRounding,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
342 e.color || defaultBgColor,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
343 e.brcolor || defaultBorderColor
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
344 );
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
345 break;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
346 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
347 case "textbox": {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
348 this.addTextBox(
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
349 e.position,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
350 e.offset || defaultOffset,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
351 e.width,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
352 e.height,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
353 e.rounding === 0 || e.rounding ? e.rounding : defaultRounding,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
354 e.padding || defaultPadding,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
355 e.fontsize || defaultFontSize,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
356 e.color || defaultTextColor,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
357 e.background || defaultBgColor,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
358 e.text,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
359 e.brcolor || defaultBorderColor
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
360 );
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
361 break;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
362 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
363 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
364 });
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
365 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
366 this.pdf.doc.save(`Available Fairway Depth LNWL: ${this.featureName}`);
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
367 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
368 addDiagram(position, offset, width, height) {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
369 let x = offset.x,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
370 y = offset.y;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
371 var svg = this.$refs.diagramContainer.innerHTML;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
372 if (svg) {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
373 svg = svg.replace(/\r?\n|\r/g, "").trim();
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
374 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
375 if (!width) {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
376 width = this.templateData.properties.paperSize === "a3" ? 380 : 290;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
377 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
378 if (!height) {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
379 height = this.templateData.properties.paperSize === "a3" ? 130 : 100;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
380 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
381 if (["topright", "bottomright"].indexOf(position) !== -1) {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
382 x = this.pdf.width - offset.x - width;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
383 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
384 if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
385 y = this.pdf.height - offset.y - height;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
386 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
387 var canvas = document.createElement("canvas");
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
388 canvas.width = window.innerWidth;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
389 canvas.height = window.innerHeight / 2;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
390 canvg(canvas, svg, {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
391 ignoreMouse: true,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
392 ignoreAnimation: true,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
393 ignoreDimensions: true
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
394 });
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
395 var imgData = canvas.toDataURL("image/png");
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
396 this.pdf.doc.addImage(imgData, "PNG", x, y, width, height);
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
397 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
398 addDiagramLegend(position, offset, color) {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
399 let x = offset.x,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
400 y = offset.y;
3333
d5dbfba9faae clinet: pdf-template: fix positioning of diagramlegend (FairwayAvailability,AvailableFairwayDepth)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3299
diff changeset
401 this.pdf.doc.setFontSize(10);
d5dbfba9faae clinet: pdf-template: fix positioning of diagramlegend (FairwayAvailability,AvailableFairwayDepth)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3299
diff changeset
402 let width =
d5dbfba9faae clinet: pdf-template: fix positioning of diagramlegend (FairwayAvailability,AvailableFairwayDepth)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3299
diff changeset
403 (this.pdf.doc.getStringUnitWidth(">= LDC [h]") * 10) / (72 / 25.6) + 15;
3296
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
404
3333
d5dbfba9faae clinet: pdf-template: fix positioning of diagramlegend (FairwayAvailability,AvailableFairwayDepth)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3299
diff changeset
405 // if position is on the right, x needs to be calculate with pdf width and
d5dbfba9faae clinet: pdf-template: fix positioning of diagramlegend (FairwayAvailability,AvailableFairwayDepth)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3299
diff changeset
406 // the size of the element
d5dbfba9faae clinet: pdf-template: fix positioning of diagramlegend (FairwayAvailability,AvailableFairwayDepth)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3299
diff changeset
407 if (["topright", "bottomright"].indexOf(position) !== -1) {
d5dbfba9faae clinet: pdf-template: fix positioning of diagramlegend (FairwayAvailability,AvailableFairwayDepth)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3299
diff changeset
408 x = this.pdf.width - offset.x - width;
d5dbfba9faae clinet: pdf-template: fix positioning of diagramlegend (FairwayAvailability,AvailableFairwayDepth)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3299
diff changeset
409 }
d5dbfba9faae clinet: pdf-template: fix positioning of diagramlegend (FairwayAvailability,AvailableFairwayDepth)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3299
diff changeset
410 if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
d5dbfba9faae clinet: pdf-template: fix positioning of diagramlegend (FairwayAvailability,AvailableFairwayDepth)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3299
diff changeset
411 y = this.pdf.height - offset.y - this.getTextHeight(7);
d5dbfba9faae clinet: pdf-template: fix positioning of diagramlegend (FairwayAvailability,AvailableFairwayDepth)
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3299
diff changeset
412 }
3296
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
413 this.pdf.doc.setTextColor(color);
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
414 this.pdf.doc.setDrawColor("rgb(255, 133, 94)");
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
415 this.pdf.doc.setFillColor("rgb(255, 133, 94)");
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
416 this.pdf.doc.rect(x, y, 8, 4, "FD");
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
417 this.pdf.doc.text(">= LDC [h]", x + 10, y + 3);
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
418
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
419 this.pdf.doc.setDrawColor("rgb(255, 66, 79)");
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
420 this.pdf.doc.setFillColor("rgb(255, 66, 79)");
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
421 this.pdf.doc.rect(x, y + 5, 8, 4, "FD");
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
422 this.pdf.doc.text("< 200.00 [h]", x + 10, y + 8);
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
423
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
424 this.pdf.doc.setDrawColor("rgb(255, 115, 124)");
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
425 this.pdf.doc.setFillColor("rgb(255, 115, 124)");
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
426 this.pdf.doc.rect(x, y + 10, 8, 4, "FD");
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
427 this.pdf.doc.text(">= 200.00 [h]", x + 10, y + 13);
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
428
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
429 this.pdf.doc.setDrawColor("rgb(255, 153, 160)");
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
430 this.pdf.doc.setFillColor("rgb(255, 153, 160)");
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
431 this.pdf.doc.rect(x, y + 15, 8, 4, "FD");
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
432 this.pdf.doc.text(">= 230.00 [h]", x + 10, y + 18);
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
433
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
434 this.pdf.doc.setDrawColor("rgb(45, 132, 179)");
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
435 this.pdf.doc.setFillColor("rgb(45, 132, 179)");
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
436 this.pdf.doc.rect(x, y + 20, 8, 4, "FD");
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
437 this.pdf.doc.text(">= 250.00 [h]", x + 10, y + 23);
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
438 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
439 close() {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
440 this.$store.commit("application/paneSetup", "DEFAULT");
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
441 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
442 drawDiagram() {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
443 this.dimensions = this.getDimensions({
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
444 main: { top: 20, right: 20, bottom: 110, left: 200 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
445 });
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
446 this.yScale = d3
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
447 .scaleLinear()
3299
ef52926ce2fc available_fairwaydepth_vs_lnwl: Scales adjusted
Thomas Junk <thomas.junk@intevation.de>
parents: 3296
diff changeset
448 .domain([0, 100])
3296
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
449 .range([this.dimensions.mainHeight - 30, 0]);
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
450 d3.select(".diagram-container svg").remove();
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
451 this.generateDiagramContainer();
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
452 this.drawBars();
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
453 this.drawScaleLabel();
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
454 this.drawScale();
3377
ccb5455f0713 available_fairway_depthLNWL: tooltips added
Thomas Junk <thomas.junk@intevation.de>
parents: 3368
diff changeset
455 this.drawTooltip();
ccb5455f0713 available_fairway_depthLNWL: tooltips added
Thomas Junk <thomas.junk@intevation.de>
parents: 3368
diff changeset
456 },
ccb5455f0713 available_fairway_depthLNWL: tooltips added
Thomas Junk <thomas.junk@intevation.de>
parents: 3368
diff changeset
457 drawTooltip() {
ccb5455f0713 available_fairway_depthLNWL: tooltips added
Thomas Junk <thomas.junk@intevation.de>
parents: 3368
diff changeset
458 this.diagram
ccb5455f0713 available_fairway_depthLNWL: tooltips added
Thomas Junk <thomas.junk@intevation.de>
parents: 3368
diff changeset
459 .append("text")
3461
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
460 .text("")
3377
ccb5455f0713 available_fairway_depthLNWL: tooltips added
Thomas Junk <thomas.junk@intevation.de>
parents: 3368
diff changeset
461 .attr("font-size", "0.8em")
ccb5455f0713 available_fairway_depthLNWL: tooltips added
Thomas Junk <thomas.junk@intevation.de>
parents: 3368
diff changeset
462 .attr("opacity", 0)
ccb5455f0713 available_fairway_depthLNWL: tooltips added
Thomas Junk <thomas.junk@intevation.de>
parents: 3368
diff changeset
463 .attr("id", "tooltip");
3296
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
464 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
465 generateDiagramContainer() {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
466 const diagram = d3
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
467 .select(".diagram-container")
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
468 .append("svg")
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
469 .attr("width", this.dimensions.width)
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
470 .attr("height", this.dimensions.mainHeight);
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
471 this.diagram = diagram
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
472 .append("g")
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
473 .attr("transform", `translate(0 ${this.paddingTop})`);
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
474 },
3368
70605404f37d fa_lnwl: prototypical diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3366
diff changeset
475 drawBars() {
3461
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
476 if (this.fwLNWLData) {
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
477 this.fwLNWLData.forEach((data, i) => {
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
478 this.drawLNWL(data, i);
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
479 this.drawAFD(data, i);
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
480 this.drawLabel(data.date, i);
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
481 });
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
482 }
3380
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA
Thomas Junk <thomas.junk@intevation.de>
parents: 3377
diff changeset
483 },
3461
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
484 drawLabel(date, i) {
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
485 this.diagram
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
486 .append("text")
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
487 .text(date)
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
488 .attr("text-anchor", "middle")
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
489 .attr(
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
490 "transform",
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
491 `translate(${this.scalePaddingLeft +
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
492 this.widthPerItem * i +
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
493 this.widthPerItem / 2} ${this.dimensions.mainHeight - 15})`
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
494 );
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
495 },
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
496 drawAFD(data, i) {
3380
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA
Thomas Junk <thomas.junk@intevation.de>
parents: 3377
diff changeset
497 let afd = this.diagram
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA
Thomas Junk <thomas.junk@intevation.de>
parents: 3377
diff changeset
498 .append("g")
3386
0ba142a4bf43 afdlnwl: colors
Thomas Junk <thomas.junk@intevation.de>
parents: 3381
diff changeset
499 .attr(
0ba142a4bf43 afdlnwl: colors
Thomas Junk <thomas.junk@intevation.de>
parents: 3381
diff changeset
500 "transform",
3461
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
501 `translate(${this.scalePaddingLeft +
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
502 this.spaceBetween / 2 +
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
503 this.widthPerItem * i +
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
504 this.ldcWidth})`
3386
0ba142a4bf43 afdlnwl: colors
Thomas Junk <thomas.junk@intevation.de>
parents: 3381
diff changeset
505 );
3380
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA
Thomas Junk <thomas.junk@intevation.de>
parents: 3377
diff changeset
506 afd
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA
Thomas Junk <thomas.junk@intevation.de>
parents: 3377
diff changeset
507 .selectAll("rect")
3461
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
508 .data([data.above, data.between, data.below])
3380
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA
Thomas Junk <thomas.junk@intevation.de>
parents: 3377
diff changeset
509 .enter()
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA
Thomas Junk <thomas.junk@intevation.de>
parents: 3377
diff changeset
510 .append("rect")
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA
Thomas Junk <thomas.junk@intevation.de>
parents: 3377
diff changeset
511 .on("mouseover", function() {
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA
Thomas Junk <thomas.junk@intevation.de>
parents: 3377
diff changeset
512 d3.select(this).attr("opacity", "0.8");
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA
Thomas Junk <thomas.junk@intevation.de>
parents: 3377
diff changeset
513 d3.select("#tooltip").attr("opacity", 1);
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA
Thomas Junk <thomas.junk@intevation.de>
parents: 3377
diff changeset
514 })
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA
Thomas Junk <thomas.junk@intevation.de>
parents: 3377
diff changeset
515 .on("mouseout", function() {
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA
Thomas Junk <thomas.junk@intevation.de>
parents: 3377
diff changeset
516 d3.select(this).attr("opacity", 1);
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA
Thomas Junk <thomas.junk@intevation.de>
parents: 3377
diff changeset
517 d3.select("#tooltip").attr("opacity", 0);
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA
Thomas Junk <thomas.junk@intevation.de>
parents: 3377
diff changeset
518 })
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA
Thomas Junk <thomas.junk@intevation.de>
parents: 3377
diff changeset
519 .on("mousemove", function(d) {
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA
Thomas Junk <thomas.junk@intevation.de>
parents: 3377
diff changeset
520 let y = d3.mouse(this)[1];
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA
Thomas Junk <thomas.junk@intevation.de>
parents: 3377
diff changeset
521 const dy = document
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA
Thomas Junk <thomas.junk@intevation.de>
parents: 3377
diff changeset
522 .querySelector(".diagram-container")
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA
Thomas Junk <thomas.junk@intevation.de>
parents: 3377
diff changeset
523 .getBoundingClientRect().left;
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA
Thomas Junk <thomas.junk@intevation.de>
parents: 3377
diff changeset
524 d3.select("#tooltip")
3461
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
525 .text(d.toFixed(2))
3380
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA
Thomas Junk <thomas.junk@intevation.de>
parents: 3377
diff changeset
526 .attr("y", y - 10)
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA
Thomas Junk <thomas.junk@intevation.de>
parents: 3377
diff changeset
527 .attr("x", d3.event.pageX - dy);
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA
Thomas Junk <thomas.junk@intevation.de>
parents: 3377
diff changeset
528 //d3.event.pageX gives coordinates relative to SVG
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA
Thomas Junk <thomas.junk@intevation.de>
parents: 3377
diff changeset
529 //dy gives offset of svg on page
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA
Thomas Junk <thomas.junk@intevation.de>
parents: 3377
diff changeset
530 })
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA
Thomas Junk <thomas.junk@intevation.de>
parents: 3377
diff changeset
531 .attr("height", d => {
3461
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
532 return this.yScale(0) - this.yScale(d);
3380
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA
Thomas Junk <thomas.junk@intevation.de>
parents: 3377
diff changeset
533 })
3461
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
534 .attr("y", (d, i) => {
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
535 if (i === 0) {
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
536 return this.yScale(d);
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
537 }
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
538 if (i === 1) {
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
539 return this.yScale(data.above + d);
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
540 }
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
541 if (i === 2) {
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
542 return this.yScale(data.above + data.between + d);
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
543 }
3380
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA
Thomas Junk <thomas.junk@intevation.de>
parents: 3377
diff changeset
544 })
3461
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
545 .attr("width", this.afdWidth)
3380
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA
Thomas Junk <thomas.junk@intevation.de>
parents: 3377
diff changeset
546 .attr("fill", (d, i) => {
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA
Thomas Junk <thomas.junk@intevation.de>
parents: 3377
diff changeset
547 return this.$options.AFDCOLORS[i];
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA
Thomas Junk <thomas.junk@intevation.de>
parents: 3377
diff changeset
548 });
3368
70605404f37d fa_lnwl: prototypical diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3366
diff changeset
549 },
3461
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
550 drawLNWL(data, i) {
3368
70605404f37d fa_lnwl: prototypical diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3366
diff changeset
551 let lnwl = this.diagram
70605404f37d fa_lnwl: prototypical diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3366
diff changeset
552 .append("g")
3461
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
553 .attr(
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
554 "transform",
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
555 `translate(${this.scalePaddingLeft +
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
556 this.spaceBetween / 2 +
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
557 this.widthPerItem * i})`
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
558 );
3368
70605404f37d fa_lnwl: prototypical diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3366
diff changeset
559 lnwl
70605404f37d fa_lnwl: prototypical diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3366
diff changeset
560 .append("rect")
3461
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
561 .datum([data.ldc])
3377
ccb5455f0713 available_fairway_depthLNWL: tooltips added
Thomas Junk <thomas.junk@intevation.de>
parents: 3368
diff changeset
562 .on("mouseover", function() {
ccb5455f0713 available_fairway_depthLNWL: tooltips added
Thomas Junk <thomas.junk@intevation.de>
parents: 3368
diff changeset
563 d3.select(this).attr("opacity", "0.8");
ccb5455f0713 available_fairway_depthLNWL: tooltips added
Thomas Junk <thomas.junk@intevation.de>
parents: 3368
diff changeset
564 d3.select("#tooltip").attr("opacity", 1);
ccb5455f0713 available_fairway_depthLNWL: tooltips added
Thomas Junk <thomas.junk@intevation.de>
parents: 3368
diff changeset
565 })
ccb5455f0713 available_fairway_depthLNWL: tooltips added
Thomas Junk <thomas.junk@intevation.de>
parents: 3368
diff changeset
566 .on("mouseout", function() {
ccb5455f0713 available_fairway_depthLNWL: tooltips added
Thomas Junk <thomas.junk@intevation.de>
parents: 3368
diff changeset
567 d3.select(this).attr("opacity", 1);
ccb5455f0713 available_fairway_depthLNWL: tooltips added
Thomas Junk <thomas.junk@intevation.de>
parents: 3368
diff changeset
568 d3.select("#tooltip").attr("opacity", 0);
ccb5455f0713 available_fairway_depthLNWL: tooltips added
Thomas Junk <thomas.junk@intevation.de>
parents: 3368
diff changeset
569 })
ccb5455f0713 available_fairway_depthLNWL: tooltips added
Thomas Junk <thomas.junk@intevation.de>
parents: 3368
diff changeset
570 .on("mousemove", function(d) {
ccb5455f0713 available_fairway_depthLNWL: tooltips added
Thomas Junk <thomas.junk@intevation.de>
parents: 3368
diff changeset
571 let y = d3.mouse(this)[1];
ccb5455f0713 available_fairway_depthLNWL: tooltips added
Thomas Junk <thomas.junk@intevation.de>
parents: 3368
diff changeset
572 const dy = document
ccb5455f0713 available_fairway_depthLNWL: tooltips added
Thomas Junk <thomas.junk@intevation.de>
parents: 3368
diff changeset
573 .querySelector(".diagram-container")
ccb5455f0713 available_fairway_depthLNWL: tooltips added
Thomas Junk <thomas.junk@intevation.de>
parents: 3368
diff changeset
574 .getBoundingClientRect().left;
ccb5455f0713 available_fairway_depthLNWL: tooltips added
Thomas Junk <thomas.junk@intevation.de>
parents: 3368
diff changeset
575 d3.select("#tooltip")
3461
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
576 .text(d[0].toFixed(2))
3377
ccb5455f0713 available_fairway_depthLNWL: tooltips added
Thomas Junk <thomas.junk@intevation.de>
parents: 3368
diff changeset
577 .attr("y", y - 10)
ccb5455f0713 available_fairway_depthLNWL: tooltips added
Thomas Junk <thomas.junk@intevation.de>
parents: 3368
diff changeset
578 .attr("x", d3.event.pageX - dy);
ccb5455f0713 available_fairway_depthLNWL: tooltips added
Thomas Junk <thomas.junk@intevation.de>
parents: 3368
diff changeset
579 //d3.event.pageX gives coordinates relative to SVG
ccb5455f0713 available_fairway_depthLNWL: tooltips added
Thomas Junk <thomas.junk@intevation.de>
parents: 3368
diff changeset
580 //dy gives offset of svg on page
ccb5455f0713 available_fairway_depthLNWL: tooltips added
Thomas Junk <thomas.junk@intevation.de>
parents: 3368
diff changeset
581 })
3368
70605404f37d fa_lnwl: prototypical diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3366
diff changeset
582 .attr("height", d => {
3461
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
583 return this.yScale(0) - this.yScale(d);
3368
70605404f37d fa_lnwl: prototypical diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3366
diff changeset
584 })
70605404f37d fa_lnwl: prototypical diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3366
diff changeset
585 .attr("y", d => {
3461
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
586 return this.yScale(d);
3368
70605404f37d fa_lnwl: prototypical diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3366
diff changeset
587 })
3461
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
588 .attr("width", this.ldcWidth)
3463
6f4dad7473d7 afdLNWL: basical usage of classbreaks
Thomas Junk <thomas.junk@intevation.de>
parents: 3461
diff changeset
589 .attr("fill", () => {
3461
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
590 return this.$options.LWNLCOLORS.LDC;
3368
70605404f37d fa_lnwl: prototypical diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3366
diff changeset
591 });
70605404f37d fa_lnwl: prototypical diagram added
Thomas Junk <thomas.junk@intevation.de>
parents: 3366
diff changeset
592 },
3296
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
593 drawScaleLabel() {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
594 const center = this.dimensions.mainHeight / 2;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
595 this.diagram
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
596 .append("text")
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
597 .text(this.$options.LEGEND)
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
598 .attr("text-anchor", "middle")
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
599 .attr("x", 0)
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
600 .attr("y", 0)
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
601 .attr("dy", "1em")
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
602 .attr("transform", `translate(0, ${center}), rotate(-90)`);
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
603 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
604 drawScale() {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
605 const yAxis = d3.axisLeft().scale(this.yScale);
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
606 this.diagram
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
607 .append("g")
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
608 .attr("transform", `translate(${this.scalePaddingLeft})`)
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
609 .call(yAxis)
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
610 .selectAll(".tick text")
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
611 .attr("fill", "black")
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
612 .select(function() {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
613 return this.parentNode;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
614 })
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
615 .selectAll(".tick line")
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
616 .attr("stroke", "black");
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
617 this.diagram.selectAll(".domain").attr("stroke", "black");
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
618 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
619 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
620 watch: {
3299
ef52926ce2fc available_fairwaydepth_vs_lnwl: Scales adjusted
Thomas Junk <thomas.junk@intevation.de>
parents: 3296
diff changeset
621 fwLNWLData() {
3296
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
622 this.drawDiagram();
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
623 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
624 },
3380
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA
Thomas Junk <thomas.junk@intevation.de>
parents: 3377
diff changeset
625 LEGEND: app.$gettext("Percent"),
3461
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
626 AFDCOLORS: ["#3636ff", "#f49b7f", "#e15472"],
3381
540ef09bd6bc fix linting
Thomas Junk <thomas.junk@intevation.de>
parents: 3380
diff changeset
627 LWNLCOLORS: {
3461
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts
Markus Kottlaender <markus@intevation.de>
parents: 3450
diff changeset
628 LDC: "#97ddf3",
3386
0ba142a4bf43 afdlnwl: colors
Thomas Junk <thomas.junk@intevation.de>
parents: 3381
diff changeset
629 HDC: "#43FFE1"
3381
540ef09bd6bc fix linting
Thomas Junk <thomas.junk@intevation.de>
parents: 3380
diff changeset
630 }
3296
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
631 };
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
632 </script>