Mercurial > gemma
changeset 3135:4c6b66c12486
wip
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 30 Apr 2019 15:32:57 +0200 |
parents | ab00165540fe |
children | e52ba854bfe8 |
files | client/src/components/fairway/AvailableFairwayDepth.vue |
diffstat | 1 files changed, 34 insertions(+), 12 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepth.vue Tue Apr 30 12:05:04 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepth.vue Tue Apr 30 15:32:57 2019 +0200 @@ -2,6 +2,23 @@ <div> <h1>Available Fairway Depth</h1> <UISpinnerOverlay v-if="loading" /> + <div class="d-flex flex-row ml-3"> + <div class="mr-3 ml-auto"> + <select class="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> + <div class="mr-auto"> + <label for="to" class="mr-3"><translate>to</translate></label + ><input /> + </div> + </div> <div class="diagram-container"></div> </div> </template> @@ -24,15 +41,20 @@ * Markus Kottländer <markus.kottlaender@intevation.de> */ import * as d3 from "d3"; +import app from "@/main"; export default { data() { return { loading: false, - colors: ["red", "green", "blue", "purple"] + colors: ["red", "green", "blue", "purple"], + fwData: null, + width: 1000, + height: 600 }; }, mounted() { + this.loadData(); this.drawDiagram(); }, computed: { @@ -41,9 +63,8 @@ } }, methods: { + loadData() {}, drawDiagram() { - const width = 1000; - const height = 600; const data = [ { month: "feb", values: [30, 20, 10, 0] }, { month: "mar", values: [25, 23, 0, 0] }, @@ -54,15 +75,15 @@ const yScale = d3 .scaleLinear() .domain([-30, 30]) - .range([height - 30, 0]); + .range([this.height - 30, 0]); const diagram = d3 .select(".diagram-container") .append("svg") - .attr("width", width) - .attr("height", height); + .attr("width", this.width) + .attr("height", this.height); this.drawBars({ diagram, data, yScale }); - this.drawLabel(diagram, height); + this.drawLabel(diagram, this.height); this.drawScale(diagram, yScale); }, drawBars({ diagram, data, yScale }) { @@ -99,15 +120,15 @@ }); }, drawLabel(diagram, height) { - const dy = height / 2; + const center = height / 2; diagram .append("text") - .text("sum of days / Summe der Tage") + .text(this.$options.LEGEND) .attr("text-anchor", "middle") .attr("x", 0) .attr("y", 0) .attr("dy", "1em") - .attr("transform", "translate(0, " + dy + "), rotate(-90)"); + .attr("transform", `translate(0, ${center}), rotate(-90)`); }, drawScale(diagram, yScale) { const paddingLeft = 50; @@ -115,9 +136,10 @@ const yAxis = d3.axisLeft().scale(yScale); diagram .append("g") - .attr("transform", "translate(" + paddingLeft + " " + paddingTop + ")") + .attr("transform", `translate(${paddingLeft} ${paddingTop})`) .call(yAxis); } - } + }, + LEGEND: app.$gettext("sum of days / Summe der Tage") }; </script>