Writing new panel based on .ts example

This is an absolute beginner question and I am aware that the problem probably has a very easy answer. Still I was not able to solve it over the last few days (I am an absolute beginner in JavaScript and Typescript).

What I am trying to do is to create a new panel based on the grafana build-in table panel. The point I am failing at is basically the compilation from .ts to .js

  1. I have copied one of the panels available for download, pasted it in data/plugins and adjusted it (to some extent). The original Panel was written in .js, so I just followed the instructions with the commands

npm install
grunt

which creates a dist folder.
The plugin seems to be working correctly.

  1. I have downloaded the grafana-plugin-template-webpack-typescript-master, which is a Panel containing a module.ts, I have made a small change and compiled it with

npm install
npm run build

The panel is working correctly.

  1. What I actually want to achieve is to take the original table panel and adjust it to my needs. I have copied the files of the table panel from
    public\app\plugins\panel\table
    to
    data\plugins\my_custom_table

All the files are written in .ts. I tried compiling it like the panel in 2) but it failed with unresolved paths


ERROR in D:\Installation\grafana-6.0.1\data\plugins\grafana-plugin-template-webpack-typescript-master\src\types.ts
(2,24): error TS2307: Cannot find module ‘@grafana/data’.

ERROR in D:\Installation\grafana-6.0.1\data\plugins\grafana-plugin-template-webpack-typescript-master\src\types.ts
(3,29): error TS2307: Cannot find module ‘@grafana/ui/src/components/Table/TableCellBuilder’.

ERROR in ./transformers.ts
(1,15): error TS2307: Cannot find module ‘lodash’.

ERROR in ./transformers.ts
(4,22): error TS2305: Module ‘“D:/Installation/grafana-6.0.1/data/plugins/grafana-plugin-template-webpack-typescript-master/node_modules/@types/grafana/app/core/table_model”’ has no exported member ‘mergeTablesIntoModel’.

ERROR in ./transformers.ts
(233,25): error TS2345: Argument of type ‘any’ is not assignable to parameter of type ‘never’.


and some more…
Apparently the paths are not correct after copying the plugin to a new location - I tried experimenting changing the paths in the files but could not solve the problem. I was wandering if there is a global path that should be set here for the compilation process?

  1. I also tried downloading the Grafana source code to build it from source as described in “building_from_source”
    I assumed I could copy the table panel from
    \src\github.com\grafana\grafana\public\app\plugins\panel\table
    to
    \src\github.com\grafana\grafana\public\app\plugins\panel\my_custom_table
    adjust it, and build it with the Overall graphana build process.

It worked fine up to the step

yarn start

First I get Errors
“Could not open cafile: EOENT”

Later (not sure if related to EOENT) the compilation “hungs up”

I am kind of lost what else I can do… Any hints would be greatly appreciated…

Thanks a lot
Agnieszka