cdcgov / cdc-open-viz Goto Github PK
View Code? Open in Web Editor NEWCDC OpenViz is a library of React packages for data visualization.
License: Apache License 2.0
CDC OpenViz is a library of React packages for data visualization.
License: Apache License 2.0
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>
</>);
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)
Steps:
cd
into directorynode init
or use the package.json below. "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"
}
}
npm install
in this directory.node_module/@cdc/map
directory.ls -lasR ./node_modules/@cdc/map
)Result:
Directory contains only 3 files: LICENSE
, README.md
and package.json
Notes:
"dependencies": {"@cdc/map": "2.5.0" }
)npm --version
6.14.13
node --version
v14.17.0
[Oops, wrong repo, sorry!]
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. */
We currently support the advanced editor on maps and charts packages. We could add this to the other packages as well.
I am working on creating some visuals for EDO office at CDC.
Request 1:
Request 2:
Review notes below.
When doing a pull request and following these steps on Ubuntu, I ran into a couple of issues:
Changes required in package.json in devDependencies
Changes required in package.json in dependencies
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
@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."
Steps to Reproduce:
const [_state, dispatch] = useReducer(dashboardReducer, initialState)
const state = _.cloneDeep(_state)
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.