### File

`src/app/user/user.component.ts`

### Metadata

selector | `app-user`
styleUrls | `user.component.scss`
templateUrl | `user.component.html`

### Constructor

`constructor(dataService: ApiService)`

### Methods

logout
`logout()`
Logs the user out by deleting the user's data token and hence redirecting to the login page. Returns: `void`

Private changeState
`changeState(state: boolean)`

Update the login state of the user according to the input, specifically for the user component.

Parameters :

- state
  - The desired login state of the user.

Returns: `void`

### Properties

hist
`hist: `number[]` </bcode>`

loggedIn
`loggedIn: `boolean` </bcode>`

timeline
`timeline: `number[]` </bcode>`

user
`user: `User` </bcode>`

    import {Component, OnInit} from '@angular/core';
    import {User} from '../user';
    import {ApiService} from '../api.service';

    declare var Chart: any;

    @Component({
      selector: 'app-user',
      templateUrl: './user.component.html',
      styleUrls: ['./user.component.scss']
    })
    export class UserComponent implements OnInit {

      user: User;
      loggedIn: boolean;
      hist: number[] = [];
      timeline: number[];

      constructor(private dataService: ApiService) {
      }

      ngOnInit(): void {
        this.dataService.getLoggedInState.subscribe(state => this.changeState(state));
        this.loggedIn = this.dataService.isLoggedIn();
        this.user = JSON.parse(this.dataService.getToken());

        (() => {
          this.timeline = JSON.parse(this.user.correct_timeline);
          console.log(this.timeline);
          let sum = 0;
          this.timeline.forEach(element => {
            sum += element;
            this.hist.push(sum);
          });
        })();

        Chart.defaults.global.defaultFontFamily = 'Lato';
        Chart.defaults.global.defaultFontColor = '#888';

        const ctx = (document.getElementById('myChart') as HTMLCanvasElement).getContext('2d');

        const chart = new Chart(ctx, {
          type: 'line',
          data: {
            labels: Array.from(this.timeline.keys()),
            datasets: [{
              label: 'Total Accepted',
              data: this.hist,
              fill: true,
              backgroundColor: '#0f08'
            },
              {
                label: 'Total Incorrect',
                data: Array.from(this.timeline.keys()),
                fill: true,
                backgroundColor: '#f008'
              }]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            elements: {
              point: {
                radius: 0
              }
            },
            layout: {
              padding: {
                bottom: -10,
                left: -10
              }
            },
            legend: {
              labels: {
                fontSize: 15
              }
            },
            scales: {
              xAxes: [{
                ticks: {
                  display: false
                },
                gridLines: {
                  color: 'transparent'
                }
              }],
              yAxes: [{
                ticks: {
                  display: false
                },
                gridLines: {
                  color: 'transparent'
                }
              }]
            }
          }
        });
      }

      /**
       * Logs the user out by deleting the user's data token and hence redirecting to the login page.
       */
      logout(): void {
        this.dataService.deleteToken();
      }

      /**
       * Update the login state of the user according to the input, specifically for the user component.
       * @param state - The desired login state of the user.
       * @private
       */
      private changeState(state: boolean): void {
        this.loggedIn = state;
      }

    }

# results matching ""

# No results matching ""