@cdc/chart 4.23.2 → 4.23.3

package/src/components/ScatterPlot.jsx

@@ -3,39 +3,42 @@ import ConfigContext from '../ConfigContext'
 import { Group } from '@visx/group'
 
 const CoveScatterPlot = ({ xScale, yScale, getXAxisData, getYAxisData }) => {
-  const { colorScale, transformedData: data, config } = useContext(ConfigContext)
+  const { colorScale, transformedData: data, config, formatNumber, seriesHighlight, colorPalettes } = useContext(ConfigContext)
 
-  // copied from line chart
-  // should probably be a constant somewhere.
+  // TODO: copied from line chart should probably be a constant somewhere.
   let circleRadii = 4.5
-
-  let pointStyles = {
-    filter: 'unset',
-    opacity: 1,
-    stroke: 'black'
-  }
+  const hasMultipleSeries = Object.keys(config.runtime.seriesLabels).length > 1
 
   const handleTooltip = (item, s) => `<div>
- ${config.xAxis.label}: ${item[config.xAxis.dataKey]} <br/>
- ${config.yAxis.label}: ${item[s]}
+    ${config.legend.showLegendValuesTooltip && config.runtime.seriesLabels && hasMultipleSeries ? `${config.runtime.seriesLabels[s] || ''}<br/>` : ''}
+    ${config.xAxis.label}: ${formatNumber(item[config.xAxis.dataKey], 'bottom')} <br/>
+    ${config.yAxis.label}: ${formatNumber(item[s], 'left')}
 </div>`
 
   return (
     <Group className='scatter-plot' left={config.yAxis.size}>
       {data.map((item, dataIndex) => {
         // prettier-ignore
-        return config.runtime.seriesKeys.map(s => {
+        return config.runtime.seriesKeys.map((s, index) => {
+          const transparentArea = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(s) === -1
+          const displayArea = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(s) !== -1
+          const seriesColor = config.palette ? colorPalettes[config.palette][index] : '#000'
+
+          let pointStyles = {
+            filter: 'unset',
+            opacity: 1,
+            stroke: displayArea ? 'black' : ''
+          }
 
           return (
             <circle
-              key={`${dataIndex}`}
+              key={`${dataIndex}-${index}`}
               r={circleRadii}
               cx={xScale(item[config.xAxis.dataKey])}
               cy={yScale(item[s])}
-              fillOpacity={1}
-              opacity={1}
+              fill={displayArea ? seriesColor : 'transparent'}
+              fillOpacity={transparentArea ? .25 : 1}
               style={pointStyles}
-              fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[s] : s) : '#000'}
               data-tooltip-html={handleTooltip(item, s)}
               data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
             />

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,13 +35,12 @@ 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) => {
+  const cleanData = (data, testing = false) => {
     let cleanedup = []
     if (testing) console.log('## Data to clean=', data)
     data.forEach(function (d, i) {
@@ -52,8 +51,8 @@ export default function SparkLine({ width: parentWidth, height: parentHeight })
           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)
+          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 {
@@ -66,11 +65,11 @@ export default function SparkLine({ width: parentWidth, height: parentHeight })
     })
     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);
+  const cleanedData = cleanData(data, config.xAxis.dataKey)
 
   if (cleanedData) {
     let min = enteredMinValue && isMinValid ? enteredMinValue : minValue
@@ -116,6 +115,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 +128,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'}
+                >
+                  {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>
 									${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={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'
+                  })}
+                />
+              </>
+            ))}
       </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,7 +65,7 @@ export default {
       median: 'Median',
       sd: 'Standard Deviation',
       iqr: 'Interquartile Range',
-      count: 'Count',
+      total: 'Total',
       outliers: 'Outliers',
       values: 'Values'
     }
@@ -81,6 +83,8 @@ export default {
   },
   xAxis: {
     type: 'categorical',
+    showTargetLabel: true,
+    targetLabel: 'Target',
     hideAxis: false,
     hideLabel: false,
     hideTicks: false,
@@ -93,7 +97,8 @@ export default {
     tickColor: '#333',
     numTicks: '',
     labelOffset: 65,
-    axisPadding: 0
+    axisPadding: 0,
+    target: 0
   },
   table: {
     label: 'Data Table',
@@ -106,7 +111,6 @@ export default {
   orientation: 'vertical',
   legend: {
     behavior: 'isolate',
-    position: 'right',
     singleRow: false,
     colorCode: '',
     reverseLabelOrder: false,
@@ -123,8 +127,20 @@ 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,

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

@@ -12,5 +12,5 @@ let domContainer = document.getElementsByClassName('react-container')[0]
 ReactDOM.createRoot(domContainer).render(
   <React.StrictMode>
     <CdcChart configUrl={domContainer.attributes['data-config'].value} isEditor={isEditor} />
-  </React.StrictMode>,
+  </React.StrictMode>
 )

package/src/scss/editor-panel.scss

@@ -419,6 +419,11 @@
         width: 33.3%;
         height: 100%;
       }
+
+      span.two-color {
+        width: 50%;
+        height: 100%;
+      }
     }
   }
 

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
+  })
+})