@cdc/chart 4.23.3 → 4.23.4

package/src/components/Legend.jsx

@@ -128,7 +128,7 @@ const Legend = () => {
     return defaultLabels
   }
 
-  const isBottomOrSmallViewport = config.legend.position === 'bottom' || currentViewport === 'sm' || currentViewport === 'xs'
+  const isBottomOrSmallViewport = config.legend.position === 'bottom' || currentViewport === 'sm' || currentViewport === 'xs' || currentViewport === 'xxs'
   const isHorizontal = config.orientation === 'horizontal'
   const marginTop = isBottomOrSmallViewport && isHorizontal ? `${config.runtime.xAxis.size}px` : '0px'
   const marginBottom = isBottomOrSmallViewport ? '15px' : '0px'

package/src/components/LineChart.jsx

@@ -6,16 +6,13 @@ import { LinePath } from '@visx/shape'
 import { Text } from '@visx/text'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-
 import ConfigContext from '../ConfigContext'
-
 import useRightAxis from '../hooks/useRightAxis'
+import isNumber from '@cdc/core/helpers/isNumber'
 
 export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData, xMax, yMax, seriesStyle = 'Line' }) {
-  const { colorPalettes, transformedData: data, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, isNumber, cleanData, updateConfig, handleLineType } = 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 { colorPalettes, transformedData: data, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, isNumber, updateConfig, handleLineType } = useContext(ConfigContext)
+
   const { yScaleRight } = useRightAxis({ config, yMax, data, updateConfig })
 
   const handleAxisFormating = (axis = 'left', label, value) => {
@@ -45,14 +42,13 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
               opacity={config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(seriesKey) === -1 ? 0.5 : 1}
               display={config.legend.behavior === 'highlight' || (seriesHighlight.length === 0 && !config.legend.dynamicLegend) || seriesHighlight.indexOf(seriesKey) !== -1 ? 'block' : 'none'}
             >
-              {cleanedData.map((d, dataIndex) => {
+              {data.map((d, dataIndex) => {
                 // Find the series object from the config.series array that has a dataKey matching the seriesKey variable.
                 const series = config.series.find(({ dataKey }) => dataKey === seriesKey)
                 const { axis } = series
 
                 const xAxisValue = config.runtime.xAxis.type === 'date' ? formatDate(parseDate(d[config.runtime.xAxis.dataKey])) : d[config.runtime.xAxis.dataKey]
                 const yAxisValue = getYAxisData(d, seriesKey)
-
                 const hasMultipleSeries = Object.keys(config.runtime.seriesLabels).length > 1
                 const labeltype = axis === 'Right' ? 'rightLabel' : 'label'
                 let label = config.runtime.yAxis[labeltype]
@@ -72,7 +68,8 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
                 return (
                   d[seriesKey] !== undefined &&
                   d[seriesKey] !== '' &&
-                  d[seriesKey] !== null && (
+                  d[seriesKey] !== null &&
+                  isNumber(d[seriesKey]) && (
                     <Group key={`series-${seriesKey}-point-${dataIndex}`}>
                       {/* Render legend */}
                       <Text
@@ -99,10 +96,9 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
                   )
                 )
               })}
-
               <LinePath
-                curve={allCurves.curveLinear}
-                data={cleanedData}
+                curve={allCurves[seriesData[0].lineType]}
+                data={data}
                 x={d => xScale(getXAxisData(d))}
                 y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(getYAxisData(d, seriesKey)))}
                 stroke={
@@ -116,7 +112,6 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
                 }
                 strokeWidth={2}
                 strokeOpacity={1}
-                shapeRendering='geometricPrecision'
                 strokeDasharray={lineType ? handleLineType(lineType) : 0}
                 defined={(item, i) => {
                   return item[config.runtime.seriesLabels[seriesKey]] !== '' && item[config.runtime.seriesLabels[seriesKey]] !== null && item[config.runtime.seriesLabels[seriesKey]] !== undefined
@@ -125,8 +120,8 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
               {config.animate && (
                 <LinePath
                   className='animation'
-                  curve={allCurves.curveLinear}
-                  data={cleanedData}
+                  curve={seriesData.lineType}
+                  data={data}
                   x={d => xScale(getXAxisData(d))}
                   y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(getYAxisData(d, seriesKey)))}
                   stroke='#fff'
@@ -139,7 +134,6 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
                   }}
                 />
               )}
-
               {/* Render series labels at end if each line if selected in the editor */}
               {config.showLineSeriesLabels &&
                 (config.runtime.lineSeriesKeys || config.runtime.seriesKeys).map(seriesKey => {

package/src/components/LinearChart.jsx

@@ -25,7 +25,7 @@ import { DeviationBar } from './DeviationBar'
 
 // TODO: Move scaling functions into hooks to manage complexity
 export default function LinearChart() {
-  const { transformedData: data, dimensions, config, parseDate, formatDate, currentViewport, formatNumber, handleChartAriaLabels, updateConfig, stringFormattingOptions } = useContext(ConfigContext)
+  const { transformedData: data, dimensions, config, parseDate, formatDate, currentViewport, formatNumber, handleChartAriaLabels, updateConfig } = useContext(ConfigContext)
 
   let [width] = dimensions
   const { minValue, maxValue, existPositiveValue, isAllLine } = useReduceData(config, data)
@@ -83,7 +83,7 @@ export default function LinearChart() {
     min = enteredMinValue && isMinValid ? enteredMinValue : minValue
     max = enteredMaxValue && isMaxValid ? enteredMaxValue : Number.MIN_VALUE
 
-    // DEV-3263 - If Confidence Intervals in data, then need to account for increased height in max for YScale
+    // If Confidence Intervals in data, then need to account for increased height in max for YScale
     if (config.visualizationType === 'Bar' || config.visualizationType === 'Combo' || config.visualizationType === 'Deviation Bar') {
       let ciYMax = 0
       if (config.hasOwnProperty('confidenceKeys')) {
@@ -95,19 +95,7 @@ export default function LinearChart() {
       }
     }
 
-    // DEV-3263 - If Confidence Intervals in data, then need to account for increased height in max for YScale
-    if (config.visualizationType === 'Bar' || config.visualizationType === 'Combo') {
-      let ciYMax = 0
-      if (config.hasOwnProperty('confidenceKeys')) {
-        let upperCIValues = data.map(function (d) {
-          return d[config.confidenceKeys.upper]
-        })
-        ciYMax = Math.max.apply(Math, upperCIValues)
-        if (ciYMax > max) max = ciYMax // bump up the max
-      }
-    }
-
-    if ((config.visualizationType === 'Bar' || config.visualizationType === 'Deviation Bar' || (config.visualizationType === 'Combo' && !isAllLine)) && min > 0) {
+    if ((config.visualizationType === 'Bar' || (config.visualizationType === 'Combo' && !isAllLine)) && min > 0) {
       min = 0
     }
     if (config.visualizationType === 'Combo' && isAllLine) {
@@ -120,6 +108,11 @@ export default function LinearChart() {
       }
     }
 
+    if (config.visualizationType === 'Deviation Bar' && min > 0) {
+      const isMinValid = Number(enteredMinValue) < Math.min(minValue, Number(config.xAxis.target))
+      min = enteredMinValue && isMinValid ? enteredMinValue : 0
+    }
+
     if (config.visualizationType === 'Line') {
       const isMinValid = enteredMinValue < minValue
       min = enteredMinValue && isMinValid ? enteredMinValue : minValue
@@ -161,6 +154,7 @@ export default function LinearChart() {
       if (min < 0) {
         // sets with negative data need more padding on the max
         max *= 1.2
+        min *= 1.2
       } else {
         max *= 1.1
       }
@@ -168,7 +162,7 @@ export default function LinearChart() {
 
     if (config.runtime.horizontal) {
       xScale = scaleLinear({
-        domain: [min, max],
+        domain: [min * 1.03, max],
         range: [0, xMax]
       })
 
@@ -255,7 +249,8 @@ export default function LinearChart() {
       xScale = scaleLinear({
         domain: [min * leftOffset, Math.max(Number(config.xAxis.target), max)],
         range: [0, xMax],
-        round: true
+        round: true,
+        nice: true
       })
     }
     // Handle Box Plots
@@ -274,8 +269,8 @@ export default function LinearChart() {
       }
 
       // check fences for max/min
-      let lowestFence = Math.min(...config.boxplot.plots.map(item => item.columnMin))
-      let highestFence = Math.max(...config.boxplot.plots.map(item => item.columnMax))
+      let lowestFence = Math.min(...config.boxplot.plots.map(item => item.columnLowerBounds))
+      let highestFence = Math.max(...config.boxplot.plots.map(item => item.columnUpperBounds))
 
       if (lowestFence < min) min = lowestFence
       if (highestFence > max) max = highestFence
@@ -296,16 +291,18 @@ export default function LinearChart() {
     }
   }
 
+  const shouldAbbreviate = true
+
   const handleLeftTickFormatting = tick => {
     if (config.runtime.yAxis.type === 'date') return formatDate(parseDate(tick))
-    if (config.orientation === 'vertical') return formatNumber(tick, 'left')
+    if (config.orientation === 'vertical') return formatNumber(tick, 'left', shouldAbbreviate)
     return tick
   }
 
   const handleBottomTickFormatting = tick => {
     if (config.runtime.xAxis.type === 'date') return formatDate(tick)
-    if (config.orientation === 'horizontal') return formatNumber(tick, 'left')
-    if (config.xAxis.type === 'continuous') return formatNumber(tick, 'bottom')
+    if (config.orientation === 'horizontal') return formatNumber(tick, 'left', shouldAbbreviate)
+    if (config.xAxis.type === 'continuous') return formatNumber(tick, 'bottom', shouldAbbreviate)
     return tick
   }
 
@@ -347,11 +344,13 @@ export default function LinearChart() {
     return tickCount
   }
 
+  const svgRef = useRef()
+
   return isNaN(width) ? (
     <></>
   ) : (
     <ErrorBoundary component='LinearChart'>
-      <svg width={width} height={height} className={`linear ${config.animate ? 'animated' : ''} ${animatedChart && config.animate ? 'animate' : ''}`} role='img' aria-label={handleChartAriaLabels(config)} tabIndex={0}>
+      <svg width={width} height={height} className={`linear ${config.animate ? 'animated' : ''} ${animatedChart && config.animate ? 'animate' : ''}`} role='img' aria-label={handleChartAriaLabels(config)} tabIndex={0} ref={svgRef}>
         {/* Higlighted regions */}
         {config.regions
           ? config.regions.map(region => {
@@ -457,6 +456,7 @@ export default function LinearChart() {
                   })}
                   {!config.yAxis.hideAxis && <Line from={props.axisFromPoint} to={config.runtime.horizontal ? { x: 0, y: Number(heightHorizontal) } : props.axisToPoint} stroke='#000' />}
                   {yScale.domain()[0] < 0 && <Line from={{ x: props.axisFromPoint.x, y: yScale(0) }} to={{ x: xMax, y: yScale(0) }} stroke='#333' />}
+                  {config.visualizationType === 'Bar' && config.orientation === 'horizontal' && xScale.domain()[0] < 0 && <Line from={{ x: xScale(0), y: 0 }} to={{ x: xScale(0), y: yMax }} stroke='#333' strokeWidth={2} />}
                   <Text className='y-label' textAnchor='middle' verticalAnchor='start' transform={`translate(${-1 * config.runtime.yAxis.size}, ${axisCenter}) rotate(-90)`} fontWeight='bold' fill={config.yAxis.labelColor}>
                     {props.label}
                   </Text>
@@ -571,7 +571,7 @@ export default function LinearChart() {
                           {!config.runtime.yAxis.hideTicks && <Line from={tick.from} to={tick.to} stroke='#333' />}
                           {!config.runtime.yAxis.hideLabel && (
                             <Text x={tick.to.x} y={tick.to.y} angle={-angle} verticalAnchor='start' textAnchor={textAnchor}>
-                              {formatNumber(tick.formattedValue)}
+                              {formatNumber(tick.value, 'left')}
                             </Text>
                           )}
                         </Group>
@@ -604,7 +604,7 @@ export default function LinearChart() {
                             {!config.runtime.yAxis.hideTicks && <Line from={tick.from} to={tick.to} stroke='#333' />}
                             {!config.runtime.yAxis.hideLabel && (
                               <Text x={tick.to.x} y={tick.to.y} angle={-angle} verticalAnchor='start' textAnchor={textAnchor}>
-                                {tick.formattedValue}
+                                {formatNumber(tick.value, 'left')}
                               </Text>
                             )}
                           </Group>
@@ -625,11 +625,13 @@ export default function LinearChart() {
         )}
 
         {config.visualizationType === 'Deviation Bar' && <DeviationBar xScale={xScale} yScale={yScale} width={xMax} height={yMax} />}
-
-        {/* Paired Bar chart */}
         {config.visualizationType === 'Paired Bar' && <PairedBarChart originalWidth={width} width={xMax} height={yMax} />}
+        {config.visualizationType === 'Scatter Plot' && <CoveScatterPlot xScale={xScale} yScale={yScale} getXAxisData={getXAxisData} getYAxisData={getYAxisData} />}
+        {config.visualizationType === 'Box Plot' && <CoveBoxPlot xScale={xScale} yScale={yScale} />}
+        {(config.visualizationType === 'Area Chart' || config.visualizationType === 'Combo') && <CoveAreaChart xScale={xScale} yScale={yScale} yMax={yMax} xMax={xMax} chartRef={svgRef} />}
 
         {/* Bar chart */}
+        {/* TODO: Make this just bar or combo? */}
         {config.visualizationType !== 'Line' && config.visualizationType !== 'Paired Bar' && config.visualizationType !== 'Box Plot' && config.visualizationType !== 'Area Chart' && config.visualizationType !== 'Scatter Plot' && config.visualizationType !== 'Deviation Bar' && (
           <>
             <BarChart xScale={xScale} yScale={yScale} seriesScale={seriesScale} xMax={xMax} yMax={yMax} getXAxisData={getXAxisData} getYAxisData={getYAxisData} animatedChart={animatedChart} visible={animatedChart} />
@@ -637,18 +639,12 @@ export default function LinearChart() {
         )}
 
         {/* Line chart */}
+        {/* TODO: Make this just line or combo? */}
         {config.visualizationType !== 'Bar' && config.visualizationType !== 'Paired Bar' && config.visualizationType !== 'Box Plot' && config.visualizationType !== 'Area Chart' && config.visualizationType !== 'Scatter Plot' && config.visualizationType !== 'Deviation Bar' && (
           <>
             <LineChart xScale={xScale} yScale={yScale} getXAxisData={getXAxisData} getYAxisData={getYAxisData} xMax={xMax} yMax={yMax} seriesStyle={config.series} />
           </>
         )}
-
-        {/* Scatter Plot chart */}
-        {config.visualizationType === 'Scatter Plot' && <CoveScatterPlot xScale={xScale} yScale={yScale} getXAxisData={getXAxisData} getYAxisData={getYAxisData} />}
-
-        {/* Box Plot chart */}
-        {config.visualizationType === 'Box Plot' && <CoveBoxPlot xScale={xScale} yScale={yScale} />}
-        {config.visualizationType === 'Area Chart' && <CoveAreaChart xScale={xScale} yScale={yScale} yMax={yMax} xMax={xMax} />}
       </svg>
       <ReactTooltip id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`} variant='light' arrowColor='rgba(0,0,0,0)' className='tooltip' />
       <div className='animation-trigger' ref={triggerRef} />

package/src/components/PairedBarChart.jsx

@@ -61,7 +61,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
     return `<p>
 				${config.dataDescription.seriesKey}: ${groupOne.dataKey}<br/>
 				${config.xAxis.dataKey}: ${d[config.xAxis.dataKey]}<br/>
-				${label}${formatNumber(d[groupOne.dataKey])}
+				${label}${formatNumber(d[groupOne.dataKey], 'left')}
 			</p>`
   }
 
@@ -69,7 +69,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
     return `<p>
 				${config.dataDescription.seriesKey}: ${groupTwo.dataKey}<br/>
 				${config.xAxis.dataKey}: ${d[config.xAxis.dataKey]}<br/>
-				${label}${formatNumber(d[groupTwo.dataKey])}
+				${label}${formatNumber(d[groupTwo.dataKey], 'left')}
 			</p>`
   }
 
@@ -99,7 +99,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                 const totalheight = (Number(config.barSpace) + barHeight + borderWidth) * data.length
                 config.heights.horizontal = totalheight
                 // check if text fits inside of the  bar including suffix/prefix,comma,fontSize ..etc
-                const textWidth = getTextWidth(formatNumber(d[groupOne.dataKey]), `normal ${fontSize[config.fontSize]}px sans-serif`)
+                const textWidth = getTextWidth(formatNumber(d[groupOne.dataKey], 'left'), `normal ${fontSize[config.fontSize]}px sans-serif`)
                 const textFits = textWidth < barWidth - 5 // minus padding dx(5)
 
                 return (
@@ -123,7 +123,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                       />
                       {config.yAxis.displayNumbersOnBar && displayBar && (
                         <Text textAnchor={textFits ? 'start' : 'end'} dx={textFits ? 5 : -5} verticalAnchor='middle' x={halfWidth - barWidth} y={y + config.barHeight / 2} fill={textFits ? groupOne.labelColor : '#000'}>
-                          {formatNumber(d[groupOne.dataKey])}
+                          {formatNumber(d[groupOne.dataKey], 'left')}
                         </Text>
                       )}
                     </Group>
@@ -143,7 +143,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                 const totalheight = (Number(config.barSpace) + barHeight + borderWidth) * data.length
                 config.heights.horizontal = totalheight
                 // check if text fits inside of the  bar including suffix/prefix,comma,fontSize ..etc
-                const textWidth = getTextWidth(formatNumber(d[groupTwo.dataKey]), `normal ${fontSize[config.fontSize]}px sans-serif`)
+                const textWidth = getTextWidth(formatNumber(d[groupTwo.dataKey], 'left'), `normal ${fontSize[config.fontSize]}px sans-serif`)
                 const isTextFits = textWidth < barWidth - 5 // minus padding dx(5)
 
                 return (
@@ -174,7 +174,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                       />
                       {config.yAxis.displayNumbersOnBar && displayBar && (
                         <Text textAnchor={isTextFits ? 'end' : 'start'} dx={isTextFits ? -5 : 5} verticalAnchor='middle' x={halfWidth + barWidth} y={y + config.barHeight / 2} fill={isTextFits ? groupTwo.labelColor : '#000'}>
-                          {formatNumber(d[groupTwo.dataKey])}
+                          {formatNumber(d[groupTwo.dataKey], 'left')}
                         </Text>
                       )}
                     </Group>

package/src/components/PieChart.jsx

@@ -18,9 +18,7 @@ const enterUpdateTransition = ({ startAngle, endAngle }) => ({
 })
 
 export default function PieChart() {
-  const { transformedData: data, config, dimensions, seriesHighlight, colorScale, formatNumber, currentViewport, handleChartAriaLabels, cleanData } = useContext(ConfigContext)
-
-  const cleanedData = cleanData(data, config.xAxis.dataKey)
+  const { transformedData: data, config, dimensions, seriesHighlight, colorScale, formatNumber, currentViewport, handleChartAriaLabels } = useContext(ConfigContext)
 
   const [filteredData, setFilteredData] = useState(undefined)
   const [animatedPie, setAnimatePie] = useState(false)
@@ -140,7 +138,7 @@ export default function PieChart() {
     <ErrorBoundary component='PieChart'>
       <svg width={width} height={height} className={`animated-pie group ${config.animate === false || animatedPie ? 'animated' : ''}`} role='img' aria-label={handleChartAriaLabels(config)}>
         <Group top={centerY} left={centerX}>
-          <Pie data={filteredData || cleanedData} pieValue={d => d[config.runtime.yAxis.dataKey]} pieSortValues={() => -1} innerRadius={radius - donutThickness} outerRadius={radius}>
+          <Pie data={filteredData || data} pieValue={d => d[config.runtime.yAxis.dataKey]} pieSortValues={() => -1} innerRadius={radius - donutThickness} outerRadius={radius}>
             {pie => <AnimatedPie {...pie} getKey={d => d.data[config.runtime.xAxis.dataKey]} />}
           </Pie>
         </Group>

package/src/components/SparkLine.jsx

@@ -35,43 +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
 
@@ -86,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({
@@ -128,7 +92,7 @@ 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.length > 0
+        {config.runtime.lineSeriesKeys?.length > 0
           ? config.runtime.lineSeriesKeys
           : config.runtime.seriesKeys.map((seriesKey, index) => (
               <>
@@ -141,7 +105,7 @@ export default function SparkLine({ width: parentWidth, height: parentHeight })
                   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) => {
+                  {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]
 
@@ -175,7 +139,7 @@ export default function SparkLine({ width: parentWidth, height: parentHeight })
                   })}
                   <LinePath
                     curve={allCurves.curveLinear}
-                    data={cleanedData}
+                    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'}
@@ -201,7 +165,7 @@ export default function SparkLine({ width: parentWidth, height: parentHeight })
                   hideTicks
                   scale={xScale}
                   tickValues={handleSparkLineTicks}
-                  tickFormat={formatDate}
+                  tickFormat={tick => (config.xAxis.type === 'date' ? formatDate(tick) : null)}
                   stroke={'black'}
                   tickStroke={'black'}
                   tickLabelProps={() => ({

package/src/data/initial-state.js

@@ -67,7 +67,9 @@ export default {
       iqr: 'Interquartile Range',
       total: 'Total',
       outliers: 'Outliers',
-      values: 'Values'
+      values: 'Values',
+      lowerBounds: 'Lower Bounds',
+      upperBounds: 'Upper Bounds'
     }
   },
   topAxis: {
@@ -106,7 +108,8 @@ export default {
     limitHeight: false,
     height: '',
     caption: '',
-    showDownloadUrl: false
+    showDownloadUrl: false,
+    showDataTableLink: true
   },
   orientation: 'vertical',
   legend: {
@@ -146,5 +149,6 @@ export default {
     border: true,
     accent: true,
     background: true
-  }
+  },
+  filterBehavior: 'Filter Change'
 }

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} />
+    <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;

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/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