@cdc/chart 1.3.4 → 4.22.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 (75) hide show
  1. package/LICENSE +201 -0
  2. package/README.md +5 -5
  3. package/dist/cdcchart.js +6 -6
  4. package/examples/age-adjusted-rates.json +1486 -1218
  5. package/examples/case-rate-example-config.json +1 -1
  6. package/examples/covid-confidence-example-config.json +33 -33
  7. package/examples/covid-example-config.json +34 -34
  8. package/examples/covid-example-data-confidence.json +30 -30
  9. package/examples/covid-example-data.json +20 -20
  10. package/examples/cutoff-example-config.json +36 -34
  11. package/examples/cutoff-example-data.json +36 -36
  12. package/examples/date-exclusions-config.json +1 -1
  13. package/examples/dynamic-legends.json +125 -0
  14. package/examples/gallery/bar-chart-horizontal/horizontal-bar-chart-with-numbers-on-bar.json +192 -0
  15. package/examples/gallery/bar-chart-horizontal/horizontal-bar-chart.json +231 -0
  16. package/examples/gallery/bar-chart-horizontal/horizontal-stacked.json +240 -0
  17. package/examples/gallery/bar-chart-vertical/combo-line-chart.json +137 -0
  18. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-categorical.json +80 -0
  19. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json +81 -0
  20. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-with-confidence.json +68 -0
  21. package/examples/gallery/bar-chart-vertical/vertical-bar-chart.json +111 -0
  22. package/examples/gallery/lollipop/lollipop-style-horizontal.json +216 -0
  23. package/examples/gallery/paired-bar/paired-bar-chart.json +196 -0
  24. package/examples/horizontal-chart.json +36 -33
  25. package/examples/horizontal-stacked-bar-chart.json +34 -34
  26. package/examples/line-chart.json +75 -75
  27. package/examples/paired-bar-data.json +16 -14
  28. package/examples/paired-bar-example.json +48 -46
  29. package/examples/paired-bar-formatted.json +36 -36
  30. package/examples/planet-chart-horizontal-example-config.json +33 -33
  31. package/examples/planet-combo-example-config.json +34 -29
  32. package/examples/planet-example-config.json +35 -33
  33. package/examples/planet-example-data.json +56 -56
  34. package/examples/planet-pie-example-config.json +28 -26
  35. package/examples/private/filters.json +170 -0
  36. package/examples/private/line-test-data.json +22 -0
  37. package/examples/private/line-test-two.json +210 -0
  38. package/examples/private/line-test.json +102 -0
  39. package/examples/private/new.json +48800 -0
  40. package/examples/private/shawn.json +1106 -0
  41. package/examples/private/test.json +10123 -10123
  42. package/examples/private/yaxis-test.json +133 -0
  43. package/examples/private/yaxis-testing.csv +27 -0
  44. package/examples/private/yaxis.json +28 -0
  45. package/examples/stacked-vertical-bar-example.json +228 -0
  46. package/examples/temp-example-config.json +61 -54
  47. package/examples/temp-example-data.json +1 -1
  48. package/package.json +2 -2
  49. package/src/CdcChart.tsx +370 -458
  50. package/src/components/BarChart.tsx +449 -441
  51. package/src/components/DataTable.tsx +164 -180
  52. package/src/components/EditorPanel.js +1066 -663
  53. package/src/components/Legend.js +284 -0
  54. package/src/components/LineChart.tsx +114 -63
  55. package/src/components/LinearChart.tsx +394 -358
  56. package/src/components/PairedBarChart.tsx +216 -135
  57. package/src/components/PieChart.tsx +106 -135
  58. package/src/components/SparkLine.js +184 -205
  59. package/src/components/useIntersectionObserver.tsx +27 -0
  60. package/src/context.tsx +3 -3
  61. package/src/data/initial-state.js +44 -7
  62. package/src/hooks/useActiveElement.js +13 -13
  63. package/src/hooks/useChartClasses.js +41 -0
  64. package/src/hooks/useColorPalette.ts +56 -63
  65. package/src/hooks/useLegendClasses.js +28 -0
  66. package/src/hooks/useReduceData.ts +69 -37
  67. package/src/hooks/useRightAxis.js +25 -0
  68. package/src/hooks/useTopAxis.js +6 -0
  69. package/src/index.html +54 -55
  70. package/src/index.tsx +13 -16
  71. package/src/scss/DataTable.scss +5 -4
  72. package/src/scss/editor-panel.scss +103 -71
  73. package/src/scss/main.scss +277 -38
  74. package/src/scss/variables.scss +1 -1
  75. package/src/components/BarStackVertical.js +0 -0
