Distribute or scale a specific value to an array of numbers

Question

Distribute or scale a specific value to an array of numbers

I'm currently working on a project that involves distributing the values of an array in a way that the total sum equals 100.

Here are some examples:

[70, 34, 92] with a total value of 100. The output is [35.71, 17.35, 46.94] because 35.71 + 17.35 + 46.94 = 100.
[86, 99.5, 100] with a total value of 100. The output is [30.12, 34.85, 35.03].
[96, 37] with a total value of 100. The output is [72.18, 27.82].
[98, 76.5, 68.5, 63.5, 38.5] with a total value of 100. The output is
```
[28.41, 22.17, 19.86, 18.41, 11.15]
```
which equals 100 when summed up.

My current approach is as follows:

Add all the values in the given array
Multiply each value by 100
Divide each value by the total sum
Use .toFixed(2).

The calculation formula used:

+(((valueOfArray * 100) / totalSumOfGivenArray).toFixed(2))

However, my initial solution sometimes falls short of returning exactly 100 due to decimal issues like 99.99, 99.999999, 100(mostly), 100.0000000001, 99.999978, 100.09999999, 99.000009. This has led me to consider other approaches.

Another method I explored goes as follows:

let i = 0;
for(i = 0;  i < controlsKey.length-1; i++){
  let formId = controlsKey[i];
  relValue = this.getDistributedValue(+form.controls[formId].value, totalActualSum); // returns formula result
  form.controls[formId].setValue(relValue))
  relativeSum = relativeSum + relValue;
}
relValue = 100 - relativeSum;
form.controls[controlsKey[i]].setValue(relValue)

This method works well too, but I am still seeking a more elegant solution for this problem.

The initial solution is acceptable to me, even though there are some lingering decimal issues despite using .toFixed(2).

javascript arrays typescript decimal scale

Answer 1

Answer №1

To avoid dealing with floating point values, you can utilize integer numbers and subtract them from a base value of 10000 (equal to 100 with two decimal places). This method involves creating an array of strings where each number has a dot inserted at the appropriate place to achieve the desired formatted string.

const formatNumber = num => num.toString().replace(/\d\d$/, '.$&');

function convertToPercentage(array) {
    var totalSum = array.reduce((a, b) => a + b),
        offset = 1e4;
    return array.map((value, index, { length }) => {
        if (index + 1 === length) return formatNumber(offset);
        var percentage = Math.round(value * 1e4 / totalSum);
        offset -= percentage;
        return formatNumber(percentage);
    });
}

console.log(...convertToPercentage([70, 34, 92])); // [35.71, 17.35, 46.94] 
console.log(...convertToPercentage([86, 99.5, 100]); // [30.12, 34.85, 35.03]
console.log(...convertToPercentage([96, 37]); // [72.18, 27.82]
console.log(...convertToPercentage([98, 76.5, 68.5, 63.5, 38.5]); // [28.41, 22.17, 19.86, 18.41, 11.15]

Answer 2

To avoid dealing with floating point values, you can utilize integer numbers and subtract them from a base value of 10000 (equal to 100 with two decimal places). This method involves creating an array of strings where each number has a dot inserted at the appropriate place to achieve the desired formatted string.

const formatNumber = num => num.toString().replace(/\d\d$/, '.$&');

function convertToPercentage(array) {
    var totalSum = array.reduce((a, b) => a + b),
        offset = 1e4;
    return array.map((value, index, { length }) => {
        if (index + 1 === length) return formatNumber(offset);
        var percentage = Math.round(value * 1e4 / totalSum);
        offset -= percentage;
        return formatNumber(percentage);
    });
}

console.log(...convertToPercentage([70, 34, 92])); // [35.71, 17.35, 46.94] 
console.log(...convertToPercentage([86, 99.5, 100]); // [30.12, 34.85, 35.03]
console.log(...convertToPercentage([96, 37]); // [72.18, 27.82]
console.log(...convertToPercentage([98, 76.5, 68.5, 63.5, 38.5]); // [28.41, 22.17, 19.86, 18.41, 11.15]

Answer 3

Answer №2

One major challenge lies in the inherent inaccuracy of floating point numbers. Without utilizing toFixed, it becomes nearly impossible to rectify this issue. Even if one identifies the error, selects an element, and adjusts it by the error amount, the final result will still be off in a different direction due to the limited precision capabilities of floating point numbers during operations:

function calculateDistribution(data) {
    var total =  data.reduce((acc, val) => acc + val, 0)
    var distribution = data.map(d => 100 * d / total)
    var error = distribution.reduce((acc, val) => acc + val, 0) - 100;
    console.log({distribution, error});
    distribution[0] -= error;
    error = distribution.reduce((acc, val) => acc + val, 0) - 100;
    console.log({distribution, error});
}

calculateDistribution([98, 76.5, 68.5, 63.5, 38.5]);

Answer 4

One major challenge lies in the inherent inaccuracy of floating point numbers. Without utilizing toFixed, it becomes nearly impossible to rectify this issue. Even if one identifies the error, selects an element, and adjusts it by the error amount, the final result will still be off in a different direction due to the limited precision capabilities of floating point numbers during operations:

function calculateDistribution(data) {
    var total =  data.reduce((acc, val) => acc + val, 0)
    var distribution = data.map(d => 100 * d / total)
    var error = distribution.reduce((acc, val) => acc + val, 0) - 100;
    console.log({distribution, error});
    distribution[0] -= error;
    error = distribution.reduce((acc, val) => acc + val, 0) - 100;
    console.log({distribution, error});
}

calculateDistribution([98, 76.5, 68.5, 63.5, 38.5]);

Distribute or scale a specific value to an array of numbers

Answer №1

Answer №2

Similar questions

Activate a button only when a value is inputted into a text box associated with a chosen radio button

Javascript echoes are appearing in an alert rather than being processed

Engage in a conversation with a specific individual on the internet using node.js

Is there a way to eliminate elements from the second array and add them to the first array in PostgreSQL when working with two arrays?

The integration of reduce and scan with a specific focus

Tips for passing arguments to event handlers in React JS

trigger form submission and refresh on React JSON Schema Form

"Troubleshooting a datatype problem on my localhost XAMPP server

Obtain the count of a two-value array from a Laravel controller and pass it to JavaScript

What is the process for converting a two-column matrix into a structure resembling a multimap?

Ways to incorporate scroll buttons on both sides for dynamically generated tabs

Tips for transferring information using '&' on websites

Updating state of an array nested inside an object using React and ES6

Transferring an array from PHP to jQuery through the use of AJAX

Designing geometric forms using the vertices of a Sphere in ThreeJs

Having Trouble Retrieving Image File Contents in Laravel Production Environment

Uncovering the Issue with Select All Functionality in <Table/> when using Material-UI and React

What could be causing the error message about jQuery not being defined in this bookmarklet code, even though jQuery is already included

Exporting a module that will return undefined instead of a value

Developing an animated feature that displays a dynamic count up to the current size of the browser window