Fixing wrong package version and ES6 compliance

frontend/app/visualizations/chart/index.js

@@ -76,10 +76,10 @@ function ChartEditor(ColorPalette) {
         });
       };
 
-      scope.options.customCode = "// Available variables are x, ys, element, and Plotly.\n";
-      scope.options.customCode += "// Type `console.log(x, ys);` for more info about x and ys.\n";
-      scope.options.customCode += "// To plot your graph call Plotly.plot(element, ...);\n";
-      scope.options.customCode += "// Plotly examples and docs: https://plot.ly/javascript/\n";
+      scope.options.customCode = `// Available variables are x, ys, element, and Plotly
+// Type console.log(x, ys); for more info about x and ys
+// To plot your graph call Plotly.plot(element, ...)
+// Plotly examples and docs: https://plot.ly/javascript/`;
 
       function refreshColumns() {
         scope.columns = scope.queryResult.getColumns();

frontend/app/visualizations/chart/plotly.js

@@ -424,11 +424,10 @@ const PlotlyChart = () => {
       }, true);
     },
   };
-}
+};
 
 const CustomPlotlyChart = () => {
-  let bottomMargin = 50;
-  return {
+  const customChart = {
     restrict: 'E',
     template: '<div></div>',
     scope: {
@@ -438,26 +437,26 @@ const CustomPlotlyChart = () => {
     },
     link(scope, element) {
       const refresh = () => {
-        const codeCall = eval("codeCall = function(x, ys, element, Plotly){" + scope.options.customCode + "}");
+        const codeCall = eval(`codeCall = function(x, ys, element, Plotly){ ${scope.options.customCode} }`);
         codeCall(scope.x, scope.ys, element[0].children[0], Plotly);
       };
       const timeSeriesToPlotlySeries = () => {
         scope.x = [];
         scope.ys = {};
-        each(scope.series, (series, index) => {
+        each(scope.series, (series) => {
           scope.ys[series.name] = [];
-          each(series.data, (point, index) => {
+          each(series.data, (point) => {
             scope.x.push(normalizeValue(point.x));
             scope.ys[series.name].push(normalizeValue(point.y));
           });
         });
-      }
+      };
       scope.$watch('options.customCode', () => {
-        try{
+        try {
           refresh();
-        }catch(err){
-          if(scope.options.enableConsoleLogs){
-            console.log("Error while executing custom graph: ", err);
+        } catch (err) {
+          if (scope.options.enableConsoleLogs) {
+            console.log(`Error while executing custom graph: ${err}`);
           }
         }
       }, true);
@@ -465,9 +464,10 @@ const CustomPlotlyChart = () => {
         timeSeriesToPlotlySeries();
         refresh();
       }, true);
-    }
-  }
-}
+    },
+  };
+  return customChart;
+};
 
 export default function (ngModule) {
   ngModule.constant('ColorPalette', ColorPalette);

frontend/package.json

@@ -53,7 +53,7 @@
     "ng-annotate": "^1.2.1",
     "ng-annotate-loader": "^0.2.0",
     "ng-table": "^2.1.0",
-    "plotly.js": "^1.2.0",
+    "plotly.js": "^1.16.0",
     "raw-loader": "^0.5.1",
     "ui-select": "^0.19.6",
     "underscore": "^1.8.3",