@wick-charts/react 0.1.1 → 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 +546 -121
- package/dist/index.js +513 -523
- package/package.json +2 -2
package/dist/index.d.ts
CHANGED
|
@@ -1,77 +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
|
-
|
|
68
|
-
export { AxisConfig }
|
|
69
|
-
|
|
70
|
-
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;
|
|
71
25
|
|
|
72
26
|
export declare function BarSeries({ data, options, label, id: idProp, onSeriesId }: BarSeriesProps): null;
|
|
73
27
|
|
|
74
|
-
|
|
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
|
+
}
|
|
75
38
|
|
|
76
39
|
declare interface BarSeriesProps {
|
|
77
40
|
/** Array of datasets — one per layer. A single-layer bar chart uses `[data]`. */
|
|
@@ -85,16 +48,30 @@ declare interface BarSeriesProps {
|
|
|
85
48
|
onSeriesId?: (id: string) => void;
|
|
86
49
|
}
|
|
87
50
|
|
|
88
|
-
|
|
51
|
+
/** @deprecated Use {@link StackingMode} instead. */
|
|
52
|
+
export declare type BarStacking = StackingMode;
|
|
89
53
|
|
|
90
|
-
|
|
54
|
+
/** Lookup a theme by name (defaults to "One Dark Pro") */
|
|
55
|
+
export declare function buildTheme(themeName: string): ChartTheme;
|
|
91
56
|
|
|
92
57
|
export declare function CandlestickSeries({ data, options, id: idProp, onSeriesId }: CandlestickSeriesProps): null;
|
|
93
58
|
|
|
94
|
-
|
|
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
|
+
}
|
|
95
72
|
|
|
96
73
|
declare interface CandlestickSeriesProps {
|
|
97
|
-
data:
|
|
74
|
+
data: OHLCInput[];
|
|
98
75
|
options?: Partial<CandlestickSeriesOptions>;
|
|
99
76
|
/** Stable series ID. Prefer this over `onSeriesId` — same value across remounts. */
|
|
100
77
|
id?: string;
|
|
@@ -102,7 +79,7 @@ declare interface CandlestickSeriesProps {
|
|
|
102
79
|
onSeriesId?: (id: string) => void;
|
|
103
80
|
}
|
|
104
81
|
|
|
105
|
-
export
|
|
82
|
+
export declare const catppuccin: ThemePreset;
|
|
106
83
|
|
|
107
84
|
/**
|
|
108
85
|
* Top-level React wrapper that creates a {@link ChartInstance} and provides it to children via context.
|
|
@@ -144,39 +121,302 @@ declare interface ChartContainerProps {
|
|
|
144
121
|
className?: string;
|
|
145
122
|
}
|
|
146
123
|
|
|
147
|
-
|
|
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
|
+
}
|
|
148
131
|
|
|
149
|
-
|
|
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
|
+
}
|
|
150
280
|
|
|
151
|
-
|
|
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
|
+
}
|
|
152
287
|
|
|
153
|
-
|
|
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
|
+
}
|
|
154
311
|
|
|
155
|
-
|
|
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
|
+
}
|
|
372
|
+
|
|
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;
|
|
156
378
|
|
|
157
379
|
export declare function Crosshair(): JSX_2.Element | null;
|
|
158
380
|
|
|
159
|
-
|
|
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;
|
|
160
394
|
|
|
161
|
-
export
|
|
395
|
+
export declare function detectInterval(times: number[]): number;
|
|
162
396
|
|
|
163
|
-
export
|
|
397
|
+
export declare const dracula: ThemePreset;
|
|
164
398
|
|
|
165
|
-
|
|
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
|
+
}
|
|
166
406
|
|
|
167
|
-
export
|
|
407
|
+
export declare function formatDate(timestamp: number): string;
|
|
168
408
|
|
|
169
|
-
export
|
|
409
|
+
export declare function formatTime(timestamp: number, interval: number): string;
|
|
170
410
|
|
|
171
|
-
export
|
|
411
|
+
export declare const githubLight: ThemePreset;
|
|
172
412
|
|
|
173
|
-
export
|
|
413
|
+
export declare const gruvbox: ThemePreset;
|
|
174
414
|
|
|
175
|
-
export
|
|
415
|
+
export declare const handwritten: ThemePreset;
|
|
176
416
|
|
|
177
|
-
export
|
|
417
|
+
export declare const highContrast: ThemePreset;
|
|
178
418
|
|
|
179
|
-
export
|
|
419
|
+
export declare const lavenderMist: ThemePreset;
|
|
180
420
|
|
|
181
421
|
export declare function Legend({ items, position, mode }: LegendProps): JSX_2.Element | null;
|
|
182
422
|
|
|
@@ -198,15 +438,29 @@ export declare interface LegendProps {
|
|
|
198
438
|
mode?: 'toggle' | 'solo';
|
|
199
439
|
}
|
|
200
440
|
|
|
201
|
-
export
|
|
441
|
+
export declare const lightPink: ThemePreset;
|
|
202
442
|
|
|
203
|
-
export
|
|
443
|
+
export declare const lightTheme: ChartTheme;
|
|
204
444
|
|
|
205
|
-
|
|
445
|
+
/** @deprecated Use {@link TimePoint} instead. */
|
|
446
|
+
export declare type LineData = TimePoint;
|
|
206
447
|
|
|
207
448
|
export declare function LineSeries({ data, options, label, id: idProp, onSeriesId }: LineSeriesProps): null;
|
|
208
449
|
|
|
209
|
-
|
|
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
|
+
}
|
|
210
464
|
|
|
211
465
|
declare interface LineSeriesProps {
|
|
212
466
|
/** Array of datasets — one per layer. A single line uses `[data]`. */
|
|
@@ -219,17 +473,20 @@ declare interface LineSeriesProps {
|
|
|
219
473
|
onSeriesId?: (id: string) => void;
|
|
220
474
|
}
|
|
221
475
|
|
|
222
|
-
|
|
476
|
+
declare type Listener = (...args: any[]) => void;
|
|
223
477
|
|
|
224
|
-
export
|
|
478
|
+
export declare const materialPalenight: ThemePreset;
|
|
225
479
|
|
|
226
|
-
export
|
|
480
|
+
export declare const minimalLight: ThemePreset;
|
|
227
481
|
|
|
228
|
-
export
|
|
482
|
+
export declare const mintBreeze: ThemePreset;
|
|
229
483
|
|
|
230
|
-
export
|
|
484
|
+
export declare const monokaiPro: ThemePreset;
|
|
231
485
|
|
|
232
|
-
export
|
|
486
|
+
export declare const nightOwl: ThemePreset;
|
|
487
|
+
|
|
488
|
+
/** Convert a {@link TimeValue} (number ms or Date) to a millisecond timestamp. */
|
|
489
|
+
export declare function normalizeTime(t: TimeValue): number;
|
|
233
490
|
|
|
234
491
|
export declare function NumberFlow({ value, format, locale, spinDuration, className, style }: NumberFlowProps): JSX_2.Element;
|
|
235
492
|
|
|
@@ -242,15 +499,26 @@ declare interface NumberFlowProps {
|
|
|
242
499
|
style?: CSSProperties;
|
|
243
500
|
}
|
|
244
501
|
|
|
245
|
-
|
|
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
|
+
}
|
|
246
511
|
|
|
247
|
-
|
|
512
|
+
/** {@link OHLCData} that also accepts `Date` for the time field. */
|
|
513
|
+
export declare type OHLCInput = Omit<OHLCData, 'time'> & {
|
|
514
|
+
time: TimeValue;
|
|
515
|
+
};
|
|
248
516
|
|
|
249
|
-
export
|
|
517
|
+
export declare const oneDarkPro: ThemePreset;
|
|
250
518
|
|
|
251
|
-
export
|
|
519
|
+
export declare const panda: ThemePreset;
|
|
252
520
|
|
|
253
|
-
export
|
|
521
|
+
export declare const peachCream: ThemePreset;
|
|
254
522
|
|
|
255
523
|
export declare function PieLegend({ seriesId, format }: PieLegendProps): JSX_2.Element | null;
|
|
256
524
|
|
|
@@ -265,7 +533,21 @@ export declare interface PieLegendProps {
|
|
|
265
533
|
/** Pie chart series. Set `options.innerRadiusRatio` > 0 for donut. */
|
|
266
534
|
export declare function PieSeries({ data, options, id: idProp, onSeriesId }: PieSeriesProps): null;
|
|
267
535
|
|
|
268
|
-
|
|
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
|
+
}
|
|
269
551
|
|
|
270
552
|
declare interface PieSeriesProps {
|
|
271
553
|
data: PieSliceData[];
|
|
@@ -276,7 +558,14 @@ declare interface PieSeriesProps {
|
|
|
276
558
|
onSeriesId?: (id: string) => void;
|
|
277
559
|
}
|
|
278
560
|
|
|
279
|
-
|
|
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
|
+
}
|
|
280
569
|
|
|
281
570
|
/** Tooltip for pie/donut charts. Shows hovered slice label, value, and percentage. */
|
|
282
571
|
export declare function PieTooltip({ seriesId }: PieTooltipProps): JSX_2.Element | null;
|
|
@@ -285,15 +574,30 @@ declare interface PieTooltipProps {
|
|
|
285
574
|
seriesId: string;
|
|
286
575
|
}
|
|
287
576
|
|
|
288
|
-
export
|
|
577
|
+
export declare const quietLight: ThemePreset;
|
|
578
|
+
|
|
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;
|
|
289
588
|
|
|
290
|
-
export
|
|
589
|
+
export declare const sandDune: ThemePreset;
|
|
291
590
|
|
|
292
|
-
|
|
591
|
+
/** Supported primary series types. */
|
|
592
|
+
export declare type SeriesType = 'candlestick' | 'line' | 'bar' | 'pie';
|
|
293
593
|
|
|
294
|
-
|
|
594
|
+
/** Width and height pair. */
|
|
595
|
+
declare interface Size {
|
|
596
|
+
width: number;
|
|
597
|
+
height: number;
|
|
598
|
+
}
|
|
295
599
|
|
|
296
|
-
export
|
|
600
|
+
export declare const solarizedLight: ThemePreset;
|
|
297
601
|
|
|
298
602
|
export declare function Sparkline({ data, theme, variant, valuePosition, formatValue, label, sublabel, color, negativeColor, areaFill, width, height, lineWidth, gradient, style, }: SparklineProps): JSX_2.Element;
|
|
299
603
|
|
|
@@ -332,23 +636,88 @@ export declare type SparklineValuePosition = 'left' | 'right' | 'none';
|
|
|
332
636
|
|
|
333
637
|
export declare type SparklineVariant = 'line' | 'bar';
|
|
334
638
|
|
|
335
|
-
|
|
639
|
+
/** Stacking mode for bar/line series: off (overlap), normal (stacked), percent (100% stacked). */
|
|
640
|
+
export declare type StackingMode = 'off' | 'normal' | 'percent';
|
|
336
641
|
|
|
337
|
-
|
|
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
|
+
}
|
|
664
|
+
|
|
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
|
+
}
|
|
338
675
|
|
|
339
676
|
export declare const ThemeProvider: Provider<ChartTheme | null>;
|
|
340
677
|
|
|
341
|
-
|
|
678
|
+
/** All built-in themes keyed by display name */
|
|
679
|
+
export declare const themes: Record<string, ThemePreset>;
|
|
342
680
|
|
|
343
681
|
declare function TimeAxis(): JSX_2.Element;
|
|
344
682
|
export { TimeAxis }
|
|
345
683
|
export { TimeAxis as XAxis }
|
|
346
684
|
|
|
347
|
-
|
|
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
|
+
}
|
|
348
690
|
|
|
349
|
-
|
|
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
|
+
}
|
|
350
715
|
|
|
351
|
-
|
|
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;
|
|
352
721
|
|
|
353
722
|
/**
|
|
354
723
|
* Two-part tooltip:
|
|
@@ -375,7 +744,14 @@ declare interface TooltipProps {
|
|
|
375
744
|
/** Sort order for multi-series tooltip values. */
|
|
376
745
|
export declare type TooltipSort = 'none' | 'asc' | 'desc';
|
|
377
746
|
|
|
378
|
-
|
|
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
|
+
}
|
|
379
755
|
|
|
380
756
|
export declare function useChartInstance(): ChartInstance;
|
|
381
757
|
|
|
@@ -395,13 +771,33 @@ export declare function useVisibleRange(chart: ChartInstance): VisibleRange;
|
|
|
395
771
|
|
|
396
772
|
export declare function useYRange(chart: ChartInstance): YRange;
|
|
397
773
|
|
|
398
|
-
|
|
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
|
+
}
|
|
399
779
|
|
|
400
|
-
|
|
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
|
+
}
|
|
401
787
|
|
|
402
788
|
export declare function YAxis(): JSX_2.Element;
|
|
403
789
|
|
|
404
|
-
|
|
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
|
+
}
|
|
405
801
|
|
|
406
802
|
export declare function YLabel({ seriesId, color }: YLabelProps): JSX_2.Element | null;
|
|
407
803
|
|
|
@@ -411,6 +807,35 @@ declare interface YLabelProps {
|
|
|
411
807
|
color?: string;
|
|
412
808
|
}
|
|
413
809
|
|
|
414
|
-
|
|
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
|
+
}
|
|
415
840
|
|
|
416
841
|
export { }
|