@cdc/chart 1.3.4 → 9.22.9

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 (41) hide show
  1. package/dist/cdcchart.js +6 -6
  2. package/examples/cutoff-example-config.json +2 -0
  3. package/examples/cutoff-example-data.json +1 -1
  4. package/examples/gallery/bar-chart-horizontal/horizontal-bar-chart-with-numbers-on-bar.json +198 -0
  5. package/examples/gallery/bar-chart-horizontal/horizontal-bar-chart.json +241 -0
  6. package/examples/gallery/bar-chart-horizontal/horizontal-stacked.json +248 -0
  7. package/examples/gallery/bar-chart-vertical/combo-line-chart.json +137 -0
  8. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-categorical.json +80 -0
  9. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json +81 -0
  10. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-with-confidence.json +68 -0
  11. package/examples/gallery/bar-chart-vertical/vertical-bar-chart.json +111 -0
  12. package/examples/gallery/lollipop/lollipop-style-horizontal.json +220 -0
  13. package/examples/gallery/paired-bar/paired-bar-chart.json +196 -0
  14. package/examples/horizontal-chart.json +3 -0
  15. package/examples/paired-bar-data.json +1 -1
  16. package/examples/paired-bar-example.json +2 -0
  17. package/examples/planet-combo-example-config.json +2 -0
  18. package/examples/planet-example-config.json +2 -2
  19. package/examples/planet-example-data.json +1 -1
  20. package/examples/planet-pie-example-config.json +2 -0
  21. package/examples/private/line-test-data.json +22 -0
  22. package/examples/private/line-test-two.json +216 -0
  23. package/examples/private/line-test.json +102 -0
  24. package/examples/stacked-vertical-bar-example.json +228 -0
  25. package/package.json +3 -3
  26. package/src/CdcChart.tsx +79 -47
  27. package/src/components/BarChart.tsx +82 -39
  28. package/src/components/DataTable.tsx +17 -10
  29. package/src/components/EditorPanel.js +233 -169
  30. package/src/components/LineChart.tsx +3 -0
  31. package/src/components/LinearChart.tsx +171 -77
  32. package/src/components/PairedBarChart.tsx +139 -42
  33. package/src/components/PieChart.tsx +31 -6
  34. package/src/components/SparkLine.js +4 -1
  35. package/src/components/useIntersectionObserver.tsx +32 -0
  36. package/src/data/initial-state.js +17 -7
  37. package/src/hooks/useReduceData.ts +50 -23
  38. package/src/index.html +5 -9
  39. package/src/scss/editor-panel.scss +34 -4
  40. package/src/scss/main.scss +165 -5
  41. package/src/components/BarStackVertical.js +0 -0
