Cree un panel de datos con AngularJS

Tan pronto como comencé a jugar con AngularJS, me di cuenta de que su capacidad para capturar datos y usarlos directamente en el marcado podría ofrecer grandes posibilidades para la visualización de datos. Este enfoque podría presentar una forma realmente rápida y sencilla de crear visualizaciones de datos desde cero, en lugar de tener que depender de una biblioteca separada.

En este tutorial comenzaremos a construir un panel de datos para una aplicación web, en este caso un clon de RunKeeper llamado 'JogTracker'. Pasaremos de usar valores angulares en estilo HTML a SVG en línea, antes de utilizar el polyfill conic-gradient ().



Como muchas aplicaciones de seguimiento de actividad física, una de las partes más populares de Runkeeper es la capacidad de realizar un seguimiento de sus datos.

Como muchas aplicaciones de seguimiento de actividad física, una de las partes más populares de Runkeeper es la capacidad de realizar un seguimiento de sus datos.

Para mí, la parte más atractiva de esta técnica es que puede comenzar a crear visualizaciones de datos incluso con el conocimiento de JavaScript más limitado. Usaremos en gran medida nuestro archivo de script para almacenar datos, por lo que si puede escribir objetos JavaScript, estará bien encaminado.

Configuración de la aplicación

Para este prototipo, dejaré que Bootstrap haga el trabajo pesado cuando se trata de estilo y diseño, para que podamos centrarnos en el código específico de Angular. Asumiré que ha incluido la biblioteca Angular en su HTML y ha configurado y vinculado su aplicación Angular (consulte el código de ejemplo para obtener detalles sobre cómo hacer esto, si es necesario).

Ahora vamos a crear la estructura de datos para nuestra aplicación JogTracker. Mantendremos esto realmente simple, con cada 'trote' almacenado como un objeto con una propiedad de tiempo, distancia y fecha. Almacenaremos estos objetos en una matriz llamada $ scope.data - $ scope nos permite acceder a estos datos directamente desde el interior de nuestro controlador en el HTML.

|_+_|

Para crear mis visualizaciones también necesito conocer los valores máximos de tiempo y distancia. Esto se puede hacer para cada uno con un pequeño fragmento de JavaScript:

|_+_|

Luego puedo hacer lo mismo para encontrar el tiempo máximo. Ahora tengo todos mis datos almacenados y accesibles desde mi HTML, ¡eso es todo para JavaScript!

mejor monitor para juegos y diseño gráfico

Gráfico de barras

La visualización principal que voy a crear es un gráfico de barras que muestra los últimos 10 trotes de mis datos, con una barra para la distancia y el tiempo. La accesibilidad es importante, así que en el HTML crearé una tabla que contiene los datos y usaré CSS para convertir esto visualmente en un gráfico de barras.

Como el gráfico de barras es una tabla HTML, podemos agregar encabezados de tabla solo para lectores de pantalla para mayor accesibilidad

Como el gráfico de barras es una tabla HTML, podemos agregar encabezados de tabla solo para lectores de pantalla para mayor accesibilidad

Para comenzar, aprovecharé la funcionalidad ng-repeat de Angular para recorrer mi matriz $ scope.data y escupir los datos en una tabla.

|_+_|

Esto creará una fila de tabla para cada entrada en los datos. Declaro el nombre individual de cada entrada como jog. Esto me permite acceder a las propiedades de ese objeto, como jog.distance. También he utilizado algunos filtros angulares usando |. En el atributo ng-repeat, el filtro limitTo le permite limitar el número de entradas mostradas. Un valor de 10 mostrará las primeras 10 entradas, sin embargo, quiero mostrar las últimas 10. Para esto, establezco el limitTo en -10.

Ahora tenemos una tabla accesible que muestra nuestros datos. Convirtámoslo en un gráfico de barras. En primer lugar, necesitamos configurar algo de CSS para anular la apariencia de nuestra tabla.

|_+_|

Esto convierte tanto la tabla como la celda en elementos de bloque, agrega un borde para mostrar un eje X e Y, y configura el posicionamiento y el ancho en las celdas que se convertirán en nuestras barras. Establecemos el posicionamiento absoluto ya que vamos a usar algo de magia angular para espaciar las barras a lo largo de nuestro gráfico usando la propiedad de la izquierda.

También configuré algunas clases para cada barra, con el fin de darles un color de fondo y compensar su posición. La celda .legend mostrará la fecha debajo de las barras, por lo que se ha posicionado como tal. .time se ubicará junto a la barra .distance, por lo que se ha modificado junto con un margen.

|_+_|

Hay muchos toques estilísticos adicionales, como rotar texto a lo largo de las barras, así que consulte el proyecto de ejemplo para obtener el código completo. ¡Bien, ahora para profundizar en la magia angular en nuestro HTML!

|_+_|

La parte clave de la creación del gráfico es el atributo ng-style que aplica el estilo utilizando valores de datos angulares. El estilo en ng-style se escribe como un objeto con pares clave-valor. También puede pasar aritmética y mezclar números y cadenas aquí.

tabletas samsung galaxy con s pen

Primero veamos el valor de la izquierda, que es el mismo en todas las celdas. Quiero organizar mis 10 barras de manera uniforme a lo largo del ancho de mi gráfico, por lo que las espaciaré en incrementos del 10 por ciento.

|_+_|

Para hacer esto, utilizo el valor de $ index que Angular asigna a todas las entradas en ng-repeat, subiendo desde cero en incrementos de uno, como en una matriz de JavaScript. Entonces, si ejecutamos las matemáticas, mi primera celda tendrá un valor a la izquierda de: 0% - $ index (0) x 10 (0) + '%' (la unidad como una cadena). Mi segunda celda de esta columna tendrá un valor a la izquierda del 10 por ciento, el siguiente 20 por ciento, y así sucesivamente. También puedo usar las matemáticas para variar las alturas de mis barras.

|_+_|

Aquí estoy tomando la distancia de mi trote individual y dividiéndola por la distancia máxima en la matriz. Luego multiplico esto por 300 (la altura de mi gráfico en px) y luego agrego mi unidad de px como una cadena.

Si consideramos lo que sucedería con la entrada de distancia más larga, el resultado de jog.distance / maxDistance sería uno (ya que son el mismo número), lo que daría un resultado de 300px. Esto significa que nuestra barra más grande siempre será la altura completa del gráfico, y las otras barras tendrán alturas relativas a esto.

Idealmente, la mayor parte de esta lógica se trasladaría a nuestro JavaScript, tal vez como un filtro angular personalizado, haciendo el HTML más limpio. Sin embargo, para facilitar la comprensión, en esta etapa lo usaremos directamente en el HTML.

cómo hacer un cartel en indesign

La última pieza de Angular data-vis magic es usar el atributo ng-class para aplicar una clase, en función de si se cumple una condición. En este caso, quiero agregar una clase de resaltado al trote más largo, así que agrego ng-class = '{resaltado: jog.distance === maxDistance}' a mielemento.

Conclusión

¡Nuestra primera visualización de datos angulares está completa! No es solo en los atributos de estilo donde se pueden usar los valores angulares. Podemos usarlos dentro de SVG en línea e incluso utilizarlos dentro de polyfills como el gradiente cónico () de Lea Verou para crear visualizaciones más complejas.

Palabras : Nick Moreton

Nick Moreton es profesor en la Universidad de la Ciudad de Birmingham. Sus áreas de especialización incluyen HTML, CSS, JavaScript, AngularJS y WordPress. Este artículo se publicó originalmente en el número 274 de la revista net

¿Me gusto esto? ¡Lee esto!