Skip to main content

Convert value and range maps

Grafana plugins built using the AngularJS SDK could use editors for value and range maps. When updating your plugin to React, it is necessary to convert the configuration options of these maps to a new format.

Add new built-in editors

In your plugin's module.ts file, add the Mappings option to enable the new editor:

standardOptions: {
[FieldConfigProperty.Mappings]: {},

Refer to the Configure value mappings documentation for descriptions of the new components.

Convert mappings to new format

Use the helper function shown below to update your plugin's configurations.

import { PanelModel, convertOldAngularValueMappings, ValueMapping } from '@grafana/data';

export const PolystatPanelMigrationHandler = (panel: PanelModel<PolystatOptions>): Partial<PolystatOptions> => {
// convert range and value maps
const newMaps = migrateValueAndRangeMaps(panel);
panel.options.fieldConfig = {
defaults: {
mappings: newMaps,
overrides: [],
delete panel.mappingType;
delete panel.rangeMaps;
delete panel.valueMaps;
// return new settings
return panel.options;

export const migrateValueAndRangeMaps = (panel: any) => {
// value maps first
panel.mappingType = 1;
let newValueMappings: ValueMapping[] = [];
if (panel.valueMaps !== undefined) {
newValueMappings = convertOldAngularValueMappings(panel);
// range maps second
panel.mappingType = 2;
let newRangeMappings: ValueMapping[] = [];
if (panel.rangeMaps !== undefined) {
newRangeMappings = convertOldAngularValueMappings(panel);
// append together
const newMappings = newValueMappings.concat(newRangeMappings);
// get uniques only
return [ Map( => [JSON.stringify(v), v])).values()];

Be sure to clean up the old settings so the migration does not repeat itself.

For another illustration, refer to this example.