@cdc/chart 4.23.11 → 4.24.1

package/src/components/{Legend.jsx → Legend/Legend.tsx}

@@ -1,43 +1,43 @@
-import React, { useContext, useEffect } from 'react'
-import ConfigContext from '../ConfigContext'
+import { useContext } from 'react'
+import ConfigContext from '../../ConfigContext'
 import parse from 'html-react-parser'
 import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend'
 import LegendCircle from '@cdc/core/components/LegendCircle'
 
-import useLegendClasses from './../hooks/useLegendClasses'
-import { useHighlightedBars } from '../hooks/useHighlightedBars'
+import useLegendClasses from '../../hooks/useLegendClasses'
+import { useHighlightedBars } from '../../hooks/useHighlightedBars'
+import { handleLineType } from '../../helpers/handleLineType'
 import { Line } from '@visx/shape'
-import { sequentialPalettes } from '@cdc/core/data/colorPalettes'
+import { colorPalettesChart as colorPalettes, sequentialPalettes, twoColorPalette } from '@cdc/core/data/colorPalettes'
 import { scaleOrdinal } from '@visx/scale'
 import { FaStar } from 'react-icons/fa'
-
-// * FILE REVIEW *
-// TODO: fix eslint-disable jsxa11y issues
-
-// * ADDITIONAL NOTES *
-// > recently removed dynamic legend items as they weren't used
-// > recently removed boxplots, they don't provide any legend settings
+import { Text } from '@visx/text'
+import { Group } from '@visx/group'
+
+type Label = {
+  datum: string
+  index: number
+  text: string
+  value: string
+  icon?: any
+}
 
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
 const Legend = () => {
   // prettier-ignore
   const {
     config,
-    legend,
     colorScale,
     seriesHighlight,
     highlight,
-    twoColorPalette,
     tableData,
     highlightReset,
     transformedData: data,
-    colorPalettes,
-    currentViewport,
-    handleLineType
+    currentViewport
   } = useContext(ConfigContext)
 
   const { innerClasses, containerClasses } = useLegendClasses(config)
-  const { visualizationType, visualizationSubType, series, runtime, orientation } = config
+  const { visualizationType, visualizationSubType, series, runtime, orientation, legend } = 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 displayScale = scaleOrdinal({
@@ -46,7 +46,26 @@ const Legend = () => {
     unknown: 'block'
   })
 
-  const createLegendLabels = defaultLabels => {
+  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>
+    }
+  }
+  const createLegendLabels = (defaultLabels): Label[] => {
     const colorCode = config.legend?.colorCode
     if (visualizationType === 'Deviation Bar') {
       const [belowColor, aboveColor] = twoColorPalette[config.twoColor.palette]
@@ -96,7 +115,6 @@ const Legend = () => {
       let seriesLabels = []
 
       //store unique values to Set by colorCode
-
       // loop through each stage/group/area on the chart and create a label
       config.runtime?.forecastingSeriesKeys?.map((outerGroup, index) => {
         return outerGroup?.stages?.map((stage, index) => {
@@ -166,11 +184,7 @@ const Legend = () => {
       const lastIndex = defaultLabels.length - 1
       let newLabels = []
 
-      config.suppressedData?.forEach(({ label, icon, value }, index) => {
-        const dataExists = data.some(d => {
-          return runtime.seriesKeys.some(column => d[column] === value)
-        })
-
+      config.suppressedData?.forEach(({ label, icon }, index) => {
         if (label && icon) {
           const newLabel = {
             datum: label,
@@ -208,97 +222,120 @@ const Legend = () => {
         <LegendOrdinal scale={colorScale} itemDirection='row' labelMargin='0 20px 0 0' shapeMargin='0 10px 0'>
           {labels => {
             return (
-              <div className={innerClasses.join(' ')}>
-                {createLegendLabels(labels).map((label, i) => {
-                  let className = ['legend-item', `legend-text--${label.text.replace(' ', '').toLowerCase()}`]
-                  let itemName = label.datum
-
-                  // Filter excluded data keys from legend
-                  if (config.exclusions.active && config.exclusions.keys?.includes(itemName)) {
-                    return null
-                  }
-
-                  if (runtime.seriesLabels) {
-                    let index = config.runtime.seriesLabelsAll.indexOf(itemName)
-                    itemName = config.runtime.seriesKeys[index]
-
-                    if (runtime?.forecastingSeriesKeys?.length > 0) {
-                      itemName = label.text
+              <>
+                <div className={innerClasses.join(' ')}>
+                  {createLegendLabels(labels).map((label, i) => {
+                    let className = ['legend-item', `legend-text--${label.text.replace(' ', '').toLowerCase()}`]
+                    let itemName = label.datum
+
+                    // Filter excluded data keys from legend
+                    if (config.exclusions.active && config.exclusions.keys?.includes(itemName)) {
+                      return null
+                    }
+
+                    if (runtime.seriesLabels) {
+                      let index = config.runtime.seriesLabelsAll.indexOf(itemName)
+                      itemName = config.runtime.seriesKeys[index]
+
+                      if (runtime?.forecastingSeriesKeys?.length > 0) {
+                        itemName = label.text
+                      }
                     }
-                  }
-
-                  if (seriesHighlight.length > 0 && false === seriesHighlight.includes(itemName)) {
-                    className.push('inactive')
-                  }
-
-                  return (
-                    <LegendItem
-                      className={className.join(' ')}
-                      tabIndex={0}
-                      key={`legend-quantile-${i}`}
-                      onKeyPress={e => {
-                        if (e.key === 'Enter') {
+
+                    if (seriesHighlight.length > 0 && false === seriesHighlight.includes(itemName)) {
+                      className.push('inactive')
+                    }
+
+                    return (
+                      <LegendItem
+                        className={className.join(' ')}
+                        tabIndex={0}
+                        key={`legend-quantile-${i}`}
+                        onKeyPress={e => {
+                          if (e.key === 'Enter') {
+                            highlight(label)
+                          }
+                        }}
+                        onClick={() => {
                           highlight(label)
-                        }
-                      }}
-                      onClick={() => {
-                        highlight(label)
-                      }}
-                    >
-                      {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'>
-                        {label.text}
-                      </LegendLabel>
-                    </LegendItem>
-                  )
-                })}
-
-                {highLightedLegendItems.map((bar, i) => {
-                  // if duplicates only return first item
-                  let className = 'legend-item'
-                  let itemName = bar.legendLabel
-
-                  if (!itemName) return false
-                  if (seriesHighlight.length > 0 && false === seriesHighlight.includes(itemName)) {
-                    className += ' inactive'
-                  }
-                  return (
-                    <LegendItem
-                      className={className}
-                      tabIndex={0}
-                      key={`legend-quantile-${i}`}
-                      onKeyPress={e => {
-                        if (e.key === 'Enter') {
+                        }}
+                      >
+                        {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'>
+                          {label.text}
+                        </LegendLabel>
+                      </LegendItem>
+                    )
+                  })}
+
+                  {highLightedLegendItems.map((bar, i) => {
+                    // if duplicates only return first item
+                    let className = 'legend-item'
+                    let itemName = bar.legendLabel
+
+                    if (!itemName) return false
+                    if (seriesHighlight.length > 0 && false === seriesHighlight.includes(itemName)) {
+                      className += ' inactive'
+                    }
+                    return (
+                      <LegendItem
+                        className={className}
+                        tabIndex={0}
+                        key={`legend-quantile-${i}`}
+                        onKeyPress={e => {
+                          if (e.key === 'Enter') {
+                            highlight(bar.legendLabel)
+                          }
+                        }}
+                        onClick={() => {
                           highlight(bar.legendLabel)
-                        }
-                      }}
-                      onClick={() => {
-                        highlight(bar.legendLabel)
-                      }}
-                    >
-                      <LegendCircle 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>
-                    </LegendItem>
-                  )
-                })}
-                {seriesHighlight.length > 0 && (
-                  <button className={`legend-reset ${config.theme}`} onClick={labels => highlightReset(labels)} tabIndex={0}>
-                    Reset
-                  </button>
-                )}
-              </div>
+                        }}
+                      >
+                        <LegendCircle 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>
+                      </LegendItem>
+                    )
+                  })}
+                  {seriesHighlight.length > 0 && (
+                    <button className={`legend-reset ${config.theme}`} onClick={labels => highlightReset(labels)} tabIndex={0}>
+                      Reset
+                    </button>
+                  )}
+                </div>
+                <>
+                  {config.preliminaryData.some(pd => pd.label) && (
+                    <>
+                      <hr></hr>
+                      <div className={config.legend.singleRow && isBottomOrSmallViewport ? 'legend-container__inner bottom single-row' : 'dash-left'}>
+                        {config.preliminaryData.map((pd, index) => {
+                          return (
+                            <div className='dash-container' key={index}>
+                              {pd.label && (
+                                <>
+                                  <div className='dash-inner'>{renderDashesOrCircle(pd.style)}</div>
+                                  <div style={{ marginLeft: '7px' }}>{pd.label}</div>
+                                </>
+                              )}
+                            </div>
+                          )
+                        })}
+                      </div>
+                    </>
+                  )}
+                </>
+              </>
             )
           }}
         </LegendOrdinal>

package/src/components/Legend/index.tsx

@@ -0,0 +1,3 @@
+import Legend from './Legend'
+
+export default Legend

package/src/components/LineChart/LineChartProps.ts

@@ -15,3 +15,32 @@ export type LineChartProps = {
   handleTooltipClick: Function
   tooltipData: any
 }
+
+export interface PreliminaryDataItem {
+  style: string
+  type: string
+  column: string
+  value: string
+  seriesKey: string
+}
+
+export interface DataItem {
+  [key: string]: any
+}
+
+export interface Config {
+  preliminaryData: PreliminaryDataItem[] | []
+}
+export interface StyleProps {
+  preliminaryData: PreliminaryDataItem[]
+  rawData: DataItem[]
+  stroke: string
+  handleLineType: Function
+  lineType: string
+  seriesKey: 'string'
+}
+export interface Style {
+  stroke: string
+  strokeWidth: number
+  strokeDasharray: string
+}

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

@@ -1,9 +1,10 @@
 import React from 'react'
 import chroma from 'chroma-js'
-import { type ChartConfig } from '../../types/ChartConfig'
+import { type ChartConfig } from '../../../types/ChartConfig'
 
 // todo: change this config obj to ChartConfig once its created
 type LineChartCircleProps = {
+  circleData: object[]
   config: ChartConfig
   data: object[]
   d?: Object
@@ -23,7 +24,7 @@ type LineChartCircleProps = {
 }
 
 const LineChartCircle = (props: LineChartCircleProps) => {
-  const { config, d, displayArea, seriesKey, tooltipData, xScale, yScale, colorScale, parseDate, yScaleRight, data } = props
+  const { config, d, displayArea, seriesKey, tooltipData, xScale, yScale, colorScale, parseDate, yScaleRight, data, circleData } = props
   const { lineDatapointStyle } = config
   const filtered = config?.series.filter(s => s.dataKey === seriesKey)?.[0]
   // If we're not showing the circle, simply return
@@ -46,8 +47,11 @@ const LineChartCircle = (props: LineChartCircleProps) => {
     }
     return color
   }
-
   if (lineDatapointStyle === 'always show') {
+    const isMatch = circleData?.some(cd => cd[config.xAxis.dataKey] === d[config.xAxis.dataKey] && cd[seriesKey] === d[seriesKey])
+    if (isMatch) {
+      return <></>
+    }
     return (
       <circle
         cx={config.xAxis.type === 'categorical' ? xScale(d[config.xAxis.dataKey]) : xScale(parseDate(d[config.xAxis.dataKey]))}
@@ -84,6 +88,11 @@ const LineChartCircle = (props: LineChartCircleProps) => {
       let seriesIndex = config.runtime.seriesLabelsAll.indexOf(hoveredXValue)
 
       if (isNaN(hoveredSeriesValue)) return <></>
+      const isMatch = circleData?.some(cd => cd[config.xAxis.dataKey] === hoveredXValue)
+
+      if (isMatch) {
+        return <></>
+      }
       return (
         <circle
           cx={config.xAxis.type === 'categorical' ? xScale(hoveredXValue) : xScale(parseDate(hoveredXValue))}

package/src/components/LineChart/helpers.ts

@@ -0,0 +1,45 @@
+import { type PreliminaryDataItem, DataItem, StyleProps, Style } from './LineChartProps'
+
+export const createStyles = (props: StyleProps): Style[] => {
+  const { preliminaryData, rawData, stroke, handleLineType, lineType, seriesKey } = props
+
+  const validPreliminaryData: PreliminaryDataItem[] = preliminaryData.filter(pd => pd.seriesKey && pd.column && pd.value && pd.type && pd.style)
+  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[] = []
+  const createStyle = (lineStyle): Style => ({
+    stroke: stroke,
+    strokeWidth: 2,
+    strokeDasharray: lineStyle
+  })
+
+  rawData.forEach((d, index) => {
+    let matchingPd: PreliminaryDataItem = getMatchingPd(d)
+    let style: Style = matchingPd ? createStyle(handleLineType(matchingPd.style)) : createStyle(handleLineType(lineType))
+
+    styles.push(style)
+
+    // If matchingPd exists, update the previous style if there is a previous element
+    if (matchingPd && index > 0) {
+      styles[index - 1] = createStyle(handleLineType(matchingPd.style))
+    }
+  })
+  return styles as 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[] = []
+
+  // 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)
+    }
+  })
+
+  return filteredData
+}

package/src/components/LineChart/index.tsx

@@ -2,13 +2,14 @@ import React, { useContext } from 'react'
 
 import * as allCurves from '@visx/curve'
 import { Group } from '@visx/group'
-import { LinePath, Bar } from '@visx/shape'
+import { LinePath, Bar, SplitLinePath } from '@visx/shape'
 import { Text } from '@visx/text'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import ConfigContext from '../../ConfigContext'
 import useRightAxis from '../../hooks/useRightAxis'
-import LineChartCircle from './LineChart.Circle'
+import { filterCircles, createStyles } from './helpers'
+import LineChartCircle from './components/LineChart.Circle'
 
 // types
 import { type ChartContext } from '../../types/ChartContext'
@@ -41,6 +42,7 @@ const LineChart = (props: LineChartProps) => {
     tableData,
     transformedData: data,
     updateConfig,
+    rawData
   } = useContext<ChartContext>(ConfigContext)
   const { yScaleRight } = useRightAxis({ config, yMax, data, updateConfig })
   if (!handleTooltipMouseOver) return
@@ -57,8 +59,10 @@ const LineChart = (props: LineChartProps) => {
           let lineType = config.series.filter(item => item.dataKey === seriesKey)[0].type
           const seriesData = config.series.filter(item => item.dataKey === seriesKey)
           const seriesAxis = seriesData[0].axis ? seriesData[0].axis : 'left'
-
           let displayArea = legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(seriesKey) !== -1
+          const circleData = filterCircles(config.preliminaryData, rawData, seriesKey)
+          // styles for preliminary Data  items
+          let styles = createStyles({ preliminaryData: config.preliminaryData, rawData, stroke: colorScale(config.runtime.seriesLabels[seriesKey]), handleLineType, lineType, seriesKey })
 
           return (
             <Group
@@ -93,6 +97,7 @@ const LineChart = (props: LineChartProps) => {
 
                       {(lineDatapointStyle === 'hidden' || lineDatapointStyle === 'always show') && (
                         <LineChartCircle
+                          circleData={circleData}
                           data={data}
                           d={d}
                           config={config}
@@ -114,7 +119,7 @@ const LineChart = (props: LineChartProps) => {
               })}
               <>
                 {lineDatapointStyle === 'hover' && (
-                  <LineChartCircle data={data} config={config} seriesKey={seriesKey} displayArea={displayArea} tooltipData={tooltipData} xScale={xScale} yScale={yScale} colorScale={colorScale} parseDate={parseDate} yScaleRight={yScaleRight} seriesAxis={seriesAxis} />
+                  <LineChartCircle circleData={circleData} data={data} config={config} seriesKey={seriesKey} displayArea={displayArea} tooltipData={tooltipData} xScale={xScale} yScale={yScale} colorScale={colorScale} parseDate={parseDate} yScaleRight={yScaleRight} seriesAxis={seriesAxis} />
                 )}
               </>
               {/* STANDARD LINE */}
@@ -122,15 +127,22 @@ const LineChart = (props: LineChartProps) => {
                 curve={allCurves[seriesData[0].lineType]}
                 data={data}
                 x={d => xScale(getXAxisData(d))}
-                y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(getYAxisData(d, seriesKey)))}
-                stroke={colorScale ? colorScale(config.runtime.seriesLabels[seriesKey]) : '#000'}
+                y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(Number(getYAxisData(d, seriesKey))))}
+                stroke={colorScale(config.runtime.seriesLabels[seriesKey])}
                 strokeWidth={2}
                 strokeOpacity={1}
+                shapeRendering='geometricPrecision'
                 strokeDasharray={lineType ? handleLineType(lineType) : 0}
                 defined={(item, i) => {
                   return item[seriesKey] !== '' && item[seriesKey] !== null && item[seriesKey] !== undefined
                 }}
               />
+
+              {/* circles for preliminaryData data */}
+              {circleData.map((d, i) => {
+                return <circle key={i} cx={xScale(getXAxisData(d))} cy={yScale(Number(getYAxisData(d, seriesKey)))} r={6} strokeWidth={2} stroke={colorScale ? colorScale(config.runtime.seriesLabels[seriesKey]) : '#000'} fill='#fff' />
+              })}
+
               {/* ANIMATED LINE */}
               {config.animate && (
                 <LinePath
@@ -138,14 +150,14 @@ const LineChart = (props: LineChartProps) => {
                   curve={seriesData.lineType}
                   data={data}
                   x={d => xScale(getXAxisData(d))}
-                  y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(getYAxisData(d, seriesKey)))}
+                  y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(Number(getYAxisData(d, seriesKey))))}
                   stroke='#fff'
                   strokeWidth={3}
                   strokeOpacity={1}
                   shapeRendering='geometricPrecision'
                   strokeDasharray={lineType ? handleLineType(lineType) : 0}
                   defined={(item, i) => {
-                    return isNumber(item[config.runtime.seriesLabels[seriesKey]])
+                    return item[seriesKey] !== '' && item[seriesKey] !== null && item[seriesKey] !== undefined
                   }}
                 />
               )}