### File

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

### Implements

`OnInit`

### Metadata

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

### Index

###### Properties

- hist
- loggedIn
- timeline
- user

###### Methods

- Private changeState
- logout
- ngOnInit

### Constructor

`constructor(dataService: ApiService)`
Defined in src/app/user/user.component.ts:17

Parameters :

Name | Type | Optional
dataService | `ApiService` | No

### Methods

Private changeState
`changeState(state: boolean)`
Defined in src/app/user/user.component.ts:104

Parameters :

Name | Type | Optional
state | `boolean` | No

Returns : `void`

logout
`logout()`
Defined in src/app/user/user.component.ts:100
Returns : `void`

ngOnInit
`ngOnInit()`
Defined in src/app/user/user.component.ts:22
Returns : `void`

### Properties

hist
Type : `number[]`
Default value : `[]`
Defined in src/app/user/user.component.ts:16

loggedIn
Type : `boolean`
Defined in src/app/user/user.component.ts:15

timeline
Type : `number[]`
Defined in src/app/user/user.component.ts:17

user
Type : `User`
Defined in src/app/user/user.component.ts:14

    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 ""