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