-
Notifications
You must be signed in to change notification settings - Fork 4.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Custom JS code chart improvements #1873
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks! Please see my comments.
@@ -514,9 +517,11 @@ const CustomPlotlyChart = (clientConfig) => { | |||
}); | |||
}); | |||
}; | |||
scope.$watch('options.customCode', () => { | |||
scope.$watch('[options.customCode, options.autoRedraw]', () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why do we need to watch autoRedraw
? If it's disabled, on next refresh it won't redraw. If it's enabled, still we have nothing to do.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I thought so too. But I realized that I would want the graph to redraw 'when I ticked the auto-redraw'. Without this watch, only the next change in code will update the graph.
I think, writing a lengthy code without autoRadraw, then placing a tick on autoRedraw, should trigger the graph redraw immediately.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Then why not just watch option.autoRedraw
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
When I am editing a small script, I would like to refresh graph as I type. This is done by watching customCode
.
When I am editing a big script, I would like to turn off the refresh-as-I-type, but when I click on the auto redraw checkbox, I want so see the graph refreshed immediately. This last part is done by watching autoRedraw
.
@@ -499,6 +499,9 @@ const CustomPlotlyChart = (clientConfig) => { | |||
return; | |||
} | |||
const refresh = () => { | |||
// Clear existing data | |||
element[0].children[0].calcdata = []; | |||
element[0].children[0].data = []; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Where is this used?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This piece is related to
- Fix: Any update of the graph in editor causes appended trace.
and used by
const codeCall = eval(`codeCall = function(x, ys, element, Plotly){ ${scope.options.customCode} }`);
codeCall(scope.x, scope.ys, element[0].children[0], Plotly);
The code above appends a trace to an already existing plot. So without clearing data
from the already drawn plotly graph, every update in code editor will cause the trace in the graph to multiply. One-trace bar graph becomes two-trace bar graph, three-trace bar graph, and so on, each time you type in code editor.
Using Plotly.newPlot() might be another option to avoid appending, but haven't tried it yet.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please see 1a8078a .
This less hackish way fixes the problem too.
Thanks! |
This PR introduces some fixes and changes to custom code chart visualization.
Fix: Currently, custom js code textarea does not load the saved code properly. This fixes the issue by setting the textarea contents only if the content is undefined.
Fix: Any update of the graph in editor causes appended trace. Trace gets added because the plotly graph is not initialized. Now data and calcdata will be initialized by setting them to [].
Change: Make textarea vertically resizable for readability and editability of code.
Change: Add toggle checkbox for auto-update graph. This is handy when you are dealing with big dataset which takes time to refresh.
This fixes #1628.