Browse Source

Use Plotly.react instead of Plotly.newPlot

platinops 1 year ago
parent
commit
56d5a3821a
1 changed files with 5 additions and 8 deletions
  1. 5 8
      nicegui/elements/plotly.vue

+ 5 - 8
nicegui/elements/plotly.vue

@@ -7,6 +7,7 @@ export default {
   async mounted() {
     await this.$nextTick();
     this.update();
+    this.set_handlers();
   },
   updated() {
     this.update();
@@ -18,13 +19,9 @@ export default {
       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);
-        this.set_handlers();
-      }
+      // Plotly.react can be used to create new plot and to update it efficiently
+      // https://plotly.com/javascript/plotlyjs-function-reference/#plotlyreact
+      Plotly.react(this.$el.id, this.options.data, this.options.layout, options.config);
 
       // store last options
       this.last_options = options;
@@ -92,4 +89,4 @@ export default {
 .js-plotly-plot .plotly .modebar-btn svg {
   position: static;
 }
-</style>
+</style>