@visactor/vchart-extension 2.0.2 → 2.0.3-alpha.0

package/cjs/charts/conversion-funnel/arrow-data-transform.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/charts/conversion-funnel/arrow-data-transform.ts"],"names":[],"mappings":"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","file":"arrow-data-transform.js","sourcesContent":["import type { IPointLike } from '@visactor/vutils';\nimport type { IConversionFunnelSpec, Arrow } from './interface';\nimport { isValid, isValidNumber, maxInArray } from '@visactor/vutils';\nimport { isArrowCross, isSameArrow } from './util';\n\nexport interface ParsedArrow extends Arrow {\n  position: 'left' | 'right';\n  distance: number;\n  /** 层级跨度 */\n  span: number;\n  layout: {\n    isLayout: boolean;\n    duplicateNode: ParsedArrow | null;\n    fromIndex: number;\n    toIndex: number;\n    fromTotal: number;\n    toTotal: number;\n    level: number;\n    points: IPointLike[];\n  };\n  context: {\n    field: string;\n  };\n  id: string;\n}\n\nexport const conversionArrowTransform = (\n  arrowSpec: IConversionFunnelSpec['conversionArrow'],\n  options: {\n    categoryField: string;\n  }\n) => {\n  if (!arrowSpec || !arrowSpec.arrows?.length) {\n    return [];\n  }\n  const { arrows } = arrowSpec;\n\n  const parsedArrows = parseArrow(arrows, options.categoryField);\n  const leftArrows = parsedArrows.filter(arrow => arrow.position === 'left');\n  const rightArrows = parsedArrows.filter(arrow => arrow.position === 'right');\n\n  const left = computeArrows(leftArrows) ?? [];\n  const right = computeArrows(rightArrows) ?? [];\n  return [...left, ...right];\n};\n\nfunction parseArrow(arrows: Arrow[], categoryField: string): ParsedArrow[] {\n  return arrows\n    .filter(arrow => isValidNumber(arrow.from * arrow.to))\n    .map((arrow, index) => {\n      const { from, to, position = 'right' } = arrow;\n      return {\n        ...arrow,\n        position,\n        distance: arrow.distance || 40,\n        from: Math.min(from, to),\n        to: Math.max(from, to),\n        span: Math.abs(from - to),\n        isLayout: false,\n        context: {\n          field: categoryField\n        },\n        layout: {\n          level: 0\n        },\n        id: `${from}-${to}-${position}-${index}`\n      } as unknown as ParsedArrow;\n    });\n}\n\nfunction computeArrows(arrows: ParsedArrow[]) {\n  if (arrows?.length === 0) {\n    return null;\n  }\n\n  const nodeDegreeMap = new Map<\n    number,\n    {\n      fromArrows: ParsedArrow[];\n      toArrows: ParsedArrow[];\n      totalArrows: ParsedArrow[];\n      degree: number;\n    }\n  >();\n\n  arrows.forEach(arrow => {\n    const fromNodeDegree = nodeDegreeMap.get(arrow.from);\n    if (isValid(fromNodeDegree)) {\n      const firstNodeWidthSameFromTo = fromNodeDegree.fromArrows.find(node => isSameArrow(node, arrow));\n      if (!firstNodeWidthSameFromTo) {\n        fromNodeDegree.degree += 1;\n      } else {\n        arrow.layout.duplicateNode = firstNodeWidthSameFromTo;\n      }\n      fromNodeDegree.fromArrows.push(arrow);\n    } else {\n      nodeDegreeMap.set(arrow.from, {\n        fromArrows: [arrow],\n        toArrows: [],\n        totalArrows: [],\n        degree: 1\n      });\n    }\n\n    const toNodeDegree = nodeDegreeMap.get(arrow.to);\n    if (isValid(toNodeDegree)) {\n      const firstNodeWidthSameFromTo = toNodeDegree.toArrows.find(node => isSameArrow(node, arrow));\n      if (!firstNodeWidthSameFromTo) {\n        toNodeDegree.degree += 1;\n      } else {\n        arrow.layout.duplicateNode = firstNodeWidthSameFromTo;\n      }\n      toNodeDegree.toArrows.push(arrow);\n    } else {\n      nodeDegreeMap.set(arrow.to, {\n        toArrows: [arrow],\n        fromArrows: [],\n        totalArrows: [],\n        degree: 1\n      });\n    }\n  });\n  nodeDegreeMap.forEach(node => {\n    // 入边，层级跨度越大的越靠下\n    node.fromArrows.sort((a, b) => b.span - a.span);\n    // 出边，层级跨度越大的越靠上\n    node.toArrows.sort((a, b) => a.span - b.span);\n    // 入边在上，出边在下\n    node.totalArrows = [...node.toArrows, ...node.fromArrows];\n  });\n\n  arrows\n    .sort((a, b) => a.span - b.span)\n    .forEach(arrow => {\n      const arrowsIsLayout = arrows.filter(arrow => arrow.layout.isLayout);\n      // 1. 计算当前箭头所在层级\n      const maxLevelArrow = maxInArray(arrowsIsLayout, (cur, curMax) => cur.layout.level - curMax.layout.level);\n\n      let level = maxLevelArrow?.layout.level ?? 0;\n      while (level >= 0) {\n        if (arrowsIsLayout.some(arr => arr.layout.level === level && isArrowCross(arr, arrow))) {\n          level += 1;\n          break;\n        }\n        --level;\n      }\n      arrow.layout.level = Math.max(0, level);\n      // 2. 获取当前箭头所在层级的出入度信息\n      arrow.layout.fromTotal = nodeDegreeMap.get(arrow.from).degree;\n      arrow.layout.toTotal = nodeDegreeMap.get(arrow.to).degree;\n      // 3. 计算 from 和 to 的顺序\n      const duplicateNode = arrow.layout.duplicateNode;\n      if (duplicateNode) {\n        arrow.layout.fromIndex = duplicateNode.layout.fromIndex;\n        arrow.layout.toIndex = duplicateNode.layout.toIndex;\n      } else {\n        arrow.layout.fromIndex = computeIndex(arrow, nodeDegreeMap.get(arrow.from).totalArrows);\n        arrow.layout.toIndex = computeIndex(arrow, nodeDegreeMap.get(arrow.to).totalArrows);\n      }\n      arrow.layout.isLayout = true;\n    });\n\n  return arrows;\n}\n\nfunction computeIndex(arrow: ParsedArrow, totalArrows: ParsedArrow[]) {\n  let index = 0;\n  let duplicateCount = 0;\n  for (let i = 0; i < totalArrows.length; i++) {\n    const curArrow = totalArrows[i];\n    if (curArrow === arrow) {\n      index = i - duplicateCount;\n      break;\n    }\n    if (curArrow.layout.duplicateNode) {\n      duplicateCount++;\n    }\n  }\n  return index;\n}\n"]}

package/cjs/charts/conversion-funnel/constants.d.ts

@@ -0,0 +1,21 @@
+export declare const DEFAULT_ARROW_MARK_STYLE: {
+    cornerRadius: number;
+    stroke: string;
+    strokeOpacity: number;
+    lineWidth: number;
+    closePath: boolean;
+    pickable: boolean;
+};
+export declare const DEFAULT_ARROW_SYMBOL_MARK_STYLE: {
+    symbolType: string;
+    size: number;
+    scaleX: number;
+    fill: string;
+};
+export declare const DEFAULT_ARROW_TEXT_MARK_STYLE: {
+    fill: string;
+    fontSize: number;
+};
+export declare const DEFAULT_FUNNEL_BACKGROUND_MARK_STYLE: {
+    fill: string;
+};

package/cjs/charts/conversion-funnel/constants.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.DEFAULT_FUNNEL_BACKGROUND_MARK_STYLE = exports.DEFAULT_ARROW_TEXT_MARK_STYLE = exports.DEFAULT_ARROW_SYMBOL_MARK_STYLE = exports.DEFAULT_ARROW_MARK_STYLE = void 0, 
+exports.DEFAULT_ARROW_MARK_STYLE = {
+    cornerRadius: 4,
+    stroke: "black",
+    strokeOpacity: 1,
+    lineWidth: 1,
+    closePath: !1,
+    pickable: !1
+}, exports.DEFAULT_ARROW_SYMBOL_MARK_STYLE = {
+    symbolType: "triangle",
+    size: 8,
+    scaleX: .7,
+    fill: "black"
+}, exports.DEFAULT_ARROW_TEXT_MARK_STYLE = {
+    fill: "#606773",
+    fontSize: 12
+}, exports.DEFAULT_FUNNEL_BACKGROUND_MARK_STYLE = {
+    fill: "#eff1f9"
+};

package/cjs/charts/conversion-funnel/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/charts/conversion-funnel/constants.ts"],"names":[],"mappings":";;;AAAa,QAAA,wBAAwB,GAAG;IACtC,YAAY,EAAE,CAAC;IACf,MAAM,EAAE,OAAO;IACf,aAAa,EAAE,CAAC;IAChB,SAAS,EAAE,CAAC;IACZ,SAAS,EAAE,KAAK;IAChB,QAAQ,EAAE,KAAK;CAChB,CAAC;AAEW,QAAA,+BAA+B,GAAG;IAC7C,UAAU,EAAE,UAAU;IACtB,IAAI,EAAE,CAAC;IACP,MAAM,EAAE,GAAG;IACX,IAAI,EAAE,OAAO;CACd,CAAC;AAEW,QAAA,6BAA6B,GAAG;IAC3C,IAAI,EAAE,SAAS;IACf,QAAQ,EAAE,EAAE;CACb,CAAC;AAEW,QAAA,oCAAoC,GAAG;IAClD,IAAI,EAAE,SAAS;CAChB,CAAC","file":"constants.js","sourcesContent":["export const DEFAULT_ARROW_MARK_STYLE = {\n  cornerRadius: 4,\n  stroke: 'black',\n  strokeOpacity: 1,\n  lineWidth: 1,\n  closePath: false,\n  pickable: false\n};\n\nexport const DEFAULT_ARROW_SYMBOL_MARK_STYLE = {\n  symbolType: 'triangle',\n  size: 8,\n  scaleX: 0.7,\n  fill: 'black'\n};\n\nexport const DEFAULT_ARROW_TEXT_MARK_STYLE = {\n  fill: '#606773',\n  fontSize: 12\n};\n\nexport const DEFAULT_FUNNEL_BACKGROUND_MARK_STYLE = {\n  fill: '#eff1f9'\n};\n"]}

package/cjs/charts/conversion-funnel/conversion-funnel-transformer.d.ts

@@ -0,0 +1,6 @@
+import type { IConversionFunnelChartSpecBase } from './interface';
+import { FunnelChartSpecTransformer } from '@visactor/vchart';
+export declare class ConversionFunnelChartSpecTransformer extends FunnelChartSpecTransformer<IConversionFunnelChartSpecBase> {
+    transformSpec(spec: IConversionFunnelChartSpecBase): void;
+    _getDefaultSeriesSpec(spec: IConversionFunnelChartSpecBase): import("@visactor/vchart").IFunnelSeriesSpec;
+}

package/cjs/charts/conversion-funnel/conversion-funnel-transformer.js

@@ -0,0 +1,197 @@
+"use strict";
+
+var __rest = this && this.__rest || function(s, e) {
+    var t = {};
+    for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
+    if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
+        var i = 0;
+        for (p = Object.getOwnPropertySymbols(s); i < p.length; i++) e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]) && (t[p[i]] = s[p[i]]);
+    }
+    return t;
+};
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.ConversionFunnelChartSpecTransformer = void 0;
+
+const vchart_1 = require("@visactor/vchart"), vutils_1 = require("@visactor/vutils"), constants_1 = require("./constants");
+
+class ConversionFunnelChartSpecTransformer extends vchart_1.FunnelChartSpecTransformer {
+    transformSpec(spec) {
+        const {conversionArrow: conversionArrow, extensionMark: extensionMark = [], funnelBackground: funnelBackground} = spec;
+        if (conversionArrow && conversionArrow.arrows && conversionArrow.arrows.length) {
+            const marks = addArrowMark(conversionArrow);
+            marks && marks.length && extensionMark.push(...marks);
+        }
+        if (funnelBackground && funnelBackground.visible) {
+            const mark = addFunnelBackgroundMark(funnelBackground);
+            mark && extensionMark.push(mark);
+        }
+        spec.extensionMark = extensionMark, super.transformSpec(spec);
+    }
+    _getDefaultSeriesSpec(spec) {
+        const seriesSpec = super._getDefaultSeriesSpec(spec);
+        return seriesSpec.conversionArrow = spec.conversionArrow, seriesSpec.funnelBackground = spec.funnelBackground, 
+        seriesSpec;
+    }
+}
+
+function addArrowMark(arrowSpec) {
+    const {arrows: arrows} = arrowSpec, style = __rest(arrowSpec, [ "arrows" ]), leftArrows = arrows.filter((arrow => "left" === arrow.position)), rightGroup = computeArrows(arrows.filter((arrow => "right" === arrow.position)), style), leftGroup = computeArrows(leftArrows, style), result = [];
+    return rightGroup && (rightGroup.name = "arrowRight", result.push(rightGroup)), 
+    leftGroup && (leftGroup.name = "arrowLeft", result.push(leftGroup)), result;
+}
+
+function computeArrows(arrows, style) {
+    if (0 === (null == arrows ? void 0 : arrows.length)) return null;
+    const {line: line, symbol: symbol, text: text, margin: margin} = style, result = [], rootGroup = {
+        type: "group",
+        zIndex: vchart_1.LayoutZIndex.Mark + 1,
+        children: []
+    }, lineMark = generateArrowLineSpec(line, margin);
+    lineMark && result.push(lineMark);
+    const arrowMark = generateArrowSymbolSpec(symbol, margin);
+    arrowMark && result.push(arrowMark);
+    const textMark = generateArrowTextSpec(text, margin);
+    return textMark && result.push(textMark), rootGroup.children = result, rootGroup;
+}
+
+function generateArrowLineSpec(line = {}, margin) {
+    const {style: style = {}} = line, rest = __rest(line, [ "style" ]), renderable = (arrow, ctx) => {
+        var _a, _b;
+        const {from: from, to: to} = arrow, {vchart: vchart} = ctx, data = null === (_b = null === (_a = null == vchart ? void 0 : vchart.getChart()) || void 0 === _a ? void 0 : _a.getSeriesData()) || void 0 === _b ? void 0 : _b.latestData;
+        return !(to > data.length - 1 || from > data.length - 1);
+    };
+    return Object.assign(Object.assign({
+        type: "polygon",
+        interactive: !1
+    }, rest), {
+        dataKey: arrow => `${arrow.id}`,
+        style: Object.assign(Object.assign(Object.assign({}, constants_1.DEFAULT_ARROW_MARK_STYLE), style), {
+            renderable: renderable,
+            points: (arrow, ctx) => {
+                if (!renderable(arrow, ctx)) return [];
+                let points = arrow.layout.points;
+                return points = prepareArrowPoints(arrow, ctx, margin), points;
+            }
+        })
+    });
+}
+
+function generateArrowSymbolSpec(symbol = {}, margin) {
+    const {style: style = {}} = symbol, rest = __rest(symbol, [ "style" ]);
+    return Object.assign(Object.assign({
+        type: "symbol",
+        interactive: !1,
+        dataKey: arrow => `${arrow.id}`
+    }, rest), {
+        style: Object.assign(Object.assign(Object.assign({}, constants_1.DEFAULT_ARROW_SYMBOL_MARK_STYLE), style), {
+            x: (arrow, ctx) => {
+                var _a, _b;
+                let points = arrow.layout.points;
+                return points = prepareArrowPoints(arrow, ctx, margin), null !== (_b = null === (_a = points[(null == points ? void 0 : points.length) - 1]) || void 0 === _a ? void 0 : _a.x) && void 0 !== _b ? _b : NaN;
+            },
+            y: (arrow, ctx) => {
+                var _a, _b;
+                let points = arrow.layout.points;
+                return points = prepareArrowPoints(arrow, ctx, margin), null !== (_b = null === (_a = points[(null == points ? void 0 : points.length) - 1]) || void 0 === _a ? void 0 : _a.y) && void 0 !== _b ? _b : NaN;
+            },
+            angle: arrow => "left" === arrow.position ? 90 : -90
+        })
+    });
+}
+
+function generateArrowTextSpec(text = {}, margin) {
+    const {style: style = {}, formatMethod: formatMethod, textMargin: textMargin = 4} = text, rest = __rest(text, [ "style", "formatMethod", "textMargin" ]);
+    return Object.assign(Object.assign({
+        type: "text",
+        dataKey: arrow => `${arrow.id}`,
+        interactive: !1,
+        animation: !1
+    }, rest), {
+        style: Object.assign(Object.assign(Object.assign({}, constants_1.DEFAULT_ARROW_TEXT_MARK_STYLE), {
+            text: (arrow, ctx) => {
+                var _a, _b, _c, _d, _e, _f, _g;
+                const {text: textContent} = arrow;
+                let displayTextContent = textContent;
+                if ((0, vutils_1.isFunction)(formatMethod)) {
+                    const {vchart: vchart} = ctx, {from: from, to: to} = arrow, {field: field} = arrow.context, rawData = null !== (_c = null === (_b = null === (_a = null == vchart ? void 0 : vchart.getChart()) || void 0 === _a ? void 0 : _a.getSeriesData()) || void 0 === _b ? void 0 : _b.latestData) && void 0 !== _c ? _c : [], viewData = null !== (_g = null === (_f = null === (_e = null === (_d = null == vchart ? void 0 : vchart.getChart()) || void 0 === _d ? void 0 : _d.getAllSeries()[0]) || void 0 === _e ? void 0 : _e.getViewData()) || void 0 === _f ? void 0 : _f.latestData) && void 0 !== _g ? _g : [], fromData = viewData.find((datum => datum[field] === rawData[from][field])), toData = viewData.find((datum => datum[field] === rawData[to][field]));
+                    displayTextContent = formatMethod(textContent, {
+                        arrow: arrow,
+                        from: fromData,
+                        to: toData
+                    });
+                }
+                return displayTextContent;
+            },
+            x: (arrow, ctx) => {
+                var _a, _b;
+                let points = arrow.layout.points;
+                return points = prepareArrowPoints(arrow, ctx, margin), null !== (_b = (null === (_a = points[1]) || void 0 === _a ? void 0 : _a.x) + ("left" === arrow.position ? -textMargin : textMargin)) && void 0 !== _b ? _b : NaN;
+            },
+            y: (arrow, ctx) => {
+                var _a, _b, _c;
+                let points = arrow.layout.points;
+                return points = prepareArrowPoints(arrow, ctx, margin), null !== (_c = ((null === (_a = points[1]) || void 0 === _a ? void 0 : _a.y) + (null === (_b = points[2]) || void 0 === _b ? void 0 : _b.y)) / 2) && void 0 !== _c ? _c : NaN;
+            },
+            textAlign: arrow => "left" === arrow.position ? "right" : "left",
+            textBaseline: "middle"
+        }), style)
+    });
+}
+
+function prepareArrowPoints(arrow, ctx, margin) {
+    var _a, _b, _c, _d, _e;
+    const {vchart: vchart} = ctx, {from: from, to: to} = arrow, {field: field} = arrow.context, rawData = null === (_b = null === (_a = null == vchart ? void 0 : vchart.getChart()) || void 0 === _a ? void 0 : _a.getSeriesData()) || void 0 === _b ? void 0 : _b.latestData, viewData = null === (_e = null === (_d = null === (_c = null == vchart ? void 0 : vchart.getChart()) || void 0 === _c ? void 0 : _c.getAllSeries()[0]) || void 0 === _d ? void 0 : _d.getViewData()) || void 0 === _e ? void 0 : _e.latestData;
+    let points = [];
+    if (rawData && rawData.length) {
+        const fromDatum = viewData.find((datum => datum[field] === rawData[from][field])), toDatum = viewData.find((datum => datum[field] === rawData[to][field])), firstDatum = viewData[0];
+        if (fromDatum && toDatum && firstDatum) {
+            points = computeArrowPoints(arrow, ctx.getPoints(fromDatum), ctx.getPoints(toDatum), ctx.getPoints(firstDatum), margin), 
+            arrow.layout.points = points;
+        }
+    }
+    return points;
+}
+
+function computeArrowPoints(arrow, fromPoints, toPoints, firstPoints, margin = 12) {
+    const {layout: layout, distance: distance, position: position} = arrow, {level: level, fromIndex: fromIndex, toIndex: toIndex, fromTotal: fromTotal, toTotal: toTotal} = layout, isRight = "right" === position, fromTop = isRight ? fromPoints[1] : fromPoints[0], fromBottom = isRight ? fromPoints[2] : fromPoints[3], fromHeight = Math.abs(fromTop.y - fromBottom.y), toTop = isRight ? toPoints[1] : toPoints[0], toBottom = isRight ? toPoints[2] : toPoints[3], toHeight = Math.abs(toTop.y - toBottom.y), firstTop = isRight ? firstPoints[1] : firstPoints[0], fromOffset = fromHeight / (fromTotal + 1), toOffset = toHeight / (toTotal + 1), fromY = fromTop.y + fromOffset * (fromIndex + 1), toY = toTop.y + toOffset * (toIndex + 1), sign = isRight ? -1 : 1;
+    return [ {
+        x: fromTop.x - margin * sign,
+        y: fromY
+    }, {
+        x: firstTop.x - (margin + (level + 1) * distance) * sign,
+        y: fromY
+    }, {
+        x: firstTop.x - (margin + (level + 1) * distance) * sign,
+        y: toY
+    }, {
+        x: toTop.x - margin * sign,
+        y: toY
+    } ];
+}
+
+function addFunnelBackgroundMark(funnelBackground) {
+    const {style: style = {}} = funnelBackground, rest = __rest(funnelBackground, [ "style" ]);
+    return Object.assign(Object.assign({
+        type: "rect"
+    }, rest), {
+        dataIndex: 0,
+        zIndex: 0,
+        style: Object.assign(Object.assign(Object.assign({}, constants_1.DEFAULT_FUNNEL_BACKGROUND_MARK_STYLE), style), {
+            x: 0,
+            y: (datum, ctx) => ctx.getPoints(datum)[0].y,
+            width: (datum, ctx) => {
+                const region = ctx.getRegion(), {width: width} = region.getLayoutRect();
+                return width;
+            },
+            height: (datum, ctx) => {
+                const points = ctx.getPoints(datum), tl = points[0];
+                return points[3].y - tl.y;
+            }
+        })
+    });
+}
+
+//# sourceMappingURL=conversion-funnel-transformer.js.map
+exports.ConversionFunnelChartSpecTransformer = ConversionFunnelChartSpecTransformer;

