自定义场景对象中的数据和时间段
自定义场景对象可以使用添加到场景中的数据和时间段信息执行附加操作。本主题描述了如何在渲染器和自定义对象类中使用这些属性。
要了解更多关于数据和时间段配置的信息，请先参考数据和时间段。
使用数据
在自定义场景对象中，使用 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。这是一个可以共享/转发来自其他数据提供者的数据提供者。