@cdc/chart 4.24.9-1 → 4.24.10

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

@@ -11,10 +11,11 @@ import { Line } from '@visx/shape'
 import { Label } from '../../types/Label'
 import { ChartConfig } 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'
 
 export interface LegendProps {
   colorScale: ColorScale
@@ -27,7 +28,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 +42,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,7 +75,6 @@ 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}
@@ -133,9 +129,9 @@ const Legend: React.FC<LegendProps> = forwardRef(
                         }}
                         role='button'
                       >
-                        <div>
+                        <div className='d-flex justify-content-center align-items-center'>
                           {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,7 +141,7 @@ const Legend: React.FC<LegendProps> = forwardRef(
                               />
                             </svg>
                           ) : (
-                            <div style={{ display: 'flex', flexDirection: 'column' }}>
+                            <div className='d-flex flex-column mt-1'>
                               <LegendShape
                                 shape={config.legend.style === 'boxes' ? 'square' : 'circle'}
                                 viewport={currentViewport}
@@ -204,7 +200,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,6 @@ const Legend = forwardRef((props, ref) => {
     transformedData: data,
     currentViewport,
     dimensions,
-    getTextWidth,
   } = useContext(ConfigContext)
   if (!config.legend) return null
   // create fn to reverse labels while legend is Bottom.  Legend-right , legend-left works by default.
@@ -28,7 +27,6 @@ const Legend = forwardRef((props, ref) => {
     !['Box Plot'].includes(config.visualizationType) && (
       <Fragment>
         <LegendComponent
-          getTextWidth={getTextWidth}
           dimensions={dimensions}
           ref={ref}
           skipId={props.skipId || 'legend'}

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')
     }