[Visualize] New heatmap implementation with elastic-charts

.github/CODEOWNERS

@@ -34,10 +34,12 @@
 /src/plugins/vis_types/vislib/ @elastic/kibana-vis-editors
 /src/plugins/vis_types/xy/ @elastic/kibana-vis-editors
 /src/plugins/vis_types/pie/ @elastic/kibana-vis-editors
+/src/plugins/vis_types/heatmap/ @elastic/kibana-vis-editors
 /src/plugins/visualize/ @elastic/kibana-vis-editors
 /src/plugins/visualizations/ @elastic/kibana-vis-editors
 /src/plugins/chart_expressions/expression_tagcloud/ @elastic/kibana-vis-editors
 /src/plugins/chart_expressions/expression_metric/ @elastic/kibana-vis-editors
+/src/plugins/chart_expressions/expression_heatmap/ @elastic/kibana-vis-editors
 /src/plugins/url_forwarding/ @elastic/kibana-vis-editors
 /packages/kbn-tinymath/ @elastic/kibana-vis-editors
 /x-pack/test/functional/apps/lens @elastic/kibana-vis-editors

.i18nrc.json

@@ -28,6 +28,7 @@
     "expressionRepeatImage": "src/plugins/expression_repeat_image",
     "expressionRevealImage": "src/plugins/expression_reveal_image",
     "expressionShape": "src/plugins/expression_shape",
+    "expressionHeatmap": "src/plugins/chart_expressions/expression_heatmap",
     "expressionTagcloud": "src/plugins/chart_expressions/expression_tagcloud",
     "expressionMetricVis": "src/plugins/chart_expressions/expression_metric",
     "inputControl": "src/plugins/input_control_vis",
@@ -69,6 +70,7 @@
     "visTypeVislib": "src/plugins/vis_types/vislib",
     "visTypeXy": "src/plugins/vis_types/xy",
     "visTypePie": "src/plugins/vis_types/pie",
+    "visTypeHeatmap": "src/plugins/vis_types/heatmap",
     "visualizations": "src/plugins/visualizations",
     "visualize": "src/plugins/visualize",
     "apmOss": "src/plugins/apm_oss",

docs/developer/plugin-list.asciidoc

@@ -94,6 +94,10 @@ This API doesn't support angular, for registering angular dev tools, bootstrap a
 |Expression Error plugin adds an error renderer to the expression plugin. The renderer will display the error image.
 
 
+|{kib-repo}blob/{branch}/src/plugins/chart_expressions/expression_heatmap[expressionHeatmap]
+|WARNING: Missing README.
+
+
 |{kib-repo}blob/{branch}/src/plugins/expression_image/README.md[expressionImage]
 |Expression Image plugin adds an image renderer to the expression plugin. The renderer will display the given image.
 
@@ -274,6 +278,10 @@ It acts as a container for a particular visualization and options tabs. Contains
 The plugin exposes the static DefaultEditorController class to consume.
 
 
+|{kib-repo}blob/{branch}/src/plugins/vis_types/heatmap[visTypeHeatmap]
+|WARNING: Missing README.
+
+
 |{kib-repo}blob/{branch}/src/plugins/vis_type_markdown/README.md[visTypeMarkdown]
 |The markdown visualization that can be used to place text panels on dashboards.
 

docs/management/advanced-options.asciidoc

@@ -521,7 +521,10 @@ Enables the legacy time axis for charts in Lens, Discover, Visualize and TSVB
 The maximum number of buckets a datasource can return. High numbers can have a negative impact on your browser rendering performance.
 
 [[visualization-visualize-pieChartslibrary]]`visualization:visualize:legacyPieChartsLibrary`::
-The visualize editor uses new pie charts with improved performance, color palettes, label positioning, and more. Enable this option if you prefer to use to the legacy charts library.
+The visualize editor uses new pie charts with improved performance, color palettes, label positioning, and more. Enable this option if you prefer to use the legacy charts library.
+
+[[visualization-visualize-heatmapChartslibrary]]`visualization:visualize:legacyHeatmapChartsLibrary`::
+Disable this option if you prefer to use the new heatmap charts with improved performance, legend settings, and more..
 
 [[visualize-enablelabs]]`visualize:enableLabs`::
 Enables users to create, view, and edit experimental visualizations. When disabled,

packages/kbn-optimizer/limits.yml

@@ -96,6 +96,7 @@ pageLoadAssetSize:
   securitySolution: 273763
   customIntegrations: 28810
   expressionMetricVis: 23121
+  expressionHeatmap: 27505
   visTypeMetric: 23332
   bfetch: 22837
   kibanaUtils: 79713
@@ -115,3 +116,4 @@ pageLoadAssetSize:
   dataViewFieldEditor: 20000
   dataViewManagement: 5000
   reporting: 57003
+  visTypeHeatmap: 25340

src/plugins/chart_expressions/expression_heatmap/common/constants.ts

@@ -0,0 +1,12 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export const EXPRESSION_HEATMAP_NAME = 'heatmap';
+export const EXPRESSION_HEATMAP_LEGEND_NAME = 'heatmap_legend';
+export const EXPRESSION_HEATMAP_GRID_NAME = 'heatmap_grid';
+export const HEATMAP_FUNCTION_RENDERER_NAME = 'heatmap_renderer';

src/plugins/chart_expressions/expression_heatmap/common/expression_functions/heatmap_function.test.ts

@@ -0,0 +1,77 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { heatmapFunction } from './heatmap_function';
+import type { HeatmapArguments } from '../../common';
+import { functionWrapper } from '../../../../expressions/common/expression_functions/specs/tests/utils';
+import { Datatable } from '../../../../expressions/common/expression_types/specs';
+import { EXPRESSION_HEATMAP_GRID_NAME, EXPRESSION_HEATMAP_LEGEND_NAME } from '../constants';
+
+describe('interpreter/functions#heatmap', () => {
+  const fn = functionWrapper(heatmapFunction());
+  const context: Datatable = {
+    type: 'datatable',
+    rows: [{ 'col-0-1': 0 }],
+    columns: [
+      { id: 'col-0-1', name: 'Count', meta: { type: 'number' } },
+      { id: 'col-1-2', name: 'Dest', meta: { type: 'string' } },
+    ],
+  };
+  const args: HeatmapArguments = {
+    percentageMode: false,
+    legend: {
+      isVisible: true,
+      position: 'top',
+      type: EXPRESSION_HEATMAP_LEGEND_NAME,
+    },
+    gridConfig: {
+      isCellLabelVisible: true,
+      isYAxisLabelVisible: true,
+      isXAxisLabelVisible: true,
+      type: EXPRESSION_HEATMAP_GRID_NAME,
+    },
+    palette: {
+      type: 'palette',
+      name: '',
+      params: {
+        colors: ['rgb(0, 0, 0, 0)', 'rgb(112, 38, 231)'],
+        stops: [0, 10000],
+        gradient: false,
+        rangeMin: 0,
+        rangeMax: 150,
+        range: 'number',
+      },
+    },
+    showTooltip: true,
+    highlightInHover: false,
+    xAccessor: 'col-1-2',
+    valueAccessor: 'col-0-1',
+  };
+
+  it('returns an object with the correct structure', () => {
+    const actual = fn(context, args, undefined);
+
+    expect(actual).toMatchSnapshot();
+  });
+
+  it('logs correct datatable to inspector', async () => {
+    let loggedTable: Datatable;
+    const handlers = {
+      inspectorAdapters: {
+        tables: {
+          logDatatable: (name: string, datatable: Datatable) => {
+            loggedTable = datatable;
+          },
+        },
+      },
+    };
+    await fn(context, args, handlers as any);
+
+    expect(loggedTable!).toMatchSnapshot();
+  });
+});