leftmove / wallstreetlocal

Free and open-source stock tracking website for America's biggest money managers.
https://wallstreetlocal.com
MIT License
435 stars 36 forks source link

Create charts #3

Open leftmove opened 5 months ago

leftmove commented 5 months ago

Similar to other stock tracking websites, create charts that display filer data.

There are a number of libraries that have pre-made charts, so it's probably just a matter of finding on and implementing it with existing data. If new data is needed though however, I will open an issue on the back-end as well and query functions can be added.

Some current options for chart libraries: https://github.com/uber/react-vis https://github.com/c3js/c3 https://github.com/airbnb/visx

For what metrics to search, see similar sites' examples. https://whalewisdom.com/filer/berkshire-hathaway-inc

leftmove commented 5 months ago

I've been experimenting with visx, but gathering data is hard, and the charts look somewhat ugly.

The development build currently houses some JSX for the charts, but I am considering abandoning this issue as I struggle to see much to be gained from a couple charts here and there.

Other bugs need to be addressed so this issue will take a backseat.

shubham9069 commented 1 month ago

@leftmove give me an overview of this task what data I need to virtualize?

shubham9069 commented 1 month ago

@leftmove thanks for giving me a chance any information you want to give to me about this task

leftmove commented 1 month ago

Okay, if you go to a filer on the wallstreetlocal website, you'll see two tabs: stocks and analysis. This issue works on adding a third: "charts."

https://www.wallstreetlocal.com/filers/1067983

The code for the filer is stored here, and you will see the charts tab is commented out on line 49. Uncomment it to add back the charts tab.

That should allow for you to start development on the actual charts, which are stored here. You can look through the files, and start to understand some of the code. The endpoints are all there, you just need to manipulate the data.

With a local development build of the frontend, build an allocation chart to start. To see what that should look like, see this page, and the screenshot below.

image

shubham9069 commented 1 month ago

@leftmove okay i will look into it and then give you some insight how can we tackle this thanks man BTW

leftmove commented 1 month ago

No problem.

I would recommend finding a charting library, and using the data to create those charts. Since you are starting off with the allocation chart, here are the examples of that from the libraries I suggested. Note that you don't actually have to use these libraries.

https://airbnb.io/visx/barstackhorizontal https://c3js.org/samples/chart_bar_stacked.html https://uber.github.io/react-vis/examples/showcases/plots

They're usually called "stacked bar charts."

shubham9069 commented 1 month ago

@leftmove Screenshot (102)

I can understand the scenario that you need. we can use this library https://www.highcharts.com/demo?search_demo=stock for chart rendering. now i don't have a schema of the chart data so can you please help me out according to what chart I need to plug-in into project