@cdc/data-bite 1.1.4 → 4.22.11

package/src/CdcDataBite.tsx

@@ -1,37 +1,38 @@
-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 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 numberFromString from '@cdc/core/helpers/numberFromString';
-import { Fragment } 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 parse from 'html-react-parser'
+
+import Context from './context'
+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
-interface Props{
-  configUrl?: string,
+interface Props {
+  configUrl?: string
   config?: any
   isDashboard?: boolean
   isEditor?: boolean
-  setConfig?:any
+  setConfig?: any
+  link?: any
 }
 
-const CdcDataBite:FC<Props> = (props) => {
-const { configUrl, config: configObj, isDashboard = false, isEditor = false, setConfig: setParentConfig } = props
+const CdcDataBite: FC<Props> = 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);
+  const [config, setConfig] = useState<DefaultsType>({ ...defaults })
+  const [loading, setLoading] = useState<Boolean>(true)
 
   const {
     title,
@@ -45,198 +46,161 @@ const { configUrl, config: configObj, isDashboard = false, isEditor = false, set
     filters,
     subtext,
     general: { isCompactStyle }
-  } = config;
-
+  } = config
 
+  const { innerContainerClasses, contentClasses } = useDataVizClasses(config)
 
   const transform = new DataTransform()
 
-  const [currentViewport, setCurrentViewport] = useState<String>('lg');
+  const [currentViewport, setCurrentViewport] = useState<String>('lg')
 
-  const [ coveLoadedHasRan, setCoveLoadedHasRan ] = useState(false)
+  const [coveLoadedHasRan, setCoveLoadedHasRan] = useState(false)
 
-  const [ container, setContainer ] = useState()
+  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)
+      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) => {
+  const updateConfig = newConfig => {
     // Deeper copy
     Object.keys(defaults).forEach(key => {
       if (newConfig[key] && 'object' === typeof newConfig[key] && !Array.isArray(newConfig[key])) {
         newConfig[key] = { ...defaults[key], ...newConfig[key] }
       }
-    });
+    })
 
     //Enforce default values that need to be calculated at runtime
-    newConfig.runtime = {};
-    newConfig.runtime.uniqueId = Date.now();
+    newConfig.runtime = {}
+    newConfig.runtime.uniqueId = Date.now()
 
     //Check things that are needed and set error messages if needed
-    newConfig.runtime.editorErrorMessage = '';
-    setConfig(newConfig);
+    newConfig.runtime.editorErrorMessage = ''
+    setConfig(newConfig)
   }
 
   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();
+    let response = configObj || (await (await fetch(configUrl)).json())
 
     // 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) {
-          newData = transform.autoStandardize(newData);
-          newData = transform.developerStandardize(newData, response.dataDescription);
+        newData = transform.autoStandardize(newData)
+        newData = transform.developerStandardize(newData, response.dataDescription)
       }
 
-      if(newData) {
-        responseData = newData;
+      if (newData) {
+        responseData = newData
       }
     }
 
-    response.data = responseData;
+    response.data = responseData
 
-    updateConfig({ ...defaults, ...response });
+    updateConfig({ ...defaults, ...response })
 
-    setLoading(false);
+    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 ''
     }
 
