My Vue 3 project is utilizing WebDataRocks to manage large datasets. While the implementation works well with smaller datasets, it faces performance issues as the data size grows due to the setReport method blocking the main thread. Below 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>
Query: How can I address the main thread blocking issue caused by setReport when handling large datasets? Are there any best practices or alternative methods recommended for efficiently managing large datasets in WebDataRocks? Additional Details: Vue.js version: 3.x WebDataRocks version: latest release Operating System: Windows 10 Browser: latest version
I experimented with the following solution to tackle the main thread blocking problem:
import { debounce } from 'lodash';
methods: {
setReport: debounce(function () {
const report = {
dataSource: {
data: this.dataSource,
},
};
this.$refs.pivot.webdatarocks.setReport(report);
}, 300),
},