feat: support compare sankey chart

Author: xuefei1313

packages/vchart-extension/package.json

@@ -25,9 +25,9 @@
     "@visactor/vrender-kits": "1.0.9",
     "@visactor/vrender-components": "1.0.9",
     "@visactor/vrender-animate": "1.0.9",
-    "@visactor/vutils": "~1.0.6",
-    "@visactor/vdataset": "~1.0.6",
-    "@visactor/vlayouts": "~1.0.6",
+    "@visactor/vutils": "~1.0.9",
+    "@visactor/vdataset": "~1.0.9",
+    "@visactor/vlayouts": "~1.0.9",
     "@visactor/vchart": "workspace:2.0.1"
   },
   "devDependencies": {

packages/vchart-extension/src/charts/compare-sankey/compare-sankey-sub-data.ts

@@ -0,0 +1,61 @@
+import type { DataView } from '@visactor/vdataset';
+import { field, isFunction } from '@visactor/vutils';
+import { computeNodeValues, computeHierarchicNodeLinks } from '@visactor/vlayouts/es/sankey/hierarchy';
+import type { SankeyNodeElement } from '@visactor/vlayouts/es/sankey/interface';
+
+export interface ICompareSankeyLayoutOpt {
+  rawData: () => DataView;
+  nodeKey: string;
+  subNodeGap: number;
+}
+
+export const compareSankeySubData = (data: Array<DataView>, opt: ICompareSankeyLayoutOpt) => {
+  const viewData = data[0] as DataView;
+  if (!viewData.latestData?.length) {
+    return {};
+  }
+  // 读取参数
+  const rawDataTree = opt.rawData().latestData[0];
+  const subNodeGap = opt.subNodeGap;
+  const keyFunc = isFunction(opt.nodeKey) ? opt.nodeKey : opt.nodeKey ? field(opt.nodeKey as string) : null;
+
+  const subNodeMap: { [key: string]: any } = {};
+  rawDataTree.subNode.forEach((sunGroup: any) => {
+    subNodeMap[sunGroup.type] = computeHierarchicNodeLinks(sunGroup.nodes, keyFunc);
+    computeNodeValues(subNodeMap[sunGroup.type].nodes);
+  });
+  const subCount = Object.keys(subNodeMap).length;
+
+  const subNodes: any[] = [];
+  viewData.latestData[0].nodes.forEach((n: SankeyNodeElement) => {
+    let path: (string | number)[] = [];
+    if (n.targetLinks.length) {
+      const link = n.targetLinks[0];
+      path = [...link.parents];
+    }
+    path.push(n.key);
+    // 根据path获取sub的节点
+    // 当前已使用比例
+    let currentY = n.y0;
+    const totalSize = n.y1 - n.y0 - (subCount - 1) * subNodeGap;
+    const totalValue = n.value;
+    rawDataTree.subNode.forEach((sunGroup: any) => {
+      const subNode = (subNodeMap[sunGroup.type].nodes as SankeyNodeElement[]).find(subN => subN.key === n.key);
+      if (!subNode) {
+        return;
+      }
+      const percent = subNode.value / totalValue;
+      subNode.x0 = n.x0;
+      subNode.x1 = n.x1;
+      subNode.y0 = currentY;
+      subNode.y1 = currentY + totalSize * percent;
+      // @ts-ignore
+      subNode.type = sunGroup.type;
+      // @ts-ignore
+      subNode.sourceNode = n;
+      currentY += totalSize * percent + subNodeGap;
+      subNodes.push(subNode);
+    });
+  });
+  return subNodeMap;
+};

packages/vchart-extension/src/charts/compare-sankey/compare-sankey-sub-nodes.ts

@@ -0,0 +1,17 @@
+import type { DataView } from '@visactor/vdataset';
+
+export const compareSankeySubNodes = (data: Array<DataView>) => {
+  const viewData = data[0] as DataView;
+  if (!viewData.latestData) {
+    return [];
+  }
+  const subData = Object.keys(viewData.latestData);
+  if (!subData.length) {
+    return {};
+  }
+  const subNodes: any[] = [];
+  subData.forEach(key => {
+    subNodes.push(...viewData.latestData[key].nodes);
+  });
+  return [{ nodes: subNodes }];
+};

packages/vchart-extension/src/charts/compare-sankey/compare-sankey-transformer.ts

@@ -0,0 +1,17 @@
+import type { ICompareSankeyChartSpecBase } from './interface';
+import { SankeyChartSpecTransformer } from '@visactor/vchart';
+
+export class CompareSankeyChartSpecTransformer extends SankeyChartSpecTransformer<ICompareSankeyChartSpecBase> {
+  transformSpec(spec: ICompareSankeyChartSpecBase): void {
+    super.transformSpec(spec);
+  }
+
+  _getDefaultSeriesSpec(spec: ICompareSankeyChartSpecBase) {
+    const seriesSpec = super._getDefaultSeriesSpec(spec);
+    (seriesSpec as ICompareSankeyChartSpecBase).subNodeGap = spec.subNodeGap;
+    (seriesSpec as ICompareSankeyChartSpecBase).compareNodeColor = spec.compareNodeColor;
+    (seriesSpec as ICompareSankeyChartSpecBase).compareLinkColor = spec.compareLinkColor;
+    (seriesSpec as ICompareSankeyChartSpecBase).activeLink = spec.activeLink;
+    return seriesSpec;
+  }
+}