@cdc/chart 4.24.1 → 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.
Files changed (82) hide show
  1. package/dist/cdcchart.js +48948 -37923
  2. package/examples/{private/combo.json → chart-regression-1.json} +40 -31
  3. package/examples/chart-regression-2.json +2360 -0
  4. package/examples/feature/filters/url-filter.json +1076 -0
  5. package/examples/feature/line/line-chart-preliminary.json +84 -37
  6. package/examples/feature/line/line-chart.json +2 -1
  7. package/examples/feature/regions/index.json +55 -5
  8. package/examples/feature/sankey/sankey-example-data.json +1364 -0
  9. package/examples/feature/sankey/sankey_chart_data.csv +20 -0
  10. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json +306 -19
  11. package/examples/sparkline.json +868 -0
  12. package/index.html +128 -121
  13. package/package.json +4 -2
  14. package/src/CdcChart.tsx +73 -38
  15. package/src/_stories/ChartEditor.stories.tsx +15 -4
  16. package/src/_stories/_mock/pie_config.json +4 -3
  17. package/src/_stories/_mock/url_filter.json +1076 -0
  18. package/src/components/AreaChart/components/AreaChart.Stacked.jsx +2 -1
  19. package/src/components/AreaChart/components/AreaChart.jsx +2 -25
  20. package/src/components/BarChart/components/BarChart.Horizontal.tsx +39 -49
  21. package/src/components/BarChart/components/BarChart.StackedHorizontal.tsx +36 -56
  22. package/src/components/BarChart/components/BarChart.StackedVertical.tsx +36 -41
  23. package/src/components/BarChart/components/BarChart.Vertical.tsx +48 -64
  24. package/src/components/BoxPlot/BoxPlot.jsx +11 -9
  25. package/src/components/DeviationBar.jsx +3 -3
  26. package/src/components/EditorPanel/EditorPanel.tsx +1717 -1961
  27. package/src/components/EditorPanel/EditorPanelContext.ts +40 -0
  28. package/src/components/EditorPanel/components/Panels/Panel.BoxPlot.tsx +148 -0
  29. package/src/components/EditorPanel/components/{Panel.ForestPlotSettings.tsx → Panels/Panel.ForestPlotSettings.tsx} +16 -7
  30. package/src/components/EditorPanel/components/Panels/Panel.General.tsx +160 -0
  31. package/src/components/EditorPanel/components/{Panel.Regions.tsx → Panels/Panel.Regions.tsx} +6 -6
  32. package/src/components/EditorPanel/components/Panels/Panel.Sankey.tsx +108 -0
  33. package/src/components/EditorPanel/components/{Panel.Series.tsx → Panels/Panel.Series.tsx} +50 -6
  34. package/src/components/EditorPanel/components/Panels/Panel.Visual.tsx +338 -0
  35. package/src/components/EditorPanel/components/Panels/index.tsx +19 -0
  36. package/src/components/EditorPanel/components/panels.scss +11 -0
  37. package/src/components/EditorPanel/editor-panel.scss +1 -13
  38. package/src/components/EditorPanel/useEditorPermissions.js +44 -13
  39. package/src/components/Legend/Legend.Component.tsx +207 -0
  40. package/src/components/Legend/Legend.tsx +8 -327
  41. package/src/components/Legend/helpers/createFormatLabels.tsx +140 -0
  42. package/src/components/LineChart/LineChartProps.ts +2 -1
  43. package/src/components/LineChart/components/LineChart.Circle.tsx +85 -52
  44. package/src/components/LineChart/helpers.ts +3 -3
  45. package/src/components/LineChart/index.tsx +99 -23
  46. package/src/components/LinearChart.jsx +12 -33
  47. package/src/components/PairedBarChart.jsx +10 -12
  48. package/src/components/PieChart/PieChart.tsx +80 -27
  49. package/src/components/Regions/components/Regions.tsx +120 -69
  50. package/src/components/Sankey/index.tsx +434 -0
  51. package/src/components/Sankey/sankey.scss +153 -0
  52. package/src/components/Sankey/types/index.ts +16 -0
  53. package/src/components/ScatterPlot/ScatterPlot.jsx +1 -0
  54. package/src/components/Sparkline/{SparkLine.jsx → components/SparkLine.tsx} +14 -30
  55. package/src/components/Sparkline/index.scss +3 -0
  56. package/src/components/Sparkline/index.tsx +1 -1
  57. package/src/components/ZoomBrush.tsx +2 -1
  58. package/src/data/initial-state.js +51 -4
  59. package/src/helpers/computeMarginBottom.ts +4 -3
  60. package/src/helpers/tests/computeMarginBottom.test.ts +2 -1
  61. package/src/hooks/useBarChart.js +5 -2
  62. package/src/hooks/useHighlightedBars.js +1 -1
  63. package/src/hooks/useMinMax.ts +3 -3
  64. package/src/hooks/useScales.ts +28 -18
  65. package/src/hooks/useTooltip.tsx +19 -14
  66. package/src/scss/main.scss +8 -96
  67. package/src/types/ChartConfig.ts +47 -20
  68. package/src/types/ChartContext.ts +17 -4
  69. package/src/types/Label.ts +7 -0
  70. package/examples/private/chart-t.json +0 -3740
  71. package/examples/private/epi-data.csv +0 -13
  72. package/examples/private/epi-data.json +0 -62
  73. package/examples/private/epi.json +0 -403
  74. package/examples/private/occupancy.json +0 -109283
  75. package/examples/private/prod-line-config.json +0 -401
  76. package/examples/private/region-data.json +0 -822
  77. package/examples/private/region-testing.json +0 -312
  78. package/examples/private/scaling.json +0 -45325
  79. package/examples/private/testing-data.json +0 -1739
  80. package/examples/private/testing.json +0 -816
  81. package/src/components/EditorPanel/components/Panel.DateHighlighting.tsx +0 -109
  82. package/src/components/EditorPanel/components/Panels.tsx +0 -13
@@ -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
- "height": "375",
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
- "download": true
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
- "suffix": "%"
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
- "visualizationSubType": "stacked",
67
- "series": [
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
  }