Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.
 
 
 

217 wiersze
5.6 KiB

  1. import { $ } from '../../../src/js/utils/dom';
  2. import { shuffle, getRandomBias } from '../../../src/js/utils/helpers';
  3. import { fireballOver25, fireball_2_5, fireball_5_25, lineCompositeData,
  4. barCompositeData, typeData, trendsData, moonData } from './data';
  5. import dc from './demoConfig';
  6. import { docSectionBuilder } from './docSectionBuilder';
  7. let Chart = frappe.Chart; // eslint-disable-line no-undef
  8. let dcb = new docSectionBuilder(Chart);
  9. let lineComposite = new Chart("#line-composite-1", dc.lineComposite.config);
  10. let barComposite = new Chart("#bar-composite-1", dc.barComposite.config);
  11. lineComposite.parent.addEventListener('data-select', (e) => {
  12. let i = e.index;
  13. barComposite.updateDatasets([
  14. fireballOver25[i], fireball_5_25[i], fireball_2_5[i]
  15. ]);
  16. });
  17. // ================================================================================
  18. let customColors = ['purple', 'magenta', 'light-blue'];
  19. let typeChartArgs = {
  20. title: "My Awesome Chart",
  21. data: typeData,
  22. type: 'axis-mixed',
  23. height: 300,
  24. colors: customColors,
  25. valuesOverPoints: 1,
  26. // maxLegendPoints: 6,
  27. maxSlices: 10,
  28. tooltipOptions: {
  29. formatTooltipX: d => (d + '').toUpperCase(),
  30. formatTooltipY: d => d + ' pts',
  31. }
  32. };
  33. let aggrChart = new Chart("#chart-aggr", typeChartArgs);
  34. Array.prototype.slice.call(
  35. document.querySelectorAll('.aggr-type-buttons button')
  36. ).map(el => {
  37. el.addEventListener('click', (e) => {
  38. let btn = e.target;
  39. let type = btn.getAttribute('data-type');
  40. typeChartArgs.type = type;
  41. if(type !== 'axis-mixed') {
  42. typeChartArgs.colors = undefined;
  43. } else {
  44. typeChartArgs.colors = customColors;
  45. }
  46. if(type !== 'percentage') {
  47. typeChartArgs.height = 300;
  48. } else {
  49. typeChartArgs.height = undefined;
  50. }
  51. let newChart = new Chart("#chart-aggr", typeChartArgs);
  52. if(newChart){
  53. aggrChart = newChart;
  54. }
  55. Array.prototype.slice.call(
  56. btn.parentNode.querySelectorAll('button')).map(el => {
  57. el.classList.remove('active');
  58. });
  59. btn.classList.add('active');
  60. });
  61. });
  62. document.querySelector('.export-aggr').addEventListener('click', () => {
  63. aggrChart.export();
  64. });
  65. // Update values chart
  66. // ================================================================================
  67. let updateDataAllLabels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue",
  68. "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri",
  69. "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"];
  70. let getRandom = () => Math.floor(getRandomBias(-40, 60, 0.8, 1));
  71. let updateDataAllValues = Array.from({length: 30}, getRandom);
  72. // We're gonna be shuffling this
  73. let updateDataAllIndices = updateDataAllLabels.map((d,i) => i);
  74. let getUpdateData = (source_array, length=10) => {
  75. let indices = updateDataAllIndices.slice(0, length);
  76. return indices.map((index) => source_array[index]);
  77. };
  78. let updateData = {
  79. labels: getUpdateData(updateDataAllLabels),
  80. datasets: [{
  81. "values": getUpdateData(updateDataAllValues)
  82. }],
  83. yMarkers: [
  84. {
  85. label: "Altitude",
  86. value: 25,
  87. type: 'dashed'
  88. }
  89. ],
  90. yRegions: [
  91. {
  92. label: "Range",
  93. start: 10,
  94. end: 45
  95. },
  96. ],
  97. };
  98. let updateChart = new Chart("#chart-update", {
  99. data: updateData,
  100. type: 'line',
  101. height: 300,
  102. colors: ['#ff6c03'],
  103. lineOptions: {
  104. // hideLine: 1,
  105. regionFill: 1
  106. },
  107. });
  108. let chartUpdateButtons = document.querySelector('.chart-update-buttons');
  109. chartUpdateButtons.querySelector('[data-update="random"]').addEventListener("click", () => {
  110. shuffle(updateDataAllIndices);
  111. let value = getRandom();
  112. let start = getRandom();
  113. let end = getRandom();
  114. let data = {
  115. labels: updateDataAllLabels.slice(0, 10),
  116. datasets: [{values: getUpdateData(updateDataAllValues)}],
  117. yMarkers: [
  118. {
  119. label: "Altitude",
  120. value: value,
  121. type: 'dashed'
  122. }
  123. ],
  124. yRegions: [
  125. {
  126. label: "Range",
  127. start: start,
  128. end: end
  129. },
  130. ],
  131. };
  132. updateChart.update(data);
  133. });
  134. chartUpdateButtons.querySelector('[data-update="add"]').addEventListener("click", () => {
  135. let index = updateChart.state.datasetLength; // last index to add
  136. if(index >= updateDataAllIndices.length) return;
  137. updateChart.addDataPoint(
  138. updateDataAllLabels[index], [updateDataAllValues[index]]
  139. );
  140. });
  141. chartUpdateButtons.querySelector('[data-update="remove"]').addEventListener("click", () => {
  142. updateChart.removeDataPoint();
  143. });
  144. document.querySelector('.export-update').addEventListener('click', () => {
  145. updateChart.export();
  146. });
  147. // Trends Chart
  148. // ================================================================================
  149. let section = document.querySelector('.trends-plot');
  150. dcb.setParent(section);
  151. dcb.setSys(dc.trendsPlot);
  152. dcb.make();
  153. let eventsData = {
  154. labels: ["Ganymede", "Callisto", "Io", "Europa"],
  155. datasets: [
  156. {
  157. "values": moonData.distances,
  158. "formatted": moonData.distances.map(d => d*1000 + " km")
  159. }
  160. ]
  161. };
  162. let eventsChart = new Chart("#chart-events", {
  163. title: "Jupiter's Moons: Semi-major Axis (1000 km)",
  164. data: eventsData,
  165. type: 'bar',
  166. height: 330,
  167. colors: ['grey'],
  168. isNavigable: 1,
  169. });
  170. let dataDiv = document.querySelector('.chart-events-data');
  171. eventsChart.parent.addEventListener('data-select', (e) => {
  172. let name = moonData.names[e.index];
  173. dataDiv.querySelector('.moon-name').innerHTML = name;
  174. dataDiv.querySelector('.semi-major-axis').innerHTML = moonData.distances[e.index] * 1000;
  175. dataDiv.querySelector('.mass').innerHTML = moonData.masses[e.index];
  176. dataDiv.querySelector('.diameter').innerHTML = moonData.diameters[e.index];
  177. dataDiv.querySelector('img').src = "./assets/img/" + name.toLowerCase() + ".jpg";
  178. });
  179. // Heatmap
  180. // ================================================================================
  181. section = document.querySelector('.heatmap');
  182. dcb.setParent(section);
  183. dcb.setSys(dc.heatmap);
  184. dcb.make();