入门

@grafana/scenes-ml 是一个独立的 npm 包，可以让您为场景添加机器学习功能。

本主题解释了如何安装 Scenes ML 并在 Grafana 应用插件中使用它。

安装

如果您要将 Scenes ML 添加到现有的场景应用插件中，首先确保您的插件配置是最新的，通过运行以下命令

npx @grafana/create-plugin@latest --update

然后通过在您的项目中运行以下命令将 @grafana/scenes-ml 添加到您的插件

yarn add @grafana/scenes-ml

将 ML 功能添加到场景

1. 创建一个场景

使用以下片段创建一个场景。这将向场景添加一个时间序列面板，并带有内置控件以向面板中的所有系列添加趋势、下限和上限。

// helloMLScene.ts

import {
  EmbeddedScene,
  SceneFlexLayout,
  SceneFlexItem,
  SceneQueryRunner,
  PanelBuilders,
  sceneUtils,
} from '@grafana/scenes';
import { SceneBaseliner, MLDemoDS } from '@grafana/scenes-ml';

// Register the demo datasource from `scenes-ml`.
// This isn't required for normal usage, it just gives us some sensible demo data.
sceneUtils.registerRuntimeDataSource({ dataSource: new MLDemoDS('ml-test', 'ml-test') });

function getForecastQueryRunner() {
  return new SceneQueryRunner({
    queries: [{ refId: 'A', datasource: { uid: 'ml-test', type: 'ml-test' }, type: 'forecasts' }],
  });
}

export function getScene() {
  return new EmbeddedScene({
    body: new SceneFlexLayout({
      children: [
        new SceneFlexItem({
          width: '50%',
          height: 300,
          body: PanelBuilders.timeseries()
            .setTitle('Forecast demo')
            .setData(getForecastQueryRunner())
            // Add the `SceneBaseliner` to the panel.
            .setHeaderActions([new SceneBaseliner({ interval: 0.95 })])
            .build(),
        }),
      ],
    }),
  });
}

2. 渲染场景

在您的 Grafana 应用插件页面上使用以下代码来渲染 "Hello ML" 场景

import React from 'react';
import { getScene } from './helloMLScene';

export const HelloMLPluginPage = () => {
  const scene = getScene();

  return <scene.Component model={scene} />;
};

源代码

查看示例源代码

安装​

将 ML 功能添加到场景​

1. 创建一个场景​

2. 渲染场景​

源代码​

安装

将 ML 功能添加到场景

1. 创建一个场景

2. 渲染场景

源代码