@cdc/chart 4.23.10 → 4.24.1

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 (125) hide show
  1. package/dist/cdcchart.js +34606 -32218
  2. package/examples/feature/bar/additional-column-tooltip.json +446 -0
  3. package/examples/feature/bar/example-bar-chart.json +1 -46
  4. package/examples/feature/bar/lollipop.json +156 -0
  5. package/examples/feature/bar/tall-data.json +98 -0
  6. package/examples/feature/combo/planet-combo-example-config.json +99 -9
  7. package/examples/feature/dev-4261.json +399 -0
  8. package/examples/feature/forest-plot/forest-plot.json +63 -19
  9. package/examples/feature/forest-plot/{broken.json → linear.json} +77 -23
  10. package/examples/feature/forest-plot/log.json +26 -0
  11. package/examples/feature/forest-plot/logarithmic.json +271 -0
  12. package/examples/feature/line/line-chart-preliminary.json +346 -0
  13. package/examples/feature/line/line-points.json +340 -0
  14. package/examples/feature/regions/index.json +462 -0
  15. package/examples/feature/scatterplot/scatterplot.json +272 -33
  16. package/examples/gallery/bar-chart-vertical/combo-line-chart.json +181 -48
  17. package/examples/private/chart-t.json +3740 -0
  18. package/examples/private/combo.json +369 -0
  19. package/examples/private/epi-data.csv +13 -0
  20. package/examples/private/epi-data.json +62 -0
  21. package/examples/private/epi.json +403 -0
  22. package/examples/private/occupancy.json +109283 -0
  23. package/examples/private/prod-line-config.json +401 -0
  24. package/examples/private/region-data.json +822 -0
  25. package/examples/private/region-testing.json +312 -0
  26. package/examples/private/scaling.json +45325 -0
  27. package/examples/private/testing-data.json +1739 -0
  28. package/examples/private/testing.json +816 -0
  29. package/examples/sparkline-multilple.json +846 -0
  30. package/index.html +12 -8
  31. package/package.json +3 -3
  32. package/src/CdcChart.tsx +42 -211
  33. package/src/ConfigContext.tsx +6 -0
  34. package/src/_stories/Chart.stories.tsx +188 -0
  35. package/src/_stories/Chart.tooltip.stories.tsx +305 -0
  36. package/src/_stories/ChartBrush.stories.tsx +19 -0
  37. package/src/_stories/ChartEditor.stories.tsx +22 -0
  38. package/src/_stories/ChartLine.preliminary.tsx +19 -0
  39. package/src/_stories/ChartSuppress.stories.tsx +19 -0
  40. package/src/_stories/_mock/brush_mock.json +393 -0
  41. package/src/_stories/_mock/pie_config.json +191 -0
  42. package/src/_stories/_mock/pie_data.json +218 -0
  43. package/src/_stories/_mock/preliminary_mock.json +346 -0
  44. package/src/_stories/_mock/suppress_mock.json +911 -0
  45. package/src/components/{AreaChart.Stacked.jsx → AreaChart/components/AreaChart.Stacked.jsx} +6 -7
  46. package/src/components/{AreaChart.jsx → AreaChart/components/AreaChart.jsx} +7 -36
  47. package/src/components/AreaChart/index.tsx +4 -0
  48. package/src/components/{BarChart.Horizontal.jsx → BarChart/components/BarChart.Horizontal.tsx} +111 -34
  49. package/src/components/{BarChart.StackedHorizontal.jsx → BarChart/components/BarChart.StackedHorizontal.tsx} +55 -20
  50. package/src/components/BarChart/components/BarChart.StackedVertical.tsx +106 -0
  51. package/src/components/{BarChart.Vertical.jsx → BarChart/components/BarChart.Vertical.tsx} +162 -34
  52. package/src/components/BarChart/components/BarChart.jsx +39 -0
  53. package/src/components/{BarChartType.jsx → BarChart/components/BarChartType.jsx} +0 -2
  54. package/src/components/BarChart/components/context.tsx +13 -0
  55. package/src/components/BarChart/index.tsx +3 -0
  56. package/src/components/{BoxPlot.jsx → BoxPlot/BoxPlot.jsx} +1 -1
  57. package/src/components/BoxPlot/index.tsx +3 -0
  58. package/src/components/DeviationBar.jsx +4 -3
  59. package/src/components/{EditorPanel.jsx → EditorPanel/EditorPanel.tsx} +807 -865
  60. package/src/components/EditorPanel/components/Panel.DateHighlighting.tsx +109 -0
  61. package/src/components/{ForestPlotSettings.jsx → EditorPanel/components/Panel.ForestPlotSettings.tsx} +190 -220
  62. package/src/components/EditorPanel/components/Panel.Regions.tsx +168 -0
  63. package/src/components/{Series.jsx → EditorPanel/components/Panel.Series.tsx} +23 -4
  64. package/src/components/EditorPanel/components/PanelProps.ts +3 -0
  65. package/src/components/EditorPanel/components/Panels.tsx +13 -0
  66. package/src/components/EditorPanel/components/panels.scss +72 -0
  67. package/src/components/EditorPanel/editor-panel.scss +751 -0
  68. package/src/components/EditorPanel/index.tsx +3 -0
  69. package/src/{hooks → components/EditorPanel}/useEditorPermissions.js +50 -5
  70. package/src/components/{Forecasting.jsx → Forecasting/Forecasting.jsx} +1 -1
  71. package/src/components/Forecasting/index.tsx +3 -0
  72. package/src/components/ForestPlot/ForestPlot.tsx +254 -0
  73. package/src/components/ForestPlot/ForestPlotProps.ts +18 -0
  74. package/src/components/ForestPlot/index.scss +1 -0
  75. package/src/components/ForestPlot/index.tsx +3 -0
  76. package/src/components/Legend/Legend.tsx +347 -0
  77. package/src/components/Legend/index.tsx +3 -0
  78. package/src/components/LineChart/LineChartProps.ts +46 -0
  79. package/src/components/{LineChart.Circle.tsx → LineChart/components/LineChart.Circle.tsx} +36 -30
  80. package/src/components/LineChart/helpers.ts +45 -0
  81. package/src/components/LineChart/index.scss +1 -0
  82. package/src/components/{LineChart.tsx → LineChart/index.tsx} +83 -42
  83. package/src/components/LinearChart.jsx +125 -82
  84. package/src/components/PairedBarChart.jsx +2 -2
  85. package/src/components/{PieChart.jsx → PieChart/PieChart.tsx} +16 -7
  86. package/src/components/PieChart/index.tsx +3 -0
  87. package/src/components/Regions/components/Regions.tsx +135 -0
  88. package/src/components/Regions/index.tsx +3 -0
  89. package/src/components/{ScatterPlot.jsx → ScatterPlot/ScatterPlot.jsx} +3 -3
  90. package/src/components/ScatterPlot/index.tsx +3 -0
  91. package/src/components/{SparkLine.jsx → Sparkline/SparkLine.jsx} +2 -2
  92. package/src/components/Sparkline/index.tsx +3 -0
  93. package/src/components/ZoomBrush.tsx +168 -0
  94. package/src/data/initial-state.js +30 -16
  95. package/src/helpers/abbreviateNumber.ts +17 -0
  96. package/src/helpers/computeMarginBottom.ts +55 -0
  97. package/src/helpers/filterData.ts +18 -0
  98. package/src/helpers/generateColorsArray.ts +8 -0
  99. package/src/helpers/getQuartiles.ts +30 -0
  100. package/src/helpers/handleChartAriaLabels.ts +19 -0
  101. package/src/helpers/handleLineType.ts +18 -0
  102. package/src/helpers/lineOptions.ts +18 -0
  103. package/src/helpers/sort.ts +7 -0
  104. package/src/helpers/tests/computeMarginBottom.test.ts +20 -0
  105. package/src/hooks/useBarChart.js +72 -7
  106. package/src/hooks/useColorScale.ts +50 -0
  107. package/src/hooks/{useMinMax.js → useMinMax.ts} +75 -23
  108. package/src/hooks/{useRightAxis.js → useRightAxis.ts} +10 -2
  109. package/src/hooks/{useScales.js → useScales.ts} +64 -17
  110. package/src/hooks/{useTooltip.jsx → useTooltip.tsx} +84 -55
  111. package/src/scss/main.scss +70 -38
  112. package/src/types/ChartConfig.ts +178 -0
  113. package/src/types/ChartContext.ts +54 -0
  114. package/src/types/ForestPlot.ts +53 -0
  115. package/examples/feature/scatterplot/scatterplot-continuous.csv +0 -17
  116. package/src/ConfigContext.jsx +0 -5
  117. package/src/components/BarChart.StackedVertical.jsx +0 -95
  118. package/src/components/BarChart.jsx +0 -30
  119. package/src/components/ForestPlot.jsx +0 -191
  120. package/src/components/Legend.jsx +0 -277
  121. package/src/scss/LinearChart.scss +0 -0
  122. package/src/scss/editor-panel.scss +0 -745
  123. package/src/scss/legend.scss +0 -206
  124. package/src/scss/mixins.scss +0 -0
  125. package/src/scss/variables.scss +0 -1