package/cjs/charts/conversion-funnel/conversion-funnel-transformer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/charts/conversion-funnel/conversion-funnel-transformer.ts"],"names":[],"mappings":"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","file":"conversion-funnel-transformer.js","sourcesContent":["import type { IPointLike } from '@visactor/vutils';\nimport type { IExtensionGroupMarkSpec, IExtensionMarkSpec } from '@visactor/vchart';\nimport type { IConversionFunnelSpec, IConversionFunnelChartSpecBase, Arrow } from './interface';\nimport type { ParsedArrow } from './arrow-data-transform';\nimport { LayoutZIndex, FunnelChartSpecTransformer } from '@visactor/vchart';\nimport { isFunction } from '@visactor/vutils';\nimport {\n  DEFAULT_ARROW_MARK_STYLE,\n  DEFAULT_ARROW_SYMBOL_MARK_STYLE,\n  DEFAULT_ARROW_TEXT_MARK_STYLE,\n  DEFAULT_FUNNEL_BACKGROUND_MARK_STYLE\n} from './constants';\n\nexport class ConversionFunnelChartSpecTransformer extends FunnelChartSpecTransformer<IConversionFunnelChartSpecBase> {\n  transformSpec(spec: IConversionFunnelChartSpecBase): void {\n    const { conversionArrow, extensionMark = [], funnelBackground } = spec;\n    if (conversionArrow && conversionArrow.arrows && conversionArrow.arrows.length) {\n      const marks = addArrowMark(conversionArrow);\n      if (marks && marks.length) {\n        extensionMark.push(...marks);\n      }\n    }\n    if (funnelBackground && funnelBackground.visible) {\n      const mark = addFunnelBackgroundMark(funnelBackground);\n      if (mark) {\n        extensionMark.push(mark);\n      }\n    }\n    spec.extensionMark = extensionMark;\n    super.transformSpec(spec);\n  }\n\n  _getDefaultSeriesSpec(spec: IConversionFunnelChartSpecBase) {\n    const seriesSpec = super._getDefaultSeriesSpec(spec);\n    (seriesSpec as IConversionFunnelChartSpecBase).conversionArrow = spec.conversionArrow;\n    (seriesSpec as IConversionFunnelChartSpecBase).funnelBackground = spec.funnelBackground;\n    return seriesSpec;\n  }\n}\n\n/**  Arrow Related */\nfunction addArrowMark(arrowSpec: IConversionFunnelSpec['conversionArrow']) {\n  const { arrows, ...style } = arrowSpec;\n  const leftArrows = arrows.filter(arrow => arrow.position === 'left');\n  const rightArrows = arrows.filter(arrow => arrow.position === 'right');\n\n  const rightGroup = computeArrows(rightArrows, style);\n  const leftGroup = computeArrows(leftArrows, style);\n\n  const result = [];\n  if (rightGroup) {\n    rightGroup.name = 'arrowRight';\n    result.push(rightGroup);\n  }\n  if (leftGroup) {\n    leftGroup.name = 'arrowLeft';\n    result.push(leftGroup);\n  }\n\n  return result;\n}\n\nfunction computeArrows(arrows: Arrow[], style: Omit<IConversionFunnelSpec['conversionArrow'], 'arrows'>) {\n  if (arrows?.length === 0) {\n    return null;\n  }\n\n  const { line, symbol, text, margin } = style;\n\n  const result: IExtensionMarkSpec<'polygon' | 'symbol' | 'text'>[] = [];\n\n  const rootGroup: IExtensionGroupMarkSpec = {\n    type: 'group' as any,\n    zIndex: LayoutZIndex.Mark + 1,\n    children: []\n  };\n  const lineMark = generateArrowLineSpec(line, margin);\n  if (lineMark) {\n    result.push(lineMark);\n  }\n  const arrowMark = generateArrowSymbolSpec(symbol, margin);\n  if (arrowMark) {\n    result.push(arrowMark);\n  }\n  const textMark = generateArrowTextSpec(text, margin);\n  if (textMark) {\n    result.push(textMark);\n  }\n  rootGroup.children = result;\n  return rootGroup;\n}\n\nfunction generateArrowLineSpec(line: IConversionFunnelSpec['conversionArrow']['line'] = {}, margin?: number) {\n  const { style = {}, ...rest } = line;\n  const renderable = (arrow: any, ctx: any) => {\n    const { from, to } = arrow;\n    const { vchart } = ctx;\n    const data = vchart?.getChart()?.getSeriesData()?.latestData;\n    if (!data) {\n      false;\n    }\n    if (to > data.length - 1 || from > data.length - 1) {\n      return false;\n    }\n    return true;\n  };\n\n  return {\n    type: 'polygon',\n    interactive: false,\n    ...rest,\n    dataKey: arrow => `${arrow.id}`,\n    style: {\n      ...DEFAULT_ARROW_MARK_STYLE,\n      ...style,\n      renderable,\n      points: (arrow: any, ctx: any) => {\n        if (!renderable(arrow, ctx)) {\n          return [];\n        }\n        let points = arrow.layout.points;\n        points = prepareArrowPoints(arrow, ctx, margin);\n        return points;\n      }\n    }\n  } as IExtensionMarkSpec<'polygon'>;\n}\n\nfunction generateArrowSymbolSpec(symbol: IConversionFunnelSpec['conversionArrow']['symbol'] = {}, margin?: number) {\n  const { style = {}, ...rest } = symbol;\n  return {\n    type: 'symbol',\n    interactive: false,\n    dataKey: arrow => `${arrow.id}`,\n    ...rest,\n    style: {\n      ...DEFAULT_ARROW_SYMBOL_MARK_STYLE,\n      ...style,\n\n      x: (arrow: any, ctx: any) => {\n        let points = arrow.layout.points;\n        points = prepareArrowPoints(arrow, ctx, margin);\n        return points[points?.length - 1]?.x ?? NaN;\n      },\n      y: (arrow: any, ctx: any) => {\n        let points = arrow.layout.points;\n        points = prepareArrowPoints(arrow, ctx, margin);\n        return points[points?.length - 1]?.y ?? NaN;\n      },\n      angle: (arrow: any) => (arrow.position === 'left' ? 90 : -90)\n    }\n  } as IExtensionMarkSpec<'symbol'>;\n}\n\nfunction generateArrowTextSpec(text: IConversionFunnelSpec['conversionArrow']['text'] = {}, margin?: number) {\n  const { style = {}, formatMethod, textMargin = 4, ...rest } = text;\n\n  return {\n    type: 'text',\n    dataKey: arrow => `${arrow.id}`,\n    interactive: false,\n    animation: false,\n    ...rest,\n    style: {\n      ...DEFAULT_ARROW_TEXT_MARK_STYLE,\n      text: (arrow: any, ctx: any) => {\n        const { text: textContent } = arrow;\n        let displayTextContent: ReturnType<typeof formatMethod> = textContent;\n\n        if (isFunction(formatMethod)) {\n          const { vchart } = ctx;\n          const { from, to } = arrow;\n          const { field } = arrow.context;\n          const rawData = vchart?.getChart()?.getSeriesData()?.latestData ?? [];\n          const viewData = vchart?.getChart()?.getAllSeries()[0]?.getViewData()?.latestData ?? [];\n\n          const fromData = viewData.find((datum: any) => datum[field] === rawData[from][field]);\n          const toData = viewData.find((datum: any) => datum[field] === rawData[to][field]);\n\n          displayTextContent = formatMethod(textContent, { arrow, from: fromData, to: toData });\n        }\n        return displayTextContent;\n      },\n      x: (arrow: any, ctx: any) => {\n        let points = arrow.layout.points;\n        points = prepareArrowPoints(arrow, ctx, margin);\n        return points[1]?.x + (arrow.position === 'left' ? -textMargin : textMargin) ?? NaN;\n      },\n      y: (arrow: any, ctx: any) => {\n        let points = arrow.layout.points;\n        points = prepareArrowPoints(arrow, ctx, margin);\n        return (points[1]?.y + points[2]?.y) / 2 ?? NaN;\n      },\n      textAlign: (arrow: any) => (arrow.position === 'left' ? 'right' : 'left'),\n      textBaseline: 'middle',\n      ...style\n    }\n  } as IExtensionMarkSpec<'text'>;\n}\n\nfunction prepareArrowPoints(arrow: ParsedArrow, ctx: any, margin?: number) {\n  const { vchart } = ctx;\n  const { from, to } = arrow;\n  const { field } = arrow.context;\n  const rawData = vchart?.getChart()?.getSeriesData()?.latestData;\n  const viewData = vchart?.getChart()?.getAllSeries()[0]?.getViewData()?.latestData;\n\n  let points: IPointLike[] = [];\n\n  if (rawData && rawData.length) {\n    const fromDatum = viewData.find((datum: any) => datum[field] === rawData[from][field]);\n    const toDatum = viewData.find((datum: any) => datum[field] === rawData[to][field]);\n    const firstDatum = viewData[0];\n\n    if (fromDatum && toDatum && firstDatum) {\n      const fromPoints = ctx.getPoints(fromDatum);\n      const toPoints = ctx.getPoints(toDatum);\n      const firstPoints = ctx.getPoints(firstDatum);\n      points = computeArrowPoints(arrow, fromPoints, toPoints, firstPoints, margin);\n      arrow.layout.points = points;\n    }\n  }\n  return points;\n}\n\nfunction computeArrowPoints(\n  arrow: ParsedArrow,\n  fromPoints: IPointLike[],\n  toPoints: IPointLike[],\n  firstPoints: IPointLike[],\n  margin = 12\n) {\n  const { layout, distance, position } = arrow;\n  const { level, fromIndex, toIndex, fromTotal, toTotal } = layout;\n\n  const isRight = position === 'right';\n\n  const fromTop = isRight ? fromPoints[1] : fromPoints[0];\n  const fromBottom = isRight ? fromPoints[2] : fromPoints[3];\n\n  const fromHeight = Math.abs(fromTop.y - fromBottom.y);\n\n  const toTop = isRight ? toPoints[1] : toPoints[0];\n  const toBottom = isRight ? toPoints[2] : toPoints[3];\n  const toHeight = Math.abs(toTop.y - toBottom.y);\n\n  const firstTop = isRight ? firstPoints[1] : firstPoints[0];\n\n  const fromOffset = fromHeight / (fromTotal + 1);\n  const toOffset = toHeight / (toTotal + 1);\n\n  const fromY = fromTop.y + fromOffset * (fromIndex + 1);\n  const toY = toTop.y + toOffset * (toIndex + 1);\n\n  const sign = isRight ? -1 : 1;\n\n  const points = [\n    { x: fromTop.x - margin * sign, y: fromY },\n    { x: firstTop.x - (margin + (level + 1) * distance) * sign, y: fromY },\n    {\n      x: firstTop.x - (margin + (level + 1) * distance) * sign,\n      y: toY\n    },\n    {\n      x: toTop.x - margin * sign,\n      y: toY\n    }\n  ];\n  return points;\n}\n\n/**  Funnel Background Related */\nfunction addFunnelBackgroundMark(funnelBackground: IConversionFunnelSpec['funnelBackground']) {\n  const { style = {}, ...rest } = funnelBackground;\n  return {\n    type: 'rect',\n    ...rest,\n    dataIndex: 0,\n    zIndex: 0,\n    style: {\n      ...DEFAULT_FUNNEL_BACKGROUND_MARK_STYLE,\n      ...style,\n      x: 0,\n      y: (datum, ctx: any) => {\n        const points = ctx.getPoints(datum);\n        const tl = points[0];\n        return tl.y;\n      },\n      width: (datum, ctx: any) => {\n        const region = ctx.getRegion();\n        const { width } = region.getLayoutRect();\n        return width;\n      },\n      height: (datum, ctx: any) => {\n        const points = ctx.getPoints(datum);\n        const tl = points[0];\n        const bl = points[3];\n        return bl.y - tl.y;\n      }\n    }\n  } as IExtensionMarkSpec<'rect'>;\n}\n"]}

