-
Notifications
You must be signed in to change notification settings - Fork 11.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Wrong chart size when using throttled
#10935
Comments
This must have happened while converting to typescript, right? |
I'm not sure I'm understanding your question. P.S. Works as expected (with the latest args) with fix from Option #1: https://jsfiddle.net/z0gwx4ut/1/ |
@kurkle I think this might have been caused by removing this code inside the const updateArgs = updateFn || ((args) => Array.prototype.slice.call(args)); |
Yes, seems like previously there was saving of arguments per each function call: export function throttled(fn, thisArg, updateFn) {
const updateArgs = updateFn || ((args) => Array.prototype.slice.call(args));
let ticking = false;
let args = [];
return function(...rest) {
args = updateArgs(rest); // !!! <-- here was saving of arguments !!!
... |
@abaksha-sc are you able to test if #10942 resolves this for you? |
@etimberg , no. It will not work. Check here: https://jsfiddle.net/uhoL6cjz/ You need to level up this variable to move out from closure: export function throttled<TArgs extends Array<any>>(
fn: (...args: TArgs) => void,
thisArg: any,
) {
let ticking = false;
let argsToUse = [];
return function(...args: TArgs) {
// Save the args for use later
argsToUse = Array.from(args) as TArgs;
if (!ticking) {
ticking = true;
requestAnimFrame.call(window, () => {
ticking = false;
fn.apply(thisArg, argsToUse);
});
}
}; |
@abaksha-sc I made that change if you're able to test again. |
@etimberg , yes, current version works fine. Thanks! |
Amazing, thank you @abaksha-sc |
Expected behavior
All resizeObserver callbacks wrapped with
throttled
and when resize calls then it should be called with the latest actual size of chart container.Code is here:
Chart.js/src/platform/platform.dom.js
Line 193 in 5144127
Current behavior
Function
throttled
just skips calls when it'sticking
and when real function call performs then throttled function calls with not actual arguments.Source of
throttled
is here:Chart.js/src/helpers/helpers.extras.ts
Lines 26 to 41 in 5144127
Reproducible sample
https://jsfiddle.net/fxcLgy7d/
It's not easy to reproduce with real chart and resizeObserver so that just example provided how
throttled
works with emulated resize calls.Optional extra steps/info to reproduce
No response
Possible solution
Option #1. Just save latest arguments when throttled function calls:
Chart.js/src/helpers/helpers.extras.ts
Line 26 in 5144127
Option #2. When listener of resize calls then always get actual size from
getBoundingClientRect
:Chart.js/src/platform/platform.dom.js
Line 195 in 5144127
Context
In my project this leads to wrong size of chart
chart.js version
4.0.1
Browser name and version
Chrome 107
Link to your project
No response
The text was updated successfully, but these errors were encountered: