search

rafaelklaessen / react-tradingview-widget

React component for rendering the TradingView Advanced Real-Time Chart Widget.
MIT License
273 stars 94 forks source link

Tradingview Another Widget #31

Open emin-karadag opened 5 years ago

emin-karadag commented 5 years ago

Hello, Is there only one widget in this library? For example how do I add a TradingView Mini Chart Widget? Thank you...

rafaelklaessen commented 5 years ago

Hi! Thanks for the issue.

Yes, this component only wraps the advanced real-time chart widget. (And does so in a very simplistic way.)

The mini chart widget seems more difficult to use with React, but if you could point me at a React version of it, I could consider building a more complete library that includes all TradingView widgets.

Let me know! Thanks.

emin-karadag commented 5 years ago

Thank you for your reply. I would appreciate if you could build a library for the React version. :) Please includes all TradingView widgets :)))

zeybar commented 5 years ago

Thank you too

darrengoh97 commented 4 years ago

Hi, I understand only the advanced real-time chart widget is usable. I was hoping to use this package for the TradingView Symbol Overview Widget. https://www.tradingview.com/widget/symbol-overview/ Any chance you know how to implement it in react? Thank you.

rafaelklaessen commented 4 years ago

I know that @webmastersam has forked this repo here and has added some additional widgets... Perhaps you could look at that fork?

Would also be happy to merge said fork into this package.

darrengoh97 commented 4 years ago

@rafaelklaessen I checked the repo. It doesn't include the widget I needed.

WebMasterSam commented 4 years ago

@darrengogh97, @emin-karadag If you need to create the missing widget it would be very easy. Just copy paste one of those. Check before copying the widget because they don't always work the same way. I think there's 2-3 different ways to instanciate the widge. Depending on the one you want, start from a widget that works the same way and you will be up and running in a matter of minutes.

IbrahimSam96 commented 4 years ago

@WebMasterSam Hey can you please show me an example of how I could create a different widget?

WebMasterSam commented 4 years ago

@IbrahimSam96 can you send me the link of the plugin ? I will try to create the version in my branch for you.

IbrahimSam96 commented 4 years ago

Fundamentals https://www.tradingview.com/widget/fundamental-data/

Market Overview https://www.tradingview.com/widget/market-overview/

Market Quotes https://www.tradingview.com/widget/market-quotes/

Thanks for offering your help!

WebMasterSam commented 4 years ago

I added the "Fundamentals" widget.

For the 2 others, please refer to this widget : "stock-list-widget". You have array parameters that requires a propType that is not listed in the Fundamentals widget.

IbrahimSam96 commented 4 years ago

I'm sorry how can I access the Fundamentals widget ?

WebMasterSam commented 4 years ago

I just pushed it to my branch : https://github.com/WebMasterSam/react-tradingview-widget/blob/master/src/stock-fundamentals-widget.js

You can also find all of my plugins here https://github.com/WebMasterSam/react-tradingview-widget/blob/master/src/

IbrahimSam96 commented 4 years ago

Hey, sorry I'm fairly new to the development space. Should I use it the same way I use the TradingViewWidget ? I tried copying the code and pasting but i get an error on onload. Thanks for your help and patience

WebMasterSam commented 4 years ago

You can fork my project and add the remaining components in it. If you want to use the project, you can reference it in your packages.json file, using that way : https://medium.com/@jonchurch/use-github-branch-as-dependency-in-package-json-5eb609c81f1a

Then you will be able to reference the components in your main project.

WebMasterSam commented 4 years ago

By doing "npm install --save react-tradingview-widget", you installed the one in the NPM registry, which is not my/your version, but the original version (Rafael Klaessen's version).

It should be referenced that way (in your package.json file) : "react-tradingview-widget": "git://github.com/WebMasterSam/react-tradingview-widget.git"

Please add it manually. You can change the GIT path to anywhere you want in GIT (ex: to reference your fork).

IbrahimSam96 commented 4 years ago

I adjusted the GIT address to your version in the package.json in the node modules. Should I normally just import TradingViewStockFundamentalsWidget from react-tradingview-widget

WebMasterSam commented 4 years ago

Example importing 3 components:

import { TradingViewStockInfoWidget, TradingViewStockProfileWidget, TradingViewStockFundamentalsWidget } from 'react-tradingview-widget'

Syntax is important. If you're not familiar with React, please follow some tutorials to help you with those basic principles. Importing can be done with different syntaxes, depending on how the components have been exported. It differs from package to package (depending on the dev's exporting preferences / architecture).

IbrahimSam96 commented 4 years ago

I tried doing that but I'm still getting the TradingViewWidget instead of TradingViewStockFundamentalsWidget :(