package/cjs/charts/conversion-funnel/conversion-funnel.d.ts

@@ -0,0 +1,19 @@
+import type { IConversionFunnelChartSpecBase, IConversionFunnelSeriesSpecBase } from './interface';
+import { VChart, FunnelChart, FunnelSeries } from '@visactor/vchart';
+import { DataView } from '@visactor/vdataset';
+import { ConversionFunnelChartSpecTransformer } from './conversion-funnel-transformer';
+export declare class ConversionFunnelChart extends FunnelChart<IConversionFunnelChartSpecBase> {
+    type: string;
+    static type: string;
+    _spec: IConversionFunnelChartSpecBase;
+    static readonly transformerConstructor: typeof ConversionFunnelChartSpecTransformer;
+    readonly transformerConstructor: typeof ConversionFunnelChartSpecTransformer;
+}
+export declare class ConversionFunnelSeries extends FunnelSeries<IConversionFunnelSeriesSpecBase> {
+    protected _arrowData?: DataView;
+    initData(): void;
+    afterCompile(): void;
+}
+export declare const registerConversionFunnelChart: (option?: {
+    VChart?: typeof VChart;
+}) => void;

package/cjs/charts/conversion-funnel/conversion-funnel.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.registerConversionFunnelChart = exports.ConversionFunnelSeries = exports.ConversionFunnelChart = void 0;
+
+const vchart_1 = require("@visactor/vchart"), vdataset_1 = require("@visactor/vdataset"), conversion_funnel_transformer_1 = require("./conversion-funnel-transformer"), arrow_data_transform_1 = require("./arrow-data-transform");
+
+class ConversionFunnelChart extends vchart_1.FunnelChart {
+    constructor() {
+        super(...arguments), this.type = "conversionFunnel", this.transformerConstructor = conversion_funnel_transformer_1.ConversionFunnelChartSpecTransformer;
+    }
+}
+
+exports.ConversionFunnelChart = ConversionFunnelChart, ConversionFunnelChart.type = "conversionFunnel", 
+ConversionFunnelChart.transformerConstructor = conversion_funnel_transformer_1.ConversionFunnelChartSpecTransformer;
+
+class ConversionFunnelSeries extends vchart_1.FunnelSeries {
+    initData() {
+        var _a;
+        super.initData();
+        const {conversionArrow: conversionArrow} = this._spec;
+        conversionArrow && (null === (_a = conversionArrow.arrows) || void 0 === _a ? void 0 : _a.length) && (this._arrowData = new vdataset_1.DataView(this._dataSet, {
+            name: `${vchart_1.PREFIX}_series_${this.id}_arrowData`
+        }), this._dataSet.getTransform("conversionArrow") || this._dataSet.registerTransform("conversionArrow", arrow_data_transform_1.conversionArrowTransform), 
+        this._arrowData.parse(conversionArrow).transform({
+            type: "conversionArrow",
+            options: {
+                categoryField: this._spec.categoryField
+            }
+        }));
+    }
+    afterCompile() {
+        var _a;
+        null === (_a = super.afterCompile) || void 0 === _a || _a.call(this);
+        const rightGroup = this.getMarkInName("arrowRight");
+        rightGroup && rightGroup.getMarks().forEach((mark => {
+            mark.setDataView(this._arrowData), mark.compileData(), mark.setTransform([ {
+                type: "filter",
+                callback: datum => "right" === datum.position
+            } ]);
+        }));
+        const leftGroup = this.getMarkInName("arrowLeft");
+        leftGroup && leftGroup.getMarks().forEach((mark => {
+            mark.setDataView(this._arrowData), mark.compileData(), mark.setTransform([ {
+                type: "filter",
+                callback: datum => "left" === datum.position
+            } ]);
+        }));
+    }
+}
+
+exports.ConversionFunnelSeries = ConversionFunnelSeries;
+
+const registerConversionFunnelChart = option => {
+    (0, vchart_1.registerMarkFilterTransform)();
+    const vchartConstructor = (null == option ? void 0 : option.VChart) || vchart_1.VChart;
+    vchartConstructor && (vchartConstructor.useChart([ ConversionFunnelChart ]), vchartConstructor.useSeries([ ConversionFunnelSeries ]));
+};
+
+exports.registerConversionFunnelChart = registerConversionFunnelChart;
+//# sourceMappingURL=conversion-funnel.js.map

