@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
@@ -1,37 +1,37 @@
1
1
  [
2
- {
3
- "Age Group": "65",
4
- "Male": "730",
5
- "Female": "402"
6
- },
7
- {
8
- "Age Group": "<15",
9
- "Male": "7428",
10
- "Female": "5714"
11
- },
12
- {
13
- "Age Group": "15-24",
14
- "Male": "5176",
15
- "Female": "3588"
16
- },
17
- {
18
- "Age Group": "25-34",
19
- "Male": "5624",
20
- "Female": "3410"
21
- },
22
- {
23
- "Age Group": "35-44",
24
- "Male": "10756",
25
- "Female": "7478"
26
- },
27
- {
28
- "Age Group": "45-54",
29
- "Male": "8259",
30
- "Female": "5633"
31
- },
32
- {
33
- "Age Group": "55-64",
34
- "Male": "1235",
35
- "Female": "810"
36
- }
37
- ]
2
+ {
3
+ "Age Group": "65",
4
+ "Male": "730",
5
+ "Female": "402"
6
+ },
7
+ {
8
+ "Age Group": "<15",
9
+ "Male": "7428",
10
+ "Female": "5714"
11
+ },
12
+ {
13
+ "Age Group": "15-24",
14
+ "Male": "5176",
15
+ "Female": "3588"
16
+ },
17
+ {
18
+ "Age Group": "25-34",
19
+ "Male": "5624",
20
+ "Female": "3410"
21
+ },
22
+ {
23
+ "Age Group": "35-44",
24
+ "Male": "10756",
25
+ "Female": "7478"
26
+ },
27
+ {
28
+ "Age Group": "45-54",
29
+ "Male": "8259",
30
+ "Female": "5633"
31
+ },
32
+ {
33
+ "Age Group": "55-64",
34
+ "Male": "1235",
35
+ "Female": "810"
36
+ }
37
+ ]
@@ -1,35 +1,35 @@
1
1
  {
2
- "title": "Planet Radius (Combo Example)",
3
- "dataUrl": "/examples/planet-example-data.json",
4
- "visualizationType": "Bar",
5
- "visualizationSubType": "regular",
6
- "isLollipopChart": true,
7
- "barHasBorder": "true",
8
- "series": [{"dataKey":"Radius", "type":"Line"}],
9
- "fontSize": "small",
10
- "dataFormat": {
11
- "roundTo": 1,
12
- "commas": false,
13
- "prefix": "",
14
- "suffix": "km"
15
- },
16
- "padding": {
17
- "left": 0,
18
- "right": 0
19
- },
20
- "yAxis": {
21
- "label": "Measurement (1000km)",
22
- "displayNumbersOnBar": false,
23
- "labelPlacement": "On Date/Category Axis"
24
- },
25
- "xAxis": {
26
- "label": "Planet",
27
- "dataKey": "name",
28
- "size": 75
29
- },
30
- "table": {
31
- "label": "Data Table",
32
- "expanded": false
33
- },
34
- "lollipopShape": "circle"
2
+ "title": "Planet Radius (Combo Example)",
3
+ "dataUrl": "/examples/planet-example-data.json",
4
+ "visualizationType": "Bar",
5
+ "visualizationSubType": "regular",
6
+ "isLollipopChart": true,
7
+ "barHasBorder": "true",
8
+ "series": [{ "dataKey": "Radius", "type": "Line" }],
9
+ "fontSize": "small",
10
+ "dataFormat": {
11
+ "roundTo": 1,
12
+ "commas": false,
13
+ "prefix": "",
14
+ "suffix": "km"
15
+ },
16
+ "padding": {
17
+ "left": 0,
18
+ "right": 0
19
+ },
20
+ "yAxis": {
21
+ "label": "Measurement (1000km)",
22
+ "displayNumbersOnBar": false,
23
+ "labelPlacement": "On Date/Category Axis"
24
+ },
25
+ "xAxis": {
26
+ "label": "Planet",
27
+ "dataKey": "name",
28
+ "size": 75
29
+ },
30
+ "table": {
31
+ "label": "Data Table",
32
+ "expanded": false
33
+ },
34
+ "lollipopShape": "circle"
35
35
  }
