Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "@visactor/openinula-vchart",
"comment": "fix: SequenceChart 使用扩展包注册和类型",
"type": "patch"
}
],
"packageName": "@visactor/openinula-vchart"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "@visactor/react-vchart",
"comment": "fix: SequenceChart 使用扩展包注册和类型",
"type": "patch"
}
],
"packageName": "@visactor/react-vchart"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "@visactor/taro-vchart",
"comment": "fix: SequenceChart 使用扩展包注册和类型",
"type": "patch"
}
],
"packageName": "@visactor/taro-vchart"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"changes": [{ "packageName": "@visactor/vchart-extension", "comment": "feat: 将 dot、link 系列及其类型和注册入口从 VChart 主包迁移至扩展包", "type": "minor" }],
"packageName": "@visactor/vchart-extension"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "@visactor/vchart-extension",
"comment": "feat: 提供 sequence 时序图及 registerSequenceChart,保留原有时序图配置与布局",
"type": "minor"
}
],
"packageName": "@visactor/vchart-extension"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "@visactor/vchart-types",
"comment": "重新生成当前主包声明,移除已迁至扩展包的时序图、dot/link 系列及其他历史遗留声明。",
"type": "patch"
}
],
"packageName": "@visactor/vchart-types"
}
10 changes: 10 additions & 0 deletions common/changes/@visactor/vchart/clean-type-output_2026-10-14.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "@visactor/vchart",
"comment": "类型构建先清理输出并禁用此次增量缓存,避免旧声明残留或重复构建缺失文件。",
"type": "patch"
}
],
"packageName": "@visactor/vchart"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "@visactor/vchart",
"comment": "将 dot、link 系列及其类型、注册方法迁移至 @visactor/vchart-extension,主包不再导出或自动注册这些系列。",
"type": "minor"
}
],
"packageName": "@visactor/vchart"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "@visactor/vchart",
"comment": "refactor: 将 sequence 时序图迁移至 vchart-extension,原 spec 保持不变,需从扩展包导入并调用 registerSequenceChart",
"type": "major"
}
],
"packageName": "@visactor/vchart"
}
18 changes: 18 additions & 0 deletions common/config/rush/pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import { registerSequenceChart } from '@visactor/vchart-extension';
import type { BaseActor, Player, VChartActor } from '@internal/story-player';
// eslint-disable-next-line no-duplicate-imports
import { ActorType } from '@internal/story-player';

