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

package/esm/charts/sequence-analysis/interface.d.ts

@@ -0,0 +1,40 @@
+export interface EventData {
+    user_id: string;
+    user_image: string;
+    dots: {
+        step: string;
+        action_type: string;
+        node_name: string;
+        medium_type: string;
+        time_stamp: number;
+        action_count: number;
+    }[];
+}
+export interface UserImageMap {
+    [user_id: string]: string;
+}
+export interface PatternData {
+    from: string;
+    to: string;
+    pattern_type: string;
+    isExtend?: 'left' | 'right' | 'all';
+}
+export interface ActionData {
+    from: string;
+    to: string;
+    user_id?: string;
+    user_image?: string;
+}
+export interface ISequenceAnalysisSpec {
+    type: 'sequenceAnalysis';
+    colors?: string[];
+    mode: 'time' | 'step';
+    mediumConnection?: boolean;
+    actionTarget?: boolean;
+    eventData: EventData[];
+    patternData?: PatternData[];
+    actionData?: ActionData[];
+    userImageMap: UserImageMap;
+    stepMediumMap: Record<string, string>;
+    customTransformSpec?: (spec: any) => void;
+}

package/esm/charts/sequence-analysis/interface.js

@@ -0,0 +1,2 @@
+export { };
+//# sourceMappingURL=interface.js.map

package/esm/charts/sequence-analysis/interface.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/charts/sequence-analysis/interface.ts"],"names":[],"mappings":"","file":"interface.js","sourcesContent":["// 绘制点\nexport interface EventData {\n  user_id: string; // 用户id\n  user_image: string; // 用户头像url\n  dots: {\n    // step步骤\n    // step模式下以此为维度轴\n    step: string;\n    // 事件类型\n    // 颜色维度\n    action_type: string;\n    // 事件唯一标识\n    node_name: string;\n    // 介质类型\n    // step + medium connection, 以此为维度轴\n    medium_type: string;\n    // 事件发生时间\n    // time模式, 以此为维度轴\n    time_stamp: number;\n    // 事件发生次数\n    // time模式, 以此为top轴标识\n    action_count: number;\n  }[];\n}\n\n// 绘制user头像\nexport interface UserImageMap {\n  [user_id: string]: string; // 用户id -> 用户头像url\n}\n\n// 绘制pattern\nexport interface PatternData {\n  // 事件id\n  from: string;\n  // 事件id\n  to: string;\n  // pattern类型, 颜色维度\n  pattern_type: string;\n  /**\n   * 是否延伸 2/x\n   * 默认两边延伸\n   */\n  isExtend?: 'left' | 'right' | 'all';\n}\n\n// 绘制连接\nexport interface ActionData {\n  // 事件id\n  from: string;\n  // 事件id\n  to: string;\n  // 用户id\n  // time模式开启Action Target是需要使用\n  user_id?: string;\n  // 用户头像url\n  user_image?: string;\n}\n\nexport interface ISequenceAnalysisSpec {\n  /**\n   * 图表类型\n   */\n  type: 'sequenceAnalysis';\n  /**\n   * 色板(看是否需要根据key指定)\n   */\n  colors?: string[];\n  /**\n   * 展示模式\n   */\n  mode: 'time' | 'step';\n  /**\n   * step模式下, 是否开启介质连接\n   * @default false\n   * @description 关闭时, 使用直接绘制; 开启时, 使用三次贝塞尔曲线绘制\n   */\n  mediumConnection?: boolean;\n  /**\n   * time模式下, 是否开启actionTarget\n   * @default false\n   * @description 关闭时, 使用直线连接; 开启时, 连接线中间有用户头像\n   */\n  actionTarget?: boolean;\n  /**\n   * 事件数据\n   */\n  eventData: EventData[];\n  /**\n   * 模式下的pattern数据\n   */\n  patternData?: PatternData[];\n  /**\n   * 模式下的action数据\n   */\n  actionData?: ActionData[];\n  /**\n   * 用户头像数据(从eventData中抽取也可以, 但不建议在前端遍历数据)\n   */\n  userImageMap: UserImageMap;\n  stepMediumMap: Record<string, string>;\n  /**\n   * @param spec 经过rankingList转化后的vchart原始spec\n   * @description 获取vchart原始spec, 并根据业务自行添加转换逻辑\n   */\n  customTransformSpec?: (spec: any) => void;\n}\n"]}

package/esm/charts/sequence-analysis/sequence-analysis-transformer.d.ts

@@ -0,0 +1,4 @@
+import { CommonChartSpecTransformer } from '@visactor/vchart';
+export declare class SequenceAnalysisChartSpecTransformer extends CommonChartSpecTransformer<any> {
+    transformSpec(spec: any): void;
+}

package/esm/charts/sequence-analysis/sequence-analysis-transformer.js

