From 198c5d998816e940e4c8d92979504c86116bcd2d Mon Sep 17 00:00:00 2001
From: Marco Liberati <dej611@users.noreply.github.com>
Date: Thu, 1 Oct 2020 18:02:37 +0200
Subject: [PATCH] [Lens] Fix embeddable title and description for reporting and
 dashboard tooltip (#78767)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../lib/panel/panel_header/panel_header.tsx   |  9 ++-
 .../public/embeddable/visualize_embeddable.ts |  2 +-
 .../__snapshots__/expression.test.tsx.snap    |  4 +-
 .../datatable_visualization/expression.tsx    | 10 ++-
 .../datatable_visualization/visualization.tsx |  4 +-
 .../editor_frame/expression_helpers.ts        |  9 ++-
 .../editor_frame/state_helpers.ts             |  4 ++
 .../embeddable/embeddable.tsx                 |  6 ++
 .../metric_visualization/expression.test.tsx  | 69 +++++++++++++++++--
 .../metric_visualization/expression.tsx       | 24 +++++--
 .../lens/public/metric_visualization/types.ts |  2 +
 .../visualization.test.ts                     |  8 ++-
 .../metric_visualization/visualization.tsx    | 10 +--
 .../public/pie_visualization/expression.tsx   |  8 +++
 .../pie_visualization/render_function.tsx     |  7 +-
 .../public/pie_visualization/to_expression.ts | 13 ++--
 .../lens/public/pie_visualization/types.ts    |  2 +
 x-pack/plugins/lens/public/types.ts           |  3 +-
 .../public/visualization_container.test.tsx   |  7 +-
 .../lens/public/visualization_container.tsx   | 11 ++-
 .../__snapshots__/to_expression.test.ts.snap  |  6 ++
 .../public/xy_visualization/expression.tsx    | 15 +++-
 .../public/xy_visualization/to_expression.ts  | 10 ++-
 .../lens/public/xy_visualization/types.ts     |  2 +
 24 files changed, 206 insertions(+), 39 deletions(-)

diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx b/src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx
index 7dde84e510535..dea483efb349f 100644
--- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx
+++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx
@@ -109,12 +109,11 @@ function renderTooltip(description: string) {
   );
 }
 
-const VISUALIZE_EMBEDDABLE_TYPE = 'visualization';
-type VisualizeEmbeddable = any;
+type EmbeddableWithDescription = IEmbeddable & { getDescription: () => string };
 
