389 lines
10 KiB
TypeScript
389 lines
10 KiB
TypeScript
import { html, cssManager } from '@design.estate/dees-element';
|
|
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`
|
|
<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;
|
|
}
|
|
</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-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,
|
|
unit: '$',
|
|
type: 'number',
|
|
icon: 'faReceipt'
|
|
},
|
|
{
|
|
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: 'perf1',
|
|
title: 'Database Load',
|
|
value: 42,
|
|
type: 'gauge',
|
|
icon: 'faDatabase',
|
|
gaugeOptions: {
|
|
min: 0,
|
|
max: 100,
|
|
thresholds: [
|
|
{ value: 0, color: '#10b981' },
|
|
{ value: 50, color: '#f59e0b' },
|
|
{ value: 75, color: '#ef4444' }
|
|
]
|
|
}
|
|
},
|
|
{
|
|
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,
|
|
type: 'percentage',
|
|
icon: 'faBolt',
|
|
color: '#3b82f6'
|
|
},
|
|
{
|
|
id: 'perf4',
|
|
title: 'Active Connections',
|
|
value: 1428,
|
|
type: 'number',
|
|
icon: 'faLink',
|
|
description: 'Peak: 2,100'
|
|
}
|
|
]}
|
|
.gridActions=${[
|
|
{
|
|
name: 'Auto Refresh',
|
|
iconName: 'faPlay',
|
|
action: async () => {
|
|
console.log('Starting auto refresh...');
|
|
}
|
|
}
|
|
]}
|
|
.minTileWidth=${280}
|
|
.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
|
|
];
|
|
}
|
|
|
|
// 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>
|
|
</div>
|
|
`;
|
|
}; |