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

annotate client/src/components/gauge/HydrologicalConditions.vue @ 3544:067ad32fba69

client: diagram-template: improve values of template elements * add default values to template elements to use if some are missing in the template definition

author	Fadi Abbud <fadi.abbud@intevation.de>
date	Fri, 31 May 2019 11:08:27 +0200
parents	8801811bf9f5
children	1109a38f7ff1

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">
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	3 <UIBoxHeader
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	4 icon="ruler-vertical"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	5 :title="title"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	6 :closeCallback="close"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	7 class="rounded-0"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	8 />
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	9 <div class="d-flex flex-fill">
3440 8801811bf9f5 client: diagram-template: fix the size of renderd Diagram in case two diagrams are shown on the screen Fadi Abbud <fadi.abbud@intevation.de> parents: 3404 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>
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	15 {{ yearCompare }}
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>
de0d0685a17b client: improve diagram-legends style Fadi Abbud <fadi.abbud@intevation.de> parents: 3285 diff changeset	21 Q25%
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	22 </div>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	23 <div class="legend">
3323 de0d0685a17b client: improve diagram-legends style Fadi Abbud <fadi.abbud@intevation.de> parents: 3285 diff changeset	24 <span
de0d0685a17b client: improve diagram-legends style Fadi Abbud <fadi.abbud@intevation.de> parents: 3285 diff changeset	25 style="background-color: black; width: 20px; height: 20px;"
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 Median
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	28 </div>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	29 <div class="legend">
3323 de0d0685a17b client: improve diagram-legends style Fadi Abbud <fadi.abbud@intevation.de> parents: 3285 diff changeset	30 <span
de0d0685a17b client: improve diagram-legends style Fadi Abbud <fadi.abbud@intevation.de> parents: 3285 diff changeset	31 style="background-color: purple; width: 20px; height: 20px;"
de0d0685a17b client: improve diagram-legends style Fadi Abbud <fadi.abbud@intevation.de> parents: 3285 diff changeset	32 ></span>
de0d0685a17b client: improve diagram-legends style Fadi Abbud <fadi.abbud@intevation.de> parents: 3285 diff changeset	33 Q75%
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	34 </div>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	35 <div class="legend">
3323 de0d0685a17b client: improve diagram-legends style Fadi Abbud <fadi.abbud@intevation.de> parents: 3285 diff changeset	36 <span
de0d0685a17b client: improve diagram-legends style Fadi Abbud <fadi.abbud@intevation.de> parents: 3285 diff changeset	37 style="background-color: lightsteelblue; width: 20px; height: 20px;"
de0d0685a17b client: improve diagram-legends style Fadi Abbud <fadi.abbud@intevation.de> parents: 3285 diff changeset	38 ></span>
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	39 Long-term Amplitude
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	40 </div>
3197 9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	41 <select
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	42 @change="applyChange"
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	43 v-model="form.template"
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	44 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	45 >
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	46 <option
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	47 v-for="template in templates"
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	48 :value="template"
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	49 :key="template.name"
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	50 >
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	51 {{ template.name }}
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	52 </option>
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	53 </select>
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	54 <div>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	55 <button
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	56 @click="downloadPDF"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	57 type="button"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	58 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	59 :disabled="!longtermWaterlevels.length"
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	60 >
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	61 <translate>Export to PDF</translate>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	62 </button>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	63 </div>
3403 d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	64 <a
3404 0c9467003d14 client: waterlevel diagrams: disabled export buttons when no data is available Markus Kottlaender <markus@intevation.de> parents: 3403 diff changeset	65 :class="[
0c9467003d14 client: waterlevel diagrams: disabled export buttons when no data is available Markus Kottlaender <markus@intevation.de> parents: 3403 diff changeset	66 '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	67 { disabled: !longtermWaterlevels.length }
0c9467003d14 client: waterlevel diagrams: disabled export buttons when no data is available Markus Kottlaender <markus@intevation.de> parents: 3403 diff changeset	68 ]"
3403 d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	69 :href="csvLink"
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	70 :download="csvFileName"
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	71 >
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	72 <translate>Export as CSV</translate>
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	73 </a>
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	74 </DiagramLegend>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	75 <div
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	76 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	77 :id="containerId"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	78 >
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	79 <div v-if="!longtermWaterlevels.length">
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	80 <translate>No data available.</translate>
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	81 </div>
2839 162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2829 diff changeset	82 </div>
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	83 </div>
3247 35c124338f36 client: fix rendering of diagram on pdf by splitscreen case (hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 3242 diff changeset	84 <div
35c124338f36 client: fix rendering of diagram on pdf by splitscreen case (hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 3242 diff changeset	85 id="tmpContainer"
35c124338f36 client: fix rendering of diagram on pdf by splitscreen case (hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 3242 diff changeset	86 style="position: absolute; z-index: -1; top: 600px;"
35c124338f36 client: fix rendering of diagram on pdf by splitscreen case (hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 3242 diff changeset	87 ></div>
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	88 </div>
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	89 </template>
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	90
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	91 <script>
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	92 /* 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	93 * without warranty, see README.md and license for details.
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	94 *
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	95 * SPDX-License-Identifier: AGPL-3.0-or-later
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	96 * License-Filename: LICENSES/AGPL-3.0.txt
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	97 *
3112 e838609bc10d client: fix license header for waterlevel.vue and hydrologicalconditions.vue Fadi Abbud <fadi.abbud@intevation.de> parents: 3111 diff changeset	98 * Copyright (C) 2019 by via donau
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	99 * – Österreichische Wasserstraßen-Gesellschaft mbH
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	100 * Software engineering by Intevation GmbH
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	101 *
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	102 * Author(s):
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	103 * 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	104 * Fadi Abbud <fadi.abbud@intevation.de>
2761 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
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	107 import { mapState, mapGetters } from "vuex";
2791 2b79c0871138 client: spuc8: draw diagrams Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	108 import * as d3 from "d3";
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	109 import debounce from "debounce";
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	110 import { startOfYear, endOfYear } from "date-fns";
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	111 import jsPDF from "jspdf";
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	112 import canvg from "canvg";
3197 9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	113 import { pdfgen } from "@/lib/mixins";
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	114 import { HTTP } from "@/lib/http";
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	115 import { displayError } from "@/lib/errors";
2761 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 export default {
3197 9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	118 mixins: [pdfgen],
2839 162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2829 diff changeset	119 components: {
162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2829 diff changeset	120 DiagramLegend: () => import("@/components/DiagramLegend")
162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2829 diff changeset	121 },
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	122 data() {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	123 return {
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	124 containerId: "hydrologicalconditions-diagram-container",
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	125 svg: null,
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	126 diagram: null,
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	127 navigation: null,
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	128 dimensions: null,
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	129 extent: null,
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	130 scale: null,
3197 9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	131 axes: null,
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	132 templateData: null,
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	133 form: {
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	134 template: null,
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	135 form: null
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	136 },
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	137 templates: [],
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	138 defaultTemplate: {
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	139 name: "Default",
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	140 properties: {
3350 8da2f7b9a04b client: diagram-template:remove unnecessary template properties and typo Fadi Abbud <fadi.abbud@intevation.de> parents: 3336 diff changeset	141 paperSize: "a4"
3197 9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	142 },
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	143 elements: [
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	144 {
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	145 type: "diagram",
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	146 position: "topleft",
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	147 offset: { x: 15, y: 50 },
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	148 width: 290,
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	149 height: 100
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	150 },
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	151 {
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	152 type: "diagramlegend",
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	153 position: "topleft",
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	154 offset: { x: 30, y: 150 },
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	155 colot: "black"
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	156 },
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	157 {
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	158 type: "diagramtitle",
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	159 position: "topleft",
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	160 offset: { x: 50, y: 26 },
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	161 fontsize: 22,
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	162 color: "steelblue"
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	163 }
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	164 ]
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	165 },
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	166 pdf: {
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	167 doc: null,
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	168 width: 420,
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	169 height: 297
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	170 }
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	171 };
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	172 },
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	173 computed: {
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	174 ...mapState("application", ["paneSetup"]),
2829 4a1211727d5f client: spuc8: implemented year controls Markus Kottlaender <markus@intevation.de> parents: 2824 diff changeset	175 ...mapState("gauges", [
4a1211727d5f client: spuc8: implemented year controls Markus Kottlaender <markus@intevation.de> parents: 2824 diff changeset	176 "longtermWaterlevels",
4a1211727d5f client: spuc8: implemented year controls Markus Kottlaender <markus@intevation.de> parents: 2824 diff changeset	177 "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	178 "yearCompare",
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	179 "longtermInterval"
2829 4a1211727d5f client: spuc8: implemented year controls Markus Kottlaender <markus@intevation.de> parents: 2824 diff changeset	180 ]),
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	181 ...mapGetters("gauges", ["selectedGauge"]),
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	182 title() {
3148 cdfb0093b7b1 client: gauge diagrams: added information to titles Markus Kottlaender <markus@intevation.de> parents: 3147 diff changeset	183 return `${this.selectedGauge.properties.objname}: ${this.$gettext(
cdfb0093b7b1 client: gauge diagrams: added information to titles Markus Kottlaender <markus@intevation.de> parents: 3147 diff changeset	184 "Hydrological Conditions"
cdfb0093b7b1 client: gauge diagrams: added information to titles Markus Kottlaender <markus@intevation.de> parents: 3147 diff changeset	185 )} (${this.longtermInterval.join(" - ")})`;
3403 d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	186 },
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	187 csvLink() {
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	188 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	189 },
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	190 csvFileName() {
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	191 return `${this.$gettext("hydrological-conditions")}-${
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	192 this.selectedGauge.properties.objname
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	193 }-${this.longtermInterval.join(" - ")}.csv`;
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	194 },
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	195 csvData() {
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	196 // 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	197 // 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	198 // 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	199 let merged = this.longtermWaterlevels
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	200 .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	201 .map(d => {
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	202 let yearData = this.yearWaterlevels.find(y => {
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	203 return d.date.getTime() === y.date.getTime();
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	204 });
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	205 d[this.yearCompare] = yearData ? yearData.mean : "";
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	206 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	207 d.max
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	208 };${d.mean};${d.median};${d.q25};${d.q75};${d[this.yearCompare]}`;
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	209 })
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	210 .join("\n");
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	211 return `#Interval: ${this.longtermInterval.join(
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	212 " - "
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	213 )}\n#date;#min;#max;#mean;#median;#q25;#q75;#${
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	214 this.yearCompare
d7cc5cda82a9 client: waterlevel diagrams: implemented csv export Markus Kottlaender <markus@intevation.de> parents: 3350 diff changeset	215 }\n${merged}`;
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	216 }
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	217 },
3068 492c30ca3142 client: diagrams: added watchers to ensure diagram update when data changes Markus Kottlaender <markus@intevation.de> parents: 3067 diff changeset	218 watch: {
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	219 paneSetup() {
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	220 this.$nextTick(() => this.drawDiagram());
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	221 },
3068 492c30ca3142 client: diagrams: added watchers to ensure diagram update when data changes Markus Kottlaender <markus@intevation.de> parents: 3067 diff changeset	222 longtermWaterlevels() {
492c30ca3142 client: diagrams: added watchers to ensure diagram update when data changes Markus Kottlaender <markus@intevation.de> parents: 3067 diff changeset	223 this.drawDiagram();
492c30ca3142 client: diagrams: added watchers to ensure diagram update when data changes Markus Kottlaender <markus@intevation.de> parents: 3067 diff changeset	224 },
492c30ca3142 client: diagrams: added watchers to ensure diagram update when data changes Markus Kottlaender <markus@intevation.de> parents: 3067 diff changeset	225 yearWaterlevels() {
492c30ca3142 client: diagrams: added watchers to ensure diagram update when data changes Markus Kottlaender <markus@intevation.de> parents: 3067 diff changeset	226 this.drawDiagram();
492c30ca3142 client: diagrams: added watchers to ensure diagram update when data changes Markus Kottlaender <markus@intevation.de> parents: 3067 diff changeset	227 }
492c30ca3142 client: diagrams: added watchers to ensure diagram update when data changes Markus Kottlaender <markus@intevation.de> parents: 3067 diff changeset	228 },
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	229 methods: {
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	230 close() {
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	231 this.$store.commit(
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	232 "application/paneSetup",
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	233 this.paneSetup === "GAUGE_WATERLEVEL_HYDROLOGICALCONDITIONS"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	234 ? "GAUGE_WATERLEVEL"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	235 : "DEFAULT"
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	236 );
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	237 },
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	238 downloadPDF() {
3197 9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	239 if (this.templateData) {
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	240 this.pdf.doc = new jsPDF(
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	241 "l",
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	242 "mm",
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	243 this.templateData.properties.paperSize
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	244 );
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	245 // pdf width and height in millimeter (landscape)
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	246 this.pdf.width =
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	247 this.templateData.properties.paperSize === "a3" ? 420 : 297;
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	248 this.pdf.height =
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	249 this.templateData.properties.paperSize === "a3" ? 297 : 210;
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	250 // default values if some are missing in template
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	251 let defaultFontSize = 11,
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	252 defaultColor = "black",
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	253 defaultWidth = 70,
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	254 defaultTextColor = "black",
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	255 defaultBorderColor = "white",
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	256 defaultBgColor = "white",
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	257 defaultRounding = 2,
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	258 defaultPadding = 2,
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	259 defaultOffset = { x: 0, y: 0 };
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	260 this.templateData.elements.forEach(e => {
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	261 switch (e.type) {
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	262 case "diagram": {
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	263 this.addDiagram(
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	264 e.position,
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	265 e.offset \|\| defaultOffset,
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	266 e.width,
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	267 e.height
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	268 );
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	269 break;
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	270 }
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	271 case "diagramtitle": {
3285 aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js Fadi Abbud <fadi.abbud@intevation.de> parents: 3249 diff changeset	272 let gaugeInfo =
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js Fadi Abbud <fadi.abbud@intevation.de> parents: 3249 diff changeset	273 this.selectedGauge.properties.objname +
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js Fadi Abbud <fadi.abbud@intevation.de> parents: 3249 diff changeset	274 " (" +
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js Fadi Abbud <fadi.abbud@intevation.de> parents: 3249 diff changeset	275 this.selectedGauge.id
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js Fadi Abbud <fadi.abbud@intevation.de> parents: 3249 diff changeset	276 .split(".")[1]
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js Fadi Abbud <fadi.abbud@intevation.de> parents: 3249 diff changeset	277 .replace(/[()]/g, "")
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js Fadi Abbud <fadi.abbud@intevation.de> parents: 3249 diff changeset	278 .split(",")[3] +
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js Fadi Abbud <fadi.abbud@intevation.de> parents: 3249 diff changeset	279 "): Hydrological Conditions " +
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js Fadi Abbud <fadi.abbud@intevation.de> parents: 3249 diff changeset	280 this.longtermInterval.join(" - ");
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js Fadi Abbud <fadi.abbud@intevation.de> parents: 3249 diff changeset	281 this.addDiagramTitle(
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js Fadi Abbud <fadi.abbud@intevation.de> parents: 3249 diff changeset	282 e.position,
3336 db1dc197dc43 client: diagram-template: cleanup Fadi Abbud <fadi.abbud@intevation.de> parents: 3323 diff changeset	283 e.offset \|\| defaultOffset,
db1dc197dc43 client: diagram-template: cleanup Fadi Abbud <fadi.abbud@intevation.de> parents: 3323 diff changeset	284 e.fontsize \|\| defaultFontSize,
db1dc197dc43 client: diagram-template: cleanup Fadi Abbud <fadi.abbud@intevation.de> parents: 3323 diff changeset	285 e.color \|\| defaultColor,
3285 aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js Fadi Abbud <fadi.abbud@intevation.de> parents: 3249 diff changeset	286 gaugeInfo
aac1ca73e92a client: diagram-template:(cleanup) move reusable pdf-functions to mixins.js Fadi Abbud <fadi.abbud@intevation.de> parents: 3249 diff changeset	287 );
3197 9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	288 break;
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	289 }
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	290 case "diagramlegend": {
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	291 this.addDiagramLegend(
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	292 e.position,
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	293 e.offset \|\| defaultOffset,
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	294 e.color \|\| defaultColor
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	295 );
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	296 break;
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	297 }
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	298 case "image": {
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	299 this.addImage(
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	300 e.url,
3544 067ad32fba69 client: diagram-template: improve values of template elements Fadi Abbud <fadi.abbud@intevation.de> parents: 3440 diff changeset	301 e.format \|\| "",
3197 9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	302 e.position,
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	303 e.offset \|\| defaultOffset,
3544 067ad32fba69 client: diagram-template: improve values of template elements Fadi Abbud <fadi.abbud@intevation.de> parents: 3440 diff changeset	304 e.width \|\| 90,
067ad32fba69 client: diagram-template: improve values of template elements Fadi Abbud <fadi.abbud@intevation.de> parents: 3440 diff changeset	305 e.height \|\| 60
3197 9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	306 );
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	307 break;
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	308 }
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	309 case "text": {
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	310 this.addText(
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	311 e.position,
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	312 e.offset \|\| defaultOffset,
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	313 e.width \|\| defaultWidth,
3242 3b770f8273b6 client: diagram-template: fix bug with font size Fadi Abbud <fadi.abbud@intevation.de> parents: 3229 diff changeset	314 e.fontsize \|\| defaultFontSize,
3197 9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	315 e.color \|\| defaultTextColor,
3544 067ad32fba69 client: diagram-template: improve values of template elements Fadi Abbud <fadi.abbud@intevation.de> parents: 3440 diff changeset	316 e.text \|\| ""
3197 9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	317 );
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	318 break;
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	319 }
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	320 case "box": {
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	321 this.addBox(
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	322 e.position,
3544 067ad32fba69 client: diagram-template: improve values of template elements Fadi Abbud <fadi.abbud@intevation.de> parents: 3440 diff changeset	323 e.offset \|\| defaultOffset,
067ad32fba69 client: diagram-template: improve values of template elements Fadi Abbud <fadi.abbud@intevation.de> parents: 3440 diff changeset	324 e.width \|\| 90,
067ad32fba69 client: diagram-template: improve values of template elements Fadi Abbud <fadi.abbud@intevation.de> parents: 3440 diff changeset	325 e.height \|\| 60,
3197 9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	326 e.rounding === 0 \|\| e.rounding ? e.rounding : defaultRounding,
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	327 e.color \|\| defaultBgColor,
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	328 e.brcolor \|\| defaultBorderColor
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	329 );
3544 067ad32fba69 client: diagram-template: improve values of template elements Fadi Abbud <fadi.abbud@intevation.de> parents: 3440 diff changeset	330
3197 9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	331 break;
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	332 }
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	333 case "textbox": {
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	334 this.addTextBox(
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	335 e.position,
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	336 e.offset \|\| defaultOffset,
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	337 e.width,
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	338 e.height,
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	339 e.rounding === 0 \|\| e.rounding ? e.rounding : defaultRounding,
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	340 e.padding \|\| defaultPadding,
3242 3b770f8273b6 client: diagram-template: fix bug with font size Fadi Abbud <fadi.abbud@intevation.de> parents: 3229 diff changeset	341 e.fontsize \|\| defaultFontSize,
3197 9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	342 e.color \|\| defaultTextColor,
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	343 e.background \|\| defaultBgColor,
3544 067ad32fba69 client: diagram-template: improve values of template elements Fadi Abbud <fadi.abbud@intevation.de> parents: 3440 diff changeset	344 e.text \|\| "",
3197 9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	345 e.brcolor \|\| defaultBorderColor
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	346 );
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	347 break;
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	348 }
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	349 }
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	350 });
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	351 }
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	352 this.pdf.doc.save(
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	353 this.selectedGauge.properties.objname +
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	354 " Hydrological-condition Diagram.pdf"
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	355 );
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	356 },
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	357 addDiagram(position, offset, width, height) {
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	358 let x = offset.x,
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	359 y = offset.y;
3247 35c124338f36 client: fix rendering of diagram on pdf by splitscreen case (hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 3242 diff changeset	360 // check if there are tow diagrams on the screen
35c124338f36 client: fix rendering of diagram on pdf by splitscreen case (hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 3242 diff changeset	361 // draw the diagram in a separated html element to get the full size
35c124338f36 client: fix rendering of diagram on pdf by splitscreen case (hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 3242 diff changeset	362 if (
35c124338f36 client: fix rendering of diagram on pdf by splitscreen case (hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 3242 diff changeset	363 ["GAUGE_WATERLEVEL_HYDROLOGICALCONDITIONS"].indexOf(this.paneSetup) !==
35c124338f36 client: fix rendering of diagram on pdf by splitscreen case (hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 3242 diff changeset	364 -1
35c124338f36 client: fix rendering of diagram on pdf by splitscreen case (hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 3242 diff changeset	365 ) {
35c124338f36 client: fix rendering of diagram on pdf by splitscreen case (hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 3242 diff changeset	366 this.containerId = "tmpContainer";
35c124338f36 client: fix rendering of diagram on pdf by splitscreen case (hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 3242 diff changeset	367 // set width and height
35c124338f36 client: fix rendering of diagram on pdf by splitscreen case (hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 3242 diff changeset	368 document.querySelector("#tmpContainer").style.width =
35c124338f36 client: fix rendering of diagram on pdf by splitscreen case (hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 3242 diff changeset	369 document.querySelector("#hydrologicalconditions-diagram-container")
35c124338f36 client: fix rendering of diagram on pdf by splitscreen case (hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 3242 diff changeset	370 .clientWidth *
35c124338f36 client: fix rendering of diagram on pdf by splitscreen case (hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 3242 diff changeset	371 2 +
3440 8801811bf9f5 client: diagram-template: fix the size of renderd Diagram in case two diagrams are shown on the screen Fadi Abbud <fadi.abbud@intevation.de> parents: 3404 diff changeset	372 document.querySelector("#diagramlegendId").clientWidth +
3247 35c124338f36 client: fix rendering of diagram on pdf by splitscreen case (hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 3242 diff changeset	373 "px";
35c124338f36 client: fix rendering of diagram on pdf by splitscreen case (hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 3242 diff changeset	374 document.querySelector("#tmpContainer").style.height =
35c124338f36 client: fix rendering of diagram on pdf by splitscreen case (hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 3242 diff changeset	375 document.querySelector("#hydrologicalconditions-diagram-container")
35c124338f36 client: fix rendering of diagram on pdf by splitscreen case (hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 3242 diff changeset	376 .clientHeight + "px";
35c124338f36 client: fix rendering of diagram on pdf by splitscreen case (hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 3242 diff changeset	377 this.drawDiagram();
35c124338f36 client: fix rendering of diagram on pdf by splitscreen case (hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 3242 diff changeset	378 }
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	379 var svg = document.getElementById(this.containerId).innerHTML;
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	380 if (svg) {
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	381 svg = svg.replace(/\r?\n\|\r/g, "").trim();
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	382 }
3247 35c124338f36 client: fix rendering of diagram on pdf by splitscreen case (hydrologicalconditions) Fadi Abbud <fadi.abbud@intevation.de> parents: 3242 diff changeset	383 this.containerId = "hydrologicalconditions-diagram-container";
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	384 var canvas = document.createElement("canvas");
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	385 canvas.width = window.innerWidth;
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	386 canvas.height = window.innerHeight / 2;
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	387 canvg(canvas, svg, {
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	388 ignoreMouse: true,
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	389 ignoreAnimation: true,
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	390 ignoreDimensions: true
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	391 });
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	392 var imgData = canvas.toDataURL("image/png");
3544 067ad32fba69 client: diagram-template: improve values of template elements Fadi Abbud <fadi.abbud@intevation.de> parents: 3440 diff changeset	393 // use default width,height if they are missing in the template definition
3197 9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	394 if (!width) {
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	395 width = this.templateData.properties.paperSize === "a3" ? 380 : 290;
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	396 }
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	397 if (!height) {
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	398 height = this.templateData.properties.paperSize === "a3" ? 130 : 100;
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	399 }
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	400 if (["topright", "bottomright"].indexOf(position) !== -1) {
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	401 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	402 }
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	403 if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	404 y = this.pdf.height - offset.y - height;
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	405 }
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	406 this.pdf.doc.addImage(imgData, "PNG", x, y, width, height);
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	407 },
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	408 applyChange() {
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	409 if (this.form.template.hasOwnProperty("properties")) {
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	410 this.templateData = this.defaultTemplate;
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	411 return;
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	412 }
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	413 if (this.form.template) {
3229 5e773e0c05be client: diagram-template: adjust the routes for waterlevels and hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3222 diff changeset	414 HTTP.get("/templates/diagram/" + this.form.template.name, {
3197 9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	415 headers: {
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	416 "X-Gemma-Auth": localStorage.getItem("token"),
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	417 "Content-type": "text/xml; charset=UTF-8"
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	418 }
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	419 })
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	420 .then(response => {
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	421 this.templateData = response.data.template_data;
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	422 })
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	423 .catch(e => {
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	424 const { status, data } = e.response;
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	425 displayError({
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	426 title: this.$gettext("Backend Error"),
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	427 message: `${status}: ${data.message \|\| data}`
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	428 });
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	429 });
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	430 }
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	431 },
3129 136b86794453 client: improve pdf-gen code for diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3112 diff changeset	432 // Diagram legend
3197 9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	433 addDiagramLegend(position, offset, color) {
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	434 let x = offset.x,
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	435 y = offset.y;
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	436 let width =
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	437 (this.pdf.doc.getStringUnitWidth("Long-term Amplitude") * 10) /
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	438 (72 / 25.6) +
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	439 5;
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	440 // 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	441 // the size of the element
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	442 if (["topright", "bottomright"].indexOf(position) !== -1) {
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	443 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	444 }
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	445 if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	446 y = this.pdf.height - offset.y - this.getTextHeight(4);
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	447 }
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	448 this.pdf.doc.setFontSize(10);
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	449 this.pdf.doc.setTextColor(color);
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	450 this.pdf.doc.setDrawColor("white");
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	451 this.pdf.doc.setFillColor("red");
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	452 this.pdf.doc.circle(x, y, 2, "FD");
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	453 this.pdf.doc.text(x + 3, y + 1, "" + this.yearCompare);
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	454 this.pdf.doc.setFillColor("orange");
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	455 this.pdf.doc.circle(x, y + 5, 2, "FD");
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	456 this.pdf.doc.text(x + 3, y + 6, "Q25%");
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	457 this.pdf.doc.setFillColor("black");
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	458 this.pdf.doc.circle(x, y + 10, 2, "FD");
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	459 this.pdf.doc.text(x + 3, y + 11, "Median ");
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	460 this.pdf.doc.setFillColor("purple");
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	461 this.pdf.doc.circle(x, y + 15, 2, "FD");
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	462 this.pdf.doc.text(x + 3, y + 16, "Q75%");
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	463 this.pdf.doc.setFillColor("lightsteelblue");
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	464 this.pdf.doc.circle(x, y + 20, 2, "FD");
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	465 this.pdf.doc.text(x + 3, y + 21, "Long-term Amplitude");
3129 136b86794453 client: improve pdf-gen code for diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3112 diff changeset	466 },
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	467 drawDiagram() {
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	468 // remove old diagram
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	469 d3.select("#" + this.containerId + " svg").remove();
2813 49c1570919ae client: spuc8: use new endpoints to fetch year based and longterm waterlevel data Markus Kottlaender <markus@intevation.de> parents: 2791 diff changeset	470 if (!this.selectedGauge \|\| !this.longtermWaterlevels.length) return;
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	471 // PREPARE HELPERS
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	472
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	473 // HDC/LDC/MW for the selected gauge
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	474 const refWaterLevels = JSON.parse(
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	475 this.selectedGauge.properties.reference_water_levels
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	476 );
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	477
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	478 // dimensions (widths, heights, margins)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	479 this.dimensions = this.getDimensions();
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	480
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	481 // get min/max values for date and waterlevel axis
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	482 this.extent = this.getExtent(refWaterLevels);
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	483
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	484 // scaling helpers
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	485 this.scale = this.getScale();
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	486
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	487 // creating the axes based on the scales
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	488 this.axes = this.getAxes();
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	489
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	490 // DRAW DIAGRAM/NAVIGATION AREAS
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	491
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	492 // create svg
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	493 this.svg = d3
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	494 .select("#" + this.containerId)
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	495 .append("svg")
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	496 .attr("width", "100%")
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	497 .attr("height", "100%");
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	498
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	499 // create container for main diagram
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	500 this.diagram = this.svg
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	501 .append("g")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	502 .attr("class", "main")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	503 .attr(
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	504 "transform",
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	505 `translate(${this.dimensions.mainMargin.left}, ${
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	506 this.dimensions.mainMargin.top
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	507 })`
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	508 );
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	509
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	510 // create container for navigation diagram
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	511 this.navigation = this.svg
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	512 .append("g")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	513 .attr("class", "nav")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	514 .attr(
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	515 "transform",
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	516 `translate(${this.dimensions.navMargin.left}, ${
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	517 this.dimensions.navMargin.top
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	518 })`
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	519 );
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	520
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	521 // define visible area, everything outside this area will be hidden
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	522 this.svg
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	523 .append("defs")
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	524 .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	525 .attr("id", "hydrocond-clip")
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	526 .append("rect")
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	527 .attr("width", this.dimensions.width)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	528 .attr("height", this.dimensions.mainHeight);
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	529
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	530 // DRAW DIAGRAM PARTS
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	531
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	532 // 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	533 // 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	534 // 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	535 const updaters = [];
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	536
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	537 // draw
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	538 updaters.push(this.drawAxes());
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	539 updaters.push(this.drawWaterlevelMinMaxAreaChart());
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	540 updaters.push(this.drawWaterlevelLineChart("median"));
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	541 updaters.push(this.drawWaterlevelLineChart("q25"));
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	542 updaters.push(this.drawWaterlevelLineChart("q75"));
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	543 updaters.push(this.drawWaterlevelLineChart("mean", this.yearWaterlevels));
3211 f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	544 updaters.push(this.drawNowLines());
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	545 this.drawRefLines(refWaterLevels); // static, doesn't need an updater
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	546
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	547 // INTERACTIONS
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	548
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	549 // create rectanlge on the main chart area to capture mouse events
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	550 const eventRect = this.svg
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	551 .append("rect")
3212 f87fd173f750 client: waterlevel diagrams: fixed tooltip bug Markus Kottlaender <markus@intevation.de> parents: 3211 diff changeset	552 .attr("id", "zoom-hydrocond")
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	553 .attr("class", "zoom")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	554 .attr("width", this.dimensions.width)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	555 .attr("height", this.dimensions.mainHeight)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	556 .attr(
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	557 "transform",
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	558 `translate(${this.dimensions.mainMargin.left}, ${
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	559 this.dimensions.mainMargin.top
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	560 })`
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	561 );
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	562
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	563 this.createZoom(updaters, eventRect);
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	564 this.createTooltips(eventRect);
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	565 this.setInlineStyles();
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	566 },
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	567 setInlineStyles() {
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	568 this.svg.selectAll(".hide").attr("fill-opacity", 0);
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	569 this.svg
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	570 .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	571 .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	572 .attr("stroke-width", 2)
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	573 .attr("fill", "none");
3060 cebbc1a8987b client: linting Fadi Abbud <fadi.abbud@intevation.de> parents: 3059 diff changeset	574 this.svg.selectAll(".line.mean").attr("stroke", "red");
cebbc1a8987b client: linting Fadi Abbud <fadi.abbud@intevation.de> parents: 3059 diff changeset	575 this.svg.selectAll(".line.median").attr("stroke", "black");
cebbc1a8987b client: linting Fadi Abbud <fadi.abbud@intevation.de> parents: 3059 diff changeset	576 this.svg.selectAll(".line.q25").attr("stroke", "orange");
cebbc1a8987b client: linting Fadi Abbud <fadi.abbud@intevation.de> parents: 3059 diff changeset	577 this.svg.selectAll(".line.q75").attr("stroke", "purple");
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	578 this.svg
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	579 .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	580 .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	581 .attr("stroke", "none")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	582 .attr("fill", "lightsteelblue");
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	583 this.svg
3209 5b8916b78cea client: waterlevel diagrams: check which reference waterlevels are available and added RN as possible option Markus Kottlaender <markus@intevation.de> parents: 3197 diff changeset	584 .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	585 .attr("stroke-width", 1)
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	586 .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	587 .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	588 this.svg.selectAll(".hdc-line").attr("stroke", "red");
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	589 this.svg.selectAll(".ldc-line").attr("stroke", "green");
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	590 this.svg.selectAll(".mw-line").attr("stroke", "grey");
3209 5b8916b78cea client: waterlevel diagrams: check which reference waterlevels are available and added RN as possible option Markus Kottlaender <markus@intevation.de> parents: 3197 diff changeset	591 this.svg.selectAll(".rn-line").attr("stroke", "grey");
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	592 this.svg
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	593 .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	594 .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	595 .attr("fill", "black");
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	596 this.svg
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	597 .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	598 .attr("fill", "rgba(255, 255, 255, 0.6)");
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	599 this.svg
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	600 .selectAll(".now-line")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	601 .attr("stroke", "#999")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	602 .attr("stroke-width", 1)
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	603 .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	604 .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	605 this.svg
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	606 .selectAll(".now-line-label")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	607 .attr("fill", "#999")
3045 44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	608 .style("font-size", "11px");
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	609 this.svg
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	610 .selectAll(".tick line")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	611 .attr("stroke-dasharray", 5)
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	612 .attr("stroke", " #ccc");
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	613 this.svg.selectAll(".tick text").attr("fill", "black");
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	614 this.svg.selectAll(".domain").attr("stroke", "black");
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	615
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	616 this.svg
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	617 .selectAll(".zoom")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	618 .attr("cursor", "move")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	619 .attr("fill", "none")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	620 .attr("pointer-events", "all");
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	621 this.svg
3111 f269bd001e78 client: remove css classes and adjust styles for hydrological-diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3068 diff changeset	622 .selectAll(".brush .selection")
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	623 .attr("stroke", "none")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	624 .attr("fill-opacity", 0.2);
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	625 this.svg
3111 f269bd001e78 client: remove css classes and adjust styles for hydrological-diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3068 diff changeset	626 .selectAll(".brush .handle")
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	627 .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	628 .attr("fill", "rgba(23, 162, 184, 0.5)");
3147 25c0cbfcc515 client: gauge diagrams: fixed bug related to same clippath id in multiple diagrams Markus Kottlaender <markus@intevation.de> parents: 3146 diff changeset	629 this.svg
25c0cbfcc515 client: gauge diagrams: fixed bug related to same clippath id in multiple diagrams Markus Kottlaender <markus@intevation.de> parents: 3146 diff changeset	630 .selectAll(".chart-dots")
25c0cbfcc515 client: gauge diagrams: fixed bug related to same clippath id in multiple diagrams Markus Kottlaender <markus@intevation.de> parents: 3146 diff changeset	631 .attr("clip-path", "url(#hydrocond-clip)");
3045 44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	632 this.svg
3111 f269bd001e78 client: remove css classes and adjust styles for hydrological-diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3068 diff changeset	633 .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	634 .attr("fill", "black")
f269bd001e78 client: remove css classes and adjust styles for hydrological-diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3068 diff changeset	635 .attr("stroke", "black")
3045 44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	636 .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	637 .style("pointer-events", "none")
3045 44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	638 .attr("fill-opacity", 0)
3046 c764c73f44b4 client: fix chart-tooltip style for diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3045 diff changeset	639 .transition()
c764c73f44b4 client: fix chart-tooltip style for diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3045 diff changeset	640 .attr("fill-opacity", "0.1s");
3045 44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	641 this.svg
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	642 .selectAll(".chart-tooltip")
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	643 .attr("fill-opacity", 0)
3046 c764c73f44b4 client: fix chart-tooltip style for diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3045 diff changeset	644 .transition()
c764c73f44b4 client: fix chart-tooltip style for diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3045 diff changeset	645 .attr("fill-opacity", "0.3s");
3045 44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	646 this.svg
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	647 .selectAll(".chart-tooltip rect")
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	648 .attr("fill", "#fff")
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	649 .attr("stroke", "#ccc");
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	650 this.svg
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	651 .selectAll(".chart-tooltip text")
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	652 .attr("fill", "666")
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	653 .style("font-size", "0.8em");
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	654 },
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	655 getDimensions() {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	656 // dimensions and margins
3146 b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	657 const svgWidth = document.querySelector("#" + this.containerId)
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	658 .clientWidth;
b6cc4838d2c0 client: implemented pane mechanic for diagrams Markus Kottlaender <markus@intevation.de> parents: 3129 diff changeset	659 const svgHeight = document.querySelector("#" + this.containerId)
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	660 .clientHeight;
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	661 const mainMargin = { top: 20, right: 20, bottom: 110, left: 80 };
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	662 const navMargin = {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	663 top: svgHeight - mainMargin.top - 65,
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	664 right: 20,
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	665 bottom: 30,
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	666 left: 80
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	667 };
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	668 const width = +svgWidth - mainMargin.left - mainMargin.right;
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	669 const mainHeight = +svgHeight - mainMargin.top - mainMargin.bottom;
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	670 const navHeight = +svgHeight - navMargin.top - navMargin.bottom;
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	671
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	672 return { width, mainHeight, navHeight, mainMargin, navMargin };
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	673 },
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	674 getExtent(refWaterLevels) {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	675 const waterlevelsRelevantForExtent = [];
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	676 this.longtermWaterlevels.forEach(wl => {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	677 waterlevelsRelevantForExtent.push(wl.min, wl.max);
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	678 });
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	679 waterlevelsRelevantForExtent.push(
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	680 refWaterLevels.HDC + (refWaterLevels.HDC - refWaterLevels.LDC) / 8,
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	681 Math.max(
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	682 refWaterLevels.LDC - (refWaterLevels.HDC - refWaterLevels.LDC) / 4,
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	683 0
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	684 )
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	685 );
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	686 return {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	687 // 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	688 date: [startOfYear(new Date()), endOfYear(new Date())],
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	689 // 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	690 // including HDC (+ 1/8 HDC-LDC) and LDC (- 1/4 HDC-LDC)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	691 waterlevel: d3.extent(waterlevelsRelevantForExtent)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	692 };
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	693 },
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	694 getScale() {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	695 // scaling helpers to convert real world values into pixels
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	696 const x = d3.scaleTime().range([0, this.dimensions.width]);
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	697 const y = d3.scaleLinear().range([this.dimensions.mainHeight, 0]);
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	698 const x2 = d3.scaleTime().range([0, this.dimensions.width]);
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	699 const y2 = d3.scaleLinear().range([this.dimensions.navHeight, 0]);
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	700
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	701 // setting the min and max values for the diagram axes
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	702 x.domain(d3.extent(this.extent.date));
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	703 y.domain(this.extent.waterlevel);
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	704 x2.domain(x.domain());
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	705 y2.domain(y.domain());
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	706
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	707 return { x, y, x2, y2 };
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	708 },
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	709 getAxes() {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	710 return {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	711 x: d3
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	712 .axisTop(this.scale.x)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	713 .tickSizeInner(this.dimensions.mainHeight)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	714 .tickSizeOuter(0)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	715 .tickFormat(date => {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	716 // make the x-axis label formats dynamic, based on zoom
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	717 // but never display year numbers since they don't make any sense in
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	718 // this diagram
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	719 return (d3.timeSecond(date) < date
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	720 ? d3.timeFormat(".%L")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	721 : d3.timeMinute(date) < date
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	722 ? d3.timeFormat(":%S")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	723 : d3.timeHour(date) < date
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	724 ? d3.timeFormat("%I:%M")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	725 : d3.timeDay(date) < date
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	726 ? d3.timeFormat("%I %p")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	727 : d3.timeMonth(date) < date
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	728 ? d3.timeWeek(date) < date
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	729 ? d3.timeFormat("%a %d")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	730 : d3.timeFormat("%b %d")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	731 : d3.timeFormat("%B"))(date);
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	732 }),
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	733 y: d3
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	734 .axisRight(this.scale.y)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	735 .tickSizeInner(this.dimensions.width)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	736 .tickSizeOuter(0),
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	737 x2: d3.axisBottom(this.scale.x2)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	738 };
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	739 },
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	740 drawNowLines() {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	741 const nowLine = d3
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	742 .line()
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	743 .x(d => this.scale.x(d.x))
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	744 .y(d => this.scale.y(d.y));
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	745
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	746 const nowLabel = selection => {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	747 selection.attr(
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	748 "transform",
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	749 `translate(${this.scale.x(new Date())}, ${this.scale.y(
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	750 this.extent.waterlevel[1] - 16
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	751 )})`
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	752 );
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
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	755 // draw in main
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	756 this.diagram
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	757 .append("path")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	758 .datum([
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	759 { x: new Date(), y: this.extent.waterlevel[0] },
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	760 { x: new Date(), y: this.extent.waterlevel[1] - 20 }
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	761 ])
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	762 .attr("class", "now-line")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	763 .attr("d", nowLine);
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	764 this.diagram // label
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	765 .append("text")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	766 .text(this.$gettext("Now"))
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	767 .attr("class", "now-line-label")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	768 .attr("text-anchor", "middle")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	769 .call(nowLabel);
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	770
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	771 // draw in nav
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	772 this.navigation
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	773 .append("path")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	774 .datum([
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	775 { x: new Date(), y: this.extent.waterlevel[0] },
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	776 { x: new Date(), y: this.extent.waterlevel[1] - 20 }
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	777 ])
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	778 .attr("class", "now-line")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	779 .attr(
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	780 "d",
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	781 d3
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	782 .line()
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	783 .x(d => this.scale.x2(d.x))
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	784 .y(d => this.scale.y2(d.y))
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	785 );
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	786
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	787 return () => {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	788 this.diagram.select(".now-line").attr("d", nowLine);
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	789 this.diagram.select(".now-line-label").call(nowLabel);
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	790 };
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 drawAxes() {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	793 this.diagram
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	794 .append("g")
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	795 .attr("class", "axis--x")
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	796 .attr("transform", `translate(0, ${this.dimensions.mainHeight})`)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	797 .call(this.axes.x)
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	798 .selectAll(".tick text")
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	799 .attr("y", 15);
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	800 this.diagram // label
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	801 .append("text")
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	802 .text(this.$gettext("Waterlevel [cm]"))
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	803 .attr("text-anchor", "middle")
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	804 .attr(
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	805 "transform",
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	806 `translate(-45, ${this.dimensions.mainHeight / 2}) rotate(-90)`
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	807 );
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	808 this.diagram
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	809 .append("g")
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	810 .call(this.axes.y)
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	811 .selectAll(".tick text")
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	812 .attr("x", -25);
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	813
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	814 this.navigation
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	815 .append("g")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	816 .attr("class", "axis axis--x")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	817 .attr("transform", `translate(0, ${this.dimensions.navHeight})`)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	818 .call(this.axes.x2);
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	819
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	820 return () => {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	821 this.diagram
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	822 .select(".axis--x")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	823 .call(this.axes.x)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	824 .selectAll(".tick text")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	825 .attr("y", 15);
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	826 };
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	827 },
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	828 drawWaterlevelMinMaxAreaChart() {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	829 const areaChart = isNav =>
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	830 d3
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	831 .area()
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	832 .x(d => this.scale[isNav ? "x2" : "x"](d.date))
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	833 .y0(d => this.scale[isNav ? "y2" : "y"](d.min))
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	834 .y1(d => this.scale[isNav ? "y2" : "y"](d.max));
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	835
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	836 this.diagram
2791 2b79c0871138 client: spuc8: draw diagrams Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	837 .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	838 .datum(this.longtermWaterlevels)
2791 2b79c0871138 client: spuc8: draw diagrams Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	839 .attr("class", "area")
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	840 .attr("d", areaChart());
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	841
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	842 this.navigation
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	843 .append("path")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	844 .datum(this.longtermWaterlevels)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	845 .attr("class", "area")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	846 .attr("d", areaChart(true));
2791 2b79c0871138 client: spuc8: draw diagrams Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	847
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	848 return () => {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	849 this.diagram.select(".area").attr("d", areaChart());
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	850 };
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	851 },
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	852 drawWaterlevelLineChart(type, data) {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	853 const lineChart = type =>
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	854 d3
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	855 .line()
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	856 .x(d => this.scale.x(d.date))
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	857 .y(d => this.scale.y(d[type]))
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	858 .curve(d3.curveLinear);
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	859 this.diagram
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	860 .append("path")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	861 .attr("class", "line " + type)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	862 .datum(data \|\| this.longtermWaterlevels)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	863 .attr("d", lineChart(type));
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	864
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	865 return () => {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	866 this.diagram.select(".line." + type).attr("d", lineChart(type));
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	867 };
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	868 },
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	869 drawRefLines(refWaterLevels) {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	870 const refWaterlevelLine = d3
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	871 .line()
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	872 .x(d => this.scale.x(d.x))
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	873 .y(d => this.scale.y(d.y));
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	874
3211 f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	875 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	876 if (refWaterLevels[ref]) {
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	877 this.diagram
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	878 .append("path")
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	879 .datum([
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	880 { x: 0, y: refWaterLevels[ref] },
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	881 { x: this.extent.date[1], y: refWaterLevels[ref] }
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	882 ])
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	883 .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	884 .attr("d", refWaterlevelLine);
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	885 this.diagram // label
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	886 .append("rect")
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	887 .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	888 .attr("x", 1)
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	889 .attr("y", this.scale.y(refWaterLevels[ref]) - 13)
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	890 .attr("width", 55)
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	891 .attr("height", 12);
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	892 this.diagram
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	893 .append("text")
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	894 .text(`${ref} (${refWaterLevels[ref]})`)
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	895 .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	896 .attr("x", 5)
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	897 .attr("y", this.scale.y(refWaterLevels[ref]) - 3);
f76927849ef8 client: waterlevel diagrams: moved reference waterlevel labels and lines to foreground Markus Kottlaender <markus@intevation.de> parents: 3209 diff changeset	898 }
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	899 }
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	900 },
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	901 createZoom(updaters, eventRect) {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	902 const brush = d3
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	903 .brushX()
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	904 .handleSize(4)
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	905 .extent([[0, 0], [this.dimensions.width, this.dimensions.navHeight]]);
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	906
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	907 const zoom = d3
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	908 .zoom()
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	909 .scaleExtent([1, Infinity])
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	910 .translateExtent([
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	911 [0, 0],
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	912 [this.dimensions.width, this.dimensions.mainHeight]
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	913 ])
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	914 .extent([[0, 0], [this.dimensions.width, this.dimensions.mainHeight]]);
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	915
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	916 brush.on("brush end", () => {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	917 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	918 return; // ignore brush-by-zoom
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	919 let s = d3.event.selection \|\| this.scale.x2.range();
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	920 this.scale.x.domain(s.map(this.scale.x2.invert, this.scale.x2));
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	921 updaters.forEach(u => u && u());
3045 44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	922 this.setInlineStyles();
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	923 this.svg
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	924 .select(".zoom")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	925 .call(
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	926 zoom.transform,
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	927 d3.zoomIdentity
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	928 .scale(this.dimensions.width / (s[1] - s[0]))
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	929 .translate(-s[0], 0)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	930 );
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	931 });
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	932
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	933 zoom.on("zoom", () => {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	934 if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	935 return; // ignore zoom-by-brush
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	936 let t = d3.event.transform;
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	937 this.scale.x.domain(t.rescaleX(this.scale.x2).domain());
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	938 updaters.forEach(u => u && u());
3045 44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	939 this.setInlineStyles();
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	940 this.navigation
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	941 .select(".brush")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	942 .call(brush.move, this.scale.x.range().map(t.invertX, t));
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	943 });
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	944 zoom.on("start", () => {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	945 this.svg.select(".chart-dot").style("opacity", 0);
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	946 this.svg.select(".chart-tooltip").style("opacity", 0);
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	947 });
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	948
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	949 this.navigation
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	950 .append("g")
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	951 .attr("class", "brush")
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	952 .call(brush)
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	953 .call(brush.move, this.scale.x.range());
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	954
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	955 eventRect.call(zoom);
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	956 },
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	957 createTooltips(eventRect) {
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	958 // create clippable container for the dot
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	959 this.diagram
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	960 .append("g")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	961 .attr("class", "chart-dots")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	962 .append("circle")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	963 .attr("class", "chart-dot")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	964 .attr("r", 4);
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	965
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	966 // create container for the tooltip
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	967 const tooltip = this.diagram.append("g").attr("class", "chart-tooltip");
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	968 tooltip
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	969 .append("rect")
2842 37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	970 .attr("rx", "0.25em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	971 .attr("ry", "0.25em");
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	972
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	973 // create container for multiple text rows
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	974 const tooltipText = tooltip.append("text").attr("text-anchor", "middle");
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 // 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	977 // 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	978 const tooltipPadding = 10;
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	979 const diagramPadding = 5;
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 eventRect
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	982 .on("mouseover", () => {
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	983 this.diagram.select(".chart-dot").style("opacity", 1);
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	984 this.diagram.select(".chart-tooltip").style("opacity", 1);
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	985 })
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	986 .on("mouseout", () => {
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	987 this.diagram.select(".chart-dot").style("opacity", 0);
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	988 this.diagram.select(".chart-tooltip").style("opacity", 0);
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 .on("mousemove", () => {
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	991 // find data point closest to mouse
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	992 const x0 = this.scale.x.invert(
3212 f87fd173f750 client: waterlevel diagrams: fixed tooltip bug Markus Kottlaender <markus@intevation.de> parents: 3211 diff changeset	993 d3.mouse(document.getElementById("zoom-hydrocond"))[0]
2822 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 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	996 d0 = this.longtermWaterlevels[i - 1],
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	997 d1 = this.longtermWaterlevels[i] \|\| d0,
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	998 d = x0 - d0.date > d1.date - x0 ? d1 : d0;
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 const coords = {
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1001 x: this.scale.x(d.date),
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1002 y: this.scale.y(d.median)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1003 };
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1004
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1005 // position the dot
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1006 this.diagram
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1007 .select(".chart-dot")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1008 .style("opacity", 1)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1009 .attr("transform", `translate(${coords.x}, ${coords.y})`);
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1010
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1011 // remove current texts
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1012 tooltipText.selectAll("tspan").remove();
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1013
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1014 // write date
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1015 tooltipText
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1016 .append("tspan")
2842 37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1017 .attr("dominant-baseline", "hanging")
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1018 .attr("text-anchor", "middle")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1019 .text(
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1020 d.date.toLocaleString([], {
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1021 year: "2-digit",
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1022 month: "2-digit",
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1023 day: "2-digit"
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1024 })
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1025 );
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1026
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1027 tooltipText
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1028 .append("tspan")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1029 .attr("x", 0)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1030 .attr("y", 0)
2842 37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1031 .attr("dy", "1.4em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1032 .attr("dominant-baseline", "hanging")
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1033 .attr("text-anchor", "middle")
2829 4a1211727d5f client: spuc8: implemented year controls Markus Kottlaender <markus@intevation.de> parents: 2824 diff changeset	1034 .text(`Q75%: ${d.q75} cm`);
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1035 tooltipText
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1036 .append("tspan")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1037 .attr("x", 0)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1038 .attr("y", 0)
2842 37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1039 .attr("dy", "2.6em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1040 .attr("dominant-baseline", "hanging")
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1041 .attr("text-anchor", "middle")
2829 4a1211727d5f client: spuc8: implemented year controls Markus Kottlaender <markus@intevation.de> parents: 2824 diff changeset	1042 .text(`Median: ${d.median} cm`);
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1043 tooltipText
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1044 .append("tspan")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1045 .attr("x", 0)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1046 .attr("y", 0)
2842 37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1047 .attr("dy", "3.8em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1048 .attr("dominant-baseline", "hanging")
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1049 .attr("text-anchor", "middle")
2829 4a1211727d5f client: spuc8: implemented year controls Markus Kottlaender <markus@intevation.de> parents: 2824 diff changeset	1050 .text(`Q25%: ${d.q25} cm`);
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1051 tooltipText
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1052 .append("tspan")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1053 .attr("x", 0)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1054 .attr("y", 0)
2842 37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1055 .attr("dy", "5em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1056 .attr("dominant-baseline", "hanging")
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1057 .attr("text-anchor", "middle")
2829 4a1211727d5f client: spuc8: implemented year controls Markus Kottlaender <markus@intevation.de> parents: 2824 diff changeset	1058 .text(`Max: ${d.max} cm`);
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1059 tooltipText
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1060 .append("tspan")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1061 .attr("x", 0)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1062 .attr("y", 0)
2842 37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1063 .attr("dy", "6.2em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1064 .attr("dominant-baseline", "hanging")
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1065 .attr("text-anchor", "middle")
2829 4a1211727d5f client: spuc8: implemented year controls Markus Kottlaender <markus@intevation.de> parents: 2824 diff changeset	1066 .text(`Min: ${d.min} cm`);
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1067
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1068 const dYear = this.yearWaterlevels.find(
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1069 ywl => ywl.date.getTime() === d.date.getTime()
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1070 );
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1071 if (dYear) {
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1072 tooltipText
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1073 .append("tspan")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1074 .attr("x", 0)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1075 .attr("y", 0)
2842 37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1076 .attr("dy", "7.4em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	1077 .attr("dominant-baseline", "hanging")
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1078 .attr("text-anchor", "middle")
2829 4a1211727d5f client: spuc8: implemented year controls Markus Kottlaender <markus@intevation.de> parents: 2824 diff changeset	1079 .text(`${this.yearCompare}: ${dYear.mean.toFixed(1)} cm`);
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1080 }
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1081
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1082 // get text dimensions
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1083 const textBBox = tooltipText.node().getBBox();
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1084
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1085 this.diagram
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1086 .selectAll(".chart-tooltip text tspan")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1087 .attr("x", textBBox.width / 2 + tooltipPadding)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1088 .attr("y", tooltipPadding);
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1089
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1090 // position and scale tooltip box
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1091 const xMax =
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1092 this.dimensions.width -
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1093 (textBBox.width + diagramPadding + tooltipPadding * 2);
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1094 const tooltipX = Math.max(
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1095 diagramPadding,
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1096 Math.min(coords.x - (textBBox.width + tooltipPadding * 2) / 2, xMax)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1097 );
2824 d7c4169516fa client: spuc7/8: further improved tooltip positioning Markus Kottlaender <markus@intevation.de> parents: 2822 diff changeset	1098 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	1099 if (coords.y < textBBox.height + tooltipPadding * 2) {
d7c4169516fa client: spuc7/8: further improved tooltip positioning Markus Kottlaender <markus@intevation.de> parents: 2822 diff changeset	1100 tooltipY = coords.y + 10;
d7c4169516fa client: spuc7/8: further improved tooltip positioning Markus Kottlaender <markus@intevation.de> parents: 2822 diff changeset	1101 }
d7c4169516fa client: spuc7/8: further improved tooltip positioning Markus Kottlaender <markus@intevation.de> parents: 2822 diff changeset	1102
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1103 this.diagram
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1104 .select(".chart-tooltip")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1105 .style("opacity", 1)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1106 .attr("transform", `translate(${tooltipX}, ${tooltipY})`)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1107 .select("rect")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1108 .attr("width", textBBox.width + tooltipPadding * 2)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1109 .attr("height", textBBox.height + tooltipPadding * 2);
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	1110 });
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1111 }
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1112 },
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1113 created() {
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1114 window.addEventListener("resize", debounce(this.drawDiagram), 100);
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1115 },
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1116 mounted() {
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1117 this.drawDiagram();
3197 9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	1118 this.templates[0] = this.defaultTemplate;
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	1119 this.form.template = this.templates[0];
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	1120 this.templateData = this.form.template;
3229 5e773e0c05be client: diagram-template: adjust the routes for waterlevels and hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3222 diff changeset	1121 HTTP.get("/templates/diagram", {
3197 9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	1122 headers: {
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	1123 "X-Gemma-Auth": localStorage.getItem("token"),
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	1124 "Content-type": "text/xml; charset=UTF-8"
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	1125 }
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	1126 })
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	1127 .then(response => {
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	1128 if (response.data.length) {
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	1129 this.templates = response.data;
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	1130 this.form.template = this.templates[0];
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	1131 this.templates[this.templates.length] = this.defaultTemplate;
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	1132 this.applyChange();
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	1133 }
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	1134 })
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	1135 .catch(e => {
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	1136 const { status, data } = e.response;
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	1137 displayError({
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	1138 title: this.$gettext("Backend Error"),
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	1139 message: `${status}: ${data.message \|\| data}`
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	1140 });
9d38df37c1f8 client: implemnt pdf-template for hydrologicalconditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 3148 diff changeset	1141 });
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1142 },
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1143 updated() {
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1144 this.drawDiagram();
2986 7ee9a3ef90d4 client: remove resize event listener from diagrams after they are closed Markus Kottlaender <markus@intevation.de> parents: 2843 diff changeset	1145 },
7ee9a3ef90d4 client: remove resize event listener from diagrams after they are closed Markus Kottlaender <markus@intevation.de> parents: 2843 diff changeset	1146 destroyed() {
3067 0ffa9d418959 client: remove window resize listeners when closing diagram Markus Kottlaender <markus@intevation.de> parents: 3060 diff changeset	1147 window.removeEventListener("resize", debounce(this.drawDiagram));
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1148 }
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1149 };
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1150 </script>

Mercurial > gemma

annotate client/src/components/gauge/HydrologicalConditions.vue @ 3544:067ad32fba69