@extends('layouts.backend.index')
@section('title', 'Dashboard')

@section('content')
<div class="page-header">
    <h3 class="page-title">
        <span class="page-title-icon bg-warning text-white me-2">
            <i class="mdi mdi-cast-variant"></i>
        </span> &nbsp;Dashboard
    </h3>
    
    <div class="d-none d-sm-block">
        <div class="clearfix">
            <div class="float-left mr-1">
                <x-form.select class="year" :option="$option->year" :old="date('Y')" />
            </div>
            <div class="float-right">
                <x-form.select class="month" :option="$option->month" :old="date('n')" />
            </div>
        </div>
    </div>
</div>

<div class="d-block d-sm-none">
    <div class="row no-gutters mb-45">
        <div class="col-6 pr-1">
            <x-form.select class="year" :option="$option->year" :old="date('Y')" />
        </div>
        <div class="col-6">
            <x-form.select class="month" :option="$option->month" :old="date('n')" />
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-6 col-md-3 stretch-card grid-margin">
        <div class="card bg-info card-img-holder text-white">
            <div class="card-body p-3">
                <img src="{{ asset('images/circle.svg') }}" class="card-img-absolute" alt="circle-image">
                <h4 class="font-weight-normal mb-3">
                    <i class="mdi mdi-clipboard-list card-icon float-right"></i>
                    <b>Order</b>
                </h4>
                <h2 class="counter-number" data-from="0" data-to="12650000" data-number="{{ number_format(12650000, 0, '', '.') }}"></h2>
                <h6 class="mt-0 card-text">
                    <i class="mdi mdi-trending-up mdi-18px"></i>&nbsp;
                    10 New Orders
                </h6>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-md-3 stretch-card grid-margin">
        <div class="card bg-warning card-img-holder text-white">
            <div class="card-body p-3">
                <img src="{{ asset('images/circle.svg') }}" class="card-img-absolute" alt="circle-image">
                <h4 class="font-weight-normal mb-3">
                    <i class="mdi mdi-receipt-text card-icon float-right"></i>
                    <b>Invoice</b>
                </h4>
                <h2 class="counter-number" data-from="0" data-to="12650000" data-number="{{ number_format(12650000, 0, '', '.') }}"></h2>
                <h6 class="mt-0 card-text">
                    <i class="mdi mdi-trending-up mdi-18px"></i>&nbsp;
                    10 New Invoices
                </h6>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-md-3 stretch-card grid-margin">
        <div class="card bg-success card-img-holder text-white">
            <div class="card-body p-3">
                <img src="{{ asset('images/circle.svg') }}" class="card-img-absolute" alt="circle-image">
                <h4 class="font-weight-normal mb-3">
                    <i class="mdi mdi-wallet-bifold card-icon float-right"></i>
                    <b>Payment</b>
                </h4>
                <h2 class="counter-number" data-from="0" data-to="12650000" data-number="{{ number_format(12650000, 0, '', '.') }}"></h2>
                <h6 class="mt-0 card-text">
                    <i class="mdi mdi-trending-up mdi-18px"></i>&nbsp;
                    10 New Payments
                </h6>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-md-3 stretch-card grid-margin">
        <div class="card bg-danger card-img-holder text-white">
            <div class="card-body p-3">
                <img src="{{ asset('images/circle.svg') }}" class="card-img-absolute" alt="circle-image">
                <h4 class="font-weight-normal mb-3">
                    <i class="mdi mdi-truck-fast card-icon float-right"></i>
                    <b>Delivery</b>
                </h4>
                <h2 class="counter-number" data-from="0" data-to="12650000" data-number="{{ number_format(12650000, 0, '', '.') }}"></h2>
                <h6 class="mt-0 card-text">
                    <i class="mdi mdi-trending-up mdi-18px"></i>&nbsp;
                    10 New Deliveries
                </h6>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-9">
        <div class="card mb-45">
            <div class="card-body p-3">
                <div class="clearfix mb-1">
                    <div class="float-right text-muted">
                        <small>
                            Last Updated : {{ Common::dateFormat(date('Y-m-d H:i:s'), 'dd mmm yyyy, hh:ii WIB') }}
                        </small>
                    </div>
                    <h5>
                        <b>Grafik Revenue & Cost</b> &nbsp;|&nbsp; Tahun <span id="chart-revenue-year">{{ date('Y') }}</span><br>
                    </h5>
                </div>

                <div class="text-center mt-5" id="chart-revenue-loading" style="height: 25px;">
                    <img src="{{ asset('images/loading.gif') }}" style="height: 50px;">
                </div>
                <canvas id="chart-revenue" height="107"></canvas>

                <hr class="mt-1 mb-3" />
                <div class="row">
                    <div class="col-sm-6 col-md-3">
                        <div class="float-left mr-2">
                            <div style="background: rgba(48, 142, 224, 0.5);border: 1px solid rgba(48, 142, 224, 1);width: 20px;height: 20px;"></div>
                        </div>
                        Revenue
                        <div class="clearfix"></div>
                    </div>
                    <div class="col-sm-6 col-md-3">
                        <div class="float-left mr-2">
                            <div style="background: rgb(254, 163, 0, 0.5);border: 1px solid rgba(254, 163, 0, 1);width: 20px;height: 20px;"></div>
                        </div>
                        Cost
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card mb-45">
            <div class="card-body p-3">
                <div class="clearfix">
                    <div class="float-left pt-3">
                        <i class="mdi mdi-wallet-plus text-info" style="font-size: 45px !important;"></i>
                        <hr class="mt-1 mb-0">
                    </div>
                    <div class="float-right">
                        <p class="mb-0 text-right">
                            <small><b class="text-info">Total Revenue</b> | Juni 2023</small>
                        </p>
                        <div class="fluid-container">
                            <h4 class="font-weight-medium text-right mb-0 rp" data-rp="{{ 'Rp. ' . number_format(21500000, 0, '', '.') }}">
                                12.650.000
                            </h4>
                        </div>
                    </div>
                </div>
                
                <p class="text-muted mt-1 mb-0">
                    <small>
                        Last Updated : {{ Common::dateFormat(date('Y-m-d H:i:s'), 'dd mmm yyyy, hh:ii WIB') }}
                    </small>
                </p>
            </div>
        </div>
        <div class="card mb-45">
            <div class="card-body p-3">
                <div class="clearfix">
                    <div class="float-left pt-3">
                        <i class="mdi mdi-shopping text-warning" style="font-size: 45px !important;"></i>
                        <hr class="mt-1 mb-0">
                    </div>
                    <div class="float-right">
                        <p class="mb-0 text-right">
                            <small><b class="text-warning">Total Cost</b> | Juni 2023</small>
                        </p>
                        <div class="fluid-container">
                            <h4 class="font-weight-medium text-right mb-0 rp" data-rp="{{ 'Rp. ' . number_format(21500000, 0, '', '.') }}">
                                12.650.000
                            </h4>
                        </div>
                    </div>
                </div>
                
                <p class="text-muted mt-1 mb-0">
                    <small>
                        Last Updated : {{ Common::dateFormat(date('Y-m-d H:i:s'), 'dd mmm yyyy, hh:ii WIB') }}
                    </small>
                </p>
            </div>
        </div>
        <div class="card mb-45">
            <div class="card-body p-3">
                <div class="clearfix">
                    <div class="float-left pt-3">
                        <i class="mdi mdi-cash-minus text-danger" style="font-size: 45px !important;"></i>
                        <hr class="mt-0 mb-0">
                    </div>
                    <div class="float-right">
                        <p class="mb-0 text-right">
                            <small><b class="text-danger">Jumlah Cost</b> | Juni 2023</small>
                        </p>
                        <div class="fluid-container">
                            <h4 class="font-weight-medium text-right mb-0 rp" data-rp="{{ 'Rp. ' . number_format(21500000, 0, '', '.') }}">
                                12
                            </h4>
                        </div>
                    </div>
                </div>
                
                <p class="text-muted mt-1 mb-0">
                    <small>
                        Last Updated : {{ Common::dateFormat(date('Y-m-d H:i:s'), 'dd mmm yyyy, hh:ii WIB') }}
                    </small>
                </p>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-3 stretch-card grid-margin">
        <div class="card card-img-holder bg-danger text-white">
            <div class="card-body p-3">
                <h4 class="font-weight-normal mb-3">
                    <i class="mdi mdi-clipboard-list card-icon float-right"></i>
                    <b>Canceled</b><br />
                    <span style="font-size: 12px;">Order</span>
                </h4>
                <h2 class="counter-number" data-from="0" data-to="12650000" data-number="{{ number_format(12650000, 0, '', '.') }}"></h2>
                <h6 class="mt-0 card-text" style="font-weight: normal;">
                    <i class="mdi mdi-plus"></i>
                    10 Orders
                </h6>
            </div>
        </div>
    </div>
    <div class="col-md-9 stretch-card grid-margin">
        <div class="card card-img-holder">
            <div class="card-body p-3">
                <div class="row">
                    <div class="col-sm-4">
                        <h4 class="font-weight-normal text-warning mb-3" style="line-height: 18px;">
                            <b>On Progress</b><br />
                            <span class="text-dark" style="font-size: 12px;">Work Order</span>
                        </h4>
                        <h2 class="counter-number" data-from="0" data-to="12650000" data-number="{{ number_format(12650000, 0, '', '.') }}"></h2>
                        <h6 class="mt-0 card-text" style="font-weight: normal;">
                            <i class="mdi mdi-plus"></i>
                            10 Work Orders
                        </h6>

                        <div class="d-block d-sm-none"><hr /></div>
                    </div>
                    <div class="col-sm-4 border-left-mobile">
                        <h4 class="font-weight-normal text-success mb-3" style="line-height: 18px;">
                            <b>Finish</b><br />
                            <span class="text-dark" style="font-size: 12px;">Work Order</span>
                        </h4>
                        <h2 class="counter-number" data-from="0" data-to="12650000" data-number="{{ number_format(12650000, 0, '', '.') }}"></h2>
                        <h6 class="mt-0 card-text" style="font-weight: normal;">
                            <i class="mdi mdi-plus"></i>
                            10 Work Orders
                        </h6>

                        <div class="d-block d-sm-none"><hr /></div>
                    </div>
                    <div class="col-sm-4 border-left-mobile">
                        <h4 class="font-weight-normal text-danger mb-3" style="line-height: 18px;">
                            <b>Canceled</b><br />
                            <span class="text-dark" style="font-size: 12px;">Work Order</span>
                        </h4>
                        <h2 class="counter-number" data-from="0" data-to="12650000" data-number="{{ number_format(12650000, 0, '', '.') }}"></h2>
                        <h6 class="mt-0 card-text" style="font-weight: normal;">
                            <i class="mdi mdi-plus"></i>
                            10 Work Orders
                        </h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-6 stretch-card grid-margin">
        <div class="card">
            <div class="card-body p-3">
                <div class="clearfix mb-1">
                    <div class="float-right text-muted">
                        <small>
                            Last Updated : {{ Common::dateFormat(date('Y-m-d H:i:s'), 'dd mmm yyyy, hh:ii WIB') }}
                        </small>
                    </div>
                    <h5>
                        <b>Grafik Jumlah Order</b> &nbsp;|&nbsp; Tahun <span id="chart-order-year">{{ date('Y') }}</span><br>
                    </h5>
                </div>

                <div class="text-center mt-5" id="chart-order-loading" style="height: 25px;">
                    <img src="{{ asset('images/loading.gif') }}" style="height: 50px;">
                </div>
                <canvas id="chart-order" height="150"></canvas>
            </div>
        </div>
    </div>
    <div class="col-sm-6 stretch-card grid-margin">
        <div class="card">
            <div class="card-body p-3">
                <div class="clearfix mb-1">
                    <div class="float-right text-muted">
                        <small>
                            Last Updated : {{ Common::dateFormat(date('Y-m-d H:i:s'), 'dd mmm yyyy, hh:ii WIB') }}
                        </small>
                    </div>
                    <h5>
                        <b>Grafik Jumlah Invoice</b> &nbsp;|&nbsp; Tahun <span id="chart-invoice-year">{{ date('Y') }}</span><br>
                    </h5>
                </div>

                <div class="text-center mt-5" id="chart-invoice-loading" style="height: 25px;">
                    <img src="{{ asset('images/loading.gif') }}" style="height: 50px;">
                </div>
                <canvas id="chart-invoice" height="150"></canvas>
            </div>
        </div>
    </div>
    <div class="col-sm-6 stretch-card grid-margin">
        <div class="card">
            <div class="card-body p-3">
                <div class="clearfix mb-1">
                    <div class="float-right text-muted">
                        <small>
                            Last Updated : {{ Common::dateFormat(date('Y-m-d H:i:s'), 'dd mmm yyyy, hh:ii WIB') }}
                        </small>
                    </div>
                    <h5>
                        <b>Grafik Jumlah Payment</b> &nbsp;|&nbsp; Tahun <span id="chart-payment-year">{{ date('Y') }}</span><br>
                    </h5>
                </div>

                <div class="text-center mt-5" id="chart-payment-loading" style="height: 25px;">
                    <img src="{{ asset('images/loading.gif') }}" style="height: 50px;">
                </div>
                <canvas id="chart-payment" height="150"></canvas>
            </div>
        </div>
    </div>
    <div class="col-sm-6 stretch-card grid-margin">
        <div class="card">
            <div class="card-body p-3">
                <div class="clearfix mb-1">
                    <div class="float-right text-muted">
                        <small>
                            Last Updated : {{ Common::dateFormat(date('Y-m-d H:i:s'), 'dd mmm yyyy, hh:ii WIB') }}
                        </small>
                    </div>
                    <h5>
                        <b>Grafik Jumlah Delivery</b> &nbsp;|&nbsp; Tahun <span id="chart-delivery-year">{{ date('Y') }}</span><br>
                    </h5>
                </div>

                <div class="text-center mt-5" id="chart-delivery-loading" style="height: 25px;">
                    <img src="{{ asset('images/loading.gif') }}" style="height: 50px;">
                </div>
                <canvas id="chart-delivery" height="150"></canvas>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<link rel="stylesheet" href="{{ asset('vendor/chartjs/Chart.min.css') }}"> 

