@cdc/chart 4.26.1 → 4.26.3

package/src/components/Brush/MiniChartPreview.tsx

@@ -3,6 +3,7 @@ import { LinePath, AreaClosed, AreaStack } from '@visx/shape'
 import * as allCurves from '@visx/curve'
 import { handleLineType } from '../../helpers/handleLineType'
 import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
+import { getPatternUrl as getPatternUrlForBar } from '../BarChart/helpers/getPatternUrl'
 
 interface MiniChartPreviewProps {
   series: any[]
@@ -10,25 +11,41 @@ interface MiniChartPreviewProps {
   dataKey: string
   xScale: any
   miniYScale: any
+  miniRightYScale?: any
   colorScale: any
   config: any
   xMax: number
 }
 
 const MiniChartPreview = memo<MiniChartPreviewProps>(
-  ({ series, tableData, dataKey, xScale, miniYScale, colorScale, config }) => {
+  ({ series, tableData, dataKey, xScale, miniYScale, miniRightYScale, colorScale, config }) => {
     if (!series || !series.length || !tableData || !tableData.length || !xScale || !miniYScale) {
       return null
     }
 
     const bandwidth = xScale.bandwidth?.() || 0
+    const isComboChart = config?.visualizationType === 'Combo'
     const isBarChart = config?.visualizationType === 'Bar'
     const isStacked = config?.visualizationSubType === 'stacked'
     const isAreaChart = config?.visualizationType === 'Area Chart'
+    const barSeriesTypes = new Set(['Bar', 'Paired Bar', 'Deviation Bar', 'Combo'])
+    const barSeries = isComboChart ? series.filter(s => barSeriesTypes.has(s.type)) : series
+    const areaSeries = isComboChart ? series.filter(s => s.type === 'Area Chart') : series
+    const lineSeries = isComboChart
+      ? series.filter(s => !barSeriesTypes.has(s.type) && s.type !== 'Area Chart')
+      : series
+    const patternSeriesKeys = Array.isArray(series) ? series.map(_series => _series.dataKey) : []
+    const allowGroupedNonSeriesFieldMatch = !config.series || config.series.length <= 1
+
+    let barElements: React.ReactElement[] = []
 
     // For bar charts, render rectangles
-    if (isBarChart) {
+    if (isBarChart || (isComboChart && barSeries.length > 0)) {
       const bars: React.ReactElement[] = []
+      const barSeriesToRender = isBarChart ? series : barSeries
+
+      const barStrokeColor = config?.barHasBorder === 'true' ? '#000' : 'transparent'
+      const barStrokeWidth = config?.barHasBorder === 'true' ? 1 : 0
 
       tableData.forEach((d, i) => {
         const xVal = xScale(d[dataKey])
@@ -47,11 +64,20 @@ const MiniChartPreview = memo<MiniChartPreviewProps>(
           let cumulativeValue = 0
           const zeroY = miniYScale(0)
 
-          series.forEach((s, seriesIndex) => {
+          barSeriesToRender.forEach((s, seriesIndex) => {
             const value = parseFloat(d[s.dataKey])
             if (isNaN(value) || value === 0) return
 
             const seriesColor = colorScale?.(config.runtime.seriesLabels?.[s.dataKey] || s.dataKey) || '#666'
+            const patternUrl = getPatternUrlForBar({
+              patterns: config.legend?.patterns,
+              datum: d,
+              seriesKey: s.dataKey,
+              seriesValue: value,
+              seriesLabels: config.runtime?.seriesLabels,
+              seriesKeys: patternSeriesKeys,
+              allowNonSeriesFieldMatch: true
+            })
 
             // Calculate the bottom and top of this segment
             // For stacked bars, each segment sits on top of the previous one
@@ -72,22 +98,49 @@ const MiniChartPreview = memo<MiniChartPreviewProps>(
                 width={barWidth}
                 height={barHeight}
                 fill={seriesColor}
-                fillOpacity={0.7}
+                stroke={barStrokeColor}
+                strokeWidth={barStrokeWidth}
+                fillOpacity={1}
                 pointerEvents='none'
               />
             )
+            if (patternUrl) {
+              bars.push(
+                <rect
+                  key={`mini-bar-stacked-pattern-${i}-${seriesIndex}`}
+                  x={x - barWidth / 2}
+                  y={y}
+                  width={barWidth}
+                  height={barHeight}
+                  fill={patternUrl}
+                  stroke='transparent'
+                  strokeWidth={0}
+                  fillOpacity={1}
+                  pointerEvents='none'
+                />
+              )
+            }
           })
         } else {
           // For grouped bars, render bars side by side
-          const seriesCount = series.length
+          const seriesCount = barSeriesToRender.length
           const groupBarWidth = barWidth / seriesCount
           const zeroY = miniYScale(0)
 
-          series.forEach((s, seriesIndex) => {
+          barSeriesToRender.forEach((s, seriesIndex) => {
             const value = parseFloat(d[s.dataKey])
             if (isNaN(value)) return
 
             const seriesColor = colorScale?.(config.runtime.seriesLabels?.[s.dataKey] || s.dataKey) || '#666'
+            const patternUrl = getPatternUrlForBar({
+              patterns: config.legend?.patterns,
+              datum: d,
+              seriesKey: s.dataKey,
+              seriesValue: value,
+              seriesLabels: config.runtime?.seriesLabels,
+              seriesKeys: patternSeriesKeys,
+              allowNonSeriesFieldMatch: allowGroupedNonSeriesFieldMatch
+            })
 
             // Calculate bar position and height
             const valueY = miniYScale(value)
@@ -100,18 +153,39 @@ const MiniChartPreview = memo<MiniChartPreviewProps>(
                 key={`mini-bar-grouped-${i}-${seriesIndex}`}
                 x={barX}
                 y={y}
-                width={groupBarWidth * 0.9} // Wider bars with small gap between them
+                width={groupBarWidth}
                 height={barHeight}
                 fill={seriesColor}
-                fillOpacity={0.7}
+                stroke={barStrokeColor}
+                strokeWidth={barStrokeWidth}
+                fillOpacity={1}
                 pointerEvents='none'
               />
             )
+            if (patternUrl) {
+              bars.push(
+                <rect
+                  key={`mini-bar-grouped-pattern-${i}-${seriesIndex}`}
+                  x={barX}
+                  y={y}
+                  width={groupBarWidth}
+                  height={barHeight}
+                  fill={patternUrl}
+                  stroke='transparent'
+                  strokeWidth={0}
+                  fillOpacity={1}
+                  pointerEvents='none'
+                />
+              )
+            }
           })
         }
       })
 
-      return <>{bars}</>
+      barElements = bars
+      if (isBarChart && !isComboChart) {
+        return <>{barElements}</>
+      }
     }
 
     // For stacked area charts, use AreaStack
@@ -217,10 +291,10 @@ const MiniChartPreview = memo<MiniChartPreviewProps>(
       )
     }
 
-    // For line/area charts, render lines or areas
+    // For line/area charts (and combo line/area series), render lines or areas
     return (
       <>
-        {series.map((s, i) => {
+        {(isComboChart ? areaSeries : isAreaChart ? series : []).map((s, i) => {
           const seriesKey = s.dataKey
           const seriesColor = colorScale?.(config.runtime.seriesLabels?.[seriesKey] || seriesKey) || '#666'
 
@@ -231,25 +305,31 @@ const MiniChartPreview = memo<MiniChartPreviewProps>(
           const curve = allCurves[seriesLineType] || allCurves.curveLinear
           const strokeDasharray = handleLineType(seriesStyle)
 
-          // Filter to only valid data points
-          const validData = tableData.filter(d => {
-            const xVal = xScale(d[dataKey])
-            const yVal = parseFloat(d[s.dataKey])
-            return xVal !== undefined && !isNaN(yVal)
-          })
+          // Use the right-axis scale when the series is on the right axis
+          const yScaleForSeries = s.axis === 'Right' && miniRightYScale ? miniRightYScale : miniYScale
+
+          // Filter to only valid data points, then sort by X position so the area
+          // renders left-to-right regardless of the original data order.
+          const validData = tableData
+            .filter(d => {
+              const xVal = xScale(d[dataKey])
+              const yVal = parseFloat(d[s.dataKey])
+              return xVal !== undefined && !isNaN(yVal)
+            })
+            .sort((a, b) => (xScale(a[dataKey]) ?? 0) - (xScale(b[dataKey]) ?? 0))
 
           if (validData.length === 0) return null
 
           const getX = d => xScale(d[dataKey]) + bandwidth / 2
-          const getY = d => miniYScale(parseFloat(d[s.dataKey]))
+          const getY = d => yScaleForSeries(parseFloat(d[s.dataKey]))
 
-          return isAreaChart ? (
+          return (
             <AreaClosed
               key={`mini-area-${seriesKey}-${i}`}
               data={validData}
               x={getX}
               y={getY}
-              yScale={miniYScale}
+              yScale={yScaleForSeries}
               fill={seriesColor}
               fillOpacity={1}
               stroke={seriesColor}
@@ -258,7 +338,39 @@ const MiniChartPreview = memo<MiniChartPreviewProps>(
               curve={curve}
               pointerEvents='none'
             />
-          ) : (
+          )
+        })}
+        {barElements}
+        {(isAreaChart && !isComboChart ? [] : isComboChart ? lineSeries : series).map((s, i) => {
+          const seriesKey = s.dataKey
+          const seriesColor = colorScale?.(config.runtime.seriesLabels?.[seriesKey] || seriesKey) || '#666'
+
+          // Get series-specific styling
+          const seriesWeight = s.weight || 2
+          const seriesLineType = s.lineType || 'curveLinear'
+          const seriesStyle = s.type || 'solid'
+          const curve = allCurves[seriesLineType] || allCurves.curveLinear
+          const strokeDasharray = handleLineType(seriesStyle)
+
+          // Use the right-axis scale when the series is on the right axis
+          const yScaleForSeries = s.axis === 'Right' && miniRightYScale ? miniRightYScale : miniYScale
+
+          // Filter to only valid data points, then sort by X position so the line
+          // connects left-to-right regardless of the original data order.
+          const validData = tableData
+            .filter(d => {
+              const xVal = xScale(d[dataKey])
+              const yVal = parseFloat(d[s.dataKey])
+              return xVal !== undefined && !isNaN(yVal)
+            })
+            .sort((a, b) => (xScale(a[dataKey]) ?? 0) - (xScale(b[dataKey]) ?? 0))
+
+          if (validData.length === 0) return null
+
+          const getX = d => xScale(d[dataKey]) + bandwidth / 2
+          const getY = d => yScaleForSeries(parseFloat(d[s.dataKey]))
+
+          return (
             <LinePath
               key={`mini-line-${seriesKey}-${i}`}
               data={validData}

package/src/components/EditorPanel/EditorPanel.tsx

@@ -45,7 +45,10 @@ import '@cdc/core/components/EditorPanel/EditorPanel.styles.css'
 import './editor-panel.scss'
 import { Anchor } from '@cdc/core/types/Axis'
 import EditorPanelContext from './EditorPanelContext'
-import _ from 'lodash'
+import cloneDeep from 'lodash/cloneDeep'
+import flatMap from 'lodash/flatMap'
+import keys from 'lodash/keys'
+import uniq from 'lodash/uniq'
 import { adjustedSymbols as symbolCodes } from '@cdc/core/helpers/footnoteSymbols'
 import { updateFieldRankByValue } from './helpers/updateFieldRankByValue'
 import cloneConfig from '@cdc/core/helpers/cloneConfig'
@@ -55,6 +58,7 @@ import { updateFieldFactory } from '@cdc/core/helpers/updateFieldFactory'
 import { paletteMigrationMap, twoColorPaletteMigrationMap } from '@cdc/core/helpers/palettes/migratePaletteName'
 import { isV1Palette, migratePaletteWithMap } from '@cdc/core/helpers/palettes/utils'
 import { USE_V2_MIGRATION } from '@cdc/core/helpers/constants'
+import { getSeriesOwnedColumnNames } from '../../helpers/seriesColumnSettings'
 
 interface PreliminaryProps {
   config: ChartConfig
@@ -70,7 +74,7 @@ const PreliminaryData: React.FC<PreliminaryProps> = ({ config, updateConfig, dat
   const hasComboBarSeries = isCombo && barSeriesExists
 
   const getColumnOptions = () => {
-    return _.uniq(_.flatMap(data, _.keys))
+    return uniq(flatMap(data, keys))
   }
 
   const getTypeOptions = () => {
@@ -653,6 +657,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
     visHasLegendAxisAlign,
     visHasLegendColorCategory,
     visHasSelectableLegendValues,
+    visSupportsClickingLegend,
     visSupportsDateCategoryAxis,
     visSupportsDateCategoryAxisLabel,
     visSupportsDateCategoryAxisLine,
@@ -756,6 +761,10 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
     if (isDateScale(updatedConfig.xAxis) && !updatedConfig.xAxis.padding) {
       updatedConfig.xAxis.padding = 0
     }
+    // Default Radar charts to a taller height
+    if (updatedConfig.visualizationType === 'Radar' && updatedConfig.heights?.vertical <= 400) {
+      updatedConfig.heights.vertical = 400
+    }
     // DEV-8008 - Remove Bar styling when Line is converted to Bar
     if (updatedConfig.visualizationType === 'Line') {
       updatedConfig.visualizationSubType = 'regular'
@@ -930,6 +939,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
 
   // Extract column names from data with memoization (replaces getColumns)
   const allColumns = useDataColumns(dataSourceForColumns)
+  const seriesOwnedColumnNames = useMemo(() => getSeriesOwnedColumnNames(config.series), [config.series])
 
   // Filter out series columns and confidence key columns (except lower and upper)
   const filteredColumns = useMemo(() => {
@@ -1514,46 +1524,8 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
     'Deviation Bar'
   ]
 
-  const columnsOptions = [
-    <option value='' key={'Select Option'}>
-      - Select Option -
-    </option>
-  ]
-
-  if (config.data && config.series) {
-    Object.keys(config.data?.[0] || []).map(colName => {
-      // OMIT ANY COLUMNS THAT ARE IN DATA SERIES!
-      const found = config?.series.some(series => series.dataKey === colName)
-      if (colName !== config.xAxis.dataKey && !found) {
-        // if not the index then add it
-        return columnsOptions.push(
-          <option value={colName} key={colName}>
-            {colName}
-          </option>
-        )
-      }
-    })
-  }
-
-  // for pie charts
-  if (!config.data && data) {
-    if (!data[0]) return
-    Object.keys(data[0]).map(colName => {
-      // OMIT ANY COLUMNS THAT ARE IN DATA SERIES!
-      const found = data.some(el => el.dataKey === colName)
-      if (colName !== config.xAxis.dataKey && !found) {
-        // if not the index then add it
-        return columnsOptions.push(
-          <option value={colName} key={colName}>
-            {colName}
-          </option>
-        )
-      }
-    })
-  }
-
   const removeAdditionalColumn = columnName => {
-    const newColumns = _.cloneDeep(config.columns)
+    const newColumns = cloneDeep(config.columns)
 
     delete newColumns[columnName]
 
@@ -1892,6 +1864,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                     </AccordionItem>
                   )}
                 <Panels.BoxPlot name='Measures' />
+                <Panels.Radar name='Radar Chart Settings' />
                 {/* Left Value Axis */}
                 {visSupportsLeftValueAxis() && (
                   <AccordionItem>
@@ -2481,6 +2454,28 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                                 <span style={{ color: 'red', display: 'block' }}>{warningMsg.minMsg}</span>
                               </>
                             )}
+                            <TextField
+                              value={config.yAxis.smallestLeftAxisMax}
+                              section='yAxis'
+                              fieldName='smallestLeftAxisMax'
+                              type='number'
+                              label='Smallest Left Axis Maximum'
+                              placeholder='Auto'
+                              tooltip={
+                                <Tooltip style={{ textTransform: 'none' }}>
+                                  <Tooltip.Target>
+                                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                                  </Tooltip.Target>
+                                  <Tooltip.Content>
+                                    <p>
+                                      Example: If your data only goes up to 1, the axis might show 0, 0.2, 0.4, 0.6,
+                                      0.8, 1. Setting this to 5 would make the axis show 0, 1, 2, 3, 4, 5 instead.
+                                    </p>
+                                  </Tooltip.Content>
+                                </Tooltip>
+                              }
+                              updateField={updateFieldDeprecated}
+                            />
                           </>
                         )
                       )}
@@ -2880,7 +2875,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                       />
 
                       <TextField
-                        value={config.yAxis.max}
+                        value={config.yAxis.rightMax}
                         section='yAxis'
                         fieldName='rightMax'
                         type='number'
@@ -2890,7 +2885,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                       />
                       <span style={{ color: 'red', display: 'block' }}>{warningMsg.rightMaxMessage}</span>
                       <TextField
-                        value={config.yAxis.min}
+                        value={config.yAxis.rightMin}
                         section='yAxis'
                         fieldName='rightMin'
                         type='number'
@@ -2899,6 +2894,28 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                         updateField={updateFieldDeprecated}
                       />
                       <span style={{ color: 'red', display: 'block' }}>{warningMsg.minMsg}</span>
+                      <TextField
+                        value={config.yAxis.smallestRightAxisMax}
+                        section='yAxis'
+                        fieldName='smallestRightAxisMax'
+                        type='number'
+                        label='Smallest Right Axis Maximum'
+                        placeholder='Auto'
+                        tooltip={
+                          <Tooltip style={{ textTransform: 'none' }}>
+                            <Tooltip.Target>
+                              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                            </Tooltip.Target>
+                            <Tooltip.Content>
+                              <p>
+                                Example: If your data only goes up to 1, the axis might show 0, 0.2, 0.4, 0.6, 0.8, 1.
+                                Setting this to 5 would make the axis show 0, 1, 2, 3, 4, 5 instead.
+                              </p>
+                            </Tooltip.Content>
+                          </Tooltip>
+                        }
+                        updateField={updateFieldDeprecated}
+                      />
                     </AccordionItemPanel>
                   </AccordionItem>
                 )}
@@ -4137,6 +4154,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                         config={config}
                         updateField={updateFieldDeprecated}
                         deleteColumn={removeAdditionalColumn}
+                        hiddenColumnNames={seriesOwnedColumnNames}
                       />{' '}
                     </AccordionItemPanel>
                   </AccordionItem>
@@ -4250,7 +4268,10 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                       />
 
                       <CheckBox
-                        display={config.preliminaryData?.some(pd => pd.label && pd.type === 'suppression' && pd.value)}
+                        display={
+                          config.visualizationType !== 'Radar' &&
+                          config.preliminaryData?.some(pd => pd.label && pd.type === 'suppression' && pd.value)
+                        }
                         value={config.legend.hideSuppressedLabels}
                         section='legend'
                         fieldName='hideSuppressedLabels'
@@ -4274,7 +4295,10 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                         }
                       />
                       <CheckBox
-                        display={config.preliminaryData?.some(pd => pd.label && pd.type === 'suppression' && pd.value)}
+                        display={
+                          config.visualizationType !== 'Radar' &&
+                          config.preliminaryData?.some(pd => pd.label && pd.type === 'suppression' && pd.value)
+                        }
                         value={config.legend.hideSuppressionLink}
                         section='legend'
                         fieldName='hideSuppressionLink'
@@ -4296,7 +4320,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                       />
 
                       <Select
-                        display={hasDynamicCategory || hasMultipleSeries}
+                        display={visSupportsClickingLegend() && (hasDynamicCategory || hasMultipleSeries)}
                         value={config.legend.behavior}
                         section='legend'
                         fieldName='behavior'
@@ -4580,14 +4604,17 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                 )}
                 <Panels.Annotate name='Text Annotations' />
                 {/* {(config.visualizationType === 'Bar' || config.visualizationType === 'Line') && <Panels.DateHighlighting name='Date Highlighting' />} */}
-                <PanelMarkup
-                  name='Markup Variables'
-                  markupVariables={config.markupVariables || []}
-                  data={rawData}
-                  enableMarkupVariables={config.enableMarkupVariables || false}
-                  onMarkupVariablesChange={variables => updateField(null, null, 'markupVariables', variables)}
-                  onToggleEnable={enabled => updateField(null, null, 'enableMarkupVariables', enabled)}
-                />
+                {config.visualizationType !== 'Radar' && (
+                  <PanelMarkup
+                    name='Markup Variables'
+                    markupVariables={config.markupVariables || []}
+                    data={rawData}
+                    enableMarkupVariables={config.enableMarkupVariables || false}
+                    onMarkupVariablesChange={variables => updateField(null, null, 'markupVariables', variables)}
+                    onToggleEnable={enabled => updateField(null, null, 'enableMarkupVariables', enabled)}
+                    dataMetadata={config.dataMetadata}
+                  />
+                )}
                 <Panels.SmallMultiples name='Small Multiples' />
               </Accordion>
               {config.type !== 'Spark Line' && (