@iccandle/reactjs-widget 0.2.1 → 0.2.3
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 +61 -72
- package/dist/widget-iccandle.cjs +17 -17
- package/dist/widget-iccandle.d.ts +7 -1
- package/dist/widget-iccandle.js +4825 -4896
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -8,11 +8,11 @@ The package ships ESM + CommonJS. Component styles are injected at runtime (no s
|
|
|
8
8
|
|
|
9
9
|
`WidgetIccandle` wraps your chart and renders:
|
|
10
10
|
|
|
11
|
-
| Surface
|
|
12
|
-
|
|
|
13
|
-
| **Scanner popup**
|
|
14
|
-
| **Results iframe** | Side-by-side panel hosting the ICCandle embed app (`embed-iccandle-app.iccandle.ai`) — search results, similar events, auth, billing.
|
|
15
|
-
| **Chart sync**
|
|
11
|
+
| Surface | Role |
|
|
12
|
+
| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
|
|
13
|
+
| **Scanner popup** | Draggable overlay over the chart. Select a bar window with TradingView’s Date Range tool, then run a scan or subscribe to pattern alerts. |
|
|
14
|
+
| **Results iframe** | Side-by-side panel hosting the ICCandle embed app (`embed-iccandle-app.iccandle.ai`) — search results, similar events, auth, billing. |
|
|
15
|
+
| **Chart sync** | Bidirectional `postMessage` bridge: pattern selection, chart replay, news marks, sign-in tokens, loading state. |
|
|
16
16
|
|
|
17
17
|
Typical flow:
|
|
18
18
|
|
|
@@ -61,13 +61,7 @@ function App() {
|
|
|
61
61
|
return (
|
|
62
62
|
<div style={{ height: "100vh", width: "100%" }}>
|
|
63
63
|
<WidgetIccandle chartWidget={chartWidget} theme="light" language="en">
|
|
64
|
-
{
|
|
65
|
-
<ChartHost
|
|
66
|
-
containerRef={containerRef}
|
|
67
|
-
chartRefs={chartRefs}
|
|
68
|
-
onReady={setChartWidget}
|
|
69
|
-
/>
|
|
70
|
-
)}
|
|
64
|
+
<ChartHost containerRef={containerRef} onReady={setChartWidget} />
|
|
71
65
|
</WidgetIccandle>
|
|
72
66
|
</div>
|
|
73
67
|
);
|
|
@@ -155,26 +149,26 @@ Wrap your datafeed with `withPlayChart` and register custom indicators via `getC
|
|
|
155
149
|
|
|
156
150
|
### Exports
|
|
157
151
|
|
|
158
|
-
| Name
|
|
159
|
-
|
|
|
160
|
-
| `WidgetIccandle`
|
|
161
|
-
| `WidgetIccandleProps`
|
|
162
|
-
| `WidgetIccandleChartRefs`
|
|
163
|
-
| `WidgetLanguage`
|
|
164
|
-
| `withPlayChart`
|
|
165
|
-
| `getCustomIndicators`
|
|
166
|
-
| `getGeneratedCandlesMaskColor` | Function
|
|
152
|
+
| Name | Kind | Description |
|
|
153
|
+
| ------------------------------ | --------- | ------------------------------------------------------ |
|
|
154
|
+
| `WidgetIccandle` | Component | Chart overlay + results iframe |
|
|
155
|
+
| `WidgetIccandleProps` | Type | Props for `WidgetIccandle` |
|
|
156
|
+
| `WidgetIccandleChartRefs` | Type | Refs for highlight bars / generated-candle studies |
|
|
157
|
+
| `WidgetLanguage` | Type | Supported locale codes |
|
|
158
|
+
| `withPlayChart` | Function | Wraps a TradingView datafeed for replay bar injection |
|
|
159
|
+
| `getCustomIndicators` | Function | Returns ICCandle custom indicators (generated candles) |
|
|
160
|
+
| `getGeneratedCandlesMaskColor` | Function | Theme-aware mask color for generated candles |
|
|
167
161
|
|
|
168
162
|
### `WidgetIccandle` props
|
|
169
163
|
|
|
170
|
-
| Prop
|
|
171
|
-
|
|
|
172
|
-
| `chartWidget`
|
|
173
|
-
| `children`
|
|
174
|
-
| `theme`
|
|
175
|
-
| `language`
|
|
176
|
-
| `onCloseResult` | `() => void`
|
|
177
|
-
| `iframeLoaded`
|
|
164
|
+
| Prop | Type | Required | Description |
|
|
165
|
+
| --------------- | ----------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------- |
|
|
166
|
+
| `chartWidget` | `IChartingLibraryWidget \| null` | Yes | Live TradingView widget (`null` until ready). |
|
|
167
|
+
| `children` | `ReactNode \| ((chartRefs) => ReactNode)` | Yes | Chart UI, or render prop receiving `WidgetIccandleChartRefs`. |
|
|
168
|
+
| `theme` | `"light" \| "dark" \| "system"` | No | Scanner chrome + iframe theme. `"system"` follows `prefers-color-scheme`. |
|
|
169
|
+
| `language` | `WidgetLanguage` | No | UI + iframe locale. One of: `en`, `zh`, `vi`, `th`, `ko`, `ja`, `mn`, `ru`. Defaults to `en`. |
|
|
170
|
+
| `onCloseResult` | `() => void` | No | Called when the embed posts `close-result`. |
|
|
171
|
+
| `iframeLoaded` | `boolean` | No | When `false`, disables scan / track actions until the results iframe is ready. Defaults to enabled behavior in the scanner. |
|
|
178
172
|
|
|
179
173
|
`IChartingLibraryWidget` must be imported from **your** Charting Library typings — this package does not re-export TradingView types.
|
|
180
174
|
|
|
@@ -200,44 +194,39 @@ custom_indicators_getter: () => getCustomIndicators("light"),
|
|
|
200
194
|
|
|
201
195
|
## Auth and storage
|
|
202
196
|
|
|
203
|
-
| Key
|
|
204
|
-
|
|
|
205
|
-
| `iccandle_token`
|
|
206
|
-
| `search-filter`
|
|
207
|
-
| `tv:selected-news-events` | JSON array of news events used as timescale marks.
|
|
208
|
-
| `tv:clicked-news-event`
|
|
209
|
-
| `tv:latest-symbol`
|
|
197
|
+
| Key | Purpose |
|
|
198
|
+
| ------------------------- | ------------------------------------------------------------------------------------------------------- |
|
|
199
|
+
| `iccandle_token` | Bearer token for scan cache, pattern tracker, and related APIs. Set by the embed via `sign-in-success`. |
|
|
200
|
+
| `search-filter` | Scanner advanced options (symbols, top_k, period, probability). |
|
|
201
|
+
| `tv:selected-news-events` | JSON array of news events used as timescale marks. |
|
|
202
|
+
| `tv:clicked-news-event` | Last clicked calendar event for mark highlighting. |
|
|
203
|
+
| `tv:latest-symbol` | Last chart symbol (used by the demo app / fallbacks). |
|
|
210
204
|
|
|
211
205
|
## postMessage bridge
|
|
212
206
|
|
|
213
207
|
Messages are accepted only from the results origin (`https://embed-iccandle-app.iccandle.ai`).
|
|
214
208
|
|
|
215
|
-
| Direction
|
|
216
|
-
|
|
|
217
|
-
| Embed → parent | `play-chart`
|
|
218
|
-
| Embed → parent | `loading`
|
|
219
|
-
| Embed → parent | `sign-in-success`
|
|
220
|
-
| Embed → parent | `close-result`
|
|
221
|
-
| Embed → parent | `pattern_selected` / `custom_pattern_selected`
|
|
222
|
-
| Embed → parent | `clear_pattern_selected` / `clear_custom_pattern_selected` | Remove pattern date range
|
|
223
|
-
| Embed → parent | `eventClicked`
|
|
224
|
-
| Embed → parent | `replay`
|
|
225
|
-
| Embed → parent | `back` / `back-to-similar-events`
|
|
226
|
-
| Embed → parent | `nav-click`
|
|
227
|
-
| Parent → embed | `parent-origin`
|
|
228
|
-
| Parent → embed | `payment-success`
|
|
209
|
+
| Direction | Type / action | Effect |
|
|
210
|
+
| -------------- | ---------------------------------------------------------- | ------------------------------------------------ |
|
|
211
|
+
| Embed → parent | `play-chart` | Inject / clear replay candles on the chart |
|
|
212
|
+
| Embed → parent | `loading` | Toggle scanner loading UI |
|
|
213
|
+
| Embed → parent | `sign-in-success` | Persist `iccandle_token` from `payload.id_token` |
|
|
214
|
+
| Embed → parent | `close-result` | Clears play state; calls `onCloseResult` |
|
|
215
|
+
| Embed → parent | `pattern_selected` / `custom_pattern_selected` | Draw date range for the compared pattern |
|
|
216
|
+
| Embed → parent | `clear_pattern_selected` / `clear_custom_pattern_selected` | Remove pattern date range |
|
|
217
|
+
| Embed → parent | `eventClicked` | Center chart, draw event line, show mark |
|
|
218
|
+
| Embed → parent | `replay` | Start / stop event replay candles |
|
|
219
|
+
| Embed → parent | `back` / `back-to-similar-events` | Clear event line / replay |
|
|
220
|
+
| Embed → parent | `nav-click` | Hide scanner on `/news`; restore otherwise |
|
|
221
|
+
| Parent → embed | `parent-origin` | Host origin for Stripe return |
|
|
222
|
+
| Parent → embed | `payment-success` | Refresh subscription after checkout |
|
|
229
223
|
|
|
230
224
|
## Optional: timescale marks (news/events)
|
|
231
225
|
|
|
232
226
|
If your datafeed implements `getTimescaleMarks`, surface stored events as marks:
|
|
233
227
|
|
|
234
228
|
```ts
|
|
235
|
-
getTimescaleMarks: async (
|
|
236
|
-
symbolInfo,
|
|
237
|
-
from,
|
|
238
|
-
to,
|
|
239
|
-
onResult,
|
|
240
|
-
) => {
|
|
229
|
+
getTimescaleMarks: async (symbolInfo, from, to, onResult) => {
|
|
241
230
|
const marks = [];
|
|
242
231
|
try {
|
|
243
232
|
const allNewsEvents = JSON.parse(
|
|
@@ -281,27 +270,27 @@ Light and dark defaults live in the bundled stylesheet. The `theme` prop toggles
|
|
|
281
270
|
|
|
282
271
|
## Development (this repo)
|
|
283
272
|
|
|
284
|
-
| Script
|
|
285
|
-
|
|
|
286
|
-
| Dev demo
|
|
287
|
-
| Library build | `pnpm run build`
|
|
288
|
-
| Web build
|
|
289
|
-
| Deploy web
|
|
290
|
-
| Lint
|
|
291
|
-
| Preview web
|
|
273
|
+
| Script | Command | Purpose |
|
|
274
|
+
| ------------- | --------------------- | ----------------------------------------------- |
|
|
275
|
+
| Dev demo | `pnpm run dev` | Vite app with local charting library |
|
|
276
|
+
| Library build | `pnpm run build` | Emits `dist/` (ESM, CJS, injected CSS, `.d.ts`) |
|
|
277
|
+
| Web build | `pnpm run build:web` | SPA build to `dist-web/` |
|
|
278
|
+
| Deploy web | `pnpm run deploy:web` | Build + Vercel production deploy |
|
|
279
|
+
| Lint | `pnpm run lint` | ESLint |
|
|
280
|
+
| Preview web | `pnpm run preview` | Preview the web build |
|
|
292
281
|
|
|
293
282
|
`prepublishOnly` runs `build` before npm publish.
|
|
294
283
|
|
|
295
284
|
## Troubleshooting
|
|
296
285
|
|
|
297
|
-
| Issue
|
|
298
|
-
|
|
|
299
|
-
| Chart stays blank
|
|
300
|
-
| `chartWidget` is always `null` | Call `setChartWidget` after create (or inside `onChartReady` if required).
|
|
301
|
-
| Scan fails / 401
|
|
302
|
-
| Date Range tool missing
|
|
303
|
-
| Replay bars do not appear
|
|
304
|
-
| Scanner actions disabled
|
|
286
|
+
| Issue | What to check |
|
|
287
|
+
| ------------------------------ | ----------------------------------------------------------------------------------------------------------- |
|
|
288
|
+
| Chart stays blank | `library_path` must serve TradingView static files; container must be mounted before `new widget(...)`. |
|
|
289
|
+
| `chartWidget` is always `null` | Call `setChartWidget` after create (or inside `onChartReady` if required). |
|
|
290
|
+
| Scan fails / 401 | Ensure the user signed in via the results iframe so `iccandle_token` is set. |
|
|
291
|
+
| Date Range tool missing | Enable it in `drawings_access` (see Quick start). |
|
|
292
|
+
| Replay bars do not appear | Wrap the datafeed with `withPlayChart` and register `getCustomIndicators`. |
|
|
293
|
+
| Scanner actions disabled | Pass `iframeLoaded={true}` once the results iframe has loaded, or omit the prop if you do not gate on load. |
|
|
305
294
|
|
|
306
295
|
## License
|
|
307
296
|
|