@cdc/core 4.24.5 → 4.24.7

package/components/EditorPanel/FootnotesEditor.tsx

@@ -0,0 +1,77 @@
+import { UpdateFieldFunc } from '../../types/UpdateFieldFunc'
+import _ from 'lodash'
+import Footnotes, { Footnote } from '../../types/Footnotes'
+import { footnotesSymbols } from '../../helpers/footnoteSymbols'
+import InputSelect from '../inputs/InputSelect'
+import { TextField } from './Inputs'
+interface FootnotesEditorProps {
+  config: Footnotes
+  updateField: UpdateFieldFunc<Footnote[]>
+}
+
+const FootnotesEditor: React.FC<FootnotesEditorProps> = ({ config, updateField }) => {
+  const addStaticFootnote = () => {
+    const newStaticNotes = [...(config.staticFootnotes || []), { text: 'Add Footnote Text' }]
+    updateField(null, null, 'staticFootnotes', newStaticNotes)
+  }
+
+  const updateStaticFootnote = (footnoteIndex, footnoteUpdate: Footnote) => {
+    const footnoteCopy = _.cloneDeep(config.staticFootnotes)
+    footnoteCopy[footnoteIndex] = footnoteUpdate
+    updateField(null, null, 'staticFootnotes', footnoteCopy)
+  }
+
+  const deleteStaticFootnote = footnoteIndex => {
+    const footnoteCopy = _.cloneDeep(config.staticFootnotes)
+    footnoteCopy.splice(footnoteIndex, 1)
+    updateField(null, null, 'staticFootnotes', footnoteCopy)
+  }
+
+  const getOptions = (opts: string[]) => {
+    return [['', '--Select--']].concat(opts.map(key => [key, key]))
+  }
+
+  const datasets = config.datasets || {}
+
+  const dataColumns = config.dataKey ? getOptions(Object.keys(datasets[config.dataKey]?.data?.[0] || {})) : []
+  const dataSetOptions = getOptions(Object.keys(datasets))
+  return (
+    <>
+      <em>Dynamic Footnotes</em>
+      <div className='row border p-2'>
+        <InputSelect label='Select a Footnote Dataset' value={config.dataKey} options={dataSetOptions} fieldName='dataKey' updateField={updateField} />
+
+        {config.dataKey && (
+          <div className='p-3'>
+            <InputSelect label='Footnote Symbol Column' value={config.dynamicFootnotes?.symbolColumn} options={dataColumns} section='dynamicFootnotes' fieldName='symbolColumn' updateField={updateField} />
+            <InputSelect label='Footnote Text Column' value={config.dynamicFootnotes?.textColumn} options={dataColumns} section='dynamicFootnotes' fieldName='textColumn' updateField={updateField} />
+            <InputSelect label='Footnote Order Column' value={config.dynamicFootnotes?.orderColumn} options={dataColumns} section='dynamicFootnotes' fieldName='orderColumn' updateField={updateField} />
+          </div>
+        )}
+      </div>
+
+      <hr />
+
+      <em>Static Footnotes</em>
+
+      {config.staticFootnotes?.map((note, index) => (
+        <div key={index} className='row border p-2'>
+          <div className='col-8'>
+            <InputSelect label='Symbol' value={note.symbol} options={[['', '--Select--'], ...footnotesSymbols]} fieldName='symbol' updateField={(section, subsection, fieldName, value) => updateStaticFootnote(index, { ...note, symbol: value })} />{' '}
+            <TextField label='Text' value={note.text} fieldName='text' updateField={(section, subsection, fieldName, value) => updateStaticFootnote(index, { ...note, text: value })} />
+          </div>
+          <div className='col-2 ml-4'>
+            <button className='btn btn-danger p-1' onClick={() => deleteStaticFootnote(index)}>
+              Delete
+            </button>
+          </div>
+        </div>
+      ))}
+      <button className='btn btn-primary' onClick={addStaticFootnote}>
+        Add Static Footnote
+      </button>
+    </>
+  )
+}
+
+export default FootnotesEditor

package/components/EditorPanel/VizFilterEditor/VizFilterEditor.tsx

@@ -0,0 +1,227 @@
+import { Select, TextField } from '../Inputs'
+import Tooltip from '../../ui/Tooltip'
+import Icon from '../../ui/Icon'
+import { Visualization } from '../../../types/Visualization'
+import { UpdateFieldFunc } from '../../../types/UpdateFieldFunc'
+import _ from 'lodash'
+import { MultiSelectFilter, VizFilter } from '../../../types/VizFilter'
+import { filterStyleOptions, handleSorting } from '../../Filters'
+import FieldSetWrapper from '../FieldSetWrapper'
+
+import FilterOrder from './components/FilterOrder'
+import { useMemo, useState } from 'react'
+
+type VizFilterProps = {
+  config: Visualization
+  updateField: UpdateFieldFunc<string | VizFilter[] | VizFilter>
+  rawData: Object[]
+}
+
+const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawData }) => {
+  const openControls = useState({})
+  const dataColumns = useMemo(() => {
+    return _.uniq(_.flatten(rawData?.map(row => Object.keys(row))))
+  }, [rawData])
+
+  const removeFilter = index => {
+    let filters = _.cloneDeep(config.filters)
+
+    filters.splice(index, 1)
+
+    updateField(null, null, 'filters', filters)
+  }
+
+  const updateFilterProp = (prop, index, value) => {
+    updateField('filters', index, prop, value)
+  }
+
+  const updateFilterStyle = (index, value) => {
+    const filters = _.cloneDeep(config.filters)
+    const currentFilter = filters[index]
+    currentFilter.filterStyle = value
+    if (value === 'multi-select') {
+      currentFilter.active = Array.isArray(currentFilter.active) ? currentFilter.active : [currentFilter.active]
+    } else if (Array.isArray(currentFilter.active)) {
+      currentFilter.active = currentFilter.active[0]
+    }
+    filters[index] = currentFilter
+    updateField(null, null, 'filters', filters)
+  }
+
+  const handleNameChange = (filterIndex, columnName) => {
+    const values = _.uniq(rawData.map(row => row[columnName]))
+    const copiedFilter = { ..._.cloneDeep(config.filters[filterIndex]), columnName, values }
+    handleSorting(copiedFilter) // sorts dropdown values in place
+    copiedFilter.active = copiedFilter.values[0]
+    const newFilters = config.filters.map((filter, index) => {
+      if (index === filterIndex) return copiedFilter
+      return filter
+    })
+    updateField(null, null, 'filters', newFilters)
+  }
+
+  const addNewFilter = () => {
+    const filters = config.filters ? [...config.filters] : []
+    const newVizFilter: VizFilter = { values: [], filterStyle: 'dropdown' } as VizFilter
+    filters.push(newVizFilter)
+    updateField(null, null, 'filters', filters)
+  }
+
+  const handleFilterOrder = (idx1, idx2, filterIndex, filter) => {
+    // Create a shallow copy of the filter values array & update position of the values
+    const updatedValues = [...filter.values]
+    const [movedItem] = updatedValues.splice(idx1, 1)
+    updatedValues.splice(idx2, 0, movedItem)
+
+    const filtersCopy = _.cloneDeep(config.filters)
+    const filterItem = { ...filtersCopy[filterIndex] }
+
+    // Overwrite filterItem.values since thats what we map through in the editor panel
+    filterItem.values = updatedValues
+    filterItem.orderedValues = updatedValues
+    filterItem.active = updatedValues[0]
+    filterItem.order = 'cust'
+
+    // Update the filters
+    filtersCopy[filterIndex] = filterItem
+
+    updateField(null, null, 'filters', filtersCopy)
+  }
+
+  return (
+    <>
+      {config.filters && (
+        <>
+          <Select
+            value={config.filterBehavior}
+            fieldName='filterBehavior'
+            label='Filter Behavior'
+            updateField={updateField}
+            options={['Apply Button', 'Filter Change']}
+            tooltip={
+              <Tooltip style={{ textTransform: 'none' }}>
+                <Tooltip.Target>
+                  <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                </Tooltip.Target>
+                <Tooltip.Content>
+                  <p>The Apply Button option changes the visualization when the user clicks "apply". The Filter Change option immediately changes the visualization when the selection is changed.</p>
+                </Tooltip.Content>
+              </Tooltip>
+            }
+          />
+          <br />
+          <ul className='filters-list'>
+            {/* Whether filters should apply onChange or Apply Button */}
+
+            {config.filters.map((filter, index) => {
+              if (filter.type === 'url') return <></>
+
+              return (
+                <FieldSetWrapper fieldName={filter.columnName} fieldKey={index} fieldType='Filter' controls={openControls} deleteField={() => removeFilter(index)}>
+                  <label>
+                    <span className='edit-label column-heading'>Filter</span>
+                    <select
+                      value={filter.columnName}
+                      onChange={e => {
+                        handleNameChange(index, e.target.value)
+                      }}
+                    >
+                      <option value=''>- Select Option -</option>
+                      {dataColumns.map((dataKey, index) => (
+                        <option value={dataKey} key={index}>
+                          {dataKey}
+                        </option>
+                      ))}
+                    </select>
+                  </label>
+
+                  <label>
+                    <span className='edit-showDropdown column-heading'>Show Filter Input</span>
+                    <input
+                      type='checkbox'
+                      checked={filter.showDropdown === undefined ? true : filter.showDropdown}
+                      onChange={e => {
+                        updateFilterProp('showDropdown', index, e.target.checked)
+                      }}
+                    />
+                  </label>
+
+                  <label>
+                    <span className='edit-label column-heading'>Filter Style</span>
+
+                    <select
+                      value={filter.filterStyle}
+                      onChange={e => {
+                        updateFilterStyle(index, e.target.value)
+                      }}
+                    >
+                      {filterStyleOptions.map((item, index) => {
+                        return (
+                          <option key={`filter-style-${index}`} value={item}>
+                            {item}
+                          </option>
+                        )
+                      })}
+                    </select>
+                  </label>
+
+                  <label>
+                    <span className='edit-label column-heading'>Label</span>
+                    <input
+                      type='text'
+                      value={filter.label}
+                      onChange={e => {
+                        updateFilterProp('label', index, e.target.value)
+                      }}
+                    />
+                  </label>
+
+                  {filter.filterStyle === 'multi-select' && (
+                    <TextField
+                      label='Select Limit'
+                      value={(filter as MultiSelectFilter).selectLimit}
+                      updateField={updateField}
+                      section='filters'
+                      subsection={index}
+                      fieldName='selectLimit'
+                      type='number'
+                      tooltip={
+                        <Tooltip style={{ textTransform: 'none' }}>
+                          <Tooltip.Target>
+                            <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+                          </Tooltip.Target>
+                          <Tooltip.Content>
+                            <p>The maximum number of items that can be selected.</p>
+                          </Tooltip.Content>
+                        </Tooltip>
+                      }
+                    />
+                  )}
+
+                  <label>
+                    <span className='edit-label column-heading'>Default Value Set By Query String Parameter</span>
+                    <input
+                      type='text'
+                      value={filter.setByQueryParameter}
+                      onChange={e => {
+                        updateFilterProp('setByQueryParameter', index, e.target.value)
+                      }}
+                    />
+                  </label>
+
+                  <FilterOrder filterIndex={index} filter={filter} updateFilterProp={updateFilterProp} handleFilterOrder={handleFilterOrder} />
+                </FieldSetWrapper>
+              )
+            })}
+          </ul>
+        </>
+      )}
+      {!config.filters && <p style={{ textAlign: 'center' }}>There are currently no filters.</p>}
+      <button type='button' onClick={addNewFilter} className='btn btn-primary full-width'>
+        Add Filter
+      </button>
+    </>
+  )
+}
+
+export default VizFilterEditor

