Web Interfaces of PROSUME

charts.ctp 9.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329
  1. <!-- apexcharts -->
  2. <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
  3. <script>
  4. // charts stacked column template
  5. var chartData = function(series, stacked, colors) {
  6. return {
  7. chart: {
  8. width:'100%',
  9. height: 350,
  10. type: 'bar',
  11. stacked: stacked,
  12. toolbar: {
  13. show: true
  14. },
  15. zoom: {
  16. enabled: true
  17. }
  18. },
  19. colors: colors,
  20. dataLabels: {
  21. enabled: false
  22. },
  23. legend: {
  24. position: 'top',
  25. offsetY: 0
  26. },
  27. fill: {
  28. opacity: 1
  29. },
  30. series: series,
  31. tooltip: {
  32. x: {
  33. format: 'yyyy MMM dd HH:mm',
  34. }
  35. },
  36. xaxis: {
  37. format: 'yyyy-MM-dd HH:mm',
  38. type: 'datetime'
  39. }
  40. };
  41. };
  42. // DOM elements declaration
  43. var chart1;
  44. var chart2;
  45. var chart3;
  46. var chart4;
  47. var colorSelfConsumption = '#25bc39';
  48. var colorPurchased = '#d32626';
  49. var colorSold = '#4177d3';
  50. var meterSelect;
  51. var pickerElement;
  52. $(document).ready(function() {
  53. // meterSelect element and event listener
  54. meterSelect = $('#meterSelect');
  55. meterSelect.change( function() {
  56. drawCharts();
  57. });
  58. // pickerSelect element and event listener
  59. pickerElement = document.getElementById('pickerSelect');
  60. if(pickerElement != null) {
  61. let date = getDate();
  62. var today = getDateString(date);
  63. date.setDate(date.getDate() - 1);
  64. var yesterday = getDateString(date);
  65. pickerElement.setAttribute("data-from", yesterday);
  66. pickerElement.setAttribute("data-to", today);
  67. var picker = flatpickr(pickerElement, {
  68. enableTime: true,
  69. defaultDate: [ yesterday, today ],
  70. maxDate: today,
  71. mode: 'range',
  72. time_24hr: true,
  73. onClose: function(selectedDates) {
  74. let dates = selectedDates.map(d => getDate(d));
  75. dates[0] == null && dates.push(today);
  76. dates[1] == null && dates.push(dates[0]);
  77. pickerElement.setAttribute("data-from", getDateString(dates[0]));
  78. pickerElement.setAttribute("data-to", getDateString(dates[1]));
  79. drawCharts();
  80. }
  81. });
  82. $('#meterReset').click( function() {
  83. meterSelect.find("option:selected").prop("selected", false);
  84. meterSelect.find("option:first").prop("selected", "selected");
  85. meterSelect.val(meterSelect.find("option:first").val()).change();
  86. clearCharts();
  87. });
  88. $('#pickerReset').click( function() {
  89. picker.clear();
  90. pickerElement.setAttribute("data-from", "");
  91. pickerElement.setAttribute("data-to", "");
  92. clearCharts();
  93. });
  94. }
  95. });
  96. function clearCharts() {
  97. }
  98. function initCharts() {
  99. chart1 = new ApexCharts(
  100. document.querySelector("#chart1"),
  101. chartData(
  102. [
  103. {
  104. name: 'Purchased',
  105. data: []
  106. },
  107. {
  108. name: 'Self-consumption',
  109. data: []
  110. }
  111. ], // series
  112. true,
  113. [colorPurchased, colorSelfConsumption]
  114. )
  115. );
  116. chart2 = new ApexCharts(
  117. document.querySelector("#chart2"),
  118. chartData(
  119. [
  120. {
  121. name: 'Sold',
  122. data: []
  123. },
  124. {
  125. name: 'Self-consumption',
  126. data: []
  127. }
  128. ], // series
  129. true,
  130. [colorSold, colorSelfConsumption]
  131. )
  132. );
  133. chart3 = new ApexCharts(
  134. document.querySelector("#chart3"),
  135. chartData(
  136. [
  137. {
  138. name: 'Purchased',
  139. data: []
  140. },
  141. {
  142. name: 'Sold',
  143. data: []
  144. }
  145. ], // series
  146. false,
  147. [colorPurchased, colorSold]
  148. )
  149. );
  150. chart4 = new ApexCharts(
  151. document.querySelector("#chart4"),
  152. chartData(
  153. [
  154. {
  155. name: 'TFT',
  156. data: []
  157. },
  158. {
  159. name: 'PRS',
  160. data: []
  161. }
  162. ], // series
  163. false,
  164. [colorPurchased, colorSold]
  165. )
  166. );
  167. chart1.render();
  168. chart2.render();
  169. chart3.render();
  170. //chart4.render();
  171. }
  172. function drawCharts() {
  173. var input = {};
  174. input.meter = meterSelect.val();
  175. input.from = pickerElement.getAttribute("data-from");
  176. input.to = pickerElement.getAttribute("data-to");
  177. input.asset = "TFT";
  178. var qs = jQuery.param(input);
  179. var settings = {
  180. type: "GET",
  181. contentType: "application/json",
  182. headers: {
  183. "X-CSRF-Token": <?= json_encode($this->request->getParam('_csrfToken')) ?>
  184. },
  185. dataType : "json"
  186. }
  187. var blocks;
  188. var promise = $.ajax(
  189. '/xhr/blocks?'+qs,
  190. settings
  191. ).then(function(data) {
  192. blocks = data;
  193. return $.ajax(
  194. '/xhr/balances?'+qs,
  195. settings
  196. );
  197. });
  198. promise.then(function(balances) {
  199. var autoConsEnergy = [];
  200. var purchasedEnergy = [];
  201. var soldEnergy = [];
  202. var PRS = [];
  203. var TFT = [];
  204. for(var i=0;i<blocks.length;i++) {
  205. var _autoConsEnergy = parseInt((blocks[i].memo.autoConsEnergy || 0));
  206. if(_autoConsEnergy) {
  207. autoConsEnergy.push(
  208. [
  209. blocks[i].timestamp,
  210. _autoConsEnergy
  211. ]
  212. );
  213. }
  214. var _purchasedEnergy = Math.abs(((blocks[i].memo.energyDiff > 0 ? blocks[i].memo.energyDiff : 0) || 0));
  215. if(purchasedEnergy) {
  216. purchasedEnergy.push(
  217. [
  218. blocks[i].timestamp,
  219. _purchasedEnergy
  220. ]
  221. );
  222. }
  223. var _soldEnergy = Math.abs(((blocks[i].memo.energyDiff < 0 ? blocks[i].memo.energyDiff : 0) || 0));
  224. if(_soldEnergy) {
  225. soldEnergy.push(
  226. [
  227. blocks[i].timestamp,
  228. _soldEnergy
  229. ]
  230. );
  231. }
  232. }
  233. for(var i=0;i<balances.length;i++) {
  234. PRS.push(
  235. [
  236. balances[i].timestamp,
  237. (parseInt(balances[i].PRS) || 0)
  238. ]
  239. );
  240. TFT.push(
  241. [
  242. balances[i].timestamp,
  243. (parseInt(balances[i].TFT) || 0)
  244. ]
  245. );
  246. }
  247. chart1.updateOptions(
  248. chartData(
  249. [
  250. {
  251. name: 'Purchased',
  252. data: purchasedEnergy
  253. },
  254. {
  255. name: 'Self-consumption',
  256. data: autoConsEnergy
  257. }
  258. ],
  259. true,
  260. [colorPurchased, colorSelfConsumption]
  261. )
  262. );
  263. chart2.updateOptions(
  264. chartData(
  265. [
  266. {
  267. name: 'Sold',
  268. data: soldEnergy
  269. },
  270. {
  271. name: 'Self-consumption',
  272. data: autoConsEnergy
  273. }
  274. ],
  275. true,
  276. [colorSold, colorSelfConsumption]
  277. )
  278. );
  279. chart3.updateOptions(
  280. chartData(
  281. [
  282. {
  283. name: 'Purchased',
  284. data: purchasedEnergy
  285. },
  286. {
  287. name: 'Sold',
  288. data: soldEnergy
  289. }
  290. ], // series
  291. false,
  292. [colorPurchased, colorSold]
  293. )
  294. );
  295. /*
  296. chart4.updateOptions(
  297. chartData(
  298. [
  299. {
  300. name: 'TFT',
  301. data: TFT
  302. },
  303. {
  304. name: 'PRS',
  305. data: PRS
  306. }
  307. ], // series
  308. false,
  309. [colorPurchased, colorSold]
  310. )
  311. );
  312. */
  313. });
  314. }
  315. initCharts();
  316. </script>