feat: Integrate dees-statsgrid component into dashboard view with dynamic stats tiles

ts_web/elements/dees-simple-appdash.demo.ts

@@ -4,6 +4,8 @@ import './dees-form.js';
 import './dees-input-text.js';
 import './dees-input-checkbox.js';
 import './dees-form-submit.js';
+import './dees-statsgrid.js';
+import type { IStatsTile } from './dees-statsgrid.js';
 
 // Create demo view components
 @customElement('demo-view-dashboard')
@@ -19,54 +21,93 @@ class DemoViewDashboard extends DeesElement {
         margin: 0 0 20px 0;
         color: ${cssManager.bdTheme('#000', '#fff')};
       }
-      .stats-grid {
+      dees-statsgrid {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-        gap: 20px;
         margin-top: 20px;
       }
-      .stat-card {
-        background: ${cssManager.bdTheme('#fff', '#111')};
-        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
-        border-radius: 8px;
-        padding: 20px;
-        text-align: center;
-      }
-      .stat-value {
-        font-size: 32px;
-        font-weight: bold;
-        color: ${cssManager.bdTheme('#26a69a', '#26a69a')};
-      }
-      .stat-label {
-        font-size: 14px;
-        color: ${cssManager.bdTheme('#666', '#999')};
-        margin-top: 8px;
-      }
     `
   ];
   
+  private statsTiles: IStatsTile[] = [
+    {
+      id: 'users',
+      title: 'Active Users',
+      value: 1234,
+      type: 'number',
+      icon: 'faUsers',
+      description: '+15% from last week',
+      color: '#22c55e'
+    },
+    {
+      id: 'pageviews',
+      title: 'Page Views',
+      value: 56700,
+      type: 'number',
+      icon: 'faEye',
+      description: '56.7k total views',
+      color: '#3b82f6'
+    },
+    {
+      id: 'uptime',
+      title: 'System Uptime',
+      value: 89,
+      unit: '%',
+      type: 'gauge',
+      icon: 'faServer',
+      description: 'Last 30 days',
+      color: '#10b981',
+      gaugeOptions: {
+        min: 0,
+        max: 100,
+        thresholds: [
+          { value: 80, color: '#ef4444' },
+          { value: 90, color: '#f59e0b' },
+          { value: 100, color: '#10b981' }
+        ]
+      }
+    },
+    {
+      id: 'response',
+      title: 'Avg Response Time',
+      value: 3.2,
+      unit: 's',
+      type: 'number',
+      icon: 'faClock',
+      description: '-0.5s improvement',
+      color: '#f59e0b'
+    },
+    {
+      id: 'revenue',
+      title: 'Monthly Revenue',
+      value: 48520,
+      unit: '$',
+      type: 'trend',
+      icon: 'faDollarSign',
+      description: '+8.2% growth',
+      color: '#22c55e',
+      trendData: [35000, 38000, 37500, 41000, 39800, 42000, 44100, 43200, 45600, 47100, 46800, 48520]
+    },
+    {
+      id: 'traffic',
+      title: 'Traffic Trend',
+      value: 1680,
+      type: 'trend',
+      icon: 'faChartLine',
+      description: 'Last 7 days',
+      color: '#3b82f6',
+      trendData: [1200, 1350, 1100, 1450, 1600, 1550, 1680]
+    }
+  ];
+  
   render() {
     return html`
       <h1>Dashboard</h1>
       <p>Welcome to your application dashboard. Here's an overview of your metrics:</p>
-      <div class="stats-grid">
+      <dees-statsgrid
-        <div class="stat-card">
+        .tiles=${this.statsTiles}
-          <div class="stat-value">1,234</div>
+        @tile-action=${(e: CustomEvent) => {
-          <div class="stat-label">Active Users</div>
+          console.log('Tile action:', e.detail);
-        </div>
+        }}
-        <div class="stat-card">
+      ></dees-statsgrid>
-          <div class="stat-value">56.7k</div>
-          <div class="stat-label">Page Views</div>
-        </div>
-        <div class="stat-card">
-          <div class="stat-value">89%</div>
-          <div class="stat-label">Uptime</div>
-        </div>
-        <div class="stat-card">
-          <div class="stat-value">3.2s</div>
-          <div class="stat-label">Avg Response</div>
-        </div>
-      </div>
     `;
   }
 }