package/cjs/charts/conversion-funnel/conversion-funnel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/charts/conversion-funnel/conversion-funnel.ts"],"names":[],"mappings":"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","file":"conversion-funnel.js","sourcesContent":["import type { IConversionFunnelChartSpecBase, IConversionFunnelSeriesSpecBase } from './interface';\nimport type { GroupMark } from '@visactor/vchart';\nimport { VChart, FunnelChart, PREFIX, FunnelSeries, registerMarkFilterTransform } from '@visactor/vchart';\nimport { DataView } from '@visactor/vdataset';\nimport { ConversionFunnelChartSpecTransformer } from './conversion-funnel-transformer';\nimport { conversionArrowTransform } from './arrow-data-transform';\n\nexport class ConversionFunnelChart extends FunnelChart<IConversionFunnelChartSpecBase> {\n  type = 'conversionFunnel';\n  static type = 'conversionFunnel';\n\n  declare _spec: IConversionFunnelChartSpecBase;\n\n  static readonly transformerConstructor = ConversionFunnelChartSpecTransformer;\n  readonly transformerConstructor = ConversionFunnelChartSpecTransformer;\n}\n\nexport class ConversionFunnelSeries extends FunnelSeries<IConversionFunnelSeriesSpecBase> {\n  protected _arrowData?: DataView;\n\n  initData() {\n    super.initData();\n    const { conversionArrow } = this._spec;\n    if (conversionArrow && conversionArrow.arrows?.length) {\n      this._arrowData = new DataView(this._dataSet, { name: `${PREFIX}_series_${this.id}_arrowData` });\n      if (!this._dataSet.getTransform('conversionArrow')) {\n        this._dataSet.registerTransform('conversionArrow', conversionArrowTransform);\n      }\n      this._arrowData.parse(conversionArrow).transform({\n        type: 'conversionArrow',\n        options: {\n          categoryField: this._spec.categoryField\n        }\n      });\n    }\n  }\n\n  afterCompile() {\n    // @ts-ignore\n    super.afterCompile?.();\n    const rightGroup = this.getMarkInName('arrowRight') as unknown as GroupMark;\n    if (rightGroup) {\n      rightGroup.getMarks().forEach(mark => {\n        mark.setDataView(this._arrowData);\n        mark.compileData();\n        mark.setTransform([\n          {\n            type: 'filter',\n            callback: (datum: any) => datum.position === 'right'\n          }\n        ]);\n      });\n    }\n    const leftGroup = this.getMarkInName('arrowLeft') as unknown as GroupMark;\n    if (leftGroup) {\n      leftGroup.getMarks().forEach(mark => {\n        mark.setDataView(this._arrowData);\n        mark.compileData();\n        mark.setTransform([\n          {\n            type: 'filter',\n            callback: (datum: any) => datum.position === 'left'\n          }\n        ]);\n      });\n    }\n  }\n}\n\nexport const registerConversionFunnelChart = (option?: { VChart?: typeof VChart }) => {\n  registerMarkFilterTransform();\n\n  const vchartConstructor = option?.VChart || VChart;\n  if (vchartConstructor) {\n    vchartConstructor.useChart([ConversionFunnelChart]);\n    vchartConstructor.useSeries([ConversionFunnelSeries]);\n  }\n};\n"]}

package/cjs/charts/conversion-funnel/index.d.ts

@@ -0,0 +1,2 @@
+export * from './interface';
+export * from './conversion-funnel';

package/cjs/charts/conversion-funnel/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var __createBinding = this && this.__createBinding || (Object.create ? function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k);
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    desc && !("get" in desc ? !m.__esModule : desc.writable || desc.configurable) || (desc = {
+        enumerable: !0,
+        get: function() {
+            return m[k];
+        }
+    }), Object.defineProperty(o, k2, desc);
+} : function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k), o[k2] = m[k];
+}), __exportStar = this && this.__exportStar || function(m, exports) {
+    for (var p in m) "default" === p || Object.prototype.hasOwnProperty.call(exports, p) || __createBinding(exports, m, p);
+};
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), __exportStar(require("./interface"), exports), __exportStar(require("./conversion-funnel"), exports);
+//# sourceMappingURL=index.js.map

