@cdc/chart 4.23.11 → 4.24.2

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

@@ -0,0 +1,199 @@
+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 { handleLineType } from '../../helpers/handleLineType'
+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'
+
+interface LegendProps {
+  config: ChartConfig
+  colorScale: ColorScale
+  seriesHighlight: string[]
+  highlight: Function
+  highlightReset: Function
+  currentViewport: string
+  formatLabels: (labels: Label[]) => Label[]
+}
+
+/* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
+const Legend: React.FC<LegendProps> = ({ config, colorScale, seriesHighlight, highlight, highlightReset, currentViewport, formatLabels }) => {
+  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>
+    }
+  }
+
+  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`
+  }
+
+  const { HighLightedBarUtils } = useHighlightedBars(config)
+
+  let highLightedLegendItems = HighLightedBarUtils.findDuplicates(config.highlightedBarValues)
+
+  return (
+    <aside style={legendClasses} id='legend' className={containerClasses.join(' ')} role='region' aria-label='legend' tabIndex={0}>
+      {legend.label && <h2>{parse(legend.label)}</h2>}
+      {legend.description && <p>{parse(legend.description)}</p>}
+      <LegendOrdinal scale={colorScale} itemDirection='row' labelMargin='0 20px 0 0' shapeMargin='0 10px 0'>
+        {labels => {
+          return (
+            <>
+              <div className={innerClasses.join(' ')}>
+                {formatLabels(labels as Label[]).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') {
+                          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') {
+                          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>
+
+              <>
+                {config?.preliminaryData?.some(pd => pd.label) && config.visualizationType === 'Line' && (
+                  <>
+                    <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 style={{}}> {pd.label}</span>
+                              </div>
+                            )}
+                          </>
+                        )
+                      })}
+                    </div>
+                  </>
+                )}
+              </>
+            </>
+          )
+        }}
+      </LegendOrdinal>
+    </aside>
+  )
+}
+
+export default Legend

package/src/components/Legend/Legend.tsx

@@ -0,0 +1,28 @@
+import { useContext } from 'react'
+import ConfigContext from '../../ConfigContext'
+import LegendComponent from './Legend.Component'
+import { createFormatLabels } from './helpers/createFormatLabels'
+
+/* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
+const Legend = () => {
+  // prettier-ignore
+  const {
+    config,
+    colorScale,
+    seriesHighlight,
+    highlight,
+    tableData,
+    highlightReset,
+    transformedData: data,
+    currentViewport
+  } = useContext(ConfigContext)
+
+  if (!config.legend) return null
+  // create fn to reverse labels while legend is Bottom.  Legend-right , legend-left works by default.
+
+  const createLegendLabels = createFormatLabels(config, tableData, data, colorScale)
+
+  return !['Box Plot', 'Pie'].includes(config.visualizationType) && <LegendComponent config={config} colorScale={colorScale} seriesHighlight={seriesHighlight} highlight={highlight} highlightReset={highlightReset} currentViewport={currentViewport} formatLabels={createLegendLabels} />
+}
+
+export default Legend

package/src/components/Legend/helpers/createFormatLabels.tsx

@@ -0,0 +1,140 @@
+import { colorPalettesChart as colorPalettes, sequentialPalettes, twoColorPalette } from '@cdc/core/data/colorPalettes'
+import { FaStar } from 'react-icons/fa'
+import { Label } from '../../../types/Label'
+import { ColorScale, TransformedData } from '../../../types/ChartContext'
+import { ChartConfig } from '../../../types/ChartConfig'
+
+export const createFormatLabels =
+  (config: ChartConfig, tableData: Object[], data: TransformedData[], colorScale: ColorScale) =>
+  (defaultLabels: Label[]): Label[] => {
+    const { visualizationType, visualizationSubType, series, runtime } = config
+
+    const reverseLabels = labels => (config.legend.reverseLabelOrder && config.legend.position === 'bottom' ? labels.reverse() : labels)
+    const colorCode = config.legend?.colorCode
+    if (visualizationType === 'Deviation Bar') {
+      const [belowColor, aboveColor] = twoColorPalette[config.twoColor.palette]
+      const labelBelow = {
+        datum: 'X',
+        index: 0,
+        text: `Below ${config.xAxis.targetLabel}`,
+        value: belowColor
+      }
+      const labelAbove = {
+        datum: 'X',
+        index: 1,
+        text: `Above ${config.xAxis.targetLabel}`,
+        value: aboveColor
+      }
+
+      return reverseLabels([labelBelow, labelAbove])
+    }
+    if (visualizationType === 'Bar' && visualizationSubType === 'regular' && colorCode && series?.length === 1) {
+      let palette = colorPalettes[config.palette]
+
+      while (tableData.length > palette.length) {
+        palette = palette.concat(palette)
+      }
+      palette = palette.slice(0, data.length)
+      //store unique values to Set by colorCode
+      const set = new Set()
+
+      tableData.forEach(d => set.add(d[colorCode]))
+
+      // create labels with unique values
+      const uniqueLabels = Array.from(set).map((val, i) => {
+        const newLabel = {
+          datum: val,
+          index: i,
+          text: val,
+          value: palette[i]
+        }
+        return newLabel
+      })
+
+      return reverseLabels(uniqueLabels)
+    }
+
+    // get forecasting items inside of combo
+    if (runtime?.forecastingSeriesKeys?.length > 0) {
+      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) => {
+          let colorValue = sequentialPalettes[stage.color]?.[2] ? sequentialPalettes[stage.color]?.[2] : colorPalettes[stage.color]?.[2] ? colorPalettes[stage.color]?.[2] : '#ccc'
+
+          const newLabel = {
+            datum: stage.key,
+            index: index,
+            text: stage.key,
+            value: colorValue
+          }
+
+          seriesLabels.push(newLabel)
+        })
+      })
+
+      // loop through bars for now to meet requirements.
+      config.runtime.barSeriesKeys &&
+        config.runtime.barSeriesKeys.forEach((bar, index) => {
+          let colorValue = colorPalettes[config.palette][index] ? colorPalettes[config.palette][index] : '#ccc'
+
+          const newLabel = {
+            datum: bar,
+            index: index,
+            text: bar,
+            value: colorValue
+          }
+
+          seriesLabels.push(newLabel)
+        })
+
+      return reverseLabels(seriesLabels)
+    }
+
+    // DEV-4161: replaceable series name in the legend
+    const hasNewSeriesName = config.series.filter(item => !!item.name).length > 0
+    if (hasNewSeriesName) {
+      //store unique values to Set by colorCode
+      const set = new Set()
+
+      config.series.forEach(d => {
+        set.add(d.name || d.dataKey)
+      })
+
+      // create labels with unique values
+      const uniqueLabels = Array.from(set).map((val, i) => {
+        const newLabel = {
+          datum: val,
+          index: i,
+          text: val,
+          value: colorScale(val)
+        }
+        return newLabel
+      })
+
+      return reverseLabels(uniqueLabels)
+    }
+
+    if ((config.visualizationType === 'Bar' || config.visualizationType === 'Combo') && config.visualizationSubType === 'regular' && config.suppressedData) {
+      const lastIndex = defaultLabels.length - 1
+      let newLabels = []
+
+      config.suppressedData?.forEach(({ label, icon }, index) => {
+        if (label && icon) {
+          const newLabel = {
+            datum: label,
+            index: lastIndex + index,
+            text: label,
+            icon: <FaStar color='#000' size={15} />
+          }
+          newLabels.push(newLabel)
+        }
+      })
+
+      return [...defaultLabels, ...newLabels]
+    }
+
+    return reverseLabels(defaultLabels)
+  }

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[]
+  data: DataItem[]
+  stroke: string
+  handleLineType: Function
+  lineType: string
+  seriesKey: 'string'
+}
+export interface Style {
+  stroke: string
+  strokeWidth: number
+  strokeDasharray: string
+}

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

@@ -0,0 +1,147 @@
+import React from 'react'
+import chroma from 'chroma-js'
+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
+  displayArea: boolean
+  seriesKey: string
+  tooltipData: {
+    data: []
+    tooltipDataX: number
+    tooltipDataY: number
+  }
+  xScale: any
+  yScale: any
+  yScaleRight: any
+  colorScale: any
+  parseDate: any
+  seriesAxis: string
+  dataIndex: number
+  mode: 'ISOLATED_POINTS' | 'HOVER_POINTS' | 'ALWAYS_SHOW_POINTS'
+}
+
+const LineChartCircle = (props: LineChartCircleProps) => {
+  const { config, d, 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
+  const getColor = (displayArea: boolean, colorScale: Function, config: ChartConfig, hoveredKey: string, seriesKey: string) => {
+    const seriesLabels = config.runtime.seriesLabels || []
+    let color
+
+    if (displayArea) {
+      color = colorScale(seriesLabels[hoveredKey] || seriesKey)
+    } else {
+      color = 'transparent'
+    }
+
+    if (config.lineDatapointColor === 'Lighter than Line' && color !== 'transparent' && color) {
+      color = chroma(color).brighten(1)
+    }
+    return color
+  }
+  const getXPos = hoveredXValue => {
+    return (config.xAxis.type === 'categorical' ? xScale(hoveredXValue) : xScale(parseDate(hoveredXValue))) + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
+  }
+  if (mode === 'ALWAYS_SHOW_POINTS') {
+    if (lineDatapointStyle === 'hidden') return <></>
+    const getIndex = seriesKey => config.runtime.seriesLabelsAll.indexOf(seriesKey)
+
+    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={getXPos(d[config.xAxis.dataKey])}
+          cy={filtered.axis === 'Right' ? yScaleRight(d[filtered.dataKey]) : yScale(d[filtered.dataKey])}
+          r={4.5}
+          opacity={d[seriesKey] ? 1 : 0}
+          fillOpacity={1}
+          fill={getColor(displayArea, colorScale, config, seriesKey, seriesKey)}
+          style={{ filter: 'unset', opacity: 1 }}
+        />
+      )
+    }
+  }
+
+  if (mode === 'HOVER_POINTS') {
+    if (lineDatapointStyle === 'hover') {
+      if (!tooltipData) return
+      if (!seriesKey) return
+      if (!tooltipData.data) return
+      let hoveredXValue = tooltipData?.data?.[0]?.[1]
+      if (!hoveredXValue) return
+
+      let hoveredSeriesValue
+      let hoveredSeriesIndex
+      let hoveredSeriesData = tooltipData.data.filter(d => d[0] === seriesKey)
+      let hoveredSeriesKey = hoveredSeriesData?.[0]?.[0]
+      let hoveredSeriesAxis = hoveredSeriesData?.[0]?.[2]
+      if (!hoveredSeriesKey) return
+      hoveredSeriesIndex = tooltipData?.data.indexOf(hoveredSeriesKey)
+      hoveredSeriesValue = data?.find(d => {
+        return d[config?.xAxis.dataKey] === hoveredXValue
+      })?.[seriesKey]
+
+      //    hoveredSeriesValue = extractNumber(hoveredSeriesValue)
+      return tooltipData?.data.map((tooltipItem, index) => {
+        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={getXPos(hoveredXValue)}
+            cy={hoveredSeriesAxis === 'right' ? yScaleRight(hoveredSeriesValue) : yScale(hoveredSeriesValue)}
+            r={4.5}
+            opacity={1}
+            fillOpacity={1}
+            fill={getColor(displayArea, colorScale, config, hoveredSeriesKey, seriesKey)}
+            style={{ filter: 'unset', opacity: 1 }}
+            key={`line-chart-circle--${JSON.stringify(tooltipItem)}--${index}`}
+          />
+        )
+      })
+    }
+  }
+
+  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
+      }
+      if (currentIndex === data.length - 1 && !previousPoint[seriesKey]) {
+        return true
+      }
+      if (currentIndex !== 0 && currentPoint[seriesKey] && !previousPoint[seriesKey] && !nextPoint[seriesKey]) {
+        return true
+      }
+    }
+
+    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])} />
+        )
+      }
+    }
+  }
+
+  return null
+}
+
+export default LineChartCircle

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, data, 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
+  })
+
+  data.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
+}