|
@@ -13,6 +13,22 @@ export default {
|
|
|
this.update();
|
|
|
},
|
|
|
methods: {
|
|
|
+ update() {
|
|
|
+ // default responsive to true
|
|
|
+ const options = this.options;
|
|
|
+ if (options.config === undefined) options.config = { responsive: true };
|
|
|
+ if (options.config.responsive === undefined) options.config.responsive = true;
|
|
|
+
|
|
|
+ // re-use plotly instance if config is the same
|
|
|
+ if (JSON.stringify(options.config) == JSON.stringify(this.last_options.config)) {
|
|
|
+ Plotly.react(this.$el.id, this.options.data, this.options.layout);
|
|
|
+ } else {
|
|
|
+ Plotly.newPlot(this.$el.id, this.options.data, this.options.layout, options.config);
|
|
|
+ }
|
|
|
+
|
|
|
+ // store last options
|
|
|
+ this.last_options = options;
|
|
|
+ },
|
|
|
set_handlers() {
|
|
|
// forward events
|
|
|
for (const name of [
|
|
@@ -50,22 +66,6 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
- update() {
|
|
|
- // default responsive to true
|
|
|
- const options = this.options;
|
|
|
- if (options.config === undefined) options.config = { responsive: true };
|
|
|
- if (options.config.responsive === undefined) options.config.responsive = true;
|
|
|
-
|
|
|
- // re-use plotly instance if config is the same
|
|
|
- if (JSON.stringify(options.config) == JSON.stringify(this.last_options.config)) {
|
|
|
- Plotly.react(this.$el.id, this.options.data, this.options.layout);
|
|
|
- } else {
|
|
|
- Plotly.newPlot(this.$el.id, this.options.data, this.options.layout, options.config);
|
|
|
- }
|
|
|
-
|
|
|
- // store last options
|
|
|
- this.last_options = options;
|
|
|
- },
|
|
|
},
|
|
|
data() {
|
|
|
return {
|