mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
rename to displayValues
This commit is contained in:
parent
bf0b9d9fe2
commit
6ae0d8e062
@ -3,7 +3,7 @@ import $ from 'jquery';
|
|||||||
import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette';
|
import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette';
|
||||||
import { Themeable, GrafanaThemeType } from '../../types/theme';
|
import { Themeable, GrafanaThemeType } from '../../types/theme';
|
||||||
import { Threshold, BasicGaugeColor } from '../../types/panel';
|
import { Threshold, BasicGaugeColor } from '../../types/panel';
|
||||||
import { DisplayValue } from '../../utils/valueProcessor';
|
import { DisplayValue } from '../../utils';
|
||||||
|
|
||||||
export interface Props extends Themeable {
|
export interface Props extends Themeable {
|
||||||
width: number;
|
width: number;
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import { getValueProcessor, getColorFromThreshold, ValueProcessor, DisplayValue } from './valueProcessor';
|
import { getDisplayProcessor, getColorFromThreshold, DisplayProcessor, DisplayValue } from './displayValue';
|
||||||
import { MappingType, ValueMapping } from '../types/panel';
|
import { MappingType, ValueMapping } from '../types/panel';
|
||||||
|
|
||||||
function assertSame(input: any, processorss: ValueProcessor[], match: DisplayValue) {
|
function assertSame(input: any, processorss: DisplayProcessor[], match: DisplayValue) {
|
||||||
processorss.forEach(processor => {
|
processorss.forEach(processor => {
|
||||||
const value = processor(input);
|
const value = processor(input);
|
||||||
expect(value.text).toEqual(match.text);
|
expect(value.text).toEqual(match.text);
|
||||||
@ -15,13 +15,13 @@ describe('Process simple display values', () => {
|
|||||||
// Don't test float values here since the decimal formatting changes
|
// Don't test float values here since the decimal formatting changes
|
||||||
const processors = [
|
const processors = [
|
||||||
// Without options, this shortcuts to a much easier implementation
|
// Without options, this shortcuts to a much easier implementation
|
||||||
getValueProcessor(),
|
getDisplayProcessor(),
|
||||||
|
|
||||||
// Add a simple option that is not used (uses a different base class)
|
// Add a simple option that is not used (uses a different base class)
|
||||||
getValueProcessor({ color: '#FFF' }),
|
getDisplayProcessor({ color: '#FFF' }),
|
||||||
|
|
||||||
// Add a simple option that is not used (uses a different base class)
|
// Add a simple option that is not used (uses a different base class)
|
||||||
getValueProcessor({ unit: 'locale' }),
|
getDisplayProcessor({ unit: 'locale' }),
|
||||||
];
|
];
|
||||||
|
|
||||||
it('support null', () => {
|
it('support null', () => {
|
||||||
@ -75,7 +75,7 @@ describe('Process simple display values', () => {
|
|||||||
|
|
||||||
describe('Processor with more configs', () => {
|
describe('Processor with more configs', () => {
|
||||||
it('support prefix & suffix', () => {
|
it('support prefix & suffix', () => {
|
||||||
const processor = getValueProcessor({
|
const processor = getDisplayProcessor({
|
||||||
prefix: 'AA_',
|
prefix: 'AA_',
|
||||||
suffix: '_ZZ',
|
suffix: '_ZZ',
|
||||||
});
|
});
|
||||||
@ -113,7 +113,7 @@ describe('Format value', () => {
|
|||||||
it('should return if value isNaN', () => {
|
it('should return if value isNaN', () => {
|
||||||
const valueMappings: ValueMapping[] = [];
|
const valueMappings: ValueMapping[] = [];
|
||||||
const value = 'N/A';
|
const value = 'N/A';
|
||||||
const instance = getValueProcessor({ mappings: valueMappings });
|
const instance = getDisplayProcessor({ mappings: valueMappings });
|
||||||
|
|
||||||
const result = instance(value);
|
const result = instance(value);
|
||||||
|
|
||||||
@ -124,7 +124,7 @@ describe('Format value', () => {
|
|||||||
const valueMappings: ValueMapping[] = [];
|
const valueMappings: ValueMapping[] = [];
|
||||||
const value = '6';
|
const value = '6';
|
||||||
|
|
||||||
const instance = getValueProcessor({ mappings: valueMappings, decimals: 1 });
|
const instance = getDisplayProcessor({ mappings: valueMappings, decimals: 1 });
|
||||||
|
|
||||||
const result = instance(value);
|
const result = instance(value);
|
||||||
|
|
||||||
@ -137,7 +137,7 @@ describe('Format value', () => {
|
|||||||
{ id: 1, operator: '', text: '1-9', type: MappingType.RangeToText, from: '1', to: '9' },
|
{ id: 1, operator: '', text: '1-9', type: MappingType.RangeToText, from: '1', to: '9' },
|
||||||
];
|
];
|
||||||
const value = '10';
|
const value = '10';
|
||||||
const instance = getValueProcessor({ mappings: valueMappings, decimals: 1 });
|
const instance = getDisplayProcessor({ mappings: valueMappings, decimals: 1 });
|
||||||
|
|
||||||
const result = instance(value);
|
const result = instance(value);
|
||||||
|
|
||||||
@ -150,7 +150,7 @@ describe('Format value', () => {
|
|||||||
{ id: 1, operator: '', text: 'elva', type: MappingType.ValueToText, value: '11' },
|
{ id: 1, operator: '', text: 'elva', type: MappingType.ValueToText, value: '11' },
|
||||||
];
|
];
|
||||||
const value = '11';
|
const value = '11';
|
||||||
const instance = getValueProcessor({ mappings: valueMappings, decimals: 1 });
|
const instance = getDisplayProcessor({ mappings: valueMappings, decimals: 1 });
|
||||||
|
|
||||||
expect(instance(value).text).toEqual('1-20');
|
expect(instance(value).text).toEqual('1-20');
|
||||||
});
|
});
|
@ -4,18 +4,19 @@ import { getValueFormat, DecimalCount } from './valueFormats/valueFormats';
|
|||||||
import { getMappedValue } from './valueMappings';
|
import { getMappedValue } from './valueMappings';
|
||||||
import { GrafanaTheme, GrafanaThemeType } from '../types/theme';
|
import { GrafanaTheme, GrafanaThemeType } from '../types/theme';
|
||||||
import { getColorFromHexRgbOrName } from './namedColorsPalette';
|
import { getColorFromHexRgbOrName } from './namedColorsPalette';
|
||||||
|
import moment from 'moment';
|
||||||
|
|
||||||
export interface DisplayValue {
|
export interface DisplayValue {
|
||||||
text: string; // How the value should be displayed
|
text: string; // Show in the UI
|
||||||
numeric: number; // Use isNaN to check if it actually is a number
|
numeric: number; // Use isNaN to check if it is a real number
|
||||||
color?: string; // suggested color
|
color?: string; // color based on configs or Threshold
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface DisplayValueOptions {
|
export interface DisplayValueOptions {
|
||||||
unit?: string;
|
unit?: string;
|
||||||
decimals?: DecimalCount;
|
decimals?: DecimalCount;
|
||||||
scaledDecimals?: DecimalCount;
|
scaledDecimals?: DecimalCount;
|
||||||
isUtc?: boolean;
|
dateFormat?: string; // If set try to convert numbers to date
|
||||||
|
|
||||||
color?: string;
|
color?: string;
|
||||||
mappings?: ValueMapping[];
|
mappings?: ValueMapping[];
|
||||||
@ -23,13 +24,17 @@ export interface DisplayValueOptions {
|
|||||||
prefix?: string;
|
prefix?: string;
|
||||||
suffix?: string;
|
suffix?: string;
|
||||||
|
|
||||||
|
// Alternative to empty string
|
||||||
noValue?: string;
|
noValue?: string;
|
||||||
|
|
||||||
|
// Context
|
||||||
|
isUtc?: boolean;
|
||||||
theme?: GrafanaTheme; // Will pick 'dark' if not defined
|
theme?: GrafanaTheme; // Will pick 'dark' if not defined
|
||||||
}
|
}
|
||||||
|
|
||||||
export type ValueProcessor = (value: any) => DisplayValue;
|
export type DisplayProcessor = (value: any) => DisplayValue;
|
||||||
|
|
||||||
export function getValueProcessor(options?: DisplayValueOptions): ValueProcessor {
|
export function getDisplayProcessor(options?: DisplayValueOptions): DisplayProcessor {
|
||||||
if (options && !_.isEmpty(options)) {
|
if (options && !_.isEmpty(options)) {
|
||||||
const formatFunc = getValueFormat(options.unit || 'none');
|
const formatFunc = getValueFormat(options.unit || 'none');
|
||||||
return (value: any) => {
|
return (value: any) => {
|
||||||
@ -52,6 +57,14 @@ export function getValueProcessor(options?: DisplayValueOptions): ValueProcessor
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (options.dateFormat) {
|
||||||
|
const date = toMoment(value, numeric, options.dateFormat);
|
||||||
|
if (date.isValid()) {
|
||||||
|
text = date.format(options.dateFormat);
|
||||||
|
shouldFormat = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (!isNaN(numeric)) {
|
if (!isNaN(numeric)) {
|
||||||
if (shouldFormat && !_.isBoolean(value)) {
|
if (shouldFormat && !_.isBoolean(value)) {
|
||||||
text = formatFunc(numeric, options.decimals, options.scaledDecimals, options.isUtc);
|
text = formatFunc(numeric, options.decimals, options.scaledDecimals, options.isUtc);
|
||||||
@ -76,6 +89,20 @@ export function getValueProcessor(options?: DisplayValueOptions): ValueProcessor
|
|||||||
return toStringProcessor;
|
return toStringProcessor;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function toMoment(value: any, numeric: number, format: string): moment.Moment {
|
||||||
|
if (!isNaN(numeric)) {
|
||||||
|
const v = moment(numeric);
|
||||||
|
if (v.isValid()) {
|
||||||
|
return v;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const v = moment(value, format);
|
||||||
|
if (v.isValid) {
|
||||||
|
return v;
|
||||||
|
}
|
||||||
|
return moment(value); // moment will try to parse the format
|
||||||
|
}
|
||||||
|
|
||||||
/** Will return any value as a number or NaN */
|
/** Will return any value as a number or NaN */
|
||||||
function toNumber(value: any): number {
|
function toNumber(value: any): number {
|
||||||
if (typeof value === 'number') {
|
if (typeof value === 'number') {
|
@ -3,5 +3,6 @@ export * from './valueFormats/valueFormats';
|
|||||||
export * from './colors';
|
export * from './colors';
|
||||||
export * from './namedColorsPalette';
|
export * from './namedColorsPalette';
|
||||||
export * from './string';
|
export * from './string';
|
||||||
|
export * from './displayValue';
|
||||||
export * from './deprecationWarning';
|
export * from './deprecationWarning';
|
||||||
export { getMappedValue } from './valueMappings';
|
export { getMappedValue } from './valueMappings';
|
||||||
|
@ -5,7 +5,7 @@ import React, { PureComponent } from 'react';
|
|||||||
import { FormField, FormLabel, PanelOptionsGroup, UnitPicker } from '@grafana/ui';
|
import { FormField, FormLabel, PanelOptionsGroup, UnitPicker } from '@grafana/ui';
|
||||||
|
|
||||||
// Types
|
// Types
|
||||||
import { DisplayValueOptions } from '@grafana/ui/src/utils/valueProcessor';
|
import { DisplayValueOptions } from '@grafana/ui';
|
||||||
|
|
||||||
const labelWidth = 6;
|
const labelWidth = 6;
|
||||||
|
|
||||||
|
@ -9,8 +9,7 @@ import { Gauge } from '@grafana/ui';
|
|||||||
|
|
||||||
// Types
|
// Types
|
||||||
import { GaugeOptions } from './types';
|
import { GaugeOptions } from './types';
|
||||||
import { PanelProps, NullValueMode, BasicGaugeColor } from '@grafana/ui/src/types';
|
import { PanelProps, NullValueMode, BasicGaugeColor, DisplayValue, getDisplayProcessor } from '@grafana/ui';
|
||||||
import { DisplayValue, getValueProcessor } from '@grafana/ui/src/utils/valueProcessor';
|
|
||||||
|
|
||||||
interface Props extends PanelProps<GaugeOptions> {}
|
interface Props extends PanelProps<GaugeOptions> {}
|
||||||
interface State {
|
interface State {
|
||||||
@ -42,7 +41,7 @@ export class GaugePanel extends Component<Props, State> {
|
|||||||
|
|
||||||
const prefix = replaceVariables(display.prefix);
|
const prefix = replaceVariables(display.prefix);
|
||||||
const suffix = replaceVariables(display.suffix);
|
const suffix = replaceVariables(display.suffix);
|
||||||
return getValueProcessor({
|
return getDisplayProcessor({
|
||||||
color: BasicGaugeColor.Red, // The default color
|
color: BasicGaugeColor.Red, // The default color
|
||||||
...display,
|
...display,
|
||||||
prefix,
|
prefix,
|
||||||
|
@ -12,7 +12,7 @@ import { SingleStatValueEditor } from 'app/plugins/panel/gauge/SingleStatValueEd
|
|||||||
import { GaugeOptionsBox } from './GaugeOptionsBox';
|
import { GaugeOptionsBox } from './GaugeOptionsBox';
|
||||||
import { GaugeOptions } from './types';
|
import { GaugeOptions } from './types';
|
||||||
import { DisplayValueEditor } from './DisplayValueEditor';
|
import { DisplayValueEditor } from './DisplayValueEditor';
|
||||||
import { DisplayValueOptions } from '@grafana/ui/src/utils/valueProcessor';
|
import { DisplayValueOptions } from '@grafana/ui';
|
||||||
|
|
||||||
export class GaugePanelEditor extends PureComponent<PanelEditorProps<GaugeOptions>> {
|
export class GaugePanelEditor extends PureComponent<PanelEditorProps<GaugeOptions>> {
|
||||||
onDisplayOptionsChanged = (displayOptions: DisplayValueOptions) =>
|
onDisplayOptionsChanged = (displayOptions: DisplayValueOptions) =>
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import { Threshold, ValueMapping } from '@grafana/ui';
|
import { Threshold, ValueMapping, DisplayValueOptions } from '@grafana/ui';
|
||||||
import { DisplayValueOptions } from '@grafana/ui/src/utils/valueProcessor';
|
|
||||||
|
|
||||||
export interface GaugeOptions {
|
export interface GaugeOptions {
|
||||||
maxValue: number;
|
maxValue: number;
|
||||||
|
Loading…
Reference in New Issue
Block a user