时间范围比较

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

在 Scene 中使用 `SceneTimeRangeCompare`

创建具有时间范围和查询运行器的 Scene

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

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(),
      }),
    ],
  }),
});

向 Scene 控件添加时间选择器

使用 SceneTimePicker 对象来显示和控制 Scene 的时间范围

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(),
      }),
    ],
  }),
});

向 Scene 控件添加时间窗口比较选择器

创建一个 SceneTimeRangeCompare Scene 对象，并将其添加到 Scene 控件中 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`

自定义比较系列的样式

源代码