@cdc/chart 4.26.1 → 4.26.2

package/src/components/HorizonChart/HorizonChart.tsx

@@ -0,0 +1,131 @@
+import React, { useContext, memo, useMemo } from 'react'
+
+// cdc
+import ConfigContext from '../../ConfigContext'
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import { isDateScale } from '@cdc/core/helpers/cove/date'
+
+// visx
+import { Bar } from '@visx/shape'
+import { Group } from '@visx/group'
+
+// components
+import HorizonBand from './components/HorizonBand'
+
+// helpers
+import { calculateHorizonBands } from './helpers/calculateHorizonBands'
+
+// types
+import { HORIZON_DEFAULTS } from '../../types/Horizon'
+
+type HorizonChartProps = {
+  xScale: any
+  yScale: any
+  xMax: number
+  yMax: number
+  handleTooltipMouseOver: (e: any, additionalData?: any) => void
+  handleTooltipMouseOff: () => void
+  tooltipData?: any
+  showTooltip?: boolean
+}
+
+const HorizonChart = ({ xScale, xMax, yMax, handleTooltipMouseOver, handleTooltipMouseOff }: HorizonChartProps) => {
+  // Get data and config from context
+  const { transformedData: data, config, colorScale, rawData, parseDate } = useContext(ConfigContext)
+
+  const horizonConfig = {
+    ...HORIZON_DEFAULTS,
+    ...config.horizon
+  }
+
+  // Get series keys for rendering rows
+  const seriesKeys =
+    (config.runtime?.seriesKeys?.length ? config.runtime.seriesKeys : config.series?.map(s => s.dataKey)) || []
+
+  // Calculate value range across all horizon series (for consistent scaling)
+  // Must be called before early returns to satisfy React hooks rules
+  const valueRange = useMemo(() => {
+    if (!data || data.length === 0 || seriesKeys.length === 0) {
+      return { min: 0, max: 0 }
+    }
+
+    let min = Infinity
+    let max = -Infinity
+
+    data.forEach((row: any) => {
+      seriesKeys.forEach((key: string) => {
+        const value = Math.abs(Number(row[key]) || 0)
+        if (value > 0) {
+          min = Math.min(min, value)
+          max = Math.max(max, value)
+        }
+      })
+    })
+
+    return {
+      min: min === Infinity ? 0 : min,
+      max: max === -Infinity ? 0 : max
+    }
+  }, [data, seriesKeys])
+
+  // Early returns after all hooks
+  if (!data || data.length === 0) return null
+  if (seriesKeys.length === 0) return null
+  if (xMax <= 0 || yMax <= 0) return null
+
+  // Calculate band dimensions to fill available space
+  const { bandHeight, getRowY } = calculateHorizonBands(
+    seriesKeys.length,
+    yMax,
+    horizonConfig.bandGap,
+    horizonConfig.bottomPadding
+  )
+
+  const getXPosition = value => {
+    if (config.xAxis.type === 'categorical') {
+      return xScale(value) + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
+    }
+    if (isDateScale(config.xAxis)) {
+      const scaledValue = xScale(parseDate(value, false))
+      return scaledValue + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
+    }
+    return xScale(value)
+  }
+
+  return (
+    <ErrorBoundary component='HorizonChart'>
+      <Group className='horizon-chart' key='horizon-wrapper' left={Number(config.yAxis.size)} height={Number(yMax)}>
+        {seriesKeys.map((seriesKey, index) => {
+          const rowY = getRowY(index)
+          return (
+            <Group key={seriesKey} top={rowY} className='horizon-band-row'>
+              {/* Horizon band for this series */}
+              <HorizonBand
+                data={data}
+                seriesKey={seriesKey}
+                xAxisKey={config.xAxis.dataKey}
+                getXPosition={getXPosition}
+                bandHeight={bandHeight}
+                xMax={xMax}
+                numLayers={horizonConfig.numLayers}
+                colorScale={colorScale}
+                config={config}
+                globalMax={valueRange.max}
+              />
+            </Group>
+          )
+        })}
+        {/* Transparent bar for tooltip interaction */}
+        <Bar
+          width={Number(xMax)}
+          height={Number(yMax)}
+          fill='transparent'
+          onMouseMove={e => handleTooltipMouseOver(e, rawData)}
+          onMouseLeave={handleTooltipMouseOff}
+        />
+      </Group>
+    </ErrorBoundary>
+  )
+}
+
+export default memo(HorizonChart)

