@cdc/chart 4.23.1 → 4.23.2

package/src/components/{BarChart.tsx → BarChart.jsx}

@@ -4,11 +4,15 @@ import { BarGroup, BarStack } from '@visx/shape'
 import { Text } from '@visx/text'
 import chroma from 'chroma-js'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import Context from '../context'
+import ConfigContext from '../ConfigContext'
 import { BarStackHorizontal } from '@visx/shape'
 
 export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getXAxisData, getYAxisData, animatedChart, visible }) {
-  const { transformedData: data, colorScale, seriesHighlight, config, formatNumber, updateConfig, colorPalettes, formatDate, parseDate } = useContext<any>(Context)
+  const { transformedData: data, colorScale, seriesHighlight, config, formatNumber, updateConfig, colorPalettes, formatDate, isNumber, cleanData, getTextWidth, parseDate } = useContext(ConfigContext)
+  // Just do this once up front otherwise we end up
+  // calling clean several times on same set of data (TT)
+  const cleanedData = cleanData(data, config.xAxis.dataKey)
+
   const { orientation, visualizationSubType } = config
   const isHorizontal = orientation === 'horizontal'
 
@@ -25,15 +29,20 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
   const radius = config.roundingStyle === 'standard' ? '8px' : config.roundingStyle === 'shallow' ? '5px' : config.roundingStyle === 'finger' ? '15px' : '0px'
   const stackCount = config.runtime.seriesKeys.length
   const barBorderWidth = 1
-  const fontSize = { small: 14, medium: 16, large: 18 }
+  const fontSize = { small: 16, medium: 18, large: 20 }
   const hasMultipleSeries = Object.keys(config.runtime.seriesLabels).length > 1
 
-  const applyRadius = (index: number) => {
+  const applyRadius = (index, isNegative) => {
     if (index === undefined || index === null || !isRounded) return
     let style = {}
 
     if ((isStacked && index + 1 === stackCount) || !isStacked) {
-      style = isHorizontal ? { borderRadius: `0 ${radius}  ${radius}  0` } : { borderRadius: `${radius} ${radius} 0 0` }
+      if (isNegative) {
+        // reverse borderRadius to bottom
+        style = isHorizontal ? { borderRadius: `0 ${radius}  ${radius}  0` } : { borderRadius: `0 0 ${radius} ${radius}` }
+      } else {
+        style = isHorizontal ? { borderRadius: `0 ${radius}  ${radius}  0` } : { borderRadius: `${radius} ${radius} 0 0` }
+      }
     }
     if (tipRounding === 'full' && isStacked && index === 0 && stackCount > 1) {
       style = isHorizontal ? { borderRadius: `${radius} 0 0 ${radius}` } : { borderRadius: `0 0 ${radius} ${radius}` }
@@ -41,7 +50,6 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
     if (tipRounding === 'full' && ((isStacked && index === 0 && stackCount === 1) || !isStacked)) {
       style = { borderRadius: radius }
     }
-
     return style
   }
   // }
@@ -84,16 +92,6 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
     })
   }
 
-  function getTextWidth(text, font) {
-    // function calculates the width of given text and its font-size
-    const canvas = document.createElement('canvas')
-    const context = canvas.getContext('2d')
-
-    context.font = font || getComputedStyle(document.body).font
-
-    return Math.ceil(context.measureText(text).width)
-  }
-
   // Using State
   const [textWidth, setTextWidth] = useState(null)
 
