@visactor/taro-vchart 0.2.0-alpha.0

package/README.md

@@ -0,0 +1,295 @@
+# @visactor/taro-vchart
+
+VChart 基于 [Taro](https://docs.taro.zone/docs/) 封装的图表组件。
+
+## 环境要求
+
+**Taro 版本: >= 3.3.17**
+
+> taro 因为小版本有一些不兼容的 break change，所以尽量使用 3.3 版本
+
+## 支持环境
+
+目前组件支持的环境有：**字节小程序**('tt')，**飞书小程序**('lark')，**浏览器**('h5', 'web')。
+
+以上环境通过 `type` 属性进行声明，`type` 属性值及对应环境如下：
+
+- `tt` 字节小程序。
+
+- `lark` 飞书小程序。
+
+- `h5` 浏览器环境, 与`web`等价。
+
+- `web` 浏览器环境, 与`h5`等价。
+
+### 跨端支持
+
+用户如果需要跨多端支持, 需要根据 `Taro.getEnv()` 动态传入 `type` 属性.
+
+```tsx
+<VChart
+  type={Taro.getEnv()}
+  canvasId="chartId"
+  spec={spec}
+  style={{ height: '100%', width: '100%' }}
+  onChartInit={chart => {}}
+  onChartReady={chart => {}}
+  onChartUpdate={chart => {}}
+/>
+```
+
+### 版本要求
+
+**字节小程序端**
+
+需要确保 **Taro 版本 >= 3.3.17**
+
+> taro 因为小版本有一些不兼容的 break change，所以尽量使用 3.3 版本
+
+**飞书小程序端**
+
+需要确保 **Taro 版本 >= 3.2.0**, **飞书版本 >= 3.45.0**
+
+> taro 因为小版本有一些不兼容的 break change，所以尽量使用 3.3 版本
+
+## 安装
+
+```
+npm install @visactor/taro-vchart
+```
+
+## API
+
+图表组件使用示例如下：
+
+```tsx
+<VCHart
+  type="tt"
+  spec={spec}
+  canvasId="pie"
+  style={{ height: '35vh', width: '100%' }}
+  onChartInit={chart => {
+    console.log('init pie');
+  }}
+  onChartReady={chart => {
+    console.log('ready pie');
+  }}
+  onChartUpdate={chart => {
+    console.log('update pie');
+  }}
+/>
+```
+
+| API           | 类型     | 说明                                                                                                    |
+| ------------- | -------- | ------------------------------------------------------------------------------------------------------- |
+| type          | string   | 配置的环境，目前组件支持的环境有：**字节小程序**('tt')，**飞书小程序**('lark')，**浏览器**('h5', 'web') |
+| canvasId      | String   | 图表 id, 必确唯一                                                                                       |
+| spec          | Object   | 图表配置项, 请参考[VChart 配置项](todo)                                                                 |
+| style         | Object   | 图表容器样式                                                                                            |
+| events        | Object[] | 事件绑定配置                                                                                            |
+| options       | Object   | 初始化 VChart 实例传入的额外配置项，同 [VChart 实例化配置项](todo)                                      |
+| onChartInit   | Function | 图表初始化完后触发的回调                                                                                |
+| onChartReady  | Function | 图表渲染完毕后触发的回调                                                                                |
+| onChartUpdate | Function | 图表更新完毕后触发的回调                                                                                |
+
+## 快速上手
+
+```tsx
+import React, { useState } from 'react';
+import { View } from '@tarojs/components';
+import VChart from '@visactor/taro-vchart';
+
+export function Pie() {
+  // 1. 准备图表配置项与数据
+  const [spec, setSpec] = useState({
+    data: [
+      {
+        id: 'data1',
+        values: [
+          {
+            value: 335,
+            name: '直接访问'
+          },
+          {
+            value: 310,
+            name: '邮件营销'
+          },
+          {
+            value: 274,
+            name: '联盟广告'
+          },
+          {
+            value: 235,
+            name: '视频广告'
+          },
+          {
+            value: 400,
+            name: '搜索引擎'
+          }
+        ]
+      }
+    ],
+    type: 'pie',
+    outerRadius: 0.6,
+    innerRadius: 0.5,
+    categoryField: 'name',
+    valueField: 'value',
+    legends: {
+      visible: true
+    }
+  });
+
+  // 向Chart组件, 传递参数.
+  return (
+    <View
+      style={{
+        border: '1px solid #eeeeee',
+        width: '90vw'
+      }}
+    >
+      <VChart
+        type="tt"
+        spec={spec}
+        canvasId="pie"
+        style={{ height: '35vh', width: '100%' }}
+        onChartInit={() => {
+          console.log('init pie');
+        }}
+        onChartReady={() => {
+          console.log('ready pie');
+        }}
+        onChartUpdate={() => {
+          console.log('update pie');
+        }}
+      />
+    </View>
+  );
+}
+```
+
+## 常用示例
+
+### 图表状态更新
+
+图表内部, 监听了 `spec` 的变化. 当 spec 变化时, 则会基于新的 `spec` 更新图表。
+
+此外用户也可以使用 VChart 实例提供的渲染接口，进行图表的渲染、更新、销毁操作。
+
+> 可以通过 `onChartInit` 接口, 获取到 VChart 实例.
+
+#### API
+
+- `chartInstance.renderAsync()` 更新图表
+
+- `chartInstance.release()` 销毁图表
+
+- `chartInstance.updateSpec()` 基于 Spec 更新图表
+
+- `chartInstance.updateData()` 基于数据更新图表
+
+详细使用方法请参考:[VChart API](todo)
+
+#### 示例
+
+兼容 React 的状态管理方式. 通过 setState 更新配置项, 图表即可重绘.
+
+```tsx
+import React, { useEffect, useState } from 'react';
+import { View } from '@tarojs/components';
+import VChart from '@visactor/taro-vchart';
+
+export function Pie() {
+  const [spec, setSpec] = useState({
+    data: [
+      {
+        id: 'data1',
+        values: [
+          {
+            value: 335,
+            name: '直接访问'
+          },
+          {
+            value: 310,
+            name: '邮件营销'
+          },
+          {
+            value: 274,
+            name: '联盟广告'
+          },
+          {
+            value: 235,
+            name: '视频广告'
+          },
+          {
+            value: 400,
+            name: '搜索引擎'
+          }
+        ]
+      }
+    ],
+    type: 'pie',
+    outerRadius: 0.6,
+    innerRadius: 0.5,
+    categoryField: 'name',
+    valueField: 'value',
+    legends: {
+      visible: true
+    }
+  });
+
+  useEffect(() => {
+    setTimeout(() => {
+      setSpec({
+        data: [
+          {
+            id: 'data1',
+            values: [
+              {
+                value: 335,
+                name: '直接访问'
+              },
+              {
+                value: 310,
+                name: '邮件营销'
+              }
+            ]
+          }
+        ],
+        type: 'pie',
+        outerRadius: 0.6,
+        innerRadius: 0.5,
+        categoryField: 'name',
+        valueField: 'value',
+        legends: {
+          visible: true
+        }
+      });
+    }, 3000);
+  }, []);
+
+  return (
+    <View
+      style={{
+        border: '1px solid #eeeeee',
+        width: '90vw'
+      }}
+    >
+      <VChart
+        type="tt"
+        spec={spec}
+        canvasId="pie"
+        style={{ height: '35vh', width: '100%' }}
+        onChartInit={() => {
+          console.log('init pie');
+        }}
+        onChartReady={() => {
+          console.log('ready pie');
+        }}
+        onChartUpdate={() => {
+          console.log('update pie');
+        }}
+      />
+    </View>
+  );
+}
+```

package/lib/src/components/general-chart/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TTCanvas } from '../../utils';
+import { IChartProps, IDomRef } from '../../typings';
+export declare class GeneralChart extends React.Component<IChartProps> {
+    ttCanvas: TTCanvas;
+    constructor(props: IChartProps);
+    componentDidMount(): Promise<void>;
+    componentDidUpdate(prevProps: IChartProps): void;
+    componentWillUnmount(): void;
+    init({ domref, dpr }: {
+        domref: IDomRef;
+        dpr: number;
+    }): void;
+    render(): React.JSX.Element;
+}

package/lib/src/components/web-chart/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { IChartProps } from '../../typings';
+export declare class WebChart extends React.Component<IChartProps> {
+    private vchart;
+    constructor(props: IChartProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps: IChartProps): void;
+    render(): React.JSX.Element;
+}
+export default WebChart;

package/lib/src/index.d.ts

@@ -0,0 +1,13 @@
+import { IChartProps, VChartEnvType } from './typings';
+interface IVChartProps extends IChartProps {
+    /**
+     * 配置环境。
+     * - `tt` 字节小程序。
+     * - `lark` 飞书小程序。
+     * - `h5` 浏览器环境, 与`web`等价。
+     * - `web` 浏览器环境, 与`h5`等价。
+     */
+    type: VChartEnvType;
+}
+export default function VChart({ type, ...args }: IVChartProps): any;
+export { VChart };

package/lib/src/index.js

@@ -0,0 +1,316 @@
+import React from 'react';
+import VChart$1 from '@visactor/vchart/build';
+import { View, Canvas } from '@tarojs/components';
+import Taro from '@tarojs/taro';
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+class WebChart extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    componentDidMount() {
+        const { onChartInit, onChartReady } = this.props;
+        this.vchart = new VChart$1(this.props.spec, Object.assign({ dom: `${this.props.canvasId}` }, this.props.options));
+        onChartInit && onChartInit(this.vchart);
+        this.vchart
+            .renderAsync()
+            .then(() => {
+            onChartReady && onChartReady(this.vchart);
+        })
+            .catch((e) => {
+            console.error(e);
+        });
+    }
+    componentWillUnmount() {
+        if (!this.vchart)
+            return;
+        this.vchart && this.vchart.release();
+    }
+    componentDidUpdate(prevProps) {
+        if (!this.vchart)
+            return;
+        const { spec, onChartReady } = this.props;
+        if (JSON.stringify(prevProps.spec) !== JSON.stringify(spec)) {
+            this.vchart.updateSpec(spec, true);
+            onChartReady && onChartReady(this.vchart);
+        }
+    }
+    render() {
+        const { canvasId, style } = this.props;
+        return (React.createElement("div", { style: Object.assign(Object.assign({ position: 'relative' }, style), { padding: 0 }), id: `${canvasId}` }));
+    }
+}
+
+class TTCanvas {
+    constructor(props) {
+        const { dpr, events, spec, options, domref, mode, onChartInit, onChartReady, onChartUpdate } = props;
+        this.domref = domref;
+        this.mode = mode || 'miniApp';
+        this.dpr = dpr;
+        this.spec = spec;
+        this.events = events;
+        this.options = options;
+        /**
+         * 三个生命周期函数
+         */
+        this.onChartInit = onChartInit;
+        this.onChartReady = onChartReady;
+        this.onChartUpdate = onChartUpdate;
+        /**
+         * 图表初始化以及渲染
+         */
+        this.init();
+        this.renderAsync();
+    }
+    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, 
+            // 跨端参数
+            modeParams: {
+                domref,
+                force: true,
+                canvasIdLists: [`${domref.id}_draw_canvas`, `${domref.id}_tooltip_canvas`, `${domref.id}_hidden_canvas`],
+                tooltipCanvasId: `${domref.id}_tooltip_canvas`,
+                freeCanvasIdx: 1 // 自由 canvas 索引
+            }, dpr: this.dpr, renderCanvas: `${domref.id}_draw_canvas` }, this.options));
+        this.onChartInit && this.onChartInit(this.chartInstance);
+        // events
+        if (this.events) {
+            this.events.forEach(event => {
+                this.chartInstance.on(event.type, Object.assign(Object.assign({}, event.query), { source: 'chart' }), event.handler);
+            });
+        }
+        return this.chartInstance;
+    }
+    renderAsync() {
+        var _a;
+        (_a = this.chartInstance) === null || _a === void 0 ? void 0 : _a.renderAsync().then((chart) => {
+            this.onChartReady && this.onChartReady(chart);
+            return chart;
+        });
+    }
+    updateSpec(props) {
+        var _a;
+        this.onChartUpdate && this.onChartUpdate(this.chartInstance);
+        (_a = this.chartInstance) === null || _a === void 0 ? void 0 : _a.updateSpec(props.spec, true);
+    }
+    release() {
+        /**
+         * 修复各种内存泄漏问题
+         */
+        if (!this.chartInstance)
+            return;
+        // 释放: 图表
+        this.chartInstance.release();
+    }
+}
+
+const style_cs_canvas = {
+    width: '100%',
+    height: '100%',
+    display: 'block',
+    margin: '0px',
+    position: 'relative',
+    zIndex: 1
+};
+const style_cs_canvas_hidden = {
+    opacity: 0,
+    visibility: 'hidden',
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    pointerEvents: 'none',
+    top: 0,
+    left: 0,
+    zIndex: 0
+};
+const style_cs_tooltip_canvas = {
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    pointerEvents: 'none',
+    top: 0,
+    left: 0,
+    zIndex: 2
+};
+const style_container = {
+    width: '100%',
+    height: '100%',
+    position: 'relative'
+};
+
+class GeneralChart extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    componentDidMount() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.props.spec || !this.props.canvasId) {
+                if (!this.props.spec)
+                    console.warn('props.spec are not found');
+                if (!this.props.canvasId)
+                    console.warn('props.canvasId are not found');
+                return;
+            }
+            // 获取domRef
+            const getDomRef = () => __awaiter(this, void 0, void 0, function* () {
+                return new Promise(resolve => {
+                    Taro.nextTick(() => {
+                        Taro.createSelectorQuery()
+                            .select(`#${this.props.canvasId}_draw_canvas`)
+                            .boundingClientRect(domref => {
+                            resolve(domref);
+                        })
+                            .exec();
+                    });
+                });
+            });
+            /**
+             * TODO:
+             * 这里是一个很不优雅的写法
+             * 具体背景为: 用户在加载页面后, 立刻创建图表, 会报取不domRef的错误.
+             * 具体原因是Taro.nextTick()仅执行一次时, 在飞书小程序无法正确取到Dom节点. 经过测试, 调用2次就可以保持正确.
+             * 因此在这里被迫做了一个for循环, 多次尝试. 至多取100次.
+             *
+             * 此外, 这里也无法使用onReady进行操作, 具体请参考: http://taro-docs.jd.com/taro/docs/react-page#onready-
+             * 此问题目前仅出现在飞书小程序, 字节小程序正常.
+             */
+            const MAX_TIMES = 100;
+            for (let i = 0; i < MAX_TIMES; i++) {
+                // 获取domRef
+                const domref = yield getDomRef();
+                if (domref === null || domref === undefined) {
+                    // 如果不存在, 则重复循环, 最多尝试100次. 确保不会死循环.
+                    continue;
+                }
+                // 初始化图表
+                Taro.getSystemInfo({
+                    success: res => {
+                        this.init({ domref, dpr: res.pixelRatio });
+                    },
+                    fail: res => {
+                        console.error(new Error('taro 暂不支持该环境'));
+                        console.log(res);
+                    }
+                });
+                break;
+            }
+        });
+    }
+    componentDidUpdate(prevProps) {
+        if (this.ttCanvas &&
+            this.ttCanvas.chartInstance &&
+            JSON.stringify(prevProps.spec) !== JSON.stringify(this.props.spec)) {
+            this.ttCanvas.updateSpec(this.props);
+        }
+    }
+    componentWillUnmount() {
+        this.ttCanvas && this.ttCanvas.release();
+    }
+    init({ domref, dpr = 2 }) {
+        if (!domref) {
+            console.error(`未找到 #${this.props.canvasId} 组件`);
+            return;
+        }
+        domref.id = this.props.canvasId;
+        this.ttCanvas = new TTCanvas({
+            dpr: dpr,
+            domref,
+            spec: this.props.spec,
+            events: this.props.events,
+            options: this.props.options,
+            onChartInit: (chart) => {
+                var _a;
+                ((_a = this.props) === null || _a === void 0 ? void 0 : _a.onChartInit) && this.props.onChartInit(chart);
+            },
+            onChartReady: (chart) => {
+                var _a;
+                ((_a = this.props) === null || _a === void 0 ? void 0 : _a.onChartReady) && this.props.onChartReady(chart);
+            },
+            onChartUpdate: (chart) => {
+                var _a;
+                ((_a = this.props) === null || _a === void 0 ? void 0 : _a.onChartUpdate) && this.props.onChartUpdate(chart);
+            }
+        });
+    }
+    render() {
+        const handleEvent = (event) => {
+            const id = event.target.id.split('_')[0];
+            if (id === this.props.canvasId && this.ttCanvas.chartInstance) {
+                const chartInstance = this.ttCanvas.chartInstance;
+                Object.defineProperty(event, 'target', {
+                    writable: false,
+                    value: chartInstance.getCanvas() // Tip: 必须设置
+                });
+                chartInstance.getStage().window.dispatchEvent(event);
+            }
+        };
+        const { canvasId, style = {} } = this.props;
+        return (React.createElement(View, { key: canvasId, style: Object.assign(Object.assign(Object.assign({}, style_container), style), { padding: 0 }) },
+            React.createElement(Canvas, { style: Object.assign({}, style_cs_tooltip_canvas), id: `${canvasId}_tooltip_canvas`, canvasId: `${canvasId}_tooltip_canvas` }),
+            React.createElement(Canvas, { onTouchStart: handleEvent, onTouchMove: handleEvent, onTouchEnd: handleEvent, style: style_cs_canvas, id: `${canvasId}_draw_canvas`, canvasId: `${canvasId}_draw_canvas` }),
+            React.createElement(Canvas, { style: Object.assign(Object.assign({}, style_cs_canvas), style_cs_canvas_hidden), id: `${canvasId}_hidden_canvas`, canvasId: `${canvasId}_hidden_canvas` })));
+    }
+}
+
+function VChart(_a) {
+    var { type } = _a, args = __rest(_a, ["type"]);
+    const env = type.toLocaleLowerCase();
+    const strategies = {
+        lark: () => {
+            return React.createElement(GeneralChart, Object.assign({}, args));
+        },
+        tt: () => {
+            return React.createElement(GeneralChart, Object.assign({}, args));
+        },
+        web: () => {
+            return React.createElement(WebChart, Object.assign({}, args));
+        },
+        h5: () => {
+            return React.createElement(WebChart, Object.assign({}, args));
+        }
+    };
+    if (env && strategies[env] !== undefined) {
+        return strategies[env].call();
+    }
+    console.warn(`暂不支持 ${env} 环境`);
+    return React.createElement(GeneralChart, Object.assign({}, args));
+}
+
+export { VChart, VChart as default };

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

@@ -0,0 +1,45 @@
+import { CSSProperties } from 'react';
+import { IOptions } from './IOptions';
+import { IVChart, ISpec } from './IVChart';
+import { IEvent } from './IEvent';
+interface IChartProps {
+    /**
+     * 图表 id, 必确唯一
+     */
+    canvasId: string;
+    /**
+     * VChart 图表配置项
+     */
+    spec: ISpec;
+    /**
+     * 图表容器样式
+     */
+    style?: CSSProperties;
+    /**
+     * 初始化 VChart 实例传入的额外配置项，同 VChart 实例化配置项
+     */
+    options?: IOptions;
+    /**
+     * 事件绑定配置
+     */
+    events?: IEvent[];
+    /**
+     * 图表渲染完毕后触发的回调
+     * @param chart
+     * @returns
+     */
+    onChartReady?: (chart: IVChart) => void;
+    /**
+     * 图表初始化完后触发的回调
+     * @param chart
+     * @returns
+     */
+    onChartInit?: (chart: IVChart) => void;
+    /**
+     * 图表更新完毕后触发的回调
+     * @param chart
+     * @returns
+     */
+    onChartUpdate?: (chart: IVChart) => void;
+}
+export { IChartProps };

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

@@ -0,0 +1,17 @@
+export interface IDomRef {
+    id: string;
+    width: number;
+    height: number;
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    x: number;
+    y: number;
+    requestAnimationFrame?: any;
+    cancelAnimationFrame?: any;
+    getBoundingClientRect?: () => {
+        height: number;
+        width: number;
+    };
+}

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

@@ -0,0 +1,13 @@
+import { EventType, EventQuery, EventCallback, EventParams } from '@visactor/vchart/esm';
+interface IEvent {
+    /**
+     * 事件的名称
+     */
+    type: EventType;
+    /**
+     * 事件 API 中的事件筛选配置
+     */
+    query?: EventQuery;
+    handler: EventCallback<EventParams>;
+}
+export { IEvent };

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

@@ -0,0 +1,2 @@
+import { IInitOption } from '@visactor/vchart/esm';
+export { IInitOption as IOptions };

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

@@ -0,0 +1,2 @@
+import { IVChart, ISpec } from '@visactor/vchart/esm';
+export { IVChart, ISpec };

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

@@ -0,0 +1,8 @@
+type tt = 'tt';
+type lark = 'lark';
+type web = 'web' | 'h5';
+type TT = 'TT';
+type LARK = 'LARK';
+type WEB = 'WEB' | 'H5';
+export type VChartEnvType = tt | lark | web | TT | LARK | WEB;
+export {};

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

@@ -0,0 +1,6 @@
+export { IChartProps } from './IChartProps';
+export { IVChart } from './IVChart';
+export { IEvent } from './IEvent';
+export { IOptions } from './IOptions';
+export { IDomRef } from './IDomRef';
+export { VChartEnvType } from './VChartEnvType';

package/lib/src/utils/container-styles/index.d.ts

@@ -0,0 +1,5 @@
+import { CSSProperties } from 'react';
+export declare const style_cs_canvas: CSSProperties;
+export declare const style_cs_canvas_hidden: CSSProperties;
+export declare const style_cs_tooltip_canvas: CSSProperties;
+export declare const style_container: CSSProperties;

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

@@ -0,0 +1,2 @@
+export { TTCanvas } from './tt-canvas';
+export { style_cs_canvas, style_cs_canvas_hidden, style_cs_tooltip_canvas, style_container } from './container-styles';

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

@@ -0,0 +1,37 @@
+import { IEvent, IOptions, IVChart, IChartProps, IDomRef } from '../../typings';
+export interface IProps {
+    dpr: number;
+    domref: IDomRef;
+    mode?: string;
+    spec: object;
+    events?: IEvent[];
+    options?: IOptions;
+    onChartInit?: any;
+    onChartReady?: any;
+    onChartUpdate?: any;
+}
+interface ITTCanvas {
+    chartInstance: IVChart;
+    init: () => IVChart;
+    renderAsync: () => void;
+    updateSpec: (props: IChartProps) => void;
+    release: () => void;
+}
+export declare class TTCanvas implements ITTCanvas {
+    private dpr;
+    private domref;
+    private mode;
+    private spec;
+    private events?;
+    private options?;
+    private onChartInit?;
+    private onChartReady?;
+    private onChartUpdate?;
+    chartInstance: IVChart;
+    constructor(props: IProps);
+    init(): IVChart;
+    renderAsync(): void;
+    updateSpec(props: IChartProps): void;
+    release(): void;
+}
+export {};

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "@visactor/taro-vchart",
+  "version": "0.2.0-alpha.0",
+  "description": "Taro VChart 图表组件",
+  "sideEffects": false,
+  "type": "module",
+  "main": "lib/src/index.js",
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "build": "rm -rf lib && rollup -c",
+    "build:tt": "taro build --type tt",
+    "build:lark": "taro build --type lark",
+    "build:h5": "taro build --type h5",
+    "dev:tt": "npm run build:tt -- --watch",
+    "dev:lark": "npm run build:lark -- --watch",
+    "dev:h5": "npm run build:h5 -- --watch"
+  },
+  "keywords": [
+    "taro",
+    "charts",
+    "visualization",
+    "VChart",
+    "animation",
+    "storytelling",
+    "VisActor",
+    "graphics",
+    "interaction"
+  ],
+  "homepage": "",
+  "bugs": "https://github.com/VisActor/VChart/issues",
+  "repository": {
+    "type": "git",
+    "url": "GitHub - VisActor/VChart: The chart library for web and multi-platform",
+    "directory": "packages/taro-vchart"
+  },
+  "author": {
+    "name": "VisActor",
+    "url": "https://VisActor.io/"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@visactor/vchart": "workspace:1.1.0-beta.1"
+  },
+  "devDependencies": {
+    "@internal/bundler": "workspace:*",
+    "@internal/eslint-config": "workspace:*",
+    "@internal/ts-config": "workspace:*",
+    "@rushstack/eslint-patch": "~1.1.4",
+    "@vitejs/plugin-react": "3.1.0",
+    "eslint": "~8.18.0",
+    "vite": "3.2.6",
+    "typescript": "4.9.5",
+    "@babel/core": "7.20.12",
+    "@babel/runtime": "7.17.0",
+    "@rollup/plugin-typescript": "11.1.0",
+    "@tarojs/cli": "3.3.17",
+    "@tarojs/components": "3.3.17",
+    "@tarojs/mini-runner": "3.3.17",
+    "@tarojs/plugin-platform-lark": "^1.0.4",
+    "@tarojs/react": "3.3.17",
+    "@tarojs/runtime": "3.3.17",
+    "@tarojs/taro": "3.3.17",
+    "@tarojs/webpack-runner": "3.3.17",
+    "@types/react": "^18.0.0",
+    "@types/webpack-env": "^1.13.6",
+    "@typescript-eslint/eslint-plugin": "5.30.0",
+    "@typescript-eslint/parser": "5.30.0",
+    "@tarojs/plugin-platform-alipay": "3.3.17",
+    "@tarojs/plugin-platform-jd": "3.3.17",
+    "@tarojs/plugin-platform-qq": "3.3.17",
+    "@tarojs/plugin-platform-swan": "3.3.17",
+    "@tarojs/plugin-platform-tt": "3.3.17",
+    "@tarojs/plugin-platform-weapp": "3.3.17",
+    "babel-preset-taro": "3.3.17",
+    "eslint-config-taro": "3.3.17",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-react": "7.30.1",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "rollup": "3.20.5",
+    "rollup-plugin-import-css": "^3.0.2",
+    "stylelint": "9.3.0",
+    "tslib": "2.3.1"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}