@cdc/chart 4.24.5 → 4.24.7

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 (68) hide show
  1. package/dist/cdcchart.js +39128 -35959
  2. package/examples/feature/annotations/index.json +542 -0
  3. package/examples/xaxis.json +493 -0
  4. package/index.html +5 -4
  5. package/package.json +5 -4
  6. package/src/CdcChart.tsx +104 -64
  7. package/src/_stories/Chart.stories.tsx +18 -171
  8. package/src/_stories/ChartAnnotation.stories.tsx +32 -0
  9. package/src/_stories/_mock/annotation_category_mock.json +473 -0
  10. package/src/_stories/_mock/annotation_date-linear_mock.json +530 -0
  11. package/src/_stories/_mock/annotation_date-time_mock.json +530 -0
  12. package/src/_stories/_mock/line_chart_two_points_new_chart.json +128 -0
  13. package/src/_stories/_mock/line_chart_two_points_regression_test.json +127 -0
  14. package/src/_stories/_mock/lollipop.json +171 -0
  15. package/src/components/Annotations/components/AnnotationDraggable.styles.css +31 -0
  16. package/src/components/Annotations/components/AnnotationDraggable.tsx +154 -0
  17. package/src/components/Annotations/components/AnnotationDropdown.styles.css +14 -0
  18. package/src/components/Annotations/components/AnnotationDropdown.tsx +72 -0
  19. package/src/components/Annotations/components/AnnotationList.styles.css +45 -0
  20. package/src/components/Annotations/components/AnnotationList.tsx +42 -0
  21. package/src/components/Annotations/components/findNearestDatum.ts +138 -0
  22. package/src/components/Annotations/components/helpers/index.tsx +46 -0
  23. package/src/components/Annotations/index.tsx +13 -0
  24. package/src/components/AreaChart/components/AreaChart.Stacked.jsx +1 -1
  25. package/src/components/AreaChart/components/AreaChart.jsx +1 -1
  26. package/src/components/BarChart/components/BarChart.Horizontal.tsx +44 -42
  27. package/src/components/BarChart/components/BarChart.StackedHorizontal.tsx +1 -2
  28. package/src/components/BarChart/components/BarChart.StackedVertical.tsx +11 -11
  29. package/src/components/BarChart/components/BarChart.Vertical.tsx +50 -22
  30. package/src/components/BarChart/helpers/index.ts +102 -0
  31. package/src/components/EditorPanel/EditorPanel.tsx +232 -98
  32. package/src/components/EditorPanel/components/Panels/Panel.Annotate.tsx +306 -0
  33. package/src/components/EditorPanel/components/Panels/Panel.General.tsx +117 -6
  34. package/src/components/EditorPanel/components/Panels/Panel.Sankey.tsx +2 -3
  35. package/src/components/EditorPanel/components/Panels/Panel.Visual.tsx +3 -2
  36. package/src/components/EditorPanel/components/Panels/index.tsx +3 -1
  37. package/src/components/EditorPanel/components/panels.scss +4 -0
  38. package/src/components/EditorPanel/editor-panel.scss +19 -0
  39. package/src/components/EditorPanel/useEditorPermissions.js +19 -2
  40. package/src/components/Legend/Legend.Component.tsx +7 -8
  41. package/src/components/Legend/helpers/createFormatLabels.tsx +1 -1
  42. package/src/components/Legend/helpers/index.ts +5 -0
  43. package/src/components/LineChart/LineChartProps.ts +3 -0
  44. package/src/components/LineChart/helpers.ts +21 -7
  45. package/src/components/LineChart/index.tsx +7 -7
  46. package/src/components/LinearChart.jsx +179 -136
  47. package/src/components/PairedBarChart.jsx +9 -9
  48. package/src/components/PieChart/PieChart.tsx +4 -4
  49. package/src/components/Sankey/index.tsx +73 -20
  50. package/src/components/ScatterPlot/ScatterPlot.jsx +22 -8
  51. package/src/components/ZoomBrush.tsx +90 -44
  52. package/src/data/initial-state.js +14 -6
  53. package/src/helpers/handleChartTabbing.ts +8 -0
  54. package/src/helpers/isConvertLineToBarGraph.ts +4 -0
  55. package/src/hooks/{useBarChart.js → useBarChart.ts} +2 -40
  56. package/src/hooks/useColorScale.ts +1 -1
  57. package/src/hooks/useMinMax.ts +8 -3
  58. package/src/hooks/useScales.ts +25 -3
  59. package/src/hooks/useTooltip.tsx +58 -11
  60. package/src/scss/main.scss +21 -14
  61. package/src/types/ChartConfig.ts +50 -3
  62. package/src/types/ChartContext.ts +9 -0
  63. package/tests-examples/helpers/testZeroValue.test.ts +30 -0
  64. package/LICENSE +0 -201
  65. package/src/helpers/filterData.ts +0 -18
  66. package/src/helpers/tests/computeMarginBottom.test.ts +0 -21
  67. /package/src/hooks/{useLegendClasses.js → useLegendClasses.ts} +0 -0
  68. /package/src/hooks/{useReduceData.js → useReduceData.ts} +0 -0
