@visactor/vchart-extension 1.13.9-alpha.1 → 1.13.9-alpha.11

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++;
@@ -11351,6 +12154,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 +12169,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;