fix: rename donut chart symbols to match actual bar chart type

SantiagoDePolonia · claude · SantiagoDePolonia · commit 5c2c06df3e5a · 2026-02-24T21:01:09.000+01:00
Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/internal/admin/dashboard/static/css/dashboard.css b/internal/admin/dashboard/static/css/dashboard.css
@@ -896,15 +896,15 @@ td.col-price {
 }
 
 /* Usage by Model Chart Section */
-.donut-section {
+.model-chart-section {
     background: var(--bg-surface);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 24px;
     margin-bottom: 24px;
 }
 
-.donut-section h3 {
+.model-chart-section h3 {
     font-size: 16px;
     font-weight: 600;
     margin-bottom: 16px;
diff --git a/internal/admin/dashboard/static/js/dashboard.js b/internal/admin/dashboard/static/js/dashboard.js
@@ -44,7 +44,7 @@ function dashboard() {
         usageLogSearch: '',
         usageLogModel: '',
         usageLogProvider: '',
-        usageDonutChart: null,
+        usageBarChart: null,
 
         _parseRoute(pathname) {
             const path = pathname.replace(/\/$/, '');
@@ -324,7 +324,7 @@ function dashboard() {
             localStorage.setItem('gomodel_theme', t);
             this.applyTheme();
             this.renderChart();
-            this.renderDonutChart();
+            this.renderBarChart();
         },
 
         toggleTheme() {
@@ -649,7 +649,7 @@ function dashboard() {
 
         async fetchUsagePage() {
             await Promise.all([this.fetchModelUsage(), this.fetchUsageLog(true)]);
-            this.renderDonutChart();
+            this.renderBarChart();
         },
 
         async fetchModelUsage() {
@@ -692,7 +692,7 @@ function dashboard() {
             this.usageMode = mode;
             const url = mode === 'costs' ? '/admin/dashboard/usage/costs' : '/admin/dashboard/usage';
             history.pushState(null, '', url);
-            this.renderDonutChart();
+            this.renderBarChart();
         },
 
         usageLogNextPage() {
@@ -738,15 +738,15 @@ function dashboard() {
                 String(d.getSeconds()).padStart(2, '0');
         },
 
-        _donutColors() {
+        _barColors() {
             return [
                 '#c2845a', '#7a9e7e', '#d4a574', '#b8a98e', '#8b9e6b',
                 '#7d8a97', '#c47a5a', '#6b8e6b', '#a09486', '#9b7ea4',
                 '#c49a6c'
             ];
         },
 
-        _donutData() {
+        _barData() {
             const sorted = [...this.modelUsage].sort((a, b) => {
                 if (this.usageMode === 'costs') {
                     return ((b.total_cost || 0) - (a.total_cost || 0));
@@ -776,40 +776,40 @@ function dashboard() {
             return { labels, values };
         },
 
-        donutLegendItems() {
-            const { labels, values } = this._donutData();
-            const colors = this._donutColors();
+        barLegendItems() {
+            const { labels, values } = this._barData();
+            const colors = this._barColors();
             return labels.map((label, i) => ({
                 label,
                 color: colors[i % colors.length],
                 value: this.usageMode === 'costs' ? '$' + values[i].toFixed(4) : this.formatTokensShort(values[i])
             }));
         },
 
-        renderDonutChart(retries) {
+        renderBarChart(retries) {
             if (retries === undefined) retries = 3;
             this.$nextTick(() => {
-                if (this.usageDonutChart) {
-                    this.usageDonutChart.destroy();
-                    this.usageDonutChart = null;
+                if (this.usageBarChart) {
+                    this.usageBarChart.destroy();
+                    this.usageBarChart = null;
                 }
 
                 if (this.modelUsage.length === 0) return;
                 if (this.page !== 'usage') return;
 
-                const canvas = document.getElementById('usageDonutChart');
+                const canvas = document.getElementById('usageBarChart');
                 if (!canvas || canvas.offsetWidth === 0) {
                     if (retries > 0) {
-                        setTimeout(() => this.renderDonutChart(retries - 1), 100);
+                        setTimeout(() => this.renderBarChart(retries - 1), 100);
                     }
                     return;
                 }
 
                 const colors = this.chartColors();
-                const { labels, values } = this._donutData();
-                const palette = this._donutColors();
+                const { labels, values } = this._barData();
+                const palette = this._barColors();
 
-                this.usageDonutChart = new Chart(canvas, {
+                this.usageBarChart = new Chart(canvas, {
                     type: 'bar',
                     data: {
                         labels: labels,
diff --git a/internal/admin/dashboard/templates/index.html b/internal/admin/dashboard/templates/index.html
@@ -72,10 +72,10 @@ <h2>Usage Analytics</h2>
     </div>
 
     <!-- Usage by Model Chart -->
-    <div class="donut-section" x-show="modelUsage.length > 0">
+    <div class="model-chart-section" x-show="modelUsage.length > 0">
         <h3 x-text="usageMode === 'tokens' ? 'Token Usage by Model' : 'Cost by Model'"></h3>
         <div class="bar-chart-wrap">
-            <canvas id="usageDonutChart"></canvas>
+            <canvas id="usageBarChart"></canvas>
         </div>
     </div>
 
