@cdc/data-bite 4.25.10 → 4.25.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/data-bite",
-  "version": "4.25.10",
+  "version": "4.25.11",
   "description": "React component for displaying a single piece of data in a card module",
   "moduleName": "CdcDataBite",
   "main": "dist/cdcdatabite",
@@ -27,7 +27,7 @@
   "license": "Apache-2.0",
   "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
   "dependencies": {
-    "@cdc/core": "^4.25.10",
+    "@cdc/core": "^4.25.11",
     "chroma-js": "3.1.2",
     "html-react-parser": "5.2.3",
     "lodash": "^4.17.21",
@@ -39,11 +39,10 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@rollup/plugin-dsv": "^3.0.2",
     "@vitejs/plugin-react": "^4.3.4",
     "vite": "^4.4.11",
     "vite-plugin-css-injected-by-js": "^2.4.0",
     "vite-plugin-svgr": "^2.4.0"
   },
-  "gitHead": "c2db758e74ab9b9ca1667a6f9cb41dd0dccf985d"
+  "gitHead": "5f09a137c22f454111ab5f4cd7fdf1d2d58e31bd"
 }

package/src/CdcDataBite.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback, useReducer } from 'react'
+import { useEffect, useCallback, useReducer } from 'react'
 import { Fragment } from 'react'
 
 // contexts & initial state
@@ -31,20 +31,18 @@ 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 { IMAGE_POSITION_LEFT, IMAGE_POSITION_RIGHT, IMAGE_POSITION_TOP, IMAGE_POSITION_BOTTOM } from './constants'
+
 import {
   DATA_FUNCTION_COUNT,
   DATA_FUNCTION_MAX,
   DATA_FUNCTION_MEAN,
   DATA_FUNCTION_MEDIAN,
-  DATA_FUNCTION_MIN,
   DATA_FUNCTION_MODE,
+  DATA_FUNCTION_MIN,
   DATA_FUNCTION_RANGE,
-  DATA_FUNCTION_SUM,
-  IMAGE_POSITION_LEFT,
-  IMAGE_POSITION_RIGHT,
-  IMAGE_POSITION_TOP,
-  IMAGE_POSITION_BOTTOM
-} from './constants'
+  DATA_FUNCTION_SUM
+} from '@cdc/core/helpers/constants'
 
 // styles
 import './scss/main.scss'

package/src/components/EditorPanel.jsx

@@ -1,4 +1,5 @@
 import React, { memo, useContext, useEffect, useState } from 'react'
+import { DATA_FUNCTIONS, DATA_OPERATORS } from '@cdc/core/helpers/constants'
 import cloneConfig from '@cdc/core/helpers/cloneConfig'
 import _ from 'lodash'
 import {
@@ -9,17 +10,21 @@ import {
   AccordionItemPanel
 } from 'react-accessible-accordion'
 
+import AdvancedEditor from '@cdc/core/components/AdvancedEditor'
 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, HEADER_COLORS } from './../constants'
