Mercurial > gemma
changeset 3134:ab00165540fe
available_fairway_depths: Component made visible
At present there is development going on regarding panes, diagrams etc.
For development purposes, the component is temporarily available
under /fairwaydepth. Integration happens later.
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 30 Apr 2019 12:05:04 +0200 |
parents | 1a1ec4c98c98 |
children | 4c6b66c12486 |
files | client/src/components/fairway/AvailableFairwayDepth.vue client/src/router.js |
diffstat | 2 files changed, 18 insertions(+), 4 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepth.vue Mon Apr 29 18:16:51 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepth.vue Tue Apr 30 12:05:04 2019 +0200 @@ -2,6 +2,7 @@ <div> <h1>Available Fairway Depth</h1> <UISpinnerOverlay v-if="loading" /> + <div class="diagram-container"></div> </div> </template> @@ -27,9 +28,13 @@ export default { data() { return { - loading: false + loading: false, + colors: ["red", "green", "blue", "purple"] }; }, + mounted() { + this.drawDiagram(); + }, computed: { availability() { return this.plainAvailability; @@ -45,13 +50,15 @@ { month: "apr", values: [17, 18, 16, 13] } ]; + d3.select(".diagram-container svg").remove(); const yScale = d3 .scaleLinear() .domain([-30, 30]) .range([height - 30, 0]); const diagram = d3 - .select("svg") + .select(".diagram-container") + .append("svg") .attr("width", width) .attr("height", height); this.drawBars({ diagram, data, yScale }); @@ -71,7 +78,6 @@ return `translate(${paddingRight + i * 95} ${paddingTop})`; }); // bars per month - const colors = []; allBars .selectAll("rect") .data(d => d.values) @@ -89,7 +95,7 @@ }) .attr("width", 60) .attr("fill", (d, i) => { - return colors[i]; + return this.colors[i]; }); }, drawLabel(diagram, height) {
--- a/client/src/router.js Mon Apr 29 18:16:51 2019 +0200 +++ b/client/src/router.js Tue Apr 30 12:05:04 2019 +0200 @@ -170,6 +170,14 @@ } }, { + path: "/fairwaydepth", + name: "fairwaydepth", + component: () => import("./components/fairway/AvailableFairwayDepth"), + meta: { + requiresAuth: true + } + }, + { path: "*", component: () => import("./components/PageNotFound") }