@cdc/chart 4.25.10 → 4.26.1

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

@@ -10,6 +10,7 @@ import Tooltip from '@cdc/core/components/ui/Tooltip'
 import Icon from '@cdc/core/components/ui/Icon'
 import Button from '@cdc/core/components/elements/Button'
 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 { PanelProps } from '../PanelProps'
@@ -89,17 +90,22 @@ const PanelPatternSettings: FC<PanelProps> = props => {
   }
 
   // Checks contrast and logs warning if needed
-  const checkAndLogContrast = (fill: string, patternColor: string, dataValue: string, dataKey: string): boolean => {
-    if (!fill || !patternColor) return true // Default to true if colors are missing
+  const checkAndLogContrast = (
+    patternColor: string,
+    backgroundColor: string,
+    dataValue: string,
+    dataKey: string
+  ): boolean => {
+    if (!backgroundColor || !patternColor) return true // Default to true if colors are missing
 
-    const contrastCheck = checkColorContrast(fill, patternColor)
+    const contrastCheck = checkColorContrast(patternColor, backgroundColor)
 
     if (!contrastCheck) {
       console.error(
         `COVE: pattern contrast check failed for ${dataValue} in ${dataKey} with:
       pattern color: ${patternColor}
-      background color: ${fill}
-      contrast: ${getColorContrast(fill, patternColor)}`
+      background color: ${backgroundColor}
+      contrast: ${getColorContrast(patternColor, backgroundColor)}`
       )
     }
 
@@ -108,7 +114,9 @@ const PanelPatternSettings: FC<PanelProps> = props => {
 
   // Perform contrast check for a specific pattern against actual bar colors
   const performContrastCheck = (patternKey: string, patternColor: string) => {
-    if (!patternColor || patternColor === '') return true
+    if (!patternColor || patternColor === '') {
+      return true
+    }
 
     // Get the actual bar colors that the pattern will be overlaid on
     let seriesColors: string[] = []
@@ -138,8 +146,8 @@ const PanelPatternSettings: FC<PanelProps> = props => {
     const contrastResults: Array<{ color: string; passes: boolean; ratio: number | false }> = []
 
     seriesColors.forEach((barColor, index) => {
-      const contrastPasses = checkAndLogContrast(barColor, patternColor, patternKey, `series-${index}`)
-      const contrastRatio = getColorContrast(barColor, patternColor)
+      const contrastPasses = checkAndLogContrast(patternColor, barColor, patternKey, `series-${index}`)
+      const contrastRatio = getColorContrast(patternColor, barColor)
 
       contrastResults.push({
         color: barColor,
@@ -184,26 +192,48 @@ const PanelPatternSettings: FC<PanelProps> = props => {
       }
     }
 
-    updateConfig({
+    const updatedConfig = {
       ...config,
       legend: {
         ...(config.legend || {}),
         patterns: newPatterns
+      },
+      runtime: {
+        ...config.runtime
       }
-    })
+    }
+
+    // Check if all patterns pass and set error message
+    const allPatternsPass = Object.values(newPatterns).every((p: any) => p.contrastCheck !== false)
+    updatedConfig.runtime.editorErrorMessage = allPatternsPass
+      ? ''
+      : 'One or more patterns do not pass the WCAG 2.1 contrast ratio of 3:1.'
+
+    updateConfig(updatedConfig)
   }
 
   const handleRemovePattern = (patternKey: string) => {
     const newPatterns = { ...(legendCfg.patterns || {}) }
     delete newPatterns[patternKey]
 
-    updateConfig({
+    const updatedConfig = {
       ...config,
       legend: {
         ...(config.legend || {}),
         patterns: newPatterns
+      },
+      runtime: {
+        ...config.runtime
       }
-    })
+    }
+
+    // Check if all remaining patterns pass and clear error message if needed
+    const allPatternsPass = Object.values(newPatterns).every((p: any) => p.contrastCheck !== false)
+    if (allPatternsPass || Object.keys(newPatterns).length === 0) {
+      updatedConfig.runtime.editorErrorMessage = ''
+    }
+
+    updateConfig(updatedConfig)
   }
 
   const handlePatternKeyChange = (oldKey: string, newKey: string) => {
@@ -228,15 +258,33 @@ const PanelPatternSettings: FC<PanelProps> = props => {
     })
   }
 
+  const reviewColorContrast = (updatedConfig: any, patternKey: string) => {
+    // Re-check the contrast for the updated pattern
+    const pattern = updatedConfig.legend.patterns[patternKey]
+
+    if (pattern?.color) {
+      pattern.contrastCheck = performContrastCheck(patternKey, pattern.color)
+    }
+
+    // Update error message based on whether all patterns pass contrast checks
+    const allPatterns = Object.values(updatedConfig.legend.patterns || {})
+
+    const allPatternsPass = allPatterns.every((p: any) => p.contrastCheck !== false)
+
+    const errorMsg = allPatternsPass ? '' : 'One or more patterns do not pass the WCAG 2.1 contrast ratio of 3:1.'
+    // Set error message AFTER spreading runtime to avoid it being overwritten
+    updatedConfig.runtime.editorErrorMessage = errorMsg
+  }
+
   const handlePatternUpdate = (patternKey: string, field: string, value: any) => {
     const updatedPattern = {
       ...(legendCfg.patterns?.[patternKey] || {}),
       [field]: value
     }
 
-    // Perform contrast check if color is being updated
-    if (field === 'color') {
-      updatedPattern.contrastCheck = performContrastCheck(patternKey, value)
+    // Clear dataValue if dataKey is being cleared or set to 'Select'
+    if (field === 'dataKey' && (value === 'Select' || value === '')) {
+      updatedPattern.dataValue = ''
     }
 
     const newPatterns = {
@@ -244,15 +292,27 @@ const PanelPatternSettings: FC<PanelProps> = props => {
       [patternKey]: updatedPattern
     }
 
-    updateConfig({
+    const updatedConfig = {
       ...config,
       legend: {
         ...(config.legend || {}),
         patterns: newPatterns
+      },
+      runtime: {
+        ...config.runtime
       }
-    })
+    }
+
+    // Perform contrast check whenever color changes (even if cleared)
+    if (field === 'color') {
+      reviewColorContrast(updatedConfig, patternKey)
+    }
+
+    updateConfig(updatedConfig)
   }
 
+  if (config.visualizationType === 'Warming Stripes') return
+
   return (
     <AccordionItem>
       <AccordionItemHeading>
@@ -294,19 +354,16 @@ const PanelPatternSettings: FC<PanelProps> = props => {
                     />
                   )}
 
-                  <label htmlFor={`pattern-datakey-${patternKey}`}>Data Key:</label>
-                  <select
-                    id={`pattern-datakey-${patternKey}`}
-                    value={p.dataKey || 'Select'}
-                    onChange={e => handlePatternUpdate(patternKey, 'dataKey', e.target.value)}
-                  >
-                    <option value='Select'>Select Data Key</option>
-                    {fieldOptions.map((option, index) => (
-                      <option value={option.value} key={index}>
-                        {option.label}
-                      </option>
-                    ))}
-                  </select>
+                  <Select
+                    label='Data Key:'
+                    value={p.dataKey || ''}
+                    options={fieldOptions}
+                    initial='Select Data Key'
+                    fieldName={`pattern-datakey-${patternKey}`}
+                    updateField={(section, subsection, fieldName, value) =>
+                      handlePatternUpdate(patternKey, 'dataKey', value)
+                    }
+                  />
 
                   {p.dataKey && (
                     <>
@@ -333,33 +390,25 @@ const PanelPatternSettings: FC<PanelProps> = props => {
                     />
                   </label>
 
-                  <label htmlFor={`pattern-type-${patternKey}`}>Pattern Type:</label>
-                  <select
-                    id={`pattern-type-${patternKey}`}
+                  <Select
+                    label='Pattern Type:'
                     value={p.shape || 'circles'}
-                    onChange={e => handlePatternUpdate(patternKey, 'shape', e.target.value)}
-                  >
-                    {patternTypes.map((patternType, index) => (
-                      <option value={patternType.value} key={index}>
-                        {patternType.label}
-                      </option>
-                    ))}
-                  </select>
-
-                  <label htmlFor={`pattern-size-${patternKey}`}>Pattern Size:</label>
-                  <select
-                    id={`pattern-size-${patternKey}`}
+                    options={patternTypes}
+                    fieldName={`pattern-type-${patternKey}`}
+                    updateField={(section, subsection, fieldName, value) =>
+                      handlePatternUpdate(patternKey, 'shape', value)
+                    }
+                  />
+
+                  <Select
+                    label='Pattern Size:'
                     value={getPatternSizeText(p.patternSize || 8)}
-                    onChange={e =>
-                      handlePatternUpdate(patternKey, 'patternSize', getPatternSizeNumeric(e.target.value))
+                    options={patternSizes}
+                    fieldName={`pattern-size-${patternKey}`}
+                    updateField={(section, subsection, fieldName, value) =>
+                      handlePatternUpdate(patternKey, 'patternSize', getPatternSizeNumeric(value))
                     }
-                  >
-                    {patternSizes.map((size, index) => (
-                      <option value={size.value} key={index}>
-                        {size.label}
-                      </option>
-                    ))}
-                  </select>
+                  />
 
                   <div className='mt-3'>
                     <label htmlFor={`pattern-color-${patternKey}`}>
@@ -380,7 +429,7 @@ const PanelPatternSettings: FC<PanelProps> = props => {
                       </Tooltip>
                       <input
                         type='text'
-                        value={p.color || '#666666'}
+                        value={p.color || ''}
                         id={`pattern-color-${patternKey}`}
                         onChange={e => handlePatternUpdate(patternKey, 'color', e.target.value)}
                         placeholder='#666666'

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

@@ -2,7 +2,6 @@ import React, { useContext } from 'react'
 import ConfigContext from '../../../../ConfigContext'
 
 // Core
-import InputSelect from '@cdc/core/components/inputs/InputSelect'
 import Check from '@cdc/core/assets/icon-check.svg'
 import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
 import { colorPalettesChartV1, colorPalettesChartV2, sequentialPalettes } from '@cdc/core/data/colorPalettes'
@@ -98,12 +97,12 @@ const SeriesDropdownLineType = props => {
   })
 
   return (
-    <InputSelect
+    <Select
       initial='Select an option'
       value={series.lineType ? series.lineType : 'curveLinear'}
       label='Series Line Type'
-      onChange={event => {
-        changeLineType(index, event.target.value)
+      updateField={(_section, _subsection, _fieldName, value) => {
+        changeLineType(index, value)
       }}
       options={options}
     />
@@ -118,35 +117,35 @@ const SeriesDropdownSeriesType = props => {
 
   const getOptions = () => {
     if (config.visualizationType === 'Combo') {
-      return {
-        Bar: 'Bar',
-        Line: 'Line',
-        'dashed-sm': 'Small Dashed',
-        'dashed-md': 'Medium Dashed',
-        'dashed-lg': 'Large Dashed',
-        'Area Chart': 'Area Chart',
-        Forecasting: 'Forecasting'
-      }
+      return [
+        { value: 'Bar', label: 'Bar' },
+        { value: 'Line', label: 'Line' },
+        { value: 'dashed-sm', label: 'Small Dashed' },
+        { value: 'dashed-md', label: 'Medium Dashed' },
+        { value: 'dashed-lg', label: 'Large Dashed' },
+        { value: 'Area Chart', label: 'Area Chart' },
+        { value: 'Forecasting', label: 'Forecasting' }
+      ]
     }
     if (config.visualizationType === 'Line' || config.visualizationType === 'Bump Chart') {
-      return {
-        Line: 'Line',
-        'dashed-sm': 'Small Dashed',
-        'dashed-md': 'Medium Dashed',
-        'dashed-lg': 'Large Dashed'
-      }
+      return [
+        { value: 'Line', label: 'Line' },
+        { value: 'dashed-sm', label: 'Small Dashed' },
+        { value: 'dashed-md', label: 'Medium Dashed' },
+        { value: 'dashed-lg', label: 'Large Dashed' }
+      ]
     }
   }
 
   // Allowable changes
   if (!['Line', 'Combo', 'Bump Chart'].includes(config.visualizationType)) return
   return (
-    <InputSelect
+    <Select
       initial='Select an option'
       value={series.type}
       label='Series Type'
-      onChange={event => {
-        updateSeries(index, event.target.value, 'type')
+      updateField={(_section, _subsection, _fieldName, value) => {
+        updateSeries(index, value, 'type')
       }}
       options={getOptions()}
     />
@@ -162,13 +161,13 @@ const SeriesDropdownForecastingStage = props => {
   // Only combo charts are allowed to have different options
 
   return (
-    <InputSelect
+    <Select
       initial='Select an option'
       value={series.stageColumn}
       label='Add Forecasting Stages'
-      onChange={e => {
+      updateField={(_section, _subsection, _fieldName, value) => {
         let stageObjects = []
-        let tempGroups = new Set(rawData?.map(item => item[e.target.value])) // [estimate, forecast, etc.]
+        let tempGroups = new Set(rawData?.map(item => item[value])) // [estimate, forecast, etc.]
         tempGroups = Array.from(tempGroups) // convert set to array
 
         tempGroups = tempGroups.filter(group => group !== undefined) // removes undefined
@@ -176,7 +175,7 @@ const SeriesDropdownForecastingStage = props => {
         tempGroups.forEach(group => stageObjects.push({ key: group }))
 
         const copyOfSeries = [...config.series] // copy the entire series array
-        copyOfSeries[index] = { ...copyOfSeries[index], stages: stageObjects, stageColumn: e.target.value }
+        copyOfSeries[index] = { ...copyOfSeries[index], stages: stageObjects, stageColumn: value }
 
         updateConfig({
           ...config,
@@ -200,19 +199,19 @@ const SeriesDropdownForecastingColumn = props => {
   if (!series.stageColumn) return
 
   let tempGroups = new Set(rawData.map(item => item[series.stageColumn])) // [estimate, forecast, etc.]
-  tempGroups = Array.from(tempGroups) // convert set to array
+  let tempGroupsArray = Array.from(tempGroups) // convert set to array
 
-  tempGroups = tempGroups.filter(group => group !== undefined) // removes undefined
+  tempGroupsArray = tempGroupsArray.filter(group => group !== undefined) // removes undefined
 
   return (
-    <InputSelect
+    <Select
       initial='Select an option'
       value={series.stageItem}
       label='Forecasting Item Column'
-      onChange={event => {
-        updateSeries(index, event.target.value, 'stageItem')
+      updateField={(_section, _subsection, _fieldName, value) => {
+        updateSeries(index, value, 'stageItem')
       }}
-      options={tempGroups}
+      options={tempGroupsArray}
     />
   )
 }
@@ -229,17 +228,17 @@ const SeriesDropdownAxisPosition = props => {
     return
   }
   return (
-    <InputSelect
+    <Select
       initial='Select an option'
       value={series.axis ? series.axis : 'Left'}
       label='Series Axis'
-      onChange={event => {
-        updateSeries(index, event.target.value, 'axis')
-      }}
-      options={{
-        ['Left']: 'Left',
-        ['Right']: 'Right'
+      updateField={(_section, _subsection, _fieldName, value) => {
+        updateSeries(index, value, 'axis')
       }}
+      options={[
+        { value: 'Left', label: 'Left' },
+        { value: 'Right', label: 'Right' }
+      ]}
     />
   )
 }
@@ -267,17 +266,23 @@ const SeriesDropdownForecastColor = props => {
 
   // For dropdown options, only show version-specific palettes
   const processedPalettes = updatePaletteNames(forecastPalettes)
-  const paletteOptions = buildForecastPaletteOptions(processedPalettes, paletteVersion)
+  const paletteOptionsObject = buildForecastPaletteOptions(processedPalettes, paletteVersion)
+
+  // Convert object to array format for Select component
+  const paletteOptions = Object.entries(paletteOptionsObject).map(([value, label]) => ({
+    value,
+    label
+  }))
 
   return series?.stages?.map((stage, stageIndex) => (
-    <InputSelect
+    <Select
       key={`${stage}--${stageIndex}`}
       initial='Select an option'
       value={config.series?.[index].stages?.[stageIndex].color || 'Select'}
       label={`${stage.key} Series Color`}
-      onChange={event => {
+      updateField={(_section, _subsection, _fieldName, value) => {
         if (handleForecastPaletteSelection) {
-          handleForecastPaletteSelection(event.target.value, index, stageIndex)
+          handleForecastPaletteSelection(value, index, stageIndex)
         }
       }}
       options={paletteOptions}
@@ -325,7 +330,7 @@ const SeriesDropdownConfidenceInterval = props => {
                   </>
                 </AccordionItemHeading>
                 <AccordionItemPanel>
-                  <InputSelect
+                  <Select
                     initial='Select an option'
                     value={
                       config.series[index].confidenceIntervals[ciIndex].low
@@ -333,9 +338,9 @@ const SeriesDropdownConfidenceInterval = props => {
                         : 'Select'
                     }
                     label='Low Confidence Interval'
-                    onChange={e => {
+                    updateField={(_section, _subsection, _fieldName, value) => {
                       const copiedConfidenceArray = [...config.series[index].confidenceIntervals]
-                      copiedConfidenceArray[ciIndex].low = e.target.value
+                      copiedConfidenceArray[ciIndex].low = value
                       const copyOfSeries = [...config.series] // copy the entire series array
                       copyOfSeries[index] = { ...copyOfSeries[index], confidenceIntervals: copiedConfidenceArray }
                       updateConfig({
@@ -345,7 +350,7 @@ const SeriesDropdownConfidenceInterval = props => {
                     }}
                     options={getColumns()}
                   />
-                  <InputSelect
+                  <Select
                     initial='Select an option'
                     value={
                       config.series[index].confidenceIntervals[ciIndex].high
@@ -353,9 +358,9 @@ const SeriesDropdownConfidenceInterval = props => {
                         : 'Select'
                     }
                     label='High Confidence Interval'
-                    onChange={e => {
+                    updateField={(_section, _subsection, _fieldName, value) => {
                       const copiedConfidenceArray = [...config.series[index].confidenceIntervals]
-                      copiedConfidenceArray[ciIndex].high = e.target.value
+                      copiedConfidenceArray[ciIndex].high = value
                       const copyOfSeries = [...config.series] // copy the entire series array
                       copyOfSeries[index] = { ...copyOfSeries[index], confidenceIntervals: copiedConfidenceArray }
                       updateConfig({