I’m using WebDataRocks in my Vue 3 project to handle large datasets. My implementation works fine with smaller datasets, but when the data size increases, the setReport method blocks the main thread, causing performance issues. Here is a simplified version of my code:
<template>
<div>
<webdatarocks ref="pivot"></webdatarocks>
</div>
</template>
<script>
import WebDataRocks from "webdatarocks";
export default {
props: {
dataSource: {
type: Array,
required: true,
},
},
mounted() {
this.$refs.pivot.webdatarocks.on("reportcomplete", () => {
this.$refs.pivot.webdatarocks.off("reportcomplete");
this.$refs.pivot.webdatarocks.setReport(this.report);
});
},
watch: {
dataSource: {
handler(newValue) {
this.setReport();
},
deep: true,
},
},
methods: {
setReport() {
const report = {
dataSource: {
data: this.dataSource,
},
};
this.$refs.pivot.webdatarocks.setReport(report);
},
},
};
</script>
Questions:
How can I prevent setReport from blocking the main thread when dealing with large datasets?
Are there any recommended practices or alternative approaches to handle large datasets efficiently in WebDataRocks?
Additional Information:
Vue.js version: 3.x
WebDataRocks version: last version
Operating System: Windows 10
Browser: last version
I tried the following approaches to prevent setReport from blocking the main thread:
import { debounce } from 'lodash';
methods: {
setReport: debounce(function () {
const report = {
dataSource: {
data: this.dataSource,
},
};
this.$refs.pivot.webdatarocks.setReport(report);
}, 300),
},