@cdc/chart 4.22.10 → 4.23.1

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 (80) hide show
  1. package/README.md +5 -5
  2. package/dist/495.js +3 -0
  3. package/dist/703.js +1 -0
  4. package/dist/cdcchart.js +723 -6
  5. package/examples/age-adjusted-rates.json +1486 -1218
  6. package/examples/box-plot-data.json +71 -0
  7. package/examples/box-plot.csv +5 -0
  8. package/examples/{private/yaxis-test.json → box-plot.json} +46 -54
  9. package/examples/case-rate-example-config.json +1 -1
  10. package/examples/covid-confidence-example-config.json +33 -33
  11. package/examples/covid-example-config.json +34 -34
  12. package/examples/covid-example-data-confidence.json +30 -30
  13. package/examples/covid-example-data.json +20 -20
  14. package/examples/cutoff-example-config.json +36 -36
  15. package/examples/cutoff-example-data.json +36 -36
  16. package/examples/date-exclusions-config.json +1 -1
  17. package/examples/dynamic-legends.json +124 -124
  18. package/examples/gallery/bar-chart-horizontal/horizontal-bar-chart-with-numbers-on-bar.json +191 -197
  19. package/examples/gallery/bar-chart-horizontal/horizontal-bar-chart.json +230 -240
  20. package/examples/gallery/bar-chart-horizontal/horizontal-stacked.json +239 -247
  21. package/examples/gallery/bar-chart-vertical/combo-line-chart.json +138 -136
  22. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-categorical.json +79 -79
  23. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json +80 -80
  24. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-with-confidence.json +67 -67
  25. package/examples/gallery/bar-chart-vertical/vertical-bar-chart.json +179 -110
  26. package/examples/gallery/lollipop/lollipop-style-horizontal.json +215 -219
  27. package/examples/gallery/paired-bar/paired-bar-chart.json +195 -195
  28. package/examples/horizontal-chart.json +35 -35
  29. package/examples/horizontal-stacked-bar-chart.json +34 -34
  30. package/examples/line-chart.json +75 -75
  31. package/examples/new-data.csv +17 -0
  32. package/examples/newdata.json +90 -0
  33. package/examples/paired-bar-data.json +16 -14
  34. package/examples/paired-bar-example.json +48 -48
  35. package/examples/paired-bar-formatted.json +36 -36
  36. package/examples/planet-chart-horizontal-example-config.json +33 -33
  37. package/examples/planet-combo-example-config.json +34 -31
  38. package/examples/planet-example-config.json +35 -33
  39. package/examples/planet-example-data.json +56 -56
  40. package/examples/planet-pie-example-config.json +28 -28
  41. package/examples/stacked-vertical-bar-example.json +1 -1
  42. package/examples/temp-example-config.json +61 -54
  43. package/examples/temp-example-data.json +1 -1
  44. package/package.json +3 -2
  45. package/src/CdcChart.tsx +449 -434
  46. package/src/components/BarChart.tsx +383 -497
  47. package/src/components/BoxPlot.js +92 -0
  48. package/src/components/DataTable.tsx +182 -197
  49. package/src/components/EditorPanel.js +1068 -722
  50. package/src/components/Filters.js +131 -0
  51. package/src/components/Legend.js +286 -329
  52. package/src/components/LineChart.tsx +143 -81
  53. package/src/components/LinearChart.tsx +432 -451
  54. package/src/components/PairedBarChart.tsx +197 -213
  55. package/src/components/PieChart.tsx +105 -151
  56. package/src/components/SparkLine.js +179 -201
  57. package/src/components/useIntersectionObserver.tsx +19 -20
  58. package/src/context.tsx +3 -3
  59. package/src/data/initial-state.js +44 -17
  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 +64 -77
  65. package/src/hooks/useRightAxis.js +25 -0
  66. package/src/hooks/useTopAxis.js +6 -0
  67. package/src/index.html +19 -19
  68. package/src/index.tsx +13 -16
  69. package/src/scss/DataTable.scss +6 -5
  70. package/src/scss/editor-panel.scss +71 -69
  71. package/src/scss/main.scss +188 -114
  72. package/src/scss/variables.scss +1 -1
  73. package/examples/private/line-test-data.json +0 -22
  74. package/examples/private/line-test-two.json +0 -216
  75. package/examples/private/line-test.json +0 -102
  76. package/examples/private/newtest.csv +0 -101
  77. package/examples/private/shawn.json +0 -1296
  78. package/examples/private/test.json +0 -10124
  79. package/examples/private/yaxis-testing.csv +0 -27
  80. package/examples/private/yaxis.json +0 -28
