@cdc/chart 4.26.3 → 4.26.5

package/src/components/EditorPanel/EditorPanelContext.ts

@@ -19,7 +19,7 @@ export type EditorPanelContext = {
   handleUpdateHighlightedBarColor?: Function
   handleUpdateHighlightedBorderWidth?: Function
   highlightedBarValues?: Function
-  highlightedSeriesValues?: Function
+  getHighlightedSeriesValues?: Function
   isPaletteReversed?: boolean
   handleRemoveHighlightedBar?: Function
   setLollipopShape?: Function

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

@@ -1,12 +1,22 @@
 import React, { useContext } from 'react'
+import { Draggable } from '@hello-pangea/dnd'
 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 GroupedList from '@cdc/core/components/EditorPanel/GroupedList'
+import Icon from '@cdc/core/components/ui/Icon'
 import { CheckBox, Select } from '@cdc/core/components/EditorPanel/Inputs'
 import cloneDeep from 'lodash/cloneDeep'
+import {
+  Accordion as AccessibleAccordion,
+  AccordionItem,
+  AccordionItemButton,
+  AccordionItemHeading,
+  AccordionItemPanel
+} from 'react-accessible-accordion'
 
 // types
 import { type PanelProps } from './../PanelProps'
@@ -102,6 +112,16 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
     })
   }
 
+  const handleAnnotationReorder = (sourceIndex: number, destinationIndex: number) => {
+    const annotations = [...config.annotations]
+    const [movedAnnotation] = annotations.splice(sourceIndex, 1)
+    annotations.splice(destinationIndex, 0, movedAnnotation)
+    updateConfig({
+      ...config,
+      annotations
+    })
+  }
+
   return (
     <Accordion key={props.name}>
       <Accordion.Section title={props.name} key={props.name}>
@@ -114,6 +134,19 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
           updateField={updateField}
         />
 
+        <Select
+          label='Mobile Annotations'
+          value={config?.general?.mobileAnnotationDisplay || 'symbol'}
+          options={[
+            { value: 'symbol', label: 'Show Symbol' },
+            { value: 'text', label: 'Show Text' }
+          ]}
+          section='general'
+          subsection={null}
+          fieldName='mobileAnnotationDisplay'
+          updateField={updateField}
+        />
+
         {config.general.showAnnotationDropdown && (
           <label key={`key-2`}>
             Annotation Dropdown Title:
@@ -133,190 +166,221 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
             />
           </label>
         )}
-        {config?.annotations &&
-          config?.annotations.map((annotation, index) => (
-            <Accordion key={index}>
-              <Accordion.Section
-                title={annotation.text ? annotation.text.substring(0, 15) + '...' : `Annotation ${index + 1}`}
-              >
-                <div className='annotation-group'>
-                  <label>
-                    Annotation Text:
-                    <textarea
-                      rows={5}
-                      value={annotation.text}
-                      onChange={e => handleAnnotationUpdate(e.target.value, 'text', index)}
-                    />
-                  </label>
+        <GroupedList
+          items={config?.annotations}
+          label='Text Annotations'
+          droppableId='chart-annotations-order'
+          onDragEnd={({ source, destination }) => {
+            if (!destination || source.index === destination.index) return
+            handleAnnotationReorder(source.index, destination.index)
+          }}
+          renderItem={(annotation, index) => (
+            <Draggable key={`annotation-${index}`} draggableId={`annotation-${index}`} index={index}>
+              {(provided, snapshot) => (
+                <div
+                  ref={provided.innerRef}
+                  {...provided.draggableProps}
+                  {...provided.dragHandleProps}
+                  className={snapshot.isDragging ? 'currently-dragging' : ''}
+                  style={provided.draggableProps.style}
+                >
+                  <AccessibleAccordion allowZeroExpanded preExpanded={['panel']}>
+                    <AccordionItem uuid='panel' className='series-item series-item--chart'>
+                      <AccordionItemHeading className='series-item__title'>
+                        <AccordionItemButton className='accordion__button'>
+                          <Icon display='move' size={15} style={{ cursor: 'default' }} />
+                          {annotation.text ? annotation.text.substring(0, 15) + '...' : `Annotation ${index + 1}`}
+                        </AccordionItemButton>
+                      </AccordionItemHeading>
+                      <AccordionItemPanel>
+                        <div className='series-item__panel-actions'>
+                          <Button
+                            type='button'
+                            variant='danger'
+                            size='sm'
+                            className='grouped-list__remove'
+                            onClick={() => handleRemoveAnnotation(index)}
+                          >
+                            Delete Annotation
+                          </Button>
+                        </div>
+                        <label>
+                          Annotation Text:
+                          <textarea
+                            rows={5}
+                            value={annotation.text}
+                            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
+                        {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] || ''
-                          }
-                        }
+                              // 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
-                        })
-                      }}
-                    />
-                  )}
+                              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
-                        })
-                      }}
-                    />
-                  )}
+                        {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)
-                        updatedAnnotations[index].opacity = e.target.value
-                        updateConfig({
-                          ...config,
-                          annotations: updatedAnnotations
-                        })
-                      }}
-                      value={config?.annotations?.[index]?.opacity || '100'}
-                    />
-                  </label>
+                        <label>
+                          Opacity
+                          <br />
+                          <input
+                            type='range'
+                            onChange={e => {
+                              const updatedAnnotations = cloneDeep(config?.annotations)
+                              updatedAnnotations[index].opacity = e.target.value
+                              updateConfig({
+                                ...config,
+                                annotations: updatedAnnotations
+                              })
+                            }}
+                            value={config?.annotations?.[index]?.opacity || '100'}
+                          />
+                        </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
-                      })
-                    }}
-                  />
-
-                  <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
-                      })
-                    }}
-                  />
+                        <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
+                            })
+                          }}
+                        />
 
