-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstats.html
157 lines (154 loc) · 5.13 KB
/
stats.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html>
<head>
<title>The Give Hub - Analytics Dashboard</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background: #f5f5f5;
}
.dashboard {
max-width: 1200px;
margin: 0 auto;
}
.metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.metric-card {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.metric-title {
color: #666;
font-size: 14px;
margin-bottom: 8px;
}
.metric-value {
font-size: 24px;
font-weight: bold;
color: #333;
}
.chart-container {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin-bottom: 30px;
}
.charts-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
gap: 20px;
}
h1 {
color: #333;
margin-bottom: 30px;
}
h2 {
color: #444;
font-size: 18px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="dashboard">
<h1>The Give Hub Analytics Dashboard</h1>
<div class="metric-card">
<div class="metric-title">
<p>Our platform analytics are currently in the development phase as we've prioritized building core infrastructure elements first. This strategic decision was made to ensure a solid foundation before launching to users.
But since we know which key metrics we will be tracking, we have created a functional Analytics Dashboard (shown below) using sample data that has been generated during testing.
</div>
</div>
<br>
<div class="metrics-grid">
<div class="metric-card">
<div class="metric-title">Total Campaigns</div>
<div class="metric-value">187</div>
</div>
<div class="metric-card">
<div class="metric-title">Total Funds Raised</div>
<div class="metric-value">$847,230</div>
</div>
<div class="metric-card">
<div class="metric-title">Active Campaigns</div>
<div class="metric-value">38</div>
</div>
<div class="metric-card">
<div class="metric-title">Communities Served</div>
<div class="metric-value">47</div>
</div>
</div>
<div class="charts-grid">
<div class="chart-container">
<h2>Campaign Growth</h2>
<canvas id="campaignGrowthChart"></canvas>
</div>
<div class="chart-container">
<h2>Funding Distribution by Category</h2>
<canvas id="categoryDistributionChart"></canvas>
</div>
</div>
</div>
<script>
// Campaign Growth Chart
const campaignGrowthCtx = document.getElementById('campaignGrowthChart').getContext('2d');
new Chart(campaignGrowthCtx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
datasets: [{
label: 'Total Campaigns',
data: [20, 25, 25, 30, 35, 40],
borderColor: '#8884d8',
tension: 0.1
}, {
label: 'Successful Campaigns',
data: [12, 15, 18, 22, 25, 28],
borderColor: '#82ca9d',
tension: 0.1
}]
},
options: {
responsive: true,
maintainAspectRatio: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
// Category Distribution Chart
const categoryDistributionCtx = document.getElementById('categoryDistributionChart').getContext('2d');
new Chart(categoryDistributionCtx, {
type: 'pie',
data: {
labels: ['Education', 'Healthcare', 'Water Access', 'Infrastructure', 'Energy'],
datasets: [{
data: [35, 25, 20, 15, 5],
backgroundColor: [
'#0088FE',
'#00C49F',
'#FFBB28',
'#FF8042',
'#8884d8'
]
}]
},
options: {
responsive: true,
maintainAspectRatio: true
}
});
</script>
</body>
</html>