mark.d.ts 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. import { MarkComponent } from '../runtime';
  2. import { Encode } from './encode';
  3. import { Transform } from './transform';
  4. import { Scale } from './scale';
  5. import { Coordinate } from './coordinate';
  6. import { Animation } from './animate';
  7. import { Interaction } from './interaction';
  8. import { Theme } from './theme';
  9. import { Data } from './data';
  10. import { AxisComponent, LegendComponent, ScrollbarComponent, SliderComponent, TitleComponent, TooltipComponent } from './component';
  11. import { Closeable, Literal2Object, Padding } from './utils';
  12. export type Mark = IntervalMark | RectMark | LineMark | PointMark | TextMark | CellMark | AreaMark | NodeMark | EdgeMark | ImageMark | PolygonMark | BoxMark | VectorMark | LineXMark | LineYMark | RangeMark | RangeXMark | RangeYMark | ConnectorMark | SankeyMark | PathMark | TreemapMark | PackMark | BoxPlotMark | ShapeMark | ForceGraphMark | TreeMark | WordCloudMark | DensityMark | CustomMark;
  13. export type MarkTypes = 'interval' | 'rect' | 'line' | 'point' | 'text' | 'cell' | 'area' | 'node' | 'edge' | 'link' | 'image' | 'polygon' | 'box' | 'vector' | 'lineX' | 'lineY' | 'connector' | 'range' | 'rangeX' | 'rangeY' | 'sankey' | 'path' | 'treemap' | 'pack' | 'boxplot' | 'shape' | 'forceGraph' | 'tree' | 'wordCloud' | 'gauge' | 'density' | 'heatmap' | MarkComponent;
  14. export type ChannelTypes = 'x' | 'y' | 'x1' | 'y1' | 'series' | 'color' | 'opacity' | 'shape' | 'size' | 'key' | 'groupKey' | 'position' | 'series' | 'enterType' | 'enterEasing' | 'enterDuration' | 'enterDelay' | 'updateType' | 'updateEasing' | 'updateDuration' | 'updateDelay' | 'exitType' | 'exitEasing' | 'exitDuration' | 'exitDelay' | `position${number}`;
  15. export type PositionChannelTypes = 'x' | 'y' | 'position' | `position${number}`;
  16. export type AtheisticChanelTypes = 'size' | 'color' | 'shape' | 'opacity';
  17. export type BaseMark<T extends MarkTypes, C extends string = ChannelTypes> = {
  18. type?: T | string;
  19. class?: string;
  20. key?: string;
  21. x?: number;
  22. y?: number;
  23. width?: number;
  24. height?: number;
  25. paddingLeft?: Padding;
  26. paddingRight?: Padding;
  27. paddingBottom?: Padding;
  28. paddingTop?: Padding;
  29. padding?: Padding;
  30. inset?: number;
  31. insetLeft?: number;
  32. insetBottom?: number;
  33. insetTop?: number;
  34. insetRight?: number;
  35. margin?: number;
  36. marginLeft?: number;
  37. marginBottom?: number;
  38. marginTop?: number;
  39. marginRight?: number;
  40. facet?: boolean;
  41. frame?: boolean;
  42. zIndex?: number;
  43. cartesian?: boolean;
  44. clip?: boolean;
  45. data?: Data;
  46. transform?: Transform[];
  47. layout?: Record<string, any>;
  48. encode?: Partial<Record<C, Encode | Encode[]>>;
  49. scale?: Partial<Record<C, Scale>>;
  50. coordinate?: Coordinate;
  51. style?: Record<string, any>;
  52. state?: Partial<Record<'active' | 'selected' | 'inactive' | 'unselected', Record<string, any>>>;
  53. animate?: Closeable<Partial<Record<'enter' | 'update' | 'exit', Closeable<Animation>>>>;
  54. labels?: Record<string, any>[];
  55. tooltip?: TooltipComponent;
  56. axis?: Closeable<Partial<Record<PositionChannelTypes, Closeable<AxisComponent>>>>;
  57. legend?: Closeable<Partial<Record<AtheisticChanelTypes, Closeable<LegendComponent>>>>;
  58. slider?: Closeable<Partial<Record<PositionChannelTypes, Closeable<SliderComponent>>>>;
  59. scrollbar?: Closeable<Partial<Record<PositionChannelTypes, Closeable<ScrollbarComponent>>>>;
  60. title?: string | TitleComponent;
  61. interaction?: Literal2Object<Interaction>;
  62. theme?: Theme;
  63. };
  64. export type HOMMarkType = (options: Record<string, any>) => () => any[];
  65. export type HOMMarkMark = BaseMark<HOMMarkType>;
  66. export type IntervalMark = BaseMark<'interval', ChannelTypes | 'series'>;
  67. export type RectMark = BaseMark<'rect', ChannelTypes>;
  68. export type LineMark = BaseMark<'line', ChannelTypes | 'position' | `position${number}`>;
  69. export type PointMark = BaseMark<'point'>;
  70. export type TextMark = BaseMark<'text', ChannelTypes | 'text' | 'fontSize' | 'fontWeight' | 'rotate'>;
  71. export type LineXMark = BaseMark<'lineX', ChannelTypes>;
  72. export type LineYMark = BaseMark<'lineY', ChannelTypes>;
  73. export type RangeMark = BaseMark<'range', ChannelTypes>;
  74. export type RangeXMark = BaseMark<'rangeX', ChannelTypes>;
  75. export type RangeYMark = BaseMark<'rangeY', ChannelTypes>;
  76. export type ConnectorMark = BaseMark<'connector', ChannelTypes>;
  77. export type CellMark = BaseMark<'cell', ChannelTypes>;
  78. export type AreaMark = BaseMark<'area', ChannelTypes>;
  79. export type NodeMark = BaseMark<'node', ChannelTypes>;
  80. export type EdgeMark = BaseMark<'edge', ChannelTypes>;
  81. export type LinkMark = BaseMark<'link', ChannelTypes>;
  82. export type ImageMark = BaseMark<'image', ChannelTypes | 'src'>;
  83. export type PolygonMark = BaseMark<'polygon', ChannelTypes>;
  84. export type BoxMark = BaseMark<'box', ChannelTypes>;
  85. export type BoxPlotMark = BaseMark<'box', ChannelTypes>;
  86. export type ShapeMark = BaseMark<'shape', ChannelTypes>;
  87. export type VectorMark = BaseMark<'vector', ChannelTypes | 'rotate' | 'size'>;
  88. export type SankeyMark = BaseMark<'sankey', 'source' | 'target' | 'value' | `node${Capitalize<ChannelTypes>}` | `link${Capitalize<ChannelTypes>}` | ChannelTypes> & {
  89. layout?: {
  90. nodeId?: (node: any) => string;
  91. nodes?: (graph: any) => any;
  92. links?: (graph: any) => any;
  93. /**
  94. * sankey.nodeSort(undefined) is the default and resorts by ascending breadth during each iteration.
  95. * sankey.nodeSort(null) specifies the input order of nodes and never sorts.
  96. * sankey.nodeSort(function) specifies the given order as a comparator function and sorts once on initialization.
  97. */
  98. nodeSort?: null | undefined | ((a: any, b: any) => number);
  99. /**
  100. * sankey.linkSort(undefined) is the default, indicating that vertical order of links within each node will be determined automatically by the layout. If
  101. * sankey.linkSort(null) will resort by the input.
  102. * sankey.linkSort(function) specifies the given order as a comparator function and sorts once on initialization.
  103. */
  104. linkSort?: null | undefined | ((a: any, b: any) => number);
  105. nodeAlign?: 'left' | 'center' | 'right' | 'justify' | ((node: any, n: number) => number);
  106. nodeWidth?: number;
  107. nodePadding?: number;
  108. iterations?: number;
  109. nodeDepth?: (datum: any, maxDepth: number) => number;
  110. };
  111. nodeLabels: Record<string, any>[];
  112. linkLabels: Record<string, any>[];
  113. };
  114. export type PathMark = BaseMark<'path', ChannelTypes>;
  115. export type TreemapMark = BaseMark<'treemap', 'value' | ChannelTypes> & {
  116. layout?: Record<string, any>;
  117. };
  118. export type PackMark = BaseMark<'pack', 'value' | ChannelTypes> & {
  119. layout?: Record<string, any>;
  120. };
  121. export type ForceGraphMark = BaseMark<'forceGraph', 'source' | 'target' | 'color' | 'value' | `node${Capitalize<ChannelTypes>}` | `link${Capitalize<ChannelTypes>}`> & {
  122. layout?: Record<string, any>;
  123. nodeLabels: Record<string, any>[];
  124. linkLabels: Record<string, any>[];
  125. };
  126. export type TreeMark = BaseMark<'tree', 'value' | ChannelTypes> & {
  127. layout?: {
  128. /**
  129. * Layout field. Default: 'value'.
  130. */
  131. field?: string;
  132. /**
  133. * Sets this cluster layout’s node size to the specified two-element array of numbers [width, height] and returns this cluster layout.
  134. * Default: null.
  135. */
  136. nodeSize?: any;
  137. /**
  138. * The separation accessor is used to separate neighboring leaves. Default: (a, b) => a.parent == b.parent ? 1 : 2;
  139. */
  140. separation?: (a: any, b: any) => number;
  141. /**
  142. * Sort function by compare 2 nodes.
  143. */
  144. sortBy?: (a: any, b: any) => number;
  145. /**
  146. * Layout infomation saved into fields. Default: ['x', 'y'].
  147. */
  148. as?: [string, string];
  149. };
  150. nodeLabels: Record<string, any>[];
  151. linkLabels: Record<string, any>[];
  152. };
  153. export type WordCloudMark = BaseMark<'wordCloud', 'value' | ChannelTypes | 'text'> & {
  154. layout?: {
  155. /**
  156. * @description If specified, sets the rectangular [width, height] of the layout
  157. * @default [1, 1]
  158. */
  159. size?: [number, number];
  160. font?: string | ((word: any) => string);
  161. fontStyle?: string | ((word: any) => string);
  162. fontWeight?: any | ((word: any) => any);
  163. fontSize?: number | [number, number] | ((word: any) => number);
  164. padding?: number | ((word: any) => number);
  165. /**
  166. * @description sets the text accessor function, which indicates the text for each word
  167. * @default (d) => d.text
  168. */
  169. text?: (word: any) => number;
  170. rotate?: number | ((word: any) => number);
  171. timeInterval?: number;
  172. random?: number | (() => number);
  173. /**
  174. * @description sets the current type of spiral used for positioning words. This can either be one of the two built-in spirals, "archimedean" and "rectangular"
  175. * @default "archimedean"
  176. */
  177. spiral?: 'archimedean' | 'rectangular' | ((size: [number, number]) => (t: number) => number[]);
  178. imageMask?: HTMLImageElement | string;
  179. on?: ((type: 'end', details?: {
  180. cloud: any;
  181. words: any;
  182. bounds: any;
  183. }) => void) | ((type: 'word', details?: {
  184. cloud: any;
  185. word: any;
  186. }) => void);
  187. };
  188. };
  189. export type GaugeMark = BaseMark<'gauge', `arc${Capitalize<ChannelTypes>}` | `indicator${Capitalize<ChannelTypes>}` | `pointer${Capitalize<ChannelTypes>}` | `pin${Capitalize<ChannelTypes>}` | ChannelTypes>;
  190. export type DensityMark = BaseMark<'density', ChannelTypes | 'series'>;
  191. export type HeatmapMark = BaseMark<'heatmap'>;
  192. export type CustomMark = BaseMark<MarkComponent, ChannelTypes>;