@cdc/chart 4.24.2 → 4.24.3

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,6 +1,7 @@
 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'
@@ -11,6 +12,7 @@ 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
@@ -20,10 +22,11 @@ interface LegendProps {
   highlightReset: Function
   currentViewport: string
   formatLabels: (labels: Label[]) => Label[]
+  ref: React.Ref<() => void>
 }
 
 /* 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 }, ref) => {
   const { innerClasses, containerClasses } = useLegendClasses(config)
   const { runtime, orientation, legend } = config
   if (!legend) return null
@@ -66,8 +69,8 @@ const Legend: React.FC<LegendProps> = ({ config, colorScale, seriesHighlight, hi
   let highLightedLegendItems = HighLightedBarUtils.findDuplicates(config.highlightedBarValues)
 
   return (
-    <aside style={legendClasses} id='legend' className={containerClasses.join(' ')} role='region' aria-label='legend' tabIndex={0}>
-      {legend.label && <h2>{parse(legend.label)}</h2>}
+    <aside ref={ref} style={legendClasses} id='legend' className={containerClasses.join(' ')} role='region' aria-label='legend' tabIndex={0}>
+      {legend.label && <h3>{parse(legend.label)}</h3>}
       {legend.description && <p>{parse(legend.description)}</p>}
       <LegendOrdinal scale={colorScale} itemDirection='row' labelMargin='0 20px 0 0' shapeMargin='0 10px 0'>
         {labels => {
@@ -101,14 +104,17 @@ 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}>
@@ -142,12 +148,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 +166,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' : ''}>
@@ -178,7 +181,7 @@ const Legend: React.FC<LegendProps> = ({ config, colorScale, seriesHighlight, hi
                                 <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>
+                                <span> {pd.label}</span>
                               </div>
                             )}
                           </>
@@ -192,8 +195,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,7 @@ 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} 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'
@@ -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}
@@ -502,7 +481,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 +508,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 +687,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'}>

package/src/components/PieChart/PieChart.tsx

@@ -1,6 +1,5 @@
 import React, { useContext, useState, useEffect, useRef, useMemo } from 'react'
 import { animated, useTransition, interpolate } from 'react-spring'
-import chroma from 'chroma-js'
 
 // visx
 import { Pie } from '@visx/shape'
@@ -18,6 +17,7 @@ import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import LegendComponent from '../Legend/Legend.Component'
 import { createFormatLabels } from '../Legend/helpers/createFormatLabels'
 import { scaleOrdinal } from '@visx/scale'
+import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 
 const enterUpdateTransition = ({ startAngle, endAngle }) => ({
   startAngle,
@@ -156,8 +156,8 @@ const PieChart = props => {
           const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.1
 
           let textColor = '#FFF'
-          if (_colorScale(arc.data[config.runtime.xAxis.dataKey]) && chroma.contrast(textColor, _colorScale(arc.data[config.runtime.xAxis.dataKey])) < 3.5) {
-            textColor = '000'
+          if (_colorScale(arc.data[config.runtime.xAxis.dataKey])) {
+            textColor = getContrastColor(textColor, _colorScale(arc.data[config.runtime.xAxis.dataKey]))
           }
 
           return (