Vislib visualization renderer (#80744)

src/plugins/vis_type_tagcloud/public/components/tag_cloud_chart.tsx

@@ -45,7 +45,9 @@ export const TagCloudChart = ({
   const visController = useRef<any>(null);
 
   useEffect(() => {
-    visController.current = new TagCloudVisualization(chartDiv.current, colors, fireEvent);
+    if (chartDiv.current) {
+      visController.current = new TagCloudVisualization(chartDiv.current, colors, fireEvent);
+    }
     return () => {
       visController.current.destroy();
       visController.current = null;

src/plugins/vis_type_timelion/public/timelion_vis_renderer.tsx

@@ -42,12 +42,6 @@ export const getTimelionVisRenderer: (
     const [seriesList] = visData.sheet;
     const showNoResult = !seriesList || !seriesList.list.length;
 
-    if (showNoResult) {
-      // send the render complete event when there is no data to show
-      // to notify that a chart is updated
-      handlers.done();
-    }
-
     render(
       <VisualizationContainer handlers={handlers} showNoResult={showNoResult}>
         <KibanaContextProvider services={{ ...deps }}>

src/plugins/vis_type_vislib/public/area.ts

@@ -37,22 +37,20 @@ import {
   getConfigCollections,
 } from './utils/collections';
 import { getAreaOptionTabs, countLabel } from './utils/common_config';
-import { createVislibVisController } from './vis_controller';
-import { VisTypeVislibDependencies } from './plugin';
 import { Rotates } from '../../charts/public';
-import { VIS_EVENT_TO_TRIGGER } from '../../../plugins/visualizations/public';
+import { BaseVisTypeOptions, VIS_EVENT_TO_TRIGGER } from '../../../plugins/visualizations/public';
+import { toExpressionAst } from './to_ast';
+import { BasicVislibParams } from './types';
 
-export const createAreaVisTypeDefinition = (deps: VisTypeVislibDependencies) => ({
+export const areaVisTypeDefinition: BaseVisTypeOptions<BasicVislibParams> = {
   name: 'area',
   title: i18n.translate('visTypeVislib.area.areaTitle', { defaultMessage: 'Area' }),
   icon: 'visArea',
   description: i18n.translate('visTypeVislib.area.areaDescription', {
     defaultMessage: 'Emphasize the quantity beneath a line chart',
   }),
-  visualization: createVislibVisController(deps),
-  getSupportedTriggers: () => {
-    return [VIS_EVENT_TO_TRIGGER.filter, VIS_EVENT_TO_TRIGGER.brush];
-  },
+  getSupportedTriggers: () => [VIS_EVENT_TO_TRIGGER.filter, VIS_EVENT_TO_TRIGGER.brush],
+  toExpressionAst,
   visConfig: {
     defaults: {
       type: 'area',
@@ -131,9 +129,6 @@ export const createAreaVisTypeDefinition = (deps: VisTypeVislibDependencies) =>
       labels: {},
     },
   },
-  events: {
-    brush: { disabled: false },
-  },
   editorConfig: {
     collections: getConfigCollections(),
     optionTabs: getAreaOptionTabs(),
@@ -190,4 +185,4 @@ export const createAreaVisTypeDefinition = (deps: VisTypeVislibDependencies) =>
       },
     ]),
   },
-});
+};

src/plugins/vis_type_vislib/public/components/options/gauge/index.tsx

@@ -60,4 +60,6 @@ function GaugeOptions(props: VisOptionsProps<GaugeVisParams>) {
   );
 }
 
-export { GaugeOptions };
+// default export required for React.Lazy
+// eslint-disable-next-line import/no-default-export
+export { GaugeOptions as default };

src/plugins/vis_type_vislib/public/components/options/heatmap/index.tsx

@@ -185,4 +185,6 @@ function HeatmapOptions(props: VisOptionsProps<HeatmapVisParams>) {
   );
 }
 
-export { HeatmapOptions };
+// default export required for React.Lazy
+// eslint-disable-next-line import/no-default-export
+export { HeatmapOptions as default };

src/plugins/vis_type_vislib/public/components/options/index.tsx

@@ -0,0 +1,51 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { lazy } from 'react';
+
+import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
+import { ValidationVisOptionsProps } from '../common';
+import { GaugeVisParams } from '../../gauge';
+import { PieVisParams } from '../../pie';
+import { BasicVislibParams } from '../../types';
+import { HeatmapVisParams } from '../../heatmap';
+
+const GaugeOptionsLazy = lazy(() => import('./gauge'));
+const PieOptionsLazy = lazy(() => import('./pie'));
+const PointSeriesOptionsLazy = lazy(() => import('./point_series'));
+const HeatmapOptionsLazy = lazy(() => import('./heatmap'));
+const MetricsAxisOptionsLazy = lazy(() => import('./metrics_axes'));
+
+export const GaugeOptions = (props: VisOptionsProps<GaugeVisParams>) => (
+  <GaugeOptionsLazy {...props} />
+);
+
+export const PieOptions = (props: VisOptionsProps<PieVisParams>) => <PieOptionsLazy {...props} />;
+
+export const PointSeriesOptions = (props: ValidationVisOptionsProps<BasicVislibParams>) => (
+  <PointSeriesOptionsLazy {...props} />
+);
+
+export const HeatmapOptions = (props: VisOptionsProps<HeatmapVisParams>) => (
+  <HeatmapOptionsLazy {...props} />
+);
+
+export const MetricsAxisOptions = (props: ValidationVisOptionsProps<BasicVislibParams>) => (
+  <MetricsAxisOptionsLazy {...props} />
+);

src/plugins/vis_type_vislib/public/components/options/metrics_axes/index.test.tsx

@@ -21,7 +21,7 @@ import React from 'react';
 import { mount, shallow } from 'enzyme';
 
 import { IAggConfig, IAggType } from 'src/plugins/data/public';
-import { MetricsAxisOptions } from './index';
+import MetricsAxisOptions from './index';
 import { BasicVislibParams, SeriesParam, ValueAxis } from '../../../types';
 import { ValidationVisOptionsProps } from '../../common';
 import { Positions } from '../../../utils/collections';

src/plugins/vis_type_vislib/public/components/options/metrics_axes/index.tsx

@@ -325,4 +325,6 @@ function MetricsAxisOptions(props: ValidationVisOptionsProps<BasicVislibParams>)
   ) : null;
 }
 
-export { MetricsAxisOptions };
+// default export required for React.Lazy
+// eslint-disable-next-line import/no-default-export
+export { MetricsAxisOptions as default };

src/plugins/vis_type_vislib/public/components/options/pie.tsx

@@ -99,4 +99,6 @@ function PieOptions(props: VisOptionsProps<PieVisParams>) {
   );
 }
 
-export { PieOptions };
+// default export required for React.Lazy
+// eslint-disable-next-line import/no-default-export
+export { PieOptions as default };

src/plugins/vis_type_vislib/public/components/options/point_series/index.ts

@@ -17,4 +17,6 @@
  * under the License.
  */
 
-export { PointSeriesOptions } from './point_series';
+// default export required for React.Lazy
+// eslint-disable-next-line import/no-default-export
+export { PointSeriesOptions as default } from './point_series';

src/plugins/vis_type_vislib/public/gauge.ts

@@ -24,8 +24,9 @@ import { AggGroupNames } from '../../data/public';
 import { GaugeOptions } from './components/options';
 import { getGaugeCollections, Alignments, GaugeTypes } from './utils/collections';
 import { ColorModes, ColorSchemas, ColorSchemaParams, Labels, Style } from '../../charts/public';
-import { createVislibVisController } from './vis_controller';
-import { VisTypeVislibDependencies } from './plugin';
+import { toExpressionAst } from './to_ast';
+import { BaseVisTypeOptions } from '../../visualizations/public';
+import { BasicVislibParams } from './types';
 
 export interface Gauge extends ColorSchemaParams {
   backStyle: 'Full';
@@ -55,14 +56,15 @@ export interface GaugeVisParams {
   gauge: Gauge;
 }
 
-export const createGaugeVisTypeDefinition = (deps: VisTypeVislibDependencies) => ({
+export const gaugeVisTypeDefinition: BaseVisTypeOptions<BasicVislibParams> = {
   name: 'gauge',
   title: i18n.translate('visTypeVislib.gauge.gaugeTitle', { defaultMessage: 'Gauge' }),
   icon: 'visGauge',
   description: i18n.translate('visTypeVislib.gauge.gaugeDescription', {
     defaultMessage:
       "Gauges indicate the status of a metric. Use it to show how a metric's value relates to reference threshold values.",
   }),
+  toExpressionAst,
   visConfig: {
     defaults: {
       type: 'gauge',
@@ -109,7 +111,6 @@ export const createGaugeVisTypeDefinition = (deps: VisTypeVislibDependencies) =>
       },
     },
   },
-  visualization: createVislibVisController(deps),
   editorConfig: {
     collections: getGaugeCollections(),
     optionsTemplate: GaugeOptions,
@@ -145,4 +146,4 @@ export const createGaugeVisTypeDefinition = (deps: VisTypeVislibDependencies) =>
     ]),
   },
   useCustomNoDataScreen: true,
-});
+};

