Mercurial > gemma
changeset 2839:162804509c3e
client: spuc7/8: added legends
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Wed, 27 Mar 2019 19:22:39 +0100 |
parents | 522ed5eb449c |
children | 503a73e9a755 |
files | client/src/components/DiagramLegend.vue client/src/components/gauge/HydrologicalConditions.vue client/src/components/gauge/Waterlevel.vue |
diffstat | 3 files changed, 81 insertions(+), 14 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/DiagramLegend.vue Wed Mar 27 19:15:25 2019 +0100 +++ b/client/src/components/DiagramLegend.vue Wed Mar 27 19:22:39 2019 +0100 @@ -1,10 +1,15 @@ <template> - <div :class="['border-right', { collapsed }]" id="diagram-legend"> + <div :class="['d-flex border-right', { collapsed }]" id="diagram-legend"> <span class="box-control toggle" @click="collapsed = !collapsed"> <font-awesome-icon icon="angle-left" fixed-width /> </span> - <div style="overflow: hidden"> - <slot /> + <div + class="d-flex align-items-center justify-content-center w-100" + style="overflow: hidden" + > + <div class="text-left"> + <slot /> + </div> </div> </div> </template> @@ -12,7 +17,7 @@ <style lang="sass" scoped> #diagram-legend position: relative - width: 280px + width: 200px .toggle margin-left: 0 position: absolute @@ -26,6 +31,14 @@ left: 0.25rem svg transform: rotateY(180deg) + .legend + margin: 10px 0 + span + vertical-align: middle + display: inline-block + width: 15px + height: 15px + border-radius: 50% </style> <script>
--- a/client/src/components/gauge/HydrologicalConditions.vue Wed Mar 27 19:15:25 2019 +0100 +++ b/client/src/components/gauge/HydrologicalConditions.vue Wed Mar 27 19:22:39 2019 +0100 @@ -1,9 +1,35 @@ <template> - <div - class="d-flex flex-fill justify-content-center align-items-center diagram-container" - > - <div v-if="!longtermWaterlevels.length"> - <translate>No data available.</translate> + <div class="d-flex flex-fill"> + <DiagramLegend> + <div class="legend"> + <span style="background-color: red"></span> + {{ yearCompare }} + </div> + <div class="legend"> + <span style="background-color: orange"></span> Q25% + </div> + <div class="legend"> + <span style="background-color: black"></span> Median + </div> + <div class="legend"> + <span style="background-color: purple"></span> Q75% + </div> + <div class="legend"><span style="background-color: red"></span> HDC</div> + <div class="legend"> + <span style="background-color: green"></span> LDC + </div> + <div class="legend"><span style="background-color: grey"></span> MW</div> + <div class="legend"> + <span style="background-color: lightsteelblue"></span> + Amplitude + </div> + </DiagramLegend> + <div + class="d-flex flex-fill justify-content-center align-items-center diagram-container" + > + <div v-if="!longtermWaterlevels.length"> + <translate>No data available.</translate> + </div> </div> </div> </template> @@ -111,6 +137,9 @@ import { startOfYear, endOfYear } from "date-fns"; export default { + components: { + DiagramLegend: () => import("@/components/DiagramLegend") + }, data() { return { svg: null,
--- a/client/src/components/gauge/Waterlevel.vue Wed Mar 27 19:15:25 2019 +0100 +++ b/client/src/components/gauge/Waterlevel.vue Wed Mar 27 19:22:39 2019 +0100 @@ -1,9 +1,31 @@ <template> - <div - class="d-flex flex-fill justify-content-center align-items-center diagram-container" - > - <div v-if="!waterlevels.length"> - <translate>No data available.</translate> + <div class="d-flex flex-fill"> + <DiagramLegend> + <div class="legend"> + <span style="background-color: steelblue"></span> Waterlevel + </div> + <div class="legend"> + <span + 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;" + ></span> + Prediction + </div> + <div class="legend"> + <span style="background-color: rgba(0, 255, 0, 0.1)"></span> Navigable + Range + </div> + <div class="legend"><span style="background-color: red"></span> HDC</div> + <div class="legend"> + <span style="background-color: green"></span> LDC + </div> + <div class="legend"><span style="background-color: grey"></span> MW</div> + </DiagramLegend> + <div + class="d-flex flex-fill justify-content-center align-items-center diagram-container" + > + <div v-if="!waterlevels.length"> + <translate>No data available.</translate> + </div> </div> </div> </template> @@ -132,6 +154,9 @@ const d3 = Object.assign(d3Base, { lineChunked }); export default { + components: { + DiagramLegend: () => import("@/components/DiagramLegend") + }, data() { return { svg: null,