@cdc/markup-include 4.25.7 → 4.25.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/markup-include",
-  "version": "4.25.7",
+  "version": "4.25.8",
   "description": "React component for displaying HTML content from an outside link",
   "moduleName": "CdcMarkupInclude",
   "main": "dist/cdcmarkupinclude",
@@ -27,7 +27,7 @@
   "license": "Apache-2.0",
   "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
   "dependencies": {
-    "@cdc/core": "^4.25.7",
+    "@cdc/core": "^4.25.8",
     "axios": "^1.9.0",
     "chroma": "0.0.1",
     "interweave": "^13.1.1",
@@ -37,5 +37,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "9062881d50c824ee6cdd71868bafd016a5e5694d"
+  "gitHead": "e369994230b5e3facff224e1d89d5937528ac5a0"
 }

package/src/CdcMarkupInclude.tsx

@@ -33,6 +33,7 @@ type CdcMarkupIncludeProps = {
 import Title from '@cdc/core/components/ui/Title'
 import FootnotesStandAlone from '@cdc/core/components/Footnotes/FootnotesStandAlone'
 import { Datasets } from '@cdc/core/types/DataSet'
+import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 
 const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
   configUrl,
@@ -60,6 +61,7 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
 
   const { innerContainerClasses, contentClasses } = useDataVizClasses(config || {})
   const { contentEditor, theme } = config || {}
+  const { showNoDataMessage, allowHideSection, noDataMessageText } = contentEditor || {}
   const data = configObj?.data
 
   const { inlineHTML, markupVariables, srcUrl, title, useInlineHTML } = contentEditor || {}
@@ -166,6 +168,7 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
   }
 
   const emptyVariableChecker = []
+  const noDataMessageChecker = []
 
   const convertVariablesInMarkup = inlineMarkup => {
     if (_.isEmpty(markupVariables)) return inlineMarkup
@@ -200,10 +203,15 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
       if (length > 2) {
         variableValues[length - 1] = `${listConjunction} ${variableValues[length - 1]}`
       }
+
       variableDisplay.push(variableValues.join(', '))
 
       const finalDisplay = variableDisplay[0]
 
+      if (showNoDataMessage && finalDisplay === '') {
+        noDataMessageChecker.push(true)
+      }
+
       if (finalDisplay === '' && contentEditor.allowHideSection) {
         emptyVariableChecker.push(true)
       }
@@ -238,6 +246,7 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
     if (config && !coveLoadedHasRan && container) {
       publish('cove_loaded', { config: config })
       dispatch({ type: 'SET_COVE_LOADED_HAS_RAN', payload: true })
+      publishAnalyticsEvent('markup-include_loaded', 'load', configUrl, 'markup-include')
     }
   }, [config, container])
 
@@ -251,11 +260,13 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
   const markup = useInlineHTML ? convertVariablesInMarkup(inlineHTML) : parseBodyMarkup(urlMarkup)
 
   const hideMarkupInclude = contentEditor?.allowHideSection && emptyVariableChecker.length > 0 && !isEditor
+  const _showNoDataMessage = showNoDataMessage && noDataMessageChecker.length > 0 && !isEditor
 
   if (loading === false) {
     content = (
       <>
         {isEditor && <EditorPanel datasets={datasets} />}
+
         {!hideMarkupInclude && (
           <Layout.Responsive isEditor={isEditor}>
             <div className='markup-include-content-container cove-component__content no-borders'>
@@ -263,8 +274,13 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
                 <Title title={title} isDashboard={isDashboard} classes={[`${theme}`, 'mb-0']} />
                 <div className={`${innerContainerClasses.join(' ')}`}>
                   <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>

package/src/components/EditorPanel.tsx

@@ -48,7 +48,8 @@ type MarkupIncludeEditorPanelProps = {
 const EditorPanel: React.FC<MarkupIncludeEditorPanelProps> = ({ datasets }) => {
   const { config, data, isDashboard, loading, setParentConfig, updateConfig } = useContext(ConfigContext)
   const { contentEditor, theme, visual } = config
-  const { inlineHTML, markupVariables, srcUrl, title, useInlineHTML, allowHideSection } = contentEditor
+  const { inlineHTML, markupVariables, srcUrl, title, useInlineHTML, allowHideSection, shoNoDataMessage } =
+    contentEditor
   const [displayPanel, setDisplayPanel] = useState(true)
   const updateField = updateFieldFactory(config, updateConfig, true)
   const hasData = data?.[0] !== undefined ?? false
@@ -223,6 +224,14 @@ const EditorPanel: React.FC<MarkupIncludeEditorPanelProps> = ({ datasets }) => {
                       </Tooltip>
                     }
                   />
+
+                  <CheckBox
+                    value={contentEditor.showNoDataMessage}
+                    section='contentEditor'
+                    fieldName='showNoDataMessage'
+                    label='Add No Data Message'
+                    updateField={updateField}
+                  />
                 </div>
 
                 <div className='mb-1 d-flex'>

package/src/data/initial-state.js

@@ -5,7 +5,9 @@ export default {
     showHeader: true,
     srcUrl: '#example',
     title: 'Markup Include',
-    useInlineHTML: false
+    useInlineHTML: false,
+    showNoDataMessage: false,
+    noDataMessageText: 'No Data Available'
   },
   data: [],
   legend: {},

package/src/index.jsx

@@ -15,7 +15,11 @@ let domContainer = document.getElementsByClassName('react-container')[0]
 ReactDOM.createRoot(domContainer).render(
   <React.StrictMode>
     <GlobalContextProvider>
-      <CdcMarkupInclude configUrl={domContainer.attributes['data-config'].value} isEditor={isEditor} />
+      <CdcMarkupInclude
+        configUrl={domContainer.attributes['data-config'].value}
+        interactionLabel={domContainer.attributes['data-config'].value}
+        isEditor={isEditor}
+      />
     </GlobalContextProvider>
   </React.StrictMode>
 )

package/src/types/Config.ts

@@ -11,6 +11,8 @@ export type Config = {
     srcUrl: string
     title: string
     useInlineHTML: boolean
+    showNoDataMessage: boolean
+    noDataMessageText: string
   }
   data?: Object[]
   legend: {}