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

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
3 changed files with 22 additions and 10 deletions
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 MIN_VALUE_HEIGHT = 18;
const MAX_VALUE_HEIGHT = 50; const MAX_VALUE_HEIGHT = 50;
const MIN_VALUE_WIDTH = 50; const MIN_VALUE_WIDTH = 50;
const MAX_VALUE_WIDTH = 100; const MAX_VALUE_WIDTH = 150;
const LINE_HEIGHT = 1.5; const TITLE_LINE_HEIGHT = 1.5;
const VALUE_LINE_HEIGHT = 1;
export interface Props extends Themeable { export interface Props extends Themeable {
height: number; height: number;
@@ -227,7 +228,7 @@ function calculateTitleDimensions(props: Props): TitleDimensions {
return { return {
fontSize: 14, fontSize: 14,
width: width, width: width,
height: 14 * LINE_HEIGHT, height: 14 * TITLE_LINE_HEIGHT,
placement: 'below', placement: 'below',
}; };
} }
@@ -238,7 +239,7 @@ function calculateTitleDimensions(props: Props): TitleDimensions {
const titleHeight = Math.max(Math.min(height * maxTitleHeightRatio, MAX_VALUE_HEIGHT), 17); const titleHeight = Math.max(Math.min(height * maxTitleHeightRatio, MAX_VALUE_HEIGHT), 17);
return { return {
fontSize: titleHeight / LINE_HEIGHT, fontSize: titleHeight / TITLE_LINE_HEIGHT,
width: 0, width: 0,
height: titleHeight, height: titleHeight,
placement: 'above', placement: 'above',
@@ -251,7 +252,7 @@ function calculateTitleDimensions(props: Props): TitleDimensions {
const titleHeight = Math.max(height * maxTitleHeightRatio, MIN_VALUE_HEIGHT); const titleHeight = Math.max(height * maxTitleHeightRatio, MIN_VALUE_HEIGHT);
return { return {
fontSize: titleHeight / LINE_HEIGHT, fontSize: titleHeight / TITLE_LINE_HEIGHT,
height: 0, height: 0,
width: Math.min(Math.max(width * maxTitleWidthRatio, 50), 200), width: Math.min(Math.max(width * maxTitleWidthRatio, 50), 200),
placement: 'left', placement: 'left',
@@ -485,7 +486,7 @@ export function getValueColor(props: Props): string {
* Only exported to for unit test * Only exported to for unit test
*/ */
function getValueStyles(value: string, color: string, width: number, height: number): CSSProperties { 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 guess = width / (value.length * 1.1);
const fontSize = Math.min(Math.max(guess, 14), heightFont); 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`, width: `${width}px`,
display: 'flex', display: 'flex',
alignItems: 'center', 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", "alignItems": "center",
"color": "#73BF69", "color": "#73BF69",
"display": "flex", "display": "flex",
"fontSize": "27.27px", "fontSize": "27.2727px",
"height": "300px", "height": "300px",
"lineHeight": 1,
"paddingLeft": "10px", "paddingLeft": "10px",
"width": "60px", "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) { if (length > 12) {
return FONT_SCALE - (length * 5) / 110; return FONT_SCALE - (length * 5) / 110;
} }
return FONT_SCALE - (length * 5) / 100; return FONT_SCALE - (length * 5) / 101;
} }
draw() { draw() {
@@ -78,7 +78,8 @@ export class Gauge extends PureComponent<Props> {
const gaugeWidthReduceRatio = showThresholdLabels ? 1.5 : 1; const gaugeWidthReduceRatio = showThresholdLabels ? 1.5 : 1;
const gaugeWidth = Math.min(dimension / 5.5, 40) / gaugeWidthReduceRatio; const gaugeWidth = Math.min(dimension / 5.5, 40) / gaugeWidthReduceRatio;
const thresholdMarkersWidth = gaugeWidth / 5; 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 thresholdLabelFontSize = fontSize / 2.5;
const options: any = { const options: any = {