Tradingview Another Widget

[emin-karadag]

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

[rafaelklaessen]

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]

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

[zeybar]

Thank you too

[darrengoh97]

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]

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]

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

[WebMasterSam]

@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]

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

[WebMasterSam]

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

[IbrahimSam96]

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]

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]

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

[WebMasterSam]

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]

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]

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]

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]

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]

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]

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