Mercurial > gemma
changeset 3916:c76bbd27f89c
client: AFDvsLNWL diagram: adjusted height to be same as other AFD diagram
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 11 Jul 2019 14:14:48 +0200 |
parents | f7f09f32d6e0 |
children | be0deb139518 |
files | client/src/components/fairway/AvailableFairwayDepthLNWL.vue |
diffstat | 1 files changed, 24 insertions(+), 17 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue Thu Jul 11 13:51:26 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue Thu Jul 11 14:14:48 2019 +0200 @@ -46,7 +46,7 @@ <div ref="diagramContainer" :id="containerId" - class="mx-auto my-auto diagram-container" + class="diagram-container flex-fill" ></div> </div> </div> @@ -90,10 +90,9 @@ containerId: "availablefairwaydepthlnwl", resizeListenerFunction: null, loading: false, - labelPaddingTop: 15, - scalePaddingLeft: 50, - scalePaddingRight: 30, - paddingTop: 10, + scalePaddingLeft: 60, + scalePaddingRight: 0, + paddingTop: 25, pdf: { doc: null, width: null, @@ -345,7 +344,7 @@ this.$store.commit("application/paneSetup", "DEFAULT"); }, getDimensions({ svgHeight, svgWidth }) { - const mainMargin = { top: 20, right: 20, bottom: 110, left: 200 }; + const mainMargin = { top: 0, right: 20, bottom: 75, left: 200 }; const navMargin = { top: svgHeight - mainMargin.top - 65, right: 20, @@ -380,11 +379,9 @@ let diagram = d3 .select(element) .append("svg") - .attr("width", dimensions.width) - .attr("height", dimensions.mainHeight); - diagram = diagram - .append("g") - .attr("transform", `translate(0 ${this.paddingTop})`); + .attr("width", "100%") + .attr("height", "100%"); + diagram = diagram.append("g"); const yScale = d3 .scaleLinear() .domain([0, 100]) @@ -438,7 +435,7 @@ "transform", `translate(${this.scalePaddingLeft + widthPerItem * i + - widthPerItem / 2} ${dimensions.mainHeight - 15})` + widthPerItem / 2} ${dimensions.mainHeight + this.paddingTop - 5})` ); }, drawAFD( @@ -499,6 +496,7 @@ return yScale(data.above + data.between + d); } }) + .attr("transform", `translate(0 ${this.paddingTop})`) .attr("width", afdWidth) .attr("fill", (d, i) => { return this.$options.AFDCOLORS[i]; @@ -542,22 +540,26 @@ .attr("y", d => { return yScale(d); }) + .attr("transform", `translate(0 ${this.paddingTop})`) .attr("width", ldcWidth) .attr("fill", () => { return this.$options.LWNLCOLORS.LDC; }); }, drawScaleLabel({ diagram, dimensions }) { - const center = dimensions.mainHeight / 2; diagram .append("text") .text(this.$options.LEGEND) .attr("text-anchor", "middle") .attr("x", 0) .attr("y", 0) - .attr("dy", "10") + .attr("dy", "20") // translate a few mm to the right to allow for slightly higher letters - .attr("transform", `translate(2, ${center}), rotate(-90)`); + .attr( + "transform", + `translate(2, ${(dimensions.mainHeight + this.paddingTop) / + 2}), rotate(-90)` + ); }, drawScale({ diagram, dimensions, yScale }) { const yAxisLeft = d3 @@ -579,7 +581,9 @@ .append("g") .attr( "transform", - `translate(${dimensions.width - this.scalePaddingRight})` + `translate(${dimensions.width - this.scalePaddingRight} ${ + this.paddingTop + })` ) .call(yAxisLeft) .selectAll(".tick text") @@ -600,7 +604,10 @@ .attr("stroke", "#333"); diagram .append("g") - .attr("transform", `translate(${this.scalePaddingLeft})`) + .attr( + "transform", + `translate(${this.scalePaddingLeft} ${this.paddingTop})` + ) .call(yAxisRight) .selectAll(".tick text") .attr("fill", "black")