CKB/resources/views/dashboard_data.blade.php

<!--begin: Datatable -->
<style>
    .table-responsive {
        height: 60vh;
        overflow: auto;
    }

    .nav-link-tab {
        font-weight: bold !important;
    }

    .nav-link-tab.active {
        font-weight: normal !important;
    }

    .dataTables_wrapper .dataTable td, .dataTables_wrapper .dataTable th {
        background: #fff;
    }
</style>

<ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
        <a class="nav-link nav-link-tab active btn-primary text-light" data-toggle="tab" href="#kt_tabs_1_2"><i class="flaticon2-pie-chart-4 text-light"></i> Diagram</a>
    </li>
    <li class="nav-item">
        <a class="nav-link nav-link-tab btn-primary text-light" data-toggle="tab" href="#" data-target="#kt_tabs_1_1"><i class="flaticon-squares-1 text-light"></i> Tabel</a>
    </li>
</ul>                    

<div class="tab-content">
    <div class="tab-pane active" id="kt_tabs_1_2" role="tabpanel">
        <div>
            <canvas id="dealer-chart"></canvas>
        </div>
    </div>
    <div class="tab-pane" id="kt_tabs_1_1" role="tabpanel">
        <div class="table-responsive" id="table">
            <table class="table" id="kt_table">
                <thead>
                    <tr>
                        {{-- <th rowspan="2" style="width: 18%; z-index: 99;">Dealer</th> --}}
                        @if ($theads)
                        <th colspan="{{ count($theads) }}" class="text-center">Pekerjaan</th>
                        @endif
                        <th rowspan="2" style="width: 18%; z-index: 99;">Aksi</th>
                    </tr>
                    @if ($theads)
                    <tr>
                        @foreach ($theads as $thead)
                            <th>{{ $thead }}</th>
                        @endforeach
                    </tr>
                    @endif
                </thead>
                <tbody> 
                    @foreach ($work_trx as $dealer_id => $trx)
                    <tr>
                        {{-- <td>{{ $trx['dealer_name'] }}</td> --}}
                        @foreach ($trx as $item)
                        <td>{{ $item }}</td>
                        @endforeach
                        <td>
                            {{-- <div class="btn btn-danger">ASD</div> --}}
                            <a href="{{ route('dealer_recap', ["id" => $dealer_id, "month"  => $month, "year" => $year]) }}" class="btn btn-info btn-sm">Detail</a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
                <tfoot>
                    <tr>
                        <th style="background: #C5CEFF !important;">
                            <p>Total Bulan Ini</p><hr>
                            <p>Total Bulan Kemarin</p>
                        </th>
                        @foreach ($totals as $total)
                        <th style="background: #C5CEFF !important;">
                            <p>{{ $total['now'] }} @if($total['now'] > $total['prev']) <i class="ml-3 fa fa-caret-up text-success"></i> @else <i class="ml-3 fa fa-caret-down text-danger"></i> @endif</p><hr>
                            <p>{{ $total['prev'] }}</p>    
                        </th>
                        @endforeach
                        <th style="background: #C5CEFF !important;"></th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>

<script>
    function random_rgba(alpha) {
        var o = Math.round, r = Math.random, s = 255;
        return 'rgba(' + o(r()*s) + ',' + o(r()*s) + ',' + o(r()*s) + ','+ alpha +')';
    }

    let labels = JSON.parse('{{ $dealer_names }}'.replace(/(&quot\;)/g,"\""));
    let labels2 = []
    labels.forEach(function(label) {
        if (/\s/.test(label)) {
            labels2.push(label.split(" "))
        }else{
            labels2.push(label)
        } 
    })

    const trx_data = JSON.parse('{{ $dealer_trx }}'.replace(/(&quot\;)/g,"\""));
    let trxs = []
    trx_data.forEach(trx => {
        let data = {
            label : trx['work_name'],
            data: trx['qty'],
            fill: false,
            backgroundColor: random_rgba(0.2),
            borderColor: random_rgba(1),
            borderWidth: 1,
            barPercentage: 0.5,
            categoryPercentage: 1
        }
        
        trxs.push(data)
    });
    
    const data = {
        labels: labels2,
        datasets: trxs
    };

    if(trxs.length && labels2.length) {
        new Chart($("#dealer-chart"), {
            type: 'bar',
            data: data,
            plugins: [ChartDataLabels],
            options: {
                indexAxis: 'y',
                maintainAspectRatio: false, 
                scales: {
                    x: {
                        position: 'top'
                    }
                },
                plugins: {
                    legend: {
                        display: true,
                        labels: {
                            color: 'rgb(255, 99, 132)'
                        },
                        position: 'top'
                    }
                }
            }
        });
        $("#dealer-chart").parent().height($("#dealer-chart").parent().height() + trxs.length * 800)
    }else{
        $("#dealer-chart").parent().append(`
            <div class="alert" role="alert">
                <div class="alert-text">
                    <h4 class="alert-heading">Data Kosong!</h4>
                    <p>Belum ada data pekerjaan masuk untuk bulan  
                        @if($month == '01')
                            januari
                        @elseif($month == '02')
                            februari
                        @elseif($month == '03')
                            maret
                        @elseif($month == '04')
                            april
                        @elseif($month == '05')
                            mei
                        @elseif($month == '06')
                            juni
                        @elseif($month == '07')
                            juli
                        @elseif($month == '08')
                            agustus
                        @elseif($month == '09')
                            september
                        @elseif($month == '10')
                            oktober
                        @elseif($month == '11')
                            november
                        @elseif($month == '12')
                            desember
                        @endif
                    </p>
                    <hr>
                </div>
            </div>
        `)
        $("#dealer-chart").parent().css('height', '100%')
        $("#dealer-chart").remove()
    }
    
    $(".nav-link-tab.active").removeClass('btn-primary')
    $(".nav-link-tab.active").removeClass('text-light')
    $(".nav-link-tab.active i").toggleClass('text-light')
    $(".nav-link-tab").parent().click(function() {
        $(".nav-link-tab").toggleClass('btn-primary')
        $(".nav-link-tab").toggleClass('text-light')
        $(".nav-link-tab i").toggleClass('text-light')
    })

    $("#kt_table").DataTable({
        paging: false,
        fixedColumns:   {
            left: 1,
            right: 1
        }
    })
</script>