Grouping

import { createDataGrid, grouping, virtualization } from '@sv5ui/datagrid';

const grid = createDataGrid<Person>({
  columns,
  data: people,
  getRowId,
  features: [
    grouping<Person>({ by: ['team'], aggregations: { salary: 'sum' } }),
    virtualization<Person>({ rowHeight: 40, overscan: 8 })
  ]
});

// The button above switches this grid between one level and two:
getGrouping(grid)!.setGroupBy(['team']);
getGrouping(grid)!.setGroupBy(['team', 'role']);

// A factory held in a variable has nothing to infer TRow from, so spell it
// out. Inside the features array above, the array's own type supplies it.
const group = grouping<Person>({ by: ['team', 'role'] });

// Keyed by column id, because a feature cannot add a field to ColumnDef.
// This is what the grid above runs: a second view of salary needs a column
// of its own, because a column id is the namespace an aggregate is written to.
grouping<Person>({
  by: ['team'],
  expandedByDefault: false,
  aggregations: {
    name:         'count',
    salary:       'sum',
    salaryMedian: 'median',
    salaryP90:    { kind: 'percentile', p: 0.9 },
    country:      'distinctCount',

    // Weighted by salary, so a better-paid rating counts for more.
    rating: { kind: 'weightedAvg', weight: (row) => row.salary }
  }
});

// The thirteen in full:
grouping<Person>({
  by: ['team'],
  aggregations: {
    salary:       'sum',
    salaryMin:    'min',
    salaryMax:    'max',
    salaryAvg:    'avg',
    salaryMedian: 'median',
    name:         'count',           // rows, not values
    country:      'distinctCount',
    firstJoiner:  'first',
    lastJoiner:   'last',

    salaryP90: { kind: 'percentile', p: 0.9 },        // a fraction, not 90
    rating:    { kind: 'weightedAvg', weight: (row) => row.salary },

    activeCount: (values, rows) => rows.filter((row) => row.active).length
  }
});

// percentile interpolates the way a spreadsheet does: 0.9 over 1, 2, 3, 4
// is 3.7. Every numeric aggregator returns null when nothing numeric is left.

// Exactly what the grid above runs.
grouping<Person>({
  by: ['team'],
  aggregations: { salary: 'sum' },
  groupFooters: true,   // close every open group with its own totals row
  grandTotal: true,     // and the whole set with one at the end

  // All three labels take the group's key and its count, so a language can
  // put them in its own order.
  groupLabel: (key, count) => `${key} (${count})`,
  footerLabel: (key) => `${key} subtotal`,
  grandTotalLabel: (count) => `All ${count} people`
});

// The grand total works with grouping off as well, and reflects the filter:
// it aggregates the leaf rows that survived, not the whole data array.
// It is in-flow, so it scrolls with the rows rather than sticking.

<script lang="ts">
  import { DataGrid, Grid } from '@sv5ui/datagrid';
</script>

<!-- Drop a column on it, reorder the chips, or take one off. It writes the
     same state the column menu does, so the two never disagree. -->
<Grid.GroupPanel {grid} placeholder="Drop a column here to group by it" />
<DataGrid {grid} />

<!-- Three tabs over one grid: Groups, Values and Columns. -->
<div class="flex flex-col gap-3 lg:flex-row">
  <DataGrid {grid} class="grow" />
  <Grid.ToolPanel {grid} bind:collapsed aggregations={['sum', 'avg', 'count']} />
</div>

<!-- aggregations limits what the Values tab offers, from the thirteen down to
     the ones worth choosing on this grid. tabs limits the panel itself, in the
     order given, so a grid that only needs a column chooser says so. -->
<Grid.ToolPanel {grid} tabs={['columns']} />
<Grid.ToolPanel {grid} tabs={['group', 'values']} />

<!-- The panel is w-full below the lg breakpoint and takes its own 18rem
     column from lg up, so the layout above is one line rather than two
     branches. Give it lg:w-full to keep it full width in a narrow container:
     the breakpoint reads the viewport, not the space the panel is actually
     standing in. -->
<Grid.ToolPanel {grid} class="lg:w-full" />

<!-- collapsed folds it to a bar, so a reader who wants the width back does
     not lose the panel to get it. -->
