MrHen/Readme.md

## Readme.md

      
    Raw
  

              Readme.md
            
          
    A custom Angular filter for quickly prettifying numbers. Core implementation copied from dSolver's example.

  
## index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
  <div class="app-container" ng-app="prettyNumbersApp">
    <div ng-controller="PrettyNumbersController">
      <table>
        <tr>
          <td>Input</td>
          <td>
            <input type="number" ng-model="numWidgets"> </input>
          </td>
        </tr>
        <tr>
          <td>Raw</td>
          <td>
            <span ng-bind="numWidgets"> </span>
          </td>
        </tr>
        <tr>
          <td>Angular's number filter</td>
          <td>
            <span ng-bind="numWidgets | number"> </span>
          </td>
        </tr>
        <tr>
          <td>Custom filter (0 decimal)</td>
          <td>
            <span ng-bind="numWidgets | prettyNumber"> </span>
          </td>
        </tr>
        <tr>
          <td>Custom filter (2 decimal)</td>
          <td>
            <span ng-bind="numWidgets | prettyNumber:2"> </span>
          </td>
        </tr>
      </table>
    </div>
  </div>
</body>
</html>

## script.js
var app = angular.module('prettyNumbersApp', []);

app.controller('PrettyNumbersController', ['$scope', '$interval', function($scope) {
  $scope.numWidgets = 0;
}]);

app.filter('prettyNumber', function() {
  function floor(num) {
    //special floor needed to deal with floating point calculations
    if (num - Math.floor(num) >= 0.9999999999999991) {
      return Math.ceil(num);
    } else {
      return Math.floor(num);
    }
  }

  // see https://www.reddit.com/r/incremental_games/comments/2cu61a/beautifying_numbers_rounding_and_separators/cjjrodh
  return function(num, dec) {
    num = +num || 0;
    dec = +dec || 0; //how many decimal places do we want?

    if (num === 0) {
      return 0;
    }

    var suffixes = ['', 'k', 'M', 'B', 'T', 'Qa', 'Qi', 'Sx', 'Sp', 'Oc', 'No', 'De', 'UnD', 'DuD', 'TrD', 'QaD', 'QiD', 'SeD', 'SpD', 'OcD', 'NoD', 'Vi', 'UnV'];

    var ord = floor(Math.log(Math.abs(num)) / Math.log(10) / 3); //the abs to make sure our number is always positive when being put through a log operation. divide by 3 at the end because our suffixes goes up by orders of 3

    var suffix = suffixes[ord]
    if (ord && !suffix) {
      suffix = 'E' + ord * 3;
    }
    var rounded = Math.round(num / (Math.pow(10, ord * 3 - dec))) / Math.pow(10, dec);
    return rounded + suffix;
  }
});

## style.css
td:first-child {
  text-align: right;
}

td {
  padding: 0.25rem;
}
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
	<script type="text/javascript" src="script.js"></script>
	</head>
	<body>
	<div class="app-container" ng-app="prettyNumbersApp">
	<div ng-controller="PrettyNumbersController">
	<table>
	<tr>
	<td>Input</td>
	<td>
	<input type="number" ng-model="numWidgets"> </input>
	</td>
	</tr>
	<tr>
	<td>Raw</td>
	<td>
	<span ng-bind="numWidgets"> </span>
	</td>
	</tr>
	<tr>
	<td>Angular's number filter</td>
	<td>
	<span ng-bind="numWidgets \| number"> </span>
	</td>
	</tr>
	<tr>
	<td>Custom filter (0 decimal)</td>
	<td>
	<span ng-bind="numWidgets \| prettyNumber"> </span>
	</td>
	</tr>
	<tr>
	<td>Custom filter (2 decimal)</td>
	<td>
	<span ng-bind="numWidgets \| prettyNumber:2"> </span>
	</td>
	</tr>
	</table>
	</div>
	</div>
	</body>
	</html>
	var app = angular.module('prettyNumbersApp', []);

	app.controller('PrettyNumbersController', ['$scope', '$interval', function($scope) {
	$scope.numWidgets = 0;
	}]);

	app.filter('prettyNumber', function() {
	function floor(num) {
	//special floor needed to deal with floating point calculations
	if (num - Math.floor(num) >= 0.9999999999999991) {
	return Math.ceil(num);
	} else {
	return Math.floor(num);
	}
	}

	// see https://www.reddit.com/r/incremental_games/comments/2cu61a/beautifying_numbers_rounding_and_separators/cjjrodh
	return function(num, dec) {
	num = +num \|\| 0;
	dec = +dec \|\| 0; //how many decimal places do we want?

	if (num === 0) {
	return 0;
	}

	var suffixes = ['', 'k', 'M', 'B', 'T', 'Qa', 'Qi', 'Sx', 'Sp', 'Oc', 'No', 'De', 'UnD', 'DuD', 'TrD', 'QaD', 'QiD', 'SeD', 'SpD', 'OcD', 'NoD', 'Vi', 'UnV'];

	var ord = floor(Math.log(Math.abs(num)) / Math.log(10) / 3); //the abs to make sure our number is always positive when being put through a log operation. divide by 3 at the end because our suffixes goes up by orders of 3

	var suffix = suffixes[ord]
	if (ord && !suffix) {
	suffix = 'E' + ord * 3;
	}
	var rounded = Math.round(num / (Math.pow(10, ord * 3 - dec))) / Math.pow(10, dec);
	return rounded + suffix;
	}
	});