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.
 
 
 

349 lines
8.3 KiB

  1. import { shuffle } from '../../../src/js/utils/helpers';
  2. import { fireballOver25, fireball_2_5, fireball_5_25, lineCompositeData,
  3. barCompositeData, typeData, trendsData, moonData, heatmapData } from './data';
  4. // ================================================================================
  5. let c1 = document.querySelector("#chart-composite-1");
  6. let c2 = document.querySelector("#chart-composite-2");
  7. let Chart = frappe.Chart; // eslint-disable-line no-undef
  8. let lineCompositeChart = new Chart (c1, {
  9. title: "Fireball/Bolide Events - Yearly (reported)",
  10. data: lineCompositeData,
  11. type: 'line',
  12. height: 190,
  13. colors: ['green'],
  14. isNavigable: 1,
  15. valuesOverPoints: 1,
  16. lineOptions: {
  17. dotSize: 8
  18. },
  19. // yAxisMode: 'tick'
  20. // regionFill: 1
  21. });
  22. let barCompositeChart = new Chart (c2, {
  23. data: barCompositeData,
  24. type: 'bar',
  25. height: 190,
  26. colors: ['violet', 'light-blue', '#46a9f9'],
  27. valuesOverPoints: 1,
  28. axisOptions: {
  29. xAxisMode: 'tick'
  30. },
  31. barOptions: {
  32. stacked: 1
  33. },
  34. });
  35. lineCompositeChart.parent.addEventListener('data-select', (e) => {
  36. let i = e.index;
  37. barCompositeChart.updateDatasets([
  38. fireballOver25[i], fireball_5_25[i], fireball_2_5[i]
  39. ]);
  40. });
  41. // ================================================================================
  42. let args = {
  43. data: typeData,
  44. type: 'axis-mixed',
  45. height: 250,
  46. colors: ['purple', 'magenta', 'light-blue'],
  47. maxLegendPoints: 6,
  48. maxSlices: 10,
  49. tooltipOptions: {
  50. formatTooltipX: d => (d + '').toUpperCase(),
  51. formatTooltipY: d => d + ' pts',
  52. }
  53. };
  54. let aggrChart = new Chart("#chart-aggr", args);
  55. Array.prototype.slice.call(
  56. document.querySelectorAll('.aggr-type-buttons button')
  57. ).map(el => {
  58. el.addEventListener('click', (e) => {
  59. let btn = e.target;
  60. let type = btn.getAttribute('data-type');
  61. args.type = type;
  62. let newChart = aggrChart.getDifferentChart(type);
  63. if(newChart){
  64. aggrChart = newChart;
  65. }
  66. Array.prototype.slice.call(
  67. btn.parentNode.querySelectorAll('button')).map(el => {
  68. el.classList.remove('active');
  69. });
  70. btn.classList.add('active');
  71. });
  72. });
  73. // Update values chart
  74. // ================================================================================
  75. let updateDataAllLabels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue",
  76. "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri",
  77. "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"];
  78. let getRandom = () => Math.floor(Math.random() * 75 - 15);
  79. let updateDataAllValues = Array.from({length: 30}, getRandom);
  80. // We're gonna be shuffling this
  81. let updateDataAllIndices = updateDataAllLabels.map((d,i) => i);
  82. let getUpdateData = (source_array, length=10) => {
  83. let indices = updateDataAllIndices.slice(0, length);
  84. return indices.map((index) => source_array[index]);
  85. };
  86. let update_data = {
  87. labels: getUpdateData(updateDataAllLabels),
  88. datasets: [{
  89. "values": getUpdateData(updateDataAllValues)
  90. }],
  91. yMarkers: [
  92. {
  93. label: "Altitude",
  94. value: 25,
  95. type: 'dashed'
  96. }
  97. ],
  98. yRegions: [
  99. {
  100. label: "Range",
  101. start: 10,
  102. end: 45
  103. },
  104. ],
  105. };
  106. let update_chart = new Chart("#chart-update", {
  107. data: update_data,
  108. type: 'line',
  109. height: 250,
  110. colors: ['#ff6c03'],
  111. lineOptions: {
  112. // hideLine: 1,
  113. regionFill: 1
  114. },
  115. });
  116. let chart_update_buttons = document.querySelector('.chart-update-buttons');
  117. chart_update_buttons.querySelector('[data-update="random"]').addEventListener("click", () => {
  118. shuffle(updateDataAllIndices);
  119. let value = getRandom();
  120. let start = getRandom();
  121. let end = getRandom();
  122. let data = {
  123. labels: updateDataAllLabels.slice(0, 10),
  124. datasets: [{values: getUpdateData(updateDataAllValues)}],
  125. yMarkers: [
  126. {
  127. label: "Altitude",
  128. value: value,
  129. type: 'dashed'
  130. }
  131. ],
  132. yRegions: [
  133. {
  134. label: "Range",
  135. start: start,
  136. end: end
  137. },
  138. ],
  139. };
  140. update_chart.update(data);
  141. });
  142. chart_update_buttons.querySelector('[data-update="add"]').addEventListener("click", () => {
  143. let index = update_chart.state.datasetLength; // last index to add
  144. if(index >= updateDataAllIndices.length) return;
  145. update_chart.addDataPoint(
  146. updateDataAllLabels[index], [updateDataAllValues[index]]
  147. );
  148. });
  149. chart_update_buttons.querySelector('[data-update="remove"]').addEventListener("click", () => {
  150. update_chart.removeDataPoint();
  151. });
  152. // Trends Chart
  153. // ================================================================================
  154. let plotChartArgs = {
  155. title: "Mean Total Sunspot Count - Yearly",
  156. data: trendsData,
  157. type: 'line',
  158. height: 250,
  159. colors: ['#238e38'],
  160. lineOptions: {
  161. hideDots: 1,
  162. heatline: 1,
  163. },
  164. axisOptions: {
  165. xAxisMode: 'tick',
  166. yAxisMode: 'span',
  167. xIsSeries: 1
  168. }
  169. };
  170. new Chart("#chart-trends", plotChartArgs);
  171. Array.prototype.slice.call(
  172. document.querySelectorAll('.chart-plot-buttons button')
  173. ).map(el => {
  174. el.addEventListener('click', (e) => {
  175. let btn = e.target;
  176. let type = btn.getAttribute('data-type');
  177. let config = {};
  178. config[type] = 1;
  179. if(['regionFill', 'heatline'].includes(type)) {
  180. config.hideDots = 1;
  181. }
  182. // plotChartArgs.init = false;
  183. plotChartArgs.lineOptions = config;
  184. new Chart("#chart-trends", plotChartArgs);
  185. Array.prototype.slice.call(
  186. btn.parentNode.querySelectorAll('button')).map(el => {
  187. el.classList.remove('active');
  188. });
  189. btn.classList.add('active');
  190. });
  191. });
  192. // Event chart
  193. // ================================================================================
  194. let eventsData = {
  195. labels: ["Ganymede", "Callisto", "Io", "Europa"],
  196. datasets: [
  197. {
  198. "values": moonData.distances,
  199. "formatted": moonData.distances.map(d => d*1000 + " km")
  200. }
  201. ]
  202. };
  203. let eventsChart = new Chart("#chart-events", {
  204. title: "Jupiter's Moons: Semi-major Axis (1000 km)",
  205. data: eventsData,
  206. type: 'bar',
  207. height: 250,
  208. colors: ['grey'],
  209. isNavigable: 1,
  210. });
  211. let dataDiv = document.querySelector('.chart-events-data');
  212. eventsChart.parent.addEventListener('data-select', (e) => {
  213. let name = moonData.names[e.index];
  214. dataDiv.querySelector('.moon-name').innerHTML = name;
  215. dataDiv.querySelector('.semi-major-axis').innerHTML = moonData.distances[e.index] * 1000;
  216. dataDiv.querySelector('.mass').innerHTML = moonData.masses[e.index];
  217. dataDiv.querySelector('.diameter').innerHTML = moonData.diameters[e.index];
  218. dataDiv.querySelector('img').src = "./assets/img/" + name.toLowerCase() + ".jpg";
  219. });
  220. // Heatmap
  221. // ================================================================================
  222. let heatmap = new Chart("#chart-heatmap", {
  223. data: heatmapData,
  224. type: 'heatmap',
  225. height: 115,
  226. discreteDomains: 1,
  227. colors: ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c']
  228. });
  229. console.log('heatmapData', Object.assign({}, heatmapData));
  230. Array.prototype.slice.call(
  231. document.querySelectorAll('.heatmap-mode-buttons button')
  232. ).map(el => {
  233. el.addEventListener('click', (e) => {
  234. let btn = e.target;
  235. let mode = btn.getAttribute('data-mode');
  236. let discreteDomains = 0;
  237. if(mode === 'discrete') {
  238. discreteDomains = 1;
  239. }
  240. let colors = [];
  241. let colors_mode = document
  242. .querySelector('.heatmap-color-buttons .active')
  243. .getAttribute('data-color');
  244. if(colors_mode === 'halloween') {
  245. colors = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'];
  246. }
  247. new Chart("#chart-heatmap", {
  248. data: heatmapData,
  249. type: 'heatmap',
  250. legendScale: [0, 1, 2, 4, 5],
  251. height: 115,
  252. discreteDomains: discreteDomains,
  253. colors: colors
  254. });
  255. Array.prototype.slice.call(
  256. btn.parentNode.querySelectorAll('button')).map(el => {
  257. el.classList.remove('active');
  258. });
  259. btn.classList.add('active');
  260. });
  261. });
  262. Array.prototype.slice.call(
  263. document.querySelectorAll('.heatmap-color-buttons button')
  264. ).map(el => {
  265. el.addEventListener('click', (e) => {
  266. let btn = e.target;
  267. let colors_mode = btn.getAttribute('data-color');
  268. let colors = [];
  269. if(colors_mode === 'halloween') {
  270. colors = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'];
  271. }
  272. let discreteDomains = 1;
  273. let view_mode = document
  274. .querySelector('.heatmap-mode-buttons .active')
  275. .getAttribute('data-mode');
  276. if(view_mode === 'continuous') {
  277. discreteDomains = 0;
  278. }
  279. new Chart("#chart-heatmap", {
  280. data: heatmapData,
  281. type: 'heatmap',
  282. legendScale: [0, 1, 2, 4, 5],
  283. height: 115,
  284. discreteDomains: discreteDomains,
  285. colors: colors
  286. });
  287. Array.prototype.slice.call(
  288. btn.parentNode.querySelectorAll('button')).map(el => {
  289. el.classList.remove('active');
  290. });
  291. btn.classList.add('active');
  292. });
  293. });