@cdc/waffle-chart 4.25.2-25 → 4.25.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/waffle-chart",
-  "version": "4.25.2-25",
+  "version": "4.25.3",
   "description": "React component for displaying a single piece of data in a card module",
   "moduleName": "CdcWaffleChart",
   "main": "dist/cdcwafflechart",
@@ -27,7 +27,7 @@
   "license": "Apache-2.0",
   "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
   "dependencies": {
-    "@cdc/core": "^4.25.2-25",
+    "@cdc/core": "^4.25.3",
     "@visx/group": "^3.0.0",
     "@visx/scale": "^3.0.0",
     "@visx/shape": "^3.0.0",
@@ -42,5 +42,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "f00bd8a0fc746def7cc23b91ef49a03a3ceac65e"
+  "gitHead": "b09566f5a7d57c8d0109e5f407257729d6b36846"
 }

package/src/components/EditorPanel.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, memo, useContext } from 'react'
 
+import _ from 'lodash'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 
 import ConfigContext from '../ConfigContext'
@@ -19,23 +20,37 @@ 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 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)
@@ -93,7 +108,7 @@ const EditorPanel = memo(props => {
   }
 
   const convertStateToConfig = () => {
-    let strippedState = JSON.parse(JSON.stringify(config))
+    let strippedState = _.cloneDeep(config)
     delete strippedState.newViz
     delete strippedState.runtime
 
@@ -148,11 +163,33 @@ const EditorPanel = memo(props => {
       <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' />}
+            <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 value={config.title} fieldName='title' label='Title' placeholder='Chart Title' updateField={updateField} />
+        <InputText
+          value={config.title}
+          fieldName='title'
+          label='Title'
+          placeholder='Chart Title'
+          updateField={updateField}
+        />
         <InputText
           type='textarea'
           value={config.content}
@@ -165,7 +202,10 @@ const EditorPanel = memo(props => {
                 <Icon display='question' style={{ marginLeft: '0.5rem' }} />
               </Tooltip.Target>
               <Tooltip.Content>
-                <p>Enter the message text for the visualization. The following HTML tags are supported: strong, em, sup, and sub.</p>
+                <p>
+                  Enter the message text for the visualization. The following HTML tags are supported: strong, em, sup,
+                  and sub.
+                </p>
               </Tooltip.Content>
             </Tooltip>
           }
@@ -183,22 +223,46 @@ const EditorPanel = memo(props => {
                 <Icon display='question' style={{ marginLeft: '0.5rem' }} />
               </Tooltip.Target>
               <Tooltip.Content>
-                <p>Enter supporting text to display below the data visualization, if applicable. The following HTML tags are supported: strong, em, sup, and sub.</p>
+                <p>
+                  Enter supporting text to display below the data visualization, if applicable. The following HTML tags
+                  are supported: strong, em, sup, and sub.
+                </p>
               </Tooltip.Content>
             </Tooltip>
           }
         />
       </Accordion.Section>
 
-      <Accordion.Section icon={!config.dataColumn || !config.dataFunction ? <WarningImage width='15' className='warning-icon' /> : ''} title='Data'>
+      <Accordion.Section
+        icon={!config.dataColumn || !config.dataFunction ? <WarningImage width='15' className='warning-icon' /> : ''}
+        title='Data'
+      >
         <h4 style={{ fontWeight: '600' }}>Numerator</h4>
         <div className='cove-accordion__panel-section'>
           <div className='cove-input-group'>
-            <InputSelect style={inputSelectStyle(!config.dataColumn)} value={config.dataColumn || ''} fieldName='dataColumn' label='Data Column' updateField={updateField} initial='Select' options={getColumns()} className='cove-input' />
+            <InputSelect
+              style={inputSelectStyle(!config.dataColumn)}
+              value={config.dataColumn || ''}
+              fieldName='dataColumn'
+              label='Data Column'
+              updateField={updateField}
+              initial='Select'
+              options={getColumns()}
+              className='cove-input'
+            />
           </div>
 
           <div className='cove-input-group'>
-            <InputSelect style={inputSelectStyle(!config.dataFunction)} value={config.dataFunction || ''} fieldName='dataFunction' label='Data Function' updateField={updateField} initial='Select' options={DATA_FUNCTIONS} className='cove-input' />
+            <InputSelect
+              style={inputSelectStyle(!config.dataFunction)}
+              value={config.dataFunction || ''}
+              fieldName='dataFunction'
+              label='Data Function'
+              updateField={updateField}
+              initial='Select'
+              options={DATA_FUNCTIONS}
+              className='cove-input'
+            />
           </div>
 
           <div className='cove-input-group'>
@@ -207,18 +271,42 @@ const EditorPanel = memo(props => {
             </label>
             <div className='cove-accordion__panel-row cove-accordion__small-inputs'>
               <div className='cove-accordion__panel-col'>
-                <InputSelect value={config.dataConditionalColumn || ''} fieldName='dataConditionalColumn' updateField={updateField} initial='Select' options={getColumns()} className='cove-input' />
+                <InputSelect
+                  value={config.dataConditionalColumn || ''}
+                  fieldName='dataConditionalColumn'
+                  updateField={updateField}
+                  initial='Select'
+                  options={getColumns()}
+                  className='cove-input'
+                />
               </div>
               <div className='cove-accordion__panel-col'>
-                <InputSelect value={config.dataConditionalOperator || ''} fieldName='dataConditionalOperator' updateField={updateField} initial='Select' options={DATA_OPERATORS} className='cove-input' />
+                <InputSelect
+                  value={config.dataConditionalOperator || ''}
+                  fieldName='dataConditionalOperator'
+                  updateField={updateField}
+                  initial='Select'
+                  options={DATA_OPERATORS}
+                  className='cove-input'
+                />
               </div>
               <div className='cove-accordion__panel-col'>
-                <InputText value={config.dataConditionalComparate} fieldName={'dataConditionalComparate'} updateField={updateField} className={config.invalidComparate ? 'cove-accordion__input-error' : ''} style={{ minHeight: '2rem' }} />
+                <InputText
+                  value={config.dataConditionalComparate}
+                  fieldName={'dataConditionalComparate'}
+                  updateField={updateField}
+                  className={config.invalidComparate ? 'cove-accordion__input-error' : ''}
+                  style={{ minHeight: '2rem' }}
+                />
               </div>
             </div>
           </div>
 
-          {config.invalidComparate && <div className='cove-accordion__panel-error'>Non-numerical comparate values can only be used with = or ≠.</div>}
+          {config.invalidComparate && (
+            <div className='cove-accordion__panel-error'>
+              Non-numerical comparate values can only be used with = or ≠.
+            </div>
+          )}
         </div>
         <div className='cove-accordion__panel-row align-center'>
           <div className='cove-accordion__panel-col'>
@@ -227,7 +315,12 @@ 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} />
+              <InputCheckbox
+                size='small'
+                value={config.customDenom}
+                fieldName='customDenom'
+                updateField={updateField}
+              />
             </div>
           </div>
         </div>
@@ -244,8 +337,22 @@ const EditorPanel = memo(props => {
           )}
           {config.customDenom && (
             <>
-              <InputSelect value={config.dataDenomColumn || ''} fieldName='dataDenomColumn' label='Data Column' updateField={updateField} initial='Select' options={getColumns()} />
-              <InputSelect value={config.dataDenomFunction || ''} fieldName='dataDenomFunction' label='Data Function' updateField={updateField} initial='Select' options={DATA_FUNCTIONS} />
+              <InputSelect
+                value={config.dataDenomColumn || ''}
+                fieldName='dataDenomColumn'
+                label='Data Column'
+                updateField={updateField}
+                initial='Select'
+                options={getColumns()}
+              />
+              <InputSelect
+                value={config.dataDenomFunction || ''}
+                fieldName='dataDenomFunction'
+                label='Data Function'
+                updateField={updateField}
+                initial='Select'
+                options={DATA_FUNCTIONS}
+              />
             </>
           )}
         </div>
@@ -258,7 +365,13 @@ const EditorPanel = memo(props => {
               <InputText value={config.suffix} fieldName='suffix' label='Suffix' updateField={updateField} />
             </div>
             <div>
-              <InputText type='number' value={config.roundToPlace} fieldName='roundToPlace' label='Round' updateField={updateField} />
+              <InputText
+                type='number'
+                value={config.roundToPlace}
+                fieldName='roundToPlace'
+                label='Round'
+                updateField={updateField}
+              />
             </div>
           </li>
         </ul>
@@ -266,9 +379,30 @@ const EditorPanel = memo(props => {
           <>
             <hr className='cove-accordion__divider' />
             <div className='cove-accordion__panel-section reverse-labels'>
-              <InputText inline size='small' value={config.valueDescription} label='Value Descriptor' fieldName='valueDescription' updateField={updateField} />
-              <InputCheckbox inline size='small' value={config.showPercent} label='Show Percentage' fieldName='showPercent' updateField={updateField} />
-              <InputCheckbox inline size='small' label='Show Denominator' value={config.showDenominator} fieldName='showDenominator' updateField={updateField} />
+              <InputText
+                inline
+                size='small'
+                value={config.valueDescription}
+                label='Value Descriptor'
+                fieldName='valueDescription'
+                updateField={updateField}
+              />
+              <InputCheckbox
+                inline
+                size='small'
+                value={config.showPercent}
+                label='Show Percentage'
+                fieldName='showPercent'
+                updateField={updateField}
+              />
+              <InputCheckbox
+                inline
+                size='small'
+                label='Show Denominator'
+                value={config.showDenominator}
+                fieldName='showDenominator'
+                updateField={updateField}
+              />
             </div>
           </>
         )}
@@ -279,7 +413,10 @@ const EditorPanel = memo(props => {
               <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>
+              <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>
         </label>
@@ -338,19 +475,54 @@ const EditorPanel = memo(props => {
         </Button>
       </Accordion.Section>
       <Accordion.Section title='Visual'>
-        {config.visualizationType !== 'Gauge' && <InputSelect 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' }}>
+          <InputSelect
+            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} />
+              <InputText
+                type='number'
+                value={config.nodeWidth}
+                fieldName='nodeWidth'
+                label='Width'
+                updateField={updateField}
+              />
             </div>
             <div className='cove-accordion__panel-col'>
-              <InputText type='number' value={config.nodeSpacer} fieldName='nodeSpacer' label='Spacer' updateField={updateField} />
+              <InputText
+                type='number'
+                value={config.nodeSpacer}
+                fieldName='nodeSpacer'
+                label='Spacer'
+                updateField={updateField}
+              />
             </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'>
+          {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>
@@ -366,7 +538,14 @@ const EditorPanel = memo(props => {
           </div>
         </div>
 
-        <InputSelect value={config.overallFontSize} fieldName='overallFontSize' label='Overall Font Size' updateField={updateField} options={['small', 'medium', 'large']} className='cove-input' />
+        <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>
@@ -385,11 +564,48 @@ const EditorPanel = memo(props => {
         </label>
 
         <div className='cove-accordion__panel-section reverse-labels'>
-          <InputCheckbox inline size='small' value={config.visual.border} section='visual' fieldName='border' label='Display Border' 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' updateField={updateField} />
+          <InputCheckbox
+            inline
+            size='small'
+            value={config.visual.border}
+            section='visual'
+            fieldName='border'
+            label='Display Border'
+            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'
+            updateField={updateField}
+          />
         </div>
       </Accordion.Section>
     </Accordion>
@@ -400,7 +616,13 @@ const EditorPanel = memo(props => {
   return (
     <ErrorBoundary component='EditorPanel'>
       <>
-        <Layout.Sidebar displayPanel={displayPanel} onBackClick={onBackClick} isDashboard={isDashboard} title='Configure Waffle Chart' showEditorPanel={displayPanel}>
+        <Layout.Sidebar
+          displayPanel={displayPanel}
+          onBackClick={onBackClick}
+          isDashboard={isDashboard}
+          title='Configure Waffle Chart'
+          showEditorPanel={displayPanel}
+        >
           {editorContent}
         </Layout.Sidebar>
         {props.children}