<style>
.mb-45 {
    margin-bottom: 40px;
}
.border-left-mobile {
    border-left: 1px solid #dfdfdf;
}

@media (max-width: 576px) {
    .border-left-mobile {
        border-left: 0;
    }   
}
</style>
@endpush

@push('scripts')
<script src="{{ asset('vendor/chartjs/Chart.bundle.min.js') }}"></script>
<script src="{{ asset('js/jquery-countTo.js') }}"></script>

<script>
let year = "{{ date('Y') }}"
let month = "{{ date('n') }}"

$(document).ready(function(){
    setCounter()
    setChartRevenue()
    setChartOrder()
    setChartOrderInvoice()
    setChartOrderPayment()
    setChartOrderDelivery()
})

function setChartRevenue()
{
    $("#chart-revenue-loading").hide()

    const ctx_revenue = $("#chart-revenue").get(0).getContext("2d");
    const chart_revenue = new Chart(ctx_revenue, {
        type: 'line',
        data: {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
            datasets: [
                {
                    label: 'Revenue',
                    data: [334189194, 378301141, 397051338, 391341100, 423617998, 296953101, 0, 0, 0, 0, 0, 0],
                    backgroundColor: 'rgb(48, 142, 224, 0.3)',
                    borderColor: 'rgb(48, 142, 224)',
                    borderWidth: 2,
                    fill: false,
                    pointBackgroundColor: 'rgb(48, 142, 224)'
                },
                {
                    label: 'Cost',
                    data: [177022500, 188807500, 214766950, 195479810, 181693500, 126525000, 0, 0, 0, 0, 0, 0],
                    backgroundColor: 'rgb(254, 163, 0, 0.3)',
                    borderColor: 'rgb(254, 163, 0)',
                    borderWidth: 2,
                    fill: false,
                    pointBackgroundColor: 'rgb(254, 163, 0)'
                }
            ]
        },
        options: {
            scales: {
                yAxes: [{
                    gridLines: {
                        drawBorder: false,
                        zeroLineColor: "rgba(235,237,242,1)"
                    },
                    ticks: {
                        callback: function(value, index, values) {
                            if (value < 100000)
                                var money = moneyFormat(value)
                            else if (value < 1000000) {
                                var sum = parseFloat(value) / 1000
                                var money = moneyFormat(sum) + "rb"
                            } else {
                                var sum = parseFloat(value) / 1000000
                                var money = moneyFormat(sum) + "jt"
                            }

                            return money;
                        }
                    }
                }],
                xAxes: [{
                    gridLines: {
                        display:false,
                        drawBorder: false
                    },
                    ticks: {
                        padding: 5,
                        autoSkip: true,
                    }
                }]
            },
            legend: {
                display: false
            },
            tooltips: {
                callbacks: {
                    label: function(tooltipItem, data) {
                        var label = data.datasets[tooltipItem.datasetIndex].label || ""

                        return " " + label + " : " + Number(tooltipItem.yLabel).toFixed(0).replace(/./g, function(c, i, a) {
                            return i > 0 && c !== "." && (a.length - i) % 3 === 0 ? "." + c : c;
                        });
                    }
                }
            }
        }
    })
}

