@cdc/chart 4.24.3 → 4.24.5

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

@@ -2,76 +2,51 @@ import parse from 'html-react-parser'
 import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend'
 import LegendCircle from '@cdc/core/components/LegendCircle'
 import Button from '@cdc/core/components/elements/Button'
-
 import useLegendClasses from '../../hooks/useLegendClasses'
 import { useHighlightedBars } from '../../hooks/useHighlightedBars'
 import { handleLineType } from '../../helpers/handleLineType'
+import { useBarChart } from '../../hooks/useBarChart'
 import { Line } from '@visx/shape'
-import { scaleOrdinal } from '@visx/scale'
 import { Label } from '../../types/Label'
 import { ChartConfig } from '../../types/ChartConfig'
 import { ColorScale } from '../../types/ChartContext'
-import { Group } from '@visx/group'
 import { forwardRef } from 'react'
 
-interface LegendProps {
-  config: ChartConfig
+export interface LegendProps {
   colorScale: ColorScale
-  seriesHighlight: string[]
+  config: ChartConfig
+  currentViewport: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
+  formatLabels: (labels: Label[]) => Label[]
   highlight: Function
   highlightReset: Function
-  currentViewport: string
-  formatLabels: (labels: Label[]) => Label[]
   ref: React.Ref<() => void>
+  seriesHighlight: string[]
+  skipId: string
 }
 
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
-const Legend: React.FC<LegendProps> = forwardRef(({ config, colorScale, seriesHighlight, highlight, highlightReset, currentViewport, formatLabels }, ref) => {
+const Legend: React.FC<LegendProps> = forwardRef(({ config, colorScale, seriesHighlight, highlight, highlightReset, currentViewport, formatLabels, skipId = 'legend' }, ref) => {
   const { innerClasses, containerClasses } = useLegendClasses(config)
   const { runtime, orientation, legend } = config
-  if (!legend) return null
-  // create fn to reverse labels while legend is Bottom.  Legend-right , legend-left works by default.
-  const displayScale = scaleOrdinal({
-    domain: config.suppressedData?.map(d => d.label),
-    range: ['none'],
-    unknown: 'block'
-  })
-
-  const renderDashes = style => {
-    const dashCount = style === 'Dashed Small' ? 3 : 2
-    const dashClass = `dashes ${style.toLowerCase().replace(' ', '-')}`
-
-    return (
-      <div className={dashClass}>
-        {Array.from({ length: dashCount }, (_, i) => (
-          <span key={i}>-</span>
-        ))}
-      </div>
-    )
-  }
-  const renderDashesOrCircle = style => {
-    if (['Dashed Small', 'Dashed Medium', 'Dashed Large'].includes(style)) {
-      return renderDashes(style)
-    } else if (style === 'Open Circles') {
-      return <div className='dashes open-circles'></div>
-    }
-  }
 
+  if (!legend) return null
   const isBottomOrSmallViewport = legend.position === 'bottom' || ['sm', 'xs', 'xxs'].includes(currentViewport)
 
   const legendClasses = {
     marginBottom: isBottomOrSmallViewport ? '15px' : '0px',
-    marginTop: isBottomOrSmallViewport && orientation === 'horizontal' ? `${config.yAxis.label && config.isResponsiveTicks ? config.dynamicMarginTop : config.runtime.xAxis.size}px` : `${isBottomOrSmallViewport ? config.dynamicMarginTop + 15 : 0}px`
+    marginTop: isBottomOrSmallViewport ? '15px' : '0px'
   }
 
   const { HighLightedBarUtils } = useHighlightedBars(config)
 
   let highLightedLegendItems = HighLightedBarUtils.findDuplicates(config.highlightedBarValues)
+  const fontSize = ['sm', 'xs', 'xxs'].includes(currentViewport) ? { fontSize: '11px' } : null
 
   return (
-    <aside ref={ref} style={legendClasses} id='legend' className={containerClasses.join(' ')} role='region' aria-label='legend' tabIndex={0}>
+    <aside ref={ref} style={legendClasses} id={skipId || 'legend'} className={containerClasses.join(' ')} role='region' aria-label='legend' tabIndex={0}>
       {legend.label && <h3>{parse(legend.label)}</h3>}
-      {legend.description && <p>{parse(legend.description)}</p>}
+      {legend.description && <p style={fontSize}>{parse(legend.description)}</p>}
+
       <LegendOrdinal scale={colorScale} itemDirection='row' labelMargin='0 20px 0 0' shapeMargin='0 10px 0'>
         {labels => {
           return (
@@ -116,18 +91,19 @@ const Legend: React.FC<LegendProps> = forwardRef(({ config, colorScale, seriesHi
                       }}
                       role='button'
                     >
-                      {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>
-                      ) : (
-                        <div style={{ display: 'flex', flexDirection: 'column' }}>
-                          <LegendCircle margin='0' fill={label.value} display={displayScale(label.datum)} />
-                          <div style={{ marginTop: '2px', marginRight: '6px' }}>{label.icon}</div>
-                        </div>
-                      )}
-
-                      <LegendLabel align='left' margin='0 0 0 4px'>
+                      <div>
+                        {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>
+                        ) : (
+                          <div style={{ display: 'flex', flexDirection: 'column' }}>
+                            <LegendCircle viewport={currentViewport} margin='0' fill={label.value} display={true} />
+                          </div>
+                        )}
+                      </div>
+
+                      <LegendLabel style={fontSize} align='left' margin='0 0 0 4px'>
                         {label.text}
                       </LegendLabel>
                     </LegendItem>
@@ -169,19 +145,17 @@ const Legend: React.FC<LegendProps> = forwardRef(({ config, colorScale, seriesHi
               </div>
 
               <>
-                {config?.preliminaryData?.some(pd => pd.label) && ['Line', 'Combo'].includes(config.visualizationType) && (
+                {config?.preliminaryData?.some(pd => pd.label && pd.type === 'effect' && pd.style) && ['Line', 'Combo'].includes(config.visualizationType) && (
                   <>
                     <hr></hr>
                     <div className={config.legend.singleRow && isBottomOrSmallViewport ? 'legend-container__inner bottom single-row' : ''}>
                       {config?.preliminaryData?.map((pd, index) => {
                         return (
                           <>
-                            {pd.label && (
-                              <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
-                                <svg style={{ width: '50px' }} key={index} height={'23px'}>
-                                  {pd.style.includes('Dashed') ? <Line from={{ x: 10, y: 10 }} to={{ x: 40, y: 10 }} stroke={'#000'} strokeWidth={2} strokeDasharray={handleLineType(pd.style)} /> : <circle r={6} strokeWidth={2} stroke={'#000'} cx={22} cy={10} fill='transparent' />}
-                                </svg>
-                                <span> {pd.label}</span>
+                            {pd.label && pd.type === 'effect' && pd.style && (
+                              <div key={index} className='legend-preliminary'>
+                                <span className={pd.symbol}>{pd.lineCode}</span>
+                                <p> {pd.label}</p>
                               </div>
                             )}
                           </>
@@ -190,6 +164,56 @@ const Legend: React.FC<LegendProps> = forwardRef(({ config, colorScale, seriesHi
                     </div>
                   </>
                 )}
+                {!config.legend.hideSuppressedLabels &&
+                  config?.preliminaryData?.some(pd => pd.label && pd.displayLegend && pd.type === 'suppression' && pd.value && (pd?.style || pd.symbol)) &&
+                  ((config.visualizationType === 'Bar' && config.visualizationSubType === 'regular') || config.visualizationType === 'Line' || config.visualizationType === 'Combo') && (
+                    <>
+                      <hr></hr>
+                      <div className={config.legend.singleRow && isBottomOrSmallViewport ? 'legend-container__inner bottom single-row' : ''}>
+                        {config?.preliminaryData?.map(
+                          (pd, index) =>
+                            pd.displayLegend &&
+                            pd.type === 'suppression' && (
+                              <>
+                                {config.visualizationType === 'Bar' && (
+                                  <>
+                                    <div key={index + 'Bar'} className={`legend-preliminary ${pd.symbol}`}>
+                                      <span className={pd.symbol}>{pd.iconCode}</span>
+                                      <p className={pd.type}>{pd.label}</p>
+                                    </div>
+                                  </>
+                                )}
+                                {config.visualizationType === 'Line' && (
+                                  <>
+                                    <div key={index + 'Line'} className={`legend-preliminary `}>
+                                      <span>{pd.lineCode}</span>
+                                      <p className={pd.type}>{pd.label}</p>
+                                    </div>
+                                  </>
+                                )}
+                                {config.visualizationType === 'Combo' && (
+                                  <>
+                                    {pd.symbol && pd.iconCode && (
+                                      <div key={index + 'Combo'} className={`legend-preliminary ${pd.symbol}`}>
+                                        <span className={pd.symbol}>{pd.iconCode}</span>
+                                        <p className={pd.type}>{pd.label}</p>
+                                      </div>
+                                    )}
+
+                                    {pd.style && pd.lineCode && (
+                                      <div key={index + 'Combo'} className='legend-preliminary'>
+                                        <span>{pd.lineCode}</span>
+                                        <p>{pd.label}</p>
+                                      </div>
+                                    )}
+                                  </>
+                                )}
+                              </>
+                            )
+                        )}
+                      </div>
+                    </>
+                  )}
               </>
             </>
           )

package/src/components/Legend/Legend.tsx

@@ -22,7 +22,11 @@ const Legend = forwardRef((props, ref) => {
 
   const createLegendLabels = createFormatLabels(config, tableData, data, colorScale)
 
-  return !['Box Plot', 'Pie'].includes(config.visualizationType) && <LegendComponent ref={ref} config={config} colorScale={colorScale} seriesHighlight={seriesHighlight} highlight={highlight} highlightReset={highlightReset} currentViewport={currentViewport} formatLabels={createLegendLabels} />
+  return (
+    !['Box Plot', 'Pie'].includes(config.visualizationType) && (
+      <LegendComponent ref={ref} skipId={props.skipId || 'legend'} config={config} colorScale={colorScale} seriesHighlight={seriesHighlight} highlight={highlight} highlightReset={highlightReset} currentViewport={currentViewport} formatLabels={createLegendLabels} />
+    )
+  )
 })
 
 export default Legend

package/src/components/LineChart/LineChartProps.ts

@@ -17,12 +17,18 @@ export type LineChartProps = {
 }
 
 export interface PreliminaryDataItem {
-  style: string
-  type: string
   column: string
-  value: string
-  seriesKey: string
+  displayLegend: boolean
+  displayTable: boolean
+  displayTooltip: boolean
+  iconCode: string
   label: string
+  lineCode: string
+  seriesKey: string
+  style: string
+  symbol: string
+  type: 'effect' | 'suppression'
+  value: string
 }
 
 export interface DataItem {
@@ -33,12 +39,13 @@ export interface Config {
   preliminaryData: PreliminaryDataItem[] | []
 }
 export interface StyleProps {
-  preliminaryData: PreliminaryDataItem[]
   data: DataItem[]
-  stroke: string
   handleLineType: Function
   lineType: string
+  preliminaryData: PreliminaryDataItem[]
   seriesKey: 'string'
+  stroke: string
+  strokeWidth: number
 }
 export interface Style {
   stroke: string

package/src/components/LineChart/components/LineChart.Circle.tsx

@@ -7,6 +7,7 @@ type LineChartCircleProps = {
   circleData: object[]
   config: ChartConfig
   data: object[]
+  tableData: object[]
   d?: Object
   displayArea: boolean
   seriesKey: string
@@ -26,7 +27,7 @@ type LineChartCircleProps = {
 }
 
 const LineChartCircle = (props: LineChartCircleProps) => {
-  const { config, d, displayArea, seriesKey, tooltipData, xScale, yScale, colorScale, parseDate, yScaleRight, data, circleData, dataIndex, mode } = props
+  const { config, d, tableData, displayArea, seriesKey, tooltipData, xScale, yScale, colorScale, parseDate, yScaleRight, data, circleData, dataIndex, mode } = props
   const { lineDatapointStyle } = config
   const filtered = config?.series.filter(s => s.dataKey === seriesKey)?.[0]
   // If we're not showing the circle, simply return
@@ -86,7 +87,7 @@ const LineChartCircle = (props: LineChartCircleProps) => {
       let hoveredSeriesAxis = hoveredSeriesData?.[0]?.[2]
       if (!hoveredSeriesKey) return
       hoveredSeriesIndex = tooltipData?.data.indexOf(hoveredSeriesKey)
-      hoveredSeriesValue = data?.find(d => {
+      hoveredSeriesValue = tableData?.find(d => {
         return d[config?.xAxis.dataKey] === hoveredXValue
       })?.[seriesKey]
 
@@ -100,6 +101,7 @@ const LineChartCircle = (props: LineChartCircleProps) => {
         if (isMatch) {
           return <></>
         }
+
         return (
           <circle
             cx={getXPos(hoveredXValue)}
@@ -119,23 +121,32 @@ const LineChartCircle = (props: LineChartCircleProps) => {
   if (mode === 'ISOLATED_POINTS') {
     const drawIsolatedPoints = (currentIndex, seriesKey) => {
       const currentPoint = data[currentIndex]
-      const previousPoint = data[currentIndex - 1]
-      const nextPoint = data[currentIndex + 1]
-      if (currentIndex === 0 && !nextPoint[seriesKey]) {
-        return true
+      const previousPoint = currentIndex > 0 ? data[currentIndex - 1] : null
+      const nextPoint = currentIndex < data.length - 1 ? data[currentIndex + 1] : null
+      let res = false
+
+      // Handle the first point in the array
+      if (currentIndex === 0 && nextPoint && !nextPoint[seriesKey]) {
+        res = true
       }
-      if (currentIndex === data.length - 1 && !previousPoint[seriesKey]) {
-        return true
+      // Handle the last point in the array
+      if (currentIndex === data.length - 1 && previousPoint && !previousPoint[seriesKey]) {
+        res = true
       }
-      if (currentIndex !== 0 && currentPoint[seriesKey] && !previousPoint[seriesKey] && !nextPoint[seriesKey]) {
-        return true
+      // Handle points in the middle
+      if (currentIndex > 0 && currentIndex < data.length - 1) {
+        if (currentPoint && currentPoint[seriesKey] && (!previousPoint || !previousPoint[seriesKey]) && (!nextPoint || !nextPoint[seriesKey])) {
+          res = true
+        }
       }
+
+      return res
     }
 
     if (mode) {
       if (drawIsolatedPoints(dataIndex, seriesKey)) {
         return (
-          <circle cx={getXPos(d[config.xAxis.dataKey])} cy={filtered.axis === 'Right' ? yScaleRight(d[filtered.dataKey]) : yScale(d[filtered.dataKey])} r={5.3} strokeWidth={2} stroke={colorScale(config.runtime.seriesLabels[seriesKey])} fill={colorScale(config.runtime.seriesLabels[seriesKey])} />
+          <circle cx={getXPos(d[config.xAxis?.dataKey])} cy={filtered.axis === 'Right' ? yScaleRight(d[filtered.dataKey]) : yScale(d[filtered?.dataKey])} r={5.3} strokeWidth={2} stroke={colorScale(config.runtime.seriesLabels[seriesKey])} fill={colorScale(config.runtime?.seriesLabels[seriesKey])} />
         )
       }
     }

package/src/components/LineChart/helpers.ts

@@ -1,9 +1,9 @@
 import { type PreliminaryDataItem, DataItem, StyleProps, Style } from './LineChartProps'
-
+import _ from 'lodash'
 export const createStyles = (props: StyleProps): Style[] => {
   const { preliminaryData, data, stroke, strokeWidth, handleLineType, lineType, seriesKey } = props
 
-  const validPreliminaryData: PreliminaryDataItem[] = preliminaryData.filter(pd => pd.seriesKey && pd.column && pd.value && pd.type && pd.style)
+  const validPreliminaryData: PreliminaryDataItem[] = preliminaryData.filter(pd => pd.seriesKey && pd.column && pd.value && pd.type && pd.style && pd.type === 'effect')
   const getMatchingPd = (point: DataItem): PreliminaryDataItem => validPreliminaryData.find(pd => pd.seriesKey === seriesKey && point[pd.column] === pd.value && pd.type === 'effect' && pd.style !== 'Open Circles')
 
   let styles: Style[] = []
@@ -29,17 +29,141 @@ export const createStyles = (props: StyleProps): Style[] => {
 
 export const filterCircles = (preliminaryData: PreliminaryDataItem[], data: DataItem[], seriesKey: string): DataItem[] => {
   // Filter and map preliminaryData to get circlesFiltered
-  const circlesFiltered = preliminaryData.filter(item => item.style === 'Open Circles' && item.type === 'effect').map(item => ({ column: item.column, value: item.value, seriesKey: item.seriesKey }))
-
-  let filteredData: DataItem[] = []
-
+  const circlesFiltered = preliminaryData?.filter(item => item.style === 'Open Circles' && item.type === 'effect').map(item => ({ column: item.column, value: item.value, seriesKey: item.seriesKey }))
+  const filteredData: DataItem[] = []
   // Process data to find matching items
   data.forEach(item => {
-    if (circlesFiltered.some(d => item[d.column] === d.value && d.seriesKey === seriesKey)) {
-      // Add current item
-      filteredData.push(item)
+    circlesFiltered.forEach(fc => {
+      if (item[fc.column] === fc.value && fc.seriesKey === seriesKey) {
+        filteredData.push(item)
+      }
+    })
+  })
+  return filteredData
+}
+
+const isCalculable = value => !isNaN(parseFloat(value)) && isFinite(value)
+const handleFirstIndex = (data, seriesKey, preliminaryData) => {
+  const result = {
+    data: [],
+    style: ''
+  }
+
+  // If data is empty, return the empty result
+  if (!data.length) return result
+
+  const firstIndexDataItem = data[0]
+
+  // Function to check if a data item matches the suppression criteria
+  const isSuppressed = pd => {
+    if (pd.type === 'effect') return
+    return pd.type == 'suppression' && pd.value === firstIndexDataItem[seriesKey] && (!pd.column || pd.column === seriesKey)
+  }
+
+  // Find applicable suppression data for the first item
+  const suppressionData = preliminaryData.find(isSuppressed)
+
+  if (suppressionData && suppressionData.style) {
+    // Modify first item and add to result
+    const modifiedItem = { ...firstIndexDataItem, [seriesKey]: 0 }
+    result.data.push(modifiedItem)
+    result.style = suppressionData.style
+
+    // Find the next calculable item index
+    let nextIndex = 1
+    while (nextIndex < data.length && !isCalculable(data[nextIndex][seriesKey])) {
+      nextIndex++
+    }
+    if (nextIndex < data.length) {
+      result.data.push(data[nextIndex])
+    }
+  } else {
+    // If no suppression, just add the first item
+    result.data.push(firstIndexDataItem)
+  }
+
+  return result
+}
+
+const handleLastIndex = (data, seriesKey, preliminaryData) => {
+  const result = {
+    data: [],
+    style: ''
+  }
+  let lastAddedIndex = -1 // Tracks the last index added to the result
+  preliminaryData?.forEach(pd => {
+    if (pd.type === 'effect') return
+    if (data[data.length - 1][seriesKey] === pd.value && pd.style && (!pd.column || pd.column === seriesKey) && pd.type == 'suppression') {
+      const lastIndex = data.length - 1
+      const modifiedItem = { ...data[lastIndex], [seriesKey]: 0 }
+      result.data.push(modifiedItem)
+
+      // Find previous calculable item
+      let prevIndex = lastIndex - 1
+      while (prevIndex >= 0 && !isCalculable(data[prevIndex][seriesKey])) {
+        prevIndex--
+      }
+      if (prevIndex >= 0 && lastAddedIndex !== prevIndex) {
+        result.data.push(data[prevIndex])
+        lastAddedIndex = prevIndex
+      }
+      result.style = pd.style
     }
   })
 
-  return filteredData
+  return result
+}
+
+function handleMiddleIndices(data, seriesKey, dataKey, preliminaryData) {
+  const result = {
+    data: [],
+    style: ''
+  }
+
+  const isValidMiddleIndex = index => index > 0 && index < data.length - 1
+
+  preliminaryData?.forEach(pd => {
+    if (pd.type === 'effect') return
+    const targetValue = pd.value
+
+    // Find all indices
+    const matchingIndices = data.reduce((indices, item, index) => {
+      if (item[seriesKey] === targetValue && isValidMiddleIndex(index) && (!pd.column || pd.column === seriesKey)) {
+        indices.push(index)
+      }
+      return indices
+    }, [])
+
+    // Process each valid index
+    matchingIndices.forEach(i => {
+      result.style = pd.style
+      // Add previous object if calculable
+      if (isCalculable(data[i - 1][seriesKey])) {
+        result.data.push(data[i - 1])
+      }
+
+      // Find and add the next calculable object
+      const nextIndex = data.slice(i + 1).findIndex(item => item[seriesKey] !== targetValue && isCalculable(item[seriesKey]))
+      if (nextIndex !== -1) {
+        result.data.push(data[i + 1 + nextIndex])
+      }
+    })
+  })
+
+  // Deduplicate entries
+  result.data = _.uniqWith(result.data, (a, b) => a[dataKey] === b[dataKey] && a[seriesKey] === b[seriesKey])
+
+  return result
+}
+
+// create segments (array of arrays) for building suppressed Lines
+export const createDataSegments = (data, seriesKey, preliminaryData, dataKey) => {
+  // Process the first index if necessary
+  const firstSegment = handleFirstIndex(data, seriesKey, preliminaryData)
+  // Process the last index if necessary
+  const lastSegment = handleLastIndex(data, seriesKey, preliminaryData)
+  // Process the middle segment
+  const middleSegments = handleMiddleIndices(data, seriesKey, dataKey, preliminaryData)
+  // Combine all segments into a single array
+  return [firstSegment, middleSegments, lastSegment].filter(segment => segment.data.length > 0 && segment.style !== '')
 }