-function getViewDescription(embeddable: IEmbeddable | VisualizeEmbeddable) {
-  if (embeddable.type === VISUALIZE_EMBEDDABLE_TYPE) {
-    const description = embeddable.getVisualizationDescription();
+function getViewDescription(embeddable: IEmbeddable | EmbeddableWithDescription) {
+  if ('getDescription' in embeddable) {
+    const description = embeddable.getDescription();
 
     if (description) {
       return description;
diff --git a/src/plugins/visualizations/public/embeddable/visualize_embeddable.ts b/src/plugins/visualizations/public/embeddable/visualize_embeddable.ts
index c091d396b4924..fe8a9adff4052 100644
--- a/src/plugins/visualizations/public/embeddable/visualize_embeddable.ts
+++ b/src/plugins/visualizations/public/embeddable/visualize_embeddable.ts
@@ -167,7 +167,7 @@ export class VisualizeEmbeddable
         typeof inspectorAdapters === 'function' ? inspectorAdapters() : inspectorAdapters;
     }
   }
-  public getVisualizationDescription() {
+  public getDescription() {
     return this.vis.description;
   }
 
diff --git a/x-pack/plugins/lens/public/datatable_visualization/__snapshots__/expression.test.tsx.snap b/x-pack/plugins/lens/public/datatable_visualization/__snapshots__/expression.test.tsx.snap
index c0210c3915ce8..9c7bdc3397f9c 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/__snapshots__/expression.test.tsx.snap
+++ b/x-pack/plugins/lens/public/datatable_visualization/__snapshots__/expression.test.tsx.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`datatable_expression DatatableComponent it renders the title and value 1`] = `
-<VisualizationContainer>
+<VisualizationContainer
+  reportTitle="My fanci metric chart"
+>
   <EuiBasicTable
     className="lnsDataTable"
     columns={
diff --git a/x-pack/plugins/lens/public/datatable_visualization/expression.tsx b/x-pack/plugins/lens/public/datatable_visualization/expression.tsx
index 5ed693d2ead86..af1773b413599 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/expression.tsx
+++ b/x-pack/plugins/lens/public/datatable_visualization/expression.tsx
@@ -33,6 +33,7 @@ export interface DatatableColumns {
 
 interface Args {
   title: string;
+  description?: string;
   columns: DatatableColumns & { type: 'lens_datatable_columns' };
 }
 
@@ -72,6 +73,10 @@ export const datatable: ExpressionFunctionDefinition<
         defaultMessage: 'Title',
       }),
     },
+    description: {
+      types: ['string'],
+      help: '',
+    },
     columns: {
       types: ['lens_datatable_columns'],
       help: '',
@@ -207,7 +212,10 @@ export function DatatableComponent(props: DatatableRenderProps) {
   }
 
   return (
-    <VisualizationContainer>
+    <VisualizationContainer
+      reportTitle={props.args.title}
+      reportDescription={props.args.description}
+    >
       <EuiBasicTable
         className="lnsDataTable"
         data-test-subj="lnsDataTable"
diff --git a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx b/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx
index 5b462f44b3dd5..1464ae6988a2d 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx
+++ b/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx
@@ -194,7 +194,7 @@ export const datatableVisualization: Visualization<DatatableVisualizationState>
     };
   },
 
-  toExpression(state, datasourceLayers): Ast {
+  toExpression(state, datasourceLayers, { title, description } = {}): Ast {
     const layer = state.layers[0];
     const datasource = datasourceLayers[layer.layerId];
     const originalOrder = datasource.getTableSpec().map(({ columnId }) => columnId);
@@ -211,6 +211,8 @@ export const datatableVisualization: Visualization<DatatableVisualizationState>
           type: 'function',
           function: 'lens_datatable',
           arguments: {
+            title: [title || ''],
+            description: [description || ''],
             columns: [
               {
                 type: 'expression',
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/expression_helpers.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/expression_helpers.ts
index 952718e13c8cf..e7568147dc568 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/expression_helpers.ts
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/expression_helpers.ts
@@ -73,7 +73,11 @@ export function buildExpression({
   datasourceMap,
   datasourceStates,
   datasourceLayers,
+  title,
+  description,
 }: {
+  title?: string;
+  description?: string;
   visualization: Visualization | null;
   visualizationState: unknown;
   datasourceMap: Record<string, Datasource>;
@@ -89,7 +93,10 @@ export function buildExpression({
   if (visualization === null) {
     return null;
   }
-  const visualizationExpression = visualization.toExpression(visualizationState, datasourceLayers);
+  const visualizationExpression = visualization.toExpression(visualizationState, datasourceLayers, {
+    title,
+    description,
+  });
 
   const completeExpression = prependDatasourceExpression(
     visualizationExpression,
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_helpers.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_helpers.ts
index 6deb9ffd37a06..1fe5224d0b1b4 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_helpers.ts
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_helpers.ts
@@ -61,6 +61,8 @@ export async function persistedStateToExpression(
     state: { visualization: visualizationState, datasourceStates: persistedDatasourceStates },
     visualizationType,
     references,
+    title,
+    description,
   } = doc;
   if (!visualizationType) return null;
   const visualization = visualizations[visualizationType!];
@@ -78,6 +80,8 @@ export async function persistedStateToExpression(
   const datasourceLayers = createDatasourceLayers(datasources, datasourceStates);
 
   return buildExpression({
+    title,
+    description,
     visualization,
     visualizationState,
     datasourceMap: datasources,
diff --git a/x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable.tsx b/x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable.tsx
index 61a5d8cacdc4f..16b19ca0af849 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable.tsx
@@ -295,6 +295,12 @@ export class Embeddable
     return this.deps.attributeService.getInputAsValueType(input);
   };
 
+  // same API as Visualize
+  public getDescription() {
+    // mind that savedViz is loaded in async way here
+    return this.savedVis && this.savedVis.description;
+  }
+
   destroy() {
     super.destroy();
     if (this.domNode) {
diff --git a/x-pack/plugins/lens/public/metric_visualization/expression.test.tsx b/x-pack/plugins/lens/public/metric_visualization/expression.test.tsx
index 0c92cdb2c31fc..77a8ce64b21a2 100644
--- a/x-pack/plugins/lens/public/metric_visualization/expression.test.tsx
+++ b/x-pack/plugins/lens/public/metric_visualization/expression.test.tsx
@@ -32,10 +32,21 @@ function sampleArgs() {
     accessor: 'a',
     layerId: 'l1',
     title: 'My fanci metric chart',
+    description: 'Fancy chart description',
+    metricTitle: 'My fanci metric chart',
     mode: 'full',
   };
 
-  return { data, args };
+  const noAttributesArgs: MetricConfig = {
+    accessor: 'a',
+    layerId: 'l1',
+    title: '',
+    description: '',
+    metricTitle: 'My fanci metric chart',
+    mode: 'full',
+  };
+
+  return { data, args, noAttributesArgs };
 }
 
 describe('metric_expression', () => {
@@ -53,7 +64,7 @@ describe('metric_expression', () => {
   });
 
   describe('MetricChart component', () => {
-    test('it renders the title and value', () => {
+    test('it renders the all attributes when passed (title, description, metricTitle, value)', () => {
       const { data, args } = sampleArgs();
 
       expect(
@@ -61,6 +72,7 @@ describe('metric_expression', () => {
       ).toMatchInlineSnapshot(`
         <VisualizationContainer
           className="lnsMetricExpression__container"
+          reportDescription="Fancy chart description"
           reportTitle="My fanci metric chart"
         >
           <AutoScale>
@@ -90,21 +102,66 @@ describe('metric_expression', () => {
       `);
     });
 
-    test('it does not render title in reduced mode', () => {
-      const { data, args } = sampleArgs();
+    test('it renders only chart content when title and description are empty strings', () => {
+      const { data, noAttributesArgs } = sampleArgs();
 
       expect(
         shallow(
           <MetricChart
             data={data}
-            args={{ ...args, mode: 'reduced' }}
+            args={noAttributesArgs}
             formatFactory={(x) => x as IFieldFormat}
           />
         )
       ).toMatchInlineSnapshot(`
         <VisualizationContainer
           className="lnsMetricExpression__container"
-          reportTitle="My fanci metric chart"
+          reportDescription=""
+          reportTitle=""
+        >
+          <AutoScale>
+            <div
+              data-test-subj="lns_metric_value"
+              style={
+                Object {
+                  "fontSize": "60pt",
+                  "fontWeight": 600,
+                }
+              }
+            >
+              10110
+            </div>
+            <div
+              data-test-subj="lns_metric_title"
+              style={
+                Object {
+                  "fontSize": "24pt",
+                }
+              }
+            >
+              My fanci metric chart
+            </div>
+          </AutoScale>
+        </VisualizationContainer>
+      `);
+    });
+
+    test('it does not render metricTitle in reduced mode', () => {
+      const { data, noAttributesArgs } = sampleArgs();
+
+      expect(
+        shallow(
+          <MetricChart
+            data={data}
+            args={{ ...noAttributesArgs, mode: 'reduced' }}
+            formatFactory={(x) => x as IFieldFormat}
+          />
+        )
+      ).toMatchInlineSnapshot(`
+        <VisualizationContainer
+          className="lnsMetricExpression__container"
+          reportDescription=""
+          reportTitle=""
         >
           <AutoScale>
             <div
diff --git a/x-pack/plugins/lens/public/metric_visualization/expression.tsx b/x-pack/plugins/lens/public/metric_visualization/expression.tsx
index 7eeef13240f72..29c9cc3e454c7 100644
--- a/x-pack/plugins/lens/public/metric_visualization/expression.tsx
+++ b/x-pack/plugins/lens/public/metric_visualization/expression.tsx
@@ -43,6 +43,14 @@ export const metricChart: ExpressionFunctionDefinition<
       types: ['string'],
       help: 'The chart title.',
     },
+    description: {
+      types: ['string'],
+      help: '',
+    },
+    metricTitle: {
+      types: ['string'],
+      help: 'The title of the metric shown.',
+    },
     accessor: {
       types: ['string'],
       help: 'The column whose value is being displayed',
@@ -98,12 +106,16 @@ export function MetricChart({
   args,
   formatFactory,
 }: MetricChartProps & { formatFactory: FormatFactory }) {
-  const { title, accessor, mode } = args;
+  const { metricTitle, title, description, accessor, mode } = args;
   let value = '-';
   const firstTable = Object.values(data.tables)[0];
   if (!accessor) {
     return (
-      <VisualizationContainer reportTitle={title} className="lnsMetricExpression__container" />
+      <VisualizationContainer
+        reportTitle={title}
+        reportDescription={description}
+        className="lnsMetricExpression__container"
+      />
     );
   }
 
@@ -119,14 +131,18 @@ export function MetricChart({
   }
 
   return (
-    <VisualizationContainer reportTitle={title} className="lnsMetricExpression__container">
+    <VisualizationContainer
+      reportTitle={title}
+      reportDescription={description}
+      className="lnsMetricExpression__container"
+    >
       <AutoScale>
         <div data-test-subj="lns_metric_value" style={{ fontSize: '60pt', fontWeight: 600 }}>
           {value}
         </div>
         {mode === 'full' && (
           <div data-test-subj="lns_metric_title" style={{ fontSize: '24pt' }}>
-            {title}
+            {metricTitle}
           </div>
         )}
       </AutoScale>
diff --git a/x-pack/plugins/lens/public/metric_visualization/types.ts b/x-pack/plugins/lens/public/metric_visualization/types.ts
index 86a781716b345..c4a3fd094abe6 100644
--- a/x-pack/plugins/lens/public/metric_visualization/types.ts
+++ b/x-pack/plugins/lens/public/metric_visualization/types.ts
@@ -11,5 +11,7 @@ export interface State {
 
 export interface MetricConfig extends State {
   title: string;
+  description: string;
+  metricTitle: string;
   mode: 'reduced' | 'full';
 }
diff --git a/x-pack/plugins/lens/public/metric_visualization/visualization.test.ts b/x-pack/plugins/lens/public/metric_visualization/visualization.test.ts
index aa3de93013e66..80c7a174b3264 100644
--- a/x-pack/plugins/lens/public/metric_visualization/visualization.test.ts
+++ b/x-pack/plugins/lens/public/metric_visualization/visualization.test.ts
@@ -171,11 +171,17 @@ describe('metric_visualization', () => {
                 "accessor": Array [
                   "a",
                 ],
+                "description": Array [
+                  "",
+                ],
+                "metricTitle": Array [
+                  "shazm",
+                ],
                 "mode": Array [
                   "full",
                 ],
                 "title": Array [
-                  "shazm",
+                  "",
                 ],
               },
               "function": "lens_metric_chart",
diff --git a/x-pack/plugins/lens/public/metric_visualization/visualization.tsx b/x-pack/plugins/lens/public/metric_visualization/visualization.tsx
index 72c07bed1acb2..77d189ce53d01 100644
--- a/x-pack/plugins/lens/public/metric_visualization/visualization.tsx
+++ b/x-pack/plugins/lens/public/metric_visualization/visualization.tsx
@@ -14,7 +14,7 @@ import { State } from './types';
 const toExpression = (
   state: State,
   datasourceLayers: Record<string, DatasourcePublicAPI>,
-  mode: 'reduced' | 'full' = 'full'
+  attributes?: { mode?: 'reduced' | 'full'; title?: string; description?: string }
 ): Ast | null => {
   if (!state.accessor) {
     return null;
@@ -30,9 +30,11 @@ const toExpression = (
         type: 'function',
         function: 'lens_metric_chart',
         arguments: {
-          title: [(operation && operation.label) || ''],
+          title: [attributes?.title || ''],
+          description: [attributes?.description || ''],
+          metricTitle: [(operation && operation.label) || ''],
           accessor: [state.accessor],
-          mode: [mode],
+          mode: [attributes?.mode || 'full'],
         },
       },
     ],
@@ -104,7 +106,7 @@ export const metricVisualization: Visualization<State> = {
 
   toExpression,
   toPreviewExpression: (state, datasourceLayers) =>
-    toExpression(state, datasourceLayers, 'reduced'),
+    toExpression(state, datasourceLayers, { mode: 'reduced' }),
 
   setDimension({ prevState, columnId }) {
     return { ...prevState, accessor: columnId };
diff --git a/x-pack/plugins/lens/public/pie_visualization/expression.tsx b/x-pack/plugins/lens/public/pie_visualization/expression.tsx
index 89d93ab79233f..d93145f29aa89 100644
--- a/x-pack/plugins/lens/public/pie_visualization/expression.tsx
+++ b/x-pack/plugins/lens/public/pie_visualization/expression.tsx
@@ -37,6 +37,14 @@ export const pie: ExpressionFunctionDefinition<
     defaultMessage: 'Pie renderer',
   }),
   args: {
+    title: {
+      types: ['string'],
+      help: 'The chart title.',
+    },
+    description: {
+      types: ['string'],
+      help: '',
+    },
     groups: {
       types: ['string'],
       multi: true,
diff --git a/x-pack/plugins/lens/public/pie_visualization/render_function.tsx b/x-pack/plugins/lens/public/pie_visualization/render_function.tsx
index d97ab146e000d..8de810f9aa5d3 100644
--- a/x-pack/plugins/lens/public/pie_visualization/render_function.tsx
+++ b/x-pack/plugins/lens/public/pie_visualization/render_function.tsx
@@ -228,7 +228,12 @@ export function PieComponent(
     );
   }
   return (
-    <VisualizationContainer className="lnsPieExpression__container" isReady={state.isReady}>
+    <VisualizationContainer
+      reportTitle={props.args.title}
+      reportDescription={props.args.description}
+      className="lnsPieExpression__container"
+      isReady={state.isReady}
+    >
       <Chart>
         <Settings
           // Legend is hidden in many scenarios
diff --git a/x-pack/plugins/lens/public/pie_visualization/to_expression.ts b/x-pack/plugins/lens/public/pie_visualization/to_expression.ts
index f36b9efb930a9..d721a578a3788 100644
--- a/x-pack/plugins/lens/public/pie_visualization/to_expression.ts
+++ b/x-pack/plugins/lens/public/pie_visualization/to_expression.ts
@@ -11,15 +11,16 @@ import { PieVisualizationState } from './types';
 
 export function toExpression(
   state: PieVisualizationState,
-  datasourceLayers: Record<string, DatasourcePublicAPI>
+  datasourceLayers: Record<string, DatasourcePublicAPI>,
+  attributes: Partial<{ title: string; description: string }> = {}
 ) {
-  return expressionHelper(state, datasourceLayers, false);
+  return expressionHelper(state, datasourceLayers, { ...attributes, isPreview: false });
 }
 
 function expressionHelper(
   state: PieVisualizationState,
   datasourceLayers: Record<string, DatasourcePublicAPI>,
-  isPreview: boolean
+  attributes: { isPreview: boolean; title?: string; description?: string } = { isPreview: false }
 ): Ast | null {
   const layer = state.layers[0];
   const datasource = datasourceLayers[layer.layerId];
@@ -37,8 +38,10 @@ function expressionHelper(
         type: 'function',
         function: 'lens_pie',
         arguments: {
+          title: [attributes.title || ''],
+          description: [attributes.description || ''],
           shape: [state.shape],
-          hideLabels: [isPreview],
+          hideLabels: [attributes.isPreview],
           groups: operations.map((o) => o.columnId),
           metric: [layer.metric],
           numberDisplay: [layer.numberDisplay],
@@ -57,5 +60,5 @@ export function toPreviewExpression(
   state: PieVisualizationState,
   datasourceLayers: Record<string, DatasourcePublicAPI>
 ) {
-  return expressionHelper(state, datasourceLayers, true);
+  return expressionHelper(state, datasourceLayers, { isPreview: true });
 }
diff --git a/x-pack/plugins/lens/public/pie_visualization/types.ts b/x-pack/plugins/lens/public/pie_visualization/types.ts
index 74156bce2ea70..603c80aa00066 100644
--- a/x-pack/plugins/lens/public/pie_visualization/types.ts
+++ b/x-pack/plugins/lens/public/pie_visualization/types.ts
@@ -28,6 +28,8 @@ export interface PieVisualizationState {
 }
 
 export type PieExpressionArgs = SharedLayerState & {
+  title?: string;
+  description?: string;
   shape: 'pie' | 'donut' | 'treemap';
   hideLabels: boolean;
 };
diff --git a/x-pack/plugins/lens/public/types.ts b/x-pack/plugins/lens/public/types.ts
index e97e0d612a2ee..e5e8a645dd0e8 100644
--- a/x-pack/plugins/lens/public/types.ts
+++ b/x-pack/plugins/lens/public/types.ts
@@ -519,7 +519,8 @@ export interface Visualization<T = unknown> {
 
   toExpression: (
     state: T,
-    datasourceLayers: Record<string, DatasourcePublicAPI>
+    datasourceLayers: Record<string, DatasourcePublicAPI>,
+    attributes?: Partial<{ title: string; description: string }>
   ) => Ast | string | null;
   /**
    * Expression to render a preview version of the chart in very constrained space.
diff --git a/x-pack/plugins/lens/public/visualization_container.test.tsx b/x-pack/plugins/lens/public/visualization_container.test.tsx
index 454399ec90121..7fc3541c63072 100644
--- a/x-pack/plugins/lens/public/visualization_container.test.tsx
+++ b/x-pack/plugins/lens/public/visualization_container.test.tsx
@@ -43,13 +43,16 @@ describe('VisualizationContainer', () => {
     expect(reportingEl.prop('data-shared-item')).toBeTruthy();
   });
 
-  test('renders title for reporting, if provided', () => {
+  test('renders title and description for reporting, if provided', () => {
     const component = mount(
-      <VisualizationContainer reportTitle="shazam!">Hello!</VisualizationContainer>
+      <VisualizationContainer reportTitle="shazam!" reportDescription="Description">
+        Hello!
+      </VisualizationContainer>
     );
     const reportingEl = component.find('[data-shared-item]').first();
 
     expect(reportingEl.prop('data-title')).toEqual('shazam!');
+    expect(reportingEl.prop('data-description')).toEqual('Description');
   });
 
   test('renders style', () => {
diff --git a/x-pack/plugins/lens/public/visualization_container.tsx b/x-pack/plugins/lens/public/visualization_container.tsx
index 521d41b6f8d94..429dc63231cbe 100644
--- a/x-pack/plugins/lens/public/visualization_container.tsx
+++ b/x-pack/plugins/lens/public/visualization_container.tsx
@@ -12,6 +12,7 @@ import classNames from 'classnames';
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
   isReady?: boolean;
   reportTitle?: string;
+  reportDescription?: string;
 }
 
 /**
@@ -21,16 +22,24 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
 export function VisualizationContainer({
   isReady = true,
   reportTitle,
+  reportDescription,
   children,
   className,
   ...rest
 }: Props) {
+  const attributes: Partial<{ 'data-title': string; 'data-description': string }> = {};
+  if (reportTitle) {
+    attributes['data-title'] = reportTitle;
+  }
+  if (reportDescription) {
+    attributes['data-description'] = reportDescription;
+  }
   return (
     <div
       data-shared-item
       data-render-complete={isReady}
       className={classNames(className, 'lnsVisualizationContainer')}
-      data-title={reportTitle}
+      {...attributes}
       {...rest}
     >
       {children}
diff --git a/x-pack/plugins/lens/public/xy_visualization/__snapshots__/to_expression.test.ts.snap b/x-pack/plugins/lens/public/xy_visualization/__snapshots__/to_expression.test.ts.snap
index dd8c6377cacdc..b35f915336eee 100644
--- a/x-pack/plugins/lens/public/xy_visualization/__snapshots__/to_expression.test.ts.snap
+++ b/x-pack/plugins/lens/public/xy_visualization/__snapshots__/to_expression.test.ts.snap
@@ -27,6 +27,9 @@ Object {
             "type": "expression",
           },
         ],
+        "description": Array [
+          "",
+        ],
         "fittingFunction": Array [
           "Carry",
         ],
@@ -139,6 +142,9 @@ Object {
             "type": "expression",
           },
         ],
+        "title": Array [
+          "",
+        ],
         "xTitle": Array [
           "",
         ],
diff --git a/x-pack/plugins/lens/public/xy_visualization/expression.tsx b/x-pack/plugins/lens/public/xy_visualization/expression.tsx
index 64e0a3670a9aa..f36525a9a0b14 100644
--- a/x-pack/plugins/lens/public/xy_visualization/expression.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/expression.tsx
@@ -85,6 +85,14 @@ export const xyChart: ExpressionFunctionDefinition<
     defaultMessage: 'An X/Y chart',
   }),
   args: {
+    title: {
+      types: ['string'],
+      help: 'The chart title.',
+    },
+    description: {
+      types: ['string'],
+      help: '',
+    },
     xTitle: {
       types: ['string'],
       help: i18n.translate('xpack.lens.xyChart.xTitle.help', {
@@ -215,7 +223,12 @@ export function XYChartReportable(props: XYChartRenderProps) {
   }, [setState]);
 
   return (
-    <VisualizationContainer className="lnsXyExpression__container" isReady={state.isReady}>
+    <VisualizationContainer
+      className="lnsXyExpression__container"
+      isReady={state.isReady}
+      reportTitle={props.args.title}
+      reportDescription={props.args.description}
+    >
       <MemoizedChart {...props} />
     </VisualizationContainer>
   );
diff --git a/x-pack/plugins/lens/public/xy_visualization/to_expression.ts b/x-pack/plugins/lens/public/xy_visualization/to_expression.ts
index df8d571a1fdf8..5a3c8faa2d476 100644
--- a/x-pack/plugins/lens/public/xy_visualization/to_expression.ts
+++ b/x-pack/plugins/lens/public/xy_visualization/to_expression.ts
@@ -15,7 +15,8 @@ interface ValidLayer extends LayerConfig {
 
 export const toExpression = (
   state: State,
-  datasourceLayers: Record<string, DatasourcePublicAPI>
+  datasourceLayers: Record<string, DatasourcePublicAPI>,
+  attributes: Partial<{ title: string; description: string }> = {}
 ): Ast | null => {
   if (!state || !state.layers.length) {
     return null;
@@ -31,7 +32,7 @@ export const toExpression = (
     });
   });
 
-  return buildExpression(state, metadata, datasourceLayers);
+  return buildExpression(state, metadata, datasourceLayers, attributes);
 };
 
 export function toPreviewExpression(
@@ -81,7 +82,8 @@ export function getScaleType(metadata: OperationMetadata | null, defaultScale: S
 export const buildExpression = (
   state: State,
   metadata: Record<string, Record<string, OperationMetadata | null>>,
-  datasourceLayers?: Record<string, DatasourcePublicAPI>
+  datasourceLayers?: Record<string, DatasourcePublicAPI>,
+  attributes: Partial<{ title: string; description: string }> = {}
 ): Ast | null => {
   const validLayers = state.layers.filter((layer): layer is ValidLayer =>
     Boolean(layer.accessors.length)
@@ -97,6 +99,8 @@ export const buildExpression = (
         type: 'function',
         function: 'lens_xy_chart',
         arguments: {
+          title: [attributes?.title || ''],
+          description: [attributes?.description || ''],
           xTitle: [state.xTitle || ''],
           yTitle: [state.yTitle || ''],
           yRightTitle: [state.yRightTitle || ''],
diff --git a/x-pack/plugins/lens/public/xy_visualization/types.ts b/x-pack/plugins/lens/public/xy_visualization/types.ts
index 185fa20f169ee..cac982f852c7a 100644
--- a/x-pack/plugins/lens/public/xy_visualization/types.ts
+++ b/x-pack/plugins/lens/public/xy_visualization/types.ts
@@ -383,6 +383,8 @@ export type LayerArgs = LayerConfig & {
 
 // Arguments to XY chart expression, with computed properties
 export interface XYArgs {
+  title?: string;
+  description?: string;
   xTitle: string;
   yTitle: string;
   yRightTitle: string;