@cdc/markup-include 4.25.7 → 4.25.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/markup-include",
-  "version": "4.25.7",
+  "version": "4.25.10",
   "description": "React component for displaying HTML content from an outside link",
   "moduleName": "CdcMarkupInclude",
   "main": "dist/cdcmarkupinclude",
@@ -27,15 +27,23 @@
   "license": "Apache-2.0",
   "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
   "dependencies": {
-    "@cdc/core": "^4.25.7",
+    "@cdc/core": "^4.25.10",
     "axios": "^1.9.0",
     "chroma": "0.0.1",
     "interweave": "^13.1.1",
+    "lodash": "^4.17.21",
     "react-accessible-accordion": "^5.0.1"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "9062881d50c824ee6cdd71868bafd016a5e5694d"
+  "devDependencies": {
+    "@rollup/plugin-dsv": "^3.0.2",
+    "@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": "c2db758e74ab9b9ca1667a6f9cb41dd0dccf985d"
 }

package/src/CdcMarkupInclude.tsx

@@ -7,6 +7,8 @@ import axios from 'axios'
 // cdc
 import { MarkupIncludeConfig } from '@cdc/core/types/MarkupInclude'
 import { publish } from '@cdc/core/helpers/events'
+import { processMarkupVariables } from '@cdc/core/helpers/markupProcessor'
+import { addValuesToFilters } from '@cdc/core/helpers/addValuesToFilters'
 import ConfigContext from './ConfigContext'
 import coveUpdateWorker from '@cdc/core/helpers/coveUpdateWorker'
 import EditorPanel from '../src/components/EditorPanel'
@@ -14,6 +16,7 @@ import defaults from './data/initial-state'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import Loading from '@cdc/core/components/Loading'
+import Filters from '@cdc/core/components/Filters'
 import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
 import markupIncludeReducer from './store/markupInclude.reducer'
 import Layout from '@cdc/core/components/Layout'
@@ -28,11 +31,13 @@ type CdcMarkupIncludeProps = {
   isDashboard: boolean
   isEditor: boolean
   setConfig: any
+  interactionLabel?: string
 }
 
 import Title from '@cdc/core/components/ui/Title'
 import FootnotesStandAlone from '@cdc/core/components/Footnotes/FootnotesStandAlone'
 import { Datasets } from '@cdc/core/types/DataSet'
+import { VizFilter } from '@cdc/core/types/VizFilter'
 
 const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
   configUrl,
@@ -40,7 +45,8 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
   datasets,
   isDashboard = true,
   isEditor = false,
-  setConfig: setParentConfig
+  setConfig: setParentConfig,
+  interactionLabel = 'no link provided'
 }) => {
   const initialState = {
     config: configObj,
@@ -60,9 +66,18 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
 
   const { innerContainerClasses, contentClasses } = useDataVizClasses(config || {})
   const { contentEditor, theme } = config || {}
+  const {
+    showNoDataMessage,
+    allowHideSection,
+    noDataMessageText,
+    markupVariables: contentEditorMarkupVariables
+  } = contentEditor || {}
   const data = configObj?.data
 
-  const { inlineHTML, markupVariables, srcUrl, title, useInlineHTML } = contentEditor || {}
+  // Support markupVariables at root level or inside contentEditor
+  const markupVariables = config?.markupVariables || contentEditorMarkupVariables || []
+
+  const { inlineHTML, srcUrl, title, useInlineHTML } = contentEditor || {}
 
   // Default Functions
   const updateConfig = newConfig => {
@@ -79,6 +94,15 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
     dispatch({ type: 'SET_CONFIG', payload: newConfig })
   }
 
+  const setFilters = (newFilters: VizFilter[]) => {
+    const _newFilters = addValuesToFilters(newFilters, data || [])
+    const updatedConfig = {
+      ...config,
+      filters: _newFilters
+    }
+    dispatch({ type: 'SET_CONFIG', payload: updatedConfig })
+  }
+
   const loadConfig = async () => {
     let response = configObj || (await (await fetch(configUrl)).json())
     let responseData = response.data ?? {}
@@ -91,6 +115,11 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
     response.data = responseData
     const processedConfig = { ...coveUpdateWorker(response) }
 
+    // Add filter values if filters are present
+    if (processedConfig.filters && processedConfig.filters.length > 0) {
+      processedConfig.filters = addValuesToFilters(processedConfig.filters, responseData)
+    }
+
     updateConfig({ ...configObj, ...processedConfig })
     dispatch({ type: 'SET_LOADING', payload: false })
   }
@@ -153,65 +182,6 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
     }
   }
 
