argent-grid 0.1.0 → 0.3.0

package/src/stories/streaming-wrapper.component.ts

@@ -0,0 +1,441 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { ArgentGridComponent, ArgentGridModule, ColDef, GridApi, themeQuartz } from '../public-api';
+
+interface Stock {
+  id: string;
+  symbol: string;
+  name: string;
+  price: number;
+  change: number;
+  changePct: number;
+  history: number[];
+  volume: number;
+  marketCap: number;
+}
+
+@Component({
+  selector: 'app-streaming-wrapper',
+  standalone: true,
+  imports: [CommonModule, ArgentGridModule],
+  template: `
+    <div class="streaming-container">
+      <div class="header">
+        <div class="title">
+          <h2>Live Stock Market Feed</h2>
+          <div class="status-badge" [class.active]="isRunning">
+            <span class="dot"></span>
+            {{ isRunning ? 'Streaming Live' : 'Paused' }}
+          </div>
+        </div>
+        <div class="controls">
+          <button (click)="checkData()">Check Data</button>
+          <button (click)="toggleStreaming()" [class.pause]="isRunning">
+            {{ isRunning ? 'Pause Stream' : 'Start Stream' }}
+          </button>
+          <div class="stats">
+            <span class="stat-label">Message Rate:</span>
+            <span class="stat-value">{{ messageRate | number:'1.1-1' }} msgs/sec</span>
+          </div>
+        </div>
+      </div>
+
+      <argent-grid
+        #grid
+        [columnDefs]="columnDefs"
+        [rowData]="rowData"
+        [height]="height"
+        [width]="width"
+        [theme]="theme"
+        [gridOptions]="gridOptions"
+        (gridReady)="onGridReady($event)"
+      />
+    </div>
+  `,
+  styles: [
+    `
+    .streaming-container {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      padding: 20px;
+      background: #f8fafc;
+      height: 600px;
+      box-sizing: border-box;
+    }
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background: white;
+      padding: 16px 24px;
+      border-radius: 8px;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    }
+    .title h2 {
+      margin: 0;
+      font-size: 1.25rem;
+      color: #1e293b;
+    }
+    .status-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 12px;
+      font-weight: 500;
+      color: #64748b;
+      margin-top: 4px;
+    }
+    .status-badge.active {
+      color: #10b981;
+    }
+    .dot {
+      width: 8px;
+      height: 8px;
+      background: #cbd5e1;
+      border-radius: 50%;
+    }
+    .active .dot {
+      background: #10b981;
+      box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
+      animation: pulse 2s infinite;
+    }
+    @keyframes pulse {
+      0% { transform: scale(0.95); opacity: 0.5; }
+      50% { transform: scale(1.05); opacity: 1; }
+      100% { transform: scale(0.95); opacity: 0.5; }
+    }
+    .controls {
+      display: flex;
+      gap: 20px;
+      align-items: center;
+    }
+    button {
+      padding: 8px 20px;
+      background: #3b82f6;
+      color: white;
+      border: none;
+      border-radius: 6px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+    button:hover {
+      background: #2563eb;
+    }
+    button.pause {
+      background: #ef4444;
+    }
+    button.pause:hover {
+      background: #dc2626;
+    }
+    .stats {
+      font-size: 14px;
+    }
+    .stat-label {
+      color: #64748b;
+      margin-right: 4px;
+    }
+    .stat-value {
+      color: #1e293b;
+      font-weight: 700;
+      font-family: monospace;
+    }
+  `,
+  ],
+})
+export class StreamingWrapperComponent implements OnInit, OnDestroy {
+  @ViewChild('grid') gridComponent!: ArgentGridComponent;
+
+  @Input() updateFrequency = 100; // ms
+  @Input() batchSize = 10;
+
+  columnDefs: ColDef<Stock>[] = [
+    { field: 'symbol', headerName: 'Symbol', width: 100, pinned: 'left', sortable: true },
+    { field: 'name', headerName: 'Name', width: 200, sortable: true },
+    {
+      field: 'price',
+      headerName: 'Price',
+      width: 120,
+      sortable: true,
+      cellRenderer: (params: any) => {
+        const arrow = params.data.change >= 0 ? '▲' : '▼';
+        return `${arrow} $${params.value.toFixed(2)}`;
+      },
+      cellStyle: (params: any) => ({
+        color: params.data.change >= 0 ? '#16a34a' : '#dc2626',
+      }),
+      tooltipValueGetter: (params: any) => {
+        const d = params.data;
+        const sign = d.change >= 0 ? '+' : '';
+        return `${d.name}\nPrice: $${d.price.toFixed(2)}\nChange: ${sign}$${d.change.toFixed(2)} (${sign}${d.changePct.toFixed(2)}%)\nVolume: ${d.volume.toLocaleString()}`;
+      },
+    },
+    {
+      field: 'change',
+      headerName: 'Change',
+      width: 100,
+      cellRenderer: (params: any) => {
+        const val = params.value;
+        const arrow = val >= 0 ? '▲' : '▼';
+        const sign = val >= 0 ? '+' : '';
+        return `${arrow} ${sign}${val.toFixed(2)}`;
+      },
+      cellStyle: (params: any) => ({
+        color: params.value >= 0 ? '#16a34a' : '#dc2626',
+      }),
+    },
+    {
+      field: 'changePct',
+      headerName: '% Change',
+      width: 110,
+      cellRenderer: (params: any) => {
+        const val = params.value;
+        const arrow = val >= 0 ? '▲' : '▼';
+        const sign = val >= 0 ? '+' : '';
+        return `${arrow} ${sign}${val.toFixed(2)}%`;
+      },
+      cellStyle: (params: any) => ({
+        color: params.value >= 0 ? '#16a34a' : '#dc2626',
+      }),
+    },
+    {
+      field: 'history',
+      headerName: 'Trend',
+      width: 140,
+      sortable: false,
+      sparklineOptions: {
+        type: 'bar',
+        column: {
+          fill: '#3b82f6',
+          stroke: '#2563eb',
+          strokeWidth: 0,
+          padding: 0.15,
+        },
+        padding: { top: 4, bottom: 4, left: 4, right: 4 },
+      },
+    },
+    {
+      field: 'volume',
+      headerName: 'Volume',
+      width: 140,
+      sortable: true,
+      valueFormatter: (params: any) => params.value.toLocaleString(),
+    },
+    {
+      field: 'marketCap',
+      headerName: 'Mkt Cap',
+      width: 140,
+      sortable: true,
+      cellRenderer: (params: any) => {
+        const val = params.value;
+        if (val >= 1e12) return `$${(val / 1e12).toFixed(2)}T`;
+        if (val >= 1e9) return `$${(val / 1e9).toFixed(1)}B`;
+        return `$${(val / 1e6).toFixed(1)}M`;
+      },
+    },
+  ];
+
+  rowData: Stock[] = [];
+  height = '100%';
+  width = '100%';
+  theme = themeQuartz;
+
+  gridOptions = {
+    getRowId: (params: any) => params.data.symbol,
+    defaultColDef: {
+      resizable: true,
+    },
+  };
+
+  private gridApi?: GridApi<Stock>;
+  private intervalId: any;
+  private rateIntervalId: any;
+  private flushIntervalId: any;
+  isRunning = false;
+  updateCount = 0;
+  messageRate = 0;
+  private lastUpdateCount = 0;
+
+  // Transaction throttling - buffer updates and apply in batches
+  private pendingUpdates: Stock[] = [];
+  private flushIntervalMs = 200; // Apply transactions at most every 500ms
+
+  ngOnInit(): void {
+    this.rowData = this.generateInitialData();
+  }
+
+  onGridReady(api: GridApi<Stock>): void {
+    this.gridApi = api;
+    console.log('Grid Ready, rowData count:', this.rowData.length);
+    this.startStreaming();
+  }
+
+  toggleStreaming(): void {
+    if (this.isRunning) {
+      this.stopStreaming();
+    } else {
+      this.startStreaming();
+    }
+  }
+
+  private startStreaming(): void {
+    this.isRunning = true;
+    this.intervalId = setInterval(() => {
+      this.updateStocks();
+    }, this.updateFrequency);
+
+    // Flush pending updates every 500ms
+    this.flushIntervalId = setInterval(() => {
+      this.flushPendingUpdates();
+    }, this.flushIntervalMs);
+
+    // Calculate message rate every second
+    this.rateIntervalId = setInterval(() => {
+      this.messageRate = this.updateCount - this.lastUpdateCount;
+      this.lastUpdateCount = this.updateCount;
+    }, 1000);
+  }
+
+  private stopStreaming(): void {
+    this.isRunning = false;
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+    }
+    if (this.rateIntervalId) {
+      clearInterval(this.rateIntervalId);
+    }
+    if (this.flushIntervalId) {
+      clearInterval(this.flushIntervalId);
+    }
+    // Flush any remaining updates before stopping
+    this.flushPendingUpdates();
+  }
+
+  forceRender(): void {
+    if (this.gridComponent) {
+      console.log('Forcing grid render...');
+      this.gridComponent.refresh();
+    }
+  }
+
+  checkData(): void {
+    if (this.gridApi) {
+      console.log('Current Row Data:', this.gridApi.getRowData());
+      console.log('Displayed Count:', this.gridApi.getDisplayedRowCount());
+    }
+  }
+
+  private generateInitialData(): Stock[] {
+    const symbols = [
+      { s: 'AAPL', n: 'Apple Inc.', p: 185.92, m: 2.89e12 },
+      { s: 'MSFT', n: 'Microsoft Corp.', p: 406.32, m: 3.02e12 },
+      { s: 'GOOGL', n: 'Alphabet Inc.', p: 142.65, m: 1.79e12 },
+      { s: 'AMZN', n: 'Amazon.com Inc.', p: 174.45, m: 1.81e12 },
+      { s: 'NVDA', n: 'NVIDIA Corp.', p: 788.17, m: 1.94e12 },
+      { s: 'META', n: 'Meta Platforms Inc.', p: 484.03, m: 1.24e12 },
+      { s: 'TSLA', n: 'Tesla Inc.', p: 191.97, m: 611.3e9 },
+      { s: 'BRK.B', n: 'Berkshire Hathaway', p: 408.84, m: 882.4e9 },
+      { s: 'V', n: 'Visa Inc.', p: 282.43, m: 581.2e9 },
+      { s: 'JPM', n: 'JPMorgan Chase & Co.', p: 184.21, m: 531.5e9 },
+      { s: 'UNH', n: 'UnitedHealth Group', p: 525.44, m: 485.1e9 },
+      { s: 'LLY', n: 'Eli Lilly & Co.', p: 769.72, m: 730.8e9 },
+      { s: 'XOM', n: 'Exxon Mobil Corp.', p: 105.21, m: 417.3e9 },
+      { s: 'MA', n: 'Mastercard Inc.', p: 471.22, m: 439.1e9 },
+      { s: 'AVGO', n: 'Broadcom Inc.', p: 1304.11, m: 605.4e9 },
+      { s: 'HD', n: 'Home Depot Inc.', p: 372.44, m: 369.2e9 },
+      { s: 'PG', n: 'Procter & Gamble', p: 160.21, m: 377.1e9 },
+      { s: 'COST', n: 'Costco Wholesale', p: 742.11, m: 329.4e9 },
+      { s: 'CVX', n: 'Chevron Corp.', p: 154.32, m: 289.1e9 },
+      { s: 'ABBV', n: 'AbbVie Inc.', p: 178.44, m: 315.2e9 },
+    ];
+
+    // Expand to 100 stocks for more activity
+    const allStocks: Stock[] = [];
+    for (let i = 0; i < 5; i++) {
+      symbols.forEach((sym) => {
+        const symbol = i === 0 ? sym.s : `${sym.s}_${i}`;
+        const name = i === 0 ? sym.n : `${sym.n} Class ${i}`;
+        const price = sym.p * (0.8 + Math.random() * 0.4);
+        const history = Array.from({ length: 20 }, () => price * (0.95 + Math.random() * 0.1));
+
+        allStocks.push({
+          id: symbol,
+          symbol,
+          name,
+          price,
+          change: 0,
+          changePct: 0,
+          history,
+          volume: Math.floor(Math.random() * 10000000) + 1000000,
+          marketCap: sym.m * (0.8 + Math.random() * 0.4),
+        });
+      });
+    }
+
+    return allStocks;
+  }
+
+  private updateStocks(): void {
+    if (!this.gridApi || !this.rowData.length) return;
+
+    const updates: Stock[] = [];
+    const indicesToUpdate = new Set<number>();
+
+    // Pick unique random stocks to update
+    while (indicesToUpdate.size < Math.min(this.batchSize, this.rowData.length)) {
+      indicesToUpdate.add(Math.floor(Math.random() * this.rowData.length));
+    }
+
+    // Create a NEW array for rowData to ensure OnPush detects change
+    const newRowData = [...this.rowData];
+
+    indicesToUpdate.forEach((idx) => {
+      const stock = newRowData[idx];
+
+      // Realistic price movement (Random Walk with slight mean reversion)
+      const volatility = 0.002; // 0.2% per update
+      const drift = 0.00001; // slight upward drift
+      const change = stock.price * (volatility * (Math.random() - 0.5) + drift);
+
+      const newPrice = Math.max(0.01, stock.price + change);
+      const dayChange = newPrice - (stock.price - stock.change);
+      const dayChangePct = (dayChange / (newPrice - dayChange)) * 100;
+
+      // Update history
+      const newHistory = [...stock.history.slice(1), newPrice];
+
+      const updatedStock = {
+        ...stock,
+        price: newPrice,
+        change: dayChange,
+        changePct: dayChangePct,
+        history: newHistory,
+        volume: stock.volume + Math.floor(Math.random() * 1000),
+      };
+
+      newRowData[idx] = updatedStock;
+      updates.push(updatedStock);
+    });
+
+    this.rowData = newRowData;
+
+    // Buffer updates for throttled applyTransaction
+    this.pendingUpdates.push(...updates);
+    this.updateCount += updates.length;
+  }
+
+  private flushPendingUpdates(): void {
+    if (!this.gridApi || this.pendingUpdates.length === 0) return;
+
+    // Apply all buffered updates in a single transaction
+    const updatesToApply = [...this.pendingUpdates];
+    this.pendingUpdates = [];
+
+    this.gridApi.applyTransaction({ update: updatesToApply });
+  }
+
+  ngOnDestroy(): void {
+    this.stopStreaming();
+  }
+}

