@cdc/data-bite 4.25.8 → 4.25.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/data-bite",
-  "version": "4.25.8",
+  "version": "4.25.11",
   "description": "React component for displaying a single piece of data in a card module",
   "moduleName": "CdcDataBite",
   "main": "dist/cdcdatabite",
@@ -27,13 +27,22 @@
   "license": "Apache-2.0",
   "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
   "dependencies": {
-    "@cdc/core": "^4.25.8",
-    "chroma": "0.0.1",
-    "react-accessible-accordion": "^3.3.4"
+    "@cdc/core": "^4.25.11",
+    "chroma-js": "3.1.2",
+    "html-react-parser": "5.2.3",
+    "lodash": "^4.17.21",
+    "react-accessible-accordion": "^5.0.1",
+    "resize-observer-polyfill": "^1.5.1"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "e369994230b5e3facff224e1d89d5937528ac5a0"
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^4.4.11",
+    "vite-plugin-css-injected-by-js": "^2.4.0",
+    "vite-plugin-svgr": "^2.4.0"
+  },
+  "gitHead": "5f09a137c22f454111ab5f4cd7fdf1d2d58e31bd"
 }

package/src/CdcDataBite.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback, useReducer } from 'react'
+import { useEffect, useCallback, useReducer } from 'react'
 import { Fragment } from 'react'
 
 // contexts & initial state
@@ -17,6 +17,9 @@ import Layout from '@cdc/core/components/Layout'
 import ResizeObserver from 'resize-observer-polyfill'
 import parse from 'html-react-parser'
 
+// markup processing
+import { processMarkupVariables } from '@cdc/core/helpers/markupProcessor'
+
 // helpers
 import getViewport from '@cdc/core/helpers/getViewport'
 import { DataTransform } from '@cdc/core/helpers/DataTransform'
@@ -28,24 +31,21 @@ import cacheBustingString from '@cdc/core/helpers/cacheBustingString'
 import coveUpdateWorker from '@cdc/core/helpers/coveUpdateWorker'
 import { Config } from './types/Config'
 import dataBiteReducer from './store/db.reducer'
+import { IMAGE_POSITION_LEFT, IMAGE_POSITION_RIGHT, IMAGE_POSITION_TOP, IMAGE_POSITION_BOTTOM } from './constants'
+
 import {
   DATA_FUNCTION_COUNT,
   DATA_FUNCTION_MAX,
   DATA_FUNCTION_MEAN,
   DATA_FUNCTION_MEDIAN,
-  DATA_FUNCTION_MIN,
   DATA_FUNCTION_MODE,
+  DATA_FUNCTION_MIN,
   DATA_FUNCTION_RANGE,
-  DATA_FUNCTION_SUM,
-  IMAGE_POSITION_LEFT,
-  IMAGE_POSITION_RIGHT,
-  IMAGE_POSITION_TOP,
-  IMAGE_POSITION_BOTTOM
-} from './constants'
+  DATA_FUNCTION_SUM
+} from '@cdc/core/helpers/constants'
 
 // styles
 import './scss/main.scss'
-import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 
 type CdcDataBiteProps = {
   config: Config
@@ -90,7 +90,9 @@ const CdcDataBite = (props: CdcDataBiteProps) => {
     dataFormat,
     biteStyle,
     filters,
-    subtext
+    subtext,
+    markupVariables,
+    enableMarkupVariables
   } = config
 
   const { innerContainerClasses, contentClasses } = useDataVizClasses(config)
@@ -124,7 +126,25 @@ const CdcDataBite = (props: CdcDataBiteProps) => {
 
   //@ts-ignore
   const loadConfig = async () => {
-    let response = configObj || (await (await fetch(configUrl)).json())
+    let response = configObj
+
+    if (!response && configUrl) {
+      try {
+        const fetchResponse = await fetch(configUrl)
+        if (fetchResponse.ok) {
+          const text = await fetchResponse.text()
+          response = text ? JSON.parse(text) : {}
+        } else {
+          console.warn(`Failed to fetch config from ${configUrl}: ${fetchResponse.status}`)
+          response = {}
+        }
+      } catch (error) {
+        console.warn(`Error loading config from ${configUrl}:`, error)
+        response = {}
+      }
+    } else if (!response) {
+      response = {}
+    }
 
     // If data is included through a URL, fetch that and store
     let responseData = response.data ?? []
@@ -148,10 +168,25 @@ const CdcDataBite = (props: CdcDataBiteProps) => {
     const processedConfig = { ...coveUpdateWorker(response) }
 
     updateConfig({ ...defaults, ...processedConfig })
-    publishAnalyticsEvent('data-bite_loaded', 'load', interactionLabel, 'data-bite')
     dispatch({ type: 'SET_LOADING', payload: false })
   }
 
+  // Process markup variables in content
+  const processContentWithMarkup = (content: string) => {
+    if (!enableMarkupVariables || !markupVariables || markupVariables.length === 0) {
+      return content
+    }
+
+    const result = processMarkupVariables(content, config.data, markupVariables, {
+      isEditor,
+      showNoDataMessage: false,
+      allowHideSection: false,
+      filters: config.filters || []
+    })
+
+    return result.processedContent
+  }
+
   const calculateDataBite = (includePrefixSuffix = true) => {
     //If either the column or function aren't set, do not calculate
     if (!dataColumn || !dataFunction) {
@@ -566,7 +601,7 @@ const CdcDataBite = (props: CdcDataBiteProps) => {
             <Title
               showTitle={config.visual?.showTitle}
               config={config}
-              title={title}
+              title={processContentWithMarkup(title)}
               isDashboard={isDashboard}
               classes={['bite-header', `${config.theme}`]}
             />
@@ -600,14 +635,16 @@ const CdcDataBite = (props: CdcDataBiteProps) => {
                             {calculateDataBite()}
                           </span>
                         )}
-                        {parse(biteBody)}
+                        {parse(processContentWithMarkup(biteBody))}
                       </p>
                       {showBite && 'end' === biteStyle && (
                         <span className='bite-value data-bite-body' style={{ fontSize: biteFontSize + 'px' }}>
                           {calculateDataBite()}
                         </span>
                       )}
-                      {subtext && !config.general.isCompactStyle && <p className='bite-subtext'>{parse(subtext)}</p>}
+                      {subtext && !config.general.isCompactStyle && (
+                        <p className='bite-subtext'>{parse(processContentWithMarkup(subtext))}</p>
+                      )}
                     </div>
                   </Fragment>
                 </div>
@@ -630,7 +667,9 @@ const CdcDataBite = (props: CdcDataBiteProps) => {
   }
 
   return (
-    <Context.Provider value={{ config, updateConfig, loading, data: config.data, setParentConfig, isDashboard }}>
+    <Context.Provider
+      value={{ config, updateConfig, loading, data: config.data, setParentConfig, isDashboard, isEditor }}
+    >
       {biteStyle !== 'gradient' && (
         <Layout.VisualizationWrapper
           ref={outerContainerRef}