@iccandle/news 0.0.1 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -11
- package/dist/news-widget.cjs +8 -8
- package/dist/news-widget.d.ts +1 -1
- package/dist/news-widget.js +1169 -1169
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -35,7 +35,7 @@ function App() {
|
|
|
35
35
|
widgetKey={widgetKey}
|
|
36
36
|
defaultSymbol="XAU_USD"
|
|
37
37
|
chartInterval="15"
|
|
38
|
-
theme="
|
|
38
|
+
theme="dark"
|
|
39
39
|
>
|
|
40
40
|
{/* Your chart container + TradingView bootstrap; call setChartWidget when ready */}
|
|
41
41
|
<div id="tv_chart_container" style={{ height: "100%" }} />
|
|
@@ -131,7 +131,7 @@ const widgetKey = "your-iccandle-api-key";
|
|
|
131
131
|
widgetKey={widgetKey}
|
|
132
132
|
defaultSymbol="XAU_USD"
|
|
133
133
|
chartInterval="15"
|
|
134
|
-
theme="
|
|
134
|
+
theme="dark"
|
|
135
135
|
>
|
|
136
136
|
<div ref={containerRef} style={{ height: "100%", minHeight: 400 }} />
|
|
137
137
|
</NewsWidget>;
|
|
@@ -153,7 +153,6 @@ Once the widget is mounted:
|
|
|
153
153
|
### Theme and remote branding
|
|
154
154
|
|
|
155
155
|
- **`theme="light"` / `"dark"`** — forces that palette for the widget chrome and chart overlays.
|
|
156
|
-
- **`theme="system"`** (recommended when you don't control parent theme) — follows `prefers-color-scheme` for light/dark resolution.
|
|
157
156
|
- On mount, the widget fetches your org's tokens from ICCandle (see [Widget key and remote theming](#widget-key-and-remote-theming)) and sets CSS custom properties on the widget root, e.g. `--iccandle-primary`, `--iccandle-border`, so the event panel and chart overlays match your configured light/dark branding.
|
|
158
157
|
|
|
159
158
|
### Full working example
|
|
@@ -214,7 +213,7 @@ export function ChartWithNewsWidget() {
|
|
|
214
213
|
widgetKey={WIDGET_KEY}
|
|
215
214
|
defaultSymbol="XAU_USD"
|
|
216
215
|
chartInterval="15"
|
|
217
|
-
theme="
|
|
216
|
+
theme="dark"
|
|
218
217
|
>
|
|
219
218
|
<div ref={containerRef} style={{ height: "100%", width: "100%" }} />
|
|
220
219
|
</NewsWidget>
|
|
@@ -231,8 +230,7 @@ For a concrete in-repo reference (custom datafeed, timezone, visibility handling
|
|
|
231
230
|
| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
232
231
|
| **Full-page chart** | Set the parent container to `height: 100vh` and let `NewsWidget` fill the space with `autosize: true`. |
|
|
233
232
|
| **Dashboard embed** | Give the parent a fixed height (e.g. 600px) and `NewsWidget` handles the split layout internally. |
|
|
234
|
-
| **News / events on the time axis** | If your datafeed implements `getTimescaleMarks`, you can sync marks with `localStorage` — see [Optional: timescale marks (news/events)](#optional-timescale-marks-newsevents). |
|
|
235
|
-
| **Custom symbol list** | Pass any supported symbol as `defaultSymbol`; the widget supports 100+ forex, metals, indices, crypto, and commodity symbols. |
|
|
233
|
+
| **News / events on the time axis** | If your datafeed implements `getTimescaleMarks`, you can sync marks with `localStorage` — see [Optional: timescale marks (news/events)](#optional-timescale-marks-newsevents). | |
|
|
236
234
|
|
|
237
235
|
### Troubleshooting
|
|
238
236
|
|
|
@@ -242,7 +240,7 @@ For a concrete in-repo reference (custom datafeed, timezone, visibility handling
|
|
|
242
240
|
| `chartWidget` is always `null` | Ensure you call `setChartWidget` after the widget is created (or inside `onChartReady` if your integration requires it). |
|
|
243
241
|
| Event panel or theme looks wrong | Confirm `widgetKey` is valid; theme fetch uses `api-key: <widgetKey>`. Network or auth failures may leave defaults. |
|
|
244
242
|
| CORS / network errors on APIs | In local dev, browser calls to ICCandle APIs may be blocked by CORS unless you proxy; the widget should still function with fallback styling—verify in production or behind your proxy. |
|
|
245
|
-
| No events showing on chart | The widget falls back to `
|
|
243
|
+
| No events showing on chart | The widget falls back to the `defaultSymbol` if selected symbol is unrecognized, but ensure `chartInterval` is one of the accepted values (`"1"`, `"5"`, `"15"`, `"30"`, `"60"`). |
|
|
246
244
|
|
|
247
245
|
## API
|
|
248
246
|
|
|
@@ -260,9 +258,9 @@ For a concrete in-repo reference (custom datafeed, timezone, visibility handling
|
|
|
260
258
|
| `chartWidget` | `IChartingLibraryWidget \| null` | Yes | Live TradingView widget instance (`null` until ready). |
|
|
261
259
|
| `children` | `ReactNode` | Yes | Your chart UI (e.g. container + library bootstrap). |
|
|
262
260
|
| `widgetKey` | `string` | Yes | ICCandle API key. Used for theme fetch, chart data, news events, and scanner validation. |
|
|
263
|
-
| `defaultSymbol` | `string` | Yes | Default trading symbol (e.g. `"XAU_USD"`, `"EURUSD"`, `"BTCUSDT"`).
|
|
264
|
-
| `chartInterval` | `"1" \| "5" \| "15" \| "30" \| "60"` | Yes |
|
|
265
|
-
| `theme` | `"light" \| "dark"
|
|
261
|
+
| `defaultSymbol` | `string` | Yes | Default trading symbol used to initialize the chart (e.g. `"XAU_USD"`, `"EURUSD"`, `"BTCUSDT"`). Also used as the fallback when a selected symbol is unrecognized or unavailable. |
|
|
262
|
+
| `chartInterval` | `"1" \| "5" \| "15" \| "30" \| "60"` | Yes | Initial chart candle interval in minutes used when showing the chart. Defaults to `"15"`. |
|
|
263
|
+
| `theme` | `"light" \| "dark" \|` | Yes | Affects resolved theme tokens and chart overlays. |
|
|
266
264
|
|
|
267
265
|
### Widget key and remote theming
|
|
268
266
|
|
|
@@ -273,7 +271,7 @@ On mount, the component loads branding colors from ICCandle:
|
|
|
273
271
|
|
|
274
272
|
CSS custom properties (`--iccandle-primary`, `--iccandle-border`, `--iccandle-background`, `--iccandle-text`, etc.) are applied on the widget root so the event panel and chart overlays match your configured light/dark tokens.
|
|
275
273
|
|
|
276
|
-
**Theme prop vs. API tokens:** The `theme` prop (`"light"` | `"dark"`
|
|
274
|
+
**Theme prop vs. API tokens:** The `theme` prop (`"light"` | `"dark"`) chooses which variant of those tokens to apply.
|
|
277
275
|
|
|
278
276
|
### Behavior summary
|
|
279
277
|
|