@cdc/data-bite 1.1.2 → 1.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/data-bite",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "React component for displaying a single piece of data in a card module",
   "main": "dist/cdcdatabite",
   "scripts": {
@@ -19,10 +19,12 @@
   },
   "license": "Apache-2.0",
   "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
-  "devDependencies": {
-    "@cdc/core": "^1.1.2",
-    "bootstrap": "^4.3.1",
-    "html-react-parser": "^0.14.0",
+  "dependencies": {
+    "@cdc/core": "^1.1.3",
+    "chroma": "0.0.1",
+    "chroma-js": "^2.1.0",
+    "html-react-parser": "1.4.9",
+    "papaparse": "^5.3.0",
     "react-accessible-accordion": "^3.3.4",
     "react-beautiful-dnd": "^13.0.0",
     "react-select": "^3.0.8",
@@ -30,13 +32,12 @@
     "use-debounce": "^6.0.1",
     "whatwg-fetch": "^3.6.2"
   },
-  "dependencies": {
-    "chroma": "0.0.1",
-    "chroma-js": "^2.1.0"
-  },
   "peerDependencies": {
     "react": "^17.0.2",
     "react-dom": ">=16"
   },
-  "gitHead": "8790a2336ff2453d0d6f09ecec56b5e4beaa7377"
+  "resolutions": {
+    "@types/react": "17.x"
+  },
+  "gitHead": "ff89a7aea74c533413c62ef8859cc011e6b3cbfa"
 }

package/src/CdcDataBite.tsx

@@ -1,51 +1,108 @@
-import React, { useEffect,  useState, useCallback } from 'react';
+import React, { useEffect,  useState, useCallback,FC } from 'react';
 import EditorPanel from './components/EditorPanel';
 import defaults from './data/initial-state';
 import Loading from '@cdc/core/components/Loading';
 import getViewport from '@cdc/core/helpers/getViewport';
-import numberFromString from '@cdc/core/helpers/numberFromString'
 import ResizeObserver from 'resize-observer-polyfill';
+import Papa from 'papaparse';
+import parse from 'html-react-parser';
+
 import Context from './context';
 // @ts-ignore
+import DataTransform from '@cdc/core/components/DataTransform';
 import CircleCallout from './components/CircleCallout';
 import './scss/main.scss';
-import parse from 'html-react-parser'
+import numberFromString from '@cdc/core/helpers/numberFromString';
+import { Fragment } from 'react';
 