@@ -0,0 +1,258 @@
+import { CommonChartSpecTransformer } from "@visactor/vchart";
+
+export class SequenceAnalysisChartSpecTransformer extends CommonChartSpecTransformer {
+    transformSpec(spec) {
+        var _a;
+        delete spec.type, spec.type = "common", spec.data = [ {
+            id: "eventData",
+            values: spec.eventData
+        }, {
+            id: "actionData",
+            values: spec.actionData
+        }, {
+            id: "patternData",
+            values: spec.patternData
+        } ];
+        const {eventData: eventData} = spec, {mode: mode, mediumConnection: mediumConnection = !1, actionTarget: actionTarget = !1, stepMediumMap: stepMediumMap} = spec;
+        spec.series = [ {
+            type: "link",
+            dataId: "time" === mode ? "actionData" : "patternData",
+            dotSeriesIndex: 1,
+            fromField: "from",
+            toField: "to",
+            seriesField: "pattern_type",
+            imageLabelField: "time" === mode && actionTarget ? "user_image" : "",
+            allowExtend: "step" === mode && !mediumConnection,
+            linkType: "step" === mode && mediumConnection ? "curve" : "line",
+            arrow: {
+                style: {
+                    visible: "time" === mode && actionTarget
+                }
+            },
+            link: {
+                state: {
+                    custom_unSelected: {
+                        strokeOpacity: .5,
+                        stroke: "grey"
+                    }
+                },
+                style: {
+                    visible: "step" === mode || actionTarget
+                }
+            },
+            imageLabel: {
+                visible: "time" === mode && actionTarget,
+                style: {
+                    width: 40,
+                    height: 40
+                }
+            }
+        }, {
+            type: "dot",
+            xField: "time" === mode ? "time_stamp" : mediumConnection ? "medium_type" : "step",
+            yField: "user_id",
+            titleField: "user_id",
+            seriesField: "action_type",
+            linearMode: "time" === mode,
+            dataIndex: 0,
+            highLightSeriesGroup: "",
+            title: {
+                visible: !1,
+                style: {
+                    fill: "rgba(46, 47, 50)"
+                }
+            },
+            grid: {
+                style: {
+                    visible: !1
+                }
+            },
+            dot: {
+                state: {
+                    custom_unSelected: {
+                        fillOpacity: .5,
+                        fill: "grey"
+                    }
+                }
+            },
+            symbol: {
+                visible: !1
+            }
+        } ], spec.series.forEach((s => {
+            "link" === s.type && (s.dotSeriesSpec = spec.series[s.dotSeriesIndex]);
+        }));
+        const tickData = [], timeCountMap = {};
+        eventData.forEach((user => {
+            user.dots.forEach((e => {
+                timeCountMap[e.time_stamp] ? timeCountMap[e.time_stamp] += e.action_count : timeCountMap[e.time_stamp] = e.action_count;
+            }));
+        })), Object.keys(timeCountMap).sort(((a, b) => Number(a) - Number(b))).forEach((key => {
+            tickData.push({
+                time_stamp: Number(key),
+                action_count: timeCountMap[key]
+            });
+        }));
+        const axes = [];
+        "step" === mode ? mediumConnection ? axes.push({
+            orient: "top",
+            type: "band",
+            id: "top_medium"
+        }) : (axes.push({
+            orient: "top",
+            type: "band",
+            id: "top_medium",
+            label: {
+                formatMethod: label => ({
+                    type: "rich",
+                    text: [ {
+                        text: `${stepMediumMap[label].medium_type}... `,
+                        fontSize: 12
+                    }, {
+                        text: `+${stepMediumMap[label].count}`,
+                        fontSize: 12,
+                        background: "grey",
+                        backgroundOpacity: .4,
+                        backgroundCornerRadius: 5
+                    } ]
+                })
+            }
+        }), axes.push({
+            orient: "bottom",
+            id: "bottom_step",
+            type: "band",
+            bandPadding: 0
+        })) : (axes.push({
+            orient: "top",
+            type: "time",
+            id: "top_count",
+            label: {
+                dataFilter: datum => {
+                    const minData = datum[0].rawValue, minValue = datum[0].value, maxData = datum[datum.length - 1].rawValue, maxValue = datum[datum.length - 1].value;
+                    return tickData.filter((t => t.time_stamp >= minData && t.time_stamp <= maxData)).map((t => ({
+                        id: t.time_stamp,
+                        label: t.action_count,
+                        value: (t.time_stamp - minData) / (maxData - minData) * (maxValue - minValue) + minValue,
+                        rawValue: t.time_stamp
+                    })));
+                },
+                formatMethod: (label, datum) => (null == datum ? void 0 : datum.rawValue) ? timeCountMap[datum.rawValue] : label
+            },
+            tick: {
+                visible: !1
+            },
+            grid: {
+                visible: !1
+            },
+            innerOffset: {
+                left: 50,
+                right: 50
+            }
+        }), axes.push({
+            orient: "bottom",
+            id: "bottom_time",
+            type: "time",
+            layers: [ {
+                tickStep: 28800,
+                timeFormat: "%Y%m%d"
+            }, {
+                tickStep: 28800,
+                timeFormat: "%H:%M"
+            } ],
+            label: {
+                dataFilter: datum => {
+                    const minData = datum[0].rawValue, minValue = datum[0].value, maxData = datum[datum.length - 1].rawValue, maxValue = datum[datum.length - 1].value;
+                    return tickData.filter((t => t.time_stamp >= minData && t.time_stamp <= maxData)).map((t => ({
+                        id: t.time_stamp,
+                        label: t.time_stamp,
+                        value: (t.time_stamp - minData) / (maxData - minData) * (maxValue - minValue) + minValue,
+                        rawValue: t.time_stamp
+                    })));
+                }
+            },
+            tick: {
+                visible: !1
+            },
+            grid: {
+                visible: !1
+            },
+            innerOffset: {
+                left: 50,
+                right: 50
+            }
+        })), spec.axes = [ ...axes, {
+            orient: "left",
+            type: "band",
+            domainLine: {
+                visible: !1
+            },
+            tick: {
+                visible: !1
+            },
+            label: {
+                formatMethod: label => ({
+                    type: "rich",
+                    text: [ {
+                        image: spec.userImageMap[label],
+                        width: 40,
+                        height: 40
+                    } ]
+                })
+            },
+            grid: {
+                visible: !0,
+                style: {
+                    lineDash: [ 3, 3 ]
+                }
+            }
+        } ], spec.dataZoom = [ {
+            orient: "bottom",
+            axisIndex: 0,
+            filterMode: "filter"
+        } ], spec.scrollBar = [ {
+            orient: "right",
+            axisIndex: spec.axes.length - 1,
+            filterMode: "axis",
+            start: 0,
+            end: .8
+        }, {
+            orient: "bottom",
+            axisIndex: 0,
+            linkedAxisIndex: mediumConnection && "step" === mode ? void 0 : 1,
+            filterMode: "axis",
+            start: 0,
+            end: .8
+        } ], spec.crosshair = {
+            xField: {
+                visible: !0,
+                line: {
+                    type: "rect",
+                    width: 20,
+                    style: {
+                        fill: "rgb(240,242,245)"
+                    }
+                },
+                bindingAxesIndex: [ 0, 1 ]
+            },
+            yField: {
+                visible: !0,
+                bindingAxesIndex: [ spec.axes.length - 1 ],
+                line: {
+                    type: "rect"
+                }
+            }
+        }, "time" === mode && (spec.markLine = tickData.map((t => ({
+            zIndex: -1,
+            x: t.time_stamp,
+            endSymbol: {
+                visible: !1
+            },
+            label: {
+                visible: !1
+            }
+        })))), spec.tooltip = {
+            visible: !1
+        }, spec.animation = !1, null === (_a = spec.customTransformSpec) || void 0 === _a || _a.call(spec, spec), 
+        super.transformSpec(spec);
+    }
+}
+//# sourceMappingURL=sequence-analysis-transformer.js.map

