@cdc/chart 4.26.2 → 4.26.4

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

@@ -1,15 +1,19 @@
 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 { type ChartContext } from '../../../../types/ChartContext.js'
 import { type PanelProps } from '../PanelProps.js'
 import ConfigContext from '../../../../ConfigContext.js'
@@ -53,129 +57,170 @@ 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'
+                          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)}
+                        />
+                      )}
+                    </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>
     </>
   )
 })

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

@@ -115,16 +115,16 @@ const SankeySettings: React.FC<PanelProps> = props => {
             </div>
           ))}
         {data?.storyNodeText?.length < 3 && (
-          <button
+          <Button
             type='button'
-            className='btn btn-primary full-width'
+            variant='editor-primary'
             onClick={e => {
               e.preventDefault()
               addStoryNode()
             }}
           >
             Add StoryNode
-          </button>
+          </Button>
         )}
         {config.data?.[0]?.tooltips?.length > 0 && (
           <CheckBox

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

@@ -8,8 +8,10 @@ import { colorPalettesChartV1, colorPalettesChartV2, sequentialPalettes } from '
 import { updatePaletteNames } from '@cdc/core/helpers/updatePaletteNames'
 import { getColorPaletteVersion } from '@cdc/core/helpers/getColorPaletteVersion'
 import Icon from '@cdc/core/components/ui/Icon'
-import { Select } from '@cdc/core/components/EditorPanel/Inputs'
+import { CheckBox, Select, TextField } from '@cdc/core/components/EditorPanel/Inputs'
+import Button from '@cdc/core/components/elements/Button'
 import { buildForecastPaletteOptions } from '../../../../helpers/buildForecastPaletteOptions'
+import { getSeriesColumnConfig, upsertSeriesColumnConfig } from '../../../../helpers/seriesColumnSettings'
 
 // Third Party
 import {
@@ -19,7 +21,7 @@ import {
   AccordionItemPanel,
   AccordionItemButton
 } from 'react-accessible-accordion'
-import { Draggable, DragDropContext, Droppable } from '@hello-pangea/dnd'
+import { Draggable } from '@hello-pangea/dnd'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 
 const SeriesContext = React.createContext({})
@@ -374,8 +376,8 @@ const SeriesDropdownConfidenceInterval = props => {
             )
           })}
         </Accordion>
-        <button
-          className='btn btn-primary full-width'
+        <Button
+          variant='editor-primary'
           onClick={e => {
             e.preventDefault()
             let copiedIndex = null
@@ -396,7 +398,7 @@ const SeriesDropdownConfidenceInterval = props => {
           }}
         >
           Add Confidence Interval Group
-        </button>
+        </Button>
       </fieldset>
     </div>
   )
@@ -538,6 +540,84 @@ const SeriesDisplayInTooltip = props => {
   )
 }
 
+const SeriesColumnSettings = props => {
+  const { series } = props
+  const { config, updateConfig } = useContext(ConfigContext)
+  const { columnConfig } = getSeriesColumnConfig(config.columns || {}, series.dataKey)
+
+  const updateSeriesColumn = (fieldName, value) => {
+    const columns = upsertSeriesColumnConfig(config.columns || {}, series.dataKey, {
+      [fieldName]: value
+    })
+
+    updateConfig({
+      ...config,
+      columns
+    })
+  }
+
+  return (
+    <>
+      <span className='divider-heading'>Series Column Settings</span>
+      <TextField
+        value={columnConfig.label || ''}
+        section='seriesColumn'
+        subsection={series.dataKey}
+        fieldName='label'
+        label='Label'
+        updateField={(_section, _subsection, _fieldName, value) => updateSeriesColumn('label', value)}
+      />
+      <div className='three-col'>
+        <TextField
+          value={columnConfig.prefix || ''}
+          section='seriesColumn'
+          subsection={series.dataKey}
+          fieldName='prefix'
+          label='Prefix'
+          updateField={(_section, _subsection, _fieldName, value) => updateSeriesColumn('prefix', value)}
+        />
+        <TextField
+          value={columnConfig.suffix || ''}
+          section='seriesColumn'
+          subsection={series.dataKey}
+          fieldName='suffix'
+          label='Suffix'
+          updateField={(_section, _subsection, _fieldName, value) => updateSeriesColumn('suffix', value)}
+        />
+        <TextField
+          type='number'
+          value={columnConfig.roundToPlace ?? 0}
+          section='seriesColumn'
+          subsection={series.dataKey}
+          fieldName='roundToPlace'
+          label='Round'
+          updateField={(_section, _subsection, _fieldName, value) =>
+            updateSeriesColumn('roundToPlace', Number(value) || 0)
+          }
+        />
+      </div>
+      <CheckBox
+        value={columnConfig.commas || false}
+        section='seriesColumn'
+        subsection={series.dataKey}
+        fieldName='commas'
+        label='Add Commas to Numbers'
+        updateField={(_section, _subsection, _fieldName, value) => updateSeriesColumn('commas', value)}
+      />
+      {config.table.showVertical && (
+        <CheckBox
+          value={columnConfig.dataTable ?? true}
+          section='seriesColumn'
+          subsection={series.dataKey}
+          fieldName='dataTable'
+          label='Show in Data Table'
+          updateField={(_section, _subsection, _fieldName, value) => updateSeriesColumn('dataTable', value)}
+        />
+      )}
+    </>
+  )
+}
+
 const SeriesButtonRemove = props => {
   const { config, updateConfig } = useContext(ConfigContext)
   const { series, index } = props
@@ -573,7 +653,7 @@ const SeriesButtonRemove = props => {
     }
   }
 
-  const handleRemoveSeries = (e, series, index) => {
+  const handleRemoveSeries = (e, series) => {
     e.preventDefault()
     removeSeries(series.dataKey)
   }
@@ -581,9 +661,9 @@ const SeriesButtonRemove = props => {
   return (
     config.series &&
     config.series.length > 1 && (
-      <button className='series-list__remove' onClick={e => handleRemoveSeries(e, series, index)}>
+      <Button variant='danger' size='sm' className='grouped-list__remove' onClick={e => handleRemoveSeries(e, series)}>
         Remove
-      </button>
+      </Button>
     )
   )
 }
@@ -631,12 +711,15 @@ const SeriesItem = props => {
                 >
                   <Icon display='move' size={15} style={{ cursor: 'default' }} />
                   {series.dataKey}
-                  <Series.Button.Remove series={series} index={i} />
                 </AccordionItemButton>
               </AccordionItemHeading>
               {chartsWithOptions.includes(config.visualizationType) && (
                 <AccordionItemPanel>
+                  <div className='series-item__panel-actions'>
+                    <Series.Button.Remove series={series} index={i} />
+                  </div>
                   <Series.Input.Name series={series} index={i} />
+                  <Series.Input.ColumnSettings series={series} index={i} />
                   {showDynamicCategory && (
                     <>
                       <Select
@@ -693,22 +776,6 @@ const SeriesItem = props => {
   )
 }
 
-const SeriesList = props => {
-  const { series, getItemStyle, sortableItemStyles, chartsWithOptions } = props
-  return series.map((series, i) => {
-    return (
-      <SeriesItem
-        getItemStyle={getItemStyle}
-        sortableItemStyles={sortableItemStyles}
-        chartsWithOptions={chartsWithOptions}
-        series={series}
-        index={i}
-        key={`series-list-${i}`}
-      />
-    )
-  })
-}
-
 const Series = {
   Wrapper: SeriesWrapper,
   Dropdown: {
@@ -722,7 +789,8 @@ const Series = {
   },
   Input: {
     Name: SeriesInputName,
-    Weight: SeriesInputWeight
+    Weight: SeriesInputWeight,
+    ColumnSettings: SeriesColumnSettings
   },
   Checkbox: {
     DisplayInTooltip: SeriesDisplayInTooltip
@@ -730,8 +798,7 @@ const Series = {
   Button: {
     Remove: SeriesButtonRemove
   },
-  Item: SeriesItem,
-  List: SeriesList
+  Item: SeriesItem
 }
 
 export default Series

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

@@ -1,5 +1,4 @@
 import { useContext, FC, useMemo } from 'react'
-import _ from 'lodash'
 import cloneConfig from '@cdc/core/helpers/cloneConfig'
 
 // external libraries
@@ -31,13 +30,16 @@ import { LineChartConfig } from '../../../../types/ChartConfig'
 import { PaletteSelector, DeveloperPaletteRollback } from '@cdc/core/components/PaletteSelector'
 import { HeaderThemeSelector } from '@cdc/core/components/HeaderThemeSelector'
 import { CustomColorsEditor } from '@cdc/core/components/CustomColorsEditor'
+import StyleTreatmentSection from '@cdc/core/components/EditorPanel/sections/StyleTreatmentSection'
 import { getColorScale } from '../../../../helpers/getColorScale'
-import '@cdc/core/styles/v2/components/editor.scss'
+import { ENABLE_CHART_MAP_TP5_TREATMENT_SELECTION, ENABLE_CHART_VISUAL_SETTINGS } from '@cdc/core/helpers/constants'
+import '@cdc/core/components/EditorPanel/editor.scss'
 import './panelVisual.styles.css'
 
 const PanelVisual: FC<PanelProps> = props => {
   const { config, updateConfig, colorPalettes, twoColorPalette } = useContext<ChartContext>(ConfigContext)
   const { visual } = config
+  const styleTreatment = config.titleStyle === 'legacy' && !visual?.tp5Treatment ? 'legacy' : 'tp5'
 
   const { setLollipopShape, updateField, handlePaletteSelection, handleTwoColorPaletteSelection } =
     useEditorPanelContext()
@@ -89,12 +91,44 @@ const PanelVisual: FC<PanelProps> = props => {
     }
   }
 
+  const handleStyleTreatmentChange = (value: string) => {
+    const useTp5Treatment = value === 'tp5'
+
+    updateConfig({
+      ...config,
+      titleStyle: useTp5Treatment ? 'small' : 'legacy',
+      visual: {
+        ...config.visual,
+        tp5Treatment: useTp5Treatment,
+        border: useTp5Treatment ? false : config.visual?.border,
+        borderColorTheme: useTp5Treatment ? false : config.visual?.borderColorTheme,
+        accent: useTp5Treatment ? false : config.visual?.accent
+      }
+    })
+  }
+
   return (
     <AccordionItem className='panel-visual'>
       <AccordionItemHeading>
         <AccordionItemButton>Visual</AccordionItemButton>
       </AccordionItemHeading>
       <AccordionItemPanel>
+        <HeaderThemeSelector selectedTheme={config.theme} onThemeSelect={theme => updateConfig({ ...config, theme })} />
+        {ENABLE_CHART_VISUAL_SETTINGS && (
+          <StyleTreatmentSection
+            styleTreatment={styleTreatment}
+            onStyleTreatmentChange={handleStyleTreatmentChange}
+            showStyleTreatment={ENABLE_CHART_MAP_TP5_TREATMENT_SELECTION}
+            border={visual?.border}
+            borderColorTheme={visual?.borderColorTheme}
+            accent={visual?.accent}
+            background={visual?.background}
+            hideBackgroundColor={visual?.hideBackgroundColor}
+            showBackground={config.visualizationType === 'Spark Line'}
+            showHideBackgroundColor={config.visualizationType === 'Spark Line'}
+            updateField={updateField}
+          />
+        )}
         {(config.barStyle === 'lollipop' || config.isLollipopChart) && (
           <>
             <fieldset className='header'>
@@ -272,7 +306,6 @@ const PanelVisual: FC<PanelProps> = props => {
             />
           </>
         )}
-        <HeaderThemeSelector selectedTheme={config.theme} onThemeSelect={theme => updateConfig({ ...config, theme })} />
         {(visSupportsNonSequentialPallete() || visSupportsNonSequentialPallete()) && (
           <>
             <label>
@@ -573,45 +606,6 @@ const PanelVisual: FC<PanelProps> = props => {
             updateField={updateField}
           />
         )}
-        {config.visualizationType === 'Spark Line' && (
-          <div className='cove-accordion__panel-section checkbox-group'>
-            <CheckBox
-              value={visual?.border}
-              section='visual'
-              fieldName='border'
-              label='Show Border'
-              updateField={updateField}
-            />
-            <CheckBox
-              value={visual?.borderColorTheme}
-              section='visual'
-              fieldName='borderColorTheme'
-              label='Use Border Color Theme'
-              updateField={updateField}
-            />
-            <CheckBox
-              value={visual?.accent}
-              section='visual'
-              fieldName='accent'
-              label='Use Accent Style'
-              updateField={updateField}
-            />
-            <CheckBox
-              value={visual?.background}
-              section='visual'
-              fieldName='background'
-              label='Use Theme Background Color'
-              updateField={updateField}
-            />
-            <CheckBox
-              value={visual?.hideBackgroundColor}
-              section='visual'
-              fieldName='hideBackgroundColor'
-              label='Hide Background Color'
-              updateField={updateField}
-            />
-          </div>
-        )}
         {(config.visualizationType === 'Line' || config.visualizationType === 'Combo') && (
           <CheckBox
             value={config.showLineSeriesLabels}
@@ -690,6 +684,15 @@ const PanelVisual: FC<PanelProps> = props => {
             }
           />
         </label>
+        {isCoveDeveloperMode() && (
+          <CheckBox
+            value={visual?.highlightWrappers}
+            section='visual'
+            fieldName='highlightWrappers'
+            label='Highlight Layout Wrappers'
+            updateField={updateField}
+          />
+        )}
       </AccordionItemPanel>
     </AccordionItem>
   )

package/src/components/EditorPanel/editor-panel.scss

@@ -1,4 +1,4 @@
-.cdc-open-viz-module.type-chart {
+.cove-visualization.type-chart {
   .viewport-overrides {
     button {
       width: 100%;