@cdc/core 1.1.4 → 4.22.11

package/data/dataDesignerTables.js

@@ -0,0 +1,148 @@
+import React from 'react'
+
+export const DATA_TABLE_VERTICAL = (
+  <>
+    <table>
+      <tbody>
+        <tr>
+          <th>Date</th>
+          <th>Value</th>
+          <th>...</th>
+        </tr>
+        <tr>
+          <td>01/01/2020</td>
+          <td>150</td>
+          <td>...</td>
+        </tr>
+        <tr>
+          <td>02/01/2020</td>
+          <td>150</td>
+          <td>...</td>
+        </tr>
+      </tbody>
+    </table>
+    <table>
+      <tbody>
+        <tr>
+          <th>State</th>
+          <th>Value</th>
+          <th>...</th>
+        </tr>
+        <tr>
+          <td>Georgia</td>
+          <td>150</td>
+          <td>...</td>
+        </tr>
+        <tr>
+          <td>Florida</td>
+          <td>150</td>
+          <td>...</td>
+        </tr>
+      </tbody>
+    </table>
+  </>
+)
+
+export const DATA_TABLE_HORIZONTAL = (
+  <>
+    <table>
+      <tbody>
+        <tr>
+          <th>Date</th>
+          <td>01/01/2020</td>
+          <td>02/01/2020</td>
+          <td>...</td>
+        </tr>
+        <tr>
+          <th>Value</th>
+          <td>100</td>
+          <td>150</td>
+          <td>...</td>
+        </tr>
+      </tbody>
+    </table>
+    <table>
+      <tbody>
+        <tr>
+          <th>State</th>
+          <td>Georgia</td>
+          <td>Florida</td>
+          <td>...</td>
+        </tr>
+        <tr>
+          <th>Value</th>
+          <td>100</td>
+          <td>150</td>
+          <td>...</td>
+        </tr>
+      </tbody>
+    </table>
+  </>
+)
+
+export const DATA_TABLE_SINGLE_ROW = (
+  <table>
+    <tbody>
+      <tr>
+        <th>Date</th>
+        <th>Virus 1</th>
+        <th>Virus 2</th>
+        <th>...</th>
+      </tr>
+      <tr>
+        <td>01/01/2020</td>
+        <td>100</td>
+        <td>150</td>
+        <td>...</td>
+      </tr>
+      <tr>
+        <td>02/01/2020</td>
+        <td>15</td>
+        <td>20</td>
+        <td>...</td>
+      </tr>
+    </tbody>
+  </table>
+)
+
+export const DATA_TABLE_MULTI_ROW = (
+  <table>
+    <tbody>
+      <tr>
+        <th>Virus</th>
+        <th>Date</th>
+        <th>Value</th>
+      </tr>
+      <tr>
+        <td>Virus 1</td>
+        <td>01/01/2020</td>
+        <td>100</td>
+      </tr>
+      <tr>
+        <td>Virus 1</td>
+        <td>02/01/2020</td>
+        <td>150</td>
+      </tr>
+      <tr>
+        <td>...</td>
+        <td>...</td>
+        <td>...</td>
+      </tr>
+      <tr>
+        <td>Virus 2</td>
+        <td>01/01/2020</td>
+        <td>15</td>
+      </tr>
+      <tr>
+        <td>Virus 2</td>
+        <td>02/01/2020</td>
+        <td>20</td>
+      </tr>
+      <tr>
+        <td>...</td>
+        <td>...</td>
+        <td>...</td>
+      </tr>
+    </tbody>
+  </table>
+)

package/data/themes.js

