Feature: stock market service and info widget (#3617)
--------- Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>pull/3706/head
Dylan Ullrich
5 months ago
committed by
GitHub
parent
810c321881
commit
231e2408c3
|
After Width: | Height: | Size: 9.2 KiB |
@ -0,0 +1,48 @@
|
||||
---
|
||||
title: Stocks
|
||||
description: Stocks Information Widget Configuration
|
||||
---
|
||||
|
||||
_(Find the Stocks service widget [here](../services/stocks.md))_
|
||||
|
||||
The Stocks Information Widget allows you to include basic stock market data in
|
||||
your Homepage header. The widget includes the current price of a stock, and the
|
||||
change in price for the day.
|
||||
|
||||
Finnhub.io is currently the only supported provider for the stocks widget.
|
||||
You can sign up for a free api key at [finnhub.io](https://finnhub.io).
|
||||
You are encouraged to read finnhub.io's
|
||||
[terms of service/privacy policy](https://finnhub.io/terms-of-service) before
|
||||
signing up. The documentation for the endpoint that is utilized can be viewed
|
||||
[here](https://finnhub.io/docs/api/quote).
|
||||
|
||||
You must set `finnhub` as a provider in your `settings.yaml` like below:
|
||||
|
||||
```yaml
|
||||
providers:
|
||||
finnhub: yourfinnhubapikeyhere
|
||||
```
|
||||
|
||||
Next, configure the stocks widget in your `widgets.yaml`:
|
||||
|
||||
The information widget allows for up to 8 items in the watchlist.
|
||||
|
||||
```yaml
|
||||
- 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
|
||||
- AAPL
|
||||
- BRK.A
|
||||
```
|
||||
|
||||
The above configuration would result in something like this:
|
||||
|
||||
|
||||
@ -0,0 +1,50 @@
|
||||
---
|
||||
title: Stocks
|
||||
description: Stocks Service Widget Configuration
|
||||
---
|
||||
|
||||
_(Find the Stocks information widget [here](../info/stocks.md))_
|
||||
|
||||
The widget includes:
|
||||
|
||||
- US stock market status
|
||||
- Current price of provided stock symbol
|
||||
- Change in price of stock symbol for the day.
|
||||
|
||||
Finnhub.io is currently the only supported provider for the stocks widget.
|
||||
You can sign up for a free api key at [finnhub.io](https://finnhub.io).
|
||||
You are encouraged to read finnhub.io's
|
||||
[terms of service/privacy policy](https://finnhub.io/terms-of-service) before
|
||||
signing up.
|
||||
|
||||
Allowed fields: no configurable fields for this widget.
|
||||
|
||||
You must set `finnhub` as a provider in your `settings.yaml`:
|
||||
|
||||
```yaml
|
||||
providers:
|
||||
finnhub: yourfinnhubapikeyhere
|
||||
```
|
||||
|
||||
Next, configure the stocks widget in your `services.yaml`:
|
||||
|
||||
The service widget allows for up to 28 items in the watchlist. You may get rate
|
||||
limited if using the information and service widgets together.
|
||||
|
||||
```yaml
|
||||
widget:
|
||||
type: stocks
|
||||
provider: finnhub
|
||||
showUSMarketStatus: true # optional, defaults to true
|
||||
watchlist:
|
||||
- GME
|
||||
- AMC
|
||||
- NVDA
|
||||
- TSM
|
||||
- BRK.A
|
||||
- TSLA
|
||||
- AAPL
|
||||
- MSFT
|
||||
- AMZN
|
||||
- BRK.B
|
||||
```
|
||||
@ -0,0 +1,91 @@
|
||||
import useSWR from "swr";
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "next-i18next";
|
||||
import { FaChartLine } from "react-icons/fa6";
|
||||
|
||||
import Error from "../widget/error";
|
||||
import Container from "../widget/container";
|
||||
import PrimaryText from "../widget/primary_text";
|
||||
import WidgetIcon from "../widget/widget_icon";
|
||||
import Raw from "../widget/raw";
|
||||
|
||||
export default function Widget({ options }) {
|
||||
const { t, i18n } = useTranslation();
|
||||
|
||||
const [viewingPercentChange, setViewingPercentChange] = useState(false);
|
||||
|
||||
const { color } = options;
|
||||
|
||||
const { data, error } = useSWR(
|
||||
`/api/widgets/stocks?${new URLSearchParams({ lang: i18n.language, ...options }).toString()}`,
|
||||
);
|
||||
|
||||
if (error || data?.error) {
|
||||
return <Error options={options} />;
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return (
|
||||
<Container>
|
||||
<WidgetIcon icon={FaChartLine} />
|
||||
<PrimaryText>{t("stocks.loading")}...</PrimaryText>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
if (data) {
|
||||
return (
|
||||
<Container options={options} additionalClassNames="information-widget-stocks">
|
||||
<Raw>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setViewingPercentChange(!viewingPercentChange)}
|
||||
className="flex items-center w-full h-full hover:outline-none focus:outline-none"
|
||||
>
|
||||
<FaChartLine className="flex-none w-5 h-5 text-theme-800 dark:text-theme-200 mr-2" />
|
||||
<div className="flex flex-wrap items-center gap-0.5">
|
||||
{data.stocks.map(
|
||||
(stock) =>
|
||||
stock && (
|
||||
<div
|
||||
key={stock.ticker}
|
||||
className="rounded h-full text-xs px-1 w-[4.75rem] flex flex-col items-center justify-center"
|
||||
>
|
||||
<span className="text-theme-800 dark:text-theme-200 text-xs">{stock.ticker}</span>
|
||||
{!viewingPercentChange ? (
|
||||
<span
|
||||
className={
|
||||
color !== false
|
||||
? `text-xs ${stock.percentChange < 0 ? "text-rose-300/70" : "text-emerald-300/70"}`
|
||||
: "text-theme-800/70 dark:text-theme-200/50 text-xs"
|
||||
}
|
||||
>
|
||||
{stock.currentPrice !== null
|
||||
? t("common.number", {
|
||||
value: stock.currentPrice,
|
||||
style: "currency",
|
||||
currency: "USD",
|
||||
})
|
||||
: t("widget.api_error")}
|
||||
</span>
|
||||
) : (
|
||||
<span
|
||||
className={
|
||||
color !== false
|
||||
? `text-xs ${stock.percentChange < 0 ? "text-rose-300/70" : "text-emerald-300/70"}`
|
||||
: "text-theme-800/70 dark:text-theme-200/70 text-xs"
|
||||
}
|
||||
>
|
||||
{stock.percentChange !== null ? `${stock.percentChange}%` : t("widget.api_error")}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
</Raw>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,76 @@
|
||||
import cachedFetch from "utils/proxy/cached-fetch";
|
||||
import { getSettings } from "utils/config/config";
|
||||
|
||||
export default async function handler(req, res) {
|
||||
const { watchlist, provider, cache } = req.query;
|
||||
|
||||
if (!watchlist) {
|
||||
return res.status(400).json({ error: "Missing watchlist" });
|
||||
}
|
||||
|
||||
const watchlistArr = watchlist.split(",") || [watchlist];
|
||||
|
||||
if (!watchlistArr.length || watchlistArr[0] === "null" || !watchlistArr[0]) {
|
||||
return res.status(400).json({ error: "Missing watchlist" });
|
||||
}
|
||||
|
||||
if (watchlistArr.length > 8) {
|
||||
return res.status(400).json({ error: "Max items in watchlist is 8" });
|
||||
}
|
||||
|
||||
const hasDuplicates = new Set(watchlistArr).size !== watchlistArr.length;
|
||||
|
||||
if (hasDuplicates) {
|
||||
return res.status(400).json({ error: "Watchlist contains duplicates" });
|
||||
}
|
||||
|
||||
if (!provider) {
|
||||
return res.status(400).json({ error: "Missing provider" });
|
||||
}
|
||||
|
||||
if (provider !== "finnhub") {
|
||||
return res.status(400).json({ error: "Invalid provider" });
|
||||
}
|
||||
|
||||
const providersInConfig = getSettings()?.providers;
|
||||
|
||||
let apiKey;
|
||||
Object.entries(providersInConfig).forEach(([key, val]) => {
|
||||
if (key === provider) apiKey = val;
|
||||
});
|
||||
|
||||
if (typeof apiKey === "undefined") {
|
||||
return res.status(400).json({ error: "Missing or invalid API Key for provider" });
|
||||
}
|
||||
|
||||
if (provider === "finnhub") {
|
||||
// Finnhub allows up to 30 calls/second
|
||||
// https://finnhub.io/docs/api/rate-limit
|
||||
const results = await Promise.all(
|
||||
watchlistArr.map(async (ticker) => {
|
||||
if (!ticker) {
|
||||
return { ticker: null, currentPrice: null, percentChange: null };
|
||||
}
|
||||
// https://finnhub.io/docs/api/quote
|
||||
const apiUrl = `https://finnhub.io/api/v1/quote?symbol=${ticker}&token=${apiKey}`;
|
||||
// Finnhub free accounts allow up to 60 calls/minute
|
||||
// https://finnhub.io/pricing
|
||||
const { c, dp } = await cachedFetch(apiUrl, cache || 1);
|
||||
|
||||
// API sometimes returns 200, but values returned are `null`
|
||||
if (c === null || dp === null) {
|
||||
return { ticker, currentPrice: null, percentChange: null };
|
||||
}
|
||||
|
||||
// Rounding percentage, but we want it back to a number for comparison
|
||||
return { ticker, currentPrice: c.toFixed(2), percentChange: parseFloat(dp.toFixed(2)) };
|
||||
}),
|
||||
);
|
||||
|
||||
return res.send({
|
||||
stocks: results,
|
||||
});
|
||||
}
|
||||
|
||||
return res.status(400).json({ error: "Invalid configuration" });
|
||||
}
|
||||
@ -0,0 +1,110 @@
|
||||
import { useTranslation } from "next-i18next";
|
||||
import classNames from "classnames";
|
||||
|
||||
import Container from "components/services/widget/container";
|
||||
import Block from "components/services/widget/block";
|
||||
import useWidgetAPI from "utils/proxy/use-widget-api";
|
||||
|
||||
function MarketStatus({ service }) {
|
||||
const { t } = useTranslation();
|
||||
const { widget } = service;
|
||||
|
||||
const { data, error } = useWidgetAPI(widget, "status", {
|
||||
exchange: "US",
|
||||
});
|
||||
|
||||
if (error || data?.error) {
|
||||
return <Container service={service} error={error} />;
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return (
|
||||
<Container service={service}>
|
||||
<Block value={t("stocks.loading")} />
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
const { isOpen } = data;
|
||||
|
||||
if (isOpen) {
|
||||
return (
|
||||
<span className="inline-flex items-center rounded-md bg-green-500/10 px-2 py-1 text-xs font-medium text-green-400/90 ring-1 ring-inset ring-green-500/20">
|
||||
{t("stocks.open")}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<span className="inline-flex items-center rounded-md bg-red-400/10 px-2 py-1 text-xs font-medium text-red-400/60 ring-1 ring-inset ring-red-400/10">
|
||||
{t("stocks.closed")}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function StockItem({ service, ticker }) {
|
||||
const { t } = useTranslation();
|
||||
const { widget } = service;
|
||||
|
||||
const { data, error } = useWidgetAPI(widget, "quote", { symbol: ticker });
|
||||
|
||||
if (error || data?.error) {
|
||||
return <Container service={service} error={error} />;
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return (
|
||||
<Container service={service}>
|
||||
<Block value={t("stocks.loading")} />
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-theme-200/50 dark:bg-theme-900/20 rounded flex flex-1 items-center justify-between m-1 p-1 text-xs">
|
||||
<span className="font-thin ml-2 flex-none">{ticker}</span>
|
||||
<div className="flex items-center flex-row-reverse mr-2 text-right">
|
||||
<span className={`font-bold ml-2 w-10 ${data.dp > 0 ? "text-emerald-300" : "text-rose-300"}`}>
|
||||
{data.dp?.toFixed(2) ? `${data.dp?.toFixed(2)}%` : t("widget.api_error")}
|
||||
</span>
|
||||
<span className="font-bold">
|
||||
{data.c
|
||||
? t("common.number", {
|
||||
value: data?.c,
|
||||
style: "currency",
|
||||
currency: "USD",
|
||||
})
|
||||
: t("widget.api_error")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Component({ service }) {
|
||||
const { t } = useTranslation();
|
||||
const { widget } = service;
|
||||
const { watchlist, showUSMarketStatus } = widget;
|
||||
|
||||
if (!watchlist || !watchlist.length || watchlist.length > 28 || new Set(watchlist).size !== watchlist.length) {
|
||||
return (
|
||||
<Container service={service}>
|
||||
<Block value={t("stocks.invalidConfiguration")} />
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Container service={service}>
|
||||
<div className={classNames(service.description ? "-top-10" : "-top-8", "absolute right-1 z-20")}>
|
||||
{showUSMarketStatus === true && <MarketStatus service={service} />}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col w-full">
|
||||
{watchlist.map((ticker) => (
|
||||
<StockItem key={ticker} service={service} ticker={ticker} />
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
import credentialedProxyHandler from "utils/proxy/handlers/credentialed";
|
||||
|
||||
const widget = {
|
||||
api: `https://finnhub.io/api/{endpoint}`,
|
||||
proxyHandler: credentialedProxyHandler,
|
||||
|
||||
mappings: {
|
||||
quote: {
|
||||
// https://finnhub.io/docs/api/quote
|
||||
endpoint: "v1/quote",
|
||||
params: ["symbol"],
|
||||
},
|
||||
status: {
|
||||
// https://finnhub.io/docs/api/market-status
|
||||
endpoint: "v1/stock/market-status",
|
||||
params: ["exchange"],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default widget;
|
||||
Loading…
Reference in new issue