+import { BITE_LOCATIONS, IMAGE_POSITIONS } from './../constants'
 import Layout from '@cdc/core/components/Layout'
 import { Select, TextField, CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
 import Button from '@cdc/core/components/elements/Button'
 import PanelMarkup from '@cdc/core/components/EditorPanel/components/PanelMarkup'
+import { HeaderThemeSelector } from '@cdc/core/components/HeaderThemeSelector'
+
+import '@cdc/core/styles/v2/components/editor.scss'
 
 const EditorPanel = memo(() => {
   const { config, updateConfig, loading, data, setParentConfig, isDashboard, isEditor } = useContext(Context)
@@ -285,8 +290,8 @@ const EditorPanel = memo(() => {
                           Array.isArray(DATA_FUNCTIONS)
                             ? DATA_FUNCTIONS
                             : DATA_FUNCTIONS
-                            ? Object.values(DATA_FUNCTIONS)
-                            : []
+                              ? Object.values(DATA_FUNCTIONS)
+                              : []
                         }
                       />
                     </li>
@@ -408,7 +413,7 @@ const EditorPanel = memo(() => {
                 <AccordionItemHeading>
                   <AccordionItemButton>Visual</AccordionItemButton>
                 </AccordionItemHeading>
-                <AccordionItemPanel>
+                <AccordionItemPanel className='panel-visual accordion__panel accordion__panel--visual'>
                   <TextField
                     type='number'
                     value={config.biteFontSize}
@@ -462,22 +467,11 @@ const EditorPanel = memo(() => {
                       updateField={updateField}
                     />
                   </div>
-                  <label>
-                    <span className='edit-label'>Theme</span>
-                    <ul className='color-palette'>
-                      {HEADER_COLORS.map(palette => (
-                        <button
-                          title={palette}
-                          key={palette}
-                          onClick={e => {
-                            e.preventDefault()
-                            updateConfig({ ...config, theme: palette })
-                          }}
-                          className={config.theme === palette ? 'selected ' + palette : palette}
-                        />
-                      ))}
-                    </ul>
-                  </label>
+                  <HeaderThemeSelector
+                    selectedTheme={config.theme}
+                    onThemeSelect={theme => updateConfig({ ...config, theme })}
+                    label='Theme'
+                  />
                 </AccordionItemPanel>
               </AccordionItem>
 
@@ -571,19 +565,14 @@ const EditorPanel = memo(() => {
                                     <div className='accordion__panel-row align-center'>
                                       <div className='accordion__panel-col flex-auto'>If Value</div>
                                       <div className='accordion__panel-col flex-auto'>
-                                        <select
+                                        <Select
+                                          label=''
                                           value={option.arguments[0]?.operator || ''}
+                                          options={DATA_OPERATORS}
                                           onChange={e => {
                                             updateDynamicImage('operator', index, 0, e.target.value)
                                           }}
-                                        >
-                                          <option value='' disabled />
-                                          {DATA_OPERATORS.map((operator, index) => (
-                                            <option value={operator} key={index}>
-                                              {operator}
-                                            </option>
-                                          ))}
-                                        </select>
+                                        />
                                       </div>
                                       <div className='accordion__panel-col flex-grow flex-shrink'>
                                         <input
@@ -598,9 +587,13 @@ const EditorPanel = memo(() => {
 
                                     <div className='accordion__panel-row mb-2 align-center'>
                                       <div className='accordion__panel-col flex-grow'>
-                                        <select
-                                          className='border-dashed text-center'
+                                        <Select
+                                          label=''
                                           value={option.secondArgument ? 'and' : 'then'}
+                                          options={[
+                                            { value: 'then', label: 'Then' },
+                                            { value: 'and', label: 'And' }
+                                          ]}
                                           onChange={e => {
                                             if ('then' === e.target.value) {
                                               updateDynamicImage('secondArgument', index, null, false)
@@ -610,10 +603,7 @@ const EditorPanel = memo(() => {
                                               updateDynamicImage('secondArgument', index, null, true)
                                             }
                                           }}
-                                        >
-                                          <option value={'then'}>Then</option>
-                                          <option value={'and'}>And</option>
-                                        </select>
+                                        />
                                       </div>
                                     </div>
 
@@ -622,19 +612,14 @@ const EditorPanel = memo(() => {
                                         <div className='accordion__panel-row align-center'>
                                           <div className='accordion__panel-col flex-auto'>If Value</div>
                                           <div className='accordion__panel-col flex-auto'>
-                                            <select
+                                            <Select
+                                              label=''
                                               value={option.arguments[1]?.operator || ''}
+                                              options={DATA_OPERATORS}
                                               onChange={e => {
                                                 setDynamicArgument(index, 'operator', e.target.value)
                                               }}
-                                            >
-                                              <option value='' disabled />
-                                              {DATA_OPERATORS.map((operator, index) => (
-                                                <option value={operator} key={index}>
-                                                  {operator}
-                                                </option>
-                                              ))}
-                                            </select>
+                                            />
                                           </div>
                                           <div className='accordion__panel-col flex-grow flex-shrink'>
                                             <input
@@ -708,6 +693,7 @@ const EditorPanel = memo(() => {
                   />
                 </AccordionItemPanel>
               </AccordionItem>
+              <AdvancedEditor loadConfig={updateConfig} config={config} convertStateToConfig={convertStateToConfig} />
             </Accordion>
           </form>
         </section>

package/src/constants.ts

@@ -1,25 +1,3 @@
-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',
@@ -34,33 +12,3 @@ 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'
-]

package/src/index.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 
 import '@cdc/core/styles/cove-main.scss'
+import '@cdc/core/components/EditorPanel/EditorPanel.styles.css'
 
 import CdcDataBite from './CdcDataBite'