@cdc/chart 4.23.10 → 4.24.1

package/src/components/EditorPanel/components/Panel.DateHighlighting.tsx

@@ -0,0 +1,109 @@
+import React, { useState, useEffect } from 'react'
+import { AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
+import { type PanelProps } from './PanelProps'
+
+const days = [
+  { day: 'Sunday', abbr: 'S', status: 'inactive' },
+  { day: 'Monday', abbr: 'M', status: 'inactive' },
+  { day: 'Tuesday', abbr: 'T', status: 'inactive' },
+  { day: 'Wednesday', abbr: 'W', status: 'inactive' },
+  { day: 'Thursday', abbr: 'T', status: 'inactive' },
+  { day: 'Friday', abbr: 'F', status: 'inactive' },
+  { day: 'Saturday', abbr: 'S', status: 'inactive' }
+]
+
+const DateHighlighting = ({ name }: PanelProps) => {
+  const [interval, setInterval] = useState(0)
+  const [isPlural, setIsPlural] = useState(false)
+  const [recurrance, setRecurrance] = useState('Days')
+  const [firstRecurranceUpdate, setFirstRecurranceUpdate] = useState(false)
+  const [daySelections, setDaySelections] = useState(days)
+
+  const handleDaySelections = e => {
+    const incomingDay = e.target.value
+    const prev = [...daySelections]
+
+    const updatedDays = prev.map(day => {
+      if (day.day === incomingDay) {
+        return { ...day, status: day.status === 'active' ? 'inactive' : 'active' }
+      }
+      return day
+    })
+
+    setDaySelections(updatedDays)
+  }
+
+  useEffect(() => {
+    if (interval > 7 && !firstRecurranceUpdate) {
+      setRecurrance('Weeks')
+    }
+  }, [interval])
+
+  useEffect(() => {
+    if (interval > 1) {
+      setIsPlural(true)
+    } else {
+      setIsPlural(false)
+    }
+  }, [interval])
+
+  return (
+    <AccordionItem>
+      <AccordionItemHeading>
+        <AccordionItemButton>{name}</AccordionItemButton>
+      </AccordionItemHeading>
+      <AccordionItemPanel>
+        <ul className='date-highlight'>
+          <div className='date-highlight__occurance'>
+            <label htmlFor=''>Repeat Every</label>
+            <input type='number' value={interval} onChange={e => setInterval(Number(e.target.value))} />
+            <select value={recurrance} onChange={e => setRecurrance(e.target.value)}>
+              <option value='Day'>{isPlural ? 'Days' : 'Day'}</option>
+              <option value='Week'>{isPlural ? 'Weeks' : 'Week'}</option>
+              <option value='Month'>{isPlural ? 'Months' : 'Month'}</option>
+              <option value='Year'>{isPlural ? 'Years' : 'Year'}</option>
+            </select>
+          </div>
+          {recurrance !== 'Days' && (
+            <div className='date-highlight__day-selection'>
+              <label htmlFor='' style={{ display: 'block', width: '100%' }}>
+                Repeat On
+              </label>
+              {daySelections.map(d => (
+                <button className={`week-button week-button--${d.status} ${d.day}`} value={d.day} onClick={handleDaySelections}>
+                  {d.abbr}
+                </button>
+              ))}
+            </div>
+          )}
+          <div className='date-highlight__end-date'>
+            <label htmlFor=''>Ends</label>
+            <div className='radio-group'>
+              <div className='group'>
+                <input type='radio' name='ending' value='Never' id='Never' />
+                <label for='Never'>Never</label>
+              </div>
+            </div>
+            <div className='radio-group'>
+              <div className='group'>
+                <input type='radio' name='ending' value='After' id='After' />
+                <label for='After'>After</label>
+              </div>
+              <input type='number' className='date-highlight__end-date--on' />
+              <p>occurances</p>
+            </div>
+            <div className='radio-group'>
+              <div className='group'>
+                <input type='radio' name='ending' value='On' id='On' />
+                <label for='On'>On</label>
+              </div>
+              <input type='date' className='date-highlight__end-date--after' />
+            </div>
+          </div>
+        </ul>
+      </AccordionItemPanel>
+    </AccordionItem>
+  )
+}
+
+export default DateHighlighting

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

@@ -1,117 +1,17 @@
 import React, { useContext, memo, useState, useEffect } from 'react'
-import ConfigContext from '../ConfigContext'
+import ConfigContext from '../../../ConfigContext'
 import { useDebounce } from 'use-debounce'
-import WarningImage from '../images/warning.svg'
+import WarningImage from '../../../images/warning.svg'
+import Tooltip from '@cdc/core/components/ui/Tooltip'
+import Icon from '@cdc/core/components/ui/Icon'
+import { type ChartContext } from '../../../types/ChartContext'
+import { Select, CheckBox, TextField } from '@cdc/core/components/EditorPanel/Inputs'
+import { type PanelProps } from './PanelProps'
 
 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>
-  }
-
-  if ('number' === type) {
-    formElement = <input type='number' name={name} onChange={onChange} {...attributes} value={value} />
-  }
-
-  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>
-  )
-})
-
-const ForestPlotSettings = () => {
-  const { config, rawData: unfilteredData, updateConfig, isDebug } = useContext(ConfigContext)
+const ForestPlotSettings = ({ name }: PanelProps) => {
+  const { config, rawData: unfilteredData, updateConfig } = useContext<ChartContext>(ConfigContext)
 
   const enforceRestrictions = updatedConfig => {
     if (updatedConfig.orientation === 'horizontal') {
@@ -180,7 +80,7 @@ const ForestPlotSettings = () => {
     }
 
     if (section === 'forestPlot' && subsection) {
-      updateConfig({
+      let newConfig = {
         ...config,
         [section]: {
           ...config[section],
@@ -189,7 +89,9 @@ const ForestPlotSettings = () => {
             [fieldName]: newValue
           }
         }
-      })
+      }
+
+      updateConfig(newConfig)
       return
     }
 
@@ -239,32 +141,179 @@ 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'
+          initial={'Select'}
+          required={true}
+          onChange={e => {
+            if (e.target.value !== '' && e.target.value !== 'Select') {
+              updateConfig({
+                ...config,
+                forestPlot: {
+                  ...config.forestPlot,
+                  type: e.target.value
+                }
+              })
+            }
+            e.target.value = ''
+          }}
+          options={['Linear', 'Logarithmic']}
+          tooltip={
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+              </Tooltip.Target>
+              <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.
+                </p>
+              </Tooltip.Content>
+            </Tooltip>
+          }
+        />
+
         <TextField type='text' value={config.forestPlot?.title || ''} updateField={updateField} section='forestPlot' fieldName='title' label='Plot Title' />
 
-        {/* width in center */}
-        {/* <label>
-          <span className='edit-label column-heading'>Forest Plot Width (%)</span>
-          <input
-            type='number'
-            min={0}
-            max={100}
-            value={config.forestPlot.width || ''}
-            onChange={e => {
+        <br />
+        <hr />
+        <br />
+        <h4>Column Settings</h4>
+
+        <Select
+          value={config.forestPlot.estimateField}
+          label='Point Estimate Column'
+          initial={config.forestPlot.estimateField || 'Select'}
+          required={true}
+          onChange={e => {
+            if (e.target.value !== '' && e.target.value !== 'Select') {
               updateConfig({
                 ...config,
                 forestPlot: {
                   ...config.forestPlot,
-                  width: e.target.value
+                  estimateField: e.target.value
                 }
               })
-            }}
-          />
-        </label> */}
+            }
+            e.target.value = ''
+          }}
+          options={getColumns(false)}
+        />
+
+        <Select
+          value={config.forestPlot.shape}
+          label='Point Estimate Shape'
+          onChange={e => {
+            if (e.target.value !== '' && e.target.value !== 'Select') {
+              updateConfig({
+                ...config,
+                forestPlot: {
+                  ...config.forestPlot,
+                  shape: e.target.value
+                }
+              })
+            }
+            e.target.value = ''
+          }}
+          options={['text', 'circle', 'square']}
+        />
+
+        <Select
+          value={config.forestPlot.lower}
+          label='Lower CI Column'
+          required={true}
+          initial={config.forestPlot.lower || 'Select'}
+          onChange={e => {
+            if (e.target.value !== '' && e.target.value !== 'Select') {
+              updateConfig({
+                ...config,
+                forestPlot: {
+                  ...config.forestPlot,
+                  lower: e.target.value
+                }
+              })
+            }
+            e.target.value = ''
+          }}
+          options={getColumns(false)}
+        />
+
+        <Select
+          value={config.forestPlot.upper}
+          label='Upper CI Column'
+          initial={config.forestPlot.upper || 'Select'}
+          required={true}
+          onChange={e => {
+            if (e.target.value !== '' && e.target.value !== 'Select') {
+              updateConfig({
+                ...config,
+                forestPlot: {
+                  ...config.forestPlot,
+                  upper: e.target.value
+                }
+              })
+            }
+            e.target.value = ''
+          }}
+          options={getColumns(false)}
+        />
+
+        <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 = ''
+              }}
+            />
+          </span>
+        </label>
+
+        <CheckBox value={config.forestPlot?.lineOfNoEffect?.show || false} section='forestPlot' subsection='lineOfNoEffect' fieldName='show' label='Show Line of No Effect' updateField={updateField} />
+
+        <br />
+        <hr />
+        <br />
+        <h4>Width Settings</h4>
 
         <label>
           <span className='edit-label column-heading'>Chart Offset Left (%)</span>