function setChartOrder()
{
    $("#chart-order-loading").hide()

    const ctx_order = $("#chart-order").get(0).getContext("2d");
    const chart_order = new Chart(ctx_order, {
        type: 'line',
        data: {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
            datasets: [
                {
                    label: 'Order',
                    data: ["64", "63", "65", "38", "65", "36", 0, 0, 0, 0, 0, 0],
                    backgroundColor: 'rgb(48, 142, 224, 0.3)',
                    borderColor: 'rgb(48, 142, 224)',
                    borderWidth: 2,
                    fill: true,
                    pointBackgroundColor: 'rgb(48, 142, 224)'
                }
            ]
        },
        options: {
            scales: {
                yAxes: [{
                    gridLines: {
                        drawBorder: false,
                        zeroLineColor: "rgba(235,237,242,1)"
                    },
                    ticks: {
                        callback: function(value, index, values) {
                            if (value < 100000)
                                var money = moneyFormat(value)
                            else if (value < 1000000) {
                                var sum = parseFloat(value) / 1000
                                var money = moneyFormat(sum) + "rb"
                            } else {
                                var sum = parseFloat(value) / 1000000
                                var money = moneyFormat(sum) + "jt"
                            }

                            return money;
                        }
                    }
                }],
                xAxes: [{
                    gridLines: {
                        display:false,
                        drawBorder: false
                    },
                    ticks: {
                        padding: 5,
                        autoSkip: true,
                    }
                }]
            },
            legend: {
                display: false
            },
            tooltips: {
                callbacks: {
                    label: function(tooltipItem, data) {
                        var label = data.datasets[tooltipItem.datasetIndex].label || ""

                        return " " + label + " : " + Number(tooltipItem.yLabel).toFixed(0).replace(/./g, function(c, i, a) {
                            return i > 0 && c !== "." && (a.length - i) % 3 === 0 ? "." + c : c;
                        });
                    }
                }
            }
        }
    })
}