-  const filterOutConditions = (workingData, conditionList) => {
-    const { columnName, isOrIsNotEqualTo, value } = conditionList[0]
-
-    const newWorkingData =
-      isOrIsNotEqualTo === 'is'
-        ? workingData?.filter(dataObject => dataObject[columnName] === value)
-        : workingData?.filter(dataObject => dataObject[columnName] !== value)
-
-    conditionList.shift()
-    return conditionList.length === 0 ? newWorkingData : filterOutConditions(newWorkingData, conditionList)
-  }
-
-  const emptyVariableChecker = []
-
-  const convertVariablesInMarkup = inlineMarkup => {
-    if (_.isEmpty(markupVariables)) return inlineMarkup
-    const variableRegexPattern = /{{(.*?)}}/g
-    const convertedInlineMarkup = inlineMarkup.replace(variableRegexPattern, variableTag => {
-      if (emptyVariableChecker.length > 0) return
-      const workingVariable = markupVariables.filter(variable => variable.tag === variableTag)[0]
-      if (workingVariable === undefined) return [variableTag]
-      const workingData =
-        workingVariable && workingVariable.conditions.length === 0
-          ? data
-          : filterOutConditions(data, [...workingVariable.conditions])
-
-      const variableValues: string[] = _.uniq(
-        (workingData || []).map(dataObject => {
-          const dataObjectValue = dataObject[workingVariable.columnName]
-          return workingVariable.addCommas && !isNaN(parseFloat(dataObjectValue))
-            ? parseFloat(dataObjectValue).toLocaleString('en-US', { useGrouping: true })
-            : dataObjectValue
-        })
-      )
-
-      const variableDisplay = []
-
-      const listConjunction = !isEditor ? 'and' : 'or'
-
-      const length = variableValues.length
-      if (length === 2) {
-        const newVariableValues = variableValues.join(` ${listConjunction} `)
-        variableValues.splice(0, 2, newVariableValues)
-      }
-      if (length > 2) {
-        variableValues[length - 1] = `${listConjunction} ${variableValues[length - 1]}`
-      }
-      variableDisplay.push(variableValues.join(', '))
-
-      const finalDisplay = variableDisplay[0]
-
-      if (finalDisplay === '' && contentEditor.allowHideSection) {
-        emptyVariableChecker.push(true)
-      }
-      return finalDisplay
-    })
-    return convertedInlineMarkup
-  }
-
   const parseBodyMarkup = markup => {
     let parse
     let hasBody = false
@@ -248,27 +218,53 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
 
   let content = <Loading />
 
-  const markup = useInlineHTML ? convertVariablesInMarkup(inlineHTML) : parseBodyMarkup(urlMarkup)
+  const processedMarkup = useInlineHTML
+    ? processMarkupVariables(inlineHTML, data || [], markupVariables || [], {
+        isEditor,
+        showNoDataMessage,
+        allowHideSection,
+        filters: config?.filters || []
+      })
+    : { processedContent: parseBodyMarkup(urlMarkup), shouldHideSection: false, shouldShowNoDataMessage: false }
 
-  const hideMarkupInclude = contentEditor?.allowHideSection && emptyVariableChecker.length > 0 && !isEditor
+  const markup = processedMarkup.processedContent
+
+  const hideMarkupInclude = processedMarkup.shouldHideSection
+  const _showNoDataMessage = processedMarkup.shouldShowNoDataMessage
 
   if (loading === false) {
     content = (
       <>
         {isEditor && <EditorPanel datasets={datasets} />}
+
         {!hideMarkupInclude && (
           <Layout.Responsive isEditor={isEditor}>
             <div className='markup-include-content-container cove-component__content no-borders'>
               <div className={`markup-include-component ${contentClasses.join(' ')}`}>
                 <Title title={title} isDashboard={isDashboard} classes={[`${theme}`, 'mb-0']} />
                 <div className={`${innerContainerClasses.join(' ')}`}>
+                  {/* Filters */}
+                  {config.filters && config.filters.length > 0 && (
+                    <Filters
+                      config={config}
+                      setFilters={setFilters}
+                      excludedData={data || []}
+                      dimensions={[0, 0]}
+                      interactionLabel={interactionLabel || 'markup-include'}
+                    />
+                  )}
                   <div className='cove-component__content-wrap'>
-                    {!markupError && <Markup allowElements={!!urlMarkup} content={markup} />}
-                    {markupError && srcUrl && <div className='warning'>{errorMessage}</div>}
+                    {_showNoDataMessage && (
+                      <div className='no-data-message'>
+                        <p>{`${noDataMessageText}`}</p>
+                      </div>
+                    )}
+                    {!markupError && !_showNoDataMessage && <Markup allowElements={!!urlMarkup} content={markup} />}
+                    {markupError && srcUrl && !_showNoDataMessage && <div className='warning'>{errorMessage}</div>}
                   </div>
                 </div>
               </div>
-              <FootnotesStandAlone config={configObj?.footnotes} filters={[]} />
+              <FootnotesStandAlone config={configObj?.footnotes} filters={config?.filters || []} />
             </div>
           </Layout.Responsive>
         )}