@cdc/chart 4.23.6 → 4.23.8

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 (48) hide show
  1. package/dist/cdcchart.js +29981 -29995
  2. package/examples/feature/__data__/area-chart-date-apple.json +5122 -0
  3. package/examples/feature/__data__/city-temperature.json +2198 -0
  4. package/examples/feature/__data__/planet-example-data.json +1 -1
  5. package/examples/feature/area/area-chart-category.json +45 -45
  6. package/examples/feature/area/area-chart-date-apple.json +10376 -0
  7. package/examples/feature/area/area-chart-date-city-temperature.json +4528 -0
  8. package/examples/feature/area/area-chart-date.json +111 -3
  9. package/examples/feature/combo/right-issues.json +1 -1
  10. package/examples/feature/forecasting/combo-forecasting.json +72 -46
  11. package/examples/feature/forecasting/effective_reproduction.json +57 -8
  12. package/examples/feature/forecasting/forecasting.json +12 -3
  13. package/examples/feature/forest-plot/broken.json +700 -0
  14. package/examples/feature/forest-plot/data.csv +24 -0
  15. package/examples/feature/forest-plot/forest-plot.json +717 -0
  16. package/examples/feature/line/line-chart.json +11 -11
  17. package/examples/feature/pie/planet-pie-example-config.json +1 -1
  18. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-categorical.json +167 -20
  19. package/examples/private/confidence_interval_test.json +248 -0
  20. package/examples/private/tooltip-issue.json +45275 -0
  21. package/index.html +13 -11
  22. package/package.json +4 -3
  23. package/src/CdcChart.jsx +78 -27
  24. package/src/components/AreaChart.jsx +65 -151
  25. package/src/components/BarChart.Horizontal.jsx +251 -0
  26. package/src/components/BarChart.StackedHorizontal.jsx +118 -0
  27. package/src/components/BarChart.StackedVertical.jsx +93 -0
  28. package/src/components/BarChart.Vertical.jsx +204 -0
  29. package/src/components/BarChart.jsx +17 -667
  30. package/src/components/BarChartType.jsx +15 -0
  31. package/src/components/BrushHandle.jsx +17 -0
  32. package/src/components/DataTable.jsx +67 -22
  33. package/src/components/EditorPanel.jsx +426 -358
  34. package/src/components/Forecasting.jsx +23 -86
  35. package/src/components/ForestPlot.jsx +191 -0
  36. package/src/components/ForestPlotSettings.jsx +508 -0
  37. package/src/components/Legend.jsx +10 -8
  38. package/src/components/LineChart.jsx +31 -6
  39. package/src/components/LinearChart.jsx +317 -230
  40. package/src/components/Series.jsx +40 -4
  41. package/src/data/initial-state.js +50 -3
  42. package/src/hooks/useBarChart.js +186 -0
  43. package/src/hooks/useEditorPermissions.js +218 -0
  44. package/src/hooks/useMinMax.js +18 -5
  45. package/src/hooks/useRightAxis.js +2 -1
  46. package/src/hooks/useScales.js +45 -2
  47. package/src/hooks/useTooltip.jsx +407 -0
  48. package/src/scss/main.scss +11 -17
@@ -42,28 +42,28 @@
42
42
  {
43
43
  "Date": "1/15/2016",
44
44
  "Data 1": "foo",
45
- "Data 2": "135",
45
+ "Data 2": "1350",
46
46
  "Data 3": "300",
47
- "Data 4": "95",
48
- "Data 5": "120",
49
- "Data 6": "310"
47
+ "Data 4": "950",
48
+ "Data 5": "1200",
49
+ "Data 6": "3100"
50
50
  },
51
51
  {
52
52
  "Date": "2/15/2016",
53
53
  "Data 1": "40",
54
- "Data 2": "90",
54
+ "Data 2": "900",
55
55
  "Data 3": "240",
56
56
  "Data 4": "60",
57
- "Data 5": "160",
58
- "Data 6": "200"
57
+ "Data 5": "1600",
58
+ "Data 6": "2000"
59
59
  },
