diff --git a/packages/grafana-data/src/dataframe/DataFrameView.ts b/packages/grafana-data/src/dataframe/DataFrameView.ts index 5162a94e56b..88e3969b17b 100644 --- a/packages/grafana-data/src/dataframe/DataFrameView.ts +++ b/packages/grafana-data/src/dataframe/DataFrameView.ts @@ -1,5 +1,6 @@ import { Vector } from '../types/vector'; import { DataFrame } from '../types/dataFrame'; +import { DisplayProcessor } from '../types'; /** * This abstraction will present the contents of a DataFrame as if @@ -55,6 +56,20 @@ export class DataFrameView implements Vector { return this.data.length; } + getFieldDisplayProcessor(colIndex: number): DisplayProcessor | null { + if (!this.dataFrame || !this.dataFrame.fields) { + return null; + } + + const field = this.dataFrame.fields[colIndex]; + + if (!field || !field.display) { + return null; + } + + return field.display; + } + get(idx: number) { this.index = idx; return this.obj; diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx index 2b0fef2c20e..0207411fb45 100644 --- a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx +++ b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx @@ -131,7 +131,8 @@ export class BarGauge extends PureComponent { }; } - const color = display(positionValue).color; + const color = display ? display(positionValue).color : null; + if (color) { // if we are past real value the cell is not "on" if (value === null || (positionValue !== null && positionValue > value.numeric)) { diff --git a/public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx b/public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx new file mode 100644 index 00000000000..dbd9cac2929 --- /dev/null +++ b/public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import { mount, ReactWrapper } from 'enzyme'; +import { PanelData, dateMath, TimeRange, VizOrientation, PanelProps } from '@grafana/data'; +import { BarGaugeDisplayMode } from '@grafana/ui'; + +import { BarGaugePanel } from './BarGaugePanel'; +import { BarGaugeOptions } from './types'; + +describe('BarGaugePanel', () => { + describe('when empty result is rendered', () => { + const wrapper = createBarGaugePanelWithData({ + series: [], + timeRange: null, + state: null, + }); + + it('should render with title "No data"', () => { + const displayValue = wrapper.find('div.bar-gauge__value').text(); + expect(displayValue).toBe('No data'); + }); + }); +}); + +function createBarGaugePanelWithData(data: PanelData): ReactWrapper> { + const timeRange: TimeRange = { + from: dateMath.parse('now-6h'), + to: dateMath.parse('now'), + raw: { from: 'now-6h', to: 'now' }, + }; + + const options: BarGaugeOptions = { + displayMode: BarGaugeDisplayMode.Lcd, + fieldOptions: { + calcs: ['mean'], + defaults: {}, + values: false, + overrides: [], + }, + orientation: VizOrientation.Horizontal, + showUnfilled: true, + }; + + return mount( + {}} + onChangeTimeRange={() => {}} + replaceVariables={s => s} + renderCounter={0} + width={532} + transparent={false} + height={250} + /> + ); +} diff --git a/public/app/plugins/panel/bargauge/BarGaugePanel.tsx b/public/app/plugins/panel/bargauge/BarGaugePanel.tsx index ea2925c0af4..03cec8bdaae 100644 --- a/public/app/plugins/panel/bargauge/BarGaugePanel.tsx +++ b/public/app/plugins/panel/bargauge/BarGaugePanel.tsx @@ -24,7 +24,6 @@ export class BarGaugePanel extends PureComponent> { ): JSX.Element => { const { options } = this.props; const { field, display, view, colIndex } = value; - const f = view.dataFrame.fields[colIndex]; return ( @@ -36,7 +35,7 @@ export class BarGaugePanel extends PureComponent> { height={height} orientation={options.orientation} field={field} - display={f.display!} + display={view?.getFieldDisplayProcessor(colIndex)} theme={config.theme} itemSpacing={this.getItemSpacing()} displayMode={options.displayMode}