@grafana/data#FieldColorMode TypeScript Examples
The following examples show how to use
@grafana/data#FieldColorMode.
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: utils.test.ts From grafana-chinese with Apache License 2.0 | 7 votes |
|
aSeries = toDataFrame({
fields: [
{ name: 'time', type: FieldType.time, values: [100, 200, 300] },
{
name: 'value',
type: FieldType.number,
values: [10, 20, 10],
config: { color: { mode: FieldColorMode.Fixed, fixedColor: 'red' } },
},
],
})
Example #2
| Source File: utils.test.ts From grafana-chinese with Apache License 2.0 | 7 votes |
|
bSeries = toDataFrame({
fields: [
{ name: 'time', type: FieldType.time, values: [100, 200, 300] },
{
name: 'value',
type: FieldType.number,
values: [30, 60, 30],
config: { color: { mode: FieldColorMode.Fixed, fixedColor: 'blue' } },
},
],
})
Example #3
| Source File: utils.test.ts From grafana-chinese with Apache License 2.0 | 7 votes |
|
cSeries = toDataFrame({
fields: [
{ name: 'time', type: FieldType.time, values: [100, 300] },
{
name: 'value',
type: FieldType.number,
values: [30, 30],
config: { color: { mode: FieldColorMode.Fixed, fixedColor: 'yellow' } },
},
],
})
Example #4
| Source File: BarGauge.tsx From grafana-chinese with Apache License 2.0 | 5 votes |
|
/**
* Only exported to for unit test
*/
export function getBarGradient(props: Props, maxSize: number): string {
const { field, value, orientation } = props;
const cssDirection = isVertical(orientation) ? '0deg' : '90deg';
const minValue = field.min!;
const maxValue = field.max!;
let gradient = '';
let lastpos = 0;
if (field.color && field.color.mode === FieldColorMode.Scheme) {
const schemeSet = (d3 as any)[`scheme${field.color.schemeName}`] as any[];
if (!schemeSet) {
// Error: unknown scheme
const color = '#F00';
gradient = `linear-gradient(${cssDirection}, ${color}, ${color}`;
gradient += ` ${maxSize}px, ${color}`;
return gradient + ')';
}
// Get the scheme with as many steps as possible
const scheme = schemeSet[schemeSet.length - 1] as string[];
for (let i = 0; i < scheme.length; i++) {
const color = scheme[i];
const valuePercent = i / (scheme.length - 1);
const pos = valuePercent * maxSize;
const offset = Math.round(pos - (pos - lastpos) / 2);
if (gradient === '') {
gradient = `linear-gradient(${cssDirection}, ${color}, ${color}`;
} else {
lastpos = pos;
gradient += ` ${offset}px, ${color}`;
}
}
} else {
const thresholds = field.thresholds!;
for (let i = 0; i < thresholds.steps.length; i++) {
const threshold = thresholds.steps[i];
const color = getColorFromHexRgbOrName(threshold.color);
const valuePercent = getValuePercent(threshold.value, minValue, maxValue);
const pos = valuePercent * maxSize;
const offset = Math.round(pos - (pos - lastpos) / 2);
if (gradient === '') {
gradient = `linear-gradient(${cssDirection}, ${color}, ${color}`;
} else if (value.numeric < threshold.value) {
break;
} else {
lastpos = pos;
gradient += ` ${offset}px, ${color}`;
}
}
}
return gradient + ')';
}
Example #5
| Source File: Graph.story.tsx From grafana-chinese with Apache License 2.0 | 5 votes |
|
series: GraphSeriesXY[] = [
{
data: [
[1546372800000, 10],
[1546376400000, 20],
[1546380000000, 10],
],
color: 'red',
isVisible: true,
label: 'A-series',
seriesIndex: 0,
timeField: {
type: FieldType.time,
name: 'time',
values: new ArrayVector([1546372800000, 1546376400000, 1546380000000]),
config: {},
},
valueField: {
type: FieldType.number,
name: 'a-series',
values: new ArrayVector([10, 20, 10]),
config: {
color: {
mode: FieldColorMode.Fixed,
fixedColor: 'red',
},
},
},
timeStep: 3600000,
yAxis: {
index: 0,
},
},
{
data: [
[1546372800000, 20],
[1546376400000, 30],
[1546380000000, 40],
],
color: 'blue',
isVisible: true,
label:
"B-series with an ultra wide label that probably gonna make the tooltip to overflow window. This situation happens, so let's better make sure it behaves nicely :)",
seriesIndex: 1,
timeField: {
type: FieldType.time,
name: 'time',
values: new ArrayVector([1546372800000, 1546376400000, 1546380000000]),
config: {},
},
valueField: {
type: FieldType.number,
name:
"B-series with an ultra wide label that is probably going go make the tooltip overflow window. This situation happens, so let's better make sure it behaves nicely :)",
values: new ArrayVector([20, 30, 40]),
config: {
color: {
mode: FieldColorMode.Fixed,
fixedColor: 'blue',
},
},
},
timeStep: 3600000,
yAxis: {
index: 0,
},
},
]
Example #6
| Source File: Graph.test.tsx From grafana-chinese with Apache License 2.0 | 5 votes |
|
series: GraphSeriesXY[] = [
{
data: [
[1546372800000, 10],
[1546376400000, 20],
[1546380000000, 10],
],
color: 'red',
isVisible: true,
label: 'A-series',
seriesIndex: 0,
timeField: {
type: FieldType.time,
name: 'time',
values: new ArrayVector([1546372800000, 1546376400000, 1546380000000]),
config: {},
},
valueField: {
type: FieldType.number,
name: 'a-series',
values: new ArrayVector([10, 20, 10]),
config: { color: { mode: FieldColorMode.Fixed, fixedColor: 'red' } },
},
timeStep: 3600000,
yAxis: {
index: 0,
},
},
{
data: [
[1546372800000, 20],
[1546376400000, 30],
[1546380000000, 40],
],
color: 'blue',
isVisible: true,
label: 'B-series',
seriesIndex: 0,
timeField: {
type: FieldType.time,
name: 'time',
values: new ArrayVector([1546372800000, 1546376400000, 1546380000000]),
config: {},
},
valueField: {
type: FieldType.number,
name: 'b-series',
values: new ArrayVector([20, 30, 40]),
config: { color: { mode: FieldColorMode.Fixed, fixedColor: 'blue' } },
},
timeStep: 3600000,
yAxis: {
index: 0,
},
},
]
Example #7
| Source File: GraphWithLegend.story.tsx From grafana-chinese with Apache License 2.0 | 5 votes |
|
series: GraphSeriesXY[] = [
{
data: [
[1546372800000, 10],
[1546376400000, 20],
[1546380000000, 10],
],
color: 'red',
isVisible: true,
label: 'A-series',
seriesIndex: 0,
timeField: {
type: FieldType.time,
name: 'time',
values: new ArrayVector([1546372800000, 1546376400000, 1546380000000]),
config: {},
},
valueField: {
type: FieldType.number,
name: 'a-series',
values: new ArrayVector([10, 20, 10]),
config: {
color: {
mode: FieldColorMode.Fixed,
fixedColor: 'red',
},
},
},
timeStep: 3600000,
yAxis: {
index: 1,
},
},
{
data: [
[1546372800000, 20],
[1546376400000, 30],
[1546380000000, 40],
],
color: 'blue',
isVisible: true,
label: 'B-series',
seriesIndex: 1,
timeField: {
type: FieldType.time,
name: 'time',
values: new ArrayVector([1546372800000, 1546376400000, 1546380000000]),
config: {},
},
valueField: {
type: FieldType.number,
name: 'b-series',
values: new ArrayVector([20, 30, 40]),
config: {
color: {
mode: FieldColorMode.Fixed,
fixedColor: 'blue',
},
},
},
timeStep: 3600000,
yAxis: {
index: 1,
},
},
]
Example #8
| Source File: SingleStatBaseOptions.ts From grafana-chinese with Apache License 2.0 | 5 votes |
|
export function sharedSingleStatMigrationHandler(panel: PanelModel<SingleStatBaseOptions>): SingleStatBaseOptions {
if (!panel.options) {
// This happens on the first load or when migrating from angular
return {} as any;
}
const previousVersion = parseFloat(panel.pluginVersion || '6.1');
let options = panel.options as any;
if (previousVersion < 6.2) {
options = migrateFromValueOptions(options);
}
if (previousVersion < 6.3) {
options = moveThresholdsAndMappingsToField(options);
}
if (previousVersion < 6.6) {
const { fieldOptions } = options;
// discard the old `override` options and enter an empty array
if (fieldOptions && fieldOptions.override) {
const { override, ...rest } = options.fieldOptions;
options = {
...options,
fieldOptions: {
...rest,
overrides: [],
},
};
}
// Move thresholds to steps
let thresholds = fieldOptions?.defaults?.thresholds;
if (thresholds) {
delete fieldOptions.defaults.thresholds;
} else {
thresholds = fieldOptions?.thresholds;
delete fieldOptions.thresholds;
}
if (thresholds) {
fieldOptions.defaults.thresholds = {
mode: ThresholdsMode.Absolute,
steps: thresholds,
};
}
// Migrate color from simple string to a mode
const { defaults } = fieldOptions;
if (defaults.color && typeof defaults.color === 'string') {
defaults.color = {
mode: FieldColorMode.Fixed,
fixedColor: defaults.color,
};
}
validateFieldConfig(defaults);
}
return options as SingleStatBaseOptions;
}
Example #9
| Source File: getGraphSeriesModel.ts From grafana-chinese with Apache License 2.0 | 4 votes |
|
getGraphSeriesModel = (
dataFrames: DataFrame[],
timeZone: TimeZone,
seriesOptions: SeriesOptions,
graphOptions: GraphOptions,
legendOptions: GraphLegendEditorLegendOptions,
fieldOptions?: FieldDisplayOptions
) => {
const graphs: GraphSeriesXY[] = [];
const displayProcessor = getDisplayProcessor({
field: {
config: {
unit: fieldOptions?.defaults?.unit,
decimals: legendOptions.decimals,
},
},
});
let fieldColumnIndex = -1;
for (const series of dataFrames) {
const { timeField } = getTimeField(series);
if (!timeField) {
continue;
}
for (const field of series.fields) {
if (field.type !== FieldType.number) {
continue;
}
// Storing index of series field for future inspection
fieldColumnIndex++;
// Use external calculator just to make sure it works :)
const points = getFlotPairs({
xField: timeField,
yField: field,
nullValueMode: NullValueMode.Null,
});
if (points.length > 0) {
const seriesStats = reduceField({ field, reducers: legendOptions.stats });
let statsDisplayValues: DisplayValue[];
if (legendOptions.stats) {
statsDisplayValues = legendOptions.stats.map<DisplayValue>(stat => {
const statDisplayValue = displayProcessor(seriesStats[stat]);
return {
...statDisplayValue,
title: stat,
};
});
}
let color: FieldColor;
if (seriesOptions[field.name] && seriesOptions[field.name].color) {
// Case when panel has settings provided via SeriesOptions, i.e. graph panel
color = {
mode: FieldColorMode.Fixed,
fixedColor: seriesOptions[field.name].color,
};
} else if (field.config && field.config.color) {
// Case when color settings are set on field, i.e. Explore logs histogram (see makeSeriesForLogs)
color = field.config.color;
} else {
color = {
mode: FieldColorMode.Fixed,
fixedColor: colors[graphs.length % colors.length],
};
}
field.config = fieldOptions
? {
...field.config,
unit: fieldOptions.defaults.unit,
decimals: fieldOptions.defaults.decimals,
color,
}
: { ...field.config, color };
field.display = getDisplayProcessor({ field });
// Time step is used to determine bars width when graph is rendered as bar chart
const timeStep = getSeriesTimeStep(timeField);
const useMsDateFormat = hasMsResolution(timeField);
timeField.display = getDisplayProcessor({
timeZone,
field: {
...timeField,
type: timeField.type,
config: {
unit: `time:${useMsDateFormat ? MS_DATE_TIME_FORMAT : DEFAULT_DATE_TIME_FORMAT}`,
},
},
});
graphs.push({
label: field.name,
data: points,
color: field.config.color?.fixedColor,
info: statsDisplayValues,
isVisible: true,
yAxis: {
index: (seriesOptions[field.name] && seriesOptions[field.name].yAxis) || 1,
},
// This index is used later on to retrieve appropriate series/time for X and Y axes
seriesIndex: fieldColumnIndex,
timeField: { ...timeField },
valueField: { ...field },
timeStep,
});
}
}
}
return graphs;
}
Example #10
| Source File: getGraphSeriesModel.ts From loudml-grafana-app with MIT License | 4 votes |
|
getGraphSeriesModel = (
dataFrames: DataFrame[],
timeZone: TimeZone,
seriesOptions: SeriesOptions,
graphOptions: GraphOptions,
legendOptions: GraphLegendEditorLegendOptions,
fieldOptions?: FieldDisplayOptions
) => {
const graphs: GraphSeriesXY[] = [];
const displayProcessor = getDisplayProcessor({
field: {
config: {
unit: fieldOptions?.defaults?.unit,
decimals: legendOptions.decimals,
},
},
});
let fieldColumnIndex = -1;
for (const series of dataFrames) {
const { timeField } = getTimeField(series);
if (!timeField) {
continue;
}
for (const field of series.fields) {
if (field.type !== FieldType.number) {
continue;
}
// Storing index of series field for future inspection
fieldColumnIndex++;
// Use external calculator just to make sure it works :)
const points = getFlotPairs({
xField: timeField,
yField: field,
nullValueMode: NullValueMode.Null,
});
if (points.length > 0) {
const seriesStats = reduceField({ field, reducers: legendOptions.stats });
let statsDisplayValues: DisplayValue[];
if (legendOptions.stats) {
statsDisplayValues = legendOptions.stats.map<DisplayValue>(stat => {
const statDisplayValue = displayProcessor(seriesStats[stat]);
return {
...statDisplayValue,
title: stat,
};
});
}
let color: FieldColor;
if (seriesOptions[field.name] && seriesOptions[field.name].color) {
// Case when panel has settings provided via SeriesOptions, i.e. graph panel
color = {
mode: FieldColorMode.Fixed,
fixedColor: seriesOptions[field.name].color,
};
} else if (field.config && field.config.color) {
// Case when color settings are set on field, i.e. Explore logs histogram (see makeSeriesForLogs)
color = field.config.color;
} else {
color = {
mode: FieldColorMode.Fixed,
fixedColor: colors[graphs.length % colors.length],
};
}
field.config = fieldOptions
? {
...field.config,
unit: fieldOptions.defaults.unit,
decimals: fieldOptions.defaults.decimals,
color,
}
: { ...field.config, color };
field.display = getDisplayProcessor({ field });
// Time step is used to determine bars width when graph is rendered as bar chart
const timeStep = getSeriesTimeStep(timeField);
const useMsDateFormat = hasMsResolution(timeField);
timeField.display = getDisplayProcessor({
timeZone,
field: {
...timeField,
type: timeField.type,
config: {
unit: `time:${useMsDateFormat ? MS_DATE_TIME_FORMAT : DEFAULT_DATE_TIME_FORMAT}`,
},
},
});
graphs.push({
label: field.name,
data: points,
color: field.config.color?.fixedColor,
info: statsDisplayValues,
isVisible: true,
yAxis: {
index: (seriesOptions[field.name] && seriesOptions[field.name].yAxis) || 1,
},
// This index is used later on to retrieve appropriate series/time for X and Y axes
seriesIndex: fieldColumnIndex,
timeField: { ...timeField },
valueField: { ...field },
timeStep,
});
}
}
}
return graphs;
}
