@cdc/chart 4.26.7 → 4.26.10

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

@@ -9,6 +9,7 @@ import Accordion from '@cdc/core/components/ui/Accordion'
 import Button from '@cdc/core/components/elements/Button'
 import GroupedList from '@cdc/core/components/EditorPanel/GroupedList'
 import Icon from '@cdc/core/components/ui/Icon'
+import Tooltip from '@cdc/core/components/ui/Tooltip'
 import { CheckBox, Select } from '@cdc/core/components/EditorPanel/Inputs'
 import cloneDeep from 'lodash/cloneDeep'
 import {
@@ -74,11 +75,6 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
         mobile: true
       },
       connectorType: 'line',
-      colors: {
-        label: 'black',
-        connector: 'black',
-        marker: 'black'
-      },
       selected: true,
       anchor: {
         vertical: false,
@@ -94,6 +90,7 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
       y: 50,
       dx: 20,
       dy: -20,
+      autoSide: 'right',
       opacity: '100',
       connectionType: 'line'
     }
@@ -237,6 +234,9 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
 
                             if (value === 'event-line') {
                               target.anchorMode = 'data'
+                              if (target.labelPosition === 'above' || target.labelPosition === 'below') {
+                                target.labelPosition = 'auto'
+                              }
                               if (!target.dataX) {
                                 target.dataX = transformedData?.[0]?.[config.xAxis.dataKey] || ''
                               }
@@ -256,6 +256,51 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
                           }}
                         />
 
