@cdc/chart 4.23.11 → 4.24.2

package/src/components/EditorPanel/EditorPanelContext.ts

@@ -0,0 +1,40 @@
+import { createContext, useContext } from 'react'
+
+export type EditorPanelContext = {
+  addNewExclusion?: Function
+  updateField?: Function
+  // warning messages updated within EditorPanel
+  warningMsg?: { maxMsg?: string; minMsg?: string; rightMaxMessage?: string; minMsgRight?: string }
+  // current enabled chart types in useEditorPermissions file
+  enabledChartTypes?: string[]
+  showBarStyleOptions?: boolean
+  getDataValueOptions?: Function
+  data?: object[]
+  // function used on inputs, selects, etc. to update config values.
+  getColumns?: Function
+  getDataValues?: Function
+  handleAddNewHighlightedBar?: Function
+  handleHighlightedBarLegendLabel?: Function
+  handleUpdateHighlightedBar?: Function
+  handleUpdateHighlightedBarColor?: Function
+  handleUpdateHighlightedBorderWidth?: Function
+  highlightedBarValues?: Function
+  highlightedSeriesValues?: Function
+  isPaletteReversed?: boolean
+  handleRemoveHighlightedBar?: Function
+  setLollipopShape?: Function
+}
+
+const EditorPanelContext = createContext<EditorPanelContext>(null)
+
+export const useEditorPanelContext = () => {
+  const editorPanelCtx = useContext(EditorPanelContext)
+
+  if (editorPanelCtx === null) {
+    throw new Error('COVE: editor panel context is null.')
+  }
+
+  return editorPanelCtx
+}
+
+export default EditorPanelContext

package/src/components/EditorPanel/components/PanelProps.ts

@@ -0,0 +1,3 @@
+export type PanelProps = {
+  name: string
+}

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

