Intro
La base de este tutorial he encontrado bajo este enlace al
busca de información sobro como añadir los gráficos a una aplicación de
Angular.
También hay informaciones del creador de este componente que
se puede encontrar aquí:
https://www.npmjs.com/package/ng2-charts
Es bastante útil, no obstante, he encontrado unos errores
que tenia que modificar y adaptar a la app que estoy creando, tanto por el uso
de Flex-Layout y adaptar a (responsive app) en cada aspecto y para cada
dispositivo.
Si hayas practicado con Angular Admin Panel bajo este
enlace: https://angularprojekt.blogspot.com/2021/07/angular-admin-panel-con-flex-layout.html
Hoy vamos a añadir unos gráficos, porque gráficos siempre
molan y cada panel de administración debería tener unos cuántos.
Modificaciones
Pero antes de empezar vamos a modificar el proyecto.
En primer lugar, vamos a eliminar el contenido de
mat-content y lo cambiaos por <router-outlet>
<mat-sidenav-content [@eSideContent]="isSmall ? 'close' : isState">
<div class="container">
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
Ahora vamos a crear un componente menú donde colocamos todos
los enlaces
escribimos en el terminal ng g c menus/bimenu
al ejecutar este comando se ha creado una carpeta menus y
dentro otra con el nombre bimenu.
Abrimos el archivo bimenu.componente.ts y añadimos unos
valores para dejar todavía unos link géneros, dejamos el array que hemos creado
anteriormente y añadimos una variable showhide, que también la hemos
tenido en app.component.ts, pero en este caso añadimos la directiva @Input()
para recibir información desde componente padre. Y para que la animación
también influye no lo olvidamos a añadir, en la siguiente manera.
import { Component, Input, OnInit } from '@angular/core';
import { eShowHide } from 'src/app/animation/eShowHide';
@Component({
selector: 'app-bimenu',
templateUrl: './bimenu.component.html',
styleUrls: ['./bimenu.component.css'],
animations: [
eShowHide
]
})
export class BimenuComponent implements OnInit {
menulist = new Array();
@Input() showhide: boolean | undefined;
constructor() { }
ngOnInit(): void {
this.menulist = Array.from({ length: 5 }, (_, i) => `Nav Item ${i + 1}`);
}
}
y en el archivo bimenu.component.html añadimos lista de
navegación
<mat-nav-list>
<mat-list-item routerLink='/products' routerLinkActive="active-item">
<mat-icon class="iconbtn">list</mat-icon>
<span matLine [@eShowHide]="showhide ? 'show' : 'hide'">Products</span>
</mat-list-item>
<mat-list-item *ngFor="let m of menulist">
<mat-icon class="iconbtn">face</mat-icon>
<span matLine [@eShowHide]="showhide ? 'show' : 'hide'">
{{m}}
</span>
</mat-list-item>
</mat-nav-list>
Dashboard & Products
A parte de dejar menú genérico añadimos un item para el
componente que vamos a crear enseguida, para tener un enlace verdadero.
En primer lugar, creamos componente dashboard donde
colocamos los gráficos con comando ng g c dash y el siguiente escribimos
el comando ng g c products en el terminal para crear un enlace más.
El siguiente paso vamos a modulo app-routing.module.ts
para añadir los enlaces para estos componentes.
Al encontrar un constate routes escribimos lo siguiente.
const routes: Routes = [
{ path: '', component: DashComponent },
{ path: 'products', component: ProductsComponent }
];
Al añadir <route-outlet> al componete
app.comp…. cada enlace (path) que no tiene nombre se aparece como primero por
defecto. En caso de navegar a este enlace en routerLink escribimos lo
siguiente.
En componente app.component.html encotramos un botón con
icono settings y añadimos enlace a nuestro dashboard, en la siguiente
manera.
<button *ngIf="showhide" mat-icon-button routerLink="/">
<mat-icon>settings</mat-icon>
</button>
Enlace para componente con los productos hemos añadido
anteriormente, al crear componente menú.
Y para terminar configurar nuevo entorno en el mismo
componente en el lugar donde era menú de navegación lo cambiamos por lo
siguiente.
<div class="appmenu" [@eSideNav]="isOpen ? isState : 'open'" [style.bottom.px]="isSmall ? '3' : '61'" [style.top.px]="isSmall ? topGap : '65'">
<app-bimenu [showhide]="showhide" ></app-bimenu>
</div>
El parámetro showhide pasara información sobre estado do los
elementos en el bimenu.
Si todo ha salido bien el resultado debería ser el siguiente
hacer clic entre icono de settings y enlace Products el contenido
debería cambiar.
Preparación
Instalando componentes
En primer lugar, instalamos los siguientes componentes en el
orden y nombres tal como son, (en el tutorial arriba mencionado no había esta
información y por esto se producía error. Y para que funciona correctamente con
Angular 12 es necesario instalar en esta manera.
npm install chart.js@2.9.3 --save
npm install ng2-charts@2.2.3 –save
el siguiente comando nos ayuda a crear los gráficos con unos
datos de ejemplo.
npm install --save-dev ng2-charts-schematics
Componentes de visualización
Primero creamos una tarjeta (card) – ng g c card para
reutilizar en diferentes sitios.
En card.components.ts añadimos @Input() title: string.
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-card',
templateUrl: './card.component.html',
styleUrls: ['./card.component.css']
})
export class CardComponent implements OnInit {
@Input() title: string | undefined;
constructor() { }
ngOnInit(): void {
}
}
y en card.component.html añadimos lo siguiente.
<mat-card>
<mat-card-header>
<mat-card-title>{{title}}</mat-card-title>
</mat-card-header>
<mat-card-content>
<ng-content></ng-content>
</mat-card-content>
</mat-card>
Los gráficos siempre molan
Para crear un componente de grafico utilizaremos el comando
de chart schematic.
ng
generate ng2-charts-schematics:bar charts/product-chart
y el siguiente
ng generate ng2-charts-schematics:line charts/sales-chart
Los tipos de graficos que existen en este componente son los
siguientes:
·
bar
·
bubble
·
doughnut
·
horiontalBar
·
line
·
pie
·
polarArea
·
radar
·
scatter
Al cambiar el nombre en el comando automáticamente se crea
un gráfico deseado.
ng generate ng2-charts-schematics:
{{nombre de grafico}} charts/ {{nombre de componente}}
Antes de pasar a los componentes de gráficos abrimos archivo
style.css y añadimos una clase.
.chartCanvas{
width: 98%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
es importante poner el ancho de canvas a 98%, pero no a
100%, con las pruebas realizadas esta dimensión es más optima a la hora de que
el grafico se adapte bien tanto a la tarjeta (card) como en el tamaño de las
pantallas.
Abrimos uno de los componentes con gráfico y cambiamos
estilo de (div) por nuestra clase.
<div class="chartCanvas">
<canvas baseChart [datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[plugins]="barChartPlugins"
[legend]="barChartLegend"
[chartType]="barChartType">
</canvas>
</div>
bajo el {nombre de gráfico} componente.ts podemos
encontrar las configuraciones y
parámetros por defecto para el grafico, no
voy enseñar todos, solamente me concentro en ChartDataSets.
public barChartData: ChartDataSets[] = [
{
data: [65, 59, 80, 81, 56, 55, 40],
label: 'Series A',
// backgroundColor: 'rgb(27, 30, 77)',
// hoverBackgroundColor: 'rgb(27, 30, 70)'
},
{
data: [28, 48, 40, 19, 86, 27, 90],
label: 'Series B',
// backgroundColor: 'rgb(51, 105, 255)',
// hoverBackgroundColor: 'rgb(51, 105, 250)'
},
];
Aparte de añadir datos para mostrar, también se puede
configurar, diferentes parámetros del mismo, al empezar escribir se aparecen
opciones que podemos utilizar para modificar el grafico a nuestro gusto.
Ahora pasamos al componente dash creado anteriormente
y introducimos el siguiente código.
<h1>Dashboard</h1>
<div fxLayout="column" fxLayoutGap="16px">
<div fxLayout="row" fxLayout.sm="column" fxLayout.md="row" fxLayout.xs="column" fxLayoutGap="16px">
<app-card title="Products" fxFlex>
<app-product-chart></app-product-chart>
</app-card>
<app-card title="Sales" fxFlex>
<app-sales-chart></app-sales-chart>
</app-card>
</div>
</div>
Tal como se puede ver hemos utilizado el componente <app-card>
dentro de cual esta el componente con gráfico. Hemos pasado al componente
hijo el nombre del grafico con la directiva title. Y finalmente hemos
configurado con Flex-Layout opciones para visualizar el grafico en
diferentes pantallas.
Y todo a salido bien este es el resultado
Comentarios
Publicar un comentario