JSFiddle - React, Tailwind, and code Playground

by Ian Sadovy

HTML

<script src="https://s3.amazonaws.com/flexmonster/2.2/flexmonster.js"></script>
<script src="https://s3.amazonaws.com/flexmonster/2.3/flexmonster.js"></script>
<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<div id="pivot-container"></div>

JavaScript

var pivot = $("#pivot-container").flexmonster({
  componentFolder: "https://s3.amazonaws.com/flexmonster/2.3/",
  width: "100%",
  height: 430,
  toolbar: true,
  report: {
    dataSource: {
      dataSourceType: "json",
      data: [{
        "[Dim].[Ccy]": {
          "caption": "Ccy",
          "type": "string",
          "dimensionUniqueName": "DETAILS",
          "dimensionCaption": "Details"
        },
        "[Measures].[diffPercentagef0]": {
          "caption": "Diff % F0",
          "type": "number",
          "format": "NUMBER_3DP",
          "dimensionUniqueName": "DIFF_VALUES",
          "dimensionCaption": "Diff Values"
        },
      }, {
        "[Dim].[Ccy]": "value 1",
        "[Measures].[diffPercentagef0]": 100
      }, {
        "[Dim].[Ccy]": "value 2",
        "[Measures].[diffPercentagef0]": 100
      }]
    },
    slice: {
      rows: [{
        uniqueName: "[Dim].[Ccy]"
      }],
      columns: [{
        uniqueName: "[Measures]"
      }],
      measures: [{
        uniqueName: "[Measures].[diffPercentagef0]"
      }],
    },
    options: {
      configuratorActive: false
    }
  }
});