@cdc/chart 4.23.5 → 4.23.6

package/src/components/Forecasting.jsx

@@ -0,0 +1,147 @@
+import React, { useContext, useEffect, useState } from 'react'
+
+// cdc
+import ConfigContext from '../ConfigContext'
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import { colorPalettesChart } from '@cdc/core/data/colorPalettes'
+
+// visx & d3
+import { useTooltipInPortal, defaultStyles } from '@visx/tooltip'
+import { curveMonotoneX } from '@visx/curve'
+import { Bar, Area, LinePath, Line } from '@visx/shape'
+import { Group } from '@visx/group'
+
+const Forecasting = ({ xScale, yScale, height, width, chartRef, handleTooltipMouseOver, tooltipData, showTooltip, handleTooltipMouseOff }) => {
+  const { transformedData: data, rawData, config, seriesHighlight, formatNumber } = useContext(ConfigContext)
+  const { xAxis, yAxis, legend, runtime } = config
+  const DEBUG = false
+
+  // sets the portal x/y for where tooltips should appear on the page.
+  const [chartPosition, setChartPosition] = useState(null)
+  useEffect(() => {
+    setChartPosition(chartRef.current.getBoundingClientRect())
+  }, [chartRef])
+
+  // a unique id is needed for tooltips.
+  const tooltip_id = `cdc-open-viz-tooltip-${config.runtime.uniqueId}`
+
+  // it appears we need to use TooltipInPortal.
+  const { TooltipInPortal } = useTooltipInPortal({
+    detectBounds: true,
+    // when tooltip containers are scrolled, this will correctly update the Tooltip position
+    scroll: true
+  })
+
+  const TooltipListItem = ({ item }) => {
+    const [label, value] = item
+    return label === config.xAxis.dataKey ? `${label}: ${value}` : `${label}: ${formatNumber(value, 'left')}`
+  }
+
+  return (
+    data && (
+      <ErrorBoundary component='ForecastingChart'>
+        <Group className='forecasting-items' key='forecasting-items-wrapper' left={yAxis.size}>
+          {runtime.forecastingSeriesKeys?.map((group, index) => {
+            if (!group || !group.stages) return
+            return group.stages.map((stage, stageIndex) => {
+              const { behavior } = legend
+              const groupData = rawData.filter(d => d[group.stageColumn] === stage.key)
+              let transparentArea = behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(stage.key) === -1
+              let displayArea = behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(stage.key) !== -1
+
+              return (
+                <Group className={`forecasting-areas-combo-${index}`} key={`forecasting-areas--stage-${stage.key.replaceAll(' ', '-')}-${index}`}>
+                  {group.confidenceIntervals?.map((ciGroup, ciGroupIndex) => {
+                    const palette = colorPalettesChart[stage.color]
+
+                    return (
+                      <Group key={`forecasting-areas--stage-${stage.key.replaceAll(' ', '-')}--group-${stageIndex}-${ciGroupIndex}`}>
+                        {/* prettier-ignore */}
+                        <Area
+                          curve={curveMonotoneX}
+                          data={groupData}
+                          fill={displayArea ? palette[ciGroupIndex] : 'transparent'}
+                          opacity={transparentArea ? 0.1 : 0.5}
+                          x={d => xScale(Date.parse(d[xAxis.dataKey]))}
+                          y0={d => yScale(d[ciGroup.low])}
+                          y1={d => yScale(d[ciGroup.high])}
+                        />
+
+                        {ciGroupIndex === 0 && (
+                          <>
+                            {/* prettier-ignore */}
+                            <LinePath
+                              data={groupData}
+                              x={ d => xScale(Date.parse(d[xAxis.dataKey])) }
+                              y={ d => yScale(d[ciGroup.high])}
+                              curve={curveMonotoneX}
+                              stroke={displayArea ? palette[2] : 'transparent'}
+                              strokeWidth={1}
+                              strokeOpacity={1}
+                            />
+
+                            {/* prettier-ignore */}
+                            <LinePath
+                              data={groupData}
+                              x={ d => xScale(Date.parse(d[xAxis.dataKey])) }
+                              y={ d => yScale(d[ciGroup.low])}
+                              curve={curveMonotoneX}
+                              stroke={displayArea ? palette[2] : 'transparent'}
+                              strokeWidth={1}
+                              strokeOpacity={1}
+                            />
+                          </>
+                        )}
+                      </Group>
+                    )
+                  })}
+                </Group>
+              )
+            })
+          })}
+
+          {tooltipData && Object.entries(tooltipData.data).length > 0 && config?.runtime?.forecastingSeriesKeys?.length > 0 && (config.visualizationType === 'Combo' || config.visualizationType === 'Forecasting') && (
+            <TooltipInPortal key={Math.random()} top={tooltipData.dataYPosition + chartPosition?.top} left={tooltipData.dataXPosition + chartPosition?.left} style={defaultStyles}>
+              <ul
+                style={{
+                  listStyle: 'none',
+                  paddingLeft: 'unset',
+                  fontFamily: 'sans-serif',
+                  margin: 'auto',
+                  lineHeight: '1rem'
+                }}
+                data-tooltip-id={tooltip_id}
+              >
+                {typeof tooltipData === 'object' &&
+                  Object.entries(tooltipData.data).map((item, index) => (
+                    <li style={{ padding: '2.5px 0' }} key={`li-${index}`}>
+                      <TooltipListItem item={item} />
+                    </li>
+                  ))}
+              </ul>
+            </TooltipInPortal>
+          )}
+          {config?.runtime?.forecastingSeriesKeys?.length > 0 && (config.visualizationType === 'Combo' || config.visualizationType === 'Forecasting') && (
+            <Group key='tooltip-hover-section'>
+              <Bar key={'bars'} width={Number(width)} height={Number(height)} fill={DEBUG ? 'red' : 'transparent'} fillOpacity={0.05} onMouseMove={e => handleTooltipMouseOver(e, data)} onMouseOut={handleTooltipMouseOff} />
+            </Group>
+          )}
+        </Group>
+
+        {showTooltip && tooltipData && config.visual.verticalHoverLine && (
+          <Group key='tooltipLine-vertical' className='vertical-tooltip-line'>
+            <Line from={{ x: tooltipData.dataXPosition - 10, y: 0 }} to={{ x: tooltipData.dataXPosition - 10, y: height }} stroke={'black'} strokeWidth={1} pointerEvents='none' strokeDasharray='5,5' className='vertical-tooltip-line' />
+          </Group>
+        )}
+
+        {showTooltip && tooltipData && config.visual.horizontalHoverLine && (
+          <Group key='tooltipLine-horizontal' className='horizontal-tooltip-line' left={config.yAxis.size ? config.yAxis.size : 0}>
+            <Line from={{ x: 0, y: tooltipData.dataYPosition }} to={{ x: width, y: tooltipData.dataYPosition }} stroke={'black'} strokeWidth={1} pointerEvents='none' strokeDasharray='5,5' className='horizontal-tooltip-line' />
+          </Group>
+        )}
+      </ErrorBoundary>
+    )
+  )
+}
+
+export default Forecasting

