Mercurial > gemma
changeset 3180:429e28295902
available_fairway_depth: implement reactivity
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 07 May 2019 14:06:23 +0200 |
parents | 6ddd3755350c |
children | c122a064fd5e |
files | client/src/components/fairway/AvailableFairwayDepth.vue client/src/lib/mixins.js |
diffstat | 2 files changed, 54 insertions(+), 27 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepth.vue Tue May 07 13:08:03 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepth.vue Tue May 07 14:06:23 2019 +0200 @@ -3,30 +3,27 @@ <h1>Available Fairway Depth</h1> <UISpinnerOverlay v-if="loading" /> <div class="d-flex flex-row"> - <div class="ml-3 mr-auto"> - <ul> - <li v-for="(entry, index) in legend" :key="index">{{ entry }}</li> - </ul> - </div> <div class="d-flex flex-column mr-auto"> <div class="d-flex flex-row"> - <div class="mr-3 ml-auto"> - <select class="mr-3"> + <div class="mr-3 my-auto ml-auto"> + <select class="form-control mr-3"> <option>Monthly</option> <option>Quaterly</option> <option>Yearly</option> </select> </div> - <div class="mr-3"> - <label for="from" class="mr-3"><translate>from</translate></label - ><input /> + <div class="d-flex flex-row mr-3"> + <label for="from" class="my-auto mr-3" + ><translate>from</translate></label + ><input class="form-control" type="date" /> </div> - <div class="mr-auto"> - <label for="to" class="mr-3"><translate>to</translate></label - ><input /> + <div class="d-flex flex-row mr-auto"> + <label for="to" class="my-auto mr-3" + ><translate>to</translate></label + ><input class="form-control" type="date" /> </div> </div> - <div class="diagram-container"></div> + <div :id="containerId" class="diagram-container"></div> </div> </div> </div> @@ -52,7 +49,9 @@ import * as d3 from "d3"; import app from "@/main"; import { displayError } from "@/lib/errors"; +import debounce from "debounce"; import { HTTP } from "@/lib/http"; +import { diagram } from "@/lib/mixins"; const MOCKDATA = `#label,# >= LDC [h],# < 200.00 [h],# >= 200.00 [h],# >= 230.00 [h],# >= 250.00 [h] 01-2019, 22.000,1.000, 4.000,6.000, 20.000 @@ -62,8 +61,10 @@ 05-2019, 30.000,0.000,0.000,0.000, 30.000`; export default { + mixins: [diagram], data() { return { + containerId: "availablefairwaydepth", loading: false, fwData: null, width: 1000, @@ -76,14 +77,14 @@ legend: "", diagram: null, yScale: null, - barsWidth: 60 + barsWidth: 60, + dimensions: null }; }, + created() { + window.addEventListener("resize", debounce(this.drawDiagram), 100); + }, mounted() { - this.yScale = d3 - .scaleLinear() - .domain([-33, 33]) - .range([this.height - 30, 0]); this.loadData(); }, computed: { @@ -137,6 +138,11 @@ }); }, drawDiagram() { + this.dimensions = this.getDimensions(); + this.yScale = d3 + .scaleLinear() + .domain([-33, 33]) + .range([this.dimensions.mainHeight - 30, 0]); d3.select(".diagram-container svg").remove(); this.generateDiagramContainer(); this.drawBars(); @@ -147,8 +153,8 @@ const diagram = d3 .select(".diagram-container") .append("svg") - .attr("width", this.width) - .attr("height", this.height); + .attr("width", this.dimensions.width) + .attr("height", this.dimensions.mainHeight); this.diagram = diagram .append("g") .attr("transform", `translate(0 ${this.paddingTop})`); @@ -216,7 +222,7 @@ .attr("y", this.yScale(0) + this.labelPaddingTop); }, drawScaleLabel() { - const center = this.height / 2; + const center = this.dimensions.mainHeight / 2; this.diagram .append("text") .text(this.$options.LEGEND)
--- a/client/src/lib/mixins.js Tue May 07 13:08:03 2019 +0200 +++ b/client/src/lib/mixins.js Tue May 07 14:06:23 2019 +0200 @@ -12,7 +12,7 @@ * Markus Kottländer <markus.kottlaender@intevation.de> */ import locale2 from "locale2"; -const sortTable = { +export const sortTable = { data() { return { sortColumn: "", @@ -29,7 +29,30 @@ } }; -const pane = { +export const diagram = { + methods: { + getDimensions() { + //dimensions and margins + const svgWidth = document.querySelector("#" + this.containerId) + .clientWidth; + const svgHeight = document.querySelector("#" + this.containerId) + .clientHeight; + const mainMargin = { top: 20, right: 20, bottom: 110, left: 80 }; + const navMargin = { + top: svgHeight - mainMargin.top - 65, + right: 20, + bottom: 30, + left: 80 + }; + const width = +svgWidth - mainMargin.left - mainMargin.right; + const mainHeight = +svgHeight - mainMargin.top - mainMargin.bottom; + const navHeight = +svgHeight - navMargin.top - navMargin.bottom; + return { width, mainHeight, navHeight, mainMargin, navMargin }; + } + } +}; + +export const pane = { computed: { paneId() { return this.$parent.pane.id; @@ -37,7 +60,7 @@ } }; -const pdfgen = { +export const pdfgen = { methods: { addText(position, offset, width, fontSize, color, text) { text = this.replacePlaceholders(text); @@ -171,5 +194,3 @@ } } }; - -export { sortTable, pane, pdfgen };