@cdc/chart 4.24.9 → 4.24.11

package/src/components/PairedBarChart.jsx

@@ -6,9 +6,10 @@ import { Text } from '@visx/text'
 
 import ConfigContext from '../ConfigContext'
 import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
+import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 
 const PairedBarChart = ({ width, height, originalWidth }) => {
-  const { config, colorScale, transformedData: data, formatNumber, seriesHighlight, getTextWidth } = useContext(ConfigContext)
+  const { config, colorScale, transformedData: data, formatNumber, seriesHighlight } = useContext(ConfigContext)
 
   if (!config || config?.series?.length < 2) return
 
@@ -79,14 +80,27 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
 				}
 				`}
         </style>
-        <svg id='cdc-visualization__paired-bar-chart' width={originalWidth} height={height} viewBox={`0 0 ${width + Number(config.runtime.yAxis.size)} ${height}`} role='img' tabIndex={0}>
+        <svg
+          id='cdc-visualization__paired-bar-chart'
+          width={originalWidth}
+          height={height}
+          viewBox={`0 0 ${width + Number(config.runtime.yAxis.size)} ${height}`}
+          role='img'
+          tabIndex={0}
+        >
           <title>{`Paired bar chart graphic with the title ${config.title ? config.title : 'No Title Found'}`}</title>
           <Group top={0} left={Number(config.xAxis.size)}>
             {data
               .filter(item => config.series[0].dataKey === groupOne.dataKey)
               .map((d, index) => {
-                let transparentBar = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(config.series[0].dataKey) === -1
-                let displayBar = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(config.series[0].dataKey) !== -1
+                let transparentBar =
+                  config.legend.behavior === 'highlight' &&
+                  seriesHighlight.length > 0 &&
+                  seriesHighlight.indexOf(config.series[0].dataKey) === -1
+                let displayBar =
+                  config.legend.behavior === 'highlight' ||
+                  seriesHighlight.length === 0 ||
+                  seriesHighlight.indexOf(config.series[0].dataKey) !== -1
                 let barWidth = xScale(d[config.series[0].dataKey])
                 let barHeight = Number(config.barHeight) ? Number(config.barHeight) : 25
                 // update bar Y to give dynamic Y when user applyes BarSpace
@@ -95,7 +109,10 @@ 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], 'left'), `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 (
@@ -119,7 +136,14 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                         tabIndex={-1}
                       />
                       {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'}>
+                        <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], 'left')}
                         </Text>
                       )}
