@cdc/chart 4.25.11 → 4.26.2

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.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

@@ -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,36 +396,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' && config.visualizationType !== 'Radar' && (
+          <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 +470,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' || config.visualizationType === 'Radar') return
+
   return (
     <AccordionItem>
       <AccordionItemHeading>