@grafana/data#ThresholdsMode TypeScript Examples

function getProps(propOverrides?: Partial<Props>): Props {
  const field: Partial<Field> = {
    type: FieldType.number,
    config: {
      min: 0,
      max: 100,
      thresholds: {
        mode: ThresholdsMode.Absolute,
        steps: [
          { value: -Infinity, color: 'green' },
          { value: 70, color: 'orange' },
          { value: 90, color: 'red' },
        ],
      },
    },
  };
  const theme = getTheme();
  field.display = getDisplayProcessor({ field, theme });

  const props: Props = {
    displayMode: BarGaugeDisplayMode.Basic,
    field: field.config!,
    display: field.display!,
    height: 300,
    width: 300,
    value: field.display(25),
    theme,
    orientation: VizOrientation.Horizontal,
  };

  Object.assign(props, propOverrides);
  return props;
}

standardFieldDisplayOptions: FieldDisplayOptions = {
  values: false,
  calcs: [ReducerID.mean],
  defaults: {
    thresholds: {
      mode: ThresholdsMode.Absolute,
      steps: [
        { value: -Infinity, color: 'green' },
        { value: 80, color: 'red' }, // 80%
      ],
    },
    mappings: [],
  },
  overrides: [],
}

standardFieldDisplayOptions: FieldDisplayOptions = {
  values: false,
  calcs: [ReducerID.mean],
  defaults: {
    thresholds: {
      mode: ThresholdsMode.Absolute,
      steps: [
        { value: -Infinity, color: 'green' },
        { value: 80, color: 'red' }, // 80%
      ],
    },
    mappings: [],
  },
  overrides: [],
}

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
    }),
  };
}

setup = (propOverrides?: Partial<Props>) => {
  const props: Props = {
    onChange: jest.fn(),
    thresholds: { mode: ThresholdsMode.Absolute, steps: [] },
  };

  Object.assign(props, propOverrides);

  const wrapper = mount(<ThresholdsEditor {...props} />);
  const instance = wrapper.instance() as ThresholdsEditor;

  return {
    instance,
    wrapper,
  };
}

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
    }),
  };
}

describe('on blur threshold value', () => {
  it('should resort rows and update indexes', () => {
    const { instance } = setup();
    const thresholds = {
      mode: ThresholdsMode.Absolute,
      steps: [
        { value: -Infinity, color: '#7EB26D', key: 1 },
        { value: 78, color: '#EAB839', key: 2 },
        { value: 75, color: '#6ED0E0', key: 3 },
      ],
    };

    instance.setState({
      steps: thresholds.steps,
    });

    instance.onBlur();

    expect(getCurrentThresholds(instance).steps).toEqual([
      { value: -Infinity, color: '#7EB26D' },
      { value: 75, color: '#6ED0E0' },
      { value: 78, color: '#EAB839' },
    ]);
  });
});

describe('Remove threshold', () => {
  it('should not remove threshold at index 0', () => {
    const thresholds = {
      mode: ThresholdsMode.Absolute,
      steps: [
        { value: -Infinity, color: '#7EB26D' },
        { value: 50, color: '#EAB839' },
        { value: 75, color: '#6ED0E0' },
      ],
    };
    const { instance } = setup({ thresholds });

    instance.onRemoveThreshold(instance.state.steps[0]);

    expect(getCurrentThresholds(instance)).toEqual(thresholds);
  });

  it('should remove threshold', () => {
    const thresholds = {
      mode: ThresholdsMode.Absolute,
      steps: [
        { value: -Infinity, color: '#7EB26D' },
        { value: 50, color: '#EAB839' },
        { value: 75, color: '#6ED0E0' },
      ],
    };
    const { instance } = setup({ thresholds });

    instance.onRemoveThreshold(instance.state.steps[1]);

    expect(getCurrentThresholds(instance).steps).toEqual([
      { value: -Infinity, color: '#7EB26D' },
      { value: 75, color: '#6ED0E0' },
    ]);
  });
});

setup = (propOverrides?: Partial<Props>) => {
  const props: Props = {
    onChange: jest.fn(),
    thresholds: { mode: ThresholdsMode.Absolute, steps: [] },
  };

  Object.assign(props, propOverrides);

  const wrapper = mount(<ThresholdsEditor {...props} />);
  const instance = wrapper.instance() as ThresholdsEditor;

  return {
    instance,
    wrapper,
  };
}

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

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

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,
      },
    },
  };
}

static defaultProps: Partial<Props> = {
    lcdCellWidth: 12,
    value: {
      text: '100',
      numeric: 100,
    },
    displayMode: BarGaugeDisplayMode.Gradient,
    orientation: VizOrientation.Horizontal,
    field: {
      min: 0,
      max: 100,
      thresholds: {
        mode: ThresholdsMode.Absolute,
        steps: [],
      },
    },
    itemSpacing: 10,
    showUnfilled: true,
  };

static defaultProps: Partial<Props> = {
    showThresholdMarkers: true,
    showThresholdLabels: false,
    field: {
      min: 0,
      max: 100,
      thresholds: {
        mode: ThresholdsMode.Absolute,
        steps: [
          { value: -Infinity, color: 'green' },
          { value: 80, color: 'red' },
        ],
      },
    },
  };

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} />;
  }

getFormattedThresholds(): Threshold[] {
    const { field, theme } = this.props;
    const thresholds = field.thresholds ?? Gauge.defaultProps.field?.thresholds!;
    const isPercent = thresholds.mode === ThresholdsMode.Percentage;
    const steps = thresholds.steps;
    let min = field.min!;
    let max = field.max!;
    if (isPercent) {
      min = 0;
      max = 100;
    }

    const first = getActiveThreshold(min, steps);
    const last = getActiveThreshold(max, steps);
    const formatted: Threshold[] = [];
    formatted.push({ value: min, color: getColorFromHexRgbOrName(first.color, theme.type) });
    let skip = true;
    for (let i = 0; i < steps.length; i++) {
      const step = steps[i];
      if (skip) {
        if (first === step) {
          skip = false;
        }
        continue;
      }
      const prev = steps[i - 1];
      formatted.push({ value: step.value, color: getColorFromHexRgbOrName(prev!.color, theme.type) });
      if (step === last) {
        break;
      }
    }
    formatted.push({ value: max, color: getColorFromHexRgbOrName(last.color, theme.type) });
    return formatted;
  }

setup = (propOverrides?: FieldConfig) => {
  const field: FieldConfig = {
    min: 0,
    max: 100,
    thresholds: {
      mode: ThresholdsMode.Absolute,
      steps: [{ value: -Infinity, color: '#7EB26D' }],
    },
  };
  Object.assign(field, propOverrides);

  const props: Props = {
    showThresholdMarkers: true,
    showThresholdLabels: false,
    field,
    width: 300,
    height: 300,
    value: {
      text: '25',
      numeric: 25,
    },
    theme: getTheme(),
  };

  const wrapper = shallow(<Gauge {...props} />);
  const instance = wrapper.instance() as Gauge;

  return {
    instance,
    wrapper,
  };
}

describe('Get thresholds formatted', () => {
  it('should return first thresholds color for min and max', () => {
    const { instance } = setup({
      thresholds: { mode: ThresholdsMode.Absolute, steps: [{ value: -Infinity, color: '#7EB26D' }] },
    });

    expect(instance.getFormattedThresholds()).toEqual([
      { value: 0, color: '#7EB26D' },
      { value: 100, color: '#7EB26D' },
    ]);
  });

  it('should get the correct formatted values when thresholds are added', () => {
    const { instance } = setup({
      thresholds: {
        mode: ThresholdsMode.Absolute,
        steps: [
          { value: -Infinity, color: '#7EB26D' },
          { value: 50, color: '#EAB839' },
          { value: 75, color: '#6ED0E0' },
        ],
      },
    });

    expect(instance.getFormattedThresholds()).toEqual([
      { value: 0, color: '#7EB26D' },
      { value: 50, color: '#7EB26D' },
      { value: 75, color: '#EAB839' },
      { value: 100, color: '#6ED0E0' },
    ]);
  });
});

function addBarGaugeStory(name: string, overrides: Partial<Props>) {
  BarGaugeStories.add(name, () => {
    const {
      value,
      title,
      minValue,
      maxValue,
      threshold1Color,
      threshold2Color,
      threshold1Value,
      threshold2Value,
    } = getKnobs();

    const field: Partial<Field> = {
      type: FieldType.number,
      config: {
        min: minValue,
        max: maxValue,
        thresholds: {
          mode: ThresholdsMode.Absolute,
          steps: [
            { value: -Infinity, color: 'green' },
            { value: threshold1Value, color: threshold1Color },
            { value: threshold2Value, color: threshold2Color },
          ],
        },
      },
    };
    field.display = getDisplayProcessor({ field });

    const props: Props = {
      theme: {} as any,
      width: 300,
      height: 300,
      value: {
        text: value.toString(),
        title: title,
        numeric: value,
      },
      orientation: VizOrientation.Vertical,
      displayMode: BarGaugeDisplayMode.Basic,
      field: field.config!,
      display: field.display!,
    };

    Object.assign(props, overrides);
    return renderComponentWithTheme(BarGauge, props);
  });
}

modes: Array<SelectableValue<ThresholdsMode>> = [
  { value: ThresholdsMode.Absolute, label: 'Absolute', description: 'Pick thresholds based on the absolute values' },
  {
    value: ThresholdsMode.Percentage,
    label: 'Percentage',
    description: 'Pick threshold based on the percent between min/max',
  },
]

onModeChanged = (value?: ThresholdsMode) => {
    this.props.onChange({
      ...this.props.thresholds,
      mode: value!,
    });
  };

renderInput(threshold: ThresholdWithKey, styles: ThresholdStyles) {
    const isPercent = this.props.thresholds.mode === ThresholdsMode.Percentage;

    if (!isFinite(threshold.value)) {
      return (
        <Input
          type="text"
          value={'Base'}
          disabled
          prefix={
            threshold.color && (
              <div className={styles.colorPicker}>
                <ColorPicker
                  color={threshold.color}
                  onChange={color => this.onChangeThresholdColor(threshold, color)}
                  enableNamedColors={true}
                />
              </div>
            )
          }
        />
      );
    }

    return (
      <Input
        type="number"
        step="0.0001"
        key={isPercent.toString()}
        onChange={(event: ChangeEvent<HTMLInputElement>) => this.onChangeThresholdValue(event, threshold)}
        value={threshold.value}
        onBlur={this.onBlur}
        prefix={
          <div className={styles.inputPrefix}>
            {threshold.color && (
              <div className={styles.colorPicker}>
                <ColorPicker
                  color={threshold.color}
                  onChange={color => this.onChangeThresholdColor(threshold, color)}
                  enableNamedColors={true}
                />
              </div>
            )}
            {isPercent && <div className={styles.percentIcon}>%</div>}
          </div>
        }
        suffix={<Icon className={styles.trashIcon} name="trash" onClick={() => this.onRemoveThreshold(threshold)} />}
      />
    );
  }

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 };
}

renderInput = (threshold: ThresholdWithKey) => {
    const config = getThresholdOrDefault(this.props.thresholds);
    const isPercent = config.mode === ThresholdsMode.Percentage;

    return (
      <div className="thresholds-row-input-inner">
        <span className="thresholds-row-input-inner-arrow" />
        <div className="thresholds-row-input-inner-color">
          {threshold.color && (
            <div className="thresholds-row-input-inner-color-colorpicker">
              <ColorPicker
                color={threshold.color}
                onChange={color => this.onChangeThresholdColor(threshold, color)}
                enableNamedColors={true}
              />
            </div>
          )}
        </div>
        {!isFinite(threshold.value) ? (
          <div className="thresholds-row-input-inner-value">
            <Input type="text" value="Base" readOnly />
          </div>
        ) : (
          <>
            <div className="thresholds-row-input-inner-value">
              <Input
                type="number"
                step="0.0001"
                onChange={(event: ChangeEvent<HTMLInputElement>) => this.onChangeThresholdValue(event, threshold)}
                value={threshold.value}
                onBlur={this.onBlur}
              />
            </div>
            {isPercent && (
              <div className={css(`margin-left:-20px; margin-top:5px;`)}>
                <i className="fa fa-percent" />
              </div>
            )}
            <div className="thresholds-row-input-inner-remove" onClick={() => this.onRemoveThreshold(threshold)}>
              <i className="fa fa-times" />
            </div>
          </>
        )}
      </div>
    );
  };

