自定义场景对象中的数据和时间范围

自定义场景对象可以使用添加到场景中的数据和时间范围信息来执行附加操作。本主题描述了如何在渲染器和自定义对象类中使用这些属性。

要了解有关数据和时间范围配置的更多信息，请先参阅数据和时间范围。

​

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

​

在您的自定义场景对象渲染器中，您可以使用 sceneGraph.getData 工具订阅最近的 SceneDataProvider。

import { sceneGraph, SceneObjectState, SceneObjectBase, SceneComponentProps } from '@grafana/scenes';

interface CustomObjectState extends SceneObjectState {}

class CustomObject extends SceneObjectBase<CustomObjectState> {
  static Component = CustomObjectRenderer;
}

function CustomObjectRenderer({ model }: SceneComponentProps<CustomObject>) {
  const data = sceneGraph.getData(model).useState();

  return (
    <div>
      <pre>Time range: {JSON.stringify(data.data?.timeRange)}</pre>
      <pre>Data: {JSON.stringify(data.data?.series)}</pre>
    </div>
  );
}

​

您也可以在自定义对象类中使用数据。为此，请使用一个激活处理程序。在激活处理程序中，使用 sceneGraph.getData(this) 获取最近的 SceneDataProvider。然后，使用 SceneObjectBase 的 subscribeToState 方法订阅 SceneDataProvider 的状态变化。

class CustomObject extends SceneObjectBase<CustomObjectState> {
  static Component = CustomObjectRenderer;

  constructor() {
    super({});
    this.addActivationHandler(() => this.activationHandler());
  }

  private activationHandler() {
    const sourceData = sceneGraph.getData(this);

    this._subs.add(sourceData.subscribeToState((state) => console.log(state)));
  }
}

注意

从 sourceData.subscribeToState 返回的订阅会添加到 this._subs 中。因此，当自定义对象被销毁时，您无需进行任何清理，因为库会负责取消订阅。

​

类似于数据，您可以在自定义场景对象中使用 sceneGraph.getTimeRange(model) 获取最近的时间范围。此方法既可以在自定义对象类中使用，也可以在渲染器中使用，正如之前在使用数据部分所述。

​

如果需要在许多不同的场景对象之间共享同一个数据提供者，并且无法通过将 $data 放置在共享的共同祖先上来实现，您可以使用 DataProviderSharer。这是一个可以共享/转发来自另一个数据提供者的数据的数据提供者。

​

查看示例源代码