statnett / vue-plotly Goto Github PK

Hi all!

I am really stuck on this bug where if the 'x' data passed to vue-plotly contains strings, the graph will crash when removing the data to switch to a heatmap.

I am finding it quite hard to make this reproducible in a jsfiddle because I can't get a CDN working for vue-plotly but if anyone can help I would be immensely appreciative.

Here's my attempt to show the error:

<template>
  <div id="app">
          <div class="input-div">
            <el-checkbox
              style="margin-top:3px;"
              :checked="false"
              @change="plotAsHeatmap($event)"
              border
            >Plot as heatmap</el-checkbox>
          </div>
    <vue-plotly class="chart" ref="plotly" :data="pdata" :layout="layout" :autoResize="true" />
  </div>
</template>
<script>
import VuePlotly from "@statnett/vue-plotly";
import Vue from "vue";
import {Checkbox} from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

Vue.use(Checkbox);
export default {
  name: "HeatmapBug",
  components: { VuePlotly },
  data: function() {
    return {
      pdata: [{ x: [], y: [], type: "scatter" }],
      layout: {
        title: "Loading csv file",
        paper_bgcolor: "rgba(0,0,0,0)",
        plot_bgcolor: "rgba(0,0,0,0)"
      },
    };
  },
  methods: {
    plotAsHeatmap: function(event) {
      if (event) {
        this.pdata = [
          {
            z: [[1, 20, 30], [20, 1, 60], [30, 60, 1]],
            type: "heatmap"
          }
        ];
      } else {
        this.pdata[0].x = ['1','2', '3']
        this.pdata[0].y = [1,2,3]
        this.pdata[0].type = "bar";
      }
    },
  }
};

new Vue({
  render: h => h(HeatmapBug),
}).$mount('#app')

</script>

Is it possible to remove the modebar for a vue plot with this library?

hi,

i would like to implement diffrent locale with vue-plotly.
what is the best way to do this ?

thanks

v-on:click="plotlyEvent"

This is not working. Please advise!

Hello,

when using computed or data that is added dynamically vue-plotly should reinitialize the event handlers so it supports hovering on new plotted points as well.

Best,
Jacob

When I try to display 3d plots (like a scatter3d), I get an error message saying "Webgl is not supported by your browser".

If I use plotly directly, I get a working plot.

Does vue-plotly not support 3d plots?

To use with Nuxt 2.10.0, I had to do the following to avoid "document is not defined":

Make a new file in plugins called vue-plotly.js and put this in it:

import Vue from 'vue';
import vPlotly from '@statnett/vue-plotly';

const VuePlotly = {
  install(Vue) {
    Vue.component('vue-plotly', vPlotly);
  },
};
Vue.use(VuePlotly);
export default VuePlotly;

And add this line to nuxt.config.js (or update plugins)

  plugins: [{ src: '~plugins/vue-plotly', mode: 'client' }],

Then, you can use <vue-plotly/> anywhere without having to import it.

Prior to discovering this solution, I had wrapped my chart component in <client-only/>, and was loading that component like this:

components: {
    // See here: https://stackoverflow.com/a/50458090/107083
    graph: () => import('@/components/Graph.vue'),
  },

This also worked, but I would get a warning. The above way seems "more correct".

I'm curious if anybody wants to comment on pros/cons of either approach, but am mainly putting this here in case others are stuck with this issue.

Hello, thanks for providing this wrapper!

However it would help if you could add an implementation example :)

If I set :autoResize="true", it ends up with having multiple listing of the legend everytime resize event fires.

Before resizing..

After resizing..

Also, autoResize doesn't fire when the plot is first displayed (as resize event hasn't fired yet). So I am calling plot() function when the plot is first displayed. It correctly resizes it, but it has the same side effect of duplicating the legend everytime I call plot().

Hi everyone,

I need mount a graph with data of the a API. I'm using https://github.com/statnett/vue-plotly
My code is:

