statnett / vue-plotly Goto Github PK
View Code? Open in Web Editor NEWA vue wrapper for plotly.js chart library
License: MIT License
A vue wrapper for plotly.js chart library
License: MIT License
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
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).
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
Line 47 in 3f05b63
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.