first initial

resources/views/back/report/transaction_sa_data.blade.php

@@ -0,0 +1,133 @@
+<div class="tab-content">
+    <div class="tab-pane active" id="kt_tabs_1_2" role="tabpanel">
+        <canvas id="sa-chart" ></canvas>
+    </div>
+    <div class="tab-pane" id="kt_tabs_1_1" role="tabpanel">
+        <div class="table-responsive">
+            <!--begin: Datatable -->
+            <table class="table table-striped table-bordered table-hover table-checkable" id="kt_table">
+                <thead>
+                    <tr>
+                        <th rowspan="2">No</th>
+                        <th colspan="{{ count($theads) }}" class="text-center">Pekerjaan</th>
+                    </tr>
+                    <tr>
+                        @foreach ($theads as $thead)
+                            <th>{{ $thead }}</th>
+                        @endforeach
+                    </tr>
+                </thead>
+                <tbody>
+                    @foreach ($work_trx as $sa_id => $trx)
+                        <tr>
+                            <td>{{ $loop->iteration }}</td>
+                            @foreach ($trx as $item)
+                            <td>{{ $item }}</td>
+                            @endforeach
+                        </tr>
+                    @endforeach
+                </tbody>
+            </table>
+            <!--end: Datatable -->
+        </div>
+    </div>
+</div>
+
+<script>
+    $.ajaxSetup({
+        headers: {
+            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
+        }
+    });
+
+    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('{{ $sa_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('{{ $sa_trx }}'.replace(/(&quot\;)/g,"\""));
+    let height = trx_data.length * 20;
+    let chart_height = 0;
+    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,
+            skipNull: true
+        }
+        chart_height += height
+        trxs.push(data)
+    });
+    
+    const data = {
+        labels: labels2,
+        datasets: trxs
+    };
+
+    if(labels2.length && trxs.length) {
+        new Chart($("#sa-chart"), {
+            type: 'bar',
+            data: data,
+            plugins: [ChartDataLabels],
+            options: {
+                indexAxis: 'y',
+                maintainAspectRatio: false,
+                scales: {
+                    x: {
+                        position: 'top',
+                        beginAtZero: true
+                    }
+                },
+                plugins: {
+                    legend: {
+                        display: true,
+                        labels: {
+                            color: 'rgb(255, 99, 132)'
+                        },
+                        position: 'top'
+                    }
+                },
+            }
+        });
+        $("#sa-chart").parent().height($("#sa-chart").parent().height() + chart_height)
+    }else{
+        $("#sa-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</p>
+                    <hr>
+                </div>
+            </div>
+        `)
+        $("#sa-chart").parent().css('height', '100%')
+        $("#sa-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();
+</script>