Published
Edited
Sep 12, 2022
1 star
Hello Ag Grid with Aggregations
Inspired by this notebook https://observablehq.com/@oscar6echo/ag-grid-minimal, but added aggregations and formatting
grid = html`<div id="myGrid" style="width: 100%;height:400px" class="ag-theme-balham"></div>`
AgGrid = require('ag-grid-enterprise/dist/ag-grid-enterprise.js') // ag-grid-community@23.0.2/dist/ag-grid-community.js
stylesheet1 = html`<link rel='stylesheet'
href='https://unpkg.com/ag-grid-community/dist/styles/ag-theme-balham.css' />`
stylesheet2 = html`<link rel='stylesheet'
href='https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css' />`
gridOptions = {
const eGridDiv = document.getElementById('myGrid');
const columnDefs = [
{ headerName: "pfield", field: "pfield", rowGroup: true, hide: true },
{ headerName: "pgroup", field: "pgroup", rowGroup: true, hide: true },
{ headerName: "pclass", field: "pclass", rowGroup: true, hide: true },
{ headerName: "product",field: "product" },
{
headerName: 'Base Cols',
children: [
{
headerName: "turnover",
field: "turnover",
valueFormatter: params => params.value.toLocaleString('cs-CZ', { maximumFractionDigits: 0}),
aggFunc: 'sum'
},
{
headerName: "costs",
field: "costs",
valueFormatter: params => params.value.toLocaleString('cs-CZ', { maximumFractionDigits: 0}),
aggFunc: 'sum'
}
]
},
{
headerName: 'Profit Cols',
children: [
{
headerName: 'profit',
colId: 'profit',
valueFormatter: params => params.value.toLocaleString('cs-CZ', { maximumFractionDigits: 0}),
valueGetter: params => params.getValue('turnover') - params.getValue('costs'),
},
{
headerName: 'profitPct',
colId: 'profitPct',
valueFormatter: params => (params.value*100).toFixed(2) + "%",
valueGetter: function(params){
return (params.getValue('profit'))/params.getValue('costs')
}
}
]
}
]
const rowData = [
{ pfield: "Fasteners", pgroup: "Chains and slings", pclass: "class_dummy", product: "prd1", turnover: 35000, costs: 20000},
{ pfield: "Fasteners", pgroup: "Chains and slings", pclass: "class_dummy", product: "prd2", turnover: 36000, costs: 19000},
{ pfield: "Fasteners", pgroup: "Screws wood appliances", pclass: "class_dummy", product: "prd3", turnover: 3000, costs: 15500},
{ pfield: "Fasteners", pgroup: "Screws wood appliances", pclass: "class_dummy", product: "prd4", turnover: 37000, costs: 15500},
{ pfield: "Material processing", pgroup: "Grinders and polishers", product: "prd5", turnover: 32000, costs: 18700 },
{ pfield: "Material processing", pgroup: "Thread cutters", pclass: "class_dummy", product: "prd6", turnover: 72000, costs: 42000 }
];
// let the grid know which columns and what data to use
const gridOptions = {
columnDefs: columnDefs,
rowData: rowData,
rowSelection: 'single',
groupIncludeTotalFooter: true,
};
new AgGrid.Grid(eGridDiv, gridOptions);
gridOptions.api.sizeColumnsToFit();
return gridOptions;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
