@cdc/chart 4.24.5 → 4.24.9

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

@@ -1,16 +1,20 @@
 import parse from 'html-react-parser'
 import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend'
-import LegendCircle from '@cdc/core/components/LegendCircle'
+import LegendShape from '@cdc/core/components/LegendShape'
 import Button from '@cdc/core/components/elements/Button'
 import useLegendClasses from '../../hooks/useLegendClasses'
 import { useHighlightedBars } from '../../hooks/useHighlightedBars'
 import { handleLineType } from '../../helpers/handleLineType'
-import { useBarChart } from '../../hooks/useBarChart'
+
+import { getMarginTop, getGradientConfig, getMarginBottom } from './helpers/index'
 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 LegendSuppression from './Legend.Suppression'
+import LegendGradient from '@cdc/core/components/Legend/Legend.Gradient'
+import { DimensionsType } from '@cdc/core/types/Dimensions'
 
 export interface LegendProps {
   colorScale: ColorScale
@@ -22,210 +26,197 @@ export interface LegendProps {
   ref: React.Ref<() => void>
   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 */
-const Legend: React.FC<LegendProps> = forwardRef(({ config, colorScale, seriesHighlight, highlight, highlightReset, currentViewport, formatLabels, skipId = 'legend' }, ref) => {
-  const { innerClasses, containerClasses } = useLegendClasses(config)
-  const { runtime, orientation, legend } = config
-
-  if (!legend) return null
-  const isBottomOrSmallViewport = legend.position === 'bottom' || ['sm', 'xs', 'xxs'].includes(currentViewport)
-
-  const legendClasses = {
-    marginBottom: isBottomOrSmallViewport ? '15px' : '0px',
-    marginTop: isBottomOrSmallViewport ? '15px' : '0px'
-  }
-
-  const { HighLightedBarUtils } = useHighlightedBars(config)
-
-  let highLightedLegendItems = HighLightedBarUtils.findDuplicates(config.highlightedBarValues)
-  const fontSize = ['sm', 'xs', 'xxs'].includes(currentViewport) ? { fontSize: '11px' } : null
-
-  return (
-    <aside ref={ref} style={legendClasses} id={skipId || 'legend'} className={containerClasses.join(' ')} role='region' aria-label='legend' tabIndex={0}>
-      {legend.label && <h3>{parse(legend.label)}</h3>}
-      {legend.description && <p style={fontSize}>{parse(legend.description)}</p>}
+const Legend: React.FC<LegendProps> = forwardRef(
+  (
+    {
+      config,
+      colorScale,
+      seriesHighlight,
+      highlight,
+      highlightReset,
+      currentViewport,
+      formatLabels,
+      skipId = 'legend',
+      dimensions,
+      getTextWidth
+    },
+    ref
+  ) => {
+    const { innerClasses, containerClasses } = useLegendClasses(config)
+    const { runtime, legend } = config
+
+    const isBottomOrSmallViewport =
+      legend?.position === 'bottom' || (['sm', 'xs', 'xxs'].includes(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)
+    }
+
+    const { HighLightedBarUtils } = useHighlightedBars(config)
+    let highLightedLegendItems = HighLightedBarUtils.findDuplicates(config.highlightedBarValues)
+    if (!legend) return null
+    return (
+      <aside
+        ref={ref}
+        style={legendClasses}
+        id={skipId || 'legend'}
+        className={containerClasses.join(' ')}
+        role='region'
+        aria-label='legend'
+        tabIndex={0}
+      >
+        {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}
+        />
+
+        <LegendOrdinal scale={colorScale} itemDirection='row' labelMargin='0 20px 0 0' shapeMargin='0 10px 0'>
+          {labels => {
+            return (
+              <>
+                <div className={innerClasses.join(' ')}>
+                  {formatLabels(labels as Label[]).map((label, i) => {
+                    let className = ['legend-item', `legend-text--${label.text.replace(' ', '').toLowerCase()}`]
+                    let itemName = label.datum
+
+                    // Filter excluded data keys from legend
+                    if (config.exclusions.active && config.exclusions.keys?.includes(itemName)) {
+                      return null
+                    }
 
-      <LegendOrdinal scale={colorScale} itemDirection='row' labelMargin='0 20px 0 0' shapeMargin='0 10px 0'>
-        {labels => {
-          return (
-            <>
-              <div className={innerClasses.join(' ')}>
-                {formatLabels(labels as Label[]).map((label, i) => {
-                  let className = ['legend-item', `legend-text--${label.text.replace(' ', '').toLowerCase()}`]
-                  let itemName = label.datum
+                    if (runtime.seriesLabels) {
+                      let index = config.runtime.seriesLabelsAll.indexOf(itemName)
+                      itemName = config.runtime.seriesKeys[index]
 
-                  // Filter excluded data keys from legend
-                  if (config.exclusions.active && config.exclusions.keys?.includes(itemName)) {
-                    return null
-                  }
+                      if (runtime?.forecastingSeriesKeys?.length > 0) {
+                        itemName = label.text
+                      }
+                    }
 
-                  if (runtime.seriesLabels) {
-                    let index = config.runtime.seriesLabelsAll.indexOf(itemName)
-                    itemName = config.runtime.seriesKeys[index]
+                    if (seriesHighlight.length > 0 && false === seriesHighlight.includes(itemName)) {
+                      className.push('inactive')
+                    }
 
-                    if (runtime?.forecastingSeriesKeys?.length > 0) {
-                      itemName = label.text
+                    if (config.legend.style === 'gradient') {
+                      return <></>
                     }
-                  }
-
-                  if (seriesHighlight.length > 0 && false === seriesHighlight.includes(itemName)) {
-                    className.push('inactive')
-                  }
-
-                  return (
-                    <LegendItem
-                      className={className.join(' ')}
-                      tabIndex={0}
-                      key={`legend-quantile-${i}`}
-                      onKeyDown={e => {
-                        if (e.key === 'Enter') {
+
+                    return (
+                      <LegendItem
+                        className={className.join(' ')}
+                        tabIndex={0}
+                        key={`legend-quantile-${i}`}
+                        onKeyDown={e => {
+                          if (e.key === 'Enter') {
+                            e.preventDefault()
+                            highlight(label)
+                          }
+                        }}
+                        onClick={e => {
                           e.preventDefault()
                           highlight(label)
-                        }
-                      }}
-                      onClick={e => {
-                        e.preventDefault()
-                        highlight(label)
-                      }}
-                      role='button'
-                    >
-                      <div>
-                        {config.visualizationType === 'Line' && config.legend.lineMode ? (
-                          <svg width={40} height={20}>
-                            <Line from={{ x: 10, y: 10 }} to={{ x: 40, y: 10 }} stroke={label.value} strokeWidth={2} strokeDasharray={handleLineType(config.series[i]?.type ? config.series[i]?.type : '')} />
-                          </svg>
-                        ) : (
-                          <div style={{ display: 'flex', flexDirection: 'column' }}>
-                            <LegendCircle viewport={currentViewport} margin='0' fill={label.value} display={true} />
-                          </div>
-                        )}
-                      </div>
-
-                      <LegendLabel style={fontSize} align='left' margin='0 0 0 4px'>
-                        {label.text}
-                      </LegendLabel>
-                    </LegendItem>
-                  )
-                })}
-
-                {highLightedLegendItems.map((bar, i) => {
-                  // if duplicates only return first item
-                  let className = 'legend-item'
-                  let itemName = bar.legendLabel
-
-                  if (!itemName) return false
-                  if (seriesHighlight.length > 0 && false === seriesHighlight.includes(itemName)) {
-                    className += ' inactive'
-                  }
-                  return (
-                    <LegendItem
-                      className={className}
-                      tabIndex={0}
-                      key={`legend-quantile-${i}`}
-                      onKeyDown={e => {
-                        if (e.key === 'Enter') {
+                        }}
+                        role='button'
+                      >
+                        <div>
+                          {config.visualizationType === 'Line' && config.legend.style === 'lines' ? (
+                            <svg width={40} height={20}>
+                              <Line
+                                from={{ x: 10, y: 10 }}
+                                to={{ x: 40, y: 10 }}
+                                stroke={label.value}
+                                strokeWidth={2}
+                                strokeDasharray={handleLineType(config.series[i]?.type ? config.series[i]?.type : '')}
+                              />
+                            </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}
+                        </LegendLabel>
+                      </LegendItem>
+                    )
+                  })}
+
+                  {highLightedLegendItems.map((bar, i) => {
+                    // if duplicates only return first item
+                    let className = 'legend-item'
+                    let itemName = bar.legendLabel
+
+                    if (!itemName) return false
+                    if (seriesHighlight.length > 0 && false === seriesHighlight.includes(itemName)) {
+                      className += ' inactive'
+                    }
+
+                    return (
+                      <LegendItem
+                        className={className}
+                        tabIndex={0}
+                        key={`legend-quantile-${i}`}
+                        onKeyDown={e => {
+                          if (e.key === 'Enter') {
+                            e.preventDefault()
+                            highlight(bar.legendLabel)
+                          }
+                        }}
+                        onClick={e => {
                           e.preventDefault()
                           highlight(bar.legendLabel)
-                        }
-                      }}
-                      onClick={e => {
-                        e.preventDefault()
-                        highlight(bar.legendLabel)
-                      }}
-                    >
-                      <LegendCircle fill='transparent' borderColor={bar.color ? bar.color : `rgba(255, 102, 1)`} />{' '}
-                      <LegendLabel align='left' margin='0 0 0 4px'>
-                        {bar.legendLabel ? bar.legendLabel : bar.value}
-                      </LegendLabel>
-                    </LegendItem>
-                  )
-                })}
-              </div>
-
-              <>
-                {config?.preliminaryData?.some(pd => pd.label && pd.type === 'effect' && pd.style) && ['Line', 'Combo'].includes(config.visualizationType) && (
-                  <>
-                    <hr></hr>
-                    <div className={config.legend.singleRow && isBottomOrSmallViewport ? 'legend-container__inner bottom single-row' : ''}>
-                      {config?.preliminaryData?.map((pd, index) => {
-                        return (
-                          <>
-                            {pd.label && pd.type === 'effect' && pd.style && (
-                              <div key={index} className='legend-preliminary'>
-                                <span className={pd.symbol}>{pd.lineCode}</span>
-                                <p> {pd.label}</p>
-                              </div>
-                            )}
-                          </>
-                        )
-                      })}
-                    </div>
-                  </>
-                )}
-                {!config.legend.hideSuppressedLabels &&
-                  config?.preliminaryData?.some(pd => pd.label && pd.displayLegend && pd.type === 'suppression' && pd.value && (pd?.style || pd.symbol)) &&
-                  ((config.visualizationType === 'Bar' && config.visualizationSubType === 'regular') || config.visualizationType === 'Line' || config.visualizationType === 'Combo') && (
-                    <>
-                      <hr></hr>
-                      <div className={config.legend.singleRow && isBottomOrSmallViewport ? 'legend-container__inner bottom single-row' : ''}>
-                        {config?.preliminaryData?.map(
-                          (pd, index) =>
-                            pd.displayLegend &&
-                            pd.type === 'suppression' && (
-                              <>
-                                {config.visualizationType === 'Bar' && (
-                                  <>
-                                    <div key={index + 'Bar'} className={`legend-preliminary ${pd.symbol}`}>
-                                      <span className={pd.symbol}>{pd.iconCode}</span>
-                                      <p className={pd.type}>{pd.label}</p>
-                                    </div>
-                                  </>
-                                )}
-                                {config.visualizationType === 'Line' && (
-                                  <>
-                                    <div key={index + 'Line'} className={`legend-preliminary `}>
-                                      <span>{pd.lineCode}</span>
-                                      <p className={pd.type}>{pd.label}</p>
-                                    </div>
-                                  </>
-                                )}
-                                {config.visualizationType === 'Combo' && (
-                                  <>
-                                    {pd.symbol && pd.iconCode && (
-                                      <div key={index + 'Combo'} className={`legend-preliminary ${pd.symbol}`}>
-                                        <span className={pd.symbol}>{pd.iconCode}</span>
-                                        <p className={pd.type}>{pd.label}</p>
-                                      </div>
-                                    )}
-
-                                    {pd.style && pd.lineCode && (
-                                      <div key={index + 'Combo'} className='legend-preliminary'>
-                                        <span>{pd.lineCode}</span>
-                                        <p>{pd.label}</p>
-                                      </div>
-                                    )}
-                                  </>
-                                )}
-                              </>
-                            )
-                        )}
-                      </div>
-                    </>
-                  )}
+                        }}
+                      >
+                        <LegendShape
+                          shape={config.legend.style === 'boxes' ? 'square' : 'circle'}
+                          style={{ borderRadius: '0px' }}
+                          fill='transparent'
+                          borderColor={bar.color ? bar.color : `rgba(255, 102, 1)`}
+                        />{' '}
+                        <LegendLabel align='left' margin='0 0 0 4px'>
+                          {bar.legendLabel ? bar.legendLabel : bar.value}
+                        </LegendLabel>
+                      </LegendItem>
+                    )
+                  })}
+                </div>
+
+                <LegendSuppression config={config} isBottomOrSmallViewport={isBottomOrSmallViewport} />
               </>
-            </>
-          )
-        }}
-      </LegendOrdinal>
-      {seriesHighlight.length > 0 && (
-        <Button onClick={labels => highlightReset(labels)} style={{ marginTop: '1rem' }}>
-          Reset
-        </Button>
-      )}
-    </aside>
-  )
-})
+            )
+          }}
+        </LegendOrdinal>
+        {seriesHighlight.length > 0 && (
+          <Button onClick={labels => highlightReset(labels)} style={{ marginTop: '1rem' }}>
+            Reset
+          </Button>
+        )}
+      </aside>
+    )
+  }
+)
 
 export default Legend

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

@@ -0,0 +1,146 @@
+import React from 'react'
+import { ChartConfig } from '../../types/ChartConfig'
+import Icon from '@cdc/core/components/ui/Icon'
+import { Tooltip as ReactTooltip } from 'react-tooltip'
+interface LegendProps {
+  config: ChartConfig
+  isBottomOrSmallViewport: boolean
+}
+
+const LegendSuppression: React.FC<LegendProps> = ({ config, isBottomOrSmallViewport }) => {
+  const { preliminaryData, visualizationType, visualizationSubType, legend } = config
+
+  const hasOpenCircleEffects = () =>
+    preliminaryData?.some(pd => pd.label && pd.type === 'effect' && pd.style === 'Open Circles') &&
+    ['Line', 'Combo'].includes(visualizationType)
+
+  const shouldShowSuppressedLabels = () =>
+    !legend.hideSuppressedLabels &&
+    preliminaryData?.some(
+      pd => pd.label && pd.displayLegend && pd.type === 'suppression' && pd.value && (pd?.style || pd.symbol)
+    ) &&
+    ((visualizationType === 'Bar' && visualizationSubType === 'regular') ||
+      visualizationType === 'Line' ||
+      visualizationType === 'Combo')
+
+  const renderEffectItems = () =>
+    preliminaryData?.map(
+      (pd, index) =>
+        pd.label &&
+        pd.type === 'effect' &&
+        pd.style && (
+          <div key={index} className='legend-preliminary'>
+            <span className={pd.symbol}>{pd.lineCode}</span>
+            <p>{pd.label}</p>
+          </div>
+        )
+    )
+  const handleLinkClick = event => {
+    // prevent defintion link to change URl
+    event.preventDefault()
+  }
+
+  const renderSuppressedItems = () => {
+    const getStyle = displayGray => {
+      if (displayGray) {
+        return {
+          color: '#777772'
+        }
+      }
+      return null
+    }
+    return preliminaryData?.map((pd, index) => {
+      if (!pd.displayLegend || pd.type !== 'suppression') return null
+
+      const baseClass = 'legend-preliminary'
+      const itemKey = index + visualizationType
+
+      if (visualizationType === 'Bar') {
+        return (
+          <div style={getStyle(pd.displayGray)} key={itemKey} className={`${baseClass} ${pd.symbol}`}>
+            <span className={pd.symbol}>{pd.iconCode}</span>
+            <p className={pd.type}>{pd.label}</p>
+          </div>
+        )
+      }
+
+      if (visualizationType === 'Line') {
+        return (
+          <div style={getStyle(pd.displayGray)} key={itemKey} className={baseClass}>
+            <span>{pd.lineCode}</span>
+            <p className={pd.type}>{pd.label}</p>
+          </div>
+        )
+      }
+
+      if (visualizationType === 'Combo') {
+        return (
+          <React.Fragment>
+            {pd.symbol && pd.iconCode && (
+              <div style={getStyle(pd.displayGray)} key={itemKey} className={`${baseClass} ${pd.symbol}`}>
+                <span className={pd.symbol}>{pd.iconCode}</span>
+                <p className={pd.type}>{pd.label}</p>
+              </div>
+            )}
+
+            {pd.style && pd.lineCode && (
+              <div style={getStyle(pd.displayGray)} key={itemKey} className={baseClass}>
+                <span>{pd.lineCode}</span>
+                <p>{pd.label}</p>
+              </div>
+            )}
+          </React.Fragment>
+        )
+      }
+
+      return null
+    })
+  }
+
+  const getLegendContainerClass = () =>
+    legend.singleRow && isBottomOrSmallViewport ? 'legend-container__inner bottom single-row' : ''
+
+  return (
+    <React.Fragment>
+      {hasOpenCircleEffects() && (
+        <React.Fragment>
+          <hr />
+          <div className={getLegendContainerClass()}>{renderEffectItems()}</div>
+        </React.Fragment>
+      )}
+
+      {shouldShowSuppressedLabels() && (
+        <React.Fragment>
+          <hr />
+          <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>
+        )}
+
+      <ReactTooltip // prettier-ignore
+        id='my-tooltip'
+        variant='light'
+        style={{ background: `rgba(255,255,255, ${config.tooltips.opacity / 100})`, color: 'black', maxWidth: '100%' }}
+      />
+    </React.Fragment>
+  )
+}
+
+export default LegendSuppression

package/src/components/Legend/Legend.tsx

@@ -1,4 +1,4 @@
-import { useContext, forwardRef } from 'react'
+import { useContext, forwardRef, Fragment } from 'react'
 import ConfigContext from '../../ConfigContext'
 import LegendComponent from './Legend.Component'
 import { createFormatLabels } from './helpers/createFormatLabels'
@@ -7,6 +7,7 @@ import { createFormatLabels } from './helpers/createFormatLabels'
 const Legend = forwardRef((props, ref) => {
   // prettier-ignore
   const {
+    // prettier-ignore
     config,
     colorScale,
     seriesHighlight,
@@ -14,17 +15,32 @@ const Legend = forwardRef((props, ref) => {
     tableData,
     highlightReset,
     transformedData: data,
-    currentViewport
+    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.
 
   const createLegendLabels = createFormatLabels(config, tableData, data, colorScale)
 
   return (
-    !['Box Plot', 'Pie'].includes(config.visualizationType) && (
-      <LegendComponent ref={ref} skipId={props.skipId || 'legend'} config={config} colorScale={colorScale} seriesHighlight={seriesHighlight} highlight={highlight} highlightReset={highlightReset} currentViewport={currentViewport} formatLabels={createLegendLabels} />
+    !['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>
     )
   )
 })

package/src/components/Legend/helpers/createFormatLabels.tsx

@@ -9,7 +9,7 @@ export const createFormatLabels =
   (defaultLabels: Label[]): Label[] => {
     const { visualizationType, visualizationSubType, series, runtime } = config
 
-    const reverseLabels = labels => (config.legend.reverseLabelOrder && config.legend.position === 'bottom' ? labels.reverse() : labels)
+    const reverseLabels = labels => (config.legend.reverseLabelOrder && config.legend?.position === 'bottom' ? labels.reverse() : labels)
     const colorCode = config.legend?.colorCode
     if (visualizationType === 'Deviation Bar') {
       const [belowColor, aboveColor] = twoColorPalette[config.twoColor.palette]

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

@@ -0,0 +1,35 @@
+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: '' }]
+
+  const formatted = formatLabels(defaultValue)
+  const colors = config.legend.colorCode ? formatted.map(label => label?.value) : colorScale?.range() ?? []
+  const labels = config.legend.colorCode
+    ? formatted.map(label => label?.text || label?.datum)
+    : colorScale?.domain() ?? []
+
+  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'
+  }
+  if (isBottomOrSmallViewport && isSuppressedActive) {
+    marginBottom = '45px'
+  }
+
+  return marginBottom
+}