@cdc/data-bite 1.1.4 → 4.22.10

package/examples/private/totals.json

@@ -0,0 +1 @@
+{"dashboard":{"theme":"theme-blue","title":"Total Vaccine Doses Administered","description":"Total vaccine doses administered data are updated every Wednesday as soon as they are reviewed and verified.\n<br>\nInformation about the number of vials shipped is posted on <a href=\"https://aspr.hhs.gov/SNS/Pages/JYNNEOS-Distribution.aspx\">https://aspr.hhs.gov/SNS/Pages/JYNNEOS-Distribution.aspx</a>, and is updated every Monday, Wednesday, and Friday.\n"},"rows":[[{"width":12,"widget":"data-bite1661201913029"},{},{}]],"visualizations":{"data-bite1661201911110":{"type":"data-bite","data":[{"Vaccines Distributed":null,"Vaccines Administered":803596,"Doses Shipped Date":null,"AsOf":" Data as of September 27 2022 4:00 AM EDT"}],"dataBite":"","dataFunction":"Sum","dataColumn":"Vaccines Distributed","bitePosition":"Left","biteFontSize":24,"fontSize":"small","biteBody":"<br><span class=\"h5\">Vials Shipped to all U.S. Jurisdictions</span>","imageData":{"display":"none","url":"","alt":"","options":[]},"dataFormat":{"roundToPlace":0,"commas":true,"prefix":"","suffix":""},"biteStyle":"body","filters":[],"subtext":"","title":"","theme":"theme-blue","shadow":false,"newViz":true,"uid":"data-bite1661201911110","visualizationType":"data-bite"},"data-bite1661201913029":{"type":"data-bite","data":[{"Vaccines Distributed":null,"Vaccines Administered":803596,"Doses Shipped Date":null,"AsOf":" Data as of September 27 2022 4:00 AM EDT"}],"dataBite":"","dataFunction":"Sum","dataColumn":"Vaccines Administered","bitePosition":"Left","biteFontSize":24,"fontSize":"small","biteBody":"<br><span class=\"h5\">Doses Administered in the 54 U.S. Jurisdictions Reporting Data<span id=\"administered_date\"> as of October 4, 2022.","imageData":{"display":"none","url":"","alt":"","options":[]},"dataFormat":{"roundToPlace":0,"commas":true,"prefix":"","suffix":""},"biteStyle":"body","filters":[],"subtext":"","title":"","theme":"theme-blue","shadow":false,"visual":{"border":false,"accent":false,"background":false,"hideBackgroundColor":false,"borderColorTheme":false},"general":{"isCompactStyle":false},"newViz":true,"uid":"data-bite1661201913029","visualizationType":"data-bite","editing":true}},"table":{"label":"Data Table","show":false},"data":[{"Vaccines Distributed":null,"Vaccines Administered":803596,"Doses Shipped Date":null,"AsOf":" Data as of September 27 2022 4:00 AM EDT"}],"dataFileName":"https://www.cdc.gov/wcms/vizdata/poxvirus/monkeypox/data/vaccines/mpx_vaccine_databites.csv","dataFileSourceType":"url","dataUrl":"https://www.cdc.gov/wcms/vizdata/poxvirus/monkeypox/data/vaccines/mpx_vaccine_databites.csv","type":"dashboard","orientation":null,"visualizationSubType":null,"runtime":{},"uuid":1661454522321}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/data-bite",
-  "version": "1.1.4",
+  "version": "4.22.10",
   "description": "React component for displaying a single piece of data in a card module",
   "main": "dist/cdcdatabite",
   "scripts": {
@@ -20,7 +20,7 @@
   "license": "Apache-2.0",
   "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
   "dependencies": {
-    "@cdc/core": "^1.1.4",
+    "@cdc/core": "^4.22.10",
     "chroma": "0.0.1",
     "chroma-js": "^2.1.0",
     "html-react-parser": "1.4.9",
@@ -39,5 +39,5 @@
   "resolutions": {
     "@types/react": "17.x"
   },
-  "gitHead": "ff89a7aea74c533413c62ef8859cc011e6b3cbfa"
+  "gitHead": "a7eb551a98c7363d3be58cb81dfc8bbc00522804"
 }

package/src/CdcDataBite.tsx

@@ -1,21 +1,22 @@
-import React, { useEffect,  useState, useCallback,FC } from 'react';
+import React, { useEffect,  useState, useCallback,FC, memo } 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 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 { DataTransform } from '@cdc/core/helpers/DataTransform';
 import CircleCallout from './components/CircleCallout';
 import './scss/main.scss';
 import numberFromString from '@cdc/core/helpers/numberFromString';
+import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData';
 import { Fragment } from 'react';
 
 import { publish } from '@cdc/core/helpers/events'
+import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses';
+import cacheBustingString from '@cdc/core/helpers/cacheBustingString';
 
 
 type DefaultsType = typeof defaults
@@ -25,10 +26,11 @@ interface Props{
   isDashboard?: boolean
   isEditor?: boolean
   setConfig?:any
+  link?:any
 }
 
 const CdcDataBite:FC<Props> = (props) => {
-const { configUrl, config: configObj, isDashboard = false, isEditor = false, setConfig: setParentConfig } = props
+const { configUrl, config: configObj, isDashboard = false, isEditor = false, setConfig: setParentConfig,link } = props
 
   const [config, setConfig] = useState<DefaultsType>({...defaults});
   const [loading, setLoading] = useState<Boolean>(true);
@@ -47,6 +49,7 @@ const { configUrl, config: configObj, isDashboard = false, isEditor = false, set
     general: { isCompactStyle }
   } = config;
 
+  const { innerContainerClasses, contentClasses } = useDataVizClasses(config);
 
 
   const transform = new DataTransform()
@@ -65,44 +68,6 @@ const { configUrl, config: configObj, isDashboard = false, isEditor = false, set
     }
   });
 