@@ -131,8 +155,14 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
               .filter(item => config.series[1].dataKey === groupTwo.dataKey)
               .map((d, index) => {
                 let barWidth = xScale(d[config.series[1].dataKey])
-                let transparentBar = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(config.series[1].dataKey) === -1
-                let displayBar = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(config.series[1].dataKey) !== -1
+                let transparentBar =
+                  config.legend.behavior === 'highlight' &&
+                  seriesHighlight.length > 0 &&
+                  seriesHighlight.indexOf(config.series[1].dataKey) === -1
+                let displayBar =
+                  config.legend.behavior === 'highlight' ||
+                  seriesHighlight.length === 0 ||
+                  seriesHighlight.indexOf(config.series[1].dataKey) !== -1
                 let barHeight = config.barHeight ? Number(config.barHeight) : 25
                 // update bar Y to give dynamic Y when user applyes BarSpace
                 let y = 0
@@ -140,7 +170,10 @@ 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], 'left'), `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 (
@@ -171,7 +204,14 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                         tabIndex={-1}
                       />
                       {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'}>
+                        <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], 'left')}
                         </Text>
                       )}

package/src/components/PieChart/PieChart.tsx

@@ -38,9 +38,6 @@ const PieChart = props => {
     config,
     colorScale,
     currentViewport,
-    dimensions,
-    highlight,
-    highlightReset,
     seriesHighlight,
     isDraggingAnnotation
   } = useContext(ConfigContext)
@@ -232,8 +229,6 @@ const PieChart = props => {
     }
   }, [seriesHighlight]) // eslint-disable-line
 
-  const createLegendLabels = createFormatLabels(config, [], _data, _colorScale)
-
   const getSvgClasses = () => {
     let classes = ['animated-pie', 'group']
     if (config.animate === false || animatedPie) {
@@ -280,7 +275,7 @@ const PieChart = props => {
               <TooltipWithBounds
                 key={Math.random()}
                 className={'tooltip cdc-open-viz-module'}
-                left={tooltipLeft}
+                left={tooltipLeft + centerX - radius}
                 top={tooltipTop}
               >
                 <ul>

package/src/components/Regions/components/Regions.tsx

@@ -19,7 +19,18 @@ type RegionsProps = {
 }
 
 // TODO: should regions be removed on categorical axis?
-const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGroup = 1, yMax, handleTooltipMouseOff, handleTooltipMouseOver, handleTooltipClick, tooltipData, showTooltip, hideTooltip }) => {
+const Regions: React.FC<RegionsProps> = ({
+  xScale,
+  barWidth = 0,
+  totalBarsInGroup = 1,
+  yMax,
+  handleTooltipMouseOff,
+  handleTooltipMouseOver,
+  handleTooltipClick,
+  tooltipData,
+  showTooltip,
+  hideTooltip
+}) => {
   const { parseDate, config } = useContext<ChartContext>(ConfigContext)
 
   const { runtime, regions, visualizationType, orientation, xAxis } = config
@@ -44,7 +55,10 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
       const previousDays = Number(region.from) || 0
       const categoricalDomain = domain.map(d => formatDate(config.xAxis.dateParseFormat, new Date(d)))
       const d = region.toType === 'Last Date' ? new Date(domain[domain.length - 1]).getTime() : new Date(region.to) // on categorical charts force leading zero 03/15/2016 vs 3/15/2016 for valid date format
-      const to = config.xAxis.type === 'categorical' ? formatDate(config.xAxis.dateParseFormat, d) : formatDate(config.xAxis.dateParseFormat, d)
+      const to =
+        config.xAxis.type === 'categorical'
+          ? formatDate(config.xAxis.dateParseFormat, d)
+          : formatDate(config.xAxis.dateParseFormat, d)
       const toDate = new Date(to)
       from = new Date(toDate.setDate(toDate.getDate() - Number(previousDays)))
 
@@ -120,7 +134,12 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
     }
     if (region.toType === 'Last Date') {
       const lastDate = domain[domain.length - 1]
-      to = Number(xScale(lastDate) + ((visualizationType === 'Bar' || visualizationType === 'Combo') && config.xAxis.type === 'date' ? barWidth * totalBarsInGroup : 0))
+      to = Number(
+        xScale(lastDate) +
+          ((visualizationType === 'Bar' || visualizationType === 'Combo') && config.xAxis.type === 'date'
+            ? barWidth * totalBarsInGroup
+            : 0)
+      )
     }
 
     if (visualizationType === 'Line' || visualizationType === 'Area Chart') {
@@ -152,27 +171,22 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
       if (!from) return null
       if (!to) return null
 
-      const TopRegionBorderShape = () => {
-        return (
-          <path
-            stroke='#333'
-            d={`M${from} -5
-                L${from} 5
-                M${from} 0
-                L${to} 0
-                M${to} -5
-                L${to} 5`}
-          />
-        )
-      }
-
       const HighlightedArea = () => {
         return <rect x={from} y={0} width={width} height={yMax} fill={region.background} opacity={0.3} />
       }
 
       return (
-        <Group height={100} fill='red' className='regions regions-group--line zzz' key={region.label} onMouseMove={handleTooltipMouseOver} onMouseLeave={handleTooltipMouseOff} handleTooltipClick={handleTooltipClick} tooltipData={JSON.stringify(tooltipData)} showTooltip={showTooltip}>
-          <TopRegionBorderShape />
+        <Group
+          height={100}
+          fill='red'
+          className='regions regions-group--line zzz'
+          key={region.label}
+          onMouseMove={handleTooltipMouseOver}
+          onMouseLeave={handleTooltipMouseOff}
+          handleTooltipClick={handleTooltipClick}
+          tooltipData={JSON.stringify(tooltipData)}
+          showTooltip={showTooltip}
+        >
           <HighlightedArea />
           <Text x={from + width / 2} y={5} fill={region.color} verticalAnchor='start' textAnchor='middle'>
             {region.label}

package/src/components/Sankey/index.tsx

@@ -14,9 +14,10 @@ import ConfigContext from '@cdc/chart/src/ConfigContext'
 import { ChartContext } from '../../types/ChartContext'
 import type { SankeyNode, SankeyProps } from './types'
 import { SankeyChartConfig, AllChartsConfig } from '../../types/ChartConfig'
+import useSankeyAlert from './useSankeyAlert'
 
 const Sankey = ({ width, height, runtime }: SankeyProps) => {
-  const { config } = useContext<ChartContext>(ConfigContext)
+  const { config, handleChartTabbing, legendId } = useContext<ChartContext>(ConfigContext)
   const { sankey: sankeyConfig } = config
 
   const isSankeyChartConfig = (config: AllChartsConfig | SankeyChartConfig): config is SankeyChartConfig => {
@@ -28,8 +29,7 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
 
   //Tooltip
   const [tooltipID, setTooltipID] = useState<string>('')
-  //Mobile Pop Up
-  const [showPopup, setShowPopup] = useState(false)
+  const { showAlert, alert } = useSankeyAlert()
 
   const handleNodeClick = (nodeId: string) => {
     // Store the previous tooltipID
@@ -46,16 +46,6 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
     }
   }
 
-  useEffect(() => {
-    if (window.innerWidth < 768 && window.innerHeight > window.innerWidth) {
-      setShowPopup(true)
-    }
-  }, [window.innerWidth])
-
-  const closePopUp = () => {
-    setShowPopup(false)
-  }
-
   // Uses Visx Groups innerRef to get all Group elements that are mapped.
   // Sets the largest group width in state and subtracts that group the svg width to calculate overall width.
   useEffect(() => {
@@ -313,7 +303,11 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
               data-tooltip-html={data.tooltips && config.enableTooltips && tooltipID !== '' ? sankeyToolTip : null}
               data-tooltip-id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
             >
-              <tspan className={classStyle}>{sankeyConfig.nodeValueStyle.textBefore + (typeof node.value === 'number' ? node.value.toLocaleString() : node.value) + sankeyConfig.nodeValueStyle.textAfter}</tspan>
+              <tspan className={classStyle}>
+                {sankeyConfig.nodeValueStyle.textBefore +
+                  (typeof node.value === 'number' ? node.value.toLocaleString() : node.value) +
+                  sankeyConfig.nodeValueStyle.textAfter}
+              </tspan>
             </text>
           </>
         )}
@@ -415,7 +409,16 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
             >
               {(data?.storyNodeText?.find(storyNode => storyNode.StoryNode === node.id) || {}).segmentTextBefore}
             </Text>
-            <Text verticalAnchor='end' className={classStyle} x={node.x0! + textPositionHorizontal} y={(node.y1! + node.y0! + 25) / 2} fill={sankeyConfig.storyNodeFontColor || sankeyConfig.nodeFontColor} fontWeight='bold' textAnchor='start' style={{ pointerEvents: 'none' }}>
+            <Text
+              verticalAnchor='end'
+              className={classStyle}
+              x={node.x0! + textPositionHorizontal}
+              y={(node.y1! + node.y0! + 25) / 2}
+              fill={sankeyConfig.storyNodeFontColor || sankeyConfig.nodeFontColor}
+              fontWeight='bold'
+              textAnchor='start'
+              style={{ pointerEvents: 'none' }}
+            >
               {typeof node.value === 'number' ? node.value.toLocaleString() : node.value}
             </Text>
             <Text
@@ -434,7 +437,15 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
           </>
         ) : (
           <>
-            <text x={node.x0! + textPositionHorizontal} y={(node.y1! + node.y0!) / 2 + textPositionVertical} dominantBaseline='text-before-edge' fill={sankeyConfig.nodeFontColor} fontWeight='bold' textAnchor='start' style={{ pointerEvents: 'none' }}>
+            <text
+              x={node.x0! + textPositionHorizontal}
+              y={(node.y1! + node.y0!) / 2 + textPositionVertical}
+              dominantBaseline='text-before-edge'
+              fill={sankeyConfig.nodeFontColor}
+              fontWeight='bold'
+              textAnchor='start'
+              style={{ pointerEvents: 'none' }}
+            >
               <tspan id={node.id} className='node-id'>
                 {node.id}
               </tspan>
@@ -451,7 +462,9 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
               style={{ pointerEvents: 'none' }}
             >
               <tspan onClick={() => handleNodeClick(node.id)} className={classStyle}>
-                {sankeyConfig.nodeValueStyle.textBefore + (typeof node.value === 'number' ? node.value.toLocaleString() : node.value) + sankeyConfig.nodeValueStyle.textAfter}
+                {sankeyConfig.nodeValueStyle.textBefore +
+                  (typeof node.value === 'number' ? node.value.toLocaleString() : node.value) +
+                  sankeyConfig.nodeValueStyle.textAfter}
               </tspan>
             </text>
           </>
@@ -460,10 +473,15 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
     )
   })
 
-  return (
+  return !showAlert ? (
     <>
       <div className='sankey-chart'>
-        <svg className='sankey-chart__diagram' width={width} height={Number(config.heights.vertical)} style={{ overflow: 'visible' }}>
+        <svg
+          className='sankey-chart__diagram'
+          width={width}
+          height={Number(config.heights.vertical)}
+          style={{ overflow: 'visible' }}
+        >
           <Group className='links'>{allLinks}</Group>
           <Group className='nodes'>{allNodes}</Group>
           <Group className='finalNodes' style={{ display: 'none' }}>
@@ -473,21 +491,21 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
 
         {/* ReactTooltip needs to remain even if tooltips are disabled -- it handles when a user clicks off of the node and resets
         the sankey diagram. When tooltips are disabled this will nothing */}
-        <ReactTooltip id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`} afterHide={() => setTooltipID('')} events={['click']} place={'bottom'} style={{ backgroundColor: `rgba(238, 238, 238, 1)`, color: 'black', boxShadow: `0 3px 10px rgb(0 0 0 / 0.2)` }} />
-        {showPopup && (
-          <div className='popup'>
-            <div className='popup-content'>
-              <button className='visually-hidden' onClick={closePopUp}>
-                Select for accessible version.
-              </button>
-              <p>
-                <strong>Please change the orientation of your screen or increase the size of your browser to view the diagram better.</strong>
-              </p>
-            </div>
-          </div>
-        )}
+        <ReactTooltip
+          id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
+          afterHide={() => setTooltipID('')}
+          events={['click']}
+          place={'bottom'}
+          style={{
+            backgroundColor: `rgba(238, 238, 238, 1)`,
+            color: 'black',
+            boxShadow: `0 3px 10px rgb(0 0 0 / 0.2)`
+          }}
+        />
       </div>
     </>
