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