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

annotate client/src/components/gauge/Waterlevel.vue @ 3678:8f58851927c0

client: make layer factory only return new layer config for individual maps instead of each time it is invoked. The purpose of the factory was to support multiple maps with individual layers. But returning a new config each time it is invoked leads to bugs that rely on the layer's state. Now this factory reuses the same objects it created before, per map.

author	Markus Kottlaender <markus@intevation.de>
date	Mon, 17 Jun 2019 17:31:35 +0200
parents	c03170a1c333
children	c086f5176ef2

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

Mercurial > gemma

annotate client/src/components/gauge/Waterlevel.vue @ 3678:8f58851927c0