@cdc/chart 4.23.2 → 4.23.4

package/src/components/SparkLine.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from 'react'
+import React, { useContext } from 'react'
 
 import * as allCurves from '@visx/curve'
 import { Group } from '@visx/group'
@@ -15,7 +15,7 @@ import useReduceData from '../hooks/useReduceData'
 import ConfigContext from '../ConfigContext'
 
 export default function SparkLine({ width: parentWidth, height: parentHeight }) {
-  const { transformedData: data, dimensions, config, parseDate, formatDate, currentViewport, seriesHighlight, formatNumber, colorScale, isNumber, handleChartAriaLabels } = useContext(ConfigContext)
+  const { transformedData: data, config, parseDate, formatDate, seriesHighlight, formatNumber, colorScale, handleChartAriaLabels } = useContext(ConfigContext)
   let width = parentWidth
   const { minValue, maxValue } = useReduceData(config, data, ConfigContext)
 
@@ -35,44 +35,7 @@ export default function SparkLine({ width: parentWidth, height: parentHeight })
   const isMaxValid = Number(enteredMaxValue) >= Number(maxValue)
   const isMinValid = Number(enteredMinValue) <= Number(minValue)
 
-
-  // REMOVE bad data points from the data set
-  // Examples: NA, N/A, "1,234", "anystring"
-  // - if you dont call this on data into LineGroup below, for example
-  // then entire data series are removed because of the defined statement
-  // i.e. if a series has any bad data points the entire series wont plot
-   const cleanData = (data, testing = false) => {
-    let cleanedup = []
-    if (testing) console.log('## Data to clean=', data)
-    data.forEach(function (d, i) {
-      let cleanedSeries = {}
-      Object.keys(d).forEach(function (key) {
-        if (key === 'Date') {
-          // pass thru the dates
-          cleanedSeries[key] = d[key]
-        } else {
-          // remove comma and dollar signs
-          let tmp = d[key] != null && d[key] != '' ? d[key].replace(/[,\$]/g, '') : ''
-          if (testing) console.log("tmp no comma or $", tmp)
-          if ((tmp !== '' && tmp !== null && !isNaN(tmp)) || (tmp !== '' && tmp !== null && /\d+\.?\d*/.test(tmp))) {
-            cleanedSeries[key] = tmp
-          } else {
-            // return nothing to skip bad data point
-            cleanedSeries[key] = '' // returning blank fixes broken chart draw
-          }
-        }
-      })
-      cleanedup.push(cleanedSeries)
-    })
-    if (testing) console.log('## cleanedData =', cleanedup)
-    return cleanedup
-   }
-
-  // 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);
-
-  if (cleanedData) {
+  if (data) {
     let min = enteredMinValue && isMinValid ? enteredMinValue : minValue
     let max = enteredMaxValue && isMaxValid ? enteredMaxValue : Number.MIN_VALUE
 
@@ -87,7 +50,7 @@ export default function SparkLine({ width: parentWidth, height: parentHeight })
       max += paddingValue
     }
 
-    let xAxisDataMapped = cleanedData.map(d => getXAxisData(d))
+    let xAxisDataMapped = data.map(d => getXAxisData(d))
 
     if (config.runtime.horizontal) {
       xScale = scaleLinear({
@@ -116,6 +79,7 @@ export default function SparkLine({ width: parentWidth, height: parentHeight })
         range: [margin.left, width - margin.right]
       })
 
+      // eslint-disable-next-line
       seriesScale = scalePoint({
         domain: config.runtime.barSeriesKeys || config.runtime.seriesKeys,
         range: [0, xMax]
@@ -128,88 +92,90 @@ export default function SparkLine({ width: parentWidth, height: parentHeight })
   return (
     <ErrorBoundary component='SparkLine'>
       <svg role='img' aria-label={handleChartAriaLabels(config)} width={width} height={height} className={'sparkline'} tabIndex={0}>
-        {(config.runtime.lineSeriesKeys || config.runtime.seriesKeys).map((seriesKey, index) => (
-          <>
-            <Group
-              className='sparkline-group'
-              height={parentHeight}
-              style={{ height: parentHeight }}
-              top={margin.top}
-              key={`series-${seriesKey}`}
-              opacity={config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(seriesKey) === -1 ? 0.5 : 1}
-              display={config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(seriesKey) !== -1 ? 'block' : 'none'}
-            >
-              {cleanedData.map((d, dataIndex) => {
-                let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${formatNumber(getYAxisData(d, seriesKey))}` : formatNumber(getYAxisData(d, seriesKey))
-                let xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${d[config.runtime.xAxis.dataKey]}` : d[config.runtime.xAxis.dataKey]
-
-                const tooltip = `<div>
+        {config.runtime.lineSeriesKeys?.length > 0
+          ? config.runtime.lineSeriesKeys
+          : config.runtime.seriesKeys.map((seriesKey, index) => (
+              <>
+                <Group
+                  className='sparkline-group'
+                  height={parentHeight}
+                  style={{ height: parentHeight }}
+                  top={margin.top}
+                  key={`series-${seriesKey}`}
+                  opacity={config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(seriesKey) === -1 ? 0.5 : 1}
+                  display={config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(seriesKey) !== -1 ? 'block' : 'none'}
+                >
+                  {data.map((d, dataIndex) => {
+                    let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${formatNumber(getYAxisData(d, seriesKey))}` : formatNumber(getYAxisData(d, seriesKey))
+                    let xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${d[config.runtime.xAxis.dataKey]}` : d[config.runtime.xAxis.dataKey]
+
+                    const tooltip = `<div>
 									${yAxisTooltip}<br />
 									${xAxisTooltip}<br />
 									${config.seriesLabel ? `${config.seriesLabel}: ${seriesKey}` : ''}
 									</div>`
 
-                let circleRadii = 4.5
-                return (
-                  <Group key={`series-${seriesKey}-point-${dataIndex}`}>
-                    <Text display={config.labels ? 'block' : 'none'} x={xScale(getXAxisData(d))} y={yScale(getYAxisData(d, seriesKey))} fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'} textAnchor='middle'>
-                      {formatNumber(d[seriesKey])}
-                    </Text>
-
-                    {dataIndex + 1 !== data.length && (config.lineDatapointStyle === 'always show' || config.lineDatapointStyle === 'hover') && (
-                      <circle
-                        key={`${seriesKey}-${dataIndex}`}
-                        r={circleRadii}
-                        cx={xScale(getXAxisData(d))}
-                        cy={yScale(getYAxisData(d, seriesKey))}
-                        fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
-                        style={{ fill: colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000' }}
-                        data-tooltip-html={tooltip}
-                        data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
-                      />
-                    )}
-                  </Group>
-                )
-              })}
-              <LinePath
-                curve={allCurves.curveLinear}
-                data={cleanedData}
-                x={d => xScale(getXAxisData(d))}
-                y={d => yScale(getYAxisData(d, seriesKey))}
-                stroke={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
-                strokeWidth={2}
-                strokeOpacity={1}
-                shapeRendering='geometricPrecision'
-                markerEnd={`url(#${'arrow'}--${index})`}
-              />
-              <MarkerArrow
-                id={`arrow--${index}`}
-                refX={2}
-                size={6}
-                markerEnd={`url(#${'arrow'}--${index})`}
-                strokeOpacity={1}
-                fillOpacity={1}
-                // stroke={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
-                fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
-              />
-            </Group>
-            <AxisBottom
-              top={yMax + margin.top}
-              hideAxisLine
-              hideTicks
-              scale={xScale}
-              tickValues={handleSparkLineTicks}
-              tickFormat={formatDate}
-              stroke={'black'}
-              tickStroke={'black'}
-              tickLabelProps={() => ({
-                fill: 'black',
-                fontSize: 11,
-                textAnchor: 'middle'
-              })}
-            />
-          </>
-        ))}
+                    let circleRadii = 4.5
+                    return (
+                      <Group key={`series-${seriesKey}-point-${dataIndex}`}>
+                        <Text display={config.labels ? 'block' : 'none'} x={xScale(getXAxisData(d))} y={yScale(getYAxisData(d, seriesKey))} fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'} textAnchor='middle'>
+                          {formatNumber(d[seriesKey])}
+                        </Text>
+
+                        {dataIndex + 1 !== data.length && (config.lineDatapointStyle === 'always show' || config.lineDatapointStyle === 'hover') && (
+                          <circle
+                            key={`${seriesKey}-${dataIndex}`}
+                            r={circleRadii}
+                            cx={xScale(getXAxisData(d))}
+                            cy={yScale(getYAxisData(d, seriesKey))}
+                            fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
+                            style={{ fill: colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000' }}
+                            data-tooltip-html={tooltip}
+                            data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+                          />
+                        )}
+                      </Group>
+                    )
+                  })}
+                  <LinePath
+                    curve={allCurves.curveLinear}
+                    data={data}
+                    x={d => xScale(getXAxisData(d))}
+                    y={d => yScale(getYAxisData(d, seriesKey))}
+                    stroke={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
+                    strokeWidth={2}
+                    strokeOpacity={1}
+                    shapeRendering='geometricPrecision'
+                    markerEnd={`url(#${'arrow'}--${index})`}
+                  />
+                  <MarkerArrow
+                    id={`arrow--${index}`}
+                    refX={2}
+                    size={6}
+                    markerEnd={`url(#${'arrow'}--${index})`}
+                    strokeOpacity={1}
+                    fillOpacity={1}
+                    // stroke={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
+                    fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
+                  />
+                </Group>
+                <AxisBottom
+                  top={yMax + margin.top}
+                  hideAxisLine
+                  hideTicks
+                  scale={xScale}
+                  tickValues={handleSparkLineTicks}
+                  tickFormat={tick => (config.xAxis.type === 'date' ? formatDate(tick) : null)}
+                  stroke={'black'}
+                  tickStroke={'black'}
+                  tickLabelProps={() => ({
+                    fill: 'black',
+                    fontSize: 11,
+                    textAnchor: 'middle'
+                  })}
+                />
+              </>
+            ))}
       </svg>
     </ErrorBoundary>
   )

package/src/components/useIntersectionObserver.jsx

@@ -22,7 +22,7 @@ export default function useIntersectionObserver(elementRef, { threshold = 0, roo
       observer.observe(node)
 
       return () => observer.disconnect()
-    }, 500);
+    }, 500)
   }, [elementRef, threshold, root, rootMargin, frozen])
 
   return entry

package/src/data/initial-state.js

@@ -1,6 +1,7 @@
 export default {
   type: 'chart',
   title: '',
+  showTitle: true,
   theme: 'theme-blue',
   animate: false,
   fontSize: 'medium',
@@ -24,6 +25,7 @@ export default {
     hideTicks: false,
     size: 50,
     gridLines: false,
+    enablePadding: false,
     min: '',
     max: '',
     labelColor: '#333',
@@ -63,9 +65,11 @@ export default {
       median: 'Median',
       sd: 'Standard Deviation',
       iqr: 'Interquartile Range',
-      count: 'Count',
+      total: 'Total',
       outliers: 'Outliers',
-      values: 'Values'
+      values: 'Values',
+      lowerBounds: 'Lower Bounds',
+      upperBounds: 'Upper Bounds'
     }
   },
   topAxis: {
@@ -81,6 +85,8 @@ export default {
   },
   xAxis: {
     type: 'categorical',
+    showTargetLabel: true,
+    targetLabel: 'Target',
     hideAxis: false,
     hideLabel: false,
     hideTicks: false,
@@ -93,7 +99,8 @@ export default {
     tickColor: '#333',
     numTicks: '',
     labelOffset: 65,
-    axisPadding: 0
+    axisPadding: 0,
+    target: 0
   },
   table: {
     label: 'Data Table',
@@ -101,12 +108,12 @@ export default {
     limitHeight: false,
     height: '',
     caption: '',
-    showDownloadUrl: false
+    showDownloadUrl: false,
+    showDataTableLink: true
   },
   orientation: 'vertical',
   legend: {
     behavior: 'isolate',
-    position: 'right',
     singleRow: false,
     colorCode: '',
     reverseLabelOrder: false,
@@ -123,12 +130,25 @@ export default {
   },
   palette: 'qualitative-bold',
   isPaletteReversed: false,
+  twoColor: {
+    palette: 'monochrome-1',
+    isPaletteReversed: false
+  },
   labels: false,
-  dataFormat: { commas: false, prefix: '', suffix: '', abbreviated: false },
+  dataFormat: {
+    commas: false,
+    prefix: '',
+    suffix: '',
+    abbreviated: false,
+    bottomSuffix: '',
+    bottomPrefix: '',
+    bottomAbbreviated: false
+  },
   confidenceKeys: {},
   visual: {
     border: true,
     accent: true,
     background: true
-  }
+  },
+  filterBehavior: 'Filter Change'
 }

package/src/hooks/useColorPalette.js

@@ -1,58 +1,68 @@
-import { useEffect, useReducer } from 'react'
-
-// constants
-const SEQUENTIAL = 'SEQUENTIAL'
-const SEQUENTIAL_REVERSE = 'SEQUENTIAL_REVERSE'
-export const GET_PALETTE = 'GET_PALETTE'
-
-// create initial state
-const initialState = {
-  filteredPallets: [],
-  isPaletteReversed: false,
-  filteredQualitative: [],
-  paletteName: undefined
-}
+import { colorPalettesChart, twoColorPalette } from '@cdc/core/data/colorPalettes'
+import { useEffect } from 'react'
 
-function reducer(state, action) {
-  const palletNamesArr = Object.keys(action.payload) // action.payload === colorPalettes object
-  let paletteName = ''
-  switch (action.type) {
-    case GET_PALETTE:
-      return { ...state, paletteName: action.paletteName }
-    case SEQUENTIAL:
-      paletteName = state.paletteName && state.paletteName.endsWith('reverse') ? String(state.paletteName).substring(0, state.paletteName.length - 7) : String(state.paletteName)
-      const qualitative = palletNamesArr.filter((name) => String(name).startsWith('qualitative') && !String(name).endsWith('reverse'))
-      const sequential = palletNamesArr.filter((name) => String(name).startsWith('sequential') && !String(name).endsWith('reverse'))
-      return { ...state, filteredPallets: sequential, filteredQualitative: qualitative, paletteName: paletteName, isPaletteReversed: false }
-
-    case SEQUENTIAL_REVERSE:
-      paletteName = palletNamesArr.find((name) => name === String(state.paletteName).concat('reverse') || name === String(state.paletteName).concat('-reverse'))
-      const qualitativeReverse = palletNamesArr.filter((name) => String(name).startsWith('qualitative') && String(name).endsWith('reverse'))
-      const sequentialReverse = palletNamesArr.filter((name) => String(name).startsWith('sequential') && String(name).endsWith('reverse'))
-      return { ...state, filteredQualitative: qualitativeReverse, filteredPallets: sequentialReverse, paletteName: paletteName, isPaletteReversed: true }
-    default:
-      return state
-  }
-}
+export const useColorPalette = (config, updateConfig) => {
+  let twoColorPalettes = []
+  let sequential = []
+  let nonSequential = []
 
-function init(initialState) {
-  return initialState
-}
+  // Get two color palettes if visualization type is Paired Bar
+  if (config.visualizationType === 'Paired Bar' || config.visualizationType === 'Deviation Bar') {
+    const isReversed = config.twoColor.isPaletteReversed
+    twoColorPalettes = Object.keys(twoColorPalette).filter(name => (isReversed ? name.endsWith('reverse') : !name.endsWith('reverse')))
+  } else {
+    // Get sequential and non-sequential palettes for other visualization types
+    const seqPalettes = []
+    const nonSeqPalettes = []
+
+    for (const paletteName in colorPalettesChart) {
+      const isSequential = paletteName.startsWith('sequential')
+      const isQualitative = paletteName.startsWith('qualitative')
+      const isReversed = paletteName.endsWith('reverse')
 
-export function useColorPalette(colorPalettes, configState) {
-  const [state, dispatch] = useReducer(reducer, initialState, init)
-  const { paletteName, isPaletteReversed, filteredPallets, filteredQualitative } = state
+      if (isSequential && ((!config.isPaletteReversed && !isReversed) || (config.isPaletteReversed && isReversed))) {
+        seqPalettes.push(paletteName)
+      }
+
+      if (isQualitative && ((!config.isPaletteReversed && !isReversed) || (config.isPaletteReversed && isReversed))) {
+        nonSeqPalettes.push(paletteName)
+      }
+    }
+
+    sequential = seqPalettes
+    nonSequential = nonSeqPalettes
+  }
 
+  // Update pairedBar.palette based on isPaletteReversed
   useEffect(() => {
-    dispatch({ type: SEQUENTIAL, payload: colorPalettes })
-  }, [])
+    let palette = ''
 
+    if (config.twoColor.isPaletteReversed && !config.twoColor.palette.endsWith('reverse')) {
+      palette = config.twoColor.palette + 'reverse'
+    }
+
+    if (!config.twoColor.isPaletteReversed && config.twoColor.palette.endsWith('reverse')) {
+      palette = config.twoColor.palette.slice(0, -7)
+    }
+
+    updateConfig({ ...config, twoColor: { ...config.twoColor, palette: palette } })
+  }, [config.twoColor.isPaletteReversed])
+
+  // Update palette based on isPaletteReversed
   useEffect(() => {
-    if (configState.isPaletteReversed) {
-      dispatch({ type: 'SEQUENTIAL_REVERSE', payload: colorPalettes })
-      return () => dispatch({ type: 'SEQUENTIAL', payload: colorPalettes })
+    let palette = ''
+
+    if (config.isPaletteReversed && !config.palette.endsWith('reverse')) {
+      palette = config.palette + 'reverse'
+    }
+
+    if (!config.isPaletteReversed && config.palette.endsWith('reverse')) {
+      palette = config.palette.slice(0, -7)
     }
-  }, [configState.isPaletteReversed, dispatch, colorPalettes])
 
-  return { paletteName, isPaletteReversed, filteredPallets, filteredQualitative, dispatch }
+    updateConfig({ ...config, palette: palette })
+  }, [config.isPaletteReversed])
+
+  // Return all palettes
+  return { twoColorPalettes, sequential, nonSequential }
 }

package/src/hooks/useReduceData.js

@@ -9,7 +9,7 @@ function useReduceData(config, data) {
     // remove comma and $ signs
     let tmp
     if (typeof value === 'string') {
-      tmp = value !== null && value !== '' ? value.replace(/[,\$]/g, '') : ''
+      tmp = value !== null && value !== '' ? value.replace(/[,$]/g, '') : ''
     } else {
       tmp = value !== null && value !== '' ? value : ''
     }
@@ -18,7 +18,6 @@ function useReduceData(config, data) {
   const getMaxValueFromData = () => {
     let max // will hold max number from data.
     if ((config.visualizationType === 'Bar' || (config.visualizationType === 'Combo' && isBar)) && config.visualizationSubType === 'stacked') {
-
       const yTotals = data.reduce((allTotals, xValue) => {
         const totalYValues = config.runtime.seriesKeys.reduce((yTotal, k) => {
           yTotal += Number(xValue[k])
@@ -33,7 +32,7 @@ function useReduceData(config, data) {
       }, [])
 
       max = Math.max(...yTotals)
-    } else if (config.visualizationType === 'Bar' && config.series && config.series.dataKey) {
+    } else if ((config.visualizationType === 'Bar' || config.visualizationType === 'Deviation Bar') && config.series && config.series.dataKey) {
       max = Math.max(...data.map(d => (isNumber(d[config.series.dataKey]) ? Number(cleanChars(d[config.series.dataKey])) : 0)))
       //max = Math.max(...data.map(d => Number(d[config.series.dataKey])))
     } else if (config.visualizationType === 'Combo' && config.visualizationSubType === 'stacked' && !isBar) {
@@ -46,7 +45,7 @@ function useReduceData(config, data) {
             yTotal += Number(d[k])
             return yTotal
           }, 0)
-          total.push(totalYValues)
+          return total.push(totalYValues)
         })
         // get lineSeries largest values
         const lineMax = Math.max(...data.map(d => Math.max(...config.runtime.lineSeriesKeys.map(key => Number(cleanChars(d[key]))))))

package/src/index.jsx

@@ -6,11 +6,12 @@ import CdcChart from './CdcChart'
 import 'react-tooltip/dist/react-tooltip.css'
 
 let isEditor = window.location.href.includes('editor=true')
+let isDebug = window.location.href.includes('debug=true')
 
 let domContainer = document.getElementsByClassName('react-container')[0]
 
 ReactDOM.createRoot(domContainer).render(
   <React.StrictMode>
-    <CdcChart configUrl={domContainer.attributes['data-config'].value} isEditor={isEditor} />
-  </React.StrictMode>,
+    <CdcChart configUrl={domContainer.attributes['data-config'].value} isEditor={isEditor} isDebug={isDebug} />
+  </React.StrictMode>
 )

package/src/scss/editor-panel.scss

@@ -75,11 +75,16 @@
       align-items: center;
       justify-content: space-between;
       font-size: 0.9em;
+      position: relative;
 
       &:hover {
         background-color: $lightestGray;
       }
 
+      div {
+        width: 100%;
+      }
+
       .series-list__name {
         position: relative;
         user-select: none;
@@ -132,7 +137,13 @@
       }
 
       .series-list__dropdown {
+        width: 100%;
+        display: block;
         font-size: 0.8em;
+        margin-bottom: 10px;
+        select {
+          width: 100%;
+        }
       }
 
       .series-list__remove {
@@ -140,6 +151,9 @@
         font-size: 1.125rem;
         color: #f00;
         cursor: pointer;
+        position: absolute;
+        top: 5px;
+        right: 5px;
       }
 
       + li {
@@ -150,6 +164,7 @@
 
   .series-list__name-text {
     max-width: 150px;
+    margin-bottom: 10px;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -419,6 +434,11 @@
         width: 33.3%;
         height: 100%;
       }
+
+      span.two-color {
+        width: 50%;
+        height: 100%;
+      }
     }
   }
 

package/src/scss/main.scss

@@ -231,9 +231,13 @@
     }
   }
 
+  .visx-tooltip {
+    z-index: 100000;
+  }
+
   .tooltip {
-    border: rgba(0,0,0,.3) 1px solid;
-    box-shadow: rgba(0,0,0,.1) 3px 3px 7px;
+    border: rgba(0, 0, 0, 0.3) 1px solid;
+    box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 7px;
     opacity: 1;
     line-height: 1.4em;
     font-size: 1em;
@@ -242,8 +246,8 @@
     z-index: 1;
 
     .react-tooltip-arrow {
-      border-bottom: rgba(0,0,0,.3) 1px solid;
-      border-right: rgba(0,0,0,.3) 1px solid;
+      border-bottom: rgba(0, 0, 0, 0.3) 1px solid;
+      border-right: rgba(0, 0, 0, 0.3) 1px solid;
       backface-visibility: hidden;
     }
   }
@@ -337,8 +341,6 @@
     }
 
     &__wrapper {
-      margin-bottom: 40px;
-
       hr {
         margin-bottom: 20px;
       }

package/src/test/CdcChart.test.jsx

@@ -0,0 +1,6 @@
+// Placeholder test until we add them in.
+describe('Chart', () => {
+  it('has a test.', async () => {
+    return true
+  })
+})

package/examples/box-plot.csv

@@ -1,5 +0,0 @@
-x,min,firstQuartile,median,thirdQuartile,max,outliers
-Group 1,-3.529439249291613,2.498913996933074,6,6.517816161082865,12.546169407307552,-4.222649440089676,-3.7995254226812145,12.669680018702707,,,,,,,,,,,,
-Group 2,-2.961278855962981,3.1553763355078277,5.31642875968012,7.233146463155033,13.349801654625843,-4.5962772985737645,14.42798091207488,14.832072412460995,,,,,,,,,,,,
-Group 3,-0.784362943544294,5.600233888319485,7.606034555385235,9.85663177622867,16.24122860809245,-2.0568265981730285,-2.036299998010181,-1.634595257757523,-0.9751707921193091,-0.9256799494292718,-0.813852054679872,16.255225428689318,19.221712546396496,,,,,,,
-Group 4,-3.4976011611041598,2.362493132101971,4.364242960871863,6.269222660906058,12.129316954112188,-5.912277243480174,-4.535668956980487,-4.255719319016919,-4.175200716132927,-4.1021204775116455,-3.7913796362224352,-3.6909919981778567,-3.6261129831962697,12.169135739844744,12.1724073804239,12.191268834215071,12.236896118210165,12.34513716605812,12.826785108558722,13.048968511771164