@cdc/chart 4.26.3 → 4.26.5

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

@@ -1,4 +1,5 @@
 import { useContext, FC } from 'react'
+import { Draggable } from '@hello-pangea/dnd'
 import {
   Accordion,
   AccordionItem,
@@ -6,6 +7,7 @@ import {
   AccordionItemPanel,
   AccordionItemButton
 } from 'react-accessible-accordion'
+import GroupedList from '@cdc/core/components/EditorPanel/GroupedList'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import Icon from '@cdc/core/components/ui/Icon'
 import Button from '@cdc/core/components/elements/Button'
@@ -20,6 +22,7 @@ import { sanitizeToSvgId } from '@cdc/core/helpers/cove/string'
 
 const PanelPatternSettings: FC<PanelProps> = props => {
   const { config, updateConfig, transformedData } = useContext<ChartContext>(ConfigContext)
+  if (config.visualizationType === 'HeatMap') return null
 
   type LegendPattern = {
     label?: string
@@ -153,6 +156,21 @@ const PanelPatternSettings: FC<PanelProps> = props => {
   const fieldOptions = getFieldOptions()
   const currentPatterns: Record<string, LegendPattern> = legendCfg.patterns || {}
 
+  const handlePatternReorder = (sourceIndex: number, destinationIndex: number) => {
+    const patternEntries = Object.entries(currentPatterns)
+    const [movedPattern] = patternEntries.splice(sourceIndex, 1)
+    patternEntries.splice(destinationIndex, 0, movedPattern)
+
+    const newPatterns = Object.fromEntries(patternEntries)
+    updateConfig({
+      ...config,
+      legend: {
+        ...config.legend,
+        patterns: newPatterns
+      }
+    })
+  }
+
   // Check if all patterns pass contrast requirements
   const checkPatternContrasts = () => {
     return Object.values(currentPatterns).every(pattern => pattern.contrastCheck !== false)
@@ -308,130 +326,165 @@ const PanelPatternSettings: FC<PanelProps> = props => {
               message='Pattern colors must comply with <a href="https://www.w3.org/TR/WCAG21/">WCAG 2.1</a> 3:1 contrast ratio.'
               showCloseButton={false}
             />
-            <br />
           </>
         )}
 
-        {/* Individual Pattern Configurations */}
-        {Object.entries(currentPatterns).map(([patternKey, pattern], index) => {
-          const p: LegendPattern = pattern || {}
-          const domPatternKey = `${sanitizeToSvgId(patternKey)}-${index}`
-
-          return (
-            <Accordion allowZeroExpanded key={`pattern-accordion-${index}`}>
-              <AccordionItem>
-                <AccordionItemHeading>
-                  <AccordionItemButton>
-                    {p.dataKey && p.dataValue
-                      ? `${p.dataKey}: ${p.dataValue}`
-                      : p.dataValue
-                      ? `All Series: ${p.dataValue}`
-                      : `Pattern ${index + 1}`}
-                  </AccordionItemButton>
-                </AccordionItemHeading>
-                <AccordionItemPanel>
-                  {p.contrastCheck ?? true ? (
-                    <Alert type='success' message='This pattern passes contrast checks' showCloseButton={false} />
-                  ) : (
-                    <Alert
-                      type='danger'
-                      message='Error: <a href="https://webaim.org/resources/contrastchecker/" target="_blank"> Review Color Contrast</a>'
-                      showCloseButton={false}
-                    />
-                  )}
-
-                  <Select
-                    label='Data Key:'
-                    value={p.dataKey || ''}
-                    options={fieldOptions}
-                    initial='Select Data Key'
-                    fieldName={`pattern-datakey-${domPatternKey}`}
-                    updateField={(section, subsection, fieldName, value) =>
-                      handlePatternUpdate(patternKey, 'dataKey', value)
-                    }
-                  />
-
-                  <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-${domPatternKey}`}>
-                    Label (optional):
-                    <input
-                      type='text'
-                      id={`pattern-label-${domPatternKey}`}
-                      value={p.label || ''}
-                      onChange={e => handlePatternUpdate(patternKey, 'label', e.target.value)}
-                    />
-                  </label>
-
-                  <Select
-                    label='Pattern Type:'
-                    value={p.shape || 'circles'}
-                    options={patternTypes}
-                    fieldName={`pattern-type-${domPatternKey}`}
-                    updateField={(section, subsection, fieldName, value) =>
-                      handlePatternUpdate(patternKey, 'shape', value)
-                    }
-                  />
-
-                  <Select
-                    label='Pattern Size:'
-                    value={getPatternSizeText(p.patternSize || 8)}
-                    options={patternSizes}
-                    fieldName={`pattern-size-${domPatternKey}`}
-                    updateField={(section, subsection, fieldName, value) =>
-                      handlePatternUpdate(patternKey, 'patternSize', getPatternSizeNumeric(value))
-                    }
-                  />
-
-                  <div className='mt-3'>
-                    <label htmlFor={`pattern-color-${domPatternKey}`}>
-                      Pattern Color
-                      <Tooltip style={{ textTransform: 'none' }}>
-                        <Tooltip.Target>
-                          <Icon
-                            display='question'
-                            style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
+        <GroupedList
+          items={Object.entries(currentPatterns)}
+          label='Pattern'
+          droppableId='chart-patterns-order'
+          onDragEnd={({ source, destination }) => {
+            if (!destination || source.index === destination.index) return
+            handlePatternReorder(source.index, destination.index)
+          }}
+          renderItem={([patternKey, pattern], index) => {
+            const p: LegendPattern = pattern || {}
+            const domPatternKey = `${sanitizeToSvgId(patternKey)}-${index}`
+
+            return (
+              <Draggable
+                key={`pattern-${patternKey}-${index}`}
+                draggableId={`pattern-${patternKey}-${index}`}
+                index={index}
+              >
+                {(provided, snapshot) => (
+                  <div
+                    ref={provided.innerRef}
+                    {...provided.draggableProps}
+                    {...provided.dragHandleProps}
+                    className={snapshot.isDragging ? 'currently-dragging' : ''}
+                    style={provided.draggableProps.style}
+                  >
+                    <Accordion 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' }} />
+                            {p.dataKey && p.dataValue
+                              ? `${p.dataKey}: ${p.dataValue}`
+                              : p.dataValue
+                              ? `All Series: ${p.dataValue}`
+                              : `Pattern ${index + 1}`}
+                          </AccordionItemButton>
+                        </AccordionItemHeading>
+                        <AccordionItemPanel>
+                          <div className='series-item__panel-actions'>
+                            <Button
+                              type='button'
+                              variant='danger'
+                              size='sm'
+                              className='grouped-list__remove'
+                              onClick={() => handleRemovePattern(patternKey)}
+                            >
+                              Remove Pattern
+                            </Button>
+                          </div>
+                          {p.contrastCheck ?? true ? (
+                            <Alert
+                              type='success'
+                              message='This pattern passes contrast checks'
+                              showCloseButton={false}
+                            />
+                          ) : (
+                            <Alert
+                              type='danger'
+                              message='Error: <a href="https://webaim.org/resources/contrastchecker/" target="_blank"> Review Color Contrast</a>'
+                              showCloseButton={false}
+                            />
+                          )}
+
+                          <Select
+                            label='Data Key:'
+                            value={p.dataKey || ''}
+                            options={fieldOptions}
+                            initial='Select Data Key'
+                            fieldName={`pattern-datakey-${domPatternKey}`}
+                            updateField={(section, subsection, fieldName, value) =>
+                              handlePatternUpdate(patternKey, 'dataKey', value)
+                            }
+                          />
+
+                          <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-${domPatternKey}`}>
+                            Label (optional):
+                            <input
+                              type='text'
+                              id={`pattern-label-${domPatternKey}`}
+                              value={p.label || ''}
+                              onChange={e => handlePatternUpdate(patternKey, 'label', e.target.value)}
+                            />
+                          </label>
+
+                          <Select
+                            label='Pattern Type:'
+                            value={p.shape || 'circles'}
+                            options={patternTypes}
+                            fieldName={`pattern-type-${domPatternKey}`}
+                            updateField={(section, subsection, fieldName, value) =>
+                              handlePatternUpdate(patternKey, 'shape', value)
+                            }
                           />
-                        </Tooltip.Target>
-                        <Tooltip.Content>
-                          <p>
-                            If this setting is used, it is the responsibility of the visualization author to verify the
-                            visualization colors meet WCAG 3:1 contrast ratios.
-                          </p>
-                        </Tooltip.Content>
-                      </Tooltip>
-                      <input
-                        type='text'
-                        value={p.color || ''}
-                        id={`pattern-color-${domPatternKey}`}
-                        onChange={e => handlePatternUpdate(patternKey, 'color', e.target.value)}
-                        placeholder='#666666'
-                      />
-                    </label>
-                  </div>
 
-                  <Button onClick={() => handleRemovePattern(patternKey)} className='btn btn-danger'>
-                    Remove Pattern
-                  </Button>
-                </AccordionItemPanel>
-              </AccordionItem>
-            </Accordion>
-          )
-        })}
+                          <Select
+                            label='Pattern Size:'
+                            value={getPatternSizeText(p.patternSize || 8)}
+                            options={patternSizes}
+                            fieldName={`pattern-size-${domPatternKey}`}
+                            updateField={(section, subsection, fieldName, value) =>
+                              handlePatternUpdate(patternKey, 'patternSize', getPatternSizeNumeric(value))
+                            }
+                          />
+
+                          <div className='mt-3'>
+                            <label htmlFor={`pattern-color-${domPatternKey}`}>
+                              Pattern Color
+                              <Tooltip style={{ textTransform: 'none' }}>
+                                <Tooltip.Target>
+                                  <Icon
+                                    display='question'
+                                    style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
+                                  />
+                                </Tooltip.Target>
+                                <Tooltip.Content>
+                                  <p>
+                                    If this setting is used, it is the responsibility of the visualization author to
+                                    verify the visualization colors meet WCAG 3:1 contrast ratios.
+                                  </p>
+                                </Tooltip.Content>
+                              </Tooltip>
+                              <input
+                                type='text'
+                                value={p.color || ''}
+                                id={`pattern-color-${domPatternKey}`}
+                                onChange={e => handlePatternUpdate(patternKey, 'color', e.target.value)}
+                                placeholder='#666666'
+                              />
+                            </label>
+                          </div>
+                        </AccordionItemPanel>
+                      </AccordionItem>
+                    </Accordion>
+                  </div>
+                )}
+              </Draggable>
+            )
+          }}
+        />
 
         {/* Add Pattern Button */}