+  ) : (
+    alert
   )
 }
 export default Sankey

package/src/components/Sankey/sankey.scss

@@ -25,8 +25,12 @@
     margin: 10px 0;
   }
 
+  .alert-dismissible {
+    padding-right: 4rem !important;
+  }
+
   svg.sankey-chart__diagram {
-    position:relative;
+    position: relative;
     font-family: 'Roboto', sans-serif;
     height: auto;
     width: 100%;
@@ -124,9 +128,6 @@
     .popup {
       display: block; /* Show the popup on smaller screens */
     }
-    .sankey-chart__diagram {
-      opacity: .1;
-    }
   }
 }
 
@@ -150,4 +151,4 @@
   font-size: 30px;
   padding: 10px;
   text-align: center;
-}
+}

package/src/components/Sankey/useSankeyAlert.tsx

@@ -0,0 +1,60 @@
+import { useState, useEffect, useContext } from 'react'
+import { ChartContext } from '../../types/ChartContext'
+import ConfigContext from '../../ConfigContext'
+
+const useSankeyAlert = () => {
+  const { config, handleChartTabbing, legendId } = useContext<ChartContext>(ConfigContext)
+
+  //Mobile Pop Up
+  const [showAlert, setShowAlert] = useState(false)
+  const alertMessage = (
+    <>
+      For best viewing we recommend portrait mode. If you are unable to put your device in portrait mode, please review
+      the <a href={`#${handleChartTabbing(config, legendId)}`}>data table</a> below.{' '}
+      <a onClick={() => setShowAlert(false)} href={'#!'}>
+        Close this alert
+      </a>{' '}
+      to continue viewing the chart.
+    </>
+  )
+
+  const handleCloseModal = () => {
+    setShowAlert(false)
+  }
+
+  const alert = showAlert ? (
+    <div className='alert alert-warning alert-dismissible' role='alert'>
+      <p style={{ padding: '35px' }}>{alertMessage}</p>
+      <button type='button' className='close' data-dismiss='alert' aria-label='Close' onClick={handleCloseModal}>
+        <span aria-hidden='true'>&times;</span>
+      </button>
+    </div>
+  ) : null
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth < 768 && window.innerHeight > window.innerWidth) {
+        setShowAlert(true)
+      } else {
+        setShowAlert(false)
+      }
+    }
+
+    window.addEventListener('resize', handleResize)
+    handleResize() // Call the function initially to set the state based on the initial window size
+
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
+  return {
+    setShowAlert,
+    showAlert,
+    handleCloseModal,
+    alertMessage,
+    alert
+  }
+}
+
+export default useSankeyAlert

