AxisComponent.ts

import { DataPointModel } from '../../models/data-point.model';
import { IExerciseListItem } from '../../interface/IExerciseListItem';
import { IFVPData } from '../../interface/IFVPData';

import { ILegendButton } from 'src/app/interface/ILegendButton';
import { getTimeVelForcePowerDist } from '../../exercises/standing-sprint/standing-sprint.kpis';
const LARGE_VALUE: number = 1e16;

export type AxisTypes =
  | 'FVPTime'
  | 'FVPPower'
  | 'FVPForce'
  | 'FVPVel'
  | 'FVPDist';

export interface AxisData {
  vertical: number;
  horizontal: number;
}

export interface AxisObject {
  fvpData: IFVPData[];
  exerciseListItems: IExerciseListItem[];
  xAxisType: AxisTypes;
  yAxisType: AxisTypes;
  chartId: string;
}

export interface AxisMenuItem {
  label: string;
  unit: string;
  type: AxisTypes;
}

const axisMenuItems: AxisMenuItem[] = [
  {
    label: 'Time',
    unit: '[s]',
    type: 'FVPTime'
  },
  {
    label: 'Distance',
    unit: '[m]',
    type: 'FVPDist'
  },
  {
    label: 'Speed',
    unit: '[m/s]',
    type: 'FVPVel'
  },
  {
    label: 'Force',
    unit: '[N/kg]',
    type: 'FVPForce'
  },
  {
    label: 'Power',
    unit: '[W/kg]',
    type: 'FVPPower'
  }
];

export class AxisComponent {
  public menuItems: AxisMenuItem[] = axisMenuItems;
  public fvpData: IFVPData[] = [];

  public axisData: AxisData[][] = [];
  public xLabel: string = '';
  public yLabel: string = '';
  public maxYAxis: number = -LARGE_VALUE;
  public minYAxis: number = LARGE_VALUE;
  public maxXAxis: number = -LARGE_VALUE;
  public minXAxis: number = LARGE_VALUE;
  public exerciseListItems: IExerciseListItem[] = [];
  public xAxisType: AxisTypes = 'FVPTime';
  public yAxisType: AxisTypes = 'FVPVel';
  public legend: ILegendButton[] = [];

  private _forceFVP: number[][] = [];
  private _powerFVP: number[][] = [];
  private _velFVP: number[][] = [];
  private _timeFVP: number[][] = [];
  private _distFVP: number[][] = [];

  public chartId: string = '';

  constructor();
  constructor(a?: AxisObject);
  constructor(a?: AxisComponent) {
    if (!a) {
      this.fvpData = [];
      this.axisData = [];
      this.xLabel = '';
      this.yLabel = '';
      this.maxYAxis = -LARGE_VALUE;
      this.minYAxis = LARGE_VALUE;
      this.maxXAxis = -LARGE_VALUE;
      this.minXAxis = LARGE_VALUE;
      this.exerciseListItems = [];
      this.xAxisType = 'FVPTime';
      this.yAxisType = 'FVPVel';
      this.legend = [];
      this._forceFVP = [];
      this._powerFVP = [];
      this._velFVP = [];
      this._timeFVP = [];
      this._distFVP = [];
      this.chartId = '';
    } else {
      this.fvpData = [...a.fvpData];
      this.exerciseListItems = [...a.exerciseListItems];
      this.xAxisType = a.xAxisType;
      this.yAxisType = a.yAxisType;
      this.xLabel = AxisComponent.setLabel(this.xAxisType);
      this.yLabel = AxisComponent.setLabel(this.yAxisType);
      this.chartId = a.chartId;
      this.axisData = [];
      this.setFVP(this.fvpData);

      for (var i = 0; i < a.fvpData.length; i++) {
        this.axisData.push(this.toAxisData(this.xAxisType, this.yAxisType, i));
      }

      this.setLegend();
      this.setMaxMin();
      console.log(this.xAxisType);
    }
  }

  public remove(exerciseId: number) {
    for (var i = 0; i < this.exerciseListItems.length; i++) {
      const currentExerciseId = this.exerciseListItems[i].exercise.exerciseId;
      if (currentExerciseId == exerciseId) {
        this.fvpData.splice(i, 1);
        this.axisData.splice(i, 1);
        this.exerciseListItems.splice(i, 1);
        this.legend.splice(i, 1);
        this._forceFVP.splice(i, 1);
        this._powerFVP.splice(i, 1);
        this._velFVP.splice(i, 1);
        this._timeFVP.splice(i, 1);
        this._distFVP.splice(i, 1);
        this.setMaxMin();
        this.setLegend();
        this.setFVP(this.fvpData);
        return;
      }
    }
  }

  public removeAll() {
    const exerciseIds: number[] = this.exerciseListItems.map(
      item => item.exercise.exerciseId
    );
    for (let exerciseId of exerciseIds) {
      this.remove(exerciseId);
    }
  }

  private setLegend() {
    this.legend = [];
    for (var i = 0; i < this.exerciseListItems.length; i++) {
      const item = this.exerciseListItems[i];
      var legend: ILegendButton = {
        title: item.isLatest ? 'LATEST' : item.exercise.dateTime,
        color: `${this.exerciseListItems[i].color}`,
        exerciseId: item.exercise.exerciseId,
        date: item.exercise.dateTime,
        isPersonalBest: item.isPersonalBest,
        isLatest: item.isLatest
      };
      this.legend.push(legend);
    }
  }

  private setMaxMin() {
    if (this.axisData) {
      // Flattern data
      var flatData = ([] as AxisData[]).concat(...this.axisData);
      var maxYAxis: number = -LARGE_VALUE;
      var minYAxis: number = LARGE_VALUE;
      var maxXAxis: number = -LARGE_VALUE;
      var minXAxis: number = LARGE_VALUE;

      for (var p of flatData) {
        if (p.vertical > maxYAxis) {
          maxYAxis = p.vertical;
        }

        if (p.vertical < minYAxis) {
          minYAxis = p.vertical;
        }

        if (p.horizontal > maxXAxis) {
          maxXAxis = p.horizontal;
        }

        if (p.horizontal < minXAxis) {
          minXAxis = p.horizontal;
        }
      }

      this.maxXAxis = maxXAxis;
      this.maxYAxis = maxYAxis;
      this.minXAxis = minXAxis;
      this.minYAxis = minYAxis;
    }
  }

  private static setLabel(axisType: AxisTypes): string {
    const idx: number = axisMenuItems.findIndex(x => x.type === axisType);
    return axisMenuItems[idx].label + ' ' + axisMenuItems[idx].unit;
  }

  private toAxisData(
    xAxis: AxisTypes,
    yAxis: AxisTypes,
    exerciseIdx: number
  ): AxisData[] {
    var axisData: AxisData[] = [];
    const nPoints = this._timeFVP[exerciseIdx].length;
    for (var i = 0; i < nPoints; i++) {
      axisData.push({
        vertical: this.getValue(yAxis, exerciseIdx, i),
        horizontal: this.getValue(xAxis, exerciseIdx, i)
      });
    }
    return axisData;
  }

  private getValue(
    axisType: AxisTypes,
    exerciseIdx: number,
    datapointIdx: number
  ): number {
    switch (axisType) {
      case 'FVPPower': {
        return this._powerFVP[exerciseIdx][datapointIdx];
      }

      case 'FVPForce': {
        return this._forceFVP[exerciseIdx][datapointIdx];
      }

      case 'FVPTime': {
        return this._timeFVP[exerciseIdx][datapointIdx];
      }

      case 'FVPVel': {
        return this._velFVP[exerciseIdx][datapointIdx];
      }

      case 'FVPDist': {
        return this._distFVP[exerciseIdx][datapointIdx];
      }

      default: {
        return 0;
      }
    }
  }

  private setFVP(fvpData: IFVPData[]) {
    this._forceFVP = [];
    this._powerFVP = [];
    this._velFVP = [];
    this._timeFVP = [];
    this._distFVP = [];

    const nExercises: number = fvpData.length;
    if (!nExercises) {
      return;
    }

    // Calculate FVP
    for (var i = 0; i < nExercises; i++) {
      var chunkOfData: any = getTimeVelForcePowerDist(
        fvpData[i].totalTime,
        fvpData[i].tau,
        fvpData[i].maxV
      );
      this._timeFVP.push(chunkOfData.Time);
      this._velFVP.push(chunkOfData.Vel);
      this._forceFVP.push(chunkOfData.Force);
      this._powerFVP.push(chunkOfData.Power);
      this._distFVP.push(chunkOfData.Dist);
    }
  }
}