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

Stat 面板

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

热图面板

此面板对数据进行一些处理，如果生成任何警告，它将避免自身被提供。

添加建议提供程序​

其他资源​

添加建议提供程序

其他资源