Skip to content

Instantly share code, notes, and snippets.

@vparihar01

vparihar01/reportingDahbord.html

Created April 12, 2023 17:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vparihar01/7c669a88964bfa757184b0040e86ffab to your computer and use it in GitHub Desktop.
Save vparihar01/7c669a88964bfa757184b0040e86ffab to your computer and use it in GitHub Desktop.
Download ZIP
Raw
reportingDahbord.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sarvagram Dashboard</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div class="container">
<h1 class="my-4">Sarvagram Dashboard</h1>
<div class="row">
<div class="col-md-4">
<h3>Portfolio Health</h3>
<canvas id="portfolioHealth"></canvas>
</div>
<div class="col-md-4">
<h3>Customer Acquisition and Retention</h3>
<canvas id="customerAcquisitionRetention"></canvas>
</div>
<div class="col-md-4">
<h3>Average Loan Size and Interest Rate</h3>
<canvas id="loanSizeInterestRate"></canvas>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h4>Customer Satisfaction Score</h4>
<canvas id="customerSatisfaction"></canvas>
</div>
<div class="col-md-4">
<h4>Total Number of Active Borrowers</h4>
<div id="activeBorrowers" class="display-4 text-center">1200</div>
</div>
<div class="col-md-4">
<h4>Operational Self-sufficiency</h4>
<canvas id="operationalSelfSufficiency"></canvas>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h4>Top 5 Branches by Revenue</h4>
<canvas id="branchesByRevenue"></canvas>
</div>
<div class="col-md-6">
<h4>Top 5 Branches by Expense</h4>
<canvas id="branchesByExpense"></canvas>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h4>Operating Efficiency</h4>
<canvas id="operatingEfficiency"></canvas>
</div>
<div class="col-md-4">
<h4>Staff Productivity</h4>
<canvas id="staffProductivity"></canvas>
</div>
<div class="col-md-4">
<h4>User Segments Based on Rural Households</h4>
<canvas id="userSegments"></canvas>
</div>
</div>
</div>
<script>
// portfolio Health Score
const portfolioHealthCtx = document.getElementById('portfolioHealth').getContext('2d');
const portfolioHealthChart = new Chart(portfolioHealthCtx, {
type: 'doughnut',
data: {
labels: ['Current', 'Delinquent', 'Defaulted'],
datasets: [{
data: [85, 10, 5],
backgroundColor: ['#4CAF50', '#FFC107', '#F44336']
}]
},
options: {
plugins: {
legend: {
display: true,
position: 'right'
}
}
}
});
// Customer Acquisition and Retention
const customerAcquisitionRetentionCtx = document.getElementById('customerAcquisitionRetention').getContext('2d');
const customerAcquisitionRetentionChart = new Chart(customerAcquisitionRetentionCtx, {
type: 'bar',
data: {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
datasets: [{
label: 'New Customers',
data: [100, 120, 150, 200],
backgroundColor: '#4CAF50'
},
{
label: 'Retained Customers',
data: [80, 100, 130, 180],
backgroundColor: '#FFC107'
}]
},
options: {
plugins: {
legend: {
display: true,
position: 'top'
}
},
scales: {
y: {
beginAtZero: true,
stacked: true
},
x: {
stacked: true
}
}
}
});
// portfolio Health Score
const loanSizeInterestRateCtx = document.getElementById('loanSizeInterestRate').getContext('2d');
const loanSizeInterestRateChart = new Chart(loanSizeInterestRateCtx, {
type: 'line',
data: {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
datasets: [{
label: 'Average Loan Size',
data: [5000, 5500, 6000, 6500],
borderColor: '#4CAF50',
yAxisID: 'y1',
fill: false
},
{
label: 'Average Interest Rate',
data: [12, 11.5, 11, 10.5],
borderColor: '#FFC107',
yAxisID: 'y2',
fill: false
}]
},
options: {
plugins: {
legend: {
display: true,
position: 'top'
}
},
scales: {
y1: {
type: 'linear',
position: 'left',
beginAtZero: true
},
y2: {
type: 'linear',
position: 'right',
beginAtZero: true,
grid: {
drawOnChartArea: false
}
},
x: {
beginAtZero: true
}
}
}
});
// Customer Satisfaction Score
const customerSatisfactionCtx = document.getElementById('customerSatisfaction').getContext('2d');
const customerSatisfactionChart = new Chart(customerSatisfactionCtx, {
type: 'doughnut',
data: {
labels: ['Satisfied', 'Neutral', 'Dissatisfied'],
datasets: [{
data: [70, 20, 10],
backgroundColor: ['#4CAF50', '#FFC107', '#F44336']
}]
}
});
// Operational Self-sufficiency
const operationalSelfSufficiencyCtx = document.getElementById('operationalSelfSufficiency').getContext('2d');
const operationalSelfSufficiencyChart = new Chart(operationalSelfSufficiencyCtx, {
type: 'line',
data: {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
datasets: [{
label: 'Operational Self-sufficiency',
data: [0.95, 1.05, 1.1, 1.15],
borderColor: '#007BFF',
fill: false
}]
}
});
// Top 5 Branches by Revenue
const branchesByRevenueCtx = document.getElementById('branchesByRevenue').getContext('2d');
const branchesByRevenueChart = new Chart(branchesByRevenueCtx, {
type: 'bar',
data: {
labels: ['Branch A', 'Branch B', 'Branch C', 'Branch D', 'Branch E'],
datasets: [{
label: 'Revenue',
data: [50000, 40000, 35000, 30000, 25000],
backgroundColor: '#4CAF50'
}]
}
});
// Top 5 Branches by Expense
const branchesByExpenseCtx = document.getElementById('branchesByExpense').getContext('2d');
const branchesByExpenseChart = new Chart(branchesByExpenseCtx, {
type: 'bar',
data: {
labels: ['Branch A', 'Branch B', 'Branch C', 'Branch D', 'Branch E'],
datasets: [{
label: 'Expense',
data: [45000, 38000, 32000, 28000, 20000],
backgroundColor: '#F44336'
}]
}
});
// Operating Efficiency
const operatingEfficiencyCtx = document.getElementById('operatingEfficiency').getContext('2d');
const operatingEfficiencyChart = new Chart(operatingEfficiencyCtx, {
type: 'line',
data: {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
datasets: [{
label: 'Operating Efficiency',
data: [0.8, 0.75, 0.7, 0.65],
borderColor: '#FFC107',
fill: false
}]
}
});
// Staff Productivity
const staffProductivityCtx = document.getElementById('staffProductivity').getContext('2d');
const staffProductivityChart = new Chart(staffProductivityCtx, {
type: 'line',
data: {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
datasets: [{
label: 'Staff Productivity',
data: [10, 12, 14, 16],
borderColor: '#9C27B0',
fill: false
}]
}
});
// User Segments Based on Rural Households
const userSegmentsCtx = document.getElementById('userSegments').getContext('2d');
const userSegmentsChart = new Chart(userSegmentsCtx, {
type: 'bar',
data: {
labels: ['Segment A', 'Segment B', 'Segment C', 'Segment D', 'Segment E'],
datasets: [{
label: 'User Count',
data: [200, 300, 400, 500, 800],
backgroundColor: ['#3F51B5', '#009688', '#E91E63', '#FF5722', '#795548']
}]
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment