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

some working solution, needs refactor

Browse Source
This commit is contained in:
Peter Holmberg
2019-01-25 16:38:51 +01:00
parent c7b556c0e4
commit 142ebc7546
1 changed files with 18 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,10 +1,10 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import $ from 'jquery'; import $ from 'jquery';
import { ValueMapping, Threshold, ThemeName, BasicGaugeColor, ThemeNames } from '../../types/panel'; import { BasicGaugeColor, ThemeName, ThemeNames, Threshold, ValueMapping } from '../../types';
import { TimeSeriesVMs } from '../../types/series'; import { TimeSeriesVMs } from '../../types';
import { getValueFormat } from '../../utils/valueFormats/valueFormats'; import { getValueFormat } from '../../utils';
import { TimeSeriesValue, getMappedValue } from '../../utils/valueMappings'; import { getMappedValue, TimeSeriesValue } from '../../utils/valueMappings';
export interface Props { export interface Props {
decimals: number; decimals: number;
@@ -24,6 +24,8 @@ export interface Props {
theme?: ThemeName; theme?: ThemeName;
} }
const FONT_SCALE = 1;
export class Gauge extends PureComponent<Props> { export class Gauge extends PureComponent<Props> {
canvasElement: any; canvasElement: any;
@@ -67,7 +69,7 @@ export class Gauge extends PureComponent<Props> {
const formattedValue = formatFunc(value as number, decimals); const formattedValue = formatFunc(value as number, decimals);
const handleNoValueValue = formattedValue || 'no value'; const handleNoValueValue = formattedValue || 'no value';
return `${prefix} ${handleNoValueValue} ${suffix}`; return `${prefix && prefix + ' '}${handleNoValueValue}${suffix && ' ' + suffix}`;
} }
getFontColor(value: TimeSeriesValue) { getFontColor(value: TimeSeriesValue) {
@@ -98,7 +100,7 @@ export class Gauge extends PureComponent<Props> {
const thresholdsSortedByIndex = [...thresholds].sort((t1, t2) => t1.index - t2.index); const thresholdsSortedByIndex = [...thresholds].sort((t1, t2) => t1.index - t2.index);
const lastThreshold = thresholdsSortedByIndex[thresholdsSortedByIndex.length - 1]; const lastThreshold = thresholdsSortedByIndex[thresholdsSortedByIndex.length - 1];
const formattedThresholds = [ return [
...thresholdsSortedByIndex.map(threshold => { ...thresholdsSortedByIndex.map(threshold => {
if (threshold.index === 0) { if (threshold.index === 0) {
return { value: minValue, color: threshold.color }; return { value: minValue, color: threshold.color };
@@ -109,8 +111,13 @@ export class Gauge extends PureComponent<Props> {
}), }),
{ value: maxValue, color: lastThreshold.color }, { value: maxValue, color: lastThreshold.color },
]; ];
}
return formattedThresholds; getFontScale(length: number): number {
if (length > 12) {
return FONT_SCALE - length * 5 / 115;
}
return FONT_SCALE - length * 5 / 105;
} }
draw() { draw() {
@@ -134,13 +141,15 @@ export class Gauge extends PureComponent<Props> {
value = null; value = null;
} }
const formattedValue = this.formatValue(value) as string;
const dimension = Math.min(width, height * 1.3); const dimension = Math.min(width, height * 1.3);
const backgroundColor = theme === ThemeNames.Light ? 'rgb(230,230,230)' : 'rgb(38,38,38)'; const backgroundColor = theme === ThemeNames.Light ? 'rgb(230,230,230)' : 'rgb(38,38,38)';
const fontScale = parseInt('80', 10) / 100;
const fontSize = Math.min(dimension / 5, 100) * fontScale;
const gaugeWidthReduceRatio = showThresholdLabels ? 1.5 : 1; const gaugeWidthReduceRatio = showThresholdLabels ? 1.5 : 1;
const gaugeWidth = Math.min(dimension / 6, 60) / gaugeWidthReduceRatio; const gaugeWidth = Math.min(dimension / 6, 60) / gaugeWidthReduceRatio;
const thresholdMarkersWidth = gaugeWidth / 5; const thresholdMarkersWidth = gaugeWidth / 5;
const fontSize = Math.ceil(
Math.min(dimension / 5, 100) * (formattedValue !== null ? this.getFontScale(formattedValue.length) : 1)
);
const thresholdLabelFontSize = fontSize / 2.5; const thresholdLabelFontSize = fontSize / 2.5;
const options = { const options = {