@cdc/chart 4.23.1 → 4.23.2

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 (52) hide show
  1. package/dist/cdcchart.js +54532 -696
  2. package/examples/Barchart_with_negative.json +34 -0
  3. package/examples/box-plot.json +2 -2
  4. package/examples/dynamic-legends.json +1 -1
  5. package/examples/example-bar-chart-nonnumeric.json +36 -0
  6. package/examples/example-bar-chart.json +33 -0
  7. package/examples/example-combo-bar-nonnumeric.json +105 -0
  8. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-categorical.json +1 -1
  9. package/examples/gallery/bar-chart-vertical/vertical-bar-chart.json +2 -2
  10. package/examples/gallery/paired-bar/paired-bar-chart.json +65 -13
  11. package/examples/line-chart-nonnumeric.json +32 -0
  12. package/examples/line-chart.json +21 -63
  13. package/examples/newdata.json +1 -1
  14. package/examples/planet-combo-example-config.json +143 -20
  15. package/examples/planet-example-data-nonnumeric.json +56 -0
  16. package/examples/planet-example-data.json +2 -2
  17. package/examples/planet-pie-example-config-nonnumeric.json +30 -0
  18. package/examples/scatterplot-continuous.csv +17 -0
  19. package/examples/scatterplot.json +136 -0
  20. package/examples/sparkline-chart-nonnumeric.json +76 -0
  21. package/examples/stacked-vertical-bar-example-negative.json +154 -0
  22. package/examples/stacked-vertical-bar-example-nonnumerics.json +154 -0
  23. package/index.html +74 -0
  24. package/package.json +29 -23
  25. package/src/{CdcChart.tsx → CdcChart.jsx} +74 -56
  26. package/src/components/{BarChart.tsx → BarChart.jsx} +99 -91
  27. package/src/components/BoxPlot.jsx +88 -0
  28. package/src/components/{DataTable.tsx → DataTable.jsx} +102 -25
  29. package/src/components/{EditorPanel.js → EditorPanel.jsx} +228 -14
  30. package/src/components/{Filters.js → Filters.jsx} +6 -12
  31. package/src/components/{Legend.js → Legend.jsx} +120 -108
  32. package/src/components/{LineChart.tsx → LineChart.jsx} +26 -12
  33. package/src/components/{LinearChart.tsx → LinearChart.jsx} +67 -47
  34. package/src/components/{PairedBarChart.tsx → PairedBarChart.jsx} +45 -78
  35. package/src/components/{PieChart.tsx → PieChart.jsx} +17 -32
  36. package/src/components/ScatterPlot.jsx +48 -0
  37. package/src/components/{SparkLine.js → SparkLine.jsx} +49 -18
  38. package/src/components/{useIntersectionObserver.tsx → useIntersectionObserver.jsx} +1 -1
  39. package/src/data/initial-state.js +33 -3
  40. package/src/hooks/{useColorPalette.ts → useColorPalette.js} +10 -28
  41. package/src/hooks/{useReduceData.ts → useReduceData.js} +25 -14
  42. package/src/hooks/useRightAxis.js +3 -1
  43. package/src/index.jsx +16 -0
  44. package/src/scss/DataTable.scss +22 -0
  45. package/src/scss/main.scss +30 -10
  46. package/vite.config.js +4 -0
  47. package/dist/495.js +0 -3
  48. package/dist/703.js +0 -1
  49. package/src/components/BoxPlot.js +0 -92
  50. package/src/index.html +0 -67
  51. package/src/index.tsx +0 -18
  52. /package/src/{context.tsx → ConfigContext.jsx} +0 -0
@@ -1,36 +1,159 @@
1
1
  {
2
+ "type": "chart",
2
3
  "title": "Planet Radius (Combo Example)",
3
- "dataUrl": "/examples/planet-example-data.json",
4
+ "theme": "theme-blue",
4
5
  "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
- },
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",
17
16
  "padding": {
18
17
  "left": 0,
19
18
  "right": 0
20
19
  },
21
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": "#333",
30
+ "tickLabelColor": "#333",
31
+ "tickColor": "#333",
32
+ "rightHideAxis": false,
33
+ "rightAxisSize": 50,
34
+ "rightLabel": "",
35
+ "rightLabelOffsetSize": 0,
36
+ "rightAxisLabelColor": "#333",
37
+ "rightAxisTickLabelColor": "#333",
38
+ "rightAxisTickColor": "#333",
39
+ "numTicks": "",
40
+ "axisPadding": 0,
41
+ "tickRotation": 0,
22
42
  "label": "Measurement (1000km)"
