@cdc/core 4.23.2 → 4.23.4

package/assets/icon-area-chart.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.31 82.55"><path d="M88.49,65.65H15.29V9.04c0-1.1-.9-2-2-2H7.82c-1.1,0-2,.9-2,2V73.13c0,1.1,.9,2,2,2H88.49c1.1,0,2-.9,2-2v-5.48c0-1.1-.9-2-2-2Z"/><path d="M87.91,60.65c-.02-.12-2.46-12.63-5.53-24.97-5.97-23.99-8.8-26-10.99-26-2.54,0-4.17,3.55-7.92,12.31-.67,1.56-1.4,3.27-2.18,5.02-1.66-4.14-3.14-5.9-4.84-5.9-2.39,0-4.05,3.42-7.07,9.64-5.56,11.44-13.97,28.72-29.12,28.72-.8,0-1.46,.65-1.46,1.45s.65,1.45,1.46,1.45H86.48c.43,0,.85-.19,1.12-.53,.28-.34,.39-.78,.31-1.2Zm-46.88-1.25c8.93-4.92,15.3-15.3,19.83-24.54,2.62,8.88,4.97,20.28,5.83,24.58l-25.66-.04Z"/></svg>

package/assets/icon-chart-box-whisker.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.31 82.55"><path d="M54.68,29.14h-4.1V8.43h2.68c.5,0,.9-.15,1.19-.46,.46-.48,.44-1.11,.42-1.62,0-.11,0-.22,0-.34s0-.24,0-.34c.02-.5,.05-1.13-.42-1.62-.29-.3-.69-.46-1.19-.46h-10.2c-.5,0-.9,.15-1.19,.46-.47,.48-.44,1.11-.42,1.62,0,.11,0,.23,0,.34s0,.23,0,.34c-.02,.5-.05,1.13,.42,1.62,.29,.3,.69,.46,1.19,.46h2.68V29.14h-4.1c-1.33,0-2.42,1.09-2.42,2.42v31.31c0,1.33,1.09,2.42,2.42,2.42h4.1v7.97h-2.68c-.5,0-.9,.15-1.19,.46-.46,.48-.44,1.11-.42,1.62,0,.11,0,.22,0,.34s0,.24,0,.34c-.02,.5-.05,1.13,.42,1.62,.29,.3,.69,.46,1.19,.46h10.2c.5,0,.9-.15,1.19-.46,.47-.48,.44-1.11,.42-1.62,0-.11,0-.23,0-.34s0-.23,0-.34c.02-.5,.05-1.13-.42-1.62-.29-.3-.69-.46-1.19-.46h-2.68v-7.97h4.1c1.33,0,2.42-1.09,2.42-2.42V31.56c0-1.33-1.09-2.42-2.42-2.42Zm-2.42,20.5v10.81h-8.2v-10.81h8.2Zm-8.2-4.84v-10.81h8.2v10.81h-8.2Z"/></svg>

package/assets/icon-chart-scatterplot.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.31 82.55"><path d="M88.49,65.65H15.29V9.04c0-1.1-.9-2-2-2H7.82c-1.1,0-2,.9-2,2V73.13c0,1.1,.9,2,2,2H88.49c1.1,0,2-.9,2-2v-5.48c0-1.1-.9-2-2-2Z"/><g><path d="M30.22,49.19c-1.79,0-3.24,1.45-3.24,3.24s1.45,3.24,3.24,3.24,3.24-1.45,3.24-3.24-1.45-3.24-3.24-3.24Z"/><path d="M33.06,35.59c-1.79,0-3.24,1.45-3.24,3.24s1.45,3.24,3.24,3.24,3.24-1.45,3.24-3.24-1.45-3.24-3.24-3.24Z"/><path d="M48.12,37.83c-1.79,0-3.24,1.45-3.24,3.24s1.45,3.24,3.24,3.24,3.24-1.45,3.24-3.24-1.45-3.24-3.24-3.24Z"/><circle cx="49.64" cy="22.73" r="3.24"/><path d="M64.53,19.49c-1.79,0-3.24,1.45-3.24,3.24s1.45,3.24,3.24,3.24,3.24-1.45,3.24-3.24-1.45-3.24-3.24-3.24Z"/><path d="M57.95,31.11c-1.79,0-3.24,1.45-3.24,3.24s1.45,3.24,3.24,3.24,3.24-1.45,3.24-3.24-1.45-3.24-3.24-3.24Z"/><path d="M74.53,11.54c-1.79,0-3.24,1.45-3.24,3.24s1.45,3.24,3.24,3.24,3.24-1.45,3.24-3.24-1.45-3.24-3.24-3.24Z"/></g></svg>

package/components/CoveMediaControls.jsx

@@ -83,7 +83,7 @@ const generateMedia = (state, type, elementToCapture) => {
       console.warn('COVE: pdf downloads disabled')
       break
     default:
-      console.warn("generateMedia param 2 type must be 'image' or 'pdf'")
+      console.warn("COVE: generateMedia param 2 type must be 'image' or 'pdf'")
       break
   }
 }
@@ -127,7 +127,11 @@ const Link = ({ config }) => {
 
 // TODO: convert to standardized COVE section
 const Section = ({ children, classes }) => {
-  return <section className={classes.join(' ')}>{children}</section>
+  return (
+    <section className={classes.join(' ')}>
+      <span>{children}</span>
+    </section>
+  )
 }
 
 const CoveMediaControls = () => null

package/components/Filters.jsx

@@ -0,0 +1,368 @@
+import React, { useState, useEffect } from 'react'
+
+// CDC
+import Button from '@cdc/core/components/elements/Button'
+
+// Third Party
+import PropTypes from 'prop-types'
+
+export const useFilters = props => {
+  const [showApplyButton, setShowApplyButton] = useState(false)
+
+  // 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 } = props
+  const { type, filterBehavior, filters } = visualizationConfig
+
+  const filterStyleOptions = ['dropdown', 'pill', 'tab', 'tab bar']
+
+  const filterOrderOptions = [
+    {
+      label: 'Ascending Alphanumeric',
+      value: 'asc'
+    },
+    {
+      label: 'Descending Alphanumeric',
+      value: 'desc'
+    },
+    {
+      label: 'Custom',
+      value: 'cust'
+    }
+  ]
+
+  /**
+   * Re-orders a filter based on two indices and updates the runtime filters array and filters state
+   * @param {number} idx1 - The index of the original position of the filter value.
+   * @param {number} idx2 - The index of the new position for the filter value.
+   * @param {number} filterIndex - The index of the filter item within the array of filter items.
+   * @param {object} filter - The filter item itself, which contains an array of filter values.
+   * @return {void} None. This function only updates the state of the component.
+   *
+   * @modifies {object} - The filter object passed in as a parameter
+   * @modifies {array} - The filteredData state if visualizationConfig.type equals 'map'
+   * @modifies {object} - The visualizationConfig state
+   */
+  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 = visualizationConfig.type === 'chart' ? [...visualizationConfig.filters] : [...filteredData]
+    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
+
+    if (visualizationConfig.type === 'map') {
+      setFilteredData(filtersCopy)
+    }
+
+    setConfig({ ...visualizationConfig, filters: filtersCopy })
+  }
+
+  const announceChange = text => {}
+
+  const changeFilterActive = (index, value) => {
+    let newFilters = visualizationConfig.type === 'map' ? [...filteredData] : [...visualizationConfig.filters]
+    newFilters[index].active = value
+
+    // If this is a button filter type show the button.
+    if (visualizationConfig.filterBehavior === 'Apply Button') {
+      setShowApplyButton(true)
+    }
+
+    // If we're not using the apply button we can set the filters right away.
+    if (visualizationConfig.filterBehavior !== 'Apply Button') {
+      setConfig({
+        ...visualizationConfig,
+        filters: newFilters
+      })
+    }
+
+    // Used for setting active filter, fromHash breaks the filteredData functionality.
+    if (visualizationConfig.type === 'map' && visualizationConfig.filterBehavior === 'Filter Change') {
+      setFilteredData(newFilters)
+    }
+
+    // If we're on a chart and not using the apply button
+    if (visualizationConfig.type === 'chart' && visualizationConfig.filterBehavior === 'Filter Change') {
+      setFilteredData(filterData(newFilters, excludedData))
+    }
+  }
+
+  const handleApplyButton = newFilters => {
+    setConfig({ ...visualizationConfig, filters: newFilters })
+
+    if (type === 'map') {
+      setFilteredData(newFilters, excludedData)
+    }
+
+    if (type === 'chart') {
+      setFilteredData(filterData(newFilters, excludedData))
+    }
+
+    setShowApplyButton(false)
+  }
+
+  const handleReset = e => {
+    let newFilters = [...visualizationConfig.filters]
+    e.preventDefault()
+
+    // reset to first item in values array.
+    newFilters.map(filter => {
+      filter = handleSorting(filter)
+      filter.active = filter.values[0]
+      return filter
+    })
+
+    if (type === 'map') {
+      setFilteredData(newFilters, excludedData)
+    } else {
+      setFilteredData(filterData(newFilters, excludedData))
+    }
+
+    setConfig({ ...visualizationConfig, filters: newFilters })
+  }
+
+  const filterConstants = {
+    buttonText: 'Apply Filters',
+    resetText: 'Reset All',
+    introText: `Make a selection from the filters to change the visualization information.`,
+    applyText: 'Select the apply button to update the visualization information.'
+  }
+
+  const handleSorting = singleFilter => {
+    const { order } = singleFilter
+
+    const sortAsc = (a, b) => {
+      return a.toString().localeCompare(b.toString(), 'en', { numeric: true })
+    }
+
+    const sortDesc = (a, b) => {
+      return b.toString().localeCompare(a.toString(), 'en', { numeric: true })
+    }
+
+    if (!order || order === '') {
+      singleFilter.order = 'asc'
+    }
+
+    if (order === 'desc') {
+      singleFilter.values = singleFilter.values.sort(sortDesc)
+    }
+
+    if (order === 'asc') {
+      singleFilter.values = singleFilter.values.sort(sortAsc)
+    }
+    return singleFilter
+  }
+
+  // prettier-ignore
+  return {
+    handleApplyButton,
+    changeFilterActive,
+    announceChange,
+    showApplyButton,
+    handleReset,
+    filterConstants,
+    filterStyleOptions,
+    filterOrderOptions,
+    handleFilterOrder,
+    handleSorting
+  }
+}
+
+const Filters = props => {
+  const { config: visualizationConfig, filteredData, dimensions } = props
+  const { filters, type, general, theme, filterBehavior } = visualizationConfig
+  const [mobileFilterStyle, setMobileFilterStyle] = useState(false)
+
+  // useFilters hook provides data and logic for handling various filter functions
+  // prettier-ignore
+  const {
+    handleApplyButton,
+    changeFilterActive,
+    announceChange,
+    showApplyButton,
+    handleReset,
+    filterConstants,
+    handleSorting
+  } = useFilters(props)
+
+  useEffect(() => {
+    if (!dimensions) return
+    if (dimensions[0] < 768 && filters?.length > 0) {
+      setMobileFilterStyle(true)
+    } else {
+      setMobileFilterStyle(false)
+    }
+  }, [dimensions])
+
+  const Filters = props => props.children
+
+  const filterSectionClassList = ['filters-section', type === 'map' ? general.headerColor : theme]
+
+  // Exterior Section Wrapper
+  Filters.Section = props => {
+    return (
+      <section className={filterSectionClassList.join(' ')}>
+        <p className='filters-section__intro-text'>
+          {filterConstants.introText} {visualizationConfig.filterBehavior === 'Apply Button' && filterConstants.applyText}
+        </p>
+        <div className='filters-section__wrapper'>{props.children}</div>
+      </section>
+    )
+  }
+
+  // Apply/Reset Buttons
+  Filters.ApplyBehavior = props => {
+    if (filterBehavior !== 'Apply Button') return
+    const applyButtonClasses = [general?.headerColor ? general.headerColor : theme, 'apply']
+    return (
+      <div className='filters-section__buttons'>
+        <Button onClick={() => handleApplyButton(filters)} disabled={!showApplyButton} className={applyButtonClasses.join(' ')}>
+          {filterConstants.buttonText}
+        </Button>
+        <a href='#!' role='button' onClick={handleReset}>
+          {filterConstants.resetText}
+        </a>
+      </div>
+    )
+  }
+
+  Filters.TabBar = props => {
+    const { filter: singleFilter, index: outerIndex } = props
+    return (
+      <section className='single-filters__tab-bar'>
+        {singleFilter.values.map(filter => {
+          const buttonClassList = ['button__tab-bar', singleFilter.active === filter ? 'button__tab-bar--active' : '']
+          return (
+            <button className={buttonClassList.join(' ')} key={filter} onClick={e => changeFilterActive(outerIndex, filter)}>
+              {filter}
+            </button>
+          )
+        })}
+      </section>
+    )
+  }
+
+  Filters.Pills = props => props.pills
+
+  Filters.Tabs = props => props.tabs
+
+  Filters.Dropdown = props => {
+    const { index: outerIndex, label, active, filters } = props
+    return (
+      <select
+        id={`filter-${outerIndex}`}
+        name={label}
+        className='filter-select'
+        data-index='0'
+        value={active}
+        onChange={e => {
+          changeFilterActive(outerIndex, e.target.value)
+          announceChange(`Filter ${label} value has been changed to ${e.target.value}, please reference the data table to see updated values.`)
+        }}
+      >
+        {filters}
+      </select>
+    )
+  }
+
+  // Resolve Filter Styles
+  Filters.Style = () => {
+    if (filters || filteredData) {
+      // Here charts is using config.filters where maps is using a runtime value
+      let filtersToLoop = type === 'map' ? filteredData : filters
+
+      // Remove fromHash if it exists on filters to loop so we can loop nicely
+      delete filtersToLoop.fromHash
+
+      return filtersToLoop.map((singleFilter, outerIndex) => {
+        const values = []
+        const pillValues = []
+        const tabValues = []
+        const tabBarValues = []
+
+        const { active, label, filterStyle } = singleFilter
+
+        handleSorting(singleFilter)
+
+        singleFilter.values.forEach((filterOption, index) => {
+          const pillClassList = ['pill', active === filterOption ? 'pill--active' : null, theme && theme]
+          const tabClassList = ['tab', active === filterOption && 'tab--active', theme && theme]
+
+          pillValues.push(
+            <div className='pill__wrapper'>
+              <button className={pillClassList.join(' ')} onClick={e => changeFilterActive(outerIndex, filterOption)} name={label}>
+                {filterOption}
+              </button>
+            </div>
+          )
+
+          values.push(
+            <option key={index} value={filterOption}>
+              {filterOption}
+            </option>
+          )
+
+          tabValues.push(
+            <button className={tabClassList.join(' ')} onClick={e => changeFilterActive(outerIndex, filterOption)}>
+              {filterOption}
+            </button>
+          )
+
+          tabBarValues.push(filterOption)
+        })
+
+        const classList = ['single-filters', mobileFilterStyle ? 'single-filters--dropdown' : `single-filters--${filterStyle}`]
+
+        return (
+          <div className={classList.join(' ')} key={outerIndex}>
+            <>
+              {label && <label htmlFor={label}>{label}</label>}
+              {filterStyle === 'tab' && !mobileFilterStyle && <Filters.Tabs tabs={tabValues} />}
+              {filterStyle === 'pill' && !mobileFilterStyle && <Filters.Pills pills={pillValues} />}
+              {filterStyle === 'tab bar' && !mobileFilterStyle && <Filters.TabBar filter={singleFilter} index={outerIndex} />}
+              {(filterStyle === 'dropdown' || mobileFilterStyle) && <Filters.Dropdown index={outerIndex} label={label} active={active} filters={values} />}
+            </>
+          </div>
+        )
+      })
+    }
+  }
+
+  if (visualizationConfig?.filters?.length === 0 || props?.filteredData?.length === 0) return
+  return (
+    <Filters>
+      <Filters.Section>
+        <Filters.Style />
+        <Filters.ApplyBehavior />
+      </Filters.Section>
+    </Filters>
+  )
+}
+
+Filters.propTypes = {
+  // runtimeFilters in place
+  filteredData: PropTypes.array,
+  // function for updating the runtime filters
+  setFilteredData: PropTypes.func,
+  // the full apps config
+  config: PropTypes.object,
+  // updating function for setting fitlerBehavior
+  setConfig: PropTypes.func,
+  // exclusions
+  excludedData: PropTypes.array,
+  // function for filtering the data
+  filterData: PropTypes.func
+}
+
+export default Filters

package/components/inputs/InputToggle.jsx

@@ -17,6 +17,7 @@ const InputSlider = ({
   i = null,
   min = null,
   max = null,
+  onClick,
   ...attributes
 }) => {
   const [value, setValue] = useState(stateValue)
@@ -51,10 +52,15 @@ const InputSlider = ({
     }
   }, [value])
 
+  const clickHandler = e => {
+    setValue(!value)
+    if (onClick) onClick(e)
+  }
+
   return (
     <div className='input-group'>
       {label && <label>{label}</label>}
-      <div className={'cove-input__slider' + (size === 'small' ? '--small' : size === 'large' ? '--large' : '') + sliderTypeClass() + (value ? ' active' : '')} onClick={() => setValue(!value)}>
+      <div className={'cove-input__slider' + (size === 'small' ? '--small' : size === 'large' ? '--large' : '') + sliderTypeClass() + (value ? ' active' : '')} onClick={clickHandler}>
         <div className='cove-input__slider-button' />
         <div className='cove-input__slider-track' style={value && activeColor ? { backgroundColor: activeColor } : null} />
         <input className='cove-input--hidden' type='checkbox' name={name()} checked={value || false} readOnly />

package/components/ui/Icon.jsx

@@ -74,7 +74,8 @@ const Icon = ({ display = null, base, alt = '', size, color, style, ...attribute
   const styles = {
     ...style,
     color: color ? color : null,
-    width: size ? size + 'px' : null
+    width: size ? size + 'px' : null,
+    cursor: display === 'move' ? 'move' : 'default'
   }
 
   return (

package/data/colorPalettes.js

@@ -43,7 +43,27 @@ const colorPalettes2 = {
   'sequential-orange-(MPX)': ['#FFEFCF', '#FFD49C', '#F7A866', '#EB7723', '#B95117', '#862B0B'],
   'sequential-green': ['#C7E9C0', '#A1D99B', '#74C476', '#41AB5D', '#238B45', '#005A32']
 }
+// * ============= Palettes for Paired bar Chart ==========  * //
+export const colorPalettes3 = {
+  'monochrome-1': ['#A6CEE3', '#15017A'],
+  'monochrome-2': ['#C2C0FC', '#15017A'],
+  'monochrome-3': ['#cab2d6', '#6a3d9a'],
+  'monochrome-4': ['#C2C0FC', '#6a3d9a'],
+  'monochrome-5': ['#fedab8', '#bf5b17'],
+  'cool-1': ['#b2df8a', '#1f78b4'],
+  'cool-2': ['#a6cee3', '#33A02C'],
+  'cool-3': ['#C2C0FC', '#386cb0'],
+  'cool-4': ['#33A02c', '#6a3d9a'],
+  'cool-5': ['#a6cee3', '#6a3d9a'],
+  'warm-1': ['#e31a1c', '#fedab8'],
+  'complementary-1': ['#1f78b4', '#e6ab02'],
+  'complementary-2': ['#1f78b4', '#ff7f00'],
+  'complementary-3': ['#6a3d9a', '#ff7f00'],
+  'complementary-4': ['#6a3d9a', '#e6ab02'],
+  'complementary-5': ['#e31a90', '#1b9e77']
+}
 
-export const colorPalettesChart = updatePaletteNames(colorPalettes2) // adds reverse keyword to eact palette
-const colorPalettes = updatePaletteNames(colorPalettesMap) // adds reverse keyword to eact palette
+export const colorPalettesChart = updatePaletteNames(colorPalettes2)
+const colorPalettes = updatePaletteNames(colorPalettesMap)
+export const twoColorPalette = updatePaletteNames(colorPalettes3)
 export default colorPalettes

package/helpers/DataTransform.js

@@ -196,6 +196,60 @@ export class DataTransform {
 
     return data;
   }
+
+    /**
+     * cleanData
+     *
+    // This cleans a data set by:
+    // - removing commas and $ signs from any numbers to try to plot the point
+    // - removing any data points that are NOT composed of of all digits (but allow a decimal point)
+    // Without this the charts "break" and do not render
+    *
+    * Inputs: data as array, excludeKey indicates which key to use to NOT clean
+    *                        Example: "Date" should not be cleaned if part of the data
+    * 
+    * Output: returns the cleanedData
+    * 
+    * Set testing = true if you need to see before and after data
+    * 
+    */
+  cleanData (data, excludeKey, testing = false) {
+    let cleanedupData = []
+    if (testing) console.log('## Data to clean=', data)
+    if (excludeKey === undefined) {
+      console.log('COVE: cleanData excludeKey undefined')
+      return data // because no excludeKey 
+    }
+    data.forEach(function (d, i) {
+      if (testing) console.log("clean", i, " d", d);
+      let cleaned = {}
+      Object.keys(d).forEach(function (key) {
+        if (key === excludeKey) {
+          // pass thru
+          cleaned[key] = d[key]
+        } else {
+          // remove comma and dollar signs
+          if (testing) console.log("typeof d[key] is ", typeof d[key]);
+          let tmp = "";
+          if (typeof d[key] === 'string') {
+            tmp = d[key] !== null && d[key] !== '' ? d[key].replace(/[,\$]/g, '') : ''
+          } else {
+            tmp =  d[key] !== null && d[key] !== '' ? d[key] : ''
+          }
+          if ((tmp !== '' && tmp !== null && !isNaN(tmp)) || (tmp !== '' && tmp !== null && /\d+\.?\d*/.test(tmp))) {
+            cleaned[key] = tmp
+          } else { cleaned[key] = '' }
+          // if you get here, then return nothing to skip bad data point
+        }
+      })
+      if (testing) console.log("cleaned=", cleaned)
+      cleanedupData.push(cleaned)
+    })
+    if (testing) console.log('## cleanedData =', cleanedupData)
+    return cleanedupData
+  }
+
+
 }
 
 export default DataTransform

package/helpers/isNumberLog.js

@@ -1,7 +1,7 @@
 export default function isNumberLog(value = '', state = null) {
   // if you need to check data to see if there is junk in there that can't be handled
   // you can run the points through this and see values on the console
-  console.log("entering isNumber valuetype is:",typeof value);
+  console.log("entering isNumberLog value, valuetype:",value,typeof value);
   var test;
   if (typeof value === 'number') {
     test = !Number.isNaN(value)
@@ -10,9 +10,9 @@ export default function isNumberLog(value = '', state = null) {
     test = value !== null && value !== '' && /\d+\.?\d*/.test(value)
   }
   if (test === false) {
-    console.log('# isNumber FALSE on value, result', value, test)
+    console.log('# isNumberLog FALSE on value, result', value, test)
   } else {
-    console.log('# isNumber TRUE on value, result', value, test)
+    console.log('# isNumberLog TRUE on value, result', value, test)
   }
   return test
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/core",
-  "version": "4.23.2",
+  "version": "4.23.4",
   "description": "Core components, styles, hooks, and helpers, for the CDC Open Visualization project",
   "moduleName": "CdcCore",
   "main": "dist/cdccore",
@@ -30,5 +30,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "cd4216f47b1c41bfbc1de3b704f70c52cc7293c2"
+  "gitHead": "dcd395d76f70b2d113f2b4c6fe50a52522655cd1"
 }

package/styles/_global.scss

@@ -80,6 +80,9 @@ strong {
   }
   &.danger {
     background-color: $red;
+    padding: 0em 0.6em 0.0em;
+    height: 1.6em;
+    font-size: 0.8   em;
     color: #fff;
     &:hover {
       background-color: darken($red, 5%);
@@ -186,3 +189,8 @@ section.footnotes {
 .cdc-chart-inner-container .subtext {
   padding: 15px;
 }
+
+.margin-left-href {
+  margin-left: 15px;
+}
+

package/styles/_series-list.scss

@@ -0,0 +1,92 @@
+&.cdc-map-outer-container .editor-panel .series-item,
+&.type-chart .editor-panel .series-item {
+  list-style: none;
+  position: relative;
+
+  $border: 1px solid #ccc;
+
+  @at-root .accordion:first-of-type .series-item__title {
+    border-top: $border;
+  }
+
+  @at-root .accordion:last-of-type .series-item__title {
+    border-bottom: $border;
+  }
+
+  .accordion__button {
+    border-bottom: unset;
+
+    &.hide-arrow:before {
+      display: none;
+    }
+  }
+
+  .accordion__panel {
+    border-left: $border;
+    border-right: $border;
+    padding: 10px;
+  }
+
+  .series-list__remove {
+    margin-left: auto;
+    margin-right: 20px;
+    border: 1px solid red;
+    border-radius: 10px;
+  }
+
+  .hide-arrow .series-list__remove {
+    margin-right: 0px;
+  }
+
+  label {
+    font-size: 0.8rem;
+    font-weight: normal;
+  }
+
+  .series-item__title {
+    width: 100%;
+    background-color: #f5f5f5;
+    border-right: $border;
+    border-left: $border;
+    display: block;
+    padding: 5px;
+
+    .accordion__button {
+      border-bottom: none !important;
+    }
+  }
+
+  li {
+    padding: 5px;
+  }
+
+  .series_item__title {
+    font-size: 12px;
+    font-weight: bold;
+    text-transform: uppercase;
+  }
+
+  .series-item__dropdown {
+    display: block;
+    margin-bottom: 8px;
+  }
+
+  // chart series list
+  &--chart {
+    padding: 5px 5px 0;
+
+    .accordion__button {
+      display: flex;
+      padding-left: 5px !important;
+
+      .cove-icon {
+        padding-right: 5px;
+        margin-right: 10px;
+      }
+    }
+
+    &:last-child {
+      padding-bottom: 5px;
+    }
+  }
+}

package/styles/base.scss

@@ -52,6 +52,11 @@
 @import 'reset';
 @import 'variables';
 @import 'mixins';
+@import 'filters';
+
+body.post-type-cdc_visualization .visx-tooltip {
+  z-index: 1000000;
+}
 
 .cdc-open-viz-module {
   position: relative;
@@ -64,6 +69,7 @@
   @import 'data-table';
   @import 'global';
   @import 'button-section';
+  @import 'series-list';
 }
 
 $theme: (

package/styles/filters.scss

@@ -0,0 +1,122 @@
+.filters-section {
+  &__wrapper {
+    flex-wrap: wrap;
+    display: flex;
+    gap: 7px 15px;
+    margin-top: 15px;
+    margin-bottom: 15px;
+  }
+
+  &__intro-text {
+    display: block;
+    width: 100%;
+  }
+
+  &__buttons {
+    width: 100%;
+    .apply {
+      margin-right: 10px;
+    }
+  }
+}
+
+// note the diff of section and no section above.
+// Can't use nested selectors with top level section overwrites
+section.filters-section {
+  // border: 1px solid #c7c7c7;
+  // padding: 10px;
+  border-radius: 10px;
+  margin-bottom: 10px;
+  display: block !important;
+}
+
+div.single-filters {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 15px 0;
+
+  select {
+    width: auto !important;
+  }
+
+  label {
+    width: 100%;
+  }
+
+  &__tab-bar {
+    &:first-child {
+      border-top-left-radius: 15px;
+      border-bottom-left-radius: 15px;
+    }
+  }
+}
+
+.single-filters--dropdown {
+  width: auto;
+  display: flex;
+}
+
+.single-filters--tab {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+
+  .tab {
+    width: 25%;
+    min-height: 40px;
+    border: none;
+    padding: 0.5em 0;
+    background: none;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    margin-top: 5px;
+  }
+
+  .tab--active {
+    border-bottom: none;
+  }
+}
+
+.single-filters--pill {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+
+  .pill {
+    border: none;
+    width: 95%;
+    height: 60px;
+    background: none;
+    border-radius: 30px;
+    box-shadow: 0 2px 5px #d3d3d3;
+    vertical-align: middle;
+    margin-bottom: 15px;
+    margin-right: 10px;
+    margin-left: 10px;
+    white-space: break-spaces;
+    word-break: break-word;
+
+    &__wrapper {
+      width: 25%;
+    }
+  }
+}
+
+.single-filters__tab-bar {
+  background: #f2f2f2;
+  display: flex !important;
+  flex-wrap: wrap;
+  width: 100%;
+  border-radius: 15px;
+
+  button.button__tab-bar {
+    flex: 1 1 0px;
+    padding: 10px;
+    background: none;
+    transition: background 2s;
+    &--active {
+      background: #fff;
+      border-radius: 15px;
+    }
+  }
+}

package/styles/v2/themes/_color-definitions.scss

@@ -147,6 +147,55 @@ $theme: (
   }
 }
 
+// Charts filter styles
+.cdc-open-viz-module {
+  @each $theme-name, $theme-colors in $theme {
+    &.theme-#{$theme-name} {
+      .single-filters--tab .tab--active {
+        border: 1px solid string.unquote(nth($theme-colors, 1));
+        border-top: 3px solid string.unquote(nth($theme-colors, 1));
+        border-bottom: none;
+      }
+
+      .single-filters--tab .tab:not(.tab--active) {
+        border-bottom: 1px solid string.unquote(nth($theme-colors, 1));
+      }
+
+      .single-filters--pill .pill--active {
+        background-color: string.unquote(nth($theme-colors, 1));
+        color: #fff;
+      }
+      .filters-section button.cove-button:not([disabled]) {
+        background-color: string.unquote(nth($theme-colors, 1)) !important;
+      }
+    }
+
+    .theme-#{$theme-name} {
+      .single-filters--tab .tab--active {
+        border: 1px solid string.unquote(nth($theme-colors, 1));
+        border-top: 3px solid string.unquote(nth($theme-colors, 1));
+        border-bottom: none;
+      }
+
+      .single-filters--tab .tab:not(.tab--active) {
+        border-bottom: 1px solid string.unquote(nth($theme-colors, 1));
+      }
+
+      .single-filters--pill .pill--active {
+        background-color: string.unquote(nth($theme-colors, 1));
+        color: #fff;
+      }
+
+      .button__tab-bar--active {
+        outline: 2px solid string.unquote(nth($theme-colors, 1));
+      }
+      .apply:not([disabled]) {
+        background-color: string.unquote(nth($theme-colors, 1)) !important;
+      }
+    }
+  }
+}
+
 $baseColor: #333;
 $blue: #005eaa;
 $lightestGray: #f2f2f2;

package/helpers/cleanData.js

@@ -1,50 +0,0 @@
-/**
- * cleanData
- *
-// This cleans a data set by:
-// - removing commas and $ signs from any numbers to try to plot the point
-// - removing any data points that are NOT composed of of all digits (but allow a decimal point)
-// Without this the charts "break" and do not render
- *
- * Inputs: data as array, excludeKey indicates which key to use to NOT clean
- *                        Example: "Date" should not be cleaned if part of the data
- * 
- * Output: returns the cleanedData
- * 
- * Set testing = true if you need to see before and after data
- * 
- */
-export default function cleanData (data, excludeKey, testing = false) {
-    let cleanedupData = []
-    if (testing) console.log('## Data to clean=', data)
-    if (excludeKey === undefined) {
-      excludeKey = "Date"  // have a default value
-    }
-    data.forEach(function (d, i) {
-      if (testing) console.log("clean", i, " d", d);
-      let cleanedBar = {}
-      Object.keys(d).forEach(function (key) {
-        if (key === excludeKey) {
-          // pass thru
-          cleanedBar[key] = d[key]
-        } else {
-          // remove comma and dollar signs
-          if (testing) console.log("typeof d[key] is ", typeof d[key]);
-          let tmp = "";
-          if (typeof d[key] === 'string') {
-            tmp = d[key] !== null && d[key] !== '' ? d[key].replace(/[,\$]/g, '') : ''
-          } else {
-            tmp =  d[key] !== null && d[key] !== '' ? d[key] : ''
-          }
-          if ((tmp !== '' && tmp !== null && !isNaN(tmp)) || (tmp !== '' && tmp !== null && /\d+\.?\d*/.test(tmp))) {
-            cleanedBar[key] = tmp
-          } else { cleanedBar[key] = '' }
-          // if you get here, then return nothing to skip bad data point
-        }
-      })
-      if (testing) console.log("cleanedBar=", cleanedBar);
-      cleanedupData.push(cleanedBar)
-    })
-    if (testing) console.log('## cleanedData =', cleanedupData)
-    return cleanedupData
-  }