Mercurial > gemma
changeset 3716:047a5e971ccd
client: available fairway depth diagram: made width of bar charts adjust to diagram width to prevent overflow
Downside: labels overlap, possible improvement: alternating positions
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 20 Jun 2019 15:02:39 +0200 |
parents | e1972355fcfb |
children | eab5e934c37d |
files | client/src/components/fairway/AvailableFairwayDepth.vue |
diffstat | 1 files changed, 22 insertions(+), 12 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepth.vue Thu Jun 20 13:47:54 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepth.vue Thu Jun 20 15:02:39 2019 +0200 @@ -97,16 +97,12 @@ loading: false, width: 1000, height: 600, - paddingRight: 100, - spaceBetween: 80, labelPaddingBottom: 10, scalePaddingLeft: 50, paddingTop: 10, diagram: null, yScale: null, - barsWidth: 60, dimensions: null, - ldcoffset: 3, pdf: { doc: null, width: null, @@ -251,6 +247,18 @@ featureName() { if (this.selectedFairwayAvailabilityFeature == null) return ""; return this.selectedFairwayAvailabilityFeature.properties.name; + }, + widthPerItem() { + return Math.min( + (this.dimensions.width - this.scalePaddingLeft) / this.fwData.length, + 180 + ); + }, + spaceBetween() { + return this.widthPerItem * 0.2; + }, + ldcOffset() { + return this.widthPerItem * 0.1; } }, methods: { @@ -504,7 +512,7 @@ .enter() .append("g") .attr("transform", (d, i) => { - const dx = this.paddingRight + i * this.spaceBetween; + const dx = this.scalePaddingLeft + i * this.widthPerItem; return `translate(${dx})`; }); this.drawSingleBars(everyBar); @@ -548,8 +556,8 @@ .attr("height", d => { return this.yScale(0) - this.yScale(hoursInDays(d.height)); }) - .attr("x", this.ldcoffset) - .attr("width", this.barsWidth - this.ldcoffset) + .attr("x", this.ldcOffset + this.spaceBetween) + .attr("width", this.widthPerItem - this.ldcOffset - this.spaceBetween) .attr("fill", (d, i) => { return this.$options.COLORS.REST[i]; }); @@ -584,8 +592,8 @@ }) .attr("y", this.yScale(0)) .attr("height", height) - .attr("x", -this.ldcoffset) - .attr("width", this.barsWidth - this.ldcoffset) + .attr("x", this.spaceBetween) + .attr("width", this.widthPerItem - this.spaceBetween) .attr("transform", d => `translate(0 ${-1 * height(d)})`) .attr("fill", this.$options.COLORS.LDC) .attr("id", "ldc"); @@ -618,9 +626,9 @@ //dy gives offset of svg on page }) .attr("y", this.yScale(0)) - .attr("x", this.ldcoffset) .attr("height", height) - .attr("width", this.barsWidth - this.ldcoffset) + .attr("x", this.ldcOffset + this.spaceBetween) + .attr("width", this.widthPerItem - this.ldcOffset - this.spaceBetween) .attr("transform", d => `translate(0 ${-1 * height(d)})`) .attr("fill", this.$options.COLORS.HIGHEST); }, @@ -628,7 +636,9 @@ everyBar .append("text") .text(d => d.label) - .attr("y", this.dimensions.mainHeight - this.labelPaddingBottom); + .attr("y", this.dimensions.mainHeight - this.labelPaddingBottom) + .attr("x", this.widthPerItem / 2) + .attr("text-anchor", "middle"); }, drawScaleLabel() { const center = this.dimensions.mainHeight / 2;