@cdc/chart 4.23.10 → 4.24.1

package/examples/feature/scatterplot/scatterplot-continuous.csv

@@ -1,17 +0,0 @@
-x,y1,y2,y3,y4
-1000,8,37,72,82
-2000,2,30,75,83
-3000,15,42,51,95
-4,10,38,61,96
-5,1,38,66,86
-60,6,37,70,85
-10,19,47,59,91
-24,18,32,68,89
-3,7,38,74,89
-26,10,39,56,91
-42,16,38,55,76
-32,20,46,52,94
-11,9,41,57,86
-22,10,47,56,80
-73,1,36,71,94
-23,13,30,66,78

package/src/ConfigContext.jsx

@@ -1,5 +0,0 @@
-import { createContext } from 'react'
-
-const ConfigContext = createContext({})
-
-export default ConfigContext

package/src/components/BarChart.StackedVertical.jsx

@@ -1,95 +0,0 @@
-import React, { useContext } from 'react'
-import ConfigContext from '../ConfigContext'
-import { useBarChart } from '../hooks/useBarChart'
-import { BarStack } from '@visx/shape'
-import { Group } from '@visx/group'
-import { Text } from '@visx/text'
-
-const BarChartStackedVertical = props => {
-  const { xScale, yScale, xMax, yMax } = props
-  const { transformedData: data, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, setSharedFilter } = useContext(ConfigContext)
-  const { isHorizontal, barBorderWidth, hasMultipleSeries, applyRadius } = useBarChart()
-  const { orientation } = config
-
-  return (
-    config.visualizationSubType === 'stacked' &&
-    !isHorizontal && (
-      <BarStack data={data} keys={config.runtime.barSeriesKeys || config.runtime.seriesKeys} x={d => d[config.runtime.xAxis.dataKey]} xScale={xScale} yScale={yScale} color={colorScale}>
-        {barStacks =>
-          barStacks.reverse().map(barStack =>
-            barStack.bars.map(bar => {
-              let transparentBar = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(bar.key) === -1
-              let displayBar = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(bar.key) !== -1
-              let barThickness = xMax / barStack.bars.length
-              let barThicknessAdjusted = barThickness * (config.barThickness || 0.8)
-              let offset = (barThickness * (1 - (config.barThickness || 0.8))) / 2
-              // tooltips
-              const xAxisValue = config.runtime.xAxis.type === 'date' ? formatDate(parseDate(data[bar.index][config.runtime.xAxis.dataKey])) : data[bar.index][config.runtime.xAxis.dataKey]
-              const yAxisValue = formatNumber(bar.bar ? bar.bar.data[bar.key] : 0, 'left')
-
-              if(!yAxisValue) return <></>
-
-              const style = applyRadius(barStack.index)
-              let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
-              const xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisValue
-              if (!hasMultipleSeries) {
-                yAxisTooltip = config.isLegendValue ? `${bar.key}: ${yAxisValue}` : config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
-              }
-
-              const {
-                legend: { showLegendValuesTooltip },
-                runtime: { seriesLabels }
-              } = config
-
-              const barStackTooltip = `<div>
-                    <p class="tooltip-heading"><strong>${xAxisTooltip}</strong></p>
-                    ${showLegendValuesTooltip && seriesLabels && hasMultipleSeries ? `${seriesLabels[bar.key] || ''}<br/>` : ''}
-                    ${yAxisTooltip}<br />
-                      </div>`
-
-              return (
-                <Group key={`${barStack.index}--${bar.index}--${orientation}`}>
-                  <style>
-                    {`
-                           #barStack${barStack.index}-${bar.index} rect,
-                           #barStack${barStack.index}-${bar.index} foreignObject{
-                            animation-delay: ${barStack.index * 0.5}s;
-                            transform-origin: ${barThicknessAdjusted / 2}px ${bar.y + bar.height}px
-                          }
-                        `}
-                  </style>
-                  <Group key={`bar-stack-${barStack.index}-${bar.index}`} id={`barStack${barStack.index}-${bar.index}`} className='stack vertical'>
-                    <Text display={config.labels && displayBar ? 'block' : 'none'} opacity={transparentBar ? 0.5 : 1} x={barThickness * bar.index + offset} y={bar.y - 5} fill={'#000'} textAnchor='middle'>
-                      {yAxisValue}
-                    </Text>
-                    <foreignObject
-                      key={`bar-stack-${barStack.index}-${bar.index}`}
-                      x={barThickness * bar.index + offset}
-                      y={bar.y}
-                      width={barThicknessAdjusted}
-                      height={bar.height}
-                      style={{ background: bar.color, border: `${config.barHasBorder === 'true' ? barBorderWidth : 0}px solid #333`, ...style }}
-                      opacity={transparentBar ? 0.5 : 1}
-                      display={displayBar ? 'block' : 'none'}
-                      data-tooltip-html={barStackTooltip}
-                      data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
-                      onClick={e => {
-                        e.preventDefault()
-                        if (setSharedFilter) {
-                          bar[config.xAxis.dataKey] = xAxisValue
-                          setSharedFilter(config.uid, bar)
-                        }
-                      }}
-                    ></foreignObject>
-                  </Group>
-                </Group>
-              )
-            })
-          )
-        }
-      </BarStack>
-    )
-  )
-}
-
-export default BarChartStackedVertical

