[APM] Don't show annotations on charts with no data (#68829)
Hide the annotations plot and legend when a chart has annotations but doesn't have any values in the series. Fixes #66981.
This commit is contained in:
parent
89a6007881
commit
8aa1b39695
|
@ -0,0 +1,37 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License;
|
||||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import React from 'react';
|
||||
// @ts-ignore
|
||||
import CustomPlot from './';
|
||||
|
||||
storiesOf('shared/charts/CustomPlot', module).add(
|
||||
'with annotations but no data',
|
||||
() => {
|
||||
const annotations = [
|
||||
{
|
||||
type: 'version',
|
||||
id: '2020-06-10 04:36:31',
|
||||
'@timestamp': 1591763925012,
|
||||
text: '2020-06-10 04:36:31',
|
||||
},
|
||||
{
|
||||
type: 'version',
|
||||
id: '2020-06-10 15:23:01',
|
||||
'@timestamp': 1591802689233,
|
||||
text: '2020-06-10 15:23:01',
|
||||
},
|
||||
];
|
||||
return <CustomPlot annotations={annotations} series={[]} />;
|
||||
},
|
||||
{
|
||||
info: {
|
||||
source: false,
|
||||
text:
|
||||
"When a chart has no data but does have annotations, the annotations shouldn't show up at all.",
|
||||
},
|
||||
}
|
||||
);
|
|
@ -168,7 +168,7 @@ export class InnerCustomPlot extends PureComponent {
|
|||
tickFormatX={this.props.tickFormatX}
|
||||
/>
|
||||
|
||||
{this.state.showAnnotations && !isEmpty(annotations) && (
|
||||
{this.state.showAnnotations && !isEmpty(annotations) && !noHits && (
|
||||
<AnnotationsPlot
|
||||
plotValues={plotValues}
|
||||
width={width}
|
||||
|
@ -202,7 +202,7 @@ export class InnerCustomPlot extends PureComponent {
|
|||
hiddenSeriesCount={hiddenSeriesCount}
|
||||
clickLegend={this.clickLegend}
|
||||
seriesEnabledState={this.state.seriesEnabledState}
|
||||
hasAnnotations={!isEmpty(annotations)}
|
||||
hasAnnotations={!isEmpty(annotations) && !noHits}
|
||||
showAnnotations={this.state.showAnnotations}
|
||||
onAnnotationsToggle={() => {
|
||||
this.setState(({ showAnnotations }) => ({
|
||||
|
|
|
@ -255,12 +255,28 @@ describe('when response has no data', () => {
|
|||
const onHover = jest.fn();
|
||||
const onMouseLeave = jest.fn();
|
||||
const onSelectionEnd = jest.fn();
|
||||
const annotations = [
|
||||
{
|
||||
type: 'version',
|
||||
id: '2020-06-10 04:36:31',
|
||||
'@timestamp': 1591763925012,
|
||||
text: '2020-06-10 04:36:31',
|
||||
},
|
||||
{
|
||||
type: 'version',
|
||||
id: '2020-06-10 15:23:01',
|
||||
'@timestamp': 1591802689233,
|
||||
text: '2020-06-10 15:23:01',
|
||||
},
|
||||
];
|
||||
|
||||
let wrapper;
|
||||
beforeEach(() => {
|
||||
const series = getEmptySeries(1451606400000, 1451610000000);
|
||||
|
||||
wrapper = mount(
|
||||
<InnerCustomPlot
|
||||
annotations={annotations}
|
||||
series={series}
|
||||
onHover={onHover}
|
||||
onMouseLeave={onMouseLeave}
|
||||
|
@ -294,6 +310,10 @@ describe('when response has no data', () => {
|
|||
expect(wrapper.find('Tooltip').length).toEqual(0);
|
||||
});
|
||||
|
||||
it('should not show annotations', () => {
|
||||
expect(wrapper.find('AnnotationsPlot')).toHaveLength(0);
|
||||
});
|
||||
|
||||
it('should have correct markup', () => {
|
||||
expect(toJson(wrapper)).toMatchSnapshot();
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue