@cdc/waffle-chart 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/waffle-chart",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "React component for displaying a single piece of data in a card module",
   "main": "dist/cdcwafflechart",
   "scripts": {
@@ -19,25 +19,23 @@
   },
   "license": "Apache-2.0",
   "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
-  "devDependencies": {
-    "@cdc/core": "^1.1.2",
-    "bootstrap": "^4.3.1",
-    "html-react-parser": "^0.14.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"
-  },
   "dependencies": {
+    "@cdc/core": "^1.1.3",
     "@visx/shape": "^2.1.1",
     "chroma": "0.0.1",
     "chroma-js": "^2.1.0",
-    "link": "^0.1.5"
+    "html-react-parser": "1.4.9",
+    "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"
-  }
+  },
+  "resolutions": {
+    "@types/react": "17.x"
+  },
+  "gitHead": "ff89a7aea74c533413c62ef8859cc011e6b3cbfa"
 }

package/src/CdcWaffleChart.tsx

@@ -2,15 +2,19 @@ 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 ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import Loading from '@cdc/core/components/Loading'
 
+import ConfigContext from './ConfigContext'
 import EditorPanel from './components/EditorPanel'
 import defaults from './data/initial-state'
-import Context from './context'
+
+import { publish } from '@cdc/core/helpers/events';
+
 import './scss/main.scss'
 
 const themeColor = {
@@ -179,62 +183,36 @@ const WaffleChart = ({ config, isEditor }) => {
       return include
     }).map(Number)
 
+    // Calculate numerator  ------------------
     let waffleNumerator = ''
 
-    switch (dataFunction) {
-      case DATA_FUNCTION_COUNT:
-        waffleNumerator = String(numericalData.length)
-        break
-      case DATA_FUNCTION_SUM:
-        waffleNumerator = String(getColumnSum(numericalData))
-        break
-      case DATA_FUNCTION_MEAN:
-        waffleNumerator = String(getColumnMean(numericalData))
-        break
-      case DATA_FUNCTION_MEDIAN:
-        waffleNumerator = getMedian(numericalData).toString()
-        break
-      case DATA_FUNCTION_MAX:
-        waffleNumerator = Math.max(...numericalData).toString()
-        break
-      case DATA_FUNCTION_MIN:
-        waffleNumerator = Math.min(...numericalData).toString()
-        break
-      case DATA_FUNCTION_MODE:
-        waffleNumerator = getMode(numericalData).join(', ')
-        break
-      default:
-        console.log('Function not recognized: ' + dataFunction)
+    const numerFunctionList = {
+      [DATA_FUNCTION_COUNT]: String(numericalData.length),
+      [DATA_FUNCTION_SUM]: String(getColumnSum(numericalData)),
+      [DATA_FUNCTION_MEAN]: String(getColumnMean(numericalData)),
+      [DATA_FUNCTION_MEDIAN]: getMedian(numericalData).toString(),
+      [DATA_FUNCTION_MAX]: Math.max(...numericalData).toString(),
+      [DATA_FUNCTION_MIN]: Math.min(...numericalData).toString(),
+      [DATA_FUNCTION_MODE]: getMode(numericalData).join(', ')
     }
 
+    waffleNumerator = numerFunctionList[dataFunction]
+
+    // Calculate denominator ------------------
     let waffleDenominator = null
 
+    const denomFunctionList = {
+      [DATA_FUNCTION_COUNT]: String(numericalDenomData.length),
+      [DATA_FUNCTION_SUM]: String(getColumnSum(numericalDenomData)),
+      [DATA_FUNCTION_MEAN]: String(getColumnMean(numericalDenomData)),
+      [DATA_FUNCTION_MEDIAN]: getMedian(numericalDenomData).toString(),
+      [DATA_FUNCTION_MAX]: Math.max(...numericalDenomData).toString(),
+      [DATA_FUNCTION_MIN]: Math.min(...numericalDenomData).toString(),
+      [DATA_FUNCTION_MODE]: getMode(numericalDenomData).join(', '),
+    }
+
     if (customDenom && dataDenomColumn && dataDenomFunction) {
-      switch (dataDenomFunction) {
-        case DATA_FUNCTION_COUNT:
-          waffleDenominator = String(numericalDenomData.length)
-          break
-        case DATA_FUNCTION_SUM:
-          waffleDenominator = String(getColumnSum(numericalDenomData))
-          break
-        case DATA_FUNCTION_MEAN:
-          waffleDenominator = String(getColumnMean(numericalDenomData))
-          break
-        case DATA_FUNCTION_MEDIAN:
-          waffleDenominator = getMedian(numericalDenomData).toString()
-          break
-        case DATA_FUNCTION_MAX:
-          waffleDenominator = Math.max(...numericalDenomData).toString()
-          break
-        case DATA_FUNCTION_MIN:
-          waffleDenominator = Math.min(...numericalDenomData).toString()
-          break
-        case DATA_FUNCTION_MODE:
-          waffleDenominator = getMode(numericalDenomData).join(', ')
-          break
-        default:
-          console.log('Function not recognized: ' + dataFunction)
-      }
+      waffleDenominator = denomFunctionList[dataDenomFunction]
     } else {
       waffleDenominator = dataDenom > 0 ? dataDenom : 100
     }
@@ -301,43 +279,64 @@ const WaffleChart = ({ config, isEditor }) => {
     return (nodeWidth * 10) + (nodeSpacer * 9)
   }, [ nodeWidth, nodeSpacer ])
 