export const pageChart1765ActorChart = (player: Player, actorMap: Record<string, BaseActor>) => {
registerSequenceChart();
actorMap.pageChart1765ActorChart = player.createActor<VChartActor>(ActorType.vchart, {
name: 'chart',
defaultStyle: {
Expand Down
9 changes: 9 additions & 0 deletions docs/assets/examples/en/sequence-chart/NBA-player-event.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,13 @@ option: sequenceChart

# NBA Athlete Timing Chart

`dot` and `link` series have also moved to `@visactor/vchart-extension`. The core package no longer exports or automatically registers `DotSeries`, `LinkSeries`, `registerDotSeries`, or `registerLinkSeries`; import `IDotSeriesSpec` and `ILinkSeriesSpec` from the extension package as well. `registerSequenceChart({ VChart })` and `registerSequenceAnalysis({ VChart })` register their required series. For standalone use in a `common` chart, import and call `registerDotSeries()` and `registerLinkSeries()` from the extension package.

NBA player timing chart tracks each player's dribble time. Users can quickly see game times, changes made by coaches, and lineups.
This use case only configures the dot or link series, not the column series. If you need to show pure timing data, you can refer to this use case.

The sequence chart is provided by `@visactor/vchart-extension`. Install the extension package with the same version as VChart and call `registerSequenceChart({ VChart })` before creating a chart. Existing `type: 'sequence'` and series configuration remain unchanged.

## Key option

The entire sequence diagram is divided from top to bottom: timeline components, dot series & link series
Expand Down Expand Up @@ -47,6 +51,11 @@ The data of the link series depends on the event series
## Demo source

```javascript livedemo
// import VChart from '@visactor/vchart';
// import { registerSequenceChart } from '@visactor/vchart-extension';
// registerSequenceChart({ VChart });
VChartExtension.registerSequenceChart({ VChart });

const spec = {
type: 'sequence',
color: ['#64b5fc', '#ff8f62'],
Expand Down
9 changes: 9 additions & 0 deletions docs/assets/examples/en/sequence-chart/social-media-event.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,13 @@ cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/sequen

# Social Media Timing Chart

`dot` and `link` series have also moved to `@visactor/vchart-extension`. The core package no longer exports or automatically registers `DotSeries`, `LinkSeries`, `registerDotSeries`, or `registerLinkSeries`; import `IDotSeriesSpec` and `ILinkSeriesSpec` from the extension package as well. `registerSequenceChart({ VChart })` and `registerSequenceAnalysis({ VChart })` register their required series. For standalone use in a `common` chart, import and call `registerDotSeries()` and `registerLinkSeries()` from the extension package.

The high complexity of time-series data makes it difficult for analysts to manually explore and find patterns, leading to an increasing need for visualization techniques to aid analysis in order to extract and communicate insights from event sequence datasets.
For social media information, it is often necessary to show the different behaviors of different users at different times in the form of nodes and edges in the evolution of linear time, and in order to better discover the user's behavior preferences, it is also necessary to use histograms. The form of behavioral statistics is displayed. Time series diagrams based on linear time maps can show data in this scenario.

The sequence chart is provided by `@visactor/vchart-extension`. Install the extension package with the same version as VChart and call `registerSequenceChart({ VChart })` before creating a chart. Existing `type: 'sequence'` and series configuration remain unchanged.

## Key option

The whole sequence diagram is divided from top to bottom: thumbnail axis component, timeline component, several bar series, dot series & link series, scroll bar component
Expand Down Expand Up @@ -71,6 +75,11 @@ Scroll bar component configuration:
## Demo source

```javascript livedemo
// import VChart from '@visactor/vchart';
// import { registerSequenceChart } from '@visactor/vchart-extension';
// registerSequenceChart({ VChart });
VChartExtension.registerSequenceChart({ VChart });

const spec = {
type: 'sequence',
appendPadding: {
Expand Down
9 changes: 9 additions & 0 deletions docs/assets/examples/zh/sequence-chart/NBA-player-event.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,13 @@ option: sequenceChart

# NBA 运动员时序图

`dot`、`link` 系列也已整体移至 `@visactor/vchart-extension`,主包不再导出或自动注册 `DotSeries`、`LinkSeries`、`registerDotSeries`、`registerLinkSeries`,对应的 `IDotSeriesSpec`、`ILinkSeriesSpec` 类型也从扩展包导入。`registerSequenceChart({ VChart })` 和 `registerSequenceAnalysis({ VChart })` 会注册各自需要的系列;在 `common` 图表中单独使用时,需要从扩展包导入并调用 `registerDotSeries()`、`registerLinkSeries()`。

NBA 运动员时序图跟踪每个运动员的运球时间. 用户可以快速了解比赛时间、教练所做的改变以及参赛阵容.
该用例仅配置 dot 或 link 系列, 而不包柱系列. 如果需要展示纯粹的时序数据, 可以参考该用例.

时序图由 `@visactor/vchart-extension` 提供。先安装与 VChart 版本一致的扩展包,并在创建图表前调用 `registerSequenceChart({ VChart })`。原有 `type: 'sequence'` 和 series 配置保持不变。

## 关键配置

整个时序图从上到下分为: 时间轴组件、dot 和 link 系列(dot series & link series)
Expand Down Expand Up @@ -47,6 +51,11 @@ link 系列(link series)的数据依赖于事件(event series)系列
## 代码演示

```javascript livedemo
// import VChart from '@visactor/vchart';
// import { registerSequenceChart } from '@visactor/vchart-extension';
// registerSequenceChart({ VChart });
VChartExtension.registerSequenceChart({ VChart });

const spec = {
type: 'sequence',
color: ['#64b5fc', '#ff8f62'],
Expand Down
9 changes: 9 additions & 0 deletions docs/assets/examples/zh/sequence-chart/social-media-event.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,13 @@ option: sequenceChart

# 社交媒体时序图

`dot`、`link` 系列也已整体移至 `@visactor/vchart-extension`,主包不再导出或自动注册 `DotSeries`、`LinkSeries`、`registerDotSeries`、`registerLinkSeries`,对应的 `IDotSeriesSpec`、`ILinkSeriesSpec` 类型也从扩展包导入。`registerSequenceChart({ VChart })` 和 `registerSequenceAnalysis({ VChart })` 会注册各自需要的系列;在 `common` 图表中单独使用时,需要从扩展包导入并调用 `registerDotSeries()`、`registerLinkSeries()`。

时序数据的高复杂性使得分析人员很难手动探索和寻找模式, 导致越来越多地需要可视化技术来辅助分析, 以便从事件序列数据集中提取和交流见解。
对于社交媒体信息而言, 往往需要在线性时间的演进中, 以节点和边的形式展示不同用户不同时间的不同行为, 并且为了更好地从中发现用户的行为偏好, 还需要以柱状图的形式展示行为统计信息. 基于线性时间映射的时序图可以展示这种场景下的数据。

时序图由 `@visactor/vchart-extension` 提供。先安装与 VChart 版本一致的扩展包,并在创建图表前调用 `registerSequenceChart({ VChart })`。原有 `type: 'sequence'` 和 series 配置保持不变。

## 关键配置

整个时序图从上到下分为: 缩略轴组件、时间轴组件、若干个柱系列(bar series)、dot 和 link 系列(dot series & link series)、滚动条组件
Expand Down Expand Up @@ -72,6 +76,11 @@ link 系列(link series)的数据依赖于事件(event series)系列
## 代码演示

```javascript livedemo
// import VChart from '@visactor/vchart';
// import { registerSequenceChart } from '@visactor/vchart-extension';
// registerSequenceChart({ VChart });
VChartExtension.registerSequenceChart({ VChart });

const spec = {
type: 'sequence',
appendPadding: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -44,3 +44,7 @@ You can directly get the source code of VChart-extension from GitHub:

1. You can clone the source code directly from GitHub.
2. You can also choose the corresponding version from the [release](https://github.com/VisActor/VChart/releases) page of VChart, click on the Source code under the Assets section, download it to your local machine, and extract it for use.

## Sequence chart

The [sequence chart](/vchart/guide/tutorial_docs/Chart_Types/Sequence) is now provided by the extension package. It combines events, links and statistics on a shared time axis. Import and call `registerSequenceChart({ VChart })` from the extension package before use; existing specs remain unchanged.
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
# Extension Chart: Sequence Analysis

`dot` and `link` series have also moved to `@visactor/vchart-extension`. The core package no longer exports or automatically registers `DotSeries`, `LinkSeries`, `registerDotSeries`, or `registerLinkSeries`; import `IDotSeriesSpec` and `ILinkSeriesSpec` from the extension package as well. `registerSequenceChart({ VChart })` and `registerSequenceAnalysis({ VChart })` register their required series. For standalone use in a `common` chart, import and call `registerDotSeries()` and `registerLinkSeries()` from the extension package.

Sequence Analysis places each user's events on a horizontal row, aligns events by time, step or medium, and draws their relationships. It supports behavior paths, relationships across users and repeated patterns.

The chart comes from `@visactor/vchart-extension` with type `sequenceAnalysis`. It is distinct from the built-in sequence chart and the sequenceScatterLink extension for training-process analysis.
The chart comes from `@visactor/vchart-extension` with type `sequenceAnalysis`. It is distinct from the `sequence` extension chart and the sequenceScatterLink extension for training-process analysis.

![Sequence Analysis](/vchart/preview/sequence-analysis-step.png)

Expand Down
22 changes: 22 additions & 0 deletions docs/assets/guide/en/tutorial_docs/Chart_Types/Sequence.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,25 @@
# Sequence Chart

`dot` and `link` series have also moved to `@visactor/vchart-extension`. The core package no longer exports or automatically registers `DotSeries`, `LinkSeries`, `registerDotSeries`, or `registerLinkSeries`; import `IDotSeriesSpec` and `ILinkSeriesSpec` from the extension package as well. `registerSequenceChart({ VChart })` and `registerSequenceAnalysis({ VChart })` register their required series. For standalone use in a `common` chart, import and call `registerDotSeries()` and `registerLinkSeries()` from the extension package.

[\[Configuration Guide\]](../../../option/sequenceChart)

## Registration and migration

The sequence chart is provided by `@visactor/vchart-extension`. Install the extension package with the same version as VChart and call `registerSequenceChart({ VChart })` before creating a chart. Existing `type: 'sequence'` and series configuration remain unchanged.

```ts
import VChart from '@visactor/vchart';
import { registerSequenceChart } from '@visactor/vchart-extension';
import type { ISequenceChartSpec } from '@visactor/vchart-extension';

registerSequenceChart({ VChart });
// const spec: ISequenceChartSpec = { type: 'sequence', ... };
// new VChart(spec, { dom: 'chart' }).renderSync();
```

Import `ISequenceChartSpec` and `registerSequenceChart` from the extension package instead of the core package. React/Taro/Openinula `SequenceChart` components register it automatically; register it explicitly when using a generic `VChart` component. This chart displays events and statistics over time and is separate from the `type: 'sequenceAnalysis'` extension.

## Introduction

In social media, behavior monitoring, and other scenarios, it is often necessary to display different behaviors of different users at different times in the form of nodes and edges in linear time evolution. In order to better discover users' behavior preferences, it is also necessary to display behavior statistical information in the form of bar charts. The sequence chart based on linear time mapping can display data in this scenario.
Expand Down Expand Up @@ -30,6 +48,8 @@ Sequence charts typically also include the following components:
## Quick Start

```javascript livedemo
VChartExtension.registerSequenceChart({ VChart });

const spec = {
type: 'sequence',
color: ['#64b5fc', '#ff8f62'],
Expand Down Expand Up @@ -1279,6 +1299,8 @@ data: [
As mentioned above, events or event relationships will come with some additional information,

```javascript livedemo
VChartExtension.registerSequenceChart({ VChart });

const spec = {
type: 'sequence',
appendPadding: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,7 @@ The `<VChartSimple />` component and the `<VChart />` component are almost ident
| `<RangeColumnChart/>` | Cartesian Charts | `registerLabel` |
| `<RangeColumn3dChart/>` | Cartesian Charts | `registerLabel` |
| `<ScatterChart/>` | Cartesian Charts | `registerLabel` |
| `<SequenceChart/>` | Cartesian Charts | `registerLabel` |
| `<SequenceChart/>` | Extension chart | `registerLabel` |
| `<WaterfallChart/>` | Cartesian Charts | `registerLabel`, `registerTotalLabel` |
| `<RadarChart/>` | Polar Charts | `registerLabel` |
| `<RoseChart/>` | Polar Charts | `registerLabel` |
Expand All @@ -232,6 +232,8 @@ The `<VChartSimple />` component and the `<VChart />` component are almost ident
| `<WordCloudChart/>` | General Charts | None |
| `<LiquidChart/>` | General Charts | `registerIndicator` |

`SequenceChart` registers itself through `registerSequenceChart` from the extension package; component usage is unchanged. When using VChart directly, import and call the registration function from `@visactor/vchart-extension`.

For Cartesian charts, the default registered components are as follows:

- `registerCartesianLinearAxis`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -472,7 +472,7 @@ interface VChartSimpleProps extends EventsProps {
| `<RangeColumnChart/>` | Cartesian Charts | `registerLabel` |
| `<RangeColumn3dChart/>` | Cartesian Charts | `registerLabel` |
| `<ScatterChart/>` | Cartesian Charts | `registerLabel` |
| `<SequenceChart/>` | Cartesian Charts | `registerLabel` |
| `<SequenceChart/>` | Extension chart | `registerLabel` |
| `<WaterfallChart/>` | Cartesian Charts | `registerLabel`, `registerTotalLabel` |
| `<RadarChart/>` | Polar Charts | `registerLabel` |
| `<RoseChart/>` | Polar Charts | `registerLabel` |
Expand All @@ -492,6 +492,8 @@ interface VChartSimpleProps extends EventsProps {
| `<WordCloudChart/>` | General Charts | None |
| `<LiquidChart/>` | General Charts | `registerIndicator` |

`SequenceChart` registers itself through `registerSequenceChart` from the extension package; component usage is unchanged. When using VChart directly, import and call the registration function from `@visactor/vchart-extension`.

For Cartesian charts, the default registered components are as follows:

- `registerCartesianLinearAxis`
Expand Down
Loading
Loading