从 Angular 迁移到 React：添加建议供应商

您可以将建议供应商添加到检查来自面板的查询数据，并为检测到的数据类型建议使用插件。本指南提供了如何操作的说明，以及相关示例链接。

一个好的例子是 stat 面板，它检查查询结果并为自己在单个系列中排名“高”，在多个系列（甚至没有）中排名“低”。

添加建议供应商

以下是一个示例建议供应商，它作为 module.ts 的一部分显示

import { MyDataSuggestionsSupplier } from './suggestions';
...

.setSuggestionsSupplier(new MyDataSuggestionsSupplier());

以下是一个从 polystat 派生的示例建议供应商

import { VisualizationSuggestionsBuilder } from '@grafana/data';
import { MyOptions } from './types';

export class MyDataSuggestionsSupplier {
  getSuggestionsForData(builder: VisualizationSuggestionsBuilder) {
    const { dataSummary: ds } = builder;

    if (!ds.hasData) {
      return;
    }
    if (!ds.hasNumberField) {
      return;
    }

    const list = builder.getListAppender<MyOptions, {}>({
      name: 'MyPanel',
      pluginId: 'myorg-description-panel',
      options: {},
    });

    list.append({
      name: 'MyPanel',
    });
  }
}

注意

在创建建议供应商时，请确保插件可以实际为提供的数据渲染内容。

如果建议供应商错误地将插件排名很高，最终结果通常会显示空面板和/或错误消息。

最好只为与插件可以处理和可视化的已知标准匹配的查询数据提供插件。

其他资源

参考这些建议供应商以获取进一步定制的灵感

饼图面板

饼图面板检查查询是否返回超过30行，即使它可以显示数据，由于数据量过大，几乎无法阅读，因此不会将自己作为可视化选项提供。

统计面板

与饼图面板类似，此插件在数据行结果少于10行时提供自身。它还会根据查询结果中的字段类型设置默认选项。

热力图面板

此面板对数据进行一些处理，如果生成了任何警告，则不会将其提供。

添加建议供应商​

其他资源​

添加建议供应商

其他资源