@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
@@ -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": "",
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,30 +1,30 @@
1
1
  {
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
- }
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
+ }
30
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
+ }
@@ -1,22 +1,22 @@
1
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
- ]
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
+ ]