Polystat - Adding more polygons than the limit should be handled better

When adding more than 100 polygons on a polystat panel using the default 100 display limit, an error "Cannot read properties of undefined (reading '0')" is shown in the UI

Error in browser console:

TypeError: Cannot read properties of undefined (reading '0')
    at A (Polystat.tsx:232:37) 
    at eval (Polystat.tsx:389:28)
    at Array.map (<anonymous>)
    at fo (Polystat.tsx:388:35) 
    at ra (react-dom.production.min.js:157:137)
    at Ws (react-dom.production.min.js:267:460)
    at Ou (react-dom.production.min.js:250:347)
    at ku (react-dom.production.min.js:250:278)
    at Eu (react-dom.production.min.js:250:138)
    at vu (react-dom.production.min.js:243:163)

CalculatedPoints is limited by “layoutDisplayLimit” whereas options.processedData is not.

grafana-polystat-panel/src/components/Polystat.tsx

Line 171 in 20fdd95

    
           const calculatedPoints = lm.generatePoints(options.processedData, options.layoutDisplayLimit, options.globalShape);

When processedData has more entries than the layoutDisplayLimit and the map function calls getCoords(index), this causes an exception when reading an index out of the range.

grafana-polystat-panel/src/components/Polystat.tsx

Lines 388 to 389 in 20fdd95

    
           {options.processedData!.map((item, index) => { 
        
             const coords = getCoords(index);

grafana-polystat-panel/src/components/Polystat.tsx

Lines 231 to 235 in 20fdd95

    
           const getCoords = (i: number) => { 
        
             const xValue = calculatedPoints[i][0]; 
        
             const yValue = calculatedPoints[i][1]; 
        
             return { x: xValue, y: yValue }; 
        
           };

Steps to reproduce:

Add Polystat panel to a dashboard
Set TestDataDB datasource using value 101 for series count (default polystat display limit is 100)
See "Cannot read properties of undefined (reading '0')" error in UI and browser console

Thanks for opening this ticket. the workaround was unclear, but this helped me. For others, the workaround on the panel options under layout is to increase the display limit.

	{options.processedData!.map((item, index) => {
	const coords = getCoords(index);

	const getCoords = (i: number) => {
	const xValue = calculatedPoints[i][0];
	const yValue = calculatedPoints[i][1];
	return { x: xValue, y: yValue };
	};