@@ -1,31 +1,36 @@
1
1
  {
2
- "title": "Planet Radius (Combo Example)",
3
- "dataUrl": "/examples/planet-example-data.json",
4
- "visualizationType": "Combo",
5
- "series": [{"dataKey":"Radius", "type":"Line"}, {"dataKey":"Diameter", "type":"Bar"}],
6
- "dataFormat": {
7
- "roundTo": 1,
8
- "commas": false,
9
- "prefix": "",
10
- "suffix": "km"
11
- },
12
- "padding": {
13
- "left": 0,
14
- "right": 0
15
- },
16
- "yAxis": {
17
- "label": "Measurement (1000km)"
18
- },
19
- "xAxis": {
20
- "label": "Planet",
21
- "dataKey": "name",
22
- "tickRotation": 30
23
- },
24
- "legend": {
25
- "hide": false
26
- },
27
- "table": {
28
- "label": "Data Table",
29
- "expanded": false
30
- }
2
+ "title": "Planet Radius (Combo Example)",
3
+ "dataUrl": "/examples/planet-example-data.json",
4
+ "animate": true,
5
+ "animateReplay": true,
6
+ "visualizationType": "Combo",
7
+ "series": [
8
+ { "dataKey": "Radius", "type": "Line" },
9
+ { "dataKey": "Diameter", "type": "Bar" }
10
+ ],
11
+ "dataFormat": {
12
+ "roundTo": 1,
13
+ "commas": false,
14
+ "prefix": "",
15
+ "suffix": "km"
16
+ },
17
+ "padding": {
18
+ "left": 0,
19
+ "right": 0
20
+ },
21
+ "yAxis": {
22
+ "label": "Measurement (1000km)"
23
+ },
24
+ "xAxis": {
25
+ "label": "Planet",
26
+ "dataKey": "name",
27
+ "tickRotation": 30
28
+ },
29
+ "legend": {
30
+ "hide": false
31
+ },
32
+ "table": {
33
+ "label": "Data Table",
34
+ "expanded": false
35
+ }
31
36
  }
@@ -1,35 +1,37 @@
1
1
  {
2
- "title": "Planet Radius (Bar Example)",
3
- "dataUrl": "/examples/planet-example-data.json",
4
- "visualizationType": "Bar",
5
- "visualizationSubType": "stacked",
6
- "series": [{"dataKey": "Radius"}, {"dataKey": "Diameter"}],
7
- "fontSize": "medium",
8
- "dataCutoff": "0.5",
9
- "orientation": "horizontal",
10
- "dataFormat": {
11
- "roundTo": 1,
12
- "commas": false,
13
- "prefix": "",
14
- "suffix": "km"
15
- },
16
- "padding": {
17
- "left": 5,
18
- "right": 5
19
- },
20
- "yAxis": {
21
- "label": "Measurement (1000km)"
22
- },
23
- "xAxis": {
24
- "label": "Planet",
25
- "dataKey": "name",
26
- "tickRotation": 30
27
- },
28
- "legend": {
29
- "hide": false
30
- },
31
- "table": {
32
- "label": "Data Table",
33
- "expanded": false
34
- }
2
+ "title": "Planet Radius (Bar Example)",
3
+ "dataUrl": "/examples/planet-example-data.json",
4
+ "visualizationType": "Bar",
5
+ "visualizationSubType": "regular",
6
+ "series": [{ "dataKey": "Radius" }],
7
+ "fontSize": "medium",
8
+ "dataCutoff": "0.5",
9
+ "orientation": "vertical",
10
+ "dataFormat": {
11
+ "roundTo": 1,
12
+ "commas": false,
13
+ "prefix": "",
14
+ "suffix": "km"
15
+ },
16
+ "padding": {
17
+ "left": 5,
18
+ "right": 5
19
+ },
20
+ "yAxis": {
21
+ "label": "Measurement (1000km)",
22
+ "rightSeries": "Diameter",
23
+ "rightLabel": "testing"
24
+ },
25
+ "xAxis": {
26
+ "label": "Planet",
27
+ "dataKey": "name",
28
+ "tickRotation": 30
29
+ },
30
+ "legend": {
31
+ "hide": false
32
+ },
33
+ "table": {
34
+ "label": "Data Table",
35
+ "expanded": false
36
+ }
35
37
  }
@@ -1,56 +1,56 @@
1
- [
2
- {
3
- "name": "Jupiter",
4
- "Radius": "10.97",
5
- "Diameter": "22",
6
- "distance": "0"
7
- },
8
- {
9
- "name": "Saturn",
10
- "Radius": "9.14",
11
- "Diameter": "18",
12
- "distance": "0"
13
- },
14
- {
15
- "name": "Uranus",
16
- "Radius": "3.98",
17
- "Diameter": "8",
18
- "distance": "0"
19
- },
20
- {
21
- "name": "Neptune",
22
- "Radius": "3.86",
23
- "Diameter": "7",
24
- "distance": "0"
25
- },
26
- {
27
- "name": "Earth",
28
- "Radius": "1",
29
- "Diameter": "2",
30
- "distance": "0"
31
- },
32
- {
33
- "name": "Venus",
34
- "Radius": "0.950",
35
- "Diameter": "2",
36
- "distance": "0"
37
- },
38
- {
39
- "name": "Mars",
40
- "Radius": "0.532",
41
- "Diameter": "1",
42
- "distance": "0"
43
- },
44
- {
45
- "name": "Mercury",
46
- "Radius": "0.383",
47
- "Diameter": "0.7",
48
- "distance": "0"
49
- },
50
- {
51
- "name": "Pluto",
52
- "Radius": "0.181",
53
- "Diameter": "0.3",
54
- "distance": "0"
55
- }
56
- ]
1
+ [
2
+ {
3
+ "name": "Jupiter",
4
+ "Radius": "10.97",
5
+ "Diameter": "22",
6
+ "distance": "0"
7
+ },
8
+ {
9
+ "name": "Saturn",
10
+ "Radius": "9.14",
11
+ "Diameter": "18",
12
+ "distance": "0"
13
+ },
14
+ {
15
+ "name": "Uranus",
16
+ "Radius": "0",
17
+ "Diameter": "8",
18
+ "distance": "0"
19
+ },
20
+ {
21
+ "name": "Neptune",
22
+ "Radius": "3.86",
23
+ "Diameter": "7",
24
+ "distance": "0"
25
+ },
26
+ {
27
+ "name": "Earth",
28
+ "Radius": "1",
29
+ "Diameter": "2",
30
+ "distance": "0"
31
+ },
32
+ {
33
+ "name": "Venus",
34
+ "Radius": "0.950",
35
+ "Diameter": "2",
36
+ "distance": "0"
37
+ },
38
+ {
39
+ "name": "Mars",
40
+ "Radius": "0.532",
41
+ "Diameter": "1",
42
+ "distance": "0"
43
+ },
44
+ {
45
+ "name": "Mercury",
46
+ "Radius": "0.383",
47
+ "Diameter": "0.7",
48
+ "distance": "0"
49
+ },
50
+ {
51
+ "name": "Pluto",
52
+ "Radius": "0.181",
53
+ "Diameter": "0.3",
54
+ "distance": "0"
55
+ }
56
+ ]
@@ -1,28 +1,30 @@
1
1
  {
2
- "title": "Planet Radius (Pie Example)",
3
- "dataUrl": "/examples/planet-example-data.json",
4
- "visualizationType": "Pie",
5
- "palette": "qualitative-soft",
6
- "aspectRatio": 1,
7
- "dataFormat": {
8
- "roundTo": 1,
9
- "commas": false,
10
- "prefix": "",
11
- "suffix": "km"
12
- },
13
- "yAxis": {
14
- "label": "Radius",
15
- "dataKey": "Radius"
16
- },
17
- "xAxis": {
18
- "label": "Planet",
19
- "dataKey": "name"
20
- },
21
- "legend": {
22
- "hide": false
23
- },
24
- "table": {
25
- "label": "Data Table",
26
- "expanded": false
27
- }
2
+ "title": "Planet Radius (Pie Example)",
3
+ "dataUrl": "/examples/planet-example-data.json",
4
+ "animate": true,
5
+ "animateReplay": true,
6
+ "visualizationType": "Pie",
7
+ "palette": "qualitative-soft",
8
+ "aspectRatio": 1,
9
+ "dataFormat": {
10
+ "roundTo": 1,
11
+ "commas": false,
12
+ "prefix": "",
13
+ "suffix": "km"
14
+ },
15
+ "yAxis": {
16
+ "label": "Radius",
17
+ "dataKey": "Radius"
18
+ },
19
+ "xAxis": {
20
+ "label": "Planet",
21
+ "dataKey": "name"
22
+ },
23
+ "legend": {
24
+ "hide": false
25
+ },
26
+ "table": {
27
+ "label": "Data Table",
28
+ "expanded": false
29
+ }
28
30
  }
