JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div id="pivot-container"></div>
JavaScript
var pivot = new Flexmonster({
container: "pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
toolbar: true,
report: {
dataSource: {
mapping: {
"One": {
"type": "number",
"dimensionUniqueName": "Test"
},
"Two": {
"type": "number",
"dimensionUniqueName": "Test"
},
"Three": {
"type": "number",
"dimensionUniqueName": "Dates"
},
"Four": {
"type": "number",
"dimensionUniqueName": "Dates"
},
"creation_year": {
"hierarchy": "Creation Date",
"type": "level",
"level": "Year",
"dimensionUniqueName": "Dates"
},
"creation_week": {
"hierarchy": "Creation Date",
"type": "level",
"level": "Week",
"parent": "Year",
"dimensionUniqueName": "Dates"
},
"creation_day": {
"hierarchy": "Creation Date",
"type": "level",
"level": "Day",
"parent": "Week",
"dimensionUniqueName": "Dates"
},
"modification_year": {
"hierarchy": "Modification Date",
"type": "level",
"level": "Year",
"dimensionUniqueName": "Dates"
},
"modification_week": {
"hierarchy": "Modification Date",
"type": "level",
"level": "Week",
"parent": "Year",
"dimensionUniqueName": "Dates"
},
"modification_day": {
"hierarchy": "Modification Date",
"type": "level",
"level": "Day",
"parent": "Week",
"dimensionUniqueName": "Dates"
}
},
data: getData()
},
slice: {
rows: [{
uniqueName: "Creation Date"
}],
columns: [{
uniqueName: "Modification Date"
}],
measures: [{
uniqueName: "One",
aggregation: "sum"
}]
...