hobokenchicken/GopherGate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement analytics and cost management dashboard pages

Browse Source
This commit is contained in:
Dustin Newkirk
2026-02-26 18:37:37 -05:00
parent 25986dd255
commit 519436eb4a
4 changed files with 309 additions and 582 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
static/js/dashboard.js
View File

@@ -141,8 +141,8 @@ class Dashboard {
case 'logs': return this.getLogsTemplate();
case 'monitoring': return this.getMonitoringTemplate();
case 'settings': return '<div class="loading-placeholder">Loading settings...</div>';
case 'analytics': return '<div class="empty-state"><h3>Analytics coming soon</h3></div>';
case 'costs': return '<div class="empty-state"><h3>Cost management coming soon</h3></div>';
case 'analytics': return this.getAnalyticsTemplate();
case 'costs': return this.getCostsTemplate();
default: return '<div class="empty-state"><h3>Page not found</h3></div>';
}
}
@@ -304,6 +304,90 @@ class Dashboard {
`;
}
getAnalyticsTemplate() {
return `
<div class="card">
<div class="card-header">
<div>
<h3 class="card-title">Usage Analytics</h3>
<p class="card-subtitle">Request volume and token distribution</p>
</div>
<div class="card-actions">
<button class="btn btn-secondary" id="export-data">
<i class="fas fa-download"></i> Export CSV
</button>
<button class="btn btn-primary" id="refresh-analytics">
<i class="fas fa-sync"></i> Refresh
</button>
</div>
</div>
<div class="chart-container" style="height: 400px;">
<canvas id="analytics-chart"></canvas>
</div>
</div>
<div class="grid-2">
<div class="chart-container">
<h3 class="card-title">Volume by Client</h3>
<canvas id="clients-chart" height="300"></canvas>
</div>
<div class="chart-container">
<h3 class="card-title">Model Distribution</h3>
<canvas id="models-chart" height="300"></canvas>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">Historical Usage Log</h3>
</div>
<div class="table-container">
<table class="table" id="usage-table">
<thead>
<tr><th>Date</th><th>Client</th><th>Provider</th><th>Model</th><th>Requests</th><th>Tokens</th><th>Cost</th></tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
`;
}
getCostsTemplate() {
return `
<div class="stats-grid" id="cost-stats"></div>
<div class="grid-2">
<div class="chart-container">
<h3 class="card-title">Provider Spending</h3>
<canvas id="costs-chart" height="300"></canvas>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">Budget Tracking</h3>
</div>
<div class="card-body" id="budget-progress">
<!-- Budget progress bars -->
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">Active Model Pricing</h3>
</div>
<div class="table-container">
<table class="table" id="pricing-table">
<thead>
<tr><th>Provider</th><th>Model</th><th>Input Cost</th><th>Output Cost</th><th>Last Updated</th></tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
`;
}
getMonitoringTemplate() {
return `
<div class="card">