23
43
  },
44
+ "boxplot": {
45
+ "plots": [],
46
+ "borders": "true",
47
+ "firstQuartilePercentage": 25,
48
+ "thirdQuartilePercentage": 75,
49
+ "boxWidthPercentage": 40,
50
+ "plotOutlierValues": false,
51
+ "plotNonOutlierValues": true,
52
+ "legend": {
53
+ "showHowToReadText": false,
54
+ "howToReadText": ""
55
+ },
56
+ "labels": {
57
+ "q1": "Lower Quartile",
58
+ "q2": "q2",
59
+ "q3": "Upper Quartile",
60
+ "q4": "q4",
61
+ "minimum": "Minimum",
62
+ "maximum": "Maximum",
63
+ "mean": "Mean",
64
+ "median": "Median",
65
+ "sd": "Standard Deviation",
66
+ "iqr": "Interquartile Range",
67
+ "count": "Count",
68
+ "outliers": "Outliers",
69
+ "values": "Values"
70
+ }
71
+ },
72
+ "topAxis": {
73
+ "hasLine": true
74
+ },
75
+ "isLegendValue": false,
76
+ "barThickness": 0.35,
77
+ "barHeight": 25,
78
+ "barSpace": 15,
79
+ "heights": {
80
+ "vertical": 300,
81
+ "horizontal": 750
82
+ },
24
83
  "xAxis": {
84
+ "type": "categorical",
85
+ "hideAxis": false,
86
+ "hideLabel": false,
87
+ "hideTicks": false,
88
+ "size": 75,
89
+ "tickRotation": 30,
90
+ "min": "",
91
+ "max": "",
92
+ "labelColor": "#333",
93
+ "tickLabelColor": "#333",
94
+ "tickColor": "#333",
95
+ "numTicks": "",
96
+ "labelOffset": 65,
97
+ "axisPadding": 0,
25
98
  "label": "Planet",
26
- "dataKey": "name",
27
- "tickRotation": 30
99
+ "dataKey": "name"
100
+ },
101
+ "table": {
102
+ "label": "Data Table",
103
+ "expanded": false,
104
+ "limitHeight": false,
105
+ "height": "",
106
+ "caption": "",
107
+ "showDownloadUrl": false,
108
+ "show": true
28
109
  },
110
+ "orientation": "vertical",
29
111
  "legend": {
112
+ "behavior": "isolate",
113
+ "position": "right",
114
+ "singleRow": false,
115
+ "colorCode": "",
116
+ "reverseLabelOrder": false,
117
+ "description": "",
118
+ "dynamicLegend": false,
119
+ "dynamicLegendDefaultText": "Show All",
120
+ "dynamicLegendItemLimit": 5,
121
+ "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
122
+ "dynamicLegendChartMessage": "Select Options from the Legend",
30
123
  "hide": false
31
124
  },
32
- "table": {
33
- "label": "Data Table",
34
- "expanded": false
35
- }
36
- }
125
+ "exclusions": {
126
+ "active": false,
127
+ "keys": []
128
+ },
129
+ "palette": "qualitative-bold",
130
+ "isPaletteReversed": false,
131
+ "labels": false,
132
+ "dataFormat": {
133
+ "commas": false,
134
+ "prefix": "",
135
+ "suffix": "km",
136
+ "abbreviated": false,
137
+ "roundTo": 1
138
+ },
139
+ "confidenceKeys": {},
140
+ "visual": {
141
+ "border": true,
142
+ "accent": true,
143
+ "background": true
144
+ },
145
+ "dataUrl": "/examples/planet-example-data.json",
146
+ "animateReplay": true,
147
+ "visualizationType": "Combo",
148
+ "series": [
149
+ {
150
+ "dataKey": "Radius",
151
+ "type": "Line",
152
+ "axis": "Right"
153
+ },
154
+ {
155
+ "dataKey": "Diameter",
156
+ "type": "Bar"
157
+ }
158
+ ]
159
+ }
@@ -0,0 +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": "NA",
12
+ "distance": "0"
13
+ },
14
+ {
15
+ "name": "Uranus",
16
+ "Radius": null,
17
+ "Diameter": "8",
18
+ "distance": "0"
19
+ },
20
+ {
21
+ "name": "Neptune",
22
+ "Radius": "1,123",
23
+ "Diameter": "7",
24
+ "distance": "0"
25
+ },
26
+ {
27
+ "name": "Earth",
28
+ "Radius": "1,345",
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
+ ]
@@ -13,7 +13,7 @@
13
13
  },
