Public
Edited
Jan 16, 2024
periodDesc = ""
onFaCellClicked = () => {}
paramSet1 = ({
valueFormatter: periodDesc.includes("percent")
? percentFormatter
: intFormatter,
onCellClicked: onFaCellClicked.bind(this),
cellClassRules: {
"selected-cell": "data.W2_S1.flag === true",
"five-bn-cell":
"Math.abs(data.W2_S1.value) > 5000 & ['F', 'K7'].includes(data.FlowType)"
},
cellStyle: { color: "#0097A7" }
})
paramSet2 = (color, name) => ({
columnGroupShow: "closed",
valueFormatter: periodDesc.includes("percent")
? percentFormatter
: intFormatter,
onCellClicked: onFaCellClicked.bind(this),
cellClassRules: {
"selected-cell": `${name}.flag === true`,
"five-bn-cell":
"Math.abs(data.W2_S1.value) > 5000 & ['F', 'K7'].includes(data.FlowType)"
},
cellStyle: { color: color || "#0097A7" }
})
columnDefs = [
{
headerName: "W2 - Resident",
children: [
{ headerName: "S1 - Total", field: "W2_S1.value", ...paramSet1 },
{ headerName: "S11 - NFC", field: "W2_S11.value", ...paramSet2() },
{
headerName: "S11 - NFC",
field: "W2_S11.value",
...paramSet2("black", "data.W2_S1")
}
]
}
]
columnDefinitions = [
{
headerName: "",
children: [
{
headerName: "Instrument",
field: "Instrument",
minWidth: 50,
maxWidth: 110,
columnGroupShow: "open",
pinned: "left"
},
{
headerName: "Maturity",
field: "Maturity",
minWidth: 50,
maxWidth: 90,
columnGroupShow: "open",
pinned: "left"
},
{
headerName: "Description",
field: "InstrumentDesc",
pinned: "left",
cellRenderer: "cellRenderer"
}
]
},
{
headerName: "W0 - Total",
children: [
{
headerName: "S1 - Total",
field: "W0_S1.value",
valueFormatter: "percent",
cellClassRules: {
"selected-cell": "data.W0_S1.flag === true",
"five-bn-cell":
"Math.abs(data.W0_S1.value) > 5000 & ['F', 'K7'].includes(data.FlowType)"
},
cellStyle: { color: "#0097A7" }
}
]
},
{
headerName: "W2 - Resident",
children: [
{
headerName: "S1 - Total",
field: "W2_S1.value",
valueFormatter: "percent",
cellClassRules: {
"selected-cell": "data.W2_S1.flag === true",
"five-bn-cell":
"Math.abs(data.W2_S1.value) > 5000 & ['F', 'K7'].includes(data.FlowType)"
},
cellStyle: { color: "#0097A7" }
},
{
headerName: "S11 - NFC",
field: "W2_S11.value",
columnGroupShow: "closed",
valueFormatter: "percent",
cellClassRules: {
"selected-cell": "data.W2_S11.flag === true",
"five-bn-cell":
"Math.abs(data.W2_S11.value) > 5000 & ['F', 'K7'].includes(data.FlowType)"
}
},
{
headerName: "S12 - FC",
field: "W2_S12.value",
columnGroupShow: "closed",
valueFormatter: "percent",
cellClassRules: {
"selected-cell": "data.W2_S12.flag === true",
"five-bn-cell":
"Math.abs(data.W2_S12.value) > 5000 & ['F', 'K7'].includes(data.FlowType)"
},
cellStyle: { color: "#0097A7" }
}
]
},
{
headerName: "Others",
hide: true,
children: [
{ hide: true, field: "W0_S1.flag" },
{ hide: true, field: "W0_S1.flag" },
{ hide: true, field: "W2_S1.flag" },
{ hide: true, field: "W2_S11.flag" },
{ hide: true, field: "W2_S12.flag" },
{ hide: true, field: "W2_S121.flag" },
{ hide: true, field: "W2_S12K.flag" },
{ hide: true, field: "W2_S124.flag" },
{ hide: true, field: "W2_S12O.flag" },
{ hide: true, field: "W2_S125.flag" },
{ hide: true, field: "W2_S126.flag" },
{ hide: true, field: "W2_S127.flag" },
{ hide: true, field: "W2_S128.flag" },
{ hide: true, field: "W2_S129.flag" },
{ hide: true, field: "W2_S13.flag" },
{ hide: true, field: "W2_S1M.flag" },
{ hide: true, field: "W2_S14.flag" },
{ hide: true, field: "W2_S15.flag" },
{ hide: true, field: "W1_S1.flag" },
{ hide: true, field: "U5_S1.flag" },
{ hide: true, field: "U5_S11.flag" },
{ hide: true, field: "U5_S12.flag" },
{ hide: true, field: "U5_S121.flag" },
{ hide: true, field: "U5_S12K.flag" },
{ hide: true, field: "U5_S124.flag" },
{ hide: true, field: "U5_S12O.flag" },
{ hide: true, field: "U5_S125.flag" },
{ hide: true, field: "U5_S126.flag" },
{ hide: true, field: "U5_S127.flag" },
{ hide: true, field: "U5_S128.flag" },
{ hide: true, field: "U5_S129.flag" },
{ hide: true, field: "U5_S13.flag" },
{ hide: true, field: "U5_S1M.flag" },
{ hide: true, field: "U5_S14.flag" },
{ hide: true, field: "U5_S15.flag" },
{ hide: true, field: "U4_S1.flag" },
{ hide: true, field: "W9_S1.flag" }
]
}
]
cellRenderer = (params) => {
return params.value ? params.value : "";
}
percentFormatter = () => {}
intFormatter = () => {}
buildGridColumnDefinitions = (columnDefinitions) => {
const columns = [];
for (const columnDefinition of columnDefinitions) {
const children = [];
for (const childDefinition of columnDefinition.children || []) {
const child = {
cellClassRules: childDefinition.cellClassRules,
cellStyle: childDefinition.cellStyle,
columnGroupShow: childDefinition.columnGroupShow,
field: childDefinition.field,
headerName: childDefinition.headerName,
onCellClicked: onFaCellClicked.bind(this),
minWidth: childDefinition.minWidth,
maxWidth: childDefinition.minWidth,
pinned: childDefinition.pinned,
hide: childDefinition.hide
};
switch (childDefinition.cellRenderer) {
case "cellRenderer":
child.cellRenderer = cellRenderer;
break;
}
switch (childDefinition.valueFormatter) {
case "int":
child.valueFormatter = intFormatter;
break;
case "percent":
child.valueFormatter = percentFormatter;
break;
}
children.push(child);
}
columns.push({
field: columnDefinition.field,
headerName: columnDefinition.headerName,
children
});
}
return columns;
}
data = [
{
Instrument: "1",
Maturity: "2",
InstrumentDesc: 3,
W0_S1: { value: 4, flag: 1 },
W2_S1: { value: 5, flag: 1 },
W2_S11: { value: 6, flag: 1 },
W2_S12: { value: 7, flag: 1 }
}
]
buildGridDatasource = () => ({
getRows: (params) => params.successCallback(data, data.length),
rowCount: data.length
})
gridOptions = ({
columnDefs: buildGridColumnDefinitions(columnDefinitions),
datasource: buildGridDatasource(),
defaultColDef: { resizable: true, width: 120 },
rowBuffer: 50,
rowModelType: "infinite",
cacheBlockSize: data.length,
cacheOverflowSize: 0,
maxConcurrentDatasourceRequests: 1,
infiniteInitialRowCount: 0,
maxBlocksInCache: 1
})
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.