Adjust govspeak chart label positioning

- when a chart is generated, the label for each bar is positioned according to the relative size of the text and the length of the bar: if the bar is longer, the text is 'indented' inside the bar, if shorter, the text is 'outdented' outside of the bar
- this effect can produce varying results depending on the overall scale of the numbers involved: if a bar is of length 6 and the longest bar is 10, the text will likely be indented, but if the longest bar is 600, the bar of length 6 will appear much narrower and the text will probably be outdented
- it was reported that in some circumstances the text was being indented when it should have been outdented, resulting in text that appeared cropped (white text overlapping onto a white background)
- this seems to be fixable by slightly increasing this extra number added into the calculation (the problem specifically occured on a bar of value 6 when the largest bar was 106), which is there for 'extra padding'
- this does have an impact on the 'stacked chart' variation, where multiple bars are 'stacked' (horizontally) to form a graph
- in this situation a similar problem was occurring, because the following (to the right) bar chart element was rendering after the text, slightly overlapping it
- the impact of this change means that this no longer happens, because the graph code is smart enough to realise when a text label won't fit inside a narrow element of a stacked chart, and instead applies styles to set the text-indent to -9999
- this means the text disappears, but I think this is okay because a) the relative size of the stacked chart is still comprehensible, b) the text is indented, so screen readers can still read it, and c) there's a button to switch from the graph to the original table on which it is based, so if anyone wants the numbers they're always available
- alternative options I considered...
- a) making no changes to the code but apply some kind of drop shadow to the text labels to make them readable even if they overlap onto the same colour background. Rejected because it started getting messy, both visually and code-wise
- b) changing the initialisation of magna charta in `barchart-enhancement.js` to pass the option `outdentAll: true`. This would make all graphs have text labels outdented by default, which would fix the problem but might not be ideal for all circumstances, and wouldn't have done anything to fix the stacked chart overlap problem. It might be something to consider in future though if we decide to revisit these charts, as it would save the complexity around the contrast ratio between bar charts and text labels laid on top of them

CHANGELOG.md

@@ -7,6 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased
+
+* Adjust govspeak chart label positioning ([PR #4094](https://github.com/alphagov/govuk_publishing_components/pull/4094))
+
 ## 39.2.1
 
 * Update to LUX 4.0.20 ([PR #4089](https://github.com/alphagov/govuk_publishing_components/pull/4089))

app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js

@@ -447,7 +447,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       var $cell = cells[i]
       var cellVal = parseFloat(this.utils.stripValue($cell.innerText), 10)
       var $cellSpan = $cell.querySelector('span')
-      var spanWidth = $cell.querySelector('span').offsetWidth + 5 // +5 just for extra padding
+      var spanWidth = $cell.querySelector('span').offsetWidth + 10 // +10 just for extra padding
       var cellWidth = $cell.offsetWidth
 
       if (!this.options.stacked) {