package/esm/charts/sequence-analysis/sequence-analysis-transformer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/charts/sequence-analysis/sequence-analysis-transformer.ts"],"names":[],"mappings":"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","file":"sequence-analysis-transformer.js","sourcesContent":["import { CommonChartSpecTransformer } from '@visactor/vchart';\nimport type { EventData } from './interface';\n\nexport class SequenceAnalysisChartSpecTransformer extends CommonChartSpecTransformer<any> {\n  transformSpec(spec: any): void {\n    // 类型配置\n    delete spec.type;\n    spec.type = 'common';\n\n    // 数据配置\n    spec.data = [\n      {\n        id: 'eventData',\n        values: spec.eventData\n      },\n      {\n        id: 'actionData',\n        values: spec.actionData\n      },\n      {\n        id: 'patternData',\n        values: spec.patternData\n      }\n    ];\n    const { eventData } = spec;\n    // delete spec.eventData;\n    // delete spec.actionData;\n    // delete spec.patternData;\n\n    // 系列配置\n    const { mode, mediumConnection = false, actionTarget = false, stepMediumMap } = spec;\n    spec.series = [\n      {\n        type: 'link',\n        dataId: mode === 'time' ? 'actionData' : 'patternData',\n        dotSeriesIndex: 1,\n        fromField: 'from',\n        toField: 'to',\n        seriesField: 'pattern_type',\n        imageLabelField: mode === 'time' && actionTarget ? 'user_image' : '',\n        allowExtend: mode === 'step' && !mediumConnection,\n        linkType: mode === 'step' && mediumConnection ? 'curve' : 'line',\n        arrow: {\n          style: {\n            visible: mode === 'time' && actionTarget\n            // fill: 'grey'\n          }\n        },\n        link: {\n          state: {\n            custom_unSelected: {\n              strokeOpacity: 0.5,\n              stroke: 'grey'\n            }\n          },\n          style: {\n            // stroke: 'grey',\n            visible: mode === 'step' || actionTarget\n          }\n        },\n        imageLabel: {\n          visible: mode === 'time' && actionTarget,\n          style: {\n            width: 40,\n            height: 40\n          }\n        }\n      },\n      {\n        type: 'dot',\n        xField: mode === 'time' ? 'time_stamp' : mediumConnection ? 'medium_type' : 'step',\n        yField: 'user_id',\n        titleField: 'user_id',\n        seriesField: 'action_type',\n        linearMode: mode === 'time',\n        dataIndex: 0,\n        highLightSeriesGroup: '',\n        title: {\n          visible: false,\n          style: {\n            fill: 'rgba(46, 47, 50)'\n          }\n        },\n        grid: {\n          style: {\n            visible: false\n          }\n        },\n        dot: {\n          state: {\n            custom_unSelected: {\n              fillOpacity: 0.5,\n              fill: 'grey'\n            }\n          }\n        },\n        symbol: {\n          visible: false\n        }\n      }\n    ];\n    spec.series.forEach((s: any) => {\n      if (s.type === 'link') {\n        s.dotSeriesSpec = spec.series[s.dotSeriesIndex];\n      }\n    });\n\n    // 构建轴标签\n    // 时间 => 事件数量\n    const tickData: { time_stamp: number; action_count: number }[] = [];\n    const timeCountMap: Record<string, number> = {};\n    (eventData as EventData[]).forEach(user => {\n      user.dots.forEach(e => {\n        if (timeCountMap[e.time_stamp]) {\n          timeCountMap[e.time_stamp] += e.action_count;\n        } else {\n          timeCountMap[e.time_stamp] = e.action_count;\n        }\n      });\n    });\n    Object.keys(timeCountMap)\n      .sort((a, b) => Number(a) - Number(b)) // 按时间戳排序\n      .forEach(key => {\n        tickData.push({\n          time_stamp: Number(key),\n          action_count: timeCountMap[key]\n        });\n      });\n\n    // 轴配置\n    const axes = [];\n    // step 模式\n    if (mode === 'step') {\n      if (mediumConnection) {\n        axes.push({\n          orient: 'top',\n          type: 'band',\n          id: 'top_medium'\n        });\n      } else {\n        axes.push({\n          orient: 'top',\n          type: 'band',\n          id: 'top_medium',\n          label: {\n            formatMethod: (label: string) => {\n              return {\n                type: 'rich',\n                text: [\n                  {\n                    text: `${(stepMediumMap[label] as any).medium_type}... `,\n                    fontSize: 12\n                  },\n                  {\n                    text: `+${(stepMediumMap[label] as any).count}`,\n                    fontSize: 12,\n                    background: 'grey',\n                    backgroundOpacity: 0.4,\n                    backgroundCornerRadius: 5\n                  }\n                ]\n              };\n            }\n          }\n        });\n        axes.push({\n          orient: 'bottom',\n          id: 'bottom_step',\n          type: 'band',\n          bandPadding: 0\n        });\n      }\n    }\n    // time 模式\n    else {\n      axes.push({\n        orient: 'top',\n        // bandSize: 800,\n        type: 'time',\n        id: 'top_count',\n        label: {\n          dataFilter: (datum: any) => {\n            const minData = datum[0].rawValue;\n            const minValue = datum[0].value;\n            const maxData = datum[datum.length - 1].rawValue;\n            const maxValue = datum[datum.length - 1].value;\n            return tickData\n              .filter(t => t.time_stamp >= minData && t.time_stamp <= maxData)\n              .map(t => ({\n                id: t.time_stamp,\n                label: t.action_count,\n                value: ((t.time_stamp - minData) / (maxData - minData)) * (maxValue - minValue) + minValue,\n                rawValue: t.time_stamp\n              }));\n          },\n          formatMethod: (label: string, datum: any) => {\n            if (datum?.rawValue) {\n              return timeCountMap[datum.rawValue];\n            }\n            return label;\n          }\n        },\n        tick: {\n          visible: false\n          // dataFilter: (datum, context) => {\n          //   const [min, max] = context.vchart.getChart().getAllComponents()[0].getScale(0)._niceDomain;\n          //   const [minRange, maxRange] = context.vchart.getChart().getAllComponents()[0].getScale(0)._wholeRange;\n          //   console.log(\n          //     'datum-----------',\n          //     datum,\n          //     maxRange,\n          //     max,\n          //     context.vchart.getChart().getAllComponents()[0].getScale(0),\n          //     tickData.map(t => ({\n          //       id: t.time_stamp,\n          //       label: t.time_stamp,\n          //       value: (t.time_stamp - min) / (max - min),\n          //       rawValue: t.time_stamp,\n          //       point: { x: ((t.time_stamp - min) / (max - min)) * (maxRange - minRange) + minRange, y: 0 }\n          //     }))\n          //   );\n          //   return datum;\n          //   return tickData.map(t => ({\n          //     id: t.time_stamp,\n          //     label: t.time_stamp,\n          //     value: (t.time_stamp - min) / (max - min),\n          //     rawValue: t.time_stamp,\n          //     point: { x: ((t.time_stamp - min) / (max - min)) * (maxRange - minRange) + minRange, y: 0 }\n          //   }));\n          // }\n        },\n        grid: {\n          visible: false\n        },\n        innerOffset: {\n          left: 50,\n          right: 50\n        }\n      });\n      axes.push({\n        orient: 'bottom',\n        id: 'bottom_time',\n        type: 'time',\n        layers: [\n          {\n            tickStep: 28800,\n            timeFormat: '%Y%m%d'\n          },\n          {\n            tickStep: 28800,\n            timeFormat: '%H:%M'\n          }\n        ],\n        label: {\n          dataFilter: (datum: any) => {\n            const minData = datum[0].rawValue;\n            const minValue = datum[0].value;\n            const maxData = datum[datum.length - 1].rawValue;\n            const maxValue = datum[datum.length - 1].value;\n            return tickData\n              .filter(t => t.time_stamp >= minData && t.time_stamp <= maxData)\n              .map(t => ({\n                id: t.time_stamp,\n                label: t.time_stamp,\n                value: ((t.time_stamp - minData) / (maxData - minData)) * (maxValue - minValue) + minValue,\n                rawValue: t.time_stamp\n              }));\n          }\n        },\n        tick: {\n          visible: false\n          // dataFilter: (datum, context) => {\n          //   // console.log('context', context, datum);\n          //   const [min, max] = context.vchart.getChart().getAllComponents()[0].getScale(0)._niceDomain;\n          //   const [minRange, maxRange] = context.vchart.getChart().getAllComponents()[0].getScale(0).range();\n          //   // console.log('datum', datum, min, max);\n          //   // return datum;\n          //   return tickData.map(t => ({\n          //     id: t.time_stamp,\n          //     label: t.time_stamp,\n          //     value: (t.time_stamp - min) / (max - min),\n          //     rawValue: t.time_stamp,\n          //     point: { x: ((t.time_stamp - min) / (max - min)) * (maxRange - minRange) + minRange, y: 0 }\n          //   }));\n          // }\n        },\n        grid: {\n          visible: false\n        },\n        innerOffset: {\n          left: 50,\n          right: 50\n        }\n      });\n    }\n    spec.axes = [\n      ...axes,\n      {\n        orient: 'left',\n        type: 'band',\n        domainLine: {\n          visible: false\n        },\n        tick: {\n          visible: false\n        },\n        label: {\n          formatMethod: label => {\n            return {\n              type: 'rich',\n              text: [{ image: spec.userImageMap[label], width: 40, height: 40 }]\n            };\n          }\n        },\n        grid: {\n          visible: true,\n          style: {\n            lineDash: [3, 3]\n          }\n        }\n      }\n    ];\n\n    // 缩略轴和滚动条配置\n    spec.dataZoom = [\n      {\n        orient: 'bottom',\n        axisIndex: 0,\n        filterMode: 'filter'\n      }\n    ];\n    spec.scrollBar = [\n      {\n        orient: 'right',\n        axisIndex: spec.axes.length - 1,\n        filterMode: 'axis',\n        start: 0,\n        end: 0.8\n      },\n      {\n        orient: 'bottom',\n        axisIndex: 0,\n        linkedAxisIndex: mediumConnection && mode === 'step' ? undefined : 1,\n        filterMode: 'axis',\n        start: 0,\n        end: 0.8\n      }\n    ];\n    spec.crosshair = {\n      xField: {\n        visible: true,\n        line: {\n          type: 'rect',\n          width: 20,\n          style: {\n            fill: 'rgb(240,242,245)'\n          }\n        },\n        bindingAxesIndex: [0, 1]\n      },\n      yField: {\n        visible: true,\n        bindingAxesIndex: [spec.axes.length - 1],\n        line: {\n          type: 'rect'\n        }\n      }\n    };\n\n    // markLine配置\n    if (mode === 'time') {\n      spec.markLine = tickData.map(t => ({\n        zIndex: -1,\n        x: t.time_stamp,\n        endSymbol: {\n          visible: false\n        },\n        label: {\n          visible: false\n        }\n      }));\n    }\n\n    // 其他配置\n    spec.tooltip = {\n      visible: false\n    };\n    spec.animation = false;\n\n    // 自定义配置\n    spec.customTransformSpec?.(spec);\n\n    super.transformSpec(spec);\n  }\n}\n"]}

package/esm/charts/sequence-analysis/sequence-analysis.d.ts

@@ -0,0 +1,16 @@
+import type { ISequenceAnalysisSpec } from './interface';
+import { VChart, BaseChart } from '@visactor/vchart';
+import { SequenceAnalysisChartSpecTransformer } from './sequence-analysis-transformer';
+export declare class SequenceAnalysis extends BaseChart<Omit<ISequenceAnalysisSpec, 'data'>> {
+    type: string;
+    static type: string;
+    static readonly view: string;
+    _spec: ISequenceAnalysisSpec;
+    static readonly transformerConstructor: typeof SequenceAnalysisChartSpecTransformer;
+    readonly transformerConstructor: typeof SequenceAnalysisChartSpecTransformer;
+    init(): void;
+    protected isValid(): boolean;
+}
+export declare const registerSequenceAnalysis: (option?: {
+    VChart?: typeof VChart;
+}) => void;

package/esm/charts/sequence-analysis/sequence-analysis.js

@@ -0,0 +1,28 @@
+import { VChart, BaseChart, CommonChart } from "@visactor/vchart";
+
+import { SequenceAnalysisChartSpecTransformer } from "./sequence-analysis-transformer";
+
+export class SequenceAnalysis extends BaseChart {
+    constructor() {
+        super(...arguments), this.type = "sequenceAnalysis", this.transformerConstructor = SequenceAnalysisChartSpecTransformer;
+    }
+    init() {
+        this.isValid() && super.init();
+    }
+    isValid() {
+        var _a, _b, _c, _d;
+        const {eventData: eventData, type: type} = this._spec;
+        return "sequenceAnalysis" !== type ? (null === (_b = (_a = this._option).onError) || void 0 === _b || _b.call(_a, "Type is required"), 
+        !1) : !!eventData || (null === (_d = (_c = this._option).onError) || void 0 === _d || _d.call(_c, "Data is required"), 
+        !1);
+    }
+}
+
+SequenceAnalysis.type = "sequenceAnalysis", SequenceAnalysis.view = "singleDefault", 
+SequenceAnalysis.transformerConstructor = SequenceAnalysisChartSpecTransformer;
+
+export const registerSequenceAnalysis = option => {
+    const vchartConstructor = (null == option ? void 0 : option.VChart) || VChart;
+    vchartConstructor && vchartConstructor.useChart([ SequenceAnalysis, CommonChart ]);
+};
+//# sourceMappingURL=sequence-analysis.js.map

package/esm/charts/sequence-analysis/sequence-analysis.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/charts/sequence-analysis/sequence-analysis.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAClE,OAAO,EAAE,oCAAoC,EAAE,MAAM,iCAAiC,CAAC;AAEvF,MAAM,OAAO,gBAAiB,SAAQ,SAA8C;IAApF;;QACE,SAAI,GAAG,kBAAkB,CAAC;QAOjB,2BAAsB,GAAG,oCAAoC,CAAC;IAqBzE,CAAC;IAnBC,IAAI;QACF,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE;YACnB,OAAO;SACR;QACD,KAAK,CAAC,IAAI,EAAE,CAAC;IACf,CAAC;IAES,OAAO;;QACf,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACvC,IAAI,IAAI,KAAK,kBAAkB,EAAE;YAC/B,MAAA,MAAA,IAAI,CAAC,OAAO,EAAC,OAAO,mDAAG,kBAAkB,CAAC,CAAC;YAC3C,OAAO,KAAK,CAAC;SACd;QACD,IAAI,CAAC,SAAS,EAAE;YACd,MAAA,MAAA,IAAI,CAAC,OAAO,EAAC,OAAO,mDAAG,kBAAkB,CAAC,CAAC;YAC3C,OAAO,KAAK,CAAC;SACd;QACD,OAAO,IAAI,CAAC;IACd,CAAC;;AA1BM,qBAAI,GAAG,kBAAkB,CAAC;AACjB,qBAAI,GAAW,eAAe,CAAC;AAI/B,uCAAsB,GAAG,oCAAoC,CAAC;AAwBhF,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,MAAmC,EAAE,EAAE;IAC9E,MAAM,iBAAiB,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,KAAI,MAAM,CAAC;IACnD,IAAI,iBAAiB,EAAE;QACrB,iBAAiB,CAAC,QAAQ,CAAC,CAAC,gBAAgB,EAAE,WAAW,CAAC,CAAC,CAAC;KAC7D;AACH,CAAC,CAAC","file":"sequence-analysis.js","sourcesContent":["import type { ISequenceAnalysisSpec } from './interface';\nimport { VChart, BaseChart, CommonChart } from '@visactor/vchart';\nimport { SequenceAnalysisChartSpecTransformer } from './sequence-analysis-transformer';\n\nexport class SequenceAnalysis extends BaseChart<Omit<ISequenceAnalysisSpec, 'data'>> {\n  type = 'sequenceAnalysis';\n  static type = 'sequenceAnalysis';\n  static readonly view: string = 'singleDefault';\n\n  declare _spec: ISequenceAnalysisSpec;\n\n  static readonly transformerConstructor = SequenceAnalysisChartSpecTransformer;\n  readonly transformerConstructor = SequenceAnalysisChartSpecTransformer;\n\n  init() {\n    if (!this.isValid()) {\n      return;\n    }\n    super.init();\n  }\n\n  protected isValid() {\n    const { eventData, type } = this._spec;\n    if (type !== 'sequenceAnalysis') {\n      this._option.onError?.('Type is required');\n      return false;\n    }\n    if (!eventData) {\n      this._option.onError?.('Data is required');\n      return false;\n    }\n    return true;\n  }\n}\n\nexport const registerSequenceAnalysis = (option?: { VChart?: typeof VChart }) => {\n  const vchartConstructor = option?.VChart || VChart;\n  if (vchartConstructor) {\n    vchartConstructor.useChart([SequenceAnalysis, CommonChart]);\n  }\n};\n"]}

package/esm/charts/sequence-scatter-kde/constant.d.ts

@@ -0,0 +1,3 @@
+export declare const DATA_KEY = "dataKey";
+export declare const BACKGROUND_KEY = "background";
+export declare const EXPAND_RATIO = 0.2;

package/esm/charts/sequence-scatter-kde/constant.js

@@ -0,0 +1,6 @@
+export const DATA_KEY = "dataKey";
+
+export const BACKGROUND_KEY = "background";
+
+export const EXPAND_RATIO = .2;
+//# sourceMappingURL=constant.js.map

package/esm/charts/sequence-scatter-kde/constant.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/charts/sequence-scatter-kde/constant.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG,SAAS,CAAC;AAClC,MAAM,CAAC,MAAM,cAAc,GAAG,YAAY,CAAC;AAC3C,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAC","file":"constant.js","sourcesContent":["export const DATA_KEY = 'dataKey';\nexport const BACKGROUND_KEY = 'background';\nexport const EXPAND_RATIO = 0.2; // 拓展比例\n"]}

package/esm/charts/sequence-scatter-kde/interface.d.ts

@@ -0,0 +1,29 @@
+import { IPlayerSpec } from '@visactor/vchart';
+import { Datum } from '@visactor/vchart/src/typings/common';
+import { ITextGraphicAttribute } from '@visactor/vrender-core';
+type IterationData = Datum[];
+type ISequenceScatterKDEData = {
+    [Iteration: string]: IterationData;
+};
+export interface ISequenceScatterKDESpec {
+    type: 'sequenceScatterKDE';
+    data: ISequenceScatterKDEData;
+    xField: string;
+    yField: string;
+    player: Omit<IPlayerSpec, 'specs'>;
+    infoLabel: {
+        visible: boolean;
+        style: ITextGraphicAttribute;
+    };
+    backgroundColors: {
+        [Iteration: string]: any;
+    };
+    width: number;
+    height: number;
+}
+export interface Point {
+    x: number;
+    y: number;
+    label?: string;
+}
+export {};

package/esm/charts/sequence-scatter-kde/interface.js

@@ -0,0 +1,2 @@
+export { };
+//# sourceMappingURL=interface.js.map

package/esm/charts/sequence-scatter-kde/interface.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/charts/sequence-scatter-kde/interface.ts"],"names":[],"mappings":"","file":"interface.js","sourcesContent":["import { IPlayerSpec } from '@visactor/vchart';\nimport { Datum } from '@visactor/vchart/src/typings/common';\nimport { ITextGraphicAttribute } from '@visactor/vrender-core';\n\ntype IterationData = Datum[];\ntype ISequenceScatterKDEData = {\n  /**\n   * key: 迭代信息\n   * value: 每个迭代的数据\n   */\n  [Iteration: string]: IterationData;\n\n  // TODO: 支持边的绘制\n  // [Iteration: string]: {\n  //   /**\n  //    * 节点数据\n  //    */\n  //   nodes: IterationNodesData;\n  //   /**\n  //    * 边数据\n  //    */\n  //   edges: IterationEdgesData;\n  // };\n};\n\nexport interface ISequenceScatterKDESpec {\n  /**\n   * 图表类型\n   */\n  type: 'sequenceScatterKDE';\n  /**\n   * 数据\n   */\n  data: ISequenceScatterKDEData;\n  /**\n   * x轴字段\n   */\n  xField: string;\n  /**\n   * y轴字段\n   */\n  yField: string;\n  /**\n   * 播放器配置\n   */\n  player: Omit<IPlayerSpec, 'specs'>;\n  /**\n   * 文字标记（标记当前处于第几个迭代）\n   */\n  infoLabel: {\n    visible: boolean;\n    style: ITextGraphicAttribute;\n  };\n  /**\n   * 背景数据\n   */\n  backgroundColors: {\n    [Iteration: string]: any;\n  };\n  /**\n   * 宽度\n   */\n  width: number;\n  /**\n   * 高度\n   */\n  height: number;\n}\n\nexport interface Point {\n  x: number;\n  y: number;\n  label?: string;\n}\n"]}

package/esm/charts/sequence-scatter-kde/sequence-scatter-kde-transformer.d.ts

@@ -0,0 +1,6 @@
+import type { ISequenceScatterKDESpec } from './interface';
+import { CommonChartSpecTransformer } from '@visactor/vchart';
+export declare class SequenceScatterKDEChartSpecTransformer extends CommonChartSpecTransformer<any> {
+    transformSpec(spec: any): void;
+}
+export declare function processSequenceData(spec: ISequenceScatterKDESpec): any[];

package/esm/charts/sequence-scatter-kde/sequence-scatter-kde-transformer.js

@@ -0,0 +1,137 @@
+import { CommonChartSpecTransformer } from "@visactor/vchart";
+
+import { calculateKDE } from "./utils";
+
+const DATA_KEY = "dataKey";
+
+export class SequenceScatterKDEChartSpecTransformer extends CommonChartSpecTransformer {
+    transformSpec(spec) {
+        var _a, _b, _c, _d, _e, _f;
+        super.transformSpec(spec);
+        const dataSpecs = processSequenceData(spec);
+        spec.type = "common", spec.dataKey = DATA_KEY, 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)"
+            }
+        }, ...null !== (_a = spec.scales) && void 0 !== _a ? _a : [] ], spec.series = [ {
+            type: "scatter",
+            dataIndex: 0,
+            xField: spec.xField,
+            yField: spec.yField,
+            seriesField: spec.seriesField,
+            size: 5,
+            point: {
+                zIndex: 1e3,
+                style: {
+                    fill: {
+                        scale: "colorScale",
+                        field: spec.seriesField
+                    }
+                }
+            }
+        } ];
+        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: .2
+            }, null === (_b = spec.infoLabel) || void 0 === _b ? void 0 : _b.style)
+        }, {
+            type: "symbol",
+            dataIndex: 2,
+            style: {
+                symbolType: "rect",
+                x: (datum, ctx) => 54 + (0, ctx.chart.getAllSeries()[0]._markAttributeContext.valueToX)([ datum.x ]),
+                y: (datum, ctx) => (0, ctx.chart.getAllSeries()[0]._markAttributeContext.valueToY)([ datum.y ]) + 26,
+                size: 5,
+                fill: {
+                    scale: "brighterColorScale",
+                    field: "label"
+                },
+                fillOpacity: datum => 10 * datum.kde
+            }
+        } ], spec.tooltip = {
+            visible: !0,
+            fields: [ "x", "y", "label" ]
+        }, spec.player && (spec.player = Object.assign(Object.assign({}, spec.player), {
+            specs: dataSpecs
+        }), spec.animationAppear = {
+            duration: null !== (_d = null === (_c = spec.player) || void 0 === _c ? void 0 : _c.duration) && void 0 !== _d ? _d : 2e3,
+            easing: "linear"
+        }, spec.animationUpdate = {
+            duration: null !== (_f = null === (_e = spec.player) || void 0 === _e ? void 0 : _e.duration) && void 0 !== _f ? _f : 2e3,
+            easing: "linear"
+        }), spec.axes = [ {
+            orient: "left",
+            type: "linear",
+            nice: !0
+        }, {
+            orient: "bottom",
+            type: "linear",
+            nice: !0,
+            label: {
+                visible: !0
+            }
+        } ], super.transformSpec(spec);
+    }
+}
+
+export function processSequenceData(spec) {
+    const result = [];
+    return Object.keys(spec.data).forEach((iter => {
+        const currentData = spec.data[iter].map(((d, i) => Object.assign(Object.assign({}, d), {
+            [DATA_KEY]: i
+        }))), kdeResults = calculateKDE(currentData, 150);
+        result.push({
+            data: [ {
+                id: "nodes",
+                values: currentData
+            }, {
+                id: "iter",
+                values: [ {
+                    iter: iter
+                } ]
+            }, {
+                id: "kde",
+                values: kdeResults
+            } ]
+        });
+    })), result;
+}
+//# sourceMappingURL=sequence-scatter-kde-transformer.js.map

package/esm/charts/sequence-scatter-kde/sequence-scatter-kde-transformer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/charts/sequence-scatter-kde/sequence-scatter-kde-transformer.ts"],"names":[],"mappings":"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","file":"sequence-scatter-kde-transformer.js","sourcesContent":["import { Datum } from '@visactor/vchart/src/typings';\nimport type { ISequenceScatterKDESpec } from './interface';\nimport { CommonChartSpecTransformer } from '@visactor/vchart';\nimport { Point } from './interface';\nimport { calculateKDE } from './utils';\n\nconst DATA_KEY = 'dataKey';\n\nexport class SequenceScatterKDEChartSpecTransformer extends CommonChartSpecTransformer<any> {\n  transformSpec(spec: any): void {\n    super.transformSpec(spec);\n    const dataSpecs = processSequenceData(spec as unknown as ISequenceScatterKDESpec);\n\n    spec.type = 'common';\n    spec.dataKey = DATA_KEY;\n    spec.data = dataSpecs[0].data;\n\n    spec.scales = [\n      {\n        id: 'colorScale',\n        type: 'ordinal',\n        specified: {\n          '0': 'rgb(150, 10, 100)',\n          '1': 'rgb(31, 119, 180)',\n          '2': 'rgb(255, 127, 14)',\n          '3': 'rgb(44, 160, 44)',\n          '4': 'rgb(214, 39, 40)',\n          '5': 'rgb(148, 103, 189)',\n          '6': 'rgb(140, 86, 75)',\n          '7': 'rgb(227, 119, 194)',\n          '8': 'rgb(127, 127, 127)',\n          '9': 'rgb(188, 189, 34)',\n          '10': 'rgb(23, 190, 207)'\n        }\n      },\n      {\n        id: 'brighterColorScale',\n        type: 'ordinal',\n        specified: {\n          '0': 'rgb(150, 10, 150)',\n          '1': 'rgb(31, 119, 230)',\n          '2': 'rgb(255, 127, 64)',\n          '3': 'rgb(44, 160, 94)',\n          '4': 'rgb(214, 39, 90)',\n          '5': 'rgb(148, 103, 239)',\n          '6': 'rgb(140, 86, 125)',\n          '7': 'rgb(227, 119, 244)',\n          '8': 'rgb(127, 127, 177)',\n          '9': 'rgb(188, 189, 84)',\n          '10': 'rgb(23, 190, 255)'\n        }\n      },\n      ...(spec.scales ?? [])\n    ];\n    spec.series = [\n      {\n        type: 'scatter',\n        dataIndex: 0,\n        xField: spec.xField,\n        yField: spec.yField,\n        seriesField: spec.seriesField,\n        size: 5,\n        point: {\n          zIndex: 1000,\n          style: {\n            fill: {\n              scale: 'colorScale',\n              field: spec.seriesField\n            }\n          }\n        }\n      }\n    ];\n    // spec.width = 800;\n    // spec.height = 500;\n\n    // 获取图元位置\n    const regionX = 54;\n    const regionY = 26;\n\n    spec.customMark = [\n      {\n        type: 'text',\n        dataIndex: 1,\n        style: {\n          text: (datum: Datum) => datum['iter'],\n          x: 10,\n          y: () => 10,\n          textBaseline: 'top',\n          textAlign: 'left',\n          fontSize: 25,\n          fontWeight: 'bolder',\n          fill: 'black',\n          fillOpacity: 0.2,\n          ...spec.infoLabel?.style\n        }\n      },\n      {\n        type: 'symbol',\n        dataIndex: 2,\n        style: {\n          symbolType: 'rect',\n          x: (datum: any, ctx: any) => {\n            // 获取region位置\n            // const regionStartPoint = ctx.chart.getAllRegions()[0].getLayoutStartPoint();\n            // const { x: regionX } = regionStartPoint;\n            // 获取图元位置\n            const valueToX = ctx.chart.getAllSeries()[0]._markAttributeContext.valueToX;\n            const markX = valueToX([datum.x]);\n            return regionX + markX;\n          },\n          y: (datum: any, ctx: any) => {\n            const valueToY = ctx.chart.getAllSeries()[0]._markAttributeContext.valueToY;\n            const markY = valueToY([datum.y]);\n            return markY + regionY;\n          },\n          size: 5,\n          fill: {\n            scale: 'brighterColorScale',\n            field: 'label'\n          },\n          fillOpacity: (datum: any) => datum.kde * 10\n        }\n      }\n    ];\n\n    spec.tooltip = {\n      visible: true,\n      fields: ['x', 'y', 'label']\n    };\n\n    if (spec.player) {\n      spec.player = {\n        ...spec.player,\n        specs: dataSpecs\n      };\n\n      spec.animationAppear = {\n        duration: spec.player?.duration ?? 2000,\n        easing: 'linear'\n      };\n\n      spec.animationUpdate = {\n        duration: spec.player?.duration ?? 2000,\n        easing: 'linear'\n      };\n    }\n\n    spec.axes = [\n      {\n        orient: 'left',\n        type: 'linear',\n        nice: true\n      },\n      {\n        orient: 'bottom',\n        type: 'linear',\n        nice: true,\n        label: { visible: true }\n      }\n    ];\n\n    super.transformSpec(spec);\n  }\n}\n\nexport function processSequenceData(spec: ISequenceScatterKDESpec) {\n  const result: any[] = [];\n  Object.keys(spec.data).forEach(iter => {\n    const currentData = spec.data[iter].map((d: Datum, i) => ({\n      ...(d as Point),\n      [DATA_KEY]: i\n    }));\n\n    const kdeResults = calculateKDE(currentData, 150);\n    result.push({\n      data: [\n        {\n          id: 'nodes',\n          values: currentData\n        },\n        {\n          id: 'iter',\n          values: [{ iter }]\n        },\n        {\n          id: 'kde',\n          values: kdeResults\n        }\n      ]\n    });\n  });\n  return result;\n}\n"]}