<vue-plotly :data="data" :layout="layout" :options="options" />
<script>
import axios from "axios";
import VuePlotly from "@statnett/vue-plotly";

export default {
  components: {
    VuePlotly
  },
  data() {
    return {
      fields: [],
      data: [{ x: [], y: [] }],
      layout: {},
      options: {},
      responsive: true
    };
  },
  mounted() {
    var url = "http://www.mocky.io/v2/5d77aa2f3200005b00923f71";

    axios.get(url).then(r => {
      this.fields = r.data.fields;
    });
  }
};
</script>

How make this?

autoResize doesn't appear to be working, and it looks like it might be a two part issue.

In this commit the code went from using the function generated by debounce as the event listener, to accidentally throwing that function away. The result here is that this.react never ends up getting called because the generated debouncing function never got called.

I would suspect that this snippet would fix that aspect of the problem

this.__resizeListener = debounce(() => {
  this.internalLayout.datarevision++
  this.react()
}, 200)

however javascript isn't my strongest language.

The second part of it is that even once this change is made and react gets called, it still doesn't appear to successfully resize the image. I haven't ruled out that just being part of my specific setup though. Thoughts?

in plotly we can use d3 functions like read csv and stuff like that but i could not do it here or and d3 manupulations and functions

I am not sure if I need to do something explicit to remove the old view, but vue-plotly seems to be opening but never closing old webgl context once it's no longer used.

After a while, I start seeing the following error message.

Error: WebGL warning: Exceeded 16 live WebGL contexts for this principal, losing the least recently used one.

Can it be updated to close the old webgl upon destroy hook?

I am trying to create a component that features a map with points on it (from a csv ideally) that will display a Plotly popup containing a graph based on the point selected. I am not sure where to start and would really appreciate if someone can help with a codepen. I have been able to that using Folium and python scripting but the Vue/Vuelayers/Vueplotly combo has got me at a lost.

Hey,

Thanks for putting this together. I am trying to implement this in a Laravel project using Vue and Webpack. I have followed the details in the Readme but when I try to render the component (vue-plotly) it says it's an undefined component - I'm new to VueJS so any help/step-by-step details you'd be able to provide would be fantastic! Cheers! :D

Hi. How can i do for auto sizing plot by containers size ?

I tried to do some animation, but I receive this error:

vue.runtime.esm.js:1888 TypeError: _statnett_vue_plotly__WEBPACK_IMPORTED_MODULE_0___default.a.animate is not a function

this is my function:

    test()
    {
      VuePlotly.animate(
        {
          data: [{y: [Math.random(), Math.random(), Math.random()]}],
          traces: [0],
          layout: {}
        }, {
        transition: {
        duration: 500,
        easing: 'cubic-in-out'
        },
        frame: {
        duration: 500
        }
      })
    }

When autoResize is enabled, each window resize doubles the number of graphs, duplicating the same line over and over.

What licence is this package under?

Using mapbox-gl and binding data to the component like this

<plotly :data="plot.data" :layout="plot.layout" :options="plot.options" />

I get the following exception in the console.

Uncaught (in promise) Error: Style is not done loading
    at i._checkLoaded (mapbox-gl.js?e192:33)
    at i.addSource (mapbox-gl.js?e192:33)
    at r.addSource (mapbox-gl.js?e192:33)
    at ScatterMapbox.proto.addSource (plot.js?ac37:46)
    at Object.createScatterMapbox [as plot] (plot.js?ac37:123)
    at Mapbox.proto.updateData (mapbox.js?3fca:296)
    at eval (mapbox.js?3fca:171)

Points are plotted on the map, and I have no problems in functionality, but the above is irritating.

I have two Plotly instances, which plot data after a button press (e.g. click button one, data for the first instance is plotted).

• plot 1 is a scatter plot
• plot 2 is a group violin plot

If I click the button for plot one, everything works fine. If I then click the button for plot two, however, the group violin mode of layout is updated in the internalLayout data of of plot one! Note, that each of these instances have separate data and layouts!
e.g.

