@cdc/chart 4.25.11 → 4.26.1

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

@@ -8,18 +8,24 @@ import WarningImage from '../../../../images/warning.svg'
 
 // contexts
 import ConfigContext from '../../../../ConfigContext'
+import { useEditorPanelContext } from '../../EditorPanelContext'
 
 // types
 import { type ChartContext } from '../../../../types/ChartContext'
 import { type PanelProps } from '../PanelProps'
 
-import { AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
+import {
+  AccordionItem,
+  AccordionItemHeading,
+  AccordionItemPanel,
+  AccordionItemButton
+} from 'react-accessible-accordion'
 
 const ForestPlotSettings: FC<PanelProps> = ({ name }) => {
   const { config, rawData: unfilteredData, updateConfig } = useContext<ChartContext>(ConfigContext)
+  const { getColumns } = useEditorPanelContext()
   if (config.visualizationType !== 'Forest Plot') return
 
-  // todo: get from editor context?
   const enforceRestrictions = updatedConfig => {
     if (updatedConfig.orientation === 'horizontal') {
       updatedConfig.labels = false
@@ -33,31 +39,6 @@ const ForestPlotSettings: FC<PanelProps> = ({ name }) => {
     }
   }
 
-  // todo: get from editor context?
-  const getColumns = (filter = true) => {
-    let columns = {}
-    unfilteredData.forEach(row => {
-      Object.keys(row).forEach(columnName => (columns[columnName] = true))
-    })
-
-    if (filter) {
-      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))
-          /*
-            TODO: Resolve errors when config keys exist, but have no value
-              Proposal:  (((confidenceUpper && confidenceLower) || confidenceUpper || confidenceLower) && Object.keys(config.confidenceKeys).includes(key))
-          */
-        ) {
-          delete columns[key]
-        }
-      })
-    }
-
-    return Object.keys(columns)
-  }
-
   // todo: editor context?
   const updateField = (section, subsection, fieldName, newValue) => {
     if (section === 'boxplot' && subsection === 'legend') {
@@ -151,7 +132,9 @@ const ForestPlotSettings: FC<PanelProps> = ({ name }) => {
       <AccordionItemHeading>
         <AccordionItemButton>
           {name}
-          {(!config.forestPlot.estimateField || !config.forestPlot.upper || !config.forestPlot.lower) && <WarningImage width='25' className='warning-icon' />}
+          {(!config.forestPlot.estimateField || !config.forestPlot.upper || !config.forestPlot.lower) && (
+            <WarningImage width='25' className='warning-icon' />
+          )}
         </AccordionItemButton>
       </AccordionItemHeading>
       <AccordionItemPanel>
@@ -201,14 +184,22 @@ const ForestPlotSettings: FC<PanelProps> = ({ name }) => {
               <Tooltip.Content>
                 <p>
                   Linear - Typically used for continuous outcomes. Line of no effect is positioned on 0 (zero) <br />
-                  <br /> Logarithmic - Typically used for binary outcomes such as risk ratios and odds ratios. Line of no effect is positioned on 1.
+                  <br /> Logarithmic - Typically used for binary outcomes such as risk ratios and odds ratios. Line of
+                  no effect is positioned on 1.
                 </p>
               </Tooltip.Content>
             </Tooltip>
           }
         />
 
-        <TextField type='text' value={config.forestPlot?.title || ''} updateField={updateField} section='forestPlot' fieldName='title' label='Plot Title' />
+        <TextField
+          type='text'
+          value={config.forestPlot?.title || ''}
+          updateField={updateField}
+          section='forestPlot'
+          fieldName='title'
+          label='Plot Title'
+        />
 
         <br />
         <hr />
@@ -317,7 +308,14 @@ const ForestPlotSettings: FC<PanelProps> = ({ name }) => {
           </span>
         </label>
 
-        <CheckBox value={config.forestPlot?.lineOfNoEffect?.show || false} section='forestPlot' subsection='lineOfNoEffect' fieldName='show' label='Show Line of No Effect' updateField={updateField} />
+        <CheckBox
+          value={config.forestPlot?.lineOfNoEffect?.show || false}
+          section='forestPlot'
+          subsection='lineOfNoEffect'
+          fieldName='show'
+          label='Show Line of No Effect'
+          updateField={updateField}
+        />
 
         <br />
         <hr />
@@ -400,13 +398,37 @@ const ForestPlotSettings: FC<PanelProps> = ({ name }) => {
           />
         </label>
 
-        <TextField type='number' min={20} max={45} value={config.forestPlot.rowHeight ? config.forestPlot.rowHeight : 10} updateField={updateField} section='forestPlot' fieldName='rowHeight' label='Row Height' placeholder='10' />
+        <TextField
+          type='number'
+          min={20}
+          max={45}
+          value={config.forestPlot.rowHeight ? config.forestPlot.rowHeight : 10}
+          updateField={updateField}
+          section='forestPlot'
+          fieldName='rowHeight'
+          label='Row Height'
+          placeholder='10'
+        />
         <br />
         <hr />
         <br />
         <h4>Labels Settings</h4>
-        <TextField type='text' value={config.forestPlot?.leftLabel || ''} updateField={updateField} section='forestPlot' fieldName='leftLabel' label='Left Label' />
-        <TextField type='text' value={config.forestPlot?.rightLabel || ''} updateField={updateField} section='forestPlot' fieldName='rightLabel' label='Right Label' />
+        <TextField
+          type='text'
+          value={config.forestPlot?.leftLabel || ''}
+          updateField={updateField}
+          section='forestPlot'
+          fieldName='leftLabel'
+          label='Left Label'
+        />
+        <TextField
+          type='text'
+          value={config.forestPlot?.rightLabel || ''}
+          updateField={updateField}
+          section='forestPlot'
+          fieldName='rightLabel'
+          label='Right Label'
+        />
 
         <br />
         <hr />

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

@@ -316,36 +316,37 @@ const PanelGeneral: FC<PanelProps> = props => {
             />
           </>
         )}
-
-        <CheckBox
-          tooltip={
-            <Tooltip style={{ textTransform: 'none' }}>
-              <Tooltip.Target>
-                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-              </Tooltip.Target>
-              <Tooltip.Content>
-                {config.visualizationSubType === 'stacked' && (
-                  <p>
-                    We do not recommend using stacked vertical/horizontal bar charts for missing data. If you choose to
-                    proceed, selecting this option will display 'N/A' in the tooltip hover and data table (e.g. nothing
-                    will display in chart).
-                  </p>
-                )}
-                {config.visualizationSubType !== 'stacked' && (
-                  <p>
-                    Selecting this option will display 'N/A' on the Date/Category Axis, in the tooltip hover, and in the
-                    data table to indicate missing or undefined data values.
-                  </p>
-                )}
-              </Tooltip.Content>
-            </Tooltip>
-          }
-          value={config.general.showMissingDataLabel}
-          section='general'
-          fieldName='showMissingDataLabel'
-          label='Display "Missing Data" Label'
-          updateField={updateField}
-        />
+        {config.visualizationType !== 'Warming Stripes' && (
+          <CheckBox
+            tooltip={
+              <Tooltip style={{ textTransform: 'none' }}>
+                <Tooltip.Target>
+                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                </Tooltip.Target>
+                <Tooltip.Content>
+                  {config.visualizationSubType === 'stacked' && (
+                    <p>
+                      We do not recommend using stacked vertical/horizontal bar charts for missing data. If you choose
+                      to proceed, selecting this option will display 'N/A' in the tooltip hover and data table (e.g.
+                      nothing will display in chart).
+                    </p>
+                  )}
+                  {config.visualizationSubType !== 'stacked' && (
+                    <p>
+                      Selecting this option will display 'N/A' on the Date/Category Axis, in the tooltip hover, and in
+                      the data table to indicate missing or undefined data values.
+                    </p>
+                  )}
+                </Tooltip.Content>
+              </Tooltip>
+            }
+            value={config.general.showMissingDataLabel}
+            section='general'
+            fieldName='showMissingDataLabel'
+            label='Display "Missing Data" Label'
+            updateField={updateField}
+          />
+        )}
 
         {visualizationType === 'Pie' && (
           <Select fieldName='pieType' label='Pie Chart Type' updateField={updateField} options={['Regular', 'Donut']} />
@@ -389,6 +390,32 @@ const PanelGeneral: FC<PanelProps> = props => {
             </Tooltip>
           }
         />
+
+        <Select
+          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' }
+          ]}
+          tooltip={
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>
+                  Choose the visual style for the title. Consider heading order on your page when selecting the title
+                  style. For 508 reasons, ensure your page follows a proper heading order.
+                </p>
+              </Tooltip.Content>
+            </Tooltip>
+          }
+        />
+
         <CheckBox value={config.showTitle} fieldName='showTitle' label='Show Title' updateField={updateField} />
 
         {visSupportsSuperTitle() && (

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

@@ -311,6 +311,8 @@ const PanelPatternSettings: FC<PanelProps> = props => {
     updateConfig(updatedConfig)
   }
 
+  if (config.visualizationType === 'Warming Stripes') return
+
   return (
     <AccordionItem>
       <AccordionItemHeading>

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

@@ -319,16 +319,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'
+                    />
+                  </>
+                )}
               </>
             )}
 
@@ -516,28 +521,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/useEditorPermissions.ts

@@ -21,7 +21,8 @@ export const useEditorPermissions = () => {
     'Pie',
     'Scatter Plot',
     'Spark Line',
-    'Sankey'
+    'Sankey',
+    'Warming Stripes'
   ]
 
   const visSupportsDateCategoryAxis = () => {
@@ -63,7 +64,8 @@ export const useEditorPermissions = () => {
       'Forest Plot',
       'Spark Line',
       'Sankey',
-      'Bump Chart'
+      'Bump Chart',
+      'Warming Stripes'
     ]
     if (disabledCharts.includes(visualizationType)) return false
     return true
@@ -77,7 +79,8 @@ export const useEditorPermissions = () => {
       'Forest Plot',
       'Spark Line',
       'Sankey',
-      'Bump Chart'
+      'Bump Chart',
+      'Warming Stripes'
     ]
     if (disabledCharts.includes(visualizationType)) return false
     return true
@@ -93,6 +96,8 @@ export const useEditorPermissions = () => {
         return false
       case 'Sankey':
         return false
+      case 'Warming Stripes':
+        return true
       default:
         return true
     }
@@ -140,7 +145,11 @@ export const useEditorPermissions = () => {
   }
   const visHasBrushChart = () => {
     if (config.xAxis.type === 'categorical') return false
-    return ['Line', 'Bar', 'Area Chart', 'Combo'].includes(visualizationType) && orientation === 'vertical'
+    // Allow Line charts, vertical Bar charts (both stacked and grouped), and vertical Area charts
+    if (visualizationType === 'Line' && orientation === 'vertical') return true
+    if (visualizationType === 'Bar' && orientation === 'vertical') return true
+    if (visualizationType === 'Area Chart' && orientation === 'vertical') return true
+    return false
   }
 
   const visHasBarBorders = () => {
@@ -153,6 +162,8 @@ export const useEditorPermissions = () => {
 
   const visHasDataCutoff = () => {
     switch (visualizationType) {
+      case 'Warming Stripes':
+        return false
       case 'Sankey':
         return false
       case 'Forest Plot':
@@ -168,7 +179,9 @@ export const useEditorPermissions = () => {
     }
   }
 
-  const visHasSelectableLegendValues = !['Box Plot', 'Forest Plot', 'Spark Line'].includes(visualizationType)
+  const visHasSelectableLegendValues = !['Box Plot', 'Forest Plot', 'Spark Line', 'Warming Stripes'].includes(
+    visualizationType
+  )
   const visHasLegendAxisAlign = () => {
     return visualizationType === 'Bar' && visualizationSubType === 'stacked' && config.legend.behavior === 'isolate'
   }
@@ -177,7 +190,7 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsTooltipOpacity = () => {
-    const disabledCharts = ['Spark Line', 'Sankey']
+    const disabledCharts = ['Spark Line', 'Sankey', 'Warming Stripes']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -189,7 +202,7 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsSequentialPallete = () => {
-    const disabledCharts = ['Paired Bar', 'Deviation Bar', 'Forest Plot', 'Forecasting', 'Sankey']
+    const disabledCharts = ['Line', 'Paired Bar', 'Deviation Bar', 'Forest Plot', 'Forecasting', 'Sankey']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -207,19 +220,19 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsDateCategoryAxisLabel = () => {
-    const disabledCharts = ['Forest Plot', 'Spark Line', 'Bump Chart']
+    const disabledCharts = ['Forest Plot', 'Spark Line', 'Bump Chart', 'Warming Stripes']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visSupportsDateCategoryAxisLine = () => {
-    const disabledCharts = ['Forest Plot', 'Spark Line']
+    const disabledCharts = ['Forest Plot', 'Spark Line', 'Warming Stripes']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visSupportsDateCategoryAxisTicks = () => {
-    const disabledCharts = ['Forest Plot', 'Spark Line']
+    const disabledCharts = ['Forest Plot', 'Spark Line', 'Warming Stripes']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -243,7 +256,7 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsRegions = () => {
-    const disabledCharts = ['Forest Plot', 'Pie', 'Paired Bar', 'Spark Line', 'Sankey']
+    const disabledCharts = ['Forest Plot', 'Pie', 'Paired Bar', 'Spark Line', 'Sankey', 'Warming Stripes']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -261,14 +274,13 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsFilters = () => {
-    const disabledCharts = ['Forest Plot', 'Sankey']
+    const disabledCharts = ['Forest Plot', 'Sankey', 'Warming Stripes']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visSupportsValueAxisGridLines = () => {
     const disabledCharts = ['Forest Plot']
-    if (orientation === 'horizontal') return false
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -302,13 +314,13 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsBarThickness = () => {
-    const disabledCharts = ['Forest Plot']
+    const disabledCharts = ['Forest Plot', 'Warming Stripes']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visSupportsChartHeight = () => {
-    const disabledCharts = ['Spark Line']
+    const disabledCharts = ['Spark Line', 'Warming Stripes']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -320,7 +332,7 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsLeftValueAxis = () => {
-    const disabledCharts = ['Spark Line', 'Sankey']
+    const disabledCharts = ['Spark Line', 'Sankey', 'Warming Stripes']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -335,6 +347,7 @@ export const useEditorPermissions = () => {
     const disabledCharts = ['Spark Line', 'Sankey', 'Bump Chart']
     if (disabledCharts.includes(visualizationType)) return false
     if (config.orientation !== 'horizontal') return false
+    if (config.orientation === 'horizontal' && visualizationType === 'Bar' && !config.isLollipopChart) return false
     return true
   }
 
@@ -370,8 +383,8 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsSmallMultiples = () => {
-    const enabledCharts = ['Line', 'Bar', 'Area Chart', 'Combo', 'Box Plot', 'Scatter Plot']
-    if (enabledCharts.includes(visualizationType)) return true
+    const enabledCharts = ['Line', 'Bar', 'Area Chart', 'Combo', 'Box Plot', 'Scatter Plot', 'Warming Stripes']
+    if (enabledCharts.includes(visualizationType) && config.orientation !== 'horizontal') return true
     return false
   }
 

package/src/components/Legend/Legend.tsx

@@ -18,13 +18,14 @@ const Legend = forwardRef((props, ref) => {
     currentViewport,
     dimensions,
     getTextWidth,
-    transformedData
+    transformedData,
+    formatNumber
   } = useContext(ConfigContext)
   if (!config.legend) return null
   // create fn to reverse labels while legend is Bottom.  Legend-right , legend-left works by default
   const { interactionLabel } = props
 
-  const createLegendLabels = createFormatLabels(config, tableData, data, colorScale)
+  const createLegendLabels = createFormatLabels(config, tableData, data, colorScale, formatNumber)
 
   return (
     <Fragment>