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. Мы будем рады получить ваши отзывы и помочь вам с любыми проблемами, с которыми вы столкнетесь!