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.
 
 
 

483 line
13 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": "Events",
  10. "values": report_count_list,
  11. // "formatted": report_count_list.map(d => d + " reports")
  12. }]
  13. };
  14. let line_composite_data = {
  15. labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
  16. datasets: [{
  17. "values": [36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 0, 0],
  18. // "values": [36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 40, 40],
  19. // "values": [-36, -46, -45, -32, -27, -31, -30, -36, -39, -49, -40, -40],
  20. }]
  21. };
  22. let more_line_data = {
  23. 0: {values: [4, 0, 3, 1, 1, 2, 1, 2, 1, 0, 1, 1]},
  24. // 0: {values: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]},
  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. // 10: {values: [36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 40, 40]}
  36. // 10: {values: [-36, -46, -45, -32, -27, -31, -30, -36, -39, -49, -40, -40]}
  37. };
  38. let c1 = document.querySelector("#chart-composite-1");
  39. let c2 = document.querySelector("#chart-composite-2");
  40. let bar_composite_chart = new Chart ({
  41. parent: c1,
  42. title: "Fireball/Bolide Events - Yearly (more than 5 reports)",
  43. data: bar_composite_data,
  44. type: 'bar',
  45. height: 180,
  46. colors: ['orange'],
  47. isNavigable: 1,
  48. is_series: 1
  49. // region_fill: 1
  50. });
  51. let line_composite_chart = new Chart ({
  52. parent: c2,
  53. data: line_composite_data,
  54. type: 'line',
  55. height: 180,
  56. colors: ['green'],
  57. is_series: 1
  58. });
  59. bar_composite_chart.parent.addEventListener('data-select', (e) => {
  60. line_composite_chart.updateData([more_line_data[e.index]]);
  61. });
  62. // Demo Chart (bar, linepts, scatter(blobs), percentage)
  63. // ================================================================================
  64. let type_data = {
  65. labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
  66. "12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],
  67. datasets: [
  68. {
  69. title: "Some Data",
  70. values: [25, 40, 30, 35, 8, 52, 17, -4]
  71. },
  72. {
  73. title: "Another Set",
  74. values: [25, 50, -10, 15, 18, 32, 27, 14]
  75. },
  76. {
  77. title: "Yet Another",
  78. values: [15, 20, -3, -15, 58, 12, -17, 37]
  79. }
  80. ]
  81. };
  82. let type_chart = new Chart({
  83. parent: "#chart-types",
  84. title: "My Awesome Chart",
  85. data: type_data,
  86. type: 'bar',
  87. height: 250,
  88. colors: ['light-blue', 'violet', 'blue'],
  89. is_series: 1,
  90. format_tooltip_x: d => (d + '').toUpperCase(),
  91. format_tooltip_y: d => d + ' pts'
  92. });
  93. Array.prototype.slice.call(
  94. document.querySelectorAll('.chart-type-buttons button')
  95. ).map(el => {
  96. el.addEventListener('click', (e) => {
  97. let btn = e.target;
  98. let type = btn.getAttribute('data-type');
  99. let newChart = type_chart.getDifferentChart(type);
  100. if(newChart){
  101. type_chart = newChart;
  102. }
  103. Array.prototype.slice.call(
  104. btn.parentNode.querySelectorAll('button')).map(el => {
  105. el.classList.remove('active');
  106. });
  107. btn.classList.add('active');
  108. });
  109. });
  110. // Trends Chart
  111. // ================================================================================
  112. let trends_data = {
  113. labels: [1967, 1968, 1969, 1970, 1971, 1972, 1973, 1974, 1975, 1976,
  114. 1977, 1978, 1979, 1980, 1981, 1982, 1983, 1984, 1985, 1986,
  115. 1987, 1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996,
  116. 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006,
  117. 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016] ,
  118. datasets: [
  119. {
  120. "values": [132.9, 150.0, 149.4, 148.0, 94.4, 97.6, 54.1, 49.2, 22.5, 18.4,
  121. 39.3, 131.0, 220.1, 218.9, 198.9, 162.4, 91.0, 60.5, 20.6, 14.8,
  122. 33.9, 123.0, 211.1, 191.8, 203.3, 133.0, 76.1, 44.9, 25.1, 11.6,
  123. 28.9, 88.3, 136.3, 173.9, 170.4, 163.6, 99.3, 65.3, 45.8, 24.7,
  124. 12.6, 4.2, 4.8, 24.9, 80.8, 84.5, 94.0, 113.3, 69.8, 39.8]
  125. }
  126. ]
  127. };
  128. let plot_chart_args = {
  129. parent: "#chart-trends",
  130. title: "Mean Total Sunspot Count - Yearly",
  131. data: trends_data,
  132. type: 'line',
  133. height: 250,
  134. colors: ['blue'],
  135. is_series: 1,
  136. show_dots: 0,
  137. heatline: 1,
  138. xAxisMode: 'tick',
  139. yAxisMode: 'span'
  140. };
  141. new Chart(plot_chart_args);
  142. Array.prototype.slice.call(
  143. document.querySelectorAll('.chart-plot-buttons button')
  144. ).map(el => {
  145. el.addEventListener('click', (e) => {
  146. let btn = e.target;
  147. let type = btn.getAttribute('data-type');
  148. let config = [];
  149. if(type === 'line') {
  150. config = [0, 0, 0];
  151. } else if(type === 'region') {
  152. config = [0, 0, 1];
  153. } else {
  154. config = [0, 1, 0];
  155. }
  156. plot_chart_args.show_dots = config[0];
  157. plot_chart_args.heatline = config[1];
  158. plot_chart_args.region_fill = config[2];
  159. plot_chart_args.init = false;
  160. new Chart(plot_chart_args);
  161. Array.prototype.slice.call(
  162. btn.parentNode.querySelectorAll('button')).map(el => {
  163. el.classList.remove('active');
  164. });
  165. btn.classList.add('active');
  166. });
  167. });
  168. // Update values chart
  169. // ================================================================================
  170. let update_data_all_labels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue",
  171. "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri",
  172. "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"];
  173. let update_data_all_values = Array.from({length: 30}, () => Math.floor(Math.random() * 75 - 15));
  174. // We're gonna be shuffling this
  175. let update_data_all_indices = update_data_all_labels.map((d,i) => i);
  176. let get_update_data = (source_array, length=10) => {
  177. let indices = update_data_all_indices.slice(0, length);
  178. return indices.map((index) => source_array[index]);
  179. };
  180. let update_data = {
  181. labels: get_update_data(update_data_all_labels),
  182. datasets: [{
  183. "values": get_update_data(update_data_all_values)
  184. }],
  185. "specific_values": [
  186. {
  187. title: "Altitude",
  188. // title: "A very long text",
  189. line_type: "dashed",
  190. value: 38
  191. },
  192. ]
  193. };
  194. let update_chart = new Chart({
  195. parent: "#chart-update",
  196. data: update_data,
  197. type: 'line',
  198. height: 250,
  199. colors: ['red'],
  200. is_series: 1,
  201. region_fill: 1
  202. });
  203. let chart_update_buttons = document.querySelector('.chart-update-buttons');
  204. chart_update_buttons.querySelector('[data-update="random"]').addEventListener("click", (e) => {
  205. shuffle(update_data_all_indices);
  206. update_chart.updateData(
  207. [{values: get_update_data(update_data_all_values)}],
  208. update_data_all_labels.slice(0, 10)
  209. );
  210. });
  211. chart_update_buttons.querySelector('[data-update="add"]').addEventListener("click", (e) => {
  212. // NOTE: this ought to be problem, labels stay the same after update
  213. let index = update_chart.xAxisLabels.length; // last index to add
  214. if(index >= update_data_all_indices.length) return;
  215. update_chart.add_data_point(
  216. [update_data_all_values[index]], update_data_all_labels[index]
  217. );
  218. });
  219. chart_update_buttons.querySelector('[data-update="remove"]').addEventListener("click", (e) => {
  220. update_chart.remove_data_point();
  221. });
  222. // Event chart
  223. // ================================================================================
  224. let moon_names = ["Ganymede", "Callisto", "Io", "Europa"];
  225. let masses = [14819000, 10759000, 8931900, 4800000];
  226. let distances = [1070.412, 1882.709, 421.700, 671.034];
  227. let diameters = [5262.4, 4820.6, 3637.4, 3121.6];
  228. let jupiter_moons = {
  229. 'Ganymede': {
  230. mass: '14819000 x 10^16 kg',
  231. 'semi-major-axis': '1070412 km',
  232. 'diameter': '5262.4 km'
  233. },
  234. 'Callisto': {
  235. mass: '10759000 x 10^16 kg',
  236. 'semi-major-axis': '1882709 km',
  237. 'diameter': '4820.6 km'
  238. },
  239. 'Io': {
  240. mass: '8931900 x 10^16 kg',
  241. 'semi-major-axis': '421700 km',
  242. 'diameter': '3637.4 km'
  243. },
  244. 'Europa': {
  245. mass: '4800000 x 10^16 kg',
  246. 'semi-major-axis': '671034 km',
  247. 'diameter': '3121.6 km'
  248. },
  249. };
  250. let events_data = {
  251. labels: ["Ganymede", "Callisto", "Io", "Europa"],
  252. datasets: [
  253. {
  254. "values": distances,
  255. "formatted": distances.map(d => d*1000 + " km")
  256. }
  257. ]
  258. };
  259. let events_chart = new Chart({
  260. parent: "#chart-events",
  261. title: "Jupiter's Moons: Semi-major Axis (1000 km)",
  262. data: events_data,
  263. type: 'bar',
  264. height: 250,
  265. colors: ['grey'],
  266. isNavigable: 1,
  267. });
  268. let data_div = document.querySelector('.chart-events-data');
  269. events_chart.parent.addEventListener('data-select', (e) => {
  270. let name = moon_names[e.index];
  271. data_div.querySelector('.moon-name').innerHTML = name;
  272. data_div.querySelector('.semi-major-axis').innerHTML = distances[e.index] * 1000;
  273. data_div.querySelector('.mass').innerHTML = masses[e.index];
  274. data_div.querySelector('.diameter').innerHTML = diameters[e.index];
  275. data_div.querySelector('img').src = "./assets/img/" + name.toLowerCase() + ".jpg";
  276. });
  277. // Aggregation chart
  278. // ================================================================================
  279. let aggr_data = {
  280. labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
  281. datasets: [
  282. {
  283. "values": [25, 40, 30, 35, 8, 52, 17]
  284. },
  285. {
  286. "values": [25, 50, -10, 15, 18, 32, 27]
  287. }
  288. ]
  289. };
  290. let aggr_chart = new Chart({
  291. parent: "#chart-aggr",
  292. data: aggr_data,
  293. type: 'bar',
  294. height: 250,
  295. colors: ['purple', 'orange'],
  296. });
  297. document.querySelector('[data-aggregation="sums"]').addEventListener("click", (e) => {
  298. if(e.target.innerHTML === "Show Sums") {
  299. aggr_chart.show_sums();
  300. e.target.innerHTML = "Hide Sums";
  301. } else {
  302. aggr_chart.hide_sums();
  303. e.target.innerHTML = "Show Sums";
  304. }
  305. });
  306. document.querySelector('[data-aggregation="average"]').addEventListener("click", (e) => {
  307. if(e.target.innerHTML === "Show Averages") {
  308. aggr_chart.show_averages();
  309. e.target.innerHTML = "Hide Averages";
  310. } else {
  311. aggr_chart.hide_averages();
  312. e.target.innerHTML = "Show Averages";
  313. }
  314. });
  315. // Heatmap
  316. // ================================================================================
  317. let heatmap_data = {};
  318. let current_date = new Date();
  319. let timestamp = current_date.getTime()/1000;
  320. timestamp = Math.floor(timestamp - (timestamp % 86400)).toFixed(1); // convert to midnight
  321. for (var i = 0; i< 375; i++) {
  322. heatmap_data[parseInt(timestamp)] = Math.floor(Math.random() * 5);
  323. timestamp = Math.floor(timestamp - 86400).toFixed(1);
  324. }
  325. new Chart({
  326. parent: "#chart-heatmap",
  327. data: heatmap_data,
  328. type: 'heatmap',
  329. legend_scale: [0, 1, 2, 4, 5],
  330. height: 115,
  331. discrete_domains: 1 // default 0
  332. });
  333. Array.prototype.slice.call(
  334. document.querySelectorAll('.heatmap-mode-buttons button')
  335. ).map(el => {
  336. el.addEventListener('click', (e) => {
  337. let btn = e.target;
  338. let mode = btn.getAttribute('data-mode');
  339. let discrete_domains = 0;
  340. if(mode === 'discrete') {
  341. discrete_domains = 1;
  342. }
  343. let colors = [];
  344. let colors_mode = document
  345. .querySelector('.heatmap-color-buttons .active')
  346. .getAttribute('data-color');
  347. if(colors_mode === 'halloween') {
  348. colors = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'];
  349. }
  350. new Chart({
  351. parent: "#chart-heatmap",
  352. data: heatmap_data,
  353. type: 'heatmap',
  354. legend_scale: [0, 1, 2, 4, 5],
  355. height: 115,
  356. discrete_domains: discrete_domains,
  357. legend_colors: colors
  358. });
  359. Array.prototype.slice.call(
  360. btn.parentNode.querySelectorAll('button')).map(el => {
  361. el.classList.remove('active');
  362. });
  363. btn.classList.add('active');
  364. });
  365. });
  366. Array.prototype.slice.call(
  367. document.querySelectorAll('.heatmap-color-buttons button')
  368. ).map(el => {
  369. el.addEventListener('click', (e) => {
  370. let btn = e.target;
  371. let colors_mode = btn.getAttribute('data-color');
  372. let colors = [];
  373. if(colors_mode === 'halloween') {
  374. colors = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'];
  375. }
  376. let discrete_domains = 1;
  377. let view_mode = document
  378. .querySelector('.heatmap-mode-buttons .active')
  379. .getAttribute('data-mode');
  380. if(view_mode === 'continuous') {
  381. discrete_domains = 0;
  382. }
  383. new Chart({
  384. parent: "#chart-heatmap",
  385. data: heatmap_data,
  386. type: 'heatmap',
  387. legend_scale: [0, 1, 2, 4, 5],
  388. height: 115,
  389. discrete_domains: discrete_domains,
  390. legend_colors: colors
  391. });
  392. Array.prototype.slice.call(
  393. btn.parentNode.querySelectorAll('button')).map(el => {
  394. el.classList.remove('active');
  395. });
  396. btn.classList.add('active');
  397. });
  398. });
  399. // Helpers
  400. // ================================================================================
  401. function shuffle(array) {
  402. // https://stackoverflow.com/a/2450976/6495043
  403. // Awesomeness: https://bost.ocks.org/mike/shuffle/
  404. var currentIndex = array.length, temporaryValue, randomIndex;
  405. // While there remain elements to shuffle...
  406. while (0 !== currentIndex) {
  407. // Pick a remaining element...
  408. randomIndex = Math.floor(Math.random() * currentIndex);
  409. currentIndex -= 1;
  410. // And swap it with the current element.
  411. temporaryValue = array[currentIndex];
  412. array[currentIndex] = array[randomIndex];
  413. array[randomIndex] = temporaryValue;
  414. }
  415. return array;
  416. }