@wick-charts/react 0.1.0 → 0.1.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/dist/index.cjs +1 -1
- package/dist/index.d.ts +545 -123
- package/dist/index.js +96 -102
- package/package.json +2 -2
package/dist/index.d.ts
CHANGED
|
@@ -1,78 +1,40 @@
|
|
|
1
|
-
import { andromeda } from '@wick-charts/core';
|
|
2
|
-
import { AxisBound } from '@wick-charts/core';
|
|
3
|
-
import { AxisConfig } from '@wick-charts/core';
|
|
4
|
-
import { ayuMirage } from '@wick-charts/core';
|
|
5
|
-
import { BarSeriesOptions } from '@wick-charts/core';
|
|
6
|
-
import { BarStacking } from '@wick-charts/core';
|
|
7
|
-
import { buildTheme } from '@wick-charts/core';
|
|
8
|
-
import { CandlestickSeriesOptions } from '@wick-charts/core';
|
|
9
|
-
import { catppuccin } from '@wick-charts/core';
|
|
10
|
-
import { ChartInstance } from '@wick-charts/core';
|
|
11
|
-
import { ChartLayout } from '@wick-charts/core';
|
|
12
|
-
import { ChartOptions } from '@wick-charts/core';
|
|
13
|
-
import { ChartTheme } from '@wick-charts/core';
|
|
14
|
-
import { createTheme } from '@wick-charts/core';
|
|
15
|
-
import { CrosshairPosition } from '@wick-charts/core';
|
|
16
1
|
import { CSSProperties } from 'react';
|
|
17
|
-
import { darkTheme } from '@wick-charts/core';
|
|
18
|
-
import { detectInterval } from '@wick-charts/core';
|
|
19
|
-
import { dracula } from '@wick-charts/core';
|
|
20
|
-
import { formatDate } from '@wick-charts/core';
|
|
21
|
-
import { formatTime } from '@wick-charts/core';
|
|
22
|
-
import { githubLight } from '@wick-charts/core';
|
|
23
|
-
import { gruvbox } from '@wick-charts/core';
|
|
24
|
-
import { handwritten } from '@wick-charts/core';
|
|
25
|
-
import { highContrast } from '@wick-charts/core';
|
|
26
2
|
import { JSX as JSX_2 } from 'react/jsx-runtime';
|
|
27
|
-
import { lavenderMist } from '@wick-charts/core';
|
|
28
|
-
import { lightPink } from '@wick-charts/core';
|
|
29
|
-
import { lightTheme } from '@wick-charts/core';
|
|
30
|
-
import { LineData } from '@wick-charts/core';
|
|
31
|
-
import { LineSeriesOptions } from '@wick-charts/core';
|
|
32
|
-
import { materialPalenight } from '@wick-charts/core';
|
|
33
|
-
import { minimalLight } from '@wick-charts/core';
|
|
34
|
-
import { mintBreeze } from '@wick-charts/core';
|
|
35
|
-
import { monokaiPro } from '@wick-charts/core';
|
|
36
|
-
import { nightOwl } from '@wick-charts/core';
|
|
37
|
-
import { normalizeTime } from '@wick-charts/core';
|
|
38
|
-
import { OHLCData } from '@wick-charts/core';
|
|
39
|
-
import { OHLCInput } from '@wick-charts/core';
|
|
40
|
-
import { oneDarkPro } from '@wick-charts/core';
|
|
41
|
-
import { panda } from '@wick-charts/core';
|
|
42
|
-
import { peachCream } from '@wick-charts/core';
|
|
43
|
-
import { PieSeriesOptions } from '@wick-charts/core';
|
|
44
|
-
import { PieSliceData } from '@wick-charts/core';
|
|
45
3
|
import { Provider } from 'react';
|
|
46
|
-
import { quietLight } from '@wick-charts/core';
|
|
47
4
|
import { ReactNode } from 'react';
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
export
|
|
68
|
-
|
|
69
|
-
export { AxisConfig }
|
|
70
|
-
|
|
71
|
-
export { ayuMirage }
|
|
5
|
+
|
|
6
|
+
export declare const andromeda: ThemePreset;
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Defines a bound for the Y axis.
|
|
10
|
+
*
|
|
11
|
+
* - `"auto"` — fully automatic (default)
|
|
12
|
+
* - `number` — static value, e.g. `0` or `100`
|
|
13
|
+
* - `string` — percentage offset from the auto value, e.g. `"+10%"`, `"-5%"`
|
|
14
|
+
* - `(values: number[]) => number` — custom function receiving all visible values
|
|
15
|
+
*/
|
|
16
|
+
export declare type AxisBound = 'auto' | number | string | ((values: number[]) => number);
|
|
17
|
+
|
|
18
|
+
/** Grouped axis configuration for both axes. */
|
|
19
|
+
export declare interface AxisConfig {
|
|
20
|
+
y?: YAxisConfig;
|
|
21
|
+
x?: XAxisConfig;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export declare const ayuMirage: ThemePreset;
|
|
72
25
|
|
|
73
26
|
export declare function BarSeries({ data, options, label, id: idProp, onSeriesId }: BarSeriesProps): null;
|
|
74
27
|
|
|
75
|
-
|
|
28
|
+
/** Visual options for a bar series. */
|
|
29
|
+
export declare interface BarSeriesOptions {
|
|
30
|
+
/** Display label shown in the tooltip (e.g. "Volume"). */
|
|
31
|
+
label?: string;
|
|
32
|
+
/** One color per layer. */
|
|
33
|
+
colors: string[];
|
|
34
|
+
barWidthRatio: number;
|
|
35
|
+
/** Stacking mode. Default: 'off'. */
|
|
36
|
+
stacking: StackingMode;
|
|
37
|
+
}
|
|
76
38
|
|
|
77
39
|
declare interface BarSeriesProps {
|
|
78
40
|
/** Array of datasets — one per layer. A single-layer bar chart uses `[data]`. */
|
|
@@ -86,16 +48,30 @@ declare interface BarSeriesProps {
|
|
|
86
48
|
onSeriesId?: (id: string) => void;
|
|
87
49
|
}
|
|
88
50
|
|
|
89
|
-
|
|
51
|
+
/** @deprecated Use {@link StackingMode} instead. */
|
|
52
|
+
export declare type BarStacking = StackingMode;
|
|
90
53
|
|
|
91
|
-
|
|
54
|
+
/** Lookup a theme by name (defaults to "One Dark Pro") */
|
|
55
|
+
export declare function buildTheme(themeName: string): ChartTheme;
|
|
92
56
|
|
|
93
57
|
export declare function CandlestickSeries({ data, options, id: idProp, onSeriesId }: CandlestickSeriesProps): null;
|
|
94
58
|
|
|
95
|
-
|
|
59
|
+
/** Visual options for a candlestick series. */
|
|
60
|
+
export declare interface CandlestickSeriesOptions {
|
|
61
|
+
/** Display label shown in the tooltip. */
|
|
62
|
+
label?: string;
|
|
63
|
+
upColor: string;
|
|
64
|
+
downColor: string;
|
|
65
|
+
wickUpColor: string;
|
|
66
|
+
wickDownColor: string;
|
|
67
|
+
/** Width of candle body as a fraction of the available bar slot (0-1). */
|
|
68
|
+
bodyWidthRatio: number;
|
|
69
|
+
/** Apply a subtle vertical gradient to candle bodies. Default: true. */
|
|
70
|
+
candleGradient?: boolean;
|
|
71
|
+
}
|
|
96
72
|
|
|
97
73
|
declare interface CandlestickSeriesProps {
|
|
98
|
-
data:
|
|
74
|
+
data: OHLCInput[];
|
|
99
75
|
options?: Partial<CandlestickSeriesOptions>;
|
|
100
76
|
/** Stable series ID. Prefer this over `onSeriesId` — same value across remounts. */
|
|
101
77
|
id?: string;
|
|
@@ -103,7 +79,7 @@ declare interface CandlestickSeriesProps {
|
|
|
103
79
|
onSeriesId?: (id: string) => void;
|
|
104
80
|
}
|
|
105
81
|
|
|
106
|
-
export
|
|
82
|
+
export declare const catppuccin: ThemePreset;
|
|
107
83
|
|
|
108
84
|
/**
|
|
109
85
|
* Top-level React wrapper that creates a {@link ChartInstance} and provides it to children via context.
|
|
@@ -145,39 +121,302 @@ declare interface ChartContainerProps {
|
|
|
145
121
|
className?: string;
|
|
146
122
|
}
|
|
147
123
|
|
|
148
|
-
|
|
124
|
+
/** Events emitted by {@link ChartInstance}. */
|
|
125
|
+
declare interface ChartEvents {
|
|
126
|
+
crosshairMove: (pos: CrosshairPosition | null) => void;
|
|
127
|
+
viewportChange: () => void;
|
|
128
|
+
dataUpdate: () => void;
|
|
129
|
+
seriesChange: () => void;
|
|
130
|
+
}
|
|
149
131
|
|
|
150
|
-
|
|
132
|
+
/**
|
|
133
|
+
* Core chart controller. Manages series, viewport, scales, and rendering.
|
|
134
|
+
* Create one per chart container and call {@link destroy} on unmount.
|
|
135
|
+
*/
|
|
136
|
+
export declare class ChartInstance extends EventEmitter<ChartEvents> {
|
|
137
|
+
#private;
|
|
138
|
+
/** Maps time values to horizontal pixel coordinates. */
|
|
139
|
+
readonly timeScale: TimeScale;
|
|
140
|
+
/** Maps price/value to vertical pixel coordinates. */
|
|
141
|
+
readonly yScale: YScale;
|
|
142
|
+
get yAxisWidth(): number;
|
|
143
|
+
get xAxisHeight(): number;
|
|
144
|
+
constructor(container: HTMLElement, options?: ChartOptions);
|
|
145
|
+
/** Add a candlestick (OHLC) series and return its unique ID. */
|
|
146
|
+
addCandlestickSeries(options?: Partial<CandlestickSeriesOptions & {
|
|
147
|
+
id?: string;
|
|
148
|
+
}>): string;
|
|
149
|
+
/** Add a line series and return its unique ID. */
|
|
150
|
+
addLineSeries(options?: Partial<LineSeriesOptions & {
|
|
151
|
+
layers?: number;
|
|
152
|
+
id?: string;
|
|
153
|
+
}>): string;
|
|
154
|
+
/** @deprecated Pass options as first argument: `addLineSeries({ layers: N, ...options })` */
|
|
155
|
+
addLineSeries(layerCount: number, options?: Partial<LineSeriesOptions>): string;
|
|
156
|
+
/** Set data for a specific layer within a line series. */
|
|
157
|
+
setLineLayerData(id: string, layerIndex: number, data: TimePoint[]): void;
|
|
158
|
+
/** Add a bar series and return its unique ID. */
|
|
159
|
+
addBarSeries(options?: Partial<BarSeriesOptions & {
|
|
160
|
+
layers?: number;
|
|
161
|
+
id?: string;
|
|
162
|
+
}>): string;
|
|
163
|
+
/** @deprecated Pass options as first argument: `addBarSeries({ layers: N, ...options })` */
|
|
164
|
+
addBarSeries(layerCount: number, options?: Partial<BarSeriesOptions>): string;
|
|
165
|
+
/** Set data for a specific layer within a bar series. */
|
|
166
|
+
setBarLayerData(id: string, layerIndex: number, data: TimePoint[]): void;
|
|
167
|
+
/** Add a pie/donut series. Set `innerRadiusRatio > 0` for donut. */
|
|
168
|
+
addPieSeries(options?: Partial<PieSeriesOptions & {
|
|
169
|
+
id?: string;
|
|
170
|
+
}>): string;
|
|
171
|
+
/** Set data for a pie/donut series. */
|
|
172
|
+
setPieData(id: string, data: PieSliceData[]): void;
|
|
173
|
+
/** Remove a series by ID and clean up its resources. */
|
|
174
|
+
removeSeries(id: string): void;
|
|
175
|
+
/** Replace all data for a series (batch load). Accepts `Date` objects for time fields. */
|
|
176
|
+
setSeriesData(id: string, data: OHLCInput[] | TimePointInput[]): void;
|
|
177
|
+
/** Append a new data point to the end of a series (real-time tick). */
|
|
178
|
+
appendData(id: string, point: OHLCInput | TimePointInput): void;
|
|
179
|
+
/** Update the last data point of a series in place (e.g. live candle update). */
|
|
180
|
+
updateData(id: string, point: OHLCInput | TimePointInput): void;
|
|
181
|
+
/** Update visual options (color, width, etc.) for an existing series. */
|
|
182
|
+
updateSeriesOptions(id: string, options: Partial<CandlestickSeriesOptions> | Partial<LineSeriesOptions> | Partial<BarSeriesOptions> | Partial<PieSeriesOptions>): void;
|
|
183
|
+
/**
|
|
184
|
+
* Batch multiple updates: suppress recomputes until `fn` returns.
|
|
185
|
+
* Equivalent to `beginUpdate()` / `endUpdate()` but safer (always calls endUpdate even on throw).
|
|
186
|
+
*/
|
|
187
|
+
batch(fn: () => void): void;
|
|
188
|
+
/** @deprecated Use {@link batch} instead. */
|
|
189
|
+
beginUpdate(): void;
|
|
190
|
+
/** @deprecated Use {@link batch} instead. */
|
|
191
|
+
endUpdate(): void;
|
|
192
|
+
/** Show or hide a series. Hidden series are not rendered and excluded from Y-range. */
|
|
193
|
+
setSeriesVisible(seriesId: string, visible: boolean): void;
|
|
194
|
+
isSeriesVisible(seriesId: string): boolean;
|
|
195
|
+
/** Show or hide a specific layer within a multi-layer series. */
|
|
196
|
+
setLayerVisible(seriesId: string, layerIndex: number, visible: boolean): void;
|
|
197
|
+
isLayerVisible(seriesId: string, layerIndex: number): boolean;
|
|
198
|
+
/** Auto-fit the viewport to show all data across every series. */
|
|
199
|
+
fitContent(): void;
|
|
200
|
+
getVisibleRange(): VisibleRange;
|
|
201
|
+
getYRange(): YRange;
|
|
202
|
+
getCrosshairPosition(): CrosshairPosition | null;
|
|
203
|
+
/** Get the last visible value and whether the absolute last point is on screen. */
|
|
204
|
+
getLastValue(seriesId: string): {
|
|
205
|
+
value: number;
|
|
206
|
+
isLive: boolean;
|
|
207
|
+
} | null;
|
|
208
|
+
/** Get the second-to-last value, useful for computing change. */
|
|
209
|
+
getPreviousClose(seriesId: string): number | null;
|
|
210
|
+
getLastData(seriesId: string): OHLCData | TimePoint | null;
|
|
211
|
+
/** Find the data point closest to the given timestamp within one data interval. */
|
|
212
|
+
getDataAtTime(seriesId: string, time: number): OHLCData | TimePoint | null;
|
|
213
|
+
/** Get all layers' data at a given time for multi-layer series (Bar/Line with stacking). */
|
|
214
|
+
getLayerSnapshots(seriesId: string, time: number): {
|
|
215
|
+
value: number;
|
|
216
|
+
color: string;
|
|
217
|
+
}[] | null;
|
|
218
|
+
getSeriesIds(): string[];
|
|
219
|
+
/** Get the primary display color for a series. */
|
|
220
|
+
getSeriesColor(seriesId: string): string | null;
|
|
221
|
+
getSeriesLabel(seriesId: string): string | undefined;
|
|
222
|
+
/** Get per-layer colors for a series. Returns null for non-bar/line series (e.g. candlestick, pie). */
|
|
223
|
+
getSeriesLayers(seriesId: string): {
|
|
224
|
+
color: string;
|
|
225
|
+
}[] | null;
|
|
226
|
+
/** Get all pie slices with computed colors and percentages. Returns null for non-pie series. */
|
|
227
|
+
getPieSlices(seriesId: string): {
|
|
228
|
+
label: string;
|
|
229
|
+
value: number;
|
|
230
|
+
percent: number;
|
|
231
|
+
color: string;
|
|
232
|
+
}[] | null;
|
|
233
|
+
/** Get the hovered pie slice info (label, value, percentage, color). Returns null if no hover. */
|
|
234
|
+
getPieHoverInfo(seriesId: string): {
|
|
235
|
+
label: string;
|
|
236
|
+
value: number;
|
|
237
|
+
percent: number;
|
|
238
|
+
color: string;
|
|
239
|
+
} | null;
|
|
240
|
+
/** Apply a new theme and update candlestick series colors. Line series keep their individual colors. */
|
|
241
|
+
setTheme(theme: ChartTheme): void;
|
|
242
|
+
getTheme(): ChartTheme;
|
|
243
|
+
/** Update axis configuration and re-render. */
|
|
244
|
+
setAxis(config: AxisConfig): void;
|
|
245
|
+
getMediaSize(): Size;
|
|
246
|
+
/** Returns layout metrics for the chart area, Y axis, and time axis. */
|
|
247
|
+
getLayout(): ChartLayout;
|
|
248
|
+
getDataInterval(): number;
|
|
249
|
+
/** Update viewport padding at runtime. Refits the visible range to current data bounds. */
|
|
250
|
+
setPadding(padding: ChartOptions['padding']): void;
|
|
251
|
+
/** Show or hide the background grid. Takes effect on the next render frame. */
|
|
252
|
+
setGrid(grid: boolean): void;
|
|
253
|
+
/** Notify chart that a YLabel is present (affects right padding). */
|
|
254
|
+
setYLabel(has: boolean): void;
|
|
255
|
+
private updatePieHover;
|
|
256
|
+
private updateViewportPadding;
|
|
257
|
+
/** Tear down the chart: cancel animations, remove listeners, and detach the canvas. */
|
|
258
|
+
destroy(): void;
|
|
259
|
+
/** Compute the earliest and latest timestamps across all series. */
|
|
260
|
+
private getDataBounds;
|
|
261
|
+
private onDataChanged;
|
|
262
|
+
/** Check whether the last data point of any series falls within the visible time range. */
|
|
263
|
+
private isLastPointVisible;
|
|
264
|
+
private updateDataInterval;
|
|
265
|
+
private updateYRange;
|
|
266
|
+
/** Resolve an {@link AxisBound} to a concrete numeric value. */
|
|
267
|
+
private resolveBound;
|
|
268
|
+
/**
|
|
269
|
+
* Lightweight scale sync: updates timeScale/yScale from current viewport state
|
|
270
|
+
* without advancing the Y smoothing animation. Called from the viewport 'change'
|
|
271
|
+
* handler so DOM axis components always read fresh coordinates on re-render.
|
|
272
|
+
*/
|
|
273
|
+
private syncScales;
|
|
274
|
+
private updateScales;
|
|
275
|
+
/** Expensive: background, grid, all series. Only on data/viewport/resize change. */
|
|
276
|
+
private renderMain;
|
|
277
|
+
/** Cheap overlay: crosshair, nearest-point dots, pulse animation. */
|
|
278
|
+
private renderOverlay;
|
|
279
|
+
}
|
|
151
280
|
|
|
152
|
-
|
|
281
|
+
/** Layout metrics describing the chart area, Y axis, and time axis sizes. */
|
|
282
|
+
export declare interface ChartLayout {
|
|
283
|
+
chartArea: Rect;
|
|
284
|
+
yAxisWidth: number;
|
|
285
|
+
xAxisHeight: number;
|
|
286
|
+
}
|
|
153
287
|
|
|
154
|
-
|
|
288
|
+
/** Options passed when creating a new {@link ChartInstance}. */
|
|
289
|
+
export declare interface ChartOptions {
|
|
290
|
+
theme?: ChartTheme;
|
|
291
|
+
axis?: AxisConfig;
|
|
292
|
+
/**
|
|
293
|
+
* Viewport padding. `top`/`bottom` are in pixels. `left`/`right` accept either pixels (`50`)
|
|
294
|
+
* or data intervals (`{ intervals: 3 }`). Defaults: `{ top: 20, bottom: 20, right: { intervals: 3 }, left: { intervals: 0 } }`.
|
|
295
|
+
*/
|
|
296
|
+
padding?: {
|
|
297
|
+
top?: number;
|
|
298
|
+
bottom?: number;
|
|
299
|
+
right?: number | {
|
|
300
|
+
intervals: number;
|
|
301
|
+
};
|
|
302
|
+
left?: number | {
|
|
303
|
+
intervals: number;
|
|
304
|
+
};
|
|
305
|
+
};
|
|
306
|
+
/** Enable zoom, pan, and crosshair interactions. Defaults to true. */
|
|
307
|
+
interactive?: boolean;
|
|
308
|
+
/** Show the background grid. Defaults to true. */
|
|
309
|
+
grid?: boolean;
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
/**
|
|
313
|
+
* Complete visual theme for a chart instance.
|
|
314
|
+
* Controls colors for every visual element: background, series, axes, crosshair, tooltip, etc.
|
|
315
|
+
*/
|
|
316
|
+
export declare interface ChartTheme {
|
|
317
|
+
/** Page/container background */
|
|
318
|
+
background: string;
|
|
319
|
+
/** Chart area gradient [top, bottom] — subtle vignette for depth */
|
|
320
|
+
chartGradient: [string, string];
|
|
321
|
+
typography: Typography;
|
|
322
|
+
/** Grid line appearance in the chart area. */
|
|
323
|
+
grid: {
|
|
324
|
+
color: string;
|
|
325
|
+
style: 'solid' | 'dashed' | 'dotted';
|
|
326
|
+
};
|
|
327
|
+
/** OHLC candlestick body and wick colors. */
|
|
328
|
+
candlestick: {
|
|
329
|
+
upColor: string;
|
|
330
|
+
downColor: string;
|
|
331
|
+
wickUpColor: string;
|
|
332
|
+
wickDownColor: string;
|
|
333
|
+
};
|
|
334
|
+
/** Default line series appearance including area gradient fill. */
|
|
335
|
+
line: {
|
|
336
|
+
color: string;
|
|
337
|
+
width: number;
|
|
338
|
+
areaTopColor: string;
|
|
339
|
+
areaBottomColor: string;
|
|
340
|
+
};
|
|
341
|
+
/** Color palette for multi-series charts (stacked bars, overlays). */
|
|
342
|
+
seriesColors: string[];
|
|
343
|
+
/** Bollinger band / envelope fill colors. */
|
|
344
|
+
bands: {
|
|
345
|
+
upper: string;
|
|
346
|
+
lower: string;
|
|
347
|
+
};
|
|
348
|
+
/** Crosshair line and axis label styling. */
|
|
349
|
+
crosshair: {
|
|
350
|
+
color: string;
|
|
351
|
+
labelBackground: string;
|
|
352
|
+
labelTextColor: string;
|
|
353
|
+
};
|
|
354
|
+
/** Axis tick label styling. */
|
|
355
|
+
axis: {
|
|
356
|
+
textColor: string;
|
|
357
|
+
};
|
|
358
|
+
/** Floating label shown at the current value level on the Y axis. */
|
|
359
|
+
yLabel: {
|
|
360
|
+
upBackground: string;
|
|
361
|
+
downBackground: string;
|
|
362
|
+
neutralBackground: string;
|
|
363
|
+
textColor: string;
|
|
364
|
+
};
|
|
365
|
+
/** Hover tooltip styling. */
|
|
366
|
+
tooltip: {
|
|
367
|
+
background: string;
|
|
368
|
+
textColor: string;
|
|
369
|
+
borderColor: string;
|
|
370
|
+
};
|
|
371
|
+
}
|
|
155
372
|
|
|
156
|
-
|
|
373
|
+
/**
|
|
374
|
+
* Build a complete {@link ThemePreset} from a partial config.
|
|
375
|
+
* Only `background` is required — everything else is derived from it.
|
|
376
|
+
*/
|
|
377
|
+
export declare function createTheme(config: ThemeConfig): ThemePreset;
|
|
157
378
|
|
|
158
379
|
export declare function Crosshair(): JSX_2.Element | null;
|
|
159
380
|
|
|
160
|
-
|
|
381
|
+
/** Crosshair position in both pixel and data space. */
|
|
382
|
+
export declare interface CrosshairPosition {
|
|
383
|
+
/** X position in CSS pixels relative to the chart container. */
|
|
384
|
+
mediaX: number;
|
|
385
|
+
/** Y position in CSS pixels relative to the chart container. */
|
|
386
|
+
mediaY: number;
|
|
387
|
+
/** Snapped time value (timestamp in milliseconds) under the crosshair. */
|
|
388
|
+
time: number;
|
|
389
|
+
/** Y (value) under the crosshair. */
|
|
390
|
+
y: number;
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
export declare const darkTheme: ChartTheme;
|
|
161
394
|
|
|
162
|
-
export
|
|
395
|
+
export declare function detectInterval(times: number[]): number;
|
|
163
396
|
|
|
164
|
-
export
|
|
397
|
+
export declare const dracula: ThemePreset;
|
|
165
398
|
|
|
166
|
-
|
|
399
|
+
declare class EventEmitter<Events = Record<string, Listener>> {
|
|
400
|
+
private listeners;
|
|
401
|
+
on<K extends string & keyof Events>(event: K, listener: Events[K] & Listener): void;
|
|
402
|
+
off<K extends string & keyof Events>(event: K, listener: Events[K] & Listener): void;
|
|
403
|
+
protected emit<K extends string & keyof Events>(event: K, ...args: Events[K] extends (...a: infer A) => any ? A : never): void;
|
|
404
|
+
removeAllListeners(): void;
|
|
405
|
+
}
|
|
167
406
|
|
|
168
|
-
export
|
|
407
|
+
export declare function formatDate(timestamp: number): string;
|
|
169
408
|
|
|
170
|
-
export
|
|
409
|
+
export declare function formatTime(timestamp: number, interval: number): string;
|
|
171
410
|
|
|
172
|
-
export
|
|
411
|
+
export declare const githubLight: ThemePreset;
|
|
173
412
|
|
|
174
|
-
export
|
|
413
|
+
export declare const gruvbox: ThemePreset;
|
|
175
414
|
|
|
176
|
-
export
|
|
415
|
+
export declare const handwritten: ThemePreset;
|
|
177
416
|
|
|
178
|
-
export
|
|
417
|
+
export declare const highContrast: ThemePreset;
|
|
179
418
|
|
|
180
|
-
export
|
|
419
|
+
export declare const lavenderMist: ThemePreset;
|
|
181
420
|
|
|
182
421
|
export declare function Legend({ items, position, mode }: LegendProps): JSX_2.Element | null;
|
|
183
422
|
|
|
@@ -199,15 +438,29 @@ export declare interface LegendProps {
|
|
|
199
438
|
mode?: 'toggle' | 'solo';
|
|
200
439
|
}
|
|
201
440
|
|
|
202
|
-
export
|
|
441
|
+
export declare const lightPink: ThemePreset;
|
|
203
442
|
|
|
204
|
-
export
|
|
443
|
+
export declare const lightTheme: ChartTheme;
|
|
205
444
|
|
|
206
|
-
|
|
445
|
+
/** @deprecated Use {@link TimePoint} instead. */
|
|
446
|
+
export declare type LineData = TimePoint;
|
|
207
447
|
|
|
208
448
|
export declare function LineSeries({ data, options, label, id: idProp, onSeriesId }: LineSeriesProps): null;
|
|
209
449
|
|
|
210
|
-
|
|
450
|
+
/** Visual options for a line series. */
|
|
451
|
+
export declare interface LineSeriesOptions {
|
|
452
|
+
/** Display label shown in the tooltip (e.g. "BTC", "Revenue"). */
|
|
453
|
+
label?: string;
|
|
454
|
+
/** One color per layer. */
|
|
455
|
+
colors: string[];
|
|
456
|
+
lineWidth: number;
|
|
457
|
+
/** Whether to render a gradient area fill below the line (or between stacked layers). */
|
|
458
|
+
areaFill: boolean;
|
|
459
|
+
/** Whether to show an animated pulsing dot at the last data point. */
|
|
460
|
+
pulse: boolean;
|
|
461
|
+
/** Stacking mode. Default: 'off'. */
|
|
462
|
+
stacking: StackingMode;
|
|
463
|
+
}
|
|
211
464
|
|
|
212
465
|
declare interface LineSeriesProps {
|
|
213
466
|
/** Array of datasets — one per layer. A single line uses `[data]`. */
|
|
@@ -220,17 +473,20 @@ declare interface LineSeriesProps {
|
|
|
220
473
|
onSeriesId?: (id: string) => void;
|
|
221
474
|
}
|
|
222
475
|
|
|
223
|
-
|
|
476
|
+
declare type Listener = (...args: any[]) => void;
|
|
477
|
+
|
|
478
|
+
export declare const materialPalenight: ThemePreset;
|
|
224
479
|
|
|
225
|
-
export
|
|
480
|
+
export declare const minimalLight: ThemePreset;
|
|
226
481
|
|
|
227
|
-
export
|
|
482
|
+
export declare const mintBreeze: ThemePreset;
|
|
228
483
|
|
|
229
|
-
export
|
|
484
|
+
export declare const monokaiPro: ThemePreset;
|
|
230
485
|
|
|
231
|
-
export
|
|
486
|
+
export declare const nightOwl: ThemePreset;
|
|
232
487
|
|
|
233
|
-
|
|
488
|
+
/** Convert a {@link TimeValue} (number ms or Date) to a millisecond timestamp. */
|
|
489
|
+
export declare function normalizeTime(t: TimeValue): number;
|
|
234
490
|
|
|
235
491
|
export declare function NumberFlow({ value, format, locale, spinDuration, className, style }: NumberFlowProps): JSX_2.Element;
|
|
236
492
|
|
|
@@ -243,15 +499,26 @@ declare interface NumberFlowProps {
|
|
|
243
499
|
style?: CSSProperties;
|
|
244
500
|
}
|
|
245
501
|
|
|
246
|
-
|
|
502
|
+
/** A single OHLC(V) candlestick data point. Time is a timestamp in milliseconds. */
|
|
503
|
+
export declare interface OHLCData {
|
|
504
|
+
time: number;
|
|
505
|
+
open: number;
|
|
506
|
+
high: number;
|
|
507
|
+
low: number;
|
|
508
|
+
close: number;
|
|
509
|
+
volume?: number;
|
|
510
|
+
}
|
|
247
511
|
|
|
248
|
-
|
|
512
|
+
/** {@link OHLCData} that also accepts `Date` for the time field. */
|
|
513
|
+
export declare type OHLCInput = Omit<OHLCData, 'time'> & {
|
|
514
|
+
time: TimeValue;
|
|
515
|
+
};
|
|
249
516
|
|
|
250
|
-
export
|
|
517
|
+
export declare const oneDarkPro: ThemePreset;
|
|
251
518
|
|
|
252
|
-
export
|
|
519
|
+
export declare const panda: ThemePreset;
|
|
253
520
|
|
|
254
|
-
export
|
|
521
|
+
export declare const peachCream: ThemePreset;
|
|
255
522
|
|
|
256
523
|
export declare function PieLegend({ seriesId, format }: PieLegendProps): JSX_2.Element | null;
|
|
257
524
|
|
|
@@ -266,7 +533,21 @@ export declare interface PieLegendProps {
|
|
|
266
533
|
/** Pie chart series. Set `options.innerRadiusRatio` > 0 for donut. */
|
|
267
534
|
export declare function PieSeries({ data, options, id: idProp, onSeriesId }: PieSeriesProps): null;
|
|
268
535
|
|
|
269
|
-
|
|
536
|
+
/** Visual options for a pie/donut series. `innerRadiusRatio > 0` makes it a donut. */
|
|
537
|
+
export declare interface PieSeriesOptions {
|
|
538
|
+
/** Palette fallback (defaults to theme.seriesColors). */
|
|
539
|
+
colors?: string[];
|
|
540
|
+
/** 0 = pie, 0.6 = donut. Fraction of outer radius used as inner hole. */
|
|
541
|
+
innerRadiusRatio: number;
|
|
542
|
+
/** Gap between slices in radians (default 0.02). */
|
|
543
|
+
padAngle: number;
|
|
544
|
+
/** Slice border color (default transparent). */
|
|
545
|
+
strokeColor: string;
|
|
546
|
+
/** Slice border width (default 0). */
|
|
547
|
+
strokeWidth: number;
|
|
548
|
+
/** Display label shown in tooltip. */
|
|
549
|
+
label?: string;
|
|
550
|
+
}
|
|
270
551
|
|
|
271
552
|
declare interface PieSeriesProps {
|
|
272
553
|
data: PieSliceData[];
|
|
@@ -277,7 +558,14 @@ declare interface PieSeriesProps {
|
|
|
277
558
|
onSeriesId?: (id: string) => void;
|
|
278
559
|
}
|
|
279
560
|
|
|
280
|
-
|
|
561
|
+
/** Optional min/max constraints for the Y axis. Omit a side for automatic scaling. */
|
|
562
|
+
/** A single slice in a pie/donut chart. */
|
|
563
|
+
export declare interface PieSliceData {
|
|
564
|
+
label: string;
|
|
565
|
+
value: number;
|
|
566
|
+
/** Override color for this slice. Falls back to seriesColors palette. */
|
|
567
|
+
color?: string;
|
|
568
|
+
}
|
|
281
569
|
|
|
282
570
|
/** Tooltip for pie/donut charts. Shows hovered slice label, value, and percentage. */
|
|
283
571
|
export declare function PieTooltip({ seriesId }: PieTooltipProps): JSX_2.Element | null;
|
|
@@ -286,15 +574,30 @@ declare interface PieTooltipProps {
|
|
|
286
574
|
seriesId: string;
|
|
287
575
|
}
|
|
288
576
|
|
|
289
|
-
export
|
|
577
|
+
export declare const quietLight: ThemePreset;
|
|
290
578
|
|
|
291
|
-
|
|
579
|
+
/** Axis-aligned rectangle in media (CSS) coordinates. */
|
|
580
|
+
declare interface Rect {
|
|
581
|
+
x: number;
|
|
582
|
+
y: number;
|
|
583
|
+
width: number;
|
|
584
|
+
height: number;
|
|
585
|
+
}
|
|
586
|
+
|
|
587
|
+
export declare const rosePineDawn: ThemePreset;
|
|
292
588
|
|
|
293
|
-
export
|
|
589
|
+
export declare const sandDune: ThemePreset;
|
|
294
590
|
|
|
295
|
-
|
|
591
|
+
/** Supported primary series types. */
|
|
592
|
+
export declare type SeriesType = 'candlestick' | 'line' | 'bar' | 'pie';
|
|
296
593
|
|
|
297
|
-
|
|
594
|
+
/** Width and height pair. */
|
|
595
|
+
declare interface Size {
|
|
596
|
+
width: number;
|
|
597
|
+
height: number;
|
|
598
|
+
}
|
|
599
|
+
|
|
600
|
+
export declare const solarizedLight: ThemePreset;
|
|
298
601
|
|
|
299
602
|
export declare function Sparkline({ data, theme, variant, valuePosition, formatValue, label, sublabel, color, negativeColor, areaFill, width, height, lineWidth, gradient, style, }: SparklineProps): JSX_2.Element;
|
|
300
603
|
|
|
@@ -333,25 +636,88 @@ export declare type SparklineValuePosition = 'left' | 'right' | 'none';
|
|
|
333
636
|
|
|
334
637
|
export declare type SparklineVariant = 'line' | 'bar';
|
|
335
638
|
|
|
336
|
-
|
|
639
|
+
/** Stacking mode for bar/line series: off (overlap), normal (stacked), percent (100% stacked). */
|
|
640
|
+
export declare type StackingMode = 'off' | 'normal' | 'percent';
|
|
337
641
|
|
|
338
|
-
|
|
642
|
+
/**
|
|
643
|
+
* Input config for {@link createTheme}. Mirrors the structure of {@link ChartTheme}
|
|
644
|
+
* but everything is optional except `background`. Missing values are derived automatically.
|
|
645
|
+
*/
|
|
646
|
+
export declare interface ThemeConfig {
|
|
647
|
+
name?: string;
|
|
648
|
+
description?: string;
|
|
649
|
+
background: string;
|
|
650
|
+
chartGradient?: [string, string];
|
|
651
|
+
typography?: Partial<ChartTheme['typography']>;
|
|
652
|
+
grid?: Partial<ChartTheme['grid']>;
|
|
653
|
+
candlestick?: Partial<ChartTheme['candlestick']>;
|
|
654
|
+
line?: Partial<ChartTheme['line']>;
|
|
655
|
+
seriesColors?: string[];
|
|
656
|
+
bands?: Partial<ChartTheme['bands']>;
|
|
657
|
+
crosshair?: Partial<ChartTheme['crosshair']>;
|
|
658
|
+
axis?: Partial<ChartTheme['axis']>;
|
|
659
|
+
yLabel?: Partial<ChartTheme['yLabel']>;
|
|
660
|
+
tooltip?: Partial<ChartTheme['tooltip']>;
|
|
661
|
+
/** URL to load the font (e.g. Google Fonts). */
|
|
662
|
+
fontUrl?: string | null;
|
|
663
|
+
}
|
|
339
664
|
|
|
340
|
-
export
|
|
665
|
+
export declare interface ThemePreset {
|
|
666
|
+
name: string;
|
|
667
|
+
description?: string;
|
|
668
|
+
fontUrl: string | null;
|
|
669
|
+
theme: ChartTheme;
|
|
670
|
+
dark: boolean;
|
|
671
|
+
/** Optional CSS background-image for the page */
|
|
672
|
+
backgroundImage?: string;
|
|
673
|
+
backgroundSize?: string;
|
|
674
|
+
}
|
|
341
675
|
|
|
342
676
|
export declare const ThemeProvider: Provider<ChartTheme | null>;
|
|
343
677
|
|
|
344
|
-
|
|
678
|
+
/** All built-in themes keyed by display name */
|
|
679
|
+
export declare const themes: Record<string, ThemePreset>;
|
|
345
680
|
|
|
346
681
|
declare function TimeAxis(): JSX_2.Element;
|
|
347
682
|
export { TimeAxis }
|
|
348
683
|
export { TimeAxis as XAxis }
|
|
349
684
|
|
|
350
|
-
|
|
685
|
+
/** A single time-value data point for line and bar series. Time is a timestamp in milliseconds. */
|
|
686
|
+
export declare interface TimePoint {
|
|
687
|
+
time: number;
|
|
688
|
+
value: number;
|
|
689
|
+
}
|
|
351
690
|
|
|
352
|
-
|
|
691
|
+
/** {@link TimePoint} that also accepts `Date` for the time field. */
|
|
692
|
+
export declare type TimePointInput = Omit<TimePoint, 'time'> & {
|
|
693
|
+
time: TimeValue;
|
|
694
|
+
};
|
|
695
|
+
|
|
696
|
+
declare class TimeScale {
|
|
697
|
+
private from;
|
|
698
|
+
private to;
|
|
699
|
+
private width;
|
|
700
|
+
private pixelRatio;
|
|
701
|
+
update(range: VisibleRange, mediaWidth: number, pixelRatio: number): void;
|
|
702
|
+
timeToX(time: number): number;
|
|
703
|
+
timeToBitmapX(time: number): number;
|
|
704
|
+
xToTime(x: number): number;
|
|
705
|
+
pixelDeltaToTimeDelta(pixelDelta: number): number;
|
|
706
|
+
barWidthMedia(dataInterval: number): number;
|
|
707
|
+
barWidthBitmap(dataInterval: number): number;
|
|
708
|
+
niceTickValues(dataInterval: number): {
|
|
709
|
+
ticks: number[];
|
|
710
|
+
tickInterval: number;
|
|
711
|
+
};
|
|
712
|
+
getRange(): VisibleRange;
|
|
713
|
+
getMediaWidth(): number;
|
|
714
|
+
}
|
|
353
715
|
|
|
354
|
-
|
|
716
|
+
/**
|
|
717
|
+
* Accepted time input: a timestamp in **milliseconds** (like `Date.now()`) or a `Date` object.
|
|
718
|
+
* `Date` values are converted to milliseconds internally via `Date.getTime()`.
|
|
719
|
+
*/
|
|
720
|
+
export declare type TimeValue = number | Date;
|
|
355
721
|
|
|
356
722
|
/**
|
|
357
723
|
* Two-part tooltip:
|
|
@@ -378,7 +744,14 @@ declare interface TooltipProps {
|
|
|
378
744
|
/** Sort order for multi-series tooltip values. */
|
|
379
745
|
export declare type TooltipSort = 'none' | 'asc' | 'desc';
|
|
380
746
|
|
|
381
|
-
|
|
747
|
+
/** Font family and size tokens used across the chart. */
|
|
748
|
+
export declare interface Typography {
|
|
749
|
+
fontFamily: string;
|
|
750
|
+
fontSize: number;
|
|
751
|
+
axisFontSize: number;
|
|
752
|
+
yFontSize: number;
|
|
753
|
+
tooltipFontSize: number;
|
|
754
|
+
}
|
|
382
755
|
|
|
383
756
|
export declare function useChartInstance(): ChartInstance;
|
|
384
757
|
|
|
@@ -398,13 +771,33 @@ export declare function useVisibleRange(chart: ChartInstance): VisibleRange;
|
|
|
398
771
|
|
|
399
772
|
export declare function useYRange(chart: ChartInstance): YRange;
|
|
400
773
|
|
|
401
|
-
|
|
774
|
+
/** Time range (timestamps in milliseconds) of the currently visible portion of the chart. */
|
|
775
|
+
export declare interface VisibleRange {
|
|
776
|
+
from: number;
|
|
777
|
+
to: number;
|
|
778
|
+
}
|
|
402
779
|
|
|
403
|
-
|
|
780
|
+
/** Configuration for the X (time) axis. */
|
|
781
|
+
export declare interface XAxisConfig {
|
|
782
|
+
/** Height in pixels. Default: 30. */
|
|
783
|
+
height?: number;
|
|
784
|
+
/** Whether the axis is visible. Default: true. When false, height is treated as 0. */
|
|
785
|
+
visible?: boolean;
|
|
786
|
+
}
|
|
404
787
|
|
|
405
788
|
export declare function YAxis(): JSX_2.Element;
|
|
406
789
|
|
|
407
|
-
|
|
790
|
+
/** Configuration for the Y axis. */
|
|
791
|
+
export declare interface YAxisConfig {
|
|
792
|
+
/** Width in pixels. Default: 55. */
|
|
793
|
+
width?: number;
|
|
794
|
+
/** Minimum bound. Default: 'auto'. */
|
|
795
|
+
min?: AxisBound;
|
|
796
|
+
/** Maximum bound. Default: 'auto'. */
|
|
797
|
+
max?: AxisBound;
|
|
798
|
+
/** Whether the axis is visible. Default: true. When false, width is treated as 0. */
|
|
799
|
+
visible?: boolean;
|
|
800
|
+
}
|
|
408
801
|
|
|
409
802
|
export declare function YLabel({ seriesId, color }: YLabelProps): JSX_2.Element | null;
|
|
410
803
|
|
|
@@ -414,6 +807,35 @@ declare interface YLabelProps {
|
|
|
414
807
|
color?: string;
|
|
415
808
|
}
|
|
416
809
|
|
|
417
|
-
|
|
810
|
+
/** Min/max value range for the Y axis. */
|
|
811
|
+
export declare interface YRange {
|
|
812
|
+
min: number;
|
|
813
|
+
max: number;
|
|
814
|
+
}
|
|
815
|
+
|
|
816
|
+
/**
|
|
817
|
+
* Maps values to vertical pixel positions (and vice versa).
|
|
818
|
+
* Also provides tick generation and value formatting for the Y axis.
|
|
819
|
+
*/
|
|
820
|
+
declare class YScale {
|
|
821
|
+
private min;
|
|
822
|
+
private max;
|
|
823
|
+
private height;
|
|
824
|
+
private pixelRatio;
|
|
825
|
+
/** Recalculate the scale with a new Y range, chart height, and device pixel ratio. */
|
|
826
|
+
update(range: YRange, mediaHeight: number, pixelRatio: number): void;
|
|
827
|
+
/** Convert a value to a Y position in CSS (media) pixels. */
|
|
828
|
+
valueToY(value: number): number;
|
|
829
|
+
/** Convert a value to a Y position in physical (bitmap) pixels. */
|
|
830
|
+
valueToBitmapY(value: number): number;
|
|
831
|
+
/** Convert a Y position in CSS pixels back to a value. */
|
|
832
|
+
yToValue(y: number): number;
|
|
833
|
+
/** Generate evenly spaced "nice" tick values that fit the current range and chart height. */
|
|
834
|
+
niceTickValues(): number[];
|
|
835
|
+
getRange(): YRange;
|
|
836
|
+
getMediaHeight(): number;
|
|
837
|
+
/** Format a value for display, adapting decimal places to the visible range magnitude. */
|
|
838
|
+
formatY(value: number): string;
|
|
839
|
+
}
|
|
418
840
|
|
|
419
841
|
export { }
|