Graph: Displaying 41 records and above results to console error

[NicholTamayo]

Describe the bug
When the using a chart type "Pie", "Donut", "Bar-stacked" and "Column-stacked", displaying 41 and above slice record still results to a console error: TypeError: Cannot read properties of undefined (reading 'substr').

Related to #7941, #8367 and infor-design/enterprise-ng#1675

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://stackblitz.com/edit/ids-enterprise-4960-caqufa?file=index.js' or 'https://stackblitz.com/edit/ids-enterprise-4980-dcbks7?file=index.js' (for Bar-stacked)
2. Click on 'Console' or open devtool > console.

Expected behavior
No console error is encountered and the graph's legend are displaying, the slice color also loops instead of being black.
NOTE: Please try until 100 slice records.

Version

• ids-enterprise: 4.93.0 and above.

Screenshots
Pie

Donut

Column-stacked

Bar-stacked

Platform

• Infor Application/Team Name: Homepages/PortalV2
• OS Version: Windows 11
• Browser Name: Chrome
• Browser Version: 127.0.6533.89 (Official Build) (64-bit)

Additional context
The modals in Homepages and PortalV2 became broken when the console is encountered.

[tmcconechy]

This may be tricky since we only have 21 colors so this was the limit. Its also a limit for readability charts with this much information are pretty hard to follow

[NicholTamayo]

Hi @tmcconechy, regard to the color, the previous resolution was for the color to loop and this was implemented and working now but it seems to be only looping once? (since it only works until 40 record, previously it was until 20).

I agree that readability for this much info are impractical but unfortunately the error breaks the modals in Portal, I worried how it will affect our customer if we remove the option for higher record on our side so it would be great if we could fix this.

[tmcconechy]

ok can do some better exception testing here. Its more work since you asked for it in every chart

[ericangeles]

Maybe there's something wrong with your data, @NicholTamayo? Can you try this? (For >= 100 data)

function generateBarStackedData(count) {
    const barStackedArray = [];
    
    for (let i = 0; i < count; i++) {
        const data = [];
        
        for (let j = 0; j < 6; j++) {
            const itemName = `Item ${String.fromCharCode(65 + j)}`;
            const itemValue = (Math.random() * 50 + 1).toFixed(2);
            const itemId = `item-${String.fromCharCode(97 + j)}-${i}`;
            const automationId = `${itemId}-automation-id`;

            data.push({
                name: itemName,
                value: parseFloat(itemValue),
                id: itemId,
                attributes: [
                    { name: 'id', value: itemId },
                    { name: 'data-automation-id', value: automationId }
                ],
                tooltip: `${itemName} <b>{{percent}}</b>`
            });
        }
        
        barStackedArray.push({ data });
    }
    
    return barStackedArray;
  }

  var dataset = generateBarStackedData(100);

Then pass the dataset to the dataset property.

[NicholTamayo]

Hi @ericangeles, sorry for my late reply, and thank you for the code. For populating data, we've been using the sample code here from https://design.infor.com/components/charts/pie-chart/enterprise/.

However, trying it with the code you have provided, we didn’t encounter the error (in StackBlitz) with the "Bar-stacked" chart type. so we’re really confused as to why we get an error when using it with other chart types (pie, donut, and column-stacked).

On another note, we find it odd that slices or stacks numbered 41 or higher still appear black instead of having their colors looped. since if the colors are looped correctly, they should display the correct colors.

Pie:

Donut:

Column-stacked:

[tmcconechy]

https://inforwiki.atlassian.net/browse/IDS-4875