@cdc/chart 4.23.1 → 4.23.3

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 (74) hide show
  1. package/dist/cdcchart.js +56289 -702
  2. package/examples/Barchart_with_negative.json +34 -0
  3. package/examples/area-chart.json +187 -0
  4. package/examples/big-small-test-bar.json +328 -0
  5. package/examples/big-small-test-line.json +328 -0
  6. package/examples/big-small-test-negative.json +328 -0
  7. package/examples/box-plot.json +1 -2
  8. package/examples/dynamic-legends.json +1 -1
  9. package/examples/example-bar-chart-nonnumeric.json +36 -0
  10. package/examples/example-bar-chart.json +36 -0
  11. package/examples/example-combo-bar-nonnumeric.json +105 -0
  12. package/examples/example-sparkline.json +76 -0
  13. package/examples/gallery/bar-chart-horizontal/horizontal-bar-chart.json +31 -172
  14. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-categorical.json +1 -1
  15. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-confidence.json +1 -0
  16. package/examples/gallery/bar-chart-vertical/vertical-bar-chart-with-confidence.json +96 -14
  17. package/examples/gallery/bar-chart-vertical/vertical-bar-chart.json +2 -2
  18. package/examples/gallery/line/line.json +1 -0
  19. package/examples/gallery/paired-bar/paired-bar-chart.json +65 -13
  20. package/examples/horizontal-chart-max-increase.json +38 -0
  21. package/examples/line-chart-max-increase.json +32 -0
  22. package/examples/line-chart-nonnumeric.json +32 -0
  23. package/examples/line-chart.json +21 -63
  24. package/examples/newdata.json +1 -1
  25. package/examples/planet-combo-example-config.json +143 -20
  26. package/examples/planet-deviation-config.json +168 -0
  27. package/examples/planet-deviation-data.json +38 -0
  28. package/examples/planet-example-config.json +139 -20
  29. package/examples/planet-example-data-max-increase.json +56 -0
  30. package/examples/planet-example-data-nonnumeric.json +56 -0
  31. package/examples/planet-example-data.json +9 -9
  32. package/examples/planet-pie-example-config-nonnumeric.json +30 -0
  33. package/examples/scatterplot-continuous.csv +17 -0
  34. package/examples/scatterplot.json +136 -0
  35. package/examples/sparkline-chart-nonnumeric.json +76 -0
  36. package/examples/stacked-vertical-bar-example-negative.json +154 -0
  37. package/examples/stacked-vertical-bar-example-nonnumerics.json +154 -0
  38. package/index.html +91 -0
  39. package/package.json +33 -24
  40. package/src/{CdcChart.tsx → CdcChart.jsx} +196 -124
  41. package/src/components/AreaChart.jsx +198 -0
  42. package/src/components/{BarChart.tsx → BarChart.jsx} +154 -122
  43. package/src/components/BoxPlot.jsx +101 -0
  44. package/src/components/{DataTable.tsx → DataTable.jsx} +109 -28
  45. package/src/components/DeviationBar.jsx +191 -0
  46. package/src/components/{EditorPanel.js → EditorPanel.jsx} +676 -157
  47. package/src/components/{Filters.js → Filters.jsx} +6 -11
  48. package/src/components/Legend.jsx +316 -0
  49. package/src/components/{LineChart.tsx → LineChart.jsx} +22 -26
  50. package/src/components/{LinearChart.tsx → LinearChart.jsx} +214 -91
  51. package/src/components/{PairedBarChart.tsx → PairedBarChart.jsx} +44 -78
  52. package/src/components/{PieChart.tsx → PieChart.jsx} +26 -44
  53. package/src/components/ScatterPlot.jsx +51 -0
  54. package/src/components/SparkLine.jsx +218 -0
  55. package/src/components/{useIntersectionObserver.tsx → useIntersectionObserver.jsx} +2 -2
  56. package/src/data/initial-state.js +51 -5
  57. package/src/hooks/useColorPalette.js +68 -0
  58. package/src/hooks/{useReduceData.ts → useReduceData.js} +26 -16
  59. package/src/hooks/useRightAxis.js +3 -1
  60. package/src/index.jsx +16 -0
  61. package/src/scss/DataTable.scss +22 -0
  62. package/src/scss/editor-panel.scss +5 -0
  63. package/src/scss/main.scss +30 -10
  64. package/src/test/CdcChart.test.jsx +6 -0
  65. package/vite.config.js +4 -0
  66. package/dist/495.js +0 -3
  67. package/dist/703.js +0 -1
  68. package/src/components/BoxPlot.js +0 -92
  69. package/src/components/Legend.js +0 -291
  70. package/src/components/SparkLine.js +0 -185
  71. package/src/hooks/useColorPalette.ts +0 -76
  72. package/src/index.html +0 -67
  73. package/src/index.tsx +0 -18
  74. /package/src/{context.tsx → ConfigContext.jsx} +0 -0
