@cdc/chart 4.24.5 → 4.24.9-1

package/src/components/LegendWrapper.tsx

@@ -0,0 +1,26 @@
+import React, { useContext } from 'react'
+import ConfigContext from '../ConfigContext'
+
+type LegendWrapperProps = {
+  children: React.ReactNode
+}
+
+const LegendWrapper: React.FC<LegendWrapperProps> = props => {
+  const { children } = props
+
+  const { config, currentViewport } = useContext(ConfigContext)
+
+  const getLegendWrappingClasses = () => {
+    let classes = ['legend-wrapper', 'd-flex', 'flex-nowrap', 'w-100']
+    const { legend } = config
+    if (legend.position === 'bottom' || legend.position === 'top' || ['xxs', 'xs', 'sm'].includes(currentViewport)) {
+      classes = classes.filter(item => item !== 'flex-nowrap')
+      classes.push('flex-wrap')
+    }
+    return classes.join(' ')
+  }
+
+  return <div className={getLegendWrappingClasses()}>{...children}</div>
+}
+
+export default LegendWrapper

package/src/components/LineChart/LineChartProps.ts

@@ -1,5 +1,6 @@
 // todo: review tooltipData type
 // todo: review svgRef type
+import { type PreliminaryDataItem } from '../../types/ChartConfig'
 export type LineChartProps = {
   xScale: Function
   yScale: Function
@@ -16,21 +17,6 @@ export type LineChartProps = {
   tooltipData: any
 }
 
-export interface PreliminaryDataItem {
-  column: 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 {
   [key: string]: any
 }

package/src/components/LineChart/components/LineChart.BumpCircle.tsx

@@ -0,0 +1,103 @@
+import { useState } from 'react'
+import { Group } from '@visx/group'
+import { type Column } from '@cdc/core/types/Column'
+import React from 'react'
+import { type ChartConfig } from '../../../types/ChartConfig'
+
+type LineChartBumpCircleProp = {
+    config: ChartConfig, 
+    xScale: any, 
+    yScale: any, 
+    parseDate: any 
+  }
+
+const LineChartBumpCircle = (props: LineChartBumpCircleProp) => {
+  const { config, xScale, yScale, parseDate } = props
+
+  // get xScale and yScale...
+  if (!config?.runtime?.series) return
+
+  const handleX = xValue => {
+    if (config.xAxis.type === 'date') {
+      return parseDate(xValue).getTime()
+    }
+    if (config.xAxis.type === 'date-time') {
+      return new Date(xValue)
+    }
+    if (config.xAxis.type === 'categorical') {
+      return xValue
+    }
+  }
+
+  const checkBandScale = xValue => {
+    return xScale.bandwidth ? xScale.bandwidth() / 2 + Number(xValue) : Number(xValue)
+  }
+
+ 
+  const getListItems = dataRow => {
+    return Object.values(config.columns)
+    ?.filter(column => column.tooltips).map(column => {
+      const label = column.label || column.name;
+      return `
+        <li className='tooltip-body'>
+          <strong>${label}</strong>: ${dataRow[column.name]}
+        </li>`; 
+    })
+    .join(' ');
+  }  
+
+  const getTooltip = dataRow => `<ul> ${getListItems(dataRow)} </ul>`
+
+  const circles = config.runtime?.series.map((series) => {
+    return config.data.map((d, dataIndex) => {
+      let series_dataKey = d[series.dataKey]
+      let axis_dataKey = d[config.xAxis.dataKey]
+      return (
+        <React.Fragment key={`bump-circle-${series_dataKey}-${dataIndex}`}>
+          <Group left={Number(config.runtime.yAxis.size)}> 
+            {series_dataKey && (
+              <>
+                <circle 
+                  key={`bump-circle-${series_dataKey}-${dataIndex}`}
+                  data-tooltip-html={getTooltip(d)} 
+                  data-tooltip-id={`bump-chart`} 
+                  r={10} 
+                  cx={Number(checkBandScale(xScale(handleX(axis_dataKey))))} 
+                  cy={Number(yScale(series_dataKey))} 
+                  stroke='#CACACA' 
+                  strokeWidth={1} 
+                  fill='#E5E4E2' 
+                />
+                {series_dataKey.toString().length === 2 ? (
+                  // prettier-ignore
+                  <text
+                  x={Number(checkBandScale(xScale(handleX(axis_dataKey)))) - 7}
+                  y={Number(yScale(series_dataKey)) + 4}
+                  fill='#000000'
+                  fontSize={11.5}
+                  >
+                  {series_dataKey}
+                </text>
+                ) : (
+                  // prettier-ignore
+                  <text
+                  x={Number(checkBandScale(xScale(handleX(axis_dataKey)))) - 4}
+                  y={Number(yScale(series_dataKey)) + 4}
+                  fill='#000000'
+                  fontSize={11.5}
+                  >
+                  {series_dataKey}
+                </text>
+                )}
+              </>
+            )}
+          </Group>
+        </React.Fragment>
+      )
+    })
+  })
+
+  return <>{circles}</>
+}
+
+export default LineChartBumpCircle

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

@@ -27,11 +27,33 @@ type LineChartCircleProps = {
 }
 
 const LineChartCircle = (props: LineChartCircleProps) => {
-  const { config, d, tableData, 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]
+  const filtered = config?.runtime?.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 getColor = (
+    displayArea: boolean,
+    colorScale: Function,
+    config: ChartConfig,
+    hoveredKey: string,
+    seriesKey: string
+  ) => {
     const seriesLabels = config.runtime.seriesLabels || []
     let color
 
@@ -47,14 +69,19 @@ const LineChartCircle = (props: LineChartCircleProps) => {
     return color
   }
   const getXPos = hoveredXValue => {
-    return (config.xAxis.type === 'categorical' ? xScale(hoveredXValue) : xScale(parseDate(hoveredXValue))) + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
+    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])
+      const isMatch = circleData?.some(
+        cd => cd[config.xAxis.dataKey] === d[config.xAxis.dataKey] && cd[seriesKey] === d[seriesKey]
+      )
       if (isMatch) {
         return <></>
       }
@@ -98,7 +125,7 @@ const LineChartCircle = (props: LineChartCircleProps) => {
         if (isNaN(hoveredSeriesValue)) return <></>
         const isMatch = circleData?.some(cd => cd[config.xAxis.dataKey] === hoveredXValue)
 
-        if (isMatch) {
+        if (isMatch || !hoveredSeriesValue) {
           return <></>
         }
 
@@ -120,10 +147,17 @@ const LineChartCircle = (props: LineChartCircleProps) => {
 
   if (mode === 'ISOLATED_POINTS') {
     const drawIsolatedPoints = (currentIndex, seriesKey) => {
+      let isMatch = false
       const currentPoint = data[currentIndex]
       const previousPoint = currentIndex > 0 ? data[currentIndex - 1] : null
       const nextPoint = currentIndex < data.length - 1 ? data[currentIndex + 1] : null
       let res = false
+      // check if isolated points has overlap with circle effect
+      circleData.forEach(item => {
+        if (item?.data[seriesKey] === currentPoint[seriesKey]) {
+          isMatch = true
+        }
+      })
 
       // Handle the first point in the array
       if (currentIndex === 0 && nextPoint && !nextPoint[seriesKey]) {
@@ -135,10 +169,18 @@ const LineChartCircle = (props: LineChartCircleProps) => {
       }
       // Handle points in the middle
       if (currentIndex > 0 && currentIndex < data.length - 1) {
-        if (currentPoint && currentPoint[seriesKey] && (!previousPoint || !previousPoint[seriesKey]) && (!nextPoint || !nextPoint[seriesKey])) {
+        if (
+          currentPoint &&
+          currentPoint[seriesKey] &&
+          (!previousPoint || !previousPoint[seriesKey]) &&
+          (!nextPoint || !nextPoint[seriesKey])
+        ) {
           res = true
         }
       }
+      if (isMatch) {
+        res = false
+      }
 
       return res
     }
@@ -146,7 +188,14 @@ const LineChartCircle = (props: LineChartCircleProps) => {
     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,10 +1,20 @@
-import { type PreliminaryDataItem, DataItem, StyleProps, Style } from './LineChartProps'
+import { DataItem, StyleProps, Style } from './LineChartProps'
+import { PreliminaryDataItem } from '../../types/ChartConfig'
 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 && 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')
+  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[] = []
   const createStyle = (lineStyle): Style => ({
@@ -15,7 +25,9 @@ export const createStyles = (props: StyleProps): Style[] => {
 
   data.forEach((d, index) => {
     let matchingPd: PreliminaryDataItem = getMatchingPd(d)
-    let style: Style = matchingPd ? createStyle(handleLineType(matchingPd.style)) : createStyle(handleLineType(lineType))
+    let style: Style = matchingPd
+      ? createStyle(handleLineType(matchingPd.style))
+      : createStyle(handleLineType(lineType))
 
     styles.push(style)
 
@@ -27,18 +39,54 @@ export const createStyles = (props: StyleProps): Style[] => {
   return styles as Style[]
 }
 
-export const filterCircles = (preliminaryData: PreliminaryDataItem[], data: DataItem[], seriesKey: string): DataItem[] => {
+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 }))
-  const filteredData: DataItem[] = []
+  const circlesFiltered = preliminaryData
+    ?.filter(item => item.style.includes('Circles') && item.type === 'effect')
+    .map(item => ({
+      column: item.column,
+      value: item.value,
+      seriesKey: item.seriesKey,
+      circleSize: item.circleSize,
+      style: item.style
+    }))
+  const filteredData = []
   // Process data to find matching items
   data.forEach(item => {
     circlesFiltered.forEach(fc => {
-      if (item[fc.column] === fc.value && fc.seriesKey === seriesKey) {
-        filteredData.push(item)
+      if (
+        item[fc.column] === fc.value &&
+        fc.seriesKey === seriesKey &&
+        item[seriesKey] &&
+        fc.style === 'Open Circles'
+      ) {
+        const result = {
+          data: item,
+          size: fc.circleSize,
+          isFilled: false
+        }
+        filteredData.push(result)
+      }
+      if (
+        (!fc.value || item[fc.column] === fc.value) &&
+        fc.seriesKey === seriesKey &&
+        item[seriesKey] &&
+        fc.style === 'Filled Circles'
+      ) {
+        const result = {
+          data: item,
+          size: fc.circleSize,
+          isFilled: true
+        }
+        filteredData.push(result)
       }
     })
   })
+
   return filteredData
 }
 
@@ -56,8 +104,10 @@ const handleFirstIndex = (data, seriesKey, preliminaryData) => {
 
   // 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)
+    if (pd.type === 'effect' || pd.hideLineStyle) return
+    return (
+      pd.type == 'suppression' && pd.value === firstIndexDataItem[seriesKey] && (!pd.column || pd.column === seriesKey)
+    )
   }
 
   // Find applicable suppression data for the first item
@@ -93,7 +143,13 @@ const handleLastIndex = (data, seriesKey, preliminaryData) => {
   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') {
+    if (
+      data[data.length - 1][seriesKey] === pd.value &&
+      pd.style &&
+      (!pd.column || pd.column === seriesKey) &&
+      pd.type == 'suppression' &&
+      !pd.hideLineStyle
+    ) {
       const lastIndex = data.length - 1
       const modifiedItem = { ...data[lastIndex], [seriesKey]: 0 }
       result.data.push(modifiedItem)
@@ -123,7 +179,7 @@ function handleMiddleIndices(data, seriesKey, dataKey, preliminaryData) {
   const isValidMiddleIndex = index => index > 0 && index < data.length - 1
 
   preliminaryData?.forEach(pd => {
-    if (pd.type === 'effect') return
+    if (pd.type === 'effect' || pd.hideLineStyle) return
     const targetValue = pd.value
 
     // Find all indices
@@ -143,7 +199,9 @@ function handleMiddleIndices(data, seriesKey, dataKey, preliminaryData) {
       }
 
       // Find and add the next calculable object
-      const nextIndex = data.slice(i + 1).findIndex(item => item[seriesKey] !== targetValue && isCalculable(item[seriesKey]))
+      const nextIndex = data
+        .slice(i + 1)
+        .findIndex(item => item[seriesKey] !== targetValue && isCalculable(item[seriesKey]))
       if (nextIndex !== -1) {
         result.data.push(data[i + 1 + nextIndex])
       }