长颈鹿可视化库和InfluxDB

作者：Anais Dotis-Georgiou / 产品，用例，开发者
2020年5月27日

导航到

Giraffe 是一个开源的基于React的可视化库，用于实现InfluxDB v2的用户界面。它使用智能算法来处理InfluxDB可以接收和查询的极大量数据的可视化挑战。我们刚刚发布了文档，描述了开发者如何利用这个库，我还尝试创建了一个配套教程来进一步说明这个库的强大功能。这个教程演示了如何结合使用Giraffe和JavaScript客户端在浏览器中构建折线图。本教程所伴随的仓库可以在这里找到。

教程假设

该项目使用 Create React App 初始化。本教程的重点是如何使用Giraffe与JS客户端结合，而不是如何创建React App。因此，我将生成一个非常简单的静态网站。我们将构建一个可视化本地机器RAM使用的折线图。我们的网站看起来可能像这样

Giraffe InfluxDB visualization

本教程假设您已经配置了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对象结果转换成注解CSV - Giraffe的输入格式。要开始，指定客户端的所有授权参数以及我们想要的Flux查询。

const fetchData = (setMethod, setFetching) => {
 const url = "https://127.0.0.1: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");
   },
 });
};

此外，在创建csv 变量之前，创建一个空的table数组。这将在一旦客户端完成查询并获取了结果后更新。

第二步：更新表格常量并创建可视化配置

状态处理将由我们的函数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 频道 中分享您的想法、关注点或问题。我们很高兴得到您的反馈，并帮助您解决遇到的问题！