argent-grid 0.2.0 → 0.3.0

package/src/stories/story-utils.ts

@@ -0,0 +1,88 @@
+/**
+ * Shared utilities for Storybook stories
+ */
+
+export const LOCATION_FLAGS: Record<string, string> = {
+  'New York': '🇺🇸 New York',
+  'San Francisco': '🇺🇸 San Francisco',
+  London: '🇬🇧 London',
+  Singapore: '🇸🇬 Singapore',
+  Remote: '🌐 Remote',
+  Berlin: '🇩🇪 Berlin',
+  Tokyo: '🇯🇵 Tokyo',
+};
+
+export const DEPARTMENT_EMOJIS: Record<string, string> = {
+  Engineering: '⚙️ Engineering',
+  Sales: '💰 Sales',
+  Marketing: '📣 Marketing',
+  HR: '👥 HR',
+  Finance: '📈 Finance',
+  Design: '🎨 Design',
+  Operations: '🏢 Operations',
+  Support: '🎧 Support',
+};
+
+export const ROLE_EMOJIS: Record<string, string> = {
+  Engineer: '💻 Engineer',
+  'Software Engineer': '💻 Software Engineer',
+  Manager: '👔 Manager',
+  Director: '🏢 Director',
+  VP: '💎 VP',
+  Intern: '🎓 Intern',
+  Analyst: '📊 Analyst',
+  Lead: '🥇 Lead',
+};
+
+/**
+ * Common value formatter for location columns to add flags
+ */
+export const locationValueFormatter = (params: any) => {
+  return LOCATION_FLAGS[params.value] ?? params.value;
+};
+
+/**
+ * Common value formatter for department columns to add emojis
+ */
+export const departmentValueFormatter = (params: any) => {
+  return DEPARTMENT_EMOJIS[params.value] ?? params.value;
+};
+
+/**
+ * Common value formatter for role columns to add emojis
+ */
+export const roleValueFormatter = (params: any) => {
+  return ROLE_EMOJIS[params.value] ?? params.value;
+};
+
+/**
+ * Standard locations for mock data generation
+ */
+export const STORY_LOCATIONS = [
+  'New York',
+  'San Francisco',
+  'London',
+  'Singapore',
+  'Remote',
+  'Berlin',
+  'Tokyo',
+];
+
+/**
+ * Standard departments for mock data generation
+ */
+export const STORY_DEPARTMENTS = [
+  'Engineering',
+  'Sales',
+  'Marketing',
+  'HR',
+  'Finance',
+  'Design',
+  'Operations',
+  'Support',
+];
+
+/**
+ * Standard roles for mock data generation
+ */
+export const STORY_ROLES = ['Engineer', 'Manager', 'Director', 'VP', 'Intern', 'Analyst', 'Lead'];

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/*"]
     }