waveform-analysis 0.1.61 → 0.1.63
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +47 -65
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -3,17 +3,12 @@
|
|
|
3
3
|
基于 Vue 3、TypeScript 和 D3 的响应式 SVG 波形图组件。适合展示单通道、多通道和大规模采样
|
|
4
4
|
数据，内置缩放、tooltip、图例、误差棒、标注、分页和多 Y 轴叠加。
|
|
5
5
|
|
|
6
|
-
当前稳定版本：`v0.1.15`。
|
|
7
|
-
|
|
8
6
|
组件使用不可变数据模型：替换 `data` 引用后会重新计算数据域和视口；大数据会按当前可见范围
|
|
9
7
|
和屏幕像素自动保峰降采样，而 tooltip、最近点查询和标注仍使用完整原始数据。
|
|
10
8
|
|
|
11
9
|
## 在线示例
|
|
12
10
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
本地运行 `pnpm dev` 后，可通过
|
|
16
|
-
<http://127.0.0.1:5173/#/fixed-y-domain> 查看固定振幅上下限示例。
|
|
11
|
+
线上 Demo：[波形分析组件在线示例](https://lqycustomsite.online/waveform-analysis/)。
|
|
17
12
|
|
|
18
13
|
## 特性
|
|
19
14
|
|
|
@@ -32,16 +27,16 @@
|
|
|
32
27
|
|
|
33
28
|
## 安装
|
|
34
29
|
|
|
35
|
-
组件库将 Vue
|
|
36
|
-
|
|
30
|
+
组件库将 Vue 和 Ant Design Vue 作为 peer dependency；D3 和 vue3-colorpicker 由组件包直接依赖。
|
|
31
|
+
安装组件时请确保业务项目同时提供兼容版本的 peer dependency：
|
|
37
32
|
|
|
38
33
|
```bash
|
|
39
|
-
pnpm add waveform-analysis vue
|
|
34
|
+
pnpm add waveform-analysis vue ant-design-vue
|
|
40
35
|
```
|
|
41
36
|
|
|
42
37
|
### 运行时版本要求
|
|
43
38
|
|
|
44
|
-
|
|
39
|
+
组件库当前使用或支持以下运行时版本：
|
|
45
40
|
|
|
46
41
|
| 依赖 | 支持版本 |
|
|
47
42
|
| ---------------- | ------------- |
|
|
@@ -50,13 +45,8 @@ pnpm add waveform-analysis vue d3 ant-design-vue vue3-colorpicker
|
|
|
50
45
|
| D3 | `>=7.9.0 <8` |
|
|
51
46
|
| vue3-colorpicker | `>=2.3.0 <3` |
|
|
52
47
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
## 发布
|
|
56
|
-
|
|
57
|
-
发布由推送版本 tag 触发。`package.json` 的 `version` 必须与 tag 去掉 `v` 后完全一致。
|
|
58
|
-
稳定版使用 `vX.Y.Z`，预发布版使用 `vX.Y.Z-rc.1`；稳定版发布为 npm `latest`，预发布版发布为
|
|
59
|
-
`next`。流水线会创建 Gitea Release，并上传包文件与 SHA-256 校验文件。
|
|
48
|
+
其中 Vue 和 Ant Design Vue 的版本范围是公开的 peer dependency 约束；D3 和 vue3-colorpicker
|
|
49
|
+
随组件包安装。
|
|
60
50
|
|
|
61
51
|
## 最小示例
|
|
62
52
|
|
|
@@ -96,42 +86,45 @@ const data = ref<WaveformData>({
|
|
|
96
86
|
|
|
97
87
|
### Props
|
|
98
88
|
|
|
99
|
-
| Prop
|
|
100
|
-
|
|
|
101
|
-
| `data`
|
|
102
|
-
| `displayMode`
|
|
103
|
-
| `overlayMode`
|
|
104
|
-
| `timeUnit`
|
|
105
|
-
| `xLabel` / `yLabel`
|
|
106
|
-
| `lineColor`
|
|
107
|
-
| `width` / `height`
|
|
108
|
-
| `zoomable` / `showTooltip`
|
|
109
|
-
| `pannable`
|
|
110
|
-
| `minZoomSpan`
|
|
111
|
-
| `minVisiblePoints`
|
|
112
|
-
| `maxZoomScale`
|
|
113
|
-
| `initialXDomain`
|
|
114
|
-
| `initialXDomains`
|
|
115
|
-
| `xDomainStrategy`
|
|
116
|
-
| `yDomain`
|
|
117
|
-
| `yDomains`
|
|
118
|
-
| `grid`
|
|
119
|
-
| `axes`
|
|
120
|
-
| `rendering`
|
|
121
|
-
| `
|
|
122
|
-
| `
|
|
123
|
-
| `
|
|
124
|
-
| `
|
|
125
|
-
| `
|
|
126
|
-
| `
|
|
127
|
-
| `
|
|
128
|
-
| `
|
|
129
|
-
| `
|
|
130
|
-
| `
|
|
131
|
-
| `
|
|
89
|
+
| Prop | 类型 | 默认值 | 说明 |
|
|
90
|
+
| -------------------------- | ------------------------------------------- | ------------------------------------------------------------------------------------- | --------------------------------------------- |
|
|
91
|
+
| `data` | `WaveformData` | 必填 | 波形数据 |
|
|
92
|
+
| `displayMode` | `'independent' \| 'separated' \| 'compact'` | `'independent'` | 图框布局 |
|
|
93
|
+
| `overlayMode` | `'single-axis' \| 'multi-axis'` | `'single-axis'` | 叠加曲线的 Y 轴模式 |
|
|
94
|
+
| `timeUnit` | `'s' \| 'ms'` | `'ms'` | 坐标轴和 tooltip 展示单位 |
|
|
95
|
+
| `xLabel` / `yLabel` | `string` | `时间（timeUnit）` / `'幅值'` | 坐标轴名称 |
|
|
96
|
+
| `lineColor` | `string` | `'#0960bd'` | 单波形默认颜色 |
|
|
97
|
+
| `width` / `height` | `number` | 自适应 | 组件总尺寸，单位为 CSS 像素 |
|
|
98
|
+
| `zoomable` / `showTooltip` | `boolean` | `true` / `true` | 缩放和数值 tooltip 开关 |
|
|
99
|
+
| `pannable` | `boolean` | `false` | 空格拖拽平移开关 |
|
|
100
|
+
| `minZoomSpan` | `number` | 未设置 | 最小缩放跨度，使用原始 X 数据单位 |
|
|
101
|
+
| `minVisiblePoints` | `number` | `0` | 缩放后至少保留的不同 X 坐标数 |
|
|
102
|
+
| `maxZoomScale` | `number \| null` | 未设置 | 最大缩放倍数；`null` 表示不限制 |
|
|
103
|
+
| `initialXDomain` | `[number, number]` | 未设置 | 所有图框的初始 X 范围（可超出数据，空白显示） |
|
|
104
|
+
| `initialXDomains` | `Record<string, [number, number]>` | 未设置 | 按 track/series ID 配置初始范围（可超出数据） |
|
|
105
|
+
| `xDomainStrategy` | `WaveformXDomainStrategy` | `{ type: 'data' }` | 自动 X 轴视口范围策略 |
|
|
106
|
+
| `yDomain` | `[number, number]` | 未设置 | 所有波形的固定 Y 轴范围 |
|
|
107
|
+
| `yDomains` | `Record<string, [number, number]>` | 未设置 | 按 track/series ID 配置固定范围 |
|
|
108
|
+
| `grid` | `WaveformGridOptions` | `{ rowCount: 2, columnCount: 1, showPagination: true, fillIncompleteLastRow: false }` | 网格和分页 |
|
|
109
|
+
| `axes` | `WaveformAxesOptions` | 轴线均显示 | X/Y 轴基线、Y 轴分割数与 X 轴 label 格式化 |
|
|
110
|
+
| `rendering` | `WaveformRenderingOptions` | `{}` | 降采样与点/误差棒间距 |
|
|
111
|
+
| `plotMargin` | `WaveformPlotMargin` | `{ top: 18, bottom: 52 }` | 绘图区上下边距，单位为 CSS 像素 |
|
|
112
|
+
| `title` / `frameStyle` | 对应公开类型 | 未设置 | 标题和图框样式 |
|
|
113
|
+
| `legend` | `WaveformLegendOptions` | `{ position: 'top-right', orientation: 'auto' }` | 图例位置、排列、背景和交互 |
|
|
114
|
+
| `frameNumber` | `string \| number` | 未设置 | 图框水印内容 |
|
|
115
|
+
| `frameNumbers` | `Record<string, string \| number>` | 未设置 | 按 `trackId` 覆盖图框水印内容 |
|
|
116
|
+
| `zeroLine` | `WaveformZeroLineOptions` | `{ visible: false }` | 零值参考线显隐与样式 |
|
|
117
|
+
| `cleanView` | `boolean` | `false` | 保留波形、图框和刻度的净图模式 |
|
|
118
|
+
| `presentationMode` | `boolean` | `false` | 禁用绘图区交互的展示模式 |
|
|
119
|
+
| `annotations` | `WaveformAnnotation[]` | `[]` | 受控标注数据 |
|
|
120
|
+
| `annotationsVisible` | `boolean` | `true` | 标注图层显隐 |
|
|
121
|
+
| `interactionMode` | `'zoom' \| 'annotation'` | `'zoom'` | 左键交互模式 |
|
|
122
|
+
| `hiddenSeriesIds` | `string[]` | 未设置 | 受控隐藏系列 ID |
|
|
123
|
+
| `defaultHiddenSeriesIds` | `string[]` | `[]` | 非受控模式的初始隐藏系列 |
|
|
132
124
|
|
|
133
125
|
所有公开类型均可从包入口导入，例如 `WaveformData`、`WaveformSeries`、`TypedSampleData`、
|
|
134
126
|
`TypedPointData`、`WaveformAnnotation`、`WaveformLineStyle`、`WaveformRenderingOptions`、
|
|
127
|
+
`WaveformPlotMargin`、
|
|
135
128
|
`WaveformAxesOptions`、`WaveformXAxisLabelFormatter`、`WaveformXDomainStrategy`、`WaveformZeroLineOptions`、
|
|
136
129
|
`WaveformGridOptions` 和 `WaveformGridTrackLines`。
|
|
137
130
|
|
|
@@ -873,7 +866,9 @@ Sum 按每条线的目标渲染点数采样。右侧表格显示每个系列的
|
|
|
873
866
|
## 项目结构
|
|
874
867
|
|
|
875
868
|
- `src/index.ts`：组件库公开入口和工具函数导出
|
|
876
|
-
- `src/components/WaveformChart.vue
|
|
869
|
+
- `src/components/WaveformChart.vue`：公共组件边界，连接图表控制器与视图
|
|
870
|
+
- `src/components/WaveformChartView.vue`：图表视图、交互宿主和渲染层编排
|
|
871
|
+
- `src/components/core/useWaveformChartController.ts`：布局、状态和交互控制器编排
|
|
877
872
|
- `src/components/{core,data,rendering,interaction,annotation}`：数据、布局、渲染和交互模块
|
|
878
873
|
- `src/App.vue`：综合可交互 demo，`src/data` 中提供示例波形数据
|
|
879
874
|
- `src/router.ts`：Demo 路由；`src/views/FixedYDomainDemo.vue` 与
|
|
@@ -883,7 +878,7 @@ Sum 按每条线的目标渲染点数采样。右侧表格显示每个系列的
|
|
|
883
878
|
|
|
884
879
|
## 本地开发
|
|
885
880
|
|
|
886
|
-
开发环境要求 Node.js 22、pnpm、Rust 1.95（含 `wasm32-unknown-unknown` target）和 wasm-pack
|
|
881
|
+
开发环境要求 Node.js 22、pnpm 10.32.1、Rust 1.95（含 `wasm32-unknown-unknown` target）和 wasm-pack
|
|
887
882
|
0.14.0：
|
|
888
883
|
|
|
889
884
|
```bash
|
|
@@ -911,16 +906,3 @@ ESLint 的 Vue SFC、TypeScript ESLint 和 `max-lines` 规则；`pnpm lint:all`
|
|
|
911
906
|
|
|
912
907
|
`pnpm build` 同时生成 `dist/` 组件库产物和 `dist-demo/` 演示应用。正式公开入口为
|
|
913
908
|
`src/index.ts`，样式入口为 `src/styles.css`；`dist/` 和 `dist-demo/` 均为生成目录，不要手工编辑。
|
|
914
|
-
|
|
915
|
-
## 发布流程
|
|
916
|
-
|
|
917
|
-
发布由推送版本 tag 触发。先将 `package.json` 的 `version` 更新为目标版本并提交，再创建同版本 tag：
|
|
918
|
-
|
|
919
|
-
```bash
|
|
920
|
-
git tag -a v0.1.15 -m "Release v0.1.15"
|
|
921
|
-
git push origin main --follow-tags
|
|
922
|
-
```
|
|
923
|
-
|
|
924
|
-
支持稳定版 `vX.Y.Z` 与预发布版 `vX.Y.Z-rc.1`。tag 去掉 `v` 后必须与 `package.json` 的
|
|
925
|
-
`version` 完全一致。稳定版发布为 npm `latest`，预发布版发布为 npm `next`。流水线会创建 Gitea
|
|
926
|
-
Release，并上传 `.tgz` 与 SHA-256 校验文件。
|