Data format

Wappler General
1

Hello,

I am trying to replace any number that reaches 1000 by 1k, and 1 000 000 by 1M and so on. For example, If I have 1500. I would like it to be 1.5k . If I have 1500 000 I would like it to be 1.5M
I have been trying many ways around the data format. Is there any suggestion you can give for it.

Thank you

2

Use a form input field to populate a variable. Format the number in the vaiable and use that result to bind to the page.

This script is an example for formatting the number:

<script>
    function test (labelValue) {

    // Nine Zeroes for Billions
    return Math.abs(Number(labelValue)) >= 1.0e+9
    ? Math.abs(Number(labelValue)) / 1.0e+9 + "B"

    // Six Zeroes for Millions 
    : Math.abs(Number(labelValue)) >= 1.0e+6
    ? Math.abs(Number(labelValue)) / 1.0e+6 + "M"

    // Three Zeroes for Thousands
    : Math.abs(Number(labelValue)) >= 1.0e+3
    ? Math.abs(Number(labelValue)) / 1.0e+3 + "K"

    : Math.abs(Number(labelValue));
    }

    alert(test(5680000000));
</script>
3

I have the number in the database. which I already populated on the page using a query but I can’t see how to make it works with format data to change 1000 into 1k.

4

Try the following where the variable should be replaced by the value coming from the database:

<html>

<head>
	<script src="dmxAppConnect/dmxAppConnect.js"></script>
	<meta charset="UTF-8">
	<title>Untitled Document</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<script src="js/jquery-3.4.1.slim.min.js"></script>
	<link rel="stylesheet" href="fontawesome4/css/font-awesome.min.css" />
	<link rel="stylesheet" href="bootstrap/4/css/bootstrap.min.css" />
	<script src="dmxAppConnect/dmxFormatter/dmxFormatter.js" defer=""></script>
</head>

<body is="dmx-app" id="junk">
	<dmx-value id="var1" dmx-bind:value="568000000"></dmx-value>
	<section>
		<div class="container">
			<div class="row">
				<div class="col">
					{{var1.value.abs().inRange("1.0e+9", 1.0e+12) ? var1.value.abs() / (1.0e+9) + 'B' : var1.value.abs().inRange("1.0e+6", 1.0e+9) ? var1.value.abs() / (1.0e+6) + 'M' : var1.value.abs().inRange("1.0e+3", 1.0e+6) ? var1.value.abs() / (1.0e+3) + 'K' : var1.value.abs()}}
				</div>
			</div>
		</div>
	</section>
	<script src="bootstrap/4/js/popper.min.js"></script>
	<script src="bootstrap/4/js/bootstrap.min.js"></script>
</body>

</html>
5 Likes
5

Thank you ben! :grinning:

6

Thanks for this @ben

I was able to use it to format numbers in the charts component, mainly to neaten it up, but also to gain some horizontal space in a dashboard:

$value.abs().inRange("1.0e+9", 1.0e+12)?$value.abs()/(1.0e+9)+'B':$value.abs().inRange("1.0e+6", 1.0e+9)?$value.abs()/(1.0e+6)+'M':$value.abs().inRange("1.0e+3", 1.0e+6)?$value.abs()/(1.0e+3)+'K':$value.abs()

Result:

Screenshot 2022-11-28 at 10.19.21

1 Like