@cdc/chart 4.23.4 → 4.23.6

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 (42) hide show
  1. package/dist/cdcchart.js +54845 -51755
  2. package/examples/feature/__data__/planet-example-data.json +14 -32
  3. package/examples/feature/__data__/planet-logaritmic-data.json +56 -0
  4. package/examples/feature/area/area-chart-category.json +240 -0
  5. package/examples/feature/bar/example-bar-chart.json +544 -22
  6. package/examples/feature/bar/new.json +561 -0
  7. package/examples/feature/bar/planet-chart-logaritmic-config.json +170 -0
  8. package/examples/feature/boxplot/valid-boxplot.csv +17 -0
  9. package/examples/feature/combo/right-issues.json +190 -0
  10. package/examples/feature/filters/filter-testing.json +37 -3
  11. package/examples/feature/forecasting/combo-forecasting.json +245 -0
  12. package/examples/feature/forecasting/forecasting.json +5325 -0
  13. package/examples/feature/forecasting/index.json +203 -0
  14. package/examples/feature/forecasting/random_data.csv +366 -0
  15. package/examples/feature/line/line-chart.json +3 -3
  16. package/examples/feature/test-highlight/test-highlight-2.json +789 -0
  17. package/examples/feature/test-highlight/test-highlight-vertical.json +561 -0
  18. package/examples/feature/test-highlight/test-highlight.json +100 -0
  19. package/examples/feature/tests-non-numerics/stacked-vertical-bar-example-nonnumerics.json +1 -2
  20. package/examples/gallery/bar-chart-horizontal/horizontal-highlight.json +345 -0
  21. package/examples/gallery/line/line.json +173 -1
  22. package/index.html +14 -8
  23. package/package.json +2 -2
  24. package/src/CdcChart.jsx +342 -25
  25. package/src/components/AreaChart.jsx +32 -40
  26. package/src/components/BarChart.jsx +147 -25
  27. package/src/components/DataTable.jsx +30 -12
  28. package/src/components/DeviationBar.jsx +32 -32
  29. package/src/components/EditorPanel.jsx +1902 -1126
  30. package/src/components/Forecasting.jsx +147 -0
  31. package/src/components/Legend.jsx +193 -243
  32. package/src/components/LineChart.jsx +4 -9
  33. package/src/components/LinearChart.jsx +263 -285
  34. package/src/components/Series.jsx +518 -0
  35. package/src/components/SparkLine.jsx +3 -3
  36. package/src/data/initial-state.js +24 -5
  37. package/src/hooks/useHighlightedBars.js +154 -0
  38. package/src/hooks/useMinMax.js +128 -0
  39. package/src/hooks/useReduceData.js +31 -57
  40. package/src/hooks/useRightAxis.js +8 -2
  41. package/src/hooks/useScales.js +196 -0
  42. /package/examples/feature/area/{area-chart.json → area-chart-date.json} +0 -0
