JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div>
<button onclick="refreshCustomData()">Refresh Custom DataSource</button>
</div>
<div id="pivot-container"></div>
JavaScript
let pivot = new Flexmonster({
container: "pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
height: 400,
report: {
"dataSource": {
"type": "api",
"url": pivotEndpoint,
"index": "any"
},
"slice": {
"rows": [{
"uniqueName": "Color",
},
{
"uniqueName": "[Measures]"
}
],
"columns": [{
"uniqueName": "Country",
}],
"measures": [{
"uniqueName": "Price",
"aggregation": "sum"
}]
},
options: {
caseSensitiveMembers: true
}
}
});
function pivotEndpoint(request, successCallback, errorCallback) {
request = JSON.parse(request);
var result = null;
if (request.type == "handshake") {} else if (request.type == "fields") {
result = getSchema(request.index);
} else if (request.type == "members") {
result = getMembers(request.index, request.field, request.page);
} else if (request.type == "select") {
result = getSelectResult(request.index, request.query, request.page);
} else {
errorCallback("Request type " + request.type + " is not implemented.");
}
successCallback(result);
}
function pivotEndpoint2(request, successCallback, errorCallback) {
request = JSON.parse(request);
var result = null;
if (request.type == "handshake") {} else if (request.type == "fields") {
result = getSchema(request.index);
} else if (request.type == "members") {
result = getMembers(request.index, request.field, request.page);
} else if (request.type == "select") {
result = getSelectResult2(request.index, request.query, request.page);
} else {
errorCallback("Request type " + request.type + " is not implemented.");
}
successCallback(result);
}
function getSchema(index) {
return {
"fields": [{
"uniqueName": "Color",
"type": "string"
}, {
"uniqueName": "Country",
"type": "string"
}, {
"uniqueName": "Price",
"type":...