@cdc/chart 4.23.10 → 4.23.11

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 (56) hide show
  1. package/dist/cdcchart.js +30989 -29057
  2. package/examples/feature/bar/example-bar-chart.json +1 -46
  3. package/examples/feature/bar/lollipop.json +156 -0
  4. package/examples/feature/combo/planet-combo-example-config.json +99 -9
  5. package/examples/feature/dev-4261.json +399 -0
  6. package/examples/feature/forest-plot/{broken.json → linear.json} +55 -50
  7. package/examples/feature/forest-plot/logarithmic.json +306 -0
  8. package/examples/feature/line/line-points.json +340 -0
  9. package/examples/feature/regions/index.json +462 -0
  10. package/examples/gallery/bar-chart-vertical/combo-line-chart.json +181 -48
  11. package/examples/sparkline-multilple.json +846 -0
  12. package/index.html +10 -6
  13. package/package.json +3 -3
  14. package/src/CdcChart.tsx +75 -63
  15. package/src/_stories/Chart.stories.tsx +188 -0
  16. package/src/_stories/Chart.tooltip.stories.tsx +305 -0
  17. package/src/_stories/ChartBrush.stories.tsx +19 -0
  18. package/src/_stories/ChartSuppress.stories.tsx +19 -0
  19. package/src/_stories/_mock/brush_mock.json +393 -0
  20. package/src/_stories/_mock/suppress_mock.json +911 -0
  21. package/src/components/AreaChart.Stacked.jsx +4 -5
  22. package/src/components/AreaChart.jsx +6 -35
  23. package/src/components/{BarChart.Horizontal.jsx → BarChart.Horizontal.tsx} +106 -29
  24. package/src/components/{BarChart.StackedHorizontal.jsx → BarChart.StackedHorizontal.tsx} +22 -17
  25. package/src/components/{BarChart.StackedVertical.jsx → BarChart.StackedVertical.tsx} +22 -26
  26. package/src/components/{BarChart.Vertical.jsx → BarChart.Vertical.tsx} +175 -31
  27. package/src/components/BarChart.jsx +1 -1
  28. package/src/components/DeviationBar.jsx +4 -3
  29. package/src/components/EditorPanel.jsx +176 -50
  30. package/src/components/ForestPlot/ForestPlotProps.ts +11 -0
  31. package/src/components/ForestPlot/Readme.md +0 -0
  32. package/src/components/ForestPlot/index.scss +1 -0
  33. package/src/components/{ForestPlot.jsx → ForestPlot/index.tsx} +51 -31
  34. package/src/components/ForestPlotSettings.jsx +162 -113
  35. package/src/components/Legend.jsx +36 -3
  36. package/src/components/{LineChart.Circle.tsx → LineChart/LineChart.Circle.tsx} +26 -29
  37. package/src/components/LineChart/LineChartProps.ts +17 -0
  38. package/src/components/LineChart/index.scss +1 -0
  39. package/src/components/{LineChart.tsx → LineChart/index.tsx} +64 -35
  40. package/src/components/LinearChart.jsx +120 -60
  41. package/src/components/PairedBarChart.jsx +2 -2
  42. package/src/components/Series.jsx +22 -3
  43. package/src/components/ZoomBrush.tsx +168 -0
  44. package/src/data/initial-state.js +27 -12
  45. package/src/hooks/useBarChart.js +71 -7
  46. package/src/hooks/useColorScale.ts +50 -0
  47. package/src/hooks/useEditorPermissions.js +22 -4
  48. package/src/hooks/{useMinMax.js → useMinMax.ts} +75 -23
  49. package/src/hooks/{useRightAxis.js → useRightAxis.ts} +10 -2
  50. package/src/hooks/{useScales.js → useScales.ts} +64 -17
  51. package/src/hooks/useTooltip.jsx +68 -41
  52. package/src/scss/main.scss +3 -35
  53. package/src/types/ChartConfig.ts +43 -0
  54. package/src/types/ChartContext.ts +38 -0
  55. package/src/types/ChartProps.ts +7 -0
  56. package/src/types/ForestPlot.ts +60 -0
