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

Gauge/BarGauge: font size improvements (#17292)

Browse Source
This commit is contained in:
Torkel Ödegaard 2019-05-27 12:13:08 +02:00 committed by GitHub
parent 3dda812f12
commit 5358c5fe6b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,8 +11,9 @@ import { DisplayValue, Themeable, TimeSeriesValue, Threshold, VizOrientation } f
const MIN_VALUE_HEIGHT = 18;
const MAX_VALUE_HEIGHT = 50;
const MIN_VALUE_WIDTH = 50;
const MAX_VALUE_WIDTH = 100;
const LINE_HEIGHT = 1.5;
const MAX_VALUE_WIDTH = 150;
const TITLE_LINE_HEIGHT = 1.5;
const VALUE_LINE_HEIGHT = 1;
export interface Props extends Themeable {
height: number;
@ -227,7 +228,7 @@ function calculateTitleDimensions(props: Props): TitleDimensions {
return {
fontSize: 14,
width: width,
height: 14 * LINE_HEIGHT,
height: 14 * TITLE_LINE_HEIGHT,
placement: 'below',
};
}
@ -238,7 +239,7 @@ function calculateTitleDimensions(props: Props): TitleDimensions {
const titleHeight = Math.max(Math.min(height * maxTitleHeightRatio, MAX_VALUE_HEIGHT), 17);
return {
fontSize: titleHeight / LINE_HEIGHT,
fontSize: titleHeight / TITLE_LINE_HEIGHT,
width: 0,
height: titleHeight,
placement: 'above',
@ -251,7 +252,7 @@ function calculateTitleDimensions(props: Props): TitleDimensions {
const titleHeight = Math.max(height * maxTitleHeightRatio, MIN_VALUE_HEIGHT);
return {
fontSize: titleHeight / LINE_HEIGHT,
fontSize: titleHeight / TITLE_LINE_HEIGHT,
height: 0,
width: Math.min(Math.max(width * maxTitleWidthRatio, 50), 200),
placement: 'left',
@ -485,7 +486,7 @@ export function getValueColor(props: Props): string {
* Only exported to for unit test
*/
function getValueStyles(value: string, color: string, width: number, height: number): CSSProperties {
const heightFont = height / LINE_HEIGHT;
const heightFont = height / VALUE_LINE_HEIGHT;
const guess = width / (value.length * 1.1);
const fontSize = Math.min(Math.max(guess, 14), heightFont);
@ -495,6 +496,15 @@ function getValueStyles(value: string, color: string, width: number, height: num
width: `${width}px`,
display: 'flex',
alignItems: 'center',
fontSize: fontSize.toFixed(2) + 'px',
lineHeight: VALUE_LINE_HEIGHT,
fontSize: fontSize.toFixed(4) + 'px',
};
}
// function getTextWidth(text: string): number {
// const canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
// var context = canvas.getContext("2d");
// context.font = "'Roboto', 'Helvetica Neue', Arial, sans-serif";
// var metrics = context.measureText(text);
// return metrics.width;
// }

3
packages/grafana-ui/src/components/BarGauge/__snapshots__/BarGauge.test.tsx.snap
View File

@ -18,8 +18,9 @@ exports[`BarGauge Render with basic options should render 1`] = `
"alignItems": "center",
"color": "#73BF69",
"display": "flex",
"fontSize": "27.27px",
"fontSize": "27.2727px",
"height": "300px",
"lineHeight": 1,
"paddingLeft": "10px",
"width": "60px",
}

5
packages/grafana-ui/src/components/Gauge/Gauge.tsx
View File

@ -58,7 +58,7 @@ export class Gauge extends PureComponent<Props> {
if (length > 12) {
return FONT_SCALE - (length * 5) / 110;
}
return FONT_SCALE - (length * 5) / 100;
return FONT_SCALE - (length * 5) / 101;
}
draw() {
@ -78,7 +78,8 @@ export class Gauge extends PureComponent<Props> {
const gaugeWidthReduceRatio = showThresholdLabels ? 1.5 : 1;
const gaugeWidth = Math.min(dimension / 5.5, 40) / gaugeWidthReduceRatio;
const thresholdMarkersWidth = gaugeWidth / 5;
const fontSize = Math.min(dimension / 5.5, 100) * (value.text !== null ? this.getFontScale(value.text.length) : 1);
const fontSize = Math.min(dimension / 4, 100) * (value.text !== null ? this.getFontScale(value.text.length) : 1);
const thresholdLabelFontSize = fontSize / 2.5;
const options: any = {