60
60
  {
61
61
  "Date": "3/15/2016",
62
62
  "Data 1": "50",
63
63
  "Data 2": "300",
64
- "Data 3": "290",
64
+ "Data 3": "2900",
65
65
  "Data 4": "100",
66
- "Data 5": "200",
66
+ "Data 5": "2000",
67
67
  "Data 6": "250"
68
68
  },
69
69
  {
@@ -71,7 +71,7 @@
71
71
  "Data 1": "",
72
72
  "Data 2": "160",
73
73
  "Data 3": "230",
74
- "Data 4": "180",
74
+ "Data 4": "1800",
75
75
  "Data 5": "160",
76
76
  "Data 6": "220"
77
77
  },
@@ -121,4 +121,4 @@
121
121
  "type": "Line"
122
122
  }
123
123
  ]
124
- }
124
+ }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "title": "Planet Radius (Pie Example)",
3
3
  "dataUrl": "/examples/feature/__data__/planet-example-data.json",
4
- "animate": true,
4
+ "animate": false,
5
5
  "animateReplay": true,
6
6
  "visualizationType": "Pie",
7
7
  "palette": "qualitative-soft",
@@ -1,40 +1,201 @@
1
1
  {
2
2
  "type": "chart",
3
3
  "title": "Categorical Bar Chart",
4
+ "showTitle": true,
5
+ "showDownloadMediaButton": false,
4
6
  "theme": "theme-blue",
7
+ "animate": false,
5
8
  "fontSize": "medium",
6
- "height": 300,
9
+ "lineDatapointStyle": "hover",
10
+ "barHasBorder": "false",
11
+ "isLollipopChart": false,
12
+ "lollipopShape": "circle",
13
+ "lollipopColorStyle": "two-tone",
14
+ "visualizationSubType": "regular",
15
+ "barStyle": "",
16
+ "roundingStyle": "standard",
17
+ "tipRounding": "top",
18
+ "general": {
19
+ "showDownloadButton": false
20
+ },
7
21
  "padding": {
8
22
  "left": 5,
9
23
  "right": 5
10
24
  },
11
25
  "yAxis": {
26
+ "hideAxis": false,
27
+ "displayNumbersOnBar": false,
28
+ "hideLabel": false,
29
+ "hideTicks": false,
12
30
  "size": "71",
13
- "gridLines": true,
31
+ "gridLines": false,
32
+ "enablePadding": false,
33
+ "min": "",
34
+ "max": "",
35
+ "labelColor": "#333",
36
+ "tickLabelColor": "#333",
37
+ "tickColor": "#333",
38
+ "rightHideAxis": false,
39
+ "rightAxisSize": 0,
40
+ "rightLabel": "",
41
+ "rightLabelOffsetSize": 0,
42
+ "rightAxisLabelColor": "#333",
43
+ "rightAxisTickLabelColor": "#333",
44
+ "rightAxisTickColor": "#333",
45
+ "numTicks": "",
46
+ "axisPadding": 0,
47
+ "tickRotation": 0,
48
+ "anchors": [],
14
49
  "label": "Y-Axis Example Label"
15
50
  },
51
+ "boxplot": {
52
+ "plots": [],
53
+ "borders": "true",
54
+ "firstQuartilePercentage": 25,
55
+ "thirdQuartilePercentage": 75,
56
+ "boxWidthPercentage": 40,
57
+ "plotOutlierValues": false,
58
+ "plotNonOutlierValues": true,
59
+ "legend": {
60
+ "showHowToReadText": false,
61
+ "howToReadText": ""
62
+ },
63
+ "labels": {
64
+ "q1": "Lower Quartile",
65
+ "q2": "q2",
66
+ "q3": "Upper Quartile",
67
+ "q4": "q4",
68
+ "minimum": "Minimum",
69
+ "maximum": "Maximum",
70
+ "mean": "Mean",
71
+ "median": "Median",
72
+ "sd": "Standard Deviation",
73
+ "iqr": "Interquartile Range",
74
+ "total": "Total",
75
+ "outliers": "Outliers",
76
+ "values": "Values",
77
+ "lowerBounds": "Lower Bounds",
78
+ "upperBounds": "Upper Bounds"
79
+ }
80
+ },
81
+ "topAxis": {
82
+ "hasLine": false
83
+ },
84
+ "isLegendValue": false,
16
85
  "barThickness": "0.5",
86
+ "barHeight": 25,
87
+ "barSpace": 15,
88
+ "heights": {
89
+ "vertical": 300,
90
+ "horizontal": 750
91
+ },
17
92
  "xAxis": {
93
+ "anchors": [],
94
+ "type": "categorical",
95
+ "showTargetLabel": true,
96
+ "targetLabel": "Target",
97
+ "hideAxis": false,
98
+ "hideLabel": false,
99
+ "hideTicks": false,
18
100
  "size": "58",
19
101
  "tickRotation": 0,
102
+ "min": "",
103
+ "max": "",
104
+ "labelColor": "#333",
105
+ "tickLabelColor": "#333",
106
+ "tickColor": "#333",
107
+ "numTicks": "",
108
+ "labelOffset": 65,
109
+ "axisPadding": 0,
110
+ "target": 0,
20
111
  "dataKey": "Location",
21
112
  "label": "X-Axis Example Label"
22
113
  },
23
114
  "table": {
24
115
  "label": "Data Table",
25
- "expanded": true
116
+ "expanded": true,
117
+ "limitHeight": false,
118
+ "height": "",
119
+ "caption": "",
120
+ "showDownloadUrl": false,
121
+ "showDataTableLink": true,
122
+ "indexLabel": "",
123
+ "download": false,
124
+ "showVertical": false,
125
+ "show": true
26
126
  },
127
+ "orientation": "vertical",
128
+ "color": "pinkpurple",
129
+ "columns": {},
27
130
  "legend": {
28
131
  "behavior": "highlight",
132
+ "singleRow": false,
133
+ "colorCode": "",
134
+ "reverseLabelOrder": false,
135
+ "description": "",
136
+ "dynamicLegend": false,
137
+ "dynamicLegendDefaultText": "Show All",
138
+ "dynamicLegendItemLimit": 5,
139
+ "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
140
+ "dynamicLegendChartMessage": "Select Options from the Legend",
29
141
  "position": "right",
30
142
  "label": "Sample Groups"
31
143
  },
144
+ "exclusions": {
145
+ "active": false,
146
+ "keys": []
147
+ },
32
148
  "palette": "qualitative-bold",
149
+ "isPaletteReversed": false,
150
+ "twoColor": {
151
+ "palette": "monochrome-1",
152
+ "isPaletteReversed": false
153
+ },
33
154
  "labels": false,
34
155
  "dataFormat": {
35
- "suffix": " "
156
+ "commas": false,
157
+ "prefix": "",
158
+ "suffix": " ",
159
+ "abbreviated": false,
160
+ "bottomSuffix": "",
161
+ "bottomPrefix": "",
162
+ "bottomAbbreviated": false
36
163
  },
37
164
  "confidenceKeys": {},
165
+ "visual": {
166
+ "border": true,
167
+ "accent": true,
168
+ "background": true,
169
+ "verticalHoverLine": false,
170
+ "horizontalHoverLine": false
171
+ },
172
+ "useLogScale": false,
173
+ "filterBehavior": "Filter Change",
174
+ "highlightedBarValues": [],
175
+ "series": [
176
+ {
177
+ "dataKey": "Group A",
178
+ "type": "Bar",
179
+ "tooltip": true,
180
+ "axis": "Left"
181
+ },
182
+ {
183
+ "dataKey": "Group B",
184
+ "type": "Bar",
185
+ "tooltip": true,
186
+ "axis": "Left"
187
+ },
188
+ {
189
+ "dataKey": "Group C",
190
+ "type": "Bar",
191
+ "tooltip": true,
192
+ "axis": "Left"
193
+ }
194
+ ],
195
+ "tooltips": {
196
+ "opacity": 100
197
+ },
198
+ "height": 300,
38
199
  "data": [
39
200
  {
40
201
  "Location": "Vehicle",
@@ -61,20 +222,6 @@
61
222
  "Group C": "80"
62
223
  }
63
224
  ],
64
- "visualizationType": "Bar",
65
- "series": [
66
- {
67
- "dataKey": "Group A",
68
- "type": "Bar"
69
- },
70
- {
71
- "dataKey": "Group B",
72
- "type": "Bar"
73
- },
74
- {
75
- "dataKey": "Group C",
76
- "type": "Bar"
77
- }
78
- ],
225
+ "visualizationType": "Combo",
79
226
  "description": "This example shows a Standard Categorical (Non-Time-Based) Bar Chart created in the visualization editor in WCMS"
80
- }
227
+ }
@@ -0,0 +1,248 @@
1
+ {
2
+ "type": "chart",
3
+ "title": "",
4
+ "showTitle": true,
5
+ "showDownloadMediaButton": false,
6
+ "theme": "theme-blue",
7
+ "animate": false,
8
+ "fontSize": "medium",
9
+ "lineDatapointStyle": "hover",
10
+ "barHasBorder": "false",
11
+ "isLollipopChart": false,
12
+ "lollipopShape": "circle",
13
+ "lollipopColorStyle": "two-tone",
14
+ "visualizationSubType": "regular",
15
+ "barStyle": "",
16
+ "roundingStyle": "standard",
17
+ "tipRounding": "top",
18
+ "isResponsiveTicks": false,
19
+ "general": {
20
+ "showDownloadButton": false
21
+ },
22
+ "padding": {
23
+ "left": 5,
24
+ "right": 5
25
+ },
26
+ "yAxis": {
27
+ "hideAxis": false,
28
+ "displayNumbersOnBar": false,
29
+ "hideLabel": false,
30
+ "hideTicks": false,
31
+ "size": 50,
32
+ "gridLines": false,
33
+ "enablePadding": false,
34
+ "min": "",
35
+ "max": "",
36
+ "labelColor": "#333",
37
+ "tickLabelColor": "#333",
38
+ "tickColor": "#333",
39
+ "rightHideAxis": true,
40
+ "rightAxisSize": 0,
41
+ "rightLabel": "",
42
+ "rightLabelOffsetSize": 0,
43
+ "rightAxisLabelColor": "#333",
44
+ "rightAxisTickLabelColor": "#333",
45
+ "rightAxisTickColor": "#333",
46
+ "numTicks": "",
47
+ "axisPadding": 0,
48
+ "tickRotation": 0,
49
+ "anchors": []
50
+ },
51
+ "boxplot": {
52
+ "plots": [],
53
+ "borders": "true",
54
+ "firstQuartilePercentage": 25,
55
+ "thirdQuartilePercentage": 75,
56
+ "boxWidthPercentage": 40,
57
+ "plotOutlierValues": false,
58
+ "plotNonOutlierValues": true,
59
+ "legend": {
60
+ "showHowToReadText": false,
61
+ "howToReadText": ""
62
+ },
63
+ "labels": {
64
+ "q1": "Lower Quartile",
65
+ "q2": "q2",
66
+ "q3": "Upper Quartile",
67
+ "q4": "q4",
68
+ "minimum": "Minimum",
69
+ "maximum": "Maximum",
70
+ "mean": "Mean",
71
+ "median": "Median",
72
+ "sd": "Standard Deviation",
73
+ "iqr": "Interquartile Range",
74
+ "total": "Total",
75
+ "outliers": "Outliers",
76
+ "values": "Values",
77
+ "lowerBounds": "Lower Bounds",
78
+ "upperBounds": "Upper Bounds"
79
+ }
80
+ },
81
+ "topAxis": {
82
+ "hasLine": false
83
+ },
84
+ "isLegendValue": false,
85
+ "barThickness": 0.35,
86
+ "barHeight": 25,
87
+ "barSpace": 15,
88
+ "heights": {
89
+ "vertical": 300,
90
+ "horizontal": 750
91
+ },
92
+ "xAxis": {
93
+ "anchors": [],
94
+ "type": "categorical",
95
+ "showTargetLabel": true,
96
+ "targetLabel": "Target",
97
+ "hideAxis": false,
98
+ "hideLabel": false,
99
+ "hideTicks": false,
100
+ "size": 75,
101
+ "tickRotation": 0,
102
+ "min": "",
103
+ "max": "",
104
+ "labelColor": "#333",
105
+ "tickLabelColor": "#333",
106
+ "tickColor": "#333",
107
+ "numTicks": "",
108
+ "labelOffset": 65,
109
+ "axisPadding": 0,
110
+ "target": 0,
111
+ "maxTickRotation": 0,
112
+ "dataKey": "date"
113
+ },
114
+ "table": {
115
+ "label": "Data Table",
116
+ "expanded": true,
117
+ "limitHeight": false,
118
+ "height": "",
119
+ "caption": "",
120
+ "showDownloadUrl": false,
121
+ "showDataTableLink": true,
122
+ "indexLabel": "",
123
+ "download": false,
124
+ "showVertical": true,
125
+ "show": true
126
+ },
127
+ "orientation": "vertical",
128
+ "color": "pinkpurple",
129
+ "columns": {},
130
+ "legend": {
131
+ "behavior": "isolate",
132
+ "singleRow": false,
133
+ "colorCode": "",
134
+ "reverseLabelOrder": false,
135
+ "description": "",
136
+ "dynamicLegend": false,
137
+ "dynamicLegendDefaultText": "Show All",
138
+ "dynamicLegendItemLimit": 5,
139
+ "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
140
+ "dynamicLegendChartMessage": "Select Options from the Legend"
141
+ },
142
+ "exclusions": {
143
+ "active": false,
144
+ "keys": []
145
+ },
146
+ "palette": "qualitative-bold",
147
+ "isPaletteReversed": false,
148
+ "twoColor": {
149
+ "palette": "monochrome-1",
150
+ "isPaletteReversed": false
151
+ },
152
+ "labels": false,
153
+ "dataFormat": {
154
+ "commas": false,
155
+ "prefix": "",
156
+ "suffix": "",
157
+ "abbreviated": false,
158
+ "bottomSuffix": "",
159
+ "bottomPrefix": "",
160
+ "bottomAbbreviated": false
161
+ },
162
+ "confidenceKeys": {
163
+ "upper": "upper",
164
+ "lower": "lower"
165
+ },
166
+ "visual": {
167
+ "border": true,
168
+ "accent": true,
169
+ "background": true,
170
+ "verticalHoverLine": false,
171
+ "horizontalHoverLine": false
172
+ },
173
+ "useLogScale": false,
174
+ "filterBehavior": "Filter Change",
175
+ "highlightedBarValues": [],
176
+ "series": [
177
+ {
178
+ "dataKey": "value",
179
+ "type": "Bar",
180
+ "axis": "Left",
181
+ "tooltip": true
182
+ }
183
+ ],
184
+ "tooltips": {
185
+ "opacity": 90
186
+ },
187
+ "visualizationType": "Bar",
188
+ "data": [
189
+ {
190
+ "date": "1/1/2022",
191
+ "value": "100",
192
+ "upper": "150",
193
+ "lower": "50"
194
+ },
195
+ {
196
+ "date": "2/1/2022",
197
+ "value": "135",
198
+ "upper": "200",
199
+ "lower": "-50"
200
+ },
201
+ {
202
+ "date": "3/1/2022",
203
+ "value": "80",
204
+ "upper": "175",
205
+ "lower": "5"
206
+ },
207
+ {
208
+ "date": "4/1/2022",
209
+ "value": "225",
210
+ "upper": "330",
211
+ "lower": "-75"
212
+ }
213
+ ],
214
+ "dataFileName": "negative_ci.csv",
215
+ "dataFileSourceType": "file",
216
+ "formattedData": [
217
+ {
218
+ "date": "1/1/2022",
219
+ "value": "100",
220
+ "upper": "150",
221
+ "lower": "50"
222
+ },
223
+ {
224
+ "date": "2/1/2022",
225
+ "value": "135",
226
+ "upper": "200",
227
+ "lower": "-50"
228
+ },
229
+ {
230
+ "date": "3/1/2022",
231
+ "value": "80",
232
+ "upper": "175",
233
+ "lower": "5"
234
+ },
235
+ {
236
+ "date": "4/1/2022",
237
+ "value": "225",
238
+ "upper": "330",
239
+ "lower": "-75"
240
+ }
241
+ ],
242
+ "dataDescription": {
243
+ "horizontal": false,
244
+ "series": false
245
+ },
246
+ "validated": 4.23,
247
+ "dynamicMarginTop": 0
248
+ }