@@ -498,58 +498,13 @@
498
498
  "height": 300,
499
499
  "data": [
500
500
  {
501
- "Date": "1/15/2016",
501
+ "Date": "2023-08-28T00:00:00",
502
502
  "Data 1": "90",
503
503
  "Data 2": "135",
504
504
  "Data 3": "300",
505
505
  "Data 4": "95",
506
506
  "Data 5": "120",
507
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
508
  }
554
509
  ],
555
510
  "visualizationType": "Bar",
@@ -0,0 +1,156 @@
1
+ {
2
+ "type": "chart",
3
+ "title": "Planet Radius (Bar Example)",
4
+ "theme": "theme-blue",
5
+ "animate": false,
6
+ "fontSize": "medium",
7
+ "lineDatapointStyle": "hover",
8
+ "barHasBorder": "false",
9
+ "isLollipopChart": false,
10
+ "lollipopShape": "circle",
11
+ "lollipopColorStyle": "two-tone",
12
+ "visualizationSubType": "regular",
13
+ "barStyle": "",
14
+ "roundingStyle": "standard",
15
+ "tipRounding": "top",
16
+ "padding": {
17
+ "left": 5,
18
+ "right": 5
19
+ },
20
+ "yAxis": {
21
+ "hideAxis": false,
22
+ "displayNumbersOnBar": false,
23
+ "hideLabel": false,
24
+ "hideTicks": false,
25
+ "size": 50,
26
+ "gridLines": false,
27
+ "min": "",
28
+ "max": "",
29
+ "labelColor": "#333",
30
+ "tickLabelColor": "#333",
31
+ "tickColor": "#333",
32
+ "rightHideAxis": true,
33
+ "rightAxisSize": 50,
34
+ "rightLabel": "testing",
35
+ "rightLabelOffsetSize": 0,
36
+ "rightAxisLabelColor": "#333",
37
+ "rightAxisTickLabelColor": "#333",
38
+ "rightAxisTickColor": "#333",
39
+ "numTicks": "11",
40
+ "axisPadding": 0,
41
+ "tickRotation": 0,
42
+ "label": "Measurement (1000km)",
43
+ "rightSeries": "Diameter"
44
+ },
45
+ "boxplot": {
46
+ "plots": [],
47
+ "borders": "true",
48
+ "firstQuartilePercentage": 25,
49
+ "thirdQuartilePercentage": 75,
50
+ "boxWidthPercentage": 40,
51
+ "plotOutlierValues": false,
52
+ "plotNonOutlierValues": true,
53
+ "legend": {
54
+ "showHowToReadText": false,
55
+ "howToReadText": ""
56
+ },
57
+ "labels": {
58
+ "q1": "Lower Quartile",
59
+ "q2": "q2",
60
+ "q3": "Upper Quartile",
61
+ "q4": "q4",
62
+ "minimum": "Minimum",
63
+ "maximum": "Maximum",
64
+ "mean": "Mean",
65
+ "median": "Median",
66
+ "sd": "Standard Deviation",
67
+ "iqr": "Interquartile Range",
68
+ "count": "Count",
69
+ "outliers": "Outliers",
70
+ "values": "Values"
71
+ }
72
+ },
73
+ "topAxis": {
74
+ "hasLine": false
75
+ },
76
+ "isLegendValue": false,
77
+ "barThickness": 0.35,
78
+ "barHeight": 25,
79
+ "barSpace": 15,
80
+ "heights": {
81
+ "vertical": 300,
82
+ "horizontal": 405
83
+ },
84
+ "xAxis": {
85
+ "type": "categorical",
86
+ "hideAxis": false,
87
+ "hideLabel": false,
88
+ "hideTicks": false,
89
+ "size": 75,
90
+ "tickRotation": "0",
91
+ "min": "",
92
+ "max": "",
93
+ "labelColor": "#333",
94
+ "tickLabelColor": "#333",
95
+ "tickColor": "#333",
96
+ "numTicks": "",
97
+ "labelOffset": 65,
98
+ "axisPadding": 0,
99
+ "label": "Planet",
100
+ "dataKey": "name"
101
+ },
102
+ "table": {
103
+ "label": "Data Table",
104
+ "expanded": false,
105
+ "limitHeight": false,
106
+ "height": "",
107
+ "caption": "",
108
+ "showDownloadUrl": false,
109
+ "show": true
110
+ },
111
+ "orientation": "horizontal",
112
+ "legend": {
113
+ "behavior": "isolate",
114
+ "position": "right",
115
+ "singleRow": false,
116
+ "colorCode": "",
117
+ "reverseLabelOrder": false,
118
+ "description": "",
119
+ "dynamicLegend": false,
120
+ "dynamicLegendDefaultText": "Show All",
121
+ "dynamicLegendItemLimit": 5,
122
+ "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
123
+ "dynamicLegendChartMessage": "Select Options from the Legend",
124
+ "hide": false
125
+ },
126
+ "exclusions": {
127
+ "active": false,
128
+ "keys": []
129
+ },
130
+ "palette": "qualitative-bold",
131
+ "isPaletteReversed": false,
132
+ "labels": false,
133
+ "dataFormat": {
134
+ "commas": false,
135
+ "prefix": "",
136
+ "suffix": "km",
137
+ "abbreviated": false,
138
+ "roundTo": 1
139
+ },
140
+ "confidenceKeys": {},
141
+ "visual": {
142
+ "border": true,
143
+ "accent": true,
144
+ "background": true
145
+ },
146
+ "dataUrl": "/examples/feature/__data__/planet-example-data.json",
147
+ "visualizationType": "Deviation Bar",
148
+ "series": [
149
+ {
150
+ "dataKey": "Radius",
151
+ "type": "Deviation Bar",
152
+ "axis": "Left"
153
+ }
154
+ ],
155
+ "dataCutoff": "0.5"
156
+ }
@@ -1,6 +1,13 @@
1
1
  {
2
2
  "type": "chart",
3
+ "debugSvg": false,
4
+ "chartMessage": {
5
+ "noData": "No Data Available"
6
+ },
3
7
  "title": "Planet Radius (Combo Example)",
8
+ "showTitle": true,
9
+ "showDownloadMediaButton": false,
10
+ "showChartBrush": false,
4
11
  "theme": "theme-blue",
5
12
  "animate": true,
6
13
  "fontSize": "medium",
@@ -13,6 +20,10 @@
13
20
  "barStyle": "",
14
21
  "roundingStyle": "standard",
15
22
  "tipRounding": "top",
23
+ "isResponsiveTicks": false,
24
+ "general": {
25
+ "showDownloadButton": false
26
+ },
16
27
  "padding": {
17
28
  "left": 0,
18
29
  "right": 0
@@ -24,6 +35,7 @@
24
35
  "hideTicks": false,
25
36
  "size": 50,
26
37
  "gridLines": false,
38
+ "enablePadding": false,
27
39
  "min": "",
28
40
  "max": "",
29
41
  "labelColor": "#333",
@@ -39,6 +51,7 @@
39
51
  "numTicks": "",
40
52
  "axisPadding": 0,
41
53
  "tickRotation": 0,
54
+ "anchors": [],
42
55
  "label": "Measurement (1000km)"
43
56
  },
44
57
  "boxplot": {
@@ -81,7 +94,11 @@
81
94
  "horizontal": 750
82
95
  },
83
96
  "xAxis": {
97
+ "sortDates": false,
98
+ "anchors": [],
84
99
  "type": "categorical",
100
+ "showTargetLabel": true,
101
+ "targetLabel": "Target",
85
102
  "hideAxis": false,
86
103
  "hideLabel": false,
87
104
  "hideTicks": false,
@@ -95,6 +112,8 @@
95
112
  "numTicks": "",
96
113
  "labelOffset": 65,
97
114
  "axisPadding": 0,
115
+ "target": 0,
116
+ "maxTickRotation": 0,
98
117
  "label": "Planet",
99
118
  "dataKey": "name"
100
119
  },
@@ -105,12 +124,17 @@
105
124
  "height": "",
106
125
  "caption": "",
107
126
  "showDownloadUrl": false,
127
+ "showDataTableLink": true,
128
+ "indexLabel": "",
129
+ "download": false,
130
+ "showVertical": false,
108
131
  "show": true
109
132
  },
