Skip to content

I
IPRSv2
Commit 3ad67b88 authored by Brian Wangora's avatar Brian Wangora
Browse files
Options

Admin dashboard started

parent 8fbfcba7
Hide whitespace changes
Inline Side-by-side
Showing with 1218 additions and 0 deletions
resources/views/home/dashboard.blade.php
View file @ 3ad67b88
......@@ -22,6 +22,178 @@
</div>
</div>
<!-- TOP ROW: SYSTEM HEALTH WIDGETS -->
<div class="row mt-4">
<div class="col-md-3">
<x-adminlte-info-box
title="API Requests (Today)"
text="42,618"
icon="fas fa-exchange-alt fa-2x"
theme="gradient-teal"
progress-value="78"
progress-description="↑12% from yesterday">
<div class="text-xs text-muted">External: 32,145 | Internal: 10,473</div>
</x-adminlte-info-box>
</div>
<div class="col-md-3">
<x-adminlte-info-box
title="Avg Response Time"
text="143ms"
icon="fas fa-tachometer-alt fa-2x"
theme="gradient-indigo"
progress-value="65"
progress-description="Max: 2.4s">
</x-adminlte-info-box>
</div>
<div class="col-md-3">
<x-adminlte-info-box
title="Error Rate"
text="0.23%"
icon="fas fa-exclamation-triangle fa-2x"
theme="gradient-orange"
progress-value="0.23"
progress-description="38 failed requests">
</x-adminlte-info-box>
</div>
<div class="col-md-3">
<x-adminlte-info-box
title="Uptime (30d)"
text="99.97%"
icon="fas fa-heartbeat fa-2x"
theme="gradient-green"
progress-value="99.97"
progress-description="4m 12s downtime">
</x-adminlte-info-box>
</div>
</div>
<!-- Data Synchronization Status -->
<div class="row mt-4">
<!-- SUMMARY WIDGETS -->
<div class="col-md-4">
<x-adminlte-info-box
title="Last Successful Sync"
text="2 minutes ago"
icon="fas fa-check-circle fa-2x"
theme="gradient-teal"
progress-value="100"
progress-description="All systems operational"/>
</div>
<div class="col-md-4">
<x-adminlte-info-box
title="Records Processed (24h)"
text="42,618"
icon="fas fa-database fa-2x"
theme="gradient-info"
progress-value="92"
progress-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-4">
<x-adminlte-info-box
title="Failed Syncs (24h)"
text="18"
icon="fas fa-exclamation-triangle fa-2x"
theme="gradient-orange"
progress-value="0.4"
progress-description="0.4% error rate"/>
</div>
</div>
<!-- Data Integrity & Verification Trends -->
<div class="row mt-4">
<!-- TOP ROW: SUMMARY WIDGETS -->
<div class="col-md-4">
<x-adminlte-info-box
title="Verification Success Rate"
text="98.7%"
icon="fas fa-check-circle fa-2x"
theme="gradient-teal"
progress-value="98.7"
progress-description="↑1.2% from last week"/>
</div>
<div class="col-md-4">
<x-adminlte-info-box
title="Duplicate Records (30d)"
text="1,842"
icon="fas fa-copy fa-2x"
theme="gradient-orange"
progress-value="3.2"
progress-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 class="col-md-4">
<x-adminlte-info-box
title="Pending Updates"
text="247"
icon="fas fa-clock fa-2x"
theme="gradient-indigo"
progress-value="15"
progress-description="15% overdue"/>
</div>
</div>
<div class="col-md-12">
<x-adminlte-info-box
title="Overall Compliance Score"
text="96.5%"
icon="fas fa-shield-alt fa-2x"
theme="gradient-teal"
progress-value="96.5"
progress-description="↑2.1% from last quarter">
<div class="text-xs text-muted">42 of 45 organizations compliant</div>
</x-adminlte-info-box>
</div>
<!-- API & System Usage -->
<div class="row mt-4">
<div class="col-md-4">
<x-adminlte-info-box
title="Total API Requests"
text="1.42M"
icon="fas fa-exchange-alt fa-2x"
theme="gradient-primary"
progress-value="12"
progress-description="↑12% from last week">
<div class="text-xs text-muted">24h: 42,618 requests</div>
</x-adminlte-info-box>
</div>
<div class="col-md-4">
<x-adminlte-info-box
title="Failed Requests"
text="0.23%"
icon="fas fa-exclamation-triangle fa-2x"
theme="gradient-warning"
progress-value="0.23"
progress-description="↓0.05% from yesterday">
<div class="text-xs text-muted">328 failures (24h)</div>
</x-adminlte-info-box>
</div>
<div class="col-md-4">
<x-adminlte-info-box
title="Avg Response Time"
text="143ms"
icon="fas fa-tachometer-alt fa-2x"
theme="gradient-info"
progress-value="85"
progress-description="Max: 2.4s">
<div class="text-xs text-muted">Verification: 98ms | Search: 210ms</div>
</x-adminlte-info-box>
</div>
</div>
<div class="d-flex flex-column flex-lg-row">
<div class="col-lg-8">
<div>
......@@ -40,6 +212,396 @@
{{-- <x-adminlte-info-box style="opacity: 0;" />--}}
</div>
</div>
<!-- New Widgets -->
<!-- System Performance and Health -->
<div class="row mt-4">
<div class="col-md-6">
<x-adminlte-card title="System Load & Capacity" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">System Load & Capacity</h4>
</x-slot>
<div class="row text-center">
<div class="col-4 border-right">
<div class="mb-2">CPU</div>
<canvas id="cpuGauge" width="120" height="120"></canvas>
<small class="text-muted">64% of 32 cores</small>
</div>
<div class="col-4 border-right">
<div class="mb-2">Memory</div>
<canvas id="memoryGauge" width="120" height="120"></canvas>
<small class="text-muted">48GB/64GB</small>
</div>
<div class="col-4">
<div class="mb-2">Storage</div>
<canvas id="storageGauge" width="120" height="120"></canvas>
<small class="text-muted">2.4TB/5TB</small>
</div>
</div>
</x-adminlte-card>
</div>
<div class="col-md-6">
<x-adminlte-card title="Peak Usage Hours" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Peak Usage Hours</h4>
</x-slot>
<table class="table table-sm table-striped">
<thead>
<tr>
<th>Time</th>
<th>Avg Requests</th>
<th>Max RT</th>
<th>Error Rate</th>
</tr>
</thead>
<tbody>
<tr class="bg-danger-light">
<td>09:00-10:00</td>
<td>4,218</td>
<td>1.2s</td>
<td>0.42%</td>
</tr>
<tr class="bg-warning-light">
<td>14:00-15:00</td>
<td>3,845</td>
<td>0.8s</td>
<td>0.31%</td>
</tr>
<!-- More rows -->
</tbody>
</table>
</x-adminlte-card>
</div>
</div>
<div class="col-md-12 mt-4">
<x-adminlte-card title="API Request Volume (Last 7 Days)" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">API Request Volume (Last 7 Days)</h4>
</x-slot>
<div class="d-flex justify-content-end mb-3">
<div class="btn-group">
<button class="btn btn-sm btn-outline-secondary">24h</button>
<button class="btn btn-sm btn-secondary">7d</button>
<button class="btn btn-sm btn-outline-secondary">30d</button>
</div>
</div>
<div class="card-body">
<div class="position-relative mb-4">
<canvas id="apiVolumeChart" height="300"></canvas>
</div>
<div class="d-flex flex-row justify-content-between">
<span class="mr-2">
<i class="fas fa-square text-primary"></i> External
</span>
<span class="mr-2">
<i class="fas fa-square text-teal"></i> Internal
</span>
<span>
<i class="fas fa-square text-gray"></i> Failed
</span>
</div>
</div>
</x-adminlte-card>
</div>
<!-- SYNC LOGS TABLE -->
<div class="mt-4">
<x-adminlte-card title="Synchronization Logs" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Synchronization Logs</h4>
</x-slot>
<div class="float-right mb-3">
<div class="input-group input-group-sm">
<select class="form-control form-control-sm">
<option>All Systems</option>
<option>NRB</option>
<option>CRS</option>
<option>DOI</option>
</select>
<div class="input-group-append">
<button class="btn btn-primary">
<i class="fas fa-filter"></i> Filter
</button>
</div>
</div>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover table-striped">
<thead>
<tr>
<th>System</th>
<th>Last Sync</th>
<th>Status</th>
<th>Records</th>
<th>Duration</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="badge bg-primary">NRB</span></td>
<td>2023-11-20 14:32:18</td>
<td><span class="badge bg-success">Success</span></td>
<td>+1,842 (↑312)</td>
<td>42s</td>
<td><button class="btn btn-xs btn-info">View</button></td>
</tr>
<tr>
<td><span class="badge bg-teal">CRS</span></td>
<td>2023-11-20 14:30:05</td>
<td><span class="badge bg-warning">Partial</span></td>
<td>+892 (↓104)</td>
<td>1m18s</td>
<td><button class="btn btn-xs btn-info">View</button></td>
</tr>
<tr class="bg-danger-light">
<td><span class="badge bg-purple">DOI</span></td>
<td>2023-11-20 13:45:22</td>
<td><span class="badge bg-danger">Failed</span></td>
<td>0</td>
<td>N/A</td>
<td>
<button class="btn btn-xs btn-danger" data-toggle="popover"
title="Error Details"
data-content="Connection timeout to DOI server (ETIMEDOUT)">
Details
</button>
</td>
</tr>
<!-- More rows -->
</tbody>
</table>
</div>
</div>
<div class="card-footer clearfix">
<div class="float-right">
<button class="btn btn-sm btn-outline-primary mr-2">
<i class="fas fa-sync-alt"></i> Refresh
</button>
<button class="btn btn-sm btn-primary">
<i class="fas fa-download"></i> Export
</button>
</div>
</div>
</x-adminlte-card>
</div>
<!-- Data Integrity & Verification Trends -->
<div class="mt-4">
<x-adminlte-card title="Pending Data Updates" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Pending Data Updates</h4>
</x-slot>
<div class="float-right mb-3">
<div class="input-group input-group-sm" style="width: 200px;">
<input type="text" name="table_search" class="form-control float-right" placeholder="Search">
<div class="input-group-append">
<button type="submit" class="btn btn-default">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Record ID</th>
<th>Source</th>
<th>Issue Type</th>
<th>Days Pending</th>
<th>Priority</th>
<th>Assigned To</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>NRB-2023-8472</td>
<td><span class="badge bg-primary">NRB</span></td>
<td>Data Conflict</td>
<td>3</td>
<td><span class="badge bg-warning">Medium</span></td>
<td>Team A</td>
<td>
<button class="btn btn-xs btn-info">View</button>
<button class="btn btn-xs btn-success">Resolve</button>
</td>
</tr>
<tr class="bg-danger-light">
<td>CRS-2023-3381</td>
<td><span class="badge bg-teal">CRS</span></td>
<td>Duplicate</td>
<td>12</td>
<td><span class="badge bg-danger">High</span></td>
<td>Team B</td>
<td>
<button class="btn btn-xs btn-info">View</button>
<button class="btn btn-xs btn-success">Resolve</button>
</td>
</tr>
<!-- More rows -->
</tbody>
</table>
</div>
</div>
<div class="card-footer clearfix">
<div class="float-right">
<button class="btn btn-sm btn-outline-primary mr-2">
<i class="fas fa-sync-alt"></i> Refresh
</button>
<button class="btn btn-sm btn-primary">
<i class="fas fa-download"></i> Export
</button>
</div>
</div>
</x-adminlte-card>
</div>
<!-- External Organizations & Data Consumers -->
<div class="mt-4">
<x-adminlte-card title="Data Sharing Compliance" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Data Sharing Compliance</h4>
</x-slot>
<div class="float-right mb-3">
<div class="input-group input-group-sm" style="width: 200px;">
<select class="form-control">
<option>All Sectors</option>
<option>Financial</option>
<option>Government</option>
<option>Commercial</option>
</select>
</div>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover table-striped">
<thead>
<tr>
<th>Organization</th>
<th>Sector</th>
<th>API Usage</th>
<th>Compliance Score</th>
<th>Last Audit</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Kenya Commercial Bank</td>
<td><span class="badge bg-primary">Financial</span></td>
<td>1.2M req/mo</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar bg-success" style="width: 98%"></div>
</div>
<small>98%</small>
</td>
<td>2023-11-15</td>
<td><span class="badge bg-success">Compliant</span></td>
</tr>
<tr>
<td>Ministry of Interior</td>
<td><span class="badge bg-success">Government</span></td>
<td>845K req/mo</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar bg-success" style="width: 97%"></div>
</div>
<small>97%</small>
</td>
<td>2023-11-10</td>
<td><span class="badge bg-success">Compliant</span></td>
</tr>
<tr class="bg-warning-light">
<td>MobilePay Ltd</td>
<td><span class="badge bg-primary">Financial</span></td>
<td>620K req/mo</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar bg-warning" style="width: 89%"></div>
</div>
<small>89%</small>
</td>
<td>2023-10-28</td>
<td><span class="badge bg-warning">Review Needed</span></td>
</tr>
<tr class="bg-danger-light">
<td>QuickCredit Inc</td>
<td><span class="badge bg-info">Commercial</span></td>
<td>420K req/mo</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar bg-danger" style="width: 76%"></div>
</div>
<small>76%</small>
</td>
<td>2023-09-15</td>
<td><span class="badge bg-danger">Non-Compliant</span></td>
</tr>
<!-- More rows -->
</tbody>
</table>
</div>
</div>
<div class="card-footer clearfix">
<div class="float-right">
<button class="btn btn-sm btn-outline-primary mr-2">
<i class="fas fa-sync-alt"></i> Refresh
</button>
<button class="btn btn-sm btn-primary">
<i class="fas fa-download"></i> Export
</button>
</div>
</div>
</x-adminlte-card>
</div>
<!-- API & System Usage -->
<div class="mt-4">
<x-adminlte-card title="Response Time Trends" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Response Time Trends</h4>
</x-slot>
<div class="">
<div class="btn-group">
<button class="btn btn-sm btn-outline-secondary">Hourly</button>
<button class="btn btn-sm btn-secondary">Daily</button>
<button class="btn btn-sm btn-outline-secondary">Weekly</button>
</div>
</div>
<div class="card-body">
<div class="chart">
<canvas id="responseTimeChart" height="300"></canvas>
</div>
<div class="d-flex flex-row justify-content-between mt-2">
<span class="mr-2">
<i class="fas fa-circle text-primary"></i> Verification
</span>
<span class="mr-2">
<i class="fas fa-circle text-success"></i> Search
</span>
<span class="mr-2">
<i class="fas fa-circle text-info"></i> Bulk
</span>
<span>
<i class="fas fa-circle text-warning"></i> Admin
</span>
</div>
</div>
</x-adminlte-card>
</div>
<div>
<div class="container-fluid d-flex flex-column p-3 bg-white rounded">
<div class="d-flex flex-column flex-sm-row justify-content-between align-items-center mb-3">
......@@ -168,6 +730,236 @@
</div>
</div>
<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>
<!-- QUEUE VISUALIZATION -->
<x-adminlte-card title="Sync Queue Status" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Sync Queue Status</h4>
</x-slot>
<div>
<div class="position-relative mb-4">
<canvas id="queueStatusChart" height="250"></canvas>
</div>
<div class="d-flex justify-content-around text-center">
<div>
<div class="text-lg">1,842</div>
<div class="text-muted">Queued</div>
</div>
<div>
<div class="text-lg">4,218</div>
<div class="text-muted">Processed (24h)</div>
</div>
<div>
<div class="text-lg">18</div>
<div class="text-muted">Failed</div>
</div>
</div>
</div>
</x-adminlte-card>
<x-adminlte-card title="Sync Performance" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Sync Performance</h4>
</x-slot>
<div>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tab-nrb">NRB</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab-crs">CRS</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab-doi">DOI</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-nrb">
<div class="chart">
<canvas id="nrbPerformanceChart" height="200"></canvas>
</div>
<div class="mt-3">
<span class="badge bg-primary">Avg: 32s</span>
<span class="badge bg-success">Success: 99.2%</span>
<span class="badge bg-info">Throughput: 42 rec/s</span>
</div>
</div>
<!-- Other tabs -->
</div>
</div>
</x-adminlte-card>
<!-- Data Integrity & Verification Trends -->
<x-adminlte-card title="Verification Success Rate Trend" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Verification Success Rate Trend</h4>
</x-slot>
<div class="float-right mb-3">
<div class="btn-group">
<button class="btn btn-sm btn-outline-secondary active">30d</button>
<button class="btn btn-sm btn-outline-secondary">90d</button>
<button class="btn btn-sm btn-outline-secondary">1y</button>
</div>
</div>
<div class="chart">
<canvas id="verificationTrendChart" height="250"></canvas>
</div>
</x-adminlte-card>
<x-adminlte-card title="Duplicate Records by Source" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Duplicate Records by Source</h4>
</x-slot>
<div class="card-body">
<div class="chart">
<canvas id="duplicatesChart" height="250"></canvas>
</div>
<div class="mt-3 d-flex justify-content-around text-center">
<div>
<span class="badge bg-primary">NRB: 48%</span>
</div>
<div>
<span class="badge bg-teal">CRS: 33%</span>
</div>
<div>
<span class="badge bg-purple">DOI: 19%</span>
</div>
</div>
</div>
</x-adminlte-card>
<!-- External Organizations & Data Consumers -->
<x-adminlte-card title="Top Requesting Organizations (Last 30 Days)" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Top Requesting Organizations (Last 30 Days)</h4>
</x-slot>
<div class="float-right">
<button class="btn btn-sm btn-outline-primary">View All</button>
</div>
<div class="chart">
<canvas id="topOrganizationsChart" height="300"></canvas>
</div>
</x-adminlte-card>
<x-adminlte-card title="Usage Distribution" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Usage Distribution</h4>
</x-slot>
<div>
<canvas id="usagePieChart" height="250"></canvas>
<div class="mt-3 text-center">
<span class="badge bg-primary mr-2">Financial: 42%</span>
<span class="badge bg-success mr-2">Government: 31%</span>
<span class="badge bg-info">Commercial: 27%</span>
</div>
</div>
</x-adminlte-card>
<!-- API & System Usage -->
<x-adminlte-card title="API Requests by Source (Last 7 Days)" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">API Requests by Source (Last 7 Days)</h4>
</x-slot>
<div class="float-right mb-3">
<div class="btn-group">
<button class="btn btn-sm btn-outline-secondary">24h</button>
<button class="btn btn-sm btn-secondary">7d</button>
<button class="btn btn-sm btn-outline-secondary">30d</button>
</div>
</div>
<div>
<div class="chart">
<canvas id="apiRequestsChart" height="300"></canvas>
</div>
<div class="d-flex flex-row justify-content-between mt-2">
<span class="mr-2">
<i class="fas fa-square text-primary"></i> Financial
</span>
<span class="mr-2">
<i class="fas fa-square text-success"></i> Government
</span>
<span class="mr-2">
<i class="fas fa-square text-info"></i> Telecom
</span>
<span>
<i class="fas fa-square text-warning"></i> Other
</span>
</div>
</div>
</x-adminlte-card>
<x-adminlte-card title="Failure Reasons" theme="" icon="" collapsible>
<x-slot name="titleSlot">
<h4 class="card-title">Failure Reasons</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 class="card">
<div class="m-2">
<span class="h5">Data Source</span>
......@@ -183,11 +975,46 @@
@stop
@section('css')
<style>
.gauge {
width: 100%;
height: 100px;
}
.bg-danger-light {
background-color: rgba(220,53,69,.1);
}
.bg-warning-light {
background-color: rgba(255,193,7,.1);
}
.card-title {
font-size: 1.25rem;
font-weight: 600;
}
.table-hover tbody tr:hover {
background-color: rgba(0,0,0,.03);
}
.chart {
min-height: 200px;
}
.progress-xs {
height: 0.5rem;
}
.table-sm td {
padding: 0.3rem;
}
</style>
@stop
@section('js')
<script src='/vendor/chart.js/Chart.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
let chart1;
let chart2;
......@@ -299,6 +1126,397 @@
}
});
});
// API Volume Chart (would use real data)
new Chart(document.getElementById('apiVolumeChart'), {
type: 'bar',
data: {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
datasets: [{
label: 'External',
data: [32000, 30100, 41200, 38300, 40400, 21500, 18700],
backgroundColor: '#007bff'
}, {
label: 'Internal',
data: [9800, 10200, 12400, 11500, 9200, 7100, 5300],
backgroundColor: '#20c997'
}, {
label: 'Failed',
data: [120, 85, 64, 92, 115, 42, 28],
backgroundColor: '#6c757d'
}]
},
options: {
responsive: true,
scales: {
x: { stacked: true },
y: { stacked: true }
}
}
});
// 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
// CPU Gauge
const cpuCtx = document.getElementById('cpuGauge').getContext('2d');
new Chart(cpuCtx, {
type: 'doughnut',
data: {
datasets: [{
data: [64, 36],
backgroundColor: [
getColor(64),
'#f0f0f0'
],
borderWidth: 0
}]
},
options: {
circumference: 180,
rotation: -90,
cutout: '80%',
plugins: {
legend: { display: false },
tooltip: { enabled: false }
}
}
});
// Memory Gauge
const memoryCtx = document.getElementById('memoryGauge').getContext('2d');
new Chart(memoryCtx, {
type: 'doughnut',
data: {
datasets: [{
data: [75, 25],
backgroundColor: [
getColor(75),
'#f0f0f0'
],
borderWidth: 0
}]
},
options: {
circumference: 180,
rotation: -90,
cutout: '80%',
plugins: {
legend: { display: false },
tooltip: { enabled: false }
}
}
});
// Storage Gauge
const storageCtx = document.getElementById('storageGauge').getContext('2d');
new Chart(storageCtx, {
type: 'doughnut',
data: {
datasets: [{
data: [48, 52],
backgroundColor: [
getColor(48),
'#f0f0f0'
],
borderWidth: 0
}]
},
options: {
circumference: 180,
rotation: -90,
cutout: '80%',
plugins: {
legend: { display: false },
tooltip: { enabled: false }
}
}
});
function getColor(value) {
if (value < 50) return '#28a745'; // Green
if (value < 75) return '#ffc107'; // Yellow
return '#dc3545'; // Red
}
// Queue Status Chart
new Chart(document.getElementById('queueStatusChart'), {
type: 'doughnut',
data: {
labels: ['Processed', 'Queued', 'Failed'],
datasets: [{
data: [4218, 1842, 18],
backgroundColor: [
'#28a745',
'#17a2b8',
'#dc3545'
]
}]
},
options: {
cutout: '70%',
plugins: {
legend: {
position: 'bottom'
}
}
}
});
// NRB Performance Chart
new Chart(document.getElementById('nrbPerformanceChart'), {
type: 'line',
data: {
labels: Array.from({length: 24}, (_, i) => i + ':00'),
datasets: [{
label: 'Sync Duration (sec)',
data: [28, 25, 22, 18, 20, 25, 30, 35, 42, 38, 35, 32, 30, 28, 25, 30, 35, 40, 45, 42, 38, 35, 30, 28],
borderColor: '#007bff',
backgroundColor: 'rgba(0, 123, 255, 0.1)',
tension: 0.4
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
// Enable popovers for error details
$(function () {
$('[data-toggle="popover"]').popover()
});
// Verification Trend Chart
new Chart(document.getElementById('verificationTrendChart'), {
type: 'line',
data: {
labels: Array.from({length: 30}, (_, i) => i+1 + ' Nov'),
datasets: [{
label: 'Success Rate (%)',
data: [97.2, 97.5, 97.8, 98.1, 97.9, 98.3, 98.5, 98.7, 98.6, 98.4, 98.5, 98.7, 98.8, 98.6, 98.9, 99.0, 98.8, 98.7, 98.9, 99.0, 98.8, 98.9, 99.0, 99.1, 99.0, 98.9, 98.8, 98.7, 98.8, 98.7],
borderColor: '#20c997',
backgroundColor: 'rgba(32, 201, 151, 0.1)',
borderWidth: 2,
tension: 0.3,
fill: true
}]
},
options: {
responsive: true,
scales: {
y: {
min: 95,
max: 100,
ticks: {
callback: function(value) {
return value + '%';
}
}
}
}
}
});
// Duplicates Chart
new Chart(document.getElementById('duplicatesChart'), {
type: 'bar',
data: {
labels: ['NRB', 'CRS', 'DOI'],
datasets: [{
label: 'Duplicate Records',
data: [892, 612, 338],
backgroundColor: [
'rgba(13, 110, 253, 0.7)',
'rgba(32, 201, 151, 0.7)',
'rgba(111, 66, 193, 0.7)'
],
borderColor: [
'#0d6efd',
'#20c997',
'#6f42c1'
],
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
// Top Organizations Chart
new Chart(document.getElementById('topOrganizationsChart'), {
type: 'bar',
data: {
labels: ['Kenya Commercial Bank', 'Ministry of Interior', 'Equitel', 'Safaricom', 'Co-op Bank'],
datasets: [{
label: 'API Requests (thousands)',
data: [1200, 845, 720, 680, 550],
backgroundColor: 'rgba(58, 115, 240, 0.7)',
borderColor: 'rgba(58, 115, 240, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true,
ticks: {
callback: function(value) {
return value + 'K';
}
}
}
}
}
});
// Usage Pie Chart
new Chart(document.getElementById('usagePieChart'), {
type: 'doughnut',
data: {
labels: ['Financial', 'Government', 'Commercial'],
datasets: [{
data: [42, 31, 27],
backgroundColor: [
'rgba(13, 110, 253, 0.7)',
'rgba(40, 167, 69, 0.7)',
'rgba(23, 162, 184, 0.7)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'bottom'
}
}
}
});
// API Requests by Source Chart
new Chart(document.getElementById('apiRequestsChart'), {
type: 'bar',
data: {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
datasets: [
{
label: 'Financial',
data: [42000, 39800, 43200, 45800, 41200, 28500, 22400],
backgroundColor: '#0d6efd'
},
{
label: 'Government',
data: [18500, 17400, 19200, 20100, 21800, 15400, 12100],
backgroundColor: '#198754'
},
{
label: 'Telecom',
data: [12500, 13200, 14200, 13800, 14600, 9800, 8200],
backgroundColor: '#0dcaf0'
},
{
label: 'Other',
data: [6800, 7200, 6500, 7100, 6900, 5200, 4100],
backgroundColor: '#ffc107'
}
]
},
options: {
responsive: true,
scales: {
x: { stacked: true },
y: { stacked: true }
}
}
});
// 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
new Chart(document.getElementById('responseTimeChart'), {
type: 'line',
data: {
labels: Array.from({length: 24}, (_, i) => i + ':00'),
datasets: [
{
label: 'Verification',
data: [85, 82, 80, 78, 82, 90, 95, 98, 102, 105, 100, 98, 95, 92, 90, 95, 100, 105, 110, 108, 105, 100, 95, 90],
borderColor: '#0d6efd',
backgroundColor: 'rgba(13, 110, 253, 0.1)',
tension: 0.3
},
{
label: 'Search',
data: [180, 175, 170, 165, 170, 185, 195, 205, 215, 220, 210, 200, 195, 190, 185, 190, 200, 210, 220, 215, 210, 200, 190, 180],
borderColor: '#198754',
backgroundColor: 'rgba(25, 135, 84, 0.1)',
tension: 0.3
},
// Additional datasets...
]
},
options: {
responsive: true,
scales: {
y: {
title: {
display: true,
text: 'Response Time (ms)'
}
}
}
}
});
</script>
@stop
......
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