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

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.

¿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.

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.

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.

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.