@cdc/chart 4.24.5 → 4.24.9

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,8 +15,11 @@ interface Props {
   yMax: number
 }
 const ZoomBrush: FC<Props> = props => {
-  const { tableData, config, parseDate, formatDate, setBrushConfig } = 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 [showTooltip, setShowTooltip] = useState(false)
   const [brushKey, setBrushKey] = useState(0)
   const brushRef = useRef(null)
   const radius = 15
@@ -24,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: '#AFA6A5 ',
+    fill: '#474747',
     stroke: 'blue',
     fillOpacity: 0.8,
     strokeOpacity: 0,
@@ -41,18 +45,19 @@ const ZoomBrush: FC<Props> = props => {
   }
 
   const onBrushChange = event => {
-    if (!event || !event.xValues) 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 brushedData = tableData.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)
 
@@ -61,7 +66,8 @@ 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
     }))
 
     setBrushConfig(prev => {
@@ -72,9 +78,9 @@ const ZoomBrush: FC<Props> = props => {
       }
     })
   }
-
+  // reset brush if brush is off.
   useEffect(() => {
-    if (!config.brush.active) {
+    if (!config.brush?.active) {
       setBrushKey(prevKey => prevKey + 1)
       setBrushConfig({
         data: [],
@@ -82,10 +88,15 @@ const ZoomBrush: FC<Props> = props => {
         isBrushing: false
       })
     }
-  }, [config.brush.active])
+  }, [config.brush?.active])
+
+  // reset brush if filters or exclusions are ON each time
 
   useEffect(() => {
-    if (config.filters?.some(filter => filter.active)) {
+    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 {
@@ -101,12 +112,12 @@ const ZoomBrush: FC<Props> = props => {
           data: []
         }
       })
-  }, [config.filters])
+  }, [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
@@ -123,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) {
@@ -131,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
       }
     }
 
