处理数据帧

的数据帧是一个柱状的数据结构,允许大量数据的查询效率。由于数据帧是一个核心概念为Grafana开发插件时,在本指南,我们将看看一些方法可以使用它们。

的DataFrame接口包含一个的名字和一个数组字段每个字段包含名称、类型和值字段。

注意:如果你想迁移现有的插件来使用数据帧格式,请参考迁移到数据帧。

创建一个数据帧

如果你建立一个数据源插件,那么你很可能想从外部API响应转换为数据帧。让我们看看如何做到这一点。

让我们先创建一个简单的数据帧,它代表一个时间序列。最简单的方法是使用创建一个数据帧toDataFrame函数。

/ /需要相同的长度。常量时间价值= (1599471973065,1599471973065);const numberValues = [12.3, 28.6];/ /创建数据帧的值。const帧= toDataFrame ({name:“http_requests_total”字段:[{名称:‘时间’,类型:FieldType。时间,价值观:时间价值},{名称:“价值”,类型:FieldType。数量、价值:numberValues},,});

注意:表示时间序列包含至少一个数据帧时间字段和一个数量字段。按照惯例,内置插件使用时间和价值作为字段名称包含时间序列数据的数据帧。

正如你所看到的从这个例子中,创建这样的数据帧,数据必须已经被存储为柱状数据。如果你已经有记录的形式一个对象数组,然后你可以通过它来toDataFrame。在这种情况下,toDataFrame试图猜测模式基于对象的类型和名称的数组。以这种方式创建复杂的数据帧,一定要确认你得到你期望的模式。

const系列=[{时间:1599471973065,值:12.3},{时间:1599471975729,值:28.6},);const帧= toDataFrame(系列);frame.name =“http_requests_total”;

读值从一个数据帧

当你正在构建一个面板插件,返回的数据帧数据源可从数据支撑你的面板组件。

函数SimplePanel({数据:道具}){const帧= data.series [0];/ /……}

在你开始阅读之前数据,想想您期望的数据。例如,想象一个时间序列需要至少一个时间字段和一个数字字段。

const timeField = frame.fields.find(= >字段(字段)。类型= = = FieldType.time);const valueField = frame.fields.find(= >字段(字段)。类型= = = FieldType.number);

其他类型的可视化可能需要多个维度。例如,气泡图,使用三个数值字段:x轴,轴,每个气泡的半径。在这种情况下,而不是硬编码字段名称,我们建议你让用户选择字段用于每个维度。

const x = frame.fields.find((领域)= > field.name = = = xField);const y = frame.fields.find((领域)= > field.name = = = yField);常量大小= frame.fields.find((领域)= > field.name = = = sizeField);(让我= 0;我< frame.length;我+ +){const行= [x ?。[我]值,y ?。值[我],大小? . values[我]];/ /……}

或者,您可以使用DataFrameView给你一个对象数组,包含帧中的每个字段属性。

const视图= new DataFrameView(框架);view.forEach((行)= > {console.log(行[选项。xField],行[选项。yField)、行(options.sizeField));});

从一个数据帧显示值

字段选项让用户控制Grafana显示数据帧中的数据。

应用领域选择一个值,使用显示方法对应的字段。结果包含信息,如颜色和后缀显示值时使用。

const valueField = frame.fields.find(= >字段(字段)。类型= = = FieldType.number);返回(< div > {valueField吗?valueField.values.map((价值)= > {const displayValue = valueField.display !(价值);返回(< p ={{颜色:displayValue风格。颜色}}> {displayValue。}{displayValue文本。后缀?displayValue。后缀:“}< / p >);零}}):< / div >);

应用领域选择一个字段的名称,使用getFieldDisplayName。

const valueField = frame.fields.find(= >字段(字段)。类型= = = FieldType.number);const valueFieldName = getFieldDisplayName (valueField,框架);