Integrations · TradingView · News, calendars, economics
Context around the price
News, macro events and a world macro map. None of this content passes through LUC: the provider owns the feed, the calendar and the indicator data, and the wrapper only decides where it goes.
Top Stories
The provider's market news timeline.
TopStories
iframeThe provider's market news timeline. LUC never renders or stores the stories itself.
feedMode="symbol" with a symbol follows one instrument instead of all markets. LUC does not parse, store or re-render the stories.
Economic Calendar
Named for the provider on purpose: this is not Luc UI's Calendar component, and the two must never be confused.
EconomicCalendar
iframeAll importance levels, worldwide.
EconomicCalendar
iframeHigh-importance events for the US, EU and UK.
Economic Map
A world map of one macro indicator, by region.
EconomicMap
Web ComponentA world map of macro indicators, by region and metric.
EconomicMap
Web ComponentInflation rate (iryy).
EconomicMap
Web ComponentUnemployment rate (ur), Europe.
Reuse note
These four widgets are the cheapest way to give a research page macro context.
They are also the ones most likely to be reused across products: none of them depends on Luc UI's own data, and none of them needs a backend to be useful.
Usage
import { TradingViewTopStories } from "@luc/ui/tradingview";<TradingViewTopStories feedMode="symbol" symbol="NASDAQ:AAPL" height={620} />A symbol-specific provider news feed; use `all_symbols` for the global feed.
import { TradingViewEconomicCalendar } from "@luc/ui/tradingview";<TradingViewEconomicCalendar importanceFilter="1" countryFilter="us,eu,gb" height={520} />High-importance provider events for three regions.
import { TradingViewEconomicMap } from "@luc/ui/tradingview";<TradingViewEconomicMap region="global" metric="iryy" hideLegend height={420} />One macro indicator on the provider's world map.
Configuration
Top stories uses `feedMode` plus `symbol` or `market`; a symbol feed with an invalid symbol refuses rather than falling back. The calendar uses comma-separated `importanceFilter` and `countryFilter` strings; the map uses the closed `region` and `metric` unions.
Client and provider lifecycle
Top stories and the economic calendar are iframe widgets; the economic map is a Web Component. Each loads its provider content after hydration and needs an explicit height.
Limitations
The stories, event records, country coverage and macro values come from TradingView. LUC does not parse, store or re-render them, and the provider can change the available regions or feed behaviour.
Guidelines
Do
- Use these as context around a price chart, never as the only recording of an event that matters to the product.
- State the provider and the selected country or importance filter next to the calendar.
Don't
- Do not confuse this economic calendar with Luc UI's own `Calendar` date component.
- Do not translate provider event copy or claim that LUC filtered the underlying feed.
API
Read from the published TypeScript API, so a prop that is not listed here does not exist and a default that is listed is the one the compiler sees.
| Export | Kind | Signature |
|---|---|---|
TradingViewTopStories | 19 documented props | ({ feedMode, symbol, market, displayMode, transparent, locale, theme, ...base }: TradingViewTopStoriesProps) => import("@types/react").JSX.Element |
TradingViewEconomicCalendar | 17 documented props | ({ importanceFilter, countryFilter, transparent, locale, theme, ...base }: TradingViewEconomicCalendarProps) => import("@types/react").JSX.Element |
TRADINGVIEW_ECONOMIC_METRIC_LABELS | export | Readonly<Record<TradingViewEconomicMetric, string>> |
TradingViewEconomicMap | 21 documented props | ({ region, metric, metrics, hideLegend, hideSelection, symbolUrl, theme, ...base }: TradingViewEconomicMapProps) => import("@types/react").JSX.Element |
TradingViewTopStories props
Type: TradingViewTopStoriesProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
aria-label? | string | undefined | — | |
className? | string | undefined | — | |
config? | TradingViewRawConfig | undefined | — | Advanced: extra provider configuration, merged under Luc UI's own keys. Cannot change the script URL, the element, or attribution. |
displayMode? | "compact" | "regular" | "adaptive" | undefined | — | |
fallback? | ReactNode | — | Rendered instead of the provider widget when the load fails. |
feedMode? | TradingViewTopStoriesFeedMode | undefined | — | Which timeline to show. Default `all_symbols` (the provider's global feed). |
height? | string | number | undefined | — | Height of the widget box. Defaults to the registry's usable minimum. |
inheritTheme? | boolean | undefined | — | Map LUC semantic tokens onto TradingView's public CSS custom properties. Default `true`. Ignored by iframe widgets, which only accept the provider's own theme config — that limit … |
loading? | "lazy" | "eager" | undefined | — | Defer loading until the widget is near the viewport. Default `"lazy"`. |
locale? | TradingViewLocale | undefined | — | Provider locale. Defaults to `LocaleProvider` when present, else `en`. |
market? | string | undefined | — | The market whose timeline is shown. Used by `feedMode="market"`. |
minHeight? | string | number | undefined | — | Minimum height, so a resizable pane cannot collapse the widget to nothing. |
onStatusChange? | ((change: TradingViewStatusChange) => void) | undefined | — | Notified on every lifecycle transition. |
placeholder? | ReactNode | — | Rendered inside the widget box until the provider takes over. Defaults to a geometry-matched skeleton; an inline widget (Ticker Tag) supplies its own so it can sit inside a paragr… |
symbol? | string | undefined | — | The instrument whose feed is shown. Required by `feedMode="symbol"`. |
theme? | TradingViewThemeProp | undefined | — | |
timeoutMs? | number | undefined | — | Milliseconds to wait for a Web Component to register before reporting it as unavailable. Default `12000`. iframe widgets report failure from the script load instead. |
title? | string | undefined | — | Accessible name for the widget box. Defaults to the registry display name. |
transparent? | boolean | undefined | — | Ask the provider for a transparent background. Ignored by widgets that do not expose the option. LUC defaults to opaque: dense financial content is more readable on its own surfac… |
TradingViewEconomicCalendar props17 props
TradingViewEconomicCalendar props
Type: TradingViewEconomicCalendarProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
aria-label? | string | undefined | — | |
className? | string | undefined | — | |
config? | TradingViewRawConfig | undefined | — | Advanced: extra provider configuration, merged under Luc UI's own keys. Cannot change the script URL, the element, or attribution. |
countryFilter? | string | undefined | — | Comma-separated ISO country codes, or a single code. |
fallback? | ReactNode | — | Rendered instead of the provider widget when the load fails. |
height? | string | number | undefined | — | Height of the widget box. Defaults to the registry's usable minimum. |
importanceFilter? | string | undefined | — | Comma-separated importance filter, e.g. `"0,1"` for medium and high. |
inheritTheme? | boolean | undefined | — | Map LUC semantic tokens onto TradingView's public CSS custom properties. Default `true`. Ignored by iframe widgets, which only accept the provider's own theme config — that limit … |
loading? | "lazy" | "eager" | undefined | — | Defer loading until the widget is near the viewport. Default `"lazy"`. |
locale? | TradingViewLocale | undefined | — | Provider locale. Defaults to `LocaleProvider` when present, else `en`. |
minHeight? | string | number | undefined | — | Minimum height, so a resizable pane cannot collapse the widget to nothing. |
onStatusChange? | ((change: TradingViewStatusChange) => void) | undefined | — | Notified on every lifecycle transition. |
placeholder? | ReactNode | — | Rendered inside the widget box until the provider takes over. Defaults to a geometry-matched skeleton; an inline widget (Ticker Tag) supplies its own so it can sit inside a paragr… |
theme? | TradingViewThemeProp | undefined | — | |
timeoutMs? | number | undefined | — | Milliseconds to wait for a Web Component to register before reporting it as unavailable. Default `12000`. iframe widgets report failure from the script load instead. |
title? | string | undefined | — | Accessible name for the widget box. Defaults to the registry display name. |
transparent? | boolean | undefined | — | Ask the provider for a transparent background. Ignored by widgets that do not expose the option. LUC defaults to opaque: dense financial content is more readable on its own surfac… |
TradingViewEconomicMap props21 props
TradingViewEconomicMap props
Type: TradingViewEconomicMapProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
aria-label? | string | undefined | — | |
className? | string | undefined | — | |
config? | TradingViewRawConfig | undefined | — | Advanced: extra provider configuration, merged under Luc UI's own keys. Cannot change the script URL, the element, or attribution. |
fallback? | ReactNode | — | Rendered instead of the provider widget when the load fails. |
height? | string | number | undefined | — | Height of the widget box. Defaults to the registry's usable minimum. |
hideLegend? | boolean | undefined | — | |
hideSelection? | boolean | undefined | — | |
inheritTheme? | boolean | undefined | — | Map LUC semantic tokens onto TradingView's public CSS custom properties. Default `true`. Ignored by iframe widgets, which only accept the provider's own theme config — that limit … |
loading? | "lazy" | "eager" | undefined | — | Defer loading until the widget is near the viewport. Default `"lazy"`. |
locale? | TradingViewLocale | undefined | — | Provider locale. Defaults to `LocaleProvider` when present, else `en`. |
metric? | TradingViewEconomicMetric | undefined | — | |
metrics? | readonly TradingViewEconomicMetric[] | undefined | — | Extra metrics to show alongside the primary one. |
minHeight? | string | number | undefined | — | Minimum height, so a resizable pane cannot collapse the widget to nothing. |
onStatusChange? | ((change: TradingViewStatusChange) => void) | undefined | — | Notified on every lifecycle transition. |
placeholder? | ReactNode | — | Rendered inside the widget box until the provider takes over. Defaults to a geometry-matched skeleton; an inline widget (Ticker Tag) supplies its own so it can sit inside a paragr… |
region? | TradingViewEconomicRegion | undefined | — | |
symbolUrl? | string | undefined | — | |
theme? | TradingViewThemeProp | undefined | — | |
timeoutMs? | number | undefined | — | Milliseconds to wait for a Web Component to register before reporting it as unavailable. Default `12000`. iframe widgets report failure from the script load instead. |
title? | string | undefined | — | Accessible name for the widget box. Defaults to the registry display name. |
transparent? | boolean | undefined | — | Ask the provider for a transparent background. Ignored by widgets that do not expose the option. LUC defaults to opaque: dense financial content is more readable on its own surfac… |