110
133
  "orientation": "vertical",
134
+ "color": "pinkpurple",
135
+ "columns": {},
111
136
  "legend": {
112
137
  "behavior": "isolate",
113
- "position": "right",
114
138
  "singleRow": false,
115
139
  "colorCode": "",
116
140
  "reverseLabelOrder": false,
@@ -120,6 +144,9 @@
120
144
  "dynamicLegendItemLimit": 5,
121
145
  "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
122
146
  "dynamicLegendChartMessage": "Select Options from the Legend",
147
+ "lineMode": false,
148
+ "verticalSorted": false,
149
+ "position": "right",
123
150
  "hide": false
124
151
  },
125
152
  "exclusions": {
@@ -128,32 +155,95 @@
128
155
  },
129
156
  "palette": "qualitative-bold",
130
157
  "isPaletteReversed": false,
158
+ "twoColor": {
159
+ "palette": "monochrome-1",
160
+ "isPaletteReversed": false
161
+ },
131
162
  "labels": false,
132
163
  "dataFormat": {
133
164
  "commas": false,
134
165
  "prefix": "",
135
166
  "suffix": "km",
136
167
  "abbreviated": false,
168
+ "bottomSuffix": "",
169
+ "bottomPrefix": "",
170
+ "bottomAbbreviated": false,
137
171
  "roundTo": 1
138
172
  },
139
173
  "confidenceKeys": {},
140
174
  "visual": {
141
175
  "border": true,
142
176
  "accent": true,
143
- "background": true
177
+ "background": true,
178
+ "verticalHoverLine": false,
179
+ "horizontalHoverLine": false
144
180
  },
145
- "dataUrl": "/examples/feature/__data__/planet-example-data.json",
146
- "animateReplay": true,
147
- "visualizationType": "Combo",
181
+ "useLogScale": false,
182
+ "filterBehavior": "Filter Change",
183
+ "highlightedBarValues": [],
148
184
  "series": [
149
185
  {
150
186
  "dataKey": "Radius",
151
- "type": "Line",
152
- "axis": "Right"
187
+ "type": "Bar",
188
+ "axis": "Right",
189
+ "tooltip": true
153
190
  },
154
191
  {
155
192
  "dataKey": "Diameter",
156
- "type": "Bar"
193
+ "type": "Line",
194
+ "tooltip": true
157
195
  }
158
- ]
196
+ ],
197
+ "tooltips": {
198
+ "opacity": 90
199
+ },
200
+ "forestPlot": {
201
+ "startAt": 0,
202
+ "width": "auto",
203
+ "colors": {
204
+ "line": "",
205
+ "shape": ""
206
+ },
207
+ "estimateField": "",
208
+ "estimateRadius": "",
209
+ "lowerCiField": "",
210
+ "upperCiField": "",
211
+ "shape": "",
212
+ "rowHeight": 20,
213
+ "showZeroLine": false,
214
+ "description": {
215
+ "show": true,
216
+ "text": "description",
217
+ "location": 0
218
+ },
219
+ "result": {
220
+ "show": true,
221
+ "text": "result",
222
+ "location": 100
223
+ },
224
+ "radius": {
225
+ "min": 1,
226
+ "max": 8,
227
+ "scalingColumn": ""
228
+ },
229
+ "regression": {
230
+ "lower": 0,
231
+ "upper": 0,
232
+ "estimateField": 0
233
+ },
234
+ "leftWidthOffset": 0,
235
+ "rightWidthOffset": 0
236
+ },
237
+ "brush": {
238
+ "pattern_id": "brush_pattern",
239
+ "accent_color": "#ddd"
240
+ },
241
+ "area": {
242
+ "isStacked": false
243
+ },
244
+ "dataUrl": "/examples/feature/__data__/planet-example-data.json",
245
+ "animateReplay": true,
246
+ "visualizationType": "Combo",
247
+ "validated": 4.23,
248
+ "dynamicMarginTop": 0
159
249
  }