A support desk

import * as ng from '@angular/core';
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import { createGrid } from '@toclocoinc/lattice-grid';
import '@toclocoinc/lattice-grid/css';
import createLatticeGrid from '@toclocoinc/lattice-grid/modules/angular';

const { LatticeGridComponent } = createLatticeGrid({ ng, createGrid });

const deskColumns = [
  { field: 'queue', title: 'Queue', filter: { type: 'set' } },
  { field: 'agent', title: 'Agent', filter: { type: 'set' } },
  { field: 'opened', title: 'Opened', type: 'dateString' },
  { field: 'hours', title: 'Time to resolve', type: 'hours' },
];
const weekColumns = [
  { field: 'opened', title: 'Week' },
  { field: 'tickets', title: 'Tickets', type: 'number' },
  { field: 'median', title: 'Median', type: 'hours' },
  { field: 'worst', title: 'p95', type: 'hours' },
];
const queueColumns = [
  { field: 'queue', title: 'Queue' },
  { field: 'agent', title: 'Agent' },
  { field: 'tickets', title: 'Tickets', type: 'number' },
];

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, LatticeGridComponent],
  template:
    '<lattice-grid #desk [config]="deskGrid" style="display:block;height:320px"></lattice-grid>' +
    '<lattice-grid *ngIf="week" [config]="week" style="display:block;margin-top:16px"></lattice-grid>' +
    '<lattice-grid *ngIf="perQueue" [config]="perQueue" style="display:block;margin-top:16px"></lattice-grid>',
})
export class AppComponent implements AfterViewInit {
  @ViewChild('desk') deskRef!: LatticeGridComponent;
  week: any = null;
  perQueue: any = null;

  deskGrid = { rowKey: 'id', toolPanel: { side: 'left', panels: ['filters', 'columns'] }, columns: deskColumns, rows: [/* each ticket carries a tags: [{ tag, area }] array */] };

  ngAfterViewInit() {
    const desk = this.deskRef.grid;
    // bucket rounds each date down to its ISO Monday and groups on that: a weekly
    // series that follows the desk's filter.
    this.week = { autoHeight: true, columns: weekColumns, source: { mode: 'derived', from: desk, follow: 'filtered', refresh: 'live',
      groupBy: 'opened', bucket: { of: 'opened', by: 'week' },
      select: { tickets: { fn: 'count' }, median: { of: 'hours', fn: 'median' }, worst: { of: 'hours', fn: 'p95' } },
      sort: [{ col: 'opened', dir: 'asc' }] } };
    // limit with limitPer: the busiest agent in EACH queue, not the busiest three
    // overall. A global limit of one would return a single agent.
    this.perQueue = { autoHeight: true, columns: queueColumns, source: { mode: 'derived', from: desk, follow: 'filtered', refresh: 'live', groupBy: ['queue', 'agent'],
      select: { tickets: { fn: 'count' } }, sort: [{ col: 'tickets', dir: 'desc' }], limit: 1, limitPer: 'queue' } };
  }
}

bootstrapApplication(AppComponent);