function setChartOrderInvoice()
{
    $("#chart-invoice-loading").hide()

    const ctx_invoice = $("#chart-invoice").get(0).getContext("2d");
    const chart_invoice = new Chart(ctx_invoice, {
        type: 'line',
        data: {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
            datasets: [
                {
                    label: 'Order',
                    data: ["64", "63", "65", "38", "65", "36", 0, 0, 0, 0, 0, 0],
                    backgroundColor: 'rgb(254, 163, 0, 0.3)',
                    borderColor: 'rgb(254, 163, 0)',
                    borderWidth: 2,
                    fill: true,
                    pointBackgroundColor: 'rgb(254, 163, 0)'
                }
            ]
        },
        options: {
            scales: {
                yAxes: [{
                    gridLines: {
                        drawBorder: false,
                        zeroLineColor: "rgba(235,237,242,1)"
                    },
                    ticks: {
                        callback: function(value, index, values) {
                            if (value < 100000)
                                var money = moneyFormat(value)
                            else if (value < 1000000) {
                                var sum = parseFloat(value) / 1000
                                var money = moneyFormat(sum) + "rb"
                            } else {
                                var sum = parseFloat(value) / 1000000
                                var money = moneyFormat(sum) + "jt"
                            }

                            return money;
                        }
                    }
                }],
                xAxes: [{
                    gridLines: {
                        display:false,
                        drawBorder: false
                    },
                    ticks: {
                        padding: 5,
                        autoSkip: true,
                    }
                }]
            },
            legend: {
                display: false
            },
            tooltips: {
                callbacks: {
                    label: function(tooltipItem, data) {
                        var label = data.datasets[tooltipItem.datasetIndex].label || ""

                        return " " + label + " : " + Number(tooltipItem.yLabel).toFixed(0).replace(/./g, function(c, i, a) {
                            return i > 0 && c !== "." && (a.length - i) % 3 === 0 ? "." + c : c;
                        });
                    }
                }
            }
        }
    })
}