@@ -1,36 +1,108 @@
1
1
  {
2
2
  "type": "chart",
3
- "title": "Bar Chart with Confidence Intervals",
4
- "theme": "theme-green",
3
+ "title": "Example Bar Chart",
4
+ "theme": "theme-blue",
5
+ "animate": false,
5
6
  "fontSize": "medium",
6
- "height": 300,
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",
7
16
  "padding": {
8
17
  "left": 5,
9
18
  "right": 5
10
19
  },
11
20
  "yAxis": {
12
- "size": "75",
21
+ "hideAxis": false,
22
+ "displayNumbersOnBar": false,
23
+ "hideLabel": false,
24
+ "hideTicks": false,
25
+ "size": "150",
13
26
  "gridLines": true,
14
- "label": "Y-Axis Example Label"
27
+ "min": "",
28
+ "max": "",
29
+ "labelColor": "#333",
30
+ "tickLabelColor": "#333",
31
+ "tickColor": "#333",
32
+ "rightHideAxis": true,
33
+ "rightAxisSize": 0,
34
+ "rightLabelOffsetSize": 0,
35
+ "rightAxisLabelColor": "#333",
36
+ "rightAxisTickLabelColor": "#333",
37
+ "rightAxisTickColor": "#333",
38
+ "isLegendValue": false,
39
+ "numTicks": "",
40
+ "label": "Y Axis Example Label"
41
+ },
42
+ "topAxis": {
43
+ "hasLine": false
15
44
  },
16
- "barThickness": 0.35,
45
+ "barThickness": "0.6",
46
+ "barHeight": 25,
47
+ "height": 300,
17
48
  "xAxis": {
18
- "size": "50",
49
+ "type": "categorical",
50
+ "hideAxis": false,
51
+ "hideLabel": false,
52
+ "hideTicks": false,
53
+ "size": "59",
19
54
  "tickRotation": 0,
55
+ "min": "",
56
+ "max": "",
57
+ "labelColor": "#333",
58
+ "tickLabelColor": "#333",
59
+ "tickColor": "#333",
60
+ "isLegendValue": false,
61
+ "numTicks": "",
20
62
  "dataKey": "Date",
21
- "label": "X-Axis Sample Label"
63
+ "label": "X Axis Example Label"
22
64
  },
23
65
  "table": {
24
- "label": "Data Table",
25
- "expanded": true
66
+ "label": "Data Type by Date",
67
+ "expanded": false,
68
+ "limitHeight": false,
69
+ "height": "",
70
+ "caption": "",
71
+ "show": true,
72
+ "download": true
26
73
  },
74
+ "orientation": "vertical",
27
75
  "legend": {
28
76
  "behavior": "isolate",
29
- "position": "right"
77
+ "position": "right",
78
+ "singleRow": false,
79
+ "colorCode": "",
80
+ "reverseLabelOrder": false,
81
+ "description": "",
82
+ "dynamicLegend": false,
83
+ "dynamicLegendDefaultText": "Show All",
84
+ "dynamicLegendItemLimit": 5,
85
+ "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
86
+ "dynamicLegendChartMessage": "Select Options from the Legend",
87
+ "label": "Type of Data"
88
+ },
89
+ "exclusions": {
90
+ "active": false,
91
+ "keys": []
30
92
  },
31
93
  "palette": "qualitative-bold",
94
+ "isPaletteReversed": false,
32
95
  "labels": false,
33
- "dataFormat": {},
96
+ "dataFormat": {
97
+ "commas": false,
98
+ "prefix": "",
99
+ "suffix": " units"
100
+ },
101
+ "visual": {
102
+ "border": true,
103
+ "accent": true,
104
+ "background": true
105
+ },
34
106
  "confidenceKeys": {
35
107
  "upper": "high",
36
108
  "lower": "low"
@@ -61,8 +133,18 @@
61
133
  "visualizationType": "Bar",
62
134
  "series": [
63
135
  {
64
- "dataKey": "Value",
136
+ "dataKey": "data1",
137
+ "type": "Bar"
138
+ },
139
+ {
140
+ "dataKey": "data2",
141
+ "type": "Bar"
142
+ },
143
+ {
144
+ "dataKey": "data3",
65
145
  "type": "Bar"
66
146
  }
67
- ]
147
+ ],
148
+ "description": "This example shows a bar chart created in the visualization editor in WCMS",
149
+ "dataCutoff": "0"
68
150
  }
