Merge pull request #126 from ONSvisual/122-small-multiples-only-appen…

…d-x-axis-label-to-the-rightmost-chart Limiting occurrences of x-axis labels
ONSvisual · Sep 1, 2023 · 8e9e945 · 8e9e945
2 parents 5928387 + 7f313e2
commit 8e9e945
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 37 deletions.
diff --git a/area-stacked-sm/script.js b/area-stacked-sm/script.js
@@ -191,6 +191,7 @@ function drawGraphic(seriesName, graphic_data, chartIndex) {
 		.text(seriesName);
 
 	// This does the x-axis label
+	if (chartIndex % chartsPerRow === chartsPerRow-1) {
 	svg
 		.append('g')
 		.attr('transform', `translate(0, ${height})`)
@@ -200,6 +201,7 @@ function drawGraphic(seriesName, graphic_data, chartIndex) {
 		.attr('class', 'axis--label')
 		.text(config.essential.xAxisLabel)
 		.attr('text-anchor', 'end');
+	}
 
 	//create link to source
 	d3.select('#source').text('Source: ' + config.essential.sourceText);

diff --git a/bar-chart-horizontal-sm-colour/script.js b/bar-chart-horizontal-sm-colour/script.js
@@ -190,15 +190,18 @@ function drawGraphic(seriesName, graphic_data, chartIndex) {
 
   console.log(colorsArray)
 
-  svg
-    .append("g")
-    .attr("transform", "translate(0," + height + ")")
-    .append("text")
-    .attr("x", chart_width)
-    .attr("y", 35)
-    .attr("class", "axis--label")
-    .text(config.essential.xAxisLabel)
-    .attr("text-anchor", "end");
+	// This does the x-axis label
+	if (chartIndex % chartsPerRow === chartsPerRow-1) {
+    svg
+      .append('g')
+      .attr('transform', `translate(0, ${height})`)
+      .append('text')
+      .attr('x', chart_width)
+      .attr('y', 35)
+      .attr('class', 'axis--label')
+      .text(config.essential.xAxisLabel)
+      .attr('text-anchor', 'end');
+    }
 
   //create link to source
   d3.select("#source").text("Source: " + config.essential.sourceText);

diff --git a/bar-chart-horizontal-sm/script.js b/bar-chart-horizontal-sm/script.js
@@ -171,16 +171,18 @@ function drawGraphic() {
 			.attr('text-anchor', 'start')
 			.call(wrap, chart_width);
 
-		// This does the x-axis label
+	// This does the x-axis label
+	if (chartIndex % chartsPerRow === chartsPerRow-1) {
 		svg
 			.append('g')
-			.attr('transform', 'translate(0,' + height + ')')
+			.attr('transform', `translate(0, ${height})`)
 			.append('text')
 			.attr('x', chart_width)
 			.attr('y', 35)
 			.attr('class', 'axis--label')
 			.text(config.essential.xAxisLabel)
 			.attr('text-anchor', 'end');
+		}
 	}
 
 	// Draw the charts for each small multiple

diff --git a/bar-chart-horizontal-stacked-sm/config.js b/bar-chart-horizontal-stacked-sm/config.js
@@ -34,13 +34,13 @@ config = {
 		},
 		"margin": {
 			"sm": {
-				"top": 15,
+				"top": 30,
 				"right": 10,
 				"bottom": 50,
 				"left": 150
 			},
 			"md": {
-				"top": 15,
+				"top": 30,
 				"right": 20,
 				"bottom": 50,
 				"left": 20

diff --git a/bar-chart-horizontal-stacked-sm/script.js b/bar-chart-horizontal-stacked-sm/script.js
@@ -230,16 +230,17 @@ function drawGraphic(seriesName, graphic_data, chartIndex) {
 		.attr('height', y.bandwidth());
 
 	// This does the x-axis label
-
-	svg
-		.append('g')
-		.attr('transform', 'translate(0,' + height + ')')
-		.append('text')
-		.attr('x', chart_width)
-		.attr('y', 35)
-		.attr('class', 'axis--label')
-		.text(config.essential.xAxisLabel)
-		.attr('text-anchor', 'end');
+	if (chartIndex % chartsPerRow === chartsPerRow-1) {
+		svg
+		  .append('g')
+		  .attr('transform', `translate(0, ${height})`)
+		  .append('text')
+		  .attr('x', chart_width)
+		  .attr('y', 35)
+		  .attr('class', 'axis--label')
+		  .text(config.essential.xAxisLabel)
+		  .attr('text-anchor', 'end');
+		}
 
 	//create link to source
 	d3.select('#source').text('Source: ' + config.essential.sourceText);

diff --git a/bar-chart-horizontal-with-reference-sm/script.js b/bar-chart-horizontal-with-reference-sm/script.js
@@ -209,16 +209,18 @@ function drawGraphic() {
 			.attr('text-anchor', 'start')
 			.call(wrap, chart_width);
 
-		// This does the x-axis label
+	// This does the x-axis label
+	if (chartIndex % chartsPerRow === chartsPerRow-1) {
 		svg
-			.append('g')
-			.attr('transform', 'translate(0,' + height + ')')
-			.append('text')
-			.attr('x', chart_width)
-			.attr('y', 35)
-			.attr('class', 'axis--label')
-			.text(config.essential.xAxisLabel)
-			.attr('text-anchor', 'end');
+		  .append('g')
+		  .attr('transform', `translate(0, ${height})`)
+		  .append('text')
+		  .attr('x', chart_width)
+		  .attr('y', 35)
+		  .attr('class', 'axis--label')
+		  .text(config.essential.xAxisLabel)
+		  .attr('text-anchor', 'end');
+		}
 	}
 
 	// Draw the charts for each small multiple

diff --git a/dot-plot-with-ci-sm/script.js b/dot-plot-with-ci-sm/script.js
@@ -92,10 +92,10 @@ legenditem
 
     // both of these are need to be looked at.
 
-  if(config.essential.xDomain=="auto"){
+  if(config.essential.yDomain=="auto"){
     y.domain([0, d3.max(graphic_data,function(d){return d.yvalue})]);
   }else{
-    y.domain(config.essential.xDomain)
+    y.domain(config.essential.yDomain)
   }
 
   svg

diff --git a/scatter-plot-sm/script.js b/scatter-plot-sm/script.js
@@ -96,10 +96,10 @@ legenditem
   }
 
 
-  if(config.essential.xDomain=="auto"){
+  if(config.essential.yDomain=="auto"){
     y.domain([0, d3.max(graphic_data,function(d){return d.yvalue})]);
   }else{
-    y.domain(config.essential.xDomain)
+    y.domain(config.essential.yDomain)
   }
 
   svg
@@ -147,7 +147,8 @@ svg
     .attr('x',chart_width)
     .attr('y',40)
     .attr('class','axis--label')
-    .text(config.essential.xAxisLabel)
+    .text((d,i) => i%chartEvery == chartEvery-1 ?
+      config.essential.xAxisLabel : "")
     .attr('text-anchor','end');
 
 // This does the y-axis label