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.
 
 
 

362 lines
8.8 KiB

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