@cdc/chart 4.25.10 → 4.26.1

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

@@ -4,6 +4,7 @@ import ConfigContext from '../../../../ConfigContext.js'
 // CDC Core
 import Accordion from '@cdc/core/components/ui/Accordion'
 import Button from '@cdc/core/components/elements/Button'
+import { CheckBox, Select } from '@cdc/core/components/EditorPanel/Inputs'
 import _ from 'lodash'
 
 // types
@@ -14,6 +15,29 @@ import './../panels.scss'
 const PanelAnnotate: React.FC<PanelProps> = props => {
   const { updateConfig, config, svgRef } = useContext(ConfigContext)
 
+  const updateField = (section, subsection, fieldName, value) => {
+    if (subsection) {
+      updateConfig({
+        ...config,
+        [section]: {
+          ...config[section],
+          [subsection]: {
+            ...config[section][subsection],
+            [fieldName]: value
+          }
+        }
+      })
+    } else {
+      updateConfig({
+        ...config,
+        [section]: {
+          ...config[section],
+          [fieldName]: value
+        }
+      })
+    }
+  }
+
   const handleAnnotationUpdate = (value, property, index) => {
     const svgContainer = document.querySelector('.chart-container  > svg')?.getBoundingClientRect()
     const newSvgDims = [svgContainer?.width, svgContainer?.height]
@@ -67,8 +91,8 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
         config.xAxis.type === 'date'
           ? new Date(config?.data?.[0]?.[config.xAxis.dataKey]).getTime()
           : config.xAxis.type === 'categorical'
-            ? '1/15/2016'
-            : '',
+          ? '1/15/2016'
+          : '',
       yKey: '',
       dx: 20,
       dy: -20,
@@ -96,22 +120,14 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
   return (
     <Accordion key={props.name}>
       <Accordion.Section title={props.name} key={props.name}>
-        <label key={`key-1`}>
-          Show Annotation Dropdown
-          <input
-            type='checkbox'
-            checked={config?.general?.showAnnotationDropdown || false}
-            onChange={e => {
-              updateConfig({
-                ...config,
-                general: {
-                  ...config.general,
-                  showAnnotationDropdown: e.target.checked
-                }
-              })
-            }}
-          />
-        </label>
+        <CheckBox
+          value={config?.general?.showAnnotationDropdown || false}
+          section='general'
+          subsection={null}
+          fieldName='showAnnotationDropdown'
+          label='Show Annotation Dropdown'
+          updateField={updateField}
+        />
 
         {config.general.showAnnotationDropdown && (
           <label key={`key-2`}>
@@ -164,61 +180,53 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
                     />
                   </label>
 
-                  <label>
-                    Edit Subject
-                    <input
-                      type='checkbox'
-                      checked={config?.annotations[index]?.edit?.subject || false}
-                      onChange={e => {
-                        const updatedAnnotations = _.cloneDeep(config?.annotations)
-                        updatedAnnotations[index].edit.subject = e.target.checked
-                        updateConfig({
-                          ...config,
-                          annotations: updatedAnnotations
-                        })
-                      }}
-                    />
-                  </label>
-                  <label>
-                    Edit Label
-                    <input
-                      type='checkbox'
-                      checked={config?.annotations[index]?.edit?.label || false}
-                      onChange={e => {
-                        const updatedAnnotations = _.cloneDeep(config?.annotations)
-                        updatedAnnotations[index].edit.label = e.target.checked
-                        updateConfig({
-                          ...config,
-                          annotations: updatedAnnotations
-                        })
-                      }}
-                    />
-                  </label>
+                  <CheckBox
+                    value={config?.annotations[index]?.edit?.subject || false}
+                    section='annotations'
+                    subsection={null}
+                    fieldName={`${index}.edit.subject`}
+                    label='Edit Subject'
+                    updateField={(section, subsection, fieldName, value) => {
+                      const updatedAnnotations = _.cloneDeep(config?.annotations)
+                      updatedAnnotations[index].edit.subject = value
+                      updateConfig({
+                        ...config,
+                        annotations: updatedAnnotations
+                      })
+                    }}
+                  />
+                  <CheckBox
+                    value={config?.annotations[index]?.edit?.label || false}
+                    section='annotations'
+                    subsection={null}
+                    fieldName={`${index}.edit.label`}
+                    label='Edit Label'
+                    updateField={(section, subsection, fieldName, value) => {
+                      const updatedAnnotations = _.cloneDeep(config?.annotations)
+                      updatedAnnotations[index].edit.label = value
+                      updateConfig({
+                        ...config,
+                        annotations: updatedAnnotations
+                      })
+                    }}
+                  />
 
-                  <label>
-                    Connection Type:
-                    <select
-                      key='annotation-connection-type'
-                      onChange={e => {
-                        const updatedAnnotations = _.cloneDeep(config?.annotations)
-                        updatedAnnotations[index].connectionType = e.target.value
-                        updateConfig({
-                          ...config,
-                          annotations: updatedAnnotations
-                        })
-                      }}
-                      value={config?.annotations[index]?.connectionType}
-                    >
-                      <option key='select' value='select'>
-                        Select
-                      </option>
-                      {['curve', 'line', 'elbow', 'none'].map((side, index) => (
-                        <option key={side} value={side}>
-                          {side}
-                        </option>
-                      ))}
-                    </select>
-                  </label>
+                  <Select
+                    label='Connection Type:'
+                    value={config?.annotations[index]?.connectionType}
+                    options={['Select', 'curve', 'line', 'elbow', 'none']}
+                    section='annotations'
+                    subsection={null}
+                    fieldName='connectionType'
+                    updateField={(section, subsection, fieldName, value) => {
+                      const updatedAnnotations = _.cloneDeep(config?.annotations)
+                      updatedAnnotations[index].connectionType = value
+                      updateConfig({
+                        ...config,
+                        annotations: updatedAnnotations
+                      })
+                    }}
+                  />
 
                   {annotation.connectionType === 'curve' && (
                     <>
@@ -243,45 +251,22 @@ const PanelAnnotate: React.FC<PanelProps> = props => {
                     </>
                   )}
 
-                  {/* <label>
-                    Connection Location:
-                    <select
-                      onChange={e => {
-                        const updatedAnnotations = _.cloneDeep(config?.annotations)
-                        updatedAnnotations[index].connectionLocation = e.target.value
-                        updateConfig({
-                          ...config,
-                          annotations: updatedAnnotations
-                        })
-                      }}
-                    >
-                      {['auto', 'left', 'top', 'bottom', 'right'].map((side, index) => (
-                        <option key={side} value={side}>
-                          {side}
-                        </option>
-                      ))}
-                    </select>
-                  </label> */}
-
-                  <label>
-                    Marker
-                    <select
-                      key='annotation-marker'
-                      value={annotation.marker}
-                      onChange={e => {
-                        const updatedAnnotations = _.cloneDeep(config?.annotations)
-                        updatedAnnotations[index].marker = e.target.value
-                        updateConfig({
-                          ...config,
-                          annotations: updatedAnnotations
-                        })
-                      }}
-                    >
-                      {['arrow', 'circle'].map((column, columnIndex) => {
-                        return <option key={`col-${columnIndex}`}>{column}</option>
-                      })}
-                    </select>
-                  </label>
+                  <Select
+                    label='Marker'
+                    value={annotation.marker}
+                    options={['arrow', 'circle']}
+                    section='annotations'
+                    subsection={null}
+                    fieldName='marker'
+                    updateField={(section, subsection, fieldName, value) => {
+                      const updatedAnnotations = _.cloneDeep(config?.annotations)
+                      updatedAnnotations[index].marker = value
+                      updateConfig({
+                        ...config,
+                        annotations: updatedAnnotations
+                      })
+                    }}
+                  />
 
                   <Button className='btn btn-danger full-width' onClick={() => handleRemoveAnnotation(index)}>
                     Delete Annotation

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

@@ -21,7 +21,7 @@ import ConfigContext from '../../../../ConfigContext.js'
 import { PanelProps } from '../PanelProps'
 
 const PanelGeneral: FC<PanelProps> = props => {
-  const { config } = useContext(ConfigContext)
+  const { config, updateConfig } = useContext(ConfigContext)
   const { updateField } = useEditorPanelContext()
   const {
     enabledChartTypes,
@@ -62,6 +62,24 @@ const PanelGeneral: FC<PanelProps> = props => {
             label='Chart Type'
             updateField={updateField}
             options={enabledChartTypes}
+            onChange={event => {
+              const newVisType = event.target.value
+
+              updateField(null, null, 'visualizationType', newVisType)
+
+              if (newVisType === 'Forecasting' && config.xAxis.type === 'categorical') {
+                updateConfig({
+                  ...config,
+                  visualizationType: newVisType,
+                  xAxis: {
+                    ...config.xAxis,
+                    type: 'date',
+                    dateParseFormat: config.xAxis.dateParseFormat || '%Y-%m-%d',
+                    dateDisplayFormat: config.xAxis.dateDisplayFormat || '%Y-%m-%d'
+                  }
+                })
+              }
+            }}
           />
         )}
         {visSupportsChartHeight() && config.orientation === 'vertical' && (
@@ -298,36 +316,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' && (
+          <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']} />
@@ -371,6 +390,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() && (