Angular 到 React：添加一个建议提供者

您可以添加一个建议提供者，以检查来自面板的查询数据，并根据检测到的数据类型建议使用该插件。本指南提供了具体操作说明以及相关示例的链接。

一个很好的例子是 stat 面板，它检查查询结果（resukts），对于单个系列将其排名设为“高”，对于多个系列（甚至没有）则设为“低”。

添加建议提供者

这是作为 module.ts 一部分的建议提供者（suppler）示例

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 行，如果超过则不提供自身作为可视化选项，即使它可以显示数据，但几乎无法阅读。

Stat 面板

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

热力图面板

此面板会对数据进行一些处理，如果生成任何警告，则不会提供自身作为选项。

添加建议提供者​

附加资源​

添加建议提供者

附加资源