@cdc/core 4.23.5 → 4.23.6

package/assets/icon-linear-gauge.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="M18.29,39.57c0-1.03,.23-1.79,.68-2.28,.45-.49,1.06-.74,1.83-.74s1.42,.25,1.87,.74c.45,.49,.68,1.25,.68,2.29s-.23,1.79-.68,2.28c-.45,.5-1.06,.74-1.83,.74s-1.42-.25-1.87-.74c-.45-.49-.68-1.25-.68-2.29Zm1.71-.02c0,.75,.09,1.25,.26,1.5,.13,.19,.31,.28,.54,.28s.42-.09,.55-.28c.17-.25,.25-.75,.25-1.5s-.08-1.24-.25-1.49c-.13-.19-.31-.29-.55-.29s-.41,.09-.54,.28c-.17,.26-.26,.76-.26,1.5Zm2.47,9.08h-1.62l6.1-12.09h1.58l-6.05,12.09Zm3.55-3.01c0-1.03,.23-1.79,.68-2.28,.45-.49,1.07-.74,1.85-.74s1.4,.25,1.86,.74c.45,.5,.68,1.26,.68,2.28s-.23,1.79-.68,2.29c-.45,.49-1.06,.74-1.83,.74s-1.42-.25-1.87-.74c-.45-.49-.68-1.26-.68-2.29Zm1.71,0c0,.75,.09,1.24,.26,1.49,.13,.19,.31,.29,.54,.29s.41-.09,.54-.28c.17-.25,.26-.75,.26-1.5s-.08-1.24-.25-1.5c-.13-.19-.31-.28-.55-.28s-.41,.09-.54,.28c-.17,.26-.26,.76-.26,1.5Z"/><path d="M92.33,52.83v-20.42c0-1.61-1.31-2.93-2.93-2.93H6.65c-1.61,0-2.93,1.31-2.93,2.93v20.42c0,1.61,1.31,2.93,2.93,2.93H89.4c1.61,0,2.93-1.31,2.93-2.93Zm-52.34-2.93H9.58v-14.56h30.41v14.56Zm5.86-14.56h40.63v14.56H45.85v-14.56Z"/></svg>

package/components/AdvancedEditor.jsx

