可视化

您可以使用场景对象类VizPanel将可视化添加到场景中。

简单的`VizPanel`示例

new VizPanel({
    pluginId: 'timeseries',
    title: 'Time series',
    options: {
        legend: {
            showLegend: false,
        }
    },
    fieldConfig: {
        defaults: {
            unit: 'bytes',
            min: 0,
            custom: { lineWidth: 2 fillOpacity: 6 },
        },
        overrides: [],
    }
})

注意

前面示例中使用的pluginId，timeseries，指的是核心Grafana面板插件，它是时间索引数据的标准图形可视化。options和fieldConfig与您在查看面板检查抽屉中的**JSON**选项卡时在典型仪表板面板中看到的选项相同。要访问此选项卡，请在面板编辑菜单中单击**检查>面板JSON**。

数据

VizPanel使用sceneGraph.getData(model)调用查找并订阅具有SceneDataProvider对象的最近父级。这意味着VizPanel使用其自身级别上设置的$data，或者如果$data在任何父级上设置，则与其他兄弟姐妹和场景对象共享数据。

标题操作

VizPanel具有一个名为headerActions的属性，它可以是React.ReactNode或自定义SceneObject。如果您想在面板标题的右上角放置链接或按钮，此属性非常有用。例如

类型为VizPanelMenu的menu属性是可选的，设置时它会在面板的右上角定义一个菜单。菜单对象仅在渲染下拉菜单本身时才会激活。因此，添加动态菜单操作和链接的最佳方法是在附加到菜单的行为中添加它们。

new VizPanel({
  pluginId: 'timeseries',
  title: 'Time series',
  headerActions: (
    <LinkButton size="sm" variant="secondary" href="scenes/drilldown/url">
      Drilldown
    </LinkButton>
  ),
});

面板标题右上角的按钮可用于

到其他场景的链接
更改当前场景的按钮（例如，添加向下钻取页面）
更改可视化设置的RadioButtonGroup

对于LinkButton、Button和RadioButtonGroup，当您将它们放置在面板标题中时，请使用size="sm"。

标准Grafana可视化

Scenes提供了一个辅助API，PanelBuilders，用于构建标准Grafana可视化。其中包括

条形图
条形仪表
数据网格
火焰图
仪表
地理地图
热图
直方图
日志
新闻
节点图
饼图
统计
状态时间线
状态历史记录
表格
文本
时间序列
趋势
跟踪
XY 图

PanelBuilders API提供了对为上面列出的可视化构建VizPanel对象的支持，并支持面板选项和字段配置。

步骤 1. 导入`PanelBuilders` API

import { PanelBuilders } from '@grafana/scenes';

步骤 2. 配置标准可视化`VizPanel`对象

const myTimeSeriesPanel = PanelBuilders.timeseries().setTitle('My first panel');

步骤 3. 配置数据和时间范围

const data = new SceneQueryRunner({
  datasource: {
    type: 'prometheus',
    uid: '<PROVIDE_GRAFANA_DS_UID>',
  },
  queries: [
    {
      refId: 'A',
      expr: 'rate(prometheus_http_requests_total{}[5m])',
    },
  ],
  $timeRange: new SceneTimeRange({ from: 'now-5m', to: 'now' }),
});

myTimeSeriesPanel.setData(data);

步骤 4. 配置面板选项

myTimeSeriesPanel.setOption('legend', { asTable: true }).setOption('tooltip', { mode: TooltipDisplayMode.Single });

步骤 5. 配置标准选项

所有Grafana可视化都带有标准选项。PanelBuilders提供用于分别设置每个标准选项的方法。在官方Grafana文档中阅读有关标准选项的更多信息。

myTimeSeriesPanel.setDecimals(2).setUnit('ms');

步骤 6. 配置自定义字段配置

Grafana可视化提供了称为字段配置的自定义的可视化特定配置选项。在官方Grafana文档中阅读有关字段配置的更多信息。

使用setCustomFieldConfig方法设置所需字段配置属性的值。

myTimeSeriesPanel.setCustomFieldConfig('lineInterpolation', LineInterpolation.Smooth);

步骤 7. 配置覆盖

Grafana可视化允许您自定义特定字段或序列的可视化设置。这是通过添加一个覆盖规则来实现的，该规则针对一组特定的字段，并且每个规则可以定义多个选项。在官方Grafana文档中阅读有关覆盖的更多信息。

使用setOverrides方法设置所需的字段配置覆盖。对于标准选项，请使用override<OptionName>方法。对于自定义字段配置，请使用overrideCustomConfigProperty方法。

myTimeSeriesPanel.setOverrides((b) =>
  b.matchFieldsWithNameByRegex('/metrics/').overrideDecimals(4).overrideCustomFieldConfig('lineWidth', 5)
);

单个覆盖配置以匹配器配置开头。由于匹配器，Grafana知道应将覆盖应用于结果的哪一部分。以下匹配器可用

`matchFieldsWithName(name: string)`

根据提供的字段名称从基于选择字段。您使用此选择器添加到规则的属性仅应用于此单个字段。

`matchFieldsWithNameByRegex(regex: string)`

使用正则表达式指定要覆盖的字段。使用此选择器添加到规则的属性将应用于所有字段名称与正则表达式匹配的所有字段。

`matchFieldsByType(fieldType: FieldType)`

