@agions/taroviz 1.1.0 → 1.2.0

package/package.json

@@ -1,36 +1,118 @@
 {
   "name": "@agions/taroviz",
-  "version": "1.1.0",
-  "description": "TaroViz 是一个基于 Taro 和 ECharts 的图表组件库，支持多端小程序和 H5",
+  "version": "1.2.0",
+  "description": "基于 Taro 和 ECharts 的多端图表组件库",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
-  "sideEffects": false,
   "files": [
     "dist",
-    "README.md"
+    "src",
+    "README.md",
+    "LICENSE"
   ],
   "scripts": {
-    "dev": "webpack --mode=development --watch",
-    "build": "npx webpack --mode=production",
-    "clean": "rimraf dist"
+    "dev": "webpack serve --mode development",
+    "build": "webpack --mode production",
+    "clean": "rimraf dist",
+    "test": "jest",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run",
+    "cypress:component": "cypress open --component",
+    "test:e2e": "cypress run --e2e",
+    "lint": "eslint src --ext .ts,.tsx",
+    "type-check": "tsc --noEmit",
+    "prepare": "husky install",
+    "docs:api": "node scripts/update-docs.js generate",
+    "docs:html": "node scripts/update-docs.js html",
+    "docs:build": "node scripts/update-docs.js all",
+    "docs:serve": "node scripts/update-docs.js serve",
+    "docs:update": "node scripts/update-docs.js",
+    "docs:fix": "node scripts/doc-fix.js",
+    "deps:update": "node scripts/update-deps.js"
   },
-  "publishConfig": {
-    "access": "public"
+  "devDependencies": {
+    "@babel/plugin-proposal-decorators": "^7.25.9",
+    "@babel/plugin-transform-runtime": "^7.28.5",
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.27.0",
+    "@testing-library/cypress": "^10.1.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.11.24",
+    "@types/react": "^18.2.61",
+    "@types/react-dom": "^18.3.7",
+    "@types/testing-library__jest-dom": "^5.14.9",
+    "@typescript-eslint/eslint-plugin": "^7.1.0",
+    "@typescript-eslint/parser": "^7.1.0",
+    "babel-loader": "^10.0.0",
+    "clean-webpack-plugin": "^4.0.0",
+    "core-js": "3.41.0",
+    "css-loader": "^7.1.2",
+    "cypress": "^15.7.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-typescript": "^4.3.2",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "fork-ts-checker-webpack-plugin": "^9.1.0",
+    "glob": "^10.3.10",
+    "husky": "^9.0.11",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "lint-staged": "^15.2.2",
+    "marked": "^12.0.2",
+    "mini-css-extract-plugin": "^2.9.2",
+    "prettier": "^3.2.5",
+    "react-dom": "^18.3.1",
+    "rimraf": "^5.0.5",
+    "sass": "^1.86.3",
+    "sass-loader": "^16.0.5",
+    "terser-webpack-plugin": "^5.3.14",
+    "ts-jest": "^29.1.2",
+    "ts-loader": "^9.5.2",
+    "typedoc": "^0.28.2",
+    "typedoc-plugin-markdown": "^3.17.1",
+    "typescript": "^5.3.3",
+    "webpack": "^5.90.3",
+    "webpack-bundle-analyzer": "^4.10.2",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4",
+    "whatwg-fetch": "^3.6.20"
   },
   "dependencies": {
-    "@agions/taroviz-adapters": "1.1.0",
-    "@agions/taroviz-charts": "1.1.0",
-    "@agions/taroviz-core": "1.1.0",
-    "@agions/taroviz-data": "1.1.0",
-    "@agions/taroviz-hooks": "1.1.0",
-    "@agions/taroviz-themes": "1.1.0"
+    "@babel/runtime": "^7.28.4",
+    "echarts": "^5.4.3",
+    "react": "^18.2.0"
   },
   "peerDependencies": {
-    "@tarojs/components": ">=3.4.0",
-    "@tarojs/taro": ">=3.4.0",
-    "echarts": ">=5.4.0",
-    "react": ">=16.13.0"
+    "@tarojs/components": "^3.6.0",
+    "@tarojs/runtime": "^3.6.0",
+    "@tarojs/taro": "^3.6.0"
   },
-  "gitHead": "448ea59888a6b5731ffb6eac4478d088de799fed"
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "keywords": [
+    "taro",
+    "echarts",
+    "chart",
+    "component",
+    "multi-platform"
+  ],
+  "author": "TaroViz Team",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/agions/taroviz.git"
+  },
+  "homepage": "https://agions.github.io/taroviz/",
+  "bugs": {
+    "url": "https://github.com/agions/taroviz/issues"
+  }
 }

package/src/__tests__/integration.test.tsx

@@ -0,0 +1,168 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import { LineChart } from '../charts';
+
+// Mock ECharts and adapters
+jest.mock('echarts/core', () => ({
+  use: jest.fn(),
+  init: jest.fn(() => ({
+    setOption: jest.fn(),
+    showLoading: jest.fn(),
+    hideLoading: jest.fn(),
+    on: jest.fn(),
+    off: jest.fn(),
+    dispose: jest.fn(),
+    resize: jest.fn(),
+  })),
+  getInstanceByDom: jest.fn(),
+}));
+
+// Mock specific ECharts chart imports
+jest.mock('echarts/charts', () => ({
+  LineChart: jest.fn(),
+  BarChart: jest.fn(),
+  PieChart: jest.fn(),
+}));
+
+jest.mock('echarts/components', () => ({
+  GridComponent: jest.fn(),
+  TooltipComponent: jest.fn(),
+  TitleComponent: jest.fn(),
+  LegendComponent: jest.fn(),
+}));
+
+jest.mock('../adapters', () => ({
+  getAdapter: jest.fn(() => ({
+    init: jest.fn(),
+    setOption: jest.fn(),
+    resize: jest.fn(),
+    dispose: jest.fn(),
+    on: jest.fn(),
+    off: jest.fn(),
+    showLoading: jest.fn(),
+    hideLoading: jest.fn(),
+  })),
+}));
+
+jest.mock('../charts/common/BaseChartWrapper', () => ({
+  __esModule: true,
+  default: (props: any) => (
+    <div
+      data-testid="base-chart-wrapper"
+      className={`taroviz-${props.chartType}`}
+      style={{ width: props.width, height: props.height }}
+    >
+      <div data-testid="chart-option">{JSON.stringify(props.option)}</div>
+      <div data-testid="chart-loading">{props.loading ? 'loading' : 'not-loading'}</div>
+    </div>
+  ),
+}));
+
+describe('Integration Tests', () => {
+  describe('Chart Rendering Flow', () => {
+    it('should render a complete chart with all components', () => {
+      const mockOption = {
+        xAxis: { type: 'category' as const, data: ['Mon', 'Tue', 'Wed'] },
+        yAxis: { type: 'value' as const },
+        series: [{ data: [120, 200, 150], type: 'line' as const }],
+      };
+
+      const { getByTestId } = render(
+        <LineChart option={mockOption} width="500px" height="300px" loading={false} />
+      );
+
+      const chartWrapper = getByTestId('base-chart-wrapper');
+      const chartOption = getByTestId('chart-option');
+      const chartLoading = getByTestId('chart-loading');
+
+      expect(chartWrapper).toBeInTheDocument();
+      expect(chartWrapper).toHaveClass('taroviz-line-chart');
+      expect(chartOption).toHaveTextContent(JSON.stringify(mockOption));
+      expect(chartLoading).toHaveTextContent('not-loading');
+    });
+
+    it('should handle chart option updates', () => {
+      const initialOption = {
+        xAxis: { type: 'category' as const, data: ['Mon', 'Tue', 'Wed'] },
+        yAxis: { type: 'value' as const },
+        series: [{ data: [120, 200, 150], type: 'line' as const }],
+      };
+
+      const updatedOption = {
+        xAxis: { type: 'category' as const, data: ['Mon', 'Tue', 'Wed', 'Thu'] },
+        yAxis: { type: 'value' as const },
+        series: [{ data: [120, 200, 150, 250], type: 'line' as const }],
+      };
+
+      const { getByTestId, rerender } = render(
+        <LineChart option={initialOption} width="500px" height="300px" />
+      );
+
+      // Check initial rendering
+      let chartOption = getByTestId('chart-option');
+      expect(chartOption).toHaveTextContent(JSON.stringify(initialOption));
+
+      // Update option and check
+      rerender(<LineChart option={updatedOption} width="500px" height="300px" />);
+
+      chartOption = getByTestId('chart-option');
+      expect(chartOption).toHaveTextContent(JSON.stringify(updatedOption));
+    });
+
+    it('should handle loading state changes', () => {
+      const mockOption = {
+        xAxis: { type: 'category' as const, data: ['Mon', 'Tue', 'Wed'] },
+        yAxis: { type: 'value' as const },
+        series: [{ data: [120, 200, 150], type: 'line' as const }],
+      };
+
+      const { getByTestId, rerender } = render(<LineChart option={mockOption} loading={false} />);
+
+      // Check initial loading state
+      let chartLoading = getByTestId('chart-loading');
+      expect(chartLoading).toHaveTextContent('not-loading');
+
+      // Update loading state and check
+      rerender(<LineChart option={mockOption} loading={true} />);
+
+      chartLoading = getByTestId('chart-loading');
+      expect(chartLoading).toHaveTextContent('loading');
+    });
+
+    it('should render different chart types with consistent API', () => {
+      // Test LineChart
+      const lineOption = {
+        xAxis: { type: 'category' as const, data: ['Mon', 'Tue', 'Wed'] },
+        yAxis: { type: 'value' as const },
+        series: [{ data: [120, 200, 150], type: 'line' as const }],
+      };
+
+      const { getByTestId: getLineChart } = render(
+        <LineChart option={lineOption} width="400px" height="200px" />
+      );
+
+      const lineChartWrapper = getLineChart('base-chart-wrapper');
+      expect(lineChartWrapper).toBeInTheDocument();
+      expect(lineChartWrapper).toHaveClass('taroviz-line-chart');
+    });
+  });
+
+  describe('Chart Event Handling', () => {
+    it('should pass events to chart instance', () => {
+      const mockOption = {
+        xAxis: { type: 'category' as const, data: ['Mon', 'Tue', 'Wed'] },
+        yAxis: { type: 'value' as const },
+        series: [{ data: [120, 200, 150], type: 'line' as const }],
+      };
+
+      const mockOnClick = jest.fn();
+
+      render(<LineChart option={mockOption} onEvents={{ click: mockOnClick }} />);
+
+      // The event should be passed to the chart instance via BaseChartWrapper
+      // We can verify this by checking that the BaseChartWrapper received the onEvents prop
+      // In our mock, this is handled by the getAdapter mock
+    });
+  });
+});

package/src/adapters/__tests__/index.test.ts

@@ -0,0 +1,91 @@
+import { PlatformType } from '../../core';
+import { detectPlatform, getEnv, getAdapter } from '../index';
+
+// Mock dependencies
+jest.mock('../h5', () => ({
+  default: {
+    create: jest.fn(() => ({
+      init: jest.fn(),
+      setOption: jest.fn(),
+      resize: jest.fn(),
+      dispose: jest.fn(),
+    })),
+  },
+}));
+
+jest.mock('../weapp', () => ({
+  default: {
+    create: jest.fn(() => ({
+      init: jest.fn(),
+      setOption: jest.fn(),
+      resize: jest.fn(),
+      dispose: jest.fn(),
+    })),
+  },
+}));
+
+describe('Adapter Functions', () => {
+  describe('getEnv', () => {
+    it('should return h5 for browser environment', () => {
+      const env = getEnv();
+      expect(env).toBe('h5');
+    });
+  });
+
+  describe('getAdapter', () => {
+    it('should return adapter instance for browser environment', () => {
+      const adapter = getAdapter({});
+      expect(adapter).toBeDefined();
+      expect(typeof adapter.init).toBe('function');
+      expect(typeof adapter.setOption).toBe('function');
+    });
+
+    it('should return adapter instance with custom options', () => {
+      const mockOptions = {
+        width: 500,
+        height: 300,
+        theme: 'dark',
+        renderer: 'canvas' as const,
+      };
+
+      const adapter = getAdapter(mockOptions);
+      expect(adapter).toBeDefined();
+      expect(typeof adapter.init).toBe('function');
+    });
+  });
+
+  describe('detectPlatform', () => {
+    it('should return H5 by default', () => {
+      const platform = detectPlatform();
+      expect(platform).toBe(PlatformType.H5);
+    });
+  });
+
+  describe('Cross-Platform Compatibility', () => {
+    it('should have consistent interface across all platforms', () => {
+      const adapter = getAdapter({});
+
+      // 确保所有平台的适配器都有相同的方法接口
+      const requiredMethods = ['init', 'setOption', 'resize', 'dispose'];
+
+      requiredMethods.forEach(method => {
+        expect(typeof adapter[method as keyof typeof adapter]).toBe('function');
+      });
+    });
+
+    it('should handle different option types across platforms', () => {
+      // 测试不同类型的选项
+      const testOptions = [
+        { width: 500, height: 300 },
+        { theme: 'dark' },
+        { renderer: 'canvas' as const },
+        { renderer: 'svg' as const },
+      ];
+
+      testOptions.forEach(options => {
+        const adapter = getAdapter(options);
+        expect(adapter).toBeDefined();
+      });
+    });
+  });
+});

