转换值映射和范围映射

使用 AngularJS SDK 构建的 Grafana 插件可以使用值映射和范围映射编辑器。将插件更新到 React 时，需要将这些映射的配置选项转换为新格式。

添加新的内置编辑器

在插件的 module.ts 文件中，添加 Mappings 选项以启用新的编辑器

.useFieldConfig({
    standardOptions: {
      [FieldConfigProperty.Mappings]: {},
    },
  })

请参阅 配置值映射 文档，了解新组件的说明。

将映射转换为新格式

使用下面显示的辅助函数更新插件的配置。

import { PanelModel, convertOldAngularValueMappings, ValueMapping } from '@grafana/data';

export const PolystatPanelMigrationHandler = (panel: PanelModel<PolystatOptions>): Partial<PolystatOptions> => {
  // convert range and value maps
  const newMaps = migrateValueAndRangeMaps(panel);
  panel.options.fieldConfig = {
    defaults: {
      mappings: newMaps,
    },
    overrides: [],
  };
  //@ts-ignore
  delete panel.mappingType;
  //@ts-ignore
  delete panel.rangeMaps;
  //@ts-ignore
  delete panel.valueMaps;
  // return new settings
  return panel.options;
};

export const migrateValueAndRangeMaps = (panel: any) => {
  // value maps first
  panel.mappingType = 1;
  let newValueMappings: ValueMapping[] = [];
  if (panel.valueMaps !== undefined) {
    newValueMappings = convertOldAngularValueMappings(panel);
  }
  // range maps second
  panel.mappingType = 2;
  let newRangeMappings: ValueMapping[] = [];
  if (panel.rangeMaps !== undefined) {
    newRangeMappings = convertOldAngularValueMappings(panel);
  }
  // append together
  const newMappings = newValueMappings.concat(newRangeMappings);
  // get uniques only
  return [...new Map(newMappings.map((v) => [JSON.stringify(v), v])).values()];
};

提示

请务必清理旧设置，以免重复迁移。

有关其他示例，请参阅 此示例。