JSFiddle - React, Tailwind, and code Playground
by Ravi A
HTML
<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div id="pivotContainer"></div>
JavaScript
var pivot = new Flexmonster({
container: "pivotContainer",
componentFolder: "https://cdn.flexmonster.com/",
toolbar: true,
report: {
"dataSource": {
"data": getData()
},
"slice": {
"rows": [{
"uniqueName": "Company"
}],
"columns": [{
"uniqueName": "[Measures]"
}],
"measures": [{
"uniqueName": "Score",
"aggregation": "average"
},
{
"uniqueName": "Results",
"aggregation": "sum"
},
{
"uniqueName": "Calc",
"formula": "if(sum(\"Results\") >10,1,0)",
"caption": "Calc"
}
]
},
"conditions": [{
"formula": "#value < 50 AND sum('Results') > 10",
"measure": "Score",
"format": {
"backgroundColor": "#FFCDD2",
"color": "#000000",
"fontFamily": "Arial",
"fontSize": "12px"
}
}],
"options": {
"showGrandTotals": false
}
}
});
function getData() {
return [{
"Score": 3,
"Results": 2,
"Company": "Farmage"
},
{
"Score": 14,
"Results": 6,
"Company": "Farmage"
},
{
"Score": 16,
"Results": 2,
"Company": "Isostream"
},
{
"Score": 90,
"Results": 16,
"Company": "Isostream"
},
{
"Score": 64,
"Results": 11,
"Company": "Mantro"
},
{
"Score": 11,
"Results": 9,
"Company": "Mantro"
},
{
"Score": 13,
"Results": 2,
"Company": "Kindaloo"
},
{
"Score": 23,
"Results": 3,
"Company": "Kindaloo"
},
{
"Score": 34,
"Results": 2,
"Company": "Neocent"
},
{
"Score": 89,
"Results": 4,
"Company": "Neocent"
}
]
}