JSFiddle - React, Tailwind, and code Playground

by Jonathan Bishop

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="row-data" class="info">
   Click on a cell containing data and row data will appear here
</div>
<div id="flat-pivot-container">The component will appear here</div>

CSS

.info {
  width: 100%;
  text-align: center;
  padding: 20px;
  background: #fdfd96;
}

JavaScript

var pivot = new Flexmonster({
  container: "flat-pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  report: {
        dataSource: {
          dataSourceType: 'json',
          data: getData(),
          mapping: {
            'Location/Lab': {
              type: 'string',
              hierarchy: 'Location/Lab/User',
            },
            signingDoctorUsername: {
              type: 'string',
              hierarchy:'Location/Lab/User',
              parent: 'Location/Lab',
            },
            id: { type: 'id' },
            medicalStudyId: { type: 'number', },
            'Report Label': { type: 'string' },
            Application: { type: 'string' },
            hoursToComplete: { type: 'number', },
            'Report Signed': { type: 'number', },
          },
        },
        slice: {

          rows: [{ uniqueName: '[Location/Lab/User]' }],
          measures: [
            {
              uniqueName: 'numberOfStudies',
              formula: 'distinctcount("medicalStudyId")',
              caption: '# of reports',
              individual: true,
              folder: "openWorklist"
            },

            {
              uniqueName: 'unfinishedStudies',
              formula: 'if(\'Report Signed\' == 0, distinctcount("medicalStudyId"), )',
              caption: 'Unfinished',
              individual: true,
              folder: "openWorklist"
            },
            {
              uniqueName: 'finishedStudies',
              formula: 'if(\'Report Signed\' == 1, distinctcount("medicalStudyId"), )',
              caption: 'Finished',
              individual: true,
              folder: "openWorklist"
            },

            {
              uniqueName: 'underFourHours',
              formula: 'if(\'hoursToComplete\' < 4 and \'Report Signed\' == 1, distinctcount("medicalStudyId"), )',
              caption: 'Finished under 4hrs',
              individual: true,
              folder: "openWorklist"
            },
...