@cdc/waffle-chart 1.0.0

package/examples/example-data.json

@@ -0,0 +1,90 @@
+[
+  {
+    "Insured Rate": "43",
+    "Coverage Status": "Insured",
+    "state": "Alabama",
+    "Year (Good filter option)": "2010",
+    "link": "",
+    "Verified": true
+  },
+  {
+    "Insured Rate": "0",
+    "Coverage Status": "Uninsured",
+    "state": "Alaska",
+    "Year (Good filter option)": "2006",
+    "link": "",
+    "Verified": false
+  },
+  {
+    "Insured Rate": "72.7",
+    "Coverage Status": "Insured",
+    "state": "Arizona",
+    "Year (Good filter option)": "2008",
+    "link": "#lorem",
+    "Verified": true
+  },
+  {
+    "Insured Rate": "78.7",
+    "Coverage Status": "Insured",
+    "state": "Arkansas",
+    "Year (Good filter option)": "2010",
+    "link": "",
+    "Verified": true
+  },
+  {
+    "Insured Rate": "37.2",
+    "Coverage Status": "Insured",
+    "state": "California",
+    "Year (Good filter option)": "2018",
+    "link": "https://search.cdc.gov/search/?query=California&utf8=%E2%9C%93&affiliate=cdc-main",
+    "Verified": true
+  },
+  {
+    "Insured Rate": "50.6",
+    "Coverage Status": "Insured",
+    "state": "Colorado",
+    "Year (Good filter option)": "2014",
+    "link": "",
+    "Verified": false
+  },
+  {
+    "Insured Rate": "83.2",
+    "Coverage Status": "Insured",
+    "state": "Connecticut",
+    "Year (Good filter option)": "2019",
+    "link": "",
+    "Verified": true
+  },
+  {
+    "Insured Rate": "90",
+    "Coverage Status": "Insured",
+    "state": "Delaware",
+    "Year (Good filter option)": "2020",
+    "link": "",
+    "Verified": true
+  },
+  {
+    "Insured Rate": "77.1",
+    "Coverage Status": "Insured",
+    "state": "District of Columbia",
+    "Year (Good filter option)": "2019",
+    "link": "https://search.cdc.gov/search/index.html?query=Washington+D.C.&sitelimit=&utf8=%E2%9C%93&affiliate=cdc-main",
+    "Verified": false
+  },
+  {
+    "Insured Rate": "83",
+    "Coverage Status": "Insured",
+    "state": "Florida",
+    "Year (Good filter option)": "2016",
+    "link": "",
+    "Verified": true
+  },
+  {
+    "Insured Rate": "67.4",
+    "Coverage Status": "Insured",
+    "state": "Georgia",
+    "Year (Good filter option)": "2013",
+    "link": "",
+    "Verified": false
+  }
+]

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@cdc/waffle-chart",
+  "version": "1.0.0",
+  "description": "React component for displaying a single piece of data in a card module",
+  "main": "dist/cdcwafflechart",
+  "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"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/CDCgov/cdc-open-viz",
+    "directory": "packages/waffle-chart"
+  },
+  "author": "rshelnutt <qyu6@cdc.gov>",
+  "bugs": {
+    "url": "https://github.com/CDCgov/cdc-open-viz/issues"
+  },
+  "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": {
+    "@visx/shape": "^2.1.1",
+    "chroma": "0.0.1",
+    "chroma-js": "^2.1.0",
+    "link": "^0.1.5"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "react-dom": ">=16"
+  }
+}

package/src/CdcWaffleChart.tsx

