@cdc/chart 4.23.11 → 4.24.2

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 (104) hide show
  1. package/dist/cdcchart.js +35740 -35027
  2. package/examples/feature/bar/additional-column-tooltip.json +446 -0
  3. package/examples/feature/bar/tall-data.json +98 -0
  4. package/examples/feature/forest-plot/forest-plot.json +63 -19
  5. package/examples/feature/forest-plot/linear.json +52 -3
  6. package/examples/feature/forest-plot/log.json +26 -0
  7. package/examples/feature/forest-plot/logarithmic.json +0 -35
  8. package/examples/feature/line/line-chart-preliminary.json +393 -0
  9. package/examples/feature/regions/index.json +9 -5
  10. package/examples/feature/scatterplot/scatterplot.json +272 -33
  11. package/index.html +10 -8
  12. package/package.json +2 -2
  13. package/src/CdcChart.tsx +70 -234
  14. package/src/ConfigContext.tsx +6 -0
  15. package/src/_stories/ChartEditor.stories.tsx +22 -0
  16. package/src/_stories/ChartLine.preliminary.tsx +19 -0
  17. package/src/_stories/_mock/pie_config.json +192 -0
  18. package/src/_stories/_mock/pie_data.json +218 -0
  19. package/src/_stories/_mock/preliminary_mock.json +346 -0
  20. package/src/components/{AreaChart.Stacked.jsx → AreaChart/components/AreaChart.Stacked.jsx} +2 -2
  21. package/src/components/{AreaChart.jsx → AreaChart/components/AreaChart.jsx} +2 -26
  22. package/src/components/AreaChart/index.tsx +4 -0
  23. package/src/components/{BarChart.Horizontal.tsx → BarChart/components/BarChart.Horizontal.tsx} +8 -8
  24. package/src/components/{BarChart.StackedHorizontal.tsx → BarChart/components/BarChart.StackedHorizontal.tsx} +37 -7
  25. package/src/components/BarChart/components/BarChart.StackedVertical.tsx +108 -0
  26. package/src/components/{BarChart.Vertical.tsx → BarChart/components/BarChart.Vertical.tsx} +53 -70
  27. package/src/components/BarChart/components/BarChart.jsx +39 -0
  28. package/src/components/{BarChartType.jsx → BarChart/components/BarChartType.jsx} +0 -2
  29. package/src/components/BarChart/components/context.tsx +13 -0
  30. package/src/components/BarChart/index.tsx +3 -0
  31. package/src/components/{BoxPlot.jsx → BoxPlot/BoxPlot.jsx} +10 -9
  32. package/src/components/BoxPlot/index.tsx +3 -0
  33. package/src/components/EditorPanel/EditorPanel.tsx +2776 -0
  34. package/src/components/EditorPanel/EditorPanelContext.ts +40 -0
  35. package/src/components/EditorPanel/components/PanelProps.ts +3 -0
  36. package/src/components/EditorPanel/components/Panels/Panel.BoxPlot.tsx +148 -0
  37. package/src/components/{ForestPlotSettings.jsx → EditorPanel/components/Panels/Panel.ForestPlotSettings.tsx} +97 -167
  38. package/src/components/EditorPanel/components/Panels/Panel.General.tsx +160 -0
  39. package/src/components/EditorPanel/components/Panels/Panel.Regions.tsx +168 -0
  40. package/src/components/{Series.jsx → EditorPanel/components/Panels/Panel.Series.tsx} +4 -4
  41. package/src/components/EditorPanel/components/Panels/Panel.Visual.tsx +297 -0
  42. package/src/components/EditorPanel/components/Panels/index.tsx +17 -0
  43. package/src/components/EditorPanel/components/panels.scss +72 -0
  44. package/src/components/EditorPanel/editor-panel.scss +739 -0
  45. package/src/components/EditorPanel/index.tsx +3 -0
  46. package/src/{hooks → components/EditorPanel}/useEditorPermissions.js +34 -2
  47. package/src/components/{Forecasting.jsx → Forecasting/Forecasting.jsx} +1 -1
  48. package/src/components/Forecasting/index.tsx +3 -0
  49. package/src/components/ForestPlot/ForestPlot.tsx +254 -0
  50. package/src/components/ForestPlot/ForestPlotProps.ts +7 -0
  51. package/src/components/ForestPlot/index.tsx +1 -209
  52. package/src/components/Legend/Legend.Component.tsx +199 -0
  53. package/src/components/Legend/Legend.tsx +28 -0
  54. package/src/components/Legend/helpers/createFormatLabels.tsx +140 -0
  55. package/src/components/Legend/index.tsx +3 -0
  56. package/src/components/LineChart/LineChartProps.ts +29 -0
  57. package/src/components/LineChart/components/LineChart.Circle.tsx +147 -0
  58. package/src/components/LineChart/helpers.ts +45 -0
  59. package/src/components/LineChart/index.tsx +111 -23
  60. package/src/components/LinearChart.jsx +55 -72
  61. package/src/components/PairedBarChart.jsx +4 -2
  62. package/src/components/{PieChart.jsx → PieChart/PieChart.tsx} +93 -31
  63. package/src/components/PieChart/index.tsx +3 -0
  64. package/src/components/Regions/components/Regions.tsx +144 -0
  65. package/src/components/Regions/index.tsx +3 -0
  66. package/src/components/{ScatterPlot.jsx → ScatterPlot/ScatterPlot.jsx} +3 -3
  67. package/src/components/ScatterPlot/index.tsx +3 -0
  68. package/src/components/{SparkLine.jsx → Sparkline/SparkLine.jsx} +2 -2
  69. package/src/components/Sparkline/index.tsx +3 -0
  70. package/src/data/initial-state.js +10 -8
  71. package/src/helpers/abbreviateNumber.ts +17 -0
  72. package/src/helpers/computeMarginBottom.ts +55 -0
  73. package/src/helpers/filterData.ts +18 -0
  74. package/src/helpers/generateColorsArray.ts +8 -0
  75. package/src/helpers/getQuartiles.ts +30 -0
  76. package/src/helpers/handleChartAriaLabels.ts +19 -0
  77. package/src/helpers/handleLineType.ts +18 -0
  78. package/src/helpers/lineOptions.ts +18 -0
  79. package/src/helpers/sort.ts +7 -0
  80. package/src/helpers/tests/computeMarginBottom.test.ts +20 -0
  81. package/src/hooks/useBarChart.js +7 -6
  82. package/src/hooks/useHighlightedBars.js +1 -1
  83. package/src/hooks/useMinMax.ts +3 -3
  84. package/src/hooks/useScales.ts +19 -6
  85. package/src/hooks/{useTooltip.jsx → useTooltip.tsx} +31 -25
  86. package/src/scss/main.scss +0 -3
  87. package/src/types/ChartConfig.ts +167 -23
  88. package/src/types/ChartContext.ts +34 -12
  89. package/src/types/ForestPlot.ts +7 -14
  90. package/src/types/Label.ts +7 -0
  91. package/examples/feature/scatterplot/scatterplot-continuous.csv +0 -17
  92. package/src/ConfigContext.jsx +0 -5
  93. package/src/components/BarChart.StackedVertical.tsx +0 -91
  94. package/src/components/BarChart.jsx +0 -30
  95. package/src/components/EditorPanel.jsx +0 -3356
  96. package/src/components/ForestPlot/Readme.md +0 -0
  97. package/src/components/Legend.jsx +0 -310
  98. package/src/components/LineChart/LineChart.Circle.tsx +0 -105
  99. package/src/scss/LinearChart.scss +0 -0
  100. package/src/scss/editor-panel.scss +0 -745
  101. package/src/scss/legend.scss +0 -206
  102. package/src/scss/mixins.scss +0 -0
  103. package/src/scss/variables.scss +0 -1
  104. package/src/types/ChartProps.ts +0 -7
@@ -1,6 +1,9 @@
1
1
  {
2
2
  "type": "chart",
3
3
  "debugSvg": false,
4
+ "chartMessage": {
5
+ "noData": "No Data Available"
6
+ },
4
7
  "title": "Forest Plot Example",
5
8
  "showTitle": true,
6
9
  "showDownloadMediaButton": false,
@@ -8,6 +11,7 @@
8
11
  "animate": false,
9
12
  "fontSize": "medium",
10
13
  "lineDatapointStyle": "hover",
14
+ "lineDatapointColor": "Same as Line",
11
15
  "barHasBorder": "false",
12
16
  "isLollipopChart": false,
13
17
  "lollipopShape": "circle",
@@ -24,6 +28,7 @@
24
28
  "left": 5,
25
29
  "right": 5
26
30
  },
31
+ "suppressedData": [],
27
32
  "yAxis": {
28
33
  "hideAxis": true,
29
34
  "displayNumbersOnBar": false,
@@ -94,6 +99,7 @@
94
99
  "horizontal": 750
95
100
  },
96
101
  "xAxis": {
102
+ "sortDates": false,
97
103
  "anchors": [],
98
104
  "type": "categorical",
99
105
  "showTargetLabel": true,
@@ -115,7 +121,8 @@
115
121
  "maxTickRotation": 0,
116
122
  "dataKey": "Author(s) and Year",
117
123
  "label": "",
118
- "labelPlacement": "On Date/Category Axis"
124
+ "labelPlacement": "On Date/Category Axis",
125
+ "tickWidthMax": 37
119
126
  },
