JSFiddle - React, Tailwind, and code Playground
by neneaaglaia
HTML
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div id="pivot-container"></div>
JavaScript
let pivot = new Flexmonster({
container: "pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
height: 430,
toolbar: true,
});
fetch('https://services.odata.org/TripPinRESTierService/(S(mexv0e2pvoftpnsvxtjz2h1t))/Airports')
.then((response) => {
return response.json();
})
.then((data) => {
data = jsonPath(data, "$..value[1:].Location.City");
pivot.setReport({
dataSource: {
type: 'json',
data: data
},
slice: {
rows: [{
uniqueName: "Color"
}],
columns: [{
uniqueName: "Country",
filter: {
exclude: ["Australia", "Germany"]
}
},
{
uniqueName: "[Measures]"
}
],
measures: [{
uniqueName: "Price"
}]
}
})
});
/* JSONPath 0.8.0 - XPath for JSON
*
* Copyright (c) 2007 Stefan Goessner (goessner.net)
* Licensed under the MIT (MIT-LICENSE.txt) licence.
*/
function jsonPath(obj, expr, arg) {
var P = {
resultType: arg && arg.resultType || "VALUE",
result: [],
normalize: function(expr) {
var subx = [];
return expr.replace(/[\['](\??\(.*?\))[\]']/g, function($0, $1) {
return "[#" + (subx.push($1) - 1) + "]";
})
.replace(/'?\.'?|\['?/g, ";")
.replace(/;;;|;;/g, ";..;")
.replace(/;$|'?\]|'$/g, "")
.replace(/#([0-9]+)/g, function($0, $1) {
return subx[$1];
});
},
asPath: function(path) {
var x = path.split(";"),
p = "$";
for (var i = 1, n = x.length; i < n; i++)
p += /^[0-9*]+$/.test(x[i]) ? ("[" + x[i] + "]") : ("['" + x[i] + "']");
return p;
},
store: function(p, v) {
if (p) P.result[P.result.length] = P.resultType == "PATH" ? P.asPath(p) : v;
return !!p;
},
trace: function(expr, val, path) {
if (expr) {
var x = expr.split(";"),
...