Fix label centering

src/report/reporters/boxplot/labels.js

@@ -1,15 +1,17 @@
+import { centerString } from '../../utils/center.js'
+
 // Retrieve the median label line shown below the box plot
 export const getLabels = function ({
   positions: { median },
   titlesWidth,
   minBlockWidth,
   contentWidth,
 }) {
-  const leftShift = Math.max(Math.floor((median.pretty.length - 1) / 2), 0)
-  const shiftedIndex = median.index - leftShift
-  const maxContentIndex = contentWidth - median.pretty.length
-  const contentIndex = Math.min(Math.max(shiftedIndex, 0), maxContentIndex)
-  const labelIndex = contentIndex + titlesWidth + minBlockWidth
-  const labelLeft = ' '.repeat(labelIndex)
-  return `${labelLeft}${median.prettyColor}\n`
+  const centeredMedian = centerString(
+    median.prettyColor,
+    median.index,
+    contentWidth,
+  )
+  const initialSpace = ' '.repeat(titlesWidth + minBlockWidth)
+  return `${initialSpace}${centeredMedian}\n`
 }

src/report/reporters/histogram/abscissa.js

@@ -1,3 +1,4 @@
+import { centerString } from '../../utils/center.js'
 import { separatorColor } from '../../utils/colors.js'
 
 import {
@@ -80,11 +81,11 @@ const getLabelLine = function ({
   median,
   medianIndex,
 }) {
-  const leftShift = Math.max(Math.floor((median.pretty.length - 1) / 2), 0)
-  const shiftedIndex = medianIndex - leftShift
-  const maxContentIndex = contentWidth - median.pretty.length
-  const contentIndex = Math.min(Math.max(shiftedIndex, 0), maxContentIndex)
-  const labelIndex = contentIndex + titlesWidth + minBlockWidth
-  const labelLeft = ' '.repeat(labelIndex)
-  return `${labelLeft}${median.prettyColor}\n`
+  const centeredMedian = centerString(
+    median.prettyColor,
+    medianIndex,
+    contentWidth,
+  )
+  const initialSpace = ' '.repeat(titlesWidth + minBlockWidth)
+  return `${initialSpace}${centeredMedian}\n`
 }

src/report/utils/center.js

@@ -0,0 +1,15 @@
+import stringWidth from 'string-width'
+
+// Center a string at a specific `index` inside a container of a given `width`
+// Ensures the string is usually centered around `index` except when at the
+// start or end of the container.
+export const centerString = function (string, index, width) {
+  const stringLength = stringWidth(string)
+  const leftShift = Math.max(Math.floor((stringLength - 1) / 2), 0)
+  const shiftedIndex = index - leftShift
+  const maxIndex = width - stringLength
+  const finalIndex = Math.min(Math.max(shiftedIndex, 0), maxIndex)
+  const leftSpace = ' '.repeat(finalIndex)
+  const rightSpace = ' '.repeat(width - stringLength - finalIndex)
+  return `${leftSpace}${string}${rightSpace}`
+}