public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FieldColor: Adds new standard color option for color (#28039)

Browse Source 
* FieldColor: Added field color option

* Progress

* FieldColor: Added custom schemes

* move to fieldColor

* move to fieldColor

* add back the standard color picker

* FieldColor: Added registry for field color modes

* wip refactor

* Seperate scale from color mode

* Progress

* schemes working

* Stuff is working

* Added fallback

* Updated threshold tests

* Added unit tests

* added more tests

* Made it work with new graph panel

* Use scale calculator from graph panel

* Updates

* Updated test

* Renaming things

* Update packages/grafana-data/src/field/displayProcessor.ts

Co-authored-by: Ryan McKinley <ryantxu@gmail.com>

* updated according to feedback, added docs

* Updated docs

* Updated

* Update docs/sources/panels/field-options/standard-field-options.md

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

* Update docs/sources/panels/field-options/standard-field-options.md

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

* Updated docs according to feedback

* fixed test

* Updated

* Updated wording

* Change to fieldState.seriesIndex

* Updated tests

* Updates

* New names

* More work needed to support bar gauge and showing the color modes in the picker

* Now correct gradients work in bar gauge

* before rename

* Unifying the concept

* Updates

* review feedback

* Updated

* Skip minification

* Updated

* UI improvements

Co-authored-by: Ryan McKinley <ryantxu@gmail.com>
Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>
This commit is contained in:
Torkel Ödegaard
2020-10-09 09:34:57 +02:00
committed by GitHub
co-authored by Ryan McKinley Diana Payton
parent c052abed87
commit d181782943
36 changed files with 767 additions and 541 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/grafana-data/src/field/displayProcessor.test.ts
+3 -42
View File
@@ -1,10 +1,7 @@
import { getDisplayProcessor, getRawDisplayProcessor } from './displayProcessor';
import { DisplayProcessor, DisplayValue } from '../types/displayValue';
import { MappingType, ValueMapping } from '../types/valueMapping';
import { Field, FieldConfig, FieldType, GrafanaTheme, Threshold, ThresholdsMode } from '../types';
import { getScaleCalculator, sortThresholds } from './scale';
import { ArrayVector } from '../vector';
import { validateFieldConfig } from './fieldOverrides';
import { FieldConfig, FieldType, ThresholdsMode } from '../types';
import { systemDateFormats } from '../datetime';
function getDisplayProcessorFromConfig(config: FieldConfig) {
@@ -16,18 +13,6 @@ function getDisplayProcessorFromConfig(config: FieldConfig) {
});
}
function getColorFromThreshold(value: number, steps: Threshold[], theme?: GrafanaTheme): string {
const field: Field = {
name: 'test',
config: { thresholds: { mode: ThresholdsMode.Absolute, steps: sortThresholds(steps) } },
type: FieldType.number,
values: new ArrayVector([]),
};
validateFieldConfig(field.config!);
const calc = getScaleCalculator(field, theme);
return calc(value).color!;
}
function assertSame(input: any, processors: DisplayProcessor[], match: DisplayValue) {
processors.forEach(processor => {
const value = processor(input);
@@ -42,7 +27,7 @@ describe('Process simple display values', () => {
// Don't test float values here since the decimal formatting changes
const processors = [
// Without options, this shortcuts to a much easier implementation
getDisplayProcessor(),
getDisplayProcessor({ field: { config: {} } }),
// Add a simple option that is not used (uses a different base class)
getDisplayProcessorFromConfig({ min: 0, max: 100 }),
@@ -104,31 +89,6 @@ describe('Process simple display values', () => {
});
});
describe('Get color from threshold', () => {
it('should get first threshold color when only one threshold', () => {
const thresholds = [{ index: 0, value: -Infinity, color: '#7EB26D' }];
expect(getColorFromThreshold(49, thresholds)).toEqual('#7EB26D');
});
it('should get the threshold color if value is same as a threshold', () => {
const thresholds = [
{ index: 2, value: 75, color: '#6ED0E0' },
{ index: 1, value: 50, color: '#EAB839' },
{ index: 0, value: -Infinity, color: '#7EB26D' },
];
expect(getColorFromThreshold(50, thresholds)).toEqual('#EAB839');
});
it('should get the nearest threshold color between thresholds', () => {
const thresholds = [
{ index: 2, value: 75, color: '#6ED0E0' },
{ index: 1, value: 50, color: '#EAB839' },
{ index: 0, value: -Infinity, color: '#7EB26D' },
];
expect(getColorFromThreshold(55, thresholds)).toEqual('#EAB839');
});
});
describe('Format value', () => {
it('should return if value isNaN', () => {
const valueMappings: ValueMapping[] = [];
@@ -316,6 +276,7 @@ describe('Date display options', () => {
timeZone: 'utc',
field: {
type: FieldType.time,
config: {},
},
});