跳至主要内容

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

其他资源​

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

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