-                  {annotation.connectionType === 'curve' && (
-                    <>
-                      <label>
-                        Curve Control
-                        {/* create a range input */}
-                        <input
-                          type='range'
-                          min='-20'
-                          max='20'
-                          value={config?.annotations[index]?.bezier || 0}
-                          onChange={e => {
+                        <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].bezier = e.target.value
+                            updatedAnnotations[index].connectionType = value
                             updateConfig({
                               ...config,
                               annotations: updatedAnnotations
                             })
                           }}
                         />
-                      </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
-                      })
-                    }}
-                  />
+                        {annotation.connectionType === 'curve' && (
+                          <>
+                            <label>
+                              Curve Control
+                              {/* create a range input */}
+                              <input
+                                type='range'
+                                min='-20'
+                                max='20'
+                                value={config?.annotations[index]?.bezier || 0}
+                                onChange={e => {
+                                  const updatedAnnotations = cloneDeep(config?.annotations)
+                                  updatedAnnotations[index].bezier = e.target.value
+                                  updateConfig({
+                                    ...config,
+                                    annotations: updatedAnnotations
+                                  })
+                                }}
+                              />
+                            </label>
+                          </>
+                        )}
 
-                  <Button className='btn btn-danger full-width' onClick={() => handleRemoveAnnotation(index)}>
-                    Delete Annotation
-                  </Button>
+                        <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
+                            })
+                          }}
+                        />
+                      </AccordionItemPanel>
+                    </AccordionItem>
+                  </AccessibleAccordion>
                 </div>
-              </Accordion.Section>
-            </Accordion>
-          ))}
+              )}
+            </Draggable>
+          )}
+        />
         {config?.annotations?.length < 3 && (
-          <button onClick={handleAddAnnotation} className='btn btn-primary mt-2 full-width'>
+          <Button variant='editor-primary' onClick={handleAddAnnotation}>
             Add Annotation
-          </button>
+          </Button>
         )}
       </Accordion.Section>
     </Accordion>

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

@@ -13,12 +13,15 @@ import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
 import { TextField, Select, CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import Icon from '@cdc/core/components/ui/Icon'
+import { resolveAltTextDescription } from '@cdc/core/helpers/resolveAltTextDescription'
 
 // contexts
 import { useEditorPermissions } from '../../useEditorPermissions.js'
 import { useEditorPanelContext } from '../../EditorPanelContext.js'
 import ConfigContext from '../../../../ConfigContext.js'
 import { PanelProps } from '../PanelProps'
+import { getVisualizationTypeConfigUpdate } from '../../helpers/getVisualizationTypeConfigUpdate'
+import { type VisualizationType } from '../../../../types/ChartConfig'
 
 const PanelGeneral: FC<PanelProps> = props => {
   const { config, updateConfig } = useContext(ConfigContext)
@@ -79,22 +82,12 @@ const PanelGeneral: FC<PanelProps> = props => {
             updateField={updateField}
             options={enabledChartTypes}
             onChange={event => {
-              const newVisType = event.target.value
+              const newVisType = event.target.value as VisualizationType
 
               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'
-                  }
-                })
-              }
+              const updatedConfig = getVisualizationTypeConfigUpdate(config, newVisType)
+              if (updatedConfig) updateConfig(updatedConfig)
             }}
           />
         )}
