@cdc/chart 4.26.6 → 4.26.7

package/src/components/Legend/LegendGroup/LegendGroup.tsx

@@ -2,7 +2,6 @@ import React, { useContext } from 'react'
 import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend'
 import LegendShape from '@cdc/core/components/LegendShape'
 import ConfigContext from '../../../ConfigContext'
-import _ from 'lodash'
 import './LegendGroup.styles.css'
 
 interface LegendGroup {

package/src/components/LineChart/helpers.ts

@@ -1,8 +1,6 @@
 import { DataItem, StyleProps, Style } from './LineChartProps'
 import { PreliminaryDataItem } from '../../types/ChartConfig'
 
-import _ from 'lodash'
-
 const isCalculable = value => !isNaN(parseFloat(value)) && isFinite(value)
 
 export const createStyles = (props: StyleProps): Style[] => {

package/src/components/LineChart/index.tsx

@@ -481,9 +481,7 @@ const LineChart = (props: LineChartProps) => {
                       break
                     }
                   }
-                  if (!lastDatum || legend.position === 'right') {
-                    return <></>
-                  }
+                  if (!lastDatum || legend.position === 'right') return null
 
                   let labelText = config.runtime.seriesLabels[seriesKey] || seriesKey
                   // truncate labels longer that 10 chars
@@ -494,6 +492,7 @@ const LineChart = (props: LineChartProps) => {
 
                   return (
                     <Text
+                      key={seriesKey}
                       display={
                         legend.behavior === 'highlight' ||
                         (seriesHighlight.length === 0 && !legend.dynamicLegend) ||

package/src/components/LinearChart.tsx

@@ -144,9 +144,10 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     fullEligibleDomainData: yAxisDomainData
   })
   const isStableYAxisDomain = getYAxisFilterDomainBehavior(config) === 'stable'
-  const rawEligibleYAxisDomainData = Array.isArray(config.yAxisDomainData) && config.yAxisDomainData.length > 0
-    ? getExcludedData(config, config.yAxisDomainData)
-    : isStableYAxisDomain && Array.isArray(excludedData)
+  const rawEligibleYAxisDomainData =
+    Array.isArray(config.yAxisDomainData) && config.yAxisDomainData.length > 0
+      ? getExcludedData(config, config.yAxisDomainData)
+      : isStableYAxisDomain && Array.isArray(excludedData)
       ? excludedData
       : tableData
   const suppressionDomainData = getYAxisDomainData({

package/src/components/PieChart/PieChart.tsx

@@ -4,7 +4,6 @@ import { animated, useTransition, to } from '@react-spring/web'
 // visx
 import { Pie } from '@visx/shape'
 import { Group } from '@visx/group'
-import { Text } from '@visx/text'
 import { useTooltip, TooltipWithBounds } from '@visx/tooltip'
 import { colorPalettesChart as colorPalettes } from '@cdc/core/data/colorPalettes'
 import { getPaletteColors } from '@cdc/core/helpers/palettes/utils'
@@ -25,6 +24,8 @@ import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import { scaleOrdinal } from '@visx/scale'
 import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 import { type TooltipDisplayData } from '../../helpers/tooltipHelpers'
+import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
+import { getPieLabelPosition } from './helpers/labelPlacement'
 
 type TooltipData = TooltipDisplayData
 
@@ -34,6 +35,38 @@ type PieChartProps = {
   interactionLabel?: string
 }
 
+const ENHANCED_PIE_LABEL_FONT_SIZE = 13
+const ENHANCED_PIE_LABEL_LINE_HEIGHT = 15
+const ENHANCED_PIE_LABEL_HEIGHT = ENHANCED_PIE_LABEL_LINE_HEIGHT * 2
+const ENHANCED_PIE_LABEL_FONT = `${ENHANCED_PIE_LABEL_FONT_SIZE}px sans-serif`
+const ENHANCED_PIE_LABEL_MIN_ANGLE = 0.01
+const LEGACY_PERCENT_LABEL_MIN_ANGLE = 0.1
+const MIN_RADIUS_WITH_LABELS = 55
+const MIN_LABEL_GUTTER = 96
+const OUTSIDE_LABEL_OFFSET = 22
+const LABEL_GUTTER_PADDING = OUTSIDE_LABEL_OFFSET + 16
+const VERTICAL_LABEL_GUTTER = 44
+
+const pieLabelTextWidthCache = new Map<string, number>()
+const MAX_PIE_LABEL_TEXT_CACHE = 2000
+
+const measurePieLabelText = (text: string) => {
+  const cached = pieLabelTextWidthCache.get(text)
+  if (cached !== undefined) return cached
+
+  const measured =
+    typeof document === 'undefined'
+      ? Math.ceil(text.length * ENHANCED_PIE_LABEL_FONT_SIZE * 0.6)
+      : (getTextWidth(text, ENHANCED_PIE_LABEL_FONT) ??
+        Math.ceil(text.length * ENHANCED_PIE_LABEL_FONT_SIZE * 0.6))
+
+  // Avoid unbounded growth in long-lived sessions with many unique labels.
+  if (pieLabelTextWidthCache.size >= MAX_PIE_LABEL_TEXT_CACHE) pieLabelTextWidthCache.clear()
+
+  pieLabelTextWidthCache.set(text, measured)
+  return measured
+}
+
 const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) => {
   const { interactionLabel = '' } = props
   const {
@@ -70,6 +103,7 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
   const pivotKey = dataNeedsPivot ? 'pivotColumn' : undefined
   const showPercentage = config.dataFormat.showPiePercent
   const labelForCalcArea = 'Calculated Area'
+  const showCategoryPercentageLabels = Boolean(config.labels)
 
   const _data = useMemo(() => {
     let baseData = []
@@ -269,9 +303,25 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
 
       let roundedPercentage = percentageToDisplay.toFixed(roundTo) + '%'
       // add missing pie part
-      if (arc.data[config.xAxis.dataKey] === labelForCalcArea && config.dataFormat.showPiePercent) {
+      if (arc.data[config.runtime.xAxis.dataKey] === labelForCalcArea && config.dataFormat.showPiePercent) {
         roundedPercentage = '**'
       }
+      let categoryLabel = ''
+      let labelPosition = { placement: 'inside' as const, x: 0, y: 0, textAnchor: 'middle' as const }
+
+      if (showCategoryPercentageLabels) {
+        categoryLabel = String(arc.data[config.runtime.xAxis.dataKey] ?? '')
+        const labelWidth = Math.max(measurePieLabelText(categoryLabel), measurePieLabelText(roundedPercentage))
+        labelPosition = getPieLabelPosition({
+          startAngle: arc.startAngle,
+          endAngle: arc.endAngle,
+          innerRadius: radius - donutThickness,
+          outerRadius: radius,
+          labelWidth,
+          labelHeight: ENHANCED_PIE_LABEL_HEIGHT,
+          isDonut: config.pieType === 'Donut'
+        })
+      }
 
       // Determine if this slice should be muted based on legend behavior
       const isHighlighted =
@@ -279,6 +329,8 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
       const shouldMute = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && !isHighlighted
       const sliceOpacity = shouldMute ? 0.3 : 1
       const textOpacity = shouldMute ? 0.3 : 1
+      const labelFill = labelPosition.placement === 'inside' ? textColor : '#000000'
+      const labelMinAngle = showCategoryPercentageLabels ? ENHANCED_PIE_LABEL_MIN_ANGLE : LEGACY_PERCENT_LABEL_MIN_ANGLE
 
       return (
         <Group key={key} className={`slice-${CSS.escape(String(key))}`}>
@@ -302,7 +354,7 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
           />
 
           {/* ── the percentage label */}
-          {arc.endAngle - arc.startAngle > 0.1 && (
+          {arc.endAngle - arc.startAngle > labelMinAngle && !showCategoryPercentageLabels && (
             <animated.text
               transform={to([styles.startAngle, styles.endAngle], (start: number, end: number) => {
                 const [x, y] = path.centroid({
@@ -321,6 +373,37 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
               {roundedPercentage}
             </animated.text>
           )}
+
+          {arc.endAngle - arc.startAngle > labelMinAngle && showCategoryPercentageLabels && (
+            <animated.text
+              className={`pie-label pie-label--${labelPosition.placement}`}
+              transform={to([styles.startAngle, styles.endAngle], (start: number, end: number) => {
+                const midAngle = start + (end - start) / 2
+                const innerRadius = radius - donutThickness
+                const outsideOffset = OUTSIDE_LABEL_OFFSET
+                const labelRadius =
+                  labelPosition.placement === 'inside'
+                    ? innerRadius + (radius - innerRadius) * 0.62
+                    : radius + outsideOffset
+                const x = Math.sin(midAngle) * labelRadius
+                const y = -Math.cos(midAngle) * labelRadius
+                return `translate(${x},${y})`
+              })}
+              textAnchor={labelPosition.textAnchor}
+              pointerEvents='none'
+              fill={labelFill}
+              opacity={textOpacity}
+              style={{ fontSize: ENHANCED_PIE_LABEL_FONT_SIZE, fontFamily: 'sans-serif' }}
+            >
+              <title>{`${categoryLabel}: ${roundedPercentage}`}</title>
+              <tspan x={0} dy={-ENHANCED_PIE_LABEL_LINE_HEIGHT / 2}>
+                {categoryLabel}
+              </tspan>
+              <tspan x={0} dy={ENHANCED_PIE_LABEL_LINE_HEIGHT}>
+                {roundedPercentage}
+              </tspan>
+            </animated.text>
+          )}
         </Group>
       )
     })
@@ -334,11 +417,35 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
   }
 
   const height = config.heights.vertical
-
-  const radius = Math.min(width, height) / 2
+  const maxPieLabelWidth = useMemo(() => {
+    if (!showCategoryPercentageLabels) return 0
+
+    const roundTo = Number(config.dataFormat.roundTo) || 0
+    const percentExample = `${(100).toFixed(roundTo)}%`
+
+    return _data.reduce((widestLabel, datum) => {
+      const categoryLabel = String(datum[config.runtime.xAxis.dataKey] ?? '')
+      return Math.max(widestLabel, measurePieLabelText(categoryLabel), measurePieLabelText(percentExample))
+    }, 0)
+  }, [_data, config.dataFormat.roundTo, config.runtime.xAxis.dataKey, showCategoryPercentageLabels])
+  const maxHorizontalLabelGutter = showCategoryPercentageLabels
+    ? Math.max(0, (width - MIN_RADIUS_WITH_LABELS * 2) / 2)
+    : 0
+  const labelGutter = showCategoryPercentageLabels
+    ? Math.min(Math.max(maxPieLabelWidth + LABEL_GUTTER_PADDING, MIN_LABEL_GUTTER), maxHorizontalLabelGutter)
+    : 0
+  const availableDiameter = showCategoryPercentageLabels
+    ? Math.min(width - labelGutter * 2, height - VERTICAL_LABEL_GUTTER * 2)
+    : Math.min(width, height)
+
+  const radius = showCategoryPercentageLabels
+    ? Math.max(0, availableDiameter / 2)
+    : Math.min(width, height) / 2
+  const svgWidth = showCategoryPercentageLabels ? width : radius * 2
+  const svgLeftOffset = Math.max((props.parentWidth - svgWidth) / 2, 0)
   const centerY = height / 2
-  const centerX = props.parentWidth / 2
-  const donutThickness = config.pieType === 'Donut' ? 75 : radius
+  const centerX = showCategoryPercentageLabels ? svgWidth / 2 : radius
+  const donutThickness = config.pieType === 'Donut' ? Math.min(75, radius * 0.65) : radius
 
   useEffect(() => {
     if (seriesHighlight.length > 0 && config.legend.behavior !== 'highlight') {
@@ -389,7 +496,7 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
     <>
       <ErrorBoundary component='PieChart'>
         <svg
-          width={radius * 2}
+          width={svgWidth}
           height={height}
           className={getSvgClasses()}
           role='img'
@@ -400,7 +507,7 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
             handleChartMouseLeave()
           }}
         >
-          <Group top={centerY} left={radius}>
+          <Group top={centerY} left={centerX}>
             {/* prettier-ignore */}
             <Pie
               data={filteredData || _data}
@@ -435,7 +542,7 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
               }) !important`}</style>
               <TooltipWithBounds
                 className={'tooltip cove-visualization'}
-                left={tooltipLeft + centerX - radius}
+                left={tooltipLeft + svgLeftOffset}
                 top={tooltipTop}
               >
                 <ul>

package/src/components/PieChart/helpers/labelPlacement.test.ts

@@ -0,0 +1,88 @@
+import { describe, expect, it } from 'vitest'
+import { getPieLabelPlacement, getPieLabelPosition } from './labelPlacement'
+
+describe('pie label placement', () => {
+  it('keeps labels inside regular pie slices when the slice has enough room', () => {
+    expect(
+      getPieLabelPlacement({
+        startAngle: 0,
+        endAngle: Math.PI / 2,
+        innerRadius: 0,
+        outerRadius: 120,
+        labelWidth: 50,
+        labelHeight: 28,
+        isDonut: false
+      })
+    ).toBe('inside')
+  })
+
+  it('moves regular pie labels outside when they are too wide for the slice', () => {
+    expect(
+      getPieLabelPlacement({
+        startAngle: 0,
+        endAngle: Math.PI / 8,
+        innerRadius: 0,
+        outerRadius: 120,
+        labelWidth: 80,
+        labelHeight: 28,
+        isDonut: false
+      })
+    ).toBe('outside')
+  })
+
+  it('always places donut labels outside the partition', () => {
+    expect(
+      getPieLabelPlacement({
+        startAngle: 0,
+        endAngle: Math.PI,
+        innerRadius: 60,
+        outerRadius: 120,
+        labelWidth: 20,
+        labelHeight: 20,
+        isDonut: true
+      })
+    ).toBe('outside')
+  })
+
+  it('anchors outside labels by side of the pie', () => {
+    const rightSide = getPieLabelPosition({
+      startAngle: 0,
+      endAngle: Math.PI / 8,
+      innerRadius: 0,
+      outerRadius: 120,
+      labelWidth: 80,
+      labelHeight: 28,
+      isDonut: false
+    })
+
+    const leftSide = getPieLabelPosition({
+      startAngle: Math.PI,
+      endAngle: Math.PI + Math.PI / 8,
+      innerRadius: 0,
+      outerRadius: 120,
+      labelWidth: 80,
+      labelHeight: 28,
+      isDonut: false
+    })
+
+    expect(rightSide.placement).toBe('outside')
+    expect(rightSide.textAnchor).toBe('start')
+    expect(leftSide.placement).toBe('outside')
+    expect(leftSide.textAnchor).toBe('end')
+  })
+
+  it('uses the same angle orientation as the arc generator', () => {
+    const topLabel = getPieLabelPosition({
+      startAngle: 0,
+      endAngle: Math.PI / 12,
+      innerRadius: 0,
+      outerRadius: 120,
+      labelWidth: 80,
+      labelHeight: 28,
+      isDonut: false
+    })
+
+    expect(topLabel.placement).toBe('outside')
+    expect(topLabel.y).toBeLessThan(0)
+  })
+})

package/src/components/PieChart/helpers/labelPlacement.ts

@@ -0,0 +1,95 @@
+export type PieLabelPlacement = 'inside' | 'outside'
+
+export type PieLabelAnchor = 'start' | 'middle' | 'end'
+
+export type PieLabelPosition = {
+  placement: PieLabelPlacement
+  x: number
+  y: number
+  textAnchor: PieLabelAnchor
+}
+
+type PieLabelPlacementOptions = {
+  startAngle: number
+  endAngle: number
+  innerRadius: number
+  outerRadius: number
+  labelWidth: number
+  labelHeight: number
+  isDonut: boolean
+  insidePadding?: number
+}
+
+type PieLabelPositionOptions = PieLabelPlacementOptions & {
+  outsideOffset?: number
+}
+
+const DEFAULT_INSIDE_PADDING = 12
+const DEFAULT_OUTSIDE_OFFSET = 22
+
+const getMidAngle = (startAngle: number, endAngle: number) => startAngle + (endAngle - startAngle) / 2
+const getArcPoint = (angle: number, radius: number) => ({
+  x: Math.sin(angle) * radius,
+  y: -Math.cos(angle) * radius
+})
+
+export const getPieLabelPlacement = ({
+  startAngle,
+  endAngle,
+  innerRadius,
+  outerRadius,
+  labelWidth,
+  labelHeight,
+  isDonut,
+  insidePadding = DEFAULT_INSIDE_PADDING
+}: PieLabelPlacementOptions): PieLabelPlacement => {
+  if (isDonut) return 'outside'
+
+  const angle = Math.abs(endAngle - startAngle)
+  const labelRadius = innerRadius + (outerRadius - innerRadius) * 0.62
+  const availableChord = 2 * labelRadius * Math.sin(angle / 2)
+  const availableRadialDepth = outerRadius - innerRadius
+
+  const hasEnoughArcWidth = labelWidth + insidePadding <= availableChord
+  const hasEnoughRadialDepth = labelHeight + insidePadding <= availableRadialDepth
+
+  return hasEnoughArcWidth && hasEnoughRadialDepth ? 'inside' : 'outside'
+}
+
+export const getPieLabelPosition = ({
+  startAngle,
+  endAngle,
+  innerRadius,
+  outerRadius,
+  labelWidth,
+  labelHeight,
+  isDonut,
+  insidePadding,
+  outsideOffset = DEFAULT_OUTSIDE_OFFSET
+}: PieLabelPositionOptions): PieLabelPosition => {
+  const placement = getPieLabelPlacement({
+    startAngle,
+    endAngle,
+    innerRadius,
+    outerRadius,
+    labelWidth,
+    labelHeight,
+    isDonut,
+    insidePadding
+  })
+  const midAngle = getMidAngle(startAngle, endAngle)
+  const labelRadius =
+    placement === 'inside' ? innerRadius + (outerRadius - innerRadius) * 0.62 : outerRadius + outsideOffset
+  const { x, y } = getArcPoint(midAngle, labelRadius)
+
+  if (placement === 'inside') {
+    return { placement, x, y, textAnchor: 'middle' }
+  }
+
+  return {
+    placement,
+    x,
+    y,
+    textAnchor: x < 0 ? 'end' : 'start'
+  }
+}

package/src/components/ScatterPlot/ScatterPlot.jsx

@@ -5,6 +5,7 @@ import { formatNumber as formatColNumber } from '@cdc/core/helpers/cove/number'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 import { buildSeriesTooltipListHtml } from '../../helpers/tooltipHelpers'
+import { getSeriesColumnFormattingParams } from '../../helpers/seriesColumnSettings'
 
 const ScatterPlot = ({ xScale, yScale, yAxisWidth, getXAxisData }) => {
   const {
@@ -25,16 +26,7 @@ const ScatterPlot = ({ xScale, yScale, yAxisWidth, getXAxisData }) => {
   // tooltips for additional columns
   const additionalColumns = Object.entries(config.columns)
     .filter(([_, value]) => value.tooltips)
-    .map(([_, value]) => [
-      value.label || value.name,
-      value.name,
-      {
-        addColPrefix: value.prefix,
-        addColSuffix: value.suffix,
-        addColRoundTo: value.roundToPlace,
-        addColCommas: value.commas
-      }
-    ])
+    .map(([_, value]) => [value.label || value.name, value.name, getSeriesColumnFormattingParams(value)])
   const handleTooltip = (item, s, dataIndex) => `<div>
     ${buildSeriesTooltipListHtml({
       config,

package/src/data/initial-state.js

@@ -144,6 +144,8 @@ const createInitialState = () => {
       padding: 5,
       showYearsOnce: false,
       sortByRecentDate: false,
+      categoryOrder: [],
+      categoryOrderType: 'data',
       brushActive: false,
       brushDefaultRecentDateCount: undefined,
       brushDynamicYAxis: false,

package/src/helpers/categoryOrder.ts

@@ -0,0 +1,60 @@
+import { ChartConfig } from '../types/ChartConfig'
+
+type DataRow = Record<string, any>
+
+export const isCustomCategoryOrderActive = (config: Pick<ChartConfig, 'xAxis'>) => {
+  return (
+    config.xAxis?.type === 'categorical' &&
+    config.xAxis?.categoryOrderType === 'custom' &&
+    Array.isArray(config.xAxis?.categoryOrder) &&
+    config.xAxis.categoryOrder.length > 0 &&
+    Boolean(config.xAxis?.dataKey)
+  )
+}
+
+export const getCategoryValues = (data: DataRow[] = [], dataKey?: string): string[] => {
+  if (!dataKey || !Array.isArray(data)) return []
+
+  const values: string[] = []
+  for (const row of data) {
+    const value = String(row?.[dataKey] ?? '')
+    if (value !== '') values.push(value)
+  }
+
+  return Array.from(new Set(values))
+}
+
+export const getOrderedCategoryValues = (
+  data: DataRow[] = [],
+  dataKey?: string,
+  categoryOrder: string[] = []
+): string[] => {
+  const values = getCategoryValues(data, dataKey)
+  if (!categoryOrder?.length) return values
+
+  const configuredValues = categoryOrder.map(String)
+  const configuredValueSet = new Set(configuredValues)
+  const valueSet = new Set(values)
+  const extras = values.filter(value => !configuredValueSet.has(value))
+
+  return [...configuredValues.filter(value => valueSet.has(value)), ...extras]
+}
+
+export const sortByCategoryOrder = (data: DataRow[] = [], config: Pick<ChartConfig, 'xAxis'>): DataRow[] => {
+  if (!Array.isArray(data) || !isCustomCategoryOrderActive(config)) return data
+
+  const dataKey = config.xAxis.dataKey
+  const categoryOrder = Array.from(new Set((config.xAxis.categoryOrder || []).map(String)))
+  const indexByValue = new Map(categoryOrder.map((value, index) => [value, index]))
+  return data
+    .map((row, originalIndex) => ({ row, originalIndex }))
+    .sort((a, b) => {
+      const indexA = indexByValue.get(String(a.row?.[dataKey] ?? ''))
+      const indexB = indexByValue.get(String(b.row?.[dataKey] ?? ''))
+      const rankA = indexA ?? Number.MAX_SAFE_INTEGER
+      const rankB = indexB ?? Number.MAX_SAFE_INTEGER
+
+      return rankA === rankB ? a.originalIndex - b.originalIndex : rankA - rankB
+    })
+    .map(({ row }) => row)
+}

package/src/helpers/getBoxPlotConfig.ts

@@ -1,11 +1,18 @@
-import _ from 'lodash'
+import capitalize from 'lodash/capitalize'
+import chain from 'lodash/chain'
+import filter from 'lodash/filter'
+import flatMap from 'lodash/flatMap'
+import map from 'lodash/map'
+import min from 'lodash/min'
+import round from 'lodash/round'
+import uniq from 'lodash/uniq'
 import { ChartConfig } from '../types/ChartConfig'
 import * as d3 from 'd3-array'
 
 export const getBoxPlotConfig = (newConfig: ChartConfig, data: object[]) => {
   const combinedData = data
-  const groups = _.uniq(_.map(combinedData, newConfig.xAxis.dataKey))
-  const seriesKeys = _.map(newConfig.series, 'dataKey')
+  const groups = uniq(map(combinedData, newConfig.xAxis.dataKey))
+  const seriesKeys = map(newConfig.series, 'dataKey')
   const plots: any[] = []
 
   groups.forEach(g => {
@@ -14,13 +21,13 @@ export const getBoxPlotConfig = (newConfig: ChartConfig, data: object[]) => {
         if (!g) throw new Error('No groups resolved in box plots')
 
         // Start handle operations on combinedData
-        const { count, sortedData } = _.chain(combinedData)
+        const { count, sortedData } = chain(combinedData)
           // Filter by xAxis data key
           .filter(item => item[newConfig.xAxis.dataKey] === g)
           // perform multiple operations on the filtered data
           .thru(filteredData => ({
             count: filteredData.length,
-            sortedData: _.map(filteredData, item => Number(item[seriesKey])).sort()
+            sortedData: map(filteredData, item => Number(item[seriesKey])).sort()
           }))
           // get the results from the chain
           .value()
@@ -38,19 +45,19 @@ export const getBoxPlotConfig = (newConfig: ChartConfig, data: object[]) => {
         plots.push({
           columnCategory: g,
           columnMax: d3.max(nonOutliers),
-          columnThirdQuartile: _.round(q3, newConfig.dataFormat.roundTo),
+          columnThirdQuartile: round(q3, newConfig.dataFormat.roundTo),
           columnMedian: Number(d3.median(sortedData)).toFixed(newConfig.dataFormat.roundTo),
-          columnFirstQuartile: _.round(q1, newConfig.dataFormat.roundTo),
-          columnMin: _.min(nonOutliers),
+          columnFirstQuartile: round(q1, newConfig.dataFormat.roundTo),
+          columnMin: min(nonOutliers),
           columnCount: count,
           columnSd: Number(d3.deviation(sortedData)).toFixed(newConfig.dataFormat.roundTo),
           columnMean: Number(d3.mean(sortedData)).toFixed(newConfig.dataFormat.roundTo),
-          columnIqr: _.round(iqr, newConfig.dataFormat.roundTo),
+          columnIqr: round(iqr, newConfig.dataFormat.roundTo),
           values: sortedData,
           columnLowerBounds: lowerBounds,
           columnUpperBounds: upperBounds,
-          columnOutliers: _.filter(sortedData, value => value < lowerBounds || value > upperBounds),
-          columnNonOutliers: _.filter(sortedData, value => value >= lowerBounds && value <= upperBounds)
+          columnOutliers: filter(sortedData, value => value < lowerBounds || value > upperBounds),
+          columnNonOutliers: filter(sortedData, value => value >= lowerBounds && value <= upperBounds)
         })
       } catch (e) {
         console.error('COVE: ', e.message) // eslint-disable-line
@@ -61,7 +68,7 @@ export const getBoxPlotConfig = (newConfig: ChartConfig, data: object[]) => {
   // Generate a flat list of categories based on seriesKeys and groups
   const categories =
     seriesKeys.length > 1
-      ? _.flatMap(groups, value => _.map(seriesKeys, key => `${_.capitalize(key)} - ${_.capitalize(value)}`))
+      ? flatMap(groups, value => map(seriesKeys, key => `${capitalize(key)} - ${capitalize(value)}`))
       : groups
 
   return [plots, categories]

package/src/helpers/getComboChartConfig.ts

@@ -1,4 +1,3 @@
-import _ from 'lodash'
 import { ChartConfig } from '../types/ChartConfig'
 import * as d3 from 'd3-array'
 

package/src/helpers/getExcludedData.ts

@@ -1,5 +1,4 @@
 import { isDateScale } from '@cdc/core/helpers/cove/date'
-import _ from 'lodash'
 import { ChartConfig } from '../types/ChartConfig'
 export const getExcludedData = (newConfig: ChartConfig, data: object[]) => {
   if (!Array.isArray(data)) {

package/src/helpers/getHasBoundarySuppression.ts

@@ -1,4 +1,5 @@
-import _ from 'lodash'
+import pick from 'lodash/pick'
+import values from 'lodash/values'
 import { ChartConfig } from '../types/ChartConfig'
 
 type GetHasBoundarySuppressionProps = {
@@ -15,9 +16,9 @@ export const getHasBoundarySuppression = ({ rows, config }: GetHasBoundarySuppre
 
   return boundaryRows.some(item =>
     suppressionRules.some(({ column, value }) => {
-      const values = _.values(_.pick(item, config.runtime?.seriesKeys))
+      const seriesValues = values(pick(item, config.runtime?.seriesKeys))
       const dynamicCategory = config.series[0]?.dynamicCategory
-      const match = column ? item[column] === value : values.includes(value)
+      const match = column ? item[column] === value : seriesValues.includes(value)
       const dynamic = dynamicCategory && (item[dynamicCategory] === column || !column)
 
       return Boolean(match || dynamic)

package/src/helpers/getMinMax.ts

@@ -190,7 +190,8 @@ const getMinMax = ({
 
     const isCategorical = config.yAxis.type === 'categorical'
 
-    min = enteredMinValue !== '' && isMinValid ? numEnteredMin : hasBoundarySuppression ? 0 : isCategorical ? 0 : minValue
+    min =
+      enteredMinValue !== '' && isMinValid ? numEnteredMin : hasBoundarySuppression ? 0 : isCategorical ? 0 : minValue
   }
 
   //If data value max wasn't provided, calculate it

package/src/helpers/getNewRuntime.ts

@@ -1,5 +1,3 @@
-import _ from 'lodash'
-
 export const getNewRuntime = (visualizationConfig, newFilteredData) => {
   const runtime = visualizationConfig.runtime ? { ...visualizationConfig.runtime } : {}
   runtime.series = []