@extends('layouts.template')

@section('content')
<div class="row">
    <h3>Dashboard</h3>
</div>
<div class="row">
    <div class="col-xl-6">
        <div class="card">
            <div class="card-body pt-10">
                <div class="row">
                    <div class="row">
                        <h5>Turn Over Sales Force</h5>
                        <div class="card-body pt-10">
                            <canvas id="chartKPIMonthly" height="170px"></canvas>
                        </div>
                    </div>  
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<script type="text/javascript">
    var chartKPIMontly = new Chart(document.getElementById("chartKPIMonthly"), {
      type: 'bar',
      data: {
        labels: ["SALES MD", "SUPERVISOR", "MARKET DATA ANALYST", "LUB CONSULTANT", "TIM PUSAT"],
        datasets: [{
            label: "Plan",
            borderColor: "#0095E8",
            backgroundColor: "#0095E8",
            data: [65, 59, 80, 81, 56]
        }, {
            label: "Aktual",
            borderColor: "#F79E1B",
            backgroundColor: "#F79E1B",
            data: [28, 48, 40, 19, 86]
        }
        ]
      },
      options: {
            plugins:{
                datalabels:{
                    formatter:(value, context)=>{
                        return Math.round(value);
                    },
                    color:'#446A46',
                    anchor:'end',
                    align:'top'
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                },

                x: {
                    grid: {
                      display: false,
                    },

                    ticks :{
                        maxTicksLimit:75
                    }
                },

            }
        },
        plugins:[ChartDataLabels]
    });
</script>
@endsection