@cdc/chart 4.23.11 → 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,119 +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') {
@@ -243,11 +141,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 +229,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 +244,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 +284,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 +391,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 +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 => {
@@ -542,13 +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>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>
   )

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

@@ -0,0 +1,168 @@
+import { memo, useContext } from 'react'
+import { useEditorPermissions } from './../useEditorPermissions.js'
+import { AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
+import { type ChartConfig } from './../../../types/ChartConfig.js'
+import { TextField, Select } from '@cdc/core/components/EditorPanel/Inputs'
+import Tooltip from '@cdc/core/components/ui/Tooltip'
+import Icon from '@cdc/core/components/ui/Icon'
+import { type ChartContext } from '../../../types/ChartContext'
+import { type PanelProps } from './PanelProps'
+import ConfigContext from '../../../ConfigContext'
+
+const RegionSettings = memo(({ config, updateConfig }: { config: ChartConfig; updateConfig: Function }) => {
+  let regionUpdate = (fieldName, value, i) => {
+    let regions = []
+
+    if (config.regions) {
+      regions = [...config.regions]
+    }
+
+    regions[i][fieldName] = value
+    updateConfig({ ...config, regions })
+  }
+
+  // only for Regions
+  let updateField = (section, subsection, fieldName, value, i) => regionUpdate(fieldName, value, i)
+
+  let removeColumn = i => {
+    let regions = []
+
+    if (config.regions) {
+      regions = [...config.regions]
+    }
+
+    regions.splice(i, 1)
+
+    updateConfig({ ...config, regions })
+  }
+
+  let addColumn = () => {
+    let regions = []
+
+    if (config.regions) {
+      regions = [...config.regions]
+    }
+
+    regions.push({})
+
+    updateConfig({ ...config, regions })
+  }
+
+  const fromOptions = ['Fixed', 'Previous Days']
+  const toOptions = ['Last Date', 'Fixed']
+
+  return (
+    <>
+      {config.regions &&
+        config.regions.map(({ label, color, from, to, background, range = 'Custom' }, i) => (
+          <div className='edit-block' key={`region-${i}`}>
+            <button
+              type='button'
+              className='remove-column'
+              onClick={event => {
+                event.preventDefault()
+                removeColumn(i)
+              }}
+            >
+              Remove
+            </button>
+            <TextField value={label} label='Region Label' fieldName='label' i={i} updateField={updateField} />
+            <div className='two-col-inputs'>
+              <TextField value={color} label='Text Color' fieldName='color' updateField={(section, subsection, fieldName, value) => regionUpdate(fieldName, value, i)} />
+              <TextField value={background} label='Background' fieldName='background' updateField={(section, subsection, fieldName, value) => regionUpdate(fieldName, value, i)} />
+            </div>
+
+            <Select
+              value={config.regions[i].fromType ?? 'Fixed'}
+              label='Minimum Region Type'
+              initial={'Select'}
+              required={true}
+              onChange={e => {
+                if (e.target.value !== '' && e.target.value !== 'Select') {
+                  const newRegions = [...config.regions]
+                  newRegions[i].fromType = e.target.value
+                  updateConfig({
+                    ...config,
+                    regions: newRegions
+                  })
+                }
+                e.target.value = ''
+              }}
+              options={fromOptions}
+            />
+
+            {(config.regions[i].fromType === 'Fixed' || config.regions[i].fromType === 'Previous Days' || !config.regions[i].fromType) && (
+              <>
+                <TextField
+                  value={from}
+                  label={config.regions[i].fromType === 'Fixed' || !config.regions[i]?.fromType ? 'From Value' : 'Previous Number of Days'}
+                  fieldName='from'
+                  updateField={(section, subsection, fieldName, value) => regionUpdate(fieldName, value, i)}
+                  tooltip={
+                    <Tooltip style={{ textTransform: 'none' }}>
+                      <Tooltip.Target>
+                        <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                      </Tooltip.Target>
+                      <Tooltip.Content>
+                        <p>The date needs to be in the original format of the data. Not the displayed format of the data.</p>
+                      </Tooltip.Content>
+                    </Tooltip>
+                  }
+                />
+              </>
+            )}
+
+            <Select
+              value={config.regions[i].toType ?? 'Fixed'}
+              label='Maximum Region Type'
+              initial={'Select'}
+              required={true}
+              onChange={e => {
+                if (e.target.value !== '' && e.target.value !== 'Select') {
+                  const newRegions = [...config.regions]
+                  newRegions[i].toType = e.target.value
+                  updateConfig({
+                    ...config,
+                    regions: newRegions
+                  })
+                }
+                e.target.value = ''
+              }}
+              options={toOptions}
+            />
+
+            {(config.regions[i].toType === 'Fixed' || !config.regions[i].toType) && <TextField value={to} label='To Value' fieldName='to' updateField={(section, subsection, fieldName, value) => regionUpdate(fieldName, value, i)} />}
+          </div>
+        ))}
+      {!config.regions && <p style={{ textAlign: 'center' }}>There are currently no regions.</p>}
+      <button
+        type='button'
+        className='btn full-width'
+        onClick={e => {
+          e.preventDefault()
+          addColumn()
+        }}
+      >
+        Add Region
+      </button>
+    </>
+  )
+})
+
+const RegionsPanel = ({ name }: PanelProps) => {
+  const { visSupportsRegions } = useEditorPermissions()
+  const { config, updateConfig } = useContext<ChartContext>(ConfigContext)
+
+  return visSupportsRegions() ? (
+    <AccordionItem>
+      <AccordionItemHeading>
+        <AccordionItemButton>{name}</AccordionItemButton>
+      </AccordionItemHeading>
+      <AccordionItemPanel>
+        <RegionSettings config={config} updateConfig={updateConfig} />
+      </AccordionItemPanel>
+    </AccordionItem>
+  ) : null
+}
+
+export default RegionsPanel

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

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react'
-import ConfigContext from '../ConfigContext'
+import ConfigContext from '../../../ConfigContext'
 
 // Core
 import InputSelect from '@cdc/core/components/inputs/InputSelect'

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

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

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

@@ -0,0 +1,13 @@
+import ForestPlotSettings from './Panel.ForestPlotSettings'
+import Series from './Panel.Series.jsx'
+import DateHighlighting from './Panel.DateHighlighting'
+import Regions from './Panel.Regions'
+
+const Panels = {
+  ForestPlot: ForestPlotSettings,
+  Series: Series,
+  DateHighlighting,
+  Regions
+}
+
+export default Panels