diff --git a/src/plugins/chart_expressions/expression_legacy_metric/public/components/__snapshots__/metric_component.test.tsx.snap b/src/plugins/chart_expressions/expression_legacy_metric/public/components/__snapshots__/metric_component.test.tsx.snap
index 106d45bc4a87c..36c92d316d83c 100644
--- a/src/plugins/chart_expressions/expression_legacy_metric/public/components/__snapshots__/metric_component.test.tsx.snap
+++ b/src/plugins/chart_expressions/expression_legacy_metric/public/components/__snapshots__/metric_component.test.tsx.snap
@@ -28,7 +28,6 @@ Array [
}
}
onFilter={[Function]}
- renderComplete={[MockFunction]}
style={
Object {
"bgColor": false,
@@ -116,4 +115,4 @@ exports[`MetricVisComponent should render correct structure for single metric 1`
}
}
/>
-`;
\ No newline at end of file
+`;
diff --git a/src/plugins/chart_expressions/expression_legacy_metric/public/components/metric_component.test.tsx b/src/plugins/chart_expressions/expression_legacy_metric/public/components/metric_component.test.tsx
index 314f837986258..d61e6d19a6eab 100644
--- a/src/plugins/chart_expressions/expression_legacy_metric/public/components/metric_component.test.tsx
+++ b/src/plugins/chart_expressions/expression_legacy_metric/public/components/metric_component.test.tsx
@@ -7,7 +7,7 @@
*/
import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
import { Datatable } from '@kbn/expressions-plugin/common';
import MetricVisComponent, { MetricVisComponentProps } from './metric_component';
import { LabelPosition } from '../../common/constants';
@@ -76,15 +76,15 @@ describe('MetricVisComponent', function () {
...propOverrides,
};
- return shallow();
+ return ;
};
it('should render component', () => {
- expect(getComponent().exists()).toBe(true);
+ expect(shallow(getComponent()).exists()).toBe(true);
});
it('should render correct structure for single metric', function () {
- expect(getComponent()).toMatchSnapshot();
+ expect(shallow(getComponent())).toMatchSnapshot();
});
it('should render correct structure for multi-value metrics', function () {
@@ -110,6 +110,36 @@ describe('MetricVisComponent', function () {
},
});
- expect(component).toMatchSnapshot();
+ expect(shallow(component)).toMatchSnapshot();
+ });
+
+ it('should call renderComplete once for multi-value metrics', function () {
+ const renderComplete = jest.fn();
+ const component = getComponent({
+ renderComplete,
+ filterable: [true, false],
+ visData: {
+ type: 'datatable',
+ columns: [
+ { id: 'col-0', name: '1st percentile of bytes', meta: { type: 'number' } },
+ { id: 'col-1', name: '99th percentile of bytes', meta: { type: 'number' } },
+ ],
+ rows: [{ 'col-0': 182, 'col-1': 445842.4634666484 }],
+ },
+ visParams: {
+ ...visParams,
+ dimensions: {
+ ...visParams.dimensions,
+ metrics: [
+ { accessor: 0, type: 'vis_dimension', format: { id: 'number', params: {} } },
+ { accessor: 1, type: 'vis_dimension', format: { id: 'number', params: {} } },
+ ],
+ },
+ },
+ });
+
+ mount(component);
+
+ expect(renderComplete).toHaveBeenCalledTimes(1);
});
});
diff --git a/src/plugins/chart_expressions/expression_legacy_metric/public/components/metric_component.tsx b/src/plugins/chart_expressions/expression_legacy_metric/public/components/metric_component.tsx
index 8da0c4d4d8b8a..2bebcda46bbe5 100644
--- a/src/plugins/chart_expressions/expression_legacy_metric/public/components/metric_component.tsx
+++ b/src/plugins/chart_expressions/expression_legacy_metric/public/components/metric_component.tsx
@@ -127,7 +127,7 @@ class MetricVisComponent extends Component {
return this.props.visParams.metric.autoScale && this.props.visParams.metric.colorFullBackground;
};
- private renderMetric = (metric: MetricOptions, index: number) => {
+ private renderMetric = (metric: MetricOptions, index: number, arrayRef: MetricOptions[]) => {
const hasBuckets = this.props.visParams.dimensions.bucket !== undefined;
const MetricComponent = this.props.visParams.metric.autoScale
? AutoScaleMetricVisValue
@@ -157,7 +157,7 @@ class MetricVisComponent extends Component {
autoScale={this.props.visParams.metric.autoScale}
colorFullBackground={this.props.visParams.metric.colorFullBackground}
labelConfig={this.props.visParams.metric.labels}
- renderComplete={this.props.renderComplete}
+ renderComplete={arrayRef.length - 1 === index ? this.props.renderComplete : undefined}
/>
);
};