Feature: stock market service and info widget

eldyl commented 3 months ago

Proposed change

Hello!

I have been working on an implementation of a stock market widget.

Relevant Feature Request - https://github.com/gethomepage/homepage/discussions/297

widget_stocks_screenshot

homepage_widget_stocks_demo

Type of change

[x] New service widget
[ ] Bug fix (non-breaking change which fixes an issue)
[ ] New feature (non-breaking change which adds functionality)
[ ] Documentation only
[x] Other (please explain) Information widget

Checklist:

[x] If applicable, I have added corresponding documentation changes.
[x] If applicable, I have reviewed the feature and / or service widget guidelines.
[x] I have checked that all code style checks pass using pre-commit hooks and linting checks.
[x] If applicable, I have tested my code for new features & regressions on both mobile & desktop devices, using the latest version of major browsers.

Notes

I felt like this widget fit best as an info widget, but I am happy to change things if the category is not appropriate.
My goal was to show basic information in a simple way.
Uses Finnhub.io's API. You can sign up for a free API key.
- Finnhub allows up to 30 calls per second. I set the max items in the watchlist to 30 for this reason. This is a very high number, but I figured I would leave this up to the user.
- Finnhub allows up to 60 calls per minute on the free tier. I set default caching for this widget to 1 minute. Caching can be changed in the config.
You can click on the widget to switch between the current price of a stock and the change in price of the stock since open.
I created the widget as the "Stocks" widget rather than "Finnhub". The intention was to allow different APIs as providers. It should be relatively straightforward to implement more APIs.

Desktop

homepage_widget_stocks_desktop

Mobile

homepage_widget_stocks_mobile

eldyl commented 3 months ago

I appreciate your feedback!

as-is this will allow duplicates in the list

I will take care of this.

Im also wondering if the limit of 30 (which I know comes from the API) is too much. It just starts to get too large. Maybe thats OK but my gut tells me we should trim it down. What do you think?

Example with 6 Items

Example with 8 Items

Agreed. A max of 6 kind of feels like the sweet spot. With a known max, I would also like to handle some viewport sizes a little differently.

If it works, I can have these updates included tomorrow.

If there is anything else that looks like it could be improved, I am happy to make the changes.

shamoon commented 3 months ago

Yea no problem, sounds good on all accounts. I’ll take a look at the code more closely after you push the changes but overall seems like pretty a clean PR thanks 👍

brhahlen commented 3 months ago

Yay! Love this! My only question would be if it would be possible to make a service widget for it? Would fit better with the CMC widget as welll :) Thanks for the hard work!

eldyl commented 3 months ago

Yay! Love this! My only question would be if it would be possible to make a service widget for it? Would fit better with the CMC widget as welll :) Thanks for the hard work!

I could do both.

The component looks like it is pretty easily adaptable: https://github.com/gethomepage/homepage/blob/main/src/widgets/coinmarketcap/component.jsx

@shamoon What are your thoughts? Would it be better to pick one? Or would it be reasonable to have both component types as potential options?

shamoon commented 3 months ago

It's not clear from the FR if people want a service widget or info, so it's of course debatable. But given this is closest to the CoinMarketCap widget (which btw is better suited to the list format) perhaps that is the better way to go, sorry for the changeup.

eldyl commented 3 months ago

Happy to make the change. I agree that the format of the CoinMarketCap widget does work better overall. I can get started later today.

benphelps commented 3 months ago

I think both should be options.

On the layout of the info widget, I think keeping the font size the same, and lowering the opacity of the price, would be more inline with the Homepage design direction. This would also allow it to use slightly less vertical space.

eldyl commented 3 months ago

I think both should be options.

For my personal use, I do prefer having a few items in the header in most instances.

On the layout of the info widget, I think keeping the font size the same, and lowering the opacity of the price, would be more inline with the Homepage design direction. This would also allow it to use slightly less vertical space.

I will look into these changes. Thanks for the tips.

Apologies for the delay. I have been busy with work :)

I was testing some other APIs to see if it makes sense to include them in the widget, but I think, at least for now, Finnhub seems like a better option with their free tier and limits.

I also have tested getting data from https://finance.yahoo.com/quotes/${comma_separated_list_of_tickers}. This would work without an API key, but will require some more processing. I have been testing headers to reduce the size of the received payload.

I suggested this could be a Stocks, widget, and I'd like to make that work, but I would like to provide proof of concept with multiple APIs. Otherwise, it might make sense for for the Widget to be a Finnhub widget. I also want to make sure it won't be difficult to maintain multiple APIs. That being said, if changes in the future are accepted, I am happy to help maintain them.

shamoon commented 3 months ago