package/tsconfig.json

@@ -23,6 +23,7 @@
     "forceConsistentCasingInFileNames": true,
     "resolveJsonModule": true,
     "paths": {
+      "exceljs": ["node_modules/exceljs/index.d.ts"],
       "argent-grid": ["dist"],
       "argent-grid/*": ["dist/*"]
     }

package/tsconfig.storybook.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist-storybook",
+    "baseUrl": ".",
+    "paths": {}
+  },
+  "include": ["src/**/*.ts", "src/storybook-app/**/*.ts"],
+  "exclude": ["node_modules", "dist", "dist-storybook"]
+}

package/vitest.config.ts

@@ -1,6 +1,6 @@
-import { defineConfig } from 'vitest/config';
 import fs from 'node:fs';
 import path from 'node:path';
+import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
   plugins: [
@@ -20,7 +20,7 @@ export default defineConfig({
             }
             return match;
           });
-          
+
           newCode = newCode.replace(/styleUrls:\s*\[\s*['"]([^'"]+)['"]\s*\]/g, (match, p1) => {
             const stylePath = path.resolve(path.dirname(id), p1);
             if (fs.existsSync(stylePath)) {
@@ -33,11 +33,11 @@ export default defineConfig({
             }
             return match;
           });
-          
+
           return { code: newCode, map: null };
         }
-      }
-    }
+      },
+    },
   ],
   test: {
     globals: true,
@@ -48,8 +48,8 @@ export default defineConfig({
       provider: 'v8',
       reporter: ['text', 'json', 'html'],
       include: ['src/**/*.ts'],
-      exclude: ['src/**/*.spec.ts', 'src/**/types/**']
+      exclude: ['src/**/*.spec.ts', 'src/**/types/**'],
     },
-    testTimeout: 10000
-  }
-});
+    testTimeout: 10000,
+  },
+});

package/demo-app/README.md

@@ -1,70 +0,0 @@
-# ArgentGrid Demo App
-
-Live demo showcasing the canvas-based high-performance Angular grid.
-
-## Quick Start
-
-```bash
-# Install dependencies
-npm install
-
-# Start dev server
-npm start
-
-# Build for production
-npm run build
-
-# Build for GitHub Pages
-npm run build:gh-pages
-```
-
-## E2E Testing (Playwright)
-
-End-to-end tests are located in the `e2e/` folder. They verify critical visual and interactive features that cannot be easily tested with unit tests (like Canvas rendering and Drag & Drop).
-
-**Prerequisites:**
-Ensure the dev server is running (`npm start`).
-
-**Run All Tests:**
-```bash
-npx playwright test
-```
-
-**Run with UI:**
-```bash
-npx playwright test --ui
-```
-
-**Key Scenarios Covered:**
-- Row Grouping & Hierarchical Expansion
-- Floating Filters & Quick Clear
-- Inline Cell Editing (Enter/Escape/Tab)
-- Column Pinning (Sticky Columns)
-- Column Re-ordering via Drag & Drop
-
-## Demo Features
-
-- **100K rows** - Standard load test
-- **500K rows** - Heavy load test  
-- **1M rows** - Extreme stress test
-- **Real-time FPS** - Monitor rendering performance
-- **Canvas rendering** - Zero DOM overhead
-
-## Live Demo
-
-https://hainanzhao.github.io/ArgentGrid/
-
-## Tech Stack
-
-- Angular 18
-- Canvas 2D API
-- RequestAnimationFrame for 60fps
-- Zero dependencies beyond Angular
-
-## Performance Targets
-
-| Rows | Load Time | FPS | Memory |
-|------|-----------|-----|--------|
-| 100K | < 500ms | 60 | ~50MB |
-| 500K | < 2s | 60 | ~150MB |
-| 1M | < 5s | 55-60 | ~300MB |

