自定义场景对象中的数据和时间范围
自定义场景对象可以使用添加到场景中的数据和时间范围信息执行其他操作。本主题介绍如何在渲染器和自定义对象类中使用这些属性。
要详细了解数据和时间范围配置，请先参考 数据和时间范围。
使用数据
在自定义场景对象中，使用 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) 使用最近的时间范围。此方法可以在自定义对象类和渲染器中使用，如前面使用数据部分所述。