@cdc/chart 4.24.5 → 4.24.9

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 <></>
         }
 
@@ -135,7 +162,12 @@ 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
         }
       }
@@ -146,7 +178,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])
       }

package/src/components/LineChart/index.tsx

@@ -16,6 +16,7 @@ import useRightAxis from '../../hooks/useRightAxis'
 // Local helpers and components
 import { filterCircles, createStyles, createDataSegments } from './helpers'
 import LineChartCircle from './components/LineChart.Circle'
+import LineChartBumpCircle from './components/LineChart.BumpCircle'
 
 // Types
 import { type ChartContext } from '../../types/ChartContext'
@@ -46,7 +47,7 @@ const LineChart = (props: LineChartProps) => {
   let data = transformedData
   let tableD = tableData
   // if brush on use brush data and clean
-  if (brushConfig.data.length) {
+  if (brushConfig.data.length > 0 && config.brush?.active) {
     data = clean(brushConfig.data)
     tableD = clean(brushConfig.data)
   }
@@ -56,15 +57,29 @@ const LineChart = (props: LineChartProps) => {
         {' '}
         {/* left - expects a number not a string */}
         {(config.runtime.lineSeriesKeys || config.runtime.seriesKeys).map((seriesKey, index) => {
-          let lineType = config.series.filter(item => item.dataKey === seriesKey)[0].type
-          const seriesData = config.series.filter(item => item.dataKey === seriesKey)
+          let lineType = config.runtime.series.filter(item => item.dataKey === seriesKey)[0].type
+          const seriesData = config.runtime.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
+          let displayArea =
+            legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(seriesKey) !== -1
           const circleData = filterCircles(config?.preliminaryData, tableD, seriesKey)
           // styles for preliminary Data  items
-          let styles = createStyles({ preliminaryData: config.preliminaryData, data: tableD, stroke: colorScale(config.runtime.seriesLabels[seriesKey]), strokeWidth: seriesData[0].weight || 2, handleLineType, lineType, seriesKey })
-          const suppressedSegments = createDataSegments(tableData, seriesKey, config.preliminaryData, config.xAxis.dataKey)
-
+          let styles = createStyles({
+            preliminaryData: config.preliminaryData,
+            data: tableD,
+            stroke: colorScale(config.runtime.seriesLabels[seriesKey]),
+            strokeWidth: seriesData[0].weight || 2,
+            handleLineType,
+            lineType,
+            seriesKey
+          })
+          const suppressedSegments = createDataSegments(
+            tableData,
+            seriesKey,
+            config.preliminaryData,
+            config.xAxis.dataKey
+          )
+          const splittedData = config?.preliminaryData?.filter(pd => pd.style && !pd.style.includes('Circles'))
           let xPos = d => {
             return xScale(getXAxisData(d)) + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
           }
@@ -72,36 +87,56 @@ const LineChart = (props: LineChartProps) => {
           return (
             <Group
               key={`series-${seriesKey}`}
-              opacity={legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(seriesKey) === -1 ? 0.5 : 1}
-              display={legend.behavior === 'highlight' || (seriesHighlight.length === 0 && !legend.dynamicLegend) || seriesHighlight.indexOf(seriesKey) !== -1 ? 'block' : 'none'}
+              opacity={
+                legend.behavior === 'highlight' &&
+                seriesHighlight.length > 0 &&
+                seriesHighlight.indexOf(seriesKey) === -1
+                  ? 0.5
+                  : 1
+              }
+              display={
+                legend.behavior === 'highlight' ||
+                (seriesHighlight.length === 0 && !legend.dynamicLegend) ||
+                seriesHighlight.indexOf(seriesKey) !== -1
+                  ? 'block'
+                  : 'none'
+              }
             >
+              {/* tooltips */}
+              <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)}
+              />
               {data.map((d, dataIndex) => {
-                // Find the series object from the config.series array that has a dataKey matching the seriesKey variable.
-                const series = config.series.find(({ dataKey }) => dataKey === seriesKey)
-                const { axis } = series
-
-                const hasMultipleSeries = Object.keys(config.runtime.seriesLabels).length > 1
-                const labeltype = axis === 'Right' ? 'rightLabel' : 'label'
-                let label = config.runtime.yAxis[labeltype]
-
-                // if has muiltiple series dont show legend value on tooltip
-                if (!hasMultipleSeries) label = config.isLegendValue ? config.runtime.seriesLabels[seriesKey] : label
-
                 return (
                   d[seriesKey] !== undefined &&
                   d[seriesKey] !== '' &&
                   d[seriesKey] !== null &&
                   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, tableData)} onMouseOut={handleTooltipMouseOff} onClick={e => handleTooltipClick(e, data)} />
-
-                      {/* Render legend */}
-                      <Text display={config.labels ? 'block' : 'none'} x={xPos(d)} y={seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(getYAxisData(d, seriesKey))} fill={'#000'} textAnchor='middle'>
-                        {formatNumber(d[seriesKey], 'left')}
-                      </Text>
+                    <React.Fragment key={`series-${seriesKey}-point-${dataIndex}`}>
+                      {/* Render label */}
+                      {config.labels && (
+                        <Text
+                          x={xPos(d)}
+                          y={
+                            seriesAxis === 'Right'
+                              ? yScaleRight(getYAxisData(d, seriesKey))
+                              : yScale(getYAxisData(d, seriesKey))
+                          }
+                          fill={'#000'}
+                          textAnchor='middle'
+                        >
+                          {formatNumber(d[seriesKey], 'left')}
+                        </Text>
+                      )}
 
-                      {(lineDatapointStyle === 'hidden' || lineDatapointStyle === 'always show') && (
+                      {lineDatapointStyle === 'always show' && (
                         <LineChartCircle
                           mode='ALWAYS_SHOW_POINTS'
                           dataIndex={dataIndex}
@@ -142,7 +177,7 @@ const LineChart = (props: LineChartProps) => {
                         seriesAxis={seriesAxis}
                         key={`isolated-circle-${dataIndex}`}
                       />
-                    </Group>
+                    </React.Fragment>
                   )
                 )
               })}
@@ -168,14 +203,18 @@ const LineChart = (props: LineChartProps) => {
                 )}
               </>
               {/* SPLIT LINE */}
-              {config?.preliminaryData?.some(pd => pd.value && pd.type) ? (
+              {splittedData.length > 0 ? (
                 <>
                   <SplitLinePath
                     curve={allCurves[seriesData[0].lineType]}
                     segments={data.map(d => [d])}
                     segmentation='x'
                     x={d => xPos(d)}
-                    y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(Number(getYAxisData(d, seriesKey))))}
+                    y={d =>
+                      seriesAxis === 'Right'
+                        ? yScaleRight(getYAxisData(d, seriesKey))
+                        : yScale(Number(getYAxisData(d, seriesKey)))
+                    }
                     styles={styles}
                     defined={(item, i) => {
                       return item[seriesKey] !== '' && item[seriesKey] !== null && item[seriesKey] !== undefined
@@ -188,7 +227,11 @@ const LineChart = (props: LineChartProps) => {
                         key={index}
                         data={segment.data}
                         x={d => xPos(d)}
-                        y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(Number(getYAxisData(d, seriesKey))))}
+                        y={d =>
+                          seriesAxis === 'Right'
+                            ? yScaleRight(getYAxisData(d, seriesKey))
+                            : yScale(Number(getYAxisData(d, seriesKey)))
+                        }
                         stroke={colorScale(config.runtime.seriesLabels[seriesKey])}
                         strokeWidth={seriesData[0].weight || 2}
                         strokeOpacity={1}
@@ -207,7 +250,9 @@ const LineChart = (props: LineChartProps) => {
                   <LinePath
                     curve={allCurves[seriesData[0].lineType]}
                     data={
-                      config.xAxis.type === 'date-time'
+                      config.visualizationType == 'Bump Chart'
+                        ? data
+                        : config.xAxis.type === 'date-time' || config.xAxis.type === 'date'
                         ? data.sort((d1, d2) => {
                             let x1 = getXAxisData(d1)
                             let x2 = getXAxisData(d2)
@@ -218,7 +263,11 @@ const LineChart = (props: LineChartProps) => {
                         : data
                     }
                     x={d => xPos(d)}
-                    y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(Number(getYAxisData(d, seriesKey))))}
+                    y={d =>
+                      seriesAxis === 'Right'
+                        ? yScaleRight(getYAxisData(d, seriesKey))
+                        : yScale(Number(getYAxisData(d, seriesKey)))
+                    }
                     stroke={colorScale(config.runtime.seriesLabels[seriesKey])}
                     strokeWidth={seriesData[0].weight || 2}
                     strokeOpacity={1}
@@ -232,16 +281,26 @@ const LineChart = (props: LineChartProps) => {
               )}
 
               {/* circles for preliminaryData data */}
-              {circleData.map((d, i) => {
+              {circleData.map((item, i) => {
                 return (
                   <circle
                     key={i}
-                    cx={xPos(d)}
-                    cy={seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(Number(getYAxisData(d, seriesKey)))}
-                    r={6}
+                    cx={xPos(item.data)}
+                    cy={
+                      seriesAxis === 'Right'
+                        ? yScaleRight(getYAxisData(item.data, seriesKey))
+                        : yScale(Number(getYAxisData(item.data, seriesKey)))
+                    }
+                    r={item.size}
                     strokeWidth={seriesData[0].weight || 2}
                     stroke={colorScale ? colorScale(config.runtime.seriesLabels[seriesKey]) : '#000'}
-                    fill='#fff'
+                    fill={
+                      item.isFilled
+                        ? colorScale
+                          ? colorScale(config.runtime.seriesLabels[seriesKey])
+                          : '#000'
+                        : '#fff'
+                    }
                   />
                 )
               })}
@@ -253,7 +312,11 @@ const LineChart = (props: LineChartProps) => {
                   curve={allCurves[seriesData[0].lineType]}
                   data={data}
                   x={d => xPos(d)}
-                  y={d => (seriesAxis === 'Right' ? yScaleRight(getYAxisData(d, seriesKey)) : yScale(Number(getYAxisData(d, seriesKey))))}
+                  y={d =>
+                    seriesAxis === 'Right'
+                      ? yScaleRight(getYAxisData(d, seriesKey))
+                      : yScale(Number(getYAxisData(d, seriesKey)))
+                  }
                   stroke='#fff'
                   strokeWidth={3}
                   strokeOpacity={1}
@@ -278,7 +341,16 @@ const LineChart = (props: LineChartProps) => {
                     return <></>
                   }
                   return (
-                    <text x={xPos(lastDatum) + 5} y={yScale(getYAxisData(lastDatum, seriesKey))} alignmentBaseline='middle' fill={config.colorMatchLineSeriesLabels && colorScale ? colorScale(config.runtime.seriesLabels[seriesKey] || seriesKey) : 'black'}>
+                    <text
+                      x={xPos(lastDatum) + 5}
+                      y={yScale(getYAxisData(lastDatum, seriesKey))}
+                      alignmentBaseline='middle'
+                      fill={
+                        config.colorMatchLineSeriesLabels && colorScale
+                          ? colorScale(config.runtime.seriesLabels[seriesKey] || seriesKey)
+                          : 'black'
+                      }
+                    >
                       {config.runtime.seriesLabels[seriesKey] || seriesKey}
                     </text>
                   )
@@ -293,6 +365,9 @@ const LineChart = (props: LineChartProps) => {
           </Text>
         )}
       </Group>
+      {config.visualizationType === 'Bump Chart' && (
+        <LineChartBumpCircle config={config} xScale={xScale} yScale={yScale} />
+      )}
     </ErrorBoundary>
   )
 }