@cdc/markup-include 4.24.5 → 4.24.9-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/markup-include",
-  "version": "4.24.5",
+  "version": "4.24.9-1",
   "description": "React component for displaying HTML content from an outside link",
   "moduleName": "CdcMarkupInclude",
   "main": "dist/cdcmarkupinclude",
@@ -11,8 +11,9 @@
     "preview": "vite preview",
     "graph": "nx graph",
     "prepublishOnly": "lerna run --scope @cdc/markup-include build",
-    "test": "vitest watch --reporter verbose",
-    "test:ui": "vitest --ui"
+    "test": "vitest run --reporter verbose",
+    "test-watch": "vitest watch --reporter verbose",
+    "test-watch:ui": "vitest --ui"
   },
   "repository": {
     "type": "git",
@@ -26,7 +27,7 @@
   "license": "Apache-2.0",
   "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
   "dependencies": {
-    "@cdc/core": "^4.24.5",
+    "@cdc/core": "^4.24.9-1",
     "axios": "^1.6.0",
     "chroma": "0.0.1",
     "chroma-js": "^2.1.0",
@@ -38,5 +39,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "def85aaf4cd9dc1983e80f2900199f35de82af95"
+  "gitHead": "4a77c2fa79c8fa6074da3b6dfee3d8e32f0b2586"
 }

package/src/CdcMarkupInclude.tsx

@@ -31,8 +31,21 @@ type CdcMarkupIncludeProps = {
 
 import Title from '@cdc/core/components/ui/Title'
 
-const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({ configUrl, config: configObj, isDashboard = true, isEditor = true, setConfig: setParentConfig }) => {
-  const initialState = { config: configObj, loading: true, urlMarkup: '', markupError: null, errorMessage: null, coveLoadedHasRan: false }
+const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({
+  configUrl,
+  config: configObj,
+  isDashboard = true,
+  isEditor = false,
+  setConfig: setParentConfig
+}) => {
+  const initialState = {
+    config: configObj,
+    loading: true,
+    urlMarkup: '',
+    markupError: null,
+    errorMessage: null,
+    coveLoadedHasRan: false
+  }
 
   const [state, dispatch] = useReducer(markupIncludeReducer, initialState)
 
@@ -72,7 +85,7 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({ configUrl, config:
     }
 
     response.data = responseData
-    const processedConfig = { ...(await coveUpdateWorker(response)) }
+    const processedConfig = { ...coveUpdateWorker(response) }
 
     updateConfig({ ...configObj, ...processedConfig })
     dispatch({ type: 'SET_LOADING', payload: false })
@@ -92,7 +105,8 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({ configUrl, config:
       let errorList = {
         200: 'This is likely due to a CORS restriction policy from the remote origin address.',
         404: 'The requested source URL cannot be found. Please verify the link address provided.',
-        proto: 'Provided source URL must include https:// or http:// before the address (depending on the source content type).'
+        proto:
+          'Provided source URL must include https:// or http:// before the address (depending on the source content type).'
       }
 
       message += errorList[errorCode]
@@ -138,7 +152,10 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({ configUrl, config:
   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)
+    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)
@@ -150,7 +167,10 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({ configUrl, config:
     const convertedInlineMarkup = inlineMarkup.replace(variableRegexPattern, variableTag => {
       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 workingData =
+        workingVariable && workingVariable.conditions.length === 0
+          ? data
+          : filterOutConditions(data, [...workingVariable.conditions])
 
       const variableValues: string[] = _.uniq(workingData?.map(dataObject => dataObject[workingVariable.columnName]))
       const variableDisplay = []
@@ -166,9 +186,17 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({ configUrl, config:
       }
       variableDisplay.push(variableValues.join(', '))
 
-      const displayInfoMessage = '<span class="font-weight-bold display-Info-message">One or more of the following values will appear in the place of this variable placeholder:</span>'
+      let finalDisplay = variableDisplay[0]
+
+      if (workingVariable.addCommas && !isNaN(parseFloat(finalDisplay))) {
+        finalDisplay = parseFloat(finalDisplay)
+        finalDisplay = finalDisplay.toLocaleString('en-US', { useGrouping: true })
+      }
+
+      const displayInfoMessage =
+        '<span class="font-weight-bold display-Info-message">One or more of the following values will appear in the place of this variable placeholder:</span>'
 
-      const newReplacementForVariable = `<span class="cove-tooltip-variable">${variableTag}<span class="cove-tooltip-value">${displayInfoMessage}<br/>${variableDisplay[0]}</span></span><span class="cove-markup-include-variable-value">${variableDisplay[0].trim()}</span>`
+      const newReplacementForVariable = `<span class="cove-tooltip-variable">${variableTag}<span class="cove-tooltip-value">${displayInfoMessage}<br/>${finalDisplay}</span></span><span class="cove-markup-include-variable-value">${finalDisplay}</span>`
 
       return newReplacementForVariable
     })
@@ -203,11 +231,6 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({ configUrl, config:
     }
   }, [config, container])
 
-  //Reload config if config object provided/updated
-  useEffect(() => {
-    loadConfig().catch(err => console.log(err))
-  }, [configObj?.data])
-
   //Reload any functions when config is updated
   useEffect(() => {
     loadConfigMarkupData().catch(err => console.log(err))

package/src/components/EditorPanel.tsx

@@ -187,7 +187,7 @@ const EditorPanel: React.FC = () => {
     </Accordion>
   )
 
-  if (loading) return null
+  if (loading && !config?.showEditorPanel) return null
 
   return (
     <ErrorBoundary component='EditorPanel'>

package/src/components/Variables.tsx

@@ -4,6 +4,8 @@ import { Variable } from '../types/Variable'
 import { Condition } from '../types/Condition'
 import _ from 'lodash'
 import Icon from '@cdc/core/components/ui/Icon'
+import { CheckBox } from '@cdc/core/components/EditorPanel/Inputs'
+import Tooltip from '@cdc/core/components/ui/Tooltip'
 
 type OpenControls = [boolean[], Function] // useState type
 
@@ -29,6 +31,7 @@ const VariableSection: React.FC<VariableSectionProps> = ({ controls, data, delet
   const [selectedColumn, setNewVariableColumnName] = useState(variableConfig.columnName)
   const [conditionsList, setConditionsList] = useState(variableConfig.conditions)
   const [variableName, setVariableName] = useState(variableConfig.name)
+  const [addCommas, setAddCommas] = useState(variableConfig.addCommas)
 
   const conditionLookup: Record<string, string[] | number[]> = useMemo(() => {
     return columnNames.reduce((acc, column) => {
@@ -37,6 +40,10 @@ const VariableSection: React.FC<VariableSectionProps> = ({ controls, data, delet
     }, {})
   }, [columnNames])
 
+  const handleUpdateAddCommas = () => {
+    setAddCommas(!addCommas)
+  }
+
   const handleVariableColumnChange = (columnName: string) => {
     setNewVariableColumnName(columnName)
     setConditionsList([])
@@ -82,7 +89,8 @@ const VariableSection: React.FC<VariableSectionProps> = ({ controls, data, delet
       columnName: selectedColumn,
       conditions: filteredConditionsList,
       name: variableName,
-      tag: `{{${variableName}}}`
+      tag: `{{${variableName}}}`,
+      addCommas
     }
     updateVariableArray(newVariable, variableIndex)
     setShow(variableIndex, false)
@@ -135,6 +143,23 @@ const VariableSection: React.FC<VariableSectionProps> = ({ controls, data, delet
               </select>
             </label>
           </div>
+          <div className='pt-2'>
+            <CheckBox
+              value={addCommas}
+              label='Add Commas to Number'
+              updateField={handleUpdateAddCommas}
+              tooltip={
+                <Tooltip style={{ textTransform: 'none' }}>
+                  <Tooltip.Target>
+                    <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
+                  </Tooltip.Target>
+                  <Tooltip.Content>
+                    <p>{`Selecting this option will add commas to the numeric value.`}</p>
+                  </Tooltip.Content>
+                </Tooltip>
+              }
+            />
+          </div>
           <label className='d-block py-2'>
             <span className='edit-label column-heading'>Conditions:</span>
             {conditionsList.map((condition, index) => {