summing 3 numbers to a total of 100 percent

I am currently trying to calculate the percentages of different statuses based on 3 count values. Let's assume I have 3 statuses: 1) Passed 2) Failed 3) Skipped

When dealing with only two cases, I was able to use a combination of the Floor and Ceil methods to ensure that the total always added up to 100%. However, now that I have 3 values, I am facing difficulty. Any assistance would be greatly appreciated.

const successRate = Math.floor((this.progressCounts.getStatusCount('Passed') * 100) / this.progressCounts.getTotal()),
        failureRate = Math.ceil((this.progressCounts.getStatusCount('Failed') * 100) / this.progressCounts.getTotal()),
        skippedRate = Math.floor((this.progressCounts.getStatusCount('Skipped') * 100) / this.progressCounts.getTotal());
javascripttypescript

Answer №1

Dealing with percentages and fractions when rounding can be tricky. One approach is to round one value down using the floor function and round another value up using the ceil function. Then, you can determine what to do with the remaining value based on the total sum.

const successRate = Math.floor((this.progressCounts.getStatusCount('Passed') * 100) / this.progressCounts.getTotal());
const failureRate = Math.ceil((this.progressCounts.getStatusCount('Failed') * 100) / this.progressCounts.getTotal());
let skippedRate = this.progressCounts.getStatusCount('Skipped');
if (successRate + failureRate + \
         Math.floor(skippedRate * 100)/this.progressCounts.getTotal() == 100) {
    skippedRate = Math.floor(skippedRate * 100)/this.progressCounts.getTotal();
} else {
    skippedRate = Math.ceil(skippedRate * 100)/this.progressCounts.getTotal();
}

It may require some adjustments, but a similar method can be used to tackle this issue.

Answer №2

If you're looking to round percentages, there's a handy npm package that can help with that - https://www.npmjs.com/package/percent-round

import percentRound from "percent-round";
percentRound([333, 334, 333], 0);  // [33, 34, 33]

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

calculating the dynamic height of a document from top to bottom using Angular

Is there a way to dynamically calculate the height of each page from top to bottom in Angular? The syntax that works in JavaScript seems to give an error in Angular. console.log( (document.height !== undefined) ? document.height : document.body.offsetHeigh ...

angulartypescriptdomangular-materialangular-dom-sanitizer

How can I troubleshoot email validation issues in Vue.js?

<button type="submit" class="register-button" :class="(isDisabled) ? '' : 'selected'" :disabled='isDisabled' v-on:click=" isFirstScreen ...

javascriptvue.js

Data from AngularFire not displaying in my list application

While going through tutorials on the Angular website, I encountered a roadblock while attempting to create a list that utilizes Firebase for data storage. Strangely, everything seems to be functional on the Angular site, but clicking on the "Edit Me" link ...

javascriptangularjsfirebaseangularfire

Zoom feature available on various images

My current setup includes one main image and multiple thumbnails that can be clicked to change the main image. The issue I encountered was when using jqzoom on the main image, the zoomed image would go blank after changing. After researching on stack overf ...

javascriptjqueryimage-manipulationzooming

Can you explain the purpose of the node_modules folder within AngularJS?

While exploring the AngularJS tutorial project, I came across the tutorial with a surprisingly hefty 60-megabyte node_modules directory. Does a simple clientside javascript project truly require such a large amount of unfamiliar data? I decided to delete ...

javascriptangularjsnode.jsnpmbower

Issue with the usage of section helpers in express-handlebars

I'm having trouble getting the section helper to function correctly. The content of login.hbs was parsed properly, but the js section was not parsed at all. I attempted using helpers within res.render() and directly including section() in engine(), bu ...

javascriptnode.jsexpresshandlebars.jsexpress-handlebars

When exporting a Mongoose model, it mysteriously becomes undefined

I am encountering an issue when trying to import the DemandeTransports model from a specific file: //@/components/database/model/Schema.js import { Schema } from "mongoose"; import mongoose from "mongoose"; const userSchema = new Schem ...

javascriptnode.jsmongodbmongoosenext.js

What is the best way to insert events into your Google Calendar directly from a website?

Looking for some help with integrating Google Calendar and adding event features to my HTML page. I've successfully embedded the calendar onto my website, but I'm struggling to add events directly from the webpage. Is there a way to make this fea ...

javascripthtmlgoogle-cloud-platformgoogle-calendar-api

Attempting to set up an Ajax webform with various outputs, but encountering issues with functionality

I'm encountering an issue while creating interactive exercises. I want to display correct or incorrect answers immediately after submission using JSON for retrieving responses, as suggested in a forum. However, my AJAX code isn't working at all. ...

javascriptphpjqueryjsonajax

Eliminate disparity in Woocommerce shopping cart

I have a pizza with various toppings. When the user selects "Add Toppings," they appear as drop-down options defaulted to "none." I want to hide the selected "none" options in the cart and checkout. Although I've successfully hidden them on the cart ...

javascriptjquerywordpresswoocommercegravity-forms-plugin

Send the chosen value from a dropdown menu to a PHP script

<style type="text/css"> form select { display:none; } form select.active { display:block; } </style> <script type="text/javascript"> window.onload = function () { var allElem = document. ...

phpjavascripthtml

Achieving Jest integration with Angular 9 in a Storybook setup

We are currently utilizing Storybook 5 alongside Angular 9, with Jest 26 for some of the testing procedures. The issue we're facing arises when using Typescript version below 3.8.0 - a requirement for Angular 9's ng build --prod. This results in ...

angulartypescriptjestjsstorybook

What is the most effective method to store temporary data within a backend panel as a sub-option?

Greetings! I have been delving into the world of programming for a while now, striving to enhance my skills. Currently, I am faced with a dilemma: Within my backend application, administrators have the capability to add courses to our website. One featur ...

javascriptajaxvue.jslaravel-5

Differences between using Array.from and a for loop to iterate through an array-like object

When traversing an array-like object, which method is more efficient for performance: using Array.from( ).forEach() or a traditional for loop? An example of an array-like object would be: let elements = document.querySelector('#someid').children ...

javascriptarraysperformance

Exploring the concept of inheritance and nested views within AngularJS

I've encountered a challenge while setting up nested views in AngularJS. Utilizing the ui-router library has been beneficial, but I'm facing issues with separate controllers for each view without proper inheritance between them. This results in h ...

javascriptinheritanceangularjstypescriptangular-ui-router

What is the significance of using composability over the deprecated method in Reactjs Material-UI menuItems?

I have taken over a project that was built using an older version of react, and I am currently in the process of updating it. However, I encountered console errors right off the bat. Error : bundle.js:6263 Warning: The "menuItems" property of the "Left ...

javascriptreactjsmaterial-ui

Clicking a button opens a new window, except when using the .onclick() method

My current situation involves using software that generates all the HTML/XML code for me, so I don't have direct access to it. I've created a button that is intended to open a form in a new window. Strangely, when I physically click on the button ...

javascript

Using axios with async/await to handle unresolved promises in Javascript

I'm facing a challenge with a piece of code I've been working on. Despite my efforts to find a solution online, I haven't had any success so far. Here is the code snippet in question: const fetchSidebarData = async () => { let da ...

javascriptvue.jsasync-await

What is the best way to add or modify a timestamp query string parameter?

Looking to timestamp my querystring for browser caching bypass when refreshing page via javascript. Need to consider existing querystring with timestamp and hash tag (http://www.example.com/?ts=123456#example). Tried my own solution but it feels overly co ...

javascriptjquery

Storing data collected from a Google form into an Excel spreadsheet

I have created a form using table layout. My goal is to automatically shift the focus to the next input field once the current one reaches its maximum length. I tried implementing this functionality with jQuery, but it only seems to work with inputs and no ...

javascriptjqueryhtmlcssgoogle-forms