@cdc/core 4.23.1 → 4.23.2

package/{helpers/CoveMediaControls.js → components/CoveMediaControls.jsx}

@@ -1,5 +1,5 @@
 import React from 'react'
-import html2pdf from 'html2pdf.js'
+// import html2pdf from 'html2pdf.js'
 import html2canvas from 'html2canvas'
 
 const buttonText = {
@@ -64,22 +64,23 @@ const generateMedia = (state, type, elementToCapture) => {
       })
       return
     case 'pdf':
-      let opt = {
-        margin: 0.2,
-        filename: filename + '.pdf',
-        image: { type: 'png' },
-        html2canvas: { scale: 2, logging: false },
-        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
-      }
-
-      html2pdf()
-        .set(opt)
-        .from(baseSvg)
-        .save()
-        .then(() => {
-          generatedImage.remove() // Remove generated png
-          baseSvg.style.display = null // Re-display initial svg map
-        })
+      // let opt = {
+      //   margin: 0.2,
+      //   filename: filename + '.pdf',
+      //   image: { type: 'png' },
+      //   html2canvas: { scale: 2, logging: false },
+      //   jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
+      // }
+
+      // html2pdf()
+      //   .set(opt)
+      //   .from(baseSvg)
+      //   .save()
+      //   .then(() => {
+      //     generatedImage.remove() // Remove generated png
+      //     baseSvg.style.display = null // Re-display initial svg map
+      //   })
+      console.warn('COVE: pdf downloads disabled')
       break
     default:
       console.warn("generateMedia param 2 type must be 'image' or 'pdf'")

package/components/elements/Button.jsx