<VuePlolty v-bind="propsOne" />
<VuePlolty v-bind="propsTwo" />

So how to get around this?

I would advise using Plotly.react instead of newPlot and relayout.
This will simplify your code and instead of rebuilding a whole new plot it just redraws the styling and traces.
plotly.react docs
I actually wrote a tiny implementation of your bigger idea of embedding vuejs in plotly.js

https://medium.com/@bobthomas295/vuejs-and-plotly-js-reactive-charts-da9b3b59f2dc

Here you can see how easy it is to use the Plotly.react and the speed you get with it.

In the props

Should be

            watchShallow: {
              type:Boolean,
              default: function() {
                return false
              }
            },

because props references types, not values. eslint picks up this bug

Happy to provide a PR for this if needed

Tested to use the prebuilt dist version of plotly.js and it worked well.

Seems as it is https://github.com/a-vis/regl-scatter2d that have problem with IE11 not sure how they manage to build plotly.js without that issue.

Works with: Plotly.js 1.38.3 import Plotly from 'plotly.js/dist/plotly'

Could you please add the plotly_afterplot event to the events supported by vue-plotly? I would like to be notified when the graph is panned so that I may retrieve more data to fill in the chart.

Please provide a minimal example of animation with your wrapper. I have data dynamically bound, but it seems to just have plotly redraw, when animation is specified in options

Question: How do I use react method and redraw?
I am having the data updated with another fetch from the backend but it is not reflecting the change in the chart.

Thanks

Hey there,
I am new to Vue. I am enjoying it so far. However I am stuck in a problem I need help with. straight to the topic, I don’t know to to pass the result of an Ajax using Axios call to a variable to render it to my scatter plot using your library . Here is how I tried to do it.

 data () {
       return {
        //flag is defined as an array that I push the ajax response to
       flag:[],
       scatter:{
         data: [{ x: [2, 300,36], y: [200, 400,800] }],
         layout: {'title': String(this.flag)},
         options: {}
       },
  },        

mounted(){
axios.get('http://192.168.1.10:8000/books/api/?format=json')
.then(response => (this.flag = response))
}
when I try to use flag in layout it says undefined. This is so strange how flag could it be undefined and why? I would appreciate your help. thanks in advance.

Hi, I am new with vue-plotly and I can't figure it out how to bind dropdown events in vue-plotly. Any kind of demo code is appreciated and also, please provide some examples for beginners. Thanks

Hey there 👋

We are migrating our Vue 2 + Vue CLI application to a Vue 3 + Vite application.

We are struggling with adapting Plotly to this new system.

Does someone have a way to make Plotly Vue 3 + Vite compatible?

Thanks

Hi,

I'm trying to manualy trigger an hover event on my chart so it would display the tooltips for the last records on loading.

This is something documented in the official docs

var curve1 = Math.floor(Math.random()*2),
        curve2 = Math.floor(Math.random()*2),
        point1 = Math.floor(Math.random()*14),
        point2 = Math.floor(Math.random()*14);
Plotly.Fx.hover('myDiv',[
        {curveNumber:curve1, pointNumber:point1},
        {curveNumber:curve2, pointNumber:point2}
    ]);

but I'm having some difficulties on how to implement it with the vue-plotly component

<vue-plotly :data="data" :layout="layout" :options="options"/>

In advance, many thanks for the help

Need some example of using Plotly functions like plot, extendTraces.

The use of functions using the Plotly library is listed below.
https://codepen.io/etpinard/pen/qZzyXp

Is there a way to reduce this wrapper size by only importing the needed dependencies or bundles?

such as Plotly Basic

EDIT: Managed to implement it by directly editing the wrapper.
At Plotly.vue changed
import Plotly from 'plotly.js'
to

import Plotly from 'plotly.js-basic-dist'

and at vue-plotly.js changed every reference to plotly.js to plotly.js-basic-dist

but I think there should be a correct way to implement this feature.