Refactoring

src/report/reporters/histogram/abscissa.js

@@ -1,13 +1,27 @@
 import { separatorColor } from '../../utils/colors.js'
 
 import { TICK_MIDDLE, HORIZONTAL_LINE } from './characters.js'
+import { padMinStat, padMaxStat } from './min_max.js'
 
 // Retrieve the horizontal line and the abscissa below the main content.
 // Includes the tick above the median and its label.
-export const getAbscissa = function (contentWidth, median, medianIndex) {
+export const getAbscissa = function ({
+  combinationTitles,
+  titleBlockWidth,
+  minBlockWidth,
+  contentWidth,
+  median,
+  medianIndex,
+  min,
+  max,
+}) {
+  const titlesSpace = ' '.repeat(titleBlockWidth)
+  const minSpace = ' '.repeat(minBlockWidth)
+  const paddedMin = padMinStat(min)
+  const paddedMax = padMaxStat(max)
   const bottomLine = separatorColor(getBottomLine(contentWidth, medianIndex))
   const label = getLabel(contentWidth, median, medianIndex)
-  return `${bottomLine}\n${label}`
+  return `${combinationTitles}${paddedMin}${bottomLine}${paddedMax}\n${titlesSpace}${minSpace}${label}`
 }
 
 const getBottomLine = function (contentWidth, medianIndex) {

src/report/reporters/histogram/content.js

@@ -5,22 +5,38 @@ import { getHistogramRows } from './rows.js'
 export const getContent = function ({
   stats: { histogram, median, min, max },
   height,
+  combinationTitles,
+  titleBlockWidth,
+  minBlockWidth,
   contentWidth,
   mini,
 }) {
   const medianIndex = getMedianIndex({ median, min, max, contentWidth })
   const rows = getHistogramRows({
     histogram,
+    combinationTitles,
+    titleBlockWidth,
+    minBlockWidth,
     contentWidth,
     height,
     medianIndex,
+    mini,
   })
 
   if (mini) {
     return rows
   }
 
-  const abscissa = getAbscissa(contentWidth, median, medianIndex)
+  const abscissa = getAbscissa({
+    combinationTitles,
+    titleBlockWidth,
+    minBlockWidth,
+    contentWidth,
+    median,
+    medianIndex,
+    min,
+    max,
+  })
   return `${rows}\n${abscissa}`
 }
 

src/report/reporters/histogram/main.js

@@ -1,13 +1,8 @@
-import { concatBlocks } from '../../utils/concat.js'
+import { getCombNamePaddedColor } from '../../utils/name.js'
 
 import { EXTRA_HEIGHT } from './characters.js'
 import { getContent } from './content.js'
-import {
-  getMinBlock,
-  getMinBlockWidth,
-  getMaxBlock,
-  getMaxBlockWidth,
-} from './min_max.js'
+import { getMinBlockWidth, getMaxBlockWidth } from './min_max.js'
 import { getTitleBlock, getTitleBlockWidth } from './title.js'
 
 // Reporter showing distribution of measures with a histogram
@@ -18,23 +13,34 @@ const reportTerminal = function (
   { mini = false },
 ) {
   const height = 2 * EXTRA_HEIGHT
-  const contentWidth = getWidths(combinations, mini, screenWidth)
+  const { titleBlockWidth, minBlockWidth, contentWidth } = getWidths(
+    combinations,
+    mini,
+    screenWidth,
+  )
   return combinations
     .map((combination) =>
-      serializeHistogram({ combination, contentWidth, height, mini }),
+      serializeHistogram({
+        combination,
+        titleBlockWidth,
+        minBlockWidth,
+        contentWidth,
+        height,
+        mini,
+      }),
     )
     .join('\n')
 }
 
 const getWidths = function (combinations, mini, screenWidth) {
+  const titleBlockWidth = getTitleBlockWidth(combinations)
+  const minBlockWidth = getMinBlockWidth(combinations, mini)
+  const maxBlockWidth = getMaxBlockWidth(combinations, mini)
   const contentWidth = Math.max(
-    screenWidth -
-      getTitleBlockWidth(combinations) -
-      getMinBlockWidth(combinations, mini) -
-      getMaxBlockWidth(combinations, mini),
+    screenWidth - titleBlockWidth - minBlockWidth - maxBlockWidth,
     1,
   )
-  return contentWidth
+  return { titleBlockWidth, minBlockWidth, contentWidth }
 }
 
 const serializeHistogram = function ({
@@ -43,20 +49,28 @@ const serializeHistogram = function ({
     stats,
     stats: { median },
   },
+  titleBlockWidth,
+  minBlockWidth,
   contentWidth,
   height,
   mini,
 }) {
+  const combinationTitles = getCombNamePaddedColor(combination)
   const titleBlock = getTitleBlock(combination, height, mini)
 
   if (median === undefined) {
     return titleBlock
   }
 
-  const minBlock = getMinBlock({ stats, height, mini })
-  const content = getContent({ stats, height, contentWidth, mini })
-  const maxBlock = getMaxBlock({ stats, height, mini })
-  return concatBlocks([titleBlock, minBlock, content, maxBlock])
+  return getContent({
+    stats,
+    height,
+    combinationTitles,
+    titleBlockWidth,
+    minBlockWidth,
+    contentWidth,
+    mini,
+  })
 }
 
 export const histogram = { reportTerminal, capabilities: { debugStats: true } }

src/report/reporters/histogram/min_max.js

@@ -4,18 +4,6 @@ import { separatorColor } from '../../utils/colors.js'
 
 import { TICK_LEFT, TICK_RIGHT } from './characters.js'
 
-// Retrieve the blocks that show the lowest|highest value of the histogram, on
-// the left|right of it
-const getBlock = function (getStat, { stats, height, mini }) {
-  if (mini) {
-    return ''
-  }
-
-  const newlines = '\n'.repeat(height)
-  const statPadded = getStat(stats)
-  return `${newlines}${statPadded}`
-}
-
 // Retrieve the width of those blocks
 const getBlockWidth = function (getStat, combinations, mini) {
   if (mini) {
@@ -34,23 +22,27 @@ const getCombinationWidth = function ({ stats }, getStat) {
 }
 
 const getMinStat = function ({ min }) {
-  return min === undefined
-    ? ''
-    : `${PADDING}${min.prettyPaddedColor}${PADDING}${separatorColor(TICK_LEFT)}`
+  return min === undefined ? '' : padMinStat(min)
 }
 
 const getMaxStat = function ({ max }) {
-  return max === undefined
-    ? ''
-    : `${separatorColor(TICK_RIGHT)}${PADDING}${
-        max.prettyPaddedColor
-      }${PADDING}`
+  return max === undefined ? '' : padMaxStat(max)
+}
+
+export const padMinStat = function (min) {
+  return `${PADDING}${min.prettyPaddedColor}${PADDING}${separatorColor(
+    TICK_LEFT,
+  )}`
+}
+
+export const padMaxStat = function (max) {
+  return `${separatorColor(TICK_RIGHT)}${PADDING}${
+    max.prettyPaddedColor
+  }${PADDING}`
 }
 
 const PADDING_WIDTH = 1
 const PADDING = ' '.repeat(PADDING_WIDTH)
 
-export const getMinBlock = getBlock.bind(undefined, getMinStat)
 export const getMinBlockWidth = getBlockWidth.bind(undefined, getMinStat)
-export const getMaxBlock = getBlock.bind(undefined, getMaxStat)
 export const getMaxBlockWidth = getBlockWidth.bind(undefined, getMaxStat)

src/report/reporters/histogram/rows.js

@@ -10,9 +10,13 @@ import { getFrequencies } from './frequencies.js'
 // Serialize the main part of the histogram, i.e. rows and columns
 export const getHistogramRows = function ({
   histogram,
+  combinationTitles,
+  titleBlockWidth,
+  minBlockWidth,
   contentWidth,
   height,
   medianIndex,
+  mini,
 }) {
   const frequencies = getFrequencies(histogram, contentWidth)
   const columns = getHistogramColumns({
@@ -22,7 +26,15 @@ export const getHistogramRows = function ({
     height,
   })
   return Array.from({ length: height }, (_, index) =>
-    getHistogramRow({ index, columns, height }),
+    getHistogramRow({
+      index,
+      columns,
+      combinationTitles,
+      titleBlockWidth,
+      minBlockWidth,
+      height,
+      mini,
+    }),
   ).join('\n')
 }
 
@@ -76,12 +88,25 @@ const getColumnColor = function (columnIndex, medianIndex, medianMaxWidth) {
 }
 
 // Serialize a single row, i.e. terminal line
-const getHistogramRow = function ({ index, columns, height }) {
+const getHistogramRow = function ({
+  index,
+  columns,
+  combinationTitles,
+  titleBlockWidth,
+  minBlockWidth,
+  height,
+  mini,
+}) {
+  const titlesSpace =
+    mini && index === height - 1
+      ? combinationTitles
+      : ' '.repeat(titleBlockWidth)
+  const minSpace = ' '.repeat(minBlockWidth)
   const inverseIndex = height - index - 1
   const row = columns
     .map(getHistogramCell.bind(undefined, inverseIndex))
     .join('')
-  return row
+  return `${titlesSpace}${minSpace}${row}`
 }
 
 // Retrieve the character to display for a specific row and column