Mercurial > gemma

comparison client/src/components/gauge/Waterlevel.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 d7c4169516fa
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="!waterlevels.length"> 5 <span style="background-color: steelblue"></span> Waterlevel
6 <translate>No data available.</translate> 6 </div>
7 <div class="legend">
8 <span
9 style="width: 5px; height: 5px; background-color: rgba(70, 130, 180, 0.6); border: solid 5px rgba(70, 130, 180, 0.2); background-clip: padding-box; box-sizing: content-box;"
10 ></span>
11 Prediction
12 </div>
13 <div class="legend">
14 <span style="background-color: rgba(0, 255, 0, 0.1)"></span> Navigable
15 Range
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 </DiagramLegend>
23 <div
24 class="d-flex flex-fill justify-content-center align-items-center diagram-container"
25 >
26 <div v-if="!waterlevels.length">
27 <translate>No data available.</translate>
28 </div>
7 </div> 29 </div>
8 </div> 30 </div>
9 </template> 31 </template>
10 32
11 <style lang="sass" scoped> 33 <style lang="sass" scoped>
130 // https://www.giacomodebidda.com/how-to-import-d3-plugins-with-webpack/ 152 // https://www.giacomodebidda.com/how-to-import-d3-plugins-with-webpack/
131 // d3-line-chunked plugin: https://github.com/pbeshai/d3-line-chunked 153 // d3-line-chunked plugin: https://github.com/pbeshai/d3-line-chunked
132 const d3 = Object.assign(d3Base, { lineChunked }); 154 const d3 = Object.assign(d3Base, { lineChunked });
133 155
134 export default { 156 export default {
157 components: {
158 DiagramLegend: () => import("@/components/DiagramLegend")
159 },
135 data() { 160 data() {
136 return { 161 return {
137 svg: null, 162 svg: null,
138 diagram: null, 163 diagram: null,
139 navigation: null, 164 navigation: null,