@@ -153,11 +153,11 @@
153
153
  {
154
154
  "Date": "6/15/2016",
155
155
  "Data 1": "9000",
156
- "Data 2": "220",
156
+ "Data 2": "-2200",
157
157
  "Data 3": "320",
158
158
  "Data 4": "100",
159
159
  "Data 5": "220",
160
- "Data 6": "3000"
160
+ "Data 6": "-3000"
161
161
  }
162
162
  ],
163
163
  "visualizationType": "Bar",
@@ -0,0 +1 @@
1
+ {"type":"chart","title":"Example Line Chart","theme":"theme-green","animate":true,"fontSize":"medium","lineDatapointStyle":"hover","barHasBorder":"false","isLollipopChart":false,"lollipopShape":"circle","lollipopColorStyle":"two-tone","visualizationSubType":"regular","barStyle":"","roundingStyle":"standard","tipRounding":"top","padding":{"left":5,"right":5},"yAxis":{"hideAxis":false,"displayNumbersOnBar":false,"hideLabel":false,"hideTicks":false,"size":"75","gridLines":false,"min":"","max":"","label":"Y-Axis Example Label","numTicks":"9"},"barThickness":0.35,"barHeight":25,"height":"375","xAxis":{"type":"date","hideAxis":false,"hideLabel":false,"hideTicks":false,"size":"77","tickRotation":"25","min":"","max":"","dataKey":"Date","label":"X-Axis Example Label","dateParseFormat":"%d/%m/%Y","dateDisplayFormat":"%d/%m/%Y"},"table":{"label":"Data Table","expanded":true,"limitHeight":false,"height":"","caption":"","download":true,"show":true},"orientation":"vertical","legend":{"behavior":"isolate","position":"right","colorCode":"","reverseLabelOrder":false,"description":"","dynamicLegend":false,"dynamicLegendDefaultText":"Show All","dynamicLegendItemLimit":5,"dynamicLegendItemLimitMessage":"Dynamic Legend Item Limit Hit.","dynamicLegendChartMessage":"Select Options from the Legend","label":"Type of Data"},"exclusions":{"active":false,"keys":[]},"palette":"qualitative-bold","isPaletteReversed":false,"labels":false,"dataFormat":{"commas":false,"prefix":"","suffix":""},"confidenceKeys":{},"visual":{"border":true,"accent":true,"background":true},"data":[{"Date":"1/15/2016","Data 1":"90","Data 2":"135","Data 3":"300","Data 4":"95","Data 5":"120","Data 6":"310"},{"Date":"2/15/2016","Data 1":"40","Data 2":"90","Data 3":"240","Data 4":"60","Data 5":"160","Data 6":"200"},{"Date":"3/15/2016","Data 1":"50","Data 2":"300","Data 3":"290","Data 4":"100","Data 5":"200","Data 6":"250"},{"Date":"4/15/2016","Data 1":"120","Data 2":"160","Data 3":"230","Data 4":"180","Data 5":"160","Data 6":"220"},{"Date":"5/15/2016","Data 1":"80","Data 2":"350","Data 3":"300","Data 4":"150","Data 5":"130","Data 6":"100"},{"Date":"6/15/2016","Data 1":"90","Data 2":"220","Data 3":"320","Data 4":"100","Data 5":"220","Data 6":"300"}],"visualizationType":"Line","series":[{"dataKey":"Data 1","type":"Bar"},{"dataKey":"Data 2","type":"Bar"},{"dataKey":"Data 3","type":"Bar"},{"dataKey":"Data 4","type":"Bar"},{"dataKey":"Data 5","type":"Bar"},{"dataKey":"Data 6","type":"Bar"}]}
@@ -1,43 +1,80 @@
1
1
  {
2
2
  "type": "chart",
3
3
  "title": "Example Paired Bar Chart",
4
- "theme": "theme-slate",
4
+ "theme": "theme-pink",
5
+ "animate": false,
5
6
  "fontSize": "small",
6
7
  "lineDatapointStyle": "hover",
7
- "barHasBorder": "false",
8
+ "barHasBorder": "true",
8
9
  "isLollipopChart": false,
9
10
  "lollipopShape": "circle",
10
11
  "lollipopColorStyle": "two-tone",
11
12
  "visualizationSubType": null,
13
+ "barStyle": "",
14
+ "roundingStyle": "standard",
15
+ "tipRounding": "top",
12
16
  "padding": {
13
17
  "left": 5,
14
18
  "right": 5
15
19
  },
16
20
  "yAxis": {
17
- "hideAxis": true,
21
+ "hideAxis": false,
22
+ "displayNumbersOnBar": true,
18
23
  "hideLabel": false,
19
24
  "hideTicks": false,
20
- "size": "75",
25
+ "size": "86",
21
26
  "gridLines": false,
22
- "label": "Value Axis",
23
- "numTicks": "6"
27
+ "min": "",
28
+ "max": "",
29
+ "labelColor": "#333",
30
+ "tickLabelColor": "#333",
31
+ "tickColor": "#333",
32
+ "rightHideAxis": true,
33
+ "rightAxisSize": 50,
34
+ "rightLabel": "",
35
+ "rightLabelOffsetSize": 0,
36
+ "rightAxisLabelColor": "#333",
37
+ "rightAxisTickLabelColor": "#333",
38
+ "rightAxisTickColor": "#333",
39
+ "numTicks": "4",
40
+ "label": "Value Axisd"
41
+ },
42
+ "boxplot": [],
43
+ "topAxis": {
44
+ "hasLine": false
24
45
  },
46
+ "isLegendValue": false,
25
47
  "barThickness": 0.35,
26
- "height": "400",
48
+ "barHeight": "25",
49
+ "barSpace": "15",
50
+ "heights": {
51
+ "vertical": 300,
52
+ "horizontal": 287
53
+ },
27
54
  "xAxis": {
28
55
  "type": "categorical",
29
56
  "hideAxis": false,
30
57
  "hideLabel": false,
31
58
  "hideTicks": false,
32
- "size": "56",
59
+ "size": "79",
33
60
  "tickRotation": "0",
61
+ "min": "",
34
62
  "max": "15000",
63
+ "labelColor": "#333",
64
+ "tickLabelColor": "#333",
65
+ "tickColor": "#333",
66
+ "numTicks": "",
67
+ "labelOffset": "87",
35
68
  "dataKey": "Age Group",
36
69
  "label": "Age Group"
37
70
  },
38
71
  "table": {
39
72
  "label": "Data Table",
40
73
  "expanded": false,
74
+ "limitHeight": false,
75
+ "height": "",
76
+ "caption": "",
77
+ "showDownloadUrl": false,
41
78
  "show": true,
42
79
  "indexLabel": "Region"
43
80
  },
@@ -45,7 +82,15 @@
45
82
  "legend": {
46
83
  "behavior": "isolate",
47
84
  "position": "right",
85
+ "singleRow": false,
86
+ "colorCode": "",
48
87
  "reverseLabelOrder": false,
88
+ "description": "",
89
+ "dynamicLegend": false,
90
+ "dynamicLegendDefaultText": "Show All",
91
+ "dynamicLegendItemLimit": 5,
92
+ "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
93
+ "dynamicLegendChartMessage": "Select Options from the Legend",
49
94
  "hide": false,
50
95
  "label": "Region "
51
96
  },
@@ -53,14 +98,22 @@
53
98
  "active": false,
54
99
  "keys": []
55
100
  },
