Use plotly.js-dist to reduce artifact size (#340)

opendistro-for-elasticsearch · Dec 4, 2020 · 31b59c7 · 31b59c7
1 parent 341327a
commit 31b59c7
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 3,010 deletions.
diff --git a/package.json b/package.json
@@ -46,7 +46,7 @@
     "brace": "0.11.1",
     "formik": "^2.2.5",
     "lodash": "^4.17.20",
-    "plotly.js": "^1.55.2",
+    "plotly.js-dist": "^1.57.1",
     "react-plotly.js": "^2.4.0",
     "react-redux": "^7.2.0",
     "reselect": "^4.0.0"

diff --git a/public/pages/AnomalyCharts/containers/AnomalyHeatmapChart.tsx b/public/pages/AnomalyCharts/containers/AnomalyHeatmapChart.tsx
@@ -16,8 +16,8 @@
 import React, { useState } from 'react';
 
 import moment from 'moment';
-import { PlotData } from 'plotly.js';
-import Plot from 'react-plotly.js';
+import Plotly, { PlotData } from 'plotly.js-dist';
+import plotComponentFactory from 'react-plotly.js/factory';
 import { get, isEmpty } from 'lodash';
 import {
   EuiFlexItem,
@@ -89,6 +89,8 @@ export const AnomalyHeatmapChart = React.memo(
       ],
     };
 
+    const PlotComponent = plotComponentFactory(Plotly);
+
     const getViewEntityOptions = (inputHeatmapData: PlotData[]) => {
       let individualEntities = [];
       if (!isEmpty(inputHeatmapData)) {
@@ -439,7 +441,7 @@ export const AnomalyHeatmapChart = React.memo(
                   </EuiFlexItem>
                 </EuiFlexGroup>
               ) : (
-                <Plot
+                <PlotComponent
                   data={heatmapData}
                   style={{
                     position: 'relative',