@@ -1,70 +1,70 @@
 const themes = {
   'theme-blue': {
-    primary: 	'#005eaa',
+    primary: '#005eaa',
     secondary: '#88c3ea',
-    tertiary: 	'#c0e9ff',
+    tertiary: '#c0e9ff',
     quaternary: '#edf9ff'
   },
   'theme-purple': {
     primary: '#712177',
     secondary: '#b890bb',
     tertiary: '#e3d3e4',
-    quaternary: '#f7f2f7',
+    quaternary: '#f7f2f7'
   },
   'theme-brown': {
     primary: '#705043',
     secondary: '#ad907b',
     tertiary: '#d7ccc8',
-    quaternary: '#f2ebe8',
+    quaternary: '#f2ebe8'
   },
   'theme-teal': {
     primary: '#00695c',
     secondary: '#4ebaaa',
     tertiary: '#ceece7',
-    quaternary: '#ebf7f5',
+    quaternary: '#ebf7f5'
   },
   'theme-pink': {
     primary: '#af4448',
     secondary: '#e57373',
     tertiary: '#ffc2c2',
-    quaternary: '#ffe7e7',
+    quaternary: '#ffe7e7'
   },
   'theme-orange': {
     primary: '#bb4d00',
     secondary: '#ffad42',
     tertiary: '#ffe97d',
-    quaternary: '#fff4cf',
+    quaternary: '#fff4cf'
   },
   'theme-slate': {
     primary: '#29434e',
     secondary: '#7e9ba5',
     tertiary: '#b6c6d2',
-    quaternary: '#e2e8ed',
+    quaternary: '#e2e8ed'
   },
   'theme-indigo': {
     primary: '#26418f',
     secondary: '#92a6dd',
     tertiary: '#dee8ff',
-    quaternary: '#f2f6ff',
+    quaternary: '#f2f6ff'
   },
   'theme-cyan': {
     primary: '#006778',
     secondary: '#65b0bd',
     tertiary: '#cce5e9',
-    quaternary: '#ebf5f6',
+    quaternary: '#ebf5f6'
   },
   'theme-green': {
     primary: '#4b830d',
     secondary: '#84bc49',
     tertiary: '#dcedc8',
-    quaternary: '#f1f8e9',
+    quaternary: '#f1f8e9'
   },
   'theme-amber': {
     primary: '#fbab18',
     secondary: '#ffd54f',
     tertiary: '#ffecb3',
     quaternary: '#fff7e1'
-  },
+  }
 }
 
-export default themes;
+export default themes

package/helpers/DataTransform.js

@@ -0,0 +1,162 @@
+export class DataTransform {
+  constructor() {
+    this.constants = {
+      errorMessageEmtpyData: 'Your data file is empty.',
+      errorMessageFormat: 'Your datatype is not supported.',
+      descriptionHeader: 1,
+      descriptionRoot: 2,
+      descriptionSeriesFilter: 3
+    }
+  }
+
+  //Performs standardizations that can be completed automatically without use input
+  autoStandardize(data) {
+    const errorsFound = []
+
+    // Empty data
+    if (0 === data.length) {
+      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)
+    }
+
+    if (errorsFound.length > 0) {
+      console.error(errorsFound)
+      return undefined
+    }
+
+    //Convert array of arrays, to array of objects
+    if (data.filter(row => row.constructor !== Object).length > 0) {
+      let standardizedData = []
+      for (let row = 1; row < data.length; row++) {
+        let standardizedRow = {}
+        data[row].forEach((datum, col) => {
+          standardizedRow[data[0][col]] = datum
+        })
+        standardizedData.push(standardizedRow)
+      }
+      data = standardizedData
+    }
+
+    return data
+  }
+
+  //Performs standardizations based on developer provided description of the data
+  developerStandardize(data, description) {
+    //Validate the description object
+    if (!description) {
+      return undefined
+    }
+
+    if (description.horizontal === undefined || description.series === undefined) {
+      return undefined
+    }
+
+    if (description.series === true && description.horizontal === false && description.singleRow === undefined) {
+      return undefined
+    }
+
+    if (description.horizontal === true) {
+      if (description.series === true) {
+        if (!description.seriesKey) {
+          return undefined
+        }
+
+        let standardizedMapped = {}
+        let standardized = []
+        data.forEach(row => {
+          let nonNumericKeys = []
+          Object.keys(row).forEach(key => {
+            if (key !== description.seriesKey && isNaN(parseFloat(row[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])
+              if (!standardizedMapped[uniqueKey]) {
+                standardizedMapped[uniqueKey] = { [row[description.seriesKey]]: row[key], key }
+                nonNumericKeys.forEach(nonNumericKey => {
+                  standardizedMapped[uniqueKey][nonNumericKey] = row[nonNumericKey]
+                })
+              }
+              standardizedMapped[uniqueKey][row[description.seriesKey]] = row[key]
+            }
+          })
+        })
+
+        Object.keys(standardizedMapped).forEach(key => {
+          standardized.push(standardizedMapped[key])
+        })
+
+        return standardized
+      } else {
+        let standardized = []
+
+        data.forEach(row => {
+          let nonNumericKeys = []
+          Object.keys(row).forEach(key => {
+            if (isNaN(parseFloat(row[key]))) {
+              nonNumericKeys.push(key)
+            }
+          })
+
+          Object.keys(row).forEach(key => {
+            if (nonNumericKeys.indexOf(key) === -1) {
+              let newRow = { key, value: row[key] }
+
+              nonNumericKeys.forEach(nonNumericKey => {
+                newRow[nonNumericKey] = row[nonNumericKey]
+              })
+
+              standardized.push(newRow)
+            }
+          })
+        })
+
+        return standardized
+      }
+    } else if (description.series === true && description.singleRow === false) {
+      if (description.seriesKey !== undefined && description.xKey !== undefined && description.valueKey !== undefined) {
+        let standardizedMapped = {}
+        let standardized = []
+
+        data.forEach(row => {
+          let extraKeys = []
+          let uniqueKey = row[description.xKey]
+          Object.keys(row).forEach(key => {
+            if (key !== description.xKey && key !== description.seriesKey && key !== description.valueKey) {
+              uniqueKey += '|' + key + '=' + row[key]
+              extraKeys.push(key)
+            }
+          })
+
+          if (standardizedMapped[uniqueKey]) {
+            standardizedMapped[uniqueKey][row[description.seriesKey]] = row[description.valueKey]
+          } else {
+            standardizedMapped[uniqueKey] = { [description.xKey]: row[description.xKey], [row[description.seriesKey]]: row[description.valueKey] }
+            extraKeys.forEach(key => {
+              standardizedMapped[uniqueKey][key] = row[key]
+            })
+          }
+        })
+
+        Object.keys(standardizedMapped).forEach(key => {
+          standardized.push(standardizedMapped[key])
+        })
+
+        return standardized
+      } else {
+        return undefined
+      }
+    }
+
+    return data
+  }
+}
+
+export default DataTransform

