MeterGroup: Percentages always based on max 100 about primereact HOT 3 CLOSED

@Tubbbe that is the correct fix and I submitted a PR. I checked PrimeVue and their code is doing what yours is.

from primereact.

Here is the code it looks like it uses Max differently than we think?

    let totalPercent = 0;
    let precentages = [];

    values.map((item) => {
        totalPercent = totalPercent + item.value;
        precentages.push(Math.round((item.value / totalPercent) * 100));
    });

    const calculatePercentage = (meterValue = 0) => {
        const percentageOfItem = ((meterValue - min) / (max - min)) * 100;

        return Math.round(Math.max(0, Math.min(100, percentageOfItem)));
    };

from primereact.

Hello,

This code calculating percentages is correct.

Currently, the code displaying the value label is (MeterGroup.js line 130):

return (
    <li key={index} {...labelItemProps}>
        {labelIcon}
        <span {...labelProps}>
            {item?.label} {item?.value && `(${item?.value}%)`}
        </span>
    </li>
);

As you can see, value is always displayed as a percentage, which is irrelevant. So I tried changing it to this, and it works with my examples:

const calculatedPercantage = calculatePercentage(item.value);

return (
    <li key={index} {...labelItemProps}>
        {labelIcon}
        <span {...labelProps}>
            {item?.label} {`(${calculatedPercantage}%)`}
        </span>
    </li>
);

I don't know if it's the right fix, but it seems to give the right result.

from primereact.