Cómo creamos las bibliotecas Giraffe para datos de series temporales

Rate this content
Bookmark

En esta charla, Zoe Steinkamp hablará sobre Giraffe, una biblioteca de visualización de código abierto que impulsa las visualizaciones de datos en la interfaz de usuario de InfluxDB 2.0. Giraffe se puede utilizar para mostrar sus datos dentro de su propia aplicación y es compatible con Fluxlang. Utiliza algoritmos para manejar la visualización de grandes volúmenes de datos de series temporales que InfluxDB puede ingestar y consultar.

7 min
24 Jun, 2021

Video Summary and Transcription

Presentaré la biblioteca de gráficos de series temporales de código abierto GIRAFFE de Influx Data, que impulsa las visualizaciones del panel de control de InfluxDB y el Explorador de datos. GIRAFFE es una biblioteca de JavaScript basada en React para gráficos y mapeo, que admite varios tipos de gráficos y fuentes de datos. Ofrece un entorno de pruebas con ejemplos de diferentes gráficos y proporciona enlaces a GitHub, guías de inicio rápido, demos y ejemplos de código.

Available in English

1. Introducción a GIRAFFE

Short description:

Presentaré la biblioteca de gráficos de series temporales de código abierto GIRAFFE de Influx Data. GIRAFFE alimenta las visualizaciones del panel de control de InfluxDB y del Explorador de Datos. Se puede utilizar en aplicaciones externas y es especialmente útil para mostrar datos de energía solar.

Hola, mi nombre es Zoe Seinkamp y soy ingeniera de software desde hace más de cinco años y llevo aproximadamente un año y medio en Influx Data, mi empresa. Presentaré la biblioteca de gráficos de series temporales de código abierto GIRAFFE de Influx Data. Utilizamos esta biblioteca en nuestra aplicación para mostrar los datos de series temporales que ingresan nuestros usuarios, pero recientemente hemos estado trabajando en mejorar GIRAFFE para que se pueda utilizar más fácilmente fuera de nuestro proyecto Influx. Explicaré brevemente cómo se utiliza y mostraré algunos ejemplos de los gráficos que admite, así como el código que necesitarías para ejecutarlo localmente.

Pero GIRAFFE también tiene una gran cantidad de documentación y algunas aplicaciones de muestra a las que puedes hacer referencia. También he incluido en mi presentación enlaces a todas ellas. Así que vamos a empezar.

¿Por qué GIRAFFE? Alimenta las visualizaciones del panel de control de InfluxDB y del Explorador de Datos en todas las versiones de InfluxDB. Tenemos una InfluxDB 1 y una InfluxDB 2. Los desarrolladores pueden reutilizar las visualizaciones de InfluxDB en aplicaciones externas como sitios web, aplicaciones móviles u otras aplicaciones personalizadas. Por lo tanto, no es raro que trabajemos con paneles solares como cliente, tenemos algunas empresas de paneles solares. Ellos pondrían sus datos en InfluxDB y luego los recuperarían para mostrarlos a sus clientes. Así que ese es un ejemplo de cómo se podría utilizar, envías tus datos de energía solar a Tesla. Ellos lo reciben. Lo ponen en nosotros y luego te lo envían de vuelta para mostrarte si tu panel solar está funcionando bien o no tan bien.

2. Explorando GIRAFFE: Una biblioteca de gráficos JS versátil

Short description:

GIRAFFE es una biblioteca de JavaScript de código abierto basada en React para gráficos y mapeo. Toma CSV anotado como entrada y admite varios tipos de gráficos. Los datos se pueden obtener utilizando FluxQuery o el cliente JavaScript de InfluxDB. La visualización implica un gráfico, una configuración y capas. La biblioteca se puede llamar desde cualquier aplicación React o JavaScript.

¿Qué es GIRAFFE? Es un software de gráficos y mapeo. Es una biblioteca de JavaScript basada en el marco de trabajo React. Es completamente de código abierto y está disponible en nuestro repositorio de GitHub. Así que puedes verlo, puedes tocarlo. Puedes jugar con él. Puedes cambiarlo. Lo tenemos todo.

Toma un CSV anotado como entrada. El tipo de salida de las consultas InfluxQL/Flux es transmisible en streaming. Contiene encabezados anotados denotados con el grupo de hashtag, el conjunto de hashtag y el hashtag predeterminado. Voy a mostrar un ejemplo de esto en la siguiente diapositiva. No voy a profundizar demasiado en esto, pero básicamente el grupo contiene entradas verdaderas o falsas, el conjunto de datos describe el tipo de datos y el predeterminado es la tabla real. Como dije, solo voy a mostrar un ejemplo porque es un poco difícil de explicar los datos CSV anotados. No es realmente necesario. También tenemos un ejemplo aquí que utiliza esto en nuestra documentación de Dirac.

Aquí tienes algunos de los gráficos que Dirac admite. Tenemos la banda, el medidor, el gráfico simple, el gráfico de líneas, y todas esas cosas buenas. En realidad, tenemos algunas variaciones diferentes de gráficos de líneas. Gráfico con una única estadística, un mapa de calor, un histograma, un gráfico de dispersión, una única estadística sin gráfico, y una tabla, que puede recordarte a lo que ves normalmente cuando vas a una empresa de bases de datos, una tabla. También tenemos algunos otros gráficos que vendrán próximamente, que serán las velas y el mapa, pero no los voy a mostrar porque obviamente aún no están en producción.

Algunos conceptos básicos de GIRAFFE para obtener los datos es qué tipo de datos se utiliza como entrada. Podemos usar FluxQuery, que se llama a través de una API directa, o el cliente InfluxDB, que es nuestro cliente JavaScript, lo que facilita mucho a las personas que utilizan JavaScript para traer esos datos. Los conceptos básicos de visualización son que tiene un gráfico, que es un elemento React definido en la biblioteca de GIRAFFE, una configuración, que es una propiedad de ese gráfico, que contiene datos CSV. Y finalmente, capas, que es una propiedad de la configuración, que básicamente es cómo decides qué tipo de gráfico quieres mostrar. Voy a mostrar un ejemplo de esto nuevamente.

Llamar a GIRAFFE desde aplicaciones externas. Técnicamente, cualquier aplicación React o JavaScript puede llamar a la biblioteca de GIRAFFE. Proporcionamos códigos de muestra sobre cómo hacer esto y varios tipos de formas en el repositorio de GitHub de GIRAFFE. También puedes hacerlo con una simple página HTML. Nuevamente, voy a mostrar este ejemplo en realidad, porque creo que es realmente genial para tener una idea aproximada de cómo funciona, pero actualmente no admitimos la representación del lado del servidor.

3. Trabajando con Gráficos Giraffe

Short description:

Trabajando con los gráficos de Giraffe, cada gráfico requiere la propiedad de configuración. Tienes tu gráfico X e Y, tus colores, tu tema, tu tipo. Para obtener datos en Giraffe utilizando nuestro cliente InfluxDB, solo necesitas tu URL, token, ID de organización y bucket. Giraffe tiene un sandbox con 30 a 40 ejemplos de diferentes tipos de gráficos.

Un detalle rápido, al trabajar con los gráficos de Giraffe, cada gráfico requiere la propiedad de configuración. Como puedes ver, obtenemos nuestros data del CSV de Flux. data es, ya sabes, la tabla Flux. Las capas de línea son la capa de línea. y el CSV data real. Bastante sencillo.

Y luego, tienes dos ejemplos de esta configuración, pero básicamente tienes las capas

La propiedad de la capa de línea real es cómo defines, ya sabes, en tu gráfico. Vas a tener un montón de opciones. Tienes tu gráfico X e Y, tus colores, tu tema, tu tipo. Como dije, tenemos varios tipos de línea. Tenemos muchos tipos diferentes de gráficos que simplemente no mostré un ejemplo porque tenemos tantos. Y como dije, aquí está el ejemplo del que estaba hablando. Este es muy sencillo. Estás codificando directamente los data aquí. Sabes, este es tu data X. Este es tu data Y. Es muy sencillo. Es muy directo, pero creo que realmente muestra lo fácil que es usar Giraffe. Sabes, no se necesita mucho para ponerlo en marcha y no tienes que usarlo con InfluxDB. Podemos ser un proveedor de series temporales, pero, ya sabes, Giraffe es de código abierto. Puedes usarlo como mejor te parezca.