package/cjs/charts/conversion-funnel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/charts/conversion-funnel/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,8CAA4B;AAC5B,sDAAoC","file":"index.js","sourcesContent":["export * from './interface';\nexport * from './conversion-funnel';\n"]}

package/cjs/charts/conversion-funnel/interface.d.ts

@@ -0,0 +1,35 @@
+import type { IFormatMethod, IMarkSpec, IPathMarkSpec, IFunnelChartSpec, ISymbolMarkSpec, ITextMarkSpec, IFunnelSeriesSpec, IRectMarkSpec } from '@visactor/vchart';
+export interface Arrow {
+    from: number;
+    to: number;
+    position?: 'left' | 'right';
+    distance?: number;
+    text?: string;
+}
+export interface IConversionFunnelSpec {
+    conversionArrow?: {
+        arrows?: Arrow[];
+        margin?: number;
+        line?: IMarkSpec<Omit<IPathMarkSpec, 'points' | 'fill'>>;
+        symbol?: IMarkSpec<ISymbolMarkSpec>;
+        text?: IMarkSpec<ITextMarkSpec> & {
+            formatMethod?: IFormatMethod<[text: string, params?: {
+                from: any;
+                to: any;
+                arrow: Arrow;
+            }]>;
+            textMargin?: number;
+        };
+    };
+    funnelBackground?: IMarkSpec<IRectMarkSpec>;
+}
+export interface IConversionFunnelSeriesSpecBase extends IFunnelSeriesSpec, IConversionFunnelSpec {
+}
+export interface IConversionFunnelChartSpecBase extends IFunnelChartSpec, IConversionFunnelSpec {
+}
+export interface IConversionFunnelSeriesSpec extends Omit<IConversionFunnelSeriesSpecBase, 'type' | 'series'> {
+    type: 'conversionFunnel';
+}
+export interface IConversionFunnelChartSpec extends Omit<IConversionFunnelChartSpecBase, 'type' | 'series'> {
+    type: 'conversionFunnel';
+}

package/cjs/charts/conversion-funnel/interface.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+});
+//# sourceMappingURL=interface.js.map

package/cjs/charts/conversion-funnel/interface.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/charts/conversion-funnel/interface.ts"],"names":[],"mappings":"","file":"interface.js","sourcesContent":["import type {\n  IFormatMethod,\n  IMarkSpec,\n  IPathMarkSpec,\n  IFunnelChartSpec,\n  ISymbolMarkSpec,\n  ITextMarkSpec,\n  IFunnelSeriesSpec,\n  IRectMarkSpec\n} from '@visactor/vchart';\n\nexport interface Arrow {\n  /**\n   * from 节点索引\n   */\n  from: number;\n  /**\n   * to 节点索引\n   */\n  to: number;\n  /**\n   * 箭头位置\n   */\n  position?: 'left' | 'right';\n  /**\n   * 箭头与柱子之间的距离\n   */\n  distance?: number;\n  /**\n   * 箭头文字\n   */\n  text?: string;\n}\n\nexport interface IConversionFunnelSpec {\n  /**\n   * 转化率箭头配置\n   */\n  conversionArrow?: {\n    /**\n     * 箭头配置\n     */\n    arrows?: Arrow[];\n    /**\n     * 箭头与柱子之间的距离\n     * @default 12\n     */\n    margin?: number;\n    /**\n     * 箭头线配置\n     */\n    line?: IMarkSpec<Omit<IPathMarkSpec, 'points' | 'fill'>>;\n    /**\n     * 箭头符号配置\n     */\n    symbol?: IMarkSpec<ISymbolMarkSpec>;\n    /**\n     * 标签配置\n     */\n    text?: IMarkSpec<ITextMarkSpec> & {\n      /**\n       * 箭头文字格式化方法\n       */\n      formatMethod?: IFormatMethod<[text: string, params?: { from: any; to: any; arrow: Arrow }]>;\n      /**\n       * 箭头文本与柱子之间的距离\n       * @default 4\n       */\n      textMargin?: number;\n    };\n  };\n  /**\n   * 漏斗层背景配置\n   */\n  funnelBackground?: IMarkSpec<IRectMarkSpec>;\n}\n\nexport interface IConversionFunnelSeriesSpecBase extends IFunnelSeriesSpec, IConversionFunnelSpec {}\n\nexport interface IConversionFunnelChartSpecBase extends IFunnelChartSpec, IConversionFunnelSpec {}\n\nexport interface IConversionFunnelSeriesSpec extends Omit<IConversionFunnelSeriesSpecBase, 'type' | 'series'> {\n  type: 'conversionFunnel';\n}\n\nexport interface IConversionFunnelChartSpec extends Omit<IConversionFunnelChartSpecBase, 'type' | 'series'> {\n  type: 'conversionFunnel';\n}\n"]}