14
14
  {
15
15
  "name": "Uranus",
16
- "Radius": "0",
16
+ "Radius": "-10",
17
17
  "Diameter": "8",
18
18
  "distance": "0"
19
19
  },
@@ -53,4 +53,4 @@
53
53
  "Diameter": "0.3",
54
54
  "distance": "0"
55
55
  }
56
- ]
56
+ ]
@@ -0,0 +1,30 @@
1
+ {
2
+ "title": "Planet Radius (Pie Example)",
3
+ "dataUrl": "/examples/planet-example-data-nonnumeric.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
+ }
@@ -0,0 +1,17 @@
1
+ x,y1,y2,y3,y4
2
+ 1,8,37,72,82
3
+ 2,2,30,75,83
4
+ 3,15,42,51,95
5
+ 4,10,38,61,96
6
+ 5,1,38,66,86
7
+ 60,6,37,70,85
8
+ 10,19,47,59,91
9
+ 24,18,32,68,89
10
+ 3,7,38,74,89
11
+ 26,10,39,56,91
12
+ 42,16,38,55,76
13
+ 32,20,46,52,94
14
+ 11,9,41,57,86
15
+ 22,10,47,56,80
16
+ 73,1,36,71,94
17
+ 23,13,30,66,78
@@ -0,0 +1,136 @@
1
+ {
2
+ "type": "chart",
3
+ "title": "Scatter Plot",
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
+ "dataKey": "y",
22
+ "hideAxis": false,
23
+ "displayNumbersOnBar": false,
24
+ "hideLabel": false,
25
+ "hideTicks": false,
26
+ "size": 50,
27
+ "gridLines": true,
28
+ "min": "",
29
+ "max": "",
30
+ "labelColor": "#333",
31
+ "tickLabelColor": "#333",
32
+ "tickColor": "#333",
33
+ "rightHideAxis": true,
34
+ "rightAxisSize": 50,
35
+ "rightLabelOffsetSize": 0,
36
+ "rightAxisLabelColor": "#333",
37
+ "rightAxisTickLabelColor": "#333",
38
+ "rightAxisTickColor": "#333",
39
+ "isLegendValue": false,
40
+ "numTicks": "",
41
+ "label": "Y Axis"
42
+ },
43
+ "boxplot": [],
44
+ "topAxis": {
45
+ "hasLine": false
46
+ },
47
+ "barThickness": 0.35,
48
+ "barHeight": 25,
49
+ "height": 300,
50
+ "xAxis": {
51
+ "type": "continuous",
52
+ "hideAxis": false,
53
+ "hideLabel": false,
54
+ "hideTicks": false,
55
+ "size": 75,
56
+ "tickRotation": 0,
57
+ "min": "",
58
+ "max": "",
59
+ "labelColor": "#333",
60
+ "tickLabelColor": "#333",
61
+ "tickColor": "#333",
62
+ "isLegendValue": false,
63
+ "numTicks": "",
64
+ "dataKey": "x",
65
+ "label": "X Axis"
66
+ },
67
+ "table": {
68
+ "label": "Data Table",
69
+ "expanded": true,
70
+ "limitHeight": false,
71
+ "height": "",
72
+ "caption": "",
73
+ "show": true
74
+ },
75
+ "orientation": "vertical",
76
+ "legend": {
77
+ "behavior": "isolate",
78
+ "position": "right",
79
+ "singleRow": false,
80
+ "colorCode": "",
81
+ "reverseLabelOrder": false,
82
+ "description": "",
83
+ "dynamicLegend": false,
84
+ "dynamicLegendDefaultText": "Show All",
85
+ "dynamicLegendItemLimit": 5,
86
+ "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
87
+ "dynamicLegendChartMessage": "Select Options from the Legend"
88
+ },
89
+ "exclusions": {
90
+ "active": false,
91
+ "keys": []
92
+ },
93
+ "palette": "qualitative1",
94
+ "isPaletteReversed": false,
95
+ "labels": false,
96
+ "dataFormat": {
97
+ "commas": false,
98
+ "prefix": "",
99
+ "suffix": "",
100
+ "useFormat": false
101
+ },
102
+ "confidenceKeys": {},
103
+ "visual": {
104
+ "border": true,
105
+ "accent": true,
106
+ "background": true
107
+ },
108
+ "dataUrl": "/examples/scatterplot-continuous.csv",
109
+ "visualizationType": "Scatter Plot",
110
+ "description": "Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.",
111
+ "dataDescription": {
112
+ "horizontal": false,
113
+ "series": false,
114
+ "singleRow": false,
115
+ "xKey": "Group_Category",
116
+ "valueKey": "Value"
117
+ },
118
+ "series": [
119
+ {
120
+ "dataKey": "y1",
121
+ "type": "Bar"
122
+ },
123
+ {
124
+ "dataKey": "y2",
125
+ "type": "Bar"
126
+ },
127
+ {
128
+ "dataKey": "y3",
129
+ "type": "Bar"
130
+ },
131
+ {
132
+ "dataKey": "y4",
133
+ "type": "Bar"
134
+ }
135
+ ]
136
+ }
@@ -0,0 +1,76 @@
1
+ {
2
+ "type": "chart",
3
+ "title": "Example Spark Line",
4
+ "theme": "theme-blue",
5
+ "fontSize": "medium",
6
+ "height": "375",
7
+ "compact": true,
8
+ "padding": {
9
+ "left": 5,
10
+ "right": 5
11
+ },
12
+ "yAxis": {
13
+ "size": "75",
14
+ "gridLines": false,
15
+ "label": "Y-Axis Example Label",
16
+ "numTicks": "9"
17
+ },
18
+ "barThickness": 0.35,
19
+ "xAxis": {
20
+ "size": "77",
21
+ "tickRotation": "25",
22
+ "dataKey": "Date",
23
+ "label": "X-Axis Example Label",
24
+ "type": "date",
25
+ "dateParseFormat": "%d/%m/%Y",
26
+ "dateDisplayFormat": "%d/%m/%Y"
27
+ },
28
+ "table": {
29
+ "label": "Data Table",
30
+ "expanded": true,
31
+ "download": true
32
+ },
33
+ "legend": {
34
+ "behavior": "isolate",
35
+ "position": "right",
36
+ "label": "Type of Data"
37
+ },
38
+ "palette": "qualitative-bold",
39
+ "labels": false,
40
+ "dataFormat": {},
41
+ "confidenceKeys": {},
42
+ "data": [
43
+ {
44
+ "Date": "1/15/2016",
45
+ "Data 1": "44"
46
+ },
47
+ {
48
+ "Date": "2/15/2016",
49
+ "Data 1": "25"
50
+ },
51
+ {
52
+ "Date": "3/15/2016",
53
+ "Data 1": "NA"
54
+ },
55
+ {
56
+ "Date": "4/15/2016",
57
+ "Data 1": "75"
58
+ },
59
+ {
60
+ "Date": "5/15/2016",
61
+ "Data 1": "100"
62
+ },
63
+ {
64
+ "Date": "6/15/2016",
65
+ "Data 1": "50"
66
+ }
67
+ ],
68
+ "visualizationType": "Spark Line",
69
+ "series": [
70
+ {
71
+ "dataKey": "Data 1",
72
+ "type": "Bar"
73
+ }
74
+ ],
75
+ "description": "Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups."
76
+ }
@@ -0,0 +1,154 @@
1
+ {
2
+ "title": "Example Stacked Vertical",
3
+ "visualizationType": "Bar",
4
+ "visualizationSubType": "stacked",
5
+ "orientation": "vertical",
6
+ "animate": true,
7
+ "animateReplay": true,
8
+ "yAxis": {
9
+ "hideAxis": false,
10
+ "hideLabel": false,
11
+ "hideTicks": false,
12
+ "size": 50,
13
+ "gridLines": false
14
+ },
15
+ "barThickness": 0.35,
16
+ "height": 300,
17
+ "xAxis": {
18
+ "type": "categorical",
19
+ "hideAxis": false,
20
+ "hideLabel": false,
21
+ "hideTicks": false,
22
+ "size": 75,
23
+ "tickRotation": 0,
24
+ "dataKey": "Date"
25
+ },
26
+ "table": {
27
+ "label": "Data Table",
28
+ "expanded": true,
29
+ "show": true
30
+ },
31
+ "legend": {
32
+ "behavior": "isolate",
33
+ "position": "right",
34
+ "reverseLabelOrder": false
35
+ },
36
+ "series": [
37
+ {
38
+ "dataKey": "Data 1",
39
+ "type": "Bar"
40
+ },
41
+ {
42
+ "dataKey": "Data 2",
43
+ "type": "Bar"
44
+ }
45
+ ],
46
+ "data": [
47
+ {
48
+ "Date": "1/15/2016",
49
+ "Data 1": "90",
50
+ "Data 2": "NA",
51
+ "Data 3": "300",
52
+ "Data 4": "95",
53
+ "Data 5": "120",
54
+ "Data 6": "310",
55
+ "Data 7": "40",
56
+ "Data 8": "90",
57
+ "Data 9": "240",
58
+ "Data 10": "60",
59
+ "Data 11": "160",
60
+ "Data 12": "200"
61
+ },
62
+ {
63
+ "Date": "2/15/2016",
64
+ "Data 1": "40",
65
+ "Data 2": "90",
66
+ "Data 3": "240",
67
+ "Data 4": "60",
68
+ "Data 5": "160",
69
+ "Data 6": "200",
70
+ "Data 7": "40",
71
+ "Data 8": "90",
72
+ "Data 9": "240",
73
+ "Data 10": "60",
74
+ "Data 11": "160",
75
+ "Data 12": "200"
76
+ },
77
+ {
78
+ "Date": "3/15/2016",
79
+ "Data 1": "50",
80
+ "Data 2": "300",
81
+ "Data 3": "290",
82
+ "Data 4": "100",
83
+ "Data 5": "200",
84
+ "Data 6": "250",
85
+ "Data 7": "80",
86
+ "Data 8": "350",
87
+ "Data 9": "300",
88
+ "Data 10": "150",
89
+ "Data 11": "130",
90
+ "Data 12": "100"
91
+ },
92
+ {
93
+ "Date": "4/15/2016",
94
+ "Data 1": "120",
95
+ "Data 2": "160",
96
+ "Data 3": "230",
97
+ "Data 4": "180",
98
+ "Data 5": "160",
99
+ "Data 6": "220",
100
+ "Data 7": "40",
101
+ "Data 8": "90",
102
+ "Data 9": "240",
103
+ "Data 10": "60",
104
+ "Data 11": "160",
105
+ "Data 12": "200"
106
+ },
107
+ {
108
+ "Date": "5/15/2016",
109
+ "Data 1": "80",
110
+ "Data 2": "350",
111
+ "Data 3": "300",
112
+ "Data 4": "150",
113
+ "Data 5": "130",
114
+ "Data 6": "100",
115
+ "Data 7": "120",
116
+ "Data 8": "160",
117
+ "Data 9": "230",
118
+ "Data 10": "180",
119
+ "Data 11": "160",
120
+ "Data 12": "220"
121
+ },
122
+ {
123
+ "Date": "6/15/2016",
124
+ "Data 1": "90",
125
+ "Data 2": "220",
126
+ "Data 3": "320",
127
+ "Data 4": "100",
128
+ "Data 5": "220",
129
+ "Data 6": "300",
130
+ "Data 7": "40",
131
+ "Data 8": "90",
132
+ "Data 9": "240",
133
+ "Data 10": "60",
134
+ "Data 11": "160",
135
+ "Data 12": "200"
136
+ },
137
+ {
138
+ "Date": "7/15/2016",
139
+ "Data 1": "120",
140
+ "Data 2": "160",
141
+ "Data 3": "230",
142
+ "Data 4": "180",
143
+ "Data 5": "160",
144
+ "Data 6": "220",
145
+ "Data 7": "80",
146
+ "Data 8": "350",
147
+ "Data 9": "300",
148
+ "Data 10": "150",
149
+ "Data 11": "130",
150
+ "Data 12": "100"
151
+ }
152
+
153
+ ]
154
+ }