@cdc/chart 4.23.10 → 4.23.11

package/src/components/{LineChart.tsx → LineChart/index.tsx}

@@ -6,28 +6,47 @@ import { LinePath, Bar } from '@visx/shape'
 import { Text } from '@visx/text'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import ConfigContext from '../ConfigContext'
-import useRightAxis from '../hooks/useRightAxis'
+import ConfigContext from '../../ConfigContext'
+import useRightAxis from '../../hooks/useRightAxis'
 import LineChartCircle from './LineChart.Circle'
 
-const LineChart = ({ xScale, yScale, getXAxisData, getYAxisData, xMax, yMax, handleTooltipMouseOver, handleTooltipMouseOff, showTooltip, seriesStyle = 'Line', svgRef, handleTooltipClick, tooltipData }) => {
-  // Not sure why there's a redraw here.
-
-  const { colorPalettes, transformedData: data, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, isNumber, updateConfig, handleLineType, dashboardConfig, tableData } = useContext(ConfigContext)
+// types
+import { type ChartContext } from '../../types/ChartContext'
+import { type LineChartProps } from './LineChartProps'
+
+const LineChart = (props: LineChartProps) => {
+  // prettier-ignore
+  const {
+    getXAxisData,
+    getYAxisData,
+    handleTooltipClick,
+    handleTooltipMouseOff,
+    handleTooltipMouseOver,
+    tooltipData,
+    xMax,
+    xScale,
+    yMax,
+    yScale,
+  } = props
+
+  // prettier-ignore
+  const {
+    colorScale,
+    config,
+    formatNumber,
+    handleLineType,
+    isNumber,
+    parseDate,
+    seriesHighlight,
+    tableData,
+    transformedData: data,
+    updateConfig,
+  } = useContext<ChartContext>(ConfigContext)
   const { yScaleRight } = useRightAxis({ config, yMax, data, updateConfig })
-
   if (!handleTooltipMouseOver) return
-  const handleAxisFormating = (axis = 'left', label, value) => {
-    // if this is an x axis category/date value return without doing any formatting.
-    // if (label === config.runtime.xAxis.label) return value
-    axis = String(axis).toLocaleLowerCase()
-    if (label) {
-      return `${label}: ${formatNumber(value, axis)}`
-    }
-    return `${formatNumber(value, axis)}`
-  }
 
   const DEBUG = false
+  const { lineDatapointStyle, showLineSeriesLabels, legend } = config
 
   return (
     <ErrorBoundary component='LineChart'>
@@ -39,21 +58,19 @@ const LineChart = ({ xScale, yScale, getXAxisData, getYAxisData, xMax, yMax, han
           const seriesData = config.series.filter(item => item.dataKey === seriesKey)
           const seriesAxis = seriesData[0].axis ? seriesData[0].axis : 'left'
 
-          let displayArea = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(seriesKey) !== -1
+          let displayArea = legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(seriesKey) !== -1
 
           return (
             <Group
               key={`series-${seriesKey}`}
-              opacity={config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(seriesKey) === -1 ? 0.5 : 1}
-              display={config.legend.behavior === 'highlight' || (seriesHighlight.length === 0 && !config.legend.dynamicLegend) || seriesHighlight.indexOf(seriesKey) !== -1 ? 'block' : 'none'}
+              opacity={legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(seriesKey) === -1 ? 0.5 : 1}
+              display={legend.behavior === 'highlight' || (seriesHighlight.length === 0 && !legend.dynamicLegend) || seriesHighlight.indexOf(seriesKey) !== -1 ? 'block' : 'none'}
             >
               {data.map((d, dataIndex) => {
                 // Find the series object from the config.series array that has a dataKey matching the seriesKey variable.
                 const series = config.series.find(({ dataKey }) => dataKey === seriesKey)
                 const { axis } = series
 
-                const xAxisValue = config.runtime.xAxis.type === 'date' ? formatDate(parseDate(d[config.runtime.xAxis.dataKey])) : d[config.runtime.xAxis.dataKey]
-                const yAxisValue = getYAxisData(d, seriesKey)
                 const hasMultipleSeries = Object.keys(config.runtime.seriesLabels).length > 1
                 const labeltype = axis === 'Right' ? 'rightLabel' : 'label'
                 let label = config.runtime.yAxis[labeltype]
@@ -74,28 +91,39 @@ const LineChart = ({ xScale, yScale, getXAxisData, getYAxisData, xMax, yMax, han
                         {formatNumber(d[seriesKey], 'left')}
                       </Text>
 
-                      {config.lineDatapointStyle === 'hidden' ||
-                        (config.lineDatapointStyle === 'always show' && <LineChartCircle d={d} config={config} seriesKey={seriesKey} displayArea={displayArea} tooltipData={tooltipData} xScale={xScale} yScale={yScale} colorScale={colorScale} parseDate={parseDate} yScaleRight={yScaleRight} />)}
+                      {(lineDatapointStyle === 'hidden' || lineDatapointStyle === 'always show') && (
+                        <LineChartCircle
+                          data={data}
+                          d={d}
+                          config={config}
+                          seriesKey={seriesKey}
+                          displayArea={displayArea}
+                          tooltipData={tooltipData}
+                          xScale={xScale}
+                          yScale={yScale}
+                          colorScale={colorScale}
+                          parseDate={parseDate}
+                          yScaleRight={yScaleRight}
+                          seriesAxis={seriesAxis}
+                          key={`line-circle--${dataIndex}`}
+                        />
+                      )}
                     </Group>
                   )
                 )
               })}
-
-              <>{config.lineDatapointStyle === 'hover' && <LineChartCircle config={config} seriesKey={seriesKey} displayArea={displayArea} tooltipData={tooltipData} xScale={xScale} yScale={yScale} colorScale={colorScale} parseDate={parseDate} yScaleRight={yScaleRight} seriesAxis={seriesAxis} />}</>
-
+              <>
+                {lineDatapointStyle === 'hover' && (
+                  <LineChartCircle data={data} config={config} seriesKey={seriesKey} displayArea={displayArea} tooltipData={tooltipData} xScale={xScale} yScale={yScale} colorScale={colorScale} parseDate={parseDate} yScaleRight={yScaleRight} seriesAxis={seriesAxis} />
+                )}
+              </>
+              {/* STANDARD LINE */}
               <LinePath
                 curve={allCurves[seriesData[0].lineType]}
                 data={data}
                 x={d => xScale(getXAxisData(d))}
                 y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(getYAxisData(d, seriesKey)))}
-                stroke={
-                  config.customColors
-                    ? config.customColors[index]
-                    : colorScale
-                    ? colorPalettes[config.palette][index]
-                    : // fallback
-                      '#000'
-                }
+                stroke={colorScale ? colorScale(config.runtime.seriesLabels[seriesKey]) : '#000'}
                 strokeWidth={2}
                 strokeOpacity={1}
                 strokeDasharray={lineType ? handleLineType(lineType) : 0}
@@ -103,6 +131,7 @@ const LineChart = ({ xScale, yScale, getXAxisData, getYAxisData, xMax, yMax, han
                   return item[seriesKey] !== '' && item[seriesKey] !== null && item[seriesKey] !== undefined
                 }}
               />
+              {/* ANIMATED LINE */}
               {config.animate && (
                 <LinePath
                   className='animation'
@@ -121,7 +150,7 @@ const LineChart = ({ xScale, yScale, getXAxisData, getYAxisData, xMax, yMax, han
                 />
               )}
               {/* Render series labels at end if each line if selected in the editor */}
-              {config.showLineSeriesLabels &&
+              {showLineSeriesLabels &&
                 (config.runtime.lineSeriesKeys || config.runtime.seriesKeys).map(seriesKey => {
                   let lastDatum
                   for (let i = data.length - 1; i >= 0; i--) {

package/src/components/LinearChart.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useRef, useState, useMemo } from 'react'
+import React, { useContext, useEffect, useRef, useState } from 'react'
 
 // Libraries
 import { AxisLeft, AxisBottom, AxisRight, AxisTop } from '@visx/axis'
@@ -6,7 +6,7 @@ import { Group } from '@visx/group'
 import { Line, Bar } from '@visx/shape'
 import { Text } from '@visx/text'
 import { Tooltip as ReactTooltip } from 'react-tooltip'
-import { useTooltip, TooltipWithBounds, useTooltipInPortal } from '@visx/tooltip'
+import { useTooltip, TooltipWithBounds } from '@visx/tooltip'
 
 // CDC Components
 import AreaChart from './AreaChart'
@@ -30,13 +30,14 @@ import useRightAxis from '../hooks/useRightAxis'
 import useScales from '../hooks/useScales'
 import useTopAxis from '../hooks/useTopAxis'
 import { useTooltip as useCoveTooltip } from '../hooks/useTooltip'
+import { useEditorPermissions } from '../hooks/useEditorPermissions'
 
 // styles
 import '../scss/LinearChart.scss'
+import ZoomBrush from './ZoomBrush'
 
 const LinearChart = props => {
   const { isEditor, isDashboard, transformedData: data, dimensions, config, parseDate, formatDate, currentViewport, formatNumber, handleChartAriaLabels, updateConfig, handleLineType, rawData, capitalize, setSharedFilter, setSharedFilterValue, getTextWidth, isDebug } = useContext(ConfigContext)
-
   // todo: start destructuring this file for conciseness
   const { visualizationType, visualizationSubType, orientation, xAxis, yAxis, runtime, debugSvg } = config
 
@@ -59,15 +60,16 @@ const LinearChart = props => {
     height = height + config.data.length * config.forestPlot.rowHeight
     yMax = yMax + config.data.length * config.forestPlot.rowHeight
   }
-
-  let dynamicMarginTop = 0 || config.dynamicMarginTop
-  const marginTop = 20
+  if (config.brush.active) {
+    height = height + config.brush.height
+  }
 
   // hooks  % states
   const { minValue, maxValue, existPositiveValue, isAllLine } = useReduceData(config, data)
-  const { yScaleRight, hasRightAxis } = useRightAxis({ config, yMax, data, updateConfig })
+  const { visSupportsReactTooltip } = useEditorPermissions()
   const { hasTopAxis } = useTopAxis(config)
   const [animatedChart, setAnimatedChart] = useState(false)
+  const [point, setPoint] = useState({ x: 0, y: 0 })
 
   // refs
   const triggerRef = useRef()
@@ -79,11 +81,12 @@ 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 getYAxisData = (d, seriesKey) => d[seriesKey]
-  const xAxisDataMapped = data.map(d => getXAxisData(d))
+  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' ? 'yAxis' : 'xAxis'
   const properties = { data, config, minValue, maxValue, isAllLine, existPositiveValue, xAxisDataMapped, xMax, yMax }
-  const { min, max } = useMinMax(properties)
-  const { xScale, yScale, seriesScale, g1xScale, g2xScale, xScaleNoPadding } = useScales({ ...properties, min, max })
+  const { min, max, leftMax, rightMax } = useMinMax(properties)
+  const { yScaleRight, hasRightAxis } = useRightAxis({ config, yMax, data, updateConfig })
+  const { xScale, yScale, seriesScale, g1xScale, g2xScale, xScaleNoPadding, xScaleBrush } = useScales({ ...properties, min, max, leftMax, rightMax })
 
   // sets the portal x/y for where tooltips should appear on the page.
   const [chartPosition, setChartPosition] = useState(null)
@@ -109,6 +112,8 @@ const LinearChart = props => {
       // when logarithmic scale applied change value FIRST  of  tick
       tick = 0
     }
+
+    if (config.visualizationType === 'Forest Plot') return formatNumber(tick, 'bottom', false, false, false, true)
     if (runtime.xAxis.type === 'date') return formatDate(tick)
     if (orientation === 'horizontal') return formatNumber(tick, 'left', shouldAbbreviate)
     if (config.xAxis.type === 'continuous') return formatNumber(tick, 'bottom', shouldAbbreviate)
@@ -147,7 +152,12 @@ const LinearChart = props => {
           tickCount = 4 // same default as standalone components
         }
       }
+
+      if (config.visualizationType === 'Forest Plot') {
+        tickCount = config.xAxis.numTicks !== '' ? config.xAxis.numTicks : 4
+      }
     }
+
     return tickCount
   }
 
@@ -206,56 +216,35 @@ const LinearChart = props => {
     return countNumOfTicks('yAxis')
   }
 
+  const onMouseMove = event => {
+    const svgRect = event.currentTarget.getBoundingClientRect()
+    const x = event.clientX - svgRect.left
+    const y = event.clientY - svgRect.top
+
+    setPoint({
+      x,
+      y
+    })
+  }
+
   return isNaN(width) ? (
     <React.Fragment></React.Fragment>
   ) : (
     <ErrorBoundary component='LinearChart'>
       {/* ! Notice - div needed for tooltip boundaries (flip/flop) */}
       <div style={{ width: `${width}px`, height: `${height}px`, overflow: 'visible' }} className='tooltip-boundary'>
-        <svg width={'100%'} height={'100%'} className={`linear ${config.animate ? 'animated' : ''} ${animatedChart && config.animate ? 'animate' : ''} ${debugSvg && 'debug'}`} role='img' aria-label={handleChartAriaLabels(config)} ref={svgRef} style={{ overflow: 'visible' }}>
+        <svg
+          // onMouseLeave={() => setPoint(null)}
+          onMouseMove={onMouseMove}
+          width={'100%'}
+          height={'100%'}
+          className={`linear ${config.animate ? 'animated' : ''} ${animatedChart && config.animate ? 'animate' : ''} ${debugSvg && 'debug'}`}
+          role='img'
+          aria-label={handleChartAriaLabels(config)}
+          ref={svgRef}
+          style={{ overflow: 'visible' }}
+        >
           <Bar width={width} height={height} fill={'transparent'}></Bar> {/* Highlighted regions */}
-          {config.regions
-            ? config.regions.map(region => {
-                if (!Object.keys(region).includes('from') || !Object.keys(region).includes('to')) return null
-
-                let from
-                let to
-                let width
-
-                if (config.xAxis.type === 'date') {
-                  from = xScale(parseDate(region.from).getTime())
-                  to = xScale(parseDate(region.to).getTime())
-                  width = to - from
-                }
-
-                if (config.xAxis.type === 'categorical') {
-                  from = xScale(region.from)
-                  to = xScale(region.to)
-                  width = to - from
-                }
-
-                if (!from) return null
-                if (!to) return null
-
-                return (
-                  <Group className='regions' left={Number(runtime.yAxis.size)} key={region.label}>
-                    <path
-                      stroke='#333'
-                      d={`M${from} -5
-                          L${from} 5
-                          M${from} 0
-                          L${to} 0
-                          M${to} -5
-                          L${to} 5`}
-                    />
-                    <rect x={from} y={0} width={width} height={yMax} fill={region.background} opacity={0.3} />
-                    <Text x={from + width / 2} y={5} fill={region.color} verticalAnchor='start' textAnchor='middle'>
-                      {region.label}
-                    </Text>
-                  </Group>
-                )
-              })
-            : ''}
           {/* Y axis */}
           {!['Spark Line', 'Forest Plot'].includes(visualizationType) && (
             <AxisLeft scale={yScale} tickLength={config.useLogScale ? 6 : 8} left={Number(runtime.yAxis.size) - config.yAxis.axisPadding} label={runtime.yAxis.label} stroke='#333' tickFormat={(tick, i) => handleLeftTickFormatting(tick, i)} numTicks={handleNumTicks()}>
@@ -422,8 +411,11 @@ const LinearChart = props => {
                   }
                 })
 
-                dynamicMarginTop = areTicksTouching && config.isResponsiveTicks ? tickWidthMax + defaultTickLength + marginTop : 0
+                const dynamicMarginTop = areTicksTouching && config.isResponsiveTicks ? tickWidthMax + defaultTickLength + 20 : 0
+                const rotation = Number(config.xAxis.tickRotation) > 0 ? Number(config.xAxis.tickRotation) : 0
+
                 config.dynamicMarginTop = dynamicMarginTop
+                config.xAxis.tickWidthMax = tickWidthMax
 
                 return (
                   <Group className='bottom-axis'>
@@ -463,7 +455,21 @@ const LinearChart = props => {
                       )
                     })}
                     {!config.xAxis.hideAxis && <Line from={props.axisFromPoint} to={props.axisToPoint} stroke='#333' />}
-                    <Text x={axisCenter} y={config.orientation === 'horizontal' ? dynamicMarginTop || config.xAxis.labelOffset : dynamicMarginTop || config.xAxis.size} textAnchor='middle' fontWeight='bold' fill={config.xAxis.labelColor}>
+                    <Text
+                      x={axisCenter}
+                      y={
+                        config.orientation === 'horizontal'
+                          ? dynamicMarginTop || config.xAxis.labelOffset
+                          : config.isResponsiveTicks && dynamicMarginTop && !isHorizontal
+                          ? dynamicMarginTop
+                          : Number(rotation) && !config.isResponsiveTicks && !isHorizontal
+                          ? Number(rotation + tickWidthMax / 1.3)
+                          : Number(config.xAxis.labelOffset)
+                      }
+                      textAnchor='middle'
+                      fontWeight='bold'
+                      fill={config.xAxis.labelColor}
+                    >
                       {props.label}
                     </Text>
                   </Group>
@@ -537,7 +543,7 @@ const LinearChart = props => {
               </AxisBottom>
             </>
           )}
-          {visualizationType === 'Deviation Bar' && <DeviationBar animatedChart={animatedChart} xScale={xScale} yScale={yScale} width={xMax} height={yMax} />}
+          {visualizationType === 'Deviation Bar' && config.series?.length === 1 && <DeviationBar animatedChart={animatedChart} xScale={xScale} yScale={yScale} width={xMax} height={yMax} />}
           {visualizationType === 'Paired Bar' && <PairedBarChart originalWidth={width} width={xMax} height={yMax} />}
           {visualizationType === 'Scatter Plot' && (
             <ScatterPlot
@@ -641,6 +647,8 @@ const LinearChart = props => {
               config={config}
             />
           )}
+          {/*Zoom Brush */}
+          {['Line', 'Bar', 'Combo', 'Area Chart'].includes(config.visualizationType) && !isHorizontal && <ZoomBrush xScaleBrush={xScaleBrush} yScale={yScale} xMax={xMax} yMax={yMax} />}
           {/* Line chart */}
           {/* TODO: Make this just line or combo? */}
           {visualizationType !== 'Bar' && visualizationType !== 'Paired Bar' && visualizationType !== 'Box Plot' && visualizationType !== 'Area Chart' && visualizationType !== 'Scatter Plot' && visualizationType !== 'Deviation Bar' && visualizationType !== 'Forecasting' && (
@@ -699,6 +707,49 @@ const LinearChart = props => {
               />
               )
             })}
+          {/* we are handling regions in bar charts differently, so that we can calculate the bar group into the region space. */}
+          {config.regions && config.visualizationType !== 'Bar' && config.orientation === 'vertical'
+            ? config.regions.map(region => {
+                if (!Object.keys(region).includes('from') || !Object.keys(region).includes('to')) return null
+
+                let from
+                let to
+                let width
+
+                if (config.xAxis.type === 'date') {
+                  from = xScale(parseDate(region.from).getTime())
+                  to = xScale(parseDate(region.to).getTime())
+                  width = to - from
+                }
+
+                if (config.xAxis.type === 'categorical') {
+                  from = xScale(region.from)
+                  to = xScale(region.to)
+                  width = to - from
+                }
+
+                if (!from) return null
+                if (!to) return null
+
+                return (
+                  <Group className='regions' left={Number(runtime.yAxis.size)} key={region.label} onMouseMove={handleTooltipMouseOver} onMouseLeave={handleTooltipMouseOff} handleTooltipClick={handleTooltipClick} tooltipData={JSON.stringify(tooltipData)} showTooltip={showTooltip}>
+                    <path
+                      stroke='#333'
+                      d={`M${from} -5
+                          L${from} 5
+                          M${from} 0
+                          L${to} 0
+                          M${to} -5
+                          L${to} 5`}
+                    />
+                    <rect x={from} y={0} width={width} height={yMax} fill={region.background} opacity={0.3} />
+                    <Text x={from + width / 2} y={5} fill={region.color} verticalAnchor='start' textAnchor='middle'>
+                      {region.label}
+                    </Text>
+                  </Group>
+                )
+              })
+            : ''}
           {chartHasTooltipGuides && showTooltip && tooltipData && config.visual.verticalHoverLine && (
             <Group key='tooltipLine-vertical' className='vertical-tooltip-line'>
               <Line from={{ x: tooltipData.dataXPosition - 10, y: 0 }} to={{ x: tooltipData.dataXPosition - 10, y: yMax }} stroke={'black'} strokeWidth={1} pointerEvents='none' strokeDasharray='5,5' className='vertical-tooltip-line' />
@@ -714,8 +765,18 @@ const LinearChart = props => {
               {config.chartMessage.noData}
             </Text>
           )}
+          {config.visualizationType === 'Bar' && config.tooltips.singleSeries && config.visual.horizontalHoverLine && (
+            <Group key='tooltipLine-horizontal' className='horizontal-tooltip-line' left={config.yAxis.size ? config.yAxis.size : 0}>
+              <Line from={{ x: 0, y: point.y }} to={{ x: xMax, y: point.y }} stroke={'black'} strokeWidth={1} pointerEvents='none' strokeDasharray='5,5' className='horizontal-tooltip-line' />
+            </Group>
+          )}
+          {config.visualizationType === 'Bar' && config.tooltips.singleSeries && config.visual.verticalHoverLine && (
+            <Group key='tooltipLine-vertical' className='vertical-tooltip-line'>
+              <Line from={{ x: point.x, y: 0 }} to={{ x: point.x, y: yMax }} stroke={'black'} strokeWidth={1} pointerEvents='none' strokeDasharray='5,5' className='vertical-tooltip-line' />
+            </Group>
+          )}
         </svg>
-        {tooltipData && Object.entries(tooltipData.data).length > 0 && tooltipOpen && showTooltip && tooltipData.dataYPosition && tooltipData.dataXPosition && (
+        {tooltipData && Object.entries(tooltipData.data).length > 0 && tooltipOpen && showTooltip && tooltipData.dataYPosition && tooltipData.dataXPosition && !config.tooltips.singleSeries && (
           <>
             <style>{`.tooltip {background-color: rgba(255,255,255, ${config.tooltips.opacity / 100}) !important`}</style>
             <TooltipWithBounds key={Math.random()} className={'tooltip cdc-open-viz-module'} left={tooltipLeft} top={tooltipTop}>
@@ -723,9 +784,8 @@ const LinearChart = props => {
             </TooltipWithBounds>
           </>
         )}
-        {(config.orientation === 'horizontal' || config.visualizationType === 'Scatter Plot' || config.visualizationType === 'Box Plot') && (
-          <ReactTooltip id={`cdc-open-viz-tooltip-${runtime.uniqueId}`} variant='light' arrowColor='rgba(0,0,0,0)' className='tooltip' style={{ background: `rgba(255,255,255, ${config.tooltips.opacity / 100})`, color: 'black' }} />
-        )}
+
+        {visSupportsReactTooltip() && <ReactTooltip id={`cdc-open-viz-tooltip-${runtime.uniqueId}`} variant='light' arrowColor='rgba(0,0,0,0)' className='tooltip' style={{ background: `rgba(255,255,255, ${config.tooltips.opacity / 100})`, color: 'black' }} />}
         <div className='animation-trigger' ref={triggerRef} />
       </div>
     </ErrorBoundary>

package/src/components/PairedBarChart.jsx

@@ -47,11 +47,11 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
   // Set label color
   let labelColor = '#000000'
 
-  if (chroma.contrast(labelColor, groupOne.color) < 4.9) {
+  if (groupOne.color && chroma.contrast(labelColor, groupOne.color) < 4.9) {
     groupOne.labelColor = '#FFFFFF'
   }
 
-  if (chroma.contrast(labelColor, groupTwo.color) < 4.9) {
+  if (groupTwo.color && chroma.contrast(labelColor, groupTwo.color) < 4.9) {
     groupTwo.labelColor = '#FFFFFF'
   }
 

package/src/components/Series.jsx

@@ -16,7 +16,7 @@ import { colorPalettesChart, sequentialPalettes } from '@cdc/core/data/colorPale
 const SeriesContext = React.createContext()
 
 const SeriesWrapper = props => {
-  const { updateConfig, config } = useContext(ConfigContext)
+  const { updateConfig, config, rawData } = useContext(ConfigContext)
 
   const { getColumns, selectComponent } = props
 
@@ -26,6 +26,26 @@ const SeriesWrapper = props => {
     let series = [...config.series]
     series[index][property] = value
 
+    // Reset bars to the left axis if changed.
+    if (property === 'type') {
+      if (value === 'Bar') {
+        series[index].axis = 'Left'
+      }
+    }
+
+    // dynamically add in the forecasting fields
+    if (series[index].type === 'Forecasting') {
+      let forecastingStages = Array.from(new Set(rawData.map(item => item[series[index].dataKey])))
+      let forecastingStageArr = []
+
+      forecastingStages.forEach(stage => {
+        forecastingStageArr.push({ key: stage })
+      })
+      // debugger
+      series[index].stages = forecastingStageArr
+      series[index].stageColumn = series[index].dataKey
+    }
+
     updateConfig({ ...config, series })
   }
 
@@ -124,7 +144,6 @@ const SeriesDropdownForecastingStage = props => {
   const { index, series } = props
 
   // Only combo charts are allowed to have different options
-  if (series.type !== 'Forecasting') return
 
   return (
     <InputSelect
@@ -408,7 +427,7 @@ const SeriesDropdownConfidenceInterval = props => {
 const SeriesInputName = props => {
   const { series, index: i } = props
   const { config, updateConfig } = useContext(ConfigContext)
-  const adjustableNameSeriesTypes = ['Bar', 'Line', 'Area Chart']
+  const adjustableNameSeriesTypes = ['Bar', 'Line', 'Area Chart', 'dashed-sm', 'dashed-md', 'dashed-lg']
 
   if (config.visualizationType === 'Combo') return