@cdc/chart 4.24.2 → 4.24.4

package/src/components/EditorPanel/useEditorPermissions.js

@@ -14,18 +14,19 @@ export const useEditorPermissions = () => {
     'Combo',
     'Deviation Bar',
     'Forecasting',
-    'Forest Plot',
+    // 'Forest Plot',
     'Line',
     'Paired Bar',
     'Pie',
     'Scatter Plot',
-    'Spark Line'
+    'Spark Line',
+    'Sankey'
 ]
 
   const headerColors = ['theme-blue', 'theme-purple', 'theme-brown', 'theme-teal', 'theme-pink', 'theme-orange', 'theme-slate', 'theme-indigo', 'theme-cyan', 'theme-green', 'theme-amber']
 
   const visSupportsDateCategoryAxis = () => {
-    const disabledCharts = ['Forest Plot']
+    const disabledCharts = ['Forest Plot', 'Sankey']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -43,13 +44,13 @@ export const useEditorPermissions = () => {
   }
 
   const visHasLabelOnData = () => {
-    const disabledCharts = ['Area Chart', 'Box Plot', 'Pie', 'Scatter Plot', 'Forest Plot', 'Spark Line']
+    const disabledCharts = ['Area Chart', 'Box Plot', 'Pie', 'Scatter Plot', 'Forest Plot', 'Spark Line', 'Sankey']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visCanAnimate = () => {
-    const disabledCharts = ['Area Chart', 'Scatter Plot', 'Box Plot', 'Forest Plot', 'Spark Line']
+    const disabledCharts = ['Area Chart', 'Scatter Plot', 'Box Plot', 'Forest Plot', 'Spark Line', 'Sankey']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -62,6 +63,8 @@ export const useEditorPermissions = () => {
         return false
       case 'Spark Line':
         return false
+      case 'Sankey':
+        return false
       default:
         return true
     }
@@ -107,6 +110,8 @@ export const useEditorPermissions = () => {
 
   const visHasDataCutoff = () => {
     switch (visualizationType) {
+      case 'Sankey':
+        return false
       case 'Forest Plot':
         return false
       case 'Box Plot':
@@ -120,8 +125,13 @@ export const useEditorPermissions = () => {
     }
   }
 
+  const visHasSelectableLegendValues = !['Box Plot', 'Forest Plot', 'Spark Line'].includes(visualizationType)
+  const visHasLegendAxisAlign = () => {
+    return visualizationType === 'Bar' && visualizationSubType === 'stacked' && config.legend.behavior === 'isolate'
+  }
+
   const visSupportsTooltipOpacity = () => {
-    const disabledCharts = ['Spark Line']
+    const disabledCharts = ['Spark Line', 'Sankey']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -133,19 +143,19 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsSequentialPallete = () => {
-    const disabledCharts = ['Paired Bar', 'Deviation Bar', 'Forest Plot', 'Forecasting']
+    const disabledCharts = ['Paired Bar', 'Deviation Bar', 'Forest Plot', 'Forecasting', 'Sankey']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visSupportsNonSequentialPallete = () => {
-    const disabledCharts = ['Paired Bar', 'Deviation Bar', 'Forest Plot', 'Forecasting']
+    const disabledCharts = ['Paired Bar', 'Deviation Bar', 'Forest Plot', 'Forecasting', 'Sankey']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visSupportsReverseColorPalette = () => {
-    const disabledCharts = ['Forest Plot', 'Paired Bar', 'Deviation Bar']
+    const disabledCharts = ['Forest Plot', 'Paired Bar', 'Deviation Bar', 'Sankey']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -187,7 +197,7 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsRegions = () => {
-    const disabledCharts = ['Forest Plot', 'Pie', 'Paired Bar', 'Spark Line']
+    const disabledCharts = ['Forest Plot', 'Pie', 'Paired Bar', 'Spark Line', 'Sankey']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -205,7 +215,7 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsFilters = () => {
-    const disabledCharts = ['Forest Plot']
+    const disabledCharts = ['Forest Plot', 'Sankey']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -258,7 +268,7 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsLeftValueAxis = () => {
-    const disabledCharts = ['Spark Line']
+    const disabledCharts = ['Spark Line', 'Sankey']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -270,13 +280,13 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsDateCategoryHeight = () => {
-    const disabledCharts = ['Spark Line']
+    const disabledCharts = ['Spark Line', 'Sankey']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visSupportsDateCategoryAxisPadding = () => {
-    return config.xAxis.type === 'date' && config.xAxis.sortDates
+    return config.xAxis.type === 'date-time'
   }
 
   const visSupportsReactTooltip = () => {
@@ -285,6 +295,19 @@ export const useEditorPermissions = () => {
     }
   }
 
+  const visSupportsPreliminaryData = () => {
+    // check if Line added in Combo
+    const lineExist = config?.series.some(item => ['Line', 'dashed-sm', 'dashed-md', 'dashed-lg'].includes(item?.type))
+    if (visualizationType === 'Line') {
+      return true
+    }
+
+    if (visualizationType === 'Combo' && lineExist) {
+      return true
+    }
+    return false
+  }
+
   return {
     enabledChartTypes,
     headerColors,
@@ -295,6 +318,7 @@ export const useEditorPermissions = () => {
     visHasLabelOnData,
     visHasDataSuppression,
     visHasLegend,
+    visHasLegendAxisAlign,
     visHasBrushChart,
     visHasNumbersOnBars,
     visSupportsBarSpace,
@@ -312,6 +336,7 @@ export const useEditorPermissions = () => {
     visSupportsFootnotes,
     visSupportsLeftValueAxis,
     visSupportsNonSequentialPallete,
+    visSupportsPreliminaryData,
     visSupportsRankByValue,
     visSupportsRegions,
     visSupportsResponsiveTicks,
@@ -319,6 +344,7 @@ export const useEditorPermissions = () => {
     visSupportsSequentialPallete,
     visSupportsSuperTitle,
     visSupportsTooltipLines,
+    visHasSelectableLegendValues,
     visSupportsTooltipOpacity,
     visSupportsValueAxisGridLines,
     visSupportsValueAxisLabels,

package/src/components/Legend/Legend.Component.tsx

@@ -1,16 +1,15 @@
 import parse from 'html-react-parser'
 import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend'
 import LegendCircle from '@cdc/core/components/LegendCircle'
-
+import Button from '@cdc/core/components/elements/Button'
 import useLegendClasses from '../../hooks/useLegendClasses'
 import { useHighlightedBars } from '../../hooks/useHighlightedBars'
 import { handleLineType } from '../../helpers/handleLineType'
 import { Line } from '@visx/shape'
-import { scaleOrdinal } from '@visx/scale'
 import { Label } from '../../types/Label'
 import { ChartConfig } from '../../types/ChartConfig'
 import { ColorScale } from '../../types/ChartContext'
-import { Group } from '@visx/group'
+import { forwardRef } from 'react'
 
 interface LegendProps {
   config: ChartConfig
@@ -18,42 +17,17 @@ interface LegendProps {
   seriesHighlight: string[]
   highlight: Function
   highlightReset: Function
-  currentViewport: string
+  currentViewport: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
   formatLabels: (labels: Label[]) => Label[]
+  ref: React.Ref<() => void>
+  skipId: string
 }
 
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
-const Legend: React.FC<LegendProps> = ({ config, colorScale, seriesHighlight, highlight, highlightReset, currentViewport, formatLabels }) => {
+const Legend: React.FC<LegendProps> = forwardRef(({ config, colorScale, seriesHighlight, highlight, highlightReset, currentViewport, formatLabels, skipId = 'legend' }, ref) => {
   const { innerClasses, containerClasses } = useLegendClasses(config)
   const { runtime, orientation, legend } = config
   if (!legend) return null
-  // create fn to reverse labels while legend is Bottom.  Legend-right , legend-left works by default.
-  const displayScale = scaleOrdinal({
-    domain: config.suppressedData?.map(d => d.label),
-    range: ['none'],
-    unknown: 'block'
-  })
-
-  const renderDashes = style => {
-    const dashCount = style === 'Dashed Small' ? 3 : 2
-    const dashClass = `dashes ${style.toLowerCase().replace(' ', '-')}`
-
-    return (
-      <div className={dashClass}>
-        {Array.from({ length: dashCount }, (_, i) => (
-          <span key={i}>-</span>
-        ))}
-      </div>
-    )
-  }
-  const renderDashesOrCircle = style => {
-    if (['Dashed Small', 'Dashed Medium', 'Dashed Large'].includes(style)) {
-      return renderDashes(style)
-    } else if (style === 'Open Circles') {
-      return <div className='dashes open-circles'></div>
-    }
-  }
-
   const isBottomOrSmallViewport = legend.position === 'bottom' || ['sm', 'xs', 'xxs'].includes(currentViewport)
 
   const legendClasses = {
@@ -64,11 +38,13 @@ const Legend: React.FC<LegendProps> = ({ config, colorScale, seriesHighlight, hi
   const { HighLightedBarUtils } = useHighlightedBars(config)
 
   let highLightedLegendItems = HighLightedBarUtils.findDuplicates(config.highlightedBarValues)
+  const fontSize = ['sm', 'xs', 'xxs'].includes(currentViewport) ? { fontSize: '11px' } : null
 
   return (
-    <aside style={legendClasses} id='legend' className={containerClasses.join(' ')} role='region' aria-label='legend' tabIndex={0}>
-      {legend.label && <h2>{parse(legend.label)}</h2>}
-      {legend.description && <p>{parse(legend.description)}</p>}
+    <aside ref={ref} style={legendClasses} id={skipId || 'legend'} className={containerClasses.join(' ')} role='region' aria-label='legend' tabIndex={0}>
+      {legend.label && <h3>{parse(legend.label)}</h3>}
+      {legend.description && <p style={fontSize}>{parse(legend.description)}</p>}
+
       <LegendOrdinal scale={colorScale} itemDirection='row' labelMargin='0 20px 0 0' shapeMargin='0 10px 0'>
         {labels => {
           return (
@@ -101,27 +77,31 @@ const Legend: React.FC<LegendProps> = ({ config, colorScale, seriesHighlight, hi
                       className={className.join(' ')}
                       tabIndex={0}
                       key={`legend-quantile-${i}`}
-                      onKeyPress={e => {
+                      onKeyDown={e => {
                         if (e.key === 'Enter') {
+                          e.preventDefault()
                           highlight(label)
                         }
                       }}
-                      onClick={() => {
+                      onClick={e => {
+                        e.preventDefault()
                         highlight(label)
                       }}
+                      role='button'
                     >
-                      {config.visualizationType === 'Line' && config.legend.lineMode ? (
-                        <svg width={40} height={20}>
-                          <Line from={{ x: 10, y: 10 }} to={{ x: 40, y: 10 }} stroke={label.value} strokeWidth={2} strokeDasharray={handleLineType(config.series[i]?.type ? config.series[i]?.type : '')} />
-                        </svg>
-                      ) : (
-                        <div style={{ display: 'flex', flexDirection: 'column' }}>
-                          <LegendCircle margin='0' fill={label.value} display={displayScale(label.datum)} />
-                          <div style={{ marginTop: '2px', marginRight: '6px' }}>{label.icon}</div>
-                        </div>
-                      )}
-
-                      <LegendLabel align='left' margin='0 0 0 4px'>
+                      <div>
+                        {config.visualizationType === 'Line' && config.legend.lineMode ? (
+                          <svg width={40} height={20}>
+                            <Line from={{ x: 10, y: 10 }} to={{ x: 40, y: 10 }} stroke={label.value} strokeWidth={2} strokeDasharray={handleLineType(config.series[i]?.type ? config.series[i]?.type : '')} />
+                          </svg>
+                        ) : (
+                          <div style={{ display: 'flex', flexDirection: 'column' }}>
+                            <LegendCircle viewport={currentViewport} margin='0' fill={label.value} display={true} />
+                          </div>
+                        )}
+                      </div>
+
+                      <LegendLabel style={fontSize} align='left' margin='0 0 0 4px'>
                         {label.text}
                       </LegendLabel>
                     </LegendItem>
@@ -142,12 +122,14 @@ const Legend: React.FC<LegendProps> = ({ config, colorScale, seriesHighlight, hi
                       className={className}
                       tabIndex={0}
                       key={`legend-quantile-${i}`}
-                      onKeyPress={e => {
+                      onKeyDown={e => {
                         if (e.key === 'Enter') {
+                          e.preventDefault()
                           highlight(bar.legendLabel)
                         }
                       }}
-                      onClick={() => {
+                      onClick={e => {
+                        e.preventDefault()
                         highlight(bar.legendLabel)
                       }}
                     >
@@ -158,15 +140,10 @@ const Legend: React.FC<LegendProps> = ({ config, colorScale, seriesHighlight, hi
                     </LegendItem>
                   )
                 })}
-                {seriesHighlight.length > 0 && (
-                  <button className={`legend-reset ${config.theme}`} onClick={labels => highlightReset(labels)} tabIndex={0}>
-                    Reset
-                  </button>
-                )}
               </div>
 
               <>
-                {config?.preliminaryData?.some(pd => pd.label) && config.visualizationType === 'Line' && (
+                {config?.preliminaryData?.some(pd => pd.label) && ['Line', 'Combo'].includes(config.visualizationType) && (
                   <>
                     <hr></hr>
                     <div className={config.legend.singleRow && isBottomOrSmallViewport ? 'legend-container__inner bottom single-row' : ''}>
@@ -174,11 +151,9 @@ const Legend: React.FC<LegendProps> = ({ config, colorScale, seriesHighlight, hi
                         return (
                           <>
                             {pd.label && (
-                              <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
-                                <svg style={{ width: '50px' }} key={index} height={'23px'}>
-                                  {pd.style.includes('Dashed') ? <Line from={{ x: 10, y: 10 }} to={{ x: 40, y: 10 }} stroke={'#000'} strokeWidth={2} strokeDasharray={handleLineType(pd.style)} /> : <circle r={6} strokeWidth={2} stroke={'#000'} cx={22} cy={10} fill='transparent' />}
-                                </svg>
-                                <span style={{}}> {pd.label}</span>
+                              <div key={index} className='legend-preliminary'>
+                                <svg>{pd.style.includes('Dashed') ? <Line from={{ x: 10, y: 10 }} to={{ x: 40, y: 10 }} stroke={'#000'} strokeWidth={2} strokeDasharray={handleLineType(pd.style)} /> : <circle r={6} strokeWidth={2} stroke={'#000'} cx={22} cy={10} fill='transparent' />}</svg>
+                                <span> {pd.label}</span>
                               </div>
                             )}
                           </>
@@ -192,8 +167,13 @@ const Legend: React.FC<LegendProps> = ({ config, colorScale, seriesHighlight, hi
           )
         }}
       </LegendOrdinal>
+      {seriesHighlight.length > 0 && (
+        <Button onClick={labels => highlightReset(labels)} style={{ marginTop: '1rem' }}>
+          Reset
+        </Button>
+      )}
     </aside>
   )
-}
+})
 
 export default Legend

package/src/components/Legend/Legend.tsx

@@ -1,10 +1,10 @@
-import { useContext } from 'react'
+import { useContext, forwardRef } from 'react'
 import ConfigContext from '../../ConfigContext'
 import LegendComponent from './Legend.Component'
 import { createFormatLabels } from './helpers/createFormatLabels'
 
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
-const Legend = () => {
+const Legend = forwardRef((props, ref) => {
   // prettier-ignore
   const {
     config,
@@ -22,7 +22,11 @@ const Legend = () => {
 
   const createLegendLabels = createFormatLabels(config, tableData, data, colorScale)
 
-  return !['Box Plot', 'Pie'].includes(config.visualizationType) && <LegendComponent config={config} colorScale={colorScale} seriesHighlight={seriesHighlight} highlight={highlight} highlightReset={highlightReset} currentViewport={currentViewport} formatLabels={createLegendLabels} />
-}
+  return (
+    !['Box Plot', 'Pie'].includes(config.visualizationType) && (
+      <LegendComponent ref={ref} skipId={props.skipId || 'legend'} config={config} colorScale={colorScale} seriesHighlight={seriesHighlight} highlight={highlight} highlightReset={highlightReset} currentViewport={currentViewport} formatLabels={createLegendLabels} />
+    )
+  )
+})
 
 export default Legend

package/src/components/LineChart/LineChartProps.ts

@@ -22,6 +22,7 @@ export interface PreliminaryDataItem {
   column: string
   value: string
   seriesKey: string
+  label: string
 }
 
 export interface DataItem {

package/src/components/LineChart/helpers.ts

@@ -1,7 +1,7 @@
 import { type PreliminaryDataItem, DataItem, StyleProps, Style } from './LineChartProps'
 
 export const createStyles = (props: StyleProps): Style[] => {
-  const { preliminaryData, data, stroke, handleLineType, lineType, seriesKey } = props
+  const { preliminaryData, data, stroke, strokeWidth, handleLineType, lineType, seriesKey } = props
 
   const validPreliminaryData: PreliminaryDataItem[] = preliminaryData.filter(pd => pd.seriesKey && pd.column && pd.value && pd.type && pd.style)
   const getMatchingPd = (point: DataItem): PreliminaryDataItem => validPreliminaryData.find(pd => pd.seriesKey === seriesKey && point[pd.column] === pd.value && pd.type === 'effect' && pd.style !== 'Open Circles')
@@ -9,7 +9,7 @@ export const createStyles = (props: StyleProps): Style[] => {
   let styles: Style[] = []
   const createStyle = (lineStyle): Style => ({
     stroke: stroke,
-    strokeWidth: 2,
+    strokeWidth: strokeWidth,
     strokeDasharray: lineStyle
   })
 

package/src/components/LineChart/index.tsx

@@ -52,7 +52,7 @@ const LineChart = (props: LineChartProps) => {
 
   return (
     <ErrorBoundary component='LineChart'>
-      <Group left={config.runtime.yAxis.size ? parseInt(config.runtime.yAxis.size) : 66}>
+      <Group left={config.runtime.yAxis.size}>
         {' '}
         {/* left - expects a number not a string */}
         {(config.runtime.lineSeriesKeys || config.runtime.seriesKeys).map((seriesKey, index) => {
@@ -62,7 +62,7 @@ const LineChart = (props: LineChartProps) => {
           let displayArea = legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(seriesKey) !== -1
           const circleData = filterCircles(config.preliminaryData, rawData, seriesKey)
           // styles for preliminary Data  items
-          let styles = createStyles({ preliminaryData: config.preliminaryData, data: tableData, stroke: colorScale(config.runtime.seriesLabels[seriesKey]), handleLineType, lineType, seriesKey })
+          let styles = createStyles({ preliminaryData: config.preliminaryData, data: tableData, stroke: colorScale(config.runtime.seriesLabels[seriesKey]), strokeWidth: seriesData[0].weight || 2, handleLineType, lineType, seriesKey })
 
           let xPos = d => {
             return xScale(getXAxisData(d)) + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
@@ -166,7 +166,7 @@ const LineChart = (props: LineChartProps) => {
               {config?.preliminaryData?.some(d => d.value && d.column) ? (
                 <SplitLinePath
                   curve={allCurves[seriesData[0].lineType]}
-                  segments={(config.xAxis.type === 'date' && config.xAxis.sortDates
+                  segments={(config.xAxis.type === 'date-time'
                     ? data.sort((d1, d2) => {
                         let x1 = getXAxisData(d1)
                         let x2 = getXAxisData(d2)
@@ -190,7 +190,7 @@ const LineChart = (props: LineChartProps) => {
                   <LinePath
                     curve={allCurves[seriesData[0].lineType]}
                     data={
-                      config.xAxis.type === 'date' && config.xAxis.sortDates
+                      config.xAxis.type === 'date-time'
                         ? data.sort((d1, d2) => {
                             let x1 = getXAxisData(d1)
                             let x2 = getXAxisData(d2)
@@ -203,7 +203,7 @@ const LineChart = (props: LineChartProps) => {
                     x={d => xPos(d)}
                     y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(Number(getYAxisData(d, seriesKey))))}
                     stroke={colorScale(config.runtime.seriesLabels[seriesKey])}
-                    strokeWidth={2}
+                    strokeWidth={seriesData[0].weight || 2}
                     strokeOpacity={1}
                     shapeRendering='geometricPrecision'
                     strokeDasharray={lineType ? handleLineType(lineType) : 0}
@@ -216,14 +216,14 @@ const LineChart = (props: LineChartProps) => {
 
               {/* circles for preliminaryData data */}
               {circleData.map((d, i) => {
-                return <circle key={i} cx={xPos(d)} cy={yScale(Number(getYAxisData(d, seriesKey)))} r={6} strokeWidth={2} stroke={colorScale ? colorScale(config.runtime.seriesLabels[seriesKey]) : '#000'} fill='#fff' />
+                return <circle key={i} cx={xPos(d)} cy={seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(Number(getYAxisData(d, seriesKey)))} r={6} strokeWidth={seriesData[0].weight || 2} stroke={colorScale ? colorScale(config.runtime.seriesLabels[seriesKey]) : '#000'} fill='#fff' />
               })}
 
               {/* ANIMATED LINE */}
               {config.animate && (
                 <LinePath
                   className='animation'
-                  curve={seriesData.lineType}
+                  curve={allCurves[seriesData[0].lineType]}
                   data={data}
                   x={d => xPos(d)}
                   y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(Number(getYAxisData(d, seriesKey))))}

package/src/components/LinearChart.jsx

@@ -7,6 +7,7 @@ import { Line, Bar } from '@visx/shape'
 import { Text } from '@visx/text'
 import { Tooltip as ReactTooltip } from 'react-tooltip'
 import { useTooltip, TooltipWithBounds } from '@visx/tooltip'
+import { isDateScale } from '@cdc/core/helpers/cove/date'
 
 // CDC Components
 import { AreaChart, AreaChartStacked } from './AreaChart'
@@ -27,7 +28,7 @@ import Regions from './Regions'
 import useMinMax from '../hooks/useMinMax'
 import useReduceData from '../hooks/useReduceData'
 import useRightAxis from '../hooks/useRightAxis'
-import useScales from '../hooks/useScales'
+import useScales, { getTickValues }  from '../hooks/useScales'
 import useTopAxis from '../hooks/useTopAxis'
 import { useTooltip as useCoveTooltip } from '../hooks/useTooltip'
 import { useEditorPermissions } from './EditorPanel/useEditorPermissions'
@@ -36,32 +37,10 @@ import { useEditorPermissions } from './EditorPanel/useEditorPermissions'
 import ZoomBrush from './ZoomBrush'
 
 const LinearChart = props => {
-  const {
-    isEditor,
-    isDashboard,
-    computeMarginBottom,
-    transformedData: data,
-    dimensions,
-    config,
-    parseDate,
-    formatDate,
-    currentViewport,
-    formatNumber,
-    handleChartAriaLabels,
-    updateConfig,
-    handleLineType,
-    rawData,
-    capitalize,
-    setSharedFilter,
-    setSharedFilterValue,
-    getTextWidth,
-    isDebug
-  } = useContext(ConfigContext)
+  const { transformedData: data, dimensions, config, parseDate, formatDate, currentViewport, formatNumber, handleChartAriaLabels, updateConfig, handleLineType, getTextWidth } = useContext(ConfigContext)
   // todo: start destructuring this file for conciseness
   const { visualizationType, visualizationSubType, orientation, xAxis, yAxis, runtime, debugSvg } = config
 
-  const getDate = d => new Date(d[config.xAxis.dataKey])
-
   // configure width
   let [width] = dimensions
   if (config && config.legend && !config.legend.hide && config.legend.position !== 'bottom' && ['lg', 'md'].includes(currentViewport)) {
@@ -99,7 +78,7 @@ const LinearChart = props => {
   })
 
   // getters & functions
-  const getXAxisData = d => (config.runtime.xAxis.type === 'date' ? parseDate(d[config.runtime.originalXAxis.dataKey]).getTime() : d[config.runtime.originalXAxis.dataKey])
+  const getXAxisData = d => (isDateScale(config.runtime.xAxis) ? parseDate(d[config.runtime.originalXAxis.dataKey]).getTime() : d[config.runtime.originalXAxis.dataKey])
   const getYAxisData = (d, seriesKey) => d[seriesKey]
   const xAxisDataMapped = config.brush.active && config.brush.data?.length ? config.brush.data.map(d => getXAxisData(d)) : data.map(d => getXAxisData(d))
   const section = config.orientation === 'horizontal' || config.visualizationType === 'Forest Plot' ? 'yAxis' : 'xAxis'
@@ -122,7 +101,7 @@ const LinearChart = props => {
 
     if (config.data && !config.data[index] && visualizationType === 'Forest Plot') return
     if (config.visualizationType === 'Forest Plot') return config.data[index][config.xAxis.dataKey]
-    if (runtime.yAxis.type === 'date') return formatDate(parseDate(tick))
+    if (isDateScale(runtime.yAxis)) return formatDate(parseDate(tick))
     if (orientation === 'vertical') return formatNumber(tick, 'left', shouldAbbreviate)
     return tick
   }
@@ -133,7 +112,7 @@ const LinearChart = props => {
       tick = 0
     }
 
-    if (runtime.xAxis.type === 'date' && config.visualizationType !== 'Forest Plot') return formatDate(tick)
+    if (isDateScale(runtime.xAxis) && config.visualizationType !== 'Forest Plot') return formatDate(tick)
     if (orientation === 'horizontal' && config.visualizationType !== 'Forest Plot') return formatNumber(tick, 'left', shouldAbbreviate)
     if (config.xAxis.type === 'continuous' && config.visualizationType !== 'Forest Plot') return formatNumber(tick, 'bottom', shouldAbbreviate)
     if (config.visualizationType === 'Forest Plot') return formatNumber(tick, 'left', config.dataFormat.abbreviated, config.runtime.xAxis.prefix, config.runtime.xAxis.suffix, Number(config.dataFormat.roundTo))
@@ -388,7 +367,7 @@ const LinearChart = props => {
           {/* X axis */}
           {visualizationType !== 'Paired Bar' && visualizationType !== 'Spark Line' && (
             <AxisBottom
-              top={runtime.horizontal && config.visualizationType !== 'Forest Plot' ? Number(heightHorizontal) + Number(config.xAxis.axisPadding) : config.visualizationType === 'Forest Plot' ? yMax + Number(config.xAxis.axisPadding) : yMax + Number(config.xAxis.axisPadding)}
+              top={runtime.horizontal && config.visualizationType !== 'Forest Plot' ? Number(heightHorizontal) + Number(config.xAxis.axisPadding) : config.visualizationType === 'Forest Plot' ? yMax + Number(config.xAxis.axisPadding) : yMax}
               left={config.visualizationType !== 'Forest Plot' ? Number(runtime.yAxis.size) : 0}
               label={runtime.xAxis.label}
               tickFormat={handleBottomTickFormatting}
@@ -396,6 +375,7 @@ const LinearChart = props => {
               stroke='#333'
               numTicks={countNumOfTicks('xAxis')}
               tickStroke='#333'
+              tickValues={config.xAxis.manual ? getTickValues(xAxisDataMapped, xScale, config.xAxis.type === 'date-time' ? countNumOfTicks('xAxis') : config.xAxis.manualStep) : undefined}
             >
               {props => {
                 const axisCenter = config.visualizationType !== 'Forest Plot' ? (props.axisToPoint.x - props.axisFromPoint.x) / 2 : dimensions[0] / 2
@@ -502,7 +482,7 @@ const LinearChart = props => {
           )}
           {visualizationType === 'Paired Bar' && (
             <>
-              <AxisBottom top={yMax} left={Number(runtime.yAxis.size)} label={runtime.xAxis.label} tickFormat={runtime.xAxis.type === 'date' ? formatDate : formatNumber} scale={g1xScale} stroke='#333' tickStroke='#333' numTicks={runtime.xAxis.numTicks || undefined}>
+              <AxisBottom top={yMax} left={Number(runtime.yAxis.size)} label={runtime.xAxis.label} tickFormat={isDateScale(runtime.xAxis) ? formatDate : formatNumber} scale={g1xScale} stroke='#333' tickStroke='#333' numTicks={runtime.xAxis.numTicks || undefined}>
                 {props => {
                   return (
                     <Group className='bottom-axis'>
@@ -529,7 +509,7 @@ const LinearChart = props => {
                 top={yMax}
                 left={Number(runtime.yAxis.size)}
                 label={runtime.xAxis.label}
-                tickFormat={runtime.xAxis.type === 'date' ? formatDate : runtime.xAxis.dataKey !== 'Year' ? formatNumber : tick => tick}
+                tickFormat={isDateScale(runtime.xAxis) ? formatDate : runtime.xAxis.dataKey !== 'Year' ? formatNumber : tick => tick}
                 scale={g2xScale}
                 stroke='#333'
                 tickStroke='#333'
@@ -708,7 +688,7 @@ const LinearChart = props => {
                 newX = yAxis
               }
 
-              let anchorPosition = newX.type === 'date' ? xScale(parseDate(anchor.value, false)) : xScale(anchor.value)
+              let anchorPosition = isDateScale(newX) ? xScale(parseDate(anchor.value, false)) : xScale(anchor.value)
 
               // have to move up
               // const padding = orientation === 'horizontal' ? Number(config.xAxis.size) : Number(config.yAxis.size)

package/src/components/PairedBarChart.jsx

@@ -5,7 +5,7 @@ import { scaleLinear } from '@visx/scale'
 import { Text } from '@visx/text'
 
 import ConfigContext from '../ConfigContext'
-import chroma from 'chroma-js'
+import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 
 const PairedBarChart = ({ width, height, originalWidth }) => {
   const { config, colorScale, transformedData: data, formatNumber, seriesHighlight, getTextWidth } = useContext(ConfigContext)
@@ -47,15 +47,8 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
   })
 
   // Set label color
-  let labelColor = '#000000'
-
-  if (groupOne.color && chroma.contrast(labelColor, groupOne.color) < 4.9) {
-    groupOne.labelColor = '#FFFFFF'
-  }
-
-  if (groupTwo.color && chroma.contrast(labelColor, groupTwo.color) < 4.9) {
-    groupTwo.labelColor = '#FFFFFF'
-  }
+  groupOne.labelColor = groupOne.color ? getContrastColor('#000', groupOne.color) : '#000'
+  groupTwo.labelColor = groupTwo.color ? getContrastColor('#000', groupTwo.color) : '#000'
 
   const label = config.yAxis.label ? `${config.yAxis.label}: ` : ''
 
@@ -87,6 +80,7 @@ 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}>
+          <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)
@@ -122,6 +116,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                         strokeWidth={borderWidth}
                         opacity={transparentBar ? 0.5 : 1}
                         display={displayBar ? 'block' : 'none'}
+                        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'}>
@@ -173,6 +168,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
                         stroke='#333'
                         opacity={transparentBar ? 0.5 : 1}
                         display={displayBar ? 'block' : 'none'}
+                        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'}>