package/src/components/BarChart.jsx

@@ -1,30 +0,0 @@
-import React, { useContext } from 'react'
-
-// visx
-import { Group } from '@visx/group'
-import { Bar } from '@visx/shape'
-
-// cdc
-import BarChartType from './BarChartType'
-import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import ConfigContext from '../ConfigContext'
-
-const BarChart = ({ xScale, yScale, seriesScale, xMax, yMax, handleTooltipMouseOver, handleTooltipMouseOff, handleTooltipClick }) => {
-  const { transformedData: data, config } = useContext(ConfigContext)
-
-  return (
-    <ErrorBoundary component='BarChart'>
-      <Group left={parseFloat(config.runtime.yAxis.size)}>
-        <BarChartType.StackedVertical xScale={xScale} yScale={yScale} xMax={xMax} yMax={yMax} />
-        <BarChartType.StackedHorizontal xScale={xScale} yScale={yScale} xMax={xMax} yMax={yMax} />
-        <BarChartType.Vertical xScale={xScale} yScale={yScale} xMax={xMax} yMax={yMax} seriesScale={seriesScale} />
-        <BarChartType.Horizontal xScale={xScale} yScale={yScale} xMax={xMax} yMax={yMax} seriesScale={seriesScale} />
-
-        {/* tooltips */}
-        <Bar key={'bars'} width={Number(xMax)} height={Number(yMax)} fill={false ? 'red' : 'transparent'} fillOpacity={0.05} onMouseMove={e => handleTooltipMouseOver(e, data)} onMouseOut={handleTooltipMouseOff} onClick={e => handleTooltipClick(e, data)} />
-      </Group>
-    </ErrorBoundary>
-  )
-}
-
-export default BarChart

package/src/components/ForestPlot.jsx

