| class CustomAnalyticsCard extends HTMLElement { |
| connectedCallback() { |
| const title = this.getAttribute('title') || 'Metric'; |
| const value = this.getAttribute('value') || '0'; |
| const change = this.getAttribute('change') || '0'; |
| const icon = this.getAttribute('icon') || 'trending-up'; |
| const trend = this.getAttribute('trend') || 'up'; |
|
|
| this.attachShadow({ mode: 'open' }); |
| this.shadowRoot.innerHTML = ` |
| <style> |
| .card { |
| background: var(--surface); |
| border-radius: var(--radius); |
| padding: 1.5rem; |
| box-shadow: var(--shadow-sm); |
| border: 1px solid var(--border); |
| transition: all 0.2s ease; |
| } |
| .card:hover { |
| transform: translateY(-2px); |
| box-shadow: var(--shadow); |
| } |
| .card-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: flex-start; |
| margin-bottom: 1rem; |
| } |
| .card-title { |
| font-size: 0.875rem; |
| color: var(--text-secondary); |
| font-weight: 500; |
| } |
| .card-value { |
| font-size: 1.5rem; |
| font-weight: 700; |
| color: var(--text-primary); |
| margin: 0.5rem 0; |
| } |
| .card-change { |
| display: flex; |
| align-items: center; |
| font-size: 0.75rem; |
| font-weight: 500; |
| } |
| .change-up { |
| color: var(--success); |
| } |
| .change-down { |
| color: var(--danger); |
| } |
| .card-icon { |
| width: 2.5rem; |
| height: 2.5rem; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| background: rgba(123, 104, 238, 0.1); |
| color: var(--primary); |
| } |
| </style> |
| <div class="card"> |
| <div class="card-header"> |
| <div class="card-title">${title}</div> |
| <div class="card-icon"> |
| <i data-feather="${icon}"></i> |
| </div> |
| </div> |
| <div class="card-value">${value}</div> |
| <div class="card-change ${'change-' + trend}"> |
| <i data-feather="${trend === 'up' ? 'trending-up' : 'trending-down'}" class="mr-1"></i> |
| ${change}% ${trend === 'up' ? 'increase' : 'decrease'} |
| </div> |
| </div> |
| `; |
| } |
| } |
| customElements.define('custom-analytics-card', CustomAnalyticsCard); |
