### File

`src/app/layout/text-statistics/text-statistics.component.ts`

### Implements

`OnInit`

### Metadata

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

### Index

###### Properties
awlPercentage Public BACK_LABEL backLabel Public barChartData Public barChartLabels Public barChartLegend Public barChartOptions Public barChartType closeResult Public ENHANCETEXT_LABEL enhanceTextLabel hiPercentage lowPercentage medPercentage noCategoryPercentage Public pieChartData Public pieChartLabels Public pieChartType Public router showDiv showOnlyIcons text textColor textLVL
###### Methods
backClicked Public chartClicked Public chartHovered ngOnInit onResize textLevel updateBarChart Private updaTeLabels updatePieChart

### Constructor

`constructor(_textService: TextService, router: Router, _location: Location, modalService: NgbModal)`
Defined in src/app/layout/text-statistics/text-statistics.component.ts:46
Parameters :
Name | Type | Optional | Description
_textService | `TextService` |  |
router | `Router` |  |
_location | `Location` |  |
modalService | `NgbModal` |  |

### Methods

backClicked
`backClicked()`
Defined in src/app/layout/text-statistics/text-statistics.component.ts:103
Returns : `void`

Public chartClicked
`chartClicked(e: any)`
Defined in src/app/layout/text-statistics/text-statistics.component.ts:119
Parameters :
Name | Type | Optional | Description
e | `any` |  |
Returns : `void`

Public chartHovered
`chartHovered(e: any)`
Defined in src/app/layout/text-statistics/text-statistics.component.ts:123
Parameters :
Name | Type | Optional | Description
e | `any` |  |
Returns : `void`

ngOnInit
`ngOnInit()`
Defined in src/app/layout/text-statistics/text-statistics.component.ts:50
Returns : `void`

onResize
`onResize(event: )`
Defined in src/app/layout/text-statistics/text-statistics.component.ts:107
Parameters :
Name | Type | Optional | Description
event |  |  |
Returns : `void`

textLevel
`textLevel(score: number, words: number)`
Defined in src/app/layout/text-statistics/text-statistics.component.ts:78
Parameters :
Name | Type | Optional | Description
score | `number` |  |
words | `number` |  |
Returns : `void`

updateBarChart
`updateBarChart(awl: number, hi: number, med: number, low: number, noCategory: number)`
Defined in src/app/layout/text-statistics/text-statistics.component.ts:128
Parameters :
Name | Type | Optional | Description
awl | `number` |  |
hi | `number` |  |
med | `number` |  |
low | `number` |  |
noCategory | `number` |  |
Returns : `void`

Private updaTeLabels
`updaTeLabels()`
Defined in src/app/layout/text-statistics/text-statistics.component.ts:113
Returns : `void`

updatePieChart
`updatePieChart(awl: number, hi: number, med: number, low: number, noCategory: number)`
Defined in src/app/layout/text-statistics/text-statistics.component.ts:134
Parameters :
Name | Type | Optional | Description
awl | `number` |  |
hi | `number` |  |
med | `number` |  |
low | `number` |  |
noCategory | `number` |  |
Returns : `void`

### Properties

awlPercentage
`awlPercentage: `number``
Type : `number`
Defined in src/app/layout/text-statistics/text-statistics.component.ts:40

Public BACK_LABEL
`BACK_LABEL: ```
Default value : `Back`
Defined in src/app/layout/text-statistics/text-statistics.component.ts:15

backLabel
`backLabel: `string``
Type : `string`
Defined in src/app/layout/text-statistics/text-statistics.component.ts:37

Public barChartData
`barChartData: `any[]``
Type : `any[]`
Defined in src/app/layout/text-statistics/text-statistics.component.ts:27

Public barChartLabels
`barChartLabels: `string[]``
Type : `string[]`
Defined in src/app/layout/text-statistics/text-statistics.component.ts:26

Public barChartLegend
`barChartLegend: ```
Default value : `true`
Defined in src/app/layout/text-statistics/text-statistics.component.ts:29

Public barChartOptions
`barChartOptions: `any``
Type : `any`
Defined in src/app/layout/text-statistics/text-statistics.component.ts:22

Public barChartType
`barChartType: ```
Default value : `bar`
Defined in src/app/layout/text-statistics/text-statistics.component.ts:28

closeResult
`closeResult: `string``
Type : `string`
Defined in src/app/layout/text-statistics/text-statistics.component.ts:46

Public ENHANCETEXT_LABEL
`ENHANCETEXT_LABEL: `string``
Type : `string`
Default value : `Enhanced Text`
Defined in src/app/layout/text-statistics/text-statistics.component.ts:16