@@ -0,0 +1,170 @@
1
+ {
2
+ "type": "chart",
3
+ "title": "Combo Chart (With Right Axis)",
4
+ "theme": "theme-blue",
5
+ "animate": false,
6
+ "fontSize": "medium",
7
+ "lineDatapointStyle": "hover",
8
+ "barHasBorder": "false",
9
+ "isLollipopChart": false,
10
+ "lollipopShape": "circle",
11
+ "lollipopColorStyle": "two-tone",
12
+ "visualizationSubType": "regular",
13
+ "barStyle": "",
14
+ "roundingStyle": "standard",
15
+ "tipRounding": "top",
16
+ "padding": {
17
+ "left": 5,
18
+ "right": 5
19
+ },
20
+ "yAxis": {
21
+ "hideAxis": false,
22
+ "displayNumbersOnBar": false,
23
+ "hideLabel": false,
24
+ "hideTicks": false,
25
+ "size": 50,
26
+ "gridLines": false,
27
+ "min": "",
28
+ "max": "",
29
+ "labelColor": "orange",
30
+ "tickLabelColor": "orange",
31
+ "tickColor": "orange",
32
+ "rightHideAxis": true,
33
+ "rightAxisSize": "88",
34
+ "rightLabelOffsetSize": "80",
35
+ "rightAxisLabelColor": "purple",
36
+ "rightAxisTickLabelColor": "purple",
37
+ "rightAxisTickColor": "purple",
38
+ "isLegendValue": false,
39
+ "numTicks": "",
40
+ "label": "Left Axis (Value)",
41
+ "rightSeries": "tot_tests_18_older",
42
+ "rightLabel": "",
43
+ "rightHideLabel": false,
44
+ "rightHideTicks": false,
45
+ "rightNumTicks": "6"
46
+ },
47
+ "topAxis": {
48
+ "hasLine": false
49
+ },
50
+ "barThickness": 0.35,
51
+ "barHeight": 25,
52
+ "height": 300,
53
+ "xAxis": {
54
+ "type": "date",
55
+ "hideAxis": false,
56
+ "hideLabel": false,
57
+ "hideTicks": false,
58
+ "size": "100",
59
+ "tickRotation": 30,
60
+ "min": "",
61
+ "max": "",
62
+ "labelColor": "blue",
63
+ "tickLabelColor": "blue",
64
+ "tickColor": "blue",
65
+ "isLegendValue": false,
66
+ "numTicks": "",
67
+ "label": "Date/Category Axis",
68
+ "dataKey": "week",
69
+ "dateParseFormat": "%m/%d/%Y",
70
+ "dateDisplayFormat": "%m/%d/%Y"
71
+ },
72
+ "table": {
73
+ "label": "Data Table",
74
+ "expanded": false,
75
+ "limitHeight": false,
76
+ "height": "",
77
+ "caption": "",
78
+ "show": true
79
+ },
80
+ "orientation": "vertical",
81
+ "legend": {
82
+ "behavior": "isolate",
83
+ "position": "bottom",
84
+ "singleRow": false,
85
+ "colorCode": "",
86
+ "reverseLabelOrder": false,
87
+ "description": "",
88
+ "dynamicLegend": false,
89
+ "dynamicLegendDefaultText": "Show All",
90
+ "dynamicLegendItemLimit": 5,
91
+ "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
92
+ "dynamicLegendChartMessage": "Select Options from the Legend",
93
+ "hide": false
94
+ },
95
+ "exclusions": {
96
+ "active": false,
97
+ "keys": []
98
+ },
99
+ "palette": "qualitative-bold",
100
+ "isPaletteReversed": false,
101
+ "labels": false,
102
+ "dataFormat": {
103
+ "commas": false,
104
+ "prefix": "",
105
+ "suffix": "",
106
+ "roundTo": "0"
107
+ },
108
+ "confidenceKeys": {},
109
+ "visual": {
110
+ "border": true,
111
+ "accent": true,
112
+ "background": true
113
+ },
114
+ "dataUrl": "/examples/private/yaxis.json",
115
+ "visualizationType": "Combo",
116
+ "series": [
117
+ {
118
+ "dataKey": "tot_tests_0_12",
119
+ "type": "Bar",
120
+ "axis": "Left"
121
+ },
122
+ {
123
+ "dataKey": "tot_tests_13_17",
124
+ "type": "Bar",
125
+ "axis": "Left"
126
+ },
127
+ {
128
+ "dataKey": "0_12_positivity_rate",
129
+ "type": "Bar",
130
+ "axis": "Left"
131
+ }
132
+ ],
133
+ "dataCutoff": "0.5",
134
+ "filters": [
135
+ {
136
+ "values": [
137
+ "5/21/2022",
138
+ "5/28/2022",
139
+ "6/4/2022",
140
+ "6/11/2022",
141
+ "6/18/2022",
142
+ "6/25/2022",
143
+ "7/2/2022",
144
+ "7/9/2022",
145
+ "7/16/2022",
146
+ "7/23/2022",
147
+ "7/30/2022",
148
+ "8/6/2022",
149
+ "8/13/2022",
150
+ "8/20/2022",
151
+ "8/27/2022",
152
+ "9/3/2022",
153
+ "9/10/2022",
154
+ "9/17/2022",
155
+ "9/24/2022",
156
+ "10/1/2022",
157
+ "10/8/2022",
158
+ "10/15/2022",
159
+ "10/22/2022",
160
+ "10/29/2022",
161
+ "11/5/2022",
162
+ "11/12/2022"
163
+ ],
164
+ "active": "5/21/2022",
165
+ "order": "asc",
166
+ "columnName": "week",
167
+ "label": "Week"
168
+ }
169
+ ]
170
+ }
@@ -0,0 +1,22 @@
1
+ [
2
+ {
3
+ "Number": "11.0",
4
+ "Date": "9/1/2022"
5
+ },
6
+ {
7
+ "Number": "12.2",
8
+ "Date": "9/2/2022"
9
+ },
10
+ {
11
+ "Number": "13.6",
12
+ "Date": "9/4/2022"
13
+ },
14
+ {
15
+ "Number": "",
16
+ "Date": "9/5/2022"
17
+ },
18
+ {
19
+ "Number": "6.4",
20
+ "Date": "9/6/2022"
21
+ }
22
+ ]