@cdc/chart 4.25.3 → 4.25.6

package/src/components/PairedBarChart.jsx

@@ -6,6 +6,7 @@ import { Text } from '@visx/text'
 
 import ConfigContext from '../ConfigContext'
 import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
+import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 
 const PairedBarChart = ({ width, height, originalWidth }) => {
@@ -47,8 +48,8 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
   })
 
   // Set label color
-  groupOne.labelColor = groupOne.color ? getContrastColor('#000', groupOne.color) : '#000'
-  groupTwo.labelColor = groupTwo.color ? getContrastColor('#000', groupTwo.color) : '#000'
+  groupOne.labelColor = groupOne.color ? getContrastColor(APP_FONT_COLOR, groupOne.color) : APP_FONT_COLOR
+  groupTwo.labelColor = groupTwo.color ? getContrastColor(APP_FONT_COLOR, groupTwo.color) : APP_FONT_COLOR
 
   const label = config.yAxis.label ? `${config.yAxis.label}: ` : ''
 

package/src/components/PieChart/PieChart.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useState, useEffect, useRef, useMemo } from 'react'
-import { animated, useTransition, interpolate } from 'react-spring'
+import { animated, useTransition, to } from '@react-spring/web'
 
 // visx
 import { Pie } from '@visx/shape'
@@ -14,16 +14,9 @@ import { useTooltip as useCoveTooltip } from '../../hooks/useTooltip'
 import useIntersectionObserver from '../../hooks/useIntersectionObserver'
 import { handleChartAriaLabels } from '../../helpers/handleChartAriaLabels'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import LegendComponent from '../Legend/Legend.Component'
-import { createFormatLabels } from '../Legend/helpers/createFormatLabels'
 import { scaleOrdinal } from '@visx/scale'
 import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 