@@ -342,87 +391,20 @@ const ForestPlotSettings = () => {
           />
         </label>
 
-        <Select
-          value={config.forestPlot.estimateField}
-          label='Point Estimate Column'
-          initial={'Select'}
-          required={true}
-          onChange={e => {
-            if (e.target.value !== '' && e.target.value !== 'Select') {
-              updateConfig({
-                ...config,
-                forestPlot: {
-                  ...config.forestPlot,
-                  estimateField: e.target.value
-                }
-              })
-            }
-            e.target.value = ''
-          }}
-          options={getColumns(false)}
-        />
-
-        <Select
-          value={config.forestPlot.lower}
-          label='Lower CI Column'
-          required={true}
-          initial={'Select'}
-          onChange={e => {
-            if (e.target.value !== '' && e.target.value !== 'Select') {
-              updateConfig({
-                ...config,
-                forestPlot: {
-                  ...config.forestPlot,
-                  lower: e.target.value
-                }
-              })
-            }
-            e.target.value = ''
-          }}
-          options={getColumns(false)}
-        />
-        <Select
-          value={config.forestPlot.upper}
-          label='Upper CI Column'
-          initial={'Select'}
-          required={true}
-          onChange={e => {
-            if (e.target.value !== '' && e.target.value !== 'Select') {
-              updateConfig({
-                ...config,
-                forestPlot: {
-                  ...config.forestPlot,
-                  upper: e.target.value
-                }
-              })
-            }
-            e.target.value = ''
-          }}
-          options={getColumns(false)}
-        />
+        <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' />
 
-        <CheckBox value={config.forestPlot.showZeroLine} section='forestPlot' fieldName='showZeroLine' label='Show Line on Zero' updateField={updateField} />
-        <Select
-          value={config.forestPlot.shape}
-          label='Point Estimate Shape'
-          initial={'Select'}
-          onChange={e => {
-            if (e.target.value !== '' && e.target.value !== 'Select') {
-              updateConfig({
-                ...config,
-                forestPlot: {
-                  ...config.forestPlot,
-                  shape: e.target.value
-                }
-              })
-            }
-            e.target.value = ''
-          }}
-          options={['text', 'circle', 'square', 'diamond']}
-        />
+        <br />
+        <hr />
+        <br />
         <Select
           value={config.forestPlot.radius.scalingColumn}
-          label='Scale Radius Column'
+          label='Weight Column'
           initial={'Select'}
           onChange={e => {
             if (e.target.value !== '' && e.target.value !== 'Select') {
@@ -441,12 +423,13 @@ const ForestPlotSettings = () => {
           }}
           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,
@@ -467,7 +450,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 => {
@@ -487,19 +470,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>Add Regression Line</h4>
-        <TextField type='number' value={config.forestPlot?.regression?.upper || ''} updateField={updateField} section='forestPlot' subsection='regression' fieldName='upper' label='Upper Value' />
-        <TextField type='number' value={config.forestPlot?.regression?.lower || ''} updateField={updateField} section='forestPlot' subsection='regression' fieldName='lower' label='Lower Value' />
-        <TextField type='number' value={config.forestPlot?.regression?.estimateField || ''} updateField={updateField} section='forestPlot' subsection='regression' fieldName='estimateField' label='Estimate Value' />
-        <TextField type='text' value={config.forestPlot?.regression?.baseLineColor || 'black'} updateField={updateField} section='forestPlot' subsection='regression' fieldName='baseLineColor' label='Base Color' />
-        <CheckBox value={config.forestPlot?.regression?.showBaseLine || false} section='forestPlot' subsection='regression' fieldName='showBaseLine' label='Show base line' updateField={updateField} />
-        <CheckBox value={config.forestPlot?.regression?.showDiamond || false} section='forestPlot' subsection='regression' fieldName='showDiamond' label='Show Diamond' updateField={updateField} />
-        <CheckBox value={config.forestPlot?.hideDateCategoryCol || false} section='forestPlot' fieldName='hideDateCategoryCol' label='Hide Date Category Column' updateField={updateField} />
-        <TextField type='text' value={config.forestPlot?.regression?.description || ''} updateField={updateField} section='forestPlot' subsection='regression' fieldName='description' label='Description' />
       </AccordionItemPanel>
     </AccordionItem>
   )