@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.
- package/dist/cdcchart.js +35740 -35027
- package/examples/feature/bar/additional-column-tooltip.json +446 -0
- package/examples/feature/bar/tall-data.json +98 -0
- package/examples/feature/forest-plot/forest-plot.json +63 -19
- package/examples/feature/forest-plot/linear.json +52 -3
- package/examples/feature/forest-plot/log.json +26 -0
- package/examples/feature/forest-plot/logarithmic.json +0 -35
- package/examples/feature/line/line-chart-preliminary.json +393 -0
- package/examples/feature/regions/index.json +9 -5
- package/examples/feature/scatterplot/scatterplot.json +272 -33
- package/index.html +10 -8
- package/package.json +2 -2
- package/src/CdcChart.tsx +70 -234
- package/src/ConfigContext.tsx +6 -0
- package/src/_stories/ChartEditor.stories.tsx +22 -0
- package/src/_stories/ChartLine.preliminary.tsx +19 -0
- package/src/_stories/_mock/pie_config.json +192 -0
- package/src/_stories/_mock/pie_data.json +218 -0
- package/src/_stories/_mock/preliminary_mock.json +346 -0
- package/src/components/{AreaChart.Stacked.jsx → AreaChart/components/AreaChart.Stacked.jsx} +2 -2
- package/src/components/{AreaChart.jsx → AreaChart/components/AreaChart.jsx} +2 -26
- package/src/components/AreaChart/index.tsx +4 -0
- package/src/components/{BarChart.Horizontal.tsx → BarChart/components/BarChart.Horizontal.tsx} +8 -8
- package/src/components/{BarChart.StackedHorizontal.tsx → BarChart/components/BarChart.StackedHorizontal.tsx} +37 -7
- package/src/components/BarChart/components/BarChart.StackedVertical.tsx +108 -0
- package/src/components/{BarChart.Vertical.tsx → BarChart/components/BarChart.Vertical.tsx} +53 -70
- package/src/components/BarChart/components/BarChart.jsx +39 -0
- package/src/components/{BarChartType.jsx → BarChart/components/BarChartType.jsx} +0 -2
- package/src/components/BarChart/components/context.tsx +13 -0
- package/src/components/BarChart/index.tsx +3 -0
- package/src/components/{BoxPlot.jsx → BoxPlot/BoxPlot.jsx} +10 -9
- package/src/components/BoxPlot/index.tsx +3 -0
- package/src/components/EditorPanel/EditorPanel.tsx +2776 -0
- package/src/components/EditorPanel/EditorPanelContext.ts +40 -0
- package/src/components/EditorPanel/components/PanelProps.ts +3 -0
- package/src/components/EditorPanel/components/Panels/Panel.BoxPlot.tsx +148 -0
- package/src/components/{ForestPlotSettings.jsx → EditorPanel/components/Panels/Panel.ForestPlotSettings.tsx} +97 -167
- package/src/components/EditorPanel/components/Panels/Panel.General.tsx +160 -0
- package/src/components/EditorPanel/components/Panels/Panel.Regions.tsx +168 -0
- package/src/components/{Series.jsx → EditorPanel/components/Panels/Panel.Series.tsx} +4 -4
- package/src/components/EditorPanel/components/Panels/Panel.Visual.tsx +297 -0
- package/src/components/EditorPanel/components/Panels/index.tsx +17 -0
- package/src/components/EditorPanel/components/panels.scss +72 -0
- package/src/components/EditorPanel/editor-panel.scss +739 -0
- package/src/components/EditorPanel/index.tsx +3 -0
- package/src/{hooks → components/EditorPanel}/useEditorPermissions.js +34 -2
- package/src/components/{Forecasting.jsx → Forecasting/Forecasting.jsx} +1 -1
- package/src/components/Forecasting/index.tsx +3 -0
- package/src/components/ForestPlot/ForestPlot.tsx +254 -0
- package/src/components/ForestPlot/ForestPlotProps.ts +7 -0
- package/src/components/ForestPlot/index.tsx +1 -209
- package/src/components/Legend/Legend.Component.tsx +199 -0
- package/src/components/Legend/Legend.tsx +28 -0
- package/src/components/Legend/helpers/createFormatLabels.tsx +140 -0
- package/src/components/Legend/index.tsx +3 -0
- package/src/components/LineChart/LineChartProps.ts +29 -0
- package/src/components/LineChart/components/LineChart.Circle.tsx +147 -0
- package/src/components/LineChart/helpers.ts +45 -0
- package/src/components/LineChart/index.tsx +111 -23
- package/src/components/LinearChart.jsx +55 -72
- package/src/components/PairedBarChart.jsx +4 -2
- package/src/components/{PieChart.jsx → PieChart/PieChart.tsx} +93 -31
- package/src/components/PieChart/index.tsx +3 -0
- package/src/components/Regions/components/Regions.tsx +144 -0
- package/src/components/Regions/index.tsx +3 -0
- package/src/components/{ScatterPlot.jsx → ScatterPlot/ScatterPlot.jsx} +3 -3
- package/src/components/ScatterPlot/index.tsx +3 -0
- package/src/components/{SparkLine.jsx → Sparkline/SparkLine.jsx} +2 -2
- package/src/components/Sparkline/index.tsx +3 -0
- package/src/data/initial-state.js +10 -8
- package/src/helpers/abbreviateNumber.ts +17 -0
- package/src/helpers/computeMarginBottom.ts +55 -0
- package/src/helpers/filterData.ts +18 -0
- package/src/helpers/generateColorsArray.ts +8 -0
- package/src/helpers/getQuartiles.ts +30 -0
- package/src/helpers/handleChartAriaLabels.ts +19 -0
- package/src/helpers/handleLineType.ts +18 -0
- package/src/helpers/lineOptions.ts +18 -0
- package/src/helpers/sort.ts +7 -0
- package/src/helpers/tests/computeMarginBottom.test.ts +20 -0
- package/src/hooks/useBarChart.js +7 -6
- package/src/hooks/useHighlightedBars.js +1 -1
- package/src/hooks/useMinMax.ts +3 -3
- package/src/hooks/useScales.ts +19 -6
- package/src/hooks/{useTooltip.jsx → useTooltip.tsx} +31 -25
- package/src/scss/main.scss +0 -3
- package/src/types/ChartConfig.ts +167 -23
- package/src/types/ChartContext.ts +34 -12
- package/src/types/ForestPlot.ts +7 -14
- package/src/types/Label.ts +7 -0
- package/examples/feature/scatterplot/scatterplot-continuous.csv +0 -17
- package/src/ConfigContext.jsx +0 -5
- package/src/components/BarChart.StackedVertical.tsx +0 -91
- package/src/components/BarChart.jsx +0 -30
- package/src/components/EditorPanel.jsx +0 -3356
- package/src/components/ForestPlot/Readme.md +0 -0
- package/src/components/Legend.jsx +0 -310
- package/src/components/LineChart/LineChart.Circle.tsx +0 -105
- package/src/scss/LinearChart.scss +0 -0
- package/src/scss/editor-panel.scss +0 -745
- package/src/scss/legend.scss +0 -206
- package/src/scss/mixins.scss +0 -0
- package/src/scss/variables.scss +0 -1
- 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
|
-
"
|
|
137
|
-
"
|
|
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":
|
|
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
|
-
"
|
|
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":
|
|
255
|
+
"min": 3,
|
|
220
256
|
"max": 5,
|
|
221
|
-
"scalingColumn": "
|
|
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":
|
|
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,
|