56
- "palette": "qualitative-soft",
101
+ "palette": "qualitative1",
57
102
  "isPaletteReversed": false,
58
103
  "labels": false,
59
104
  "dataFormat": {
60
105
  "commas": true,
61
- "suffix": " per 100k"
106
+ "prefix": "",
107
+ "suffix": " per 100k",
108
+ "abbreviated": false
62
109
  },
63
110
  "confidenceKeys": {},
111
+ "visual": {
112
+ "border": true,
113
+ "accent": true,
114
+ "background": true
115
+ },
116
+ "height": "400",
64
117
  "data": [
65
118
  {
66
119
  "Region": "West Coast",
@@ -115,7 +168,7 @@
115
168
  {
116
169
  "Region": "East Coast",
117
170
  "Age Group": "35-44",
118
- "Cases Per 100K": "7478"
171
+ "Cases Per 100K": "27478"
119
172
  },
120
173
  {
121
174
  "Region": "East Coast",
@@ -191,6 +244,5 @@
191
244
  "type": "Bar"
192
245
  }
193
246
  ],
194
- "filters": [],
195
- "barHeight": "23"
247
+ "filters": []
196
248
  }
@@ -0,0 +1,38 @@
1
+ {
2
+ "title": "Planet Radius (Combo Example)",
3
+ "dataUrl": "/examples/planet-example-data-max-increase.json",
4
+ "animate": true,
5
+ "animateReplay": true,
6
+
7
+ "visualizationType": "Bar",
8
+ "visualizationSubType": "horizontal",
9
+ "isLollipopChart": false,
10
+ "barHasBorder": "true",
11
+ "series": [{ "dataKey": "Radius" }, { "dataKey": "Diameter" }],
12
+ "fontSize": "small",
13
+ "dataFormat": {
14
+ "roundTo": 1,
15
+ "commas": false,
16
+ "prefix": "",
17
+ "suffix": "km"
18
+ },
19
+ "padding": {
20
+ "left": 0,
21
+ "right": 0
22
+ },
23
+ "yAxis": {
24
+ "label": "Measurement (1000km)",
25
+ "displayNumbersOnBar": false,
26
+ "labelPlacement": "On Date/Category Axis"
27
+ },
28
+ "xAxis": {
29
+ "label": "Planet",
30
+ "dataKey": "name",
31
+ "size": 75
32
+ },
33
+ "table": {
34
+ "label": "Data Table",
35
+ "expanded": false
36
+ },
37
+ "lollipopShape": "circle"
38
+ }
@@ -0,0 +1,32 @@
1
+ {
2
+ "type": "chart",
3
+ "title": "Example Line Chart",
4
+ "theme": "theme-green",
5
+ "fontSize": "medium",
6
+ "height": "375",
7
+ "padding": { "left": 5, "right": 5 },
8
+ "yAxis": { "size": "75", "gridLines": false, "label": "Y-Axis Example Label", "numTicks": "9" },
9
+ "barThickness": 0.35,
10
+ "xAxis": { "size": "77", "tickRotation": "25", "dataKey": "Date", "label": "X-Axis Example Label", "type": "date", "dateParseFormat": "%d/%m/%Y", "dateDisplayFormat": "%d/%m/%Y" },
11
+ "table": { "label": "Data Table", "expanded": true, "download": true },
12
+ "legend": { "behavior": "isolate", "position": "right", "label": "Type of Data" },
13
+ "palette": "qualitative-bold",
14
+ "labels": false,
15
+ "dataFormat": {},
16
+ "confidenceKeys": {},
17
+ "data": [
18
+ { "Date": "1/15/2016", "Data 1": "900", "Data 2": "1350", "Data 3": "2000", "Data 4": "950", "Data 5": "1200", "Data 6": "1610" },
19
+ { "Date": "2/15/2016", "Data 1": "600", "Data 2": "1150", "Data 3": "1000", "Data 4": "1350", "Data 5": "200", "Data 6": "610" },
20
+ { "Date": "3/15/2016", "Data 1": "700", "Data 2": "1550", "Data 3": "1800", "Data 4": "1650", "Data 5": "2000", "Data 6": "1610" },
21
+ { "Date": "3/15/2016", "Data 1": "300", "Data 2": "550", "Data 3": "800", "Data 4": "650", "Data 5": "2100", "Data 6": "2210" }
22
+ ],
23
+ "visualizationType": "Line",
24
+ "series": [
25
+ { "dataKey": "Data 1", "type": "Line" },
26
+ { "dataKey": "Data 2", "type": "Line" },
27
+ { "dataKey": "Data 3", "type": "Line" },
28
+ { "dataKey": "Data 4", "type": "Line" },
29
+ { "dataKey": "Data 5", "type": "Line" },
30
+ { "dataKey": "Data 6", "type": "Line" }
31
+ ]
32
+ }
@@ -0,0 +1,32 @@
1
+ {
2
+ "type": "chart",
3
+ "title": "Example Line Chart",
4
+ "theme": "theme-green",
5
+ "fontSize": "medium",
6
+ "height": "375",
7
+ "padding": { "left": 5, "right": 5 },
8
+ "yAxis": { "size": "75", "gridLines": false, "label": "Y-Axis Example Label", "numTicks": "9" },
9
+ "barThickness": 0.35,
10
+ "xAxis": { "size": "77", "tickRotation": "25", "dataKey": "Date", "label": "X-Axis Example Label", "type": "date", "dateParseFormat": "%d/%m/%Y", "dateDisplayFormat": "%d/%m/%Y" },
11
+ "table": { "label": "Data Table", "expanded": true, "download": true },
12
+ "legend": { "behavior": "isolate", "position": "right", "label": "Type of Data" },
13
+ "palette": "qualitative-bold",
14
+ "labels": false,
15
+ "dataFormat": {},
16
+ "confidenceKeys": {},
17
+ "data": [
18
+ { "Date": "1/15/2016", "Data 1": "8", "Data 2": "N/A", "Data 3": "1,300", "Data 4": "95", "Data 5": "120", "Data 6": "310" },
19
+ { "Date": "2/15/2016", "Data 1": "dddd", "Data 2": "9", "Data 3": "240", "Data 4": "60", "Data 5": "160", "Data 6": "200" },
20
+ { "Date": "3/15/2016", "Data 1": "boo", "Data 2": "5", "Data 3": "290", "Data 4": "100", "Data 5": "200", "Data 6": "250" },
21
+ { "Date": "4/15/2016", "Data 1": "44", "Data 2": "NA", "Data 3": "230", "Data 4": "180", "Data 5": "160", "Data 6": "220" },
22
+ { "Date": "5/15/2016", "Data 1": "12", "Data 2": "350", "Data 3": "300", "Data 4": "150", "Data 5": "130", "Data 6": "100" }
23
+ ],
24
+ "visualizationType": "Line",
25
+ "series": [
26
+ { "dataKey": "Data 1", "type": "Line" },
27
+ { "dataKey": "Data 2", "type": "Line" },
28
+ { "dataKey": "Data 3", "type": "Line" },
29
+ { "dataKey": "Data 4", "type": "Line" },
30
+ { "dataKey": "Data 5", "type": "Line" }
31
+ ]
32
+ }
@@ -1,76 +1,34 @@
1
1
  {
2
2
  "type": "chart",
3
- "title": "Example Spark Line",
4
- "theme": "theme-blue",
3
+ "title": "Example Line Chart",
4
+ "theme": "theme-green",
5
5
  "fontSize": "medium",
6
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
- },
7
+ "padding": { "left": 5, "right": 5 },
8
+ "yAxis": { "size": "75", "gridLines": false, "label": "Y-Axis Example Label", "numTicks": "9" },
18
9
  "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
