Problems with Option Builder and TypeScript

[raphaeldas]

Hi everyone

I’m trying to build my first custom Grafana Plugin and I need some help with the Panel Option Builder. Here I have some Input Fields I want to transform a svg inside the panel:

module.ts

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

export const plugin = new PanelPlugin<SimpleOptions>(SimplePanel).setPanelOptions(builder => {
  return builder
    .addBooleanSwitch({
      path: 'showTransformHelper',
      name: 'show Transform Helper',
      description: 'Display Helper to transform trace svg',
      defaultValue: true,
    })
    .addNumberInput({
      path: 'translateX',
      name: 'Translate in x direction',
      description: 'Description of panel option',
      defaultValue: 0,
    })
    .addNumberInput({
      path: 'rotation',
      name: 'Rotation',
      integer: false,
      max: 180,
      min: -180,
      step: 1,
      defaultValue: 0,
      included: false,
      description: 'rotate traces'
    })
    .addNumberInput({
      path: 'translateY',
      name: 'Translate in y direction',
      description: 'Description of panel option',
      defaultValue: 0,
    })
    .addSliderInput({
      path: 'scale',
      name: 'Scale',
      description: 'in Tenths',
      defaultValue: 1,
      included: false,
      min: 0.5,
      max: 5,
      step: 0.1
    })
});

It seems I don’t have the right types for a NumberInput and a SliderInput. Some Arguments aren’t assignable. I get this error for example:

Argument of type ‘{ path: string; name: string; integer: boolean; max: number; min: number; step: number; defaultValue: number; included: boolean; description: string; }’ is not assignable to parameter of type ‘PanelOptionsEditorConfig<SimpleOptions, NumberFieldConfigSettings, number>’.
Object literal may only specify known properties, and ‘integer’ does not exist in type ‘PanelOptionsEditorConfig<SimpleOptions, NumberFieldConfigSettings, number>’.ts(2345)

I don’t really know typescript, so can someone give me a hint how I can cast or exhaust these arguments as the correct type?

Thanks in advance.

Best Regards
Raphael Andres

[mikhailvolkov]

@raphaeldas “Integer” property does not exist as error said.

@raphaeldas

integer: false,

Also, SliderInput should have min, max and step inside settings like

.addSliderInput({
      path: 'width',
      name: 'Width',
      settings: {
        min: 1,
        max: 2400
      },
      defaultValue: 0,
    })

[raphaeldas]

@mikhailvolkov

      settings: {
        min: 1,
        max: 2400
      },

Alright, i see. That was my problem. Didn’t know I have to enter these properties inside an additional settings object.

Thank you for your help, @mikhailvolkov !

Regards Raphael