Mercurial > gemma
changeset 3876:0c6ef9e655fc improve-fwa-diagrams
client: available fairway depth diagrams: added second y-axis on the right
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Fri, 21 Jun 2019 08:51:24 +0200 |
parents | 30083005f13e |
children | d82b5e5868e3 |
files | client/src/components/fairway/AvailableFairwayDepth.vue client/src/components/fairway/AvailableFairwayDepthLNWL.vue |
diffstat | 2 files changed, 46 insertions(+), 9 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepth.vue Fri Jun 21 08:34:07 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepth.vue Fri Jun 21 08:51:24 2019 +0200 @@ -99,6 +99,7 @@ height: 600, labelPaddingBottom: 10, scalePaddingLeft: 50, + scalePaddingRight: 25, paddingTop: 10, diagram: null, yScale: null, @@ -250,7 +251,10 @@ }, widthPerItem() { return Math.min( - (this.dimensions.width - this.scalePaddingLeft) / this.fwData.length, + (this.dimensions.width - + this.scalePaddingLeft - + this.scalePaddingRight) / + this.fwData.length, 180 ); }, @@ -556,7 +560,7 @@ .attr("height", d => { return this.yScale(0) - this.yScale(hoursInDays(d.height)); }) - .attr("x", this.ldcOffset + this.spaceBetween) + .attr("x", this.ldcOffset + this.spaceBetween / 2) .attr("width", this.widthPerItem - this.ldcOffset - this.spaceBetween) .attr("fill", (d, i) => { return this.$options.COLORS.REST[i]; @@ -592,7 +596,7 @@ }) .attr("y", this.yScale(0)) .attr("height", height) - .attr("x", this.spaceBetween) + .attr("x", this.spaceBetween / 2) .attr("width", this.widthPerItem - this.spaceBetween) .attr("transform", d => `translate(0 ${-1 * height(d)})`) .attr("fill", this.$options.COLORS.LDC) @@ -627,7 +631,7 @@ }) .attr("y", this.yScale(0)) .attr("height", height) - .attr("x", this.ldcOffset + this.spaceBetween) + .attr("x", this.ldcOffset + this.spaceBetween / 2) .attr("width", this.widthPerItem - this.ldcOffset - this.spaceBetween) .attr("transform", d => `translate(0 ${-1 * height(d)})`) .attr("fill", this.$options.COLORS.HIGHEST); @@ -653,11 +657,26 @@ .attr("transform", `translate(0, ${center}), rotate(-90)`); }, drawScale() { - const yAxis = d3.axisLeft().scale(this.yScale); + const yAxisLeft = d3.axisLeft().scale(this.yScale); + const yAxisRight = d3.axisRight().scale(this.yScale); this.diagram .append("g") .attr("transform", `translate(${this.scalePaddingLeft})`) - .call(yAxis) + .call(yAxisLeft) + .selectAll(".tick text") + .attr("fill", "black") + .select(function() { + return this.parentNode; + }) + .selectAll(".tick line") + .attr("stroke", "black"); + this.diagram + .append("g") + .attr( + "transform", + `translate(${this.dimensions.width - this.scalePaddingRight})` + ) + .call(yAxisRight) .selectAll(".tick text") .attr("fill", "black") .select(function() {
--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue Fri Jun 21 08:34:07 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue Fri Jun 21 08:51:24 2019 +0200 @@ -94,6 +94,7 @@ loading: false, labelPaddingTop: 15, scalePaddingLeft: 50, + scalePaddingRight: 30, paddingTop: 10, diagram: null, yScale: null, @@ -237,7 +238,9 @@ }, widthPerItem() { return Math.min( - (this.dimensions.width - this.scalePaddingLeft) / + (this.dimensions.width - + this.scalePaddingLeft - + this.scalePaddingRight) / this.fwLNWLData.length, 180 ); @@ -628,11 +631,26 @@ .attr("transform", `translate(0, ${center}), rotate(-90)`); }, drawScale() { - const yAxis = d3.axisLeft().scale(this.yScale); + const yAxisLeft = d3.axisLeft().scale(this.yScale); + const yAxisRight = d3.axisRight().scale(this.yScale); this.diagram .append("g") .attr("transform", `translate(${this.scalePaddingLeft})`) - .call(yAxis) + .call(yAxisLeft) + .selectAll(".tick text") + .attr("fill", "black") + .select(function() { + return this.parentNode; + }) + .selectAll(".tick line") + .attr("stroke", "black"); + this.diagram + .append("g") + .attr( + "transform", + `translate(${this.dimensions.width - this.scalePaddingRight})` + ) + .call(yAxisRight) .selectAll(".tick text") .attr("fill", "black") .select(function() {