JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<button onclick='filter1()'>
Compare second half year
</button>

<div id="pivotContainer"></div>

JavaScript

var pivot = new Flexmonster({
  container: "pivotContainer",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      data: getData(),
      mapping: {
        Date: {
          type: 'date'
        },
        Revenue: {
          type: 'number'
        }
      }
    },
    slice: {
      columns: [{
        uniqueName: 'Date.Year'
      }, {
        uniqueName: 'Date.Month',
        filter: {
          "members": [
            "date.month.[january]",
            "date.month.[february]",
            "date.month.[march]",
            "date.month.[june]",
            "date.month.[april]",
            "date.month.[may]"
          ]
        }
      }],
      rows: [{
        uniqueName: '[Measures]'
      }],
      measures: [{
          uniqueName: 'Revenue',
          aggregation: 'sum'
        },
        {
          uniqueName: 'Revenue',
          aggregation: '%difference'
        }
      ]
    },
    options: {
      grid: {
        title: 'First half year'
      }
    }
  }
});

function filter1() {
  pivot.setFilter("Date.Month", {
    "members": [
      "date.month.[july]",
      "date.month.[august]",
      "date.month.[septembet]",
      "date.month.[october]",
      "date.month.[november]",
      "date.month.[december]"
    ]
  });
  pivot.setOptions({
    grid: {
      title: 'Second half year'
    }
  });
  pivot.refresh();
}

function getData() {
  return [{
      "Date": "2019-08-15T21:33:17+00:00",
      "Revenue": 7519
    },
    {
      "Date": "2019-01-07T03:04:17+00:00",
      "Revenue": 9105
    },
    {
      "Date": "2019-07-07T03:34:32+00:00",
      "Revenue": 8439
    },
    {
      "Date": "2019-02-15T19:40:38+00:00",
      "Revenue": 8199
    },
    {
      "Date": "2018-09-10T03:21:56+00:00",
      "Revenue": 4198
    },
    {
      "Date": "2018-08-11T08:45:04+00:00",
      "Revenue": 6894
    },
    {
      "Date": "2018-08-06T22:55:18+00:00",
      "Revenue": 3306
    },
    {
     ...