Obtener data en Giraffe utilizando nuestro cliente InfluxDB, así que no incluí el de la API porque, ya sabes, esta es una charla de JavaScript. Así que decidí usar el cliente de JavaScript. Básicamente, solo necesitas tu URL, tu token, tu ID de organización y tu bucket, que son todas cosas que encontrarías en el cliente de InfluxDB. A partir de ahí, simplemente te conectas, envías tu consulta que básicamente dice, Oye, quiero los data de, ya sabes, el período de tiempo, las fechas, etc., etc. Quiero cualquier cosa por encima de 500, cualquier cosa por debajo de 500, algunas consultas se vuelven muy intensas. No puse un ejemplo aquí porque puede volverse muy largo, pero básicamente estás diciendo Quiero esta cantidad de data, por favor, dámela en un formato CSV anotado para poder mostrarlo en mi aplicación Giraffe.

Ahora, lo importante que también quería mencionar es que Giraffe tiene un sandbox. Nuestro sandbox se basa en storybook. Así que, ya sabes, entras aquí, pones en marcha el storybook, que es bastante sencillo. Solo ejecutas un comando muy simple como yarn start. Y desde aquí puedes ver en realidad, creo que tenemos alrededor de 30 a 40 ejemplos de diferentes tipos de gráficos aquí dentro.

4. Explorando el Sandbox y los Enlaces

Short description:

Puedes ver el código y lo que estamos haciendo en nuestro sandbox. Algunas características aún no están en producción, pero puedes explorar las opciones disponibles para tus gráficos. Aunque no todo está completamente funcional, la mayoría de las cosas son estables y funcionales. Proporcionamos enlaces a nuestro repositorio de GitHub, guías de inicio rápido, demos, ejemplos de código y varios gráficos de storybook.

Y de nuevo, puedes ver el código, puedes ver lo que estamos haciendo. Algunas de estas cosas ni siquiera están actualmente en producción y en FluxDB. Así que es una excelente manera de ver en qué estamos trabajando. Como ahora mismo, estoy mostrando el de mapas, aún no hemos terminado, pero está aquí. Así que eso es solo algo a tener en cuenta. Si decides explorar nuestro sandbox y ver todos nuestros tipos de gráficos, sabes, puedes ver todas las opciones que tienes para tus gráficos también.

El de mapas no tiene tantas opciones, pero algunos de estos tienen como 20 opciones para, sabes, jugar con ellas al margen. Solo ten en cuenta que también es nuestro sandbox. Así que no todo está al 100% funcional, pero diría que la mayoría de las cosas lo están, sabes, bastante estables, bastante funcionales, ya sabes, las hemos estado usando durante años y cosas así.

Y luego estos son solo algunos enlaces generales que he puesto. Así que tenemos, ya sabes, el repositorio de GitHub, las guías de inicio rápido, algunas de nuestras demos, algunos de nuestros ejemplos de código, el ATC anti que mencionamos. Y luego de nuevo, estos son solo todos los diferentes gráficos de storybook. Y esto ni siquiera es todo. Esto es solo lo básico. Bueno, y eso es todo.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Node Congress 2022Node Congress 2022
26 min
It's a Jungle Out There: What's Really Going on Inside Your Node_Modules Folder
Top Content
Do you know what’s really going on in your node_modules folder? Software supply chain attacks have exploded over the past 12 months and they’re only accelerating in 2022 and beyond. We’ll dive into examples of recent supply chain attacks and what concrete steps you can take to protect your team from this emerging threat.
You can check the slides for Feross' talk here.
Node Congress 2022Node Congress 2022
34 min
Out of the Box Node.js Diagnostics
In the early years of Node.js, diagnostics and debugging were considerable pain points. Modern versions of Node have improved considerably in these areas. Features like async stack traces, heap snapshots, and CPU profiling no longer require third party modules or modifications to application source code. This talk explores the various diagnostic features that have recently been built into Node.
You can check the slides for Colin's talk here. 
JSNation 2023JSNation 2023
22 min
ESM Loaders: Enhancing Module Loading in Node.js
Native ESM support for Node.js was a chance for the Node.js project to release official support for enhancing the module loading experience, to enable use cases such as on the fly transpilation, module stubbing, support for loading modules from HTTP, and monitoring.
While CommonJS has support for all this, it was never officially supported and was done by hacking into the Node.js runtime code. ESM has fixed all this. We will look at the architecture of ESM loading in Node.js, and discuss the loader API that supports enhancing it. We will also look into advanced features such as loader chaining and off thread execution.
JSNation Live 2021JSNation Live 2021
19 min
Multithreaded Logging with Pino
Top Content
Almost every developer thinks that adding one more log line would not decrease the performance of their server... until logging becomes the biggest bottleneck for their systems! We created one of the fastest JSON loggers for Node.js: pino. One of our key decisions was to remove all "transport" to another process (or infrastructure): it reduced both CPU and memory consumption, removing any bottleneck from logging. However, this created friction and lowered the developer experience of using Pino and in-process transports is the most asked feature our user.In the upcoming version 7, we will solve this problem and increase throughput at the same time: we are introducing pino.transport() to start a worker thread that you can use to transfer your logs safely to other destinations, without sacrificing neither performance nor the developer experience.

