@cdc/data-bite 4.25.10 → 4.26.1

package/src/components/EditorPanel/EditorPanel.tsx

@@ -0,0 +1,542 @@
+import { useContext } from 'react'
+
+import { DATA_FUNCTIONS, DATA_OPERATORS } from '@cdc/core/helpers/constants'
+
+// Context
+import Context from '../../context'
+
+// Components
+import { EditorPanel as BaseEditorPanel } from '@cdc/core/components/EditorPanel/EditorPanel'
+import '@cdc/core/styles/v2/components/editor.scss'
+import AdvancedEditor from '@cdc/core/components/AdvancedEditor'
+import Tooltip from '@cdc/core/components/ui/Tooltip'
+import Icon from '@cdc/core/components/ui/Icon'
+import { updateFieldFactory } from '@cdc/core/helpers/updateFieldFactory'
+import { useFilterManagement } from '@cdc/core/hooks/useFilterManagement'
+import { useDataColumns } from '@cdc/core/hooks/useDataColumns'
+import { useListManagement } from '@cdc/core/hooks/useListManagement'
+import { BITE_LOCATIONS, IMAGE_POSITIONS } from '../../constants'
+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 { VisualSection } from '@cdc/core/components/EditorPanel/sections/VisualSection'
+import Accordion from '@cdc/core/components/ui/Accordion'
+
+type DataBiteEditorPanelProps = {
+  // Add any props if needed
+}
+
+const EditorPanel: React.FC<DataBiteEditorPanelProps> = () => {
+  const { config, updateConfig, loading, data, setParentConfig, isDashboard } = useContext(Context)
+
+  const updateField = updateFieldFactory(config, updateConfig, true)
+
+  // Filters -----------------------------------------------
+  const { addNewFilter, removeFilter, updateFilterProp, getFilterColumnValues } = useFilterManagement(
+    config,
+    updateConfig,
+    data
+  )
+
+  // Extract column names from data with memoization (replaces getColumns)
+  const columns = useDataColumns(data)
+
+  // Dynamic Images ----------------------------------------
+  // Use standardized list management hook (Phase 2 improvement)
+  const images = useListManagement({
+    config,
+    updateConfig,
+    listPath: 'imageData.options',
+    createItem: () => ({
+      source: '',
+      arguments: [{ operator: '', threshold: '' }],
+      alt: '',
+      secondArgument: false
+    })
+  })
+
+  // Helper for removing second argument from dynamic image conditions
+  const removeDynamicArgument = (index: number) => {
+    const item = images.items[index]
+    if (item?.arguments?.length > 1) {
+      const updatedArguments = [...item.arguments]
+      updatedArguments.pop()
+      images.updateField(index, 'arguments', updatedArguments)
+    }
+  }
+
+  return (
+    <BaseEditorPanel
+      config={config}
+      updateConfig={updateConfig as (config: any) => void}
+      loading={loading}
+      setParentConfig={setParentConfig as ((config: any) => void) | undefined}
+      isDashboard={isDashboard}
+      title='Configure Data Bites'
+    >
+      {({ convertStateToConfig }) => (
+        <Accordion>
+          <Accordion.Section title='General'>
+            <Select
+              value={config.biteStyle}
+              fieldName='biteStyle'
+              label='Data Bite Style'
+              updateField={updateField}
+              options={Object.entries(BITE_LOCATIONS).map(([key, value]) => ({ value: key, label: value }))}
+              initial='Select'
+            />
+            <TextField
+              value={config.title}
+              fieldName='title'
+              label='Title'
+              placeholder='Data Bite Title'
+              updateField={updateField}
+            />
+            <CheckBox
+              value={config.visual?.showTitle}
+              section='visual'
+              checked={config.visual?.showTitle}
+              fieldName='showTitle'
+              label='Show Title'
+              updateField={updateField}
+            />
+
+            <TextField
+              type='textarea'
+              value={config.biteBody}
+              fieldName='biteBody'
+              label='Message'
+              updateField={updateField}
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <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>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+            />
+            <TextField
+              value={config.subtext}
+              fieldName='subtext'
+              label='Subtext/Citation'
+              placeholder='Data Bite Subtext or Citation'
+              updateField={updateField}
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <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. You can also use markup variables like{' '}
+                      {'{{variable-name}}'} to display dynamic data.
+                    </p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+            />
+          </Accordion.Section>
+
+          <Accordion.Section title='Data'>
+            <ul className='column-edit'>
+              <li className='two-col'>
+                <Select
+                  value={config.dataColumn || ''}
+                  fieldName='dataColumn'
+                  label='Data Column'
+                  updateField={updateField}
+                  initial='Select'
+                  required={true}
+                  options={columns}
+                />
+                <Select
+                  value={config.dataFunction || ''}
+                  fieldName='dataFunction'
+                  label='Data Function'
+                  updateField={updateField}
+                  initial='Select'
+                  required={true}
+                  options={
+                    Array.isArray(DATA_FUNCTIONS) ? DATA_FUNCTIONS : DATA_FUNCTIONS ? Object.values(DATA_FUNCTIONS) : []
+                  }
+                />
+              </li>
+            </ul>
+            <span className='divider-heading'>Number Formatting</span>
+            <ul className='column-edit'>
+              <li className='three-col'>
+                <TextField
+                  value={config.dataFormat.prefix}
+                  section='dataFormat'
+                  fieldName='prefix'
+                  label='Prefix'
+                  updateField={updateField}
+                />
+                <TextField
+                  value={config.dataFormat.suffix}
+                  section='dataFormat'
+                  fieldName='suffix'
+                  label='Suffix'
+                  updateField={updateField}
+                />
+                <TextField
+                  type='number'
+                  value={config.dataFormat.roundToPlace}
+                  section='dataFormat'
+                  fieldName='roundToPlace'
+                  label='Round'
+                  updateField={updateField}
+                  min='0'
+                  max='99'
+                />
+              </li>
+            </ul>
+            <CheckBox
+              value={config.dataFormat.commas}
+              section='dataFormat'
+              fieldName='commas'
+              label='Add commas'
+              updateField={updateField}
+            />
+            <CheckBox
+              value={config.dataFormat.ignoreZeros}
+              section='dataFormat'
+              fieldName='ignoreZeros'
+              label='Ignore Zeros'
+              updateField={updateField}
+            />
+            <hr className='accordion__divider' />
+
+            <label style={{ marginBottom: '1rem' }}>
+              <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 && (
+              <ul className='filters-list'>
+                {config.filters.map((filter: any, index: number) => (
+                  <fieldset className='edit-block' key={index}>
+                    <button
+                      type='button'
+                      className='btn btn-danger'
+                      onClick={() => {
+                        removeFilter(index)
+                      }}
+                    >
+                      Remove
+                    </button>
+                    <Select
+                      value={filter.columnName ? filter.columnName : ''}
+                      fieldName='columnName'
+                      label={'Column Name'}
+                      updateField={(section, subsection, fieldName, value) => updateFilterProp(fieldName, index, value)}
+                      options={columns}
+                      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>
+            )}
+            {(!config.filters || config.filters.length === 0) && (
+              <div>
+                <fieldset className='edit-block'>
+                  <p style={{ textAlign: 'center' }}>There are currently no filters.</p>
+                </fieldset>
+              </div>
+            )}
+            <Button type='button' onClick={addNewFilter} className='btn btn-primary full-width mt-3'>
+              Add Filter
+            </Button>
+          </Accordion.Section>
+
+          {/* Visual section for TP5 style */}
+          {config.biteStyle === 'tp5' && (
+            <Accordion.Section title='Visual'>
+              <CheckBox
+                value={config.visual?.whiteBackground}
+                section='visual'
+                fieldName='whiteBackground'
+                label='Use White Background Style'
+                updateField={updateField}
+              />
+              {/* TODO: Uncomment when ready to release Display Border feature
+              <CheckBox
+                value={config.visual?.border}
+                section='visual'
+                fieldName='border'
+                label='Display Border'
+                updateField={updateField}
+              />
+              */}
+            </Accordion.Section>
+          )}
+
+          {/* Visual section for other bite styles */}
+          {config.biteStyle !== 'tp5' && (
+            <Accordion.Section title='Visual'>
+              <VisualSection
+                config={config}
+                updateField={updateField}
+                updateConfig={updateConfig}
+                themeSelectorPosition='after'
+                beforeCheckboxes={
+                  <>
+                    <TextField
+                      type='number'
+                      value={config.biteFontSize}
+                      fieldName='biteFontSize'
+                      label='Bite Font Size'
+                      updateField={updateField}
+                      min={17}
+                      max={65}
+                    />
+                    <Select
+                      value={config.fontSize}
+                      fieldName='fontSize'
+                      label='Overall Font Size'
+                      updateField={updateField}
+                      options={['small', 'medium', 'large']}
+                    />
+                  </>
+                }
+              />
+            </Accordion.Section>
+          )}
+
+          {['title', 'body', 'graphic'].includes(config.biteStyle) && (
+            <Accordion.Section title={`Image${['dynamic'].includes(config.imageData.display) ? 's' : ''}`}>
+              <Select
+                value={config.imageData.display || ''}
+                section='imageData'
+                fieldName='display'
+                label='Image Display Type'
+                updateField={updateField}
+                options={['none', 'static', 'dynamic']}
+              />
+              <Select
+                value={config.bitePosition || ''}
+                fieldName='bitePosition'
+                label='Image/Graphic Position'
+                updateField={updateField}
+                initial='Select'
+                options={IMAGE_POSITIONS}
+              />
+              {['static'].includes(config.imageData.display) && (
+                <>
+                  <TextField
+                    value={config.imageData.url}
+                    section='imageData'
+                    fieldName='url'
+                    label='Image URL'
+                    updateField={updateField}
+                  />
+                  <TextField
+                    value={config.imageData.alt}
+                    section='imageData'
+                    fieldName='alt'
+                    label='Alt Text'
+                    updateField={updateField}
+                  />
+                </>
+              )}
+
+              {['dynamic'].includes(config.imageData.display) && (
+                <>
+                  <TextField
+                    value={config.imageData.url || ''}
+                    section='imageData'
+                    fieldName='url'
+                    label='Image URL (default)'
+                    updateField={updateField}
+                  />
+                  <TextField
+                    value={config.imageData.alt}
+                    section='imageData'
+                    fieldName='alt'
+                    label='Alt Text (default)'
+                    updateField={updateField}
+                  />
+
+                  <hr className='accordion__divider' />
+
+                  {(!images.items || images.items.length === 0) && (
+                    <p style={{ textAlign: 'center' }}>There are currently no dynamic images.</p>
+                  )}
+                  {images.items && images.items.length > 0 && (
+                    <>
+                      <ul>
+                        {images.items.map((option: any, index: number) => (
+                          <fieldset className='edit-block' key={index}>
+                            <button
+                              type='button'
+                              className='remove-column'
+                              onClick={() => {
+                                images.remove(index)
+                              }}
+                            >
+                              Remove
+                            </button>
+                            <label>
+                              <span className='edit-label column-heading'>
+                                <strong>{'Image #' + (index + 1)}</strong>
+                              </span>
+
+                              <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
+                                    label=''
+                                    value={option.arguments[0]?.operator || ''}
+                                    options={DATA_OPERATORS}
+                                    onChange={e => {
+                                      images.updateNested(index, 'arguments', 0, 'operator', e.target.value)
+                                    }}
+                                  />
+                                </div>
+                                <div className='accordion__panel-col flex-grow flex-shrink'>
+                                  <input
+                                    type='number'
+                                    value={option.arguments[0]?.threshold || ''}
+                                    onChange={e => {
+                                      images.updateNested(index, 'arguments', 0, 'threshold', e.target.value)
+                                    }}
+                                  />
+                                </div>
+                              </div>
+
+                              <div className='accordion__panel-row mb-2 align-center'>
+                                <div className='accordion__panel-col flex-grow'>
+                                  <Select
+                                    label=''
+                                    value={option.secondArgument ? 'and' : 'then'}
+                                    options={[
+                                      { value: 'then', label: 'Then' },
+                                      { value: 'and', label: 'And' }
+                                    ]}
+                                    onChange={e => {
+                                      if ('then' === e.target.value) {
+                                        images.updateField(index, 'secondArgument', false)
+                                        removeDynamicArgument(index)
+                                      }
+                                      if ('and' === e.target.value) {
+                                        images.updateField(index, 'secondArgument', true)
+                                      }
+                                    }}
+                                  />
+                                </div>
+                              </div>
+
+                              {option.secondArgument && true === option.secondArgument && (
+                                <>
+                                  <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
+                                        label=''
+                                        value={option.arguments[1]?.operator || ''}
+                                        options={DATA_OPERATORS}
+                                        onChange={e => {
+                                          images.updateNested(index, 'arguments', 1, 'operator', e.target.value)
+                                        }}
+                                      />
+                                    </div>
+                                    <div className='accordion__panel-col flex-grow flex-shrink'>
+                                      <input
+                                        type='number'
+                                        value={option.arguments[1]?.threshold || ''}
+                                        onChange={e => {
+                                          images.updateNested(index, 'arguments', 1, 'threshold', e.target.value)
+                                        }}
+                                      />
+                                    </div>
+                                  </div>
+                                  <div className='accordion__panel-row mb-2 align-center text-center text-capitalize'>
+                                    <div className='accordion__panel-col flex-grow'>Then</div>
+                                  </div>
+                                </>
+                              )}
+
+                              <div className='accordion__panel-row mb-2 align-center'>
+                                <div className='accordion__panel-col flex-auto'>Show</div>
+                                <div className='accordion__panel-col flex-grow'>
+                                  <input
+                                    type='text'
+                                    value={option.source || ''}
+                                    onChange={e => {
+                                      images.updateField(index, 'source', e.target.value)
+                                    }}
+                                  />
+                                </div>
+                              </div>
+
+                              <div className='accordion__panel-row mb-2 align-center'>
+                                <div className='accordion__panel-col flex-auto'>Alt Text</div>
+                                <div className='accordion__panel-col flex-grow'>
+                                  <input
+                                    type='text'
+                                    value={option.alt || ''}
+                                    onChange={e => {
+                                      images.updateField(index, 'alt', e.target.value)
+                                    }}
+                                  />
+                                </div>
+                              </div>
+                            </label>
+                          </fieldset>
+                        ))}
+                      </ul>
+                    </>
+                  )}
+                  <button type='button' onClick={images.add} className='btn btn-primary full-width'>
+                    Add Dynamic Image
+                  </button>
+                </>
+              )}
+            </Accordion.Section>
+          )}
+
+          <Accordion.Section title='Markup Variables'>
+            <PanelMarkup
+              name='Markup Variables'
+              markupVariables={config.markupVariables || []}
+              data={data}
+              enableMarkupVariables={config.enableMarkupVariables || false}
+              onMarkupVariablesChange={variables => updateField(null, null, 'markupVariables', variables)}
+              onToggleEnable={enabled => updateField(null, null, 'enableMarkupVariables', enabled)}
+              withAccordion={false}
+            />
+          </Accordion.Section>
+          <AdvancedEditor loadConfig={updateConfig} config={config} convertStateToConfig={convertStateToConfig} />
+        </Accordion>
+      )}
+    </BaseEditorPanel>
+  )
+}
+
+export default EditorPanel

package/src/components/EditorPanel/index.tsx

@@ -0,0 +1,3 @@
+import EditorPanel from './EditorPanel'
+
+export default EditorPanel

package/src/constants.ts

@@ -1,32 +1,11 @@
-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'
+  gradient: 'Gradient',
+  tp5: 'TP5 Style'
 }
 
 export const IMAGE_POSITION_LEFT = 'Left'
@@ -34,33 +13,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/images/callout-flag.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="481.000000pt" height="563.000000pt" viewBox="0 0 481.000000 563.000000" preserveAspectRatio="xMidYMid meet">
+  <g transform="translate(0.000000,563.000000) scale(0.100000,-0.100000)" fill="#2c7a99" stroke="none">
+    <path d="M890 5514 c-161 -43 -308 -201 -354 -381 -14 -55 -16 -314 -16 -2527 0 -2015 2 -2466 13 -2466 7 0 51 14 97 30 47 17 92 33 100 35 8 2 16 4 18 5 1 2 7 4 12 5 6 1 11 3 13 4 1 2 13 4 26 7 14 2 30 9 38 15 7 6 13 8 13 4 0 -4 7 -2 15 5 8 7 15 10 15 6 0 -3 17 1 38 10 49 21 856 293 905 305 21 5 45 13 55 19 9 5 40 16 67 24 28 8 162 52 299 99 l249 85 151 -53 c83 -29 253 -90 379 -134 264 -94 556 -198 974 -346 164 -58 308 -110 321 -115 13 -6 27 -10 33 -10 11 0 8 4951 -4 4994 -22 80 -84 183 -152 252 -75 76 -141 114 -233 133 -38 8 -477 11 -1535 10 -1268 0 -1490 -3 -1537 -15z m2687 -1570 c49 -31 82 -134 64 -201 -10 -37 -41 -64 -422 -369 -227 -181 -430 -341 -452 -356 -43 -30 -84 -35 -136 -17 -17 6 -156 107 -309 224 l-277 213 -40 -31 c-50 -39 -318 -259 -325 -267 -3 -3 -27 -24 -55 -45 -27 -22 -55 -44 -61 -50 -86 -77 -253 -202 -277 -207 -20 -4 -53 -1 -84 8 -69 19 -105 64 -111 140 -6 70 8 100 69 149 105 84 134 107 168 133 19 15 92 74 164 132 71 58 144 116 162 130 86 68 114 90 187 150 124 102 156 120 206 120 23 0 57 -7 75 -16 18 -9 145 -103 282 -209 283 -217 293 -224 303 -210 4 6 42 39 86 74 43 35 88 71 100 81 31 27 153 127 231 190 37 30 111 91 164 135 142 119 217 145 288 99z m-1431 -983 c60 -44 59 -29 62 -601 3 -596 4 -589 -70 -638 -76 -49 -171 -29 -228 50 l-30 41 0 526 c0 591 -3 569 75 623 35 25 48 28 100 25 44 -2 69 -9 91 -26z m1252 15 c37 -19 67 -55 81 -95 8 -25 10 -183 9 -555 -3 -579 -1 -555 -71 -603 -67 -45 -144 -35 -211 27 l-41 39 -3 543 -2 544 23 35 c46 68 149 99 215 65z m-610 -343 c71 -57 71 -57 71 -448 0 -322 -1 -353 -19 -392 -27 -60 -83 -95 -155 -95 -63 -1 -95 16 -132 72 -23 33 -23 36 -23 407 0 406 -1 401 57 455 34 32 54 38 116 34 35 -2 57 -11 85 -33z m-1313 -142 c54 -24 92 -71 100 -124 4 -23 5 -159 3 -302 -3 -293 -3 -293 -82 -343 -66 -41 -160 -30 -207 24 -34 40 -39 84 -39 361 0 303 3 322 61 366 53 39 105 45 164 18z"/>
+  </g>
+</svg>

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'