跳转到主要内容

从 Angular 到 React：从 kbn 转换

kbn 包通常用于在基于 Angular 的 Grafana 插件中提供格式化的数据源输出。但是，您可能需要从 kbn 包迁移，因为它不再来自 Grafana 核心库。

具体来说，您的插件可能使用以下 kbn API 调用

getUnitFormats();
valueFormats();
roundValue();

转换为新方法​

从 getUnitFormats 转换​

对于使用 kbn.getUnitFormats() 的插件，新的方法来自 @grafana/data，名为 getValueFormats()。

此方法返回一个包含分类单位格式的对象，而不是单位列表，应相应处理。

通常，配置编辑器可以直接使用默认的单位格式提供程序。但是，如果您需要一个单位选择器，您可以使用来自 @grafana/ui 的 UnitPicker 组件。此组件的一个例子是 Grafana 设计系统单位选择器。

从 valueFormats 转换​

在 Angular 插件中，一种常见的模式是使用 kbn 获取特定单位的格式化函数，然后使用一些参数调用该函数，如下所示

const formatFunc = kbn.valueFormats[this.panel.format];
data.valueFormatted = formatFunc(data.value, decimalInfo.decimals, decimalInfo.scaledDecimals);

将值格式化为包括单位以进行文本输出的方法有多种，每种方法针对不同的场景。

遍历帧的字段以获取所有值字段，然后按以下示例处理每个字段。这是一个基本示例；通常需要更多的代码来包括 valueMappings 和其他覆盖。

import { formattedValueToString, getFieldDisplayName, getValueFormat, reduceField } from '@grafana/data';

const valueFields: Field[] = [];
for (const aField of frame.fields) {
  if (aField.type === FieldType.number) {
    valueFields.push(aField);
  }
}
for (const valueField of valueFields) {
  const standardCalcs = reduceField({ field: valueField!, reducers: ['bogus'] });
  const result = getValueFormat(valueField!.config.unit)(operatorValue, maxDecimals, undefined, undefined);
  const valueFormatted = formattedValueToString(result);
}

Grafana附带的面板中有许多将帧处理为格式化文本输出的示例。在 GitHub 仓库 中搜索这些函数，以找到此类示例。

  • formattedValueToString
  • getValueFormat
  • reduceField

从 roundValue 转换​

您的插件可能包含如下代码

data.valueRounded = kbn.roundValue(data.value, decimalInfo.decimals);

将此代码转换为如下

import { roundDecimals } from '@grafana/data';
const valueRounded = roundDecimals(data.value, decimalInfo.decimals);

其他资源​

包括单位在内的显示字符串的值格式化可能包括前缀、后缀以及诸如文本本身的颜色等其他自定义设置。

在实现新方法时，可以进行许多自定义。以下是一些您可以参考的示例：