@cdc/chart 4.24.12 → 4.25.1

package/src/components/EditorPanel/EditorPanel.tsx

@@ -610,7 +610,7 @@ const EditorPanel = () => {
     lineOptions,
     rawData,
     highlight,
-    highlightReset,
+    handleShowAll,
     dimensions
   } = useContext<ChartContext>(ConfigContext)
 
@@ -906,7 +906,7 @@ const EditorPanel = () => {
     return Object.keys(columns)
   }
 
-  const getLegendStyleOptions = (option: 'style' | 'subStyle'): string[] => {
+  const getLegendStyleOptions = (option: 'style' | 'subStyle' | 'shapes'): string[] => {
     const options: string[] = []
 
     switch (option) {
@@ -963,7 +963,7 @@ const EditorPanel = () => {
 
   const convertStateToConfig = () => {
     let strippedState = JSON.parse(JSON.stringify(config))
-    if (false === missingRequiredSections()) {
+    if (false === missingRequiredSections(config)) {
       delete strippedState.newViz
     }
     delete strippedState.runtime
@@ -1631,8 +1631,19 @@ const EditorPanel = () => {
                         value={config.yAxis.label}
                         section='yAxis'
                         fieldName='label'
-                        label='Label '
+                        label='Label'
                         updateField={updateField}
+                        maxLength={35}
+                        tooltip={
+                          <Tooltip style={{ textTransform: 'none' }}>
+                            <Tooltip.Target>
+                              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                            </Tooltip.Target>
+                            <Tooltip.Content>
+                              <p>35 character limit</p>
+                            </Tooltip.Content>
+                          </Tooltip>
+                        }
                       />
                       {config.runtime.seriesKeys &&
                         config.runtime.seriesKeys.length === 1 &&
@@ -2306,6 +2317,17 @@ const EditorPanel = () => {
                     fieldName='rightLabel'
                     label='Label'
                     updateField={updateField}
+                    maxLength={35}
+                    tooltip={
+                      <Tooltip style={{ textTransform: 'none' }}>
+                        <Tooltip.Target>
+                          <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>35 character limit</p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    }
                   />
                   <TextField
                     value={config.yAxis.rightNumTicks}
@@ -2596,6 +2618,17 @@ const EditorPanel = () => {
                         fieldName='label'
                         label='Label'
                         updateField={updateField}
+                        maxLength={35}
+                        tooltip={
+                          <Tooltip style={{ textTransform: 'none' }}>
+                            <Tooltip.Target>
+                              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                            </Tooltip.Target>
+                            <Tooltip.Content>
+                              <p>35 character limit</p>
+                            </Tooltip.Content>
+                          </Tooltip>
+                        }
                       />
 
                       {config.xAxis.type === 'continuous' && (
@@ -3658,6 +3691,27 @@ const EditorPanel = () => {
                     updateField={updateField}
                     options={getLegendStyleOptions('style')}
                   />
+                  <CheckBox
+                    tooltip={
+                      <Tooltip style={{ textTransform: 'none' }}>
+                        <Tooltip.Target>
+                          <Icon
+                            display='question'
+                            style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
+                          />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>Choose option Shapes in Line Datapoint Symbols to display.</p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    }
+                    display={!config.legend.hide && config.legend.style === 'lines'}
+                    value={config.legend.hasShape}
+                    section='legend'
+                    fieldName='hasShape'
+                    label='Shapes'
+                    updateField={updateField}
+                  />
 
                   <Select
                     display={!config.legend.hide && config.legend.style === 'gradient'}
@@ -3797,7 +3851,7 @@ const EditorPanel = () => {
                                 updatedSeriesHighlight.splice(i, 1)
                                 updateField('legend', null, 'seriesHighlight', updatedSeriesHighlight)
                                 if (!updatedSeriesHighlight.length) {
-                                  highlightReset()
+                                  handleShowAll()
                                 }
                               }}
                             >
@@ -3887,7 +3941,9 @@ const EditorPanel = () => {
                     display={
                       ['bottom', 'top'].includes(config.legend.position) &&
                       !config.legend.hide &&
-                      config.legend.style !== 'gradient'
+                      config.legend.style !== 'gradient' &&
+                      !config.legend.singleRow &&
+                      !config.legend.singleRow
                     }
                     value={config.legend.verticalSorted}
                     section='legend'

package/src/components/EditorPanel/components/Panels/Panel.General.tsx

@@ -209,6 +209,10 @@ const PanelGeneral: FC<PanelProps> = props => {
                     <Icon display='question' style={{ marginLeft: '0.5rem' }} />
                   </Tooltip.Target>
                   <Tooltip.Content>
+                    <p>
+                      Recommended set to display for Section 508 compliance.
+                    </p>
+                    <hr/>
                     <p>
                       Selecting this option will <i> not </i> hide the display of "zero value", "suppressed data", or
                       "missing data" indicators on the chart (if applicable).

package/src/components/EditorPanel/components/Panels/Panel.Visual.tsx

@@ -136,15 +136,23 @@ const PanelVisual: FC<PanelProps> = props => {
             />
           </fieldset>
         )}
-        <Select
-          value={config.fontSize}
-          fieldName='fontSize'
-          label='Font Size'
-          updateField={updateField}
-          options={['small', 'medium', 'large']}
-        />
         {visHasBarBorders() && (
           <Select
+            tooltip={
+              <Tooltip style={{ textTransform: 'none' }}>
+                <Tooltip.Target>
+                  <Icon
+                    display='question'
+                    style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
+                  />
+                </Tooltip.Target>
+                <Tooltip.Content>
+                  <p>
+                  Recommended set to display for Section 508 compliance.
+                  </p>
+                </Tooltip.Content>
+              </Tooltip>
+            }
             value={config.barHasBorder}
             fieldName='barHasBorder'
             label='Bar Borders'
@@ -171,6 +179,35 @@ const PanelVisual: FC<PanelProps> = props => {
           config.visualizationType === 'Combo') ||
           config.visualizationType === 'Line') && (
           <>
+            <Select
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon
+                      display='question'
+                      style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
+                    />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>
+                      Shapes will appear in the following order: circle, square, triangle, diamond, and inverted
+                      triangle. Use with a maximum of 5 data points.
+                    </p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+              value={config.visual.lineDatapointSymbol}
+              section='visual'
+              fieldName='lineDatapointSymbol'
+              label='Line Datapoint Symbols'
+              updateField={updateField}
+              options={['none', 'standard']}
+            />
+            {config.series.length > config.visual.maximumShapeAmount &&
+              config.visual.lineDatapointSymbol === 'standard' && (
+                <small className='text-danger'>Standard only supports up to 7 data points</small>
+              )}
+
             <Select
               value={config.lineDatapointStyle}
               fieldName='lineDatapointStyle'

package/src/components/ForestPlot/ForestPlot.tsx

@@ -14,9 +14,18 @@ import { type ChartContext } from '@cdc/chart/src/types/ChartContext'
 
 // cdc
 import ConfigContext from '../../ConfigContext'
-import { getFontSize } from '@cdc/core/helpers/cove/number'
-
-const ForestPlot = ({ xScale, yScale, config, height, width, handleTooltipMouseOff, handleTooltipMouseOver, forestPlotRightLabelRef }: ForestPlotProps) => {
+import { appFontSize } from '@cdc/core/helpers/cove/fontSettings'
+
+const ForestPlot = ({
+  xScale,
+  yScale,
+  config,
+  height,
+  width,
+  handleTooltipMouseOff,
+  handleTooltipMouseOver,
+  forestPlotRightLabelRef
+}: ForestPlotProps) => {
   const { rawData: data, updateConfig } = useContext<ChartContext>(ConfigContext)
   const { forestPlot } = config as ChartConfig
   const labelPosition = config.xAxis.tickWidthMax + 10
@@ -33,7 +42,10 @@ const ForestPlot = ({ xScale, yScale, config, height, width, handleTooltipMouseO
       const colsToCheck = 10
       for (let i = 0; i < colsToCheck; i++) {
         defaultColumns.forEach(col => {
-          if (config.forestPlot[col] && config.forestPlot[col] !== newConfig.columns[config.forestPlot[`additionalColumn${i}`]]?.name) {
+          if (
+            config.forestPlot[col] &&
+            config.forestPlot[col] !== newConfig.columns[config.forestPlot[`additionalColumn${i}`]]?.name
+          ) {
             delete newConfig.columns[`additionalColumn${i}`] // Remove old value if found to prevent duplicates
             newConfig.columns[config.forestPlot[col]] = {}
             newConfig.columns[config.forestPlot[col]].dataKey = newConfig.forestPlot[col]
@@ -83,9 +95,15 @@ const ForestPlot = ({ xScale, yScale, config, height, width, handleTooltipMouseO
   const regressionPoints = pooledData
     ? [
         { x: xScale(pooledData[config.forestPlot.lower]), y: height - Number(config.forestPlot.rowHeight) },
-        { x: xScale(pooledData[config.forestPlot.estimateField]), y: height - forestPlot.pooledResult.diamondHeight - Number(config.forestPlot.rowHeight) },
+        {
+          x: xScale(pooledData[config.forestPlot.estimateField]),
+          y: height - forestPlot.pooledResult.diamondHeight - Number(config.forestPlot.rowHeight)
+        },
         { x: xScale(pooledData[config.forestPlot.upper]), y: height - Number(config.forestPlot.rowHeight) },
-        { x: xScale(pooledData[config.forestPlot.estimateField]), y: height + forestPlot.pooledResult.diamondHeight - Number(config.forestPlot.rowHeight) },
+        {
+          x: xScale(pooledData[config.forestPlot.estimateField]),
+          y: height + forestPlot.pooledResult.diamondHeight - Number(config.forestPlot.rowHeight)
+        },
         { x: xScale(pooledData[config.forestPlot.lower]), y: height - Number(config.forestPlot.rowHeight) }
       ]
     : []
@@ -114,16 +132,37 @@ const ForestPlot = ({ xScale, yScale, config, height, width, handleTooltipMouseO
     <>
       <Group width={width}>
         {forestPlot.title && (
-          <Text className={`forest-plot--title`} x={forestPlot.type === 'Linear' ? xScale(0) : xScale(1)} y={0} textAnchor='middle' verticalAnchor='start' fontSize={getFontSize(config.fontSize)} fill={'black'}>
+          <Text
+            className={`forest-plot--title`}
+            x={forestPlot.type === 'Linear' ? xScale(0) : xScale(1)}
+            y={0}
+            textAnchor='middle'
+            verticalAnchor='start'
+            fill={'black'}
+          >
             {forestPlot.title}
           </Text>
         )}
 
         {/* Line of no effect on Continuous Scale. */}
-        {forestPlot.lineOfNoEffect.show && forestPlot.type === 'Linear' && <Line from={{ x: xScale(0), y: 0 + topMarginOffset }} to={{ x: xScale(0), y: height }} className='forestplot__line-of-no-effect' stroke={forestPlot.regression.baseLineColor || 'black'} />}
+        {forestPlot.lineOfNoEffect.show && forestPlot.type === 'Linear' && (
+          <Line
+            from={{ x: xScale(0), y: 0 + topMarginOffset }}
+            to={{ x: xScale(0), y: height }}
+            className='forestplot__line-of-no-effect'
+            stroke={forestPlot.regression.baseLineColor || 'black'}
+          />
+        )}
 
         {/* Line of no effect on Logarithmic Scale. */}
-        {forestPlot.lineOfNoEffect.show && forestPlot.type === 'Logarithmic' && <Line from={{ x: xScale(1), y: 0 + topMarginOffset }} to={{ x: xScale(1), y: height }} className='forestplot__line-of-no-effect' stroke={forestPlot.regression.baseLineColor || 'black'} />}
+        {forestPlot.lineOfNoEffect.show && forestPlot.type === 'Logarithmic' && (
+          <Line
+            from={{ x: xScale(1), y: 0 + topMarginOffset }}
+            to={{ x: xScale(1), y: height }}
+            className='forestplot__line-of-no-effect'
+            stroke={forestPlot.regression.baseLineColor || 'black'}
+          />
+        )}
 
         {data.map((d, i) => {
           // calculate both square and circle size based on radius.min and radius.max
@@ -133,7 +172,8 @@ const ForestPlot = ({ xScale, yScale, config, height, width, handleTooltipMouseO
           })
 
           // glyph settings
-          const rectSize = forestPlot.radius.scalingColumn !== '' ? scaleRadius(data[i][forestPlot.radius.scalingColumn]) : 4
+          const rectSize =
+            forestPlot.radius.scalingColumn !== '' ? scaleRadius(data[i][forestPlot.radius.scalingColumn]) : 4
           const shapeColor = forestPlot.colors.shape ? forestPlot.colors.shape : 'black'
           const lineColor = forestPlot.colors.line ? forestPlot.colors.line : 'black'
 
@@ -167,41 +207,124 @@ const ForestPlot = ({ xScale, yScale, config, height, width, handleTooltipMouseO
               />
 
               {/* main line */}
-              <line stroke={lineColor} className={`line-${d[config.yAxis.dataKey]}`} key={i} x1={xScale(d[forestPlot.lower])} x2={xScale(d[forestPlot.upper])} y1={yScale(i)} y2={yScale(i)} />
+              <line
+                stroke={lineColor}
+                className={`line-${d[config.yAxis.dataKey]}`}
+                key={i}
+                x1={xScale(d[forestPlot.lower])}
+                x2={xScale(d[forestPlot.upper])}
+                y1={yScale(i)}
+                y2={yScale(i)}
+              />
               {forestPlot.shape === 'circle' && (
-                <Circle className='forest-plot--circle' cx={xScale(Number(d[forestPlot.estimateField]))} cy={yScale(i)} r={forestPlot.radius.scalingColumn !== '' ? scaleRadius(data[i][forestPlot.radius.scalingColumn]) : 4} fill={shapeColor} style={{ opacity: 1, filter: 'unset' }} />
+                <Circle
+                  className='forest-plot--circle'
+                  cx={xScale(Number(d[forestPlot.estimateField]))}
+                  cy={yScale(i)}
+                  r={forestPlot.radius.scalingColumn !== '' ? scaleRadius(data[i][forestPlot.radius.scalingColumn]) : 4}
+                  fill={shapeColor}
+                  style={{ opacity: 1, filter: 'unset' }}
+                />
+              )}
+              {forestPlot.shape === 'square' && (
+                <rect
+                  className='forest-plot--square'
+                  x={xScale(Number(d[forestPlot.estimateField]))}
+                  y={yScale(i) - rectSize / 2}
+                  width={rectSize}
+                  height={rectSize}
+                  fill={shapeColor}
+                  style={{ opacity: 1, filter: 'unset' }}
+                />
               )}
-              {forestPlot.shape === 'square' && <rect className='forest-plot--square' x={xScale(Number(d[forestPlot.estimateField]))} y={yScale(i) - rectSize / 2} width={rectSize} height={rectSize} fill={shapeColor} style={{ opacity: 1, filter: 'unset' }} />}
               {forestPlot.shape === 'text' && (
-                <Text className='forest-plot--text' x={xScale(Number(d[forestPlot.estimateField]))} y={yScale(i)} textAnchor='middle' verticalAnchor='middle' fontSize={getFontSize(config.fontSize)} fill={shapeColor}>
+                <Text
+                  className='forest-plot--text'
+                  x={xScale(Number(d[forestPlot.estimateField]))}
+                  y={yScale(i)}
+                  textAnchor='middle'
+                  verticalAnchor='middle'
+                  fill={shapeColor}
+                >
                   {d[forestPlot.estimateField]}
                 </Text>
               )}
             </Group>
           ) : (
-            <LinePath data={regressionPoints} x={d => d.x} y={d => d.y - getFontSize(config.fontSize) / 2} stroke='black' strokeWidth={2} fill={'black'} curve={curveLinearClosed} />
+            <LinePath
+              data={regressionPoints}
+              x={d => d.x}
+              y={d => d.y - appFontSize / 2}
+              stroke='black'
+              strokeWidth={2}
+              fill={'black'}
+              curve={curveLinearClosed}
+            />
           )
         })}
 
         {/* regression diamond */}
-        {regressionPoints && forestPlot.regression.showDiamond && <LinePath data={regressionPoints} x={d => d.x} y={d => d.y} stroke='black' strokeWidth={2} fill={forestPlot.regression.baseLineColor} curve={curveLinearClosed} />}
+        {regressionPoints && forestPlot.regression.showDiamond && (
+          <LinePath
+            data={regressionPoints}
+            x={d => d.x}
+            y={d => d.y}
+            stroke='black'
+            strokeWidth={2}
+            fill={forestPlot.regression.baseLineColor}
+            curve={curveLinearClosed}
+          />
+        )}
         {/* regression text */}
         {forestPlot.regression.description && (
-          <Text x={0 - Number(config.xAxis.size)} width={width} y={height - config.forestPlot.rowHeight - Number(forestPlot.rowHeight) / 3} verticalAnchor='start' textAnchor='start' style={{ fontWeight: 'bold', fontSize: 12 }}>
+          <Text
+            x={0 - Number(config.xAxis.size)}
+            width={width}
+            y={height - config.forestPlot.rowHeight - Number(forestPlot.rowHeight) / 3}
+            verticalAnchor='start'
+            textAnchor='start'
+            style={{ fontWeight: 'bold', fontSize: 12 }}
+          >
             {forestPlot.regression.description}
           </Text>
         )}
 
-        <Bar key='forest-plot-tooltip-area' className='forest-plot-tooltip-area' width={width} height={height} fill={false ? 'red' : 'transparent'} fillOpacity={0.5} onMouseMove={e => handleTooltipMouseOver(e, data)} onMouseOut={handleTooltipMouseOff} />
+        <Bar
+          key='forest-plot-tooltip-area'
+          className='forest-plot-tooltip-area'
+          width={width}
+          height={height}
+          fill={false ? 'red' : 'transparent'}
+          fillOpacity={0.5}
+          onMouseMove={e => handleTooltipMouseOver(e, data)}
+          onMouseOut={handleTooltipMouseOff}
+        />
       </Group>
-      <Line from={topLine[0]} to={topLine[1]} style={{ stroke: 'black', strokeWidth: 2 }} className='forestplot__top-line' />
-      <Line from={bottomLine[0]} to={bottomLine[1]} style={{ stroke: 'black', strokeWidth: 2 }} className='forestplot__bottom-line' />
+      <Line
+        from={topLine[0]}
+        to={topLine[1]}
+        style={{ stroke: 'black', strokeWidth: 2 }}
+        className='forestplot__top-line'
+      />
+      <Line
+        from={bottomLine[0]}
+        to={bottomLine[1]}
+        style={{ stroke: 'black', strokeWidth: 2 }}
+        className='forestplot__bottom-line'
+      />
 
       {/* column data */}
       {columnsOnChart.map(column => {
         return data.map((d, i) => {
           return (
-            <Text className={`${d[column.name]}`} x={column.forestPlotAlignRight ? width : column.forestPlotStartingPoint} y={yScale(i)} textAnchor={column.forestPlotAlignRight ? 'end' : 'start'} verticalAnchor='middle' fontSize={getFontSize(config.fontSize)} fill={'black'}>
+            <Text
+              className={`${d[column.name]}`}
+              x={column.forestPlotAlignRight ? width : column.forestPlotStartingPoint}
+              y={yScale(i)}
+              textAnchor={column.forestPlotAlignRight ? 'end' : 'start'}
+              verticalAnchor='middle'
+              fill={'black'}
+            >
               {d[column.name]}
             </Text>
           )
@@ -212,7 +335,14 @@ const ForestPlot = ({ xScale, yScale, config, height, width, handleTooltipMouseO
       {!forestPlot.hideDateCategoryCol &&
         data.map((d, i) => {
           return (
-            <Text className={`${d[config.xAxis.dataKey]}`} x={0} y={yScale(i)} textAnchor={'start'} verticalAnchor='middle' fontSize={getFontSize(config.fontSize)} fill={'black'}>
+            <Text
+              className={`${d[config.xAxis.dataKey]}`}
+              x={0}
+              y={yScale(i)}
+              textAnchor={'start'}
+              verticalAnchor='middle'
+              fill={'black'}
+            >
               {d[config.xAxis.dataKey]}
             </Text>
           )
@@ -220,7 +350,7 @@ const ForestPlot = ({ xScale, yScale, config, height, width, handleTooltipMouseO
 
       {/* X Axis Datakey Header */}
       {!forestPlot.hideDateCategoryCol && config.xAxis.dataKey && (
-        <Text className={config.xAxis.dataKey} x={0} y={0} textAnchor={'start'} verticalAnchor='start' fontSize={getFontSize(config.fontSize)} fill={'black'}>
+        <Text className={config.xAxis.dataKey} x={0} y={0} textAnchor={'start'} verticalAnchor='start' fill={'black'}>
           {config.xAxis.dataKey}
         </Text>
       )}
@@ -228,7 +358,14 @@ const ForestPlot = ({ xScale, yScale, config, height, width, handleTooltipMouseO
       {/* column headers */}
       {columnsOnChart.map(column => {
         return (
-          <Text className={`${column.label}`} x={column.forestPlotAlignRight ? width : column.forestPlotStartingPoint} y={0} textAnchor={column.forestPlotAlignRight ? 'end' : 'start'} verticalAnchor='start' fontSize={getFontSize(config.fontSize)} fill={'black'}>
+          <Text
+            className={`${column.label}`}
+            x={column.forestPlotAlignRight ? width : column.forestPlotStartingPoint}
+            y={0}
+            textAnchor={column.forestPlotAlignRight ? 'end' : 'start'}
+            verticalAnchor='start'
+            fill={'black'}
+          >
             {column.label}
           </Text>
         )
@@ -236,13 +373,26 @@ const ForestPlot = ({ xScale, yScale, config, height, width, handleTooltipMouseO
 
       {/* left bottom label */}
       {forestPlot.leftLabel && (
-        <Text className='forest-plot__left-label' x={forestPlot.type === 'Linear' ? xScale(0) - 25 : xScale(1) - 25} y={height + labelPosition} textAnchor='end' verticalAnchor='start'>
+        <Text
+          className='forest-plot__left-label'
+          x={forestPlot.type === 'Linear' ? xScale(0) - 25 : xScale(1) - 25}
+          y={height + labelPosition}
+          textAnchor='end'
+          verticalAnchor='start'
+        >
           {forestPlot.leftLabel}
         </Text>
       )}
 
       {forestPlot.rightLabel && (
-        <Text innerRef={forestPlotRightLabelRef} className='forest-plot__right-label' x={forestPlot.type === 'Linear' ? xScale(0) + 25 : xScale(1) + 25} y={height + labelPosition} textAnchor='start' verticalAnchor='start'>
+        <Text
+          innerRef={forestPlotRightLabelRef}
+          className='forest-plot__right-label'
+          x={forestPlot.type === 'Linear' ? xScale(0) + 25 : xScale(1) + 25}
+          y={height + labelPosition}
+          textAnchor='start'
+          verticalAnchor='start'
+        >
           {forestPlot.rightLabel}
         </Text>
       )}

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

@@ -1,23 +1,22 @@
 import parse from 'html-react-parser'
+import React from 'react'
 import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend'
 import LegendShape from '@cdc/core/components/LegendShape'
 import Button from '@cdc/core/components/elements/Button'
 import { getLegendClasses } from './helpers/getLegendClasses'
 import { useHighlightedBars } from '../../hooks/useHighlightedBars'
-import { handleLineType } from '../../helpers/handleLineType'
-
 import { getMarginTop, getGradientConfig, getMarginBottom } from './helpers/index'
-import { Line } from '@visx/shape'
 import { Label } from '../../types/Label'
 import { ChartConfig, ViewportSize } from '../../types/ChartConfig'
 import { ColorScale } from '../../types/ChartContext'
-import { forwardRef, useState } from 'react'
+import { forwardRef } from 'react'
 import LegendSuppression from './Legend.Suppression'
 import LegendGradient from '@cdc/core/components/Legend/Legend.Gradient'
 import { DimensionsType } from '@cdc/core/types/Dimensions'
 import { isLegendWrapViewport } from '@cdc/core/helpers/viewports'
+import LegendLineShape from './LegendLine.Shape'
 
-const LEGEND_PADDING = 30
+const LEGEND_PADDING = 36
 
 export interface LegendProps {
   colorScale: ColorScale
@@ -25,7 +24,7 @@ export interface LegendProps {
   currentViewport: ViewportSize
   formatLabels: (labels: Label[]) => Label[]
   highlight: Function
-  highlightReset: Function
+  handleShowAll: Function
   ref: React.Ref<() => void>
   seriesHighlight: string[]
   skipId: string
@@ -40,7 +39,7 @@ const Legend: React.FC<LegendProps> = forwardRef(
       colorScale,
       seriesHighlight,
       highlight,
-      highlightReset,
+      handleShowAll,
       currentViewport,
       formatLabels,
       skipId = 'legend',
@@ -51,14 +50,13 @@ const Legend: React.FC<LegendProps> = forwardRef(
     const { innerClasses, containerClasses } = getLegendClasses(config)
     const { runtime, legend } = config
 
-    const [hasSuppression, setHasSuppression] = useState(false)
-
-    const isBottomOrSmallViewport =
-      legend?.position === 'bottom' || (isLegendWrapViewport(currentViewport) && !legend.hide)
+    const isLegendBottom =
+      legend?.position === 'bottom' ||
+      (isLegendWrapViewport(currentViewport) && !legend.hide && legend?.position !== 'top')
 
     const legendClasses = {
-      marginBottom: getMarginBottom(config, hasSuppression),
-      marginTop: getMarginTop(isBottomOrSmallViewport, config)
+      marginBottom: getMarginBottom(isLegendBottom, config),
+      marginTop: getMarginTop(isLegendBottom, config)
     }
 
     const { HighLightedBarUtils } = useHighlightedBars(config)
@@ -74,8 +72,12 @@ const Legend: React.FC<LegendProps> = forwardRef(
         aria-label='legend'
         tabIndex={0}
       >
-        {legend.label && <h3>{parse(legend.label)}</h3>}
-        {legend.description && <p>{parse(legend.description)}</p>}
+        {(legend.label || legend.description) && (
+          <div className={legend.description ? 'mb-3' : 'mb-2'}>
+            {legend.label && <h3 className='fw-bold'>{parse(legend.label)}</h3>}
+            {legend.description && <p className='mt-2'>{parse(legend.description)}</p>}
+          </div>
+        )}
         <LegendGradient
           config={config}
           {...getGradientConfig(config, formatLabels, colorScale)}
@@ -106,8 +108,10 @@ const Legend: React.FC<LegendProps> = forwardRef(
                       }
                     }
 
-                    if (seriesHighlight.length > 0 && false === seriesHighlight.includes(itemName)) {
-                      className.push('inactive')
+                    if (seriesHighlight.length) {
+                      if (!seriesHighlight.includes(itemName)) {
+                        className.push('inactive')
+                      } else className.push('highlighted')
                     }
 
                     if (config.legend.style === 'gradient') {
@@ -133,15 +137,9 @@ const Legend: React.FC<LegendProps> = forwardRef(
                       >
                         <>
                           {config.visualizationType === 'Line' && config.legend.style === 'lines' ? (
-                            <svg width={40} height={25}>
-                              <Line
-                                from={{ x: 10, y: 10 }}
-                                to={{ x: 40, y: 10 }}
-                                stroke={label.value}
-                                strokeWidth={2}
-                                strokeDasharray={handleLineType(config.series[i]?.type ? config.series[i]?.type : '')}
-                              />
-                            </svg>
+                            <React.Fragment>
+                              <LegendLineShape index={i} label={label} config={config} />
+                            </React.Fragment>
                           ) : (
                             <>
                               <LegendShape
@@ -151,8 +149,7 @@ const Legend: React.FC<LegendProps> = forwardRef(
                             </>
                           )}
                         </>
-
-                        <LegendLabel align='left' margin='0 0 0 4px'>
+                        <LegendLabel align='left' className='m-0'>
                           {label.text}
                         </LegendLabel>
                       </LegendItem>
@@ -191,26 +188,20 @@ const Legend: React.FC<LegendProps> = forwardRef(
                           fill='transparent'
                           borderColor={bar.color ? bar.color : `rgba(255, 102, 1)`}
                         />{' '}
-                        <LegendLabel align='left' margin='0 0 0 4px'>
-                          {bar.legendLabel ? bar.legendLabel : bar.value}
-                        </LegendLabel>
+                        <LegendLabel align='left'>{bar.legendLabel ? bar.legendLabel : bar.value}</LegendLabel>
                       </LegendItem>
                     )
                   })}
                 </div>
 
-                <LegendSuppression
-                  config={config}
-                  isBottomOrSmallViewport={isBottomOrSmallViewport}
-                  setHasSuppression={setHasSuppression}
-                />
+                <LegendSuppression config={config} isLegendBottom={isLegendBottom} />
               </>
             )
           }}
         </LegendOrdinal>
         {seriesHighlight.length > 0 && (
-          <Button onClick={labels => highlightReset(labels)} style={{ marginTop: '1rem' }}>
-            Reset
+          <Button onClick={labels => handleShowAll(labels)} style={{ marginTop: '1rem' }}>
+            Show All
           </Button>
         )}
       </aside>