A support desk

<script>
  import { createGrid } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.28.0/lattice-grid.esm.min.js';
  import createLatticeAction from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.28.0/modules/svelte.esm.min.js';

  const lattice = createLatticeAction({ createGrid });

  // The desk captured as it is created, so the derived grids below can name it.
  let deskGrid;

  const deskConfig = {
    rowKey: 'id', toolPanel: { side: 'left', panels: ['filters', 'columns'] },
    columns: [
      { 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' },
    ],
    rows,  // each ticket carries a tags: [{ tag, area }] array
    onGrid: (grid) => { deskGrid = grid; },
  };

  // bucket rounds each date down to its ISO Monday and groups on that: a series.
  // The getter defers the read of the source to when this grid is created.
  const weekConfig = {
    autoHeight: true,
    source: { mode: 'derived', get from() { return deskGrid; }, 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' }] },
    columns: [{ field: 'opened', title: 'Week' }, { field: 'tickets', title: 'Tickets', type: 'number' },
      { field: 'median', title: 'Median', type: 'hours' }, { field: 'worst', title: 'p95', type: 'hours' }],
  };

  // limit with limitPer: the busiest agent in EACH queue, not the busiest three
  // overall. A global limit of one would return a single agent.
  const perQueueConfig = {
    autoHeight: true,
    source: { mode: 'derived', get from() { return deskGrid; }, follow: 'filtered', refresh: 'live', groupBy: ['queue', 'agent'],
      select: { tickets: { fn: 'count' } }, sort: [{ col: 'tickets', dir: 'desc' }], limit: 1, limitPer: 'queue' },
    columns: [{ field: 'queue', title: 'Queue' }, { field: 'agent', title: 'Agent' }, { field: 'tickets', title: 'Tickets', type: 'number' }],
  };
</script>

<svelte:head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.28.0/lattice-grid.min.css">
</svelte:head>

<div use:lattice={deskConfig} style="height: 320px"></div>
<div use:lattice={weekConfig} style="margin-top: 16px"></div>
<div use:lattice={perQueueConfig} style="margin-top: 16px"></div>