Measures and Aggregations

When using row or column pivots, columns should normally define an aggregation and measure. Aggregations and measures serve similar roles and are calculated in the same way.

Aggregations define how a column's grouped values should be combined when row pivots are present in the grid. Measures define how a column's pivot value should be calculated when column pivots are present.

One key difference is that measures are called even on non-grouped rows, whereas aggregations are always called on branch (grouped) row nodes. Furthermore, Graphite Grid maintains a separate measureModel for tracking the measures applied to the grid. These measures are used to create pivot columns. Each measure in the model creates a set of pivot columns.

Defining Measures and Aggregations

Use the measure and aggregation properties on the column definitions to define a measure or aggregation for a column. Graphite Grid provides some built-in measures that can be referenced directly:

• first
• last
• count
• sum
• min
• max
• avg

Alternatively, define a custom aggregation or measure. For example, use a measure to double the value of every cell:

export function MeasuresAndAggregations() {
  const grid = useGraphiteGrid({
    initial: {
      columnDefinitions: [
        { id: "exchange", rowPivotKey: "exchange", pivotColumnKey: "exchange" },
        { id: "symbol" },
        { id: "currency" },
        { id: "sector", rowPivotKey: "sector", pivotColumnKey: "sector" },
        { id: "industry" },
        {
          id: "price",
          aggregation: "sum",
          measure: {
            id: "Double",
            func: (p) => {
              return p.data.map((d) => Math.floor((d["price"] ?? 0) * 2));
            },
          },
        },
        { id: "volume", aggregation: "avg", measure: "sum" },
      ],
      pivotColumnModel: ["exchange"],
      rowPivotModel: ["sector"],
      measureModel: ["price"],
      pivotModeIsOn: true,
      pivotColumnSource: "client",
      // other props
    },
  });
 
  return (
    <div style={{ height: 400 }}>
      <GraphiteGridDom state={grid} />
    </div>
  );
}CopyCopied!