UNPKG

23.3 kBJavaScriptView Raw
1// 注册黑暗主题
2import { registerTheme } from './core';
3import { antvDark } from './theme/style-sheet/dark';
4import { createThemeByStyleSheet } from './theme/util/create-by-style-sheet';
5registerTheme('dark', createThemeByStyleSheet(antvDark));
6// 注册 G 渲染引擎
7import * as CanvasEngine from '@antv/g-canvas';
8import * as SVGEngine from '@antv/g-svg';
9import { registerEngine } from './core';
10registerEngine('canvas', CanvasEngine);
11registerEngine('svg', SVGEngine);
12// 注册 G2 内置的 geometry
13import { registerGeometry } from './core';
14import Area from './geometry/area';
15import Edge from './geometry/edge';
16import Heatmap from './geometry/heatmap';
17import Interval from './geometry/interval';
18import Line from './geometry/line';
19import Path from './geometry/path';
20import Point from './geometry/point';
21import Polygon from './geometry/polygon';
22import Schema from './geometry/schema';
23registerGeometry('Polygon', Polygon);
24registerGeometry('Interval', Interval);
25registerGeometry('Schema', Schema);
26registerGeometry('Path', Path);
27registerGeometry('Point', Point);
28registerGeometry('Line', Line);
29registerGeometry('Area', Area);
30registerGeometry('Edge', Edge);
31registerGeometry('Heatmap', Heatmap);
32// 引入所有内置的 shapes
33import './geometry/shape/area/line';
34import './geometry/shape/area/smooth';
35import './geometry/shape/area/smooth-line';
36import './geometry/shape/edge/arc';
37import './geometry/shape/edge/smooth';
38import './geometry/shape/edge/vhv';
39import './geometry/shape/interval/funnel';
40import './geometry/shape/interval/hollow-rect';
41import './geometry/shape/interval/line';
42import './geometry/shape/interval/pyramid';
43import './geometry/shape/interval/tick';
44import './geometry/shape/line/step';
45import './geometry/shape/point/hollow';
46import './geometry/shape/point/image';
47import './geometry/shape/point/solid';
48import './geometry/shape/schema/box';
49import './geometry/shape/schema/candle';
50import './geometry/shape/polygon/square';
51// 注册 Geometry 内置的 label
52import { registerGeometryLabel } from './core';
53import GeometryLabel from './geometry/label/base';
54import IntervalLabel from './geometry/label/interval';
55import PieLabel from './geometry/label/pie';
56import PolarLabel from './geometry/label/polar';
57registerGeometryLabel('base', GeometryLabel);
58registerGeometryLabel('interval', IntervalLabel);
59registerGeometryLabel('pie', PieLabel);
60registerGeometryLabel('polar', PolarLabel);
61// 注册 Geometry label 内置的布局函数
62import { registerGeometryLabelLayout } from './core';
63import { distribute } from './geometry/label/layout/pie/distribute';
64import { pieOuterLabelLayout } from './geometry/label/layout/pie/outer';
65import { pieSpiderLabelLayout } from './geometry/label/layout/pie/spider';
66import { limitInCanvas } from './geometry/label/layout/limit-in-canvas';
67import { limitInShape } from './geometry/label/layout/limit-in-shape';
68import { fixedOverlap, overlap } from './geometry/label/layout/overlap';
69import { hideOverlap } from './geometry/label/layout/hide-overlap';
70import { adjustColor } from './geometry/label/layout/adjust-color';
71import { intervalAdjustPosition } from './geometry/label/layout/interval/adjust-position';
72import { intervalHideOverlap } from './geometry/label/layout/interval/hide-overlap';
73import { pointAdjustPosition } from './geometry/label/layout/point/adjust-position';
74import { pathAdjustPosition } from './geometry/label/layout/path/adjust-position';
75import { limitInPlot } from './geometry/label/layout/limit-in-plot';
76registerGeometryLabelLayout('overlap', overlap);
77registerGeometryLabelLayout('distribute', distribute);
78registerGeometryLabelLayout('fixed-overlap', fixedOverlap);
79registerGeometryLabelLayout('hide-overlap', hideOverlap);
80registerGeometryLabelLayout('limit-in-shape', limitInShape);
81registerGeometryLabelLayout('limit-in-canvas', limitInCanvas);
82registerGeometryLabelLayout('limit-in-plot', limitInPlot);
83registerGeometryLabelLayout('pie-outer', pieOuterLabelLayout);
84registerGeometryLabelLayout('adjust-color', adjustColor);
85registerGeometryLabelLayout('interval-adjust-position', intervalAdjustPosition);
86registerGeometryLabelLayout('interval-hide-overlap', intervalHideOverlap);
87registerGeometryLabelLayout('point-adjust-position', pointAdjustPosition);
88registerGeometryLabelLayout('pie-spider', pieSpiderLabelLayout);
89registerGeometryLabelLayout('path-adjust-position', pathAdjustPosition);
90// 注册需要的动画执行函数
91import { fadeIn, fadeOut } from './animate/animation/fade';
92import { growInX, growInXY, growInY } from './animate/animation/grow-in';
93import { pathIn } from './animate/animation/path-in';
94import { positionUpdate } from './animate/animation/position-update';
95import { scaleInX, scaleInY } from './animate/animation/scale-in';
96import { sectorPathUpdate } from './animate/animation/sector-path-update';
97import { waveIn } from './animate/animation/wave-in';
98import { zoomIn, zoomOut } from './animate/animation/zoom';
99import { registerAnimation } from './core';
100registerAnimation('fade-in', fadeIn);
101registerAnimation('fade-out', fadeOut);
102registerAnimation('grow-in-x', growInX);
103registerAnimation('grow-in-xy', growInXY);
104registerAnimation('grow-in-y', growInY);
105registerAnimation('scale-in-x', scaleInX);
106registerAnimation('scale-in-y', scaleInY);
107registerAnimation('wave-in', waveIn);
108registerAnimation('zoom-in', zoomIn);
109registerAnimation('zoom-out', zoomOut);
110registerAnimation('position-update', positionUpdate);
111registerAnimation('sector-path-update', sectorPathUpdate);
112registerAnimation('path-in', pathIn);
113// 注册内置的 Facet
114import { registerFacet } from './core';
115import Circle from './facet/circle';
116import List from './facet/list';
117import Matrix from './facet/matrix';
118import Mirror from './facet/mirror';
119import Rect from './facet/rect';
120import Tree from './facet/tree';
121registerFacet('rect', Rect);
122registerFacet('mirror', Mirror);
123registerFacet('list', List);
124registerFacet('matrix', Matrix);
125registerFacet('circle', Circle);
126registerFacet('tree', Tree);
127// 注册内置的 Component
128import { registerComponentController } from './core';
129import Annotation from './chart/controller/annotation';
130import Axis from './chart/controller/axis';
131import Legend from './chart/controller/legend';
132import Slider from './chart/controller/slider';
133import Tooltip from './chart/controller/tooltip';
134import Scrollbar from './chart/controller/scrollbar';
135// register build-in components
136registerComponentController('axis', Axis);
137registerComponentController('legend', Legend);
138registerComponentController('tooltip', Tooltip);
139registerComponentController('annotation', Annotation);
140registerComponentController('slider', Slider);
141registerComponentController('scrollbar', Scrollbar);
142// 注册 Interaction Action
143import { registerAction } from './core';
144import ActiveRegion from './interaction/action/active-region';
145import SiblingTooltip from './interaction/action/component/tooltip/sibling';
146import TooltipAction from './interaction/action/component/tooltip/geometry';
147import EllipsisTextAction from './interaction/action/component/tooltip/ellipsis-text';
148import ElmentActive from './interaction/action/element/active';
149import ElementLinkByColor from './interaction/action/element/link-by-color';
150import ElmentRangeActive from './interaction/action/element/range-active';
151import ElmentSingleActive from './interaction/action/element/single-active';
152import ElmentHighlight from './interaction/action/element/highlight';
153import ElmentHighlightByColor from './interaction/action/element/highlight-by-color';
154import ElmentHighlightByX from './interaction/action/element/highlight-by-x';
155import ElmentRangeHighlight from './interaction/action/element/range-highlight';
156import ElmentSingleHighlight from './interaction/action/element/single-highlight';
157import ElementRangeSelected from './interaction/action/element/range-selected';
158import ElementSelected from './interaction/action/element/selected';
159import ElementSingleSelected from './interaction/action/element/single-selected';
160import ListActive from './interaction/action/component/list-active';
161import ListHighlight from './interaction/action/component/list-highlight';
162import ListSelected from './interaction/action/component/list-selected';
163import ListUnchecked from './interaction/action/component/list-unchecked';
164import CircleMask from './interaction/action/mask/circle';
165import DimMask from './interaction/action/mask/dim-rect';
166import PathMask from './interaction/action/mask/path';
167import RectMask from './interaction/action/mask/rect';
168import SmoothPathMask from './interaction/action/mask/smooth-path';
169import CursorAction from './interaction/action/cursor';
170import DataFilter from './interaction/action/data/filter';
171import DataRangeFilter from './interaction/action/data/range-filter';
172import SiblingFilter from './interaction/action/data/sibling-filter';
173import ElementFilter from './interaction/action/element/filter';
174import ElementSiblingFilter from './interaction/action/element/sibling-filter';
175import ButtonAction from './interaction/action/view/button';
176import ViewDrag from './interaction/action/view/drag';
177import ViewMove from './interaction/action/view/move';
178import ScaleTranslate from './interaction/action/view/scale-translate';
179import ScaleZoom from './interaction/action/view/scale-zoom';
180registerAction('tooltip', TooltipAction);
181registerAction('sibling-tooltip', SiblingTooltip);
182registerAction('ellipsis-text', EllipsisTextAction);
183registerAction('element-active', ElmentActive);
184registerAction('element-single-active', ElmentSingleActive);
185registerAction('element-range-active', ElmentRangeActive);
186registerAction('element-highlight', ElmentHighlight);
187registerAction('element-highlight-by-x', ElmentHighlightByX);
188registerAction('element-highlight-by-color', ElmentHighlightByColor);
189registerAction('element-single-highlight', ElmentSingleHighlight);
190registerAction('element-range-highlight', ElmentRangeHighlight);
191registerAction('element-sibling-highlight', ElmentRangeHighlight, {
192 effectSiblings: true,
193 effectByRecord: true,
194});
195registerAction('element-selected', ElementSelected);
196registerAction('element-single-selected', ElementSingleSelected);
197registerAction('element-range-selected', ElementRangeSelected);
198registerAction('element-link-by-color', ElementLinkByColor);
199registerAction('active-region', ActiveRegion);
200registerAction('list-active', ListActive);
201registerAction('list-selected', ListSelected);
202registerAction('list-highlight', ListHighlight);
203registerAction('list-unchecked', ListUnchecked);
204registerAction('legend-item-highlight', ListHighlight, {
205 componentNames: ['legend'],
206});
207registerAction('axis-label-highlight', ListHighlight, {
208 componentNames: ['axis'],
209});
210registerAction('rect-mask', RectMask);
211registerAction('x-rect-mask', DimMask, { dim: 'x' });
212registerAction('y-rect-mask', DimMask, { dim: 'y' });
213registerAction('circle-mask', CircleMask);
214registerAction('path-mask', PathMask);
215registerAction('smooth-path-mask', SmoothPathMask);
216registerAction('cursor', CursorAction);
217registerAction('data-filter', DataFilter);
218registerAction('brush', DataRangeFilter);
219registerAction('brush-x', DataRangeFilter, { dims: ['x'] });
220registerAction('brush-y', DataRangeFilter, { dims: ['y'] });
221registerAction('sibling-filter', SiblingFilter);
222registerAction('sibling-x-filter', SiblingFilter);
223registerAction('sibling-y-filter', SiblingFilter);
224registerAction('element-filter', ElementFilter);
225registerAction('element-sibling-filter', ElementSiblingFilter);
226registerAction('element-sibling-filter-record', ElementSiblingFilter, { byRecord: true });
227registerAction('view-drag', ViewDrag);
228registerAction('view-move', ViewMove);
229registerAction('scale-translate', ScaleTranslate);
230registerAction('scale-zoom', ScaleZoom);
231registerAction('reset-button', ButtonAction, {
232 name: 'reset-button',
233 text: 'reset',
234});
235// 注册默认的 Interaction 交互行为
236import { registerInteraction } from './core';
237function isPointInView(context) {
238 return context.isInPlot();
239}
240// 注册 tooltip 的 interaction
241registerInteraction('tooltip', {
242 start: [
243 { trigger: 'plot:mousemove', action: 'tooltip:show', throttle: { wait: 50, leading: true, trailing: false } },
244 { trigger: 'plot:touchmove', action: 'tooltip:show', throttle: { wait: 50, leading: true, trailing: false } },
245 ],
246 end: [
247 { trigger: 'plot:mouseleave', action: 'tooltip:hide' },
248 { trigger: 'plot:leave', action: 'tooltip:hide' },
249 { trigger: 'plot:touchend', action: 'tooltip:hide' },
250 ],
251});
252registerInteraction('ellipsis-text', {
253 start: [
254 {
255 trigger: 'legend-item-name:mousemove',
256 action: 'ellipsis-text:show',
257 throttle: { wait: 50, leading: true, trailing: false },
258 },
259 {
260 trigger: 'legend-item-name:touchstart',
261 action: 'ellipsis-text:show',
262 throttle: { wait: 50, leading: true, trailing: false },
263 },
264 {
265 trigger: 'axis-label:mousemove',
266 action: 'ellipsis-text:show',
267 throttle: { wait: 50, leading: true, trailing: false },
268 },
269 {
270 trigger: 'axis-label:touchstart',
271 action: 'ellipsis-text:show',
272 throttle: { wait: 50, leading: true, trailing: false },
273 },
274 ],
275 end: [
276 { trigger: 'legend-item-name:mouseleave', action: 'ellipsis-text:hide' },
277 { trigger: 'legend-item-name:touchend', action: 'ellipsis-text:hide' },
278 { trigger: 'axis-label:mouseleave', action: 'ellipsis-text:hide' },
279 { trigger: 'axis-label:touchend', action: 'ellipsis-text:hide' },
280 ],
281});
282// 移动到 element 上 active
283registerInteraction('element-active', {
284 start: [{ trigger: 'element:mouseenter', action: 'element-active:active' }],
285 end: [{ trigger: 'element:mouseleave', action: 'element-active:reset' }],
286});
287// 点击选中,允许取消
288registerInteraction('element-selected', {
289 start: [{ trigger: 'element:click', action: 'element-selected:toggle' }],
290});
291// hover highlight,允许取消
292registerInteraction('element-highlight', {
293 start: [{ trigger: 'element:mouseenter', action: 'element-highlight:highlight' }],
294 end: [{ trigger: 'element:mouseleave', action: 'element-highlight:reset' }],
295});
296// hover highlight by x,允许取消
297registerInteraction('element-highlight-by-x', {
298 start: [{ trigger: 'element:mouseenter', action: 'element-highlight-by-x:highlight' }],
299 end: [{ trigger: 'element:mouseleave', action: 'element-highlight-by-x:reset' }],
300});
301// hover highlight by y,允许取消
302registerInteraction('element-highlight-by-color', {
303 start: [{ trigger: 'element:mouseenter', action: 'element-highlight-by-color:highlight' }],
304 end: [{ trigger: 'element:mouseleave', action: 'element-highlight-by-color:reset' }],
305});
306// legend hover,element active
307registerInteraction('legend-active', {
308 start: [{ trigger: 'legend-item:mouseenter', action: ['list-active:active', 'element-active:active'] }],
309 end: [{ trigger: 'legend-item:mouseleave', action: ['list-active:reset', 'element-active:reset'] }],
310});
311// legend hover,element active
312registerInteraction('legend-highlight', {
313 start: [
314 { trigger: 'legend-item:mouseenter', action: ['legend-item-highlight:highlight', 'element-highlight:highlight'] },
315 ],
316 end: [{ trigger: 'legend-item:mouseleave', action: ['legend-item-highlight:reset', 'element-highlight:reset'] }],
317});
318// legend hover,element active
319registerInteraction('axis-label-highlight', {
320 start: [
321 { trigger: 'axis-label:mouseenter', action: ['axis-label-highlight:highlight', 'element-highlight:highlight'] },
322 ],
323 end: [{ trigger: 'axis-label:mouseleave', action: ['axis-label-highlight:reset', 'element-highlight:reset'] }],
324});
325// legend hover,element active
326registerInteraction('element-list-highlight', {
327 start: [{ trigger: 'element:mouseenter', action: ['list-highlight:highlight', 'element-highlight:highlight'] }],
328 end: [{ trigger: 'element:mouseleave', action: ['list-highlight:reset', 'element-highlight:reset'] }],
329});
330// 框选
331registerInteraction('element-range-highlight', {
332 showEnable: [
333 { trigger: 'plot:mouseenter', action: 'cursor:crosshair' },
334 { trigger: 'mask:mouseenter', action: 'cursor:move' },
335 { trigger: 'plot:mouseleave', action: 'cursor:default' },
336 { trigger: 'mask:mouseleave', action: 'cursor:crosshair' },
337 ],
338 start: [
339 {
340 trigger: 'plot:mousedown',
341 isEnable: function (context) {
342 // 不要点击在 mask 上重新开始
343 return !context.isInShape('mask');
344 },
345 action: ['rect-mask:start', 'rect-mask:show'],
346 },
347 {
348 trigger: 'mask:dragstart',
349 action: ['rect-mask:moveStart'],
350 },
351 ],
352 processing: [
353 {
354 trigger: 'plot:mousemove',
355 action: ['rect-mask:resize'],
356 },
357 {
358 trigger: 'mask:drag',
359 action: ['rect-mask:move'],
360 },
361 {
362 trigger: 'mask:change',
363 action: ['element-range-highlight:highlight'],
364 },
365 ],
366 end: [
367 { trigger: 'plot:mouseup', action: ['rect-mask:end'] },
368 { trigger: 'mask:dragend', action: ['rect-mask:moveEnd'] },
369 {
370 trigger: 'document:mouseup',
371 isEnable: function (context) {
372 return !context.isInPlot();
373 },
374 action: ['element-range-highlight:clear', 'rect-mask:end', 'rect-mask:hide'],
375 },
376 ],
377 rollback: [{ trigger: 'dblclick', action: ['element-range-highlight:clear', 'rect-mask:hide'] }],
378});
379registerInteraction('brush', {
380 showEnable: [
381 { trigger: 'plot:mouseenter', action: 'cursor:crosshair' },
382 { trigger: 'plot:mouseleave', action: 'cursor:default' },
383 ],
384 start: [
385 {
386 trigger: 'mousedown',
387 isEnable: isPointInView,
388 action: ['brush:start', 'rect-mask:start', 'rect-mask:show'],
389 },
390 ],
391 processing: [
392 {
393 trigger: 'mousemove',
394 isEnable: isPointInView,
395 action: ['rect-mask:resize'],
396 },
397 ],
398 end: [
399 {
400 trigger: 'mouseup',
401 isEnable: isPointInView,
402 action: ['brush:filter', 'brush:end', 'rect-mask:end', 'rect-mask:hide', 'reset-button:show'],
403 },
404 ],
405 rollback: [{ trigger: 'reset-button:click', action: ['brush:reset', 'reset-button:hide', 'cursor:crosshair'] }],
406});
407registerInteraction('brush-visible', {
408 showEnable: [
409 { trigger: 'plot:mouseenter', action: 'cursor:crosshair' },
410 { trigger: 'plot:mouseleave', action: 'cursor:default' },
411 ],
412 start: [
413 {
414 trigger: 'plot:mousedown',
415 action: ['rect-mask:start', 'rect-mask:show'],
416 },
417 ],
418 processing: [
419 {
420 trigger: 'plot:mousemove',
421 action: ['rect-mask:resize'],
422 },
423 { trigger: 'mask:change', action: ['element-range-highlight:highlight'] },
424 ],
425 end: [
426 {
427 trigger: 'plot:mouseup',
428 action: ['rect-mask:end', 'rect-mask:hide', 'element-filter:filter', 'element-range-highlight:clear'],
429 },
430 ],
431 rollback: [
432 {
433 trigger: 'dblclick',
434 action: ['element-filter:clear'],
435 },
436 ],
437});
438registerInteraction('brush-x', {
439 showEnable: [
440 { trigger: 'plot:mouseenter', action: 'cursor:crosshair' },
441 { trigger: 'plot:mouseleave', action: 'cursor:default' },
442 ],
443 start: [
444 {
445 trigger: 'mousedown',
446 isEnable: isPointInView,
447 action: ['brush-x:start', 'x-rect-mask:start', 'x-rect-mask:show'],
448 },
449 ],
450 processing: [
451 {
452 trigger: 'mousemove',
453 isEnable: isPointInView,
454 action: ['x-rect-mask:resize'],
455 },
456 ],
457 end: [
458 {
459 trigger: 'mouseup',
460 isEnable: isPointInView,
461 action: ['brush-x:filter', 'brush-x:end', 'x-rect-mask:end', 'x-rect-mask:hide'],
462 },
463 ],
464 rollback: [{ trigger: 'dblclick', action: ['brush-x:reset'] }],
465});
466registerInteraction('element-path-highlight', {
467 showEnable: [
468 { trigger: 'plot:mouseenter', action: 'cursor:crosshair' },
469 { trigger: 'plot:mouseleave', action: 'cursor:default' },
470 ],
471 start: [
472 { trigger: 'mousedown', isEnable: isPointInView, action: 'path-mask:start' },
473 { trigger: 'mousedown', isEnable: isPointInView, action: 'path-mask:show' },
474 ],
475 processing: [{ trigger: 'mousemove', action: 'path-mask:addPoint' }],
476 end: [{ trigger: 'mouseup', action: 'path-mask:end' }],
477 rollback: [{ trigger: 'dblclick', action: 'path-mask:hide' }],
478});
479// 点击选中,允许取消
480registerInteraction('element-single-selected', {
481 start: [{ trigger: 'element:click', action: 'element-single-selected:toggle' }],
482});
483// 筛选数据
484registerInteraction('legend-filter', {
485 showEnable: [
486 { trigger: 'legend-item:mouseenter', action: 'cursor:pointer' },
487 { trigger: 'legend-item:mouseleave', action: 'cursor:default' },
488 ],
489 start: [{ trigger: 'legend-item:click', action: ['list-unchecked:toggle', 'data-filter:filter'] }],
490});
491// 筛选数据
492registerInteraction('continuous-filter', {
493 start: [{ trigger: 'legend:valuechanged', action: 'data-filter:filter' }],
494});
495// 筛选数据
496registerInteraction('continuous-visible-filter', {
497 start: [{ trigger: 'legend:valuechanged', action: 'element-filter:filter' }],
498});
499// 筛选图形
500registerInteraction('legend-visible-filter', {
501 showEnable: [
502 { trigger: 'legend-item:mouseenter', action: 'cursor:pointer' },
503 { trigger: 'legend-item:mouseleave', action: 'cursor:default' },
504 ],
505 start: [{ trigger: 'legend-item:click', action: ['list-unchecked:toggle', 'element-filter:filter'] }],
506});
507// 出现背景框
508registerInteraction('active-region', {
509 start: [{ trigger: 'plot:mousemove', action: 'active-region:show' }],
510 end: [{ trigger: 'plot:mouseleave', action: 'active-region:hide' }],
511});
512function isWheelDown(event) {
513 event.gEvent.preventDefault();
514 return event.gEvent.originalEvent.deltaY > 0;
515}
516registerInteraction('view-zoom', {
517 start: [
518 {
519 trigger: 'plot:mousewheel',
520 isEnable: function (context) {
521 return isWheelDown(context.event);
522 },
523 action: 'scale-zoom:zoomOut',
524 throttle: { wait: 100, leading: true, trailing: false },
525 },
526 {
527 trigger: 'plot:mousewheel',
528 isEnable: function (context) {
529 return !isWheelDown(context.event);
530 },
531 action: 'scale-zoom:zoomIn',
532 throttle: { wait: 100, leading: true, trailing: false },
533 },
534 ],
535});
536registerInteraction('sibling-tooltip', {
537 start: [{ trigger: 'plot:mousemove', action: 'sibling-tooltip:show' }],
538 end: [{ trigger: 'plot:mouseleave', action: 'sibling-tooltip:hide' }],
539});
540export * from './core';
541//# sourceMappingURL=index.js.map
\No newline at end of file