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

annotate client/src/components/gauge/HydrologicalConditions.vue @ 3059:6f5693bf7804

client: fix HydrologicalConditions diagram style

author	Fadi Abbud <fadi.abbud@intevation.de>
date	Tue, 16 Apr 2019 10:38:42 +0200
parents	7a1a33fcec64
children	cebbc1a8987b

rev	line source
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	1 <template>
2839 162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2829 diff changeset	2 <div class="d-flex flex-fill">
162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2829 diff changeset	3 <DiagramLegend>
162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2829 diff changeset	4 <div class="legend">
162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2829 diff changeset	5 <span style="background-color: red"></span>
162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2829 diff changeset	6 {{ yearCompare }}
162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2829 diff changeset	7 </div>
162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2829 diff changeset	8 <div class="legend">
162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2829 diff changeset	9 <span style="background-color: orange"></span> Q25%
162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2829 diff changeset	10 </div>
162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2829 diff changeset	11 <div class="legend">
162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2829 diff changeset	12 <span style="background-color: black"></span> Median
162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2829 diff changeset	13 </div>
162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2829 diff changeset	14 <div class="legend">
162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2829 diff changeset	15 <span style="background-color: purple"></span> Q75%
162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2829 diff changeset	16 </div>
162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2829 diff changeset	17 <div class="legend">
162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2829 diff changeset	18 <span style="background-color: lightsteelblue"></span>
2843 451d73940c81 client: diagrams: more compact legend style, removed unnecessary legend items Markus Kottlaender <markus@intevation.de> parents: 2842 diff changeset	19 Long-term Amplitude
2839 162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2829 diff changeset	20 </div>
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	21 <div>
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	22 <button
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	23 @click="downloadPDF"
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	24 type="button"
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	25 class="btn btn-sm btn-info d-block w-100 mt-2"
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	26 >
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	27 <translate>Export to PDF</translate>
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	28 </button>
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	29 </div>
2839 162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2829 diff changeset	30 </DiagramLegend>
162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2829 diff changeset	31 <div
162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2829 diff changeset	32 class="d-flex flex-fill justify-content-center align-items-center diagram-container"
162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2829 diff changeset	33 >
162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2829 diff changeset	34 <div v-if="!longtermWaterlevels.length">
162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2829 diff changeset	35 <translate>No data available.</translate>
162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2829 diff changeset	36 </div>
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	37 </div>
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	38 </div>
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	39 </template>
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	40
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	41 <style lang="sass" scoped>
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	42 .diagram-container
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	43 /deep/
2791 2b79c0871138 client: spuc8: draw diagrams Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	44 .hide
2b79c0871138 client: spuc8: draw diagrams Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	45 opacity: 0
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	46 .line
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	47 clip-path: url(#clip)
2791 2b79c0871138 client: spuc8: draw diagrams Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	48 stroke-width: 2
2b79c0871138 client: spuc8: draw diagrams Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	49 fill: none
2b79c0871138 client: spuc8: draw diagrams Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	50 &.mean
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	51 stroke: red
2791 2b79c0871138 client: spuc8: draw diagrams Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	52 &.median
2b79c0871138 client: spuc8: draw diagrams Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	53 stroke: black
2b79c0871138 client: spuc8: draw diagrams Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	54 &.q25
2b79c0871138 client: spuc8: draw diagrams Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	55 stroke: orange
2b79c0871138 client: spuc8: draw diagrams Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	56 &.q75
2b79c0871138 client: spuc8: draw diagrams Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	57 stroke: purple
2b79c0871138 client: spuc8: draw diagrams Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	58 .area
2b79c0871138 client: spuc8: draw diagrams Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	59 clip-path: url(#clip)
2b79c0871138 client: spuc8: draw diagrams Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	60 stroke: none
2b79c0871138 client: spuc8: draw diagrams Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	61 fill: lightsteelblue
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	62
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	63 .hdc-line,
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	64 .ldc-line,
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	65 .mw-line
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	66 stroke-width: 1
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	67 fill: none
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	68 clip-path: url(#clip)
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	69 .hdc-line
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	70 stroke: red
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	71 .ldc-line
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	72 stroke: green
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	73 .mw-line
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	74 stroke: grey
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	75 .ref-waterlevel-label
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	76 font-size: 11px
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	77 fill: #999
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	78 .now-line
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	79 stroke: #999
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	80 stroke-width: 1
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	81 stroke-dasharray: 5, 5
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	82 clip-path: url(#clip)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	83 .now-line-label
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	84 font-size: 11px
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	85 fill: #999
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	86
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	87 .tick
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	88 line
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	89 stroke-dasharray: 5
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	90 stroke: #ccc
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	91
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	92 .zoom
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	93 cursor: move
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	94 fill: none
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	95 pointer-events: all
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	96 .brush
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	97 .selection
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	98 stroke: none
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	99 fill-opacity: 0.2
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	100 .handle
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	101 stroke: rgba($color-info, 0.5)
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	102 fill: rgba($color-info, 0.5)
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	103
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	104 .chart-dots
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	105 clip-path: url(#clip)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	106 .chart-dot
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	107 fill: black
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	108 stroke: black
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	109 pointer-events: none
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	110 opacity: 0
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	111 transition: opacity 0.1s
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	112 .chart-tooltip
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	113 opacity: 0
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	114 transition: opacity 0.3s
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	115 rect
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	116 fill: #fff
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	117 stroke: #ccc
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	118 text
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	119 fill: #666
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	120 font-size: 12px
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	121 </style>
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	122
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	123 <script>
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	124 /* 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	125 * without warranty, see README.md and license for details.
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	126 *
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	127 * SPDX-License-Identifier: AGPL-3.0-or-later
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	128 * License-Filename: LICENSES/AGPL-3.0.txt
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	129 *
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	130 * Copyright (C) 2018 by via donau
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	131 * – Österreichische Wasserstraßen-Gesellschaft mbH
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	132 * Software engineering by Intevation GmbH
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	133 *
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	134 * Author(s):
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	135 * Markus Kottländer <markus.kottlaender@intevation.de>
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	136 */
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	137
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	138 import { mapState, mapGetters } from "vuex";
2791 2b79c0871138 client: spuc8: draw diagrams Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	139 import * as d3 from "d3";
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	140 import debounce from "debounce";
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	141 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	142 import jsPDF from "jspdf";
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	143 import canvg from "canvg";
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	144
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	145 export default {
2839 162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2829 diff changeset	146 components: {
162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2829 diff changeset	147 DiagramLegend: () => import("@/components/DiagramLegend")
162804509c3e client: spuc7/8: added legends Markus Kottlaender <markus@intevation.de> parents: 2829 diff changeset	148 },
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	149 data() {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	150 return {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	151 svg: null,
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	152 diagram: null,
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	153 navigation: null,
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	154 dimensions: null,
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	155 extent: null,
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	156 scale: null,
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	157 axes: null
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	158 };
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	159 },
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	160 computed: {
2829 4a1211727d5f client: spuc8: implemented year controls Markus Kottlaender <markus@intevation.de> parents: 2824 diff changeset	161 ...mapState("gauges", [
4a1211727d5f client: spuc8: implemented year controls Markus Kottlaender <markus@intevation.de> parents: 2824 diff changeset	162 "longtermWaterlevels",
4a1211727d5f client: spuc8: implemented year controls Markus Kottlaender <markus@intevation.de> parents: 2824 diff changeset	163 "yearWaterlevels",
3058 7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	164 "yearCompare",
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	165 "longtermInterval"
2829 4a1211727d5f client: spuc8: implemented year controls Markus Kottlaender <markus@intevation.de> parents: 2824 diff changeset	166 ]),
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	167 ...mapGetters("gauges", ["selectedGauge"])
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	168 },
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	169 methods: {
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	170 downloadPDF() {
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	171 var svg = this.svg._groups[0][0].outerHTML;
3058 7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	172 var gaugeInfo =
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	173 this.selectedGauge.properties.objname +
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	174 " (" +
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	175 this.selectedGauge.id
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	176 .split(".")[1]
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	177 .replace(/[()]/g, "")
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	178 .split(",")[3] +
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	179 "): Hydrological Conditions " +
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	180 this.longtermInterval.join(" - ");
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	181 if (svg) {
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	182 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	183 }
3032 3aca036e11f1 client: improve pdf properties for diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3025 diff changeset	184 var pdf = new jsPDF("l", "mm", "a3");
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	185 var canvas = document.createElement("canvas");
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	186 canvas.width = window.innerWidth;
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	187 canvas.height = window.innerHeight / 2;
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	188 canvg(canvas, svg, {
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	189 ignoreMouse: true,
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	190 ignoreAnimation: true,
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	191 ignoreDimensions: true
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	192 });
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	193 var imgData = canvas.toDataURL("image/png");
3032 3aca036e11f1 client: improve pdf properties for diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3025 diff changeset	194 pdf.addImage(imgData, "PNG", 40, 60, 380, 130);
3058 7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	195 // Gauge info as as title
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	196 pdf.setTextColor("steelblue");
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	197 pdf.setFontSize(22);
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	198 pdf.setFontStyle("bold");
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	199 pdf.text(gaugeInfo, 108, 30);
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	200 // Diagram legend
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	201 pdf.setFontSize(10);
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	202 pdf.setTextColor("black");
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	203 pdf.setDrawColor("white");
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	204 pdf.setFillColor("red");
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	205 pdf.circle(60, 190, 2, "FD");
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	206 pdf.text(63, 191, "" + this.yearCompare);
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	207 pdf.setFillColor("orange");
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	208 pdf.circle(60, 195, 2, "FD");
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	209 pdf.text(63, 196, "Q25%");
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	210 pdf.setFillColor("black");
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	211 pdf.circle(60, 200, 2, "FD");
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	212 pdf.text(63, 201, "Median ");
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	213 pdf.setFillColor("purple");
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	214 pdf.circle(60, 205, 2, "FD");
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	215 pdf.text(63, 206, "Q75%");
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	216 pdf.setFillColor("lightsteelblue");
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	217 pdf.circle(60, 210, 2, "FD");
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	218 pdf.text(63, 211, "Long-term Amplitude");
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	219 pdf.save(
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	220 this.selectedGauge.properties.objname +
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	221 " Hydrological-condition Diagram.pdf"
7a1a33fcec64 client: add infos and diagram legend for the generated pdf(hydrological diagram) Fadi Abbud <fadi.abbud@intevation.de> parents: 3046 diff changeset	222 );
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	223 },
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	224 drawDiagram() {
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	225 // remove old diagram
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	226 d3.select(".diagram-container 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	227 if (!this.selectedGauge \|\| !this.longtermWaterlevels.length) return;
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	228
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	229 // PREPARE HELPERS
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	230
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	231 // HDC/LDC/MW for the selected gauge
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	232 const refWaterLevels = JSON.parse(
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	233 this.selectedGauge.properties.reference_water_levels
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	234 );
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	235
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	236 // dimensions (widths, heights, margins)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	237 this.dimensions = this.getDimensions();
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	238
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	239 // 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	240 this.extent = this.getExtent(refWaterLevels);
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	241
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	242 // scaling helpers
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	243 this.scale = this.getScale();
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	244
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	245 // creating the axes based on the scales
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	246 this.axes = this.getAxes();
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	247
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	248 // DRAW DIAGRAM/NAVIGATION AREAS
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	249
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	250 // create svg
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	251 this.svg = d3
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	252 .select(".diagram-container")
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	253 .append("svg")
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	254 .attr("width", "100%")
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	255 .attr("height", "100%");
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	256
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	257 // create container for main diagram
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	258 this.diagram = this.svg
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	259 .append("g")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	260 .attr("class", "main")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	261 .attr(
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	262 "transform",
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	263 `translate(${this.dimensions.mainMargin.left}, ${
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	264 this.dimensions.mainMargin.top
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	265 })`
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	266 );
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	267
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	268 // create container for navigation diagram
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	269 this.navigation = this.svg
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	270 .append("g")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	271 .attr("class", "nav")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	272 .attr(
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	273 "transform",
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	274 `translate(${this.dimensions.navMargin.left}, ${
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	275 this.dimensions.navMargin.top
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	276 })`
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	277 );
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	278
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	279 // 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	280 this.svg
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	281 .append("defs")
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	282 .append("clipPath")
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	283 .attr("id", "clip")
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	284 .append("rect")
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	285 .attr("width", this.dimensions.width)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	286 .attr("height", this.dimensions.mainHeight);
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	287
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	288 // DRAW DIAGRAM PARTS
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	289
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	290 // 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	291 // 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	292 // 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	293 const updaters = [];
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	294
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	295 // draw
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	296 this.drawRefLines(refWaterLevels); // static, doesn't need an updater
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	297 updaters.push(this.drawAxes());
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	298 updaters.push(this.drawNowLines());
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	299 updaters.push(this.drawWaterlevelMinMaxAreaChart());
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	300 updaters.push(this.drawWaterlevelLineChart("median"));
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	301 updaters.push(this.drawWaterlevelLineChart("q25"));
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	302 updaters.push(this.drawWaterlevelLineChart("q75"));
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	303 updaters.push(this.drawWaterlevelLineChart("mean", this.yearWaterlevels));
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	304
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	305 // INTERACTIONS
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	306
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	307 // 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	308 const eventRect = this.svg
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	309 .append("rect")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	310 .attr("class", "zoom")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	311 .attr("width", this.dimensions.width)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	312 .attr("height", this.dimensions.mainHeight)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	313 .attr(
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	314 "transform",
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	315 `translate(${this.dimensions.mainMargin.left}, ${
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	316 this.dimensions.mainMargin.top
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	317 })`
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	318 );
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	319
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	320 this.createZoom(updaters, eventRect);
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	321 this.createTooltips(eventRect);
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	322 this.setInlineStyles();
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	323 },
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	324 setInlineStyles() {
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	325 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	326 this.svg
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	327 .selectAll(".line")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	328 .attr("clip-path", "url(#clip)")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	329 .attr("stroke-width", 2)
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	330 .attr("fill", "none");
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	331 this.svg
3059 6f5693bf7804 client: fix HydrologicalConditions diagram style Fadi Abbud <fadi.abbud@intevation.de> parents: 3058 diff changeset	332 .selectAll(".line.mean")
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	333 .attr("stroke", "red");
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	334 this.svg
3059 6f5693bf7804 client: fix HydrologicalConditions diagram style Fadi Abbud <fadi.abbud@intevation.de> parents: 3058 diff changeset	335 .selectAll(".line.median")
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	336 .attr("stroke", "black");
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	337 this.svg
3059 6f5693bf7804 client: fix HydrologicalConditions diagram style Fadi Abbud <fadi.abbud@intevation.de> parents: 3058 diff changeset	338 .selectAll(".line.q25")
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	339 .attr("stroke", "orange");
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	340 this.svg
3059 6f5693bf7804 client: fix HydrologicalConditions diagram style Fadi Abbud <fadi.abbud@intevation.de> parents: 3058 diff changeset	341 .selectAll(".line.q75")
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	342 .attr("stroke", "purple");
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	343 this.svg
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	344 .selectAll(".area")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	345 .attr("clip-path", "url(#clip)")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	346 .attr("stroke", "none")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	347 .attr("fill", "lightsteelblue");
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	348 this.svg
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	349 .selectAll(".hdc-line, .ldc-line, .mw-line")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	350 .attr("stroke-width", 1)
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	351 .attr("fill", "none")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	352 .attr("clip-path", "url(#clip)");
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	353 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	354 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	355 this.svg.selectAll(".mw-line").attr("stroke", "grey");
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	356 this.svg
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	357 .selectAll(".ref-waterlevel-label")
3045 44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	358 .style("font-size", "11px")
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	359 .attr("fill", "#999");
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	360 this.svg
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	361 .selectAll(".now-line")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	362 .attr("stroke", "#999")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	363 .attr("stroke-width", 1)
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	364 .attr("stroke-dasharray", "5, 5")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	365 .attr("clip-path", "url(#clip)");
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	366 this.svg
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	367 .selectAll(".now-line-label")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	368 .attr("fill", "#999")
3045 44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	369 .style("font-size", "11px");
3025 37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	370 this.svg
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	371 .selectAll(".tick line")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	372 .attr("stroke-dasharray", 5)
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	373 .attr("stroke", " #ccc");
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	374 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	375 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	376
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	377 this.svg
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	378 .selectAll(".zoom")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	379 .attr("cursor", "move")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	380 .attr("fill", "none")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	381 .attr("pointer-events", "all");
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	382 this.svg
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	383 .selectAll(".brush")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	384 .selectAll(".selection")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	385 .attr("stroke", "none")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	386 .attr("fill-opacity", 0.2);
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	387 this.svg
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	388 .selectAll(".brush")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	389 .selectAll(".handle")
37cc0d75ad84 client:implemented pdf-gen for hydrological conditions diagram Fadi Abbud <fadi.abbud@intevation.de> parents: 2986 diff changeset	390 .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	391 .attr("fill", "rgba(23, 162, 184, 0.5)");
3045 44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	392 this.svg
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	393 .selectAll(".chart-dot")
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	394 .attr("stroke-opacity", 0)
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	395 .attr("fill-opacity", 0)
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	396 .attr("stroke", "steelblue")
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	397 .style("pointer-events", "none")
3046 c764c73f44b4 client: fix chart-tooltip style for diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3045 diff changeset	398 .transition()
c764c73f44b4 client: fix chart-tooltip style for diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3045 diff changeset	399 .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	400 this.svg
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	401 .selectAll(".chart-tooltip")
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	402 .attr("fill-opacity", 0)
3046 c764c73f44b4 client: fix chart-tooltip style for diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3045 diff changeset	403 .transition()
c764c73f44b4 client: fix chart-tooltip style for diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3045 diff changeset	404 .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	405 this.svg
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	406 .selectAll(".chart-tooltip rect")
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	407 .attr("fill", "#fff")
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	408 .attr("stroke", "#ccc");
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	409 this.svg
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	410 .selectAll(".chart-tooltip text")
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	411 .attr("fill", "666")
44dc837638d9 client: improve styles for pdf-gen of diagrams Fadi Abbud <fadi.abbud@intevation.de> parents: 3032 diff changeset	412 .style("font-size", "0.8em");
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	413 },
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	414 getDimensions() {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	415 // dimensions and margins
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	416 const svgWidth = document.querySelector(".diagram-container").clientWidth;
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	417 const svgHeight = document.querySelector(".diagram-container")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	418 .clientHeight;
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	419 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	420 const navMargin = {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	421 top: svgHeight - mainMargin.top - 65,
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	422 right: 20,
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	423 bottom: 30,
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	424 left: 80
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	425 };
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	426 const width = +svgWidth - mainMargin.left - mainMargin.right;
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	427 const mainHeight = +svgHeight - mainMargin.top - mainMargin.bottom;
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	428 const navHeight = +svgHeight - navMargin.top - navMargin.bottom;
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	429
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	430 return { width, mainHeight, navHeight, mainMargin, navMargin };
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	431 },
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	432 getExtent(refWaterLevels) {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	433 const waterlevelsRelevantForExtent = [];
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	434 this.longtermWaterlevels.forEach(wl => {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	435 waterlevelsRelevantForExtent.push(wl.min, wl.max);
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	436 });
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	437 waterlevelsRelevantForExtent.push(
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	438 refWaterLevels.HDC + (refWaterLevels.HDC - refWaterLevels.LDC) / 8,
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	439 Math.max(
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	440 refWaterLevels.LDC - (refWaterLevels.HDC - refWaterLevels.LDC) / 4,
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	441 0
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	442 )
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	443 );
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	444 return {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	445 // 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	446 date: [startOfYear(new Date()), endOfYear(new Date())],
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	447 // 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	448 // 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	449 waterlevel: d3.extent(waterlevelsRelevantForExtent)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	450 };
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	451 },
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	452 getScale() {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	453 // 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	454 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	455 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	456 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	457 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	458
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	459 // 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	460 x.domain(d3.extent(this.extent.date));
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	461 y.domain(this.extent.waterlevel);
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	462 x2.domain(x.domain());
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	463 y2.domain(y.domain());
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	464
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	465 return { x, y, x2, y2 };
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	466 },
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	467 getAxes() {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	468 return {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	469 x: d3
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	470 .axisTop(this.scale.x)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	471 .tickSizeInner(this.dimensions.mainHeight)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	472 .tickSizeOuter(0)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	473 .tickFormat(date => {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	474 // 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	475 // 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	476 // this diagram
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	477 return (d3.timeSecond(date) < date
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	478 ? d3.timeFormat(".%L")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	479 : d3.timeMinute(date) < date
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	480 ? d3.timeFormat(":%S")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	481 : d3.timeHour(date) < date
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	482 ? d3.timeFormat("%I:%M")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	483 : d3.timeDay(date) < date
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	484 ? d3.timeFormat("%I %p")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	485 : d3.timeMonth(date) < date
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	486 ? d3.timeWeek(date) < date
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	487 ? d3.timeFormat("%a %d")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	488 : d3.timeFormat("%b %d")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	489 : d3.timeFormat("%B"))(date);
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	490 }),
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	491 y: d3
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	492 .axisRight(this.scale.y)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	493 .tickSizeInner(this.dimensions.width)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	494 .tickSizeOuter(0),
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	495 x2: d3.axisBottom(this.scale.x2)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	496 };
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	497 },
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	498 drawNowLines() {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	499 const nowLine = d3
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	500 .line()
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	501 .x(d => this.scale.x(d.x))
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	502 .y(d => this.scale.y(d.y));
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	503
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	504 const nowLabel = selection => {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	505 selection.attr(
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	506 "transform",
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	507 `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	508 this.extent.waterlevel[1] - 16
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	509 )})`
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	510 );
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	511 };
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	512
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	513 // draw in main
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	514 this.diagram
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	515 .append("path")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	516 .datum([
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	517 { 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	518 { 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	519 ])
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	520 .attr("class", "now-line")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	521 .attr("d", nowLine);
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	522 this.diagram // label
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	523 .append("text")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	524 .text(this.$gettext("Now"))
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	525 .attr("class", "now-line-label")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	526 .attr("text-anchor", "middle")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	527 .call(nowLabel);
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	528
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	529 // draw in nav
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	530 this.navigation
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	531 .append("path")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	532 .datum([
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	533 { 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	534 { 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	535 ])
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	536 .attr("class", "now-line")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	537 .attr(
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	538 "d",
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	539 d3
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	540 .line()
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	541 .x(d => this.scale.x2(d.x))
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	542 .y(d => this.scale.y2(d.y))
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	543 );
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	544
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	545 return () => {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	546 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	547 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	548 };
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	549 },
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	550 drawAxes() {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	551 this.diagram
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	552 .append("g")
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	553 .attr("class", "axis--x")
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	554 .attr("transform", `translate(0, ${this.dimensions.mainHeight})`)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	555 .call(this.axes.x)
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	556 .selectAll(".tick text")
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	557 .attr("y", 15);
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	558 this.diagram // label
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	559 .append("text")
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	560 .text(this.$gettext("Waterlevel [cm]"))
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	561 .attr("text-anchor", "middle")
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	562 .attr(
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	563 "transform",
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	564 `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	565 );
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	566 this.diagram
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	567 .append("g")
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	568 .call(this.axes.y)
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	569 .selectAll(".tick text")
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	570 .attr("x", -25);
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	571
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	572 this.navigation
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	573 .append("g")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	574 .attr("class", "axis axis--x")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	575 .attr("transform", `translate(0, ${this.dimensions.navHeight})`)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	576 .call(this.axes.x2);
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	577
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	578 return () => {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	579 this.diagram
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	580 .select(".axis--x")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	581 .call(this.axes.x)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	582 .selectAll(".tick text")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	583 .attr("y", 15);
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	584 };
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	585 },
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	586 drawWaterlevelMinMaxAreaChart() {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	587 const areaChart = isNav =>
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	588 d3
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	589 .area()
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	590 .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	591 .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	592 .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	593
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	594 this.diagram
2791 2b79c0871138 client: spuc8: draw diagrams Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	595 .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	596 .datum(this.longtermWaterlevels)
2791 2b79c0871138 client: spuc8: draw diagrams Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	597 .attr("class", "area")
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	598 .attr("d", areaChart());
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	599
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	600 this.navigation
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	601 .append("path")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	602 .datum(this.longtermWaterlevels)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	603 .attr("class", "area")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	604 .attr("d", areaChart(true));
2791 2b79c0871138 client: spuc8: draw diagrams Markus Kottlaender <markus@intevation.de> parents: 2761 diff changeset	605
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	606 return () => {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	607 this.diagram.select(".area").attr("d", areaChart());
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	608 };
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	609 },
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	610 drawWaterlevelLineChart(type, data) {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	611 const lineChart = type =>
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	612 d3
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	613 .line()
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	614 .x(d => this.scale.x(d.date))
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	615 .y(d => this.scale.y(d[type]))
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	616 .curve(d3.curveLinear);
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	617 this.diagram
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	618 .append("path")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	619 .attr("class", "line " + type)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	620 .datum(data \|\| this.longtermWaterlevels)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	621 .attr("d", lineChart(type));
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	622
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	623 return () => {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	624 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	625 };
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	626 },
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	627 drawRefLines(refWaterLevels) {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	628 const refWaterlevelLine = d3
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	629 .line()
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	630 .x(d => this.scale.x(d.x))
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	631 .y(d => this.scale.y(d.y));
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	632
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	633 // HDC
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	634 this.diagram
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	635 .append("path")
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	636 .datum([
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	637 { x: 0, y: refWaterLevels.HDC },
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	638 { x: this.extent.date[1], y: refWaterLevels.HDC }
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	639 ])
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	640 .attr("class", "hdc-line")
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	641 .attr("d", refWaterlevelLine);
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	642 this.diagram // label
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	643 .append("text")
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	644 .text(`HDC (${refWaterLevels.HDC})`)
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	645 .attr("class", "ref-waterlevel-label")
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	646 .attr("x", 5)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	647 .attr("y", this.scale.y(refWaterLevels.HDC) - 3);
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	648 // LDC
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	649 this.diagram
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	650 .append("path")
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	651 .datum([
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	652 { x: 0, y: refWaterLevels.LDC },
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	653 { x: this.extent.date[1], y: refWaterLevels.LDC }
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	654 ])
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	655 .attr("class", "ldc-line")
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	656 .attr("d", refWaterlevelLine);
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	657 this.diagram // label
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	658 .append("text")
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	659 .text(`LDC (${refWaterLevels.LDC})`)
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	660 .attr("class", "ref-waterlevel-label")
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	661 .attr("x", 5)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	662 .attr("y", this.scale.y(refWaterLevels.LDC) - 3);
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	663 // MW
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	664 this.diagram
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	665 .append("path")
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	666 .datum([
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	667 { x: 0, y: refWaterLevels.MW },
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	668 { x: this.extent.date[1], y: refWaterLevels.MW }
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	669 ])
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	670 .attr("class", "mw-line")
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	671 .attr("d", refWaterlevelLine);
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	672 this.diagram // label
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	673 .append("text")
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	674 .text(`MW (${refWaterLevels.MW})`)
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	675 .attr("class", "ref-waterlevel-label")
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	676 .attr("x", 5)
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	677 .attr("y", this.scale.y(refWaterLevels.MW) - 3);
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 createZoom(updaters, eventRect) {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	680 const brush = d3
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	681 .brushX()
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	682 .handleSize(4)
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	683 .extent([[0, 0], [this.dimensions.width, this.dimensions.navHeight]]);
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	684
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	685 const zoom = d3
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	686 .zoom()
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	687 .scaleExtent([1, Infinity])
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	688 .translateExtent([
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	689 [0, 0],
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	690 [this.dimensions.width, this.dimensions.mainHeight]
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	691 ])
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	692 .extent([[0, 0], [this.dimensions.width, this.dimensions.mainHeight]]);
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	693
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	694 brush.on("brush end", () => {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	695 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	696 return; // ignore brush-by-zoom
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	697 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	698 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	699 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	700 this.setInlineStyles();
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	701 this.svg
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	702 .select(".zoom")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	703 .call(
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	704 zoom.transform,
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	705 d3.zoomIdentity
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	706 .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	707 .translate(-s[0], 0)
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 });
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	710
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	711 zoom.on("zoom", () => {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	712 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	713 return; // ignore zoom-by-brush
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	714 let t = d3.event.transform;
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	715 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	716 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	717 this.setInlineStyles();
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	718 this.navigation
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	719 .select(".brush")
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	720 .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	721 });
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	722 zoom.on("start", () => {
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	723 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	724 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	725 });
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	726
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	727 this.navigation
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	728 .append("g")
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	729 .attr("class", "brush")
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	730 .call(brush)
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	731 .call(brush.move, this.scale.x.range());
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	732
2815 12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	733 eventRect.call(zoom);
12f053763be2 client: spuc8: finished drawing charts, optimized code Markus Kottlaender <markus@intevation.de> parents: 2813 diff changeset	734 },
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	735 createTooltips(eventRect) {
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	736 // create clippable container for the dot
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	737 this.diagram
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	738 .append("g")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	739 .attr("class", "chart-dots")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	740 .append("circle")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	741 .attr("class", "chart-dot")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	742 .attr("r", 4);
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	743
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	744 // create container for the tooltip
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	745 const tooltip = this.diagram.append("g").attr("class", "chart-tooltip");
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	746 tooltip
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	747 .append("rect")
2842 37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	748 .attr("rx", "0.25em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	749 .attr("ry", "0.25em");
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	750
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	751 // create container for multiple text rows
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	752 const tooltipText = tooltip.append("text").attr("text-anchor", "middle");
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	753
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	754 // 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	755 // 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	756 const tooltipPadding = 10;
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	757 const diagramPadding = 5;
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	758
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	759 eventRect
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	760 .on("mouseover", () => {
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	761 this.diagram.select(".chart-dot").style("opacity", 1);
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	762 this.diagram.select(".chart-tooltip").style("opacity", 1);
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	763 })
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	764 .on("mouseout", () => {
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	765 this.diagram.select(".chart-dot").style("opacity", 0);
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	766 this.diagram.select(".chart-tooltip").style("opacity", 0);
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	767 })
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	768 .on("mousemove", () => {
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	769 // find data point closest to mouse
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	770 const x0 = this.scale.x.invert(
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	771 d3.mouse(document.querySelector(".zoom"))[0]
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	772 ),
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	773 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	774 d0 = this.longtermWaterlevels[i - 1],
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	775 d1 = this.longtermWaterlevels[i] \|\| d0,
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	776 d = x0 - d0.date > d1.date - x0 ? d1 : d0;
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	777
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	778 const coords = {
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	779 x: this.scale.x(d.date),
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	780 y: this.scale.y(d.median)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	781 };
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	782
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	783 // position the dot
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	784 this.diagram
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	785 .select(".chart-dot")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	786 .style("opacity", 1)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	787 .attr("transform", `translate(${coords.x}, ${coords.y})`);
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	788
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	789 // remove current texts
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	790 tooltipText.selectAll("tspan").remove();
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	791
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	792 // write date
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	793 tooltipText
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	794 .append("tspan")
2842 37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	795 .attr("dominant-baseline", "hanging")
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	796 .attr("text-anchor", "middle")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	797 .text(
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	798 d.date.toLocaleString([], {
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	799 year: "2-digit",
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	800 month: "2-digit",
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	801 day: "2-digit"
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	802 })
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	803 );
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	804
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	805 tooltipText
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	806 .append("tspan")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	807 .attr("x", 0)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	808 .attr("y", 0)
2842 37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	809 .attr("dy", "1.4em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	810 .attr("dominant-baseline", "hanging")
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	811 .attr("text-anchor", "middle")
2829 4a1211727d5f client: spuc8: implemented year controls Markus Kottlaender <markus@intevation.de> parents: 2824 diff changeset	812 .text(`Q75%: ${d.q75} cm`);
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	813 tooltipText
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	814 .append("tspan")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	815 .attr("x", 0)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	816 .attr("y", 0)
2842 37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	817 .attr("dy", "2.6em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	818 .attr("dominant-baseline", "hanging")
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	819 .attr("text-anchor", "middle")
2829 4a1211727d5f client: spuc8: implemented year controls Markus Kottlaender <markus@intevation.de> parents: 2824 diff changeset	820 .text(`Median: ${d.median} cm`);
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	821 tooltipText
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	822 .append("tspan")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	823 .attr("x", 0)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	824 .attr("y", 0)
2842 37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	825 .attr("dy", "3.8em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	826 .attr("dominant-baseline", "hanging")
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	827 .attr("text-anchor", "middle")
2829 4a1211727d5f client: spuc8: implemented year controls Markus Kottlaender <markus@intevation.de> parents: 2824 diff changeset	828 .text(`Q25%: ${d.q25} cm`);
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	829 tooltipText
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	830 .append("tspan")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	831 .attr("x", 0)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	832 .attr("y", 0)
2842 37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	833 .attr("dy", "5em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	834 .attr("dominant-baseline", "hanging")
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	835 .attr("text-anchor", "middle")
2829 4a1211727d5f client: spuc8: implemented year controls Markus Kottlaender <markus@intevation.de> parents: 2824 diff changeset	836 .text(`Max: ${d.max} cm`);
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	837 tooltipText
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	838 .append("tspan")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	839 .attr("x", 0)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	840 .attr("y", 0)
2842 37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	841 .attr("dy", "6.2em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	842 .attr("dominant-baseline", "hanging")
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	843 .attr("text-anchor", "middle")
2829 4a1211727d5f client: spuc8: implemented year controls Markus Kottlaender <markus@intevation.de> parents: 2824 diff changeset	844 .text(`Min: ${d.min} cm`);
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	845
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	846 const dYear = this.yearWaterlevels.find(
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	847 ywl => ywl.date.getTime() === d.date.getTime()
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	848 );
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	849 if (dYear) {
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	850 tooltipText
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	851 .append("tspan")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	852 .attr("x", 0)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	853 .attr("y", 0)
2842 37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	854 .attr("dy", "7.4em")
37c2a73ed001 client: diagrams: fixed tooltips in firefox Markus Kottlaender <markus@intevation.de> parents: 2839 diff changeset	855 .attr("dominant-baseline", "hanging")
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	856 .attr("text-anchor", "middle")
2829 4a1211727d5f client: spuc8: implemented year controls Markus Kottlaender <markus@intevation.de> parents: 2824 diff changeset	857 .text(`${this.yearCompare}: ${dYear.mean.toFixed(1)} cm`);
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	858 }
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	859
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	860 // get text dimensions
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	861 const textBBox = tooltipText.node().getBBox();
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	862
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	863 this.diagram
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	864 .selectAll(".chart-tooltip text tspan")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	865 .attr("x", textBBox.width / 2 + tooltipPadding)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	866 .attr("y", tooltipPadding);
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	867
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	868 // position and scale tooltip box
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	869 const xMax =
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	870 this.dimensions.width -
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	871 (textBBox.width + diagramPadding + tooltipPadding * 2);
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	872 const tooltipX = Math.max(
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	873 diagramPadding,
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	874 Math.min(coords.x - (textBBox.width + tooltipPadding * 2) / 2, xMax)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	875 );
2824 d7c4169516fa client: spuc7/8: further improved tooltip positioning Markus Kottlaender <markus@intevation.de> parents: 2822 diff changeset	876 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	877 if (coords.y < textBBox.height + tooltipPadding * 2) {
d7c4169516fa client: spuc7/8: further improved tooltip positioning Markus Kottlaender <markus@intevation.de> parents: 2822 diff changeset	878 tooltipY = coords.y + 10;
d7c4169516fa client: spuc7/8: further improved tooltip positioning Markus Kottlaender <markus@intevation.de> parents: 2822 diff changeset	879 }
d7c4169516fa client: spuc7/8: further improved tooltip positioning Markus Kottlaender <markus@intevation.de> parents: 2822 diff changeset	880
2822 f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	881 this.diagram
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	882 .select(".chart-tooltip")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	883 .style("opacity", 1)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	884 .attr("transform", `translate(${tooltipX}, ${tooltipY})`)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	885 .select("rect")
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	886 .attr("width", textBBox.width + tooltipPadding * 2)
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	887 .attr("height", textBBox.height + tooltipPadding * 2);
f2e4c39cdcfa client: spuc8: implemented tooltips Markus Kottlaender <markus@intevation.de> parents: 2815 diff changeset	888 });
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	889 }
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	890 },
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	891 created() {
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	892 window.addEventListener("resize", debounce(this.drawDiagram), 100);
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	893 },
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	894 mounted() {
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	895 this.drawDiagram();
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	896 },
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	897 updated() {
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	898 this.drawDiagram();
2986 7ee9a3ef90d4 client: remove resize event listener from diagrams after they are closed Markus Kottlaender <markus@intevation.de> parents: 2843 diff changeset	899 },
7ee9a3ef90d4 client: remove resize event listener from diagrams after they are closed Markus Kottlaender <markus@intevation.de> parents: 2843 diff changeset	900 destroyed() {
7ee9a3ef90d4 client: remove resize event listener from diagrams after they are closed Markus Kottlaender <markus@intevation.de> parents: 2843 diff changeset	901 window.addEventListener("resize", debounce(this.drawDiagram));
2761 71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	902 }
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	903 };
71e7237110ba client: spuc8: prepared diagram Markus Kottlaender <markus@intevation.de> parents: diff changeset	904 </script>

Mercurial > gemma

annotate client/src/components/gauge/HydrologicalConditions.vue @ 3059:6f5693bf7804