package/demo-app/angular.json

@@ -1,78 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "newProjectRoot": "projects",
-  "projects": {
-    "argent-grid-demo": {
-      "projectType": "application",
-      "schematics": {},
-      "root": "",
-      "sourceRoot": "src",
-      "prefix": "app",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:application",
-          "options": {
-            "outputPath": "dist/argent-grid-demo",
-            "index": "src/index.html",
-            "browser": "src/main.ts",
-            "polyfills": [],
-            "tsConfig": "tsconfig.json",
-            "preserveSymlinks": true,
-            "sourceMap": true,
-            "assets": [
-              {
-                "glob": "**/*",
-                "input": "public"
-              }
-            ],
-            "styles": [],
-            "scripts": []
-          },
-          "configurations": {
-            "production": {
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "500kB",
-                  "maximumError": "2MB"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "10kB",
-                  "maximumError": "20kB"
-                }
-              ],
-              "outputHashing": "all",
-              "sourceMap": true
-            },
-            "development": {
-              "optimization": false,
-              "extractLicenses": false,
-              "sourceMap": true
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "configurations": {
-            "production": {
-              "buildTarget": "argent-grid-demo:build:production"
-            },
-            "development": {
-              "buildTarget": "argent-grid-demo:build:development"
-            }
-          },
-          "defaultConfiguration": "development"
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n"
-        }
-      }
-    }
-  },
-  "cli": {
-    "analytics": false
-  }
-}

