Skip to content

I
IPRSv2
Commit 501270e7 authored by Brian Wangora's avatar Brian Wangora
Browse files
Options

Dashboard corrections

parent 654b05a6
Expand all Show whitespace changes
Inline Side-by-side
Showing with 601 additions and 420 deletions
resources/views/home/dashboard.blade.php
View file @ 501270e7
This diff is collapsed.
resources/views/home/home2.blade.php
View file @ 501270e7
...@@ -86,18 +86,17 @@ ...@@ -86,18 +86,17 @@
$heads = [ $heads = [
'Industry', 'Industry',
'Organization Name', 'Organization Name',
'API Key',
'Data Type', 'Data Type',
'Monthly API Calls', 'Monthly API Calls',
['label' => 'Actions', 'no-export' => true, 'width' => 5], ['label' => 'Actions', 'no-export' => true, 'width' => 5],
]; ];
$data = [ $data = [
['Telco', 'Safaricom', 'API-1243', 'ID + Birth', '45,000'], ['Telco', 'Safaricom', 'ID + Birth', '45,000'],
['Telco', 'Airtel', 'API-9421', 'ID Only', '33,500'], ['Telco', 'Airtel', 'ID Only', '33,500'],
['FBSI', 'Equity Bank', 'API-5521', 'All', '64,200'], ['FBSI', 'Equity Bank', 'All', '64,200'],
['FBSI', 'NCBA', 'API-6211', 'ID + Passport', '22,700'], ['FBSI', 'NCBA', 'ID + Passport', '22,700'],
['Gov', 'NHIF', 'API-7710', 'Birth Only', '17,000'], ['Gov', 'NHIF', 'Birth Only', '17,000'],
]; ];
$config = [ $config = [
...@@ -146,8 +145,6 @@ ...@@ -146,8 +145,6 @@
</div> </div>
<div class="col-lg-5 d-flex flex-column"> <div class="col-lg-5 d-flex flex-column">
<div>
<div>
<x-adminlte-card title="Total API Requests Processed" theme="" icon="" collapsible> <x-adminlte-card title="Total API Requests Processed" theme="" icon="" collapsible>
<x-slot name="titleSlot"> <x-slot name="titleSlot">
<h4 class="card-title">Total API Requests Processed</h4> <h4 class="card-title">Total API Requests Processed</h4>
...@@ -157,18 +154,17 @@ ...@@ -157,18 +154,17 @@
$heads = [ $heads = [
'Organization', 'Organization',
'Industry', 'Industry',
'API Key',
'Total Requests', 'Total Requests',
'Success Rate (%)', 'Success Rate (%)',
['label' => 'Actions', 'no-export' => true, 'width' => 5], ['label' => 'Actions', 'no-export' => true, 'width' => 5],
]; ];
$data = [ $data = [
['Safaricom', 'Telco', 'API-1243', '1,203,421', '98.2'], ['Safaricom', 'Telco', '1,203,421', '98.2'],
['Airtel', 'Telco', 'API-9421', '834,775', '97.5'], ['Airtel', 'Telco', '834,775', '97.5'],
['Equity Bank', 'FBSI', 'API-5521', '1,509,342', '96.9'], ['Equity Bank', 'FBSI', '1,509,342', '96.9'],
['NCBA', 'FBSI', 'API-6211', '675,312', '95.3'], ['NCBA', 'FBSI', '675,312', '95.3'],
['NHIF', 'Gov', 'API-7710', '321,008', '92.6'], ['NHIF', 'Gov', '321,008', '92.6'],
]; ];
$config = [ $config = [
...@@ -195,17 +191,16 @@ ...@@ -195,17 +191,16 @@
</x-adminlte-datatable> </x-adminlte-datatable>
</div> </div>
</x-adminlte-card> </x-adminlte-card>
</div>
<x-adminlte-card title="Data Sources" theme="" icon="" collapsible> <x-adminlte-card title="Data Sources" theme="" icon="" collapsible>
<x-slot name="titleSlot"> <x-slot name="titleSlot">
<h4 class="card-title">Data Sources</h4> <h4 class="card-title">Data Sources</h4>
</x-slot> </x-slot>
<div class="py-4"> <canvas id="dataSource1" height="250"></canvas>
<canvas id="dataSource1"></canvas> <div class="chart-legend text-center mt-3" id="dataSource1-legend"></div>
</div>
</x-adminlte-card> </x-adminlte-card>
</div>
</div> </div>
</div> </div>
</main> </main>
...@@ -220,30 +215,66 @@ ...@@ -220,30 +215,66 @@
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script> <script>
let chart1;
$(document).ready(() => { $(document).ready(() => {
chart1 = document.getElementById('dataSource1'); const ctx = document.getElementById('dataSource1');
const data = [41.3, 6.9, 13.8, 20.7, 17.2];
new Chart(chart1, { const labels = ['CRD', 'DOI', 'NRB', 'RAD', 'RG'];
type: 'doughnut', const colors = [
data: {
labels: ['CRD', 'DOI', 'NRB', 'RAD', 'RG'],
datasets: [{
label: 'Population Dataset',
data: [300, 50, 100, 150, 125],
backgroundColor: [
'rgb(255,99,132)', 'rgb(255,99,132)',
'rgb(54,162,235)', 'rgb(54,162,235)',
'rgb(255,205,86)', 'rgb(255,205,86)',
'rgb(16,203,23)', 'rgb(16,203,23)',
'rgb(159,8,234)', 'rgb(159,8,234)'
], ];
// Calculate total for percentages
const total = data.reduce((sum, value) => sum + value, 0);
const percentages = data.map(value => ((value / total) * 100).toFixed(1) + '%');
const chart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: labels,
datasets: [{
data: data,
backgroundColor: colors,
hoverOffset: 4 hoverOffset: 4
}] }]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'bottom',
labels: {
generateLabels: function(chart) {
const data = chart.data;
return data.labels.map((label, i) => {
const value = data.datasets[0].data[i];
const percentage = ((value / total) * 100).toFixed(1) + '%';
return {
text: `${label}: ${percentage}`,
fillStyle: data.datasets[0].backgroundColor[i],
hidden: false,
index: i
};
});
}
}
},
tooltip: {
callbacks: {
label: function(context) {
const label = context.label || '';
const value = context.raw || 0;
const percentage = ((value / total) * 100).toFixed(1) + '%';
return `${label}: ${value} (${percentage})`;
}
}
}
}
} }
}); });
}); });
$(document).ready(function() { $(document).ready(function() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment