Smart Counter

An interesting element on interfaces which involve dynamically updating numbers
is a smart counter, or odometer effect. Instead of jumping a number up and down,
quickly counting to the desired number can achieve a cool effect. An example of
a popular library that accomplishes this is
odometer by
Hubspot. Let’s see how we can accomplish something
similar with just a few lines of RxJS.

Smart Counter - 图1

Vanilla JS

( JSBin |
JSFiddle )

  1. // utility functions
  2. const takeUntilFunc = (endRange, currentNumber) => {
  3.   return endRange > currentNumber
  4.     ? val => val <= endRange
  5.     : val => val >= endRange;
  6. };
  8. const positiveOrNegative = (endRange, currentNumber) => {
  9.   return endRange > currentNumber ? 1 : -1;
  10. };
  12. const updateHTML = id => val => (document.getElementById(id).innerHTML = val);
  13. // display
  14. const input = document.getElementById('range');
  15. const updateButton = document.getElementById('update');
  17. const subscription = (function(currentNumber) {
  18.   return fromEvent(updateButton, 'click').pipe(
  19.     map(_ => parseInt(input.value)),
  20.     switchMap(endRange => {
  21.       return timer(0, 20).pipe(
  22.         mapTo(positiveOrNegative(endRange, currentNumber)),
  23.         startWith(currentNumber),
  24.         scan((acc, curr) => acc + curr),
  25.         takeWhile(takeUntilFunc(endRange, currentNumber));
  26.       )
  27.     }),
  28.     tap(v => (currentNumber = v)),
  29.     startWith(currentNumber)
  30.   )
  31.   .subscribe(updateHTML('display'));
  32. })(0);
HTML
  1. <input id="range" type="number">
  2. <button id="update">Update</button>
  3. <h3 id="display">0</h3>

We can easily take our vanilla smart counter and wrap it in any popular
component based UI library. Below is an example of an Angular smart counter
component which takes an Input of the updated end ranges and performs the
appropriate transition.

Angular Version

(
StackBlitz
)

  1. import { Component, Input, OnDestroy } from '@angular/core';
  2. import { Subject } from 'rxjs/Subject';
  3. import { timer } from 'rxjs/observable/timer';
  4. import { switchMap, startWith, scan, takeWhile, takeUntil, mapTo } from 'rxjs/operators';
  6. @Component({
  7.   selector: 'number-tracker',
  8.   template: `
  9.     <h3> {{ currentNumber }}</h3>
  10.   `
  11. })
  12. export class NumberTrackerComponent implements OnDestroy {
  13.   @Input()
  14.   set end(endRange: number) {
  15.     this._counterSub$.next(endRange);
  16.   }
  17.   @Input() countInterval = 20;
  18.   public currentNumber = 0;
  19.   private _counterSub$ = new Subject();
  20.   private _onDestroy$ = new Subject();
  22.   constructor() {
  23.     this._counterSub$
  24.       .pipe(
  25.         switchMap(endRange => {
  26.           return timer(0, this.countInterval).pipe(
  27.             mapTo(this.positiveOrNegative(endRange, this.currentNumber)),
  28.             startWith(this.currentNumber),
  29.             scan((acc: number, curr: number) => acc + curr),
  30.             takeWhile(this.isApproachingRange(endRange, this.currentNumber))
  31.           )
  32.         }),
  33.         takeUntil(this._onDestroy$)
  34.       )
  35.       .subscribe((val: number) => this.currentNumber = val);
  36.   }
  38.   private positiveOrNegative(endRange, currentNumber) {
  39.     return endRange > currentNumber ? 1 : -1;
  40.   }
  42.   private isApproachingRange(endRange, currentNumber) {
  43.     return endRange > currentNumber
  44.       ? val => val <= endRange
  45.       : val => val >= endRange;
  46.   }
  48.   ngOnDestroy() {
  49.     this._onDestroy$.next();
  50.     this._onDestroy$.complete();
  51.   }
  52. }
HTML
  1. <p>
  2.   <input type="number"
  3.     (keyup.enter)="counterNumber = vanillaInput.value"
  4.     #vanillaInput>
  5.   <button
  6.     (click)="counterNumber = vanillaInput.value">
  7.     Update number
  8.   </button>
  9. </p>
  10. <number-tracker [end]="counterNumber"></number-tracker>

Operators Used