-  let dataFontSize = config.fontSize ? {fontSize: config.fontSize + 'px'} : null
+  let dataFontSize = config.fontSize ? { fontSize: config.fontSize + 'px' } : null
+
+
+  let innerContainerClasses = ['cove-component__inner']
+  config.title && innerContainerClasses.push('component--has-title')
+  config.subtext && innerContainerClasses.push('component--has-subtext')
+  config.biteStyle && innerContainerClasses.push(`bite__style--${config.biteStyle}`)
+  config.general?.isCompactStyle && innerContainerClasses.push(`component--isCompactStyle`)
+
+  let contentClasses = ['cove-component__content'];
+  !config.visual?.border && contentClasses.push('no-borders');
+  config.visual?.borderColorTheme && contentClasses.push('component--has-borderColorTheme');
+  config.visual?.accent && contentClasses.push('component--has-accent');
+  config.visual?.background && contentClasses.push('component--has-background');
+  config.visual?.hideBackgroundColor && contentClasses.push('component--hideBackgroundColor');
+
+  // ! these two will be retired.
+  config.shadow && innerContainerClasses.push('shadow')
+  config?.visual?.roundedBorders && innerContainerClasses.push('bite--has-rounded-borders')
 
   return (
-    <div className={isEditor ? 'spacing-wrapper' : ''}>
-      <section className={`cdc-waffle-chart ${theme}${config.overallFontSize ? ' font-' + config.overallFontSize : ''}`}>
-        <div className="cdc-waffle-chart__container">
-          {title &&
-            <header aria-hidden="true">
-              <div className="cdc-waffle-chart__header">{parse(title)}</div>
-            </header>
-          }
-          <div className={`cdc-waffle-chart__inner-container${orientation === 'vertical' ? ' cdc-waffle-chart--verical' : ''}`}>
-            <div className="cdc-waffle-chart__chart" style={{width: setRatio()}}>
-              <svg width={setRatio()} height={setRatio()}>
-                <Group>
-                  {buildWaffle()}
-                </Group>
-              </svg>
-            </div>
-            { (dataPercentage || content) &&
-              <div className="cdc-waffle-chart__data">
-              {dataPercentage &&
-              <div className="cdc-waffle-chart__data--primary" style={dataFontSize}>
-                {prefix ? prefix : null}{dataPercentage}{suffix ? suffix : null}
+    <div className={innerContainerClasses.join(' ')}>
+      <>
+        {title &&
+        <div className={`cove-component__header chart-title ${config.theme}`} >
+            {parse(title)}
+        </div>
+        }
+        <div className={contentClasses.join(' ')}>
+          <div className="cove-component__content-wrap">
+            <div
+              className={`cove-waffle-chart${orientation === 'vertical' ? ' cove-waffle-chart--verical' : ''}${config.overallFontSize ? ' font-' + config.overallFontSize : ''}`}>
+              <div className="cove-waffle-chart__chart" style={{ width: setRatio() }}>
+                <svg width={setRatio()} height={setRatio()}>
+                  <Group>
+                    {buildWaffle()}
+                  </Group>
+                </svg>
+              </div>
+              {(dataPercentage || content) &&
+              <div className="cove-waffle-chart__data">
+                {dataPercentage &&
+                <div className="cove-waffle-chart__data--primary" style={dataFontSize}>
+                  {prefix ? prefix : null}{dataPercentage}{suffix ? suffix : null}
+                </div>
+                }
+                <div className="cove-waffle-chart__data--text" >{parse(content)}</div>
               </div>
               }
-              <div className="cdc-waffle-chart__data--text">{parse(content)}</div>
             </div>
-            }
-          </div>
-          {subtext &&
-            <div className="cdc-waffle-chart__subtext">
+            {subtext &&
+            <div className="cove-waffle-chart__subtext">
               {parse(subtext)}
             </div>
-          }
+            }
+          </div>
         </div>
-      </section>
+      </>
     </div>
   )
 }
