@cdc/chart 4.24.11 → 4.24.12

package/src/components/BarChart/helpers/tests/getBarData.test.ts

@@ -0,0 +1,74 @@
+import { getBarData } from '../getBarData'
+
+import { TransformedData } from '../../../../types/ChartContext'
+import { ChartConfig } from '../../../../types/ChartConfig'
+
+describe('getBarData', () => {
+  it('should return the original data when there is no dynamicSeries', () => {
+    const config = {
+      series: [{ dataKey: 'value' }],
+      runtime: { originalXAxis: { dataKey: 'category' } }
+    } as ChartConfig
+    const data: TransformedData[] = [
+      { category: 'A', value: 10 },
+      { category: 'B', value: 20 }
+    ]
+    const hasConfidenceInterval = false
+
+    const result = getBarData(config, data, hasConfidenceInterval)
+
+    expect(result).toEqual(data)
+  })
+
+  it('should return transformed data when there is a dynamicSeries but no confidence interval', () => {
+    const config = {
+      series: [{ dataKey: 'value', dynamicCategory: 'subCategory' }],
+      runtime: { originalXAxis: { dataKey: 'category' } }
+    } as ChartConfig
+    const data: TransformedData[] = [
+      { category: 'A', subCategory: 'X', value: 10 },
+      { category: 'A', subCategory: 'Y', value: 20 },
+      { category: 'B', subCategory: 'X', value: 30 }
+    ]
+    const hasConfidenceInterval = false
+
+    const result = getBarData(config, data, hasConfidenceInterval)
+
+    expect(result).toEqual([
+      { category: 'A', X: 10, Y: 20, dynamicData: true },
+      { category: 'B', X: 30, dynamicData: true }
+    ])
+  })
+
+  it('should return transformed data with confidence intervals when there is a dynamicSeries and confidence interval', () => {
+    const config = {
+      series: [{ dataKey: 'value', dynamicCategory: 'subCategory' }],
+      runtime: { originalXAxis: { dataKey: 'category' } },
+      confidenceKeys: { lower: 'lowerCI', upper: 'upperCI' }
+    } as ChartConfig
+    const data: TransformedData[] = [
+      { category: 'A', subCategory: 'X', value: 10, lowerCI: 5, upperCI: 15 },
+      { category: 'A', subCategory: 'Y', value: 20, lowerCI: 15, upperCI: 25 },
+      { category: 'B', subCategory: 'X', value: 30, lowerCI: 25, upperCI: 35 }
+    ]
+    const hasConfidenceInterval = true
+
+    const result = getBarData(config, data, hasConfidenceInterval)
+
+    expect(result).toEqual([
+      {
+        category: 'A',
+        X: 10,
+        Y: 20,
+        CI: { X: { lower: 5, upper: 15 }, Y: { lower: 15, upper: 25 } },
+        dynamicData: true
+      },
+      {
+        category: 'B',
+        X: 30,
+        CI: { X: { lower: 25, upper: 35 } },
+        dynamicData: true
+      }
+    ])
+  })
+})

package/src/components/BoxPlot/BoxPlot.tsx

@@ -4,81 +4,22 @@ import { Group } from '@visx/group'
 import ConfigContext from '../../ConfigContext'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import { colorPalettesChart } from '@cdc/core/data/colorPalettes'
-import { scaleBand } from '@visx/scale'
+import { handleTooltip, calculateBoxPlotStats, createPlots } from './helpers/index'
 import _ from 'lodash'
