Use plotly-dist instead of plotly (#5)

opendistro-for-elasticsearch · Dec 2, 2020 · 34dc9ff · 34dc9ff
1 parent 4ac98c9
commit 34dc9ff
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 3,069 deletions.
diff --git a/gantt-chart/package.json b/gantt-chart/package.json
@@ -14,12 +14,12 @@
     "test:cypress": "cypress run"
   },
   "dependencies": {
-    "plotly.js": "^1.54.1",
+    "plotly.js-dist": "^1.57.1",
     "react-plotly.js": "^2.4.0"
   },
   "devDependencies": {
-    "cypress": "^5.0.0",
     "@types/react-plotly.js": "^2.2.4",
+    "cypress": "^5.0.0",
     "eslint": "^6.8.0"
   },
   "engines": {

diff --git a/gantt-chart/public/components/gantt_chart.tsx b/gantt-chart/public/components/gantt_chart.tsx
@@ -15,9 +15,9 @@
 
 import _ from 'lodash';
 import moment from 'moment';
-import { PlotData } from 'plotly.js';
 import React, { Fragment, useEffect } from 'react';
-import Plot from 'react-plotly.js';
+import plotComponentFactory from "react-plotly.js/factory";
+import Plotly, { PlotData } from "plotly.js-dist";
 import { EuiEmptyPrompt, EuiText } from '@elastic/eui';
 import { UiSettingsClient } from 'src/core/public/ui_settings';
 import { ExprVis } from 'src/plugins/visualizations/public';
@@ -35,6 +35,8 @@ export function GanttChart({
   visData: GanttSuccessResponse;
   visParams: GanttParams;
 }) {
+  const PlotComponent = plotComponentFactory(Plotly);
+
   const getGanttData = (): { data: PlotData[], tickvals: number[], ticktext: string[], yLabels: string[], yTexts: string[] } => {
     const source: any[] = visData.source;
     const data: PlotData[] = [];
@@ -134,7 +136,7 @@ export function GanttChart({
   return (
     <>
       {visParams.labelField && visParams.startTimeField && visParams.durationField && ganttData.data.length > 0 ? (
-        <Plot
+        <PlotComponent
           divId="plotly-gantt-chart"
           data={ganttData.data}
           style={{ width: '100%', height: '100%' }}