@cdc/chart 4.23.4 → 4.23.6

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 (42) hide show
  1. package/dist/cdcchart.js +54845 -51755
  2. package/examples/feature/__data__/planet-example-data.json +14 -32
  3. package/examples/feature/__data__/planet-logaritmic-data.json +56 -0
  4. package/examples/feature/area/area-chart-category.json +240 -0
  5. package/examples/feature/bar/example-bar-chart.json +544 -22
  6. package/examples/feature/bar/new.json +561 -0
  7. package/examples/feature/bar/planet-chart-logaritmic-config.json +170 -0
  8. package/examples/feature/boxplot/valid-boxplot.csv +17 -0
  9. package/examples/feature/combo/right-issues.json +190 -0
  10. package/examples/feature/filters/filter-testing.json +37 -3
  11. package/examples/feature/forecasting/combo-forecasting.json +245 -0
  12. package/examples/feature/forecasting/forecasting.json +5325 -0
  13. package/examples/feature/forecasting/index.json +203 -0
  14. package/examples/feature/forecasting/random_data.csv +366 -0
  15. package/examples/feature/line/line-chart.json +3 -3
  16. package/examples/feature/test-highlight/test-highlight-2.json +789 -0
  17. package/examples/feature/test-highlight/test-highlight-vertical.json +561 -0
  18. package/examples/feature/test-highlight/test-highlight.json +100 -0
  19. package/examples/feature/tests-non-numerics/stacked-vertical-bar-example-nonnumerics.json +1 -2
  20. package/examples/gallery/bar-chart-horizontal/horizontal-highlight.json +345 -0
  21. package/examples/gallery/line/line.json +173 -1
  22. package/index.html +14 -8
  23. package/package.json +2 -2
  24. package/src/CdcChart.jsx +342 -25
  25. package/src/components/AreaChart.jsx +32 -40
  26. package/src/components/BarChart.jsx +147 -25
  27. package/src/components/DataTable.jsx +30 -12
  28. package/src/components/DeviationBar.jsx +32 -32
  29. package/src/components/EditorPanel.jsx +1902 -1126
  30. package/src/components/Forecasting.jsx +147 -0
  31. package/src/components/Legend.jsx +193 -243
  32. package/src/components/LineChart.jsx +4 -9
  33. package/src/components/LinearChart.jsx +263 -285
  34. package/src/components/Series.jsx +518 -0
  35. package/src/components/SparkLine.jsx +3 -3
  36. package/src/data/initial-state.js +24 -5
  37. package/src/hooks/useHighlightedBars.js +154 -0
  38. package/src/hooks/useMinMax.js +128 -0
  39. package/src/hooks/useReduceData.js +31 -57
  40. package/src/hooks/useRightAxis.js +8 -2
  41. package/src/hooks/useScales.js +196 -0
  42. /package/examples/feature/area/{area-chart.json → area-chart-date.json} +0 -0