@@ -0,0 +1,192 @@
1
+ {
2
+ "type": "chart",
3
+ "title": "Example of Horizontal Bar Chart with Numbers on Bar",
4
+ "theme": "theme-blue",
5
+ "fontSize": "medium",
6
+ "lineDatapointStyle": "hover",
7
+ "barHasBorder": "true",
8
+ "padding": {
9
+ "left": 5,
10
+ "right": 5
11
+ },
12
+ "yAxis": {
13
+ "size": 50,
14
+ "gridLines": false,
15
+ "type": "chart",
16
+ "title": "Example of Horizontal Bar Chart with Numbers on Bar",
17
+ "theme": "theme-blue",
18
+ "fontSize": "medium",
19
+ "lineDatapointStyle": "hover",
20
+ "barHasBorder": "true",
21
+ "padding": {
22
+ "left": 5,
23
+ "right": 5
24
+ },
25
+ "yAxis": {
26
+ "size": 50,
27
+ "gridLines": false,
28
+ "label": "Number of Accidents"
29
+ },
30
+ "barThickness": "0.5",
31
+ "height": 450,
32
+ "xAxis": {
33
+ "size": 75,
34
+ "tickRotation": 0,
35
+ "dataKey": "Injury Type",
36
+ "label": "Injury Type"
37
+ },
38
+ "table": {
39
+ "label": "Data Table",
40
+ "expanded": false,
41
+ "show": true
42
+ },
43
+ "legend": {
44
+ "behavior": "isolate",
45
+ "position": "right",
46
+ "label": "Accident Year"
47
+ },
48
+ "palette": "qualitative-bold",
49
+ "labels": false,
50
+ "dataFormat": {},
51
+ "confidenceKeys": {},
52
+ "data": [
53
+ {
54
+ "2017": "12",
55
+ "2018": "8",
56
+ "Injury Type": "Falling"
57
+ },
58
+ {
59
+ "2017": "25",
60
+ "2018": "10",
61
+ "Injury Type": "Machinery"
62
+ },
63
+ {
64
+ "2017": "1",
65
+ "2018": "0",
66
+ "Injury Type": "Alergic Reaction"
67
+ },
68
+ {
69
+ "2017": "3",
70
+ "2018": "4",
71
+ "Injury Type": "Chemical"
72
+ },
73
+ {
74
+ "2017": "3",
75
+ "2018": "2",
76
+ "Injury Type": "Burns"
77
+ }
78
+ ],
79
+ "dataFileName": "job_place_injury_2 years_FINAL.json",
80
+ "dataFileSourceType": "file",
81
+ "visualizationType": "Bar",
82
+ "visualizationSubType": "horizontal",
83
+ "series": [
84
+ {
85
+ "dataKey": "2017",
86
+ "type": "Bar"
87
+ },
88
+ {
89
+ "dataKey": "2018",
90
+ "type": "Bar"
91
+ }
92
+ ],
93
+ "runtime": {
94
+ "seriesLabels": {
95
+ "2017": "2017",
96
+ "2018": "2018"
97
+ },
98
+ "seriesLabelsAll": ["2017", "2018"],
99
+ "originalXAxis": {
100
+ "size": 75,
101
+ "tickRotation": 0,
102
+ "dataKey": "Injury Type",
103
+ "label": "Injury Type"
104
+ },
105
+ "seriesKeys": ["2017", "2018"],
106
+ "xAxis": {
107
+ "size": 50,
108
+ "gridLines": false,
109
+ "label": "Number of Accidents"
110
+ },
111
+ "yAxis": {
112
+ "size": 75,
113
+ "tickRotation": 0,
114
+ "dataKey": "Injury Type",
115
+ "label": "Injury Type"
116
+ },
117
+ "horizontal": true,
118
+ "uniqueId": 1635525153525,
119
+ "editorErrorMessage": ""
120
+ },
121
+ "barPadding": 40,
122
+ "barHeight": 25,
123
+ "labelPlacement": "Below Bar",
124
+ "displayNumbersOnBar": true
125
+ },
126
+ "barThickness": "0.5",
127
+ "height": 450,
128
+ "xAxis": {
129
+ "size": 75,
130
+ "tickRotation": 0,
131
+ "dataKey": "Injury Type",
132
+ "label": "Injury Type"
133
+ },
134
+ "table": {
135
+ "label": "Data Table",
136
+ "expanded": false,
137
+ "show": true
138
+ },
139
+ "legend": {
140
+ "behavior": "isolate",
141
+ "position": "right",
142
+ "label": "Accident Year"
143
+ },
144
+ "palette": "qualitative-bold",
145
+ "labels": false,
146
+ "dataFormat": {},
147
+ "confidenceKeys": {},
148
+ "data": [
149
+ {
150
+ "2017": "12",
151
+ "2018": "8",
152
+ "Injury Type": "Falling"
153
+ },
154
+ {
155
+ "2017": "25",
156
+ "2018": "10",
157
+ "Injury Type": "Machinery"
158
+ },
159
+ {
160
+ "2017": "1",
161
+ "2018": "0",
162
+ "Injury Type": "Alergic Reaction"
163
+ },
164
+ {
165
+ "2017": "3",
166
+ "2018": "4",
167
+ "Injury Type": "Chemical"
168
+ },
169
+ {
170
+ "2017": "3",
171
+ "2018": "2",
172
+ "Injury Type": "Burns"
173
+ }
174
+ ],
175
+ "dataFileName": "job_place_injury_2 years_FINAL.json",
176
+ "dataFileSourceType": "file",
177
+ "visualizationType": "Bar",
178
+ "visualizationSubType": "horizontal",
179
+ "series": [
180
+ {
181
+ "dataKey": "2017",
182
+ "type": "Bar"
183
+ },
184
+ {
185
+ "dataKey": "2018",
186
+ "type": "Bar"
187
+ }
188
+ ],
189
+ "barPadding": 40,
190
+ "barHeight": 25,
191
+ "description": " Also note that the border around the bars has been added in the Visualization Editor"
192
+ }
@@ -0,0 +1,231 @@
1
+ {
2
+ "type": "chart",
3
+ "title": "Example Horizontal Bar Chart",
4
+ "theme": "theme-teal",
5
+ "fontSize": "small",
6
+ "lineDatapointStyle": "hover",
7
+ "barHasBorder": "false",
8
+ "padding": {
9
+ "left": 5,
10
+ "right": 5
11
+ },
12
+ "yAxis": {
13
+ "size": 50,
14
+ "gridLines": false,
15
+ "type": "chart",
16
+ "title": "Example Horizontal Bar Chart",
17
+ "theme": "theme-teal",
18
+ "fontSize": "small",
19
+ "lineDatapointStyle": "hover",
20
+ "barHasBorder": "false",
21
+ "padding": {
22
+ "left": 5,
23
+ "right": 5
24
+ },
25
+ "yAxis": {
26
+ "size": 50,
27
+ "gridLines": false,
28
+ "label": "X-Axis Example Label",
29
+ "numTicks": "10"
30
+ },
31
+ "barThickness": "0.7",
32
+ "height": 560,
33
+ "xAxis": {
34
+ "type": "categorical",
35
+ "size": "0",
36
+ "tickRotation": 0,
37
+ "dataKey": "Group",
38
+ "label": ""
39
+ },
40
+ "table": {
41
+ "label": "Data Table",
42
+ "expanded": true,
43
+ "download": false,
44
+ "show": true
45
+ },
46
+ "legend": {
47
+ "behavior": "isolate",
48
+ "position": "right",
49
+ "label": "Type of Data"
50
+ },
51
+ "exclusions": {
52
+ "active": false,
53
+ "keys": []
54
+ },
55
+ "palette": "qualitative-soft",
56
+ "labels": false,
57
+ "dataFormat": {},
58
+ "confidenceKeys": {},
59
+ "data": [
60
+ {
61
+ "Group": "Combined Total of Group A",
62
+ "Vehicle": "100",
63
+ "Home": "120",
64
+ "Work": "140",
65
+ "Office": "120"
66
+ },
67
+ {
68
+ "Group": "Combined Total of Group B",
69
+ "Vehicle": "150",
70
+ "Home": "140",
71
+ "Work": "100",
72
+ "Office": "90"
73
+ },
74
+ {
75
+ "Group": "Combined Total of Group C",
76
+ "Vehicle": "90",
77
+ "Home": "90",
78
+ "Work": "80",
79
+ "Office": "80"
80
+ },
81
+ {
82
+ "Group": "Combined Total of Group D",
83
+ "Vehicle": "70",
84
+ "Home": "60",
85
+ "Work": "50",
86
+ "Office": "70"
87
+ }
88
+ ],
89
+ "visualizationType": "Bar",
90
+ "visualizationSubType": "horizontal",
91
+ "series": [
92
+ {
93
+ "dataKey": "Vehicle",
94
+ "type": "Bar"
95
+ },
96
+ {
97
+ "dataKey": "Home",
98
+ "type": "Bar"
99
+ },
100
+ {
101
+ "dataKey": "Work",
102
+ "type": "Bar"
103
+ },
104
+ {
105
+ "dataKey": "Office",
106
+ "type": "Bar"
107
+ }
108
+ ],
109
+ "description": "This example shows a horizontal bar chart created in the visualization editor in WCMS",
110
+ "runtime": {
111
+ "seriesLabels": {
112
+ "Vehicle": "Vehicle",
113
+ "Home": "Home",
114
+ "Work": "Work",
115
+ "Office": "Office"
116
+ },
117
+ "seriesLabelsAll": ["Vehicle", "Home", "Work", "Office"],
118
+ "originalXAxis": {
119
+ "type": "categorical",
120
+ "size": "0",
121
+ "tickRotation": 0,
122
+ "dataKey": "Group",
123
+ "label": ""
124
+ },
125
+ "seriesKeys": ["Vehicle", "Home", "Work", "Office"],
126
+ "xAxis": {
127
+ "size": 50,
128
+ "gridLines": false,
129
+ "label": "X-Axis Example Label",
130
+ "numTicks": "10"
131
+ },
132
+ "yAxis": {
133
+ "type": "categorical",
134
+ "size": "0",
135
+ "tickRotation": 0,
136
+ "dataKey": "Group",
137
+ "label": ""
138
+ },
139
+ "horizontal": true,
140
+ "uniqueId": 1644353484184,
141
+ "editorErrorMessage": ""
142
+ },
143
+ "barPadding": 40,
144
+ "barHeight": 25,
145
+ "labelPlacement": "Below Bar",
146
+ "label": "Accidents"
147
+ },
148
+ "barThickness": "0.7",
149
+ "height": 560,
150
+ "xAxis": {
151
+ "type": "categorical",
152
+ "size": "0",
153
+ "tickRotation": 0,
154
+ "dataKey": "Group",
155
+ "label": ""
156
+ },
157
+ "table": {
158
+ "label": "Data Table",
159
+ "expanded": true,
160
+ "download": false,
161
+ "show": true
162
+ },
163
+ "legend": {
164
+ "behavior": "isolate",
165
+ "position": "right",
166
+ "label": "Location"
167
+ },
168
+ "exclusions": {
169
+ "active": false,
170
+ "keys": []
171
+ },
172
+ "palette": "qualitative-soft",
173
+ "labels": false,
174
+ "dataFormat": {},
175
+ "confidenceKeys": {},
176
+ "data": [
177
+ {
178
+ "Group": "Group A Survey Results",
179
+ "Vehicle": "100",
180
+ "Home": "120",
181
+ "Work": "140",
182
+ "Office": "120"
183
+ },
184
+ {
185
+ "Group": "Group B Survey Results",
186
+ "Vehicle": "150",
187
+ "Home": "140",
188
+ "Work": "100",
189
+ "Office": "90"
190
+ },
191
+ {
192
+ "Group": "Group C Survey Results",
193
+ "Vehicle": "90",
194
+ "Home": "90",
195
+ "Work": "80",
196
+ "Office": "80"
197
+ },
198
+ {
199
+ "Group": "Group D Survey Results",
200
+ "Vehicle": "70",
201
+ "Home": "60",
202
+ "Work": "50",
203
+ "Office": "70"
204
+ }
205
+ ],
206
+ "visualizationType": "Bar",
207
+ "visualizationSubType": "horizontal",
208
+ "series": [
209
+ {
210
+ "dataKey": "Vehicle",
211
+ "type": "Bar"
212
+ },
213
+ {
214
+ "dataKey": "Home",
215
+ "type": "Bar"
216
+ },
217
+ {
218
+ "dataKey": "Work",
219
+ "type": "Bar"
220
+ },
221
+ {
222
+ "dataKey": "Office",
223
+ "type": "Bar"
224
+ }
225
+ ],
226
+ "description": "This example shows a horizontal bar chart created in the visualization editor in WCMS",
227
+ "barPadding": 40,
228
+ "barHeight": 25,
229
+ "dataFileName": "3-CSV_Source_Example_for_Horizontal_Bar_viz - Fixed.csv",
230
+ "dataFileSourceType": "file"
231
+ }
@@ -0,0 +1,240 @@
1
+ {
2
+ "type": "chart",
3
+ "title": "Example Stacked Horizontal Bar Chart",
4
+ "theme": "theme-blue",
5
+ "fontSize": "small",
6
+ "lineDatapointStyle": "hover",
7
+ "barHasBorder": "true",
8
+ "isLollipopChart": false,
9
+ "lollipopShape": "circle",
10
+ "lollipopColorStyle": "two-tone",
11
+ "visualizationSubType": "stacked",
12
+ "padding": {
13
+ "left": 5,
14
+ "right": 5
15
+ },
16
+ "yAxis": {
17
+ "hideAxis": true,
18
+ "hideLabel": false,
19
+ "hideTicks": false,
20
+ "size": "13",
21
+ "gridLines": false,
22
+ "type": "chart",
23
+ "title": "",
24
+ "theme": "theme-blue",
25
+ "fontSize": "medium",
26
+ "lineDatapointStyle": "hover",
27
+ "barHasBorder": "false",
28
+ "isLollipopChart": false,
29
+ "lollipopShape": "circle",
30
+ "lollipopColorStyle": "two-tone",
31
+ "visualizationSubType": "stacked",
32
+ "padding": {
33
+ "left": 5,
34
+ "right": 5
35
+ },
36
+ "yAxis": {
37
+ "hideAxis": false,
38
+ "hideLabel": false,
39
+ "hideTicks": false,
40
+ "size": 50,
41
+ "gridLines": false
42
+ },
43
+ "barThickness": 0.35,
44
+ "height": 260,
45
+ "xAxis": {
46
+ "type": "categorical",
47
+ "hideAxis": false,
48
+ "hideLabel": false,
49
+ "hideTicks": false,
50
+ "size": 75,
51
+ "tickRotation": 0,
52
+ "dataKey": "Year"
53
+ },
54
+ "table": {
55
+ "label": "Data Table",
56
+ "expanded": true,
57
+ "show": true
58
+ },
59
+ "orientation": "horizontal",
60
+ "legend": {
61
+ "behavior": "isolate",
62
+ "position": "right"
63
+ },
64
+ "exclusions": {
65
+ "active": false,
66
+ "keys": []
67
+ },
68
+ "palette": "qualitative-bold",
69
+ "isPaletteReversed": false,
70
+ "labels": false,
71
+ "dataFormat": {},
72
+ "confidenceKeys": {},
73
+ "data": [
74
+ {
75
+ "Year": "2015",
76
+ "Data 1": "25",
77
+ "Data 2": "20",
78
+ "Data 3": "55"
79
+ },
80
+ {
81
+ "Year": "2016",
82
+ "Data 1": "35",
83
+ "Data 2": "30",
84
+ "Data 3": "35"
85
+ },
86
+ {
87
+ "Year": "2017",
88
+ "Data 1": "22",
89
+ "Data 2": "38",
90
+ "Data 3": "40"
91
+ },
92
+ {
93
+ "Year": "2018",
94
+ "Data 1": "40",
95
+ "Data 2": "40",
96
+ "Data 3": "20"
97
+ }
98
+ ],
99
+ "dataFileName": "JSON_Source_Data_Example_Viz_Stacked.json",
100
+ "dataFileSourceType": "file",
101
+ "visualizationType": "Bar",
102
+ "runtime": {
103
+ "seriesLabels": {
104
+ "Data 1": "Data 1",
105
+ "Data 2": "Data 2",
106
+ "Data 3": "Data 3"
107
+ },
108
+ "seriesLabelsAll": ["Data 1", "Data 2", "Data 3"],
109
+ "originalXAxis": {
110
+ "type": "categorical",
111
+ "hideAxis": false,
112
+ "hideLabel": false,
113
+ "hideTicks": false,
114
+ "size": 75,
115
+ "tickRotation": 0,
116
+ "dataKey": "Year"
117
+ },
118
+ "seriesKeys": ["Data 1", "Data 2", "Data 3"],
119
+ "xAxis": {
120
+ "hideAxis": false,
121
+ "hideLabel": false,
122
+ "hideTicks": false,
123
+ "size": 50,
124
+ "gridLines": false
125
+ },
126
+ "yAxis": {
127
+ "type": "categorical",
128
+ "hideAxis": false,
129
+ "hideLabel": false,
130
+ "hideTicks": false,
131
+ "size": 75,
132
+ "tickRotation": 0,
133
+ "dataKey": "Year"
134
+ },
135
+ "horizontal": true,
136
+ "uniqueId": 1654259674387,
137
+ "editorErrorMessage": ""
138
+ },
139
+ "series": [
140
+ {
141
+ "dataKey": "Data 1",
142
+ "type": "Bar"
143
+ },
144
+ {
145
+ "dataKey": "Data 2",
146
+ "type": "Bar"
147
+ },
148
+ {
149
+ "dataKey": "Data 3",
150
+ "type": "Bar"
151
+ }
152
+ ],
153
+ "barHeight": 25,
154
+ "barPadding": 40,
155
+ "labelPlacement": "Below Bar",
156
+ "displayNumbersOnBar": true,
157
+ "label": ""
158
+ },
159
+ "barThickness": 0.35,
160
+ "height": 288,
161
+ "xAxis": {
162
+ "type": "categorical",
163
+ "hideAxis": true,
164
+ "hideLabel": true,
165
+ "hideTicks": true,
166
+ "size": "45",
167
+ "tickRotation": 0,
168
+ "dataKey": "Year",
169
+ "label": "Year"
170
+ },
171
+ "table": {
172
+ "label": "Data Table",
173
+ "expanded": false,
174
+ "show": true,
175
+ "indexLabel": "Data Type"
176
+ },
177
+ "orientation": "horizontal",
178
+ "legend": {
179
+ "behavior": "isolate",
180
+ "position": "right",
181
+ "reverseLabelOrder": false
182
+ },
183
+ "exclusions": {
184
+ "active": false,
185
+ "keys": []
186
+ },
187
+ "palette": "qualitative-soft",
188
+ "isPaletteReversed": false,
189
+ "labels": false,
190
+ "dataFormat": {
191
+ "suffix": "%"
192
+ },
193
+ "confidenceKeys": {},
194
+ "data": [
195
+ {
196
+ "Year": "2015",
197
+ "Data 1": "25",
198
+ "Data 2": "20",
199
+ "Data 3": "55"
200
+ },
201
+ {
202
+ "Year": "2016",
203
+ "Data 1": "35",
204
+ "Data 2": "30",
205
+ "Data 3": "35"
206
+ },
207
+ {
208
+ "Year": "2017",
209
+ "Data 1": "22",
210
+ "Data 2": "38",
211
+ "Data 3": "40"
212
+ },
213
+ {
214
+ "Year": "2018",
215
+ "Data 1": "40",
216
+ "Data 2": "40",
217
+ "Data 3": "20"
218
+ }
219
+ ],
220
+ "dataFileName": "JSON_Source_Data_Example_Viz_Stacked.json",
221
+ "dataFileSourceType": "file",
222
+ "visualizationType": "Bar",
223
+ "series": [
224
+ {
225
+ "dataKey": "Data 1",
226
+ "type": "Bar"
227
+ },
228
+ {
229
+ "dataKey": "Data 2",
230
+ "type": "Bar"
231
+ },
232
+ {
233
+ "dataKey": "Data 3",
234
+ "type": "Bar"
235
+ }
236
+ ],
237
+ "barHeight": 32,
238
+ "barPadding": 40,
239
+ "description": "Subtext"
240
+ }