React pivot grid component for large data sets. Manage measures (aggregated figures) by dimensions (axises) in rows or columns directly on the grid.
Available demo at: http://polluxparis.github.io/zebulon-grid/
Demo on demand for zebulon-grid connected to big data: thomas.bres@pollux.paris
- Pivoting by drag & drop of dimensions.
- Sorting and filtering.
- Grand total and subtotals.
- Expand/collapse of dimensions hierarchy.
- Resizing of columns and rows.
- Drilldown facilities.
- Custom measures, formats, sorts and external functions in the configuration objects.
Install zebulon-grid using npm.
npm install zebulon-grid --saveAnd in your code:
import ZebulonGrid from 'zebulon-grid'import React, { Component } from "react";
import ReactDOM from "react-dom";
import ZebulonGrid from "zebulon-grid";
const buildData = (n0, n1, n2) => {
let data = [];
for (let i0 = 0; i0 < n0; i0++) {
for (let i1 = 0; i1 < n1; i1++) {
for (let i2 = 0; i2 < n2; i2++) {
data.push({
totoId: i0,
totoLabel: `toto${i0}`,
titi: i1,
tutu: `tutu${i2}`,
qty: Math.round(50 * Math.random()) + 1,
amt: Math.round(150 * Math.random()) + 3
});
}
}
}
return data;
};
const buildConfiguration = () => ({
measureHeaders: "columns",
width: 1000,
height: 800,
cellHeight: 30,
cellWidth: 100,
dimensions: [
{
id: "toto",
caption: "Toto",
keyAccessor: "totoId",
labelAccessor: "totoLabel",
sort: {
keyAccessor: "totoLabel"
}
},
{
id: "titi",
caption: "Titi",
keyAccessor: "titi"
},
{
id: "tutu",
caption: "Tutu",
keyAccessor: "tutu"
}
],
measures: [
{
valueAccessor: "qty",
id: "qty",
caption: "Quantity",
aggregation: "sum"
},
{
valueAccessor: "amt",
id: "amt",
caption: "Amount",
aggregation: "sum"
}
],
axis:{
columns: ["tutu"],
rows: ["toto", "titi"],
measures: ["qty", "amt"],
measureHeaders: "columns"
}
});
class MyPivotGrid extends Component {
constructor(props) {
super(props);
this.state = {};
}
data = buildData(20, 12, 7);
configuration = buildConfiguration();
render() {
return (
<ZebulonGrid
data={this.data}
configuration={this.configuration}
sizes={{
height: 600,
width: 1000,
cellWidth: 80,
cellHeight: 28,
zoom: 0.9
}}
/>
);
}
}
ReactDOM.render(<MyPivotGrid />, document.getElementById("root"));| Property | Type | Description |
|---|---|---|
| configuration | PropTypes.object |
Meta description of the multidimensional matrix linked to the data set |
| menuFunctions | PropTypes.object |
Custom functions callable from the data cell area contextual menu. |
| configurationFunctions | PropTypes.object |
Named custom formats, accessors, sorts and aggregations. |
| data | PropTypes.arrayOf(PropTypes.object) |
Data set as an array of objects or a promise. |
| pushedData] | PropTypes.arrayOf(PropTypes.object) |
Data set as an array of objects. |
| sizes | PropTypes.object) |
sizes of the grid (height, width), zoom, default cell sizes |
The data set (data property) can be either an array of similar objects or a promise that will be resolved as an array of objects.
[
{
totoId: 25,
totoLabel: "toto25",
titi: 3,
tutu: "tutuA",
qty: 100,
amt: 12456
},
{
totoId: 154,
totoLabel: "toto154",
titi: 12,
tutu: "tutuS",
qty: 22,
amt: 2539
},
...
]Rows can be added dynamically to the data set using the pushedData property. Changed data cells will be highlighted using the corresponding CSS.
The configuration property is an object describing the pivot grid objects as measure or dimensions and their links with the data set properties.
Accessors are used to get the appropriate values from the data set. They can be :
- the name of a dataset property.
- A function called with the data row as parameter.
- A name of an accessor specified in the configurationFunctions property.
Accessors can be defined for:
- dimension ids.
- dimension labels.
- dimension sorting keys.
- measures values.
Formats are functions used to format the displayed values They can be:
- undefined.
- A function called with the value to format.
- A name of a format specified in the configurationFunctions property.
Formats can be defined for
- dimension labels.
- measures values.
Aggregation are functions used the calculate the measures called for each cell with an array of values returned by its accessor for each data rows to be computed (at the intersection of the dimension values in rows and columns). They can be:
- A name of an available precoded aggregation as sum, min, max...
- An aggregation function.
- A name of an aggregation function specified specified in the configurationFunctions property.
N.B. Aggregations (as weighted average) may require several data. In this case its accessor must return each needed data.
Sorts are objects thay may contains
- A sort key accessor
- A sorting function.
- A direction (ascending or descending).
Dimensions are the dimensions of the multidimentional matrix managed by the component. Dimensions have:
- An id and a label (caption).
- A keys accessor and a label accessor (by default the key accessor) for each dimension instances.
- A facultative sorting.
- A facultative format.
dimensions: [
{
id: "toto",
caption: "Toto",
keyAccessor: "totoId",
labelAccessor: "totoLabel",
sort: {
keyAccessor: "totoId"
},
format:x=>x.toUpperCase()
},
{
id: "titi",
caption: "Titi",
keyAccessor: "titi",
},
...]Measures are the calculations, using aggregation function, of the projections of the matrix on the required dimensions. Measures have:
- An id and a label (caption).
- A value accessor.
- An aggregation function.
- A facultative format.
measures: [
{
valueAccessor: "qty",
id: "qty",
caption: "Quantity",
format: value =>(
<div style={{ color: "blue", textAlign: "right" }}>
{Number(value).toFixed(0)}
</div>
),
aggregation: "sum"
},
{
valueAccessor: "amt",
id: "amt",
caption: "Amount",
aggregation: "sum",
format: "amount"
},...]Displayed dimensions and measures are assigned (ordered) either in row or in column. All measures must be on the same axis.
{
axis:{
columns: ["titi"],
rows: ["toto"],
measures: ["qty", "amt"],
measureHeaders: "columns"}
}Features provided by the component are available by default on the grid. They can be disabled by changing the values from "enabled" to anything else.
features = {
dimensions: "enabled",
measures: "enabled",
resize: "enabled",
expandCollapse: "enabled",
totals: "enabled",
filters: "enabled",
sorting: "enabled",
configuration: "enabled"
}Collapses, sizes and filters can be defined in the configuration property
The configurationFunctions property can bu used to define named custom formats, accessors, sorts and aggregations
{
formats: {amount:...},
accessors: {...},
sorts: {...},
aggregations: {...}
}Custom functions that can be dynamically added to contectual menus on the data cells area:
Cell functions are called with a cell description object as parameter:
- rows and columns dimensions decription (ids, captions...) corresponding to the cell.
- cell value.
- rows from the dataset to calculate the value of the cell.
Range functions are called with a range description object as parameter:
- Each rows and columns dimensions (ids, captions...) corresponding to the cell* Array of arrays of cell values.
Range functions are called with a range description object as parameter:
Grid functions are called with a configuration object as parameter:
- Available dimensions and axis (rows or columns) where they are eventually used.
- Available measures and axis where they are eventually used.
{
dataCellFunctions: {
drilldown: cell => {...},
otherDrilldown: cell => {...}
},
rangeFunctions: { range: range => {...} },
gridFunctions: {...}
}