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 行的数据行结果提供自身。它还会根据查询结果中的字段类型设置默认选项。

热图面板

此面板会对数据进行一些处理，如果生成任何警告，则会从提供中省略自身。

添加建议提供者​

其他资源​

添加建议提供者

其他资源