@cdc/chart 4.23.3 → 4.23.5

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 (98) hide show
  1. package/dist/cdcchart.js +52543 -50830
  2. package/examples/feature/__data__/area-chart.json +56 -0
  3. package/examples/{planet-example-data.json → feature/__data__/planet-example-data.json} +3 -8
  4. package/examples/feature/__data__/planet-logaritmic-data.json +56 -0
  5. package/examples/feature/area/area-chart-category.json +240 -0
  6. package/examples/{area-chart.json → feature/area/area-chart-date.json} +70 -13
  7. package/examples/feature/bar/example-bar-chart.json +558 -0
  8. package/examples/{horizontal-chart-max-increase.json → feature/bar/horizontal-chart-max-increase.json} +10 -4
  9. package/examples/{horizontal-chart.json → feature/bar/horizontal-chart.json} +10 -4
  10. package/examples/{horizontal-stacked-bar-chart.json → feature/bar/horizontal-stacked-bar-chart.json} +7 -3
  11. package/examples/{planet-chart-horizontal-example-config.json → feature/bar/planet-chart-horizontal-example-config.json} +8 -3
  12. package/examples/feature/bar/planet-chart-logaritmic-config.json +170 -0
  13. package/examples/{planet-example-config.json → feature/bar/planet-example-config.json} +2 -2
  14. package/examples/{box-plot.json → feature/boxplot/boxplot.json} +7 -7
  15. package/examples/feature/boxplot/testing.csv +38 -0
  16. package/examples/feature/boxplot/valid-boxplot.csv +17 -0
  17. package/examples/feature/combo/combochart-categories_are_numbers .json +18 -0
  18. package/examples/{planet-combo-example-config.json → feature/combo/planet-combo-example-config.json} +1 -1
  19. package/examples/{planet-deviation-config.json → feature/deviation/planet-deviation-config.json} +2 -2
  20. package/examples/{planet-deviation-data.json → feature/deviation/planet-deviation-data.json} +9 -9
  21. package/examples/feature/filters/filter-testing.json +212 -0
  22. package/examples/feature/forecasting/case_date_example.csv +130 -0
  23. package/examples/feature/forecasting/effective_reproduction.json +202 -0
  24. package/examples/feature/forecasting/r_data.csv +130 -0
  25. package/examples/feature/forecasting/random_data.csv +366 -0
  26. package/examples/feature/line/line-chart.json +124 -0
  27. package/examples/{paired-bar-example.json → feature/paired-bar/paired-bar-example.json} +10 -4
  28. package/examples/{planet-pie-example-config.json → feature/pie/planet-pie-example-config.json} +2 -2
  29. package/examples/{scatterplot.json → feature/scatterplot/scatterplot.json} +1 -1
  30. package/examples/feature/test-highlight/test-highlight-2.json +789 -0
  31. package/examples/feature/test-highlight/test-highlight-vertical.json +561 -0
  32. package/examples/feature/test-highlight/test-highlight.json +100 -0
  33. package/examples/{case-rate-example-config.json → feature/tests-case-rate/case-rate-example-config.json} +2 -2
  34. package/examples/{covid-confidence-example-config.json → feature/tests-covid/covid-confidence-example-config.json} +8 -3
  35. package/examples/{covid-example-config.json → feature/tests-covid/covid-example-config.json} +7 -3
  36. package/examples/{cutoff-example-config.json → feature/tests-cutoff/cutoff-example-config.json} +7 -3
  37. package/examples/{date-exclusions-config.json → feature/tests-date-exclusions/date-exclusions-config.json} +2 -2
  38. package/examples/{example-bar-chart-nonnumeric.json → feature/tests-non-numerics/example-bar-chart-nonnumeric.json} +1 -1
  39. package/examples/{planet-pie-example-config-nonnumeric.json → feature/tests-non-numerics/planet-pie-example-config-nonnumeric.json} +2 -2
  40. package/examples/{sparkline-chart-nonnumeric.json → feature/tests-non-numerics/sparkline-chart-nonnumeric.json} +1 -1
  41. package/examples/{stacked-vertical-bar-example-nonnumerics.json → feature/tests-non-numerics/stacked-vertical-bar-example-nonnumerics.json} +1 -2
  42. package/examples/gallery/bar-chart-horizontal/horizontal-highlight.json +345 -0
  43. package/examples/gallery/bar-chart-vertical/combo-line-chart.json +145 -7
  44. package/examples/gallery/paired-bar/paired-bar-chart.json +1 -0
  45. package/index.html +73 -49
  46. package/package.json +2 -2
  47. package/src/CdcChart.jsx +405 -40
  48. package/src/components/AreaChart.jsx +122 -80
  49. package/src/components/BarChart.jsx +126 -49
  50. package/src/components/BoxPlot.jsx +28 -20
  51. package/src/components/DataTable.jsx +7 -6
  52. package/src/components/DeviationBar.jsx +34 -34
  53. package/src/components/EditorPanel.jsx +1332 -352
  54. package/src/components/Legend.jsx +40 -4
  55. package/src/components/LineChart.jsx +10 -23
  56. package/src/components/LinearChart.jsx +133 -286
  57. package/src/components/PairedBarChart.jsx +6 -6
  58. package/src/components/PieChart.jsx +2 -4
  59. package/src/components/SparkLine.jsx +6 -42
  60. package/src/data/initial-state.js +23 -4
  61. package/src/hooks/useHighlightedBars.js +154 -0
  62. package/src/hooks/useMinMax.js +92 -0
  63. package/src/hooks/useReduceData.js +31 -57
  64. package/src/hooks/useScales.js +202 -0
  65. package/src/index.jsx +2 -1
  66. package/src/scss/editor-panel.scss +15 -0
  67. package/src/scss/main.scss +8 -6
  68. package/examples/box-plot.csv +0 -5
  69. package/examples/dynamic-legends.json +0 -125
  70. package/examples/example-bar-chart.json +0 -36
  71. package/examples/line-chart.json +0 -34
  72. package/examples/temp-example-config.json +0 -64
  73. package/examples/temp-example-data.json +0 -130
  74. package/src/components/Filters.jsx +0 -126
  75. /package/examples/{age-adjusted-rates.json → feature/__data__/age-adjusted-rates.json} +0 -0
  76. /package/examples/{new-data.csv → feature/__data__/new-data.csv} +0 -0
  77. /package/examples/{planet-example-data-max-increase.json → feature/__data__/planet-example-data-max-increase.json} +0 -0
  78. /package/examples/{Barchart_with_negative.json → feature/bar/Barchart_with_negative.json} +0 -0
  79. /package/examples/{stacked-vertical-bar-example-negative.json → feature/bar/stacked-vertical-bar-example-negative.json} +0 -0
  80. /package/examples/{stacked-vertical-bar-example.json → feature/bar/stacked-vertical-bar-example.json} +0 -0
  81. /package/examples/{box-plot-data.json → feature/boxplot/box-plot-data.json} +0 -0
  82. /package/examples/{newdata.json → feature/boxplot/boxplot-data.json} +0 -0
  83. /package/examples/{line-chart-max-increase.json → feature/line/line-chart-max-increase.json} +0 -0
  84. /package/examples/{paired-bar-data.json → feature/paired-bar/paired-bar-data.json} +0 -0
  85. /package/examples/{paired-bar-formatted.json → feature/paired-bar/paired-bar-formatted.json} +0 -0
  86. /package/examples/{scatterplot-continuous.csv → feature/scatterplot/scatterplot-continuous.csv} +0 -0
  87. /package/examples/{example-sparkline.json → feature/sparkline/example-sparkline.json} +0 -0
  88. /package/examples/{big-small-test-bar.json → feature/tests-big-small/big-small-test-bar.json} +0 -0
  89. /package/examples/{big-small-test-line.json → feature/tests-big-small/big-small-test-line.json} +0 -0
  90. /package/examples/{big-small-test-negative.json → feature/tests-big-small/big-small-test-negative.json} +0 -0
  91. /package/examples/{case-rate-example-data.json → feature/tests-case-rate/case-rate-example-data.json} +0 -0
  92. /package/examples/{covid-example-data-confidence.json → feature/tests-covid/covid-example-data-confidence.json} +0 -0
  93. /package/examples/{covid-example-data.json → feature/tests-covid/covid-example-data.json} +0 -0
  94. /package/examples/{cutoff-example-data.json → feature/tests-cutoff/cutoff-example-data.json} +0 -0
  95. /package/examples/{date-exclusions-data.json → feature/tests-date-exclusions/date-exclusions-data.json} +0 -0
  96. /package/examples/{example-combo-bar-nonnumeric.json → feature/tests-non-numerics/example-combo-bar-nonnumeric.json} +0 -0
  97. /package/examples/{line-chart-nonnumeric.json → feature/tests-non-numerics/line-chart-nonnumeric.json} +0 -0
  98. /package/examples/{planet-example-data-nonnumeric.json → feature/tests-non-numerics/planet-example-data-nonnumeric.json} +0 -0
@@ -0,0 +1,56 @@
1
+ [
2
+ {
3
+ "Date": "01/15/2016",
4
+ "Data 1": "900",
5
+ "Data 2": "135",
6
+ "Data 3": "300",
7
+ "Data 4": "95",
8
+ "Data 5": "120",
9
+ "Data 6": "310"
10
+ },
11
+ {
12
+ "Date": "02/15/2016",
13
+ "Data 1": "4000",
14
+ "Data 2": "90",
15
+ "Data 3": "240",
16
+ "Data 4": "60",
17
+ "Data 5": "160",
18
+ "Data 6": "2000"
19
+ },
20
+ {
21
+ "Date": "03/15/2016",
22
+ "Data 1": "500",
23
+ "Data 2": "300",
24
+ "Data 3": "290",
25
+ "Data 4": "100",
26
+ "Data 5": "200",
27
+ "Data 6": "250"
28
+ },
29
+ {
30
+ "Date": "04/15/2016",
31
+ "Data 1": "1200",
32
+ "Data 2": "160",
33
+ "Data 3": "230",
34
+ "Data 4": "180",
35
+ "Data 5": "160",
36
+ "Data 6": "220"
37
+ },
38
+ {
39
+ "Date": "05/15/2016",
40
+ "Data 1": "8000",
41
+ "Data 2": "350",
42
+ "Data 3": "300",
43
+ "Data 4": "150",
44
+ "Data 5": "130",
45
+ "Data 6": "100"
46
+ },
47
+ {
48
+ "Date": "06/15/2016",
49
+ "Data 1": "9000",
50
+ "Data 2": "220",
51
+ "Data 3": "320",
52
+ "Data 4": "100",
53
+ "Data 5": "220",
54
+ "Data 6": "300"
55
+ }
56
+ ]
@@ -13,9 +13,9 @@
13
13
  },
14
14
  {
15
15
  "name": "Uranus",
16
- "Radius": "80",
16
+ "Radius": "100",
17
17
  "Diameter": "8",
18
- "distance": "0"
18
+ "distance": "40"
19
19
  },
20
20
  {
21
21
  "name": "Neptune",
@@ -23,12 +23,7 @@
23
23
  "Diameter": "7",
24
24
  "distance": "0"
25
25
  },
26
- {
27
- "name": "Earth",
28
- "Radius": "60",
29
- "Diameter": "2",
30
- "distance": "0"
31
- },
26
+
32
27
  {
33
28
  "name": "Venus",
34
29
  "Radius": "50",
@@ -0,0 +1,56 @@
1
+ [
2
+ {
3
+ "name": "Jupiter",
4
+ "Radius": "10000",
5
+ "Diameter": "22",
6
+ "distance": "0"
7
+ },
8
+ {
9
+ "name": "Saturn",
10
+ "Radius": "9000",
11
+ "Diameter": "18",
12
+ "distance": "0"
13
+ },
14
+ {
15
+ "name": "Uranus",
16
+ "Radius": "100",
17
+ "Diameter": "8",
18
+ "distance": "40"
19
+ },
20
+ {
21
+ "name": "Neptune",
22
+ "Radius": "700",
23
+ "Diameter": "7",
24
+ "distance": "0"
25
+ },
26
+ {
27
+ "name": "Earth",
28
+ "Radius": "600",
29
+ "Diameter": "2",
30
+ "distance": "20"
31
+ },
32
+ {
33
+ "name": "Venus",
34
+ "Radius": "500",
35
+ "Diameter": "2",
36
+ "distance": "0"
37
+ },
38
+ {
39
+ "name": "Mars",
40
+ "Radius": "400",
41
+ "Diameter": "1",
42
+ "distance": "0"
43
+ },
44
+ {
45
+ "name": "Mercury",
46
+ "Radius": "3000",
47
+ "Diameter": "0.7",
48
+ "distance": "0"
49
+ },
50
+ {
51
+ "name": "Pluto",
52
+ "Radius": "2000",
53
+ "Diameter": "0.3",
54
+ "distance": "0"
55
+ }
56
+ ]
@@ -0,0 +1,240 @@
1
+ {
2
+ "type": "chart",
3
+ "title": "Example Area Chart",
4
+ "showTitle": true,
5
+ "theme": "theme-blue",
6
+ "animate": false,
7
+ "fontSize": "medium",
8
+ "lineDatapointStyle": "hover",
9
+ "barHasBorder": "false",
10
+ "isLollipopChart": false,
11
+ "lollipopShape": "circle",
12
+ "lollipopColorStyle": "two-tone",
13
+ "visualizationSubType": "regular",
14
+ "barStyle": "",
15
+ "roundingStyle": "standard",
16
+ "tipRounding": "top",
17
+ "padding": {
18
+ "left": 5,
19
+ "right": 5
20
+ },
21
+ "yAxis": {
22
+ "hideAxis": false,
23
+ "displayNumbersOnBar": false,
24
+ "hideLabel": false,
25
+ "hideTicks": false,
26
+ "size": "150",
27
+ "gridLines": false,
28
+ "enablePadding": false,
29
+ "min": "",
30
+ "max": "",
31
+ "labelColor": "#333",
32
+ "tickLabelColor": "#333",
33
+ "tickColor": "#333",
34
+ "rightHideAxis": true,
35
+ "rightAxisSize": 0,
36
+ "rightLabel": "",
37
+ "rightLabelOffsetSize": 0,
38
+ "rightAxisLabelColor": "#333",
39
+ "rightAxisTickLabelColor": "#333",
40
+ "rightAxisTickColor": "#333",
41
+ "numTicks": "",
42
+ "axisPadding": 0,
43
+ "tickRotation": 0,
44
+ "isLegendValue": false,
45
+ "label": "Y Axis Example Label"
46
+ },
47
+ "boxplot": {
48
+ "plots": [],
49
+ "borders": "true",
50
+ "firstQuartilePercentage": 25,
51
+ "thirdQuartilePercentage": 75,
52
+ "boxWidthPercentage": 40,
53
+ "plotOutlierValues": false,
54
+ "plotNonOutlierValues": true,
55
+ "legend": {
56
+ "showHowToReadText": false,
57
+ "howToReadText": ""
58
+ },
59
+ "labels": {
60
+ "q1": "Lower Quartile",
61
+ "q2": "q2",
62
+ "q3": "Upper Quartile",
63
+ "q4": "q4",
64
+ "minimum": "Minimum",
65
+ "maximum": "Maximum",
66
+ "mean": "Mean",
67
+ "median": "Median",
68
+ "sd": "Standard Deviation",
69
+ "iqr": "Interquartile Range",
70
+ "total": "Total",
71
+ "outliers": "Outliers",
72
+ "values": "Values",
73
+ "lowerBounds": "Lower Bounds",
74
+ "upperBounds": "Upper Bounds"
75
+ }
76
+ },
77
+ "topAxis": {
78
+ "hasLine": false
79
+ },
80
+ "isLegendValue": false,
81
+ "barThickness": 0.35,
82
+ "barHeight": 25,
83
+ "barSpace": 20,
84
+ "heights": {
85
+ "vertical": 300,
86
+ "horizontal": 750
87
+ },
88
+ "xAxis": {
89
+ "type": "date",
90
+ "showTargetLabel": true,
91
+ "targetLabel": "Target",
92
+ "hideAxis": false,
93
+ "hideLabel": false,
94
+ "hideTicks": false,
95
+ "size": "50",
96
+ "tickRotation": 0,
97
+ "min": "",
98
+ "max": "",
99
+ "labelColor": "#333",
100
+ "tickLabelColor": "#333",
101
+ "tickColor": "#333",
102
+ "numTicks": "9",
103
+ "labelOffset": 65,
104
+ "axisPadding": 0,
105
+ "target": 0,
106
+ "isLegendValue": false,
107
+ "dataKey": "Date",
108
+ "label": "X Axis Example Label",
109
+ "dateParseFormat": "%m/%d/%Y",
110
+ "dateDisplayFormat": "%m/%d/%Y"
111
+ },
112
+ "table": {
113
+ "label": "Data Type by Date",
114
+ "expanded": false,
115
+ "limitHeight": false,
116
+ "height": "",
117
+ "caption": "",
118
+ "showDownloadUrl": true,
119
+ "showDataTableLink": true,
120
+ "show": true,
121
+ "download": true
122
+ },
123
+ "orientation": "vertical",
124
+ "legend": {
125
+ "behavior": "isolate",
126
+ "singleRow": false,
127
+ "colorCode": "",
128
+ "reverseLabelOrder": false,
129
+ "description": "",
130
+ "dynamicLegend": false,
131
+ "dynamicLegendDefaultText": "Show All",
132
+ "dynamicLegendItemLimit": 5,
133
+ "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
134
+ "dynamicLegendChartMessage": "Select Options from the Legend",
135
+ "position": "right",
136
+ "label": "Type of Data"
137
+ },
138
+ "exclusions": {
139
+ "active": true,
140
+ "keys": []
141
+ },
142
+ "palette": "qualitative-bold",
143
+ "isPaletteReversed": false,
144
+ "twoColor": {
145
+ "palette": "monochrome-1",
146
+ "isPaletteReversed": false
147
+ },
148
+ "labels": false,
149
+ "dataFormat": {
150
+ "commas": true,
151
+ "prefix": "",
152
+ "suffix": " units",
153
+ "abbreviated": true,
154
+ "bottomSuffix": "",
155
+ "bottomPrefix": "",
156
+ "bottomAbbreviated": false,
157
+ "useFormat": true
158
+ },
159
+ "confidenceKeys": {},
160
+ "visual": {
161
+ "border": true,
162
+ "accent": true,
163
+ "background": true
164
+ },
165
+ "filterBehavior": "dropdown",
166
+ "highlightedBarValues": [],
167
+ "series": [
168
+ {
169
+ "dataKey": "Radius",
170
+ "type": "Area Chart"
171
+ }
172
+ ],
173
+ "dataDescription": {
174
+ "horizontal": false,
175
+ "series": false
176
+ },
177
+ "dataFileName": "valid-area-chart.json",
178
+ "dataFileSourceType": "file",
179
+ "formattedData": [
180
+ {
181
+ "Data 1": "900",
182
+ "Data 2": "135",
183
+ "Data 3": "300",
184
+ "Data 4": "95",
185
+ "Data 5": "120",
186
+ "Data 6": "310",
187
+ "Date": "1/15/2016"
188
+ },
189
+ {
190
+ "Data 1": "4000",
191
+ "Data 2": "90",
192
+ "Data 3": "240",
193
+ "Data 4": "60",
194
+ "Data 5": "160",
195
+ "Data 6": "2000",
196
+ "Date": "2/15/2016"
197
+ },
198
+ {
199
+ "Data 1": "500",
200
+ "Data 2": "300",
201
+ "Data 3": "290",
202
+ "Data 4": "100",
203
+ "Data 5": "200",
204
+ "Data 6": "250",
205
+ "Date": "3/15/2016"
206
+ },
207
+ {
208
+ "Data 1": "1200",
209
+ "Data 2": "160",
210
+ "Data 3": "230",
211
+ "Data 4": "180",
212
+ "Data 5": "160",
213
+ "Data 6": "220",
214
+ "Date": "4/15/2016"
215
+ },
216
+ {
217
+ "Data 1": "8000",
218
+ "Data 2": "350",
219
+ "Data 3": "300",
220
+ "Data 4": "150",
221
+ "Data 5": "130",
222
+ "Data 6": "100",
223
+ "Date": "5/15/2016"
224
+ },
225
+ {
226
+ "Data 1": "9000",
227
+ "Data 2": "220",
228
+ "Data 3": "320",
229
+ "Data 4": "100",
230
+ "Data 5": "220",
231
+ "Data 6": "300",
232
+ "Date": "6/15/2016"
233
+ }
234
+ ],
235
+ "height": 300,
236
+ "dataUrl": "/examples/feature/__data__/planet-example-data-max-increase.json",
237
+ "visualizationType": "Area Chart",
238
+ "description": "This example shows a bar chart created in the visualization editor in WCMS",
239
+ "dataCutoff": "0"
240
+ }
@@ -39,11 +39,76 @@
39
39
  "numTicks": "",
40
40
  "label": "Y Axis Example Label"
41
41
  },
