A support desk

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

<script type="module">
  import { defineLatticeGrid } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.28.0/modules/webcomponent.esm.js';
  defineLatticeGrid();
</script>

<lattice-grid id="desk" row-key="id" style="display: block; height: 320px"></lattice-grid>
<lattice-grid id="week" style="display: block; margin-top: 16px"></lattice-grid>
<lattice-grid id="perQueue" style="display: block; margin-top: 16px"></lattice-grid>

<script type="module">
  const deskEl = document.getElementById('desk');
  deskEl.config = {
    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' },
    ],
  };
  deskEl.rows = rows;  // each ticket carries a tags: [{ tag, area }] array

  // bucket rounds each date down to its ISO Monday and groups on that: a series.
  // deskEl.grid is the live grid inside the element.
  document.getElementById('week').config = {
    autoHeight: true,
    source: { mode: 'derived', from: deskEl.grid, 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.
  document.getElementById('perQueue').config = {
    autoHeight: true,
    source: { mode: 'derived', from: deskEl.grid, 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>