时间范围比较

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

在场景中使用`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',
    })
  );

源代码

查看示例源代码

在场景中使用SceneTimeRangeCompare​

自定义比较系列的样式​

源代码​

在场景中使用`SceneTimeRangeCompare`

自定义比较系列的样式

源代码