@cdc/chart 4.25.8 → 4.25.11

package/src/components/EditorPanel/EditorPanelContext.ts

@@ -23,6 +23,9 @@ export type EditorPanelContext = {
   isPaletteReversed?: boolean
   handleRemoveHighlightedBar?: Function
   setLollipopShape?: Function
+  handlePaletteSelection?: (palette: string) => void
+  handleTwoColorPaletteSelection?: (palette: string) => void
+  handleForecastPaletteSelection?: (palette: string, seriesIndex: number, stageIndex: number) => void
 }
 
 const EditorPanelContext = createContext<EditorPanelContext>(null)

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.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' && (