@cdc/chart 4.23.10 → 4.24.1

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'
@@ -16,7 +16,7 @@ import { colorPalettesChart, sequentialPalettes } from '@cdc/core/data/colorPale
 const SeriesContext = React.createContext()
 
 const SeriesWrapper = props => {
-  const { updateConfig, config } = useContext(ConfigContext)
+  const { updateConfig, config, rawData } = useContext(ConfigContext)
 
   const { getColumns, selectComponent } = props
 
@@ -26,6 +26,26 @@ const SeriesWrapper = props => {
     let series = [...config.series]
     series[index][property] = value
 
+    // Reset bars to the left axis if changed.
+    if (property === 'type') {
+      if (value === 'Bar') {
+        series[index].axis = 'Left'
+      }
+    }
+
+    // dynamically add in the forecasting fields
+    if (series[index].type === 'Forecasting') {
+      let forecastingStages = Array.from(new Set(rawData.map(item => item[series[index].dataKey])))
+      let forecastingStageArr = []
+
+      forecastingStages.forEach(stage => {
+        forecastingStageArr.push({ key: stage })
+      })
+      // debugger
+      series[index].stages = forecastingStageArr
+      series[index].stageColumn = series[index].dataKey
+    }
+
     updateConfig({ ...config, series })
   }
 
@@ -124,7 +144,6 @@ const SeriesDropdownForecastingStage = props => {
   const { index, series } = props
 
   // Only combo charts are allowed to have different options
-  if (series.type !== 'Forecasting') return
 
   return (
     <InputSelect
@@ -408,7 +427,7 @@ const SeriesDropdownConfidenceInterval = props => {
 const SeriesInputName = props => {
   const { series, index: i } = props
   const { config, updateConfig } = useContext(ConfigContext)
-  const adjustableNameSeriesTypes = ['Bar', 'Line', 'Area Chart']
+  const adjustableNameSeriesTypes = ['Bar', 'Line', 'Area Chart', 'dashed-sm', 'dashed-md', 'dashed-lg']
 
   if (config.visualizationType === 'Combo') return
 

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

package/src/components/EditorPanel/components/panels.scss

@@ -0,0 +1,72 @@
+@import '@cdc/core/styles/v2/themes/color-definitions';
+
+.date-highlight {
+  select,
+  input {
+    background: $lightestGray;
+  }
+
+  &__day-selection {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    padding: 20px 0;
+
+    .week-button {
+      margin-bottom: 0;
+      border-radius: 50%;
+      color: $darkGray;
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: $lightestGray;
+      margin: 5px 2px 0;
+
+      &--active {
+        background: $primary;
+        color: white;
+      }
+    }
+  }
+
+  &__occurance {
+    display: flex;
+
+    input[type='number']::-webkit-inner-spin-button,
+    input[type='number']::-webkit-outer-spin-button {
+      opacity: 1;
+    }
+
+    input[type='number'] {
+      margin: 0 10px;
+      min-width: 50px;
+      width: 50px;
+      max-width: 50px;
+    }
+  }
+
+  .radio-group {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .group {
+      display: flex;
+    }
+
+    input[type='number'] {
+      margin: 0 10px;
+      min-width: 50px;
+      width: 50px;
+      max-width: 50px;
+    }
+
+    // reset spacing
+    input,
+    label {
+      margin-top: 0 !important;
+    }
+  }
+}