-const CdcDataBite = (
-    { configUrl, config: configObj, isDashboard = false, isEditor = false, setConfig: setParentConfig } :
-    { configUrl?: string, config?: any, isDashboard?: boolean, isEditor?: boolean, setConfig? }
-) => {
+import { publish } from '@cdc/core/helpers/events'
 
-  interface keyable {
-    [key: string]: any
-  }
 
-  const [config, setConfig] = useState<keyable>({...defaults});
+type DefaultsType = typeof defaults
+interface Props{
+  configUrl?: string,
+  config?: any
+  isDashboard?: boolean
+  isEditor?: boolean
+  setConfig?:any
+}
+
+const CdcDataBite:FC<Props> = (props) => {
+const { configUrl, config: configObj, isDashboard = false, isEditor = false, setConfig: setParentConfig } = props
+
+  const [config, setConfig] = useState<DefaultsType>({...defaults});
   const [loading, setLoading] = useState<Boolean>(true);
 
   const {
     title,
     dataColumn,
     dataFunction,
-    imageUrl,
+    imageData,
     biteBody,
     biteFontSize,
+    dataFormat,
     biteStyle,
     filters,
-    subtext
+    subtext,
+    general: { isCompactStyle }
   } = config;
 
+
+
+  const transform = new DataTransform()
+
   const [currentViewport, setCurrentViewport] = useState<String>('lg');
 
+  const [ coveLoadedHasRan, setCoveLoadedHasRan ] = useState(false)
+
+  const [ container, setContainer ] = useState()
+
   //Observes changes to outermost container and changes viewport size in state
   const resizeObserver = new ResizeObserver(entries => {
     for (let entry of entries) {
         let newViewport = getViewport(entry.contentRect.width * 2) // Data bite is usually presented as small, so we scale it up for responsive calculations
-
         setCurrentViewport(newViewport)
     }
   });
 
+  const fetchRemoteData = async (url) => {
+    try {
+        const urlObj = new URL(url);
+        const regex = /(?:\.([^.]+))?$/
+
+        let data = []
+
+        const ext = (regex.exec(urlObj.pathname)[1])
+        if ('csv' === ext) {
+            data = await fetch(url)
+                .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)
+                .then(response => response.json())
+        }
+
+        return data;
+    } catch {
+        // If we can't parse it, still attempt to fetch it
+        try {
+            let response = await (await fetch(configUrl)).json()
+            return response
+        } catch {
+            console.error(`Cannot parse URL: ${url}`);
+        }
+    }
+  }
+
   const updateConfig = (newConfig) => {
     // Deeper copy
     Object.keys(defaults).forEach(key => {
@@ -66,38 +123,116 @@ const CdcDataBite = (
   const loadConfig = async () => {
     let response = configObj || await (await fetch(configUrl)).json();
 
+    const round = 1000 * 60 * 15;
+    const date = new Date();
+    let cacheBustingString = new Date(date.getTime() - (date.getTime() % round)).toISOString();
+
     // If data is included through a URL, fetch that and store
     let responseData = response.data ?? {}
 
-    if(response.dataUrl) {
-      const dataString = await fetch(response.dataUrl);
-      responseData = await dataString.json();
+    if (response.dataUrl) {
+      response.dataUrl = `${response.dataUrl}?${cacheBustingString}`;
+      let newData = await fetchRemoteData(response.dataUrl)
+      
+      if (newData && response.dataDescription) {
+          newData = transform.autoStandardize(newData);
+          newData = transform.developerStandardize(newData, response.dataDescription);
+      }
+
+      if(newData) {
+        responseData = newData;
+      }
     }
 
     response.data = responseData;
 
     updateConfig({ ...defaults, ...response });
+
     setLoading(false);
   }
 
-  const calculateDataBite = () => {
-
+  const calculateDataBite = ():string|number => {
+  
     //If either the column or function aren't set, do not calculate
     if (!dataColumn || !dataFunction) {
-      return '';
+      return '';  
+    }
+
+
+    const applyPrecision =(value:number|string):string => {
+      // first validation
+      if(value === undefined || value===null){
+       console.error('Enter correct value to "applyPrecision()" function ')
+      return ;
+    }  
+  // second validation 
+  if(Number.isNaN(value)){
+    console.error(' Argunment isNaN, "applyPrecision()" function ')
+    return;
+  }
+    let result:number|string = value
+    let roundToPlace = Number(config.dataFormat.roundToPlace) // default equals to 0
+    //  ROUND FIELD  going -1,-2,-3 numbers
+    if(roundToPlace<0) {
+      console.error(' ROUND field is below "0", "applyPrecision()" function ')
+      return;
+    }
+    if(typeof roundToPlace ==='number'  && roundToPlace > -1 ){
+      result = Number(result).toFixed(roundToPlace);   // returns STRING
+    }
+        return String(result)
+    }
+
+    // filter null and 0 out from count data
+    const getColumnCount = (arr:(string|number)[]) => {
+      if(config.dataFormat.ignoreZeros) {
+        numericalData = numericalData.filter( item => item && item)
+        return numericalData.length
+      } else {
+        return numericalData.length
+      }
     }
 
-    const getColumnSum = (arr) => {
-      const sum = arr.reduce((sum, x) => sum + x);
+    const getColumnSum = (arr:(string|number)[]) => {
+      // first validation
+      if(arr===undefined || arr===null){
+        console.error('Enter valid value for getColumnSum function ')
+        return;
+      }
+      // second validation
+      if(arr.length === 0 || !Array.isArray(arr)){
+        console.error('Arguments are not valid getColumnSum function ')
+        return;
+      }
+      let sum:number = 0
+      if(arr.length > 1){
+        /// first convert each element to number then add using reduce method to escape string concatination.
+       sum = arr.map(el=>Number(el)).reduce((sum:number, x:number) => sum + x);
+      }else {
+        sum = Number(arr[0])
+      }
       return applyPrecision(sum);
     }
 
-    const getColumnMean = (arr) => {
-      const mean = arr.length > 1 ? arr.reduce((a, b) => a + b) / arr.length : arr[0];
+    const getColumnMean=(arr:(string|number)[]) => { // add default params to escape errors on runtime
+      // first validation
+      if(arr===undefined || arr===null ||!Array.isArray(arr)){
+        console.error('Enter valid parameter getColumnMean function')
+        return 
+      }
+     
+      let mean:number = 0
+      if(arr.length > 1){
+       /// first convert each element to number then add using reduce method to escape string concatination.
+        mean = arr.map(el=>Number(el)).reduce((a, b) => a + b) / arr.length
+      }else {
+        mean = Number(arr[0])
+      }
       return applyPrecision(mean);
     }
 
-    const getMode = (arr) => {
+    const getMode = (arr:any[]=[]):string[] => { // add default params to escape errors on runtime
+    // this function accepts any array and returns array of strings
       let freq = {}
       let max = -Infinity
 
@@ -123,27 +258,45 @@ const CdcDataBite = (
     }
 
     const getMedian = arr => {
+      if(!arr.length) return ;
       const mid = Math.floor(arr.length / 2),
         nums = [...arr].sort((a, b) => a - b);
       const value = arr.length % 2 !== 0 ? nums[mid] : (nums[mid - 1] + nums[mid]) / 2;
       return applyPrecision(value);
     };
 
-    const applyPrecision = (value) => {
-      if ('' !== config.dataFormat.roundToPlace && !isNaN(config.dataFormat.roundToPlace) && Number(config.dataFormat.roundToPlace)>-1) {
-        value = Number(value).toFixed(Number(config.dataFormat.roundToPlace));
+      const applyLocaleString = (value:string):string=>{
+        if(value===undefined || value===null) return ;
+        if(Number.isNaN(value)|| typeof value ==='number') {
+        value = String(value)
+
       }
-      return value;
+      const language = 'en-US'
+      let formattedValue = parseFloat(value).toLocaleString(language, {
+        useGrouping: true,
+        maximumFractionDigits: 6
+      })
+        // Add back missing .0 in e.g. 12.0
+    const match = value.match(/\.\d*?(0*)$/)
+
+      if (match){
+     formattedValue += (/[1-9]/).test(match[0]) ? match[1] : match[0]
+      }
+      return formattedValue
     }
+  
+  
 
-    let dataBite = null;
+  
 
+    let dataBite:string|number = '';
+    
     //Optionally filter the data based on the user's filter
     let filteredData = config.data;
 
     filters.map((filter) => {
       if ( filter.columnName && filter.columnValue ) {
-        filteredData = filteredData.filter(function (e) {
+      return filteredData = filteredData.filter(function (e) {
           return e[filter.columnName] === filter.columnValue;
         });
       } else {
@@ -151,17 +304,22 @@ const CdcDataBite = (
       }
     });
 
-    let numericalData = []
+    let numericalData:any[] = []
 
-    //Get the column's data
-    filteredData.forEach(row => {
-      let value = numberFromString(row[dataColumn])
-      if(typeof value === 'number') numericalData.push(value)
-    });
+
+   // Get the column's data
+     if(filteredData.length){   
+      filteredData.forEach(row => {
+        let value = numberFromString(row[dataColumn])
+        if(typeof value === 'number') numericalData.push(value)
+      });
+     }
+    
+  
 
     switch (dataFunction) {
       case DATA_FUNCTION_COUNT:
-        dataBite = numericalData.length;
+        dataBite = getColumnCount(numericalData);
         break;
       case DATA_FUNCTION_SUM:
         dataBite = getColumnSum(numericalData);
@@ -176,22 +334,21 @@ const CdcDataBite = (
         dataBite = Math.max(...numericalData);
         break;
       case DATA_FUNCTION_MIN:
-        dataBite = Math.min(...numericalData);
+        dataBite =Math.min(...numericalData);
         break;
       case DATA_FUNCTION_MODE:
-        dataBite = getMode(numericalData).join(', ');
+        dataBite = getMode(numericalData).join('');
         break;
       case DATA_FUNCTION_RANGE:
-        numericalData.sort((a, b) => a - b);
-        let rangeMin = applyPrecision(numericalData[0]);
-        let rangeMax = applyPrecision(numericalData[numericalData.length - 1]);
-
-        if (config.dataFormat.commas) {
-          rangeMin = Number(rangeMin).toLocaleString('en-US');
-          rangeMax = Number(rangeMax).toLocaleString('en-US');
-        }
-
-        dataBite = config.dataFormat.prefix + applyPrecision(rangeMin) + config.dataFormat.suffix + ' - ' + config.dataFormat.prefix + applyPrecision(rangeMax) + config.dataFormat.suffix;
+        let rangeMin :number|string = Math.min(...numericalData)
+        let rangeMax :number|string = Math.max(...numericalData)
+          rangeMin =  applyPrecision(rangeMin)
+          rangeMax =  applyPrecision(rangeMax)
+           if (config.dataFormat.commas) {
+          rangeMin = applyLocaleString(rangeMin)
+          rangeMax = applyLocaleString(rangeMax)
+          }
+      dataBite =  config.dataFormat.prefix + rangeMin + config.dataFormat.suffix + ' - ' + config.dataFormat.prefix + rangeMax+config.dataFormat.suffix;  
         break;
       default:
         console.warn('Data bite function not recognized: ' + dataFunction);
@@ -200,36 +357,111 @@ const CdcDataBite = (
     // If not the range, then round and format here
     if (dataFunction !== DATA_FUNCTION_RANGE) {
       dataBite = applyPrecision(dataBite);
-
+  
       if (config.dataFormat.commas) {
-        dataBite = Number(dataBite).toLocaleString('en-US');
+       dataBite = applyLocaleString(dataBite)
       }
+          // Optional 
+      // return config.dataFormat.prefix + dataBite + config.dataFormat.suffix;
+
+     return dataFormat.prefix + dataBite + dataFormat.suffix
+    } else { 
+      //Rounding and formatting for ranges happens earlier.
 
-      return config.dataFormat.prefix + dataBite + config.dataFormat.suffix;
-    } else { //Rounding and formatting for ranges happens earlier.
-      return dataBite;
+      return dataFormat.prefix + dataBite + dataFormat.suffix
     }
   }
 
+  let innerContainerClasses = ['cove-component__inner']
+  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`)
+
+  let contentClasses = ['cove-component__content'];
+  !config.visual?.border && contentClasses.push('no-borders');
+  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')
+
   // Load data when component first mounts
   const outerContainerRef = useCallback(node => {
       if (node !== null) {
           resizeObserver.observe(node);
       }
+      setContainer(node)
   },[]);
 
+  // Initial load
   useEffect(() => {
-    loadConfig();
+    loadConfig()
+    publish('cove_loaded', { loadConfigHasRun: true })
   }, [])
 
-  if(configObj) {
-    useEffect(() => {
-      loadConfig();
-    }, [configObj.data])
+
+  useEffect(() => {
+    if (config && !coveLoadedHasRan && container) {
+      publish('cove_loaded', { config: config })
+      setCoveLoadedHasRan(true)
+    }
+  }, [config, container]);
+
+  if(configObj && config && configObj.data !== config.data){
+    loadConfig();
   }
 
   let body = (<Loading />)
 
+  const DataImage = useCallback(() => {
+    let operators = {
+      '<': (a, b) => { return a < b },
+      '>': (a, b) => { return a > b },
+      '<=': (a, b) => { return a <= b },
+      '>=': (a, b) => { return a >= b },
+      '≠': (a, b) => { return a !== b },
+      '=': (a, b) => { return a === b }
+    }
+    let imageSource = imageData.url
+    let imageAlt = imageData.alt
+
+    if ('dynamic' === imageData.display && imageData.options && imageData.options?.length > 0) {
+      let targetVal = Number(calculateDataBite())
+      let argumentActive = false
+
+      imageData.options.forEach((option, index) => {
+        let argumentArr = option.arguments
+        let { source, alt } = option
+
+        if (false === argumentActive && argumentArr.length > 0) {
+          if (argumentArr[0].operator.length > 0 && argumentArr[0].threshold.length > 0) {
+            if (operators[argumentArr[0].operator](targetVal, argumentArr[0].threshold)) {
+              if (undefined !== argumentArr[1]) {
+                if (argumentArr[1].operator?.length > 0 && argumentArr[1].threshold?.length > 0) {
+                  if (operators[argumentArr[1].operator](targetVal, argumentArr[1].threshold)) {
+                    imageSource = source
+                    if (alt !== '' && alt !== undefined) { imageAlt = alt }
+                    argumentActive = true
+                  }
+                }
+              } else {
+                imageSource = source
+                if (alt !== '' && alt !== undefined) { imageAlt = alt }
+                argumentActive = true
+              }
+            }
+          }
+        }
+      })
+    }
+
+    return (imageSource.length > 0 && 'graphic' !== biteStyle && 'none' !== imageData.display ? <img alt={imageAlt} src={imageSource} className="bite-image callout" /> : null)
+  }, [ imageData])
+
   if(false === loading) {
     let biteClasses = [];
 
@@ -258,30 +490,29 @@ const CdcDataBite = (
     if(config.shadow) biteClasses.push('shadow')
 
     const showBite = undefined !== dataColumn && undefined !== dataFunction;
+
     body = (
       <>
         {isEditor && <EditorPanel />}
         <div className={isEditor ? 'spacing-wrapper' : ''}>
           <div className="cdc-data-bite-inner-container">
-            {title && <div className="bite-header">{parse(title)}</div>}
-            <div className={`bite ${biteClasses.join(' ')}`}>
-              <div className="bite-content-container">
-                {showBite && 'graphic' === biteStyle && isTop && <CircleCallout theme={config.theme} text={calculateDataBite()} biteFontSize={biteFontSize} /> }
-                {imageUrl && 'graphic' !== biteStyle && isTop && <img src={imageUrl} className="bite-image callout" />}
-                <div className="bite-content">
-                  {showBite && 'title' === biteStyle && <div className="bite-value" style={{fontSize: biteFontSize + 'px'}}>{calculateDataBite()}</div>}
-                  {biteBody &&
-                    <>
+            {title && <div className={`bite-header component__header ${config.theme}`}>{parse(title)}</div>}
+            <div className={`bite ${biteClasses.join(' ')} ${contentClasses.join(' ')}`}>
+              <div className={`bite-content-container ${innerContainerClasses.join(' ')}`}>
+                {showBite && 'graphic' === biteStyle && isTop && <CircleCallout theme={config.theme} text={calculateDataBite()} biteFontSize={biteFontSize} dataFormat={dataFormat} /> }
+                {isTop && <DataImage />}
+                <div className={`bite-content`}>
+                  {showBite && 'title' === biteStyle && <div className="bite-value cove-component__header" style={{fontSize: biteFontSize + 'px'}}>{calculateDataBite()}</div>}
+                    <Fragment>
                       <p className="bite-text">
                         {showBite && 'body' === biteStyle && <span className="bite-value data-bite-body" style={{fontSize: biteFontSize + 'px'}}>{calculateDataBite()}</span>}
                         {parse(biteBody)}
                       </p>
-                      {subtext && <p className="bite-subtext">{parse(subtext)}</p>}
-                    </>
-                  }
+                      {subtext && !isCompactStyle && <p className="bite-subtext">{parse(subtext)}</p>}
+                    </Fragment>
                 </div>
-                {imageUrl && 'graphic' !== biteStyle && isBottom && <img src={imageUrl} className="bite-image callout" />}
-                {showBite && 'graphic' === biteStyle && !isTop && <CircleCallout theme={config.theme} text={calculateDataBite()} biteFontSize={biteFontSize} /> }
+                {isBottom && <DataImage />}
+                {showBite && 'graphic' === biteStyle && !isTop && <CircleCallout theme={config.theme} text={calculateDataBite()} biteFontSize={biteFontSize} dataFormat={dataFormat} /> }
               </div>
             </div>
           </div>
@@ -337,8 +568,8 @@ export const BITE_LOCATION_BODY = 'body';
 export const BITE_LOCATION_GRAPHIC = 'graphic';
 export const BITE_LOCATIONS = {
   'graphic': 'Graphic',
-  'title': 'Text above body text',
-  'body': 'Inline with body text'
+  'title': 'Value above Message',
+  'body': 'Value before Message'
 };
 
 export const IMAGE_POSITION_LEFT = 'Left';
@@ -351,3 +582,19 @@ export const IMAGE_POSITIONS = [
   IMAGE_POSITION_TOP,
   IMAGE_POSITION_BOTTOM,
 ];
+
+export const DATA_OPERATOR_LESS = '<'
+export const DATA_OPERATOR_GREATER = '>'
+export const DATA_OPERATOR_LESSEQUAL = '<='
+export const DATA_OPERATOR_GREATEREQUAL = '>='
+export const DATA_OPERATOR_EQUAL = '='
+export const DATA_OPERATOR_NOTEQUAL = '≠'
+
+export const DATA_OPERATORS = [
+  DATA_OPERATOR_LESS,
+  DATA_OPERATOR_GREATER,
+  DATA_OPERATOR_LESSEQUAL,
+  DATA_OPERATOR_GREATEREQUAL,
+  DATA_OPERATOR_EQUAL,
+  DATA_OPERATOR_NOTEQUAL
+]

package/src/components/CircleCallout.js

@@ -1,8 +1,8 @@
-import React, { useState, useEffect, memo, useContext } from 'react'
+import React from 'react'
 import themes from '@cdc/core/data/themes';
 import chroma from 'chroma-js';
 
-const CircleCallout = ({text, theme = 'theme-blue', biteFontSize}) => {
+const CircleCallout = ({text, theme = 'theme-blue', dataFormat, biteFontSize}) => {
   const styles = {
     outerRing: {
       fill: themes[theme].primary
@@ -23,4 +23,4 @@ const CircleCallout = ({text, theme = 'theme-blue', biteFontSize}) => {
   )
 }
 
-export default CircleCallout
+export default CircleCallout