@cdc/waffle-chart 4.23.10 → 4.23.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/waffle-chart",
-  "version": "4.23.10",
+  "version": "4.23.11",
   "description": "React component for displaying a single piece of data in a card module",
   "moduleName": "CdcWaffleChart",
   "main": "dist/cdcwafflechart",
@@ -26,7 +26,7 @@
   "license": "Apache-2.0",
   "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
   "dependencies": {
-    "@cdc/core": "^4.23.10",
+    "@cdc/core": "^4.23.11",
     "@visx/group": "^3.0.0",
     "@visx/scale": "^3.0.0",
     "@visx/shape": "^3.0.0",
@@ -41,5 +41,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "ff5b1ca0c84bb0629bc69e5a26a4a81254dbf69f"
+  "gitHead": "ecad213667a3cb96c921eaddba43a31c84caaa08"
 }

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

@@ -1,10 +1,16 @@
-import React, { useCallback, useEffect, useState } from 'react'
-import parse from 'html-react-parser'
-import { Group } from '@visx/group'
+import React, { useCallback, useEffect, useReducer } from 'react'
+
+// visx
 import { Circle, Bar } from '@visx/shape'
+import { Group } from '@visx/group'
 import { scaleLinear } from '@visx/scale'
 
+// external
+import parse from 'html-react-parser'
 import ResizeObserver from 'resize-observer-polyfill'
+
+// cdc
+import { Config } from './types/Config'
 import getViewport from '@cdc/core/helpers/getViewport'
 import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
 
@@ -14,30 +20,43 @@ import Loading from '@cdc/core/components/Loading'
 import ConfigContext from './ConfigContext'
 import EditorPanel from './components/EditorPanel'
 import defaults from './data/initial-state'
-
 import { publish } from '@cdc/core/helpers/events'
-
-import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
+import chartReducer from './store/chart.reducer'
 import coveUpdateWorker from '@cdc/core/helpers/coveUpdateWorker'
+import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
 
 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'
+import Title from '@cdc/core/components/ui/Title'
+
+type CdcWaffleChartProps = {
+  configUrl?: string
+  config?: Config
+  isDashboard?: boolean
+  isEditor?: boolean
+  link?: string
+  setConfig?: () => void
 }
 
-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 WaffleChart = ({ config, isEditor, link = '' }) => {
+  const { title, theme, shape, nodeWidth, nodeSpacer, prefix, suffix, subtext, content, orientation, filters, dataColumn, dataFunction, dataConditionalColumn, dataConditionalOperator, dataConditionalComparate, customDenom, dataDenom, dataDenomColumn, dataDenomFunction, roundToPlace } = config
+
+  const handleWaffleChartAriaLabel = (state, testing = false): string => {
+    // eslint-disable-next-line no-console
+    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) {
+      // eslint-disable-next-line no-console
+      console.error(e.message)
+    }
+  }
+
+  const gaugeColor = config.visual.colors[config.theme]
+  let dataFontSize = config.fontSize ? { fontSize: config.fontSize + 'px' } : null
 
   const calculateData = useCallback(() => {
     //If either the column or function aren't set, do not calculate
@@ -224,7 +243,7 @@ const WaffleChart = ({ config, isEditor, link }) => {
         shape: shape,
         x: calculatePos(shape, 'x', i, nodeWidthNum, nodeSpacerNum),
         y: calculatePos(shape, 'y', i, nodeWidthNum, nodeSpacerNum),
-        color: themeColor[theme],
+        color: config.visual.colors[theme],
         opacity: i + 1 > 100 - Math.round(dataPercentage) ? 1 : 0.35
       }
       waffleData.push(newNode)
@@ -253,39 +272,17 @@ const WaffleChart = ({ config, isEditor, link }) => {
     return nodeWidth * 10 + nodeSpacer * 9
   }, [nodeWidth, nodeSpacer])
 
-  let dataFontSize = config.fontSize ? { fontSize: config.fontSize + 'px' } : null
-
   const { innerContainerClasses, contentClasses } = useDataVizClasses(config)
 
-  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)
-    }
-  }
-  const gaugeWidth = '100%'
-  const gaugeHeight = 35
-
   const xScale = scaleLinear({
     domain: [0, waffleDenominator],
-    range: [0, gaugeWidth]
+    range: [0, config.gauge.width]
   })
