@cdc/core 4.23.6 → 4.23.8

package/assets/icon-chart-forecast.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="M89.56,65.41H16.36V8.8c0-1.1-.9-2-2-2h-5.48c-1.1,0-2,.9-2,2V72.89c0,1.1,.9,2,2,2H89.56c1.1,0,2-.9,2-2v-5.48c0-1.1-.9-2-2-2Z"/><path d="M54.66,55.34c-17.76,0-33.46-17.8-34.12-18.56l-.98-1.13v-4.55l3.25,3.72c.15,.18,15.47,17.53,31.86,17.53h0c7.31,0,12.37-1.68,17.27-3.3,4.31-1.42,8.77-2.9,14.44-3.05l1.5-.04v3l-1.42,.04c-5.24,.14-9.29,1.48-13.59,2.9-5.13,1.69-10.43,3.45-18.22,3.45h0Z"/><path d="M87.84,59.04c-4.73-1.24-7.41-1.66-13.05-1.93-2.82-.14-5.22,.16-8,.5-2.73,.33-5.81,.71-10.06,.79-13.13,.27-23.77-4.63-37.17-17.31v-1.57c13.19,12.48,24.31,18.13,37.15,17.88,4.2-.08,7.26-.46,9.96-.79,2.83-.34,5.27-.64,8.17-.5,5.73,.28,8.2,.62,13,1.88v1.05Z"/><path d="M57.02,49.28c-19.55,0-30.91-14.65-37.69-23.41v-1.54c6.67,8.61,18.64,23.95,37.69,23.95,5.87,0,14.11-3.23,18.39-6.23,2.43-1.7,3.84-2.77,4.87-3.55,2.24-1.7,2.7-2.05,7.71-4.44l-.03,1.12c-4.92,2.34-4.91,2.47-7.08,4.12-1.04,.79-2.45,1.86-4.9,3.57-4.4,3.08-12.9,6.41-18.96,6.41Z"/></svg>

package/assets/icon-chart-forest-plot.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"><defs><style>.b{stroke-width:3px;}.b,.c,.d{stroke-linecap:round;}.b,.c,.d,.e{stroke:#000;}.c,.d,.e{fill:none;}.d{stroke-dasharray:0 0 0 4.07;}.e{stroke-width:2px;}</style></defs><path d="M14.15,8.39v63.29c0,.87,.89,1.59,1.98,1.59h5.42c1.09,0,1.98-.72,1.98-1.59l-.13-63.29c0-.87-.89-1.59-1.98-1.59h-5.28c-1.09,0-1.98,.72-1.98,1.59Z"/><g><line class="c" x1="53.51" y1="10.09" x2="53.51" y2="10.09"/><line class="d" x1="53.51" y1="14.16" x2="53.51" y2="69.05"/><line class="c" x1="53.51" y1="71.08" x2="53.51" y2="71.08"/></g><g><path class="b" d="M29.78,16.97h34.43"/><path class="b" d="M29.78,21.48V12.45"/><path class="b" d="M65.64,21.48V12.45"/></g><g><path class="b" d="M50.62,33.5h28.85"/><path class="b" d="M50.62,38.02v-9.03"/><path class="b" d="M80.67,38.02v-9.03"/></g><g><path class="b" d="M28.21,50.03h19.26"/><path class="b" d="M28.21,54.55v-9.03"/><path class="b" d="M48.27,54.55v-9.03"/></g><g><path class="b" d="M40.69,66.57h33.99"/><path class="b" d="M40.69,71.08v-9.03"/><path class="b" d="M76.1,71.08v-9.03"/></g><circle class="e" cx="47.47" cy="16.97" r="2.2"/><circle class="e" cx="65.64" cy="33.5" r="2.2"/><circle class="e" cx="38.49" cy="50.03" r="2.2"/><circle class="e" cx="58.31" cy="66.57" r="2.2"/></svg>