@@ -8,10 +8,10 @@ import '../../styles/v2/components/button.scss'
 const Button = ({ style, role, hoverStyle = {}, fluid = false, loading = false, loadingText = 'Loading...', flexCenter, active = false, onClick, children, ...attributes }) => {
   const buttonRef = useRef(null)
 
-  const [buttonState, setButtonState] = useState('out')
-  const [customStyles, setCustomStyles] = useState({ ...style })
-  const [childrenWidth, setChildrenWidth] = useState()
-  const [loadtextWidth, setLoadtextWidth] = useState()
+  const [ buttonState, setButtonState ] = useState('out')
+  const [ customStyles, setCustomStyles ] = useState({ ...style })
+  const [ childrenWidth, setChildrenWidth ] = useState()
+  const [ loadtextWidth, setLoadtextWidth ] = useState()
 
   const attributesObj = {
     ...attributes,
@@ -23,6 +23,7 @@ const Button = ({ style, role, hoverStyle = {}, fluid = false, loading = false,
     onBlur: () => setButtonState('out')
   }
 
+
   useEffect(() => {
     if ('loader' === role && buttonRef.current) {
       //Create ghost object and text nodes for children
@@ -53,18 +54,19 @@ const Button = ({ style, role, hoverStyle = {}, fluid = false, loading = false,
       buttonRef.current.parentNode.removeChild(ghostSpan)
       buttonRef.current.parentNode.removeChild(ghostLoaderSpan)
     }
-  }, [])
+    return () => {
+    }
+  }, [ buttonRef, children, loadingText, role ])
 
   useEffect(() => {
     //Adjust button styles depending on cursor, focus, and active, states
-    return buttonState === 'in'
-      ? setCustomStyles(stateStyles => ({ ...stateStyles, ...hoverStyle }))
-      : buttonState === 'out'
-      ? active //If button state is out, check if its 'active'; we want to keep hover styles applied to 'active' buttons
-        ? null //Button is active, so leave the 'hover' styles in place
-        : setCustomStyles({ ...style }) //Button is not 'active', so reset display styles back to default
-      : false //Button state is neither 'in' nor 'out' - do nothing
-  }, [buttonState, active])
+    if (buttonState === 'in') setCustomStyles(stateStyles => ({ ...stateStyles, ...hoverStyle }))
+
+    // If button state is out, check if its 'active'; we want to keep hover styles applied to 'active' buttons
+    if (buttonState === 'out')
+      // If button state is out, and not 'active', reset display styles back to default
+      if (!active) setCustomStyles({ ...style })
+  }, [ buttonState, active, style ])
 
   return (
     <button
@@ -80,16 +82,16 @@ const Button = ({ style, role, hoverStyle = {}, fluid = false, loading = false,
         <>
           {'loader' === role && (
             <>
-              <span className='cove-button__text' style={loading ? { width: loadtextWidth + 'px' } : { width: childrenWidth + 'px' }}>
-                <div className='cove-button__text--loading' style={loading ? { opacity: 1 } : null}>
+              <span className="cove-button__text" style={loading ? { width: loadtextWidth + 'px' } : { width: childrenWidth + 'px' }}>
+                <div className="cove-button__text--loading" style={loading ? { opacity: 1 } : null}>
                   {loadingText}
                 </div>
-                <div className='cove-button__text--children' style={loading ? { opacity: 0 } : null}>
+                <div className="cove-button__text--children" style={loading ? { opacity: 0 } : null}>
                   {children}
                 </div>
               </span>
-              <div className='cove-button__load-spin' style={loading ? { width: '28px', opacity: 1 } : null}>
-                <LoadSpin className='ml-1' size={20} />
+              <div className="cove-button__load-spin" style={loading ? { width: '28px', opacity: 1 } : null}>
+                <LoadSpin className="ml-1" size={20}/>
               </div>
             </>
           )}
@@ -102,7 +104,7 @@ const Button = ({ style, role, hoverStyle = {}, fluid = false, loading = false,
 
 Button.propTypes = {
   /** Specify special role type for button */
-  role: PropTypes.oneOf(['loader']),
+  role: PropTypes.oneOf([ 'loader' ]),
   /** Provide object with styles that overwrite base styles when hovered */
   hoverStyle: PropTypes.object,
   /** Enables button to stretch to the full width of the content */

package/components/inputs/InputCheckbox.jsx

@@ -24,9 +24,6 @@ const InputCheckbox = memo(
     const [value, setValue] = useState(stateValue)
 
     let name = subsection ? `${section}-${subsection}-${fieldName}` : `${section}-${subsection}-${fieldName}`
-    if (fieldName === 'border') {
-      console.table({ fieldName, value, stateValue })
-    }
 
     useEffect(() => {
       if (stateValue !== undefined && stateValue !== value) {

package/components/managers/DataDesigner.jsx

@@ -3,12 +3,13 @@ import React from 'react'
 import Button from '../elements/Button'
 import Card from '../elements/Card'
 
-import { DATA_TABLE_VERTICAL, DATA_TABLE_HORIZONTAL, DATA_TABLE_SINGLE_ROW, DATA_TABLE_MULTI_ROW } from '../../data/dataDesignerTables'
+import { DATA_TABLE_VERTICAL, DATA_TABLE_HORIZONTAL, DATA_TABLE_SINGLE_ROW, DATA_TABLE_MULTI_ROW } from '../../templates/dataDesignerTables'
 import '../../styles/v2/components/data-designer.scss'
 
 const DataDesigner = props => {
   const { configureData, updateDescriptionProp, visualizationKey, dataKey } = props
 
+
   return (
     <div className='cove-data-designer__container'>
       <div className='mb-2'>
@@ -165,16 +166,57 @@ const DataDesigner = props => {
                     </select>
                   </div>
                   <div className='mb-2'>
-                    <div className='mb-1'>Which property in the dataset represents the numeric value?</div>
+                    <div className='mb-1'>Which properties in the dataset represent the numeric value?  (all remaining properties will be treated as filters)</div>
+                    {configureData.dataDescription.valueKeys && configureData.dataDescription.valueKeys.length > 0 && (
+                      <ul className="value-list">
+                        {configureData.dataDescription.valueKeys.map((valueKey, index) => (
+                          <li key={`value-keys-list-${index}`}>{valueKey}<button onClick={() => {
+                            let newValueKeys = configureData.dataDescription.valueKeys;
+                            newValueKeys.splice(index, 1);
+                            updateDescriptionProp(visualizationKey, dataKey, 'valueKeys', newValueKeys)
+                          }}>X</button></li>
+                        ))}
+                      </ul>
+                    )}
                     <select
                       onChange={e => {
-                        updateDescriptionProp(visualizationKey, dataKey, 'valueKey', e.target.value)
+                        if(e.target.value && (!configureData.dataDescription.valueKeys || configureData.dataDescription.valueKeys.indexOf(e.target.value) === -1)){
+                          updateDescriptionProp(visualizationKey, dataKey, 'valueKeys', [...(configureData.dataDescription.valueKeys || []), e.target.value])
+                        }
                       }}
-                      defaultValue={configureData.dataDescription.valueKey}
                     >
                       <option value=''>Choose an option</option>
-                      {Object.keys(configureData.data[0]).map((value, index) => (
-                        <option value={value} key={index}>
+                      {Object.keys(configureData.data[0]).filter(value => !configureData.dataDescription.valueKeys || configureData.dataDescription.valueKeys.indexOf(value) === -1).map((value, index) => (
+                        <option value={value} key={`value-keys-option-${index}`}>
+                          {value}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+                  <div className='mb-2'>
+                    <div className='mb-1'>(Optional) Which properties in the dataset should be ignored?  (will not be used or treated as filters)</div>
+                    {configureData.dataDescription.ignoredKeys && configureData.dataDescription.ignoredKeys.length > 0 && (
+                      <ul className="value-list">
+                        {configureData.dataDescription.ignoredKeys.map((ignoredKey, index) => (
+                          <li key={`value-keys-list-${index}`}>{ignoredKey}<button onClick={() => {
+                            let newIgnoredKeys = configureData.dataDescription.ignoredKeys;
+                            newIgnoredKeys.splice(index, 1);
+                            updateDescriptionProp(visualizationKey, dataKey, 'ignoredKeys', newIgnoredKeys)
+                          }}>X</button></li>
+                        ))}
+                      </ul>
+                    )}
+                    <select
+                      onChange={e => {
+                        if(e.target.value){
+                          updateDescriptionProp(visualizationKey, dataKey, 'ignoredKeys', [...(configureData.dataDescription.ignoredKeys || []), e.target.value])
+                        }
+                        e.target.value = '';
+                      }}
+                    >
+                      <option value=''>Choose an option</option>
+                      {Object.keys(configureData.data[0]).filter(value => !configureData.dataDescription.ignoredKeys || configureData.dataDescription.ignoredKeys.indexOf(value) === -1).map((value, index) => (
+                        <option value={value} key={`ignored-keys-option-${index}`}>
                           {value}
                         </option>
                       ))}

package/components/ui/Icon.jsx

@@ -28,6 +28,8 @@ import iconWarningTriangle from '../../assets/icon-warning-triangle.svg'
 import iconGear from '../../assets/icon-gear.svg'
 import iconTools from '../../assets/icon-tools.svg'
 import iconText from '../../assets/filtered-text.svg'
+import iconPlus from '../../assets/icon-plus.svg'
+import iconMinus from '../../assets/icon-minus.svg'
 
 import '../../styles/v2/components/icon.scss'
 
@@ -58,6 +60,8 @@ const iconHash = {
   warningTriangle: iconWarningTriangle,
   gear: iconGear,
   tools: iconTools,
+  plus: iconPlus,
+  minus: iconMinus,
   'filtered-text': iconText
 }
 

package/components/ui/Tooltip.jsx

@@ -1,37 +1,53 @@
-import React from 'react'
-import ReactTooltip from 'react-tooltip'
+import { useId } from 'react'
+
+// Third Party
+import { Tooltip as ReactTooltip } from 'react-tooltip'
+
+// Styles
+import '../../styles/v2/components/ui/tooltip.scss'
 
 const TooltipTarget = () => null
 const TooltipContent = () => null
 
-const Tooltip = ({ position = 'top', trigger = 'hover focus', float = false, shadow = true, border = null, borderColor = '#bdbdbd', hideOnScroll = true, children, style, ...attributes }) => {
+const Tooltip = ({
+                   place = 'top',
+                   trigger = 'hover',
+                   float = false,
+                   shadow = true,
+                   border = false,
+                   children,
+                   style,
+                   ...attributes
+                 }) => {
+
   const tooltipTargetChildren = children.find(el => el.type === TooltipTarget)
   const tooltipContentChildren = children.find(el => el.type === TooltipContent)
 
-  const uid = 'tooltip-' + Math.floor(Math.random() * 100000)
+  const uid = 'tooltip-' + useId()
+
+  const generateTriggerEvent = (trigger) => {
+    const eventList = {
+      'hover': null,
+      'focus': 'focus',
+      'click': 'click focus'
+    }
+    return eventList[trigger]
+  }
 
   return (
-    <span className='cove-tooltip' style={style} {...attributes}>
-      <button
-        className='cove-tooltip--target'
-        data-for={uid}
-        data-place={position}
-        data-event={trigger}
-        data-effect={float ? 'float' : 'solid'}
-        data-scroll-hide={hideOnScroll}
-        data-tip
-        onClick={e => {
-          e.preventDefault()
-        }}
-        onMouseEnter={e => ReactTooltip.show(e.target)}
-        onMouseLeave={e => ReactTooltip.hide(e.target)}
-        onFocus={e => ReactTooltip.show(e.target)}
-        onBlur={e => ReactTooltip.hide(e.target)}
-        style={{ background: 'transparent', border: 'none' }}
+    <span className="cove-tooltip" style={style} {...attributes}>
+      <a id={uid} className="cove-tooltip--target"
+         data-tooltip-float={float}
+         data-tooltip-place={place}
+         data-tooltip-events={generateTriggerEvent()}
       >
         {tooltipTargetChildren ? tooltipTargetChildren.props.children : null}
-      </button>
-      <ReactTooltip id={uid} className={'cove-tooltip__content' + (trigger === 'click' ? ' interactive' : '') + (border ? ' cove-tooltip--border-' + border : '') + (shadow ? ' has-shadow' : '')} type='light' effect='solid' border={!!border} borderColor={borderColor} globalEventOff='click'>
+      </a>
+      <ReactTooltip
+        id={uid} anchorId={uid}
+        className={'cove-tooltip__content' + (' place-' + place) + (!float ? ' cove-tooltip__content--animated' : '') + (trigger === 'click' ? ' interactive' : '') + (border ? (' cove-tooltip--border') : '') + (shadow ? ' has-shadow' : '')}
+        globalEventOff="click"
+      >
         {tooltipContentChildren ? tooltipContentChildren.props.children : null}
       </ReactTooltip>
     </span>

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);
             }
           })
         })
@@ -121,41 +121,80 @@ export class DataTransform {
         return standardized
       }
     } else if (description.series === true && description.singleRow === false) {
-      if (description.seriesKey !== undefined && description.xKey !== undefined && description.valueKey !== undefined) {
-        let standardizedMapped = {}
-        let standardized = []
+      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);
+          }
 
-        data.forEach(row => {
-          let extraKeys = []
-          let uniqueKey = row[description.xKey]
-          Object.keys(row).forEach(key => {
-            if (key !== description.xKey && key !== description.seriesKey && key !== description.valueKey) {
-              uniqueKey += '|' + key + '=' + row[key]
-              extraKeys.push(key)
+          data.forEach(row => {
+            valueKeys.forEach(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);
+                }
+              })
+
+              if(!standardizedMapped[uniqueKey]){ 
+                standardizedMapped[uniqueKey] = { [description.xKey]: row[description.xKey], '**Numeric Value Property**': valueKey };
+                extraKeys.forEach(key => {
+                  standardizedMapped[uniqueKey][key] = row[key];
+                })
+              }
+
+              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 (standardizedMapped[uniqueKey]) {
-            standardizedMapped[uniqueKey][row[description.seriesKey]] = row[description.valueKey]
-          } else {
-            standardizedMapped[uniqueKey] = { [description.xKey]: row[description.xKey], [row[description.seriesKey]]: row[description.valueKey] }
-            extraKeys.forEach(key => {
-              standardizedMapped[uniqueKey][key] = row[key]
+          return standardized;
+        } else {
+          let standardizedMapped = {}
+          let standardized = []
+
+          data.forEach(row => {
+            let extraKeys = []
+            let uniqueKey = row[description.xKey]
+            Object.keys(row).forEach(key => {
+              if (key !== description.xKey && key !== description.seriesKey && key !== description.valueKey) {
+                uniqueKey += '|' + key + '=' + row[key]
+                extraKeys.push(key)
+              }
             })
-          }
-        })
 
-        Object.keys(standardizedMapped).forEach(key => {
-          standardized.push(standardizedMapped[key])
-        })
+            if (standardizedMapped[uniqueKey]) {
+              standardizedMapped[uniqueKey][row[description.seriesKey]] = row[description.valueKey]
+            } else {
+              standardizedMapped[uniqueKey] = { [description.xKey]: row[description.xKey], [row[description.seriesKey]]: row[description.valueKey] }
+              extraKeys.forEach(key => {
+                standardizedMapped[uniqueKey][key] = row[key]
+              })
+            }
+          })
 
-        return standardized
+          Object.keys(standardizedMapped).forEach(key => {
+            standardized.push(standardizedMapped[key])
+          })
+
+          return standardized
+        }
       } else {
-        return undefined
+        return undefined;
       }
     }
 
-    return data
+    return data;
   }
 }
 

package/helpers/cleanData.js

@@ -0,0 +1,50 @@
+/**
+ * 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
+  }

package/helpers/fetchRemoteData.js

@@ -2,9 +2,6 @@ import Papa from 'papaparse'
 
 export default async function (url, visualizationType = '') {
   try {
-    // Using URL Object to get pathname without URL paramaters on regex.
-    if (visualizationType === 'map') url = decodeURI(url)
-
     url = new URL(url)
 
     const path = url.pathname

package/helpers/isNumber.js

@@ -0,0 +1,24 @@
+/**
+ * isNumber
+ *
+ * There are many ways this could be written but this one is working
+ * to check if something is a number or not
+ * Input: value
+ * 
+ * Output: boolean: true or false
+ */
+export default function isNumber(value = '') {
+  // 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
+  // in debugging I saw cases where inbound was a 'number'
+  // and other times a 'string' so might as well take care of both here
+  if (typeof value === 'number') {
+    return !Number.isNaN(value)
+  }
+  if (typeof value === 'string') {
+    return value !== null && value !== '' && /\d+\.?\d*/.test(value)
+    // regex explanation: if 1 or more digits, and a decimal followed by 0 or more digits, 
+    // then its a number
+  }
+  return false // if we get here something is wrong so return false
+}

package/helpers/isNumberLog.js

@@ -0,0 +1,18 @@
+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);
+  var test;
+  if (typeof value === 'number') {
+    test = !Number.isNaN(value)
+  }
+  if (typeof value === 'string') {
+    test = value !== null && value !== '' && /\d+\.?\d*/.test(value)
+  }
+  if (test === false) {
+    console.log('# isNumber FALSE on value, result', value, test)
+  } else {
+    console.log('# isNumber TRUE on value, result', value, test)
+  }
+  return test
+}

package/package.json

@@ -1,36 +1,34 @@
 {
   "name": "@cdc/core",
-  "version": "4.23.1",
-  "description": "Core elements of the CDC Open Visualization project",
-  "author": "Daniel Immke <npm@daniel.do>",
-  "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
-  "license": "ISC",
+  "version": "4.23.2",
+  "description": "Core components, styles, hooks, and helpers, for the CDC Open Visualization project",
+  "moduleName": "CdcCore",
+  "main": "dist/cdccore",
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/CDCgov/cdc-open-viz.git"
   },
-  "scripts": {
-    "test": "echo \"Error: run tests from root\" && exit 1"
-  },
+  "author": "Rob Shelnutt <rob@blackairplane.com>",
+  "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
   "bugs": {
     "url": "https://github.com/CDCgov/cdc-open-viz/issues"
   },
-  "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": ">=16"
-  },
+  "license": "Apache-2.0",
   "dependencies": {
     "html2canvas": "^1.4.1",
-    "html2pdf.js": "^0.10.1",
     "papaparse": "^5.3.0",
     "prop-types": "^15.8.1",
-    "react-accessible-accordion": "^3.3.4",
+    "react-accessible-accordion": "^5.0.0",
     "react-select": "^5.3.1",
-    "react-tooltip": "4.2.8",
+    "react-tooltip": "5.8.2-beta.3",
     "use-debounce": "^6.0.1"
   },
-  "resolutions": {
-    "@types/react": "17.x"
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
-  "gitHead": "58163844cc9ce2c379235413b19f49679eab4bef"
+  "gitHead": "cd4216f47b1c41bfbc1de3b704f70c52cc7293c2"
 }

package/styles/_data-table.scss

@@ -9,26 +9,25 @@
 }
 
 div.data-table-heading {
+  position: relative;
   background: rgba(0, 0, 0, 0.05);
   padding: 0.5em 0.7em;
   border: $lightGray 1px solid;
   border-bottom: 0;
   cursor: pointer;
-  background-image: url(~@cdc/core/assets/icon-minus.svg);
-  background-size: 15px 15px; // Need to define both for IE11
-  background-position: right 0.7em center;
-  background-repeat: no-repeat;
+
+  svg {
+    position: absolute;
+    height: 100%;
+    width: 15px;
+    top: 0;
+    right: 1em;
+  }
+
   &:focus {
     z-index: 2;
     position: relative;
   }
-  &.collapsed {
-    background-image: url(~@cdc/core/assets/icon-plus.svg);
-    background-size: 15px 15px; // Need to define both for IE11
-    background-position: right 0.7em center;
-    background-repeat: no-repeat;
-    border-bottom: $lightGray 1px solid;
-  }
 }
 
 table.data-table {
@@ -96,12 +95,12 @@ table.data-table {
 
     th.sort-asc,
     td.sort-asc {
-      background-image: url(~@cdc/core/assets/icon-caret-filled-up.svg);
+      background-image: url(../assets/icon-caret-filled-up.svg);
     }
 
     th.sort-desc,
     td.sort-desc {
-      background-image: url(~@cdc/core/assets/icon-caret-filled-down.svg);
+      background-image: url(../assets/icon-caret-filled-down.svg);
     }
 
     th:last-child,
@@ -218,7 +217,7 @@ table.data-table {
     button.btn-next {
       &::before {
         content: ' ';
-        background-image: url(~@cdc/core/assets/icon-caret-filled-up.svg);
+        background-image: url(../assets/icon-caret-filled-up.svg);
         background-size: 10px 5px;
         width: 10px;
         height: 5px;
@@ -229,7 +228,7 @@ table.data-table {
     button.btn-prev {
       &::before {
         content: ' ';
-        background-image: url(~@cdc/core/assets/icon-caret-filled-up.svg);
+        background-image: url(../assets/icon-caret-filled-up.svg);
         background-size: 10px 5px;
         width: 10px;
         height: 5px;

package/styles/v2/components/button.scss

@@ -33,7 +33,7 @@
   }
 
   &:disabled {
-    background-color: #adadad !important;
+    background-color: #959595 !important;
     cursor: not-allowed;
   }
 

package/styles/v2/components/ui/tooltip.scss

@@ -0,0 +1,154 @@
+$cove-tooltip-bg: #fff;
+$cove-tooltip-color: #333;
+$cove-tooltip-animation: 500ms cubic-bezier(0.16, 1, 0.3, 1) 50ms 1 forwards;
+
+.cove-tooltip {
+  display: inline-block;
+  position: relative;
+  line-height: 1em;
+
+  &.cove-tooltip--border {
+    border: 1px solid #bdbdbd;
+  }
+
+  @at-root {
+    .cove-label + .cove-tooltip {
+      top: 1px;
+      margin-left: 0.5rem;
+      font-size: 0.75rem;
+    }
+
+    .cove-accordion__button .cove-tooltip {
+      display: inline-flex;
+      right: 1.5rem;
+      line-height: inherit;
+    }
+
+    .cove-list-group__item .cove-tooltip {
+      width: 100%;
+      display: block;
+      line-height: inherit;
+    }
+  }
+}
+
+.cove-tooltip--target {
+  display: inherit;
+  cursor: pointer;
+
+  @at-root {
+    .cove-accordion__button + .cove-tooltip--target {
+      display: inline-flex;
+      line-height: inherit;
+    }
+  }
+}
+
+.cove-tooltip__content {
+  max-width: 280px;
+  padding: 10px 8px;
+  font-size: 0.875rem;
+  line-height: 1.125rem;
+  text-align: left;
+  color: $cove-tooltip-color;
+  background-color: $cove-tooltip-bg;
+  border-radius: 5px;
+  user-select: none;
+  opacity: 0;
+  cursor: default;
+  z-index: 1;
+
+  &.place-top {
+    &.has-shadow {
+      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    &.cove-tooltip__content--animated[class*='styles-module_show__'] {
+      animation: tooltip-btt $cove-tooltip-animation;
+    }
+  }
+
+  &.place-right {
+    &.has-shadow {
+      box-shadow: -4px 4px 14px rgba(0, 0, 0, 0.15), -4px 4px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    &.cove-tooltip__content--animated[class*='styles-module_show__'] {
+      animation: tooltip-ltr $cove-tooltip-animation;
+    }
+  }
+
+  &.place-bottom {
+    &.has-shadow {
+      box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.15), 0 8px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    &.cove-tooltip__content--animated[class*='styles-module_show__'] {
+      animation: tooltip-ttb $cove-tooltip-animation;
+    }
+  }
+
+  &.place-left {
+    &.has-shadow {
+      box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.15), 4px 4px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    &.cove-tooltip__content--animated[class*='styles-module_show__'] {
+      animation: tooltip-rtl $cove-tooltip-animation;
+    }
+  }
+}
+
+.interactive {
+  a {
+    pointer-events: all;
+  }
+}
+
+@keyframes tooltip-ltr {
+  0% {
+    opacity: 0;
+    transform: translateX(-8px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes tooltip-rtl {
+  0% {
+    opacity: 0;
+    transform: translateX(8px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes tooltip-ttb {
+  0% {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes tooltip-btt {
+  0% {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}