Giraffe — это библиотека визуализации на основе React с открытым исходным кодом, которая используется для реализации пользовательского интерфейса InfluxDB v2. Он использует умные алгоритмы для решения задачи визуализации невероятно большого объема данных, которые InfluxDB может принимать и запрашивать. Мы только что опубликовали документацию, описывающую, как разработчики могут использовать эту библиотеку, и я попытался создать сопутствующее руководство, чтобы еще больше проиллюстрировать возможности этой библиотеки. В этом руководстве показано, как можно использовать Giraffe в сочетании с Клиентом JavaScript для построения линейного графика в браузере. Репозиторий, сопровождающий это руководство, можно найти здесь.

Учебные предположения

Этот проект был инициализирован с помощью Create React App. Акцент в этом руководстве сделан на том, как использовать Giraffe с клиентом JS, а не на том, как создать приложение React. По этой причине я создаю очень простой статический сайт. Мы будем строить линейный график, который визуализирует использование оперативной памяти на нашем локальном компьютере. Наш сайт будет выглядеть примерно так:

В этом руководстве предполагается, что вы настроили Telegraf для сбора системной статистики с вашего компьютера. В этом руководстве также предполагается, что вы хорошо знакомы с клиентом JavaScript и знаете, как запрашивать InfluxDB. Если вы новичок в клиенте, я рекомендую вам ознакомиться с этим руководством Начало работы с клиентом JavaScript.

Шаблон

Нам нужно импортировать наши компоненты.

import React from "react";
import { useState } from "react";
import "./App.css";
import { InfluxDB} from "@influxdata/influxdb-client";
import {
 Plot,
 timeFormatter,
 NINETEEN_EIGHTY_FOUR,
 fromFlux,
} from "@influxdata/giraffe";

Нам также нужно указать наши valueAxisLabel или единицы нашей визуализации. Это будет использоваться на втором шаге ниже как часть конфигурации линейного графика.

const valueAxisLabel = "GB";

Шаг первый: запрос InfluxDB и преобразование результата

Создайте функцию fetchData, которая запрашивает наш экземпляр и сохраняет результат в памяти. Он также преобразует необработанный результат Flux Object от клиента в аннотированный CSV — формат ввода для Giraffe. Для начала укажите все параметры авторизации для клиента, а также желаемый запрос Flux.

const fetchData = (setMethod, setFetching) => {
 const url = "http://localhost:9999";
 const bucket = "my-bucket";
 const org = "my-org";
 const token = $my-token;
 const influxDB = new InfluxDB({
   url,
   token,
 });
 const fluxQuery =
 'from(bucket: "my-bucket")\
 |> range(start: -5m)\
 |> filter(fn: (r) => r["_measurement"] == "cpu")\
 |> filter(fn: (r) => r["_field"] == "usage_system")\
 |> filter(fn: (r) => r["cpu"] == "cpu-total")'
 console.log("\n*** QUERY ***");
 const queryApi = influxDB.getQueryApi(org);

Метод queryLines выполняет запрос и получает строки результата (включая пустые строки и строки аннотаций). Создайте пустую строку csv, выполните итерацию по строкам и вставьте в нее строки.

let table = [];
 let csv = "";
 
 queryApi.queryLines(fluxQuery, {
   next(line) {
     csv = `${csv}${line}\n`;
   },
 
   error(error) {
     setFetching("error");
     console.log("QUERY FAILED", error);
   },
   complete() {
     console.log(table);
     console.log("csv");

Функция fromFlux() преобразует ряд аннотированных Flux ответов в формате CSV в единую плоскую Таблицу, которую Giraffe может преобразовать в визуализацию.

console.log(csv);
     setMethod(fromFlux(csv));
     setFetching("fetched");
   },
 });
};

Кроме того, создайте пустой массив table перед созданием переменной csv. Это будет обновлено, как только клиент завершит запрос и получит результат.

Шаг второй: обновите константу таблицы и создайте конфигурацию для визуализации.

Обработкой состояния будет заниматься наша функция default.

export default (props) => {
 console.log("Updating Component");
 console.log(props);

Мы обновим таблицу после получения данных.

const [table, setTable] = useState(null);
 const [fetching, setFetching] = useState("unfetched");
 let plotGraph = <p> Pending </p>;
 let scatterGraph = <p> Pending </p>;
 switch (fetching) {
   case "unfetched":
     console.log("unfetched");
     setFetching("fetching");
     fetchData(setTable, setFetching);
     break;
 
   case "error":
     console.log("error");
     plotGraph = <p> Error </p>;
     scatterGraph = <p> Error </p>;
     break;
 
   case "fetching":
     console.log("fetching");
     plotGraph = <p> Fetching </p>;
     scatterGraph = <p> Fetching </p>;
     break;
 
   case "fetched":
     console.log("fetched");
     console.log(table);

Теперь мы можем создать нашу конфигурацию линейного графика. Для каждой визуализации требуется общая конфигурация. Соответствующие типы слоев задают тип визуализации (т. е. линия, гистограмма, разброс и т. д.).

const lineConfig = {
       table: table.table,
       valueFormatters: {
         _time: timeFormatter({
           timeFormat: "UTC",
           format: "HH:mm",
         }),
         _value: (val) =>
           `${val.toFixed(2)}${
             valueAxisLabel ? ` ${valueAxisLabel}` : valueAxisLabel
           }`,
       },
       xScale: "linear",
       yScale: "linear",
       legendFont: "12px sans-serif",
       tickFont: "12px sans-serif",
       showAxes: true,
       layers: [
         {
           type: "line",
           x: "_time",
           y: "_value",
           fill: [],
           position: "overlaid",
           interpolation: "monotoneX",
           colors: NINETEEN_EIGHTY_FOUR,
           lineWidth: 1,
           hoverDimension: "auto",
           shadeBelow: true,
           shadeBelowOpacity: 0.1,
         },
       ],
     };

Объяснение важных параметров конфигурации:

  • _time: Используйте timeFormater(), чтобы отформатировать значение времени в таблице как строку, обращенную к пользователю.
  • _value: Отформатируйте значение данных, которые мы хотим отобразить, чтобы указать количество десятичных точек, которые должны быть включены в наши оси и точки данных.
  • xScale и yScale: Масштаб — это масштаб форматирования оси. “Log” также поддерживается.
  • legendFont и tickFont: определите тип шрифта.
  • layers: Тип слоя. Список типов слоев можно найти здесь. Пожалуйста, взгляните на настройки слоя по умолчанию здесь.
  • type: Укажите нужный тип визуализации.
  • x и y: укажите значения x и y соответственно.
  • colors: Все цвета можно найти здесь.

Интерес сообщества к Giraffe и InfluxDB

Моей мотивацией для написания этого сообщения в блоге является оценка интереса сообщества к Giraffe. Если вы решите изучить библиотеку, поделитесь своими мыслями, опасениями или вопросами в разделе комментариев, на нашем сайте сообщества или на нашем канале Slack. Мы будем рады получить ваши отзывы и помочь вам с любыми проблемами, с которыми вы столкнетесь!