package/assets/icon-chart-stacked-area.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"><defs><style>.b{fill:none;}.b,.c{stroke:#000;stroke-linejoin:round;}</style></defs><path d="M89.93,65.41H16.73V8.8c0-1.1-.9-2-2-2h-5.48c-1.1,0-2,.9-2,2V72.89c0,1.1,.9,2,2,2H89.93c1.1,0,2-.9,2-2v-5.48c0-1.1-.9-2-2-2Z"/><polygon points="22.7 54.03 22.7 59.31 89.66 59.31 89.66 37.5 70.66 47.11 52.54 42.02 43.1 48.03 35.85 44.59 22.7 54.03"/><polygon class="b" points="22.7 47.3 22.7 59.31 89.66 59.31 89.66 25.48 70.66 35.35 52.54 35.3 43.1 40.03 36.46 31.3 22.7 47.3"/><polygon class="c" points="70.66 23.24 52.54 15.09 43.1 21.1 35.85 25.48 22.7 27.11 22.7 47.3 36.46 31.3 43.1 40.03 52.54 35.3 70.66 35.35 89.66 25.48 89.66 10.58 70.66 23.24"/></svg>

package/assets/icon-filter-dropdowns.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="M87.87,5.89H11.35c-1.56,0-2.84,1.28-2.84,2.84v14.78c0,1.56,1.28,2.84,2.84,2.84l76.52-.19c1.56,0,2.84-1.28,2.84-2.84V8.73c0-1.56-1.28-2.84-2.84-2.84ZM25.95,14.33l-5.19,5.19c-.29,.29-.77,.29-1.06,0l-5.19-5.19c-.29-.29-.29-.77,0-1.06h11.43c.29,.29,.29,.77,0,1.06Zm60.97,10.22H32.18V7.7h54.73V24.55Z"/><path transform="translate(0, 30)" d="M87.87,5.89H11.35c-1.56,0-2.84,1.28-2.84,2.84v14.78c0,1.56,1.28,2.84,2.84,2.84l76.52-.19c1.56,0,2.84-1.28,2.84-2.84V8.73c0-1.56-1.28-2.84-2.84-2.84ZM25.95,14.33l-5.19,5.19c-.29,.29-.77,.29-1.06,0l-5.19-5.19c-.29-.29-.29-.77,0-1.06h11.43c.29,.29,.29,.77,0,1.06Zm60.97,10.22H32.18V7.7h54.73V24.55Z"/></svg>

package/components/DataTable.jsx

