From 392819c5d0f5c7edd00ee9e44e89f2f352d9932a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 20 Dec 2019 16:05:37 +0100 Subject: [PATCH] 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 --- .../datasource-testdata/bar-gauge-demo2.json | 491 ++++++++++++++++ .../panel_tests_bar_gauge2.json | 530 ++++++++++++++++++ .../src/components/BarGauge/BarGauge.test.tsx | 14 + .../src/components/BarGauge/BarGauge.tsx | 53 +- .../__snapshots__/BarGauge.test.tsx.snap | 27 +- .../plugins/panel/bargauge/BarGaugePanel.tsx | 1 + .../panel/bargauge/BarGaugePanelEditor.tsx | 12 + public/app/plugins/panel/bargauge/types.ts | 2 + 8 files changed, 1115 insertions(+), 15 deletions(-) create mode 100644 devenv/dev-dashboards/datasource-testdata/bar-gauge-demo2.json create mode 100644 devenv/dev-dashboards/panel-bargauge/panel_tests_bar_gauge2.json diff --git a/devenv/dev-dashboards/datasource-testdata/bar-gauge-demo2.json b/devenv/dev-dashboards/datasource-testdata/bar-gauge-demo2.json new file mode 100644 index 00000000000..f038101d9e6 --- /dev/null +++ b/devenv/dev-dashboards/datasource-testdata/bar-gauge-demo2.json @@ -0,0 +1,491 @@ +{ + "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 +} diff --git a/devenv/dev-dashboards/panel-bargauge/panel_tests_bar_gauge2.json b/devenv/dev-dashboards/panel-bargauge/panel_tests_bar_gauge2.json new file mode 100644 index 00000000000..52bcfd8460e --- /dev/null +++ b/devenv/dev-dashboards/panel-bargauge/panel_tests_bar_gauge2.json @@ -0,0 +1,530 @@ +{ + "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 +} diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.test.tsx b/packages/grafana-ui/src/components/BarGauge/BarGauge.test.tsx index 1b29be969d7..332c00cf80f 100644 --- a/packages/grafana-ui/src/components/BarGauge/BarGauge.test.tsx +++ b/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'); }); }); diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx index 89025615b2f..72a6cbc3b8f 100644 --- a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx +++ b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx @@ -42,6 +42,7 @@ export interface Props extends Themeable { displayMode: 'basic' | 'lcd' | 'gradient'; onClick?: React.MouseEventHandler; className?: string; + showUnfilled?: boolean; alignmentFactors?: DisplayValueAlignmentFactors; } @@ -57,6 +58,7 @@ export class BarGauge extends PureComponent { orientation: VizOrientation.Horizontal, thresholds: [], itemSpacing: 10, + showUnfilled: true, }; render() { @@ -92,13 +94,14 @@ export class BarGauge extends PureComponent { } renderBasicAndGradientBars(): ReactNode { - const { value } = this.props; + const { value, showUnfilled } = this.props; const styles = getBasicAndGradientStyles(this.props); return (
+ {showUnfilled &&
}
); @@ -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; } diff --git a/packages/grafana-ui/src/components/BarGauge/__snapshots__/BarGauge.test.tsx.snap b/packages/grafana-ui/src/components/BarGauge/__snapshots__/BarGauge.test.tsx.snap index 95341637d43..b789648ea2f 100644 --- a/packages/grafana-ui/src/components/BarGauge/__snapshots__/BarGauge.test.tsx.snap +++ b/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%", } } >
+
diff --git a/public/app/plugins/panel/bargauge/BarGaugePanel.tsx b/public/app/plugins/panel/bargauge/BarGaugePanel.tsx index 800259389ec..f294a8fe5e1 100644 --- a/public/app/plugins/panel/bargauge/BarGaugePanel.tsx +++ b/public/app/plugins/panel/bargauge/BarGaugePanel.tsx @@ -43,6 +43,7 @@ export class BarGaugePanel extends PureComponent> { onClick={openMenu} className={targetClassName} alignmentFactors={alignmentFactors} + showUnfilled={options.showUnfilled} /> ); }} diff --git a/public/app/plugins/panel/bargauge/BarGaugePanelEditor.tsx b/public/app/plugins/panel/bargauge/BarGaugePanelEditor.tsx index 4cee767f6ee..9300d072362 100644 --- a/public/app/plugins/panel/bargauge/BarGaugePanelEditor.tsx +++ b/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 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 item.value === options.displayMode)} />
+ {options.displayMode !== 'lcd' && ( + + )} > = [ @@ -16,4 +17,5 @@ export const defaults: BarGaugeOptions = { displayMode: 'lcd', orientation: VizOrientation.Horizontal, fieldOptions: standardGaugeFieldOptions, + showUnfilled: true, };