-
-    const applyPrecision =(value:number|string):string => {
+    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)
+      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)
+    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:(string|number)[]) => {
+    const getColumnSum = (arr: (string | number)[]) => {
       // first validation
-      if(arr===undefined || arr===null){
+      if (arr === undefined || arr === null) {
         console.error('Enter valid value for getColumnSum function ')
-        return;
+        return
       }
       // second validation
-      if(arr.length === 0 || !Array.isArray(arr)){
+      console.log('arr', arr)
+      if (arr.length === 0 || !Array.isArray(arr)) {
         console.error('Arguments are not valid getColumnSum function ')
-        return;
+        return
       }
-      let sum:number = 0
-      if(arr.length > 1){
+      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 = arr.map(el => Number(el)).reduce((sum: number, x: number) => sum + x)
+      } else {
         sum = Number(arr[0])
       }
-      return applyPrecision(sum);
+      return applyPrecision(sum)
     }
 
-    const getColumnMean=(arr:(string|number)[]) => { // add default params to escape errors on runtime
+    const getColumnMean = (arr: (string | number)[]) => {
+      // add default params to escape errors on runtime
       // first validation
-      if(arr===undefined || arr===null ||!Array.isArray(arr)){
+      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.
-        mean = arr.map(el=>Number(el)).reduce((a, b) => a + b) / arr.length
-      }else {
+
+      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);
+      return applyPrecision(mean)
     }
 
-    const getMode = (arr:any[]=[]):string[] => { // add default params to escape errors on runtime
-    // this function accepts any array and returns array of strings
+    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
 
-      for(let i = 0; i < arr.length; i++) {
+      for (let i = 0; i < arr.length; i++) {
         if (freq[arr[i]]) {
           freq[arr[i]] += 1
         } else {
@@ -250,152 +214,128 @@ const { configUrl, config: configObj, isDashboard = false, isEditor = false, set
 
       let res = []
 
-      for(let key in freq) {
-        if(freq[key] === max) res.push(key)
+      for (let key in freq) {
+        if (freq[key] === max) res.push(key)
       }
 
       return res
     }
 
     const getMedian = arr => {
-      if(!arr.length) return ;
+      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 applyLocaleString = (value:string):string=>{
-        if(value===undefined || value===null) return ;
-        if(Number.isNaN(value)|| typeof value ==='number') {
-        value = String(value)
+        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 applyLocaleString = (value: string): string => {
+      if (value === undefined || value === null) return
+      if (Number.isNaN(value) || typeof value === 'number') {
+        value = String(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*)$/)
+      // 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]
+      if (match) {
+        formattedValue += /[1-9]/.test(match[0]) ? match[1] : match[0]
       }
       return formattedValue
     }
-  
-  
 
-  
+    let dataBite: string | number = ''
 
-    let dataBite:string|number = '';
-    
     //Optionally filter the data based on the user's filter
-    let filteredData = config.data;
+    let filteredData = config.data
 
-    filters.map((filter) => {
-      if ( filter.columnName && filter.columnValue ) {
-      return filteredData = filteredData.filter(function (e) {
-          return e[filter.columnName] === filter.columnValue;
-        });
+    filters.map(filter => {
+      if (filter.columnName && filter.columnValue) {
+        return (filteredData = filteredData.filter(function (e) {
+          return e[filter.columnName] === filter.columnValue
+        }))
       } else {
-        return false;
+        return false
       }
-    });
+    })
 
-    let numericalData:any[] = []
-
-
-   // Get the column's data
-     if(filteredData.length){   
+    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)
-      });
-     }
-    
-  
+        if (typeof value === 'number') numericalData.push(value)
+      })
+    } else {
+      numericalData = config.data.map(item => Number(item[config.dataColumn]))
+    }
 
     switch (dataFunction) {
       case DATA_FUNCTION_COUNT:
-        dataBite = getColumnCount(numericalData);
-        break;
+        dataBite = getColumnCount(numericalData)
+        break
       case DATA_FUNCTION_SUM:
-        dataBite = getColumnSum(numericalData);
-        break;
+        dataBite = getColumnSum(numericalData)
+        break
       case DATA_FUNCTION_MEAN:
-        dataBite = getColumnMean(numericalData);
-        break;
+        dataBite = getColumnMean(numericalData)
+        break
       case DATA_FUNCTION_MEDIAN:
-        dataBite = getMedian(numericalData);
-        break;
+        dataBite = getMedian(numericalData)
+        break
       case DATA_FUNCTION_MAX:
-        dataBite = Math.max(...numericalData);
-        break;
+        dataBite = Math.max(...numericalData)
+        break
       case DATA_FUNCTION_MIN:
-        dataBite =Math.min(...numericalData);
-        break;
+        dataBite = Math.min(...numericalData)
+        break
       case DATA_FUNCTION_MODE:
-        dataBite = getMode(numericalData).join('');
-        break;
+        dataBite = getMode(numericalData).join('')
+        break
       case DATA_FUNCTION_RANGE:
-        let rangeMin :number|string = Math.min(...numericalData)
-        let rangeMax :number|string = Math.max(...numericalData)
-          rangeMin =  applyPrecision(rangeMin)
-          rangeMax =  applyPrecision(rangeMax)
-           if (config.dataFormat.commas) {
+        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;
+        }
+        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);
+        console.warn('Data bite function not recognized: ' + dataFunction)
     }
 
     // If not the range, then round and format here
     if (dataFunction !== DATA_FUNCTION_RANGE) {
-      dataBite = applyPrecision(dataBite);
-  
+      dataBite = applyPrecision(dataBite)
+
       if (config.dataFormat.commas) {
-       dataBite = applyLocaleString(dataBite)
+        dataBite = applyLocaleString(dataBite)
       }
-          // Optional 
+      // Optional
       // return config.dataFormat.prefix + dataBite + config.dataFormat.suffix;
 
-     return dataFormat.prefix + dataBite + dataFormat.suffix
-    } else { 
+      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 => {
-      if (node !== null) {
-          resizeObserver.observe(node);
-      }
-      setContainer(node)
-  },[]);
+    if (node !== null) {
+      resizeObserver.observe(node)
+    }
+    setContainer(node)
+  }, [])
 
   // Initial load
   useEffect(() => {
@@ -403,34 +343,45 @@ const { configUrl, config: configObj, isDashboard = false, isEditor = false, set
     publish('cove_loaded', { loadConfigHasRun: true })
   }, [])
 
-
   useEffect(() => {
     if (config && !coveLoadedHasRan && container) {
       publish('cove_loaded', { config: config })
       setCoveLoadedHasRan(true)
     }
-  }, [config, container]);
+  }, [config, container])
 
-  if(configObj && config && configObj.data !== config.data){
-    loadConfig();
+  if (configObj && config && JSON.stringify(configObj.data) !== JSON.stringify(config.data)) {
+    loadConfig()
   }
 
-  let body = (<Loading />)
+  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 }
+      '<': (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 targetVal = Number(calculateDataBite(false))
       let argumentActive = false
 
       imageData.options.forEach((option, index) => {
@@ -444,13 +395,17 @@ const { configUrl, config: configObj, isDashboard = false, isEditor = false, set
                 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 }
+                    if (alt !== '' && alt !== undefined) {
+                      imageAlt = alt
+                    }
                     argumentActive = true
                   }
                 }
               } else {
                 imageSource = source
-                if (alt !== '' && alt !== undefined) { imageAlt = alt }
+                if (alt !== '' && alt !== undefined) {
+                  imageAlt = alt
+                }
                 argumentActive = true
               }
             }
@@ -459,77 +414,90 @@ const { configUrl, config: configObj, isDashboard = false, isEditor = false, set
       })
     }
 
