@grafana/data#MappingType TypeScript Examples

The following examples show how to use @grafana/data#MappingType. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: SingleStatBaseOptions.ts    From grafana-chinese with Apache License 2.0 6 votes vote down vote up 
/**
 * Convert the angular single stat mapping to new react style
 */
export function convertOldAngularValueMapping(panel: any): ValueMapping[] {
  const mappings: ValueMapping[] = [];

  // Guess the right type based on options
  let mappingType = panel.mappingType;
  if (!panel.mappingType) {
    if (panel.valueMaps && panel.valueMaps.length) {
      mappingType = 1;
    } else if (panel.rangeMaps && panel.rangeMaps.length) {
      mappingType = 2;
    }
  }

  // check value to text mappings if its enabled
  if (mappingType === 1) {
    for (let i = 0; i < panel.valueMaps.length; i++) {
      const map = panel.valueMaps[i];
      mappings.push({
        ...map,
        id: i, // used for order
        type: MappingType.ValueToText,
      });
    }
  } else if (mappingType === 2) {
    for (let i = 0; i < panel.rangeMaps.length; i++) {
      const map = panel.rangeMaps[i];
      mappings.push({
        ...map,
        id: i, // used for order
        type: MappingType.RangeToText,
      });
    }
  }

  return mappings;
}
Example #2
Source File: ValueMappingsEditor.test.tsx    From grafana-chinese with Apache License 2.0 6 votes vote down vote up 
setup = (propOverrides?: object) => {
  const props: Props = {
    onChange: jest.fn(),
    valueMappings: [
      { id: 1, operator: '', type: MappingType.ValueToText, value: '20', text: 'Ok' },
      { id: 2, operator: '', type: MappingType.RangeToText, from: '21', to: '30', text: 'Meh' },
    ],
  };

  Object.assign(props, propOverrides);

  const wrapper = shallow(<ValueMappingsEditor {...props} />);

  const instance = wrapper.instance() as ValueMappingsEditor;

  return {
    instance,
    wrapper,
  };
}
Example #3
Source File: ValueMappingsEditor.test.tsx    From grafana-chinese with Apache License 2.0 6 votes vote down vote up 
describe('On remove mapping', () => {
  it('Should remove mapping with id 0', () => {
    const { instance } = setup();

    instance.onRemoveMapping(1);

    expect(instance.state.valueMappings).toEqual([
      { id: 2, operator: '', type: MappingType.RangeToText, from: '21', to: '30', text: 'Meh' },
    ]);
  });

  it('should remove mapping with id 1', () => {
    const { instance } = setup();

    instance.onRemoveMapping(2);

    expect(instance.state.valueMappings).toEqual([
      { id: 1, operator: '', type: MappingType.ValueToText, value: '20', text: 'Ok' },
    ]);
  });
});
Example #4
Source File: ValueMappingsEditor.tsx    From grafana-chinese with Apache License 2.0 6 votes vote down vote up 
onAddMapping = () =>
    this.setState(prevState => ({
      valueMappings: [
        ...prevState.valueMappings,
        {
          id: prevState.nextIdToAdd,
          operator: '',
          value: '',
          text: '',
          type: MappingType.ValueToText,
          from: '',
          to: '',
        },
      ],
      nextIdToAdd: prevState.nextIdToAdd + 1,
    }));
Example #5
Source File: MappingRow.tsx    From grafana-chinese with Apache License 2.0 5 votes vote down vote up 
renderRow() {
    const { from, text, to, type, value } = this.state;

    if (type === MappingType.RangeToText) {
      return (
        <>
          <FormField
            label="From"
            labelWidth={4}
            inputWidth={8}
            onBlur={this.updateMapping}
            onChange={this.onMappingFromChange}
            value={from}
          />
          <FormField
            label="To"
            labelWidth={4}
            inputWidth={8}
            onBlur={this.updateMapping}
            onChange={this.onMappingToChange}
            value={to}
          />
          <div className="gf-form gf-form--grow">
            <FormLabel width={4}>Text</FormLabel>
            <Input
              className="gf-form-input"
              onBlur={this.updateMapping}
              value={text}
              onChange={this.onMappingTextChange}
            />
          </div>
        </>
      );
    }

    return (
      <>
        <FormField
          label="Value"
          labelWidth={4}
          onBlur={this.updateMapping}
          onChange={this.onMappingValueChange}
          value={value}
          inputWidth={8}
        />
        <div className="gf-form gf-form--grow">
          <FormLabel width={4}>Text</FormLabel>
          <Input
            className="gf-form-input"
            onBlur={this.updateMapping}
            value={text}
            onChange={this.onMappingTextChange}
          />
        </div>
      </>
    );
  }
Example #6
Source File: MappingRow.tsx    From grafana-chinese with Apache License 2.0 5 votes vote down vote up 
onMappingTypeChange = (mappingType: MappingType) => {
    this.setState({ type: mappingType });
  };
Example #7
Source File: MappingRow.tsx    From grafana-chinese with Apache License 2.0 5 votes vote down vote up 
mappingOptions = [
  { value: MappingType.ValueToText, label: 'Value' },
  { value: MappingType.RangeToText, label: 'Range' },
]