@cdc/chart 4.26.2 → 4.26.4

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 _ from 'lodash'
+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}>
@@ -133,190 +153,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>
-
-                  {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
+        <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>
 
-                        // 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] || ''
-                          }
-                        }
+                        {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
 
-                        updateConfig({
-                          ...config,
-                          annotations: updatedAnnotations
-                        })
-                      }}
-                    />
-                  )}
+                              // 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] || ''
+                                }
+                              }
 
-                  {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
-                        })
-                      }}
-                    />
-                  )}
+                              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>
+                        {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
+                              })
+                            }}
+                          />
+                        )}
 
-                  <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>
+                          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>
 
-                  <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 => {
-                            const updatedAnnotations = _.cloneDeep(config?.annotations)
-                            updatedAnnotations[index].bezier = e.target.value
+                        <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
                             })
                           }}
                         />
-                      </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.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>
       {' '}
@@ -475,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>
@@ -579,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>
   )