Reorganize player stats layout: place shot accuracy graph on top of performance chart
- Move shot accuracy distribution section above the tournament performance chart - Restructure charts-panel into two distinct sections with clear visual separation: - accuracy-section: Shows shot accuracy bar chart and distribution stats at top - performance-section: Shows tournament performance chart at bottom - Add CSS styling for both sections with consistent backgrounds and spacing - Update chart-info styles to accommodate h3 heading in performance section - Remove redundant panel-title since sections now have their own h3 headings - Improve visual hierarchy and organization for better readability 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -191,20 +191,26 @@
|
||||
|
||||
/* Chart Info Header */
|
||||
.chart-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
padding: 12px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.chart-info h3 {
|
||||
margin: 0 0 15px 0;
|
||||
color: #333;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.chart-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
font-size: 0.85rem;
|
||||
padding: 12px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.chart-stat {
|
||||
@@ -361,6 +367,36 @@
|
||||
border: 1px dashed #dee2e6;
|
||||
}
|
||||
|
||||
/* Accuracy and Performance Sections */
|
||||
.accuracy-section {
|
||||
background: #f8f9fa;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 25px;
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.accuracy-section h3 {
|
||||
margin: 0 0 15px 0;
|
||||
color: #333;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.performance-section {
|
||||
background: #f8f9fa;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.performance-section h3 {
|
||||
margin: 0 0 15px 0;
|
||||
color: #333;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Bottom Section - History */
|
||||
.bottom-section {
|
||||
display: grid;
|
||||
@@ -755,41 +791,25 @@
|
||||
<!-- Charts Section -->
|
||||
<div class="charts-section">
|
||||
<div class="charts-panel">
|
||||
<div class="panel-title">📈 <span data-i18n="analysis.performance">Performance by Tournament Type</span></div>
|
||||
<!-- Shot Accuracy Section (Top) -->
|
||||
<div class="accuracy-section">
|
||||
<h3 data-i18n="analysis.shot_accuracy">📊 Shot Accuracy Distribution</h3>
|
||||
|
||||
<!-- Tournament Type Buttons -->
|
||||
<div class="tournament-type-buttons">
|
||||
<button class="type-btn active targets-40" data-type="40 Targets">
|
||||
<span>💪</span> <span data-i18n="tournament_types.40_targets">40 Targets</span>
|
||||
</button>
|
||||
<button class="type-btn targets-20" data-type="20 Targets">
|
||||
<span>⚡</span> <span data-i18n="tournament_types.20_targets">20 Targets</span>
|
||||
</button>
|
||||
<button class="type-btn targets-4" data-type="4 Targets">
|
||||
<span>🎯</span> <span data-i18n="tournament_types.4_targets">4 Targets</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Chart Info and Stats -->
|
||||
<div class="chart-info" id="chartInfo">
|
||||
<div class="chart-stats">
|
||||
<div class="chart-stat">
|
||||
<div class="chart-stat-value" id="gameCount">0</div>
|
||||
<div class="chart-stat-label" data-i18n="tournament.tournaments">Games</div>
|
||||
</div>
|
||||
<div class="chart-stat">
|
||||
<div class="chart-stat-value" id="avgScore">0</div>
|
||||
<div class="chart-stat-label" data-i18n="results.average_score">Average</div>
|
||||
</div>
|
||||
<div class="chart-stat">
|
||||
<div class="chart-stat-value" id="bestScore">0</div>
|
||||
<div class="chart-stat-label" data-i18n="results.best_score">Best</div>
|
||||
</div>
|
||||
<!-- Tournament Type Buttons -->
|
||||
<div class="tournament-type-buttons">
|
||||
<button class="type-btn active targets-40" data-type="40 Targets">
|
||||
<span>💪</span> <span data-i18n="tournament_types.40_targets">40 Targets</span>
|
||||
</button>
|
||||
<button class="type-btn targets-20" data-type="20 Targets">
|
||||
<span>⚡</span> <span data-i18n="tournament_types.20_targets">20 Targets</span>
|
||||
</button>
|
||||
<button class="type-btn targets-4" data-type="4 Targets">
|
||||
<span>🎯</span> <span data-i18n="tournament_types.4_targets">4 Targets</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Shot Accuracy Bar Chart -->
|
||||
<div class="accuracy-chart-container">
|
||||
<h4 data-i18n="analysis.shot_accuracy">Shot Accuracy Distribution</h4>
|
||||
<div class="accuracy-bar-chart" id="accuracyBarChart"></div>
|
||||
</div>
|
||||
|
||||
@@ -842,9 +862,31 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Single Chart Container -->
|
||||
<div class="chart-container">
|
||||
<canvas id="tournamentChart"></canvas>
|
||||
<!-- Performance Chart Section (Bottom) -->
|
||||
<div class="performance-section">
|
||||
<div class="chart-info" id="chartInfo">
|
||||
<h3>📈 <span data-i18n="analysis.performance">Performance by Tournament Type</span></h3>
|
||||
|
||||
<div class="chart-stats">
|
||||
<div class="chart-stat">
|
||||
<div class="chart-stat-value" id="gameCount">0</div>
|
||||
<div class="chart-stat-label" data-i18n="tournament.tournaments">Games</div>
|
||||
</div>
|
||||
<div class="chart-stat">
|
||||
<div class="chart-stat-value" id="avgScore">0</div>
|
||||
<div class="chart-stat-label" data-i18n="results.average_score">Average</div>
|
||||
</div>
|
||||
<div class="chart-stat">
|
||||
<div class="chart-stat-value" id="bestScore">0</div>
|
||||
<div class="chart-stat-label" data-i18n="results.best_score">Best</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Single Chart Container -->
|
||||
<div class="chart-container">
|
||||
<canvas id="tournamentChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user