@@ -0,0 +1,137 @@
1
+ {
2
+ "type": "chart",
3
+ "title": "Combo Bar-Line Chart",
4
+ "theme": "theme-purple",
5
+ "fontSize": "medium",
6
+ "height": "332",
7
+ "padding": {
8
+ "left": 5,
9
+ "right": 5
10
+ },
11
+ "yAxis": {
12
+ "size": "68",
13
+ "gridLines": true,
14
+ "label": "Y-Axis Label Example"
15
+ },
16
+ "barThickness": 0.35,
17
+ "xAxis": {
18
+ "size": "78",
19
+ "tickRotation": "25",
20
+ "dataKey": "Date",
21
+ "label": "X-Axis Example Label",
22
+ "type": "date",
23
+ "dateParseFormat": "%d/%m/%Y",
24
+ "dateDisplayFormat": "%d/%m/%Y"
25
+ },
26
+ "table": {
27
+ "label": "Data Table",
28
+ "expanded": true,
29
+ "download": true
30
+ },
31
+ "legend": {
32
+ "behavior": "highlight",
33
+ "position": "right",
34
+ "label": "Data Type"
35
+ },
36
+ "palette": "qualitative-soft",
37
+ "labels": false,
38
+ "dataFormat": {},
39
+ "confidenceKeys": {},
40
+ "data": [
41
+ {
42
+ "Date": "1/15/2016",
43
+ "Data 1": "90",
44
+ "Data 2": "110",
45
+ "Data 3": "100",
46
+ "Data 4": "90",
47
+ "Monthly-Goal": "100"
48
+ },
49
+ {
50
+ "Date": "2/15/2016",
51
+ "Data 1": "100",
52
+ "Data 2": "110",
53
+ "Data 3": "100",
54
+ "Data 4": "100",
55
+ "Monthly-Goal": "100"
56
+ },
57
+ {
58
+ "Date": "3/15/2016",
59
+ "Data 1": "80",
60
+ "Data 2": "90",
61
+ "Data 3": "100",
62
+ "Data 4": "120",
63
+ "Monthly-Goal": "110"
64
+ },
65
+ {
66
+ "Date": "4/15/2016",
67
+ "Data 1": "80",
68
+ "Data 2": "90",
69
+ "Data 3": "110",
70
+ "Data 4": "120",
71
+ "Monthly-Goal": "110"
72
+ },
73
+ {
74
+ "Date": "5/15/2016",
75
+ "Data 1": "70",
76
+ "Data 2": "90",
77
+ "Data 3": "110",
78
+ "Data 4": "130",
79
+ "Monthly-Goal": "120"
80
+ },
81
+ {
82
+ "Date": "6/15/2016",
83
+ "Data 1": "100",
84
+ "Data 2": "120",
85
+ "Data 3": "120",
86
+ "Data 4": "130",
87
+ "Monthly-Goal": "120"
88
+ },
89
+ {
90
+ "Date": "7/15/2016",
91
+ "Data 1": "110",
92
+ "Data 2": "140",
93
+ "Data 3": "120",
94
+ "Data 4": "130",
95
+ "Monthly-Goal": "130"
96
+ },
97
+ {
98
+ "Date": "8/15/2016",
99
+ "Data 1": "110",
100
+ "Data 2": "130",
101
+ "Data 3": "120",
102
+ "Data 4": "140",
103
+ "Monthly-Goal": "130"
104
+ },
105
+ {
106
+ "Date": "9/15/2016",
107
+ "Data 1": "120",
108
+ "Data 2": "130",
109
+ "Data 3": "120",
110
+ "Data 4": "150",
111
+ "Monthly-Goal": "140"
112
+ }
113
+ ],
114
+ "visualizationType": "Combo",
115
+ "series": [
116
+ {
117
+ "dataKey": "Data 1",
118
+ "type": "Bar"
119
+ },
120
+ {
121
+ "dataKey": "Data 2",
122
+ "type": "Bar"
123
+ },
124
+ {
125
+ "dataKey": "Data 3",
126
+ "type": "Bar"
127
+ },
128
+ {
129
+ "dataKey": "Data 4",
130
+ "type": "Bar"
131
+ },
132
+ {
133
+ "dataKey": "Monthly-Goal",
134
+ "type": "Line"
135
+ }
136
+ ]
137
+ }
@@ -0,0 +1,80 @@
1
+ {
2
+ "type": "chart",
3
+ "title": "Categorical Bar Chart",
4
+ "theme": "theme-blue",
5
+ "fontSize": "medium",
6
+ "height": 300,
7
+ "padding": {
8
+ "left": 5,
9
+ "right": 5
10
+ },
11
+ "yAxis": {
12
+ "size": "71",
13
+ "gridLines": true,
14
+ "label": "Y-Axis Example Label"
15
+ },
16
+ "barThickness": "0.5",
17
+ "xAxis": {
18
+ "size": "58",
19
+ "tickRotation": 0,
20
+ "dataKey": "Location",
21
+ "label": "X-Axis Example Label"
22
+ },
23
+ "table": {
24
+ "label": "Data Table",
25
+ "expanded": true
26
+ },
27
+ "legend": {
28
+ "behavior": "highlight",
29
+ "position": "right",
30
+ "label": "Sample Groups"
31
+ },
32
+ "palette": "qualitative-bold",
33
+ "labels": false,
34
+ "dataFormat": {
35
+ "suffix": " "
36
+ },
37
+ "confidenceKeys": {},
38
+ "data": [
39
+ {
40
+ "Location": "Vehicle",
41
+ "Group A": "100",
42
+ "Group B": "150",
43
+ "Group C": "90"
44
+ },
45
+ {
46
+ "Location": "Home",
47
+ "Group A": "120",
48
+ "Group B": "140",
49
+ "Group C": "90"
50
+ },
51
+ {
52
+ "Location": "Work",
53
+ "Group A": "140",
54
+ "Group B": "100",
55
+ "Group C": "80"
56
+ },
57
+ {
58
+ "Location": "Office",
59
+ "Group A": "120",
60
+ "Group B": "90",
61
+ "Group C": "80"
62
+ }
63
+ ],
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
+ ],
79
+ "description": "This example shows a Standard Categorical (Non-Time-Based) Bar Chart created in the visualization editor in WCMS"
80
+ }
@@ -0,0 +1,81 @@
1
+ {
2
+ "type": "chart",
3
+ "title": "Example Stacked Bar Chart",
4
+ "theme": "theme-orange",
5
+ "fontSize": "medium",
6
+ "height": "375",
7
+ "padding": {
8
+ "left": 5,
9
+ "right": 5
10
+ },
11
+ "yAxis": {
12
+ "size": "64",
13
+ "gridLines": false,
14
+ "label": "Y-Axis Label Example"
15
+ },
16
+ "barThickness": 0.35,
17
+ "xAxis": {
18
+ "size": "67",
19
+ "tickRotation": "25",
20
+ "dataKey": "Year",
21
+ "label": "X-Axis Label Example"
22
+ },
23
+ "table": {
24
+ "label": "Data Table",
25
+ "expanded": true,
26
+ "download": true
27
+ },
28
+ "legend": {
29
+ "behavior": "isolate",
30
+ "position": "right",
31
+ "label": "Data Type"
32
+ },
33
+ "palette": "qualitative-bold",
34
+ "labels": false,
35
+ "dataFormat": {
36
+ "suffix": "%"
37
+ },
38
+ "confidenceKeys": {},
39
+ "data": [
40
+ {
41
+ "Year": "2015",
42
+ "Data 1": "25",
43
+ "Data 2": "20",
44
+ "Data 3": "55"
45
+ },
46
+ {
47
+ "Year": "2016",
48
+ "Data 1": "35",
49
+ "Data 2": "30",
50
+ "Data 3": "35"
51
+ },
52
+ {
53
+ "Year": "2017",
54
+ "Data 1": "22",
55
+ "Data 2": "38",
56
+ "Data 3": "40"
57
+ },
58
+ {
59
+ "Year": "2018",
60
+ "Data 1": "40",
61
+ "Data 2": "40",
62
+ "Data 3": "20"
63
+ }
64
+ ],
65
+ "visualizationType": "Bar",
66
+ "visualizationSubType": "stacked",
67
+ "series": [
68
+ {
69
+ "dataKey": "Data 1",
70
+ "type": "Bar"
71
+ },
72
+ {
73
+ "dataKey": "Data 2",
74
+ "type": "Bar"
75
+ },
76
+ {
77
+ "dataKey": "Data 3",
78
+ "type": "Bar"
79
+ }
80
+ ]
81
+ }
@@ -0,0 +1,68 @@
1
+ {
2
+ "type": "chart",
3
+ "title": "Bar Chart with Confidence Intervals",
4
+ "theme": "theme-green",
5
+ "fontSize": "medium",
6
+ "height": 300,
7
+ "padding": {
8
+ "left": 5,
9
+ "right": 5
10
+ },
11
+ "yAxis": {
12
+ "size": "75",
13
+ "gridLines": true,
14
+ "label": "Y-Axis Example Label"
15
+ },
16
+ "barThickness": 0.35,
17
+ "xAxis": {
18
+ "size": "50",
19
+ "tickRotation": 0,
20
+ "dataKey": "Date",
21
+ "label": "X-Axis Sample Label"
22
+ },
23
+ "table": {
24
+ "label": "Data Table",
25
+ "expanded": true
26
+ },
27
+ "legend": {
28
+ "behavior": "isolate",
29
+ "position": "right"
30
+ },
31
+ "palette": "qualitative-bold",
32
+ "labels": false,
33
+ "dataFormat": {},
34
+ "confidenceKeys": {
35
+ "upper": "high",
36
+ "lower": "low"
37
+ },
38
+ "data": [
39
+ {
40
+ "Data": "data1",
41
+ "Date": "1/12/2016",
42
+ "Value": "212",
43
+ "high": "220",
44
+ "low": "200"
45
+ },
46
+ {
47
+ "Data": "data2",
48
+ "Date": "1/13/2016",
49
+ "Value": "213",
50
+ "high": "230",
51
+ "low": "205"
52
+ },
53
+ {
54
+ "Data": "data3",
55
+ "Date": "1/14/2016",
56
+ "Value": "214",
57
+ "high": "240",
58
+ "low": "210"
59
+ }
60
+ ],
61
+ "visualizationType": "Bar",
62
+ "series": [
63
+ {
64
+ "dataKey": "Value",
65
+ "type": "Bar"
66
+ }
67
+ ]
68
+ }
@@ -0,0 +1,111 @@
1
+ {
2
+ "type": "chart",
3
+ "title": "Example Bar Chart",
4
+ "theme": "theme-blue",
5
+ "fontSize": "medium",
6
+ "height": 300,
7
+ "padding": {
8
+ "left": 5,
9
+ "right": 5
10
+ },
11
+ "yAxis": {
12
+ "size": "76",
13
+ "gridLines": false,
14
+ "label": "Y Axis Example Label"
15
+ },
16
+ "barThickness": "0.6",
17
+ "xAxis": {
18
+ "size": "59",
19
+ "tickRotation": 0,
20
+ "dataKey": "Date",
21
+ "label": "X Axis Example Label"
22
+ },
23
+ "table": {
24
+ "label": "Data Type by Date",
25
+ "expanded": true
26
+ },
27
+ "legend": {
28
+ "behavior": "isolate",
29
+ "position": "right",
30
+ "label": "Type of Data"
31
+ },
32
+ "palette": "qualitative-bold",
33
+ "labels": false,
34
+ "dataFormat": {
35
+ "suffix": " units"
36
+ },
37
+ "confidenceKeys": {},
38
+ "data": [
39
+ {
40
+ "Date": "1/15/2016",
41
+ "Data 1": "90",
42
+ "Data 2": "135",
43
+ "Data 3": "300",
44
+ "Data 4": "95",
45
+ "Data 5": "120",
46
+ "Data 6": "310"
47
+ },
48
+ {
49
+ "Date": "2/15/2016",
50
+ "Data 1": "40",
51
+ "Data 2": "90",
52
+ "Data 3": "240",
53
+ "Data 4": "60",
54
+ "Data 5": "160",
55
+ "Data 6": "200"
56
+ },
57
+ {
58
+ "Date": "3/15/2016",
59
+ "Data 1": "50",
60
+ "Data 2": "300",
61
+ "Data 3": "290",
62
+ "Data 4": "100",
63
+ "Data 5": "200",
64
+ "Data 6": "250"
65
+ },
66
+ {
67
+ "Date": "4/15/2016",
68
+ "Data 1": "120",
69
+ "Data 2": "160",
70
+ "Data 3": "230",
71
+ "Data 4": "180",
72
+ "Data 5": "160",
73
+ "Data 6": "220"
74
+ },
75
+ {
76
+ "Date": "5/15/2016",
77
+ "Data 1": "80",
78
+ "Data 2": "350",
79
+ "Data 3": "300",
80
+ "Data 4": "150",
81
+ "Data 5": "130",
82
+ "Data 6": "100"
83
+ },
84
+ {
85
+ "Date": "6/15/2016",
86
+ "Data 1": "90",
87
+ "Data 2": "220",
88
+ "Data 3": "320",
89
+ "Data 4": "100",
90
+ "Data 5": "220",
91
+ "Data 6": "300"
92
+ }
93
+ ],
94
+ "visualizationType": "Bar",
95
+ "series": [
96
+ {
97
+ "dataKey": "Data 1",
98
+ "type": "Bar"
99
+ },
100
+ {
101
+ "dataKey": "Data 2",
102
+ "type": "Bar"
103
+ },
104
+ {
105
+ "dataKey": "Data 3",
106
+ "type": "Bar"
107
+ }
108
+ ],
109
+ "description": "This example shows a bar chart created in the visualization editor in WCMS",
110
+ "dataCutoff": "0"
111
+ }
@@ -0,0 +1,220 @@
1
+ {
2
+ "type": "chart",
3
+ "title": "Lollipop Style Horizontal Bar Chart - Number of Spills Occurring in the Home",
4
+ "theme": "theme-blue",
5
+ "fontSize": "medium",
6
+ "lineDatapointStyle": "hover",
7
+ "barHasBorder": "false",
8
+ "isLollipopChart": true,
9
+ "lollipopShape": "circle",
10
+ "lollipopColorStyle": "two-tone",
11
+ "visualizationSubType": "horizontal",
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": "Lollipop Style Horizontal Bar Chart",
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": "horizontal",
32
+ "padding": {
33
+ "left": 5,
34
+ "right": 5
35
+ },
36
+ "yAxis": {
37
+ "size": 50,
38
+ "gridLines": false
39
+ },
40
+ "barThickness": 0.35,
41
+ "height": 260,
42
+ "xAxis": {
43
+ "type": "categorical",
44
+ "size": 75,
45
+ "tickRotation": 0,
46
+ "dataKey": "Vehicle"
47
+ },
48
+ "table": {
49
+ "label": "Data Table",
50
+ "expanded": true,
51
+ "show": true
52
+ },
53
+ "legend": {
54
+ "behavior": "isolate",
55
+ "position": "right"
56
+ },
57
+ "exclusions": {
58
+ "active": false,
59
+ "keys": []
60
+ },
61
+ "palette": "qualitative-bold",
62
+ "labels": false,
63
+ "dataFormat": {},
64
+ "confidenceKeys": {},
65
+ "data": [
66
+ {
67
+ "Group": "Combined Total of Group A",
68
+ "Vehicle": "100",
69
+ "Home": "120",
70
+ "Work": "140",
71
+ "Office": "120"
72
+ },
73
+ {
74
+ "Group": "Combined Total of Group B",
75
+ "Vehicle": "150",
76
+ "Home": "140",
77
+ "Work": "100",
78
+ "Office": "90"
79
+ },
80
+ {
81
+ "Group": "Combined Total of Group C",
82
+ "Vehicle": "90",
83
+ "Home": "90",
84
+ "Work": "80",
85
+ "Office": "80"
86
+ },
87
+ {
88
+ "Group": "Combined Total of Group D",
89
+ "Vehicle": "70",
90
+ "Home": "60",
91
+ "Work": "50",
92
+ "Office": "70"
93
+ }
94
+ ],
95
+ "dataFileName": "CSV_Source_Example_for_Horizontal_Bar_viz-cdcwp1619811744363.csv",
96
+ "dataFileSourceType": "file",
97
+ "visualizationType": "Bar",
98
+ "runtime": {
99
+ "seriesLabels": {
100
+ "Vehicle": "Vehicle"
101
+ },
102
+ "seriesLabelsAll": [
103
+ "Vehicle"
104
+ ],
105
+ "originalXAxis": {
106
+ "type": "categorical",
107
+ "size": 75,
108
+ "tickRotation": 0,
109
+ "dataKey": "Vehicle"
110
+ },
111
+ "seriesKeys": [
112
+ "Vehicle"
113
+ ],
114
+ "xAxis": {
115
+ "size": 50,
116
+ "gridLines": false
117
+ },
118
+ "yAxis": {
119
+ "type": "categorical",
120
+ "size": 75,
121
+ "tickRotation": 0,
122
+ "dataKey": "Vehicle"
123
+ },
124
+ "horizontal": true,
125
+ "uniqueId": 1651765968212,
126
+ "editorErrorMessage": ""
127
+ },
128
+ "description": "Subtext can be added here for options like citing data sources or insight into reading the bar chart.",
129
+ "series": [
130
+ {
131
+ "dataKey": "Vehicle",
132
+ "type": "Bar"
133
+ }
134
+ ],
135
+ "barHeight": 25,
136
+ "barPadding": 40,
137
+ "labelPlacement": "Below Bar",
138
+ "displayNumbersOnBar": true,
139
+ "numTicks": "9",
140
+ "label": "Number of Accidents"
141
+ },
142
+ "barThickness": 0.35,
143
+ "height": 212,
144
+ "xAxis": {
145
+ "type": "categorical",
146
+ "hideAxis": true,
147
+ "hideLabel": true,
148
+ "hideTicks": true,
149
+ "size": "16",
150
+ "tickRotation": 0,
151
+ "max": "160",
152
+ "dataKey": "Group"
153
+ },
154
+ "table": {
155
+ "label": "Data Table",
156
+ "expanded": false,
157
+ "show": true
158
+ },
159
+ "orientation": "horizontal",
160
+ "legend": {
161
+ "behavior": "isolate",
162
+ "position": "right",
163
+ "hide": true,
164
+ "label": "Accident Location",
165
+ "reverseLabelOrder": false
166
+ },
167
+ "exclusions": {
168
+ "active": false,
169
+ "keys": []
170
+ },
171
+ "palette": "qualitative-bold",
172
+ "isPaletteReversed": false,
173
+ "labels": false,
174
+ "dataFormat": {},
175
+ "confidenceKeys": {},
176
+ "data": [
177
+ {
178
+ "Group": "Combined Total of Group A",
179
+ "Vehicle": "100",
180
+ "Home": "120",
181
+ "Work": "140",
182
+ "Office": "120"
183
+ },
184
+ {
185
+ "Group": "Combined Total of Group B",
186
+ "Vehicle": "150",
187
+ "Home": "140",
188
+ "Work": "100",
189
+ "Office": "90"
190
+ },
191
+ {
192
+ "Group": "Combined Total of Group C",
193
+ "Vehicle": "90",
194
+ "Home": "90",
195
+ "Work": "80",
196
+ "Office": "80"
197
+ },
198
+ {
199
+ "Group": "Combined Total of Group D",
200
+ "Vehicle": "70",
201
+ "Home": "60",
202
+ "Work": "50",
203
+ "Office": "70"
204
+ }
205
+ ],
206
+ "dataFileName": "CSV_Source_Example_for_Horizontal_Bar_viz-cdcwp1619811744363.csv",
207
+ "dataFileSourceType": "file",
208
+ "visualizationType": "Bar",
209
+ "description": "Subtext can be added here for options like citing data sources or insight into reading the bar chart.",
210
+ "series": [
211
+ {
212
+ "dataKey": "Home",
213
+ "type": "Bar"
214
+ }
215
+ ],
216
+ "barHeight": 6,
217
+ "barPadding": 47,
218
+ "filters": [],
219
+ "lollipopSize": "medium"
220
+ }