David-Desmaisons / vue-plotly

📈 vue wrapper for plotly.js
https://david-desmaisons.github.io/vue-plotly/
MIT License
255 stars 74 forks source link

TypeError : fullLayout is undefined #23

Open benjaminh opened 4 years ago

benjaminh commented 4 years ago

Hello,

I'm using vue-plotly for simple plots but I get a recurrent error in console :

Uncaught (in promise) TypeError: fullLayout is undefined
    emitAfterPlot vue-plotly.umd.js:140916
    plot vue-plotly.umd.js:140908

I've managed to reduce my component to a minimal example to help you reproduce the error and hopefully guide me through the resolution of this issue.

Here is my component MyPlot.vue:

<template>
      <Plotly 
          v-if='!loading'
          :data.sync="data"
          :layout="layout"
      ></Plotly>
      <div 
          v-else
          class="text-center"
      >
        <v-progress-circular
          indeterminate
          color="primary"
        ></v-progress-circular>
      </div>
</template>

<script>
import { Plotly } from 'vue-plotly'

export default {
  components: {
    Plotly
  },
  data () {
      return {
        data: [],
        layout:{
            title: "My graph",
            showlegend: true,
        },
        loading:false
      }
  },
  mounted () {
    this.loading = true;
    this.loadData().then(data => {
      this.data = Object.seal(data);
      this.loading = false;
    });
  },
  methods: {
      loadData () {
        return new Promise((resolve) => {
          let data = [{
            x: [1,2,3,4],
            y: [10,15,13,17],
            type:"scatter"
          }];
          resolve(data);
        });
      }
  }
}
</script>

The mounting part may be overkill but this is relevant to my use case as I call my Vuex store and do some processing before plotting data. It looks like the problem comes from the combination of the v-if/v-else template, and the way I load my data using promise. Indeed, removing one part or the other seems to work. What vue-plotly is complaining about ? Sorry if this is a rookie error, I'm still learning vuejs.

Any ideas to solve/investigate this error ?

WenyinWei commented 3 years ago

vue_plotly_conflicts_with_electron-builder

Seems that I also have similar trouble, when I use vue-cli-plugin-electron-builder to help me build an app. vue-plotly works well under npm run electron:server mode, however, it turns out that pages containing vue-plotly are all blank as a result of application create by npm run electron:build. I guess there is some conflict between vue-plotly and chunk-vendors.