@cdc/core 4.24.5 → 4.24.9-1

package/types/VizFilter.ts

@@ -1,13 +1,45 @@
-export type VizFilter = {
-  active: string
+export type OrderBy = 'asc' | 'desc' | 'cust'
+
+export type FilterBase = {
   columnName: string
-  filterStyle: 'tab' | 'pill' | 'tab bar' | 'dropdown'
+  values: string[]
+  showDropdown: boolean
+  id: number
+  parents: number[]
+}
+
+export type VizFilterStyle =
+  | 'tab'
+  | 'pill'
+  | 'tab bar'
+  | 'dropdown'
+  | 'dropdown bar'
+  | 'multi-select'
+  | 'nested-dropdown'
+export type GeneralFilter = FilterBase & {
+  active: string
+  queuedActive: string
+  filterStyle: VizFilterStyle
   label: string
-  order: 'asc' | 'desc' | 'cust'
-  orderedValues?: string[]
+  order: OrderBy
+  orderedValues?: string[] // should only exist if the order is 'cust'
   queryParameter: string
   setByQueryParameter: string
-  showDropdown: boolean
+  subGrouping: SubGrouping
   type: 'url'
-  values: string[]
 }
+
+export type MultiSelectFilter = {
+  active: string[]
+  selectLimit: number
+} & Omit<GeneralFilter, 'active'>
+
+export type SubGrouping = {
+  active: string
+  columnName: string
+  setByQueryParameter: string
+  order?: OrderBy
+  valuesLookup: Record<string, { orderedValues?: string[]; values: string[] }>
+}
+
+export type VizFilter = GeneralFilter | MultiSelectFilter

package/components/AdvancedEditor.jsx

@@ -1,74 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import MapIcon from '../assets/map-folded.svg'
-import ChartIcon from '../assets/icon-chart-bar.svg'
-import MarkupIncludeIcon from '../assets/icon-code.svg'
-
-export const AdvancedEditor = ({ loadConfig, state, convertStateToConfig }) => {
-  const [advancedToggle, setAdvancedToggle] = useState(false)
-  const [configTextboxValue, setConfigTextbox] = useState({})
-
-  useEffect(() => {
-    let parsedData = state
-    if (state.type !== 'dashboard') {
-      parsedData = convertStateToConfig()
-    } else {
-      parsedData = JSON.parse(JSON.stringify(parsedData))
-    }
-    const formattedData = JSON.stringify(parsedData, undefined, 2)
-
-    setConfigTextbox(formattedData)
-  }, [state])
-
-  const typeLookup = {
-    chart: ['Charts', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/bar-chart.html', <ChartIcon />],
-    dashboard: ['Dashboard', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/bar-chart.html', <ChartIcon />],
-    map: ['Maps', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/data-map.html', <MapIcon />],
-    'markup-include': ['Markup Include', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/Markup-Include.html', <MarkupIncludeIcon />]
-  }
-
-  if (!state.type) return <></>
-  return (
-    <>
-      <a href={typeLookup[state.type][1]} target='_blank' rel='noopener noreferrer' className='guidance-link'>
-        {typeLookup[state.type][2]}
-        <div>
-          <span className='heading-3'>Get Help with {typeLookup[state.type][0]}</span>
-          <p>Examples and documentation</p>
-        </div>
-      </a>
-      <div className='advanced'>
-        <span className='advanced-toggle-link' onClick={() => setAdvancedToggle(!advancedToggle)}>
-          <span>{advancedToggle ? `— ` : `+ `}</span>Advanced Options
-        </span>
-        {advancedToggle && (
-          <React.Fragment>
-            <section className='error-box py-2 px-3 my-2'>
-              <div>
-                <strong className='pt-1'>Warning</strong>
-                <p>This can cause serious errors in your visualization.</p>
-              </div>
-            </section>
-            <p className='pb-2'>
-              This tool displays the actual <acronym title='JavaScript Object Notation'>JSON</acronym> configuration that is generated by this editor and allows you to edit properties directly and apply them.
-            </p>
-            <button
-              className='btn'
-              onClick={() => {
-                navigator.clipboard.writeText(configTextboxValue)
-                alert('Copied!')
-              }}
-            >
-              Copy to Clipboard
-            </button>
-            <textarea value={configTextboxValue} onChange={event => setConfigTextbox(event.target.value)} />
-            <button className='btn full-width' onClick={() => loadConfig(JSON.parse(configTextboxValue))}>
-              Apply
-            </button>
-          </React.Fragment>
-        )}
-      </div>
-    </>
-  )
-}
-
-export default AdvancedEditor

package/components/EditorPanel/VizFilterEditor.tsx

@@ -1,234 +0,0 @@
-import { AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
-import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd'
-import { Select } 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 { VizFilter } from '../../types/VizFilter'
-import { filterStyleOptions, filterOrderOptions, handleSorting } from '../Filters'
-
-type VizFilterProps = {
-  config: Visualization
-  updateField: UpdateFieldFunc<string | VizFilter[] | VizFilter>
-  rawData: Object[]
-}
-
-const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawData }) => {
-  const getFilters = () => {
-    return _.uniq(_.flatten(rawData.map(row => Object.keys(row))))
-  }
-  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 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 />
-        </>
-      )}
-      {config.filters && (
-        <ul className='filters-list'>
-          {/* Whether filters should apply onChange or Apply Button */}
-
-          {config.filters.map((filter, index) => {
-            if (filter.type === 'url') return <></>
-
-            return (
-              <fieldset className='edit-block' key={index}>
-                <button
-                  type='button'
-                  className='remove-column'
-                  onClick={() => {
-                    removeFilter(index)
-                  }}
-                >
-                  Remove
-                </button>
-                <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>
-                    {getFilters().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 => {
-                      updateFilterProp('filterStyle', 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>
-
-                <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>
-
-                <label>
-                  <span className='edit-filterOrder column-heading'>Filter Order</span>
-                  <select value={filter.order ? filter.order : 'asc'} onChange={e => updateFilterProp('order', index, 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, index, config.filters[index])}>
-                      <Droppable droppableId='filter_order'>
-                        {provided => (
-                          <ul {...provided.droppableProps} className='sort-list' ref={provided.innerRef} style={{ marginTop: '1em' }}>
-                            {config.filters[index]?.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>
-              </fieldset>
-            )
-          })}
-        </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