+                        <Select
+                          label='Label Side:'
+                          tooltip={
+                            <Tooltip style={{ textTransform: 'none' }}>
+                              <Tooltip.Target>
+                                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                              </Tooltip.Target>
+                              <Tooltip.Content>
+                                <p>The side of the annotation target where the label appears.</p>
+                              </Tooltip.Content>
+                            </Tooltip>
+                          }
+                          value={annotation.labelPosition || 'auto'}
+                          options={
+                            annotation.style === 'event-line'
+                              ? [
+                                  { value: 'auto', label: 'Automatic' },
+                                  { value: 'left', label: 'Left' },
+                                  { value: 'right', label: 'Right' }
+                                ]
+                              : [
+                                  { value: 'auto', label: 'Automatic' },
+                                  { value: 'left', label: 'Left' },
+                                  { value: 'right', label: 'Right' },
+                                  { value: 'above', label: 'Above' },
+                                  { value: 'below', label: 'Below' }
+                                ]
+                          }
+                          section='annotations'
+                          subsection={null}
+                          fieldName='labelPosition'
+                          updateField={(section, subsection, fieldName, value) => {
+                            const updatedAnnotations = cloneDeep(config?.annotations)
+                            const target = updatedAnnotations[index]
+                            target.labelPosition = value
+                            if (target.style === 'event-line' && value === 'left') {
+                              target.dx = -EVENT_LINE_LABEL_OFFSET
+                            }
+                            if (target.style === 'event-line' && value === 'right') {
+                              target.dx = EVENT_LINE_LABEL_OFFSET
+                            }
+                            updateConfig({ ...config, annotations: updatedAnnotations })
+                          }}
+                        />
+
                         {visSupportsDataAnnotations() && annotation.style !== 'event-line' && (
                           <Select
                             label='Position Mode:'

package/src/components/EditorPanel/components/Panels/Panel.Dendrogram.css

@@ -0,0 +1,10 @@
+.dendrogram-settings__range {
+  display: block;
+  margin-bottom: 1rem;
+  width: 100%;
+}
+
+.dendrogram-settings__range input[type='range'] {
+  display: block;
+  width: 100%;
+}

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

@@ -0,0 +1,211 @@
+import { useContext, type FC } from 'react'
+import {
+  AccordionItem,
+  AccordionItemButton,
+  AccordionItemHeading,
+  AccordionItemPanel
+} from 'react-accessible-accordion'
+import { Select, TextField } from '@cdc/core/components/EditorPanel/Inputs'
+
+import ConfigContext from '../../../../ConfigContext'
+import type { ChartContext } from '../../../../types/ChartContext'
+import { useEditorPanelContext } from '../../EditorPanelContext'
+import type { PanelProps } from '../PanelProps'
+import WarningImage from '../../../../images/warning.svg'
+import './Panel.Dendrogram.css'
+
+const DendrogramSettings: FC<PanelProps> = ({ name }) => {
+  const { config, updateConfig } = useContext<ChartContext>(ConfigContext)
+  const { getColumns } = useEditorPanelContext()
+
+  if (config.visualizationType !== 'Dendrogram') return null
+
+  const dendrogram = config.dendrogram || ({} as NonNullable<typeof config.dendrogram>)
+  const columns = dendrogram.columns || { node: '', parent: '', style: '', nodeColor: '' }
+  const columnOptions = getColumns?.(false) || []
+  const isMissingColumn = (column: unknown) =>
+    !column || (columnOptions.length > 0 && !columnOptions.includes(String(column)))
+
+  const updateColumn = (_section: string, _subsection: string, fieldName: string, value: string) => {
+    updateConfig?.({
+      ...config,
+      dendrogram: { ...dendrogram, columns: { ...columns, [fieldName]: value } }
+    })
+  }
+
+  const updateLinkStyleLabel = (_section: string, _subsection: string, fieldName: string, value: string) => {
+    updateConfig?.({
+      ...config,
+      dendrogram: {
+        ...dendrogram,
+        linkStyleLabels: {
+          solid: dendrogram.linkStyleLabels?.solid ?? 'Solid',
+          dashed: dendrogram.linkStyleLabels?.dashed ?? 'Dashed',
+          [fieldName]: value
+        }
+      }
+    })
+  }
+
+  const updateDendrogramField = (_section: string, _subsection: string, fieldName: string, value: string | boolean) => {
+    const numericFields = ['height', 'nodeRadius', 'leafSpacing', 'depthSpacing']
+    const numericDefaults: Record<string, number> = { height: 500, nodeRadius: 6, leafSpacing: 40, depthSpacing: 140 }
+    updateConfig?.({
+      ...config,
+      dendrogram: {
+        ...dendrogram,
+        [fieldName]: numericFields.includes(fieldName)
+          ? value === ''
+            ? numericDefaults[fieldName]
+            : Number(value)
+          : value
+      }
+    })
+  }
+
+  return (
+    <AccordionItem>
+      <AccordionItemHeading>
+        <AccordionItemButton data-required-field-section='dendrogram-columns'>
+          {name}
+          {(isMissingColumn(columns.node) || isMissingColumn(columns.parent)) && (
+            <WarningImage width='25' className='warning-icon' />
+          )}
+        </AccordionItemButton>
+      </AccordionItemHeading>
+      <AccordionItemPanel>
+        <Select
+          value={columns.node || ''}
+          section='dendrogram'
+          subsection='columns'
+          fieldName='node'
+          label='Node ID Column'
+          data-required-field-control='dendrogram-node'
+          initial='Select'
+          required
+          updateField={updateColumn}
+          options={columnOptions}
+        />
+        <Select
+          value={columns.parent || ''}
+          section='dendrogram'
+          subsection='columns'
+          fieldName='parent'
+          label='Parent ID Column'
+          data-required-field-control='dendrogram-parent'
+          initial='Select'
+          required
+          updateField={updateColumn}
+          options={columnOptions}
+        />
+        <Select
+          value={columns.style || ''}
+          section='dendrogram'
+          subsection='columns'
+          fieldName='style'
+          label='Link Style Column (Optional)'
+          initial='None'
+          updateField={updateColumn}
+          options={columnOptions}
+        />
+        <TextField
+          value={dendrogram.linkStyleLabels?.solid ?? 'Solid'}
+          section='dendrogram'
+          subsection='linkStyleLabels'
+          fieldName='solid'
+          label='Solid Link Legend Label'
+          updateField={updateLinkStyleLabel}
+        />
+        <TextField
+          value={dendrogram.linkStyleLabels?.dashed ?? 'Dashed'}
+          section='dendrogram'
+          subsection='linkStyleLabels'
+          fieldName='dashed'
+          label='Dashed Link Legend Label'
+          updateField={updateLinkStyleLabel}
+        />
+        <Select
+          value={columns.nodeColor || ''}
+          section='dendrogram'
+          subsection='columns'
+          fieldName='nodeColor'
+          label='Node Color Column (Optional)'
+          initial='None'
+          updateField={updateColumn}
+          options={columnOptions}
+        />
+        <Select
+          value={dendrogram.orientation || 'horizontal'}
+          section='dendrogram'
+          fieldName='orientation'
+          label='Orientation'
+          updateField={updateDendrogramField}
+          options={[
+            { value: 'horizontal', label: 'Horizontal' },
+            { value: 'vertical', label: 'Vertical' }
+          ]}
+        />
+        <Select
+          value={['curve', 'line', 'elbow'].includes(dendrogram.connectionType) ? dendrogram.connectionType : 'curve'}
+          section='dendrogram'
+          fieldName='connectionType'
+          label='Connection Type'
+          updateField={updateDendrogramField}
+          options={[
+            { value: 'curve', label: 'Curved' },
+            { value: 'line', label: 'Straight' },
+            { value: 'elbow', label: 'Elbow' }
+          ]}
+        />
+        <TextField
+          value={dendrogram.height ?? 500}
+          type='number'
+          section='dendrogram'
+          fieldName='height'
+          label='Height'
+          min={160}
+          updateField={updateDendrogramField}
+        />
+        <TextField
+          value={dendrogram.nodeRadius ?? 6}
+          type='number'
+          section='dendrogram'
+          fieldName='nodeRadius'
+          label='Node Radius'
+          min={2}
+          updateField={updateDendrogramField}
+        />
+        <label className='dendrogram-settings__range'>
+          <span className='edit-label column-heading'>
+            Leaf Spacing: <output>{dendrogram.leafSpacing ?? 40}</output>
+          </span>
+          <input
+            type='range'
+            aria-label='Leaf Spacing'
+            min={20}
+            max={120}
+            step={5}
+            value={dendrogram.leafSpacing ?? 40}
+            onChange={event => updateDendrogramField('dendrogram', '', 'leafSpacing', event.target.value)}
+          />
+        </label>
+        <label className='dendrogram-settings__range'>
+          <span className='edit-label column-heading'>
+            Depth Spacing: <output>{dendrogram.depthSpacing ?? 140}</output>
+          </span>
+          <input
+            type='range'
+            aria-label='Depth Spacing'
+            min={60}
+            max={300}
+            step={10}
+            value={dendrogram.depthSpacing ?? 140}
+            onChange={event => updateDendrogramField('dendrogram', '', 'depthSpacing', event.target.value)}
+          />
+        </label>
+      </AccordionItemPanel>
+    </AccordionItem>
+  )
+}
+
+export default DendrogramSettings

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

@@ -26,6 +26,10 @@ const ForestPlotSettings: FC<PanelProps> = ({ name }) => {
   const { getColumns } = useEditorPanelContext()
   if (config.visualizationType !== 'Forest Plot') return
 
+  const columnOptions = getColumns(false)
+  const isMissingColumn = (column: unknown) =>
+    !column || (columnOptions.length > 0 && !columnOptions.includes(String(column)))
+
   const enforceRestrictions = updatedConfig => {
     if (updatedConfig.orientation === 'horizontal') {
       updatedConfig.labels = false
@@ -130,11 +134,13 @@ const ForestPlotSettings: FC<PanelProps> = ({ name }) => {
   return (
     <AccordionItem>
       <AccordionItemHeading>
-        <AccordionItemButton>
+        <AccordionItemButton data-required-field-section='forest-plot-settings'>
           {name}
-          {(!config.forestPlot.estimateField || !config.forestPlot.upper || !config.forestPlot.lower) && (
-            <WarningImage width='25' className='warning-icon' />
-          )}
+          {(isMissingColumn(config.xAxis?.dataKey) ||
+            !config.forestPlot.type ||
+            isMissingColumn(config.forestPlot.estimateField) ||
+            isMissingColumn(config.forestPlot.upper) ||
+            isMissingColumn(config.forestPlot.lower)) && <WarningImage width='25' className='warning-icon' />}
         </AccordionItemButton>
       </AccordionItemHeading>
       <AccordionItemPanel>
@@ -143,10 +149,11 @@ const ForestPlotSettings: FC<PanelProps> = ({ name }) => {
           section='xAxis'
           fieldName='dataKey'
           label='Study Column'
+          data-required-field-control='forest-study'
           initial='Select'
           required={true}
           updateField={updateField}
-          options={getColumns(false)}
+          options={columnOptions}
           tooltip={
             <Tooltip style={{ textTransform: 'none' }}>
               <Tooltip.Target>
@@ -161,6 +168,7 @@ const ForestPlotSettings: FC<PanelProps> = ({ name }) => {
         <Select
           value={config.forestPlot.type}
           label='Forest Plot Type'
+          data-required-field-control='forest-type'
           initial={'Select'}
           required={true}
           onChange={e => {
@@ -209,6 +217,7 @@ const ForestPlotSettings: FC<PanelProps> = ({ name }) => {
         <Select
           value={config.forestPlot.estimateField}
           label='Point Estimate Column'
+          data-required-field-control='forest-estimate'
           initial={config.forestPlot.estimateField || 'Select'}
           required={true}
           onChange={e => {
@@ -223,7 +232,7 @@ const ForestPlotSettings: FC<PanelProps> = ({ name }) => {
             }
             e.target.value = ''
           }}
-          options={getColumns(false)}
+          options={columnOptions}
         />
 
         <Select
@@ -247,6 +256,7 @@ const ForestPlotSettings: FC<PanelProps> = ({ name }) => {
         <Select
           value={config.forestPlot.lower}
           label='Lower CI Column'
+          data-required-field-control='forest-lower'
           required={true}
           initial={config.forestPlot.lower || 'Select'}
           onChange={e => {
@@ -261,12 +271,13 @@ const ForestPlotSettings: FC<PanelProps> = ({ name }) => {
             }
             e.target.value = ''
           }}
-          options={getColumns(false)}
+          options={columnOptions}
         />
 
         <Select
           value={config.forestPlot.upper}
           label='Upper CI Column'
+          data-required-field-control='forest-upper'
           initial={config.forestPlot.upper || 'Select'}
           required={true}
           onChange={e => {
@@ -281,7 +292,7 @@ const ForestPlotSettings: FC<PanelProps> = ({ name }) => {
             }
             e.target.value = ''
           }}
-          options={getColumns(false)}
+          options={columnOptions}
         />
 
         <label>

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

@@ -22,6 +22,7 @@ import ConfigContext from '../../../../ConfigContext.js'
 import { PanelProps } from '../PanelProps'
 import { getVisualizationTypeConfigUpdate } from '../../helpers/getVisualizationTypeConfigUpdate'
 import { type VisualizationType } from '../../../../types/ChartConfig'
+import RacingControls from './RacingControls'
 
 const PanelGeneral: FC<PanelProps> = props => {
   const { config, updateConfig } = useContext(ConfigContext)
@@ -66,6 +67,34 @@ const PanelGeneral: FC<PanelProps> = props => {
     })
   }
 
+  const handleOrientationChange = event => {
+    const orientation = event.target.value
+    const isHorizontal = orientation === 'horizontal'
+    const prevXAnchors = config.xAxis?.anchors?.length > 0 ? config.xAxis.anchors : []
+    const prevYAnchors = config.yAxis?.anchors?.length > 0 ? config.yAxis.anchors : []
+
+    updateConfig({
+      ...config,
+      orientation,
+      ...(orientation === 'horizontal' ? { labels: false } : {}),
+      xAxis: {
+        ...config.xAxis,
+        anchors: prevYAnchors,
+        hideAxis: isHorizontal,
+        hideTicks: isHorizontal
+      },
+      yAxis: {
+        ...config.yAxis,
+        anchors: prevXAnchors,
+        hideAxis: !isHorizontal,
+        hideTicks: !isHorizontal,
+        ...(orientation === 'horizontal' && !config.yAxis?.labelPlacement
+          ? { labelPlacement: 'On Date/Category Axis' }
+          : {})
+      }
+    })
+  }
+
   return (
     <AccordionItem>
       {' '}
@@ -74,7 +103,7 @@ const PanelGeneral: FC<PanelProps> = props => {
         <AccordionItemButton>General</AccordionItemButton>
       </AccordionItemHeading>
       <AccordionItemPanel>
-        {config?.visualizationType !== 'Sankey' && (
+        {!['Sankey', 'Network', 'Dendrogram'].includes(config?.visualizationType) && (
           <Select
             value={visualizationType}
             fieldName='visualizationType'
@@ -140,14 +169,8 @@ const PanelGeneral: FC<PanelProps> = props => {
             )}
           </div>
         )}
-        {(visualizationType === 'Bar' || visualizationType === 'Combo') && (
-          <Select
-            value={visualizationSubType || 'Regular'}
-            fieldName='visualizationSubType'
-            label='Chart Subtype'
-            updateField={updateField}
-            options={['regular', 'stacked']}
-          />
+        {(visualizationType === 'Bar' || visualizationType === 'Combo' || visualizationType === 'Line') && (
+          <RacingControls />
         )}
         {visualizationType === 'Area Chart' && visualizationSubType === 'stacked' && (
           <Select
@@ -158,56 +181,61 @@ const PanelGeneral: FC<PanelProps> = props => {
             options={Object.keys(approvedCurveTypes)}
           />
         )}
-        {(visualizationType === 'Bar' || visualizationType === 'Box Plot') && (
+        {(visualizationType === 'Bar' || visualizationType === 'Box Plot') && visualizationSubType !== 'racing' && (
           <Select
             value={config.orientation || 'vertical'}
             fieldName='orientation'
             label='Orientation'
-            updateField={updateField}
+            onChange={handleOrientationChange}
             options={['vertical', 'horizontal']}
           />
         )}
         {visualizationType === 'Deviation Bar' && <Select label='Orientation' options={['horizontal']} />}
-        {(visualizationType === 'Bar' || visualizationType === 'Deviation Bar') && (
-          <Select
-            value={config.isLollipopChart ? 'lollipop' : barStyle || 'flat'}
-            fieldName='barStyle'
-            label='bar style'
-            updateField={updateField}
-            options={showBarStyleOptions()}
-            tooltip={
-              <Tooltip style={{ textTransform: 'none' }}>
-                <Tooltip.Target>
-                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-                </Tooltip.Target>
-                <Tooltip.Content>
-                  <p>Consider using the 'Flat' bar style when presenting data that includes '0' values.</p>
-                </Tooltip.Content>
-              </Tooltip>
-            }
-          />
-        )}
-        {(visualizationType === 'Bar' || visualizationType === 'Deviation Bar') && barStyle === 'rounded' && (
-          <Select
-            value={config.tipRounding || 'top'}
-            fieldName='tipRounding'
-            label='tip rounding'
-            updateField={updateField}
-            options={['top', 'full']}
-          />
-        )}
-        {(visualizationType === 'Bar' || visualizationType === 'Deviation Bar') && barStyle === 'rounded' && (
-          <Select
-            value={config.roundingStyle || 'standard'}
-            fieldName='roundingStyle'
-            label='rounding style'
-            updateField={updateField}
-            options={['standard', 'shallow', 'finger']}
-          />
-        )}
+        {(visualizationType === 'Bar' || visualizationType === 'Deviation Bar') &&
+          visualizationSubType !== 'racing' && (
+            <Select
+              value={config.isLollipopChart ? 'lollipop' : barStyle || 'flat'}
+              fieldName='barStyle'
+              label='bar style'
+              updateField={updateField}
+              options={showBarStyleOptions()}
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>Consider using the 'Flat' bar style when presenting data that includes '0' values.</p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+            />
+          )}
+        {(visualizationType === 'Bar' || visualizationType === 'Deviation Bar') &&
+          visualizationSubType !== 'racing' &&
+          barStyle === 'rounded' && (
+            <Select
+              value={config.tipRounding || 'top'}
+              fieldName='tipRounding'
+              label='tip rounding'
+              updateField={updateField}
+              options={['top', 'full']}
+            />
+          )}
+        {(visualizationType === 'Bar' || visualizationType === 'Deviation Bar') &&
+          visualizationSubType !== 'racing' &&
+          barStyle === 'rounded' && (
+            <Select
+              value={config.roundingStyle || 'standard'}
+              fieldName='roundingStyle'
+              label='rounding style'
+              updateField={updateField}
+              options={['standard', 'shallow', 'finger']}
+            />
+          )}
         {(visualizationType === 'Bar' || visualizationType === 'Box Plot') && config.orientation === 'horizontal' && (
           <Select
-            value={config.yAxis.labelPlacement || 'Below Bar'}
+            value={config.yAxis.labelPlacement || 'On Date/Category Axis'}
             section='yAxis'
             fieldName='labelPlacement'
             label='Label Placement'
@@ -449,7 +477,7 @@ const PanelGeneral: FC<PanelProps> = props => {
         {visualizationType === 'Pie' && (
           <Select fieldName='pieType' label='Pie Chart Type' updateField={updateField} options={['Regular', 'Donut']} />
         )}
-        {visualizationType === 'Line' && (
+        {visualizationType === 'Line' && visualizationSubType !== 'racing' && (
           <CheckBox
             value={config.allowLineToBarGraph}
             fieldName='allowLineToBarGraph'
@@ -529,7 +557,11 @@ const PanelGeneral: FC<PanelProps> = props => {
                   <Icon display='question' style={{ marginLeft: '0.5rem' }} />
                 </Tooltip.Target>
                 <Tooltip.Content>
-                  <p>Super Title</p>
+                  <p>
+                    To keep the main title as short as possible, consider adding extra details in a super title, which
+                    displays in small font just above the main title in the visualization’s title bar. (If you hide the
+                    regular title, the super title does not display.)
+                  </p>
                 </Tooltip.Content>
               </Tooltip>
             }
@@ -548,7 +580,10 @@ const PanelGeneral: FC<PanelProps> = props => {
                 <Icon display='question' style={{ marginLeft: '0.5rem' }} />
               </Tooltip.Target>
               <Tooltip.Content>
-                <p>Intro Text</p>
+                <p>
+                  Explain how to use the chart, introduce any special concepts, etc. This text displays above the
+                  visualization (and below the title bar, if displayed).
+                </p>
               </Tooltip.Content>
             </Tooltip>
           }
@@ -589,8 +624,7 @@ const PanelGeneral: FC<PanelProps> = props => {
                 </Tooltip.Target>
                 <Tooltip.Content>
                   <p>
-                    Consider adding footnotes when displaying 'suppressed,' 'no data,' and 'zero values' to ensure
-                    accurate interpretation of the data.
+                    Use this text element for any supplemental information that should display below the data table.
                   </p>
                 </Tooltip.Content>
               </Tooltip>

package/src/components/EditorPanel/components/Panels/Panel.Network.css

@@ -0,0 +1,9 @@
+.network-settings__range {
+  display: block;
+  width: 100%;
+}
+
+.network-settings__range input[type='range'] {
+  display: block;
+  width: 100%;
+}