@cdc/chart 4.22.10 → 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 (72) hide show
  1. package/README.md +5 -5
  2. package/dist/cdcchart.js +4 -4
  3. package/examples/age-adjusted-rates.json +1486 -1218
  4. package/examples/case-rate-example-config.json +1 -1
  5. package/examples/covid-confidence-example-config.json +33 -33
  6. package/examples/covid-example-config.json +34 -34
  7. package/examples/covid-example-data-confidence.json +30 -30
  8. package/examples/covid-example-data.json +20 -20
  9. package/examples/cutoff-example-config.json +36 -36
  10. package/examples/cutoff-example-data.json +36 -36
  11. package/examples/date-exclusions-config.json +1 -1
  12. package/examples/dynamic-legends.json +124 -124
  13. package/examples/gallery/bar-chart-horizontal/horizontal-bar-chart-with-numbers-on-bar.json +191 -197
  14. package/examples/gallery/bar-chart-horizontal/horizontal-bar-chart.json +230 -240
  15. package/examples/gallery/bar-chart-horizontal/horizontal-stacked.json +239 -247
  16. package/examples/gallery/bar-chart-vertical/combo-line-chart.json +136 -136
  17. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-categorical.json +79 -79
  18. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json +80 -80
  19. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-with-confidence.json +67 -67
  20. package/examples/gallery/bar-chart-vertical/vertical-bar-chart.json +110 -110
  21. package/examples/gallery/lollipop/lollipop-style-horizontal.json +215 -219
  22. package/examples/gallery/paired-bar/paired-bar-chart.json +195 -195
  23. package/examples/horizontal-chart.json +35 -35
  24. package/examples/horizontal-stacked-bar-chart.json +34 -34
  25. package/examples/line-chart.json +75 -75
  26. package/examples/paired-bar-data.json +16 -14
  27. package/examples/paired-bar-example.json +48 -48
  28. package/examples/paired-bar-formatted.json +36 -36
  29. package/examples/planet-chart-horizontal-example-config.json +33 -33
  30. package/examples/planet-combo-example-config.json +34 -31
  31. package/examples/planet-example-config.json +35 -33
  32. package/examples/planet-example-data.json +56 -56
  33. package/examples/planet-pie-example-config.json +28 -28
  34. package/examples/private/filters.json +170 -0
  35. package/examples/private/line-test-data.json +21 -21
  36. package/examples/private/line-test-two.json +209 -215
  37. package/examples/private/line-test.json +101 -101
  38. package/examples/private/new.json +48800 -0
  39. package/examples/private/shawn.json +1105 -1295
  40. package/examples/private/test.json +10123 -10123
  41. package/examples/private/yaxis-test.json +4 -3
  42. package/examples/private/yaxis.json +26 -26
  43. package/examples/stacked-vertical-bar-example.json +1 -1
  44. package/examples/temp-example-config.json +61 -54
  45. package/examples/temp-example-data.json +1 -1
  46. package/package.json +2 -2
  47. package/src/CdcChart.tsx +339 -380
  48. package/src/components/BarChart.tsx +425 -469
  49. package/src/components/DataTable.tsx +164 -195
  50. package/src/components/EditorPanel.js +1009 -710
  51. package/src/components/Legend.js +279 -329
  52. package/src/components/LineChart.tsx +90 -79
  53. package/src/components/LinearChart.tsx +376 -434
  54. package/src/components/PairedBarChart.tsx +197 -213
  55. package/src/components/PieChart.tsx +95 -151
  56. package/src/components/SparkLine.js +179 -201
  57. package/src/components/useIntersectionObserver.tsx +17 -20
  58. package/src/context.tsx +3 -3
  59. package/src/data/initial-state.js +37 -16
  60. package/src/hooks/useActiveElement.js +13 -13
  61. package/src/hooks/useChartClasses.js +34 -28
  62. package/src/hooks/useColorPalette.ts +56 -63
  63. package/src/hooks/useLegendClasses.js +18 -10
  64. package/src/hooks/useReduceData.ts +62 -78
  65. package/src/hooks/useRightAxis.js +25 -0
  66. package/src/hooks/useTopAxis.js +6 -0
  67. package/src/index.html +45 -45
  68. package/src/index.tsx +13 -16
  69. package/src/scss/DataTable.scss +5 -4
  70. package/src/scss/editor-panel.scss +71 -69
  71. package/src/scss/main.scss +157 -114
  72. package/src/scss/variables.scss +1 -1
package/examples/gallery/bar-chart-vertical/combo-line-chart.json CHANGED
@@ -1,137 +1,137 @@
1
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
- }
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
+ }
package/examples/gallery/bar-chart-vertical/vertical-bar-chart-categorical.json CHANGED
@@ -1,80 +1,80 @@
1
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
- }
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
+ }
package/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json CHANGED
@@ -1,81 +1,81 @@
1
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
- }
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
+ }