package/helpers/cacheBustingString.js

@@ -0,0 +1,5 @@
+export default function cacheBustingString() {
+  const round = 1000 * 60 * 15
+  const date = new Date()
+  return new Date(date.getTime() - (date.getTime() % round)).toISOString()
+}

package/helpers/events.js

@@ -1,15 +1,14 @@
-
 function subscribe(eventName, listener) {
-  document.addEventListener(eventName, listener);
+  document.addEventListener(eventName, listener)
 }
 
 function unsubscribe(eventName, listener) {
-  document.removeEventListener(eventName, listener);
+  document.removeEventListener(eventName, listener)
 }
 
 function publish(eventName, data) {
-  const event = new CustomEvent(eventName, { detail: data });
-  document.dispatchEvent(event);
+  const event = new CustomEvent(eventName, { detail: data })
+  document.dispatchEvent(event)
 }
 
-export { publish, subscribe, unsubscribe};
+export { publish, subscribe, unsubscribe }

package/helpers/fetchRemoteData.js

@@ -0,0 +1,41 @@
+import Papa from 'papaparse'
+
+export default async function (url) {
+  try {
+    // Using URL Object to get pathname without URL paramaters on regex.
+    url = new URL(url)
+
+    const path = url.pathname
+    const regex = /(?:\.([^.]+))?$/
+    const ext = regex.exec(path)[1]
+
+    let data = []
+
+    if ('csv' === ext) {
+      data = await fetch(url.href)
+        .then(response => response.text())
+        .then(responseText => {
+          const parsedCsv = Papa.parse(responseText, {
+            header: true,
+            dynamicTyping: true,
+            skipEmptyLines: true
+          })
+          return parsedCsv.data
+        })
+    }
+
+    if ('json' === ext) {
+      data = await fetch(url.href).then(response => response.json())
+    }
+
+    return data
+  } catch {
+    // If we can't parse it, still attempt to fetch it
+    try {
+      let response = await (await fetch(url)).json()
+      return response
+    } catch {
+      console.error(`Cannot parse URL: ${url}`)
+    }
+  }
+}

package/helpers/getViewport.js

@@ -1,21 +1,21 @@
 export default function getViewport(size) {
-    let result = 'lg'
+  let result = 'lg'
 
-    const viewports = {
-        "lg": 1200,
-        "md": 992,
-        "sm": 768,
-        "xs": 576,
-        "xxs": 350
-    }
+  const viewports = {
+    lg: 1200,
+    md: 992,
+    sm: 768,
+    xs: 576,
+    xxs: 350
+  }
 
-    if(size > 1200) return result
+  if (size > 1200) return result
 
-    for(let viewport in viewports) {
-        if(size <= viewports[viewport]) {
-            result = viewport
-        }
+  for (let viewport in viewports) {
+    if (size <= viewports[viewport]) {
+      result = viewport
     }
+  }
 
-    return result
-}
+  return result
+}

