update button and statsgrid with better styles.
This commit is contained in:
Juergen Kunz
@ -1,389 +1,516 @@
|
||||
import { html, cssManager } from '@design.estate/dees-element';
|
||||
import { html, css, cssManager } from '@design.estate/dees-element';
|
||||
import '@design.estate/dees-wcctools/demotools';
|
||||
import './dees-panel.js';
|
||||
import type { IStatsTile } from './dees-statsgrid.js';
|
||||
|
||||
export const demoFunc = () => {
|
||||
// Demo data with different tile types
|
||||
const demoTiles: IStatsTile[] = [
|
||||
{
|
||||
id: 'revenue',
|
||||
title: 'Total Revenue',
|
||||
value: 125420,
|
||||
unit: '$',
|
||||
type: 'number',
|
||||
icon: 'faDollarSign',
|
||||
description: '+12.5% from last month',
|
||||
color: '#22c55e',
|
||||
actions: [
|
||||
{
|
||||
name: 'View Details',
|
||||
iconName: 'faChartLine',
|
||||
action: async () => {
|
||||
console.log('Viewing revenue details for tile:', 'revenue');
|
||||
console.log('Current value:', 125420);
|
||||
alert(`Revenue Details: $125,420 (+12.5%)`);
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Export Data',
|
||||
iconName: 'faFileExport',
|
||||
action: async () => {
|
||||
console.log('Exporting revenue data');
|
||||
alert('Revenue data exported to CSV');
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'users',
|
||||
title: 'Active Users',
|
||||
value: 3847,
|
||||
type: 'number',
|
||||
icon: 'faUsers',
|
||||
description: '324 new this week',
|
||||
actions: [
|
||||
{
|
||||
name: 'View User List',
|
||||
iconName: 'faList',
|
||||
action: async () => {
|
||||
console.log('Viewing user list');
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'cpu',
|
||||
title: 'CPU Usage',
|
||||
value: 73,
|
||||
type: 'gauge',
|
||||
icon: 'faMicrochip',
|
||||
gaugeOptions: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
thresholds: [
|
||||
{ value: 0, color: '#22c55e' },
|
||||
{ value: 60, color: '#f59e0b' },
|
||||
{ value: 80, color: '#ef4444' }
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'storage',
|
||||
title: 'Storage Used',
|
||||
value: 65,
|
||||
type: 'percentage',
|
||||
icon: 'faHardDrive',
|
||||
description: '650 GB of 1 TB',
|
||||
color: '#3b82f6'
|
||||
},
|
||||
{
|
||||
id: 'memory',
|
||||
title: 'Memory Usage',
|
||||
value: 45,
|
||||
type: 'gauge',
|
||||
icon: 'faMemory',
|
||||
gaugeOptions: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
thresholds: [
|
||||
{ value: 0, color: '#22c55e' },
|
||||
{ value: 70, color: '#f59e0b' },
|
||||
{ value: 90, color: '#ef4444' }
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'requests',
|
||||
title: 'API Requests',
|
||||
value: '1.2k',
|
||||
unit: '/min',
|
||||
type: 'trend',
|
||||
icon: 'faServer',
|
||||
trendData: [45, 52, 38, 65, 72, 68, 75, 82, 79, 85, 88, 92]
|
||||
},
|
||||
{
|
||||
id: 'uptime',
|
||||
title: 'System Uptime',
|
||||
value: '99.95%',
|
||||
type: 'text',
|
||||
icon: 'faCheckCircle',
|
||||
color: '#22c55e',
|
||||
description: 'Last 30 days'
|
||||
},
|
||||
{
|
||||
id: 'latency',
|
||||
title: 'Response Time',
|
||||
value: 142,
|
||||
unit: 'ms',
|
||||
type: 'trend',
|
||||
icon: 'faClock',
|
||||
trendData: [150, 145, 148, 142, 138, 140, 135, 145, 142],
|
||||
description: 'P95 latency'
|
||||
},
|
||||
{
|
||||
id: 'errors',
|
||||
title: 'Error Rate',
|
||||
value: 0.03,
|
||||
unit: '%',
|
||||
type: 'number',
|
||||
icon: 'faExclamationTriangle',
|
||||
color: '#ef4444',
|
||||
actions: [
|
||||
{
|
||||
name: 'View Error Logs',
|
||||
iconName: 'faFileAlt',
|
||||
action: async () => {
|
||||
console.log('Viewing error logs');
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
// Grid actions for the demo
|
||||
const gridActions = [
|
||||
{
|
||||
name: 'Refresh',
|
||||
iconName: 'faSync',
|
||||
action: async () => {
|
||||
console.log('Refreshing stats...');
|
||||
// Simulate refresh animation
|
||||
const grid = document.querySelector('dees-statsgrid');
|
||||
if (grid) {
|
||||
grid.style.opacity = '0.5';
|
||||
setTimeout(() => {
|
||||
grid.style.opacity = '1';
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Export Report',
|
||||
iconName: 'faFileExport',
|
||||
action: async () => {
|
||||
console.log('Exporting stats report...');
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Settings',
|
||||
iconName: 'faCog',
|
||||
action: async () => {
|
||||
console.log('Opening settings...');
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
return html`
|
||||
<dees-demowrapper>
|
||||
<style>
|
||||
.demo-container {
|
||||
padding: 32px;
|
||||
background: ${cssManager.bdTheme('#f8f9fa', '#0a0a0a')};
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.demo-title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
}
|
||||
|
||||
.demo-description {
|
||||
font-size: 14px;
|
||||
color: ${cssManager.bdTheme('#666', '#aaa')};
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
position: fixed;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
padding: 8px 16px;
|
||||
background: ${cssManager.bdTheme('#fff', '#1a1a1a')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#2a2a2a')};
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
z-index: 100;
|
||||
}
|
||||
${css`
|
||||
.demo-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
padding: 24px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
dees-panel {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
dees-panel:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.tile-config {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 16px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.config-section {
|
||||
padding: 16px;
|
||||
background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.config-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
|
||||
}
|
||||
|
||||
.config-description {
|
||||
font-size: 13px;
|
||||
color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
|
||||
}
|
||||
|
||||
.code-block {
|
||||
background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 11.8%)')};
|
||||
border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 16.8%)')};
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
font-family: monospace;
|
||||
font-size: 13px;
|
||||
overflow-x: auto;
|
||||
white-space: pre;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
|
||||
|
||||
<div class="demo-container">
|
||||
<button class="theme-toggle" @click=${() => {
|
||||
document.body.classList.toggle('bright');
|
||||
}}>Toggle Theme</button>
|
||||
|
||||
<div class="demo-section">
|
||||
<h2 class="demo-title">Full Featured Stats Grid</h2>
|
||||
<p class="demo-description">
|
||||
A comprehensive dashboard with various tile types, actions, and real-time updates.
|
||||
</p>
|
||||
<dees-statsgrid
|
||||
.tiles=${demoTiles}
|
||||
.gridActions=${gridActions}
|
||||
.minTileWidth=${250}
|
||||
.gap=${16}
|
||||
></dees-statsgrid>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<h2 class="demo-title">Compact Grid (Smaller Tiles)</h2>
|
||||
<p class="demo-description">
|
||||
Same data displayed with smaller minimum tile width for more compact layouts.
|
||||
</p>
|
||||
<dees-statsgrid
|
||||
.tiles=${demoTiles.slice(0, 6)}
|
||||
.minTileWidth=${180}
|
||||
.gap=${12}
|
||||
></dees-statsgrid>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<h2 class="demo-title">Simple Metrics (No Actions)</h2>
|
||||
<p class="demo-description">
|
||||
Clean display without interactive elements for pure visualization.
|
||||
</p>
|
||||
<dees-panel .title=${'1. Comprehensive Dashboard'} .subtitle=${'Full-featured stats grid with various tile types, actions, and Lucide icons'}>
|
||||
<dees-statsgrid
|
||||
.tiles=${[
|
||||
{
|
||||
id: 'metric1',
|
||||
title: 'Total Sales',
|
||||
value: 48293,
|
||||
type: 'number',
|
||||
icon: 'faShoppingCart'
|
||||
},
|
||||
{
|
||||
id: 'metric2',
|
||||
title: 'Conversion Rate',
|
||||
value: 3.4,
|
||||
unit: '%',
|
||||
type: 'number',
|
||||
icon: 'faChartLine'
|
||||
},
|
||||
{
|
||||
id: 'metric3',
|
||||
title: 'Avg Order Value',
|
||||
value: 127.50,
|
||||
id: 'revenue',
|
||||
title: 'Total Revenue',
|
||||
value: 125420,
|
||||
unit: '$',
|
||||
type: 'number',
|
||||
icon: 'faReceipt'
|
||||
icon: 'lucide:dollar-sign',
|
||||
description: '+12.5% from last month',
|
||||
actions: [
|
||||
{
|
||||
name: 'View Details',
|
||||
iconName: 'lucide:trending-up',
|
||||
action: async () => {
|
||||
const output = document.querySelector('#action-output');
|
||||
if (output) {
|
||||
output.textContent = 'Viewing revenue details: $125,420 (+12.5%)';
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Export Data',
|
||||
iconName: 'lucide:download',
|
||||
action: async () => {
|
||||
const output = document.querySelector('#action-output');
|
||||
if (output) {
|
||||
output.textContent = 'Exporting revenue data to CSV...';
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'metric4',
|
||||
title: 'Customer Satisfaction',
|
||||
value: 92,
|
||||
type: 'percentage',
|
||||
icon: 'faSmile',
|
||||
color: '#22c55e'
|
||||
}
|
||||
]}
|
||||
.minTileWidth=${220}
|
||||
.gap=${16}
|
||||
></dees-statsgrid>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<h2 class="demo-title">Performance Monitoring</h2>
|
||||
<p class="demo-description">
|
||||
Real-time performance metrics with gauge visualizations and thresholds.
|
||||
</p>
|
||||
<dees-statsgrid
|
||||
.tiles=${[
|
||||
id: 'users',
|
||||
title: 'Active Users',
|
||||
value: 3847,
|
||||
type: 'number',
|
||||
icon: 'lucide:users',
|
||||
description: '324 new this week',
|
||||
actions: [
|
||||
{
|
||||
name: 'View User List',
|
||||
iconName: 'lucide:list',
|
||||
action: async () => {
|
||||
const output = document.querySelector('#action-output');
|
||||
if (output) {
|
||||
output.textContent = 'Opening user list...';
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'perf1',
|
||||
title: 'Database Load',
|
||||
value: 42,
|
||||
id: 'cpu',
|
||||
title: 'CPU Usage',
|
||||
value: 73,
|
||||
unit: '%',
|
||||
type: 'gauge',
|
||||
icon: 'faDatabase',
|
||||
icon: 'lucide:cpu',
|
||||
gaugeOptions: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
thresholds: [
|
||||
{ value: 0, color: '#10b981' },
|
||||
{ value: 50, color: '#f59e0b' },
|
||||
{ value: 75, color: '#ef4444' }
|
||||
{ value: 0, color: 'hsl(142.1 76.2% 36.3%)' },
|
||||
{ value: 60, color: 'hsl(45.4 93.4% 47.5%)' },
|
||||
{ value: 80, color: 'hsl(0 84.2% 60.2%)' }
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'perf2',
|
||||
title: 'Network I/O',
|
||||
value: 856,
|
||||
unit: 'MB/s',
|
||||
type: 'trend',
|
||||
icon: 'faNetworkWired',
|
||||
trendData: [720, 780, 823, 845, 812, 876, 856]
|
||||
},
|
||||
{
|
||||
id: 'perf3',
|
||||
title: 'Cache Hit Rate',
|
||||
value: 94.2,
|
||||
id: 'storage',
|
||||
title: 'Storage Used',
|
||||
value: 65,
|
||||
type: 'percentage',
|
||||
icon: 'faBolt',
|
||||
color: '#3b82f6'
|
||||
icon: 'lucide:hard-drive',
|
||||
description: '650 GB of 1 TB',
|
||||
},
|
||||
{
|
||||
id: 'perf4',
|
||||
title: 'Active Connections',
|
||||
value: 1428,
|
||||
type: 'number',
|
||||
icon: 'faLink',
|
||||
description: 'Peak: 2,100'
|
||||
id: 'latency',
|
||||
title: 'Response Time',
|
||||
value: 142,
|
||||
unit: 'ms',
|
||||
type: 'trend',
|
||||
icon: 'lucide:activity',
|
||||
trendData: [150, 145, 148, 142, 138, 140, 135, 145, 142],
|
||||
description: 'P95'
|
||||
},
|
||||
{
|
||||
id: 'uptime',
|
||||
title: 'System Uptime',
|
||||
value: '99.95%',
|
||||
type: 'text',
|
||||
icon: 'lucide:check-circle',
|
||||
color: 'hsl(142.1 76.2% 36.3%)',
|
||||
description: 'Last 30 days'
|
||||
}
|
||||
]}
|
||||
.gridActions=${[
|
||||
{
|
||||
name: 'Auto Refresh',
|
||||
iconName: 'faPlay',
|
||||
name: 'Refresh',
|
||||
iconName: 'lucide:refresh-cw',
|
||||
action: async () => {
|
||||
console.log('Starting auto refresh...');
|
||||
const grid = document.querySelector('dees-statsgrid');
|
||||
if (grid) {
|
||||
grid.style.opacity = '0.5';
|
||||
setTimeout(() => {
|
||||
grid.style.opacity = '1';
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Export',
|
||||
iconName: 'lucide:share',
|
||||
action: async () => {
|
||||
const output = document.querySelector('#action-output');
|
||||
if (output) {
|
||||
output.textContent = 'Exporting dashboard report...';
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Settings',
|
||||
iconName: 'lucide:settings',
|
||||
action: async () => {
|
||||
const output = document.querySelector('#action-output');
|
||||
if (output) {
|
||||
output.textContent = 'Opening dashboard settings...';
|
||||
}
|
||||
}
|
||||
}
|
||||
]}
|
||||
.minTileWidth=${250}
|
||||
.gap=${16}
|
||||
></dees-statsgrid>
|
||||
|
||||
<div id="action-output" style="margin-top: 16px; padding: 12px; background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')}; border-radius: 6px; font-size: 14px; font-family: monospace; color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};">
|
||||
<em>Click on tile actions or grid actions to see the result...</em>
|
||||
</div>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'2. Tile Types'} .subtitle=${'Different visualization types available in the stats grid'}>
|
||||
<dees-statsgrid
|
||||
.tiles=${[
|
||||
{
|
||||
id: 'number-example',
|
||||
title: 'Number Tile',
|
||||
value: 42195,
|
||||
unit: '$',
|
||||
type: 'number',
|
||||
icon: 'lucide:hash',
|
||||
description: 'Simple numeric display'
|
||||
},
|
||||
{
|
||||
id: 'gauge-example',
|
||||
title: 'Gauge Tile',
|
||||
value: 68,
|
||||
unit: '%',
|
||||
type: 'gauge',
|
||||
icon: 'lucide:gauge',
|
||||
gaugeOptions: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
thresholds: [
|
||||
{ value: 0, color: 'hsl(142.1 76.2% 36.3%)' },
|
||||
{ value: 50, color: 'hsl(45.4 93.4% 47.5%)' },
|
||||
{ value: 80, color: 'hsl(0 84.2% 60.2%)' }
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'percentage-example',
|
||||
title: 'Percentage Tile',
|
||||
value: 78,
|
||||
type: 'percentage',
|
||||
icon: 'lucide:percent',
|
||||
description: 'Progress bar visualization'
|
||||
},
|
||||
{
|
||||
id: 'trend-example',
|
||||
title: 'Trend Tile',
|
||||
value: 892,
|
||||
unit: 'ops/s',
|
||||
type: 'trend',
|
||||
icon: 'lucide:trending-up',
|
||||
trendData: [720, 750, 780, 795, 810, 835, 850, 865, 880, 892],
|
||||
description: 'avg'
|
||||
},
|
||||
{
|
||||
id: 'text-example',
|
||||
title: 'Text Tile',
|
||||
value: 'Operational',
|
||||
type: 'text',
|
||||
icon: 'lucide:info',
|
||||
color: 'hsl(142.1 76.2% 36.3%)',
|
||||
description: 'Status display'
|
||||
}
|
||||
]}
|
||||
.minTileWidth=${280}
|
||||
.gap=${16}
|
||||
></dees-statsgrid>
|
||||
|
||||
<div class="tile-config">
|
||||
<div class="config-section">
|
||||
<div class="config-title">Configuration Options</div>
|
||||
<div class="config-description">
|
||||
Each tile type supports different properties:
|
||||
<ul style="margin: 8px 0; padding-left: 20px;">
|
||||
<li><strong>Number:</strong> value, unit, color, description</li>
|
||||
<li><strong>Gauge:</strong> value, unit, gaugeOptions (min, max, thresholds)</li>
|
||||
<li><strong>Percentage:</strong> value (0-100), color, description</li>
|
||||
<li><strong>Trend:</strong> value, unit, trendData array, description</li>
|
||||
<li><strong>Text:</strong> value (string), color, description</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'3. Grid Configurations'} .subtitle=${'Different layout options and responsive behavior'}>
|
||||
<h4 style="margin: 0 0 16px 0; font-size: 16px; font-weight: 600;">Compact Layout (180px tiles)</h4>
|
||||
<dees-statsgrid
|
||||
.tiles=${[
|
||||
{ id: '1', title: 'Orders', value: 156, type: 'number', icon: 'lucide:shopping-cart' },
|
||||
{ id: '2', title: 'Revenue', value: 8420, unit: '$', type: 'number', icon: 'lucide:dollar-sign' },
|
||||
{ id: '3', title: 'Users', value: 423, type: 'number', icon: 'lucide:users' },
|
||||
{ id: '4', title: 'Growth', value: 12.5, unit: '%', type: 'number', icon: 'lucide:trending-up', color: 'hsl(142.1 76.2% 36.3%)' }
|
||||
]}
|
||||
.minTileWidth=${180}
|
||||
.gap=${12}
|
||||
></dees-statsgrid>
|
||||
|
||||
<h4 style="margin: 24px 0 16px 0; font-size: 16px; font-weight: 600;">Spacious Layout (320px tiles)</h4>
|
||||
<dees-statsgrid
|
||||
.tiles=${[
|
||||
{
|
||||
id: 'spacious1',
|
||||
title: 'Monthly Revenue',
|
||||
value: 184500,
|
||||
unit: '$',
|
||||
type: 'number',
|
||||
icon: 'lucide:credit-card',
|
||||
description: 'Total revenue this month'
|
||||
},
|
||||
{
|
||||
id: 'spacious2',
|
||||
title: 'Customer Satisfaction',
|
||||
value: 94,
|
||||
type: 'percentage',
|
||||
icon: 'lucide:smile',
|
||||
description: 'Based on 1,234 reviews'
|
||||
},
|
||||
{
|
||||
id: 'spacious3',
|
||||
title: 'Server Response',
|
||||
value: 98,
|
||||
unit: 'ms',
|
||||
type: 'trend',
|
||||
icon: 'lucide:server',
|
||||
trendData: [105, 102, 100, 99, 98, 98, 97, 98],
|
||||
description: 'avg response time'
|
||||
}
|
||||
]}
|
||||
.minTileWidth=${320}
|
||||
.gap=${20}
|
||||
></dees-statsgrid>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Simulate real-time updates
|
||||
setInterval(() => {
|
||||
const grids = document.querySelectorAll('dees-statsgrid');
|
||||
grids.forEach(grid => {
|
||||
if (grid.tiles && grid.tiles.length > 0) {
|
||||
// Update some random values
|
||||
const updatedTiles = [...grid.tiles];
|
||||
|
||||
// Update trends with new data point
|
||||
updatedTiles.forEach(tile => {
|
||||
if (tile.type === 'trend' && tile.trendData) {
|
||||
tile.trendData = [...tile.trendData.slice(1),
|
||||
tile.trendData[tile.trendData.length - 1] + Math.random() * 10 - 5
|
||||
];
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'4. Interactive Features'} .subtitle=${'Tiles with actions and real-time updates'}>
|
||||
<dees-statsgrid
|
||||
id="interactive-grid"
|
||||
.tiles=${[
|
||||
{
|
||||
id: 'live-cpu',
|
||||
title: 'Live CPU',
|
||||
value: 45,
|
||||
unit: '%',
|
||||
type: 'gauge',
|
||||
icon: 'lucide:cpu',
|
||||
gaugeOptions: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
thresholds: [
|
||||
{ value: 0, color: 'hsl(142.1 76.2% 36.3%)' },
|
||||
{ value: 60, color: 'hsl(45.4 93.4% 47.5%)' },
|
||||
{ value: 80, color: 'hsl(0 84.2% 60.2%)' }
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'live-requests',
|
||||
title: 'Requests/sec',
|
||||
value: 892,
|
||||
type: 'trend',
|
||||
icon: 'lucide:activity',
|
||||
trendData: [850, 860, 870, 880, 885, 890, 892]
|
||||
},
|
||||
{
|
||||
id: 'live-memory',
|
||||
title: 'Memory Usage',
|
||||
value: 62,
|
||||
type: 'percentage',
|
||||
icon: 'lucide:database'
|
||||
},
|
||||
{
|
||||
id: 'counter',
|
||||
title: 'Event Counter',
|
||||
value: 0,
|
||||
type: 'number',
|
||||
icon: 'lucide:zap',
|
||||
actions: [
|
||||
{
|
||||
name: 'Increment',
|
||||
iconName: 'lucide:plus',
|
||||
action: async () => {
|
||||
const grid = document.querySelector('#interactive-grid');
|
||||
const tile = grid.tiles.find(t => t.id === 'counter');
|
||||
tile.value = typeof tile.value === 'number' ? tile.value + 1 : 1;
|
||||
grid.tiles = [...grid.tiles];
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Reset',
|
||||
iconName: 'lucide:rotate-ccw',
|
||||
action: async () => {
|
||||
const grid = document.querySelector('#interactive-grid');
|
||||
const tile = grid.tiles.find(t => t.id === 'counter');
|
||||
tile.value = 0;
|
||||
grid.tiles = [...grid.tiles];
|
||||
}
|
||||
}
|
||||
|
||||
// Randomly update some numeric values
|
||||
if (tile.type === 'number' && Math.random() > 0.7) {
|
||||
const currentValue = typeof tile.value === 'number' ? tile.value : parseFloat(tile.value);
|
||||
tile.value = Math.round(currentValue + (Math.random() * 10 - 5));
|
||||
}
|
||||
|
||||
// Update gauge values
|
||||
if (tile.type === 'gauge' && Math.random() > 0.5) {
|
||||
const currentValue = typeof tile.value === 'number' ? tile.value : parseFloat(tile.value);
|
||||
const newValue = currentValue + (Math.random() * 10 - 5);
|
||||
tile.value = Math.max(tile.gaugeOptions?.min || 0,
|
||||
Math.min(tile.gaugeOptions?.max || 100, Math.round(newValue)));
|
||||
}
|
||||
});
|
||||
|
||||
grid.tiles = updatedTiles;
|
||||
]
|
||||
}
|
||||
});
|
||||
}, 3000);
|
||||
</script>
|
||||
]}
|
||||
.gridActions=${[
|
||||
{
|
||||
name: 'Start Live Updates',
|
||||
iconName: 'lucide:play',
|
||||
action: async function() {
|
||||
// Toggle live updates
|
||||
if (!window.liveUpdateInterval) {
|
||||
window.liveUpdateInterval = setInterval(() => {
|
||||
const grid = document.querySelector('#interactive-grid');
|
||||
if (grid) {
|
||||
const tiles = [...grid.tiles];
|
||||
|
||||
// Update CPU gauge
|
||||
const cpuTile = tiles.find(t => t.id === 'live-cpu');
|
||||
cpuTile.value = Math.max(0, Math.min(100, cpuTile.value + (Math.random() * 20 - 10)));
|
||||
|
||||
// Update requests trend
|
||||
const requestsTile = tiles.find(t => t.id === 'live-requests');
|
||||
const newValue = requestsTile.value + Math.round(Math.random() * 50 - 25);
|
||||
requestsTile.value = Math.max(800, newValue);
|
||||
requestsTile.trendData = [...requestsTile.trendData.slice(1), requestsTile.value];
|
||||
|
||||
// Update memory percentage
|
||||
const memoryTile = tiles.find(t => t.id === 'live-memory');
|
||||
memoryTile.value = Math.max(0, Math.min(100, memoryTile.value + (Math.random() * 10 - 5)));
|
||||
|
||||
grid.tiles = tiles;
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
this.name = 'Stop Live Updates';
|
||||
this.iconName = 'lucide:pause';
|
||||
} else {
|
||||
clearInterval(window.liveUpdateInterval);
|
||||
window.liveUpdateInterval = null;
|
||||
this.name = 'Start Live Updates';
|
||||
this.iconName = 'lucide:play';
|
||||
}
|
||||
}
|
||||
}
|
||||
]}
|
||||
.minTileWidth=${250}
|
||||
.gap=${16}
|
||||
></dees-statsgrid>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'5. Code Example'} .subtitle=${'How to implement a stats grid with TypeScript'}>
|
||||
<div class="code-block">${`const tiles: IStatsTile[] = [
|
||||
{
|
||||
id: 'revenue',
|
||||
title: 'Total Revenue',
|
||||
value: 125420,
|
||||
unit: '$',
|
||||
type: 'number',
|
||||
icon: 'lucide:dollar-sign',
|
||||
description: '+12.5% from last month',
|
||||
actions: [
|
||||
{
|
||||
name: 'View Details',
|
||||
iconName: 'lucide:trending-up',
|
||||
action: async () => {
|
||||
console.log('View revenue details');
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'cpu',
|
||||
title: 'CPU Usage',
|
||||
value: 73,
|
||||
unit: '%',
|
||||
type: 'gauge',
|
||||
icon: 'lucide:cpu',
|
||||
gaugeOptions: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
thresholds: [
|
||||
{ value: 0, color: 'hsl(142.1 76.2% 36.3%)' },
|
||||
{ value: 60, color: 'hsl(45.4 93.4% 47.5%)' },
|
||||
{ value: 80, color: 'hsl(0 84.2% 60.2%)' }
|
||||
]
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
// Render the stats grid
|
||||
html\`
|
||||
<dees-statsgrid
|
||||
.tiles=\${tiles}
|
||||
.minTileWidth=\${250}
|
||||
.gap=\${16}
|
||||
.gridActions=\${[
|
||||
{
|
||||
name: 'Refresh',
|
||||
iconName: 'lucide:refresh-cw',
|
||||
action: async () => console.log('Refresh')
|
||||
}
|
||||
]}
|
||||
></dees-statsgrid>
|
||||
\`;`}</div>
|
||||
</dees-panel>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Cleanup live updates on page unload
|
||||
window.addEventListener('beforeunload', () => {
|
||||
if (window.liveUpdateInterval) {
|
||||
clearInterval(window.liveUpdateInterval);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</dees-demowrapper>
|
||||
`;
|
||||
};
|
||||
Reference in New Issue
Block a user