@visactor/taro-vchart 0.2.0-alpha.2 → 0.10.0-alpha.3

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 CHANGED
@@ -10,14 +10,15 @@ VChart 基于 [Taro](https://docs.taro.zone/docs/) 封装的图表组件。
10
10
 
11
11
  ## 支持环境
12
12
 
13
- 目前组件支持的环境有:**字节小程序**('tt'),**飞书小程序**('lark'),**浏览器**('h5', 'web')。
13
+ 目前组件支持的环境有:**微信小程序**('weapp'),**字节小程序**('tt'),**飞书小程序**('lark'),**浏览器**('web'),**h5 移动端**('h5')。
14
14
 
15
15
  以上环境通过 `type` 属性进行声明,`type` 属性值及对应环境如下:
16
16
 
17
+ - `weapp` 微信小程序。
17
18
  - `tt` 字节小程序。
18
19
  - `lark` 飞书小程序。
19
- - `h5` 浏览器环境, 与`web`等价。
20
- - `web` 浏览器环境, 与`h5`等价。
20
+ - `h5` h5 移动端环境。
21
+ - `web` 浏览器环境。
21
22
 
22
23
  ### 跨端支持
23
24
 
@@ -79,17 +80,17 @@ import VChart from '@visactor/taro-vchart';
79
80
  />;
80
81
  ```
81
82
 
82
- | API | 类型 | 说明 |
83
- | ------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
84
- | type | String | 配置的环境,目前组件支持的环境有:**字节小程序**('tt'),**飞书小程序**('lark'),**浏览器**('h5', 'web') ,如果没有声明,则会通过 `Taro.getEnv()` 自动获取 |
85
- | canvasId | String | 图表 id, 必确唯一 |
86
- | spec | Object | 图表配置项, 请参考[VChart 配置项](todo) |
87
- | style | Object | 图表容器样式 |
88
- | events | Object[] | 事件绑定配置,具体配置为定义[如下](#) |
89
- | options | Object | 初始化 VChart 实例传入的额外配置项,同 [VChart 实例化配置项](todo) |
90
- | onChartInit | Function | 图表初始化完后触发的回调 |
91
- | onChartReady | Function | 图表渲染完毕后触发的回调 |
92
- | onChartUpdate | Function | 图表更新完毕后触发的回调 |
83
+ | API | 类型 | 说明 |
84
+ | ------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
85
+ | type | String | 配置的环境,目前组件支持的环境有:**字节小程序**('tt'),**飞书小程序**('lark'),**浏览器**('web'),**h5 移动端**('h5'),如果没有声明,则会通过 `Taro.getEnv()` 自动获取 |
86
+ | canvasId | String | 图表 id, 必确唯一 |
87
+ | spec | Object | 图表配置项, 请参考[VChart 配置项](https://www.visactor.io/vchart/option/) |
88
+ | style | Object | 图表容器样式 |
89
+ | events | Object[] | 事件绑定配置,具体配置为定义[如下](#事件配置) |
90
+ | options | Object | 初始化 VChart 实例传入的额外配置项,同 [VChart 实例化配置项](https://www.visactor.io/vchart/api/API/vchart#options) |
91
+ | onChartInit | Function | 图表初始化完后触发的回调 |
92
+ | onChartReady | Function | 图表渲染完毕后触发的回调 |
93
+ | onChartUpdate | Function | 图表更新完毕后触发的回调 |
93
94
 
94
95
  ### 事件配置
95
96
 
@@ -103,13 +104,16 @@ interface IEvent {
103
104
  * 事件 API 中的事件筛选配置
104
105
  */
105
106
  query?: EventQuery;
107
+ /**
108
+ * 事件监听函数
109
+ */
106
110
  handler: EventCallback<EventParams>;
107
111
  }
108
112
  ```
109
113
 
110
- - `type` 代表事件名称,支持的值详见:[事件分类](todo)
111
- - `query` 事件 API 中的事件筛选配置,使用详见:[事件过滤](todo)
112
- - `handler` 即事件监听函数,函数的参数类型详见:[事件参数](todo)
114
+ - `type` 代表事件名称,支持的值详见:[事件分类](https://www.visactor.io/vchart/api/API/event#%E4%BA%8B%E4%BB%B6%E5%88%86%E7%B1%BB)
115
+ - `query` 事件 API 中的事件筛选配置,使用详见:[事件过滤](https://www.visactor.io/vchart/api/API/event#%E4%BA%8B%E4%BB%B6%E8%BF%87%E6%BB%A4)
116
+ - `handler` 即事件监听函数,函数的参数类型详见:[事件参数](https://www.visactor.io/vchart/api/API/event#%E4%BA%8B%E4%BB%B6%E5%8F%82%E6%95%B0)
113
117
 
114
118
  ## 快速上手
115
119
 
@@ -201,7 +205,7 @@ export function Pie() {
201
205
  - `chartInstance.updateSpec()` 基于 Spec 更新图表
202
206
  - `chartInstance.updateData()` 基于数据更新图表
203
207
 
204
- 详细使用方法请参考:[VChart API](todo)
208
+ 详细使用方法请参考:[VChart API](https://www.visactor.io/vchart/api/API/vchart)
205
209
 
206
210
  #### 示例
207
211
 
@@ -307,3 +311,19 @@ export function Pie() {
307
311
  );
308
312
  }
309
313
  ```
314
+
315
+ ## 如何开发
316
+
317
+ ```bash
318
+ # 因为 taro-vchart 依赖 vchart 的编译结果,所以先要运行如下命令
319
+ $ rush run -p @visactor/vchart -s build:es5
320
+
321
+ # 运行 lark 小程序
322
+ $ rush run -p @visactor/taro-vchart -s dev:lark
323
+
324
+
325
+ # 运行微信小程序
326
+ $ rush run -p @visactor/taro-vchart -s dev:wx
327
+ ```
328
+
329
+ 然后使用飞书开发者工具导入 `packages/taro-vchart/dist/lark` 或者 `packages/taro-vchart/dist/weapp` 目录即可。
@@ -1,15 +1,20 @@
1
1
  import React from 'react';
2
2
  import { TTCanvas } from '../../utils';
3
- import { IChartProps, IDomRef } from '../../typings';
4
- export declare class GeneralChart extends React.Component<IChartProps> {
3
+ import { IChartProps, IDomRef, RenderMode } from '../../typings';
4
+ export interface GeneralChartProps extends IChartProps {
5
+ /**
6
+ * vchart 的环境参数
7
+ */
8
+ mode?: RenderMode;
9
+ }
10
+ export declare class GeneralChart extends React.Component<GeneralChartProps> {
5
11
  ttCanvas: TTCanvas;
6
- constructor(props: IChartProps);
7
12
  componentDidMount(): Promise<void>;
8
- componentDidUpdate(prevProps: IChartProps): void;
13
+ componentDidUpdate(prevProps: GeneralChartProps): void;
9
14
  componentWillUnmount(): void;
10
15
  init({ domref, dpr }: {
11
16
  domref: IDomRef;
12
17
  dpr: number;
13
- }): void;
18
+ }): Promise<void>;
14
19
  render(): React.JSX.Element;
15
20
  }
@@ -1,6 +1,12 @@
1
1
  import React from 'react';
2
- import { IChartProps } from '../../typings';
3
- export declare class WebChart extends React.Component<IChartProps> {
2
+ import { IChartProps, RenderMode } from '../../typings';
3
+ export interface WebChartProps extends IChartProps {
4
+ /**
5
+ * vchart 的环境参数
6
+ */
7
+ mode?: RenderMode;
8
+ }
9
+ export declare class WebChart extends React.Component<WebChartProps> {
4
10
  private vchart;
5
11
  constructor(props: IChartProps);
6
12
  componentDidMount(): void;
@@ -4,6 +4,7 @@ interface IVChartProps extends IChartProps {
4
4
  * 配置环境。如果没有声明,则会通过 `Taro.getEnv()` 自动获取。
5
5
  * - `tt` 字节小程序。
6
6
  * - `lark` 飞书小程序。
7
+ * - `weapp` 微信小程序
7
8
  * - `h5` 浏览器环境, 与`web`等价。
8
9
  * - `web` 浏览器环境, 与`h5`等价。
9
10
  */
package/lib/src/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import VChart$1 from '@visactor/vchart/build';
2
+ import VChart$1, { vglobal, registerLarkEnv, registerWXEnv } from '@visactor/vchart/build/es5';
3
3
  import { View, Canvas } from '@tarojs/components';
4
4
  import Taro from '@tarojs/taro';
5
5
 
@@ -45,8 +45,8 @@ class WebChart extends React.Component {
45
45
  super(props);
46
46
  }
47
47
  componentDidMount() {
48
- const { onChartInit, onChartReady } = this.props;
49
- this.vchart = new VChart$1(this.props.spec, Object.assign({ dom: `${this.props.canvasId}` }, this.props.options));
48
+ const { onChartInit, onChartReady, mode } = this.props;
49
+ this.vchart = new VChart$1(this.props.spec, Object.assign({ dom: `${this.props.canvasId}`, mode }, this.props.options));
50
50
  onChartInit && onChartInit(this.vchart);
51
51
  this.vchart
52
52
  .renderAsync()
@@ -108,7 +108,7 @@ class TTCanvas {
108
108
  force: true,
109
109
  canvasIdLists: [`${domref.id}_draw_canvas`, `${domref.id}_tooltip_canvas`, `${domref.id}_hidden_canvas`],
110
110
  tooltipCanvasId: `${domref.id}_tooltip_canvas`,
111
- freeCanvasIdx: 1 // 自由 canvas 索引
111
+ freeCanvasIdx: 2 // 自由 canvas 索引
112
112
  }, dpr: this.dpr, renderCanvas: `${domref.id}_draw_canvas` }, this.options));
113
113
  this.onChartInit && this.onChartInit(this.chartInstance);
114
114
  // events
@@ -174,9 +174,6 @@ const style_container = {
174
174
  };
175
175
 
176
176
  class GeneralChart extends React.Component {
177
- constructor(props) {
178
- super(props);
179
- }
180
177
  componentDidMount() {
181
178
  return __awaiter(this, void 0, void 0, function* () {
182
179
  if (!this.props.spec || !this.props.canvasId) {
@@ -242,35 +239,46 @@ class GeneralChart extends React.Component {
242
239
  this.ttCanvas && this.ttCanvas.release();
243
240
  }
244
241
  init({ domref, dpr = 2 }) {
245
- if (!domref) {
246
- console.error(`未找到 #${this.props.canvasId} 组件`);
247
- return;
248
- }
249
- domref.id = this.props.canvasId;
250
- this.ttCanvas = new TTCanvas({
251
- dpr: dpr,
252
- domref,
253
- spec: this.props.spec,
254
- events: this.props.events,
255
- options: this.props.options,
256
- onChartInit: (chart) => {
257
- var _a;
258
- ((_a = this.props) === null || _a === void 0 ? void 0 : _a.onChartInit) && this.props.onChartInit(chart);
259
- },
260
- onChartReady: (chart) => {
261
- var _a;
262
- ((_a = this.props) === null || _a === void 0 ? void 0 : _a.onChartReady) && this.props.onChartReady(chart);
263
- },
264
- onChartUpdate: (chart) => {
265
- var _a;
266
- ((_a = this.props) === null || _a === void 0 ? void 0 : _a.onChartUpdate) && this.props.onChartUpdate(chart);
242
+ return __awaiter(this, void 0, void 0, function* () {
243
+ if (!domref) {
244
+ console.error(`未找到 #${this.props.canvasId} 组件`);
245
+ return;
267
246
  }
247
+ if (this.props.mode === 'wx') {
248
+ // 微信小程序环境特殊处理
249
+ const canvasIdLists = [
250
+ `${this.props.canvasId}_draw_canvas`,
251
+ `${this.props.canvasId}_tooltip_canvas`,
252
+ `${this.props.canvasId}_hidden_canvas`
253
+ ];
254
+ yield vglobal.setEnv('wx', { domref, force: true, canvasIdLists, freeCanvasIdx: 2, component: undefined });
255
+ }
256
+ domref.id = this.props.canvasId;
257
+ this.ttCanvas = new TTCanvas({
258
+ dpr: dpr,
259
+ domref,
260
+ spec: this.props.spec,
261
+ events: this.props.events,
262
+ options: this.props.options,
263
+ mode: this.props.mode,
264
+ onChartInit: (chart) => {
265
+ var _a;
266
+ ((_a = this.props) === null || _a === void 0 ? void 0 : _a.onChartInit) && this.props.onChartInit(chart);
267
+ },
268
+ onChartReady: (chart) => {
269
+ var _a;
270
+ ((_a = this.props) === null || _a === void 0 ? void 0 : _a.onChartReady) && this.props.onChartReady(chart);
271
+ },
272
+ onChartUpdate: (chart) => {
273
+ var _a;
274
+ ((_a = this.props) === null || _a === void 0 ? void 0 : _a.onChartUpdate) && this.props.onChartUpdate(chart);
275
+ }
276
+ });
268
277
  });
269
278
  }
270
279
  render() {
271
280
  const handleEvent = (event) => {
272
- const id = event.target.id.split('_')[0];
273
- if (id === this.props.canvasId && this.ttCanvas.chartInstance) {
281
+ if (this.ttCanvas && this.ttCanvas.chartInstance) {
274
282
  const chartInstance = this.ttCanvas.chartInstance;
275
283
  Object.defineProperty(event, 'target', {
276
284
  writable: false,
@@ -281,27 +289,33 @@ class GeneralChart extends React.Component {
281
289
  };
282
290
  const { canvasId, style = {} } = this.props;
283
291
  return (React.createElement(View, { key: canvasId, style: Object.assign(Object.assign(Object.assign({}, style_container), style), { padding: 0 }) },
284
- React.createElement(Canvas, { style: Object.assign({}, style_cs_tooltip_canvas), id: `${canvasId}_tooltip_canvas`, canvasId: `${canvasId}_tooltip_canvas` }),
285
- React.createElement(Canvas, { onTouchStart: handleEvent, onTouchMove: handleEvent, onTouchEnd: handleEvent, style: style_cs_canvas, id: `${canvasId}_draw_canvas`, canvasId: `${canvasId}_draw_canvas` }),
286
- React.createElement(Canvas, { style: Object.assign(Object.assign({}, style_cs_canvas), style_cs_canvas_hidden), id: `${canvasId}_hidden_canvas`, canvasId: `${canvasId}_hidden_canvas` })));
292
+ React.createElement(Canvas, { type: this.props.mode === 'wx' ? '2d' : undefined, style: Object.assign({}, style_cs_tooltip_canvas), id: `${canvasId}_tooltip_canvas`, canvasId: `${canvasId}_tooltip_canvas` }),
293
+ React.createElement(Canvas, { type: this.props.mode === 'wx' ? '2d' : undefined, onTouchStart: handleEvent, onTouchMove: handleEvent, onTouchEnd: handleEvent, style: style_cs_canvas, id: `${canvasId}_draw_canvas`, canvasId: `${canvasId}_draw_canvas` }),
294
+ React.createElement(Canvas, { type: this.props.mode === 'wx' ? '2d' : undefined, style: Object.assign(Object.assign({}, style_cs_canvas), style_cs_canvas_hidden), id: `${canvasId}_hidden_canvas`, canvasId: `${canvasId}_hidden_canvas` })));
287
295
  }
288
296
  }
289
297
 
290
298
  function VChart(_a) {
291
299
  var { type } = _a, args = __rest(_a, ["type"]);
292
- const env = type ? type.toLocaleLowerCase() : Taro.getEnv();
300
+ const env = (type !== null && type !== void 0 ? type : Taro.getEnv()).toLocaleLowerCase();
293
301
  const strategies = {
294
302
  lark: () => {
295
- return React.createElement(GeneralChart, Object.assign({}, args));
303
+ registerLarkEnv();
304
+ return React.createElement(GeneralChart, Object.assign({}, args, { mode: "miniApp" }));
296
305
  },
297
306
  tt: () => {
298
- return React.createElement(GeneralChart, Object.assign({}, args));
307
+ registerLarkEnv();
308
+ return React.createElement(GeneralChart, Object.assign({}, args, { mode: "miniApp" }));
309
+ },
310
+ weapp: () => {
311
+ registerWXEnv();
312
+ return React.createElement(GeneralChart, Object.assign({}, args, { mode: "wx" }));
299
313
  },
300
314
  web: () => {
301
315
  return React.createElement(WebChart, Object.assign({}, args));
302
316
  },
303
317
  h5: () => {
304
- return React.createElement(WebChart, Object.assign({}, args));
318
+ return React.createElement(WebChart, Object.assign({}, args, { mode: "mobile-browser" }));
305
319
  }
306
320
  };
307
321
  if (env && strategies[env] !== undefined) {
@@ -1,2 +1,2 @@
1
- import { IVChart, ISpec } from '@visactor/vchart';
2
- export { IVChart, ISpec };
1
+ import { IVChart, ISpec, RenderMode } from '@visactor/vchart';
2
+ export { IVChart, ISpec, RenderMode };
@@ -1,8 +1,10 @@
1
1
  type tt = 'tt';
2
2
  type lark = 'lark';
3
3
  type web = 'web' | 'h5';
4
+ type weapp = 'weapp';
4
5
  type TT = 'TT';
5
6
  type LARK = 'LARK';
6
7
  type WEB = 'WEB' | 'H5';
7
- export type VChartEnvType = tt | lark | web | TT | LARK | WEB;
8
+ type WEAPP = 'WEAPP';
9
+ export type VChartEnvType = tt | lark | weapp | web | TT | LARK | WEB | WEAPP;
8
10
  export {};
@@ -1,5 +1,5 @@
1
1
  export { IChartProps } from './IChartProps';
2
- export { IVChart } from './IVChart';
2
+ export { IVChart, RenderMode } from './IVChart';
3
3
  export { IEvent } from './IEvent';
4
4
  export { IOptions } from './IOptions';
5
5
  export { IDomRef } from './IDomRef';
package/package.json CHANGED
@@ -1,21 +1,12 @@
1
1
  {
2
2
  "name": "@visactor/taro-vchart",
3
- "version": "0.2.0-alpha.2",
3
+ "version": "0.10.0-alpha.3",
4
4
  "description": "Taro VChart 图表组件",
5
5
  "sideEffects": false,
6
6
  "main": "lib/src/index.js",
7
7
  "files": [
8
8
  "lib"
9
9
  ],
10
- "scripts": {
11
- "build": "rm -rf lib && rollup -c --bundleConfigAsCjs",
12
- "build:tt": "taro build --type tt",
13
- "build:lark": "taro build --type lark",
14
- "build:h5": "taro build --type h5",
15
- "dev:tt": "npm run build:tt -- --watch",
16
- "dev:lark": "npm run build:lark -- --watch",
17
- "dev:h5": "npm run build:h5 -- --watch"
18
- },
19
10
  "keywords": [
20
11
  "taro",
21
12
  "charts",
@@ -27,7 +18,7 @@
27
18
  "graphics",
28
19
  "interaction"
29
20
  ],
30
- "homepage": "",
21
+ "homepage": "https://www.visactor.io/vchart",
31
22
  "bugs": "https://github.com/VisActor/VChart/issues",
32
23
  "repository": {
33
24
  "type": "git",
@@ -36,16 +27,14 @@
36
27
  },
37
28
  "author": {
38
29
  "name": "VisActor",
39
- "url": "https://VisActor.io/"
30
+ "url": "https://www.visactor.io/"
40
31
  },
41
32
  "license": "MIT",
42
33
  "dependencies": {
43
- "@visactor/vchart": "workspace:1.1.0-beta.1"
34
+ "@visactor/vchart": "0.10.0-alpha.3"
44
35
  },
45
36
  "devDependencies": {
46
- "@internal/eslint-config": "workspace:*",
47
37
  "@rushstack/eslint-patch": "~1.1.4",
48
- "@internal/ts-config": "workspace:*",
49
38
  "@vitejs/plugin-react": "3.1.0",
50
39
  "eslint": "~8.18.0",
51
40
  "vite": "3.2.6",
@@ -81,10 +70,23 @@
81
70
  "rollup": "3.20.5",
82
71
  "rollup-plugin-import-css": "^3.0.2",
83
72
  "stylelint": "9.3.0",
84
- "tslib": "2.3.1"
73
+ "tslib": "2.3.1",
74
+ "@internal/eslint-config": "0.0.1",
75
+ "@internal/ts-config": "0.0.1"
85
76
  },
86
77
  "publishConfig": {
87
78
  "access": "public",
88
79
  "registry": "https://registry.npmjs.org/"
80
+ },
81
+ "scripts": {
82
+ "build": "rm -rf lib && rollup -c --bundleConfigAsCjs",
83
+ "build:tt": "taro build --type tt",
84
+ "build:lark": "taro build --type lark",
85
+ "build:h5": "taro build --type h5",
86
+ "build:wx": "taro build --type weapp",
87
+ "dev:tt": "npm run build:tt -- --watch",
88
+ "dev:lark": "npm run build:lark -- --watch",
89
+ "dev:h5": "npm run build:h5 -- --watch",
90
+ "dev:wx": "npm run build:wx -- --watch"
89
91
  }
90
- }
92
+ }