@cdc/chart 4.26.1 → 4.26.3

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

@@ -1,11 +1,12 @@
 import React, { useContext } from 'react'
 import ConfigContext from '../../../../ConfigContext.js'
+import { useEditorPermissions } from '../../useEditorPermissions'
 
 // 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'
+import cloneDeep from 'lodash/cloneDeep'
 
 // types
 import { type PanelProps } from './../PanelProps'
@@ -13,7 +14,8 @@ import { type PanelProps } from './../PanelProps'
 import './../panels.scss'
 
 const PanelAnnotate: React.FC<PanelProps> = props => {
-  const { updateConfig, config, svgRef } = useContext(ConfigContext)
+  const { updateConfig, config, transformedData } = useContext(ConfigContext)
+  const { visSupportsDataAnnotations } = useEditorPermissions()
 
   const updateField = (section, subsection, fieldName, value) => {
     if (subsection) {
@@ -39,11 +41,8 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
   }
 
   const handleAnnotationUpdate = (value, property, index) => {
-    const svgContainer = document.querySelector('.chart-container  > svg')?.getBoundingClientRect()
-    const newSvgDims = [svgContainer?.width, svgContainer?.height]
     const annotations = [...config?.annotations]
     annotations[index][property] = value
-    annotations[index].savedDimensions = newSvgDims
 
     updateConfig({
       ...config,
@@ -52,15 +51,9 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
   }
 
   const handleAddAnnotation = () => {
-    // check if svg is animated svg or standard svg
-    const newSvgDims = [
-      svgRef?.current?.width?.baseVal?.value || svgRef?.current?.width,
-      svgRef?.current?.height?.baseVal?.value || svgRef?.current?.height
-    ]
-
     const newAnnotation = {
-      text: 'New Annotation',
-      snapToNearestPoint: false,
+      text: 'New annotation',
+      anchorMode: 'fixed',
       fontSize: 16,
       bezier: 10,
       show: {
@@ -84,20 +77,12 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
         subject: true,
         label: true
       },
-      seriesKey: '',
+      // seriesKey and dataX are only set when switching to data mode
       x: 50,
-      y: Number(newSvgDims?.[1] / 2),
-      xKey:
-        config.xAxis.type === 'date'
-          ? new Date(config?.data?.[0]?.[config.xAxis.dataKey]).getTime()
-          : config.xAxis.type === 'categorical'
-          ? '1/15/2016'
-          : '',
-      yKey: '',
+      y: 50,
       dx: 20,
       dy: -20,
       opacity: '100',
-      savedDimensions: newSvgDims,
       connectionType: 'line'
     }
 
@@ -163,13 +148,66 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
                       onChange={e => handleAnnotationUpdate(e.target.value, 'text', index)}
                     />
                   </label>
+
+                  {visSupportsDataAnnotations() && (
+                    <Select
+                      label='Position Mode:'
+                      value={annotation.anchorMode || 'fixed'}
+                      options={[
+                        { value: 'fixed', label: 'Fixed position' },
+                        { value: 'data', label: 'Snap to data' }
+                      ]}
+                      section='annotations'
+                      subsection={null}
+                      fieldName='anchorMode'
+                      updateField={(section, subsection, fieldName, value) => {
+                        const updatedAnnotations = cloneDeep(config?.annotations)
+                        updatedAnnotations[index].anchorMode = value
+
+                        // When switching to data mode, ensure seriesKey and dataX are initialized
+                        if (value === 'data') {
+                          if (!updatedAnnotations[index].seriesKey) {
+                            updatedAnnotations[index].seriesKey = config.series?.[0]?.dataKey || ''
+                          }
+                          if (!updatedAnnotations[index].dataX) {
+                            updatedAnnotations[index].dataX = transformedData?.[0]?.[config.xAxis.dataKey] || ''
+                          }
+                        }
+
+                        updateConfig({
+                          ...config,
+                          annotations: updatedAnnotations
+                        })
+                      }}
+                    />
+                  )}
+
+                  {visSupportsDataAnnotations() && annotation.anchorMode === 'data' && (
+                    <Select
+                      label='Series:'
+                      value={annotation.seriesKey || config.series?.[0]?.dataKey || ''}
+                      options={config.series.map(s => s.dataKey)}
+                      section='annotations'
+                      subsection={null}
+                      fieldName='seriesKey'
+                      updateField={(section, subsection, fieldName, value) => {
+                        const updatedAnnotations = cloneDeep(config?.annotations)
+                        updatedAnnotations[index].seriesKey = value || config.series?.[0]?.dataKey
+                        updateConfig({
+                          ...config,
+                          annotations: updatedAnnotations
+                        })
+                      }}
+                    />
+                  )}
+
                   <label>
                     Opacity
                     <br />
                     <input
                       type='range'
                       onChange={e => {
-                        const updatedAnnotations = _.cloneDeep(config?.annotations)
+                        const updatedAnnotations = cloneDeep(config?.annotations)
                         updatedAnnotations[index].opacity = e.target.value
                         updateConfig({
                           ...config,
@@ -187,7 +225,7 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
                     fieldName={`${index}.edit.subject`}
                     label='Edit Subject'
                     updateField={(section, subsection, fieldName, value) => {
-                      const updatedAnnotations = _.cloneDeep(config?.annotations)
+                      const updatedAnnotations = cloneDeep(config?.annotations)
                       updatedAnnotations[index].edit.subject = value
                       updateConfig({
                         ...config,
@@ -202,7 +240,7 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
                     fieldName={`${index}.edit.label`}
                     label='Edit Label'
                     updateField={(section, subsection, fieldName, value) => {
-                      const updatedAnnotations = _.cloneDeep(config?.annotations)
+                      const updatedAnnotations = cloneDeep(config?.annotations)
                       updatedAnnotations[index].edit.label = value
                       updateConfig({
                         ...config,
@@ -219,7 +257,7 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
                     subsection={null}
                     fieldName='connectionType'
                     updateField={(section, subsection, fieldName, value) => {
-                      const updatedAnnotations = _.cloneDeep(config?.annotations)
+                      const updatedAnnotations = cloneDeep(config?.annotations)
                       updatedAnnotations[index].connectionType = value
                       updateConfig({
                         ...config,
@@ -239,7 +277,7 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
                           max='20'
                           value={config?.annotations[index]?.bezier || 0}
                           onChange={e => {
-                            const updatedAnnotations = _.cloneDeep(config?.annotations)
+                            const updatedAnnotations = cloneDeep(config?.annotations)
                             updatedAnnotations[index].bezier = e.target.value
                             updateConfig({
                               ...config,
@@ -259,7 +297,7 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
                     subsection={null}
                     fieldName='marker'
                     updateField={(section, subsection, fieldName, value) => {
-                      const updatedAnnotations = _.cloneDeep(config?.annotations)
+                      const updatedAnnotations = cloneDeep(config?.annotations)
                       updatedAnnotations[index].marker = value
                       updateConfig({
                         ...config,

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

@@ -320,84 +320,6 @@ const ForestPlotSettings: FC<PanelProps> = ({ name }) => {
         <br />
         <hr />
         <br />
-        <h4>Width Settings</h4>
-
-        <label>
-          <span className='edit-label column-heading'>Chart Offset Left (%)</span>
-          <input
-            type='number'
-            min={0}
-            max={100}
-            value={config.forestPlot.leftWidthOffset || 0}
-            onChange={e => {
-              updateConfig({
-                ...config,
-                forestPlot: {
-                  ...config.forestPlot,
-                  leftWidthOffset: e.target.value
-                }
-              })
-            }}
-          />
-        </label>
-
-        <label>
-          <span className='edit-label column-heading'>Chart Offset Left Mobile(%)</span>
-          <input
-            type='number'
-            min={0}
-            max={100}
-            value={config.forestPlot.leftWidthOffsetMobile || 0}
-            onChange={e => {
-              updateConfig({
-                ...config,
-                forestPlot: {
-                  ...config.forestPlot,
-                  leftWidthOffsetMobile: e.target.value
-                }
-              })
-            }}
-          />
-        </label>
-
-        <label>
-          <span className='edit-label column-heading'>Chart Offset Right (%)</span>
-          <input
-            type='number'
-            min={0}
-            max={100}
-            value={config.forestPlot.rightWidthOffset || 0}
-            onChange={e => {
-              updateConfig({
-                ...config,
-                forestPlot: {
-                  ...config.forestPlot,
-                  rightWidthOffset: e.target.value
-                }
-              })
-            }}
-          />
-        </label>
-
-        <label>
-          <span className='edit-label column-heading'>Chart Offset Right Mobile(%)</span>
-          <input
-            type='number'
-            min={0}
-            max={100}
-            value={config.forestPlot.rightWidthOffsetMobile || 0}
-            onChange={e => {
-              updateConfig({
-                ...config,
-                forestPlot: {
-                  ...config.forestPlot,
-                  rightWidthOffsetMobile: e.target.value
-                }
-              })
-            }}
-          />
-        </label>
-
         <TextField
           type='number'
           min={20}

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

@@ -47,6 +47,22 @@ const PanelGeneral: FC<PanelProps> = props => {
     }
   }
 
+  const handleTitleStyleChange = (newTitleStyle: string) => {
+    updateConfig({
+      ...config,
+      titleStyle: newTitleStyle,
+      visual:
+        newTitleStyle === 'legacy'
+          ? config.visual
+          : {
+              ...config.visual,
+              border: undefined,
+              borderColorTheme: undefined,
+              accent: undefined
+            }
+    })
+  }
+
   return (
     <AccordionItem>
       {' '}
@@ -206,6 +222,86 @@ const PanelGeneral: FC<PanelProps> = props => {
             options={['Below Bar', 'On Date/Category Axis']}
           />
         )}
+        {visualizationType === 'Horizon Chart' && (
+          <>
+            <TextField
+              type='number'
+              value={config.horizon?.numLayers || 4}
+              section='horizon'
+              fieldName='numLayers'
+              label='Number of Layers'
+              updateField={updateField}
+              min={1}
+              max={9}
+              onBlur={e => {
+                const parsed = Number(e.target.value)
+                if (!isNaN(parsed)) {
+                  const value = Math.round(parsed)
+                  const clamped = Math.min(9, Math.max(1, value))
+                  if (clamped !== parsed) {
+                    updateField('horizon', null, 'numLayers', clamped)
+                  }
+                }
+              }}
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>
+                      The number of layers determines how many "bands" the horizon chart is divided into. The optimal
+                      number of layers may depend on the data range and the desired level of detail.
+                    </p>
+                    <hr />
+                    <p>Valid range: 1-9. Defaults to 4 layers.</p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+            />
+            <TextField
+              type='number'
+              value={config.horizon?.bandGap ?? 15}
+              section='horizon'
+              fieldName='bandGap'
+              label='Band Gap'
+              updateField={updateField}
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>The vertical spacing (in pixels) between each series row in the horizon chart.</p>
+                    <hr />
+                    <p>Defaults to 15 pixels.</p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+            />
+            <TextField
+              type='number'
+              value={config.horizon?.bottomPadding ?? 15}
+              section='horizon'
+              fieldName='bottomPadding'
+              label='Bottom Padding'
+              updateField={updateField}
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>The padding (in pixels) below the last series row in the horizon chart.</p>
+                    <hr />
+                    <p>Defaults to 15 pixels.</p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+            />
+          </>
+        )}
+
         {visHasNumbersOnBars() ? (
           <CheckBox
             value={config.yAxis.displayNumbersOnBar}
@@ -316,7 +412,7 @@ const PanelGeneral: FC<PanelProps> = props => {
             />
           </>
         )}
-        {config.visualizationType !== 'Warming Stripes' && (
+        {config.visualizationType !== 'Warming Stripes' && config.visualizationType !== 'Radar' && (
           <CheckBox
             tooltip={
               <Tooltip style={{ textTransform: 'none' }}>
@@ -395,12 +491,12 @@ const PanelGeneral: FC<PanelProps> = props => {
           value={config.titleStyle}
           fieldName='titleStyle'
           label='Title Style'
-          updateField={updateField}
           options={[
             { value: 'small', label: 'Small (h3)' },
             { value: 'large', label: 'Large (h2)' },
             { value: 'legacy', label: 'Legacy' }
           ]}
+          onChange={event => handleTitleStyleChange(event.target.value)}
           tooltip={
             <Tooltip style={{ textTransform: 'none' }}>
               <Tooltip.Target>
@@ -499,6 +595,28 @@ const PanelGeneral: FC<PanelProps> = props => {
             }
           />
         )}
+        <Select
+          value={config.locale}
+          fieldName='locale'
+          label='Language for dates and numbers'
+          updateField={updateField}
+          options={[
+            { value: 'en-US', label: 'English (en-US)' },
+            { value: 'es-MX', label: 'Spanish (es-MX)' }
+          ]}
+          tooltip={
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>
+                  Change the language (locale) for this visualization to alter the way dates and numbers are formatted.
+                </p>
+              </Tooltip.Content>
+            </Tooltip>
+          }
+        />
       </AccordionItemPanel>
     </AccordionItem>
   )

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

@@ -16,7 +16,7 @@ import { ChartContext } from '../../../../types/ChartContext'
 import { PanelProps } from '../PanelProps'
 import { checkColorContrast, getColorContrast } from '@cdc/core/helpers/cove/accessibility'
 import { getColorScale } from '../../../../helpers/getColorScale'
-import _ from 'lodash'
+import { sanitizeToSvgId } from '@cdc/core/helpers/cove/string'
 
 const PanelPatternSettings: FC<PanelProps> = props => {
   const { config, updateConfig, transformedData } = useContext<ChartContext>(ConfigContext)
@@ -69,19 +69,6 @@ const PanelPatternSettings: FC<PanelProps> = props => {
     }
   }
 
-  // Get unique values from a specific data field for dropdown options
-  const getDataValueOptions = (dataKey: string) => {
-    if (!dataKey || !Array.isArray(transformedData) || transformedData.length === 0) {
-      return []
-    }
-
-    const uniqueValues = Array.from(new Set(transformedData.map(row => row[dataKey])))
-      .filter(val => val !== undefined && val !== null && val !== '')
-      .sort()
-
-    return uniqueValues.map(value => ({ value: String(value), label: String(value) }))
-  }
-
   const getFieldOptions = () => {
     if (!Array.isArray(transformedData) || transformedData.length === 0) return []
 
@@ -282,11 +269,6 @@ const PanelPatternSettings: FC<PanelProps> = props => {
       [field]: value
     }
 
-    // Clear dataValue if dataKey is being cleared or set to 'Select'
-    if (field === 'dataKey' && (value === 'Select' || value === '')) {
-      updatedPattern.dataValue = ''
-    }
-
     const newPatterns = {
       ...(legendCfg.patterns || {}),
       [patternKey]: updatedPattern
@@ -311,7 +293,7 @@ const PanelPatternSettings: FC<PanelProps> = props => {
     updateConfig(updatedConfig)
   }
 
-  if (config.visualizationType === 'Warming Stripes') return
+  if (config.visualizationType === 'Warming Stripes' || config.visualizationType === 'Radar') return
 
   return (
     <AccordionItem>
@@ -333,14 +315,18 @@ const PanelPatternSettings: FC<PanelProps> = props => {
         {/* Individual Pattern Configurations */}
         {Object.entries(currentPatterns).map(([patternKey, pattern], index) => {
           const p: LegendPattern = pattern || {}
-          const dataValueOptions = p.dataKey ? getDataValueOptions(p.dataKey) : []
+          const domPatternKey = `${sanitizeToSvgId(patternKey)}-${index}`
 
           return (
             <Accordion allowZeroExpanded key={`pattern-accordion-${index}`}>
               <AccordionItem>
                 <AccordionItemHeading>
                   <AccordionItemButton>
-                    {p.dataKey && p.dataValue ? `${p.dataKey}: ${p.dataValue}` : `Pattern ${index + 1}`}
+                    {p.dataKey && p.dataValue
+                      ? `${p.dataKey}: ${p.dataValue}`
+                      : p.dataValue
+                      ? `All Series: ${p.dataValue}`
+                      : `Pattern ${index + 1}`}
                   </AccordionItemButton>
                 </AccordionItemHeading>
                 <AccordionItemPanel>
@@ -359,32 +345,28 @@ const PanelPatternSettings: FC<PanelProps> = props => {
                     value={p.dataKey || ''}
                     options={fieldOptions}
                     initial='Select Data Key'
-                    fieldName={`pattern-datakey-${patternKey}`}
+                    fieldName={`pattern-datakey-${domPatternKey}`}
                     updateField={(section, subsection, fieldName, value) =>
                       handlePatternUpdate(patternKey, 'dataKey', value)
                     }
                   />
 
-                  {p.dataKey && (
-                    <>
-                      <label htmlFor={`pattern-datavalue-${patternKey}`}>
-                        Data Value:
-                        <input
-                          type='text'
-                          id={`pattern-datavalue-${patternKey}`}
-                          value={p.dataValue || ''}
-                          onChange={e => handlePatternUpdate(patternKey, 'dataValue', e.target.value)}
-                          placeholder='Enter data value'
-                        />
-                      </label>
-                    </>
-                  )}
+                  <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>
 
-                  <label htmlFor={`pattern-label-${patternKey}`}>
+                  <label htmlFor={`pattern-label-${domPatternKey}`}>
                     Label (optional):
                     <input
                       type='text'
-                      id={`pattern-label-${patternKey}`}
+                      id={`pattern-label-${domPatternKey}`}
                       value={p.label || ''}
                       onChange={e => handlePatternUpdate(patternKey, 'label', e.target.value)}
                     />
@@ -394,7 +376,7 @@ const PanelPatternSettings: FC<PanelProps> = props => {
                     label='Pattern Type:'
                     value={p.shape || 'circles'}
                     options={patternTypes}
-                    fieldName={`pattern-type-${patternKey}`}
+                    fieldName={`pattern-type-${domPatternKey}`}
                     updateField={(section, subsection, fieldName, value) =>
                       handlePatternUpdate(patternKey, 'shape', value)
                     }
@@ -404,14 +386,14 @@ const PanelPatternSettings: FC<PanelProps> = props => {
                     label='Pattern Size:'
                     value={getPatternSizeText(p.patternSize || 8)}
                     options={patternSizes}
-                    fieldName={`pattern-size-${patternKey}`}
+                    fieldName={`pattern-size-${domPatternKey}`}
                     updateField={(section, subsection, fieldName, value) =>
                       handlePatternUpdate(patternKey, 'patternSize', getPatternSizeNumeric(value))
                     }
                   />
 
                   <div className='mt-3'>
-                    <label htmlFor={`pattern-color-${patternKey}`}>
+                    <label htmlFor={`pattern-color-${domPatternKey}`}>
                       Pattern Color
                       <Tooltip style={{ textTransform: 'none' }}>
                         <Tooltip.Target>
@@ -430,7 +412,7 @@ const PanelPatternSettings: FC<PanelProps> = props => {
                       <input
                         type='text'
                         value={p.color || ''}
-                        id={`pattern-color-${patternKey}`}
+                        id={`pattern-color-${domPatternKey}`}
                         onChange={e => handlePatternUpdate(patternKey, 'color', e.target.value)}
                         placeholder='#666666'
                       />