[Lens] fix empty state for pie (#66206)

x-pack/plugins/lens/public/pie_visualization/register_expression.tsx

@@ -7,6 +7,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { i18n } from '@kbn/i18n';
+import { I18nProvider } from '@kbn/i18n/react';
 import { PartialTheme } from '@elastic/charts';
 import {
   IInterpreterRenderHandlers,
@@ -111,13 +112,15 @@ export const getPieRenderer = (dependencies: {
     const executeTriggerActions = getExecuteTriggerActions();
     const formatFactory = await dependencies.formatFactory;
     ReactDOM.render(
-      <MemoizedChart
-        {...config}
-        {...dependencies}
-        formatFactory={formatFactory}
-        executeTriggerActions={executeTriggerActions}
-        isDarkMode={dependencies.isDarkMode}
-      />,
+      <I18nProvider>
+        <MemoizedChart
+          {...config}
+          {...dependencies}
+          formatFactory={formatFactory}
+          executeTriggerActions={executeTriggerActions}
+          isDarkMode={dependencies.isDarkMode}
+        />
+      </I18nProvider>,
       domNode,
       () => {
         handlers.done();

x-pack/plugins/lens/public/pie_visualization/render_function.test.tsx

@@ -10,6 +10,7 @@ import { shallow } from 'enzyme';
 import { LensMultiTable } from '../types';
 import { PieComponent } from './render_function';
 import { PieExpressionArgs } from './types';
+import { EmptyPlaceholder } from '../shared_components';
 
 describe('PieVisualization component', () => {
   let getFormatSpy: jest.Mock;
@@ -109,5 +110,26 @@ describe('PieVisualization component', () => {
       );
       expect(component.find(Settings).prop('legendMaxDepth')).toBeUndefined();
     });
+
+    test('it shows emptyPlaceholder for undefined grouped data', () => {
+      const defaultData = getDefaultArgs().data;
+      const emptyData: LensMultiTable = {
+        ...defaultData,
+        tables: {
+          first: {
+            ...defaultData.tables.first,
+            rows: [
+              { a: undefined, b: undefined, c: 'I', d: 'Row 1' },
+              { a: undefined, b: undefined, c: 'J', d: 'Row 2' },
+            ],
+          },
+        },
+      };
+
+      const component = shallow(
+        <PieComponent args={args} {...getDefaultArgs()} data={emptyData} />
+      );
+      expect(component.find(EmptyPlaceholder).prop('icon')).toEqual('visPie');
+    });
   });
 });

x-pack/plugins/lens/public/pie_visualization/render_function.tsx

@@ -31,6 +31,7 @@ import { CHART_NAMES, DEFAULT_PERCENT_DECIMALS } from './constants';
 import { ColumnGroups, PieExpressionProps } from './types';
 import { UiActionsStart } from '../../../../../src/plugins/ui_actions/public';
 import { getSliceValueWithFallback, getFilterContext } from './render_helpers';
+import { EmptyPlaceholder } from '../shared_components';
 import './visualization.scss';
 
 const EMPTY_SLICE = Symbol('empty_slice');
@@ -201,27 +202,29 @@ export function PieComponent(
     const value = row[metricColumn.id];
     return typeof value === 'number' && value < 0;
   });
-  if (firstTable.rows.length === 0 || hasNegative) {
+  const isEmpty =
+    firstTable.rows.length === 0 ||
+    firstTable.rows.every(row =>
+      groups.every(colId => !row[colId] || typeof row[colId] === 'undefined')
+    );
+
+  if (isEmpty) {
+    return <EmptyPlaceholder icon="visPie" />;
+  }
+
+  if (hasNegative) {
     return (
       <EuiText className="lnsChart__empty" textAlign="center" color="subdued" size="xs">
-        {hasNegative ? (
-          <FormattedMessage
-            id="xpack.lens.pie.pieWithNegativeWarningLabel"
-            defaultMessage="{chartType} charts can't render with negative values. Try a different chart type."
-            values={{
-              chartType: CHART_NAMES[shape].label,
-            }}
-          />
-        ) : (
-          <FormattedMessage
-            id="xpack.lens.xyVisualization.noDataLabel"
-            defaultMessage="No results found"
-          />
-        )}
+        <FormattedMessage
+          id="xpack.lens.pie.pieWithNegativeWarningLabel"
+          defaultMessage="{chartType} charts can't render with negative values. Try a different chart type."
+          values={{
+            chartType: CHART_NAMES[shape].label,
+          }}
+        />
       </EuiText>
     );
   }
-
   return (
     <VisualizationContainer className="lnsPieExpression__container" isReady={state.isReady}>
       <Chart>

x-pack/plugins/lens/public/shared_components/empty_placeholder.tsx

@@ -0,0 +1,24 @@
+/*
+ * 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 React from 'react';
+import { EuiIcon, EuiText, IconType, EuiSpacer } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+export const EmptyPlaceholder = (props: { icon: IconType }) => (
+  <>
+    <EuiText className="lnsChart__empty" textAlign="center" color="subdued" size="xs">
+      <EuiIcon type={props.icon} color="subdued" size="l" />
+      <EuiSpacer size="s" />
+      <p>
+        <FormattedMessage
+          id="xpack.lens.xyVisualization.noDataLabel"
+          defaultMessage="No results found"
+        />
+      </p>
+    </EuiText>
+  </>
+);

x-pack/plugins/lens/public/shared_components/index.ts

@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export * from './empty_placeholder';

x-pack/plugins/lens/public/xy_visualization/xy_expression.tsx

@@ -26,8 +26,7 @@ import {
   ExpressionFunctionDefinition,
   ExpressionValueSearchContext,
 } from 'src/plugins/expressions/public';
-import { EuiIcon, EuiText, IconType, EuiSpacer } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n/react';
+import { IconType } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import {
   ValueClickTriggerContext,
@@ -41,6 +40,7 @@ import { isHorizontalChart } from './state_helpers';
 import { getExecuteTriggerActions } from '../services';
 import { UiActionsStart } from '../../../../../src/plugins/ui_actions/public';
 import { parseInterval } from '../../../../../src/plugins/data/common';
+import { EmptyPlaceholder } from '../shared_components';
 
 type InferPropType<T> = T extends React.FunctionComponent<infer P> ? P : T;
 type SeriesSpec = InferPropType<typeof LineSeries> &
@@ -193,18 +193,7 @@ export function XYChart({
 
   if (filteredLayers.length === 0) {
     const icon: IconType = layers.length > 0 ? getIconForSeriesType(layers[0].seriesType) : 'bar';
-    return (
-      <EuiText className="lnsChart__empty" textAlign="center" color="subdued" size="xs">
-        <EuiIcon type={icon} color="subdued" size="l" />
-        <EuiSpacer size="s" />
-        <p>
-          <FormattedMessage
-            id="xpack.lens.xyVisualization.noDataLabel"
-            defaultMessage="No results found"
-          />
-        </p>
-      </EuiText>
-    );
+    return <EmptyPlaceholder icon={icon} />;
   }
 
   // use formatting hint of first x axis column to format ticks