function setChartOrderPayment()
{
    $("#chart-payment-loading").hide()

    const ctx_payment = $("#chart-payment").get(0).getContext("2d");
    const chart_payment = new Chart(ctx_payment, {
        type: 'line',
        data: {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
            datasets: [
                {
                    label: 'Order',
                    data: ["64", "63", "65", "38", "65", "36", 0, 0, 0, 0, 0, 0],
                    backgroundColor: 'rgb(27, 207, 180, 0.3)',
                    borderColor: 'rgb(27, 207, 180)',
                    borderWidth: 2,
                    fill: true,
                    pointBackgroundColor: 'rgb(27, 207, 180)'
                }
            ]
        },
        options: {
            scales: {
                yAxes: [{
                    gridLines: {
                        drawBorder: false,
                        zeroLineColor: "rgba(235,237,242,1)"
                    },
                    ticks: {
                        callback: function(value, index, values) {
                            if (value < 100000)
                                var money = moneyFormat(value)
                            else if (value < 1000000) {
                                var sum = parseFloat(value) / 1000
                                var money = moneyFormat(sum) + "rb"
                            } else {
                                var sum = parseFloat(value) / 1000000
                                var money = moneyFormat(sum) + "jt"
                            }

                            return money;
                        }
                    }
                }],
                xAxes: [{
                    gridLines: {
                        display:false,
                        drawBorder: false
                    },
                    ticks: {
                        padding: 5,
                        autoSkip: true,
                    }
                }]
            },
            legend: {
                display: false
            },
            tooltips: {
                callbacks: {
                    label: function(tooltipItem, data) {
                        var label = data.datasets[tooltipItem.datasetIndex].label || ""

                        return " " + label + " : " + Number(tooltipItem.yLabel).toFixed(0).replace(/./g, function(c, i, a) {
                            return i > 0 && c !== "." && (a.length - i) % 3 === 0 ? "." + c : c;
                        });
                    }
                }
            }
        }
    })
}

