@cdc/markup-include 4.24.7 → 4.24.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/markup-include",
-  "version": "4.24.7",
+  "version": "4.24.9",
   "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.24.7",
+    "@cdc/core": "^4.24.9",
     "axios": "^1.6.0",
     "chroma": "0.0.1",
     "chroma-js": "^2.1.0",
@@ -39,5 +39,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "7a7372d03778cb977e0e92e3b3bc1a35f8a5bfaf"
+  "gitHead": "c4b0402afe6ed209a85b7078711549b9fd7dae7d"
 }

package/src/CdcMarkupInclude.tsx

@@ -72,7 +72,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 })
@@ -166,9 +166,16 @@ const CdcMarkupInclude: React.FC<CdcMarkupIncludeProps> = ({ configUrl, config:
       }
       variableDisplay.push(variableValues.join(', '))
 
+      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
     })

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) => {