@cdc/chart 4.24.4 → 4.24.7

package/src/components/Sankey/index.tsx

@@ -13,13 +13,16 @@ import 'react-tooltip/dist/react-tooltip.css'
 import ConfigContext from '@cdc/chart/src/ConfigContext'
 import { ChartContext } from '../../types/ChartContext'
 import type { SankeyNode, SankeyProps } from './types'
+import { SankeyChartConfig, AllChartsConfig } from '../../types/ChartConfig'
 
 const Sankey = ({ width, height, runtime }: SankeyProps) => {
-  const DEBUG = true
   const { config } = useContext<ChartContext>(ConfigContext)
   const { sankey: sankeyConfig } = config
-  // !info - changed config.sankey.data here to work with our current upload pattern saved on config.data
-  const data = config?.data[0]
+
+  const isSankeyChartConfig = (config: AllChartsConfig | SankeyChartConfig): config is SankeyChartConfig => {
+    return config.visualizationType === 'Sankey'
+  }
+
   const [largestGroupWidth, setLargestGroupWidth] = useState(0)
   const groupRefs = useRef([])
 
@@ -60,6 +63,9 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
     setLargestGroupWidth(largest)
   }, [groupRefs, sankeyConfig, window.innerWidth])
 
+  if (!isSankeyChartConfig(config)) return
+  const data = config?.data[0]
+
   //Retrieve all the unique values for the Nodes
   const uniqueNodes = Array.from(new Set(data?.links?.flatMap(link => [link.source, link.target])))
 
@@ -109,6 +115,8 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
   }
 
   const activeConnection = (id: String) => {
+    if (!sankeyData?.nodes) return { sourceNodes: [], activeLinks: [] }
+
     const currentNode = sankeyData.nodes.find(node => node.id === id)
 
     const sourceNodes = []
@@ -137,12 +145,12 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
     return { sourceNodes, activeLinks }
   }
 
