@cdc/chart 4.23.6 → 4.23.7

package/src/components/EditorPanel.jsx

@@ -412,7 +412,18 @@ const EditorPanel = () => {
 
   const addNewSeries = seriesKey => {
     let newSeries = config.series ? [...config.series] : []
-    newSeries.push({ dataKey: seriesKey, type: config.visualizationType })
+    let forecastingStages = Array.from(new Set(data.map(item => item[seriesKey])))
+    let forecastingStageArr = []
+
+    forecastingStages.forEach(stage => {
+      forecastingStageArr.push({ key: stage })
+    })
+
+    if (config.visualizationType === 'Forecasting') {
+      newSeries.push({ dataKey: seriesKey, type: config.visualizationType, stages: forecastingStageArr, stageColumn: seriesKey, axis: 'Left', tooltip: true })
+    } else {
+      newSeries.push({ dataKey: seriesKey, type: config.visualizationType, axis: 'Left', tooltip: true })
+    }
     updateConfig({ ...config, series: newSeries }) // left axis series keys
   }
 
@@ -624,16 +635,6 @@ const EditorPanel = () => {
     })
   }, [config.orientation])
 
-  // Set paired bars to be horizontal, even though that option doesn't display
-  useEffect(() => {
-    if (config.visualizationType === 'Paired Bar') {
-      updateConfig({
-        ...config,
-        orientation: 'horizontal'
-      })
-    }
-  }, []) // eslint-disable-line
-
   useEffect(() => {
     if (config.orientation === 'horizontal') {
       updateConfig({
@@ -643,13 +644,6 @@ const EditorPanel = () => {
     }
   }, [config.isLollipopChart, config.lollipopShape]) // eslint-disable-line
 
-  /// temporary force orientation untill we support Vartical deviaton bar
-  useEffect(() => {
-    if (config.visualizationType === 'Deviation Bar') {
-      updateConfig({ ...config, orientation: 'horizontal' })
-    }
-  }, [config.visualizationType])
-
   const ExclusionsList = useCallback(() => {
     const exclusions = [...config.exclusions.keys]
     return (
@@ -671,8 +665,8 @@ const EditorPanel = () => {
   }, [config]) // eslint-disable-line
 
   const visSupportsTooltipLines = () => {
-    if (config.visualizationType === 'Combo' && config.runtime.forecastingSeriesKeys?.length > 0) return true
-    if (config.visualizationType === 'Forecasting') return true
+    const chartsWithTooltipGuides = ['Combo', 'Forecasting', 'Area Chart', 'Line', 'Bar']
+    if (chartsWithTooltipGuides.includes(config.visualizationType)) return true
     return false
   }
 
@@ -831,7 +825,7 @@ const EditorPanel = () => {
     'Box Plot',
     'Combo',
     'Deviation Bar',
-    // 'Forecasting',
+    'Forecasting',
     'Line',
     'Paired Bar',
     'Pie',
@@ -1345,47 +1339,6 @@ const EditorPanel = () => {
                   <TextField type='text' value={config.boxplot.labels.outliers} fieldName='outliers' section='boxplot' subsection='labels' label='Outliers' updateField={updateField} />
                   {/* values */}
                   <TextField type='text' value={config.boxplot.labels.values} fieldName='values' section='boxplot' subsection='labels' label='Values' updateField={updateField} />
-                  <br />
-                  <h4 style={{ fontSize: '18px' }}>Percentages for Quartiles</h4>
-                  <TextField
-                    type='number'
-                    value={config.boxplot.firstQuartilePercentage ? config.boxplot.firstQuartilePercentage : 25}
-                    fieldName='firstQuartilePercentage'
-                    section='boxplot'
-                    label='Lower Quartile'
-                    max={100}
-                    updateField={updateField}
-                    tooltip={
-                      <Tooltip style={{ textTransform: 'none' }}>
-                        <Tooltip.Target>
-                          <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                        </Tooltip.Target>
-                        <Tooltip.Content>
-                          <p>Represented by bottom line of box. 25% of data are lower.</p>
-                        </Tooltip.Content>
-                      </Tooltip>
-                    }
-                  />
-
-                  <TextField
-                    type='number'
-                    value={config.boxplot.thirdQuartilePercentage ? config.boxplot.thirdQuartilePercentage : 75}
-                    fieldName='thirdQuartilePercentage'
-                    label='Upper Quartile'
-                    section='boxplot'
-                    max={100}
-                    updateField={updateField}
-                    tooltip={
-                      <Tooltip style={{ textTransform: 'none' }}>
-                        <Tooltip.Target>
-                          <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                        </Tooltip.Target>
-                        <Tooltip.Content>
-                          <p>Represented by top line of box. 25% of data are higher.</p>
-                        </Tooltip.Content>
-                      </Tooltip>
-                    }
-                  />
                 </AccordionItemPanel>
               </AccordionItem>
             )}
@@ -1444,10 +1397,35 @@ const EditorPanel = () => {
                         </Tooltip>
                       }
                     />
+                    {config.orientation === 'horizontal' && config.visualizationType !== 'Paired Bar' && <CheckBox value={config.isResponsiveTicks} fieldName='isResponsiveTicks' label='Use Responsive Ticks' updateField={updateField} />}
+                    {(config.orientation === 'vertical' || !config.isResponsiveTicks) && <TextField value={config.yAxis.tickRotation} type='number' min='0' section='yAxis' fieldName='tickRotation' label='Tick rotation (Degrees)' className='number-narrow' updateField={updateField} />}
+                    {config.isResponsiveTicks && config.orientation === 'horizontal' && config.visualizationType !== 'Paired Bar' && (
+                      <TextField
+                        value={config.xAxis.maxTickRotation}
+                        type='number'
+                        min='0'
+                        section='xAxis'
+                        fieldName='maxTickRotation'
+                        label='Max Tick Rotation'
+                        className='number-narrow'
+                        updateField={updateField}
+                        tooltip={
+                          <Tooltip style={{ textTransform: 'none' }}>
+                            <Tooltip.Target>
+                              <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
+                            </Tooltip.Target>
+                            <Tooltip.Content>
+                              <p>Degrees ticks will be rotated if values overlap, especially in smaller viewports.</p>
+                            </Tooltip.Content>
+                          </Tooltip>
+                        }
+                      />
+                    )}
+
                     {/* Hiding this for now, not interested in moving the axis lines away from chart comp. right now. */}
                     {/* <TextField value={config.yAxis.axisPadding} type='number' max={10} min={0} section='yAxis' fieldName='axisPadding' label={'Axis Padding'} className='number-narrow' updateField={updateField} /> */}
                     {config.orientation === 'horizontal' && <TextField value={config.xAxis.labelOffset} section='xAxis' fieldName='labelOffset' label='Label offset' type='number' className='number-narrow' updateField={updateField} />}
-                    {config.orientation !== 'horizontal' && <CheckBox value={config.yAxis.gridLines} section='yAxis' fieldName='gridLines' label='Display Gridlines' updateField={updateField} />}
+                    {config.orientation !== 'horizontal' && <CheckBox value={config.yAxis.gridLines} section='yAxis' fieldName='gridLines' label='Show Gridlines' updateField={updateField} />}
                     <CheckBox value={config.yAxis.enablePadding} section='yAxis' fieldName='enablePadding' label='Add Padding to Value Axis Scale' updateField={updateField} />
                     {config.visualizationSubType === 'regular' && <CheckBox value={config.useLogScale} fieldName='useLogScale' label='use logarithmic scale' updateField={updateField} />}
                   </>
@@ -1524,7 +1502,7 @@ const EditorPanel = () => {
                       <>
                         <TextField value={config.xAxis.target} section='xAxis' fieldName='target' type='number' label='Deviation point' placeholder='Auto' updateField={updateField} />
                         <TextField value={config.xAxis.targetLabel || 'Target'} section='xAxis' fieldName='targetLabel' type='text' label='Deviation point Label' updateField={updateField} />
-                        <CheckBox value={config.xAxis.showTargetLabel} section='xAxis' fieldName='showTargetLabel' label='Display Deviation point label' updateField={updateField} />
+                        <CheckBox value={config.xAxis.showTargetLabel} section='xAxis' fieldName='showTargetLabel' label='Show Deviation point label' updateField={updateField} />
                       </>
                     )}
                   </>
@@ -1546,10 +1524,10 @@ const EditorPanel = () => {
                 {/* start: anchors */}
                 {visHasAnchors() && config.orientation !== 'horizontal' && (
                   <div className='edit-block'>
-                    <h3>Anchors</h3>
+                    <span className='edit-label column-heading'>Anchors</span>
                     <Accordion allowZeroExpanded>
                       {config.yAxis?.anchors?.map((anchor, index) => (
-                        <AccordionItem className='series-item series-item--chart'>
+                        <AccordionItem className='series-item series-item--chart' key={`yaxis-anchors-2-${index}`}>
                           <AccordionItemHeading className='series-item__title'>
                             <>
                               <AccordionItemButton className={'accordion__button accordion__button'}>
@@ -1672,10 +1650,10 @@ const EditorPanel = () => {
 
                 {visHasAnchors() && config.orientation === 'horizontal' && (
                   <div className='edit-block'>
-                    <h3>Anchors</h3>
+                    <span className='edit-label column-heading'>Anchors</span>
                     <Accordion allowZeroExpanded>
                       {config.xAxis?.anchors?.map((anchor, index) => (
-                        <AccordionItem className='series-item series-item--chart'>
+                        <AccordionItem className='series-item series-item--chart' key={`xaxis-anchors-${index}`}>
                           <AccordionItemHeading className='series-item__title'>
                             <>
                               <AccordionItemButton className={'accordion__button accordion__button'}>
@@ -2060,8 +2038,31 @@ const EditorPanel = () => {
                         <TextField value={config.dataFormat.bottomRoundTo} type='number' section='dataFormat' fieldName='bottomRoundTo' label='Round to decimal point' className='number-narrow' updateField={updateField} min={0} />
                       </>
                     )}
+                    {config.orientation === 'vertical' && config.visualizationType !== 'Paired Bar' && <CheckBox value={config.isResponsiveTicks} fieldName='isResponsiveTicks' label='Use Responsive Ticks' updateField={updateField} />}
+                    {(config.orientation === 'horizontal' || !config.isResponsiveTicks) && <TextField value={config.xAxis.tickRotation} type='number' min='0' section='xAxis' fieldName='tickRotation' label='Tick rotation (Degrees)' className='number-narrow' updateField={updateField} />}
+                    {config.orientation === 'vertical' && config.isResponsiveTicks && config.visualizationType !== 'Paired Bar' && (
+                      <TextField
+                        value={config.xAxis.maxTickRotation}
+                        type='number'
+                        min='0'
+                        section='xAxis'
+                        fieldName='maxTickRotation'
+                        label='Max Tick Rotation'
+                        className='number-narrow'
+                        updateField={updateField}
+                        tooltip={
+                          <Tooltip style={{ textTransform: 'none' }}>
+                            <Tooltip.Target>
+                              <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
+                            </Tooltip.Target>
+                            <Tooltip.Content>
+                              <p>Degrees ticks will be rotated if values overlap, especially in smaller viewports.</p>
+                            </Tooltip.Content>
+                          </Tooltip>
+                        }
+                      />
+                    )}
 
-                    {config.yAxis.labelPlacement !== 'Below Bar' && <TextField value={config.xAxis.tickRotation} type='number' min='0' section='xAxis' fieldName='tickRotation' label='Tick rotation (Degrees)' className='number-narrow' updateField={updateField} />}
                     {config.orientation === 'horizontal' ? (
                       <>
                         <CheckBox value={config.yAxis.hideAxis} section='yAxis' fieldName='hideAxis' label='Hide Axis' updateField={updateField} />
@@ -2167,10 +2168,10 @@ const EditorPanel = () => {
                 {/* anchors */}
                 {visHasAnchors() && config.orientation !== 'horizontal' && (
                   <div className='edit-block'>
-                    <h3>Anchors</h3>
+                    <span className='edit-label column-heading'>Anchors</span>
                     <Accordion allowZeroExpanded>
                       {config.xAxis?.anchors?.map((anchor, index) => (
-                        <AccordionItem className='series-item series-item--chart'>
+                        <AccordionItem className='series-item series-item--chart' key={`xaxis-anchors-2-${index}`}>
                           <AccordionItemHeading className='series-item__title'>
                             <>
                               <AccordionItemButton className={'accordion__button accordion__button'}>
@@ -2293,10 +2294,10 @@ const EditorPanel = () => {
 
                 {visHasAnchors() && config.orientation === 'horizontal' && (
                   <div className='edit-block'>
-                    <h3>Anchors</h3>
+                    <span className='edit-label column-heading'>Anchors</span>
                     <Accordion allowZeroExpanded>
                       {config.yAxis?.anchors?.map((anchor, index) => (
-                        <AccordionItem className='series-item series-item--chart'>
+                        <AccordionItem className='series-item series-item--chart' key={`accordion-yaxis-anchors-${index}`}>
                           <AccordionItemHeading className='series-item__title'>
                             <>
                               <AccordionItemButton className={'accordion__button accordion__button'}>
@@ -2483,9 +2484,9 @@ const EditorPanel = () => {
                               <label className='checkbox'>
                                 <input
                                   type='checkbox'
-                                  checked={config.columns[val].useCommas}
+                                  checked={config.columns[val].commas}
                                   onChange={event => {
-                                    editColumn(val, 'useCommas', event.target.checked)
+                                    editColumn(val, 'commas', event.target.checked)
                                   }}
                                 />
                                 <span className='edit-label'>Add Commas to Numbers</span>
@@ -2500,7 +2501,7 @@ const EditorPanel = () => {
                                     editColumn(val, 'dataTable', event.target.checked)
                                   }}
                                 />
-                                <span className='edit-label'>Display in Data Table</span>
+                                <span className='edit-label'>Show in Data Table</span>
                               </label>
                             </li>
                             {/* disable for now */}
@@ -2996,7 +2997,7 @@ const EditorPanel = () => {
 
                 {config.visualizationType === 'Spark Line' && (
                   <div className='cove-accordion__panel-section checkbox-group'>
-                    <CheckBox value={config.visual?.border} section='visual' fieldName='border' label='Display Border' updateField={updateField} />
+                    <CheckBox value={config.visual?.border} section='visual' fieldName='border' label='Show Border' updateField={updateField} />
                     <CheckBox value={config.visual?.borderColorTheme} section='visual' fieldName='borderColorTheme' label='Use Border Color Theme' updateField={updateField} />
                     <CheckBox value={config.visual?.accent} section='visual' fieldName='accent' label='Use Accent Style' updateField={updateField} />
                     <CheckBox value={config.visual?.background} section='visual' fieldName='background' label='Use Theme Background Color' updateField={updateField} />
@@ -3015,6 +3016,25 @@ const EditorPanel = () => {
                     <CheckBox value={config.visual.horizontalHoverLine} fieldName='horizontalHoverLine' section='visual' label='Horizontal Hover Line' updateField={updateField} />
                   </>
                 )}
+
+                {
+                  <label>
+                    <span className='edit-label column-heading'>Tooltip Opacity</span>
+                    <input
+                      type='number'
+                      value={config.tooltips.opacity ? config.tooltips.opacity : 100}
+                      onChange={e =>
+                        updateConfig({
+                          ...config,
+                          tooltips: {
+                            ...config.tooltips,
+                            opacity: e.target.value
+                          }
+                        })
+                      }
+                    />
+                  </label>
+                }
               </AccordionItemPanel>
             </AccordionItem>
             {/* Spark Line has no data table */}

package/src/components/Forecasting.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react'
+import React, { useContext } from 'react'
 
 // cdc
 import ConfigContext from '../ConfigContext'
@@ -6,43 +6,21 @@ import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import { colorPalettesChart } from '@cdc/core/data/colorPalettes'
 
 // visx & d3
-import { useTooltipInPortal, defaultStyles } from '@visx/tooltip'
 import { curveMonotoneX } from '@visx/curve'
-import { Bar, Area, LinePath, Line } from '@visx/shape'
+import { Bar, Area, LinePath } from '@visx/shape'
 import { Group } from '@visx/group'
 
-const Forecasting = ({ xScale, yScale, height, width, chartRef, handleTooltipMouseOver, tooltipData, showTooltip, handleTooltipMouseOff }) => {
-  const { transformedData: data, rawData, config, seriesHighlight, formatNumber } = useContext(ConfigContext)
+const Forecasting = ({ xScale, yScale, height, width, handleTooltipMouseOver, handleTooltipMouseOff }) => {
+  const { transformedData: data, rawData, config, seriesHighlight } = useContext(ConfigContext)
   const { xAxis, yAxis, legend, runtime } = config
   const DEBUG = false
 
-  // sets the portal x/y for where tooltips should appear on the page.
-  const [chartPosition, setChartPosition] = useState(null)
-  useEffect(() => {
-    setChartPosition(chartRef.current.getBoundingClientRect())
-  }, [chartRef])
-
-  // a unique id is needed for tooltips.
-  const tooltip_id = `cdc-open-viz-tooltip-${config.runtime.uniqueId}`
-
-  // it appears we need to use TooltipInPortal.
-  const { TooltipInPortal } = useTooltipInPortal({
-    detectBounds: true,
-    // when tooltip containers are scrolled, this will correctly update the Tooltip position
-    scroll: true
-  })
-
-  const TooltipListItem = ({ item }) => {
-    const [label, value] = item
-    return label === config.xAxis.dataKey ? `${label}: ${value}` : `${label}: ${formatNumber(value, 'left')}`
-  }
-
   return (
     data && (
       <ErrorBoundary component='ForecastingChart'>
-        <Group className='forecasting-items' key='forecasting-items-wrapper' left={yAxis.size}>
+        <Group className='forecasting-items' key='forecasting-items-wrapper' left={Number(yAxis.size)}>
           {runtime.forecastingSeriesKeys?.map((group, index) => {
-            if (!group || !group.stages) return
+            if (!group || !group.stages) return false
             return group.stages.map((stage, stageIndex) => {
               const { behavior } = legend
               const groupData = rawData.filter(d => d[group.stageColumn] === stage.key)
@@ -54,13 +32,24 @@ const Forecasting = ({ xScale, yScale, height, width, chartRef, handleTooltipMou
                   {group.confidenceIntervals?.map((ciGroup, ciGroupIndex) => {
                     const palette = colorPalettesChart[stage.color]
 
+                    const getFill = () => {
+                      if (displayArea) return palette[ciGroupIndex] ? palette[ciGroupIndex] : 'transparent'
+                      return 'transparent'
+                    }
+
+                    const getStroke = () => {
+                      if (displayArea) return palette[2] ? palette[2] : 'transparent'
+                      return 'transparent'
+                    }
+
+                    if (ciGroup.high === '' || ciGroup.low === '') return
                     return (
                       <Group key={`forecasting-areas--stage-${stage.key.replaceAll(' ', '-')}--group-${stageIndex}-${ciGroupIndex}`}>
                         {/* prettier-ignore */}
                         <Area
                           curve={curveMonotoneX}
                           data={groupData}
-                          fill={displayArea ? palette[ciGroupIndex] : 'transparent'}
+                          fill={getFill()}
                           opacity={transparentArea ? 0.1 : 0.5}
                           x={d => xScale(Date.parse(d[xAxis.dataKey]))}
                           y0={d => yScale(d[ciGroup.low])}
@@ -70,26 +59,10 @@ const Forecasting = ({ xScale, yScale, height, width, chartRef, handleTooltipMou
                         {ciGroupIndex === 0 && (
                           <>
                             {/* prettier-ignore */}
-                            <LinePath
-                              data={groupData}
-                              x={ d => xScale(Date.parse(d[xAxis.dataKey])) }
-                              y={ d => yScale(d[ciGroup.high])}
-                              curve={curveMonotoneX}
-                              stroke={displayArea ? palette[2] : 'transparent'}
-                              strokeWidth={1}
-                              strokeOpacity={1}
-                            />
+                            <LinePath data={groupData} x={d => Number(xScale(Date.parse(d[xAxis.dataKey])))} y={d => Number(yScale(d[ciGroup.high]))} curve={curveMonotoneX} stroke={getStroke()} strokeWidth={1} strokeOpacity={1} />
 
                             {/* prettier-ignore */}
-                            <LinePath
-                              data={groupData}
-                              x={ d => xScale(Date.parse(d[xAxis.dataKey])) }
-                              y={ d => yScale(d[ciGroup.low])}
-                              curve={curveMonotoneX}
-                              stroke={displayArea ? palette[2] : 'transparent'}
-                              strokeWidth={1}
-                              strokeOpacity={1}
-                            />
+                            <LinePath data={groupData} x={d => Number(xScale(Date.parse(d[xAxis.dataKey])))} y={d => Number(yScale(d[ciGroup.low]))} curve={curveMonotoneX} stroke={getStroke()} strokeWidth={1} strokeOpacity={1} />
                           </>
                         )}
                       </Group>
@@ -99,46 +72,10 @@ const Forecasting = ({ xScale, yScale, height, width, chartRef, handleTooltipMou
               )
             })
           })}
-
-          {tooltipData && Object.entries(tooltipData.data).length > 0 && config?.runtime?.forecastingSeriesKeys?.length > 0 && (config.visualizationType === 'Combo' || config.visualizationType === 'Forecasting') && (
-            <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' &&
-                  Object.entries(tooltipData.data).map((item, index) => (
-                    <li style={{ padding: '2.5px 0' }} key={`li-${index}`}>
-                      <TooltipListItem item={item} />
-                    </li>
-                  ))}
-              </ul>
-            </TooltipInPortal>
-          )}
-          {config?.runtime?.forecastingSeriesKeys?.length > 0 && (config.visualizationType === 'Combo' || config.visualizationType === 'Forecasting') && (
-            <Group key='tooltip-hover-section'>
-              <Bar key={'bars'} width={Number(width)} height={Number(height)} fill={DEBUG ? 'red' : 'transparent'} fillOpacity={0.05} onMouseMove={e => handleTooltipMouseOver(e, data)} onMouseOut={handleTooltipMouseOff} />
-            </Group>
-          )}
-        </Group>
-
-        {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: height }} stroke={'black'} strokeWidth={1} pointerEvents='none' strokeDasharray='5,5' className='vertical-tooltip-line' />
+          <Group key='tooltip-hover-section'>
+            <Bar key={'bars'} width={Number(width)} height={Number(height)} fill={DEBUG ? 'red' : 'transparent'} fillOpacity={0.05} onMouseMove={e => handleTooltipMouseOver(e, data)} onMouseOut={handleTooltipMouseOff} />
           </Group>
-        )}
-
-        {showTooltip && tooltipData && config.visual.horizontalHoverLine && (
-          <Group key='tooltipLine-horizontal' className='horizontal-tooltip-line' left={config.yAxis.size ? config.yAxis.size : 0}>
-            <Line from={{ x: 0, y: tooltipData.dataYPosition }} to={{ x: width, y: tooltipData.dataYPosition }} stroke={'black'} strokeWidth={1} pointerEvents='none' strokeDasharray='5,5' className='horizontal-tooltip-line' />
-          </Group>
-        )}
+        </Group>
       </ErrorBoundary>
     )
   )

package/src/components/Legend.jsx

@@ -33,6 +33,8 @@ const Legend = () => {
 
   const { innerClasses, containerClasses } = useLegendClasses(config)
   const { visualizationType, visualizationSubType, series, runtime, orientation } = config
+  // create fn to reverse labels while legend is Bottom.  Legend-right , legend-left works by default.
+  const reverseLabels = labels => (config.legend.reverseLabelOrder && config.legend.position === 'bottom' ? labels.reverse() : labels)
 
   const createLegendLabels = defaultLabels => {
     const colorCode = config.legend?.colorCode
@@ -51,7 +53,7 @@ const Legend = () => {
         value: aboveColor
       }
 
-      return [labelBelow, labelAbove]
+      return reverseLabels([labelBelow, labelAbove])
     }
     if (visualizationType === 'Bar' && visualizationSubType === 'regular' && colorCode && series?.length === 1) {
       let palette = colorPalettes[config.palette]
@@ -76,7 +78,7 @@ const Legend = () => {
         return newLabel
       })
 
-      return uniqueLabels
+      return reverseLabels(uniqueLabels)
     }
 
     // get forecasting items inside of combo
@@ -103,7 +105,7 @@ const Legend = () => {
 
       // loop through bars for now to meet requirements.
       config.runtime.barSeriesKeys &&
-        config.runtime.barSeriesKeys.map((bar, index) => {
+        config.runtime.barSeriesKeys.forEach((bar, index) => {
           let colorValue = colorPalettes[config.palette][index] ? colorPalettes[config.palette][index] : '#ccc'
 
           const newLabel = {
@@ -116,7 +118,7 @@ const Legend = () => {
           seriesLabels.push(newLabel)
         })
 
-      return seriesLabels
+      return reverseLabels(seriesLabels)
     }
 
     // DEV-4161: replaceable series name in the legend
@@ -147,17 +149,17 @@ const Legend = () => {
         return newLabel
       })
 
-      return uniqueLabels
+      return reverseLabels(uniqueLabels)
     }
 
-    return defaultLabels
+    return reverseLabels(defaultLabels)
   }
 
-  const isBottomOrSmallViewport = legend.position === 'bottom' || currentViewport === 'sm' || currentViewport === 'xs' || currentViewport === 'xxs'
+  const isBottomOrSmallViewport = legend.position === 'bottom' || ['sm', 'xs', 'xxs'].includes(currentViewport)
 
   const legendClasses = {
     marginBottom: isBottomOrSmallViewport ? '15px' : '0px',
-    marginTop: isBottomOrSmallViewport && orientation === 'horizontal' ? `${config.runtime.xAxis.size}px` : '0px'
+    marginTop: isBottomOrSmallViewport && orientation === 'horizontal' ? `${config.yAxis.label && config.isResponsiveTicks ? config.dynamicMarginTop : config.runtime.xAxis.size}px` : `0px`
   }
 
   const { HighLightedBarUtils } = useHighlightedBars(config)

package/src/components/LineChart.jsx

@@ -2,22 +2,23 @@ import React, { useContext } from 'react'
 
 import * as allCurves from '@visx/curve'
 import { Group } from '@visx/group'
-import { LinePath } from '@visx/shape'
+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'
 
-export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData, xMax, yMax, seriesStyle = 'Line' }) {
-  const { colorPalettes, transformedData: data, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, isNumber, updateConfig, handleLineType } = useContext(ConfigContext)
+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 } = useContext(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)}`
@@ -25,6 +26,7 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
     return `${formatNumber(value, axis)}`
   }
 
+  const DEBUG = false
   return (
     <ErrorBoundary component='LineChart'>
       <Group left={config.runtime.yAxis.size ? parseInt(config.runtime.yAxis.size) : 66}>
@@ -35,6 +37,8 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
           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
+
           return (
             <Group
               key={`series-${seriesKey}`}
@@ -71,7 +75,10 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
                   d[seriesKey] !== '' &&
                   d[seriesKey] !== null &&
                   isNumber(d[seriesKey]) && (
-                    <Group key={`series-${seriesKey}-point-${dataIndex}`}>
+                    <Group key={`series-${seriesKey}-point-${dataIndex}`} className='checkwidth'>
+                      {/* tooltips */}
+                      <Bar key={'bars'} width={Number(xMax)} height={Number(yMax)} fill={DEBUG ? 'red' : 'transparent'} fillOpacity={0.05} onMouseMove={e => handleTooltipMouseOver(e, data)} onMouseOut={handleTooltipMouseOff} onClick={e => handleTooltipClick(e, data)} />
+
                       {/* Render legend */}
                       <Text display={config.labels ? 'block' : 'none'} x={xScale(getXAxisData(d))} y={seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(getYAxisData(d, seriesKey))} fill={'#000'} textAnchor='middle'>
                         {formatNumber(d[seriesKey], 'left')}
@@ -83,10 +90,26 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
                         cx={Number(xScale(getXAxisData(d)))}
                         cy={seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(getYAxisData(d, seriesKey))}
                         fill={colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'}
-                        style={{ fill: colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000' }}
+                        style={{
+                          fill: colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000'
+                        }}
                         data-tooltip-html={tooltip}
                         data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
                       />
+
+                      {/* circles that appear on hover */}
+                      {/* todo: circle radii used here should be global with other circle radii */}
+                      {/* {tooltipData && Object.entries(tooltipData.data).length > 0 && isNumber(tooltipData.data[seriesKey]) && config.lineDatapointStyle === 'hover' && config.series.filter(s => s.type === 'Line') && (
+                        <circle
+                          cx={config.xAxis.type === 'categorical' ? xScale(tooltipData.data[config.xAxis.dataKey]) : xScale(parseDate(tooltipData.data[config.xAxis.dataKey]))}
+                          cy={yScale(tooltipData.data[seriesKey])}
+                          r={4.5}
+                          opacity={tooltipData[seriesKey] ? 1 : 0}
+                          fillOpacity={1}
+                          fill={displayArea ? (colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[seriesKey] : seriesKey) : '#000') : 'transparent'}
+                          style={{ filter: 'unset', opacity: 1 }}
+                        />
+                      )} */}
                     </Group>
                   )
                 )
@@ -161,3 +184,5 @@ export default function LineChart({ xScale, yScale, getXAxisData, getYAxisData,
     </ErrorBoundary>
   )
 }
+
+export default LineChart