Skip to content

Instantly share code, notes, and snippets.

@dpanshug
Last active December 10, 2025 08:12
Show Gist options
  • Select an option

  • Save dpanshug/a1fd34d5f8110e1aa5e8cd3fcd5a5fc4 to your computer and use it in GitHub Desktop.

Select an option

Save dpanshug/a1fd34d5f8110e1aa5e8cd3fcd5a5fc4 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RHOAI Dashboard Team - Model Registry Contributions</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--bg-primary: #0d1117;
--bg-secondary: #161b22;
--bg-tertiary: #21262d;
--accent-blue: #58a6ff;
--accent-green: #3fb950;
--accent-purple: #a371f7;
--accent-orange: #d29922;
--accent-red: #f85149;
--accent-pink: #db61a2;
--accent-cyan: #39c5cf;
--text-primary: #f0f6fc;
--text-secondary: #8b949e;
--border-color: #30363d;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Space Grotesk', sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
min-height: 100vh;
background-image:
radial-gradient(ellipse at 20% 0%, rgba(88, 166, 255, 0.08) 0%, transparent 50%),
radial-gradient(ellipse at 80% 100%, rgba(163, 113, 247, 0.08) 0%, transparent 50%);
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 40px 24px;
}
header {
text-align: center;
margin-bottom: 48px;
position: relative;
}
header::before {
content: '';
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 4px;
background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple));
border-radius: 2px;
}
h1 {
font-size: 2.5rem;
font-weight: 700;
background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 8px;
}
.subtitle {
color: var(--text-secondary);
font-size: 1.1rem;
font-weight: 400;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 40px;
}
.stat-card {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 24px;
text-align: center;
position: relative;
overflow: hidden;
transition: transform 0.2s, box-shadow 0.2s;
}
.stat-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
}
.stat-card:nth-child(1)::before { background: var(--accent-blue); }
.stat-card:nth-child(2)::before { background: var(--accent-green); }
.stat-card:nth-child(3)::before { background: var(--accent-purple); }
.stat-card:nth-child(4)::before { background: var(--accent-orange); }
.stat-number {
font-family: 'JetBrains Mono', monospace;
font-size: 2.5rem;
font-weight: 600;
margin-bottom: 4px;
}
.stat-card:nth-child(1) .stat-number { color: var(--accent-blue); }
.stat-card:nth-child(2) .stat-number { color: var(--accent-green); }
.stat-card:nth-child(3) .stat-number { color: var(--accent-purple); }
.stat-card:nth-child(4) .stat-number { color: var(--accent-orange); }
.stat-label {
color: var(--text-secondary);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.charts-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-bottom: 40px;
}
.chart-card {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 24px;
}
.chart-card.full-width {
grid-column: 1 / -1;
}
.chart-title {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.chart-title::before {
content: '';
width: 4px;
height: 20px;
background: var(--accent-blue);
border-radius: 2px;
}
.chart-container {
position: relative;
height: 350px;
}
.chart-container.tall {
height: 450px;
}
.table-container {
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 0.95rem;
}
th, td {
padding: 14px 16px;
text-align: left;
border-bottom: 1px solid var(--border-color);
}
th {
background: var(--bg-tertiary);
color: var(--text-secondary);
font-weight: 600;
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 0.5px;
}
tr:hover td {
background: rgba(88, 166, 255, 0.05);
}
.contributor-name {
display: flex;
align-items: center;
gap: 12px;
}
.avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 0.85rem;
}
.github-handle {
color: var(--text-secondary);
font-family: 'JetBrains Mono', monospace;
font-size: 0.85rem;
}
.badge {
display: inline-block;
padding: 4px 10px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
font-family: 'JetBrains Mono', monospace;
}
.badge-commits {
background: rgba(88, 166, 255, 0.15);
color: var(--accent-blue);
}
.badge-added {
background: rgba(63, 185, 80, 0.15);
color: var(--accent-green);
}
.badge-removed {
background: rgba(248, 81, 73, 0.15);
color: var(--accent-red);
}
footer {
text-align: center;
padding-top: 40px;
border-top: 1px solid var(--border-color);
color: var(--text-secondary);
font-size: 0.9rem;
}
@media (max-width: 1024px) {
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.charts-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.stats-grid {
grid-template-columns: 1fr;
}
h1 {
font-size: 1.8rem;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>RHOAI Dashboard Team</h1>
<p class="subtitle">Contributions to Kubeflow Model Registry (kubeflow/model-registry)</p>
</header>
<div class="stats-grid">
<div class="stat-card">
<div class="stat-number">11</div>
<div class="stat-label">Team Members</div>
</div>
<div class="stat-card">
<div class="stat-number">256</div>
<div class="stat-label">Total Commits</div>
</div>
<div class="stat-card">
<div class="stat-number">142K+</div>
<div class="stat-label">Lines Added</div>
</div>
<div class="stat-card">
<div class="stat-number">14.6%</div>
<div class="stat-label">of Repo Commits</div>
</div>
</div>
<div class="charts-grid">
<div class="chart-card">
<h3 class="chart-title">Commits by Contributor</h3>
<div class="chart-container">
<canvas id="commitsChart"></canvas>
</div>
</div>
<div class="chart-card">
<h3 class="chart-title">Team vs Rest of Repository</h3>
<div class="chart-container">
<canvas id="pieChart"></canvas>
</div>
</div>
<div class="chart-card full-width">
<h3 class="chart-title">Lines of Code Changed</h3>
<div class="chart-container tall">
<canvas id="linesChart"></canvas>
</div>
</div>
<div class="chart-card full-width">
<h3 class="chart-title">UI Files Modified per Contributor</h3>
<div class="chart-container">
<canvas id="filesChart"></canvas>
</div>
</div>
</div>
<div class="chart-card full-width">
<h3 class="chart-title">Detailed Contribution Table</h3>
<div class="table-container">
<table>
<thead>
<tr>
<th>Contributor</th>
<th>Commits</th>
<th>Lines Added</th>
<th>Lines Removed</th>
<th>Net Lines</th>
<th>UI Files Changed</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="contributor-name">
<div class="avatar">EI</div>
<div>
<div>Eder Ignatowicz</div>
<div class="github-handle">@ederign</div>
</div>
</div>
</td>
<td><span class="badge badge-commits">60</span></td>
<td><span class="badge badge-added">+39,454</span></td>
<td><span class="badge badge-removed">-16,480</span></td>
<td>+22,974</td>
<td>503</td>
</tr>
<tr>
<td>
<div class="contributor-name">
<div class="avatar">LF</div>
<div>
<div>Lucas Fernandez</div>
<div class="github-handle">@lucferbux</div>
</div>
</div>
</td>
<td><span class="badge badge-commits">53</span></td>
<td><span class="badge badge-added">+45,863</span></td>
<td><span class="badge badge-removed">-26,646</span></td>
<td>+19,217</td>
<td>1,219</td>
</tr>
<tr>
<td>
<div class="contributor-name">
<div class="avatar">PP</div>
<div>
<div>Pushpa Padti</div>
<div class="github-handle">@ppadti</div>
</div>
</div>
</td>
<td><span class="badge badge-commits">29</span></td>
<td><span class="badge badge-added">+12,658</span></td>
<td><span class="badge badge-removed">-3,088</span></td>
<td>+9,570</td>
<td>336</td>
</tr>
<tr>
<td>
<div class="contributor-name">
<div class="avatar">YK</div>
<div>
<div>Yulia Krimerman</div>
<div class="github-handle">@YuliaKrimerman</div>
</div>
</div>
</td>
<td><span class="badge badge-commits">26</span></td>
<td><span class="badge badge-added">+8,963</span></td>
<td><span class="badge badge-removed">-1,120</span></td>
<td>+7,843</td>
<td>187</td>
</tr>
<tr>
<td>
<div class="contributor-name">
<div class="avatar">MD</div>
<div>
<div>Manaswini Das</div>
<div class="github-handle">@manaswinidas</div>
</div>
</div>
</td>
<td><span class="badge badge-commits">24</span></td>
<td><span class="badge badge-added">+4,890</span></td>
<td><span class="badge badge-removed">-2,085</span></td>
<td>+2,805</td>
<td>185</td>
</tr>
<tr>
<td>
<div class="contributor-name">
<div class="avatar">GS</div>
<div>
<div>Griffin Sullivan</div>
<div class="github-handle">@Griffin-Sullivan</div>
</div>
</div>
</td>
<td><span class="badge badge-commits">22</span></td>
<td><span class="badge badge-added">+21,235</span></td>
<td><span class="badge badge-removed">-8,740</span></td>
<td>+12,495</td>
<td>266</td>
</tr>
<tr>
<td>
<div class="contributor-name">
<div class="avatar">RS</div>
<div>
<div>Robert Sun</div>
<div class="github-handle">@rsun19</div>
</div>
</div>
</td>
<td><span class="badge badge-commits">16</span></td>
<td><span class="badge badge-added">+4,620</span></td>
<td><span class="badge badge-removed">-1,179</span></td>
<td>+3,441</td>
<td>127</td>
</tr>
<tr>
<td>
<div class="contributor-name">
<div class="avatar">MT</div>
<div>
<div>Mike Turley</div>
<div class="github-handle">@mturley</div>
</div>
</div>
</td>
<td><span class="badge badge-commits">11</span></td>
<td><span class="badge badge-added">+469</span></td>
<td><span class="badge badge-removed">-922</span></td>
<td>-453</td>
<td>50</td>
</tr>
<tr>
<td>
<div class="contributor-name">
<div class="avatar">CV</div>
<div>
<div>Christian Vogt</div>
<div class="github-handle">@christianvogt</div>
</div>
</div>
</td>
<td><span class="badge badge-commits">7</span></td>
<td><span class="badge badge-added">+1,603</span></td>
<td><span class="badge badge-removed">-492</span></td>
<td>+1,111</td>
<td>36</td>
</tr>
<tr>
<td>
<div class="contributor-name">
<div class="avatar">CA</div>
<div>
<div>Claudia Alphonse</div>
<div class="github-handle">@claudialphonse78</div>
</div>
</div>
</td>
<td><span class="badge badge-commits">4</span></td>
<td><span class="badge badge-added">+1,057</span></td>
<td><span class="badge badge-removed">-224</span></td>
<td>+833</td>
<td>25</td>
</tr>
<tr>
<td>
<div class="contributor-name">
<div class="avatar">JW</div>
<div>
<div>Juntao Wang</div>
<div class="github-handle">@DaoDaoNoCode</div>
</div>
</div>
</td>
<td><span class="badge badge-commits">4</span></td>
<td><span class="badge badge-added">+1,541</span></td>
<td><span class="badge badge-removed">-644</span></td>
<td>+897</td>
<td>34</td>
</tr>
</tbody>
</table>
</div>
</div>
<footer>
<p>Data generated from kubeflow/model-registry • December 2025</p>
</footer>
</div>
<script>
// Chart.js global defaults
Chart.defaults.color = '#8b949e';
Chart.defaults.borderColor = '#30363d';
Chart.defaults.font.family = "'Space Grotesk', sans-serif";
// Contributors data
const contributors = [
'Eder Ignatowicz',
'Lucas Fernandez',
'Pushpa Padti',
'Yulia Krimerman',
'Manaswini Das',
'Griffin Sullivan',
'Robert Sun',
'Mike Turley',
'Christian Vogt',
'Claudia Alphonse',
'Juntao Wang'
];
const commits = [60, 53, 29, 26, 24, 22, 16, 11, 7, 4, 4];
const linesAdded = [39454, 45863, 12658, 8963, 4890, 21235, 4620, 469, 1603, 1057, 1541];
const linesRemoved = [16480, 26646, 3088, 1120, 2085, 8740, 1179, 922, 492, 224, 644];
const filesChanged = [503, 1219, 336, 187, 185, 266, 127, 50, 36, 25, 34];
const colors = [
'#58a6ff', '#3fb950', '#a371f7', '#d29922', '#f85149',
'#db61a2', '#39c5cf', '#f78166', '#7ee787', '#79c0ff', '#d2a8ff'
];
// Commits Chart
new Chart(document.getElementById('commitsChart'), {
type: 'bar',
data: {
labels: contributors,
datasets: [{
label: 'Commits',
data: commits,
backgroundColor: colors,
borderRadius: 6,
borderSkipped: false
}]
},
options: {
indexAxis: 'y',
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false }
},
scales: {
x: {
grid: { color: '#21262d' },
ticks: { font: { family: "'JetBrains Mono', monospace" } }
},
y: {
grid: { display: false },
ticks: { font: { size: 11 } }
}
}
}
});
// Pie Chart
new Chart(document.getElementById('pieChart'), {
type: 'doughnut',
data: {
labels: ['RHOAI Dashboard Team', 'Other Contributors'],
datasets: [{
data: [256, 1495],
backgroundColor: ['#58a6ff', '#21262d'],
borderColor: ['#58a6ff', '#30363d'],
borderWidth: 2,
hoverOffset: 8
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
cutout: '65%',
plugins: {
legend: {
position: 'bottom',
labels: {
padding: 20,
usePointStyle: true,
font: { size: 13 }
}
}
}
}
});
// Lines Chart
new Chart(document.getElementById('linesChart'), {
type: 'bar',
data: {
labels: contributors,
datasets: [
{
label: 'Lines Added',
data: linesAdded,
backgroundColor: '#3fb950',
borderRadius: 4
},
{
label: 'Lines Removed',
data: linesRemoved,
backgroundColor: '#f85149',
borderRadius: 4
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
labels: { usePointStyle: true, padding: 20 }
}
},
scales: {
x: {
grid: { display: false },
ticks: { font: { size: 10 }, maxRotation: 45 }
},
y: {
grid: { color: '#21262d' },
ticks: {
font: { family: "'JetBrains Mono', monospace" },
callback: (v) => v >= 1000 ? (v/1000) + 'K' : v
}
}
}
}
});
// Files Chart
new Chart(document.getElementById('filesChart'), {
type: 'bar',
data: {
labels: contributors,
datasets: [{
label: 'UI Files Modified',
data: filesChanged,
backgroundColor: '#a371f7',
borderRadius: 6,
borderSkipped: false
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false }
},
scales: {
x: {
grid: { display: false },
ticks: { font: { size: 10 }, maxRotation: 45 }
},
y: {
grid: { color: '#21262d' },
ticks: { font: { family: "'JetBrains Mono', monospace" } }
}
}
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment