grafana-chartwerk-panel/src/module.ts

import { PanelOptions, Pod } from './types';

import { Panel } from './components/Panel';
import { IconsEditor } from './components/editors/IconsEditor';
import { ThresholdsEditor } from './components/editors/ThresholdsEditor';

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


export const plugin = new PanelPlugin<PanelOptions>(Panel).setPanelOptions((builder) => {
  return builder
    .addRadio({
      path: 'visualizationType',
      name: 'Pod',
      category: ['Visualization'],
      defaultValue: Pod.GAUGE,
      settings: {
        options: [
          {
            label: 'Gauge',
            value: Pod.GAUGE,
            description: 'Enable gauge pod',
          },
          {
            label: 'Line',
            value: Pod.LINE,
            description: 'Enable line pod',
          },
          {
            label: 'Bar',
            value: Pod.BAR,
            description: 'Enable bar pod',
          },
        ],
      },
    })

    .addFieldNamePicker({
      name: 'Value',
      path: 'gauge.value.metricName',
      category: ['Extremum'],
      showIf: (config) => config.visualizationType === Pod.GAUGE
    })

    .addNumberInput({
      path: 'gauge.min.value',
      name: 'Min',
      category: ['Extremum'],
      showIf: (config) => config.visualizationType === Pod.GAUGE && !config.gauge.min.useMetric,
    })
    .addFieldNamePicker({
      name: 'Min',
      path: 'gauge.min.metricName',
      category: ['Extremum'],
      showIf: (config) => config.visualizationType === Pod.GAUGE && config.gauge.min.useMetric,
    })
    .addBooleanSwitch({
      path: 'gauge.min.useMetric',
      name: 'Use metric',
      defaultValue: false,
      category: ['Extremum'],
      showIf: (config) => config.visualizationType === Pod.GAUGE,
    })

    .addNumberInput({
      path: 'gauge.max.value',
      name: 'Max',
      category: ['Extremum'],
      showIf: (config) => config.visualizationType === Pod.GAUGE && !config.gauge.max.useMetric,
    })
    .addFieldNamePicker({
      name: 'Max',
      path: 'gauge.max.metricName',
      category: ['Extremum'],
      showIf: (config) => config.visualizationType === Pod.GAUGE && config.gauge.max.useMetric,
    })
    .addBooleanSwitch({
      path: 'gauge.max.useMetric',
      name: 'Use metric',
      defaultValue: false,
      category: ['Extremum'],
      showIf: (config) => config.visualizationType === Pod.GAUGE,
    })
    .addBooleanSwitch({
      path: 'gauge.reversed',
      name: 'Reversed',
      defaultValue: false,
      category: ['Direction'],
      showIf: (config) => config.visualizationType === Pod.GAUGE,
    })
    .addCustomEditor({
      id: 'icons',
      path: 'gauge.icons',
      name: 'Icons',
      category: ['Icons'],
      defaultValue: [],
      showIf: (config) => config.visualizationType === Pod.GAUGE,
      editor: IconsEditor as any,
    })

    .addCustomEditor({
      id: 'thresholds',
      path: 'gauge.thresholds',
      name: 'Thresholds',
      category: ['Thresholds'],
      defaultValue: {
        defaultColor: '#37872d',
        arcBackground: 'rgba(38, 38, 38, 0.1)',
        thresholds: []
      },
      showIf: (config) => config.visualizationType === Pod.GAUGE,
      editor: ThresholdsEditor as any,
    })
});