From af49c78ffddfb967cf1c16fc9fd3f3d254687d8f Mon Sep 17 00:00:00 2001 From: sulemanof Date: Mon, 23 Nov 2020 14:35:53 +0300 Subject: [PATCH] Lazy load visualizations --- .../components/vis_types/gauge/vis.js | 6 ++++- .../application/components/vis_types/index.ts | 22 ++++++++++--------- .../components/vis_types/markdown/vis.js | 6 ++++- .../components/vis_types/metric/vis.js | 6 ++++- .../components/vis_types/table/vis.js | 6 ++++- .../components/vis_types/timeseries/vis.js | 6 ++++- .../components/vis_types/top_n/vis.js | 6 ++++- 7 files changed, 42 insertions(+), 16 deletions(-) diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_types/gauge/vis.js b/src/plugins/vis_type_timeseries/public/application/components/vis_types/gauge/vis.js index 325e9c8372736..5a6d5f39d0c97 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/vis_types/gauge/vis.js +++ b/src/plugins/vis_type_timeseries/public/application/components/vis_types/gauge/vis.js @@ -101,4 +101,8 @@ GaugeVisualization.propTypes = { getConfig: PropTypes.func, }; -export const gauge = visWithSplits(GaugeVisualization); +const gauge = visWithSplits(GaugeVisualization); + +// default export required for React.Lazy +// eslint-disable-next-line import/no-default-export +export { gauge as default }; diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_types/index.ts b/src/plugins/vis_type_timeseries/public/application/components/vis_types/index.ts index 158350b84e25f..56e58b4da3458 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/vis_types/index.ts +++ b/src/plugins/vis_type_timeseries/public/application/components/vis_types/index.ts @@ -17,29 +17,31 @@ * under the License. */ -import React from 'react'; +import React, { lazy } from 'react'; import { IUiSettingsClient } from 'src/core/public'; import { PersistedState } from 'src/plugins/visualizations/public'; +import { TimeseriesVisParams } from '../../../metrics_fn'; +import { TimeseriesVisData } from '../../../../common/types'; + /** - * TSVB visualizations are not typed yet. + * Lazy load each visualization type, since the only one is presented on the screen at the same time. + * Disable typescript errors since the components are not typed yet. */ // @ts-expect-error -import { TimeseriesVisualization as timeseries } from './timeseries/vis'; +const timeseries = lazy(() => import('./timeseries/vis')); // @ts-expect-error -import { metric } from './metric/vis'; +const metric = lazy(() => import('./metric/vis')); // @ts-expect-error -import { TopNVisualization as topN } from './top_n/vis'; +const topN = lazy(() => import('./top_n/vis')); // @ts-expect-error -import { TableVis as table } from './table/vis'; +const table = lazy(() => import('./table/vis')); // @ts-expect-error -import { gauge } from './gauge/vis'; +const gauge = lazy(() => import('./gauge/vis')); // @ts-expect-error -import { MarkdownVisualization as markdown } from './markdown/vis'; -import { TimeseriesVisParams } from '../../../metrics_fn'; -import { TimeseriesVisData } from '../../../../common/types'; +const markdown = lazy(() => import('./markdown/vis')); export const TimeseriesVisTypes: Record> = { timeseries, diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_types/markdown/vis.js b/src/plugins/vis_type_timeseries/public/application/components/vis_types/markdown/vis.js index a4e7738e92318..e68b9e5ed8467 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/vis_types/markdown/vis.js +++ b/src/plugins/vis_type_timeseries/public/application/components/vis_types/markdown/vis.js @@ -30,7 +30,7 @@ import { isBackgroundInverted } from '../../../lib/set_is_reversed'; const getMarkdownId = (id) => `markdown-${id}`; -export function MarkdownVisualization(props) { +function MarkdownVisualization(props) { const { backgroundColor, model, visData, dateFormat } = props; const series = get(visData, `${model.id}.series`, []); const variables = convertSeriesToVars(series, model, dateFormat, props.getConfig); @@ -106,3 +106,7 @@ MarkdownVisualization.propTypes = { dateFormat: PropTypes.string, getConfig: PropTypes.func, }; + +// default export required for React.Lazy +// eslint-disable-next-line import/no-default-export +export { MarkdownVisualization as default }; diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_types/metric/vis.js b/src/plugins/vis_type_timeseries/public/application/components/vis_types/metric/vis.js index 5fe7afe47df9b..7069a32fa2b50 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/vis_types/metric/vis.js +++ b/src/plugins/vis_type_timeseries/public/application/components/vis_types/metric/vis.js @@ -95,4 +95,8 @@ MetricVisualization.propTypes = { getConfig: PropTypes.func, }; -export const metric = visWithSplits(MetricVisualization); +const metric = visWithSplits(MetricVisualization); + +// default export required for React.Lazy +// eslint-disable-next-line import/no-default-export +export { metric as default }; diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_types/table/vis.js b/src/plugins/vis_type_timeseries/public/application/components/vis_types/table/vis.js index 92109e1a37426..a31be694cd172 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/vis_types/table/vis.js +++ b/src/plugins/vis_type_timeseries/public/application/components/vis_types/table/vis.js @@ -46,7 +46,7 @@ function getColor(rules, colorKey, value) { return color; } -export class TableVis extends Component { +class TableVis extends Component { constructor(props) { super(props); @@ -260,3 +260,7 @@ TableVis.propTypes = { pageNumber: PropTypes.number, getConfig: PropTypes.func, }; + +// default export required for React.Lazy +// eslint-disable-next-line import/no-default-export +export { TableVis as default }; diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/vis.js b/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/vis.js index e1eafbcffe957..b752699fa1548 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/vis.js +++ b/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/vis.js @@ -34,7 +34,7 @@ import { createXaxisFormatter } from '../../lib/create_xaxis_formatter'; import { STACKED_OPTIONS } from '../../../visualizations/constants'; import { getCoreStart } from '../../../../services'; -export class TimeseriesVisualization extends Component { +class TimeseriesVisualization extends Component { static propTypes = { model: PropTypes.object, onBrush: PropTypes.func, @@ -246,3 +246,7 @@ export class TimeseriesVisualization extends Component { ); } } + +// default export required for React.Lazy +// eslint-disable-next-line import/no-default-export +export { TimeseriesVisualization as default }; diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_types/top_n/vis.js b/src/plugins/vis_type_timeseries/public/application/components/vis_types/top_n/vis.js index 1c2ebb8264ef3..92311b3f33afb 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/vis_types/top_n/vis.js +++ b/src/plugins/vis_type_timeseries/public/application/components/vis_types/top_n/vis.js @@ -48,7 +48,7 @@ function sortSeries(visData, model) { }, []); } -export function TopNVisualization(props) { +function TopNVisualization(props) { const { backgroundColor, model, visData } = props; const series = sortSeries(visData, model).map((item) => { @@ -111,3 +111,7 @@ TopNVisualization.propTypes = { visData: PropTypes.object, getConfig: PropTypes.func, }; + +// default export required for React.Lazy +// eslint-disable-next-line import/no-default-export +export { TopNVisualization as default };