Mercurial > gemma

changeset 3716:047a5e971ccd

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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;