@cdc/chart 4.23.2 → 4.23.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cdcchart.js +42292 -40337
- package/examples/feature/__data__/area-chart.json +56 -0
- package/examples/{planet-example-data.json → feature/__data__/planet-example-data-max-increase.json} +4 -4
- package/examples/feature/__data__/planet-example-data.json +68 -0
- package/examples/feature/area/area-chart.json +244 -0
- package/examples/{example-bar-chart.json → feature/bar/example-bar-chart.json} +4 -1
- package/examples/feature/bar/horizontal-chart-max-increase.json +44 -0
- package/examples/{horizontal-chart.json → feature/bar/horizontal-chart.json} +10 -4
- package/examples/{horizontal-stacked-bar-chart.json → feature/bar/horizontal-stacked-bar-chart.json} +7 -3
- package/examples/{planet-chart-horizontal-example-config.json → feature/bar/planet-chart-horizontal-example-config.json} +8 -3
- package/examples/feature/bar/planet-example-config.json +156 -0
- package/examples/{box-plot.json → feature/boxplot/boxplot.json} +7 -8
- package/examples/feature/boxplot/testing.csv +38 -0
- package/examples/feature/combo/combochart-categories_are_numbers .json +18 -0
- package/examples/{planet-combo-example-config.json → feature/combo/planet-combo-example-config.json} +1 -1
- package/examples/feature/deviation/planet-deviation-config.json +168 -0
- package/examples/feature/deviation/planet-deviation-data.json +38 -0
- package/examples/feature/filters/filter-testing.json +178 -0
- package/examples/feature/forecasting/case_date_example.csv +130 -0
- package/examples/feature/forecasting/effective_reproduction.json +202 -0
- package/examples/feature/forecasting/r_data.csv +130 -0
- package/examples/feature/line/line-chart-max-increase.json +32 -0
- package/examples/feature/line/line-chart.json +124 -0
- package/examples/{paired-bar-example.json → feature/paired-bar/paired-bar-example.json} +10 -4
- package/examples/{planet-pie-example-config.json → feature/pie/planet-pie-example-config.json} +2 -2
- package/examples/{scatterplot-continuous.csv → feature/scatterplot/scatterplot-continuous.csv} +3 -3
- package/examples/{scatterplot.json → feature/scatterplot/scatterplot.json} +3 -3
- package/examples/feature/sparkline/example-sparkline.json +76 -0
- package/examples/feature/tests-big-small/big-small-test-bar.json +328 -0
- package/examples/feature/tests-big-small/big-small-test-line.json +328 -0
- package/examples/feature/tests-big-small/big-small-test-negative.json +328 -0
- package/examples/{case-rate-example-config.json → feature/tests-case-rate/case-rate-example-config.json} +2 -2
- package/examples/{covid-confidence-example-config.json → feature/tests-covid/covid-confidence-example-config.json} +8 -3
- package/examples/{covid-example-config.json → feature/tests-covid/covid-example-config.json} +7 -3
- package/examples/{cutoff-example-config.json → feature/tests-cutoff/cutoff-example-config.json} +7 -3
- package/examples/{date-exclusions-config.json → feature/tests-date-exclusions/date-exclusions-config.json} +2 -2
- package/examples/{example-bar-chart-nonnumeric.json → feature/tests-non-numerics/example-bar-chart-nonnumeric.json} +1 -1
- package/examples/{line-chart-nonnumeric.json → feature/tests-non-numerics/line-chart-nonnumeric.json} +5 -5
- package/examples/{planet-pie-example-config-nonnumeric.json → feature/tests-non-numerics/planet-pie-example-config-nonnumeric.json} +2 -2
- package/examples/{sparkline-chart-nonnumeric.json → feature/tests-non-numerics/sparkline-chart-nonnumeric.json} +2 -2
- package/examples/gallery/bar-chart-horizontal/horizontal-bar-chart.json +31 -172
- package/examples/gallery/bar-chart-vertical/combo-line-chart.json +145 -7
- package/examples/gallery/bar-chart-vertical/vertical-bar-chart-confidence.json +1 -0
- package/examples/gallery/bar-chart-vertical/vertical-bar-chart-with-confidence.json +96 -14
- package/examples/gallery/line/line.json +1 -0
- package/examples/gallery/paired-bar/paired-bar-chart.json +1 -0
- package/index.html +76 -35
- package/package.json +6 -3
- package/src/CdcChart.jsx +245 -106
- package/src/components/AreaChart.jsx +233 -0
- package/src/components/BarChart.jsx +103 -62
- package/src/components/BoxPlot.jsx +39 -18
- package/src/components/DataTable.jsx +26 -21
- package/src/components/DeviationBar.jsx +191 -0
- package/src/components/EditorPanel.jsx +662 -298
- package/src/components/Legend.jsx +59 -46
- package/src/components/LineChart.jsx +12 -36
- package/src/components/LinearChart.jsx +163 -64
- package/src/components/PairedBarChart.jsx +6 -7
- package/src/components/PieChart.jsx +12 -17
- package/src/components/ScatterPlot.jsx +19 -16
- package/src/components/SparkLine.jsx +84 -118
- package/src/components/useIntersectionObserver.jsx +1 -1
- package/src/data/initial-state.js +27 -7
- package/src/hooks/useColorPalette.js +58 -48
- package/src/hooks/useReduceData.js +3 -4
- package/src/index.jsx +3 -2
- package/src/scss/editor-panel.scss +20 -0
- package/src/scss/main.scss +8 -6
- package/src/test/CdcChart.test.jsx +6 -0
- package/examples/box-plot.csv +0 -5
- package/examples/dynamic-legends.json +0 -125
- package/examples/line-chart.json +0 -34
- package/examples/planet-example-config.json +0 -37
- package/examples/temp-example-config.json +0 -64
- package/examples/temp-example-data.json +0 -130
- package/src/components/Filters.jsx +0 -125
- /package/examples/{age-adjusted-rates.json → feature/__data__/age-adjusted-rates.json} +0 -0
- /package/examples/{new-data.csv → feature/__data__/new-data.csv} +0 -0
- /package/examples/{Barchart_with_negative.json → feature/bar/Barchart_with_negative.json} +0 -0
- /package/examples/{stacked-vertical-bar-example-negative.json → feature/bar/stacked-vertical-bar-example-negative.json} +0 -0
- /package/examples/{stacked-vertical-bar-example.json → feature/bar/stacked-vertical-bar-example.json} +0 -0
- /package/examples/{box-plot-data.json → feature/boxplot/box-plot-data.json} +0 -0
- /package/examples/{newdata.json → feature/boxplot/boxplot-data.json} +0 -0
- /package/examples/{paired-bar-data.json → feature/paired-bar/paired-bar-data.json} +0 -0
- /package/examples/{paired-bar-formatted.json → feature/paired-bar/paired-bar-formatted.json} +0 -0
- /package/examples/{case-rate-example-data.json → feature/tests-case-rate/case-rate-example-data.json} +0 -0
- /package/examples/{covid-example-data-confidence.json → feature/tests-covid/covid-example-data-confidence.json} +0 -0
- /package/examples/{covid-example-data.json → feature/tests-covid/covid-example-data.json} +0 -0
- /package/examples/{cutoff-example-data.json → feature/tests-cutoff/cutoff-example-data.json} +0 -0
- /package/examples/{date-exclusions-data.json → feature/tests-date-exclusions/date-exclusions-data.json} +0 -0
- /package/examples/{example-combo-bar-nonnumeric.json → feature/tests-non-numerics/example-combo-bar-nonnumeric.json} +0 -0
- /package/examples/{planet-example-data-nonnumeric.json → feature/tests-non-numerics/planet-example-data-nonnumeric.json} +0 -0
- /package/examples/{stacked-vertical-bar-example-nonnumerics.json → feature/tests-non-numerics/stacked-vertical-bar-example-nonnumerics.json} +0 -0
package/index.html
CHANGED
|
@@ -20,33 +20,78 @@
|
|
|
20
20
|
</head>
|
|
21
21
|
|
|
22
22
|
<body>
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
<!--
|
|
37
|
-
<!-- <div class="react-container" data-config="/examples/
|
|
38
|
-
|
|
39
|
-
<!-- <div class="react-container" data-config="/examples/
|
|
40
|
-
<!-- <div class="react-container" data-config="/examples/
|
|
41
|
-
<!-- <div class="react-container" data-config="/examples/
|
|
42
|
-
<!--
|
|
43
|
-
|
|
44
|
-
<!--
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
<!-- <div class="react-container" data-config="/examples/
|
|
48
|
-
<!-- <div class="react-container" data-config="/examples/
|
|
49
|
-
<!-- <div class="react-container" data-config="/examples/
|
|
23
|
+
|
|
24
|
+
<!--
|
|
25
|
+
EXAMPLES:
|
|
26
|
+
chart/examples/features: different chart types and tests
|
|
27
|
+
chart/examples/private: an ignored git folder used for addl. troubleshooting.
|
|
28
|
+
chart/examples/gallery: examples pulled from the cdc data visualization gallery
|
|
29
|
+
chart/examples/__data__: a folder for storing re-usable fictional datasets
|
|
30
|
+
|
|
31
|
+
GALLERY EXAMPLES ARE FOUND HERE:
|
|
32
|
+
https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/example-data-map-cities-states.html
|
|
33
|
+
|
|
34
|
+
-->
|
|
35
|
+
|
|
36
|
+
<!-- GENERIC CHART TYPES -->
|
|
37
|
+
<!-- <div class="react-container" data-config="/examples/feature/pie/planet-pie-example-config.json"></div> -->
|
|
38
|
+
<div class="react-container" data-config="/examples/feature/line/line-chart.json"></div>
|
|
39
|
+
<!-- <div class="react-container" data-config="/examples/feature/area/area-chart.json"></div> -->
|
|
40
|
+
<!-- <div class="react-container" data-config="/examples/feature/scatterplot/scatterplot.json"></div> -->
|
|
41
|
+
<!-- <div class="react-container" data-config="/examples/feature/deviation/planet-deviation-config.json"></div> -->
|
|
42
|
+
<!-- <div class="react-container" data-config="/examples/feature/boxplot/boxplot.json"></div> -->
|
|
43
|
+
<!-- <div class="react-container" data-config="/examples/feature/combo/planet-combo-example-config.json"></div> -->
|
|
44
|
+
<!-- <div class="react-container" data-config="/examples/feature/paired-bar/paired-bar-example.json"></div> -->
|
|
45
|
+
|
|
46
|
+
<!-- BAR -->
|
|
47
|
+
<!-- <div class="react-container" data-config="/examples/feature/bar/planet-example-config.json"></div> -->
|
|
48
|
+
<!-- <div class="react-container" data-config="/examples/feature/bar/planet-chart-horizontal-example-config.json"></div> -->
|
|
49
|
+
<!-- <div class="react-container" data-config="/examples/feature/bar/example-bar-chart.json"></div> -->
|
|
50
|
+
<!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-chart-max-increase.json"></div> -->
|
|
51
|
+
<!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-chart.json"></div> -->
|
|
52
|
+
<!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-stacked-bar-chart.json"></div> -->
|
|
53
|
+
<!-- <div class="react-container" data-config="/examples/feature/bar/planet-chart-horizontal-example-config.json"></div> -->
|
|
54
|
+
|
|
55
|
+
<!-- SPARKLINE -->
|
|
56
|
+
<!-- <div class="react-container" data-config="/examples/feature/sparkline/example-sparkline.json"></div> -->
|
|
57
|
+
|
|
58
|
+
<!-- TESTS FILTERS -->
|
|
59
|
+
<!-- <div class="react-container" data-config="/examples/feature/filters/filter-testing.json"></div> -->
|
|
60
|
+
<!-- <div class="react-container" data-config="/examples/private/dev-bar.json"></div> -->
|
|
61
|
+
|
|
62
|
+
<!-- TESTS DATE EXCLUSIONS -->
|
|
63
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-date-exclusions/date-exclusions-config.json"></div> -->
|
|
64
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-case-rate/case-rate-example-config.json"></div> -->
|
|
65
|
+
|
|
66
|
+
<!-- TESTS BIG SMALL-->
|
|
67
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-big-small/big-small-test-line.json"></div> -->
|
|
68
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-big-small/big-small-test-bar.json"></div> -->
|
|
69
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-big-small/big-small-test-negative.json"></div> -->
|
|
70
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-big-small/line-chart-max-increase.json"></div> -->
|
|
71
|
+
|
|
72
|
+
<!-- TESTS NONNUMERICS -->
|
|
73
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/planet-pie-example-config-nonnumeric.json"></div> -->
|
|
74
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/example-combo-bar-nonnumeric.json"></div> -->
|
|
75
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/example-bar-chart-nonnumeric.json"></div> -->
|
|
76
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/sparkline-chart-nonnumeric.json"></div> -->
|
|
77
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/stacked-vertical-bar-example-nonnumerics.json"></div> -->
|
|
78
|
+
|
|
79
|
+
<!-- TESTS CUTOFF -->
|
|
80
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-cutoff/cutoff-example-config.json"></div> -->
|
|
81
|
+
|
|
82
|
+
<!-- TESTS COVID -->
|
|
83
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-covid/covid-confidence-example-config.json"></div> -->
|
|
84
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-covid/covid-example-config.json"></div> -->
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
<!--
|
|
88
|
+
GALLERY EXAMPLES BELOW THIS LINE...
|
|
89
|
+
https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/example-data-map-cities-states.html
|
|
90
|
+
|
|
91
|
+
-->
|
|
92
|
+
|
|
93
|
+
<!-- GENERIC CHART TYPES -->
|
|
94
|
+
<!-- <div class="react-container" data-config="/examples/gallery/paired-bar/paired-bar-chart.json"></div> -->
|
|
50
95
|
|
|
51
96
|
<!-- HORIZONTAL BAR CHARTS -->
|
|
52
97
|
<!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-bar-chart-with-numbers-on-bar.json"></div> -->
|
|
@@ -54,16 +99,12 @@
|
|
|
54
99
|
<!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-stacked.json"></div> -->
|
|
55
100
|
|
|
56
101
|
<!-- VERTICAL BAR CHARTS -->
|
|
57
|
-
<!--
|
|
102
|
+
<!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/combo-line-chart.json"></div> -->
|
|
58
103
|
<!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-categorical.json"></div> -->
|
|
59
104
|
<!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json"></div> -->
|
|
60
|
-
<!-- <div class="react-container" data-config="/examples/
|
|
61
|
-
<!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-
|
|
105
|
+
<!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-confidence.json"></div> -->
|
|
106
|
+
<!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-confidence.json"></div> -->
|
|
62
107
|
<!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart.json"></div> -->
|
|
63
|
-
<!-- <div class="react-container" data-config="/examples/box-plot.json"></div> -->
|
|
64
|
-
|
|
65
|
-
<!-- Paired bar Chart -->
|
|
66
|
-
<div class="react-container" data-config="/examples/gallery/paired-bar/paired-bar-chart.json"></div>
|
|
67
108
|
|
|
68
109
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
69
110
|
</body>
|
|
@@ -71,4 +112,4 @@
|
|
|
71
112
|
<script type="module" src="./src/index.jsx"></script>
|
|
72
113
|
</body>
|
|
73
114
|
|
|
74
|
-
</html>
|
|
115
|
+
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cdc/chart",
|
|
3
|
-
"version": "4.23.
|
|
3
|
+
"version": "4.23.4",
|
|
4
4
|
"description": "React component for visualizing tabular data in various types of charts",
|
|
5
5
|
"moduleName": "CdcChart",
|
|
6
6
|
"main": "dist/cdcchart",
|
|
@@ -10,7 +10,9 @@
|
|
|
10
10
|
"build": "vite build",
|
|
11
11
|
"preview": "vite preview",
|
|
12
12
|
"graph": "nx graph",
|
|
13
|
-
"prepublishOnly": "lerna run --scope @cdc/chart build"
|
|
13
|
+
"prepublishOnly": "lerna run --scope @cdc/chart build",
|
|
14
|
+
"test": "vitest watch --reporter verbose",
|
|
15
|
+
"test:ui": "vitest --ui"
|
|
14
16
|
},
|
|
15
17
|
"repository": {
|
|
16
18
|
"type": "git",
|
|
@@ -26,6 +28,7 @@
|
|
|
26
28
|
"@hello-pangea/dnd": "^16.2.0",
|
|
27
29
|
"@visx/axis": "^3.0.0",
|
|
28
30
|
"@visx/curve": "^3.0.0",
|
|
31
|
+
"@visx/event": "^3.0.1",
|
|
29
32
|
"@visx/gradient": "^3.0.0",
|
|
30
33
|
"@visx/group": "^3.0.0",
|
|
31
34
|
"@visx/legend": "^3.0.0",
|
|
@@ -54,7 +57,7 @@
|
|
|
54
57
|
"react": "^18.2.0",
|
|
55
58
|
"react-dom": "^18.2.0"
|
|
56
59
|
},
|
|
57
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "dcd395d76f70b2d113f2b4c6fe50a52522655cd1",
|
|
58
61
|
"devDependencies": {
|
|
59
62
|
"resize-observer-polyfill": "^1.5.1"
|
|
60
63
|
}
|