IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-28 03:34:15 -06:00
Code Issues Packages Projects Releases Wiki Activity

Bar gauge styling tweaks

Browse Source
This commit is contained in:
Torkel Ödegaard 2019-03-15 08:29:11 +01:00
parent 09eddd1676
commit 707d188428
1 changed files with 46 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -149,7 +149,7 @@ export class BarGauge extends PureComponent<Props> {
);
}
getCellColor(positionValue: TimeSeriesValue): string {
getCellColor(positionValue: TimeSeriesValue): CellColors {
const { thresholds, theme, value } = this.props;
const activeThreshold = getThresholdForValue(thresholds, positionValue);
@ -158,17 +158,33 @@ export class BarGauge extends PureComponent<Props> {
// if we are past real value the cell is not "on"
if (value === null || (positionValue !== null && positionValue > value)) {
return tinycolor(color)
.setAlpha(0.15)
.toRgbString();
return {
background: tinycolor(color)
.setAlpha(0.15)
.toRgbString(),
border: 'transparent',
isLit: false,
};
} else {
return tinycolor(color)
.setAlpha(0.7)
.toRgbString();
return {
background: tinycolor(color)
.setAlpha(0.85)
.toRgbString(),
backgroundShade: tinycolor(color)
.setAlpha(0.55)
.toRgbString(),
border: tinycolor(color)
.setAlpha(0.9)
.toRgbString(),
isLit: true,
};
}
}
return 'gray';
return {
background: 'gray',
border: 'gray',
};
}
renderLcdMode(valueFormatted: string, valuePercent: number): ReactNode {
@ -176,8 +192,8 @@ export class BarGauge extends PureComponent<Props> {
const valueRange = maxValue - minValue;
const maxSize = this.size * BAR_SIZE_RATIO;
const cellSpacing = 4;
const cellCount = 30;
const cellSpacing = 5;
const cellCount = 25;
const cellSize = (maxSize - cellSpacing * cellCount) / cellCount;
const colors = this.getValueColors();
const valueStyles = this.getValueStyles(valueFormatted, colors.value, this.size - maxSize);
@ -191,9 +207,11 @@ export class BarGauge extends PureComponent<Props> {
if (orientation === VizOrientation.Horizontal) {
containerStyles.flexDirection = 'row';
containerStyles.alignItems = 'center';
valueStyles.marginLeft = '20px';
} else {
containerStyles.flexDirection = 'column-reverse';
containerStyles.alignItems = 'center';
valueStyles.marginBottom = '20px';
}
const cells: JSX.Element[] = [];
@ -202,18 +220,26 @@ export class BarGauge extends PureComponent<Props> {
const currentValue = (valueRange / cellCount) * i;
const cellColor = this.getCellColor(currentValue);
const cellStyles: CSSProperties = {
backgroundColor: cellColor,
borderRadius: '2px',
};
if (cellColor.isLit) {
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})`;
} else {
cellStyles.backgroundColor = cellColor.background;
}
if (orientation === VizOrientation.Horizontal) {
cellStyles.width = `${cellSize}px`;
cellStyles.height = `${height}px`;
cellStyles.marginRight = '4px';
cellStyles.marginRight = `${cellSpacing}px`;
} else {
cellStyles.height = `${cellSize}px`;
cellStyles.width = `${width}px`;
cellStyles.marginTop = '4px';
cellStyles.marginTop = `${cellSpacing}px`;
}
cells.push(<div style={cellStyles} />);
@ -235,3 +261,10 @@ interface BarColors {
bar: string;
border: string;
}
interface CellColors {
background: string;
backgroundShade?: string;
border: string;
isLit?: boolean;
}