@cdc/chart 4.26.6 → 4.26.10

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

@@ -1,19 +1,19 @@
 import parse from 'html-react-parser'
 import React, { useMemo } from 'react'
 import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend'
-import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
 import LegendShape from '@cdc/core/components/LegendShape'
 import Button from '@cdc/core/components/elements/Button'
 import { getLegendClasses } from './helpers/getLegendClasses'
 import { useHighlightedBars } from '../../hooks/useHighlightedBars'
 import { getMarginTop, getGradientConfig, getMarginBottom } from './helpers/index'
 import { Label } from '../../types/Label'
-import { ChartConfig, ViewportSize } from '../../types/ChartConfig'
+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'
+import type { ViewPort } from '@cdc/core/types/ViewPort'
 import { isLegendWrapViewport } from '@cdc/core/helpers/viewports'
 import LegendLineShape from './LegendLine.Shape'
 import LegendGroup from './LegendGroup'
@@ -22,13 +22,14 @@ import { getHorizonLayerColors, getHorizonMaxValue } from '../../components/Hori
 import { getSeriesWithData } from '../../helpers/dataHelpers'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
+import { processMarkupVariables } from '@cdc/core/helpers/markupProcessor'
 
 const LEGEND_PADDING = 36
 
 interface LegendProps {
   colorScale: ColorScale
   config: ChartConfig
-  currentViewport: ViewportSize
+  currentViewport: ViewPort
   formatLabels: (labels: Label[]) => Label[]
   formatNumber?: (value: number, axis?: string) => string
   highlight: Function
@@ -62,6 +63,42 @@ const Legend: React.FC<LegendProps> = forwardRef(
     const { innerClasses, containerClasses } = getLegendClasses(config)
     const { runtime, legend } = config
     const { series } = runtime
+    const processedLegendText = useMemo(() => {
+      if (!config.enableMarkupVariables || !config.markupVariables?.length) {
+        return {
+          label: legend?.label,
+          description: legend?.description
+        }
+      }
+
+      const markupOptions = {
+        isEditor: false,
+        filters: config.filters || [],
+        locale: config.locale,
+        dataMetadata: config.dataMetadata
+      }
+
+      return {
+        label: legend?.label
+          ? processMarkupVariables(legend.label, data || config.data || [], config.markupVariables, markupOptions)
+              .processedContent
+          : legend?.label,
+        description: legend?.description
+          ? processMarkupVariables(legend.description, data || config.data || [], config.markupVariables, markupOptions)
+              .processedContent
+          : legend?.description
+      }
+    }, [
+      config.enableMarkupVariables,
+      config.markupVariables,
+      config.filters,
+      config.locale,
+      config.dataMetadata,
+      config.data,
+      data,
+      legend?.label,
+      legend?.description
+    ])
 
     const seriesWithData = getSeriesWithData(config)
     // For Radar charts, seriesWithData contains dimension keys but legend shows entity names
@@ -115,10 +152,12 @@ const Legend: React.FC<LegendProps> = forwardRef(
         aria-label='legend'
         tabIndex={0}
       >
-        {(legend.label || legend.description) && (
-          <div className={legend.description ? 'mb-3' : 'mb-2'}>
-            {legend.label && <h3 className='fw-bold cove-prose'>{parse(legend.label)}</h3>}
-            {legend.description && <p className='mt-2 cove-prose'>{parse(legend.description)}</p>}
+        {(processedLegendText.label || processedLegendText.description) && (
+          <div className={processedLegendText.description ? 'mb-3' : 'mb-2'}>
+            {processedLegendText.label && <h3 className='fw-bold cove-prose'>{parse(processedLegendText.label)}</h3>}
+            {processedLegendText.description && (
+              <p className='mt-2 cove-prose'>{parse(processedLegendText.description)}</p>
+            )}
           </div>
         )}
         <LegendGradient
@@ -145,109 +184,122 @@ const Legend: React.FC<LegendProps> = forwardRef(
 
         <LegendOrdinal scale={colorScale} itemDirection='row' labelMargin='0 20px 0 0' shapeMargin='0 10px 0'>
           {labels => {
+            const formattedLabels = formatLabels(labels as Label[]).filter(
+              label => dontFilterLegendItems || seriesWithData.includes(label.datum)
+            )
+            const visibleForecastLegendKeys = [
+              ...formattedLabels
+                .filter(label => !config.exclusions.active || !config.exclusions.keys?.includes(label.datum))
+                .map(label => label.datum),
+              ...highLightedLegendItems.map(item => item.legendLabel).filter(Boolean)
+            ]
+            const allForecastLegendItemsSelected =
+              config.visualizationType === 'Forecasting' &&
+              visibleForecastLegendKeys.length > 0 &&
+              visibleForecastLegendKeys.every(key => seriesHighlight.includes(key))
+            const showAllButton = seriesHighlight.length > 0 && !allForecastLegendItemsSelected
+
             return (
               <>
                 <div className={innerClasses.join(' ')}>
-                  {formatLabels(labels as Label[])
-                    .filter(label => dontFilterLegendItems || seriesWithData.includes(label.datum))
-                    .map((label, i) => {
-                      let className = ['legend-item', `legend-text--${label.text.replace(' ', '').toLowerCase()}`]
-                      let itemName = label.datum
+                  {formattedLabels.map((label, i) => {
+                    let className = [
+                      'legend-item',
+                      'legend-item--interactive',
+                      `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
-                      }
-
-                      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 && !runtime?.forecastingSeriesKeys?.length) {
+                      let index = config.runtime.seriesLabelsAll.indexOf(itemName)
+                      itemName = config.runtime.seriesKeys[index]
+                    }
 
-                      if (seriesHighlight.length) {
-                        if (!seriesHighlight.includes(itemName)) {
-                          className.push('inactive')
-                        } else className.push('highlighted')
-                      }
+                    if (seriesHighlight.length) {
+                      if (!seriesHighlight.includes(itemName)) {
+                        className.push('inactive')
+                      } else className.push('highlighted')
+                    }
 
-                      if (
-                        config.legend.style === 'gradient' ||
-                        config.legend.groupBy ||
-                        config.visualizationType === 'Horizon Chart'
-                      ) {
-                        return null
-                      }
+                    if (
+                      config.legend.style === 'gradient' ||
+                      config.legend.groupBy ||
+                      config.visualizationType === 'Horizon Chart'
+                    ) {
+                      return null
+                    }
 
-                      return (
-                        <LegendItem
-                          className={className.join(' ')}
-                          tabIndex={0}
-                          key={`legend-quantile-${i}`}
-                          onKeyDown={e => {
-                            if (e.key === 'Enter') {
-                              e.preventDefault()
-                              publishAnalyticsEvent({
-                                vizType: config?.type,
-                                vizSubType: getVizSubType(config),
-                                vizTitle: getVizTitle(config),
-                                eventType: `chart_legend_item_toggled` as any,
-                                eventAction: 'keydown',
-                                eventLabel: interactionLabel,
-                                specifics:
-                                  config.visualizationType === 'Bar'
-                                    ? `label: ${label.text}, orientation: ${
-                                        config.orientation === 'horizontal' ? 'horizontal' : 'vertical'
-                                      }, mode: ${legend.behavior}`
-                                    : `label: ${label.text}, mode: ${legend.behavior}`
-                              })
-                              highlight(label)
-                            }
-                          }}
-                          onClick={e => {
+                    return (
+                      <LegendItem
+                        className={className.join(' ')}
+                        tabIndex={0}
+                        key={`legend-quantile-${i}`}
+                        onKeyDown={e => {
+                          if (e.key === 'Enter') {
                             e.preventDefault()
                             publishAnalyticsEvent({
                               vizType: config?.type,
                               vizSubType: getVizSubType(config),
+                              vizTitle: getVizTitle(config),
                               eventType: `chart_legend_item_toggled` as any,
-                              eventAction: 'click',
+                              eventAction: 'keydown',
                               eventLabel: interactionLabel,
                               specifics:
                                 config.visualizationType === 'Bar'
                                   ? `label: ${label.text}, orientation: ${
                                       config.orientation === 'horizontal' ? 'horizontal' : 'vertical'
                                     }, mode: ${legend.behavior}`
-                                  : `label: ${label.text}, mode: ${legend.behavior}`,
-
-                              vizTitle: getVizTitle(config)
+                                  : `label: ${label.text}, mode: ${legend.behavior}`
                             })
                             highlight(label)
-                          }}
-                          role='button'
-                        >
-                          <>
-                            {config.visualizationType === 'Line' && config.legend.style === 'lines' ? (
-                              <React.Fragment>
-                                <LegendLineShape index={i} label={label} config={config} />
-                              </React.Fragment>
-                            ) : (
-                              <>
-                                <LegendShape
-                                  shape={config.legend.style === 'boxes' ? 'square' : 'circle'}
-                                  fill={label.value}
-                                />
-                              </>
-                            )}
-                          </>
-                          <LegendLabel align='left' className='m-0'>
-                            {parse(label.text)}
-                          </LegendLabel>
-                        </LegendItem>
-                      )
-                    })}
+                          }
+                        }}
+                        onClick={e => {
+                          e.preventDefault()
+                          publishAnalyticsEvent({
+                            vizType: config?.type,
+                            vizSubType: getVizSubType(config),
+                            eventType: `chart_legend_item_toggled` as any,
+                            eventAction: 'click',
+                            eventLabel: interactionLabel,
+                            specifics:
+                              config.visualizationType === 'Bar'
+                                ? `label: ${label.text}, orientation: ${
+                                    config.orientation === 'horizontal' ? 'horizontal' : 'vertical'
+                                  }, mode: ${legend.behavior}`
+                                : `label: ${label.text}, mode: ${legend.behavior}`,
+
+                            vizTitle: getVizTitle(config)
+                          })
+                          highlight(label)
+                        }}
+                        role='button'
+                      >
+                        <>
+                          {config.visualizationType === 'Line' && config.legend.style === 'lines' ? (
+                            <React.Fragment>
+                              <LegendLineShape index={i} label={label} config={config} />
+                            </React.Fragment>
+                          ) : (
+                            <>
+                              <LegendShape
+                                shape={config.legend.style === 'boxes' ? 'square' : 'circle'}
+                                fill={label.value}
+                              />
+                            </>
+                          )}
+                        </>
+                        <LegendLabel align='left' className='m-0'>
+                          {parse(label.text)}
+                        </LegendLabel>
+                      </LegendItem>
+                    )
+                  })}
 
                   {highLightedLegendItems.map((bar, i) => {
                     // if duplicates only return first item
@@ -287,6 +339,12 @@ const Legend: React.FC<LegendProps> = forwardRef(
                   })}
                 </div>
 
+                {showAllButton && (
+                  <Button size='sm' onClick={labels => handleShowAll(labels)} style={{ marginTop: '1rem' }}>
+                    Show All
+                  </Button>
+                )}
+
                 <LegendSuppression config={config} isLegendBottom={isLegendBottom} />
 
                 {/* Pattern Legend Items */}
@@ -298,9 +356,13 @@ const Legend: React.FC<LegendProps> = forwardRef(
                   >
                     {Object.entries(config.legend.patterns).map(([key, pattern]) => {
                       const patternId = `legend-pattern-${key}`
-                      const size = config.legend.patternSize || 8
-                      const legendSize = 16
                       const pColor = (pattern as any)?.color || '#666666'
+                      const patternSize = (pattern as any)?.patternSize ?? 10
+                      const targetSeriesLabel =
+                        pattern.application === 'portion' && pattern.dataKey
+                          ? config.runtime?.seriesLabels?.[pattern.dataKey]
+                          : undefined
+                      const patternBackground = targetSeriesLabel ? colorScale(targetSeriesLabel) : 'white'
 
                       return (
                         <LegendItem
@@ -309,58 +371,16 @@ const Legend: React.FC<LegendProps> = forwardRef(
                           tabIndex={0}
                           role='button'
                         >
-                          <span className='me-2'>
-                            <svg width={legendSize} height={legendSize}>
-                              <defs>
-                                {pattern.shape === 'circles' && (
-                                  <PatternCircles
-                                    id={patternId}
-                                    height={size}
-                                    width={size}
-                                    fill={pColor}
-                                    radius={1.25}
-                                  />
-                                )}
-                                {pattern.shape === 'lines' && (
-                                  <PatternLines
-                                    id={patternId}
-                                    height={size}
-                                    width={size}
-                                    stroke={pColor}
-                                    strokeWidth={0.75}
-                                    orientation={['horizontal']}
-                                  />
-                                )}
-                                {pattern.shape === 'diagonalLines' && (
-                                  <PatternLines
-                                    id={patternId}
-                                    height={size}
-                                    width={size}
-                                    stroke={pColor}
-                                    strokeWidth={0.75}
-                                    orientation={['diagonalRightToLeft']}
-                                  />
-                                )}
-                                {pattern.shape === 'waves' && (
-                                  <PatternWaves
-                                    id={patternId}
-                                    height={size}
-                                    width={size}
-                                    fill={pColor}
-                                    strokeWidth={0.25}
-                                  />
-                                )}
-                              </defs>
-                              <circle
-                                fill={`url(#${patternId})`}
-                                r={legendSize / 2}
-                                cx={legendSize / 2}
-                                cy={legendSize / 2}
-                                stroke='#0000004d'
-                                strokeWidth={1}
-                              />
-                            </svg>
-                          </span>
+                          <LegendShape
+                            shape={config.legend.style === 'boxes' ? 'square' : 'circle'}
+                            fill={patternBackground}
+                            patternInfo={{
+                              pattern: pattern.shape || 'circles',
+                              patternId,
+                              size: patternSize,
+                              color: pColor
+                            }}
+                          />
                           <LegendLabel align='left' className='m-0'>
                             {parse(String((pattern as any)?.label || key))}
                           </LegendLabel>
@@ -373,11 +393,6 @@ const Legend: React.FC<LegendProps> = forwardRef(
             )
           }}
         </LegendOrdinal>
-        {seriesHighlight.length > 0 && (
-          <Button onClick={labels => handleShowAll(labels)} style={{ marginTop: '1rem' }}>
-            Show All
-          </Button>
-        )}
       </aside>
     )
   }

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

@@ -70,16 +70,16 @@ const LegendSuppression: React.FC<LegendProps> = ({ config, isLegendBottom }) =>
 
       if (visualizationType === 'Combo') {
         return (
-          <React.Fragment>
+          <React.Fragment key={itemKey}>
             {pd.symbol && pd.iconCode && (
-              <div style={getStyle(pd.displayGray)} key={itemKey} className={`${baseClass} ${pd.symbol}`}>
+              <div style={getStyle(pd.displayGray)} 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}>
+              <div style={getStyle(pd.displayGray)} className={baseClass}>
                 <span>{pd.lineCode}</span>
                 <p>{pd.label}</p>
               </div>

package/src/components/Legend/LegendGroup/LegendGroup.styles.css

@@ -10,6 +10,7 @@
       font-weight: 400;
       margin-bottom: 0.5rem;
     }
+
     .group-label {
       font-family: Nunito, sans-serif;
       font-size: 1rem;
@@ -17,6 +18,12 @@
     }
   }
 
+  .legend-group__items {
+    display: flex;
+    flex-direction: column;
+    row-gap: 0.25rem;
+  }
+
   .legend-group-grid {
     display: flex;
     flex-wrap: wrap;

package/src/components/Legend/LegendGroup/LegendGroup.tsx

@@ -2,7 +2,6 @@ import React, { useContext } from 'react'
 import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend'
 import LegendShape from '@cdc/core/components/LegendShape'
 import ConfigContext from '../../../ConfigContext'
-import _ from 'lodash'
 import './LegendGroup.styles.css'
 
 interface LegendGroup {
@@ -58,43 +57,56 @@ const LegendGroup = ({ formatLabels }) => {
               <p className='legend-group group-label'>{group}</p>
             </div>
             <LegendOrdinal scale={colorScale} itemDirection='row' labelMargin='0 20px 0 0' shapeMargin='0 10px 0'>
-              {labels =>
-                formatLabels(labels)
-                  .filter(label => {
-                    const groupBy = config.legend.groupBy || ''
-                    return data.some(d => d[groupBy] === group && d[label.text] !== undefined && d[label.text] !== 'NA')
-                  })
+              {labels => (
+                <div className='legend-group__items'>
+                  {formatLabels(labels)
+                    .filter(label => {
+                      const groupBy = config.legend.groupBy || ''
+                      return data.some(
+                        d => d[groupBy] === group && d[label.text] !== undefined && d[label.text] !== 'NA'
+                      )
+                    })
 
-                  .map((label, i) => {
-                    let className = ['legend-group', 'group-item']
-                    if (seriesHighlight.length) {
-                      if (!seriesHighlight.includes(label.datum)) {
-                        className.push('inactive')
-                      } else {
-                        className.push('highlighted')
+                    .map((label, i) => {
+                      let className = ['legend-group', 'group-item', 'legend-item--interactive']
+                      if (seriesHighlight.length) {
+                        if (!seriesHighlight.includes(label.datum)) {
+                          className.push('inactive')
+                        } else {
+                          className.push('highlighted')
+                        }
                       }
-                    }
 
-                    return (
-                      <LegendItem
-                        alignItems='start'
-                        className={className.join(' ')}
-                        onClick={e => {
-                          e.preventDefault()
-                          highlight(label)
-                        }}
-                        key={`legend-item-${i}`}
-                        tabIndex={0}
-                        role='button'
-                      >
-                        <LegendShape shape={config.legend.style === 'boxes' ? 'square' : 'circle'} fill={label.value} />
-                        <LegendLabel align='left' margin='0'>
-                          {label.text}
-                        </LegendLabel>
-                      </LegendItem>
-                    )
-                  })
-              }
+                      return (
+                        <LegendItem
+                          alignItems='start'
+                          className={className.join(' ')}
+                          onClick={e => {
+                            e.preventDefault()
+                            highlight(label)
+                          }}
+                          onKeyDown={e => {
+                            if (e.key === 'Enter') {
+                              e.preventDefault()
+                              highlight(label)
+                            }
+                          }}
+                          key={`legend-item-${i}`}
+                          tabIndex={0}
+                          role='button'
+                        >
+                          <LegendShape
+                            shape={config.legend.style === 'boxes' ? 'square' : 'circle'}
+                            fill={label.value}
+                          />
+                          <LegendLabel align='left' margin='0'>
+                            {label.text}
+                          </LegendLabel>
+                        </LegendItem>
+                      )
+                    })}
+                </div>
+              )}
             </LegendOrdinal>
           </div>
         )