您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符
 
 
 

292 行
6.7 KiB

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