Mercurial > gemma
comparison client/src/components/gauge/Waterlevel.vue @ 2701:e622689d73bd
client: waterlevel diagram: use endpoint
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Mon, 18 Mar 2019 15:43:03 +0100 |
parents | 04b082a86d50 |
children | f393fabfdd35 |
comparison
equal
deleted
inserted
replaced
2700:58e2d95757ac | 2701:e622689d73bd |
---|---|
1 <template> | 1 <template> |
2 <div class="flex-fill diagram-container"></div> | 2 <div |
3 class="d-flex flex-fill justify-content-center align-items-center diagram-container" | |
4 > | |
5 <div v-if="!waterlevels.length"> | |
6 <translate>No data available.</translate> | |
7 </div> | |
8 </div> | |
3 </template> | 9 </template> |
4 | 10 |
5 <style lang="sass" scoped> | 11 <style lang="sass" scoped> |
6 .diagram-container | 12 .diagram-container |
7 /deep/ | 13 /deep/ |
103 this.drawDiagram(); | 109 this.drawDiagram(); |
104 } | 110 } |
105 }, | 111 }, |
106 methods: { | 112 methods: { |
107 drawDiagram() { | 113 drawDiagram() { |
108 if (!this.selectedGauge || !this.waterlevels.length) return; | |
109 | |
110 // remove old diagram | 114 // remove old diagram |
111 d3.select(".diagram-container svg").remove(); | 115 d3.select(".diagram-container svg").remove(); |
116 | |
117 if (!this.selectedGauge || !this.waterlevels.length) return; | |
112 | 118 |
113 // get HDC/LDC/MW of the gauge | 119 // get HDC/LDC/MW of the gauge |
114 let refWaterLevels = JSON.parse( | 120 let refWaterLevels = JSON.parse( |
115 this.selectedGauge.properties.reference_water_levels | 121 this.selectedGauge.properties.reference_water_levels |
116 ); | 122 ); |