@extends('crudbooster::admin_template')
@push('top')

@endpush
@section('content')
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js" integrity="sha512-vBmx0N/uQOXznm/Nbkp7h0P1RfLSj0HQrFSzV8m7rOGyj30fYAOKHYvCNez+yM8IrfnW0TCodDEjRqf6fodf/Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
    .barchart #barChart{
        display: block;
        /* width: 400px !important; */
        height: 500px !important;
    }
</style>
<div class="barchart" style="height: 300px !importent;margin: 10px">
    <canvas id="barChart"></canvas>
</div>

{{-- @dd($data['dayTime']) --}}
<script>
    $(function(){
        var datas = '{{$data["dayTime"]}}'.replace(/&quot;/g, "'").replace(/[\])}[{(]/g, '');
        var dayName = '{{$data["dayName"]}}'.replace(/&quot;/g, "'").replace(/[\])}[{(]/g, '');

        var barCanvas = $('#barChart')
        var barchart = new Chart(barCanvas,{
            type:'line',
            data:{
                labels:dayName.split("','"),
                datasets:[
                    {
                        label:'User activity track for last 7 days',
                        data:datas.split("','"),
                        backgroundColor:['red','orange','yellow','green','blue','indigo','violet'],
                        borderColor: "blue",
                        borderWidth: 1,
                        hoverBackgroundColor: "#02a499",
                        hoverBorderColor: "#02a499",
                        fill: 'false',
                    }
                ]
            },
            options:{
                scales: {
                    yAxes: [{
                        type: 'time',
                        time: {
                            parser: 'H:mm',
                            unit: 'hour',
                            stepSize: 1,
                            displayFormats: {
                                hour: 'H:m'
                            },
                            tooltipFormat: 'H:mm'
                        },
                        ticks: {
                            min: '0:00',
                            max: '23:00',
                        }
                    }],
                    xAxes: [{

                    }]
                }
            }
        })
    })
</script>
@endsection