Skip to content

N
nexpie-grafana-theme
Commit 533b938f by Hugo Häggmark
Options

Removed baseColor

parent e89746c3
Showing with 35 additions and 35 deletions
packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
...@@ -19,9 +19,15 @@ export class ThresholdsEditor extends PureComponent<Props, State> { ...@@ -19,9 +19,15 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
constructor(props: Props) { constructor(props: Props) {
super(props); super(props);
const thresholds: Threshold[] = const addDefaultThreshold = this.props.thresholds.length === 0;
props.thresholds.length > 0 ? props.thresholds : [{ index: 0, value: -Infinity, color: colors[0] }]; const thresholds: Threshold[] = addDefaultThreshold
? [{ index: 0, value: -Infinity, color: colors[0] }]
: props.thresholds;
this.state = { thresholds }; this.state = { thresholds };
if (addDefaultThreshold) {
this.onChange();
}
} }
onAddThreshold = (index: number) => { onAddThreshold = (index: number) => {
...@@ -62,7 +68,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> { ...@@ -62,7 +68,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
}, },
]), ]),
}, },
() => this.updateGauge() () => this.onChange()
); );
}; };
...@@ -85,7 +91,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> { ...@@ -85,7 +91,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
thresholds: newThresholds.filter(t => t !== threshold), thresholds: newThresholds.filter(t => t !== threshold),
}; };
}, },
() => this.updateGauge() () => this.onChange()
); );
}; };
...@@ -124,11 +130,10 @@ export class ThresholdsEditor extends PureComponent<Props, State> { ...@@ -124,11 +130,10 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
{ {
thresholds: newThresholds, thresholds: newThresholds,
}, },
() => this.updateGauge() () => this.onChange()
); );
}; };
onChangeBaseColor = (color: string) => this.props.onChange(this.state.thresholds);
onBlur = () => { onBlur = () => {
this.setState(prevState => { this.setState(prevState => {
const sortThresholds = this.sortThresholds([...prevState.thresholds]); const sortThresholds = this.sortThresholds([...prevState.thresholds]);
...@@ -139,10 +144,10 @@ export class ThresholdsEditor extends PureComponent<Props, State> { ...@@ -139,10 +144,10 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
return { thresholds: sortThresholds }; return { thresholds: sortThresholds };
}); });
this.updateGauge(); this.onChange();
}; };
updateGauge = () => { onChange = () => {
this.props.onChange(this.state.thresholds); this.props.onChange(this.state.thresholds);
}; };
......
public/app/plugins/panel/gauge/GaugePanelOptions.tsx
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { import {
BasicGaugeColor,
PanelOptionsProps, PanelOptionsProps,
ThresholdsEditor, ThresholdsEditor,
Threshold, Threshold,
...@@ -15,7 +14,6 @@ import { GaugeOptions } from './types'; ...@@ -15,7 +14,6 @@ import { GaugeOptions } from './types';
export const defaultProps = { export const defaultProps = {
options: { options: {
baseColor: BasicGaugeColor.Green,
minValue: 0, minValue: 0,
maxValue: 100, maxValue: 100,
prefix: '', prefix: '',
......
public/app/plugins/panel/gauge/types.ts
import { Threshold, ValueMapping } from '@grafana/ui'; import { Threshold, ValueMapping } from '@grafana/ui';
export interface GaugeOptions { export interface GaugeOptions {
baseColor: string;
decimals: number; decimals: number;
valueMappings: ValueMapping[]; valueMappings: ValueMapping[];
maxValue: number; maxValue: number;
......
public/app/viz/Gauge.test.tsx
import React from 'react'; import React from 'react';
import { shallow } from 'enzyme'; import { shallow } from 'enzyme';
import { BasicGaugeColor, TimeSeriesVMs } from '@grafana/ui'; import { TimeSeriesVMs } from '@grafana/ui';
import { Gauge, Props } from './Gauge'; import { Gauge, Props } from './Gauge';
...@@ -10,7 +10,6 @@ jest.mock('jquery', () => ({ ...@@ -10,7 +10,6 @@ jest.mock('jquery', () => ({
const setup = (propOverrides?: object) => { const setup = (propOverrides?: object) => {
const props: Props = { const props: Props = {
baseColor: BasicGaugeColor.Green,
maxValue: 100, maxValue: 100,
valueMappings: [], valueMappings: [],
minValue: 0, minValue: 0,
...@@ -18,7 +17,7 @@ const setup = (propOverrides?: object) => { ...@@ -18,7 +17,7 @@ const setup = (propOverrides?: object) => {
showThresholdMarkers: true, showThresholdMarkers: true,
showThresholdLabels: false, showThresholdLabels: false,
suffix: '', suffix: '',
thresholds: [], thresholds: [{ index: 0, value: -Infinity, color: '#7EB26D' }],
unit: 'none', unit: 'none',
stat: 'avg', stat: 'avg',
height: 300, height: 300,
...@@ -42,12 +41,12 @@ describe('Get font color', () => { ...@@ -42,12 +41,12 @@ describe('Get font color', () => {
it('should get base color if no threshold', () => { it('should get base color if no threshold', () => {
const { instance } = setup(); const { instance } = setup();
expect(instance.getFontColor(40)).toEqual(BasicGaugeColor.Green); expect(instance.getFontColor(40)).toEqual('#7EB26D');
}); });
it('should be f2f2f2', () => { it('should be f2f2f2', () => {
const { instance } = setup({ const { instance } = setup({
thresholds: [{ value: 59, color: '#f2f2f2' }], thresholds: [{ index: 0, value: -Infinity, color: '#7EB26D' }, { index: 1, value: 59, color: '#f2f2f2' }],
}); });
expect(instance.getFontColor(58)).toEqual('#f2f2f2'); expect(instance.getFontColor(58)).toEqual('#f2f2f2');
......
public/app/viz/Gauge.tsx
...@@ -6,7 +6,6 @@ import config from '../core/config'; ...@@ -6,7 +6,6 @@ import config from '../core/config';
import kbn from '../core/utils/kbn'; import kbn from '../core/utils/kbn';
export interface Props { export interface Props {
baseColor: string;
decimals: number; decimals: number;
height: number; height: number;
valueMappings: ValueMapping[]; valueMappings: ValueMapping[];
...@@ -27,7 +26,6 @@ export class Gauge extends PureComponent<Props> { ...@@ -27,7 +26,6 @@ export class Gauge extends PureComponent<Props> {
canvasElement: any; canvasElement: any;
static defaultProps = { static defaultProps = {
baseColor: BasicGaugeColor.Green,
maxValue: 100, maxValue: 100,
valueMappings: [], valueMappings: [],
minValue: 0, minValue: 0,
...@@ -91,24 +89,25 @@ export class Gauge extends PureComponent<Props> { ...@@ -91,24 +89,25 @@ export class Gauge extends PureComponent<Props> {
} }
getFontColor(value) { getFontColor(value) {
const { baseColor, maxValue, thresholds } = this.props; const { maxValue, thresholds } = this.props;
if (thresholds.length > 0) { if (thresholds.length === 1) {
const atThreshold = thresholds.filter(threshold => value <= threshold.value); return thresholds[0].color;
}
const atThreshold = thresholds.filter(threshold => value < threshold.value);
if (atThreshold.length > 0) { if (atThreshold.length > 0) {
return atThreshold[0].color; return atThreshold[0].color;
} else if (value <= maxValue) { } else if (value <= maxValue) {
return BasicGaugeColor.Red; return BasicGaugeColor.Red;
} }
}
return baseColor; return '';
} }
draw() { draw() {
const { const {
baseColor,
maxValue, maxValue,
minValue, minValue,
timeSeries, timeSeries,
...@@ -137,16 +136,16 @@ export class Gauge extends PureComponent<Props> { ...@@ -137,16 +136,16 @@ export class Gauge extends PureComponent<Props> {
const thresholdMarkersWidth = gaugeWidth / 5; const thresholdMarkersWidth = gaugeWidth / 5;
const thresholdLabelFontSize = fontSize / 2.5; const thresholdLabelFontSize = fontSize / 2.5;
const formattedThresholds = [ // const formattedThresholds = [
{ value: minValue, color: BasicGaugeColor.Green }, // { value: minValue, color: BasicGaugeColor.Green },
...thresholds.map((threshold, index) => { // ...thresholds.map((threshold, index) => {
return { // return {
value: threshold.value, // value: threshold.value,
color: index === 0 ? threshold.color : thresholds[index].color, // color: index === 0 ? threshold.color : thresholds[index].color,
}; // };
}), // }),
{ value: maxValue, color: thresholds.length > 0 ? BasicGaugeColor.Red : baseColor }, // { value: maxValue, color: thresholds.length > 0 ? BasicGaugeColor.Red : baseColor },
]; // ];
const options = { const options = {
series: { series: {
...@@ -164,7 +163,7 @@ export class Gauge extends PureComponent<Props> { ...@@ -164,7 +163,7 @@ export class Gauge extends PureComponent<Props> {
layout: { margin: 0, thresholdWidth: 0 }, layout: { margin: 0, thresholdWidth: 0 },
cell: { border: { width: 0 } }, cell: { border: { width: 0 } },
threshold: { threshold: {
values: formattedThresholds, values: thresholds,
label: { label: {
show: showThresholdLabels, show: showThresholdLabels,
margin: thresholdMarkersWidth + 1, margin: thresholdMarkersWidth + 1,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment