Skip to main content

Getting started

@grafana/scenes-ml is a separate npm package which lets you add Machine Learning powered functionality to your scenes.

This topic explains hows to install Scenes ML and use it within a Grafana App plugin.

Installation​

If you're adding Scenes ML to an existing Scenes app plugin, first make sure your plugin config is up-to-date by running:

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

Then add @grafana/scenes-ml to your plugin by running the following commands in your project:

yarn add @grafana/scenes-ml

Add ML features to a scene​

1. Create a scene​

Create a scene using the snippet below. This will add a time series panel to the scene with built-in controls to add trend, lower and upper bounds to all series in the panel.

// 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. Render the scene​

Use the following code in your Grafana app plugin page to render the "Hello ML" scene:

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

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

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

Source code​

View the example source code