I would just focus on this version, especially given it will now support two versions of the widget let’s keep the PR focused ie MVP. I’m confident this can be adapted for other APIs if there is need

eldyl commented 3 months ago

I think both should be options.

On the layout of the info widget, I think keeping the font size the same, and lowering the opacity of the price, would be more inline with the Homepage design direction. This would also allow it to use slightly less vertical space.

Maybe something closer to this?

homepage_stock_info_preview_1

homepage_preview_diff_w_color

eldyl commented 3 months ago

I will write with some more information in the morning regarding some of the choices I made, but this should be ready for review.

mobile desktop

shamoon commented 3 months ago

Looking good. Small thing, I wouldn’t bother with displaying (or translating) the errors or displaying things like has duplicates, it’s basically a config error so just throw an error with details in the log and / or truncate the list / remove the duplicates.

eldyl commented 3 months ago

Reviewing now. Thank you for these great suggestions. I will try and get them all added today.

eldyl commented 3 months ago

I havent tested yet, just some thoughts looking at the code. Thanks

Mentioned issues should be resolved: https://github.com/gethomepage/homepage/compare/878d62b1f832f17bb57d18ac3b00ad70dec0c2df..ae3df9eeeb045f256bce33751d1d504ca96cf6cd

I really appreciate the feedback :)

eldyl commented 3 months ago

Great work, I think people will dig this. some minor tweaks but nothing major

Thanks again for your feedback throughout. I checked your changes, and I made some notes for myself as well.

Thanks!

vednolacni commented 2 months ago

Is it possible to add crypto?

suicidaleggroll commented 1 month ago

Is it possible to add crypto?

FYI - the implemented stock tracker already supports crypto. While not explicitly called out, you can use "ETH-USD" or "BTC-USD", etc. for your tickers and it works correctly.

- stocks:
    provider: finnhub
    color: true
    cache: 1
    watchlist:
      - VOO
      - COIN
      - ETH-USD
      - BTC-USD

eldyl commented 1 month ago

FYI - the implemented stock tracker already supports crypto. While not explicitly called out, you can use "ETH-USD" or "BTC-USD", etc. for your tickers and it works correctly.
- stocks:
    provider: finnhub
    color: true
    cache: 1
    watchlist:
      - VOO
      - COIN
      - ETH-USD
      - BTC-USD

I appreciate you sharing this! I was not aware these symbols received proper values from the Finnhub API. ~~I think it would be a good idea to put in a PR for the widget documentation.~~

- stocks:
    provider: finnhub
    color: true # optional, defaults to true
    cache: 1 # optional, default caches results for 1 minute
    watchlist:
      - GME
      - AMC
      - NVDA
      - AMD
      - TSM
      - MSFT
      - BTC-USD
      - ETH-USD

~~Something like the above might help point out how you can query some crypto.~~

I will have some time within the next week to take a closer look at this.

I hope you are well.

Danie10 commented 1 month ago

Hi @eldyl this is working for me, but I'm not sure if I'm missing something for non-US stocks (syntax) or whether I must open a new issue for a feature. I'm looking to for example list a stock STX40 from Johannesburg stock exchange. Finnhub gives the exchange the code JO. But I tried adding STX40.JO and it gives an API error.

suicidaleggroll commented 1 month ago

FYI - the implemented stock tracker already supports crypto. While not explicitly called out, you can use "ETH-USD" or "BTC-USD", etc. for your tickers and it works correctly.
- stocks:
    provider: finnhub
    color: true
    cache: 1
    watchlist:
      - VOO
      - COIN
      - ETH-USD
      - BTC-USD
I appreciate you sharing this! I was not aware these symbols received proper values from the Finnhub API. I think it would be a good idea to put in a PR for the widget documentation.
- stocks:
    provider: finnhub
    color: true # optional, defaults to true
    cache: 1 # optional, default caches results for 1 minute
    watchlist:
      - GME
      - AMC
      - NVDA
      - AMD
      - TSM
      - MSFT
      - BTC-USD
      - ETH-USD
Something like the above might help point out how you can query some crypto.

I will have some time within the next week to take a closer look at this.

I hope you are well.

After using this for a bit, I can't recommend the crypto tickers from finnhub unfortunately. It does work, and during the day the numbers are correct, but after the markets close (before 9:30am or after 4pm Eastern) the crypto prices get wacky. Sometimes it just throws an API error, sometimes it shows the "close" or "open" price of that day, sometimes it shows a price from 2-3 days ago. It doesn't seem to follow any pattern that I can decipher. I have noticed that the ticker values on finnhub's website still appear to be correct, so maybe it's just a problem with the API outside of standard trading hours.

github-actions[bot] commented 1 week ago

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new discussion for related concerns. See our contributing guidelines for more details.

gethomepage / homepage