Mercurial > gemma
changeset 786:1bee00039973
fairway profile WIP
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 26 Sep 2018 17:04:47 +0200 |
parents | 1d8ccdb532de |
children | 3d927e06b92c |
files | client/src/application/Main.vue client/src/fairway/Fairwayprofile.vue client/src/fairway/store.js |
diffstat | 3 files changed, 97 insertions(+), 12 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/application/Main.vue Wed Sep 26 16:38:02 2018 +0200 +++ b/client/src/application/Main.vue Wed Sep 26 17:04:47 2018 +0200 @@ -2,7 +2,7 @@ <div class="main d-flex flex-column"> <Maplayer :drawMode="drawMode" :split="isSplitscreen" :lat="6155376" :long="1819178" :zoom="11"></Maplayer> <div v-if="isSplitscreen" class="profile d-flex flex-row"> - <FairwayProfile :data="currentProfile" :height="height" :width="width" :xScale="xAxis" :yScaleLeft="yAxisLeft" :yScaleRight="yAxisRight" :margin="margins"></FairwayProfile> + <FairwayProfile :waterLevels="waterLevels" :data="currentProfile" :height="height" :width="width" :xScale="xAxis" :yScaleLeft="yAxisLeft" :yScaleRight="yAxisRight" :margin="margins" :totalLength="totalLength"></FairwayProfile> </div> </div> </template> @@ -48,7 +48,8 @@ "currentProfile", "minAlt", "maxAlt", - "totalLength" + "totalLength", + "waterLevels" ]), xAxis() { return [this.xScale.x, this.xScale.y]; @@ -91,7 +92,7 @@ const clientWidth = document.querySelector(".profile").clientWidth; if (!clientHeight || !clientWidth) return; this.height = document.querySelector(".profile").clientHeight - 25; - this.width = document.querySelector(".profile").clientWidth - 100; + this.width = document.querySelector(".profile").clientWidth - 200; } } };
--- a/client/src/fairway/Fairwayprofile.vue Wed Sep 26 16:38:02 2018 +0200 +++ b/client/src/fairway/Fairwayprofile.vue Wed Sep 26 17:04:47 2018 +0200 @@ -1,9 +1,26 @@ <template> - <div class="fairwayprofile"> + <div class="profiledisplay d-flex flex-row"> + <div class="fairwayprofile"> + </div> + <div class="waterlevelselection d-flex flex-column"> + <div class="form-check" v-for="level in waterLevels" :key="level.level"> + <input class="form-check-input" :id="level.year" v-model="selectedWaterLevel" :value="level.level" type="radio"> + <label class="form-check-label" :for="level.year">{{level.year}}</label> + </div> + </div> </div> </template> <style lang="scss"> +.waterlevelselection { + margin-top: $large-offset; + margin-right: $large-offset; +} + +.profiledisplay { + width: 100vw; +} + .fairwayprofile { background-color: white; margin-left: auto; @@ -16,7 +33,6 @@ <script> import * as d3 from "d3"; -const WATER_COLOR = "#005DFF"; const GROUND_COLOR = "#4A2F06"; export default { @@ -28,10 +44,22 @@ "xScale", "yScaleLeft", "yScaleRight", - "margin" + "margin", + "totalLength", + "waterLevels" ], + computed: { + waterColor() { + const result = this.waterLevels.find( + x => x.level === this.selectedWaterLevel + ); + return result.color; + } + }, data() { - return {}; + return { + selectedWaterLevel: this.waterLevels[0].level + }; }, watch: { data() { @@ -42,6 +70,12 @@ }, height() { this.drawDiagram(); + }, + waterLevels() { + this.drawDiagram(); + }, + selectedWaterLevel() { + this.drawDiagram(); } }, methods: { @@ -51,8 +85,8 @@ let svg = d3.select(chartDiv).append("svg"); svg.attr("width", this.width); svg.attr("height", this.height); - const width = this.width - this.margin.right - this.margin.left; - const height = this.height - this.margin.top - this.margin.bottom; + const width = this.width - this.margin.right - 1.5 * this.margin.left; + const height = this.height - this.margin.top - 2 * this.margin.bottom; const currentData = this.data; const { xScale, @@ -75,6 +109,46 @@ height, width }); + this.drawLabels({ + graph, + xScale, + yScaleLeft, + currentData, + height, + width + }); + }, + drawLabels({ graph, height }) { + graph + .append("text") + .attr("transform", "rotate(-90)") + .attr("y", 0 - this.margin.left) + .attr("x", -(this.height - this.margin.top - this.margin.bottom) / 2) + .attr("dy", "1em") + .attr("fill", "black") + .style("text-anchor", "middle") + .text("Height above Adria [m]"); + graph + .append("text") + .attr("transform", ["rotate(-90)"]) + .attr("y", this.width - 60) + .attr("x", -(this.height - this.margin.top - this.margin.bottom) / 2) + .attr("dy", "1em") + .attr("fill", "black") + .style("text-anchor", "middle") + .text("Depth [m]"); + graph + .append("text") + .attr("y", 0 - this.margin.left) + .attr("x", 0 - height / 4) + .attr("dy", "1em") + .attr("fill", "black") + .style("text-anchor", "middle") + .attr("transform", [ + "translate(" + this.width / 2 + "," + this.height + ")", + "rotate(0)" + ]) + .text("Width [m]"); }, generateCoordinates(svg, height, width) { let xScale = d3 @@ -125,9 +199,12 @@ }); graph .append("path") - .datum([{ x: 0, y: 0 }, { x: 300, y: 0 }]) - .attr("fill", WATER_COLOR) - .attr("stroke", WATER_COLOR) + .datum([ + { x: 0, y: this.selectedWaterLevel }, + { x: this.totalLength, y: this.selectedWaterLevel } + ]) + .attr("fill", this.waterColor) + .attr("stroke", this.waterColor) .attr("d", waterArea); }, drawProfile({ graph, xScale, yScaleLeft, currentData, height }) {
--- a/client/src/fairway/store.js Wed Sep 26 16:38:02 2018 +0200 +++ b/client/src/fairway/store.js Wed Sep 26 17:04:47 2018 +0200 @@ -8,10 +8,17 @@ minAlt: 0, maxAlt: 0, currentProfile: [], + waterLevels: [ + { year: "2016", level: 0, color: "#005DFF" }, + { year: "2017", level: -0.5, color: "#639CFF" } + ], startPoint: null, endPoint: null }, getters: { + waterLevels: state => { + return state.waterLevels; + }, currentProfile: state => { return state.currentProfile; },