@cdc/chart 4.24.9 → 4.24.11

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

@@ -9,17 +9,20 @@ import { handleLineType } from '../../helpers/handleLineType'
 import { getMarginTop, getGradientConfig, getMarginBottom } from './helpers/index'
 import { Line } from '@visx/shape'
 import { Label } from '../../types/Label'
-import { ChartConfig } from '../../types/ChartConfig'
+import { ChartConfig, ViewportSize } from '../../types/ChartConfig'
 import { ColorScale } from '../../types/ChartContext'
-import { forwardRef } from 'react'
+import { forwardRef, useState } from 'react'
 import LegendSuppression from './Legend.Suppression'
 import LegendGradient from '@cdc/core/components/Legend/Legend.Gradient'
 import { DimensionsType } from '@cdc/core/types/Dimensions'
+import { isLegendWrapViewport } from '@cdc/core/helpers/viewports'
+
+const LEGEND_PADDING = 30
 
 export interface LegendProps {
   colorScale: ColorScale
   config: ChartConfig
-  currentViewport: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
+  currentViewport: ViewportSize
   formatLabels: (labels: Label[]) => Label[]
   highlight: Function
   highlightReset: Function
@@ -27,7 +30,6 @@ export interface LegendProps {
   seriesHighlight: string[]
   skipId: string
   dimensions: DimensionsType // for responsive width legend
-  getTextWidth: (text: string, font: string) => string
 }
 
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
@@ -42,24 +44,21 @@ const Legend: React.FC<LegendProps> = forwardRef(
       currentViewport,
       formatLabels,
       skipId = 'legend',
-      dimensions,
-      getTextWidth
+      dimensions
     },
     ref
   ) => {
     const { innerClasses, containerClasses } = useLegendClasses(config)
     const { runtime, legend } = config
 
+    const [hasSuppression, setHasSuppression] = useState(false)
+
     const isBottomOrSmallViewport =
-      legend?.position === 'bottom' || (['sm', 'xs', 'xxs'].includes(currentViewport) && !legend.hide)
+      legend?.position === 'bottom' || (isLegendWrapViewport(currentViewport) && !legend.hide)
 
     const legendClasses = {
-      marginBottom: getMarginBottom(isBottomOrSmallViewport, config),
-
-      marginTop:
-        isBottomOrSmallViewport && config.orientation === 'horizontal'
-          ? `${config.yAxis.label && config.isResponsiveTicks ? config.dynamicMarginTop : config.runtime.xAxis.size}px`
-          : getMarginTop(isBottomOrSmallViewport, config.brush.active, legend)
+      marginBottom: getMarginBottom(config, hasSuppression),
+      marginTop: getMarginTop(isBottomOrSmallViewport, config)
     }
 
     const { HighLightedBarUtils } = useHighlightedBars(config)
@@ -78,11 +77,10 @@ const Legend: React.FC<LegendProps> = forwardRef(
         {legend.label && <h3>{parse(legend.label)}</h3>}
         {legend.description && <p>{parse(legend.description)}</p>}
         <LegendGradient
-          getTextWidth={getTextWidth}
           config={config}
           {...getGradientConfig(config, formatLabels, colorScale)}
           dimensions={dimensions}
-          currentViewport={currentViewport}
+          parentPaddingToSubtract={legend.hideBorder ? 0 : LEGEND_PADDING}
         />
 
         <LegendOrdinal scale={colorScale} itemDirection='row' labelMargin='0 20px 0 0' shapeMargin='0 10px 0'>
@@ -133,9 +131,9 @@ const Legend: React.FC<LegendProps> = forwardRef(
                         }}
                         role='button'
                       >
-                        <div>
+                        <>
                           {config.visualizationType === 'Line' && config.legend.style === 'lines' ? (
-                            <svg width={40} height={20}>
+                            <svg width={40} height={25}>
                               <Line
                                 from={{ x: 10, y: 10 }}
                                 to={{ x: 40, y: 10 }}
@@ -145,17 +143,14 @@ const Legend: React.FC<LegendProps> = forwardRef(
                               />
                             </svg>
                           ) : (
-                            <div style={{ display: 'flex', flexDirection: 'column' }}>
+                            <>
                               <LegendShape
                                 shape={config.legend.style === 'boxes' ? 'square' : 'circle'}
-                                viewport={currentViewport}
-                                margin='0'
                                 fill={label.value}
-                                display={true}
                               />
-                            </div>
+                            </>
                           )}
-                        </div>
+                        </>
 
                         <LegendLabel align='left' margin='0 0 0 4px'>
                           {label.text}
@@ -204,7 +199,11 @@ const Legend: React.FC<LegendProps> = forwardRef(
                   })}
                 </div>
 
