@cdc/core 4.23.3 → 4.23.5

package/components/Filters.jsx

@@ -0,0 +1,421 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { useId } 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
+    setConfig({ ...visualizationConfig })
+
+    // 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)
+  const [selectedFilter, setSelectedFilter] = useState('')
+  const id = useId()
+
+  // 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])
+
+  useEffect(() => {
+    if (selectedFilter) {
+      let el = document.getElementById(selectedFilter.id)
+      if (el) el.focus()
+    }
+  }, [changeFilterActive, selectedFilter])
+
+  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, index) => {
+          const buttonClassList = ['button__tab-bar', singleFilter.active === filter ? 'button__tab-bar--active' : '']
+          return (
+            <button
+              id={`${filter}-${outerIndex}-${index}-${id}`}
+              className={buttonClassList.join(' ')}
+              key={filter}
+              onClick={e => {
+                changeFilterActive(outerIndex, filter)
+                setSelectedFilter(e.target)
+              }}
+              onKeyDown={e => {
+                if (e.keyCode === 13) {
+                  changeFilterActive(outerIndex, filter)
+                  setSelectedFilter(e.target)
+                }
+              }}
+            >
+              {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' key={`pill-${index}`}>
+              <button
+                id={`${filterOption}-${outerIndex}-${index}-${id}`}
+                className={pillClassList.join(' ')}
+                onKeyDown={e => {
+                  if (e.keyCode === 13) {
+                    changeFilterActive(outerIndex, filterOption)
+                    setSelectedFilter(e.target)
+                  }
+                }}
+                onClick={e => {
+                  changeFilterActive(outerIndex, filterOption)
+                  setSelectedFilter(e.target)
+                }}
+                name={label}
+              >
+                {filterOption}
+              </button>
+            </div>
+          )
+
+          values.push(
+            <option key={index} value={filterOption}>
+              {singleFilter.labels && singleFilter.labels[filterOption] ? singleFilter.labels[filterOption] : filterOption}
+            </option>
+          )
+
+          tabValues.push(
+            <button
+              id={`${filterOption}-${outerIndex}-${index}-${id}`}
+              className={tabClassList.join(' ')}
+              onClick={e => {
+                changeFilterActive(outerIndex, filterOption)
+                setSelectedFilter(e.target)
+              }}
+              onKeyDown={e => {
+                if (e.keyCode === 13) {
+                  changeFilterActive(outerIndex, filterOption)
+                  setSelectedFilter(e.target)
+                }
+              }}
+            >
+              {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/LegendCircle.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-export default function LegendCircle({ fill }) {
+export default function LegendCircle({ fill, borderColor }) {
   const styles = {
     marginRight: '5px',
     borderRadius: '300px',
@@ -8,7 +8,7 @@ export default function LegendCircle({ fill }) {
     display: 'inline-block',
     height: '1em',
     width: '1em',
-    border: 'rgba(0,0,0,.3) 1px solid',
+    border: borderColor ? `${borderColor}  1px solid` : 'rgba(0,0,0,.3) 1px solid',
     backgroundColor: fill
   }
 

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

@@ -51,16 +51,16 @@ export const colorPalettes3 = {
   'monochrome-4': ['#C2C0FC', '#6a3d9a'],
   'monochrome-5': ['#fedab8', '#bf5b17'],
   'cool-1': ['#b2df8a', '#1f78b4'],
-  'cool-2': ['#a6cee3', '#33A02C'],
+  'cool-2': ['#a6cee3', '#72D66B'],
   'cool-3': ['#C2C0FC', '#386cb0'],
-  'cool-4': ['#33A02c', '#6a3d9a'],
+  'cool-4': ['#72D66B', '#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']
+  'complementary-5': ['#df168c', '#1EB386']
 }
 
 export const colorPalettesChart = updatePaletteNames(colorPalettes2)

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/helpers/validateFipsCodeLength.js

@@ -28,7 +28,7 @@ export default function validateFipsCodeLength(stateOrData) {
   }
 
   // Only includes data - get column name from somewhere else
-  if (Array.isArray(stateOrData)) {
+  if (Array.isArray(stateOrData) && stateOrData.length > 0) {
     let columns = Object.keys(stateOrData[0])
 
     let potentialColumnNames = ['fips', 'FIPS', 'fips codes', 'FIPS CODES', 'Fips Codes', 'fips Codes', 'Fips codes', 'FIPS Codes']

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/core",
-  "version": "4.23.3",
+  "version": "4.23.5",
   "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": "6fa3b11db159d38538f18023fe70b67a29e7d327"
+  "gitHead": "34add3436994ca3cf13e51f313add4d70377f53e"
 }

package/styles/_data-table.scss

@@ -39,6 +39,7 @@ table.data-table {
   border-collapse: collapse;
   overflow: auto;
   appearance: none;
+  table-layout: fixed;
   * {
     box-sizing: border-box;
   }
@@ -172,6 +173,15 @@ table.data-table {
       margin-left: 5px;
     }
   }
+
+  .boxplot-td {
+    //display: inline-block;
+    //box-sizing: border-box;
+    table-layout: fixed;
+    width: 200;
+    //min-width: 150px;
+    //max-width: 400px;
+  }
 }
 
 .no-data {

package/styles/_global.scss

@@ -189,3 +189,8 @@ section.footnotes {
 .cdc-chart-inner-container .subtext {
   padding: 15px;
 }
+
+.margin-left-href {
+  margin-left: 15px;
+}
+