A support desk

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.css">
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.js"></script>

<div id="desk" style="height:320px"></div>
<div id="week" style="margin-top:16px"></div>
<div id="perQueue" style="margin-top:16px"></div>

<script>
  const desk = LatticeGrid.createGrid(document.getElementById('desk'), {
    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
  });

  // bucket rounds each date down to its ISO Monday and groups on that: a series.
  LatticeGrid.createGrid(document.getElementById('week'), {
    autoHeight: true,
    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' }] },
    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.
  LatticeGrid.createGrid(document.getElementById('perQueue'), {
    autoHeight: true,
    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' },
    columns: [{ field: 'queue', title: 'Queue' }, { field: 'agent', title: 'Agent' }, { field: 'tickets', title: 'Tickets', type: 'number' }],
  });
</script>