Input, output, viewchild

package.json

@@ -21,7 +21,9 @@
     "@angular/platform-browser": "^5.1.0",
     "@angular/platform-browser-dynamic": "^5.1.0",
     "@angular/router": "^5.1.0",
+    "chart.js": "^2.7.2",
     "core-js": "^2.4.1",
+    "ng2-charts": "^1.6.0",
     "rxjs": "^5.5.6",
     "zone.js": "^0.8.19"
   },

src/app/app.module.ts

@@ -1,5 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
 //Routes
 import { APP_ROUTES } from './app.routes';
@@ -17,11 +18,12 @@ import { RegisterComponent } from './auth/register.component';
   declarations: [
     AppComponent,
     LoginComponent,
-    RegisterComponent
+    RegisterComponent,
   ],
   imports: [
     BrowserModule,
     PagesModule,
+    FormsModule,
     APP_ROUTES
   ],
   providers: [],

src/app/components/graphic-donut/graphic-donut.component.html

@@ -0,0 +1,5 @@
+<h4>{{title}}</h4>
+
+<div style="display:block">
+  <canvas baseChart [data]="doughnutChartData" [labels]="doughnutChartLabels" chartType="doughnut"></canvas>
+</div>

src/app/components/graphic-donut/graphic-donut.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-graphic-donut',
+  templateUrl: './graphic-donut.component.html',
+  styles: []
+})
+export class GraphicDonutComponent implements OnInit {
+
+  @Input('chartLabels') doughnutChartLabels:string[] = [];
+  @Input('chartData') doughnutChartData:number[] = [];
+  @Input() title:string;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/incrementor/incrementor.component.html

@@ -0,0 +1,15 @@
+<h3>{{leyend}}</h3>
+
+<div class="input-group">
+  <span class="input-group-btn">
+    <button class="btn btn-primary" type="button" (click)="changeValue(-5)">
+      <i class="mdi mdi-minus"></i>
+    </button>
+  </span>
+  <input #txtPercent type="number" min="1" max="100" class="form-control" name="percent" [(ngModel)]="percent" (ngModelChange)="changeNgModel($event)">
+  <span class="input-group-btn">
+    <button class="btn btn-primary" type="button" (click)="changeValue(+5)">
+      <i class="mdi mdi-plus"></i>
+    </button>
+  </span>
+</div>

src/app/components/incrementor/incrementor.component.ts

@@ -0,0 +1,53 @@
+import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';
+
+@Component({
+  selector: 'app-incrementor',
+  templateUrl: './incrementor.component.html',
+  styles: []
+})
+export class IncrementorComponent implements OnInit {
+
+  @ViewChild('txtPercent') txtPercent: ElementRef;
+
+  @Input() percent:number = 50;
+  @Input() leyend:string = 'Leyenda';
+
+  @Output() percentValue:EventEmitter<number> = new EventEmitter();
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  changeValue(value){
+
+    if(this.percent >= 100 && value > 0){
+      this.percent = 100;
+      return;
+    }
+
+    if(this.percent <= 0 && value < 0){
+      this.percent = 0;
+      return;
+    }
+
+    this.percent += value;
+    this.percentValue.emit(this.percent);
+    this.txtPercent.nativeElement.focus();
+  }
+
+  changeNgModel(value){
+
+    if(value >= 100)
+      this.percent = 100;
+    else if(value <= 0)
+      this.percent = 0;
+    else
+      this.percent = value;
+
+    this.txtPercent.nativeElement.value = Number(this.percent)
+    this.percentValue.emit(this.percent);
+
+  }
+
+}

src/app/pages/graphic/graphic.component.html

@@ -1,3 +1,35 @@
-<p>
-  graphic works!
-</p>
+<div class="row">
+
+  <div class="col-6">
+    <div class="card">
+      <div class="card-body">
+        <app-graphic-donut [chartLabels]="graficos.grafico1.labels" [chartData]="graficos.grafico1.data" [title]="graficos.grafico1.leyenda"></app-graphic-donut>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-6">
+    <div class="card">
+      <div class="card-body">
+        <app-graphic-donut [chartLabels]="graficos.grafico2.labels" [chartData]="graficos.grafico2.data" [title]="graficos.grafico2.leyenda"></app-graphic-donut>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-6">
+    <div class="card">
+      <div class="card-body">
+        <app-graphic-donut [chartLabels]="graficos.grafico3.labels" [chartData]="graficos.grafico3.data" [title]="graficos.grafico3.leyenda"></app-graphic-donut>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-6">
+    <div class="card">
+      <div class="card-body">
+        <app-graphic-donut [chartLabels]="graficos.grafico4.labels" [chartData]="graficos.grafico4.data" [title]="graficos.grafico4.leyenda"></app-graphic-donut>
+      </div>
+    </div>
+  </div>
+
+</div>

src/app/pages/graphic/graphic.component.ts

@@ -7,6 +7,29 @@ import { Component, OnInit } from '@angular/core';
 })
 export class GraphicComponent implements OnInit {
 
+  graficos: any = {
+    'grafico1': {
+      'labels': ['Con Frijoles', 'Con Natilla', 'Con tocino'],
+      'data':  [24, 30, 46],
+      'leyenda': 'El pan se come con'
+    },
+    'grafico2': {
+      'labels': ['Hombres', 'Mujeres'],
+      'data':  [4500, 6000],
+      'leyenda': 'Entrevistados'
+    },
+    'grafico3': {
+      'labels': ['Si', 'No'],
+      'data':  [95, 5],
+      'leyenda': '¿Le dan gases los frijoles?'
+    },
+    'grafico4': {
+      'labels': ['No', 'Si'],
+      'data':  [85, 15],
+      'leyenda': '¿Le importa que le den gases?'
+    },
+  };
+
   constructor() { }
 
   ngOnInit() {

src/app/pages/pages.component.html

@@ -10,15 +10,15 @@
 
       <router-outlet></router-outlet>
 
-      <div class="row">
+      <!-- <div class="row">
         <div class="col-12">
           <div class="card">
             <div class="card-body">
 
             </div>
           </div>
         </div>
-      </div>
+      </div> -->
 
     </div>
   </div>

src/app/pages/pages.module.ts

@@ -1,20 +1,29 @@
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
 import { SharedModule } from '../shared/shared.module';
 
-import { PAGES_ROUTES }  from '../pages/pages.routes'
+import { PAGES_ROUTES }  from '../pages/pages.routes';
+
+//Graphics Angular
+import { ChartsModule } from 'ng2-charts';
 
 import { DashboardComponent } from '../pages/dashboard/dashboard.component';
 import { ProgressComponent } from '../pages/progress/progress.component';
 import { GraphicComponent } from '../pages/graphic/graphic.component';
 import { PagesComponent } from '../pages/pages.component';
+import { IncrementorComponent } from '../components/incrementor/incrementor.component';
+import { GraphicDonutComponent } from '../components/graphic-donut/graphic-donut.component';
+
 
 @NgModule({
     declarations:[
         DashboardComponent,
         ProgressComponent,
         GraphicComponent,
         PagesComponent,
+        IncrementorComponent,
+        GraphicDonutComponent
     ],
     exports:[
         DashboardComponent,
@@ -24,6 +33,8 @@ import { PagesComponent } from '../pages/pages.component';
     ],
     imports:[
         SharedModule,
+        FormsModule,
+        ChartsModule,
         PAGES_ROUTES
     ]
 })

src/app/pages/progress/progress.component.html

@@ -1,3 +1,39 @@
-<p>
-  progress works!
-</p>
+<div class="row">
+  <div class="col-12">
+    <div class="card">
+      <div class="card-body">
+
+        <h3 class="card-title">Barra de progreso</h3>
+
+        <div class="progress">
+          <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" [attr.ariaValueNow]="percent1" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" [style.width]="percent1 + '%'"></div>
+        </div>
+        <div class="progress mt-4">
+          <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" [attr.ariaValueNow]="percent2" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" [style.width]="percent2 + '%'"></div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+
+  <div class="col-6">
+    <div class="card">
+      <div class="card-body">
+
+        <app-incrementor (percentValue)="percent1 = $event" leyend="Primario" [percent]=percent1></app-incrementor>
+
+      </div>
+    </div>
+  </div>
+
+  <div class="col-6">
+    <div class="card">
+      <div class="card-body">
+
+        <app-incrementor (percentValue)="percent2 = $event" leyend="Secundario" [percent]=percent2></app-incrementor>
+
+      </div>
+    </div>
+  </div>
+
+</div>

src/app/pages/progress/progress.component.ts

@@ -7,6 +7,9 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ProgressComponent implements OnInit {
 
+  percent1:number = 20;
+  percent2:number = 60;
+
   constructor() { }
 
   ngOnInit() {