<Grid.ToolPanel {grid} bind:collapsed />

import { grouping, showValuesAs } from '@sv5ui/datagrid';

features: [
  // A shown column needs an aggregation of its own. percentOfParent divides
  // by the same column on the group row, so without one there is no parent
  // total to divide by and every share in that column reads blank.
  grouping<Person>({
    by: ['team'],
    aggregations: { salary: 'sum', salaryShare: 'sum', salaryOfTeam: 'sum' }
  }),
  showValuesAs({
    columns: {
      // Of the column's total over every row the filter left.
      salaryShare: 'percentOfGrandTotal',

      // Of the same column on the row above in the hierarchy: the group a
      // row sits in, or the parent row on a tree. At the top level it falls
      // back to the grand total.
      salaryOfTeam: 'percentOfParent',

      // Of the named columns in the same row, which is how a
      // month-per-column table reads across.
      q1Share: { kind: 'percentOfRow', of: ['q1', 'q2', 'q3', 'q4'] }
    }
  })
]

// The share is a fraction, so the column has to be a percent one or the
// cell reads 0.34 rather than 34%.
const columns: ColumnDef<Person>[] = [
  { id: 'salary',       header: 'Salary', type: 'currency', align: 'right' },
  { id: 'salaryShare',  header: 'Of total', type: 'percent', align: 'right' },
  { id: 'salaryOfTeam', header: 'Of team',  type: 'percent', align: 'right' }
];

const people = makePeople(60).map((person) => ({
  ...person,
  salaryShare: person.salary,
  salaryOfTeam: person.salary
}));

import { aggregate, isDataRow, totalsKindOf } from '@sv5ui/datagrid';

// The number a group footer would show, computed somewhere else: a summary
// card, a chart, a second table. Same function the footers use, so the two
// cannot drift.
const values = people.map((person) => person.salary);
aggregate('median', values, people);
aggregate({ kind: 'percentile', p: 0.9 }, values, people);
aggregate({ kind: 'weightedAvg', weight: (person) => person.tenure }, ratings, people);

// Walking the rows the grid is about to draw, a grouped grid holds more than
// data rows: group headers, group footers, the grand total, detail panels and
// loading rows are all nodes.
for (const node of grid.preWindowNodes) {
  if (isDataRow(node)) usePerson(node.row);
}

// Or ask what a non-data row is:
totalsKindOf(node.id);   // 'footer' | 'grandTotal' | null

// Grouping the server does. The grid renders one level and asks for the
// next when a row is opened, so a million rows never reach the browser.
serverRowModel<ServerRow>(source, {
  mode: 'infinite',
  blockSize: 100,
  placeholder,
  groupBy: ['team'],

  // What makes a row a group row for the renderer. The chevron, the indent
  // and the treegrid ARIA all come from the meta rather than from the row:
  // declaring a hierarchy is what turns the container into a treegrid.
  getRowMeta: (row) => (isGroupRow(row) ? { level: 0, expandable: true } : { level: 1 }),

  // Opening one asks the server for its children rather than assuming they
  // were loaded. The keys are outermost first.
  groupKeysOf: (node) => [node.row.key],

  // And closing it drops them again, which needs to know which loaded rows
  // belonged to the group.
  isChildOf: (node) => (row) => !isGroupRow(row) && row.team === node.row.key
});

// The server half. One handler answers both questions, because which one it
// was asked is readable from the request:
export const POST: RequestHandler = async ({ request }) => {
  const { groupBy = [], groupKeys = [], startRow, endRow, filter, sort } = await request.json();
  const matched = applyQuery(people, filter, sort);

  // Fewer keys than levels means a group row was opened: answer with the
  // next level down, counted and totalled over everything behind it.
  if (groupBy.length > 0 && groupKeys.length < groupBy.length) {
    const level = groupLevel(withinGroup(matched, groupBy, groupKeys), groupBy[groupKeys.length]);
    return json({ rows: level.slice(startRow, endRow), rowCount: level.length });
  }

  const leaves = withinGroup(matched, groupBy, groupKeys);
  return json({ rows: leaves.slice(startRow, endRow), rowCount: leaves.length });
};

// A count and a total are the reason to group on the server at all: the grid
// holds a hundred rows and cannot work out what 1,012 of them add up to.