@@ -142,30 +153,56 @@ const ZoomBrush: FC<Props> = props => {
   }
 
   return (
-    <Group display={config.brush.active ? 'block' : 'none'} top={Number(props.yMax) + calculateTop()} left={Number(config.runtime.yAxis.size)} pointerEvents='fill'>
-      <rect fill='#F7F7F7  ' width={props.xMax} height={config.brush.height} rx={radius} />
-      <Brush
-        key={brushKey}
-        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
@@ -174,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 ? '#000' : '#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,7 +24,11 @@ export default {
   tipRounding: 'top',
   isResponsiveTicks: false,
   general: {
-    showDownloadButton: false
+    annotationDropdownText: 'Annotations',
+    showDownloadButton: false,
+    showMissingDataLabel: true,
+    showSuppressedSymbol: true,
+    hideNullValue: true
   },
   padding: {
     left: 5,
@@ -53,7 +59,10 @@ export default {
     axisPadding: 0,
     scalePadding: 10,
     tickRotation: 0,
-    anchors: []
+    anchors: [],
+    shoMissingDataLabel: true,
+    showMissingDataLine: true,
+    categories: []
   },
   boxplot: {
     plots: [],
@@ -116,9 +125,7 @@ export default {
     labelOffset: 65,
     axisPadding: 200,
     target: 0,
-    maxTickRotation: 0,
-    showSuppressedSymbol: true,
-    showSuppressedLine: true
+    maxTickRotation: 0
   },
   table: {
     label: 'Data Table',
@@ -131,7 +138,9 @@ export default {
     indexLabel: '',
     download: false,
     showVertical: true,
-    dateDisplayFormat: ''
+    dateDisplayFormat: '',
+    showMissingDataLabel: true,
+    showSuppressedSymbol: true
   },
   orientation: 'vertical',
   color: 'pinkpurple',
@@ -151,11 +160,20 @@ export default {
     dynamicLegendItemLimit: 5,
     dynamicLegendItemLimitMessage: 'Dynamic Legend Item Limit Hit.',
     dynamicLegendChartMessage: 'Select Options from the Legend',
+    label: '',
     lineMode: false,
     verticalSorted: false,
     highlightOnHover: false,
     hideSuppressedLabels: false,
-    seriesHighlight: []
+    hideSuppressionLink: false,
+    seriesHighlight: [],
+    style: 'circles',
+    subStyle: 'linear blocks',
+    tickRotation: '',
+    hideBorder: {
+      side: false,
+      topBottom: true
+    }
   },
   brush: {
     height: 25,

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'
         }
       })
@@ -210,43 +210,6 @@ export const useBarChart = () => {
     if (config.legend.highlightOnHover && config.legend.behavior === 'highlight') setSeriesHighlight([])
   }
 
-  const composeSuppressionBars = ({ bar }) => {
-    const suppresedBarHeight = config.xAxis.showSuppressedLine ? 3 : 0
-    const ASTERISK = 'Asterisk'
-    const getIconPadding = symbol => (String(symbol).includes(ASTERISK) ? -5 : -suppresedBarHeight * 3)
-    const getVerticalAnchor = symbol => {
-      return String(symbol).includes(ASTERISK) ? 'middle' : 'end'
-    }
-    const getIconSize = (symbol, barWidth) => {
-      switch (symbol) {
-        case ASTERISK:
-          return barWidth * 1.2
-        case 'Double ' + ASTERISK:
-          return barWidth
-        default:
-          return barWidth / 1.5
-      }
-    }
-
-    function shouldSuppressBar() {
-      const isSuppressed = config.preliminaryData.some(pd => {
-        const selectedSuppressionColumn = !pd.column || pd.column === bar.key
-        const isValueMatch = String(pd.value) === String(bar.value) && pd.value !== '' && pd.type === 'suppression'
-
-        return isValueMatch && selectedSuppressionColumn
-      })
-
-      return isSuppressed && config.xAxis.showSuppressedSymbol
-    }
-
-    return {
-      suppresedBarHeight,
-      getIconSize,
-      getIconPadding,
-      getVerticalAnchor,
-      isSuppressed: shouldSuppressBar()
-    }
-  }
   return {
     isHorizontal,
     barBorderWidth,
@@ -273,7 +236,6 @@ export const useBarChart = () => {
     hoveredBar,
     setHoveredBar,
     onMouseOverBar,
-    onMouseLeaveBar,
-    composeSuppressionBars
+    onMouseLeaveBar
   }
 }

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)

package/src/hooks/useLegendClasses.ts

@@ -0,0 +1,68 @@
+type ConfigType = {
+  legend: {
+    position: 'left' | 'bottom' | 'top' | 'right'
+    singleRow?: boolean
+    reverseLabelOrder?: boolean
+    verticalSorted?: boolean
+    hideBorder: {
+      side?: boolean
+      topBottom?: boolean
+    }
+  }
+}
+
+const useLegendClasses = (config: ConfigType) => {
+  const containerClasses = ['legend-container']
+  const innerClasses = ['legend-container__inner']
+
+  // Handle legend positioning
+  switch (config.legend.position) {
+    case 'left':
+      containerClasses.push('left')
+      break
+    case 'right':
+      containerClasses.push('right')
+      break
+    case 'bottom':
+      containerClasses.push('bottom')
+      innerClasses.push('double-column', 'bottom')
+      break
+    case 'top':
+      containerClasses.push('top')
+      innerClasses.push('double-column', 'top')
+      break
+  }
+
+  // Handle single row configuration for 'bottom' and 'top' positions
+  if (['bottom', 'top'].includes(config.legend.position) && config.legend.singleRow) {
+    innerClasses.push('single-row')
+  }
+
+  // Reverse label order
+  if (config.legend.reverseLabelOrder) {
+    innerClasses.push('d-flex', 'flex-column-reverse')
+  }
+
+  // Vertical sorting for 'bottom' and 'top' positions
+  if (['bottom', 'top'].includes(config.legend.position) && config.legend.verticalSorted) {
+    innerClasses.push('vertical-sorted')
+  }
+
+  // Configure border classes
+  if (
+    config.legend.hideBorder.side &&
+    (['right', 'left'].includes(config.legend.position) || !config.legend.position)
+  ) {
+    containerClasses.push('no-border')
+  }
+
+  if (config.legend.hideBorder.topBottom && ['top', 'bottom'].includes(config.legend.position)) {
+    containerClasses.push('no-border')
+  }
+
+  return {
+    containerClasses,
+    innerClasses
+  }
+}
+export default useLegendClasses

package/src/hooks/useMinMax.ts

@@ -1,5 +1,6 @@
 import { ChartConfig } from '../types/ChartConfig'
 import _ from 'lodash'
+import { isConvertLineToBarGraph } from '../helpers/isConvertLineToBarGraph'
 
 type UseMinMaxProps = {
   /** config - standard chart config */
@@ -30,13 +31,17 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
     return { min, max }
   }
 
+  const checkLineToBarGraph = () => {
+    return isConvertLineToBarGraph(config.visualizationType, data, config.allowLineToBarGraph)
+  }
+
   const { visualizationType, series } = config
   const { max: enteredMaxValue, min: enteredMinValue } = config.runtime.yAxis
   const minRequiredCIPadding = 1.15 // regardless of Editor if CI data, there must be 10% padding added
-
+  const isLogarithmicAxis = config.yAxis.type === 'logarithmic'
   // do validation bafore applying t0 charts
   const isMaxValid = existPositiveValue ? enteredMaxValue >= maxValue : enteredMaxValue >= 0
-  const isMinValid = config.useLogScale ? enteredMinValue >= 0 : (enteredMinValue <= 0 && minValue >= 0) || (enteredMinValue <= minValue && minValue < 0)
+  const isMinValid = isLogarithmicAxis ? enteredMinValue >= 0 : (enteredMinValue <= 0 && minValue >= 0) || (enteredMinValue <= minValue && minValue < 0)
 
   min = enteredMinValue && isMinValid ? enteredMinValue : minValue
   max = enteredMaxValue && isMaxValid ? enteredMaxValue : Number.MIN_VALUE
@@ -126,10 +131,10 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
   }
 
   // this should not apply to bar charts if there is negative CI data