-import { max, min, median, quantile } from 'd3-array'
-const CoveBoxPlot = ({ xScale, yScale }) => {
+
+const CoveBoxPlot = ({ xScale, yScale, seriesScale }) => {
   const { config, colorScale, seriesHighlight, transformedData: data } = useContext(ConfigContext)
   const { boxplot } = config
 
-  // tooltips
   const tooltip_id = `cdc-open-viz-tooltip-${config.runtime.uniqueId}`
-
-  const handleTooltip = (d, key, q1, q3, median, iqr) => {
-    return `
-      <strong>${d.columnCategory}</strong></br>
-       <strong>Key:${key}</strong></br>
-      ${boxplot.labels.q1}: ${q1}<br/>
-      ${boxplot.labels.q3}: ${q3}<br/>
-      ${boxplot.labels.iqr}: ${iqr}<br/>
-      ${boxplot.labels.median}: ${median}
-    `
-  }
-
   const boxWidth = xScale.bandwidth()
   const constrainedWidth = Math.min(40, boxWidth)
-  const color_0 = colorPalettesChart[config?.palette][0] ? colorPalettesChart[config?.palette][0] : '#000'
-  const seriesScale = scaleBand({
-    range: [0, config.barThickness * 100 || 1],
-    domain: config.series?.map(item => item?.dataKey)
-  })
-
-  const calculateBoxPlotStats = values => {
-    if (!values || !values.length) return {}
-    const sortedValues = values.sort((a, b) => a - b)
-    return {
-      min: min(values),
-      max: max(values),
-      median: median(values),
-      firstQuartile: quantile(sortedValues, 0.25),
-      thirdQuartile: quantile(sortedValues, 0.75)
-    }
-  }
-
-  const getValuesBySeriesKey = (group: string) => {
-    const allSeriesKeys = config.series.map(item => item?.dataKey)
-    const result = {}
-    const filteredData = data.filter(item => item[config.xAxis.dataKey] === group)
-    allSeriesKeys.forEach(key => {
-      result[key] = filteredData.map(item => item[key])
-    })
-
-    return result
-  }
-
-  interface Plot {
-    columnCategory: string
-    keyValues: { [key: string]: number[] }
-  }
-  const createPlots = data => {
-    const dataKeys = data.map(d => d[config.xAxis.dataKey])
-    const plots: Plot[] = []
-    const groups: string[] = _.uniq(dataKeys)
-    if (groups && groups.length > 0) {
-      groups.forEach(group => {
-        plots.push({
-          columnCategory: group,
-          keyValues: getValuesBySeriesKey(group)
-        })
-      })
-    }
-    return plots
-  }
+  const color_0 = _.get(colorPalettesChart, [config.palette, 0], '#000')
 
   return (
     <ErrorBoundary component='BoxPlot'>
       <Group left={Number(config.yAxis.size)} className='boxplot' key={`boxplot-group`}>
-        {createPlots(data).map((d, i) => {
+        {createPlots(data, config).map((d, i) => {
           const offset = boxWidth - constrainedWidth
           const radius = 4
 
@@ -87,12 +28,12 @@ const CoveBoxPlot = ({ xScale, yScale }) => {
               key={`boxplotplot-${d.columnCategory}`}
               left={xScale(d.columnCategory) + (xScale.bandwidth() - seriesScale.bandwidth()) / 2}
             >
-              {config.series.map(item => {
+              {config.series.map((item, index) => {
                 const valuesByKey = d.keyValues[item.dataKey]
                 const { min, max, median, firstQuartile, thirdQuartile } = calculateBoxPlotStats(valuesByKey)
                 let iqr = Number(thirdQuartile - firstQuartile).toFixed(config.dataFormat.roundTo)
 
-                const transparentPlot =
+                const isTransparent =
                   config.legend.behavior === 'highlight' &&
                   seriesHighlight.length > 0 &&
                   seriesHighlight.indexOf(item.dataKey) === -1
@@ -100,10 +41,10 @@ const CoveBoxPlot = ({ xScale, yScale }) => {
                   config.legend.behavior === 'highlight' ||
                   seriesHighlight.length === 0 ||
                   seriesHighlight.indexOf(item.dataKey) !== -1
-                const fillOpacity = transparentPlot ? 0.3 : 0.5
+                const fillOpacity = isTransparent ? 0.3 : 0.5
 
                 return (
-                  <Group key={`boxplotplot-${item}`}>
+                  <Group key={`boxplotplot-${item.dataKey}-${index}`}>
                     {boxplot.plotNonOutlierValues &&
                       valuesByKey.map((value, index) => {
                         return (
@@ -123,8 +64,8 @@ const CoveBoxPlot = ({ xScale, yScale }) => {
                         display={displayPlot ? 'block' : 'none'}
                         data-left={xScale(d.columnCategory) + config.yAxis.size + offset / 2 + 0.5}
                         key={`box-plot-${i}-${item}`}
-                        min={min}
-                        max={max}
+                        min={Number(min)}
+                        max={Number(max)}
                         left={seriesScale(item.dataKey)}
                         firstQuartile={firstQuartile}
                         thirdQuartile={thirdQuartile}
@@ -163,6 +104,7 @@ const CoveBoxPlot = ({ xScale, yScale }) => {
                         container
                         containerProps={{
                           'data-tooltip-html': handleTooltip(
+                            boxplot,
                             d,
                             item.dataKey,
                             firstQuartile,

package/src/components/BoxPlot/helpers/index.ts

@@ -0,0 +1,54 @@
+import { max, min, median, quantile } from 'd3-array'
+import _ from 'lodash'
+
+interface Plot {
+  columnCategory: string
+  keyValues: { [key: string]: number[] }
+}
+export const handleTooltip = (boxplot, d, key, q1, q3, median, iqr) => {
+  return `
+      <strong>${d.columnCategory}</strong></br>
+       <strong>Key:${key}</strong></br>
+      ${boxplot.labels.q1}: ${q1}<br/>
+      ${boxplot.labels.q3}: ${q3}<br/>
+      ${boxplot.labels.iqr}: ${iqr}<br/>
+      ${boxplot.labels.median}: ${median}
+    `
+}
+
+export const calculateBoxPlotStats = values => {
+  if (!values || !values.length) return {}
+  const sortedValues = _.sortBy(values)
+  return {
+    min: min(values),
+    max: max(values),
+    median: median(values),
+    firstQuartile: quantile(sortedValues, 0.25),
+    thirdQuartile: quantile(sortedValues, 0.75)
+  }
+}
+const getValuesBySeriesKey = (group: string, config, data) => {
+  const allSeriesKeys = config.series.map(item => item?.dataKey)
+  const result = {}
+  const filteredData = data.filter(item => item[config.xAxis.dataKey] === group)
+  allSeriesKeys.forEach(key => {
+    result[key] = filteredData.map(item => item[key])
+  })
+
+  return result
+}
+
+export const createPlots = (data, config) => {
+  const dataKeys = data.map(d => d[config.xAxis.dataKey])
+  const plots: Plot[] = []
+  const groups: string[] = _.uniq(dataKeys)
+  if (groups && groups.length > 0) {
+    groups.forEach(group => {
+      plots.push({
+        columnCategory: group,
+        keyValues: getValuesBySeriesKey(group, config, data)
+      })
+    })
+  }
+  return plots
+}

package/src/components/BrushChart.tsx

@@ -4,6 +4,7 @@ import ConfigContext from '../ConfigContext'
 import * as d3 from 'd3'
 import { Text } from '@visx/text'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
+import _ from 'lodash'
 
 interface BrushChartProps {
   xMax: number
@@ -11,7 +12,7 @@ interface BrushChartProps {
 }
 
 const BrushChart = ({ xMax, yMax }: BrushChartProps) => {
-  const { tableData, config, setBrushConfig, dashboardConfig, formatDate } = useContext(ConfigContext)
+  const { tableData, config, setBrushConfig, dashboardConfig, formatDate, parseDate } = useContext(ConfigContext)
   const [brushState, setBrushState] = useState({ isBrushing: false, selection: [] })
   const [brushKey, setBrushKey] = useState(0)
   const sharedFilters = dashboardConfig?.dashboard?.sharedFilters ?? []
@@ -26,9 +27,15 @@ const BrushChart = ({ xMax, yMax }: BrushChartProps) => {
 
   const tooltipText = 'Drag edges to focus on a specific segment '
   const textWidth = getTextWidth(tooltipText, `normal ${16 / 1.1}px sans-serif`)
+  const DASHBOARD_MARGIN = 50
+  const BRUSH_HEIGHT_MULTIPLIER = 1.5
 
   const calculateGroupTop = (): number => {
-    return Number(yMax) + config.xAxis.axisBBox + brushheight * 1.5
+    if (dashboardConfig?.type === 'dashboard') {
+      return Number(yMax) + config.xAxis.axisBBox + brushheight * BRUSH_HEIGHT_MULTIPLIER + DASHBOARD_MARGIN
+    } else {
+      return Number(yMax) + config.xAxis.axisBBox + brushheight * BRUSH_HEIGHT_MULTIPLIER
+    }
   }
 
   const handleMouseOver = () => {
@@ -85,41 +92,31 @@ const BrushChart = ({ xMax, yMax }: BrushChartProps) => {
 
       const [x0, x1] = selection.map(value => xScale.invert(value))
 
-      // filter and update brush state directly
-      const newFilteredData = tableData.filter(d => {
-        const dateValue = d[config.runtime.originalXAxis.dataKey]
-        // Check if the date value exists and is valid
-        if (!dateValue) {
-          return false
-        }
+      const newFilteredData = _.filter(tableData, d => {
+        const parsedDate = new Date(d[config.xAxis.dataKey])
+        return parsedDate && !isNaN(parsedDate.getTime()) && parsedDate >= x0 && parsedDate <= x1
+      })
 
-        const parsedDate = new Date(dateValue)
+      const sortByRecentDate = config.xAxis.sortByRecentDate
 
-        // Check if parsedDate is a valid date
-        if (isNaN(parsedDate.getTime())) {
-          return false
-        }
+      const sortedData = _.sortBy(newFilteredData, item => new Date(item[config.xAxis.dataKey]))
 
-        // Check if the date falls within the selection range
-        if (parsedDate >= x0 && parsedDate <= x1) {
-          return true
-        }
-      })
+      // If ascending is false, reverse the sorted array
+      const finalData = !sortByRecentDate ? sortedData : sortedData.reverse()
 
-      const firstDate = (newFilteredData.length && newFilteredData[0][config?.runtime?.originalXAxis?.dataKey]) ?? ''
-      const lastDate =
-        (newFilteredData.length &&
-          newFilteredData[newFilteredData.length - 1][config?.runtime?.originalXAxis?.dataKey]) ??
-        ''
+      // Retrieve the start and end dates based on the sorted data array
+      const startDate = _.get(_.first(finalData), config.xAxis.dataKey, '')
+      const endDate = _.get(_.last(finalData), config.xAxis.dataKey, '')
       // add custom blue colored handlers to each corners of brush
       svg.selectAll('.handle--custom').remove()
       // append handler
-      svg.call(brushHandle, selection, firstDate, lastDate)
+      const [formattedStartDate, formattedEndDate] = [startDate, endDate].map(date => formatDate(parseDate(date)))
+      svg.call(brushHandle, selection, formattedStartDate, formattedEndDate)
 
       setBrushConfig({
         active: config.brush.active,
         isBrushing: isUserBrushing,
-        data: newFilteredData
+        data: finalData
       })
       setBrushState({
         isBrushing: true,

package/src/components/EditorPanel/EditorPanel.tsx

@@ -647,7 +647,8 @@ const EditorPanel = () => {
     visSupportsValueAxisLine,
     visSupportsValueAxisMax,
     visSupportsValueAxisMin,
-    visSupportsValueAxisTicks
+    visSupportsValueAxisTicks,
+    visSupportsYPadding
   } = useEditorPermissions()
 
   // when the visualization type changes we
@@ -1346,6 +1347,9 @@ const EditorPanel = () => {
     updateConfig(updatedConfig)
   }
 
+  const hasDynamicCategory = ![undefined, '- Select - '].includes(config.series?.[0]?.dynamicCategory)
+  const hasMultipleSeries = config.series?.length > 1
+
   const editorContextValues = {
     addNewExclusion,
     data,
@@ -1496,7 +1500,8 @@ const EditorPanel = () => {
                             </Panels.Series.Wrapper>
                           )}
                         </>
-                        {config.series && config.series.length <= 1 && config.visualizationType === 'Bar' && (
+                        {((config.series && config.series.length && config.visualizationType === 'Bar') ||
+                          (config.series && config.series.length <= 1 && config.visualizationType === 'Line')) && (
                           <>
                             <span className='divider-heading'>Confidence Keys</span>
                             <Select
@@ -1768,14 +1773,16 @@ const EditorPanel = () => {
                           title={!config.yAxis.gridLines ? 'Show gridlines to enable' : ''}
                         />
                       )}
-                      <CheckBox
-                        value={config.yAxis.enablePadding}
-                        section='yAxis'
-                        fieldName='enablePadding'
-                        label='Add Padding to Value Axis Scale'
-                        updateField={updateField}
-                      />
-                      {config.yAxis.enablePadding && (
+                      {visSupportsYPadding() && (
+                        <CheckBox
+                          value={config.yAxis.enablePadding}
+                          section='yAxis'
+                          fieldName='enablePadding'
+                          label='Add Padding to Value Axis Scale'
+                          updateField={updateField}
+                        />
+                      )}
+                      {config.yAxis.enablePadding && visSupportsYPadding() && (
                         <TextField
                           type='number'
                           section='yAxis'
@@ -1839,7 +1846,7 @@ const EditorPanel = () => {
                     className='number-narrow'
                     updateField={updateField}
                     min={0}
-                  />
+                  />{' '}
                   <div className='two-col-inputs'>
                     <TextField
                       value={config.dataFormat.prefix}
@@ -1886,7 +1893,6 @@ const EditorPanel = () => {
                       }
                     />
                   </div>
-
                   {config.orientation === 'horizontal' ? ( // horizontal - x is vertical y is horizontal
                     <>
                       {visSupportsValueAxisLine() && (
@@ -2015,20 +2021,23 @@ const EditorPanel = () => {
                           updateField={updateField}
                         />
                         <span style={{ color: 'red', display: 'block' }}>{warningMsg.maxMsg}</span>
-                        <TextField
-                          value={config.yAxis.min}
-                          section='yAxis'
-                          fieldName='min'
-                          type='number'
-                          label='left axis min value'
-                          placeholder='Auto'
-                          updateField={updateField}
-                        />
-                        <span style={{ color: 'red', display: 'block' }}>{warningMsg.minMsg}</span>
+                        {config.visualizationType !== 'Area Chart' && config.visualizationSubType !== 'stacked' && (
+                          <>
+                            <TextField
+                              value={config.yAxis.min}
+                              section='yAxis'
+                              fieldName='min'
+                              type='number'
+                              label='left axis min value'
+                              placeholder='Auto'
+                              updateField={updateField}
+                            />
+                            <span style={{ color: 'red', display: 'block' }}>{warningMsg.minMsg}</span>
+                          </>
+                        )}
                       </>
                     )
                   )}
-
                   {/* start: anchors */}
                   {visHasAnchors() && config.orientation !== 'horizontal' && (
                     <div className='edit-block'>
@@ -2155,7 +2164,6 @@ const EditorPanel = () => {
                       </button>
                     </div>
                   )}
-
                   {visHasAnchors() && config.orientation === 'horizontal' && (
                     <div className='edit-block'>
                       <span className='edit-label column-heading'>Anchors</span>
@@ -2764,13 +2772,12 @@ const EditorPanel = () => {
                           />
                         </>
                       )}
-
                       <CheckBox
                         value={config.exclusions.active}
                         section='exclusions'
                         fieldName='active'
                         label={
-                          config.xAxis.type === 'date'
+                          config.xAxis.type === 'date' || config.xAxis.type === 'date-time'
                             ? 'Limit by start and/or end dates'
                             : 'Exclude one or more values'
                         }
@@ -2869,26 +2876,27 @@ const EditorPanel = () => {
                             </>
                           )}
 
-                          {config.xAxis.type === 'date' && (
-                            <>
-                              <TextField
-                                type='date'
-                                section='exclusions'
-                                fieldName='dateStart'
-                                label='Start Date'
-                                updateField={updateField}
-                                value={config.exclusions.dateStart || ''}
-                              />
-                              <TextField
-                                type='date'
-                                section='exclusions'
-                                fieldName='dateEnd'
-                                label='End Date'
-                                updateField={updateField}
-                                value={config.exclusions.dateEnd || ''}
-                              />
-                            </>
-                          )}
+                          {config.xAxis.type === 'date' ||
+                            (config.xAxis.type === 'date-time' && (
+                              <>
+                                <TextField
+                                  type='date'
+                                  section='exclusions'
+                                  fieldName='dateStart'
+                                  label='Start Date'
+                                  updateField={updateField}
+                                  value={config.exclusions.dateStart || ''}
+                                />
+                                <TextField
+                                  type='date'
+                                  section='exclusions'
+                                  fieldName='dateEnd'
+                                  label='End Date'
+                                  updateField={updateField}
+                                  value={config.exclusions.dateEnd || ''}
+                                />
+                              </>
+                            ))}
                         </>
                       )}
 
@@ -3671,38 +3679,6 @@ const EditorPanel = () => {
                     updateField={updateField}
                   />
 
-                  {/* <fieldset className="checkbox-group">
-                    <CheckBox value={config.legend.dynamicLegend} section="legend" fieldName="dynamicLegend" label="Dynamic Legend" updateField={updateField}/>
-                    {config.legend.dynamicLegend && (
-                      <>
-                        <TextField value={config.legend.dynamicLegendDefaultText} section="legend" fieldName="dynamicLegendDefaultText" label="Dynamic Legend Default Text" updateField={updateField} />
-                        <TextField value={config.legend.dynamicLegendItemLimit} type="number" min="0" section="legend" fieldName="dynamicLegendItemLimit" label={'Dynamic Legend Limit'} className="number-narrow" updateField={updateField}/>
-                        <TextField value={config.legend.dynamicLegendItemLimitMessage} section="legend" fieldName="dynamicLegendItemLimitMessage" label="Dynamic Legend Item Limit Message" updateField={updateField} />
-                        <TextField value={config.legend.dynamicLegendChartMessage} section="legend" fieldName="dynamicLegendChartMessage" label="Dynamic Legend Chart Message" updateField={updateField} />
-                      </>
-                    )}
-                  </fieldset> */}
-
-                  <CheckBox
-                    value={config.legend.hide ? true : false}
-                    section='legend'
-                    fieldName='hide'
-                    label='Hide Legend'
-                    updateField={updateField}
-                    tooltip={
-                      <Tooltip style={{ textTransform: 'none' }}>
-                        <Tooltip.Target>
-                          <Icon
-                            display='question'
-                            style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
-                          />
-                        </Tooltip.Target>
-                        <Tooltip.Content>
-                          <p>With a single-series chart, consider hiding the legend to reduce visual clutter.</p>
-                        </Tooltip.Content>
-                      </Tooltip>
-                    }
-                  />
                   <CheckBox
                     display={config.preliminaryData?.some(pd => pd.label && pd.type === 'suppression' && pd.value)}
                     value={config.legend.hideSuppressedLabels}
@@ -3755,7 +3731,7 @@ const EditorPanel = () => {
                     </>
                   } */}
                   <Select
-                    display={config.series?.length > 1}
+                    display={hasDynamicCategory || hasMultipleSeries}
                     value={config.legend.behavior}
                     section='legend'
                     fieldName='behavior'

package/src/components/EditorPanel/components/Panels/Panel.Series.tsx

@@ -612,6 +612,7 @@ const SeriesItem = props => {
   const { series, getItemStyle, sortableItemStyles, chartsWithOptions, index: i } = props
   const showDynamicCategory =
     ['Bar', 'Line'].includes(config.visualizationType) &&
+    config.visualizationSubType !== 'Stacked' &&
     !config.series.find(s => s.dynamicCategory && s.dataKey !== series.dataKey)
   return (
     <Draggable key={series.dataKey} draggableId={`draggableFilter-${series.dataKey}`} index={i}>

package/src/components/EditorPanel/useEditorPermissions.ts

@@ -153,7 +153,6 @@ export const useEditorPermissions = () => {
     }
   }
   const visHasBrushChart = () => {
-    return false
     if (config.xAxis.type === 'categorical') return false
     return ['Line', 'Bar', 'Area Chart', 'Combo'].includes(visualizationType) && orientation === 'vertical'
   }
@@ -384,6 +383,10 @@ export const useEditorPermissions = () => {
     )
   }
 
+  const visSupportsYPadding = () => {
+    return !config.dataFormat.onlyShowTopPrefixSuffix || !config.dataFormat.suffix?.includes(' ')
+  }
+
   const visHasSingleSeriesTooltip = () => {
     if (visualizationType === 'Bar' || visualizationType === 'Line') {
       return true
@@ -457,6 +460,7 @@ export const useEditorPermissions = () => {
     visSupportsValueAxisMax,
     visSupportsValueAxisMin,
     visSupportsDynamicSeries,
+    visSupportsYPadding,
     visHasSingleSeriesTooltip,
     visHasCategoricalAxis
   }

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

@@ -2,7 +2,7 @@ import parse from 'html-react-parser'
 import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend'
 import LegendShape from '@cdc/core/components/LegendShape'
 import Button from '@cdc/core/components/elements/Button'
-import useLegendClasses from '../../hooks/useLegendClasses'
+import { getLegendClasses } from './helpers/getLegendClasses'
 import { useHighlightedBars } from '../../hooks/useHighlightedBars'
 import { handleLineType } from '../../helpers/handleLineType'
 
@@ -48,7 +48,7 @@ const Legend: React.FC<LegendProps> = forwardRef(
     },
     ref
   ) => {
-    const { innerClasses, containerClasses } = useLegendClasses(config)
+    const { innerClasses, containerClasses } = getLegendClasses(config)
     const { runtime, legend } = config
 
     const [hasSuppression, setHasSuppression] = useState(false)

package/src/{hooks/useLegendClasses.ts → components/Legend/helpers/getLegendClasses.ts}

@@ -1,6 +1,6 @@
-import { ChartConfig } from '../types/ChartConfig'
+import { ChartConfig } from './../../../types/ChartConfig'
 
-const useLegendClasses = (config: ChartConfig) => {
+export const getLegendClasses = (config: ChartConfig) => {
   const { position, singleRow, reverseLabelOrder, verticalSorted, hideBorder } = config.legend
   const containerClasses = ['legend-container']
   const innerClasses = ['legend-container__inner']
@@ -40,11 +40,11 @@ const useLegendClasses = (config: ChartConfig) => {
 
   // Configure border classes
   if (hideBorder.side && (['right', 'left'].includes(position) || !position)) {
-    containerClasses.push('no-border')
+    containerClasses.push('border-0')
   }
 
   if (hideBorder.topBottom && ['top', 'bottom'].includes(position)) {
-    containerClasses.push('no-border')
+    containerClasses.push('border-0')
   }
 
   if (hideBorder.topBottom && ['top'].includes(position)) {
@@ -56,4 +56,4 @@ const useLegendClasses = (config: ChartConfig) => {
     innerClasses
   }
 }
-export default useLegendClasses
+export default getLegendClasses