gemma: client/src/components/fairway/AvailableFairwayDepthLNWL.vue annotate

annotate client/src/components/fairway/AvailableFairwayDepthLNWL.vue @ 3461:b43cf476d791

client: spuc05: implemented new data structure (CSV) and added support for multiple charts

author	Markus Kottlaender <markus@intevation.de>
date	Sun, 26 May 2019 16:33:02 +0200
parents	213b703bdd85
children	6f4dad7473d7

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"
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	14 class="form-control d-block custom-select-sm w-100 mt-1"
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"
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	27 class="btn btn-sm btn-info d-block w-100 mt-1"
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"
213b703bdd85 afdLNWL: CSV-Export Thomas Junk <thomas.junk@intevation.de> parents: 3437 diff changeset	34 class="mt-1 btn btn-sm btn-info"
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",
3437 6a044d6c2cdc afd: csv download Thomas Junk <thomas.junk@intevation.de> parents: 3419 diff changeset	170 "legendLNWL",
6a044d6c2cdc afd: csv download Thomas Junk <thomas.junk@intevation.de> parents: 3419 diff changeset	171 "csv"
3296 fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	172 ]),
3437 6a044d6c2cdc afd: csv download Thomas Junk <thomas.junk@intevation.de> parents: 3419 diff changeset	173 dataLink() {
6a044d6c2cdc afd: csv download Thomas Junk <thomas.junk@intevation.de> parents: 3419 diff changeset	174 return `data:text/csv;charset=utf-8, ${encodeURIComponent(this.csv)}`;
6a044d6c2cdc afd: csv download Thomas Junk <thomas.junk@intevation.de> parents: 3419 diff changeset	175 },
6a044d6c2cdc afd: csv download Thomas Junk <thomas.junk@intevation.de> parents: 3419 diff changeset	176 csvFileName() {
6a044d6c2cdc afd: csv download Thomas Junk <thomas.junk@intevation.de> parents: 3419 diff changeset	177 return `${this.$gettext("fairwayavailabilityLNWL")}-${
6a044d6c2cdc afd: csv download Thomas Junk <thomas.junk@intevation.de> parents: 3419 diff changeset	178 this.selectedFairwayAvailabilityFeature.properties.name
6a044d6c2cdc afd: csv download Thomas Junk <thomas.junk@intevation.de> parents: 3419 diff changeset	179 }-${filters.surveyDate(this.fromDate)}-${filters.surveyDate(
6a044d6c2cdc afd: csv download Thomas Junk <thomas.junk@intevation.de> parents: 3419 diff changeset	180 this.toDate
6a044d6c2cdc afd: csv download Thomas Junk <thomas.junk@intevation.de> parents: 3419 diff changeset	181 )}-${this.$gettext(this.frequency)}-.csv`;
6a044d6c2cdc afd: csv download Thomas Junk <thomas.junk@intevation.de> parents: 3419 diff changeset	182 },
3296 fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	183 fromDate() {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	184 return this.from;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	185 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	186 toDate() {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	187 return this.to;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	188 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	189 availability() {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	190 return this.plainAvailability;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	191 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	192 title() {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	193 return `Available Fairway Depth vs LNWL: ${
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	194 this.featureName
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	195 } (${filters.surveyDate(this.fromDate)} - ${filters.surveyDate(
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	196 this.toDate
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	197 )}) ${this.$gettext(this.frequency)}`;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	198 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	199 featureName() {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	200 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	201 },
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts Markus Kottlaender <markus@intevation.de> parents: 3450 diff changeset	202 widthPerItem() {
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts Markus Kottlaender <markus@intevation.de> parents: 3450 diff changeset	203 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	204 (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	205 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	206 180
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts Markus Kottlaender <markus@intevation.de> parents: 3450 diff changeset	207 );
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts Markus Kottlaender <markus@intevation.de> parents: 3450 diff changeset	208 },
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts Markus Kottlaender <markus@intevation.de> parents: 3450 diff changeset	209 ldcWidth() {
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts Markus Kottlaender <markus@intevation.de> parents: 3450 diff changeset	210 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	211 },
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts Markus Kottlaender <markus@intevation.de> parents: 3450 diff changeset	212 afdWidth() {
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts Markus Kottlaender <markus@intevation.de> parents: 3450 diff changeset	213 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	214 },
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts Markus Kottlaender <markus@intevation.de> parents: 3450 diff changeset	215 spaceBetween() {
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts Markus Kottlaender <markus@intevation.de> parents: 3450 diff changeset	216 return this.widthPerItem * 0.2;
3296 fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	217 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	218 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	219 methods: {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	220 applyChange() {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	221 if (this.form.template.hasOwnProperty("properties")) {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	222 this.templateData = this.defaultTemplate;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	223 return;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	224 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	225 if (this.form.template) {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	226 HTTP.get("/templates/diagram/" + this.form.template.name, {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	227 headers: {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	228 "X-Gemma-Auth": localStorage.getItem("token"),
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	229 "Content-type": "text/xml; charset=UTF-8"
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	230 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	231 })
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	232 .then(response => {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	233 this.templateData = response.data.template_data;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	234 })
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	235 .catch(e => {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	236 const { status, data } = e.response;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	237 displayError({
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	238 title: this.$gettext("Backend Error"),
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	239 message: `${status}: ${data.message \|\| data}`
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	240 });
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	241 });
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	242 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	243 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	244 downloadPDF() {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	245 this.pdf.doc = new jsPDF(
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	246 "l",
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	247 "mm",
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	248 this.templateData.properties.paperSize
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 // pdf width and height in millimeter (landscape)
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	251 this.pdf.width =
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	252 this.templateData.properties.paperSize === "a3" ? 420 : 297;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	253 this.pdf.height =
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	254 this.templateData.properties.paperSize === "a3" ? 297 : 210;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	255 if (this.templateData) {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	256 // default values if some are missing in template
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	257 let defaultFontSize = 11,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	258 defaultColor = "black",
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	259 defaultWidth = 70,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	260 defaultTextColor = "black",
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	261 defaultBorderColor = "white",
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	262 defaultBgColor = "white",
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	263 defaultRounding = 2,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	264 defaultPadding = 2,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	265 defaultOffset = { x: 0, y: 0 };
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	266 this.templateData.elements.forEach(e => {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	267 switch (e.type) {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	268 case "diagram": {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	269 this.addDiagram(
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	270 e.position,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	271 e.offset \|\| defaultOffset,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	272 e.width,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	273 e.height
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	274 );
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	275 break;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	276 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	277 case "diagramtitle": {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	278 let title = `Available Fairway Depth vs LNWL: ${
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	279 this.featureName
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	280 }`;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	281 this.addDiagramTitle(
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	282 e.position,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	283 e.offset \|\| defaultOffset,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	284 e.fontsize \|\| defaultFontSize,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	285 e.color \|\| defaultColor,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	286 title
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	287 );
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	288 break;
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 case "diagramlegend": {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	291 this.addDiagramLegend(
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	292 e.position,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	293 e.offset \|\| defaultOffset,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	294 e.color \|\| defaultColor
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 break;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	297 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	298 case "text": {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	299 this.addText(
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	300 e.position,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	301 e.offset \|\| defaultOffset,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	302 e.width \|\| defaultWidth,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	303 e.fontsize \|\| defaultFontSize,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	304 e.color \|\| defaultTextColor,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	305 e.text
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	306 );
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	307 break;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	308 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	309 case "image": {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	310 this.addImage(
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	311 e.url,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	312 e.format,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	313 e.position,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	314 e.offset \|\| defaultOffset,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	315 e.width,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	316 e.height
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	317 );
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	318 break;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	319 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	320 case "box": {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	321 this.addBox(
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	322 e.position,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	323 e.offset,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	324 e.width,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	325 e.height,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	326 e.rounding === 0 \|\| e.rounding ? e.rounding : defaultRounding,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	327 e.color \|\| defaultBgColor,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	328 e.brcolor \|\| defaultBorderColor
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	329 );
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	330 break;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	331 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	332 case "textbox": {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	333 this.addTextBox(
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	334 e.position,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	335 e.offset \|\| defaultOffset,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	336 e.width,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	337 e.height,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	338 e.rounding === 0 \|\| e.rounding ? e.rounding : defaultRounding,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	339 e.padding \|\| defaultPadding,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	340 e.fontsize \|\| defaultFontSize,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	341 e.color \|\| defaultTextColor,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	342 e.background \|\| defaultBgColor,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	343 e.text,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	344 e.brcolor \|\| defaultBorderColor
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	345 );
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	346 break;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	347 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	348 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	349 });
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	350 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	351 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	352 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	353 addDiagram(position, offset, width, height) {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	354 let x = offset.x,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	355 y = offset.y;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	356 var svg = this.$refs.diagramContainer.innerHTML;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	357 if (svg) {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	358 svg = svg.replace(/\r?\n\|\r/g, "").trim();
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	359 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	360 if (!width) {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	361 width = this.templateData.properties.paperSize === "a3" ? 380 : 290;
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 if (!height) {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	364 height = this.templateData.properties.paperSize === "a3" ? 130 : 100;
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 if (["topright", "bottomright"].indexOf(position) !== -1) {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	367 x = this.pdf.width - offset.x - width;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	368 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	369 if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	370 y = this.pdf.height - offset.y - height;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	371 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	372 var canvas = document.createElement("canvas");
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	373 canvas.width = window.innerWidth;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	374 canvas.height = window.innerHeight / 2;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	375 canvg(canvas, svg, {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	376 ignoreMouse: true,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	377 ignoreAnimation: true,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	378 ignoreDimensions: true
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	379 });
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	380 var imgData = canvas.toDataURL("image/png");
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	381 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	382 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	383 addDiagramLegend(position, offset, color) {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	384 let x = offset.x,
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	385 y = offset.y;
3333 d5dbfba9faae clinet: pdf-template: fix positioning of diagramlegend (FairwayAvailability,AvailableFairwayDepth) Fadi Abbud <fadi.abbud@intevation.de> parents: 3299 diff changeset	386 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	387 let width =
d5dbfba9faae clinet: pdf-template: fix positioning of diagramlegend (FairwayAvailability,AvailableFairwayDepth) Fadi Abbud <fadi.abbud@intevation.de> parents: 3299 diff changeset	388 (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	389
3333 d5dbfba9faae clinet: pdf-template: fix positioning of diagramlegend (FairwayAvailability,AvailableFairwayDepth) Fadi Abbud <fadi.abbud@intevation.de> parents: 3299 diff changeset	390 // 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	391 // 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	392 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	393 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	394 }
d5dbfba9faae clinet: pdf-template: fix positioning of diagramlegend (FairwayAvailability,AvailableFairwayDepth) Fadi Abbud <fadi.abbud@intevation.de> parents: 3299 diff changeset	395 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	396 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	397 }
3296 fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	398 this.pdf.doc.setTextColor(color);
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	399 this.pdf.doc.setDrawColor("rgb(255, 133, 94)");
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	400 this.pdf.doc.setFillColor("rgb(255, 133, 94)");
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	401 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	402 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	403
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	404 this.pdf.doc.setDrawColor("rgb(255, 66, 79)");
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	405 this.pdf.doc.setFillColor("rgb(255, 66, 79)");
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	406 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	407 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	408
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	409 this.pdf.doc.setDrawColor("rgb(255, 115, 124)");
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	410 this.pdf.doc.setFillColor("rgb(255, 115, 124)");
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	411 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	412 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	413
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	414 this.pdf.doc.setDrawColor("rgb(255, 153, 160)");
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	415 this.pdf.doc.setFillColor("rgb(255, 153, 160)");
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	416 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	417 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	418
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	419 this.pdf.doc.setDrawColor("rgb(45, 132, 179)");
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	420 this.pdf.doc.setFillColor("rgb(45, 132, 179)");
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	421 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	422 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	423 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	424 close() {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	425 this.$store.commit("application/paneSetup", "DEFAULT");
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	426 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	427 drawDiagram() {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	428 this.dimensions = this.getDimensions({
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	429 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	430 });
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	431 this.yScale = d3
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	432 .scaleLinear()
3299 ef52926ce2fc available_fairwaydepth_vs_lnwl: Scales adjusted Thomas Junk <thomas.junk@intevation.de> parents: 3296 diff changeset	433 .domain([0, 100])
3296 fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	434 .range([this.dimensions.mainHeight - 30, 0]);
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	435 d3.select(".diagram-container svg").remove();
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	436 this.generateDiagramContainer();
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	437 this.drawBars();
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	438 this.drawScaleLabel();
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	439 this.drawScale();
3377 ccb5455f0713 available_fairway_depthLNWL: tooltips added Thomas Junk <thomas.junk@intevation.de> parents: 3368 diff changeset	440 this.drawTooltip();
ccb5455f0713 available_fairway_depthLNWL: tooltips added Thomas Junk <thomas.junk@intevation.de> parents: 3368 diff changeset	441 },
ccb5455f0713 available_fairway_depthLNWL: tooltips added Thomas Junk <thomas.junk@intevation.de> parents: 3368 diff changeset	442 drawTooltip() {
ccb5455f0713 available_fairway_depthLNWL: tooltips added Thomas Junk <thomas.junk@intevation.de> parents: 3368 diff changeset	443 this.diagram
ccb5455f0713 available_fairway_depthLNWL: tooltips added Thomas Junk <thomas.junk@intevation.de> parents: 3368 diff changeset	444 .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	445 .text("")
3377 ccb5455f0713 available_fairway_depthLNWL: tooltips added Thomas Junk <thomas.junk@intevation.de> parents: 3368 diff changeset	446 .attr("font-size", "0.8em")
ccb5455f0713 available_fairway_depthLNWL: tooltips added Thomas Junk <thomas.junk@intevation.de> parents: 3368 diff changeset	447 .attr("opacity", 0)
ccb5455f0713 available_fairway_depthLNWL: tooltips added Thomas Junk <thomas.junk@intevation.de> parents: 3368 diff changeset	448 .attr("id", "tooltip");
3296 fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	449 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	450 generateDiagramContainer() {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	451 const diagram = d3
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	452 .select(".diagram-container")
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	453 .append("svg")
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	454 .attr("width", this.dimensions.width)
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	455 .attr("height", this.dimensions.mainHeight);
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	456 this.diagram = diagram
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	457 .append("g")
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	458 .attr("transform", `translate(0 ${this.paddingTop})`);
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	459 },
3368 70605404f37d fa_lnwl: prototypical diagram added Thomas Junk <thomas.junk@intevation.de> parents: 3366 diff changeset	460 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	461 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	462 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	463 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	464 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	465 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	466 });
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts Markus Kottlaender <markus@intevation.de> parents: 3450 diff changeset	467 }
3380 d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA Thomas Junk <thomas.junk@intevation.de> parents: 3377 diff changeset	468 },
3461 b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts Markus Kottlaender <markus@intevation.de> parents: 3450 diff changeset	469 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	470 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	471 .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	472 .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	473 .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	474 .attr(
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts Markus Kottlaender <markus@intevation.de> parents: 3450 diff changeset	475 "transform",
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts Markus Kottlaender <markus@intevation.de> parents: 3450 diff changeset	476 `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	477 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	478 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	479 );
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts Markus Kottlaender <markus@intevation.de> parents: 3450 diff changeset	480 },
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts Markus Kottlaender <markus@intevation.de> parents: 3450 diff changeset	481 drawAFD(data, i) {
3380 d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA Thomas Junk <thomas.junk@intevation.de> parents: 3377 diff changeset	482 let afd = this.diagram
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA Thomas Junk <thomas.junk@intevation.de> parents: 3377 diff changeset	483 .append("g")
3386 0ba142a4bf43 afdlnwl: colors Thomas Junk <thomas.junk@intevation.de> parents: 3381 diff changeset	484 .attr(
0ba142a4bf43 afdlnwl: colors Thomas Junk <thomas.junk@intevation.de> parents: 3381 diff changeset	485 "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	486 `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	487 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	488 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	489 this.ldcWidth})`
3386 0ba142a4bf43 afdlnwl: colors Thomas Junk <thomas.junk@intevation.de> parents: 3381 diff changeset	490 );
3380 d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA Thomas Junk <thomas.junk@intevation.de> parents: 3377 diff changeset	491 afd
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA Thomas Junk <thomas.junk@intevation.de> parents: 3377 diff changeset	492 .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	493 .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	494 .enter()
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA Thomas Junk <thomas.junk@intevation.de> parents: 3377 diff changeset	495 .append("rect")
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA Thomas Junk <thomas.junk@intevation.de> parents: 3377 diff changeset	496 .on("mouseover", function() {
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA Thomas Junk <thomas.junk@intevation.de> parents: 3377 diff changeset	497 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	498 d3.select("#tooltip").attr("opacity", 1);
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA Thomas Junk <thomas.junk@intevation.de> parents: 3377 diff changeset	499 })
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA Thomas Junk <thomas.junk@intevation.de> parents: 3377 diff changeset	500 .on("mouseout", function() {
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA Thomas Junk <thomas.junk@intevation.de> parents: 3377 diff changeset	501 d3.select(this).attr("opacity", 1);
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA Thomas Junk <thomas.junk@intevation.de> parents: 3377 diff changeset	502 d3.select("#tooltip").attr("opacity", 0);
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA Thomas Junk <thomas.junk@intevation.de> parents: 3377 diff changeset	503 })
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA Thomas Junk <thomas.junk@intevation.de> parents: 3377 diff changeset	504 .on("mousemove", function(d) {
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA Thomas Junk <thomas.junk@intevation.de> parents: 3377 diff changeset	505 let y = d3.mouse(this)[1];
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA Thomas Junk <thomas.junk@intevation.de> parents: 3377 diff changeset	506 const dy = document
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA Thomas Junk <thomas.junk@intevation.de> parents: 3377 diff changeset	507 .querySelector(".diagram-container")
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA Thomas Junk <thomas.junk@intevation.de> parents: 3377 diff changeset	508 .getBoundingClientRect().left;
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA Thomas Junk <thomas.junk@intevation.de> parents: 3377 diff changeset	509 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	510 .text(d.toFixed(2))
3380 d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA Thomas Junk <thomas.junk@intevation.de> parents: 3377 diff changeset	511 .attr("y", y - 10)
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA Thomas Junk <thomas.junk@intevation.de> parents: 3377 diff changeset	512 .attr("x", d3.event.pageX - dy);
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA Thomas Junk <thomas.junk@intevation.de> parents: 3377 diff changeset	513 //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	514 //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	515 })
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA Thomas Junk <thomas.junk@intevation.de> parents: 3377 diff changeset	516 .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	517 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	518 })
3461 b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts Markus Kottlaender <markus@intevation.de> parents: 3450 diff changeset	519 .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	520 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	521 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	522 }
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts Markus Kottlaender <markus@intevation.de> parents: 3450 diff changeset	523 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	524 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	525 }
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts Markus Kottlaender <markus@intevation.de> parents: 3450 diff changeset	526 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	527 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	528 }
3380 d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA Thomas Junk <thomas.junk@intevation.de> parents: 3377 diff changeset	529 })
3461 b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts Markus Kottlaender <markus@intevation.de> parents: 3450 diff changeset	530 .attr("width", this.afdWidth)
3380 d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA Thomas Junk <thomas.junk@intevation.de> parents: 3377 diff changeset	531 .attr("fill", (d, i) => {
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA Thomas Junk <thomas.junk@intevation.de> parents: 3377 diff changeset	532 return this.$options.AFDCOLORS[i];
d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA Thomas Junk <thomas.junk@intevation.de> parents: 3377 diff changeset	533 });
3368 70605404f37d fa_lnwl: prototypical diagram added Thomas Junk <thomas.junk@intevation.de> parents: 3366 diff changeset	534 },
3461 b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts Markus Kottlaender <markus@intevation.de> parents: 3450 diff changeset	535 drawLNWL(data, i) {
3368 70605404f37d fa_lnwl: prototypical diagram added Thomas Junk <thomas.junk@intevation.de> parents: 3366 diff changeset	536 let lnwl = this.diagram
70605404f37d fa_lnwl: prototypical diagram added Thomas Junk <thomas.junk@intevation.de> parents: 3366 diff changeset	537 .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	538 .attr(
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts Markus Kottlaender <markus@intevation.de> parents: 3450 diff changeset	539 "transform",
b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts Markus Kottlaender <markus@intevation.de> parents: 3450 diff changeset	540 `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	541 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	542 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	543 );
3368 70605404f37d fa_lnwl: prototypical diagram added Thomas Junk <thomas.junk@intevation.de> parents: 3366 diff changeset	544 lnwl
70605404f37d fa_lnwl: prototypical diagram added Thomas Junk <thomas.junk@intevation.de> parents: 3366 diff changeset	545 .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	546 .datum([data.ldc])
3377 ccb5455f0713 available_fairway_depthLNWL: tooltips added Thomas Junk <thomas.junk@intevation.de> parents: 3368 diff changeset	547 .on("mouseover", function() {
ccb5455f0713 available_fairway_depthLNWL: tooltips added Thomas Junk <thomas.junk@intevation.de> parents: 3368 diff changeset	548 d3.select(this).attr("opacity", "0.8");
ccb5455f0713 available_fairway_depthLNWL: tooltips added Thomas Junk <thomas.junk@intevation.de> parents: 3368 diff changeset	549 d3.select("#tooltip").attr("opacity", 1);
ccb5455f0713 available_fairway_depthLNWL: tooltips added Thomas Junk <thomas.junk@intevation.de> parents: 3368 diff changeset	550 })
ccb5455f0713 available_fairway_depthLNWL: tooltips added Thomas Junk <thomas.junk@intevation.de> parents: 3368 diff changeset	551 .on("mouseout", function() {
ccb5455f0713 available_fairway_depthLNWL: tooltips added Thomas Junk <thomas.junk@intevation.de> parents: 3368 diff changeset	552 d3.select(this).attr("opacity", 1);
ccb5455f0713 available_fairway_depthLNWL: tooltips added Thomas Junk <thomas.junk@intevation.de> parents: 3368 diff changeset	553 d3.select("#tooltip").attr("opacity", 0);
ccb5455f0713 available_fairway_depthLNWL: tooltips added Thomas Junk <thomas.junk@intevation.de> parents: 3368 diff changeset	554 })
ccb5455f0713 available_fairway_depthLNWL: tooltips added Thomas Junk <thomas.junk@intevation.de> parents: 3368 diff changeset	555 .on("mousemove", function(d) {
ccb5455f0713 available_fairway_depthLNWL: tooltips added Thomas Junk <thomas.junk@intevation.de> parents: 3368 diff changeset	556 let y = d3.mouse(this)[1];
ccb5455f0713 available_fairway_depthLNWL: tooltips added Thomas Junk <thomas.junk@intevation.de> parents: 3368 diff changeset	557 const dy = document
ccb5455f0713 available_fairway_depthLNWL: tooltips added Thomas Junk <thomas.junk@intevation.de> parents: 3368 diff changeset	558 .querySelector(".diagram-container")
ccb5455f0713 available_fairway_depthLNWL: tooltips added Thomas Junk <thomas.junk@intevation.de> parents: 3368 diff changeset	559 .getBoundingClientRect().left;
ccb5455f0713 available_fairway_depthLNWL: tooltips added Thomas Junk <thomas.junk@intevation.de> parents: 3368 diff changeset	560 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	561 .text(d[0].toFixed(2))
3377 ccb5455f0713 available_fairway_depthLNWL: tooltips added Thomas Junk <thomas.junk@intevation.de> parents: 3368 diff changeset	562 .attr("y", y - 10)
ccb5455f0713 available_fairway_depthLNWL: tooltips added Thomas Junk <thomas.junk@intevation.de> parents: 3368 diff changeset	563 .attr("x", d3.event.pageX - dy);
ccb5455f0713 available_fairway_depthLNWL: tooltips added Thomas Junk <thomas.junk@intevation.de> parents: 3368 diff changeset	564 //d3.event.pageX gives coordinates relative to SVG
ccb5455f0713 available_fairway_depthLNWL: tooltips added Thomas Junk <thomas.junk@intevation.de> parents: 3368 diff changeset	565 //dy gives offset of svg on page
ccb5455f0713 available_fairway_depthLNWL: tooltips added Thomas Junk <thomas.junk@intevation.de> parents: 3368 diff changeset	566 })
3368 70605404f37d fa_lnwl: prototypical diagram added Thomas Junk <thomas.junk@intevation.de> parents: 3366 diff changeset	567 .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	568 return this.yScale(0) - this.yScale(d);
3368 70605404f37d fa_lnwl: prototypical diagram added Thomas Junk <thomas.junk@intevation.de> parents: 3366 diff changeset	569 })
70605404f37d fa_lnwl: prototypical diagram added Thomas Junk <thomas.junk@intevation.de> parents: 3366 diff changeset	570 .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	571 return this.yScale(d);
3368 70605404f37d fa_lnwl: prototypical diagram added Thomas Junk <thomas.junk@intevation.de> parents: 3366 diff changeset	572 })
3461 b43cf476d791 client: spuc05: implemented new data structure (CSV) and added support for multiple charts Markus Kottlaender <markus@intevation.de> parents: 3450 diff changeset	573 .attr("width", this.ldcWidth)
3368 70605404f37d fa_lnwl: prototypical diagram added Thomas Junk <thomas.junk@intevation.de> parents: 3366 diff changeset	574 .attr("fill", 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	575 return this.$options.LWNLCOLORS.LDC;
3368 70605404f37d fa_lnwl: prototypical diagram added Thomas Junk <thomas.junk@intevation.de> parents: 3366 diff changeset	576 });
70605404f37d fa_lnwl: prototypical diagram added Thomas Junk <thomas.junk@intevation.de> parents: 3366 diff changeset	577 },
3296 fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	578 drawScaleLabel() {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	579 const center = this.dimensions.mainHeight / 2;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	580 this.diagram
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	581 .append("text")
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	582 .text(this.$options.LEGEND)
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	583 .attr("text-anchor", "middle")
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	584 .attr("x", 0)
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	585 .attr("y", 0)
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	586 .attr("dy", "1em")
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	587 .attr("transform", `translate(0, ${center}), rotate(-90)`);
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	588 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	589 drawScale() {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	590 const yAxis = d3.axisLeft().scale(this.yScale);
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	591 this.diagram
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	592 .append("g")
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	593 .attr("transform", `translate(${this.scalePaddingLeft})`)
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	594 .call(yAxis)
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	595 .selectAll(".tick text")
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	596 .attr("fill", "black")
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	597 .select(function() {
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	598 return this.parentNode;
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	599 })
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	600 .selectAll(".tick line")
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	601 .attr("stroke", "black");
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	602 this.diagram.selectAll(".domain").attr("stroke", "black");
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 },
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	605 watch: {
3299 ef52926ce2fc available_fairwaydepth_vs_lnwl: Scales adjusted Thomas Junk <thomas.junk@intevation.de> parents: 3296 diff changeset	606 fwLNWLData() {
3296 fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	607 this.drawDiagram();
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	608 }
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	609 },
3380 d83c738e8627 fairway_availability_LNWL: draw chart with MOCKDATA Thomas Junk <thomas.junk@intevation.de> parents: 3377 diff changeset	610 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	611 AFDCOLORS: ["#3636ff", "#f49b7f", "#e15472"],
3381 540ef09bd6bc fix linting Thomas Junk <thomas.junk@intevation.de> parents: 3380 diff changeset	612 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	613 LDC: "#97ddf3",
3386 0ba142a4bf43 afdlnwl: colors Thomas Junk <thomas.junk@intevation.de> parents: 3381 diff changeset	614 HDC: "#43FFE1"
3381 540ef09bd6bc fix linting Thomas Junk <thomas.junk@intevation.de> parents: 3380 diff changeset	615 }
3296 fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	616 };
fa7dc3f31ef3 available_fairwaydepth_vs_lnwl: POC etd. Thomas Junk <thomas.junk@intevation.de> parents: diff changeset	617 </script>

Mercurial > gemma

annotate client/src/components/fairway/AvailableFairwayDepthLNWL.vue @ 3461:b43cf476d791