JSFiddle - React, Tailwind, and code Playground

by Ian Sadovy

HTML

<script src="https://s3.amazonaws.com/flexmonster/2.2/flexmonster.js"></script>
<button onclick="setFilter('Color', ['blue'])">Set Filter</button>
<div id="pivot-content"></div>

JavaScript

flexmonster.embedPivotComponent("https://s3.amazonaws.com/flexmonster/2.2/", "pivot-content", "100%", "600", {
  licenseKey: "Z53G-1T1WC3-1V1M-0L12-2M0A-1233-1I0Y-2Y2Q-1903-322S-0T2C-1I",
  configuratorActive: false,
  jsPivotCreationCompleteHandler: pivotCreationCompleteHandler
}, true);

function setFilter(field, values) {
  flexmonster.setFilter(field, values.map(v => field + '.[' + v + ']'));
  var slice = {
    pages: flexmonster.getPages(),
    rows: flexmonster.getRows(),
    columns: flexmonster.getColumns(),
    measures: flexmonster.getMeasures()
  };
  slice.pages.push({
    uniqueName: field
  });
  flexmonster.runQuery(slice);
}

function pivotCreationCompleteHandler() {
  setDataViaAPI();
}

function setDataViaAPI() {
  addDataStructure();
  addData();
  setSlice();
}

function addDataStructure() {
  //first add some dimension
  flexmonster.addDimension({
    uniqueName: "[Color]",
    caption: "Color"
  });
  //now hierarchy can be added to previously created dimension
  flexmonster.addHierarchy({
    uniqueName: "[Color].[Color]",
    caption: "Color",
    dimensionUniqueName: "[Color]",
    sortName: "desc"
  });
  flexmonster.addDimension({
    uniqueName: "[Style]",
    caption: "Style"
  });
  flexmonster.addHierarchy({
    uniqueName: "[Style].[Style]",
    caption: "Style",
    dimensionUniqueName: "[Style]"
  });
  //now measures can be added
  flexmonster.addMeasure({
    uniqueName: "[Measures].[Price]",
    caption: "Price"
  });
  flexmonster.addMeasure({
    uniqueName: "[Measures].[Discount]",
    caption: "Discount",
    aggregation: "average"
  });
  //and hierarchical date
  flexmonster.addDimension({
    uniqueName: "[Date]",
    caption: "Date"
  });
  flexmonster.addHierarchy({
    uniqueName: "[Date].[Date]",
    caption: "Date",
    dimensionUniqueName: "[Date]",
    type: "hierarchical date"
  });
}

function addData() {
  flexmonster.addDataArray([
    ["red", "modern", 10, 0, "01/08/2014"],
    ["blue", "classic", 13, 3,...