# @cdc/waffle-chart > React component for displaying a single piece of data in a card module Latest version **4.26.7** (published 2026-07-28) · Apache-2.0 license · 0 weekly downloads ## Install ```sh npm install @cdc/waffle-chart pnpm add @cdc/waffle-chart yarn add @cdc/waffle-chart bun add @cdc/waffle-chart ``` ## Health **Score 60/100 (C)** — status: active. Positive: esm support; no vulnerabilities; recently updated; high maintenance score. Warnings: low downloads; no types. ## Facts | | | |---|---| | Version | 4.26.7 | | Published | 2026-07-28 | | First published | 2022-02-11 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 6 | | Unpacked size | 1.2 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 55 | | Author | rshelnutt | | Maintainers | cooms13, adoe, mpallansch | ## Links - npm: https://www.npmjs.com/package/@cdc/waffle-chart - Repository: https://github.com/CDCgov/cdc-open-viz - Homepage: https://github.com/CDCgov/cdc-open-viz#readme - Issues: https://github.com/CDCgov/cdc-open-viz/issues - npm.io page: https://npm.io/package/@cdc/waffle-chart ## Dependencies (6) - [@cdc/core](https://npm.io/package/@cdc/core.md) ^4.26.7 - [@visx/text](https://npm.io/package/@visx/text.md) ^3.12.0 - [@visx/shape](https://npm.io/package/@visx/shape.md) ^3.12.0 - [html-react-parser](https://npm.io/package/html-react-parser.md) ^5.2.3 - [resize-observer-polyfill](https://npm.io/package/resize-observer-polyfill.md) ^1.5.1 - [react-accessible-accordion](https://npm.io/package/react-accessible-accordion.md) ^5.0.1 ## Recent versions - 4.26.7 (latest) — 2026-07-28 - 4.26.6 — 2026-06-30 - 4.26.5 — 2026-06-04 - 4.26.4 — 2026-04-28 - 4.26.3 — 2026-04-06 - 4.26.2 — 2026-03-02 - 4.26.1 — 2026-01-28 - 4.25.11 — 2025-12-02 - 4.25.10 — 2025-10-28 - 4.25.8 — 2025-08-27 - 4.25.7 — 2025-07-29 - 4.25.6-1 — 2025-07-09 - 4.25.6 — 2025-07-01 - 4.25.5-1 — 2025-06-05 - 4.25.3 — 2025-03-25 - … 33 more at https://npm.io/package/@cdc/waffle-chart/versions ## README # CDC Open Visualization Environment (COVE) > A Yarn workspaces and Lerna monorepo for CDC visualization packages, shared editor/runtime infrastructure, Storybook previews, and partner embed support. --- ## Required Project Organization Information - Organization: Office of Communications (OC) - Contact Email: [imtech@cdc.gov](mailto:imtech@cdc.gov) - Status: Operations and Maintenance (O\&M) - Keywords: analytics, dashboard, visualization, chart - Version: 20260408.133726 ## Other Project Organization Information - Point of Contact: [imtech@cdc.gov](mailto:imtech@cdc.gov) - Related Project(s): N/A - Program Official: [imtech@cdc.gov](mailto:imtech@cdc.gov) --- ## Project Description COVE is a collection of React-based visualization packages used to build charts, maps, dashboards, data callouts, markup includes, and related authoring experiences. The repository also contains shared core utilities, Storybook stories, a local development portal, and an embed package for partner-facing iframe integrations. - **What does it do?** Builds and tests reusable CDC visualization packages such as `@cdc/chart`, `@cdc/map`, `@cdc/dashboard`, `@cdc/editor`, and supporting packages under `packages/`. - **What problem does it solve?** Centralizes shared visualization logic, styling, testing, and package release workflows in one monorepo so CDC visualization components can evolve consistently. - **Who is it for?** Developers maintaining CDC visualization packages, editor experiences, Storybook stories, and embed integrations. --- ## Project Status This project is currently in **Production**. | Environment | Status | |-------------|--------| | Development | Active | | Staging | Active | | Production | Active | --- ## Features - Independent workspace packages for charting, mapping, dashboards, editor tooling, tables, and smaller content modules. - Shared `@cdc/core` package for cross-cutting styles, helpers, hooks, and components. - Storybook 10 and Vite-based local development workflows, including a multi-package dev portal under `dev-portal/`. - Package-level test commands plus repo-level quick test entry points for unit and Storybook coverage. - Partner embed support through `@cdc/embed`. - Documentation for internal architecture and testing patterns in `docs/`. ### Workspace Packages | Package | Description | |---------|-------------| | `@cdc/chart` | React component for visualizing tabular data in various types of charts | | `@cdc/core` | Core components, styles, hooks, and helpers for the CDC Open Visualization project | | `@cdc/dashboard` | React component for combining multiple visualizations into a single dashboard | | `@cdc/data-bite` | React component for displaying a single piece of data in a card module | | `@cdc/data-table` | React standalone data table component | | `@cdc/editor` | React component for generating a new component entry | | `@cdc/embed` | Embeddable COVE visualizations for partner websites | | `@cdc/map` | React component for visualizing tabular data on a map of the United States or the world | | `@cdc/markup-include` | React component for displaying authored HTML content and migrated legacy dynamic text | | `@cdc/waffle-chart` | React component for displaying a single piece of data in a card module | --- ## Prerequisites Before you begin, ensure you have the following installed: - Node.js. This repo does not pin a version in `.nvmrc` or `.node-version`; use a version compatible with the checked-in Vite 7, Storybook 10, and Yarn-based toolchain. - Yarn Classic for the root `yarn ...` workflows documented in this repository. - Git. --- ## Installation 1. Clone the repository. 2. Install workspace dependencies from the repo root: ```bash yarn install ``` 3. Build all packages in dependency order: ```bash yarn build ``` 4. If you need the compiled shared stylesheet, build `@cdc/core` and reference `@cdc/core/dist/cove-main.css`. Bootstrap 4.6 styling is still expected by the packages. Include Bootstrap CSS in the host app when integrating these components. ## Usage Start the shared Storybook instance: ```bash yarn storybook ``` Run the local multi-package dev portal: ```bash yarn dev:portal ``` Run a single package locally: ```bash yarn dev:chart yarn dev:dashboard yarn dev:data-bite yarn dev:data-table yarn dev:editor yarn dev:map yarn dev:markup-include yarn dev:waffle-chart ``` Run React Doctor for a single package or all package entrypoints: ```bash yarn doc:map yarn doc:editor yarn doc ``` Generate the package usage CSV exported by the repo script: ```bash yarn packages:csv ``` --- ## Configuration - Workspace management is defined at the repo root with Yarn workspaces and `lerna.json`. - Package source lives under `packages/`, with each package owning its own `build`, `start`, and `test` scripts. - Storybook configuration is driven from the repo root and package `_stories` directories. - The local development portal uses Vite configs in `dev-portal/`. - Example configs and fixtures are stored in package-level `examples/` and `tests/fixtures/` directories. - The current `.storybook/` directory contains the active repo-level Storybook configuration; older README workflows that referenced additional generator files are no longer documented here because those files are not present in this branch. --- ## Architecture The monorepo follows a tiered dependency model: - `@cdc/core` is the foundation package and should not depend on other internal packages. - Standalone visualization packages depend on `@cdc/core`. - Orchestrator packages such as `@cdc/dashboard` and `@cdc/editor` can depend on the full workspace. See [docs/PACKAGE_DEPENDENCIES.md](./docs/PACKAGE_DEPENDENCIES.md) for the full dependency rules and [docs/](./docs/) for focused implementation guidance such as dashboard filter flow, testing best practices, palette migration, visualization wrappers, and button system conventions. --- ## Testing Use repo-local Yarn scripts instead of global tooling. - Quick unit suite: `yarn test-unit:quick` - Quick Storybook suite: `yarn test-storybook:quick` - Full unit suite: `yarn test-unit` - Full Storybook suite: `yarn test-storybook` - Lint JavaScript and TypeScript sources: `yarn lint` - Lint CSS: `yarn lint:css` For targeted tests, follow the commands documented in [docs/TESTING_BEST_PRACTICES.md](./docs/TESTING_BEST_PRACTICES.md) and the repository-level testing instructions in `AGENTS.md`. --- ## Security ### Reporting a Vulnerability **Do not open a public GitHub issue for security vulnerabilities.** ---
Legal Notices #### License The repository utilizes code licensed under the terms of the Apache Software License and therefore is licensed under ASL v2 or later. This source code in this repository is free: you can redistribute it and/or modify it under the terms of the Apache Software License version 2, or (at your option) any later version. This source code in this repository is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the Apache Software License for more details. The source code forked from other open source projects will inherit its license. #### Attribution Some icons used by this project are from [Font Awesome](https://fontawesome.com/). #### Public Domain This repository constitutes a work of the United States Government and is not subject to domestic copyright protection under 17 USC § 105. This repository is in the public domain within the United States, and copyright and related rights in the work worldwide are waived through the [CC0 1.0 Universal public domain dedication](https://creativecommons.org/publicdomain/zero/1.0/). All contributions to this repository will be released under the CC0 dedication. By submitting a pull request you are agreeing to comply with this waiver of copyright interest. #### Records Management This repository is not a source of government records, but is a copy to increase collaboration and collaborative potential. All government records will be published through the [CDC web site](https://www.cdc.gov/). #### Privacy This repository contains only non-sensitive, publicly available data and information. All material and community participation is covered by the [Disclaimer](https://github.com/CDCgov/template/blob/master/DISCLAIMER.md) and [Code of Conduct](https://github.com/CDCgov/template/blob/master/code-of-conduct.md). For more information about CDC's privacy policy, please visit http://www.cdc.gov/other/privacy.html.
--- _Source: https://npm.io/package/@cdc/waffle-chart · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._