package/src/components/HorizonChart/components/HorizonBand.tsx

@@ -0,0 +1,160 @@
+import React, { memo, useId, useMemo } from 'react'
+
+// visx
+import { AreaClosed } from '@visx/shape'
+import { Group } from '@visx/group'
+import { scaleLinear } from '@visx/scale'
+import * as allCurves from '@visx/curve'
+import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
+import { getHorizonLayerColors } from '../helpers/getHorizonLayerColors'
+
+type HorizonBandProps = {
+  data: any[]
+  seriesKey: string
+  xAxisKey: string
+  getXPosition: (value: any) => number
+  bandHeight: number
+  xMax: number
+  numLayers: number
+  colorScale: any
+  config: any
+  globalMax: number
+}
+
+/**
+ * HorizonBand renders a single series as a horizon chart
+ *
+ * Horizon charts work by:
+ * 1. Dividing the value range into N layers
+ * 2. Each layer shows values within its threshold range
+ * 3. Layers are stacked/overlapped to create the horizon effect
+ * 4. Higher values appear overlapped, usually darker depending on color palette (achieved through layer stacking)
+ */
+const HorizonBand = ({
+  data,
+  seriesKey,
+  xAxisKey,
+  getXPosition,
+  bandHeight,
+  xMax,
+  numLayers,
+  config,
+  globalMax
+}: HorizonBandProps) => {
+  // Create a unique, safe ID for clipPath (useId ensures uniqueness across instances)
+  // Must be called before any early returns to follow React's rules of hooks
+  const uniqueId = useId()
+  const safeSeriesKey = seriesKey.replace(/[^a-zA-Z0-9]/g, '-')
+  const clipId = `horizon-clip-${safeSeriesKey}-${uniqueId.replace(/:/g, '')}`
+
+  // Get the curve type from config (same as stacked area chart)
+  const curveType = allCurves[approvedCurveTypes[config.stackedAreaChartLineType || 'Linear']] || allCurves.curveLinear
+
+  // Process data: convert to absolute values and compute series max in single pass
+  const { processedData, seriesMax } = useMemo(() => {
+    let max = 0
+    const processed = data.map(d => {
+      const absValue = Math.abs(Number(d[seriesKey]) || 0)
+      if (absValue > max) max = absValue
+      return { ...d, [seriesKey]: absValue }
+    })
+    return { processedData: processed, seriesMax: max }
+  }, [data, seriesKey])
+
+  // Get layer colors using shared helper (memoized based on palette config and numLayers)
+  // Must be called before early returns to follow React's rules of hooks
+  const layerColors = useMemo(
+    () => getHorizonLayerColors(config, numLayers),
+    [
+      config.general?.palette?.name,
+      config.general?.palette?.isReversed,
+      config.general?.palette?.version,
+      config.general?.palette?.customColors,
+      numLayers
+    ]
+  )
+
+  // Use global max for scaling (ensures all series bands are comparable)
+  const maxValue = globalMax
+
+  // If no data, max is 0, or dimensions are invalid, don't render
+  if (maxValue === 0) return null
+  if (xMax <= 0 || bandHeight <= 0) return null
+
+  // Calculate the threshold for each layer
+  // Each layer represents 1/numLayers of the max value
+  const layerThreshold = maxValue / numLayers
+
+  // Create a y-scale for positioning within the band
+  // The scale maps values 0-layerThreshold to the full bandHeight
+  // Each layer uses the full band height, creating overlay effect
+  const yScale = scaleLinear({
+    domain: [0, layerThreshold],
+    range: [bandHeight, 0],
+    clamp: true // Clamp values above threshold
+  })
+
+  // Render layers from bottom to top
+  // Each layer shows values from (layerIndex * threshold) to ((layerIndex + 1) * threshold)
+  const layers = []
+
+  for (let layerIndex = 0; layerIndex < numLayers; layerIndex++) {
+    const layerMin = layerIndex * layerThreshold
+
+    // Short-circuit: if this layer's minimum exceeds the series max,
+    // no remaining layers can have visible data
+    if (layerMin >= seriesMax) break
+
+    // Build layer data and track hasData in a single pass
+    let hasData = false
+    const layerData = processedData.map(d => {
+      const rawValue = d[seriesKey]
+      // Calculate the value relative to this layer's base
+      const layerValue = Math.max(0, rawValue - layerMin)
+      // Clamp to the layer threshold
+      const clampedValue = Math.min(layerValue, layerThreshold)
+
+      if (clampedValue > 0) hasData = true
+
+      return {
+        x: d[xAxisKey],
+        y: clampedValue
+      }
+    })
+
+    if (!hasData) continue
+
+    // Get color for this layer from the distributed layer colors
+    const layerColor = layerColors[layerIndex]
+
+    layers.push(
+      <Group key={`layer-${layerIndex}`} top={0}>
+        <AreaClosed
+          data={layerData}
+          x={d => getXPosition(d.x)}
+          y={d => yScale(d.y)}
+          yScale={yScale}
+          curve={curveType}
+          fill={layerColor}
+          fillOpacity={1}
+          stroke='none'
+        />
+      </Group>
+    )
+  }
+
+  return (
+    <Group className='horizon-band'>
+      {/* Clip to band bounds */}
+      <defs>
+        <clipPath id={clipId}>
+          <rect x={0} y={0} width={xMax} height={bandHeight} />
+        </clipPath>
+      </defs>
+
+      <Group clipPath={`url(#${clipId})`}>{layers}</Group>
+    </Group>
+  )
+}
+
+export default memo(HorizonBand)

