From a1e60900080321a09d9e39aecc62de24a1876008 Mon Sep 17 00:00:00 2001 From: Alex Khomenko Date: Wed, 26 Aug 2020 14:44:08 +0300 Subject: [PATCH] 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 --- e2e/suite1/specs/bar-gauge.spec.ts | 5 ++- .../src/selectors/components.ts | 3 ++ .../src/components/BarGauge/BarGauge.mdx | 40 +++++++++++++++++++ .../components/BarGauge/BarGauge.story.tsx | 6 +++ .../src/components/BarGauge/BarGauge.tsx | 13 +++++- .../src/components/BarGauge/_BarGauge.scss | 9 ----- .../__snapshots__/BarGauge.test.tsx.snap | 2 +- .../FormattedValueDisplay.tsx | 8 ++-- packages/grafana-ui/src/components/index.scss | 1 - .../panel/bargauge/BarGaugePanel.test.tsx | 7 +++- 10 files changed, 73 insertions(+), 21 deletions(-) create mode 100644 packages/grafana-ui/src/components/BarGauge/BarGauge.mdx delete mode 100644 packages/grafana-ui/src/components/BarGauge/_BarGauge.scss diff --git a/e2e/suite1/specs/bar-gauge.spec.ts b/e2e/suite1/specs/bar-gauge.spec.ts index c78f498906c..382e70d6908 100644 --- a/e2e/suite1/specs/bar-gauge.spec.ts +++ b/e2e/suite1/specs/bar-gauge.spec.ts @@ -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'); }, diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts index 9b78254df32..10887aa5858 100644 --- a/packages/grafana-e2e-selectors/src/selectors/components.ts +++ b/packages/grafana-e2e-selectors/src/selectors/components.ts @@ -33,6 +33,9 @@ export const Components = { labels: () => 'div.flot-x-axis > div.flot-tick-label', }, }, + BarGauge: { + value: 'Bar gauge value', + }, }, }, Drawer: { diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.mdx b/packages/grafana-ui/src/components/BarGauge/BarGauge.mdx new file mode 100644 index 00000000000..cefcce56ee9 --- /dev/null +++ b/packages/grafana-ui/src/components/BarGauge/BarGauge.mdx @@ -0,0 +1,40 @@ +import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks'; +import { BarGauge } from './BarGauge'; + + + +# BarGauge + +## Usage +```tsx +import { BarGauge, BarGaugeDisplayMode } from '@grafana/ui'; +import { VizOrientation, ThresholdsMode, Field, FieldType, getDisplayProcessor } from '@grafana/data'; + +const field: Partial = { + 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, +}; + +//... + +``` + + diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx b/packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx index 51dcc8c9fcc..1a2cef1b990 100644 --- a/packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx +++ b/packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx @@ -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) { diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx index f28aceb8952..66e5cf97cda 100644 --- a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx +++ b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx @@ -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 { return (
- + {showUnfilled &&
}
@@ -235,7 +240,11 @@ export class BarGauge extends PureComponent { return (
{cells} - +
); } diff --git a/packages/grafana-ui/src/components/BarGauge/_BarGauge.scss b/packages/grafana-ui/src/components/BarGauge/_BarGauge.scss deleted file mode 100644 index 9e43439f0a2..00000000000 --- a/packages/grafana-ui/src/components/BarGauge/_BarGauge.scss +++ /dev/null @@ -1,9 +0,0 @@ -.bar-gauge { - display: flex; - flex-direction: column; - justify-content: flex-end; -} - -.bar-gauge__value { - text-align: center; -} 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 3b39c8362dc..c0757d98335 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 @@ -23,7 +23,7 @@ exports[`BarGauge Render with basic options should render 1`] = ` } > , 'className' | 'value' | 'style'> { className?: string; value: FormattedValue; style: CSSProperties; @@ -17,14 +17,14 @@ function fontSizeReductionFactor(fontSize: number) { return 0.6; } -export const FormattedValueDisplay: FC = ({ value, className, style }) => { +export const FormattedValueDisplay: FC = ({ 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 ( -
+
{hasPrefix && {value.prefix}} {value.text} diff --git a/packages/grafana-ui/src/components/index.scss b/packages/grafana-ui/src/components/index.scss index 4f8a24b7bd9..2042620b884 100644 --- a/packages/grafana-ui/src/components/index.scss +++ b/packages/grafana-ui/src/components/index.scss @@ -1,4 +1,3 @@ -@import 'BarGauge/BarGauge'; @import 'ButtonCascader/ButtonCascader'; @import 'ColorPicker/ColorPicker'; @import 'CustomScrollbar/CustomScrollbar'; diff --git a/public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx b/public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx index 93cc8b74ba7..1597ecc456a 100644 --- a/public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx +++ b/public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx @@ -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'); }); });