@cdc/chart 4.26.6 → 4.26.10

package/src/components/EditorPanel/components/Panels/Panel.Network.tsx

@@ -0,0 +1,202 @@
+import { useContext, FC } from 'react'
+import {
+  AccordionItem,
+  AccordionItemHeading,
+  AccordionItemPanel,
+  AccordionItemButton
+} from 'react-accessible-accordion'
+import { CheckBox, Select, TextField } from '@cdc/core/components/EditorPanel/Inputs'
+
+import ConfigContext from '../../../../ConfigContext'
+import type { ChartContext } from '../../../../types/ChartContext'
+import { useEditorPanelContext } from '../../EditorPanelContext'
+import { type PanelProps } from '../PanelProps'
+import WarningImage from '../../../../images/warning.svg'
+import './Panel.Network.css'
+
+const NetworkSettings: FC<PanelProps> = ({ name }) => {
+  const { config, updateConfig } = useContext<ChartContext>(ConfigContext)
+  const { getColumns } = useEditorPanelContext()
+
+  if (config.visualizationType !== 'Network') return null
+
+  const network = config.network || ({} as NonNullable<typeof config.network>)
+  const columns = network.columns || {
+    source: '',
+    target: '',
+    weight: '',
+    style: '',
+    nodeColor: ''
+  }
+  const columnOptions = getColumns?.(false) || []
+  const isMissingColumn = (column: unknown) =>
+    !column || (columnOptions.length > 0 && !columnOptions.includes(String(column)))
+
+  const updateColumn = (_section: string, _subsection: string, fieldName: string, value: string) => {
+    updateConfig?.({
+      ...config,
+      network: { ...network, columns: { ...columns, [fieldName]: value } }
+    })
+  }
+
+  const updateLinkStyleLabel = (_section: string, _subsection: string, fieldName: string, value: string) => {
+    updateConfig?.({
+      ...config,
+      network: {
+        ...network,
+        linkStyleLabels: {
+          solid: network.linkStyleLabels?.solid ?? 'Solid',
+          dashed: network.linkStyleLabels?.dashed ?? 'Dashed',
+          [fieldName]: value
+        }
+      }
+    })
+  }
+
+  const updateNetworkField = (_section: string, _subsection: string, fieldName: string, value: string | boolean) => {
+    const numericFields = ['height', 'nodeRadius', 'linkDistance', 'chargeStrength']
+    let nextValue: string | boolean | number =
+      fieldName === 'height' && value === '' ? 500 : numericFields.includes(fieldName) ? Number(value) : value
+    if (fieldName === 'chargeStrength') nextValue = Math.min(0, Number(nextValue))
+    updateConfig?.({ ...config, network: { ...network, [fieldName]: nextValue } })
+  }
+
+  return (
+    <AccordionItem>
+      <AccordionItemHeading>
+        <AccordionItemButton data-required-field-section='network-columns'>
+          {name}
+          {(isMissingColumn(columns.source) || isMissingColumn(columns.target)) && (
+            <WarningImage width='25' className='warning-icon' />
+          )}
+        </AccordionItemButton>
+      </AccordionItemHeading>
+      <AccordionItemPanel>
+        <Select
+          value={columns.source || ''}
+          section='network'
+          subsection='columns'
+          fieldName='source'
+          label='Source Column'
+          data-required-field-control='network-source'
+          initial='Select'
+          required
+          updateField={updateColumn}
+          options={columnOptions}
+        />
+        <Select
+          value={columns.target || ''}
+          section='network'
+          subsection='columns'
+          fieldName='target'
+          label='Target Column'
+          data-required-field-control='network-target'
+          initial='Select'
+          required
+          updateField={updateColumn}
+          options={columnOptions}
+        />
+        <Select
+          value={columns.weight || ''}
+          section='network'
+          subsection='columns'
+          fieldName='weight'
+          label='Weight Column (Optional)'
+          initial='None'
+          updateField={updateColumn}
+          options={columnOptions}
+        />
+        <Select
+          value={columns.style || ''}
+          section='network'
+          subsection='columns'
+          fieldName='style'
+          label='Link Style Column (Optional)'
+          initial='None'
+          updateField={updateColumn}
+          options={columnOptions}
+        />
+        <TextField
+          value={network.linkStyleLabels?.solid ?? 'Solid'}
+          section='network'
+          subsection='linkStyleLabels'
+          fieldName='solid'
+          label='Solid Link Legend Label'
+          updateField={updateLinkStyleLabel}
+        />
+        <TextField
+          value={network.linkStyleLabels?.dashed ?? 'Dashed'}
+          section='network'
+          subsection='linkStyleLabels'
+          fieldName='dashed'
+          label='Dashed Link Legend Label'
+          updateField={updateLinkStyleLabel}
+        />
+        <Select
+          value={columns.nodeColor || ''}
+          section='network'
+          subsection='columns'
+          fieldName='nodeColor'
+          label='Node Color Column (Optional)'
+          initial='None'
+          updateField={updateColumn}
+          options={columnOptions}
+        />
+        <CheckBox
+          value={Boolean(network.directed)}
+          fieldName='directed'
+          label='Directed Network'
+          updateField={updateNetworkField}
+        />
+        <TextField
+          value={network.height ?? 500}
+          type='number'
+          section='network'
+          fieldName='height'
+          label='Height'
+          min={160}
+          updateField={updateNetworkField}
+        />
+        <TextField
+          value={network.nodeRadius ?? 8}
+          type='number'
+          section='network'
+          fieldName='nodeRadius'
+          label='Node Radius'
+          min={2}
+          updateField={updateNetworkField}
+        />
+        <label className='network-settings__range'>
+          <span className='edit-label column-heading'>
+            Link Distance: <output>{network.linkDistance ?? 90}</output>
+          </span>
+          <input
+            type='range'
+            aria-label='Link Distance'
+            min={20}
+            max={300}
+            step={5}
+            value={network.linkDistance ?? 90}
+            onChange={event => updateNetworkField('network', '', 'linkDistance', event.target.value)}
+          />
+        </label>
+        <label className='network-settings__range'>
+          <span className='edit-label column-heading'>
+            Repulsion Strength: <output>{network.chargeStrength ?? -240}</output>
+          </span>
+          <input
+            type='range'
+            aria-label='Repulsion Strength'
+            min={-1000}
+            max={0}
+            step={10}
+            value={network.chargeStrength ?? -240}
+            onChange={event => updateNetworkField('network', '', 'chargeStrength', event.target.value)}
+          />
+        </label>
+      </AccordionItemPanel>
+    </AccordionItem>
+  )
+}
+
+export default NetworkSettings

package/src/components/EditorPanel/components/Panels/Panel.PatternSettings.tsx

@@ -15,24 +15,22 @@ import Alert from '@cdc/core/components/Alert'
 import { Select } from '@cdc/core/components/EditorPanel/Inputs'
 import ConfigContext from '../../../../ConfigContext'
 import { ChartContext } from '../../../../types/ChartContext'
+import { type LegendPattern } from '../../../../types/ChartConfig'
 import { PanelProps } from '../PanelProps'
 import { checkColorContrast, getColorContrast } from '@cdc/core/helpers/cove/accessibility'
 import { getColorScale } from '../../../../helpers/getColorScale'
 import { sanitizeToSvgId } from '@cdc/core/helpers/cove/string'
+import {
+  ensurePatternColumnConfig,
+  findColumnConfigKey,
+  isPortionPatternSupported,
+  removeUnusedPatternColumnConfig,
+  type ChartColumns
+} from '../../../BarChart/helpers/portionPattern'
 
 const PanelPatternSettings: FC<PanelProps> = props => {
   const { config, updateConfig, transformedData } = useContext<ChartContext>(ConfigContext)
-  if (config.visualizationType === 'HeatMap') return null
-
-  type LegendPattern = {
-    label?: string
-    color?: string
-    shape?: 'circles' | 'lines' | 'diagonalLines' | 'waves'
-    dataKey?: string
-    dataValue?: string
-    contrastCheck?: boolean
-    patternSize?: number
-  }
+  if (['HeatMap', 'Network', 'Dendrogram'].includes(config.visualizationType)) return null
 
   // Safe legend reference with defaults to avoid crashes when legend is undefined
   const legendCfg = (config.legend || { patterns: {} }) as {
@@ -68,7 +66,7 @@ const PanelPatternSettings: FC<PanelProps> = props => {
       case 'large':
         return 16
       default:
-        return 8
+        return 10
     }
   }
 
@@ -155,6 +153,33 @@ const PanelPatternSettings: FC<PanelProps> = props => {
 
   const fieldOptions = getFieldOptions()
   const currentPatterns: Record<string, LegendPattern> = legendCfg.patterns || {}
+  const protectedColumnNames = [
+    ...(config.series || []).map(series => series.dataKey),
+    config.xAxis?.dataKey,
+    config.yAxis?.dataKey
+  ]
+
+  const portionPatternsSupported = isPortionPatternSupported(config)
+  const eligibleTargetKeys = portionPatternsSupported
+    ? config.visualizationType === 'Combo'
+      ? (config.series || []).filter(series => series.type === 'Bar').map(series => series.dataKey)
+      : (config.series || []).map(series => series.dataKey)
+    : []
+  const eligibleTargetOptions = eligibleTargetKeys.map(dataKey => ({
+    value: dataKey,
+    label: config.runtime?.seriesLabels?.[dataKey] || dataKey
+  }))
+
+  const getAvailableTargetOptions = (patternKey: string) => {
+    const targetsUsedByOtherPatterns = new Set(
+      Object.entries(currentPatterns)
+        .filter(([key, pattern]) => key !== patternKey && pattern.application === 'portion')
+        .map(([, pattern]) => pattern.dataKey)
+        .filter(Boolean)
+    )
+
+    return eligibleTargetOptions.filter(option => !targetsUsedByOtherPatterns.has(option.value))
+  }
 
   const handlePatternReorder = (sourceIndex: number, destinationIndex: number) => {
     const patternEntries = Object.entries(currentPatterns)
@@ -180,8 +205,12 @@ const PanelPatternSettings: FC<PanelProps> = props => {
     const currentPatterns = legendCfg.patterns || {}
 
     // For charts, we'll add a default pattern that users can configure
-    const newPatternKey = `Pattern${Object.keys(currentPatterns).length + 1}`
-    const defaultColor = '#000000'
+    let nextPatternNumber = 1
+    while (Object.prototype.hasOwnProperty.call(currentPatterns, `Pattern${nextPatternNumber}`)) {
+      nextPatternNumber += 1
+    }
+    const newPatternKey = `Pattern${nextPatternNumber}`
+    const defaultColor = '#1c1d1f'
     const defaultDataKey = fieldOptions.length > 0 ? fieldOptions[0].value : ''
 
     const newPatterns = {
@@ -189,10 +218,10 @@ const PanelPatternSettings: FC<PanelProps> = props => {
       [newPatternKey]: {
         label: newPatternKey,
         color: defaultColor,
-        shape: 'circles' as const,
+        shape: 'diagonalLines',
         dataKey: defaultDataKey,
         dataValue: '',
-        patternSize: 8, // Default pattern size
+        patternSize: 10, // Default pattern size
         contrastCheck: performContrastCheck(newPatternKey, defaultColor)
       }
     }
@@ -219,10 +248,21 @@ const PanelPatternSettings: FC<PanelProps> = props => {
 
   const handleRemovePattern = (patternKey: string) => {
     const newPatterns = { ...(legendCfg.patterns || {}) }
+    const removedPattern = newPatterns[patternKey]
     delete newPatterns[patternKey]
+    const columns =
+      removedPattern?.application === 'portion'
+        ? removeUnusedPatternColumnConfig({
+            columns: { ...(config.columns || {}) },
+            columnName: removedPattern.patternValueKey,
+            patterns: newPatterns,
+            protectedColumnNames
+          })
+        : config.columns
 
     const updatedConfig = {
       ...config,
+      columns,
       legend: {
         ...(config.legend || {}),
         patterns: newPatterns
@@ -282,6 +322,16 @@ const PanelPatternSettings: FC<PanelProps> = props => {
   }
 
   const handlePatternUpdate = (patternKey: string, field: string, value: any) => {
+    if (
+      field === 'dataKey' &&
+      legendCfg.patterns?.[patternKey]?.application === 'portion' &&
+      Object.entries(legendCfg.patterns || {}).some(
+        ([key, pattern]) => key !== patternKey && pattern.application === 'portion' && pattern.dataKey === value
+      )
+    ) {
+      return
+    }
+
     const updatedPattern = {
       ...(legendCfg.patterns?.[patternKey] || {}),
       [field]: value
@@ -292,8 +342,23 @@ const PanelPatternSettings: FC<PanelProps> = props => {
       [patternKey]: updatedPattern
     }
 
+    let columns: ChartColumns = { ...(config.columns || {}) }
+    if (field === 'patternValueKey') {
+      const previousColumnName = legendCfg.patterns?.[patternKey]?.patternValueKey
+      if (previousColumnName !== value) {
+        columns = removeUnusedPatternColumnConfig({
+          columns,
+          columnName: previousColumnName,
+          patterns: newPatterns,
+          protectedColumnNames
+        })
+      }
+      columns = ensurePatternColumnConfig(columns, value)
+    }
+
     const updatedConfig = {
       ...config,
+      columns,
       legend: {
         ...(config.legend || {}),
         patterns: newPatterns
@@ -311,6 +376,52 @@ const PanelPatternSettings: FC<PanelProps> = props => {
     updateConfig(updatedConfig)
   }
 
+  const handleApplicationUpdate = (patternKey: string, application: 'value' | 'portion') => {
+    const currentPattern = legendCfg.patterns?.[patternKey] || {}
+    const availableTargets = getAvailableTargetOptions(patternKey)
+    const dataKey =
+      application === 'portion' && !availableTargets.some(option => option.value === currentPattern.dataKey)
+        ? availableTargets[0]?.value || ''
+        : currentPattern.dataKey
+
+    const updatedPattern: LegendPattern = {
+      ...currentPattern,
+      application,
+      dataKey
+    }
+
+    if (application === 'portion') {
+      updatedPattern.placement = currentPattern.placement === 'start' ? 'start' : 'end'
+      updatedPattern.patternValueKey = currentPattern.patternValueKey || ''
+    }
+
+    const newPatterns = {
+      ...(legendCfg.patterns || {}),
+      [patternKey]: updatedPattern
+    }
+    let columns: ChartColumns = { ...(config.columns || {}) }
+
+    if (application === 'portion') {
+      columns = ensurePatternColumnConfig(columns, updatedPattern.patternValueKey)
+    } else if (currentPattern.application === 'portion') {
+      columns = removeUnusedPatternColumnConfig({
+        columns,
+        columnName: currentPattern.patternValueKey,
+        patterns: newPatterns,
+        protectedColumnNames
+      })
+    }
+
+    updateConfig({
+      ...config,
+      columns,
+      legend: {
+        ...(config.legend || {}),
+        patterns: newPatterns
+      }
+    })
+  }
+
   if (config.visualizationType === 'Warming Stripes' || config.visualizationType === 'Radar') return
 
   return (
@@ -360,7 +471,9 @@ const PanelPatternSettings: FC<PanelProps> = props => {
                         <AccordionItemHeading className='series-item__title'>
                           <AccordionItemButton className='accordion__button'>
                             <Icon display='move' size={15} style={{ cursor: 'default' }} />
-                            {p.dataKey && p.dataValue
+                            {p.application === 'portion' && p.dataKey
+                              ? `${p.dataKey}: Portion`
+                              : p.dataKey && p.dataValue
                               ? `${p.dataKey}: ${p.dataValue}`
                               : p.dataValue
                               ? `All Series: ${p.dataValue}`
@@ -394,29 +507,116 @@ const PanelPatternSettings: FC<PanelProps> = props => {
                           )}
 
                           <Select
-                            label='Data Key:'
-                            value={p.dataKey || ''}
-                            options={fieldOptions}
-                            initial='Select Data Key'
-                            fieldName={`pattern-datakey-${domPatternKey}`}
+                            label='Pattern Application'
+                            value={p.application || 'value'}
+                            options={[
+                              { value: 'value', label: 'Match a data value' },
+                              { value: 'portion', label: 'Cover a portion of a bar' }
+                            ]}
+                            fieldName={`pattern-application-${domPatternKey}`}
                             updateField={(section, subsection, fieldName, value) =>
-                              handlePatternUpdate(patternKey, 'dataKey', value)
+                              handleApplicationUpdate(patternKey, value as 'value' | 'portion')
                             }
                           />
 
-                          <label htmlFor={`pattern-datavalue-${domPatternKey}`}>
-                            Data Value:
-                            <input
-                              type='text'
-                              id={`pattern-datavalue-${domPatternKey}`}
-                              value={p.dataValue || ''}
-                              onChange={e => handlePatternUpdate(patternKey, 'dataValue', e.target.value)}
-                              placeholder='Enter data value'
+                          {p.application === 'portion' && !portionPatternsSupported && (
+                            <Alert
+                              type='danger'
+                              message='Portion patterns are supported only for regular unstacked bar charts and Combo charts with linear axes and without lollipops.'
+                              showCloseButton={false}
                             />
-                          </label>
+                          )}
+
+                          {(p.application || 'value') === 'value' ? (
+                            <>
+                              <Select
+                                label='Data Key'
+                                value={p.dataKey || ''}
+                                options={fieldOptions}
+                                initial='Select Data Key'
+                                fieldName={`pattern-datakey-${domPatternKey}`}
+                                updateField={(section, subsection, fieldName, value) =>
+                                  handlePatternUpdate(patternKey, 'dataKey', value)
+                                }
+                              />
+
+                              <label htmlFor={`pattern-datavalue-${domPatternKey}`}>
+                                Data Value
+                                <input
+                                  type='text'
+                                  id={`pattern-datavalue-${domPatternKey}`}
+                                  value={p.dataValue || ''}
+                                  onChange={e => handlePatternUpdate(patternKey, 'dataValue', e.target.value)}
+                                  placeholder='Enter data value'
+                                />
+                              </label>
+                            </>
+                          ) : (
+                            <>
+                              <Select
+                                label='Target Bar Series'
+                                value={p.dataKey || ''}
+                                options={getAvailableTargetOptions(patternKey)}
+                                initial='Select Target Bar Series'
+                                fieldName={`pattern-target-series-${domPatternKey}`}
+                                updateField={(section, subsection, fieldName, value) =>
+                                  handlePatternUpdate(patternKey, 'dataKey', value)
+                                }
+                              />
+
+                              <Select
+                                label='Pattern Value Column'
+                                tooltip={
+                                  <Tooltip style={{ textTransform: 'none' }}>
+                                    <Tooltip.Target>
+                                      <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                                    </Tooltip.Target>
+                                    <Tooltip.Content>
+                                      <p>
+                                        Select the data column containing the absolute portion amount for each bar. For
+                                        a row to receive an overlay, its value must be numeric, greater than zero, and
+                                        no greater than the corresponding value in the Target Bar Series. Use
+                                        quantities, not percentages.
+                                      </p>
+                                    </Tooltip.Content>
+                                  </Tooltip>
+                                }
+                                value={p.patternValueKey || ''}
+                                options={fieldOptions}
+                                initial='Select Pattern Value Column'
+                                fieldName={`pattern-value-key-${domPatternKey}`}
+                                updateField={(section, subsection, fieldName, value) =>
+                                  handlePatternUpdate(patternKey, 'patternValueKey', value)
+                                }
+                              />
+
+                              {p.patternValueKey && findColumnConfigKey(config.columns || {}, p.patternValueKey) && (
+                                <div
+                                  className='border rounded p-2 mt-2 small'
+                                  data-testid='portion-pattern-column-note'
+                                >
+                                  <strong>Note:</strong> Configure this pattern&apos;s tooltip and data table settings
+                                  in Columns.
+                                </div>
+                              )}
+
+                              <Select
+                                label='Placement'
+                                value={p.placement === 'start' ? 'start' : 'end'}
+                                options={[
+                                  { value: 'start', label: 'Beginning' },
+                                  { value: 'end', label: 'End' }
+                                ]}
+                                fieldName={`pattern-placement-${domPatternKey}`}
+                                updateField={(section, subsection, fieldName, value) =>
+                                  handlePatternUpdate(patternKey, 'placement', value)
+                                }
+                              />
+                            </>
+                          )}
 
                           <label htmlFor={`pattern-label-${domPatternKey}`}>
-                            Label (optional):
+                            Label (optional)
                             <input
                               type='text'
                               id={`pattern-label-${domPatternKey}`}
@@ -426,7 +626,7 @@ const PanelPatternSettings: FC<PanelProps> = props => {
                           </label>
 
                           <Select
-                            label='Pattern Type:'
+                            label='Pattern Type'
                             value={p.shape || 'circles'}
                             options={patternTypes}
                             fieldName={`pattern-type-${domPatternKey}`}
@@ -436,8 +636,8 @@ const PanelPatternSettings: FC<PanelProps> = props => {
                           />
 
                           <Select
-                            label='Pattern Size:'
-                            value={getPatternSizeText(p.patternSize || 8)}
+                            label='Pattern Size'
+                            value={getPatternSizeText(p.patternSize || 10)}
                             options={patternSizes}
                             fieldName={`pattern-size-${domPatternKey}`}
                             updateField={(section, subsection, fieldName, value) =>

package/src/components/EditorPanel/components/Panels/Panel.Radar.tsx

@@ -12,6 +12,7 @@ import ConfigContext from '../../../../ConfigContext'
 import { useEditorPanelContext } from '../../EditorPanelContext'
 import { type PanelProps } from './../PanelProps'
 import { ChartContext } from '../../../../types/ChartContext'
+import WarningImage from '../../../../images/warning.svg'
 
 const PanelRadar: FC<PanelProps> = props => {
   const { config, rawData } = useContext<ChartContext>(ConfigContext)
@@ -30,7 +31,10 @@ const PanelRadar: FC<PanelProps> = props => {
   return (
     <AccordionItem>
       <AccordionItemHeading>
-        <AccordionItemButton>{props.name}</AccordionItemButton>
+        <AccordionItemButton data-required-field-section='radar-category'>
+          {props.name}
+          {!config.xAxis?.dataKey && <WarningImage width='25' className='warning-icon' />}
+        </AccordionItemButton>
       </AccordionItemHeading>
       <AccordionItemPanel>
         {/* Data Settings */}
@@ -42,6 +46,7 @@ const PanelRadar: FC<PanelProps> = props => {
             section='xAxis'
             fieldName='dataKey'
             label='Category Column'
+            data-required-field-control='radar-category'
             initial='Select'
             required={true}
             updateField={updateField}