JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<h3>1. Convert your CSV data to JSON (see jsonData)</h3>
<h3>2. Transform your data in a way that each entry in the initial JSON is represented by two entries separated by the date type &#38; status (Closed or Reported)</h3>
<h3>3. Pass the resulting data into the pivot table and use the "Date" field to group the dates under one dimension</h3>
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div id="pivot-container"></div>

JavaScript

var jsonData = [{
    "Number": 1,
    "Description": "‘ticket description’",
    "Reported Date": "2010-10-2",
    "Closed Date": "2010-11-5"
  },
  {
    "Number": 2,
    "Description": "‘ticket description’",
    "Reported Date": "2010-10-5",
    "Closed Date": "2010-12-5"
  },
  {
    "Number": 3,
    "Description": "‘ticket description’",
    "Reported Date": "2010-11-2",
    "Closed Date": "2010-12-5"
  },
  {
    "Number": 4,
    "Description": "‘ticket description’",
    "Reported Date": "2010-11-3",
    "Closed Date": "2011-1-13"
  }
]

function jsonConverter(inputJSON) {
  let outputJSON = [];
  inputJSON.forEach(entry => {
    outputJSON.push({
      "Number": entry["Number"],
      "Description": entry["Description"],
      "Date": entry["Reported Date"],
      "Status": "Reported"
    });
    outputJSON.push({
      "Number": entry["Number"],
      "Description": entry["Description"],
      "Date": entry["Closed Date"],
      "Status": "Closed"
    });
  });
  return outputJSON;
}

var pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  width: "100%",
  height: 500,
  report: {
    dataSource: {
      data: jsonConverter(jsonData),
      mapping: {
        "Number": {
          type: "number"
        },
        "Description": {
          type: "string"
        },
        "Date": {
          type: "date"
        },
        "Status": {
          type: "string"
        }
      }
    },
    "slice": {
      "rows": [{
          "uniqueName": "Status"
        },
        {
          "uniqueName": "[Measures]"
        }
      ],
      "columns": [{
          "uniqueName": "Date.Year"
        },
        {
          "uniqueName": "Date.Month"
        }
      ],
      "measures": [{
        "uniqueName": "Number",
        "aggregation": "count"
      }],
      "expands": {
        "columns": [{
            "tuple": [
              "date.year.[2010]"
            ]
          },
        ...