Mercurial > gemma
changeset 2854:1b5acce6120d
client: added legend to cross profile diagram
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 28 Mar 2019 17:19:07 +0100 |
parents | adf355aaef57 |
children | 8a8a929182f9 |
files | client/src/components/fairway/Fairwayprofile.vue |
diffstat | 1 files changed, 38 insertions(+), 17 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/Fairwayprofile.vue Thu Mar 28 17:18:01 2019 +0100 +++ b/client/src/components/fairway/Fairwayprofile.vue Thu Mar 28 17:19:07 2019 +0100 @@ -1,5 +1,25 @@ <template> - <div class="fairwayprofile m-3 mt-0 bg-white flex-grow-1"></div> + <div class="d-flex flex-fill"> + <DiagramLegend> + <div class="legend"> + <span style="background-color: #5995ff"></span> Water + </div> + <div class="legend"> + <span style="background-color: #1f4fff"></span> Fairway + </div> + <div class="legend"> + <span style="background-color: #4a2f06"></span> + Ground + </div> + </DiagramLegend> + <div + class="d-flex flex-fill justify-content-center align-items-center diagram-container" + > + <div v-if="!fairwayData"> + <translate>No data available.</translate> + </div> + </div> + </div> </template> <script> @@ -22,9 +42,13 @@ import debounce from "debounce"; const GROUND_COLOR = "#4A2F06"; +const WATER_COLOR = "#005DFF"; export default { name: "fairwayprofile", + components: { + DiagramLegend: () => import("@/components/DiagramLegend") + }, data() { return { coordinatesInput: "", @@ -74,9 +98,6 @@ return []; return this.currentProfile[this.additionalSurvey.date_info].points; }, - waterColor() { - return "#005DFF"; - }, xScale() { return [0, this.totalLength]; }, @@ -133,12 +154,11 @@ }, drawDiagram() { this.coordinatesSelect = null; - const chartDiv = document.querySelector(".fairwayprofile"); - d3.select(".fairwayprofile svg").remove(); + d3.select(".diagram-container svg").remove(); this.scaleFairwayProfile(); - let svg = d3.select(chartDiv).append("svg"); - svg.attr("width", this.width); - svg.attr("height", this.height); + let svg = d3.select(".diagram-container").append("svg"); + svg.attr("width", "100%"); + svg.attr("height", "100%"); 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.currentData; @@ -206,7 +226,7 @@ graph .append("text") .attr("transform", ["rotate(-90)"]) - .attr("y", this.width - 60) + .attr("y", this.width - 70) .attr("x", -(this.height - this.margin.top - this.margin.bottom) / 2) .attr("dy", "1em") .attr("fill", "black") @@ -214,8 +234,8 @@ .text("Depth [m]"); graph .append("text") - .attr("y", 0 - this.margin.left) - .attr("x", 0 - height / 4) + .attr("y", -50) + .attr("x", -(height / 4)) .attr("dy", "1em") .attr("fill", "black") .style("text-anchor", "middle") @@ -270,8 +290,8 @@ .append("path") .datum([{ x: 0, y: 0 }, { x: this.totalLength, y: 0 }]) .attr("fill-opacity", 0.65) - .attr("fill", this.waterColor) - .attr("stroke", this.waterColor) + .attr("fill", WATER_COLOR) + .attr("stroke", WATER_COLOR) .attr("d", waterArea); }, drawProfile({ @@ -325,10 +345,11 @@ } }, scaleFairwayProfile() { - if (!document.querySelector(".fairwayprofile")) return; - const clientHeight = document.querySelector(".fairwayprofile") + if (!document.querySelector(".diagram-container")) return; + const clientHeight = document.querySelector(".diagram-container") .clientHeight; - const clientWidth = document.querySelector(".fairwayprofile").clientWidth; + const clientWidth = document.querySelector(".diagram-container") + .clientWidth; if (!clientHeight || !clientWidth) return; this.height = clientHeight; this.width = clientWidth;