JSFiddle - React, Tailwind, and code Playground

by florent_movework

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div id="pivot-container">The component will appear here</div>

JavaScript

var pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  height: 600,
  report: {"dataSource":
           {
             "type":"json",
             "data":
             [
               {
                 "Day Date":{"type":"string"},
                 "Response Id":{"type":"string"},
                 "Site name":{"type":"string"},
                 "Site objective":{"type":"number", "visible": true}
               },
               ["2024-12-01","a","Site 1","2"],
               ["2024-12-01","b","Site 1","2"],
               ["2024-12-02","c","Site 1","2"],
               ["2024-12-02","d", "Site 2","3"],
               ["2024-12-03","e", "Site 2","3"],
               ["2024-12-04","f", "Site 3","2"]
             ]
           },
           "slice":{
             "rows":[{"uniqueName":"Site name"}],
             "columns":[{"uniqueName":"Day Date"},{"uniqueName":"Site objective"},{"uniqueName":"[Measures]"}],
             "measures":[
               {
                 "uniqueName": "respCount",
                 "formula": "if( count(\"Response Id\") , count(\"Response Id\"), 0)",
                 "calculateNaN": false,
                 "caption": "Response count"
               },
               {
                 "uniqueName": "Objective",
                 "formula": "if( count(\"Response Id\") , average(\"Site objective\") , 0)",
                 "caption": "Objective"
               },
               {
                 "uniqueName": "Result",
                 "formula": "if( count(\"Response Id\") , \"respCount\" / average(\"Site objective\"), 0)",
                 "caption": "Result"
               }
             ]
           },"version":"2.9.92",
           "creationDate":"2024-12-20T14:08:46.907Z"
          },
  shareReportConnection: {
    url: 'https://not.an.url'
  },
  beforetoolbarcreated: toolbar => {
    toolbar.showShareReportTab = true;
  },
  licenseKey:...