-
Notifications
You must be signed in to change notification settings - Fork 11.7k
/
BigValue.tsx
123 lines (109 loc) · 3.7 KB
/
BigValue.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import { cx } from '@emotion/css';
import React, { PureComponent } from 'react';
import { DisplayValue, DisplayValueAlignmentFactors, FieldSparkline, VizOrientation } from '@grafana/data';
import { VizTextDisplayOptions } from '@grafana/schema';
import { Themeable2 } from '../../types';
import { clearButtonStyles } from '../Button';
import { FormattedValueDisplay } from '../FormattedValueDisplay/FormattedValueDisplay';
import { buildLayout } from './BigValueLayout';
export enum BigValueColorMode {
Value = 'value',
Background = 'background',
None = 'none',
}
export enum BigValueGraphMode {
None = 'none',
Line = 'line',
Area = 'area',
}
export enum BigValueJustifyMode {
Auto = 'auto',
Center = 'center',
}
/**
* Options for how the value & title are to be displayed
*/
export enum BigValueTextMode {
Auto = 'auto',
Value = 'value',
ValueAndName = 'value_and_name',
Name = 'name',
None = 'none',
}
export interface Props extends Themeable2 {
/** Height of the component */
height: number;
/** Width of the component */
width: number;
/** Value displayed as Big Value */
value: DisplayValue;
/** Sparkline values for showing a graph under/behind the value */
sparkline?: FieldSparkline;
/** onClick handler for the value */
onClick?: React.MouseEventHandler<HTMLElement>;
/** Custom styling */
className?: string;
/** Color mode for coloring the value or the background */
colorMode: BigValueColorMode;
/** Show a graph behind/under the value */
graphMode: BigValueGraphMode;
/** Auto justify value and text or center it */
justifyMode?: BigValueJustifyMode;
/** Factors that should influence the positioning of the text */
alignmentFactors?: DisplayValueAlignmentFactors;
/** Explicit font size control */
text?: VizTextDisplayOptions;
/** Specify which text should be visible in the BigValue */
textMode?: BigValueTextMode;
/** If true disables the tooltip */
hasLinks?: boolean;
/** The orientation of the parent container */
parentOrientation?: VizOrientation;
/**
* If part of a series of stat panes, this is the total number.
* Used by BigValueTextMode.Auto text mode.
*/
count?: number;
}
export class BigValue extends PureComponent<Props> {
static defaultProps: Partial<Props> = {
justifyMode: BigValueJustifyMode.Auto,
};
render() {
const { onClick, className, hasLinks, theme } = this.props;
const layout = buildLayout(this.props);
const panelStyles = layout.getPanelStyles();
const valueAndTitleContainerStyles = layout.getValueAndTitleContainerStyles();
const valueStyles = layout.getValueStyles();
const titleStyles = layout.getTitleStyles();
const textValues = layout.textValues;
// When there is an outer data link this tooltip will override the outer native tooltip
const tooltip = hasLinks ? undefined : textValues.tooltip;
if (!onClick) {
return (
<div className={className} style={panelStyles} title={tooltip}>
<div style={valueAndTitleContainerStyles}>
{textValues.title && <div style={titleStyles}>{textValues.title}</div>}
<FormattedValueDisplay value={textValues} style={valueStyles} />
</div>
{layout.renderChart()}
</div>
);
}
return (
<button
type="button"
className={cx(clearButtonStyles(theme), className)}
style={panelStyles}
onClick={onClick}
title={tooltip}
>
<div style={valueAndTitleContainerStyles}>
{textValues.title && <div style={titleStyles}>{textValues.title}</div>}
<FormattedValueDisplay value={textValues} style={valueStyles} />
</div>
{layout.renderChart()}
</button>
);
}
}