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 );