Workshops on related topic

Node Congress 2023Node Congress 2023
109 min
Node.js Masterclass
Workshop
Have you ever struggled with designing and structuring your Node.js applications? Building applications that are well organised, testable and extendable is not always easy. It can often turn out to be a lot more complicated than you expect it to be. In this live event Matteo will show you how he builds Node.js applications from scratch. You’ll learn how he approaches application design, and the philosophies that he applies to create modular, maintainable and effective applications.

Level: intermediate
Node Congress 2023Node Congress 2023
63 min
0 to Auth in an Hour Using NodeJS SDK
WorkshopFree
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.JS backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.
Table of contents- A quick intro to core authentication concepts- Coding- Why passwordless matters
Prerequisites- IDE for your choice- Node 18 or higher
JSNation 2023JSNation 2023
104 min
Build and Deploy a Backend With Fastify & Platformatic
WorkshopFree
Platformatic allows you to rapidly develop GraphQL and REST APIs with minimal effort. The best part is that it also allows you to unleash the full potential of Node.js and Fastify whenever you need to. You can fully customise a Platformatic application by writing your own additional features and plugins. In the workshop, we’ll cover both our Open Source modules and our Cloud offering:- Platformatic OSS (open-source software) — Tools and libraries for rapidly building robust applications with Node.js (https://oss.platformatic.dev/).- Platformatic Cloud (currently in beta) — Our hosting platform that includes features such as preview apps, built-in metrics and integration with your Git flow (https://platformatic.dev/). 
In this workshop you'll learn how to develop APIs with Fastify and deploy them to the Platformatic Cloud.
JSNation Live 2021JSNation Live 2021
156 min
Building a Hyper Fast Web Server with Deno
WorkshopFree
Deno 1.9 introduced a new web server API that takes advantage of Hyper, a fast and correct HTTP implementation for Rust. Using this API instead of the std/http implementation increases performance and provides support for HTTP2. In this workshop, learn how to create a web server utilizing Hyper under the hood and boost the performance for your web apps.
React Summit 2022React Summit 2022
164 min
GraphQL - From Zero to Hero in 3 hours
Workshop
How to build a fullstack GraphQL application (Postgres + NestJs + React) in the shortest time possible.
All beginnings are hard. Even harder than choosing the technology is often developing a suitable architecture. Especially when it comes to GraphQL.
In this workshop, you will get a variety of best practices that you would normally have to work through over a number of projects - all in just three hours.
If you've always wanted to participate in a hackathon to get something up and running in the shortest amount of time - then take an active part in this workshop, and participate in the thought processes of the trainer.
TestJS Summit 2023TestJS Summit 2023
78 min
Mastering Node.js Test Runner
Workshop
Node.js test runner is modern, fast, and doesn't require additional libraries, but understanding and using it well can be tricky. You will learn how to use Node.js test runner to its full potential. We'll show you how it compares to other tools, how to set it up, and how to run your tests effectively. During the workshop, we'll do exercises to help you get comfortable with filtering, using native assertions, running tests in parallel, using CLI, and more. We'll also talk about working with TypeScript, making custom reports, and code coverage.