Starter kit: operations console

'starter-operations-console': () => ({
  rows: [],
  config: {},
  foot: [
    'one feed, partitioned into three grids and a throughput chart',
    'select orders and the incidents grid narrows to their regions',
    'the mock socket runs it with no backend; one line points it at a real feed',
  ],
  mount: (el: HTMLElement, LG: any) => {
    const money = { style: 'currency', currency: 'USD', decimals: 0 } as const;
    const strip = document.createElement('div');
    strip.style.cssText = 'display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px';
    el.append(strip);
    const ordersEl = panel(strip, 'Orders');
    const shipmentsEl = panel(strip, 'Shipments');
    const incidentsEl = panel(strip, 'Incidents');
    const chartEl = chartHost(el);
    const orders = LG.createGrid(ordersEl, {
      rowKey: 'id', theme: 'light', selection: 'multiple',
      columns: [
        { field: 'id', title: 'Order', layout: { width: 96 } },
        { field: 'region', title: 'Region', filter: { type: 'set' } },
        { field: 'customer', title: 'Customer' },
        { field: 'value', title: 'Value', type: 'number', format: money, total: 'sum' },
      ],
    });
    const shipments = LG.createGrid(shipmentsEl, {
      rowKey: 'id', theme: 'light',
      columns: [
        { field: 'id', title: 'Shipment', layout: { width: 96 } },
        { field: 'region', title: 'Region', filter: { type: 'set' } },
        { field: 'carrier', title: 'Carrier' },
        { field: 'units', title: 'Units', type: 'number', total: 'sum' },
      ],
    });
    const incidents = LG.createGrid(incidentsEl, {
      rowKey: 'id', theme: 'light',
      columns: [
        { field: 'id', title: 'Incident', layout: { width: 96 } },
        { field: 'region', title: 'Region', filter: { type: 'set' } },
        { field: 'service', title: 'Service' },
        { field: 'severity', title: 'Severity' },
      ],
    });
    const metrics = LG.createHeadlessGrid({
      rowKey: 't', columns: [{ field: 't', type: 'number' }, { field: 'events', type: 'number' }],
    });
    let chart: any, socket: any;
    Promise.all([loadDataRouter(), loadCharts(), loadMockSocket()])
      .then(([dr, ch, ms]: any[]) => {
        const router = dr.createDataRouter({ key: 'type', rowKey: 'id' });
        router.attach(orders, 'order');
        router.attach(shipments, 'shipment');
        router.attach(incidents, 'incident');
        router.attach(metrics, 'metric', { rowKey: 't' });
        router.link(orders, incidents, { from: 'region', to: 'region' });
        chart = ch.createChart({ grid: metrics, container: chartEl, type: 'line', x: 't', y: 'events', title: 'Throughput per tick' });
        socket = new ms.MockWebSocket({ feed: ms.opsFeed({ seed: 7 }), rate: 900, jitter: 300 });
        pipe(socket, router);
      })
      .catch((err) => console.error('[starter-operations-console]', err));
    return () => {
      socket?.close?.();
      chart?.destroy?.();
      orders?.destroy?.(); shipments?.destroy?.(); incidents?.destroy?.(); metrics?.destroy?.();
    };
  },
})