@@ -1,36 +1,558 @@
1
1
  {
2
2
  "type": "chart",
3
3
  "title": "Example Bar Chart",
4
+ "showTitle": true,
5
+ "showDownloadMediaButton": false,
4
6
  "theme": "theme-blue",
7
+ "animate": false,
5
8
  "fontSize": "medium",
6
- "height": 300,
7
- "padding": { "left": 5, "right": 5 },
8
- "yAxis": { "size": "76", "gridLines": false, "label": "Y Axis Example Label" },
9
+ "lineDatapointStyle": "hover",
10
+ "barHasBorder": "false",
11
+ "isLollipopChart": false,
12
+ "lollipopShape": "circle",
13
+ "lollipopColorStyle": "two-tone",
14
+ "visualizationSubType": "regular",
15
+ "barStyle": "",
16
+ "roundingStyle": "standard",
17
+ "tipRounding": "top",
18
+ "general": {
19
+ "showDownloadButton": true
20
+ },
21
+ "padding": {
22
+ "left": 5,
23
+ "right": 5
24
+ },
25
+ "yAxis": {
26
+ "hideAxis": false,
27
+ "displayNumbersOnBar": false,
28
+ "hideLabel": false,
29
+ "hideTicks": false,
30
+ "size": 50,
31
+ "gridLines": false,
32
+ "enablePadding": false,
33
+ "min": "",
34
+ "max": "",
35
+ "labelColor": "#333",
36
+ "tickLabelColor": "#333",
37
+ "tickColor": "#333",
38
+ "rightHideAxis": true,
39
+ "rightAxisSize": 50,
40
+ "rightLabel": "",
41
+ "rightLabelOffsetSize": 0,
42
+ "rightAxisLabelColor": "#333",
43
+ "rightAxisTickLabelColor": "#333",
44
+ "rightAxisTickColor": "#333",
45
+ "numTicks": "",
46
+ "axisPadding": 0,
47
+ "tickRotation": 0,
48
+ "anchors": [],
49
+ "type": "chart",
50
+ "title": "Example Bar Chart",
51
+ "showTitle": true,
52
+ "showDownloadMediaButton": false,
53
+ "theme": "theme-blue",
54
+ "animate": false,
55
+ "fontSize": "medium",
56
+ "lineDatapointStyle": "hover",
57
+ "barHasBorder": "false",
58
+ "isLollipopChart": false,
59
+ "lollipopShape": "circle",
60
+ "lollipopColorStyle": "two-tone",
61
+ "visualizationSubType": "regular",
62
+ "barStyle": "",
63
+ "roundingStyle": "standard",
64
+ "tipRounding": "top",
65
+ "general": {
66
+ "showDownloadButton": true
67
+ },
68
+ "padding": {
69
+ "left": 5,
70
+ "right": 5
71
+ },
72
+ "yAxis": {
73
+ "hideAxis": false,
74
+ "displayNumbersOnBar": false,
75
+ "hideLabel": false,
76
+ "hideTicks": false,
77
+ "size": "76",
78
+ "gridLines": false,
79
+ "enablePadding": false,
80
+ "min": "",
81
+ "max": "",
82
+ "labelColor": "#333",
83
+ "tickLabelColor": "#333",
84
+ "tickColor": "#333",
85
+ "rightHideAxis": true,
86
+ "rightAxisSize": 50,
87
+ "rightLabel": "",
88
+ "rightLabelOffsetSize": 0,
89
+ "rightAxisLabelColor": "#333",
90
+ "rightAxisTickLabelColor": "#333",
91
+ "rightAxisTickColor": "#333",
92
+ "numTicks": "",
93
+ "axisPadding": 0,
94
+ "tickRotation": 0,
95
+ "anchors": [],
96
+ "label": "Y Axis Example Label"
97
+ },
98
+ "boxplot": {
99
+ "plots": [],
100
+ "borders": "true",
101
+ "firstQuartilePercentage": 25,
102
+ "thirdQuartilePercentage": 75,
103
+ "boxWidthPercentage": 40,
104
+ "plotOutlierValues": false,
105
+ "plotNonOutlierValues": true,
106
+ "legend": {
107
+ "showHowToReadText": false,
108
+ "howToReadText": ""
109
+ },
110
+ "labels": {
111
+ "q1": "Lower Quartile",
112
+ "q2": "q2",
113
+ "q3": "Upper Quartile",
114
+ "q4": "q4",
115
+ "minimum": "Minimum",
116
+ "maximum": "Maximum",
117
+ "mean": "Mean",
118
+ "median": "Median",
119
+ "sd": "Standard Deviation",
120
+ "iqr": "Interquartile Range",
121
+ "total": "Total",
122
+ "outliers": "Outliers",
123
+ "values": "Values",
124
+ "lowerBounds": "Lower Bounds",
125
+ "upperBounds": "Upper Bounds"
126
+ }
127
+ },
128
+ "topAxis": {
129
+ "hasLine": false
130
+ },
131
+ "isLegendValue": false,
132
+ "barThickness": "0.6",
133
+ "barHeight": 25,
134
+ "barSpace": 15,
135
+ "heights": {
136
+ "vertical": 300,
137
+ "horizontal": 240
138
+ },
139
+ "xAxis": {
140
+ "anchors": [],
141
+ "type": "categorical",
142
+ "showTargetLabel": true,
143
+ "targetLabel": "Target",
144
+ "hideAxis": false,
145
+ "hideLabel": false,
146
+ "hideTicks": false,
147
+ "size": "59",
148
+ "tickRotation": 0,
149
+ "min": "",
150
+ "max": "",
151
+ "labelColor": "#333",
152
+ "tickLabelColor": "#333",
153
+ "tickColor": "#333",
154
+ "numTicks": "",
155
+ "labelOffset": 65,
156
+ "axisPadding": 0,
157
+ "target": 0,
158
+ "dataKey": "Date",
159
+ "label": "X Axis Example Label"
160
+ },
161
+ "table": {
162
+ "label": "Data Type by Date",
163
+ "expanded": true,
164
+ "limitHeight": false,
165
+ "height": "",
166
+ "caption": "",
167
+ "showDownloadUrl": false,
168
+ "showDataTableLink": true,
169
+ "indexLabel": "",
170
+ "showVertical": false,
171
+ "show": true
172
+ },
173
+ "orientation": "horizontal",
174
+ "color": "pinkpurple",
175
+ "columns": {},
176
+ "legend": {
177
+ "behavior": "isolate",
178
+ "singleRow": false,
179
+ "colorCode": "Data 6",
180
+ "reverseLabelOrder": false,
181
+ "description": "",
182
+ "dynamicLegend": false,
183
+ "dynamicLegendDefaultText": "Show All",
184
+ "dynamicLegendItemLimit": 5,
185
+ "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
186
+ "dynamicLegendChartMessage": "Select Options from the Legend",
187
+ "position": "right",
188
+ "label": "Type of Data"
189
+ },
190
+ "exclusions": {
191
+ "active": false,
192
+ "keys": []
193
+ },
194
+ "palette": "qualitative-bold",
195
+ "isPaletteReversed": false,
196
+ "twoColor": {
197
+ "palette": "monochrome-1",
198
+ "isPaletteReversed": false
199
+ },
200
+ "labels": false,
201
+ "dataFormat": {
202
+ "commas": false,
203
+ "prefix": "",
204
+ "suffix": "",
205
+ "abbreviated": false,
206
+ "bottomSuffix": "",
207
+ "bottomPrefix": "",
208
+ "bottomAbbreviated": false
209
+ },
210
+ "confidenceKeys": {},
211
+ "visual": {
212
+ "border": true,
213
+ "accent": true,
214
+ "background": true
215
+ },
216
+ "useLogScale": false,
217
+ "filterBehavior": "Filter Change",
218
+ "highlightedBarValues": [],
219
+ "series": [
220
+ {
221
+ "dataKey": "Data 1",
222
+ "type": "Bar"
223
+ }
224
+ ],
225
+ "height": 300,
226
+ "data": [
227
+ {
228
+ "Date": "1/15/2016",
229
+ "Data 1": "90",
230
+ "Data 2": "135",
231
+ "Data 3": "300",
232
+ "Data 4": "95",
233
+ "Data 5": "120",
234
+ "Data 6": "Bad"
235
+ },
236
+ {
237
+ "Date": "2/15/2016",
238
+ "Data 1": "40",
239
+ "Data 2": "90",
240
+ "Data 3": "240",
241
+ "Data 4": "60",
242
+ "Data 5": "160",
243
+ "Data 6": "Good"
244
+ },
245
+ {
246
+ "Date": "3/15/2016",
247
+ "Data 1": "50",
248
+ "Data 2": "300",
249
+ "Data 3": "290",
250
+ "Data 4": "100",
251
+ "Data 5": "200",
252
+ "Data 6": "Good"
253
+ },
254
+ {
255
+ "Date": "4/15/2016",
256
+ "Data 1": "120",
257
+ "Data 2": "160",
258
+ "Data 3": "230",
259
+ "Data 4": "180",
260
+ "Data 5": "160",
261
+ "Data 6": "Good"
262
+ },
263
+ {
264
+ "Date": "5/15/2016",
265
+ "Data 1": "80",
266
+ "Data 2": "350",
267
+ "Data 3": "300",
268
+ "Data 4": "150",
269
+ "Data 5": "130",
270
+ "Data 6": "Good"
271
+ },
272
+ {
273
+ "Date": "6/15/2016",
274
+ "Data 1": "80",
275
+ "Data 2": "220",
276
+ "Data 3": "320",
277
+ "Data 4": "100",
278
+ "Data 5": "220",
279
+ "Data 6": "ABC"
280
+ }
281
+ ],
282
+ "visualizationType": "Bar",
283
+ "description": "This example shows a bar chart created in the visualization editor in WCMS",
284
+ "dataCutoff": "0",
285
+ "runtime": {
286
+ "seriesLabels": {
287
+ "Data 1": "Data 1"
288
+ },
289
+ "seriesLabelsAll": [
290
+ "Data 1"
291
+ ],
292
+ "originalXAxis": {
293
+ "anchors": [],
294
+ "type": "categorical",
295
+ "showTargetLabel": true,
296
+ "targetLabel": "Target",
297
+ "hideAxis": false,
298
+ "hideLabel": false,
299
+ "hideTicks": false,
300
+ "size": "59",
301
+ "tickRotation": 0,
302
+ "min": "",
303
+ "max": "",
304
+ "labelColor": "#333",
305
+ "tickLabelColor": "#333",
306
+ "tickColor": "#333",
307
+ "numTicks": "",
308
+ "labelOffset": 65,
309
+ "axisPadding": 0,
310
+ "target": 0,
311
+ "dataKey": "Date",
312
+ "label": "X Axis Example Label"
313
+ },
314
+ "seriesKeys": [
315
+ "Data 1"
316
+ ],
317
+ "xAxis": {
318
+ "hideAxis": false,
319
+ "displayNumbersOnBar": false,
320
+ "hideLabel": false,
321
+ "hideTicks": false,
322
+ "size": "76",
323
+ "gridLines": false,
324
+ "enablePadding": false,
325
+ "min": "",
326
+ "max": "",
327
+ "labelColor": "#333",
328
+ "tickLabelColor": "#333",
329
+ "tickColor": "#333",
330
+ "rightHideAxis": true,
331
+ "rightAxisSize": 50,
332
+ "rightLabel": "",
333
+ "rightLabelOffsetSize": 0,
334
+ "rightAxisLabelColor": "#333",
335
+ "rightAxisTickLabelColor": "#333",
336
+ "rightAxisTickColor": "#333",
337
+ "numTicks": "",
338
+ "axisPadding": 0,
339
+ "tickRotation": 0,
340
+ "anchors": [],
341
+ "label": "Y Axis Example Label"
342
+ },
343
+ "yAxis": {
344
+ "anchors": [],
345
+ "type": "categorical",
346
+ "showTargetLabel": true,
347
+ "targetLabel": "Target",
348
+ "hideAxis": false,
349
+ "hideLabel": false,
350
+ "hideTicks": false,
351
+ "size": "59",
352
+ "tickRotation": 0,
353
+ "min": "",
354
+ "max": "",
355
+ "labelColor": "#333",
356
+ "tickLabelColor": "#333",
357
+ "tickColor": "#333",
358
+ "numTicks": "",
359
+ "labelOffset": 65,
360
+ "axisPadding": 0,
361
+ "target": 0,
362
+ "dataKey": "Date",
363
+ "label": "X Axis Example Label"
364
+ },
365
+ "horizontal": true,
366
+ "uniqueId": 1684423946652,
367
+ "editorErrorMessage": ""
368
+ },
369
+ "labelPlacement": "Below Bar"
370
+ },
371
+ "boxplot": {
372
+ "plots": [],
373
+ "borders": "true",
374
+ "firstQuartilePercentage": 25,
375
+ "thirdQuartilePercentage": 75,
376
+ "boxWidthPercentage": 40,
377
+ "plotOutlierValues": false,
378
+ "plotNonOutlierValues": true,
379
+ "legend": {
380
+ "showHowToReadText": false,
381
+ "howToReadText": ""
382
+ },
383
+ "labels": {
384
+ "q1": "Lower Quartile",
385
+ "q2": "q2",
386
+ "q3": "Upper Quartile",
387
+ "q4": "q4",
388
+ "minimum": "Minimum",
389
+ "maximum": "Maximum",
390
+ "mean": "Mean",
391
+ "median": "Median",
392
+ "sd": "Standard Deviation",
393
+ "iqr": "Interquartile Range",
394
+ "total": "Total",
395
+ "outliers": "Outliers",
396
+ "values": "Values",
397
+ "lowerBounds": "Lower Bounds",
398
+ "upperBounds": "Upper Bounds"
399
+ }
400
+ },
401
+ "topAxis": {
402
+ "hasLine": false
403
+ },
404
+ "isLegendValue": false,
9
405
  "barThickness": "0.6",
10
- "xAxis": { "size": "59", "tickRotation": 0, "dataKey": "Date", "label": "X Axis Example Label" },
11
- "table": { "label": "Data Type by Date", "expanded": true },
12
- "legend": { "behavior": "isolate", "position": "right", "label": "Type of Data" },
406
+ "barHeight": 25,
407
+ "barSpace": 15,
408
+ "heights": {
409
+ "vertical": 300,
410
+ "horizontal": 369.59999999999997
411
+ },
412
+ "xAxis": {
413
+ "anchors": [],
414
+ "type": "categorical",
415
+ "showTargetLabel": true,
416
+ "targetLabel": "Target",
417
+ "hideAxis": false,
418
+ "hideLabel": false,
419
+ "hideTicks": false,
420
+ "size": "59",
421
+ "tickRotation": 0,
422
+ "min": "",
423
+ "max": "",
424
+ "labelColor": "#333",
425
+ "tickLabelColor": "#333",
426
+ "tickColor": "#333",
427
+ "numTicks": "",
428
+ "labelOffset": 65,
429
+ "axisPadding": 0,
430
+ "target": 0,
431
+ "dataKey": "Date",
432
+ "label": "X Axis Example Label"
433
+ },
434
+ "table": {
435
+ "label": "Data Type by Date",
436
+ "expanded": true,
437
+ "limitHeight": false,
438
+ "height": "",
439
+ "caption": "",
440
+ "showDownloadUrl": false,
441
+ "showDataTableLink": true,
442
+ "indexLabel": "",
443
+ "showVertical": false,
444
+ "show": true
445
+ },
446
+ "orientation": "horizontal",
447
+ "color": "pinkpurple",
448
+ "columns": {},
449
+ "legend": {
450
+ "behavior": "isolate",
451
+ "singleRow": false,
452
+ "colorCode": "Data 6",
453
+ "reverseLabelOrder": false,
454
+ "description": "",
455
+ "dynamicLegend": false,
456
+ "dynamicLegendDefaultText": "Show All",
457
+ "dynamicLegendItemLimit": 5,
458
+ "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
459
+ "dynamicLegendChartMessage": "Select Options from the Legend",
460
+ "position": "right",
461
+ "label": "Type of Data"
462
+ },
463
+ "exclusions": {
464
+ "active": false,
465
+ "keys": []
466
+ },
13
467
  "palette": "qualitative-bold",
468
+ "isPaletteReversed": false,
469
+ "twoColor": {
470
+ "palette": "monochrome-1",
471
+ "isPaletteReversed": false
472
+ },
14
473
  "labels": false,
15
- "dataFormat": { "suffix": " units" },
474
+ "dataFormat": {
475
+ "commas": false,
476
+ "prefix": "",
477
+ "suffix": " units",
478
+ "abbreviated": false,
479
+ "bottomSuffix": "",
480
+ "bottomPrefix": "",
481
+ "bottomAbbreviated": false
482
+ },
16
483
  "confidenceKeys": {},
484
+ "visual": {
485
+ "border": true,
486
+ "accent": true,
487
+ "background": true
488
+ },
489
+ "useLogScale": false,
490
+ "filterBehavior": "Filter Change",
491
+ "highlightedBarValues": [],
492
+ "series": [
493
+ {
494
+ "dataKey": "Data 1",
495
+ "type": "Bar"
496
+ }
497
+ ],
498
+ "height": 300,
17
499
  "data": [
18
- { "Date": "1/15/2016", "Data 1": "90", "Data 2": "135", "Data 3": "300", "Data 4": "95", "Data 5": "120", "Data 6": "310" },
19
- { "Date": "2/15/2016", "Data 1": "40", "Data 2": "90", "Data 3": "240", "Data 4": "60", "Data 5": "160", "Data 6": "200" },
20
- { "Date": "3/15/2016", "Data 1": "50", "Data 2": "300", "Data 3": "290", "Data 4": "100", "Data 5": "200", "Data 6": "250" },
21
- { "Date": "4/15/2016", "Data 1": "120", "Data 2": "160", "Data 3": "230", "Data 4": "180", "Data 5": "160", "Data 6": "220" },
22
- { "Date": "5/15/2016", "Data 1": "80", "Data 2": "350", "Data 3": "300", "Data 4": "150", "Data 5": "130", "Data 6": "100" },
23
- { "Date": "6/15/2016", "Data 1": "90", "Data 2": "220", "Data 3": "320", "Data 4": "100", "Data 5": "220", "Data 6": "300" }
500
+ {
501
+ "Date": "1/15/2016",
502
+ "Data 1": "90",
503
+ "Data 2": "135",
504
+ "Data 3": "300",
505
+ "Data 4": "95",
506
+ "Data 5": "120",
507
+ "Data 6": "Bad"
508
+ },
509
+ {
510
+ "Date": "2/15/2016",
511
+ "Data 1": "40",
512
+ "Data 2": "90",
513
+ "Data 3": "240",
514
+ "Data 4": "60",
515
+ "Data 5": "160",
516
+ "Data 6": "Good"
517
+ },
518
+ {
519
+ "Date": "3/15/2016",
520
+ "Data 1": "50",
521
+ "Data 2": "300",
522
+ "Data 3": "290",
523
+ "Data 4": "100",
524
+ "Data 5": "200",
525
+ "Data 6": "Good"
526
+ },
527
+ {
528
+ "Date": "4/15/2016",
529
+ "Data 1": "120",
530
+ "Data 2": "160",
531
+ "Data 3": "230",
532
+ "Data 4": "180",
533
+ "Data 5": "160",
534
+ "Data 6": "Good"
535
+ },
536
+ {
537
+ "Date": "5/15/2016",
538
+ "Data 1": "80",
539
+ "Data 2": "350",
540
+ "Data 3": "300",
541
+ "Data 4": "150",
542
+ "Data 5": "130",
543
+ "Data 6": "Good"
544
+ },
545
+ {
546
+ "Date": "6/15/2016",
547
+ "Data 1": "80",
548
+ "Data 2": "220",
549
+ "Data 3": "320",
550
+ "Data 4": "100",
551
+ "Data 5": "220",
552
+ "Data 6": "ABC"
553
+ }
24
554
  ],
25
555
  "visualizationType": "Bar",
26
- "series": [
27
- { "dataKey": "Data 1", "type": "Bar" },
28
- { "dataKey": "Data 2", "type": "Bar" },
29
- { "dataKey": "Data 3", "type": "Bar" },
30
- { "dataKey": "Data 4", "type": "Bar" },
31
- { "dataKey": "Data 5", "type": "Bar" },
32
- { "dataKey": "Data 6", "type": "Bar" }
33
- ],
34
556
  "description": "This example shows a bar chart created in the visualization editor in WCMS",
35
557
  "dataCutoff": "0"
36
- }
558
+ }