Risky code in getStrokeDasharray leads to infinite loop when strokeDasharray is '0'

[vjohansen]

I was using strokeDasharray='0' to disable dashed lines (maybe incorrect) but it leads to an infinite loop in getStrokeDasharray .

I suggest the code is changed so infinite loops do not happen even on incorrect user input. From a code style perspective it should be obvious that an infinite loop does not happen (maybe : if (i>10) {console.warn .. ; break}) .

[vjohansen]

This may explain why setting isAnimationActive={false} in #1812 fixes hangs.

There seem to be a relation with strokeDasharray and isAnimationActive

"Line chart strokeDasharray does not apply if isAnimationActive is false from the start and set to true in componentDidMount" #2373

[ckifer]

Thanks for the report, will get this fixed. A lot of this is an inherited legacy so I never would've known that line existed or these things are related.

Agreed that code is incredibly risky and we shouldn't trust human input ever (especially in loops) 😅

[ckifer]

code link

    const lineLength = lines.reduce((pre, next) => pre + next);

    // if lineLength is 0 return the default when no strokeDasharray is provided
    if (!lineLength) {
      return `${length}px ${totalLength - length}px`;
    }

    const count = Math.floor(length / lineLength);
    const remainLength = length % lineLength;
    const restLength = totalLength - length;

    let remainLines: number[] = [];
    for (let i = 0, sum = 0; ; sum += lines[i], ++i) {
      if (sum + lines[i] > remainLength) {
        remainLines = [...lines.slice(0, i), remainLength - sum];
        break;
      }
      // break to prevent infinite loop https://github.com/recharts/recharts/issues/3899
      if (i > 10) break;
    }

something like this should do it as a patch though this certainly needs refactored in general

[ckifer]

Should be resolved by #3904 - will be fixed in next release. Thanks!

[ckifer]

released in 2.9.1