@visactor/taro-vchart 0.10.0-alpha.2 → 0.11.6-alpha.1

package/lib/src/chart/index.d.ts

@@ -0,0 +1 @@
+export * from '@visactor/vchart/build/es5';

package/lib/src/index.d.ts

@@ -1,14 +1,4 @@
-import { IChartProps, VChartEnvType } from './typings';
-interface IVChartProps extends IChartProps {
-    /**
-     * 配置环境。如果没有声明，则会通过 `Taro.getEnv()` 自动获取。
-     * - `tt` 字节小程序。
-     * - `lark` 飞书小程序。
-     * - `weapp` 微信小程序
-     * - `h5` 浏览器环境, 与`web`等价。
-     * - `web` 浏览器环境, 与`h5`等价。
-     */
-    type?: VChartEnvType;
-}
+import { IVChartProps } from './typings';
+import { VChartSimple } from './simple';
 export default function VChart({ type, ...args }: IVChartProps): any;
-export { VChart };
+export { VChart, VChartSimple };

package/lib/src/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import VChart$1, { vglobal, registerLarkEnv, registerWXEnv } from '@visactor/vchart/build/es5';
 import { View, Canvas } from '@tarojs/components';
 import Taro from '@tarojs/taro';
+import { VChart as VChart$1, registerLarkEnv, registerTTEnv, registerWXEnv } from '@visactor/vchart/build/es5';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -45,8 +45,11 @@ class WebChart extends React.Component {
         super(props);
     }
     componentDidMount() {
-        const { onChartInit, onChartReady, mode } = this.props;
-        this.vchart = new VChart$1(this.props.spec, Object.assign({ dom: `${this.props.canvasId}`, mode }, this.props.options));
+        const { onChartInit, onChartReady, mode, chartConstructor } = this.props;
+        if (!chartConstructor) {
+            console.error('chartConstructor not found');
+        }
+        this.vchart = new chartConstructor(this.props.spec, Object.assign({ dom: `${this.props.canvasId}`, mode }, this.props.options));
         onChartInit && onChartInit(this.vchart);
         this.vchart
             .renderAsync()
@@ -77,10 +80,10 @@ class WebChart extends React.Component {
     }
 }
 
-// @ts-ignore
 class TTCanvas {
     constructor(props) {
-        const { dpr, events, spec, options, domref, mode, onChartInit, onChartReady, onChartUpdate } = props;
+        const { chartConstructor, dpr, events, spec, options, domref, mode, onChartInit, onChartReady, onChartUpdate } = props;
+        this.chartConstructor = chartConstructor;
         this.domref = domref;
         this.mode = mode || 'miniApp';
         this.dpr = dpr;
@@ -101,7 +104,7 @@ class TTCanvas {
     }
     init() {
         const domref = this.domref;
-        this.chartInstance = new VChart$1(Object.assign({ width: domref.width, height: domref.height }, this.spec), Object.assign({ mode: this.mode, 
+        this.chartInstance = new this.chartConstructor(Object.assign({ width: domref.width, height: domref.height }, this.spec), Object.assign({ mode: this.mode, 
             // 跨端参数
             modeParams: {
                 domref,
@@ -176,6 +179,9 @@ const style_container = {
 class GeneralChart extends React.Component {
     componentDidMount() {
         return __awaiter(this, void 0, void 0, function* () {
+            if (!this.props.chartConstructor) {
+                console.error('props.chartConstructor is not found');
+            }
             if (!this.props.spec || !this.props.canvasId) {
                 if (!this.props.spec)
                     console.warn('props.spec are not found');
@@ -244,17 +250,28 @@ class GeneralChart extends React.Component {
                 console.error(`未找到 #${this.props.canvasId} 组件`);
                 return;
             }
-            if (this.props.mode === 'wx') {
-                // 微信小程序环境特殊处理
+            if (this.props.mode === 'wx' || this.props.mode === 'tt') {
+                // 微信小程序和TT小程序环境特殊处理
                 const canvasIdLists = [
                     `${this.props.canvasId}_draw_canvas`,
                     `${this.props.canvasId}_tooltip_canvas`,
                     `${this.props.canvasId}_hidden_canvas`
                 ];
-                yield vglobal.setEnv('wx', { domref, force: true, canvasIdLists, freeCanvasIdx: 2, component: undefined });
+                const { chartConstructor } = this.props;
+                const { vglobal } = chartConstructor;
+                if (vglobal) {
+                    yield vglobal.setEnv(this.props.mode, {
+                        domref,
+                        force: true,
+                        canvasIdLists,
+                        freeCanvasIdx: 2,
+                        component: undefined
+                    });
+                }
             }
             domref.id = this.props.canvasId;
             this.ttCanvas = new TTCanvas({
+                chartConstructor: this.props.chartConstructor,
                 dpr: dpr,
                 domref,
                 spec: this.props.spec,
@@ -288,27 +305,25 @@ class GeneralChart extends React.Component {
             }
         };
         const { canvasId, style = {} } = this.props;
+        const type = this.props.mode === 'wx' || this.props.mode === 'tt' ? '2d' : undefined;
         return (React.createElement(View, { key: canvasId, style: Object.assign(Object.assign(Object.assign({}, style_container), style), { padding: 0 }) },
-            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` }),
-            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` }),
-            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` })));
+            React.createElement(Canvas, { type: type, style: Object.assign({}, style_cs_tooltip_canvas), id: `${canvasId}_tooltip_canvas`, canvasId: `${canvasId}_tooltip_canvas` }),
+            React.createElement(Canvas, { type: type, onTouchStart: handleEvent, onTouchMove: handleEvent, onTouchEnd: handleEvent, style: style_cs_canvas, id: `${canvasId}_draw_canvas`, canvasId: `${canvasId}_draw_canvas` }),
+            React.createElement(Canvas, { type: type, style: Object.assign(Object.assign({}, style_cs_canvas), style_cs_canvas_hidden), id: `${canvasId}_hidden_canvas`, canvasId: `${canvasId}_hidden_canvas` })));
     }
 }
 
-function VChart(_a) {
+function VChartSimple(_a) {
     var { type } = _a, args = __rest(_a, ["type"]);
     const env = (type !== null && type !== void 0 ? type : Taro.getEnv()).toLocaleLowerCase();
     const strategies = {
         lark: () => {
-            registerLarkEnv();
             return React.createElement(GeneralChart, Object.assign({}, args, { mode: "miniApp" }));
         },
         tt: () => {
-            registerLarkEnv();
-            return React.createElement(GeneralChart, Object.assign({}, args, { mode: "miniApp" }));
+            return React.createElement(GeneralChart, Object.assign({}, args, { mode: "tt" }));
         },
         weapp: () => {
-            registerWXEnv();
             return React.createElement(GeneralChart, Object.assign({}, args, { mode: "wx" }));
         },
         web: () => {
@@ -325,4 +340,36 @@ function VChart(_a) {
     return React.createElement(GeneralChart, Object.assign({}, args));
 }
 
-export { VChart, VChart as default };
+function VChart(_a) {
+    var { type } = _a, args = __rest(_a, ["type"]);
+    const env = (type !== null && type !== void 0 ? type : Taro.getEnv()).toLocaleLowerCase();
+    // @ts-ignore
+    const props = Object.assign({ chartConstructor: VChart$1 }, args);
+    const strategies = {
+        lark: () => {
+            registerLarkEnv();
+            return React.createElement(GeneralChart, Object.assign({}, props, { mode: "miniApp" }));
+        },
+        tt: () => {
+            registerTTEnv();
+            return React.createElement(GeneralChart, Object.assign({}, props, { mode: "tt" }));
+        },
+        weapp: () => {
+            registerWXEnv();
+            return React.createElement(GeneralChart, Object.assign({}, props, { mode: "wx" }));
+        },
+        web: () => {
+            return React.createElement(WebChart, Object.assign({}, props));
+        },
+        h5: () => {
+            return React.createElement(WebChart, Object.assign({}, props, { mode: "mobile-browser" }));
+        }
+    };
+    if (env && strategies[env] !== undefined) {
+        return strategies[env].call();
+    }
+    console.warn(`暂不支持 ${env} 环境`);
+    return React.createElement(GeneralChart, Object.assign({}, props));
+}
+
+export { VChart, VChartSimple, VChart as default };

package/lib/src/simple.d.ts

@@ -0,0 +1,2 @@
+import { IVChartProps } from './typings';
+export declare function VChartSimple({ type, ...args }: IVChartProps): any;

package/lib/src/typings/IChartProps.d.ts

@@ -1,8 +1,13 @@
 import { CSSProperties } from 'react';
 import { IOptions } from './IOptions';
-import { IVChart, ISpec } from './IVChart';
+import { IVChart, ISpec, IVChartConstructor } from './IVChart';
 import { IEvent } from './IEvent';
+import { VChartEnvType } from './VChartEnvType';
 interface IChartProps {
+    /**
+     * 图表构造函数，必须
+     */
+    chartConstructor: IVChartConstructor;
     /**
      * 图表 id, 必确唯一
      */
@@ -42,4 +47,15 @@ interface IChartProps {
      */
     onChartUpdate?: (chart: IVChart) => void;
 }
-export { IChartProps };
+interface IVChartProps extends IChartProps {
+    /**
+     * 配置环境。如果没有声明，则会通过 `Taro.getEnv()` 自动获取。
+     * - `tt` 字节小程序。
+     * - `lark` 飞书小程序。
+     * - `weapp` 微信小程序
+     * - `h5` 浏览器环境, 与`web`等价。
+     * - `web` 浏览器环境, 与`h5`等价。
+     */
+    type?: VChartEnvType;
+}
+export { IChartProps, IVChartProps };

package/lib/src/typings/IVChart.d.ts

@@ -1,2 +1,2 @@
-import { IVChart, ISpec, RenderMode } from '@visactor/vchart';
-export { IVChart, ISpec, RenderMode };
+import type { IVChart, ISpec, RenderMode, IVChartConstructor } from '@visactor/vchart';
+export { IVChart, ISpec, RenderMode, IVChartConstructor };

package/lib/src/typings/index.d.ts

@@ -1,5 +1,5 @@
-export { IChartProps } from './IChartProps';
-export { IVChart, RenderMode } from './IVChart';
+export { IChartProps, IVChartProps } from './IChartProps';
+export { IVChart, IVChartConstructor, RenderMode } from './IVChart';
 export { IEvent } from './IEvent';
 export { IOptions } from './IOptions';
 export { IDomRef } from './IDomRef';

package/lib/src/utils/tt-canvas/index.d.ts

@@ -1,5 +1,6 @@
-import { IEvent, IOptions, IVChart, IChartProps, IDomRef } from '../../typings';
+import type { IEvent, IOptions, IVChart, IChartProps, IDomRef, IVChartConstructor } from '../../typings';
 export interface IProps {
+    chartConstructor: IVChartConstructor;
     dpr: number;
     domref: IDomRef;
     mode?: string;
@@ -18,6 +19,7 @@ interface ITTCanvas {
     release: () => void;
 }
 export declare class TTCanvas implements ITTCanvas {
+    private chartConstructor;
     private dpr;
     private domref;
     private mode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visactor/taro-vchart",
-  "version": "0.10.0-alpha.2",
+  "version": "0.11.6-alpha.1",
   "description": "Taro VChart 图表组件",
   "sideEffects": false,
   "main": "lib/src/index.js",
@@ -31,7 +31,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@visactor/vchart": "0.10.0-alpha.2"
+    "@visactor/vchart": "0.11.6-alpha.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.1.4",
@@ -71,6 +71,7 @@
     "rollup-plugin-import-css": "^3.0.2",
     "stylelint": "9.3.0",
     "tslib": "2.3.1",
+    "rimraf": "3.0.2",
     "@internal/eslint-config": "0.0.1",
     "@internal/ts-config": "0.0.1"
   },
@@ -79,7 +80,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "build": "rm -rf lib && rollup -c --bundleConfigAsCjs",
+    "build": "rimraf lib && rollup -c --bundleConfigAsCjs",
     "build:tt": "taro build --type tt",
     "build:lark": "taro build --type lark",
     "build:h5": "taro build --type h5",