Spaces:
Running
Running
| class BotStats extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| .stats-container { | |
| background: white; | |
| border-radius: 0.5rem; | |
| padding: 1rem; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); | |
| } | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 1rem; | |
| } | |
| .stat-item { | |
| padding: 0.75rem; | |
| border-radius: 0.375rem; | |
| background: #f8fafc; | |
| } | |
| .stat-value { | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| margin-top: 0.25rem; | |
| } | |
| .stat-label { | |
| font-size: 0.75rem; | |
| color: #64748b; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .positive { color: #10b981; } | |
| .negative { color: #ef4444; } | |
| </style> | |
| <div class="stats-container"> | |
| <h3 class="text-lg font-semibold mb-4">Performance Dashboard</h3> | |
| <div class="stats-grid"> | |
| <div class="stat-item"> | |
| <div class="stat-label">Win Rate</div> | |
| <div class="stat-value positive">82%</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-label">Avg Profit</div> | |
| <div class="stat-value positive">3.2%</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-label">Max Drawdown</div> | |
| <div class="stat-value negative">12.5%</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-label">Profit Factor</div> | |
| <div class="stat-value positive">2.8</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-label">Trades/Month</div> | |
| <div class="stat-value">24</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-label">Risk/Reward</div> | |
| <div class="stat-value">1:3</div> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| } | |
| } | |
| customElements.define('bot-stats', BotStats); |