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';
import { NotSupportedText } from 'components/editors/NotSupportedText';

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,
          },
          {
            label: 'Line',
            value: Pod.LINE,
          },
          {
            label: 'Bar',
            value: Pod.BAR,
          },
        ],
      },
    })
    .addCustomEditor({
      id: 'notSupportedText',
      name: 'This visualization is not supported',
      category: ['Visualization'],
      path: '',
      showIf: (config) => config.visualizationType !== Pod.GAUGE,
      editor: NotSupportedText as any,
    })

    .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,
    })
    // TODO: move these 2 editors into one-row custom editor
    .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,
    })

    // note: `gauge.unit` will contain unit name, not it's string representation
    // to format value with unit, use `getValueFormat` function from `@grafana/data`
    .addUnitPicker({
      path: 'gauge.unit',
      name: 'Unit',
      category: ['Value Format'],
      showIf: (config) => config.visualizationType === Pod.GAUGE,
    })
    .addNumberInput({
      path: 'gauge.decimals',
      name: 'Decimals',
      settings: {
        placeholder: 'auto',
        min: 0,
        max: 5,
      },
      category: ['Value Format'],
      showIf: (config) => config.visualizationType === Pod.GAUGE,
    })
    .addSliderInput({
      path: 'gauge.size',
      defaultValue: 20,
      name: 'Size (px)',
      settings: {
        min: 1,
        max: 50,
      },
      category: ['Value Format'],
      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,
    });
});