跳到主要内容

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);

其他资源​

格式化值的显示字符串，包括单位，可能包含前缀、后缀和其他自定义设置，例如文本本身的颜色。

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