package/cjs/charts/conversion-funnel/util.d.ts

@@ -0,0 +1,3 @@
+import type { ParsedArrow } from './arrow-data-transform';
+export declare function isArrowCross(arrow1: ParsedArrow, arrow2: ParsedArrow): boolean;
+export declare function isSameArrow(arrow1: ParsedArrow, arrow2: ParsedArrow): boolean;

package/cjs/charts/conversion-funnel/util.js

@@ -0,0 +1,17 @@
+"use strict";
+
+function isArrowCross(arrow1, arrow2) {
+    const {from: from1, to: to1} = arrow1, {from: from2, to: to2} = arrow2;
+    return to1 > from2 && to2 > from1;
+}
+
+function isSameArrow(arrow1, arrow2) {
+    const {from: from1, to: to1} = arrow1, {from: from2, to: to2} = arrow2;
+    return from1 === from2 && to1 === to2;
+}
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.isSameArrow = exports.isArrowCross = void 0, exports.isArrowCross = isArrowCross, 
+exports.isSameArrow = isSameArrow;
+//# sourceMappingURL=util.js.map

package/cjs/charts/conversion-funnel/util.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/charts/conversion-funnel/util.ts"],"names":[],"mappings":";;;AAEA,SAAgB,YAAY,CAAC,MAAmB,EAAE,MAAmB;IACnE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,MAAM,CAAC;IACxC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,MAAM,CAAC;IACxC,OAAO,GAAG,GAAG,KAAK,IAAI,GAAG,GAAG,KAAK,CAAC;AACpC,CAAC;AAJD,oCAIC;AAED,SAAgB,WAAW,CAAC,MAAmB,EAAE,MAAmB;IAClE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,MAAM,CAAC;IACxC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,MAAM,CAAC;IACxC,OAAO,KAAK,KAAK,KAAK,IAAI,GAAG,KAAK,GAAG,CAAC;AACxC,CAAC;AAJD,kCAIC","file":"util.js","sourcesContent":["import type { ParsedArrow } from './arrow-data-transform';\n\nexport function isArrowCross(arrow1: ParsedArrow, arrow2: ParsedArrow) {\n  const { from: from1, to: to1 } = arrow1;\n  const { from: from2, to: to2 } = arrow2;\n  return to1 > from2 && to2 > from1;\n}\n\nexport function isSameArrow(arrow1: ParsedArrow, arrow2: ParsedArrow) {\n  const { from: from1, to: to1 } = arrow1;\n  const { from: from2, to: to2 } = arrow2;\n  return from1 === from2 && to1 === to2;\n}\n"]}

