@cdc/chart 4.23.4 → 4.23.6

package/src/components/AreaChart.jsx

@@ -27,7 +27,7 @@ const CoveAreaChart = ({ xScale, yScale, yMax, xMax, chartRef }) => {
   const tooltip_id = `cdc-open-viz-tooltip-${config.runtime.uniqueId}`
 
   // import tooltip helpers
-  const { tooltipData, showTooltip } = useTooltip()
+  const { tooltipData, showTooltip, hideTooltip } = useTooltip()
 
   // here we're inside of the svg,
   // it appears we need to use TooltipInPortal.
@@ -40,23 +40,19 @@ const CoveAreaChart = ({ xScale, yScale, yMax, xMax, chartRef }) => {
   // Draw transparent bars over the chart to get tooltip data
   // Turn DEBUG on for additional context.
   if (!data) return
-  let barThickness = xMax / data
-  let barThicknessAdjusted = barThickness * (config.barThickness || 0.8)
-  let offset = (barThickness * (1 - (config.barThickness || 0.8))) / 2
+  let barThickness = xMax / data.length
 
   // Tooltip helper for getting data to the closest date/category hovered.
   const getXValueFromCoordinate = x => {
-    if (config.xAxis.type === 'categorical') {
+    if (config.xAxis.type === 'categorical' || config.visualizationType === 'Combo') {
       let eachBand = xScale.step()
       let numerator = x
       const index = Math.floor(Number(numerator) / eachBand)
       return xScale.domain()[index - 1] // fixes off by 1 error
     }
 
-    if (config.xAxis.type === 'date') {
+    if (config.xAxis.type === 'date' && config.visualizationType !== 'Combo') {
       const bisectDate = bisector(d => parseDate(d[config.xAxis.dataKey])).left
-      if (!x) return
-      if (!xScale) return
       const x0 = xScale.invert(x)
       const index = bisectDate(config.data, x0, 1)
       const val = parseDate(config.data[index - 1][config.xAxis.dataKey])
@@ -89,6 +85,9 @@ const CoveAreaChart = ({ xScale, yScale, yMax, xMax, chartRef }) => {
       if (!yScaleValues[0]) return
       for (const item of Object.entries(yScaleValues[0])) {
         if (item[0] === seriesKey) {
+          // let userUpdatedSeriesName = config.series.filter(series => series.dataKey === item[0])?.[0]?.name
+          // if (userUpdatedSeriesName) item[0] = userUpdatedSeriesName
+
           seriesToInclude.push(item)
         }
       }
@@ -97,6 +96,7 @@ const CoveAreaChart = ({ xScale, yScale, yMax, xMax, chartRef }) => {
     // filter out the series that aren't added to the map.
     seriesToInclude.map(series => yScaleMaxValues.push(Number(yScaleValues[0][series])))
     if (!seriesToInclude) return
+
     let tooltipDataFromSeries = Object.fromEntries(seriesToInclude) ? Object.fromEntries(seriesToInclude) : {}
 
     let tooltipData = {}
@@ -123,8 +123,8 @@ const CoveAreaChart = ({ xScale, yScale, yMax, xMax, chartRef }) => {
     return config.xAxis.type === 'date' ? xScale(parseDate(d[config.xAxis.dataKey])) : xScale(d[config.xAxis.dataKey])
   }
 
-  const handleY = (d, index) => {
-    return yScale(d[config.series[index].dataKey])
+  const handleY = (d, index, s = undefined) => {
+    return yScale(d[s.dataKey])
   }
 
   return (
@@ -132,21 +132,30 @@ const CoveAreaChart = ({ xScale, yScale, yMax, xMax, chartRef }) => {
       <ErrorBoundary component='AreaChart'>
         <Group className='area-chart' key='area-wrapper' left={Number(config.yAxis.size)}>
           {(config.runtime.areaSeriesKeys || config.runtime.seriesKeys).map((s, index) => {
-            let seriesColor = colorPalettesChart[config.palette][index]
+            let seriesData = data.map(d => {
+              return {
+                [config.xAxis.dataKey]: d[config.xAxis.dataKey],
+                [s.dataKey]: d[s.dataKey]
+              }
+            })
+
             let curveType = allCurves[s.lineType]
             let transparentArea = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(s.dataKey) === -1
             let displayArea = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(s.dataKey) !== -1
 
-            data.map(d => xScale(parseDate(d[config.xAxis.dataKey])))
-
+            if (config.xAxis.type === 'date') {
+              data.map(d => xScale(parseDate(d[config.xAxis.dataKey])))
+            } else {
+              data.map(d => xScale(d[config.xAxis.dataKey]))
+            }
             return (
               <React.Fragment key={index}>
                 {/* prettier-ignore */}
                 <LinePath
-                  data={data}
+                  data={seriesData}
                   x={d => handleX(d)}
-                  y={d => yScale(d[config.series[index].dataKey])}
-                  stroke={displayArea ? seriesColor : 'transparent'}
+                  y={d => handleY(d, index, s)}
+                  stroke={displayArea ?  colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[s.dataKey] : s.dataKey) : '#000' : 'transparent'}
                   strokeWidth={2}
                   strokeOpacity={1}
                   shapeRendering='geometricPrecision'
@@ -159,11 +168,12 @@ const CoveAreaChart = ({ xScale, yScale, yMax, xMax, chartRef }) => {
                   key={'area-chart'}
                   fill={ displayArea ? colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[s.dataKey] : s.dataKey) : '#000' : 'transparent'}
                   fillOpacity={transparentArea ? 0.25 : 0.5}
-                  data={data} x={d => handleX(d)}
-                  y={d => handleY(d, index)}
+                  data={seriesData}
+                  x={d => handleX(d)}
+                  y={d => handleY(d, index, s)}
                   yScale={yScale}
                   curve={curveType}
-                  strokeDasharray={s.type ? handleLineType(s.typ) : 0}
+                  strokeDasharray={s.type ? handleLineType(s.type) : 0}
                   />
 
                 {/* Transparent bar for tooltips */}
@@ -175,10 +185,11 @@ const CoveAreaChart = ({ xScale, yScale, yMax, xMax, chartRef }) => {
                   fillOpacity={0.05}
                   style={DEBUG ? { stroke: 'black', strokeWidth: 2 } : {}}
                   onMouseMove={e => handleMouseOver(e, data)}
+                  onMouseOut={hideTooltip}
                   />
 
                 {/* circles that appear on hover */}
-                {tooltipData && (
+                {tooltipData && Object.entries(tooltipData.data).length > 0 && (
                   <circle
                     cx={config.xAxis.type === 'categorical' ? xScale(tooltipData.data[config.xAxis.dataKey]) : xScale(parseDate(tooltipData.data[config.xAxis.dataKey]))}
                     cy={yScale(tooltipData.data[s.dataKey])}
@@ -190,26 +201,7 @@ const CoveAreaChart = ({ xScale, yScale, yMax, xMax, chartRef }) => {
                   />
                 )}
 
-                {/* another tool for showing bars during debug mode. */}
-                {DEBUG &&
-                  data.map((item, index) => {
-                    return (
-                      <Bar
-                        className='bar-here'
-                        x={Number(barThickness * index + offset)}
-                        y={d => Number(yScale(d[config.series[index].dataKey]))}
-                        yScale={yScale}
-                        width={barThicknessAdjusted}
-                        height={yMax}
-                        fill={'transparent'}
-                        fillOpacity={1}
-                        style={{ stroke: 'black', strokeWidth: 2 }}
-                        onMouseMove={e => handleMouseOver(e, data)}
-                      />
-                    )
-                  })}
-
-                {tooltipData && (
+                {tooltipData && Object.entries(tooltipData.data).length > 0 && (
                   <TooltipInPortal key={Math.random()} top={tooltipData.dataYPosition + chartPosition?.top} left={tooltipData.dataXPosition + chartPosition?.left} style={defaultStyles}>
                     <ul style={{ listStyle: 'none', paddingLeft: 'unset', fontFamily: 'sans-serif', margin: 'auto', lineHeight: '1rem' }} data-tooltip-id={tooltip_id}>
                       {typeof tooltipData === 'object' &&

package/src/components/BarChart.jsx

@@ -6,13 +6,15 @@ import chroma from 'chroma-js'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import ConfigContext from '../ConfigContext'
 import { BarStackHorizontal } from '@visx/shape'
+import { useHighlightedBars } from '../hooks/useHighlightedBars'
+import { act } from 'react-dom/test-utils'
 
 export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getXAxisData, getYAxisData, animatedChart, visible }) {
-  const { transformedData: data, colorScale, seriesHighlight, config, formatNumber, updateConfig, colorPalettes, formatDate, isNumber, getTextWidth, parseDate } = useContext(ConfigContext)
-
+  const { transformedData: data, colorScale, seriesHighlight, config, formatNumber, updateConfig, colorPalettes, tableData, formatDate, isNumber, getTextWidth, parseDate, setSharedFilter, setSharedFilterValue, dashboardConfig } = useContext(ConfigContext)
+  const { HighLightedBarUtils } = useHighlightedBars(config)
   const { orientation, visualizationSubType } = config
   const isHorizontal = orientation === 'horizontal'
-
+  const barBorderWidth = 1
   const lollipopBarWidth = config.lollipopSize === 'large' ? 7 : config.lollipopSize === 'medium' ? 6 : 5
   const lollipopShapeSize = config.lollipopSize === 'large' ? 14 : config.lollipopSize === 'medium' ? 12 : 10
 
@@ -25,12 +27,11 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
   const tipRounding = config.tipRounding
   const radius = config.roundingStyle === 'standard' ? '8px' : config.roundingStyle === 'shallow' ? '5px' : config.roundingStyle === 'finger' ? '15px' : '0px'
   const stackCount = config.runtime.seriesKeys.length
-  const barBorderWidth = 1
   const fontSize = { small: 16, medium: 18, large: 20 }
   const hasMultipleSeries = Object.keys(config.runtime.seriesLabels).length > 1
 
   const applyRadius = index => {
-    if (index === undefined || index === null || !isRounded) return
+    if (index === undefined || index === null || !isRounded) return {}
     let style = {}
 
     if ((isStacked && index + 1 === stackCount) || !isStacked) {
@@ -48,6 +49,27 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
     return style
   }
 
+  const assignColorsToValues = () => {
+    const palettesArr = colorPalettes[config.palette]
+    const values = tableData.map(d => {
+      return d[config.legend.colorCode]
+    })
+    // Map to hold unique values and their  colors
+    let colorMap = new Map()
+    // Resultant array to hold colors  to the values
+    let result = []
+
+    for (let i = 0; i < values.length; i++) {
+      // If value not in map, add it and assign a color
+      if (!colorMap.has(values[i])) {
+        colorMap.set(values[i], palettesArr[colorMap.size % palettesArr.length])
+      }
+      // push the colosr to the result array
+      result.push(colorMap.get(values[i]))
+    }
+    return result
+  }
+
   const updateBars = defaultBars => {
     // function updates  stacked && regular && lollipop horizontal bars
     if (config.visualizationType !== 'Bar' && !isHorizontal) return defaultBars
@@ -167,7 +189,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                       `}
                       </style>
                       <Group key={`bar-stack-${barStack.index}-${bar.index}`} id={`barStack${barStack.index}-${bar.index}`} className='stack vertical'>
-                        <Text display={config.labels && displayBar ? 'block' : 'none'} opacity={transparentBar ? 0.5 : 1} x={barThickness * bar.index + offset} y={bar.y - 5} fill={bar.color} textAnchor='middle'>
+                        <Text display={config.labels && displayBar ? 'block' : 'none'} opacity={transparentBar ? 0.5 : 1} x={barThickness * bar.index + offset} y={bar.y - 5} fill={'#000'} textAnchor='middle'>
                           {yAxisValue}
                         </Text>
                         <foreignObject
@@ -181,6 +203,13 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                           display={displayBar ? 'block' : 'none'}
                           data-tooltip-html={tooltip}
                           data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+                          onClick={e => {
+                            e.preventDefault()
+                            if (setSharedFilter) {
+                              bar[config.xAxis.dataKey] = xAxisValue
+                              setSharedFilter(config.uid, bar)
+                            }
+                          }}
                         ></foreignObject>
                       </Group>
                     </Group>
@@ -245,6 +274,13 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                             display={displayBar ? 'block' : 'none'}
                             data-tooltip-html={tooltip}
                             data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+                            onClick={e => {
+                              e.preventDefault()
+                              if (setSharedFilter) {
+                                bar[config.xAxis.dataKey] = xAxisValue
+                                setSharedFilter(config.uid, bar)
+                              }
+                            }}
                           ></foreignObject>
 
                           {orientation === 'horizontal' && visualizationSubType === 'stacked' && isLabelBelowBar && barStack.index === 0 && !config.yAxis.hideLabel && (
@@ -313,23 +349,44 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                     left={config.runtime.horizontal ? 0 : (xMax / barGroups.length) * barGroup.index}
                   >
                     {barGroup.bars.map((bar, index) => {
+                      const scaleVal = config.useLogScale ? 0.1 : 0
+                      const getHighlightedBarColorByValue = value => {
+                        const match = config?.highlightedBarValues.filter(item => {
+                          if (!item.value) return
+                          return config.xAxis.type === 'date' ? formatDate(parseDate(item.value)) === value : item.value === value
+                        })[0]
+
+                        if (!match?.color) return `rgba(255, 102, 1)`
+                        return match.color
+                      }
+
+                      const getHighlightedBarByValue = value => {
+                        const match = config?.highlightedBarValues.filter(item => {
+                          if (!item.value) return
+                          return config.xAxis.type === 'date' ? formatDate(parseDate(item.value)) === value : item.value === value
+                        })[0]
+
+                        if (!match?.color) return false
+                        return match
+                      }
+
+                      let highlightedBarValues = config.highlightedBarValues.map(item => item.value).filter(item => item !== ('' || undefined))
+
+                      highlightedBarValues = config.xAxis.type === 'date' ? HighLightedBarUtils.formatDates(highlightedBarValues) : highlightedBarValues
+
                       let transparentBar = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(bar.key) === -1
                       let displayBar = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(bar.key) !== -1
-                      let barHeight = orientation === 'horizontal' ? config.barHeight : isNumber(Math.abs(yScale(bar.value) - yScale(0))) ? Math.abs(yScale(bar.value) - yScale(0)) : 0
+                      let barHeight = orientation === 'horizontal' ? config.barHeight : isNumber(Math.abs(yScale(bar.value) - yScale(scaleVal))) ? Math.abs(yScale(bar.value) - yScale(scaleVal)) : 0
                       let barY = bar.value >= 0 && isNumber(bar.value) ? bar.y : yScale(0)
                       let barGroupWidth = ((config.runtime.horizontal ? yMax : xMax) / barGroups.length) * (config.barThickness || 0.8)
                       let offset = (((config.runtime.horizontal ? yMax : xMax) / barGroups.length) * (1 - (config.barThickness || 0.8))) / 2
                       const barX = bar.value < 0 ? Math.abs(xScale(bar.value)) : xScale(0)
-                      const barWidthHorizontal = Math.abs(xScale(bar.value) - xScale(0))
+                      const barWidthHorizontal = Math.abs(xScale(bar.value) - xScale(scaleVal))
                       // ! Unsure if this should go back.
                       if (config.isLollipopChart) {
                         offset = (config.runtime.horizontal ? yMax : xMax) / barGroups.length / 2 - lollipopBarWidth / 2
                       }
-                      const set = new Set()
-                      data.forEach(d => set.add(d[config.legend.colorCode]))
-                      const uniqValues = Array.from(set)
-
-                      let palette = colorPalettes[config.palette].slice(0, uniqValues.length)
+                      let palette = assignColorsToValues()
 
                       let barWidth = config.isLollipopChart ? lollipopBarWidth : barGroupWidth / barGroup.bars.length
                       let barColor = config.runtime.seriesLabels && config.runtime.seriesLabels[bar.key] ? colorScale(config.runtime.seriesLabels[bar.key]) : colorScale(bar.key)
@@ -349,7 +406,6 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                       }
 
                       const barPosition = bar.value < 0 ? 'below' : 'above'
-                      const textX = barPosition === 'below' ? 0 : 0
 
                       // check if bar text/value string fits into  each bars.
                       let textWidth = getTextWidth(xAxisValue, `normal ${fontSize[config.fontSize]}px sans-serif`)
@@ -357,10 +413,15 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                       let labelColor = '#000000'
 
                       // Set label color
-                      if (chroma.contrast(labelColor, barColor) < 4.9) {
-                        textFits ? (labelColor = '#FFFFFF') : '#000000'
+                      if (barColor && labelColor) {
+                        if (chroma.contrast(labelColor, barColor) < 4.9) {
+                          labelColor = textFits ? '#FFFFFF' : '#000000'
+                        }
                       }
 
+                      // Set if background is transparent'
+                      labelColor = HighLightedBarUtils.checkFontColor(yAxisValue, highlightedBarValues, labelColor)
+
                       // control text position
                       let textAnchor = textFits ? 'end' : 'start'
                       let textAnchorLollipop = 'start'
@@ -395,6 +456,66 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                       ${xAxisTooltip}
                         </div>`
 
+                      const isRegularLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'regular'
+                      const isTwoToneLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'two-tone'
+                      const isHighlightedBar = config.orientation === 'vertical' ? highlightedBarValues?.includes(xAxisValue) : highlightedBarValues?.includes(yAxisValue)
+                      const highlightedBarColor = config.orientation === 'vertical' ? getHighlightedBarColorByValue(xAxisValue) : getHighlightedBarColorByValue(yAxisValue)
+                      const highlightedBar = config.orientation === 'vertical' ? getHighlightedBarByValue(xAxisValue) : getHighlightedBarByValue(yAxisValue)
+
+                      const background = () => {
+                        if (isRegularLollipopColor) return barColor
+                        if (isTwoToneLollipopColor) return chroma(barColor).brighten(1)
+                        if (isHighlightedBar) return 'transparent'
+                        // loop through shared filters and get active values
+                        if (dashboardConfig && dashboardConfig?.dashboard.sharedFilters?.length > 0) {
+                          let activeFilters = []
+                          let backgroundColor = barColor
+
+                          const checkForResetValue = () => {
+                            return dashboardConfig.dashboard.sharedFilters?.map((filter, index) => {
+                              if (filter.resetLabel === filter.active) {
+                                backgroundColor = barColor
+                              } else {
+                                return backgroundColor
+                              }
+                            })
+                          }
+
+                          dashboardConfig.dashboard.sharedFilters?.forEach((filter, index) => {
+                            activeFilters.push(filter.active)
+                          })
+
+                          // if reset value is found use that.
+
+                          if (config.orientation === 'horizontal') {
+                            if (!activeFilters.includes(yAxisValue)) {
+                              backgroundColor = '#ccc'
+                            }
+                          }
+
+                          if (config.orientation !== 'horizontal') {
+                            if (!activeFilters.includes(xAxisValue)) {
+                              backgroundColor = '#ccc'
+                            }
+                          }
+                          checkForResetValue()
+                          return backgroundColor
+                        }
+                        return barColor
+                      }
+
+                      const borderColor = isHighlightedBar ? highlightedBarColor : config.barHasBorder === 'true' ? '#000' : 'transparent'
+
+                      const borderWidth = isHighlightedBar ? highlightedBar.borderWidth : config.isLollipopChart ? 0 : config.barHasBorder === 'true' ? barBorderWidth : 0
+
+                      const finalStyle = {
+                        background: background(),
+                        borderColor,
+                        borderStyle: 'solid',
+                        borderWidth,
+                        ...style
+                      }
+
                       return (
                         <Group key={`${barGroup.index}--${index}--${orientation}`}>
                           {/* This feels gross but inline transition was not working well*/}
@@ -414,15 +535,18 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                               y={config.runtime.horizontal ? barWidth * bar.index : barY}
                               width={config.runtime.horizontal ? barWidthHorizontal : barWidth}
                               height={isHorizontal && !config.isLollipopChart ? barWidth : isHorizontal && config.isLollipopChart ? lollipopBarWidth : barHeight}
-                              style={{
-                                background: config.isLollipopChart && config.lollipopColorStyle === 'regular' ? barColor : config.isLollipopChart && config.lollipopColorStyle === 'two-tone' ? chroma(barColor).brighten(1) : barColor,
-                                border: `${config.isLollipopChart ? 0 : config.barHasBorder === 'true' ? barBorderWidth : 0}px solid #333`,
-                                ...style
-                              }}
+                              style={finalStyle}
                               opacity={transparentBar ? 0.5 : 1}
                               display={displayBar ? 'block' : 'none'}
                               data-tooltip-html={tooltip}
                               data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+                              onClick={e => {
+                                e.preventDefault()
+                                if (setSharedFilter) {
+                                  bar[config.xAxis.dataKey] = config.orientation === 'horizontal' ? yAxisValue : xAxisValue
+                                  setSharedFilter(config.uid, bar)
+                                }
+                              }}
                             ></foreignObject>
                             {orientation === 'horizontal' && !config.isLollipopChart && displayNumbersOnBar && (
                               <Text // prettier-ignore
@@ -437,7 +561,6 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                                 {xAxisValue}
                               </Text>
                             )}
-                            ;
                             {orientation === 'horizontal' && config.isLollipopChart && displayNumbersOnBar && (
                               <Text
                                 display={displayBar ? 'block' : 'none'}
@@ -461,13 +584,12 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                                   : formatNumber(data[barGroup.index][config.runtime.originalXAxis.dataKey])}
                               </Text>
                             )}
-                            ;
+
                             {orientation === 'vertical' && (
-                              <Text display={config.labels && displayBar ? 'block' : 'none'} opacity={transparentBar ? 0.5 : 1} x={barWidth * (bar.index + 0.5) + offset} y={barY - 5} fill={barColor} textAnchor='middle'>
+                              <Text display={config.labels && displayBar ? 'block' : 'none'} opacity={transparentBar ? 0.5 : 1} x={barWidth * (bar.index + 0.5) + offset} y={barY - 5} fill={labelColor} textAnchor='middle'>
                                 {yAxisValue}
                               </Text>
                             )}
-                            ;
                             {config.isLollipopChart && config.lollipopShape === 'circle' && (
                               <circle
                                 cx={orientation === 'horizontal' ? bar.y : barWidth * (barGroup.bars.length - bar.index - 1) + (isLabelBelowBar && orientation === 'horizontal' ? 0 : offset) + lollipopShapeSize / 3.5}

package/src/components/DataTable.jsx

@@ -2,6 +2,7 @@ import React, { useContext, useEffect, useState, useMemo } from 'react'
 import { useTable, useSortBy, useResizeColumns, useBlockLayout } from 'react-table'
 import Papa from 'papaparse'
 import { Base64 } from 'js-base64'
+import { colorPalettesChart } from '@cdc/core/data/colorPalettes'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import LegendCircle from '@cdc/core/components/LegendCircle'
@@ -9,7 +10,7 @@ import Icon from '@cdc/core/components/ui/Icon'
 
 import ConfigContext from '../ConfigContext'
 
-import CoveMediaControls from '@cdc/core/components/CoveMediaControls'
+import MediaControls from '@cdc/core/components/MediaControls'
 
 export default function DataTable() {
   const { rawData, tableData: data, config, colorScale, parseDate, formatDate, formatNumber: numberFormatter, colorPalettes } = useContext(ConfigContext)
@@ -93,24 +94,29 @@ export default function DataTable() {
             {
               Header: '',
               Cell: ({ row }) => {
-                const seriesLabel = config.runtime.seriesLabels ? config.runtime.seriesLabels[row.original] : row.original
+                const getSeriesLabel = () => {
+                  let userUpdatedSeriesName = config.series.filter(series => series.dataKey === row.original)?.[0]?.name
+
+                  if (userUpdatedSeriesName) return userUpdatedSeriesName
+                  if (config.runtimeSeriesLabels) return config.runtime.seriesLabels[row.original]
+                  return row.original
+                }
                 return (
                   <>
                     {config.visualizationType !== 'Pie' && (
                       <LegendCircle
                         fill={
-                          // non-dynamic leged
-                          !config.legend.dynamicLegend
-                            ? colorScale(seriesLabel)
-                            : // dynamic legend
-                            config.legend.dynamicLegend
+                          // non-dynamic legend
+                          !config.legend.dynamicLegend && config.visualizationType !== 'Forecasting'
+                            ? colorScale(getSeriesLabel())
+                            : config.legend.dynamicLegend
                             ? colorPalettes[config.palette][row.index]
                             : // fallback
                               '#000'
                         }
                       />
                     )}
-                    <span>{seriesLabel}</span>
+                    <span>{getSeriesLabel()}</span>
                   </>
                 )
               },
@@ -127,7 +133,19 @@ export default function DataTable() {
         const newCol = {
           Header: resolveTableHeader(),
           Cell: ({ row }) => {
-            return <>{numberFormatter(d[row.original], 'left')}</>
+            let leftAxisItems = config.series.filter(item => item?.axis === 'Left')
+            let rightAxisItems = config.series.filter(item => item?.axis === 'Right')
+            let resolvedAxis = ''
+
+            leftAxisItems.map(leftSeriesItem => {
+              if (leftSeriesItem.dataKey === row.original) resolvedAxis = 'left'
+            })
+
+            rightAxisItems.map(rightSeriesItem => {
+              if (rightSeriesItem.dataKey === row.original) resolvedAxis = 'right'
+            })
+
+            return <>{numberFormatter(d[row.original], resolvedAxis)}</>
           },
           id: `${d[config.runtime.originalXAxis.dataKey]}--${index}`,
           canSort: true
@@ -210,10 +228,10 @@ export default function DataTable() {
 
   return (
     <ErrorBoundary component='DataTable'>
-      <CoveMediaControls.Section classes={['download-links']}>
-        <CoveMediaControls.Link config={config} />
+      <MediaControls.Section classes={['download-links']}>
+        <MediaControls.Link config={config} />
         {config.table.download && <DownloadButton data={rawData} type='link' />}
-      </CoveMediaControls.Section>
+      </MediaControls.Section>
 
       <section id={config?.title ? `dataTableSection__${config?.title.replace(/\s/g, '')}` : `dataTableSection`} className={`data-table-container`} aria-label={accessibilityLabel}>
         <div

package/src/components/DeviationBar.jsx

@@ -6,38 +6,7 @@ import { Text } from '@visx/text'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import chroma from 'chroma-js'
 
-// create function to position text based where bar is located left/or right
-function getTextProps(isLollipopChart, textFits, lollipopShapeSize, fill) {
-  if (isLollipopChart) {
-    return {
-      right: {
-        textAnchor: 'start',
-        dx: lollipopShapeSize + 6,
-        fill: '#000000'
-      },
-      left: {
-        textAnchor: 'end',
-        dx: -lollipopShapeSize,
-        fill: '#000000'
-      }
-    }
-  } else {
-    return {
-      right: {
-        textAnchor: textFits ? 'end' : 'start',
-        dx: textFits ? -6 : 6,
-        fill: textFits ? fill : '#000000'
-      },
-      left: {
-        textAnchor: textFits ? 'start' : 'end',
-        dx: textFits ? 6 : -6,
-        fill: textFits ? fill : '#000000'
-      }
-    }
-  }
-}
-
-export function DeviationBar({ height, xScale }) {
+export default function DeviationBar({ height, xScale }) {
   const { transformedData: data, config, formatNumber, twoColorPalette, getTextWidth, updateConfig, parseDate, formatDate } = useContext(ConfigContext)
 
   if (!config || config?.series?.length !== 1 || config.orientation !== 'horizontal') return
@@ -189,3 +158,34 @@ export function DeviationBar({ height, xScale }) {
     </ErrorBoundary>
   )
 }
+
+// create function to position text based where bar is located left/or right
+function getTextProps(isLollipopChart, textFits, lollipopShapeSize, fill) {
+  if (isLollipopChart) {
+    return {
+      right: {
+        textAnchor: 'start',
+        dx: lollipopShapeSize + 6,
+        fill: '#000000'
+      },
+      left: {
+        textAnchor: 'end',
+        dx: -lollipopShapeSize,
+        fill: '#000000'
+      }
+    }
+  } else {
+    return {
+      right: {
+        textAnchor: textFits ? 'end' : 'start',
+        dx: textFits ? -6 : 6,
+        fill: textFits ? fill : '#000000'
+      },
+      left: {
+        textAnchor: textFits ? 'start' : 'end',
+        dx: textFits ? 6 : -6,
+        fill: textFits ? fill : '#000000'
+      }
+    }
+  }
+}