-const enterUpdateTransition = ({ startAngle, endAngle }) => ({
-  startAngle,
-  endAngle
-})
-
 type TooltipData = {
   data: {
     [key: string]: string | number
@@ -53,28 +46,51 @@ const PieChart = props => {
   const pivotColumns = Object.values(config.columns).filter(column => column.showInViz)
   const dataNeedsPivot = pivotColumns.length > 0
   const pivotKey = dataNeedsPivot ? 'pivotColumn' : undefined
+  const showPercentage = config.dataFormat.showPiePercent
+  const labelForCalcArea = 'Calculated Area'
+
   const _data = useMemo(() => {
+    let baseData = []
+
     if (dataNeedsPivot) {
-      let newData = []
       const primaryColumn = config.yAxis.dataKey
       const additionalColumns = pivotColumns.map(column => column.name)
       const allColumns = [primaryColumn, ...additionalColumns]
       const columnToUpdate = config.xAxis.dataKey
+
       data.forEach(d => {
         allColumns.forEach(col => {
-          const data = d[col]
-          if (data) {
-            newData.push({
-              [pivotKey]: data,
+          const val = d[col]
+          if (val) {
+            baseData.push({
+              [pivotKey]: val,
               [columnToUpdate]: `${d[columnToUpdate]} - ${col}`
             })
           }
         })
       })
-      return newData
+    } else {
+      baseData = [...data]
     }
-    return data
-  }, [data, dataNeedsPivot])
+
+    // === ADD "OTHER" IF PERCENT MODE IS ENABLED ===
+    if (showPercentage) {
+      const total = baseData.reduce((sum, d) => {
+        const val = parseFloat(d[config.runtime.yAxis.dataKey])
+        return sum + (isNaN(val) ? 0 : val)
+      }, 0)
+
+      if (total < 100) {
+        const remaining = 100 - total
+        baseData.push({
+          [config.runtime.xAxis.dataKey]: labelForCalcArea,
+          [config.runtime.yAxis.dataKey]: remaining
+        })
+      }
+    }
+
+    return baseData
+  }, [data, dataNeedsPivot, showPercentage, config])
 
   const _colorScale = useMemo(() => {
     if (dataNeedsPivot) {
@@ -85,15 +101,31 @@ const PieChart = props => {
       const numberOfKeys = Object.entries(keys).length
       let palette = config.customColors || colorPalettes[config.palette]
       palette = palette.slice(0, numberOfKeys)
-
       return scaleOrdinal({
         domain: Object.keys(keys),
         range: palette,
         unknown: null
       })
     }
+
+    if (showPercentage) {
+      const keys = {}
+      _data.forEach(d => {
+        keys[d[config.xAxis.dataKey]] = true
+      })
+      // take out Calculated Area so it falls back to `unknown`
+      const domainKeys = Object.keys(keys).filter(k => k !== labelForCalcArea)
+
+      const basePalette = (config.customColors || colorPalettes[config.palette]).slice(0, domainKeys.length)
+      const COOL_GRAY_90 = getComputedStyle(document.documentElement).getPropertyValue('--cool-gray-10').trim()
+      return scaleOrdinal({
+        domain: domainKeys,
+        range: basePalette,
+        unknown: COOL_GRAY_90
+      })
+    }
     return colorScale
-  }, [colorScale, dataNeedsPivot])
+  }, [_data, dataNeedsPivot, colorScale])
 
   const triggerRef = useRef()
   const dataRef = useIntersectionObserver(triggerRef, {
@@ -117,92 +149,77 @@ const PieChart = props => {
     }
   }, [dataRef?.isIntersecting, config.animate]) // eslint-disable-line
 
-  const AnimatedPie = ({ arcs, path, getKey }) => {
-    const transitions = useTransition(arcs, getKey, {
-      from: enterUpdateTransition,
-      enter: enterUpdateTransition,
-      update: enterUpdateTransition,
-      leave: enterUpdateTransition
+  function AnimatedPie({ arcs, path, getKey, colorScale, onHover, onLeave }) {
+    const enterExit = ({ startAngle, endAngle }) => ({ startAngle, endAngle })
+    const transitions = useTransition(arcs, {
+      keys: getKey,
+      from: enterExit,
+      enter: enterExit,
+      update: enterExit,
+      leave: enterExit
     })
 
-    // DEV-5053
-    // onMouseLeave function doesn't work on animated.path for some reason.
-    // As a workaround, we continue to fire the tooltipData while hovered,
-    // and use this useEffect to hide the tooltip so it doesn't persist when users scroll.
-    useEffect(() => {
-      const timeout = setTimeout(() => {
-        hideTooltip()
-      }, 500)
-      return () => {
-        clearTimeout(timeout)
+    return transitions((styles, arc) => {
+      const key = getKey(arc)
+      let textColor = '#FFF'
+
+      if (key && _colorScale(key)) {
+        textColor = getContrastColor(textColor, _colorScale(arc.data[config.runtime.xAxis.dataKey]))
       }
-    }, [tooltipData])
-
-    return (
-      <>
-        {transitions.map(({ item: arc, props, key }, animatedPieIndex) => {
-          return (
-            <Group
-              className={arc.data[config.xAxis.dataKey]}
-              key={`${key}-${animatedPieIndex}`}
-              style={{
-                opacity:
-                  config.legend.behavior === 'highlight' &&
-                  seriesHighlight.length > 0 &&
-                  seriesHighlight.indexOf(arc.data[config.runtime.xAxis.dataKey]) === -1
-                    ? 0.5
-                    : 1
-              }}
+      const roundTo = Number(config.dataFormat.roundTo) || 0
+      // Calculate the percentage of the full circle (360 degrees)
+      const degrees = ((arc.endAngle - arc.startAngle) * 180) / Math.PI
+      const valueFromData = parseFloat(arc.data[config.runtime.yAxis.dataKey])
+      const percentageToDisplay = showPercentage ? valueFromData : (degrees / 360) * 100
+
+      let roundedPercentage = percentageToDisplay.toFixed(roundTo) + '%'
+      // add missing pie part
+      if (arc.data[config.xAxis.dataKey] === labelForCalcArea && config.dataFormat.showPiePercent) {
+        roundedPercentage = '**'
+      }
+
+      return (
+        <Group key={key} className={`slice-${key}`}>
+          {/* ── the slice */}
+          <animated.path
+            d={to([styles.startAngle, styles.endAngle], (start, end) =>
+              path({ ...arc, startAngle: start, endAngle: end })
+            )}
+            fill={colorScale(key)}
+            onMouseEnter={e =>
+              onHover(e, {
+                data: arc.data,
+                dataXPosition: e.clientX,
+                dataYPosition: e.clientY,
+                startAngle: arc.startAngle,
+                endAngle: arc.endAngle
+              })
+            }
+            onMouseLeave={onLeave}
+          />
+
+          {/* ── the percentage label */}
+          {arc.endAngle - arc.startAngle > 0.1 && (
+            <animated.text
+              transform={to([styles.startAngle, styles.endAngle], (start, end) => {
+                const [x, y] = path.centroid({
+                  ...arc,
+                  startAngle: start,
+                  endAngle: end
+                })
+                return `translate(${x},${y})`
+              })}
+              textAnchor='middle'
+              pointerEvents='none'
+              fill={textColor}
             >
-              <animated.path
-                d={interpolate([props.startAngle, props.endAngle], (startAngle, endAngle) =>
-                  path({
-                    ...arc,
-                    startAngle,
-                    endAngle
-                  })
-                )}
-                fill={_colorScale(arc.data[config.runtime.xAxis.dataKey])}
-                onMouseEnter={e => handleTooltipMouseOver(e, { data: arc.data[config.runtime.xAxis.dataKey], arc })}
-                onMouseLeave={e => handleTooltipMouseOff()}
-              />
-            </Group>
-          )
-        })}
-        {transitions.map(({ item: arc, key }, i) => {
-          const roundTo = Number(config.dataFormat.roundTo) || 0
-          const [centroidX, centroidY] = path.centroid(arc)
-          const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.1
-
-          let textColor = '#FFF'
-          if (_colorScale(arc.data[config.runtime.xAxis.dataKey])) {
-            textColor = getContrastColor(textColor, _colorScale(arc.data[config.runtime.xAxis.dataKey]))
-          }
-          const degrees = ((arc.endAngle - arc.startAngle) * 180) / Math.PI
-
-          // Calculate the percentage of the full circle (360 degrees)
-          const percentageOfCircle = (degrees / 360) * 100
-          const roundedPercentage = percentageOfCircle.toFixed(roundTo)
-
-          return (
-            <animated.g key={`${key}${i}`}>
-              {hasSpaceForLabel && (
-                <Text
-                  style={{ fill: textColor }}
-                  x={centroidX}
-                  y={centroidY}
-                  dy='.33em'
-                  textAnchor='middle'
-                  pointerEvents='none'
-                >
-                  {roundedPercentage + '%'}
-                </Text>
-              )}
-            </animated.g>
-          )
-        })}
-      </>
-    )
+              {/** compute text inside the spring callback */}
+              {roundedPercentage}
+            </animated.text>
+          )}
+        </Group>
+      )
+    })
   }
 
   let chartWidth = props.parentWidth
@@ -257,12 +274,20 @@ const PieChart = props => {
             {/* prettier-ignore */}
             <Pie
             data={filteredData || _data}
-            pieValue={d => d[pivotKey || config.runtime.yAxis.dataKey]}
+            pieValue={d => parseFloat(d[pivotKey || config.runtime.yAxis.dataKey])}
             pieSortValues={() => -1}
             innerRadius={radius - donutThickness}
             outerRadius={radius}
           >
-            {pie => <AnimatedPie {...pie} getKey={d => d.data[config.runtime.xAxis.dataKey]}/>}
+           {pie => (
+             <AnimatedPie
+             {...pie}
+              getKey={d => d.data[config.runtime.xAxis.dataKey]}
+              colorScale={_colorScale}
+              onHover={handleTooltipMouseOver}
+               onLeave={handleTooltipMouseOff}
+           />
+            )}
           </Pie>
           </Group>
         </svg>

package/src/components/ScatterPlot/ScatterPlot.jsx

@@ -59,6 +59,11 @@ const ScatterPlot = ({ xScale, yScale }) => {
             opacity: 1,
             stroke: displayArea ? 'black' : ''
           }
+          if (item[s]==='') {
+            return <> </>
+          }
+
+
 
           return (
             <circle

package/src/components/Sparkline/components/SparkLine.tsx

@@ -18,17 +18,29 @@ type SparkLineProps = {
 
 const SparkLine: React.FC<SparkLineProps> = props => {
   const { width: parentWidth, height: parentHeight } = props
-  const { transformedData: data, config, parseDate, formatDate, seriesHighlight, formatNumber, colorScale, handleChartAriaLabels } = useContext(ConfigContext)
+  const {
+    transformedData: data,
+    config,
+    parseDate,
+    formatDate,
+    seriesHighlight,
+    formatNumber,
+    colorScale,
+    handleChartAriaLabels
+  } = useContext(ConfigContext)
   let width = Number(parentWidth)
   const { minValue, maxValue } = useReduceData(config, data, ConfigContext)
 
-  const margin = { top: 5, right: 10, bottom: 10, left: 10 }
+  const margin = { top: 5, right: 20, bottom: 10, left: 10 }
   const height = Number(parentHeight)
 
   const xMax = width - config.runtime.yAxis.size
   const yMax = height - margin.top - 20
 
-  const getXAxisData = d => (config.runtime.xAxis.type === 'date' ? parseDate(d[config.runtime.originalXAxis.dataKey]).getTime() : d[config.runtime.originalXAxis.dataKey])
+  const getXAxisData = d =>
+    config.runtime.xAxis.type === 'date'
+      ? parseDate(d[config.runtime.originalXAxis.dataKey]).getTime()
+      : d[config.runtime.originalXAxis.dataKey]
   const getYAxisData = (d, seriesKey) => d[seriesKey]
 
   let xScale
@@ -61,7 +73,10 @@ const SparkLine: React.FC<SparkLineProps> = props => {
         range: [0, xMax]
       })
 
-      yScale = config.runtime.xAxis.type === 'date' ? scaleLinear({ domain: [Math.min(...xAxisDataMapped), Math.max(...xAxisDataMapped)] }) : scalePoint({ domain: xAxisDataMapped, padding: 0.5 })
+      yScale =
+        config.runtime.xAxis.type === 'date'
+          ? scaleLinear({ domain: [Math.min(...xAxisDataMapped), Math.max(...xAxisDataMapped)] })
+          : scalePoint({ domain: xAxisDataMapped, padding: 0.5 })
 
       seriesScale = scalePoint({
         domain: config.runtime.barSeriesKeys || config.runtime.seriesKeys,
@@ -94,7 +109,14 @@ const SparkLine: React.FC<SparkLineProps> = props => {
 
   return (
     <ErrorBoundary component='SparkLine'>
-      <svg role='img' aria-label={handleChartAriaLabels(config)} width={parentWidth} height={100} className={'sparkline'} tabIndex={0}>
+      <svg
+        role='img'
+        aria-label={handleChartAriaLabels(config)}
+        width={parentWidth}
+        height={100}
+        className={'sparkline'}
+        tabIndex={0}
+      >
         <title>{`Spark line graphic with the title ${config.title ? config.title : 'No Title Found'}`}</title>
         {config.runtime.lineSeriesKeys?.length > 0
           ? config.runtime.lineSeriesKeys
@@ -104,30 +126,70 @@ const SparkLine: React.FC<SparkLineProps> = props => {
                   style={{ width }}
                   className='sparkline-group'
                   key={`series-${seriesKey}`}
-                  opacity={config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(seriesKey) === -1 ? 0.5 : 1}
-                  display={config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(seriesKey) !== -1 ? 'block' : 'none'}
+                  opacity={
+                    config.legend.behavior === 'highlight' &&
+                    seriesHighlight.length > 0 &&
+                    seriesHighlight.indexOf(seriesKey) === -1
+                      ? 0.5
+                      : 1
+                  }
+                  display={
+                    config.legend.behavior === 'highlight' ||
+                    seriesHighlight.length === 0 ||
+                    seriesHighlight.indexOf(seriesKey) !== -1
+                      ? 'block'
+                      : 'none'
+                  }
                 >
-                  {config.labels && data.map((d, dataIndex) => {
-                    return (
-                      <Group key={`series-${seriesKey}-point-${dataIndex}`}>
-                        <Text x={xScale(getXAxisData(d))} y={yScale(getYAxisData(d, seriesKey))} fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'} textAnchor='middle'>
-                          {formatNumber(d[seriesKey])}
-                        </Text>
-                      </Group>
-                    )
-                  })}
+                  {config.labels &&
+                    data.map((d, dataIndex) => {
+                      return (
+                        <Group key={`series-${seriesKey}-point-${dataIndex}`}>
+                          <Text
+                            x={xScale(getXAxisData(d))}
+                            y={yScale(getYAxisData(d, seriesKey))}
+                            fill={
+                              colorScale
+                                ? colorScale(
+                                    config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey
+                                  )
+                                : '#000'
+                            }
+                            textAnchor='middle'
+                          >
+                            {formatNumber(d[seriesKey])}
+                          </Text>
+                        </Group>
+                      )
+                    })}
                   <LinePath
                     curve={allCurves.curveLinear}
                     data={data}
                     x={d => xScale(getXAxisData(d))}
                     y={d => yScale(getYAxisData(d, seriesKey))}
-                    stroke={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
+                    stroke={
+                      colorScale
+                        ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey)
+                        : '#000'
+                    }
                     strokeWidth={2}
                     strokeOpacity={1}
                     shapeRendering='geometricPrecision'
                     markerEnd={`url(#${'arrow'}--${index})`}
                   />
-                  <MarkerArrow id={`arrow--${index}`} refX={2} size={6} markerEnd={`url(#${'arrow'}--${index})`} strokeOpacity={1} fillOpacity={1} fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'} />
+                  <MarkerArrow
+                    id={`arrow--${index}`}
+                    refX={2}
+                    size={6}
+                    markerEnd={`url(#${'arrow'}--${index})`}
+                    strokeOpacity={1}
+                    fillOpacity={1}
+                    fill={
+                      colorScale
+                        ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey)
+                        : '#000'
+                    }
+                  />
                 </Group>
                 <AxisBottom
                   top={yMax + margin.top}

package/src/data/initial-state.js

@@ -89,6 +89,11 @@ export default {
   topAxis: {
     hasLine: false
   },
+  brush: {
+    isActive: false,
+    isBrushing: false,
+    data: []
+  },
   isLegendValue: false,
   barThickness: 0.35,
   barHeight: 25,
@@ -120,7 +125,8 @@ export default {
     maxTickRotation: 0,
     padding: 5,
     showYearsOnce: false,
-    sortByRecentDate: false
+    sortByRecentDate: false,
+    brushActive: false
   },
   table: {
     label: 'Data Table',
@@ -168,16 +174,15 @@ export default {
     groupBy: '',
     shape: 'circle',
     tickRotation: '',
+    order: 'dataColumn',
     hideBorder: {
       side: false,
       topBottom: true
     },
-    position: 'right'
-  },
-  brush: {
-    height: 45,
-    active: false
+    position: 'right',
+    orderedValues: []
   },
+
   exclusions: {
     active: false,
     keys: []

package/src/helpers/countNumOfTicks.ts

@@ -25,7 +25,7 @@ export const countNumOfTicks = ({ axis, max, runtime, currentViewport, isHorizon
     }
     if (Number(tickCount) > Number(max) && !isHorizontal) {
       // cap it and round it so its an integer
-      tickCount = Number(min) < 0 ? Math.round(max) * 2 : Math.round(max)
+      tickCount = Math.max(2, Number(min) < 0 ? Math.round(max) * 2 : Math.round(max))
     }
   }
 

package/src/helpers/dataHelpers.ts

@@ -1,10 +1,31 @@
+import { Series } from '@cdc/core/types/Series'
 import { ChartConfig } from '../types/ChartConfig'
 
 export const getSeriesWithData = (config: ChartConfig) => {
-  const { filters, data, runtime } = config
+  const { filters, data, runtime, legend } = config
+  const { colorCode } = legend
   const { series } = runtime
 
   const filteredData = data.filter(d => filters.every(f => d[f.columnName] === f.active))
+  const colorCodeSeries = colorCode && Array.from(new Set(filteredData.map(d => d[colorCode])))
 
-  return series.filter(s => filteredData.some(d => d[s.dynamicCategory || s.dataKey])).map(s => s.name || s.dataKey)
+  const result = series
+    .flatMap(s => {
+      if (!colorCode || s.type !== 'Bar') return s
+      return colorCodeSeries.map(c => ({ ...s, colorCodeSeries: c }))
+    })
+    .map(s => ({
+      ...s,
+      data: filteredData
+        .filter(d => !s.dynamicCategory || d[s.dynamicCategory] === s.dataKey)
+        .filter(d => !s.colorCodeSeries || d[colorCode] === s.colorCodeSeries)
+        .filter(d => {
+          const key = s.dynamicCategory ? s.originalDataKey : s.dataKey
+          return d[key] || d[key] === 0
+        })
+    }))
+    .filter(s => s.data.length)
+    .map(s => s.colorCodeSeries || s.name || s.dataKey)
+
+  return result
 }

package/src/helpers/getNewRuntime.ts

@@ -0,0 +1,35 @@
+import _ from 'lodash'
+
+export const getNewRuntime = (visualizationConfig, newFilteredData) => {
+  const runtime = _.cloneDeep(visualizationConfig.runtime) || {}
+  runtime.series = []
+  runtime.seriesLabels = {}
+  runtime.seriesLabelsAll = []
+  const { filters, columns, dynamicSeriesType, dynamicSeriesLineType, xAxis } = visualizationConfig
+  if (newFilteredData?.length) {
+    const columnNames = Object.keys(newFilteredData[0])
+    columnNames.forEach(colName => {
+      const isNotXAxis = xAxis.dataKey !== colName
+      const isNotFiltered = !filters || !filters?.find(filter => filter.columnName === colName)
+      const noColConfiguration = !columns || Object.keys(columns).indexOf(colName) === -1
+      if (isNotXAxis && isNotFiltered && noColConfiguration) {
+        runtime.series.push({
+          dataKey: colName,
+          type: dynamicSeriesType,
+          lineType: dynamicSeriesLineType,
+          tooltip: true
+        })
+      }
+    })
+  }
+
+  runtime.seriesKeys = runtime.series
+    ? runtime.series.map(series => {
+        runtime.seriesLabels[series.dataKey] = series.name || series.label || series.dataKey
+        runtime.seriesLabelsAll.push(series.name || series.dataKey)
+        return series.dataKey
+      })
+    : []
+
+  return runtime
+}

package/src/helpers/getPiePercent.ts

@@ -0,0 +1,22 @@
+import _ from 'lodash'
+
+export const getPiePercent = (data: Record<string, any>[], seriesKey: string): Record<string, any>[] => {
+  // getonly the numeric values for each seriesKey
+  const numericValues = data.map(row => _.toNumber(row[seriesKey])).filter(v => !Number.isNaN(v))
+
+  const total = numericValues.reduce((sum, v) => sum + v, 0)
+
+  return data.map(row => {
+    const raw = _.toNumber(row[seriesKey])
+    if (Number.isNaN(raw)) {
+      // skip non-numeric / undefined
+      return row
+    }
+
+    const pct = total === 0 ? 0 : (raw / total) * 100
+    return {
+      ...row,
+      [seriesKey]: pct
+    }
+  })
+}

package/src/helpers/getTransformedData.ts

@@ -0,0 +1,22 @@
+type DataRow = Record<string, any>
+
+export const getTransformedData = ({
+  brushData,
+  filteredData,
+  excludedData,
+  clean
+}: {
+  brushData: DataRow[]
+  filteredData: DataRow[]
+  excludedData: DataRow[]
+  clean: (data: DataRow[]) => DataRow[]
+}): DataRow[] => {
+  const data =
+    Array.isArray(brushData) && brushData.length > 0
+      ? brushData
+      : Array.isArray(filteredData) && filteredData.length > 0
+      ? filteredData
+      : excludedData
+
+  return clean(data)
+}

package/src/helpers/sizeHelpers.ts

@@ -2,7 +2,7 @@ import { clamp } from 'lodash'
 
 import { isMobileHeightViewport } from '@cdc/core/helpers/viewports'
 import { ChartConfig, ViewportSize } from '../types/ChartConfig'
-import { EDITOR_WIDTH } from '../CdcChartComponent'
+import { EDITOR_WIDTH } from '@cdc/core/helpers/constants'
 
 export function getOrientation(
   { orientation, heights, visualizationType }: Pick<ChartConfig, 'orientation' | 'heights' | 'visualizationType'>,