JSFiddle - React, Tailwind, and code Playground

by Ravi A

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<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/",
  report: {
    dataSource: {
      dataSourceType: "json",
      data: getData()
    },
    "slice": {
      "rows": [{
          "uniqueName": "COURSE_NAME"
        },
        {
          "uniqueName": "USER_STATUS"
        }
      ],
      "columns": [{
        "uniqueName": "[Measures]"
      }],
      "measures": [{
          "uniqueName": "COMPUTED_STATUS",
          "formula": "if( count(\"COURSE_NAME\") == 0, 0, if( isnan( sum(\"USER_STATUS\")), 1, if( sum(\"USER_STATUS\") == 0, 2, 3)) )",
          "caption": "COMPUTED_STATUS"
        }
      ]
    }

  },

  toolbar: true,
  width: "100%",
  height: 370
});

function getData() {
  return [{
      "COURSE_NAME": null,
      "USER_STATUS": 1
    },
    {
      "COURSE_NAME": "course name 1A",
      "USER_STATUS": null
    },
    {
      "COURSE_NAME": "course name 1B",
      "USER_STATUS": 2
    },
    {
      "COURSE_NAME": "course name 1C",
      "USER_STATUS": 1
    }
  ];
}