Mercurial > gemma
changeset 3216:ee6a4e8af766
available_fairway_depth: legend POC
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 09 May 2019 11:56:11 +0200 |
parents | 3b36bb33f5b0 |
children | 4c254651d80b |
files | client/src/components/fairway/AvailableFairwayDepth.vue |
diffstat | 1 files changed, 14 insertions(+), 6 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepth.vue Thu May 09 11:31:10 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepth.vue Thu May 09 11:56:11 2019 +0200 @@ -3,6 +3,13 @@ <UIBoxHeader icon="chart-area" :title="title" :closeCallback="close" /> <UISpinnerOverlay v-if="loading" /> <div class="mt-3 d-flex flex-row my-auto"> + <div class="my-auto"> + <ul class="list-group"> + <li class="text-left list-item" v-for="entry in legend" :key="entry"> + {{ entry }} + </li> + </ul> + </div> <div :id="containerId" class="ml-auto diagram-container"></div> </div> </div> @@ -47,7 +54,6 @@ labelPaddingTop: 15, scalePaddingLeft: 50, paddingTop: 10, - legend: "", diagram: null, yScale: null, barsWidth: 60, @@ -66,7 +72,8 @@ "fwData", "from", "to", - "frequency" + "frequency", + "legend" ]), fromDate() { return this.from; @@ -158,7 +165,8 @@ .attr("height", height) .attr("width", this.barsWidth) .attr("transform", d => `translate(0 ${-1 * height(d)})`) - .attr("fill", this.$options.COLORS.LDC); + .attr("fill", this.$options.COLORS.LDC) + .attr("id", "ldc"); }, drawHighestLevel(everyBar) { const height = this.fnheight("highestLevel"); @@ -166,7 +174,7 @@ .append("rect") .attr("y", this.yScale(0)) .attr("height", height) - .attr("width", this.barsWidth) + .attr("width", this.barsWidth - 5) .attr("transform", d => `translate(0 ${-1 * height(d)})`) .attr("fill", this.$options.COLORS.HIGHEST); }, @@ -195,9 +203,9 @@ .call(yAxis); } }, - LEGEND: app.$gettext("sum of days / Summe der Tage"), + LEGEND: app.$gettext("Sum of days"), COLORS: { - LDC: "#59C6FF", + LDC: "#FF855E", HIGHEST: "#2D84B3", REST: ["#FF424F", "#FF737C", "#FF99A0"] }