A support desk

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

<div id="app"></div>

<script type="module">
  import React from 'https://esm.sh/react@18';
  import { createRoot } from 'https://esm.sh/react-dom@18/client';
  import { createGrid } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.28.0/lattice-grid.esm.min.js';
  import createLatticeGrid from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.28.0/modules/react.esm.min.js';

  const LatticeGrid = createLatticeGrid({ React, 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' },
  ];

  const rows = [/* each ticket carries a tags: [{ tag, area }] array */];

  function App() {
    const deskRef = React.useRef(null);
    const [week, setWeek] = React.useState(null);
    const [perQueue, setPerQueue] = React.useState(null);

    React.useEffect(() => {
      const desk = deskRef.current && deskRef.current.grid;
      if (!desk) return;

      // bucket rounds each date down to its ISO Monday and groups on that: a
      // weekly series that follows the desk's filter.
      setWeek({ 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.
      setPerQueue({ mode: 'derived', from: desk, follow: 'filtered', refresh: 'live', groupBy: ['queue', 'agent'],
        select: { tickets: { fn: 'count' } }, sort: [{ col: 'tickets', dir: 'desc' }], limit: 1, limitPer: 'queue' });
    }, []);

    return (
      <>
        <LatticeGrid
          ref={deskRef}
          rowKey="id"
          toolPanel={{ side: 'left', panels: ['filters', 'columns'] }}
          columns={deskColumns}
          rows={rows}
          style={{ height: '320px' }}
        />
        {week && <LatticeGrid autoHeight source={week} columns={weekColumns} style={{ marginTop: '16px' }} />}
        {perQueue && <LatticeGrid autoHeight source={perQueue} columns={queueColumns} style={{ marginTop: '16px' }} />}
      </>
    );
  }

  createRoot(document.getElementById('app')).render(<App />);
</script>