@cdc/waffle-chart 1.0.2 → 4.22.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/waffle-chart",
-  "version": "1.0.2",
+  "version": "4.22.10",
   "description": "React component for displaying a single piece of data in a card module",
   "main": "dist/cdcwafflechart",
   "scripts": {
@@ -20,7 +20,7 @@
   "license": "Apache-2.0",
   "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
   "dependencies": {
-    "@cdc/core": "^1.1.4",
+    "@cdc/core": "^4.22.10",
     "@visx/shape": "^2.1.1",
     "chroma": "0.0.1",
     "chroma-js": "^2.1.0",
@@ -37,5 +37,5 @@
   "resolutions": {
     "@types/react": "17.x"
   },
-  "gitHead": "ff89a7aea74c533413c62ef8859cc011e6b3cbfa"
+  "gitHead": "a7eb551a98c7363d3be58cb81dfc8bbc00522804"
 }

package/src/CdcWaffleChart.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState,FC } from 'react'
 import parse from 'html-react-parser'
 import { Group } from '@visx/group'
 import { Circle, Bar } from '@visx/shape'
@@ -15,6 +15,8 @@ import defaults from './data/initial-state'
 
 import { publish } from '@cdc/core/helpers/events';
 
+import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses';
+
 import './scss/main.scss'
 
 const themeColor = {
@@ -30,8 +32,11 @@ const themeColor = {
   'theme-green': '#4b830d',
   'theme-amber': '#fbab18',
 }
+interface Props{
+  config?:any, isEditor?:any ,link?:any
+}
 
-const WaffleChart = ({ config, isEditor }) => {
+const WaffleChart:FC<Props>  = ({ config, isEditor ,link}) => {
   let {
     title,
     theme,
@@ -281,63 +286,62 @@ const WaffleChart = ({ config, isEditor }) => {
 
   let dataFontSize = config.fontSize ? { fontSize: config.fontSize + 'px' } : null
 
+  const { innerContainerClasses, contentClasses } = useDataVizClasses(config)
 
-  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')
+  const handleWaffleChartAriaLabel = (state, testing = false) => {
+        if(testing) console.log(`handleWaffleChartAriaLabels Testing On:`, state);
+        try {
+            let ariaLabel = 'Waffle chart';
+            if(state.title) {
+                ariaLabel += ` with the title: ${state.title}`
+            }
+            return ariaLabel;
+        } catch(e) {
+            console.error(e.message)
+        }
+  }
 
   return (
     <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>
+      {title &&
+        <header className={`cove-component__header chart-title ${config.theme}`} aria-hidden="true">
+        {parse(title)}
+      </header>
+      }
+      <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()} role="img" aria-label={handleWaffleChartAriaLabel(config)} tabIndex={0}>
+                <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>
-              {(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 className="cove-waffle-chart__data--text">{parse(content)}</div>
+              
+              {subtext &&
+                <div className="cove-waffle-chart__subtext">
+                  {parse(subtext)}
                 </div>
-                }
-                <div className="cove-waffle-chart__data--text" >{parse(content)}</div>
-              </div>
               }
             </div>
-            {subtext &&
-            <div className="cove-waffle-chart__subtext">
-              {parse(subtext)}
-            </div>
             }
           </div>
         </div>
-      </>
-    </div>
+      </div>
+      {link && link}
+    </>
+  </div>
   )
 }
 
@@ -422,13 +426,20 @@ const CdcWaffleChart = (
   //Reload config if config object provided/updated
   useEffect(() => {
     loadConfig().catch((err) => console.log(err))
-  }, [ configObj?.data ])
+  }, [])
+
+  //Reload config if parent passes different config
+  useEffect(() => {
+    if(!configObj.dataUrl){
+      updateConfig({ ...defaults, ...configObj});
+    }
+  }, [configObj.data])
 
   let content = (<Loading/>)
 
   if (loading === false) {
     let classNames = [
-      'cdc-open-viz-module',
+      'cove',
       'type-waffle-chart',
       currentViewport,
       config.theme,
@@ -441,17 +452,19 @@ const CdcWaffleChart = (
 
     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>}
+      <div className={classNames.join(' ')}>
+        {isEditor &&
+          <EditorPanel>
+            {body}
+          </EditorPanel>
+        }
         {!isEditor && body}
       </div>
     )