@@ -0,0 +1,170 @@
1
+ {
2
+ "type": "chart",
3
+ "title": "Planet Radius (Combo Example)",
4
+ "showTitle": true,
5
+ "theme": "theme-blue",
6
+ "animate": false,
7
+ "fontSize": "small",
8
+ "lineDatapointStyle": "hover",
9
+ "barHasBorder": "true",
10
+ "isLollipopChart": false,
11
+ "lollipopShape": "circle",
12
+ "lollipopColorStyle": "two-tone",
13
+ "visualizationSubType": "regular",
14
+ "barStyle": "flat",
15
+ "roundingStyle": "standard",
16
+ "tipRounding": "top",
17
+ "padding": {
18
+ "left": 0,
19
+ "right": 0
20
+ },
21
+ "yAxis": {
22
+ "hideAxis": false,
23
+ "displayNumbersOnBar": false,
24
+ "hideLabel": false,
25
+ "hideTicks": false,
26
+ "size": "123",
27
+ "gridLines": true,
28
+ "enablePadding": false,
29
+ "min": "",
30
+ "max": "",
31
+ "labelColor": "#333",
32
+ "tickLabelColor": "#333",
33
+ "tickColor": "#333",
34
+ "rightHideAxis": true,
35
+ "rightAxisSize": 50,
36
+ "rightLabel": "",
37
+ "rightLabelOffsetSize": 0,
38
+ "rightAxisLabelColor": "#333",
39
+ "rightAxisTickLabelColor": "#333",
40
+ "rightAxisTickColor": "#333",
41
+ "numTicks": "",
42
+ "axisPadding": 0,
43
+ "tickRotation": 0,
44
+ "label": "Measurement (1000km)",
45
+ "labelPlacement": "On Date/Category Axis"
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": 15,
84
+ "heights": {
85
+ "vertical": 300,
86
+ "horizontal": 750
87
+ },
88
+ "xAxis": {
89
+ "type": "categorical",
90
+ "showTargetLabel": true,
91
+ "targetLabel": "Target",
92
+ "hideAxis": false,
93
+ "hideLabel": false,
94
+ "hideTicks": false,
95
+ "size": 75,
96
+ "tickRotation": 0,
97
+ "min": "",
98
+ "max": "",
99
+ "labelColor": "#333",
100
+ "tickLabelColor": "#333",
101
+ "tickColor": "#333",
102
+ "numTicks": "",
103
+ "labelOffset": 65,
104
+ "axisPadding": 0,
105
+ "target": 0,
106
+ "label": "Planet",
107
+ "dataKey": "name"
108
+ },
109
+ "table": {
110
+ "label": "Data Table",
111
+ "expanded": false,
112
+ "limitHeight": false,
113
+ "height": "",
114
+ "caption": "",
115
+ "showDownloadUrl": false,
116
+ "showDataTableLink": true,
117
+ "show": true
118
+ },
119
+ "orientation": "vertical",
120
+ "legend": {
121
+ "behavior": "isolate",
122
+ "singleRow": false,
123
+ "colorCode": "",
124
+ "reverseLabelOrder": false,
125
+ "description": "",
126
+ "dynamicLegend": false,
127
+ "dynamicLegendDefaultText": "Show All",
128
+ "dynamicLegendItemLimit": 5,
129
+ "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
130
+ "dynamicLegendChartMessage": "Select Options from the Legend"
131
+ },
132
+ "exclusions": {
133
+ "active": false,
134
+ "keys": []
135
+ },
136
+ "palette": "qualitative3",
137
+ "isPaletteReversed": false,
138
+ "twoColor": {
139
+ "palette": "monochrome-1",
140
+ "isPaletteReversed": false
141
+ },
142
+ "labels": true,
143
+ "dataFormat": {
144
+ "commas": false,
145
+ "prefix": "",
146
+ "suffix": "",
147
+ "abbreviated": true,
148
+ "bottomSuffix": "",
149
+ "bottomPrefix": "",
150
+ "bottomAbbreviated": false,
151
+ "roundTo": 1
152
+ },
153
+ "confidenceKeys": {},
154
+ "visual": {
155
+ "border": true,
156
+ "accent": true,
157
+ "background": true
158
+ },
159
+ "useLogScale": true,
160
+ "filterBehavior": "Filter Change",
161
+ "highlightedBarValues": [],
162
+ "series": [
163
+ {
164
+ "dataKey": "Radius",
165
+ "type": "Line"
166
+ }
167
+ ],
168
+ "dataUrl": "/examples/feature/__data__/planet-logaritmic-data.json",
169
+ "visualizationType": "Bar"
170
+ }
@@ -0,0 +1,17 @@
1
+ Group_Category,Value
2
+ category one,21
3
+ category one,19
4
+ category one,23
5
+ category one,24
6
+ category two,18
7
+ category two,10
8
+ category two,12
9
+ category two,19
10
+ category three,30
11
+ category three,35
12
+ category three,36
13
+ category three,40
14
+ category four,50
15
+ category four,54
16
+ category four,42
17
+ category four,159
@@ -0,0 +1,190 @@
1
+ {
2
+ "type": "chart",
3
+ "title": "Planet Radius (Combo Example)",
4
+ "showTitle": true,
5
+ "showDownloadMediaButton": false,
6
+ "theme": "theme-blue",
7
+ "animate": true,
8
+ "fontSize": "medium",
9
+ "lineDatapointStyle": "hover",
10
+ "barHasBorder": "false",
11
+ "isLollipopChart": false,
12
+ "lollipopShape": "circle",
13
+ "lollipopColorStyle": "two-tone",
14
+ "visualizationSubType": "regular",
15
+ "barStyle": "",
16
+ "roundingStyle": "standard",
17
+ "tipRounding": "top",
18
+ "general": {
19
+ "showDownloadButton": false
20
+ },
21
+ "padding": {
22
+ "left": 0,
23
+ "right": 0
24
+ },
25
+ "yAxis": {
26
+ "hideAxis": false,
27
+ "displayNumbersOnBar": false,
28
+ "hideLabel": false,
29
+ "hideTicks": false,
30
+ "size": "150",
31
+ "gridLines": false,
32
+ "enablePadding": false,
33
+ "min": "",
34
+ "max": "",
35
+ "labelColor": "#333",
36
+ "tickLabelColor": "#333",
37
+ "tickColor": "#333",
38
+ "rightHideAxis": false,
39
+ "rightAxisSize": 50,
40
+ "rightLabel": "Diameter",
41
+ "rightLabelOffsetSize": "40",
42
+ "rightAxisLabelColor": "#333",
43
+ "rightAxisTickLabelColor": "#333",
44
+ "rightAxisTickColor": "#333",
45
+ "numTicks": "",
46
+ "axisPadding": 0,
47
+ "tickRotation": 0,
48
+ "anchors": [],
49
+ "label": "Measurement (1000km)",
50
+ "rightNumTicks": "7",
51
+ "rightHideLabel": false
52
+ },
53
+ "boxplot": {
54
+ "plots": [],
55
+ "borders": "true",
56
+ "firstQuartilePercentage": 25,
57
+ "thirdQuartilePercentage": 75,
58
+ "boxWidthPercentage": 40,
59
+ "plotOutlierValues": false,
60
+ "plotNonOutlierValues": true,
61
+ "legend": {
62
+ "showHowToReadText": false,
63
+ "howToReadText": ""
64
+ },
65
+ "labels": {
66
+ "q1": "Lower Quartile",
67
+ "q2": "q2",
68
+ "q3": "Upper Quartile",
69
+ "q4": "q4",
70
+ "minimum": "Minimum",
71
+ "maximum": "Maximum",
72
+ "mean": "Mean",
73
+ "median": "Median",
74
+ "sd": "Standard Deviation",
75
+ "iqr": "Interquartile Range",
76
+ "count": "Count",
77
+ "outliers": "Outliers",
78
+ "values": "Values"
79
+ }
80
+ },
81
+ "topAxis": {
82
+ "hasLine": true
83
+ },
84
+ "isLegendValue": false,
85
+ "barThickness": 0.35,
86
+ "barHeight": 25,
87
+ "barSpace": 15,
88
+ "heights": {
89
+ "vertical": 300,
90
+ "horizontal": 750
91
+ },
92
+ "xAxis": {
93
+ "anchors": [],
94
+ "type": "categorical",
95
+ "showTargetLabel": true,
96
+ "targetLabel": "Target",
97
+ "hideAxis": false,
98
+ "hideLabel": false,
99
+ "hideTicks": false,
100
+ "size": 75,
101
+ "tickRotation": 30,
102
+ "min": "",
103
+ "max": "",
104
+ "labelColor": "#333",
105
+ "tickLabelColor": "#333",
106
+ "tickColor": "#333",
107
+ "numTicks": "",
108
+ "labelOffset": 65,
109
+ "axisPadding": 0,
110
+ "target": 0,
111
+ "label": "Planet",
112
+ "dataKey": "name"
113
+ },
114
+ "table": {
115
+ "label": "Data Table",
116
+ "expanded": false,
117
+ "limitHeight": false,
118
+ "height": "",
119
+ "caption": "",
120
+ "showDownloadUrl": false,
121
+ "showDataTableLink": true,
122
+ "indexLabel": "",
123
+ "download": false,
124
+ "showVertical": false,
125
+ "show": true
126
+ },
127
+ "orientation": "vertical",
128
+ "color": "pinkpurple",
129
+ "columns": {},
130
+ "legend": {
131
+ "behavior": "isolate",
132
+ "singleRow": false,
133
+ "colorCode": "",
134
+ "reverseLabelOrder": false,
135
+ "description": "",
136
+ "dynamicLegend": false,
137
+ "dynamicLegendDefaultText": "Show All",
138
+ "dynamicLegendItemLimit": 5,
139
+ "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
140
+ "dynamicLegendChartMessage": "Select Options from the Legend",
141
+ "position": "right",
142
+ "hide": false
143
+ },
144
+ "exclusions": {
145
+ "active": false,
146
+ "keys": []
147
+ },
148
+ "palette": "qualitative-bold",
149
+ "isPaletteReversed": false,
150
+ "twoColor": {
151
+ "palette": "monochrome-1",
152
+ "isPaletteReversed": false
153
+ },
154
+ "labels": false,
155
+ "dataFormat": {
156
+ "commas": false,
157
+ "prefix": "",
158
+ "suffix": "km",
159
+ "abbreviated": false,
160
+ "bottomSuffix": "",
161
+ "bottomPrefix": "",
162
+ "bottomAbbreviated": false,
163
+ "roundTo": 1
164
+ },
165
+ "confidenceKeys": {},
166
+ "visual": {
167
+ "border": true,
168
+ "accent": true,
169
+ "background": true,
170
+ "verticalHoverLine": false,
171
+ "horizontalHoverLine": false
172
+ },
173
+ "useLogScale": false,
174
+ "filterBehavior": "Filter Change",
175
+ "highlightedBarValues": [],
176
+ "series": [
177
+ {
178
+ "dataKey": "Radius",
179
+ "type": "Bar"
180
+ },
181
+ {
182
+ "dataKey": "Diameter",
183
+ "type": "Line",
184
+ "axis": "Right"
185
+ }
186
+ ],
187
+ "dataUrl": "/examples/feature/__data__/planet-example-data.json",
188
+ "animateReplay": true,
189
+ "visualizationType": "Combo"
190
+ }
@@ -2,6 +2,7 @@
2
2
  "type": "chart",
3
3
  "title": "Planet Radius (Combo Example)",
4
4
  "showTitle": true,
5
+ "showDownloadMediaButton": false,
5
6
  "theme": "theme-blue",
6
7
  "animate": true,
7
8
  "fontSize": "medium",
@@ -14,6 +15,9 @@
14
15
  "barStyle": "",
15
16
  "roundingStyle": "standard",
16
17
  "tipRounding": "top",
18
+ "general": {
19
+ "showDownloadButton": true
20
+ },
17
21
  "padding": {
18
22
  "left": 0,
19
23
  "right": 0
@@ -41,6 +45,7 @@
41
45
  "numTicks": "",
42
46
  "axisPadding": 0,
43
47
  "tickRotation": 0,
48
+ "anchors": [],
44
49
  "label": "Measurement (1000km)"
45
50
  },
46
51
  "boxplot": {
@@ -83,6 +88,7 @@
83
88
  "horizontal": 750
84
89
  },
85
90
  "xAxis": {
91
+ "anchors": [],
86
92
  "type": "categorical",
87
93
  "showTargetLabel": true,
88
94
  "targetLabel": "Target",
@@ -111,9 +117,17 @@
111
117
  "caption": "",
112
118
  "showDownloadUrl": false,
113
119
  "showDataTableLink": true,
120
+ "indexLabel": "",
121
+ "showVertical": false,
114
122
  "show": true
115
123
  },
116
124
  "orientation": "vertical",
125
+ "color": "pinkpurple",
126
+ "columns": {
127
+ "additionalColumn1": {
128
+ "name": ""
129
+ }
130
+ },
117
131
  "legend": {
118
132
  "behavior": "isolate",
119
133
  "singleRow": false,
@@ -155,10 +169,9 @@
155
169
  "accent": true,
156
170
  "background": true
157
171
  },
172
+ "useLogScale": false,
158
173
  "filterBehavior": "Apply Button",
159
- "dataUrl": "/examples/feature/__data__/planet-example-data.json",
160
- "animateReplay": true,
161
- "visualizationType": "Combo",
174
+ "highlightedBarValues": [],
162
175
  "series": [
163
176
  {
164
177
  "dataKey": "Radius",
@@ -174,5 +187,26 @@
174
187
  "type": "Bar",
175
188
  "axis": "Left"
176
189
  }
190
+ ],
191
+ "dataUrl": "/examples/feature/__data__/planet-example-data.json",
192
+ "animateReplay": true,
193
+ "visualizationType": "Combo",
194
+ "filters": [
195
+ {
196
+ "values": [
197
+ "0.3",
198
+ "0.7",
199
+ "1",
200
+ "2",
201
+ "7",
202
+ "8",
203
+ "18",
204
+ "22"
205
+ ],
206
+ "active": "0.3",
207
+ "filterStyle": "pill",
208
+ "order": "asc",
209
+ "columnName": "Diameter"
210
+ }
177
211
  ]
178
212
  }