@cdc/chart 4.25.10 → 4.26.1

package/src/components/EditorPanel/useEditorPermissions.ts

@@ -21,21 +21,8 @@ export const useEditorPermissions = () => {
     'Pie',
     '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'
+    'Sankey',
+    'Warming Stripes'
   ]
 
   const visSupportsDateCategoryAxis = () => {
@@ -77,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
@@ -91,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
@@ -107,6 +96,8 @@ export const useEditorPermissions = () => {
         return false
       case 'Sankey':
         return false
+      case 'Warming Stripes':
+        return true
       default:
         return true
     }
@@ -154,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 = () => {
@@ -167,6 +162,8 @@ export const useEditorPermissions = () => {
 
   const visHasDataCutoff = () => {
     switch (visualizationType) {
+      case 'Warming Stripes':
+        return false
       case 'Sankey':
         return false
       case 'Forest Plot':
@@ -182,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'
   }
@@ -191,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
   }
@@ -203,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
   }
@@ -221,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
   }
@@ -257,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
   }
@@ -275,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
   }
@@ -316,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
   }
@@ -334,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
   }
@@ -349,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
   }
 
@@ -383,6 +382,12 @@ export const useEditorPermissions = () => {
     )
   }
 
+  const visSupportsSmallMultiples = () => {
+    const enabledCharts = ['Line', 'Bar', 'Area Chart', 'Combo', 'Box Plot', 'Scatter Plot', 'Warming Stripes']
+    if (enabledCharts.includes(visualizationType) && config.orientation !== 'horizontal') return true
+    return false
+  }
+
   const visSupportsYPadding = () => {
     return !config.yAxis.inlineLabel || !config.yAxis.inlineLabel?.includes(' ')
   }
@@ -411,7 +416,6 @@ export const useEditorPermissions = () => {
 
   return {
     enabledChartTypes,
-    headerColors,
     visCanAnimate,
     visHasAnchors,
     visHasBarBorders,
@@ -460,6 +464,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}`

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>