@grafana/data#ThresholdsConfig TypeScript Examples

export class ThresholdsValueEditor extends React.PureComponent<
  FieldConfigEditorProps<ThresholdsConfig, ThresholdsFieldConfigSettings>
> {
  constructor(props: FieldConfigEditorProps<ThresholdsConfig, ThresholdsFieldConfigSettings>) {
    super(props);
  }

  render() {
    const { onChange } = this.props;
    let value = this.props.value;
    if (!value) {
      value = {
        mode: ThresholdsMode.Percentage,

        // Must be sorted by 'value', first value is always -Infinity
        steps: [
          // anything?
        ],
      };
    }

    return <ThresholdsEditor thresholds={value} onChange={onChange} />;
  }
}

export class ThresholdsOverrideEditor extends React.PureComponent<
  FieldOverrideEditorProps<ThresholdsConfig, ThresholdsFieldConfigSettings>
> {
  constructor(props: FieldOverrideEditorProps<ThresholdsConfig, ThresholdsFieldConfigSettings>) {
    super(props);
  }

  render() {
    return <div>THRESHOLDS OVERRIDE EDITOR {this.props.item.name}</div>;
  }
}

export function moveThresholdsAndMappingsToField(old: any) {
  const { fieldOptions } = old;

  if (!fieldOptions) {
    return old;
  }

  const { mappings, ...rest } = old.fieldOptions;

  let thresholds: ThresholdsConfig | undefined = undefined;
  if (old.thresholds) {
    thresholds = {
      mode: ThresholdsMode.Absolute,
      steps: migrateOldThresholds(old.thresholds)!,
    };
  }

  return {
    ...old,
    fieldOptions: {
      ...rest,
      defaults: {
        ...fieldOptions.defaults,
        mappings,
        thresholds,
      },
    },
  };
}

defaultScale: ThresholdsConfig = {
  mode: ThresholdsMode.Absolute,
  steps: [
    {
      color: 'blue',
      value: -Infinity,
    },
    {
      color: 'green',
      value: 20,
    },
  ],
}

defaultThresholds: ThresholdsConfig = {
  steps: [
    {
      color: 'blue',
      value: -Infinity,
    },
    {
      color: 'green',
      value: 20,
    },
  ],
  mode: ThresholdsMode.Absolute,
}

export function thresholdsWithoutKey(thresholds: ThresholdsConfig, steps: ThresholdWithKey[]): ThresholdsConfig {
  const mode = thresholds.mode ?? ThresholdsMode.Absolute;
  return {
    mode,
    steps: steps.map(t => {
      const { key, ...rest } = t;
      return rest; // everything except key
    }),
  };
}

export function thresholdsWithoutKey(
  thresholds: ThresholdsConfig | undefined,
  steps: ThresholdWithKey[]
): ThresholdsConfig {
  thresholds = getThresholdOrDefault(thresholds);

  const mode = thresholds.mode ?? ThresholdsMode.Absolute;

  return {
    mode,
    steps: steps.map(t => {
      const { key, ...rest } = t;
      return rest; // everything except key
    }),
  };
}

function toThresholdsWithKey(thresholds?: ThresholdsConfig): ThresholdWithKey[] {
  thresholds = getThresholdOrDefault(thresholds);

  let steps: Threshold[] = thresholds.steps || [];

  if (thresholds.steps && thresholds.steps.length === 0) {
    steps = [{ value: -Infinity, color: 'green' }];
  }

  return steps.map(t => {
    return {
      color: t.color,
      value: t.value === null ? -Infinity : t.value,
      key: counter++,
    };
  });
}

ThresholdsEditorStories.add('default', () => {
  return <ThresholdsEditor thresholds={{} as ThresholdsConfig} onChange={action('Thresholds changed')} />;
});

onThresholdsChanged = (thresholds: ThresholdsConfig) => {
    const current = this.props.options.fieldOptions.defaults;
    this.onDefaultsChange({
      ...current,
      thresholds,
    });
  };

onThresholdsChanged = (thresholds: ThresholdsConfig) => {
    const current = this.props.options.fieldOptions.defaults;
    this.onDefaultsChange({
      ...current,
      thresholds,
    });
  };

onThresholdsChanged = (thresholds: ThresholdsConfig) => {
    const current = this.props.options.fieldOptions.defaults;
    this.onDefaultsChange({
      ...current,
      thresholds,
    });
  };

Default = () => {
  return <ThresholdsEditor thresholds={{} as ThresholdsConfig} onChange={action('Thresholds changed')} />;
}

thresholds: ThresholdsConfig = {
  mode: ThresholdsMode.Absolute,
  steps: [
    { value: -Infinity, color: 'green' },
    { value: 50, color: 'red' },
    { value: 60, color: 'blue' },
  ],
}

