You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

283 line
7.1 KiB

  1. // Composite Chart
  2. // ================================================================================
  3. let report_count_list = [17, 40, 33, 44, 126, 156,
  4. 324, 333, 478, 495, 373];
  5. let bar_composite_data = {
  6. "labels": ["2007", "2008", "2009", "2010", "2011", "2012",
  7. "2013", "2014", "2015", "2016", "2017"],
  8. "datasets": [{
  9. "title": "Reports",
  10. "color": "orange",
  11. "values": report_count_list,
  12. // "formatted": report_count_list.map(d => d + " reports")
  13. }]
  14. };
  15. let line_composite_data = {
  16. "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
  17. "datasets": [{
  18. "color": "green",
  19. "values": [36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 0, 0],
  20. // "formatted": ["₹ 0.00", "₹ 0.00", "₹ 0.00", "₹ 61,500.00", "₹ 82,936.88", "₹ 24,010.00", "₹ 0.00", "₹ 0.00", "₹ 25,840.00", "₹ 5,08,048.82", "₹ 1,16,820.00", "₹ 0.00"],
  21. }]
  22. };
  23. let more_line_data = {
  24. 0: {values: [4, 0, 3, 1, 1, 2, 1, 2, 1, 0, 1, 1]},
  25. 1: {values: [2, 3, 3, 2, 1, 4, 0, 1, 2, 7, 11, 4]},
  26. 2: {values: [7, 7, 2, 4, 0, 1, 5, 3, 1, 2, 0, 1]},
  27. 3: {values: [0, 2, 6, 2, 2, 1, 2, 3, 6, 3, 7, 10]},
  28. 4: {values: [9, 10, 8, 10, 6, 5, 8, 8, 24, 15, 10, 13]},
  29. 5: {values: [9, 13, 16, 9, 4, 5, 7, 10, 14, 22, 23, 24]},
  30. 6: {values: [20, 22, 28, 19, 28, 19, 14, 19, 51, 37, 29, 38]},
  31. 7: {values: [29, 20, 22, 16, 16, 19, 24, 26, 57, 31, 46, 27]},
  32. 8: {values: [36, 24, 38, 27, 15, 22, 24, 38, 32, 57, 139, 26]},
  33. 9: {values: [37, 36, 32, 33, 12, 34, 52, 45, 58, 57, 64, 35]},
  34. 10: {values: [36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 0, 0]}
  35. };
  36. let bar_composite_chart = new Chart ({
  37. parent: "#chart-composite-1",
  38. title: "Reposrts",
  39. data: bar_composite_data,
  40. type: 'bar',
  41. height: 180,
  42. is_navigable: 1
  43. // region_fill: 1
  44. });
  45. let line_composite_chart = new Chart ({
  46. parent: "#chart-composite-2",
  47. data: line_composite_data,
  48. type: 'line',
  49. height: 180
  50. });
  51. bar_composite_chart.parent.addEventListener('data-select', (e) => {
  52. line_composite_chart.update_values([more_line_data[e.index]]);
  53. });
  54. // Demo Chart (bar, linepts, scatter(blobs), percentage)
  55. // ================================================================================
  56. let type_data = {
  57. "labels": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
  58. "datasets": [{
  59. "color": "light-blue",
  60. "values": [25, 40, 30, 35, 8, 52, 17]
  61. },
  62. {
  63. "color": "violet",
  64. "values": [25, 50, -10, 15, 18, 32, 27]
  65. },
  66. {
  67. "color": "blue",
  68. "values": [15, 20, -3, -15, 58, 12, -17]
  69. }
  70. ]
  71. };
  72. let update_data_all_labels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat",
  73. "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed",
  74. "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed"];
  75. let update_data_all_values = [25, 40, 30, 35, 48, 52, 17, 15, 20, -3, -15, 58,
  76. 12, -17, 35, 48, 40, 30, 52, 17, 25, 5, 48, 52, 17];
  77. // We're gonna be shuffling this
  78. let update_data_all_indices = update_data_all_labels.map((d,i) => i);
  79. let get_update_data = (source_array, length=10) => {
  80. let indices = update_data_all_indices.slice(0, length);
  81. return indices.map((index) => source_array[index]);
  82. };
  83. let update_data = {
  84. "labels": get_update_data(update_data_all_labels),
  85. "datasets": [{
  86. "color": "red",
  87. "values": get_update_data(update_data_all_values)
  88. }],
  89. "specific_values": [
  90. {
  91. title: "Altitude",
  92. // title: "Altiteragrwst ude",
  93. line_type: "dashed",
  94. value: 38
  95. },
  96. ]
  97. };
  98. let events_data = {
  99. "labels": ["Sun", "Mon", "Tue", "Wed", "Thu"],
  100. "datasets": [{
  101. "color": "light-green",
  102. "values": [25, 40, 30, 35, 48]
  103. }
  104. ]
  105. };
  106. let aggr_data = {
  107. "labels": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
  108. "datasets": [{
  109. "color": "purple",
  110. "values": [25, 40, 30, 35, 8, 52, 17]
  111. },
  112. {
  113. "color": "orange",
  114. "values": [25, 50, -10, 15, 18, 32, 27]
  115. }
  116. ]
  117. };
  118. let heatmap_data = {
  119. 1479753000.0: 1,
  120. 1498588200.0: 1,
  121. 1499193000.0: 1,
  122. 1499625000.0: 2,
  123. 1500921000.0: 1,
  124. 1501612200.0: 1,
  125. 1502994600.0: 1,
  126. 1503858600.0: 1,
  127. 1504809000.0: 3,
  128. 1505241000.0: 1,
  129. 1506277800.0: 2
  130. };
  131. // Charts
  132. // ================================================================================
  133. let type_chart = new Chart({
  134. parent: "#chart-types",
  135. data: type_data,
  136. type: 'bar',
  137. height: 250,
  138. // region_fill: 1,
  139. // y_axis_mode: 'tick'
  140. });
  141. let update_chart = new Chart({
  142. parent: "#chart-update",
  143. data: update_data,
  144. type: 'line',
  145. height: 250,
  146. region_fill: 1
  147. });
  148. let events_chart = new Chart({
  149. parent: "#chart-events",
  150. data: events_data,
  151. type: 'bar',
  152. height: 250,
  153. is_navigable: 1,
  154. });
  155. let aggr_chart = new Chart({
  156. parent: "#chart-aggr",
  157. data: aggr_data,
  158. type: 'bar',
  159. height: 250
  160. });
  161. let heatmap = new Chart({
  162. parent: "#chart-heatmap",
  163. data: heatmap_data,
  164. type: 'heatmap',
  165. height: 100,
  166. // discrete_domains: 1
  167. });
  168. // Events
  169. // ================================================================================
  170. Array.prototype.slice.call(
  171. document.querySelectorAll('.chart-type-buttons button')
  172. ).map(el => {
  173. el.addEventListener('click', (e) => {
  174. btn = e.target;
  175. let type = btn.getAttribute('data-type');
  176. type_chart = type_chart.get_different_chart(type);
  177. Array.prototype.slice.call(
  178. btn.parentNode.querySelectorAll('button')).map(el => {
  179. el.classList.remove('active');
  180. });
  181. btn.classList.add('active');
  182. });
  183. });
  184. let chart_update_buttons = document.querySelector('.chart-update-buttons');
  185. chart_update_buttons.querySelector('[data-update="random"]').addEventListener("click", (e) => {
  186. shuffle(update_data_all_indices);
  187. update_chart.update_values(
  188. [{values: get_update_data(update_data_all_values)}],
  189. get_update_data(update_data_all_labels)
  190. );
  191. });
  192. chart_update_buttons.querySelector('[data-update="add"]').addEventListener("click", (e) => {
  193. // NOTE: this ought to be problem, labels stay the same after update
  194. let index = update_chart.x.length; // last index to add
  195. if(index >= update_data_all_indices.length) return;
  196. update_chart.add_data_point(
  197. [update_data_all_values[index]], update_data_all_labels[index]
  198. );
  199. });
  200. chart_update_buttons.querySelector('[data-update="remove"]').addEventListener("click", (e) => {
  201. update_chart.remove_data_point();
  202. });
  203. document.querySelector('[data-aggregation="sums"]').addEventListener("click", (e) => {
  204. if(e.target.innerHTML === "Show Sums") {
  205. aggr_chart.show_sums();
  206. e.target.innerHTML = "Hide Sums";
  207. } else {
  208. aggr_chart.hide_sums();
  209. e.target.innerHTML = "Show Sums";
  210. }
  211. });
  212. document.querySelector('[data-aggregation="average"]').addEventListener("click", (e) => {
  213. if(e.target.innerHTML === "Show Average") {
  214. aggr_chart.show_average();
  215. e.target.innerHTML = "Hide Average";
  216. } else {
  217. aggr_chart.hide_average();
  218. e.target.innerHTML = "Show Average";
  219. }
  220. });
  221. function shuffle(array) {
  222. // https://stackoverflow.com/a/2450976/6495043
  223. // Awesomeness: https://bost.ocks.org/mike/shuffle/
  224. var currentIndex = array.length, temporaryValue, randomIndex;
  225. // While there remain elements to shuffle...
  226. while (0 !== currentIndex) {
  227. // Pick a remaining element...
  228. randomIndex = Math.floor(Math.random() * currentIndex);
  229. currentIndex -= 1;
  230. // And swap it with the current element.
  231. temporaryValue = array[currentIndex];
  232. array[currentIndex] = array[randomIndex];
  233. array[randomIndex] = temporaryValue;
  234. }
  235. return array;
  236. }