Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985
  1. declare class uPlot {
  2. /** when passing a function for @targ, call init() after attaching self.root to the DOM */
  3. constructor(
  4. opts: uPlot.Options,
  5. data?: uPlot.AlignedData,
  6. targ?: HTMLElement | ((self: uPlot, init: Function) => void)
  7. );
  8. /** chart container */
  9. readonly root: HTMLElement;
  10. /** status */
  11. readonly status: 0 | 1;
  12. /** width of the plotting area + axes in CSS pixels */
  13. readonly width: number;
  14. /** height of the plotting area + axes in CSS pixels (excludes title & legend height) */
  15. readonly height: number;
  16. /** context of canvas used for plotting area + axes */
  17. readonly ctx: CanvasRenderingContext2D;
  18. /** coords of plotting area in canvas pixels (relative to full canvas w/axes) */
  19. readonly bbox: uPlot.BBox;
  20. /** coords of selected region in CSS pixels (relative to plotting area) */
  21. readonly select: uPlot.BBox;
  22. /** cursor state & opts*/
  23. readonly cursor: uPlot.Cursor;
  24. readonly legend: uPlot.Legend;
  25. // /** focus opts */
  26. // readonly focus: uPlot.Focus;
  27. /** series state & opts */
  28. readonly series: uPlot.Series[];
  29. /** scales state & opts */
  30. readonly scales: {
  31. [key: string]: uPlot.Scale;
  32. };
  33. /** axes state & opts */
  34. readonly axes: uPlot.Axis[];
  35. /** hooks, including any added by plugins */
  36. readonly hooks: uPlot.Hooks.Arrays;
  37. /** current data */
  38. readonly data: uPlot.AlignedData;
  39. /** .u-over dom element */
  40. readonly over: HTMLDivElement;
  41. /** .u-under dom element */
  42. readonly under: HTMLDivElement;
  43. /** clears and redraws the canvas. if rebuildPaths = false, uses cached series' Path2D objects */
  44. redraw(rebuildPaths?: boolean, recalcAxes?: boolean): void;
  45. /** defers recalc & redraw for multiple ops, e.g. setScale('x', ...) && setScale('y', ...) */
  46. batch(txn: Function): void;
  47. /** destroys DOM, removes resize & scroll listeners, etc. */
  48. destroy(): void;
  49. /** sets the chart data & redraws. (default resetScales = true) */
  50. setData(data: uPlot.AlignedData, resetScales?: boolean): void;
  51. /** sets the limits of a scale & redraws (used for zooming) */
  52. setScale(scaleKey: string, limits: { min: number; max: number }): void;
  53. /** sets the cursor position (relative to plotting area) */
  54. setCursor(opts: {left: number, top: number}, fireHook?: boolean): void;
  55. /** sets the legend to the values of the specified idx */
  56. setLegend(opts: {idx: number}, fireHook?: boolean): void;
  57. // TODO: include other series style opts which are dynamically pulled?
  58. /** toggles series visibility or focus */
  59. setSeries(seriesIdx: number | null, opts: {show?: boolean, focus?: boolean}): void;
  60. /** adds a series */
  61. addSeries(opts: uPlot.Series, seriesIdx?: number): void;
  62. /** deletes a series */
  63. delSeries(seriesIdx: number): void;
  64. /** adds a band */
  65. addBand(opts: uPlot.Band, bandIdx?: number): void;
  66. /** modifies an existing band */
  67. setBand(bandIdx: number, opts: uPlot.Band): void;
  68. /** deletes a band. if null bandIdx, clears all bands */
  69. delBand(bandIdx?: number | null): void;
  70. /** sets visually selected region without triggering setScale (zoom). (default fireHook = true) */
  71. setSelect(opts: {left: number, top: number, width: number, height: number}, fireHook?: boolean): void;
  72. /** sets the width & height of the plotting area + axes (excludes title & legend height) */
  73. setSize(opts: { width: number; height: number }): void;
  74. /** converts a CSS pixel position (relative to plotting area) to the closest data index */
  75. posToIdx(left: number, canvasPixels?: boolean): number;
  76. /** converts a CSS pixel position (relative to plotting area) to a value along the given scale */
  77. posToVal(leftTop: number, scaleKey: string, canvasPixels?: boolean): number;
  78. /** converts a value along the given scale to a CSS (default) or canvas pixel position. (default canvasPixels = false) */
  79. valToPos(val: number, scaleKey: string, canvasPixels?: boolean): number;
  80. /** converts a value along x to the closest data index */
  81. valToIdx(val: number): number;
  82. /** updates getBoundingClientRect() cache for cursor positioning. use when plot's position changes (excluding window scroll & resize) */
  83. syncRect(defer?: boolean): void;
  84. /** uPlot's path-builder factories */
  85. static paths: uPlot.Series.PathBuilderFactories;
  86. /** a deep merge util fn */
  87. static assign(targ: object, ...srcs: object[]): object;
  88. /** re-ranges a given min/max by a multiple of the range's magnitude (used internally to expand/snap/pad numeric y scales) */
  89. static rangeNum: ((min: number, max: number, mult: number, extra: boolean) => uPlot.Range.MinMax) | ((min: number, max: number, cfg: uPlot.Range.Config) => uPlot.Range.MinMax);
  90. /** re-ranges a given min/max outwards to nearest 10% of given min/max's magnitudes, unless fullMags = true */
  91. static rangeLog(min: number, max: number, base: uPlot.Scale.LogBase, fullMags: boolean): uPlot.Range.MinMax;
  92. /** re-ranges a given min/max outwards to nearest 10% of given min/max's magnitudes, unless fullMags = true */
  93. static rangeAsinh(min: number, max: number, base: uPlot.Scale.LogBase, fullMags: boolean): uPlot.Range.MinMax;
  94. /** default numeric formatter using browser's locale: new Intl.NumberFormat(navigator.language).format */
  95. static fmtNum(val: number): string;
  96. /** creates an efficient formatter for Date objects from a template string, e.g. {YYYY}-{MM}-{DD} */
  97. static fmtDate(tpl: string, names?: uPlot.DateNames): (date: Date) => string;
  98. /** converts a Date into new Date that's time-adjusted for the given IANA Time Zone Name */
  99. static tzDate(date: Date, tzName: string): Date;
  100. /** outerJoins multiple data tables on table[0] values */
  101. static join(tables: uPlot.AlignedData[], nullModes?: uPlot.JoinNullMode[][]): uPlot.AlignedData;
  102. static addGap: uPlot.Series.AddGap;
  103. static clipGaps: uPlot.Series.ClipPathBuilder;
  104. /** helper function for grabbing proper drawing orientation vars and fns for a plot instance (all dims in canvas pixels) */
  105. static orient: (u: uPlot, seriesIdx: number, callback: uPlot.OrientCallback) => any;
  106. /** returns a pub/sub instance shared by all plots usng the provided key */
  107. static sync: (key: string) => uPlot.SyncPubSub;
  108. }
  109. export = uPlot;
  110. declare namespace uPlot {
  111. type OrientCallback = (
  112. series: Series,
  113. dataX: number[],
  114. dataY: (number | null)[],
  115. scaleX: Scale,
  116. scaleY: Scale,
  117. valToPosX: ValToPos,
  118. valToPosY: ValToPos,
  119. xOff: number,
  120. yOff: number,
  121. xDim: number,
  122. yDim: number,
  123. moveTo: MoveToH | MoveToV,
  124. lineTo: LineToH | LineToV,
  125. rect: RectH | RectV,
  126. arc: ArcH | ArcV,
  127. bezierCurveTo: BezierCurveToH | BezierCurveToV,
  128. ) => any;
  129. type ValToPos = (val: number, scale: Scale, fullDim: number, offset: number) => number;
  130. type Drawable = Path2D | CanvasRenderingContext2D;
  131. type MoveToH = (p: Drawable, x: number, y: number) => void;
  132. type MoveToV = (p: Drawable, y: number, x: number) => void;
  133. type LineToH = (p: Drawable, x: number, y: number) => void;
  134. type LineToV = (p: Drawable, y: number, x: number) => void;
  135. type RectH = (p: Drawable, x: number, y: number, w: number, h: number) => void;
  136. type RectV = (p: Drawable, y: number, x: number, h: number, w: number) => void;
  137. type ArcH = (p: Drawable, x: number, y: number, r: number, startAngle: number, endAngle: number) => void;
  138. type ArcV = (p: Drawable, y: number, x: number, r: number, startAngle: number, endAngle: number) => void;
  139. type BezierCurveToH = (p: Drawable, bp1x: number, bp1y: number, bp2x: number, bp2y: number, p2x: number, p2y: number) => void;
  140. type BezierCurveToV = (p: Drawable, bp1y: number, bp1x: number, bp2y: number, bp2x: number, p2y: number, p2x: number) => void;
  141. export const enum JoinNullMode {
  142. /** use for series with spanGaps: true */
  143. Remove = 0,
  144. /** retain explicit nulls gaps (default) */
  145. Retain = 1,
  146. /** expand explicit null gaps to include adjacent alignment artifacts (undefined values) */
  147. Expand = 2,
  148. }
  149. export const enum Orientation {
  150. Horizontal = 0,
  151. Vertical = 1,
  152. }
  153. export type AlignedData = [
  154. xValues: number[],
  155. ...yValues: (number | null | undefined)[][],
  156. ]
  157. export interface DateNames {
  158. /** long month names */
  159. MMMM: string[];
  160. /** short month names */
  161. MMM: string[];
  162. /** long weekday names (0: Sunday) */
  163. WWWW: string[];
  164. /** short weekday names (0: Sun) */
  165. WWW: string[];
  166. }
  167. export namespace Range {
  168. export type MinMax = [min: number | null, max: number | null];
  169. export type Function = (self: uPlot, initMin: number, initMax: number, scaleKey: string) => MinMax;
  170. export type SoftMode = 0 | 1 | 2 | 3;
  171. export interface Limit {
  172. /** initial multiplier for dataMax-dataMin delta */
  173. pad?: number; // 0.1
  174. /** soft limit */
  175. soft?: number; // 0
  176. /** soft limit active if... 0: never, 1: data <= limit, 2: data + padding <= limit, 3: data <= limit <= data + padding */
  177. mode?: SoftMode; // 3
  178. /** hard limit */
  179. hard?: number;
  180. }
  181. export interface Config {
  182. min: Range.Limit;
  183. max: Range.Limit;
  184. }
  185. }
  186. export interface Scales {
  187. [key: string]: Scale;
  188. }
  189. type SidesWithAxes = [top: boolean, right: boolean, bottom: boolean, left: boolean];
  190. export type PaddingSide = number | null | ((self: uPlot, side: Axis.Side, sidesWithAxes: SidesWithAxes, cycleNum: number) => number);
  191. export type Padding = [top: PaddingSide, right: PaddingSide, bottom: PaddingSide, left: PaddingSide];
  192. export interface Legend {
  193. show?: boolean; // true
  194. /** show series values at current cursor.idx */
  195. live?: boolean; // true
  196. /** swiches primary interaction mode to toggle-one/toggle-all */
  197. isolate?: boolean; // false
  198. /** series indicators */
  199. markers?: Legend.Markers;
  200. /** current index (readback-only, not for init) */
  201. idx?: number;
  202. /** current values (readback-only, not for init) */
  203. values?: Legend.Values;
  204. }
  205. export namespace Legend {
  206. export type Width = number | ((self: uPlot, seriesIdx: number) => number);
  207. export type Stroke = CSSStyleDeclaration['borderColor'] | ((self: uPlot, seriesIdx: number) => CSSStyleDeclaration['borderColor']);
  208. export type Dash = CSSStyleDeclaration['borderStyle'] | ((self: uPlot, seriesIdx: number) => CSSStyleDeclaration['borderStyle']);
  209. export type Fill = CSSStyleDeclaration['background'] | ((self: uPlot, seriesIdx: number) => CSSStyleDeclaration['background']);
  210. export type Value = {
  211. [key: string]: string | number;
  212. };
  213. export type Values = Value[];
  214. export interface Markers {
  215. show?: boolean; // true
  216. /** series indicator line width */
  217. width?: Legend.Width;
  218. /** series indicator stroke (CSS borderColor) */
  219. stroke?: Legend.Stroke;
  220. /** series indicator fill */
  221. fill?: Legend.Fill;
  222. /** series indicator stroke style (CSS borderStyle) */
  223. dash?: Legend.Dash;
  224. }
  225. }
  226. export type DateFormatterFactory = (tpl: string) => (date: Date) => string;
  227. export type LocalDateFromUnix = (ts: number) => Date;
  228. export const enum DrawOrderKey {
  229. Axes = 'axes',
  230. Series = 'series',
  231. }
  232. export interface Options {
  233. /** chart title */
  234. title?: string;
  235. /** id to set on chart div */
  236. id?: string;
  237. /** className to add to chart div */
  238. class?: string;
  239. /** width of plotting area + axes in CSS pixels */
  240. width: number;
  241. /** height of plotting area + axes in CSS pixels (excludes title & legend height) */
  242. height: number;
  243. /** data for chart, if none is provided as argument to constructor */
  244. data?: AlignedData;
  245. /** converts a unix timestamp to Date that's time-adjusted for the desired timezone */
  246. tzDate?: LocalDateFromUnix;
  247. /** creates an efficient formatter for Date objects from a template string, e.g. {YYYY}-{MM}-{DD} */
  248. fmtDate?: DateFormatterFactory;
  249. /** timestamp multiplier that yields 1 millisecond */
  250. ms?: 1e-3 | 1; // 1e-3
  251. /** drawing order for axes/grid & series (default: ["axes", "series"]) */
  252. drawOrder?: DrawOrderKey[];
  253. /** whether vt & hz lines of series/grid/ticks should be crisp/sharp or sub-px antialiased */
  254. pxAlign?: boolean | number; // true
  255. series: Series[];
  256. bands?: Band[];
  257. scales?: Scales;
  258. axes?: Axis[];
  259. /** padding per side, in CSS pixels (can prevent cross-axis labels at the plotting area limits from being chopped off) */
  260. padding?: Padding;
  261. select?: Select;
  262. legend?: Legend;
  263. cursor?: Cursor;
  264. focus?: Focus;
  265. hooks?: Hooks.Arrays;
  266. plugins?: Plugin[];
  267. }
  268. export interface Focus {
  269. /** alpha-transparancy of de-focused series */
  270. alpha: number;
  271. }
  272. export interface BBox {
  273. show?: boolean;
  274. left: number;
  275. top: number;
  276. width: number;
  277. height: number;
  278. }
  279. export interface Select extends BBox {
  280. /** div into which .u-select will be placed: .u-over or .u-under */
  281. over?: boolean; // true
  282. }
  283. export interface SyncPubSub {
  284. key: string;
  285. sub: (client: uPlot) => void;
  286. unsub: (client: uPlot) => void;
  287. pub: (type: string, client: uPlot, x: number, y: number, w: number, h: number, i: number) => void;
  288. plots: uPlot[];
  289. }
  290. export namespace Cursor {
  291. export type LeftTop = [left: number, top: number];
  292. export type MouseListener = (e: MouseEvent) => null;
  293. export type MouseListenerFactory = (self: uPlot, targ: HTMLElement, handler: MouseListener) => MouseListener | null;
  294. export type DataIdxRefiner = (self: uPlot, seriesIdx: number, closestIdx: number, xValue: number) => number;
  295. export type MousePosRefiner = (self: uPlot, mouseLeft: number, mouseTop: number) => LeftTop;
  296. export interface Bind {
  297. mousedown?: MouseListenerFactory;
  298. mouseup?: MouseListenerFactory;
  299. click?: MouseListenerFactory;
  300. dblclick?: MouseListenerFactory;
  301. mousemove?: MouseListenerFactory;
  302. mouseleave?: MouseListenerFactory;
  303. mouseenter?: MouseListenerFactory;
  304. }
  305. export namespace Points {
  306. export type Show = boolean | ((self: uPlot, seriesIdx: number) => HTMLElement);
  307. export type Size = number | ((self: uPlot, seriesIdx: number) => number);
  308. export type Width = number | ((self: uPlot, seriesIdx: number, size: number) => number);
  309. export type Stroke = CanvasRenderingContext2D['strokeStyle'] | ((self: uPlot, seriesIdx: number) => CanvasRenderingContext2D['strokeStyle']);
  310. export type Fill = CanvasRenderingContext2D['fillStyle'] | ((self: uPlot, seriesIdx: number) => CanvasRenderingContext2D['fillStyle']);
  311. }
  312. export interface Points {
  313. show?: Points.Show;
  314. /** hover point diameter in CSS pixels */
  315. size?: Points.Size;
  316. /** hover point outline width in CSS pixels */
  317. width?: Points.Width;
  318. /** hover point outline color, pattern or gradient */
  319. stroke?: Points.Stroke;
  320. /** hover point fill color, pattern or gradient */
  321. fill?: Points.Fill;
  322. }
  323. export interface Drag {
  324. setScale?: boolean; // true
  325. /** toggles dragging along x */
  326. x?: boolean; // true
  327. /** toggles dragging along y */
  328. y?: boolean; // false
  329. /** min drag distance threshold */
  330. dist?: number; // 0
  331. /** when x & y are true, sets an upper drag limit in CSS px for adaptive/unidirectional behavior */
  332. uni?: number; // null
  333. }
  334. export namespace Sync {
  335. export type Scales = [xScaleKey: string, yScaleKey: string];
  336. export type Filter = (type: string, client: uPlot, x: number, y: number, w: number, h: number, i: number) => boolean;
  337. export interface Filters {
  338. /** filters emitted events */
  339. pub?: Filter;
  340. /** filters received events */
  341. sub?: Filter;
  342. }
  343. export type ScaleKeyMatcher = (subScaleKey: string | null, pubScaleKey: string | null) => boolean;
  344. export type Match = [matchX: ScaleKeyMatcher, matchY: ScaleKeyMatcher];
  345. export type Values = [xScaleValue: number, yScaleValue: number];
  346. }
  347. export interface Sync {
  348. /** sync key must match between all charts in a synced group */
  349. key: string;
  350. /** determines if series toggling and focus via cursor is synced across charts */
  351. setSeries?: boolean; // true
  352. /** sets the x and y scales to sync by values. null will sync by relative (%) position */
  353. scales?: Sync.Scales; // [xScaleKey, null]
  354. /** fns that match x and y scale keys between publisher and subscriber */
  355. match?: Sync.Match;
  356. /** event filters */
  357. filters?: Sync.Filters;
  358. /** sync scales' values at the cursor position (exposed for read-back by subscribers) */
  359. values?: Sync.Values,
  360. }
  361. export interface Focus {
  362. /** minimum cursor proximity to datapoint in CSS pixels for focus activation */
  363. prox: number;
  364. }
  365. }
  366. export interface Cursor {
  367. /** cursor on/off */
  368. show?: boolean;
  369. /** vertical crosshair on/off */
  370. x?: boolean;
  371. /** horizontal crosshair on/off */
  372. y?: boolean;
  373. /** cursor position left offset in CSS pixels (relative to plotting area) */
  374. left?: number;
  375. /** cursor position top offset in CSS pixels (relative to plotting area) */
  376. top?: number;
  377. /** closest data index to cursor (closestIdx) */
  378. idx?: number;
  379. /** returns data idx used for hover points & legend display (defaults to closestIdx) */
  380. dataIdx?: Cursor.DataIdxRefiner;
  381. /** a series-matched array of indices returned by dataIdx() */
  382. idxs?: (number | null)[];
  383. /** fires on debounced mousemove events; returns refined [left, top] tuple to snap cursor position */
  384. move?: Cursor.MousePosRefiner;
  385. /** series hover points */
  386. points?: Cursor.Points;
  387. /** event listener proxies (can be overridden to tweak interaction behavior) */
  388. bind?: Cursor.Bind;
  389. /** determines vt/hz cursor dragging to set selection & setScale (zoom) */
  390. drag?: Cursor.Drag;
  391. /** sync cursor between multiple charts */
  392. sync?: Cursor.Sync;
  393. /** focus series closest to cursor */
  394. focus?: Cursor.Focus;
  395. /** lock cursor on mouse click in plotting area */
  396. lock?: boolean; // false
  397. }
  398. export namespace Scale {
  399. export type Auto = boolean | ((self: uPlot, resetScales: boolean) => boolean);
  400. export type Range = Range.MinMax | Range.Function | Range.Config;
  401. export const enum Distr {
  402. Linear = 1,
  403. Ordinal = 2,
  404. Logarithmic = 3,
  405. ArcSinh = 4,
  406. }
  407. export type LogBase = 10 | 2;
  408. export type Clamp = number | ((self: uPlot, val: number, scaleMin: number, scaleMax: number, scaleKey: string) => number);
  409. }
  410. export interface Scale {
  411. /** is this scale temporal, with series' data in UNIX timestamps? */
  412. time?: boolean;
  413. /** determines whether all series' data on this scale will be scanned to find the full min/max range */
  414. auto?: Scale.Auto;
  415. /** can define a static scale range or re-range an initially-determined range from series data */
  416. range?: Scale.Range;
  417. /** scale key from which this scale is derived */
  418. from?: string;
  419. /** scale distribution. 1: linear, 2: ordinal, 3: logarithmic, 4: arcsinh */
  420. distr?: Scale.Distr; // 1
  421. /** logarithmic base */
  422. log?: Scale.LogBase; // 10;
  423. /** clamps log scale values <= 0 (default = scaleMin / 10) */
  424. clamp?: Scale.Clamp;
  425. /** arcsinh linear threshold */
  426. asinh?: number; // 1
  427. /** current min scale value */
  428. min?: number;
  429. /** current max scale value */
  430. max?: number;
  431. /** scale direction */
  432. dir?: 1 | -1;
  433. /** scale orientation - 0: hz, 1: vt */
  434. ori?: 0 | 1;
  435. }
  436. export namespace Series {
  437. export interface Paths {
  438. /** path to stroke */
  439. stroke?: Path2D | null;
  440. /** path to fill */
  441. fill?: Path2D | null;
  442. /** path for clipping fill & stroke (used for gaps) */
  443. clip?: Path2D | null;
  444. /** an upwards clip built using the stroke path */
  445. band? : Path2D | null;
  446. /** tuples of canvas pixel coordinates that were used to construct the gaps clip */
  447. gaps?: [from: number, to: number][];
  448. /** bitmap of whether the band clip should be applied to stroke, fill, or both */
  449. flags?: number;
  450. }
  451. export interface SteppedPathBuilderOpts {
  452. align?: -1 | 1; // 1
  453. // whether to draw ascenders/descenders at null/gap boundaries
  454. ascDesc?: boolean; // false
  455. }
  456. export interface BarsPathBuilderOpts {
  457. align?: -1 | 0 | 1; // 0
  458. size?: [factor?: number, max?: number];
  459. // fixed-size gap between bars in CSS pixels (reduces bar width)
  460. gap?: number;
  461. }
  462. export type LinearPathBuilderFactory = () => Series.PathBuilder;
  463. export type SplinePathBuilderFactory = () => Series.PathBuilder;
  464. export type SteppedPathBuilderFactory = (opts?: SteppedPathBuilderOpts) => Series.PathBuilder;
  465. export type BarsPathBuilderFactory = (opts?: BarsPathBuilderOpts) => Series.PathBuilder;
  466. export interface PathBuilderFactories {
  467. linear?: LinearPathBuilderFactory;
  468. spline?: SplinePathBuilderFactory;
  469. stepped?: SteppedPathBuilderFactory;
  470. bars?: BarsPathBuilderFactory;
  471. }
  472. export type Stroke = CanvasRenderingContext2D['strokeStyle'] | ((self: uPlot, seriesIdx: number) => CanvasRenderingContext2D['strokeStyle']);
  473. export type Fill = CanvasRenderingContext2D['fillStyle'] | ((self: uPlot, seriesIdx: number) => CanvasRenderingContext2D['fillStyle']);
  474. export type Cap = CanvasRenderingContext2D['lineCap'];
  475. export namespace Points {
  476. export type Show = boolean | ((self: uPlot, seriesIdx: number, idx0: number, idx1: number) => boolean | undefined);
  477. export type Filter = number[] | null | ((self: uPlot, seriesIdx: number, show: boolean, gaps?: null | number[][]) => number[] | null);
  478. }
  479. export interface Points {
  480. /** if boolean or returns boolean, round points are drawn with defined options, else fn should draw own custom points via self.ctx */
  481. show?: Points.Show;
  482. /** may return an array of points indices to draw */
  483. filter?: Points.Filter;
  484. /** diameter of point in CSS pixels */
  485. size?: number;
  486. /** minimum avg space between point centers before they're shown (default: size * 2) */
  487. space?: number;
  488. /** line width of circle outline in CSS pixels */
  489. width?: number;
  490. /** line color of circle outline (defaults to series.stroke) */
  491. stroke?: Stroke;
  492. /** line dash segment array */
  493. dash?: number[];
  494. /** line cap */
  495. cap?: Series.Cap;
  496. /** fill color of circle (defaults to #fff) */
  497. fill?: Fill;
  498. }
  499. export type Gap = [from: number, to: number];
  500. export type Gaps = Gap[];
  501. export type AddGap = (gaps: Gaps, from: number, to: number) => void;
  502. export type ClipPathBuilder = (gaps: Gaps, ori: Orientation, left: number, top: number, width: number, height: number) => Path2D | null;
  503. export type PathBuilder = (self: uPlot, seriesIdx: number, idx0: number, idx1: number) => Paths | null;
  504. export type MinMaxIdxs = [minIdx: number, maxIdx: number];
  505. export type Value = string | ((self: uPlot, rawValue: number, seriesIdx: number, idx: number) => string | number);
  506. export type Values = (self: uPlot, seriesIdx: number, idx: number) => object;
  507. export type FillTo = number | ((self: uPlot, seriesIdx: number, dataMin: number, dataMax: number) => number);
  508. export const enum Sorted {
  509. Unsorted = 0,
  510. Ascending = 1,
  511. Descending = -1,
  512. }
  513. }
  514. export interface Series {
  515. /** series on/off. when off, it will not affect its scale */
  516. show?: boolean;
  517. /** className to add to legend parts and cursor hover points */
  518. class?: string;
  519. /** scale key */
  520. scale?: string;
  521. /** whether this series' data is scanned during auto-ranging of its scale */
  522. auto?: boolean; // true
  523. /** if & how the data is pre-sorted (scale.auto optimization) */
  524. sorted?: Series.Sorted;
  525. /** when true, null data values will not cause line breaks */
  526. spanGaps?: boolean;
  527. /** whether path and point drawing should offset canvas to try drawing crisp lines */
  528. pxAlign?: number | boolean; // 1
  529. /** legend label */
  530. label?: string;
  531. /** inline-legend value formatter. can be an fmtDate formatting string when scale.time: true */
  532. value?: Series.Value;
  533. /** table-legend multi-values formatter */
  534. values?: Series.Values;
  535. paths?: Series.PathBuilder;
  536. /** rendered datapoints */
  537. points?: Series.Points;
  538. /** line width in CSS pixels */
  539. width?: number;
  540. /** line & legend color */
  541. stroke?: Series.Stroke;
  542. /** area fill & legend color */
  543. fill?: Series.Fill;
  544. /** area fill baseline (default: 0) */
  545. fillTo?: Series.FillTo;
  546. /** line dash segment array */
  547. dash?: number[];
  548. /** line cap */
  549. cap?: Series.Cap;
  550. /** alpha-transparancy */
  551. alpha?: number;
  552. /** current min and max data indices rendered */
  553. idxs?: Series.MinMaxIdxs;
  554. /** current min rendered value */
  555. min?: number;
  556. /** current max rendered value */
  557. max?: number;
  558. }
  559. export namespace Band {
  560. export type Fill = CanvasRenderingContext2D['fillStyle'] | ((self: uPlot, bandIdx: number, highSeriesFill: CanvasRenderingContext2D['fillStyle']) => CanvasRenderingContext2D['fillStyle']);
  561. export type Bounds = [highSeriesIdx: number, lowSeriesIdx: number];
  562. }
  563. export interface Band {
  564. /** band on/off */
  565. // show?: boolean;
  566. /** series indices of upper and lower band edges */
  567. series: Band.Bounds;
  568. /** area fill style */
  569. fill?: Band.Fill;
  570. }
  571. export namespace Axis {
  572. /** must return an array of same length as splits, e.g. via splits.map() */
  573. export type Filter = (self: uPlot, splits: number[], axisIdx: number, foundSpace: number, foundIncr: number) => (number | null)[];
  574. export type Size = number | ((self: uPlot, values: string[], axisIdx: number, cycleNum: number) => number);
  575. export type Space = number | ((self: uPlot, axisIdx: number, scaleMin: number, scaleMax: number, plotDim: number) => number);
  576. export type Incrs = number[] | ((self: uPlot, axisIdx: number, scaleMin: number, scaleMax: number, fullDim: number, minSpace: number) => number[]);
  577. export type Splits = number[] | ((self: uPlot, axisIdx: number, scaleMin: number, scaleMax: number, foundIncr: number, foundSpace: number) => number[]);
  578. export type StaticValues = (string | number | null)[];
  579. export type DynamicValues = (self: uPlot, splits: number[], axisIdx: number, foundSpace: number, foundIncr: number) => StaticValues;
  580. export type TimeValuesConfig = (string | number | null)[][];
  581. export type TimeValuesTpl = string;
  582. export type Values = StaticValues | DynamicValues | TimeValuesTpl | TimeValuesConfig;
  583. export type Stroke = CanvasRenderingContext2D['strokeStyle'] | ((self: uPlot, axisIdx: number) => CanvasRenderingContext2D['strokeStyle']);
  584. export const enum Side {
  585. Top = 0,
  586. Right = 1,
  587. Bottom = 2,
  588. Left = 3,
  589. }
  590. export const enum Align {
  591. Left = 1,
  592. Right = 2,
  593. }
  594. export type Rotate = number | ((self: uPlot, values: (string | number)[], axisIdx: number, foundSpace: number) => number);
  595. export interface Grid {
  596. /** on/off */
  597. show?: boolean; // true
  598. /** can filter which splits render lines. e.g splits.map(v => v % 2 == 0 ? v : null) */
  599. filter?: Filter;
  600. /** line color */
  601. stroke?: Stroke;
  602. /** line width in CSS pixels */
  603. width?: number;
  604. /** line dash segment array */
  605. dash?: number[];
  606. /** line cap */
  607. cap?: Series.Cap;
  608. }
  609. export interface Ticks extends Grid {
  610. /** length of tick in CSS pixels */
  611. size?: number;
  612. }
  613. }
  614. export interface Axis {
  615. /** axis on/off */
  616. show?: boolean;
  617. /** scale key */
  618. scale?: string;
  619. /** side of chart - 0: top, 1: rgt, 2: btm, 3: lft */
  620. side?: Axis.Side;
  621. /** height of x axis or width of y axis in CSS pixels alloted for values, gap & ticks, but excluding axis label */
  622. size?: Axis.Size;
  623. /** gap between axis values and axis baseline (or ticks, if enabled) in CSS pixels */
  624. gap?: number;
  625. /** font used for axis values */
  626. font?: CanvasRenderingContext2D['font'];
  627. /** color of axis label & values */
  628. stroke?: Axis.Stroke;
  629. /** axis label text */
  630. label?: string;
  631. /** height of x axis label or width of y axis label in CSS pixels */
  632. labelSize?: number;
  633. /** font used for axis label */
  634. labelFont?: CanvasRenderingContext2D['font'];
  635. /** minimum grid & tick spacing in CSS pixels */
  636. space?: Axis.Space;
  637. /** available divisors for axis ticks, values, grid */
  638. incrs?: Axis.Incrs;
  639. /** determines how and where the axis must be split for placing ticks, values, grid */
  640. splits?: Axis.Splits;
  641. /** can filter which splits are passed to axis.values() for rendering. e.g splits.map(v => v % 2 == 0 ? v : null) */
  642. filter?: Axis.Filter;
  643. /** formats values for rendering */
  644. values?: Axis.Values;
  645. /** values rotation in degrees off horizontal (only bottom axes w/ side: 2) */
  646. rotate?: Axis.Rotate;
  647. /** text alignment of axis values - 1: left, 2: right */
  648. align?: Axis.Align;
  649. /** gridlines to draw from this axis' splits */
  650. grid?: Axis.Grid;
  651. /** ticks to draw from this axis' splits */
  652. ticks?: Axis.Ticks;
  653. }
  654. export namespace Hooks {
  655. export interface Defs {
  656. /** fires after opts are defaulted & merged but data has not been set and scales have not been ranged */
  657. init?: (self: uPlot, opts: Options, data: AlignedData) => void;
  658. /** fires after any scale has changed */
  659. setScale?: (self: uPlot, scaleKey: string) => void;
  660. /** fires after the cursor is moved */
  661. setCursor?: (self: uPlot) => void;
  662. /** fires when cursor changes idx and legend updates (or should update) */
  663. setLegend?: (self: uPlot) => void;
  664. /** fires after a selection is completed */
  665. setSelect?: (self: uPlot) => void;
  666. /** fires after a series is toggled or focused */
  667. setSeries?: (self: uPlot, seriesIdx: number | null, opts: Series) => void;
  668. /** fires after data is updated updated */
  669. setData?: (self: uPlot) => void;
  670. /** fires after the chart is resized */
  671. setSize?: (self: uPlot) => void;
  672. /** fires at start of every redraw */
  673. drawClear?: (self: uPlot) => void;
  674. /** fires after all axes are drawn */
  675. drawAxes?: (self: uPlot) => void;
  676. /** fires after each series is drawn */
  677. drawSeries?: (self: uPlot, seriesIdx: number) => void;
  678. /** fires after everything is drawn */
  679. draw?: (self: uPlot) => void;
  680. /** fires after the chart is fully initialized and in the DOM */
  681. ready?: (self: uPlot) => void;
  682. /** fires after the chart is destroyed */
  683. destroy?: (self: uPlot) => void;
  684. /** fires after .u-over's getBoundingClientRect() is called (due to scroll or resize events) */
  685. syncRect?: (self: uPlot, rect: DOMRect) => void;
  686. }
  687. export type Arrays = {
  688. [P in keyof Defs]: Defs[P][]
  689. }
  690. export type ArraysOrFuncs = {
  691. [P in keyof Defs]: Defs[P][] | Defs[P]
  692. }
  693. }
  694. export interface Plugin {
  695. /** can mutate provided opts as necessary */
  696. opts?: (self: uPlot, opts: Options) => void | Options;
  697. hooks: Hooks.ArraysOrFuncs;
  698. }
  699. }
  700. export as namespace uPlot;