按类型选择字段，例如字符串、数字等。使用此选择器添加到规则的属性将应用于与所选类型匹配的所有字段。

`matchFieldsByQuery(refId: string)`

选择特定查询返回的所有字段，例如A、B或C。使用此选择器添加到规则的属性将应用于所选查询返回的所有字段。

`matchFieldsByValue(options: FieldValueMatcherConfig)`

选择与提供的value条件配置匹配的所有字段。此匹配器允许基于对序列的简化值执行的条件进行覆盖配置。例如，您可以为平均值高于提供值的序列配置覆盖。

`matchComparisonQuery(refId: string)`

选择比较查询返回的所有字段。使用此选择器添加到规则的属性将应用于为所选查询执行的比较查询返回的所有字段。阅读有关时间范围比较的更多信息。

步骤 8. 构建可视化

使用build方法生成已配置的VizPanel对象

const myPanel = myTimeSeriesPanel.build();

步骤 9. 将可视化添加到场景

使用布局创建一个场景，并将可视化作为布局子项添加

const scene = new EmbeddedScene({
  body: new SceneFlexLayout({
    children: [
      new SceneFlexItem({
        body: myPanel,
      }),
    ],
  }),
});

此构建的面板现在已准备好用于场景中。

自定义可视化

如果您想确定如何在 Grafana 应用插件中可视化数据，您可以通过两种方式进行操作。您始终可以选择创建自定义SceneObject，但您不会获得VizPanel提供的带有加载状态和其他功能的PanelChrome。如果您希望在面板框架内使用自定义可视化，并且该可视化应类似于场景中的其他面板，那么最好注册一个运行时面板插件。

步骤 1. 定义自定义面板选项和字段配置

interface CustomVizOptions {
  mode: string;
}

interface CustomVizFieldOptions {
  numericOption: number;
}

interface Props extends PanelProps<CustomVizOptions> {}

步骤 2. 定义渲染自定义`PanelPlugin`的 React 组件

export function CustomVizPanel(props: Props) {
  const { options, data } = props;

  return (
    <div>
      <h4>
        CustomVizPanel options: <pre>{JSON.stringify(options)}</pre>
      </h4>
      <div>
        CustomVizPanel field config: <pre>{JSON.stringify(data.series[0]?.fields[0]?.config)}</pre>
      </div>
    </div>
  );
}

步骤 3. 创建`PanelPlugin`实例并将其注册到 Scenes 库

import { sceneUtils } from '@grafana/scenes';

const myCustomPanel = new PanelPlugin<CustomVizOptions, CustomVizFieldOptions>(CustomVizPanel).useFieldConfig({
  useCustomConfig: (builder) => {
    builder.addNumberInput({
      path: 'numericOption',
      name: 'Numeric option',
      description: 'A numeric option',
      defaultValue: 1,
    });
  },
});

sceneUtils.registerRuntimePanelPlugin({ pluginId: 'my-scene-app-my-custom-viz', plugin: myCustomPanel });

步骤 4. 在场景中使用自定义面板

您现在可以在任何VizPanel中使用此 pluginId。请确保您指定的 pluginId 包含您的场景应用程序名称，并且不太可能与其他 Scenes 应用程序冲突。

const data = new SceneQueryRunner({
  datasource: {
    type: 'prometheus',
    uid: 'gdev-prometheus',
  },
  queries: [
    {
      refId: 'A',
      expr: 'rate(prometheus_http_requests_total{}[5m])',
    },
  ],
  $timeRange: new SceneTimeRange({ from: 'now-5m', to: 'now' }),
});

return new EmbeddedScene({
  $data: data,
  body: new SceneFlexLayout({
    children: [
      new SceneFlexItem({
        body: new VizPanel({
          pluginId: 'my-scene-app-my-custom-viz',
          options: { mode: 'my-custom-mode' },
          fieldConfig: {
            defaults: {
              unit: 'ms',
              custom: {
                numericOption: 100,
              },
            },
            overrides: [],
          },
        }),
      }),
    ],
  }),
});

有关更多信息，请参阅官方的构建面板插件教程。请记住，对于 Scenes 运行时面板插件，您不需要面板插件的 plugin.json 文件，因为它不会是您可以用在仪表板中的独立插件。您只能在您的 Scenes 应用程序内部引用该插件。

源代码

查看示例源代码

可视化

简单的VizPanel示例​

数据​

标题操作​

菜单​

标准Grafana可视化​

步骤 1. 导入PanelBuilders API​

步骤 2. 配置标准可视化VizPanel对象​

步骤 3. 配置数据和时间范围​

步骤 4. 配置面板选项​

步骤 5. 配置标准选项​

步骤 6. 配置自定义字段配置​

步骤 7. 配置覆盖​

matchFieldsWithName(name: string)​

matchFieldsWithNameByRegex(regex: string)​

matchFieldsByType(fieldType: FieldType)​

matchFieldsByQuery(refId: string)​

matchFieldsByValue(options: FieldValueMatcherConfig)​

matchComparisonQuery(refId: string)​

步骤 8. 构建可视化​

步骤 9. 将可视化添加到场景​

自定义可视化​

步骤 1. 定义自定义面板选项和字段配置​

步骤 2. 定义渲染自定义PanelPlugin的 React 组件​

步骤 3. 创建PanelPlugin实例并将其注册到 Scenes 库​

步骤 4. 在场景中使用自定义面板​

源代码​