CaracoleBundle/Resources/assets/functions/statistic.js

import Chart from 'chart';
export class CaracStatistics {
    static initBtnShowTotalOrderProduct(){
        $('.lc-show-products-sales-statistic').unbind('click').on('click', function (){
            var $btn = $(this);
            var url = $(this).data('url');
            $('#modal-products-sales-statistic').remove();
            $.ajax({
                url: url,
                method: "POST",
                dataType: "json",
                success: function (response) {
                    $('body').append(response.data);
                    $('#modal-products-sales-statistic').modal('show');
                    CaracStatistics.initModalProductsSalesStatistic(response.statistics);
                }
            });
        });
    }
    static initModalProductsSalesStatistic(statistics) {
        var chart = null;
        $('.btn-products-sales-statistic').off('click');
        $('.btn-products-sales-statistic').on('click', function () {
            $('.table-products-sales-statistic').hide();
            $('.btn-products-sales-statistic').addClass('btn-secondary').removeClass('btn-primary');
            $(this).removeClass('btn-secondary').addClass('btn-primary');

            $('#table-products-sales-statistic-'+$(this).data('property-name')).show()
            if (chart) chart.destroy();
            $(this).removeClass('btn-secondary');
            chart = CaracStatistics.drawProductsSalesStatistic(statistics,$(this).data('property-name'))
        });
        $('.btn-products-sales-statistic').first().click();

    }

    static drawProductsSalesStatistic(statictics, propertyName) {

        var options = {
            bezierCurve : false,
            tooltips: {
                callbacks: {
                    label: (item) =>  item.yLabel ,
                },
            },
        };

        chart = new Chart(document.getElementById("chart"), {
            "type": "line",
            "data": {
                "labels": Object.values(statictics.label),
                "datasets": [{
                    "label": "Vente de produits / semaine",
                    "data": Object.values(statictics.data[propertyName].data),
                    "fill": false,
                    "borderColor": "rgb(75, 192, 192)",
                    "lineTension": 0.1
                }]
            },
            "options": options
        });
        return chart;
    }

}