From 6cc08fdf1cea7f10d41c9ad7ce5829b69b3855cc Mon Sep 17 00:00:00 2001 From: "martinbobbio1@gmail.com" Date: Tue, 9 Oct 2018 12:43:26 -0300 Subject: [PATCH] Input, output, viewchild --- package-lock.json | 49 ++++++++++++++++- package.json | 2 + src/app/app.module.ts | 4 +- .../graphic-donut.component.html | 5 ++ .../graphic-donut/graphic-donut.component.ts | 19 +++++++ .../incrementor/incrementor.component.html | 15 ++++++ .../incrementor/incrementor.component.ts | 53 +++++++++++++++++++ src/app/pages/graphic/graphic.component.html | 38 +++++++++++-- src/app/pages/graphic/graphic.component.ts | 23 ++++++++ src/app/pages/pages.component.html | 4 +- src/app/pages/pages.module.ts | 13 ++++- .../pages/progress/progress.component.html | 42 +++++++++++++-- src/app/pages/progress/progress.component.ts | 3 ++ 13 files changed, 258 insertions(+), 12 deletions(-) create mode 100644 src/app/components/graphic-donut/graphic-donut.component.html create mode 100644 src/app/components/graphic-donut/graphic-donut.component.ts create mode 100644 src/app/components/incrementor/incrementor.component.html create mode 100644 src/app/components/incrementor/incrementor.component.ts diff --git a/package-lock.json b/package-lock.json index a1d1e6e..a9cb086 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1483,6 +1483,39 @@ "integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc=", "dev": true }, + "chart.js": { + "version": "2.7.2", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.7.2.tgz", + "integrity": "sha512-90wl3V9xRZ8tnMvMlpcW+0Yg13BelsGS9P9t0ClaDxv/hdypHDr/YAGf+728m11P5ljwyB0ZHfPKCapZFqSqYA==", + "requires": { + "chartjs-color": "2.2.0", + "moment": "2.22.2" + } + }, + "chartjs-color": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.2.0.tgz", + "integrity": "sha1-hKL7dVeH7YXDndbdjHsdiEKbrq4=", + "requires": { + "chartjs-color-string": "0.5.0", + "color-convert": "0.5.3" + }, + "dependencies": { + "color-convert": { + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-0.5.3.tgz", + "integrity": "sha1-vbbGnOZg+t/+CwAHzER+G59ygr0=" + } + } + }, + "chartjs-color-string": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.5.0.tgz", + "integrity": "sha512-amWNvCOXlOUYxZVDSa0YOab5K/lmEhbFNKI55PWc4mlv28BDzA7zaoQTGxSBgJMHIW+hGX8YUrvw/FH4LyhwSQ==", + "requires": { + "color-name": "1.1.3" + } + }, "chokidar": { "version": "1.7.0", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-1.7.0.tgz", @@ -1732,8 +1765,7 @@ "color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", - "dev": true + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" }, "color-string": { "version": "0.3.0", @@ -7035,6 +7067,11 @@ } } }, + "moment": { + "version": "2.22.2", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.22.2.tgz", + "integrity": "sha1-PCV/mDn8DpP/UxSWMiOeuQeD/2Y=" + }, "move-concurrently": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", @@ -7142,6 +7179,14 @@ "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=", "dev": true }, + "ng2-charts": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/ng2-charts/-/ng2-charts-1.6.0.tgz", + "integrity": "sha512-9w0WH69x5/nuqC1og2WaY39NbaBqTGIP1+5gZaH7/KPN6UEPonNg/pYnsIVklLj1DWPWXKa8+XXIJZ1jy5nLxg==", + "requires": { + "chart.js": "2.7.2" + } + }, "no-case": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz", diff --git a/package.json b/package.json index 414870d..7cc21c3 100644 --- a/package.json +++ b/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" }, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 3b57d55..cb5932b 100644 --- a/src/app/app.module.ts +++ b/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: [], diff --git a/src/app/components/graphic-donut/graphic-donut.component.html b/src/app/components/graphic-donut/graphic-donut.component.html new file mode 100644 index 0000000..e33493c --- /dev/null +++ b/src/app/components/graphic-donut/graphic-donut.component.html @@ -0,0 +1,5 @@ +

{{title}}

+ +
+ +
\ No newline at end of file diff --git a/src/app/components/graphic-donut/graphic-donut.component.ts b/src/app/components/graphic-donut/graphic-donut.component.ts new file mode 100644 index 0000000..01b8646 --- /dev/null +++ b/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() { + } + +} diff --git a/src/app/components/incrementor/incrementor.component.html b/src/app/components/incrementor/incrementor.component.html new file mode 100644 index 0000000..3f1321d --- /dev/null +++ b/src/app/components/incrementor/incrementor.component.html @@ -0,0 +1,15 @@ +

{{leyend}}

+ +
+ + + + + + + +
\ No newline at end of file diff --git a/src/app/components/incrementor/incrementor.component.ts b/src/app/components/incrementor/incrementor.component.ts new file mode 100644 index 0000000..db39bb8 --- /dev/null +++ b/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 = 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); + + } + +} diff --git a/src/app/pages/graphic/graphic.component.html b/src/app/pages/graphic/graphic.component.html index 6d091f4..bd883b9 100644 --- a/src/app/pages/graphic/graphic.component.html +++ b/src/app/pages/graphic/graphic.component.html @@ -1,3 +1,35 @@ -

- graphic works! -

+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
diff --git a/src/app/pages/graphic/graphic.component.ts b/src/app/pages/graphic/graphic.component.ts index 7b5a9fb..e2a503f 100644 --- a/src/app/pages/graphic/graphic.component.ts +++ b/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() { diff --git a/src/app/pages/pages.component.html b/src/app/pages/pages.component.html index 222bbb3..86a607c 100644 --- a/src/app/pages/pages.component.html +++ b/src/app/pages/pages.component.html @@ -10,7 +10,7 @@ -
+
diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts index ec56bdf..78e3594 100644 --- a/src/app/pages/pages.module.ts +++ b/src/app/pages/pages.module.ts @@ -1,13 +1,20 @@ 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:[ @@ -15,6 +22,8 @@ import { PagesComponent } from '../pages/pages.component'; ProgressComponent, GraphicComponent, PagesComponent, + IncrementorComponent, + GraphicDonutComponent ], exports:[ DashboardComponent, @@ -24,6 +33,8 @@ import { PagesComponent } from '../pages/pages.component'; ], imports:[ SharedModule, + FormsModule, + ChartsModule, PAGES_ROUTES ] }) diff --git a/src/app/pages/progress/progress.component.html b/src/app/pages/progress/progress.component.html index 847dc66..1d5964a 100644 --- a/src/app/pages/progress/progress.component.html +++ b/src/app/pages/progress/progress.component.html @@ -1,3 +1,39 @@ -

- progress works! -

+
+
+
+
+ +

Barra de progreso

+ +
+
+
+
+
+
+ +
+
+
+ +
+
+
+ + + +
+
+
+ +
+
+
+ + + +
+
+
+ +
\ No newline at end of file diff --git a/src/app/pages/progress/progress.component.ts b/src/app/pages/progress/progress.component.ts index 5022fc8..a563ca6 100644 --- a/src/app/pages/progress/progress.component.ts +++ b/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() {