Mercurial > gemma

comparison client/src/components/gauge/HydrologicalConditions.vue @ 2839:162804509c3e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: spuc7/8: added legends
author Markus Kottlaender <markus@intevation.de>
date Wed, 27 Mar 2019 19:22:39 +0100
parents 4a1211727d5f
children 37c2a73ed001
comparison
equal deleted inserted replaced
2838:522ed5eb449c 2839:162804509c3e
1 <template> 1 <template>
2 <div 2 <div class="d-flex flex-fill">
3 class="d-flex flex-fill justify-content-center align-items-center diagram-container" 3 <DiagramLegend>
4 > 4 <div class="legend">
5 <div v-if="!longtermWaterlevels.length"> 5 <span style="background-color: red"></span>
6 <translate>No data available.</translate> 6 {{ yearCompare }}
7 </div>
8 <div class="legend">
9 <span style="background-color: orange"></span> Q25%
10 </div>
11 <div class="legend">
12 <span style="background-color: black"></span> Median
13 </div>
14 <div class="legend">
15 <span style="background-color: purple"></span> Q75%
16 </div>
17 <div class="legend"><span style="background-color: red"></span> HDC</div>
18 <div class="legend">
19 <span style="background-color: green"></span> LDC
20 </div>
21 <div class="legend"><span style="background-color: grey"></span> MW</div>
22 <div class="legend">
23 <span style="background-color: lightsteelblue"></span>
24 Amplitude
25 </div>
26 </DiagramLegend>
27 <div
28 class="d-flex flex-fill justify-content-center align-items-center diagram-container"
29 >
30 <div v-if="!longtermWaterlevels.length">
31 <translate>No data available.</translate>
32 </div>
7 </div> 33 </div>
8 </div> 34 </div>
9 </template> 35 </template>
10 36
11 <style lang="sass" scoped> 37 <style lang="sass" scoped>
109 import * as d3 from "d3"; 135 import * as d3 from "d3";
110 import debounce from "debounce"; 136 import debounce from "debounce";
111 import { startOfYear, endOfYear } from "date-fns"; 137 import { startOfYear, endOfYear } from "date-fns";
112 138
113 export default { 139 export default {
140 components: {
141 DiagramLegend: () => import("@/components/DiagramLegend")
142 },
114 data() { 143 data() {
115 return { 144 return {
116 svg: null, 145 svg: null,
117 diagram: null, 146 diagram: null,
118 navigation: null, 147 navigation: null,