-        <button className='btn btn-primary full-width mt-2' onClick={handleAddPattern}>
+        <Button variant='editor-primary' onClick={handleAddPattern}>
           Add Pattern
-        </button>
+        </Button>
 
         {Object.keys(currentPatterns).length === 0 && (
           <p style={{ color: '#666', fontStyle: 'italic' }}>

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

@@ -1,19 +1,26 @@
 import { memo, useContext } from 'react'
+import { Draggable } from '@hello-pangea/dnd'
 import { useEditorPermissions } from '../../useEditorPermissions.js'
 import {
+  Accordion,
   AccordionItem,
   AccordionItemHeading,
   AccordionItemPanel,
   AccordionItemButton
 } from 'react-accessible-accordion'
 import { type ChartConfig } from '../../../../types/ChartConfig.js'
+import GroupedList from '@cdc/core/components/EditorPanel/GroupedList'
 import { TextField, Select } from '@cdc/core/components/EditorPanel/Inputs'
 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 { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 import { type ChartContext } from '../../../../types/ChartContext.js'
 import { type PanelProps } from '../PanelProps.js'
 import ConfigContext from '../../../../ConfigContext.js'
 
+const DEFAULT_REGION_BACKGROUND = getComputedStyle(document.documentElement).getPropertyValue('--cool-gray-50').trim()
+
 const RegionSettings = memo(({ config, updateConfig }: { config: ChartConfig; updateConfig: Function }) => {
   let regionUpdate = (fieldName, value, i) => {
     let regions = []
@@ -53,129 +60,172 @@ const RegionSettings = memo(({ config, updateConfig }: { config: ChartConfig; up
     updateConfig({ ...config, regions })
   }
 
+  const moveRegion = (sourceIndex, destinationIndex) => {
+    const regions = config.regions ? [...config.regions] : []
+    const [movedRegion] = regions.splice(sourceIndex, 1)
+    regions.splice(destinationIndex, 0, movedRegion)
+    updateConfig({ ...config, regions })
+  }
+
   const fromOptions = ['Fixed', 'Previous Days']
   const toOptions = ['Last Date', 'Fixed']
 
   return (
     <>
-      {config.regions &&
-        config.regions.map(({ label, color, from, to, background, range = 'Custom' }, i) => (
-          <div className='edit-block' key={`region-${i}`}>
-            <button
-              type='button'
-              className='btn btn-danger remove-column'
-              onClick={event => {
-                event.preventDefault()
-                removeColumn(i)
-              }}
-            >
-              Remove
-            </button>
-            <TextField value={label} label='Region Label' fieldName='label' i={i} updateField={updateField} />
-            <div className='two-col-inputs'>
-              <TextField
-                value={color}
-                label='Text Color'
-                fieldName='color'
-                updateField={(section, subsection, fieldName, value) => regionUpdate(fieldName, value, i)}
-              />
-              <TextField
-                value={background}
-                label='Background'
-                fieldName='background'
-                updateField={(section, subsection, fieldName, value) => regionUpdate(fieldName, value, i)}
-              />
-            </div>
-
-            <Select
-              value={config.regions[i].fromType ?? 'Fixed'}
-              label='Minimum Region Type'
-              initial={'Select'}
-              required={true}
-              onChange={e => {
-                if (e.target.value !== '' && e.target.value !== 'Select') {
-                  const newRegions = [...config.regions]
-                  newRegions[i].fromType = e.target.value
-                  updateConfig({
-                    ...config,
-                    regions: newRegions
-                  })
-                }
-                e.target.value = ''
-              }}
-              options={fromOptions}
-            />
-
-            {(config.regions[i].fromType === 'Fixed' ||
-              config.regions[i].fromType === 'Previous Days' ||
-              !config.regions[i].fromType) && (
-              <>
-                <TextField
-                  value={from}
-                  label={
-                    config.regions[i].fromType === 'Fixed' || !config.regions[i]?.fromType
-                      ? 'From Value'
-                      : 'Previous Number of Days'
-                  }
-                  fieldName='from'
-                  updateField={(section, subsection, fieldName, value) => regionUpdate(fieldName, value, i)}
-                  tooltip={
-                    <Tooltip style={{ textTransform: 'none' }}>
-                      <Tooltip.Target>
-                        <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                      </Tooltip.Target>
-                      <Tooltip.Content>
-                        <p>
-                          When using categorical (linear scale) match the data set value. When using date (linear / date
-                          time scale) match the x-axis value.
-                        </p>
-                      </Tooltip.Content>
-                    </Tooltip>
-                  }
-                />
-              </>
-            )}
-
-            <Select
-              value={config.regions[i].toType ?? 'Fixed'}
-              label='Maximum Region Type'
-              initial={'Select'}
-              required={true}
-              onChange={e => {
-                if (e.target.value !== '' && e.target.value !== 'Select') {
-                  const newRegions = [...config.regions]
-                  newRegions[i].toType = e.target.value
-                  updateConfig({
-                    ...config,
-                    regions: newRegions
-                  })
-                }
-                e.target.value = ''
-              }}
-              options={toOptions}
-            />
-
-            {(config.regions[i].toType === 'Fixed' || !config.regions[i].toType) && (
-              <TextField
-                value={to}
-                label='To Value'
-                fieldName='to'
-                updateField={(section, subsection, fieldName, value) => regionUpdate(fieldName, value, i)}
-              />
+      <GroupedList
+        items={config.regions}
+        label='Regions'
+        droppableId='chart-regions-order'
+        onDragEnd={({ source, destination }) => {
+          if (!destination || source.index === destination.index) return
+          moveRegion(source.index, destination.index)
+        }}
+        renderItem={({ label, color, from, to, background, range = 'Custom' }, i) => (
+          <Draggable key={`region-${i}`} draggableId={`region-${i}`} index={i}>
+            {(provided, snapshot) => (
+              <div
+                className={snapshot.isDragging ? 'currently-dragging' : ''}
+                style={provided.draggableProps.style}
+                ref={provided.innerRef}
+                {...provided.draggableProps}
+                {...provided.dragHandleProps}
+              >
+                <Accordion 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' }} />
+                        {label || `Region ${i + 1}`}
+                      </AccordionItemButton>
+                    </AccordionItemHeading>
+                    <AccordionItemPanel>
+                      <div className='series-item__panel-actions'>
+                        <Button
+                          type='button'
+                          variant='danger'
+                          size='sm'
+                          className='grouped-list__remove'
+                          onClick={event => {
+                            event.preventDefault()
+                            removeColumn(i)
+                          }}
+                        >
+                          Remove
+                        </Button>
+                      </div>
+                      <TextField value={label} label='Region Label' fieldName='label' i={i} updateField={updateField} />
+                      <div className='two-col-inputs'>
+                        <TextField
+                          value={color}
+                          label='Text Color'
+                          fieldName='color'
+                          placeholder={APP_FONT_COLOR}
+                          updateField={(section, subsection, fieldName, value) => regionUpdate(fieldName, value, i)}
+                        />
+                        <TextField
+                          value={background}
+                          label='Background'
+                          fieldName='background'
+                          placeholder={DEFAULT_REGION_BACKGROUND}
+                          updateField={(section, subsection, fieldName, value) => regionUpdate(fieldName, value, i)}
+                        />
+                      </div>
+
+                      <Select
+                        value={config.regions[i].fromType ?? 'Fixed'}
+                        label='Minimum Region Type'
+                        initial={'Select'}
+                        required={true}
+                        onChange={e => {
+                          if (e.target.value !== '' && e.target.value !== 'Select') {
+                            const newRegions = [...config.regions]
+                            newRegions[i].fromType = e.target.value
+                            updateConfig({
+                              ...config,
+                              regions: newRegions
+                            })
+                          }
+                          e.target.value = ''
+                        }}
+                        options={fromOptions}
+                      />
+
+                      {(config.regions[i].fromType === 'Fixed' ||
+                        config.regions[i].fromType === 'Previous Days' ||
+                        !config.regions[i].fromType) && (
+                        <>
+                          <TextField
+                            value={from}
+                            label={
+                              config.regions[i].fromType === 'Fixed' || !config.regions[i]?.fromType
+                                ? 'From Value'
+                                : 'Previous Number of Days'
+                            }
+                            fieldName='from'
+                            updateField={(section, subsection, fieldName, value) => regionUpdate(fieldName, value, i)}
+                            tooltip={
+                              <Tooltip style={{ textTransform: 'none' }}>
+                                <Tooltip.Target>
+                                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                                </Tooltip.Target>
+                                <Tooltip.Content>
+                                  <p>
+                                    When using categorical (linear scale) match the data set value. When using date
+                                    (linear / date time scale) match the x-axis value.
+                                  </p>
+                                </Tooltip.Content>
+                              </Tooltip>
+                            }
+                          />
+                        </>
+                      )}
+
+                      <Select
+                        value={config.regions[i].toType ?? 'Fixed'}
+                        label='Maximum Region Type'
+                        initial={'Select'}
+                        required={true}
+                        onChange={e => {
+                          if (e.target.value !== '' && e.target.value !== 'Select') {
+                            const newRegions = [...config.regions]
+                            newRegions[i].toType = e.target.value
+                            updateConfig({
+                              ...config,
+                              regions: newRegions
+                            })
+                          }
+                          e.target.value = ''
+                        }}
+                        options={toOptions}
+                      />
+
+                      {(config.regions[i].toType === 'Fixed' || !config.regions[i].toType) && (
+                        <TextField
+                          value={to}
+                          label='To Value'
+                          fieldName='to'
+                          updateField={(section, subsection, fieldName, value) => regionUpdate(fieldName, value, i)}
+                        />
+                      )}
+                    </AccordionItemPanel>
+                  </AccordionItem>
+                </Accordion>
+              </div>
             )}
-          </div>
-        ))}
+          </Draggable>
+        )}
+      />
       {!config.regions && <p style={{ textAlign: 'center' }}>There are currently no regions.</p>}
-      <button
+      <Button
         type='button'
-        className='btn btn-primary full-width'
+        variant='editor-primary'
         onClick={e => {
           e.preventDefault()
           addColumn()
         }}
       >
         Add Region
-      </button>
+      </Button>
     </>
   )
 })