@cdc/core 4.23.4 → 4.23.6

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/validateFipsCodeLength.js

@@ -28,7 +28,7 @@ export default function validateFipsCodeLength(stateOrData) {
   }
 
   // Only includes data - get column name from somewhere else
-  if (Array.isArray(stateOrData)) {
+  if (Array.isArray(stateOrData) && stateOrData.length > 0) {
     let columns = Object.keys(stateOrData[0])
 
     let potentialColumnNames = ['fips', 'FIPS', 'fips codes', 'FIPS CODES', 'Fips Codes', 'fips Codes', 'Fips codes', 'FIPS Codes']

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.4",
+  "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": "dcd395d76f70b2d113f2b4c6fe50a52522655cd1"
+  "gitHead": "aaed0388b487adfeb3e7e278b4ce74df09cbaade"
 }

package/styles/_data-table.scss

@@ -39,6 +39,7 @@ table.data-table {
   border-collapse: collapse;
   overflow: auto;
   appearance: none;
+  table-layout: fixed;
   * {
     box-sizing: border-box;
   }
@@ -172,6 +173,15 @@ table.data-table {
       margin-left: 5px;
     }
   }
+
+  .boxplot-td {
+    //display: inline-block;
+    //box-sizing: border-box;
+    table-layout: fixed;
+    width: 200;
+    //min-width: 150px;
+    //max-width: 400px;
+  }
 }
 
 .no-data {

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) {