function setChartOrderDelivery()
{
    $("#chart-delivery-loading").hide()

    const ctx_delivery = $("#chart-delivery").get(0).getContext("2d");
    const chart_delivery = new Chart(ctx_delivery, {
        type: 'line',
        data: {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
            datasets: [
                {
                    label: 'Order',
                    data: ["64", "63", "65", "38", "65", "36", 0, 0, 0, 0, 0, 0],
                    backgroundColor: 'rgb(254, 124, 150, 0.3)',
                    borderColor: 'rgb(254, 124, 150)',
                    borderWidth: 2,
                    fill: true,
                    pointBackgroundColor: 'rgb(254, 124, 150)'
                }
            ]
        },
        options: {
            scales: {
                yAxes: [{
                    gridLines: {
                        drawBorder: false,
                        zeroLineColor: "rgba(235,237,242,1)"
                    },
                    ticks: {
                        callback: function(value, index, values) {
                            if (value < 100000)
                                var money = moneyFormat(value)
                            else if (value < 1000000) {
                                var sum = parseFloat(value) / 1000
                                var money = moneyFormat(sum) + "rb"
                            } else {
                                var sum = parseFloat(value) / 1000000
                                var money = moneyFormat(sum) + "jt"
                            }

                            return money;
                        }
                    }
                }],
                xAxes: [{
                    gridLines: {
                        display:false,
                        drawBorder: false
                    },
                    ticks: {
                        padding: 5,
                        autoSkip: true,
                    }
                }]
            },
            legend: {
                display: false
            },
            tooltips: {
                callbacks: {
                    label: function(tooltipItem, data) {
                        var label = data.datasets[tooltipItem.datasetIndex].label || ""

                        return " " + label + " : " + Number(tooltipItem.yLabel).toFixed(0).replace(/./g, function(c, i, a) {
                            return i > 0 && c !== "." && (a.length - i) % 3 === 0 ? "." + c : c;
                        });
                    }
                }
            }
        }
    })
}
</script>
@endpush