search

plotly / plotly.js

Open-source JavaScript charting library behind Plotly and Dash
https://plotly.com/javascript/
MIT License
17k stars 1.86k forks source link

Feature Request - A Plotly wrapper for Vuejs #2691

Closed RaghunathHyd closed 4 months ago

RaghunathHyd commented 6 years ago

Will be great if a plotly.js wrapper for Vuejs is made like its there for React with Vuejs now becoming a more popular Javascript framework.

https://github.com/plotly/react-plotly.js/blob/master/README.md

chiaramdelucia commented 6 years ago

This one is pretty good https://github.com/statnett/vue-plotly if you're looking for something in the immediate.

RaghunathHyd commented 6 years ago

Thanks. I tried it but its not very mature yet. Lots of bugs crop up when I use it. Wanted something from the plotly themselves like they did for the react.

alexcjohnson commented 6 years ago

I'm afraid we don't have anyone with much Vue experience internally at Plotly, whereas we actively use React and have some in-house Angular experience. So it would be difficult for us to create an "official" Vue wrapper and have much confidence in it. The vue-plotly repo @chiaramdelucia pointed to is the most mature option I'm aware of at present. If you think it's a good start architecturally, I'd encourage you to contribute PRs or issues to improve it, perhaps using code from our official React wrapper as a point of comparison.

chiaramdelucia commented 6 years ago

@RaghunathHyd, I'd love if you opened up some issues of bugs over on that repo. I have been using a version of that (I use the render function instead of a template, and I also use Plotly.react instead of Plotly.plot/newPlot) and have not had any bugs yet. So, I'd definitely love to hear what the possibilities of bugs are, but I don't want to clog up this repo. TIA!

tetreault commented 5 years ago

+1

simply importing plotly breaks nuxt

alexcjohnson commented 5 years ago

Correct me if I'm wrong (again, we have very little in-house Vue experience) but it looks like Nuxt is largely focused on server-side rendering, and I suspect that's why plotly.js is breaking it - we do a lot of things that require a real DOM, most fundamentally perhaps measuring text since it's on us, not the HTML layout engine, to position it correctly. See https://community.plot.ly/t/how-to-perform-server-side-manipulation-using-plotly-js/1077

tetreault commented 5 years ago

In my case i generate static files from a nuxt site using the generate command, but thanks for the reply @alexcjohnson appreciate it!

antoinerg commented 5 years ago

@tetreault See the following link https://nuxtjs.org/guide/plugins/#client-side-only to use client-side only plugins in nuxt. Also, the <no-ssr> might be useful (https://nuxtjs.org/api/components-no-ssr/)! I hope that helps :)

tetreault commented 5 years ago

thanks for the link @antoinerg i'll mess around with plotly more for next time! I just had one day to quickly whip up the thing I had to make internally and ended up swapping out plotly for vue-chartjs in the mean time.

antoinerg commented 5 years ago

On second thoughts, server-side rendering could be supported in Nuxt.js by leveraging Orca as long as interactive figures are not necessary. Nuxt.js would simply make a call to Orca to produce an SVG server-side to be included on the page. By properly caching the results, a web application could deliver first render extremely fast for content that rarely changes. Then if the client supports javascript, interactivity could be added once the page is loaded by using Plotly.js the usual way.

gvwilson commented 4 months ago

Hi - this issue has been sitting for a while, so as part of our effort to tidy up our public repositories I'm going to close it. If it's still a concern, we'd be grateful if you could open a new issue (with a short reproducible example if appropriate) so that we can add it to our stack. Cheers - @gvwilson