Merge pull request #1873 from deecay/fix-custom-js

Custom JS code chart improvements
getredash · Sep 13, 2017 · 0a311bf · 0a311bf
2 parents 5069edb + 1a8078a
commit 0a311bf
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 9 deletions.
diff --git a/client/app/assets/css/superflat_redash.css b/client/app/assets/css/superflat_redash.css
@@ -1781,6 +1781,9 @@ fieldset[disabled] .form-control {
 textarea.form-control {
   height: auto;
 }
+textarea.v-resizable {
+  resize: vertical;
+}
 input[type="search"] {
   -webkit-appearance: none;
 }

diff --git a/client/app/visualizations/chart/chart-editor.html b/client/app/visualizations/chart/chart-editor.html
@@ -134,17 +134,23 @@
 
   <div class="form-group" ng-if="options.globalSeriesType == 'custom'">
     <label class="control-label">Custom code</label>
-    <textarea ng-model="options.customCode" class="form-control" rows="10">
+    <textarea ng-model="options.customCode" class="form-control v-resizable" rows="10">
     </textarea>
   </div>
 
   <div class="checkbox" ng-if="options.globalSeriesType == 'custom'">
-      <label>
-        <input type="checkbox" ng-model="options.enableConsoleLogs">
-        <i class="input-helper"></i> Show errors in the console
-      </label>
-    </div>
+    <label>
+      <input type="checkbox" ng-model="options.enableConsoleLogs">
+      <i class="input-helper"></i> Show errors in the console
+    </label>
+  </div>
 
+  <div class="checkbox" ng-if="options.globalSeriesType == 'custom'">
+    <label>
+      <input type="checkbox" ng-model="options.autoRedraw">
+      <i class="input-helper"></i> Auto update graph
+    </label>
+  </div>
 
   <div ng-show="currentTab == 'xAxis'">
     <div class="form-group">

diff --git a/client/app/visualizations/chart/index.js b/client/app/visualizations/chart/index.js
@@ -87,10 +87,12 @@ function ChartEditor(ColorPalette, clientConfig) {
 
       scope.showSizeColumnPicker = () => some(scope.options.seriesOptions, options => options.type === 'bubble');
 
-      scope.options.customCode = `// Available variables are x, ys, element, and Plotly
+      if (scope.options.customCode === undefined) {
+        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();

diff --git a/client/app/visualizations/chart/plotly.js b/client/app/visualizations/chart/plotly.js
@@ -504,6 +504,9 @@ const CustomPlotlyChart = (clientConfig) => {
         return;
       }
       const refresh = () => {
+        // Clear existing data with blank data for succeeding codeCall adds data to existing plot.
+        Plotly.newPlot(element[0].children[0]);
+
         // eslint-disable-next-line no-eval
         const codeCall = eval(`codeCall = function(x, ys, element, Plotly){ ${scope.options.customCode} }`);
         codeCall(scope.x, scope.ys, element[0].children[0], Plotly);
@@ -519,9 +522,11 @@ const CustomPlotlyChart = (clientConfig) => {
           });
         });
       };
-      scope.$watch('options.customCode', () => {
+      scope.$watch('[options.customCode, options.autoRedraw]', () => {
         try {
-          refresh();
+          if (scope.options.autoRedraw) {
+            refresh();
+          }
         } catch (err) {
           if (scope.options.enableConsoleLogs) {
             // eslint-disable-next-line no-console