@cdc/waffle-chart 4.25.10 → 4.26.1

package/src/components/EditorPanel.jsx

@@ -1,81 +1,38 @@
-import React, { useState, useEffect, memo, useContext } from 'react'
-import cloneConfig from '@cdc/core/helpers/cloneConfig'
+import React, { useEffect, memo, useContext } from 'react'
 import _ from 'lodash'
-import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 
 import ConfigContext from '../ConfigContext'
 
+import { EditorPanel as BaseEditorPanel } from '@cdc/core/components/EditorPanel/EditorPanel'
+import AdvancedEditor from '@cdc/core/components/AdvancedEditor'
 import Accordion from '@cdc/core/components/ui/Accordion'
 import Button from '@cdc/core/components/elements/Button'
 import Icon from '@cdc/core/components/ui/Icon'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
-import InputText from '@cdc/core/components/inputs/InputText'
-import InputSelect from '@cdc/core/components/inputs/InputSelect'
-import InputCheckbox from '@cdc/core/components/inputs/InputCheckbox'
+import { TextField, Select, CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
 import { updateFieldFactory } from '@cdc/core/helpers/updateFieldFactory'
-import Layout from '@cdc/core/components/Layout'
+import { useFilterManagement } from '@cdc/core/hooks/useFilterManagement'
+import { useDataColumns } from '@cdc/core/hooks/useDataColumns'
+import { VisualSection } from '@cdc/core/components/EditorPanel/sections/VisualSection'
 
 import '@cdc/core/styles/v2/components/editor.scss'
 import WarningImage from '../images/warning.svg'
 
 import { DATA_OPERATORS, DATA_FUNCTIONS } from '../CdcWaffleChart'
 
-const headerColors = [
-  'theme-blue',
-  'theme-purple',
-  'theme-brown',
-  'theme-teal',
-  'theme-pink',
-  'theme-orange',
-  'theme-slate',
-  'theme-indigo',
-  'theme-cyan',
-  'theme-green',
-  'theme-amber'
-]
-
-const CheckBox = memo(
-  ({ label, value, fieldName, section = null, subsection = null, tooltip, updateField, ...attributes }) => (
-    <label className='checkbox'>
-      <input
-        type='checkbox'
-        name={fieldName}
-        checked={value}
-        onChange={() => {
-          updateField(section, subsection, fieldName, !value)
-        }}
-        {...attributes}
-      />
-      <span className='edit-label column-heading'>{label}</span>
-      <span className='cove-icon'>{tooltip}</span>
-    </label>
-  )
-)
-
 const EditorPanel = memo(props => {
   const { config, updateConfig, loading, data, setParentConfig, isDashboard } = useContext(ConfigContext)
   const { showConfigConfirm } = props
-  const [displayPanel, setDisplayPanel] = useState(true)
   const inputSelectStyle = condition => (condition ? { backgroundColor: '#ffd2d2', color: '#d8000c' } : {})
 
   const updateField = updateFieldFactory(config, updateConfig, true)
 
-  useEffect(() => {
-    // Pass up to Editor if needed
-    if (setParentConfig) {
-      const newConfig = convertStateToConfig()
-      setParentConfig(newConfig)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [config])
-
-  useEffect(() => {
-    if (!showConfigConfirm) {
-      let newConfig = { ...config }
-      delete newConfig.newViz
-      updateConfig(newConfig)
-    }
-  }, [])
+  // Filters
+  const { addNewFilter, removeFilter, updateFilterProp, getFilterColumnValues } = useFilterManagement(
+    config,
+    updateConfig,
+    data
+  )
 
   useEffect(() => {
     //Verify comparate data type
@@ -93,111 +50,44 @@ const EditorPanel = memo(props => {
     }
   }, [config.dataConditionalOperator, config.dataConditionalComparate])
 
-  const onBackClick = () => {
-    setDisplayPanel(!displayPanel)
-    updateConfig({
-      ...config,
-      showEditorPanel: !displayPanel
-    })
-
-    // if (isDashboard) {
-    //   updateConfig({ ...config, editing: false })
-    // } else {
-    //   setDisplayPanel(!displayPanel)
-    // }
-  }
-
-  const convertStateToConfig = () => {
-    let strippedState = cloneConfig(config)
-    delete strippedState.newViz
-    delete strippedState.runtime
-
-    return strippedState
-  }
-
-  const addNewFilter = () => {
-    let filters = config.filters ? [...config.filters] : []
-    filters.push({ values: [] })
-    updateConfig({ ...config, filters })
-  }
-
-  const removeFilter = index => {
-    let filters = [...config.filters]
-    filters.splice(index, 1)
-    updateConfig({ ...config, filters })
-  }
-
-  const updateFilterProp = (name, index, value) => {
-    let filters = [...config.filters]
-    filters[index][name] = value
-    updateConfig({ ...config, filters })
-  }
-
-  const getColumns = (filter = true) => {
-    let columns = {}
-
-    data.map(row => Object.keys(row).forEach(columnName => (columns[columnName] = true)))
-
-    return Object.keys(columns)
-  }
-
-  const getFilterColumnValues = index => {
-    let filterDataOptions = []
-    const filterColumnName = config.filters[index].columnName
-    if (data && filterColumnName) {
-      data.forEach(function (row) {
-        if (undefined !== row[filterColumnName] && -1 === filterDataOptions.indexOf(row[filterColumnName])) {
-          filterDataOptions.push(row[filterColumnName])
-        }
-      })
-      filterDataOptions.sort()
-    }
-    return filterDataOptions
-  }
+  // Extract column names from data with memoization (replaces getColumns)
+  const columns = useDataColumns(data)
   //visualizationType
 
-  const approvedWaffleChartOptions = ['Waffle', 'Gauge']
+  const approvedWaffleChartOptions = [
+    { value: 'Waffle', label: 'Waffle' },
+    { value: 'TP5 Waffle', label: 'TP5 Style Waffle' },
+    { value: 'Gauge', label: 'Gauge' }
+  ]
 
   const editorContent = (
     <Accordion>
       <Accordion.Section title='General'>
-        <div className='cove-accordion__panel-section'>
-          <div style={{ width: '100%', display: 'block' }} className='cove-input-group'>
-            <InputSelect
-              value={config.visualizationType}
-              fieldName='visualizationType'
-              label='Chart Type'
-              updateField={updateField}
-              options={approvedWaffleChartOptions}
-              className='cove-input'
-            />
-            {config.visualizationType === 'Gauge' && (
-              <InputSelect
-                value={config.visualizationSubType}
-                fieldName='visualizationSubType'
-                label='Chart Subtype'
-                updateField={updateField}
-                options={['Linear']}
-                className='cove-input'
-              />
-            )}
-          </div>
-        </div>
-        <InputText
+        <Select
+          value={config.visualizationType}
+          fieldName='visualizationType'
+          label='Chart Type'
+          updateField={updateField}
+          options={approvedWaffleChartOptions}
+        />
+        {config.visualizationType === 'Gauge' && (
+          <Select
+            value={config.visualizationSubType}
+            fieldName='visualizationSubType'
+            label='Chart Subtype'
+            updateField={updateField}
+            options={['Linear']}
+          />
+        )}
+        <TextField
           value={config.title}
           fieldName='title'
           label='Title'
           placeholder='Chart Title'
           updateField={updateField}
         />
-        <InputCheckbox
-          size='small'
-          label='show title'
-          value={config.showTitle}
-          fieldName='showTitle'
-          updateField={updateField}
-        />
-        <InputText
+        <CheckBox label='show title' value={config.showTitle} fieldName='showTitle' updateField={updateField} />
+        <TextField
           type='textarea'
           value={config.content}
           fieldName='content'
@@ -218,7 +108,7 @@ const EditorPanel = memo(props => {
           }
         />
 
-        <InputText
+        <TextField
           value={config.subtext}
           fieldName='subtext'
           label='Subtext/Citation'
@@ -247,20 +137,19 @@ const EditorPanel = memo(props => {
         <h4 style={{ fontWeight: '600' }}>Numerator</h4>
         <div className='cove-accordion__panel-section'>
           <div className='cove-input-group'>
-            <InputSelect
+            <Select
               style={inputSelectStyle(!config.dataColumn)}
               value={config.dataColumn || ''}
               fieldName='dataColumn'
               label='Data Column'
               updateField={updateField}
               initial='Select'
-              options={getColumns()}
-              className='cove-input'
+              options={columns}
             />
           </div>
 
           <div className='cove-input-group'>
-            <InputSelect
+            <Select
               style={inputSelectStyle(!config.dataFunction)}
               value={config.dataFunction || ''}
               fieldName='dataFunction'
@@ -268,7 +157,6 @@ const EditorPanel = memo(props => {
               updateField={updateField}
               initial='Select'
               options={DATA_FUNCTIONS}
-              className='cove-input'
             />
           </div>
 
@@ -278,27 +166,25 @@ const EditorPanel = memo(props => {
             </label>
             <div className='cove-accordion__panel-row cove-accordion__small-inputs'>
               <div className='cove-accordion__panel-col'>
-                <InputSelect
+                <Select
                   value={config.dataConditionalColumn || ''}
                   fieldName='dataConditionalColumn'
                   updateField={updateField}
                   initial='Select'
-                  options={getColumns()}
-                  className='cove-input'
+                  options={columns}
                 />
               </div>
               <div className='cove-accordion__panel-col'>
-                <InputSelect
+                <Select
                   value={config.dataConditionalOperator || ''}
                   fieldName='dataConditionalOperator'
                   updateField={updateField}
                   initial='Select'
                   options={DATA_OPERATORS}
-                  className='cove-input'
                 />
               </div>
               <div className='cove-accordion__panel-col'>
-                <InputText
+                <TextField
                   value={config.dataConditionalComparate}
                   fieldName={'dataConditionalComparate'}
                   updateField={updateField}
@@ -322,12 +208,7 @@ const EditorPanel = memo(props => {
           <div className='cove-accordion__panel-col'>
             <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
               <label className='cove-accordion__panel-label--inline'>Select from data</label>
-              <InputCheckbox
-                size='small'
-                value={config.customDenom}
-                fieldName='customDenom'
-                updateField={updateField}
-              />
+              <CheckBox value={config.customDenom} fieldName='customDenom' updateField={updateField} />
             </div>
           </div>
         </div>
@@ -335,7 +216,7 @@ const EditorPanel = memo(props => {
           {!config.customDenom && (
             <div className='cove-accordion__panel-row align-center'>
               <div className='cove-accordion__panel-col'>
-                <InputText value={config.dataDenom} fieldName='dataDenom' updateField={updateField} />
+                <TextField value={config.dataDenom} fieldName='dataDenom' updateField={updateField} />
               </div>
               <div className='cove-accordion__panel-col' style={{ display: 'flex', alignItems: 'center' }}>
                 <label className='cove-accordion__panel-label--muted'>default (100)</label>
@@ -344,15 +225,15 @@ const EditorPanel = memo(props => {
           )}
           {config.customDenom && (
             <>
-              <InputSelect
+              <Select
                 value={config.dataDenomColumn || ''}
                 fieldName='dataDenomColumn'
                 label='Data Column'
                 updateField={updateField}
                 initial='Select'
-                options={getColumns()}
+                options={columns}
               />
-              <InputSelect
+              <Select
                 value={config.dataDenomFunction || ''}
                 fieldName='dataDenomFunction'
                 label='Data Function'
@@ -366,13 +247,13 @@ const EditorPanel = memo(props => {
         <ul className='column-edit'>
           <li className='three-col'>
             <div style={{ marginRight: '1rem' }}>
-              <InputText value={config.prefix} fieldName='prefix' label='Prefix' updateField={updateField} />
+              <TextField value={config.prefix} fieldName='prefix' label='Prefix' updateField={updateField} />
             </div>
             <div style={{ marginRight: '1rem' }}>
-              <InputText value={config.suffix} fieldName='suffix' label='Suffix' updateField={updateField} />
+              <TextField value={config.suffix} fieldName='suffix' label='Suffix' updateField={updateField} />
             </div>
             <div>
-              <InputText
+              <TextField
                 type='number'
                 value={config.roundToPlace}
                 fieldName='roundToPlace'
@@ -386,25 +267,19 @@ const EditorPanel = memo(props => {
           <>
             <hr className='cove-accordion__divider' />
             <div className='cove-accordion__panel-section reverse-labels'>
-              <InputText
-                inline
-                size='small'
+              <TextField
                 value={config.valueDescription}
                 label='Value Descriptor'
                 fieldName='valueDescription'
                 updateField={updateField}
               />
-              <InputCheckbox
-                inline
-                size='small'
+              <CheckBox
                 value={config.showPercent}
                 label='Show Percentage'
                 fieldName='showPercent'
                 updateField={updateField}
               />
-              <InputCheckbox
-                inline
-                size='small'
+              <CheckBox
                 label='Show Denominator'
                 value={config.showDenominator}
                 fieldName='showDenominator'
@@ -414,18 +289,20 @@ const EditorPanel = memo(props => {
           </>
         )}
         <label style={{ marginBottom: '1rem' }}>
-          <span className='edit-label'>Data Point Filters</span>
-          <Tooltip style={{ textTransform: 'none' }}>
-            <Tooltip.Target>
-              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-            </Tooltip.Target>
-            <Tooltip.Content>
-              <p>
-                To refine the highlighted data point, specify one or more filters (e.g., "Male" and "Female" for a
-                column called "Sex").
-              </p>
-            </Tooltip.Content>
-          </Tooltip>
+          <span className='edit-label'>
+            Data Point Filters
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>
+                  To refine the highlighted data point, specify one or more filters (e.g., "Male" and "Female" for a
+                  column called "Sex").
+                </p>
+              </Tooltip.Content>
+            </Tooltip>
+          </span>
         </label>
 
         {config.filters && (
@@ -441,38 +318,24 @@ const EditorPanel = memo(props => {
                 >
                   Remove
                 </button>
-                <label>
-                  <span className='edit-label column-heading'>Column</span>
-                  <select
-                    value={filter.columnName}
-                    onChange={e => {
-                      updateFilterProp('columnName', index, e.target.value)
-                    }}
-                  >
-                    <option value=''>- Select Option -</option>
-                    {getColumns().map((dataKey, index) => (
-                      <option value={dataKey} key={index}>
-                        {dataKey}
-                      </option>
-                    ))}
-                  </select>
-                </label>
-                <label>
-                  <span className='edit-label column-heading'>Column Value</span>
-                  <select
-                    value={filter.columnValue}
-                    onChange={e => {
-                      updateFilterProp('columnValue', index, e.target.value)
-                    }}
-                  >
-                    <option value=''>- Select Option -</option>
-                    {getFilterColumnValues(index).map((dataKey, index) => (
-                      <option value={dataKey} key={index}>
-                        {dataKey}
-                      </option>
-                    ))}
-                  </select>
-                </label>
+                <Select
+                  label='Column'
+                  value={filter.columnName || ''}
+                  options={columns}
+                  initial='- Select Option -'
+                  onChange={e => {
+                    updateFilterProp('columnName', index, e.target.value)
+                  }}
+                />
+                <Select
+                  label='Column Value'
+                  value={filter.columnValue || ''}
+                  options={getFilterColumnValues(index)}
+                  initial='- Select Option -'
+                  onChange={e => {
+                    updateFilterProp('columnValue', index, e.target.value)
+                  }}
+                />
               </fieldset>
             ))}
           </ul>
@@ -481,160 +344,120 @@ const EditorPanel = memo(props => {
           Add Filter
         </Button>
       </Accordion.Section>
-      <Accordion.Section title='Visual'>
+      <Accordion.Section title='Chart Settings'>
         {config.visualizationType !== 'Gauge' && (
-          <InputSelect
+          <Select
             value={config.shape}
             fieldName='shape'
             label='Shape'
             updateField={updateField}
             options={['circle', 'square', 'person']}
-            className='cove-input'
           />
         )}
-        {config.visualizationType !== 'Gauge' && (
-          <div
-            className='cove-accordion__panel-row cove-accordion__small-inputs'
-            style={{ marginTop: '1rem', marginBottom: '1rem' }}
-          >
-            <div className='cove-accordion__panel-col'>
-              <InputText
-                type='number'
-                value={config.nodeWidth}
-                fieldName='nodeWidth'
-                label='Width'
-                updateField={updateField}
-              />
+        {config.visualizationType !== 'Gauge' && config.visualizationType !== 'TP5 Waffle' && (
+          <>
+            <div
+              className='cove-accordion__panel-row cove-accordion__small-inputs'
+              style={{ marginTop: '1rem', marginBottom: '1rem' }}
+            >
+              <div className='cove-accordion__panel-col'>
+                <TextField
+                  type='number'
+                  value={config.nodeWidth}
+                  fieldName='nodeWidth'
+                  label='Width'
+                  updateField={updateField}
+                />
+              </div>
+              <div className='cove-accordion__panel-col'>
+                <TextField
+                  type='number'
+                  value={config.nodeSpacer}
+                  fieldName='nodeSpacer'
+                  label='Spacer'
+                  updateField={updateField}
+                />
+              </div>
             </div>
-            <div className='cove-accordion__panel-col'>
-              <InputText
-                type='number'
-                value={config.nodeSpacer}
-                fieldName='nodeSpacer'
-                label='Spacer'
+
+            <div className='cove-input-group'>
+              <Select
+                value={config.orientation}
+                fieldName='orientation'
+                label='Layout'
                 updateField={updateField}
+                options={['horizontal', 'vertical']}
               />
             </div>
-          </div>
-        )}
 
-        <div className='cove-input-group'>
-          {config.visualizationType !== 'Gauge' && (
-            <InputSelect
-              value={config.orientation}
-              fieldName='orientation'
-              label='Layout'
-              updateField={updateField}
-              className='cove-input'
-              options={['horizontal', 'vertical']}
-            />
-          )}
-        </div>
-
-        <div className='cove-input-group'>
-          <label>
-            <span className='edit-label column-heading cove-input__label'>Data Point Font Size</span>
-          </label>
-          <div className='cove-accordion__panel-row cove-accordion__small-inputs align-center'>
-            <div className='cove-accordion__panel-col'>
-              <InputText type='number' value={config.fontSize} fieldName='fontSize' updateField={updateField} />
-            </div>
-            <div className='cove-accordion__panel-col' style={{ display: 'flex', alignItems: 'center' }}>
-              <label className='accordion__panel-label--muted'> default (50px)</label>
+            <div className='cove-input-group'>
+              <label>
+                <span className='edit-label column-heading cove-input__label'>Data Point Font Size</span>
+              </label>
+              <div className='cove-accordion__panel-row cove-accordion__small-inputs align-center'>
+                <div className='cove-accordion__panel-col'>
+                  <TextField type='number' value={config.fontSize} fieldName='fontSize' updateField={updateField} />
+                </div>
+                <div className='cove-accordion__panel-col' style={{ display: 'flex', alignItems: 'center' }}>
+                  <label className='accordion__panel-label--muted'> default (50px)</label>
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-
-        <InputSelect
-          value={config.overallFontSize}
-          fieldName='overallFontSize'
-          label='Overall Font Size'
-          updateField={updateField}
-          options={['small', 'medium', 'large']}
-          className='cove-input'
-        />
-
-        <label>
-          <span className='edit-label cove-input__label'>Theme</span>
-          <ul className='color-palette'>
-            {headerColors.map(palette => (
-              <li
-                title={palette}
-                key={palette}
-                onClick={() => {
-                  updateConfig({ ...config, theme: palette })
-                }}
-                className={config.theme === palette ? 'selected ' + palette : palette}
-              ></li>
-            ))}
-          </ul>
-        </label>
+          </>
+        )}
+      </Accordion.Section>
 
-        <div className='cove-accordion__panel-section reverse-labels'>
-          <InputCheckbox
-            inline
-            size='small'
-            value={config.visual.border}
+      {/* Visual section for TP5 style */}
+      {config.visualizationType === 'TP5 Waffle' && (
+        <Accordion.Section title='Visual'>
+          <CheckBox
+            value={config.visual?.whiteBackground}
             section='visual'
-            fieldName='border'
-            label='Display Border'
+            fieldName='whiteBackground'
+            label='Use White Background Style'
             updateField={updateField}
           />
-          <InputCheckbox
-            inline
-            size='small'
-            value={config.visual.borderColorTheme}
-            section='visual'
-            fieldName='borderColorTheme'
-            label='Use theme border color'
-            updateField={updateField}
-          />
-          <InputCheckbox
-            size='small'
-            value={config.visual.accent}
-            section='visual'
-            fieldName='accent'
-            label='Use Accent Style'
-            updateField={updateField}
-          />
-          <InputCheckbox
-            size='small'
-            value={config.visual.background}
-            section='visual'
-            fieldName='background'
-            label='Use Theme Background Color'
-            updateField={updateField}
-          />
-          <InputCheckbox
-            size='small'
-            value={config.visual.hideBackgroundColor}
-            section='visual'
-            fieldName='hideBackgroundColor'
-            label='Hide Background Color'
+        </Accordion.Section>
+      )}
+
+      {/* Visual section for other styles */}
+      {config.visualizationType !== 'TP5 Waffle' && (
+        <Accordion.Section title='Visual'>
+          <VisualSection
+            config={config}
             updateField={updateField}
+            updateConfig={updateConfig}
+            beforeCheckboxes={
+              <Select
+                value={config.overallFontSize}
+                fieldName='overallFontSize'
+                label='Overall Font Size'
+                updateField={updateField}
+                options={['small', 'medium', 'large']}
+              />
+            }
           />
-        </div>
-      </Accordion.Section>
+        </Accordion.Section>
+      )}
     </Accordion>
   )
 
-  if (loading) return null
-
   return (
-    <ErrorBoundary component='EditorPanel'>
-      <>
-        <Layout.Sidebar
-          displayPanel={displayPanel}
-          onBackClick={onBackClick}
-          isDashboard={isDashboard}
-          title='Configure Waffle Chart'
-          showEditorPanel={displayPanel}
-        >
+    <BaseEditorPanel
+      config={config}
+      updateConfig={updateConfig}
+      loading={loading}
+      setParentConfig={setParentConfig}
+      isDashboard={isDashboard}
+      title='Configure Waffle Chart'
+    >
+      {({ convertStateToConfig }) => (
+        <>
           {editorContent}
-        </Layout.Sidebar>
-        {props.children}
-      </>
-    </ErrorBoundary>
+          <AdvancedEditor loadConfig={updateConfig} config={config} convertStateToConfig={convertStateToConfig} />
+        </>
+      )}
+    </BaseEditorPanel>
   )
 })