cdcgov / cdc-open-viz

CDC OpenViz is a library of React packages for data visualization.

CDC OpenViz

CDC OpenViz is a collection of React components and related packages centered around data visualization. These components are used to power visualizations across cdc.gov and affiliated projects.

This project is still under heavy initial development with the roadmap extending into late 2022.

Package	Description
@cdc/map	React component for visualizing tabular data on a map of the United States or the world.
@cdc/chart	React component for visualizing data with a chart.
@cdc/editor	React component for importing data and creating a map or chart configuration.
@cdc/dashboard	React component to build and display multiple data visualizations.
@cdc/data-bite	React component for bringing attention to and visualizing a smaller data point.

Setup

This repository is a monorepo that is managed with Lerna and uses yarn for package management. Make sure you have yarn installed before beginning. To work on individual packages you must setup the entire monorepo.

1. Start by cloning this repo and running yarn install at the root.
2. Run lerna bootstrap and Lerna will initialize all the packages for you.
3. (If using Windows) Change the import from 'react-table' to 'react-table/src' in the DataTable component of these pacakges: Map, Chart, Editor, Dashboard (TODO: fix this)
4. Run lerna run build to build all of the packages in the correct order.
5. To begin working on an individual package, run lerna run --scope @cdc/package_name start, replacing package_name with the package's name (ex: @cdc/map).

Development Guidelines

Please read! These are important to know before you begin working on this project.

Each package is designed to be imported as a module by another project.

• This might be different from React projects you are used to working on, that build bundle files that can be included directly on HTML pages.
• We don't include react or react-dom as dependencies in any package, since every project that would import these will have them. These are listed as peerDependencies.
• We avoid adding any CDC specific functionality (ex. metrics calls) or logos in these packages, that should go in our wrapper codebase.

This pattern of packages being imported by another project is implemented internally at CDC. We have a wrapper codebase that imports these packages. The bundle generated from that wrapper is then served on pages.

Tooling/Configuration is shared as much as possible among packages.

These shared elements are stored in the root of this repository. This ensures that if something breaks in our tooling, we only need to fix it in one spot. It also helps ensure consistency across packages. Please do not break this guideline. It is critical to allowing a small team to maintain this project effectively.

• Code Linting configuration (ESLint/Lint Staged)
• Build process (Webpack)

Each package has its own version number.

Sometimes we need to make fixes or add features to a specific package for our day to day work at cdc.gov which lends itself to different version numbers for each package.

Tips for creating a new package.

• When creating a new package, use lowercase for the folder name and don't use any kind of prefix.
• The name of the package in package.json should be scoped with @cdc/. So if you're creating a new package called Foo, the folder path to it would be packages/foo and the package name would be @cdc/foo.
• Lerna has specific commands to add packages - you can't just create the folder inside /packages/. If you're starting from scratch use lerna create and if you're importing a package that's already been created use lerna import.
• New packages should have their version start at 1.0.0 through development until they are first published and follow Semantic Versioning guidelines afterwards.
• Respect the guidelines above and ask someone if you're unsure of something.

---

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.

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. 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.

Privacy

This repository contains only non-sensitive, publicly available data and information. All material and community participation is covered by the Disclaimer and Code of Conduct. For more information about CDC's privacy policy, please visit http://www.cdc.gov/other/privacy.html.

cdc-open-viz's Issues

[WCMSRD-12782] React warns of memory leak when unloading usa cdcmap

We're getting console warnings when our unit tests run that is coming from the cdcmap component when it unloads.

To produce:

const [showMap, setShowMap] = useState(false);
import mapdata from "./mapdata.json";

return (<>
<div>
  <label>Show map
  <input
    type="checkbox"
    checked={showMap}
    onChange={() => setShowMap((prev) => !prev)}
  />
  </label>
</div>

<div>{showMap ? <CdcMap config={mapdata} /> : null}</div>
</>);

• toggle the map on and back off while watching the debugger console.