package/cjs/charts/funnel-3d/chart.d.ts

@@ -0,0 +1,12 @@
+import type { AdaptiveSpec } from '@visactor/vchart';
+import { BaseChart, FunnelChartSpecTransformer } from '@visactor/vchart';
+import type { IFunnel3dChartSpec } from './interface';
+export declare class Funnel3dChart<T extends IFunnel3dChartSpec = IFunnel3dChartSpec> extends BaseChart<AdaptiveSpec<T, 'type'>> {
+    static readonly type: string;
+    static readonly seriesType: string;
+    static readonly transformerConstructor: typeof FunnelChartSpecTransformer;
+    readonly transformerConstructor: typeof FunnelChartSpecTransformer;
+    readonly type: string;
+    readonly seriesType: string;
+}
+export declare const registerFunnel3dChart: () => void;

package/cjs/charts/funnel-3d/chart.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.registerFunnel3dChart = exports.Funnel3dChart = void 0;
+
+const vchart_1 = require("@visactor/vchart"), enum_1 = require("../3d/enum"), plugin_1 = require("../3d/plugin"), series_1 = require("./series"), layout_1 = require("../3d/layout");
+
+class Funnel3dChart extends vchart_1.BaseChart {
+    constructor() {
+        super(...arguments), this.transformerConstructor = vchart_1.FunnelChartSpecTransformer, 
+        this.type = "funnel3d", this.seriesType = enum_1.SeriesType3dEnum.funnel3d;
+    }
+}
+
+exports.Funnel3dChart = Funnel3dChart, Funnel3dChart.type = "funnel3d", Funnel3dChart.seriesType = enum_1.SeriesType3dEnum.funnel3d, 
+Funnel3dChart.transformerConstructor = vchart_1.FunnelChartSpecTransformer;
+
+const registerFunnel3dChart = () => {
+    (0, vchart_1.registerMarkTooltipProcessor)(), (0, plugin_1.register3DPlugin)(), 
+    (0, layout_1.registerLayout3d)(), (0, series_1.registerFunnel3dSeries)(), vchart_1.Factory.registerChart(Funnel3dChart.type, Funnel3dChart);
+};
+
+exports.registerFunnel3dChart = registerFunnel3dChart;
+//# sourceMappingURL=chart.js.map

package/cjs/charts/funnel-3d/chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/charts/funnel-3d/chart.ts"],"names":[],"mappings":";;;AACA,6CAAgH;AAChH,qCAA+D;AAC/D,yCAAgD;AAEhD,qCAAkD;AAClD,yCAAgD;AAEhD,MAAa,aAAiE,SAAQ,kBAErF;IAFD;;QAMW,2BAAsB,GAAG,mCAA0B,CAAC;QACpD,SAAI,cAAoC;QACxC,eAAU,GAAW,uBAAgB,CAAC,QAAQ,CAAC;IAC1D,CAAC;;AATD,sCASC;AANiB,kBAAI,cAAoC;AACxC,wBAAU,GAAW,uBAAgB,CAAC,QAAQ,CAAC;AAC/C,oCAAsB,GAAG,mCAA0B,CAAC;AAM/D,MAAM,qBAAqB,GAAG,GAAG,EAAE;IACxC,IAAA,qCAA4B,GAAE,CAAC;IAC/B,IAAA,yBAAgB,GAAE,CAAC;IACnB,IAAA,yBAAgB,GAAE,CAAC;IACnB,IAAA,+BAAsB,GAAE,CAAC;IACzB,gBAAO,CAAC,aAAa,CAAC,aAAa,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC;AAC3D,CAAC,CAAC;AANW,QAAA,qBAAqB,yBAMhC","file":"chart.js","sourcesContent":["import type { AdaptiveSpec } from '@visactor/vchart';\nimport { BaseChart, Factory, FunnelChartSpecTransformer, registerMarkTooltipProcessor } from '@visactor/vchart';\nimport { ChartType3dEnum, SeriesType3dEnum } from '../3d/enum';\nimport { register3DPlugin } from '../3d/plugin';\nimport type { IFunnel3dChartSpec } from './interface';\nimport { registerFunnel3dSeries } from './series';\nimport { registerLayout3d } from '../3d/layout';\n\nexport class Funnel3dChart<T extends IFunnel3dChartSpec = IFunnel3dChartSpec> extends BaseChart<\n  AdaptiveSpec<T, 'type'>\n> {\n  static readonly type: string = ChartType3dEnum.funnel3d;\n  static readonly seriesType: string = SeriesType3dEnum.funnel3d;\n  static readonly transformerConstructor = FunnelChartSpecTransformer;\n  readonly transformerConstructor = FunnelChartSpecTransformer;\n  readonly type: string = ChartType3dEnum.funnel3d;\n  readonly seriesType: string = SeriesType3dEnum.funnel3d;\n}\n\nexport const registerFunnel3dChart = () => {\n  registerMarkTooltipProcessor();\n  register3DPlugin();\n  registerLayout3d();\n  registerFunnel3dSeries();\n  Factory.registerChart(Funnel3dChart.type, Funnel3dChart);\n};\n"]}