JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<button onclick="getFilter()">Get filter</button>

<div id="pivot-container"></div>

<div class="output" id="output">Output will appear here</div>

CSS

.output {
  width: 80%;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  background: rgba(242, 242, 242, 1);
  font-family: Menlo, Monaco, "Courier New", Courier, monospace;
  white-space: pre;
  font-size: 16px;
  font-weight: 400;
  overflow-y: scroll;
  margin-top: 20px;
}

JavaScript

let endpointUrl = "https://olap.flexmonster.com:9500/";
let index = "nonexistent_index";

var pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 550,
  toolbar: true,
  report: {
    "dataSource": {
      "type": "api",
      "url": pivotEndpoint,
      "index": index,
    },
    "slice": {
      "rows": [{
        "uniqueName": "Date##Calendar##Calendar Month",
        "filter": {
          "exclude": [
            "date##calendar##calendar month.[2]",
            "date##calendar##calendar month.[1]"
          ]
        }
      }],
      "columns": [{
        "uniqueName": "[Measures]"
      }],
      "measures": [{
        "uniqueName": "Weight",
        "aggregation": "sum"
      }]
    }
  }
});

function getFilter() {
  let output;
  const fields = flexmonster.getAllHierarchies();
  const field = fields[0].uniqueName;
  const filter = flexmonster.getFilter(field);
  if (filter === null) {
    showOutput("No filter specified");
    return;
  }
  const members = flexmonster.getMembers(field, '', members => {
    if (filter.members) output = translateToCaptions(filter.members, members);
    else if (filter.exclude) output = translateToCaptions(filter.exclude, members);
    showOutput(JSON.stringify(filter, null, 4));
  });
}

function translateToCaptions(uniqueNames, members) {
  uniqueNames.forEach((memberUniqueName, i) => {
    uniqueNames[i] = members.find(member => memberUniqueName == member.parentMember.replace('(all member)', member.uniqueName)).caption;
  });
  return uniqueNames;
}

function showOutput(content) {
  document.getElementById("output").innerText = content;
}


function pivotEndpoint(requestStringified, successCallback, errorCallback) {
  let request = JSON.parse(requestStringified);
  let response;
  if (request.type === 'handshake') {
    response = {
      "success": true,
      "version": "2\u002e8\u002e5"
    };
  } else if (request.type === 'fields')...