package/src/components/ScatterPlot/ScatterPlot.jsx

@@ -4,7 +4,14 @@ import { Group } from '@visx/group'
 import { formatNumber as formatColNumber } from '@cdc/core/helpers/cove/number'
 
 const ScatterPlot = ({ xScale, yScale }) => {
-  const { transformedData: data, config, tableData, formatNumber, seriesHighlight, colorPalettes } = useContext(ConfigContext)
+  const {
+    transformedData: data,
+    config,
+    tableData,
+    formatNumber,
+    seriesHighlight,
+    colorPalettes
+  } = useContext(ConfigContext)
 
   // TODO: copied from line chart should probably be a constant somewhere.
   const circleRadii = 4.5
@@ -23,10 +30,19 @@ const ScatterPlot = ({ xScale, yScale }) => {
       }
     ])
   const handleTooltip = (item, s, dataIndex) => `<div>
-    ${config.legend.showLegendValuesTooltip && config.runtime.seriesLabels && hasMultipleSeries ? `${config.runtime.seriesLabels[s] || ''}<br/>` : ''}
+    ${
+      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')}<br/>
-   ${additionalColumns.map(([label, name, options]) => `${label} : ${formatColNumber(tableData[dataIndex][name], 'left', false, config, options)}<br/>`).join('')}
+   ${additionalColumns
+     .map(
+       ([label, name, options]) =>
+         `${label} : ${formatColNumber(tableData[dataIndex][name], 'left', false, config, options)}<br/>`
+     )
+     .join('')}
 </div>`
 
   return (
@@ -36,7 +52,7 @@ const ScatterPlot = ({ xScale, yScale }) => {
         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'
+          const seriesColor = config?.customColors ? config.customColors[index] : config.palette ? colorPalettes[config.palette][index] : '#000'
 
           let pointStyles = {
             filter: 'unset',

package/src/components/ZoomBrush.tsx

@@ -7,6 +7,7 @@ import ConfigContext from '../ConfigContext'
 import { ScaleLinear, ScaleBand } from 'd3-scale'
 import { isDateScale } from '@cdc/core/helpers/cove/date'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
+import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 
 interface Props {
   xScaleBrush: ScaleLinear<number, number>
@@ -15,7 +16,7 @@ interface Props {
   yMax: number
 }
 const ZoomBrush: FC<Props> = props => {
-  const { tableData, config, parseDate, formatDate, setBrushConfig, getTextWidth, dashboardConfig } = useContext(ConfigContext)
+  const { tableData, config, parseDate, formatDate, setBrushConfig, dashboardConfig } = useContext(ConfigContext)
   const sharedFilters = dashboardConfig?.dashboard?.sharedFilters ?? []
   const isDashboardFilters = sharedFilters?.length > 0
   const { fontSize } = useBarChart()
@@ -175,7 +176,6 @@ const ZoomBrush: FC<Props> = props => {
             <BrushHandle
               left={Number(config.runtime.yAxis.size)}
               showTooltip={showTooltip}
-              getTextWidth={getTextWidth}
               pixelDistance={textProps.endPosition - textProps.startPosition}
               textProps={textProps}
               fontSize={fontSize[config.fontSize]}
@@ -202,7 +202,7 @@ const ZoomBrush: FC<Props> = props => {
 }
 
 const BrushHandle = props => {
-  const { x, isBrushActive, isBrushing, className, textProps, fontSize, showTooltip, left, getTextWidth } = props
+  const { x, isBrushActive, isBrushing, className, textProps, fontSize, showTooltip, left } = props
   const pathWidth = 8
   if (!isBrushActive) {
     return null
@@ -217,15 +217,34 @@ const BrushHandle = props => {
   return (
     <>
       {showTooltip && (
-        <Text x={(Number(textProps.xMax) - textWidth) / 2} dy={-12} pointerEvents='visiblePainted' fontSize={fontSize / 1.1}>
+        <Text
+          x={(Number(textProps.xMax) - textWidth) / 2}
+          dy={-12}
+          pointerEvents='visiblePainted'
+          fontSize={fontSize / 1.1}
+        >
           {tooltipText}
         </Text>
       )}
       <Group left={x + pathWidth / 2} top={-2}>
-        <Text pointerEvents='visiblePainted' dominantBaseline='hanging' x={isLeft ? 55 : -50} y={25} verticalAnchor='start' textAnchor={textAnchor} fontSize={fontSize / 1.4}>
+        <Text
+          pointerEvents='visiblePainted'
+          dominantBaseline='hanging'
+          x={isLeft ? 55 : -50}
+          y={25}
+          verticalAnchor='start'
+          textAnchor={textAnchor}
+          fontSize={fontSize / 1.4}
+        >
           {isLeft ? textProps.startValue : textProps.endValue}
         </Text>
-        <path cursor='ew-resize' d='M0.5,10A6,6 0 0 1 6.5,16V14A6,6 0 0 1 0.5,20ZM2.5,18V12M4.5,18V12' fill={'#297EF1'} strokeWidth='1' transform={transform}></path>
+        <path
+          cursor='ew-resize'
+          d='M0.5,10A6,6 0 0 1 6.5,16V14A6,6 0 0 1 0.5,20ZM2.5,18V12M4.5,18V12'
+          fill={'#297EF1'}
+          strokeWidth='1'
+          transform={transform}
+        ></path>
       </Group>
     </>
   )

package/src/coreStyles_chart.scss

@@ -0,0 +1,3 @@
+@import '@cdc/core/styles/base';
+@import '@cdc/core/styles/heading-colors';
+@import '@cdc/core/styles/v2/themes/color-definitions';

package/src/data/initial-state.js

@@ -28,6 +28,7 @@ export default {
     showDownloadButton: false,
     showMissingDataLabel: true,
     showSuppressedSymbol: true,
+    showZeroValueData: true,
     hideNullValue: true
   },
   padding: {
@@ -67,15 +68,8 @@ export default {
   boxplot: {
     plots: [],
     borders: 'true',
-    firstQuartilePercentage: 25,
-    thirdQuartilePercentage: 75,
-    boxWidthPercentage: 40,
     plotOutlierValues: false,
     plotNonOutlierValues: true,
-    legend: {
-      showHowToReadText: false,
-      howToReadText: ''
-    },
     labels: {
       q1: 'Lower Quartile',
       q2: 'q2',
@@ -87,7 +81,7 @@ export default {
       median: 'Median',
       sd: 'Standard Deviation',
       iqr: 'Interquartile Range',
-      total: 'Total',
+      count: 'Count',
       outliers: 'Outliers',
       values: 'Values',
       lowerBounds: 'Lower Bounds',
@@ -122,10 +116,13 @@ export default {
     tickLabelColor: '#333',
     tickColor: '#333',
     numTicks: '',
-    labelOffset: 65,
+    labelOffset: 0,
     axisPadding: 200,
     target: 0,
-    maxTickRotation: 0
+    maxTickRotation: 0,
+    padding: 5,
+    showYearsOnce: false,
+    sortByRecentDate: false
   },
   table: {
     label: 'Data Table',
@@ -135,6 +132,7 @@ export default {
     caption: '',
     showDownloadUrl: false,
     showDataTableLink: true,
+    showDownloadLinkBelow: true,
     indexLabel: '',
     download: false,
     showVertical: true,