120
127
  "table": {
121
128
  "label": "Data Table",
@@ -133,18 +140,27 @@
133
140
  "orientation": "horizontal",
134
141
  "color": "pinkpurple",
135
142
  "columns": {
136
- "additionalColumn4": {
137
- "label": "Result",
143
+ "Estimate": {
144
+ "dataKey": "Estimate",
145
+ "name": "Estimate",
146
+ "dataTable": true,
147
+ "tooltips": true
148
+ },
149
+ "Lower": {
150
+ "dataKey": "Lower",
151
+ "name": "Lower",
152
+ "dataTable": true,
153
+ "tooltips": true
154
+ },
155
+ "Upper": {
156
+ "dataKey": "Upper",
157
+ "name": "Upper",
138
158
  "dataTable": true,
139
- "tooltips": false,
140
- "prefix": "",
141
- "suffix": "",
142
- "name": "Result",
143
- "forestPlotAlignRight": true,
144
- "forestPlot": true
159
+ "tooltips": true
145
160
  }
146
161
  },
147
162
  "legend": {
163
+ "hide": true,
148
164
  "behavior": "isolate",
149
165
  "singleRow": false,
150
166
  "colorCode": "",
@@ -155,7 +171,14 @@
155
171
  "dynamicLegendItemLimit": 5,
156
172
  "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
157
173
  "dynamicLegendChartMessage": "Select Options from the Legend",
158
- "hide": true
174
+ "lineMode": false,
175
+ "verticalSorted": false,
176
+ "highlightOnHover": false
177
+ },
178
+ "brush": {
179
+ "height": 25,
180
+ "data": [],
181
+ "active": false
159
182
  },
160
183
  "exclusions": {
161
184
  "active": true,
@@ -188,9 +211,17 @@
188
211
  "useLogScale": false,
189
212
  "filterBehavior": "Filter Change",
190
213
  "highlightedBarValues": [],
191
- "series": [],
214
+ "series": [
215
+ {
216
+ "dataKey": "Confidence",
217
+ "type": "Forest Plot",
218
+ "axis": "Left",
219
+ "tooltip": true
220
+ }
221
+ ],
192
222
  "tooltips": {
193
- "opacity": 90
223
+ "opacity": 90,
224
+ "singleSeries": false
194
225
  },
195
226
  "forestPlot": {
196
227
  "startAt": "0",
@@ -198,13 +229,18 @@
198
229
  "line": "",
199
230
  "shape": ""
200
231
  },
232
+ "lineOfNoEffect": {
233
+ "show": true
234
+ },
235
+ "type": "Linear",
236
+ "pooledResult": {
237
+ "diamondHeight": 5,
238
+ "column": ""
239
+ },
201
240
  "estimateField": "Estimate",
202
241
  "estimateRadius": "",
203
- "lowerCiField": "",
204
- "upperCiField": "",
205
242
  "shape": "circle",
206
243
  "rowHeight": "20",
207
- "showZeroLine": true,
208
244
  "description": {
209
245
  "show": true,
210
246
  "text": "description",
@@ -216,9 +252,9 @@
216
252
  "location": 100
217
253
  },
218
254
  "radius": {
219
- "min": 1,
255
+ "min": 3,
220
256
  "max": 5,
221
- "scalingColumn": "Estimate"
257
+ "scalingColumn": "N"
222
258
  },
223
259
  "regression": {
224
260
  "showBaseLine": true,
@@ -227,6 +263,13 @@
227
263
  "lower": "#87c4c3",
228
264
  "estimateField": "-10"
229
265
  },
266
+ "leftWidthOffset": "15",
267
+ "rightWidthOffset": "25",
268
+ "showZeroLine": true,
269
+ "leftLabel": "left",
270
+ "rightLabel": "right",
271
+ "lowerCiField": "",
272
+ "upperCiField": "",
230
273
  "hasZeroLine": true,
231
274
  "lower": "Lower",
232
275
  "upper": "Upper",
@@ -235,11 +278,12 @@
235
278
  },
236
279
  "title": "Plot Title 2",
237
280
  "padding": "200",
238
- "leftWidthOffset": "15",
239
- "rightWidthOffset": "25",
240
281
  "leftWidthOffsetMobile": "45",
241
282
  "rightWidthOffsetMobile": "45"
242
283
  },
284
+ "area": {
285
+ "isStacked": false
286
+ },
243
287
  "datasets": {},
244
288
  "visualizationType": "Forest Plot",
245
289
  "data": [
@@ -11,6 +11,7 @@
11
11
  "animate": false,
12
12
  "fontSize": "medium",
13
13
  "lineDatapointStyle": "hover",
14
+ "lineDatapointColor": "Same as Line",
14
15
  "barHasBorder": "false",
15
16
  "isLollipopChart": false,
16
17
  "lollipopShape": "circle",
@@ -117,7 +118,7 @@
117
118
  "target": 0,
118
119
  "maxTickRotation": 0,
119
120
  "dataKey": "Author(s) and Year",
120
- "tickWidthMax": null
121
+ "tickWidthMax": 37
121
122
  },
122
123
  "table": {
123
124
  "label": "Data Table",
@@ -160,7 +161,8 @@
160
161
  "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
161
162
  "dynamicLegendChartMessage": "Select Options from the Legend",
162
163
  "lineMode": false,
163
- "verticalSorted": false
164
+ "verticalSorted": false,
165
+ "highlightOnHover": false
164
166
  },
165
167
  "brush": {
166
168
  "height": 25,
@@ -202,7 +204,54 @@
202
204
  "highlightedBarValues": [],
203
205
  "series": [],
204
206
  "tooltips": {
205
- "opacity": 90
207
+ "opacity": 90,
208
+ "singleSeries": false
209
+ },
210
+ "forestPlot": {
211
+ "startAt": 0,
212
+ "colors": {
213
+ "line": "",
214
+ "shape": ""
215
+ },
216
+ "lineOfNoEffect": {
217
+ "show": true
218
+ },
219
+ "type": "Linear",
220
+ "pooledResult": {
221
+ "diamondHeight": 5,
222
+ "column": "Total"
223
+ },
224
+ "estimateField": "Estimate",
225
+ "estimateRadius": "",
226
+ "rowHeight": 20,
227
+ "description": {
228
+ "show": true,
229
+ "text": "description",
230
+ "location": 0
231
+ },
232
+ "result": {
233
+ "show": true,
234
+ "text": "result",
235
+ "location": 100
236
+ },
237
+ "radius": {
238
+ "min": 3,
239
+ "max": 10,
240
+ "scalingColumn": "N"
241
+ },
242
+ "regression": {
243
+ "lower": 0,
244
+ "upper": 0,
245
+ "estimateField": 0
246
+ },
247
+ "leftWidthOffset": 0,
248
+ "rightWidthOffset": 0,
249
+ "showZeroLine": false,
250
+ "hideDateCategoryCol": false,
251
+ "leftLabel": "",
252
+ "rightLabel": "",
253
+ "lower": "Lower",
254
+ "upper": "Upper"
206
255
  },
207
256
  "area": {
208
257
  "isStacked": false
@@ -0,0 +1,26 @@
1
+ [
2
+ {
3
+ "description": "Study 1",
4
+ "low": 0.88,
5
+ "high": 0.95,
6
+ "effect": 0.92
7
+ },
8
+ {
9
+ "description": "Study 2",
10
+ "low": 0.84,
11
+ "high": 0.94,
12
+ "effect": 0.89
13
+ },
14
+ {
15
+ "description": "Study 3",
16
+ "low": 0.88,
17
+ "high": 0.98,
18
+ "effect": 0.93
19
+ },
20
+ {
21
+ "description": "Study 4",
22
+ "low": 0.91,
23
+ "high": 0.99,
24
+ "effect": 0.97
25
+ }
26
+ ]
@@ -128,41 +128,6 @@
128
128
  },
129
129
  "orientation": "horizontal",
130
130
  "color": "pinkpurple",
131
- "columns": {
132
- "additionalColumn1": {
133
- "label": "Estimate Field",
134
- "dataTable": true,
135
- "tooltips": true,
136
- "prefix": "",
137
- "suffix": "",
138
- "forestPlot": false,
139
- "startingPoint": "0",
140
- "forestPlotAlignRight": false,
141
- "name": "effect"
142
- },
143
- "additionalColumn2": {
144
- "label": "Low",
145
- "dataTable": true,
146
- "tooltips": true,
147
- "prefix": "",
148
- "suffix": "",
149
- "forestPlot": false,
150
- "startingPoint": "0",
151
- "forestPlotAlignRight": false,
152
- "name": "low"
153
- },
154
- "additionalColumn3": {
155
- "label": "High",
156
- "dataTable": true,
157
- "tooltips": true,
158
- "prefix": "",
159
- "suffix": "",
160
- "forestPlot": false,
161
- "startingPoint": "0",
162
- "forestPlotAlignRight": false,
163
- "name": "high"
164
- }
165
- },
166
131
  "legend": {
167
132
  "behavior": "isolate",
168
133
  "singleRow": false,