diff --git a/ts_web/elements/dees-statsgrid.demo.ts b/ts_web/elements/dees-statsgrid.demo.ts
new file mode 100644
index 0000000..67ce39a
--- /dev/null
+++ b/ts_web/elements/dees-statsgrid.demo.ts
@@ -0,0 +1,389 @@
+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`
+
+
+
+
+
+
+
Full Featured Stats Grid
+
+ A comprehensive dashboard with various tile types, actions, and real-time updates.
+
+
+
+
+
+
Compact Grid (Smaller Tiles)
+
+ Same data displayed with smaller minimum tile width for more compact layouts.
+
+
+
+
+
+
Simple Metrics (No Actions)
+
+ Clean display without interactive elements for pure visualization.
+
+
+
+
+
+
Performance Monitoring
+
+ Real-time performance metrics with gauge visualizations and thresholds.
+
+
{
+ console.log('Starting auto refresh...');
+ }
+ }
+ ]}
+ .minTileWidth=${280}
+ .gap=${20}
+ >
+
+
+
+
+ ${this.tiles.map(tile => this.renderTile(tile))}
+
+
+ ${this.contextMenuVisible ? html`
+ this.contextMenuVisible = false}
+ >
+ ` : ''}
+ `;
+ }
+
+ private renderTile(tile: IStatsTile): TemplateResult {
+ const hasActions = tile.actions && tile.actions.length > 0;
+ const clickable = hasActions && tile.actions.length === 1;
+
+ return html`
+ this.handleTileAction(tile.actions![0], tile) : undefined}
+ @contextmenu=${hasActions ? (e: MouseEvent) => this.showContextMenu(e, tile) : undefined}
+ >
+
+
+
+ ${this.renderTileContent(tile)}
+
+
+ ${tile.description ? html`
+
${tile.description}
+ ` : ''}
+
+ ${tile.value}
+ ${tile.unit ? html`${tile.unit}` : ''}
+
+ `;
+
+ case 'gauge':
+ return this.renderGauge(tile);
+
+ case 'percentage':
+ return this.renderPercentage(tile);
+
+ case 'trend':
+ return this.renderTrend(tile);
+
+ case 'text':
+ return html`
+
+ ${tile.value}
+
+ `;
+
+ default:
+ return html`${tile.value}
`;
+ }
+ }
+
+ private renderGauge(tile: IStatsTile): TemplateResult {
+ const value = typeof tile.value === 'number' ? tile.value : parseFloat(tile.value);
+ const options = tile.gaugeOptions || { min: 0, max: 100 };
+ const percentage = ((value - options.min) / (options.max - options.min)) * 100;
+ const strokeDasharray = 251.2; // Circumference of circle with r=40
+ const strokeDashoffset = strokeDasharray - (strokeDasharray * percentage) / 100;
+
+ let strokeColor = tile.color || cssManager.bdTheme('#0084ff', '#0066cc');
+ if (options.thresholds) {
+ for (const threshold of options.thresholds.reverse()) {
+ if (value >= threshold.value) {
+ strokeColor = threshold.color;
+ break;
+ }
+ }
+ }
+
+ return html`
+
+
+
+ `;
+ }
+
+ private renderPercentage(tile: IStatsTile): TemplateResult {
+ const value = typeof tile.value === 'number' ? tile.value : parseFloat(tile.value);
+ const percentage = Math.min(100, Math.max(0, value));
+
+ return html`
+
+ `;
+ }
+
+ private renderTrend(tile: IStatsTile): TemplateResult {
+ if (!tile.trendData || tile.trendData.length < 2) {
+ return html`${tile.value}
`;
+ }
+
+ const data = tile.trendData;
+ const max = Math.max(...data);
+ const min = Math.min(...data);
+ const range = max - min || 1;
+ const width = 200;
+ const height = 60;
+ const points = data.map((value, index) => {
+ const x = (index / (data.length - 1)) * width;
+ const y = height - ((value - min) / range) * height;
+ return `${x},${y}`;
+ }).join(' ');
+
+ const areaPoints = `0,${height} ${points} ${width},${height}`;
+
+ return html`
+
+
+
+ ${tile.value}
+ ${tile.unit ? html`${tile.unit}` : ''}
+
+