@cdc/chart 4.25.10 → 4.25.11

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

@@ -4,6 +4,7 @@ import ConfigContext from '../../../../ConfigContext.js'
 // CDC Core
 import Accordion from '@cdc/core/components/ui/Accordion'
 import Button from '@cdc/core/components/elements/Button'
+import { CheckBox, Select } from '@cdc/core/components/EditorPanel/Inputs'
 import _ from 'lodash'
 
 // types
@@ -14,6 +15,29 @@ import './../panels.scss'
 const PanelAnnotate: React.FC<PanelProps> = props => {
   const { updateConfig, config, svgRef } = useContext(ConfigContext)
 
+  const updateField = (section, subsection, fieldName, value) => {
+    if (subsection) {
+      updateConfig({
+        ...config,
+        [section]: {
+          ...config[section],
+          [subsection]: {
+            ...config[section][subsection],
+            [fieldName]: value
+          }
+        }
+      })
+    } else {
+      updateConfig({
+        ...config,
+        [section]: {
+          ...config[section],
+          [fieldName]: value
+        }
+      })
+    }
+  }
+
   const handleAnnotationUpdate = (value, property, index) => {
     const svgContainer = document.querySelector('.chart-container  > svg')?.getBoundingClientRect()
     const newSvgDims = [svgContainer?.width, svgContainer?.height]
@@ -67,8 +91,8 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
         config.xAxis.type === 'date'
           ? new Date(config?.data?.[0]?.[config.xAxis.dataKey]).getTime()
           : config.xAxis.type === 'categorical'
-            ? '1/15/2016'
-            : '',
+          ? '1/15/2016'
+          : '',
       yKey: '',
       dx: 20,
       dy: -20,
@@ -96,22 +120,14 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
   return (
     <Accordion key={props.name}>
       <Accordion.Section title={props.name} key={props.name}>
-        <label key={`key-1`}>
-          Show Annotation Dropdown
-          <input
-            type='checkbox'
-            checked={config?.general?.showAnnotationDropdown || false}
-            onChange={e => {
-              updateConfig({
-                ...config,
-                general: {
-                  ...config.general,
-                  showAnnotationDropdown: e.target.checked
-                }
-              })
-            }}
-          />
-        </label>
+        <CheckBox
+          value={config?.general?.showAnnotationDropdown || false}
+          section='general'
+          subsection={null}
+          fieldName='showAnnotationDropdown'
+          label='Show Annotation Dropdown'
+          updateField={updateField}
+        />
 
         {config.general.showAnnotationDropdown && (
           <label key={`key-2`}>
@@ -164,61 +180,53 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
                     />
                   </label>
 
-                  <label>
-                    Edit Subject
-                    <input
-                      type='checkbox'
-                      checked={config?.annotations[index]?.edit?.subject || false}
-                      onChange={e => {
-                        const updatedAnnotations = _.cloneDeep(config?.annotations)
-                        updatedAnnotations[index].edit.subject = e.target.checked
-                        updateConfig({
-                          ...config,
-                          annotations: updatedAnnotations
-                        })
-                      }}
-                    />
-                  </label>
-                  <label>
-                    Edit Label
-                    <input
-                      type='checkbox'
-                      checked={config?.annotations[index]?.edit?.label || false}
-                      onChange={e => {
-                        const updatedAnnotations = _.cloneDeep(config?.annotations)
-                        updatedAnnotations[index].edit.label = e.target.checked
-                        updateConfig({
-                          ...config,
-                          annotations: updatedAnnotations
-                        })
-                      }}
-                    />
-                  </label>
+                  <CheckBox
+                    value={config?.annotations[index]?.edit?.subject || false}
+                    section='annotations'
+                    subsection={null}
+                    fieldName={`${index}.edit.subject`}
+                    label='Edit Subject'
+                    updateField={(section, subsection, fieldName, value) => {
+                      const updatedAnnotations = _.cloneDeep(config?.annotations)
+                      updatedAnnotations[index].edit.subject = value
+                      updateConfig({
+                        ...config,
+                        annotations: updatedAnnotations
+                      })
+                    }}
+                  />
+                  <CheckBox
+                    value={config?.annotations[index]?.edit?.label || false}
+                    section='annotations'
+                    subsection={null}
+                    fieldName={`${index}.edit.label`}
+                    label='Edit Label'
+                    updateField={(section, subsection, fieldName, value) => {
+                      const updatedAnnotations = _.cloneDeep(config?.annotations)
+                      updatedAnnotations[index].edit.label = value
+                      updateConfig({
+                        ...config,
+                        annotations: updatedAnnotations
+                      })
+                    }}
+                  />
 
-                  <label>
-                    Connection Type:
-                    <select
-                      key='annotation-connection-type'
-                      onChange={e => {
-                        const updatedAnnotations = _.cloneDeep(config?.annotations)
-                        updatedAnnotations[index].connectionType = e.target.value
-                        updateConfig({
-                          ...config,
-                          annotations: updatedAnnotations
-                        })
-                      }}
-                      value={config?.annotations[index]?.connectionType}
-                    >
-                      <option key='select' value='select'>
-                        Select
-                      </option>
-                      {['curve', 'line', 'elbow', 'none'].map((side, index) => (
-                        <option key={side} value={side}>
-                          {side}
-                        </option>
-                      ))}
-                    </select>
-                  </label>
+                  <Select
+                    label='Connection Type:'
+                    value={config?.annotations[index]?.connectionType}
+                    options={['Select', 'curve', 'line', 'elbow', 'none']}
+                    section='annotations'
+                    subsection={null}
+                    fieldName='connectionType'
+                    updateField={(section, subsection, fieldName, value) => {
+                      const updatedAnnotations = _.cloneDeep(config?.annotations)
+                      updatedAnnotations[index].connectionType = value
+                      updateConfig({
+                        ...config,
+                        annotations: updatedAnnotations
+                      })
+                    }}
+                  />
 
                   {annotation.connectionType === 'curve' && (
                     <>
@@ -243,45 +251,22 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
                     </>
                   )}
 
-                  {/* <label>
-                    Connection Location:
-                    <select
-                      onChange={e => {
-                        const updatedAnnotations = _.cloneDeep(config?.annotations)
-                        updatedAnnotations[index].connectionLocation = e.target.value
-                        updateConfig({
-                          ...config,
-                          annotations: updatedAnnotations
-                        })
-                      }}
-                    >
-                      {['auto', 'left', 'top', 'bottom', 'right'].map((side, index) => (
-                        <option key={side} value={side}>
-                          {side}
-                        </option>
-                      ))}
-                    </select>
-                  </label> */}
-
-                  <label>
-                    Marker
-                    <select
-                      key='annotation-marker'
-                      value={annotation.marker}
-                      onChange={e => {
-                        const updatedAnnotations = _.cloneDeep(config?.annotations)
-                        updatedAnnotations[index].marker = e.target.value
-                        updateConfig({
-                          ...config,
-                          annotations: updatedAnnotations
-                        })
-                      }}
-                    >
-                      {['arrow', 'circle'].map((column, columnIndex) => {
-                        return <option key={`col-${columnIndex}`}>{column}</option>
-                      })}
-                    </select>
-                  </label>
+                  <Select
+                    label='Marker'
+                    value={annotation.marker}
+                    options={['arrow', 'circle']}
+                    section='annotations'
+                    subsection={null}
+                    fieldName='marker'
+                    updateField={(section, subsection, fieldName, value) => {
+                      const updatedAnnotations = _.cloneDeep(config?.annotations)
+                      updatedAnnotations[index].marker = value
+                      updateConfig({
+                        ...config,
+                        annotations: updatedAnnotations
+                      })
+                    }}
+                  />
 
                   <Button className='btn btn-danger full-width' onClick={() => handleRemoveAnnotation(index)}>
                     Delete Annotation

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

@@ -21,7 +21,7 @@ import ConfigContext from '../../../../ConfigContext.js'
 import { PanelProps } from '../PanelProps'
 
 const PanelGeneral: FC<PanelProps> = props => {
-  const { config } = useContext(ConfigContext)
+  const { config, updateConfig } = useContext(ConfigContext)
   const { updateField } = useEditorPanelContext()
   const {
     enabledChartTypes,
@@ -62,6 +62,24 @@ const PanelGeneral: FC<PanelProps> = props => {
             label='Chart Type'
             updateField={updateField}
             options={enabledChartTypes}
+            onChange={event => {
+              const newVisType = event.target.value
+
+              updateField(null, null, 'visualizationType', newVisType)
+
+              if (newVisType === 'Forecasting' && config.xAxis.type === 'categorical') {
+                updateConfig({
+                  ...config,
+                  visualizationType: newVisType,
+                  xAxis: {
+                    ...config.xAxis,
+                    type: 'date',
+                    dateParseFormat: config.xAxis.dateParseFormat || '%Y-%m-%d',
+                    dateDisplayFormat: config.xAxis.dateDisplayFormat || '%Y-%m-%d'
+                  }
+                })
+              }
+            }}
           />
         )}
         {visSupportsChartHeight() && config.orientation === 'vertical' && (

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,13 +292,23 @@ 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)
   }
 
   return (
@@ -294,19 +352,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 +388,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 +427,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'