Графана реагирует плагинами с холстом внутри - PullRequest
Новая
       5

Графана реагирует плагинами с холстом внутри

0 голосов
/ 06 января 2020

Я пытаюсь написать графану реагировать плагин с холстом внутри. Я создал свой шаблон с npx @grafana/toolkit plugin:create my-plugin. Я запустил этот шаблон с yarn install, yarn dev --watch. Это работает.

Чтобы проверить, я удалил опции в файле module.ts следующим образом 

import { PanelPlugin } from '@grafana/data';
import { SimplePanel } from './SimplePanel';

export const plugin = new PanelPlugin(SimplePanel);

Я изменил файл SimplePanel.tsx следующим образом 

import React, { PureComponent } from 'react';
import { PanelProps } from '@grafana/data';

export class SimplePanel extends PureComponent<PanelProps> {
    componentDidMount() {
        console.log(this.refs.canvas)
        const ctx = this.refs.canvas.getContext('2d');
        console.log(ctx)
    }

    render() {
        return (
                <canvas ref="canvas" width={300} height={300}/>
        );
    }
}

И я получил следующую ошибку:

Свойство 'getContext' не существует для типа 'ReactInstance'.
Свойство 'getContext' не существует для типа 'Компонент <любой, {}, любой>' .

Как можно добавить холст в графане реагировать плагин?
Спасибо за ответ.

1 Ответ

0 голосов
/ 06 января 2020

Благодаря комментарию Матеуша Фальковского мне удается добавить холст: 

import React, { PureComponent } from 'react';
import { PanelProps } from '@grafana/data';

export class SimplePanel extends PureComponent<PanelProps> {

    myCanvasRef = React.createRef<HTMLCanvasElement>()

    componentDidMount() {
        console.log(this.myCanvasRef)
        const ctx = this.myCanvasRef.current!.getContext('2d');
        console.log(ctx)
    }

    render() {
        return (
                <canvas ref={this.myCanvasRef} width={300} height={300}/>
        );
    }
}
...