Merge pull request #262 from ONSvisual/220-bar-chart-x-axis-tick-form…

…at-should-be-set-from-the-config All axis tick formats now read from configs
ONSvisual · Oct 10, 2024 · d859cc6 · d859cc6
2 parents f118d2a + 2f87013
commit d859cc6
Show file tree

Hide file tree

Showing 20 changed files with 31 additions and 16 deletions.
diff --git a/area-stacked/config.js b/area-stacked/config.js
@@ -18,6 +18,7 @@ config = {
 			"md": "%Y",
 			"lg": "%Y"
 		},
+		"yAxisTickFormat": ".0%",
 		"dateFormat": "%Y",
 		"xAxisLabel": "x axis label",
 		"yAxisLabel": "y axis label",

diff --git a/area-stacked/script.js b/area-stacked/script.js
@@ -130,7 +130,8 @@ function drawGraphic() {
 	svg
 		.append('g')
 		.attr('class', 'y axis numeric')
-		.call(d3.axisLeft(y).tickFormat(d3.format('.0%')));
+		.call(d3.axisLeft(y)
+			.tickFormat(d3.format(config.essential.yAxisTickFormat)));
 
 	//This does the x-axis label
 	addAxisLabel({

diff --git a/comet-clustered/config.js b/comet-clustered/config.js
@@ -11,6 +11,7 @@ config = {
 		"accessibleSummary":
 			"The chart canvas is hidden from screen readers. The main message is summarised by the chart title and the data behind the chart is available to download below.",
 		"numberFormat": ".1f",
+		"xAxisNumberFormat": ".0f",
 		"numberSuffix": "",
 		"xAxisLabel": "£ billion",
 		// "xDomain": "auto",

diff --git a/comet-clustered/script.js b/comet-clustered/script.js
@@ -68,7 +68,9 @@ function drawGraphic() {
 	});
 
 	//set up xAxis generator
-	let xAxis = d3.axisBottom(x).ticks(config.optional.xAxisTicks[size]);
+	let xAxis = d3.axisBottom(x)
+		.ticks(config.optional.xAxisTicks[size])
+		.tickFormat(d3.format(config.essential.xAxisNumberFormat));
 
 	let divs = graphic.selectAll('div.categoryLabels').data(groups).join('div');
 

diff --git a/comet-plot/config.js b/comet-plot/config.js
@@ -8,6 +8,7 @@ config = {
 		"accessibleSummary":
 			"Here is the screenreader text describing the chart.",
 		"numberFormat": ".0f",
+		"xAxisNumberFormat": ".0f",
 		"xAxisLabel": "x axis label",
 		"xDomain": [0, 100],
 		// either auto or a custom domain as an array e.g [0,100]

diff --git a/comet-plot/script.js b/comet-plot/script.js
@@ -58,7 +58,9 @@ function drawGraphic() {
 	});
 
 	//set up xAxis generator
-	let xAxis = d3.axisBottom(x).ticks(config.optional.xAxisTicks[size]);
+	let xAxis = d3.axisBottom(x)
+		.ticks(config.optional.xAxisTicks[size])
+		.tickFormat(d3.format(config.essential.xAxisNumberFormat));
 
 	divs = graphic.selectAll('div.categoryLabels').data(groups).join('div');
 

diff --git a/dot-plot-with-ci-sm/fallback.png b/dot-plot-with-ci-sm/fallback.png
diff --git a/dot-plot/config.js b/dot-plot/config.js
@@ -5,7 +5,8 @@ config = {
 		"colour_palette": ["#A09FA0", "#206095"],
 		"sourceText": "Office for National Statistics",
 		"accessibleSummary":
-			"CHere is the screenreader text describing the chart.",
+			"Here is the screenreader text describing the chart.",
+		"xAxisNumberFormat": ".0f",
 		"xAxisLabel": "x axis label",
 		"xDomain": "auto"
 		// either auto or a custom domain as an array e.g [0,100]

diff --git a/dot-plot/script.js b/dot-plot/script.js
@@ -31,7 +31,8 @@ function drawGraphic() {
 	let xAxis = d3
 		.axisBottom(x)
 		.tickSize(-height)
-		.ticks(config.optional.xAxisTicks[size]);
+		.ticks(config.optional.xAxisTicks[size])
+		.tickFormat(d3.format(config.essential.xAxisNumberFormat));
 
 	// Set up the legend
 	let legenditem = d3

diff --git a/population-pyramid-static-with-comparison/config.js b/population-pyramid-static-with-comparison/config.js
@@ -11,6 +11,7 @@ config = {
 		// this is the lighter palette for reference lines ["#9A86E9", "#3fb0b3"]
 		"comparison_colour_palette": ["#5c5185", "#306970"],
 		"legend": ["Area name", "England and Wales"],
+		"xAxisNumberFormat": ".1%",
 		"xAxisLabel": "Percentage",
 		"yAxisLabel": "Age"
 	},

diff --git a/population-pyramid-static-with-comparison/script.js b/population-pyramid-static-with-comparison/script.js
@@ -138,7 +138,7 @@ function drawGraphic() {
 		.call(
 			d3
 				.axisBottom(xLeft)
-				.tickFormat(d3.format('.1%'))
+				.tickFormat(d3.format(config.essential.xAxisNumberFormat))
 				.ticks(config.optional.xAxisTicks[size])
 				.tickSize(-height)
 		)
@@ -157,7 +157,7 @@ function drawGraphic() {
 		.call(
 			d3
 				.axisBottom(xRight)
-				.tickFormat(d3.format('.1%'))
+				.tickFormat(d3.format(config.essential.xAxisNumberFormat))
 				.ticks(config.optional.xAxisTicks[size])
 				.tickSize(-height)
 		)

diff --git a/population-pyramid-static/config.js b/population-pyramid-static/config.js
@@ -9,6 +9,7 @@ config = {
 		"colour_palette": ["#6749A6", "#2EA1A4"],
 		// this is the darker palette when there are no comparison lines  ["#6749A6","#2EA1A4"]
 		"legend": ["Variable name"],
+		"xAxisNumberFormat": ".1%",
 		"xAxisLabel": "Percentage",
 		"yAxisLabel": "Age"
 	},

diff --git a/population-pyramid-static/script.js b/population-pyramid-static/script.js
@@ -100,7 +100,7 @@ function drawGraphic() {
 		.call(
 			d3
 				.axisBottom(xLeft)
-				.tickFormat(d3.format('.1%'))
+				.tickFormat(d3.format(config.essential.xAxisNumberFormat))
 				.ticks(config.optional.xAxisTicks[size])
 				.tickSize(-height)
 		)
@@ -119,7 +119,7 @@ function drawGraphic() {
 		.call(
 			d3
 				.axisBottom(xRight)
-				.tickFormat(d3.format('.1%'))
+				.tickFormat(d3.format(config.essential.xAxisNumberFormat))
 				.ticks(config.optional.xAxisTicks[size])
 				.tickSize(-height)
 		)

diff --git a/population-pyramid-with-comparison-toggle/config.js b/population-pyramid-with-comparison-toggle/config.js
@@ -13,6 +13,7 @@ config = {
 		// this is the lighter palette for reference lines ["#9A86E9", "#3fb0b3"]
 		"comparison_colour_palette": ["#5c5185", "#306970"],
 		"legend": ["Area name", "Selected comparison"],
+		"xAxisNumberFormat": ".1%",
 		"xAxisLabel": "Percentage",
 		"yAxisLabel": "Age"
 	},

diff --git a/population-pyramid-with-comparison-toggle/script.js b/population-pyramid-with-comparison-toggle/script.js
@@ -224,7 +224,7 @@ function drawGraphic() {
 		.call(
 			d3
 				.axisBottom(xLeft)
-				.tickFormat(d3.format('.1%'))
+				.tickFormat(d3.format(config.essential.xAxisNumberFormat))
 				.ticks(config.optional.xAxisTicks[size])
 				.tickSize(-height)
 		)
@@ -243,7 +243,7 @@ function drawGraphic() {
 		.call(
 			d3
 				.axisBottom(xRight)
-				.tickFormat(d3.format('.1%'))
+				.tickFormat(d3.format(config.essential.xAxisNumberFormat))
 				.ticks(config.optional.xAxisTicks[size])
 				.tickSize(-height)
 		)

diff --git a/population-pyramid-with-dropdown-and-interactive-comparison/config.js b/population-pyramid-with-dropdown-and-interactive-comparison/config.js
@@ -12,6 +12,7 @@ config = {
 		// this is the lighter palette for reference lines ["#9A86E9", "#3fb0b3"]
 		"comparison_colour_palette": ["#5c5185", "#306970"],
 		"legend": ["Selected area", "2011"],
+		"xAxisNumberFormat": ".1%",
 		"xAxisLabel": "Percentage",
 		"yAxisLabel": "Age"
 	},

diff --git a/population-pyramid-with-dropdown-and-interactive-comparison/script.js b/population-pyramid-with-dropdown-and-interactive-comparison/script.js
@@ -264,7 +264,7 @@ function drawGraphic() {
 		.call(
 			d3
 				.axisBottom(xLeft)
-				.tickFormat(d3.format('.1%'))
+				.tickFormat(d3.format(config.essential.xAxisNumberFormat))
 				.ticks(config.optional.xAxisTicks[size])
 				.tickSize(-height)
 		)
@@ -283,7 +283,7 @@ function drawGraphic() {
 		.call(
 			d3
 				.axisBottom(xRight)
-				.tickFormat(d3.format('.1%'))
+				.tickFormat(d3.format(config.essential.xAxisNumberFormat))
 				.ticks(config.optional.xAxisTicks[size])
 				.tickSize(-height)
 		)

diff --git a/population-pyramid-with-dropdown/config.js b/population-pyramid-with-dropdown/config.js
@@ -12,6 +12,7 @@ config = {
 		// this is the lighter palette for reference lines ["#9A86E9", "#3fb0b3"]
 		"comparison_colour_palette": ["#5c5185", "#306970"],
 		"legend": ["Selected area", "England and Wales"],
+		"xAxisNumberFormat": ".1%",
 		"xAxisLabel": "Percentage",
 		"yAxisLabel": "Age"
 	},

diff --git a/population-pyramid-with-dropdown/script.js b/population-pyramid-with-dropdown/script.js
@@ -223,7 +223,7 @@ function drawGraphic() {
 		.call(
 			d3
 				.axisBottom(xLeft)
-				.tickFormat(d3.format('.1%'))
+				.tickFormat(d3.format(config.essential.xAxisNumberFormat))
 				.ticks(config.optional.xAxisTicks[size])
 				.tickSize(-height)
 		)
@@ -242,7 +242,7 @@ function drawGraphic() {
 		.call(
 			d3
 				.axisBottom(xRight)
-				.tickFormat(d3.format('.1%'))
+				.tickFormat(d3.format(config.essential.xAxisNumberFormat))
 				.ticks(config.optional.xAxisTicks[size])
 				.tickSize(-height)
 		)

diff --git a/range-plot/script.js b/range-plot/script.js
@@ -60,7 +60,7 @@ function drawGraphic() {
 	//set up xAxis generator
 	let xAxis = d3.axisBottom(x)
 		.ticks(config.optional.xAxisTicks[size])
-		.tickFormat(d => d3.format(config.essential.xAxisTickFormat)(d));
+		.tickFormat(d3.format(config.essential.xAxisTickFormat));
 
 	divs = graphic.selectAll('div.categoryLabels').data(groups).join('div');