-                <LegendSuppression config={config} isBottomOrSmallViewport={isBottomOrSmallViewport} />
+                <LegendSuppression
+                  config={config}
+                  isBottomOrSmallViewport={isBottomOrSmallViewport}
+                  setHasSuppression={setHasSuppression}
+                />
               </>
             )
           }}

package/src/components/Legend/Legend.Suppression.tsx

@@ -7,11 +7,11 @@ interface LegendProps {
   isBottomOrSmallViewport: boolean
 }
 
-const LegendSuppression: React.FC<LegendProps> = ({ config, isBottomOrSmallViewport }) => {
+const LegendSuppression: React.FC<LegendProps> = ({ config, isBottomOrSmallViewport, setHasSuppression }) => {
   const { preliminaryData, visualizationType, visualizationSubType, legend } = config
 
   const hasOpenCircleEffects = () =>
-    preliminaryData?.some(pd => pd.label && pd.type === 'effect' && pd.style === 'Open Circles') &&
+    preliminaryData?.some(pd => pd.label && pd.type === 'effect' && pd.style !== 'Filled Circles') &&
     ['Line', 'Combo'].includes(visualizationType)
 
   const shouldShowSuppressedLabels = () =>
@@ -100,6 +100,13 @@ const LegendSuppression: React.FC<LegendProps> = ({ config, isBottomOrSmallViewp
   const getLegendContainerClass = () =>
     legend.singleRow && isBottomOrSmallViewport ? 'legend-container__inner bottom single-row' : ''
 
+  const shouldShowSuppressedInfo = () =>
+    !config.legend.hideSuppressionLink &&
+    config.visualizationSubType !== 'stacked' &&
+    preliminaryData?.some(pd => pd.label && pd.type === 'suppression' && pd.value && (pd?.style || pd.symbol))
+
+  setHasSuppression(shouldShowSuppressedInfo())
+
   return (
     <React.Fragment>
       {hasOpenCircleEffects() && (
@@ -115,24 +122,22 @@ const LegendSuppression: React.FC<LegendProps> = ({ config, isBottomOrSmallViewp
           <div className={getLegendContainerClass()}>{renderSuppressedItems()}</div>
         </React.Fragment>
       )}
-      {!config.legend.hideSuppressionLink &&
-        config.visualizationSubType !== 'stacked' &&
-        preliminaryData?.some(pd => pd.label && pd.type === 'suppression' && pd.value && (pd?.style || pd.symbol)) && (
-          <div className='legend-container__outer definition-link'>
-            <Icon alt='info-icon' display='info' />
-            <p>
-              This chart contains
-              <a // prettier-ignore
-                onClick={handleLinkClick}
-                data-tooltip-content='Data is suppressed to maintain statistical reliability. This occurs when the number of respondents or reported values does not meet the minimum reporting threshold.'
-                data-tooltip-id='my-tooltip'
-                href='no-router-link'
-              >
-                suppressed data
-              </a>
-            </p>
-          </div>
-        )}
+      {shouldShowSuppressedInfo() && (
+        <div className='legend-container__outer definition-link'>
+          <Icon alt='info-icon' display='info' />
+          <p>
+            This chart contains
+            <a // prettier-ignore
+              onClick={handleLinkClick}
+              data-tooltip-content='Data is suppressed to maintain statistical reliability. This occurs when the number of respondents or reported values does not meet the minimum reporting threshold.'
+              data-tooltip-id='my-tooltip'
+              href='no-router-link'
+            >
+              suppressed data
+            </a>
+          </p>
+        </div>
+      )}
 
       <ReactTooltip // prettier-ignore
         id='my-tooltip'

package/src/components/Legend/Legend.tsx

@@ -17,7 +17,7 @@ const Legend = forwardRef((props, ref) => {
     transformedData: data,
     currentViewport,
     dimensions,
-    getTextWidth,
+    getTextWidth
   } = useContext(ConfigContext)
   if (!config.legend) return null
   // create fn to reverse labels while legend is Bottom.  Legend-right , legend-left works by default.
@@ -25,23 +25,21 @@ const Legend = forwardRef((props, ref) => {
   const createLegendLabels = createFormatLabels(config, tableData, data, colorScale)
 
   return (
-    !['Box Plot'].includes(config.visualizationType) && (
-      <Fragment>
-        <LegendComponent
-          getTextWidth={getTextWidth}
-          dimensions={dimensions}
-          ref={ref}
-          skipId={props.skipId || 'legend'}
-          config={config}
-          colorScale={colorScale}
-          seriesHighlight={seriesHighlight}
-          highlight={highlight}
-          highlightReset={highlightReset}
-          currentViewport={currentViewport}
-          formatLabels={createLegendLabels}
-        />
-      </Fragment>
-    )
+    <Fragment>
+      <LegendComponent
+        getTextWidth={getTextWidth}
+        dimensions={dimensions}
+        ref={ref}
+        skipId={props.skipId || 'legend'}
+        config={config}
+        colorScale={colorScale}
+        seriesHighlight={seriesHighlight}
+        highlight={highlight}
+        highlightReset={highlightReset}
+        currentViewport={currentViewport}
+        formatLabels={createLegendLabels}
+      />
+    </Fragment>
   )
 })
 

package/src/components/Legend/helpers/index.ts

@@ -1,8 +1,3 @@
-export const getMarginTop = (isBottomOrSmallViewport, isBrushActive, legend) => {
-  if (!isBottomOrSmallViewport) return '0px'
-  if (isBrushActive && legend.position === 'bottom') return '35px'
-}
-
 export const getGradientConfig = (config, formatLabels, colorScale) => {
   const defaultValue = [{ datum: '', index: 0, text: '', value: '' }]
 
@@ -15,21 +10,23 @@ export const getGradientConfig = (config, formatLabels, colorScale) => {
   return { colors, labels }
 }
 
-export const getMarginBottom = (isBottomOrSmallViewport, config) => {
-  const isSuppressedActive = config.preliminaryData.some(pd => pd.label) && !config.legend.hideSuppressionLink
-
-  const isLegendTop = config.legend?.position === 'top' && !config.legend.hide
-
-  let marginBottom = '0px'
-  if (isLegendTop && !isSuppressedActive) {
-    marginBottom = config.legend.hideBorder.topBottom ? '15px' : '25px'
-  }
-  if (isLegendTop && isSuppressedActive) {
-    marginBottom = '75px'
+export const getMarginTop = (isBottomOrSmallViewport, config) => {
+  if (!isBottomOrSmallViewport) {
+    return '0px'
   }
-  if (isBottomOrSmallViewport && isSuppressedActive) {
-    marginBottom = '45px'
+  if (isBottomOrSmallViewport && config.brush?.active) {
+    return '35px'
   }
+  return '20px'
+}
+export const getMarginBottom = (config, hasSuppression) => {
+  const isLegendTop = config.legend?.position === 'top' && !config.legend.hide
+
+  let marginBottom = 0
+
+  if (isLegendTop) marginBottom = config.legend.hideBorder.topBottom ? 15 : 25
+
+  if (hasSuppression) marginBottom += 40
 
-  return marginBottom
+  return `${marginBottom}px`
 }

package/src/components/LegendWrapper.tsx

@@ -1,6 +1,8 @@
 import React, { useContext } from 'react'
 import ConfigContext from '../ConfigContext'
 
+import { isLegendWrapViewport } from '@cdc/core/helpers/viewports'
+
 type LegendWrapperProps = {
   children: React.ReactNode
 }
@@ -13,7 +15,7 @@ const LegendWrapper: React.FC<LegendWrapperProps> = props => {
   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)) {
+    if (legend.position === 'bottom' || legend.position === 'top' || isLegendWrapViewport(currentViewport)) {
       classes = classes.filter(item => item !== 'flex-nowrap')
       classes.push('flex-wrap')
     }

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

@@ -147,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]) {
@@ -171,6 +178,9 @@ const LineChartCircle = (props: LineChartCircleProps) => {
           res = true
         }
       }
+      if (isMatch) {
+        res = false
+      }
 
       return res
     }

package/src/components/LineChart/helpers.ts

@@ -92,8 +92,9 @@ export const filterCircles = (
 
 const isCalculable = value => !isNaN(parseFloat(value)) && isFinite(value)
 const handleFirstIndex = (data, seriesKey, preliminaryData) => {
+  let pairCount = '0'
   const result = {
-    data: [],
+    data: { '0': [] },
     style: ''
   }
 
@@ -116,7 +117,7 @@ const handleFirstIndex = (data, seriesKey, preliminaryData) => {
   if (suppressionData && suppressionData.style) {
     // Modify first item and add to result
     const modifiedItem = { ...firstIndexDataItem, [seriesKey]: 0 }
-    result.data.push(modifiedItem)
+    result.data[pairCount].push(modifiedItem)
     result.style = suppressionData.style
 
     // Find the next calculable item index
@@ -125,19 +126,20 @@ const handleFirstIndex = (data, seriesKey, preliminaryData) => {
       nextIndex++
     }
     if (nextIndex < data.length) {
-      result.data.push(data[nextIndex])
+      result.data[pairCount].push(data[nextIndex])
     }
   } else {
     // If no suppression, just add the first item
-    result.data.push(firstIndexDataItem)
+    result.data[pairCount].push(firstIndexDataItem)
   }
 
   return result
 }
 
 const handleLastIndex = (data, seriesKey, preliminaryData) => {
+  let pairCount = '0'
   const result = {
-    data: [],
+    data: { '0': [] },
     style: ''
   }
   let lastAddedIndex = -1 // Tracks the last index added to the result
@@ -152,7 +154,7 @@ const handleLastIndex = (data, seriesKey, preliminaryData) => {
     ) {
       const lastIndex = data.length - 1
       const modifiedItem = { ...data[lastIndex], [seriesKey]: 0 }
-      result.data.push(modifiedItem)
+      result.data[pairCount].push(modifiedItem)
 
       // Find previous calculable item
       let prevIndex = lastIndex - 1
@@ -160,7 +162,7 @@ const handleLastIndex = (data, seriesKey, preliminaryData) => {
         prevIndex--
       }
       if (prevIndex >= 0 && lastAddedIndex !== prevIndex) {
-        result.data.push(data[prevIndex])
+        result.data[pairCount].push(data[prevIndex])
         lastAddedIndex = prevIndex
       }
       result.style = pd.style
@@ -170,47 +172,48 @@ const handleLastIndex = (data, seriesKey, preliminaryData) => {
   return result
 }
 
-function handleMiddleIndices(data, seriesKey, dataKey, preliminaryData) {
-  const result = {
-    data: [],
+function handleMiddleIndices(data, seriesKey, preliminaryData) {
+  // slice data to remove first and last object these no need for handleMiddleIndices
+
+  let result = {
+    data: {},
     style: ''
   }
+  // Variable to count the number of sibling pairs found
+  let pairCount = 1
+
+  // Loop through the data array to find each occurrence of the target value
+  data.forEach((item, index) => {
+    preliminaryData.forEach(pd => {
+      const targetValue = pd.value
+      if (item[seriesKey] === targetValue) {
+        let siblingBefore = null
+        let siblingAfter = null
+
+        // Find the nearest numeric sibling before the current index
+        for (let i = index - 1; i >= 0; i--) {
+          if (isCalculable(data[i][seriesKey])) {
+            siblingBefore = data[i]
+            break // Stop searching once a valid sibling is found
+          }
+        }
 
-  const isValidMiddleIndex = index => index > 0 && index < data.length - 1
-
-  preliminaryData?.forEach(pd => {
-    if (pd.type === 'effect' || pd.hideLineStyle) return
-    const targetValue = pd.value
-
-    // Find all indices
-    const matchingIndices = data.reduce((indices, item, index) => {
-      if (item[seriesKey] === targetValue && isValidMiddleIndex(index) && (!pd.column || pd.column === seriesKey)) {
-        indices.push(index)
-      }
-      return indices
-    }, [])
-
-    // Process each valid index
-    matchingIndices.forEach(i => {
-      result.style = pd.style
-      // Add previous object if calculable
-      if (isCalculable(data[i - 1][seriesKey])) {
-        result.data.push(data[i - 1])
-      }
+        // Find the nearest numeric sibling after the current index
+        for (let j = index + 1; j < data.length; j++) {
+          if (isCalculable(data[j][seriesKey])) {
+            siblingAfter = data[j]
+            break // Stop searching once a valid sibling is found
+          }
+        }
 
-      // Find and add the next calculable object
-      const nextIndex = data
-        .slice(i + 1)
-        .findIndex(item => item[seriesKey] !== targetValue && isCalculable(item[seriesKey]))
-      if (nextIndex !== -1) {
-        result.data.push(data[i + 1 + nextIndex])
+        // Only add siblings to results if both siblings are found
+        if (siblingBefore && siblingAfter) {
+          result.style = pd.style
+          result.data[pairCount++] = [siblingBefore, siblingAfter]
+        }
       }
     })
   })
-
-  // Deduplicate entries
-  result.data = _.uniqWith(result.data, (a, b) => a[dataKey] === b[dataKey] && a[seriesKey] === b[seriesKey])
-
   return result
 }
 
@@ -221,7 +224,9 @@ export const createDataSegments = (data, seriesKey, preliminaryData, dataKey) =>
   // Process the last index if necessary
   const lastSegment = handleLastIndex(data, seriesKey, preliminaryData)
   // Process the middle segment
-  const middleSegments = handleMiddleIndices(data, seriesKey, dataKey, preliminaryData)
+  const middleSegments = handleMiddleIndices(data, seriesKey, preliminaryData)
+
   // Combine all segments into a single array
-  return [firstSegment, middleSegments, lastSegment].filter(segment => segment.data.length > 0 && segment.style !== '')
+  return [firstSegment, middleSegments, lastSegment]
+  // return [firstSegment, middleSegments, lastSegment].filter(segment => segment.data.length > 0 && segment.style !== '')
 }