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

annotate client/src/components/gauge/HydrologicalConditions.vue @ 4809:b6d8570b8480

client: image-export: add diagram legend

author	Fadi Abbud <fadi.abbud@intevation.de>
date	Tue, 29 Oct 2019 16:29:29 +0100
parents	db450fcc8ed7
children	008bc1ae8897

rev	line source
2761 71e7237110ba client: spuc8: prepared 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: 3129 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: 3129 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: 3129 diff changeset	11 <div class="legend">
3323 de0d0685a17b client: improve diagram-legends style Fadi Abbud <fadi.abbud@intevation.de> parents: 3285 diff changeset	12 <span
de0d0685a17b client: improve diagram-legends style Fadi Abbud <fadi.abbud@intevation.de> parents: 3285 diff changeset	13 style="background-color: red; width: 20px; height: 20px;"
de0d0685a17b client: improve diagram-legends style Fadi Abbud <fadi.abbud@intevation.de> parents: 3285 diff changeset	14 ></span>
4385 610773d34e4f hydrological_conditions: decouple diagram from dialogue Thomas Junk <thomas.junk@intevation.de> parents: 4228 diff changeset	15 {{ yearCompareD }}
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	16 </div>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	17 <div class="legend">
3323 de0d0685a17b client: improve diagram-legends style Fadi Abbud <fadi.abbud@intevation.de> parents: 3285 diff changeset	18 <span
de0d0685a17b client: improve diagram-legends style Fadi Abbud <fadi.abbud@intevation.de> parents: 3285 diff changeset	19 style="background-color: orange; width: 20px; height: 20px;"
de0d0685a17b client: improve diagram-legends style Fadi Abbud <fadi.abbud@intevation.de> parents: 3285 diff changeset	20 ></span>
4593 3632cfc44b69 client: mark diagram strings for translations(waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4473 diff changeset	21 <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	22 >Q25%</span
3632cfc44b69 client: mark diagram strings for translations(waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4473 diff changeset	23 >
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	24 </div>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	25 <div class="legend">
3323 de0d0685a17b client: improve diagram-legends style Fadi Abbud <fadi.abbud@intevation.de> parents: 3285 diff changeset	26 <span
de0d0685a17b client: improve diagram-legends style Fadi Abbud <fadi.abbud@intevation.de> parents: 3285 diff changeset	27 style="background-color: black; width: 20px; height: 20px;"
de0d0685a17b client: improve diagram-legends style Fadi Abbud <fadi.abbud@intevation.de> parents: 3285 diff changeset	28 ></span>
4593 3632cfc44b69 client: mark diagram strings for translations(waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4473 diff changeset	29 <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	30 >Median</span
3632cfc44b69 client: mark diagram strings for translations(waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4473 diff changeset	31 >
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	32 </div>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	33 <div class="legend">
3323 de0d0685a17b client: improve diagram-legends style Fadi Abbud <fadi.abbud@intevation.de> parents: 3285 diff changeset	34 <span
de0d0685a17b client: improve diagram-legends style Fadi Abbud <fadi.abbud@intevation.de> parents: 3285 diff changeset	35 style="background-color: purple; width: 20px; height: 20px;"
de0d0685a17b client: improve diagram-legends style Fadi Abbud <fadi.abbud@intevation.de> parents: 3285 diff changeset	36 ></span>
4593 3632cfc44b69 client: mark diagram strings for translations(waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4473 diff changeset	37 <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	38 >Q75%</span
3632cfc44b69 client: mark diagram strings for translations(waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4473 diff changeset	39 >
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	40 </div>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	41 <div class="legend">
3323 de0d0685a17b client: improve diagram-legends style Fadi Abbud <fadi.abbud@intevation.de> parents: 3285 diff changeset	42 <span
de0d0685a17b client: improve diagram-legends style Fadi Abbud <fadi.abbud@intevation.de> parents: 3285 diff changeset	43 style="background-color: lightsteelblue; width: 20px; height: 20px;"
de0d0685a17b client: improve diagram-legends style Fadi Abbud <fadi.abbud@intevation.de> parents: 3285 diff changeset	44 ></span>
4593 3632cfc44b69 client: mark diagram strings for translations(waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4473 diff changeset	45 <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	46 >Long-term Amplitude</span
3632cfc44b69 client: mark diagram strings for translations(waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4473 diff changeset	47 >
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	48 </div>
3197 9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	49 <select
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	50 @change="applyChange"
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	51 v-model="form.template"
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	52 class="form-control d-block custom-select-sm w-100"
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	53 >
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	54 <option
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	55 v-for="template in templates"
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	56 :value="template"
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	57 :key="template.name"
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	58 >
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	59 {{ template.name }}
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	60 </option>
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	61 </select>
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	62 <div>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	63 <button
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	64 @click="downloadPDF"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	65 type="button"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	66 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	67 :disabled="!longtermWaterlevels.length"
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	68 >
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	69 <translate>Export to PDF</translate>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	70 </button>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	71 </div>
3403 d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	72 <a
3404 0c9467003d14 client: waterlevel diagrams: disabled export buttons when no data is available Markus Kottlaender <markus@intevation.de> parents: 3403 diff changeset	73 :class="[
0c9467003d14 client: waterlevel diagrams: disabled export buttons when no data is available Markus Kottlaender <markus@intevation.de> parents: 3403 diff changeset	74 '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	75 { disabled: !longtermWaterlevels.length }
0c9467003d14 client: waterlevel diagrams: disabled export buttons when no data is available Markus Kottlaender <markus@intevation.de> parents: 3403 diff changeset	76 ]"
3403 d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	77 :href="csvLink"
4802 2ce5c727b465 client: hydrologicalcondition: implement image-export and improve file naming Fadi Abbud <fadi.abbud@intevation.de> parents: 4721 diff changeset	78 :download="`${fileName}.csv`"
3403 d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	79 >
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	80 <translate>Export as CSV</translate>
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	81 </a>
4802 2ce5c727b465 client: hydrologicalcondition: implement image-export and improve file naming Fadi Abbud <fadi.abbud@intevation.de> parents: 4721 diff changeset	82 <a
4808 db450fcc8ed7 client: add title for the exported image Fadi Abbud <fadi.abbud@intevation.de> parents: 4805 diff changeset	83 @click="downloadImage('hydrologicalpng', title)"
4805 7de099c4824c client: image-export: improve hyperlink ids for download Fadi Abbud <fadi.abbud@intevation.de> parents: 4802 diff changeset	84 id="hydrologicalpng"
4802 2ce5c727b465 client: hydrologicalcondition: implement image-export and improve file naming Fadi Abbud <fadi.abbud@intevation.de> parents: 4721 diff changeset	85 :class="[
2ce5c727b465 client: hydrologicalcondition: implement image-export and improve file naming Fadi Abbud <fadi.abbud@intevation.de> parents: 4721 diff changeset	86 'btn btn-sm btn-info text-white d-block w-100 mt-2',
2ce5c727b465 client: hydrologicalcondition: implement image-export and improve file naming Fadi Abbud <fadi.abbud@intevation.de> parents: 4721 diff changeset	87 { disabled: !longtermWaterlevels.length }
2ce5c727b465 client: hydrologicalcondition: implement image-export and improve file naming Fadi Abbud <fadi.abbud@intevation.de> parents: 4721 diff changeset	88 ]"
2ce5c727b465 client: hydrologicalcondition: implement image-export and improve file naming Fadi Abbud <fadi.abbud@intevation.de> parents: 4721 diff changeset	89 :download="`${fileName}.png`"
2ce5c727b465 client: hydrologicalcondition: implement image-export and improve file naming Fadi Abbud <fadi.abbud@intevation.de> parents: 4721 diff changeset	90 >
2ce5c727b465 client: hydrologicalcondition: implement image-export and improve file naming Fadi Abbud <fadi.abbud@intevation.de> parents: 4721 diff changeset	91 <translate>Export as Image</translate>
2ce5c727b465 client: hydrologicalcondition: implement image-export and improve file naming Fadi Abbud <fadi.abbud@intevation.de> parents: 4721 diff changeset	92 </a>
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	93 </DiagramLegend>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	94 <div
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	95 class="d-flex flex-fill justify-content-center align-items-center"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	96 :id="containerId"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	97 >
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	98 <div v-if="!longtermWaterlevels.length">
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	99 <translate>No data available.</translate>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	100 </div>
2839 162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2829 diff changeset	101 </div>
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	102 </div>
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	103 </div>
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	104 </template>
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	105
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	106 <script>
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	107 /* This is Free Software under GNU Affero General Public License v >= 3.0
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	108 * without warranty, see README.md and license for details.
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	109 *
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	110 * SPDX-License-Identifier: AGPL-3.0-or-later
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	111 * License-Filename: LICENSES/AGPL-3.0.txt
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	112 *
3112 e838609bc10d client: fix license header for waterlevel.vue and hydrologicalconditions.vue Fadi Abbud <fadi.abbud@intevation.de> parents: 3111 diff changeset	113 * Copyright (C) 2019 by via donau
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	114 * – Österreichische Wasserstraßen-Gesellschaft mbH
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	115 * Software engineering by Intevation GmbH
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	116 *
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	117 * Author(s):
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	118 * Markus Kottländer <markus.kottlaender@intevation.de>
3112 e838609bc10d client: fix license header for waterlevel.vue and hydrologicalconditions.vue Fadi Abbud <fadi.abbud@intevation.de> parents: 3111 diff changeset	119 * Fadi Abbud <fadi.abbud@intevation.de>
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	120 */
4721 b2119cf5c7fb mark date for translation Thomas Junk <thomas.junk@intevation.de> parents: 4720 diff changeset	121 import app from "@/main";
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	122 import { mapState, mapGetters } from "vuex";
2791 2b79c0871138 client: spuc8: draw diagrams Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	123 import * as d3 from "d3";
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";
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	125 import { startOfYear, endOfYear } from "date-fns";
3937 de4c557bbc47 hydrological_conditions: leverage mixin Thomas Junk <thomas.junk@intevation.de> parents: 3927 diff changeset	126 import { diagram, pdfgen, templateLoader } 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";
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	131
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	132 export default {
3937 de4c557bbc47 hydrological_conditions: leverage mixin Thomas Junk <thomas.junk@intevation.de> parents: 3927 diff changeset	133 mixins: [diagram, pdfgen, templateLoader],
3992 2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	134 components: {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	135 DiagramLegend: () => import("@/components/DiagramLegend")
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	136 },
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	137 data() {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	138 return {
4385 610773d34e4f hydrological_conditions: decouple diagram from dialogue Thomas Junk <thomas.junk@intevation.de> parents: 4228 diff changeset	139 selectedGaugeD: null,
610773d34e4f hydrological_conditions: decouple diagram from dialogue Thomas Junk <thomas.junk@intevation.de> parents: 4228 diff changeset	140 longtermIntervalD: null,
610773d34e4f hydrological_conditions: decouple diagram from dialogue Thomas Junk <thomas.junk@intevation.de> parents: 4228 diff changeset	141 yearCompareD: null,
4226 6f0cd9a551b3 client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4135 diff changeset	142 zoomStore: null,
3992 2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	143 containerId: "hydrologicalconditions-diagram-container",
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	144 resizeListenerFunction: null,
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	145 templateData: null,
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	146 form: {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	147 template: null,
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	148 form: null
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	149 },
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	150 templates: [],
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	151 defaultTemplate: defaultDiagramTemplate,
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	152 pdf: {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	153 doc: null,
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	154 width: 420,
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	155 height: 297
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	156 }
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	157 };
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	158 },
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	159 computed: {
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	160 ...mapState("application", ["paneSetup"]),
2829 4a1211727d5f client: spuc8: implemented year controls Markus Kottlaender <markus@intevation.de> parents: 2824 diff changeset	161 ...mapState("gauges", [
4a1211727d5f client: spuc8: implemented year controls Markus Kottlaender <markus@intevation.de> parents: 2824 diff changeset	162 "longtermWaterlevels",
4a1211727d5f client: spuc8: implemented year controls Markus Kottlaender <markus@intevation.de> parents: 2824 diff changeset	163 "yearWaterlevels",
3058 7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	164 "yearCompare",
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	165 "longtermInterval"
2829 4a1211727d5f client: spuc8: implemented year controls Markus Kottlaender <markus@intevation.de> parents: 2824 diff changeset	166 ]),
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	167 ...mapGetters("gauges", ["selectedGauge"]),
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	168 title() {
4385 610773d34e4f hydrological_conditions: decouple diagram from dialogue Thomas Junk <thomas.junk@intevation.de> parents: 4228 diff changeset	169 if (!this.selectedGaugeD \|\| !this.longtermIntervalD) return;
610773d34e4f hydrological_conditions: decouple diagram from dialogue Thomas Junk <thomas.junk@intevation.de> parents: 4228 diff changeset	170 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	171 "Hydrological Conditions"
4385 610773d34e4f hydrological_conditions: decouple diagram from dialogue Thomas Junk <thomas.junk@intevation.de> parents: 4228 diff changeset	172 )} (${this.longtermIntervalD.join(" - ")})`;
3403 d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	173 },
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	174 csvLink() {
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	175 return "data:text/csv;charset=utf-8," + encodeURIComponent(this.csvData);
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	176 },
4802 2ce5c727b465 client: hydrologicalcondition: implement image-export and improve file naming Fadi Abbud <fadi.abbud@intevation.de> parents: 4721 diff changeset	177 fileName() {
4385 610773d34e4f hydrological_conditions: decouple diagram from dialogue Thomas Junk <thomas.junk@intevation.de> parents: 4228 diff changeset	178 if (!this.selectedGaugeD \|\| !this.longtermIntervalD) return;
4802 2ce5c727b465 client: hydrologicalcondition: implement image-export and improve file naming Fadi Abbud <fadi.abbud@intevation.de> parents: 4721 diff changeset	179 return this.downloadFilename(
2ce5c727b465 client: hydrologicalcondition: implement image-export and improve file naming Fadi Abbud <fadi.abbud@intevation.de> parents: 4721 diff changeset	180 this.$gettext("HydrologicalCondition"),
2ce5c727b465 client: hydrologicalcondition: implement image-export and improve file naming Fadi Abbud <fadi.abbud@intevation.de> parents: 4721 diff changeset	181 this.selectedGaugeD.properties.objname
4677 fa55e48bbca1 client: improve filename generation for downloads Fadi Abbud <fadi.abbud@intevation.de> parents: 4665 diff changeset	182 );
3403 d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	183 },
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	184 csvData() {
4385 610773d34e4f hydrological_conditions: decouple diagram from dialogue Thomas Junk <thomas.junk@intevation.de> parents: 4228 diff changeset	185 if (!this.longtermIntervalD \|\| !this.yearCompareD) return;
3403 d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	186 // We cannot directly use the csv data provided by the backend because the
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	187 // diagram uses data from two endpoints, longterm- and yearWaterlevels.
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	188 // So we need to merge them here to have them in one csv export.
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	189 let merged = this.longtermWaterlevels
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	190 .filter(d => d) // copy array, don't mutate original
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	191 .map(d => {
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	192 let yearData = this.yearWaterlevels.find(y => {
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	193 return d.date.getTime() === y.date.getTime();
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	194 });
4385 610773d34e4f hydrological_conditions: decouple diagram from dialogue Thomas Junk <thomas.junk@intevation.de> parents: 4228 diff changeset	195 d[this.yearCompareD] = yearData ? yearData.mean : "";
3403 d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	196 return `${d.date.getMonth() + 1}-${d.date.getDate()};${d.min};${
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	197 d.max
4385 610773d34e4f hydrological_conditions: decouple diagram from dialogue Thomas Junk <thomas.junk@intevation.de> parents: 4228 diff changeset	198 };${d.mean};${d.median};${d.q25};${d.q75};${d[this.yearCompareD]}`;
3403 d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	199 })
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	200 .join("\n");
4385 610773d34e4f hydrological_conditions: decouple diagram from dialogue Thomas Junk <thomas.junk@intevation.de> parents: 4228 diff changeset	201 return `#Interval: ${this.longtermIntervalD.join(
3403 d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	202 " - "
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	203 )}\n#date;#min;#max;#mean;#median;#q25;#q75;#${
4385 610773d34e4f hydrological_conditions: decouple diagram from dialogue Thomas Junk <thomas.junk@intevation.de> parents: 4228 diff changeset	204 this.yearCompareD
3403 d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	205 }\n${merged}`;
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	206 }
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	207 },
3068 492c30ca3142 client: diagrams: added watchers to ensure diagram update when data changes Markus Kottlaender <markus@intevation.de> parents: 3067 diff changeset	208 watch: {
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	209 paneSetup() {
4385 610773d34e4f hydrological_conditions: decouple diagram from dialogue Thomas Junk <thomas.junk@intevation.de> parents: 4228 diff changeset	210 this.$nextTick(() => {
610773d34e4f hydrological_conditions: decouple diagram from dialogue Thomas Junk <thomas.junk@intevation.de> parents: 4228 diff changeset	211 this.initialDiagramValues();
610773d34e4f hydrological_conditions: decouple diagram from dialogue Thomas Junk <thomas.junk@intevation.de> parents: 4228 diff changeset	212 this.drawDiagram();
610773d34e4f hydrological_conditions: decouple diagram from dialogue Thomas Junk <thomas.junk@intevation.de> parents: 4228 diff changeset	213 });
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	214 },
3068 492c30ca3142 client: diagrams: added watchers to ensure diagram update when data changes Markus Kottlaender <markus@intevation.de> parents: 3067 diff changeset	215 longtermWaterlevels() {
4385 610773d34e4f hydrological_conditions: decouple diagram from dialogue Thomas Junk <thomas.junk@intevation.de> parents: 4228 diff changeset	216 this.initialDiagramValues();
3068 492c30ca3142 client: diagrams: added watchers to ensure diagram update when data changes Markus Kottlaender <markus@intevation.de> parents: 3067 diff changeset	217 this.drawDiagram();
492c30ca3142 client: diagrams: added watchers to ensure diagram update when data changes Markus Kottlaender <markus@intevation.de> parents: 3067 diff changeset	218 },
492c30ca3142 client: diagrams: added watchers to ensure diagram update when data changes Markus Kottlaender <markus@intevation.de> parents: 3067 diff changeset	219 yearWaterlevels() {
4385 610773d34e4f hydrological_conditions: decouple diagram from dialogue Thomas Junk <thomas.junk@intevation.de> parents: 4228 diff changeset	220 this.initialDiagramValues();
3068 492c30ca3142 client: diagrams: added watchers to ensure diagram update when data changes Markus Kottlaender <markus@intevation.de> parents: 3067 diff changeset	221 this.drawDiagram();
492c30ca3142 client: diagrams: added watchers to ensure diagram update when data changes Markus Kottlaender <markus@intevation.de> parents: 3067 diff changeset	222 }
492c30ca3142 client: diagrams: added watchers to ensure diagram update when data changes Markus Kottlaender <markus@intevation.de> parents: 3067 diff changeset	223 },
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	224 methods: {
4809 b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	225 addLegendToCanvas(ctx, { width, height }) {
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	226 let x = width / 12,
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	227 y = height - 25;
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	228 ctx.font = "12px sans-serif";
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	229 ctx.textAlign = "start";
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	230 ctx.beginPath();
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	231 ctx.fillStyle = "red";
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	232 ctx.strokeStyle = "red";
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	233 ctx.arc(x, y, 8, 0, 2 * Math.PI);
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	234 ctx.fill();
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	235 ctx.stroke();
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	236 ctx.fillStyle = "black";
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	237 ctx.fillText(this.yearCompare, x + 14, y + 5);
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	238 ctx.closePath();
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	239
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	240 ctx.beginPath();
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	241 ctx.fillStyle = "orange";
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	242 ctx.strokeStyle = "orange";
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	243 ctx.arc(x, (y += 20), 8, 0, 2 * Math.PI);
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	244 ctx.fill();
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	245 ctx.stroke();
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	246 ctx.fillStyle = "black";
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	247 ctx.fillText(this.$gettext("Q25%"), x + 14, y + 5);
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	248 ctx.closePath();
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	249
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	250 ctx.beginPath();
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	251 ctx.fillStyle = "black";
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	252 ctx.strokeStyle = "black";
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	253 ctx.arc(x, (y += 20), 8, 0, 2 * Math.PI);
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	254 ctx.fill();
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	255 ctx.stroke();
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	256 ctx.fillStyle = "black";
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	257 ctx.fillText(this.$gettext("Median"), x + 14, y + 5);
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	258 ctx.closePath();
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	259
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	260 ctx.beginPath();
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	261 ctx.fillStyle = "purple";
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	262 ctx.strokeStyle = "purple";
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	263 ctx.arc(x, (y += 20), 8, 0, 2 * Math.PI);
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	264 ctx.fill();
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	265 ctx.stroke();
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	266 ctx.fillStyle = "black";
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	267 ctx.fillText(this.$gettext("Q75%"), x + 14, y + 5);
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	268 ctx.closePath();
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	269
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	270 ctx.beginPath();
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	271 ctx.fillStyle = "lightsteelblue";
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	272 ctx.strokeStyle = "lightsteelblue";
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	273 ctx.arc(x, (y += 20), 8, 0, 2 * Math.PI);
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	274 ctx.fill();
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	275 ctx.stroke();
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	276 ctx.fillStyle = "black";
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	277 ctx.fillText(this.$gettext("Long-term Amplitude"), x + 14, y + 5);
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	278 ctx.closePath();
b6d8570b8480 client: image-export: add diagram legend Fadi Abbud <fadi.abbud@intevation.de> parents: 4808 diff changeset	279 },
4385 610773d34e4f hydrological_conditions: decouple diagram from dialogue Thomas Junk <thomas.junk@intevation.de> parents: 4228 diff changeset	280 initialDiagramValues() {
610773d34e4f hydrological_conditions: decouple diagram from dialogue Thomas Junk <thomas.junk@intevation.de> parents: 4228 diff changeset	281 this.selectedGaugeD = this.selectedGauge;
610773d34e4f hydrological_conditions: decouple diagram from dialogue Thomas Junk <thomas.junk@intevation.de> parents: 4228 diff changeset	282 this.longtermIntervalD = this.longtermInterval;
610773d34e4f hydrological_conditions: decouple diagram from dialogue Thomas Junk <thomas.junk@intevation.de> parents: 4228 diff changeset	283 this.yearCompareD = this.yearCompare;
610773d34e4f hydrological_conditions: decouple diagram from dialogue Thomas Junk <thomas.junk@intevation.de> parents: 4228 diff changeset	284 },
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	285 close() {
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	286 this.$store.commit(
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	287 "application/paneSetup",
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	288 this.paneSetup === "GAUGE_WATERLEVEL_HYDROLOGICALCONDITIONS"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	289 ? "GAUGE_WATERLEVEL"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	290 : "DEFAULT"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	291 );
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	292 },
3992 2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	293 downloadPDF() {
4456 acb21e7362ce client: pdf-gen: fix diagram title for pdf (waterlevels, hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4385 diff changeset	294 let diagramTitle = `${this.selectedGaugeD.properties.objname} (${
acb21e7362ce client: pdf-gen: fix diagram title for pdf (waterlevels, hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4385 diff changeset	295 this.isrsInfo(this.selectedGaugeD).orc
4697 ce55f15e25e0 client: translations: mark strings for translation Fadi Abbud <fadi.abbud@intevation.de> parents: 4677 diff changeset	296 }): ${this.$gettext(
ce55f15e25e0 client: translations: mark strings for translation Fadi Abbud <fadi.abbud@intevation.de> parents: 4677 diff changeset	297 "Hydrological Conditions"
ce55f15e25e0 client: translations: mark strings for translation Fadi Abbud <fadi.abbud@intevation.de> parents: 4677 diff changeset	298 )} ${this.longtermIntervalD.join(" - ")}`;
3992 2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	299 this.generatePDF({
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	300 templateData: this.templateData,
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	301 diagramTitle: diagramTitle
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	302 });
4802 2ce5c727b465 client: hydrologicalcondition: implement image-export and improve file naming Fadi Abbud <fadi.abbud@intevation.de> parents: 4721 diff changeset	303 this.pdf.doc.save(this.fileName + ".pdf");
3992 2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	304 },
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	305 applyChange() {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	306 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	307 this.templateData = this.defaultTemplate;
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	308 return;
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	309 }
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	310 if (this.form.template) {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	311 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	312 .then(response => {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	313 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	314 values => {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	315 values.forEach(v => {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	316 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	317 });
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	318 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	319 }
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	320 );
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	321 })
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	322 .catch(e => {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	323 const { status, data } = e.response;
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	324 displayError({
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	325 title: this.$gettext("Backend Error"),
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	326 message: `${status}: ${data.message \|\| data}`
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	327 });
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	328 });
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	329 }
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	330 },
3129 136b86794453 client: improve pdf-gen code for diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3112 diff changeset	331 // Diagram legend
3197 9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	332 addDiagramLegend(position, offset, color) {
4385 610773d34e4f hydrological_conditions: decouple diagram from dialogue Thomas Junk <thomas.junk@intevation.de> parents: 4228 diff changeset	333 if (!this.yearCompareD) return;
4109 5317ae66f654 clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 3992 diff changeset	334 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: 3992 diff changeset	335 y = offset.y,
5317ae66f654 clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 3992 diff changeset	336 padding = 3;
5317ae66f654 clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 3992 diff changeset	337 this.pdf.doc.setFontStyle("normal");
5317ae66f654 clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 3992 diff changeset	338 this.pdf.doc.setFontSize(10);
5317ae66f654 clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 3992 diff changeset	339 let width = this.pdf.doc.getTextWidth("Long-term Amplitude") + padding;
3197 9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	340 // if position is on the right, x needs to be calculate with pdf width and
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	341 // the size of the element
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	342 if (["topright", "bottomright"].indexOf(position) !== -1) {
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	343 x = this.pdf.width - offset.x - width;
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	344 }
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	345 if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
4109 5317ae66f654 clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 3992 diff changeset	346 y = this.pdf.height - offset.y - this.getTextHeight(5) - 2;
3197 9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	347 }
4109 5317ae66f654 clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 3992 diff changeset	348 if (y < this.getTextHeight(1)) {
5317ae66f654 clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 3992 diff changeset	349 y = y + this.getTextHeight(1) / 2;
5317ae66f654 clinet:pdf-gen: improve positioning of diagramlegend (waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 3992 diff changeset	350 }
3197 9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	351 this.pdf.doc.setTextColor(color);
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	352 this.pdf.doc.setDrawColor("white");
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	353 this.pdf.doc.setFillColor("red");
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	354 this.pdf.doc.circle(x, y, 2, "FD");
4385 610773d34e4f hydrological_conditions: decouple diagram from dialogue Thomas Junk <thomas.junk@intevation.de> parents: 4228 diff changeset	355 this.pdf.doc.text(x + padding, y + 1, "" + this.yearCompareD);
3197 9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	356 this.pdf.doc.setFillColor("orange");
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	357 this.pdf.doc.circle(x, y + 5, 2, "FD");
4593 3632cfc44b69 client: mark diagram strings for translations(waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4473 diff changeset	358 this.pdf.doc.text(x + padding, y + 6, this.$gettext("Q25%"));
3197 9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	359 this.pdf.doc.setFillColor("black");
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	360 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	361 this.pdf.doc.text(x + 3, y + 11, this.$gettext("Median"));
3197 9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	362 this.pdf.doc.setFillColor("purple");
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	363 this.pdf.doc.circle(x, y + 15, 2, "FD");
4593 3632cfc44b69 client: mark diagram strings for translations(waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4473 diff changeset	364 this.pdf.doc.text(x + padding, y + 16, this.$gettext("Q75%"));
3197 9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	365 this.pdf.doc.setFillColor("lightsteelblue");
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	366 this.pdf.doc.circle(x, y + 20, 2, "FD");
4593 3632cfc44b69 client: mark diagram strings for translations(waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4473 diff changeset	367 this.pdf.doc.text(
3632cfc44b69 client: mark diagram strings for translations(waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4473 diff changeset	368 x + padding,
3632cfc44b69 client: mark diagram strings for translations(waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4473 diff changeset	369 y + 21,
3632cfc44b69 client: mark diagram strings for translations(waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4473 diff changeset	370 this.$gettext("Long-term Amplitude")
3632cfc44b69 client: mark diagram strings for translations(waterlevels,hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4473 diff changeset	371 );
3129 136b86794453 client: improve pdf-gen code for diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3112 diff changeset	372 },
4135 a6eda41e7724 hydrological_conditions: use offsets relative to svgwidth and svgheight Thomas Junk <thomas.junk@intevation.de> parents: 4109 diff changeset	373 getPrintLayout(svgHeight, svgWidth) {
3941 7b3935a8d9ee refactor addDiagram to mixin and remove code duplication Thomas Junk <thomas.junk@intevation.de> parents: 3937 diff changeset	374 return {
4135 a6eda41e7724 hydrological_conditions: use offsets relative to svgwidth and svgheight Thomas Junk <thomas.junk@intevation.de> parents: 4109 diff changeset	375 main: {
a6eda41e7724 hydrological_conditions: use offsets relative to svgwidth and svgheight Thomas Junk <thomas.junk@intevation.de> parents: 4109 diff changeset	376 top: Math.floor(0.05 * svgHeight),
a6eda41e7724 hydrological_conditions: use offsets relative to svgwidth and svgheight Thomas Junk <thomas.junk@intevation.de> parents: 4109 diff changeset	377 right: Math.floor(0.05 * svgWidth),
a6eda41e7724 hydrological_conditions: use offsets relative to svgwidth and svgheight Thomas Junk <thomas.junk@intevation.de> parents: 4109 diff changeset	378 bottom: Math.floor(0.32 * svgHeight),
a6eda41e7724 hydrological_conditions: use offsets relative to svgwidth and svgheight Thomas Junk <thomas.junk@intevation.de> parents: 4109 diff changeset	379 left: Math.floor(0.07 * svgWidth)
a6eda41e7724 hydrological_conditions: use offsets relative to svgwidth and svgheight Thomas Junk <thomas.junk@intevation.de> parents: 4109 diff changeset	380 },
3941 7b3935a8d9ee refactor addDiagram to mixin and remove code duplication Thomas Junk <thomas.junk@intevation.de> parents: 3937 diff changeset	381 nav: {
4135 a6eda41e7724 hydrological_conditions: use offsets relative to svgwidth and svgheight Thomas Junk <thomas.junk@intevation.de> parents: 4109 diff changeset	382 top: Math.floor(0.78 * svgHeight),
a6eda41e7724 hydrological_conditions: use offsets relative to svgwidth and svgheight Thomas Junk <thomas.junk@intevation.de> parents: 4109 diff changeset	383 right: Math.floor(0.013 * svgWidth),
a6eda41e7724 hydrological_conditions: use offsets relative to svgwidth and svgheight Thomas Junk <thomas.junk@intevation.de> parents: 4109 diff changeset	384 bottom: Math.floor(0.095 * svgHeight),
a6eda41e7724 hydrological_conditions: use offsets relative to svgwidth and svgheight Thomas Junk <thomas.junk@intevation.de> parents: 4109 diff changeset	385 left: Math.floor(0.07 * svgWidth)
3941 7b3935a8d9ee refactor addDiagram to mixin and remove code duplication Thomas Junk <thomas.junk@intevation.de> parents: 3937 diff changeset	386 }
7b3935a8d9ee refactor addDiagram to mixin and remove code duplication Thomas Junk <thomas.junk@intevation.de> parents: 3937 diff changeset	387 };
7b3935a8d9ee refactor addDiagram to mixin and remove code duplication Thomas Junk <thomas.junk@intevation.de> parents: 3937 diff changeset	388 },
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	389 drawDiagram() {
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	390 // remove old diagram
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	391 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	392 d3.timeFormatDefaultLocale(localeDateString);
3915 f7f09f32d6e0 hydrological conditions: omit rendering, when container isn't visible Thomas Junk <thomas.junk@intevation.de> parents: 3910 diff changeset	393 const el = document.querySelector("#" + this.containerId);
4385 610773d34e4f hydrological_conditions: decouple diagram from dialogue Thomas Junk <thomas.junk@intevation.de> parents: 4228 diff changeset	394 if (!this.selectedGaugeD \|\| !this.longtermWaterlevels.length \|\| !el)
3915 f7f09f32d6e0 hydrological conditions: omit rendering, when container isn't visible Thomas Junk <thomas.junk@intevation.de> parents: 3910 diff changeset	395 return;
f7f09f32d6e0 hydrological conditions: omit rendering, when container isn't visible Thomas Junk <thomas.junk@intevation.de> parents: 3910 diff changeset	396 const svgWidth = el.clientWidth;
f7f09f32d6e0 hydrological conditions: omit rendering, when container isn't visible Thomas Junk <thomas.junk@intevation.de> parents: 3910 diff changeset	397 const svgHeight = el.clientHeight;
4135 a6eda41e7724 hydrological_conditions: use offsets relative to svgwidth and svgheight Thomas Junk <thomas.junk@intevation.de> parents: 4109 diff changeset	398 const layout = this.getPrintLayout(svgHeight, svgWidth);
3872 a7a75e003b78 hydrological conditions: factor out setting of dimensions Thomas Junk <thomas.junk@intevation.de> parents: 3869 diff changeset	399 this.renderTo({
a7a75e003b78 hydrological conditions: factor out setting of dimensions Thomas Junk <thomas.junk@intevation.de> parents: 3869 diff changeset	400 element: `#${this.containerId}`,
a7a75e003b78 hydrological conditions: factor out setting of dimensions Thomas Junk <thomas.junk@intevation.de> parents: 3869 diff changeset	401 dimensions: this.getDimensions({
3915 f7f09f32d6e0 hydrological conditions: omit rendering, when container isn't visible Thomas Junk <thomas.junk@intevation.de> parents: 3910 diff changeset	402 svgWidth: svgWidth,
3937 de4c557bbc47 hydrological_conditions: leverage mixin Thomas Junk <thomas.junk@intevation.de> parents: 3927 diff changeset	403 svgHeight: svgHeight,
3941 7b3935a8d9ee refactor addDiagram to mixin and remove code duplication Thomas Junk <thomas.junk@intevation.de> parents: 3937 diff changeset	404 ...layout
3872 a7a75e003b78 hydrological conditions: factor out setting of dimensions Thomas Junk <thomas.junk@intevation.de> parents: 3869 diff changeset	405 })
a7a75e003b78 hydrological conditions: factor out setting of dimensions Thomas Junk <thomas.junk@intevation.de> parents: 3869 diff changeset	406 });
3857 6ce80daf8413 Hydrological conditions: render svg in offscreen element Thomas Junk <thomas.junk@intevation.de> parents: 3849 diff changeset	407 },
4226 6f0cd9a551b3 client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4135 diff changeset	408 renderTo({ element, dimensions, zoomLevel }) {
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	409 // PREPARE HELPERS
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	410
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	411 // HDC/LDC/MW for the selected gauge
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	412 const refWaterLevels = JSON.parse(
4385 610773d34e4f hydrological_conditions: decouple diagram from dialogue Thomas Junk <thomas.junk@intevation.de> parents: 4228 diff changeset	413 this.selectedGaugeD.properties.reference_water_levels
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	414 );
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	415
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	416 // dimensions (widths, heights, margins)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	417
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	418 // get min/max values for date and waterlevel axis
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	419 const extent = this.getExtent(refWaterLevels);
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	420
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	421 // scaling helpers
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	422 const scale = this.getScale({ dimensions, extent });
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	423
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	424 // creating the axes based on the scales
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	425 const axes = this.getAxes({ scale, dimensions });
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	426
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	427 // DRAW DIAGRAM/NAVIGATION AREAS
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	428
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	429 // create svg
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	430 const svg = d3
3857 6ce80daf8413 Hydrological conditions: render svg in offscreen element Thomas Junk <thomas.junk@intevation.de> parents: 3849 diff changeset	431 .select(element)
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	432 .append("svg")
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	433 .attr("width", "100%")
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	434 .attr("height", "100%");
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	435
4802 2ce5c727b465 client: hydrologicalcondition: implement image-export and improve file naming Fadi Abbud <fadi.abbud@intevation.de> parents: 4721 diff changeset	436 svg
2ce5c727b465 client: hydrologicalcondition: implement image-export and improve file naming Fadi Abbud <fadi.abbud@intevation.de> parents: 4721 diff changeset	437 .append("g")
2ce5c727b465 client: hydrologicalcondition: implement image-export and improve file naming Fadi Abbud <fadi.abbud@intevation.de> parents: 4721 diff changeset	438 .append("rect")
2ce5c727b465 client: hydrologicalcondition: implement image-export and improve file naming Fadi Abbud <fadi.abbud@intevation.de> parents: 4721 diff changeset	439 .attr("width", "100%")
2ce5c727b465 client: hydrologicalcondition: implement image-export and improve file naming Fadi Abbud <fadi.abbud@intevation.de> parents: 4721 diff changeset	440 .attr("height", "100%")
2ce5c727b465 client: hydrologicalcondition: implement image-export and improve file naming Fadi Abbud <fadi.abbud@intevation.de> parents: 4721 diff changeset	441 .attr("fill", "#ffffff");
2ce5c727b465 client: hydrologicalcondition: implement image-export and improve file naming Fadi Abbud <fadi.abbud@intevation.de> parents: 4721 diff changeset	442
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	443 // create container for main diagram
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	444 const diagram = svg
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	445 .append("g")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	446 .attr("class", "main")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	447 .attr(
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	448 "transform",
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	449 `translate(${dimensions.mainMargin.left}, ${
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	450 dimensions.mainMargin.top
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	451 })`
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	452 );
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	453
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	454 // create container for navigation diagram
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	455 const navigation = svg
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	456 .append("g")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	457 .attr("class", "nav")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	458 .attr(
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	459 "transform",
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	460 `translate(${dimensions.navMargin.left}, ${dimensions.navMargin.top})`
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	461 );
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	462
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	463 // define visible area, everything outside this area will be hidden
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	464 svg
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	465 .append("defs")
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	466 .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	467 .attr("id", "hydrocond-clip")
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	468 .append("rect")
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	469 .attr("width", dimensions.width)
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	470 .attr("height", dimensions.mainHeight);
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	471
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	472 // DRAW DIAGRAM PARTS
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	473
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	474 // Each drawSomething function (with the exception of drawRefLines)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	475 // returns a fuction to update the respective chart/area/etc. These
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	476 // updater functions are used by the zoom feature to rescale all elements.
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	477 const updaters = [];
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	478
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	479 // draw
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	480 updaters.push(this.drawAxes({ diagram, dimensions, axes, navigation }));
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	481 updaters.push(
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	482 this.drawWaterlevelMinMaxAreaChart({ scale, diagram, navigation })
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	483 );
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	484 updaters.push(
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	485 this.drawWaterlevelLineChart({ type: "median", scale, diagram })
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	486 );
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	487 updaters.push(
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	488 this.drawWaterlevelLineChart({ type: "q25", scale, diagram })
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	489 );
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	490 updaters.push(
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	491 this.drawWaterlevelLineChart({ type: "q75", scale, diagram })
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	492 );
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	493 updaters.push(
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	494 this.drawWaterlevelLineChart({
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	495 type: "mean",
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	496 data: this.yearWaterlevels,
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	497 scale,
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	498 diagram
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	499 })
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	500 );
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	501 updaters.push(this.drawNowLines({ extent, diagram, scale, navigation }));
3726 be939dcdfdfd client: waterlevel diagrams: make now line label not update its position when zooming Markus Kottlaender <markus@intevation.de> parents: 3724 diff changeset	502
3722 f180de37903c client: hydrological conditions diagram: handle gauges without reference waterlevels Markus Kottlaender <markus@intevation.de> parents: 3691 diff changeset	503 if (refWaterLevels) {
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	504 this.drawRefLines({ refWaterLevels, scale, diagram, extent }); // static, doesn't need an updater
3722 f180de37903c client: hydrological conditions diagram: handle gauges without reference waterlevels Markus Kottlaender <markus@intevation.de> parents: 3691 diff changeset	505 }
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	506
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	507 // INTERACTIONS
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	508
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	509 // create rectanlge on the main chart area to capture mouse events
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	510 const eventRect = svg
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	511 .append("rect")
3212 f87fd173f750 client: waterlevel diagrams: fixed tooltip bug Markus Kottlaender <markus@intevation.de> parents: 3211 diff changeset	512 .attr("id", "zoom-hydrocond")
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	513 .attr("class", "zoom")
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	514 .attr("width", dimensions.width)
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	515 .attr("height", dimensions.mainHeight)
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	516 .attr(
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	517 "transform",
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	518 `translate(${dimensions.mainMargin.left}, ${
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	519 dimensions.mainMargin.top
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	520 })`
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	521 );
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	522
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	523 this.createZoom({
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	524 updaters,
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	525 eventRect,
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	526 dimensions,
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	527 scale,
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	528 svg,
4226 6f0cd9a551b3 client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4135 diff changeset	529 navigation,
6f0cd9a551b3 client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4135 diff changeset	530 zoomLevel
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	531 });
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	532 this.createTooltips({ eventRect, diagram, scale, dimensions });
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	533 this.setInlineStyles(svg);
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	534 },
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	535 setInlineStyles(svg) {
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	536 svg.selectAll(".hide").attr("fill-opacity", 0);
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	537 svg
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	538 .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	539 .attr("clip-path", "url(#hydrocond-clip)")
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	540 .attr("stroke-width", 2)
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	541 .attr("fill", "none");
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	542 svg.selectAll(".line.mean").attr("stroke", "red");
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	543 svg.selectAll(".line.median").attr("stroke", "black");
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	544 svg.selectAll(".line.q25").attr("stroke", "orange");
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	545 svg.selectAll(".line.q75").attr("stroke", "purple");
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	546 svg
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	547 .selectAll(".area")
3147 25c0cbfcc515 client: gauge diagrams: fixed bug related to same clippath id in multiple diagrams Markus Kottlaender <markus@intevation.de> parents: 3146 diff changeset	548 .attr("clip-path", "url(#hydrocond-clip)")
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	549 .attr("stroke", "none")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	550 .attr("fill", "lightsteelblue");
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	551 svg
3209 5b8916b78cea client: waterlevel diagrams: check which reference waterlevels are available and added RN as possible option Markus Kottlaender <markus@intevation.de> parents: 3197 diff changeset	552 .selectAll(".hdc-line, .ldc-line, .mw-line, .rn-line")
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	553 .attr("stroke-width", 1)
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	554 .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	555 .attr("clip-path", "url(#hydrocond-clip)");
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	556 svg.selectAll(".hdc-line").attr("stroke", "red");
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	557 svg.selectAll(".ldc-line").attr("stroke", "green");
4135 a6eda41e7724 hydrological_conditions: use offsets relative to svgwidth and svgheight Thomas Junk <thomas.junk@intevation.de> parents: 4109 diff changeset	558 svg.selectAll(".mw-line").attr("stroke", "gray");
a6eda41e7724 hydrological_conditions: use offsets relative to svgwidth and svgheight Thomas Junk <thomas.junk@intevation.de> parents: 4109 diff changeset	559 svg.selectAll(".rn-line").attr("stroke", "gray");
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	560 svg
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	561 .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	562 .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	563 .attr("fill", "black");
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	564 svg
3211 f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	565 .selectAll(".ref-waterlevel-label-background")
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	566 .attr("fill", "rgba(255, 255, 255, 0.6)");
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	567 svg
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	568 .selectAll(".now-line")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	569 .attr("stroke", "#999")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	570 .attr("stroke-width", 1)
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	571 .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	572 .attr("clip-path", "url(#hydrocond-clip)");
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	573 svg
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	574 .selectAll(".now-line-label")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	575 .attr("fill", "#999")
3045 44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	576 .style("font-size", "11px");
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	577 svg
3902 0149b68a4f7e client: hydrological conditions diagram: added right y axis Markus Kottlaender <markus@intevation.de> parents: 3894 diff changeset	578 .selectAll(".axis--x .tick line, .axis--y .tick line")
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	579 .attr("stroke-dasharray", 5)
3842 22f7677337a5 client:pdf-gen: fix drawing of axises on pdf (hydrologicalconditions diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3820 diff changeset	580 .attr("stroke", "#ccc");
3902 0149b68a4f7e client: hydrological conditions diagram: added right y axis Markus Kottlaender <markus@intevation.de> parents: 3894 diff changeset	581 svg.selectAll(".axis--y-right .tick line").attr("stroke", "transparent");
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	582 svg.selectAll(".tick text").attr("fill", "black");
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	583 svg.selectAll(".domain").attr("stroke", "black");
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	584
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	585 svg
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	586 .selectAll(".zoom")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	587 .attr("cursor", "move")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	588 .attr("fill", "none")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	589 .attr("pointer-events", "all");
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	590 svg
3111 f269bd001e78 client: remove css classes and adjust styles for hydrological-diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3068 diff changeset	591 .selectAll(".brush .selection")
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	592 .attr("stroke", "none")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	593 .attr("fill-opacity", 0.2);
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	594 svg
3111 f269bd001e78 client: remove css classes and adjust styles for hydrological-diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3068 diff changeset	595 .selectAll(".brush .handle")
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	596 .attr("stroke", "rgba(23, 162, 184, 0.5)")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	597 .attr("fill", "rgba(23, 162, 184, 0.5)");
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	598 svg.selectAll(".chart-dots").attr("clip-path", "url(#hydrocond-clip)");
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	599 svg
3111 f269bd001e78 client: remove css classes and adjust styles for hydrological-diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3068 diff changeset	600 .selectAll(".chart-dots .chart-dot")
f269bd001e78 client: remove css classes and adjust styles for hydrological-diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3068 diff changeset	601 .attr("fill", "black")
f269bd001e78 client: remove css classes and adjust styles for hydrological-diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3068 diff changeset	602 .attr("stroke", "black")
3045 44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	603 .attr("stroke-opacity", 0)
3111 f269bd001e78 client: remove css classes and adjust styles for hydrological-diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3068 diff changeset	604 .style("pointer-events", "none")
3045 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.1s");
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 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")
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	610 .attr("fill-opacity", 0)
3046 c764c73f44b4 client: fix chart-tooltip style for diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3045 diff changeset	611 .transition()
c764c73f44b4 client: fix chart-tooltip style for diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3045 diff changeset	612 .attr("fill-opacity", "0.3s");
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	613 svg
3045 44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	614 .selectAll(".chart-tooltip rect")
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	615 .attr("fill", "#fff")
3884 db24b4347604 client: pdf-gen: fix bug of not rendering some elements on pdf(hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 3872 diff changeset	616 .attr("stroke", "#ccc")
db24b4347604 client: pdf-gen: fix bug of not rendering some elements on pdf(hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 3872 diff changeset	617 // set width,height attributes for rect element in case d3 does not
db24b4347604 client: pdf-gen: fix bug of not rendering some elements on pdf(hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 3872 diff changeset	618 // generate them to let svg2pdf continue rendernig of the following elements
db24b4347604 client: pdf-gen: fix bug of not rendering some elements on pdf(hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 3872 diff changeset	619 .attr("width", "0px")
db24b4347604 client: pdf-gen: fix bug of not rendering some elements on pdf(hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 3872 diff changeset	620 .attr("height", "0px");
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	621 svg
3045 44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	622 .selectAll(".chart-tooltip text")
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	623 .attr("fill", "666")
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	624 .style("font-size", "0.8em");
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	625 },
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	626 getExtent(refWaterLevels) {
3722 f180de37903c client: hydrological conditions diagram: handle gauges without reference waterlevels Markus Kottlaender <markus@intevation.de> parents: 3691 diff changeset	627 const waterlevelValues = [];
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	628 this.longtermWaterlevels.forEach(wl => {
3722 f180de37903c client: hydrological conditions diagram: handle gauges without reference waterlevels Markus Kottlaender <markus@intevation.de> parents: 3691 diff changeset	629 waterlevelValues.push(wl.min, wl.max);
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	630 });
3722 f180de37903c client: hydrological conditions diagram: handle gauges without reference waterlevels Markus Kottlaender <markus@intevation.de> parents: 3691 diff changeset	631 if (refWaterLevels) {
f180de37903c client: hydrological conditions diagram: handle gauges without reference waterlevels Markus Kottlaender <markus@intevation.de> parents: 3691 diff changeset	632 waterlevelValues.push(
f180de37903c client: hydrological conditions diagram: handle gauges without reference waterlevels Markus Kottlaender <markus@intevation.de> parents: 3691 diff changeset	633 refWaterLevels.HDC + (refWaterLevels.HDC - refWaterLevels.LDC) / 8,
f180de37903c client: hydrological conditions diagram: handle gauges without reference waterlevels Markus Kottlaender <markus@intevation.de> parents: 3691 diff changeset	634 Math.max(
f180de37903c client: hydrological conditions diagram: handle gauges without reference waterlevels Markus Kottlaender <markus@intevation.de> parents: 3691 diff changeset	635 refWaterLevels.LDC - (refWaterLevels.HDC - refWaterLevels.LDC) / 4,
f180de37903c client: hydrological conditions diagram: handle gauges without reference waterlevels Markus Kottlaender <markus@intevation.de> parents: 3691 diff changeset	636 0
f180de37903c client: hydrological conditions diagram: handle gauges without reference waterlevels Markus Kottlaender <markus@intevation.de> parents: 3691 diff changeset	637 )
f180de37903c client: hydrological conditions diagram: handle gauges without reference waterlevels Markus Kottlaender <markus@intevation.de> parents: 3691 diff changeset	638 );
f180de37903c client: hydrological conditions diagram: handle gauges without reference waterlevels Markus Kottlaender <markus@intevation.de> parents: 3691 diff changeset	639 } else {
f180de37903c client: hydrological conditions diagram: handle gauges without reference waterlevels Markus Kottlaender <markus@intevation.de> parents: 3691 diff changeset	640 let delta = d3.max(waterlevelValues) - d3.min(waterlevelValues);
f180de37903c client: hydrological conditions diagram: handle gauges without reference waterlevels Markus Kottlaender <markus@intevation.de> parents: 3691 diff changeset	641 waterlevelValues.push(
f180de37903c client: hydrological conditions diagram: handle gauges without reference waterlevels Markus Kottlaender <markus@intevation.de> parents: 3691 diff changeset	642 d3.max(waterlevelValues) + delta * 0.1,
f180de37903c client: hydrological conditions diagram: handle gauges without reference waterlevels Markus Kottlaender <markus@intevation.de> parents: 3691 diff changeset	643 d3.min(waterlevelValues) - delta * 0.1
f180de37903c client: hydrological conditions diagram: handle gauges without reference waterlevels Markus Kottlaender <markus@intevation.de> parents: 3691 diff changeset	644 );
f180de37903c client: hydrological conditions diagram: handle gauges without reference waterlevels Markus Kottlaender <markus@intevation.de> parents: 3691 diff changeset	645 }
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	646 return {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	647 // set min/max values for the date axis
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	648 date: [startOfYear(new Date()), endOfYear(new Date())],
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	649 // set min/max values for the waterlevel axis
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	650 // including HDC (+ 1/8 HDC-LDC) and LDC (- 1/4 HDC-LDC)
3722 f180de37903c client: hydrological conditions diagram: handle gauges without reference waterlevels Markus Kottlaender <markus@intevation.de> parents: 3691 diff changeset	651 waterlevel: d3.extent(waterlevelValues)
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	652 };
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	653 },
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	654 getScale({ dimensions, extent }) {
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	655 // scaling helpers to convert real world values into pixels
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	656 const x = d3.scaleTime().range([0, dimensions.width]);
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	657 const y = d3.scaleLinear().range([dimensions.mainHeight, 0]);
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	658 const x2 = d3.scaleTime().range([0, dimensions.width]);
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	659 const y2 = d3.scaleLinear().range([dimensions.navHeight, 0]);
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	660
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	661 // setting the min and max values for the diagram axes
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	662 x.domain(d3.extent(extent.date));
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	663 y.domain(extent.waterlevel);
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	664 x2.domain(x.domain());
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	665 y2.domain(y.domain());
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	666
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	667 return { x, y, x2, y2 };
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	668 },
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	669 getAxes({ scale, dimensions }) {
4711 13575ffb8c1f hydrological_conditions: unify localization for brush and diagram Thomas Junk <thomas.junk@intevation.de> parents: 4710 diff changeset	670 const dFormat = date => {
13575ffb8c1f hydrological_conditions: unify localization for brush and diagram Thomas Junk <thomas.junk@intevation.de> parents: 4710 diff changeset	671 // make the x-axis label formats dynamic, based on zoom
13575ffb8c1f hydrological_conditions: unify localization for brush and diagram Thomas Junk <thomas.junk@intevation.de> parents: 4710 diff changeset	672 // but never display year numbers since they don't make any sense in
13575ffb8c1f hydrological_conditions: unify localization for brush and diagram Thomas Junk <thomas.junk@intevation.de> parents: 4710 diff changeset	673 // this diagram
13575ffb8c1f hydrological_conditions: unify localization for brush and diagram Thomas Junk <thomas.junk@intevation.de> parents: 4710 diff changeset	674 return (d3.timeSecond(date) < date
13575ffb8c1f hydrological_conditions: unify localization for brush and diagram Thomas Junk <thomas.junk@intevation.de> parents: 4710 diff changeset	675 ? d3.timeFormat(".%L")
13575ffb8c1f hydrological_conditions: unify localization for brush and diagram Thomas Junk <thomas.junk@intevation.de> parents: 4710 diff changeset	676 : d3.timeMinute(date) < date
13575ffb8c1f hydrological_conditions: unify localization for brush and diagram Thomas Junk <thomas.junk@intevation.de> parents: 4710 diff changeset	677 ? d3.timeFormat(":%S")
13575ffb8c1f hydrological_conditions: unify localization for brush and diagram Thomas Junk <thomas.junk@intevation.de> parents: 4710 diff changeset	678 : d3.timeHour(date) < date
13575ffb8c1f hydrological_conditions: unify localization for brush and diagram Thomas Junk <thomas.junk@intevation.de> parents: 4710 diff changeset	679 ? d3.timeFormat("%H:%M")
13575ffb8c1f hydrological_conditions: unify localization for brush and diagram Thomas Junk <thomas.junk@intevation.de> parents: 4710 diff changeset	680 : d3.timeDay(date) < date
4713 cd9216c073fd minor fixes date localization Thomas Junk <thomas.junk@intevation.de> parents: 4711 diff changeset	681 ? d3.timeFormat("%H:%M")
4711 13575ffb8c1f hydrological_conditions: unify localization for brush and diagram Thomas Junk <thomas.junk@intevation.de> parents: 4710 diff changeset	682 : d3.timeMonth(date) < date
13575ffb8c1f hydrological_conditions: unify localization for brush and diagram Thomas Junk <thomas.junk@intevation.de> parents: 4710 diff changeset	683 ? d3.timeWeek(date) < date
4721 b2119cf5c7fb mark date for translation Thomas Junk <thomas.junk@intevation.de> parents: 4720 diff changeset	684 ? d3.timeFormat(app.$gettext("%a %d"))
b2119cf5c7fb mark date for translation Thomas Junk <thomas.junk@intevation.de> parents: 4720 diff changeset	685 : d3.timeFormat(app.$gettext("%b %d"))
4711 13575ffb8c1f hydrological_conditions: unify localization for brush and diagram Thomas Junk <thomas.junk@intevation.de> parents: 4710 diff changeset	686 : d3.timeFormat("%B"))(date);
13575ffb8c1f hydrological_conditions: unify localization for brush and diagram Thomas Junk <thomas.junk@intevation.de> parents: 4710 diff changeset	687 };
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	688 return {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	689 x: d3
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	690 .axisTop(scale.x)
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	691 .tickSizeInner(dimensions.mainHeight)
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	692 .tickSizeOuter(0)
4711 13575ffb8c1f hydrological_conditions: unify localization for brush and diagram Thomas Junk <thomas.junk@intevation.de> parents: 4710 diff changeset	693 .tickFormat(dFormat),
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	694 y: d3
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	695 .axisRight(scale.y)
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	696 .tickSizeInner(dimensions.width)
3576 1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized Markus Kottlaender <markus@intevation.de> parents: 3544 diff changeset	697 .tickSizeOuter(0)
1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized Markus Kottlaender <markus@intevation.de> parents: 3544 diff changeset	698 .tickFormat(d => this.$options.filters.waterlevel(d)),
3902 0149b68a4f7e client: hydrological conditions diagram: added right y axis Markus Kottlaender <markus@intevation.de> parents: 3894 diff changeset	699 yRight: d3
0149b68a4f7e client: hydrological conditions diagram: added right y axis Markus Kottlaender <markus@intevation.de> parents: 3894 diff changeset	700 .axisRight(scale.y)
0149b68a4f7e client: hydrological conditions diagram: added right y axis Markus Kottlaender <markus@intevation.de> parents: 3894 diff changeset	701 .tickSizeInner(3)
0149b68a4f7e client: hydrological conditions diagram: added right y axis Markus Kottlaender <markus@intevation.de> parents: 3894 diff changeset	702 .tickSizeOuter(0)
0149b68a4f7e client: hydrological conditions diagram: added right y axis Markus Kottlaender <markus@intevation.de> parents: 3894 diff changeset	703 .tickFormat(d => this.$options.filters.waterlevel(d)),
4711 13575ffb8c1f hydrological_conditions: unify localization for brush and diagram Thomas Junk <thomas.junk@intevation.de> parents: 4710 diff changeset	704 x2: d3.axisBottom(scale.x2).tickFormat(dFormat)
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	705 };
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	706 },
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	707 drawNowLines({ extent, diagram, scale, navigation }) {
3726 be939dcdfdfd client: waterlevel diagrams: make now line label not update its position when zooming Markus Kottlaender <markus@intevation.de> parents: 3724 diff changeset	708 const now = new Date();
be939dcdfdfd client: waterlevel diagrams: make now line label not update its position when zooming Markus Kottlaender <markus@intevation.de> parents: 3724 diff changeset	709 const nowCoords = [
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	710 { x: now, y: extent.waterlevel[0] },
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	711 { x: now, y: extent.waterlevel[1] }
3726 be939dcdfdfd client: waterlevel diagrams: make now line label not update its position when zooming Markus Kottlaender <markus@intevation.de> parents: 3724 diff changeset	712 ];
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	713 const nowLine = d3
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	714 .line()
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	715 .x(d => scale.x(d.x))
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	716 .y(d => scale.y(d.y));
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	717 const nowLabel = selection => {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	718 selection.attr(
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	719 "transform",
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	720 `translate(${scale.x(now)}, ${scale.y(extent.waterlevel[1])})`
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	721 );
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	722 };
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	723
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	724 // draw in main
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	725 diagram
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	726 .append("path")
3726 be939dcdfdfd client: waterlevel diagrams: make now line label not update its position when zooming Markus Kottlaender <markus@intevation.de> parents: 3724 diff changeset	727 .datum(nowCoords)
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	728 .attr("class", "now-line")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	729 .attr("d", nowLine);
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	730 diagram // label
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	731 .append("text")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	732 .text(this.$gettext("Now"))
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	733 .attr("class", "now-line-label")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	734 .attr("text-anchor", "middle")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	735 .call(nowLabel);
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	736
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	737 // draw in nav
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	738 navigation
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	739 .append("path")
3726 be939dcdfdfd client: waterlevel diagrams: make now line label not update its position when zooming Markus Kottlaender <markus@intevation.de> parents: 3724 diff changeset	740 .datum(nowCoords)
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	741 .attr("class", "now-line")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	742 .attr(
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	743 "d",
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	744 d3
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	745 .line()
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	746 .x(d => scale.x2(d.x))
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	747 .y(d => scale.y2(d.y))
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	748 );
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	749
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	750 return () => {
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	751 diagram.select(".now-line").attr("d", nowLine);
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	752 diagram.select(".now-line-label").call(nowLabel);
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	753 };
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	754 },
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	755 drawAxes({ diagram, dimensions, axes, navigation }) {
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	756 diagram
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	757 .append("g")
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	758 .attr("class", "axis--x")
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	759 .attr("transform", `translate(0, ${dimensions.mainHeight})`)
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	760 .call(axes.x)
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	761 .selectAll(".tick text")
4135 a6eda41e7724 hydrological_conditions: use offsets relative to svgwidth and svgheight Thomas Junk <thomas.junk@intevation.de> parents: 4109 diff changeset	762 .attr("y", Math.floor(0.015 * dimensions.mainHeight));
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	763 diagram // label
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	764 .append("text")
3576 1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized Markus Kottlaender <markus@intevation.de> parents: 3544 diff changeset	765 .text(this.$gettext("Waterlevel [m]"))
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	766 .attr("text-anchor", "middle")
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	767 .attr(
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	768 "transform",
4135 a6eda41e7724 hydrological_conditions: use offsets relative to svgwidth and svgheight Thomas Junk <thomas.junk@intevation.de> parents: 4109 diff changeset	769 `translate(${-0.05 *
a6eda41e7724 hydrological_conditions: use offsets relative to svgwidth and svgheight Thomas Junk <thomas.junk@intevation.de> parents: 4109 diff changeset	770 Math.floor(dimensions.width)}, ${dimensions.mainHeight /
a6eda41e7724 hydrological_conditions: use offsets relative to svgwidth and svgheight Thomas Junk <thomas.junk@intevation.de> parents: 4109 diff changeset	771 2}) rotate(-90)`
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	772 );
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	773 diagram
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	774 .append("g")
3902 0149b68a4f7e client: hydrological conditions diagram: added right y axis Markus Kottlaender <markus@intevation.de> parents: 3894 diff changeset	775 .attr("class", "axis--y")
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	776 .call(axes.y)
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	777 .selectAll(".tick text")
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	778 .attr("x", -25);
3902 0149b68a4f7e client: hydrological conditions diagram: added right y axis Markus Kottlaender <markus@intevation.de> parents: 3894 diff changeset	779 diagram
0149b68a4f7e client: hydrological conditions diagram: added right y axis Markus Kottlaender <markus@intevation.de> parents: 3894 diff changeset	780 .append("g")
0149b68a4f7e client: hydrological conditions diagram: added right y axis Markus Kottlaender <markus@intevation.de> parents: 3894 diff changeset	781 .attr("class", "axis--y-right")
0149b68a4f7e client: hydrological conditions diagram: added right y axis Markus Kottlaender <markus@intevation.de> parents: 3894 diff changeset	782 .attr("transform", `translate(${dimensions.width})`)
0149b68a4f7e client: hydrological conditions diagram: added right y axis Markus Kottlaender <markus@intevation.de> parents: 3894 diff changeset	783 .call(axes.yRight)
0149b68a4f7e client: hydrological conditions diagram: added right y axis Markus Kottlaender <markus@intevation.de> parents: 3894 diff changeset	784 .selectAll(".tick text");
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	785
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	786 navigation
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	787 .append("g")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	788 .attr("class", "axis axis--x")
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	789 .attr("transform", `translate(0, ${dimensions.navHeight})`)
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	790 .call(axes.x2);
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	791
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	792 return () => {
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	793 diagram
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	794 .select(".axis--x")
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	795 .call(axes.x)
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	796 .selectAll(".tick text")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	797 .attr("y", 15);
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	798 };
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	799 },
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	800 drawWaterlevelMinMaxAreaChart({ scale, diagram, navigation }) {
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	801 const areaChart = isNav =>
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	802 d3
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	803 .area()
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	804 .x(d => scale[isNav ? "x2" : "x"](d.date))
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	805 .y0(d => scale[isNav ? "y2" : "y"](d.min))
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	806 .y1(d => scale[isNav ? "y2" : "y"](d.max));
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	807
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	808 diagram
2791 2b79c0871138 client: spuc8: draw diagrams Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	809 .append("path")
2813 49c1570919ae client: spuc8: use new endpoints to fetch year based and longterm waterlevel data Markus Kottlaender <markus@intevation.de> parents: 2791 diff changeset	810 .datum(this.longtermWaterlevels)
2791 2b79c0871138 client: spuc8: draw diagrams Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	811 .attr("class", "area")
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	812 .attr("d", areaChart());
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	813
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	814 navigation
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	815 .append("path")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	816 .datum(this.longtermWaterlevels)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	817 .attr("class", "area")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	818 .attr("d", areaChart(true));
2791 2b79c0871138 client: spuc8: draw diagrams Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	819
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	820 return () => {
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	821 diagram.select(".area").attr("d", areaChart());
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	822 };
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	823 },
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	824 drawWaterlevelLineChart({ type, data, scale, diagram }) {
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	825 const lineChart = type =>
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	826 d3
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	827 .line()
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	828 .x(d => scale.x(d.date))
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	829 .y(d => scale.y(d[type]))
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	830 .curve(d3.curveLinear);
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	831 diagram
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	832 .append("path")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	833 .attr("class", "line " + type)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	834 .datum(data \|\| this.longtermWaterlevels)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	835 .attr("d", lineChart(type));
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	836
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	837 return () => {
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	838 diagram.select(".line." + type).attr("d", lineChart(type));
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	839 };
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	840 },
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	841 drawRefLines({ refWaterLevels, scale, diagram, extent }) {
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	842 const refWaterlevelLine = d3
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	843 .line()
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	844 .x(d => scale.x(d.x))
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	845 .y(d => scale.y(d.y));
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	846
3211 f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	847 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	848 if (refWaterLevels[ref]) {
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	849 diagram
3211 f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	850 .append("path")
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	851 .datum([
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	852 { x: extent.date[0], y: refWaterLevels[ref] },
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	853 { 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	854 ])
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	855 .attr("class", ref.toLowerCase() + "-line")
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	856 .attr("d", refWaterlevelLine);
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	857 diagram // label
3211 f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	858 .append("rect")
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	859 .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	860 .attr("x", 1)
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	861 .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	862 .attr("width", 55)
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	863 .attr("height", 12);
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 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("text")
3576 1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized Markus Kottlaender <markus@intevation.de> parents: 3544 diff changeset	866 .text(
1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized Markus Kottlaender <markus@intevation.de> parents: 3544 diff changeset	867 `${ref} (${this.$options.filters.waterlevel(
1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized Markus Kottlaender <markus@intevation.de> parents: 3544 diff changeset	868 refWaterLevels[ref]
1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized Markus Kottlaender <markus@intevation.de> parents: 3544 diff changeset	869 )})`
1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized Markus Kottlaender <markus@intevation.de> parents: 3544 diff changeset	870 )
3211 f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	871 .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	872 .attr("x", 5)
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	873 .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	874 }
3209 5b8916b78cea client: waterlevel diagrams: check which reference waterlevels are available and added RN as possible option Markus Kottlaender <markus@intevation.de> parents: 3197 diff changeset	875 }
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	876 },
4226 6f0cd9a551b3 client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4135 diff changeset	877 createZoom({
6f0cd9a551b3 client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4135 diff changeset	878 updaters,
6f0cd9a551b3 client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4135 diff changeset	879 eventRect,
6f0cd9a551b3 client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4135 diff changeset	880 dimensions,
6f0cd9a551b3 client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4135 diff changeset	881 scale,
6f0cd9a551b3 client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4135 diff changeset	882 svg,
6f0cd9a551b3 client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4135 diff changeset	883 navigation,
6f0cd9a551b3 client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4135 diff changeset	884 zoomLevel
6f0cd9a551b3 client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4135 diff changeset	885 }) {
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	886 const brush = d3
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	887 .brushX()
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	888 .handleSize(4)
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	889 .extent([[0, 0], [dimensions.width, dimensions.navHeight]]);
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	890
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	891 const zoom = d3
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	892 .zoom()
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	893 .scaleExtent([1, Infinity])
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	894 .translateExtent([[0, 0], [dimensions.width, dimensions.mainHeight]])
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	895 .extent([[0, 0], [dimensions.width, dimensions.mainHeight]]);
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	896
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	897 brush.on("brush end", () => {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	898 if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	899 return; // ignore brush-by-zoom
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	900 let s = d3.event.selection \|\| scale.x2.range();
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	901 scale.x.domain(s.map(scale.x2.invert, scale.x2));
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	902 updaters.forEach(u => u && u());
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	903 this.setInlineStyles(svg);
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	904 svg
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	905 .select(".zoom")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	906 .call(
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	907 zoom.transform,
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	908 d3.zoomIdentity
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	909 .scale(dimensions.width / (s[1] - s[0]))
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	910 .translate(-s[0], 0)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	911 );
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	912 });
4226 6f0cd9a551b3 client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4135 diff changeset	913 let scaleForZoom = t => {
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	914 scale.x.domain(t.rescaleX(scale.x2).domain());
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	915 updaters.forEach(u => u && u());
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	916 this.setInlineStyles(svg);
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	917 navigation
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	918 .select(".brush")
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	919 .call(brush.move, scale.x.range().map(t.invertX, t));
4226 6f0cd9a551b3 client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4135 diff changeset	920 };
6f0cd9a551b3 client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4135 diff changeset	921 zoom.on("zoom", () => {
6f0cd9a551b3 client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4135 diff changeset	922 if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush")
6f0cd9a551b3 client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4135 diff changeset	923 return; // ignore zoom-by-brush
6f0cd9a551b3 client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4135 diff changeset	924 let t = d3.event.transform;
6f0cd9a551b3 client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4135 diff changeset	925 // Set the last zoom level and recalculate x,y for pdf-export
6f0cd9a551b3 client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4135 diff changeset	926 if (zoomLevel) {
4228 b8d578e42b4b pdfprint: generate a new transform object instead of manipulating the given one. Thomas Junk <thomas.junk@intevation.de> parents: 4227 diff changeset	927 const tx = (zoomLevel.x * dimensions.width) / zoomLevel.width;
b8d578e42b4b pdfprint: generate a new transform object instead of manipulating the given one. Thomas Junk <thomas.junk@intevation.de> parents: 4227 diff changeset	928 const k = zoomLevel.k;
b8d578e42b4b pdfprint: generate a new transform object instead of manipulating the given one. Thomas Junk <thomas.junk@intevation.de> parents: 4227 diff changeset	929 const ty = zoomLevel.y;
b8d578e42b4b pdfprint: generate a new transform object instead of manipulating the given one. Thomas Junk <thomas.junk@intevation.de> parents: 4227 diff changeset	930 t = d3.zoomIdentity.translate(tx, ty).scale(k);
4226 6f0cd9a551b3 client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4135 diff changeset	931 }
4228 b8d578e42b4b pdfprint: generate a new transform object instead of manipulating the given one. Thomas Junk <thomas.junk@intevation.de> parents: 4227 diff changeset	932 scaleForZoom(t);
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	933 });
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	934 zoom.on("start", () => {
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	935 svg.select(".chart-dot").style("opacity", 0);
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	936 svg.select(".chart-tooltip").style("opacity", 0);
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	937 });
4226 6f0cd9a551b3 client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4135 diff changeset	938 // store the zoom level after zomming is ended
6f0cd9a551b3 client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4135 diff changeset	939 if (!zoomLevel) {
6f0cd9a551b3 client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4135 diff changeset	940 zoom.on("end", () => {
6f0cd9a551b3 client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4135 diff changeset	941 this.zoomStore = { ...d3.event.transform, width: dimensions.width };
6f0cd9a551b3 client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4135 diff changeset	942 });
6f0cd9a551b3 client: pdf-gen: export the selected time-range of diagram on pdf(Hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 4135 diff changeset	943 }
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	944 navigation
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	945 .append("g")
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	946 .attr("class", "brush")
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	947 .call(brush)
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	948 .call(brush.move, scale.x.range());
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	949
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	950 eventRect.call(zoom);
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	951 },
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	952 createTooltips({ eventRect, diagram, scale, dimensions }) {
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	953 // create clippable container for the dot
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	954 diagram
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	955 .append("g")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	956 .attr("class", "chart-dots")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	957 .append("circle")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	958 .attr("class", "chart-dot")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	959 .attr("r", 4);
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	960
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	961 // create container for the tooltip
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	962 const tooltip = diagram.append("g").attr("class", "chart-tooltip");
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	963 tooltip
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	964 .append("rect")
2842 37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	965 .attr("rx", "0.25em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	966 .attr("ry", "0.25em");
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	967
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	968 // create container for multiple text rows
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	969 const tooltipText = tooltip.append("text").attr("text-anchor", "middle");
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	970
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	971 // padding inside the tooltip box and diagram padding to determine left
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	972 // and right offset from the diagram boundaries for the tooltip position.
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	973 const tooltipPadding = 10;
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	974 const diagramPadding = 5;
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	975
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	976 eventRect
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	977 .on("mouseover", () => {
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	978 diagram.select(".chart-dot").style("opacity", 1);
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	979 diagram.select(".chart-tooltip").style("opacity", 1);
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	980 })
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	981 .on("mouseout", () => {
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	982 diagram.select(".chart-dot").style("opacity", 0);
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	983 diagram.select(".chart-tooltip").style("opacity", 0);
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	984 })
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	985 .on("mousemove", () => {
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	986 // find data point closest to mouse
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	987 const x0 = scale.x.invert(
3212 f87fd173f750 client: waterlevel diagrams: fixed tooltip bug Markus Kottlaender <markus@intevation.de> parents: 3211 diff changeset	988 d3.mouse(document.getElementById("zoom-hydrocond"))[0]
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	989 ),
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	990 i = d3.bisector(d => d.date).left(this.longtermWaterlevels, x0, 1),
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	991 d0 = this.longtermWaterlevels[i - 1],
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	992 d1 = this.longtermWaterlevels[i] \|\| d0,
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	993 d = x0 - d0.date > d1.date - x0 ? d1 : d0;
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	994
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	995 const coords = {
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	996 x: scale.x(d.date),
7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	997 y: scale.y(d.median)
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	998 };
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	999
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1000 // position the dot
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	1001 diagram
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1002 .select(".chart-dot")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1003 .style("opacity", 1)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1004 .attr("transform", `translate(${coords.x}, ${coords.y})`);
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1005
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1006 // remove current texts
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1007 tooltipText.selectAll("tspan").remove();
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1008
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1009 // write date
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1010 tooltipText
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1011 .append("tspan")
2842 37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1012 .attr("dominant-baseline", "hanging")
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1013 .attr("text-anchor", "middle")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1014 .text(
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1015 d.date.toLocaleString([], {
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1016 year: "2-digit",
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1017 month: "2-digit",
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1018 day: "2-digit"
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1019 })
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1020 );
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1021
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1022 tooltipText
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1023 .append("tspan")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1024 .attr("x", 0)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1025 .attr("y", 0)
2842 37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1026 .attr("dy", "1.4em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1027 .attr("dominant-baseline", "hanging")
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1028 .attr("text-anchor", "middle")
3576 1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized Markus Kottlaender <markus@intevation.de> parents: 3544 diff changeset	1029 .text(`Q75%: ${this.$options.filters.waterlevel(d.q75)} m`);
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1030 tooltipText
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1031 .append("tspan")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1032 .attr("x", 0)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1033 .attr("y", 0)
2842 37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1034 .attr("dy", "2.6em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1035 .attr("dominant-baseline", "hanging")
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1036 .attr("text-anchor", "middle")
3576 1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized Markus Kottlaender <markus@intevation.de> parents: 3544 diff changeset	1037 .text(`Median: ${this.$options.filters.waterlevel(d.median)} m`);
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1038 tooltipText
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1039 .append("tspan")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1040 .attr("x", 0)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1041 .attr("y", 0)
2842 37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1042 .attr("dy", "3.8em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1043 .attr("dominant-baseline", "hanging")
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1044 .attr("text-anchor", "middle")
3576 1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized Markus Kottlaender <markus@intevation.de> parents: 3544 diff changeset	1045 .text(`Q25%: ${this.$options.filters.waterlevel(d.q25)} m`);
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1046 tooltipText
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1047 .append("tspan")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1048 .attr("x", 0)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1049 .attr("y", 0)
2842 37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1050 .attr("dy", "5em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1051 .attr("dominant-baseline", "hanging")
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1052 .attr("text-anchor", "middle")
3576 1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized Markus Kottlaender <markus@intevation.de> parents: 3544 diff changeset	1053 .text(`Max: ${this.$options.filters.waterlevel(d.max)} m`);
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1054 tooltipText
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1055 .append("tspan")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1056 .attr("x", 0)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1057 .attr("y", 0)
2842 37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1058 .attr("dy", "6.2em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1059 .attr("dominant-baseline", "hanging")
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1060 .attr("text-anchor", "middle")
3576 1109a38f7ff1 client: waterlevel format in diagrams changed from cm to m and localized Markus Kottlaender <markus@intevation.de> parents: 3544 diff changeset	1061 .text(`Min: ${this.$options.filters.waterlevel(d.min)} m`);
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1062
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1063 const dYear = this.yearWaterlevels.find(
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1064 ywl => ywl.date.getTime() === d.date.getTime()
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1065 );
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1066 if (dYear) {
4385 610773d34e4f hydrological_conditions: decouple diagram from dialogue Thomas Junk <thomas.junk@intevation.de> parents: 4228 diff changeset	1067 if (!this.yearCompareD) return;
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1068 tooltipText
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1069 .append("tspan")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1070 .attr("x", 0)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1071 .attr("y", 0)
2842 37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1072 .attr("dy", "7.4em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1073 .attr("dominant-baseline", "hanging")
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1074 .attr("text-anchor", "middle")
4385 610773d34e4f hydrological_conditions: decouple diagram from dialogue Thomas Junk <thomas.junk@intevation.de> parents: 4228 diff changeset	1075 .text(`${this.yearCompareD}: ${dYear.mean.toFixed(1)} cm`);
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1076 }
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1077
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1078 // get text dimensions
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1079 const textBBox = tooltipText.node().getBBox();
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1080
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	1081 diagram
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1082 .selectAll(".chart-tooltip text tspan")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1083 .attr("x", textBBox.width / 2 + tooltipPadding)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1084 .attr("y", tooltipPadding);
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1085
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1086 // position and scale tooltip box
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1087 const xMax =
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	1088 dimensions.width -
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1089 (textBBox.width + diagramPadding + tooltipPadding * 2);
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1090 const tooltipX = Math.max(
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1091 diagramPadding,
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1092 Math.min(coords.x - (textBBox.width + tooltipPadding * 2) / 2, xMax)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1093 );
2824 d7c4169516fa client: spuc7/8: further improved tooltip positioning Markus Kottlaender <markus@intevation.de> parents: 2822 diff changeset	1094 let tooltipY = coords.y - (textBBox.height + tooltipPadding * 2) - 10;
d7c4169516fa client: spuc7/8: further improved tooltip positioning Markus Kottlaender <markus@intevation.de> parents: 2822 diff changeset	1095 if (coords.y < textBBox.height + tooltipPadding * 2) {
d7c4169516fa client: spuc7/8: further improved tooltip positioning Markus Kottlaender <markus@intevation.de> parents: 2822 diff changeset	1096 tooltipY = coords.y + 10;
d7c4169516fa client: spuc7/8: further improved tooltip positioning Markus Kottlaender <markus@intevation.de> parents: 2822 diff changeset	1097 }
d7c4169516fa client: spuc7/8: further improved tooltip positioning Markus Kottlaender <markus@intevation.de> parents: 2822 diff changeset	1098
3869 7d86beedfb00 hydrological conditions: factor out side-effects from diagram rendering Thomas Junk <thomas.junk@intevation.de> parents: 3865 diff changeset	1099 diagram
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1100 .select(".chart-tooltip")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1101 .style("opacity", 1)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1102 .attr("transform", `translate(${tooltipX}, ${tooltipY})`)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1103 .select("rect")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1104 .attr("width", textBBox.width + tooltipPadding * 2)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1105 .attr("height", textBBox.height + tooltipPadding * 2);
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1106 });
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1107 }
3992 2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1108 },
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1109 created() {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1110 this.resizeListenerFunction = debounce(this.drawDiagram, 100);
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1111 window.addEventListener("resize", this.resizeListenerFunction);
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1112 },
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1113 mounted() {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1114 // 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	1115 // 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	1116 // 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	1117 // 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	1118 // 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	1119 // 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	1120 // screen.
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1121 setTimeout(this.drawDiagram, 150);
4385 610773d34e4f hydrological_conditions: decouple diagram from dialogue Thomas Junk <thomas.junk@intevation.de> parents: 4228 diff changeset	1122 this.initialDiagramValues();
3992 2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1123 this.templates[0] = this.defaultTemplate;
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1124 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	1125 this.templateData = this.form.template;
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1126 HTTP.get("/templates/diagram", {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1127 headers: {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1128 "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	1129 "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	1130 }
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1131 })
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1132 .then(response => {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1133 if (response.data.length) {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1134 this.templates = response.data;
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1135 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	1136 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	1137 this.applyChange();
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1138 }
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1139 })
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1140 .catch(e => {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1141 const { status, data } = e.response;
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1142 displayError({
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1143 title: this.$gettext("Backend Error"),
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1144 message: `${status}: ${data.message \|\| data}`
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1145 });
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1146 });
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1147 },
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1148 destroyed() {
2f024d6189ca Reverted merge with diagram-cleanup -- its not yet ready. Sascha Wilde <wilde@intevation.de> parents: 3965 diff changeset	1149 window.removeEventListener("resize", this.resizeListenerFunction);
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1150 }
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1151 };
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1152 </script>

Mercurial > gemma

annotate client/src/components/gauge/HydrologicalConditions.vue @ 4809:b6d8570b8480