@@ -1,191 +0,0 @@
-import React, { useContext, useEffect } from 'react'
-
-// visx
-import { Group } from '@visx/group'
-import { Line, Bar, Circle, LinePath } from '@visx/shape'
-import { GlyphDiamond } from '@visx/glyph'
-import { Text } from '@visx/text'
-import { scaleLinear } from '@visx/scale'
-import { curveLinearClosed } from '@visx/curve'
-
-// cdc
-import ConfigContext from '../ConfigContext'
-import { getFontSize } from '@cdc/core/helpers/cove/number'
-
-const ForestPlot = props => {
-  const { transformedData: data, updateConfig, dimensions, rawData } = useContext(ConfigContext)
-  const { xScale, yScale, config, height, width, handleTooltipMouseOff, handleTooltipMouseOver, maxWidth, maxHeight } = props
-  const { forestPlot, runtime, dataFormat } = config
-  const [screenWidth, screenHeight] = dimensions
-
-  // Requirements for forest plot
-  // - force legend to be hidden for this chart type
-  // - reset the date category axis to zero
-  useEffect(() => {
-    if (!config.legend.hide) {
-      updateConfig({
-        ...config,
-        legend: {
-          ...config.legend,
-          hide: true
-        },
-        xAxis: {
-          ...config.xAxis,
-          size: 0
-        }
-      })
-    }
-  }, [])
-
-  const diamondHeight = 5
-
-  // diamond path
-  const regressionPoints = [
-    { x: xScale(forestPlot.regression.lower), y: height - Number(config.forestPlot.rowHeight) },
-    { x: xScale(forestPlot.regression.estimateField), y: height - diamondHeight - Number(config.forestPlot.rowHeight) },
-    { x: xScale(forestPlot.regression.upper), y: height - Number(config.forestPlot.rowHeight) },
-    { x: xScale(forestPlot.regression.estimateField), y: height + diamondHeight - Number(config.forestPlot.rowHeight) },
-    { x: xScale(forestPlot.regression.lower), y: height - Number(config.forestPlot.rowHeight) }
-  ]
-
-  const topMarginOffset = config.forestPlot.rowHeight
-
-  const topLine = [
-    { x: 0, y: topMarginOffset },
-    { x: width, y: topMarginOffset }
-  ]
-
-  const bottomLine = [
-    { x: 0, y: height },
-    { x: width, y: height }
-  ]
-
-  const columnsOnChart = Object.entries(config.columns)
-    .map(entry => entry[1])
-    .filter(entry => entry.forestPlot === true)
-
-  const rightOffset = forestPlot.rightWidthOffset !== 0 ? (Number(forestPlot.rightWidthOffset) / 100) * width : width
-  const leftOffset = forestPlot.leftWidthOffset !== 0 ? (Number(forestPlot.leftWidthOffset) / 100) * width : width
-  const chartWidth = width - rightOffset - leftOffset
-
-  return (
-    <>
-      <Group>
-        {forestPlot.title !== '' && (
-          <Text className={`forest-plot--title`} x={xScale(0)} y={0} textAnchor='middle' verticalAnchor='start' fontSize={getFontSize(config.fontSize)} fill={'black'}>
-            {forestPlot.title}
-          </Text>
-        )}
-        {forestPlot.regression.showBaseLine && <Line from={{ x: xScale(forestPlot.regression.estimateField), y: 0 + topMarginOffset }} to={{ x: xScale(forestPlot.regression.estimateField), y: height }} className='forestplot__baseline' stroke={forestPlot.regression.baseLineColor || 'black'} />}
-        {forestPlot.showZeroLine && <Line from={{ x: xScale(0), y: 0 + topMarginOffset }} to={{ x: xScale(0), y: height }} className='forestplot__zero-line' stroke='gray' strokeDasharray={'5 5'} />}
-
-        {data.map((d, i) => {
-          // calculate both square and circle size based on radius.min and radius.max
-          const scaleRadius = scaleLinear({
-            domain: xScale.domain(),
-            range: [forestPlot.radius.min, forestPlot.radius.max]
-          })
-
-          // glyph settings
-          const diamondSize = forestPlot.radius.scalingColumn !== '' ? scaleRadius(data[i][forestPlot.estimateField]) * 5 : 4
-          const rectSize = forestPlot.radius.scalingColumn !== '' ? scaleRadius(data[i][forestPlot.estimateField]) : 4
-          const shapeColor = forestPlot.colors.shape ? forestPlot.colors.shape : 'black'
-          const lineColor = forestPlot.colors.line ? forestPlot.colors.line : 'black'
-
-          // ci size
-          const ciEndSize = 4
-
-          return (
-            <Group>
-              {/* Confidence Interval Paths */}
-              <path
-                stroke={lineColor}
-                strokeWidth={1}
-                className='lower-ci'
-                d={`
-                    M${xScale(d[forestPlot.lower])} ${yScale(i) - Number(ciEndSize)}
-                    L${xScale(d[forestPlot.lower])} ${yScale(i) + Number(ciEndSize)}
-                `}
-              />
-
-              <path
-                stroke={lineColor}
-                strokeWidth={1}
-                className='upper-ci'
-                d={`
-                    M${xScale(d[forestPlot.upper])} ${yScale(i) - Number(ciEndSize)}
-                    L${xScale(d[forestPlot.upper])} ${yScale(i) + Number(ciEndSize)}
-                `}
-              />
-
-              {/* main line */}
-              <line stroke={lineColor} className={`line-${d[config.yAxis.dataKey]}`} key={i} x1={xScale(d[forestPlot.lower])} x2={xScale(d[forestPlot.upper])} y1={yScale(i)} y2={yScale(i)} />
-              {forestPlot.shape === 'circle' && (
-                <Circle className='forest-plot--circle' cx={xScale(Number(d[forestPlot.estimateField]))} cy={yScale(i)} r={forestPlot.radius.scalingColumn !== '' ? scaleRadius(data[i][forestPlot.estimateField]) : 4} fill={shapeColor} style={{ opacity: 1, filter: 'unset' }} />
-              )}
-              {forestPlot.shape === 'square' && <rect className='forest-plot--square' x={xScale(Number(d[forestPlot.estimateField]))} y={yScale(i) - rectSize / 2} width={rectSize} height={rectSize} fill={shapeColor} style={{ opacity: 1, filter: 'unset' }} />}
-              {forestPlot.shape === 'diamond' && <GlyphDiamond className='forest-plot--diamond' size={diamondSize} top={yScale(i)} left={xScale(Number(d[forestPlot.estimateField]))} fill={shapeColor} />}
-              {forestPlot.shape === 'text' && (
-                <Text className='forest-plot--text' x={xScale(Number(d[forestPlot.estimateField]))} y={yScale(i)} textAnchor='middle' verticalAnchor='middle' fontSize={getFontSize(config.fontSize)} fill={shapeColor}>
-                  {d[forestPlot.estimateField]}
-                </Text>
-              )}
-            </Group>
-          )
-        })}
-
-        {/* regression diamond */}
-        {regressionPoints && forestPlot.regression.showDiamond && <LinePath data={regressionPoints} x={d => d.x} y={d => d.y} stroke='black' strokeWidth={2} fill={forestPlot.regression.baseLineColor} curve={curveLinearClosed} />}
-        {/* regression text */}
-        {forestPlot.regression.description && (
-          <Text x={0 - Number(config.xAxis.size)} width={width} y={height - config.forestPlot.rowHeight - Number(forestPlot.rowHeight) / 3} verticalAnchor='start' textAnchor='start' style={{ fontWeight: 'bold', fontSize: 12 }}>
-            {forestPlot.regression.description}
-          </Text>
-        )}
-
-        <Bar key='forest-plot-tooltip-area' className='forest-plot-tooltip-area' width={width} height={height} fill={false ? 'red' : 'transparent'} fillOpacity={0.5} onMouseMove={e => handleTooltipMouseOver(e, data)} onMouseOut={handleTooltipMouseOff} />
-      </Group>
-      <Line from={topLine[0]} to={topLine[1]} style={{ stroke: 'black', strokeWidth: 2 }} className='forestplot__top-line' />
-      <Line from={bottomLine[0]} to={bottomLine[1]} style={{ stroke: 'black', strokeWidth: 2 }} className='forestplot__bottom-line' />
-
-      {/* column data */}
-      {columnsOnChart.map(column => {
-        return rawData.map((d, i) => {
-          return (
-            <Text className={`${d[column.name]}`} x={column.forestPlotAlignRight ? width : column.forestPlotStartingPoint} y={yScale(i)} textAnchor={column.forestPlotAlignRight ? 'end' : 'start'} verticalAnchor='middle' fontSize={getFontSize(config.fontSize)} fill={'black'}>
-              {d[column.name]}
-            </Text>
-          )
-        })
-      })}
-
-      {/* X Axis DataKey Cols*/}
-      {!forestPlot.hideDateCategoryCol &&
-        data.map((d, i) => {
-          return (
-            <Text className={`${d[config.xAxis.dataKey]}`} x={0} y={yScale(i)} textAnchor={'start'} verticalAnchor='middle' fontSize={getFontSize(config.fontSize)} fill={'black'}>
-              {d[config.xAxis.dataKey]}
-            </Text>
-          )
-        })}
-
-      {/* X Axis Datakey Header */}
-      {!forestPlot.hideDateCategoryCol && config.xAxis.dataKey && (
-        <Text className={config.xAxis.dataKey} x={0} y={0} textAnchor={'start'} verticalAnchor='start' fontSize={getFontSize(config.fontSize)} fill={'black'}>
-          {config.xAxis.dataKey}
-        </Text>
-      )}
-
-      {/* column headers */}
-      {columnsOnChart.map(column => {
-        return (
-          <Text className={`${column.label}`} x={column.forestPlotAlignRight ? width : column.forestPlotStartingPoint} y={0} textAnchor={column.forestPlotAlignRight ? 'end' : 'start'} verticalAnchor='start' fontSize={getFontSize(config.fontSize)} fill={'black'}>
-            {column.label}
-          </Text>
-        )
-      })}
-    </>
-  )
-}
-
-export default ForestPlot

