JSFiddle - React, Tailwind, and code Playground

by elyskimo

HTML

<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/",
  toolbar: true,
  report: {
    dataSource: {
      type: "csv",
      filename: "https://s3-eu-west-1.amazonaws.com/statics.interporc-fc.fr/Public/Flexmonster/DeclarationsTest/data-mock.csv",
      mapping: {
        "date": {
          "type": "date"
        },
        "weight": {
          "type": "number"
        },
        "isValid": {
          "type": "string",
          "filters": false
        },
        "name": {
          "caption": "User"
        }
      }
    },
    slice: {
    	reportFilters: [
        {
          "uniqueName": "category",
          "caption": "Category"
        },
        {
          "uniqueName": "type",
        	"caption": "Type"
        },
        {
          "uniqueName": "isValid",
        	"caption": "Valid",
          "filter": {
            "exclude": [
              "islabelrouge.[0]"
            ]
          }
        }
      ],
      rows: [{
        uniqueName: "name"
      }, 
      {
        uniqueName: "date.Year",
        caption: "Year"
      }, 
      {
        uniqueName: "date.Month",
        caption: "Month"
      }
      ],
      columns: [{
        uniqueName: "[Measures]"
      }],
      measures: [{
        uniqueName: "weight",
        aggregation: "sum",
        grandTotalCaption: "Weight Total",
        format: "-h0ot5wia8bv1"
      }, 
      {
        uniqueName: "weight",
        aggregation: "sum",
        grandTotalCaption: "Weight Total (filtered)",
        format: "-h0ot5wia8bv1"
      }]
    },
    formats: [
     {
      name: "-h0ot5wia8bv1",
      decimalPlaces: 2,
      isPercent: false
    }
    ],
    options: {
      grid: {
        type: "compact"
      }
    }
  },
  width: "100%",
  height: 800
});