JSFiddle - React, Tailwind, and code Playground

by Ian Sadovy

HTML

<script src="https://s3.amazonaws.com/flexmonster/2.2/flexmonster.js"></script>
<div id="pivot-content"></div>

JavaScript

flexmonster.embedPivotComponent("https://s3.amazonaws.com/flexmonster/2.2/", "pivot-content", "100%", "600", {
  licenseKey: "Z53G-1T1WC3-1V1M-0L12-2M0A-1233-1I0Y-2Y2Q-1903-322S-0T2C-1I",
  configuratorActive: false,
  
}, true);

var getDimensionMeasures = function() {
  return {
    Ano: {
      type: "string",
      caption: "ANO",
      dimensionUniqueName: "FlatPivotGrid",
      dimensionCaption: "FlatPivotGrid"
    },

    Data: {
      type: "string",
      caption: "DATA",
      customSorting: getCustomSorting('Data', 'd'),
      dimensionUniqueName: "FlatPivotGrid",
      dimensionCaption: "FlatPivotGrid"
    },
    Loja: {
      type: "string",
      caption: "LOJA",
      dimensionUniqueName: "FlatPivotGrid",
      dimensionCaption: "FlatPivotGrid"
    },
    Mes: {
      type: "string",
      caption: "MES",
      dimensionUniqueName: "FlatPivotGrid",
      dimensionCaption: "FlatPivotGrid"
    },
    VlrLiquido: {
      type: "number",
      caption: "Valor Liquido"
    },
    VlrPago: {
      type: "number",
      caption: "Valor Pago",
    }
  };
};

var setReport = function() {
  var dimension = getDimensionMeasures();
  var mapData = arrayData.map(function(item) {
    return {
      Ano: (isNullOrEmpty(item.Ano)) ? "" : item.Ano,
      Mes: (isNullOrEmpty(item.Mes)) ? "" : item.Mes,
      Data: (isNullOrEmpty(item.Data)) ? "" : Globalize.format(getUTCDate(item.Data), 'd'),
      Loja: (isNullOrEmpty(item.Loja)) ? "" : item.Loja,
      VlrPago: (isNullOrEmpty(item.VlrPago)) ? 0 : item.VlrPago,
      VlrLiquido: (isNullOrEmpty(item.VlrLiquido)) ? 0 : item.VlrLiquido
    };
  });

  mapData.unshift(dimension);

  var report = {
    dataSourceType: "json",
    data: mapData,
    configuratorActive: true,
    viewType: "grid",
    showHeaders: false,
    fitGridlines: false,
    configuratorButton: true,
    showGrandTotals: 'on',
    showChartsWarning: false,
    showChartMeasures: false,
    showFilterInCharts: false,
    chartMultipleMeasures:...