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

annotate client/src/components/gauge/Waterlevel.vue @ 4721:b2119cf5c7fb

mark date for translation

author	Thomas Junk <thomas.junk@intevation.de>
date	Thu, 17 Oct 2019 16:21:12 +0200
parents	cd9216c073fd
children	9412bc2545e8

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">
3992 2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	3 <UIBoxHeader
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	4 icon="ruler-vertical"
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	5 :title="title"
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	6 :closeCallback="close"
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	7 class="rounded-0"
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	8 />
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	9 <div class="d-flex flex-fill">
3992 2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 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>
4593 3632cfc44b69 client: mark diagram strings for translations(waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4473 diff changeset	15 <span class="fix-trans-space" style="display:inline;" v-translate
3632cfc44b69 client: mark diagram strings for translations(waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4473 diff changeset	16 >Waterlevel</span
3632cfc44b69 client: mark diagram strings for translations(waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4473 diff changeset	17 >
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	18 </div>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	19 <div class="legend">
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	20 <span
3323 de0d0685a17b client: improve diagram-legends style Fadi Abbud <fadi.abbud@intevation.de> parents: 3304 diff changeset	21 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	22 ></span>
4593 3632cfc44b69 client: mark diagram strings for translations(waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4473 diff changeset	23 <span class="fix-trans-space" style="display:inline;" v-translate
3632cfc44b69 client: mark diagram strings for translations(waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4473 diff changeset	24 >Prediction</span
3632cfc44b69 client: mark diagram strings for translations(waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4473 diff changeset	25 >
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	26 </div>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	27 <div class="legend">
3323 de0d0685a17b client: improve diagram-legends style Fadi Abbud <fadi.abbud@intevation.de> parents: 3304 diff changeset	28 <span
de0d0685a17b client: improve diagram-legends style Fadi Abbud <fadi.abbud@intevation.de> parents: 3304 diff changeset	29 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	30 ></span>
4593 3632cfc44b69 client: mark diagram strings for translations(waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4473 diff changeset	31 <span class="fix-trans-space" style="display:inline;" v-translate
3632cfc44b69 client: mark diagram strings for translations(waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4473 diff changeset	32 >Navigable Range</span
3632cfc44b69 client: mark diagram strings for translations(waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4473 diff changeset	33 >
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	34 </div>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	35 <div>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	36 <select
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	37 @change="applyChange"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	38 v-model="form.template"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	39 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	40 >
3146 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 v-for="template in templates"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	43 :value="template"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	44 :key="template.name"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	45 >
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	46 {{ template.name }}
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	47 </option>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	48 </select>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	49 <button
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	50 @click="downloadPDF"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	51 type="button"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	52 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	53 :disabled="!waterlevels.length"
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	54 >
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	55 <translate>Export to PDF</translate>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	56 </button>
3403 d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	57 <a
3404 0c9467003d14 client: waterlevel diagrams: disabled export buttons when no data is available Markus Kottlaender <markus@intevation.de> parents: 3403 diff changeset	58 :class="[
0c9467003d14 client: waterlevel diagrams: disabled export buttons when no data is available Markus Kottlaender <markus@intevation.de> parents: 3403 diff changeset	59 '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	60 { disabled: !waterlevels.length }
0c9467003d14 client: waterlevel diagrams: disabled export buttons when no data is available Markus Kottlaender <markus@intevation.de> parents: 3403 diff changeset	61 ]"
3403 d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	62 :href="csvLink"
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	63 :download="csvFileName"
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	64 >
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	65 <translate>Export as CSV</translate>
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	66 </a>
3565 f6d67697f158 client: improve waterlevel diagram Bernhard Reiter <bernhard@intevation.de> parents: 3564 diff changeset	67
3793 d428f283fe10 client: remove `export SVG` button for waterlevel Bernhard Reiter <bernhard@intevation.de> parents: 3787 diff changeset	68 <!--
3565 f6d67697f158 client: improve waterlevel diagram Bernhard Reiter <bernhard@intevation.de> parents: 3564 diff changeset	69 <button
f6d67697f158 client: improve waterlevel diagram Bernhard Reiter <bernhard@intevation.de> parents: 3564 diff changeset	70 @click="downloadSVG"
f6d67697f158 client: improve waterlevel diagram Bernhard Reiter <bernhard@intevation.de> parents: 3564 diff changeset	71 type="button"
f6d67697f158 client: improve waterlevel diagram Bernhard Reiter <bernhard@intevation.de> parents: 3564 diff changeset	72 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	73 :disabled="!waterlevels.length"
f6d67697f158 client: improve waterlevel diagram Bernhard Reiter <bernhard@intevation.de> parents: 3564 diff changeset	74 >
f6d67697f158 client: improve waterlevel diagram Bernhard Reiter <bernhard@intevation.de> parents: 3564 diff changeset	75 <translate>Export as SVG</translate>
f6d67697f158 client: improve waterlevel diagram Bernhard Reiter <bernhard@intevation.de> parents: 3564 diff changeset	76 </button>
3793 d428f283fe10 client: remove `export SVG` button for waterlevel Bernhard Reiter <bernhard@intevation.de> parents: 3787 diff changeset	77 -->
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	78 </div>
4381 275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	79 <div class="btn-group-toggle w-100 mt-2">
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	80 <label
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	81 class="btn btn-outline-secondary btn-sm"
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	82 :class="{ active: showNSC }"
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	83 ><input
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	84 type="checkbox"
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	85 v-model="showNSC"
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	86 autocomplete="off"
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	87 />Nash-Sutcliffe
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	88 </label>
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	89 </div>
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	90 </DiagramLegend>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	91 <div
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	92 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	93 :id="containerId"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	94 >
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	95 <div v-if="!waterlevels.length">
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	96 <translate>No data available.</translate>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	97 </div>
2839 162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2824 diff changeset	98 </div>
2701 e622689d73bd client: waterlevel diagram: use endpoint Markus Kottlaender <markus@intevation.de> parents: 2695 diff changeset	99 </div>
e622689d73bd client: waterlevel diagram: use endpoint Markus Kottlaender <markus@intevation.de> parents: 2695 diff changeset	100 </div>
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	101 </template>
1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	102
1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	103 <script>
1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	104 /* 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	105 * without warranty, see README.md and license for details.
1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	106 *
1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	107 * SPDX-License-Identifier: AGPL-3.0-or-later
1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	108 * License-Filename: LICENSES/AGPL-3.0.txt
1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	109 *
3112 e838609bc10d client: fix license header for waterlevel.vue and hydrologicalconditions.vue Fadi Abbud <fadi.abbud@intevation.de> parents: 3110 diff changeset	110 * Copyright (C) 2019 by via donau
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	111 * – Österreichische Wasserstraßen-Gesellschaft mbH
1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	112 * Software engineering by Intevation GmbH
1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	113 *
1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	114 * Author(s):
3564 f50bde7eed0d client: improve copyright header for gauge/Waterlevel.vue Bernhard Reiter <bernhard@intevation.de> parents: 3563 diff changeset	115 * * Bernhard Reiter <bernhard@intevation.de>
f50bde7eed0d client: improve copyright header for gauge/Waterlevel.vue Bernhard Reiter <bernhard@intevation.de> parents: 3563 diff changeset	116 * * 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	117 * * Fadi Abbud <fadi.abbud@intevation.de>
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	118 */
3992 2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	119
4721 b2119cf5c7fb mark date for translation Thomas Junk <thomas.junk@intevation.de> parents: 4713 diff changeset	120 import app from "@/main";
2604 85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels Markus Kottlaender <markus@intevation.de> parents: 2596 diff changeset	121 import { mapState, mapGetters } from "vuex";
2684 c4da269238a4 client: waterlevel diagram: visualize data gaps Markus Kottlaender <markus@intevation.de> parents: 2653 diff changeset	122 import * as d3Base from "d3";
c4da269238a4 client: waterlevel diagram: visualize data gaps Markus Kottlaender <markus@intevation.de> parents: 2653 diff changeset	123 import { lineChunked } from "d3-line-chunked";
3992 2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	124 import debounce from "debounce";
3565 f6d67697f158 client: improve waterlevel diagram Bernhard Reiter <bernhard@intevation.de> parents: 3564 diff changeset	125 import { saveAs } from "file-saver";
4153 7c44af0b9370 client: Waterleveldiagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4150 diff changeset	126 import { diagram, pdfgen, templateLoader, refwaterlevels } from "@/lib/mixins";
3992 2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	127 import { HTTP } from "@/lib/http";
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	128 import { displayError } from "@/lib/errors";
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	129 import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate";
4665 c47c8085cc7e client: translation: implement marking of diagram labels Fadi Abbud <fadi.abbud@intevation.de> parents: 4593 diff changeset	130 import { localeDateString } from "@/lib/datelocalization";
2684 c4da269238a4 client: waterlevel diagram: visualize data gaps Markus Kottlaender <markus@intevation.de> parents: 2653 diff changeset	131 // 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	132 // 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	133 // 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	134 const d3 = Object.assign(d3Base, { lineChunked });
c4da269238a4 client: waterlevel diagram: visualize data gaps Markus Kottlaender <markus@intevation.de> parents: 2653 diff changeset	135
4381 275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	136 let temp = null;
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	137
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	138 export default {
4153 7c44af0b9370 client: Waterleveldiagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4150 diff changeset	139 mixins: [diagram, pdfgen, templateLoader, refwaterlevels],
3992 2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	140 components: {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	141 DiagramLegend: () => import("@/components/DiagramLegend")
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	142 },
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	143 data() {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	144 return {
4384 b146d3c648f8 gauges: decouple date and title from store Thomas Junk <thomas.junk@intevation.de> parents: 4381 diff changeset	145 dateFromD: null,
b146d3c648f8 gauges: decouple date and title from store Thomas Junk <thomas.junk@intevation.de> parents: 4381 diff changeset	146 dateToD: null,
b146d3c648f8 gauges: decouple date and title from store Thomas Junk <thomas.junk@intevation.de> parents: 4381 diff changeset	147 selectedGaugeD: null,
3992 2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	148 containerId: "waterlevel-diagram-container",
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	149 resizeListenerFunction: null,
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	150 form: {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	151 template: null
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	152 },
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	153 templates: [],
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	154 defaultTemplate: defaultDiagramTemplate,
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	155 pdf: {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	156 doc: null,
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	157 width: 420,
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	158 height: 297
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	159 },
4225 92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 4155 diff changeset	160 templateData: null,
4381 275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	161 zoomStore: null,
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	162 showNSC: true
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	163 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	164 },
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	165 computed: {
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	166 ...mapState("application", ["paneSetup"]),
3403 d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	167 ...mapState("gauges", [
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	168 "dateFrom",
4384 b146d3c648f8 gauges: decouple date and title from store Thomas Junk <thomas.junk@intevation.de> parents: 4381 diff changeset	169 "dateTo",
3403 d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	170 "waterlevels",
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	171 "waterlevelsCSV",
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	172 "nashSutcliffe"
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	173 ]),
3049 7e6ecb6d0796 client: add headline info for the waterlevel generated diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	174 ...mapGetters("gauges", ["selectedGauge"]),
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	175 title() {
4384 b146d3c648f8 gauges: decouple date and title from store Thomas Junk <thomas.junk@intevation.de> parents: 4381 diff changeset	176 if (!this.selectedGaugeD) return;
b146d3c648f8 gauges: decouple date and title from store Thomas Junk <thomas.junk@intevation.de> parents: 4381 diff changeset	177 return `${this.selectedGaugeD.properties.objname}: ${this.$gettext(
3148 cdfb0093b7b1 client: gauge diagrams: added information to titles Markus Kottlaender <markus@intevation.de> parents: 3147 diff changeset	178 "Waterlevel"
4384 b146d3c648f8 gauges: decouple date and title from store Thomas Junk <thomas.junk@intevation.de> parents: 4381 diff changeset	179 )} (${this.dateFromD.toLocaleDateString()} - ${this.dateToD.toLocaleDateString()})`;
3403 d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	180 },
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	181 csvLink() {
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	182 return (
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	183 "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	184 );
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	185 },
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	186 csvFileName() {
4423 f42c6efd76fe Waterlevel: only generate csvFilename when dates are present Thomas Junk <thomas.junk@intevation.de> parents: 4384 diff changeset	187 if (!this.dateFromD \|\| !this.dateToD) return "";
4677 fa55e48bbca1 client: improve filename generation for downloads Fadi Abbud <fadi.abbud@intevation.de> parents: 4665 diff changeset	188 return (
fa55e48bbca1 client: improve filename generation for downloads Fadi Abbud <fadi.abbud@intevation.de> parents: 4665 diff changeset	189 this.downloadFilename(
fa55e48bbca1 client: improve filename generation for downloads Fadi Abbud <fadi.abbud@intevation.de> parents: 4665 diff changeset	190 this.$gettext("Waterlevel"),
fa55e48bbca1 client: improve filename generation for downloads Fadi Abbud <fadi.abbud@intevation.de> parents: 4665 diff changeset	191 this.selectedGauge.properties.objname
fa55e48bbca1 client: improve filename generation for downloads Fadi Abbud <fadi.abbud@intevation.de> parents: 4665 diff changeset	192 ) + ".csv"
fa55e48bbca1 client: improve filename generation for downloads Fadi Abbud <fadi.abbud@intevation.de> parents: 4665 diff changeset	193 );
3618 c03170a1c333 client: waterlevel: check if there is prediction data before drawing the predictionarea Fadi Abbud <fadi.abbud@intevation.de> parents: 3576 diff changeset	194 },
c03170a1c333 client: waterlevel: check if there is prediction data before drawing the predictionarea Fadi Abbud <fadi.abbud@intevation.de> parents: 3576 diff changeset	195 hasPredictions() {
c03170a1c333 client: waterlevel: check if there is prediction data before drawing the predictionarea Fadi Abbud <fadi.abbud@intevation.de> parents: 3576 diff changeset	196 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	197 }
2596 8774054959a7 client: added Gauges dialog/tool to show waterlevel diagrams Markus Kottlaender <markus@intevation.de> parents: 2590 diff changeset	198 },
3068 492c30ca3142 client: diagrams: added watchers to ensure diagram update when data changes Markus Kottlaender <markus@intevation.de> parents: 3067 diff changeset	199 watch: {
4381 275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	200 showNSC() {
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	201 this.drawDiagram({ ...this.zoomStore });
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	202 },
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	203 paneSetup() {
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	204 this.$nextTick(() => this.drawDiagram());
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	205 },
3068 492c30ca3142 client: diagrams: added watchers to ensure diagram update when data changes Markus Kottlaender <markus@intevation.de> parents: 3067 diff changeset	206 waterlevels() {
4384 b146d3c648f8 gauges: decouple date and title from store Thomas Junk <thomas.junk@intevation.de> parents: 4381 diff changeset	207 this.initialDiagramValues();
3068 492c30ca3142 client: diagrams: added watchers to ensure diagram update when data changes Markus Kottlaender <markus@intevation.de> parents: 3067 diff changeset	208 this.drawDiagram();
492c30ca3142 client: diagrams: added watchers to ensure diagram update when data changes Markus Kottlaender <markus@intevation.de> parents: 3067 diff changeset	209 }
492c30ca3142 client: diagrams: added watchers to ensure diagram update when data changes Markus Kottlaender <markus@intevation.de> parents: 3067 diff changeset	210 },
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	211 methods: {
4384 b146d3c648f8 gauges: decouple date and title from store Thomas Junk <thomas.junk@intevation.de> parents: 4381 diff changeset	212 initialDiagramValues() {
b146d3c648f8 gauges: decouple date and title from store Thomas Junk <thomas.junk@intevation.de> parents: 4381 diff changeset	213 this.dateFromD = this.dateFrom;
b146d3c648f8 gauges: decouple date and title from store Thomas Junk <thomas.junk@intevation.de> parents: 4381 diff changeset	214 this.dateToD = this.dateTo;
b146d3c648f8 gauges: decouple date and title from store Thomas Junk <thomas.junk@intevation.de> parents: 4381 diff changeset	215 this.selectedGaugeD = this.selectedGauge;
b146d3c648f8 gauges: decouple date and title from store Thomas Junk <thomas.junk@intevation.de> parents: 4381 diff changeset	216 },
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	217 close() {
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	218 this.$store.commit(
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	219 "application/paneSetup",
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	220 this.paneSetup === "GAUGE_WATERLEVEL_HYDROLOGICALCONDITIONS"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	221 ? "GAUGE_HYDROLOGICALCONDITIONS"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	222 : "DEFAULT"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	223 );
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3143 diff changeset	224 },
3565 f6d67697f158 client: improve waterlevel diagram Bernhard Reiter <bernhard@intevation.de> parents: 3564 diff changeset	225 downloadSVG() {
f6d67697f158 client: improve waterlevel diagram Bernhard Reiter <bernhard@intevation.de> parents: 3564 diff changeset	226 let svg = document.getElementById(this.containerId).firstElementChild;
f6d67697f158 client: improve waterlevel diagram Bernhard Reiter <bernhard@intevation.de> parents: 3564 diff changeset	227 let svgXML = new XMLSerializer().serializeToString(svg);
f6d67697f158 client: improve waterlevel diagram Bernhard Reiter <bernhard@intevation.de> parents: 3564 diff changeset	228 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	229 let filename =
f6d67697f158 client: improve waterlevel diagram Bernhard Reiter <bernhard@intevation.de> parents: 3564 diff changeset	230 this.selectedGauge.properties.objname + "-waterlevel-diagram.svg";
f6d67697f158 client: improve waterlevel diagram Bernhard Reiter <bernhard@intevation.de> parents: 3564 diff changeset	231 saveAs(blog, filename);
f6d67697f158 client: improve waterlevel diagram Bernhard Reiter <bernhard@intevation.de> parents: 3564 diff changeset	232 },
3992 2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	233 downloadPDF() {
4456 acb21e7362ce client: pdf-gen: fix diagram title for pdf (waterlevels, hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4423 diff changeset	234 let diagramTitle = `${this.selectedGaugeD.properties.objname} (${
acb21e7362ce client: pdf-gen: fix diagram title for pdf (waterlevels, hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4423 diff changeset	235 this.isrsInfo(this.selectedGaugeD).orc
4697 ce55f15e25e0 client: translations: mark strings for translation Fadi Abbud <fadi.abbud@intevation.de> parents: 4677 diff changeset	236 }): ${this.$gettext(
ce55f15e25e0 client: translations: mark strings for translation Fadi Abbud <fadi.abbud@intevation.de> parents: 4677 diff changeset	237 "Waterlevel"
ce55f15e25e0 client: translations: mark strings for translation Fadi Abbud <fadi.abbud@intevation.de> parents: 4677 diff changeset	238 )} ${this.dateFromD.toLocaleDateString()} - ${this.dateToD.toLocaleDateString()}`;
3992 2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	239 this.generatePDF({
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	240 templateData: this.templateData,
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	241 diagramTitle: diagramTitle
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	242 });
4677 fa55e48bbca1 client: improve filename generation for downloads Fadi Abbud <fadi.abbud@intevation.de> parents: 4665 diff changeset	243 this.pdf.doc.save(
fa55e48bbca1 client: improve filename generation for downloads Fadi Abbud <fadi.abbud@intevation.de> parents: 4665 diff changeset	244 this.downloadFilename(
fa55e48bbca1 client: improve filename generation for downloads Fadi Abbud <fadi.abbud@intevation.de> parents: 4665 diff changeset	245 this.$gettext("Waterlevel"),
fa55e48bbca1 client: improve filename generation for downloads Fadi Abbud <fadi.abbud@intevation.de> parents: 4665 diff changeset	246 this.selectedGauge.properties.objname
fa55e48bbca1 client: improve filename generation for downloads Fadi Abbud <fadi.abbud@intevation.de> parents: 4665 diff changeset	247 ) + ".pdf"
fa55e48bbca1 client: improve filename generation for downloads Fadi Abbud <fadi.abbud@intevation.de> parents: 4665 diff changeset	248 );
3992 2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	249 },
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	250 applyChange() {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	251 if (this.form.template.hasOwnProperty("properties")) {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	252 this.templateData = this.defaultTemplate;
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	253 return;
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	254 }
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	255 if (this.form.template) {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	256 this.loadTemplates("/templates/diagram/" + this.form.template.name)
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	257 .then(response => {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	258 this.prepareImages(response.data.template_data.elements).then(
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	259 values => {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	260 values.forEach(v => {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	261 response.data.template_data.elements[v.index].url = v.url;
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	262 });
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	263 this.templateData = response.data.template_data;
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	264 }
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	265 );
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	266 })
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	267 .catch(e => {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	268 const { status, data } = e.response;
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	269 displayError({
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	270 title: this.$gettext("Backend Error"),
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	271 message: `${status}: ${data.message \|\| data}`
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	272 });
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	273 });
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	274 }
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	275 },
3129 136b86794453 client: improve pdf-gen code for diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3112 diff changeset	276 // Diagram legend
3137 35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	277 addDiagramLegend(position, offset, color) {
4109 5317ae66f654 clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4061 diff changeset	278 let x = offset.x + 2, // 2 is the radius of the circle
5317ae66f654 clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4061 diff changeset	279 y = offset.y,
5317ae66f654 clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4061 diff changeset	280 padding = 3;
5317ae66f654 clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4061 diff changeset	281 this.pdf.doc.setFontStyle("normal");
3343 13bb0ff62ac8 client: diagram-template: cleanup (waterlevel) Fadi Abbud <fadi.abbud@intevation.de> parents: 3323 diff changeset	282 this.pdf.doc.setFontSize(10);
4109 5317ae66f654 clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4061 diff changeset	283 let width = this.pdf.doc.getTextWidth("Navigable Range") + padding;
3137 35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	284 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	285 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	286 }
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	287 if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
4109 5317ae66f654 clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4061 diff changeset	288 y = this.pdf.height - offset.y - this.getTextHeight(3);
5317ae66f654 clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4061 diff changeset	289 }
5317ae66f654 clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4061 diff changeset	290 if (y < this.getTextHeight(1)) {
5317ae66f654 clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4061 diff changeset	291 y = y + this.getTextHeight(1) / 2;
3137 35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	292 }
35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	293 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	294 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	295 this.pdf.doc.setFillColor("steelblue");
3853 abc15a3182c7 client: pdf-gen: adjust diagramlegend size (waterlevel diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3820 diff changeset	296 this.pdf.doc.circle(x, y, 2, "FD");
4593 3632cfc44b69 client: mark diagram strings for translations(waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4473 diff changeset	297 this.pdf.doc.text(x + padding, y + 1, this.$gettext("Waterlevel"));
3137 35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	298 this.pdf.doc.setFillColor("#dae6f0");
3853 abc15a3182c7 client: pdf-gen: adjust diagramlegend size (waterlevel diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3820 diff changeset	299 this.pdf.doc.circle(x, y + 5, 2, "FD");
3137 35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	300 this.pdf.doc.setFillColor("#e5ffe5");
3853 abc15a3182c7 client: pdf-gen: adjust diagramlegend size (waterlevel diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3820 diff changeset	301 this.pdf.doc.circle(x, y + 10, 2, "FD");
4593 3632cfc44b69 client: mark diagram strings for translations(waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4473 diff changeset	302 this.pdf.doc.text(x + padding, y + 11, this.$gettext("Navigable Range"));
3137 35c0da49eb89 client: pdf-gen: prepare pdf template for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3132 diff changeset	303 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	304 this.pdf.doc.setFillColor("#90b4d2");
3853 abc15a3182c7 client: pdf-gen: adjust diagramlegend size (waterlevel diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3820 diff changeset	305 this.pdf.doc.circle(x, y + 5, 0.6, "FD");
4593 3632cfc44b69 client: mark diagram strings for translations(waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4473 diff changeset	306 this.pdf.doc.text(x + padding, y + 6, this.$gettext("Prediction"));
3129 136b86794453 client: improve pdf-gen code for diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3112 diff changeset	307 },
4139 0becdd2812c9 client: waterlevels: use offsets relative to svgwidth and svgheight Fadi Abbud <fadi.abbud@intevation.de> parents: 4109 diff changeset	308 getPrintLayout(svgHeight, svgWidth) {
3941 7b3935a8d9ee refactor addDiagram to mixin and remove code duplication Thomas Junk <thomas.junk@intevation.de> parents: 3938 diff changeset	309 return {
4139 0becdd2812c9 client: waterlevels: use offsets relative to svgwidth and svgheight Fadi Abbud <fadi.abbud@intevation.de> parents: 4109 diff changeset	310 main: {
0becdd2812c9 client: waterlevels: use offsets relative to svgwidth and svgheight Fadi Abbud <fadi.abbud@intevation.de> parents: 4109 diff changeset	311 top: Math.floor(0.05 * svgHeight),
0becdd2812c9 client: waterlevels: use offsets relative to svgwidth and svgheight Fadi Abbud <fadi.abbud@intevation.de> parents: 4109 diff changeset	312 right: Math.floor(0.05 * svgWidth),
0becdd2812c9 client: waterlevels: use offsets relative to svgwidth and svgheight Fadi Abbud <fadi.abbud@intevation.de> parents: 4109 diff changeset	313 bottom: Math.floor(0.32 * svgHeight),
0becdd2812c9 client: waterlevels: use offsets relative to svgwidth and svgheight Fadi Abbud <fadi.abbud@intevation.de> parents: 4109 diff changeset	314 left: Math.floor(0.09 * svgWidth)
0becdd2812c9 client: waterlevels: use offsets relative to svgwidth and svgheight Fadi Abbud <fadi.abbud@intevation.de> parents: 4109 diff changeset	315 },
3941 7b3935a8d9ee refactor addDiagram to mixin and remove code duplication Thomas Junk <thomas.junk@intevation.de> parents: 3938 diff changeset	316 nav: {
4139 0becdd2812c9 client: waterlevels: use offsets relative to svgwidth and svgheight Fadi Abbud <fadi.abbud@intevation.de> parents: 4109 diff changeset	317 top: Math.floor(0.78 * svgHeight),
0becdd2812c9 client: waterlevels: use offsets relative to svgwidth and svgheight Fadi Abbud <fadi.abbud@intevation.de> parents: 4109 diff changeset	318 right: Math.floor(0.013 * svgWidth),
0becdd2812c9 client: waterlevels: use offsets relative to svgwidth and svgheight Fadi Abbud <fadi.abbud@intevation.de> parents: 4109 diff changeset	319 bottom: Math.floor(0.095 * svgHeight),
0becdd2812c9 client: waterlevels: use offsets relative to svgwidth and svgheight Fadi Abbud <fadi.abbud@intevation.de> parents: 4109 diff changeset	320 left: Math.floor(0.09 * svgWidth)
3941 7b3935a8d9ee refactor addDiagram to mixin and remove code duplication Thomas Junk <thomas.junk@intevation.de> parents: 3938 diff changeset	321 }
7b3935a8d9ee refactor addDiagram to mixin and remove code duplication Thomas Junk <thomas.junk@intevation.de> parents: 3938 diff changeset	322 };
7b3935a8d9ee refactor addDiagram to mixin and remove code duplication Thomas Junk <thomas.junk@intevation.de> parents: 3938 diff changeset	323 },
4381 275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	324 drawDiagram(zoom) {
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	325 // 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	326 d3.select("#" + this.containerId + " svg").remove();
4665 c47c8085cc7e client: translation: implement marking of diagram labels Fadi Abbud <fadi.abbud@intevation.de> parents: 4593 diff changeset	327 d3.timeFormatDefaultLocale(localeDateString);
3938 b03d54958ccd warterlevel: leverage mixin Thomas Junk <thomas.junk@intevation.de> parents: 3927 diff changeset	328 const elem = document.querySelector("#" + this.containerId);
b03d54958ccd warterlevel: leverage mixin Thomas Junk <thomas.junk@intevation.de> parents: 3927 diff changeset	329 const svgWidth = elem.clientWidth;
b03d54958ccd warterlevel: leverage mixin Thomas Junk <thomas.junk@intevation.de> parents: 3927 diff changeset	330 const svgHeight = elem.clientHeight;
4139 0becdd2812c9 client: waterlevels: use offsets relative to svgwidth and svgheight Fadi Abbud <fadi.abbud@intevation.de> parents: 4109 diff changeset	331 const layout = this.getPrintLayout(svgHeight, svgWidth);
3938 b03d54958ccd warterlevel: leverage mixin Thomas Junk <thomas.junk@intevation.de> parents: 3927 diff changeset	332 if (!this.selectedGauge \|\| !this.waterlevels.length \|\| !elem) return;
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	333 this.renderTo({
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	334 element: `#${this.containerId}`,
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	335 dimensions: this.getDimensions({
3938 b03d54958ccd warterlevel: leverage mixin Thomas Junk <thomas.junk@intevation.de> parents: 3927 diff changeset	336 svgWidth: svgWidth,
b03d54958ccd warterlevel: leverage mixin Thomas Junk <thomas.junk@intevation.de> parents: 3927 diff changeset	337 svgHeight: svgHeight,
3941 7b3935a8d9ee refactor addDiagram to mixin and remove code duplication Thomas Junk <thomas.junk@intevation.de> parents: 3938 diff changeset	338 ...layout
4381 275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	339 }),
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	340 zoomLevel: zoom ? zoom : null
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	341 });
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	342 },
4225 92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 4155 diff changeset	343 renderTo({ element, dimensions, zoomLevel }) {
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	344 // PREPARE HELPERS
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	345 // 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	346 const refWaterLevels = JSON.parse(
2604 85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels Markus Kottlaender <markus@intevation.de> parents: 2596 diff changeset	347 this.selectedGauge.properties.reference_water_levels
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels Markus Kottlaender <markus@intevation.de> parents: 2596 diff changeset	348 );
85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels Markus Kottlaender <markus@intevation.de> parents: 2596 diff changeset	349
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	350 // get min/max values for date and waterlevel axis
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	351 const extent = this.getExtent(refWaterLevels);
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	352
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	353 // scaling helpers
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	354 const scale = this.getScale({ dimensions, extent });
4712 3b5268263c5b Waterlevel: implement date localization Thomas Junk <thomas.junk@intevation.de> parents: 4697 diff changeset	355 const dFormat = date => {
3b5268263c5b Waterlevel: implement date localization Thomas Junk <thomas.junk@intevation.de> parents: 4697 diff changeset	356 // make the x-axis label formats dynamic, based on zoom
3b5268263c5b Waterlevel: implement date localization Thomas Junk <thomas.junk@intevation.de> parents: 4697 diff changeset	357 // but never display year numbers since they don't make any sense in
3b5268263c5b Waterlevel: implement date localization Thomas Junk <thomas.junk@intevation.de> parents: 4697 diff changeset	358 // this diagram
3b5268263c5b Waterlevel: implement date localization Thomas Junk <thomas.junk@intevation.de> parents: 4697 diff changeset	359 return (d3.timeSecond(date) < date
3b5268263c5b Waterlevel: implement date localization Thomas Junk <thomas.junk@intevation.de> parents: 4697 diff changeset	360 ? d3.timeFormat(".%L")
3b5268263c5b Waterlevel: implement date localization Thomas Junk <thomas.junk@intevation.de> parents: 4697 diff changeset	361 : d3.timeMinute(date) < date
3b5268263c5b Waterlevel: implement date localization Thomas Junk <thomas.junk@intevation.de> parents: 4697 diff changeset	362 ? d3.timeFormat(":%S")
3b5268263c5b Waterlevel: implement date localization Thomas Junk <thomas.junk@intevation.de> parents: 4697 diff changeset	363 : d3.timeHour(date) < date
3b5268263c5b Waterlevel: implement date localization Thomas Junk <thomas.junk@intevation.de> parents: 4697 diff changeset	364 ? d3.timeFormat("%H:%M")
3b5268263c5b Waterlevel: implement date localization Thomas Junk <thomas.junk@intevation.de> parents: 4697 diff changeset	365 : d3.timeDay(date) < date
4713 cd9216c073fd minor fixes date localization Thomas Junk <thomas.junk@intevation.de> parents: 4712 diff changeset	366 ? d3.timeFormat("%H:%M")
4712 3b5268263c5b Waterlevel: implement date localization Thomas Junk <thomas.junk@intevation.de> parents: 4697 diff changeset	367 : d3.timeMonth(date) < date
3b5268263c5b Waterlevel: implement date localization Thomas Junk <thomas.junk@intevation.de> parents: 4697 diff changeset	368 ? d3.timeWeek(date) < date
4721 b2119cf5c7fb mark date for translation Thomas Junk <thomas.junk@intevation.de> parents: 4713 diff changeset	369 ? d3.timeFormat(app.$gettext("%a %d"))
b2119cf5c7fb mark date for translation Thomas Junk <thomas.junk@intevation.de> parents: 4713 diff changeset	370 : d3.timeFormat(app.$gettext("%b %d"))
4712 3b5268263c5b Waterlevel: implement date localization Thomas Junk <thomas.junk@intevation.de> parents: 4697 diff changeset	371 : d3.timeYear(date) < date
3b5268263c5b Waterlevel: implement date localization Thomas Junk <thomas.junk@intevation.de> parents: 4697 diff changeset	372 ? d3.timeFormat("%B")
3b5268263c5b Waterlevel: implement date localization Thomas Junk <thomas.junk@intevation.de> parents: 4697 diff changeset	373 : d3.timeFormat("%Y"))(date);
3b5268263c5b Waterlevel: implement date localization Thomas Junk <thomas.junk@intevation.de> parents: 4697 diff changeset	374 };
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	375 // creating the axes based on the scales
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	376 const axes = {
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	377 x: d3
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	378 .axisTop(scale.x)
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	379 .tickSizeInner(dimensions.mainHeight)
4712 3b5268263c5b Waterlevel: implement date localization Thomas Junk <thomas.junk@intevation.de> parents: 4697 diff changeset	380 .tickSizeOuter(0)
3b5268263c5b Waterlevel: implement date localization Thomas Junk <thomas.junk@intevation.de> parents: 4697 diff changeset	381 .tickFormat(dFormat),
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	382 y: d3
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	383 .axisRight(scale.y)
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	384 .tickSizeInner(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	385 .tickSizeOuter(0)
1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized Markus Kottlaender <markus@intevation.de> parents: 3565 diff changeset	386 .tickFormat(d => this.$options.filters.waterlevel(d)),
3901 fe0d62727c41 client: waterlevel diagram: added right y axis Markus Kottlaender <markus@intevation.de> parents: 3894 diff changeset	387 yRight: d3
fe0d62727c41 client: waterlevel diagram: added right y axis Markus Kottlaender <markus@intevation.de> parents: 3894 diff changeset	388 .axisRight(scale.y)
fe0d62727c41 client: waterlevel diagram: added right y axis Markus Kottlaender <markus@intevation.de> parents: 3894 diff changeset	389 .tickSizeInner(3)
fe0d62727c41 client: waterlevel diagram: added right y axis Markus Kottlaender <markus@intevation.de> parents: 3894 diff changeset	390 .tickSizeOuter(0)
fe0d62727c41 client: waterlevel diagram: added right y axis Markus Kottlaender <markus@intevation.de> parents: 3894 diff changeset	391 .tickFormat(d => this.$options.filters.waterlevel(d)),
4712 3b5268263c5b Waterlevel: implement date localization Thomas Junk <thomas.junk@intevation.de> parents: 4697 diff changeset	392 x2: d3.axisBottom(scale.x2).tickFormat(dFormat)
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	393 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	394
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	395 // DRAW DIAGRAM/NAVIGATION AREAS
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	396
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	397 // create svg
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	398 const svg = d3
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	399 .select(element)
2610 5ce1b4b29869 client: waterlevel diagram: refactored code for better readability Markus Kottlaender <markus@intevation.de> parents: 2607 diff changeset	400 .append("svg")
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability Markus Kottlaender <markus@intevation.de> parents: 2607 diff changeset	401 .attr("width", "100%")
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability Markus Kottlaender <markus@intevation.de> parents: 2607 diff changeset	402 .attr("height", "100%");
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	403
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	404 // create container for main diagram
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	405 const diagram = svg
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	406 .append("g")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	407 .attr("class", "main")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	408 .attr(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	409 "transform",
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	410 `translate(${dimensions.mainMargin.left}, ${
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	411 dimensions.mainMargin.top
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	412 })`
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	413 );
2756 ee2530ee1c0b client: waterlevel diagram: use chunkedLine for nav chart too Markus Kottlaender <markus@intevation.de> parents: 2751 diff changeset	414
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	415 // create container for navigation diagram
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	416 const navigation = svg
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	417 .append("g")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	418 .attr("class", "nav")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	419 .attr(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	420 "transform",
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	421 `translate(${dimensions.navMargin.left}, ${dimensions.navMargin.top})`
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	422 );
2775 2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	423
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	424 // define visible area, everything outside this area will be hidden
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	425 svg
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	426 .append("defs")
1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	427 .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	428 .attr("id", "waterlevel-clip")
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	429 .append("rect")
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	430 .attr("width", dimensions.width)
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	431 .attr("height", dimensions.mainHeight);
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	432
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	433 // DRAW DIAGRAM PARTS
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	434
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	435 // 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	436 // 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	437 // 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	438 const updaters = [];
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	439
3346 83210507aaca client: waterlevel diagram: improved readability of nash sutcliffe Markus Kottlaender <markus@intevation.de> parents: 3343 diff changeset	440 // draw (order matters)
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	441 updaters.push(this.drawAxes({ diagram, dimensions, axes, navigation }));
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	442 updaters.push(this.drawWaterlevelChart({ scale, diagram }));
3618 c03170a1c333 client: waterlevel: check if there is prediction data before drawing the predictionarea Fadi Abbud <fadi.abbud@intevation.de> parents: 3576 diff changeset	443 if (this.hasPredictions) {
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	444 updaters.push(this.drawPredictionAreas({ scale, diagram, navigation }));
3618 c03170a1c333 client: waterlevel: check if there is prediction data before drawing the predictionarea Fadi Abbud <fadi.abbud@intevation.de> parents: 3576 diff changeset	445 }
4295 0bb735a412af client: fix drawing of Now label on Diagram (Waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 4294 diff changeset	446 updaters.push(
0bb735a412af client: fix drawing of Now label on Diagram (Waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 4294 diff changeset	447 this.drawNowLines({ scale, extent, diagram, navigation, dimensions })
0bb735a412af client: fix drawing of Now label on Diagram (Waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 4294 diff changeset	448 );
3253 3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	449
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	450 // static, don't need updater
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	451 this.drawNavigationChart({ scale, navigation });
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	452 this.drawRefLines({ refWaterLevels, diagram, scale, dimensions, extent });
4381 275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	453 if (this.showNSC) {
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	454 updaters.push(
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	455 this.drawNashSutcliffe({ hours: 72, diagram, scale, dimensions })
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	456 );
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	457 updaters.push(
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	458 this.drawNashSutcliffe({ hours: 48, diagram, scale, dimensions })
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	459 );
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	460 updaters.push(
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	461 this.drawNashSutcliffe({ hours: 24, diagram, scale, dimensions })
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	462 );
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	463 }
3346 83210507aaca client: waterlevel diagram: improved readability of nash sutcliffe Markus Kottlaender <markus@intevation.de> parents: 3343 diff changeset	464
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	465 // INTERACTIONS
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	466
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	467 // create rectanlge on the main chart area to capture mouse events
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	468 const eventRect = svg
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	469 .append("rect")
3212 f87fd173f750 client: waterlevel diagrams: fixed tooltip bug Markus Kottlaender <markus@intevation.de> parents: 3211 diff changeset	470 .attr("id", "zoom-waterlevels")
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	471 .attr("class", "zoom")
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	472 .attr("width", dimensions.width)
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	473 .attr("height", dimensions.mainHeight)
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	474 .attr(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	475 "transform",
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	476 `translate(${dimensions.mainMargin.left}, ${
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	477 dimensions.mainMargin.top
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	478 })`
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	479 );
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	480
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	481 this.createZoom({
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	482 updaters,
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	483 eventRect,
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	484 dimensions,
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	485 scale,
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	486 navigation,
4225 92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 4155 diff changeset	487 svg,
92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 4155 diff changeset	488 zoomLevel
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	489 });
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	490 this.createTooltips({ eventRect, diagram, scale, dimensions });
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	491 this.setInlineStyles(svg);
3015 fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	492 },
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	493 //set the styles of the diagrams to include them in the pdf
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	494 setInlineStyles(svg) {
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	495 svg
3015 fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	496 .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	497 .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	498 .selectAll("path")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	499 .attr("stroke", "steelblue")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	500 .attr("stroke-width", 2)
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	501 .attr("fill", "none");
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	502 svg
3015 fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	503 .selectAll(".line")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	504 .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	505 .attr("stroke-opacity", 0);
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	506 svg
3015 fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	507 .selectAll(".line")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	508 .selectAll("circle")
3107 8e364945a390 client: adjust some styles for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3068 diff changeset	509 .attr("fill", "steelblue")
8e364945a390 client: adjust some styles for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3068 diff changeset	510 .attr("stroke-width", 0);
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	511 svg
3015 fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	512 .selectAll(".line")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	513 .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	514 .attr("fill-opacity", 0.6);
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	515
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	516 svg
4154 d54d86d27e82 client: waterlevel: remove whitespace and add comment Fadi Abbud <fadi.abbud@intevation.de> parents: 4153 diff changeset	517 .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	518 .attr("stroke-width", 1)
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	519 .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	520 .attr("clip-path", "url(#waterlevel-clip)");
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	521 svg.selectAll(".hdc-line").attr("stroke", "red");
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	522 svg.selectAll(".ldc-line").attr("stroke", "green");
4153 7c44af0b9370 client: Waterleveldiagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4150 diff changeset	523
4061 f391497287fb clinet: pdf-gen: fix RN line does not render on pdf Fadi Abbud <fadi.abbud@intevation.de> parents: 3992 diff changeset	524 svg.selectAll(".mw-line").attr("stroke", "rgb(128,128,128)");
f391497287fb clinet: pdf-gen: fix RN line does not render on pdf Fadi Abbud <fadi.abbud@intevation.de> parents: 3992 diff changeset	525 svg.selectAll(".rn-line").attr("stroke", "rgb(128,128,128)");
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	526 svg
3015 fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	527 .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	528 .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	529 .attr("fill", "black");
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	530 svg
3211 f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	531 .selectAll(".ref-waterlevel-label-background")
3563 f65ef9148d00 client: improve waterlevel diagram Bernhard Reiter <bernhard@intevation.de> parents: 3544 diff changeset	532 .attr("fill", "rgb(255, 255, 255)")
f65ef9148d00 client: improve waterlevel diagram Bernhard Reiter <bernhard@intevation.de> parents: 3544 diff changeset	533 .attr("fill-opacity", 0.6);
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	534 svg
3563 f65ef9148d00 client: improve waterlevel diagram Bernhard Reiter <bernhard@intevation.de> parents: 3544 diff changeset	535 .selectAll(".hdc-ldc-area")
f65ef9148d00 client: improve waterlevel diagram Bernhard Reiter <bernhard@intevation.de> parents: 3544 diff changeset	536 .attr("fill", "rgb(0, 255, 0)")
f65ef9148d00 client: improve waterlevel diagram Bernhard Reiter <bernhard@intevation.de> parents: 3544 diff changeset	537 .attr("fill-opacity", 0.1);
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	538 svg
3015 fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	539 .selectAll(".now-line")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	540 .attr("stroke", "#999")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	541 .attr("stroke-width", 1)
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	542 .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	543 .attr("clip-path", "url(#waterlevel-clip)");
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	544 svg
3015 fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	545 .selectAll(".now-line-label")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	546 .attr("font-size", "11px")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	547 .attr("fill", "#999");
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	548 svg
3015 fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	549 .selectAll(".prediction-area")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	550 .attr("fill", "steelblue")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	551 .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	552 .attr("clip-path", "url(#waterlevel-clip)");
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	553 svg
3107 8e364945a390 client: adjust some styles for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3068 diff changeset	554 .selectAll("path.nash-sutcliffe")
3015 fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	555 .attr("fill", "none")
4139 0becdd2812c9 client: waterlevels: use offsets relative to svgwidth and svgheight Fadi Abbud <fadi.abbud@intevation.de> parents: 4109 diff changeset	556 .attr("stroke", "gray")
3015 fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	557 .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	558 .attr("clip-path", "url(#waterlevel-clip)");
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	559 svg
3107 8e364945a390 client: adjust some styles for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3068 diff changeset	560 .selectAll("path.nash-sutcliffe.ns72")
3563 f65ef9148d00 client: improve waterlevel diagram Bernhard Reiter <bernhard@intevation.de> parents: 3544 diff changeset	561 .attr("fill", "rgb(255, 255, 255)")
f65ef9148d00 client: improve waterlevel diagram Bernhard Reiter <bernhard@intevation.de> parents: 3544 diff changeset	562 .attr("fill-opacity", 0.5);
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	563 svg
3107 8e364945a390 client: adjust some styles for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3068 diff changeset	564 .selectAll("text.nash-sutcliffe")
3045 44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	565 .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	566 .attr("clip-path", "url(#waterlevel-clip)")
3348 7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	567 .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	568 .attr("fill", "#555");
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	569 svg
3901 fe0d62727c41 client: waterlevel diagram: added right y axis Markus Kottlaender <markus@intevation.de> parents: 3894 diff changeset	570 .selectAll(".axis--x .tick line, .axis--y .tick line")
3015 fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	571 .attr("stroke-dasharray", 5)
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	572 .attr("stroke", "#ccc");
3901 fe0d62727c41 client: waterlevel diagram: added right y axis Markus Kottlaender <markus@intevation.de> parents: 3894 diff changeset	573 svg.selectAll(".axis--y-right .tick line").attr("stroke", "transparent");
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	574 svg.selectAll(".tick text").attr("fill", "black");
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	575 svg.selectAll(".domain").attr("stroke", "black");
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	576 svg
3782 d36ccff8de5f pdf: waterlevel diagram with svg2pdf Thomas Junk <thomas.junk@intevation.de> parents: 3780 diff changeset	577 .selectAll(".domain")
d36ccff8de5f pdf: waterlevel diagram with svg2pdf Thomas Junk <thomas.junk@intevation.de> parents: 3780 diff changeset	578 .attr("stroke", "black")
d36ccff8de5f pdf: waterlevel diagram with svg2pdf Thomas Junk <thomas.junk@intevation.de> parents: 3780 diff changeset	579 .attr("fill", "none");
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	580 svg
3015 fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	581 .selectAll(".zoom")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	582 .attr("cursor", "move")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	583 .attr("fill", "none")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	584 .attr("pointer-events", "all");
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	585 svg
3107 8e364945a390 client: adjust some styles for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3068 diff changeset	586 .selectAll(".brush .selection")
3015 fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	587 .attr("stroke", "none")
fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	588 .attr("fill-opacity", 0.2);
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	589 svg
3107 8e364945a390 client: adjust some styles for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3068 diff changeset	590 .selectAll(".brush .handle")
3015 fe88a9b151ca client: implemented pdf-generation for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	591 .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	592 .attr("fill", "rgba(23, 162, 184, 0.5)");
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	593 svg.selectAll(".brush .overlay").attr("fill", "none");
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	594 svg.selectAll(".chart-dots").attr("clip-path", "url(#waterlevel-clip)");
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	595 svg
3045 44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	596 .selectAll(".chart-dots .chart-dot")
3107 8e364945a390 client: adjust some styles for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3068 diff changeset	597 .attr("fill", "steelblue")
8e364945a390 client: adjust some styles for waterlevel diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3068 diff changeset	598 .attr("stroke", "steelblue")
3045 44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	599 .attr("stroke-opacity", 0)
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	600 .style("pointer-events", "none")
3046 c764c73f44b4 client: fix chart-tooltip style for diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3045 diff changeset	601 .transition()
c764c73f44b4 client: fix chart-tooltip style for diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3045 diff changeset	602 .attr("fill-opacity", "0.1s");
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	603 svg
3045 44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	604 .selectAll(".chart-tooltip")
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	605 .attr("fill-opacity", 0)
3046 c764c73f44b4 client: fix chart-tooltip style for diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3045 diff changeset	606 .transition()
c764c73f44b4 client: fix chart-tooltip style for diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3045 diff changeset	607 .attr("fill-opacity", "0.3s");
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	608 svg
3045 44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	609 .selectAll(".chart-tooltip rect")
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	610 .attr("fill", "#fff")
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	611 .attr("stroke", "#ccc");
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	612 svg
3045 44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	613 .selectAll(".chart-tooltip text")
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	614 .attr("fill", "666")
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	615 .style("font-size", "0.8em");
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	616 },
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	617 getExtent(refWaterLevels) {
4125 0f69d256fa12 client: fix drawing of diagram in case reference waterlevels are missing Fadi Abbud <fadi.abbud@intevation.de> parents: 4109 diff changeset	618 let rest;
0f69d256fa12 client: fix drawing of diagram in case reference waterlevels are missing Fadi Abbud <fadi.abbud@intevation.de> parents: 4109 diff changeset	619 if (refWaterLevels) {
0f69d256fa12 client: fix drawing of diagram in case reference waterlevels are missing Fadi Abbud <fadi.abbud@intevation.de> parents: 4109 diff changeset	620 // set min/max values for the waterlevel axis
0f69d256fa12 client: fix drawing of diagram in case reference waterlevels are missing Fadi Abbud <fadi.abbud@intevation.de> parents: 4109 diff changeset	621 // including HDC (+ 1/8 HDC-LDC) and LDC (- 1/4 HDC-LDC)
4153 7c44af0b9370 client: Waterleveldiagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4150 diff changeset	622 const { LDC, HDC } = this.determineLDCHDC(refWaterLevels);
4125 0f69d256fa12 client: fix drawing of diagram in case reference waterlevels are missing Fadi Abbud <fadi.abbud@intevation.de> parents: 4109 diff changeset	623 rest = [
0f69d256fa12 client: fix drawing of diagram in case reference waterlevels are missing Fadi Abbud <fadi.abbud@intevation.de> parents: 4109 diff changeset	624 {
4153 7c44af0b9370 client: Waterleveldiagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4150 diff changeset	625 waterlevel: HDC + (HDC - LDC) / 8
4125 0f69d256fa12 client: fix drawing of diagram in case reference waterlevels are missing Fadi Abbud <fadi.abbud@intevation.de> parents: 4109 diff changeset	626 },
0f69d256fa12 client: fix drawing of diagram in case reference waterlevels are missing Fadi Abbud <fadi.abbud@intevation.de> parents: 4109 diff changeset	627 {
4153 7c44af0b9370 client: Waterleveldiagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4150 diff changeset	628 waterlevel: Math.max(LDC - (HDC - LDC) / 4, 0)
4125 0f69d256fa12 client: fix drawing of diagram in case reference waterlevels are missing Fadi Abbud <fadi.abbud@intevation.de> parents: 4109 diff changeset	629 }
0f69d256fa12 client: fix drawing of diagram in case reference waterlevels are missing Fadi Abbud <fadi.abbud@intevation.de> parents: 4109 diff changeset	630 ];
0f69d256fa12 client: fix drawing of diagram in case reference waterlevels are missing Fadi Abbud <fadi.abbud@intevation.de> parents: 4109 diff changeset	631 } else {
0f69d256fa12 client: fix drawing of diagram in case reference waterlevels are missing Fadi Abbud <fadi.abbud@intevation.de> parents: 4109 diff changeset	632 rest = [];
0f69d256fa12 client: fix drawing of diagram in case reference waterlevels are missing Fadi Abbud <fadi.abbud@intevation.de> parents: 4109 diff changeset	633 }
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	634 return {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	635 // set min/max values for the date axis
4249 0f0628189cd7 waterlevel: use given date range instead of recurring on the min/max date of data Thomas Junk <thomas.junk@intevation.de> parents: 4228 diff changeset	636 date: [this.dateFrom, this.dateTo],
4125 0f69d256fa12 client: fix drawing of diagram in case reference waterlevels are missing Fadi Abbud <fadi.abbud@intevation.de> parents: 4109 diff changeset	637 waterlevel: d3.extent([...this.waterlevels, ...rest], d => d.waterlevel)
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	638 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	639 },
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	640 getScale({ dimensions, extent }) {
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	641 // scaling helpers to convert real world values into pixels
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	642 const x = d3.scaleTime().range([0, dimensions.width]);
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	643 const y = d3.scaleLinear().range([dimensions.mainHeight, 0]);
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	644 const x2 = d3.scaleTime().range([0, dimensions.width]);
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	645 const y2 = d3.scaleLinear().range([dimensions.navHeight, 0]);
4142 2a3bd5f3fc99 waterlevels: drawing now line according to maximum of waterlevels Thomas Junk <thomas.junk@intevation.de> parents: 4125 diff changeset	646 const [lo, hi] = extent.waterlevel;
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	647 // setting the min and max values for the diagram axes
4143 afc564e0db40 added fixed delta Thomas Junk <thomas.junk@intevation.de> parents: 4142 diff changeset	648 const dy = Math.ceil(0.15 * (hi - lo));
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	649 x.domain(d3.extent(extent.date));
4143 afc564e0db40 added fixed delta Thomas Junk <thomas.junk@intevation.de> parents: 4142 diff changeset	650 y.domain([lo - dy, hi + dy]);
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	651 x2.domain(x.domain());
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	652 y2.domain(y.domain());
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	653
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	654 return { x, y, x2, y2 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	655 },
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	656 drawAxes({ diagram, dimensions, axes, navigation }) {
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	657 diagram
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	658 .append("g")
2652 a2dd96c305be client: waterlevel diagram: fixed animated x-axis in mainchart when zooming Markus Kottlaender <markus@intevation.de> parents: 2648 diff changeset	659 .attr("class", "axis--x")
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	660 .attr("transform", `translate(0, ${dimensions.mainHeight})`)
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	661 .call(axes.x)
2648 4ffae834276e client: waterlevel diagram: added background grid to chart Markus Kottlaender <markus@intevation.de> parents: 2646 diff changeset	662 .selectAll(".tick text")
4ffae834276e client: waterlevel diagram: added background grid to chart Markus Kottlaender <markus@intevation.de> parents: 2646 diff changeset	663 .attr("y", 15);
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	664 diagram // label
2641 a735119e4f5c client: waterlevel diagram: added y-axis label Markus Kottlaender <markus@intevation.de> parents: 2611 diff changeset	665 .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	666 .text(this.$gettext("Waterlevel [m]"))
2641 a735119e4f5c client: waterlevel diagram: added y-axis label Markus Kottlaender <markus@intevation.de> parents: 2611 diff changeset	667 .attr("text-anchor", "middle")
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	668 .attr(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	669 "transform",
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	670 `translate(-45, ${dimensions.mainHeight / 2}) rotate(-90)`
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	671 );
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	672 diagram
2648 4ffae834276e client: waterlevel diagram: added background grid to chart Markus Kottlaender <markus@intevation.de> parents: 2646 diff changeset	673 .append("g")
3901 fe0d62727c41 client: waterlevel diagram: added right y axis Markus Kottlaender <markus@intevation.de> parents: 3894 diff changeset	674 .attr("class", "axis--y")
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	675 .call(axes.y)
2648 4ffae834276e client: waterlevel diagram: added background grid to chart Markus Kottlaender <markus@intevation.de> parents: 2646 diff changeset	676 .selectAll(".tick text")
4ffae834276e client: waterlevel diagram: added background grid to chart Markus Kottlaender <markus@intevation.de> parents: 2646 diff changeset	677 .attr("x", -25);
3901 fe0d62727c41 client: waterlevel diagram: added right y axis Markus Kottlaender <markus@intevation.de> parents: 3894 diff changeset	678 diagram
fe0d62727c41 client: waterlevel diagram: added right y axis Markus Kottlaender <markus@intevation.de> parents: 3894 diff changeset	679 .append("g")
fe0d62727c41 client: waterlevel diagram: added right y axis Markus Kottlaender <markus@intevation.de> parents: 3894 diff changeset	680 .attr("class", "axis--y-right")
fe0d62727c41 client: waterlevel diagram: added right y axis Markus Kottlaender <markus@intevation.de> parents: 3894 diff changeset	681 .attr("transform", `translate(${dimensions.width})`)
fe0d62727c41 client: waterlevel diagram: added right y axis Markus Kottlaender <markus@intevation.de> parents: 3894 diff changeset	682 .call(axes.yRight)
fe0d62727c41 client: waterlevel diagram: added right y axis Markus Kottlaender <markus@intevation.de> parents: 3894 diff changeset	683 .selectAll(".tick text");
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	684
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	685 navigation
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	686 .append("g")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	687 .attr("class", "axis axis--x")
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	688 .attr("transform", `translate(0, ${dimensions.navHeight})`)
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	689 .call(axes.x2);
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	690
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	691 return () => {
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	692 diagram
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	693 .select(".axis--x")
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	694 .call(axes.x)
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	695 .selectAll(".tick text")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	696 .attr("y", 15);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	697 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	698 },
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	699 drawWaterlevelChart({ scale, diagram }) {
3253 3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	700 const waterlevelChartDrawer = () => {
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	701 let domainLeft = new Date(scale.x.domain()[0].getTime());
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	702 let domainRight = new Date(scale.x.domain()[1].getTime());
3253 3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	703 domainLeft.setDate(domainLeft.getDate() - 1);
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	704 domainRight.setDate(domainRight.getDate() + 1);
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	705
3782 d36ccff8de5f pdf: waterlevel diagram with svg2pdf Thomas Junk <thomas.junk@intevation.de> parents: 3780 diff changeset	706 let lineChunked = d3
d36ccff8de5f pdf: waterlevel diagram with svg2pdf Thomas Junk <thomas.junk@intevation.de> parents: 3780 diff changeset	707 .lineChunked()
d36ccff8de5f pdf: waterlevel diagram with svg2pdf Thomas Junk <thomas.junk@intevation.de> parents: 3780 diff changeset	708 // render only data points that are visible in the current scale
d36ccff8de5f pdf: waterlevel diagram with svg2pdf Thomas Junk <thomas.junk@intevation.de> parents: 3780 diff changeset	709 .defined(d => d.date > domainLeft && d.date < domainRight)
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	710 .x(d => scale.x(d.date))
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	711 .y(d => scale.y(d.waterlevel))
3782 d36ccff8de5f pdf: waterlevel diagram with svg2pdf Thomas Junk <thomas.junk@intevation.de> parents: 3780 diff changeset	712 .curve(d3.curveLinear)
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	713 .isNext(this.isNext(scale))
3782 d36ccff8de5f pdf: waterlevel diagram with svg2pdf Thomas Junk <thomas.junk@intevation.de> parents: 3780 diff changeset	714 .pointAttrs({ r: 1.7 });
d36ccff8de5f pdf: waterlevel diagram with svg2pdf Thomas Junk <thomas.junk@intevation.de> parents: 3780 diff changeset	715 // to avoid creating empty clip-path element
d36ccff8de5f pdf: waterlevel diagram with svg2pdf Thomas Junk <thomas.junk@intevation.de> parents: 3780 diff changeset	716 if (this.hasPredictions) {
d36ccff8de5f pdf: waterlevel diagram with svg2pdf Thomas Junk <thomas.junk@intevation.de> parents: 3780 diff changeset	717 lineChunked
3253 3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	718 .chunk(d => (d.predicted ? "predicted" : "line"))
3782 d36ccff8de5f pdf: waterlevel diagram with svg2pdf Thomas Junk <thomas.junk@intevation.de> parents: 3780 diff changeset	719 .chunkDefinitions({ predicted: {} });
d36ccff8de5f pdf: waterlevel diagram with svg2pdf Thomas Junk <thomas.junk@intevation.de> parents: 3780 diff changeset	720 }
d36ccff8de5f pdf: waterlevel diagram with svg2pdf Thomas Junk <thomas.junk@intevation.de> parents: 3780 diff changeset	721 return lineChunked;
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	722 };
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	723
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	724 diagram
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	725 .append("g")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	726 .attr("class", "line")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	727 .datum(this.waterlevels)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	728 .call(waterlevelChartDrawer());
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	729
3253 3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	730 return () => {
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	731 diagram.select(".line").call(waterlevelChartDrawer());
3253 3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	732 };
3a7b6eb162db client: waterlevel diagram: separated main chart and navigation drawers Markus Kottlaender <markus@intevation.de> parents: 3252 diff changeset	733 },
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	734 drawNavigationChart({ scale, navigation }) {
3782 d36ccff8de5f pdf: waterlevel diagram with svg2pdf Thomas Junk <thomas.junk@intevation.de> parents: 3780 diff changeset	735 let lineChunked = d3
d36ccff8de5f pdf: waterlevel diagram with svg2pdf Thomas Junk <thomas.junk@intevation.de> parents: 3780 diff changeset	736 .lineChunked()
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	737 .x(d => scale.x2(d.date))
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	738 .y(d => scale.y2(d.waterlevel))
3782 d36ccff8de5f pdf: waterlevel diagram with svg2pdf Thomas Junk <thomas.junk@intevation.de> parents: 3780 diff changeset	739 .curve(d3.curveLinear)
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	740 .isNext(this.isNext(scale))
3782 d36ccff8de5f pdf: waterlevel diagram with svg2pdf Thomas Junk <thomas.junk@intevation.de> parents: 3780 diff changeset	741 .pointAttrs({ r: 1.7 });
d36ccff8de5f pdf: waterlevel diagram with svg2pdf Thomas Junk <thomas.junk@intevation.de> parents: 3780 diff changeset	742 // to avoid creating empty clip-path element
d36ccff8de5f pdf: waterlevel diagram with svg2pdf Thomas Junk <thomas.junk@intevation.de> parents: 3780 diff changeset	743 if (this.hasPredictions) {
d36ccff8de5f pdf: waterlevel diagram with svg2pdf Thomas Junk <thomas.junk@intevation.de> parents: 3780 diff changeset	744 lineChunked
d36ccff8de5f pdf: waterlevel diagram with svg2pdf Thomas Junk <thomas.junk@intevation.de> parents: 3780 diff changeset	745 .chunk(d => (d.predicted ? "predicted" : "line"))
d36ccff8de5f pdf: waterlevel diagram with svg2pdf Thomas Junk <thomas.junk@intevation.de> parents: 3780 diff changeset	746 .chunkDefinitions({ predicted: {} });
d36ccff8de5f pdf: waterlevel diagram with svg2pdf Thomas Junk <thomas.junk@intevation.de> parents: 3780 diff changeset	747 }
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	748 navigation
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	749 .append("g")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	750 .attr("class", "line")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	751 .datum(this.waterlevels)
3782 d36ccff8de5f pdf: waterlevel diagram with svg2pdf Thomas Junk <thomas.junk@intevation.de> parents: 3780 diff changeset	752 .call(lineChunked);
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	753 },
4295 0bb735a412af client: fix drawing of Now label on Diagram (Waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 4294 diff changeset	754 drawNowLines({ scale, extent, diagram, navigation, dimensions }) {
4144 737e1199800f draw now line with fixed delta Thomas Junk <thomas.junk@intevation.de> parents: 4143 diff changeset	755 const [lo, hi] = extent.waterlevel;
737e1199800f draw now line with fixed delta Thomas Junk <thomas.junk@intevation.de> parents: 4143 diff changeset	756 const dy = Math.ceil(0.15 * (hi - lo));
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	757 const nowLine = d3
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	758 .line()
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	759 .x(d => scale.x(d.x))
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	760 .y(d => scale.y(d.y));
3782 d36ccff8de5f pdf: waterlevel diagram with svg2pdf Thomas Junk <thomas.junk@intevation.de> parents: 3780 diff changeset	761
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	762 const nowLabel = selection => {
4295 0bb735a412af client: fix drawing of Now label on Diagram (Waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 4294 diff changeset	763 selection
0bb735a412af client: fix drawing of Now label on Diagram (Waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 4294 diff changeset	764 .attr(
0bb735a412af client: fix drawing of Now label on Diagram (Waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 4294 diff changeset	765 "transform",
0bb735a412af client: fix drawing of Now label on Diagram (Waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 4294 diff changeset	766 `translate(${scale.x(new Date())}, ${scale.y(hi + dy * 0.4)})`
0bb735a412af client: fix drawing of Now label on Diagram (Waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 4294 diff changeset	767 )
0bb735a412af client: fix drawing of Now label on Diagram (Waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 4294 diff changeset	768 // hide Now label outside the diagram y-axises
0bb735a412af client: fix drawing of Now label on Diagram (Waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 4294 diff changeset	769 .attr(
0bb735a412af client: fix drawing of Now label on Diagram (Waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 4294 diff changeset	770 "opacity",
0bb735a412af client: fix drawing of Now label on Diagram (Waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 4294 diff changeset	771 scale.x(new Date()) >= dimensions.width \|\| scale.x(new Date()) <= 0
0bb735a412af client: fix drawing of Now label on Diagram (Waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 4294 diff changeset	772 ? 0
0bb735a412af client: fix drawing of Now label on Diagram (Waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 4294 diff changeset	773 : 1
0bb735a412af client: fix drawing of Now label on Diagram (Waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 4294 diff changeset	774 );
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	775 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	776
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	777 // draw in main
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	778 diagram
2604 85f9bf4a6eba client: gauge waterlevel diagram: draw reference waterlevels Markus Kottlaender <markus@intevation.de> parents: 2596 diff changeset	779 .append("path")
4145 6095e95db454 optical adjustments to nowline and now line label Thomas Junk <thomas.junk@intevation.de> parents: 4144 diff changeset	780 .datum([
6095e95db454 optical adjustments to nowline and now line label Thomas Junk <thomas.junk@intevation.de> parents: 4144 diff changeset	781 { x: new Date(), y: lo - dy },
6095e95db454 optical adjustments to nowline and now line label Thomas Junk <thomas.junk@intevation.de> parents: 4144 diff changeset	782 { x: new Date(), y: hi + dy * 0.4 }
6095e95db454 optical adjustments to nowline and now line label Thomas Junk <thomas.junk@intevation.de> parents: 4144 diff changeset	783 ])
2775 2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	784 .attr("class", "now-line")
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	785 .attr("d", nowLine);
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	786 diagram // label
2775 2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	787 .append("text")
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	788 .text(this.$gettext("Now"))
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	789 .attr("class", "now-line-label")
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	790 .attr("text-anchor", "middle")
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	791 .call(nowLabel);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	792
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	793 // draw in nav
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	794 navigation
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	795 .append("path")
4144 737e1199800f draw now line with fixed delta Thomas Junk <thomas.junk@intevation.de> parents: 4143 diff changeset	796 .datum([{ x: new Date(), y: hi + dy }, { x: new Date(), y: lo - dy }])
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	797 .attr("class", "now-line")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	798 .attr(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	799 "d",
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	800 d3
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	801 .line()
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	802 .x(d => scale.x2(d.x))
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	803 .y(d => scale.y2(d.y))
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	804 );
2775 2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	805
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	806 return () => {
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	807 diagram.select(".now-line").attr("d", nowLine);
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	808 diagram.select(".now-line-label").call(nowLabel);
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	809 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	810 },
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	811 drawPredictionAreas({ scale, diagram, navigation }) {
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	812 const predictionArea = isNav =>
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	813 d3
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	814 .area()
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	815 .defined(d => d.predicted && d.min && d.max)
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	816 .x(d => scale[isNav ? "x2" : "x"](d.date))
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	817 .y0(d => scale[isNav ? "y2" : "y"](d.min))
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	818 .y1(d => scale[isNav ? "y2" : "y"](d.max));
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	819
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	820 diagram
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	821 .append("path")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	822 .datum(this.waterlevels)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	823 .attr("class", "prediction-area")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	824 .attr("d", predictionArea());
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	825
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	826 navigation
2775 2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	827 .append("path")
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	828 .datum(this.waterlevels)
2feb9f8f6c66 client: waterlevel diagram: implemented display of forecast data Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	829 .attr("class", "prediction-area")
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	830 .attr("d", predictionArea(true));
2610 5ce1b4b29869 client: waterlevel diagram: refactored code for better readability Markus Kottlaender <markus@intevation.de> parents: 2607 diff changeset	831
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	832 return () => {
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	833 diagram.select(".prediction-area").attr("d", predictionArea());
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	834 };
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	835 },
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	836 drawRefLines({ refWaterLevels, diagram, scale, dimensions, extent }) {
4125 0f69d256fa12 client: fix drawing of diagram in case reference waterlevels are missing Fadi Abbud <fadi.abbud@intevation.de> parents: 4109 diff changeset	837 if (refWaterLevels) {
4153 7c44af0b9370 client: Waterleveldiagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4150 diff changeset	838 const { LDC, HDC } = this.determineLDCHDC(refWaterLevels);
4154 d54d86d27e82 client: waterlevel: remove whitespace and add comment Fadi Abbud <fadi.abbud@intevation.de> parents: 4153 diff changeset	839 // filling area between HDC and LDC if both of them are available
4153 7c44af0b9370 client: Waterleveldiagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4150 diff changeset	840 if (LDC && HDC) {
7c44af0b9370 client: Waterleveldiagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4150 diff changeset	841 diagram
7c44af0b9370 client: Waterleveldiagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4150 diff changeset	842 .append("rect")
7c44af0b9370 client: Waterleveldiagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4150 diff changeset	843 .attr("class", "hdc-ldc-area")
7c44af0b9370 client: Waterleveldiagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4150 diff changeset	844 .attr("x", 0)
7c44af0b9370 client: Waterleveldiagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4150 diff changeset	845 .attr("y", scale.y(HDC))
7c44af0b9370 client: Waterleveldiagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4150 diff changeset	846 .attr("width", dimensions.width)
7c44af0b9370 client: Waterleveldiagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4150 diff changeset	847 .attr("height", refWaterLevels ? scale.y(LDC) - scale.y(HDC) : 0);
7c44af0b9370 client: Waterleveldiagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4150 diff changeset	848 }
4125 0f69d256fa12 client: fix drawing of diagram in case reference waterlevels are missing Fadi Abbud <fadi.abbud@intevation.de> parents: 4109 diff changeset	849 }
2610 5ce1b4b29869 client: waterlevel diagram: refactored code for better readability Markus Kottlaender <markus@intevation.de> parents: 2607 diff changeset	850
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	851 const refWaterlevelLine = d3
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	852 .line()
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	853 .x(d => scale.x(d.x))
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	854 .y(d => scale.y(d.y));
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	855
4153 7c44af0b9370 client: Waterleveldiagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4150 diff changeset	856 const levelStyle = name => {
7c44af0b9370 client: Waterleveldiagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4150 diff changeset	857 if (/HDC/.test(name)) return "hdc-line";
7c44af0b9370 client: Waterleveldiagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4150 diff changeset	858 if (/LDC/.test(name)) return "ldc-line";
7c44af0b9370 client: Waterleveldiagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4150 diff changeset	859 return `${name.toLowerCase()}-line`;
7c44af0b9370 client: Waterleveldiagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4150 diff changeset	860 };
7c44af0b9370 client: Waterleveldiagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4150 diff changeset	861
3211 f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	862 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	863 if (refWaterLevels[ref]) {
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	864 diagram
3211 f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	865 .append("path")
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	866 .datum([
3782 d36ccff8de5f pdf: waterlevel diagram with svg2pdf Thomas Junk <thomas.junk@intevation.de> parents: 3780 diff changeset	867 { x: 0, y: refWaterLevels[ref] },
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	868 { x: extent.date[1], y: refWaterLevels[ref] }
3211 f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	869 ])
4153 7c44af0b9370 client: Waterleveldiagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4150 diff changeset	870 .attr("class", levelStyle(ref))
3211 f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	871 .attr("d", refWaterlevelLine);
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	872 diagram // label
3211 f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	873 .append("rect")
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	874 .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	875 .attr("x", 1)
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	876 .attr("y", scale.y(refWaterLevels[ref]) - 13)
3211 f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	877 .attr("width", 55)
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	878 .attr("height", 12);
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	879 diagram
3211 f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	880 .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	881 .text(
1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized Markus Kottlaender <markus@intevation.de> parents: 3565 diff changeset	882 `${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	883 refWaterLevels[ref]
1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized Markus Kottlaender <markus@intevation.de> parents: 3565 diff changeset	884 )})`
1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized Markus Kottlaender <markus@intevation.de> parents: 3565 diff changeset	885 )
3211 f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	886 .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	887 .attr("x", 5)
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	888 .attr("y", scale.y(refWaterLevels[ref]) - 3);
3211 f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	889 }
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	890 }
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	891 },
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	892 drawNashSutcliffe({ hours, diagram, scale, dimensions }) {
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	893 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	894 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	895 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	896
4294 c8b18408cc55 client: show Nash Sutcliffe on waterlevel-diagram only if now in the selected time range Fadi Abbud <fadi.abbud@intevation.de> parents: 4249 diff changeset	897 const nashSutcliffeBox = (hours, date) => {
3348 7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	898 // show/hide boxes depending on scale of chart (hide if > 90 days)
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	899 diagram
3348 7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	900 .selectAll("path.nash-sutcliffe")
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	901 .attr(
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	902 "stroke-opacity",
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	903 scale.x.domain()[1] - scale.x.domain()[0] > 90 * 86400000 ? 0 : 1
4294 c8b18408cc55 client: show Nash Sutcliffe on waterlevel-diagram only if now in the selected time range Fadi Abbud <fadi.abbud@intevation.de> parents: 4249 diff changeset	904 )
c8b18408cc55 client: show Nash Sutcliffe on waterlevel-diagram only if now in the selected time range Fadi Abbud <fadi.abbud@intevation.de> parents: 4249 diff changeset	905 // show boxes only if now line in the selected time range
c8b18408cc55 client: show Nash Sutcliffe on waterlevel-diagram only if now in the selected time range Fadi Abbud <fadi.abbud@intevation.de> parents: 4249 diff changeset	906 .attr("opacity", dimensions.width >= scale.x(date) ? 1 : 0);
2751 5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe Markus Kottlaender <markus@intevation.de> parents: 2728 diff changeset	907 return d3
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe Markus Kottlaender <markus@intevation.de> parents: 2728 diff changeset	908 .area()
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	909 .x(d => scale.x(d))
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	910 .y0(() => dimensions.mainHeight + 0.5)
4140 4d7569cca5e6 client: fix rendering of nash-sutcliffe lines on pdf Fadi Abbud <fadi.abbud@intevation.de> parents: 4139 diff changeset	911 .y1(
4d7569cca5e6 client: fix rendering of nash-sutcliffe lines on pdf Fadi Abbud <fadi.abbud@intevation.de> parents: 4139 diff changeset	912 () =>
4d7569cca5e6 client: fix rendering of nash-sutcliffe lines on pdf Fadi Abbud <fadi.abbud@intevation.de> parents: 4139 diff changeset	913 dimensions.mainHeight -
4d7569cca5e6 client: fix rendering of nash-sutcliffe lines on pdf Fadi Abbud <fadi.abbud@intevation.de> parents: 4139 diff changeset	914 Math.floor(0.06 * dimensions.mainHeight) * (hours / 24)
4d7569cca5e6 client: fix rendering of nash-sutcliffe lines on pdf Fadi Abbud <fadi.abbud@intevation.de> parents: 4139 diff changeset	915 );
2751 5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe Markus Kottlaender <markus@intevation.de> parents: 2728 diff changeset	916 };
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe Markus Kottlaender <markus@intevation.de> parents: 2728 diff changeset	917
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe Markus Kottlaender <markus@intevation.de> parents: 2728 diff changeset	918 const nashSutcliffeLabel = (label, date, hours) => {
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe Markus Kottlaender <markus@intevation.de> parents: 2728 diff changeset	919 let days = hours / 24;
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe Markus Kottlaender <markus@intevation.de> parents: 2728 diff changeset	920 label
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	921 .attr("x", Math.min(scale.x(date), dimensions.width) - 4)
4140 4d7569cca5e6 client: fix rendering of nash-sutcliffe lines on pdf Fadi Abbud <fadi.abbud@intevation.de> parents: 4139 diff changeset	922 .attr(
4d7569cca5e6 client: fix rendering of nash-sutcliffe lines on pdf Fadi Abbud <fadi.abbud@intevation.de> parents: 4139 diff changeset	923 "y",
4d7569cca5e6 client: fix rendering of nash-sutcliffe lines on pdf Fadi Abbud <fadi.abbud@intevation.de> parents: 4139 diff changeset	924 dimensions.mainHeight -
4d7569cca5e6 client: fix rendering of nash-sutcliffe lines on pdf Fadi Abbud <fadi.abbud@intevation.de> parents: 4139 diff changeset	925 (Math.floor(0.06 * dimensions.mainHeight) * days + 0.5) +
4d7569cca5e6 client: fix rendering of nash-sutcliffe lines on pdf Fadi Abbud <fadi.abbud@intevation.de> parents: 4139 diff changeset	926 12
4294 c8b18408cc55 client: show Nash Sutcliffe on waterlevel-diagram only if now in the selected time range Fadi Abbud <fadi.abbud@intevation.de> parents: 4249 diff changeset	927 )
c8b18408cc55 client: show Nash Sutcliffe on waterlevel-diagram only if now in the selected time range Fadi Abbud <fadi.abbud@intevation.de> parents: 4249 diff changeset	928 // show label only if now line in the selected time range
c8b18408cc55 client: show Nash Sutcliffe on waterlevel-diagram only if now in the selected time range Fadi Abbud <fadi.abbud@intevation.de> parents: 4249 diff changeset	929 .attr("opacity", dimensions.width >= scale.x(date) ? 1 : 0);
2751 5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe Markus Kottlaender <markus@intevation.de> parents: 2728 diff changeset	930 };
5da81634bdc4 client: waterlevel diagram: implemented nash-sutcliffe Markus Kottlaender <markus@intevation.de> parents: 2728 diff changeset	931
3348 7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	932 if (coeff.samples) {
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	933 diagram
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	934 .append("path")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	935 .datum([dateStart, dateNow])
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	936 .attr("class", "nash-sutcliffe ns" + hours)
4294 c8b18408cc55 client: show Nash Sutcliffe on waterlevel-diagram only if now in the selected time range Fadi Abbud <fadi.abbud@intevation.de> parents: 4249 diff changeset	937 .attr("d", nashSutcliffeBox(hours, dateNow));
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	938 diagram
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	939 .append("text")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	940 .attr("class", "nash-sutcliffe ns" + hours)
3348 7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	941 .attr("text-anchor", "end")
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	942 .call(nashSutcliffeLabel, dateNow, hours)
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	943 .append("tspan")
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	944 .text(hours + "h: ")
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	945 .select(function() {
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	946 return this.parentNode;
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	947 })
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	948 .append("tspan")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	949 .text(coeff.value.toFixed(2))
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	950 .select(function() {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	951 return this.parentNode;
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	952 })
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	953 .append("tspan")
3348 7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	954 .text(` (${coeff.samples})`);
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	955 }
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	956
3348 7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	957 return () => {
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	958 diagram
3348 7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	959 .select("path.nash-sutcliffe.ns" + hours)
4294 c8b18408cc55 client: show Nash Sutcliffe on waterlevel-diagram only if now in the selected time range Fadi Abbud <fadi.abbud@intevation.de> parents: 4249 diff changeset	960 .attr("d", nashSutcliffeBox(hours, dateNow));
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	961 diagram
3348 7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	962 .select("text.nash-sutcliffe.ns" + hours)
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	963 .call(nashSutcliffeLabel, dateNow, hours);
7bb6c921cf91 client: waterlevel diagram: improved nash sutcliffe display Markus Kottlaender <markus@intevation.de> parents: 3346 diff changeset	964 };
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	965 },
4225 92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 4155 diff changeset	966 createZoom({
92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 4155 diff changeset	967 updaters,
92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 4155 diff changeset	968 eventRect,
92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 4155 diff changeset	969 dimensions,
92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 4155 diff changeset	970 scale,
92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 4155 diff changeset	971 navigation,
92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 4155 diff changeset	972 svg,
92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 4155 diff changeset	973 zoomLevel
92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 4155 diff changeset	974 }) {
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	975 const brush = d3
2610 5ce1b4b29869 client: waterlevel diagram: refactored code for better readability Markus Kottlaender <markus@intevation.de> parents: 2607 diff changeset	976 .brushX()
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability Markus Kottlaender <markus@intevation.de> parents: 2607 diff changeset	977 .handleSize(4)
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	978 .extent([[0, 0], [dimensions.width, dimensions.navHeight]]);
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	979
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	980 const zoom = d3
2610 5ce1b4b29869 client: waterlevel diagram: refactored code for better readability Markus Kottlaender <markus@intevation.de> parents: 2607 diff changeset	981 .zoom()
5ce1b4b29869 client: waterlevel diagram: refactored code for better readability Markus Kottlaender <markus@intevation.de> parents: 2607 diff changeset	982 .scaleExtent([1, Infinity])
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	983 .translateExtent([[0, 0], [dimensions.width, dimensions.mainHeight]])
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	984 .extent([[0, 0], [dimensions.width, dimensions.mainHeight]]);
2610 5ce1b4b29869 client: waterlevel diagram: refactored code for better readability Markus Kottlaender <markus@intevation.de> parents: 2607 diff changeset	985
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	986 brush.on("brush end", () => {
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	987 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	988 return; // ignore brush-by-zoom
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	989 let s = d3.event.selection \|\| scale.x2.range();
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	990 scale.x.domain(s.map(scale.x2.invert, scale.x2));
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	991 updaters.forEach(u => u && u());
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	992 this.setInlineStyles(svg);
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	993 svg
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	994 .select(".zoom")
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	995 .call(
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	996 zoom.transform,
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	997 d3.zoomIdentity
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	998 .scale(dimensions.width / (s[1] - s[0]))
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	999 .translate(-s[0], 0)
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1000 );
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1001 });
4225 92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 4155 diff changeset	1002 let scaleForZoom = t => {
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	1003 scale.x.domain(t.rescaleX(scale.x2).domain());
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1004 updaters.forEach(u => u && u());
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	1005 this.setInlineStyles(svg);
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	1006 navigation
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1007 .select(".brush")
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	1008 .call(brush.move, scale.x.range().map(t.invertX, t));
4225 92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 4155 diff changeset	1009 };
92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 4155 diff changeset	1010 zoom.on("zoom", () => {
4381 275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	1011 if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") {
4225 92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 4155 diff changeset	1012 return; // ignore zoom-by-brush
4381 275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	1013 }
4225 92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 4155 diff changeset	1014 let t = d3.event.transform;
4381 275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	1015 // set the zoom to the passed zoom level.
4225 92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 4155 diff changeset	1016 if (zoomLevel) {
4381 275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	1017 let tx = (zoomLevel.x * dimensions.width) / zoomLevel.width;
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	1018 let k = zoomLevel.k;
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	1019 let ty = zoomLevel.y;
4228 b8d578e42b4b pdfprint: generate a new transform object instead of manipulating the given one. Thomas Junk <thomas.junk@intevation.de> parents: 4226 diff changeset	1020 t = d3.zoomIdentity.translate(tx, ty).scale(k);
4381 275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	1021 zoomLevel = null; // avoid to stuck at same zoom level after setting the zoom by subsequent zooming.
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	1022 } else {
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	1023 temp = { ...d3.event.transform, width: dimensions.width };
4225 92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 4155 diff changeset	1024 }
4228 b8d578e42b4b pdfprint: generate a new transform object instead of manipulating the given one. Thomas Junk <thomas.junk@intevation.de> parents: 4226 diff changeset	1025 scaleForZoom(t);
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1026 });
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1027 zoom.on("start", () => {
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	1028 svg.select(".chart-dot").style("opacity", 0);
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	1029 svg.select(".chart-tooltip").style("opacity", 0);
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1030 });
4225 92c2f93fef3c client: pdf-gen: export the selected time-range of diagram on pdf(waterlevels) Fadi Abbud <fadi.abbud@intevation.de> parents: 4155 diff changeset	1031 // store the zoom level after zomming is ended
4381 275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	1032 zoom.on("end", () => {
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	1033 if (!zoomLevel) {
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	1034 this.zoomStore = temp
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	1035 ? temp
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	1036 : { ...d3.event.transform, width: dimensions.width };
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	1037 }
275220c82026 client: add show Nash-Sutcliffe to waterlevels diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4295 diff changeset	1038 });
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1039
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	1040 navigation
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1041 .append("g")
1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1042 .attr("class", "brush")
1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1043 .call(brush)
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	1044 .call(brush.move, scale.x.range());
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1045
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1046 eventRect.call(zoom);
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1047 },
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	1048 createTooltips({ eventRect, diagram, scale, dimensions }) {
2816 c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1049 // create clippable container for the dot
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	1050 diagram
2816 c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1051 .append("g")
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1052 .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	1053 .append("circle")
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart Markus Kottlaender <markus@intevation.de> parents: 2684 diff changeset	1054 .attr("class", "chart-dot")
4150 40bd6854a294 waterlevel_diagram: make dot initially invisible Thomas Junk <thomas.junk@intevation.de> parents: 4145 diff changeset	1055 .attr("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	1056 .attr("r", 4);
2816 c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1057
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1058 // create container for the tooltip
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	1059 const tooltip = 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	1060 tooltip
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1061 .append("rect")
2842 37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1062 .attr("rx", "0.25em")
3782 d36ccff8de5f pdf: waterlevel diagram with svg2pdf Thomas Junk <thomas.junk@intevation.de> parents: 3780 diff changeset	1063 .attr("ry", "0.25em")
3992 2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1064 .attr("width", "0px")
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1065 .attr("height", "0px");
2816 c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1066
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1067 // create container for multiple text rows
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1068 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	1069
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1070 // 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	1071 // 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	1072 const tooltipPadding = 10;
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1073 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	1074
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1075 eventRect
2689 8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart Markus Kottlaender <markus@intevation.de> parents: 2684 diff changeset	1076 .on("mouseover", () => {
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	1077 diagram.select(".chart-dot").style("opacity", 1);
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	1078 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	1079 })
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart Markus Kottlaender <markus@intevation.de> parents: 2684 diff changeset	1080 .on("mouseout", () => {
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	1081 diagram.select(".chart-dot").style("opacity", 0);
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	1082 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	1083 })
8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart Markus Kottlaender <markus@intevation.de> parents: 2684 diff changeset	1084 .on("mousemove", () => {
2816 c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1085 // find data point closest to mouse
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	1086 const x0 = scale.x.invert(
3212 f87fd173f750 client: waterlevel diagrams: fixed tooltip bug Markus Kottlaender <markus@intevation.de> parents: 3211 diff changeset	1087 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	1088 ),
eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1089 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	1090 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	1091 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	1092 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	1093
2816 c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1094 const coords = {
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	1095 x: scale.x(d.date),
d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	1096 y: scale.y(d.waterlevel)
2816 c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1097 };
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1098
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1099 // position the dot
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	1100 diagram
2689 8f919fe629f9 client: waterlevel diagram: added tooltips showing date and waterlevel on the chart Markus Kottlaender <markus@intevation.de> parents: 2684 diff changeset	1101 .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	1102 .style("opacity", 1)
2816 c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1103 .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	1104
2819 53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1105 // remove current texts
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1106 tooltipText.selectAll("tspan").remove();
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1107
2816 c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1108 // write date
2819 53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1109 tooltipText
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1110 .append("tspan")
2842 37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1111 .attr("dominant-baseline", "hanging")
2819 53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1112 .attr("text-anchor", "middle")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1113 .text(
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1114 d.date.toLocaleString([], {
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1115 year: "2-digit",
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1116 month: "2-digit",
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1117 day: "2-digit",
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1118 hour: "2-digit",
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1119 minute: "2-digit"
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1120 })
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
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1123 if (d.predicted) {
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1124 tooltipText
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1125 .append("tspan")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1126 .attr("x", 0)
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1127 .attr("y", 0)
2842 37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1128 .attr("dy", "1.4em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1129 .attr("dominant-baseline", "hanging")
2819 53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1130 .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	1131 .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	1132 tooltipText
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1133 .append("tspan")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1134 .attr("x", 0)
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1135 .attr("y", 0)
2842 37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1136 .attr("dy", "2.6em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1137 .attr("dominant-baseline", "hanging")
2819 53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1138 .attr("text-anchor", "middle")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1139 .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	1140 .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	1141 tooltipText
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1142 .append("tspan")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1143 .attr("x", 0)
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1144 .attr("y", 0)
2842 37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1145 .attr("dy", "3.8em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1146 .attr("dominant-baseline", "hanging")
2819 53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1147 .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	1148 .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	1149 } else {
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1150 tooltipText
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1151 .append("tspan")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1152 .attr("x", 0)
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1153 .attr("y", 0)
2842 37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1154 .attr("dy", "1.4em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1155 .attr("dominant-baseline", "hanging")
2819 53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1156 .attr("text-anchor", "middle")
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1157 .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	1158 .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	1159 }
2816 c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1160
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1161 // get text dimensions
2819 53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1162 const textBBox = tooltipText.node().getBBox();
2816 c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1163
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	1164 diagram
2816 c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1165 .selectAll(".chart-tooltip text tspan")
2819 53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1166 .attr("x", textBBox.width / 2 + tooltipPadding)
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1167 .attr("y", tooltipPadding);
2816 c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1168
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1169 // position and scale tooltip box
2819 53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1170 const xMax =
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	1171 dimensions.width -
2819 53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1172 (textBBox.width + diagramPadding + tooltipPadding * 2);
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1173 const tooltipX = Math.max(
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1174 diagramPadding,
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1175 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	1176 );
2824 d7c4169516fa client: spuc7/8: further improved tooltip positioning Markus Kottlaender <markus@intevation.de> parents: 2821 diff changeset	1177 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	1178 if (coords.y < textBBox.height + tooltipPadding * 2) {
d7c4169516fa client: spuc7/8: further improved tooltip positioning Markus Kottlaender <markus@intevation.de> parents: 2821 diff changeset	1179 tooltipY = coords.y + 10;
d7c4169516fa client: spuc7/8: further improved tooltip positioning Markus Kottlaender <markus@intevation.de> parents: 2821 diff changeset	1180 }
d7c4169516fa client: spuc7/8: further improved tooltip positioning Markus Kottlaender <markus@intevation.de> parents: 2821 diff changeset	1181
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	1182 diagram
2816 c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1183 .select(".chart-tooltip")
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1184 .style("opacity", 1)
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1185 .attr("transform", `translate(${tooltipX}, ${tooltipY})`)
c02cebff3f16 client: SPUC7/8: fix tooltip size and positioning Markus Kottlaender <markus@intevation.de> parents: 2810 diff changeset	1186 .select("rect")
2819 53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1187 .attr("width", textBBox.width + tooltipPadding * 2)
53c2bd009c68 client: diagrams: further improved tooltip positioning/sizing Markus Kottlaender <markus@intevation.de> parents: 2816 diff changeset	1188 .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	1189 });
2805 eb91ad1d7a93 client: waterlevel diagram: optimized code for better readability Markus Kottlaender <markus@intevation.de> parents: 2794 diff changeset	1190 },
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	1191 isNext(scale) {
3252 fccb28813159 client: wterlevel diagram: improved performance Markus Kottlaender <markus@intevation.de> parents: 3249 diff changeset	1192 // 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	1193 // 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	1194 // 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	1195 // 1 hour is also valid (for approved gauge measurements).
fccb28813159 client: wterlevel diagram: improved performance Markus Kottlaender <markus@intevation.de> parents: 3249 diff changeset	1196 return (prev, current) => {
fccb28813159 client: wterlevel diagram: improved performance Markus Kottlaender <markus@intevation.de> parents: 3249 diff changeset	1197 let difference = (current.date - prev.date) / 1000;
3885 d42158f77841 waterlevel: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3853 diff changeset	1198 if ((scale.x.domain()[1] - scale.x.domain()[0]) / 86400000 > 15)
3252 fccb28813159 client: wterlevel diagram: improved performance Markus Kottlaender <markus@intevation.de> parents: 3249 diff changeset	1199 return [900, 3600].includes(difference);
fccb28813159 client: wterlevel diagram: improved performance Markus Kottlaender <markus@intevation.de> parents: 3249 diff changeset	1200 return difference === 900;
fccb28813159 client: wterlevel diagram: improved performance Markus Kottlaender <markus@intevation.de> parents: 3249 diff changeset	1201 };
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1202 }
3992 2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1203 },
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1204 created() {
4462 2793893bc7f5 clinet: Waterlevels: fix resizing problem for diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4456 diff changeset	1205 this.resizeListenerFunction = debounce(() => {
2793893bc7f5 clinet: Waterlevels: fix resizing problem for diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4456 diff changeset	1206 this.zoomStore // restore last zoom level
2793893bc7f5 clinet: Waterlevels: fix resizing problem for diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4456 diff changeset	1207 ? this.drawDiagram({ ...this.zoomStore })
2793893bc7f5 clinet: Waterlevels: fix resizing problem for diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4456 diff changeset	1208 : this.drawDiagram();
2793893bc7f5 clinet: Waterlevels: fix resizing problem for diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 4456 diff changeset	1209 }, 100);
3992 2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1210 window.addEventListener("resize", this.resizeListenerFunction);
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1211 },
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1212 mounted() {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1213 // Nasty but necessary if we don't want to use the updated hook to re-draw
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1214 // the diagram because this would re-draw it also for irrelevant reasons.
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1215 // In this case we need to wait for the child component (DiagramLegend) to
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1216 // render. According to the docs (https://vuejs.org/v2/api/#mounted) this
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1217 // should be possible with $nextTick() but it doesn't work because it does
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1218 // not guarantee that the DOM is not only updated but also re-painted on the
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1219 // screen.
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1220 setTimeout(this.drawDiagram, 150);
4384 b146d3c648f8 gauges: decouple date and title from store Thomas Junk <thomas.junk@intevation.de> parents: 4381 diff changeset	1221 this.initialDiagramValues();
3992 2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1222 this.templates[0] = this.defaultTemplate;
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1223 this.form.template = this.templates[0];
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1224 this.templateData = this.form.template;
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1225 HTTP.get("/templates/diagram", {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1226 headers: {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1227 "X-Gemma-Auth": localStorage.getItem("token"),
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1228 "Content-type": "text/xml; charset=UTF-8"
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1229 }
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1230 })
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1231 .then(response => {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1232 if (response.data.length) {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1233 this.templates = response.data;
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1234 this.form.template = this.templates[0];
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1235 this.templates[this.templates.length] = this.defaultTemplate;
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1236 this.applyChange();
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1237 }
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1238 })
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1239 .catch(e => {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1240 const { status, data } = e.response;
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1241 displayError({
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1242 title: this.$gettext("Backend Error"),
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1243 message: `${status}: ${data.message \|\| data}`
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1244 });
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1245 });
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1246 },
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1247 destroyed() {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1248 window.removeEventListener("resize", this.resizeListenerFunction);
2590 1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1249 }
1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1250 };
1686ec185155 client: added gauge waterlevel example diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1251 </script>

Mercurial > gemma

annotate client/src/components/gauge/Waterlevel.vue @ 4721:b2119cf5c7fb