@cdc/chart 4.26.1 → 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.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'
@@ -398,7 +419,6 @@ const PanelVisual: FC<PanelProps> = props => {
                       }}
                       label='Custom Color Order'
                       minColors={1}
-                      maxColors={20}
                     />
                   </div>
                 )}

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/useEditorPermissions.ts

@@ -16,9 +16,11 @@ export const useEditorPermissions = () => {
     'Deviation Bar',
     'Forecasting',
     // 'Forest Plot',
+    'Horizon Chart',
     'Line',
     'Paired Bar',
     'Pie',
+    'Radar',
     'Scatter Plot',
     'Spark Line',
     'Sankey',
@@ -26,7 +28,7 @@ export const useEditorPermissions = () => {
   ]
 
   const visSupportsDateCategoryAxis = () => {
-    const disabledCharts = ['Forest Plot', 'Sankey']
+    const disabledCharts = ['Forest Plot', 'Radar', 'Sankey']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -55,16 +57,30 @@ export const useEditorPermissions = () => {
     return true
   }
 
+  const visSupportsClickingLegend = () => {
+    const disabledCharts = ['Horizon Chart']
+    if (disabledCharts.includes(visualizationType)) return false
+    return true
+  }
+
+  const visSupportsDataAnnotations = () => {
+    const enabledCharts = ['Line', 'Bar', 'Combo', 'Area Chart', 'Forecasting']
+    if (enabledCharts.includes(visualizationType) && config.orientation !== 'horizontal') return true
+    return false
+  }
+
   const visHasLabelOnData = () => {
     const disabledCharts = [
       'Area Chart',
       'Box Plot',
+      'Bump Chart',
+      'Forest Plot',
+      'Horizon Chart',
       'Pie',
+      'Radar',
+      'Sankey',
       'Scatter Plot',
-      'Forest Plot',
       'Spark Line',
-      'Sankey',
-      'Bump Chart',
       'Warming Stripes'
     ]
     if (disabledCharts.includes(visualizationType)) return false
@@ -74,12 +90,13 @@ export const useEditorPermissions = () => {
   const visCanAnimate = () => {
     const disabledCharts = [
       'Area Chart',
-      'Scatter Plot',
       'Box Plot',
+      'Bump Chart',
       'Forest Plot',
-      'Spark Line',
+      'Radar',
       'Sankey',
-      'Bump Chart',
+      'Scatter Plot',
+      'Spark Line',
       'Warming Stripes'
     ]
     if (disabledCharts.includes(visualizationType)) return false
@@ -145,10 +162,11 @@ export const useEditorPermissions = () => {
   }
   const visHasBrushChart = () => {
     if (config.xAxis.type === 'categorical') return false
-    // Allow Line charts, vertical Bar charts (both stacked and grouped), and vertical Area charts
+    // Allow Line charts, vertical Bar charts (both stacked and grouped), vertical Area charts, and Combo charts
     if (visualizationType === 'Line' && orientation === 'vertical') return true
     if (visualizationType === 'Bar' && orientation === 'vertical') return true
     if (visualizationType === 'Area Chart' && orientation === 'vertical') return true
+    if (visualizationType === 'Combo' && orientation === 'vertical') return true
     return false
   }
 
@@ -256,7 +274,16 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsRegions = () => {
-    const disabledCharts = ['Forest Plot', 'Pie', 'Paired Bar', 'Spark Line', 'Sankey', 'Warming Stripes']
+    const disabledCharts = [
+      'Forest Plot',
+      'Horizon Chart',
+      'Pie',
+      'Paired Bar',
+      'Radar',
+      'Spark Line',
+      'Sankey',
+      'Warming Stripes'
+    ]
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -326,13 +353,13 @@ export const useEditorPermissions = () => {
   }
   const visSupportsMobileChartHeight = () => {
     // TODO: this is a soft release. Support should eventually match visSupportsChartHeight
-    const enabledCharts = ['Bar', 'Line', 'Combo', 'Area Chart']
+    const enabledCharts = ['Bar', 'Line', 'Combo', 'Area Chart', 'Radar']
     if (enabledCharts.includes(visualizationType)) return true
     return false
   }
 
   const visSupportsLeftValueAxis = () => {
-    const disabledCharts = ['Spark Line', 'Sankey', 'Warming Stripes']
+    const disabledCharts = ['Radar', 'Spark Line', 'Sankey', 'Warming Stripes']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -417,56 +444,58 @@ export const useEditorPermissions = () => {
   return {
     enabledChartTypes,
     visCanAnimate,
+    visHasaAdditionalLabelsOnBars,
     visHasAnchors,
     visHasBarBorders,
+    visHasBrushChart,
+    visHasCategoricalAxis,
     visHasDataCutoff,
-    visHasLabelOnData,
     visHasDataSuppression,
+    visHasLabelOnData,
     visHasLegend,
     visHasLegendAxisAlign,
     visHasLegendColorCategory,
-    visHasBrushChart,
     visHasNumbersOnBars,
-    visHasaAdditionalLabelsOnBars,
+    visHasSelectableLegendValues,
+    visHasSingleSeriesTooltip,
     visSupportsBarSpace,
     visSupportsBarThickness,
     visSupportsChartHeight,
-    visSupportsMobileChartHeight,
+    visSupportsClickingLegend,
+    visSupportsDataAnnotations,
     visSupportsDateCategoryAxis,
-    visSupportsDateCategoryAxisMin,
-    visSupportsDateCategoryAxisMax,
     visSupportsDateCategoryAxisLabel,
     visSupportsDateCategoryAxisLine,
+    visSupportsDateCategoryAxisMax,
+    visSupportsDateCategoryAxisMin,
+    visSupportsDateCategoryAxisPadding,
     visSupportsDateCategoryAxisTicks,
     visSupportsDateCategoryHeight,
     visSupportsDateCategoryNumTicks,
     visSupportsDateCategoryTickRotation,
-    visSupportsDateCategoryAxisPadding,
+    visSupportsDynamicSeries,
     visSupportsFilters,
     visSupportsFootnotes,
     visSupportsLeftValueAxis,
+    visSupportsMobileChartHeight,
     visSupportsNonSequentialPallete,
     visSupportsPreliminaryData,
     visSupportsRankByValue,
+    visSupportsReactTooltip,
     visSupportsRegions,
     visSupportsResponsiveTicks,
     visSupportsReverseColorPalette,
     visSupportsSequentialPallete,
+    visSupportsSmallMultiples,
     visSupportsSuperTitle,
     visSupportsTooltipLines,
-    visHasSelectableLegendValues,
     visSupportsTooltipOpacity,
     visSupportsValueAxisGridLines,
     visSupportsValueAxisLabels,
     visSupportsValueAxisLine,
-    visSupportsValueAxisTicks,
-    visSupportsReactTooltip,
     visSupportsValueAxisMax,
     visSupportsValueAxisMin,
-    visSupportsDynamicSeries,
-    visSupportsSmallMultiples,
-    visSupportsYPadding,
-    visHasSingleSeriesTooltip,
-    visHasCategoricalAxis
+    visSupportsValueAxisTicks,
+    visSupportsYPadding
   }
 }