StatPanel: Fixes base color is being used for null values (#22646)

* StatPanel: Fixed color for null values

* StatPanels: Show base value for null values
datasource-meta
Torkel Ödegaard 5 years ago committed by GitHub
parent 9d858220ce
commit 5d8fc6a1a9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 12
      packages/grafana-data/src/field/displayProcessor.test.ts
  2. 5
      packages/grafana-data/src/field/displayProcessor.ts
  3. 5
      packages/grafana-data/src/field/scale.ts

@ -206,6 +206,18 @@ describe('Format value', () => {
expect(instance(value).numeric).toEqual(1);
});
it('With null value and thresholds should use base color', () => {
const instance = getDisplayProcessorFromConfig({
thresholds: {
mode: ThresholdsMode.Absolute,
steps: [{ index: 0, value: -Infinity, color: '#AAA' }],
},
});
const disp = instance(null);
expect(disp.text).toEqual('');
expect(disp.color).toEqual('#AAA');
});
//
// Below is current behavior but it's clearly not working great
//

@ -53,8 +53,8 @@ export function getDisplayProcessor(options?: DisplayProcessorOptions): DisplayP
let numeric = toNumber(value);
let prefix: string | undefined = undefined;
let suffix: string | undefined = undefined;
let shouldFormat = true;
if (mappings && mappings.length > 0) {
const mappedValue = getMappedValue(mappings, value);
@ -100,7 +100,8 @@ export function getDisplayProcessor(options?: DisplayProcessorOptions): DisplayP
text = ''; // No data?
}
}
return { text, numeric, prefix, suffix };
return { text, numeric, prefix, suffix, ...scaleFunc(-Infinity) };
};
}

@ -30,10 +30,12 @@ export function getScaleCalculator(field: Field, theme?: GrafanaTheme): ScaleCal
// Should we calculate the percentage
const percentThresholds = thresholds && thresholds.mode === ThresholdsMode.Percentage;
const useColorScheme = color && color.mode === FieldColorMode.Scheme;
if (percentThresholds || useColorScheme) {
// Calculate min/max if required
let min = config.min;
let max = config.max;
if (!isNumber(min) || !isNumber(max)) {
if (field.values && field.values.length) {
const stats = reduceField({ field, reducers: [ReducerID.min, ReducerID.max] });
@ -48,10 +50,12 @@ export function getScaleCalculator(field: Field, theme?: GrafanaTheme): ScaleCal
max = 100;
}
}
const delta = max! - min!;
// Use a d3 color scale
let interpolator: colorInterpolator | undefined;
if (useColorScheme) {
interpolator = (d3 as any)[`interpolate${color!.schemeName}`] as colorInterpolator;
}
@ -62,6 +66,7 @@ export function getScaleCalculator(field: Field, theme?: GrafanaTheme): ScaleCal
? getActiveThreshold(percentThresholds ? percent * 100 : value, thresholds.steps)
: undefined; // 0-100
let color = fixedColor;
if (interpolator) {
color = interpolator(percent);
} else if (threshold) {

Loading…
Cancel
Save