ildar-shaymukhametov_grandnode-refactorings/Grand.Web/Areas/Admin/Views/Shared/Components/OrderReportOrderTimeChart/Default.cshtml
<div class="col-12 text-center" style="height:50px;position:relative">
    <span style="position: absolute;bottom: 0;left:0;right:0;">
        <strong>
            Orders summary
        </strong>
    </span>
</div>

<div>
    <canvas id="canvasReportOrderTimeChart"></canvas>
</div>

<script src="~/scripts/chart.min.js" type="text/javascript"></script>
<script>
    $(document).ready(function () {
        initReportOrderTimeChart(true);
        $("#DarkLight").change(function () {
            initReportOrderTimeChart(true);
        });
    });

    function initReportOrderTimeChart(first) {
        function additionalData() {
            var data = {
                startDate: $('#dashboard-report-range').data('daterangepicker').startDate.format('YYYY-MM-DD'),
                endDate: $('#dashboard-report-range').data('daterangepicker').endDate.format('YYYY-MM-DD'),
            };

            addAntiForgeryToken(data);
            return data;
        }

        var add = additionalData();

        $.ajax({
            type: "POST",
            url: "@Html.Raw(Url.Action("ReportOrderTimeChart", "Reports"))",
            dataType: "json",
            data: add,
            success: function (data) {
                var chartData = {
                    labels: [],
                    datasets: [{
                        type: 'line',
                        label: 'Number of orders',
                        yAxisID: 'R',
                        borderColor: 'rgb(54, 162, 235)',
                        borderWidth: 2,
                        fill: false,
                        data: []
                    }, {
                        type: 'bar',
                        label: 'Total sum',
                            yAxisID: 'L',
                        backgroundColor: 'rgba(255, 159, 64, 0.6)',
                        borderColor: 'rgb(255, 159, 64)',
                        data: [],
                        borderWidth: 2
                    }]
                };

                for (var i = 0; i < data.Data.length; i++) {
                    chartData.labels[i] = data.Data[i].Time;
                    chartData.datasets[0].data[i] = data.Data[i].TotalOrders;
                    chartData.datasets[1].data[i] = data.Data[i].SumOrders;
                }
                var ctx = document.getElementById('canvasReportOrderTimeChart').getContext('2d');
                if (first) {
                    if ($('#DarkLight').is(':checked')) {
                        window.myReportOrderTimeChart = new Chart(ctx, {
                            type: 'bar',
                            data: chartData,
                            options: {
                                responsive: true,
                                legend: {
                                    labels: {
                                        fontColor: 'white'
                                    }
                                },
                                tooltips: {
                                    mode: 'index',
                                    intersect: true
                                }, scales: {
                                    yAxes: [{
                                        id: 'L',
                                        type: 'linear',
                                        position: 'left',
                                        gridLines: {
                                            color: 'rgb(255,255,255)'
                                        },
                                        ticks: {
                                            min: 0,
                                            fontColor: 'rgb(255,255,255)',
                                        },
                                    }, {
                                        id: 'R',
                                        type: 'linear',
                                        position: 'right',
                                        gridLines: {
                                            display: false,
                                        },
                                        ticks: {
                                            min: 0,
                                            fontColor: 'rgb(255,255,255)',
                                        },
                                    }]
                                }
                            }
                        });
                    } else {
                        window.myReportOrderTimeChart = new Chart(ctx, {
                            type: 'bar',
                            data: chartData,
                            options: {
                                responsive: true,
                                tooltips: {
                                    mode: 'index',
                                    intersect: true
                                }, scales: {
                                    yAxes: [{
                                        id: 'L',
                                        type: 'linear',
                                        position: 'left',
                                        ticks: {
                                            min: 0,
                                        },
                                    }, {
                                        id: 'R',
                                        type: 'linear',
                                        position: 'right',
                                        gridLines: {
                                            display: false
                                        },
                                        ticks: {
                                            min: 0,
                                        },
                                    }]
                                }
                            }
                        });
                    }
                } else {
                    window.myReportOrderTimeChart.data = chartData;
                    window.myReportOrderTimeChart.update();
                }

            },
            error: function () {
                alert('error');
            }
        });
    }
</script>
