@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/vertical-bar-chart-with-confidence.json CHANGED
@@ -1,68 +1,68 @@
1
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
- }
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
+ }
package/examples/gallery/bar-chart-vertical/vertical-bar-chart.json CHANGED
@@ -1,111 +1,111 @@
1
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
- }
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
+ }