How can I update a value based on another?

Grafana Plugin Development
,
1

Hello everyone! I’m new to Grafana plugin development and have encountered some difficulties. In the module.ts file, I have three options: two custom ones and the built-in addBooleanSwitch.

  .addBooleanSwitch({
      path: 'moveColsRows',
      name: 'moveColsRows',
      defaultValue: false,
    })
 .addCustomEditor({
      id: 'hideShowColumns',
      path: 'hideShowColumns',
      name: 'hideShowColumns',
      editor: HideShowColumnsEditor,
      defaultValue: [],
    })
    .addCustomEditor({
      id: 'hideShowRows',
      path: 'hideShowRows',
      name: 'hideShowRows',
      editor: HideShowRowEditor,
      defaultValue: [],
    })

I need the selected data in the custom options to reset when addBooleanSwitch is toggled. How can I configure one option to influence others in Grafana?

2

Hi @maxymzakharkiv

You can read the values of other options in your custom editor via the prop context.options.

Here’s a code example of how you could reset the value of your custom editor value if for example a boolean switch is set to false:

import { PanelPlugin, StandardEditorProps } from '@grafana/data';
import { SimpleOptions } from './types';
import { SimplePanel } from './components/SimplePanel';
import React, { useEffect } from 'react';
import { Input } from '@grafana/ui';

const customOptionDefaultValue = 'default value';

export const plugin = new PanelPlugin<SimpleOptions>(SimplePanel).setPanelOptions((builder) => {
  return builder
    .addBooleanSwitch({
      path: 'showSeriesCount',
      name: 'Show series counter',
      defaultValue: true,
    })
    .addCustomEditor({
      id: 'customEditor',
      path: 'customEditor',
      name: 'My custom editor',
      editor: CustomEditor,
      defaultValue: customOptionDefaultValue,
    });
});

export const CustomEditor = (props: StandardEditorProps) => {
  // all the panel options
  const currentOptions = props.context.options;
  // this editor current value
  const currentValue = props.value;
  // callback to "store" the current editor value
  // notice this doesn't save the options to the backend
  // that needs to be done by the user clicking the save button
  const onChange = props.onChange;

  //logic to reset the value
  useEffect(() => {
    // important to check if the current value is  not the default value
    // to prevent infinite loops
    if (!currentOptions.showSeriesCount && currentValue !== customOptionDefaultValue) {
      onChange(customOptionDefaultValue);
    }
  }, [currentOptions, currentValue, onChange]);

  return (
    <div>
      <Input
        value={currentValue}
        onChange={(e) => {
          return onChange(e.currentTarget.value);
        }}
      />
    </div>
  );
};
3

I understand, thanks for answering the question!