@cdc/waffle-chart 4.23.1 → 4.23.3

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

@@ -25,6 +25,6 @@
     <!-- <div class="react-container" data-config="/examples/gallery/avg-to-max.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/gallery/count.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,12 +1,18 @@
 {
   "name": "@cdc/waffle-chart",
-  "version": "4.23.1",
+  "version": "4.23.3",
   "description": "React component for displaying a single piece of data in a card module",
+  "moduleName": "CdcWaffleChart",
   "main": "dist/cdcwafflechart",
+  "type": "module",
   "scripts": {
-    "start": "npx webpack serve --mode development -c ../../webpack.config.js",
-    "build": "npx webpack --mode production --env packageName=CdcWaffleChart --env folderName=waffle-chart -c ../../webpack.config.js",
-    "prepublishOnly": "lerna run --scope @cdc/waffle-chart build"
+    "start": "vite --open",
+    "build": "vite build",
+    "preview": "vite preview",
+    "graph": "nx graph",
+    "prepublishOnly": "lerna run --scope @cdc/waffle-chart build",
+    "test": "vitest watch --reporter verbose",
+    "test:ui": "vitest --ui"
   },
   "repository": {
     "type": "git",
@@ -20,22 +26,17 @@
   "license": "Apache-2.0",
   "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
   "dependencies": {
-    "@cdc/core": "^4.23.1",
-    "@visx/shape": "^2.1.1",
+    "@cdc/core": "^4.23.3",
+    "@visx/shape": "^3.0.0",
     "chroma": "0.0.1",
     "chroma-js": "^2.1.0",
-    "html-react-parser": "1.4.9",
+    "html-react-parser": "^3.0.8",
     "react-accessible-accordion": "^3.3.4",
-    "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": "58163844cc9ce2c379235413b19f49679eab4bef"
+  "gitHead": "6fa3b11db159d38538f18023fe70b67a29e7d327"
 }

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

@@ -1,10 +1,11 @@
-import React, { useCallback, useEffect, useState, FC } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import parse from 'html-react-parser'
 import { Group } from '@visx/group'
 import { Circle, Bar } from '@visx/shape'
 
 import ResizeObserver from 'resize-observer-polyfill'
 import getViewport from '@cdc/core/helpers/getViewport'
+import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import Loading from '@cdc/core/components/Loading'
@@ -32,13 +33,8 @@ const themeColor = {
   'theme-green': '#4b830d',
   'theme-amber': '#fbab18'
 }
-interface Props {
-  config?: any
-  isEditor?: any
-  link?: any
-}
 
-const WaffleChart: FC<Props> = ({ config, isEditor, link }) => {
+const WaffleChart = ({ config, isEditor, link }) => {
   let { title, theme, shape, nodeWidth, nodeSpacer, prefix, suffix, subtext, content, orientation, filters, dataColumn, dataFunction, dataConditionalColumn, dataConditionalOperator, dataConditionalComparate, customDenom, dataDenom, dataDenomColumn, dataDenomFunction, roundToPlace } = config
 
   const calculateData = useCallback(() => {
@@ -316,7 +312,7 @@ const CdcWaffleChart = ({ configUrl, config: configObj, isDashboard = false, isE
   const [config, setConfig] = useState({ ...defaults })
   const [loading, setLoading] = useState(true)
 
-  const [currentViewport, setCurrentViewport] = useState<String>('lg')
+  const [currentViewport, setCurrentViewport] = useState('lg')
   const [coveLoadedHasRan, setCoveLoadedHasRan] = useState(false)
   const [container, setContainer] = useState()
 
@@ -340,8 +336,7 @@ const CdcWaffleChart = ({ configUrl, config: configObj, isDashboard = false, isE
     let responseData = response.data ?? {}
 
     if (response.dataUrl) {
-      const dataString = await fetch(response.dataUrl)
-      responseData = await dataString.json()
+      responseData = await fetchRemoteData(response.dataUrl)
     }
 
     response.data = responseData
@@ -387,8 +382,8 @@ const CdcWaffleChart = ({ configUrl, config: configObj, isDashboard = false, isE
 
   //Reload config if parent passes different config
   if (configObj) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
-      console.log('changing')
       if (!configObj.dataUrl) {
         updateConfig({ ...defaults, ...configObj })
       }

package/src/index.jsx

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

package/src/scss/main.scss

@@ -1,4 +1,4 @@
-@import '~@cdc/core/styles/v2/main';
+@import '@cdc/core/styles/v2/main';
 @import 'waffle-chart';
 
 .cdc-open-viz-module.type-waffle-chart {

package/src/test/CdcWaffleChart.test.jsx

@@ -0,0 +1,6 @@
+// Placeholder test until we add them in.
+describe('Waffle Chart', () => {
+  it('has a test.', async () => {
+    return true
+  })
+})

package/vite.config.js

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

package/src/index.js

@@ -1,16 +0,0 @@
-import React from 'react'
-import { render } from 'react-dom'
-import CdcWaffleChart from './CdcWaffleChart'
-
-const domContainers = document.querySelectorAll('.react-container')
-
-let isEditor = window.location.href.includes('editor=true')
-
-domContainers.forEach(domContainer => {
-  render(
-    <React.StrictMode>
-      <CdcWaffleChart configUrl={domContainer.attributes['data-config'].value} isEditor={isEditor} />
-    </React.StrictMode>,
-    domContainer
-  )
-})