@@ -351,42 +350,32 @@ const CdcWaffleChart = (
     setConfig: setParentConfig
   }
 ) => {
+
+  // Default States
   const [ config, setConfig ] = useState({ ...defaults })
   const [ loading, setLoading ] = useState(true)
 
   const [ currentViewport, setCurrentViewport ] = useState<String>('lg')
+  const [ coveLoadedHasRan, setCoveLoadedHasRan ] = useState(false)
+  const [ container, setContainer ] = useState()
 
-  //Observes changes to outermost container and changes viewport size in state
-  const resizeObserver = new ResizeObserver(entries => {
-    for (let entry of entries) {
-      let newViewport = getViewport(entry.contentRect.width * 2) // Data bite is usually presented as small, so we scale it up for responsive calculations
-
-      setCurrentViewport(newViewport)
-    }
-  })
-
+  // Default Functions
   const updateConfig = (newConfig) => {
-
-    // Deeper copy
     Object.keys(defaults).forEach(key => {
       if (newConfig[key] && 'object' === typeof newConfig[key] && !Array.isArray(newConfig[key])) {
         newConfig[key] = { ...defaults[key], ...newConfig[key] }
       }
     })
 
-    //Enforce default values that need to be calculated at runtime
     newConfig.runtime = {}
     newConfig.runtime.uniqueId = Date.now()
 
-    //Check things that are needed and set error messages if needed
     newConfig.runtime.editorErrorMessage = ''
     setConfig(newConfig)
   }
 
-  const loadConfig = async () => {
+  const loadConfig = useCallback(async () => {
     let response = configObj || await (await fetch(configUrl)).json()
-
-    // If data is included through a URL, fetch that and store
     let responseData = response.data ?? {}
 
     if (response.dataUrl) {
@@ -398,38 +387,44 @@ const CdcWaffleChart = (
 
     updateConfig({ ...defaults, ...response })
     setLoading(false)
-  }
+  }, [])
+
+  // Custom Functions
+
+  // --Observes changes to outermost container and changes viewport size in state
+  const resizeObserver = new ResizeObserver(entries => {
+    for (let entry of entries) {
+      let newViewport = getViewport(entry.contentRect.width * 2) // Data bite is usually presented as small, so we scale it up for responsive calculations
+
+      setCurrentViewport(newViewport)
+    }
+  })
 
-  // Load data when component first mounts
   const outerContainerRef = useCallback(node => {
     if (node !== null) {
       resizeObserver.observe(node)
     }
+    setContainer(node)
   }, [])
 
+  //Load initial config
   useEffect(() => {
-    console.log('Running empty useEFfect')
-    loadConfig()
+    loadConfig().catch((err) => console.log(err))
   }, [])
 
-  if (configObj) {
-    useEffect(() => {
-      console.log('Running last useEFfect')
-      loadConfig()
-    }, [ configObj.data ])
-  }
-
   useEffect(() => {
-    loadConfig()
-  }, [])
+    if (config && !coveLoadedHasRan && container) {
+        publish('cove_loaded', { config: config })
+        setCoveLoadedHasRan(true)
+    }
+  }, [config, container]);
 
-  if (configObj) {
-    useEffect(() => {
-      loadConfig()
-    }, [ configObj.data ])
-  }
+  //Reload config if config object provided/updated
+  useEffect(() => {
+    loadConfig().catch((err) => console.log(err))
+  }, [ configObj?.data ])
 
-  let body = (<Loading/>)
+  let content = (<Loading/>)
 
   if (loading === false) {
     let classNames = [
@@ -440,27 +435,34 @@ const CdcWaffleChart = (
       'font-' + config.overallFontSize
     ]
 
-
     if (isEditor) {
       classNames.push('is-editor')
     }
 
-    body = (
-      <>
-        <div className={classNames.join(' ')} ref={outerContainerRef}>
-          {isEditor && <EditorPanel/>}
-          <WaffleChart config={config} isEditor={isEditor}/>
-        </div>
-      </>
+    let bodyClasses = ['cove-component', 'waffle-chart']
+
+    
+
+    let body = (
+      <div className={`${bodyClasses.join(' ')}`} ref={outerContainerRef}>
+        <WaffleChart config={config} isEditor={isEditor}/>
+      </div>
+    )
+
+    content = (
+      <div className={`cove ${config.theme}`}>
+        {isEditor && <EditorPanel>{body}</EditorPanel>}
+        {!isEditor && body}
+      </div>
     )
   }
 
   return (
     <ErrorBoundary component="WaffleChart">
-      <Context.Provider
+      <ConfigContext.Provider
         value={{ config, updateConfig, loading, data: config.data, setParentConfig, isDashboard, outerContainerRef }}>
-        {body}
-      </Context.Provider>
+        {content}
+      </ConfigContext.Provider>
     </ErrorBoundary>
   )
 }