Ediciones ENI Editorial | líder en informática
Angular y la visualización de información
Introducción
Del amplio dominio de la visualización de información y de la integración de componentes de interfaz (GUI components), en este capítulo presentamos tres aspectos particulares centrados en un proyecto Angular:
-
La creación de gráficas (de charts), complementadas por flujos de datos asíncronos.
-
La interfaz de mapas geográficos (en este caso de Google Maps), con multitud de información gráfica.
-
La integración de componentes gráficos pertenecientes a diferentes librerías de componentes.
La creación de gráficas se ilustrará por medio de la utilización de las librerías gráficas D3.js y dc.js, que se basan en el lenguaje SVG, de la que se aportará una pequeña muestra. También se implementará la librería Crossfilter, que permite analizar grandes volúmenes de datos con el objetivo de realizar un análisis multidimensional.
La cobertura mediática de un mapa geográfico, se realizará por medio del uso del API Google Map a través de un componente de la librería de componentes gráficos PrimeNG. Sobrecargaremos este Google Map de información gráfica.
Al final de capítulo, se presentará una aplicación Angular que sintetiza estos dos puntos: un Google Map que ubicará (con círculos de diámetros más...
Creación de charts con D3.js y dc.js
La librería D3.js (Data-Driven Documents) permite crear interfaces gráficas vectoriales en JavaScript. El código creado en D3 genera etiquetas del lenguaje SVG (Scalable Vector Graphics) (de hecho, insertan en el DOM elementos que se corresponden con estas etiquetas y sus atributos). El aspecto original de D3, es generar los elementos gráficos en SVG, a partir de colecciones de objetos JavaScript. Estos objetos se podrían, en el caso de una utilización en Angular, entregar por los observables.
La librería dc.js utiliza la librería D3.js para ofrecer funciones que permiten crear gráficos estáticos (charts). Normalmente se utilizada con la librería Crossfilter, que permite además (pero siempre en el cliente), un análisis multidimensional de los datos.
1. Instalación de D3.js
Fuera de Angular, la librería D3.js está relacionada con su código a través de la etiqueta <script> (después de haber sido descargada, lo que es recomendable):
<script src="d3.min.js" type="text/javascript" /> En Angular, D3.js, se instala como módulo a través de npm:
npm install --save d3
npm install --save-dev @tipos/d3 Seguidamente, es suficiente con importar este módulo:
import * as d3 from 'd3'; 2. El lenguaje SVG
El lenguaje de marcado SVG, normalizado por el W3C, permite crear gráficas 2D vectoriales. También permite controlar (a través de los eventos) y animar los elementos gráficos, así como crearlos. Es un lenguaje muy completo. Las interacciones entre elementos gráficos se realizan en JavaScript.
Por ejemplo, un rectángulo se puede crear con la etiqueta <rect>:
<rect x="<abscisa de la esquina superior izquierda>"
y="<ordenada de la esquina superior izquierda>"
width="<longitud>"
height="<altura>"
stroke="<color del borde>"
fill="<color de relleno>" /> Un círculo por la etiqueta <circle>:
<circle cx="<abscisa del centro>"
...Integración de mapas Google Map en un proyecto Angular
Veamos cómo utilizar el componente presentado en la sección anterior, seleccionando los nombres de los lugares a partir de los que los productos se han solicitado, no más en una lista desplegable, sino directamente en una Google Map. Vamos a explicar cómo hacer la interfaz entre un mapa Google Map con Angular, y de manera más específica, utilizando la librería de componentes PrimeNG, y después vamos a presentar el código que realiza esta integración. Este ejemplo le aportará un resumen de la utilización de componentes gráficos (UI componentes) en Angular.
Va a reutilizar el servidor de prueba que ha creado, para alimentar con datos los histogramas. A los datos asociados a los lugares a partir de los cuales se realizan los pedidos, va a añadir sus coordenadas geográficas para mostrar en el mapa Google Map, círculos de diámetros proporcionales al número de productos solicitados. Estos círculos se mostrarán «en overlay», es decir en una capa (un layer) situada encima del mapa subyacente.
1. Instalación de los requisitos previos técnicos
Para gestionar los mapas Google Maps, debe instalar por un lado los tipos TypeScript necesarios y por otro, instalar en la librería de módulos Node.js aquellos que forman parte de la librería PrimeNG (puede utilizar otra librería de componentes, incluso crear su componente, pero esto sería un poco más complejo).
a. Instalación de los tipos TypeScript
La integración de Google Maps en un proyecto Angular requiere la instalación de tipos complementarios para TypeScript.
A continuación se muestra el procedimiento a seguir:
Si todavía no se ha hecho, instale la aplicación typings que gestiona el tipado de TypeScript:
npm install typings --global Utilice la aplicación typings para instalar los tipos relativos para la utilización de Google Maps:
typings install dt~google.maps --global --save Esto crea el archivo typings.json:
{
"globalDependencies": {
"google.maps": "registry:dt/google.maps#3.25.0+20161208205818"
}
} Edite el archivo tsconfig.json, añada...
Implementación de componentes gráficos
1. Otro ejemplo de componente PrimeNG (Calendar)
En la librería de componentes gráficos PrimeNG que hemos descubierto en la sección anterior, figura el componente Calendar, que permite seleccionar una fecha a través de un calendario.
De una manera general, sea cual sea el componente implementado, la component directive (la etiqueta que lleva como nombre el selector del componente) se utiliza en la plantilla del componente que la integra (este componente «host» se puede activar en una ruta).
A continuación se muestra el esquema de programación de utilización de un componente de PrimeNG:
<p-nombreDelComponente ...></p- nombreDelComponente> (La clase que implementa el componente host, puede por supuesto especificar los valores de las directivas de atributos necesarias para la configuración del componente.)
A continuación se muestra la lista del código principal de la aplicación de prueba:
-
CALENDAR/src/app/app.component.html: plantilla del componente host que integra el componente Calendar de PrimeNG.
-
CALENDAR/src/app/app.component.ts: clase del componente host que permite recuperar la fecha seleccionada.
-
CALENDAR/src/app/app.module.ts: root module del proyecto (no presentado).
A continuación se muestra el código de la plantilla del componente host AppComponent (archivo app.component.html). La variable date contiene el valor de la fecha seleccionada a través del calendario. Este valor se pasa a un método de la clase del componente host, para mostrarla en la consola del navegador.
<p-calendar [(ngModel)]="date"
[showIcon]="true"><
(onSelect)= "onChange(date)">
</p-calendar>
<h3> A continuación se muestra la date seleccionada {{date}} </h3> A continuación se muestra el código del componente host AppComponent (archivo app.component.ts), que solo importa el módulo necesario para la gestión del calendario, definir las hojas de estilo necesarias para PrimeNG y un método que recibe la nueva fecha seleccionada:
import { Component } from '@angular/core';
import {CalendarModule} from 'primeng/primeng';
@Component({ ...Conocimientos adquiridos en este capítulo
La visualización de información es un dominio en el que una aplicación Angular incluida en una arquitectura MEAN, tiene todo el sentido. Angular se adapta particularmente bien para realizar cuadros de mando (los dashboards), que permiten visualizar a través de gráficas, la evolución de flujo de datos asíncronos. Los datos geolocalizados, también se pueden publicitar por medio de la anotación de mapas geográficos, a través de capas superpuestas de anotaciones gráficas. De esta manera, puede integrar en una aplicación Angular, los Google Maps sobrecargados por overlays.
Un gran número de librerías ofrece componentes gráficos (los UI componentes), listos para usar. Hemos elegido presentarle las librerías PrimeNG y Material, cuya oferta es particularmente rica.
En un primer momento, hemos explicado cómo crear una gráfica (en este caso, un histograma) utilizando la librería JavaScript gráfica D3.js. D3.js inserta en el DOM elementos del lenguaje SVG, que es un lenguaje de etiquetas que permite realizar gráficos vectoriales y animarlos. Las bases de la librería D3.js, así como del lenguaje SVG, también se han presentado. Hemos insistido en la capacidad de D3.js de reutilizar o crear elementos gráficos, asociando elementos del DOM que existen...