I can not make this demo work, with the “hierarchy” parameter, even though I specify the parameter value, it applies the condition to all hierarchy chain.
"conditions": [{ "formula": "#value > 1", "hierarchy": "Country", "measure": "Discount", "format": { "backgroundColor": "#C5E1A5", "color": "#000000", "fontFamily": "Arial", "fontSize": "12px" } }]
Starter demo: https://www.webdatarocks.com/doc/conditional-formatting/
CodePen example which is also referenced from starter demo : https://codepen.io/webdatarocks/pen/oMvYGd
You could replace CodePen JS code with the code below to get a hierarchic render directly.
var pivot = new WebDataRocks({ container: "#wdr-component", toolbar: true, height: 395, report: { "slice": { "rows": [ { "uniqueName": "Country" }, { "uniqueName": "Category" } ], "columns":[ { "uniqueName": "Color" } ], "measures": [ { "uniqueName": "Discount", "aggregation": "sum" } ] , }, "conditions": [{ "formula": "#value > 1", "hierarchy": "Country", "measure": "Discount", "format": { "backgroundColor": "#C5E1A5", "color": "#000000", "fontFamily": "Arial", "fontSize": "12px" } }], "dataSource": { "filename": "https://cdn.webdatarocks.com/data/data.csv" } } });
Here is related github issue, https://github.com/WebDataRocks/web-pivot-table/issues/2
Advertisement
Answer
You are right. The "hierarchy"
parameter seems to have no effect.
An alternative solution is to apply the formatting with the customizeCell
hook: https://www.webdatarocks.com/doc/customizecell/.
For example:
JS:
var pivot = new WebDataRocks({ container: "#wdr-component", toolbar: true, height: 395, customizeCell: customizeCellFunction, report: { slice: { rows: [ { uniqueName: "Country" }, { uniqueName: "Category" } ], columns: [{ uniqueName: "Color" }], measures: [ { uniqueName: "Discount", aggregation: "sum" } ] }, dataSource: { filename: "https://cdn.webdatarocks.com/data/data.csv" } } }); function customizeCellFunction(cellBuilder, cellData) { if (cellData && cellData.type === "value" && cellData.measure && cellData.measure.uniqueName === "Discount" && cellData.value > 1 ) { if ( cellData.rows && cellData.rows.length > 0 && cellData.rows[cellData.rows.length - 1].hierarchyUniqueName === "Country" ) { cellBuilder.addClass("green"); } } }
CSS:
.green { background-color: #c5e1a5 !important; color: #000000 !important; font-family: Arial !important; font-size: 12px !important; }
Here is a CodePen example for illustration: https://codepen.io/VD_A/pen/vYXgqbY.