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 $ from 'jquery';
import { ValueMapping, Threshold, ThemeName, BasicGaugeColor, ThemeNames } from '../../types/panel';
import { TimeSeriesVMs } from '../../types/series';
import { getValueFormat } from '../../utils/valueFormats/valueFormats';
import { TimeSeriesValue, getMappedValue } from '../../utils/valueMappings';
import { BasicGaugeColor, ThemeName, ThemeNames, Threshold, ValueMapping } from '../../types';
import { TimeSeriesVMs } from '../../types';
import { getValueFormat } from '../../utils';
import { getMappedValue, TimeSeriesValue } from '../../utils/valueMappings';
export interface Props {
decimals: number;
@@ -24,6 +24,8 @@ export interface Props {
theme?: ThemeName;
}
const FONT_SCALE = 1;
export class Gauge extends PureComponent<Props> {
canvasElement: any;
@@ -67,7 +69,7 @@ export class Gauge extends PureComponent<Props> {
const formattedValue = formatFunc(value as number, decimals);
const handleNoValueValue = formattedValue || 'no value';
return `${prefix} ${handleNoValueValue} ${suffix}`;
return `${prefix && prefix + ' '}${handleNoValueValue}${suffix && ' ' + suffix}`;
}
getFontColor(value: TimeSeriesValue) {
@@ -98,7 +100,7 @@ export class Gauge extends PureComponent<Props> {
const thresholdsSortedByIndex = [...thresholds].sort((t1, t2) => t1.index - t2.index);
const lastThreshold = thresholdsSortedByIndex[thresholdsSortedByIndex.length - 1];
const formattedThresholds = [
return [
...thresholdsSortedByIndex.map(threshold => {
if (threshold.index === 0) {
return { value: minValue, color: threshold.color };
@@ -109,8 +111,13 @@ export class Gauge extends PureComponent<Props> {
}),
{ 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() {
@@ -134,13 +141,15 @@ export class Gauge extends PureComponent<Props> {
value = null;
}
const formattedValue = this.formatValue(value) as string;
const dimension = Math.min(width, height * 1.3);
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 gaugeWidth = Math.min(dimension / 6, 60) / gaugeWidthReduceRatio;
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 options = {