设置场景
本主题介绍如何安装场景并创建第一个“Hello World”场景。
安装
使用@grafana/create-plugin启动一个全新的项目。
npx @grafana/create-plugin@latest
或者，通过在项目中运行以下命令，将@grafana/scenes添加到您的Grafana应用插件中
yarn add @grafana/scenes
Hello World场景
以下说明介绍了如何设置“Hello World”场景。
1. 创建场景
使用下面的代码片段创建您的第一个场景。以下代码将创建一个包含一个Grafana文本面板的场景，该面板位于一个弹性布局中
// helloWorldScene.ts
import { EmbeddedScene, SceneFlexLayout, SceneFlexItem, VizPanel, PanelBuilders } from '@grafana/scenes';
export function getScene() {
return new EmbeddedScene({
body: new SceneFlexLayout({
children: [
new SceneFlexItem({
width: '50%',
height: 300,
body: PanelBuilders.text().setTitle('Panel title').setOption('content', 'Hello world!').build(),
}),
],
}),
});
}
2. 渲染场景
在您的Grafana应用插件页面中使用以下代码渲染“Hello World”场景
import React from 'react';
import { getScene } from './helloWorldScene';
export const HelloWorldPluginPage = () => {
const scene = getScene();
return <scene.Component model={scene} />;
};
注意
渲染的场景不会在Grafana插件页面中渲染。要将场景与Grafana侧边栏、导航和插件页面集成，请遵循场景应用指南。