42
- "boxplot": [],
43
42
  "topAxis": {
44
43
  "hasLine": false
45
44
  },
46
- "barThickness": "0.6",
45
+ "dataDescription": {
46
+ "horizontal": false,
47
+ "series": false
48
+ },
49
+ "dataFileName": "valid-area-chart.json",
50
+ "dataFileSourceType": "file",
51
+ "filterBehavior": "dropdown",
52
+ "formattedData": [
53
+ {
54
+ "Data 1": "900",
55
+ "Data 2": "135",
56
+ "Data 3": "300",
57
+ "Data 4": "95",
58
+ "Data 5": "120",
59
+ "Data 6": "310",
60
+ "Date": "1/15/2016"
61
+ },
62
+ {
63
+ "Data 1": "4000",
64
+ "Data 2": "90",
65
+ "Data 3": "240",
66
+ "Data 4": "60",
67
+ "Data 5": "160",
68
+ "Data 6": "2000",
69
+ "Date": "2/15/2016"
70
+ },
71
+ {
72
+ "Data 1": "500",
73
+ "Data 2": "300",
74
+ "Data 3": "290",
75
+ "Data 4": "100",
76
+ "Data 5": "200",
77
+ "Data 6": "250",
78
+ "Date": "3/15/2016"
79
+ },
80
+ {
81
+ "Data 1": "1200",
82
+ "Data 2": "160",
83
+ "Data 3": "230",
84
+ "Data 4": "180",
85
+ "Data 5": "160",
86
+ "Data 6": "220",
87
+ "Date": "4/15/2016"
88
+ },
89
+ {
90
+ "Data 1": "8000",
91
+ "Data 2": "350",
92
+ "Data 3": "300",
93
+ "Data 4": "150",
94
+ "Data 5": "130",
95
+ "Data 6": "100",
96
+ "Date": "5/15/2016"
97
+ },
98
+ {
99
+ "Data 1": "9000",
100
+ "Data 2": "220",
101
+ "Data 3": "320",
102
+ "Data 4": "100",
103
+ "Data 5": "220",
104
+ "Data 6": "300",
105
+ "Date": "6/15/2016"
106
+ }
107
+ ],
108
+ "heights": {
109
+ "horizontal": 750,
110
+ "vertical": 300
111
+ },
47
112
  "barHeight": 25,
48
113
  "barSpace": 20,
49
114
  "height": 300,
@@ -99,11 +164,11 @@
99
164
  "isPaletteReversed": false,
100
165
  "labels": false,
101
166
  "dataFormat": {
167
+ "abbreviated": true,
102
168
  "commas": true,
103
169
  "prefix": "",
104
170
  "suffix": " units",
105
- "useFormat": true,
106
- "abbreviated": true
171
+ "useFormat": true
107
172
  },
108
173
  "confidenceKeys": {},
109
174
  "visual": {
@@ -171,15 +236,7 @@
171
236
  "series": [
172
237
  {
173
238
  "dataKey": "Data 1",
174
- "type": "Bar"
175
- },
176
- {
177
- "dataKey": "Data 2",
178
- "type": "Bar"
179
- },
180
- {
181
- "dataKey": "Data 3",
182
- "type": "Bar"
239
+ "type": "Area Chart"
183
240
  }
184
241
  ],
185
242
  "description": "This example shows a bar chart created in the visualization editor in WCMS",