@cdc/chart 4.25.3-6 → 4.25.3

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

@@ -15,6 +15,8 @@ import LegendGradient from '@cdc/core/components/Legend/Legend.Gradient'
 import { DimensionsType } from '@cdc/core/types/Dimensions'
 import { isLegendWrapViewport } from '@cdc/core/helpers/viewports'
 import LegendLineShape from './LegendLine.Shape'
+import LegendGroup from './LegendGroup'
+import { getSeriesWithData } from '../../helpers/dataHelpers'
 
 const LEGEND_PADDING = 36
 
@@ -29,6 +31,7 @@ export interface LegendProps {
   seriesHighlight: string[]
   skipId: string
   dimensions: DimensionsType // for responsive width legend
+  transformedData: any
 }
 
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
@@ -43,12 +46,17 @@ const Legend: React.FC<LegendProps> = forwardRef(
       currentViewport,
       formatLabels,
       skipId = 'legend',
-      dimensions
+      dimensions,
+      transformedData: data
     },
     ref
   ) => {
     const { innerClasses, containerClasses } = getLegendClasses(config)
     const { runtime, legend } = config
+    const { series } = runtime
+
+    const seriesWithData = getSeriesWithData(config)
+    const dontFilterLegendItems = !series.length || legend.unified
 
     const isLegendBottom =
       legend?.position === 'bottom' ||
@@ -84,77 +92,80 @@ const Legend: React.FC<LegendProps> = forwardRef(
           dimensions={dimensions}
           parentPaddingToSubtract={legend.hideBorder ? 0 : LEGEND_PADDING}
         />
+        <LegendGroup formatLabels={formatLabels} />
 
         <LegendOrdinal scale={colorScale} itemDirection='row' labelMargin='0 20px 0 0' shapeMargin='0 10px 0'>
           {labels => {
             return (
               <>
                 <div className={innerClasses.join(' ')}>
-                  {formatLabels(labels as Label[]).map((label, i) => {
-                    let className = ['legend-item', `legend-text--${label.text.replace(' ', '').toLowerCase()}`]
-                    let itemName = label.datum
-
-                    // Filter excluded data keys from legend
-                    if (config.exclusions.active && config.exclusions.keys?.includes(itemName)) {
-                      return null
-                    }
+                  {formatLabels(labels as Label[])
+                    .filter(label => dontFilterLegendItems || seriesWithData.includes(label.datum))
+                    .map((label, i) => {
+                      let className = ['legend-item', `legend-text--${label.text.replace(' ', '').toLowerCase()}`]
+                      let itemName = label.datum
+
+                      // Filter excluded data keys from legend
+                      if (config.exclusions.active && config.exclusions.keys?.includes(itemName)) {
+                        return null
+                      }
 
-                    if (runtime.seriesLabels) {
-                      let index = config.runtime.seriesLabelsAll.indexOf(itemName)
-                      itemName = config.runtime.seriesKeys[index]
+                      if (runtime.seriesLabels) {
+                        let index = config.runtime.seriesLabelsAll.indexOf(itemName)
+                        itemName = config.runtime.seriesKeys[index]
 
-                      if (runtime?.forecastingSeriesKeys?.length > 0) {
-                        itemName = label.text
+                        if (runtime?.forecastingSeriesKeys?.length > 0) {
+                          itemName = label.text
+                        }
                       }
-                    }
 
-                    if (seriesHighlight.length) {
-                      if (!seriesHighlight.includes(itemName)) {
-                        className.push('inactive')
-                      } else className.push('highlighted')
-                    }
+                      if (seriesHighlight.length) {
+                        if (!seriesHighlight.includes(itemName)) {
+                          className.push('inactive')
+                        } else className.push('highlighted')
+                      }
 
-                    if (config.legend.style === 'gradient') {
-                      return <></>
-                    }
+                      if (config.legend.style === 'gradient' || config.legend.groupBy) {
+                        return <></>
+                      }
 
-                    return (
-                      <LegendItem
-                        className={className.join(' ')}
-                        tabIndex={0}
-                        key={`legend-quantile-${i}`}
-                        onKeyDown={e => {
-                          if (e.key === 'Enter') {
+                      return (
+                        <LegendItem
+                          className={className.join(' ')}
+                          tabIndex={0}
+                          key={`legend-quantile-${i}`}
+                          onKeyDown={e => {
+                            if (e.key === 'Enter') {
+                              e.preventDefault()
+                              highlight(label)
+                            }
+                          }}
+                          onClick={e => {
                             e.preventDefault()
                             highlight(label)
-                          }
-                        }}
-                        onClick={e => {
-                          e.preventDefault()
-                          highlight(label)
-                        }}
-                        role='button'
-                      >
-                        <>
-                          {config.visualizationType === 'Line' && config.legend.style === 'lines' ? (
-                            <React.Fragment>
-                              <LegendLineShape index={i} label={label} config={config} />
-                            </React.Fragment>
-                          ) : (
-                            <>
-                              <LegendShape
-                                shape={config.legend.style === 'boxes' ? 'square' : 'circle'}
-                                fill={label.value}
-                              />
-                            </>
-                          )}
-                        </>
-                        <LegendLabel align='left' className='m-0'>
-                          {label.text}
-                        </LegendLabel>
-                      </LegendItem>
-                    )
-                  })}
+                          }}
+                          role='button'
+                        >
+                          <>
+                            {config.visualizationType === 'Line' && config.legend.style === 'lines' ? (
+                              <React.Fragment>
+                                <LegendLineShape index={i} label={label} config={config} />
+                              </React.Fragment>
+                            ) : (
+                              <>
+                                <LegendShape
+                                  shape={config.legend.style === 'boxes' ? 'square' : 'circle'}
+                                  fill={label.value}
+                                />
+                              </>
+                            )}
+                          </>
+                          <LegendLabel align='left' className='m-0'>
+                            {parse(label.text)}
+                          </LegendLabel>
+                        </LegendItem>
+                      )
+                    })}
 
                   {highLightedLegendItems.map((bar, i) => {
                     // if duplicates only return first item

package/src/components/Legend/Legend.tsx

@@ -17,7 +17,8 @@ const Legend = forwardRef((props, ref) => {
     transformedData: data,
     currentViewport,
     dimensions,
-    getTextWidth
+    getTextWidth,
+    transformedData
   } = useContext(ConfigContext)
   if (!config.legend) return null
   // create fn to reverse labels while legend is Bottom.  Legend-right , legend-left works by default.
@@ -30,6 +31,7 @@ const Legend = forwardRef((props, ref) => {
         getTextWidth={getTextWidth}
         dimensions={dimensions}
         ref={ref}
+        transformedData={transformedData}
         skipId={props.skipId || 'legend'}
         config={config}
         colorScale={colorScale}

package/src/components/Legend/LegendGroup/LegendGroup.styles.css

@@ -0,0 +1,40 @@
+.legend-container {
+  .legend-group {
+    font-size: 1rem;
+
+    line-height: 18px;
+    margin-bottom: 0.5rem;
+
+    .group-item .visx-legend-label {
+      font-weight: 400;
+      font-size: 0.889rem;
+      margin-bottom: 0.5rem;
+    }
+    .group-label {
+      font-weight: 500;
+      font-family: Nunito, sans-serif;
+      font-size: 1rem;
+    }
+  }
+
+  .legend-group.top,
+  .legend-group.bottom {
+    grid-gap: 10px;
+
+    &.group-item {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    & .inactive {
+      opacity: 0.5;
+      transition: 0.2s all;
+    }
+    & .highlighted {
+      outline: 1px solid #005ea2;
+      outline-offset: 5px;
+      border-radius: 1px;
+    }
+  }
+}

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

@@ -0,0 +1,103 @@
+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 {
+  formatLabels: Function
+}
+const LegendGroup = ({ formatLabels }) => {
+  const {
+    highlight,
+    seriesHighlight,
+    colorScale,
+    transformedData: data,
+    config,
+    currentViewport
+  } = useContext(ConfigContext)
+
+  const getSubGroups = (data, key: string | undefined) => {
+    const uniqueGroups = new Set()
+    data.forEach(d => {
+      config.series.forEach(series => {
+        if (d[key] && d[series.dataKey]) {
+          uniqueGroups.add(d[key])
+        }
+      })
+    })
+    return Array.from(uniqueGroups) as string[]
+  }
+
+  const groups: string[] = getSubGroups(data, config.legend.groupBy)
+
+  const classNames = ['legend-group', 'container', config.legend.position, currentViewport, 'row']
+
+  const gridCol =
+    currentViewport === 'xs'
+      ? 'col-12'
+      : currentViewport === 'sm'
+      ? 'col-6'
+      : currentViewport === 'md'
+      ? 'col-4'
+      : 'col-3'
+
+  const isSigleCol = config.legend.position === 'bottom' || config.legend.position === 'top' ? gridCol : 'col-12'
+
+  let classNameItem = ['legend-group group-item', isSigleCol]
+
+  return (
+    <div className={classNames.join(' ')}>
+      {groups.map(group => {
+        return (
+          <div className={classNameItem.join(' ')} key={group}>
+            <div>
+              <p className='legend-group group-label'>{group}</p>
+            </div>
+            <LegendOrdinal scale={colorScale} itemDirection='row' labelMargin='0 20px 0 0' shapeMargin='0 10px 0'>
+              {labels =>
+                formatLabels(labels)
+                  .filter(label => {
+                    const groupBy = config.legend.groupBy || ''
+                    return data.some(d => d[groupBy] === group && d[label.text] !== undefined && d[label.text] !== 'NA')
+                  })
+
+                  .map((label, i) => {
+                    let className = ['legend-group', 'group-item']
+                    if (seriesHighlight.length) {
+                      if (!seriesHighlight.includes(label.datum)) {
+                        className.push('inactive')
+                      } else {
+                        className.push('highlighted')
+                      }
+                    }
+
+                    return (
+                      <LegendItem
+                        alignItems='start'
+                        className={className.join(' ')}
+                        onClick={e => {
+                          e.preventDefault()
+                          highlight(label)
+                        }}
+                        key={`legend-item-${i}`}
+                        tabIndex={0}
+                      >
+                        <LegendShape shape={config.legend.style === 'boxes' ? 'square' : 'circle'} fill={label.value} />
+                        <LegendLabel align='left' margin='0'>
+                          {label.text}
+                        </LegendLabel>
+                      </LegendItem>
+                    )
+                  })
+              }
+            </LegendOrdinal>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export default LegendGroup

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

@@ -0,0 +1,3 @@
+import LegendGroup from './LegendGroup'
+
+export default LegendGroup

package/src/components/LineChart/components/LineChart.Circle.tsx

@@ -46,7 +46,7 @@ const Glyphs = [
 const LineChartCircle = (props: LineChartCircleProps) => {
   const {
     config,
-    d,
+    d: pointData,
     tableData,
     displayArea,
     seriesKey,
@@ -96,7 +96,7 @@ const LineChartCircle = (props: LineChartCircleProps) => {
   if (mode === 'ALWAYS_SHOW_POINTS' && lineDatapointStyle !== 'hidden') {
     if (lineDatapointStyle === 'always show') {
       const isMatch = circleData?.some(
-        cd => cd[config.xAxis.dataKey] === d[config.xAxis.dataKey] && cd[seriesKey] === d[seriesKey]
+        cd => cd[config.xAxis.dataKey] === pointData[config.xAxis.dataKey] && cd[seriesKey] === pointData[seriesKey]
       )
 
       if (
@@ -105,13 +105,14 @@ const LineChartCircle = (props: LineChartCircleProps) => {
         (visual.maximumShapeAmount === seriesIndex && visual.lineDatapointSymbol === 'standard')
       )
         return <></>
-      const positionLeft = getXPos(d[config.xAxis.dataKey])
-      const positionTop = filtered.axis === 'Right' ? yScaleRight(d[filtered.dataKey]) : yScale(d[filtered.dataKey])
+      const positionLeft = getXPos(pointData[config.xAxis.dataKey])
+      const positionTop =
+        filtered.axis === 'Right' ? yScaleRight(pointData[filtered.dataKey]) : yScale(pointData[filtered.dataKey])
 
       return (
         <g transform={transformShape(positionTop, positionLeft)}>
           <Shape
-            opacity={d[seriesKey] ? 1 : 0}
+            opacity={pointData[seriesKey] ? 1 : 0}
             fillOpacity={1}
             fill={getColor(displayArea, colorScale, config, seriesKey, seriesKey)}
             style={{ filter: 'unset', opacity: 1 }}
@@ -197,10 +198,14 @@ const LineChartCircle = (props: LineChartCircleProps) => {
 
       return isFirstPoint || isLastPoint || isMiddlePoint
     }
-
-    if (drawIsolatedPoints(dataIndex, seriesKey)) {
-      const positionTop = filtered?.axis === 'Right' ? yScaleRight(d[filtered?.dataKey]) : yScale(d[filtered?.dataKey])
-      const positionLeft = getXPos(d[config.xAxis?.dataKey])
+    const _dataIndex = pointData
+      ? data.findIndex(item => item[config.xAxis.dataKey] === pointData[config.xAxis.dataKey])
+      : dataIndex
+
+    if (drawIsolatedPoints(_dataIndex, seriesKey)) {
+      const positionTop =
+        filtered?.axis === 'Right' ? yScaleRight(pointData[filtered?.dataKey]) : yScale(pointData[filtered?.dataKey])
+      const positionLeft = getXPos(pointData[config.xAxis?.dataKey])
       const color = colorScale(config.runtime.seriesLabelsAll[seriesIndex])
 
       return (

package/src/components/LineChart/index.tsx

@@ -393,21 +393,32 @@ const LineChart = (props: LineChartProps) => {
                       break
                     }
                   }
-                  if (!lastDatum) {
+                  if (!lastDatum || legend.position === 'right') {
                     return <></>
                   }
+
+                  let labelText = config.runtime.seriesLabels[seriesKey] || seriesKey
+                  // truncate labels longer that 10 chars
+                  const ellipsis = '...'
+                  if (labelText.length > 10) {
+                    labelText = labelText.substring(0, 10) + ellipsis
+                  }
+
                   return (
                     <Text
+                      display={
+                        legend.behavior === 'highlight' ||
+                        (seriesHighlight.length === 0 && !legend.dynamicLegend) ||
+                        seriesHighlight.indexOf(seriesKey) !== -1
+                          ? 'block'
+                          : 'none'
+                      }
                       x={xPos(lastDatum) + 5}
                       y={yScale(getYAxisData(lastDatum, seriesKey))}
                       alignmentBaseline='middle'
-                      fill={
-                        config.colorMatchLineSeriesLabels && colorScale
-                          ? colorScale(config.runtime.seriesLabels[seriesKey] || seriesKey)
-                          : 'black'
-                      }
+                      fill={colorScale(config.runtime.seriesLabels[seriesKey] || seriesKey)}
                     >
-                      {config.runtime.seriesLabels[seriesKey] || seriesKey}
+                      {labelText}
                     </Text>
                   )
                 })}

package/src/components/LinearChart.tsx

@@ -7,9 +7,11 @@ import { Line, Bar } from '@visx/shape'
 import { Text } from '@visx/text'
 import { Tooltip as ReactTooltip } from 'react-tooltip'
 import { useTooltip, TooltipWithBounds } from '@visx/tooltip'
+import _ from 'lodash'
+
+// CDC Components
 import { isDateScale } from '@cdc/core/helpers/cove/date'
 import BrushChart from './BrushChart'
-// CDC Components
 import { AreaChart, AreaChartStacked } from './AreaChart'
 import BarChart from './BarChart'
 import ConfigContext from '../ConfigContext'
@@ -28,7 +30,7 @@ import CategoricalYAxis from './Axis/Categorical.Axis'
 // Helpers
 import { isLegendWrapViewport, isMobileHeightViewport } from '@cdc/core/helpers/viewports'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
-import { calcInitialHeight } from '../helpers/sizeHelpers'
+import { calcInitialHeight, handleAutoPaddingRight } from '../helpers/sizeHelpers'
 
 // Hooks
 import useMinMax from '../hooks/useMinMax'
@@ -41,7 +43,6 @@ import { useEditorPermissions } from './EditorPanel/useEditorPermissions'
 import Annotation from './Annotations'
 import { BlurStrokeText } from '@cdc/core/components/BlurStrokeText'
 import { countNumOfTicks } from '../helpers/countNumOfTicks'
-import _ from 'lodash'
 
 type LinearChartProps = {
   parentWidth: number
@@ -119,6 +120,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   const xAxisLabelRefs = useRef([])
   const xAxisTitleRef = useRef(null)
   const lastMaxValue = useRef(maxValue)
+  const gridLineRefs = useRef([])
 
   const dataRef = useIntersectionObserver(triggerRef, {
     freezeOnceVisible: false
@@ -329,6 +331,21 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   }
 
   // EFFECTS
+  // Adjust padding on the right side of the chart to accommodate for overflow
+  useEffect(() => {
+    if (!parentRef.current || !parentWidth || !gridLineRefs.current.length) return
+
+    const [updatePadding, paddingToAdd] = handleAutoPaddingRight(parentRef, xAxisLabelRefs, parentWidth)
+
+    if (!updatePadding) return
+
+    parentRef.current.style.paddingRight = `${paddingToAdd}px`
+    // subtract padding from grid line's x1 value
+    gridLineRefs.current.forEach(gridLine => {
+      if (!gridLine) return
+      gridLine.setAttribute('x1', xMax - paddingToAdd)
+    })
+  }, [parentWidth, parentHeight, data])
 
   // Make sure the chart is visible if in the editor
   /* eslint-disable react-hooks/exhaustive-deps */
@@ -421,8 +438,10 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   }, [maxValue])
 
   useEffect(() => {
-    if (orientation === 'horizontal') return
-    if (!labelsOverflow) return
+    if (orientation === 'horizontal' || !labelsOverflow || config.yAxis?.max) {
+      setYAxisAutoPadding(0)
+      return
+    }
 
     // minimum percentage of the max value that the distance should be from the top grid line
     const MINIMUM_DISTANCE_PERCENTAGE = 0.025
@@ -638,6 +657,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                         <Group key={`vx-tick-${tick.value}-${i}`} className={'vx-axis-tick'}>
                           {runtime.yAxis.gridLines && !hideFirstGridLine ? (
                             <Line
+                              innerRef={el => (gridLineRefs.current[i] = el)}
                               key={`${tick.value}--hide-hideGridLines`}
                               display={(isLogarithmicAxis && showTicks).toString()}
                               from={{ x: tick.from.x + xMax, y: tick.from.y }}
@@ -698,7 +718,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
             />
           )}
           {((visualizationType === 'Area Chart' && config.visualizationSubType === 'regular') ||
-            visualizationType === 'Combo') && (
+            (visualizationType === 'Combo' && config.visualizationSubType === 'regular')) && (
             <AreaChart
               xScale={xScale}
               yScale={yScale}
@@ -714,7 +734,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
             />
           )}
           {((visualizationType === 'Area Chart' && config.visualizationSubType === 'stacked') ||
-            visualizationType === 'Combo') && (
+            (visualizationType === 'Combo' && config.visualizationSubType === 'stacked')) && (
             <AreaChartStacked
               xScale={xScale}
               yScale={yScale}
@@ -1399,20 +1419,21 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                 const axisMaxHeight = bottomLabelStart + BOTTOM_LABEL_PADDING
 
                 const containsMultipleWords = inputString => /\s/.test(inputString)
-                const ismultiLabel = filteredTicks.some(tick => containsMultipleWords(tick.value))
+                const isMultiLabel = filteredTicks.some(tick => containsMultipleWords(tick.value))
 
                 // Calculate sumOfTickWidth here, before map function
-                const tickWidthMax = Math.max(
+                const longestTickLength = Math.max(
                   ...filteredTicks.map(tick => getTextWidth(tick.formattedValue, GET_TEXT_WIDTH_FONT))
                 )
                 // const marginTop = 20 // moved to top bc need for yMax calcs
-                const accumulator = ismultiLabel ? 180 : 100
+                const accumulator = isMultiLabel ? 180 : 100
 
                 const textWidths = filteredTicks.map(tick => getTextWidth(tick.formattedValue, GET_TEXT_WIDTH_FONT))
                 const sumOfTickWidth = textWidths.reduce((a, b) => a + b, accumulator)
                 const spaceBetweenEachTick = (xMax - sumOfTickWidth) / (filteredTicks.length - 1)
+                const bufferBetweenTicks = 40
+                const maxLengthOfTick = width / filteredTicks.length - X_TICK_LABEL_PADDING * 2 - bufferBetweenTicks
 
-                // Check if ticks are overlapping
                 // Determine the position of each tick
                 let positions = [0] // The first tick is at position 0
                 for (let i = 1; i < textWidths.length; i++) {
@@ -1424,35 +1445,22 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                 const axisBBox = axisBottomRef?.current?.getBBox().height
                 config.xAxis.axisBBox = axisBBox
 
-                // Check if ticks are overlapping
-                let areTicksTouching = false
-                textWidths.forEach((_, i) => {
-                  if (positions[i] + textWidths[i] > positions[i + 1]) {
-                    areTicksTouching = true
-                    return
-                  }
-                })
-
-                // Force wrap when showing years once so it's easier to read
-                if (config.xAxis.showYearsOnce) {
-                  areTicksTouching = true
-                }
-
                 // force wrap it last tick is close to the end of the axis
                 const lastTickWidth = textWidths[textWidths.length - 1]
                 const lastTickPosition = positions[positions.length - 1] + lastTickWidth
                 const lastTickEnd = lastTickPosition + lastTickWidth / 2
                 const lastTickEndThreshold = xMax - lastTickWidth
 
-                if (lastTickEnd > lastTickEndThreshold) {
-                  areTicksTouching = true
-                }
+                const areTicksTouching =
+                  textWidths.some(textWidth => textWidth > maxLengthOfTick) || // Force wrap if any tick is too long
+                  config.xAxis.showYearsOnce || // Force wrap when showing years once so it's easier to read
+                  lastTickEnd > lastTickEndThreshold // Force wrap it last tick is close to the end of the axis
 
                 const dynamicMarginTop =
-                  areTicksTouching && config.isResponsiveTicks ? tickWidthMax + DEFAULT_TICK_LENGTH + 20 : 0
+                  areTicksTouching && config.isResponsiveTicks ? longestTickLength + DEFAULT_TICK_LENGTH + 20 : 0
 
                 config.dynamicMarginTop = dynamicMarginTop
-                config.xAxis.tickWidthMax = tickWidthMax
+                config.xAxis.tickWidthMax = longestTickLength
 
                 return (
                   <Group className='bottom-axis' width={dimensions[0]}>

package/src/data/initial-state.js

@@ -24,7 +24,6 @@ export default {
   isResponsiveTicks: false,
   general: {
     annotationDropdownText: 'Annotations',
-    showDownloadButton: false,
     showMissingDataLabel: true,
     showSuppressedSymbol: true,
     showZeroValueData: true,
@@ -166,6 +165,7 @@ export default {
     seriesHighlight: [],
     style: 'circles',
     subStyle: 'linear blocks',
+    groupBy: '',
     shape: 'circle',
     tickRotation: '',
     hideBorder: {

package/src/helpers/dataHelpers.ts

@@ -0,0 +1,10 @@
+import { ChartConfig } from '../types/ChartConfig'
+
+export const getSeriesWithData = (config: ChartConfig) => {
+  const { filters, data, runtime } = config
+  const { series } = runtime
+
+  const filteredData = data.filter(d => filters.every(f => d[f.columnName] === f.active))
+
+  return series.filter(s => filteredData.some(d => d[s.dynamicCategory || s.dataKey])).map(s => s.name || s.dataKey)
+}

package/src/helpers/sizeHelpers.ts

@@ -1,5 +1,8 @@
+import { clamp } from 'lodash'
+
 import { isMobileHeightViewport } from '@cdc/core/helpers/viewports'
 import { ChartConfig, ViewportSize } from '../types/ChartConfig'
+import { EDITOR_WIDTH } from '../CdcChartComponent'
 
 export function getOrientation(
   { orientation, heights, visualizationType }: Pick<ChartConfig, 'orientation' | 'heights' | 'visualizationType'>,
@@ -23,3 +26,23 @@ export function calcInitialHeight(
   const height = Number(heights?.[renderedOrientation])
   return isNaN(height) ? 0 : height
 }
+
+export function handleAutoPaddingRight(parentRef, xAxisLabelRefs, parentWidth): [boolean, number] {
+  const parentX = parentRef.current.getBoundingClientRect().x
+  const editorIsOpen = !!document.querySelector('.editor-panel:not(.hidden)')
+  const lastTickRect = xAxisLabelRefs.current?.[xAxisLabelRefs.current.length - 1]?.getBoundingClientRect()
+  const lastBottomTickEnd = lastTickRect ? lastTickRect.x + lastTickRect.width : 0
+  const editorWidth = editorIsOpen ? EDITOR_WIDTH : 0
+  const calculatedOverhang = lastBottomTickEnd - parentX - editorWidth - parentWidth
+
+  const paddingToAdd = clamp(calculatedOverhang, 0, 20)
+  const currentPadding = Number(parentRef.current.style.paddingRight.replace('px', ''))
+  const paddingDiff = Math.abs(currentPadding - paddingToAdd)
+  const DIFF_THRESHOLD = 5
+
+  const noChange = currentPadding === calculatedOverhang
+  const insufficientDiff = (paddingDiff < DIFF_THRESHOLD && calculatedOverhang > 0) || Math.abs(calculatedOverhang) < 1
+  const updatePadding = !noChange && !insufficientDiff
+
+  return [updatePadding, paddingToAdd]
+}