@cdc/chart 4.26.1 → 4.26.3

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

@@ -0,0 +1,353 @@
+import { useContext, FC } from 'react'
+import {
+  AccordionItem,
+  AccordionItemHeading,
+  AccordionItemPanel,
+  AccordionItemButton
+} from 'react-accessible-accordion'
+import { TextField, Select, CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
+import Tooltip from '@cdc/core/components/ui/Tooltip'
+import Icon from '@cdc/core/components/ui/Icon'
+import ConfigContext from '../../../../ConfigContext'
+import { useEditorPanelContext } from '../../EditorPanelContext'
+import { type PanelProps } from './../PanelProps'
+import { ChartContext } from '../../../../types/ChartContext'
+
+const PanelRadar: FC<PanelProps> = props => {
+  const { config, rawData } = useContext<ChartContext>(ConfigContext)
+  const { updateField } = useEditorPanelContext()
+
+  if (config.visualizationType !== 'Radar') return null
+
+  const radar = config.radar || {}
+
+  // Get available columns from the data
+  const getColumns = () => {
+    if (!rawData || rawData.length === 0) return []
+    return Object.keys(rawData[0])
+  }
+
+  return (
+    <AccordionItem>
+      <AccordionItemHeading>
+        <AccordionItemButton>{props.name}</AccordionItemButton>
+      </AccordionItemHeading>
+      <AccordionItemPanel>
+        {/* Data Settings */}
+        <fieldset className='fieldset'>
+          <legend style={{ fontSize: '16px', fontWeight: 'bold', marginBottom: '10px' }}>Data Settings</legend>
+
+          <Select
+            value={config.xAxis?.dataKey || ''}
+            section='xAxis'
+            fieldName='dataKey'
+            label='Category Column'
+            initial='Select'
+            required={true}
+            updateField={updateField}
+            options={getColumns()}
+            tooltip={
+              <Tooltip style={{ textTransform: 'none' }}>
+                <Tooltip.Target>
+                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                </Tooltip.Target>
+                <Tooltip.Content>
+                  <p>Select the column containing category labels for each axis of the radar chart.</p>
+                </Tooltip.Content>
+              </Tooltip>
+            }
+          />
+        </fieldset>
+
+        {/* Number Formatting */}
+        <fieldset className='fieldset' style={{ marginTop: '20px' }}>
+          <legend style={{ fontSize: '16px', fontWeight: 'bold', marginBottom: '10px' }}>Number Formatting</legend>
+
+          <CheckBox
+            value={config.dataFormat?.commas}
+            section='dataFormat'
+            fieldName='commas'
+            label='Add Commas'
+            updateField={updateField}
+            tooltip={
+              <Tooltip style={{ textTransform: 'none' }}>
+                <Tooltip.Target>
+                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                </Tooltip.Target>
+                <Tooltip.Content>
+                  <p>Add commas to numeric values in tooltips and data table.</p>
+                </Tooltip.Content>
+              </Tooltip>
+            }
+          />
+
+          <TextField
+            value={config.dataFormat?.roundTo ?? 0}
+            type='number'
+            section='dataFormat'
+            fieldName='roundTo'
+            label='Round to Decimal Point'
+            updateField={updateField}
+            min={0}
+          />
+
+          <div className='two-col-inputs'>
+            <TextField
+              value={config.dataFormat?.prefix || ''}
+              section='dataFormat'
+              fieldName='prefix'
+              label='Prefix'
+              updateField={updateField}
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>Enter a data prefix (such as "$"), if applicable.</p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+            />
+            <TextField
+              value={config.dataFormat?.suffix || ''}
+              section='dataFormat'
+              fieldName='suffix'
+              label='Suffix'
+              updateField={updateField}
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>Enter a data suffix (such as "%"), if applicable.</p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+            />
+          </div>
+        </fieldset>
+
+        {/* Grid Settings */}
+        <fieldset className='fieldset' style={{ marginTop: '20px' }}>
+          <legend style={{ fontSize: '16px', fontWeight: 'bold', marginBottom: '10px' }}>Grid Settings</legend>
+
+          <TextField
+            type='number'
+            value={radar.gridRings ?? 5}
+            fieldName='gridRings'
+            section='radar'
+            label='Number of Grid Rings'
+            updateField={updateField}
+            min={3}
+            max={10}
+            tooltip={
+              <Tooltip style={{ textTransform: 'none' }}>
+                <Tooltip.Target>
+                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                </Tooltip.Target>
+                <Tooltip.Content>
+                  <p>Number of concentric rings in the grid (3-10)</p>
+                </Tooltip.Content>
+              </Tooltip>
+            }
+          />
+
+          <CheckBox
+            value={radar.showGridRings ?? true}
+            fieldName='showGridRings'
+            section='radar'
+            label='Show Grid Rings'
+            updateField={updateField}
+          />
+
+          <Select
+            value={radar.gridRingStyle ?? 'polygons'}
+            fieldName='gridRingStyle'
+            section='radar'
+            label='Grid Style'
+            updateField={updateField}
+            options={['polygons', 'circles']}
+            tooltip={
+              <Tooltip style={{ textTransform: 'none' }}>
+                <Tooltip.Target>
+                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                </Tooltip.Target>
+                <Tooltip.Content>
+                  <p>Shape of the grid rings - polygons match the data shape, circles are rounded</p>
+                </Tooltip.Content>
+              </Tooltip>
+            }
+          />
+        </fieldset>
+
+        {/* Scale Settings */}
+        <fieldset className='fieldset' style={{ marginTop: '20px' }}>
+          <legend style={{ fontSize: '16px', fontWeight: 'bold', marginBottom: '10px' }}>Scale Settings</legend>
+
+          <TextField
+            type='number'
+            value={radar.scaleMin ?? 0}
+            fieldName='scaleMin'
+            section='radar'
+            label='Minimum Value'
+            updateField={updateField}
+            tooltip={
+              <Tooltip style={{ textTransform: 'none' }}>
+                <Tooltip.Target>
+                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                </Tooltip.Target>
+                <Tooltip.Content>
+                  <p>Minimum value for the radar scale (center point)</p>
+                </Tooltip.Content>
+              </Tooltip>
+            }
+          />
+
+          <TextField
+            type='number'
+            value={radar.scaleMax ?? ''}
+            fieldName='scaleMax'
+            section='radar'
+            label='Maximum Value'
+            updateField={updateField}
+            placeholder='Auto-calculated'
+            tooltip={
+              <Tooltip style={{ textTransform: 'none' }}>
+                <Tooltip.Target>
+                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                </Tooltip.Target>
+                <Tooltip.Content>
+                  <p>Maximum value for the radar scale. Leave empty to auto-calculate from data.</p>
+                </Tooltip.Content>
+              </Tooltip>
+            }
+          />
+        </fieldset>
+
+        {/* Visual Settings */}
+        <fieldset className='fieldset' style={{ marginTop: '20px' }}>
+          <legend style={{ fontSize: '16px', fontWeight: 'bold', marginBottom: '10px' }}>Visual Settings</legend>
+
+          <CheckBox
+            value={radar.showFill ?? false}
+            fieldName='showFill'
+            section='radar'
+            label='Show Fill'
+            updateField={updateField}
+            tooltip={
+              <Tooltip style={{ textTransform: 'none' }}>
+                <Tooltip.Target>
+                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                </Tooltip.Target>
+                <Tooltip.Content>
+                  <p>Fill the polygon area with color. When off, only the outline is shown.</p>
+                </Tooltip.Content>
+              </Tooltip>
+            }
+          />
+
+          {(radar.showFill ?? false) && (
+            <TextField
+              type='number'
+              value={radar.fillOpacity ?? 0.3}
+              fieldName='fillOpacity'
+              section='radar'
+              label='Fill Opacity'
+              updateField={updateField}
+              min={0}
+              max={1}
+              step={0.1}
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>Opacity of the polygon fill (0 = transparent, 1 = solid)</p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+            />
+          )}
+
+          <TextField
+            type='number'
+            value={radar.strokeWidth ?? 2}
+            fieldName='strokeWidth'
+            section='radar'
+            label='Stroke Width'
+            updateField={updateField}
+            min={1}
+            max={5}
+            tooltip={
+              <Tooltip style={{ textTransform: 'none' }}>
+                <Tooltip.Target>
+                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                </Tooltip.Target>
+                <Tooltip.Content>
+                  <p>Width of the polygon outline</p>
+                </Tooltip.Content>
+              </Tooltip>
+            }
+          />
+
+          <CheckBox
+            value={radar.showPoints ?? true}
+            fieldName='showPoints'
+            section='radar'
+            label='Show Data Points'
+            updateField={updateField}
+            tooltip={
+              <Tooltip style={{ textTransform: 'none' }}>
+                <Tooltip.Target>
+                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                </Tooltip.Target>
+                <Tooltip.Content>
+                  <p>Display circular markers at each data point vertex</p>
+                </Tooltip.Content>
+              </Tooltip>
+            }
+          />
+
+          {(radar.showPoints ?? true) && (
+            <TextField
+              type='number'
+              value={radar.pointRadius ?? 4}
+              fieldName='pointRadius'
+              section='radar'
+              label='Point Size'
+              updateField={updateField}
+              min={2}
+              max={10}
+            />
+          )}
+
+          <TextField
+            type='number'
+            value={radar.axisLabelOffset ?? 15}
+            fieldName='axisLabelOffset'
+            section='radar'
+            label='Axis Label Offset'
+            updateField={updateField}
+            min={5}
+            max={50}
+            tooltip={
+              <Tooltip style={{ textTransform: 'none' }}>
+                <Tooltip.Target>
+                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                </Tooltip.Target>
+                <Tooltip.Content>
+                  <p>Distance between axis endpoint and label</p>
+                </Tooltip.Content>
+              </Tooltip>
+            }
+          />
+        </fieldset>
+      </AccordionItemPanel>
+    </AccordionItem>
+  )
+}
+
+export default PanelRadar

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 {
@@ -50,7 +51,6 @@ const SeriesWrapper = props => {
       forecastingStages.forEach(stage => {
         forecastingStageArr.push({ key: stage })
       })
-      // debugger
       series[index].stages = forecastingStageArr
       series[index].stageColumn = series[index].dataKey
     }
@@ -539,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
@@ -638,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
@@ -723,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'>
@@ -241,6 +275,27 @@ const PanelVisual: FC<PanelProps> = props => {
               updateField={updateField}
               options={['Same as Line', 'Lighter than Line']}
             />
+            <CheckBox
+              value={config.general?.useIntelligentLineChartLabels ?? false}
+              section='general'
+              fieldName='useIntelligentLineChartLabels'
+              label='Use Intelligent Label Positioning'
+              updateField={updateField}
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>
+                      Automatically positions data labels to avoid overlapping with line segments based on the direction
+                      and location of data points. When disabled, all labels are positioned above and centered on their
+                      data points.
+                    </p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+            />
             <CheckBox
               value={!(config as LineChartConfig).isolatedDotsSameSize}
               fieldName='isolatedDotsSameSize'
@@ -251,7 +306,6 @@ const PanelVisual: FC<PanelProps> = props => {
             />
           </>
         )}
-        <HeaderThemeSelector selectedTheme={config.theme} onThemeSelect={theme => updateConfig({ ...config, theme })} />
         {(visSupportsNonSequentialPallete() || visSupportsNonSequentialPallete()) && (
           <>
             <label>
@@ -398,7 +452,6 @@ const PanelVisual: FC<PanelProps> = props => {
                       }}
                       label='Custom Color Order'
                       minColors={1}
-                      maxColors={20}
                     />
                   </div>
                 )}
@@ -553,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}
@@ -670,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/components/Panels/index.tsx

@@ -5,6 +5,7 @@ import General from './Panel.General'
 import BoxPlot from './Panel.BoxPlot'
 import Visual from './Panel.Visual'
 import Sankey from './Panel.Sankey'
+import Radar from './Panel.Radar'
 import Annotate from './Panel.Annotate'
 import PatternSettings from './Panel.PatternSettings'
 import SmallMultiples from './Panel.SmallMultiples'
@@ -17,6 +18,7 @@ const Panels = {
   BoxPlot,
   Visual,
   Sankey,
+  Radar,
   Annotate,
   PatternSettings,
   SmallMultiples

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