solocla/reportify_mncl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Claudio
2025-01-27 15:52:54 +01:00
parent 1e1e078489
commit 6752d3515f
8 changed files with 659 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/userarea/ratego/ratego.php
+124 -21
View File
@@ -32,6 +32,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.7/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.7/js/buttons.print.min.js"></script>
<link href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css" rel="stylesheet">
</head>
@@ -46,14 +47,22 @@
<div class="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="page-title-box">
<h4 class="page-title">Supplier Ratings</h4>
<br>
<div class="row mb-4">
<div class="col-md-12">
<div class="card p-4">
<div class="rating-box">
<h3 class="m-0">
RATE&GO
</h3>
</div>
</div>
</div>
</div>
<!-- Button for Rating Calculation -->
<div class="row">
<div class="col-md-12 text-right">
@@ -64,6 +73,24 @@
</div>
<!-- Chart Section -->
<div class="row">
<div class="col-md-12 text-right">
<label for="rating-filter">Filter by Rating:</label>
<select id="rating-filter" class="form-control w-auto d-inline-block">
<option value="green">Green (80-100)</option>
<option value="orange">Orange (50-79)</option>
<option value="red">Red (0-49)</option>
<option value="all">All</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="supplier-rating-chart"></div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="supplier-rating-chart"></div>
@@ -105,11 +132,17 @@
<script>
$(document).ready(function() {
// Funzione per aggiornare il grafico
function updateChart(response) {
const suppliers = response.map(s => s.name);
const ratings = response.map(s => s.rating);
const colors = response.map(s => s.color);
let chart; // Variabile per memorizzare l'istanza del grafico
// Funzione per generare il grafico
function renderChart(filteredData) {
const suppliers = filteredData.map(s => s.name);
const ratings = filteredData.map(s => s.rating);
const colors = filteredData.map(s => {
if (s.rating >= 80) return '#28a745'; // Green
if (s.rating >= 50) return '#ffc107'; // Orange
return '#dc3545'; // Red
});
const options = {
series: [{
@@ -117,26 +150,92 @@
}],
chart: {
type: 'bar',
height: 400
height: Math.max(filteredData.length * 18, 300), // Altezza dinamica
toolbar: {
show: true
},
animations: {
enabled: true, // Abilita animazioni fluide
easing: 'easeinout',
speed: 800
}
},
plotOptions: {
bar: {
distributed: true,
horizontal: true,
barHeight: '80%', // Altezza barra
dataLabels: {
position: 'inside' // Valori all'interno delle barre
}
}
},
colors: colors,
dataLabels: {
enabled: true,
style: {
colors: ['#000'], // Colore nero per i valori
fontWeight: 'bold'
},
formatter: function(val) {
return val; // Mostra il valore direttamente
}
},
xaxis: {
categories: suppliers
categories: suppliers,
labels: {
style: {
fontSize: '12px'
}
}
},
legend: {
show: false
},
title: {
text: 'Supplier Ratings',
text: 'Supplier Ratings (Filtered)',
align: 'center'
}
};
// Renderizza il grafico
const chart = new ApexCharts(
document.querySelector("#supplier-rating-chart"),
options
);
// Distruggi il grafico precedente, se esiste
if (chart) {
chart.destroy();
}
// Crea un nuovo grafico
chart = new ApexCharts(document.querySelector("#supplier-rating-chart"), options);
chart.render();
}
// Funzione per filtrare i dati
function filterData(data, filter) {
if (filter === "green") return data.filter(s => s.rating >= 80);
if (filter === "orange") return data.filter(s => s.rating >= 50 && s.rating < 80);
if (filter === "red") return data.filter(s => s.rating < 50);
return data; // All
}
// Caricamento iniziale
$.get('get_supplier_ratings.php', function(response) {
const allData = response;
// Filtro predefinito: Green
const defaultFilter = "green";
const filteredData = filterData(allData, defaultFilter);
$("#rating-filter").val(defaultFilter); // Imposta il filtro predefinito nel dropdown
// Renderizza il grafico iniziale
renderChart(filteredData);
// Cambia filtro
$("#rating-filter").on('change', function() {
const selectedFilter = $(this).val();
const filteredData = filterData(allData, selectedFilter);
renderChart(filteredData); // Re-renderizza il grafico con i dati filtrati
});
});
// Inizializza DataTables
const supplierTable = $('#supplierTable').DataTable({
ajax: {
@@ -167,7 +266,7 @@
{
data: 'rating',
render: function(data, type, row) {
const color = data >= 8 ? '#28a745' : data >= 5 ? '#ffc107' : '#dc3545';
const color = data >= 80 ? '#28a745' : data >= 50 ? '#ffc107' : '#dc3545';
return `<span style="color: ${color}; font-weight: bold;">${data}</span>`;
}
},
@@ -184,12 +283,15 @@
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print' // Tipi di esportazione
],
lengthMenu: [
[10, 25, 50, 100, -1], // Valori
[10, 25, 50, 100, "All"] // Etichette corrispondenti
],
initComplete: function(settings, json) {
updateChart(json); // Aggiorna il grafico dopo aver caricato la tabella
renderChart(json); // Aggiorna il grafico dopo aver caricato la tabella
}
});
// Funzione per calcolare i rating e aggiornare grafico e tabella
$('#calculate-rating').on('click', function() {
$.ajax({
@@ -199,7 +301,7 @@
alert('Ratings calculated successfully!');
supplierTable.ajax.reload(); // Ricarica la tabella
$.get('get_supplier_ratings.php', function(response) {
updateChart(response); // Aggiorna il grafico
renderChart(response); // Aggiorna il grafico
});
},
error: function() {
@@ -211,6 +313,7 @@
</script>
</body>
</html>