-  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 => {
@@ -123,15 +88,14 @@ const { configUrl, config: configObj, isDashboard = false, isEditor = false, set
   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) {
-      response.dataUrl = `${response.dataUrl}?${cacheBustingString}`;
+
+      response.dataUrl = `${response.dataUrl}?${cacheBustingString()}`;
       let newData = await fetchRemoteData(response.dataUrl)
       
       if (newData && response.dataDescription) {
@@ -151,11 +115,11 @@ const { configUrl, config: configObj, isDashboard = false, isEditor = false, set
     setLoading(false);
   }
 
-  const calculateDataBite = ():string|number => {
-  
+  const calculateDataBite = (includePrefixSuffix:boolean = true):string|number => {
+
     //If either the column or function aren't set, do not calculate
     if (!dataColumn || !dataFunction) {
-      return '';  
+      return '';
     }
 
 
@@ -164,8 +128,8 @@ const { configUrl, config: configObj, isDashboard = false, isEditor = false, set
       if(value === undefined || value===null){
        console.error('Enter correct value to "applyPrecision()" function ')
       return ;
-    }  
-  // second validation 
+    }
+  // second validation
   if(Number.isNaN(value)){
     console.error(' Argunment isNaN, "applyPrecision()" function ')
     return;
@@ -200,6 +164,7 @@ const { configUrl, config: configObj, isDashboard = false, isEditor = false, set
         return;
       }
       // second validation
+      console.log('arr', arr)
       if(arr.length === 0 || !Array.isArray(arr)){
         console.error('Arguments are not valid getColumnSum function ')
         return;
@@ -218,9 +183,13 @@ const { configUrl, config: configObj, isDashboard = false, isEditor = false, set
       // first validation
       if(arr===undefined || arr===null ||!Array.isArray(arr)){
         console.error('Enter valid parameter getColumnMean function')
-        return 
+        return
+      }
+
+      if(config.dataFormat.ignoreZeros) {
+        arr = arr.filter( num => num !== 0 )
       }
-     
+
       let mean:number = 0
       if(arr.length > 1){
        /// first convert each element to number then add using reduce method to escape string concatination.
@@ -284,13 +253,9 @@ const { configUrl, config: configObj, isDashboard = false, isEditor = false, set
       }
       return formattedValue
     }
-  
-  
-
-  
 
     let dataBite:string|number = '';
-    
+
     //Optionally filter the data based on the user's filter
     let filteredData = config.data;
 
@@ -304,18 +269,17 @@ const { configUrl, config: configObj, isDashboard = false, isEditor = false, set
       }
     });
 
-    let numericalData:any[] = []
-
+    let numericalData:any[] = []; 
+    // Get the column's data
+    if(filteredData.length){
+    filteredData.forEach(row => {
+      let value = numberFromString(row[dataColumn])
+      if(typeof value === 'number') numericalData.push(value)
+    });
+    } else {
+    numericalData = config.data.map( item => Number( item[config.dataColumn] ));
+    }
 
-   // 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:
@@ -348,7 +312,7 @@ const { configUrl, config: configObj, isDashboard = false, isEditor = false, set
           rangeMin = applyLocaleString(rangeMin)
           rangeMax = applyLocaleString(rangeMax)
           }
-      dataBite =  config.dataFormat.prefix + rangeMin + config.dataFormat.suffix + ' - ' + config.dataFormat.prefix + rangeMax+config.dataFormat.suffix;  
+      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);
@@ -357,37 +321,22 @@ const { configUrl, config: configObj, isDashboard = false, isEditor = false, set
     // If not the range, then round and format here
     if (dataFunction !== DATA_FUNCTION_RANGE) {
       dataBite = applyPrecision(dataBite);
-  
+
       if (config.dataFormat.commas) {
        dataBite = applyLocaleString(dataBite)
       }
-          // Optional 
+          // Optional
       // return config.dataFormat.prefix + dataBite + config.dataFormat.suffix;
 
-     return dataFormat.prefix + dataBite + dataFormat.suffix
+     return includePrefixSuffix ? (dataFormat.prefix + dataBite + dataFormat.suffix) : dataBite
     } else { 
       //Rounding and formatting for ranges happens earlier.
 
-      return dataFormat.prefix + dataBite + dataFormat.suffix
+      return includePrefixSuffix ? (dataFormat.prefix + dataBite + dataFormat.suffix) : dataBite
     }
   }
 
-  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 => {
@@ -411,7 +360,7 @@ const { configUrl, config: configObj, isDashboard = false, isEditor = false, set
     }
   }, [config, container]);
 
-  if(configObj && config && configObj.data !== config.data){
+  if(configObj && config && JSON.stringify(configObj.data) !== JSON.stringify(config.data)){
     loadConfig();
   }
 
@@ -430,7 +379,7 @@ const { configUrl, config: configObj, isDashboard = false, isEditor = false, set
     let imageAlt = imageData.alt
 
     if ('dynamic' === imageData.display && imageData.options && imageData.options?.length > 0) {
-      let targetVal = Number(calculateDataBite())
+      let targetVal = Number(calculateDataBite(false))
       let argumentActive = false
 
       imageData.options.forEach((option, index) => {
@@ -487,28 +436,30 @@ const { configUrl, config: configObj, isDashboard = false, isEditor = false, set
         break;
     }
 
-    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 component__header ${config.theme}`}>{parse(title)}</div>}
-            <div className={`bite ${biteClasses.join(' ')} ${contentClasses.join(' ')}`}>
-              <div className={`bite-content-container ${innerContainerClasses.join(' ')}`}>
+          <div className={innerContainerClasses.join(' ')}>
+            {title && <div className={`bite-header cove-component__header component__header ${config.theme}`}>{parse(title)}</div>}
+            <div className={`bite ${biteClasses.join(' ')}`}>
+              <div className={`bite-content-container ${contentClasses.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>}
+                  {showBite && 'title' === biteStyle && <div className="bite-value" style={{fontSize: biteFontSize + 'px'}}>{calculateDataBite()}</div>}
+                  {showBite && 'split' === biteStyle && <div className="bite-value" style={{fontSize: biteFontSize + 'px'}}>{calculateDataBite()}</div>}
                     <Fragment>
+                      <div className="bite-content__text-wrap">
                       <p className="bite-text">
                         {showBite && 'body' === biteStyle && <span className="bite-value data-bite-body" style={{fontSize: biteFontSize + 'px'}}>{calculateDataBite()}</span>}
                         {parse(biteBody)}
                       </p>
+                      {showBite && 'end' === biteStyle && <span className="bite-value data-bite-body" style={{fontSize: biteFontSize + 'px'}}>{calculateDataBite()}</span>}
                       {subtext && !isCompactStyle && <p className="bite-subtext">{parse(subtext)}</p>}
+                      </div>
                     </Fragment>
                 </div>
                 {isBottom && <DataImage />}
@@ -516,12 +467,14 @@ const { configUrl, config: configObj, isDashboard = false, isEditor = false, set
               </div>
             </div>
           </div>
+          {link && link}
         </div>
       </>
     )
   }
 
   let classNames = [
+    'cove',
     'cdc-open-viz-module',
     'type-data-bite',
     currentViewport,
@@ -568,8 +521,10 @@ export const BITE_LOCATION_BODY = 'body';
 export const BITE_LOCATION_GRAPHIC = 'graphic';
 export const BITE_LOCATIONS = {
   'graphic': 'Graphic',
+  'split': 'Split Graphic and Message',
   'title': 'Value above Message',
-  'body': 'Value before Message'
+  'body': 'Value before Message',
+  'end': 'Value after Message'
 };
 
 export const IMAGE_POSITION_LEFT = 'Left';