@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,473 @@
1
+ {
2
+ "annotations": [
3
+ {
4
+ "text": "New Annotation",
5
+ "snapToNearestPoint": true,
6
+ "fontSize": 16,
7
+ "show": {
8
+ "desktop": true,
9
+ "tablet": true,
10
+ "mobile": true
11
+ },
12
+ "markerType": "arrow",
13
+ "connectorType": "line",
14
+ "colors": {
15
+ "label": "black",
16
+ "connector": "black",
17
+ "marker": "black"
18
+ },
19
+ "selected": true,
20
+ "anchor": {
21
+ "vertical": false,
22
+ "horizontal": false
23
+ },
24
+ "connectionType": "line",
25
+ "marker": "arrow",
26
+ "edit": {
27
+ "subject": true,
28
+ "label": true
29
+ },
30
+ "seriesKey": "Radius",
31
+ "originalX": 235.39284974093266,
32
+ "x": 235.39284974093266,
33
+ "y": 118.7374749498998,
34
+ "xKey": "Neptune",
35
+ "yKey": "3.86",
36
+ "dx": 49,
37
+ "dy": -58,
38
+ "opacity": 100,
39
+ "savedDimensions": [
40
+ 772.34,
41
+ 518.140625
42
+ ]
43
+ }
44
+ ],
45
+ "type": "chart",
46
+ "debugSvg": false,
47
+ "chartMessage": {
48
+ "noData": "No Data Available"
49
+ },
50
+ "title": "Example Area Chart",
51
+ "showTitle": true,
52
+ "showDownloadMediaButton": false,
53
+ "theme": "theme-blue",
54
+ "animate": false,
55
+ "fontSize": "medium",
56
+ "lineDatapointStyle": "hover",
57
+ "lineDatapointColor": "Same as Line",
58
+ "barHasBorder": "false",
59
+ "isLollipopChart": false,
60
+ "lollipopShape": "circle",
61
+ "lollipopColorStyle": "two-tone",
62
+ "visualizationSubType": "regular",
63
+ "barStyle": "",
64
+ "roundingStyle": "standard",
65
+ "tipRounding": "top",
66
+ "isResponsiveTicks": false,
67
+ "general": {
68
+ "showDownloadButton": false
69
+ },
70
+ "padding": {
71
+ "left": 5,
72
+ "right": 5
73
+ },
74
+ "suppressedData": [],
75
+ "preliminaryData": [],
76
+ "yAxis": {
77
+ "hideAxis": false,
78
+ "displayNumbersOnBar": false,
79
+ "hideLabel": false,
80
+ "hideTicks": false,
81
+ "size": "150",
82
+ "gridLines": false,
83
+ "enablePadding": false,
84
+ "min": "",
85
+ "max": "",
86
+ "labelColor": "#333",
87
+ "tickLabelColor": "#333",
88
+ "tickColor": "#333",
89
+ "rightHideAxis": true,
90
+ "rightAxisSize": 0,
91
+ "rightLabel": "",
92
+ "rightLabelOffsetSize": 0,
93
+ "rightAxisLabelColor": "#333",
94
+ "rightAxisTickLabelColor": "#333",
95
+ "rightAxisTickColor": "#333",
96
+ "numTicks": "",
97
+ "axisPadding": 0,
98
+ "scalePadding": 10,
99
+ "tickRotation": 0,
100
+ "anchors": [],
101
+ "isLegendValue": false,
102
+ "label": "Y Axis Example Label"
103
+ },
104
+ "boxplot": {
105
+ "plots": [],
106
+ "borders": "true",
107
+ "firstQuartilePercentage": 25,
108
+ "thirdQuartilePercentage": 75,
109
+ "boxWidthPercentage": 40,
110
+ "plotOutlierValues": false,
111
+ "plotNonOutlierValues": true,
112
+ "legend": {
113
+ "showHowToReadText": false,
114
+ "howToReadText": ""
115
+ },
116
+ "labels": {
117
+ "q1": "Lower Quartile",
118
+ "q2": "q2",
119
+ "q3": "Upper Quartile",
120
+ "q4": "q4",
121
+ "minimum": "Minimum",
122
+ "maximum": "Maximum",
123
+ "mean": "Mean",
124
+ "median": "Median",
125
+ "sd": "Standard Deviation",
126
+ "iqr": "Interquartile Range",
127
+ "total": "Total",
128
+ "outliers": "Outliers",
129
+ "values": "Values",
130
+ "lowerBounds": "Lower Bounds",
131
+ "upperBounds": "Upper Bounds"
132
+ }
133
+ },
134
+ "topAxis": {
135
+ "hasLine": false
136
+ },
137
+ "isLegendValue": false,
138
+ "barThickness": 0.35,
139
+ "barHeight": 25,
140
+ "barSpace": 20,
141
+ "heights": {
142
+ "vertical": 300,
143
+ "horizontal": 750
144
+ },
145
+ "xAxis": {
146
+ "sortDates": false,
147
+ "anchors": [],
148
+ "type": "categorical",
149
+ "showTargetLabel": true,
150
+ "targetLabel": "Target",
151
+ "hideAxis": false,
152
+ "hideLabel": false,
153
+ "hideTicks": false,
154
+ "size": "50",
155
+ "tickRotation": 0,
156
+ "min": "",
157
+ "max": "",
158
+ "labelColor": "#333",
159
+ "tickLabelColor": "#333",
160
+ "tickColor": "#333",
161
+ "numTicks": "9",
162
+ "labelOffset": 65,
163
+ "axisPadding": 0,
164
+ "target": 0,
165
+ "maxTickRotation": 0,
166
+ "isLegendValue": false,
167
+ "dataKey": "name",
168
+ "label": "X Axis Example Label",
169
+ "dateParseFormat": "%m/%d/%Y",
170
+ "dateDisplayFormat": "%m/%d/%Y",
171
+ "tickWidthMax": 69
172
+ },
173
+ "table": {
174
+ "label": "Data Type by Category Name",
175
+ "expanded": false,
176
+ "limitHeight": false,
177
+ "height": "",
178
+ "caption": "",
179
+ "showDownloadUrl": true,
180
+ "showDataTableLink": true,
181
+ "indexLabel": "",
182
+ "download": true,
183
+ "showVertical": false,
184
+ "dateDisplayFormat": "",
185
+ "show": true
186
+ },
187
+ "orientation": "vertical",
188
+ "color": "pinkpurple",
189
+ "columns": {},
190
+ "legend": {
191
+ "hide": false,
192
+ "behavior": "isolate",
193
+ "axisAlign": true,
194
+ "singleRow": false,
195
+ "colorCode": "",
196
+ "reverseLabelOrder": false,
197
+ "description": "",
198
+ "dynamicLegend": false,
199
+ "dynamicLegendDefaultText": "Show All",
200
+ "dynamicLegendItemLimit": 5,
201
+ "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
202
+ "dynamicLegendChartMessage": "Select Options from the Legend",
203
+ "lineMode": false,
204
+ "verticalSorted": false,
205
+ "highlightOnHover": false,
206
+ "seriesHighlight": [],
207
+ "position": "right",
208
+ "label": "Type of Data"
209
+ },
210
+ "brush": {
211
+ "height": 25,
212
+ "data": [],
213
+ "active": false
214
+ },
215
+ "exclusions": {
216
+ "active": true,
217
+ "keys": []
218
+ },
219
+ "palette": "qualitative-bold",
220
+ "isPaletteReversed": false,
221
+ "twoColor": {
222
+ "palette": "monochrome-1",
223
+ "isPaletteReversed": false
224
+ },
225
+ "labels": false,
226
+ "dataFormat": {
227
+ "commas": true,
228
+ "prefix": "",
229
+ "suffix": " units",
230
+ "abbreviated": true,
231
+ "bottomSuffix": "",
232
+ "bottomPrefix": "",
233
+ "bottomAbbreviated": false,
234
+ "useFormat": true
235
+ },
236
+ "confidenceKeys": {},
237
+ "visual": {
238
+ "border": true,
239
+ "accent": true,
240
+ "background": true,
241
+ "verticalHoverLine": false,
242
+ "horizontalHoverLine": false
243
+ },
244
+ "useLogScale": false,
245
+ "filterBehavior": "dropdown",
246
+ "highlightedBarValues": [],
247
+ "series": [
248
+ {
249
+ "dataKey": "Radius",
250
+ "type": "Area Chart",
251
+ "tooltip": true,
252
+ "axis": "Left"
253
+ }
254
+ ],
255
+ "tooltips": {
256
+ "opacity": 90,
257
+ "singleSeries": false,
258
+ "dateDisplayFormat": ""
259
+ },
260
+ "forestPlot": {
261
+ "startAt": 0,
262
+ "colors": {
263
+ "line": "",
264
+ "shape": ""
265
+ },
266
+ "lineOfNoEffect": {
267
+ "show": true
268
+ },
269
+ "type": "",
270
+ "pooledResult": {
271
+ "diamondHeight": 5,
272
+ "column": ""
273
+ },
274
+ "estimateField": "",
275
+ "estimateRadius": "",
276
+ "shape": "square",
277
+ "rowHeight": 20,
278
+ "description": {
279
+ "show": true,
280
+ "text": "description",
281
+ "location": 0
282
+ },
283
+ "result": {
284
+ "show": true,
285
+ "text": "result",
286
+ "location": 100
287
+ },
288
+ "radius": {
289
+ "min": 2,
290
+ "max": 10,
291
+ "scalingColumn": ""
292
+ },
293
+ "regression": {
294
+ "lower": 0,
295
+ "upper": 0,
296
+ "estimateField": 0
297
+ },
298
+ "leftWidthOffset": 0,
299
+ "rightWidthOffset": 0,
300
+ "showZeroLine": false,
301
+ "leftLabel": "",
302
+ "rightLabel": ""
303
+ },
304
+ "area": {
305
+ "isStacked": false
306
+ },
307
+ "sankey": {
308
+ "title": {
309
+ "defaultColor": "black"
310
+ },
311
+ "iterations": 1,
312
+ "rxValue": 0.9,
313
+ "overallSize": {
314
+ "width": 900,
315
+ "height": 700
316
+ },
317
+ "margin": {
318
+ "margin_y": 25,
319
+ "margin_x": 0
320
+ },
321
+ "nodeSize": {
322
+ "nodeWidth": 26,
323
+ "nodeHeight": 40
324
+ },
325
+ "nodePadding": 55,
326
+ "nodeFontColor": "black",
327
+ "nodeColor": {
328
+ "default": "#ff8500",
329
+ "inactive": "#808080"
330
+ },
331
+ "linkColor": {
332
+ "default": "#ffc900",
333
+ "inactive": "#D3D3D3"
334
+ },
335
+ "opacity": {
336
+ "nodeOpacityDefault": 1,
337
+ "nodeOpacityInactive": 0.1,
338
+ "LinkOpacityDefault": 1,
339
+ "LinkOpacityInactive": 0.1
340
+ },
341
+ "storyNodeFontColor": "#006778",
342
+ "storyNodeText": [],
343
+ "nodeValueStyle": {
344
+ "textBefore": "(",
345
+ "textAfter": ")"
346
+ },
347
+ "data": []
348
+ },
349
+ "dataDescription": {
350
+ "horizontal": false,
351
+ "series": false
352
+ },
353
+ "dataFileName": "valid-area-chart.json",
354
+ "dataFileSourceType": "file",
355
+ "formattedData": [
356
+ {
357
+ "name": "Jupiter",
358
+ "Radius": "10.97",
359
+ "Diameter": "25.1",
360
+ "distance": "0"
361
+ },
362
+ {
363
+ "name": "Saturn",
364
+ "Radius": "9.14",
365
+ "Diameter": "18",
366
+ "distance": "0"
367
+ },
368
+ {
369
+ "name": "Uranus",
370
+ "Radius": "-4",
371
+ "Diameter": "-30",
372
+ "distance": "0"
373
+ },
374
+ {
375
+ "name": "Neptune",
376
+ "Radius": "3.86",
377
+ "Diameter": "7",
378
+ "distance": "0"
379
+ },
380
+ {
381
+ "name": "Earth",
382
+ "Radius": "1",
383
+ "Diameter": "2",
384
+ "distance": "0"
385
+ },
386
+ {
387
+ "name": "Venus",
388
+ "Radius": "0.950",
389
+ "Diameter": "2",
390
+ "distance": "0"
391
+ },
392
+ {
393
+ "name": "Mars",
394
+ "Radius": "0.532",
395
+ "Diameter": "1",
396
+ "distance": "0"
397
+ },
398
+ {
399
+ "name": "Mercury",
400
+ "Radius": "0.383",
401
+ "Diameter": "0.7",
402
+ "distance": "0"
403
+ },
404
+ {
405
+ "name": "Pluto",
406
+ "Radius": "0.181",
407
+ "Diameter": "0.3",
408
+ "distance": "0"
409
+ }
410
+ ],
411
+ "height": 300,
412
+ "visualizationType": "Area Chart",
413
+ "description": "This example shows a bar chart created in the visualization editor in WCMS",
414
+ "dataCutoff": "0",
415
+ "data": [
416
+ {
417
+ "name": "Jupiter",
418
+ "Radius": "10.97",
419
+ "Diameter": "25.1",
420
+ "distance": "0"
421
+ },
422
+ {
423
+ "name": "Saturn",
424
+ "Radius": "9.14",
425
+ "Diameter": "18",
426
+ "distance": "0"
427
+ },
428
+ {
429
+ "name": "Uranus",
430
+ "Radius": "-4",
431
+ "Diameter": "-30",
432
+ "distance": "0"
433
+ },
434
+ {
435
+ "name": "Neptune",
436
+ "Radius": "3.86",
437
+ "Diameter": "7",
438
+ "distance": "0"
439
+ },
440
+ {
441
+ "name": "Earth",
442
+ "Radius": "1",
443
+ "Diameter": "2",
444
+ "distance": "0"
445
+ },
446
+ {
447
+ "name": "Venus",
448
+ "Radius": "0.950",
449
+ "Diameter": "2",
450
+ "distance": "0"
451
+ },
452
+ {
453
+ "name": "Mars",
454
+ "Radius": "0.532",
455
+ "Diameter": "1",
456
+ "distance": "0"
457
+ },
458
+ {
459
+ "name": "Mercury",
460
+ "Radius": "0.383",
461
+ "Diameter": "0.7",
462
+ "distance": "0"
463
+ },
464
+ {
465
+ "name": "Pluto",
466
+ "Radius": "0.181",
467
+ "Diameter": "0.3",
468
+ "distance": "0"
469
+ }
470
+ ],
471
+ "version": "4.24.3",
472
+ "dynamicMarginTop": 0
473
+ }