JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div id="pivot-container"></div>
JavaScript
const report = {
"dataSource": {
"dataSourceType": "json",
"filename": "https://api.myjson.com/bins/u1veh"
},
"slice": {
"reportFilters": [ {
"uniqueName": "creationTimestamp.Year",
"filter": {
"query": {
"current": "day"
}
}
},
{
"uniqueName": "state",
"caption": "Estado",
"filter": {
"members": [
"state.[approved]",
"state.[paid_out]",
"state.[returned]"
]
}
}
],
"rows": [ {
"uniqueName": "merchantLevel1",
"caption": "Establecimientos - nivel 1"
},
{
"uniqueName": "merchantLevel2",
"caption": "Establecimientos - nivel 2"
},
{
"uniqueName": "merchantLevel3",
"caption": "Establecimientos - nivel 3"
},
{
"uniqueName": "lender",
"caption": "Financiera"
}
],
"columns": [ {
"uniqueName": "[Measures]"
} ],
"measures": [ {
"uniqueName": "offerRequestedAmount",
"formula": "sum(\"offerRequestedAmount\")",
"caption": "Imp. aprobado",
"format": "currency"
},
{
"uniqueName": "Formula #1",
"caption": "%",
"formula": "percentofcolumn(\"offerRequestedAmount\")",
"format": "discrete"
},
{
"uniqueName": "applicationId",
"formula": "count(\"applicationId\")",
"caption": "# operaciones",
"format": "discrete"
},
...