AngularJS Simple Example

by Loxos

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
<div ng-app ng-controller="LoginController" class="container">
  <div class="col">
    <h2> Input </h2>
    <textarea ng-model="input"></textarea>
    <br/>
    <input ng-model="trim.pre" type="number" class="trim" />trim <input ng-model="trim.post" type="number" class="trim" /><br/>
    Sample total: 
    <input ng-model="newTotal" type="number"/><br/>
    <button ng-click="evaluate()"> Evaluate </button>
    <hr/>
    <h2> Output </h2>
    <h3> {{result.length}} different entries of {{sum}} total in {{execTime / 1000}}s</h3>
    <ul>
      <li ng-repeat="entry in entries | orderBy: '-weight'">
        {{entry.weight}}: {{entry.elem}}
      </li>
    </ul>
    <pre>{{result.join('\n')}}</pre>
    <hr/>
    <h2> Formated Output </h2>
    <pre>{{namedOutput.join('\n')}}</pre>
    <hr/>
    <h2> Weighted Output </h2>
    Actual sample size due to flooring: {{weightedOutput.length}}
    <pre>{{weightedOutput.join('\n')}}</pre>
  </div>
  <div class="col">
    <h2> Distance analysis </h2>
    <input ng-model="baseWordInput">
    <button ng-click="calcDistances()"> Calculate distances </button>
    <hr/>
    <h2>
      Distance Output
    </h2>
    <ul>
      <li ng-repeat="dist in distances"><strong>{{dist.dist}}</strong> | {{dist.elems.length}} words | count {{dist.sum}} ({{dist.sum / sum4dist * 100 | number:1}}%) | cummulated count {{dist.cummulatedSum}} ({{dist.cummulatedSum / sum4dist * 100 | number:1}}%)<br/>
        <pre>{{dist.elems.join('\n')}}</pre>
        <pre>{{dist.namedOutput.join('\n')}}</pre>
      </li>
    </ul>
  </div>
</div>

SCSS

ul{
  list-style-type: none;
}

.progress-bg{
  width:100px;
  background-color: lightgrey;
  float:left;
  .progress{
    background-color:green;
  }
}

.trim{
  width:30px
}

.container {
  display: flex;
  .col{
    display: inline;
  }
}

JavaScript

function LoginController($scope) {
  var data;
  $scope.entries = [];
  $scope.sum = 0;
  $scope.result = [];
  $scope.execTime = 1;
  $scope.newTotal = 0;

  $scope.trim = {
    pre: 0,
    post: 0
  };
  var separator = '\n';
  $scope.evaluate = function() {
    if (!$scope.input) {
      return;
    }
    var start = new Date();
    var postTrim = parseInt($scope.trim.post) ? -$scope.trim.post : undefined;
    var inputs = $scope.input.split(separator).map(a => a.slice($scope.trim.pre, postTrim));
    $scope.sum = inputs.length;
    var result = inputs.reduce((acc, item) => {
      acc[item] ? acc[item]++ : acc[item] = 1;
      return acc;
    }, {});
    //$scope.entries = Object.entries(result).map(item=>({elem:item[0],weight:item[1]}));

    data = Object.entries(result).sort((a, b) => b[1] - a[1]);
    $scope.result = data.map(item => `${item[1]}: ${item[0]}`);
    $scope.input = '';
    $scope.namedOutput = data.map((item, index) => `>item${index}\n${item[0]}`);
    if ($scope.newTotal > 0) {
      $scope.weightedOutput = data.reduce((acc, item, index) => acc.concat(Array(Math.floor(item[1] / $scope.sum * $scope.newTotal)).fill(0).map((elem,elemIndex)=>`>item${index}-${elemIndex}\n${item[0]}`)), []);
    }
    $scope.execTime = new Date() - start;
  }

  $scope.calcDistances = function() {
    $scope.sum4dist = $scope.sum;
    $scope.distances = [];
    var baseWord = $scope.baseWordInput;
    var cummulatedSum = 0;
    $scope.distances = Object.entries(_.groupBy(data.map(elem => ({
      word: elem[0],
      distance: dist(elem[0], baseWord),
      count: elem[1]
    })), 'distance')).map(group => {
      var sum = group[1].reduce((sum, elem) => sum + elem.count, 0);
      cummulatedSum += sum;
      return {
        dist: parseInt(group[0]),
        elems: group[1].map(elem => `${elem.word}:${elem.count}`),
        namedOutput: group[1].map((item, index) => `>item${index}\n${item.word}`),
        sum: sum,
        cummulatedSum: cummulatedSum
      };
 ...