package/src/components/HorizonChart/helpers/calculateHorizonBands.ts

@@ -0,0 +1,27 @@
+/**
+ * Calculates the band dimensions for horizon chart rows
+ * Used by both HorizonChart (for rendering) and LeftAxis (for label positioning)
+ */
+
+const MIN_BAND_HEIGHT = 10
+
+export type HorizonBandCalculation = {
+  bandHeight: number
+  getRowY: (index: number) => number
+}
+
+export function calculateHorizonBands(
+  numSeries: number,
+  yMax: number,
+  bandGap: number | string,
+  bottomPadding: number | string = 15
+): HorizonBandCalculation {
+  const gap = Number(bandGap) || 0
+  const padding = Number(bottomPadding) || 0
+
+  const totalGapSpace = (numSeries - 1) * gap + padding
+  const bandHeight = Math.max((yMax - totalGapSpace) / numSeries, MIN_BAND_HEIGHT)
+  const getRowY = (index: number) => index * (bandHeight + gap)
+
+  return { bandHeight, getRowY }
+}

package/src/components/HorizonChart/helpers/getHorizonLayerColors.ts

@@ -0,0 +1,40 @@
+import { filterChartColorPalettes } from '@cdc/core/helpers/filterColorPalettes'
+import { v2ColorDistribution } from '@cdc/core/helpers/palettes/colorDistributions'
+
+/**
+ * Calculates the layer colors for a horizon chart based on palette configuration.
+ * Shared between HorizonBand rendering and Legend display.
+ */
+export const getHorizonLayerColors = (config: any, numLayers: number): string[] => {
+  const paletteName = config.general?.palette?.name || 'sequential_blue'
+  const colorPalettes = filterChartColorPalettes(config)
+  const fullPalette = colorPalettes[paletteName] || Object.values(colorPalettes)[0] || ['#4292c6']
+
+  // Use v2ColorDistribution if we have a 9-color palette and numLayers <= 9
+  if (fullPalette.length === 9 && numLayers <= 9 && v2ColorDistribution[numLayers]) {
+    const indices = v2ColorDistribution[numLayers]
+    return indices.map((i: number) => fullPalette[i])
+  }
+
+  // Fallback: take first numLayers colors, or repeat if needed
+  return Array.from({ length: numLayers }, (_, i) => fullPalette[i % fullPalette.length])
+}
+
+/**
+ * Calculates the max value across all series in a horizon chart dataset.
+ * Used for consistent scaling across all bands.
+ */
+export const getHorizonMaxValue = (data: any[], seriesKeys: string[]): number => {
+  if (!data || data.length === 0 || !seriesKeys || seriesKeys.length === 0) {
+    return 0
+  }
+
+  let max = 0
+  for (const row of data) {
+    for (const key of seriesKeys) {
+      const value = Math.abs(Number(row[key]) || 0)
+      if (value > max) max = value
+    }
+  }
+  return max
+}

