@cdc/core 4.23.7 → 4.23.9

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/components/DataTable.jsx

@@ -37,6 +37,25 @@ const DataTable = props => {
   // Catch all sorting method used on load by default but also on user click
   // Having a custom method means we can add in any business logic we want going forward
   const customSort = (a, b) => {
+    const isDateA = Date.parse(a)
+    const isDateB = Date.parse(b)
+
+    const isNumberA = !isNaN(a)
+    const isNumberB = !isNaN(b)
+
+    if (isDateA && isDateB) {
+      return sortBy.asc ? new Date(a) - new Date(b) : new Date(b) - new Date(a)
+    }
+    if (isNumberA && isNumberB) {
+      return sortBy.asc ? Number(a) - Number(b) : Number(b) - Number(a)
+    }
+    if (typeof a === 'string' && typeof b === 'string') {
+      return sortBy.asc ? a.localeCompare(b) : b.localeCompare(a)
+    }
+
+    return 0
+  }
+  const customSortX = (a, b) => {
     const digitRegex = /\d+/
 
     const hasNumber = value => digitRegex.test(value)
@@ -45,6 +64,11 @@ const DataTable = props => {
     a = a === null || a === undefined ? '' : a
     b = b === null || b === undefined ? '' : b
 
+    // check for dates first
+    if (!isNaN(Date.parse(a)) && !isNaN(Date.parse(b))) {
+      return Date.parse(a) - Date.parse(b)
+    }
+
     // convert any strings that are actually numbers to proper data type
     const aNum = Number(a)
 
@@ -145,15 +169,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;' })
@@ -204,17 +226,18 @@ const DataTable = props => {
   }
 
   const rows = Object.keys(runtimeData).sort((a, b) => {
-    let sortVal
+    let sortVal = 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
+    return sortVal
+    // if (!sortBy.asc) return sortVal
+    // if (sortVal === 0) return 0
+    // if (sortVal < 0) return 1
+    // return -1
   })
 
   const genMapRows = rows => {
@@ -341,6 +364,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>
@@ -395,9 +419,9 @@ const DataTable = props => {
 
               let addColParams = isAdditionalColumn(column)
               if (addColParams) {
-                cellValue = formatNumber(runtimeData[row][column], resolvedAxis, true, config, addColParams)
+                cellValue = formatNumber(runtimeData[row][column], resolvedAxis, false, config, addColParams)
               } else {
-                cellValue = formatNumber(runtimeData[row][column], resolvedAxis, true, config)
+                cellValue = formatNumber(runtimeData[row][column], resolvedAxis, false, config)
               }
             }
 
@@ -413,6 +437,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'
@@ -472,6 +507,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>

package/components/Legend/index.tsx

@@ -0,0 +1,39 @@
+import useDataVizClasses from '../../helpers/useDataVizClasses'
+
+const Legend = props => {
+  const { config } = props
+
+  if (!config) return
+  const { legendClasses } = useDataVizClasses(config)
+
+  return (
+    <aside id='legend' className={legendClasses.aside.join(' ')} tabIndex={0} aria-label='legend' role='region'>
+      <section className={legendClasses.section.join(' ') || ''}>
+        <Legend.ResetButton />
+      </section>
+    </aside>
+  )
+}
+
+const ResetButton = props => {
+  const { config, resetLegendToggles, setAccessibleStatus } = props
+  const { legendClasses } = useDataVizClasses(config)
+
+  const handleReset = e => {
+    e.preventDefault()
+    resetLegendToggles()
+    setAccessibleStatus('Legend has been reset, please reference the data table to see updated values.')
+  }
+
+  if (config.runtime.disabledAmt === 0) return <></>
+
+  return (
+    <button onClick={handleReset} className={legendClasses.resetButton.join(' ') || ''}>
+      Reset
+    </button>
+  )
+}
+
+Legend.ResetButton = ResetButton
+
+export default Legend

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

@@ -250,6 +250,23 @@ 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
+      let tmp = ''
+      if (typeof data === 'string') {
+        tmp = data!== null && data !== '' ? data.replace(/[,\$\%]/g, '') : ''
+      } else {
+        tmp = data !== null && data !== '' ? data : ''
+      }
+
+      if (testing) console.log('## cleanedData =', tmp)
+      return tmp
+  }
 }
 
 export default DataTransform

package/helpers/cove/number.js

@@ -30,7 +30,7 @@ const formatNumber = (num, axis, shouldAbbreviate = false, config = null, addCol
   if (isNegative) {
     num = Math.abs(num)
   }
-
+  
   // destructure dataFormat values
   let {
     dataFormat: { commas, abbreviated, roundTo, prefix, suffix, rightRoundTo, bottomRoundTo, rightPrefix, rightSuffix, bottomPrefix, bottomSuffix, bottomAbbreviated }
@@ -45,27 +45,27 @@ const formatNumber = (num, axis, shouldAbbreviate = false, config = null, addCol
   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: useCommas,
-        minimumFractionDigits: roundToPlace,
-        maximumFractionDigits: roundToPlace
-      }
+    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: useCommas,
+      minimumFractionDigits: roundToPlace,
+      maximumFractionDigits: roundToPlace
+    }
   }
 
   if (axis === 'right') {
@@ -124,7 +124,7 @@ const formatNumber = (num, axis, shouldAbbreviate = false, config = null, addCol
   }
 
   if (addColPrefix !== undefined && axis === 'left') {
-      result = addColPrefix + result
+    result = addColPrefix + result
   } else {
     if (prefix && axis === 'left') {
       result = prefix + result
@@ -163,4 +163,10 @@ const formatNumber = (num, axis, shouldAbbreviate = false, config = null, addCol
   return String(result)
 }
 
-export { formatNumber }
+const getFontSize = (size = 'medium') => {
+  const fontSize = { small: 16, medium: 18, large: 20 }
+
+  return fontSize[size]
+}
+
+export { formatNumber, getFontSize }

package/helpers/useDataVizClasses.js

@@ -1,4 +1,5 @@
-export default function useDataVizClasses(config) {
+export default function useDataVizClasses(config, viewport = null) {
+  const { legend } = config
   let lineDatapointClass = ''
   let barBorderClass = ''
 
@@ -36,5 +37,31 @@ export default function useDataVizClasses(config) {
     height: '100px'
   }
 
-  return { innerContainerClasses, contentClasses, barBorderClass, lineDatapointClass, sparkLineStyles }
+  // Starting work on combining legend classes.
+  // Using short circuiting to check between charts & maps for now.
+  const getListPosition = () => {
+    if (legend?.position === 'side' && legend?.singleColumn) return 'legend-container__ul--single-column'
+    if (legend?.position === 'bottom' && legend?.singleRow) return 'single-row'
+    if (legend?.verticalSorted && !legend?.singleRow) return 'vertical-sorted'
+    return ''
+  }
+
+  const getUlClasses = () => {
+    const ulClasses = ['legend-container__ul']
+    ulClasses.push(getListPosition())
+    return ulClasses
+  }
+  const legendOuterClasses = [`${legend?.position}`, `${getListPosition()}`, `cdcdataviz-sr-focusable`, `${viewport}`]
+
+  const legendClasses = {
+    aside: legendOuterClasses,
+    section: ['legend-container'],
+    ul: getUlClasses(),
+    li: ['single-legend-item', 'legend-container__li'],
+    title: ['legend-container__title'],
+    resetButton: ['legend-container__reset-button', 'btn', 'clear'],
+    description: ['legend-container__description']
+  }
+
+  return { innerContainerClasses, contentClasses, barBorderClass, lineDatapointClass, sparkLineStyles, legendClasses }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/core",
-  "version": "4.23.7",
+  "version": "4.23.9",
   "description": "Core components, styles, hooks, and helpers, for the CDC Open Visualization project",
   "moduleName": "CdcCore",
   "main": "dist/cdccore",

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/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;
 }