Angular: retention stats

http://angularjs.org/

by markokristian

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<div ng-controller="someController">

  <pre>{{ vm | json }}</pre>

  <table>
    <thead>
      <tr>
        <td></td>
        <td ng-repeat="p in vm.top">{{ p }}</td>
      </tr>
    </thead>
    <tbody ng-repeat="(measure, profileValues) in vm.measures">
      <tr>
        <td><b>{{ measure }}</b></td>
      </tr>
      <tr ng-repeat="statKey in vm.statKeys">
        <td>{{ statKey }}</td>
        <td ng-repeat="profileId in vm.top">
          {{ profileValues[profileId].stats[statKey] }}
        </td>
      </tr>
    </tbody>
  </table>
</div>

CSS

table tr td {
  padding: 10px;
}

JavaScript

var app = angular.module('myApp', []);

app.service('someService', someService);
someService.$inject = [];

function someService() {

  var stats = {
    retentionTime: {
      "statsByProfile": [{
        "profileId": "5721d983c1071e0017a79259",
        "stats": {
          "count": 43390,
          "min": 0,
          "max": 31,
          "average": 1,
          "median": 0,
          "standardDeviation": 4.383647,
          "percentile01": 0,
          "percentile02": 0,
          "percentile05": 0,
          "percentile10": 0,
          "percentile15": 0,
          "percentile20": 0,
          "percentile80": 0,
          "percentile85": 0,
          "percentile90": 0,
          "percentile95": 13,
          "percentile98": 16.22,
          "percentile99": 20
        }
      }, {
        "profileId": "5721e395c1071e0017a7981a",
        "stats": {
          "count": 21547,
          "min": 0,
          "max": 30,
          "average": 1,
          "median": 0,
          "standardDeviation": 4.3490467,
          "percentile01": 0,
          "percentile02": 0,
          "percentile05": 0,
          "percentile10": 0,
          "percentile15": 0,
          "percentile20": 0,
          "percentile80": 0,
          "percentile85": 0,
          "percentile90": 0,
          "percentile95": 13,
          "percentile98": 16,
          "percentile99": 20
        }
      }, {
        "profileId": "5721e398c1071e0017a79b01",
        "stats": {
          "count": 21702,
          "min": 0,
          "max": 30,
          "average": 1,
          "median": 0,
          "standardDeviation": 4.3158627,
          "percentile01": 0,
          "percentile02": 0,
          "percentile05": 0,
          "percentile10": 0,
          "percentile15": 0,
          "percentile20": 0,
          "percentile80": 0,
          "percentile85": 0,
          "percentile90": 0,
          "percentile95": 13,
          "percentile98": 16,
          "percentile99": 19
        }
      }]
    },
   ...