@visactor/vchart 1.10.2 → 1.10.3

package/esm/series/sankey/sankey.d.ts

@@ -5,7 +5,7 @@ import type { Datum } from '../../typings';
 import { SeriesData } from '../base/series-data';
 import type { ISankeySeriesSpec } from './interface';
 import type { ExtendEventParam } from '../../event/interface';
-import type { IElement, IGlyphElement } from '@visactor/vgrammar-core';
+import type { IElement, IGlyphElement, IMark as IVgrammarMark } from '@visactor/vgrammar-core';
 import type { IMark } from '../../mark/interface';
 export declare class SankeySeries<T extends ISankeySeriesSpec = ISankeySeriesSpec> extends CartesianSeries<T> {
     static readonly type: string;
@@ -46,6 +46,7 @@ export declare class SankeySeries<T extends ISankeySeriesSpec = ISankeySeriesSpe
     protected _handleLinkAdjacencyClick: (element: IGlyphElement) => void;
     protected _handleNodeRelatedClick: (element: IElement) => void;
     protected _handleLinkRelatedClick: (element: IGlyphElement) => void;
+    protected _highLightElements(vGrammarElements: IVgrammarMark['elements'], highlightNodes: string[]): void;
     protected initTooltip(): void;
     _setNodeOrdinalColorScale(): void;
     getNodeList(): any;

package/esm/series/sankey/sankey.js

@@ -20,7 +20,7 @@ import { STATE_VALUE_ENUM } from "../../compile/mark/interface";
 
 import { DataView } from "@visactor/vdataset";
 
-import { LayoutZIndex, AttributeLevel, Event_Bubble_Level, DEFAULT_DATA_INDEX } from "../../constant";
+import { LayoutZIndex, AttributeLevel, Event_Bubble_Level } from "../../constant";
 
 import { SeriesData } from "../base/series-data";
 
@@ -58,26 +58,24 @@ export class SankeySeries extends CartesianSeries {
             const element = params.item;
             element && element.mark.id().includes("node") ? this._handleNodeRelatedClick(element) : element && element.mark.id().includes("link") ? this._handleLinkRelatedClick(element) : this._handleClearEmpty();
         }, this._handleClearEmpty = () => {
-            const nodeVGrammarMark = this._nodeMark.getProduct();
-            if (!nodeVGrammarMark || !nodeVGrammarMark.elements || !nodeVGrammarMark.elements.length) return;
-            const allNodeElements = nodeVGrammarMark.elements, linkVGrammarMark = this._linkMark.getProduct();
-            if (!linkVGrammarMark || !linkVGrammarMark.elements || !linkVGrammarMark.elements.length) return;
-            const allLinkElements = linkVGrammarMark.elements, labelVGrammarMark = this._labelMark.getProduct();
-            if (!labelVGrammarMark || !labelVGrammarMark.elements || !labelVGrammarMark.elements.length) return;
-            const allLabelElements = labelVGrammarMark.elements;
-            allNodeElements.forEach((el => {
+            const allNodeElements = this._nodeMark.getProductElements();
+            if (!allNodeElements || !allNodeElements.length) return;
+            const allLinkElements = this._linkMark.getProductElements();
+            if (!allLinkElements || !allLinkElements.length) return;
+            const allLabelElements = this._labelMark.getProductElements();
+            allLabelElements && allLabelElements.length && (allNodeElements.forEach((el => {
                 el.clearStates();
             })), allLinkElements.forEach((el => {
                 el.clearStates();
             })), allLabelElements.forEach((el => {
                 el.clearStates();
-            }));
+            })));
         }, this._handleNodeAdjacencyClick = element => {
             const nodeDatum = element.getDatum(), highlightNodes = [ nodeDatum.key ];
             if (this._linkMark) {
-                const vGrammarMark = this._linkMark.getProduct();
-                if (!vGrammarMark || !vGrammarMark.elements || !vGrammarMark.elements.length) return;
-                vGrammarMark.elements.forEach(((linkEl, i) => {
+                const allLinkElements = this._linkMark.getProductElements();
+                if (!allLinkElements || !allLinkElements.length) return;
+                allLinkElements.forEach(((linkEl, i) => {
                     linkEl.clearStates();
                     const linkDatum = linkEl.getDatum(), father = (null == linkDatum ? void 0 : linkDatum.parents) ? "parents" : "source";
                     if (array(linkDatum[father]).includes(nodeDatum.key)) {
@@ -94,52 +92,27 @@ export class SankeySeries extends CartesianSeries {
                     } else linkDatum.target === nodeDatum.key ? highlightNodes.includes(linkDatum.source) || highlightNodes.push(linkDatum.source) : linkEl.useStates([ "blur" ]);
                 }));
             }
-            if (this._nodeMark) {
-                const vGrammarMark = this._nodeMark.getProduct();
-                if (!vGrammarMark || !vGrammarMark.elements || !vGrammarMark.elements.length) return;
-                vGrammarMark.elements.forEach((el => {
-                    el.clearStates(), highlightNodes.includes(el.getDatum().key) || el.useStates([ "blur" ]);
-                }));
-            }
-            if (this._labelMark) {
-                const vGrammarMark = this._labelMark.getProduct();
-                if (!vGrammarMark || !vGrammarMark.elements || !vGrammarMark.elements.length) return;
-                vGrammarMark.elements.forEach((el => {
-                    el.clearStates(), highlightNodes.includes(el.getDatum().key) || el.useStates([ "blur" ]);
-                }));
-            }
+            this._nodeMark && this._highLightElements(this._nodeMark.getProductElements(), highlightNodes), 
+            this._labelMark && this._highLightElements(this._labelMark.getProductElements(), highlightNodes);
         }, this._handleLinkAdjacencyClick = element => {
             const curLinkDatum = element.getDatum(), highlightNodes = [ curLinkDatum.source, curLinkDatum.target ];
             if (this._linkMark) {
-                const vGrammarMark = this._linkMark.getProduct();
-                if (!vGrammarMark || !vGrammarMark.elements || !vGrammarMark.elements.length) return;
-                vGrammarMark.elements.forEach((linkEl => {
+                const allLinkElements = this._linkMark.getProductElements();
+                if (!allLinkElements || !allLinkElements.length) return;
+                allLinkElements.forEach((linkEl => {
                     linkEl.clearStates(), linkEl === element ? linkEl.addState("selected", {
                         ratio: 1
                     }) : linkEl.useStates([ "blur" ]);
                 }));
             }
-            if (this._nodeMark) {
-                const vGrammarMark = this._nodeMark.getProduct();
-                if (!vGrammarMark || !vGrammarMark.elements || !vGrammarMark.elements.length) return;
-                vGrammarMark.elements.forEach((el => {
-                    el.clearStates(), highlightNodes.includes(el.getDatum().key) || el.useStates([ "blur" ]);
-                }));
-            }
-            if (this._labelMark) {
-                const vGrammarMark = this._labelMark.getProduct();
-                if (!vGrammarMark || !vGrammarMark.elements || !vGrammarMark.elements.length) return;
-                vGrammarMark.elements.forEach((el => {
-                    el.clearStates(), highlightNodes.includes(el.getDatum().key) || el.useStates([ "blur" ]);
-                }));
-            }
+            this._nodeMark && this._highLightElements(this._nodeMark.getProductElements(), highlightNodes), 
+            this._labelMark && this._highLightElements(this._labelMark.getProductElements(), highlightNodes);
         }, this._handleNodeRelatedClick = element => {
             var _a;
-            const nodeDatum = element.getDatum(), nodeVGrammarMark = this._nodeMark.getProduct();
-            if (!nodeVGrammarMark || !nodeVGrammarMark.elements || !nodeVGrammarMark.elements.length) return;
-            const allNodeElements = nodeVGrammarMark.elements, linkVGrammarMark = this._linkMark.getProduct();
-            if (!linkVGrammarMark || !linkVGrammarMark.elements || !linkVGrammarMark.elements.length) return;
-            const allLinkElements = linkVGrammarMark.elements;
+            const nodeDatum = element.getDatum(), allNodeElements = this._nodeMark.getProductElements();
+            if (!allNodeElements || !allNodeElements.length) return;
+            const allLinkElements = this._linkMark.getProductElements();
+            if (!allLinkElements || !allLinkElements.length) return;
             if ("source" === ((null === (_a = allLinkElements[0].getDatum()) || void 0 === _a ? void 0 : _a.parents) ? "parents" : "source")) {
                 const highlightNodes = [ nodeDatum.key ], highlightLinks = [];
                 if (allLinkElements.forEach(((linkEl, i) => {
@@ -183,27 +156,15 @@ export class SankeySeries extends CartesianSeries {
                         }
                     }
                 })), this._linkMark) {
-                    const vGrammarMark = this._linkMark.getProduct();
-                    if (!vGrammarMark || !vGrammarMark.elements || !vGrammarMark.elements.length) return;
-                    vGrammarMark.elements.forEach(((linkEl, i) => {
+                    const allLinkElements = this._linkMark.getProductElements();
+                    if (!allLinkElements || !allLinkElements.length) return;
+                    allLinkElements.forEach(((linkEl, i) => {
                         var _a;
                         linkEl.clearStates(), highlightLinks.includes(null !== (_a = linkEl.getDatum().key) && void 0 !== _a ? _a : linkEl.getDatum().index) ? linkEl.useStates([ "selected" ]) : linkEl.useStates([ "blur" ]);
                     }));
                 }
-                if (this._nodeMark) {
-                    const vGrammarMark = this._nodeMark.getProduct();
-                    if (!vGrammarMark || !vGrammarMark.elements || !vGrammarMark.elements.length) return;
-                    vGrammarMark.elements.forEach((el => {
-                        el.clearStates(), highlightNodes.includes(el.getDatum().key) || el.useStates([ "blur" ]);
-                    }));
-                }
-                if (this._labelMark) {
-                    const vGrammarMark = this._labelMark.getProduct();
-                    if (!vGrammarMark || !vGrammarMark.elements || !vGrammarMark.elements.length) return;
-                    vGrammarMark.elements.forEach((el => {
-                        el.clearStates(), highlightNodes.includes(el.getDatum().key) || el.useStates([ "blur" ]);
-                    }));
-                }
+                this._nodeMark && this._highLightElements(this._nodeMark.getProductElements(), highlightNodes), 
+                this._labelMark && this._highLightElements(this._labelMark.getProductElements(), highlightNodes);
             } else {
                 const highlightNodes = [ nodeDatum.key ], upstreamLinks = nodeDatum.targetLinks.reduce(((res, link) => (array(link.datum).forEach((dividedLink => {
                     const parents = dividedLink.parents, len = parents.length;
@@ -216,7 +177,7 @@ export class SankeySeries extends CartesianSeries {
                         });
                     }
                 })), res)), []);
-                if (allLinkElements.forEach(((linkEl, i) => {
+                allLinkElements.forEach(((linkEl, i) => {
                     linkEl.clearStates();
                     const linkDatum = linkEl.getDatum(), father = (null == linkDatum ? void 0 : linkDatum.parents) ? "parents" : "source", originalDatum = linkDatum.datum, selectedDatum = originalDatum ? originalDatum.filter((entry => entry[father].some((par => par.key === nodeDatum.key)))) : null, upSelectedLink = upstreamLinks.find((upLink => upLink.source === linkDatum.source && upLink.target === linkDatum.target));
                     if (selectedDatum && selectedDatum.length) {
@@ -233,53 +194,30 @@ export class SankeySeries extends CartesianSeries {
                         ratio: upSelectedLink.value / linkDatum.value
                     });
                     linkEl.useStates([ "blur" ]);
-                })), this._nodeMark) {
-                    const vGrammarMark = this._nodeMark.getProduct();
-                    if (!vGrammarMark || !vGrammarMark.elements || !vGrammarMark.elements.length) return;
-                    vGrammarMark.elements.forEach((el => {
-                        el.clearStates(), highlightNodes.includes(el.getDatum().key) || el.useStates([ "blur" ]);
-                    }));
-                }
-                if (this._labelMark) {
-                    const vGrammarMark = this._labelMark.getProduct();
-                    if (!vGrammarMark || !vGrammarMark.elements || !vGrammarMark.elements.length) return;
-                    vGrammarMark.elements.forEach((el => {
-                        el.clearStates(), highlightNodes.includes(el.getDatum().key) || el.useStates([ "blur" ]);
-                    }));
-                }
+                })), this._nodeMark && this._highLightElements(this._nodeMark.getProductElements(), highlightNodes), 
+                this._labelMark && this._highLightElements(this._labelMark.getProductElements(), highlightNodes);
             }
         }, this._handleLinkRelatedClick = element => {
             var _a;
-            const nodeVGrammarMark = this._nodeMark.getProduct();
-            if (!nodeVGrammarMark || !nodeVGrammarMark.elements || !nodeVGrammarMark.elements.length) return;
-            const allNodeElements = nodeVGrammarMark.elements, linkVGrammarMark = this._linkMark.getProduct();
-            if (!linkVGrammarMark || !linkVGrammarMark.elements || !linkVGrammarMark.elements.length) return;
-            const allLinkElements = linkVGrammarMark.elements;
+            const allNodeElements = this._nodeMark.getProductElements();
+            if (!allNodeElements || !allNodeElements.length) return;
+            const allLinkElements = this._linkMark.getProductElements();
+            if (!allLinkElements || !allLinkElements.length) return;
             if ("source" === ((null === (_a = element.getDatum()) || void 0 === _a ? void 0 : _a.parents) ? "parents" : "source")) {
-                if (this._linkMark) {
-                    const vGrammarMark = this._linkMark.getProduct();
-                    if (!vGrammarMark || !vGrammarMark.elements || !vGrammarMark.elements.length) return;
-                    vGrammarMark.elements.forEach((linkEl => {
-                        linkEl.clearStates();
-                    }));
-                }
-                if (this._nodeMark) {
-                    const vGrammarMark = this._nodeMark.getProduct();
-                    if (!vGrammarMark || !vGrammarMark.elements || !vGrammarMark.elements.length) return;
-                    vGrammarMark.elements.forEach((el => {
-                        el.clearStates();
-                    }));
-                }
-                if (this._labelMark) {
-                    const vGrammarMark = this._labelMark.getProduct();
-                    if (!vGrammarMark || !vGrammarMark.elements || !vGrammarMark.elements.length) return;
-                    vGrammarMark.elements.forEach((el => {
+                if (this._linkMark && allLinkElements.forEach((linkEl => {
+                    linkEl.clearStates();
+                })), this._nodeMark && allNodeElements.forEach((el => {
+                    el.clearStates();
+                })), this._labelMark) {
+                    const allLabelElements = this._labelMark.getProductElements();
+                    if (!allLabelElements || !allLabelElements.length) return;
+                    allLabelElements.forEach((el => {
                         el.clearStates();
                     }));
                 }
             } else {
                 const curLinkDatum = element.getDatum(), highlightNodes = [ curLinkDatum.source, curLinkDatum.target ], upstreamLinks = [];
-                if (array(curLinkDatum.datum).forEach((dividedLink => {
+                array(curLinkDatum.datum).forEach((dividedLink => {
                     const parents = dividedLink.parents, len = parents.length;
                     for (let i = 0; i < len - 1; i++) {
                         const source = parents[i].key, target = parents[i + 1].key, value = dividedLink.value, existingItem = upstreamLinks.find((item => item.source === source && item.target === target));
@@ -322,15 +260,7 @@ export class SankeySeries extends CartesianSeries {
                         ratio: upSelectedLink.value / linkDatum.value
                     });
                     linkEl.useStates([ "blur" ]);
-                })), allNodeElements.forEach((el => {
-                    el.clearStates(), highlightNodes.includes(el.getDatum().key) || el.useStates([ "blur" ]);
-                })), this._labelMark) {
-                    const vGrammarMark = this._labelMark.getProduct();
-                    if (!vGrammarMark || !vGrammarMark.elements || !vGrammarMark.elements.length) return;
-                    vGrammarMark.elements.forEach((el => {
-                        el.clearStates(), highlightNodes.includes(el.getDatum().key) || el.useStates([ "blur" ]);
-                    }));
-                }
+                })), this._highLightElements(allNodeElements, highlightNodes), this._labelMark && this._highLightElements(this._labelMark.getProductElements(), highlightNodes);
             }
         };
     }
@@ -432,10 +362,9 @@ export class SankeySeries extends CartesianSeries {
         }
     }
     initMark() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d;
         const nodeMark = this._createMark(SankeySeries.mark.node, {
             isSeriesMark: !0,
-            key: DEFAULT_DATA_INDEX,
             dataView: this._nodesSeriesData.getDataView(),
             dataProductId: this._nodesSeriesData.getProductId(),
             customShape: null === (_a = this._spec.node) || void 0 === _a ? void 0 : _a.customShape,
@@ -443,15 +372,13 @@ export class SankeySeries extends CartesianSeries {
         });
         nodeMark && (nodeMark.setZIndex(this._nodeLayoutZIndex), this._nodeMark = nodeMark);
         const linkMark = this._createMark(SankeySeries.mark.link, {
-            key: DEFAULT_DATA_INDEX,
             dataView: this._linksSeriesData.getDataView(),
             dataProductId: this._linksSeriesData.getProductId(),
             customShape: null === (_c = this._spec.link) || void 0 === _c ? void 0 : _c.customShape,
             stateSort: null === (_d = this._spec.link) || void 0 === _d ? void 0 : _d.stateSort
         });
-        if (linkMark && (this._linkMark = linkMark), null === (_e = this._spec.label) || void 0 === _e ? void 0 : _e.visible) {
+        if (linkMark && (this._linkMark = linkMark), this._spec.label && this._spec.label.visible) {
             const labelMark = this._createMark(SankeySeries.mark.label, {
-                key: DEFAULT_DATA_INDEX,
                 dataView: this._nodesSeriesData.getDataView(),
                 dataProductId: this._nodesSeriesData.getProductId()
             });
@@ -647,6 +574,11 @@ export class SankeySeries extends CartesianSeries {
     linksSeriesDataUpdate() {
         this._linksSeriesData.updateData();
     }
+    _highLightElements(vGrammarElements, highlightNodes) {
+        vGrammarElements && vGrammarElements.length && vGrammarElements.forEach((el => {
+            el.clearStates(), highlightNodes.includes(el.getDatum().key) || el.useStates([ "blur" ]);
+        }));
+    }
     initTooltip() {
         this._tooltipHelper = new SankeySeriesTooltipHelper(this), this._nodeMark && this._tooltipHelper.activeTriggerSet.mark.add(this._nodeMark), 
         this._linkMark && this._tooltipHelper.activeTriggerSet.mark.add(this._linkMark),