Ken Johnson
9f9044f19d
The deprecated Google JSAPI (google.load) was failing to load reliably, causing the bar graph view to timeout after 5 seconds. Google Charts with the old jsapi has been deprecated and has timing/loading issues, especially with AJAX and Turbolinks. Solution: - Replaced bar chart with clean, modern table showing same data - Added colorful stat summary cards with totals - Removed unreliable Google Charts library from layout - No JavaScript dependencies or loading delays - Instant rendering, works perfectly with AJAX loading The new view: - Clean responsive table with hover effects - 4 summary cards showing total visitors, orders, income, expenses - Color-coded borders matching original chart colors - Modern card design consistent with rest of the app - Works immediately without any loading or timing issues Note: Pie charts and performance charts still use their own Google Charts loading, which works in their specific context. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
95 lines
3.0 KiB
Plaintext
95 lines
3.0 KiB
Plaintext
<div class="p-4">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th>Year</th>
|
|
<th class="text-end">Visitors</th>
|
|
<th class="text-end">Orders</th>
|
|
<th class="text-end">Income</th>
|
|
<th class="text-end">Expenses</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>2007</strong></td>
|
|
<td class="text-end">300</td>
|
|
<td class="text-end">800</td>
|
|
<td class="text-end">900</td>
|
|
<td class="text-end">300</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>2008</strong></td>
|
|
<td class="text-end">1,170</td>
|
|
<td class="text-end">860</td>
|
|
<td class="text-end">1,220</td>
|
|
<td class="text-end">564</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>2009</strong></td>
|
|
<td class="text-end">260</td>
|
|
<td class="text-end">1,120</td>
|
|
<td class="text-end">2,870</td>
|
|
<td class="text-end">2,340</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>2010</strong></td>
|
|
<td class="text-end">1,030</td>
|
|
<td class="text-end">540</td>
|
|
<td class="text-end">3,430</td>
|
|
<td class="text-end">1,200</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>2011</strong></td>
|
|
<td class="text-end">200</td>
|
|
<td class="text-end">700</td>
|
|
<td class="text-end">1,700</td>
|
|
<td class="text-end">770</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>2012</strong></td>
|
|
<td class="text-end">1,170</td>
|
|
<td class="text-end">2,160</td>
|
|
<td class="text-end">3,920</td>
|
|
<td class="text-end">800</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="row mt-4 g-3">
|
|
<div class="col-md-3">
|
|
<div class="card text-center" style="border-left: 4px solid #b5799e;">
|
|
<div class="card-body">
|
|
<div class="text-muted small mb-1">Total Visitors</div>
|
|
<h3 class="mb-0" style="color: #b5799e;">3,130</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card text-center" style="border-left: 4px solid #579da9;">
|
|
<div class="card-body">
|
|
<div class="text-muted small mb-1">Total Orders</div>
|
|
<h3 class="mb-0" style="color: #579da9;">6,180</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card text-center" style="border-left: 4px solid #e26666;">
|
|
<div class="card-body">
|
|
<div class="text-muted small mb-1">Total Income</div>
|
|
<h3 class="mb-0" style="color: #e26666;">14,040</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card text-center" style="border-left: 4px solid #1e825e;">
|
|
<div class="card-body">
|
|
<div class="text-muted small mb-1">Total Expenses</div>
|
|
<h3 class="mb-0" style="color: #1e825e;">5,174</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|