# HG changeset patch # User Thomas Junk # Date 1562832155 -7200 # Node ID 2e7f191bba27ce727220249be9e302ad4acb4203 # Parent 976c83b6f47929415411bdcb592e7af9d087444e available_fairwaydepth: factor out side-effects from diagram rendering diff -r 976c83b6f479 -r 2e7f191bba27 client/src/components/fairway/AvailableFairwayDepth.vue --- a/client/src/components/fairway/AvailableFairwayDepth.vue Thu Jul 11 09:18:59 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepth.vue Thu Jul 11 10:02:35 2019 +0200 @@ -96,9 +96,6 @@ scalePaddingLeft: 60, scalePaddingRight: 0, paddingTop: 25, - diagram: null, - yScale: null, - dimensions: null, pdf: { doc: null, width: null, @@ -243,21 +240,6 @@ featureName() { if (this.selectedFairwayAvailabilityFeature == null) return ""; return this.selectedFairwayAvailabilityFeature.properties.name; - }, - widthPerItem() { - return Math.min( - (this.dimensions.width - - this.scalePaddingLeft - - this.scalePaddingRight) / - this.fwData.length, - 180 - ); - }, - spaceBetween() { - return this.widthPerItem * 0.2; - }, - ldcOffset() { - return this.widthPerItem * 0.1; } }, methods: { @@ -368,19 +350,19 @@ this.$store.commit("application/paneSetup", "DEFAULT"); }, drawDiagram() { - this.dimensions = this.getDimensions({ + const dimensions = this.getDimensions({ main: { top: 0, right: 20, bottom: 75, left: 200 } }); - this.yScale = d3 + const yScale = d3 .scaleLinear() .domain(this.frequencyToRange) - .range([this.dimensions.mainHeight - 30, 0]); + .range([dimensions.mainHeight - 30, 0]); d3.select(".diagram-container svg").remove(); - this.generateDiagramContainer(); - this.drawScaleLabel(); - this.drawScale(); - this.drawBars(); - this.drawTooltip(); + const diagram = this.generateDiagramContainer(); + this.drawScaleLabel({ diagram, dimensions }); + this.drawScale({ diagram, dimensions, yScale }); + this.drawBars({ diagram, yScale, dimensions }); + this.drawTooltip(diagram); }, generateDiagramContainer() { const diagram = d3 @@ -388,36 +370,74 @@ .append("svg") .attr("width", "100%") .attr("height", "100%"); - this.diagram = diagram.append("g"); + return diagram.append("g"); }, - drawTooltip() { - this.diagram + drawTooltip(diagram) { + diagram .append("text") .text("") .attr("font-size", "0.8em") .attr("opacity", 0) .attr("id", "tooltip"); }, - drawBars() { - const everyBar = this.diagram + drawBars({ diagram, yScale, dimensions }) { + const widthPerItem = Math.min( + (dimensions.width - this.scalePaddingLeft - this.scalePaddingRight) / + this.fwData.length, + 180 + ); + const spaceBetween = widthPerItem * 0.2; + const ldcOffset = widthPerItem * 0.1; + const everyBar = diagram .selectAll("g.bars") .data(this.fwData) .enter() .append("g") .attr("class", "bars") .attr("transform", (d, i) => { - const dx = this.scalePaddingLeft + i * this.widthPerItem; + const dx = this.scalePaddingLeft + i * widthPerItem; return `translate(${dx})`; }); - this.drawSingleBars(everyBar); - this.drawLabelPerBar(everyBar); + this.drawSingleBars({ + everyBar, + yScale, + dimensions, + widthPerItem, + spaceBetween, + ldcOffset + }); + this.drawLabelPerBar({ everyBar, dimensions, widthPerItem }); }, - drawSingleBars(everyBar) { - this.drawLDC(everyBar); - this.drawHighestLevel(everyBar); - this.drawLowerLevels(everyBar); + drawSingleBars({ + everyBar, + yScale, + widthPerItem, + spaceBetween, + ldcOffset + }) { + this.drawLDC({ everyBar, yScale, widthPerItem, spaceBetween, ldcOffset }); + this.drawHighestLevel({ + everyBar, + yScale, + widthPerItem, + spaceBetween, + ldcOffset + }); + this.drawLowerLevels({ + everyBar, + yScale, + widthPerItem, + spaceBetween, + ldcOffset + }); }, - drawLowerLevels(everyBar) { + drawLowerLevels({ + everyBar, + yScale, + widthPerItem, + spaceBetween, + ldcOffset + }) { everyBar .selectAll("g.bars") .data(d => d.lowerLevels) @@ -446,25 +466,23 @@ }) .attr("y", d => { return ( - 2 * this.yScale(0) - - this.yScale(hoursInDays(d.translateY)) + - this.paddingTop + 2 * yScale(0) - yScale(hoursInDays(d.translateY)) + this.paddingTop ); }) .attr("height", d => { - return this.yScale(0) - this.yScale(hoursInDays(d.height)); + return yScale(0) - yScale(hoursInDays(d.height)); }) - .attr("x", this.ldcOffset + this.spaceBetween / 2) - .attr("width", this.widthPerItem - this.ldcOffset - this.spaceBetween) + .attr("x", ldcOffset + spaceBetween / 2) + .attr("width", widthPerItem - ldcOffset - spaceBetween) .attr("fill", (d, i) => { return this.$options.COLORS.REST[i]; }); }, - fnheight(name) { - return d => this.yScale(0) - this.yScale(hoursInDays(d[name])); + fnheight({ name, yScale }) { + return d => yScale(0) - yScale(hoursInDays(d[name])); }, - drawLDC(everyBar) { - const height = this.fnheight("ldc"); + drawLDC({ everyBar, yScale, widthPerItem, spaceBetween }) { + const height = this.fnheight({ name: "ldc", yScale }); everyBar .append("rect") .on("mouseover", function() { @@ -488,10 +506,10 @@ //d3.event.pageX gives coordinates relative to SVG //dy gives offset of svg on page }) - .attr("y", this.yScale(0)) + .attr("y", yScale(0)) .attr("height", height) - .attr("x", this.spaceBetween / 2) - .attr("width", this.widthPerItem - this.spaceBetween) + .attr("x", spaceBetween / 2) + .attr("width", widthPerItem - spaceBetween) .attr( "transform", d => `translate(0 ${this.paddingTop + -1 * height(d)})` @@ -499,8 +517,14 @@ .attr("fill", this.$options.COLORS.LDC) .attr("id", "ldc"); }, - drawHighestLevel(everyBar) { - const height = this.fnheight("highestLevel"); + drawHighestLevel({ + everyBar, + yScale, + widthPerItem, + spaceBetween, + ldcOffset + }) { + const height = this.fnheight({ name: "highestLevel", yScale }); everyBar .append("rect") .on("mouseover", function() { @@ -526,27 +550,27 @@ //d3.event.pageX gives coordinates relative to SVG //dy gives offset of svg on page }) - .attr("y", this.yScale(0)) + .attr("y", yScale(0)) .attr("height", height) - .attr("x", this.ldcOffset + this.spaceBetween / 2) - .attr("width", this.widthPerItem - this.ldcOffset - this.spaceBetween) + .attr("x", ldcOffset + spaceBetween / 2) + .attr("width", widthPerItem - ldcOffset - spaceBetween) .attr( "transform", d => `translate(0 ${this.paddingTop + -1 * height(d)})` ) .attr("fill", this.$options.COLORS.HIGHEST); }, - drawLabelPerBar(everyBar) { + drawLabelPerBar({ everyBar, dimensions, widthPerItem }) { everyBar .append("text") .text(d => d.label) - .attr("y", this.dimensions.mainHeight + this.paddingTop - 5) - .attr("x", this.widthPerItem / 2) + .attr("y", dimensions.mainHeight + this.paddingTop - 5) + .attr("x", widthPerItem / 2) .attr("text-anchor", "middle") .attr("font-size", "9"); }, - drawScaleLabel() { - this.diagram + drawScaleLabel({ diagram, dimensions }) { + diagram .append("text") .text(this.$options.LEGEND) .attr("text-anchor", "middle") @@ -555,31 +579,31 @@ .attr("dy", "20") .attr( "transform", - `translate(2, ${(this.dimensions.mainHeight + this.paddingTop) / + `translate(2, ${(dimensions.mainHeight + this.paddingTop) / 2}), rotate(-90)` ); }, - drawScale() { + drawScale({ diagram, dimensions, yScale }) { const yAxisLeft = d3 .axisLeft() .tickSizeInner( - this.dimensions.width - this.scalePaddingLeft - this.scalePaddingRight + dimensions.width - this.scalePaddingLeft - this.scalePaddingRight ) .tickSizeOuter(0) - .scale(this.yScale); + .scale(yScale); const yAxisRight = d3 .axisRight() .tickSizeInner( - this.dimensions.width - this.scalePaddingLeft - this.scalePaddingRight + dimensions.width - this.scalePaddingLeft - this.scalePaddingRight ) .tickSizeOuter(0) - .scale(this.yScale); + .scale(yScale); - this.diagram + diagram .append("g") .attr( "transform", - `translate(${this.dimensions.width - this.scalePaddingRight} ${ + `translate(${dimensions.width - this.scalePaddingRight} ${ this.paddingTop })` ) @@ -599,7 +623,7 @@ .filter(d => d === 0) .selectAll(".tick line") .attr("stroke", "#333"); - this.diagram + diagram .append("g") .attr( "transform", @@ -614,7 +638,7 @@ }) .selectAll(".tick line") .attr("stroke", "transparent"); - this.diagram.selectAll(".domain").attr("stroke", "black"); + diagram.selectAll(".domain").attr("stroke", "black"); } }, watch: {