@cdc/waffle-chart 1.0.2 → 4.22.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/waffle-chart",
-  "version": "1.0.2",
+  "version": "4.22.11",
   "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.11",
     "@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": "9768d1ea0e2383044977d988e33531bcdfe33ea6"
 }

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'
@@ -13,7 +13,9 @@ import ConfigContext from './ConfigContext'
 import EditorPanel from './components/EditorPanel'
 import defaults from './data/initial-state'
 
-import { publish } from '@cdc/core/helpers/events';
+import { publish } from '@cdc/core/helpers/events'
+
+import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
 
 import './scss/main.scss'
 
@@ -28,54 +30,36 @@ const themeColor = {
   'theme-indigo': '#26418f',
   'theme-cyan': '#006778',
   'theme-green': '#4b830d',
-  'theme-amber': '#fbab18',
+  'theme-amber': '#fbab18'
+}
+interface Props {
+  config?: any
+  isEditor?: any
+  link?: any
 }
 
-const WaffleChart = ({ config, isEditor }) => {
-  let {
-    title,
-    theme,
-    shape,
-    nodeWidth,
-    nodeSpacer,
-    prefix,
-    suffix,
-    subtext,
-    content,
-    orientation,
-    filters,
-    dataColumn,
-    dataFunction,
-    dataConditionalColumn,
-    dataConditionalOperator,
-    dataConditionalComparate,
-    customDenom,
-    dataDenom,
-    dataDenomColumn,
-    dataDenomFunction,
-    roundToPlace
-  } = config
+const WaffleChart: FC<Props> = ({ 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(() => {
-
     //If either the column or function aren't set, do not calculate
     if (!dataColumn || !dataFunction) {
       return ''
     }
 
-    const getColumnSum = (arr) => {
+    const getColumnSum = arr => {
       if (Array.isArray(arr) && arr.length > 0) {
         const sum = arr.reduce((sum, x) => sum + x)
         return applyPrecision(sum)
       }
     }
 
-    const getColumnMean = (arr) => {
+    const getColumnMean = arr => {
       const mean = arr.length > 1 ? arr.reduce((a, b) => a + b) / arr.length : arr[0]
       return applyPrecision(mean)
     }
 
-    const getMode = (arr) => {
+    const getMode = arr => {
       let freq = {}
       let max = -Infinity
 
@@ -102,12 +86,12 @@ const WaffleChart = ({ config, isEditor }) => {
 
     const getMedian = arr => {
       const mid = Math.floor(arr.length / 2),
-        nums = [ ...arr ].sort((a, b) => a - b)
+        nums = [...arr].sort((a, b) => a - b)
       const value = arr.length % 2 !== 0 ? nums[mid] : (nums[mid - 1] + nums[mid]) / 2
       return applyPrecision(value)
     }
 
-    const applyPrecision = (value) => {
+    const applyPrecision = value => {
       if ('' !== roundToPlace && !isNaN(roundToPlace) && Number(roundToPlace) > -1) {
         value = Number(value).toFixed(Number(roundToPlace))
       }
@@ -117,7 +101,7 @@ const WaffleChart = ({ config, isEditor }) => {
     //Optionally filter the data based on the user's filter
     let filteredData = config.data
 
-    filters.map((filter) => {
+    filters.map(filter => {
       if (filter.columnName && filter.columnValue) {
         filteredData = filteredData.filter(function (e) {
           return e[filter.columnName] === filter.columnValue
@@ -131,26 +115,26 @@ const WaffleChart = ({ config, isEditor }) => {
 
     if (dataConditionalColumn !== '' && dataConditionalOperator !== '' && dataConditionalComparate !== '') {
       switch (dataConditionalOperator) {
-        case ('<'):
+        case '<':
           conditionalData = filteredData.filter(e => e[dataConditionalColumn] < dataConditionalComparate)
           break
-        case ('>'):
+        case '>':
           conditionalData = filteredData.filter(e => e[dataConditionalColumn] > dataConditionalComparate)
           break
-        case ('<='):
+        case '<=':
           conditionalData = filteredData.filter(e => e[dataConditionalColumn] <= dataConditionalComparate)
           break
-        case ('>='):
+        case '>=':
           conditionalData = filteredData.filter(e => e[dataConditionalColumn] >= dataConditionalComparate)
           break
-        case ('='):
+        case '=':
           if (isNaN(Number(dataConditionalComparate))) {
             conditionalData = filteredData.filter(e => String(e[dataConditionalColumn]) === dataConditionalComparate)
           } else {
             conditionalData = filteredData.filter(e => e[dataConditionalColumn] === dataConditionalComparate)
           }
           break
-        case ('≠'):
+        case '≠':
           if (isNaN(Number(dataConditionalComparate))) {
             conditionalData = filteredData.filter(e => String(e[dataConditionalColumn]) !== dataConditionalComparate)
           } else {
@@ -167,21 +151,25 @@ const WaffleChart = ({ config, isEditor }) => {
     const denomColumnData = filteredData.map(a => a[dataDenomColumn])
 
     //Filter the column's data for numerical values only
-    let numericalData = columnData.filter((value) => {
-      let include = false
-      if (Number(value) || Number.isFinite(Number(value))) {
-        include = true
-      }
-      return include
-    }).map(Number)
-
-    let numericalDenomData = denomColumnData.filter((value) => {
-      let include = false
-      if (Number(value) || Number.isFinite(Number(value))) {
-        include = true
-      }
-      return include
-    }).map(Number)
+    let numericalData = columnData
+      .filter(value => {
+        let include = false
+        if (Number(value) || Number.isFinite(Number(value))) {
+          include = true
+        }
+        return include
+      })
+      .map(Number)
+
+    let numericalDenomData = denomColumnData
+      .filter(value => {
+        let include = false
+        if (Number(value) || Number.isFinite(Number(value))) {
+          include = true
+        }
+        return include
+      })
+      .map(Number)
 
     // Calculate numerator  ------------------
     let waffleNumerator = ''
@@ -208,7 +196,7 @@ const WaffleChart = ({ config, isEditor }) => {
       [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(', '),
+      [DATA_FUNCTION_MODE]: getMode(numericalDenomData).join(', ')
     }
 
     if (customDenom && dataDenomColumn && dataDenomFunction) {
@@ -219,20 +207,7 @@ const WaffleChart = ({ config, isEditor }) => {
 
     // @ts-ignore
     return applyPrecision((waffleNumerator / waffleDenominator) * 100)
-  }, [
-    dataColumn,
-    dataFunction,
-    config.data,
-    filters,
-    dataConditionalColumn,
-    dataConditionalOperator,
-    dataConditionalComparate,
-    customDenom,
-    dataDenomColumn,
-    dataDenomFunction,
-    roundToPlace,
-    dataDenom
-  ])
+  }, [dataColumn, dataFunction, config.data, filters, dataConditionalColumn, dataConditionalOperator, dataConditionalComparate, customDenom, dataDenomColumn, dataDenomFunction, roundToPlace, dataDenom])
 
   const dataPercentage = calculateData()
 
@@ -243,7 +218,7 @@ const WaffleChart = ({ config, isEditor }) => {
 
     const calculatePos = (shape, axis, index, width, spacer) => {
       let mod = axis === 'x' ? index % 10 : axis === 'y' ? Math.floor(index / 10) : null
-      return shape === 'circle' ? (mod * (width + spacer)) + (width / 2) : mod * (width + spacer)
+      return shape === 'circle' ? mod * (width + spacer) + width / 2 : mod * (width + spacer)
     }
 
     for (let i = 0; i < 100; i++) {
@@ -252,115 +227,101 @@ const WaffleChart = ({ config, isEditor }) => {
         x: calculatePos(shape, 'x', i, nodeWidthNum, nodeSpacerNum),
         y: calculatePos(shape, 'y', i, nodeWidthNum, nodeSpacerNum),
         color: themeColor[theme],
-        opacity: i + 1 > (100 - Math.round(dataPercentage)) ? 1 : 0.35
+        opacity: i + 1 > 100 - Math.round(dataPercentage) ? 1 : 0.35
       }
       waffleData.push(newNode)
     }
 
-    return waffleData.map((node, key) => (
-      node.shape === 'square'
-        ? <Bar className="cdc-waffle-chart__node" style={{ transitionDelay: `${0.1 * key}ms` }} x={node.x} y={node.y}
-               width={nodeWidthNum} height={nodeWidthNum} fill={node.color} fillOpacity={node.opacity} key={key}/>
-        : node.shape === 'person' ?
+    return waffleData.map((node, key) =>
+      node.shape === 'square' ? (
+        <Bar className='cdc-waffle-chart__node' style={{ transitionDelay: `${0.1 * key}ms` }} x={node.x} y={node.y} width={nodeWidthNum} height={nodeWidthNum} fill={node.color} fillOpacity={node.opacity} key={key} />
+      ) : node.shape === 'person' ? (
         <path
           style={{ transform: `translateX(${node.x + nodeWidthNum / 4}px) translateY(${node.y}px) scale(${nodeWidthNum / 20})` }}
-          fill={node.color} fillOpacity={node.opacity} key={key}
-          d="M3.75,0a2.5,2.5,0,1,1-2.5,2.5A2.5,2.5,0,0,1,3.75,0M5.625,5.625H5.18125a3.433,3.433,0,0,1-2.8625,0H1.875A1.875,1.875,
+          fill={node.color}
+          fillOpacity={node.opacity}
+          key={key}
+          d='M3.75,0a2.5,2.5,0,1,1-2.5,2.5A2.5,2.5,0,0,1,3.75,0M5.625,5.625H5.18125a3.433,3.433,0,0,1-2.8625,0H1.875A1.875,1.875,
                           0,0,0,0,7.5v5.3125a.9375.9375,0,0,0,.9375.9375h.625v5.3125A.9375.9375,0,0,0,2.5,20H5a.9375.9375,0,0,0,
-                          .9375-.9375V13.75h.625A.9375.9375,0,0,0,7.5,12.8125V7.5A1.875,1.875,0,0,0,5.625,5.625Z">
-        </path>
-        :
-        <Circle className="cdc-waffle-chart__node" style={{ transitionDelay: `${0.1 * key}ms` }} cx={node.x} cy={node.y}
-                r={nodeWidthNum / 2} fill={node.color} fillOpacity={node.opacity} key={key}/>
-    ))
-  }, [ theme, dataPercentage, shape, nodeWidth, nodeSpacer ])
+                          .9375-.9375V13.75h.625A.9375.9375,0,0,0,7.5,12.8125V7.5A1.875,1.875,0,0,0,5.625,5.625Z'
+        ></path>
+      ) : (
+        <Circle className='cdc-waffle-chart__node' style={{ transitionDelay: `${0.1 * key}ms` }} cx={node.x} cy={node.y} r={nodeWidthNum / 2} fill={node.color} fillOpacity={node.opacity} key={key} />
+      )
+    )
+  }, [theme, dataPercentage, shape, nodeWidth, nodeSpacer])
 
   const setRatio = useCallback(() => {
-    return (nodeWidth * 10) + (nodeSpacer * 9)
-  }, [ nodeWidth, nodeSpacer ])
+    return nodeWidth * 10 + nodeSpacer * 9
+  }, [nodeWidth, nodeSpacer])
 
   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}`} >
+        {title && (
+          <header className={`cove-component__header chart-title ${config.theme}`} aria-hidden='true'>
             {parse(title)}
-        </div>
-        }
+          </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()}>
-                  <Group>
-                    {buildWaffle()}
-                  </Group>
+          <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}
+              {(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>
+
+                  {subtext && <div className='cove-waffle-chart__subtext'>{parse(subtext)}</div>}
                 </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>
+        {link && link}
       </>
     </div>
   )
 }
 
-const CdcWaffleChart = (
-  {
-    configUrl,
-    config: configObj,
-    isDashboard = false,
-    isEditor = false,
-    setConfig: setParentConfig
-  }
-) => {
-
+const CdcWaffleChart = ({ configUrl, config: configObj, isDashboard = false, isEditor = false, setConfig: setParentConfig }) => {
   // Default States
-  const [ config, setConfig ] = useState({ ...defaults })
-  const [ loading, setLoading ] = useState(true)
+  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()
+  const [currentViewport, setCurrentViewport] = useState<String>('lg')
+  const [coveLoadedHasRan, setCoveLoadedHasRan] = useState(false)
+  const [container, setContainer] = useState()
 
   // Default Functions
-  const updateConfig = (newConfig) => {
+  const updateConfig = newConfig => {
     Object.keys(defaults).forEach(key => {
       if (newConfig[key] && 'object' === typeof newConfig[key] && !Array.isArray(newConfig[key])) {
         newConfig[key] = { ...defaults[key], ...newConfig[key] }
@@ -375,7 +336,7 @@ const CdcWaffleChart = (
   }
 
   const loadConfig = useCallback(async () => {
-    let response = configObj || await (await fetch(configUrl)).json()
+    let response = configObj || (await (await fetch(configUrl)).json())
     let responseData = response.data ?? {}
 
     if (response.dataUrl) {
@@ -409,31 +370,35 @@ const CdcWaffleChart = (
 
   //Load initial config
   useEffect(() => {
-    loadConfig().catch((err) => console.log(err))
+    loadConfig().catch(err => console.log(err))
   }, [])
 
   useEffect(() => {
     if (config && !coveLoadedHasRan && container) {
-        publish('cove_loaded', { config: config })
-        setCoveLoadedHasRan(true)
+      publish('cove_loaded', { config: config })
+      setCoveLoadedHasRan(true)
     }
-  }, [config, container]);
+  }, [config, container])
 
   //Reload config if config object provided/updated
   useEffect(() => {
-    loadConfig().catch((err) => console.log(err))
-  }, [ configObj?.data ])
+    loadConfig().catch(err => console.log(err))
+  }, [])
+
+  //Reload config if parent passes different config
+  if (configObj) {
+    useEffect(() => {
+      console.log('changing')
+      if (!configObj.dataUrl) {
+        updateConfig({ ...defaults, ...configObj })
+      }
+    }, [configObj.data])
+  }
 
-  let content = (<Loading/>)
+  let content = <Loading />
 
   if (loading === false) {
-    let classNames = [
-      'cdc-open-viz-module',
-      'type-waffle-chart',
-      currentViewport,
-      config.theme,
-      'font-' + config.overallFontSize
-    ]
+    let classNames = ['cove', 'type-waffle-chart', currentViewport, config.theme, 'font-' + config.overallFontSize]
 
     if (isEditor) {
       classNames.push('is-editor')
@@ -441,16 +406,14 @@ const CdcWaffleChart = (
 
     let bodyClasses = ['cove-component', 'waffle-chart']
 
-    
-
     let body = (
       <div className={`${bodyClasses.join(' ')}`} ref={outerContainerRef}>
-        <WaffleChart config={config} isEditor={isEditor}/>
+        <WaffleChart config={config} isEditor={isEditor} />
       </div>
     )
 
     content = (
-      <div className={`cove ${config.theme}`}>
+      <div className={classNames.join(' ')}>
         {isEditor && <EditorPanel>{body}</EditorPanel>}
         {!isEditor && body}
       </div>
@@ -458,11 +421,8 @@ const CdcWaffleChart = (
   }
 
   return (
-    <ErrorBoundary component="WaffleChart">
-      <ConfigContext.Provider
-        value={{ config, updateConfig, loading, data: config.data, setParentConfig, isDashboard, outerContainerRef }}>
-        {content}
-      </ConfigContext.Provider>
+    <ErrorBoundary component='WaffleChart'>
+      <ConfigContext.Provider value={{ config, updateConfig, loading, data: config.data, setParentConfig, isDashboard, outerContainerRef }}>{content}</ConfigContext.Provider>
     </ErrorBoundary>
   )
 }
@@ -477,15 +437,7 @@ export const DATA_FUNCTION_MIN = 'Min'
 export const DATA_FUNCTION_MODE = 'Mode'
 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_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_SUM]
 
 export const DATA_OPERATOR_LESS = '<'
 export const DATA_OPERATOR_GREATER = '>'
@@ -494,11 +446,4 @@ 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]

package/src/ConfigContext.js

@@ -1,5 +1,5 @@
-import { createContext } from 'react';
+import { createContext } from 'react'
 
-const ConfigContext = createContext({});
+const ConfigContext = createContext({})
 
-export default ConfigContext;
+export default ConfigContext