WEB/src/Template/Element/Eprosume/Views/charts.ctp

<!-- apexcharts -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
    // charts stacked column template
    var chartData = function(series, stacked, colors) {
      return {
        chart: {
            width:'100%',
            height: 350,
            type: 'bar',
            stacked: stacked,
            toolbar: {
                show: true
            },
            zoom: {
                enabled: true
            }
        },
        colors: colors,
        dataLabels: {
            enabled: false
        },
        legend: {
            position: 'top',
            offsetY: 0
        },
        fill: {
            opacity: 1
        },
        series: series,
        tooltip: {
            x: {
                format: 'yyyy MMM dd HH:mm',
            }
        },
        xaxis: {
            format: 'yyyy-MM-dd HH:mm',
            type: 'datetime'
        }
      };
    };

    // DOM elements declaration
    var chart1;
    var chart2;
    var chart3;
    var chart4;
    var colorSelfConsumption = '#25bc39';
    var colorPurchased = '#d32626';
    var colorSold = '#4177d3';
    var meterSelect;
    var pickerElement;

    $(document).ready(function() {    
        // meterSelect element and event listener
        meterSelect = $('#meterSelect'); 
        meterSelect.change( function() {
            drawCharts();
        });

        // pickerSelect element and event listener
        pickerElement = document.getElementById('pickerSelect');
        if(pickerElement != null) {
            let date = getDate();
            var today = getDateString(date);
            date.setDate(date.getDate() - 1);
            var yesterday = getDateString(date);
            pickerElement.setAttribute("data-from", yesterday);
            pickerElement.setAttribute("data-to", today);
            var picker = flatpickr(pickerElement, {
                enableTime: true,
                defaultDate: [ yesterday, today ],
                maxDate: today,
                mode: 'range',
                time_24hr: true,
                onClose: function(selectedDates) {
                    let dates = selectedDates.map(d => getDate(d));
                    dates[0] == null && dates.push(today);
                    dates[1] == null && dates.push(dates[0]);
                    pickerElement.setAttribute("data-from", getDateString(dates[0]));
                    pickerElement.setAttribute("data-to", getDateString(dates[1]));
                    drawCharts();
                }
            });
            $('#meterReset').click( function() {
                meterSelect.find("option:selected").prop("selected", false);
                meterSelect.find("option:first").prop("selected", "selected");
                meterSelect.val(meterSelect.find("option:first").val()).change();
                clearCharts();
            });
            $('#pickerReset').click( function() {
                picker.clear();
                pickerElement.setAttribute("data-from", "");
                pickerElement.setAttribute("data-to", "");
                clearCharts();
            });
        }

    });

    function clearCharts() {
    }

    function initCharts() {
        chart1 = new ApexCharts(
            document.querySelector("#chart1"),
            chartData(
                [
                    {
                        name: 'Purchased',
                        data: []
                    },
                    {
                        name: 'Self-consumption',
                        data: []
                    }
                ], // series
                true,
                [colorPurchased, colorSelfConsumption]
            )
        );
        chart2 = new ApexCharts(
            document.querySelector("#chart2"),
            chartData(
                [
                    {
                        name: 'Sold',
                        data: []
                    },
                    {
                        name: 'Self-consumption',
                        data: []
                    }
                ], // series
                true,
                [colorSold, colorSelfConsumption]
            )
        );
        chart3 = new ApexCharts(
            document.querySelector("#chart3"),
            chartData(
                [
                    {
                        name: 'Purchased',
                        data: []
                    },
                    {
                        name: 'Sold',
                        data: []
                    }
                ], // series
                false,
                [colorPurchased, colorSold]
            )
        );
        chart4 = new ApexCharts(
            document.querySelector("#chart4"),
            chartData(
                [
                    {
                        name: 'TFT',
                        data: []
                    },
                    {
                        name: 'PRS',
                        data: []
                    }
                ], // series
                false,
                [colorPurchased, colorSold]
            )
        );
        chart1.render();
        chart2.render();
        chart3.render();
        //chart4.render();
    }

    function drawCharts() {
        var input = {};
        input.meter = meterSelect.val();
        input.from = pickerElement.getAttribute("data-from");
        input.to = pickerElement.getAttribute("data-to");
        input.asset = "TFT";
        var qs = jQuery.param(input);
        var settings = {
            type: "GET",
            contentType: "application/json",
            headers: {
                "X-CSRF-Token": <?= json_encode($this->request->getParam('_csrfToken')) ?>
            },
            dataType : "json"
        }
        var blocks;
        var promise = $.ajax(
            '/xhr/blocks?'+qs,
            settings
        ).then(function(data) {
            blocks = data;
            return $.ajax(
                '/xhr/balances?'+qs,
                settings 
            );
        });

        promise.then(function(balances) {
            var autoConsEnergy = [];
            var purchasedEnergy = [];
            var soldEnergy = [];
            var PRS = [];
            var TFT = [];
            for(var i=0;i<blocks.length;i++) {
                var _autoConsEnergy = parseInt((blocks[i].memo.autoConsEnergy || 0));
                if(_autoConsEnergy) {
                    autoConsEnergy.push(
                        [
                            blocks[i].timestamp,
                            _autoConsEnergy
                        ]
                    );                
                }
                var _purchasedEnergy = Math.abs(((blocks[i].memo.energyDiff > 0 ? blocks[i].memo.energyDiff : 0) || 0));
                if(purchasedEnergy) {
                    purchasedEnergy.push(
                        [
                            blocks[i].timestamp,
                            _purchasedEnergy
                        ]
                    );
                }
                var _soldEnergy = Math.abs(((blocks[i].memo.energyDiff < 0 ? blocks[i].memo.energyDiff : 0) || 0));
                if(_soldEnergy) {
                    soldEnergy.push(
                        [
                            blocks[i].timestamp,
                            _soldEnergy
                        ]
                    );
                }
            }
            for(var i=0;i<balances.length;i++) {
                PRS.push(
                    [
                        balances[i].timestamp,
                        (parseInt(balances[i].PRS) || 0)
                        
                    ]
                );
                TFT.push(
                    [
                        balances[i].timestamp,
                        (parseInt(balances[i].TFT) || 0)
                        
                    ]
                );
            }
            chart1.updateOptions(
                chartData(
                    [
                        {
                            name: 'Purchased',
                            data: purchasedEnergy
                        },
                        {
                            name: 'Self-consumption',
                            data: autoConsEnergy
                        }
                    ],
                    true,
                    [colorPurchased, colorSelfConsumption]
                )
            );
            chart2.updateOptions(
                chartData(
                    [
                        {
                            name: 'Sold',
                            data: soldEnergy
                        },
                        {
                            name: 'Self-consumption',
                            data: autoConsEnergy
                        }
                    ],
                    true,
                    [colorSold, colorSelfConsumption]
                )
            );
            chart3.updateOptions(
                chartData(
                    [
                        {
                            name: 'Purchased',
                            data: purchasedEnergy
                        },
                        {
                            name: 'Sold',
                            data: soldEnergy
                        }
                    ], // series
                    false,
                    [colorPurchased, colorSold]
                )
            );
            /*
            chart4.updateOptions(
                chartData(
                    [
                        {
                            name: 'TFT',
                            data: TFT
                        },
                        {
                            name: 'PRS',
                            data: PRS
                        }
                    ], // series
                    false,
                    [colorPurchased, colorSold]
                )
            );
            */

        });
    }

    initCharts();

</script>