@@ -13,14 +13,6 @@ 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, applyLegendToRow, displayGeoName, navigationHandler, viewport, formatLegendLocation, tabbingId, isDebug } = props
@@ -153,15 +145,13 @@ const DataTable = props => {
   const DownloadButton = memo(() => {
     if (rawData !== undefined) {
       let csvData
-      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') {
-        // Unparse + Add column for full Geo name
-        csvData = Papa.unparse(rawData.map(row => ({ FullGeoName: displayGeoName(row[config.columns.geo.name]), ...row })))
-      } else {
+      // only use fullGeoName on County maps and no other
+      if (config.general.geoType === 'us-county') {
         // Unparse + Add column for full Geo name along with State
         csvData = Papa.unparse(rawData.map(row => ({ FullGeoName: formatLegendLocation(row[config.columns.geo.name]), ...row })))
+      } else {
+        // Just Unparse
+        csvData = Papa.unparse(rawData)
       }
 
       const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' })
@@ -213,16 +203,19 @@ const DataTable = props => {
 
   const rows = Object.keys(runtimeData).sort((a, b) => {
     let sortVal
-    if (config.columns.length > 0) {
+    if (config.type === 'map' && config.columns) {
       sortVal = customSort(runtimeData[a][config.columns[sortBy.column].name], runtimeData[b][config.columns[sortBy.column].name])
     }
+    if (config.type === 'chart') {
+      sortVal = customSort(runtimeData[a][sortBy.column], runtimeData[b][sortBy.column])
+    }
     if (!sortBy.asc) return sortVal
     if (sortVal === 0) return 0
     if (sortVal < 0) return 1
     return -1
   })
 
-  function genMapRows(rows) {
+  const genMapRows = rows => {
     const allrows = rows.map(row => {
       return (
         <tr role='row'>
@@ -316,6 +309,7 @@ const DataTable = props => {
   }
 
   const genChartHeader = (columns, data) => {
+    if (!data) return
     return (
       <tr>
         {dataSeriesColumns().map(column => {
@@ -345,6 +339,7 @@ const DataTable = props => {
               {...(sortBy.column === column ? (sortBy.asc ? { 'aria-sort': 'ascending' } : { 'aria-sort': 'descending' }) : null)}
             >
               {text}
+              {sortBy.column === column && <span className={'sort-icon'}>{!sortBy.asc ? upIcon : downIcon}</span>}
               <button>
                 <span className='cdcdataviz-sr-only'>{`Sort by ${text} in ${sortBy.column === column ? (!sortBy.asc ? 'descending' : 'ascending') : 'descending'} `} order</span>
               </button>
@@ -355,6 +350,24 @@ const DataTable = props => {
     )
   }
 
+  // if its additional column, return formatting params
+  const isAdditionalColumn = column => {
+    let inthere = false
+    let formattingParams = {}
+    Object.keys(config.columns).forEach(keycol => {
+      if (config.columns[keycol].name === column) {
+        inthere = true
+        formattingParams = {
+          addColPrefix: config.columns[keycol].prefix,
+          addColSuffix: config.columns[keycol].suffix,
+          addColRoundTo: config.columns[keycol].roundToPlace ? config.columns[keycol].roundToPlace : '',
+          addColCommas: config.columns[keycol].commas
+        }
+      }
+    })
+    return formattingParams
+  }
+
   const genChartRows = rows => {
     const allRows = rows.map(row => {
       return (
@@ -367,10 +380,9 @@ const DataTable = props => {
               // 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 resolvedAxis = 'left'
               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'
@@ -380,7 +392,12 @@ const DataTable = props => {
                 if (rightSeriesItem.dataKey === column) resolvedAxis = 'right'
               })
 
-              cellValue = formatNumber(runtimeData[row][column], resolvedAxis, true, config)
+              let addColParams = isAdditionalColumn(column)
+              if (addColParams) {
+                cellValue = formatNumber(runtimeData[row][column], resolvedAxis, false, config, addColParams)
+              } else {
+                cellValue = formatNumber(runtimeData[row][column], resolvedAxis, false, config)
+              }
             }
 
             return (
@@ -395,6 +412,17 @@ const DataTable = props => {
     return allRows
   }
 
+  const upIcon = (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5'>
+      <path d='M0 5l5-5 5 5z' />
+    </svg>
+  )
+  const downIcon = (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5'>
+      <path d='M0 0l5 5 5-5z' />
+    </svg>
+  )
+
   const limitHeight = {
     maxHeight: config.table.limitHeight && `${config.table.height}px`,
     overflowY: 'scroll'
@@ -418,7 +446,7 @@ const DataTable = props => {
     [config.runtime.seriesKeys]) // eslint-disable-line
 
   if (config.visualizationType !== 'Box Plot') {
-    function genMapHeader(columns) {
+    const genMapHeader = columns => {
       return (
         <tr>
           {Object.keys(columns)
@@ -433,9 +461,11 @@ const DataTable = props => {
               if (config.type === 'map' && (text === undefined || text === '')) {
                 text = 'Location'
               }
+
               return (
                 <th
                   key={`col-header-${column}`}
+                  id={column}
                   tabIndex='0'
                   title={text}
                   role='columnheader'
@@ -452,6 +482,7 @@ const DataTable = props => {
                   {...(sortBy.column === column ? (sortBy.asc ? { 'aria-sort': 'ascending' } : { 'aria-sort': 'descending' }) : null)}
                 >
                   {text}
+                  {sortBy.column === column && <span className={'sort-icon'}>{!sortBy.asc ? upIcon : downIcon}</span>}
                   <button>
                     <span className='cdcdataviz-sr-only'>{`Sort by ${text} in ${sortBy.column === column ? (!sortBy.asc ? 'descending' : 'ascending') : 'descending'} `} order</span>
                   </button>
@@ -530,7 +561,7 @@ const DataTable = props => {
     )
   } else {
     // Render Data Table for Box Plots
-    function genBoxplotHeader(categories) {
+    const genBoxplotHeader = categories => {
       let columns = ['Measures', ...categories]
       return (
         <tr>
@@ -584,7 +615,7 @@ const DataTable = props => {
       if (Number(rowid) === 10) return plot.values.length > 0 ? plot.values.toString() : '-'
       return <p>-</p>
     }
-    function genBoxplotRows(rows) {
+    const genBoxplotRows = rows => {
       // get list of data keys for each row
       let dataKeys = rows.map(row => {
         return row[0]

package/components/managers/DataDesigner.jsx

@@ -7,8 +7,7 @@ import { DATA_TABLE_VERTICAL, DATA_TABLE_HORIZONTAL, DATA_TABLE_SINGLE_ROW, DATA
 import '../../styles/v2/components/data-designer.scss'
 
 const DataDesigner = props => {
-  const { configureData, updateDescriptionProp, visualizationKey, dataKey } = props
-
+  const { configureData, updateDescriptionProp, visualizationKey, dataKey, config, setConfig } = props
 
   return (
     <div className='cove-data-designer__container'>
@@ -166,66 +165,203 @@ const DataDesigner = props => {
                     </select>
                   </div>
                   <div className='mb-2'>
-                    <div className='mb-1'>Which properties in the dataset represent the numeric value?  (all remaining properties will be treated as filters)</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">
+                      <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>
+                          <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 => {
-                        if(e.target.value && (!configureData.dataDescription.valueKeys || configureData.dataDescription.valueKeys.indexOf(e.target.value) === -1)){
+                        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])
                         }
                       }}
                     >
                       <option value=''>Choose an option</option>
-                      {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>
-                      ))}
+                      {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>
+                    <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">
+                      <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>
+                          <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){
+                        if (e.target.value) {
                           updateDescriptionProp(visualizationKey, dataKey, 'ignoredKeys', [...(configureData.dataDescription.ignoredKeys || []), e.target.value])
                         }
-                        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>
-                      ))}
+                      {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>
+                        ))}
                     </select>
                   </div>
                 </>
               )}
             </>
           )}
+
+          {config?.visualizationType === 'Forest Plot' && (
+            <>
+              <div className='mb-2'>
+                <div className='mb-1'>Which column represents the date/category column?</div>
+                <select
+                  onChange={e => {
+                    setConfig({
+                      ...config,
+                      xAxis: {
+                        ...config.xAxis,
+                        dataKey: e.target.value
+                      }
+                    })
+                  }}
+                  defaultValue={'Select'}
+                >
+                  <option value=''>Choose an option</option>
+                  {Object.keys(configureData.data[0]).map((value, index) => (
+                    <option value={value} key={index}>
+                      {value}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              <div className='mb-2'>
+                <div className='mb-1'>Which column represents your estimate field?</div>
+                <select
+                  onChange={e => {
+                    setConfig({
+                      ...config,
+                      forestPlot: {
+                        ...config.forestPlot,
+                        estimateField: e.target.value
+                      }
+                    })
+                  }}
+                  defaultValue={'Select'}
+                >
+                  <option value=''>Choose an option</option>
+                  {Object.keys(configureData.data[0]).map((value, index) => (
+                    <option value={value} key={index}>
+                      {value}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              <div className='mb-2'>
+                <div className='mb-1'>Which column represents the low confidence interval?</div>
+                <select
+                  onChange={e => {
+                    setConfig({
+                      ...config,
+                      forestPlot: {
+                        ...config.forestPlot,
+                        lower: e.target.value
+                      }
+                    })
+                  }}
+                  defaultValue={'Select'}
+                >
+                  <option value=''>Choose an option</option>
+                  {Object.keys(configureData.data[0]).map((value, index) => (
+                    <option value={value} key={index}>
+                      {value}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              <div className='mb-2'>
+                <div className='mb-1'>Which column represents the high confidence interval?</div>
+                <select
+                  onChange={e => {
+                    setConfig({
+                      ...config,
+                      forestPlot: {
+                        ...config.forestPlot,
+                        upper: e.target.value
+                      }
+                    })
+                  }}
+                  defaultValue={'Select'}
+                >
+                  <option value=''>Choose an option</option>
+                  {Object.keys(configureData.data[0]).map((value, index) => (
+                    <option value={value} key={index}>
+                      {value}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              <div className='mb-2'>
+                <div className='mb-1'>Which shape do you want to use in your forest plot?</div>
+                <select
+                  onChange={e => {
+                    setConfig({
+                      ...config,
+                      forestPlot: {
+                        ...config.forestPlot,
+                        shape: e.target.value
+                      }
+                    })
+                  }}
+                  defaultValue={'Select'}
+                >
+                  <option value=''>Choose an option</option>
+                  {['text', 'circle', 'square', 'diamond'].map((value, index) => (
+                    <option value={value} key={index}>
+                      {value}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            </>
+          )}
         </>
       )}
       {configureData.dataDescription && configureData.formattedData && <div>Data configured successfully</div>}

package/components/ui/Icon.jsx

@@ -27,7 +27,8 @@ import iconWarningCircle from '../../assets/icon-warning-circle.svg'
 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 iconText from '../../assets/icon-filtered-text.svg'
+import iconDropdowns from '../../assets/icon-filter-dropdowns.svg'
 import iconPlus from '../../assets/icon-plus.svg'
 import iconMinus from '../../assets/icon-minus.svg'
 
@@ -62,7 +63,8 @@ const iconHash = {
   tools: iconTools,
   plus: iconPlus,
   minus: iconMinus,
-  'filtered-text': iconText
+  'filtered-text': iconText,
+  'filter-dropdowns': iconDropdowns
 }
 
 const Icon = ({ display = null, base, alt = '', size, color, style, ...attributes }) => {

package/components/ui/Tooltip.jsx

@@ -9,42 +9,30 @@ import '../../styles/v2/components/ui/tooltip.scss'
 const TooltipTarget = () => null
 const TooltipContent = () => null
 
-const Tooltip = ({
-                   place = 'top',
-                   trigger = 'hover',
-                   float = false,
-                   shadow = true,
-                   border = false,
-                   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-' + useId()
 
-  const generateTriggerEvent = (trigger) => {
+  const generateTriggerEvent = trigger => {
     const eventList = {
-      'hover': null,
-      'focus': 'focus',
-      'click': 'click focus'
+      hover: null,
+      focus: 'focus',
+      click: 'click focus'
     }
     return eventList[trigger]
   }
 
   return (
-    <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()}
-      >
+    <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}
       </a>
+      {/* prettier-ignore */}
       <ReactTooltip
-        id={uid} anchorId={uid}
+        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"
       >

package/helpers/DataTransform.js

@@ -250,6 +250,26 @@ export class DataTransform {
     if (testing) console.log('## cleanedData =', cleanedupData)
     return cleanedupData
   }
+
+  // clean out %, $, commas from numbers when needing to do sorting!
+  cleanDataPoint(data, testing = false) {
+      if (testing) console.log('clean', data)
+      let cleaned = ''
+
+      // remove comma and dollar signs
+      if (testing) console.log('typeof data is ', typeof data)
+      let tmp = ''
+      if (typeof data === 'string') {
+        tmp = data!== null && data !== '' ? data.replace(/[,\$\%]/g, '') : ''
+      } else {
+        tmp = data !== null && data !== '' ? data : ''
+      }
+
+     cleaned = tmp
+
+      if (testing) console.log('## cleanedData =', cleaned)
+      return cleaned
+  }
 }
 
 export default DataTransform

package/helpers/cove/number.js

@@ -19,7 +19,7 @@ const abbreviateNumber = num => {
 }
 
 // Format numeric data based on settings in config
-const formatNumber = (num, axis, shouldAbbreviate = false, config = null) => {
+const formatNumber = (num, axis, shouldAbbreviate = false, config = null, addColParams = null) => {
   if (!config) console.error('no config found in formatNumber')
   // if num is NaN return num
   if (isNaN(num) || !num) return num
@@ -30,22 +30,41 @@ const formatNumber = (num, axis, shouldAbbreviate = false, config = null) => {
   if (isNegative) {
     num = Math.abs(num)
   }
-
+  
   // destructure dataFormat values
   let {
     dataFormat: { commas, abbreviated, roundTo, prefix, suffix, rightRoundTo, bottomRoundTo, rightPrefix, rightSuffix, bottomPrefix, bottomSuffix, bottomAbbreviated }
   } = config
 
+  // destructure Additional Col dataformat values
+  const { addColCommas, addColRoundTo, addColPrefix, addColSuffix } = addColParams
+
   // 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') {
+    let roundToPlace
+    if (addColRoundTo !== undefined) {
+      // if its an Additional Column
+      roundToPlace = addColRoundTo ? Number(addColRoundTo) : 0
+    } else {
+      roundToPlace = roundTo ? Number(roundTo) : 0
+    }
+    // Need to prevent negative values in rounding
+    if (roundToPlace < 0) roundToPlace = 0
+    let useCommas
+    if (addColCommas !== undefined) {
+      // if its an Additional Column
+      useCommas = addColCommas ? true : false
+    } else {
+      useCommas = config.dataFormat.commas ? true : false
+    }
     stringFormattingOptions = {
-      useGrouping: config.dataFormat.commas ? true : false,
-      minimumFractionDigits: roundTo ? Number(roundTo) : 0,
-      maximumFractionDigits: roundTo ? Number(roundTo) : 0
+      useGrouping: useCommas,
+      minimumFractionDigits: roundToPlace,
+      maximumFractionDigits: roundToPlace
     }
   }
 
@@ -104,8 +123,12 @@ const formatNumber = (num, axis, shouldAbbreviate = false, config = null) => {
     num = abbreviateNumber(parseFloat(num))
   }
 
-  if (prefix && axis === 'left') {
-    result += prefix
+  if (addColPrefix !== undefined && axis === 'left') {
+    result = addColPrefix + result
+  } else {
+    if (prefix && axis === 'left') {
+      result = prefix + result
+    }
   }
 
   if (rightPrefix && axis === 'right') {
@@ -118,8 +141,12 @@ const formatNumber = (num, axis, shouldAbbreviate = false, config = null) => {
 
   result += num
 
-  if (suffix && axis === 'left') {
-    result += suffix
+  if (addColSuffix !== undefined && axis === 'left') {
+    result += addColSuffix
+  } else {
+    if (suffix && axis === 'left') {
+      result += suffix
+    }
   }
 
   if (rightSuffix && axis === 'right') {
@@ -136,4 +163,10 @@ const formatNumber = (num, axis, shouldAbbreviate = false, config = null) => {
   return String(result)
 }
 
-export { formatNumber }
+const getFontSize = (size = 'medium') => {
+  const fontSize = { small: 16, medium: 18, large: 20 }
+
+  return fontSize[size]
+}
+
+export { formatNumber, getFontSize }

package/package.json

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

package/styles/_data-table.scss

@@ -94,6 +94,7 @@ table.data-table {
       background-size: 10px 5px;
     }
 
+    /* doesnt work
     th.sort-asc,
     td.sort-asc {
       background-image: url(../assets/icon-caret-filled-up.svg);
@@ -103,6 +104,19 @@ table.data-table {
     td.sort-desc {
       background-image: url(../assets/icon-caret-filled-down.svg);
     }
+    */
+
+    // format the white triangle sort icon in data table headers
+    .sort-icon {
+    fill: white;
+    width: 30px;
+    float: right;
+    align-self: center;
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    }
 
     th:last-child,
     td:last-child {

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

@@ -1,17 +1,34 @@
-$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;
+// Reusable variables, nice for JS manipulations
+:root {
+  --cove-tooltip-bg: #fff;
+  --cove-tooltip-color: black;
+  --cove-tooltip-font-size: 14px;
+  --cove-tooltip-border-color: #bdbdbd;
+  --cove-tooltip-heading-fontWeight: bold;
+  --cove-tooltip-animation: 500ms cubic-bezier(0.16, 1, 0.3, 1) 50ms 1 forwards;
+  --cove-tooltip-maxWidth: 280px;
+}
 
-  &.cove-tooltip--border {
-    border: 1px solid #bdbdbd;
+// Namespace to cove project, inconveniently using two different classes.
+.cove,
+.cdc-open-viz-module {
+  // todo: move to a utils folder.
+  .capitalize {
+    text-transform: capitalize;
+  }
+
+  // react-tooltip library
+  .react-tooltip {
+    .styles-module_arrow,
+    .react-tooltip-arrow {
+      border-bottom: var(--cove-tooltip-border-color) 1px solid;
+      border-right: var(--cove-tooltip-border-color) 1px solid;
+      backface-visibility: hidden;
+    }
   }
 
-  @at-root {
+  // editor-panel
+  .editor-panel {
     .cove-label + .cove-tooltip {
       top: 1px;
       margin-left: 0.5rem;
@@ -30,6 +47,61 @@ $cove-tooltip-animation: 500ms cubic-bezier(0.16, 1, 0.3, 1) 50ms 1 forwards;
       line-height: inherit;
     }
   }
+
+  // begin actual tooltip styles
+  .react-tooltip,
+  .tooltip {
+    color: var(--cove-tooltip-color);
+    border: 1px solid var(--cove-tooltip-border-color);
+    padding: 0.3rem 0.5rem;
+    z-index: 1000;
+    opacity: 1;
+
+    .interactive {
+      a {
+        pointer-events: all;
+      }
+    }
+
+    ul {
+      list-style: none;
+
+      li {
+        font-size: var(--cove-tooltip-font-size) !important;
+      }
+
+      // under the heading
+      > li.tooltip-body {
+        border-top: 1px solid black;
+        padding-top: 5px;
+      }
+
+      li.tooltip-body:first-of-type {
+        padding-top: 5px;
+        border-top: 1px solid black;
+      }
+
+      // undo previous except first class
+      > li.tooltip-body ~ li.tooltip-body {
+        border-top: initial;
+        padding-top: initial;
+      }
+    }
+
+    .tooltip-heading {
+      display: block;
+      font-weight: var(--cove-tooltip-heading-fontWeight) !important;
+      padding-bottom: 3px;
+      padding-top: 3px;
+      font-size: var(--cove-tooltip-font-size) !important;
+    }
+  }
+}
+
+.cove-tooltip {
+  display: inline-block;
+  position: relative;
+  line-height: 1em;
 }
 
 .cove-tooltip--target {
@@ -45,16 +117,15 @@ $cove-tooltip-animation: 500ms cubic-bezier(0.16, 1, 0.3, 1) 50ms 1 forwards;
 }
 
 .cove-tooltip__content {
-  max-width: 280px;
+  max-width: var(--cove-tooltip-maxWidth);
   padding: 10px 8px;
   font-size: 0.875rem;
   line-height: 1.125rem;
   text-align: left;
-  color: $cove-tooltip-color;
-  background-color: $cove-tooltip-bg;
+  color: var(--cove-tooltip-color);
+  background-color: var(--cove-tooltip-bg);
   border-radius: 5px;
   user-select: none;
-  opacity: 0;
   cursor: default;
   z-index: 1;
 
@@ -64,7 +135,7 @@ $cove-tooltip-animation: 500ms cubic-bezier(0.16, 1, 0.3, 1) 50ms 1 forwards;
     }
 
     &.cove-tooltip__content--animated[class*='styles-module_show__'] {
-      animation: tooltip-btt $cove-tooltip-animation;
+      animation: tooltip-btt var(--cove-tooltip-animation);
     }
   }
 
@@ -74,7 +145,7 @@ $cove-tooltip-animation: 500ms cubic-bezier(0.16, 1, 0.3, 1) 50ms 1 forwards;
     }
 
     &.cove-tooltip__content--animated[class*='styles-module_show__'] {
-      animation: tooltip-ltr $cove-tooltip-animation;
+      animation: tooltip-ltr var(--cove-tooltip-animation);
     }
   }
 
@@ -84,7 +155,7 @@ $cove-tooltip-animation: 500ms cubic-bezier(0.16, 1, 0.3, 1) 50ms 1 forwards;
     }
 
     &.cove-tooltip__content--animated[class*='styles-module_show__'] {
-      animation: tooltip-ttb $cove-tooltip-animation;
+      animation: tooltip-ttb var(--cove-tooltip-animation);
     }
   }
 
@@ -94,61 +165,7 @@ $cove-tooltip-animation: 500ms cubic-bezier(0.16, 1, 0.3, 1) 50ms 1 forwards;
     }
 
     &.cove-tooltip__content--animated[class*='styles-module_show__'] {
-      animation: tooltip-rtl $cove-tooltip-animation;
+      animation: tooltip-rtl var(--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);
-  }
-}

package/styles/v2/layout/_data-table.scss

@@ -150,16 +150,6 @@
     background-size: 10px 5px;
   }
 
-  .sort-asc {
-    //TODO find fix
-    //background-image: url(~@cdc/core/assets/icon-caret-filled-up.svg);
-  }
-
-  .sort-desc {
-    //TODO find fix
-    //background-image: url(~@cdc/core/assets/icon-caret-filled-down.svg);
-  }
-
   .resizer {
     cursor: e-resize;
     width: 10px;
@@ -171,6 +161,7 @@
   }
 }
 
+
 .cove-data-table__footer {
   margin-top: 1rem;
 }