Merge pull request #4197 from VisActor/feat/support-sankey-custom-layout

Feat/support sankey custom layout

Author: xuefei1313

packages/vchart/src/chart/sankey/sankey-transformer.ts

@@ -36,7 +36,8 @@ export class SankeyChartSpecTransformer<
       'link',
       'emphasis',
       'inverse',
-      'overflow'
+      'overflow',
+      'customLayout'
     ]);
 
     return series;

packages/vchart/src/core/vchart.ts

@@ -367,6 +367,9 @@ export class VChart implements IVChart {
   private _isReleased: boolean;
 
   private _chartPlugin?: IChartPluginService;
+  get chartPlugin() {
+    return this._chartPlugin;
+  }
   private _onResize?: () => void;
 
   constructor(spec: ISpec, options: IInitOption) {

packages/vchart/src/data/transforms/sankey.ts

@@ -7,6 +7,12 @@ export interface ISankeyOpt extends SankeyOptions {
   sourceField: string;
   valueField: string;
   view: () => { x0: number; x1: number; y0: number; y1: number };
+  customLayout?: (
+    layout: SankeyLayout,
+    originalData: SankeyData,
+    view: ReturnType<ISankeyOpt['view']>,
+    option: ISankeyOpt
+  ) => ReturnType<SankeyLayout['layout']>;
 }
 
 export const collectHierarchyField = (set: Set<any>, data: any[], field: string) => {
@@ -99,7 +105,11 @@ export const sankeyLayout = (data: SankeyData[], op: ISankeyOpt) => {
 
   const result = [];
 
-  result.push(layout.layout(originalData, view));
+  if (op.customLayout) {
+    result.push(op.customLayout(layout, originalData, view, op));
+  } else {
+    result.push(layout.layout(originalData, view));
+  }
 
   return result;
 };

packages/vchart/src/plugin/chart/plugin-service.ts

@@ -15,6 +15,10 @@ export class ChartPluginService<T extends IChartPlugin = IChartPlugin>
     this.globalInstance = globalInstance;
   }
 
+  getPlugin(name: string): T | undefined {
+    return this._plugins.find(plugin => plugin.name === name);
+  }
+
   onInit(chartSpec: any) {
     this._plugins.forEach(plugin => {
       plugin.onInit && plugin.onInit(this, chartSpec);

packages/vchart/src/plugin/chart/scroll/scroll.ts

@@ -1,12 +1,26 @@
-import type { IGroup } from '@visactor/vrender-core';
+import { isValidNumber, merge } from '@visactor/vutils';
+import type { IGroup, IRectGraphicAttribute } from '@visactor/vrender-core';
 import { BasePlugin } from '../../base/base-plugin';
 import type { IChartPluginService } from '../interface';
 import { registerChartPlugin } from '../register';
 import type { IScrollPlugin, IScrollPluginSpec } from './interface';
 import { ScrollBar as ScrollBarComponent } from '@visactor/vrender-components';
+import { Event } from '../../../event/event';
+import type { ExtendEventParam } from '../../../event/interface';
 
-const scrollBarSize = 10;
+// 由vrender透出, 接入新版本后需修改
+const SCROLLBAR_EVENT = 'scrollDrag';
+const SCROLLBAR_END_EVENT = 'scrollUp';
 
+const DefaultTheme: {
+  size?: number;
+  railStyle?: Omit<IRectGraphicAttribute, 'width' | 'height'>;
+  sliderStyle?: Omit<IRectGraphicAttribute, 'width' | 'height'>;
+} = {
+  size: 10,
+  railStyle: undefined,
+  sliderStyle: undefined
+};
 /**
  * ScrollPlugin 类
  * @since 1.0.0
@@ -15,26 +29,32 @@ export class ScrollPlugin extends BasePlugin implements IScrollPlugin {
   static readonly pluginType: 'chart' = 'chart';
   static readonly type: string = 'chartScroll';
   readonly type: string = 'chartScroll';
+  readonly name: string = ScrollPlugin.type;
 
   private _service: IChartPluginService;
 
   private _spec: IScrollPluginSpec;
+  private _lastScrollX = 0;
+  private _lastScrollY = 0;
 
   private _scrollLimit = {
     x: {
       min: 0,
       max: 0,
+      size: 0,
       percent: 0
     },
     y: {
       min: 0,
       max: 0,
+      size: 0,
       percent: 0
     }
   };
 
   private _xScrollComponent: ScrollBarComponent;
   private _yScrollComponent: ScrollBarComponent;
+  private _event: Event;
 
   constructor() {
     super(ScrollPlugin.type);
@@ -56,18 +76,24 @@ export class ScrollPlugin extends BasePlugin implements IScrollPlugin {
     const canvasSize = service.globalInstance.getChart().getCanvasRect();
     this._scrollLimit.x.min = Math.min(canvasSize.width - viewBoxSize.width, 0);
     this._scrollLimit.x.percent = Math.abs(canvasSize.width / viewBoxSize.width);
+    this._scrollLimit.x.size = viewBoxSize.width;
     this._scrollLimit.y.min = Math.min(canvasSize.height - viewBoxSize.height, 0);
     this._scrollLimit.y.percent = Math.abs(canvasSize.height / viewBoxSize.height);
+    this._scrollLimit.y.size = viewBoxSize.height;
+
+    if (!this._event) {
+      this._event = new Event(this._service.globalInstance.getChart().getOption().eventDispatcher, null);
+    }
   }
 
   onAfterRender() {
     const rootMark = this.getRootMark();
     if (rootMark) {
       if (!this._xScrollComponent) {
-        this._updateScrollX(rootMark, 0);
+        this._updateScrollX(rootMark, 0, 0);
       }
       if (!this._yScrollComponent) {
-        this._updateScrollY(rootMark, 0);
+        this._updateScrollY(rootMark, 0, 0);
       }
     }
   }
@@ -94,20 +120,57 @@ export class ScrollPlugin extends BasePlugin implements IScrollPlugin {
     if (!rootMark) {
       return;
     }
-    this._updateScrollX(rootMark, rootMark.attribute.x - scrollX);
-    this._updateScrollY(rootMark, rootMark.attribute.y - scrollY);
+    const { percent: yPercent, y } = this._computeFinalScrollY(rootMark.attribute.y - scrollY) ?? {};
+    const { percent: xPercent, x } = this._computeFinalScrollX(rootMark.attribute.x - scrollX) ?? {};
+    const eventResult: { x?: number; y?: number } = {};
+    if (isValidNumber(x)) {
+      this._updateScrollX(rootMark, x, xPercent);
+      eventResult.x = x;
+    }
+    if (isValidNumber(y)) {
+      this._updateScrollY(rootMark, y, yPercent);
+      eventResult.y = y;
+    }
+
+    this._event.emit('chartScroll', eventResult as ExtendEventParam);
   };
 
-  private _updateScrollY(rootMark: IGroup, y: number) {
+  private _computeFinalScrollY(y: number) {
+    if (this._lastScrollY === y) {
+      return null;
+    }
+    this._lastScrollY = y;
     if (this._spec.y?.enable === false) {
-      return;
+      return null;
     }
     const finalY = Math.max(this._scrollLimit.y.min, Math.min(y, this._scrollLimit.y.max));
-    const percent = Math.abs(finalY / this._scrollLimit.y.min);
+    const percent = Math.abs(finalY / this._scrollLimit.y.size);
+    return {
+      y: finalY,
+      percent
+    };
+  }
+  private _computeFinalScrollX(x: number) {
+    if (this._lastScrollX === x) {
+      return null;
+    }
+    this._lastScrollX = x;
+    if (this._spec.x?.enable === false) {
+      return null;
+    }
+    const finalX = Math.max(this._scrollLimit.x.min, Math.min(x, this._scrollLimit.x.max));
+    const percent = Math.abs(finalX / this._scrollLimit.x.size);
+    return {
+      x: finalX,
+      percent
+    };
+  }
+
+  private _updateScrollY(rootMark: IGroup, y: number, percent: number) {
     const yScrollComponent = this._getYScrollComponent();
     yScrollComponent.setAttribute('range', [percent, percent + this._scrollLimit.y.percent]);
     rootMark.setAttributes({
-      y: finalY
+      y: y
     });
   }
 
@@ -119,32 +182,44 @@ export class ScrollPlugin extends BasePlugin implements IScrollPlugin {
       this._yScrollComponent = new ScrollBarComponent({
         ...rest,
         zIndex: 9999,
-        x: canvasSize.width - scrollBarSize,
+        x: canvasSize.width - DefaultTheme.size,
         y: 0,
-        width: scrollBarSize,
+        width: DefaultTheme.size,
         height: canvasSize.height,
         range: [0, canvasSize.height / viewSize.height],
         direction: 'vertical',
         delayTime: rest?.delayTime ?? 30,
         realTime: rest?.realTime ?? true,
-        sliderStyle: { fill: 'rgba(0,0,0,0.3)' }
+        railStyle: DefaultTheme.railStyle,
+        sliderStyle: DefaultTheme.sliderStyle
+      });
+      // 绑定事件，防抖，防止频繁触发
+      this._yScrollComponent.addEventListener(SCROLLBAR_EVENT, (e: any) => {
+        const value = e.detail.value;
+        const { percent, y } = this._computeFinalScrollY(-value[0] * this._scrollLimit.y.size) ?? {};
+        if (percent !== undefined && y !== undefined) {
+          this._updateScrollY(this.getRootMark(), y, percent);
+          this._event.emit('chartScroll', { y } as ExtendEventParam);
+        }
+      });
+      this._yScrollComponent.addEventListener(SCROLLBAR_END_EVENT, (e: any) => {
+        const value = e.detail.value;
+        const { percent, y } = this._computeFinalScrollY(-value[0] * this._scrollLimit.y.size) ?? {};
+        if (percent !== undefined && y !== undefined) {
+          this._updateScrollY(this.getRootMark(), y, percent);
+          this._event.emit('chartScroll', { y } as ExtendEventParam);
+        }
       });
       this.getRootMark().parent?.addChild(this._yScrollComponent);
     }
     return this._yScrollComponent;
   }
 
-  private _updateScrollX(rootMark: IGroup, x: number) {
-    if (this._spec.x?.enable === false) {
-      return;
-    }
-    const finalX = Math.max(this._scrollLimit.x.min, Math.min(x, this._scrollLimit.x.max));
-    const percent = Math.abs(finalX / this._scrollLimit.x.min);
+  private _updateScrollX(rootMark: IGroup, x: number, percent: number) {
     const xScrollComponent = this._getXScrollComponent();
     xScrollComponent.setAttribute('range', [percent, percent + this._scrollLimit.x.percent]);
-
     rootMark.setAttributes({
-      x: finalX
+      x: x
     });
   }
 
@@ -157,24 +232,71 @@ export class ScrollPlugin extends BasePlugin implements IScrollPlugin {
         ...rest,
         zIndex: 9999,
         x: 0,
-        y: canvasSize.height - scrollBarSize,
+        y: canvasSize.height - DefaultTheme.size,
         width: canvasSize.width,
-        height: scrollBarSize,
+        height: DefaultTheme.size,
         range: [0, canvasSize.width / viewSize.width],
         direction: 'horizontal',
         delayTime: rest?.delayTime ?? 30,
-        realTime: rest?.realTime ?? true
+        realTime: rest?.realTime ?? true,
+        sliderStyle: DefaultTheme.sliderStyle,
+        railStyle: DefaultTheme.railStyle
+      });
+      // 绑定事件，防抖，防止频繁触发
+      this._xScrollComponent.addEventListener(SCROLLBAR_EVENT, (e: any) => {
+        const value = e.detail.value;
+        const { percent, x } = this._computeFinalScrollX(-value[0] * this._scrollLimit.x.size) ?? {};
+        if (percent !== undefined && x !== undefined) {
+          this._updateScrollX(this.getRootMark(), x, percent);
+          this._event.emit('chartScroll', { x } as ExtendEventParam);
+        }
+      });
+      this._xScrollComponent.addEventListener(SCROLLBAR_END_EVENT, (e: any) => {
+        const value = e.detail.value;
+        const { percent, x } = this._computeFinalScrollX(-value[0] * this._scrollLimit.x.size) ?? {};
+        if (percent !== undefined && x !== undefined) {
+          this._updateScrollX(this.getRootMark(), x, percent);
+          this._event.emit('chartScroll', { x } as ExtendEventParam);
+        }
       });
       this.getRootMark().parent?.addChild(this._xScrollComponent);
     }
     return this._xScrollComponent;
   }
+
+  /**
+   * api
+   */
+  scrollTo({ x, y }: { x?: number; y?: number }) {
+    const rootMark = this.getRootMark();
+    if (rootMark) {
+      if (x !== undefined) {
+        const { x: finalX, percent } = this._computeFinalScrollX(x) ?? {};
+        if (finalX !== undefined && percent !== undefined) {
+          this._updateScrollX(rootMark, finalX, percent);
+        }
+      }
+      if (y !== undefined) {
+        const { y: finalY, percent } = this._computeFinalScrollY(y) ?? {};
+        if (finalY !== undefined && percent !== undefined) {
+          this._updateScrollY(rootMark, finalY, percent);
+        }
+      }
+    }
+  }
 }
 
 /**
  * 注册 ScrollPlugin
  * @since 1.0.0
  */
-export const registerScrollPlugin = () => {
+export const registerScrollPlugin = (theme?: {
+  size?: number;
+  railStyle?: Omit<IRectGraphicAttribute, 'width' | 'height'>;
+  sliderStyle?: Omit<IRectGraphicAttribute, 'width' | 'height'>;
+}) => {
+  DefaultTheme.size = theme?.size ?? DefaultTheme.size;
+  DefaultTheme.railStyle = merge({}, DefaultTheme.railStyle ?? {}, theme?.railStyle ?? {});
+  DefaultTheme.sliderStyle = merge({}, DefaultTheme.sliderStyle ?? {}, theme?.sliderStyle ?? {});
   registerChartPlugin(ScrollPlugin);
 };

packages/vchart/src/series/sankey/interface.ts

@@ -4,6 +4,8 @@ import type { IRectMarkSpec, ILinkPathMarkSpec } from '../../typings/visual';
 import type { IAnimationSpec } from '../../animation/spec';
 import type { SeriesMarkNameEnum } from '../interface/type';
 import type { ILabelSpec } from '../../component/label/interface';
+import type { SankeyLayout } from '@visactor/vgrammar-sankey';
+import type { ISankeyOpt } from '../../data/transforms/sankey';
 
 export type SankeyMark = 'node' | 'link' | 'label';
 
@@ -200,6 +202,16 @@ export interface ISankeySeriesSpec extends Omit<ISeriesSpec, 'data'>, IAnimation
   //   /** 是否开启进度条 */
   //   enable: boolean;
   // };
+
+  /**
+   * 自定义布局
+   * @since 1.13.19
+   */
+  customLayout?: (
+    layout: SankeyLayout,
+    originalData: SankeyData,
+    view: ReturnType<ISankeyOpt['view']>
+  ) => ReturnType<SankeyLayout['layout']>;
 }
 
 export interface SankeyLinkDatum {

packages/vchart/src/series/sankey/sankey.ts

@@ -145,7 +145,8 @@ export class SankeySeries<T extends ISankeySeriesSpec = ISankeySeriesSpec> exten
           linkHeight: this._spec.linkHeight,
           equalNodeHeight: this._spec.equalNodeHeight,
           linkOverlap: this._spec.linkOverlap,
-          inverse: this._spec.inverse
+          inverse: this._spec.inverse,
+          customLayout: this._spec.customLayout
         } as ISankeyOpt,
         level: TransformLevel.sankeyLayout
       });