@cdc/chart 4.24.2 → 4.24.3
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 +47386 -36618
- 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 +2 -1
- 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/sparkline.json +868 -0
- package/index.html +128 -123
- package/package.json +4 -2
- package/src/CdcChart.tsx +40 -22
- 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 +39 -49
- 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 +40 -55
- package/src/components/BoxPlot/BoxPlot.jsx +2 -1
- package/src/components/DeviationBar.jsx +3 -3
- package/src/components/EditorPanel/EditorPanel.tsx +167 -15
- package/src/components/EditorPanel/components/Panels/Panel.Regions.tsx +1 -1
- package/src/components/EditorPanel/components/Panels/Panel.Sankey.tsx +108 -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/useEditorPermissions.js +40 -14
- package/src/components/Legend/Legend.Component.tsx +23 -15
- package/src/components/Legend/Legend.tsx +4 -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 +9 -30
- 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 +15 -18
- package/src/hooks/useTooltip.tsx +9 -8
- package/src/scss/main.scss +8 -29
- package/src/types/ChartConfig.ts +32 -14
- package/src/types/ChartContext.ts +7 -0
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
Disposition,Type of Treatment,Final Outcome,Number of Patients
|
|
2
|
+
"Assist, Agency",Assisted,N/A,2356
|
|
3
|
+
"Assist, Public",Assisted,N/A,859
|
|
4
|
+
"Assist, Unit",Assisted,N/A,2486
|
|
5
|
+
Patient Dead at Scene-No Resuscitation Attempted (With Transport),Dead at scene,Dead,123
|
|
6
|
+
Patient Dead at Scene-No Resuscitation Attempted (Without Transport),Dead at scene,Dead,3965
|
|
7
|
+
Patient Dead at Scene-Resuscitation Attempted (With Transport),Treated,Dead,**
|
|
8
|
+
Patient Dead at Scene-Resuscitation Attempted (Without Transport),Treated,Dead,631
|
|
9
|
+
"Patient Evaluated, No Treatment/Transport Required",Evaluated no treatment required,Released,5169
|
|
10
|
+
Patient Refused Evaluation/Care (With Transport),Refused evaluation care,Transported to hospital,860
|
|
11
|
+
Patient Refused Evaluation/Care (Without Transport),Refused evaluation care,Released,11781
|
|
12
|
+
"Patient Treated, Released (AMA)",Treated,Released,6780
|
|
13
|
+
"Patient Treated, Released (per protocol)",Treated,Released,3522
|
|
14
|
+
"Patient Treated, Transferred Care to Another EMS Unit",Treated,Transported to hospital,24432
|
|
15
|
+
"Patient Treated, Transported by Law Enforcement",Treated,Transported to facility,4227
|
|
16
|
+
"Patient Treated, Transported by Private Vehicle",Treated,Transported to facility,277
|
|
17
|
+
"Patient Treated, Transported by this EMS Unit",Treated,Transported to hospital,399088
|
|
18
|
+
"Standby-Public Safety, Fire, or EMS Operational Support Provided",No patient contact,N/A,458
|
|
19
|
+
"Transport Non-Patient, Organs, etc.",No patient contact,N/A,**
|
|
20
|
+
Unknown,Unknown,N/A,104
|
|
@@ -1,41 +1,341 @@
|
|
|
1
1
|
{
|
|
2
2
|
"type": "chart",
|
|
3
|
+
"debugSvg": false,
|
|
4
|
+
"chartMessage": {
|
|
5
|
+
"noData": "No Data Available"
|
|
6
|
+
},
|
|
3
7
|
"title": "Example Stacked Bar Chart",
|
|
8
|
+
"showTitle": true,
|
|
9
|
+
"showDownloadMediaButton": false,
|
|
4
10
|
"theme": "theme-orange",
|
|
11
|
+
"animate": false,
|
|
5
12
|
"fontSize": "medium",
|
|
6
|
-
"
|
|
13
|
+
"lineDatapointStyle": "hover",
|
|
14
|
+
"lineDatapointColor": "Same as Line",
|
|
15
|
+
"barHasBorder": "false",
|
|
16
|
+
"isLollipopChart": false,
|
|
17
|
+
"lollipopShape": "circle",
|
|
18
|
+
"lollipopColorStyle": "two-tone",
|
|
19
|
+
"visualizationSubType": "stacked",
|
|
20
|
+
"barStyle": "rounded",
|
|
21
|
+
"roundingStyle": "finger",
|
|
22
|
+
"tipRounding": "full",
|
|
23
|
+
"isResponsiveTicks": false,
|
|
24
|
+
"general": {
|
|
25
|
+
"showDownloadButton": false
|
|
26
|
+
},
|
|
7
27
|
"padding": {
|
|
8
28
|
"left": 5,
|
|
9
29
|
"right": 5
|
|
10
30
|
},
|
|
31
|
+
"suppressedData": [],
|
|
32
|
+
"preliminaryData": [],
|
|
11
33
|
"yAxis": {
|
|
34
|
+
"hideAxis": false,
|
|
35
|
+
"displayNumbersOnBar": false,
|
|
36
|
+
"hideLabel": false,
|
|
37
|
+
"hideTicks": false,
|
|
12
38
|
"size": "64",
|
|
13
39
|
"gridLines": false,
|
|
40
|
+
"enablePadding": false,
|
|
41
|
+
"min": "",
|
|
42
|
+
"max": "",
|
|
43
|
+
"labelColor": "#333",
|
|
44
|
+
"tickLabelColor": "#333",
|
|
45
|
+
"tickColor": "#333",
|
|
46
|
+
"rightHideAxis": true,
|
|
47
|
+
"rightAxisSize": 0,
|
|
48
|
+
"rightLabel": "",
|
|
49
|
+
"rightLabelOffsetSize": 0,
|
|
50
|
+
"rightAxisLabelColor": "#333",
|
|
51
|
+
"rightAxisTickLabelColor": "#333",
|
|
52
|
+
"rightAxisTickColor": "#333",
|
|
53
|
+
"numTicks": "",
|
|
54
|
+
"axisPadding": 0,
|
|
55
|
+
"scalePadding": 10,
|
|
56
|
+
"tickRotation": 0,
|
|
57
|
+
"anchors": [],
|
|
14
58
|
"label": "Y-Axis Label Example"
|
|
15
59
|
},
|
|
60
|
+
"boxplot": {
|
|
61
|
+
"plots": [],
|
|
62
|
+
"borders": "true",
|
|
63
|
+
"firstQuartilePercentage": 25,
|
|
64
|
+
"thirdQuartilePercentage": 75,
|
|
65
|
+
"boxWidthPercentage": 40,
|
|
66
|
+
"plotOutlierValues": false,
|
|
67
|
+
"plotNonOutlierValues": true,
|
|
68
|
+
"legend": {
|
|
69
|
+
"showHowToReadText": false,
|
|
70
|
+
"howToReadText": ""
|
|
71
|
+
},
|
|
72
|
+
"labels": {
|
|
73
|
+
"q1": "Lower Quartile",
|
|
74
|
+
"q2": "q2",
|
|
75
|
+
"q3": "Upper Quartile",
|
|
76
|
+
"q4": "q4",
|
|
77
|
+
"minimum": "Minimum",
|
|
78
|
+
"maximum": "Maximum",
|
|
79
|
+
"mean": "Mean",
|
|
80
|
+
"median": "Median",
|
|
81
|
+
"sd": "Standard Deviation",
|
|
82
|
+
"iqr": "Interquartile Range",
|
|
83
|
+
"total": "Total",
|
|
84
|
+
"outliers": "Outliers",
|
|
85
|
+
"values": "Values",
|
|
86
|
+
"lowerBounds": "Lower Bounds",
|
|
87
|
+
"upperBounds": "Upper Bounds"
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
"topAxis": {
|
|
91
|
+
"hasLine": false
|
|
92
|
+
},
|
|
93
|
+
"isLegendValue": false,
|
|
16
94
|
"barThickness": 0.35,
|
|
95
|
+
"barHeight": 25,
|
|
96
|
+
"barSpace": 15,
|
|
97
|
+
"heights": {
|
|
98
|
+
"vertical": 300,
|
|
99
|
+
"horizontal": 750
|
|
100
|
+
},
|
|
17
101
|
"xAxis": {
|
|
102
|
+
"sortDates": false,
|
|
103
|
+
"anchors": [],
|
|
104
|
+
"type": "categorical",
|
|
105
|
+
"showTargetLabel": true,
|
|
106
|
+
"targetLabel": "Target",
|
|
107
|
+
"hideAxis": false,
|
|
108
|
+
"hideLabel": false,
|
|
109
|
+
"hideTicks": false,
|
|
18
110
|
"size": "67",
|
|
19
111
|
"tickRotation": "25",
|
|
112
|
+
"min": "",
|
|
113
|
+
"max": "",
|
|
114
|
+
"labelColor": "#333",
|
|
115
|
+
"tickLabelColor": "#333",
|
|
116
|
+
"tickColor": "#333",
|
|
117
|
+
"numTicks": "",
|
|
118
|
+
"labelOffset": 65,
|
|
119
|
+
"axisPadding": 0,
|
|
120
|
+
"target": 0,
|
|
121
|
+
"maxTickRotation": 0,
|
|
20
122
|
"dataKey": "Year",
|
|
21
|
-
"label": "X-Axis Label Example"
|
|
123
|
+
"label": "X-Axis Label Example",
|
|
124
|
+
"tickWidthMax": 41
|
|
22
125
|
},
|
|
23
126
|
"table": {
|
|
24
127
|
"label": "Data Table",
|
|
25
128
|
"expanded": true,
|
|
26
|
-
"
|
|
129
|
+
"limitHeight": false,
|
|
130
|
+
"height": "",
|
|
131
|
+
"caption": "",
|
|
132
|
+
"showDownloadUrl": false,
|
|
133
|
+
"showDataTableLink": true,
|
|
134
|
+
"indexLabel": "",
|
|
135
|
+
"download": true,
|
|
136
|
+
"showVertical": false,
|
|
137
|
+
"dateDisplayFormat": "",
|
|
138
|
+
"show": true
|
|
27
139
|
},
|
|
140
|
+
"orientation": "vertical",
|
|
141
|
+
"color": "pinkpurple",
|
|
142
|
+
"columns": {},
|
|
28
143
|
"legend": {
|
|
144
|
+
"hide": false,
|
|
29
145
|
"behavior": "isolate",
|
|
146
|
+
"axisAlign": true,
|
|
147
|
+
"singleRow": true,
|
|
148
|
+
"colorCode": "",
|
|
149
|
+
"reverseLabelOrder": false,
|
|
150
|
+
"description": "",
|
|
151
|
+
"dynamicLegend": false,
|
|
152
|
+
"dynamicLegendDefaultText": "Show All",
|
|
153
|
+
"dynamicLegendItemLimit": 5,
|
|
154
|
+
"dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
|
|
155
|
+
"dynamicLegendChartMessage": "Select Options from the Legend",
|
|
156
|
+
"lineMode": false,
|
|
157
|
+
"verticalSorted": false,
|
|
158
|
+
"highlightOnHover": false,
|
|
159
|
+
"seriesHighlight": [],
|
|
30
160
|
"position": "right",
|
|
31
161
|
"label": "Data Type"
|
|
32
162
|
},
|
|
163
|
+
"brush": {
|
|
164
|
+
"height": 25,
|
|
165
|
+
"data": [
|
|
166
|
+
{
|
|
167
|
+
"Year": "2015",
|
|
168
|
+
"Data 1": "25",
|
|
169
|
+
"Data 2": "20",
|
|
170
|
+
"Data 3": "55"
|
|
171
|
+
},
|
|
172
|
+
{
|
|
173
|
+
"Year": "2016",
|
|
174
|
+
"Data 1": "35",
|
|
175
|
+
"Data 2": "30",
|
|
176
|
+
"Data 3": "35"
|
|
177
|
+
},
|
|
178
|
+
{
|
|
179
|
+
"Year": "2017",
|
|
180
|
+
"Data 1": "22",
|
|
181
|
+
"Data 2": "38",
|
|
182
|
+
"Data 3": "40"
|
|
183
|
+
},
|
|
184
|
+
{
|
|
185
|
+
"Year": "2018",
|
|
186
|
+
"Data 1": "40",
|
|
187
|
+
"Data 2": "40",
|
|
188
|
+
"Data 3": "20"
|
|
189
|
+
}
|
|
190
|
+
],
|
|
191
|
+
"active": false
|
|
192
|
+
},
|
|
193
|
+
"exclusions": {
|
|
194
|
+
"active": false,
|
|
195
|
+
"keys": []
|
|
196
|
+
},
|
|
33
197
|
"palette": "qualitative-bold",
|
|
198
|
+
"isPaletteReversed": false,
|
|
199
|
+
"twoColor": {
|
|
200
|
+
"palette": "monochrome-1",
|
|
201
|
+
"isPaletteReversed": false
|
|
202
|
+
},
|
|
34
203
|
"labels": false,
|
|
35
204
|
"dataFormat": {
|
|
36
|
-
"
|
|
205
|
+
"commas": false,
|
|
206
|
+
"prefix": "",
|
|
207
|
+
"suffix": "%",
|
|
208
|
+
"abbreviated": false,
|
|
209
|
+
"bottomSuffix": "",
|
|
210
|
+
"bottomPrefix": "",
|
|
211
|
+
"bottomAbbreviated": false
|
|
37
212
|
},
|
|
38
213
|
"confidenceKeys": {},
|
|
214
|
+
"visual": {
|
|
215
|
+
"border": true,
|
|
216
|
+
"accent": true,
|
|
217
|
+
"background": true,
|
|
218
|
+
"verticalHoverLine": false,
|
|
219
|
+
"horizontalHoverLine": false
|
|
220
|
+
},
|
|
221
|
+
"useLogScale": false,
|
|
222
|
+
"filterBehavior": "Filter Change",
|
|
223
|
+
"highlightedBarValues": [],
|
|
224
|
+
"series": [
|
|
225
|
+
{
|
|
226
|
+
"dataKey": "Data 1",
|
|
227
|
+
"type": "Bar",
|
|
228
|
+
"tooltip": true,
|
|
229
|
+
"axis": "Left"
|
|
230
|
+
},
|
|
231
|
+
{
|
|
232
|
+
"dataKey": "Data 2",
|
|
233
|
+
"type": "Bar",
|
|
234
|
+
"tooltip": true,
|
|
235
|
+
"axis": "Left"
|
|
236
|
+
},
|
|
237
|
+
{
|
|
238
|
+
"dataKey": "Data 3",
|
|
239
|
+
"type": "Bar",
|
|
240
|
+
"tooltip": true,
|
|
241
|
+
"axis": "Left"
|
|
242
|
+
}
|
|
243
|
+
],
|
|
244
|
+
"tooltips": {
|
|
245
|
+
"opacity": 90,
|
|
246
|
+
"singleSeries": false,
|
|
247
|
+
"dateDisplayFormat": ""
|
|
248
|
+
},
|
|
249
|
+
"forestPlot": {
|
|
250
|
+
"startAt": 0,
|
|
251
|
+
"colors": {
|
|
252
|
+
"line": "",
|
|
253
|
+
"shape": ""
|
|
254
|
+
},
|
|
255
|
+
"lineOfNoEffect": {
|
|
256
|
+
"show": true
|
|
257
|
+
},
|
|
258
|
+
"type": "",
|
|
259
|
+
"pooledResult": {
|
|
260
|
+
"diamondHeight": 5,
|
|
261
|
+
"column": ""
|
|
262
|
+
},
|
|
263
|
+
"estimateField": "",
|
|
264
|
+
"estimateRadius": "",
|
|
265
|
+
"shape": "square",
|
|
266
|
+
"rowHeight": 20,
|
|
267
|
+
"description": {
|
|
268
|
+
"show": true,
|
|
269
|
+
"text": "description",
|
|
270
|
+
"location": 0
|
|
271
|
+
},
|
|
272
|
+
"result": {
|
|
273
|
+
"show": true,
|
|
274
|
+
"text": "result",
|
|
275
|
+
"location": 100
|
|
276
|
+
},
|
|
277
|
+
"radius": {
|
|
278
|
+
"min": 2,
|
|
279
|
+
"max": 10,
|
|
280
|
+
"scalingColumn": ""
|
|
281
|
+
},
|
|
282
|
+
"regression": {
|
|
283
|
+
"lower": 0,
|
|
284
|
+
"upper": 0,
|
|
285
|
+
"estimateField": 0
|
|
286
|
+
},
|
|
287
|
+
"leftWidthOffset": 0,
|
|
288
|
+
"rightWidthOffset": 0,
|
|
289
|
+
"showZeroLine": false,
|
|
290
|
+
"leftLabel": "",
|
|
291
|
+
"rightLabel": ""
|
|
292
|
+
},
|
|
293
|
+
"area": {
|
|
294
|
+
"isStacked": false
|
|
295
|
+
},
|
|
296
|
+
"sankey": {
|
|
297
|
+
"title": {
|
|
298
|
+
"defaultColor": "black"
|
|
299
|
+
},
|
|
300
|
+
"iterations": 1,
|
|
301
|
+
"rxValue": 0.9,
|
|
302
|
+
"overallSize": {
|
|
303
|
+
"width": 900,
|
|
304
|
+
"height": 700
|
|
305
|
+
},
|
|
306
|
+
"margin": {
|
|
307
|
+
"margin_y": 25,
|
|
308
|
+
"margin_x": 0
|
|
309
|
+
},
|
|
310
|
+
"nodeSize": {
|
|
311
|
+
"nodeWidth": 26,
|
|
312
|
+
"nodeHeight": 40
|
|
313
|
+
},
|
|
314
|
+
"nodePadding": 55,
|
|
315
|
+
"nodeFontColor": "black",
|
|
316
|
+
"nodeColor": {
|
|
317
|
+
"default": "#ff8500",
|
|
318
|
+
"inactive": "#808080"
|
|
319
|
+
},
|
|
320
|
+
"linkColor": {
|
|
321
|
+
"default": "#ffc900",
|
|
322
|
+
"inactive": "#D3D3D3"
|
|
323
|
+
},
|
|
324
|
+
"opacity": {
|
|
325
|
+
"nodeOpacityDefault": 1,
|
|
326
|
+
"nodeOpacityInactive": 0.1,
|
|
327
|
+
"LinkOpacityDefault": 1,
|
|
328
|
+
"LinkOpacityInactive": 0.1
|
|
329
|
+
},
|
|
330
|
+
"storyNodeFontColor": "#006778",
|
|
331
|
+
"storyNodeText": [],
|
|
332
|
+
"nodeValueStyle": {
|
|
333
|
+
"textBefore": "(",
|
|
334
|
+
"textAfter": ")"
|
|
335
|
+
},
|
|
336
|
+
"data": []
|
|
337
|
+
},
|
|
338
|
+
"height": "375",
|
|
39
339
|
"data": [
|
|
40
340
|
{
|
|
41
341
|
"Year": "2015",
|
|
@@ -63,19 +363,6 @@
|
|
|
63
363
|
}
|
|
64
364
|
],
|
|
65
365
|
"visualizationType": "Bar",
|
|
66
|
-
"
|
|
67
|
-
"
|
|
68
|
-
{
|
|
69
|
-
"dataKey": "Data 1",
|
|
70
|
-
"type": "Bar"
|
|
71
|
-
},
|
|
72
|
-
{
|
|
73
|
-
"dataKey": "Data 2",
|
|
74
|
-
"type": "Bar"
|
|
75
|
-
},
|
|
76
|
-
{
|
|
77
|
-
"dataKey": "Data 3",
|
|
78
|
-
"type": "Bar"
|
|
79
|
-
}
|
|
80
|
-
]
|
|
366
|
+
"validated": 4.23,
|
|
367
|
+
"dynamicMarginTop": 0
|
|
81
368
|
}
|