-  const tooltipVal = `${(data?.tooltips.find(item => item.node === tooltipID) || {}).value}`
-  const tooltipSummary = `${(data?.tooltips.find(item => item.node === tooltipID) || {}).summary}`
-  const tooltipColumn1Label = (data?.tooltips.find(item => item.node === tooltipID) || {}).column1Label
-  const tooltipColumn2Label = (data?.tooltips.find(item => item.node === tooltipID) || {}).column2Label
-  const tooltipColumn1 = (data?.tooltips.find(item => item.node === tooltipID) || {}).column1
-  const tooltipColumn2 = (data?.tooltips.find(item => item.node === tooltipID) || {}).column2
+  const tooltipVal = `${(data?.tooltips?.find(item => item.node === tooltipID) || {}).value}`
+  const tooltipSummary = `${(data?.tooltips?.find(item => item.node === tooltipID) || {}).summary}`
+  const tooltipColumn1Label = (data?.tooltips?.find(item => item.node === tooltipID) || {}).column1Label
+  const tooltipColumn2Label = (data?.tooltips?.find(item => item.node === tooltipID) || {}).column2Label
+  const tooltipColumn1 = (data?.tooltips?.find(item => item.node === tooltipID) || {}).column1
+  const tooltipColumn2 = (data?.tooltips?.find(item => item.node === tooltipID) || {}).column2
 
   const ColumnList = ({ columnData }) => {
     return (
@@ -229,12 +237,27 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
               */
               fill={sankeyConfig.nodeFontColor}
               fontWeight='bold' // font weight
-              style={{ pointerEvents: 'none' }}
               className='node-text'
+              style={{ pointerEvents: 'auto', cursor: 'pointer' }} // Enable pointer events
+              onClick={() => handleNodeClick(node.id)}
+              data-tooltip-html={data.tooltips && config.enableTooltips ? sankeyToolTip : null}
+              data-tooltip-id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
             >
               {(data?.storyNodeText?.find(storyNode => storyNode.StoryNode === node.id) || {}).segmentTextBefore}
             </Text>
-            <Text verticalAnchor='end' className={classStyle} x={node.x0! + textPositionHorizontal} y={(node.y1! + node.y0! + 25) / 2} fill={sankeyConfig.storyNodeFontColor || sankeyConfig.nodeFontColor} fontWeight='bold' textAnchor='start' style={{ pointerEvents: 'none' }}>
+            <Text
+              verticalAnchor='end'
+              className={classStyle}
+              x={node.x0! + textPositionHorizontal}
+              y={(node.y1! + node.y0! + 25) / 2}
+              fill={sankeyConfig.storyNodeFontColor || sankeyConfig.nodeFontColor}
+              fontWeight='bold'
+              textAnchor='start'
+              style={{ pointerEvents: 'auto', cursor: 'pointer' }} // Enable pointer events
+              onClick={() => handleNodeClick(node.id)}
+              data-tooltip-html={data.tooltips && config.enableTooltips ? sankeyToolTip : null}
+              data-tooltip-id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
+            >
               {typeof node.value === 'number' ? node.value.toLocaleString() : node.value}
             </Text>
             <Text
@@ -244,20 +267,32 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
               fill={sankeyConfig.nodeFontColor}
               fontWeight='bold'
               textAnchor={sankeyData.nodes.length === i ? 'end' : 'start'}
-              style={{ pointerEvents: 'none' }}
               className='node-text'
               verticalAnchor='end'
+              style={{ pointerEvents: 'auto', cursor: 'pointer' }} // Enable pointer events
+              onClick={() => handleNodeClick(node.id)}
+              data-tooltip-html={data.tooltips && config.enableTooltips ? sankeyToolTip : null}
+              data-tooltip-id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
             >
               {(data?.storyNodeText?.find(storyNode => storyNode.StoryNode === node.id) || {}).segmentTextAfter}
             </Text>
           </>
         ) : (
           <>
-            <text x={node.x0! + textPositionHorizontal} y={(node.y1! + node.y0!) / 2 + textPositionVertical} dominantBaseline='text-before-edge' fill={sankeyConfig.nodeFontColor} fontWeight='bold' textAnchor='start' style={{ pointerEvents: 'none' }}>
-              <tspan id={node.id} className='node-id'>
-                {node.id}
-              </tspan>
-            </text>
+            <Text
+              style={{ pointerEvents: 'auto', cursor: 'pointer' }} // Enable pointer events
+              onClick={() => handleNodeClick(node.id)}
+              data-tooltip-html={data.tooltips && config.enableTooltips ? sankeyToolTip : null}
+              data-tooltip-id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
+              x={node.x0! + textPositionHorizontal}
+              y={(node.y1! + node.y0!) / 2 + textPositionVertical}
+              dominantBaseline='text-before-edge'
+              fill={sankeyConfig.nodeFontColor}
+              fontWeight='bold'
+              textAnchor='start'
+            >
+              {node.id}
+            </Text>
             <text
               x={node.x0! + textPositionHorizontal}
               /* adding 30 allows the node value to be on the next line underneath the node id */
@@ -267,7 +302,10 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
               //fontSize={16}
               fontWeight='bold'
               textAnchor='start'
-              style={{ pointerEvents: 'none' }}
+              style={{ pointerEvents: 'auto', cursor: 'pointer' }} // Enable pointer events
+              onClick={() => handleNodeClick(node.id)}
+              data-tooltip-html={data.tooltips && config.enableTooltips ? sankeyToolTip : null}
+              data-tooltip-id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
             >
               <tspan className={classStyle}>{sankeyConfig.nodeValueStyle.textBefore + (typeof node.value === 'number' ? node.value.toLocaleString() : node.value) + sankeyConfig.nodeValueStyle.textAfter}</tspan>
             </text>
@@ -291,7 +329,20 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
       opacityValue = sankeyConfig.opacity.LinkOpacityInactive
     }
 
-    return <path key={i} d={path!} stroke={strokeColor} fill='none' strokeOpacity={opacityValue} strokeWidth={link.width! + 2} />
+    return (
+      <path
+        key={i}
+        d={path!}
+        stroke={strokeColor}
+        fill='none'
+        strokeOpacity={opacityValue}
+        strokeWidth={link.width! + 2}
+        style={{ pointerEvents: 'auto', cursor: 'pointer' }} // Enable pointer events
+        onClick={() => handleNodeClick(link.target.id || null)}
+        data-tooltip-html={data.tooltips && config.enableTooltips ? sankeyToolTip : null}
+        data-tooltip-id={`cdc-open-viz-tooltip-${runtime.uniqueId}-sankey`}
+      />
+    )
   })
 
   // max depth - calculates how many nodes deep the chart goes.
@@ -393,7 +444,9 @@ const Sankey = ({ width, height, runtime }: SankeyProps) => {
               textAnchor='start'
               style={{ pointerEvents: 'none' }}
             >
-              <tspan className={classStyle}>{sankeyConfig.nodeValueStyle.textBefore + (typeof node.value === 'number' ? node.value.toLocaleString() : node.value) + sankeyConfig.nodeValueStyle.textAfter}</tspan>
+              <tspan onClick={() => handleNodeClick(node.id)} className={classStyle}>
+                {sankeyConfig.nodeValueStyle.textBefore + (typeof node.value === 'number' ? node.value.toLocaleString() : node.value) + sankeyConfig.nodeValueStyle.textAfter}
+              </tspan>
             </text>
           </>
         )}

package/src/components/ScatterPlot/ScatterPlot.jsx

@@ -1,18 +1,32 @@
 import React, { useContext } from 'react'
 import ConfigContext from '../../ConfigContext'
 import { Group } from '@visx/group'
+import { formatNumber as formatColNumber } from '@cdc/core/helpers/cove/number'
 
-const ScatterPlot = ({ xScale, yScale, getXAxisData, getYAxisData }) => {
-  const { colorScale, transformedData: data, config, formatNumber, seriesHighlight, colorPalettes } = useContext(ConfigContext)
+const ScatterPlot = ({ xScale, yScale }) => {
+  const { transformedData: data, config, tableData, formatNumber, seriesHighlight, colorPalettes } = useContext(ConfigContext)
 
   // TODO: copied from line chart should probably be a constant somewhere.
-  let circleRadii = 4.5
+  const circleRadii = 4.5
   const hasMultipleSeries = Object.keys(config.runtime.seriesLabels).length > 1
-
-  const handleTooltip = (item, s) => `<div>
+  // tooltips for additional columns
+  const additionalColumns = Object.entries(config.columns)
+    .filter(([_, value]) => value.tooltips)
+    .map(([_, value]) => [
+      value.label || value.name,
+      value.name,
+      {
+        addColPrefix: value.prefix,
+        addColSuffix: value.suffix,
+        addColRoundTo: value.roundToPlace,
+        addColCommas: value.commas
+      }
+    ])
+  const handleTooltip = (item, s, dataIndex) => `<div>
     ${config.legend.showLegendValuesTooltip && config.runtime.seriesLabels && hasMultipleSeries ? `${config.runtime.seriesLabels[s] || ''}<br/>` : ''}
     ${config.xAxis.label}: ${formatNumber(item[config.xAxis.dataKey], 'bottom')} <br/>
-    ${config.yAxis.label}: ${formatNumber(item[s], 'left')}
+    ${config.yAxis.label}: ${formatNumber(item[s], 'left')}<br/>
+   ${additionalColumns.map(([label, name, options]) => `${label} : ${formatColNumber(tableData[dataIndex][name], 'left', false, config, options)}<br/>`).join('')}
 </div>`
 
   return (
@@ -37,9 +51,9 @@ const ScatterPlot = ({ xScale, yScale, getXAxisData, getYAxisData }) => {
               cx={xScale(item[config.xAxis.dataKey])}
               cy={yScale(item[s])}
               fill={displayArea ? seriesColor : 'transparent'}
-              fillOpacity={transparentArea ? .25 : 1}
+              fillOpacity={transparentArea ? 0.25 : 1}
               style={pointStyles}
-              data-tooltip-html={handleTooltip(item, s)}
+              data-tooltip-html={handleTooltip(item, s, dataIndex)}
               data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
               tabIndex={-1}
             />

package/src/components/ZoomBrush.tsx

@@ -6,6 +6,7 @@ import { FC, useContext, useEffect, useRef, useState } from 'react'
 import ConfigContext from '../ConfigContext'
 import { ScaleLinear, ScaleBand } from 'd3-scale'
 import { isDateScale } from '@cdc/core/helpers/cove/date'
+import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 
 interface Props {
   xScaleBrush: ScaleLinear<number, number>
@@ -14,10 +15,12 @@ interface Props {
   yMax: number
 }
 const ZoomBrush: FC<Props> = props => {
-  const { transformedData: data, config, parseDate, formatDate, updateConfig } = useContext(ConfigContext)
+  const { tableData, config, parseDate, formatDate, setBrushConfig, getTextWidth, dashboardConfig } = useContext(ConfigContext)
+  const sharedFilters = dashboardConfig?.dashboard?.sharedFilters ?? []
+  const isDashboardFilters = sharedFilters?.length > 0
   const { fontSize } = useBarChart()
-
-  const [filteredData, setFilteredData] = useState([...data])
+  const [showTooltip, setShowTooltip] = useState(false)
+  const [brushKey, setBrushKey] = useState(0)
   const brushRef = useRef(null)
   const radius = 15
 
@@ -25,16 +28,16 @@ const ZoomBrush: FC<Props> = props => {
     startPosition: 0,
     endPosition: 0,
     startValue: '',
-    endValue: ''
+    endValue: '',
+    xMax: props.xMax
   })
 
   const initialPosition = {
     start: { x: 0 },
     end: { x: props.xMax }
   }
-
   const style = {
-    fill: '#ddd',
+    fill: '#474747',
     stroke: 'blue',
     fillOpacity: 0.8,
     strokeOpacity: 0,
@@ -42,19 +45,19 @@ const ZoomBrush: FC<Props> = props => {
   }
 
   const onBrushChange = event => {
-    if (!event) return
-
-    const { xValues } = event
+    setShowTooltip(false)
+    const filteredValues = event?.xValues?.filter(val => val !== undefined)
+    if (filteredValues?.length === 0) return
 
     const dataKey = config.xAxis?.dataKey
 
-    const filteredData = data.filter(item => xValues.includes(item[dataKey]))
+    const brushedData = tableData.filter(item => filteredValues.includes(item[dataKey]))
 
-    const endValue = xValues
+    const endValue = filteredValues
       .slice()
       .reverse()
       .find(item => item !== undefined)
-    const startValue = xValues.find(item => item !== undefined)
+    const startValue = filteredValues.find(item => item !== undefined)
 
     const formatIfDate = value => (isDateScale(config.runtime.xAxis) ? formatDate(parseDate(value)) : value)
 
@@ -63,33 +66,58 @@ const ZoomBrush: FC<Props> = props => {
       startPosition: brushRef.current?.state.start.x,
       endPosition: brushRef.current?.state.end.x,
       endValue: formatIfDate(endValue),
-      startValue: formatIfDate(startValue)
+      startValue: formatIfDate(startValue),
+      xMax: props.xMax
     }))
 
-    setFilteredData(filteredData)
-  }
-
-  useEffect(() => {
-    updateConfig({
-      ...config,
-      brush: {
-        ...config.brush,
-        data: filteredData
+    setBrushConfig(prev => {
+      return {
+        ...prev,
+        isBrushing: brushRef.current?.state.isBrushing,
+        data: brushedData
       }
     })
-  }, [filteredData])
+  }
+  // reset brush if brush is off.
+  useEffect(() => {
+    if (!config.brush?.active) {
+      setBrushKey(prevKey => prevKey + 1)
+      setBrushConfig({
+        data: [],
+        isActive: false,
+        isBrushing: false
+      })
+    }
+  }, [config.brush?.active])
+
+  // reset brush if filters or exclusions are ON each time
 
-  //reset filters  if brush is off
   useEffect(() => {
-    if (!config.brush.active) {
-      setFilteredData(data)
+    const isFiltersActive = config.filters?.some(filter => filter.active)
+    const isExclusionsActive = config.exclusions?.active
+
+    if ((isFiltersActive || isExclusionsActive || isDashboardFilters) && config.brush?.active) {
+      setBrushKey(prevKey => prevKey + 1)
+      setBrushConfig(prev => {
+        return {
+          ...prev,
+          data: tableData
+        }
+      })
     }
-  }, [config.brush.active])
+    return () =>
+      setBrushConfig(prev => {
+        return {
+          ...prev,
+          data: []
+        }
+      })
+  }, [config.filters, config.exclusions, config.brush?.active, isDashboardFilters])
 
   const calculateTop = (): number => {
     const tickRotation = Number(config.xAxis.tickRotation) > 0 ? Number(config.xAxis.tickRotation) : 0
     let top = 0
-    const offSet = 20
+    const offSet = 30
     if (!config.xAxis.label) {
       if (!config.isResponsiveTicks && tickRotation) {
         top = Number(tickRotation + config.xAxis.tickWidthMax) / 1.6
@@ -106,7 +134,7 @@ const ZoomBrush: FC<Props> = props => {
     }
     if (config.xAxis.label) {
       if (!config.isResponsiveTicks && tickRotation) {
-        top = Number(config.xAxis.tickWidthMax + tickRotation)
+        top = Number(config.xAxis.tickWidthMax + tickRotation) + offSet
       }
 
       if (!config.isResponsiveTicks && !tickRotation) {
@@ -114,7 +142,7 @@ const ZoomBrush: FC<Props> = props => {
       }
 
       if (config.isResponsiveTicks && !tickRotation) {
-        top = Number(config.dynamicMarginTop ? config.dynamicMarginTop : config.xAxis.labelOffset) + offSet
+        top = Number(config.dynamicMarginTop ? config.dynamicMarginTop : config.xAxis.labelOffset) + offSet * 2
       }
     }
 
@@ -123,30 +151,58 @@ const ZoomBrush: FC<Props> = props => {
   if (!['Line', 'Bar', 'Area Chart', 'Combo'].includes(config.visualizationType)) {
     return
   }
+
   return (
-    <Group display={config.brush.active ? 'block' : 'none'} top={Number(props.yMax) + calculateTop()} left={Number(config.runtime.yAxis.size)} pointerEvents='fill'>
-      <rect fill='#eee' width={props.xMax} height={config.brush.height} rx={radius} />
-      <Brush
-        renderBrushHandle={props => <BrushHandle textProps={textProps} fontSize={fontSize[config.fontSize]} {...props} isBrushing={brushRef.current?.state.isBrushing} />}
-        innerRef={brushRef}
-        useWindowMoveEvents={true}
-        selectedBoxStyle={style}
-        xScale={props.xScaleBrush}
-        yScale={props.yScale}
-        width={props.xMax}
-        resizeTriggerAreas={['left', 'right']}
-        height={config.brush.height}
-        handleSize={8}
-        brushDirection='horizontal'
-        initialBrushPosition={initialPosition}
-        onChange={onBrushChange}
-      />
-    </Group>
+    <ErrorBoundary component='Brush Chart'>
+      <Group
+        onMouseMove={() => {
+          // show tooltip only once before brush started
+          if (textProps.startPosition === 0 && (textProps.endPosition === 0 || textProps.endPosition === props.xMax)) {
+            setShowTooltip(true)
+          }
+        }}
+        onMouseLeave={() => setShowTooltip(false)}
+        display={config.brush?.active ? 'block' : 'none'}
+        top={Number(props.yMax) + calculateTop()}
+        left={Number(config.runtime.yAxis.size)}
+        pointerEvents='fill'
+      >
+        <rect fill='#949494' width={props.xMax} height={config.brush.height} rx={radius} />
+        <Brush
+          key={brushKey}
+          disableDraggingOverlay={true}
+          renderBrushHandle={props => (
+            <BrushHandle
+              left={Number(config.runtime.yAxis.size)}
+              showTooltip={showTooltip}
+              getTextWidth={getTextWidth}
+              pixelDistance={textProps.endPosition - textProps.startPosition}
+              textProps={textProps}
+              fontSize={fontSize[config.fontSize]}
+              {...props}
+              isBrushing={brushRef.current?.state.isBrushing}
+            />
+          )}
+          innerRef={brushRef}
+          useWindowMoveEvents={true}
+          selectedBoxStyle={style}
+          xScale={props.xScaleBrush}
+          yScale={props.yScale}
+          width={props.xMax}
+          resizeTriggerAreas={['left', 'right']}
+          height={config.brush.height}
+          handleSize={8}
+          brushDirection='horizontal'
+          initialBrushPosition={initialPosition}
+          onChange={onBrushChange}
+        />
+      </Group>
+    </ErrorBoundary>
   )
 }
 
 const BrushHandle = props => {
-  const { x, isBrushActive, isBrushing, className, textProps } = props
+  const { x, isBrushActive, isBrushing, className, textProps, fontSize, showTooltip, left, getTextWidth } = props
   const pathWidth = 8
   if (!isBrushActive) {
     return null
@@ -155,14 +211,23 @@ const BrushHandle = props => {
   const isLeft = className.includes('left')
   const transform = isLeft ? 'scale(-1, 1)' : 'translate(0,0)'
   const textAnchor = isLeft ? 'end' : 'start'
+  const tooltipText = isLeft ? ` Drag edges to focus on a specific segment ` : ''
+  const textWidth = getTextWidth(tooltipText, `normal ${fontSize / 1.1}px sans-serif`)
 
   return (
-    <Group left={x + pathWidth / 2} top={-2}>
-      <Text pointerEvents='visiblePainted' dominantBaseline='hanging' x={0} verticalAnchor='start' textAnchor={textAnchor} fontSize={props.fontSize / 1.4} dy={10} y={15}>
-        {isLeft ? textProps.startValue : textProps.endValue}
-      </Text>
-      <path cursor='ew-resize' d='M0.5,10A6,6 0 0 1 6.5,16V14A6,6 0 0 1 0.5,20ZM2.5,18V12M4.5,18V12' fill={!isBrushing ? '#666' : '#297EF1'} strokeWidth='1' transform={transform}></path>
-    </Group>
+    <>
+      {showTooltip && (
+        <Text x={(Number(textProps.xMax) - textWidth) / 2} dy={-12} pointerEvents='visiblePainted' fontSize={fontSize / 1.1}>
+          {tooltipText}
+        </Text>
+      )}
+      <Group left={x + pathWidth / 2} top={-2}>
+        <Text pointerEvents='visiblePainted' dominantBaseline='hanging' x={isLeft ? 55 : -50} y={25} verticalAnchor='start' textAnchor={textAnchor} fontSize={fontSize / 1.4}>
+          {isLeft ? textProps.startValue : textProps.endValue}
+        </Text>
+        <path cursor='ew-resize' d='M0.5,10A6,6 0 0 1 6.5,16V14A6,6 0 0 1 0.5,20ZM2.5,18V12M4.5,18V12' fill={'#297EF1'} strokeWidth='1' transform={transform}></path>
+      </Group>
+    </>
   )
 }
 

package/src/data/initial-state.js

@@ -1,4 +1,6 @@
 export default {
+  annotations: [],
+  allowLineToBarGraph: undefined,
   type: 'chart',
   debugSvg: false,
   chartMessage: {
@@ -22,15 +24,17 @@ export default {
   tipRounding: 'top',
   isResponsiveTicks: false,
   general: {
-    showDownloadButton: false
+    annotationDropdownText: 'Annotations',
+    showDownloadButton: false,
+    showMissingDataLabel: true,
+    showSuppressedSymbol: true,
+    showZeroValueDataLabel: true
   },
   padding: {
     left: 5,
     right: 5
   },
-  suppressedData: [],
   preliminaryData: [],
-
   yAxis: {
     hideAxis: false,
     displayNumbersOnBar: false,
@@ -55,7 +59,9 @@ export default {
     axisPadding: 0,
     scalePadding: 10,
     tickRotation: 0,
-    anchors: []
+    anchors: [],
+    shoMissingDataLabel: true,
+    showMissingDataLine: true
   },
   boxplot: {
     plots: [],
@@ -131,7 +137,9 @@ export default {
     indexLabel: '',
     download: false,
     showVertical: true,
-    dateDisplayFormat: ''
+    dateDisplayFormat: '',
+    showMissingDataLabel: true,
+    showSuppressedSymbol: true
   },
   orientation: 'vertical',
   color: 'pinkpurple',
@@ -154,11 +162,11 @@ export default {
     lineMode: false,
     verticalSorted: false,
     highlightOnHover: false,
+    hideSuppressedLabels: false,
     seriesHighlight: []
   },
   brush: {
     height: 25,
-    data: [],
     active: false
   },
   exclusions: {

package/src/helpers/handleChartTabbing.ts

@@ -0,0 +1,8 @@
+import { ChartConfig } from './../types/ChartConfig'
+
+export const handleChartTabbing = (config: ChartConfig, legendId: string) => {
+  if (!config) return `dataTableSection`
+  if (!config.legend?.hide) return legendId
+  if (config?.title) return `dataTableSection__${config.title.replace(/\s/g, '')}`
+  return `dataTableSection`
+}

package/src/helpers/isConvertLineToBarGraph.ts

@@ -0,0 +1,4 @@
+export const isConvertLineToBarGraph = (visualizationType, filteredData, allowLineToBarGraph) => {
+  const convertLineToBarGraph = visualizationType === 'Line' && filteredData?.length < 3 && allowLineToBarGraph ? true : false
+  return convertLineToBarGraph
+}

package/src/hooks/{useBarChart.js → useBarChart.ts}

@@ -29,7 +29,7 @@ export const useBarChart = () => {
       updateConfig({
         ...config,
         yAxis: {
-          ...config,
+          ...config.yAxis,
           labelPlacement: 'Below Bar'
         }
       })
@@ -164,26 +164,13 @@ export const useBarChart = () => {
     if (!match?.color) return false
     return match
   }
-  const generateIconSize = barWidth => {
-    if (barWidth < 4) {
-      return 1
-    }
-    if (barWidth < 5) {
-      return 4
-    }
-    if (barWidth < 10) {
-      return 6
-    }
-    if (barWidth < 15) {
-      return 7
-    }
-    if (barWidth < 20) {
-      return 8
-    }
-    if (barWidth < 90) {
-      return 8
-    }
-    return 0
+
+  const shouldSuppress = bar => {
+    return config.preliminaryData?.some(pd => {
+      const matchesColumn = pd.column ? pd.column === bar.key : true
+      const matchesValue = String(bar.value) === String(pd.value) && pd.value !== ''
+      return matchesColumn && matchesValue && pd.symbol && pd.type === 'suppression'
+    })
   }
 
   const getAdditionalColumn = (series, xAxisDataValue) => {
@@ -224,13 +211,13 @@ export const useBarChart = () => {
   }
 
   return {
-    generateIconSize,
     isHorizontal,
     barBorderWidth,
     lollipopBarWidth,
     lollipopShapeSize,
     isLabelBelowBar,
     displayNumbersOnBar,
+    shouldSuppress,
     section,
     isRounded,
     isStacked,

package/src/hooks/useColorScale.ts

@@ -30,7 +30,7 @@ const useColorScale = () => {
     })
   }
   if (visualizationType === 'Bar' && visualizationSubType === 'regular' && series?.length === 1 && legend?.colorCode) {
-    const set = new Set(data.map(d => d[legend.colorCode]))
+    const set = new Set(data?.map(d => d[legend.colorCode]))
     colorScale = scaleOrdinal({
       domain: [...set],
       range: generatePalette([...set].length)