@cdc/chart 4.26.1 → 4.26.2

package/src/components/Brush/MiniChartPreview.tsx

@@ -10,25 +10,63 @@ 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
+
+    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
+
+      const getPatternUrl = (datum, seriesKey: string, value: string | number) => {
+        if (!config.legend?.patterns || Object.keys(config.legend.patterns).length === 0) {
+          return null
+        }
+
+        for (const [patternKey, patternObj] of Object.entries(config.legend.patterns)) {
+          const pattern = patternObj as any
+          if (pattern.dataKey && pattern.dataValue) {
+            if (pattern.dataKey === seriesKey && String(value) === String(pattern.dataValue)) {
+              return `url(#chart-pattern-${patternKey})`
+            }
+
+            if (!config.runtime?.seriesLabels || !config.runtime.seriesLabels[pattern.dataKey]) {
+              const dataFieldValue = datum[pattern.dataKey]
+              if (String(dataFieldValue) === String(pattern.dataValue)) {
+                return `url(#chart-pattern-${patternKey})`
+              }
+            }
+          }
+        }
+
+        return null
+      }
 
       tableData.forEach((d, i) => {
         const xVal = xScale(d[dataKey])
@@ -47,11 +85,12 @@ 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 = getPatternUrl(d, s.dataKey, value)
 
             // Calculate the bottom and top of this segment
             // For stacked bars, each segment sits on top of the previous one
@@ -72,22 +111,41 @@ 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 = getPatternUrl(d, s.dataKey, value)
 
             // Calculate bar position and height
             const valueY = miniYScale(value)
@@ -100,18 +158,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 +296,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 +310,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 +343,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

@@ -653,6 +653,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
     visHasLegendAxisAlign,
     visHasLegendColorCategory,
     visHasSelectableLegendValues,
+    visSupportsClickingLegend,
     visSupportsDateCategoryAxis,
     visSupportsDateCategoryAxisLabel,
     visSupportsDateCategoryAxisLine,
@@ -756,6 +757,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'
@@ -1892,6 +1897,7 @@ const EditorPanel: React.FC<ChartEditorPanelProps> = ({ datasets }) => {
                     </AccordionItem>
                   )}
                 <Panels.BoxPlot name='Measures' />
+                <Panels.Radar name='Radar Chart Settings' />
                 {/* Left Value Axis */}
                 {visSupportsLeftValueAxis() && (
                   <AccordionItem>
@@ -4250,7 +4256,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 +4283,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 +4308,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 +4592,16 @@ 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)}
+                  />
+                )}
                 <Panels.SmallMultiples name='Small Multiples' />
               </Accordion>
               {config.type !== 'Spark Line' && (

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

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react'
 import ConfigContext from '../../../../ConfigContext.js'
+import { useEditorPermissions } from '../../useEditorPermissions'
 
 // CDC Core
 import Accordion from '@cdc/core/components/ui/Accordion'
@@ -13,7 +14,8 @@ import { type PanelProps } from './../PanelProps'
 import './../panels.scss'
 
 const PanelAnnotate: React.FC<PanelProps> = props => {
-  const { updateConfig, config, svgRef } = useContext(ConfigContext)
+  const { updateConfig, config, transformedData } = useContext(ConfigContext)
+  const { visSupportsDataAnnotations } = useEditorPermissions()
 
   const updateField = (section, subsection, fieldName, value) => {
     if (subsection) {
@@ -39,11 +41,8 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
   }
 
   const handleAnnotationUpdate = (value, property, index) => {
-    const svgContainer = document.querySelector('.chart-container  > svg')?.getBoundingClientRect()
-    const newSvgDims = [svgContainer?.width, svgContainer?.height]
     const annotations = [...config?.annotations]
     annotations[index][property] = value
-    annotations[index].savedDimensions = newSvgDims
 
     updateConfig({
       ...config,
@@ -52,15 +51,9 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
   }
 
   const handleAddAnnotation = () => {
-    // check if svg is animated svg or standard svg
-    const newSvgDims = [
-      svgRef?.current?.width?.baseVal?.value || svgRef?.current?.width,
-      svgRef?.current?.height?.baseVal?.value || svgRef?.current?.height
-    ]
-
     const newAnnotation = {
-      text: 'New Annotation',
-      snapToNearestPoint: false,
+      text: 'New annotation',
+      anchorMode: 'fixed',
       fontSize: 16,
       bezier: 10,
       show: {
@@ -84,20 +77,12 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
         subject: true,
         label: true
       },
-      seriesKey: '',
+      // seriesKey and dataX are only set when switching to data mode
       x: 50,
-      y: Number(newSvgDims?.[1] / 2),
-      xKey:
-        config.xAxis.type === 'date'
-          ? new Date(config?.data?.[0]?.[config.xAxis.dataKey]).getTime()
-          : config.xAxis.type === 'categorical'
-          ? '1/15/2016'
-          : '',
-      yKey: '',
+      y: 50,
       dx: 20,
       dy: -20,
       opacity: '100',
-      savedDimensions: newSvgDims,
       connectionType: 'line'
     }
 
@@ -163,6 +148,59 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
                       onChange={e => handleAnnotationUpdate(e.target.value, 'text', index)}
                     />
                   </label>
+
+                  {visSupportsDataAnnotations() && (
+                    <Select
+                      label='Position Mode:'
+                      value={annotation.anchorMode || 'fixed'}
+                      options={[
+                        { value: 'fixed', label: 'Fixed position' },
+                        { value: 'data', label: 'Snap to data' }
+                      ]}
+                      section='annotations'
+                      subsection={null}
+                      fieldName='anchorMode'
+                      updateField={(section, subsection, fieldName, value) => {
+                        const updatedAnnotations = _.cloneDeep(config?.annotations)
+                        updatedAnnotations[index].anchorMode = value
+
+                        // When switching to data mode, ensure seriesKey and dataX are initialized
+                        if (value === 'data') {
+                          if (!updatedAnnotations[index].seriesKey) {
+                            updatedAnnotations[index].seriesKey = config.series?.[0]?.dataKey || ''
+                          }
+                          if (!updatedAnnotations[index].dataX) {
+                            updatedAnnotations[index].dataX = transformedData?.[0]?.[config.xAxis.dataKey] || ''
+                          }
+                        }
+
+                        updateConfig({
+                          ...config,
+                          annotations: updatedAnnotations
+                        })
+                      }}
+                    />
+                  )}
+
+                  {visSupportsDataAnnotations() && annotation.anchorMode === 'data' && (
+                    <Select
+                      label='Series:'
+                      value={annotation.seriesKey || config.series?.[0]?.dataKey || ''}
+                      options={config.series.map(s => s.dataKey)}
+                      section='annotations'
+                      subsection={null}
+                      fieldName='seriesKey'
+                      updateField={(section, subsection, fieldName, value) => {
+                        const updatedAnnotations = _.cloneDeep(config?.annotations)
+                        updatedAnnotations[index].seriesKey = value || config.series?.[0]?.dataKey
+                        updateConfig({
+                          ...config,
+                          annotations: updatedAnnotations
+                        })
+                      }}
+                    />
+                  )}
+
                   <label>
                     Opacity
                     <br />

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

@@ -206,6 +206,86 @@ const PanelGeneral: FC<PanelProps> = props => {
             options={['Below Bar', 'On Date/Category Axis']}
           />
         )}
+        {visualizationType === 'Horizon Chart' && (
+          <>
+            <TextField
+              type='number'
+              value={config.horizon?.numLayers || 4}
+              section='horizon'
+              fieldName='numLayers'
+              label='Number of Layers'
+              updateField={updateField}
+              min={1}
+              max={9}
+              onBlur={e => {
+                const parsed = Number(e.target.value)
+                if (!isNaN(parsed)) {
+                  const value = Math.round(parsed)
+                  const clamped = Math.min(9, Math.max(1, value))
+                  if (clamped !== parsed) {
+                    updateField('horizon', null, 'numLayers', clamped)
+                  }
+                }
+              }}
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>
+                      The number of layers determines how many "bands" the horizon chart is divided into. The optimal
+                      number of layers may depend on the data range and the desired level of detail.
+                    </p>
+                    <hr />
+                    <p>Valid range: 1-9. Defaults to 4 layers.</p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+            />
+            <TextField
+              type='number'
+              value={config.horizon?.bandGap ?? 15}
+              section='horizon'
+              fieldName='bandGap'
+              label='Band Gap'
+              updateField={updateField}
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>The vertical spacing (in pixels) between each series row in the horizon chart.</p>
+                    <hr />
+                    <p>Defaults to 15 pixels.</p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+            />
+            <TextField
+              type='number'
+              value={config.horizon?.bottomPadding ?? 15}
+              section='horizon'
+              fieldName='bottomPadding'
+              label='Bottom Padding'
+              updateField={updateField}
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>The padding (in pixels) below the last series row in the horizon chart.</p>
+                    <hr />
+                    <p>Defaults to 15 pixels.</p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+            />
+          </>
+        )}
+
         {visHasNumbersOnBars() ? (
           <CheckBox
             value={config.yAxis.displayNumbersOnBar}
@@ -316,7 +396,7 @@ const PanelGeneral: FC<PanelProps> = props => {
             />
           </>
         )}
-        {config.visualizationType !== 'Warming Stripes' && (
+        {config.visualizationType !== 'Warming Stripes' && config.visualizationType !== 'Radar' && (
           <CheckBox
             tooltip={
               <Tooltip style={{ textTransform: 'none' }}>

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

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