@cdc/chart 4.26.6 → 4.26.7

package/src/components/BoxPlot/BoxPlot.Vertical.tsx

@@ -7,7 +7,9 @@ import { colorPalettesChart } from '@cdc/core/data/colorPalettes'
 import { getCurrentPaletteName } from '@cdc/core/helpers/palettes/utils'
 import { handleTooltip, createPlots } from './helpers/index'
 import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
-import _ from 'lodash'
+import get from 'lodash/get'
+import map from 'lodash/map'
+import round from 'lodash/round'
 
 const BoxPlotVertical = ({ xScale, yScale, seriesScale, yAxisWidth }) => {
   const { config, colorScale, seriesHighlight, transformedData: data } = useContext(ConfigContext)
@@ -19,7 +21,7 @@ const BoxPlotVertical = ({ xScale, yScale, seriesScale, yAxisWidth }) => {
   const bodyStyles = getComputedStyle(document.body)
   const defaultColor = APP_FONT_COLOR
   const constrainedWidth = Math.min(40, boxWidth)
-  const color_0 = _.get(colorPalettesChart, [getCurrentPaletteName(config), 0], '#000')
+  const color_0 = get(colorPalettesChart, [getCurrentPaletteName(config), 0], '#000')
   const plots = createPlots(data, config)
   return (
     <ErrorBoundary component='BoxPlot Vertical'>
@@ -76,7 +78,7 @@ const BoxPlotVertical = ({ xScale, yScale, seriesScale, yAxisWidth }) => {
                         fillOpacity={1}
                         stroke={defaultColor}
                         valueScale={yScale}
-                        outliers={boxplot.plotOutlierValues ? _.map(d.columnOutliers[item.dataKey], item => item) : []}
+                        outliers={boxplot.plotOutlierValues ? map(d.columnOutliers[item.dataKey], item => item) : []}
                         outlierProps={{
                           style: {
                             fill: defaultColor,
@@ -109,10 +111,10 @@ const BoxPlotVertical = ({ xScale, yScale, seriesScale, yAxisWidth }) => {
                             boxplot,
                             d.columnCategory,
                             item.dataKey,
-                            _.round(d.q1[item.dataKey], config.dataFormat.roundTo),
-                            _.round(d.q3[item.dataKey], config.dataFormat.roundTo),
-                            _.round(d.median[item.dataKey], config.dataFormat.roundTo),
-                            _.round(d.iqr[item.dataKey], config.dataFormat.roundTo),
+                            round(d.q1[item.dataKey], config.dataFormat.roundTo),
+                            round(d.q3[item.dataKey], config.dataFormat.roundTo),
+                            round(d.median[item.dataKey], config.dataFormat.roundTo),
+                            round(d.iqr[item.dataKey], config.dataFormat.roundTo),
                             config.xAxis.label,
                             defaultColor
                           ),

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

@@ -1,4 +1,5 @@
-import _ from 'lodash'
+import sortBy from 'lodash/sortBy'
+import uniq from 'lodash/uniq'
 import * as d3 from 'd3-array'
 
 interface Plot {
@@ -33,7 +34,7 @@ const calculateBoxPlotStats = (values: number[]) => {
   if (!values || values.length === 0) return {}
 
   // Sort the values
-  const sortedValues = _.sortBy(values.map(v => Number(v)))
+  const sortedValues = sortBy(values.map(v => Number(v)))
 
   // Quartiles
   const firstQuartile = d3.quantile(sortedValues, 0.25) ?? 0
@@ -103,7 +104,7 @@ const calculateNonOutliers = (values: number[], firstQuartile: number, thirdQuar
 export const createPlots = (data, config) => {
   const dataKeys = data.map(d => d[config.xAxis.dataKey])
   const plots: Plot[] = []
-  const groups: string[] = _.uniq(dataKeys)
+  const groups: string[] = uniq(dataKeys)
 
   if (groups && groups.length > 0) {
     groups.forEach(group => {

package/src/components/Brush/BrushSelector.tsx

@@ -128,7 +128,7 @@ const BrushSelector: FC<BrushSelectorProps> = ({ xMax, yMax }) => {
       <>
         {Object.entries(config.legend.patterns).map(([key, pattern]) => {
           const patternId = getChartPatternId(key)
-          const size = pattern.patternSize || 8
+          const size = pattern.patternSize || 10
 
           switch (pattern.shape) {
             case 'circles':

package/src/components/EditorPanel/EditorPanel.tsx

@@ -15,6 +15,7 @@ import { EditorPanel as BaseEditorPanel } from '@cdc/core/components/EditorPanel
 import AdvancedEditor from '@cdc/core/components/AdvancedEditor'
 import Icon from '@cdc/core/components/ui/Icon'
 import ColumnsEditor from '@cdc/core/components/EditorPanel/ColumnsEditor'
+import CustomSortOrder from '@cdc/core/components/EditorPanel/CustomSortOrder'
 import DataTableEditor from '@cdc/core/components/EditorPanel/DataTableEditor'
 import GroupedList from '@cdc/core/components/EditorPanel/GroupedList'
 import VizFilterEditor from '@cdc/core/components/EditorPanel/VizFilterEditor'
@@ -36,7 +37,6 @@ import { useEditorPermissions } from './useEditorPermissions'
 import { useHighlightedBars } from '../../hooks/useHighlightedBars'
 import ConfigContext from '../../ConfigContext'
 import useReduceData from '../../hooks/useReduceData'
-import useRightAxis from '../../hooks/useRightAxis'
 import WarningImage from '../../images/warning.svg'
 import getMinMax from '../../helpers/getMinMax'
 
@@ -61,6 +61,7 @@ import { paletteMigrationMap, twoColorPaletteMigrationMap } from '@cdc/core/help
 import { isV1Palette, migratePaletteWithMap } from '@cdc/core/helpers/palettes/utils'
 import { USE_V2_MIGRATION } from '@cdc/core/helpers/constants'
 import { getSeriesOwnedColumnNames } from '../../helpers/seriesColumnSettings'
+import { getOrderedCategoryValues } from '../../helpers/categoryOrder'
 import {
   HEATMAP_CONFIG_DEFAULTS,
   MAX_HEATMAP_COLOR_BUCKETS,
@@ -898,6 +899,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
     visSupportsPreliminaryData,
     visSupportsRankByValue,
     visSupportsResponsiveTicks,
+    visSupportsRightValueAxis,
     visSupportsValueAxisGridLines,
     visSupportsValueAxisLabels,
     visSupportsValueAxisLine,
@@ -949,8 +951,6 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
     }
   }, [config.visualizationType])
 
-  const { hasRightAxis } = useRightAxis({ config: config, yMax: 0, data: config.data, updateConfig })
-
   const getItemStyle = (isDragging, draggableStyle) => ({
     ...draggableStyle
   })
@@ -1059,6 +1059,8 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
         xAxis: {
           ...config.xAxis,
           dataKey: newValue,
+          categoryOrder: [],
+          categoryOrderType: 'data',
           ...(autoDetectedDateParseFormat ? { dateParseFormat: autoDetectedDateParseFormat } : {})
         }
       }
@@ -1289,6 +1291,58 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
     return getDataValues(dataKey, true).filter(value => !excludedKeys.includes(String(value)))
   }
 
+  const categoryOrderValues = useMemo(
+    () =>
+      getOrderedCategoryValues(
+        excludedData as Record<string, any>[],
+        config.xAxis?.dataKey,
+        config.xAxis?.categoryOrder
+      ),
+    [excludedData, config.xAxis?.dataKey, config.xAxis?.categoryOrder]
+  )
+
+  const updateCategoryOrderType = (categoryOrderType: 'data' | 'custom') => {
+    updateConfig({
+      ...config,
+      xAxis: {
+        ...config.xAxis,
+        categoryOrderType,
+        categoryOrder: categoryOrderType === 'custom' ? categoryOrderValues : []
+      }
+    })
+  }
+
+  const renderCategoryOrderControls = (label = 'Category Order') => {
+    if (config.xAxis?.type !== 'categorical' || !config.xAxis?.dataKey || !categoryOrderValues.length) return null
+
+    return (
+      <>
+        <Select
+          value={config.xAxis.categoryOrderType || 'data'}
+          section='xAxis'
+          fieldName='categoryOrderType'
+          label={label}
+          options={[
+            { label: 'Data order', value: 'data' },
+            { label: 'Custom', value: 'custom' }
+          ]}
+          updateField={(_section, _subsection, _fieldName, value) => updateCategoryOrderType(value)}
+        />
+        {config.xAxis.categoryOrderType === 'custom' && (
+          <CustomSortOrder
+            column={config.xAxis.dataKey}
+            data={excludedData as Record<string, any>[]}
+            customOrder={config.xAxis.categoryOrder}
+            updateField={updateFieldDeprecated}
+            updateTarget={{ section: 'xAxis', subsection: null, fieldName: 'categoryOrder' }}
+            droppableId='category_order'
+            draggableIdPrefix='categoryOrder'
+          />
+        )}
+      </>
+    )
+  }
+
   // prettier-ignore
   const {
     highlightedBarValues,
@@ -3127,7 +3181,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                   </AccordionItem>
                 )}
                 {/* Right Value Axis Settings */}
-                {hasRightAxis && (
+                {visSupportsRightValueAxis() && (
                   <AccordionItem>
                     <AccordionItemHeading>
                       <AccordionItemButton>Right Value Axis</AccordionItemButton>
@@ -3378,6 +3432,9 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                                     xAxis: {
                                       ...config.xAxis,
                                       type: value,
+                                      ...(value !== 'categorical'
+                                        ? { categoryOrder: [], categoryOrderType: 'data' }
+                                        : {}),
                                       ...(autoDetectedDateParseFormat
                                         ? { dateParseFormat: autoDetectedDateParseFormat }
                                         : {})
@@ -3448,33 +3505,37 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                               </Tooltip>
                             }
                           />
+                          {renderCategoryOrderControls()}
                         </>
                       )}
 
                       {config.visualizationType === 'Pie' && (
-                        <Select
-                          value={config.xAxis.dataKey || ''}
-                          section='xAxis'
-                          fieldName='dataKey'
-                          label='Segment Labels'
-                          initial='Select'
-                          required={true}
-                          updateField={updateFieldDeprecated}
-                          options={getColumns(false)}
-                          tooltip={
-                            <Tooltip style={{ textTransform: 'none' }}>
-                              <Tooltip.Target>
-                                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                              </Tooltip.Target>
-                              <Tooltip.Content>
-                                <p>
-                                  Select the source row or column that contains the segment labels. Depending on the
-                                  data structure, it may be listed as "Key."
-                                </p>
-                              </Tooltip.Content>
-                            </Tooltip>
-                          }
-                        />
+                        <>
+                          <Select
+                            value={config.xAxis.dataKey || ''}
+                            section='xAxis'
+                            fieldName='dataKey'
+                            label='Segment Labels'
+                            initial='Select'
+                            required={true}
+                            updateField={updateFieldDeprecated}
+                            options={getColumns(false)}
+                            tooltip={
+                              <Tooltip style={{ textTransform: 'none' }}>
+                                <Tooltip.Target>
+                                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                                </Tooltip.Target>
+                                <Tooltip.Content>
+                                  <p>
+                                    Select the source row or column that contains the segment labels. Depending on the
+                                    data structure, it may be listed as "Key."
+                                  </p>
+                                </Tooltip.Content>
+                              </Tooltip>
+                            }
+                          />
+                          {renderCategoryOrderControls('Segment Order')}
+                        </>
                       )}
 
                       {config.visualizationType !== 'Pie' && (
@@ -4181,8 +4242,8 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                               <label htmlFor='barHighlight'>Bar Highlighting</label>
                               {config.series.length === 1 &&
                                 highlightedBarValues.map((highlightedBarValue, i) => (
-                                  <fieldset>
-                                    <div className='edit-block' key={`highlighted-bar-${i}`}>
+                                  <fieldset key={`highlighted-bar-${i}`}>
+                                    <div className='edit-block'>
                                       <Button
                                         className='btn btn-danger'
                                         onClick={e => handleRemoveHighlightedBar(e, i)}

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

@@ -308,7 +308,7 @@ const PanelGeneral: FC<PanelProps> = props => {
             <CheckBox
               value={config.labels}
               fieldName='labels'
-              label='Display label on data'
+              label={visualizationType === 'Pie' ? 'Display Category and Percentage Labels' : 'Display label on data'}
               updateField={updateField}
               tooltip={
                 <Tooltip style={{ textTransform: 'none' }}>
@@ -316,12 +316,21 @@ const PanelGeneral: FC<PanelProps> = props => {
                     <Icon display='question' style={{ marginLeft: '0.5rem' }} />
                   </Tooltip.Target>
                   <Tooltip.Content>
-                    <p>Recommended set to display for Section 508 compliance.</p>
-                    <hr />
-                    <p>
-                      Selecting this option will <i> not </i> hide the display of "zero value", "suppressed data", or
-                      "missing data" indicators on the chart (if applicable).
-                    </p>
+                    {visualizationType === 'Pie' ? (
+                      <p>
+                        Labels that do not fit and donut labels will display outside of chart. Use a Custom Segment
+                        Order to resolve overlapping labels.
+                      </p>
+                    ) : (
+                      <>
+                        <p>Recommended set to display for Section 508 compliance.</p>
+                        <hr />
+                        <p>
+                          Selecting this option will <i> not </i> hide the display of "zero value", "suppressed data",
+                          or "missing data" indicators on the chart (if applicable).
+                        </p>
+                      </>
+                    )}
                   </Tooltip.Content>
                 </Tooltip>
               }

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

@@ -68,7 +68,7 @@ const PanelPatternSettings: FC<PanelProps> = props => {
       case 'large':
         return 16
       default:
-        return 8
+        return 10
     }
   }
 
@@ -192,7 +192,7 @@ const PanelPatternSettings: FC<PanelProps> = props => {
         shape: 'circles' as const,
         dataKey: defaultDataKey,
         dataValue: '',
-        patternSize: 8, // Default pattern size
+        patternSize: 10, // Default pattern size
         contrastCheck: performContrastCheck(newPatternKey, defaultColor)
       }
     }
@@ -437,7 +437,7 @@ const PanelPatternSettings: FC<PanelProps> = props => {
 
                           <Select
                             label='Pattern Size:'
-                            value={getPatternSizeText(p.patternSize || 8)}
+                            value={getPatternSizeText(p.patternSize || 10)}
                             options={patternSizes}
                             fieldName={`pattern-size-${domPatternKey}`}
                             updateField={(section, subsection, fieldName, value) =>

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

@@ -556,6 +556,22 @@ const SeriesColumnSettings = props => {
     })
   }
 
+  const updateSeriesRoundToPlace = value => {
+    const trimmed = value === undefined || value === null ? '' : String(value).trim()
+    if (!trimmed) {
+      updateSeriesColumn('roundToPlace', undefined)
+      return
+    }
+
+    const numericValue = Number(trimmed)
+    if (!Number.isFinite(numericValue)) {
+      updateSeriesColumn('roundToPlace', undefined)
+      return
+    }
+
+    updateSeriesColumn('roundToPlace', Math.max(0, Math.min(20, Math.round(numericValue))))
+  }
+
   return (
     <>
       <span className='divider-heading'>Series Column Settings</span>
@@ -586,14 +602,13 @@ const SeriesColumnSettings = props => {
         />
         <TextField
           type='number'
-          value={columnConfig.roundToPlace ?? 0}
+          value={columnConfig.roundToPlace ?? ''}
           section='seriesColumn'
           subsection={series.dataKey}
           fieldName='roundToPlace'
           label='Round'
-          updateField={(_section, _subsection, _fieldName, value) =>
-            updateSeriesColumn('roundToPlace', Number(value) || 0)
-          }
+          updateField={(_section, _subsection, _fieldName, value) => updateSeriesRoundToPlace(value)}
+          min={0}
         />
       </div>
       <CheckBox

package/src/components/EditorPanel/helpers/updateFieldRankByValue.ts

@@ -1,7 +1,7 @@
 import DataTransform from '@cdc/core/helpers/DataTransform'
 import { ChartConfig } from '../../../types/ChartConfig'
 import cloneConfig from '@cdc/core/helpers/cloneConfig'
-import _ from 'lodash'
+import get from 'lodash/get'
 
 const transform = new DataTransform()
 
@@ -31,8 +31,8 @@ export const updateFieldRankByValue = (
   newConfig.rankByValue = newValue
 
   if (config.rankByValue && !newValue) {
-    const CIkeys: string[] = Object.values(_.get(config, 'confidenceKeys', {})) as string[]
-    const seriesKeys: string[] = _.get(config, 'series', []).map((s: any) => s.dataKey)
+    const CIkeys: string[] = Object.values(get(config, 'confidenceKeys', {})) as string[]
+    const seriesKeys: string[] = get(config, 'series', []).map((s: any) => s.dataKey)
     const keysToClean: string[] = [...(seriesKeys ?? []), ...(CIkeys ?? [])]
 
     const cleanData = config?.xAxis?.dataKey

package/src/components/EditorPanel/useEditorPermissions.test.tsx

@@ -99,6 +99,38 @@ describe('useEditorPermissions', () => {
     expect(unsupported.result.current.visSupportsSeriesColorAssignments()).toBe(false)
   })
 
+  it('shows the data-label control for pie charts', () => {
+    const { result } = renderUseEditorPermissions({
+      visualizationType: 'Pie'
+    })
+
+    expect(result.current.visHasLabelOnData()).toBe(true)
+  })
+
+  it('shows right value axis controls for vertical Combo charts without requiring a right-axis series', () => {
+    const { result } = renderUseEditorPermissions({
+      visualizationType: 'Combo',
+      orientation: 'vertical',
+      series: [{ dataKey: 'Cases', type: 'Bar', axis: 'Left' }] as any
+    })
+
+    expect(result.current.visSupportsRightValueAxis()).toBe(true)
+  })
+
+  it('hides right value axis controls outside vertical Combo charts', () => {
+    const horizontalCombo = renderUseEditorPermissions({
+      visualizationType: 'Combo',
+      orientation: 'horizontal'
+    })
+    const verticalBar = renderUseEditorPermissions({
+      visualizationType: 'Bar',
+      orientation: 'vertical'
+    })
+
+    expect(horizontalCombo.result.current.visSupportsRightValueAxis()).toBe(false)
+    expect(verticalBar.result.current.visSupportsRightValueAxis()).toBe(false)
+  })
+
   it('shows filter-domain behavior when a standalone chart has visible filters and automatic max', () => {
     const { result } = renderUseEditorPermissions({
       filters: [{ columnName: 'Region', showDropdown: true } as any],

package/src/components/EditorPanel/useEditorPermissions.ts

@@ -82,7 +82,6 @@ export const useEditorPermissions = () => {
       'Forest Plot',
       'HeatMap',
       'Horizon Chart',
-      'Pie',
       'Radar',
       'Sankey',
       'Scatter Plot',
@@ -399,6 +398,10 @@ export const useEditorPermissions = () => {
     return true
   }
 
+  const visSupportsRightValueAxis = () => {
+    return visualizationType === 'Combo' && orientation === 'vertical'
+  }
+
   const visSupportsRankByValue = () => {
     const disabledCharts = ['HeatMap', 'Spark Line']
     if (disabledCharts.includes(visualizationType)) return false
@@ -530,6 +533,7 @@ export const useEditorPermissions = () => {
     visSupportsReactTooltip,
     visSupportsRegions,
     visSupportsResponsiveTicks,
+    visSupportsRightValueAxis,
     visSupportsReverseColorPalette,
     visSupportsSequentialPallete,
     visSupportsSeriesColorAssignments,

package/src/components/Forecasting/Forecasting.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useMemo } from 'react'
-import { replace } from 'lodash'
+import replace from 'lodash/replace'
 // cdc
 import ConfigContext from '../../ConfigContext'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'

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

@@ -1,7 +1,6 @@
 import parse from 'html-react-parser'
 import React, { useMemo } from 'react'
 import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend'
-import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
 import LegendShape from '@cdc/core/components/LegendShape'
 import Button from '@cdc/core/components/elements/Button'
 import { getLegendClasses } from './helpers/getLegendClasses'
@@ -22,6 +21,7 @@ import { getHorizonLayerColors, getHorizonMaxValue } from '../../components/Hori
 import { getSeriesWithData } from '../../helpers/dataHelpers'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
+import { processMarkupVariables } from '@cdc/core/helpers/markupProcessor'
 
 const LEGEND_PADDING = 36
 
@@ -62,6 +62,42 @@ const Legend: React.FC<LegendProps> = forwardRef(
     const { innerClasses, containerClasses } = getLegendClasses(config)
     const { runtime, legend } = config
     const { series } = runtime
+    const processedLegendText = useMemo(() => {
+      if (!config.enableMarkupVariables || !config.markupVariables?.length) {
+        return {
+          label: legend?.label,
+          description: legend?.description
+        }
+      }
+
+      const markupOptions = {
+        isEditor: false,
+        filters: config.filters || [],
+        locale: config.locale,
+        dataMetadata: config.dataMetadata
+      }
+
+      return {
+        label: legend?.label
+          ? processMarkupVariables(legend.label, data || config.data || [], config.markupVariables, markupOptions)
+              .processedContent
+          : legend?.label,
+        description: legend?.description
+          ? processMarkupVariables(legend.description, data || config.data || [], config.markupVariables, markupOptions)
+              .processedContent
+          : legend?.description
+      }
+    }, [
+      config.enableMarkupVariables,
+      config.markupVariables,
+      config.filters,
+      config.locale,
+      config.dataMetadata,
+      config.data,
+      data,
+      legend?.label,
+      legend?.description
+    ])
 
     const seriesWithData = getSeriesWithData(config)
     // For Radar charts, seriesWithData contains dimension keys but legend shows entity names
@@ -115,10 +151,12 @@ const Legend: React.FC<LegendProps> = forwardRef(
         aria-label='legend'
         tabIndex={0}
       >
-        {(legend.label || legend.description) && (
-          <div className={legend.description ? 'mb-3' : 'mb-2'}>
-            {legend.label && <h3 className='fw-bold cove-prose'>{parse(legend.label)}</h3>}
-            {legend.description && <p className='mt-2 cove-prose'>{parse(legend.description)}</p>}
+        {(processedLegendText.label || processedLegendText.description) && (
+          <div className={processedLegendText.description ? 'mb-3' : 'mb-2'}>
+            {processedLegendText.label && <h3 className='fw-bold cove-prose'>{parse(processedLegendText.label)}</h3>}
+            {processedLegendText.description && (
+              <p className='mt-2 cove-prose'>{parse(processedLegendText.description)}</p>
+            )}
           </div>
         )}
         <LegendGradient
@@ -298,9 +336,8 @@ const Legend: React.FC<LegendProps> = forwardRef(
                   >
                     {Object.entries(config.legend.patterns).map(([key, pattern]) => {
                       const patternId = `legend-pattern-${key}`
-                      const size = config.legend.patternSize || 8
-                      const legendSize = 16
                       const pColor = (pattern as any)?.color || '#666666'
+                      const patternSize = (pattern as any)?.patternSize ?? 10
 
                       return (
                         <LegendItem
@@ -309,58 +346,16 @@ const Legend: React.FC<LegendProps> = forwardRef(
                           tabIndex={0}
                           role='button'
                         >
-                          <span className='me-2'>
-                            <svg width={legendSize} height={legendSize}>
-                              <defs>
-                                {pattern.shape === 'circles' && (
-                                  <PatternCircles
-                                    id={patternId}
-                                    height={size}
-                                    width={size}
-                                    fill={pColor}
-                                    radius={1.25}
-                                  />
-                                )}
-                                {pattern.shape === 'lines' && (
-                                  <PatternLines
-                                    id={patternId}
-                                    height={size}
-                                    width={size}
-                                    stroke={pColor}
-                                    strokeWidth={0.75}
-                                    orientation={['horizontal']}
-                                  />
-                                )}
-                                {pattern.shape === 'diagonalLines' && (
-                                  <PatternLines
-                                    id={patternId}
-                                    height={size}
-                                    width={size}
-                                    stroke={pColor}
-                                    strokeWidth={0.75}
-                                    orientation={['diagonalRightToLeft']}
-                                  />
-                                )}
-                                {pattern.shape === 'waves' && (
-                                  <PatternWaves
-                                    id={patternId}
-                                    height={size}
-                                    width={size}
-                                    fill={pColor}
-                                    strokeWidth={0.25}
-                                  />
-                                )}
-                              </defs>
-                              <circle
-                                fill={`url(#${patternId})`}
-                                r={legendSize / 2}
-                                cx={legendSize / 2}
-                                cy={legendSize / 2}
-                                stroke='#0000004d'
-                                strokeWidth={1}
-                              />
-                            </svg>
-                          </span>
+                          <LegendShape
+                            shape={config.legend.style === 'boxes' ? 'square' : 'circle'}
+                            fill='white'
+                            patternInfo={{
+                              pattern: pattern.shape || 'circles',
+                              patternId,
+                              size: patternSize,
+                              color: pColor
+                            }}
+                          />
                           <LegendLabel align='left' className='m-0'>
                             {parse(String((pattern as any)?.label || key))}
                           </LegendLabel>

package/src/components/Legend/Legend.Suppression.tsx

@@ -70,16 +70,16 @@ const LegendSuppression: React.FC<LegendProps> = ({ config, isLegendBottom }) =>
 
       if (visualizationType === 'Combo') {
         return (
-          <React.Fragment>
+          <React.Fragment key={itemKey}>
             {pd.symbol && pd.iconCode && (
-              <div style={getStyle(pd.displayGray)} key={itemKey} className={`${baseClass} ${pd.symbol}`}>
+              <div style={getStyle(pd.displayGray)} className={`${baseClass} ${pd.symbol}`}>
                 <span className={pd.symbol}>{pd.iconCode}</span>
                 <p className={pd.type}>{pd.label}</p>
               </div>
             )}
 
             {pd.style && pd.lineCode && (
-              <div style={getStyle(pd.displayGray)} key={itemKey} className={baseClass}>
+              <div style={getStyle(pd.displayGray)} className={baseClass}>
                 <span>{pd.lineCode}</span>
                 <p>{pd.label}</p>
               </div>