@@ -0,0 +1,502 @@
+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 EditorPanel from './components/EditorPanel'
+import defaults from './data/initial-state'
+import Context from './context'
+import './scss/main.scss'
+
+const themeColor = {
+  'theme-blue': '#005eaa',
+  'theme-purple': '#712177',
+  'theme-brown': '#705043',
+  'theme-teal': '#00695c',
+  'theme-pink': '#af4448',
+  'theme-orange': '#bb4d00',
+  'theme-slate': '#29434e',
+  'theme-indigo': '#26418f',
+  'theme-cyan': '#006778',
+  'theme-green': '#4b830d',
+  'theme-amber': '#fbab18',
+}
+
+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 calculateData = useCallback(() => {
+
+    //If either the column or function aren't set, do not calculate
+    if (!dataColumn || !dataFunction) {
+      return ''
+    }
+
+    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 mean = arr.length > 1 ? arr.reduce((a, b) => a + b) / arr.length : arr[0]
+      return applyPrecision(mean)
+    }
+
+    const getMode = (arr) => {
+      let freq = {}
+      let max = -Infinity
+
+      for (let i = 0; i < arr.length; i++) {
+        if (freq[arr[i]]) {
+          freq[arr[i]] += 1
+        } else {
+          freq[arr[i]] = 1
+        }
+
+        if (freq[arr[i]] > max) {
+          max = freq[arr[i]]
+        }
+      }
+
+      let res = []
+
+      for (let key in freq) {
+        if (freq[key] === max) res.push(key)
+      }
+
+      return res
+    }
+
+    const getMedian = arr => {
+      const mid = Math.floor(arr.length / 2),
+        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) => {
+      if ('' !== roundToPlace && !isNaN(roundToPlace) && Number(roundToPlace) > -1) {
+        value = Number(value).toFixed(Number(roundToPlace))
+      }
+      return value
+    }
+
+    //Optionally filter the data based on the user's filter
+    let filteredData = config.data
+
+    filters.map((filter) => {
+      if (filter.columnName && filter.columnValue) {
+        filteredData = filteredData.filter(function (e) {
+          return e[filter.columnName] === filter.columnValue
+        })
+      } else {
+        return false
+      }
+    })
+
+    let conditionalData = []
+
+    if (dataConditionalColumn !== '' && dataConditionalOperator !== '' && dataConditionalComparate !== '') {
+      switch (dataConditionalOperator) {
+        case ('<'):
+          conditionalData = filteredData.filter(e => e[dataConditionalColumn] < dataConditionalComparate)
+          break
+        case ('>'):
+          conditionalData = filteredData.filter(e => e[dataConditionalColumn] > dataConditionalComparate)
+          break
+        case ('<='):
+          conditionalData = filteredData.filter(e => e[dataConditionalColumn] <= dataConditionalComparate)
+          break
+        case ('>='):
+          conditionalData = filteredData.filter(e => e[dataConditionalColumn] >= dataConditionalComparate)
+          break
+        case ('='):
+          if (isNaN(Number(dataConditionalComparate))) {
+            conditionalData = filteredData.filter(e => String(e[dataConditionalColumn]) === dataConditionalComparate)
+          } else {
+            conditionalData = filteredData.filter(e => e[dataConditionalColumn] === dataConditionalComparate)
+          }
+          break
+        case ('≠'):
+          if (isNaN(Number(dataConditionalComparate))) {
+            conditionalData = filteredData.filter(e => String(e[dataConditionalColumn]) !== dataConditionalComparate)
+          } else {
+            conditionalData = filteredData.filter(e => e[dataConditionalColumn] !== dataConditionalComparate)
+          }
+          break
+        default:
+          conditionalData = []
+      }
+    }
+
+    //Get the column's data
+    const columnData = conditionalData.length > 0 ? conditionalData.map(a => a[dataColumn]) : filteredData.map(a => a[dataColumn])
+    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 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)
+    }
+
+    let waffleDenominator = null
+
+    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)
+      }
+    } else {
+      waffleDenominator = dataDenom > 0 ? dataDenom : 100
+    }
+
+    // @ts-ignore
+    return applyPrecision((waffleNumerator / waffleDenominator) * 100)
+  }, [
+    dataColumn,
+    dataFunction,
+    config.data,
+    filters,
+    dataConditionalColumn,
+    dataConditionalOperator,
+    dataConditionalComparate,
+    customDenom,
+    dataDenomColumn,
+    dataDenomFunction,
+    roundToPlace,
+    dataDenom
+  ])
+
+  const dataPercentage = calculateData()
+
+  const buildWaffle = useCallback(() => {
+    let waffleData = []
+    let nodeWidthNum = parseInt(nodeWidth, 10)
+    let nodeSpacerNum = parseInt(nodeSpacer, 10)
+
+    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)
+    }
+
+    for (let i = 0; i < 100; i++) {
+      let newNode = {
+        shape: shape,
+        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
+      }
+      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' ?
+        <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,
+                          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 ])
+
+  const setRatio = useCallback(() => {
+    return (nodeWidth * 10) + (nodeSpacer * 9)
+  }, [ nodeWidth, nodeSpacer ])
+
+  let dataFontSize = config.fontSize ? {fontSize: config.fontSize + 'px'} : null
+
+  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>
+              }
+              <div className="cdc-waffle-chart__data--text">{parse(content)}</div>
+            </div>
+            }
+          </div>
+          {subtext &&
+            <div className="cdc-waffle-chart__subtext">
+              {parse(subtext)}
+            </div>
+          }
+        </div>
+      </section>
+    </div>
+  )
+}
+
+const CdcWaffleChart = (
+  {
+    configUrl,
+    config: configObj,
+    isDashboard = false,
+    isEditor = false,
+    setConfig: setParentConfig
+  }
+) => {
+  const [ config, setConfig ] = useState({ ...defaults })
+  const [ loading, setLoading ] = useState(true)
+
+  const [ currentViewport, setCurrentViewport ] = useState<String>('lg')
+
+  //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)
+    }
+  })
+
+  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 () => {
+    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) {
+      const dataString = await fetch(response.dataUrl)
+      responseData = await dataString.json()
+    }
+
+    response.data = responseData
+
+    updateConfig({ ...defaults, ...response })
+    setLoading(false)
+  }
+
+  // Load data when component first mounts
+  const outerContainerRef = useCallback(node => {
+    if (node !== null) {
+      resizeObserver.observe(node)
+    }
+  }, [])
+
+  useEffect(() => {
+    console.log('Running empty useEFfect')
+    loadConfig()
+  }, [])
+
+  if (configObj) {
+    useEffect(() => {
+      console.log('Running last useEFfect')
+      loadConfig()
+    }, [ configObj.data ])
+  }
+
+  useEffect(() => {
+    loadConfig()
+  }, [])
+
+  if (configObj) {
+    useEffect(() => {
+      loadConfig()
+    }, [ configObj.data ])
+  }
+
+  let body = (<Loading/>)
+
+  if (loading === false) {
+    let classNames = [
+      'cdc-open-viz-module',
+      'type-waffle-chart',
+      currentViewport,
+      config.theme,
+      'font-' + config.overallFontSize
+    ]
+
+
+    if (isEditor) {
+      classNames.push('is-editor')
+    }
+
+    body = (
+      <>
+        <div className={classNames.join(' ')} ref={outerContainerRef}>
+          {isEditor && <EditorPanel/>}
+          <WaffleChart config={config} isEditor={isEditor}/>
+        </div>
+      </>
+    )
+  }
+
+  return (
+    <ErrorBoundary component="WaffleChart">
+      <Context.Provider
+        value={{ config, updateConfig, loading, data: config.data, setParentConfig, isDashboard, outerContainerRef }}>
+        {body}
+      </Context.Provider>
+    </ErrorBoundary>
+  )
+}
+
+export default CdcWaffleChart
+
+export const DATA_FUNCTION_MAX = 'Max'
+export const DATA_FUNCTION_COUNT = 'Count'
+export const DATA_FUNCTION_MEAN = 'Mean (Average)'
+export const DATA_FUNCTION_MEDIAN = 'Median'
+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_OPERATOR_LESS = '<'
+export const DATA_OPERATOR_GREATER = '>'
+export const DATA_OPERATOR_LESSEQUAL = '<='
+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
+]