package/components/EditorPanel/VizFilterEditor/components/FilterOrder.tsx

@@ -0,0 +1,54 @@
+import { VizFilter } from '../../../../types/VizFilter'
+import { filterOrderOptions } from '../../../Filters'
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd'
+
+type FilterOrderProps = {
+  filterIndex: number
+  filter: VizFilter
+  updateFilterProp: (prop: string, index: number, value: string) => void
+  handleFilterOrder: (sourceIndex: number, destinationIndex: number, filterIndex: number, filter: VizFilter) => void
+}
+
+const FilterOrder: React.FC<FilterOrderProps> = ({ filterIndex, filter, updateFilterProp, handleFilterOrder }) => {
+  return (
+    <label>
+      <span className='edit-filterOrder column-heading'>Filter Order</span>
+      <select value={filter.order ? filter.order : 'asc'} onChange={e => updateFilterProp('order', filterIndex, e.target.value)}>
+        {filterOrderOptions.map((option, index) => {
+          return (
+            <option value={option.value} key={`filter-${index}`}>
+              {option.label}
+            </option>
+          )
+        })}
+      </select>
+
+      {filter.order === 'cust' && (
+        <DragDropContext onDragEnd={({ source, destination }) => handleFilterOrder(source.index, destination.index, filterIndex, filter)}>
+          <Droppable droppableId='filter_order'>
+            {provided => (
+              <ul {...provided.droppableProps} className='sort-list' ref={provided.innerRef} style={{ marginTop: '1em' }}>
+                {filter?.values.map((value, index) => {
+                  return (
+                    <Draggable key={value} draggableId={`draggableFilter-${value}`} index={index}>
+                      {(provided, snapshot) => (
+                        <li>
+                          <div className={snapshot.isDragging ? 'currently-dragging' : ''} style={provided.draggableProps.style} ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
+                            {value}
+                          </div>
+                        </li>
+                      )}
+                    </Draggable>
+                  )
+                })}
+                {provided.placeholder}
+              </ul>
+            )}
+          </Droppable>
+        </DragDropContext>
+      )}
+    </label>
+  )
+}
+
+export default FilterOrder

