mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
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:
parent
4cd42ed898
commit
a1e6090008
@ -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');
|
||||
},
|
||||
|
@ -33,6 +33,9 @@ export const Components = {
|
||||
labels: () => 'div.flot-x-axis > div.flot-tick-label',
|
||||
},
|
||||
},
|
||||
BarGauge: {
|
||||
value: 'Bar gauge value',
|
||||
},
|
||||
},
|
||||
},
|
||||
Drawer: {
|
||||
|
40
packages/grafana-ui/src/components/BarGauge/BarGauge.mdx
Normal file
40
packages/grafana-ui/src/components/BarGauge/BarGauge.mdx
Normal 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} />
|
@ -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>) {
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
@ -1,9 +0,0 @@
|
||||
.bar-gauge {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.bar-gauge__value {
|
||||
text-align: center;
|
||||
}
|
@ -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",
|
||||
|
@ -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>
|
||||
|
@ -1,4 +1,3 @@
|
||||
@import 'BarGauge/BarGauge';
|
||||
@import 'ButtonCascader/ButtonCascader';
|
||||
@import 'ColorPicker/ColorPicker';
|
||||
@import 'CustomScrollbar/CustomScrollbar';
|
||||
|
@ -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');
|
||||
});
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user