src/plugins/vis_type_vislib/public/goal.ts

@@ -21,20 +21,21 @@ import { i18n } from '@kbn/i18n';
 
 import { GaugeOptions } from './components/options';
 import { getGaugeCollections, GaugeTypes } from './utils/collections';
-import { createVislibVisController } from './vis_controller';
-import { VisTypeVislibDependencies } from './plugin';
 import { ColorModes, ColorSchemas } from '../../charts/public';
 import { AggGroupNames } from '../../data/public';
 import { Schemas } from '../../vis_default_editor/public';
+import { toExpressionAst } from './to_ast';
+import { BaseVisTypeOptions } from '../../visualizations/public';
+import { BasicVislibParams } from './types';
 
-export const createGoalVisTypeDefinition = (deps: VisTypeVislibDependencies) => ({
+export const goalVisTypeDefinition: BaseVisTypeOptions<BasicVislibParams> = {
   name: 'goal',
   title: i18n.translate('visTypeVislib.goal.goalTitle', { defaultMessage: 'Goal' }),
   icon: 'visGoal',
   description: i18n.translate('visTypeVislib.goal.goalDescription', {
     defaultMessage: 'A goal chart indicates how close you are to your final goal.',
   }),
-  visualization: createVislibVisController(deps),
+  toExpressionAst,
   visConfig: {
     defaults: {
       addTooltip: true,
@@ -110,4 +111,4 @@ export const createGoalVisTypeDefinition = (deps: VisTypeVislibDependencies) =>
     ]),
   },
   useCustomNoDataScreen: true,
-});
+};

src/plugins/vis_type_vislib/public/heatmap.ts

@@ -23,12 +23,11 @@ import { RangeValues, Schemas } from '../../vis_default_editor/public';
 import { AggGroupNames } from '../../data/public';
 import { AxisTypes, getHeatmapCollections, Positions, ScaleTypes } from './utils/collections';
 import { HeatmapOptions } from './components/options';
-import { createVislibVisController } from './vis_controller';
 import { TimeMarker } from './vislib/visualizations/time_marker';
-import { CommonVislibParams, ValueAxis } from './types';
-import { VisTypeVislibDependencies } from './plugin';
+import { BasicVislibParams, CommonVislibParams, ValueAxis } from './types';
 import { ColorSchemas, ColorSchemaParams } from '../../charts/public';
-import { VIS_EVENT_TO_TRIGGER } from '../../../plugins/visualizations/public';
+import { BaseVisTypeOptions, VIS_EVENT_TO_TRIGGER } from '../../../plugins/visualizations/public';
+import { toExpressionAst } from './to_ast';
 
 export interface HeatmapVisParams extends CommonVislibParams, ColorSchemaParams {
   type: 'heatmap';
@@ -42,17 +41,15 @@ export interface HeatmapVisParams extends CommonVislibParams, ColorSchemaParams
   times: TimeMarker[];
 }
 
-export const createHeatmapVisTypeDefinition = (deps: VisTypeVislibDependencies) => ({
+export const heatmapVisTypeDefinition: BaseVisTypeOptions<BasicVislibParams> = {
   name: 'heatmap',
   title: i18n.translate('visTypeVislib.heatmap.heatmapTitle', { defaultMessage: 'Heat Map' }),
   icon: 'heatmap',
   description: i18n.translate('visTypeVislib.heatmap.heatmapDescription', {
     defaultMessage: 'Shade cells within a matrix',
   }),
-  getSupportedTriggers: () => {
-    return [VIS_EVENT_TO_TRIGGER.filter];
-  },
-  visualization: createVislibVisController(deps),
+  getSupportedTriggers: () => [VIS_EVENT_TO_TRIGGER.filter],
+  toExpressionAst,
   visConfig: {
     defaults: {
       type: 'heatmap',
@@ -86,9 +83,6 @@ export const createHeatmapVisTypeDefinition = (deps: VisTypeVislibDependencies)
       ],
     },
   },
-  events: {
-    brush: { disabled: false },
-  },
   editorConfig: {
     collections: getHeatmapCollections(),
     optionsTemplate: HeatmapOptions,
@@ -142,4 +136,4 @@ export const createHeatmapVisTypeDefinition = (deps: VisTypeVislibDependencies)
       },
     ]),
   },
-});
+};