@@ -0,0 +1,542 @@
1
+ {
2
+ "annotations": [
3
+ {
4
+ "text": "New Annotation",
5
+ "snapToNearestPoint": false,
6
+ "fontSize": 16,
7
+ "bezier": 10,
8
+ "show": {
9
+ "desktop": true,
10
+ "tablet": true,
11
+ "mobile": true
12
+ },
13
+ "markerType": "arrow",
14
+ "connectorType": "line",
15
+ "colors": {
16
+ "label": "black",
17
+ "connector": "black",
18
+ "marker": "black"
19
+ },
20
+ "selected": true,
21
+ "anchor": {
22
+ "vertical": false,
23
+ "horizontal": false
24
+ },
25
+ "marker": "arrow",
26
+ "edit": {
27
+ "subject": true,
28
+ "label": true
29
+ },
30
+ "seriesKey": "",
31
+ "x": 50,
32
+ "y": 186.7265625,
33
+ "xKey": 1458025200000,
34
+ "dx": -46,
35
+ "dy": -50,
36
+ "opacity": "100",
37
+ "savedDimensions": [
38
+ 498.59,
39
+ 560.1875
40
+ ],
41
+ "connectionType": "line",
42
+ "originalX": 295.8788908060575,
43
+ "originalDX": -46,
44
+ "originalY": 186.7265625
45
+ }
46
+ ],
47
+ "type": "chart",
48
+ "debugSvg": false,
49
+ "chartMessage": {
50
+ "noData": "No Data Available"
51
+ },
52
+ "title": "Example Line Chart with Region",
53
+ "showTitle": true,
54
+ "showDownloadMediaButton": false,
55
+ "theme": "theme-cyan",
56
+ "animate": false,
57
+ "fontSize": "medium",
58
+ "lineDatapointStyle": "hover",
59
+ "lineDatapointColor": "Same as Line",
60
+ "barHasBorder": "false",
61
+ "isLollipopChart": false,
62
+ "lollipopShape": "circle",
63
+ "lollipopColorStyle": "two-tone",
64
+ "visualizationSubType": "regular",
65
+ "barStyle": "",
66
+ "roundingStyle": "standard",
67
+ "tipRounding": "top",
68
+ "isResponsiveTicks": false,
69
+ "general": {
70
+ "annotationDropdownText": "Annotations",
71
+ "showDownloadButton": false,
72
+ "showMissingDataLabel": true,
73
+ "showSuppressedSymbol": true,
74
+ "showZeroValueDataLabel": true
75
+ },
76
+ "padding": {
77
+ "left": 5,
78
+ "right": 5
79
+ },
80
+ "preliminaryData": [],
81
+ "yAxis": {
82
+ "hideAxis": false,
83
+ "displayNumbersOnBar": false,
84
+ "hideLabel": false,
85
+ "hideTicks": false,
86
+ "size": "75",
87
+ "gridLines": false,
88
+ "enablePadding": false,
89
+ "min": "",
90
+ "max": "",
91
+ "labelColor": "#333",
92
+ "tickLabelColor": "#333",
93
+ "tickColor": "#333",
94
+ "rightHideAxis": true,
95
+ "rightAxisSize": 50,
96
+ "rightLabel": "",
97
+ "rightLabelOffsetSize": 0,
98
+ "rightAxisLabelColor": "#333",
99
+ "rightAxisTickLabelColor": "#333",
100
+ "rightAxisTickColor": "#333",
101
+ "numTicks": "9",
102
+ "axisPadding": 0,
103
+ "scalePadding": 10,
104
+ "tickRotation": 0,
105
+ "anchors": [],
106
+ "shoMissingDataLabel": true,
107
+ "showMissingDataLine": true,
108
+ "label": "Y-Axis Example Label"
109
+ },
110
+ "boxplot": {
111
+ "plots": [],
112
+ "borders": "true",
113
+ "firstQuartilePercentage": 25,
114
+ "thirdQuartilePercentage": 75,
115
+ "boxWidthPercentage": 40,
116
+ "plotOutlierValues": false,
117
+ "plotNonOutlierValues": true,
118
+ "legend": {
119
+ "showHowToReadText": false,
120
+ "howToReadText": ""
121
+ },
122
+ "labels": {
123
+ "q1": "Lower Quartile",
124
+ "q2": "q2",
125
+ "q3": "Upper Quartile",
126
+ "q4": "q4",
127
+ "minimum": "Minimum",
128
+ "maximum": "Maximum",
129
+ "mean": "Mean",
130
+ "median": "Median",
131
+ "sd": "Standard Deviation",
132
+ "iqr": "Interquartile Range",
133
+ "total": "Total",
134
+ "outliers": "Outliers",
135
+ "values": "Values",
136
+ "lowerBounds": "Lower Bounds",
137
+ "upperBounds": "Upper Bounds"
138
+ }
139
+ },
140
+ "topAxis": {
141
+ "hasLine": false
142
+ },
143
+ "isLegendValue": false,
144
+ "barThickness": 0.35,
145
+ "barHeight": 25,
146
+ "barSpace": 15,
147
+ "heights": {
148
+ "vertical": 300,
149
+ "horizontal": 750
150
+ },
151
+ "xAxis": {
152
+ "sortDates": false,
153
+ "anchors": [],
154
+ "type": "date",
155
+ "showTargetLabel": true,
156
+ "targetLabel": "Target",
157
+ "hideAxis": false,
158
+ "hideLabel": false,
159
+ "hideTicks": false,
160
+ "size": "77",
161
+ "tickRotation": "25",
162
+ "min": "",
163
+ "max": "",
164
+ "labelColor": "#333",
165
+ "tickLabelColor": "#333",
166
+ "tickColor": "#333",
167
+ "numTicks": "",
168
+ "labelOffset": 65,
169
+ "axisPadding": 0,
170
+ "target": 0,
171
+ "maxTickRotation": 0,
172
+ "dataKey": "Date",
173
+ "label": "X-Axis Example Label",
174
+ "dateParseFormat": "%m/%d/%Y",
175
+ "dateDisplayFormat": "%m/%d/%Y",
176
+ "tickWidthMax": 91,
177
+ "padding": 6
178
+ },
179
+ "table": {
180
+ "label": "Data Table",
181
+ "expanded": false,
182
+ "limitHeight": false,
183
+ "height": "",
184
+ "caption": "",
185
+ "showDownloadUrl": false,
186
+ "showDataTableLink": true,
187
+ "indexLabel": "Data Group",
188
+ "download": true,
189
+ "showVertical": false,
190
+ "dateDisplayFormat": "",
191
+ "showMissingDataLabel": true,
192
+ "showSuppressedSymbol": true,
193
+ "show": true
194
+ },
195
+ "orientation": "vertical",
196
+ "color": "pinkpurple",
197
+ "columns": {},
198
+ "legend": {
199
+ "hide": false,
200
+ "behavior": "isolate",
201
+ "axisAlign": true,
202
+ "singleRow": false,
203
+ "colorCode": "",
204
+ "reverseLabelOrder": false,
205
+ "description": "",
206
+ "dynamicLegend": false,
207
+ "dynamicLegendDefaultText": "Show All",
208
+ "dynamicLegendItemLimit": 5,
209
+ "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
210
+ "dynamicLegendChartMessage": "Select Options from the Legend",
211
+ "lineMode": false,
212
+ "verticalSorted": false,
213
+ "highlightOnHover": false,
214
+ "hideSuppressedLabels": false,
215
+ "seriesHighlight": [],
216
+ "position": "right",
217
+ "label": "Type of Data"
218
+ },
219
+ "brush": {
220
+ "height": 25,
221
+ "active": false,
222
+ "data": [
223
+ {
224
+ "Date": "1/15/2016",
225
+ "Data 1": "90",
226
+ "Data 2": "135",
227
+ "Data 3": "300",
228
+ "Data 4": "95",
229
+ "Data 5": "120",
230
+ "Data 6": "310"
231
+ },
232
+ {
233
+ "Date": "2/15/2016",
234
+ "Data 1": "40",
235
+ "Data 2": "90",
236
+ "Data 3": "240",
237
+ "Data 4": "60",
238
+ "Data 5": "160",
239
+ "Data 6": "200"
240
+ },
241
+ {
242
+ "Date": "3/15/2016",
243
+ "Data 1": "50",
244
+ "Data 2": "300",
245
+ "Data 3": "290",
246
+ "Data 4": "100",
247
+ "Data 5": "200",
248
+ "Data 6": "250"
249
+ },
250
+ {
251
+ "Date": "4/15/2016",
252
+ "Data 1": "120",
253
+ "Data 2": "160",
254
+ "Data 3": "230",
255
+ "Data 4": "180",
256
+ "Data 5": "160",
257
+ "Data 6": "220"
258
+ },
259
+ {
260
+ "Date": "5/15/2016",
261
+ "Data 1": "80",
262
+ "Data 2": "350",
263
+ "Data 3": "300",
264
+ "Data 4": "150",
265
+ "Data 5": "130",
266
+ "Data 6": "100"
267
+ },
268
+ {
269
+ "Date": "6/15/2016",
270
+ "Data 1": "90",
271
+ "Data 2": "220",
272
+ "Data 3": "320",
273
+ "Data 4": "100",
274
+ "Data 5": "220",
275
+ "Data 6": "300"
276
+ }
277
+ ],
278
+ "pattern_id": "brush_pattern",
279
+ "accent_color": "#ddd"
280
+ },
281
+ "exclusions": {
282
+ "active": false,
283
+ "keys": []
284
+ },
285
+ "palette": "qualitative-bold",
286
+ "isPaletteReversed": false,
287
+ "twoColor": {
288
+ "palette": "monochrome-1",
289
+ "isPaletteReversed": false
290
+ },
291
+ "labels": false,
292
+ "dataFormat": {
293
+ "commas": false,
294
+ "prefix": "",
295
+ "suffix": "",
296
+ "abbreviated": false,
297
+ "bottomSuffix": "",
298
+ "bottomPrefix": "",
299
+ "bottomAbbreviated": false
300
+ },
301
+ "confidenceKeys": {},
302
+ "visual": {
303
+ "border": true,
304
+ "accent": true,
305
+ "background": true,
306
+ "verticalHoverLine": false,
307
+ "horizontalHoverLine": false
308
+ },
309
+ "useLogScale": false,
310
+ "filterBehavior": "Filter Change",
311
+ "highlightedBarValues": [],
312
+ "series": [
313
+ {
314
+ "dataKey": "Data 1",
315
+ "type": "Bar",
316
+ "tooltip": true,
317
+ "axis": "Left"
318
+ }
319
+ ],
320
+ "tooltips": {
321
+ "opacity": 90,
322
+ "singleSeries": false,
323
+ "dateDisplayFormat": ""
324
+ },
325
+ "forestPlot": {
326
+ "startAt": 0,
327
+ "colors": {
328
+ "line": "",
329
+ "shape": ""
330
+ },
331
+ "lineOfNoEffect": {
332
+ "show": true
333
+ },
334
+ "type": "",
335
+ "pooledResult": {
336
+ "diamondHeight": 5,
337
+ "column": ""
338
+ },
339
+ "estimateField": "",
340
+ "estimateRadius": "",
341
+ "shape": "",
342
+ "rowHeight": 20,
343
+ "description": {
344
+ "show": true,
345
+ "text": "description",
346
+ "location": 0
347
+ },
348
+ "result": {
349
+ "show": true,
350
+ "text": "result",
351
+ "location": 100
352
+ },
353
+ "radius": {
354
+ "min": 1,
355
+ "max": 8,
356
+ "scalingColumn": ""
357
+ },
358
+ "regression": {
359
+ "lower": 0,
360
+ "upper": 0,
361
+ "estimateField": 0
362
+ },
363
+ "leftWidthOffset": 0,
364
+ "rightWidthOffset": 0,
365
+ "showZeroLine": false,
366
+ "leftLabel": "",
367
+ "rightLabel": "",
368
+ "hideDateCategoryCol": false,
369
+ "width": "auto",
370
+ "lowerCiField": "",
371
+ "upperCiField": ""
372
+ },
373
+ "area": {
374
+ "isStacked": false
375
+ },
376
+ "sankey": {
377
+ "title": {
378
+ "defaultColor": "black"
379
+ },
380
+ "iterations": 1,
381
+ "rxValue": 0.9,
382
+ "overallSize": {
383
+ "width": 900,
384
+ "height": 700
385
+ },
386
+ "margin": {
387
+ "margin_y": 25,
388
+ "margin_x": 0
389
+ },
390
+ "nodeSize": {
391
+ "nodeWidth": 26,
392
+ "nodeHeight": 40
393
+ },
394
+ "nodePadding": 55,
395
+ "nodeFontColor": "black",
396
+ "nodeColor": {
397
+ "default": "#ff8500",
398
+ "inactive": "#808080"
399
+ },
400
+ "linkColor": {
401
+ "default": "#ffc900",
402
+ "inactive": "#D3D3D3"
403
+ },
404
+ "opacity": {
405
+ "nodeOpacityDefault": 1,
406
+ "nodeOpacityInactive": 0.1,
407
+ "LinkOpacityDefault": 1,
408
+ "LinkOpacityInactive": 0.1
409
+ },
410
+ "storyNodeFontColor": "#006778",
411
+ "storyNodeText": [],
412
+ "nodeValueStyle": {
413
+ "textBefore": "(",
414
+ "textAfter": ")"
415
+ },
416
+ "data": []
417
+ },
418
+ "suppressedData": [],
419
+ "showChartBrush": false,
420
+ "height": "375",
421
+ "data": [
422
+ {
423
+ "Date": "1/15/2016",
424
+ "Data 1": "90",
425
+ "Data 2": "135",
426
+ "Data 3": "300",
427
+ "Data 4": "95",
428
+ "Data 5": "120",
429
+ "Data 6": "310"
430
+ },
431
+ {
432
+ "Date": "2/15/2016",
433
+ "Data 1": "40",
434
+ "Data 2": "90",
435
+ "Data 3": "240",
436
+ "Data 4": "60",
437
+ "Data 5": "160",
438
+ "Data 6": "200"
439
+ },
440
+ {
441
+ "Date": "3/15/2016",
442
+ "Data 1": "50",
443
+ "Data 2": "300",
444
+ "Data 3": "290",
445
+ "Data 4": "100",
446
+ "Data 5": "200",
447
+ "Data 6": "250"
448
+ },
449
+ {
450
+ "Date": "4/15/2016",
451
+ "Data 1": "120",
452
+ "Data 2": "160",
453
+ "Data 3": "230",
454
+ "Data 4": "180",
455
+ "Data 5": "160",
456
+ "Data 6": "220"
457
+ },
458
+ {
459
+ "Date": "5/15/2016",
460
+ "Data 1": "80",
461
+ "Data 2": "350",
462
+ "Data 3": "300",
463
+ "Data 4": "150",
464
+ "Data 5": "130",
465
+ "Data 6": "100"
466
+ },
467
+ {
468
+ "Date": "6/15/2016",
469
+ "Data 1": "90",
470
+ "Data 2": "220",
471
+ "Data 3": "320",
472
+ "Data 4": "100",
473
+ "Data 5": "220",
474
+ "Data 6": "300"
475
+ }
476
+ ],
477
+ "visualizationType": "Line",
478
+ "regions": [],
479
+ "validated": "4.24.3",
480
+ "formattedData": [
481
+ {
482
+ "Date": "1/15/2016",
483
+ "Data 1": "90",
484
+ "Data 2": "135",
485
+ "Data 3": "300",
486
+ "Data 4": "95",
487
+ "Data 5": "120",
488
+ "Data 6": "310"
489
+ },
490
+ {
491
+ "Date": "2/15/2016",
492
+ "Data 1": "40",
493
+ "Data 2": "90",
494
+ "Data 3": "240",
495
+ "Data 4": "60",
496
+ "Data 5": "160",
497
+ "Data 6": "200"
498
+ },
499
+ {
500
+ "Date": "3/15/2016",
501
+ "Data 1": "50",
502
+ "Data 2": "300",
503
+ "Data 3": "290",
504
+ "Data 4": "100",
505
+ "Data 5": "200",
506
+ "Data 6": "250"
507
+ },
508
+ {
509
+ "Date": "4/15/2016",
510
+ "Data 1": "120",
511
+ "Data 2": "160",
512
+ "Data 3": "230",
513
+ "Data 4": "180",
514
+ "Data 5": "160",
515
+ "Data 6": "220"
516
+ },
517
+ {
518
+ "Date": "5/15/2016",
519
+ "Data 1": "80",
520
+ "Data 2": "350",
521
+ "Data 3": "300",
522
+ "Data 4": "150",
523
+ "Data 5": "130",
524
+ "Data 6": "100"
525
+ },
526
+ {
527
+ "Date": "6/15/2016",
528
+ "Data 1": "90",
529
+ "Data 2": "220",
530
+ "Data 3": "320",
531
+ "Data 4": "100",
532
+ "Data 5": "220",
533
+ "Data 6": "300"
534
+ }
535
+ ],
536
+ "dataDescription": {
537
+ "horizontal": false,
538
+ "series": false
539
+ },
540
+ "dynamicMarginTop": 0,
541
+ "version": "4.24.4"
542
+ }