@cdc/data-bite 4.25.5-1 → 4.25.6-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/data-bite",
-  "version": "4.25.5-1",
+  "version": "4.25.6-1",
   "description": "React component for displaying a single piece of data in a card module",
   "moduleName": "CdcDataBite",
   "main": "dist/cdcdatabite",
@@ -27,14 +27,13 @@
   "license": "Apache-2.0",
   "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
   "dependencies": {
-    "@cdc/core": "^4.25.5-1",
+    "@cdc/core": "^4.25.6-1",
     "chroma": "0.0.1",
-    "react-accessible-accordion": "^3.3.4",
-    "react-beautiful-dnd": "^13.0.0"
+    "react-accessible-accordion": "^3.3.4"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "1d0a6e716bc113e6bea3636fcae90ebf2d19bb5c"
+  "gitHead": "ac45ee0f1d6a4045648c4e083992fc091795e084"
 }

package/src/CdcDataBite.tsx

@@ -28,6 +28,20 @@ import cacheBustingString from '@cdc/core/helpers/cacheBustingString'
 import coveUpdateWorker from '@cdc/core/helpers/coveUpdateWorker'
 import { Config } from './types/Config'
 import dataBiteReducer from './store/db.reducer'
+import {
+  DATA_FUNCTION_COUNT,
+  DATA_FUNCTION_MAX,
+  DATA_FUNCTION_MEAN,
+  DATA_FUNCTION_MEDIAN,
+  DATA_FUNCTION_MIN,
+  DATA_FUNCTION_MODE,
+  DATA_FUNCTION_RANGE,
+  DATA_FUNCTION_SUM,
+  IMAGE_POSITION_LEFT,
+  IMAGE_POSITION_RIGHT,
+  IMAGE_POSITION_TOP,
+  IMAGE_POSITION_BOTTOM
+} from './constants'
 
 // styles
 import './scss/main.scss'
@@ -340,7 +354,7 @@ const CdcDataBite = (props: CdcDataBiteProps) => {
           config.dataFormat.suffix
         break
       default:
-        console.warn('Data bite function not recognized: ' + dataFunction)
+        console.warn('Data bite function not recognized: ' + dataFunction) // eslint-disable-line no-console
     }
 
     // If not the range, then round and format here
@@ -643,57 +657,3 @@ const CdcDataBite = (props: CdcDataBiteProps) => {
 }
 
 export default CdcDataBite
-
-/* Constant */
-export const DATA_FUNCTION_MAX = 'Max'
-export const DATA_FUNCTION_COUNT = 'Count'
-export const DATA_FUNCTION_MEAN = 'Mean (Average)'
-export const DATA_FUNCTION_MEDIAN = 'Median'
-export const DATA_FUNCTION_MIN = 'Min'
-export const DATA_FUNCTION_MODE = 'Mode'
-export const DATA_FUNCTION_RANGE = 'Range'
-export const DATA_FUNCTION_SUM = 'Sum'
-export const DATA_FUNCTIONS = [
-  DATA_FUNCTION_COUNT,
-  DATA_FUNCTION_MAX,
-  DATA_FUNCTION_MEAN,
-  DATA_FUNCTION_MEDIAN,
-  DATA_FUNCTION_MIN,
-  DATA_FUNCTION_MODE,
-  DATA_FUNCTION_RANGE,
-  DATA_FUNCTION_SUM
-]
-
-export const BITE_LOCATION_TITLE = 'title'
-export const BITE_LOCATION_BODY = 'body'
-export const BITE_LOCATION_GRAPHIC = 'graphic'
-export const BITE_LOCATIONS = {
-  graphic: 'Graphic',
-  split: 'Split Graphic and Message',
-  title: 'Value above Message',
-  body: 'Value before Message',
-  end: 'Value after Message',
-  gradient: 'Gradient'
-}
-
-export const IMAGE_POSITION_LEFT = 'Left'
-export const IMAGE_POSITION_RIGHT = 'Right'
-export const IMAGE_POSITION_TOP = 'Top'
-export const IMAGE_POSITION_BOTTOM = 'Bottom'
-export const IMAGE_POSITIONS = [IMAGE_POSITION_LEFT, IMAGE_POSITION_RIGHT, IMAGE_POSITION_TOP, IMAGE_POSITION_BOTTOM]
-
-export const DATA_OPERATOR_LESS = '<'
-export const DATA_OPERATOR_GREATER = '>'
-export const DATA_OPERATOR_LESSEQUAL = '<='
-export const DATA_OPERATOR_GREATEREQUAL = '>='
-export const DATA_OPERATOR_EQUAL = '='
-export const DATA_OPERATOR_NOTEQUAL = '≠'
-
-export const DATA_OPERATORS = [
-  DATA_OPERATOR_LESS,
-  DATA_OPERATOR_GREATER,
-  DATA_OPERATOR_LESSEQUAL,
-  DATA_OPERATOR_GREATEREQUAL,
-  DATA_OPERATOR_EQUAL,
-  DATA_OPERATOR_NOTEQUAL
-]

package/src/components/EditorPanel.jsx

@@ -1,4 +1,4 @@
-import React, { memo, useContext, useEffect, useState } from 'react'
+import { memo, useContext, useEffect, useState } from 'react'
 import _ from 'lodash'
 import {
   Accordion,
@@ -8,177 +8,16 @@ import {
   AccordionItemPanel
 } from 'react-accessible-accordion'
 
-import { useDebounce } from 'use-debounce'
 import Context from '../context'
 import WarningImage from '@cdc/core/assets/icon-warning-circle.svg'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import Icon from '@cdc/core/components/ui/Icon'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import { updateFieldFactory } from '@cdc/core/helpers/updateFieldFactory'
-import { BITE_LOCATIONS, DATA_FUNCTIONS, IMAGE_POSITIONS, DATA_OPERATORS } from '../CdcDataBite'
+import { BITE_LOCATIONS, DATA_FUNCTIONS, IMAGE_POSITIONS, DATA_OPERATORS, HEADER_COLORS } from './../constants'
 import Layout from '@cdc/core/components/Layout'
-
-const TextField = memo(
-  ({
-    label,
-    section = null,
-    subsection = null,
-    fieldName,
-    updateField,
-    value: stateValue,
-    tooltip,
-    type = 'input',
-    i = null,
-    min = null,
-    max = 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, section, subsection, fieldName, i, stateValue, updateField])
-
-    let name = subsection ? `${section}-${subsection}-${fieldName}` : `${section}-${subsection}-${fieldName}`
-
-    const onChange = e => {
-      //TODO: This block gives a warning/error in the console, but it still works.
-      if ('number' !== type || min === null) {
-        setValue(e.target.value)
-      } else {
-        if (
-          !e.target.value ||
-          (parseFloat(min) <= parseFloat(e.target.value)) & (parseFloat(max) >= 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} />
-    }
-
-    return (
-      <>
-        {label && label.length > 0 && (
-          <label>
-            <span className='edit-label column-heading'>
-              {label}
-              {tooltip}
-            </span>
-            {formElement}
-          </label>
-        )}
-        {(!label || label.length === 0) && formElement}
-      </>
-    )
-  }
-)
-
-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 Select = memo(
-  ({
-    label,
-    value,
-    options,
-    fieldName,
-    section = null,
-    subsection = null,
-    required = false,
-    updateField,
-    initial: initialValue,
-    ...attributes
-  }) => {
-    let optionsJsx = ''
-    if (Array.isArray(options)) {
-      //Handle basic array
-      optionsJsx = options.map(optionName => (
-        <option value={optionName} key={optionName}>
-          {optionName}
-        </option>
-      ))
-    } else {
-      //Handle object with value/name pairs
-      optionsJsx = []
-      for (const [optionValue, optionName] of Object.entries(options)) {
-        optionsJsx.push(
-          <option value={optionValue} key={optionValue}>
-            {optionName}
-          </option>
-        )
-      }
-    }
-
-    if (initialValue) {
-      optionsJsx.unshift(
-        <option value='' key='initial'>
-          {initialValue}
-        </option>
-      )
-    }
-
-    return (
-      <label>
-        <span className='edit-label'>{label}</span>
-        <select
-          className={required && !value ? 'warning' : ''}
-          name={fieldName}
-          value={value}
-          onChange={event => {
-            updateField(section, subsection, fieldName, event.target.value)
-          }}
-          {...attributes}
-        >
-          {optionsJsx}
-        </select>
-      </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'
-]
+import { Select, TextField, CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
+import Button from '@cdc/core/components/elements/Button'
 
 const EditorPanel = memo(() => {
   const { config, updateConfig, loading, data, setParentConfig, isDashboard, isEditor } = useContext(Context)
@@ -347,7 +186,7 @@ const EditorPanel = memo(() => {
                     fieldName='biteStyle'
                     label='Data Bite Style'
                     updateField={updateField}
-                    options={BITE_LOCATIONS}
+                    options={Object.entries(BITE_LOCATIONS).map(([key, value]) => ({ value: key, label: value }))}
                     initial='Select'
                   />
                   <TextField
@@ -430,7 +269,7 @@ const EditorPanel = memo(() => {
                         updateField={updateField}
                         initial='Select'
                         required={true}
-                        options={getColumns()}
+                        options={getColumns() ? Array.from(getColumns()) : []}
                       />
                       <Select
                         value={config.dataFunction || ''}
@@ -439,7 +278,13 @@ const EditorPanel = memo(() => {
                         updateField={updateField}
                         initial='Select'
                         required={true}
-                        options={DATA_FUNCTIONS}
+                        options={
+                          Array.isArray(DATA_FUNCTIONS)
+                            ? DATA_FUNCTIONS
+                            : DATA_FUNCTIONS
+                            ? Object.values(DATA_FUNCTIONS)
+                            : []
+                        }
                       />
                     </li>
                   </ul>
@@ -510,45 +355,33 @@ const EditorPanel = memo(() => {
                         <fieldset className='edit-block' key={index}>
                           <button
                             type='button'
-                            className='remove-column'
+                            className='btn btn-danger'
                             onClick={() => {
                               removeFilter(index)
                             }}
                           >
                             Remove
                           </button>
-                          <label>
-                            <span className='edit-label column-heading'>Column</span>
-                            <select
-                              value={filter.columnName ? 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
+                            value={filter.columnName ? filter.columnName : ''}
+                            fieldName='columnName'
+                            label={'Column Name'}
+                            updateField={(section, subsection, fieldName, value) =>
+                              updateFilterProp(fieldName, index, value)
+                            }
+                            options={getColumns()}
+                            initial='- Select Option -'
+                          />
+                          <Select
+                            value={filter.columnValue || ''}
+                            fieldName='columnValue'
+                            label='Column Value'
+                            updateField={(section, subsection, fieldName, value) =>
+                              updateFilterProp(fieldName, index, value)
+                            }
+                            options={Array.isArray(getFilterColumnValues(index)) ? getFilterColumnValues(index) : []}
+                            initial='- Select Option -'
+                          />
                         </fieldset>
                       ))}
                     </ul>
@@ -560,9 +393,9 @@ const EditorPanel = memo(() => {
                       </fieldset>
                     </div>
                   )}
-                  <button type='button' onClick={addNewFilter} className='btn btn-primary full-width'>
+                  <Button type='button' onClick={addNewFilter} className='btn btn-primary full-width mt-3'>
                     Add Filter
-                  </button>
+                  </Button>
                 </AccordionItemPanel>
               </AccordionItem>
 
@@ -629,11 +462,12 @@ const EditorPanel = memo(() => {
                   <label>
                     <span className='edit-label'>Theme</span>
                     <ul className='color-palette'>
-                      {headerColors.map(palette => (
-                        <li
+                      {HEADER_COLORS.map(palette => (
+                        <button
                           title={palette}
                           key={palette}
-                          onClick={() => {
+                          onClick={e => {
+                            e.preventDefault()
                             updateConfig({ ...config, theme: palette })
                           }}
                           className={config.theme === palette ? 'selected ' + palette : palette}

package/src/constants.ts

@@ -0,0 +1,66 @@
+export const DATA_FUNCTION_MAX = 'Max'
+export const DATA_FUNCTION_COUNT = 'Count'
+export const DATA_FUNCTION_MEAN = 'Mean (Average)'
+export const DATA_FUNCTION_MEDIAN = 'Median'
+export const DATA_FUNCTION_MIN = 'Min'
+export const DATA_FUNCTION_MODE = 'Mode'
+export const DATA_FUNCTION_RANGE = 'Range'
+export const DATA_FUNCTION_SUM = 'Sum'
+export const DATA_FUNCTIONS = [
+  DATA_FUNCTION_COUNT,
+  DATA_FUNCTION_MAX,
+  DATA_FUNCTION_MEAN,
+  DATA_FUNCTION_MEDIAN,
+  DATA_FUNCTION_MIN,
+  DATA_FUNCTION_MODE,
+  DATA_FUNCTION_RANGE,
+  DATA_FUNCTION_SUM
+]
+
+export const BITE_LOCATION_TITLE = 'title'
+export const BITE_LOCATION_BODY = 'body'
+export const BITE_LOCATION_GRAPHIC = 'graphic'
+export const BITE_LOCATIONS = {
+  graphic: 'Graphic',
+  split: 'Split Graphic and Message',
+  title: 'Value above Message',
+  body: 'Value before Message',
+  end: 'Value after Message',
+  gradient: 'Gradient'
+}
+
+export const IMAGE_POSITION_LEFT = 'Left'
+export const IMAGE_POSITION_RIGHT = 'Right'
+export const IMAGE_POSITION_TOP = 'Top'
+export const IMAGE_POSITION_BOTTOM = 'Bottom'
+export const IMAGE_POSITIONS = [IMAGE_POSITION_LEFT, IMAGE_POSITION_RIGHT, IMAGE_POSITION_TOP, IMAGE_POSITION_BOTTOM]
+
+export const DATA_OPERATOR_LESS = '<'
+export const DATA_OPERATOR_GREATER = '>'
+export const DATA_OPERATOR_LESSEQUAL = '<='
+export const DATA_OPERATOR_GREATEREQUAL = '>='
+export const DATA_OPERATOR_EQUAL = '='
+export const DATA_OPERATOR_NOTEQUAL = '≠'
+
+export const DATA_OPERATORS = [
+  DATA_OPERATOR_LESS,
+  DATA_OPERATOR_GREATER,
+  DATA_OPERATOR_LESSEQUAL,
+  DATA_OPERATOR_GREATEREQUAL,
+  DATA_OPERATOR_EQUAL,
+  DATA_OPERATOR_NOTEQUAL
+]
+
+export const HEADER_COLORS = [
+  'theme-blue',
+  'theme-purple',
+  'theme-brown',
+  'theme-teal',
+  'theme-pink',
+  'theme-orange',
+  'theme-slate',
+  'theme-indigo',
+  'theme-cyan',
+  'theme-green',
+  'theme-amber'
+]