Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Gauge/BarGauge: Improvements to auto value font size #17292

Merged
merged 1 commit into from May 27, 2019
Merged

Gauge/BarGauge: Improvements to auto value font size #17292

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
24 changes: 17 additions & 7 deletions packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
View file
Open in desktop
Expand Up @@ -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;
Expand Down Expand Up @@ -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',
};
}
Expand All @@ -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',
Expand All @@ -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',
Expand Down Expand Up @@ -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);

Expand All @@ -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 changes: 2 additions & 1 deletion packages/grafana-ui/src/components/BarGauge/__snapshots__/BarGauge.test.tsx.snap
View file
Open in desktop
Expand Up @@ -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",
}
Expand Down
5 changes: 3 additions & 2 deletions packages/grafana-ui/src/components/Gauge/Gauge.tsx
View file
Open in desktop
Expand Up @@ -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() {
Expand All @@ -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 = {
Expand Down