@cdc/chart 4.26.2 → 4.26.3

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

@@ -6,7 +6,7 @@ import { useEditorPermissions } from '../../useEditorPermissions'
 import Accordion from '@cdc/core/components/ui/Accordion'
 import Button from '@cdc/core/components/elements/Button'
 import { CheckBox, Select } from '@cdc/core/components/EditorPanel/Inputs'
-import _ from 'lodash'
+import cloneDeep from 'lodash/cloneDeep'
 
 // types
 import { type PanelProps } from './../PanelProps'
@@ -161,7 +161,7 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
                       subsection={null}
                       fieldName='anchorMode'
                       updateField={(section, subsection, fieldName, value) => {
-                        const updatedAnnotations = _.cloneDeep(config?.annotations)
+                        const updatedAnnotations = cloneDeep(config?.annotations)
                         updatedAnnotations[index].anchorMode = value
 
                         // When switching to data mode, ensure seriesKey and dataX are initialized
@@ -191,7 +191,7 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
                       subsection={null}
                       fieldName='seriesKey'
                       updateField={(section, subsection, fieldName, value) => {
-                        const updatedAnnotations = _.cloneDeep(config?.annotations)
+                        const updatedAnnotations = cloneDeep(config?.annotations)
                         updatedAnnotations[index].seriesKey = value || config.series?.[0]?.dataKey
                         updateConfig({
                           ...config,
@@ -207,7 +207,7 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
                     <input
                       type='range'
                       onChange={e => {
-                        const updatedAnnotations = _.cloneDeep(config?.annotations)
+                        const updatedAnnotations = cloneDeep(config?.annotations)
                         updatedAnnotations[index].opacity = e.target.value
                         updateConfig({
                           ...config,
@@ -225,7 +225,7 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
                     fieldName={`${index}.edit.subject`}
                     label='Edit Subject'
                     updateField={(section, subsection, fieldName, value) => {
-                      const updatedAnnotations = _.cloneDeep(config?.annotations)
+                      const updatedAnnotations = cloneDeep(config?.annotations)
                       updatedAnnotations[index].edit.subject = value
                       updateConfig({
                         ...config,
@@ -240,7 +240,7 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
                     fieldName={`${index}.edit.label`}
                     label='Edit Label'
                     updateField={(section, subsection, fieldName, value) => {
-                      const updatedAnnotations = _.cloneDeep(config?.annotations)
+                      const updatedAnnotations = cloneDeep(config?.annotations)
                       updatedAnnotations[index].edit.label = value
                       updateConfig({
                         ...config,
@@ -257,7 +257,7 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
                     subsection={null}
                     fieldName='connectionType'
                     updateField={(section, subsection, fieldName, value) => {
-                      const updatedAnnotations = _.cloneDeep(config?.annotations)
+                      const updatedAnnotations = cloneDeep(config?.annotations)
                       updatedAnnotations[index].connectionType = value
                       updateConfig({
                         ...config,
@@ -277,7 +277,7 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
                           max='20'
                           value={config?.annotations[index]?.bezier || 0}
                           onChange={e => {
-                            const updatedAnnotations = _.cloneDeep(config?.annotations)
+                            const updatedAnnotations = cloneDeep(config?.annotations)
                             updatedAnnotations[index].bezier = e.target.value
                             updateConfig({
                               ...config,
@@ -297,7 +297,7 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
                     subsection={null}
                     fieldName='marker'
                     updateField={(section, subsection, fieldName, value) => {
-                      const updatedAnnotations = _.cloneDeep(config?.annotations)
+                      const updatedAnnotations = cloneDeep(config?.annotations)
                       updatedAnnotations[index].marker = value
                       updateConfig({
                         ...config,

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

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

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

@@ -47,6 +47,22 @@ const PanelGeneral: FC<PanelProps> = props => {
     }
   }
 
+  const handleTitleStyleChange = (newTitleStyle: string) => {
+    updateConfig({
+      ...config,
+      titleStyle: newTitleStyle,
+      visual:
+        newTitleStyle === 'legacy'
+          ? config.visual
+          : {
+              ...config.visual,
+              border: undefined,
+              borderColorTheme: undefined,
+              accent: undefined
+            }
+    })
+  }
+
   return (
     <AccordionItem>
       {' '}
@@ -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>
   )

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

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

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

@@ -8,8 +8,9 @@ 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 { buildForecastPaletteOptions } from '../../../../helpers/buildForecastPaletteOptions'
+import { getSeriesColumnConfig, upsertSeriesColumnConfig } from '../../../../helpers/seriesColumnSettings'
 
 // Third Party
 import {
@@ -538,6 +539,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
@@ -637,6 +716,7 @@ const SeriesItem = props => {
               {chartsWithOptions.includes(config.visualizationType) && (
                 <AccordionItemPanel>
                   <Series.Input.Name series={series} index={i} />
+                  <Series.Input.ColumnSettings series={series} index={i} />
                   {showDynamicCategory && (
                     <>
                       <Select
@@ -722,7 +802,8 @@ const Series = {
   },
   Input: {
     Name: SeriesInputName,
-    Weight: SeriesInputWeight
+    Weight: SeriesInputWeight,
+    ColumnSettings: SeriesColumnSettings
   },
   Checkbox: {
     DisplayInTooltip: SeriesDisplayInTooltip

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%;