IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Great progress on bar gauge look

Browse Source
This commit is contained in:
Torkel Ödegaard 2019-03-17 13:59:26 +01:00
parent 91ff146d7d
commit 1303a66725
3 changed files with 52 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-ui/src/components/BarGauge/BarGauge.test.tsx
View File

@ -15,7 +15,7 @@ const setup = (propOverrides?: object) => {
minValue: 0, minValue: 0,
prefix: '', prefix: '',
suffix: '', suffix: '',
displayMode: 'simple', displayMode: 'basic',
thresholds: [{ index: 0, value: -Infinity, color: '#7EB26D' }], thresholds: [{ index: 0, value: -Infinity, color: '#7EB26D' }],
unit: 'none', unit: 'none',
height: 300, height: 300,

67
packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
View File

@ -23,7 +23,7 @@ export interface Props extends Themeable {
prefix?: string; prefix?: string;
suffix?: string; suffix?: string;
decimals?: number; decimals?: number;
displayMode: 'simple' | 'lcd'; displayMode: 'basic' | 'lcd' | 'gradient';
} }
export class BarGauge extends PureComponent<Props> { export class BarGauge extends PureComponent<Props> {
@ -32,7 +32,7 @@ export class BarGauge extends PureComponent<Props> {
minValue: 0, minValue: 0,
value: 100, value: 100,
unit: 'none', unit: 'none',
displayMode: 'simple', displayMode: 'basic',
orientation: VizOrientation.Horizontal, orientation: VizOrientation.Horizontal,
thresholds: [], thresholds: [],
valueMappings: [], valueMappings: [],
@ -47,10 +47,13 @@ export class BarGauge extends PureComponent<Props> {
const formatFunc = getValueFormat(unit); const formatFunc = getValueFormat(unit);
const valueFormatted = formatFunc(numericValue, decimals); const valueFormatted = formatFunc(numericValue, decimals);
if (displayMode === 'lcd') { switch (displayMode) {
return this.renderLcdMode(valueFormatted, valuePercent); case 'lcd':
} else { return this.renderRetroBars(valueFormatted, valuePercent);
return this.renderSimpleMode(valueFormatted, valuePercent); case 'basic':
case 'gradient':
default:
return this.renderBasicAndGradientBars(valueFormatted, valuePercent);
} }
} }
@ -72,15 +75,15 @@ export class BarGauge extends PureComponent<Props> {
return { return {
value: color, value: color,
border: color, border: color,
bar: tinycolor(color) background: tinycolor(color)
.setAlpha(0.3) .setAlpha(0.15)
.toRgbString(), .toRgbString(),
}; };
} }
return { return {
value: getColorFromHexRgbOrName('gray', theme.type), value: getColorFromHexRgbOrName('gray', theme.type),
bar: getColorFromHexRgbOrName('gray', theme.type), background: getColorFromHexRgbOrName('gray', theme.type),
border: getColorFromHexRgbOrName('gray', theme.type), border: getColorFromHexRgbOrName('gray', theme.type),
}; };
} }
@ -136,14 +139,15 @@ export class BarGauge extends PureComponent<Props> {
return gradient + ')'; return gradient + ')';
} }
renderSimpleMode(valueFormatted: string, valuePercent: number): ReactNode { renderBasicAndGradientBars(valueFormatted: string, valuePercent: number): ReactNode {
const { height, width } = this.props; const { height, width, displayMode } = this.props;
const maxSize = this.size * BAR_SIZE_RATIO; const maxSize = this.size * BAR_SIZE_RATIO;
const barSize = Math.max(valuePercent * maxSize, 0); const barSize = Math.max(valuePercent * maxSize, 0);
const colors = this.getValueColors(); const colors = this.getValueColors();
const spaceForText = this.isVertical ? width : this.size - maxSize; const spaceForText = this.isVertical ? width : Math.min(this.size - maxSize, height);
const valueStyles = this.getValueStyles(valueFormatted, colors.value, spaceForText); const valueStyles = this.getValueStyles(valueFormatted, colors.value, spaceForText);
const isBasic = displayMode === 'basic';
const containerStyles: CSSProperties = { const containerStyles: CSSProperties = {
width: `${width}px`, width: `${width}px`,
@ -151,26 +155,45 @@ export class BarGauge extends PureComponent<Props> {
display: 'flex', display: 'flex',
}; };
const barStyles: CSSProperties = {}; const barStyles: CSSProperties = {
borderRadius: '3px',
};
// Custom styles for vertical orientation
if (this.isVertical) { if (this.isVertical) {
// Custom styles for vertical orientation
containerStyles.flexDirection = 'column'; containerStyles.flexDirection = 'column';
containerStyles.justifyContent = 'flex-end'; containerStyles.justifyContent = 'flex-end';
barStyles.transition = 'height 1s';
barStyles.height = `${barSize}px`; barStyles.height = `${barSize}px`;
barStyles.width = `${width}px`; barStyles.width = `${width}px`;
// barStyles.borderTop = `1px solid ${colors.border}`; if (isBasic) {
barStyles.background = this.getBarGradient(maxSize); // Basic styles
barStyles.background = `${colors.background}`;
barStyles.border = `1px solid ${colors.border}`;
barStyles.boxShadow = `0 0 4px ${colors.border}`;
} else {
// Gradient styles
barStyles.background = this.getBarGradient(maxSize);
}
} else { } else {
// Custom styles for horizontal orientation // Custom styles for horizontal orientation
containerStyles.flexDirection = 'row-reverse'; containerStyles.flexDirection = 'row-reverse';
containerStyles.justifyContent = 'flex-end'; containerStyles.justifyContent = 'flex-end';
containerStyles.alignItems = 'center'; containerStyles.alignItems = 'center';
barStyles.transition = 'width 1s';
barStyles.height = `${height}px`; barStyles.height = `${height}px`;
barStyles.width = `${barSize}px`; barStyles.width = `${barSize}px`;
barStyles.marginRight = '10px'; barStyles.marginRight = '10px';
// barStyles.borderRight = `1px solid ${colors.border}`;
barStyles.background = this.getBarGradient(maxSize); if (isBasic) {
// Basic styles
barStyles.background = `${colors.background}`;
barStyles.border = `1px solid ${colors.border}`;
barStyles.boxShadow = `0 0 4px ${colors.border}`;
} else {
// Gradient styles
barStyles.background = this.getBarGradient(maxSize);
}
} }
return ( return (
@ -221,7 +244,7 @@ export class BarGauge extends PureComponent<Props> {
}; };
} }
renderLcdMode(valueFormatted: string, valuePercent: number): ReactNode { renderRetroBars(valueFormatted: string, valuePercent: number): ReactNode {
const { height, width, maxValue, minValue } = this.props; const { height, width, maxValue, minValue } = this.props;
const valueRange = maxValue - minValue; const valueRange = maxValue - minValue;
@ -230,7 +253,7 @@ export class BarGauge extends PureComponent<Props> {
const cellCount = maxSize / 20; const cellCount = maxSize / 20;
const cellSize = (maxSize - cellSpacing * cellCount) / cellCount; const cellSize = (maxSize - cellSpacing * cellCount) / cellCount;
const colors = this.getValueColors(); const colors = this.getValueColors();
const spaceForText = this.isVertical ? width : this.size - maxSize; const spaceForText = this.isVertical ? width : Math.min(this.size - maxSize, height);
const valueStyles = this.getValueStyles(valueFormatted, colors.value, spaceForText); const valueStyles = this.getValueStyles(valueFormatted, colors.value, spaceForText);
const containerStyles: CSSProperties = { const containerStyles: CSSProperties = {
@ -260,8 +283,6 @@ export class BarGauge extends PureComponent<Props> {
if (cellColor.isLit) { if (cellColor.isLit) {
cellStyles.boxShadow = `0 0 4px ${cellColor.border}`; cellStyles.boxShadow = `0 0 4px ${cellColor.border}`;
// cellStyles.border = `1px solid ${cellColor.border}`;
// cellStyles.background = `${cellColor.backgroundShade}`;
cellStyles.backgroundImage = `radial-gradient(${cellColor.background} 10%, ${cellColor.backgroundShade})`; cellStyles.backgroundImage = `radial-gradient(${cellColor.background} 10%, ${cellColor.backgroundShade})`;
} else { } else {
cellStyles.backgroundColor = cellColor.background; cellStyles.backgroundColor = cellColor.background;
@ -293,7 +314,7 @@ export class BarGauge extends PureComponent<Props> {
interface BarColors { interface BarColors {
value: string; value: string;
bar: string; background: string;
border: string; border: string;
} }

10
public/app/plugins/panel/bargauge/types.ts
View File

@ -8,7 +8,7 @@ export interface BarGaugeOptions {
valueOptions: SingleStatValueOptions; valueOptions: SingleStatValueOptions;
valueMappings: ValueMapping[]; valueMappings: ValueMapping[];
thresholds: Threshold[]; thresholds: Threshold[];
displayMode: 'simple' | 'lcd'; displayMode: 'basic' | 'lcd' | 'gradient';
} }
export const orientationOptions: SelectOptionItem[] = [ export const orientationOptions: SelectOptionItem[] = [
@ -16,12 +16,16 @@ export const orientationOptions: SelectOptionItem[] = [
{ value: VizOrientation.Vertical, label: 'Vertical' }, { value: VizOrientation.Vertical, label: 'Vertical' },
]; ];
export const displayModes: SelectOptionItem[] = [{ value: 'simple', label: 'Simple' }, { value: 'lcd', label: 'LCD' }]; export const displayModes: SelectOptionItem[] = [
{ value: 'gradient', label: 'Gradient' },
{ value: 'lcd', label: 'Retro LCD' },
{ value: 'basic', label: 'Basic' },
];
export const defaults: BarGaugeOptions = { export const defaults: BarGaugeOptions = {
minValue: 0, minValue: 0,
maxValue: 100, maxValue: 100,
displayMode: 'simple', displayMode: 'basic',
orientation: VizOrientation.Horizontal, orientation: VizOrientation.Horizontal,
valueOptions: { valueOptions: {
unit: 'none', unit: 'none',