@visactor/vchart-extension 1.13.9-alpha.5 → 1.13.9

package/build/index.js

@@ -467,7 +467,7 @@
         return { min: dataMin, max: dataMax };
     };
 
-    const DATA_KEY = 'dataKey';
+    const DATA_KEY$3 = 'dataKey';
     const ORDER_KEY = 'VCHART_ORDER';
     const SUPPLY_DATA_KEY = 'SUPPLY_DATA_KEY';
     const NAME_LABEL_PADDING_RIGHT = 10;
@@ -525,7 +525,7 @@
                             {
                                 id: 'datas',
                                 values: pagerData[order].map(d => {
-                                    return Object.assign(Object.assign({}, d), { [DATA_KEY]: d[spec.yField] });
+                                    return Object.assign(Object.assign({}, d), { [DATA_KEY$3]: d[spec.yField] });
                                 })
                             },
                             {
@@ -618,7 +618,7 @@
         transformBaseSpec(spec) {
             var _a, _b, _c;
             spec.type = 'common';
-            spec.dataKey = DATA_KEY;
+            spec.dataKey = DATA_KEY$3;
             spec.series = [
                 {
                     type: 'bar',
@@ -673,7 +673,7 @@
                 type: spec.barBackground.type,
                 dataId: 'data',
                 visible: true,
-                dataKey: DATA_KEY,
+                dataKey: DATA_KEY$3,
                 zIndex: -99,
                 state: (_a = spec.barBackground) === null || _a === void 0 ? void 0 : _a.state,
                 style: Object.assign(Object.assign({ x: (datum, ctx) => spec.barBackground.type === 'symbol' ? ctx.getRegion().getLayoutRect().width / 2 : 0, y: (datum, ctx) => {
@@ -700,7 +700,7 @@
                     type: 'symbol',
                     dataId: 'data',
                     visible: true,
-                    dataKey: DATA_KEY,
+                    dataKey: DATA_KEY$3,
                     state: decorateHaloIcon === null || decorateHaloIcon === void 0 ? void 0 : decorateHaloIcon.state,
                     style: Object.assign(Object.assign({ x: (datum, ctx) => {
                             if (datum[spec.xField] === undefined || datum[spec.xField] === null) {
@@ -728,7 +728,7 @@
                 type: 'symbol',
                 dataId: 'data',
                 visible: true,
-                dataKey: DATA_KEY,
+                dataKey: DATA_KEY$3,
                 state: spec.rankingIcon.state,
                 style: Object.assign(Object.assign({ x: (datum) => {
                         if (spec.labelLayout === 'bothEnd') {
@@ -769,7 +769,7 @@
             return {
                 type: 'text',
                 dataId: 'data',
-                dataKey: DATA_KEY,
+                dataKey: DATA_KEY$3,
                 state: (_a = spec.nameLabel) === null || _a === void 0 ? void 0 : _a.state,
                 style: Object.assign(Object.assign({ text: (datum) => this.formatDatum(spec.yField, datum), x: () => {
                         var _a;
@@ -803,7 +803,7 @@
             return {
                 type: 'text',
                 dataId: 'data',
-                dataKey: DATA_KEY,
+                dataKey: DATA_KEY$3,
                 state: (_a = spec.orderLabel) === null || _a === void 0 ? void 0 : _a.state,
                 style: Object.assign(Object.assign({ text: (datum) => this.formatDatum(ORDER_KEY, datum), x: (datum) => {
                         var _a;
@@ -839,7 +839,7 @@
                 type: 'text',
                 dataId: 'data',
                 visible: true,
-                dataKey: DATA_KEY,
+                dataKey: DATA_KEY$3,
                 state: (_a = spec.valueLabel) === null || _a === void 0 ? void 0 : _a.state,
                 style: Object.assign(Object.assign({ text: (datum) => this.formatDatum(spec.xField, datum), x: (datum, ctx) => {
                         if (spec.labelLayout === 'bothEnd') {
@@ -1667,6 +1667,809 @@
         fill: '#eff1f9'
     };
 
+    const DATA_KEY$2 = 'dataKey';
+    class SequenceScatterLinkChartSpecTransformer extends vchart.CommonChartSpecTransformer {
+        transformSpec(spec) {
+            var _a, _b, _c, _d, _e;
+            super.transformSpec(spec);
+            const dataSpecs = processSequenceData$2(spec);
+            const showTooltip = spec.taskType === 'neighborhood' ? false : true;
+            spec.type = 'common';
+            spec.dataKey = DATA_KEY$2;
+            spec.data = dataSpecs[0].data;
+            spec.series = [
+                {
+                    id: 'background-series',
+                    type: 'area',
+                    dataId: 'background',
+                    interactive: false,
+                    persent: true,
+                    xField: 'x',
+                    yField: 'y',
+                    point: {
+                        visible: false
+                    },
+                    line: {
+                        visible: false
+                    },
+                    area: {
+                        visible: true,
+                        interactive: false,
+                        style: {
+                            background: (datum) => {
+                                if (spec.taskType === 'neighborhood') {
+                                    return '';
+                                }
+                                return `https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/sequence-scatter-bgimg-2/${datum.iter}.png`;
+                            },
+                            fill: 'transparent',
+                            fillOpacity: 0.5
+                        }
+                    },
+                    hover: {
+                        enable: false
+                    },
+                    select: {
+                        enable: false
+                    }
+                },
+                {
+                    id: 'line-series',
+                    type: 'line',
+                    dataId: 'endpoints',
+                    xField: 'x',
+                    yField: 'y',
+                    seriesField: 'edgeId',
+                    animation: true,
+                    point: {
+                        visible: false
+                    },
+                    line: {
+                        visible: true,
+                        style: {
+                            stroke: (datum) => {
+                                return datum.color;
+                            },
+                            lineDash: (datum) => {
+                                if (datum.type === 'same_type') {
+                                    return [0, 0];
+                                }
+                                else {
+                                    return [3, 2];
+                                }
+                            },
+                            lineWidth: 0.8,
+                            strokeOpacity: 0.6
+                        }
+                    }
+                },
+                {
+                    id: 'scatter-series',
+                    type: 'scatter',
+                    dataId: 'nodes',
+                    xField: spec.xField,
+                    yField: spec.yField,
+                    seriesField: 'label',
+                    point: {
+                        state: {
+                            hover: {
+                                scaleX: 1.5,
+                                scaleY: 1.5,
+                                fillOpacity: 1
+                            },
+                            hover_reverse: {
+                                scaleX: 1,
+                                scaleY: 1,
+                                fillOpacity: 0.3
+                            }
+                        },
+                        style: {
+                            size: () => {
+                                return spec.taskType === 'neighborhood' ? 6 : 4;
+                            },
+                            fill: (datum) => {
+                                var _a;
+                                const color = (_a = spec.labelColor[datum.label]) !== null && _a !== void 0 ? _a : 'gray';
+                                return color;
+                            },
+                            fillOpacity: (datum) => {
+                                return datum.confidence;
+                            }
+                        }
+                    },
+                    label: {
+                        visible: true,
+                        style: {
+                            visible: () => {
+                                return spec.taskType == 'neighborhood';
+                            },
+                            type: 'text',
+                            fontFamily: 'Console',
+                            fontStyle: 'italic',
+                            fontSize: 12,
+                            fill: 'black',
+                            fillOpacity: 0.6,
+                            text: (datum) => {
+                                return datum.id;
+                            }
+                        }
+                    }
+                }
+            ];
+            if (spec.player) {
+                spec.player = Object.assign(Object.assign({}, spec.player), { specs: dataSpecs });
+                spec.animationAppear = {
+                    duration: (_b = (_a = spec.player) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 2000,
+                    easing: 'linear'
+                };
+                spec.animationUpdate = {
+                    duration: (_d = (_c = spec.player) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 2000,
+                    easing: 'linear'
+                };
+            }
+            spec.axes = [
+                {
+                    orient: 'left',
+                    type: 'linear',
+                    inverse: true,
+                    min: spec.scope[1],
+                    max: spec.scope[3]
+                },
+                {
+                    orient: 'bottom',
+                    type: 'linear',
+                    min: spec.scope[0],
+                    max: spec.scope[2]
+                }
+            ];
+            spec.customMark = [
+                {
+                    type: 'text',
+                    dataId: 'iter',
+                    style: Object.assign({ x: 50, y: () => 10, textBaseline: 'top', textAlign: 'left', fontSize: 100, fontWeight: 'bolder', fill: 'black', fillOpacity: 0.2 }, (_e = spec.infoLabel) === null || _e === void 0 ? void 0 : _e.style)
+                }
+            ];
+            (spec.legends = [
+                {
+                    seriesId: 'scatter-series',
+                    visible: true,
+                    orient: 'right',
+                    position: 'middle',
+                    data: (items) => {
+                        return items.map(item => {
+                            item.shape.outerBorder = {
+                                stroke: item.shape.fill,
+                                distance: 2,
+                                lineWidth: 1
+                            };
+                            return item;
+                        });
+                    },
+                    title: {
+                        visible: true,
+                        align: 'left',
+                        textStyle: {
+                            text: 'Classes',
+                            fontFamily: 'Console',
+                            fontSize: 18,
+                            fontWeight: 'bold'
+                        }
+                    },
+                    item: {
+                        visible: true,
+                        width: '8%',
+                        value: {
+                            alignRight: true,
+                            style: {
+                                fill: '#000',
+                                fillOpacity: 1,
+                                fontSize: 12
+                            },
+                            state: {
+                                unselected: {
+                                    fill: '#d8d8d8'
+                                }
+                            }
+                        }
+                    }
+                }
+            ]),
+                (spec.tooltip = {
+                    visible: showTooltip,
+                    seriesId: 'scatter-series',
+                    lockAfterClick: false,
+                    activeType: 'mark',
+                    trigger: 'hover',
+                    mark: {
+                        title: {
+                            visible: true,
+                            value: 'Info'
+                        },
+                        content: [
+                            {
+                                key: 'Label',
+                                value: (datum) => {
+                                    return datum.label;
+                                },
+                                shapeType: 'circle',
+                                shapeSize: 8
+                            },
+                            {
+                                key: 'Prediction',
+                                value: (datum) => {
+                                    return datum.prediction;
+                                },
+                                shapeType: 'circle',
+                                shapeSize: 8,
+                                shapeFill: (datum) => {
+                                    var _a;
+                                    const color = (_a = spec.labelColor[datum.prediction]) !== null && _a !== void 0 ? _a : 'gray';
+                                    return color;
+                                }
+                            },
+                            {
+                                key: 'Confidence',
+                                value: (datum) => {
+                                    return datum.confidence.toFixed(2);
+                                },
+                                shapeType: 'square',
+                                shapeSize: 8,
+                                shapeFill: (datum) => {
+                                    return datum.label === datum.prediction ? 'green' : 'red';
+                                }
+                            }
+                        ]
+                    },
+                    style: {
+                        panel: {
+                            padding: { top: 10, bottom: 15, left: 10, right: 10 },
+                            backgroundColor: '#fff',
+                            border: {
+                                color: '#eee',
+                                width: 1,
+                                radius: 10
+                            }
+                        },
+                        titleLabel: {
+                            fontSize: 20,
+                            fontFamily: 'Times New Roman',
+                            fill: 'brown',
+                            fontWeight: 'bold',
+                            textAlign: 'center',
+                            lineHeight: 24
+                        },
+                        keyLabel: {
+                            fontSize: 16,
+                            fontFamily: 'Times New Roman',
+                            fill: 'black',
+                            textAlign: 'center',
+                            lineHeight: 15,
+                            spacing: 10
+                        },
+                        valueLabel: {
+                            fontSize: 14,
+                            fill: 'black',
+                            textAlign: 'center',
+                            lineHeight: 15,
+                            spacing: 10
+                        }
+                    }
+                });
+            spec.dataZoom = [
+                {
+                    visible: false,
+                    orient: 'left',
+                    filterMode: 'axis',
+                    showDetail: false,
+                    roamZoom: {
+                        enable: true,
+                        focus: true,
+                        rate: 3
+                    },
+                    roamDrag: {
+                        enable: true,
+                        reverse: true,
+                        rate: 1
+                    }
+                },
+                {
+                    visible: false,
+                    orient: 'bottom',
+                    filterMode: 'axis',
+                    showDetail: false,
+                    roamZoom: {
+                        enable: true,
+                        focus: true,
+                        rate: 3
+                    },
+                    roamDrag: {
+                        enable: true,
+                        reverse: true,
+                        rate: 1
+                    }
+                }
+            ];
+            super.transformSpec(spec);
+        }
+    }
+    function processSequenceData$2(spec) {
+        const result = [];
+        Object.keys(spec.data).forEach(iter => {
+            const nodes = spec.data[iter].nodes;
+            result.push({
+                data: [
+                    {
+                        id: 'nodes',
+                        values: nodes.map((d, i) => {
+                            return Object.assign(Object.assign({}, d), { [DATA_KEY$2]: i });
+                        })
+                    },
+                    {
+                        id: 'endpoints',
+                        values: []
+                    },
+                    {
+                        id: 'iter',
+                        values: [
+                            {
+                                iter
+                            }
+                        ]
+                    },
+                    {
+                        id: 'background',
+                        values: [
+                            { iter: iter, x: spec.scope[0], y: spec.scope[1] },
+                            { iter: iter, x: spec.scope[0], y: spec.scope[3] },
+                            { iter: iter, x: spec.scope[2], y: spec.scope[3] },
+                            { iter: iter, x: spec.scope[2], y: spec.scope[1] },
+                            { iter: iter, x: spec.scope[0], y: spec.scope[1] }
+                        ]
+                    }
+                ]
+            });
+        });
+        return result;
+    }
+
+    class SequenceScatterLink extends vchart.BaseChart {
+        constructor() {
+            super(...arguments);
+            this.type = 'sequenceScatterLink';
+            this.transformerConstructor = SequenceScatterLinkChartSpecTransformer;
+        }
+        init() {
+            if (!this.isValid()) {
+                return;
+            }
+            super.init();
+        }
+        isValid() {
+            var _a, _b, _c, _d;
+            const { xField, yField, data } = this._spec;
+            if (!xField || !yField) {
+                (_b = (_a = this._option).onError) === null || _b === void 0 ? void 0 : _b.call(_a, 'Missing Required Config: `xField`, `yField` ');
+                return false;
+            }
+            if (!data) {
+                (_d = (_c = this._option).onError) === null || _d === void 0 ? void 0 : _d.call(_c, 'Data is required');
+                return false;
+            }
+            return true;
+        }
+    }
+    SequenceScatterLink.type = 'sequenceScatterLink';
+    SequenceScatterLink.view = 'singleDefault';
+    SequenceScatterLink.transformerConstructor = SequenceScatterLinkChartSpecTransformer;
+    const registerSequenceScatterLink = (option) => {
+        const vchartConstructor = (option === null || option === void 0 ? void 0 : option.VChart) || vchart.VChart;
+        if (vchartConstructor) {
+            vchartConstructor.useChart([SequenceScatterLink, vchart.ScatterChart]);
+        }
+    };
+
+    const EXPAND_RATIO = 0.2;
+
+    function gaussKernel(x) {
+        const SQRT2PI2 = Math.sqrt((Math.PI * 2) ** 2);
+        return Math.exp(-(x ** 2) / 2) / SQRT2PI2;
+    }
+    function scottBandwidth(data) {
+        return data.length ** (-1 / 6);
+    }
+    function calculateKDE(data, bins = 100, bandwidth) {
+        const groupedData = data.reduce((groups, point) => {
+            const label = point.label;
+            groups[label] = groups[label] || [];
+            groups[label].push(point);
+            return groups;
+        }, {});
+        const kdeResult = [];
+        Object.entries(groupedData).forEach(([label, points]) => {
+            const h = bandwidth || scottBandwidth(points);
+            const xValues = points.map(d => d.x);
+            const yValues = points.map(d => d.y);
+            const xMin = Math.min(...xValues);
+            const xMax = Math.max(...xValues);
+            const yMin = Math.min(...yValues);
+            const yMax = Math.max(...yValues);
+            const xExpand = (xMax - xMin) * EXPAND_RATIO;
+            const yExpand = (yMax - yMin) * EXPAND_RATIO;
+            const xExtent = { min: xMin - xExpand, max: xMax + xExpand };
+            const yExtent = { min: yMin - yExpand, max: yMax + yExpand };
+            const xStep = 0.1;
+            const yStep = 0.1;
+            for (let i = 0; i < bins; i++) {
+                for (let j = 0; j < bins; j++) {
+                    const x = xExtent.min + i * xStep;
+                    const y = yExtent.min + j * yStep;
+                    let density = 0;
+                    for (const point of points) {
+                        const distance = Math.sqrt((x - point.x) ** 2 + (y - point.y) ** 2);
+                        density += gaussKernel(distance / h);
+                    }
+                    density = density / (points.length * h * h);
+                    kdeResult.push({ x, y, kde: density, label });
+                }
+            }
+        });
+        return kdeResult;
+    }
+
+    const DATA_KEY$1 = 'dataKey';
+    class SequenceScatterKDEChartSpecTransformer extends vchart.CommonChartSpecTransformer {
+        transformSpec(spec) {
+            var _a, _b, _c, _d, _e, _f;
+            super.transformSpec(spec);
+            const dataSpecs = processSequenceData$1(spec);
+            spec.type = 'common';
+            spec.dataKey = DATA_KEY$1;
+            spec.data = dataSpecs[0].data;
+            spec.scales = [
+                {
+                    id: 'colorScale',
+                    type: 'ordinal',
+                    specified: {
+                        '0': 'rgb(150, 10, 100)',
+                        '1': 'rgb(31, 119, 180)',
+                        '2': 'rgb(255, 127, 14)',
+                        '3': 'rgb(44, 160, 44)',
+                        '4': 'rgb(214, 39, 40)',
+                        '5': 'rgb(148, 103, 189)',
+                        '6': 'rgb(140, 86, 75)',
+                        '7': 'rgb(227, 119, 194)',
+                        '8': 'rgb(127, 127, 127)',
+                        '9': 'rgb(188, 189, 34)',
+                        '10': 'rgb(23, 190, 207)'
+                    }
+                },
+                {
+                    id: 'brighterColorScale',
+                    type: 'ordinal',
+                    specified: {
+                        '0': 'rgb(150, 10, 150)',
+                        '1': 'rgb(31, 119, 230)',
+                        '2': 'rgb(255, 127, 64)',
+                        '3': 'rgb(44, 160, 94)',
+                        '4': 'rgb(214, 39, 90)',
+                        '5': 'rgb(148, 103, 239)',
+                        '6': 'rgb(140, 86, 125)',
+                        '7': 'rgb(227, 119, 244)',
+                        '8': 'rgb(127, 127, 177)',
+                        '9': 'rgb(188, 189, 84)',
+                        '10': 'rgb(23, 190, 255)'
+                    }
+                },
+                ...((_a = spec.scales) !== null && _a !== void 0 ? _a : [])
+            ];
+            spec.series = [
+                {
+                    type: 'scatter',
+                    dataIndex: 0,
+                    xField: spec.xField,
+                    yField: spec.yField,
+                    seriesField: spec.seriesField,
+                    size: 5,
+                    point: {
+                        zIndex: 1000,
+                        style: {
+                            fill: {
+                                scale: 'colorScale',
+                                field: spec.seriesField
+                            }
+                        }
+                    }
+                }
+            ];
+            const regionX = 54;
+            const regionY = 26;
+            spec.customMark = [
+                {
+                    type: 'text',
+                    dataIndex: 1,
+                    style: Object.assign({ text: (datum) => datum['iter'], x: 10, y: () => 10, textBaseline: 'top', textAlign: 'left', fontSize: 25, fontWeight: 'bolder', fill: 'black', fillOpacity: 0.2 }, (_b = spec.infoLabel) === null || _b === void 0 ? void 0 : _b.style)
+                },
+                {
+                    type: 'symbol',
+                    dataIndex: 2,
+                    style: {
+                        symbolType: 'rect',
+                        x: (datum, ctx) => {
+                            const valueToX = ctx.chart.getAllSeries()[0]._markAttributeContext.valueToX;
+                            const markX = valueToX([datum.x]);
+                            return regionX + markX;
+                        },
+                        y: (datum, ctx) => {
+                            const valueToY = ctx.chart.getAllSeries()[0]._markAttributeContext.valueToY;
+                            const markY = valueToY([datum.y]);
+                            return markY + regionY;
+                        },
+                        size: 5,
+                        fill: {
+                            scale: 'brighterColorScale',
+                            field: 'label'
+                        },
+                        fillOpacity: (datum) => datum.kde * 10
+                    }
+                }
+            ];
+            spec.tooltip = {
+                visible: true,
+                fields: ['x', 'y', 'label']
+            };
+            if (spec.player) {
+                spec.player = Object.assign(Object.assign({}, spec.player), { specs: dataSpecs });
+                spec.animationAppear = {
+                    duration: (_d = (_c = spec.player) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 2000,
+                    easing: 'linear'
+                };
+                spec.animationUpdate = {
+                    duration: (_f = (_e = spec.player) === null || _e === void 0 ? void 0 : _e.duration) !== null && _f !== void 0 ? _f : 2000,
+                    easing: 'linear'
+                };
+            }
+            spec.axes = [
+                {
+                    orient: 'left',
+                    type: 'linear',
+                    nice: true
+                },
+                {
+                    orient: 'bottom',
+                    type: 'linear',
+                    nice: true,
+                    label: { visible: true }
+                }
+            ];
+            super.transformSpec(spec);
+        }
+    }
+    function processSequenceData$1(spec) {
+        const result = [];
+        Object.keys(spec.data).forEach(iter => {
+            const currentData = spec.data[iter].map((d, i) => (Object.assign(Object.assign({}, d), { [DATA_KEY$1]: i })));
+            const kdeResults = calculateKDE(currentData, 150);
+            result.push({
+                data: [
+                    {
+                        id: 'nodes',
+                        values: currentData
+                    },
+                    {
+                        id: 'iter',
+                        values: [{ iter }]
+                    },
+                    {
+                        id: 'kde',
+                        values: kdeResults
+                    }
+                ]
+            });
+        });
+        return result;
+    }
+
+    class SequenceScatterKDE extends vchart.BaseChart {
+        constructor() {
+            super(...arguments);
+            this.type = 'sequenceScatterKDE';
+            this.transformerConstructor = SequenceScatterKDEChartSpecTransformer;
+        }
+        init() {
+            if (!this.isValid()) {
+                return;
+            }
+            super.init();
+        }
+        isValid() {
+            var _a, _b, _c, _d;
+            const { xField, yField, data } = this._spec;
+            if (!xField || !yField) {
+                (_b = (_a = this._option).onError) === null || _b === void 0 ? void 0 : _b.call(_a, 'Missing Required Config: `xField`, `yField` ');
+                return false;
+            }
+            if (!data) {
+                (_d = (_c = this._option).onError) === null || _d === void 0 ? void 0 : _d.call(_c, 'Data is required');
+                return false;
+            }
+            return true;
+        }
+    }
+    SequenceScatterKDE.type = 'sequenceScatterKDE';
+    SequenceScatterKDE.view = 'singleDefault';
+    SequenceScatterKDE.transformerConstructor = SequenceScatterKDEChartSpecTransformer;
+    const registerSequenceScatterKDE = (option) => {
+        const vchartConstructor = (option === null || option === void 0 ? void 0 : option.VChart) || vchart.VChart;
+        if (vchartConstructor) {
+            vchartConstructor.useChart([SequenceScatterKDE, vchart.ScatterChart]);
+        }
+    };
+
+    const DATA_KEY = 'dataKey';
+    const BACKGROUND_KEY = 'background';
+
+    function createImageDataFromColorMatrix(colorMatrix, spec) {
+        var _a;
+        if (typeof document === 'undefined') {
+            throw new Error('Canvas rendering requires browser environment with document object');
+        }
+        const canvas = document.createElement('canvas');
+        canvas.width = spec.width;
+        canvas.height = spec.height;
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+            throw new Error('Failed to get 2D rendering context from canvas');
+        }
+        const imageData = ctx.createImageData(spec.width, spec.height);
+        for (let y = 0; y < 300; y++) {
+            for (let x = 0; x < 300; x++) {
+                const rgb = ((_a = colorMatrix[y]) === null || _a === void 0 ? void 0 : _a[x]) || [0, 0, 0];
+                const pixelIndex = (y * 300 + x) * 4;
+                imageData.data[pixelIndex] = Math.round(rgb[0] * 255);
+                imageData.data[pixelIndex + 1] = Math.round(rgb[1] * 255);
+                imageData.data[pixelIndex + 2] = Math.round(rgb[2] * 255);
+                imageData.data[pixelIndex + 3] = 255;
+            }
+        }
+        ctx.putImageData(imageData, 0, 0);
+        return canvas.toDataURL('image/png');
+    }
+    function processSequenceData(spec) {
+        const result = [];
+        Object.keys(spec.data).forEach(inter => {
+            let backgroundData = null;
+            if (spec.backgroundColors && spec.backgroundColors[inter]) {
+                const imageData = createImageDataFromColorMatrix(spec.backgroundColors[inter], spec);
+                backgroundData = { imageData };
+            }
+            result.push({
+                data: [
+                    {
+                        id: 'nodes',
+                        values: spec.data[inter].map((d, i) => {
+                            return Object.assign(Object.assign({}, d), { [DATA_KEY]: i });
+                        })
+                    },
+                    {
+                        id: 'inter',
+                        values: [
+                            {
+                                inter
+                            }
+                        ]
+                    },
+                    {
+                        id: BACKGROUND_KEY,
+                        values: backgroundData ? [backgroundData] : []
+                    }
+                ]
+            });
+        });
+        return result;
+    }
+
+    class SequenceScatterPixelChartSpecTransformer extends vchart.CommonChartSpecTransformer {
+        transformSpec(spec) {
+            var _a, _b, _c, _d, _e;
+            super.transformSpec(spec);
+            const dataSpecs = processSequenceData(spec);
+            spec.type = 'common';
+            spec.dataKey = DATA_KEY;
+            spec.data = dataSpecs[0].data;
+            spec.width = 300;
+            spec.height = 300;
+            spec.autoFit = false;
+            spec.series = [
+                {
+                    type: 'scatter',
+                    xField: spec.xField,
+                    yField: spec.yField
+                }
+            ];
+            if (spec.player) {
+                spec.player = Object.assign(Object.assign({}, spec.player), { specs: dataSpecs });
+                spec.animationAppear = {
+                    duration: (_b = (_a = spec.player) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 2000,
+                    easing: 'linear'
+                };
+                spec.animationUpdate = {
+                    duration: (_d = (_c = spec.player) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 2000,
+                    easing: 'linear'
+                };
+            }
+            spec.axes = [
+                {
+                    orient: 'left',
+                    type: 'linear'
+                },
+                {
+                    orient: 'bottom',
+                    label: { visible: true },
+                    type: 'linear'
+                }
+            ];
+            spec.customMark = [
+                {
+                    type: 'image',
+                    dataIndex: 2,
+                    style: {
+                        x: 0,
+                        y: 0,
+                        width: 300,
+                        height: 300,
+                        image: (datum) => datum.imageData,
+                        zIndex: -1
+                    }
+                },
+                {
+                    type: 'text',
+                    dataIndex: 1,
+                    style: Object.assign({ text: (datum) => datum['inter'], x: 50, y: () => 10, textBaseline: 'top', textAlign: 'left', fontSize: 100, fontWeight: 'bolder', fill: 'black', fillOpacity: 0.2 }, (_e = spec.infoLabel) === null || _e === void 0 ? void 0 : _e.style)
+                }
+            ];
+            spec.tooltip = {
+                visible: false
+            };
+            super.transformSpec(spec);
+        }
+    }
+
+    class SequenceScatterPixel extends vchart.BaseChart {
+        constructor() {
+            super(...arguments);
+            this.type = 'sequenceScatterPixel';
+            this.transformerConstructor = SequenceScatterPixelChartSpecTransformer;
+        }
+        init() {
+            if (!this.isValid()) {
+                return;
+            }
+            super.init();
+        }
+        isValid() {
+            var _a, _b, _c, _d;
+            const { xField, yField, data } = this._spec;
+            if (!xField || !yField) {
+                (_b = (_a = this._option).onError) === null || _b === void 0 ? void 0 : _b.call(_a, 'Missing Required Config: `xField`, `yField` ');
+                return false;
+            }
+            if (!data) {
+                (_d = (_c = this._option).onError) === null || _d === void 0 ? void 0 : _d.call(_c, 'Data is required');
+                return false;
+            }
+            return true;
+        }
+    }
+    SequenceScatterPixel.type = 'sequenceScatterPixel';
+    SequenceScatterPixel.view = 'singleDefault';
+    SequenceScatterPixel.transformerConstructor = SequenceScatterPixelChartSpecTransformer;
+    const registerSequenceScatterPixel = (option) => {
+        const vchartConstructor = (option === null || option === void 0 ? void 0 : option.VChart) || vchart.VChart;
+        if (vchartConstructor) {
+            vchartConstructor.useChart([SequenceScatterPixel, vchart.ScatterChart]);
+        }
+    };
+
     class Generator {
       static GenAutoIncrementId() {
         return Generator.auto_increment_id++;
@@ -3041,6 +3844,11 @@
         return this.context.tryUpdateLength();
       }
     };
+    class StepClosed extends Step$1 {
+      lineEnd() {
+        this.context.closePath();
+      }
+    }
     function genStepSegments(points, t) {
       let params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
       const {
@@ -3054,6 +3862,16 @@
     function genStepTypeSegments(path, points) {
       return genCurveSegments(path, points);
     }
+    function genStepClosedSegments(points, t) {
+      let params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      const {
+        direction: direction,
+        startPoint: startPoint
+      } = params;
+      if (points.length < 2 - Number(!!startPoint)) return null;
+      const segContext = new SegContext("step", null != direction ? direction : vutils.abs(points[points.length - 1].x - points[0].x) > vutils.abs(points[points.length - 1].y - points[0].y) ? Direction.ROW : Direction.COLUMN);
+      return genStepTypeSegments(new StepClosed(segContext, t, startPoint), points), segContext;
+    }
 
     class LinearClosed extends Linear {
       lineEnd() {
@@ -3283,6 +4101,8 @@
           return genMonotoneYSegments(points, params);
         case "step":
           return genStepSegments(points, .5, params);
+        case "stepClosed":
+          return genStepClosedSegments(points, .5, params);
         case "stepBefore":
           return genStepSegments(points, 0, params);
         case "stepAfter":
@@ -3717,7 +4537,8 @@
       filter: "",
       cursor: null,
       html: null,
-      react: null
+      react: null,
+      vue: null
     }, DefaultFillStyle), DefaultStrokeStyle), DefaultLayout), DefaultPickStyle);
     const DefaultConnectAttribute = {
       connectedType: "none",
@@ -3825,6 +4646,12 @@
       cornerRadius: 0,
       closePath: !0
     });
+    const DefaultStarAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
+      width: 100,
+      height: 100,
+      spikes: 5,
+      thickness: .5
+    });
     const DefaultRectAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
       width: 0,
       height: 0,
@@ -3989,6 +4816,7 @@
         text: DefaultTextAttribute,
         rect: DefaultRectAttribute,
         polygon: DefaultPolygonAttribute,
+        star: DefaultStarAttribute,
         richtext: DefaultRichTextAttribute,
         richtextIcon: DefaultRichTextIconAttribute,
         image: DefaultImageAttribute,
@@ -4007,6 +4835,7 @@
         text: Object.assign({}, defaultThemeObj.text),
         rect: Object.assign({}, defaultThemeObj.rect),
         polygon: Object.assign({}, defaultThemeObj.polygon),
+        star: Object.assign({}, defaultThemeObj.star),
         richtext: Object.assign({}, defaultThemeObj.richtext),
         richtextIcon: Object.assign({}, defaultThemeObj.richtextIcon),
         image: Object.assign({}, defaultThemeObj.image),
@@ -4486,7 +5315,7 @@
       }
       _composedDetailPath(params) {
         if (params && params.graphic) {
-          const g = this.pickParams.graphic;
+          const g = params.graphic;
           if (g.stage) {
             const path = g.stage.eventSystem.manager.propagationPath(g);
             this.detailPath.push(path), this._composedDetailPath(params.params);
@@ -5797,7 +6626,7 @@
     }
     var rect = new RectSymbol();
 
-    const tempBounds$1 = new vutils.AABBBounds();
+    const tempBounds = new vutils.AABBBounds();
     class CustomSymbolClass {
       constructor(type, path) {
         let isSvg = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !1;
@@ -5826,7 +6655,7 @@
             let {
               path: path
             } = _ref;
-            tempBounds$1.x1 = path.bounds.x1 * size, tempBounds$1.y1 = path.bounds.y1 * size, tempBounds$1.x2 = path.bounds.x2 * size, tempBounds$1.y2 = path.bounds.y2 * size, bounds.union(tempBounds$1);
+            tempBounds.x1 = path.bounds.x1 * size, tempBounds.y1 = path.bounds.y1 * size, tempBounds.x2 = path.bounds.x2 * size, tempBounds.y2 = path.bounds.y2 * size, bounds.union(tempBounds);
           });
         }
         this.path.bounds && (bounds.x1 = this.path.bounds.x1 * size, bounds.y1 = this.path.bounds.y1 * size, bounds.x2 = this.path.bounds.x2 * size, bounds.y2 = this.path.bounds.y2 * size);
@@ -6121,6 +6950,7 @@
     genNumberType();
     genNumberType();
     genNumberType();
+    genNumberType();
     const SYMBOL_NUMBER_TYPE = genNumberType();
     const TEXT_NUMBER_TYPE = genNumberType();
     const GraphicCreator$1 = Symbol.for("GraphicCreator");
@@ -6138,8 +6968,8 @@
     const SVG_PARSE_ATTRIBUTE_MAP_KEYS = Object.keys(SVG_PARSE_ATTRIBUTE_MAP);
 
     const _tempBounds = new vutils.AABBBounds(),
-      tempMatrix = new vutils.Matrix(),
-      tempBounds = new vutils.AABBBounds();
+      tempMatrix = new vutils.Matrix();
+      new vutils.AABBBounds();
     const GRAPHIC_UPDATE_TAG_KEY = ["lineWidth", "scaleX", "scaleY", "angle", "anchor", "visible"];
     const tempConstantXYKey = ["x", "y"],
       tempConstantScaleXYKey = ["scaleX", "scaleY"],
@@ -6374,6 +7204,9 @@
           y: y
         });
       }
+      setWidthHeightWithoutTransform(aabbBounds) {
+        this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1;
+      }
       setAttributes(params) {
         let forceUpdateTag = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
         let context = arguments.length > 2 ? arguments[2] : undefined;
@@ -6655,24 +7488,12 @@
       needUpdateLayout() {
         return !!(this._updateTag & UpdateTag.UPDATE_LAYOUT);
       }
-      getAnchor(anchor, params) {
+      getAnchor(anchor, params, resetScale) {
         const _anchor = [0, 0],
           getBounds = () => {
             if (params.b) return params.b;
-            const {
-              scaleX: scaleX,
-              scaleY: scaleY,
-              angle: angle
-            } = this.attribute;
-            return tempBounds.copy(this._AABBBounds), this.setAttributes({
-              scaleX: 1,
-              scaleY: 1,
-              angle: 0
-            }), params.b = this.AABBBounds.clone(), this._AABBBounds.copy(tempBounds), this.setAttributes({
-              scaleX: scaleX,
-              scaleY: scaleY,
-              angle: angle
-            }), params.b;
+            const graphic = this.clone();
+            return graphic.attribute.angle = 0, graphic.attribute.scaleCenter = null, resetScale && (graphic.attribute.scaleX = 1, graphic.attribute.scaleY = 1), params.b = graphic.AABBBounds, params.b;
           };
         if ("string" == typeof anchor[0]) {
           const ratio = parseFloat(anchor[0]) / 100,
@@ -6699,9 +7520,9 @@
         } = this.attribute;
         let _anchor = [0, 0];
         const params = {};
-        if (anchor && (_anchor = this.getAnchor(anchor, params)), !scaleCenter || 1 === scaleX && 1 === scaleY) vutils.normalTransform(this._transMatrix, this._transMatrix.reset(), x, y, scaleX, scaleY, angle, anchor && _anchor);else {
+        if (anchor && angle && (_anchor = this.getAnchor(anchor, params)), !scaleCenter || 1 === scaleX && 1 === scaleY) vutils.normalTransform(this._transMatrix, this._transMatrix.reset(), x, y, scaleX, scaleY, angle, anchor && _anchor);else {
           const m = this._transMatrix;
-          m.reset(), m.translate(_anchor[0], _anchor[1]), m.rotate(angle), m.translate(-_anchor[0], -_anchor[1]), m.translate(x, y), _anchor = this.getAnchor(scaleCenter, params), application.transformUtil.fromMatrix(m, m).scale(scaleX, scaleY, {
+          m.reset(), m.translate(_anchor[0], _anchor[1]), m.rotate(angle), m.translate(-_anchor[0], -_anchor[1]), m.translate(x, y), _anchor = this.getAnchor(scaleCenter, params, !0), application.transformUtil.fromMatrix(m, m).scale(scaleX, scaleY, {
             x: _anchor[0],
             y: _anchor[1]
           });
@@ -7649,7 +8470,7 @@
           const shadowBlurHalfWidth = shadowBlur / Math.abs(scaleX + scaleY);
           boundStroke(tb1, shadowBlurHalfWidth, !0, strokeBoundsBuffer), aabbBounds.union(tb1);
         }
-        return application.graphicService.combindShadowAABBBounds(aabbBounds, this), null == attribute.forceBoundsHeight && null == attribute.forceBoundsWidth || application.graphicService.updateHTMLTextAABBBounds(attribute, textTheme, aabbBounds), vutils.transformBoundsWithMatrix(aabbBounds, aabbBounds, this.transMatrix), aabbBounds;
+        return application.graphicService.combindShadowAABBBounds(aabbBounds, this), null == attribute.forceBoundsHeight && null == attribute.forceBoundsWidth || application.graphicService.updateHTMLTextAABBBounds(attribute, textTheme, aabbBounds), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1, vutils.transformBoundsWithMatrix(aabbBounds, aabbBounds, this.transMatrix), aabbBounds;
       }
       updateSingallineAABBBounds(text) {
         this.updateMultilineAABBBounds([text]);
@@ -8030,7 +8851,7 @@
           tb1: tb1,
           tb2: tb2
         } = application.graphicService.updateTempAABBBounds(aabbBounds);
-        updateBoundsOfSymbolOuterBorder(attribute, symbolTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2);
+        updateBoundsOfSymbolOuterBorder(attribute, symbolTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1, this.x1WithoutTransform = aabbBounds.x1, this.y1WithoutTransform = aabbBounds.y1;
         const {
           lineJoin = symbolTheme.lineJoin
         } = attribute;
@@ -8102,7 +8923,7 @@
         return getTheme(this).line;
       }
       updateAABBBounds(attribute, lineTheme, aabbBounds) {
-        this.updatePathProxyAABBBounds(aabbBounds) || (attribute.segments ? this.updateLineAABBBoundsBySegments(attribute, lineTheme, aabbBounds) : this.updateLineAABBBoundsByPoints(attribute, lineTheme, aabbBounds)), application.graphicService.updateTempAABBBounds(aabbBounds);
+        this.updatePathProxyAABBBounds(aabbBounds) || (attribute.segments ? this.updateLineAABBBoundsBySegments(attribute, lineTheme, aabbBounds) : this.updateLineAABBBoundsByPoints(attribute, lineTheme, aabbBounds)), application.graphicService.updateTempAABBBounds(aabbBounds), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1;
         const {
           lineJoin = lineTheme.lineJoin
         } = attribute;
@@ -8202,7 +9023,7 @@
           tb1: tb1,
           tb2: tb2
         } = application.graphicService.updateTempAABBBounds(aabbBounds);
-        updateBoundsOfCommonOuterBorder(attribute, pathTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2);
+        updateBoundsOfCommonOuterBorder(attribute, pathTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1;
         const {
           lineJoin = pathTheme.lineJoin
         } = attribute;
@@ -8259,7 +9080,7 @@
         return getTheme(this).area;
       }
       updateAABBBounds(attribute, areaTheme, aabbBounds) {
-        this.updatePathProxyAABBBounds(aabbBounds) || (attribute.segments ? this.updateAreaAABBBoundsBySegments(attribute, areaTheme, aabbBounds) : this.updateAreaAABBBoundsByPoints(attribute, areaTheme, aabbBounds)), application.graphicService.updateTempAABBBounds(aabbBounds);
+        this.updatePathProxyAABBBounds(aabbBounds) || (attribute.segments ? this.updateAreaAABBBoundsBySegments(attribute, areaTheme, aabbBounds) : this.updateAreaAABBBoundsByPoints(attribute, areaTheme, aabbBounds)), application.graphicService.updateTempAABBBounds(aabbBounds), this.setWidthHeightWithoutTransform(aabbBounds);
         const {
           lineJoin = areaTheme.lineJoin
         } = attribute;
@@ -8353,7 +9174,7 @@
         return getTheme(this).polygon;
       }
       updateAABBBounds(attribute, polygonTheme, aabbBounds) {
-        this.updatePathProxyAABBBounds(aabbBounds) || this.updatePolygonAABBBoundsImprecise(attribute, polygonTheme, aabbBounds), application.graphicService.updateTempAABBBounds(aabbBounds);
+        this.updatePathProxyAABBBounds(aabbBounds) || this.updatePolygonAABBBoundsImprecise(attribute, polygonTheme, aabbBounds), application.graphicService.updateTempAABBBounds(aabbBounds), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1;
         const {
           lineJoin = polygonTheme.lineJoin
         } = attribute;
@@ -11351,6 +12172,9 @@
     exports.RankingBar = RankingBar;
     exports.RankingList = RankingList;
     exports.SERIES_BREAK = SERIES_BREAK;
+    exports.SequenceScatterKDE = SequenceScatterKDE;
+    exports.SequenceScatterLink = SequenceScatterLink;
+    exports.SequenceScatterPixel = SequenceScatterPixel;
     exports.SeriesBreakComponent = SeriesBreakComponent;
     exports.SeriesLabelComponent = SeriesLabelComponent;
     exports.appendBarLinkConfig = appendBarLinkConfig;
@@ -11363,6 +12187,9 @@
     exports.registerConversionFunnelChart = registerConversionFunnelChart;
     exports.registerRankingBarChart = registerRankingBarChart;
     exports.registerRankingList = registerRankingList;
+    exports.registerSequenceScatterKDE = registerSequenceScatterKDE;
+    exports.registerSequenceScatterLink = registerSequenceScatterLink;
+    exports.registerSequenceScatterPixel = registerSequenceScatterPixel;
     exports.registerSeriesBreak = registerSeriesBreak;
     exports.registerSeriesLabel = registerSeriesLabel;