@cdc/waffle-chart 4.25.10 → 4.25.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/waffle-chart",
-  "version": "4.25.10",
+  "version": "4.25.11",
   "description": "React component for displaying a single piece of data in a card module",
   "moduleName": "CdcWaffleChart",
   "main": "dist/cdcwafflechart",
@@ -27,7 +27,7 @@
   "license": "Apache-2.0",
   "homepage": "https://github.com/CDCgov/cdc-open-viz#readme",
   "dependencies": {
-    "@cdc/core": "^4.25.10",
+    "@cdc/core": "^4.25.11",
     "@visx/shape": "^3.12.0",
     "@visx/text": "^3.12.0",
     "chroma": "0.0.1",
@@ -40,11 +40,10 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@rollup/plugin-dsv": "^3.0.2",
     "@vitejs/plugin-react": "^4.3.4",
     "vite": "^4.4.11",
     "vite-plugin-css-injected-by-js": "^2.4.0",
     "vite-plugin-svgr": "^2.4.0"
   },
-  "gitHead": "c2db758e74ab9b9ca1667a6f9cb41dd0dccf985d"
+  "gitHead": "5f09a137c22f454111ab5f4cd7fdf1d2d58e31bd"
 }

package/src/CdcWaffleChart.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useReducer, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useReducer, useState } from 'react'
 
 // visx
 import { Circle, Bar } from '@visx/shape'
@@ -13,6 +13,7 @@ import ResizeObserver from 'resize-observer-polyfill'
 import { Config } from './types/Config'
 import getViewport from '@cdc/core/helpers/getViewport'
 import fetchRemoteData from '@cdc/core/helpers/fetchRemoteData'