package/demo-app/e2e/benchmark.spec.ts

@@ -1,53 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-test.describe('ArgentGrid Performance Benchmark', () => {
-  test('should run the benchmark and report results', async ({ page }) => {
-    // Navigate to the demo page
-    await page.goto('/', { waitUntil: 'networkidle' });
-
-    // Wait for the grid to be ready
-    await page.waitForSelector('argent-grid', { timeout: 10000 });
-
-    // Click the Benchmark button
-    console.log('Starting benchmark...');
-    await page.click('.btn-benchmark');
-
-    // Wait for benchmark to complete (isBenchmarking becomes false)
-    // The benchmark-results section appears when finished
-    await page.waitForSelector('.benchmark-results', { timeout: 30000 });
-
-    // Extract results
-    const results = await page.evaluate(() => {
-      const items = document.querySelectorAll('.result-item');
-      const data: Record<string, string> = {};
-      items.forEach(item => {
-        const label = item.querySelector('label')?.textContent?.replace(':', '') || 'unknown';
-        const value = item.querySelector('span')?.textContent || '0';
-        data[label] = value;
-      });
-      return data;
-    });
-
-    console.log('-------------------------------------------');
-    console.log('🚀 ArgentGrid Performance Benchmark Results');
-    console.log('-------------------------------------------');
-    Object.entries(results).forEach(([label, value]) => {
-      console.log(`${label.padEnd(20)}: ${value}`);
-    });
-    console.log('-------------------------------------------');
-
-    // Optional assertions based on targets
-    const initialRender = parseFloat(results['Initial Render']);
-    const scrollFrame = parseFloat(results['Avg Scroll Frame']);
-    
-    console.log(`Checking against targets...`);
-    console.log(`Initial Render: ${initialRender}ms (Target: < 30ms)`);
-    console.log(`Avg Scroll Frame: ${scrollFrame}ms (Target: < 4ms)`);
-
-    // We don't fail the test if targets aren't met yet, but we report it
-    if (initialRender > 30) console.warn('⚠️ Initial render is slower than target (30ms)');
-    if (scrollFrame > 4) console.warn('⚠️ Scroll frame time is slower than target (4ms)');
-
-    expect(results['Total Test Time']).toBeDefined();
-  });
-});