-    return (imageSource.length > 0 && 'graphic' !== biteStyle && 'none' !== imageData.display ? <img alt={imageAlt} src={imageSource} className="bite-image callout" /> : null)
-  }, [ imageData])
+    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 = [];
+  if (false === loading) {
+    let biteClasses = []
 
     let isTop = false
     let isBottom = false
 
     switch (config.bitePosition) {
       case IMAGE_POSITION_LEFT:
-        biteClasses.push('bite-left');
+        biteClasses.push('bite-left')
         isTop = true
-        break;
+        break
       case IMAGE_POSITION_RIGHT:
-        biteClasses.push('bite-right');
+        biteClasses.push('bite-right')
         isTop = true
-        break;
+        break
       case IMAGE_POSITION_TOP:
-        biteClasses.push('bite-top');
+        biteClasses.push('bite-top')
         isTop = true
-        break;
+        break
       case IMAGE_POSITION_BOTTOM:
-        biteClasses.push('bite-bottom');
+        biteClasses.push('bite-bottom')
         isBottom = true
-        break;
+        break
     }
 
-    if(config.shadow) biteClasses.push('shadow')
-
-    const showBite = undefined !== dataColumn && undefined !== dataFunction;
+    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(' ')}`}>
-                {showBite && 'graphic' === biteStyle && isTop && <CircleCallout theme={config.theme} text={calculateDataBite()} biteFontSize={biteFontSize} dataFormat={dataFormat} /> }
+          <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>}
-                    <Fragment>
-                      <p className="bite-text">
-                        {showBite && 'body' === biteStyle && <span className="bite-value data-bite-body" style={{fontSize: biteFontSize + 'px'}}>{calculateDataBite()}</span>}
+                  {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>
-                      {subtext && !isCompactStyle && <p className="bite-subtext">{parse(subtext)}</p>}
-                    </Fragment>
+                      {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 />}
-                {showBite && 'graphic' === biteStyle && !isTop && <CircleCallout theme={config.theme} text={calculateDataBite()} biteFontSize={biteFontSize} dataFormat={dataFormat} /> }
+                {showBite && 'graphic' === biteStyle && !isTop && <CircleCallout theme={config.theme} text={calculateDataBite()} biteFontSize={biteFontSize} dataFormat={dataFormat} />}
               </div>
             </div>
           </div>
+          {link && link}
         </div>
       </>
     )
   }
 
-  let classNames = [
-    'cdc-open-viz-module',
-    'type-data-bite',
-    currentViewport,
-    config.theme,
-    'font-' + config.fontSize
-  ];
+  let classNames = ['cove', 'cdc-open-viz-module', 'type-data-bite', currentViewport, config.theme, 'font-' + config.fontSize]
   if (isEditor) {
-    classNames.push('is-editor');
+    classNames.push('is-editor')
   }
 
   return (
@@ -538,50 +506,38 @@ const { configUrl, config: configObj, isDashboard = false, isEditor = false, set
         {body}
       </div>
     </Context.Provider>
-  );
-};
+  )
+}
 
-export default CdcDataBite;
+export default CdcDataBite
 
 /* Constant */
-export const DATA_FUNCTION_MAX = 'Max';
-export const DATA_FUNCTION_COUNT = 'Count';
-export const DATA_FUNCTION_MEAN = 'Mean (Average)';
-export const DATA_FUNCTION_MEDIAN = 'Median';
-export const DATA_FUNCTION_MIN = 'Min';
-export const DATA_FUNCTION_MODE = 'Mode';
-export const DATA_FUNCTION_RANGE = 'Range';
-export const DATA_FUNCTION_SUM = 'Sum';
-export const DATA_FUNCTIONS = [
-  DATA_FUNCTION_COUNT,
-  DATA_FUNCTION_MAX,
-  DATA_FUNCTION_MEAN,
-  DATA_FUNCTION_MEDIAN,
-  DATA_FUNCTION_MIN,
-  DATA_FUNCTION_MODE,
-  DATA_FUNCTION_RANGE,
-  DATA_FUNCTION_SUM
-];
-
-export const BITE_LOCATION_TITLE = 'title';
-export const BITE_LOCATION_BODY = 'body';
-export const BITE_LOCATION_GRAPHIC = 'graphic';
+export const DATA_FUNCTION_MAX = 'Max'
+export const DATA_FUNCTION_COUNT = 'Count'
+export const DATA_FUNCTION_MEAN = 'Mean (Average)'
+export const DATA_FUNCTION_MEDIAN = 'Median'
+export const DATA_FUNCTION_MIN = 'Min'
+export const DATA_FUNCTION_MODE = 'Mode'
+export const DATA_FUNCTION_RANGE = 'Range'
+export const DATA_FUNCTION_SUM = 'Sum'
+export const DATA_FUNCTIONS = [DATA_FUNCTION_COUNT, DATA_FUNCTION_MAX, DATA_FUNCTION_MEAN, DATA_FUNCTION_MEDIAN, DATA_FUNCTION_MIN, DATA_FUNCTION_MODE, DATA_FUNCTION_RANGE, DATA_FUNCTION_SUM]
+
+export const BITE_LOCATION_TITLE = 'title'
+export const BITE_LOCATION_BODY = 'body'
+export const BITE_LOCATION_GRAPHIC = 'graphic'
 export const BITE_LOCATIONS = {
-  'graphic': 'Graphic',
-  'title': 'Value above Message',
-  'body': 'Value before Message'
-};
-
-export const IMAGE_POSITION_LEFT = 'Left';
-export const IMAGE_POSITION_RIGHT = 'Right';
-export const IMAGE_POSITION_TOP = 'Top';
-export const IMAGE_POSITION_BOTTOM = 'Bottom';
-export const IMAGE_POSITIONS = [
-  IMAGE_POSITION_LEFT,
-  IMAGE_POSITION_RIGHT,
-  IMAGE_POSITION_TOP,
-  IMAGE_POSITION_BOTTOM,
-];
+  graphic: 'Graphic',
+  split: 'Split Graphic and Message',
+  title: 'Value above Message',
+  body: 'Value before Message',
+  end: 'Value after Message'
+}
+
+export const IMAGE_POSITION_LEFT = 'Left'
+export const IMAGE_POSITION_RIGHT = 'Right'
+export const IMAGE_POSITION_TOP = 'Top'
+export const IMAGE_POSITION_BOTTOM = 'Bottom'
+export const IMAGE_POSITIONS = [IMAGE_POSITION_LEFT, IMAGE_POSITION_RIGHT, IMAGE_POSITION_TOP, IMAGE_POSITION_BOTTOM]
 
 export const DATA_OPERATOR_LESS = '<'
 export const DATA_OPERATOR_GREATER = '>'
@@ -590,11 +546,4 @@ 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
-]
+export const DATA_OPERATORS = [DATA_OPERATOR_LESS, DATA_OPERATOR_GREATER, DATA_OPERATOR_LESSEQUAL, DATA_OPERATOR_GREATEREQUAL, DATA_OPERATOR_EQUAL, DATA_OPERATOR_NOTEQUAL]