@cdc/chart 4.24.2 → 4.24.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 +47933 -36918
- package/examples/chart-regression-1.json +378 -0
- package/examples/chart-regression-2.json +2360 -0
- package/examples/feature/filters/url-filter.json +1076 -0
- package/examples/feature/line/line-chart.json +362 -37
- package/examples/feature/regions/index.json +50 -4
- package/examples/feature/sankey/sankey-example-data.json +1364 -0
- package/examples/feature/sankey/sankey_chart_data.csv +20 -0
- package/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json +306 -19
- package/examples/region-issue.json +2065 -0
- package/examples/sparkline.json +868 -0
- package/examples/test.json +5409 -0
- package/index.html +130 -123
- package/package.json +4 -2
- package/src/CdcChart.tsx +178 -94
- package/src/_stories/ChartEditor.stories.tsx +14 -3
- package/src/_stories/_mock/url_filter.json +1076 -0
- package/src/components/AreaChart/components/AreaChart.Stacked.jsx +2 -1
- package/src/components/AreaChart/components/AreaChart.jsx +2 -1
- package/src/components/BarChart/components/BarChart.Horizontal.tsx +46 -63
- package/src/components/BarChart/components/BarChart.StackedHorizontal.tsx +36 -56
- package/src/components/BarChart/components/BarChart.StackedVertical.tsx +32 -39
- package/src/components/BarChart/components/BarChart.Vertical.tsx +44 -59
- package/src/components/BoxPlot/BoxPlot.jsx +2 -1
- package/src/components/DeviationBar.jsx +3 -3
- package/src/components/EditorPanel/EditorPanel.tsx +1684 -1564
- package/src/components/EditorPanel/components/Panels/Panel.Regions.tsx +1 -1
- package/src/components/EditorPanel/components/Panels/Panel.Sankey.tsx +107 -0
- package/src/components/EditorPanel/components/Panels/Panel.Series.tsx +48 -4
- package/src/components/EditorPanel/components/Panels/Panel.Visual.tsx +41 -0
- package/src/components/EditorPanel/components/Panels/index.tsx +9 -7
- package/src/components/EditorPanel/components/panels.scss +11 -0
- package/src/components/EditorPanel/editor-panel.scss +0 -724
- package/src/components/EditorPanel/useEditorPermissions.js +40 -14
- package/src/components/Legend/Legend.Component.tsx +43 -63
- package/src/components/Legend/Legend.tsx +8 -4
- package/src/components/LineChart/LineChartProps.ts +1 -0
- package/src/components/LineChart/helpers.ts +2 -2
- package/src/components/LineChart/index.tsx +7 -7
- package/src/components/LinearChart.jsx +11 -31
- package/src/components/PairedBarChart.jsx +6 -10
- package/src/components/PieChart/PieChart.tsx +3 -3
- package/src/components/Regions/components/Regions.tsx +120 -78
- package/src/components/Sankey/index.tsx +434 -0
- package/src/components/Sankey/sankey.scss +153 -0
- package/src/components/Sankey/types/index.ts +16 -0
- package/src/components/ScatterPlot/ScatterPlot.jsx +1 -0
- package/src/components/Sparkline/{SparkLine.jsx → components/SparkLine.tsx} +14 -30
- package/src/components/Sparkline/index.scss +3 -0
- package/src/components/Sparkline/index.tsx +1 -1
- package/src/components/ZoomBrush.tsx +2 -1
- package/src/data/initial-state.js +46 -2
- package/src/helpers/computeMarginBottom.ts +2 -1
- package/src/helpers/tests/computeMarginBottom.test.ts +2 -1
- package/src/hooks/useBarChart.js +5 -2
- package/src/hooks/useScales.ts +47 -18
- package/src/hooks/useTooltip.tsx +9 -8
- package/src/scss/main.scss +33 -29
- package/src/types/ChartConfig.ts +32 -14
- package/src/types/ChartContext.ts +7 -0
package/index.html
CHANGED
|
@@ -1,27 +1,37 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
</head>
|
|
23
|
-
|
|
24
|
-
<body>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
|
6
|
+
<style>
|
|
7
|
+
body {
|
|
8
|
+
margin: 0;
|
|
9
|
+
border-top: none !important;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.cdc-map-outer-container {
|
|
13
|
+
min-height: 100vh;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
/* .react-container + .react-container {
|
|
17
|
+
margin-top: 3rem;
|
|
18
|
+
} */
|
|
19
|
+
</style>
|
|
20
|
+
<link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/contrib/libs/bootstrap/latest/css/bootstrap.min.css?_=39423" />
|
|
21
|
+
<link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/4.0/assets/css/app.min.css?_=39423" />
|
|
22
|
+
</head>
|
|
23
|
+
|
|
24
|
+
<body>
|
|
25
|
+
<!-- SANKEY EXAMPLE -->
|
|
26
|
+
<!-- <div class="container d-flex flex-wrap body-wrapper bg-white">
|
|
27
|
+
<main class="col-lg-9 order-lg-2" role="main" aria-label="Main Content Area">
|
|
28
|
+
<div class="row">
|
|
29
|
+
<div class="col-md-12"> -->
|
|
30
|
+
<!-- <div class="react-container" data-config="/examples/feature/sankey/sankey-example-data.json"></div> -->
|
|
31
|
+
<!-- </div>
|
|
32
|
+
</div>
|
|
33
|
+
</main>
|
|
34
|
+
</div> -->
|
|
25
35
|
|
|
26
36
|
<!--
|
|
27
37
|
EXAMPLES:
|
|
@@ -35,87 +45,87 @@
|
|
|
35
45
|
|
|
36
46
|
-->
|
|
37
47
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
48
|
+
<!-- GENERIC CHART TYPES -->
|
|
49
|
+
<div class="react-container" data-config="/examples/test.json"></div>
|
|
50
|
+
<!-- <div class="react-container" data-config="/examples/private/rvr.json"></div> -->
|
|
51
|
+
<!-- <div class="react-container" data-config="/examples/feature/filters/url-filter.json"></div> -->
|
|
52
|
+
<!-- <div class="react-container" data-config="/examples/feature/bar/additional-column-tooltip.json"></div> -->
|
|
53
|
+
<!-- <div class="react-container" data-config="https://cdc.gov/poxvirus/mpox/modules/data-viz/mpx-trends_1.json"></div> -->
|
|
54
|
+
<!-- <div class="react-container" data-config="/examples/feature/area/area-chart-date-city-temperature.json"></div> -->
|
|
55
|
+
<!-- <div class="react-container" data-config="/examples/feature/area/area-chart-date-apple.json"></div> -->
|
|
56
|
+
<!-- <div class="react-container" data-config="/examples/feature/forest-plot/linear.json"></div> -->
|
|
57
|
+
<!-- <div class="react-container" data-config="/examples/feature/forest-plot/logarithmic.json"></div> -->
|
|
58
|
+
<!-- <div class="react-container" data-config="/examples/feature/forest-plot/forest-plot.json"></div> -->
|
|
59
|
+
<!-- <div class="react-container" data-config="/examples/feature/pie/planet-pie-example-config.json"></div> -->
|
|
60
|
+
<!-- <div class="react-container" data-config=https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Line_Chart_Viz.json></div> -->
|
|
61
|
+
<div class="react-container" data-config=/examples/feature/regions/index.json></div>
|
|
62
|
+
<!-- <div class="react-container" data-config=https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Line_Chart_Regions_Viz.json></div> -->
|
|
63
|
+
<!-- <div class="react-container" data-config=https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Line_Chart_Regions_Viz.json></div> -->
|
|
64
|
+
<!-- <div class="react-container" data-config="/examples/feature/forecasting/forecasting.json"></div> -->
|
|
65
|
+
<!-- <div class="react-container" data-config="/examples/feature/forecasting/combo-forecasting.json"></div> -->
|
|
66
|
+
<!-- <div class="react-container" data-config="/examples/feature/forecasting/effective_reproduction.json"></div> -->
|
|
67
|
+
<!-- <div class="react-container" data-config="/examples/feature/area/area-chart-date.json"></div> -->
|
|
68
|
+
<!-- <div class="react-container" data-config="/examples/feature/area/area-chart-category.json"></div> -->
|
|
69
|
+
<!-- <div class="react-container" data-config="/examples/feature/scatterplot/scatterplot.json"></div> -->
|
|
70
|
+
<!-- <div class="react-container" data-config="/examples/feature/deviation/planet-deviation-config.json"></div> -->
|
|
71
|
+
<!-- <div class="react-container" data-config="/examples/feature/boxplot/boxplot.json"></div> -->
|
|
72
|
+
<!-- <div class="react-container" data-config="/examples/feature/combo/planet-combo-example-config.json"></div> -->
|
|
73
|
+
<!-- <div class="react-container" data-config="/examples/feature/combo/right-issues.json"></div> -->
|
|
74
|
+
<!-- <div class="react-container" data-config="/examples/region-issue.json"></div> -->
|
|
75
|
+
|
|
76
|
+
<!-- BAR -->
|
|
77
|
+
<!-- <div class="react-container" data-config="/examples/feature/bar/planet-example-config.json"></div> -->
|
|
78
|
+
<!-- <div class="react-container" data-config="/examples/feature/bar/planet-chart-horizontal-example-config.json"></div> -->
|
|
79
|
+
<div class="react-container" data-config="/examples/feature/bar/example-bar-chart.json"></div>
|
|
80
|
+
<!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-chart-max-increase.json"></div> -->
|
|
81
|
+
<!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-chart.json"></div> -->
|
|
82
|
+
<!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-stacked-bar-chart.json"></div> -->
|
|
83
|
+
<!-- <div class="react-container" data-config="/examples/feature/bar/planet-chart-horizontal-example-config.json"></div> -->
|
|
84
|
+
|
|
85
|
+
<!-- SPARKLINE -->
|
|
86
|
+
<!-- <div class="react-container" data-config="/examples/feature/dev-4261.json"></div> -->
|
|
87
|
+
|
|
88
|
+
<!-- TESTS DATA TABLE SORTING -->
|
|
89
|
+
<!-- Bar Chart with Confidence Intervals (bottom of page) -->
|
|
90
|
+
<!-- <div class="react-container" data-config="https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Example_Bar_CI.json"></div> -->
|
|
91
|
+
<!-- TPOXX Patient Data -->
|
|
92
|
+
<!-- <div class="react-container" data-config="https://www.cdc.gov/poxvirus/mpox/modules/data-viz/tpoxx_weekly_race_eth.json"></div> -->
|
|
93
|
+
<!-- <div class="react-container" data-config="https://www.cdc.gov/poxvirus/mpox/modules/data-viz/mpx-tpoxx-age-gender.json"></div> -->
|
|
94
|
+
<!-- Non-Variola Orthopoxvirus (NVO) Laboratory Testing by Demographics -->
|
|
95
|
+
<!-- <div class="react-container" data-config="https://wwwdev-cdc.msappproxy.net/poxvirus/mpox/modules/data-viz/lab-data.json"></div> -->
|
|
96
|
+
<!-- <div class="react-container" data-config="https://wwwdev-cdc.msappproxy.net/poxvirus/mpox/modules/data-viz/lab-data-age.json"></div> -->
|
|
97
|
+
<!-- PROBLEM WITH THEIR PAGE CONFIG or CONFLICT with -->
|
|
98
|
+
<!-- CORS ERROR pulling data on Covid Flu RSV page at https://wwwdev-cdc.msappproxy.net/respiratory-viruses/index.html-->
|
|
99
|
+
<!-- <div class="react-container" data-config="https://wwwdev-cdc.msappproxy.net/respiratory-viruses/modules/emergency-dept-visits_live.json"></div> -->
|
|
100
|
+
<!-- MPOX -->
|
|
101
|
+
<!-- <div class="react-container" data-config="https://www.cdc.gov/poxvirus/mpox/modules/data-viz/mpox-demographics-monthly.json"></div> -->
|
|
102
|
+
<!-- <div class="react-container" data-config="/https://www.cdc.gov/poxvirus/mpox/modules/data-viz/mpx-age-sex1.json"></div> -->
|
|
103
|
+
|
|
104
|
+
<!-- TESTS DATE EXCLUSIONS -->
|
|
105
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-date-exclusions/date-exclusions-config.json"></div> -->
|
|
106
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-case-rate/case-rate-example-config.json"></div> -->
|
|
107
|
+
|
|
108
|
+
<!-- TESTS BIG SMALL-->
|
|
109
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-big-small/big-small-test-line.json"></div> -->
|
|
110
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-big-small/big-small-test-bar.json"></div> -->
|
|
111
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-big-small/big-small-test-negative.json"></div> -->
|
|
112
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-big-small/line-chart-max-increase.json"></div> -->
|
|
113
|
+
|
|
114
|
+
<!-- TESTS NONNUMERICS -->
|
|
115
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/planet-pie-example-config-nonnumeric.json"></div> -->
|
|
116
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/example-combo-bar-nonnumeric.json"></div> -->
|
|
117
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/example-bar-chart-nonnumeric.json"></div> -->
|
|
118
|
+
<!-- <div class="react-container" data-config="/examples/sparkline.json"></div> -->
|
|
119
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/sparkline-chart-nonnumeric.json"></div> -->
|
|
120
|
+
<div class="react-container" data-config="/examples/region-issue.json"></div>
|
|
121
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/stacked-vertical-bar-example-nonnumerics.json"></div> -->
|
|
122
|
+
|
|
123
|
+
<!-- TESTS CUTOFF -->
|
|
124
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-cutoff/cutoff-example-config.json"></div> -->
|
|
125
|
+
|
|
126
|
+
<!-- TESTS COVID -->
|
|
127
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-covid/covid-confidence-example-config.json"></div> -->
|
|
128
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-covid/covid-example-config.json"></div> -->
|
|
119
129
|
|
|
120
130
|
<!--
|
|
121
131
|
GALLERY EXAMPLES BELOW THIS LINE...
|
|
@@ -123,28 +133,25 @@
|
|
|
123
133
|
|
|
124
134
|
-->
|
|
125
135
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
<div class="react-container" data-config="/examples/feature/line/line-chart
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
<!-- HORIZONTAL BAR CHARTS -->
|
|
132
|
-
<!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-bar-chart-with-numbers-on-bar.json"></div> -->
|
|
133
|
-
<!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-bar-chart.json"></div> -->
|
|
134
|
-
<!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-stacked.json"></div> -->
|
|
136
|
+
<!-- GENERIC CHART TYPES -->
|
|
137
|
+
<!-- <div class="react-container" data-config="/examples/gallery/paired-bar/paired-bar-chart.json"></div> -->
|
|
138
|
+
<div class="react-container" data-config="/examples/feature/line/line-chart.json"></div>
|
|
135
139
|
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
<!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-confidence.json"></div> -->
|
|
141
|
-
<!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart.json"></div> -->
|
|
142
|
-
<!-- <div class="react-container" data-config="https://www.cdc.gov/respiratory-viruses/modules/respiratory-virus-activity/emergency-dept-visits_live.json"></div> -->
|
|
140
|
+
<!-- HORIZONTAL BAR CHARTS -->
|
|
141
|
+
<!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-bar-chart-with-numbers-on-bar.json"></div> -->
|
|
142
|
+
<!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-bar-chart.json"></div> -->
|
|
143
|
+
<!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-stacked.json"></div> -->
|
|
143
144
|
|
|
144
|
-
|
|
145
|
-
|
|
145
|
+
<!-- VERTICAL BAR CHARTS -->
|
|
146
|
+
<!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/combo-line-chart.json"></div> -->
|
|
147
|
+
<!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-categorical.json"></div> -->
|
|
148
|
+
<div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json"></div>
|
|
149
|
+
<!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-confidence.json"></div> -->
|
|
150
|
+
<!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart.json"></div> -->
|
|
151
|
+
<!-- <div class="react-container" data-config="https://www.cdc.gov/respiratory-viruses/modules/respiratory-virus-activity/emergency-dept-visits_live.json"></div> -->
|
|
146
152
|
|
|
147
|
-
<
|
|
148
|
-
</body>
|
|
153
|
+
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
149
154
|
|
|
155
|
+
<script type="module" src="./src/index.jsx"></script>
|
|
156
|
+
</body>
|
|
150
157
|
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cdc/chart",
|
|
3
|
-
"version": "4.24.
|
|
3
|
+
"version": "4.24.4",
|
|
4
4
|
"description": "React component for visualizing tabular data in various types of charts",
|
|
5
5
|
"moduleName": "CdcChart",
|
|
6
6
|
"main": "dist/cdcchart",
|
|
@@ -43,6 +43,7 @@
|
|
|
43
43
|
"chroma-js": "^2.1.2",
|
|
44
44
|
"d3-array": "^2.8.0",
|
|
45
45
|
"d3-format": "^3.1.0",
|
|
46
|
+
"d3-sankey": "^0.12.3",
|
|
46
47
|
"d3-time-format": "^3.0.0",
|
|
47
48
|
"html-react-parser": "^3.0.8",
|
|
48
49
|
"js-base64": "^2.5.2",
|
|
@@ -59,8 +60,9 @@
|
|
|
59
60
|
"react": "^18.2.0",
|
|
60
61
|
"react-dom": "^18.2.0"
|
|
61
62
|
},
|
|
62
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "1843b4632140d582af6a87606374cbd4fe25ad5c",
|
|
63
64
|
"devDependencies": {
|
|
65
|
+
"@types/d3-sankey": "^0.12.4",
|
|
64
66
|
"resize-observer-polyfill": "^1.5.1"
|
|
65
67
|
}
|
|
66
68
|
}
|