package/src/components/Legend.jsx

@@ -7,84 +7,36 @@ import LegendCircle from '@cdc/core/components/LegendCircle'
 import useLegendClasses from './../hooks/useLegendClasses'
 import { useHighlightedBars } from '../hooks/useHighlightedBars'
 
-const Legend = () => {
-  const { config, legend, colorScale, seriesHighlight, highlight, twoColorPalette, tableData, highlightReset, setSeriesHighlight, dynamicLegendItems, setDynamicLegendItems, transformedData: data, colorPalettes, rawData, setConfig, currentViewport } = useContext(ConfigContext)
-
-  const { innerClasses, containerClasses } = useLegendClasses(config)
-
-  useEffect(() => {
-    if (dynamicLegendItems.length === 0) return
-
-    let itemsToHighlight = dynamicLegendItems.map(item => item.text)
-
-    setSeriesHighlight(itemsToHighlight)
+// * FILE REVIEW *
+// TODO: fix eslint-disable jsxa11y issues
 
-    let colsToKeep = [...itemsToHighlight]
-    let tmpLabels = []
-
-    rawData.map(dataItem => {
-      let tmp = {}
-      colsToKeep.map(col => {
-        tmp[col] = isNaN(dataItem[col]) ? dataItem[col] : dataItem[col]
-        return null
-      })
-      return tmp
-    })
-
-    colsToKeep.map(col => {
-      tmpLabels[col] = col
-      return null
-    })
-
-    if (dynamicLegendItems.length > 0) {
-      setConfig({
-        ...config,
-        runtime: {
-          ...config.runtime,
-          seriesKeys: colsToKeep,
-          seriesLabels: tmpLabels
-        }
-      })
-    }
-  }, [dynamicLegendItems]) // eslint-disable-line
-
-  useEffect(() => {
-    if (dynamicLegendItems.length === 0) {
-      // loop through all labels and add keys
-      let resetSeriesNames = [...config.runtime.seriesLabelsAll]
-      let tmpLabels = []
-      config.runtime.seriesLabelsAll.map(item => {
-        resetSeriesNames.map(col => {
-          tmpLabels[col] = col
-          return null
-        })
-        return null
-      })
+// * ADDITIONAL NOTES *
+// > recently removed dynamic legend items as they weren't used
+// > recently removed boxplots, they don't provide any legend settings
 
-      setConfig({
-        ...config,
-        runtime: {
-          ...config.runtime,
-          seriesKeys: config.runtime.seriesLabelsAll,
-          seriesLabels: tmpLabels
-        }
-      })
-    }
-  }, [dynamicLegendItems]) // eslint-disable-line
+/* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
+const Legend = () => {
+  // prettier-ignore
+  const {
+    config,
+    legend,
+    colorScale,
+    seriesHighlight,
+    highlight,
+    twoColorPalette,
+    tableData,
+    highlightReset,
+    transformedData: data,
+    colorPalettes,
+    currentViewport
+  } = useContext(ConfigContext)
 
-  const removeDynamicLegendItem = label => {
-    let newLegendItems = dynamicLegendItems.filter(item => item.text !== label.text)
-    let newLegendItemsText = newLegendItems.map(item => item.text)
-    setDynamicLegendItems(newLegendItems)
-    setSeriesHighlight(newLegendItemsText)
-  }
-  const handleDynamicLegendChange = e => {
-    setDynamicLegendItems([...dynamicLegendItems, JSON.parse(e.target.value)])
-  }
+  const { innerClasses, containerClasses } = useLegendClasses(config)
+  const { visualizationType, visualizationSubType, series, runtime, orientation } = config
 
   const createLegendLabels = defaultLabels => {
     const colorCode = config.legend?.colorCode
-    if (config.visualizationType === 'Deviation Bar') {
+    if (visualizationType === 'Deviation Bar') {
       const [belowColor, aboveColor] = twoColorPalette[config.twoColor.palette]
       const labelBelow = {
         datum: 'X',
@@ -101,20 +53,20 @@ const Legend = () => {
 
       return [labelBelow, labelAbove]
     }
-    if (config.visualizationType === 'Bar' && config.visualizationSubType === 'regular' && colorCode && config.series?.length === 1) {
+    if (visualizationType === 'Bar' && visualizationSubType === 'regular' && colorCode && series?.length === 1) {
       let palette = colorPalettes[config.palette]
 
       while (tableData.length > palette.length) {
         palette = palette.concat(palette)
       }
       palette = palette.slice(0, data.length)
-      //store uniq values to Set by colorCode
+      //store unique values to Set by colorCode
       const set = new Set()
 
       tableData.forEach(d => set.add(d[colorCode]))
 
-      // create labels with uniq values
-      const uniqeLabels = Array.from(set).map((val, i) => {
+      // create labels with unique values
+      const uniqueLabels = Array.from(set).map((val, i) => {
         const newLabel = {
           datum: val,
           index: i,
@@ -124,226 +76,188 @@ const Legend = () => {
         return newLabel
       })
 
-      return uniqeLabels
+      return uniqueLabels
     }
-    return defaultLabels
-  }
 
-  const isBottomOrSmallViewport = config.legend.position === 'bottom' || currentViewport === 'sm' || currentViewport === 'xs' || currentViewport === 'xxs'
-  const isHorizontal = config.orientation === 'horizontal'
-  const marginTop = isBottomOrSmallViewport && isHorizontal ? `${config.runtime.xAxis.size}px` : '0px'
-  const marginBottom = isBottomOrSmallViewport ? '15px' : '0px'
+    // get forecasting items inside of combo
+    if (runtime?.forecastingSeriesKeys?.length > 0) {
+      let seriesLabels = []
 
-  const { HighLightedBarUtils } = useHighlightedBars(config)
+      //store unique values to Set by colorCode
 
-  let highLightedLegendItems = HighLightedBarUtils.findDuplicates(config.highlightedBarValues)
+      // loop through each stage/group/area on the chart and create a label
+      config.runtime?.forecastingSeriesKeys?.map((outerGroup, index) => {
+        return outerGroup?.stages?.map((stage, index) => {
+          let colorValue = colorPalettes[stage.color]?.[2] ? colorPalettes[stage.color]?.[2] : '#ccc'
 
-  if (!legend) return null
+          const newLabel = {
+            datum: stage.key,
+            index: index,
+            text: stage.key,
+            value: colorValue
+          }
 
-  if (!legend.dynamicLegend)
-    return config.visualizationType !== 'Box Plot' ? (
-      <aside style={{ marginTop, marginBottom }} id='legend' className={containerClasses.join(' ')} role='region' aria-label='legend' tabIndex={0}>
-        {legend.label && <h2>{parse(legend.label)}</h2>}
-        {legend.description && <p>{parse(legend.description)}</p>}
-        <LegendOrdinal scale={colorScale} itemDirection='row' labelMargin='0 20px 0 0' shapeMargin='0 10px 0'>
-          {labels => (
-            <div className={innerClasses.join(' ')}>
-              {createLegendLabels(labels).map((label, i) => {
-                let className = 'legend-item'
-                let itemName = label.datum
-
-                // Filter excluded data keys from legend
-                if (config.exclusions.active && config.exclusions.keys?.includes(itemName)) {
-                  return null
-                }
-
-                if (config.runtime.seriesLabels) {
-                  let index = config.runtime.seriesLabelsAll.indexOf(itemName)
-                  itemName = config.runtime.seriesKeys[index]
-                }
-
-                if (seriesHighlight.length > 0 && false === seriesHighlight.includes(itemName)) {
-                  className += ' inactive'
-                }
-
-                return (
-                  <LegendItem
-                    className={className}
-                    tabIndex={0}
-                    key={`legend-quantile-${i}`}
-                    onKeyPress={e => {
-                      if (e.key === 'Enter') {
-                        highlight(label)
-                      }
-                    }}
-                    onClick={() => {
-                      highlight(label)
-                    }}
-                  >
-                    <LegendCircle fill={label.value} />
-                    <LegendLabel align='left' margin='0 0 0 4px'>
-                      {label.text}
-                    </LegendLabel>
-                  </LegendItem>
-                )
-              })}
-
-              {highLightedLegendItems.map((bar, i) => {
-                // if duplicates only return first item
-                let className = 'legend-item'
-                let itemName = bar.legendLabel
-
-                if (!itemName) return
-                if (seriesHighlight.length > 0 && false === seriesHighlight.includes(itemName)) {
-                  className += ' inactive'
-                }
-                return (
-                  <LegendItem
-                    className={className}
-                    tabIndex={0}
-                    key={`legend-quantile-${i}`}
-                    onKeyPress={e => {
-                      if (e.key === 'Enter') {
-                        highlight(bar.legendLabel)
-                      }
-                    }}
-                    onClick={() => {
-                      highlight(bar.legendLabel)
-                    }}
-                  >
-                    <LegendCircle fill='transparent' borderColor={bar.color ? bar.color : `rgba(255, 102, 1)`} />{' '}
-                    <LegendLabel align='left' margin='0 0 0 4px'>
-                      {bar.legendLabel ? bar.legendLabel : bar.value}
-                    </LegendLabel>
-                  </LegendItem>
-                )
-              })}
-              {seriesHighlight.length > 0 && (
-                <button className={`legend-reset ${config.theme}`} onClick={labels => highlightReset(labels)} tabIndex={0}>
-                  Reset
-                </button>
-              )}
-            </div>
-          )}
-        </LegendOrdinal>
-      </aside>
-    ) : (
-      <aside id='legend' className={containerClasses.join(' ')} role='region' aria-label='legend' tabIndex={0}>
-        {config.boxplot.legend.displayHowToReadText && <h3>{config.boxplot.legend.howToReadText}</h3>}
-      </aside>
-    )
-  return (
-    config.visualizationType !== 'Box Plot' && (
-      <aside id='legend' className={containerClasses.join(' ')} role='region' aria-label='legend' tabIndex={0}>
-        {legend.label && <h2>{parse(legend.label)}</h2>}
-        {legend.description && <p>{parse(legend.description)}</p>}
+          seriesLabels.push(newLabel)
+        })
+      })
 
-        <LegendOrdinal scale={colorScale} itemDirection='row' labelMargin='0 20px 0 0' shapeMargin='0 10px 0'>
-          {labels => {
-            if (
-              Number(config.legend.dynamicLegendItemLimit) > dynamicLegendItems.length && // legend items are less than limit
-              dynamicLegendItems.length !== config.runtime.seriesLabelsAll.length
-            ) {
-              // legend items are equal to series length
-              return (
-                <select className='dynamic-legend-dropdown' onChange={e => handleDynamicLegendChange(e)}>
-                  <option className={'all'} tabIndex={0} value={JSON.stringify({ text: config.legend.dynamicLegendDefaultText })}>
-                    {config.legend.dynamicLegendDefaultText}
-                  </option>
-                  {labels.map((label, i) => {
-                    let className = 'legend-item'
-                    let itemName = label.datum
-                    let inDynamicList = false
-
-                    // Filter excluded data keys from legend
-                    if (config.exclusions.active && config.exclusions.keys?.includes(itemName)) {
-                      return null
-                    }
+      // loop through bars for now to meet requirements.
+      config.runtime.barSeriesKeys &&
+        config.runtime.barSeriesKeys.map((bar, index) => {
+          let colorValue = colorPalettes[config.palette][index] ? colorPalettes[config.palette][index] : '#ccc'
 
-                    if (config.runtime.seriesLabels) {
-                      let index = config.runtime.seriesLabelsAll.indexOf(itemName)
-                      itemName = config.runtime.seriesKeys[index]
-                    }
+          const newLabel = {
+            datum: bar,
+            index: index,
+            text: bar,
+            value: colorValue
+          }
 
-                    if (seriesHighlight.length > 0 && false === seriesHighlight.includes(itemName)) {
-                      className += ' inactive'
-                    }
+          seriesLabels.push(newLabel)
+        })
 
-                    dynamicLegendItems.map(listItem => {
-                      if (listItem.text === label.text) {
-                        inDynamicList = true
-                      }
-                      return null
-                    })
+      return seriesLabels
+    }
 
-                    if (inDynamicList) return true
-                    let palette = colorPalettes[config.palette]
+    // DEV-4161: replaceable series name in the legend
+    const hasNewSeriesName = config.series.map(s => s.name).filter(item => item).length > 0
+    if (hasNewSeriesName) {
+      let palette = colorPalettes[config.palette]
 
-                    label.value = palette[dynamicLegendItems.length]
+      while (tableData.length > palette.length) {
+        palette = palette.concat(palette)
+      }
 
-                    return (
-                      <option className={className} tabIndex={0} value={JSON.stringify(label)}>
-                        {label.text}
-                      </option>
-                    )
-                  })}
-                </select>
-              )
-            } else {
-              return config.legend.dynamicLegendItemLimitMessage
-            }
-          }}
-        </LegendOrdinal>
+      palette = palette.slice(0, data.length)
+      //store unique values to Set by colorCode
+      const set = new Set()
+
+      config.series.forEach(d => {
+        set.add(d['name'] ? d['name'] : d['dataKey'])
+      })
+
+      // create labels with unique values
+      const uniqueLabels = Array.from(set).map((val, i) => {
+        const newLabel = {
+          datum: val,
+          index: i,
+          text: val,
+          value: palette[i]
+        }
+        return newLabel
+      })
 
-        <div className='dynamic-legend-list'>
-          {dynamicLegendItems.map((label, i) => {
-            let className = ['legend-item']
-            let itemName = label.text
-            let palette = colorPalettes[config.palette]
+      return uniqueLabels
+    }
 
-            // Filter excluded data keys from legend
-            if (config.exclusions.active && config.exclusions.keys?.includes(itemName)) {
-              return null
-            }
+    return defaultLabels
+  }
 
-            if (config.runtime.seriesLabels && !config.legend.dynamicLegend) {
-              let index = config.runtime.seriesLabelsAll.indexOf(itemName)
-              itemName = config.runtime.seriesKeys[index]
-            }
+  const isBottomOrSmallViewport = legend.position === 'bottom' || currentViewport === 'sm' || currentViewport === 'xs' || currentViewport === 'xxs'
 
-            if (seriesHighlight.length > 0 && !seriesHighlight.includes(itemName)) {
-              className.push('inactive')
-            }
+  const legendClasses = {
+    marginBottom: isBottomOrSmallViewport ? '15px' : '0px',
+    marginTop: isBottomOrSmallViewport && orientation === 'horizontal' ? `${config.runtime.xAxis.size}px` : '0px'
+  }
 
-            if (seriesHighlight.length === 0 && config.legend.dynamicLegend) {
-              className.push('inactive')
-            }
+  const { HighLightedBarUtils } = useHighlightedBars(config)
 
+  let highLightedLegendItems = HighLightedBarUtils.findDuplicates(config.highlightedBarValues)
+
+  if (!legend) return null
+
+  return (
+    config.visualizationType !== 'Box Plot' && (
+      <aside style={legendClasses} id='legend' className={containerClasses.join(' ')} role='region' aria-label='legend' tabIndex={0}>
+        {legend.label && <h2>{parse(legend.label)}</h2>}
+        {legend.description && <p>{parse(legend.description)}</p>}
+        <LegendOrdinal scale={colorScale} itemDirection='row' labelMargin='0 20px 0 0' shapeMargin='0 10px 0'>
+          {labels => {
             return (
-              <>
-                <LegendItem className={className.join(' ')} tabIndex={0} key={`dynamic-legend-item-${i}`} alignItems='center'>
-                  <button
-                    className='btn-wrapper'
-                    onClick={() => {
-                      highlight(label)
-                    }}
-                  >
-                    <LegendCircle fill={palette[i]} config={config} />
-                    <LegendLabel align='space-between' margin='4px 0 0 4px'>
-                      {label.text}
-                    </LegendLabel>
+              <div className={innerClasses.join(' ')}>
+                {createLegendLabels(labels).map((label, i) => {
+                  let className = 'legend-item'
+                  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?.forecastingSeriesKeys?.length > 0) {
+                      itemName = label.text
+                    }
+                  }
+
+                  if (seriesHighlight.length > 0 && false === seriesHighlight.includes(itemName)) {
+                    className += ' inactive'
+                  }
+
+                  return (
+                    <LegendItem
+                      className={className}
+                      tabIndex={0}
+                      key={`legend-quantile-${i}`}
+                      onKeyPress={e => {
+                        if (e.key === 'Enter') {
+                          highlight(label)
+                        }
+                      }}
+                      onClick={() => {
+                        highlight(label)
+                      }}
+                    >
+                      <LegendCircle fill={label.value} />
+                      <LegendLabel align='left' margin='0 0 0 4px'>
+                        {label.text}
+                      </LegendLabel>
+                    </LegendItem>
+                  )
+                })}
+
+                {highLightedLegendItems.map((bar, i) => {
+                  // if duplicates only return first item
+                  let className = 'legend-item'
+                  let itemName = bar.legendLabel
+
+                  if (!itemName) return false
+                  if (seriesHighlight.length > 0 && false === seriesHighlight.includes(itemName)) {
+                    className += ' inactive'
+                  }
+                  return (
+                    <LegendItem
+                      className={className}
+                      tabIndex={0}
+                      key={`legend-quantile-${i}`}
+                      onKeyPress={e => {
+                        if (e.key === 'Enter') {
+                          highlight(bar.legendLabel)
+                        }
+                      }}
+                      onClick={() => {
+                        highlight(bar.legendLabel)
+                      }}
+                    >
+                      <LegendCircle fill='transparent' borderColor={bar.color ? bar.color : `rgba(255, 102, 1)`} />{' '}
+                      <LegendLabel align='left' margin='0 0 0 4px'>
+                        {bar.legendLabel ? bar.legendLabel : bar.value}
+                      </LegendLabel>
+                    </LegendItem>
+                  )
+                })}
+                {seriesHighlight.length > 0 && (
+                  <button className={`legend-reset ${config.theme}`} onClick={labels => highlightReset(labels)} tabIndex={0}>
+                    Reset
                   </button>
-                  <button onClick={() => removeDynamicLegendItem(label)}>x</button>
-                </LegendItem>
-              </>
+                )}
+              </div>
             )
-          })}
-        </div>
-        {seriesHighlight.length < dynamicLegendItems.length && (
-          <button className={`legend-reset legend-reset--dynamic ${config.theme}`} onClick={highlightReset} tabIndex={0}>
-            Reset
-          </button>
-        )}
+          }}
+        </LegendOrdinal>
       </aside>
     )
   )