onModeChanged = (item: SelectableValue<ThresholdsMode>) => {
    if (item.value) {
      this.props.onChange({
        ...getThresholdOrDefault(this.props.thresholds),
        mode: item.value,
      });
    }
  };

describe('change threshold value', () => {
  it('should not change threshold at index 0', () => {
    const thresholds = {
      mode: ThresholdsMode.Absolute,
      steps: [
        { value: -Infinity, color: '#7EB26D' },
        { value: 50, color: '#EAB839' },
        { value: 75, color: '#6ED0E0' },
      ],
    };
    const { instance } = setup({ thresholds });

    const mockEvent = ({ target: { value: '12' } } as any) as ChangeEvent<HTMLInputElement>;

    instance.onChangeThresholdValue(mockEvent, instance.state.steps[0]);

    expect(getCurrentThresholds(instance)).toEqual(thresholds);
  });

  it('should update value', () => {
    const { instance } = setup();
    const thresholds = {
      mode: ThresholdsMode.Absolute,
      steps: [
        { value: -Infinity, color: '#7EB26D', key: 1 },
        { value: 50, color: '#EAB839', key: 2 },
        { value: 75, color: '#6ED0E0', key: 3 },
      ],
    };

    instance.state = {
      steps: thresholds.steps,
    };

    const mockEvent = ({ target: { value: '78' } } as any) as ChangeEvent<HTMLInputElement>;

    instance.onChangeThresholdValue(mockEvent, thresholds.steps[1]);

    expect(getCurrentThresholds(instance).steps).toEqual([
      { value: -Infinity, color: '#7EB26D' },
      { value: 78, color: '#EAB839' },
      { value: 75, color: '#6ED0E0' },
    ]);
  });
});

describe('Add threshold', () => {
  it('should add threshold', () => {
    const { instance } = setup();

    instance.onAddThresholdAfter(instance.state.steps[0]);

    expect(getCurrentThresholds(instance).steps).toEqual([
      { value: -Infinity, color: 'green' }, // 0
      { value: 50, color: colors[1] }, // 1
    ]);
  });

  it('should add another threshold above a first', () => {
    const { instance } = setup({
      thresholds: {
        mode: ThresholdsMode.Absolute,
        steps: [
          { value: -Infinity, color: colors[0] }, // 0
          { value: 50, color: colors[2] }, // 1
        ],
      },
    });

    instance.onAddThresholdAfter(instance.state.steps[1]);

    expect(getCurrentThresholds(instance).steps).toEqual([
      { value: -Infinity, color: colors[0] }, // 0
      { value: 50, color: colors[2] }, // 1
      { value: 75, color: colors[3] }, // 2
    ]);
  });

  it('should add another threshold between first and second index', () => {
    const { instance } = setup({
      thresholds: {
        mode: ThresholdsMode.Absolute,
        steps: [
          { value: -Infinity, color: colors[0] },
          { value: 50, color: colors[2] },
          { value: 75, color: colors[3] },
        ],
      },
    });

    instance.onAddThresholdAfter(instance.state.steps[1]);

    expect(getCurrentThresholds(instance).steps).toEqual([
      { value: -Infinity, color: colors[0] },
      { value: 50, color: colors[2] },
      { value: 62.5, color: colors[4] },
      { value: 75, color: colors[3] },
    ]);
  });
});

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