@cdc/chart 4.25.10 → 4.25.11

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

@@ -20,6 +20,7 @@ import InputToggle from '@cdc/core/components/inputs/InputToggle'
 import { useColorPalette } from '@cdc/core/hooks/useColorPalette'
 import { getCurrentPaletteName } from '@cdc/core/helpers/palettes/utils'
 import { getColorPaletteVersion } from '@cdc/core/helpers/getColorPaletteVersion'
+import { isCoveDeveloperMode } from '@cdc/core/helpers/queryStringUtils'
 import { ChartContext } from './../../../../types/ChartContext.js'
 
 import { useEditorPermissions } from '../../useEditorPermissions.js'
@@ -28,6 +29,10 @@ import ConfigContext from '../../../../ConfigContext.js'
 import { PanelProps } from '../PanelProps'
 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 { getColorScale } from '../../../../helpers/getColorScale'
+import '@cdc/core/styles/v2/components/editor.scss'
 import './panelVisual.styles.css'
 
 const PanelVisual: FC<PanelProps> = props => {
@@ -40,7 +45,6 @@ const PanelVisual: FC<PanelProps> = props => {
     visHasBarBorders,
     visCanAnimate,
     visSupportsNonSequentialPallete,
-    headerColors,
     visSupportsTooltipOpacity,
     visSupportsTooltipLines,
     visSupportsBarSpace,
@@ -86,7 +90,7 @@ const PanelVisual: FC<PanelProps> = props => {
   }
 
   return (
-    <AccordionItem>
+    <AccordionItem className='panel-visual'>
       <AccordionItemHeading>
         <AccordionItemButton>Visual</AccordionItemButton>
       </AccordionItemHeading>
@@ -247,24 +251,7 @@ const PanelVisual: FC<PanelProps> = props => {
             />
           </>
         )}
-        {/* eslint-disable */}
-        <label className='header'>
-          <span className='edit-label'>Header Theme</span>
-          <ul className='color-palette'>
-            {headerColors.map(palette => (
-              <button
-                title={palette}
-                key={palette}
-                onClick={e => {
-                  e.preventDefault()
-                  updateConfig({ ...config, theme: palette })
-                }}
-                className={config.theme === palette ? 'selected ' + palette : palette}
-              ></button>
-            ))}
-          </ul>
-        </label>
-        {/* eslint-enable */}
+        <HeaderThemeSelector selectedTheme={config.theme} onThemeSelect={theme => updateConfig({ ...config, theme })} />
         {(visSupportsNonSequentialPallete() || visSupportsNonSequentialPallete()) && (
           <>
             <label>
@@ -344,6 +331,74 @@ const PanelVisual: FC<PanelProps> = props => {
                 />
               </>
             )}
+
+            {isCoveDeveloperMode() && (visSupportsSequentialPallete() || visSupportsNonSequentialPallete()) && (
+              <>
+                <div className='mt-3'>
+                  <label className='checkbox'>
+                    <input
+                      type='checkbox'
+                      checked={
+                        !!(config.general?.palette?.customColorsOrdered || config.general?.palette?.customColors)
+                      }
+                      onChange={e => {
+                        const _state = cloneConfig(config)
+                        // Ensure palette object exists
+                        if (!_state.general.palette) {
+                          _state.general.palette = {}
+                        }
+                        if (e.target.checked) {
+                          // Extract colors from current color scale if runtime data available
+                          if (config.runtime?.seriesLabelsAll && config.runtime.seriesLabelsAll.length > 0) {
+                            const colorScale = getColorScale(config)
+                            const extractedColors = config.runtime.seriesLabelsAll.map((label: string) =>
+                              colorScale(label)
+                            )
+                            _state.general.palette.customColorsOrdered =
+                              extractedColors.length > 0
+                                ? extractedColors
+                                : ['#3366cc', '#5588dd', '#77aaee', '#99ccff']
+                          } else {
+                            // Fallback to default colors if runtime not available
+                            _state.general.palette.customColorsOrdered = ['#3366cc', '#5588dd', '#77aaee', '#99ccff']
+                          }
+                        } else {
+                          // Remove custom colors and revert to default palette
+                          delete _state.general.palette.customColorsOrdered
+                          delete _state.general.palette.customColors
+                          // Set default palette if none exists
+                          if (!_state.general.palette.name) {
+                            _state.general.palette.name = 'qualitative_standard'
+                            _state.general.palette.version = '2.0'
+                          }
+                        }
+                        updateConfig(_state)
+                      }}
+                    />
+                    Use Custom Colors
+                  </label>
+                </div>
+
+                {(config.general?.palette?.customColorsOrdered || config.general?.palette?.customColors) && (
+                  <div className='mt-2'>
+                    <CustomColorsEditor
+                      colors={config.general.palette.customColorsOrdered || config.general.palette.customColors}
+                      onChange={newColors => {
+                        const _state = cloneConfig(config)
+                        if (!_state.general.palette) {
+                          _state.general.palette = {}
+                        }
+                        _state.general.palette.customColorsOrdered = newColors
+                        updateConfig(_state)
+                      }}
+                      label='Custom Color Order'
+                      minColors={1}
+                      maxColors={20}
+                    />
+                  </div>
+                )}
+              </>
+            )}
           </>
         )}
         {config.visualizationType === 'Sankey' && (
@@ -443,7 +498,6 @@ const PanelVisual: FC<PanelProps> = props => {
               value={config.dataCutoff}
               type='number'
               fieldName='dataCutoff'
-              className='number-narrow'
               label='Data Cutoff'
               updateField={updateField}
               tooltip={

package/src/components/EditorPanel/components/Panels/index.tsx

@@ -7,6 +7,7 @@ import Visual from './Panel.Visual'
 import Sankey from './Panel.Sankey'
 import Annotate from './Panel.Annotate'
 import PatternSettings from './Panel.PatternSettings'
+import SmallMultiples from './Panel.SmallMultiples'
 
 const Panels = {
   ForestPlot: ForestPlotSettings,
@@ -17,7 +18,8 @@ const Panels = {
   Visual,
   Sankey,
   Annotate,
-  PatternSettings
+  PatternSettings,
+  SmallMultiples
 }
 
 export default Panels

package/src/components/EditorPanel/editor-panel.scss

@@ -7,26 +7,6 @@
       text-align: left;
 
       span {
-        display: inline-block;
-        float: right;
-      }
-    }
-
-    .edit-block {
-      margin-top: 0;
-      padding: 1em;
-    }
-  }
-
-  .viewport-overrides {
-    button {
-      width: 100%;
-      padding: 1em;
-      margin-top: 1em;
-      text-align: left;
-
-      span {
-        display: inline-block;
         float: right;
       }
     }

package/src/components/EditorPanel/useEditorPermissions.ts

@@ -22,20 +22,6 @@ export const useEditorPermissions = () => {
     'Scatter Plot',
     'Spark Line',
     'Sankey'
-]
-
-  const headerColors = [
-    'theme-blue',
-    'theme-purple',
-    'theme-brown',
-    'theme-teal',
-    'theme-pink',
-    'theme-orange',
-    'theme-slate',
-    'theme-indigo',
-    'theme-cyan',
-    'theme-green',
-    'theme-amber'
   ]
 
   const visSupportsDateCategoryAxis = () => {
@@ -383,6 +369,12 @@ export const useEditorPermissions = () => {
     )
   }
 
+  const visSupportsSmallMultiples = () => {
+    const enabledCharts = ['Line', 'Bar', 'Area Chart', 'Combo', 'Box Plot', 'Scatter Plot']
+    if (enabledCharts.includes(visualizationType)) return true
+    return false
+  }
+
   const visSupportsYPadding = () => {
     return !config.yAxis.inlineLabel || !config.yAxis.inlineLabel?.includes(' ')
   }
@@ -411,7 +403,6 @@ export const useEditorPermissions = () => {
 
   return {
     enabledChartTypes,
-    headerColors,
     visCanAnimate,
     visHasAnchors,
     visHasBarBorders,
@@ -460,6 +451,7 @@ export const useEditorPermissions = () => {
     visSupportsValueAxisMax,
     visSupportsValueAxisMin,
     visSupportsDynamicSeries,
+    visSupportsSmallMultiples,
     visSupportsYPadding,
     visHasSingleSeriesTooltip,
     visHasCategoricalAxis

package/src/components/Forecasting/Forecasting.tsx

@@ -14,6 +14,102 @@ import { curveMonotoneX } from '@visx/curve'
 import { Bar, Area, LinePath } from '@visx/shape'
 import { Group } from '@visx/group'
 
+// Helper function to check if a value is numeric/calculable
+const isCalculable = (value: any): boolean => {
+  if (value === null || value === undefined || value === '' || value === 'NA') return false
+  const num = typeof value === 'string' ? parseFloat(value.replace(/,/g, '')) : Number(value)
+  return !isNaN(num) && isFinite(num)
+}
+
+// Helper function to filter and sort forecast data, splitting into segments at gaps
+const prepareForecastData = (
+  data: Record<string, any>[],
+  xAxisKey: string,
+  highKey: string,
+  lowKey: string
+): Record<string, any>[][] => {
+  if (!data || data.length === 0) return []
+
+  // Filter out invalid data points (where confidence intervals are not calculable)
+  const validData = data.filter(d => {
+    const high = d[highKey]
+    const low = d[lowKey]
+    return isCalculable(high) && isCalculable(low) && d[xAxisKey]
+  })
+
+  if (validData.length === 0) return []
+
+  // Sort by date
+  const sortedData = [...validData].sort((a, b) => {
+    const dateA = Date.parse(a[xAxisKey])
+    const dateB = Date.parse(b[xAxisKey])
+    if (isNaN(dateA) || isNaN(dateB)) return 0
+    return dateA - dateB
+  })
+
+  // Split into segments when there are gaps
+  // Calculate intervals between consecutive points to detect gaps
+  const intervals: number[] = []
+  for (let i = 1; i < sortedData.length; i++) {
+    const currentDate = Date.parse(sortedData[i][xAxisKey])
+    const prevDate = Date.parse(sortedData[i - 1][xAxisKey])
+    if (!isNaN(currentDate) && !isNaN(prevDate)) {
+      intervals.push(currentDate - prevDate)
+    }
+  }
+
+  // Calculate median interval (more robust than average for detecting gaps)
+  const medianInterval =
+    intervals.length > 0
+      ? [...intervals].sort((a, b) => a - b)[Math.floor(intervals.length / 2)]
+      : 7 * 24 * 60 * 60 * 1000 // Default to 7 days if no intervals
+
+  // Threshold: gap is more than 2x the median interval, or more than 30 days
+  const gapThreshold = Math.max(medianInterval * 2, 30 * 24 * 60 * 60 * 1000)
+
+  const segments: Record<string, any>[][] = []
+  let currentSegment: Record<string, any>[] = []
+
+  for (let i = 0; i < sortedData.length; i++) {
+    const current = sortedData[i]
+    const prev = sortedData[i - 1]
+
+    if (i === 0) {
+      // First data point starts a new segment
+      currentSegment = [current]
+    } else {
+      const currentDate = Date.parse(current[xAxisKey])
+      const prevDate = Date.parse(prev[xAxisKey])
+
+      if (isNaN(currentDate) || isNaN(prevDate)) {
+        // If dates are invalid, continue current segment
+        currentSegment.push(current)
+      } else {
+        const interval = currentDate - prevDate
+        const hasGap = interval > gapThreshold
+
+        if (hasGap) {
+          // Save current segment and start a new one
+          if (currentSegment.length > 0) {
+            segments.push(currentSegment)
+          }
+          currentSegment = [current]
+        } else {
+          // Continue current segment
+          currentSegment.push(current)
+        }
+      }
+    }
+  }
+
+  // Add the last segment
+  if (currentSegment.length > 0) {
+    segments.push(currentSegment)
+  }
+
+  return segments.length > 0 ? segments : [sortedData]
+}
+
 const Forecasting = ({ xScale, yScale, height, width, handleTooltipMouseOver, handleTooltipMouseOff }) => {
   const { transformedData: data, rawData, config, seriesHighlight, parseDate } = useContext(ConfigContext)
   const { xAxis, yAxis, legend, runtime } = config
@@ -61,7 +157,7 @@ const Forecasting = ({ xScale, yScale, height, width, handleTooltipMouseOver, ha
               return (
                 <Group
                   className={`forecasting-areas-combo-${index}`}
-                  key={`forecasting-areas--stage-${replace(stage.key, / /g, '—')}-${index}`}
+                  key={`forecasting-areas--stage-${replace(stage.key, / /g, '—')}-${index}`}
                 >
                   {group.confidenceIntervals?.map((ciGroup, ciGroupIndex) => {
                     const palette = forecastingPalettes[stage.color] || false
@@ -78,35 +174,57 @@ const Forecasting = ({ xScale, yScale, height, width, handleTooltipMouseOver, ha
                       return isReversed ? palette?.[1] || 'transparent' : palette?.[4] || 'transparent'
                     }
 
-                    if (ciGroup.high === '' || ciGroup.low === '') return
+                    if (ciGroup.high === '' || ciGroup.low === '') return null
+
+                    // Prepare data: filter invalid values, sort by date, and split into segments at gaps
+                    const dataSegments = prepareForecastData(bridgedData, xAxis.dataKey, ciGroup.high, ciGroup.low)
+
                     return (
                       <Group
                         key={`forecasting-areas--stage-${replace(
                           stage.key,
-                          / /g,
+                          / /g,
                           '—'
                         )}--group-${stageIndex}-${ciGroupIndex}`}
                       >
-                        {/* prettier-ignore */}
-                        <Area
-                          curve={curveMonotoneX}
-                          data={bridgedData}
-                          fill={getFill()}
-                          opacity={transparentArea? 0.1 : 0.5 }
-                          x={d => xScale(Date.parse(d[xAxis.dataKey]))}
-                          y0={d => yScale(d[ciGroup.low])}
-                          y1={d => yScale(d[ciGroup.high])}
-                        />
-
-                        {ciGroupIndex === 0 && (
-                          <>
+                        {dataSegments.map((segment, segmentIndex) => (
+                          <Group key={`segment-${segmentIndex}`}>
                             {/* prettier-ignore */}
-                            <LinePath data={bridgedData} x={d => Number(xScale(Date.parse(d[xAxis.dataKey])))} y={d => Number(yScale(d[ciGroup.high]))} curve={curveMonotoneX} stroke={getStroke()} strokeWidth={1} strokeOpacity={1} />
+                            <Area
+                              curve={curveMonotoneX}
+                              data={segment}
+                              fill={getFill()}
+                              opacity={transparentArea ? 0.1 : 0.5}
+                              x={d => xScale(Date.parse(d[xAxis.dataKey]))}
+                              y0={d => yScale(d[ciGroup.low])}
+                              y1={d => yScale(d[ciGroup.high])}
+                            />
 
-                            {/* prettier-ignore */}
-                            <LinePath data={bridgedData} x={d => Number(xScale(Date.parse(d[xAxis.dataKey])))} y={d => Number(yScale(d[ciGroup.low]))} curve={curveMonotoneX} stroke={getStroke()} strokeWidth={1} strokeOpacity={1} />
-                          </>
-                        )}
+                            {ciGroupIndex === 0 && (
+                              <>
+                                <LinePath
+                                  data={segment}
+                                  x={d => Number(xScale(Date.parse(d[xAxis.dataKey])))}
+                                  y={d => Number(yScale(d[ciGroup.high]))}
+                                  curve={curveMonotoneX}
+                                  stroke={getStroke()}
+                                  strokeWidth={1}
+                                  strokeOpacity={1}
+                                />
+
+                                <LinePath
+                                  data={segment}
+                                  x={d => Number(xScale(Date.parse(d[xAxis.dataKey])))}
+                                  y={d => Number(yScale(d[ciGroup.low]))}
+                                  curve={curveMonotoneX}
+                                  stroke={getStroke()}
+                                  strokeWidth={1}
+                                  strokeOpacity={1}
+                                />
+                              </>
+                            )}
+                          </Group>
+                        ))}
                       </Group>
                     )
                   })}

package/src/components/Legend/Legend.Component.tsx

@@ -23,7 +23,7 @@ import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
 const LEGEND_PADDING = 36
 
-export interface LegendProps {
+interface LegendProps {
   colorScale: ColorScale
   config: ChartConfig
   currentViewport: ViewportSize
@@ -149,9 +149,12 @@ const Legend: React.FC<LegendProps> = forwardRef(
                                 eventType: `chart_legend_item_toggled` as any,
                                 eventAction: 'keydown',
                                 eventLabel: interactionLabel,
-                                specifics: config.visualizationType === 'Bar'
-                                  ? `label: ${label.text}, orientation: ${config.orientation === 'horizontal' ? 'horizontal' : 'vertical'}, mode: ${legend.behavior}`
-                                  : `label: ${label.text}, mode: ${legend.behavior}`,
+                                specifics:
+                                  config.visualizationType === 'Bar'
+                                    ? `label: ${label.text}, orientation: ${
+                                        config.orientation === 'horizontal' ? 'horizontal' : 'vertical'
+                                      }, mode: ${legend.behavior}`
+                                    : `label: ${label.text}, mode: ${legend.behavior}`
                               })
                               highlight(label)
                             }
@@ -164,9 +167,12 @@ const Legend: React.FC<LegendProps> = forwardRef(
                               eventType: `chart_legend_item_toggled` as any,
                               eventAction: 'click',
                               eventLabel: interactionLabel,
-                              specifics: config.visualizationType === 'Bar'
-                                ? `label: ${label.text}, orientation: ${config.orientation === 'horizontal' ? 'horizontal' : 'vertical'}, mode: ${legend.behavior}`
-                                : `label: ${label.text}, mode: ${legend.behavior}`,
+                              specifics:
+                                config.visualizationType === 'Bar'
+                                  ? `label: ${label.text}, orientation: ${
+                                      config.orientation === 'horizontal' ? 'horizontal' : 'vertical'
+                                    }, mode: ${legend.behavior}`
+                                  : `label: ${label.text}, mode: ${legend.behavior}`,
 
                               vizTitle: getVizTitle(config)
                             })
@@ -238,8 +244,9 @@ const Legend: React.FC<LegendProps> = forwardRef(
                 {/* Pattern Legend Items */}
                 {config.legend.patterns && Object.keys(config.legend.patterns).length > 0 && (
                   <div
-                    className={`legend-patterns d-flex ${['top', 'bottom'].includes(config.legend.position) ? 'flex-row flex-wrap' : 'flex-column'
-                      }`}
+                    className={`legend-patterns d-flex ${
+                      ['top', 'bottom'].includes(config.legend.position) ? 'flex-row flex-wrap' : 'flex-column'
+                    }`}
                   >
                     {Object.entries(config.legend.patterns).map(([key, pattern]) => {
                       const patternId = `legend-pattern-${key}`