@cdc/chart 4.23.7 → 4.23.9

package/src/components/Legend.jsx

@@ -6,6 +6,7 @@ import LegendCircle from '@cdc/core/components/LegendCircle'
 
 import useLegendClasses from './../hooks/useLegendClasses'
 import { useHighlightedBars } from '../hooks/useHighlightedBars'
+import { Line } from '@visx/shape'
 
 // * FILE REVIEW *
 // TODO: fix eslint-disable jsxa11y issues
@@ -28,7 +29,8 @@ const Legend = () => {
     highlightReset,
     transformedData: data,
     colorPalettes,
-    currentViewport
+    currentViewport,
+    handleLineType
   } = useContext(ConfigContext)
 
   const { innerClasses, containerClasses } = useLegendClasses(config)
@@ -165,7 +167,6 @@ const Legend = () => {
   const { HighLightedBarUtils } = useHighlightedBars(config)
 
   let highLightedLegendItems = HighLightedBarUtils.findDuplicates(config.highlightedBarValues)
-
   if (!legend) return null
 
   return (
@@ -213,7 +214,14 @@ const Legend = () => {
                         highlight(label)
                       }}
                     >
-                      <LegendCircle fill={label.value} />
+                      {config.visualizationType === 'Line' && config.legend.lineMode ? (
+                        <svg width={40} height={20}>
+                          <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>
+                      ) : (
+                        <LegendCircle fill={label.value} />
+                      )}
+
                       <LegendLabel align='left' margin='0 0 0 4px'>
                         {label.text}
                       </LegendLabel>

package/src/components/LineChart.jsx

@@ -12,7 +12,7 @@ import useRightAxis from '../hooks/useRightAxis'
 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 { colorPalettes, transformedData: data, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, isNumber, updateConfig, handleLineType, dashboardConfig, tableData } = useContext(ConfigContext)
   const { yScaleRight } = useRightAxis({ config, yMax, data, updateConfig })
 
   if (!handleTooltipMouseOver) return
@@ -77,7 +77,7 @@ const LineChart = ({ xScale, yScale, getXAxisData, getYAxisData, xMax, yMax, han
                   isNumber(d[seriesKey]) && (
                     <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)} />
+                      <Bar key={'bars'} width={Number(xMax)} height={Number(yMax)} fill={DEBUG ? 'red' : 'transparent'} fillOpacity={0.05} onMouseMove={e => handleTooltipMouseOver(e, tableData)} 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'>