@cdc/chart 4.25.11 → 4.26.2

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

@@ -50,7 +50,6 @@ const SeriesWrapper = props => {
       forecastingStages.forEach(stage => {
         forecastingStageArr.push({ key: stage })
       })
-      // debugger
       series[index].stages = forecastingStageArr
       series[index].stageColumn = series[index].dataKey
     }

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

@@ -1,4 +1,4 @@
-import { useContext, FC } from 'react'
+import { useContext, FC, useMemo } from 'react'
 import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd'
 import {
   AccordionItem,
@@ -11,6 +11,7 @@ import {
 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 { useDataColumns } from '@cdc/core/hooks/useDataColumns'
 
 // contexts
 import { ChartContext } from './../../../../types/ChartContext.js'
@@ -25,30 +26,30 @@ const PanelSmallMultiples: FC<PanelProps> = props => {
   const { updateField } = useEditorPanelContext()
   const { visSupportsSmallMultiples } = useEditorPermissions()
 
-  const getColumns = (filter = true) => {
-    let columns = {}
-    rawData?.forEach(row => {
-      Object.keys(row).forEach(columnName => (columns[columnName] = true))
-    })
-
-    if (filter) {
-      const { lower, upper } = config.confidenceKeys || {}
-      Object.keys(columns).forEach(key => {
-        if (
-          (config.series && config.series.filter(series => series.dataKey === key).length > 0) ||
-          (config.confidenceKeys &&
-            Object.keys(config.confidenceKeys).includes(key) &&
-            ((lower && upper) || lower || upper) &&
-            key !== lower &&
-            key !== upper)
-        ) {
-          delete columns[key]
-        }
-      })
-    }
+  // Extract column names from data with memoization (replaces getColumns)
+  const allColumns = useDataColumns(rawData)
 
-    return Object.keys(columns)
-  }
+  // Filter out series columns and confidence key columns (except lower and upper)
+  const filteredColumns = useMemo(() => {
+    const { lower, upper } = config.confidenceKeys || {}
+    return allColumns.filter(key => {
+      // Filter out series columns
+      if (config.series && config.series.some(series => series.dataKey === key)) {
+        return false
+      }
+      // Filter out confidence key columns (except lower and upper)
+      if (
+        config.confidenceKeys &&
+        Object.keys(config.confidenceKeys).includes(key) &&
+        ((lower && upper) || lower || upper) &&
+        key !== lower &&
+        key !== upper
+      ) {
+        return false
+      }
+      return true
+    })
+  }, [allColumns, config.series, config.confidenceKeys])
 
   return (
     <>
@@ -91,7 +92,7 @@ const PanelSmallMultiples: FC<PanelProps> = props => {
                 label='Tile By Column'
                 initial='Select Column'
                 updateField={updateField}
-                options={getColumns()}
+                options={filteredColumns}
               />
             )}
 
@@ -184,6 +185,8 @@ const PanelSmallMultiples: FC<PanelProps> = props => {
                         value={currentOrderType}
                         options={tileOrderOptions}
                         label='Tile Order'
+                        fieldName='tileOrderType'
+                        section='smallMultiples'
                         updateField={(_section, _subsection, _fieldName, value) => {
                           handleOrderTypeChange(value)
                         }}
@@ -244,6 +247,8 @@ const PanelSmallMultiples: FC<PanelProps> = props => {
                     }
                   ]}
                   label='Color Mode'
+                  fieldName='colorMode'
+                  section='smallMultiples'
                   updateField={(_section, _subsection, _fieldName, value) => {
                     updateConfig({
                       ...config,

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

@@ -241,6 +241,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'
@@ -319,16 +340,21 @@ const PanelVisual: FC<PanelProps> = props => {
                   colorIndices={[2, 4, 6]}
                   className='color-palette'
                 />
-                <span>Colorblind Safe</span>
-                <PaletteSelector
-                  palettes={accessibleColors}
-                  colorPalettes={colorPalettes}
-                  config={config}
-                  onPaletteSelect={handlePaletteSelection}
-                  selectedPalette={getCurrentPaletteName(config)}
-                  colorIndices={[2, 3, 5]}
-                  className='color-palette'
-                />
+
+                {config.visualizationType !== 'Warming Stripes' && (
+                  <>
+                    <span>Colorblind Safe</span>
+                    <PaletteSelector
+                      palettes={accessibleColors}
+                      colorPalettes={colorPalettes}
+                      config={config}
+                      onPaletteSelect={handlePaletteSelection}
+                      selectedPalette={getCurrentPaletteName(config)}
+                      colorIndices={[2, 3, 5]}
+                      className='color-palette'
+                    />
+                  </>
+                )}
               </>
             )}
 
@@ -393,7 +419,6 @@ const PanelVisual: FC<PanelProps> = props => {
                       }}
                       label='Custom Color Order'
                       minColors={1}
-                      maxColors={20}
                     />
                   </div>
                 )}
@@ -516,28 +541,17 @@ const PanelVisual: FC<PanelProps> = props => {
             />
           </>
         )}
-        {visSupportsBarThickness() &&
-          config.orientation === 'horizontal' &&
-          !config.isLollipopChart &&
-          config.yAxis.labelPlacement !== 'On Bar' && (
+
+        {(config.orientation !== 'horizontal' || config.visualizationType === 'Combo') &&
+          config.visualizationType !== 'Warming Stripes' && (
             <TextField
+              value={config.barThickness}
               type='number'
-              value={config.barHeight || '25'}
-              fieldName='barHeight'
-              label=' Bar Thickness'
+              fieldName='barThickness'
+              label='Bar Thickness'
               updateField={updateField}
-              min={15}
             />
           )}
-        {(config.orientation !== 'horizontal' || config.visualizationType === 'Combo') && (
-          <TextField
-            value={config.barThickness}
-            type='number'
-            fieldName='barThickness'
-            label='Bar Thickness'
-            updateField={updateField}
-          />
-        )}
         {visSupportsBarSpace() && (
           <TextField
             type='number'

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