package/src/components/HorizonChart/index.tsx

@@ -0,0 +1,3 @@
+import HorizonChart from './HorizonChart'
+
+export { HorizonChart }

package/src/components/Legend/Legend.Component.tsx

@@ -1,5 +1,5 @@
 import parse from 'html-react-parser'
-import React from 'react'
+import React, { useMemo } from 'react'
 import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend'
 import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
 import LegendShape from '@cdc/core/components/LegendShape'
@@ -17,6 +17,8 @@ import { DimensionsType } from '@cdc/core/types/Dimensions'
 import { isLegendWrapViewport } from '@cdc/core/helpers/viewports'
 import LegendLineShape from './LegendLine.Shape'
 import LegendGroup from './LegendGroup'
+import LegendValueRange from './LegendValueRange'
+import { getHorizonLayerColors, getHorizonMaxValue } from '../../components/HorizonChart/helpers/getHorizonLayerColors'
 import { getSeriesWithData } from '../../helpers/dataHelpers'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
@@ -28,6 +30,7 @@ interface LegendProps {
   config: ChartConfig
   currentViewport: ViewportSize
   formatLabels: (labels: Label[]) => Label[]
+  formatNumber?: (value: number, axis?: string) => string
   highlight: Function
   handleShowAll: Function
   ref: React.Ref<() => void>
@@ -48,6 +51,7 @@ const Legend: React.FC<LegendProps> = forwardRef(
       handleShowAll,
       currentViewport,
       formatLabels,
+      formatNumber,
       skipId = 'legend',
       dimensions,
       transformedData: data,
@@ -60,7 +64,10 @@ const Legend: React.FC<LegendProps> = forwardRef(
     const { series } = runtime
 
     const seriesWithData = getSeriesWithData(config)
-    const dontFilterLegendItems = !series.length || legend.unified || !seriesWithData.length
+    // For Radar charts, seriesWithData contains dimension keys but legend shows entity names
+    // so we skip the series filter for radar charts
+    const isRadarChart = config.visualizationType === 'Radar'
+    const dontFilterLegendItems = !series.length || legend.unified || !seriesWithData.length || isRadarChart
 
     const isLegendBottom =
       legend?.position === 'bottom' ||
@@ -74,6 +81,29 @@ const Legend: React.FC<LegendProps> = forwardRef(
     const { HighLightedBarUtils } = useHighlightedBars(config)
     let highLightedLegendItems = HighLightedBarUtils.findDuplicates(config.highlightedBarValues)
 
+    const horizonLegendData = useMemo(() => {
+      if (config.visualizationType !== 'Horizon Chart') {
+        return null
+      }
+      const numLayers = config.horizon?.numLayers || 4
+      const runtimeSeriesKeys = config.runtime?.seriesKeys
+      const seriesKeys =
+        (Array.isArray(runtimeSeriesKeys) && runtimeSeriesKeys.length > 0
+          ? runtimeSeriesKeys
+          : config.series?.map(s => s.dataKey)) || []
+      const maxValue = getHorizonMaxValue(data, seriesKeys)
+      const layerColors = getHorizonLayerColors(config, numLayers)
+
+      return { numLayers, maxValue, layerColors }
+    }, [
+      config.visualizationType,
+      config.horizon?.numLayers,
+      config.runtime?.seriesKeys,
+      config.series,
+      config.general?.palette?.name,
+      data
+    ])
+
     if (!legend) return null
     return (
       <aside
@@ -99,6 +129,20 @@ const Legend: React.FC<LegendProps> = forwardRef(
         />
         <LegendGroup formatLabels={formatLabels} />
 
+        {/* Value Range Legend for Horizon Chart (and future chart types) */}
+        {horizonLegendData && (
+          <LegendValueRange
+            maxValue={horizonLegendData.maxValue}
+            numRanges={horizonLegendData.numLayers}
+            colors={horizonLegendData.layerColors}
+            formatNumber={formatNumber}
+            innerClasses={innerClasses}
+            shape={config.legend.style === 'boxes' ? 'square' : 'circle'}
+            onClick={undefined}
+            reverseLabelOrder={config.legend.reverseLabelOrder}
+          />
+        )}
+
         <LegendOrdinal scale={colorScale} itemDirection='row' labelMargin='0 20px 0 0' shapeMargin='0 10px 0'>
           {labels => {
             return (
@@ -130,8 +174,12 @@ const Legend: React.FC<LegendProps> = forwardRef(
                         } else className.push('highlighted')
                       }
 
-                      if (config.legend.style === 'gradient' || config.legend.groupBy) {
-                        return <></>
+                      if (
+                        config.legend.style === 'gradient' ||
+                        config.legend.groupBy ||
+                        config.visualizationType === 'Horizon Chart'
+                      ) {
+                        return null
                       }
 
                       return (

package/src/components/Legend/Legend.tsx

@@ -3,7 +3,6 @@ import ConfigContext from '../../ConfigContext'
 import LegendComponent from './Legend.Component'
 import { createFormatLabels } from './helpers/createFormatLabels'
 
-/* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
 const Legend = forwardRef((props, ref) => {
   // prettier-ignore
   const {
@@ -42,6 +41,7 @@ const Legend = forwardRef((props, ref) => {
         handleShowAll={handleShowAll}
         currentViewport={currentViewport}
         formatLabels={createLegendLabels}
+        formatNumber={formatNumber}
         interactionLabel={interactionLabel}
       />
     </Fragment>

package/src/components/Legend/LegendValueRange.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import { LegendItem, LegendLabel } from '@visx/legend'
+import LegendShape from '@cdc/core/components/LegendShape'
+import { generateValueRanges, GenerateValueRangesOptions, ValueRange } from './helpers/generateValueRanges'
+
+export type LegendValueRangeProps = GenerateValueRangesOptions & {
+  colors: string[]
+  shape?: 'circle' | 'square'
+  onClick?: (index: number, range: ValueRange) => void
+  innerClasses?: string[]
+  reverseLabelOrder?: boolean
+}
+
+/**
+ * LegendValueRange - Generic component for displaying value range legends
+ *
+ * Used by Horizon Charts to show layer intensity ranges (e.g., 1-100, 101-200).
+ * Can be reused by other chart types that need binned value legends.
+ */
+const LegendValueRange: React.FC<LegendValueRangeProps> = ({
+  minValue = 0,
+  maxValue,
+  numRanges,
+  distribution = 'equal',
+  formatNumber,
+  colors,
+  shape = 'square',
+  onClick,
+  innerClasses = ['legend-container__inner'],
+  reverseLabelOrder = false
+}) => {
+  const ranges = generateValueRanges({ minValue, maxValue, numRanges, distribution, formatNumber })
+
+  if (ranges.length === 0) return null
+
+  // Reverse both ranges and colors when reverseLabelOrder is true
+  const displayRanges = reverseLabelOrder ? [...ranges].reverse() : ranges
+  const displayColors = reverseLabelOrder ? [...colors].reverse() : colors
+
+  return (
+    <div className={innerClasses.join(' ')}>
+      {displayRanges.map((range, i) => {
+        const color = displayColors[i % displayColors.length]
+        const isClickable = typeof onClick === 'function'
+        const className = ['legend-item', `legend-text--range-${i}`, !isClickable && 'not-clickable'].filter(Boolean)
+
+        return (
+          <LegendItem
+            className={className.join(' ')}
+            tabIndex={isClickable ? 0 : -1}
+            key={`legend-range-${i}`}
+            onKeyDown={e => {
+              if (isClickable && e.key === 'Enter') {
+                e.preventDefault()
+                onClick(i, range)
+              }
+            }}
+            onClick={e => {
+              if (isClickable) {
+                e.preventDefault()
+                onClick(i, range)
+              }
+            }}
+            role={isClickable ? 'button' : undefined}
+          >
+            <LegendShape shape={shape} fill={color} />
+            <LegendLabel align='left' className='m-0'>
+              {range.label}
+            </LegendLabel>
+          </LegendItem>
+        )
+      })}
+    </div>
+  )
+}
+
+export default LegendValueRange

package/src/components/Legend/helpers/createFormatLabels.tsx

@@ -342,6 +342,19 @@ export const createFormatLabels =
       return reverseLabels(seriesLabels)
     }
 
+    // For Radar charts, use the entity names from runtime.seriesKeys (set from xAxis.dataKey values)
+    // not the series names (which are the dimension keys)
+    if (visualizationType === 'Radar') {
+      const entityNames = runtime.seriesKeys || []
+      const radarLabels = entityNames.map((val, i) => ({
+        datum: val,
+        index: i,
+        text: String(val),
+        value: colorScale(val)
+      }))
+      return reverseLabels(radarLabels)
+    }
+
     if (config.series.some(item => item.name)) {
       const uniqueLabels = Array.from(new Set(config.series.map(d => d.name || d.dataKey))).map((val, i) => ({
         datum: val,

package/src/components/Legend/helpers/generateValueRanges.ts

@@ -0,0 +1,92 @@
+/**
+ * generateValueRanges - Creates value range bins for legend display
+ *
+ * Supports equal interval distribution with scaffolding for future quantile support.
+ * Ranges are inclusive with no overlap, starting at minValue or 0 (e.g., 1-100, 101-200).
+ */
+
+export type RangeDistribution = 'equal' | 'quantile'
+
+export type ValueRange = {
+  min: number
+  max: number
+  label: string
+}
+
+export type GenerateValueRangesOptions = {
+  minValue?: number
+  maxValue: number
+  numRanges: number
+  distribution?: RangeDistribution
+  formatNumber?: (value: number, axis?: string) => string
+}
+
+/**
+ * Generates an array of value ranges for legend display
+ */
+export const generateValueRanges = ({
+  minValue = 0,
+  maxValue,
+  numRanges,
+  distribution = 'equal',
+  formatNumber
+}: GenerateValueRangesOptions): ValueRange[] => {
+  if (numRanges <= 0 || maxValue <= minValue) {
+    return []
+  }
+
+  const ranges: ValueRange[] = []
+
+  if (distribution === 'equal') {
+    const rangeSize = (maxValue - minValue) / numRanges
+
+    for (let i = 0; i < numRanges; i++) {
+      // Calculate raw boundaries
+      const rawMin = minValue + i * rangeSize
+      const rawMax = minValue + (i + 1) * rangeSize
+
+      // For display:
+      // - First range starts at floor of minValue
+      // - Subsequent ranges start at previous max + 1 (monotonic constraint)
+      // - Last range ends exactly at ceil of maxValue
+      let displayMin: number
+      let displayMax: number
+
+      if (i === 0) {
+        displayMin = Math.floor(rawMin)
+      } else {
+        // Start at previous range's max + 1 to avoid overlap
+        displayMin = ranges[i - 1].max + 1
+      }
+
+      if (i === numRanges - 1) {
+        // Last range ends exactly at maxValue
+        displayMax = Math.ceil(maxValue)
+      } else {
+        displayMax = Math.floor(rawMax)
+      }
+
+      // Ensure min <= max (can happen with very small ranges)
+      if (displayMin > displayMax) {
+        displayMax = displayMin
+      }
+
+      // Format numbers if formatter provided
+      const formattedMin = formatNumber ? formatNumber(displayMin, 'left') : displayMin.toLocaleString()
+      const formattedMax = formatNumber ? formatNumber(displayMax, 'left') : displayMax.toLocaleString()
+
+      ranges.push({
+        min: displayMin,
+        max: displayMax,
+        label: displayMin === displayMax ? formattedMin : `${formattedMin}–${formattedMax}`
+      })
+    }
+  } else if (distribution === 'quantile') {
+    // Scaffolding for future quantile-based distribution
+    // Would require passing in the actual data values to calculate percentiles
+    // Currently, silently fall back to equal interval distribution
+    return generateValueRanges({ minValue, maxValue, numRanges, distribution: 'equal', formatNumber })
+  }
+
+  return ranges
+}