@cdc/data-bite 4.24.10 → 4.24.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/data-bite",
-  "version": "4.24.10",
+  "version": "4.24.11",
   "description": "React component for displaying a single piece of data in a card module",
   "moduleName": "CdcDataBite",
   "main": "dist/cdcdatabite",
@@ -27,7 +27,7 @@
   "license": "Apache-2.0",
   "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
   "dependencies": {
-    "@cdc/core": "^4.24.10",
+    "@cdc/core": "^4.24.11",
     "chroma": "0.0.1",
     "chroma-js": "^2.1.0",
     "html-react-parser": "^3.0.8",
@@ -40,5 +40,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "a4d88d1bc91f596e1b0307d8e25c57ad8c668b75"
+  "gitHead": "9ab5ee9b2b0ef7321a66a2104be6ce8899ec3808"
 }

package/src/CdcDataBite.tsx

@@ -42,7 +42,14 @@ type CdcDataBiteProps = {
 }
 
 const CdcDataBite = (props: CdcDataBiteProps) => {
-  const { configUrl, config: configObj, isDashboard = false, isEditor = false, setConfig: setParentConfig, link } = props
+  const {
+    configUrl,
+    config: configObj,
+    isDashboard = false,
+    isEditor = false,
+    setConfig: setParentConfig,
+    link
+  } = props
 
   const initialState = {
     config: configObj ?? defaults,
@@ -56,7 +63,18 @@ const CdcDataBite = (props: CdcDataBiteProps) => {
 
   const { config, loading, currentViewport, coveLoadedHasRan, container } = state
 
-  const { title, dataColumn, dataFunction, imageData, biteBody, biteFontSize, dataFormat, biteStyle, filters, subtext } = config
+  const {
+    title,
+    dataColumn,
+    dataFunction,
+    imageData,
+    biteBody,
+    biteFontSize,
+    dataFormat,
+    biteStyle,
+    filters,
+    subtext
+  } = config
 
   const { innerContainerClasses, contentClasses } = useDataVizClasses(config)
 
@@ -312,7 +330,14 @@ const CdcDataBite = (props: CdcDataBiteProps) => {
           rangeMin = applyLocaleString(rangeMin)
           rangeMax = applyLocaleString(rangeMax)
         }
-        dataBite = config.dataFormat.prefix + rangeMin + config.dataFormat.suffix + ' - ' + config.dataFormat.prefix + rangeMax + config.dataFormat.suffix
+        dataBite =
+          config.dataFormat.prefix +
+          rangeMin +
+          config.dataFormat.suffix +
+          ' - ' +
+          config.dataFormat.prefix +
+          rangeMax +
+          config.dataFormat.suffix
         break
       default:
         console.warn('Data bite function not recognized: ' + dataFunction)
@@ -421,7 +446,9 @@ const CdcDataBite = (props: CdcDataBiteProps) => {
       })
     }
 
-    return imageSource.length > 0 && 'graphic' !== biteStyle && 'none' !== imageData.display ? <img alt={imageAlt} src={imageSource} className='bite-image callout' /> : null
+    return imageSource.length > 0 && 'graphic' !== biteStyle && 'none' !== imageData.display ? (
+      <img alt={imageAlt} src={imageSource} className='bite-image callout' />
+    ) : null
   }, [imageData])
 
   if (false === loading) {
@@ -495,7 +522,7 @@ const CdcDataBite = (props: CdcDataBiteProps) => {
             <h3>Finish Configuring</h3>
             <p>Set all required options to the left and confirm below to display a preview of the chart.</p>
             <button
-              className='btn'
+              className='btn btn-primary'
               style={{ margin: '1em auto' }}
               disabled={missingRequiredSections()}
               onClick={e => {
@@ -518,10 +545,22 @@ const CdcDataBite = (props: CdcDataBiteProps) => {
           <div className={`cove-component__content`}>
             {!config.newViz && config.runtime && config.runtime.editorErrorMessage && <Error />}
             {(!config.dataColumn || !config.dataFunction) && <Confirm />}
-            <Title config={config} title={title} isDashboard={isDashboard} classes={['bite-header', `${config.theme}`]} />
+            <Title
+              config={config}
+              title={title}
+              isDashboard={isDashboard}
+              classes={['bite-header', `${config.theme}`]}
+            />
             <div className={`bite ${biteClasses.join(' ')}`}>
               <div className={`bite-content-container ${contentClasses.join(' ')}`}>
-                {showBite && 'graphic' === biteStyle && isTop && <CircleCallout theme={config.theme} text={calculateDataBite()} biteFontSize={biteFontSize} dataFormat={dataFormat} />}
+                {showBite && 'graphic' === biteStyle && isTop && (
+                  <CircleCallout
+                    theme={config.theme}
+                    text={calculateDataBite()}
+                    biteFontSize={biteFontSize}
+                    dataFormat={dataFormat}
+                  />
+                )}
                 {isTop && <DataImage />}
                 <div className={`bite-content`}>
                   {showBite && 'title' === biteStyle && (
@@ -554,7 +593,14 @@ const CdcDataBite = (props: CdcDataBiteProps) => {
                   </Fragment>
                 </div>
                 {isBottom && <DataImage />}
-                {showBite && 'graphic' === biteStyle && !isTop && <CircleCallout theme={config.theme} text={calculateDataBite()} biteFontSize={biteFontSize} dataFormat={dataFormat} />}
+                {showBite && 'graphic' === biteStyle && !isTop && (
+                  <CircleCallout
+                    theme={config.theme}
+                    text={calculateDataBite()}
+                    biteFontSize={biteFontSize}
+                    dataFormat={dataFormat}
+                  />
+                )}
               </div>
             </div>
           </div>
@@ -567,12 +613,22 @@ const CdcDataBite = (props: CdcDataBiteProps) => {
   return (
     <Context.Provider value={{ config, updateConfig, loading, data: config.data, setParentConfig, isDashboard }}>
       {biteStyle !== 'gradient' && (
-        <Layout.VisualizationWrapper ref={outerContainerRef} config={config} isEditor={isEditor} showEditorPanel={config?.showEditorPanel}>
+        <Layout.VisualizationWrapper
+          ref={outerContainerRef}
+          config={config}
+          isEditor={isEditor}
+          showEditorPanel={config?.showEditorPanel}
+        >
           {body}
         </Layout.VisualizationWrapper>
       )}
       {'gradient' === biteStyle && (
-        <Layout.VisualizationWrapper ref={outerContainerRef} config={config} isEditor={isEditor} showEditorPanel={config?.showEditorPanel}>
+        <Layout.VisualizationWrapper
+          ref={outerContainerRef}
+          config={config}
+          isEditor={isEditor}
+          showEditorPanel={config?.showEditorPanel}
+        >
           {isEditor && <EditorPanel />}
           <Layout.Responsive isEditor={isEditor}>
             {!config.newViz && config.runtime && config.runtime.editorErrorMessage && <Error />}
@@ -596,7 +652,16 @@ export const DATA_FUNCTION_MIN = 'Min'
 export const DATA_FUNCTION_MODE = 'Mode'
 export const DATA_FUNCTION_RANGE = 'Range'
 export const DATA_FUNCTION_SUM = 'Sum'
-export const DATA_FUNCTIONS = [DATA_FUNCTION_COUNT, DATA_FUNCTION_MAX, DATA_FUNCTION_MEAN, DATA_FUNCTION_MEDIAN, DATA_FUNCTION_MIN, DATA_FUNCTION_MODE, DATA_FUNCTION_RANGE, DATA_FUNCTION_SUM]
+export const DATA_FUNCTIONS = [
+  DATA_FUNCTION_COUNT,
+  DATA_FUNCTION_MAX,
+  DATA_FUNCTION_MEAN,
+  DATA_FUNCTION_MEDIAN,
+  DATA_FUNCTION_MIN,
+  DATA_FUNCTION_MODE,
+  DATA_FUNCTION_RANGE,
+  DATA_FUNCTION_SUM
+]
 
 export const BITE_LOCATION_TITLE = 'title'
 export const BITE_LOCATION_BODY = 'body'
@@ -623,4 +688,11 @@ export const DATA_OPERATOR_GREATEREQUAL = '>='
 export const DATA_OPERATOR_EQUAL = '='
 export const DATA_OPERATOR_NOTEQUAL = '≠'
 
-export const DATA_OPERATORS = [DATA_OPERATOR_LESS, DATA_OPERATOR_GREATER, DATA_OPERATOR_LESSEQUAL, DATA_OPERATOR_GREATEREQUAL, DATA_OPERATOR_EQUAL, DATA_OPERATOR_NOTEQUAL]
+export const DATA_OPERATORS = [
+  DATA_OPERATOR_LESS,
+  DATA_OPERATOR_GREATER,
+  DATA_OPERATOR_LESSEQUAL,
+  DATA_OPERATOR_GREATEREQUAL,
+  DATA_OPERATOR_EQUAL,
+  DATA_OPERATOR_NOTEQUAL
+]