设置场景
本主题描述了如何安装场景并创建您的第一个 "Hello World" 场景。
安装
使用 @grafana/create-plugin 开始一个全新的项目。
npx @grafana/create-plugin@latest
或者，通过在项目中运行以下命令将 @grafana/scenes 添加到您的 Grafana 应用程序插件
yarn add @grafana/scenes
Hello World 场景
以下说明如何设置 "Hello World" 场景。
1. 创建场景
使用以下代码片段创建您的第一个场景。以下代码将创建一个包含 Grafana 文本面板的 flex 布局场景
// 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 侧边栏、导航和插件页面，请遵循 场景应用 指南。