gemma: client/src/components/gauge/Waterlevel.vue annotate

annotate client/src/components/gauge/Waterlevel.vue @ 3350:8da2f7b9a04b

client: diagram-template:remove unnecessary template properties and typo

author	Fadi Abbud <fadi.abbud@intevation.de>
date	Tue, 21 May 2019 12:34:49 +0200
parents	7bb6c921cf91
children	d7cc5cda82a9

rev	line source
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1 <template>
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	2 <div class="d-flex flex-column flex-fill">
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	3 <UIBoxHeader
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	4 icon="ruler-vertical"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	5 :title="title"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	6 :closeCallback="close"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	7 class="rounded-0"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	8 />
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	9 <div class="d-flex flex-fill">
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	10 <DiagramLegend>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	11 <div class="legend">
3323 de0d0685a17b client: improve diagram-legends style Fadi Abbud <fadi.abbud@intevation.de> parents: 3304 diff changeset	12 <span
de0d0685a17b client: improve diagram-legends style Fadi Abbud <fadi.abbud@intevation.de> parents: 3304 diff changeset	13 style="background-color: steelblue; width: 20px; height: 20px;"
de0d0685a17b client: improve diagram-legends style Fadi Abbud <fadi.abbud@intevation.de> parents: 3304 diff changeset	14 ></span>
de0d0685a17b client: improve diagram-legends style Fadi Abbud <fadi.abbud@intevation.de> parents: 3304 diff changeset	15 Waterlevel
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	16 </div>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	17 <div class="legend">
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	18 <span
3323 de0d0685a17b client: improve diagram-legends style Fadi Abbud <fadi.abbud@intevation.de> parents: 3304 diff changeset	19 style="width: 8px; height: 8px; background-color: rgba(70, 130, 180, 0.6); border: solid 7px rgba(70, 130, 180, 0.2); background-clip: padding-box; box-sizing: content-box;"
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	20 ></span>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	21 Prediction
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	22 </div>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	23 <div class="legend">
3323 de0d0685a17b client: improve diagram-legends style Fadi Abbud <fadi.abbud@intevation.de> parents: 3304 diff changeset	24 <span
de0d0685a17b client: improve diagram-legends style Fadi Abbud <fadi.abbud@intevation.de> parents: 3304 diff changeset	25 style="background-color: rgba(0, 255, 0, 0.1); width: 20px; height: 20px;"
de0d0685a17b client: improve diagram-legends style Fadi Abbud <fadi.abbud@intevation.de> parents: 3304 diff changeset	26 ></span>
de0d0685a17b client: improve diagram-legends style Fadi Abbud <fadi.abbud@intevation.de> parents: 3304 diff changeset	27 Navigable Range
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	28 </div>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	29 <div>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	30 <select
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	31 @change="applyChange"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	32 v-model="form.template"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	33 class="form-control d-block custom-select-sm w-100"
3137 35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	34 >
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	35 <option
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	36 v-for="template in templates"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	37 :value="template"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	38 :key="template.name"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	39 >
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	40 {{ template.name }}
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	41 </option>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	42 </select>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	43 <button
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	44 @click="downloadPDF"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	45 type="button"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	46 class="btn btn-sm btn-info d-block w-100 mt-2"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	47 >
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	48 <translate>Export to PDF</translate>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	49 </button>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	50 </div>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	51 </DiagramLegend>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	52 <div
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	53 class="d-flex flex-fill justify-content-center align-items-center"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	54 :id="containerId"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	55 >
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	56 <div v-if="!waterlevels.length">
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	57 <translate>No data available.</translate>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	58 </div>
2839 162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2824 diff changeset	59 </div>
2701 e622689d73bd client: waterlevel diagram: use endpoint Markus Kottlaender <markus@intevation.de> parents: 2695 diff changeset	60 </div>
3179 6ddd3755350c client: fix the rendering of diagram on pdf by splitscreen case (waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 3160 diff changeset	61 <div
6ddd3755350c client: fix the rendering of diagram on pdf by splitscreen case (waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 3160 diff changeset	62 id="pdfContainer"
3304 ad27721d804d client: waterlevel diagram: make sure pdf container is outside of viewport Markus Kottlaender <markus@intevation.de> parents: 3303 diff changeset	63 style="position: absolute; z-index: -1; top: -9999px;"
3179 6ddd3755350c client: fix the rendering of diagram on pdf by splitscreen case (waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 3160 diff changeset	64 ></div>
2701 e622689d73bd client: waterlevel diagram: use endpoint Markus Kottlaender <markus@intevation.de> parents: 2695 diff changeset	65 </div>
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	66 </template>
1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	67
1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	68 <script>
1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	69 /* This is Free Software under GNU Affero General Public License v >= 3.0
1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	70 * without warranty, see README.md and license for details.
1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	71 *
1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	72 * SPDX-License-Identifier: AGPL-3.0-or-later
1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	73 * License-Filename: LICENSES/AGPL-3.0.txt
1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	74 *
3112 e838609bc10d client: fix license header for waterlevel.vue and hydrologicalconditions.vue Fadi Abbud <fadi.abbud@intevation.de> parents: 3110 diff changeset	75 * Copyright (C) 2019 by via donau
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	76 * – Österreichische Wasserstraßen-Gesellschaft mbH
1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	77 * Software engineering by Intevation GmbH
1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	78 *
1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	79 * Author(s):
1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	80 * Markus Kottländer <markus.kottlaender@intevation.de>
3112 e838609bc10d client: fix license header for waterlevel.vue and hydrologicalconditions.vue Fadi Abbud <fadi.abbud@intevation.de> parents: 3110 diff changeset	81 * Fadi Abbud <fadi.abbud@intevation.de>
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	82 */
1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	83
2604 85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels Markus Kottlaender <markus@intevation.de> parents: 2596 diff changeset	84 import { mapState, mapGetters } from "vuex";
2684 c4da269238a4 client: waterlevel diagram: visualize data gaps Markus Kottlaender <markus@intevation.de> parents: 2653 diff changeset	85 import * as d3Base from "d3";
c4da269238a4 client: waterlevel diagram: visualize data gaps Markus Kottlaender <markus@intevation.de> parents: 2653 diff changeset	86 import { lineChunked } from "d3-line-chunked";
3050 c739b81b8f41 client: gauge waterlevel diagram: fixed date extent Markus Kottlaender <markus@intevation.de> parents: 3049 diff changeset	87 import { endOfDay } from "date-fns";
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	88 import debounce from "debounce";
3015 fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	89 import jsPDF from "jspdf";
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	90 import canvg from "canvg";
3137 35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	91 import { pdfgen } from "@/lib/mixins";
3140 91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	92 import { HTTP } from "@/lib/http";
91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	93 import { displayError } from "@/lib/errors";
2684 c4da269238a4 client: waterlevel diagram: visualize data gaps Markus Kottlaender <markus@intevation.de> parents: 2653 diff changeset	94 // we should load only d3 modules we need but for now we'll go with the lazy way
c4da269238a4 client: waterlevel diagram: visualize data gaps Markus Kottlaender <markus@intevation.de> parents: 2653 diff changeset	95 // https://www.giacomodebidda.com/how-to-import-d3-plugins-with-webpack/
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	96 // d3-line-chunked plugin: https://github.com/pbeshai/d3-line-chunked
2684 c4da269238a4 client: waterlevel diagram: visualize data gaps Markus Kottlaender <markus@intevation.de> parents: 2653 diff changeset	97 const d3 = Object.assign(d3Base, { lineChunked });
c4da269238a4 client: waterlevel diagram: visualize data gaps Markus Kottlaender <markus@intevation.de> parents: 2653 diff changeset	98
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	99 export default {
3137 35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	100 mixins: [pdfgen],
2839 162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2824 diff changeset	101 components: {
162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2824 diff changeset	102 DiagramLegend: () => import("@/components/DiagramLegend")
162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2824 diff changeset	103 },
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	104 data() {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	105 return {
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	106 containerId: "waterlevel-diagram-container",
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	107 svg: null,
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	108 diagram: null,
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	109 navigation: null,
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	110 dimensions: null,
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	111 extent: null,
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	112 scale: null,
3137 35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	113 axes: null,
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	114 form: {
3249 d91c1200dc6b client: diagram-template: cleanup code Fadi Abbud <fadi.abbud@intevation.de> parents: 3248 diff changeset	115 template: null
3137 35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	116 },
3143 8fdbc524e7b5 client: make the default template available to use even if backend provided templates Fadi Abbud <fadi.abbud@intevation.de> parents: 3142 diff changeset	117 templates: [],
8fdbc524e7b5 client: make the default template available to use even if backend provided templates Fadi Abbud <fadi.abbud@intevation.de> parents: 3142 diff changeset	118 defaultTemplate: {
8fdbc524e7b5 client: make the default template available to use even if backend provided templates Fadi Abbud <fadi.abbud@intevation.de> parents: 3142 diff changeset	119 name: "Default",
8fdbc524e7b5 client: make the default template available to use even if backend provided templates Fadi Abbud <fadi.abbud@intevation.de> parents: 3142 diff changeset	120 properties: {
3350 8da2f7b9a04b client: diagram-template:remove unnecessary template properties and typo Fadi Abbud <fadi.abbud@intevation.de> parents: 3348 diff changeset	121 paperSize: "a4"
3143 8fdbc524e7b5 client: make the default template available to use even if backend provided templates Fadi Abbud <fadi.abbud@intevation.de> parents: 3142 diff changeset	122 },
8fdbc524e7b5 client: make the default template available to use even if backend provided templates Fadi Abbud <fadi.abbud@intevation.de> parents: 3142 diff changeset	123 elements: [
8fdbc524e7b5 client: make the default template available to use even if backend provided templates Fadi Abbud <fadi.abbud@intevation.de> parents: 3142 diff changeset	124 {
3160 94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	125 type: "diagram",
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	126 position: "topleft",
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	127 offset: { x: 15, y: 50 },
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	128 width: 290,
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	129 height: 100
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	130 },
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	131 {
3143 8fdbc524e7b5 client: make the default template available to use even if backend provided templates Fadi Abbud <fadi.abbud@intevation.de> parents: 3142 diff changeset	132 type: "diagramlegend",
8fdbc524e7b5 client: make the default template available to use even if backend provided templates Fadi Abbud <fadi.abbud@intevation.de> parents: 3142 diff changeset	133 position: "topleft",
8fdbc524e7b5 client: make the default template available to use even if backend provided templates Fadi Abbud <fadi.abbud@intevation.de> parents: 3142 diff changeset	134 offset: { x: 30, y: 150 },
8fdbc524e7b5 client: make the default template available to use even if backend provided templates Fadi Abbud <fadi.abbud@intevation.de> parents: 3142 diff changeset	135 color: "black"
3137 35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	136 },
3143 8fdbc524e7b5 client: make the default template available to use even if backend provided templates Fadi Abbud <fadi.abbud@intevation.de> parents: 3142 diff changeset	137 {
8fdbc524e7b5 client: make the default template available to use even if backend provided templates Fadi Abbud <fadi.abbud@intevation.de> parents: 3142 diff changeset	138 type: "diagramtitle",
8fdbc524e7b5 client: make the default template available to use even if backend provided templates Fadi Abbud <fadi.abbud@intevation.de> parents: 3142 diff changeset	139 position: "topleft",
8fdbc524e7b5 client: make the default template available to use even if backend provided templates Fadi Abbud <fadi.abbud@intevation.de> parents: 3142 diff changeset	140 offset: { x: 50, y: 26 },
8fdbc524e7b5 client: make the default template available to use even if backend provided templates Fadi Abbud <fadi.abbud@intevation.de> parents: 3142 diff changeset	141 fontsize: 22,
8fdbc524e7b5 client: make the default template available to use even if backend provided templates Fadi Abbud <fadi.abbud@intevation.de> parents: 3142 diff changeset	142 color: "steelblue"
8fdbc524e7b5 client: make the default template available to use even if backend provided templates Fadi Abbud <fadi.abbud@intevation.de> parents: 3142 diff changeset	143 },
8fdbc524e7b5 client: make the default template available to use even if backend provided templates Fadi Abbud <fadi.abbud@intevation.de> parents: 3142 diff changeset	144 {
8fdbc524e7b5 client: make the default template available to use even if backend provided templates Fadi Abbud <fadi.abbud@intevation.de> parents: 3142 diff changeset	145 type: "text",
8fdbc524e7b5 client: make the default template available to use even if backend provided templates Fadi Abbud <fadi.abbud@intevation.de> parents: 3142 diff changeset	146 position: "topleft",
8fdbc524e7b5 client: make the default template available to use even if backend provided templates Fadi Abbud <fadi.abbud@intevation.de> parents: 3142 diff changeset	147 offset: { x: 3, y: 3 },
8fdbc524e7b5 client: make the default template available to use even if backend provided templates Fadi Abbud <fadi.abbud@intevation.de> parents: 3142 diff changeset	148 fontsize: 8,
8fdbc524e7b5 client: make the default template available to use even if backend provided templates Fadi Abbud <fadi.abbud@intevation.de> parents: 3142 diff changeset	149 width: 90,
8fdbc524e7b5 client: make the default template available to use even if backend provided templates Fadi Abbud <fadi.abbud@intevation.de> parents: 3142 diff changeset	150 color: "gray",
8fdbc524e7b5 client: make the default template available to use even if backend provided templates Fadi Abbud <fadi.abbud@intevation.de> parents: 3142 diff changeset	151 text: this.$gettext("Generated by") + " " + "{user}, {date}"
8fdbc524e7b5 client: make the default template available to use even if backend provided templates Fadi Abbud <fadi.abbud@intevation.de> parents: 3142 diff changeset	152 }
8fdbc524e7b5 client: make the default template available to use even if backend provided templates Fadi Abbud <fadi.abbud@intevation.de> parents: 3142 diff changeset	153 ]
8fdbc524e7b5 client: make the default template available to use even if backend provided templates Fadi Abbud <fadi.abbud@intevation.de> parents: 3142 diff changeset	154 },
3137 35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	155 pdf: {
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	156 doc: null,
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	157 width: 420,
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	158 height: 297
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	159 },
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	160 templateData: null
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	161 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	162 },
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	163 computed: {
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	164 ...mapState("application", ["paneSetup"]),
2820 d973d6f04eb6 client: spuc7: use newest data entry as right boundary for diagram instead of the selected toDate Markus Kottlaender <markus@intevation.de> parents: 2819 diff changeset	165 ...mapState("gauges", ["dateFrom", "waterlevels", "nashSutcliffe"]),
3049 7e6ecb6d0796 client: add headline info for the waterlevel generated diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	166 ...mapGetters("gauges", ["selectedGauge"]),
3137 35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	167 ...mapState("user", ["user"]),
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	168 title() {
3148 cdfb0093b7b1 client: gauge diagrams: added information to titles Markus Kottlaender <markus@intevation.de> parents: 3147 diff changeset	169 return `${this.selectedGauge.properties.objname}: ${this.$gettext(
cdfb0093b7b1 client: gauge diagrams: added information to titles Markus Kottlaender <markus@intevation.de> parents: 3147 diff changeset	170 "Waterlevel"
cdfb0093b7b1 client: gauge diagrams: added information to titles Markus Kottlaender <markus@intevation.de> parents: 3147 diff changeset	171 )} (${this.dateFrom.toLocaleDateString()} - ${this.dateTo.toLocaleDateString()})`;
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	172 },
3049 7e6ecb6d0796 client: add headline info for the waterlevel generated diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	173 dateFrom: {
7e6ecb6d0796 client: add headline info for the waterlevel generated diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	174 get() {
7e6ecb6d0796 client: add headline info for the waterlevel generated diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	175 return this.$store.state.gauges.dateFrom;
7e6ecb6d0796 client: add headline info for the waterlevel generated diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	176 }
7e6ecb6d0796 client: add headline info for the waterlevel generated diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	177 },
7e6ecb6d0796 client: add headline info for the waterlevel generated diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	178 dateTo: {
7e6ecb6d0796 client: add headline info for the waterlevel generated diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	179 get() {
7e6ecb6d0796 client: add headline info for the waterlevel generated diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	180 return this.$store.state.gauges.dateTo;
7e6ecb6d0796 client: add headline info for the waterlevel generated diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	181 }
7e6ecb6d0796 client: add headline info for the waterlevel generated diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	182 }
2596 8774054959a7 client: added Gauges dialog/tool to show waterlevel diagrams Markus Kottlaender <markus@intevation.de> parents: 2590 diff changeset	183 },
3068 492c30ca3142 client: diagrams: added watchers to ensure diagram update when data changes Markus Kottlaender <markus@intevation.de> parents: 3067 diff changeset	184 watch: {
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	185 paneSetup() {
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	186 this.$nextTick(() => this.drawDiagram());
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	187 },
3068 492c30ca3142 client: diagrams: added watchers to ensure diagram update when data changes Markus Kottlaender <markus@intevation.de> parents: 3067 diff changeset	188 waterlevels() {
492c30ca3142 client: diagrams: added watchers to ensure diagram update when data changes Markus Kottlaender <markus@intevation.de> parents: 3067 diff changeset	189 this.drawDiagram();
492c30ca3142 client: diagrams: added watchers to ensure diagram update when data changes Markus Kottlaender <markus@intevation.de> parents: 3067 diff changeset	190 }
492c30ca3142 client: diagrams: added watchers to ensure diagram update when data changes Markus Kottlaender <markus@intevation.de> parents: 3067 diff changeset	191 },
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	192 methods: {
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	193 close() {
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	194 this.$store.commit(
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	195 "application/paneSetup",
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	196 this.paneSetup === "GAUGE_WATERLEVEL_HYDROLOGICALCONDITIONS"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	197 ? "GAUGE_HYDROLOGICALCONDITIONS"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	198 : "DEFAULT"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	199 );
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	200 },
3015 fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	201 downloadPDF() {
3249 d91c1200dc6b client: diagram-template: cleanup code Fadi Abbud <fadi.abbud@intevation.de> parents: 3248 diff changeset	202 this.pdf.doc = new jsPDF(
d91c1200dc6b client: diagram-template: cleanup code Fadi Abbud <fadi.abbud@intevation.de> parents: 3248 diff changeset	203 "l",
d91c1200dc6b client: diagram-template: cleanup code Fadi Abbud <fadi.abbud@intevation.de> parents: 3248 diff changeset	204 "mm",
d91c1200dc6b client: diagram-template: cleanup code Fadi Abbud <fadi.abbud@intevation.de> parents: 3248 diff changeset	205 this.templateData.properties.paperSize
d91c1200dc6b client: diagram-template: cleanup code Fadi Abbud <fadi.abbud@intevation.de> parents: 3248 diff changeset	206 );
d91c1200dc6b client: diagram-template: cleanup code Fadi Abbud <fadi.abbud@intevation.de> parents: 3248 diff changeset	207 this.pdf.width =
d91c1200dc6b client: diagram-template: cleanup code Fadi Abbud <fadi.abbud@intevation.de> parents: 3248 diff changeset	208 this.templateData.properties.paperSize === "a3" ? 420 : 297;
d91c1200dc6b client: diagram-template: cleanup code Fadi Abbud <fadi.abbud@intevation.de> parents: 3248 diff changeset	209 this.pdf.height =
d91c1200dc6b client: diagram-template: cleanup code Fadi Abbud <fadi.abbud@intevation.de> parents: 3248 diff changeset	210 this.templateData.properties.paperSize === "a3" ? 297 : 210;
3179 6ddd3755350c client: fix the rendering of diagram on pdf by splitscreen case (waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 3160 diff changeset	211 // check the template elements
3137 35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	212 if (this.templateData) {
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	213 let defaultFontSize = 11,
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	214 defaultColor = "black",
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	215 defaultWidth = 70,
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	216 defaultTextColor = "black",
3141 42324626f9e2 client: add box element for pdf-template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3140 diff changeset	217 defaultBorderColor = "white",
42324626f9e2 client: add box element for pdf-template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3140 diff changeset	218 defaultBgColor = "white",
42324626f9e2 client: add box element for pdf-template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3140 diff changeset	219 defaultRounding = 2,
3154 b6c10b30d6bd client: pdf-gen: add one pdf-template element Fadi Abbud <fadi.abbud@intevation.de> parents: 3150 diff changeset	220 defaultPadding = 2,
3137 35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	221 defaultOffset = { x: 0, y: 0 };
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	222 this.templateData.elements.forEach(e => {
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	223 switch (e.type) {
3160 94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	224 case "diagram": {
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	225 this.addDiagram(
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	226 e.position,
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	227 e.offset \|\| defaultOffset,
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	228 e.width,
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	229 e.height
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	230 );
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	231 break;
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	232 }
3137 35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	233 case "diagramlegend": {
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	234 this.addDiagramLegend(
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	235 e.position,
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	236 e.offset \|\| defaultOffset,
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	237 e.color \|\| defaultColor
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	238 );
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	239 break;
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	240 }
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	241 case "diagramtitle": {
3285 aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js Fadi Abbud <fadi.abbud@intevation.de> parents: 3253 diff changeset	242 let gaugeInfo =
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js Fadi Abbud <fadi.abbud@intevation.de> parents: 3253 diff changeset	243 this.selectedGauge.properties.objname +
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js Fadi Abbud <fadi.abbud@intevation.de> parents: 3253 diff changeset	244 " (" +
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js Fadi Abbud <fadi.abbud@intevation.de> parents: 3253 diff changeset	245 this.selectedGauge.id
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js Fadi Abbud <fadi.abbud@intevation.de> parents: 3253 diff changeset	246 .split(".")[1]
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js Fadi Abbud <fadi.abbud@intevation.de> parents: 3253 diff changeset	247 .replace(/[()]/g, "")
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js Fadi Abbud <fadi.abbud@intevation.de> parents: 3253 diff changeset	248 .split(",")[3] +
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js Fadi Abbud <fadi.abbud@intevation.de> parents: 3253 diff changeset	249 "):" +
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js Fadi Abbud <fadi.abbud@intevation.de> parents: 3253 diff changeset	250 " Waterlevel " +
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js Fadi Abbud <fadi.abbud@intevation.de> parents: 3253 diff changeset	251 this.dateFrom.toLocaleDateString() +
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js Fadi Abbud <fadi.abbud@intevation.de> parents: 3253 diff changeset	252 " - " +
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js Fadi Abbud <fadi.abbud@intevation.de> parents: 3253 diff changeset	253 this.dateTo.toLocaleDateString();
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js Fadi Abbud <fadi.abbud@intevation.de> parents: 3253 diff changeset	254 this.addDiagramTitle(
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js Fadi Abbud <fadi.abbud@intevation.de> parents: 3253 diff changeset	255 e.position,
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js Fadi Abbud <fadi.abbud@intevation.de> parents: 3253 diff changeset	256 e.offset,
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js Fadi Abbud <fadi.abbud@intevation.de> parents: 3253 diff changeset	257 e.fontsize,
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js Fadi Abbud <fadi.abbud@intevation.de> parents: 3253 diff changeset	258 e.color,
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js Fadi Abbud <fadi.abbud@intevation.de> parents: 3253 diff changeset	259 gaugeInfo
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js Fadi Abbud <fadi.abbud@intevation.de> parents: 3253 diff changeset	260 );
3137 35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	261 break;
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	262 }
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	263 case "text": {
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	264 this.addText(
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	265 e.position,
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	266 e.offset \|\| defaultOffset,
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	267 e.width \|\| defaultWidth,
3242 3b770f8273b6 client: diagram-template: fix bug with font size Fadi Abbud <fadi.abbud@intevation.de> parents: 3229 diff changeset	268 e.fontsize \|\| defaultFontSize,
3137 35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	269 e.color \|\| defaultTextColor,
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	270 e.text
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	271 );
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	272 break;
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	273 }
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	274 case "image": {
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	275 this.addImage(
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	276 e.url,
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	277 e.format,
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	278 e.position,
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	279 e.offset \|\| defaultOffset,
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	280 e.width,
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	281 e.height
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	282 );
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	283 break;
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	284 }
3141 42324626f9e2 client: add box element for pdf-template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3140 diff changeset	285 case "box": {
42324626f9e2 client: add box element for pdf-template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3140 diff changeset	286 this.addBox(
42324626f9e2 client: add box element for pdf-template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3140 diff changeset	287 e.position,
42324626f9e2 client: add box element for pdf-template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3140 diff changeset	288 e.offset,
42324626f9e2 client: add box element for pdf-template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3140 diff changeset	289 e.width,
42324626f9e2 client: add box element for pdf-template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3140 diff changeset	290 e.height,
42324626f9e2 client: add box element for pdf-template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3140 diff changeset	291 e.rounding === 0 \|\| e.rounding ? e.rounding : defaultRounding,
42324626f9e2 client: add box element for pdf-template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3140 diff changeset	292 e.color \|\| defaultBgColor,
42324626f9e2 client: add box element for pdf-template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3140 diff changeset	293 e.brcolor \|\| defaultBorderColor
42324626f9e2 client: add box element for pdf-template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3140 diff changeset	294 );
42324626f9e2 client: add box element for pdf-template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3140 diff changeset	295 break;
42324626f9e2 client: add box element for pdf-template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3140 diff changeset	296 }
3154 b6c10b30d6bd client: pdf-gen: add one pdf-template element Fadi Abbud <fadi.abbud@intevation.de> parents: 3150 diff changeset	297 case "textbox": {
b6c10b30d6bd client: pdf-gen: add one pdf-template element Fadi Abbud <fadi.abbud@intevation.de> parents: 3150 diff changeset	298 this.addTextBox(
b6c10b30d6bd client: pdf-gen: add one pdf-template element Fadi Abbud <fadi.abbud@intevation.de> parents: 3150 diff changeset	299 e.position,
b6c10b30d6bd client: pdf-gen: add one pdf-template element Fadi Abbud <fadi.abbud@intevation.de> parents: 3150 diff changeset	300 e.offset \|\| defaultOffset,
b6c10b30d6bd client: pdf-gen: add one pdf-template element Fadi Abbud <fadi.abbud@intevation.de> parents: 3150 diff changeset	301 e.width,
b6c10b30d6bd client: pdf-gen: add one pdf-template element Fadi Abbud <fadi.abbud@intevation.de> parents: 3150 diff changeset	302 e.height,
b6c10b30d6bd client: pdf-gen: add one pdf-template element Fadi Abbud <fadi.abbud@intevation.de> parents: 3150 diff changeset	303 e.rounding === 0 \|\| e.rounding ? e.rounding : defaultRounding,
b6c10b30d6bd client: pdf-gen: add one pdf-template element Fadi Abbud <fadi.abbud@intevation.de> parents: 3150 diff changeset	304 e.padding \|\| defaultPadding,
3242 3b770f8273b6 client: diagram-template: fix bug with font size Fadi Abbud <fadi.abbud@intevation.de> parents: 3229 diff changeset	305 e.fontsize \|\| defaultFontSize,
3154 b6c10b30d6bd client: pdf-gen: add one pdf-template element Fadi Abbud <fadi.abbud@intevation.de> parents: 3150 diff changeset	306 e.color \|\| defaultTextColor,
b6c10b30d6bd client: pdf-gen: add one pdf-template element Fadi Abbud <fadi.abbud@intevation.de> parents: 3150 diff changeset	307 e.background \|\| defaultBgColor,
b6c10b30d6bd client: pdf-gen: add one pdf-template element Fadi Abbud <fadi.abbud@intevation.de> parents: 3150 diff changeset	308 e.text,
b6c10b30d6bd client: pdf-gen: add one pdf-template element Fadi Abbud <fadi.abbud@intevation.de> parents: 3150 diff changeset	309 e.brcolor \|\| defaultBorderColor
b6c10b30d6bd client: pdf-gen: add one pdf-template element Fadi Abbud <fadi.abbud@intevation.de> parents: 3150 diff changeset	310 );
3242 3b770f8273b6 client: diagram-template: fix bug with font size Fadi Abbud <fadi.abbud@intevation.de> parents: 3229 diff changeset	311 break;
3154 b6c10b30d6bd client: pdf-gen: add one pdf-template element Fadi Abbud <fadi.abbud@intevation.de> parents: 3150 diff changeset	312 }
3137 35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	313 }
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	314 });
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	315 }
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	316 this.pdf.doc.save(
3049 7e6ecb6d0796 client: add headline info for the waterlevel generated diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	317 this.selectedGauge.properties.objname + " Waterlevel-Diagram.pdf"
7e6ecb6d0796 client: add headline info for the waterlevel generated diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	318 );
3015 fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	319 },
3140 91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	320 applyChange() {
3143 8fdbc524e7b5 client: make the default template available to use even if backend provided templates Fadi Abbud <fadi.abbud@intevation.de> parents: 3142 diff changeset	321 if (this.form.template.hasOwnProperty("properties")) {
8fdbc524e7b5 client: make the default template available to use even if backend provided templates Fadi Abbud <fadi.abbud@intevation.de> parents: 3142 diff changeset	322 this.templateData = this.defaultTemplate;
8fdbc524e7b5 client: make the default template available to use even if backend provided templates Fadi Abbud <fadi.abbud@intevation.de> parents: 3142 diff changeset	323 return;
8fdbc524e7b5 client: make the default template available to use even if backend provided templates Fadi Abbud <fadi.abbud@intevation.de> parents: 3142 diff changeset	324 }
3140 91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	325 if (this.form.template) {
3229 5e773e0c05be client: diagram-template: adjust the routes for waterlevels and hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3222 diff changeset	326 HTTP.get("/templates/diagram/" + this.form.template.name, {
3140 91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	327 headers: {
91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	328 "X-Gemma-Auth": localStorage.getItem("token"),
91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	329 "Content-type": "text/xml; charset=UTF-8"
91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	330 }
91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	331 })
91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	332 .then(response => {
91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	333 this.templateData = response.data.template_data;
91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	334 })
91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	335 .catch(e => {
91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	336 const { status, data } = e.response;
91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	337 displayError({
91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	338 title: this.$gettext("Backend Error"),
91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	339 message: `${status}: ${data.message \|\| data}`
91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	340 });
91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	341 });
91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	342 }
91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	343 },
3160 94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	344 addDiagram(position, offset, width, height) {
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	345 let x = offset.x,
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	346 y = offset.y;
3248 3159ee3bcb16 client: diagram-template: improve size of pdf-container element Fadi Abbud <fadi.abbud@intevation.de> parents: 3242 diff changeset	347 // check if there are tow diagrams on screen
3179 6ddd3755350c client: fix the rendering of diagram on pdf by splitscreen case (waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 3160 diff changeset	348 if (
6ddd3755350c client: fix the rendering of diagram on pdf by splitscreen case (waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 3160 diff changeset	349 ["GAUGE_WATERLEVEL_HYDROLOGICALCONDITIONS"].indexOf(this.paneSetup) !==
6ddd3755350c client: fix the rendering of diagram on pdf by splitscreen case (waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 3160 diff changeset	350 -1
6ddd3755350c client: fix the rendering of diagram on pdf by splitscreen case (waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 3160 diff changeset	351 ) {
6ddd3755350c client: fix the rendering of diagram on pdf by splitscreen case (waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 3160 diff changeset	352 this.containerId = "pdfContainer";
3248 3159ee3bcb16 client: diagram-template: improve size of pdf-container element Fadi Abbud <fadi.abbud@intevation.de> parents: 3242 diff changeset	353 // set width and height
3159ee3bcb16 client: diagram-template: improve size of pdf-container element Fadi Abbud <fadi.abbud@intevation.de> parents: 3242 diff changeset	354 document.querySelector("#pdfContainer").style.width =
3159ee3bcb16 client: diagram-template: improve size of pdf-container element Fadi Abbud <fadi.abbud@intevation.de> parents: 3242 diff changeset	355 document.querySelector("#waterlevel-diagram-container").clientWidth *
3159ee3bcb16 client: diagram-template: improve size of pdf-container element Fadi Abbud <fadi.abbud@intevation.de> parents: 3242 diff changeset	356 2 +
3159ee3bcb16 client: diagram-template: improve size of pdf-container element Fadi Abbud <fadi.abbud@intevation.de> parents: 3242 diff changeset	357 "px";
3159ee3bcb16 client: diagram-template: improve size of pdf-container element Fadi Abbud <fadi.abbud@intevation.de> parents: 3242 diff changeset	358 document.querySelector("#pdfContainer").style.height =
3159ee3bcb16 client: diagram-template: improve size of pdf-container element Fadi Abbud <fadi.abbud@intevation.de> parents: 3242 diff changeset	359 document.querySelector("#waterlevel-diagram-container").clientHeight +
3159ee3bcb16 client: diagram-template: improve size of pdf-container element Fadi Abbud <fadi.abbud@intevation.de> parents: 3242 diff changeset	360 "px";
3179 6ddd3755350c client: fix the rendering of diagram on pdf by splitscreen case (waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 3160 diff changeset	361 this.drawDiagram();
6ddd3755350c client: fix the rendering of diagram on pdf by splitscreen case (waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 3160 diff changeset	362 }
3160 94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	363 var svg = document.getElementById(this.containerId).innerHTML;
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	364 if (svg) {
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	365 svg = svg.replace(/\r?\n\|\r/g, "").trim();
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	366 }
3179 6ddd3755350c client: fix the rendering of diagram on pdf by splitscreen case (waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 3160 diff changeset	367 this.containerId = "waterlevel-diagram-container";
3160 94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	368 var canvas = document.createElement("canvas");
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	369 canvas.width = window.innerWidth;
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	370 canvas.height = window.innerHeight / 2;
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	371 canvg(canvas, svg, {
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	372 ignoreMouse: true,
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	373 ignoreAnimation: true,
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	374 ignoreDimensions: true
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	375 });
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	376 var imgData = canvas.toDataURL("image/png");
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	377 // landscape format is used for both a3,a4 papersize
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	378 if (!width) {
3249 d91c1200dc6b client: diagram-template: cleanup code Fadi Abbud <fadi.abbud@intevation.de> parents: 3248 diff changeset	379 width = this.templateData.properties.paperSize === "a3" ? 380 : 290;
3160 94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	380 }
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	381 if (!height) {
3249 d91c1200dc6b client: diagram-template: cleanup code Fadi Abbud <fadi.abbud@intevation.de> parents: 3248 diff changeset	382 height = this.templateData.properties.paperSize === "a3" ? 130 : 100;
3160 94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	383 }
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	384 if (["topright", "bottomright"].indexOf(position) !== -1) {
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	385 x = this.pdf.width - offset.x - width;
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	386 }
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	387 if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	388 y = this.pdf.height - offset.y - height;
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	389 }
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	390 this.pdf.doc.addImage(imgData, "PNG", x, y, width, height);
94935895e6d7 client: add diagram-element to template (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3154 diff changeset	391 },
3129 136b86794453 client: improve pdf-gen code for diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3112 diff changeset	392 // Diagram legend
3137 35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	393 addDiagramLegend(position, offset, color) {
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	394 let x = offset.x;
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	395 let y = offset.y;
3343 13bb0ff62ac8 client: diagram-template: cleanup (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3323 diff changeset	396 this.pdf.doc.setFontSize(10);
13bb0ff62ac8 client: diagram-template: cleanup (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3323 diff changeset	397 let width =
13bb0ff62ac8 client: diagram-template: cleanup (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3323 diff changeset	398 (this.pdf.doc.getStringUnitWidth("Navigable Range") * 10) /
13bb0ff62ac8 client: diagram-template: cleanup (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3323 diff changeset	399 (72 / 25.6) +
13bb0ff62ac8 client: diagram-template: cleanup (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3323 diff changeset	400 5;
3137 35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	401 if (["topright", "bottomright"].indexOf(position) !== -1) {
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	402 x = this.pdf.width - offset.x - width;
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	403 }
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	404 if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
3343 13bb0ff62ac8 client: diagram-template: cleanup (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3323 diff changeset	405 y = this.pdf.height - offset.y - this.getTextHeight(4);
3137 35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	406 }
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	407 this.pdf.doc.setTextColor(color);
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	408 this.pdf.doc.setDrawColor("white");
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	409 this.pdf.doc.setFillColor("steelblue");
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	410 this.pdf.doc.circle(x, y, 2, "FD");
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	411 this.pdf.doc.text(x + 3, y + 1, "Waterlevel");
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	412 this.pdf.doc.setFillColor("#dae6f0");
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	413 this.pdf.doc.circle(x, y + 5, 2, "FD");
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	414 this.pdf.doc.setFillColor("#e5ffe5");
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	415 this.pdf.doc.circle(x, y + 10, 2, "FD");
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	416 this.pdf.doc.text(x + 3, y + 11, "Navigable Range");
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	417 this.pdf.doc.setDrawColor("#90b4d2");
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	418 this.pdf.doc.setFillColor("#90b4d2");
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	419 this.pdf.doc.circle(x, y + 5, 0.6, "FD");
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	420 this.pdf.doc.text(x + 3, y + 6, "Prediction");
3129 136b86794453 client: improve pdf-gen code for diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3112 diff changeset	421 },
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	422 drawDiagram() {
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	423 // remove old diagram and exit if necessary data is missing
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	424 d3.select("#" + this.containerId + " svg").remove();
2701 e622689d73bd client: waterlevel diagram: use endpoint Markus Kottlaender <markus@intevation.de> parents: 2695 diff changeset	425 if (!this.selectedGauge \|\| !this.waterlevels.length) return;
e622689d73bd client: waterlevel diagram: use endpoint Markus Kottlaender <markus@intevation.de> parents: 2695 diff changeset	426
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	427 // PREPARE HELPERS
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	428
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	429 // HDC/LDC/MW for the selected gauge
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	430 const refWaterLevels = JSON.parse(
2604 85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels Markus Kottlaender <markus@intevation.de> parents: 2596 diff changeset	431 this.selectedGauge.properties.reference_water_levels
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels Markus Kottlaender <markus@intevation.de> parents: 2596 diff changeset	432 );
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels Markus Kottlaender <markus@intevation.de> parents: 2596 diff changeset	433
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	434 // dimensions (widths, heights, margins)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	435 this.dimensions = this.getDimensions();
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	436
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	437 // get min/max values for date and waterlevel axis
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	438 this.extent = this.getExtent(refWaterLevels);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	439
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	440 // scaling helpers
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	441 this.scale = this.getScale();
2610 5ce1b4b29869 client: waterlevel diagram: refactored code for better readability Markus Kottlaender <markus@intevation.de> parents: 2607 diff changeset	442
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	443 // creating the axes based on the scales
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	444 this.axes = {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	445 x: d3
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	446 .axisTop(this.scale.x)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	447 .tickSizeInner(this.dimensions.mainHeight)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	448 .tickSizeOuter(0),
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	449 y: d3
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	450 .axisRight(this.scale.y)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	451 .tickSizeInner(this.dimensions.width)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	452 .tickSizeOuter(0),
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	453 x2: d3.axisBottom(this.scale.x2)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	454 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	455
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	456 // DRAW DIAGRAM/NAVIGATION AREAS
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	457
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	458 // create svg
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	459 this.svg = d3
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	460 .select("#" + this.containerId)
2610 5ce1b4b29869 client: waterlevel diagram: refactored code for better readability Markus Kottlaender <markus@intevation.de> parents: 2607 diff changeset	461 .append("svg")
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability Markus Kottlaender <markus@intevation.de> parents: 2607 diff changeset	462 .attr("width", "100%")
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability Markus Kottlaender <markus@intevation.de> parents: 2607 diff changeset	463 .attr("height", "100%");
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	464
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	465 // create container for main diagram
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	466 this.diagram = this.svg
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	467 .append("g")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	468 .attr("class", "main")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	469 .attr(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	470 "transform",
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	471 `translate(${this.dimensions.mainMargin.left}, ${
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	472 this.dimensions.mainMargin.top
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	473 })`
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	474 );
2756 ee2530ee1c0b client: waterlevel diagram: use chunkedLine for nav chart too Markus Kottlaender <markus@intevation.de> parents: 2751 diff changeset	475
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	476 // create container for navigation diagram
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	477 this.navigation = this.svg
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	478 .append("g")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	479 .attr("class", "nav")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	480 .attr(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	481 "transform",
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	482 `translate(${this.dimensions.navMargin.left}, ${
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	483 this.dimensions.navMargin.top
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	484 })`
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	485 );
2775 2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	486
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	487 // define visible area, everything outside this area will be hidden
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	488 this.svg
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	489 .append("defs")
1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	490 .append("clipPath")
3147 25c0cbfcc515 client: gauge diagrams: fixed bug related to same clippath id in multiple diagrams Markus Kottlaender <markus@intevation.de> parents: 3146 diff changeset	491 .attr("id", "waterlevel-clip")
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	492 .append("rect")
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	493 .attr("width", this.dimensions.width)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	494 .attr("height", this.dimensions.mainHeight);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	495
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	496 // DRAW DIAGRAM PARTS
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	497
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	498 // Each drawSomething function (with the exception of drawRefLines)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	499 // returns a fuction to update the respective chart/area/etc. These
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	500 // updater functions are used by the zoom feature to rescale all elements.
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	501 const updaters = [];
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	502
3346 83210507aaca client: waterlevel diagram: improved readability of nash sutcliffe Markus Kottlaender <markus@intevation.de> parents: 3343 diff changeset	503 // draw (order matters)
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	504 updaters.push(this.drawAxes());
3253 3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	505 updaters.push(this.drawWaterlevelChart());
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	506 updaters.push(this.drawPredictionAreas());
3211 f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	507 updaters.push(this.drawNowLines());
3253 3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	508
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	509 // static, don't need updater
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	510 this.drawNavigationChart();
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	511 this.drawRefLines(refWaterLevels);
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	512
3346 83210507aaca client: waterlevel diagram: improved readability of nash sutcliffe Markus Kottlaender <markus@intevation.de> parents: 3343 diff changeset	513 updaters.push(this.drawNashSutcliffe(72));
83210507aaca client: waterlevel diagram: improved readability of nash sutcliffe Markus Kottlaender <markus@intevation.de> parents: 3343 diff changeset	514 updaters.push(this.drawNashSutcliffe(48));
83210507aaca client: waterlevel diagram: improved readability of nash sutcliffe Markus Kottlaender <markus@intevation.de> parents: 3343 diff changeset	515 updaters.push(this.drawNashSutcliffe(24));
83210507aaca client: waterlevel diagram: improved readability of nash sutcliffe Markus Kottlaender <markus@intevation.de> parents: 3343 diff changeset	516
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	517 // INTERACTIONS
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	518
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	519 // create rectanlge on the main chart area to capture mouse events
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	520 const eventRect = this.svg
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	521 .append("rect")
3212 f87fd173f750 client: waterlevel diagrams: fixed tooltip bug Markus Kottlaender <markus@intevation.de> parents: 3211 diff changeset	522 .attr("id", "zoom-waterlevels")
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	523 .attr("class", "zoom")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	524 .attr("width", this.dimensions.width)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	525 .attr("height", this.dimensions.mainHeight)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	526 .attr(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	527 "transform",
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	528 `translate(${this.dimensions.mainMargin.left}, ${
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	529 this.dimensions.mainMargin.top
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	530 })`
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	531 );
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	532
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	533 this.createZoom(updaters, eventRect);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	534 this.createTooltips(eventRect);
3015 fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	535 this.setInlineStyles();
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	536 },
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	537 //set the styles of the diagrams to include them in the pdf
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	538 setInlineStyles() {
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	539 this.svg
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	540 .selectAll(".line")
3147 25c0cbfcc515 client: gauge diagrams: fixed bug related to same clippath id in multiple diagrams Markus Kottlaender <markus@intevation.de> parents: 3146 diff changeset	541 .attr("clip-path", "url(#waterlevel-clip)")
3015 fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	542 .selectAll("path")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	543 .attr("stroke", "steelblue")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	544 .attr("stroke-width", 2)
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	545 .attr("fill", "none");
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	546 this.svg
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	547 .selectAll(".line")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	548 .selectAll("path.d3-line-chunked-chunk-gap")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	549 .attr("stroke-opacity", 0);
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	550 this.svg
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	551 .selectAll(".line")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	552 .selectAll("circle")
3107 8e364945a390 client: adjust some styles for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3068 diff changeset	553 .attr("fill", "steelblue")
8e364945a390 client: adjust some styles for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3068 diff changeset	554 .attr("stroke-width", 0);
3015 fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	555 this.svg
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	556 .selectAll(".line")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	557 .selectAll("circle.d3-line-chunked-chunk-predicted-point")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	558 .attr("fill-opacity", 0.6);
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	559
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	560 this.svg
3209 5b8916b78cea client: waterlevel diagrams: check which reference waterlevels are available and added RN as possible option Markus Kottlaender <markus@intevation.de> parents: 3179 diff changeset	561 .selectAll(".hdc-line, .mw-line, .ldc-line, .rn-line")
3015 fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	562 .attr("stroke-width", 1)
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	563 .attr("fill", "none")
3147 25c0cbfcc515 client: gauge diagrams: fixed bug related to same clippath id in multiple diagrams Markus Kottlaender <markus@intevation.de> parents: 3146 diff changeset	564 .attr("clip-path", "url(#waterlevel-clip)");
3015 fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	565 this.svg.selectAll(".hdc-line").attr("stroke", "red");
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	566 this.svg.selectAll(".ldc-line").attr("stroke", "green");
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	567 this.svg.selectAll(".mw-line").attr("stroke", "grey");
3209 5b8916b78cea client: waterlevel diagrams: check which reference waterlevels are available and added RN as possible option Markus Kottlaender <markus@intevation.de> parents: 3179 diff changeset	568 this.svg.selectAll(".rn-line").attr("stroke", "grey");
3015 fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	569 this.svg
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	570 .selectAll(".ref-waterlevel-label")
3211 f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	571 .style("font-size", "10px")
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	572 .attr("fill", "black");
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	573 this.svg
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	574 .selectAll(".ref-waterlevel-label-background")
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	575 .attr("fill", "rgba(255, 255, 255, 0.6)");
3015 fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	576 this.svg.selectAll(".hdc-ldc-area").attr("fill", "rgba(0, 255, 0, 0.1)");
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	577 this.svg
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	578 .selectAll(".now-line")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	579 .attr("stroke", "#999")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	580 .attr("stroke-width", 1)
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	581 .attr("stroke-dasharray", "5, 5")
3147 25c0cbfcc515 client: gauge diagrams: fixed bug related to same clippath id in multiple diagrams Markus Kottlaender <markus@intevation.de> parents: 3146 diff changeset	582 .attr("clip-path", "url(#waterlevel-clip)");
3015 fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	583 this.svg
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	584 .selectAll(".now-line-label")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	585 .attr("font-size", "11px")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	586 .attr("fill", "#999");
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	587 this.svg
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	588 .selectAll(".prediction-area")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	589 .attr("fill", "steelblue")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	590 .attr("fill-opacity", 0.2)
3147 25c0cbfcc515 client: gauge diagrams: fixed bug related to same clippath id in multiple diagrams Markus Kottlaender <markus@intevation.de> parents: 3146 diff changeset	591 .attr("clip-path", "url(#waterlevel-clip)");
3015 fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	592 this.svg
3107 8e364945a390 client: adjust some styles for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3068 diff changeset	593 .selectAll("path.nash-sutcliffe")
3015 fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	594 .attr("fill", "none")
3348 7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	595 .attr("stroke", "darkgrey")
3015 fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	596 .attr("stroke-width", 1)
3147 25c0cbfcc515 client: gauge diagrams: fixed bug related to same clippath id in multiple diagrams Markus Kottlaender <markus@intevation.de> parents: 3146 diff changeset	597 .attr("clip-path", "url(#waterlevel-clip)");
3015 fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	598 this.svg
3107 8e364945a390 client: adjust some styles for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3068 diff changeset	599 .selectAll("path.nash-sutcliffe.ns72")
3346 83210507aaca client: waterlevel diagram: improved readability of nash sutcliffe Markus Kottlaender <markus@intevation.de> parents: 3343 diff changeset	600 .attr("fill", "rgba(255, 255, 255, 0.5)");
3015 fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	601 this.svg
3107 8e364945a390 client: adjust some styles for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3068 diff changeset	602 .selectAll("text.nash-sutcliffe")
3045 44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	603 .style("font-size", "10px")
3147 25c0cbfcc515 client: gauge diagrams: fixed bug related to same clippath id in multiple diagrams Markus Kottlaender <markus@intevation.de> parents: 3146 diff changeset	604 .attr("clip-path", "url(#waterlevel-clip)")
3348 7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	605 .selectAll("tspan:last-child, tspan:first-child")
3346 83210507aaca client: waterlevel diagram: improved readability of nash sutcliffe Markus Kottlaender <markus@intevation.de> parents: 3343 diff changeset	606 .attr("fill", "#555");
3015 fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	607 this.svg
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	608 .selectAll(".tick line")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	609 .attr("stroke-dasharray", 5)
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	610 .attr("stroke", "#ccc");
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	611 this.svg.selectAll(".tick text").attr("fill", "black");
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	612 this.svg.selectAll(".domain").attr("stroke", "black");
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	613 this.svg
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	614 .selectAll(".zoom")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	615 .attr("cursor", "move")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	616 .attr("fill", "none")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	617 .attr("pointer-events", "all");
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	618 this.svg
3107 8e364945a390 client: adjust some styles for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3068 diff changeset	619 .selectAll(".brush .selection")
3015 fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	620 .attr("stroke", "none")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	621 .attr("fill-opacity", 0.2);
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	622 this.svg
3107 8e364945a390 client: adjust some styles for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3068 diff changeset	623 .selectAll(".brush .handle")
3015 fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	624 .attr("stroke", "rgba(23, 162, 184, 0.5)")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	625 .attr("fill", "rgba(23, 162, 184, 0.5)");
3147 25c0cbfcc515 client: gauge diagrams: fixed bug related to same clippath id in multiple diagrams Markus Kottlaender <markus@intevation.de> parents: 3146 diff changeset	626 this.svg
25c0cbfcc515 client: gauge diagrams: fixed bug related to same clippath id in multiple diagrams Markus Kottlaender <markus@intevation.de> parents: 3146 diff changeset	627 .selectAll(".chart-dots")
25c0cbfcc515 client: gauge diagrams: fixed bug related to same clippath id in multiple diagrams Markus Kottlaender <markus@intevation.de> parents: 3146 diff changeset	628 .attr("clip-path", "url(#waterlevel-clip)");
3045 44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	629 this.svg
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	630 .selectAll(".chart-dots .chart-dot")
3107 8e364945a390 client: adjust some styles for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3068 diff changeset	631 .attr("fill", "steelblue")
8e364945a390 client: adjust some styles for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3068 diff changeset	632 .attr("stroke", "steelblue")
3045 44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	633 .attr("stroke-opacity", 0)
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	634 .style("pointer-events", "none")
3046 c764c73f44b4 client: fix chart-tooltip style for diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3045 diff changeset	635 .transition()
c764c73f44b4 client: fix chart-tooltip style for diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3045 diff changeset	636 .attr("fill-opacity", "0.1s");
3045 44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	637 this.svg
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	638 .selectAll(".chart-tooltip")
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	639 .attr("fill-opacity", 0)
3046 c764c73f44b4 client: fix chart-tooltip style for diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3045 diff changeset	640 .transition()
c764c73f44b4 client: fix chart-tooltip style for diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3045 diff changeset	641 .attr("fill-opacity", "0.3s");
3045 44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	642 this.svg
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	643 .selectAll(".chart-tooltip rect")
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	644 .attr("fill", "#fff")
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	645 .attr("stroke", "#ccc");
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	646 this.svg
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	647 .selectAll(".chart-tooltip text")
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	648 .attr("fill", "666")
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	649 .style("font-size", "0.8em");
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	650 },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	651 getDimensions() {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	652 // dimensions and margins
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	653 const svgWidth = document.querySelector("#" + this.containerId)
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	654 .clientWidth;
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	655 const svgHeight = document.querySelector("#" + this.containerId)
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	656 .clientHeight;
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	657 const mainMargin = { top: 20, right: 20, bottom: 110, left: 80 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	658 const navMargin = {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	659 top: svgHeight - mainMargin.top - 65,
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	660 right: 20,
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	661 bottom: 30,
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	662 left: 80
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	663 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	664 const width = +svgWidth - mainMargin.left - mainMargin.right;
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	665 const mainHeight = +svgHeight - mainMargin.top - mainMargin.bottom;
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	666 const navHeight = +svgHeight - navMargin.top - navMargin.bottom;
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	667
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	668 return { width, mainHeight, navHeight, mainMargin, navMargin };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	669 },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	670 getExtent(refWaterLevels) {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	671 return {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	672 // set min/max values for the date axis
2820 d973d6f04eb6 client: spuc7: use newest data entry as right boundary for diagram instead of the selected toDate Markus Kottlaender <markus@intevation.de> parents: 2819 diff changeset	673 date: [
3050 c739b81b8f41 client: gauge waterlevel diagram: fixed date extent Markus Kottlaender <markus@intevation.de> parents: 3049 diff changeset	674 this.waterlevels[0].date,
2820 d973d6f04eb6 client: spuc7: use newest data entry as right boundary for diagram instead of the selected toDate Markus Kottlaender <markus@intevation.de> parents: 2819 diff changeset	675 endOfDay(this.waterlevels[this.waterlevels.length - 1].date)
d973d6f04eb6 client: spuc7: use newest data entry as right boundary for diagram instead of the selected toDate Markus Kottlaender <markus@intevation.de> parents: 2819 diff changeset	676 ],
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	677 // set min/max values for the waterlevel axis
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	678 // including HDC (+ 1/8 HDC-LDC) and LDC (- 1/4 HDC-LDC)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	679 waterlevel: d3.extent(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	680 [
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	681 ...this.waterlevels,
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	682 {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	683 waterlevel:
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	684 refWaterLevels.HDC +
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	685 (refWaterLevels.HDC - refWaterLevels.LDC) / 8
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	686 },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	687 {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	688 waterlevel: Math.max(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	689 refWaterLevels.LDC -
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	690 (refWaterLevels.HDC - refWaterLevels.LDC) / 4,
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	691 0
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	692 )
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	693 }
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	694 ],
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	695 d => d.waterlevel
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	696 )
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	697 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	698 },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	699 getScale() {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	700 // scaling helpers to convert real world values into pixels
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	701 const x = d3.scaleTime().range([0, this.dimensions.width]);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	702 const y = d3.scaleLinear().range([this.dimensions.mainHeight, 0]);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	703 const x2 = d3.scaleTime().range([0, this.dimensions.width]);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	704 const y2 = d3.scaleLinear().range([this.dimensions.navHeight, 0]);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	705
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	706 // setting the min and max values for the diagram axes
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	707 x.domain(d3.extent(this.extent.date));
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	708 y.domain(this.extent.waterlevel);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	709 x2.domain(x.domain());
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	710 y2.domain(y.domain());
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	711
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	712 return { x, y, x2, y2 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	713 },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	714 drawAxes() {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	715 this.diagram
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	716 .append("g")
2652 a2dd96c305be client: waterlevel diagram: fixed animated x-axis in mainchart when zooming Markus Kottlaender <markus@intevation.de> parents: 2648 diff changeset	717 .attr("class", "axis--x")
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	718 .attr("transform", `translate(0, ${this.dimensions.mainHeight})`)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	719 .call(this.axes.x)
2648 4ffae834276e client: waterlevel diagram: added background grid to chart Markus Kottlaender <markus@intevation.de> parents: 2646 diff changeset	720 .selectAll(".tick text")
4ffae834276e client: waterlevel diagram: added background grid to chart Markus Kottlaender <markus@intevation.de> parents: 2646 diff changeset	721 .attr("y", 15);
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	722 this.diagram // label
2641 a735119e4f5c client: waterlevel diagram: added y-axis label Markus Kottlaender <markus@intevation.de> parents: 2611 diff changeset	723 .append("text")
2642 ffef5f89b31c client: waterlevel diagram: changed diagram title and y-axis label Markus Kottlaender <markus@intevation.de> parents: 2641 diff changeset	724 .text(this.$gettext("Waterlevel [cm]"))
2641 a735119e4f5c client: waterlevel diagram: added y-axis label Markus Kottlaender <markus@intevation.de> parents: 2611 diff changeset	725 .attr("text-anchor", "middle")
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	726 .attr(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	727 "transform",
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	728 `translate(-45, ${this.dimensions.mainHeight / 2}) rotate(-90)`
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	729 );
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	730 this.diagram
2648 4ffae834276e client: waterlevel diagram: added background grid to chart Markus Kottlaender <markus@intevation.de> parents: 2646 diff changeset	731 .append("g")
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	732 .call(this.axes.y)
2648 4ffae834276e client: waterlevel diagram: added background grid to chart Markus Kottlaender <markus@intevation.de> parents: 2646 diff changeset	733 .selectAll(".tick text")
4ffae834276e client: waterlevel diagram: added background grid to chart Markus Kottlaender <markus@intevation.de> parents: 2646 diff changeset	734 .attr("x", -25);
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	735
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	736 this.navigation
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	737 .append("g")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	738 .attr("class", "axis axis--x")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	739 .attr("transform", `translate(0, ${this.dimensions.navHeight})`)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	740 .call(this.axes.x2);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	741
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	742 return () => {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	743 this.diagram
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	744 .select(".axis--x")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	745 .call(this.axes.x)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	746 .selectAll(".tick text")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	747 .attr("y", 15);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	748 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	749 },
3253 3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	750 drawWaterlevelChart() {
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	751 const waterlevelChartDrawer = () => {
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	752 let domainLeft = new Date(this.scale.x.domain()[0].getTime());
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	753 let domainRight = new Date(this.scale.x.domain()[1].getTime());
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	754 domainLeft.setDate(domainLeft.getDate() - 1);
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	755 domainRight.setDate(domainRight.getDate() + 1);
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	756
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	757 return (
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	758 d3
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	759 .lineChunked()
3252 fccb28813159 client: wterlevel diagram: improved performance Markus Kottlaender <markus@intevation.de> parents: 3249 diff changeset	760 // render only data points that are visible in the current scale
3253 3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	761 .defined(d => d.date > domainLeft && d.date < domainRight)
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	762 .x(d => this.scale.x(d.date))
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	763 .y(d => this.scale.y(d.waterlevel))
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	764 .curve(d3.curveLinear)
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	765 .isNext(this.isNext())
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	766 .pointAttrs({ r: 1.7 })
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	767 .chunk(d => (d.predicted ? "predicted" : "line"))
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	768 .chunkDefinitions({ predicted: {} })
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	769 );
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	770 };
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	771
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	772 this.diagram
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	773 .append("g")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	774 .attr("class", "line")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	775 .datum(this.waterlevels)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	776 .call(waterlevelChartDrawer());
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	777
3253 3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	778 return () => {
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	779 this.diagram.select(".line").call(waterlevelChartDrawer());
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	780 };
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	781 },
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	782 drawNavigationChart() {
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	783 this.navigation
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	784 .append("g")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	785 .attr("class", "line")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	786 .datum(this.waterlevels)
3253 3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	787 .call(
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	788 d3
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	789 .lineChunked()
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	790 .x(d => this.scale.x2(d.date))
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	791 .y(d => this.scale.y2(d.waterlevel))
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	792 .curve(d3.curveLinear)
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	793 .isNext(this.isNext())
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	794 .pointAttrs({ r: 1.7 })
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	795 .chunk(d => (d.predicted ? "predicted" : "line"))
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	796 .chunkDefinitions({ predicted: {} })
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	797 );
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	798 },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	799 drawNowLines() {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	800 const nowLine = d3
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	801 .line()
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	802 .x(d => this.scale.x(d.x))
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	803 .y(d => this.scale.y(d.y));
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	804
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	805 const nowLabel = selection => {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	806 selection.attr(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	807 "transform",
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	808 `translate(${this.scale.x(new Date())}, ${this.scale.y(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	809 this.extent.waterlevel[1] - 16
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	810 )})`
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	811 );
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	812 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	813
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	814 // draw in main
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	815 this.diagram
2604 85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels Markus Kottlaender <markus@intevation.de> parents: 2596 diff changeset	816 .append("path")
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels Markus Kottlaender <markus@intevation.de> parents: 2596 diff changeset	817 .datum([
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	818 { x: new Date(), y: this.extent.waterlevel[0] },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	819 { x: new Date(), y: this.extent.waterlevel[1] - 20 }
2775 2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	820 ])
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	821 .attr("class", "now-line")
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	822 .attr("d", nowLine);
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	823 this.diagram // label
2775 2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	824 .append("text")
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	825 .text(this.$gettext("Now"))
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	826 .attr("class", "now-line-label")
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	827 .attr("text-anchor", "middle")
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	828 .call(nowLabel);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	829
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	830 // draw in nav
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	831 this.navigation
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	832 .append("path")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	833 .datum([
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	834 { x: new Date(), y: this.extent.waterlevel[0] },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	835 { x: new Date(), y: this.extent.waterlevel[1] - 20 }
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	836 ])
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	837 .attr("class", "now-line")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	838 .attr(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	839 "d",
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	840 d3
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	841 .line()
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	842 .x(d => this.scale.x2(d.x))
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	843 .y(d => this.scale.y2(d.y))
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	844 );
2775 2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	845
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	846 return () => {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	847 this.diagram.select(".now-line").attr("d", nowLine);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	848 this.diagram.select(".now-line-label").call(nowLabel);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	849 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	850 },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	851 drawPredictionAreas() {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	852 const predictionArea = isNav =>
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	853 d3
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	854 .area()
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	855 .defined(d => d.predicted && d.min && d.max)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	856 .x(d => this.scale[isNav ? "x2" : "x"](d.date))
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	857 .y0(d => this.scale[isNav ? "y2" : "y"](d.min))
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	858 .y1(d => this.scale[isNav ? "y2" : "y"](d.max));
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	859
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	860 this.diagram
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	861 .append("path")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	862 .datum(this.waterlevels)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	863 .attr("class", "prediction-area")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	864 .attr("d", predictionArea());
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	865
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	866 this.navigation
2775 2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	867 .append("path")
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	868 .datum(this.waterlevels)
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	869 .attr("class", "prediction-area")
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	870 .attr("d", predictionArea(true));
2610 5ce1b4b29869 client: waterlevel diagram: refactored code for better readability Markus Kottlaender <markus@intevation.de> parents: 2607 diff changeset	871
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	872 return () => {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	873 this.diagram.select(".prediction-area").attr("d", predictionArea());
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	874 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	875 },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	876 drawRefLines(refWaterLevels) {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	877 // filling area between HDC and LDC
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	878 this.diagram
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	879 .append("rect")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	880 .attr("class", "hdc-ldc-area")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	881 .attr("x", 0)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	882 .attr("y", this.scale.y(refWaterLevels.HDC))
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	883 .attr("width", this.dimensions.width)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	884 .attr(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	885 "height",
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	886 this.scale.y(refWaterLevels.LDC) - this.scale.y(refWaterLevels.HDC)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	887 );
2610 5ce1b4b29869 client: waterlevel diagram: refactored code for better readability Markus Kottlaender <markus@intevation.de> parents: 2607 diff changeset	888
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	889 const refWaterlevelLine = d3
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	890 .line()
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	891 .x(d => this.scale.x(d.x))
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	892 .y(d => this.scale.y(d.y));
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	893
3211 f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	894 for (let ref in refWaterLevels) {
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	895 if (refWaterLevels[ref]) {
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	896 this.diagram
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	897 .append("path")
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	898 .datum([
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	899 { x: 0, y: refWaterLevels[ref] },
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	900 { x: this.extent.date[1], y: refWaterLevels[ref] }
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	901 ])
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	902 .attr("class", ref.toLowerCase() + "-line")
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	903 .attr("d", refWaterlevelLine);
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	904 this.diagram // label
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	905 .append("rect")
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	906 .attr("class", "ref-waterlevel-label-background")
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	907 .attr("x", 1)
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	908 .attr("y", this.scale.y(refWaterLevels[ref]) - 13)
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	909 .attr("width", 55)
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	910 .attr("height", 12);
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	911 this.diagram
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	912 .append("text")
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	913 .text(`${ref} (${refWaterLevels[ref]})`)
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	914 .attr("class", "ref-waterlevel-label")
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	915 .attr("x", 5)
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	916 .attr("y", this.scale.y(refWaterLevels[ref]) - 3);
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	917 }
3209 5b8916b78cea client: waterlevel diagrams: check which reference waterlevels are available and added RN as possible option Markus Kottlaender <markus@intevation.de> parents: 3179 diff changeset	918 }
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	919 },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	920 drawNashSutcliffe(hours) {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	921 const coeff = this.nashSutcliffe.coeffs.find(c => c.hours === hours);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	922 const dateNow = new Date(this.nashSutcliffe.when);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	923 const dateStart = new Date(dateNow.getTime() - hours * 60 * 60 * 1000);
2751 5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe Markus Kottlaender <markus@intevation.de> parents: 2728 diff changeset	924
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe Markus Kottlaender <markus@intevation.de> parents: 2728 diff changeset	925 const nashSutcliffeBox = hours => {
3348 7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	926 // show/hide boxes depending on scale of chart (hide if > 90 days)
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	927 this.diagram
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	928 .selectAll("path.nash-sutcliffe")
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	929 .attr(
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	930 "stroke-opacity",
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	931 this.scale.x.domain()[1] - this.scale.x.domain()[0] > 90 * 86400000
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	932 ? 0
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	933 : 1
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	934 );
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	935
2751 5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe Markus Kottlaender <markus@intevation.de> parents: 2728 diff changeset	936 return d3
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe Markus Kottlaender <markus@intevation.de> parents: 2728 diff changeset	937 .area()
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	938 .x(d => this.scale.x(d))
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	939 .y0(() => this.dimensions.mainHeight + 0.5)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	940 .y1(() => this.dimensions.mainHeight - 15 * (hours / 24));
2751 5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe Markus Kottlaender <markus@intevation.de> parents: 2728 diff changeset	941 };
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe Markus Kottlaender <markus@intevation.de> parents: 2728 diff changeset	942
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe Markus Kottlaender <markus@intevation.de> parents: 2728 diff changeset	943 const nashSutcliffeLabel = (label, date, hours) => {
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe Markus Kottlaender <markus@intevation.de> parents: 2728 diff changeset	944 let days = hours / 24;
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe Markus Kottlaender <markus@intevation.de> parents: 2728 diff changeset	945 label
3348 7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	946 .attr("x", Math.min(this.scale.x(date), this.dimensions.width) - 4)
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	947 .attr("y", this.dimensions.mainHeight - (15 * days + 0.5) + 12);
2751 5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe Markus Kottlaender <markus@intevation.de> parents: 2728 diff changeset	948 };
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe Markus Kottlaender <markus@intevation.de> parents: 2728 diff changeset	949
3348 7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	950 if (coeff.samples) {
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	951 this.diagram
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	952 .append("path")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	953 .datum([dateStart, dateNow])
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	954 .attr("class", "nash-sutcliffe ns" + hours)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	955 .attr("d", nashSutcliffeBox(hours));
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	956 this.diagram
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	957 .append("text")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	958 .attr("class", "nash-sutcliffe ns" + hours)
3348 7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	959 .attr("text-anchor", "end")
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	960 .call(nashSutcliffeLabel, dateNow, hours)
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	961 .append("tspan")
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	962 .text(hours + "h: ")
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	963 .select(function() {
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	964 return this.parentNode;
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	965 })
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	966 .append("tspan")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	967 .text(coeff.value.toFixed(2))
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	968 .select(function() {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	969 return this.parentNode;
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	970 })
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	971 .append("tspan")
3348 7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	972 .text(` (${coeff.samples})`);
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	973 }
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	974
3348 7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	975 return () => {
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	976 this.diagram
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	977 .select("path.nash-sutcliffe.ns" + hours)
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	978 .attr("d", nashSutcliffeBox(hours));
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	979 this.diagram
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	980 .select("text.nash-sutcliffe.ns" + hours)
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	981 .call(nashSutcliffeLabel, dateNow, hours);
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	982 };
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	983 },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	984 createZoom(updaters, eventRect) {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	985 const brush = d3
2610 5ce1b4b29869 client: waterlevel diagram: refactored code for better readability Markus Kottlaender <markus@intevation.de> parents: 2607 diff changeset	986 .brushX()
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability Markus Kottlaender <markus@intevation.de> parents: 2607 diff changeset	987 .handleSize(4)
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	988 .extent([[0, 0], [this.dimensions.width, this.dimensions.navHeight]]);
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	989
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	990 const zoom = d3
2610 5ce1b4b29869 client: waterlevel diagram: refactored code for better readability Markus Kottlaender <markus@intevation.de> parents: 2607 diff changeset	991 .zoom()
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability Markus Kottlaender <markus@intevation.de> parents: 2607 diff changeset	992 .scaleExtent([1, Infinity])
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	993 .translateExtent([
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	994 [0, 0],
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	995 [this.dimensions.width, this.dimensions.mainHeight]
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	996 ])
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	997 .extent([[0, 0], [this.dimensions.width, this.dimensions.mainHeight]]);
2610 5ce1b4b29869 client: waterlevel diagram: refactored code for better readability Markus Kottlaender <markus@intevation.de> parents: 2607 diff changeset	998
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	999 brush.on("brush end", () => {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1000 if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1001 return; // ignore brush-by-zoom
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1002 let s = d3.event.selection \|\| this.scale.x2.range();
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1003 this.scale.x.domain(s.map(this.scale.x2.invert, this.scale.x2));
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1004 updaters.forEach(u => u && u());
3045 44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	1005 this.setInlineStyles();
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1006 this.svg
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1007 .select(".zoom")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1008 .call(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1009 zoom.transform,
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1010 d3.zoomIdentity
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1011 .scale(this.dimensions.width / (s[1] - s[0]))
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1012 .translate(-s[0], 0)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1013 );
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1014 });
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1015
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1016 zoom.on("zoom", () => {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1017 if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1018 return; // ignore zoom-by-brush
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1019 let t = d3.event.transform;
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1020 this.scale.x.domain(t.rescaleX(this.scale.x2).domain());
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1021 updaters.forEach(u => u && u());
3045 44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	1022 this.setInlineStyles();
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1023 this.navigation
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1024 .select(".brush")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1025 .call(brush.move, this.scale.x.range().map(t.invertX, t));
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1026 });
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1027 zoom.on("start", () => {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1028 this.svg.select(".chart-dot").style("opacity", 0);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1029 this.svg.select(".chart-tooltip").style("opacity", 0);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1030 });
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1031
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1032 this.navigation
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1033 .append("g")
1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1034 .attr("class", "brush")
1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1035 .call(brush)
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1036 .call(brush.move, this.scale.x.range());
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1037
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1038 eventRect.call(zoom);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1039 },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1040 createTooltips(eventRect) {
2816 c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1041 // create clippable container for the dot
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1042 this.diagram
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1043 .append("g")
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1044 .attr("class", "chart-dots")
2689 8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart Markus Kottlaender <markus@intevation.de> parents: 2684 diff changeset	1045 .append("circle")
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart Markus Kottlaender <markus@intevation.de> parents: 2684 diff changeset	1046 .attr("class", "chart-dot")
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart Markus Kottlaender <markus@intevation.de> parents: 2684 diff changeset	1047 .attr("r", 4);
2816 c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1048
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1049 // create container for the tooltip
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1050 const tooltip = this.diagram.append("g").attr("class", "chart-tooltip");
2819 53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1051 tooltip
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1052 .append("rect")
2842 37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1053 .attr("rx", "0.25em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1054 .attr("ry", "0.25em");
2816 c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1055
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1056 // create container for multiple text rows
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1057 const tooltipText = tooltip.append("text").attr("text-anchor", "middle");
2819 53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1058
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1059 // padding inside the tooltip box and diagram padding to determine left
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1060 // and right offset from the diagram boundaries for the tooltip position.
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1061 const tooltipPadding = 10;
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1062 const diagramPadding = 5;
2689 8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart Markus Kottlaender <markus@intevation.de> parents: 2684 diff changeset	1063
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1064 eventRect
2689 8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart Markus Kottlaender <markus@intevation.de> parents: 2684 diff changeset	1065 .on("mouseover", () => {
2816 c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1066 this.diagram.select(".chart-dot").style("opacity", 1);
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1067 this.diagram.select(".chart-tooltip").style("opacity", 1);
2689 8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart Markus Kottlaender <markus@intevation.de> parents: 2684 diff changeset	1068 })
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart Markus Kottlaender <markus@intevation.de> parents: 2684 diff changeset	1069 .on("mouseout", () => {
2816 c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1070 this.diagram.select(".chart-dot").style("opacity", 0);
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1071 this.diagram.select(".chart-tooltip").style("opacity", 0);
2689 8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart Markus Kottlaender <markus@intevation.de> parents: 2684 diff changeset	1072 })
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart Markus Kottlaender <markus@intevation.de> parents: 2684 diff changeset	1073 .on("mousemove", () => {
2816 c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1074 // find data point closest to mouse
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1075 const x0 = this.scale.x.invert(
3212 f87fd173f750 client: waterlevel diagrams: fixed tooltip bug Markus Kottlaender <markus@intevation.de> parents: 3211 diff changeset	1076 d3.mouse(document.getElementById("zoom-waterlevels"))[0]
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1077 ),
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1078 i = d3.bisector(d => d.date).left(this.waterlevels, x0, 1),
2689 8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart Markus Kottlaender <markus@intevation.de> parents: 2684 diff changeset	1079 d0 = this.waterlevels[i - 1],
2715 8d96b9254465 client: waterlevel diagram: fixed console error when hovering the chart where no data is available Markus Kottlaender <markus@intevation.de> parents: 2710 diff changeset	1080 d1 = this.waterlevels[i] \|\| d0,
2689 8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart Markus Kottlaender <markus@intevation.de> parents: 2684 diff changeset	1081 d = x0 - d0.date > d1.date - x0 ? d1 : d0;
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart Markus Kottlaender <markus@intevation.de> parents: 2684 diff changeset	1082
2816 c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1083 const coords = {
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1084 x: this.scale.x(d.date),
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1085 y: this.scale.y(d.waterlevel)
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1086 };
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1087
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1088 // position the dot
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1089 this.diagram
2689 8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart Markus Kottlaender <markus@intevation.de> parents: 2684 diff changeset	1090 .select(".chart-dot")
2691 023a607c4bcc client: waterlevel diagram: fixed tooltip display while moving/zooming the chart Markus Kottlaender <markus@intevation.de> parents: 2689 diff changeset	1091 .style("opacity", 1)
2816 c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1092 .attr("transform", `translate(${coords.x}, ${coords.y})`);
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1093
2819 53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1094 // remove current texts
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1095 tooltipText.selectAll("tspan").remove();
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1096
2816 c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1097 // write date
2819 53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1098 tooltipText
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1099 .append("tspan")
2842 37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1100 .attr("dominant-baseline", "hanging")
2819 53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1101 .attr("text-anchor", "middle")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1102 .text(
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1103 d.date.toLocaleString([], {
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1104 year: "2-digit",
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1105 month: "2-digit",
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1106 day: "2-digit",
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1107 hour: "2-digit",
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1108 minute: "2-digit"
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1109 })
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1110 );
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1111
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1112 if (d.predicted) {
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1113 tooltipText
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1114 .append("tspan")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1115 .attr("x", 0)
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1116 .attr("y", 0)
2842 37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1117 .attr("dy", "1.4em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1118 .attr("dominant-baseline", "hanging")
2819 53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1119 .attr("text-anchor", "middle")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1120 .text(d.max + " cm");
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1121 tooltipText
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1122 .append("tspan")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1123 .attr("x", 0)
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1124 .attr("y", 0)
2842 37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1125 .attr("dy", "2.6em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1126 .attr("dominant-baseline", "hanging")
2819 53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1127 .attr("text-anchor", "middle")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1128 .attr("class", "font-weight-bold")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1129 .text(d.waterlevel + " cm");
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1130 tooltipText
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1131 .append("tspan")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1132 .attr("x", 0)
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1133 .attr("y", 0)
2842 37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1134 .attr("dy", "3.8em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1135 .attr("dominant-baseline", "hanging")
2819 53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1136 .attr("text-anchor", "middle")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1137 .text(d.min + " cm");
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1138 } else {
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1139 tooltipText
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1140 .append("tspan")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1141 .attr("x", 0)
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1142 .attr("y", 0)
2842 37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1143 .attr("dy", "1.4em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1144 .attr("dominant-baseline", "hanging")
2819 53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1145 .attr("text-anchor", "middle")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1146 .attr("class", "font-weight-bold")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1147 .text(d.waterlevel + " cm");
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1148 }
2816 c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1149
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1150 // get text dimensions
2819 53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1151 const textBBox = tooltipText.node().getBBox();
2816 c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1152
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1153 this.diagram
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1154 .selectAll(".chart-tooltip text tspan")
2819 53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1155 .attr("x", textBBox.width / 2 + tooltipPadding)
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1156 .attr("y", tooltipPadding);
2816 c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1157
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1158 // position and scale tooltip box
2819 53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1159 const xMax =
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1160 this.dimensions.width -
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1161 (textBBox.width + diagramPadding + tooltipPadding * 2);
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1162 const tooltipX = Math.max(
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1163 diagramPadding,
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1164 Math.min(coords.x - (textBBox.width + tooltipPadding * 2) / 2, xMax)
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1165 );
2824 d7c4169516fa client: spuc7/8: further improved tooltip positioning Markus Kottlaender <markus@intevation.de> parents: 2821 diff changeset	1166 let tooltipY = coords.y - (textBBox.height + tooltipPadding * 2) - 10;
d7c4169516fa client: spuc7/8: further improved tooltip positioning Markus Kottlaender <markus@intevation.de> parents: 2821 diff changeset	1167 if (coords.y < textBBox.height + tooltipPadding * 2) {
d7c4169516fa client: spuc7/8: further improved tooltip positioning Markus Kottlaender <markus@intevation.de> parents: 2821 diff changeset	1168 tooltipY = coords.y + 10;
d7c4169516fa client: spuc7/8: further improved tooltip positioning Markus Kottlaender <markus@intevation.de> parents: 2821 diff changeset	1169 }
d7c4169516fa client: spuc7/8: further improved tooltip positioning Markus Kottlaender <markus@intevation.de> parents: 2821 diff changeset	1170
2816 c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1171 this.diagram
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1172 .select(".chart-tooltip")
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1173 .style("opacity", 1)
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1174 .attr("transform", `translate(${tooltipX}, ${tooltipY})`)
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1175 .select("rect")
2819 53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1176 .attr("width", textBBox.width + tooltipPadding * 2)
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1177 .attr("height", textBBox.height + tooltipPadding * 2);
2689 8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart Markus Kottlaender <markus@intevation.de> parents: 2684 diff changeset	1178 });
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1179 },
3252 fccb28813159 client: wterlevel diagram: improved performance Markus Kottlaender <markus@intevation.de> parents: 3249 diff changeset	1180 isNext() {
fccb28813159 client: wterlevel diagram: improved performance Markus Kottlaender <markus@intevation.de> parents: 3249 diff changeset	1181 // Check whether points in the chart can be considered "next to each other".
fccb28813159 client: wterlevel diagram: improved performance Markus Kottlaender <markus@intevation.de> parents: 3249 diff changeset	1182 // For that they need to be exactly 15 minutes apart (for automatically
fccb28813159 client: wterlevel diagram: improved performance Markus Kottlaender <markus@intevation.de> parents: 3249 diff changeset	1183 // imported gauge measurements). If the chart shows more than 15 days then
fccb28813159 client: wterlevel diagram: improved performance Markus Kottlaender <markus@intevation.de> parents: 3249 diff changeset	1184 // 1 hour is also valid (for approved gauge measurements).
fccb28813159 client: wterlevel diagram: improved performance Markus Kottlaender <markus@intevation.de> parents: 3249 diff changeset	1185 return (prev, current) => {
fccb28813159 client: wterlevel diagram: improved performance Markus Kottlaender <markus@intevation.de> parents: 3249 diff changeset	1186 let difference = (current.date - prev.date) / 1000;
fccb28813159 client: wterlevel diagram: improved performance Markus Kottlaender <markus@intevation.de> parents: 3249 diff changeset	1187 if (
fccb28813159 client: wterlevel diagram: improved performance Markus Kottlaender <markus@intevation.de> parents: 3249 diff changeset	1188 (this.scale.x.domain()[1] - this.scale.x.domain()[0]) / 86400000 >
fccb28813159 client: wterlevel diagram: improved performance Markus Kottlaender <markus@intevation.de> parents: 3249 diff changeset	1189 15
fccb28813159 client: wterlevel diagram: improved performance Markus Kottlaender <markus@intevation.de> parents: 3249 diff changeset	1190 )
fccb28813159 client: wterlevel diagram: improved performance Markus Kottlaender <markus@intevation.de> parents: 3249 diff changeset	1191 return [900, 3600].includes(difference);
fccb28813159 client: wterlevel diagram: improved performance Markus Kottlaender <markus@intevation.de> parents: 3249 diff changeset	1192 return difference === 900;
fccb28813159 client: wterlevel diagram: improved performance Markus Kottlaender <markus@intevation.de> parents: 3249 diff changeset	1193 };
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1194 }
1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1195 },
1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1196 created() {
1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1197 window.addEventListener("resize", debounce(this.drawDiagram), 100);
1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1198 },
2810 97cf32cf2562 client: waterlevel diagram: draw diagram when component is mounted Markus Kottlaender <markus@intevation.de> parents: 2805 diff changeset	1199 mounted() {
3303 d6405c6769a3 client: waterlevel diagram: wait for child component before rendering diagram Markus Kottlaender <markus@intevation.de> parents: 3295 diff changeset	1200 // Nasty but necessary if we don't want to use the updated hook to re-draw
d6405c6769a3 client: waterlevel diagram: wait for child component before rendering diagram Markus Kottlaender <markus@intevation.de> parents: 3295 diff changeset	1201 // the diagram because this would re-draw it also for irrelevant reasons.
d6405c6769a3 client: waterlevel diagram: wait for child component before rendering diagram Markus Kottlaender <markus@intevation.de> parents: 3295 diff changeset	1202 // In this case we need to wait for the child component (DiagramLegend) to
d6405c6769a3 client: waterlevel diagram: wait for child component before rendering diagram Markus Kottlaender <markus@intevation.de> parents: 3295 diff changeset	1203 // render. According to the docs (https://vuejs.org/v2/api/#mounted) this
d6405c6769a3 client: waterlevel diagram: wait for child component before rendering diagram Markus Kottlaender <markus@intevation.de> parents: 3295 diff changeset	1204 // should be possible with $nextTick() but it doesn't work because it does
d6405c6769a3 client: waterlevel diagram: wait for child component before rendering diagram Markus Kottlaender <markus@intevation.de> parents: 3295 diff changeset	1205 // not guarantee that the DOM is not only updated but also re-painted on the
d6405c6769a3 client: waterlevel diagram: wait for child component before rendering diagram Markus Kottlaender <markus@intevation.de> parents: 3295 diff changeset	1206 // screen.
d6405c6769a3 client: waterlevel diagram: wait for child component before rendering diagram Markus Kottlaender <markus@intevation.de> parents: 3295 diff changeset	1207 setTimeout(this.drawDiagram, 50);
d6405c6769a3 client: waterlevel diagram: wait for child component before rendering diagram Markus Kottlaender <markus@intevation.de> parents: 3295 diff changeset	1208
3143 8fdbc524e7b5 client: make the default template available to use even if backend provided templates Fadi Abbud <fadi.abbud@intevation.de> parents: 3142 diff changeset	1209 this.templates[0] = this.defaultTemplate;
3137 35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	1210 this.form.template = this.templates[0];
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	1211 this.templateData = this.form.template;
3229 5e773e0c05be client: diagram-template: adjust the routes for waterlevels and hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3222 diff changeset	1212 HTTP.get("/templates/diagram", {
3140 91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	1213 headers: {
91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	1214 "X-Gemma-Auth": localStorage.getItem("token"),
91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	1215 "Content-type": "text/xml; charset=UTF-8"
91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	1216 }
91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	1217 })
91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	1218 .then(response => {
91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	1219 if (response.data.length) {
91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	1220 this.templates = response.data;
91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	1221 this.form.template = this.templates[0];
3143 8fdbc524e7b5 client: make the default template available to use even if backend provided templates Fadi Abbud <fadi.abbud@intevation.de> parents: 3142 diff changeset	1222 this.templates[this.templates.length] = this.defaultTemplate;
3140 91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	1223 this.applyChange();
91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	1224 }
91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	1225 })
91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	1226 .catch(e => {
91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	1227 const { status, data } = e.response;
91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	1228 displayError({
91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	1229 title: this.$gettext("Backend Error"),
91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	1230 message: `${status}: ${data.message \|\| data}`
91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	1231 });
91556825d95c client: implement geting templates from backend for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3139 diff changeset	1232 });
2810 97cf32cf2562 client: waterlevel diagram: draw diagram when component is mounted Markus Kottlaender <markus@intevation.de> parents: 2805 diff changeset	1233 },
2986 7ee9a3ef90d4 client: remove resize event listener from diagrams after they are closed Markus Kottlaender <markus@intevation.de> parents: 2843 diff changeset	1234 destroyed() {
3067 0ffa9d418959 client: remove window resize listeners when closing diagram Markus Kottlaender <markus@intevation.de> parents: 3056 diff changeset	1235 window.removeEventListener("resize", debounce(this.drawDiagram));
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1236 }
1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1237 };
1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1238 </script>

Mercurial > gemma

annotate client/src/components/gauge/Waterlevel.vue @ 3350:8da2f7b9a04b