+import { DATA_OPERATORS } from '@cdc/core/helpers/constants'
 
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import Loading from '@cdc/core/components/Loading'
@@ -67,7 +68,7 @@ const WaffleChart = ({ config, isEditor, link = '', showConfigConfirm, updateCon
   const gaugeColor = config.visual.colors[config.theme]
   let dataFontSize = config.fontSize ? { fontSize: config.fontSize + 'px' } : null
 
-  const calculateData = useCallback(() => {
+  const [dataPercentage, waffleDenominator, waffleNumerator] = useMemo(() => {
     //If either the column or function aren't set, do not calculate
     if (!dataColumn || !dataFunction) {
       return ''
@@ -239,22 +240,20 @@ const WaffleChart = ({ config, isEditor, link = '', showConfigConfirm, updateCon
       applyPrecision(waffleNumerator)
     ]
   }, [
-    dataColumn,
-    dataFunction,
     config.data,
     filters,
+    dataColumn,
+    dataFunction,
     dataConditionalColumn,
     dataConditionalOperator,
     dataConditionalComparate,
     customDenom,
+    dataDenom,
     dataDenomColumn,
     dataDenomFunction,
-    roundToPlace,
-    dataDenom
+    roundToPlace
   ])
 
-  const [dataPercentage, waffleDenominator, waffleNumerator] = calculateData()
-
   const buildWaffle = useCallback(() => {
     let waffleData = []
     let nodeWidthNum = parseInt(nodeWidth, 10)
@@ -579,18 +578,5 @@ export const DATA_FUNCTIONS = [
   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
-]
+// Re-export DATA_OPERATORS for backward compatibility
+export { DATA_OPERATORS }

package/src/_stories/WaffleChart.Editor.stories.tsx

@@ -100,8 +100,12 @@ export const GeneralSectionTests: Story = {
     // TEST 3: Show Title Toggle
     // Expectation: Header region appears / disappears (DOM visibility change).
     // ============================================================================
-    const showTitleCheckbox = canvasElement.querySelector('input[name*="showTitle"]') as HTMLInputElement
-    const checkboxWrapper = showTitleCheckbox?.closest('.cove-input__checkbox--small')
+    // Find show title checkbox by label text
+    const showTitleCheckbox = Array.from(canvasElement.querySelectorAll('input[type="checkbox"]')).find(input => {
+      const label = input.closest('label')
+      return label?.textContent?.includes('show title')
+    }) as HTMLInputElement
+    const checkboxWrapper = showTitleCheckbox?.closest('label.checkbox')
     expect(showTitleCheckbox).toBeTruthy()
     expect(checkboxWrapper).toBeTruthy()
 
@@ -110,7 +114,7 @@ export const GeneralSectionTests: Story = {
       'Title Toggle',
       () => showTitleCheckbox.checked,
       async () => {
-        await userEvent.click(checkboxWrapper as HTMLElement)
+        await userEvent.click(showTitleCheckbox)
       },
       (before, after) => after === !wasChecked
     )
@@ -128,7 +132,7 @@ export const GeneralSectionTests: Story = {
       'Title Toggle Reset',
       () => showTitleCheckbox.checked,
       async () => {
-        await userEvent.click(checkboxWrapper as HTMLElement)
+        await userEvent.click(showTitleCheckbox)
       },
       (before, after) => after === wasChecked
     )
@@ -253,7 +257,15 @@ export const DataSectionTests: Story = {
       'Clear Conditional Value',
       getValueText,
       async () => {
+        // Clear the conditional column to fully reset the filter
+        const conditionalColumnSelect = canvasElement.querySelector(
+          'select[name="dataConditionalColumn"]'
+        ) as HTMLSelectElement
+        await userEvent.selectOptions(conditionalColumnSelect, '')
         await userEvent.clear(conditionalValueInput)
+        conditionalValueInput.blur() // Trigger change event
+        // Wait for debounced input processing (TextField uses 500ms debounce)
+        await new Promise(resolve => setTimeout(resolve, 600))
       },
       (before, after) => after !== before
     )
@@ -312,7 +324,7 @@ export const DataSectionTests: Story = {
       'Custom Denominator Toggle',
       getValueText,
       async () => {
-        await userEvent.click(customDenomWrapper)
+        await userEvent.click(customDenomCheckbox)
       },
       (before, after) => after !== before
     )
@@ -404,32 +416,6 @@ export const DataSectionTests: Story = {
       },
       (before, after) => after !== before && after.endsWith('deaths')
     )
-
-    // ============================================================================
-    // TEST 16: Add Filter (state = Alaska)
-    // Expectation: Primary value text changes after filter applied.
-    // ============================================================================
-    const addFilterButton = Array.from(canvasElement.querySelectorAll('button')).find(
-      b => (b as HTMLButtonElement).textContent?.trim() === 'Add Filter'
-    ) as HTMLButtonElement
-    await performAndAssert(
-      'Add Filter',
-      getValueText,
-      async () => {
-        await userEvent.click(addFilterButton)
-
-        await waitForPresence('.filters-list .edit-block:last-of-type', canvasElement)
-
-        const newFilter = canvasElement.querySelector('.filters-list .edit-block:last-of-type') as HTMLElement
-        const [colSelect, valSelect] = Array.from(newFilter.querySelectorAll('select')) as HTMLSelectElement[]
-        await userEvent.selectOptions(colSelect, 'state')
-
-        await waitForOptionsToPopulate(valSelect)
-
-        await userEvent.selectOptions(valSelect, 'Alaska')
-      },
-      (before, after) => after !== before
-    )
   }
 }
 
@@ -618,7 +604,7 @@ export const VisualSectionTests: Story = {
       return node?.getAttribute('fill') || ''
     }
 
-    const themeButtons = Array.from(canvasElement.querySelectorAll('.color-palette li')) as HTMLElement[]
+    const themeButtons = Array.from(canvasElement.querySelectorAll('.color-palette button')) as HTMLElement[]
     expect(themeButtons.length).toBeGreaterThan(1)
     await performAndAssert(
       'Theme Change',
@@ -638,9 +624,13 @@ export const VisualSectionTests: Story = {
     // ============================================================================
     const contentClassSig = () => Array.from(contentContainer().classList).sort().join(' ')
 
-    const borderCheckbox = canvasElement.querySelector('input[name="visual-null-border"]') as HTMLInputElement
+    // Find border checkbox by label text instead of name attribute
+    const borderCheckbox = Array.from(canvasElement.querySelectorAll('input[type="checkbox"]')).find(input => {
+      const label = input.closest('label')
+      return label?.textContent?.includes('Display Border')
+    }) as HTMLInputElement
     expect(borderCheckbox).toBeTruthy()
-    const borderWrapper = borderCheckbox.closest('.cove-input__checkbox--small') as HTMLElement
+    const borderWrapper = borderCheckbox.closest('label.checkbox') as HTMLElement
     expect(borderWrapper).toBeTruthy()
     const borderStyleSig = () => {
       const el = contentContainer()
@@ -656,7 +646,7 @@ export const VisualSectionTests: Story = {
       'Border Toggle',
       borderStyleSig,
       async () => {
-        await userEvent.click(borderWrapper)
+        await userEvent.click(borderCheckbox)
       },
       (before, after) =>
         before.classes !== after.classes ||
@@ -669,17 +659,21 @@ export const VisualSectionTests: Story = {
     // TEST 9: Theme Border Color Toggle
     // Expectation: Class 'component--has-borderColorTheme' toggles.
     // ============================================================================
-    const borderColorThemeCheckbox = canvasElement.querySelector(
-      'input[name="visual-null-borderColorTheme"]'
+    // Find border color theme checkbox by label text
+    const borderColorThemeCheckbox = Array.from(canvasElement.querySelectorAll('input[type="checkbox"]')).find(
+      input => {
+        const label = input.closest('label')
+        return label?.textContent?.includes('Use theme border color')
+      }
     ) as HTMLInputElement
     expect(borderColorThemeCheckbox).toBeTruthy()
-    const borderColorThemeWrapper = borderColorThemeCheckbox.closest('.cove-input__checkbox--small') as HTMLElement
+    const borderColorThemeWrapper = borderColorThemeCheckbox.closest('label.checkbox') as HTMLElement
     expect(borderColorThemeWrapper).toBeTruthy()
     await performAndAssert(
       'Border Color Theme Toggle',
       contentClassSig,
       async () => {
-        await userEvent.click(borderColorThemeWrapper)
+        await userEvent.click(borderColorThemeCheckbox)
       },
       (before, after) => before !== after && (after.includes('borderColorTheme') || before.includes('borderColorTheme'))
     )
@@ -688,15 +682,19 @@ export const VisualSectionTests: Story = {
     // TEST 10: Accent Style Toggle
     // Expectation: Class 'component--has-accent' toggles.
     // ============================================================================
-    const accentCheckbox = canvasElement.querySelector('input[name="visual-null-accent"]') as HTMLInputElement
+    // Find accent checkbox by label text
+    const accentCheckbox = Array.from(canvasElement.querySelectorAll('input[type="checkbox"]')).find(input => {
+      const label = input.closest('label')
+      return label?.textContent?.includes('Use Accent Style')
+    }) as HTMLInputElement
     expect(accentCheckbox).toBeTruthy()
-    const accentWrapper = accentCheckbox.closest('.cove-input__checkbox--small') as HTMLElement
+    const accentWrapper = accentCheckbox.closest('label.checkbox') as HTMLElement
     expect(accentWrapper).toBeTruthy()
     await performAndAssert(
       'Accent Toggle',
       contentClassSig,
       async () => {
-        await userEvent.click(accentWrapper)
+        await userEvent.click(accentCheckbox)
       },
       (before, after) => before !== after
     )
@@ -705,15 +703,19 @@ export const VisualSectionTests: Story = {
     // TEST 11: Theme Background Color Toggle
     // Expectation: Class 'component--has-background' toggles.
     // ============================================================================
-    const backgroundCheckbox = canvasElement.querySelector('input[name="visual-null-background"]') as HTMLInputElement
+    // Find background checkbox by label text
+    const backgroundCheckbox = Array.from(canvasElement.querySelectorAll('input[type="checkbox"]')).find(input => {
+      const label = input.closest('label')
+      return label?.textContent?.includes('Use Theme Background Color')
+    }) as HTMLInputElement
     expect(backgroundCheckbox).toBeTruthy()
-    const backgroundWrapper = backgroundCheckbox.closest('.cove-input__checkbox--small') as HTMLElement
+    const backgroundWrapper = backgroundCheckbox.closest('label.checkbox') as HTMLElement
     expect(backgroundWrapper).toBeTruthy()
     await performAndAssert(
       'Background Toggle',
       contentClassSig,
       async () => {
-        await userEvent.click(backgroundWrapper)
+        await userEvent.click(backgroundCheckbox)
       },
       (before, after) => before !== after
     )
@@ -722,17 +724,19 @@ export const VisualSectionTests: Story = {
     // TEST 12: Hide Background Color Toggle
     // Expectation: Class 'component--hideBackgroundColor' toggles.
     // ============================================================================
-    const hideBackgroundCheckbox = canvasElement.querySelector(
-      'input[name="visual-null-hideBackgroundColor"]'
-    ) as HTMLInputElement
+    // Find hide background checkbox by label text
+    const hideBackgroundCheckbox = Array.from(canvasElement.querySelectorAll('input[type="checkbox"]')).find(input => {
+      const label = input.closest('label')
+      return label?.textContent?.includes('Hide Background Color')
+    }) as HTMLInputElement
     expect(hideBackgroundCheckbox).toBeTruthy()
-    const hideBackgroundWrapper = hideBackgroundCheckbox.closest('.cove-input__checkbox--small') as HTMLElement
+    const hideBackgroundWrapper = hideBackgroundCheckbox.closest('label.checkbox') as HTMLElement
     expect(hideBackgroundWrapper).toBeTruthy()
     await performAndAssert(
       'Hide Background Toggle',
       contentClassSig,
       async () => {
-        await userEvent.click(hideBackgroundWrapper)
+        await userEvent.click(hideBackgroundCheckbox)
       },
       (before, after) => before !== after
     )

package/src/_stories/WaffleChart.stories.tsx

@@ -75,12 +75,29 @@ export const Person: Story = {
       showDenominator: false,
       showPercent: true,
       valueDescription: 'testing',
+      gauge: {
+        height: 35,
+        width: 400
+      },
       visual: {
         border: true,
         accent: true,
         background: true,
         hideBackgroundColor: true,
-        borderColorTheme: true
+        borderColorTheme: true,
+        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'
+        }
       }
     }
   },