@cdc/waffle-chart 4.25.10 → 4.25.11

package/src/components/EditorPanel.jsx

@@ -5,53 +5,21 @@ import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 
 import ConfigContext from '../ConfigContext'
 
+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 { HeaderThemeSelector } from '@cdc/core/components/HeaderThemeSelector'
 
 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
@@ -161,43 +129,31 @@ const EditorPanel = memo(props => {
   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 +174,7 @@ const EditorPanel = memo(props => {
           }
         />
 
-        <InputText
+        <TextField
           value={config.subtext}
           fieldName='subtext'
           label='Subtext/Citation'
@@ -247,7 +203,7 @@ 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'
@@ -255,12 +211,11 @@ const EditorPanel = memo(props => {
               updateField={updateField}
               initial='Select'
               options={getColumns()}
-              className='cove-input'
             />
           </div>
 
           <div className='cove-input-group'>
-            <InputSelect
+            <Select
               style={inputSelectStyle(!config.dataFunction)}
               value={config.dataFunction || ''}
               fieldName='dataFunction'
@@ -268,7 +223,6 @@ const EditorPanel = memo(props => {
               updateField={updateField}
               initial='Select'
               options={DATA_FUNCTIONS}
-              className='cove-input'
             />
           </div>
 
@@ -278,27 +232,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'
                 />
               </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 +274,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 +282,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,7 +291,7 @@ const EditorPanel = memo(props => {
           )}
           {config.customDenom && (
             <>
-              <InputSelect
+              <Select
                 value={config.dataDenomColumn || ''}
                 fieldName='dataDenomColumn'
                 label='Data Column'
@@ -352,7 +299,7 @@ const EditorPanel = memo(props => {
                 initial='Select'
                 options={getColumns()}
               />
-              <InputSelect
+              <Select
                 value={config.dataDenomFunction || ''}
                 fieldName='dataDenomFunction'
                 label='Data Function'
@@ -366,13 +313,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 +333,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 +355,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 +384,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={getColumns()}
+                  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,15 +410,14 @@ const EditorPanel = memo(props => {
           Add Filter
         </Button>
       </Accordion.Section>
-      <Accordion.Section title='Visual'>
+      <Accordion.Section title='Visual' className='panel-visual'>
         {config.visualizationType !== 'Gauge' && (
-          <InputSelect
+          <Select
             value={config.shape}
             fieldName='shape'
             label='Shape'
             updateField={updateField}
             options={['circle', 'square', 'person']}
-            className='cove-input'
           />
         )}
         {config.visualizationType !== 'Gauge' && (
@@ -498,7 +426,7 @@ const EditorPanel = memo(props => {
             style={{ marginTop: '1rem', marginBottom: '1rem' }}
           >
             <div className='cove-accordion__panel-col'>
-              <InputText
+              <TextField
                 type='number'
                 value={config.nodeWidth}
                 fieldName='nodeWidth'
@@ -507,7 +435,7 @@ const EditorPanel = memo(props => {
               />
             </div>
             <div className='cove-accordion__panel-col'>
-              <InputText
+              <TextField
                 type='number'
                 value={config.nodeSpacer}
                 fieldName='nodeSpacer'
@@ -520,12 +448,11 @@ const EditorPanel = memo(props => {
 
         <div className='cove-input-group'>
           {config.visualizationType !== 'Gauge' && (
-            <InputSelect
+            <Select
               value={config.orientation}
               fieldName='orientation'
               label='Layout'
               updateField={updateField}
-              className='cove-input'
               options={['horizontal', 'vertical']}
             />
           )}
@@ -537,7 +464,7 @@ const EditorPanel = memo(props => {
           </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} />
+              <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>
@@ -545,68 +472,50 @@ const EditorPanel = memo(props => {
           </div>
         </div>
 
-        <InputSelect
+        <Select
           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>
+        <HeaderThemeSelector
+          selectedTheme={config.theme}
+          onThemeSelect={theme => updateConfig({ ...config, theme })}
+          label='Theme'
+        />
 
         <div className='cove-accordion__panel-section reverse-labels'>
-          <InputCheckbox
-            inline
-            size='small'
+          <CheckBox
             value={config.visual.border}
             section='visual'
             fieldName='border'
             label='Display Border'
             updateField={updateField}
           />
-          <InputCheckbox
-            inline
-            size='small'
+          <CheckBox
             value={config.visual.borderColorTheme}
             section='visual'
             fieldName='borderColorTheme'
             label='Use theme border color'
             updateField={updateField}
           />
-          <InputCheckbox
-            size='small'
+          <CheckBox
             value={config.visual.accent}
             section='visual'
             fieldName='accent'
             label='Use Accent Style'
             updateField={updateField}
           />
-          <InputCheckbox
-            size='small'
+          <CheckBox
             value={config.visual.background}
             section='visual'
             fieldName='background'
             label='Use Theme Background Color'
             updateField={updateField}
           />
-          <InputCheckbox
-            size='small'
+          <CheckBox
             value={config.visual.hideBackgroundColor}
             section='visual'
             fieldName='hideBackgroundColor'
@@ -630,7 +539,10 @@ const EditorPanel = memo(props => {
           title='Configure Waffle Chart'
           showEditorPanel={displayPanel}
         >
-          {editorContent}
+          <>
+            {editorContent}
+            <AdvancedEditor loadConfig={updateConfig} config={config} convertStateToConfig={convertStateToConfig} />
+          </>
         </Layout.Sidebar>
         {props.children}
       </>

package/src/scss/main.scss

@@ -1,17 +1,7 @@
+@import '@cdc/core/styles/accessibility';
 @import 'waffle-chart';
 
 .cdc-open-viz-module.type-waffle-chart {
-  .loader {
-    width: 100%;
-    text-align: center;
-    display: inline-block;
-    animation: spin 1s linear infinite;
-
-    &::before {
-      content: '\21BB';
-    }
-  }
-
   .cove-component__content:not(.component--has-background, .component--hideBackgroundColor) {
     background-color: white;
   }
@@ -23,4 +13,4 @@
   &.is-editor .cove-editor__content .cove-component {
     padding-left: 0px;
   }
-}
+}

package/src/scss/waffle-chart.scss

@@ -1,32 +1,13 @@
-@mixin set-theme($property, $color) {
-  @if $property == 'background-color' {
-    background-color: $color;
-  } @else if $property == 'border-color' {
-    border-color: $color;
-  } @else if $property == 'color' {
-    color: $color;
-  }
-}
+// Remove custom theme mixin - use core styles instead
 
-.warning-icon {
-  position: absolute;
-  top: 50%;
-  left: 20%;
-  transform: translate(-50%, -50%);
-  color: red;
-}
 
 .type-dashboard .type-waffle-chart .cove-component__content {
   padding-top: 0;
 }
 
-.cove {
-  &-editor__panel {
-    ul.color-palette {
-      margin: 0;
-    }
-  }
+// Let core styles handle color palette
 
+.cove {
   .cove-gauge-chart {
     &__chart {
       width: 85%;
@@ -38,7 +19,7 @@
       justify-items: center;
       align-items: flex-start;
 
-      & > svg {
+      &>svg {
         margin: 0.7em 0;
       }
     }
@@ -47,6 +28,7 @@
       font-style: italic;
       font-size: 0.9em !important;
     }
+
     &__text {
       line-height: 1.25em;
       font-weight: 400;
@@ -115,11 +97,13 @@
 }
 
 @at-root {
+
   .cove-waffle-chart.font-small,
   .cove-gauge-chart.font-small #{&} {
     .cove-waffle-chart__data--primary {
       font-size: 35px;
     }
+
     .cove-waffle-chart__data--text {
       font-size: 14px;
     }
@@ -130,6 +114,7 @@
     .cove-waffle-chart__data--primary {
       font-size: 50px;
     }
+
     .cove-waffle-chart__data--text {
       font-size: 18px;
     }
@@ -140,8 +125,9 @@
     .cove-waffle-chart__data--primary {
       font-size: 80px;
     }
+
     .cove-waffle-chart__data--text {
       font-size: 20px;
     }
   }
-}
+}

package/src/store/chart.reducer.ts

@@ -1,7 +1,7 @@
 import { Config } from '../types/Config'
 import ChartActions from './chart.actions'
 
-export type ChartState = {
+type ChartState = {
   config?: Config
   container: any
   coveLoadedHasRan: boolean