跳到主内容

Angular 到 React：从 kbn 转换

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

特别是您的插件可能会使用这些 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);

有几种方法可以格式化值以在文本输出中包含单位，每种方法都针对不同的场景。

迭代 frame 的字段以获取所有值字段，然后处理每个字段，如下例所示。这是一个基本示例；通常需要更多代码来包含 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 附带的面板中，有许多将 frame 处理为格式化文本输出的示例。在 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);

额外资源​

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

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