enhanceTextLabel
`enhanceTextLabel: `string``
Type : `string`
Defined in src/app/layout/text-statistics/text-statistics.component.ts:38

hiPercentage
`hiPercentage: `number``
Type : `number`
Defined in src/app/layout/text-statistics/text-statistics.component.ts:41

lowPercentage
`lowPercentage: `number``
Type : `number`
Defined in src/app/layout/text-statistics/text-statistics.component.ts:43

medPercentage
`medPercentage: `number``
Type : `number`
Defined in src/app/layout/text-statistics/text-statistics.component.ts:42

noCategoryPercentage
`noCategoryPercentage: `number``
Type : `number`
Defined in src/app/layout/text-statistics/text-statistics.component.ts:44

Public pieChartData
`pieChartData: `number[]``
Type : `number[]`
Defined in src/app/layout/text-statistics/text-statistics.component.ts:19

Public pieChartLabels
`pieChartLabels: `string[]``
Type : `string[]`
Defined in src/app/layout/text-statistics/text-statistics.component.ts:18

Public pieChartType
`pieChartType: ```
Default value : `pie`
Defined in src/app/layout/text-statistics/text-statistics.component.ts:20

Public router
`router: `Router``
Type : `Router`
Defined in src/app/layout/text-statistics/text-statistics.component.ts:48

showDiv
`showDiv: `boolean``
Type : `boolean`
Defined in src/app/layout/text-statistics/text-statistics.component.ts:33

showOnlyIcons
`showOnlyIcons: `boolean``
Type : `boolean`
Defined in src/app/layout/text-statistics/text-statistics.component.ts:36

text
`text: `IText``
Type : `IText`
Defined in src/app/layout/text-statistics/text-statistics.component.ts:32

textColor
`textColor: `string``
Type : `string`
Defined in src/app/layout/text-statistics/text-statistics.component.ts:35

textLVL
`textLVL: `string``
Type : `string`
Defined in src/app/layout/text-statistics/text-statistics.component.ts:34

    import { Component, OnInit } from '@angular/core';
    import { TextService, IText } from '../../shared'
    import { Router } from '@angular/router';
    import { Location } from '@angular/common';
    import { DecimalPipe } from '@angular/common';
    import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';

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

      public static BACK_LABEL = ' Back';
      public static readonly ENHANCETEXT_LABEL: string = ' Enhanced Text';

      public pieChartLabels: string[] = ['Academic Word', 'High Freq.', 'Medium Freq.', 'Low Freq.', 'Names & Off-List'];
      public pieChartData: number[];
      public pieChartType = 'pie';

      public barChartOptions: any = {
        scaleShowVerticalLines: false,
        responsive: true
      };
      public barChartLabels: string[] = ['Academic Word', 'High Freq.', 'Medium Freq.', 'Low Freq.', 'Off-List'];
      public barChartData: any[];
      public barChartType = 'bar';
      public barChartLegend = true;

      text: IText;
      showDiv: boolean;
      textLVL: string;
      textColor: string;
      showOnlyIcons: boolean;
      backLabel: string = TextStatisticsComponent.BACK_LABEL;
      enhanceTextLabel: string = TextStatisticsComponent.ENHANCETEXT_LABEL;

      awlPercentage: number;
      hiPercentage: number;
      medPercentage: number;
      lowPercentage: number;
      noCategoryPercentage: number;

      closeResult: string;

      constructor(private _textService: TextService, public router: Router, private _location: Location, private modalService: NgbModal) { }

      ngOnInit() {
        window.scrollTo(0, 0);
        this.text = this._textService.resultText;
        if (!this.text) {
          return;
        } else {
          this.textLevel(this.text.fleschReadingScore, this.text.words.length);
        }
        this.showDiv = true;
        this.showOnlyIcons = window.innerWidth <= 680;
        this.updaTeLabels();
        if (!this.text) {
          return;
        } else {
          this.updateBarChart(this.text.statistics.wordCount.awl, this.text.statistics.wordCount.hi,
            this.text.statistics.wordCount.med, this.text.statistics.wordCount.low, this.text.statistics.wordCount.noCategory);
          this.updatePieChart(this.text.statistics.wordPercentage.awl, this.text.statistics.wordPercentage.hi,
            this.text.statistics.wordPercentage.med, this.text.statistics.wordPercentage.low, this.text.statistics.wordPercentage.noCategory);
        }
      }

      /*
        80-100: Beginner Lever
        70-79: Intermediate Level
        60-69: Upper intermediate Level
        30-59: Advanced Level
        0--29: College Level
      */
      textLevel(score: number, words: number) {
        if (score <= 29 && score >= 1) {
          this.textLVL = 'College Level';
          this.textColor = 'red';
        } else if (score <= 59 && score >= 30) {
          this.textLVL = 'Advanced Level';
          this.textColor = 'orange';
        } else if (score <= 69 && score >= 60) {
          this.textLVL = 'Upper intermediate Level';
          this.textColor = 'yellow';
        } else if (score <= 79 && score >= 70) {
          this.textLVL = 'Intermed iate Level';
          this.textColor = 'green';
        } else if (score === 0) {
          if (words < 100) {
            this.textLVL = 'it is not applicable for texts under 100 words.'
          } else if (words > 100) {
            this.textLVL = 'impossible to comprehend. (more sentences needed)'
          }
        } else {
          this.textLVL = 'Beginner Level';
          this.textColor = 'blue';
        }
      }

      backClicked() {
        this._location.back();
      }

      onResize(event) {
        this.showOnlyIcons = window.innerWidth <= 680;
        this.updaTeLabels();
        event.target.innerWidth;
      }

      private updaTeLabels(): void {
        this.backLabel = this.showOnlyIcons ? '' : TextStatisticsComponent.BACK_LABEL;
        this.enhanceTextLabel = this.showOnlyIcons ? '' : TextStatisticsComponent.ENHANCETEXT_LABEL;
      }

      // events for Pie Chart
      public chartClicked(e: any): void {
        console.log(e);
      }

      public chartHovered(e: any): void {
        console.log(e);
      }

      // Update Pie chart
      updateBarChart(awl: number, hi: number, med: number, low: number, noCategory: number) {

        this.barChartData = [
          { data: [awl, hi, med, low, noCategory], label: '# of Words in different Category' },
        ];
      }
      updatePieChart(awl: number, hi: number, med: number, low: number, noCategory: number) {
        this.pieChartData = [awl * 100, hi * 100, med * 100, low * 100, noCategory * 100]
      }

    }

    <!--if it sees the object it will show the result, else it prompt the user to go back-->
    <div *ngIf="text;  else elseBlock">
    	<div class="row">
    		<div class="col-6 col-sm-7">
    			<h1 class="font-responsive">Text Statistics</h1>
    		</div>

    		<div class="col-6 col-sm-5" (window:resize)="onResize($event)">
    			<div class="float-right">
    				<button type="button" class="btn btn-warning" (click)="backClicked()">
    					<i class="fa fa-step-backward" aria-hidden="true"></i>{{backLabel}}</button>
    				<button type="button" class="btn btn-success" [routerLink]="['/enhanced-text-result']">
    					<i class="fa fa-file-text" aria-hidden="true"></i> {{enhanceTextLabel}} </button>
    			</div>
    		</div>
    	</div>
    	<hr>

    	<div *ngIf="showDiv">

    		<!--Readability Score-->
    		<div class="card" style="margin: auto; margin-bottom: 3%; margin-top: 3%;">
    			<h3 class="card-header">Readability Scores
    			</h3>

    			<div class="card-block">
    				<div [ngSwitch]="true" style=" margin-bottom: 2%">
    					<div *ngSwitchCase="text.fleschReadingScore > 79">
    						<ngb-progressbar type="primary" [value]="text.fleschReadingScore" [striped]="true" [animated]="true">
    							<i>
    								<strong>{{text.fleschReadingScore | number:'1.0-2'}} / 100</strong>
    							</i>
    						</ngb-progressbar>
    					</div>
    					<div *ngSwitchCase="text.fleschReadingScore > 69 && text.fleschReadingScore < 80">
    						<ngb-progressbar type="success" [value]="text.fleschReadingScore" [striped]="true" [animated]="true">
    							<i>
    								<strong>{{text.fleschReadingScore | number:'1.0-2'}} / 100</strong>
    							</i>
    						</ngb-progressbar>
    					</div>
    					<div *ngSwitchCase="text.fleschReadingScore < 30">
    						<ngb-progressbar type="danger" [value]="text.fleschReadingScore" [striped]="true" [animated]="true">
    							<i>
    								<strong>{{text.fleschReadingScore | number:'1.0-2'}} / 100</strong>
    							</i>
    						</ngb-progressbar>
    					</div>
    					<div *ngSwitchDefault>
    						<ngb-progressbar type="warning" [value]="text.fleschReadingScore" [striped]="true" [animated]="true">
    							<i>
    								<strong>{{text.fleschReadingScore | number:'1.0-2'}} / 100</strong>
    							</i>
    						</ngb-progressbar>
    					</div>
    				</div>

    				<p>
    					<Strong>Total Readability Level: </Strong>
    					<strong [class]="textColor" style="font-size: 20px; font-weight: bold;">{{text.fleschReadingScore | number:'1.0-2'}}</strong>
    				</p>
    				<p>
    					<Strong>The text is appropriate for: </Strong>
    					<strong [class]="textColor" style="font-size: 20px; font-weight: bold;">{{textLVL}}</strong>
    				</p>

    			</div>
    		</div>

    		<!--Text Statistic-->
    		<div class="card">
    			<h3 class="card-header">Statistics</h3>
    			<div class="card-block">
    				<table class="table table-bordered" style="margin-bottom: 3%;">
    					<thead class="thead-default">
    						<tr>
    							<th>#</th>
    							<th>Word Count</th>
    							<th>Percentage</th>
    						</tr>
    					</thead>
    					<tbody>
    						<tr>
    							<th scope="row">AWL</th>
    							<td>{{text.statistics.wordCount.awl}}</td>
    							<td>{{(text.statistics.wordPercentage.awl * 100) | number:'1.0-2'}}%</td>
    						</tr>
    						<tr>
    							<th scope="row">High Freq.</th>
    							<td>{{text.statistics.wordCount.hi}}</td>
    							<td>{{(text.statistics.wordPercentage.hi * 100) | number:'1.0-2'}}%</td>
    						</tr>
    						<tr>
    							<th scope="row">Medium Freq.</th>
    							<td>{{text.statistics.wordCount.med}}</td>
    							<td>{{(text.statistics.wordPercentage.med * 100) | number:'1.0-2'}}%</td>
    						</tr>
    						<tr>
    							<th scope="row">Low Freq.</th>
    							<td>{{text.statistics.wordCount.low}}</td>
    							<td>{{(text.statistics.wordPercentage.low * 100) | number:'1.0-2'}}%</td>
    						</tr>
    						<tr>
    							<th scope="row">Names & off-list</th>
    							<td>{{text.statistics.wordCount.noCategory}}</td>
    							<td>{{(text.statistics.wordPercentage.noCategory * 100) | number:'1.0-2'}}%</td>
    						</tr>
    					</tbody>
    				</table>

    				<table class="table table-bordered">
    					<thead class="thead-default">
    						<tr>
    							<th>#</th>
    							<th>Words</th>
    							<th>Sentences</th>
    						</tr>
    					</thead>
    					<tbody>
    						<tr>
    							<th scope="row">Total</th>
    							<td>{{text.statistics.wordCount.total}}</td>
    							<td>{{text.sentenceCount}}</td>
    						</tr>
    					</tbody>
    				</table>
    			</div>
    		</div>

    		<div class="row" style="margin-top: 3%;">
    			<div class="col col-md-6">
    				<div class="card mb-3">
    					<div class="card-header">
    						<i class="fa fa-fw fa-bar-chart fa-2x float-right"></i>
    						Bar Chart (#)
    					</div>
    					<div class="card-body">
    						<canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend"
    						 [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)">
    						</canvas>
    					</div>
    				</div>
    			</div>
    			<div class="col col-md-6">
    				<div class="card mb-3">
    					<div class="card-header">
    						<i class="fa fa-fw fa-pie-chart fa-2x float-right"></i>
    						Pie Chart (%)
    					</div>
    					<div class="card-body">
    						<canvas baseChart [data]="pieChartData" [labels]="pieChartLabels" [chartType]="pieChartType" (chartHover)="chartHovered($event)"
    						 (chartClick)="chartClicked($event)"></canvas>
    					</div>
    				</div>
    			</div>
    		</div>

    	</div>
    </div>

    <!--if page refreshes it prompt the user to go to the previous page-->
    <ng-template #elseBlock>
    	<div class="row">
    		<!-- <meta http-equiv="refresh" content="0;url=http://www.myvirs.com/dashboard" /> -->
    		<div class="col-6">
    			<h1>Oops!</h1>
    		</div>
    		<div class="col-6" (window:resize)="onResize($event)">
    			<div class="float-right">
    				<button type="button" class="btn btn-warning" (click)="backClicked()">
    					<i class="fa fa-step-backward" aria-hidden="true"></i> {{backLabel}}</button>
    			</div>
    		</div>
    	</div>
    	<hr>

    	<div>
    		<h4> Redirecting to homepage in 3 seconds...</h4>
    	</div>

    </ng-template>

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""