时间范围比较

Scenes 自带 SceneTimeRangeCompare 对象，允许使用与 SceneTimeRange 对象提供的时间范围不同的时间范围运行 SceneQueryRunner 查询。使用 SceneTimeRangeCompare 对象，您可以设置希望查询针对的比较时间窗口。这允许在可视化中显示来自第二个时间范围的数据。

在 Scene 中使用 `SceneTimeRangeCompare`

创建一个带有时间范围和查询运行器的场景

首先创建一个包含 SceneTimeRange 和 SceneQueryRunner 的场景

const queryRunner = new SceneQueryRunner({
  datasource: {
    type: 'prometheus',
    uid: 'gdev-prometheus',
  },
  queries: [
    {
      refId: 'A',
      expr: 'rate(prometheus_http_requests_total{}[5m])',
    },
  ],
});

const scene = new EmbeddedScene({
  $data: queryRunner,
  $timeRange: new SceneTimeRange({ from: 'now-5m', to: 'now' }),
  body: new SceneFlexLayout({
    direction: 'row',
    children: [
      new SceneFlexItem({
        width: '50%',
        height: 300,
        body: PanelBuilders.timeseries().setTitle('Panel using global time range').build(),
      }),
    ],
  }),
});

将时间选择器添加到场景控件

使用 SceneTimePicker 对象显示和控制场景的时间范围

const scene = new EmbeddedScene({
  $data: queryRunner,
  $timeRange: new SceneTimeRange({ from: 'now-5m', to: 'now' }),
  controls: [new SceneTimePicker({})]
  body: new SceneFlexLayout({
    direction: 'row',
    children: [
      new SceneFlexItem({
        width: '50%',
        height: 300,
        body: PanelBuilders.timeseries().setTitle('Panel using global time range').build(),
      }),
    ],
  }),
});

将时间窗口比较选择器添加到场景控件

创建一个 SceneTimeRangeCompare 场景对象，并将其添加到场景控件中的 SceneTimePicker 旁边

const scene = new EmbeddedScene({
  $data: queryRunner,
  $timeRange: new SceneTimeRange({ from: 'now-5m', to: 'now' }),
  controls: [new SceneTimePicker({}), new SceneTimeRangeCompare({})],
  body: new SceneFlexLayout({
    direction: 'row',
    children: [
      new SceneFlexItem({
        width: '100%',
        height: '100%',
        body: PanelBuilders.timeseries().setTitle('Panel using global time range').build(),
      }),
    ],
  }),
});

时间范围比较选择器应显示在时间范围选择器旁边。通过单击“时间范围比较”复选框并选择要与当前选定的时间范围进行比较的时间窗口，启用时间范围比较。

自定义比较序列的样式

您可以通过配置覆盖来自定义可视化上呈现的比较序列的样式。使用 matchComparisonQuery(queryRefId: string) 匹配器来定位比较查询结果

const queryRunner = new SceneQueryRunner({
  datasource: {
    type: 'prometheus',
    uid: 'gdev-prometheus',
  },
  queries: [
    {
      refId: 'MyQuery',
      expr: 'rate(prometheus_http_requests_total{}[5m])',
    },
  ],
});

const panelShowingComparisonSeries = PanelBuilders.timeseries()
  .setData(queryRunner)
  .setOverrides((b) =>
    b.matchComparisonQuery('MyQuery').overrideColor({
      mode: 'fixed',
      fixedColor: 'red',
    })
  );

源代码

查看示例源代码

在 Scene 中使用 SceneTimeRangeCompare​

自定义比较序列的样式​

源代码​

在 Scene 中使用 `SceneTimeRangeCompare`

自定义比较序列的样式

源代码