@cdc/chart 4.24.5 → 4.24.9

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 (87) hide show
  1. package/dist/cdcchart.js +44197 -38258
  2. package/examples/cases-year.json +13379 -0
  3. package/examples/feature/annotations/index.json +542 -0
  4. package/examples/gallery/bar-chart-vertical/combo-line-chart.json +76 -15
  5. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json +5 -5
  6. package/examples/xaxis.json +493 -0
  7. package/index.html +20 -10
  8. package/package.json +5 -4
  9. package/src/CdcChart.tsx +462 -172
  10. package/src/_stories/Chart.Legend.Gradient.tsx +19 -0
  11. package/src/_stories/Chart.stories.tsx +18 -171
  12. package/src/_stories/ChartAnnotation.stories.tsx +32 -0
  13. package/src/_stories/_mock/annotation_category_mock.json +473 -0
  14. package/src/_stories/_mock/annotation_date-linear_mock.json +530 -0
  15. package/{examples/feature/line/line-chart.json → src/_stories/_mock/annotation_date-time_mock.json} +150 -69
  16. package/src/_stories/_mock/legend.gradient_mock.json +236 -0
  17. package/src/_stories/_mock/line_chart_two_points_new_chart.json +128 -0
  18. package/src/_stories/_mock/line_chart_two_points_regression_test.json +127 -0
  19. package/src/_stories/_mock/lollipop.json +171 -0
  20. package/src/components/Annotations/components/AnnotationDraggable.styles.css +31 -0
  21. package/src/components/Annotations/components/AnnotationDraggable.tsx +207 -0
  22. package/src/components/Annotations/components/AnnotationDropdown.styles.css +14 -0
  23. package/src/components/Annotations/components/AnnotationDropdown.tsx +72 -0
  24. package/src/components/Annotations/components/AnnotationList.styles.css +45 -0
  25. package/src/components/Annotations/components/AnnotationList.tsx +42 -0
  26. package/src/components/Annotations/components/findNearestDatum.ts +138 -0
  27. package/src/components/Annotations/components/helpers/index.tsx +46 -0
  28. package/src/components/Annotations/index.tsx +13 -0
  29. package/src/components/AreaChart/components/AreaChart.Stacked.jsx +1 -1
  30. package/src/components/AreaChart/components/AreaChart.jsx +1 -1
  31. package/src/components/Axis/Categorical.Axis.tsx +145 -0
  32. package/src/components/BarChart/components/BarChart.Horizontal.tsx +47 -44
  33. package/src/components/BarChart/components/BarChart.StackedHorizontal.tsx +0 -1
  34. package/src/components/BarChart/components/BarChart.StackedVertical.tsx +11 -14
  35. package/src/components/BarChart/components/BarChart.Vertical.tsx +67 -30
  36. package/src/components/BarChart/helpers/index.ts +91 -0
  37. package/src/components/BrushChart.tsx +205 -0
  38. package/src/components/EditorPanel/EditorPanel.tsx +1794 -403
  39. package/src/components/EditorPanel/components/Panels/Panel.Annotate.tsx +320 -0
  40. package/src/components/EditorPanel/components/Panels/Panel.General.tsx +282 -18
  41. package/src/components/EditorPanel/components/Panels/Panel.Sankey.tsx +43 -8
  42. package/src/components/EditorPanel/components/Panels/Panel.Series.tsx +4 -4
  43. package/src/components/EditorPanel/components/Panels/Panel.Visual.tsx +4 -13
  44. package/src/components/EditorPanel/components/Panels/index.tsx +3 -1
  45. package/src/components/EditorPanel/components/panels.scss +4 -0
  46. package/src/components/EditorPanel/editor-panel.scss +35 -3
  47. package/src/components/EditorPanel/{useEditorPermissions.js → useEditorPermissions.ts} +105 -17
  48. package/src/components/Legend/Legend.Component.tsx +185 -194
  49. package/src/components/Legend/Legend.Suppression.tsx +146 -0
  50. package/src/components/Legend/Legend.tsx +21 -5
  51. package/src/components/Legend/helpers/createFormatLabels.tsx +1 -1
  52. package/src/components/Legend/helpers/index.ts +35 -0
  53. package/src/components/LegendWrapper.tsx +26 -0
  54. package/src/components/LineChart/LineChartProps.ts +1 -15
  55. package/src/components/LineChart/components/LineChart.BumpCircle.tsx +103 -0
  56. package/src/components/LineChart/components/LineChart.Circle.tsx +47 -8
  57. package/src/components/LineChart/helpers.ts +72 -14
  58. package/src/components/LineChart/index.tsx +117 -42
  59. package/src/components/LinearChart.jsx +179 -136
  60. package/src/components/LinearChart.tsx +1366 -0
  61. package/src/components/PairedBarChart.jsx +9 -9
  62. package/src/components/PieChart/PieChart.tsx +75 -18
  63. package/src/components/Sankey/index.tsx +89 -30
  64. package/src/components/ScatterPlot/ScatterPlot.jsx +22 -8
  65. package/src/components/Sparkline/components/SparkLine.tsx +2 -2
  66. package/src/components/ZoomBrush.tsx +90 -44
  67. package/src/data/initial-state.js +25 -7
  68. package/src/helpers/handleChartTabbing.ts +8 -0
  69. package/src/helpers/isConvertLineToBarGraph.ts +4 -0
  70. package/src/hooks/{useBarChart.js → useBarChart.ts} +2 -40
  71. package/src/hooks/useColorScale.ts +1 -1
  72. package/src/hooks/useLegendClasses.ts +68 -0
  73. package/src/hooks/useMinMax.ts +12 -7
  74. package/src/hooks/useScales.ts +58 -26
  75. package/src/hooks/useTooltip.tsx +135 -25
  76. package/src/scss/DataTable.scss +2 -1
  77. package/src/scss/main.scss +128 -28
  78. package/src/types/ChartConfig.ts +83 -10
  79. package/src/types/ChartContext.ts +14 -4
  80. package/tests-examples/helpers/testZeroValue.test.ts +30 -0
  81. package/LICENSE +0 -201
  82. package/src/components/BrushHandle.jsx +0 -17
  83. package/src/components/LineChart/index.scss +0 -1
  84. package/src/helpers/filterData.ts +0 -18
  85. package/src/helpers/tests/computeMarginBottom.test.ts +0 -21
  86. package/src/hooks/useLegendClasses.js +0 -31
  87. /package/src/hooks/{useReduceData.js → useReduceData.ts} +0 -0
@@ -1,4 +1,5 @@
1
1
  {
2
+ "annotations": [],
2
3
  "type": "chart",
3
4
  "debugSvg": false,
4
5
  "chartMessage": {
@@ -11,6 +12,7 @@
11
12
  "animate": false,
12
13
  "fontSize": "medium",
13
14
  "lineDatapointStyle": "hover",
15
+ "lineDatapointColor": "Same as Line",
14
16
  "barHasBorder": "false",
15
17
  "isLollipopChart": false,
16
18
  "lollipopShape": "circle",
@@ -21,13 +23,16 @@
21
23
  "tipRounding": "top",
22
24
  "isResponsiveTicks": false,
23
25
  "general": {
24
- "showDownloadButton": false
26
+ "showDownloadButton": false,
27
+ "showMissingDataLabel": true,
28
+ "showSuppressedSymbol": true,
29
+ "showZeroValueDataLabel": true
25
30
  },
26
31
  "padding": {
27
32
  "left": 5,
28
33
  "right": 5
29
34
  },
30
- "suppressedData": [],
35
+ "preliminaryData": [],
31
36
  "yAxis": {
32
37
  "hideAxis": false,
33
38
  "displayNumbersOnBar": false,
@@ -50,8 +55,11 @@
50
55
  "rightAxisTickColor": "#333",
51
56
  "numTicks": "",
52
57
  "axisPadding": 0,
58
+ "scalePadding": 10,
53
59
  "tickRotation": 0,
54
60
  "anchors": [],
61
+ "shoMissingDataLabel": true,
62
+ "showMissingDataLine": true,
55
63
  "label": "Y-Axis Label Example"
56
64
  },
57
65
  "boxplot": {
@@ -96,7 +104,7 @@
96
104
  "xAxis": {
97
105
  "sortDates": false,
98
106
  "anchors": [],
99
- "type": "date",
107
+ "type": "date-time",
100
108
  "showTargetLabel": true,
101
109
  "targetLabel": "Target",
102
110
  "hideAxis": false,
@@ -116,9 +124,10 @@
116
124
  "maxTickRotation": 0,
117
125
  "dataKey": "Date",
118
126
  "label": "X-Axis Example Label",
119
- "dateParseFormat": "%d/%m/%Y",
120
- "dateDisplayFormat": "%d/%m/%Y",
121
- "tickWidthMax": 91
127
+ "dateParseFormat": "%m/%d/%Y",
128
+ "dateDisplayFormat": "%m/%d/%Y",
129
+ "tickWidthMax": 91,
130
+ "padding": 6
122
131
  },
123
132
  "table": {
124
133
  "label": "Data Table",
@@ -131,6 +140,9 @@
131
140
  "indexLabel": "",
132
141
  "download": true,
133
142
  "showVertical": false,
143
+ "dateDisplayFormat": "",
144
+ "showMissingDataLabel": true,
145
+ "showSuppressedSymbol": true,
134
146
  "show": true
135
147
  },
136
148
  "orientation": "vertical",
@@ -139,6 +151,7 @@
139
151
  "legend": {
140
152
  "hide": false,
141
153
  "behavior": "highlight",
154
+ "axisAlign": true,
142
155
  "singleRow": false,
143
156
  "colorCode": "",
144
157
  "reverseLabelOrder": false,
@@ -150,11 +163,15 @@
150
163
  "dynamicLegendChartMessage": "Select Options from the Legend",
151
164
  "lineMode": false,
152
165
  "verticalSorted": false,
166
+ "highlightOnHover": false,
167
+ "hideSuppressedLabels": false,
168
+ "seriesHighlight": [],
153
169
  "position": "right",
154
170
  "label": "Data Type"
155
171
  },
156
172
  "brush": {
157
173
  "height": 25,
174
+ "active": true,
158
175
  "data": [
159
176
  {
160
177
  "Date": "1/15/2016",
@@ -228,8 +245,7 @@
228
245
  "Data 4": "150",
229
246
  "Monthly-Goal": "140"
230
247
  }
231
- ],
232
- "active": false
248
+ ]
233
249
  },
234
250
  "exclusions": {
235
251
  "active": false,
@@ -265,20 +281,21 @@
265
281
  "series": [
266
282
  {
267
283
  "dataKey": "Monthly-Goal",
268
- "type": "Line",
284
+ "type": "Bar",
269
285
  "axis": "Left",
270
286
  "tooltip": true
271
287
  },
272
288
  {
273
289
  "dataKey": "Data 2",
274
- "type": "Line",
290
+ "type": "Bar",
275
291
  "axis": "Left",
276
292
  "tooltip": true
277
293
  }
278
294
  ],
279
295
  "tooltips": {
280
296
  "opacity": 90,
281
- "singleSeries": false
297
+ "singleSeries": false,
298
+ "dateDisplayFormat": ""
282
299
  },
283
300
  "forestPlot": {
284
301
  "startAt": 0,
@@ -321,13 +338,56 @@
321
338
  "leftWidthOffset": 0,
322
339
  "rightWidthOffset": 0,
323
340
  "showZeroLine": false,
324
- "hideDateCategoryCol": false,
325
341
  "leftLabel": "",
326
- "rightLabel": ""
342
+ "rightLabel": "",
343
+ "hideDateCategoryCol": false
327
344
  },
328
345
  "area": {
329
346
  "isStacked": false
330
347
  },
348
+ "sankey": {
349
+ "title": {
350
+ "defaultColor": "black"
351
+ },
352
+ "iterations": 1,
353
+ "rxValue": 0.9,
354
+ "overallSize": {
355
+ "width": 900,
356
+ "height": 700
357
+ },
358
+ "margin": {
359
+ "margin_y": 25,
360
+ "margin_x": 0
361
+ },
362
+ "nodeSize": {
363
+ "nodeWidth": 26,
364
+ "nodeHeight": 40
365
+ },
366
+ "nodePadding": 55,
367
+ "nodeFontColor": "black",
368
+ "nodeColor": {
369
+ "default": "#ff8500",
370
+ "inactive": "#808080"
371
+ },
372
+ "linkColor": {
373
+ "default": "#ffc900",
374
+ "inactive": "#D3D3D3"
375
+ },
376
+ "opacity": {
377
+ "nodeOpacityDefault": 1,
378
+ "nodeOpacityInactive": 0.1,
379
+ "LinkOpacityDefault": 1,
380
+ "LinkOpacityInactive": 0.1
381
+ },
382
+ "storyNodeFontColor": "#006778",
383
+ "storyNodeText": [],
384
+ "nodeValueStyle": {
385
+ "textBefore": "(",
386
+ "textAfter": ")"
387
+ },
388
+ "data": []
389
+ },
390
+ "suppressedData": [],
331
391
  "height": "332",
332
392
  "data": [
333
393
  {
@@ -403,8 +463,9 @@
403
463
  "Monthly-Goal": "140"
404
464
  }
405
465
  ],
406
- "visualizationType": "Line",
466
+ "visualizationType": "Bar",
407
467
  "filters": [],
408
468
  "validated": 4.23,
409
- "dynamicMarginTop": 0
469
+ "dynamicMarginTop": 0,
470
+ "version": "4.24.4"
410
471
  }
@@ -339,21 +339,21 @@
339
339
  "data": [
340
340
  {
341
341
  "Year": "2015",
342
- "Data 1": "25",
342
+ "Data 1": null,
343
343
  "Data 2": "20",
344
344
  "Data 3": "55"
345
345
  },
346
346
  {
347
347
  "Year": "2016",
348
- "Data 1": "35",
348
+ "Data 1": "NULLL",
349
349
  "Data 2": "30",
350
350
  "Data 3": "35"
351
351
  },
352
352
  {
353
353
  "Year": "2017",
354
- "Data 1": "22",
355
- "Data 2": "38",
356
- "Data 3": "40"
354
+ "Data 1": "ABC",
355
+ "Data 2": "HELLO",
356
+ "Data 3": null
357
357
  },
358
358
  {
359
359
  "Year": "2018",