Memory usage

[WimAuw]

Frequently refreshing the chart with new data sets will let grow memory.
Definition

Refresh triggered by: pivotKey++;
(after setting all pivotXxxxx Fields)

Memory elements that are retained by a JS ref
... multiple instances of:

...

[Seungwoo321]

The pivotKey++ pattern used in the test is inappropriate for memory leak testing because
changing the key prop forces Vue to destroy and recreate the entire component, which doesn't
represent normal usage where pivot tables should preserve user state across data updates. The
proper approach is to update only the data prop without changing the component key.

Additionally, there's no significant difference between versions:

• v1.1.7: https://codesandbox.io/p/live/4c739959-799b-4e64-8be4-5243128fe3e7
• v1.2.1: https://codesandbox.io/p/live/37d328a9-97a8-4bcd-aff1-7fdb2bb212bd

[Seungwoo321]

@WimAuw Also, what's the actual scenario where you use this pattern in production?

[WimAuw]

I used the pivotKey pattern because updating the properties did not do it... (I see only the areas and the drag drop fields, no data or row/column fields which were set). The pivotKey++ does show the updated props.
(https://michaelnthiessen.com/force-re-render/)
(after trying the different methods... i can see the props have changed in component but changes are not displayed)

(the pivot is connected to a data grid which can hold different data sets, user can choose the data set and the (previously saved) pivot config to show it in the pivot table... works great! except for memory issue...)

[WimAuw]

Choose report...

Choose Pivot layout...

[WimAuw]

PS. updated to the latest versions
npm install vue-pivottable
npm install @vue-pivottable/plotly-renderer

Now stuck with error:
App • ERROR • UI in ./node_modules/@vue-pivottable/plotly-renderer/dist/plotly-renderer.es.js

export 'useProvidePivotData' (imported as 'mu') was not found in 'vue-pivottable' (possible exports: PivotUtilities, Renderer, VuePivottable, VuePivottableUi, default)

App • ERROR • UI in ./node_modules/@vue-pivottable/plotly-renderer/dist/plotly-renderer.es.js

export 'providePivotData' (imported as 'n0') was not found in 'vue-pivottable' (possible exports: PivotUtilities, Renderer, VuePivottable, VuePivottableUi, default)

App • COMPILATION FAILED • Please check the log above for details.

[Seungwoo321]

Hi @WimAuw,

Thank you for the clarification about why you need the pivotKey++ pattern.

1. Solution: pivotModel for Your Use Case

Based on your scenario (switching between saved pivot configs for different datasets), the new v-model:pivotModel feature in v1.2.0+ should solve your original problem without needing pivotKey++. The pivotModel ensures UI updates when you load different configurations.

Could you test if pivotModel works for your data grid integration? This should eliminate both the UI update issue and any potential memory concerns.

2. Import Error - Fixed in v1.2.2

Your latest error about missing exports is fixed. Please update to:

• vue-pivottable@1.2.2
• @vue-pivottable/plotly-renderer@latest
• @vue-pivottable/lazy-table-renderer@latest

3. If pivotModel Doesn't Work for You

If pivotModel doesn't solve your use case and you still need the pivotKey++ pattern, could you help us by:

• Providing a minimal reproduction example
• Sharing more details about the specific scenarios where pivotModel fails
• Contributing a PR if you find a solution

Your real-world use case is valuable for improving the library.
Please let me know if pivotModel resolves your issue.

Best regards

[WimAuw]

Hi,

The pivotModel works fine, its triggers the update.
I still have the memory problem, however not what I saw previously (instances of pivotContainer).

I see now these instances on detached elements refered by JS (doubtful if these are the problem, Chrome memory usage is 'strange')

will look into it deeper...