function getThresholdOrDefault(thresholds?: ThresholdsConfig): ThresholdsConfig {
  return thresholds ?? { steps: [], mode: ThresholdsMode.Absolute };
}

thresholds: ThresholdsConfig = {
  mode: ThresholdsMode.Absolute,
  steps: [
    { value: -Infinity, color: 'green' },
    { value: 50, color: 'red' },
  ],
}

thresholdsOverrideProcessor = (
  value: any,
  context: FieldOverrideContext,
  settings: ThresholdsFieldConfigSettings
) => {
  return value as ThresholdsConfig; // !!!! likely not !!!!
}

constructor(props: FieldOverrideEditorProps<ThresholdsConfig, ThresholdsFieldConfigSettings>) {
    super(props);
  }

constructor(props: FieldConfigEditorProps<ThresholdsConfig, ThresholdsFieldConfigSettings>) {
    super(props);
  }

getStandardFieldConfigs = () => {
  const title: FieldPropertyEditorItem<string, StringFieldConfigSettings> = {
    id: 'title', // Match field properties
    name: 'Title',
    description: 'The field title',

    editor: StringValueEditor,
    override: StringOverrideEditor,
    process: stringOverrideProcessor,
    settings: {
      placeholder: 'auto',
      expandTemplateVars: true,
    },
    shouldApply: field => field.type !== FieldType.time,
  };

  const unit: FieldPropertyEditorItem<string, StringFieldConfigSettings> = {
    id: 'unit', // Match field properties
    name: 'Unit',
    description: 'value units',

    editor: UnitValueEditor,
    override: UnitOverrideEditor,
    process: stringOverrideProcessor,

    settings: {
      placeholder: 'none',
    },

    shouldApply: field => field.type === FieldType.number,
  };

  const min: FieldPropertyEditorItem<number, NumberFieldConfigSettings> = {
    id: 'min', // Match field properties
    name: 'Min',
    description: 'Minimum expected value',

    editor: NumberValueEditor,
    override: NumberOverrideEditor,
    process: numberOverrideProcessor,

    settings: {
      placeholder: 'auto',
    },
    shouldApply: field => field.type === FieldType.number,
  };

  const max: FieldPropertyEditorItem<number, NumberFieldConfigSettings> = {
    id: 'max', // Match field properties
    name: 'Max',
    description: 'Maximum expected value',

    editor: NumberValueEditor,
    override: NumberOverrideEditor,
    process: numberOverrideProcessor,

    settings: {
      placeholder: 'auto',
    },

    shouldApply: field => field.type === FieldType.number,
  };

  const decimals: FieldPropertyEditorItem<number, NumberFieldConfigSettings> = {
    id: 'decimals', // Match field properties
    name: 'Decimals',
    description: 'How many decimal places should be shown on a number',

    editor: NumberValueEditor,
    override: NumberOverrideEditor,
    process: numberOverrideProcessor,

    settings: {
      placeholder: 'auto',
      min: 0,
      max: 15,
      integer: true,
    },

    shouldApply: field => field.type === FieldType.number,
  };

  const thresholds: FieldPropertyEditorItem<ThresholdsConfig, ThresholdsFieldConfigSettings> = {
    id: 'thresholds', // Match field properties
    name: 'Thresholds',
    description: 'Manage Thresholds',

    editor: ThresholdsValueEditor,
    override: ThresholdsOverrideEditor,
    process: thresholdsOverrideProcessor,

    settings: {
      // ??
    },

    shouldApply: field => field.type === FieldType.number,
  };

  const mappings: FieldPropertyEditorItem<ValueMapping[], ValueMappingFieldConfigSettings> = {
    id: 'mappings', // Match field properties
    name: 'Value mappings',
    description: 'Manage value mappings',

    editor: ValueMappingsValueEditor,
    override: ValueMappingsOverrideEditor,
    process: valueMappingsOverrideProcessor,
    settings: {
      // ??
    },

    shouldApply: field => field.type === FieldType.number,
  };

  const noValue: FieldPropertyEditorItem<string, StringFieldConfigSettings> = {
    id: 'noValue', // Match field properties
    name: 'No Value',
    description: 'What to show when there is no value',

    editor: StringValueEditor,
    override: StringOverrideEditor,
    process: stringOverrideProcessor,

    settings: {
      placeholder: '-',
    },
    // ??? any field with no value
    shouldApply: () => true,
  };

  const links: FieldPropertyEditorItem<DataLink[], StringFieldConfigSettings> = {
    id: 'links', // Match field properties
    name: 'DataLinks',
    description: 'Manage date links',
    editor: DataLinksValueEditor,
    override: DataLinksOverrideEditor,
    process: dataLinksOverrideProcessor,
    settings: {
      placeholder: '-',
    },
    shouldApply: () => true,
  };

  return [unit, min, max, decimals, thresholds, mappings, title, noValue, links];
}