Grafana-UI: BarGauge docs (#27188)

* Grafana-UI: Add mdx file

* Grafana-UI: remove _BarGauge.scss

* Grafana-UI: Update snapshot

* Grafana-UI: Fix tests

* Grafana-UI: Use selector
This commit is contained in:
Alex Khomenko 2020-08-26 14:44:08 +03:00 committed by GitHub
parent 4cd42ed898
commit a1e6090008
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 73 additions and 21 deletions

View File

@ -1,8 +1,9 @@
import { e2e } from '@grafana/e2e';
import { selectors } from '@grafana/e2e-selectors';
e2e.scenario({
describeName: 'Bar Gauge Panel',
itName: 'Bar Guage rendering e2e tests',
itName: 'Bar Gauge rendering e2e tests',
addScenarioDataSource: false,
addScenarioDashBoard: false,
skipScenario: false,
@ -11,7 +12,7 @@ e2e.scenario({
e2e.flows.openDashboard({ uid: 'O6f11TZWk' });
e2e()
.get('#panel-6 .bar-gauge__value')
.get(`#panel-6 [aria-label^="${selectors.components.Panels.Visualization.BarGauge.value}"]`)
.should('have.css', 'color', 'rgb(242, 73, 92)')
.contains('100');
},

View File

@ -33,6 +33,9 @@ export const Components = {
labels: () => 'div.flot-x-axis > div.flot-tick-label',
},
},
BarGauge: {
value: 'Bar gauge value',
},
},
},
Drawer: {

View File

@ -0,0 +1,40 @@
import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
import { BarGauge } from './BarGauge';
<Meta title="MDX|BarGauge" component={BarGauge} />
# BarGauge
## Usage
```tsx
import { BarGauge, BarGaugeDisplayMode } from '@grafana/ui';
import { VizOrientation, ThresholdsMode, Field, FieldType, getDisplayProcessor } from '@grafana/data';
const field: Partial<Field> = {
type: FieldType.number,
config: {
min: minValue,
max: maxValue,
thresholds: {
mode: ThresholdsMode.Absolute,
steps: [
{ value: -Infinity, color: 'green' },
{ value: threshold1Value, color: threshold1Color },
{ value: threshold2Value, color: threshold2Color },
],
},
},
};
field.display = getDisplayProcessor({ field });
const value = {
text: value.toString(),
title: title,
numeric: value,
};
//...
<BarGauge value={70} field={field.config} display={field.display} value={value} orientation={VizOrientation.Vertical} displayMode={BarGaugeDisplayMode.Basic}/>
```
<Props of={BarGauge} />

View File

@ -4,6 +4,7 @@ import { VizOrientation, ThresholdsMode, Field, FieldType, getDisplayProcessor }
import { Props } from './BarGauge';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
import mdx from './BarGauge.mdx';
const getKnobs = () => {
return {
@ -22,6 +23,11 @@ export default {
title: 'Visualizations/BarGauge',
component: BarGauge,
decorators: [withCenteredStory],
parameters: {
docs: {
page: mdx,
},
},
};
function addBarGaugeStory(overrides: Partial<Props>) {

View File

@ -13,6 +13,7 @@ import {
FieldConfig,
FieldColorMode,
} from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
// Components
import { FormattedValueDisplay } from '../FormattedValueDisplay/FormattedValueDisplay';
@ -115,7 +116,11 @@ export class BarGauge extends PureComponent<Props> {
return (
<div style={styles.wrapper}>
<FormattedValueDisplay className="bar-gauge__value" value={value} style={styles.value} />
<FormattedValueDisplay
aria-label={selectors.components.Panels.Visualization.BarGauge.value}
value={value}
style={styles.value}
/>
{showUnfilled && <div style={styles.emptyBar} />}
<div style={styles.bar} />
</div>
@ -235,7 +240,11 @@ export class BarGauge extends PureComponent<Props> {
return (
<div style={containerStyles}>
{cells}
<FormattedValueDisplay className="bar-gauge__value" value={value} style={valueStyles} />
<FormattedValueDisplay
aria-label={selectors.components.Panels.Visualization.BarGauge.value}
value={value}
style={valueStyles}
/>
</div>
);
}

View File

@ -1,9 +0,0 @@
.bar-gauge {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.bar-gauge__value {
text-align: center;
}

View File

@ -23,7 +23,7 @@ exports[`BarGauge Render with basic options should render 1`] = `
}
>
<FormattedDisplayValue
className="bar-gauge__value"
aria-label="Bar gauge value"
style={
Object {
"alignItems": "center",

View File

@ -1,7 +1,7 @@
import React, { FC, CSSProperties } from 'react';
import React, { FC, CSSProperties, HTMLProps } from 'react';
import { FormattedValue } from '@grafana/data';
export interface Props {
export interface Props extends Omit<HTMLProps<HTMLDivElement>, 'className' | 'value' | 'style'> {
className?: string;
value: FormattedValue;
style: CSSProperties;
@ -17,14 +17,14 @@ function fontSizeReductionFactor(fontSize: number) {
return 0.6;
}
export const FormattedValueDisplay: FC<Props> = ({ value, className, style }) => {
export const FormattedValueDisplay: FC<Props> = ({ value, className, style, ...htmlProps }) => {
const fontSize = style.fontSize as number;
const reductionFactor = fontSizeReductionFactor(fontSize);
const hasPrefix = (value.prefix ?? '').length > 0;
const hasSuffix = (value.suffix ?? '').length > 0;
return (
<div className={className} style={style}>
<div className={className} style={style} {...htmlProps}>
<div>
{hasPrefix && <span>{value.prefix}</span>}
<span>{value.text}</span>

View File

@ -1,4 +1,3 @@
@import 'BarGauge/BarGauge';
@import 'ButtonCascader/ButtonCascader';
@import 'ColorPicker/ColorPicker';
@import 'CustomScrollbar/CustomScrollbar';

View File

@ -12,10 +12,13 @@ import {
toDataFrame,
} from '@grafana/data';
import { BarGaugeDisplayMode } from '@grafana/ui';
import { selectors } from '@grafana/e2e-selectors';
import { BarGaugePanel } from './BarGaugePanel';
import { BarGaugeOptions } from './types';
const valueSelector = selectors.components.Panels.Visualization.BarGauge.value;
describe('BarGaugePanel', () => {
describe('when empty result is rendered', () => {
const wrapper = createBarGaugePanelWithData({
@ -25,7 +28,7 @@ describe('BarGaugePanel', () => {
});
it('should render with title "No data"', () => {
const displayValue = wrapper.find('div.bar-gauge__value').text();
const displayValue = wrapper.find(`div[aria-label="${valueSelector}"]`).text();
expect(displayValue).toBe('No data');
});
});
@ -46,7 +49,7 @@ describe('BarGaugePanel', () => {
});
it('should render with title "No data"', () => {
const displayValue = wrapper.find('div.bar-gauge__value').text();
const displayValue = wrapper.find(`div[aria-label="${valueSelector}"]`).text();
expect(displayValue).toBe('100');
});
});