-  if ((visualizationType === 'Bar' || (visualizationType === 'Combo' && !isAllLine)) && min > 0) {
+  if ((visualizationType === 'Bar' || checkLineToBarGraph() || (visualizationType === 'Combo' && !isAllLine)) && min > 0) {
     min = 0
   }
-  if ((config.visualizationType === 'Bar' || (config.visualizationType === 'Combo' && !isAllLine)) && min < 0) {
+  if ((config.visualizationType === 'Bar' || checkLineToBarGraph() || (config.visualizationType === 'Combo' && !isAllLine)) && min < 0) {
     min = min * 1.1
   }
 
@@ -138,7 +143,7 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
       min = 0
     }
     if (enteredMinValue) {
-      const isMinValid = config.useLogScale ? enteredMinValue >= 0 && enteredMinValue < minValue : enteredMinValue < minValue
+      const isMinValid = isLogarithmicAxis ? enteredMinValue >= 0 && enteredMinValue < minValue : enteredMinValue < minValue
       min = enteredMinValue && isMinValid ? enteredMinValue : minValue
     }
   }
@@ -148,8 +153,8 @@ const useMinMax = ({ config, minValue, maxValue, existPositiveValue, data, isAll
     min = enteredMinValue && isMinValid ? enteredMinValue : 0
   }
 
-  if (config.visualizationType === 'Line') {
-    const isMinValid = config.useLogScale ? enteredMinValue >= 0 && enteredMinValue < minValue : enteredMinValue < minValue
+  if (config.visualizationType === 'Line' && !checkLineToBarGraph()) {
+    const isMinValid = isLogarithmicAxis ? enteredMinValue >= 0 && enteredMinValue < minValue : enteredMinValue < minValue
     // update minValue for (0) Suppression points
     const suppressedMinValue = tableData?.some((dataItem, index) => {
       return config.preliminaryData?.some(pd => {