package/examples/gallery/bar-chart-vertical/combo-line-chart.json CHANGED
@@ -1,137 +1,139 @@
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
+ "animate": true,
8
+ "padding": {
9
+ "left": 5,
10
+ "right": 5
11
+ },
12
+ "yAxis": {
13
+ "size": "68",
14
+ "gridLines": true,
15
+ "label": "Y-Axis Label Example"
16
+ },
17
+ "barThickness": 0.35,
18
+ "xAxis": {
19
+ "size": "78",
20
+ "tickRotation": "25",
21
+ "dataKey": "Date",
22
+ "label": "X-Axis Example Label",
23
+ "type": "date",
24
+ "dateParseFormat": "%d/%m/%Y",
25
+ "dateDisplayFormat": "%d/%m/%Y"
26
+ },
27
+ "table": {
28
+ "label": "Data Table",
29
+ "expanded": true,
30
+ "download": true
31
+ },
32
+ "legend": {
33
+ "behavior": "highlight",
34
+ "position": "right",
35
+ "label": "Data Type"
36
+ },
37
+ "palette": "qualitative-soft",
38
+ "labels": false,
39
+ "dataFormat": {},
40
+ "confidenceKeys": {},
41
+ "data": [
42
+ {
43
+ "Date": "1/15/2016",
44
+ "Data 1": "90",
45
+ "Data 2": "110",
46
+ "Data 3": "100",
47
+ "Data 4": "90",
48
+ "Monthly-Goal": "100"
49
+ },
50
+ {
51
+ "Date": "2/15/2016",
52
+ "Data 1": "100",
53
+ "Data 2": "110",
54
+ "Data 3": "100",
55
+ "Data 4": "100",
56
+ "Monthly-Goal": "100"
57
+ },
58
+ {
59
+ "Date": "3/15/2016",
60
+ "Data 1": "80",
61
+ "Data 2": "90",
62
+ "Data 3": "100",
63
+ "Data 4": "120",
64
+ "Monthly-Goal": "110"
65
+ },
66
+ {
67
+ "Date": "4/15/2016",
68
+ "Data 1": "80",
69
+ "Data 2": "90",
70
+ "Data 3": "110",
71
+ "Data 4": "120",
72
+ "Monthly-Goal": "110"
73
+ },
74
+ {
75
+ "Date": "5/15/2016",
76
+ "Data 1": "70",
77
+ "Data 2": "90",
78
+ "Data 3": "110",
79
+ "Data 4": "130",
80
+ "Monthly-Goal": "120"
81
+ },
82
+ {
83
+ "Date": "6/15/2016",
84
+ "Data 1": "100",
85
+ "Data 2": "120",
86
+ "Data 3": "120",
87
+ "Data 4": "130",
88
+ "Monthly-Goal": "120"
89
+ },
90
+ {
91
+ "Date": "7/15/2016",
92
+ "Data 1": "110",
93
+ "Data 2": "140",
94
+ "Data 3": "120",
95
+ "Data 4": "130",
96
+ "Monthly-Goal": "130"
97
+ },
98
+ {
99
+ "Date": "8/15/2016",
100
+ "Data 1": "110",
101
+ "Data 2": "130",
102
+ "Data 3": "120",
103
+ "Data 4": "140",
104
+ "Monthly-Goal": "130"
105
+ },
106
+ {
107
+ "Date": "9/15/2016",
108
+ "Data 1": "120",
109
+ "Data 2": "130",
110
+ "Data 3": "120",
111
+ "Data 4": "150",
112
+ "Monthly-Goal": "140"
113
+ }
114
+ ],
115
+ "visualizationType": "Combo",
116
+ "series": [
117
+ {
118
+ "dataKey": "Data 1",
119
+ "type": "Bar"
120
+ },
121
+ {
122
+ "dataKey": "Data 2",
123
+ "type": "Bar"
124
+ },
125
+ {
126
+ "dataKey": "Data 3",
127
+ "type": "Bar"
128
+ },
129
+ {
130
+ "dataKey": "Data 4",
131
+ "type": "Bar"
132
+ },
133
+ {
134
+ "dataKey": "Monthly-Goal",
135
+ "type": "dashed-md",
136
+ "axis": "Left"
137
+ }
138
+ ]
139
+ }
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
+ }