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: Improve font size auto sizing (#28797)

Browse Source 
* Gauge: Improved font size calculations

* Added some comments

* update

* Moving to variable
This commit is contained in:
Torkel Ödegaard 2020-11-04 17:07:37 +01:00 committed by GitHub
parent 5916ef94d0
commit 2b7a570273
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 6 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,8 +25,6 @@ export interface Props extends Themeable {
className?: string;
}
const FONT_SCALE = 1;
export class Gauge extends PureComponent<Props> {
canvasElement: any;
@ -95,13 +93,6 @@ export class Gauge extends PureComponent<Props> {
return formatted;
}
getFontScale(length: number): number {
if (length > 12) {
return FONT_SCALE - (length * 5) / 110;
}
return FONT_SCALE - (length * 5) / 101;
}
draw() {
const { field, showThresholdLabels, showThresholdMarkers, width, height, theme, value } = this.props;
@ -112,7 +103,12 @@ export class Gauge extends PureComponent<Props> {
const gaugeWidth = Math.min(dimension / 5.5, 40) / gaugeWidthReduceRatio;
const thresholdMarkersWidth = gaugeWidth / 5;
const text = formattedValueToString(value);
const fontSize = calculateFontSize(text, dimension - gaugeWidth * 3, dimension, 1, 48);
// This not 100% accurate as I am unsure of flot's calculations here
const valueWidthBase = Math.min(width, dimension * 1.3) * 0.9;
// remove gauge & marker width (on left and right side)
// and 10px is some padding that flot adds to the outer canvas
const valueWidth = valueWidthBase - ((gaugeWidth + (showThresholdMarkers ? thresholdMarkersWidth : 0)) * 2 + 10);
const fontSize = calculateFontSize(text, valueWidth, dimension, 1, 48);
const thresholdLabelFontSize = fontSize / 2.5;
let min = field.min!;