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

feat(dashboard): add time-frame filtering and used-models-only pricing
Some checks failed
CI / Check (push) Has been cancelled
Details
CI / Clippy (push) Has been cancelled
Details
CI / Formatting (push) Has been cancelled
Details
CI / Test (push) Has been cancelled
Details
CI / Release Build (push) Has been cancelled
Details

Browse Source 
- All usage endpoints now accept ?period=today|24h|7d|30d|all|custom
  with optional &from=ISO&to=ISO for custom ranges
- Time-series chart adapts granularity: hourly for today/24h, daily for
  7d/30d/all
- Analytics and Costs pages have period selector buttons with custom
  date-range picker
- Pricing table on Costs page now only shows models that have actually
  been used (GET /models?used_only=true)
- Cache-bust version bumped to v=6
This commit is contained in:
Dustin Newkirk
2026-03-02 15:29:23 -05:00
parent 54c45cbfca
commit 5bf41be343
7 changed files with 498 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
static/js/dashboard.js
View File

@@ -317,6 +317,15 @@ class Dashboard {
<p class="card-subtitle">Request volume and token distribution</p>
</div>
<div class="card-actions">
<div class="period-selector" id="analytics-period">
<button class="btn btn-secondary btn-sm active" data-period="24h">24h</button>
<button class="btn btn-secondary btn-sm" data-period="7d">7 Days</button>
<button class="btn btn-secondary btn-sm" data-period="30d">30 Days</button>
<button class="btn btn-secondary btn-sm" data-period="all">All</button>
<button class="btn btn-secondary btn-sm" data-period="custom">
<i class="fas fa-calendar"></i> Custom
</button>
</div>
<button class="btn btn-secondary" id="export-data">
<i class="fas fa-download"></i> Export CSV
</button>
@@ -325,6 +334,13 @@ class Dashboard {
</button>
</div>
</div>
<div id="analytics-custom-range" style="display:none; padding: 0 1.5rem 1rem; gap: 0.5rem; align-items: center;">
<label style="font-size:0.85rem; color:var(--fg4);">From</label>
<input type="date" id="analytics-from" class="input-sm">
<label style="font-size:0.85rem; color:var(--fg4);">To</label>
<input type="date" id="analytics-to" class="input-sm">
<button class="btn btn-primary btn-sm" id="analytics-apply-custom">Apply</button>
</div>
<div class="chart-container" style="height: 400px;">
<canvas id="analytics-chart"></canvas>
</div>
@@ -359,6 +375,33 @@ class Dashboard {
getCostsTemplate() {
return `
<div class="card" style="margin-bottom: 1.5rem;">
<div class="card-header">
<div>
<h3 class="card-title">Cost Overview</h3>
<p class="card-subtitle">Spending and pricing across providers</p>
</div>
<div class="card-actions">
<div class="period-selector" id="costs-period">
<button class="btn btn-secondary btn-sm" data-period="today">Today</button>
<button class="btn btn-secondary btn-sm active" data-period="7d">7 Days</button>
<button class="btn btn-secondary btn-sm" data-period="30d">30 Days</button>
<button class="btn btn-secondary btn-sm" data-period="all">All Time</button>
<button class="btn btn-secondary btn-sm" data-period="custom">
<i class="fas fa-calendar"></i> Custom
</button>
</div>
</div>
</div>
<div id="costs-custom-range" style="display:none; padding: 0 1.5rem 1rem; gap: 0.5rem; align-items: center;">
<label style="font-size:0.85rem; color:var(--fg4);">From</label>
<input type="date" id="costs-from" class="input-sm">
<label style="font-size:0.85rem; color:var(--fg4);">To</label>
<input type="date" id="costs-to" class="input-sm">
<button class="btn btn-primary btn-sm" id="costs-apply-custom">Apply</button>
</div>
</div>
<div class="stats-grid" id="cost-stats"></div>
<div class="grid-2">
@@ -378,7 +421,7 @@ class Dashboard {
<div class="card">
<div class="card-header">
<h3 class="card-title">Active Model Pricing</h3>
<h3 class="card-title">Model Pricing (Used Models)</h3>
</div>
<div class="table-container">
<table class="table" id="pricing-table">