File

src/app/user/user.component.ts

Implements

OnInit

Metadata

selector app-user
styleUrls ./user.component.scss
templateUrl ./user.component.html

Index

Properties
Methods

Constructor

constructor(dataService: ApiService)
Parameters :
Name Type Optional
dataService ApiService No

Methods

Private changeState
changeState(state: boolean)
Parameters :
Name Type Optional
state boolean No
Returns : void
logout
logout()
Returns : void
ngOnInit
ngOnInit()
Returns : void

Properties

hist
Type : number[]
Default value : []
loggedIn
Type : boolean
timeline
Type : number[]
user
Type : User
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'
            }
          }]
        }
      }
    });
  }

  logout(): void {
    this.dataService.deleteToken();
  }

  private changeState(state: boolean): void {
    this.loggedIn = state;
  }

}
<div class="container">
  <div class="card" id="user_cred">
    <div id="grid1">
      <img alt="Profile Icon" id="profile-icon" src="{{user.img_url}}">
      <div class="name-and-id">
        <div class="tc">
          <div>{{user.name}}</div>
          <div>{{user.email}}</div>
          <div class="inline-code">{{user.username}}</div>
          <div class="inline-code"><i class="lnr lnr-star"></i> {{user.rating}}</div>
          <div>
            <a href="" id="edit">
              <button>Edit Details</button>
            </a>
            <a (click)="logout()" href="" id=" Logout">
              <button>Logout</button>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card">
    <table id="stats">
      <tr>
        <td>Total Attempts</td>
        <td>{{user.n_attempts}}</td>
      </tr>
      <tr>
        <td>Accepted Submissions</td>
        <td>{{hist[hist.length - 1]}} ({{hist[hist.length - 1] / user.n_attempts * 100 | number : '1.2-2'}}%)</td>
      </tr>
      <tr>
        <td>Attempt Summary:</td>
      </tr>
    </table>
    <div id="canvas">
      <canvas height="100px" id="myChart" width="100px"></canvas>
    </div>
  </div>
</div>

./user.component.scss

.container {
  position: relative;
  padding: 20px;

  .card {
    border-bottom: 1px solid var(--color);
    padding: 20px;
    margin: 20px 0;
    background: var(--dark);
  }

  #grid1 {
    display: grid;
    grid-template-columns: 100px auto;
    grid-column-gap: 4%;

    #profile-icon {
      display: block;
      width: 100px;
      padding: 2px;
      border: 1px solid var(--color);
    }

    .name-and-id {
      display: table;
      height: 106px;
    }

    .tc {
      display: table-cell;
      height: 106px;
      vertical-align: middle;

      & > div {
        margin: 4px;

        .lnr {
          font-size: 1.1em;
          color: #ffa;
          border-radius: 100%;
          box-shadow: 0 0 5px 5px #ff84 inset,
          0 0 5px 5px #ff84;
        }
      }
    }
  }

  #stats {
    td {
      padding: 5px 20px;
    }
  }

  #canvas {
    width: 40vw;
    height: 40vw;
    margin: 10px auto;
    border: 1px dashed var(--color);

    canvas {
      display: block;
    }
  }

}

a {
  margin: 2px;
}

@media screen and (max-width: 800px) {
  #canvas {
    width: 70vw !important;
    height: 70vw !important;
  }
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""