package/src/adapters/h5/__tests__/index.test.ts

@@ -0,0 +1,156 @@
+import * as echarts from 'echarts/core';
+
+import H5Adapter from '../index';
+
+// Mock ECharts renderers first
+jest.mock('echarts/renderers', () => ({
+  CanvasRenderer: jest.fn(),
+  SVGRenderer: jest.fn(),
+}));
+
+// Mock ECharts components
+jest.mock('echarts/components', () => ({
+  GridComponent: jest.fn(),
+  TooltipComponent: jest.fn(),
+  TitleComponent: jest.fn(),
+  LegendComponent: jest.fn(),
+}));
+
+// Mock ECharts charts
+jest.mock('echarts/charts', () => ({
+  LineChart: jest.fn(),
+  BarChart: jest.fn(),
+  PieChart: jest.fn(),
+}));
+
+// Mock ECharts
+jest.mock('echarts/core', () => ({
+  init: jest.fn(() => ({
+    setOption: jest.fn(),
+    resize: jest.fn(),
+    on: jest.fn(),
+    off: jest.fn(),
+    showLoading: jest.fn(),
+    hideLoading: jest.fn(),
+    dispose: jest.fn(),
+    getDataURL: jest.fn(() => 'data:image/png;base64,test'),
+    clear: jest.fn(),
+  })),
+  use: jest.fn(),
+}));
+
+describe('H5Adapter', () => {
+  let adapter: H5Adapter;
+  let mockContainer: HTMLElement;
+
+  beforeEach(() => {
+    // Create a mock container
+    mockContainer = document.createElement('div');
+    mockContainer.id = 'test-canvas';
+    document.body.appendChild(mockContainer);
+
+    // Create adapter instance
+    adapter = H5Adapter.create({
+      canvasId: 'test-canvas',
+      width: 500,
+      height: 300,
+      theme: 'dark',
+      renderer: 'canvas',
+    });
+  });
+
+  afterEach(() => {
+    // Clean up
+    document.body.removeChild(mockContainer);
+  });
+
+  describe('initialization', () => {
+    it('should create an instance with correct options', () => {
+      expect(adapter).toBeInstanceOf(H5Adapter);
+    });
+
+    it('should initialize the chart instance', () => {
+      const instance = adapter.init();
+      expect(instance).toBeDefined();
+      expect(echarts.init).toHaveBeenCalled();
+    });
+  });
+
+  describe('chart operations', () => {
+    it('should set chart options', () => {
+      const mockOption = {
+        xAxis: { type: 'category' as const, data: ['Mon', 'Tue'] },
+        yAxis: { type: 'value' as const },
+        series: [{ data: [120, 200], type: 'line' as const }],
+      };
+
+      adapter.setOption(mockOption);
+
+      // After initialization, setOption should be called on the instance
+      const _instance = adapter.init();
+      adapter.setOption(mockOption);
+    });
+
+    it('should handle theme setting', () => {
+      adapter.setTheme('light');
+      expect(adapter['options'].theme).toBe('light');
+    });
+
+    it('should resize the chart', () => {
+      const _instance = adapter.init();
+      adapter.resize();
+    });
+
+    it('should show and hide loading', () => {
+      const _instance = adapter.init();
+      adapter.showLoading();
+      adapter.hideLoading();
+    });
+
+    it('should convert chart to data URL', () => {
+      const _instance = adapter.init();
+      const dataUrl = adapter.convertToDataURL();
+      expect(dataUrl).toBeDefined();
+    });
+
+    it('should clear the chart', () => {
+      const _instance = adapter.init();
+      adapter.clear();
+    });
+
+    it('should dispose the chart', () => {
+      const _instance = adapter.init();
+      adapter.dispose();
+    });
+  });
+
+  describe('event handling', () => {
+    it('should bind and unbind events', () => {
+      const _instance = adapter.init();
+      const mockHandler = jest.fn();
+
+      adapter.on('click', mockHandler);
+      adapter.off('click', mockHandler);
+    });
+  });
+
+  describe('adapter information', () => {
+    it('should return adapter name', () => {
+      expect(adapter.getName()).toBe('H5Adapter');
+    });
+
+    it('should return adapter version', () => {
+      expect(adapter.getVersion()).toBe('1.1.1');
+    });
+
+    it('should return platform info', () => {
+      const platformInfo = adapter.getPlatformInfo();
+      expect(platformInfo).toEqual(
+        expect.objectContaining({
+          platform: 'h5',
+          renderer: 'canvas',
+        })
+      );
+    });
+  });
+});