@@ -617,6 +610,105 @@ const PanelGeneral: FC<PanelProps> = props => {
             </Tooltip>
           }
         />
+
+        {/* Accessible Alt Text Description */}
+        {(() => {
+          const metadataKeys = Object.keys(config.dataMetadata || {})
+          const hasMetadata = metadataKeys.length > 0
+          const descType = config.altText?.type || ''
+          const resolvedDescription = resolveAltTextDescription(config.altText, config.dataMetadata)
+          return (
+            <>
+              <Select
+                value={descType}
+                fieldName='altTextType'
+                label='Alt Text Description'
+                options={[
+                  { value: '', label: 'None' },
+                  { value: 'static', label: 'Static (manual text)' },
+                  { value: 'metadata', label: 'Data File Metadata' }
+                ]}
+                updateField={(_section, _subsection, _fieldName, value) => {
+                  if (value === '') {
+                    updateField(null, null, 'altText', undefined)
+                  } else {
+                    updateField(null, null, 'altText', { type: value as 'static' | 'metadata' })
+                  }
+                }}
+                tooltip={
+                  <Tooltip style={{ textTransform: 'none' }}>
+                    <Tooltip.Target>
+                      <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                    </Tooltip.Target>
+                    <Tooltip.Content>
+                      <p>
+                        Add a longer description for screen readers. The chart title is always auto-generated. Use
+                        "Static" for manually written text, or "Data File Metadata" to pull it from a key in your data
+                        file.
+                      </p>
+                    </Tooltip.Content>
+                  </Tooltip>
+                }
+              />
+              {descType === 'static' && (
+                <TextField
+                  value={config.altText?.value || ''}
+                  fieldName='altTextValue'
+                  type='textarea'
+                  label='Description Text'
+                  placeholder='Longer interpretive description of chart insights...'
+                  updateField={(_section, _subsection, _fieldName, value) => {
+                    updateField(null, null, 'altText', { ...config.altText, value })
+                  }}
+                />
+              )}
+              {descType === 'metadata' && (
+                <>
+                  {hasMetadata ? (
+                    <Select
+                      value={config.altText?.metadataKey || ''}
+                      fieldName='altTextMetadataKey'
+                      label='Description Metadata Field'
+                      options={[
+                        { value: '', label: 'Select Metadata Field...' },
+                        ...metadataKeys.map(key => ({
+                          value: key,
+                          label: `${key}: ${config.dataMetadata[key]}`
+                        }))
+                      ]}
+                      updateField={(_section, _subsection, _fieldName, value) => {
+                        updateField(null, null, 'altText', { ...config.altText, metadataKey: value })
+                      }}
+                    />
+                  ) : (
+                    <span className='subtext'>
+                      No metadata fields are available. Your data file must be a JSON object with a <code>data</code>{' '}
+                      array and sibling key-value pairs, for example:{' '}
+                      <code>{`{ "altDescription": "...", "data": [...] }`}</code>
+                    </span>
+                  )}
+                </>
+              )}
+              {resolvedDescription && (
+                <div
+                  style={{
+                    marginTop: '1em',
+                    padding: '0.75em',
+                    background: '#f5f5f5',
+                    borderRadius: '4px',
+                    fontSize: '0.8em',
+                    textTransform: 'none'
+                  }}
+                >
+                  <strong style={{ display: 'block', marginBottom: '0.25em' }}>Preview:</strong>
+                  <p data-testid='alt-text-desc-preview' style={{ margin: 0, fontStyle: 'italic' }}>
+                    {resolvedDescription}
+                  </p>
+                </div>
+              )}
+            </>
+          )
+        })()}
       </AccordionItemPanel>
     </AccordionItem>
   )