@@ -8,7 +8,12 @@ export const AdvancedEditor = ({ loadConfig, state, convertStateToConfig }) => {
   const [configTextboxValue, setConfigTextbox] = useState({})
 
   useEffect(() => {
-    const parsedData = convertStateToConfig()
+    let parsedData = state
+    if (state.type !== 'dashboard') {
+      parsedData = convertStateToConfig()
+    } else {
+      parsedData = JSON.parse(JSON.stringify(parsedData))
+    }
     const formattedData = JSON.stringify(parsedData, undefined, 2)
 
     setConfigTextbox(formattedData)
@@ -16,6 +21,7 @@ export const AdvancedEditor = ({ loadConfig, state, convertStateToConfig }) => {
 
   const typeLookup = {
     chart: ['Charts', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/bar-chart.html', <ChartIcon />],
+    dashboard: ['Dashboard', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/bar-chart.html', <ChartIcon />],
     map: ['Maps', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/data-map.html', <MapIcon />],
     'markup-include': ['Markup Include', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/Markup-Include.html', <MarkupIncludeIcon />]
   }

package/components/DataTable.jsx

@@ -1,22 +1,38 @@
 import React, { useEffect, useState, memo, useMemo } from 'react'
 
 import Papa from 'papaparse'
-import ExternalIcon from '../assets/external-link.svg' // TODO: Move to Icon component
+import ExternalIcon from '../assets/external-link.svg'
 import Icon from '@cdc/core/components/ui/Icon'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import LegendCircle from '@cdc/core/components/LegendCircle'
-import CoveMediaControls from '@cdc/core/components/CoveMediaControls'
+import MediaControls from '@cdc/core/components/MediaControls'
+
+import { parseDate, formatDate } from '@cdc/core/helpers/cove/date'
+import { formatNumber } from '@cdc/core/helpers/cove/number'
 
 import Loading from '@cdc/core/components/Loading'
 
+// FILE REVIEW
+// TODO: Remove eslint-disable jsx/a11y/non-interactive-tabindex and handle appropriately
+// TODO: Move ExternalIcon to core Icon component
+// TODO: use destructuring
+// TODO: @tturnerswdev33 - It looks like there's an unused variable setFilteredCountryCode that was added
+// TODO: @tturnerswdev33 - change function declarations to arrow functions
+// TODO: @tturnerswdev33 - move caption so that useMemo is not rendered conditionally
+
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
 const DataTable = props => {
-  const { config, tableTitle, indexTitle, vizTitle, rawData, runtimeData, headerColor, expandDataTable, columns, displayDataAsText, formatNumber, applyLegendToRow, displayGeoName, navigationHandler, viewport, formatLegendLocation, tabbingId, parseDate, formatDate, isDebug } = props
-  if (isDebug) console.log('core/DataTable: props=', props)
-  if (isDebug) console.log('core/DataTable: runtimeData=', runtimeData)
-  if (isDebug) console.log('core/DataTable: rawData=', rawData)
-  if (isDebug) console.log('core/DataTable: config=', config)
+  const { config, tableTitle, indexTitle, vizTitle, rawData, runtimeData, headerColor, expandDataTable, columns, displayDataAsText, applyLegendToRow, displayGeoName, navigationHandler, viewport, formatLegendLocation, tabbingId, isDebug } = props
+
+  /* eslint-disable no-console */
+  if (isDebug) {
+    console.log('core/DataTable: props=', props)
+    console.log('core/DataTable: runtimeData=', runtimeData)
+    console.log('core/DataTable: rawData=', rawData)
+    console.log('core/DataTable: config=', config)
+  }
+  /* eslint-enable no-console */
 
   const [expanded, setExpanded] = useState(expandDataTable)
 
@@ -137,7 +153,7 @@ const DataTable = props => {
   const DownloadButton = memo(() => {
     if (rawData !== undefined) {
       let csvData
-      if (config.type === 'chart' || config.general.type === 'bubble') {
+      if (config.type === 'chart' || config.general.type === 'bubble' || !config.table.showFullGeoNameInCSV) {
         // Just Unparse
         csvData = Papa.unparse(rawData)
       } else if ((config.general.geoType !== 'single-state' && config.general.geoType !== 'us-county') || config.general.type === 'us-geocode') {
@@ -299,12 +315,17 @@ const DataTable = props => {
     }
   }
 
-  function genChartHeader(columns, data) {
+  const genChartHeader = (columns, data) => {
     return (
       <tr>
         {dataSeriesColumns().map(column => {
           let custLabel = getLabel(column) ? getLabel(column) : column
           let text = column === config.xAxis.dataKey ? config.table.indexLabel : custLabel
+
+          // If a user sets the name on a series use that.
+          let userUpdatedSeriesName = config.series.filter(series => series.dataKey === column)?.[0]?.name
+          if (userUpdatedSeriesName) text = userUpdatedSeriesName
+
           return (
             <th
               key={`col-header-${column}`}
@@ -334,38 +355,44 @@ const DataTable = props => {
     )
   }
 
-  function genChartRows(rows) {
-    const allrows = rows.map(row => {
+  const genChartRows = rows => {
+    const allRows = rows.map(row => {
       return (
         <tr role='row'>
-          {dataSeriesColumns()
-            //.filter(column => columns[column].dataTable === true && columns[column].name)
-            .map(column => {
-              let cellValue
-              if (column === config.xAxis.dataKey) {
-                const rowObj = runtimeData[row]
-                //const legendColor = applyLegendToRow(rowObj)
-                var labelValue = rowObj[column] // just raw X axis string
-                labelValue = getCellAnchor(labelValue, rowObj)
-                // no colors on row headers for charts bc it's Date not data
-                // Remove this - <LegendCircle fill={legendColor[row]} />
-                cellValue = <>{labelValue}</>
-              } else {
-                cellValue = displayDataAsText(runtimeData[row][column], column)
-              }
+          {dataSeriesColumns().map(column => {
+            const rowObj = runtimeData[row]
+            let cellValue // placeholder for formatting below
+            let labelValue = rowObj[column] // just raw X axis string
+            if (column === config.xAxis.dataKey) {
+              // not the prettiest, but helper functions work nicely here.
+              cellValue = <>{config.xAxis.type === 'date' ? formatDate(config.xAxis.dateDisplayFormat, parseDate(config.xAxis.dateParseFormat, labelValue)) : labelValue}</>
+            } else {
+              let resolvedAxis = ''
+              let leftAxisItems = config.series.filter(item => item?.axis === 'Left')
+              let rightAxisItems = config.series.filter(item => item?.axis === 'Right')
+              console.log('column', column)
+
+              leftAxisItems.map(leftSeriesItem => {
+                if (leftSeriesItem.dataKey === column) resolvedAxis = 'left'
+              })
+
+              rightAxisItems.map(rightSeriesItem => {
+                if (rightSeriesItem.dataKey === column) resolvedAxis = 'right'
+              })
+
+              cellValue = formatNumber(runtimeData[row][column], resolvedAxis, true, config)
+            }
 
-              //MAP SPECIFIC- change to CHART specific
-              // onClick = { e => (config.general.type === 'bubble' && config.general.allowMapZoom && config.general.geoType === 'world' ? setFilteredCountryCode(row) : true)}
-              return (
-                <td tabIndex='0' role='gridcell' id={`${runtimeData[config.runtime.originalXAxis.dataKey]}--${row}`}>
-                  {cellValue}
-                </td>
-              )
-            })}
+            return (
+              <td tabIndex='0' role='gridcell' id={`${runtimeData[config.runtime.originalXAxis.dataKey]}--${row}`}>
+                {cellValue}
+              </td>
+            )
+          })}
         </tr>
       )
     })
-    return allrows
+    return allRows
   }
 
   const limitHeight = {
@@ -437,10 +464,10 @@ const DataTable = props => {
 
     return (
       <ErrorBoundary component='DataTable'>
-        <CoveMediaControls.Section classes={['download-links']}>
-          <CoveMediaControls.Link config={config} />
+        <MediaControls.Section classes={['download-links']}>
+          <MediaControls.Link config={config} />
           {(config.table.download || config.general.showDownloadButton) && <DownloadButton />}
-        </CoveMediaControls.Section>
+        </MediaControls.Section>
         <section id={tabbingId.replace('#', '')} className={`data-table-container ${viewport}`} aria-label={accessibilityLabel}>
           <a id='skip-nav' className='cdcdataviz-sr-only-focusable' href={`#${skipId}`}>
             Skip Navigation or Skip to Content
@@ -590,10 +617,10 @@ const DataTable = props => {
     return (
       <ErrorBoundary component='DataTable'>
         {/* cove media results in error so disabling for now (TT)
-        <CoveMediaControls.Section classes={['download-links']}>
-          <CoveMediaControls.Link config={config} />
+        <MediaControls.Section classes={['download-links']}>
+          <MediaControls.Link config={config} />
           {config.general.showDownloadButton && <DownloadButton />}
-        </CoveMediaControls.Section>
+        </MediaControls.Section>
         */}
         <section id={tabbingId.replace('#', '')} className={`data-table-container ${viewport}`} aria-label={accessibilityLabel}>
           <a id='skip-nav' className='cdcdataviz-sr-only-focusable' href={`#${skipId}`}>

package/components/Filters.jsx

@@ -312,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 = []

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/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()
+}

package/helpers/cove/number.js

@@ -0,0 +1,139 @@
+import numberFromString from '@cdc/core/helpers/numberFromString'
+
+const abbreviateNumber = num => {
+  let unit = ''
+  let absNum = Math.abs(num)
+
+  if (absNum >= 1e9) {
+    unit = 'B'
+    num = num / 1e9
+  } else if (absNum >= 1e6) {
+    unit = 'M'
+    num = num / 1e6
+  } else if (absNum >= 1e3) {
+    unit = 'K'
+    num = num / 1e3
+  }
+
+  return num + unit
+}
+
+// Format numeric data based on settings in config
+const formatNumber = (num, axis, shouldAbbreviate = false, config = null) => {
+  if (!config) console.error('no config found in formatNumber')
+  // if num is NaN return num
+  if (isNaN(num) || !num) return num
+  // Check if the input number is negative
+  const isNegative = num < 0
+
+  // If the input number is negative, take the absolute value
+  if (isNegative) {
+    num = Math.abs(num)
+  }
+
+  // destructure dataFormat values
+  let {
+    dataFormat: { commas, abbreviated, roundTo, prefix, suffix, rightRoundTo, bottomRoundTo, rightPrefix, rightSuffix, bottomPrefix, bottomSuffix, bottomAbbreviated }
+  } = config
+
+  // check if value contains comma and remove it. later will add comma below.
+  if (String(num).indexOf(',') !== -1) num = num.replaceAll(',', '')
+
+  let original = num
+  let stringFormattingOptions
+  if (axis === 'left') {
+    stringFormattingOptions = {
+      useGrouping: config.dataFormat.commas ? true : false,
+      minimumFractionDigits: roundTo ? Number(roundTo) : 0,
+      maximumFractionDigits: roundTo ? Number(roundTo) : 0
+    }
+  }
+
+  if (axis === 'right') {
+    stringFormattingOptions = {
+      useGrouping: config.dataFormat.rightCommas ? true : false,
+      minimumFractionDigits: rightRoundTo ? Number(rightRoundTo) : 0,
+      maximumFractionDigits: rightRoundTo ? Number(rightRoundTo) : 0
+    }
+  }
+
+  if (axis === 'bottom') {
+    stringFormattingOptions = {
+      useGrouping: config.dataFormat.bottomCommas ? true : false,
+      minimumFractionDigits: bottomRoundTo ? Number(bottomRoundTo) : 0,
+      maximumFractionDigits: bottomRoundTo ? Number(bottomRoundTo) : 0
+    }
+  }
+
+  num = numberFromString(num)
+
+  if (isNaN(num)) {
+    config.runtime.editorErrorMessage = `Unable to parse number from data ${original}. Try reviewing your data and selections in the Data Series section.`
+    return original
+  }
+
+  if (!config.dataFormat) return num
+  if (config.dataCutoff) {
+    let cutoff = numberFromString(config.dataCutoff)
+
+    if (num < cutoff) {
+      num = cutoff
+    }
+  }
+
+  // When we're formatting the left axis
+  // Use commas also updates bars and the data table
+  // We can't use commas when we're formatting the dataFormatted number
+  // Example: commas -> 12,000; abbreviated -> 12k (correct); abbreviated & commas -> 12 (incorrect)
+  //
+  // Edge case for small numbers with decimals
+  // - if roundTo undefined which means it is blank, then do not round
+
+  if ((axis === 'left' && commas && abbreviated && shouldAbbreviate) || (axis === 'bottom' && commas && abbreviated && shouldAbbreviate)) {
+    num = num // eslint-disable-line
+  } else {
+    num = num.toLocaleString('en-US', stringFormattingOptions)
+  }
+  let result = ''
+
+  if (abbreviated && axis === 'left' && shouldAbbreviate) {
+    num = abbreviateNumber(parseFloat(num))
+  }
+
+  if (bottomAbbreviated && axis === 'bottom' && shouldAbbreviate) {
+    num = abbreviateNumber(parseFloat(num))
+  }
+
+  if (prefix && axis === 'left') {
+    result += prefix
+  }
+
+  if (rightPrefix && axis === 'right') {
+    result += rightPrefix
+  }
+
+  if (bottomPrefix && axis === 'bottom') {
+    result += bottomPrefix
+  }
+
+  result += num
+
+  if (suffix && axis === 'left') {
+    result += suffix
+  }
+
+  if (rightSuffix && axis === 'right') {
+    result += rightSuffix
+  }
+
+  if (bottomSuffix && axis === 'bottom') {
+    result += bottomSuffix
+  }
+  if (isNegative) {
+    result = '-' + result
+  }
+
+  return String(result)
+}
+
+export { formatNumber }

package/helpers/coveUpdateWorker.js

@@ -0,0 +1,15 @@
+// If config key names or position in the config have been changed with a version change,
+// process those config entries and format old values into new
+import update_4_23 from './ver/4.23'
+
+// 4.23.6 ------------------------------------------------------
+const coveUpdateWorker = async config => {
+  let genConfig = config
+
+  // v4.23
+  genConfig = await update_4_23(genConfig)
+
+  return genConfig
+}
+
+export default coveUpdateWorker

package/helpers/fetchRemoteData.js

@@ -14,10 +14,20 @@ export default async function (url, visualizationType = '') {
       data = await fetch(url.href)
         .then(response => response.text())
         .then(responseText => {
+          // for every comma NOT inside quotes, replace with a pipe delimiter
+          // - this will let commas inside the quotes not be parsed as a new column
+          // - Limitation: if a delimiter other than comma is used in the csv this will break
+          // Examples of other delimiters that would break: tab
+          responseText = responseText.replace(/(".*?")|,/g, (...m) => m[1] || '|')
+          // now strip the double quotes
+          responseText = responseText.replace(/["]+/g, '')
           const parsedCsv = Papa.parse(responseText, {
+            //quotes: "true",  // dont need these
+            //quoteChar: "'",  // has no effect that I can tell
             header: true,
-            dynamicTyping: true,
-            skipEmptyLines: true
+            skipEmptyLines: true,
+            delimiter: '|', // we are using pipe symbol as delimiter so setting this explicitly for Papa.parse
+            dynamicTyping: false
           })
           return parsedCsv.data
         })

package/helpers/ver/4.23.js

@@ -0,0 +1,10 @@
+const update_4_23 = async config => {
+  const ver = 4.23
+
+  let newConfig = { ...config }
+
+  newConfig.validated = ver
+  return newConfig
+}
+
+export default update_4_23

package/package.json

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

package/styles/v2/components/input/_input.scss

@@ -2,9 +2,9 @@
   display: block;
   position: relative;
   padding: 0.5em 0.5em;
-  border-width: 1px;
-  border-style: solid;
-  border-color: #cbcbcb;
+  border-width: 1px !important; // intentional use of !important for CDC
+  border-style: solid !important; // intentional use of !important for CDC
+  border-color: #cbcbcb !important; // intentional use of !important for CDC
   border-radius: 0.1875rem;
   transition: border-color 200ms $transition-expo-out;
   font-family: sans-serif;

package/styles/v2/layout/_component.scss

@@ -21,7 +21,7 @@
   border-radius: 0 0 3px 3px;
 
   &.no-borders {
-    border: none;
+    border: none !important;
   }
 
   .cdc-data-bite-inner-container:not(.component--has-title) .cove-component__content:not(.no-borders) {