@cdc/data-bite 4.22.11 → 4.23.2

package/{src/index.html → index.html}

@@ -19,6 +19,6 @@
     <!-- <div class="react-container" data-config="/examples/gallery/max-value.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/gallery/sum-of-data.json"></div> -->
 
-    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <script type="module" src="./src/index.jsx"></script>
   </body>
 </html>

package/package.json

@@ -1,11 +1,15 @@
 {
   "name": "@cdc/data-bite",
-  "version": "4.22.11",
+  "version": "4.23.2",
   "description": "React component for displaying a single piece of data in a card module",
+  "moduleName": "CdcDataBite",
   "main": "dist/cdcdatabite",
+  "type": "module",
   "scripts": {
-    "start": "npx webpack serve --mode development -c ../../webpack.config.js",
-    "build": "npx webpack --mode production --env packageName=CdcDataBite --env folderName=data-bite -c ../../webpack.config.js",
+    "start": "vite --open",
+    "build": "vite build",
+    "preview": "vite preview",
+    "graph": "nx graph",
     "prepublishOnly": "lerna run --scope @cdc/data-bite build"
   },
   "repository": {
@@ -20,24 +24,18 @@
   "license": "Apache-2.0",
   "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
   "dependencies": {
-    "@cdc/core": "^4.22.11",
+    "@cdc/core": "^4.23.2",
     "chroma": "0.0.1",
     "chroma-js": "^2.1.0",
-    "html-react-parser": "1.4.9",
+    "html-react-parser": "^3.0.8",
     "papaparse": "^5.3.0",
     "react-accessible-accordion": "^3.3.4",
     "react-beautiful-dnd": "^13.0.0",
-    "react-select": "^3.0.8",
-    "react-tooltip": "4.2.8",
-    "use-debounce": "^6.0.1",
     "whatwg-fetch": "^3.6.2"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": ">=16"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
-  "resolutions": {
-    "@types/react": "17.x"
-  },
-  "gitHead": "9768d1ea0e2383044977d988e33531bcdfe33ea6"
+  "gitHead": "cd4216f47b1c41bfbc1de3b704f70c52cc7293c2"
 }

package/src/{CdcDataBite.tsx → CdcDataBite.jsx}

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback, FC, memo } from 'react'
+import React, { useEffect, useState, useCallback } from 'react'
 import EditorPanel from './components/EditorPanel'
 import defaults from './data/initial-state'
 import Loading from '@cdc/core/components/Loading'
@@ -18,21 +18,11 @@ import { publish } from '@cdc/core/helpers/events'
 import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
 import cacheBustingString from '@cdc/core/helpers/cacheBustingString'
 
-type DefaultsType = typeof defaults
-interface Props {
-  configUrl?: string
-  config?: any
-  isDashboard?: boolean
-  isEditor?: boolean
-  setConfig?: any
-  link?: any
-}
-
-const CdcDataBite: FC<Props> = props => {
+const CdcDataBite = props => {
   const { configUrl, config: configObj, isDashboard = false, isEditor = false, setConfig: setParentConfig, link } = props
 
-  const [config, setConfig] = useState<DefaultsType>({ ...defaults })
-  const [loading, setLoading] = useState<Boolean>(true)
+  const [config, setConfig] = useState({ ...defaults })
+  const [loading, setLoading] = useState(true)
 
   const {
     title,
@@ -52,7 +42,7 @@ const CdcDataBite: FC<Props> = props => {
 
   const transform = new DataTransform()
 
-  const [currentViewport, setCurrentViewport] = useState<String>('lg')
+  const [currentViewport, setCurrentViewport] = useState('lg')
 
   const [coveLoadedHasRan, setCoveLoadedHasRan] = useState(false)
 
@@ -83,6 +73,7 @@ const CdcDataBite: FC<Props> = props => {
     setConfig(newConfig)
   }
 
+  //@ts-ignore
   const loadConfig = async () => {
     let response = configObj || (await (await fetch(configUrl)).json())
 
@@ -110,13 +101,13 @@ const CdcDataBite: FC<Props> = props => {
     setLoading(false)
   }
 
-  const calculateDataBite = (includePrefixSuffix: boolean = true): string | number => {
+  const calculateDataBite = (includePrefixSuffix= true) => {
     //If either the column or function aren't set, do not calculate
     if (!dataColumn || !dataFunction) {
       return ''
     }
 
-    const applyPrecision = (value: number | string): string => {
+    const applyPrecision = (value) => {
       // first validation
       if (value === undefined || value === null) {
         console.error('Enter correct value to "applyPrecision()" function ')
@@ -127,7 +118,7 @@ const CdcDataBite: FC<Props> = props => {
         console.error(' Argunment isNaN, "applyPrecision()" function ')
         return
       }
-      let result: number | string = value
+      let result = value
       let roundToPlace = Number(config.dataFormat.roundToPlace) // default equals to 0
       //  ROUND FIELD  going -1,-2,-3 numbers
       if (roundToPlace < 0) {
@@ -141,7 +132,7 @@ const CdcDataBite: FC<Props> = props => {
     }
 
     // filter null and 0 out from count data
-    const getColumnCount = (arr: (string | number)[]) => {
+    const getColumnCount = (arr) => {
       if (config.dataFormat.ignoreZeros) {
         numericalData = numericalData.filter(item => item && item)
         return numericalData.length
@@ -150,7 +141,7 @@ const CdcDataBite: FC<Props> = props => {
       }
     }
 
-    const getColumnSum = (arr: (string | number)[]) => {
+    const getColumnSum = (arr) => {
       // first validation
       if (arr === undefined || arr === null) {
         console.error('Enter valid value for getColumnSum function ')
@@ -162,17 +153,17 @@ const CdcDataBite: FC<Props> = props => {
         console.error('Arguments are not valid getColumnSum function ')
         return
       }
-      let sum: number = 0
+      let sum = 0
       if (arr.length > 1) {
         /// first convert each element to number then add using reduce method to escape string concatination.
-        sum = arr.map(el => Number(el)).reduce((sum: number, x: number) => sum + x)
+        sum = arr.map(el => Number(el)).reduce((sum, x) => sum + x)
       } else {
         sum = Number(arr[0])
       }
       return applyPrecision(sum)
     }
 
-    const getColumnMean = (arr: (string | number)[]) => {
+    const getColumnMean = (arr) => {
       // add default params to escape errors on runtime
       // first validation
       if (arr === undefined || arr === null || !Array.isArray(arr)) {
@@ -184,7 +175,7 @@ const CdcDataBite: FC<Props> = props => {
         arr = arr.filter(num => num !== 0)
       }
 
-      let mean: number = 0
+      let mean = 0
       if (arr.length > 1) {
         /// first convert each element to number then add using reduce method to escape string concatination.
         mean = arr.map(el => Number(el)).reduce((a, b) => a + b) / arr.length
@@ -194,7 +185,7 @@ const CdcDataBite: FC<Props> = props => {
       return applyPrecision(mean)
     }
 
-    const getMode = (arr: any[] = []): string[] => {
+    const getMode = (arr = []) => {
       // add default params to escape errors on runtime
       // this function accepts any array and returns array of strings
       let freq = {}
@@ -229,7 +220,7 @@ const CdcDataBite: FC<Props> = props => {
       return applyPrecision(value)
     }
 
-    const applyLocaleString = (value: string): string => {
+    const applyLocaleString = (value) => {
       if (value === undefined || value === null) return
       if (Number.isNaN(value) || typeof value === 'number') {
         value = String(value)
@@ -248,7 +239,7 @@ const CdcDataBite: FC<Props> = props => {
       return formattedValue
     }
 
-    let dataBite: string | number = ''
+    let dataBite = ''
 
     //Optionally filter the data based on the user's filter
     let filteredData = config.data
@@ -263,7 +254,7 @@ const CdcDataBite: FC<Props> = props => {
       }
     })
 
-    let numericalData: any[] = []
+    let numericalData = []
     // Get the column's data
     if (filteredData.length) {
       filteredData.forEach(row => {
@@ -297,8 +288,8 @@ const CdcDataBite: FC<Props> = props => {
         dataBite = getMode(numericalData).join('')
         break
       case DATA_FUNCTION_RANGE:
-        let rangeMin: number | string = Math.min(...numericalData)
-        let rangeMax: number | string = Math.max(...numericalData)
+        let rangeMin = Math.min(...numericalData)
+        let rangeMax = Math.max(...numericalData)
         rangeMin = applyPrecision(rangeMin)
         rangeMax = applyPrecision(rangeMax)
         if (config.dataFormat.commas) {

package/src/index.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+
+import CdcDataBite from './CdcDataBite'
+
+let isEditor = window.location.href.includes('editor=true')
+
+let domContainer = document.getElementsByClassName('react-container')[0]
+
+ReactDOM.createRoot(domContainer).render(
+  <React.StrictMode>
+    <CdcDataBite configUrl={domContainer.attributes['data-config']?.value} isEditor={isEditor} />
+  </React.StrictMode>,
+)

package/src/scss/main.scss

@@ -1,6 +1,6 @@
-@import '~@cdc/core/styles/base';
-@import '~@cdc/core/styles/heading-colors';
-@import '~@cdc/core/styles/v2/themes/color-definitions';
+@import '@cdc/core/styles/base';
+@import '@cdc/core/styles/heading-colors';
+@import '@cdc/core/styles/v2/themes/color-definitions';
 @import 'variables';
 
 .cdc-open-viz-module.type-data-bite {

package/vite.config.js

@@ -0,0 +1,4 @@
+import GenerateViteConfig from '../../generateViteConfig.js'
+import { moduleName } from './package.json'
+
+export default GenerateViteConfig(moduleName)