@cdc/core 4.23.4 → 4.23.6

package/components/Filters.jsx

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
+import { useId } from 'react'
 
 // CDC
 import Button from '@cdc/core/components/elements/Button'
@@ -72,7 +73,9 @@ export const useFilters = props => {
 
   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') {
@@ -183,6 +186,8 @@ 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
@@ -205,6 +210,13 @@ const Filters = props => {
     }
   }, [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]
@@ -241,10 +253,24 @@ const Filters = props => {
     const { filter: singleFilter, index: outerIndex } = props
     return (
       <section className='single-filters__tab-bar'>
-        {singleFilter.values.map(filter => {
+        {singleFilter.values.map((filter, index) => {
           const buttonClassList = ['button__tab-bar', singleFilter.active === filter ? 'button__tab-bar--active' : '']
           return (
-            <button className={buttonClassList.join(' ')} key={filter} onClick={e => changeFilterActive(outerIndex, filter)}>
+            <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>
           )
@@ -286,6 +312,8 @@ const Filters = props => {
       delete filtersToLoop.fromHash
 
       return filtersToLoop.map((singleFilter, outerIndex) => {
+        if(singleFilter.showDropdown === false) return
+
         const values = []
         const pillValues = []
         const tabValues = []
@@ -300,8 +328,22 @@ const Filters = props => {
           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}>
+            <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>
@@ -309,12 +351,25 @@ const Filters = props => {
 
           values.push(
             <option key={index} value={filterOption}>
-              {filterOption}
+              {singleFilter.labels && singleFilter.labels[filterOption] ? singleFilter.labels[filterOption] : filterOption}
             </option>
           )
 
           tabValues.push(
-            <button className={tabClassList.join(' ')} onClick={e => changeFilterActive(outerIndex, filterOption)}>
+            <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>
           )

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/{CoveMediaControls.jsx → MediaControls.jsx}

@@ -134,11 +134,11 @@ const Section = ({ children, classes }) => {
   )
 }
 
-const CoveMediaControls = () => null
+const MediaControls = () => null
 
-CoveMediaControls.Section = Section
-CoveMediaControls.Link = Link
-CoveMediaControls.Button = Button
-CoveMediaControls.generateMedia = generateMedia
+MediaControls.Section = Section
+MediaControls.Link = Link
+MediaControls.Button = Button
+MediaControls.generateMedia = generateMedia
 
-export default CoveMediaControls
+export default MediaControls

package/components/RepeatableGroup.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { Accordion, AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
+import { Draggable } from '@hello-pangea/dnd'
+import Icon from '@cdc/core/components/ui/Icon'
+
+const RepeatableGroupSection = props => {
+  return <div className='repeatable-group'>{props.children}</div>
+}
+
+export const RepeatableGroupItem = props => {
+  const { item, index, title } = props
+
+  return (
+    <Draggable key={item} draggableId={`draggable-repeatable-item-${item}`} index={index}>
+      {(provided, snapshot) => (
+        <div key={index} className={snapshot.isDragging ? 'currently-dragging' : ''} ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
+          <Accordion allowZeroExpanded>
+            <AccordionItem className='series-item series-item--chart'>
+              <AccordionItemHeading className='series-item__title'>
+                <AccordionItemButton className={''}>
+                  <Icon display='move' size={15} style={{ cursor: 'default' }} />
+                  Title Section
+                </AccordionItemButton>
+              </AccordionItemHeading>
+              <AccordionItemPanel>panel section to be built</AccordionItemPanel>
+            </AccordionItem>
+          </Accordion>
+        </div>
+      )}
+    </Draggable>
+  )
+}
+
+export const RepeatableGroup = {
+  Section: RepeatableGroupSection,
+  Item: RepeatableGroupItem
+}

package/components/inputs/InputSelect.jsx

@@ -33,7 +33,7 @@ const InputSelect = memo(({ label, value, options, fieldName, section = null, su
   }
 
   return (
-    <label>
+    <label style={{ width: '100%', display: 'block' }}>
       {label && <span className='edit-label cove-input__label'>{label}</span>}
       <select
         className={required && !value ? 'warning' : ''}

package/components/ui/Accordion.jsx

@@ -21,6 +21,7 @@ const Accordion = ({ children }) => {
           <AccordionItem className='cove-accordion__item' key={index}>
             <AccordionItemHeading className='cove-accordion__heading'>
               <AccordionItemButton className='cove-accordion__button'>
+                {section.props.icon}
                 {section.props.title}
                 {section.props.tooltipText ? (
                   <Tooltip position='bottom'>
@@ -43,6 +44,8 @@ const Accordion = ({ children }) => {
 Accordion.Section = AccordionSection
 
 Accordion.Section.propTypes = {
+  /* Icon for the accordion label */
+  icon: PropTypes.node,
   /* Title for the accordion label*/
   title: PropTypes.string,
   /* Tooltip for the accordion label*/

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

@@ -11,109 +11,109 @@ export class DataTransform {
 
   //Performs standardizations that can be completed automatically without use input
   autoStandardize(data) {
-    const errorsFound = [];
+    const errorsFound = []
 
     // Empty data
     if (0 === data.length) {
-      errorsFound.push(this.constants.errorMessageEmptyData);
+      errorsFound.push(this.constants.errorMessageEmptyData)
     }
 
     // Does it have the correct data structure?
     if (!data.filter || data.filter(row => typeof row !== 'object').length > 0) {
-      errorsFound.push(this.constants.errorMessageFormat);
+      errorsFound.push(this.constants.errorMessageFormat)
     }
 
     if (errorsFound.length > 0) {
-      console.error(errorsFound);
-      return undefined;
+      console.error(errorsFound)
+      return undefined
     }
 
     //Convert array of arrays, to array of objects
     if (data.filter(row => row.constructor !== Object).length > 0) {
-      let standardizedData = [];
+      let standardizedData = []
       for (let row = 1; row < data.length; row++) {
-        let standardizedRow = {};
+        let standardizedRow = {}
         data[row].forEach((datum, col) => {
-          standardizedRow[data[0][col]] = datum;
+          standardizedRow[data[0][col]] = datum
         })
-        standardizedData.push(standardizedRow);
+        standardizedData.push(standardizedRow)
       }
-      data = standardizedData;
+      data = standardizedData
     }
 
-    return data;
+    return data
   }
 
   //Performs standardizations based on developer provided description of the data
   developerStandardize(data, description) {
     //Validate the description object
     if (!description) {
-      return undefined;
+      return undefined
     }
 
     if (description.horizontal === undefined || description.series === undefined) {
-      return undefined;
+      return undefined
     }
 
     if (description.series === true && description.horizontal === false && description.singleRow === undefined) {
-      return undefined;
+      return undefined
     }
 
     if (description.horizontal === true) {
       if (description.series === true) {
         if (!description.seriesKey) {
-          return undefined;
+          return undefined
         }
 
-        let standardizedMapped = {};
-        let standardized = [];
+        let standardizedMapped = {}
+        let standardized = []
         data.forEach(row => {
-          let nonNumericKeys = [];
+          let nonNumericKeys = []
           Object.keys(row).forEach(key => {
             if (key !== description.seriesKey && isNaN(parseFloat(row[key]))) {
-              nonNumericKeys.push(key);
+              nonNumericKeys.push(key)
             }
           })
 
           Object.keys(row).forEach(key => {
             if (key !== description.seriesKey && nonNumericKeys.indexOf(key) === -1) {
-              let uniqueKey = key + '|' + nonNumericKeys.map(nonNumericKey => nonNumericKey + '=' + row[nonNumericKey]);
+              let uniqueKey = key + '|' + nonNumericKeys.map(nonNumericKey => nonNumericKey + '=' + row[nonNumericKey])
               if (!standardizedMapped[uniqueKey]) {
-                standardizedMapped[uniqueKey] = { [row[description.seriesKey]]: row[key], key };
+                standardizedMapped[uniqueKey] = { [row[description.seriesKey]]: row[key], key }
                 nonNumericKeys.forEach(nonNumericKey => {
-                  standardizedMapped[uniqueKey][nonNumericKey] = row[nonNumericKey];
+                  standardizedMapped[uniqueKey][nonNumericKey] = row[nonNumericKey]
                 })
               }
-              standardizedMapped[uniqueKey][row[description.seriesKey]] = row[key];
+              standardizedMapped[uniqueKey][row[description.seriesKey]] = row[key]
             }
           })
         })
 
         Object.keys(standardizedMapped).forEach(key => {
-          standardized.push(standardizedMapped[key]);
+          standardized.push(standardizedMapped[key])
         })
 
-        return standardized;
+        return standardized
       } else {
-        let standardized = [];
+        let standardized = []
 
         data.forEach(row => {
-          let nonNumericKeys = [];
+          let nonNumericKeys = []
           Object.keys(row).forEach(key => {
             if (isNaN(parseFloat(row[key]))) {
-              nonNumericKeys.push(key);
+              nonNumericKeys.push(key)
             }
           })
 
           Object.keys(row).forEach(key => {
             if (nonNumericKeys.indexOf(key) === -1) {
-              let newRow = { key, value: row[key] };
+              let newRow = { key, value: row[key] }
 
               nonNumericKeys.forEach(nonNumericKey => {
-                newRow[nonNumericKey] = row[nonNumericKey];
+                newRow[nonNumericKey] = row[nonNumericKey]
               })
 
-              standardized.push(newRow);
+              standardized.push(newRow)
             }
           })
         })
@@ -122,43 +122,43 @@ export class DataTransform {
       }
     } else if (description.series === true && description.singleRow === false) {
       if (description.seriesKey !== undefined && description.xKey !== undefined && (description.valueKey !== undefined || (description.valueKeys !== undefined && description.valueKeys.length > 0))) {
-        if(description.valueKeys !== undefined){
-          let standardizedMapped = {};
-          let standardized = [];
-          let valueKeys = description.valueKeys;
-          if(description.ignoredKeys && description.ignoredKeys.length > 0){
-            valueKeys = valueKeys.concat(description.ignoredKeys);
+        if (description.valueKeys !== undefined) {
+          let standardizedMapped = {}
+          let standardized = []
+          let valueKeys = description.valueKeys
+          if (description.ignoredKeys && description.ignoredKeys.length > 0) {
+            valueKeys = valueKeys.concat(description.ignoredKeys)
           }
 
           data.forEach(row => {
             valueKeys.forEach(valueKey => {
-              let extraKeys = [];
-              let uniqueKey = row[description.xKey] + '|' + valueKey;
+              let extraKeys = []
+              let uniqueKey = row[description.xKey] + '|' + valueKey
               Object.keys(row).forEach(key => {
                 if (key !== description.xKey && key !== description.seriesKey && valueKeys.indexOf(key) === -1) {
-                  uniqueKey += '|' + key + '=' + row[key];
-                  extraKeys.push(key);
+                  uniqueKey += '|' + key + '=' + row[key]
+                  extraKeys.push(key)
                 }
               })
 
-              if(!standardizedMapped[uniqueKey]){ 
-                standardizedMapped[uniqueKey] = { [description.xKey]: row[description.xKey], '**Numeric Value Property**': valueKey };
+              if (!standardizedMapped[uniqueKey]) {
+                standardizedMapped[uniqueKey] = { [description.xKey]: row[description.xKey], '**Numeric Value Property**': valueKey }
                 extraKeys.forEach(key => {
-                  standardizedMapped[uniqueKey][key] = row[key];
+                  standardizedMapped[uniqueKey][key] = row[key]
                 })
               }
 
-              standardizedMapped[uniqueKey][row[description.seriesKey]] = row[valueKey];
-            });
+              standardizedMapped[uniqueKey][row[description.seriesKey]] = row[valueKey]
+            })
           })
 
           Object.keys(standardizedMapped).forEach(key => {
-            if(!description.ignoredKeys || description.ignoredKeys.indexOf(standardizedMapped[key]['**Numeric Value Property**']) === -1){
-              standardized.push(standardizedMapped[key]);
+            if (!description.ignoredKeys || description.ignoredKeys.indexOf(standardizedMapped[key]['**Numeric Value Property**']) === -1) {
+              standardized.push(standardizedMapped[key])
             }
           })
 
-          return standardized;
+          return standardized
         } else {
           let standardizedMapped = {}
           let standardized = []
@@ -190,14 +190,14 @@ export class DataTransform {
           return standardized
         }
       } else {
-        return undefined;
+        return undefined
       }
     }
 
-    return data;
+    return data
   }
 
-    /**
+  /**
      * cleanData
      *
     // This cleans a data set by:
@@ -207,21 +207,21 @@ export class DataTransform {
     *
     * 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) {
+  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 
+      return data // because no excludeKey
     }
     data.forEach(function (d, i) {
-      if (testing) console.log("clean", i, " d", d);
+      if (testing) console.log('clean', i, ' d', d)
       let cleaned = {}
       Object.keys(d).forEach(function (key) {
         if (key === excludeKey) {
@@ -229,27 +229,27 @@ export class DataTransform {
           cleaned[key] = d[key]
         } else {
           // remove comma and dollar signs
-          if (testing) console.log("typeof d[key] is ", typeof d[key]);
-          let tmp = "";
+          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] : ''
+            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] = '' }
+          } else {
+            cleaned[key] = ''
+          }
           // if you get here, then return nothing to skip bad data point
         }
       })
-      if (testing) console.log("cleaned=", cleaned)
+      if (testing) console.log('cleaned=', cleaned)
       cleanedupData.push(cleaned)
     })
     if (testing) console.log('## cleanedData =', cleanedupData)
     return cleanedupData
   }
-
-
 }
 
 export default DataTransform

package/helpers/cove/date.js

@@ -0,0 +1,9 @@
+import { timeFormat, timeParse } from 'd3-time-format'
+
+export function formatDate(format = undefined, date) {
+  return timeFormat(format)(date)
+}
+
+export function parseDate(format = undefined, dateString) {
+  return timeParse(format)(dateString) || new Date()
+}