@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.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
- import { rosePineDawn } from '@wick-charts/core';
49
- import { sandDune } from '@wick-charts/core';
50
- import { SeriesType } from '@wick-charts/core';
51
- import { solarizedLight } from '@wick-charts/core';
52
- import { StackingMode } from '@wick-charts/core';
53
- import { ThemeConfig } from '@wick-charts/core';
54
- import { themes } from '@wick-charts/core';
55
- import { TimePoint } from '@wick-charts/core';
56
- import { TimePointInput } from '@wick-charts/core';
57
- import { TimeValue } from '@wick-charts/core';
58
- import { Typography } from '@wick-charts/core';
59
- import { VisibleRange } from '@wick-charts/core';
60
- import { XAxisConfig } from '@wick-charts/core';
61
- import { YAxisConfig } from '@wick-charts/core';
62
- import { YRange } from '@wick-charts/core';
63
-
64
- export { andromeda }
65
-
66
- export { AxisBound }
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
- export { BarSeriesOptions }
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
- export { BarStacking }
51
+ /** @deprecated Use {@link StackingMode} instead. */
52
+ export declare type BarStacking = StackingMode;
89
53
 
90
- export { buildTheme }
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
- export { CandlestickSeriesOptions }
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: OHLCData[];
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 { catppuccin }
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
- export { ChartInstance }
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
- export { ChartLayout }
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
- export { ChartOptions }
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
- export { ChartTheme }
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
- export { createTheme }
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
- export { CrosshairPosition }
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 { darkTheme }
395
+ export declare function detectInterval(times: number[]): number;
162
396
 
163
- export { detectInterval }
397
+ export declare const dracula: ThemePreset;
164
398
 
165
- export { dracula }
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 { formatDate }
407
+ export declare function formatDate(timestamp: number): string;
168
408
 
169
- export { formatTime }
409
+ export declare function formatTime(timestamp: number, interval: number): string;
170
410
 
171
- export { githubLight }
411
+ export declare const githubLight: ThemePreset;
172
412
 
173
- export { gruvbox }
413
+ export declare const gruvbox: ThemePreset;
174
414
 
175
- export { handwritten }
415
+ export declare const handwritten: ThemePreset;
176
416
 
177
- export { highContrast }
417
+ export declare const highContrast: ThemePreset;
178
418
 
179
- export { lavenderMist }
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 { lightPink }
441
+ export declare const lightPink: ThemePreset;
202
442
 
203
- export { lightTheme }
443
+ export declare const lightTheme: ChartTheme;
204
444
 
205
- export { LineData }
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
- export { LineSeriesOptions }
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
- export { materialPalenight }
476
+ declare type Listener = (...args: any[]) => void;
223
477
 
224
- export { minimalLight }
478
+ export declare const materialPalenight: ThemePreset;
225
479
 
226
- export { mintBreeze }
480
+ export declare const minimalLight: ThemePreset;
227
481
 
228
- export { monokaiPro }
482
+ export declare const mintBreeze: ThemePreset;
229
483
 
230
- export { nightOwl }
484
+ export declare const monokaiPro: ThemePreset;
231
485
 
232
- export { normalizeTime }
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
- export { OHLCData }
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
- export { OHLCInput }
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 { oneDarkPro }
517
+ export declare const oneDarkPro: ThemePreset;
250
518
 
251
- export { panda }
519
+ export declare const panda: ThemePreset;
252
520
 
253
- export { peachCream }
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
- export { PieSeriesOptions }
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
- export { PieSliceData }
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 { quietLight }
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 { rosePineDawn }
589
+ export declare const sandDune: ThemePreset;
291
590
 
292
- export { sandDune }
591
+ /** Supported primary series types. */
592
+ export declare type SeriesType = 'candlestick' | 'line' | 'bar' | 'pie';
293
593
 
294
- export { SeriesType }
594
+ /** Width and height pair. */
595
+ declare interface Size {
596
+ width: number;
597
+ height: number;
598
+ }
295
599
 
296
- export { solarizedLight }
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
- export { StackingMode }
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
- export { ThemeConfig }
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
- export { themes }
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
- export { TimePoint }
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
- export { TimePointInput }
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
- export { TimeValue }
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
- export { Typography }
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
- export { VisibleRange }
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
- export { XAxisConfig }
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
- export { YAxisConfig }
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
- export { YRange }
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 { }