-  const gaugeColor = themeColor[theme]
 
   return (
     <div className={innerContainerClasses.join(' ')}>
       <>
-        {title && (
-          <header className={`cove-component__header chart-title ${config.theme}`} aria-hidden='true'>
-            {parse(title)}
-          </header>
-        )}
+        <Title title={title} config={config} classes={['chart-title', `${config.theme}`, 'mb-0']} />
         <div className={contentClasses.join(' ')}>
           <div className='cove-component__content-wrap'>
             {config.visualizationType === 'Gauge' && (
@@ -297,10 +294,10 @@ const WaffleChart = ({ config, isEditor, link }) => {
                     {suffix ? suffix + ' ' : ' '} {config.valueDescription} {config.showDenominator && waffleDenominator ? waffleDenominator : ' '}
                   </div>
                   <div className='cove-waffle-chart__data--text'>{parse(content)}</div>
-                  <svg height={gaugeHeight} width={'100%'}>
+                  <svg height={config.gauge.height} width={'100%'}>
                     <Group>
-                      <foreignObject style={{ border: '1px solid black' }} x={0} y={0} width={gaugeWidth} height={gaugeHeight} fill='#fff' />
-                      <Bar x={0} y={0} width={xScale(waffleNumerator)} height={gaugeHeight} fill={gaugeColor} />
+                      <foreignObject style={{ border: '1px solid black' }} x={0} y={0} width={config.gauge.width} height={config.gauge.height} fill='#fff' />
+                      <Bar x={0} y={0} width={xScale(waffleNumerator)} height={config.gauge.height} fill={gaugeColor} />
                     </Group>
                   </svg>
                   <div className={'cove-waffle-chart__subtext subtext'}>{parse(subtext)}</div>
@@ -338,14 +335,10 @@ const WaffleChart = ({ config, isEditor, link }) => {
   )
 }
 
-const CdcWaffleChart = ({ configUrl, config: configObj, isDashboard = false, isEditor = false, setConfig: setParentConfig }) => {
+const CdcWaffleChart = ({ configUrl, config: configObj, isDashboard = false, isEditor = false, setConfig: setParentConfig }: CdcWaffleChartProps) => {
   // Default States
-  const [config, setConfig] = useState({ ...defaults })
-  const [loading, setLoading] = useState(true)
-
-  const [currentViewport, setCurrentViewport] = useState('lg')
-  const [coveLoadedHasRan, setCoveLoadedHasRan] = useState(false)
-  const [container, setContainer] = useState()
+  const [state, dispatch] = useReducer(chartReducer, { config: configObj ?? defaults, loading: true, preview: false, viewport: 'lg', coveLoadedHasRan: false, container: null })
+  const { loading, config, viewport: currentViewport, coveLoadedHasRan, container } = state
 
   // Default Functions
   const updateConfig = newConfig => {
@@ -354,12 +347,10 @@ const CdcWaffleChart = ({ configUrl, config: configObj, isDashboard = false, isE
         newConfig[key] = { ...defaults[key], ...newConfig[key] }
       }
     })
-
     newConfig.runtime = {}
     newConfig.runtime.uniqueId = Date.now()
-
     newConfig.runtime.editorErrorMessage = ''
-    setConfig(newConfig)
+    dispatch({ type: 'SET_CONFIG', payload: newConfig })
   }
 
   const loadConfig = useCallback(async () => {
@@ -374,7 +365,7 @@ const CdcWaffleChart = ({ configUrl, config: configObj, isDashboard = false, isE
 
     const processedConfig = { ...(await coveUpdateWorker(response)) }
     updateConfig({ ...defaults, ...processedConfig })
-    setLoading(false)
+    dispatch({ type: 'SET_LOADING', payload: false })
   }, [])
 
   // Custom Functions
@@ -383,8 +374,7 @@ const CdcWaffleChart = ({ configUrl, config: configObj, isDashboard = false, isE
   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)
+      dispatch({ type: 'SET_VIEWPORT', payload: newViewport })
     }
   })
 
@@ -392,23 +382,25 @@ const CdcWaffleChart = ({ configUrl, config: configObj, isDashboard = false, isE
     if (node !== null) {
       resizeObserver.observe(node)
     }
-    setContainer(node)
+    dispatch({ type: 'SET_CONTAINER', payload: node })
   }, [])
 
   //Load initial config
   useEffect(() => {
+    // eslint-disable-next-line no-console
     loadConfig().catch(err => console.log(err))
   }, [])
 
   useEffect(() => {
     if (config && !coveLoadedHasRan && container) {
       publish('cove_loaded', { config: config })
-      setCoveLoadedHasRan(true)
+      dispatch({ type: 'SET_COVE_LOADED_HAS_RAN', payload: true })
     }
   }, [config, container])
 
   //Reload config if config object provided/updated
   useEffect(() => {
+    // eslint-disable-next-line no-console
     loadConfig().catch(err => console.log(err))
   }, [])
 

package/src/_stories/WaffleChart.stories.tsx

@@ -10,10 +10,147 @@ const meta: Meta<typeof WaffleChart> = {
 
 type Story = StoryObj<typeof WaffleChart>
 
-export const Primary: Story = {
+export const Example_Waffle_Chart_Count: Story = {
+  args: {
+    configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Waffle-Chart-Example-Count.json'
+  },
+  render: args => (
+    <>
+      <WaffleChart {...args} />
+    </>
+  )
+}
+
+export const Waffle_Chart_Average_Max: Story = {
+  args: {
+    configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Waffle-Chart-Average-Max.json'
+  },
+  render: args => (
+    <>
+      <WaffleChart {...args} />
+    </>
+  )
+}
+
+export const Waffle_Chart_Demographics: Story = {
+  args: {
+    configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/waffle-chart-demographics.json'
+  },
+  render: args => (
+    <>
+      <WaffleChart {...args} />
+    </>
+  )
+}
+
+export const Linear_Gauge: Story = {
+  args: {
+    configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/linear-gauge-data-from-file.json'
+  },
+  render: args => (
+    <>
+      <WaffleChart {...args} />
+    </>
+  )
+}
+
+export const Linear_Gauge_With_Message: Story = {
+  args: {
+    configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/gauge-progress-indicator.json'
+  },
+  render: args => (
+    <>
+      <WaffleChart {...args} />
+    </>
+  )
+}
+
+export const Person: Story = {
+  args: {
+    config: {
+      type: 'waffle-chart',
+      shape: 'person',
+      title: 'Overdose Mortality Rates',
+      content: 'of overdoses resulted in death.',
+      subtext: 'This data is an example and does not reflect actual averages',
+      orientation: 'horizontal',
+      data: [
+        {
+          'Resulted in Death': 250,
+          'Number of Overdoses': 600,
+          state: 'Alabama',
+          Year: '2010'
+        },
+        {
+          'Resulted in Death': 16,
+          'Number of Overdoses': 80,
+          state: 'Alaska',
+          Year: '2008'
+        },
+        {
+          'Resulted in Death': 19,
+          'Number of Overdoses': 100,
+          state: 'Alaska',
+          Year: '2010'
+        },
+        {
+          'Resulted in Death': 93,
+          'Number of Overdoses': 400,
+          state: 'Alaska',
+          Year: '2012'
+        },
+        {
+          'Resulted in Death': 82,
+          'Number of Overdoses': 400,
+          state: 'Arizona',
+          Year: '2010'
+        }
+      ],
+      filters: [],
+      fontSize: null,
+      overallFontSize: 'medium',
+      dataColumn: 'Resulted in Death',
+      dataFunction: 'Sum',
+      dataConditionalColumn: '',
+      dataConditionalOperator: null,
+      dataConditionalComparate: '',
+      customDenom: true,
+      dataDenom: null,
+      dataDenomColumn: 'Number of Overdoses',
+      dataDenomFunction: 'Sum',
+      prefix: '',
+      suffix: '%',
+      roundToPlace: 0,
+      nodeWidth: 10,
+      nodeSpacer: 2,
+      theme: 'theme-blue',
+      visualizationType: 'Waffle',
+      visualizationSubType: '',
+      invalidComparate: false,
+      showDenominator: false,
+      showPercent: true,
+      valueDescription: 'testing',
+      visual: {
+        border: true,
+        accent: true,
+        background: true,
+        hideBackgroundColor: true,
+        borderColorTheme: true
+      }
+    }
+  },
+  render: args => (
+    <>
+      <WaffleChart {...args} />
+    </>
+  )
+}
+
+export const Gauge: Story = {
   args: {
     config: {
-      shape: 'square',
+      type: 'waffle-chart',
+      shape: 'person',
       title: 'Overdose Mortality Rates',
       content: 'of overdoses resulted in death.',
       subtext: 'This data is an example and does not reflect actual averages',
@@ -67,7 +204,20 @@ export const Primary: Story = {
       roundToPlace: 0,
       nodeWidth: 10,
       nodeSpacer: 2,
-      theme: 'blue'
+      theme: 'theme-blue',
+      visualizationType: 'Gauge',
+      visualizationSubType: '',
+      invalidComparate: false,
+      showDenominator: false,
+      showPercent: true,
+      valueDescription: 'testing',
+      visual: {
+        border: true,
+        accent: true,
+        background: true,
+        hideBackgroundColor: true,
+        borderColorTheme: true
+      }
     }
   },
   render: args => (

package/src/data/initial-state.js

@@ -29,11 +29,28 @@ export default {
   nodeSpacer: '2',
   theme: 'theme-blue',
   type: 'waffle-chart',
+  gauge: {
+    height: 35,
+    width: '100%'
+  },
   visual: {
     border: true,
     accent: false,
     background: false,
     hideBackgroundColor: false,
-    borderColorTheme: false
+    borderColorTheme: false,
+    colors: {
+      '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'
+    }
   }
 }

package/src/scss/waffle-chart.scss

@@ -8,16 +8,6 @@
   }
 }
 
-// .cove .waffle-chart .cove-component__header {
-//   font-size: unset;
-// }
-
-//@each $theme, $color in $theme-colors {
-//  .cdc-waffle-chart.theme-#{$theme} #{&} {
-//    @include set-theme("color", $color);
-//  }
-//}
-
 .warning-icon {
   position: absolute;
   top: 50%;

package/src/store/chart.actions.ts

@@ -0,0 +1,19 @@
+import type { Config } from '../types/Config'
+
+type Action<T, P> = { type: T; payload: P }
+
+type SET_CONFIG = Action<'SET_CONFIG', Config>
+type SET_CONTAINER = Action<'SET_CONTAINER', any>
+type SET_COVE_LOADED_HAS_RAN = Action<'SET_COVE_LOADED_HAS_RAN', boolean>
+type SET_LOADING = Action<'SET_LOADING', boolean>
+type SET_VIEWPORT = Action<'SET_VIEWPORT', string>
+
+// prettier-ignore
+type ChartActions =
+  | SET_CONFIG
+  | SET_CONTAINER
+  | SET_COVE_LOADED_HAS_RAN
+  | SET_LOADING
+  | SET_VIEWPORT
+
+export default ChartActions

package/src/store/chart.reducer.ts

@@ -0,0 +1,32 @@
+import { Config } from '../types/Config'
+import ChartActions from './chart.actions'
+
+export type ChartState = {
+  config?: Config
+  container: any
+  coveLoadedHasRan: boolean
+  loading: boolean
+  preview: boolean
+  viewport: string
+}
+const reducer = (state: ChartState, action: ChartActions): ChartState => {
+  switch (action.type) {
+    case 'SET_CONFIG': {
+      return { ...state, config: action.payload }
+    }
+    case 'SET_LOADING': {
+      return { ...state, loading: action.payload }
+    }
+    case 'SET_VIEWPORT': {
+      return { ...state, viewport: action.payload }
+    }
+    case 'SET_COVE_LOADED_HAS_RAN': {
+      return { ...state, coveLoadedHasRan: action.payload }
+    }
+    case 'SET_CONTAINER': {
+      return { ...state, container: action.payload }
+    }
+  }
+}
+
+export default reducer

package/src/types/Config.ts

@@ -0,0 +1,40 @@
+import { ComponentStyles } from '@cdc/core/types/ComponentStyles'
+import { ComponentThemes } from '@cdc/core/types/ComponentThemes'
+
+export type Config = {
+  // supporting text in the box
+  content: string
+  customDenom: boolean
+  data: Object[]
+  dataColumn: string
+  dataConditionalColumn: string
+  dataConditionalComparate: string
+  dataConditionalOperator: string
+  dataDenom: string
+  dataDenomColumn: string
+  dataDenomFunction: string
+  dataFunction: string
+  dataUrl?: string
+  filters: any[]
+  // data point font size (main number)
+  fontSize: string
+  invalidComparate: false
+  nodeSpacer: number
+  nodeWidth: number
+  orientation: 'horizontal' | 'vertical'
+  overallFontSize: 'small' | 'medium' | 'large'
+  prefix?: string
+  roundToPlace: number
+  shape: 'square' | 'circle' | 'person'
+  showDenominator: boolean
+  showPercent: boolean
+  subtext: string
+  suffix: string
+  theme: ComponentThemes
+  title: string
+  type: 'waffle-chart'
+  valueDescription: string
+  visual: ComponentStyles
+  visualizationSubType: 'linear' | ''
+  visualizationType: 'Gauge' | 'Waffle'
+}