Mercurial > gemma
changeset 646:4450f2ab41e0
refac: Fairwawprofile view adapted
1) Made view responsive to browser resize events
2) Factored out sample data into separate store component
| author | Thomas Junk <thomas.junk@intevation.de> |
|---|---|
| date | Thu, 13 Sep 2018 13:02:04 +0200 |
| parents | 794592cad75a |
| children | 620a65f11b33 |
| files | client/package.json client/src/application/Main.vue client/src/fairway/Fairwayprofile.vue client/src/fairway/store.js client/src/store.js client/yarn.lock |
| diffstat | 6 files changed, 150 insertions(+), 52 deletions(-) [+] |
line wrap: on
line diff
--- a/client/package.json Thu Sep 13 12:59:18 2018 +0200 +++ b/client/package.json Thu Sep 13 13:02:04 2018 +0200 @@ -16,6 +16,7 @@ "bootstrap": "^4.1.1", "cxlt-vue2-toastr": "^1.1.0", "d3": "^5.7.0", + "debounce": "^1.2.0", "font-awesome": "^4.7.0", "glob-all": "^3.1.0", "locale2": "^2.2.0",
--- a/client/src/application/Main.vue Thu Sep 13 12:59:18 2018 +0200 +++ b/client/src/application/Main.vue Thu Sep 13 13:02:04 2018 +0200 @@ -2,7 +2,7 @@ <div class="main d-flex flex-column"> <Maplayer :split="isSplitscreen" :lat="6155376" :long="1819178" :zoom="11"></Maplayer> <div v-if="isSplitscreen" class="profile d-flex flex-row"> - <FairwayProfile height="300" width="1024" :xScale="[0, 300]" :yScaleLeft="[191, 199]" :yScaleRight="[-6, 1]" :margin="{ top: 20, right: 40, bottom: 20, left: 40 }"></FairwayProfile> + <FairwayProfile :data="currentProfile" :height="height" :width="width" :xScale="xAxis" :yScaleLeft="yAxisLeft" :yScaleRight="yAxisRight" :margin="margins"></FairwayProfile> </div> </div> </template> @@ -18,6 +18,7 @@ import Maplayer from "../map/Maplayer"; import FairwayProfile from "../fairway/Fairwayprofile"; import { mapGetters } from "vuex"; +import debounce from "debounce"; export default { name: "mainview", @@ -25,8 +26,61 @@ Maplayer, FairwayProfile }, + data() { + return { + width: null, + height: null, + xScale: { + x: 0, + y: 300 + }, + yScaleLeft: { + lo: 191, + hi: 199 + }, + yScaleRight: { + lo: -6, + hi: 1 + }, + margin: { + top: 20, + right: 40, + bottom: 20, + left: 40 + } + }; + }, computed: { - ...mapGetters("application", ["isSplitscreen"]) + ...mapGetters("application", ["isSplitscreen"]), + ...mapGetters("fairwayprofile", ["currentProfile"]), + xAxis() { + return [this.xScale.x, this.xScale.y]; + }, + yAxisLeft() { + return [this.yScaleLeft.lo, this.yScaleLeft.hi]; + }, + yAxisRight() { + return [this.yScaleRight.lo, this.yScaleRight.hi]; + }, + margins() { + return this.margin; + } + }, + created() { + window.addEventListener("resize", debounce(this.scaleFairwayProfile), 100); + }, + updated() { + this.height = document.querySelector(".profile").clientHeight - 25; + this.width = document.querySelector(".profile").clientWidth - 100; + }, + destroyed() { + window.removeEventListener("resize", debounce(this.scaleFairwayProfile)); + }, + methods: { + scaleFairwayProfile() { + this.height = document.querySelector(".profile").clientHeight - 25; + this.width = document.querySelector(".profile").clientWidth - 100; + } } }; </script>
--- a/client/src/fairway/Fairwayprofile.vue Thu Sep 13 12:59:18 2018 +0200 +++ b/client/src/fairway/Fairwayprofile.vue Thu Sep 13 13:02:04 2018 +0200 @@ -1,8 +1,6 @@ <template> - <div class="fairwayprofile"> - <svg :width="width +'px'" :height="height +'px'"> - </svg> - </div> + <div class="fairwayprofile"> + </div> </template> <style lang="scss"> @@ -21,30 +19,59 @@ const WATER_COLOR = "#005DFF"; const GROUND_COLOR = "#4A2F06"; -const sampleData = [ - { x: 0, y: 1.0 }, - { x: 10, y: 1.0 }, - { x: 25, y: -2.0 }, - { x: 50, y: -4.5 }, - { x: 75, y: -4.0 }, - { x: 100, y: -3.0 }, - { x: 125, y: -4.0 }, - { x: 150, y: -5.0 }, - { x: 175, y: -4.0 }, - { x: 200, y: -3.0 }, - { x: 225, y: -3.5 }, - { x: 250, y: -3.0 }, - { x: 290, y: 1 }, - { x: 300, y: 1 } -]; - export default { name: "fairwayprofile", - props: ["width", "height", "xScale", "yScaleLeft", "yScaleRight", "margin"], + props: [ + "data", + "width", + "height", + "xScale", + "yScaleLeft", + "yScaleRight", + "margin" + ], data() { return {}; }, + watch: { + width() { + this.drawDiagram(); + }, + height() { + this.drawDiagram(); + } + }, methods: { + drawDiagram() { + const chartDiv = document.querySelector(".fairwayprofile"); + d3.select("svg").remove(); + 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 currentData = this.data; + const { xScale, yScaleRight, graph } = this.generateCoordinates( + svg, + height, + width + ); + this.drawWaterlevel({ + graph, + xScale, + yScaleRight, + height, + width + }); + this.drawProfile({ + graph, + xScale, + yScaleRight, + currentData, + height, + width + }); + }, generateCoordinates(svg, height, width) { let xScale = d3 .scaleLinear() @@ -99,7 +126,7 @@ .attr("stroke", WATER_COLOR) .attr("d", waterArea); }, - drawProfile({ graph, xScale, yScaleRight, sampleData, height }) { + drawProfile({ graph, xScale, yScaleRight, currentData, height }) { let profileLine = d3 .line() .x(d => { @@ -119,14 +146,14 @@ }); graph .append("path") - .datum(sampleData) + .datum(currentData) .attr("fill", GROUND_COLOR) .attr("stroke", GROUND_COLOR) .attr("stroke-width", 3) .attr("d", profileArea); graph .append("path") - .datum(sampleData) + .datum(currentData) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-linejoin", "round") @@ -136,30 +163,7 @@ } }, mounted() { - let svg = d3.select("svg"); - const width = this.width - this.margin.right - this.margin.left; - const height = this.height - this.margin.top - this.margin.bottom; - - const { xScale, yScaleRight, graph } = this.generateCoordinates( - svg, - height, - width - ); - this.drawWaterlevel({ - graph, - xScale, - yScaleRight, - height, - width - }); - this.drawProfile({ - graph, - xScale, - yScaleRight, - sampleData, - height, - width - }); + this.drawDiagram(); } }; </script>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/fairway/store.js Thu Sep 13 13:02:04 2018 +0200 @@ -0,0 +1,33 @@ +// import { HTTP } from "../lib/http"; + +const sampleData = [ + { x: 0, y: 1.0 }, + { x: 10, y: 1.0 }, + { x: 25, y: -2.0 }, + { x: 50, y: -4.5 }, + { x: 75, y: -4.0 }, + { x: 100, y: -3.0 }, + { x: 125, y: -4.0 }, + { x: 150, y: -5.0 }, + { x: 175, y: -4.0 }, + { x: 200, y: -3.0 }, + { x: 225, y: -3.5 }, + { x: 250, y: -3.0 }, + { x: 290, y: 1 }, + { x: 300, y: 1 } +]; + +const FairwayProfile = { + namespaced: true, + state: { + currentProfile: sampleData + }, + getters: { + currentProfile: state => { + return state.currentProfile; + } + }, + mutations: {} +}; + +export default FairwayProfile;
--- a/client/src/store.js Thu Sep 13 12:59:18 2018 +0200 +++ b/client/src/store.js Thu Sep 13 13:02:04 2018 +0200 @@ -4,6 +4,7 @@ import user from "./application/stores/user"; import usermanagement from "./usermanagement/store"; import mapstore from "./map/store"; +import FairwayProfile from "./fairway/store"; Vue.use(Vuex); @@ -12,6 +13,7 @@ application: Application, user: user, usermanagement: usermanagement, - mapstore: mapstore + mapstore: mapstore, + fairwayprofile: FairwayProfile } });
--- a/client/yarn.lock Thu Sep 13 12:59:18 2018 +0200 +++ b/client/yarn.lock Thu Sep 13 13:02:04 2018 +0200 @@ -2950,6 +2950,10 @@ version "1.0.2" resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d" +debounce@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131" + debug@2, debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.6, debug@^2.6.8, debug@^2.6.9: version "2.6.9" resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"