package/helpers/numberFromString.js

@@ -1,11 +1,11 @@
 export default function numberFromString(value = '', state = null) {
-    // Only do this to values that are ONLY numbers - without this parseFloat strips all the other text
-    if (typeof value === 'string' && state?.legend?.type === 'category') return value;
+  // Only do this to values that are ONLY numbers - without this parseFloat strips all the other text
+  if (typeof value === 'string' && state?.legend?.type === 'category') return value
 
-    let nonNumeric = /[^\d.-]/g
-    if( false === Number.isNaN( parseFloat(value) ) && null === String(value).match(nonNumeric) ) {
-        return parseFloat(value)
-    }
+  let nonNumeric = /[^\d.-]/g
+  if (false === Number.isNaN(parseFloat(value)) && null === String(value).match(nonNumeric)) {
+    return parseFloat(value)
+  }
 
-    return value
+  return value
 }

package/helpers/updatePaletteNames.js

@@ -1,18 +1,16 @@
+export function updatePaletteNames(colorPalettes) {
+  // this function adds REVERSE keyword to each palette
+  delete colorPalettes.qualitative9 // delete palette before reversing
+  let palettereversed = {}
+  for (const [paletteName, hexCodeArr] of Object.entries(colorPalettes)) {
+    const paletteStr = String(paletteName)
 
-
-  export function updatePaletteNames (colorPalettes){
-    // this function adds REVERSE keyword to each palette
-    delete colorPalettes.qualitative9 // delete palette before reversing
-    let palettereversed={}
-    for (const [paletteName, hexCodeArr] of Object.entries(colorPalettes)) {
-      const paletteStr = String(paletteName);
-
-     if (!paletteStr.endsWith('reverse') ){
-       let palette = paletteStr.concat('reverse'); // add to the end of the string "reverse"
-       palettereversed[palette] = [...hexCodeArr].reverse();  // reverses arrays elements and create new keys on object
-     }else{
-      palettereversed = {...colorPalettes}
-     }
-   }
-   return  {...palettereversed,...colorPalettes}
-  }
+    if (!paletteStr.endsWith('reverse')) {
+      let palette = paletteStr.concat('reverse') // add to the end of the string "reverse"
+      palettereversed[palette] = [...hexCodeArr].reverse() // reverses arrays elements and create new keys on object
+    } else {
+      palettereversed = { ...colorPalettes }
+    }
+  }
+  return { ...palettereversed, ...colorPalettes }
+}

package/helpers/useDataVizClasses.js

@@ -0,0 +1,40 @@
+export default function useDataVizClasses(config) {
+  let lineDatapointClass = ''
+  let barBorderClass = ''
+
+  if (config.lineDatapointStyle === 'hover') {
+    lineDatapointClass = ' chart-line--hover'
+  }
+  if (config.lineDatapointStyle === 'always show') {
+    lineDatapointClass = ' chart-line--always'
+  }
+  if (config.barHasBorder === 'false') {
+    barBorderClass = ' chart-bar--no-border'
+  }
+
+  let innerContainerClasses = ['cove-component__inner']
+  let contentClasses = ['cove-component__content']
+
+  config.title && innerContainerClasses.push('component--has-title')
+  config.subtext && innerContainerClasses.push('component--has-subtext')
+  config.biteStyle && innerContainerClasses.push(`bite__style--${config.biteStyle}`)
+  config.general?.isCompactStyle && innerContainerClasses.push(`component--isCompactStyle`)
+
+  !config.visual?.border && contentClasses.push('no-borders')
+  config.visualizationType === 'Spark Line' && contentClasses.push('sparkline')
+  config.visual?.borderColorTheme && contentClasses.push('component--has-borderColorTheme')
+  config.visual?.accent && contentClasses.push('component--has-accent')
+  config.visual?.background && contentClasses.push('component--has-background')
+  config.visual?.hideBackgroundColor && contentClasses.push('component--hideBackgroundColor')
+
+  // ! these two will be retired.
+  config.shadow && innerContainerClasses.push('shadow')
+  config?.visual?.roundedBorders && innerContainerClasses.push('bite--has-rounded-borders')
+
+  let sparkLineStyles = {
+    width: '100%',
+    height: '100px'
+  }
+
+  return { innerContainerClasses, contentClasses, barBorderClass, lineDatapointClass, sparkLineStyles }
+}