@@ -0,0 +1,401 @@
1
+ {
2
+ "type": "chart",
3
+ "debugSvg": false,
4
+ "chartMessage": {
5
+ "noData": "No Data Available"
6
+ },
7
+ "title": "Example Line Chart",
8
+ "showTitle": true,
9
+ "showDownloadMediaButton": false,
10
+ "theme": "theme-green",
11
+ "animate": true,
12
+ "fontSize": "medium",
13
+ "lineDatapointStyle": "hover",
14
+ "lineDatapointColor": "Same as Line",
15
+ "barHasBorder": "false",
16
+ "isLollipopChart": false,
17
+ "lollipopShape": "circle",
18
+ "lollipopColorStyle": "two-tone",
19
+ "visualizationSubType": "regular",
20
+ "barStyle": "",
21
+ "roundingStyle": "standard",
22
+ "tipRounding": "top",
23
+ "isResponsiveTicks": false,
24
+ "general": {
25
+ "showDownloadButton": false
26
+ },
27
+ "padding": {
28
+ "left": 5,
29
+ "right": 5
30
+ },
31
+ "suppressedData": [],
32
+ "preliminaryData": [],
33
+ "yAxis": {
34
+ "hideAxis": false,
35
+ "displayNumbersOnBar": false,
36
+ "hideLabel": false,
37
+ "hideTicks": false,
38
+ "size": "75",
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": "9",
54
+ "axisPadding": 0,
55
+ "tickRotation": 0,
56
+ "anchors": [],
57
+ "label": "Y-Axis Example Label"
58
+ },
59
+ "boxplot": {
60
+ "plots": [],
61
+ "borders": "true",
62
+ "firstQuartilePercentage": 25,
63
+ "thirdQuartilePercentage": 75,
64
+ "boxWidthPercentage": 40,
65
+ "plotOutlierValues": false,
66
+ "plotNonOutlierValues": true,
67
+ "legend": {
68
+ "showHowToReadText": false,
69
+ "howToReadText": ""
70
+ },
71
+ "labels": {
72
+ "q1": "Lower Quartile",
73
+ "q2": "q2",
74
+ "q3": "Upper Quartile",
75
+ "q4": "q4",
76
+ "minimum": "Minimum",
77
+ "maximum": "Maximum",
78
+ "mean": "Mean",
79
+ "median": "Median",
80
+ "sd": "Standard Deviation",
81
+ "iqr": "Interquartile Range",
82
+ "total": "Total",
83
+ "outliers": "Outliers",
84
+ "values": "Values",
85
+ "lowerBounds": "Lower Bounds",
86
+ "upperBounds": "Upper Bounds"
87
+ }
88
+ },
89
+ "topAxis": {
90
+ "hasLine": false
91
+ },
92
+ "isLegendValue": false,
93
+ "barThickness": 0.35,
94
+ "barHeight": 25,
95
+ "barSpace": 15,
96
+ "heights": {
97
+ "vertical": 300,
98
+ "horizontal": 750
99
+ },
100
+ "xAxis": {
101
+ "sortDates": false,
102
+ "anchors": [],
103
+ "type": "date",
104
+ "showTargetLabel": true,
105
+ "targetLabel": "Target",
106
+ "hideAxis": false,
107
+ "hideLabel": false,
108
+ "hideTicks": false,
109
+ "size": "77",
110
+ "tickRotation": "25",
111
+ "min": "",
112
+ "max": "",
113
+ "labelColor": "#333",
114
+ "tickLabelColor": "#333",
115
+ "tickColor": "#333",
116
+ "numTicks": "",
117
+ "labelOffset": 65,
118
+ "axisPadding": 0,
119
+ "target": 0,
120
+ "maxTickRotation": 0,
121
+ "dataKey": "Date",
122
+ "label": "X-Axis Example Label",
123
+ "dateParseFormat": "%m/%d/%Y",
124
+ "dateDisplayFormat": "%m/%d/%Y",
125
+ "tickWidthMax": 91
126
+ },
127
+ "table": {
128
+ "label": "Data Table",
129
+ "expanded": true,
130
+ "limitHeight": false,
131
+ "height": "",
132
+ "caption": "",
133
+ "showDownloadUrl": false,
134
+ "showDataTableLink": true,
135
+ "indexLabel": "",
136
+ "download": true,
137
+ "showVertical": false,
138
+ "show": true
139
+ },
140
+ "orientation": "vertical",
141
+ "color": "pinkpurple",
142
+ "columns": {},
143
+ "legend": {
144
+ "hide": false,
145
+ "behavior": "isolate",
146
+ "singleRow": true,
147
+ "colorCode": "",
148
+ "reverseLabelOrder": false,
149
+ "description": "",
150
+ "dynamicLegend": false,
151
+ "dynamicLegendDefaultText": "Show All",
152
+ "dynamicLegendItemLimit": 5,
153
+ "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
154
+ "dynamicLegendChartMessage": "Select Options from the Legend",
155
+ "lineMode": false,
156
+ "verticalSorted": false,
157
+ "highlightOnHover": false,
158
+ "position": "right",
159
+ "label": "Type of Data"
160
+ },
161
+ "brush": {
162
+ "height": 25,
163
+ "data": [
164
+ {
165
+ "Date": "1/15/2016",
166
+ "Data 1": "90",
167
+ "Data 2": "135",
168
+ "Data 3": "300",
169
+ "Data 4": "95",
170
+ "Data 5": "120",
171
+ "Data 6": "310"
172
+ },
173
+ {
174
+ "Date": "2/15/2016",
175
+ "Data 1": "40",
176
+ "Data 2": "90",
177
+ "Data 3": "240",
178
+ "Data 4": "60",
179
+ "Data 5": "160",
180
+ "Data 6": "200"
181
+ },
182
+ {
183
+ "Date": "3/15/2016",
184
+ "Data 1": "50",
185
+ "Data 2": "300",
186
+ "Data 3": "290",
187
+ "Data 4": "100",
188
+ "Data 5": "200",
189
+ "Data 6": "250"
190
+ },
191
+ {
192
+ "Date": "4/15/2016",
193
+ "Data 1": "120",
194
+ "Data 2": "160",
195
+ "Data 3": "230",
196
+ "Data 4": "180",
197
+ "Data 5": "160",
198
+ "Data 6": "220"
199
+ },
200
+ {
201
+ "Date": "5/15/2016",
202
+ "Data 1": "80",
203
+ "Data 2": "350",
204
+ "Data 3": "300",
205
+ "Data 4": "150",
206
+ "Data 5": "130",
207
+ "Data 6": "100"
208
+ },
209
+ {
210
+ "Date": "6/15/2016",
211
+ "Data 1": "90",
212
+ "Data 2": "220",
213
+ "Data 3": "320",
214
+ "Data 4": "100",
215
+ "Data 5": "220",
216
+ "Data 6": "300"
217
+ }
218
+ ],
219
+ "active": false
220
+ },
221
+ "exclusions": {
222
+ "active": false,
223
+ "keys": []
224
+ },
225
+ "palette": "qualitative-bold",
226
+ "isPaletteReversed": false,
227
+ "twoColor": {
228
+ "palette": "monochrome-1",
229
+ "isPaletteReversed": false
230
+ },
231
+ "labels": false,
232
+ "dataFormat": {
233
+ "commas": false,
234
+ "prefix": "",
235
+ "suffix": "",
236
+ "abbreviated": false,
237
+ "bottomSuffix": "",
238
+ "bottomPrefix": "",
239
+ "bottomAbbreviated": false
240
+ },
241
+ "confidenceKeys": {},
242
+ "visual": {
243
+ "border": true,
244
+ "accent": true,
245
+ "background": true,
246
+ "verticalHoverLine": false,
247
+ "horizontalHoverLine": false
248
+ },
249
+ "useLogScale": false,
250
+ "filterBehavior": "Filter Change",
251
+ "highlightedBarValues": [],
252
+ "series": [
253
+ {
254
+ "dataKey": "Data 1",
255
+ "type": "Bar",
256
+ "tooltip": true,
257
+ "axis": "Left"
258
+ },
259
+ {
260
+ "dataKey": "Data 2",
261
+ "type": "Bar",
262
+ "tooltip": true,
263
+ "axis": "Left"
264
+ },
265
+ {
266
+ "dataKey": "Data 3",
267
+ "type": "Bar",
268
+ "tooltip": true,
269
+ "axis": "Left"
270
+ },
271
+ {
272
+ "dataKey": "Data 4",
273
+ "type": "Bar",
274
+ "tooltip": true,
275
+ "axis": "Left"
276
+ },
277
+ {
278
+ "dataKey": "Data 5",
279
+ "type": "Bar",
280
+ "tooltip": true,
281
+ "axis": "Left"
282
+ },
283
+ {
284
+ "dataKey": "Data 6",
285
+ "type": "Bar",
286
+ "tooltip": true,
287
+ "axis": "Left"
288
+ }
289
+ ],
290
+ "tooltips": {
291
+ "opacity": 90,
292
+ "singleSeries": false
293
+ },
294
+ "forestPlot": {
295
+ "startAt": 0,
296
+ "colors": {
297
+ "line": "",
298
+ "shape": ""
299
+ },
300
+ "lineOfNoEffect": {
301
+ "show": true
302
+ },
303
+ "type": "",
304
+ "pooledResult": {
305
+ "diamondHeight": 5,
306
+ "column": ""
307
+ },
308
+ "estimateField": "",
309
+ "estimateRadius": "",
310
+ "shape": "square",
311
+ "rowHeight": 20,
312
+ "description": {
313
+ "show": true,
314
+ "text": "description",
315
+ "location": 0
316
+ },
317
+ "result": {
318
+ "show": true,
319
+ "text": "result",
320
+ "location": 100
321
+ },
322
+ "radius": {
323
+ "min": 2,
324
+ "max": 10,
325
+ "scalingColumn": ""
326
+ },
327
+ "regression": {
328
+ "lower": 0,
329
+ "upper": 0,
330
+ "estimateField": 0
331
+ },
332
+ "leftWidthOffset": 0,
333
+ "rightWidthOffset": 0,
334
+ "showZeroLine": false,
335
+ "leftLabel": "",
336
+ "rightLabel": ""
337
+ },
338
+ "area": {
339
+ "isStacked": false
340
+ },
341
+ "height": "375",
342
+ "data": [
343
+ {
344
+ "Date": "1/15/2016",
345
+ "Data 1": "90",
346
+ "Data 2": "135",
347
+ "Data 3": "300",
348
+ "Data 4": "95",
349
+ "Data 5": "120",
350
+ "Data 6": "310"
351
+ },
352
+ {
353
+ "Date": "2/15/2016",
354
+ "Data 1": "40",
355
+ "Data 2": "90",
356
+ "Data 3": "240",
357
+ "Data 4": "60",
358
+ "Data 5": "160",
359
+ "Data 6": "200"
360
+ },
361
+ {
362
+ "Date": "3/15/2016",
363
+ "Data 1": "50",
364
+ "Data 2": "300",
365
+ "Data 3": "290",
366
+ "Data 4": "100",
367
+ "Data 5": "200",
368
+ "Data 6": "250"
369
+ },
370
+ {
371
+ "Date": "4/15/2016",
372
+ "Data 1": "120",
373
+ "Data 2": "160",
374
+ "Data 3": "230",
375
+ "Data 4": "180",
376
+ "Data 5": "160",
377
+ "Data 6": "220"
378
+ },
379
+ {
380
+ "Date": "5/15/2016",
381
+ "Data 1": "80",
382
+ "Data 2": "350",
383
+ "Data 3": "300",
384
+ "Data 4": "150",
385
+ "Data 5": "130",
386
+ "Data 6": "100"
387
+ },
388
+ {
389
+ "Date": "6/15/2016",
390
+ "Data 1": "90",
391
+ "Data 2": "220",
392
+ "Data 3": "320",
393
+ "Data 4": "100",
394
+ "Data 5": "220",
395
+ "Data 6": "300"
396
+ }
397
+ ],
398
+ "visualizationType": "Line",
399
+ "validated": 4.23,
400
+ "dynamicMarginTop": 0
401
+ }