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.
 
 
 

673 Zeilen
18 KiB

  1. (function () {
  2. 'use strict';
  3. function __$styleInject(css, ref) {
  4. if ( ref === void 0 ) ref = {};
  5. var insertAt = ref.insertAt;
  6. if (!css || typeof document === 'undefined') { return; }
  7. var head = document.head || document.getElementsByTagName('head')[0];
  8. var style = document.createElement('style');
  9. style.type = 'text/css';
  10. if (insertAt === 'top') {
  11. if (head.firstChild) {
  12. head.insertBefore(style, head.firstChild);
  13. } else {
  14. head.appendChild(style);
  15. }
  16. } else {
  17. head.appendChild(style);
  18. }
  19. if (style.styleSheet) {
  20. style.styleSheet.cssText = css;
  21. } else {
  22. style.appendChild(document.createTextNode(css));
  23. }
  24. }
  25. // Fixed 5-color theme,
  26. // More colors are difficult to parse visually
  27. var HEATMAP_COLORS_BLUE = ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'];
  28. var HEATMAP_COLORS_YELLOW = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'];
  29. // Universal constants
  30. /**
  31. * Returns whether or not two given arrays are equal.
  32. * @param {Array} arr1 First array
  33. * @param {Array} arr2 Second array
  34. */
  35. /**
  36. * Shuffles array in place. ES6 version
  37. * @param {Array} array An array containing the items.
  38. */
  39. function shuffle(array) {
  40. // Awesomeness: https://bost.ocks.org/mike/shuffle/
  41. // https://stackoverflow.com/a/2450976/6495043
  42. // https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array?noredirect=1&lq=1
  43. for (var i = array.length - 1; i > 0; i--) {
  44. var j = Math.floor(Math.random() * (i + 1));
  45. var _ref = [array[j], array[i]];
  46. array[i] = _ref[0];
  47. array[j] = _ref[1];
  48. }
  49. return array;
  50. }
  51. /**
  52. * Fill an array with extra points
  53. * @param {Array} array Array
  54. * @param {Number} count number of filler elements
  55. * @param {Object} element element to fill with
  56. * @param {Boolean} start fill at start?
  57. */
  58. /**
  59. * Returns pixel width of string.
  60. * @param {String} string
  61. * @param {Number} charWidth Width of single char in pixels
  62. */
  63. // https://stackoverflow.com/a/29325222
  64. function getRandomBias(min, max, bias, influence) {
  65. var range = max - min;
  66. var biasValue = range * bias + min;
  67. var rnd = Math.random() * range + min,
  68. // random in range
  69. mix = Math.random() * influence; // random mixer
  70. return rnd * (1 - mix) + biasValue * mix; // mix full range and bias
  71. }
  72. // Playing around with dates
  73. var NO_OF_MILLIS = 1000;
  74. var SEC_IN_DAY = 86400;
  75. var MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
  76. // https://stackoverflow.com/a/11252167/6495043
  77. function clone(date) {
  78. return new Date(date.getTime());
  79. }
  80. function timestampSec(date) {
  81. return date.getTime() / NO_OF_MILLIS;
  82. }
  83. function timestampToMidnight(timestamp) {
  84. var roundAhead = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  85. var midnightTs = Math.floor(timestamp - timestamp % SEC_IN_DAY);
  86. if (roundAhead) {
  87. return midnightTs + SEC_IN_DAY;
  88. }
  89. return midnightTs;
  90. }
  91. // export function getMonthsBetween(startDate, endDate) {}
  92. // mutates
  93. // mutates
  94. function addDays(date, numberOfDays) {
  95. date.setDate(date.getDate() + numberOfDays);
  96. }
  97. var reportCountList = [152, 222, 199, 287, 534, 709, 1179, 1256, 1632, 1856, 1850];
  98. var lineCompositeData = {
  99. labels: ["2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017"],
  100. yMarkers: [{
  101. label: "Average 100 reports/month",
  102. value: 1200,
  103. options: { labelPos: 'left' }
  104. }],
  105. datasets: [{
  106. "name": "Events",
  107. "values": reportCountList
  108. }]
  109. };
  110. var fireball_5_25 = [[4, 0, 3, 1, 1, 2, 1, 1, 1, 0, 1, 1], [2, 3, 3, 2, 1, 3, 0, 1, 2, 7, 10, 4], [5, 6, 2, 4, 0, 1, 4, 3, 0, 2, 0, 1], [0, 2, 6, 2, 1, 1, 2, 3, 6, 3, 7, 8], [6, 8, 7, 7, 4, 5, 6, 5, 22, 12, 10, 11], [7, 10, 11, 7, 3, 2, 7, 7, 11, 15, 22, 20], [13, 16, 21, 18, 19, 17, 12, 17, 31, 28, 25, 29], [24, 14, 21, 14, 11, 15, 19, 21, 41, 22, 32, 18], [31, 20, 30, 22, 14, 17, 21, 35, 27, 50, 117, 24], [32, 24, 21, 27, 11, 27, 43, 37, 44, 40, 48, 32], [31, 38, 36, 26, 23, 23, 25, 29, 26, 47, 61, 50]];
  111. var fireball_2_5 = [[22, 6, 6, 9, 7, 8, 6, 14, 19, 10, 8, 20], [11, 13, 12, 8, 9, 11, 9, 13, 10, 22, 40, 24], [20, 13, 13, 19, 13, 10, 14, 13, 20, 18, 5, 9], [7, 13, 16, 19, 12, 11, 21, 27, 27, 24, 33, 33], [38, 25, 28, 22, 31, 21, 35, 42, 37, 32, 46, 53], [50, 33, 36, 34, 35, 28, 27, 52, 58, 59, 75, 69], [54, 67, 67, 45, 66, 51, 38, 64, 90, 113, 116, 87], [84, 52, 56, 51, 55, 46, 50, 87, 114, 83, 152, 93], [73, 58, 59, 63, 56, 51, 83, 140, 103, 115, 265, 89], [106, 95, 94, 71, 77, 75, 99, 136, 129, 154, 168, 156], [81, 102, 95, 72, 58, 91, 89, 122, 124, 135, 183, 171]];
  112. var fireballOver25 = [
  113. // [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  114. [0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0], [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0], [1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0], [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 2], [3, 2, 1, 3, 2, 0, 2, 2, 2, 3, 0, 1], [2, 3, 5, 2, 1, 3, 0, 2, 3, 5, 1, 4], [7, 4, 6, 1, 9, 2, 2, 2, 20, 9, 4, 9], [5, 6, 1, 2, 5, 4, 5, 5, 16, 9, 14, 9], [5, 4, 7, 5, 1, 5, 3, 3, 5, 7, 22, 2], [5, 13, 11, 6, 1, 7, 9, 8, 14, 17, 16, 3], [8, 9, 8, 6, 4, 8, 5, 6, 14, 11, 21, 12]];
  115. var barCompositeData = {
  116. labels: MONTH_NAMES_SHORT,
  117. datasets: [{
  118. name: "Over 25 reports",
  119. values: fireballOver25[9]
  120. }, {
  121. name: "5 to 25 reports",
  122. values: fireball_5_25[9]
  123. }, {
  124. name: "2 to 5 reports",
  125. values: fireball_2_5[9]
  126. }]
  127. };
  128. // Demo Chart multitype Chart
  129. // ================================================================================
  130. var typeData = {
  131. labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm", "12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],
  132. yMarkers: [{
  133. label: "Marker",
  134. value: 43,
  135. options: { labelPos: 'left'
  136. // type: 'dashed'
  137. } }],
  138. yRegions: [{
  139. label: "Region",
  140. start: -10,
  141. end: 50,
  142. options: { labelPos: 'right' }
  143. }],
  144. datasets: [{
  145. name: "Some Data",
  146. values: [18, 40, 30, 35, 8, 52, 17, -4],
  147. axisPosition: 'right',
  148. chartType: 'bar'
  149. }, {
  150. name: "Another Set",
  151. values: [30, 50, -10, 15, 18, 32, 27, 14],
  152. axisPosition: 'right',
  153. chartType: 'bar'
  154. }, {
  155. name: "Yet Another",
  156. values: [15, 20, -3, -15, 58, 12, -17, 37],
  157. chartType: 'line'
  158. }]
  159. };
  160. var trendsData = {
  161. labels: [1967, 1968, 1969, 1970, 1971, 1972, 1973, 1974, 1975, 1976, 1977, 1978, 1979, 1980, 1981, 1982, 1983, 1984, 1985, 1986, 1987, 1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016],
  162. datasets: [{
  163. values: [132.9, 150.0, 149.4, 148.0, 94.4, 97.6, 54.1, 49.2, 22.5, 18.4, 39.3, 131.0, 220.1, 218.9, 198.9, 162.4, 91.0, 60.5, 20.6, 14.8, 33.9, 123.0, 211.1, 191.8, 203.3, 133.0, 76.1, 44.9, 25.1, 11.6, 28.9, 88.3, 136.3, 173.9, 170.4, 163.6, 99.3, 65.3, 45.8, 24.7, 12.6, 4.2, 4.8, 24.9, 80.8, 84.5, 94.0, 113.3, 69.8, 39.8]
  164. }]
  165. };
  166. var moonData = {
  167. names: ["Ganymede", "Callisto", "Io", "Europa"],
  168. masses: [14819000, 10759000, 8931900, 4800000],
  169. distances: [1070.412, 1882.709, 421.700, 671.034],
  170. diameters: [5262.4, 4820.6, 3637.4, 3121.6]
  171. };
  172. // const jupiterMoons = {
  173. // 'Ganymede': {
  174. // mass: '14819000 x 10^16 kg',
  175. // 'semi-major-axis': '1070412 km',
  176. // 'diameter': '5262.4 km'
  177. // },
  178. // 'Callisto': {
  179. // mass: '10759000 x 10^16 kg',
  180. // 'semi-major-axis': '1882709 km',
  181. // 'diameter': '4820.6 km'
  182. // },
  183. // 'Io': {
  184. // mass: '8931900 x 10^16 kg',
  185. // 'semi-major-axis': '421700 km',
  186. // 'diameter': '3637.4 km'
  187. // },
  188. // 'Europa': {
  189. // mass: '4800000 x 10^16 kg',
  190. // 'semi-major-axis': '671034 km',
  191. // 'diameter': '3121.6 km'
  192. // },
  193. // };
  194. // ================================================================================
  195. var demoConfig = {
  196. lineComposite: {
  197. elementID: "#chart-composite-1",
  198. options: {
  199. title: "Fireball/Bolide Events - Yearly (reported)",
  200. data: lineCompositeData,
  201. type: "line",
  202. height: 190,
  203. colors: ["green"],
  204. isNavigable: 1,
  205. valuesOverPoints: 1,
  206. lineOptions: {
  207. dotSize: 8
  208. }
  209. }
  210. },
  211. barComposite: {
  212. elementID: "#chart-composite-2",
  213. options: {
  214. data: barCompositeData,
  215. type: "bar",
  216. height: 210,
  217. colors: ["violet", "light-blue", "#46a9f9"],
  218. valuesOverPoints: 1,
  219. axisOptions: {
  220. xAxisMode: "tick"
  221. },
  222. barOptions: {
  223. stacked: 1
  224. }
  225. }
  226. },
  227. demoMain: {
  228. elementID: "",
  229. options: {
  230. title: "My Awesome Chart",
  231. data: "typeData",
  232. type: "axis-mixed",
  233. height: 300,
  234. colors: ["purple", "magenta", "light-blue"],
  235. maxSlices: 10,
  236. tooltipOptions: {
  237. formatTooltipX: function formatTooltipX(d) {
  238. return (d + '').toUpperCase();
  239. },
  240. formatTooltipY: function formatTooltipY(d) {
  241. return d + ' pts';
  242. }
  243. }
  244. }
  245. }
  246. };
  247. var Chart = frappe.Chart; // eslint-disable-line no-undef
  248. var lc = demoConfig.lineComposite;
  249. var lineCompositeChart = new Chart(lc.elementID, lc.options);
  250. var bc = demoConfig.barComposite;
  251. var barCompositeChart = new Chart(bc.elementID, bc.options);
  252. lineCompositeChart.parent.addEventListener('data-select', function (e) {
  253. var i = e.index;
  254. barCompositeChart.updateDatasets([fireballOver25[i], fireball_5_25[i], fireball_2_5[i]]);
  255. });
  256. // ================================================================================
  257. var customColors = ['purple', 'magenta', 'light-blue'];
  258. var typeChartArgs = {
  259. title: "My Awesome Chart",
  260. data: typeData,
  261. type: 'axis-mixed',
  262. height: 300,
  263. colors: customColors,
  264. // maxLegendPoints: 6,
  265. maxSlices: 10,
  266. tooltipOptions: {
  267. formatTooltipX: function formatTooltipX(d) {
  268. return (d + '').toUpperCase();
  269. },
  270. formatTooltipY: function formatTooltipY(d) {
  271. return d + ' pts';
  272. }
  273. }
  274. };
  275. var aggrChart = new Chart("#chart-aggr", typeChartArgs);
  276. Array.prototype.slice.call(document.querySelectorAll('.aggr-type-buttons button')).map(function (el) {
  277. el.addEventListener('click', function (e) {
  278. var btn = e.target;
  279. var type = btn.getAttribute('data-type');
  280. typeChartArgs.type = type;
  281. if (type !== 'axis-mixed') {
  282. typeChartArgs.colors = undefined;
  283. } else {
  284. typeChartArgs.colors = customColors;
  285. }
  286. if (type !== 'percentage') {
  287. typeChartArgs.height = 300;
  288. } else {
  289. typeChartArgs.height = undefined;
  290. }
  291. var newChart = new Chart("#chart-aggr", typeChartArgs);
  292. if (newChart) {
  293. aggrChart = newChart;
  294. }
  295. Array.prototype.slice.call(btn.parentNode.querySelectorAll('button')).map(function (el) {
  296. el.classList.remove('active');
  297. });
  298. btn.classList.add('active');
  299. });
  300. });
  301. document.querySelector('.export-aggr').addEventListener('click', function () {
  302. aggrChart.export();
  303. });
  304. // Update values chart
  305. // ================================================================================
  306. var updateDataAllLabels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"];
  307. var getRandom = function getRandom() {
  308. return Math.floor(getRandomBias(-40, 60, 0.8, 1));
  309. };
  310. var updateDataAllValues = Array.from({ length: 30 }, getRandom);
  311. // We're gonna be shuffling this
  312. var updateDataAllIndices = updateDataAllLabels.map(function (d, i) {
  313. return i;
  314. });
  315. var getUpdateData = function getUpdateData(source_array) {
  316. var length = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
  317. var indices = updateDataAllIndices.slice(0, length);
  318. return indices.map(function (index) {
  319. return source_array[index];
  320. });
  321. };
  322. var updateData = {
  323. labels: getUpdateData(updateDataAllLabels),
  324. datasets: [{
  325. "values": getUpdateData(updateDataAllValues)
  326. }],
  327. yMarkers: [{
  328. label: "Altitude",
  329. value: 25,
  330. type: 'dashed'
  331. }],
  332. yRegions: [{
  333. label: "Range",
  334. start: 10,
  335. end: 45
  336. }]
  337. };
  338. var updateChart = new Chart("#chart-update", {
  339. data: updateData,
  340. type: 'line',
  341. height: 300,
  342. colors: ['#ff6c03'],
  343. lineOptions: {
  344. // hideLine: 1,
  345. regionFill: 1
  346. }
  347. });
  348. var chartUpdateButtons = document.querySelector('.chart-update-buttons');
  349. chartUpdateButtons.querySelector('[data-update="random"]').addEventListener("click", function () {
  350. shuffle(updateDataAllIndices);
  351. var value = getRandom();
  352. var start = getRandom();
  353. var end = getRandom();
  354. var data = {
  355. labels: updateDataAllLabels.slice(0, 10),
  356. datasets: [{ values: getUpdateData(updateDataAllValues) }],
  357. yMarkers: [{
  358. label: "Altitude",
  359. value: value,
  360. type: 'dashed'
  361. }],
  362. yRegions: [{
  363. label: "Range",
  364. start: start,
  365. end: end
  366. }]
  367. };
  368. updateChart.update(data);
  369. });
  370. chartUpdateButtons.querySelector('[data-update="add"]').addEventListener("click", function () {
  371. var index = updateChart.state.datasetLength; // last index to add
  372. if (index >= updateDataAllIndices.length) return;
  373. updateChart.addDataPoint(updateDataAllLabels[index], [updateDataAllValues[index]]);
  374. });
  375. chartUpdateButtons.querySelector('[data-update="remove"]').addEventListener("click", function () {
  376. updateChart.removeDataPoint();
  377. });
  378. document.querySelector('.export-update').addEventListener('click', function () {
  379. updateChart.export();
  380. });
  381. // Trends Chart
  382. // ================================================================================
  383. var plotChartArgs = {
  384. title: "Mean Total Sunspot Count - Yearly",
  385. data: trendsData,
  386. type: 'line',
  387. height: 300,
  388. colors: ['#238e38'],
  389. lineOptions: {
  390. hideDots: 1,
  391. heatline: 1
  392. },
  393. axisOptions: {
  394. xAxisMode: 'tick',
  395. yAxisMode: 'span',
  396. xIsSeries: 1
  397. }
  398. };
  399. var trendsChart = new Chart("#chart-trends", plotChartArgs);
  400. Array.prototype.slice.call(document.querySelectorAll('.chart-plot-buttons button')).map(function (el) {
  401. el.addEventListener('click', function (e) {
  402. var btn = e.target;
  403. var type = btn.getAttribute('data-type');
  404. var config = {};
  405. config[type] = 1;
  406. if (['regionFill', 'heatline'].includes(type)) {
  407. config.hideDots = 1;
  408. }
  409. // plotChartArgs.init = false;
  410. plotChartArgs.lineOptions = config;
  411. new Chart("#chart-trends", plotChartArgs);
  412. Array.prototype.slice.call(btn.parentNode.querySelectorAll('button')).map(function (el) {
  413. el.classList.remove('active');
  414. });
  415. btn.classList.add('active');
  416. });
  417. });
  418. document.querySelector('.export-trends').addEventListener('click', function () {
  419. trendsChart.export();
  420. });
  421. // Event chart
  422. // ================================================================================
  423. var eventsData = {
  424. labels: ["Ganymede", "Callisto", "Io", "Europa"],
  425. datasets: [{
  426. "values": moonData.distances,
  427. "formatted": moonData.distances.map(function (d) {
  428. return d * 1000 + " km";
  429. })
  430. }]
  431. };
  432. var eventsChart = new Chart("#chart-events", {
  433. title: "Jupiter's Moons: Semi-major Axis (1000 km)",
  434. data: eventsData,
  435. type: 'bar',
  436. height: 330,
  437. colors: ['grey'],
  438. isNavigable: 1
  439. });
  440. var dataDiv = document.querySelector('.chart-events-data');
  441. eventsChart.parent.addEventListener('data-select', function (e) {
  442. var name = moonData.names[e.index];
  443. dataDiv.querySelector('.moon-name').innerHTML = name;
  444. dataDiv.querySelector('.semi-major-axis').innerHTML = moonData.distances[e.index] * 1000;
  445. dataDiv.querySelector('.mass').innerHTML = moonData.masses[e.index];
  446. dataDiv.querySelector('.diameter').innerHTML = moonData.diameters[e.index];
  447. dataDiv.querySelector('img').src = "./assets/img/" + name.toLowerCase() + ".jpg";
  448. });
  449. // Heatmap
  450. // ================================================================================
  451. var today = new Date();
  452. var start = clone(today);
  453. addDays(start, 4);
  454. var end = clone(start);
  455. start.setFullYear(start.getFullYear() - 2);
  456. end.setFullYear(end.getFullYear() - 1);
  457. var dataPoints = {};
  458. var startTs = timestampSec(start);
  459. var endTs = timestampSec(end);
  460. startTs = timestampToMidnight(startTs);
  461. endTs = timestampToMidnight(endTs, true);
  462. while (startTs < endTs) {
  463. dataPoints[parseInt(startTs)] = Math.floor(getRandomBias(0, 5, 0.2, 1));
  464. startTs += SEC_IN_DAY;
  465. }
  466. var heatmapData = {
  467. dataPoints: dataPoints,
  468. start: start,
  469. end: end
  470. };
  471. var heatmapArgs = {
  472. title: "Monthly Distribution",
  473. data: heatmapData,
  474. type: 'heatmap',
  475. discreteDomains: 1,
  476. countLabel: 'Level',
  477. colors: HEATMAP_COLORS_BLUE,
  478. legendScale: [0, 1, 2, 4, 5]
  479. };
  480. var heatmapChart = new Chart("#chart-heatmap", heatmapArgs);
  481. Array.prototype.slice.call(document.querySelectorAll('.heatmap-mode-buttons button')).map(function (el) {
  482. el.addEventListener('click', function (e) {
  483. var btn = e.target;
  484. var mode = btn.getAttribute('data-mode');
  485. var discreteDomains = 0;
  486. if (mode === 'discrete') {
  487. discreteDomains = 1;
  488. }
  489. var colors = [];
  490. var colors_mode = document.querySelector('.heatmap-color-buttons .active').getAttribute('data-color');
  491. if (colors_mode === 'halloween') {
  492. colors = HEATMAP_COLORS_YELLOW;
  493. } else if (colors_mode === 'blue') {
  494. colors = HEATMAP_COLORS_BLUE;
  495. }
  496. heatmapArgs.discreteDomains = discreteDomains;
  497. heatmapArgs.colors = colors;
  498. new Chart("#chart-heatmap", heatmapArgs);
  499. Array.prototype.slice.call(btn.parentNode.querySelectorAll('button')).map(function (el) {
  500. el.classList.remove('active');
  501. });
  502. btn.classList.add('active');
  503. });
  504. });
  505. Array.prototype.slice.call(document.querySelectorAll('.heatmap-color-buttons button')).map(function (el) {
  506. el.addEventListener('click', function (e) {
  507. var btn = e.target;
  508. var colors_mode = btn.getAttribute('data-color');
  509. var colors = [];
  510. if (colors_mode === 'halloween') {
  511. colors = HEATMAP_COLORS_YELLOW;
  512. } else if (colors_mode === 'blue') {
  513. colors = HEATMAP_COLORS_BLUE;
  514. }
  515. var discreteDomains = 1;
  516. var view_mode = document.querySelector('.heatmap-mode-buttons .active').getAttribute('data-mode');
  517. if (view_mode === 'continuous') {
  518. discreteDomains = 0;
  519. }
  520. heatmapArgs.discreteDomains = discreteDomains;
  521. heatmapArgs.colors = colors;
  522. new Chart("#chart-heatmap", heatmapArgs);
  523. Array.prototype.slice.call(btn.parentNode.querySelectorAll('button')).map(function (el) {
  524. el.classList.remove('active');
  525. });
  526. btn.classList.add('active');
  527. });
  528. });
  529. document.querySelector('.export-heatmap').addEventListener('click', function () {
  530. heatmapChart.export();
  531. });
  532. }());