You can also try it out here:
https://codesandbox.io/s/demo-cdc-map-unmount-leak-rbv0h?file=/src/App.js

Error:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
at LC (/node_modules/@cdc/map/dist/cdcmap.js:1:716965)

forceConsistentCasingInFileNames in tsconfig.json

It looks like there is an option in typescript for forcing consistent casing in file names. I remember when I initially set this project up with other developers, I had to fix an error because a scss import was written as "datatable" instead of "DataTable" in /chart/src/scss/main.scss using @import "datatable" instead of @import "DataTable" . I'm not sure, but I think adding this key into the tsconfig file could help us avoid case sensitivity file errors. Any thoughts?

"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */

[Wrong repo]

[Oops, wrong repo, sorry!]

@cdc/core 4.23.9 doesn't exist

In a clean directory, run npm install @cdc/[email protected]. This results in the following error:

npm ERR! code ETARGET
npm ERR! notarget No matching version found for @cdc/core@^4.23.9.

Running npm info @cdc/core, it looks like 4.23.8 is the latest published version

test branch: generateValuesForFilter function refactor introduced breaking change

@mpallansch wrote this comment:
"Additionally, I'm not sure where the "generateValuesForFilter" function in CdcDashboard.tsx was refactored but it does not appear to be working with the current data structure:

{ dataKey1: [{...}, {...}, ...], dataKey2: [{...}, {...}, ...] }

This will apply to data filters (non URL filters). The function on the integration branch is working, you can look at that to see what might be wrong with the refactor.

You can add showDropdown: true to the filter in this example file default-filter-control.json to see where the filter is not being populated."

Create dev-zfi4 branch request + Minor changes to get to build

I am working on creating some visuals for EDO office at CDC.

Request 1:

• Please create a branch dev-zfi4 or grant user jcbowyer permission to create branch dev-zfi4 and publish

Request 2:

Review notes below.

When doing a pull request and following these steps on Ubuntu, I ran into a couple of issues:

• Start by cloning this repo and running yarn install at the root.
• Run lerna bootstrap and Lerna will initialize all the packages for you.
• Run lerna run build to build all of the packages in the correct order.
• To begin working on an individual package, run lerna run --scope @cdc/package_name start, replacing package_name with the package's name (ex: @cdc/map).

Changes required in package.json in devDependencies

• changed "react": "17.0.1" to "react": "17.0.2"
• changed "react-dom": "17.0.1" to "17.0.2

Changes required in package.json in dependencies

• changed "@cdc/core": "^1.1.2" to "@cdc/core": "^4.23.1"

`npm install` for `"^2.6.1"` fails

Steps:

1. Create a new, clean directory.
2. cd into directory
3. Create a minimal package.json
   (e.g. this can be done with node init or use the package.json below.
4. Add "dependencies": { "@cdc/map": "2.6.1" } to file

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@cdc/map": "^2.6.1"
  }
}

5. Run npm install in this directory.
6. Observe contents of node_module/@cdc/map directory.
   (e.g. ls -lasR ./node_modules/@cdc/map)

Result:
Directory contains only 3 files: LICENSE, README.md and package.json

Notes:

• changing to 2.5 works as expected
  (e.g."dependencies": {"@cdc/map": "2.5.0" })
• My npm --version 6.14.13
• My node --version v14.17.0

CdcDashboard has sideEffects affecting the reducer state

Steps to Reproduce:

1. In the CdcDashboard component. replace the useReducer function with the following lines:
   const [_state, dispatch] = useReducer(dashboardReducer, initialState)
const state = _.cloneDeep(_state)
2. set dashboard example to DEV-6574.json
3. run lerna run start --scope @cdc/dashboard

Expected: the bar chart should be loaded with data with the selected values of Colorado and Adams.
Actual: Colorado and Adams are selected however there is no data in the chart.

Advanced Editor

We currently support the advanced editor on maps and charts packages. We could add this to the other packages as well.