package/src/components/Legend.jsx

@@ -1,277 +0,0 @@
-import React, { useContext, useEffect } from 'react'
-import ConfigContext from '../ConfigContext'
-import parse from 'html-react-parser'
-import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend'
-import LegendCircle from '@cdc/core/components/LegendCircle'
-
-import useLegendClasses from './../hooks/useLegendClasses'
-import { useHighlightedBars } from '../hooks/useHighlightedBars'
-import { Line } from '@visx/shape'
-import { sequentialPalettes } from '@cdc/core/data/colorPalettes'
-
-// * FILE REVIEW *
-// TODO: fix eslint-disable jsxa11y issues
-
-// * ADDITIONAL NOTES *
-// > recently removed dynamic legend items as they weren't used
-// > recently removed boxplots, they don't provide any legend settings
-
-/* 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,
-    handleLineType
-  } = useContext(ConfigContext)
-
-  const { innerClasses, containerClasses } = useLegendClasses(config)
-  const { visualizationType, visualizationSubType, series, runtime, orientation } = config
-  // create fn to reverse labels while legend is Bottom.  Legend-right , legend-left works by default.
-  const reverseLabels = labels => (config.legend.reverseLabelOrder && config.legend.position === 'bottom' ? labels.reverse() : labels)
-
-  const createLegendLabels = defaultLabels => {
-    const colorCode = config.legend?.colorCode
-    if (visualizationType === 'Deviation Bar') {
-      const [belowColor, aboveColor] = twoColorPalette[config.twoColor.palette]
-      const labelBelow = {
-        datum: 'X',
-        index: 0,
-        text: `Below ${config.xAxis.targetLabel}`,
-        value: belowColor
-      }
-      const labelAbove = {
-        datum: 'X',
-        index: 1,
-        text: `Above ${config.xAxis.targetLabel}`,
-        value: aboveColor
-      }
-
-      return reverseLabels([labelBelow, labelAbove])
-    }
-    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 unique values to Set by colorCode
-      const set = new Set()
-
-      tableData.forEach(d => set.add(d[colorCode]))
-
-      // 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
-      })
-
-      return reverseLabels(uniqueLabels)
-    }
-
-    // get forecasting items inside of combo
-    if (runtime?.forecastingSeriesKeys?.length > 0) {
-      let seriesLabels = []
-
-      //store unique values to Set by colorCode
-
-      // 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 = sequentialPalettes[stage.color]?.[2] ? sequentialPalettes[stage.color]?.[2] : colorPalettes[stage.color]?.[2] ? colorPalettes[stage.color]?.[2] : '#ccc'
-
-          const newLabel = {
-            datum: stage.key,
-            index: index,
-            text: stage.key,
-            value: colorValue
-          }
-
-          seriesLabels.push(newLabel)
-        })
-      })
-
-      // loop through bars for now to meet requirements.
-      config.runtime.barSeriesKeys &&
-        config.runtime.barSeriesKeys.forEach((bar, index) => {
-          let colorValue = colorPalettes[config.palette][index] ? colorPalettes[config.palette][index] : '#ccc'
-
-          const newLabel = {
-            datum: bar,
-            index: index,
-            text: bar,
-            value: colorValue
-          }
-
-          seriesLabels.push(newLabel)
-        })
-
-      return reverseLabels(seriesLabels)
-    }
-
-    // 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]
-
-      while (tableData.length > palette.length) {
-        palette = palette.concat(palette)
-      }
-
-      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
-      })
-
-      return reverseLabels(uniqueLabels)
-    }
-
-    return reverseLabels(defaultLabels)
-  }
-
-  const isBottomOrSmallViewport = legend.position === 'bottom' || ['sm', 'xs', 'xxs'].includes(currentViewport)
-
-  const legendClasses = {
-    marginBottom: isBottomOrSmallViewport ? '15px' : '0px',
-    marginTop: isBottomOrSmallViewport && orientation === 'horizontal' ? `${config.yAxis.label && config.isResponsiveTicks ? config.dynamicMarginTop : config.runtime.xAxis.size}px` : `${config.dynamicMarginTop + 15}px`
-  }
-
-  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 (
-              <div className={innerClasses.join(' ')}>
-                {createLegendLabels(labels).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?.forecastingSeriesKeys?.length > 0) {
-                      itemName = label.text
-                    }
-                  }
-
-                  if (seriesHighlight.length > 0 && false === seriesHighlight.includes(itemName)) {
-                    className.push('inactive')
-                  }
-
-                  return (
-                    <LegendItem
-                      className={className.join(' ')}
-                      tabIndex={0}
-                      key={`legend-quantile-${i}`}
-                      onKeyPress={e => {
-                        if (e.key === 'Enter') {
-                          highlight(label)
-                        }
-                      }}
-                      onClick={() => {
-                        highlight(label)
-                      }}
-                    >
-                      {config.visualizationType === 'Line' && config.legend.lineMode ? (
-                        <svg width={40} height={20}>
-                          <Line from={{ x: 10, y: 10 }} to={{ x: 40, y: 10 }} stroke={label.value} strokeWidth={2} strokeDasharray={handleLineType(config.series[i]?.type ? config.series[i]?.type : '')} />
-                        </svg>
-                      ) : (
-                        <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>
-                )}
-              </div>
-            )
-          }}
-        </LegendOrdinal>
-      </aside>
-    )
-  )
-}
-
-export default Legend