siap kelar
This commit is contained in:
aarsyah0
parent
13f0eb4d16
commit
faf884d9e1
|
|
@ -142,6 +142,228 @@
|
|||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
{{-- ==============================================
|
||||
SECTION: Confusion Matrix dengan Tailwind CSS
|
||||
============================================== --}}
|
||||
<div class="mt-8 space-y-8">
|
||||
{{-- Grid tiga kolom pada layar md ke atas, satu kolom pada layar kecil --}}
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
@foreach (['dana', 'gopay', 'shopeepay'] as $key)
|
||||
<div class="bg-white rounded-lg shadow overflow-hidden">
|
||||
{{-- Header Card --}}
|
||||
<div class="px-4 py-2 bg-gray-100 border-b">
|
||||
<h5 class="text-center text-gray-700 font-semibold capitalize">
|
||||
{{ $key }} Confusion Matrix
|
||||
</h5>
|
||||
</div>
|
||||
|
||||
{{-- Body Card --}}
|
||||
<div class="p-4">
|
||||
@php
|
||||
// Path ke CSV: storage/app/public/confusion_matrix_{key}.csv
|
||||
$confusionPath = storage_path("app/public/confusion_matrix_{$key}.csv");
|
||||
$confusionData = [];
|
||||
if (file_exists($confusionPath)) {
|
||||
// Parse setiap baris CSV menjadi array via str_getcsv
|
||||
$confusionData = array_map('str_getcsv', file($confusionPath));
|
||||
}
|
||||
@endphp
|
||||
|
||||
@if (count($confusionData) > 1)
|
||||
{{-- Wrapper agar tabel bisa di-scroll horizontal di layar kecil, dan center --}}
|
||||
<div class="flex justify-center overflow-x-auto">
|
||||
{{-- Hapus w-full, tambahkan mx-auto supaya tabel di-center --}}
|
||||
<table
|
||||
class="table-fixed border-collapse border border-gray-200 text-sm text-center mx-auto">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
{{-- Pojok kiri atas: beri label “Actual\Predicted” --}}
|
||||
<th
|
||||
class="px-2 py-1 text-left text-gray-700 font-medium whitespace-nowrap border border-gray-200">
|
||||
Actual\Predicted
|
||||
</th>
|
||||
|
||||
{{-- LOOP HANYA header Predicted (lewati elemen pertama yang kosong) --}}
|
||||
@foreach (array_slice($confusionData[0], 1) as $header)
|
||||
<th
|
||||
class="px-2 py-1 border border-gray-200 text-gray-700 font-medium break-words">
|
||||
{{ $header }}
|
||||
</th>
|
||||
@endforeach
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach (array_slice($confusionData, 1) as $rowIndex => $row)
|
||||
{{-- Striping ganjil/genap --}}
|
||||
<tr class="{{ $rowIndex % 2 === 0 ? 'bg-white' : 'bg-gray-50' }}">
|
||||
{{-- Kolom label “Actual_…” --}}
|
||||
<th
|
||||
class="px-2 py-1 text-left text-gray-700 font-medium whitespace-nowrap border border-gray-200">
|
||||
{{ $row[0] }}
|
||||
</th>
|
||||
|
||||
{{-- Loop nilai prediksi --}}
|
||||
@foreach (array_slice($row, 1) as $colIndex => $cell)
|
||||
@php
|
||||
// Perhatikan bahwa $rowIndex mulai dari 0 (baris pertama di body),
|
||||
// tapi kolom diagonal-nya juga sama, karena array_slice dimulai dari row ke-1.
|
||||
$isDiagonal = $rowIndex === $colIndex;
|
||||
@endphp
|
||||
<td
|
||||
class="px-2 py-1 border border-gray-200
|
||||
{{ $isDiagonal ? 'bg-gray-800 text-white font-semibold' : 'text-gray-700' }}">
|
||||
{{ $cell }}
|
||||
</td>
|
||||
@endforeach
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@else
|
||||
<div class="text-center text-sm text-gray-500 py-4">
|
||||
File <code
|
||||
class="bg-gray-100 px-1 py-0.5 rounded">confusion_matrix_{{ $key }}.csv</code>
|
||||
tidak ditemukan atau kosong.
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
{{-- ================================================================
|
||||
SECTION: Metrics Chart (Perbandingan Precision, F1, Accuracy)
|
||||
================================================================ --}}
|
||||
@php
|
||||
// Siapkan array untuk ringkasan metrik tiap e‐wallet
|
||||
$metricsSummary = [
|
||||
'dana' => ['precision' => 0, 'f1' => 0, 'accuracy' => 0],
|
||||
'gopay' => ['precision' => 0, 'f1' => 0, 'accuracy' => 0],
|
||||
'shopeepay' => ['precision' => 0, 'f1' => 0, 'accuracy' => 0],
|
||||
];
|
||||
|
||||
foreach (array_keys($metricsSummary) as $key) {
|
||||
// 1) Baca evaluation_metrics_full{key}.csv
|
||||
$metricsPath = storage_path("app/public/evaluation_metrics_full{$key}.csv");
|
||||
$metricsData = [];
|
||||
if (file_exists($metricsPath)) {
|
||||
$metricsData = array_map('str_getcsv', file($metricsPath));
|
||||
}
|
||||
|
||||
// Hitung Macro‐Precision & Macro‐F1 (rata-rata precision/f1 tiap kelas)
|
||||
$sumPrecision = 0.0;
|
||||
$sumF1 = 0.0;
|
||||
$nClasses = 0;
|
||||
if (count($metricsData) > 1) {
|
||||
// Baris pertama header: [,precision,recall,f1‐score,support]
|
||||
foreach (array_slice($metricsData, 1) as $row) {
|
||||
$sumPrecision += (float) $row[1]; // precision
|
||||
$sumF1 += (float) $row[3]; // f1‐score
|
||||
$nClasses++;
|
||||
}
|
||||
if ($nClasses > 0) {
|
||||
$metricsSummary[$key]['precision'] = round($sumPrecision / $nClasses, 3);
|
||||
$metricsSummary[$key]['f1'] = round($sumF1 / $nClasses, 3);
|
||||
}
|
||||
}
|
||||
|
||||
// 2) Hitung Accuracy dari confusion_matrix_{key}.csv
|
||||
$confusionPath = storage_path("app/public/confusion_matrix_{$key}.csv");
|
||||
$confusionData = [];
|
||||
if (file_exists($confusionPath)) {
|
||||
$confusionData = array_map('str_getcsv', file($confusionPath));
|
||||
}
|
||||
|
||||
if (count($confusionData) > 1) {
|
||||
$totalAll = 0;
|
||||
$sumDiagonal = 0;
|
||||
// Hitung total sampel
|
||||
foreach (array_slice($confusionData, 1) as $r) {
|
||||
for ($c = 1; $c < count($r); $c++) {
|
||||
$totalAll += (int) $r[$c];
|
||||
}
|
||||
}
|
||||
// Jumlah diagonal (misal 3 kelas → sel [1][1], [2][2], [3][3])
|
||||
$sumDiagonal += (int) $confusionData[1][1];
|
||||
$sumDiagonal += (int) $confusionData[2][2];
|
||||
$sumDiagonal += (int) $confusionData[3][3];
|
||||
|
||||
if ($totalAll > 0) {
|
||||
$metricsSummary[$key]['accuracy'] = round($sumDiagonal / $totalAll, 3);
|
||||
}
|
||||
}
|
||||
}
|
||||
@endphp
|
||||
|
||||
<div class="row mt-4 mb-5">
|
||||
<div class="col-12">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-header">
|
||||
<h6 class="mb-0">Perbandingan Metode Prediksi: Precision, F1‐Score, dan Akurasi</h6>
|
||||
</div>
|
||||
<div class="card-body p-3" style="height:350px;">
|
||||
<canvas id="metricsChart" width="800" height="350"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{-- ================================================================
|
||||
SECTION: Top Features (Tiap e‐wallet dalam satu card terpisah)
|
||||
================================================================ --}}
|
||||
<div class="row mt-5">
|
||||
@foreach (['dana', 'gopay', 'shopeepay'] as $key)
|
||||
@php
|
||||
// Path ke CSV: storage/app/public/top_features_{key}.csv
|
||||
$featuresPath = storage_path("app/public/top_features_{$key}.csv");
|
||||
$featuresData = [];
|
||||
if (file_exists($featuresPath)) {
|
||||
$featuresData = array_map('str_getcsv', file($featuresPath));
|
||||
}
|
||||
@endphp
|
||||
|
||||
<div class="col-lg-4 col-md-6 mb-4">
|
||||
<div class="card bg-white border-radius-lg shadow-lg h-100">
|
||||
{{-- Header Kartu dengan Gradient Soft UI --}}
|
||||
<div class="card-header bg-gradient-secondary border-radius-lg-top text-center py-2">
|
||||
<h6 class="mb-0 text-uppercase text-white font-weight-bold">
|
||||
{{ $key }} Top Features
|
||||
</h6>
|
||||
</div>
|
||||
|
||||
{{-- Body Kartu --}}
|
||||
<div class="card-body p-0">
|
||||
@if (count($featuresData) > 1)
|
||||
<ul class="list-group list-group-flush">
|
||||
@foreach (array_slice($featuresData, 1) as $row)
|
||||
{{-- Kolom pertama = nama fitur, kolom kedua = skor --}}
|
||||
<li
|
||||
class="list-group-item d-flex justify-content-between align-items-center px-3 py-2">
|
||||
<span class="font-weight-medium text-dark">
|
||||
{{ $row[0] }}
|
||||
</span>
|
||||
<span class="badge badge-sm bg-gradient-secondary">
|
||||
{{ $row[1] }}
|
||||
</span>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
@else
|
||||
<div class="alert alert-warning text-center mb-0 py-3 small rounded-bottom-lg">
|
||||
File <code>top_features_{{ $key }}.csv</code> tidak ditemukan atau kosong.
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
{{-- ======================================================================== --}}
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
|
|
@ -205,28 +427,28 @@
|
|||
});
|
||||
|
||||
// Pie
|
||||
const pie = new Chart('chart-pie', {
|
||||
type: 'pie',
|
||||
data: {
|
||||
labels: ['Positif', 'Netral', 'Negatif'],
|
||||
datasets: [{
|
||||
data: ['positif', 'netral', 'negatif'].map(s => counts.all[s]),
|
||||
backgroundColor: COLORS,
|
||||
borderColor: BORDERS,
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false
|
||||
}
|
||||
});
|
||||
// const pie = new Chart('chart-pie', {
|
||||
// type: 'pie',
|
||||
// data: {
|
||||
// labels: ['Positif', 'Netral', 'Negatif'],
|
||||
// datasets: [{
|
||||
// data: ['positif', 'netral', 'negatif'].map(s => counts.all[s]),
|
||||
// backgroundColor: COLORS,
|
||||
// borderColor: BORDERS,
|
||||
// borderWidth: 1
|
||||
// }]
|
||||
// },
|
||||
// options: {
|
||||
// responsive: true,
|
||||
// maintainAspectRatio: false
|
||||
// }
|
||||
// });
|
||||
|
||||
document.getElementById('walletFilterPie').addEventListener('change', e => {
|
||||
pie.data.datasets[0].data = ['positif', 'netral', 'negatif'].map(s => counts[e.target.value]
|
||||
[s]);
|
||||
pie.update();
|
||||
});
|
||||
// document.getElementById('walletFilterPie').addEventListener('change', e => {
|
||||
// pie.data.datasets[0].data = ['positif', 'netral', 'negatif'].map(s => counts[e.target.value]
|
||||
// [s]);
|
||||
// pie.update();
|
||||
// });
|
||||
|
||||
const sourceSel = document.getElementById('sourceSelect');
|
||||
const sentiments = ['positif', 'netral', 'negatif'];
|
||||
|
|
@ -255,4 +477,177 @@
|
|||
sentiments.forEach(drawWC);
|
||||
});
|
||||
</script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Ambil data ringkasan metrik dari PHP ke JS
|
||||
const ewMetrics = @json($metricsSummary);
|
||||
const labels = ['Dana', 'GoPay', 'ShopeePay'];
|
||||
|
||||
// Siapkan data Precision, F1, dan Accuracy dalam urutan yang sama
|
||||
const precisionData = labels.map(name => {
|
||||
const key = name.toLowerCase();
|
||||
return ewMetrics[key].precision;
|
||||
});
|
||||
const f1Data = labels.map(name => {
|
||||
const key = name.toLowerCase();
|
||||
return ewMetrics[key].f1;
|
||||
});
|
||||
const accuracyData = labels.map(name => {
|
||||
const key = name.toLowerCase();
|
||||
return ewMetrics[key].accuracy;
|
||||
});
|
||||
|
||||
// Buat bar chart dengan tiga kelompok dataset
|
||||
new Chart(document.getElementById('metricsChart'), {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: 'Precision (Macro)',
|
||||
data: precisionData,
|
||||
backgroundColor: 'rgba(54, 162, 235, 0.6)',
|
||||
borderColor: 'rgba(54, 162, 235, 1)',
|
||||
borderWidth: 1
|
||||
},
|
||||
{
|
||||
label: 'F1‐Score (Macro)',
|
||||
data: f1Data,
|
||||
backgroundColor: 'rgba(255, 206, 86, 0.6)',
|
||||
borderColor: 'rgba(255, 206, 86, 1)',
|
||||
borderWidth: 1
|
||||
},
|
||||
{
|
||||
label: 'Accuracy',
|
||||
data: accuracyData,
|
||||
backgroundColor: 'rgba(75, 192, 192, 0.6)',
|
||||
borderColor: 'rgba(75, 192, 192, 1)',
|
||||
borderWidth: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
callback: value => (value * 100).toFixed(0) +
|
||||
'%' // Menampilkan dalam persen
|
||||
},
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Nilai (%)'
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
barPercentage: 0.6,
|
||||
categoryPercentage: 0.6
|
||||
}]
|
||||
},
|
||||
tooltips: {
|
||||
callbacks: {
|
||||
label: function(tooltipItem, data) {
|
||||
let label = data.datasets[tooltipItem.datasetIndex].label || '';
|
||||
let val = tooltipItem.yLabel;
|
||||
return label + ': ' + (val * 100).toFixed(1) + '%';
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const counts = @json($counts);
|
||||
|
||||
// Fungsi menghitung persentase
|
||||
function getPiePercent(key) {
|
||||
const d = counts[key];
|
||||
const total = (d.positif + d.netral + d.negatif) || 1;
|
||||
return [
|
||||
((d.positif / total) * 100).toFixed(2),
|
||||
((d.netral / total) * 100).toFixed(2),
|
||||
((d.negatif / total) * 100).toFixed(2)
|
||||
];
|
||||
}
|
||||
|
||||
const COLORS = [
|
||||
'rgba(75,192,192,0.6)',
|
||||
'rgba(54,162,235,0.6)',
|
||||
'rgba(255,206,86,0.6)'
|
||||
];
|
||||
const BORDERS = [
|
||||
'rgba(75,192,192,1)',
|
||||
'rgba(54,162,235,1)',
|
||||
'rgba(255,206,86,1)'
|
||||
];
|
||||
|
||||
// Inisialisasi Pie Chart
|
||||
const pie = new Chart('chart-pie', {
|
||||
type: 'pie',
|
||||
data: {
|
||||
labels: ['Positif', 'Netral', 'Negatif'],
|
||||
datasets: [{
|
||||
data: getPiePercent('all'),
|
||||
backgroundColor: COLORS,
|
||||
borderColor: BORDERS,
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
datalabels: {
|
||||
formatter: (value) => value + '%',
|
||||
color: '#ffffff',
|
||||
font: {
|
||||
weight: 'bold',
|
||||
size: 14
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: function(context) {
|
||||
const label = context.label || '';
|
||||
const valStr = context.formattedValue || context.raw;
|
||||
return `${label}: ${valStr}%`;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: [ChartDataLabels]
|
||||
});
|
||||
|
||||
// Update pie chart & counter ketika dropdown dipilih
|
||||
const updateAll = (key) => {
|
||||
// Update data pie
|
||||
pie.data.datasets[0].data = getPiePercent(key);
|
||||
pie.update();
|
||||
|
||||
// Update counter
|
||||
['positif', 'netral', 'negatif'].forEach(s => {
|
||||
document.getElementById(s + 'Count').textContent = counts[key][s];
|
||||
});
|
||||
};
|
||||
|
||||
// Event listener untuk filter Pie
|
||||
document.getElementById('walletFilterPie').addEventListener('change', e => {
|
||||
updateAll(e.target.value);
|
||||
});
|
||||
|
||||
// Set default awal
|
||||
updateAll('all');
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
|
|
|
|||
Loading…
Reference in New Issue