currency.component.ts

import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
import { WebSocketSubject } from 'rxjs/webSocket';
import { ICurrency } from '../models/Currency';
import { containerClassBig, lastNMembers } from '../utils/utils';

/**
 * Dashboard component with decorators encapsulation: ViewEncapsulation.None, - allow to use global css
 */
@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class DashboardComponent implements OnInit {
  @Input()
  /**
   *  @Input() - params that transferred from parent
   *  currentCurrency - value that displaying on dropdown
   */
  public currentCurrency: ICurrency;
  @Input()
  /**
   *  currencyList - list of currencies from https://restsimulator.coderiq.io/currency_pairs
   */
  public currencyList: Array<ICurrency>;
  @Input()
  /**
   *  name - name of currency for separating socket connections
   */
  public name: string;

  /**
   * view - chart size in px
   */
  public view: Array<number> = [700, 150];
  /**
   * backgroundColor - default background color
   */
  public backgroundColor = 'red-5';
  /**
   * defaultNumberOfTicks - default number if ticks
   */
  public defaultNumberOfTicks = 10;
  /**
   * multi - data for charts
   */
  public multi: any[];
  /**
   * difference - difference between current value & moving average
   */
  public difference: string;
  /**
   * _average - moving average
   */
  private _average = '';
  /**
   * _attempt : number of ticks
   */
  private _attempt = 0;

  /**
   * legend - displaying chart legend
   */
  public legend = false;
  /**
   * animations - behaviour of chart when new date coming
   */
  public animations = true;
  /**
   * xAxis - show ticks on x axis
   */
  public xAxis = true;
  /**
   * yAxis  show ticks on y axis
   */
  public yAxis = false;
  /**
   * showGridLines - show grid on chart background
   */
  public showGridLines = false;
  /**
   * showXAxisLabel - displaying ticks on x axis
   */
  public showXAxisLabel = true;
  /**
   * colorScheme : domain : color of line
   */
  public colorScheme = {
    domain: ['#ffffff'],
  };

  constructor() {
    /**
     * @param multi - default charts values
     */
    this.multi = [
      {
        name: '',
        series: [],
      },
    ];
  }

  /**
   * functions that runs on component creation
   */
  public ngOnInit(): void {
    /**
     * create WebSocket with the name that we send with  @Input() public name:
     * on the .next we send message to the socket for getting data
     * on .subscribe we get values
     */
    this[this.name] = new WebSocketSubject('wss://stocksimulator.coderiq.io');
    this[this.name].next({ currencyPair: this.currentCurrency.currency_name });
    this[this.name].subscribe((dataFromServer: number) => {
      this.multi[0].series = [
        ...this.multi[0].series,
        ...[
          {
            name: `t-${++this._attempt}`,
            value: dataFromServer,
          },
        ],
      ];

      /**
       * lastSeries - get needed number ticks for displaying
       * and update @multi - param with data for chart
       */
      const lastSeries = lastNMembers(
        this.multi[0].series,
        this.defaultNumberOfTicks
      );
      this.multi[0].series = lastSeries;
      this.multi = [...this.multi];

      /**
       * sum - sum of values on the chart
       */
      const sum = lastSeries.reduce((a, b) => a + b.value, 0);

      /**
       *  _average - moving average
       */
      const avg = sum / lastSeries.length || 0;
      this._average = avg.toFixed(4);

      /**
       * differenceValue - difference between current value and moving average
       */
      const differenceValue: any = ((dataFromServer / avg) * 100 - 100).toFixed(
        2
      );

      /**
       * run function that update background color
       */
      this._checkBackGroundColor(differenceValue);

      /**
       * difference that displaying with plus/minus
       */
      this.difference =
        differenceValue > 0 ? `+${differenceValue}%` : `${differenceValue}%`;
    });
  }

  /**
   * wrapped moving average. As it displaying with different size, f divided to parts
   */
  public get averageToDisplay(): string {
    const indexOfPoint = this._average.indexOf('.');

    if (indexOfPoint < 0) {
      return containerClassBig(this._average);
    }

    /**
     * first second third - parts of average
     */
    const first = this._average.substring(0, indexOfPoint + 1);
    const second = this._average.substring(indexOfPoint + 1, indexOfPoint + 3);
    const third = this._average.substring(indexOfPoint + 3);

    return `${containerClassBig(first)}${second}${containerClassBig(third)}`;
  }

  /**
   * @returns update value on currency dropdown
   */
  public changeCurrency(currency): void {
    this._attempt = 0;
    this.multi[0].series = [];
    this[this.name].next({ currencyPair: currency.currency_name });
  }

  /**
   * @returns increase on one ticks more and update number of ticks on the chart
   */
  public increaseNumberOfTicks(): void {
    ++this.defaultNumberOfTicks;
    this._updateChart();
  }

  /**
   * @returns decrease on one ticks more and update number of ticks on the chart
   */
  public decreaseNumberOfTicks(): void {
    --this.defaultNumberOfTicks;
    this._updateChart();
  }

  /**
   * @returns creates shadow copy of current data on the chart update
   * get needed numbers of ticks and update chart with the new numbers
   */
  private _updateChart(): void {
    const data = this.multi;
    data[0].series = lastNMembers(data[0].series, this.defaultNumberOfTicks);
    this.multi = [...data];
  }

  /**
   * @param {string} dif difference between current value and moving average
   * @returns name of css class depends of range
   */
  private _checkBackGroundColor(dif): void {
    if (dif >= 5) {
      this.backgroundColor = 'red-5';
    } else if (5 > dif && dif >= 4.5) {
      this.backgroundColor = 'red-45';
    } else if (4.5 > dif && dif >= 4) {
      this.backgroundColor = 'red-4';
    } else if (4 > dif && dif >= 3.5) {
      this.backgroundColor = 'red-35';
    } else if (3.5 > dif && dif >= 3) {
      this.backgroundColor = 'red-3';
    } else if (3 > dif && dif >= 2.5) {
      this.backgroundColor = 'red-25';
    } else if (2.5 > dif && dif >= 2) {
      this.backgroundColor = 'red-2';
    } else if (2 > dif && dif >= 1.5) {
      this.backgroundColor = 'red-15';
    } else if (1.5 > dif && dif >= 1) {
      this.backgroundColor = 'red-1';
    } else if (1 > dif && dif >= 0.5) {
      this.backgroundColor = 'red-05';
    } else if (0.5 > dif && dif >= 0) {
      this.backgroundColor = 'red-0';
    } else if (0 > dif && dif >= -0.5) {
      this.backgroundColor = 'green-05';
    } else if (-0.5 > dif && dif >= -1) {
      this.backgroundColor = 'green-1';
    } else if (-1 > dif && dif >= -1.5) {
      this.backgroundColor = 'green-15';
    } else if (-1.5 > dif && dif >= -2) {
      this.backgroundColor = 'green-2';
    } else if (-2 > dif && dif >= -2.5) {
      this.backgroundColor = 'green-25';
    } else if (-2.5 > dif && dif >= -3) {
      this.backgroundColor = 'green-3';
    } else if (-3 > dif && dif >= -3.5) {
      this.backgroundColor = 'green-35';
    } else if (-3.5 > dif && dif >= -4) {
      this.backgroundColor = 'green-4';
    } else if (-4 > dif && dif >= -4.5) {
      this.backgroundColor = 'green-45';
    } else if (-4.5 > dif && dif >= -0.5) {
      this.backgroundColor = 'green-05';
    } else {
      this.backgroundColor = 'green-55';
    }
  }
}