Skip to content

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

Dashboard corrections

parent 654b05a6
Show whitespace changes
Inline Side-by-side
Showing with 601 additions and 420 deletions
resources/views/home/dashboard.blade.php
View file @ 501270e7
...@@ -22,8 +22,89 @@ ...@@ -22,8 +22,89 @@
</div> </div>
</div> </div>
<!-- Data Synchronization Status -->
<div class="mt-4">
<div class="card-header">
<h3 class="card-title">
Data Sourcing
</h3>
</div>
<div class="row">
<!-- SUMMARY WIDGETS -->
<div class="col-md-2">
<x-adminlte-info-box
title="Last Successful Sync"
text="2 minutes ago"
icon="fas fa-check-circle fa-2x"
theme="gradient-teal"
progress="100"
description="All systems operational"/>
</div>
<div class="col-md-2">
<x-adminlte-info-box
title="Sync Success Rate"
text="98.7%"
icon="fas fa-sync-alt fa-2x"
theme="gradient-teal"
progress="98.7"
description="↑1.2% from last week"/>
</div>
<div class="col-md-2">
<x-adminlte-info-box
title="Failed Syncs (24h)"
text="18"
icon="fas fa-exclamation-triangle fa-2x"
theme="gradient-orange"
progress="0.4"
description="0.4% error rate"/>
</div>
<div class="col-md-2">
<x-adminlte-info-box
title="Unverified Records"
text="247"
icon="fas fa-question-circle fa-2x"
theme="gradient-indigo"
progress="15"
description="15% overdue"/>
</div>
<div class="col-md-2">
<x-adminlte-info-box
title="Records Processed"
text="42,618"
icon="fas fa-database fa-2x"
theme="gradient-info"
progress="92"
description="↑8% from yesterday">
<div class="text-xs text-muted">NRB: 18,245 | CRS: 12,102 | DOI: 12,271</div>
</x-adminlte-info-box>
</div>
<div class="col-md-2">
<x-adminlte-info-box
title="Duplicate Records (30d)"
text="1,842"
icon="fas fa-copy fa-2x"
theme="gradient-orange"
progress=3.2
description="0.32% of total records">
<div class="text-xs text-muted">NRB: 892 | CRS: 612 | DOI: 338</div>
</x-adminlte-info-box>
</div>
</div>
</div>
<!-- TOP ROW: SYSTEM HEALTH WIDGETS --> <!-- TOP ROW: SYSTEM HEALTH WIDGETS -->
<div class="row mt-4"> <div class="mt-4">
<div class="card-header">
<h3 class="card-title">
API Management
</h3>
</div>
<div class="row">
<div class="col-md-2"> <div class="col-md-2">
<x-adminlte-info-box <x-adminlte-info-box
title="API Requests (Today)" title="API Requests (Today)"
...@@ -48,7 +129,6 @@ ...@@ -48,7 +129,6 @@
</x-adminlte-info-box> </x-adminlte-info-box>
</div> </div>
<div class="col-md-2"> <div class="col-md-2">
<x-adminlte-info-box <x-adminlte-info-box
title="Avg Response Time" title="Avg Response Time"
...@@ -94,9 +174,36 @@ ...@@ -94,9 +174,36 @@
</x-adminlte-info-box> </x-adminlte-info-box>
</div> </div>
</div> </div>
</div>
<!-- User Activity & Access Logs --> <!-- User Activity & Access Logs -->
<div class="row mt-4"> <div class="mt-4">
<div class="card-header">
<h3 class="card-title">
User Management
</h3>
</div>
<div class="row justify-content-center">
<div class="col-md-2">
<x-adminlte-info-box
title="Existing Contracts"
text="1,387"
icon="fas fa-copy fa-2x"
theme="gradient-teal"
progress=""
description="1,387 Valid Contracts"/>
</div>
<div class="col-md-2">
<x-adminlte-info-box
title="Expired Contracts"
text="345"
icon="fas fa-exclamation-triangle fa-2x"
theme="gradient-orange"
progress=""
description="345 Expired Contracts"/>
</div>
<div class="col-md-2"> <div class="col-md-2">
<x-adminlte-info-box <x-adminlte-info-box
title="Active Users (24h)" title="Active Users (24h)"
...@@ -127,7 +234,6 @@ ...@@ -127,7 +234,6 @@
description="↑12% from last week"/> description="↑12% from last week"/>
</div> </div>
<!-- Performance Monitoring -->
<div class="col-md-2"> <div class="col-md-2">
<x-adminlte-info-box <x-adminlte-info-box
title="Avg Query Time" title="Avg Query Time"
...@@ -136,139 +242,12 @@ ...@@ -136,139 +242,12 @@
theme="gradient-indigo" theme="gradient-indigo"
progress="85" progress="85"
description="Slowest: 2.4s" description="Slowest: 2.4s"
id="queryTimeWidget"> id="queryTimeWidget"/>
</x-adminlte-info-box>
</div> </div>
<div class="col-md-2">
<x-adminlte-info-box
title="Storage Used"
text="2.4TB/5TB"
icon="fas fa-hdd fa-2x"
theme="gradient-teal"
progress="48"
description="48% utilized"
id="storageWidget">
</x-adminlte-info-box>
</div>
<div class="col-md-2">
<x-adminlte-info-box
title="Network Traffic"
text="42GB"
icon="fas fa-network-wired fa-2x"
theme="gradient-primary"
progress="72"
description="72% external"
id="trafficWidget">
</x-adminlte-info-box>
</div> </div>
</div> </div>
<!-- Data Synchronization Status -->
<div class="row mt-4">
<!-- SUMMARY WIDGETS -->
<div class="col-md-2">
<x-adminlte-info-box
title="Last Successful Sync"
text="2 minutes ago"
icon="fas fa-check-circle fa-2x"
theme="gradient-teal"
progress="100"
description="All systems operational"/>
</div>
<div class="col-md-2">
<x-adminlte-info-box
title="Sync Success Rate"
text="98.7%"
icon="fas fa-sync-alt fa-2x"
theme="gradient-teal"
progress="98.7"
description="↑1.2% from last week"/>
</div>
<div class="col-md-2">
<x-adminlte-info-box
title="Failed Syncs (24h)"
text="18"
icon="fas fa-exclamation-triangle fa-2x"
theme="gradient-orange"
progress="0.4"
description="0.4% error rate"/>
</div>
<div class="col-md-2">
<x-adminlte-info-box
title="Unverified Records"
text="247"
icon="fas fa-question-circle fa-2x"
theme="gradient-indigo"
progress="15"
description="15% overdue"/>
</div>
<div class="col-md-2">
<x-adminlte-info-box
title="Records Processed"
text="42,618"
icon="fas fa-database fa-2x"
theme="gradient-info"
progress="92"
description="↑8% from yesterday">
<div class="text-xs text-muted">NRB: 18,245 | CRS: 12,102 | DOI: 12,271</div>
</x-adminlte-info-box>
</div>
<div class="col-md-2">
<x-adminlte-info-box
title="Duplicate Records (30d)"
text="1,842"
icon="fas fa-copy fa-2x"
theme="gradient-orange"
progress=3.2
description="0.32% of total records">
<div class="text-xs text-muted">NRB: 892 | CRS: 612 | DOI: 338</div>
</x-adminlte-info-box>
</div>
</div>
<!-- Data Integrity & Verification Trends -->
<!-- <div class="row mt-4">
<div class="col-md-2">
<x-adminlte-info-box
title="Verification Success Rate"
text="98.7%"
icon="fas fa-check-circle fa-2x"
theme="gradient-teal"
progress="98.7"
description="↑1.2% from last week"/>
</div>
<div class="col-md-2">
<x-adminlte-info-box
title="Pending Updates"
text="247"
icon="fas fa-clock fa-2x"
theme="gradient-indigo"
progress="15"
description="15% overdue"/>
</div>
<div class="col-md-2">
<x-adminlte-info-box
title="Data Compliance Score"
text="96.5%"
icon="fas fa-shield-alt fa-2x"
theme="gradient-teal"
progress="96.5"
description="↑2.1% from last quarter">
<div class="text-xs text-muted">42 of 45 organizations compliant</div>
</x-adminlte-info-box>
</div>
</div> -->
<div class="d-flex flex-column flex-lg-row mt-4"> <div class="d-flex flex-column flex-lg-row mt-4">
...@@ -408,6 +387,127 @@ ...@@ -408,6 +387,127 @@
</div> </div>
</div> </div>
<div class="mt-4">
<x-adminlte-card title="Records Received" theme="" icon="" collapsible>
<!-- Month/Year Selector Row -->
<div class="row mb-3">
<div class="col-md-6">
<div class="form-group">
<label>Month</label>
<select class="form-control select2" style="width: 100%;">
@foreach(['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] as $month)
<option value="{{ $month }}" {{ $month == 'May' ? 'selected' : '' }}>{{ $month }}</option>
@endforeach
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Year</label>
<select class="form-control select2" style="width: 100%;">
@foreach(range(date('Y'), date('Y') - 15) as $year)
<option value="{{ $year }}" {{ $year == 2024 ? 'selected' : '' }}>{{ $year }}</option>
@endforeach
</select>
</div>
</div>
</div>
<!-- Info Boxes Grid -->
<div class="row">
<div class="col-md-6">
<x-adminlte-info-box title="National Registration Bureau" text="53,568,898" icon="fas fa-lg fa-users text-success" />
</div>
<div class="col-md-6">
<x-adminlte-info-box title="Civil Registration Department" text="23,984,343" icon="fas fa-lg fa-certificate text-success"/>
</div>
</div>
<div class="row mt-3">
<div class="col-md-6">
<x-adminlte-info-box title="Department of Immigration" text="17,763,238" icon="fas fa-lg fa-flag text-success" />
</div>
<div class="col-md-6">
<x-adminlte-info-box title="Refugee Affairs Department" text="11,821,317" icon="fas fa-lg fa-life-ring text-success" />
</div>
</div>
<div class="row mt-3">
<div class="col-md-12">
<x-adminlte-info-box title="Registrar General" text="17,763,238" icon="fas fa-lg fa-server text-success" />
</div>
</div>
</x-adminlte-card>
</div>
<div class="mt-4">
<x-adminlte-card title="Active Integrations by Industry" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Active Integrations by Industry</h4>
</x-slot>
<div class="">
@php
$heads = [
'Industry',
'Organization Name',
'Data Type',
'Monthly API Calls',
['label' => 'Actions', 'no-export' => true, 'width' => 5],
];
$data = [
['Telco', 'Safaricom', 'ID + Birth', '45,000'],
['Telco', 'Airtel', 'ID Only', '33,500'],
['FBSI', 'Equity Bank', 'All', '64,200'],
['FBSI', 'NCBA', 'ID + Passport', '22,700'],
['Gov', 'NHIF', 'Birth Only', '17,000'],
];
$config = [
'order' => [[0, 'asc']],
'columns' => [null, null, null, null, null, ['orderable' => false]],
];
@endphp
<x-adminlte-datatable id="activeIntegrationsByIndustry" :heads="$heads" :config="$config" bordered hoverable striped>
@foreach($data as $row)
<tr>
@foreach($row as $cell)
<td>{!! $cell !!}</td>
@endforeach
<td>
<a href="#">
<button class="btn btn-xs btn-default text-teal mx-1 shadow" title="Details">
<i class="fa fa-lg fa-fw fa-eye"></i>
</button>
</a>
</td>
</tr>
@endforeach
</x-adminlte-datatable>
</div>
</x-adminlte-card>
</div>
<div class="mt-4">
<x-adminlte-card title="Revenue Growth Rate" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Revenue Growth Rate</h4>
</x-slot>
<div class="d-flex justify-content-center mb-3">
<div class="btn-group">
<button id="showMonthly" class="btn btn-sm btn-success">Monthly</button>
<button id="showYearly" class="btn btn-sm btn-outline-success">Yearly</button>
</div>
</div>
<div class="chart">
<canvas id="revenueGrowthChart" height="250"></canvas>
</div>
</x-adminlte-card>
</div>
<!-- SYNC LOGS TABLE --> <!-- SYNC LOGS TABLE -->
<div class="mt-4"> <div class="mt-4">
<x-adminlte-card title="Synchronization Logs" theme="" icon="" collapsible> <x-adminlte-card title="Synchronization Logs" theme="" icon="" collapsible>
...@@ -965,78 +1065,6 @@ ...@@ -965,78 +1065,6 @@
</div> </div>
</x-adminlte-card> </x-adminlte-card>
</div> </div>
<div class="row">
<div class="col-md-6">
<x-adminlte-card title="Error Sources" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Error Sources</h4>
</x-slot>
<div class="card-body">
<canvas id="errorSourcesChart" height="250"></canvas>
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th>Source</th>
<th>Errors</th>
<th>Rate</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mobile App</td>
<td>12</td>
<td><span class="badge bg-warning">0.18%</span></td>
</tr>
<tr>
<td>Partner API</td>
<td>8</td>
<td><span class="badge bg-danger">0.31%</span></td>
</tr>
<!-- More rows -->
</tbody>
</table>
</div>
</div>
</x-adminlte-card>
</div>
<div class="col-md-6">
<x-adminlte-card title="Error Causes" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Error Causes</h4>
</x-slot>
<div class="card-body">
<canvas id="failureReasonsChart" height="250"></canvas>
<div class="mt-3">
<table class="table table-sm">
<tr>
<td><span class="badge bg-danger">Timeout</span></td>
<td>142</td>
<td>43%</td>
</tr>
<tr>
<td><span class="badge bg-warning">Invalid Data</span></td>
<td>89</td>
<td>27%</td>
</tr>
<tr>
<td><span class="badge bg-secondary">Auth Failed</span></td>
<td>62</td>
<td>19%</td>
</tr>
<tr>
<td><span class="badge bg-info">Other</span></td>
<td>35</td>
<td>11%</td>
</tr>
</table>
</div>
</div>
</x-adminlte-card>
</div>
</div>
</div> </div>
<!-- Right Side --> <!-- Right Side -->
...@@ -1087,6 +1115,55 @@ ...@@ -1087,6 +1115,55 @@
</div> </div>
</x-adminlte-card> </x-adminlte-card>
<x-adminlte-card title="Total API Requests Processed" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Total API Requests Processed</h4>
</x-slot>
<div class="">
@php
$heads = [
'Organization',
'Industry',
'Total Requests',
'Success Rate (%)',
['label' => 'Actions', 'no-export' => true, 'width' => 5],
];
$data = [
['Safaricom', 'Telco', '1,203,421', '98.2'],
['Airtel', 'Telco', '834,775', '97.5'],
['Equity Bank', 'FBSI', '1,509,342', '96.9'],
['NCBA', 'FBSI', '675,312', '95.3'],
['NHIF', 'Gov', '321,008', '92.6'],
];
$config = [
'order' => [[3, 'desc']],
'columns' => [null, null, null, null, null, ['orderable' => false]],
];
@endphp
<x-adminlte-datatable id="totalApiRequestsProcessed" :heads="$heads" :config="$config" bordered hoverable striped>
@foreach($data as $row)
<tr>
@foreach($row as $cell)
<td>{!! $cell !!}</td>
@endforeach
<td>
<a href="#">
<button class="btn btn-xs btn-default text-teal mx-1 shadow" title="Details">
<i class="fa fa-lg fa-fw fa-eye"></i>
</button>
</a>
</td>
</tr>
@endforeach
</x-adminlte-datatable>
</div>
</x-adminlte-card>
<x-adminlte-card title="Sync Performance" theme="" icon="" collapsible> <x-adminlte-card title="Sync Performance" theme="" icon="" collapsible>
<x-slot name="titleSlot"> <x-slot name="titleSlot">
<h4 class="card-title">Sync Performance</h4> <h4 class="card-title">Sync Performance</h4>
...@@ -1386,22 +1463,6 @@ ...@@ -1386,22 +1463,6 @@
} }
}); });
// Error Sources Pie Chart
new Chart(document.getElementById('errorSourcesChart'), {
type: 'doughnut',
data: {
labels: ['Mobile App', 'Partner API', 'Web Portal', 'Internal Systems'],
datasets: [{
data: [12, 8, 5, 3],
backgroundColor: [
'#ffc107',
'#dc3545',
'#17a2b8',
'#6610f2'
]
}]
}
});
// Gauge Charts // Gauge Charts
// CPU Gauge // CPU Gauge
...@@ -1688,31 +1749,6 @@ ...@@ -1688,31 +1749,6 @@
} }
}); });
// Failure Reasons Chart
new Chart(document.getElementById('failureReasonsChart'), {
type: 'doughnut',
data: {
labels: ['Timeout', 'Invalid Data', 'Auth Failed', 'Other'],
datasets: [{
data: [142, 89, 62, 35],
backgroundColor: [
'#dc3545',
'#fd7e14',
'#6c757d',
'#0dcaf0'
]
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'bottom'
}
}
}
});
// Response Time Trends Chart // Response Time Trends Chart
new Chart(document.getElementById('responseTimeChart'), { new Chart(document.getElementById('responseTimeChart'), {
type: 'line', type: 'line',
...@@ -2011,6 +2047,120 @@ ...@@ -2011,6 +2047,120 @@
} }
} }
}); });
$(document).ready(function() {
// Dummy data - replace with your actual data
const monthlyData = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
revenue: [65000, 59000, 80000, 81000, 56000, 55000, 40000, 72000, 88000, 94000, 102000, 118000],
growth: [0, -9.2, 35.6, 1.3, -30.9, -1.8, -27.3, 80.0, 22.2, 6.8, 8.5, 15.7]
};
const yearlyData = {
labels: ['2019', '2020', '2021', '2022', '2023', '2024'],
revenue: [850000, 920000, 1050000, 1120000, 1250000, 1420000],
growth: [0, 8.2, 14.1, 6.7, 11.6, 13.6]
};
const ctx = document.getElementById('revenueGrowthChart').getContext('2d');
let chart;
function renderChart(data) {
if (chart) {
chart.destroy();
}
chart = new Chart(ctx, {
type: 'bar',
data: {
labels: data.labels,
datasets: [
{
label: 'Revenue ($)',
data: data.revenue,
backgroundColor: 'rgba(20, 176, 76, 1)',
borderColor: 'rgba(20, 176, 76, 1)',
borderWidth: 1,
yAxisID: 'y'
},
{
label: 'Growth Rate (%)',
data: data.growth,
type: 'line',
borderColor: 'rgba(230, 57, 70, 1)',
backgroundColor: 'rgba(230, 57, 70, 0.1)',
borderWidth: 2,
pointBackgroundColor: 'rgba(230, 57, 70, 1)',
yAxisID: 'y1'
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
tooltip: {
callbacks: {
label: function(context) {
let label = context.dataset.label || '';
if (label) {
label += ': ';
}
if (context.datasetIndex === 1) {
label += context.raw + '%';
} else {
label += '$' + context.raw.toLocaleString();
}
return label;
}
}
}
},
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
title: {
display: true,
text: 'Revenue ($)'
}
},
y1: {
type: 'linear',
display: true,
position: 'right',
title: {
display: true,
text: 'Growth Rate (%)'
},
grid: {
drawOnChartArea: false
},
min: -50,
max: 100
}
}
}
});
}
// Initial render with monthly data
renderChart(monthlyData);
// Toggle between views
$('#showMonthly').click(function() {
$(this).removeClass('btn-outline-success').addClass('btn-success');
$('#showYearly').removeClass('btn-success').addClass('btn-outline-success');
renderChart(monthlyData);
});
$('#showYearly').click(function() {
$(this).removeClass('btn-outline-success').addClass('btn-success');
$('#showMonthly').removeClass('btn-success').addClass('btn-outline-success');
renderChart(yearlyData);
});
});
</script> </script>
@stop @stop
......
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