Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
 
 
 

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