Skip to content

N
nexpie-grafana-theme
Commit 392819c5 by Torkel Ödegaard Committed by GitHub
Options

New bar gauge style: Unfilled (#21201) 

* BarGauge: Added unfilled option

* Fixed white theme and added 2 unit tests

* Added another demo dashboard

* Fixed dev env dashboards
parent 587e4009
Showing with 1115 additions and 15 deletions
devenv/dev-dashboards/datasource-testdata/bar-gauge-demo2.json 0 → 100644
{
"annotations": {
"list": [
{
"builtIn": 1,
"datasource": "-- Grafana --",
"enable": true,
"hide": true,
"iconColor": "rgba(0, 211, 255, 1)",
"name": "Annotations & Alerts",
"type": "dashboard"
}
]
},
"editable": true,
"gnetId": null,
"graphTooltip": 0,
"links": [],
"panels": [
{
"datasource": null,
"gridPos": {
"h": 32,
"w": 9,
"x": 0,
"y": 0
},
"id": 4,
"options": {
"displayMode": "gradient",
"fieldOptions": {
"calcs": ["mean"],
"defaults": {
"mappings": [],
"max": 100,
"min": 0,
"thresholds": [
{
"color": "red",
"value": null
},
{
"color": "yellow",
"value": 50
}
],
"unit": "percent"
},
"overrides": [],
"values": false
},
"orientation": "horizontal",
"showUnfilled": true
},
"pluginVersion": "6.6.0-pre",
"targets": [
{
"refId": "A",
"scenarioId": "random_walk"
},
{
"refId": "B",
"scenarioId": "random_walk"
},
{
"refId": "C",
"scenarioId": "random_walk"
},
{
"refId": "D",
"scenarioId": "random_walk"
},
{
"refId": "E",
"scenarioId": "random_walk"
},
{
"refId": "F",
"scenarioId": "random_walk"
},
{
"refId": "G",
"scenarioId": "random_walk"
},
{
"labels": "",
"refId": "H",
"scenarioId": "random_walk"
},
{
"refId": "I",
"scenarioId": "random_walk"
},
{
"refId": "J",
"scenarioId": "random_walk"
},
{
"refId": "K",
"scenarioId": "random_walk"
},
{
"refId": "L",
"scenarioId": "random_walk"
},
{
"refId": "M",
"scenarioId": "random_walk"
},
{
"refId": "N",
"scenarioId": "random_walk"
},
{
"labels": "",
"refId": "O",
"scenarioId": "random_walk"
},
{
"refId": "P",
"scenarioId": "random_walk"
},
{
"refId": "Q",
"scenarioId": "random_walk"
}
],
"timeFrom": null,
"timeShift": null,
"title": "Panel Title",
"type": "bargauge"
},
{
"datasource": null,
"gridPos": {
"h": 11,
"w": 8,
"x": 9,
"y": 0
},
"id": 3,
"options": {
"displayMode": "gradient",
"fieldOptions": {
"calcs": ["mean"],
"defaults": {
"mappings": [],
"max": 100,
"min": 0,
"thresholds": [
{
"color": "blue",
"value": null
},
{
"color": "purple",
"value": 40
},
{
"color": "red",
"value": 80
}
],
"unit": "percent"
},
"overrides": [],
"values": false
},
"orientation": "vertical",
"showUnfilled": true
},
"pluginVersion": "6.6.0-pre",
"targets": [
{
"refId": "A",
"scenarioId": "random_walk"
},
{
"refId": "B",
"scenarioId": "random_walk"
},
{
"refId": "C",
"scenarioId": "random_walk"
},
{
"refId": "D",
"scenarioId": "random_walk"
},
{
"refId": "E",
"scenarioId": "random_walk"
},
{
"refId": "F",
"scenarioId": "random_walk"
},
{
"refId": "G",
"scenarioId": "random_walk"
},
{
"refId": "H",
"scenarioId": "random_walk"
}
],
"timeFrom": null,
"timeShift": null,
"title": "Panel Title",
"type": "bargauge"
},
{
"datasource": null,
"gridPos": {
"h": 33,
"w": 7,
"x": 17,
"y": 0
},
"id": 6,
"options": {
"displayMode": "basic",
"fieldOptions": {
"calcs": ["mean"],
"defaults": {
"mappings": [],
"max": 100,
"min": 0,
"thresholds": [
{
"color": "green",
"value": null
},
{
"color": "blue",
"value": 50
}
],
"unit": "percent"
},
"overrides": [],
"values": false
},
"orientation": "horizontal",
"showUnfilled": true
},
"pluginVersion": "6.6.0-pre",
"targets": [
{
"refId": "A",
"scenarioId": "random_walk"
},
{
"refId": "K",
"scenarioId": "random_walk"
},
{
"refId": "L",
"scenarioId": "random_walk"
},
{
"refId": "M",
"scenarioId": "random_walk"
},
{
"refId": "N",
"scenarioId": "random_walk"
},
{
"refId": "O",
"scenarioId": "random_walk"
},
{
"refId": "P",
"scenarioId": "random_walk"
},
{
"refId": "Q",
"scenarioId": "random_walk"
},
{
"refId": "R",
"scenarioId": "random_walk"
},
{
"refId": "S",
"scenarioId": "random_walk"
},
{
"refId": "T",
"scenarioId": "random_walk"
},
{
"refId": "U",
"scenarioId": "random_walk"
},
{
"refId": "V",
"scenarioId": "random_walk"
},
{
"refId": "W",
"scenarioId": "random_walk"
},
{
"refId": "X",
"scenarioId": "random_walk"
}
],
"timeFrom": null,
"timeShift": null,
"title": "Panel Title",
"type": "bargauge"
},
{
"datasource": null,
"gridPos": {
"h": 11,
"w": 8,
"x": 9,
"y": 11
},
"id": 7,
"options": {
"displayMode": "gradient",
"fieldOptions": {
"calcs": ["mean"],
"defaults": {
"mappings": [],
"max": 100,
"min": 0,
"thresholds": [
{
"color": "blue",
"value": null
},
{
"color": "purple",
"value": 40
},
{
"color": "red",
"value": 80
}
],
"unit": "percent"
},
"overrides": [],
"values": false
},
"orientation": "vertical",
"showUnfilled": true
},
"pluginVersion": "6.6.0-pre",
"targets": [
{
"refId": "A",
"scenarioId": "random_walk"
},
{
"refId": "B",
"scenarioId": "random_walk"
},
{
"refId": "C",
"scenarioId": "random_walk"
},
{
"refId": "D",
"scenarioId": "random_walk"
},
{
"refId": "E",
"scenarioId": "random_walk"
},
{
"refId": "F",
"scenarioId": "random_walk"
},
{
"refId": "G",
"scenarioId": "random_walk"
},
{
"refId": "H",
"scenarioId": "random_walk"
}
],
"timeFrom": null,
"timeShift": null,
"title": "Panel Title",
"type": "bargauge"
},
{
"datasource": null,
"gridPos": {
"h": 11,
"w": 8,
"x": 9,
"y": 22
},
"id": 8,
"options": {
"displayMode": "gradient",
"fieldOptions": {
"calcs": ["mean"],
"defaults": {
"mappings": [],
"max": 100,
"min": 0,
"thresholds": [
{
"color": "blue",
"value": null
},
{
"color": "purple",
"value": 40
},
{
"color": "red",
"value": 80
}
],
"unit": "percent"
},
"overrides": [],
"values": false
},
"orientation": "vertical",
"showUnfilled": true
},
"pluginVersion": "6.6.0-pre",
"targets": [
{
"refId": "A",
"scenarioId": "random_walk"
},
{
"refId": "B",
"scenarioId": "random_walk"
},
{
"refId": "C",
"scenarioId": "random_walk"
},
{
"refId": "D",
"scenarioId": "random_walk"
},
{
"refId": "E",
"scenarioId": "random_walk"
},
{
"refId": "F",
"scenarioId": "random_walk"
},
{
"refId": "G",
"scenarioId": "random_walk"
},
{
"refId": "H",
"scenarioId": "random_walk"
}
],
"timeFrom": null,
"timeShift": null,
"title": "Panel Title",
"type": "bargauge"
}
],
"schemaVersion": 21,
"style": "dark",
"tags": ["gdev", "demo"],
"templating": {
"list": []
},
"time": {
"from": "now-6h",
"to": "now"
},
"timepicker": {
"refresh_intervals": ["5s", "10s", "30s", "1m", "5m", "15m", "30m", "1h", "2h", "1d"]
},
"timezone": "",
"title": "Bar Gauge Demo Unfilled",
"uid": "xMsQdBfWz",
"version": 5
}
devenv/dev-dashboards/panel-bargauge/panel_tests_bar_gauge2.json 0 → 100644
{
"annotations": {
"list": [
{
"builtIn": 1,
"datasource": "-- Grafana --",
"enable": true,
"hide": true,
"iconColor": "rgba(0, 211, 255, 1)",
"name": "Annotations & Alerts",
"type": "dashboard"
}
]
},
"editable": true,
"gnetId": null,
"graphTooltip": 0,
"links": [],
"panels": [
{
"datasource": null,
"gridPos": {
"h": 10,
"w": 12,
"x": 0,
"y": 0
},
"id": 8,
"links": [],
"options": {
"displayMode": "basic",
"fieldOptions": {
"calcs": ["mean"],
"defaults": {
"decimals": null,
"mappings": [],
"max": 100,
"min": 0,
"thresholds": [
{
"color": "green",
"value": null
},
{
"color": "purple",
"value": 50
},
{
"color": "blue",
"value": 70
}
],
"unit": "watt"
},
"overrides": [],
"values": false
},
"orientation": "vertical",
"showUnfilled": false
},
"pluginVersion": "6.6.0-pre",
"targets": [
{
"refId": "C",
"scenarioId": "random_walk"
},
{
"refId": "D",
"scenarioId": "random_walk"
},
{
"refId": "I",
"scenarioId": "random_walk"
},
{
"refId": "J",
"scenarioId": "random_walk"
},
{
"refId": "K",
"scenarioId": "random_walk"
},
{
"refId": "L",
"scenarioId": "random_walk"
},
{
"refId": "M",
"scenarioId": "random_walk"
},
{
"refId": "N",
"scenarioId": "random_walk"
},
{
"refId": "O",
"scenarioId": "random_walk"
},
{
"refId": "P",
"scenarioId": "random_walk"
},
{
"refId": "Q",
"scenarioId": "random_walk"
}
],
"timeFrom": null,
"timeShift": null,
"title": "Basic vertical ",
"type": "bargauge"
},
{
"datasource": null,
"gridPos": {
"h": 10,
"w": 12,
"x": 12,
"y": 0
},
"id": 22,
"links": [],
"options": {
"displayMode": "basic",
"fieldOptions": {
"calcs": ["mean"],
"defaults": {
"decimals": null,
"mappings": [],
"max": 100,
"min": 0,
"thresholds": [
{
"color": "green",
"value": null
},
{
"color": "blue",
"value": 25
},
{
"color": "orange",
"value": 37.5
},
{
"color": "purple",
"value": 43.75
},
{
"color": "red",
"value": 50
}
],
"unit": "watt"
},
"overrides": [],
"values": false
},
"orientation": "vertical",
"showUnfilled": true
},
"pluginVersion": "6.6.0-pre",
"targets": [
{
"refId": "H",
"scenarioId": "csv_metric_values",
"stringInput": "100,100,100"
},
{
"refId": "J",
"scenarioId": "random_walk"
},
{
"refId": "K",
"scenarioId": "random_walk"
},
{
"refId": "L",
"scenarioId": "random_walk"
},
{
"refId": "M",
"scenarioId": "random_walk"
},
{
"refId": "N",
"scenarioId": "random_walk"
},
{
"refId": "O",
"scenarioId": "random_walk"
},
{
"refId": "P",
"scenarioId": "random_walk"
},
{
"refId": "Q",
"scenarioId": "random_walk"
}
],
"timeFrom": null,
"timeShift": null,
"title": "Basic vertical (Unfilled)",
"type": "bargauge"
},
{
"datasource": null,
"gridPos": {
"h": 9,
"w": 12,
"x": 0,
"y": 10
},
"id": 12,
"links": [],
"options": {
"displayMode": "gradient",
"fieldOptions": {
"calcs": ["mean"],
"defaults": {
"decimals": null,
"mappings": [],
"max": 100,
"min": 0,
"thresholds": [
{
"color": "blue",
"value": null
},
{
"color": "green",
"value": 20
},
{
"color": "orange",
"value": 40
},
{
"color": "red",
"value": 80
}
],
"unit": "celsius"
},
"overrides": [],
"values": false
},
"orientation": "horizontal",
"showUnfilled": false
},
"pluginVersion": "6.6.0-pre",
"targets": [
{
"alias": "Inside",
"refId": "H",
"scenarioId": "csv_metric_values",
"stringInput": "100,100,100"
},
{
"alias": "Outhouse",
"refId": "A",
"scenarioId": "random_walk"
},
{
"refId": "F",
"scenarioId": "random_walk"
},
{
"refId": "B",
"scenarioId": "random_walk"
},
{
"refId": "C",
"scenarioId": "random_walk"
}
],
"timeFrom": null,
"timeShift": null,
"title": "Gradient ",
"type": "bargauge"
},
{
"datasource": null,
"gridPos": {
"h": 9,
"w": 12,
"x": 12,
"y": 10
},
"id": 23,
"links": [],
"options": {
"displayMode": "gradient",
"fieldOptions": {
"calcs": ["mean"],
"defaults": {
"decimals": null,
"mappings": [],
"max": 100,
"min": 0,
"thresholds": [
{
"color": "blue",
"value": null
},
{
"color": "green",
"value": 20
},
{
"color": "orange",
"value": 40
},
{
"color": "red",
"value": 80
}
],
"unit": "celsius"
},
"overrides": [],
"values": false
},
"orientation": "horizontal",
"showUnfilled": true
},
"pluginVersion": "6.6.0-pre",
"targets": [
{
"alias": "Inside",
"refId": "H",
"scenarioId": "csv_metric_values",
"stringInput": "100,100,100"
},
{
"alias": "Outhouse",
"refId": "A",
"scenarioId": "random_walk"
},
{
"refId": "F",
"scenarioId": "random_walk"
},
{
"refId": "B",
"scenarioId": "random_walk"
},
{
"refId": "C",
"scenarioId": "random_walk"
}
],
"timeFrom": null,
"timeShift": null,
"title": "Gradient (Unfilled)",
"type": "bargauge"
},
{
"datasource": null,
"gridPos": {
"h": 6,
"w": 12,
"x": 0,
"y": 19
},
"id": 21,
"links": [],
"options": {
"displayMode": "basic",
"fieldOptions": {
"calcs": ["mean"],
"defaults": {
"decimals": null,
"mappings": [],
"max": 100,
"min": 0,
"thresholds": [
{
"color": "blue",
"value": null
},
{
"color": "green",
"value": 20
},
{
"color": "orange",
"value": 40
},
{
"color": "red",
"value": 80
}
],
"unit": "celsius"
},
"overrides": [],
"values": false
},
"orientation": "horizontal",
"showUnfilled": false
},
"pluginVersion": "6.6.0-pre",
"targets": [
{
"alias": "Inside",
"refId": "H",
"scenarioId": "csv_metric_values",
"stringInput": "100,100,100"
},
{
"alias": "Outhouse",
"refId": "A",
"scenarioId": "random_walk"
},
{
"refId": "F",
"scenarioId": "random_walk"
},
{
"refId": "B",
"scenarioId": "random_walk"
},
{
"refId": "C",
"scenarioId": "random_walk"
}
],
"timeFrom": null,
"timeShift": null,
"title": "Title to left of bar",
"type": "bargauge"
},
{
"datasource": null,
"gridPos": {
"h": 6,
"w": 12,
"x": 12,
"y": 19
},
"id": 24,
"links": [],
"options": {
"displayMode": "basic",
"fieldOptions": {
"calcs": ["mean"],
"defaults": {
"decimals": null,
"mappings": [],
"max": 100,
"min": 0,
"thresholds": [
{
"color": "blue",
"value": null
},
{
"color": "green",
"value": 20
},
{
"color": "orange",
"value": 40
},
{
"color": "red",
"value": 80
}
],
"unit": "celsius"
},
"overrides": [],
"values": false
},
"orientation": "horizontal",
"showUnfilled": true
},
"pluginVersion": "6.6.0-pre",
"targets": [
{
"alias": "Inside",
"refId": "H",
"scenarioId": "csv_metric_values",
"stringInput": "100,100,100"
},
{
"alias": "Outhouse",
"refId": "A",
"scenarioId": "random_walk"
},
{
"refId": "F",
"scenarioId": "random_walk"
},
{
"refId": "B",
"scenarioId": "random_walk"
},
{
"refId": "C",
"scenarioId": "random_walk"
}
],
"timeFrom": null,
"timeShift": null,
"title": "Title to left of bar (Filled)",
"type": "bargauge"
}
],
"schemaVersion": 21,
"style": "dark",
"tags": ["gdev", "panel-tests"],
"templating": {
"list": []
},
"time": {
"from": "now-6h",
"to": "now"
},
"timepicker": {
"refresh_intervals": ["5s", "10s", "30s", "1m", "5m", "15m", "30m", "1h", "2h", "1d"],
"time_options": ["5m", "15m", "1h", "6h", "12h", "24h", "2d", "7d", "30d"]
},
"timezone": "",
"title": "Panel Tests - Bar Gauge 2",
"uid": "sRrEibfZk",
"version": 5
}
packages/grafana-ui/src/components/BarGauge/BarGauge.test.tsx
......@@ -106,6 +106,20 @@ describe('BarGauge', () => {
});
const styles = getBasicAndGradientStyles(props);
expect(styles.bar.height).toBe('249px');
expect(styles.emptyBar.bottom).toBe('-3px');
});
});
describe('Horizontal bar', () => {
it('should stretch items', () => {
const props = getProps({
height: 300,
value: getValue(100, 'ServerA'),
orientation: VizOrientation.Horizontal,
});
const styles = getBasicAndGradientStyles(props);
expect(styles.wrapper.alignItems).toBe('stretch');
expect(styles.emptyBar.left).toBe('-3px');
});
});
......
packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
......@@ -42,6 +42,7 @@ export interface Props extends Themeable {
displayMode: 'basic' | 'lcd' | 'gradient';
onClick?: React.MouseEventHandler<HTMLElement>;
className?: string;
showUnfilled?: boolean;
alignmentFactors?: DisplayValueAlignmentFactors;
}
......@@ -57,6 +58,7 @@ export class BarGauge extends PureComponent<Props> {
orientation: VizOrientation.Horizontal,
thresholds: [],
itemSpacing: 10,
showUnfilled: true,
};
render() {
......@@ -92,13 +94,14 @@ export class BarGauge extends PureComponent<Props> {
}
renderBasicAndGradientBars(): ReactNode {
const { value } = this.props;
const { value, showUnfilled } = this.props;
const styles = getBasicAndGradientStyles(this.props);
return (
<div style={styles.wrapper}>
<FormattedValueDisplay className="bar-gauge__value" value={value} style={styles.value} />
{showUnfilled && <div style={styles.emptyBar} />}
<div style={styles.bar} />
</div>
);
......@@ -260,7 +263,7 @@ function calculateTitleDimensions(props: Props): TitleDimensions {
// if height above 40 put text to above bar
if (height > 40) {
const maxTitleHeightRatio = 0.35;
const maxTitleHeightRatio = 0.45;
const titleHeight = Math.max(Math.min(height * maxTitleHeightRatio, MAX_VALUE_HEIGHT), 17);
return {
......@@ -289,6 +292,7 @@ export function getTitleStyles(props: Props): { wrapper: CSSProperties; title: C
const wrapperStyles: CSSProperties = {
display: 'flex',
overflow: 'hidden',
width: '100%',
};
const titleDim = calculateTitleDimensions(props);
......@@ -327,6 +331,7 @@ export function getTitleStyles(props: Props): { wrapper: CSSProperties; title: C
interface BasicAndGradientStyles {
wrapper: CSSProperties;
bar: CSSProperties;
emptyBar: CSSProperties;
value: CSSProperties;
}
......@@ -390,7 +395,7 @@ export function getValuePercent(value: number, minValue: number, maxValue: numbe
* Only exported to for unit test
*/
export function getBasicAndGradientStyles(props: Props): BasicAndGradientStyles {
const { displayMode, maxValue, minValue, value, alignmentFactors, orientation } = props;
const { displayMode, maxValue, minValue, value, alignmentFactors, orientation, theme } = props;
const { valueWidth, valueHeight, maxBarHeight, maxBarWidth } = calculateBarAndValueDimensions(props);
const valuePercent = getValuePercent(value.numeric, minValue, maxValue);
......@@ -402,10 +407,21 @@ export function getBasicAndGradientStyles(props: Props): BasicAndGradientStyles
const isBasic = displayMode === 'basic';
const wrapperStyles: CSSProperties = {
display: 'flex',
flexGrow: 1,
};
const barStyles: CSSProperties = {
borderRadius: '3px',
position: 'relative',
zIndex: 1,
};
const emptyBar: CSSProperties = {
background: `rgba(${theme.isDark ? '255,255,255' : '0,0,0'}, 0.07)`,
flexGrow: 1,
display: 'flex',
borderRadius: '3px',
position: 'relative',
};
if (isVertical(orientation)) {
......@@ -419,11 +435,15 @@ export function getBasicAndGradientStyles(props: Props): BasicAndGradientStyles
barStyles.height = `${barHeight}px`;
barStyles.width = `${maxBarWidth}px`;
// adjust so that filled in bar is at the bottom
emptyBar.bottom = '-3px';
if (isBasic) {
// Basic styles
barStyles.background = `${tinycolor(valueColor)
.setAlpha(0.25)
.setAlpha(0.35)
.toRgbString()}`;
barStyles.borderTop = `2px solid ${valueColor}`;
} else {
// Gradient styles
......@@ -435,16 +455,19 @@ export function getBasicAndGradientStyles(props: Props): BasicAndGradientStyles
// Custom styles for horizontal orientation
wrapperStyles.flexDirection = 'row-reverse';
wrapperStyles.justifyContent = 'flex-end';
wrapperStyles.alignItems = 'center';
wrapperStyles.alignItems = 'stretch';
barStyles.transition = 'width 1s';
barStyles.height = `${maxBarHeight}px`;
barStyles.width = `${barWidth}px`;
// shift empty region back to fill gaps due to border radius
emptyBar.left = '-3px';
if (isBasic) {
// Basic styles
barStyles.background = `${tinycolor(valueColor)
.setAlpha(0.25)
.setAlpha(0.35)
.toRgbString()}`;
barStyles.borderRight = `2px solid ${valueColor}`;
} else {
......@@ -457,6 +480,7 @@ export function getBasicAndGradientStyles(props: Props): BasicAndGradientStyles
wrapper: wrapperStyles,
bar: barStyles,
value: valueStyles,
emptyBar,
};
}
......@@ -523,18 +547,27 @@ function getValueStyles(
// how many pixels in wide can the text be?
let textWidth = width;
const formattedValueString = formattedValueToString(value);
if (isVertical(orientation)) {
styles.fontSize = calculateFontSize(formattedValueString, textWidth, height, VALUE_LINE_HEIGHT);
styles.justifyContent = `center`;
} else {
styles.justifyContent = `flex-start`;
styles.fontSize = calculateFontSize(
formattedValueString,
textWidth - VALUE_LEFT_PADDING * 2,
height,
VALUE_LINE_HEIGHT
);
styles.justifyContent = `flex-end`;
styles.paddingLeft = `${VALUE_LEFT_PADDING}px`;
styles.paddingRight = `${VALUE_LEFT_PADDING}px`;
// Need to remove the left padding from the text width constraints
textWidth -= VALUE_LEFT_PADDING;
}
const formattedValueString = formattedValueToString(value);
styles.fontSize = calculateFontSize(formattedValueString, textWidth, height, VALUE_LINE_HEIGHT);
// adjust width of title box
styles.width = measureText(formattedValueString, styles.fontSize).width + VALUE_LEFT_PADDING * 2;
}
return styles;
}
packages/grafana-ui/src/components/BarGauge/__snapshots__/BarGauge.test.tsx.snap
......@@ -7,15 +7,17 @@ exports[`BarGauge Render with basic options should render 1`] = `
"display": "flex",
"flexDirection": "column",
"overflow": "hidden",
"width": "100%",
}
}
>
<div
style={
Object {
"alignItems": "center",
"alignItems": "stretch",
"display": "flex",
"flexDirection": "row-reverse",
"flexGrow": 1,
"justifyContent": "flex-end",
}
}
......@@ -27,12 +29,13 @@ exports[`BarGauge Render with basic options should render 1`] = `
"alignItems": "center",
"color": "#73BF69",
"display": "flex",
"fontSize": 175,
"fontSize": 140,
"height": "300px",
"justifyContent": "flex-start",
"justifyContent": "flex-end",
"lineHeight": 1,
"paddingLeft": "10px",
"width": "60px",
"paddingRight": "10px",
"width": 22,
}
}
value={
......@@ -45,12 +48,26 @@ exports[`BarGauge Render with basic options should render 1`] = `
<div
style={
Object {
"background": "rgba(115, 191, 105, 0.25)",
"background": "rgba(255,255,255, 0.07)",
"borderRadius": "3px",
"display": "flex",
"flexGrow": 1,
"left": "-3px",
"position": "relative",
}
}
/>
<div
style={
Object {
"background": "rgba(115, 191, 105, 0.35)",
"borderRadius": "3px",
"borderRight": "2px solid #73BF69",
"height": "300px",
"position": "relative",
"transition": "width 1s",
"width": "60px",
"zIndex": 1,
}
}
/>
......
public/app/plugins/panel/bargauge/BarGaugePanel.tsx
......@@ -43,6 +43,7 @@ export class BarGaugePanel extends PureComponent<PanelProps<BarGaugeOptions>> {
onClick={openMenu}
className={targetClassName}
alignmentFactors={alignmentFactors}
showUnfilled={options.showUnfilled}
/>
);
}}
......
public/app/plugins/panel/bargauge/BarGaugePanelEditor.tsx
......@@ -11,6 +11,7 @@ import {
FormLabel,
Select,
DataLinksEditor,
Switch,
} from '@grafana/ui';
import { FieldDisplayOptions, FieldConfig, DataLink, PanelEditorProps } from '@grafana/data';
......@@ -54,6 +55,9 @@ export class BarGaugePanelEditor extends PureComponent<PanelEditorProps<BarGauge
onOrientationChange = ({ value }: any) => this.props.onOptionsChange({ ...this.props.options, orientation: value });
onDisplayModeChange = ({ value }: any) => this.props.onOptionsChange({ ...this.props.options, displayMode: value });
onToggleShowUnfilled = () => {
this.props.onOptionsChange({ ...this.props.options, showUnfilled: !this.props.options.showUnfilled });
};
onDataLinksChanged = (links: DataLink[]) => {
this.onDefaultsChange({
......@@ -96,6 +100,14 @@ export class BarGaugePanelEditor extends PureComponent<PanelEditorProps<BarGauge
value={displayModes.find(item => item.value === options.displayMode)}
/>
</div>
{options.displayMode !== 'lcd' && (
<Switch
label="Unfilled"
labelClass={`width-${labelWidth}`}
checked={options.showUnfilled}
onChange={this.onToggleShowUnfilled}
/>
)}
</PanelOptionsGroup>
<PanelOptionsGroup title="Field">
<FieldPropertiesEditor
......
public/app/plugins/panel/bargauge/types.ts
......@@ -4,6 +4,7 @@ import { VizOrientation, SelectableValue } from '@grafana/data';
export interface BarGaugeOptions extends SingleStatBaseOptions {
displayMode: 'basic' | 'lcd' | 'gradient';
showUnfilled: boolean;
}
export const displayModes: Array<SelectableValue<string>> = [
......@@ -16,4 +17,5 @@ export const defaults: BarGaugeOptions = {
displayMode: 'lcd',
orientation: VizOrientation.Horizontal,
fieldOptions: standardGaugeFieldOptions,
showUnfilled: true,
};
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