Commit 2b7a5702 by Torkel Ödegaard Committed by GitHub

Gauge: Improve font size auto sizing (#28797)

* Gauge: Improved font size calculations

* Added some comments

* update

* Moving to variable
parent 5916ef94
...@@ -25,8 +25,6 @@ export interface Props extends Themeable { ...@@ -25,8 +25,6 @@ export interface Props extends Themeable {
className?: string; className?: string;
} }
const FONT_SCALE = 1;
export class Gauge extends PureComponent<Props> { export class Gauge extends PureComponent<Props> {
canvasElement: any; canvasElement: any;
...@@ -95,13 +93,6 @@ export class Gauge extends PureComponent<Props> { ...@@ -95,13 +93,6 @@ export class Gauge extends PureComponent<Props> {
return formatted; return formatted;
} }
getFontScale(length: number): number {
if (length > 12) {
return FONT_SCALE - (length * 5) / 110;
}
return FONT_SCALE - (length * 5) / 101;
}
draw() { draw() {
const { field, showThresholdLabels, showThresholdMarkers, width, height, theme, value } = this.props; const { field, showThresholdLabels, showThresholdMarkers, width, height, theme, value } = this.props;
...@@ -112,7 +103,12 @@ export class Gauge extends PureComponent<Props> { ...@@ -112,7 +103,12 @@ export class Gauge extends PureComponent<Props> {
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 text = formattedValueToString(value); 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; const thresholdLabelFontSize = fontSize / 2.5;
let min = field.min!; let min = field.min!;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment