abeljatayu
/
MIF_E31210287
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
MIF_E31210287/resources/views/user/performa.blade.php

322 lines
10 KiB
PHP
Raw Blame History

@extends('user.layout')
@section('title', 'Performa')
@section('content')
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button @class(['nav-link','active'=>$data['test']['total']>0]) id="pills-testing-tab"
data-bs-toggle="pill" data-bs-target="#pills-testing"
type="button" role="tab" aria-controls="pills-testing"
@if($data['test']['total']>0) aria-selected="true" @else aria-selected="false" disabled @endif >
Data Testing
</button>
</li>
<li class="nav-item" role="presentation">
<button @class(['nav-link','active'=>$data['test']['total']===0]) id="pills-training-tab"
data-bs-toggle="pill" data-bs-target="#pills-training" type="button" role="tab"
aria-controls="pills-training" @if($data['test']['total']===0) aria-selected="true" @else
aria-selected="false" @endif @if($data['train']['total']===0) disabled @endif >
Data Training
</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade @if($data['test']['total']>0) show active @endif " id="pills-testing"
role="tabpanel" aria-labelledby="pills-testing-tab" tabindex="0">
<div class="card mb-3">
<div class="card-header"><b>Performa Klasifikasi Data Testing</b></div>
<div class="card-body">
<div class="mb-5">
<table class="table table-bordered caption-top">
<caption>Hasil Prediksi</caption>
<thead class="thead-light">
<tr>
<th>#</th>
<th colspan="3">Aktual</th>
</tr>
<tr>
<th>Prediksi</th>
<th>{{$stat[1]}}</th>
<th>{{$stat[0]}}</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<th>{{$stat[1]}}</th>
<td class="table-success">{{$data['test']['tp']}}</td>
<td class="table-danger">{{$data['test']['fp']}}</td>
<td>{{$data['test']['tp'] + $data['test']['fp']}}</td>
</tr>
<tr>
<th>{{$stat[0]}}</th>
<td class="table-danger">{{$data['test']['fn']}}</td>
<td class="table-success">{{$data['test']['tn']}}</td>
<td>{{$data['test']['fn'] + $data['test']['tn']}}</td>
</tr>
<tr>
<th>Total</th>
<td>{{$data['test']['tp'] + $data['test']['fn']}}</td>
<td>{{$data['test']['fp'] + $data['test']['tn']}}</td>
<td>{{$data['test']['total']}}</td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<div class="col-md-6">
<div id="predict-actual-test"></div>
</div>
<div class="col-md-6">
<p>Hasil Akhir</p>
<div class="progress-wrapper">
<div class="progress-info progress-xl">
<div class="progress-label">
<span class="text-info">Akurasi</span>
</div>
<div class="progress-percentage">
<span>{{round($performa['test']['accuracy'], 2)}}%</span>
</div>
</div>
<div class="progress progress-xl">
<div class="progress-bar bg-info" role="progressbar"
style="width: {{round($performa['test']['accuracy'], 2)}}%;"
aria-valuenow="{{round($performa['test']['accuracy'], 2)}}" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</div>
<div class="progress-wrapper">
<div class="progress-info progress-xl">
<div class="progress-label">
<span class="text-warning">Presisi</span>
</div>
<div class="progress-percentage">
<span>{{round($performa['test']['precision'], 2)}}%</span>
</div>
</div>
<div class="progress progress-xl">
<div class="progress-bar bg-warning" role="progressbar"
style="width: {{round($performa['test']['precision'], 2)}}%;"
aria-valuenow="{{round($performa['test']['precision'], 2)}}" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</div>
<div class="progress-wrapper">
<div class="progress-info progress-xl">
<div class="progress-label">
<span class="text-danger">Recall</span>
</div>
<div class="progress-percentage">
<span>{{round($performa['test']['recall'], 2)}}%</span>
</div>
</div>
<div class="progress progress-xl">
<div class="progress-bar bg-danger" role="progressbar"
style="width: {{round($performa['test']['recall'], 2)}}%;"
aria-valuenow="{{round($performa['test']['recall'], 2)}}" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</div>
<div class="progress-wrapper">
<div class="progress-info progress-xl">
<div class="progress-label">
<span class="text-success">Skor F1</span>
</div>
<div class="progress-percentage">
<span>{{round($performa['test']['f1'],2)}}%</span>
</div>
</div>
<div class="progress progress-xl">
<div class="progress-bar bg-success" role="progressbar"
style="width: {{round($performa['test']['f1'],2)}}%;"
aria-valuenow="{{round($performa['test']['f1'],2)}}" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade @if($data['test']['total']===0) show active @endif " id="pills-training"
role="tabpanel" aria-labelledby="pills-training-tab" tabindex="0">
<div class="card mb-3">
<div class="card-header"><b>Performa Klasifikasi Data Training</b></div>
<div class="card-body">
<div class="mb-5">
<table class="table table-bordered caption-top">
<caption>Hasil Prediksi</caption>
<thead class="thead-light">
<tr>
<th>#</th>
<th colspan="3">Aktual</th>
</tr>
<tr>
<th>Prediksi</th>
<th>{{$stat[1]}}</th>
<th>{{$stat[0]}}</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<th>{{$stat[1]}}</th>
<td class="table-success">{{$data['train']['tp']}}</td>
<td class="table-danger">{{$data['train']['fp']}}</td>
<td>{{$data['train']['tp'] + $data['train']['fp']}}</td>
</tr>
<tr>
<th>{{$stat[0]}}</th>
<td class="table-danger">{{$data['train']['fn']}}</td>
<td class="table-success">{{$data['train']['tn']}}</td>
<td>{{$data['train']['fn'] + $data['train']['tn']}}</td>
</tr>
<tr>
<th>Total</th>
<td>{{$data['train']['tp'] + $data['train']['fn']}}</td>
<td>{{$data['train']['fp'] + $data['train']['tn']}}</td>
<td>{{$data['train']['total']}}</td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<div class="col-md-6">
<div id="predict-actual-train"></div>
</div>
<div class="col-md-6">
<p>Hasil Akhir</p>
<div class="progress-wrapper">
<div class="progress-info progress-xl">
<div class="progress-label">
<span class="text-info">Akurasi</span>
</div>
<div class="progress-percentage">
<span>{{round($performa['train']['accuracy'], 2)}}%</span>
</div>
</div>
<div class="progress progress-xl">
<div class="progress-bar bg-info" role="progressbar"
style="width: {{round($performa['train']['accuracy'], 2)}}%;"
aria-valuenow="{{round($performa['train']['accuracy'], 2)}}" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</div>
<div class="progress-wrapper">
<div class="progress-info progress-xl">
<div class="progress-label">
<span class="text-warning">Presisi</span>
</div>
<div class="progress-percentage">
<span>{{round($performa['train']['precision'], 2)}}%</span>
</div>
</div>
<div class="progress progress-xl">
<div class="progress-bar bg-warning" role="progressbar"
style="width: {{round($performa['train']['precision'], 2)}}%;"
aria-valuenow="{{round($performa['train']['precision'], 2)}}" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</div>
<div class="progress-wrapper">
<div class="progress-info progress-xl">
<div class="progress-label">
<span class="text-danger">Recall</span>
</div>
<div class="progress-percentage">
<span>{{round($performa['train']['recall'], 2)}}%</span>
</div>
</div>
<div class="progress progress-xl">
<div class="progress-bar bg-danger" role="progressbar"
style="width: {{round($performa['train']['recall'], 2)}}%;"
aria-valuenow="{{round($performa['train']['recall'], 2)}}" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</div>
<div class="progress-wrapper">
<div class="progress-info progress-xl">
<div class="progress-label">
<span class="text-success">Skor F1</span>
</div>
<div class="progress-percentage">
<span>{{round($performa['train']['f1'],2)}}%</span>
</div>
</div>
<div class="progress progress-xl">
<div class="progress-bar bg-success" role="progressbar"
style="width: {{round($performa['train']['f1'],2)}}%;"
aria-valuenow="{{round($performa['train']['f1'],2)}}" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
@section('js')
<script type="text/javascript">
const testBarOptions = {
series: [{
name: "Sesuai (Prediksi)",
data: [{{$data['test']['tp']}}, {{$data['test']['fp']}}]
}, {
name: "Tidak Sesuai (Prediksi)",
data: [{{$data['test']['fn']}}, {{$data['test']['tn']}}]
}],
chart: {
type: "bar"
},
dataLabels: {
enabled: false
},
tooltip: {
theme: 'dark'
},
xaxis: {
categories: ["Sesuai (Aktual)", "Tidak Sesuai (Aktual)"]
},
title: {
text: 'Hasil Prediksi'
}
};
const trainBarOptions = {
series: [{
name: "Sesuai (Prediksi)",
data: [{{$data['train']['tp']}}, {{$data['train']['fp']}}]
}, {
name: "Tidak Sesuai (Prediksi)",
data: [{{$data['train']['fn']}}, {{$data['train']['tn']}}]
}],
chart: {
type: "bar"
},
dataLabels: {
enabled: false
},
tooltip: {
theme: 'dark'
},
xaxis: {
categories: ["Sesuai (Aktual)", "Tidak Sesuai (Aktual)"]
},
title: {
text: 'Hasil Prediksi'
}
};
const barTest = new ApexCharts(
document.getElementById("predict-actual-test"), testBarOptions
), barTrain=new ApexCharts(
document.getElementById("predict-actual-train"), trainBarOptions
);
@if($data['test']['total']>0)
barTest.render();
@endif
@if($data['train']['total']>0)
barTrain.render();
@endif
</script>
@endsection
Reference in New Issue View Git Blame Copy Permalink