- },
10
+ "xAxis": { "size": "77", "tickRotation": "25", "dataKey": "Date", "label": "X-Axis Example Label", "type": "date", "dateParseFormat": "%d/%m/%Y", "dateDisplayFormat": "%d/%m/%Y" },
11
+ "table": { "label": "Data Table", "expanded": true, "download": true },
12
+ "legend": { "behavior": "isolate", "position": "right", "label": "Type of Data" },
38
13
  "palette": "qualitative-bold",
39
14
  "labels": false,
40
15
  "dataFormat": {},
41
16
  "confidenceKeys": {},
42
17
  "data": [
43
- {
44
- "Date": "1/15/2016",
45
- "Data 1": "0"
46
- },
47
- {
48
- "Date": "2/15/2016",
49
- "Data 1": "25"
50
- },
51
- {
52
- "Date": "3/15/2016",
53
- "Data 1": "50"
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
- }
18
+ { "Date": "1/15/2016", "Data 1": "90", "Data 2": "135", "Data 3": "300", "Data 4": "95", "Data 5": "120", "Data 6": "310" },
19
+ { "Date": "2/15/2016", "Data 1": "40", "Data 2": "90", "Data 3": "240", "Data 4": "60", "Data 5": "160", "Data 6": "200" },
20
+ { "Date": "3/15/2016", "Data 1": "50", "Data 2": "300", "Data 3": "290", "Data 4": "100", "Data 5": "200", "Data 6": "250" },
21
+ { "Date": "4/15/2016", "Data 1": "120", "Data 2": "160", "Data 3": "230", "Data 4": "180", "Data 5": "160", "Data 6": "220" },
22
+ { "Date": "5/15/2016", "Data 1": "80", "Data 2": "350", "Data 3": "300", "Data 4": "150", "Data 5": "130", "Data 6": "100" },
23
+ { "Date": "6/15/2016", "Data 1": "90", "Data 2": "220", "Data 3": "320", "Data 4": "100", "Data 5": "220", "Data 6": "300" }
67
24
  ],
68
- "visualizationType": "Spark Line",
25
+ "visualizationType": "Line",
69
26
  "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."
27
+ { "dataKey": "Data 1", "type": "Line" },
28
+ { "dataKey": "Data 2", "type": "Line" },
29
+ { "dataKey": "Data 3", "type": "Line" },
30
+ { "dataKey": "Data 4", "type": "Line" },
31
+ { "dataKey": "Data 5", "type": "Line" },
32
+ { "dataKey": "Data 6", "type": "Line" }
33
+ ]
76
34
  }
@@ -45,7 +45,7 @@
45
45
  },
46
46
  {
47
47
  "Group_Category": "category three",
48
- "Value": "40"
48
+ "Value": "46"
49
49
  },
50
50
  {
51
51
  "Group_Category": "category four",