@@ -0,0 +1,148 @@
+import { useContext, FC } from 'react'
+import { AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
+import { TextField } from '@cdc/core/components/EditorPanel/Inputs'
+import Tooltip from '@cdc/core/components/ui/Tooltip'
+import Icon from '@cdc/core/components/ui/Icon'
+import ConfigContext from '../../../../ConfigContext'
+import { useEditorPanelContext } from '../../EditorPanelContext'
+
+// types
+import { type PanelProps } from './../PanelProps'
+
+const PanelBoxPlot: FC<PanelProps> = props => {
+  const { config } = useContext(ConfigContext)
+  const { boxplot } = config
+  if (config.visualizationType !== 'Box Plot') return
+  const { updateField } = useEditorPanelContext()
+
+  return (
+    <AccordionItem>
+      <AccordionItemHeading>
+        <AccordionItemButton>{props.name}</AccordionItemButton>
+      </AccordionItemHeading>
+      <AccordionItemPanel>
+        <h4 style={{ fontSize: '18px' }}>Labels for 5-Number Summary</h4>
+
+        {/* max */}
+        <TextField
+          type='text'
+          value={boxplot.labels.maximum}
+          fieldName='maximum'
+          section='boxplot'
+          subsection='labels'
+          label='Maximum'
+          updateField={updateField}
+          tooltip={
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>Highest value, excluding outliers</p>
+              </Tooltip.Content>
+            </Tooltip>
+          }
+        />
+
+        {/* Q3 */}
+        <TextField
+          type='text'
+          value={boxplot.labels.q3}
+          fieldName='q3'
+          section='boxplot'
+          subsection='labels'
+          label='Upper Quartile'
+          updateField={updateField}
+          tooltip={
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>Represented by top line of box. 25% of data are higher.</p>
+              </Tooltip.Content>
+            </Tooltip>
+          }
+        />
+
+        {/* median */}
+        <TextField
+          type='text'
+          value={boxplot.labels.median}
+          fieldName='median'
+          section='boxplot'
+          subsection='labels'
+          label='Median'
+          updateField={updateField}
+          tooltip={
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>Middle data point. Half of data are higher value.</p>
+              </Tooltip.Content>
+            </Tooltip>
+          }
+        />
+
+        {/* q1 */}
+        <TextField
+          type='text'
+          value={boxplot.labels.q1}
+          fieldName='q1'
+          section='boxplot'
+          subsection='labels'
+          label='Lower Quartile'
+          updateField={updateField}
+          tooltip={
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>Represented by bottom line of box. 25% of data are lower.</p>
+              </Tooltip.Content>
+            </Tooltip>
+          }
+        />
+
+        {/* minimum */}
+        <TextField
+          type='text'
+          value={boxplot.labels.minimum}
+          fieldName='minimum'
+          section='boxplot'
+          subsection='labels'
+          label='Minimum'
+          updateField={updateField}
+          tooltip={
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>Lowest value, excluding outliers</p>
+              </Tooltip.Content>
+            </Tooltip>
+          }
+        />
+        <br />
+        <h4 style={{ fontSize: '18px' }}>Labels for Additional Measures</h4>
+
+        {/* iqr */}
+        <TextField type='text' value={boxplot.labels.iqr} fieldName='iqr' section='boxplot' subsection='labels' label='Interquartile Range' updateField={updateField} />
+        {/* count */}
+        <TextField type='text' value={boxplot.labels.total} fieldName='total' section='boxplot' subsection='labels' label='Total' updateField={updateField} />
+        {/* mean */}
+        <TextField type='text' value={boxplot.labels.mean} fieldName='mean' section='boxplot' subsection='labels' label='Mean' updateField={updateField} />
+        {/* outliers */}
+        <TextField type='text' value={boxplot.labels.outliers} fieldName='outliers' section='boxplot' subsection='labels' label='Outliers' updateField={updateField} />
+        {/* values */}
+        <TextField type='text' value={boxplot.labels.values} fieldName='values' section='boxplot' subsection='labels' label='Values' updateField={updateField} />
+      </AccordionItemPanel>
+    </AccordionItem>
+  )
+}
+
+export default PanelBoxPlot

package/src/components/{ForestPlotSettings.jsx → EditorPanel/components/Panels/Panel.ForestPlotSettings.tsx}

@@ -1,120 +1,25 @@
-import React, { useContext, memo, useState, useEffect } from 'react'
-import ConfigContext from '../ConfigContext'
-import { useDebounce } from 'use-debounce'
-import WarningImage from '../images/warning.svg'
+import { useContext, FC } from 'react'
+
+// cdc
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import Icon from '@cdc/core/components/ui/Icon'
+import { Select, CheckBox, TextField } from '@cdc/core/components/EditorPanel/Inputs'
+import WarningImage from '../../../../images/warning.svg'
 
-import { AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
-
-const Select = memo(({ label, value, options, fieldName, section = null, subsection = null, required = false, tooltip, updateField, initial: initialValue, ...attributes }) => {
-  let optionsJsx = options.map((optionName, index) => (
-    <option value={optionName} key={index}>
-      {optionName}
-    </option>
-  ))
-
-  if (initialValue) {
-    optionsJsx.unshift(
-      <option value='' key='initial'>
-        {initialValue}
-      </option>
-    )
-  }
-
-  return (
-    <label>
-      <span className='edit-label'>
-        {label}
-        {tooltip}
-      </span>
-      <select
-        className={required && !value ? 'warning' : ''}
-        name={fieldName}
-        value={value}
-        onChange={event => {
-          updateField(section, subsection, fieldName, event.target.value)
-        }}
-        {...attributes}
-      >
-        {optionsJsx}
-      </select>
-    </label>
-  )
-})
-
-const CheckBox = memo(({ label, value, fieldName, section = null, subsection = null, tooltip, updateField, ...attributes }) => (
-  <label className='checkbox column-heading'>
-    <input
-      type='checkbox'
-      name={fieldName}
-      checked={value}
-      onChange={e => {
-        updateField(section, subsection, fieldName, !value)
-      }}
-      {...attributes}
-    />
-    <span className='edit-label'>
-      {label}
-      {tooltip}
-    </span>
-  </label>
-))
-
-/* eslint-disable react-hooks/rules-of-hooks */
-const TextField = memo(({ label, tooltip, section = null, subsection = null, fieldName, updateField, value: stateValue, type = 'input', i = null, min = null, ...attributes }) => {
-  const [value, setValue] = useState(stateValue)
-
-  const [debouncedValue] = useDebounce(value, 500)
-
-  useEffect(() => {
-    if ('string' === typeof debouncedValue && stateValue !== debouncedValue) {
-      updateField(section, subsection, fieldName, debouncedValue, i)
-    }
-  }, [debouncedValue]) // eslint-disable-line
-
-  let name = subsection ? `${section}-${subsection}-${fieldName}` : `${section}-${subsection}-${fieldName}`
-
-  const onChange = e => {
-    if ('number' !== type || min === null) {
-      setValue(e.target.value)
-    } else {
-      if (!e.target.value || min <= parseFloat(e.target.value)) {
-        setValue(e.target.value)
-      } else {
-        setValue(min.toString())
-      }
-    }
-  }
-
-  let formElement = <input type='text' name={name} onChange={onChange} {...attributes} value={value} />
-
-  if ('textarea' === type) {
-    formElement = <textarea name={name} onChange={onChange} {...attributes} value={value}></textarea>
-  }
+// contexts
+import ConfigContext from '../../../../ConfigContext'
 
-  if ('number' === type) {
-    formElement = <input type='number' name={name} onChange={onChange} {...attributes} value={value} />
-  }
+// types
+import { type ChartContext } from '../../../../types/ChartContext'
+import { type PanelProps } from '../PanelProps'
 
-  if ('date' === type) {
-    formElement = <input type='date' name={name} onChange={onChange} {...attributes} value={value} />
-  }
-
-  return (
-    <label>
-      <span className='edit-label column-heading'>
-        {label}
-        {tooltip}
-      </span>
-      {formElement}
-    </label>
-  )
-})
+import { AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
 
-const ForestPlotSettings = () => {
-  const { config, rawData: unfilteredData, updateConfig, isDebug } = useContext(ConfigContext)
+const ForestPlotSettings: FC<PanelProps> = ({ name }) => {
+  const { config, rawData: unfilteredData, updateConfig } = useContext<ChartContext>(ConfigContext)
+  if (config.visualizationType !== 'Forest Plot') return
 
+  // todo: get from editor context?
   const enforceRestrictions = updatedConfig => {
     if (updatedConfig.orientation === 'horizontal') {
       updatedConfig.labels = false
@@ -128,6 +33,7 @@ const ForestPlotSettings = () => {
     }
   }
 
+  // todo: get from editor context?
   const getColumns = (filter = true) => {
     let columns = {}
     unfilteredData.forEach(row => {
@@ -152,6 +58,7 @@ const ForestPlotSettings = () => {
     return Object.keys(columns)
   }
 
+  // todo: editor context?
   const updateField = (section, subsection, fieldName, newValue) => {
     if (section === 'boxplot' && subsection === 'legend') {
       updateConfig({
@@ -243,11 +150,31 @@ const ForestPlotSettings = () => {
     <AccordionItem>
       <AccordionItemHeading>
         <AccordionItemButton>
-          Forest Plot Settings
+          {name}
           {(!config.forestPlot.estimateField || !config.forestPlot.upper || !config.forestPlot.lower) && <WarningImage width='25' className='warning-icon' />}
         </AccordionItemButton>
       </AccordionItemHeading>
       <AccordionItemPanel>
+        <Select
+          value={config.xAxis.dataKey || ''}
+          section='xAxis'
+          fieldName='dataKey'
+          label='Study Column'
+          initial='Select'
+          required={true}
+          updateField={updateField}
+          options={getColumns(false)}
+          tooltip={
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>Select the column or row containing the categories or dates for this axis. </p>
+              </Tooltip.Content>
+            </Tooltip>
+          }
+        />
         <Select
           value={config.forestPlot.type}
           label='Forest Plot Type'
@@ -311,7 +238,6 @@ const ForestPlotSettings = () => {
         <Select
           value={config.forestPlot.shape}
           label='Point Estimate Shape'
-          initial={config.forestPlot.shape || 'Select'}
           onChange={e => {
             if (e.target.value !== '' && e.target.value !== 'Select') {
               updateConfig({
@@ -327,28 +253,6 @@ const ForestPlotSettings = () => {
           options={['text', 'circle', 'square']}
         />
 
-        <Select
-          value={config.forestPlot.radius.scalingColumn}
-          label='Scale Radius Column'
-          initial={'Select'}
-          onChange={e => {
-            if (e.target.value !== '' && e.target.value !== 'Select') {
-              updateConfig({
-                ...config,
-                forestPlot: {
-                  ...config.forestPlot,
-                  radius: {
-                    ...config.forestPlot.radius,
-                    scalingColumn: e.target.value
-                  }
-                }
-              })
-            }
-            e.target.value = ''
-          }}
-          options={getColumns(false)}
-        />
-
         <Select
           value={config.forestPlot.lower}
           label='Lower CI Column'
@@ -389,30 +293,30 @@ const ForestPlotSettings = () => {
           options={getColumns(false)}
         />
 
-        <Select
-          value={config.forestPlot.pooledResult.column}
-          label='Pooled Result Row'
-          initial={config.forestPlot.pooledResult.column || 'Select'}
-          required={false}
-          onChange={e => {
-            if (e.target.value !== '' && e.target.value !== 'Select') {
-              updateConfig({
-                ...config,
-                forestPlot: {
-                  ...config.forestPlot,
-                  pooledResult: {
-                    ...config.forestPlot.pooledResult,
-                    column: e.target.value
+        <label>
+          <span className='edit-label column-heading'>
+            Pooled Result Column
+            <input
+              type='text'
+              value={config.forestPlot.pooledResult.column || ''}
+              label='Pooled Result Row'
+              onChange={e => {
+                updateConfig({
+                  ...config,
+                  forestPlot: {
+                    ...config.forestPlot,
+                    pooledResult: {
+                      ...config.forestPlot.pooledResult,
+                      column: e.target.value
+                    }
                   }
-                }
-              })
-            }
-            e.target.value = ''
-          }}
-          options={['None', ...config.data.map(d => d[config.xAxis.dataKey])]}
-        />
+                })
+                e.target.value = ''
+              }}
+            />
+          </span>
+        </label>
 
-        <CheckBox value={config.forestPlot?.hideDateCategoryCol || false} section='forestPlot' fieldName='hideDateCategoryCol' label='Hide Date Category Column' updateField={updateField} />
         <CheckBox value={config.forestPlot?.lineOfNoEffect?.show || false} section='forestPlot' subsection='lineOfNoEffect' fieldName='show' label='Show Line of No Effect' updateField={updateField} />
 
         <br />
@@ -496,12 +400,45 @@ const ForestPlotSettings = () => {
           />
         </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' />
+        <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' />
+
+        <br />
+        <hr />
+        <br />
+        <Select
+          value={config.forestPlot.radius.scalingColumn}
+          label='Weight Column'
+          initial={'Select'}
+          onChange={e => {
+            if (e.target.value !== '' && e.target.value !== 'Select') {
+              updateConfig({
+                ...config,
+                forestPlot: {
+                  ...config.forestPlot,
+                  radius: {
+                    ...config.forestPlot.radius,
+                    scalingColumn: e.target.value
+                  }
+                }
+              })
+            }
+            e.target.value = ''
+          }}
+          options={getColumns(false)}
+        />
+
         <label>
           <span className='edit-label column-heading'>Radius Minimum Size</span>
           <input
-            min={1}
-            max={5}
-            value={config.forestPlot.radius.min}
+            min={3}
+            max={6}
+            value={config.forestPlot.radius.min || 3}
             onChange={e => {
               updateConfig({
                 ...config,
@@ -522,7 +459,7 @@ const ForestPlotSettings = () => {
         <label>
           <span className='edit-label column-heading'>Radius Maximum Size</span>
           <input
-            min={5}
+            min={7}
             max={10}
             value={config.forestPlot.radius.max}
             onChange={e => {
@@ -542,13 +479,6 @@ const ForestPlotSettings = () => {
             placeholder=' 1'
           />
         </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' />
-        <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' />
       </AccordionItemPanel>
     </AccordionItem>
   )