Performance issue - not working

by ilaria_nunziante

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="change(0)">Layout Year/Month</button>
<button onclick="change(1)">Layout Month</button>
<div id="pivot-container">The component will appear here</div>

JavaScript

let mapping1 = {
	Quantity: {type: "number"},
	Product: {type: "string"},
	Month: {type: "string"},
	Year: {type: "string"}
}
let mapping2 = {
	Quantity: {type: "number"},
	Product: {type: "string"},
	Month: {type: "level", level: "Month", parent: "Year", hierarchy:"Time"},
	Year: {type: "level", level: "Year",  hierarchy:"Time"}
}
let slices = [ {
    rows:[{"uniqueName": "Product"}, {"uniqueName": "[Measures]"}],
    columns:[{"uniqueName":"Time", "levelName": "Year"}],
    measures:[{"uniqueName":"Quantity"}]
  }, {
    rows:[{"uniqueName": "Product"}, {"uniqueName": "[Measures]"}],
    columns:[{"uniqueName":"Time", "levelName": "Month"}],
    measures:[{"uniqueName":"Quantity"}]
  }
]

var pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      data: getData(),
      mapping: mapping2
    },
    options: {
      editing: true
    },
    slice: slices[0]
  }
});

function getData() {
  let count = 20000;
  let data = [];
  for (var i=0; i < count; i++){
  	for (var j = 7; j <=12; j++){
      let item ={
        Quantity: 1,
        Product: 'Product ' + i,
        Month: 'Month' + j,
        Year: 2020
      }
      data.push(item);
    }    
  	for (var j = 1; j <=6; j++){
      let item ={
        Quantity: 1,
        Product: 'Product ' + i,
        Month: 'Month' + j,
        Year: 2021
      }
      data.push(item);
    }    
  }
  return data;
}

function change(index){	
	flexmonster.runQuery(slices[index]);
}