@@ -135,10 +133,10 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
 
   return (
     <ErrorBoundary component='BarChart'>
-      <Group left={config.runtime.yAxis.size}>
+      <Group left={parseFloat(config.runtime.yAxis.size)}>
         {/* Stacked Vertical */}
         {config.visualizationSubType === 'stacked' && !isHorizontal && (
-          <BarStack data={data} keys={config.runtime.barSeriesKeys || config.runtime.seriesKeys} x={(d: any) => d[config.runtime.xAxis.dataKey]} xScale={xScale} yScale={yScale} color={colorScale}>
+          <BarStack data={cleanedData} 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 => {
@@ -147,10 +145,10 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                   let barThickness = xMax / barStack.bars.length
                   let barThicknessAdjusted = barThickness * (config.barThickness || 0.8)
                   let offset = (barThickness * (1 - (config.barThickness || 0.8))) / 2
-                  const style = applyRadius(barStack.index)
                   // 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)
+                  const style = applyRadius(barStack.index, yAxisValue < 0)
                   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) {
@@ -162,14 +160,13 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                   ${yAxisTooltip}<br />
                   ${xAxisTooltip}
                     </div>`
-
                   return (
                     <>
                       <style>
                         {`
                          #barStack${barStack.index}-${bar.index} rect,
                          #barStack${barStack.index}-${bar.index} foreignObject{
-                          animation-delay: ${barStack.index}.2s;
+                          animation-delay: ${barStack.index * 0.5}s;
                           transform-origin: ${barThicknessAdjusted / 2}px ${bar.y + bar.height}px
                         }
                       `}
@@ -187,8 +184,8 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                           style={{ background: bar.color, border: `${config.barHasBorder === 'true' ? barBorderWidth : 0}px solid #333`, ...style }}
                           opacity={transparentBar ? 0.5 : 1}
                           display={displayBar ? 'block' : 'none'}
-                          data-tip={tooltip}
-                          data-for={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+                          data-tooltip-html={tooltip}
+                          data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
                         ></foreignObject>
                       </Group>
                     </>
@@ -202,18 +199,18 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
         {/* Stacked Horizontal */}
         {config.visualizationSubType === 'stacked' && isHorizontal && (
           <>
-            <BarStackHorizontal data={data} keys={config.runtime.barSeriesKeys || config.runtime.seriesKeys} height={yMax} y={(d: any) => d[config.runtime.yAxis.dataKey]} xScale={xScale} yScale={yScale} color={colorScale} offset='none'>
+            <BarStackHorizontal data={cleanedData} keys={config.runtime.barSeriesKeys || config.runtime.seriesKeys} height={yMax} y={d => d[config.runtime.yAxis.dataKey]} xScale={xScale} yScale={yScale} color={colorScale} offset='none'>
               {barStacks =>
                 barStacks.map(barStack =>
                   updateBars(barStack.bars).map((bar, index) => {
                     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
                     config.barHeight = Number(config.barHeight)
-                    const style = applyRadius(barStack.index)
                     let labelColor = '#000000'
                     // tooltips
                     const xAxisValue = formatNumber(data[bar.index][bar.key])
                     const yAxisValue = config.runtime.yAxis.type === 'date' ? formatDate(parseDate(data[bar.index][config.runtime.originalXAxis.dataKey])) : data[bar.index][config.runtime.originalXAxis.dataKey]
+                    const style = applyRadius(barStack.index, yAxisValue < 0)
                     let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
                     let xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisValue
                     if (!hasMultipleSeries) {
@@ -230,53 +227,64 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                     }
 
                     return (
-                      <Group key={index}>
-                        <foreignObject
-                          key={`barstack-horizontal-${barStack.index}-${bar.index}-${index}`}
-                          className={`animated-chart group ${animatedChart ? 'animated' : ''}`}
-                          x={bar.x}
-                          y={bar.y}
-                          width={bar.width}
-                          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-tip={tooltip}
-                          data-for={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
-                        ></foreignObject>
-
-                        {orientation === 'horizontal' && visualizationSubType === 'stacked' && isLabelBelowBar && barStack.index === 0 && !config.yAxis.hideLabel && (
-                          <Text
-                            x={`${bar.x + (config.isLollipopChart ? 15 : 5)}`} // padding
-                            y={bar.y + bar.height * 1.2}
-                            fill={'#000000'}
-                            textAnchor='start'
-                            verticalAnchor='start'
-                          >
-                            {yAxisValue}
-                          </Text>
-                        )}
-
-                        {displayNumbersOnBar && textWidth + 50 < bar.width && (
-                          <Text
+                      <>
+                        <style>
+                          {`
+                         #barStack${barStack.index}-${bar.index} rect,
+                         #barStack${barStack.index}-${bar.index} foreignObject{
+                          animation-delay: ${barStack.index * 0.5}s;
+                          transform-origin: ${bar.x}px
+                        }
+                      `}
+                        </style>
+                        <Group key={index} id={`barStack${barStack.index}-${bar.index}`} className='stack horizontal'>
+                          <foreignObject
+                            key={`barstack-horizontal-${barStack.index}-${bar.index}-${index}`}
+                            className={`animated-chart group ${animatedChart ? 'animated' : ''}`}
+                            x={bar.x}
+                            y={bar.y}
+                            width={bar.width}
+                            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'}
-                            x={bar.x + barStack.bars[bar.index].width / 2} // padding
-                            y={bar.y + bar.height / 2}
-                            fill={labelColor}
-                            textAnchor='middle'
-                            verticalAnchor='middle'
-                            innerRef={e => {
-                              if (e) {
-                                // use font sizes and padding to set the bar height
-                                let elem = e.getBBox()
-                                setTextWidth(elem.width)
-                              }
-                            }}
-                          >
-                            {formatNumber(data[bar.index][bar.key])}
-                          </Text>
-                        )}
-                      </Group>
+                            data-tooltip-html={tooltip}
+                            data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+                          ></foreignObject>
+
+                          {orientation === 'horizontal' && visualizationSubType === 'stacked' && isLabelBelowBar && barStack.index === 0 && !config.yAxis.hideLabel && (
+                            <Text
+                              x={`${bar.x + (config.isLollipopChart ? 15 : 5)}`} // padding
+                              y={bar.y + bar.height * 1.2}
+                              fill={'#000000'}
+                              textAnchor='start'
+                              verticalAnchor='start'
+                            >
+                              {yAxisValue}
+                            </Text>
+                          )}
+
+                          {displayNumbersOnBar && textWidth + 50 < bar.width && (
+                            <Text
+                              display={displayBar ? 'block' : 'none'}
+                              x={bar.x + barStack.bars[bar.index].width / 2} // padding
+                              y={bar.y + bar.height / 2}
+                              fill={labelColor}
+                              textAnchor='middle'
+                              verticalAnchor='middle'
+                              innerRef={e => {
+                                if (e) {
+                                  // use font sizes and padding to set the bar height
+                                  let elem = e.getBBox()
+                                  setTextWidth(elem.width)
+                                }
+                              }}
+                            >
+                              {formatNumber(data[bar.index][bar.key])}
+                            </Text>
+                          )}
+                        </Group>
+                      </>
                     )
                   })
                 )
@@ -289,10 +297,10 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
         {config.visualizationSubType !== 'stacked' && (
           <Group>
             <BarGroup
-              data={data}
+              data={cleanedData}
               keys={config.runtime.barSeriesKeys || config.runtime.seriesKeys}
               height={yMax}
-              x0={(d: any) => d[config.runtime.originalXAxis.dataKey]}
+              x0={d => d[config.runtime.originalXAxis.dataKey]}
               x0Scale={config.runtime.horizontal ? yScale : xScale}
               x1Scale={seriesScale}
               yScale={config.runtime.horizontal ? xScale : yScale}
@@ -311,8 +319,8 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                     {barGroup.bars.map((bar, index) => {
                       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 barHeight = orientation === 'horizontal' ? config.barHeight : Math.abs(yScale(bar.value) - yScale(0))
-                      let barY = bar.value >= 0 ? bar.y : yScale(0)
+                      let barHeight = orientation === 'horizontal' ? config.barHeight : isNumber(Math.abs(yScale(bar.value) - yScale(0))) ? Math.abs(yScale(bar.value) - yScale(0)) : 0
+                      let barY = bar.value >= 0 && isNumber(bar.value) ? bar.y : yScale(0)
                       let barGroupWidth = ((config.runtime.horizontal ? yMax : xMax) / barGroups.length) * (config.barThickness || 0.8)
                       let offset = (((config.runtime.horizontal ? yMax : xMax) / barGroups.length) * (1 - (config.barThickness || 0.8))) / 2
 
@@ -342,18 +350,18 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                         xAxisValue = tempValue
                         barWidth = config.barHeight
                       }
+                      // check if bar text/value string fits into  each bars.
+                      let textWidth = getTextWidth(xAxisValue, `normal ${fontSize[config.fontSize]}px sans-serif`)
+                      let textFits = textWidth < bar.y - 5 // minus padding 5
+
                       let labelColor = '#000000'
 
                       // Set label color
                       if (chroma.contrast(labelColor, barColor) < 4.9) {
-                        labelColor = '#FFFFFF'
+                        if (textFits) labelColor = '#FFFFFF'
                       }
 
-                      const style = applyRadius(index)
-
-                      // check if bar text/value string fits into  each bars.
-                      let textWidth = getTextWidth(xAxisValue, config.fontSize)
-                      let doesTextFit = (textWidth / bar.y) * 100 < 48
+                      const style = applyRadius(index, yAxisValue < 0)
 
                       let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
                       let xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisValue
@@ -396,18 +404,18 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                               }}
                               opacity={transparentBar ? 0.5 : 1}
                               display={displayBar ? 'block' : 'none'}
-                              data-tip={tooltip}
-                              data-for={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+                              data-tooltip-html={tooltip}
+                              data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
                             ></foreignObject>
                             {orientation === 'horizontal' && !config.isLollipopChart && displayNumbersOnBar && (
-                              <Text
+                              <Text // prettier-ignore
                                 display={displayBar ? 'block' : 'none'}
                                 x={bar.y}
                                 y={config.barHeight / 2 + config.barHeight * bar.index}
                                 fill={labelColor}
-                                dx={doesTextFit ? -5 : 5} // X padding
+                                dx={textFits ? -5 : 5}
                                 verticalAnchor='middle'
-                                textAnchor={doesTextFit ? 'end' : 'start'}
+                                textAnchor={textFits ? 'end' : 'start'}
                               >
                                 {xAxisValue}
                               </Text>
@@ -438,7 +446,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                             ;
                             {orientation === 'vertical' && (
                               <Text display={config.labels && displayBar ? 'block' : 'none'} opacity={transparentBar ? 0.5 : 1} x={barWidth * (bar.index + 0.5) + offset} y={barY - 5} fill={barColor} textAnchor='middle'>
-                                {bar.value}
+                                {formatNumber(bar.value)}
                               </Text>
                             )}
                             ;
@@ -449,8 +457,8 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                                 r={lollipopShapeSize / 2}
                                 fill={barColor}
                                 key={`circle--${bar.index}`}
-                                data-tip={tooltip}
-                                data-for={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+                                data-tooltip-html={tooltip}
+                                data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
                                 style={{ filter: 'unset', opacity: 1 }}
                               />
                             )}
@@ -462,8 +470,8 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                                 height={lollipopShapeSize}
                                 fill={barColor}
                                 key={`circle--${bar.index}`}
-                                data-tip={tooltip}
-                                data-for={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+                                data-tooltip-html={tooltip}
+                                data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
                                 style={{ opacity: 1, filter: 'unset' }}
                               >
                                 <animate attributeName='height' values={`0, ${lollipopShapeSize}`} dur='2.5s' />

package/src/components/BoxPlot.jsx

@@ -0,0 +1,88 @@
+import React, { useContext } from 'react'
+import { BoxPlot } from '@visx/stats'
+import { Group } from '@visx/group'
+import { scaleBand, scaleLinear } from '@visx/scale'
+import ConfigContext from '../ConfigContext'
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import { colorPalettesChart } from '@cdc/core/data/colorPalettes'
+
+const CoveBoxPlot = ({ xScale, yScale }) => {
+  const { transformedData: data, config } = useContext(ConfigContext)
+
+  const boxWidth = xScale.bandwidth()
+  const constrainedWidth = Math.min(40, boxWidth)
+  const color_0 = colorPalettesChart[config?.palette][0] ? colorPalettesChart[config?.palette][0] : '#000'
+
+  // tooltips
+  const tooltip_id = `cdc-open-viz-tooltip-${config.runtime.uniqueId}`
+  const handleTooltip = d => {
+    return `
+      <strong>${d.columnCategory}</strong></br>
+      ${config.boxplot.labels.q1}: ${d.columnFirstQuartile}<br/>
+      ${config.boxplot.labels.q3}: ${d.columnThirdQuartile}<br/>
+      ${config.boxplot.labels.iqr}: ${d.columnIqr}<br/>
+      ${config.boxplot.labels.median}: ${d.columnMedian}
+    `
+  }
+  return (
+    <ErrorBoundary component='BoxPlot'>
+      <Group className='boxplot' key={`boxplot-group`}>
+        {config.boxplot.plots.map((d, i) => {
+          const offset = boxWidth - constrainedWidth
+          const radius = 4
+          return (
+            <>
+              {config.boxplot.plotNonOutlierValues && d.nonOutlierValues.map(value => <circle cx={xScale(d.columnCategory) + config.yAxis.size + boxWidth / 2} cy={yScale(value)} r={radius} fill={'#ccc'} style={{ opacity: 1, fillOpacity: 1, stroke: 'black' }} />)}
+              <BoxPlot
+                data-left={xScale(d.columnCategory) + config.yAxis.size + offset / 2 + 0.5}
+                key={`box-plot-${i}`}
+                min={d.columnMin}
+                max={d.columnMax}
+                left={xScale(d.columnCategory) + config.yAxis.size + offset / 2 + 0.5}
+                firstQuartile={d.columnFirstQuartile}
+                thirdQuartile={d.columnThirdQuartile}
+                median={d.columnMedian}
+                boxWidth={constrainedWidth}
+                fill={color_0}
+                fillOpacity={0.5}
+                stroke='black'
+                valueScale={yScale}
+                outliers={config.boxplot.plotOutlierValues ? d.columnOutliers : []}
+                outlierProps={{
+                  style: {
+                    fill: `${color_0}`,
+                    opacity: 1
+                  }
+                }}
+                medianProps={{
+                  style: {
+                    stroke: 'black'
+                  }
+                }}
+                boxProps={{
+                  style: {
+                    stroke: 'black',
+                    strokeWidth: config.boxplot.borders === 'true' ? 1 : 0
+                  },
+                  'data-tooltip-html': 'cool'
+                }}
+                maxProps={{
+                  style: {
+                    stroke: 'black'
+                  }
+                }}
+                container
+                containerProps={{
+                  'data-tooltip-html': handleTooltip(d),
+                  'data-tooltip-id': tooltip_id
+                }}
+              />
+            </>
+          )
+        })}
+      </Group>
+    </ErrorBoundary>
+  )
+}
+
+export default CoveBoxPlot

package/src/components/{DataTable.tsx → DataTable.jsx}

@@ -1,26 +1,27 @@
-import React, { useContext, useEffect, useState, useMemo, memo, Fragment } from 'react'
+import React, { useContext, useEffect, useState, useMemo } from 'react'
 import { useTable, useSortBy, useResizeColumns, useBlockLayout } from 'react-table'
 import Papa from 'papaparse'
 import { Base64 } from 'js-base64'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import LegendCircle from '@cdc/core/components/LegendCircle'
+import Icon from '@cdc/core/components/ui/Icon'
 
-import Context from '../context'
+import ConfigContext from '../ConfigContext'
 
-import CoveMediaControls from '@cdc/core/helpers/CoveMediaControls'
+import CoveMediaControls from '@cdc/core/components/CoveMediaControls'
 
 export default function DataTable() {
-  const { rawData, transformedData: data, config, colorScale, parseDate, formatDate, formatNumber: numberFormatter, colorPalettes, imageId } = useContext<any>(Context)
+  const { rawData, transformedData: data, config, colorScale, parseDate, formatDate, formatNumber: numberFormatter, colorPalettes, imageId } = useContext(ConfigContext)
 
   // Debugging.
   // if (config.visualizationType === 'Box Plot') return null
 
   const section = config.orientation === 'horizontal' ? 'yAxis' : 'xAxis'
-  const [tableExpanded, setTableExpanded] = useState<boolean>(config.table.expanded)
+  const [tableExpanded, setTableExpanded] = useState(config.table.expanded)
   const [accessibilityLabel, setAccessibilityLabel] = useState('')
 
-  const DownloadButton = ({ data }: any, type) => {
+  const DownloadButton = ({ data }, type) => {
     const fileName = `${config.title.substring(0, 50)}.csv`
 
     const csvData = Papa.unparse(data)
@@ -55,52 +56,127 @@ export default function DataTable() {
     const newTableColumns =
       config.visualizationType === 'Pie'
         ? []
-        : [
+        : config.visualizationType === 'Box Plot'
+          ? [
+            {
+              Header: 'Measures',
+              Cell: props => {
+                const resolveName = () => {
+                  let {
+                    boxplot: { labels }
+                  } = config
+                  const columnLookup = {
+                    columnMean: labels.mean,
+                    columnMax: labels.maximum,
+                    columnMin: labels.minimum,
+                    columnIqr: labels.iqr,
+                    columnCategory: 'Category',
+                    columnMedian: labels.median,
+                    columnFirstQuartile: labels.q1,
+                    columnThirdQuartile: labels.q3,
+                    columnOutliers: labels.outliers,
+                    values: labels.values,
+                    columnCount: labels.count,
+                    columnSd: 'Standard Deviation',
+                    nonOutlierValues: 'Non Outliers'
+                  }
+
+                  let resolvedName = columnLookup[props.row.original[0]]
+
+                  return resolvedName
+                }
+
+                return resolveName()
+              }
+            }
+          ]
+          : [
             {
               Header: '',
               Cell: ({ row }) => {
                 const seriesLabel = config.runtime.seriesLabels ? config.runtime.seriesLabels[row.original] : row.original
                 return (
-                  <Fragment>
+                  <>
                     {config.visualizationType !== 'Pie' && (
                       <LegendCircle
                         fill={
-                          // non dynamic leged
+                          // non-dynamic leged
                           !config.legend.dynamicLegend
                             ? colorScale(seriesLabel)
                             : // dynamic legend
                             config.legend.dynamicLegend
-                            ? colorPalettes[config.palette][row.index]
-                            : // fallback
+                              ? colorPalettes[config.palette][row.index]
+                              : // fallback
                               '#000'
                         }
                       />
                     )}
                     <span>{seriesLabel}</span>
-                  </Fragment>
+                  </>
                 )
               },
               id: 'series-label'
             }
           ]
+    if (config.visualizationType !== 'Box Plot') {
+      data.forEach((d, index) => {
+        const resolveTableHeader = () => {
+          if (config.runtime[section].type === 'date') return formatDate(parseDate(d[config.runtime.originalXAxis.dataKey]))
+          return d[config.runtime.originalXAxis.dataKey]
+        }
+        const newCol = {
+          Header: resolveTableHeader(),
+          Cell: ({ row }) => {
+            return <>{numberFormatter(d[row.original])}</>
+          },
+          id: `${d[config.runtime.originalXAxis.dataKey]}--${index}`,
+          canSort: true
+        }
 
-    data.forEach((d, index) => {
-      const newCol = {
-        Header: config.runtime[section].type === 'date' ? formatDate(parseDate(d[config.runtime.originalXAxis.dataKey])) : d[config.runtime.originalXAxis.dataKey],
-        Cell: ({ row }) => {
-          return <>{numberFormatter(d[row.original])}</>
-        },
-        id: `${d[config.runtime.originalXAxis.dataKey]}--${index}`,
-        canSort: true
-      }
+        newTableColumns.push(newCol)
+      })
+    }
 
-      newTableColumns.push(newCol)
-    })
+    if (config.visualizationType === 'Box Plot') {
+      config.boxplot.tableData.map((plot, index) => {
+        const newCol = {
+          Header: plot.columnCategory,
+          Cell: props => {
+            let resolveCell = () => {
+              if (Number(props.row.id) === 0) return true
+              if (Number(props.row.id) === 1) return plot.columnMax
+              if (Number(props.row.id) === 2) return plot.columnThirdQuartile
+              if (Number(props.row.id) === 3) return plot.columnMedian
+              if (Number(props.row.id) === 4) return plot.columnFirstQuartile
+              if (Number(props.row.id) === 5) return plot.columnMin
+              if (Number(props.row.id) === 6) return plot.columnCount
+              if (Number(props.row.id) === 7) return plot.columnSd
+              if (Number(props.row.id) === 8) return plot.columnMean
+              if (Number(props.row.id) === 9) return plot.columnOutliers.length > 0 ? plot.columnOutliers.toString() : '-'
+              if (Number(props.row.id) === 10) return plot.values.length > 0 ? plot.values.toString() : '-'
+              return <p>-</p>
+            }
+            return resolveCell()
+          },
+          id: `${index}`,
+          canSort: false
+        }
+
+        newTableColumns.push(newCol)
+      })
+    }
 
     return newTableColumns
   }, [config, colorScale])
 
-  const tableData = useMemo(() => (config.visualizationType === 'Pie' ? [config.yAxis.dataKey] : config.runtime.seriesKeys), [config.runtime.seriesKeys])
+  // prettier-ignore
+  const tableData = useMemo(() => (
+    config.visualizationType === 'Pie'
+      ? [config.yAxis.dataKey]
+      : config.visualizationType === 'Box Plot'
+        ? Object.entries(config.boxplot.tableData[0])
+        : config.runtime.seriesKeys),
+    [config.runtime.seriesKeys])
 
   // Change accessibility label depending on expanded status
   useEffect(() => {
@@ -148,6 +224,7 @@ export default function DataTable() {
             }
           }}
         >
+          <Icon display={tableExpanded ? 'minus' : 'plus'} base/>
           {config.table.label}
         </div>
         <div className='table-container' hidden={!tableExpanded} style={{ maxHeight: config.table.limitHeight && `${config.table.height}px`, overflowY: 'scroll' }}>
@@ -182,7 +259,7 @@ export default function DataTable() {
               {rows.map((row, index) => {
                 prepareRow(row)
                 return (
-                  <tr {...row.getRowProps()} key={`tbody__tr-${index}`}>
+                  <tr {...row.getRowProps()} key={`tbody__tr-${index}`} className={`row-${String(config.visualizationType).replace(' ', '-')}--${index}`}>
                     {row.cells.map((cell, index) => {
                       return (
                         <td tabIndex='0' {...cell.getCellProps()} key={`tbody__tr__td-${index}`} role='gridcell'>