package/components/EditorPanel/VizFilterEditor/index.ts

@@ -0,0 +1 @@
+export { default } from './VizFilterEditor'

package/components/EditorWrapper/EditorWrapper.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import { Visualization } from '../../types/Visualization'
 import { ViewPort } from '../../types/ViewPort'
 import './editor-wrapper.style.css'
-import { Accordion } from 'react-accessible-accordion'
 
 type StandAloneComponentProps = {
   visualizationKey: string
@@ -12,6 +11,8 @@ type StandAloneComponentProps = {
   setEditing: Function
   hostname: string
   viewport?: ViewPort
+
+  [key: string]: any
 }
 
 type EditorProps = {
@@ -33,9 +34,7 @@ const EditorWrapper: React.FC<React.PropsWithChildren<EditorProps>> = ({ childre
           <div aria-level={2} role='heading' className='heading-2'>
             Configure {type}
           </div>
-          <section>
-            <Accordion allowZeroExpanded={true}>{children}</Accordion>
-          </section>
+          <section>{children}</section>
         </section>
         <div className='preview-wrapper'>
           <Component visualizationKey={visualizationKey} config={visualizationConfig} updateConfig={updateConfig} configUrl={undefined} setEditing={undefined} hostname={undefined} viewport={viewport} />

package/components/EditorWrapper/index.ts

@@ -0,0 +1 @@
+export { default } from './EditorWrapper'

package/components/{Filters.jsx → Filters.tsx}

@@ -1,14 +1,19 @@
-import React, { useState, useEffect, useRef } from 'react'
+import { useState, useEffect } from 'react'
 import { useId } from 'react'
 
 // CDC
-import Button from '@cdc/core/components/elements/Button'
-import { getQueryParams, updateQueryString } from '@cdc/core/helpers/queryStringUtils'
+import Button from './elements/Button'
+import { getQueryParams, updateQueryString } from '../helpers/queryStringUtils'
 
 // Third Party
 import PropTypes from 'prop-types'
+import MultiSelect from './MultiSelect'
+import { Visualization } from '../types/Visualization'
+import { MultiSelectFilter, VizFilter } from '../types/VizFilter'
+import { filterVizData } from '../helpers/filterVizData'
+import { addValuesToFilters } from '../helpers/addValuesToFilters'
 
-export const filterStyleOptions = ['dropdown', 'pill', 'tab', 'tab bar']
+export const filterStyleOptions = ['dropdown', 'pill', 'tab', 'tab bar', 'multi-select']
 
 export const filterOrderOptions = [
   {
@@ -57,7 +62,7 @@ export const useFilters = props => {
 
   // Desconstructing: notice, adding more descriptive visualizationConfig name over config
   // visualizationConfig feels more robust for all vis types so that its not confused with config/state/etc.
-  const { config: visualizationConfig, setConfig, filteredData, setFilteredData, excludedData, filterData, getUniqueValues } = props
+  const { config: visualizationConfig, setConfig, filteredData, setFilteredData, excludedData, getUniqueValues } = props
   const { type, data } = visualizationConfig
 
   /**
@@ -127,7 +132,7 @@ export const useFilters = props => {
 
     // If we're on a chart and not using the apply button
     if (hasStandardFilterBehavior.includes(visualizationConfig.type) && visualizationConfig.filterBehavior === 'Filter Change') {
-      setFilteredData(filterData(newFilters, excludedData))
+      setFilteredData(filterVizData(newFilters, excludedData))
     }
   }
 
@@ -155,7 +160,7 @@ export const useFilters = props => {
     }
 
     if (hasStandardFilterBehavior.includes(visualizationConfig.type)) {
-      setFilteredData(filterData(newFilters, excludedData))
+      setFilteredData(filterVizData(newFilters, excludedData))
     }
 
     setShowApplyButton(false)
@@ -169,12 +174,11 @@ export const useFilters = props => {
     let needsQueryUpdate = false
     const queryParams = getQueryParams()
     newFilters.forEach((filter, i) => {
-      if(!filter.values || filter.values.length === 0){
+      if (!filter.values || filter.values.length === 0) {
         filter.values = getUniqueValues(data, filter.columnName)
       }
       newFilters[i].active = handleSorting(filter).values[0]
 
-
       if (filter.setByQueryParameter && queryParams[filter.setByQueryParameter] !== filter.active) {
         queryParams[filter.setByQueryParameter] = filter.active
         needsQueryUpdate = true
@@ -190,9 +194,8 @@ export const useFilters = props => {
     if (type === 'map') {
       setFilteredData(newFilters, excludedData)
     } else {
-      setFilteredData(filterData(newFilters, excludedData))
+      setFilteredData(filterVizData(newFilters, excludedData))
     }
-
   }
 
   const filterConstants = {
@@ -217,11 +220,17 @@ export const useFilters = props => {
   }
 }
 
-const Filters = props => {
-  const { config: visualizationConfig, filteredData, dimensions, getUniqueValues } = props
-  const { filters, type, general, theme, filterBehavior, data } = visualizationConfig
+type FilterProps = {
+  filteredData
+  dimensions
+  config: Visualization
+}
+
+const Filters = (props: FilterProps) => {
+  const { config: visualizationConfig, filteredData, dimensions } = props
+  const { filters, type, general, theme, filterBehavior } = visualizationConfig
   const [mobileFilterStyle, setMobileFilterStyle] = useState(false)
-  const [selectedFilter, setSelectedFilter] = useState('')
+  const [selectedFilter, setSelectedFilter] = useState<EventTarget>(null)
   const id = useId()
 
   // useFilters hook provides data and logic for handling various filter functions
@@ -247,7 +256,7 @@ const Filters = props => {
 
   useEffect(() => {
     if (selectedFilter) {
-      let el = document.getElementById(selectedFilter.id)
+      const el = document.getElementById(selectedFilter.id)
       if (el) el.focus()
     }
   }, [changeFilterActive, selectedFilter])
@@ -256,21 +265,21 @@ const Filters = props => {
 
   const filterSectionClassList = ['filters-section', type === 'map' ? general.headerColor : visualizationConfig?.visualizationType === 'Spark Line' ? null : theme]
   // Exterior Section Wrapper
-  Filters.Section = props => {
+  Filters.Section = ({ children }) => {
     return (
       visualizationConfig?.filters && (
         <section className={filterSectionClassList.join(' ')}>
           <p className='filters-section__intro-text'>
             {filters?.some(f => f.active) ? filterConstants.introText : ''} {visualizationConfig.filterBehavior === 'Apply Button' && filterConstants.applyText}
           </p>
-          <div className='filters-section__wrapper'>{props.children}</div>
+          <div className='filters-section__wrapper'>{children}</div>
         </section>
       )
     )
   }
 
   // Apply/Reset Buttons
-  Filters.ApplyBehavior = props => {
+  Filters.ApplyBehavior = () => {
     if (filterBehavior !== 'Apply Button') return
     const applyButtonClasses = [general?.headerColor ? general.headerColor : theme, 'apply']
     return (
@@ -348,7 +357,7 @@ const Filters = props => {
       // Remove fromHash if it exists on filters to loop so we can loop nicely
       delete filtersToLoop.fromHash
 
-      return filtersToLoop.map((singleFilter, outerIndex) => {
+      return addValuesToFilters<VizFilter>(filtersToLoop, visualizationConfig.data).map((singleFilter: VizFilter, outerIndex) => {
         if (singleFilter.showDropdown === false) return
 
         const values = []
@@ -356,11 +365,11 @@ const Filters = props => {
         const tabValues = []
         const tabBarValues = []
 
-        const { active, queuedActive, label, filterStyle } = singleFilter
+        const { active, queuedActive, label, filterStyle } = singleFilter as VizFilter
 
         handleSorting(singleFilter)
 
-        singleFilter.values.forEach((filterOption, index) => {
+        singleFilter.values?.forEach((filterOption, index) => {
           const pillClassList = ['pill', active === filterOption ? 'pill--active' : null, theme && theme]
           const tabClassList = ['tab', active === filterOption && 'tab--active', theme && theme]
 
@@ -424,6 +433,15 @@ const Filters = props => {
               {filterStyle === 'pill' && !mobileFilterStyle && <Filters.Pills pills={pillValues} />}
               {filterStyle === 'tab bar' && !mobileFilterStyle && <Filters.TabBar filter={singleFilter} index={outerIndex} />}
               {(filterStyle === 'dropdown' || mobileFilterStyle) && <Filters.Dropdown filter={singleFilter} index={outerIndex} label={label} active={queuedActive || active} filters={values} />}
+              {filterStyle === 'multi-select' && (
+                <MultiSelect
+                  options={singleFilter.values.map(v => ({ value: v, label: v }))}
+                  fieldName={outerIndex}
+                  updateField={(_section, _subSection, fieldName, value) => changeFilterActive(fieldName, value)}
+                  selected={singleFilter.active as string[]}
+                  limit={(singleFilter as MultiSelectFilter).selectLimit || 5}
+                />
+              )}
             </>
           </div>
         )
@@ -453,8 +471,6 @@ Filters.propTypes = {
   setConfig: PropTypes.func,
   // exclusions
   excludedData: PropTypes.array,
-  // function for filtering the data
-  filterData: PropTypes.func,
   dimensions: PropTypes.array
 }
 

package/components/Footnotes/Footnotes.tsx

@@ -0,0 +1,25 @@
+import { Footnote } from '../../types/Footnotes'
+import './footnotes.css'
+
+type FootnotesProps = {
+  footnotes: Footnote[]
+}
+
+const Footnotes: React.FC<FootnotesProps> = ({ footnotes }) => {
+  return (
+    <footer className='col-12 m-3 mt-1 mb-0'>
+      <ul className='cove-footnotes'>
+        {footnotes.map((note, i) => {
+          return (
+            <li key={note.symbol + i} className='mb-1'>
+              {note.symbol && <span className='mr-1'>{note.symbol}</span>}
+              {note.text}
+            </li>
+          )
+        })}
+      </ul>
+    </footer>
+  )
+}
+
+export default Footnotes

package/components/Footnotes/FootnotesStandAlone.tsx

@@ -0,0 +1,45 @@
+import EditorWrapper from '../EditorWrapper'
+import Footnotes from './Footnotes'
+import FootnotesEditor from '../EditorPanel/FootnotesEditor'
+import { ViewPort } from '../../types/ViewPort'
+import FootnotesConfig, { Footnote } from '../../types/Footnotes'
+import _ from 'lodash'
+import { useMemo } from 'react'
+import { updateFieldFactory } from '../../helpers/updateFieldFactory'
+
+type StandAloneProps = {
+  isEditor?: boolean
+  visualizationKey: string
+  config: FootnotesConfig
+  updateConfig?: (config: FootnotesConfig) => void
+  viewport?: ViewPort
+}
+
+const FootnotesStandAlone: React.FC<StandAloneProps> = ({ visualizationKey, config, viewport, isEditor, updateConfig }) => {
+  const updateField = updateFieldFactory<Footnote[]>(config, updateConfig)
+  if (isEditor)
+    return (
+      <EditorWrapper component={FootnotesStandAlone} visualizationKey={visualizationKey} visualizationConfig={config} updateConfig={updateConfig} type={'Footnotes'} viewport={viewport}>
+        <FootnotesEditor key={visualizationKey} config={config} updateField={updateField} />
+      </EditorWrapper>
+    )
+
+  // get the api footnotes from the config
+  const apiFootnotes = useMemo(() => {
+    if (config.dataKey && config.dynamicFootnotes) {
+      const { symbolColumn, textColumn, orderColumn } = config.dynamicFootnotes
+      const configData = config.formattedData || config.data
+      const _data = configData.map(row => _.pick(row, [symbolColumn, textColumn, orderColumn]))
+      _data.sort((a, b) => a[orderColumn] - b[orderColumn])
+      return _data.map(row => ({ symbol: row[symbolColumn], text: row[textColumn] }))
+    }
+    return []
+  }, [config.dynamicFootnotes, config.formattedData, config.data])
+
+  // get static footnotes from the config.footnotes
+  const staticFootnotes = config.staticFootnotes || []
+
+  return <Footnotes footnotes={[...apiFootnotes, ...staticFootnotes]} />
+}
+
+export default FootnotesStandAlone

package/components/Footnotes/footnotes.css

@@ -0,0 +1,5 @@
+:is(ul).cove-footnotes {
+  :is(li) {
+    list-style: none;
+  }
+}

package/components/Footnotes/index.ts

@@ -0,0 +1 @@
+export { default } from './Footnotes'