From cf75b444775057f0a02180029057a85b58222160 Mon Sep 17 00:00:00 2001 From: xiaoluoHe Date: Wed, 26 Jun 2024 15:35:02 +0800 Subject: [PATCH 01/16] feat(theme-converter): initial --- common/config/rush/pnpm-lock.yaml | 211 +++++++++- packages/vchart-theme-converter/.eslintrc.js | 20 + packages/vchart-theme-converter/README.md | 11 + .../vchart-theme-converter/bundler.config.js | 7 + .../vchart-theme-converter/demo/index.html | 13 + .../demo/public/echarts-theme.ts | 361 ++++++++++++++++++ .../demo/public/vite.svg | 1 + .../vchart-theme-converter/demo/src/App.css | 42 ++ .../vchart-theme-converter/demo/src/App.tsx | 20 + .../vchart-theme-converter/demo/src/Chart.tsx | 62 +++ .../vchart-theme-converter/demo/src/index.css | 17 + .../vchart-theme-converter/demo/src/main.tsx | 11 + .../demo/src/spec/echarts/line.ts | 83 ++++ .../demo/src/spec/vchart/line.ts | 85 +++++ .../demo/src/vite-env.d.ts | 1 + .../vchart-theme-converter/demo/tsconfig.json | 32 ++ .../demo/tsconfig.node.json | 10 + .../demo/vite.config.ts | 13 + packages/vchart-theme-converter/package.json | 97 +++++ .../src/echarts/README.md | 53 +++ .../src/echarts/component/axis.ts | 206 ++++++++++ .../src/echarts/component/discreteLegend.ts | 91 +++++ .../src/echarts/component/title.ts | 37 ++ .../src/echarts/component/tooltip.ts | 40 ++ .../src/echarts/componentConverter.ts | 33 ++ .../src/echarts/convertMap.ts | 73 ++++ .../src/echarts/index.ts | 46 +++ .../src/echarts/series/area.ts | 29 ++ .../src/echarts/series/line.ts | 59 +++ .../src/echarts/seriesConverter.ts | 32 ++ .../src/echarts/textStyleConverter.ts | 15 + .../src/echarts/utils.ts | 30 ++ .../vchart-theme-converter/src/global.d.ts | 1 + packages/vchart-theme-converter/src/index.ts | 1 + .../vchart-theme-converter/src/util/color.ts | 76 ++++ .../vchart-theme-converter/src/util/token.ts | 32 ++ .../tsconfig.eslint.json | 11 + packages/vchart-theme-converter/tsconfig.json | 10 + rush.json | 7 +- share/eslint-config/profile/common.js | 296 +++++++------- 40 files changed, 2104 insertions(+), 171 deletions(-) create mode 100644 packages/vchart-theme-converter/.eslintrc.js create mode 100644 packages/vchart-theme-converter/README.md create mode 100644 packages/vchart-theme-converter/bundler.config.js create mode 100644 packages/vchart-theme-converter/demo/index.html create mode 100644 packages/vchart-theme-converter/demo/public/echarts-theme.ts create mode 100644 packages/vchart-theme-converter/demo/public/vite.svg create mode 100644 packages/vchart-theme-converter/demo/src/App.css create mode 100644 packages/vchart-theme-converter/demo/src/App.tsx create mode 100644 packages/vchart-theme-converter/demo/src/Chart.tsx create mode 100644 packages/vchart-theme-converter/demo/src/index.css create mode 100644 packages/vchart-theme-converter/demo/src/main.tsx create mode 100644 packages/vchart-theme-converter/demo/src/spec/echarts/line.ts create mode 100644 packages/vchart-theme-converter/demo/src/spec/vchart/line.ts create mode 100644 packages/vchart-theme-converter/demo/src/vite-env.d.ts create mode 100644 packages/vchart-theme-converter/demo/tsconfig.json create mode 100644 packages/vchart-theme-converter/demo/tsconfig.node.json create mode 100644 packages/vchart-theme-converter/demo/vite.config.ts create mode 100644 packages/vchart-theme-converter/package.json create mode 100644 packages/vchart-theme-converter/src/echarts/README.md create mode 100644 packages/vchart-theme-converter/src/echarts/component/axis.ts create mode 100644 packages/vchart-theme-converter/src/echarts/component/discreteLegend.ts create mode 100644 packages/vchart-theme-converter/src/echarts/component/title.ts create mode 100644 packages/vchart-theme-converter/src/echarts/component/tooltip.ts create mode 100644 packages/vchart-theme-converter/src/echarts/componentConverter.ts create mode 100644 packages/vchart-theme-converter/src/echarts/convertMap.ts create mode 100644 packages/vchart-theme-converter/src/echarts/index.ts create mode 100644 packages/vchart-theme-converter/src/echarts/series/area.ts create mode 100644 packages/vchart-theme-converter/src/echarts/series/line.ts create mode 100644 packages/vchart-theme-converter/src/echarts/seriesConverter.ts create mode 100644 packages/vchart-theme-converter/src/echarts/textStyleConverter.ts create mode 100644 packages/vchart-theme-converter/src/echarts/utils.ts create mode 100644 packages/vchart-theme-converter/src/global.d.ts create mode 100644 packages/vchart-theme-converter/src/index.ts create mode 100644 packages/vchart-theme-converter/src/util/color.ts create mode 100644 packages/vchart-theme-converter/src/util/token.ts create mode 100644 packages/vchart-theme-converter/tsconfig.eslint.json create mode 100644 packages/vchart-theme-converter/tsconfig.json diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index 22fc46b..def474c 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -293,6 +293,153 @@ importers: typescript: 4.9.5 vite: 4.5.3_@types+node@20.12.7 + ../../packages/vchart-theme-converter: + specifiers: + '@arco-design/color': ^0.4.0 + '@arco-design/web-react': ^2.32.2 + '@arco-design/webpack-plugin': ^1.6.0 + '@arco-plugins/vite-plugin-svgr': ^0.7.2 + '@arco-themes/react-arco-pro': ^0.0.7 + '@babel/runtime': latest + '@esbuild-plugins/node-globals-polyfill': 0.1.1 + '@esbuild-plugins/node-modules-polyfill': 0.1.4 + '@internal/bundler': workspace:* + '@internal/chart-demo': workspace:* + '@internal/eslint-config': workspace:* + '@internal/jest-config': workspace:* + '@internal/ts-config': workspace:* + '@jest/globals': ~29.5.0 + '@loadable/component': ^5.13.2 + '@rushstack/eslint-patch': ~1.1.4 + '@svgr/webpack': ^5.5.0 + '@types/echarts': 4.9.22 + '@types/jest': ~29.5.0 + '@types/node': '*' + '@types/offscreencanvas': 2019.6.4 + '@types/react': ^17.0.0 + '@types/react-dom': ^17.0.0 + '@typescript-eslint/eslint-plugin': 5.30.0 + '@typescript-eslint/parser': 5.30.0 + '@visactor/react-vchart': 1.11.0 + '@visactor/vchart': 1.11.0 + '@visactor/vchart-semi-theme': workspace:1.11.4 + '@visactor/vutils': ~0.18.9 + '@vitejs/plugin-react': ^4.1.1 + '@vitejs/plugin-react-swc': ^3.4.1 + classnames: ^2.3.1 + copy-to-clipboard: ^3.3.1 + echarts: 5.5.0 + eslint: ~8.18.0 + eslint-config-prettier: 8.5.0 + eslint-plugin-babel: ^5.3.1 + eslint-plugin-prettier: ^4.0.0 + eslint-plugin-react: 7.30.1 + eslint-plugin-react-hooks: 4.6.0 + husky: 7.0.4 + jest: ~29.5.0 + less: 4.1.3 + less-loader: 7.3.0 + lint-staged: 12.3.7 + lodash: 4.17.21 + magic-string: ^0.25.7 + nprogress: ^0.2.0 + postcss-less: '4' + prettier: 2.6.1 + pretty-quick: ^3.1.2 + query-string: ^6.13.8 + react: ^18.0.0 + react-color: ^2.18.1 + react-device-detect: ^2.2.2 + react-dom: ^18.0.0 + react-redux: ^7.2.6 + react-router: ^5.2.0 + react-router-dom: ^5.2.0 + redux: ^4.1.2 + stylelint: ^14.1.0 + stylelint-config-prettier: ^9.0.3 + stylelint-config-standard: ^24.0.0 + ts-jest: ~29.1.0 + ts-loader: 8.0.2 + ts-node: 10.9.0 + tslib: 2.3.1 + tslint: 5.12.1 + typescript: 4.9.5 + vite: ^4.5.0 + vite-plugin-svgr: ^4.1.0 + dependencies: + '@visactor/vchart-semi-theme': link:../vchart-semi-theme + '@visactor/vutils': 0.18.9 + devDependencies: + '@arco-design/color': 0.4.0 + '@arco-design/web-react': 2.61.2_42iwexueogtmu5amowprdpoisy + '@arco-design/webpack-plugin': 1.7.0 + '@arco-plugins/vite-plugin-svgr': 0.7.2_vite@4.5.3 + '@arco-themes/react-arco-pro': 0.0.7_pa7uxehr42623f73endqjggywi + '@babel/runtime': 7.24.7 + '@esbuild-plugins/node-globals-polyfill': 0.1.1 + '@esbuild-plugins/node-modules-polyfill': 0.1.4 + '@internal/bundler': link:../../tools/bundler + '@internal/chart-demo': link:../../share/chart-demo + '@internal/eslint-config': link:../../share/eslint-config + '@internal/jest-config': link:../../share/jest-config + '@internal/ts-config': link:../../share/ts-config + '@jest/globals': 29.5.0 + '@loadable/component': 5.16.3_react@18.2.0 + '@rushstack/eslint-patch': 1.1.4 + '@svgr/webpack': 5.5.0 + '@types/echarts': 4.9.22 + '@types/jest': 29.5.12 + '@types/node': 20.12.7 + '@types/offscreencanvas': 2019.6.4 + '@types/react': 17.0.80 + '@types/react-dom': 17.0.25 + '@typescript-eslint/eslint-plugin': 5.30.0_cow5zg7tx6c3eisi5a4ud5kwia + '@typescript-eslint/parser': 5.30.0_vwud3sodsb5zxmzckoj7rdwdbq + '@visactor/react-vchart': 1.11.0_biqbaboplfbrettd7655fr4n2y + '@visactor/vchart': 1.11.0 + '@vitejs/plugin-react': 4.2.1_vite@4.5.3 + '@vitejs/plugin-react-swc': 3.6.0_vite@4.5.3 + classnames: 2.5.1 + copy-to-clipboard: 3.3.3 + echarts: 5.5.0 + eslint: 8.18.0 + eslint-config-prettier: 8.5.0_eslint@8.18.0 + eslint-plugin-babel: 5.3.1_eslint@8.18.0 + eslint-plugin-prettier: 4.2.1_ollsvcshtsdnwd6q5dk6p5tq5m + eslint-plugin-react: 7.30.1_eslint@8.18.0 + eslint-plugin-react-hooks: 4.6.0_eslint@8.18.0 + husky: 7.0.4 + jest: 29.5.0_nfgaym6ygctcxvhgdn7jfhc2pq + less: 4.1.3 + less-loader: 7.3.0_less@4.1.3 + lint-staged: 12.3.7 + lodash: 4.17.21 + magic-string: 0.25.9 + nprogress: 0.2.0 + postcss-less: 4.0.1 + prettier: 2.6.1 + pretty-quick: 3.3.1_prettier@2.6.1 + query-string: 6.14.1 + react: 18.2.0 + react-color: 2.19.3_react@18.2.0 + react-device-detect: 2.2.3_biqbaboplfbrettd7655fr4n2y + react-dom: 18.2.0_react@18.2.0 + react-redux: 7.2.9_biqbaboplfbrettd7655fr4n2y + react-router: 5.3.4_react@18.2.0 + react-router-dom: 5.3.4_react@18.2.0 + redux: 4.2.1 + stylelint: 14.16.1 + stylelint-config-prettier: 9.0.5_stylelint@14.16.1 + stylelint-config-standard: 24.0.0_stylelint@14.16.1 + ts-jest: 29.1.2_doipufordlnvh5g4adbwayvyvy + ts-loader: 8.0.2_typescript@4.9.5 + ts-node: 10.9.0_misjo77sqtw74jgpkxp7bulu2q + tslib: 2.3.1 + tslint: 5.12.1_typescript@4.9.5 + typescript: 4.9.5 + vite: 4.5.3_bby3wderf736tel7qp3evndmrm + vite-plugin-svgr: 4.2.0_phsvvvlejkpjhjvgxznbnrvcoa + ../../packages/vchart-theme-demo-component: specifiers: '@arco-design/web-react': ^2.32.2 @@ -3875,6 +4022,12 @@ packages: '@types/ms': 0.7.31 dev: true + /@types/echarts/4.9.22: + resolution: {integrity: sha512-7Fo6XdWpoi8jxkwP7BARUOM7riq8bMhmsCtSG8gzUcJmFhLo387tihoBYS/y5j7jl3PENT5RxeWZdN9RiwO7HQ==} + dependencies: + '@types/zrender': 4.0.6 + dev: true + /@types/estree/1.0.5: resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==} @@ -4108,6 +4261,10 @@ packages: dependencies: '@types/yargs-parser': 21.0.0 + /@types/zrender/4.0.6: + resolution: {integrity: sha512-1jZ9bJn2BsfmYFPBHtl5o3uV+ILejAtGrDcYSpT4qaVKEI/0YY+arw3XHU04Ebd8Nca3SQ7uNcLaqiL+tTFVMg==} + dev: true + /@typescript-eslint/eslint-plugin/5.30.0_cow5zg7tx6c3eisi5a4ud5kwia: resolution: {integrity: sha512-lvhRJ2pGe2V9MEU46ELTdiHgiAFZPKtLhiU5wlnaYpMc2+c1R8fh8i80ZAa665drvjHKUJyRRGg3gEm1If54ow==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -4236,7 +4393,7 @@ packages: '@visactor/vgrammar-core': 0.13.2 '@visactor/vrender-core': 0.19.0 '@visactor/vrender-kits': 0.19.0 - '@visactor/vutils': 0.18.6 + '@visactor/vutils': 0.18.9 react: 18.2.0 react-dom: 18.2.0_react@18.2.0 react-is: 18.2.0 @@ -4261,7 +4418,7 @@ packages: '@visactor/vrender-core': 0.19.0 '@visactor/vrender-kits': 0.19.0 '@visactor/vscale': 0.18.6 - '@visactor/vutils': 0.18.6 + '@visactor/vutils': 0.18.9 '@visactor/vutils-extension': 1.11.0_7qcgcpuz2j5tzhxzhxchuz72qy /@visactor/vchart/1.11.6: @@ -4335,7 +4492,7 @@ packages: resolution: {integrity: sha512-mvIJa8V7zVnfOrKDc6v4XLXo5h0vJoPG/US4nakSX+EK4cODbiQg0TCOsJQDHntPRdXx20A5EGp3mRoIOHM6sw==} dependencies: '@visactor/vgrammar-util': 0.13.2 - '@visactor/vutils': 0.18.6 + '@visactor/vutils': 0.18.9 /@visactor/vgrammar-core/0.13.11: resolution: {integrity: sha512-/xYwdqB0qKpJRoAYWq8FybEyhWwHhreIYZUCO0FGpBdffim8tweEgZvbQrkM6yx9daFnhLnRwTnSyZ0c49ZBvQ==} @@ -4359,7 +4516,7 @@ packages: '@visactor/vrender-core': 0.19.0 '@visactor/vrender-kits': 0.19.0 '@visactor/vscale': 0.18.6 - '@visactor/vutils': 0.18.6 + '@visactor/vutils': 0.18.9 /@visactor/vgrammar-hierarchy/0.13.11: resolution: {integrity: sha512-N0Kl0VZLS6q75KmXaCWSFmGWmXGuyuPvGRCQZs3oeJu/lnYZDibfu5sn02jVTzJfkxH29lauO2DuqtZBlLV8cA==} @@ -4377,7 +4534,7 @@ packages: '@visactor/vgrammar-util': 0.13.2 '@visactor/vrender-core': 0.19.0 '@visactor/vrender-kits': 0.19.0 - '@visactor/vutils': 0.18.6 + '@visactor/vutils': 0.18.9 /@visactor/vgrammar-projection/0.13.11: resolution: {integrity: sha512-YMF08v4O6oTyv1x/WHw/rKFjal+JdIgDNqQSGRkNld82kZzCEUu/TbfduUQOmGX0IG6oGIwihyUcMi9zbprLJQ==} @@ -4392,7 +4549,7 @@ packages: dependencies: '@visactor/vgrammar-core': 0.13.2 '@visactor/vgrammar-util': 0.13.2 - '@visactor/vutils': 0.18.6 + '@visactor/vutils': 0.18.9 d3-geo: 1.12.1 /@visactor/vgrammar-sankey/0.13.11: @@ -4411,7 +4568,7 @@ packages: '@visactor/vgrammar-util': 0.13.2 '@visactor/vrender-core': 0.19.0 '@visactor/vrender-kits': 0.19.0 - '@visactor/vutils': 0.18.6 + '@visactor/vutils': 0.18.9 /@visactor/vgrammar-util/0.13.11: resolution: {integrity: sha512-fzQC2b1NzrmdOVkOX1m/ze00XKg0pbPSHoDdYghsAf8RPjVq6/Ho2WYXjQ2NETGppxCsZiXLIgHU9VbWGzbsWg==} @@ -4421,7 +4578,7 @@ packages: /@visactor/vgrammar-util/0.13.2: resolution: {integrity: sha512-UIGLsoFP0q9NcLSfDiSGLIZ6QzB5kOyP8AHqqktZs08bPgqisbobyVtl6zuGVuwsQZBKf1i50knLX1Lnb+sOcw==} dependencies: - '@visactor/vutils': 0.18.6 + '@visactor/vutils': 0.18.9 /@visactor/vgrammar-venn/0.13.11: resolution: {integrity: sha512-IeEsK8RVL1aJOlq1X5DSg+EPktP2+R59OpKZMNN6zcAIKJqQp1/i2PadAa5JbbFb8lQWCXRdQcu+TaDNBk/Ypg==} @@ -4439,7 +4596,7 @@ packages: '@visactor/vgrammar-util': 0.13.2 '@visactor/vrender-core': 0.19.0 '@visactor/vrender-kits': 0.19.0 - '@visactor/vutils': 0.18.6 + '@visactor/vutils': 0.18.9 /@visactor/vgrammar-wordcloud-shape/0.13.11: resolution: {integrity: sha512-ytfTtGtJD39UtiDRadb7PcQPatjgrXXBtYj02ix/7K/dNRNOi2ryDADrxkdDim4fKt/8oQMke+CWuWFcqeL6hg==} @@ -4459,7 +4616,7 @@ packages: '@visactor/vrender-core': 0.19.0 '@visactor/vrender-kits': 0.19.0 '@visactor/vscale': 0.18.6 - '@visactor/vutils': 0.18.6 + '@visactor/vutils': 0.18.9 /@visactor/vgrammar-wordcloud/0.13.11: resolution: {integrity: sha512-aQ9TjHB2syZ4/SG9Q9cteonE50rLWQo5LDcLOkdO635Nhwp6bRnAfHf2Tfhk1RKMvFw25AgBtj4AgjvZUG2J9g==} @@ -4477,7 +4634,7 @@ packages: '@visactor/vgrammar-util': 0.13.2 '@visactor/vrender-core': 0.19.0 '@visactor/vrender-kits': 0.19.0 - '@visactor/vutils': 0.18.6 + '@visactor/vutils': 0.18.9 /@visactor/vrender-components/0.19.0: resolution: {integrity: sha512-J+Dtw727xVKg+7tTAbFkaM6AzNVdx0ZEXaGH4JYbhGTC6S6gO7rn8X+vGO2l/vilt4MfEWYAhRuGwZkJToiAxA==} @@ -4485,7 +4642,7 @@ packages: '@visactor/vrender-core': 0.19.0 '@visactor/vrender-kits': 0.19.0 '@visactor/vscale': 0.17.5 - '@visactor/vutils': 0.18.6 + '@visactor/vutils': 0.18.9 /@visactor/vrender-components/0.19.14: resolution: {integrity: sha512-QusN+J3hvFBLPbpmlpnTmN4CVKRYZ6TtP4tTVP1emgcMx5NNz34qkiF+B7+oaR70yHQR8oKT7Za/vH+tarMpmQ==} @@ -4498,7 +4655,7 @@ packages: /@visactor/vrender-core/0.19.0: resolution: {integrity: sha512-LOMg4bySvVXrCcyd8dqsQRvrPcdozOi1trIddslJuiES7bzldniTH0yWaqdysdhIK9dPCryDjOtU0i9nc0bz2w==} dependencies: - '@visactor/vutils': 0.18.6 + '@visactor/vutils': 0.18.9 color-convert: 2.0.1 /@visactor/vrender-core/0.19.14: @@ -4512,7 +4669,7 @@ packages: dependencies: '@resvg/resvg-js': 2.4.1 '@visactor/vrender-core': 0.19.0 - '@visactor/vutils': 0.18.6 + '@visactor/vutils': 0.18.9 roughjs: 4.5.2 /@visactor/vrender-kits/0.19.14: @@ -4548,7 +4705,7 @@ packages: '@visactor/vrender-components': 0.19.0 '@visactor/vrender-core': 0.19.0 '@visactor/vscale': 0.18.6 - '@visactor/vutils': 0.18.6 + '@visactor/vutils': 0.18.9 /@visactor/vutils-extension/1.11.6: resolution: {integrity: sha512-3K1x5YUP0Ct0fWJpmmbir32HQfr3h99WNYh6Fa7QgQst0ftQ1rpbj5UA/c0u88OrZ8T7Q6z8hqPVhrfvlnzF0Q==} @@ -4577,6 +4734,13 @@ packages: '@turf/invariant': 6.5.0 eventemitter3: 4.0.7 + /@visactor/vutils/0.18.9: + resolution: {integrity: sha512-+CPwBATTQUPtXQ0KVXFRz8SCwAY9m5aR9QmtsVqya+mgaay3moFaAPNTbdkLBuZM5ewRYVcv/3fsDxuH+NXfFg==} + dependencies: + '@turf/helpers': 6.5.0 + '@turf/invariant': 6.5.0 + eventemitter3: 4.0.7 + /@vitejs/plugin-react-swc/3.6.0_vite@4.5.3: resolution: {integrity: sha512-XFRbsGgpGxGzEV5i5+vRiro1bwcIaZDIdBRP16qwm+jP68ue/S8FJTBEgOeojtVDYrbSua3XFp71kC8VJE6v+g==} peerDependencies: @@ -6290,6 +6454,13 @@ packages: resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==} dev: true + /echarts/5.5.0: + resolution: {integrity: sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==} + dependencies: + tslib: 2.3.0 + zrender: 5.5.0 + dev: true + /electron-to-chromium/1.4.733: resolution: {integrity: sha512-gUI9nhI2iBGF0OaYYLKOaOtliFMl+Bt1rY7VmEjwxOxqoYLub/D9xmduPEhbw2imE6gYkJKhIE5it+KE2ulVxQ==} @@ -11981,6 +12152,10 @@ packages: /tslib/1.14.1: resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==} + /tslib/2.3.0: + resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==} + dev: true + /tslib/2.3.1: resolution: {integrity: sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==} @@ -12792,3 +12967,9 @@ packages: resolution: {integrity: sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==} engines: {node: '>=12.20'} dev: true + + /zrender/5.5.0: + resolution: {integrity: sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==} + dependencies: + tslib: 2.3.0 + dev: true diff --git a/packages/vchart-theme-converter/.eslintrc.js b/packages/vchart-theme-converter/.eslintrc.js new file mode 100644 index 0000000..e19f2f5 --- /dev/null +++ b/packages/vchart-theme-converter/.eslintrc.js @@ -0,0 +1,20 @@ +require('@rushstack/eslint-patch/modern-module-resolution'); + +module.exports = { + extends: ['@internal/eslint-config/profile/lib'], + overrides: [ + { + files: ['**/demo/**', '**/*.test.ts'], + plugins: ['react'], + // 测试文件允许以下规则 + rules: { + '@typescript-eslint/no-empty-function': 'off', + 'no-console': 'off', + 'dot-notation': 'off', + 'promise/catch-or-return': 'off' + } + } + ], + parserOptions: { tsconfigRootDir: __dirname, project: './tsconfig.eslint.json' }, + ignorePatterns: ['demo/**', 'bundler.config.js'] +}; diff --git a/packages/vchart-theme-converter/README.md b/packages/vchart-theme-converter/README.md new file mode 100644 index 0000000..9ee97d0 --- /dev/null +++ b/packages/vchart-theme-converter/README.md @@ -0,0 +1,11 @@ +# @visactor/vchart-theme-converter + +## Description + + + +## Usage + +```typescript +import { xxx } from '@visactor/vchart-theme-converter'; +``` diff --git a/packages/vchart-theme-converter/bundler.config.js b/packages/vchart-theme-converter/bundler.config.js new file mode 100644 index 0000000..d7f1972 --- /dev/null +++ b/packages/vchart-theme-converter/bundler.config.js @@ -0,0 +1,7 @@ + +/** + * @type {Partial} + */ +module.exports = { + formats: ["cjs", "es", "umd"], +}; diff --git a/packages/vchart-theme-converter/demo/index.html b/packages/vchart-theme-converter/demo/index.html new file mode 100644 index 0000000..0ad27c3 --- /dev/null +++ b/packages/vchart-theme-converter/demo/index.html @@ -0,0 +1,13 @@ + + + + + + + VChart Theme Converter + + +
+ + + diff --git a/packages/vchart-theme-converter/demo/public/echarts-theme.ts b/packages/vchart-theme-converter/demo/public/echarts-theme.ts new file mode 100644 index 0000000..531dcff --- /dev/null +++ b/packages/vchart-theme-converter/demo/public/echarts-theme.ts @@ -0,0 +1,361 @@ +export const ECTheme = { + color: ['blue', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'], + backgroundColor: 'rgba(0, 0, 0, 0)', + textStyle: {}, + title: { + textStyle: { + color: '#464646' + }, + subtextStyle: { + color: '#6E7079' + } + }, + series: { + line: { + itemStyle: { + borderWidth: 10 + }, + lineStyle: { + width: 10 + }, + symbolSize: 40, + symbol: 'roundRect', + smooth: false + } + }, + // line: { + // itemStyle: { + // borderWidth: 10 + // }, + // lineStyle: { + // width: 10 + // }, + // symbolSize: 40, + // symbol: 'emptyCircle', + // smooth: false + // }, + radar: { + itemStyle: { + borderWidth: 1 + }, + lineStyle: { + width: 2 + }, + symbolSize: 4, + symbol: 'emptyCircle', + smooth: false + }, + bar: { + itemStyle: { + barBorderWidth: 0, + barBorderColor: '#ccc' + } + }, + pie: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + } + }, + scatter: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + } + }, + boxplot: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + } + }, + parallel: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + } + }, + sankey: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + } + }, + funnel: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + } + }, + gauge: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + } + }, + candlestick: { + itemStyle: { + color: '#eb5454', + color0: '#47b262', + borderColor: '#eb5454', + borderColor0: '#47b262', + borderWidth: 1 + } + }, + graph: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + }, + lineStyle: { + width: 1, + color: '#aaa' + }, + symbolSize: 4, + symbol: 'emptyCircle', + smooth: false, + color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'], + label: { + color: '#eee' + } + }, + map: { + itemStyle: { + areaColor: '#eee', + borderColor: '#444', + borderWidth: 0.5 + }, + label: { + color: '#000' + }, + emphasis: { + itemStyle: { + areaColor: 'rgba(255,215,0,0.8)', + borderColor: '#444', + borderWidth: 1 + }, + label: { + color: 'rgb(100,0,0)' + } + } + }, + geo: { + itemStyle: { + areaColor: '#eee', + borderColor: '#444', + borderWidth: 0.5 + }, + label: { + color: '#000' + }, + emphasis: { + itemStyle: { + areaColor: 'rgba(255,215,0,0.8)', + borderColor: '#444', + borderWidth: 1 + }, + label: { + color: 'rgb(100,0,0)' + } + } + }, + categoryAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#6E7079' + } + }, + axisTick: { + show: true, + lineStyle: { + color: '#6E7079' + } + }, + axisLabel: { + show: true, + color: '#6E7079' + }, + splitLine: { + show: false, + lineStyle: { + color: ['#E0E6F1'] + } + }, + splitArea: { + show: false, + areaStyle: { + color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)'] + } + } + }, + valueAxis: { + axisLine: { + show: false, + lineStyle: { + color: '#6E7079' + } + }, + axisTick: { + show: false, + lineStyle: { + color: '#6E7079' + } + }, + axisLabel: { + show: true, + color: '#6E7079' + }, + splitLine: { + show: true, + lineStyle: { + color: ['#E0E6F1'] + } + }, + splitArea: { + show: false, + areaStyle: { + color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)'] + } + } + }, + logAxis: { + axisLine: { + show: false, + lineStyle: { + color: '#6E7079' + } + }, + axisTick: { + show: false, + lineStyle: { + color: '#6E7079' + } + }, + axisLabel: { + show: true, + color: '#6E7079' + }, + splitLine: { + show: true, + lineStyle: { + color: ['#E0E6F1'] + } + }, + splitArea: { + show: false, + areaStyle: { + color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)'] + } + } + }, + timeAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#6E7079' + } + }, + axisTick: { + show: true, + lineStyle: { + color: '#6E7079' + } + }, + axisLabel: { + show: true, + color: '#6E7079' + }, + splitLine: { + show: false, + lineStyle: { + color: ['#E0E6F1'] + } + }, + splitArea: { + show: false, + areaStyle: { + color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)'] + } + } + }, + toolbox: { + iconStyle: { + borderColor: '#999' + }, + emphasis: { + iconStyle: { + borderColor: '#666' + } + } + }, + legend: { + textStyle: { + color: '#333' + } + }, + tooltip: { + axisPointer: { + lineStyle: { + color: '#ccc', + width: 1 + }, + crossStyle: { + color: '#ccc', + width: 1 + } + } + }, + timeline: { + lineStyle: { + color: '#DAE1F5', + width: 2 + }, + itemStyle: { + color: '#A4B1D7', + borderWidth: 1 + }, + controlStyle: { + color: '#A4B1D7', + borderColor: '#A4B1D7', + borderWidth: 1 + }, + checkpointStyle: { + color: '#316bf3', + borderColor: 'fff' + }, + label: { + color: '#A4B1D7' + }, + emphasis: { + itemStyle: { + color: '#FFF' + }, + controlStyle: { + color: '#A4B1D7', + borderColor: '#A4B1D7', + borderWidth: 1 + }, + label: { + color: '#A4B1D7' + } + } + }, + visualMap: { + color: ['#bf444c', '#d88273', '#f6efa6'] + }, + dataZoom: { + handleSize: 'undefined%', + textStyle: {} + }, + markPoint: { + label: { + color: '#eee' + }, + emphasis: { + label: { + color: '#eee' + } + } + } +}; diff --git a/packages/vchart-theme-converter/demo/public/vite.svg b/packages/vchart-theme-converter/demo/public/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/packages/vchart-theme-converter/demo/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/vchart-theme-converter/demo/src/App.css b/packages/vchart-theme-converter/demo/src/App.css new file mode 100644 index 0000000..b9d355d --- /dev/null +++ b/packages/vchart-theme-converter/demo/src/App.css @@ -0,0 +1,42 @@ +#root { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +.logo { + height: 6em; + padding: 1.5em; + will-change: filter; + transition: filter 300ms; +} +.logo:hover { + filter: drop-shadow(0 0 2em #646cffaa); +} +.logo.react:hover { + filter: drop-shadow(0 0 2em #61dafbaa); +} + +@keyframes logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +@media (prefers-reduced-motion: no-preference) { + a:nth-of-type(2) .logo { + animation: logo-spin infinite 20s linear; + } +} + +.card { + padding: 2em; +} + +.read-the-docs { + color: #888; +} diff --git a/packages/vchart-theme-converter/demo/src/App.tsx b/packages/vchart-theme-converter/demo/src/App.tsx new file mode 100644 index 0000000..2eab536 --- /dev/null +++ b/packages/vchart-theme-converter/demo/src/App.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { spec as vchartLineSpec } from './spec/vchart/line'; +import { spec as echartsLineOption } from './spec/echarts/line'; +import { Charts } from './Chart'; +import './index.css'; + +const demoList = [{ vchartSpec: vchartLineSpec, echartsOption: echartsLineOption }]; + +function App() { + return ( + <> + {demoList.map((demo, i) => { + const { vchartSpec, echartsOption } = demo; + return ; + })} + + ); +} + +export default App; diff --git a/packages/vchart-theme-converter/demo/src/Chart.tsx b/packages/vchart-theme-converter/demo/src/Chart.tsx new file mode 100644 index 0000000..4182753 --- /dev/null +++ b/packages/vchart-theme-converter/demo/src/Chart.tsx @@ -0,0 +1,62 @@ +import React, { useEffect, useRef } from 'react'; +import * as echarts from 'echarts'; +import VChart from '@visactor/vchart'; +import { initVChartSemiTheme } from '@visactor/vchart-semi-theme'; +import { ECTheme } from '../public/echarts-theme'; +import { VC2EC } from '../../src/index'; + +initVChartSemiTheme({ isWatchingMode: true }); +const echartsTheme = VC2EC(VChart.ThemeManager.getCurrentTheme()); +console.log(echartsTheme); +console.log(VChart.ThemeManager.getCurrentTheme()); + +export function Charts(props: { echartsOption: any; vchartSpec: any }) { + const { echartsOption, vchartSpec } = props; + const ecRef = useRef(null); + const vcRef = useRef(null); + + const id = Date.now(); + + useEffect(() => { + if (echartsOption && ecRef.current) { + const myChart = echarts.init(ecRef.current, echartsTheme); + myChart.setOption(echartsOption); + const resizeOb = new ResizeObserver(entries => { + for (const entry of entries) { + echarts.getInstanceByDom(entry.target).resize(); + } + }); + console.log('inner theme:', myChart._theme); + resizeOb.observe(ecRef.current); + window['echarts'] = myChart; + return () => { + myChart.dispose(); + }; + } + }); + + useEffect(() => { + if (vchartSpec && vcRef.current) { + const vchart = new VChart(vchartSpec, { dom: vcRef.current }); + vchart.renderSync(); + window['vchart'] = vchart; + + return () => { + vchart.release(); + }; + } + }, []); + + return ( + <> +
+
+
+
+ + ); +} diff --git a/packages/vchart-theme-converter/demo/src/index.css b/packages/vchart-theme-converter/demo/src/index.css new file mode 100644 index 0000000..8a53359 --- /dev/null +++ b/packages/vchart-theme-converter/demo/src/index.css @@ -0,0 +1,17 @@ +:root { + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #fff; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; +} + +body { + margin: 0; + min-width: 320px; + min-height: 100vh; +} diff --git a/packages/vchart-theme-converter/demo/src/main.tsx b/packages/vchart-theme-converter/demo/src/main.tsx new file mode 100644 index 0000000..b3ad8a5 --- /dev/null +++ b/packages/vchart-theme-converter/demo/src/main.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.tsx'; +import './index.css'; + +ReactDOM.render( + + + , + document.getElementById('root') as HTMLElement +); diff --git a/packages/vchart-theme-converter/demo/src/spec/echarts/line.ts b/packages/vchart-theme-converter/demo/src/spec/echarts/line.ts new file mode 100644 index 0000000..d0ce203 --- /dev/null +++ b/packages/vchart-theme-converter/demo/src/spec/echarts/line.ts @@ -0,0 +1,83 @@ +export const spec = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + label: { + backgroundColor: '#6a7985' + } + } + }, + title: { + visible: true, + text: 'Stacked area chart of cosmetic products sales' + }, + legend: { + data: ['China', 'USA', 'EU', 'Africa'] + }, + toolbox: { + feature: { + saveAsImage: {} + } + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + xAxis: [ + { + type: 'category', + name: 'title1111', + data: [ + 'Nail polish', + 'Eyebrow pencil', + 'Rouge', + 'Lipstick', + 'Eyeshadows', + 'Eyeliner', + 'Foundation', + 'Lip gloss', + 'Mascara' + ] + } + ], + yAxis: [ + { + type: 'value', + name: 'title1111' + } + ], + series: [ + { + name: 'China', + type: 'line', + stack: 'Total', + areaStyle: {}, + data: [3054, 5067, 7004, 9054, 12043, 15067, 10119, 12043, 10419] + }, + { + name: 'USA', + type: 'line', + stack: 'Total', + areaStyle: {}, + + data: [12814, 13012, 11624, 8814, 12998, 12321, 10342, 22998, 11261] + }, + { + name: 'EU', + type: 'line', + stack: 'Total', + areaStyle: {}, + data: [4376, 3987, 3574, 4376, 4572, 3417, 5231, 4572, 6134] + }, + { + name: 'Africa', + type: 'line', + stack: 'Total', + areaStyle: {}, + data: [4229, 3932, 5221, 9256, 3308, 5432, 13701, 4008, 18712] + } + ] +}; diff --git a/packages/vchart-theme-converter/demo/src/spec/vchart/line.ts b/packages/vchart-theme-converter/demo/src/spec/vchart/line.ts new file mode 100644 index 0000000..deda74c --- /dev/null +++ b/packages/vchart-theme-converter/demo/src/spec/vchart/line.ts @@ -0,0 +1,85 @@ +export const spec = { + type: 'area', + data: { + fields: { + country: { + domain: ['China', 'USA', 'EU', 'Africa'], + sortIndex: 0 + } + }, + values: [ + { type: 'Nail polish', country: 'Africa', value: 4229 }, + { type: 'Nail polish', country: 'EU', value: 4376 }, + { type: 'Nail polish', country: 'China', value: 3054 }, + { type: 'Nail polish', country: 'USA', value: 12814 }, + { type: 'Eyebrow pencil', country: 'Africa', value: 3932 }, + { type: 'Eyebrow pencil', country: 'EU', value: 3987 }, + { type: 'Eyebrow pencil', country: 'China', value: 5067 }, + { type: 'Eyebrow pencil', country: 'USA', value: 13012 }, + { type: 'Rouge', country: 'Africa', value: 5221 }, + { type: 'Rouge', country: 'EU', value: 3574 }, + { type: 'Rouge', country: 'China', value: 7004 }, + { type: 'Rouge', country: 'USA', value: 11624 }, + { type: 'Lipstick', country: 'Africa', value: 9256 }, + { type: 'Lipstick', country: 'EU', value: 4376 }, + { type: 'Lipstick', country: 'China', value: 9054 }, + { type: 'Lipstick', country: 'USA', value: 8814 }, + { type: 'Eyeshadows', country: 'Africa', value: 3308 }, + { type: 'Eyeshadows', country: 'EU', value: 4572 }, + { type: 'Eyeshadows', country: 'China', value: 12043 }, + { type: 'Eyeshadows', country: 'USA', value: 12998 }, + { type: 'Eyeliner', country: 'Africa', value: 5432 }, + { type: 'Eyeliner', country: 'EU', value: 3417 }, + { type: 'Eyeliner', country: 'China', value: 15067 }, + { type: 'Eyeliner', country: 'USA', value: 12321 }, + { type: 'Foundation', country: 'Africa', value: 13701 }, + { type: 'Foundation', country: 'EU', value: 5231 }, + { type: 'Foundation', country: 'China', value: 10119 }, + { type: 'Foundation', country: 'USA', value: 10342 }, + { type: 'Lip gloss', country: 'Africa', value: 4008 }, + { type: 'Lip gloss', country: 'EU', value: 4572 }, + { type: 'Lip gloss', country: 'China', value: 12043 }, + { type: 'Lip gloss', country: 'USA', value: 22998 }, + { type: 'Mascara', country: 'Africa', value: 18712 }, + { type: 'Mascara', country: 'EU', value: 6134 }, + { type: 'Mascara', country: 'China', value: 10419 }, + { type: 'Mascara', country: 'USA', value: 11261 } + ] + }, + title: { + visible: true, + text: 'Stacked area chart of cosmetic products sales' + }, + stack: true, + xField: 'type', + yField: 'value', + seriesField: 'country', + legends: [{ visible: true, position: 'middle', orient: 'top' }], + axes: [ + { + orient: 'bottom', + title: { + text: 'title111', + visible: true, + style: { + // _debug_bounds: true + } + }, + label: { + style: { + // _debug_bounds: true + } + } + }, + { + orient: 'left', + title: { + text: 'title1111', + visible: true, + style: { + // _debug_bounds: true + } + } + } + ] +}; diff --git a/packages/vchart-theme-converter/demo/src/vite-env.d.ts b/packages/vchart-theme-converter/demo/src/vite-env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/packages/vchart-theme-converter/demo/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/packages/vchart-theme-converter/demo/tsconfig.json b/packages/vchart-theme-converter/demo/tsconfig.json new file mode 100644 index 0000000..4af7fee --- /dev/null +++ b/packages/vchart-theme-converter/demo/tsconfig.json @@ -0,0 +1,32 @@ +{ + "compilerOptions": { + "target": "ESNext", + "lib": [ + "DOM", + "DOM.Iterable", + "ESNext" + ], + "module": "ESNext", + "skipLibCheck": true, + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react", + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": [ + "src" + ], + "references": [ + { + "path": "./tsconfig.node.json" + } + ] +} diff --git a/packages/vchart-theme-converter/demo/tsconfig.node.json b/packages/vchart-theme-converter/demo/tsconfig.node.json new file mode 100644 index 0000000..42872c5 --- /dev/null +++ b/packages/vchart-theme-converter/demo/tsconfig.node.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "composite": true, + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/packages/vchart-theme-converter/demo/vite.config.ts b/packages/vchart-theme-converter/demo/vite.config.ts new file mode 100644 index 0000000..b99e0e9 --- /dev/null +++ b/packages/vchart-theme-converter/demo/vite.config.ts @@ -0,0 +1,13 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [react({ jsxRuntime: 'classic' })], + resolve: { + alias: { + '@visactor/vchart-semi-theme': '/Users/bytedance/github/vchart-theme/packages/vchart-semi-theme/src/index.ts', + '@visactor/vchart-theme-utils': '/Users/bytedance/github/vchart-theme/packages/vchart-theme-utils/src/index.ts' + } + } +}); diff --git a/packages/vchart-theme-converter/package.json b/packages/vchart-theme-converter/package.json new file mode 100644 index 0000000..173f8c6 --- /dev/null +++ b/packages/vchart-theme-converter/package.json @@ -0,0 +1,97 @@ +{ + "name": "@visactor/vchart-theme-converter", + "version": "0.0.1", + "description": "", + "sideEffects": false, + "main": "cjs/index.js", + "module": "es/index.js", + "types": "es/index.d.ts", + "files": [ + "cjs", + "es", + "dist" + ], + "scripts": { + "compile": "tsc --noEmit", + "eslint": "eslint --debug --fix src/", + "build": "bundle", + "dev": "bundle --clean -f es -w", + "start": "vite ./demo", + "prepublishOnly": "npm run build" + }, + "dependencies": { + "@visactor/vchart-semi-theme": "workspace:1.11.4", + "@visactor/vutils": "~0.18.9" + }, + "devDependencies": { + "@visactor/vchart": "1.11.0", + "echarts": "5.5.0", + "@types/echarts": "4.9.22", + "@esbuild-plugins/node-globals-polyfill": "0.1.1", + "@esbuild-plugins/node-modules-polyfill": "0.1.4", + "@internal/bundler": "workspace:*", + "@internal/eslint-config": "workspace:*", + "@internal/ts-config": "workspace:*", + "@internal/jest-config": "workspace:*", + "@internal/chart-demo": "workspace:*", + "jest": "~29.5.0", + "@jest/globals": "~29.5.0", + "ts-jest": "~29.1.0", + "@types/jest": "~29.5.0", + "@rushstack/eslint-patch": "~1.1.4", + "eslint": "~8.18.0", + "typescript": "4.9.5", + "@types/node": "*", + "@types/offscreencanvas": "2019.6.4", + "husky": "7.0.4", + "lint-staged": "12.3.7", + "magic-string": "^0.25.7", + "prettier": "2.6.1", + "ts-loader": "8.0.2", + "ts-node": "10.9.0", + "tslib": "2.3.1", + "tslint": "5.12.1", + "@vitejs/plugin-react": "^4.1.1", + "@vitejs/plugin-react-swc": "^3.4.1", + "vite": "^4.5.0", + "vite-plugin-svgr": "^4.1.0", + "@babel/runtime": "latest", + "@arco-design/color": "^0.4.0", + "@arco-design/web-react": "^2.32.2", + "@loadable/component": "^5.13.2", + "@arco-themes/react-arco-pro": "^0.0.7", + "classnames": "^2.3.1", + "copy-to-clipboard": "^3.3.1", + "lodash": "4.17.21", + "nprogress": "^0.2.0", + "query-string": "^6.13.8", + "react": "^18.0.0", + "react-color": "^2.18.1", + "react-dom": "^18.0.0", + "react-redux": "^7.2.6", + "react-router": "^5.2.0", + "react-router-dom": "^5.2.0", + "react-device-detect": "^2.2.2", + "redux": "^4.1.2", + "@visactor/react-vchart": "1.11.0", + "@arco-design/webpack-plugin": "^1.6.0", + "@arco-plugins/vite-plugin-svgr": "^0.7.2", + "@svgr/webpack": "^5.5.0", + "@types/react": "^17.0.0", + "@types/react-dom": "^17.0.0", + "@typescript-eslint/eslint-plugin": "5.30.0", + "@typescript-eslint/parser": "5.30.0", + "eslint-config-prettier": "8.5.0", + "eslint-plugin-babel": "^5.3.1", + "eslint-plugin-prettier": "^4.0.0", + "eslint-plugin-react": "7.30.1", + "eslint-plugin-react-hooks": "4.6.0", + "less": "4.1.3", + "less-loader": "7.3.0", + "postcss-less": "4", + "pretty-quick": "^3.1.2", + "stylelint": "^14.1.0", + "stylelint-config-prettier": "^9.0.3", + "stylelint-config-standard": "^24.0.0" + } +} diff --git a/packages/vchart-theme-converter/src/echarts/README.md b/packages/vchart-theme-converter/src/echarts/README.md new file mode 100644 index 0000000..624db32 --- /dev/null +++ b/packages/vchart-theme-converter/src/echarts/README.md @@ -0,0 +1,53 @@ +## VChart Theme + +### name?: string; + +主题名称，无需转换 + +### description?: string; + +主题描述，无需转换 + +### type?: 'light' | 'dark'; + +亮色主题 or 暗色主题，作用含义不明，暂不转换 + +### background?: string | IGradientColor | IColorKey; + +图表背景色 + +### padding?: ILayoutPaddingSpec; + +图表 padding + +### fontFamily?: string | ITokenKey; + +全局字体 + +### token?: TokenMap; + +样式 token + +### colorScheme?: IThemeColorScheme; + +离散色板 + +### mark?: IGlobalMarkThemeByType; + +以图元类型，配置图元样式 + +### markByName?: IGlobalMarkThemeByName; + +以图元名称，配置图元样式 + +### series?: ISeriesTheme; + +系列配置 + +### animationThreshold?: number; + +停用动画的数据量阈值 + +### component?: IComponentTheme; + +组件配置 diff --git a/packages/vchart-theme-converter/src/echarts/component/axis.ts b/packages/vchart-theme-converter/src/echarts/component/axis.ts new file mode 100644 index 0000000..b1638cf --- /dev/null +++ b/packages/vchart-theme-converter/src/echarts/component/axis.ts @@ -0,0 +1,206 @@ +import type { IAxisCommonTheme, ITheme } from '@visactor/vchart'; +import { merge } from '@visactor/vutils'; +import { covertThemeItem } from '../../util/token'; +import { axisLineStyleMap, labelStyleMap, lineStyleMap, postProcessors } from '../convertMap'; + +export function axisConverter(component: ITheme['component'], theme: ITheme) { + const axisTheme = {} as any; + + axisTheme.categoryAxis = convertCategoryAxis(component, theme); + axisTheme.valueAxis = convertLinearAxis(component, theme); + return axisTheme; +} + +function convertCategoryAxis(component: ITheme['component'], theme: ITheme) { + const { axis, axisBand } = component; + + // TODO: how to process axisX/axisY + const bandAxisTheme_VChart: IAxisCommonTheme = merge({}, axis, axisBand); + const { grid, subGrid, domainLine, label, title, tick, subTick } = bandAxisTheme_VChart; + // @ts-ignore + const { trimPadding = false } = bandAxisTheme_VChart; + const categoryAxis = { + boundaryGap: !trimPadding + } as any; + + if (domainLine) { + const { visible, style } = domainLine; + categoryAxis.axisLine = { + show: visible, + lineStyle: {} + }; + for (const key in style) { + categoryAxis.axisLine.lineStyle[axisLineStyleMap[key] ?? key] = covertThemeItem(style[key], theme); + } + } + + if (grid) { + const { visible, style } = grid; + categoryAxis.splitLine = { + show: visible, + lineStyle: {} + }; + for (const key in style) { + categoryAxis.splitLine.lineStyle[axisLineStyleMap[key] ?? key] = covertThemeItem(style[key], theme); + } + } + + if (subGrid) { + const { visible, style } = subGrid; + categoryAxis.minorSplitLine = { + show: visible, + lineStyle: {} + }; + for (const key in style) { + categoryAxis.minorSplitLine[axisLineStyleMap[key] ?? key] = covertThemeItem(style[key], theme); + } + } + + if (label) { + const { visible, style, space } = label; + categoryAxis.axisLabel = { + show: visible, + margin: space + }; + for (const key in style) { + categoryAxis.axisLabel[labelStyleMap[key] ?? key] = covertThemeItem(style[key], theme); + } + } + if (tick) { + const { visible, style, tickSize, alignWithLabel } = tick; + categoryAxis.axisTick = { + show: visible, + alignWithLabel, + length: tickSize + }; + for (const key in style) { + categoryAxis.axisTick[lineStyleMap[key] ?? key] = covertThemeItem(style[key], theme); + } + } + + if (subTick) { + const { visible, style, tickSize, tickCount } = subTick; + categoryAxis.minorTick = { + show: visible, + length: tickSize, + splitNumber: tickCount + }; + for (const key in style) { + categoryAxis.minorTick[lineStyleMap[key] ?? key] = covertThemeItem(style[key], theme); + } + } + + if (title) { + const { style, space, position } = title; + categoryAxis.nameLocation = position ?? 'middle'; + // nameGap 是标题到轴线的距离 + categoryAxis.nameGap = space + (categoryAxis.axisLabel?.margin ?? 0) + (categoryAxis.axisTick?.length ?? 0); + categoryAxis.nameTextStyle = {}; + for (const key in style) { + const styleValue = covertThemeItem(style[key], theme); + if (key === 'lineHeight' && styleValue.includes('%')) { + // 百分比 lineHeight 在 echarts 不支持 + // TODO: 支持百分比 lineHeight 解析 + // categoryAxis.nameTextStyle.lineHeight = 18; // fontSize * percent + } else { + categoryAxis.nameTextStyle[labelStyleMap[key] ?? key] = styleValue; + } + } + } + + return categoryAxis; +} + +function convertLinearAxis(component: ITheme['component'], theme: ITheme) { + const { axis, axisLinear } = component; + + // TODO: how to process axisX/axisY + const linearAxisTheme_VChart: IAxisCommonTheme = merge({}, axis, axisLinear); + const { grid, subGrid, domainLine, label, title, tick, subTick } = linearAxisTheme_VChart; + // @ts-ignore + const valueAxis = {} as any; + + if (domainLine) { + const { visible, style } = domainLine; + valueAxis.axisLine = { + show: visible, + lineStyle: {} + }; + for (const key in style) { + valueAxis.axisLine.lineStyle[axisLineStyleMap[key] ?? key] = covertThemeItem(style[key], theme); + } + } + + if (grid) { + const { visible, style } = grid; + valueAxis.splitLine = { + show: visible, + lineStyle: {} + }; + for (const key in style) { + valueAxis.splitLine.lineStyle[axisLineStyleMap[key] ?? key] = covertThemeItem(style[key], theme); + } + } + + if (subGrid) { + const { visible, style } = subGrid; + valueAxis.minorSplitLine = { + show: visible, + lineStyle: {} + }; + for (const key in style) { + valueAxis.minorSplitLine[axisLineStyleMap[key] ?? key] = covertThemeItem(style[key], theme); + } + } + + if (label) { + const { visible, style, space } = label; + valueAxis.axisLabel = { + show: visible, + margin: space + }; + for (const key in style) { + valueAxis.axisLabel[labelStyleMap[key] ?? key] = covertThemeItem(style[key], theme); + } + } + if (tick) { + const { visible, style, tickSize, alignWithLabel } = tick; + valueAxis.axisTick = { + show: visible, + alignWithLabel, + length: tickSize + }; + for (const key in style) { + valueAxis.axisTick[lineStyleMap[key] ?? key] = covertThemeItem(style[key], theme); + } + } + + if (subTick) { + const { visible, style, tickSize, tickCount } = subTick; + valueAxis.minorTick = { + show: visible, + length: tickSize, + splitNumber: tickCount + }; + for (const key in style) { + valueAxis.minorTick[lineStyleMap[key] ?? key] = covertThemeItem(style[key], theme); + } + } + + if (title) { + const { style, space, position } = title; + valueAxis.nameLocation = position ?? 'middle'; + // nameGap 是标题到轴线的距离 + valueAxis.nameGap = space + (valueAxis.axisLabel?.margin ?? 0) + (valueAxis.axisTick?.length ?? 0); + valueAxis.nameTextStyle = {}; + for (const key in style) { + let styleValue = covertThemeItem(style[key], theme); + if (key === 'lineHeight') { + styleValue = postProcessors[key](styleValue); + } + valueAxis.nameTextStyle[labelStyleMap[key] ?? key] = styleValue; + } + } + + return valueAxis; +} diff --git a/packages/vchart-theme-converter/src/echarts/component/discreteLegend.ts b/packages/vchart-theme-converter/src/echarts/component/discreteLegend.ts new file mode 100644 index 0000000..a3bbff3 --- /dev/null +++ b/packages/vchart-theme-converter/src/echarts/component/discreteLegend.ts @@ -0,0 +1,91 @@ +import type { ITheme } from '@visactor/vchart'; +import { IDiscreteLegendTheme } from '@visactor/vchart'; +import { labelStyleMap, postProcessors, symbolStyleMap } from '../convertMap'; +import { covertThemeItem } from '../../util/token'; +import type { IPager } from '@visactor/vchart/esm/component/legend'; + +export function discreteLegendConverter(component: ITheme['component'], theme: ITheme) { + const legendTheme = { + type: 'scroll' + } as any; + const { discreteLegend } = component; + if (discreteLegend) { + const { item, orient, padding, pager } = discreteLegend; + if (orient) { + if (orient === 'left' || orient === 'right') { + legendTheme.orient = 'vertical'; + } else { + legendTheme.orient = 'horizontal'; + } + } + if (padding) { + legendTheme.padding = padding; + } + + if (item) { + const { label, shape, spaceCol, spaceRow, align } = item; + if (align) { + legendTheme.align = align; + } + + if (spaceCol) { + legendTheme.itemGap = spaceCol; + } + + if (label) { + const { space, style: labelStyle } = label; + legendTheme.textStyle = {}; + for (const key in labelStyle) { + let style = covertThemeItem(labelStyle[key], theme); + if (key === 'lineHeight') { + style = postProcessors[key](style); + } + legendTheme.textStyle[labelStyleMap[key] ?? key] = style; + } + } + + if (shape) { + const { style, space } = shape; + legendTheme.itemStyle = {}; + for (const key in style) { + const styleValue = covertThemeItem(style[key], theme); + if (key === 'size') { + legendTheme.itemWidth = styleValue; + legendTheme.itemHeight = styleValue; + } else if (key === 'symbolType') { + legendTheme.icon = styleValue; + } else { + legendTheme.itemStyle[symbolStyleMap[key] ?? key] = styleValue; + } + } + } + + if (pager) { + const { textStyle, handler, space } = pager as IPager; + legendTheme.pageButtonGap = space; + if (textStyle) { + for (const key in textStyle) { + let style = covertThemeItem(textStyle[key], theme); + if (key === 'lineHeight') { + style = postProcessors[key](style); + } + legendTheme.pageTextStyle[labelStyleMap[key] ?? key] = style; + } + } + + if (handler) { + const { space, preShape, nextShape, style = {}, state = {} } = handler; + legendTheme.pageButtonItemGap = space; + legendTheme.pageIcons = { + horizontal: [preShape, nextShape], + vertical: [preShape, nextShape] + }; + legendTheme.pageIconColor = covertThemeItem(style.fill, theme); + legendTheme.pageIconInactiveColor = covertThemeItem(state.disable.fill, theme); + } + } + } + } + + return { legend: legendTheme }; +} diff --git a/packages/vchart-theme-converter/src/echarts/component/title.ts b/packages/vchart-theme-converter/src/echarts/component/title.ts new file mode 100644 index 0000000..318c2c1 --- /dev/null +++ b/packages/vchart-theme-converter/src/echarts/component/title.ts @@ -0,0 +1,37 @@ +import type { ITheme } from '@visactor/vchart'; +import { labelStyleMap, postProcessors } from '../convertMap'; +import { covertThemeItem } from '../../util/token'; + +export function titleConverter(component: ITheme['component'], theme: ITheme) { + const titleTheme = {} as any; + const { title } = component; + + if (title) { + const { textStyle: vchartTextStyle, subtextStyle: vchartSubTextStyle } = title; + if (vchartTextStyle) { + const textStyle = {}; + for (const key in vchartTextStyle) { + let style = covertThemeItem(vchartTextStyle[key], theme); + if (key === 'lineHeight') { + style = postProcessors[key](style); + } + textStyle[labelStyleMap[key] ?? key] = style; + } + titleTheme.textStyle = textStyle; + } + + if (vchartSubTextStyle) { + const subtextStyle = {}; + for (const key in vchartSubTextStyle) { + let style = covertThemeItem(vchartSubTextStyle[key], theme); + if (key === 'lineHeight') { + style = postProcessors[key](style); + } + subtextStyle[labelStyleMap[key] ?? key] = style; + } + titleTheme.subtextStyle = subtextStyle; + } + } + + return { title: titleTheme }; +} diff --git a/packages/vchart-theme-converter/src/echarts/component/tooltip.ts b/packages/vchart-theme-converter/src/echarts/component/tooltip.ts new file mode 100644 index 0000000..09c3822 --- /dev/null +++ b/packages/vchart-theme-converter/src/echarts/component/tooltip.ts @@ -0,0 +1,40 @@ +import type { ITheme } from '@visactor/vchart'; +import { labelStyleMap, postProcessors } from '../convertMap'; +import { covertThemeItem } from '../../util/token'; +import { normalizePadding } from '@visactor/vutils'; + +export function tooltipConverter(component: ITheme['component'], theme: ITheme) { + const tooltipTheme = { + axisPointer: {} + } as any; + + const { tooltip } = component; + + if (tooltip) { + const { panel, shape, titleLabel, keyLabel, valueLabel, spaceRow } = tooltip; + if (panel) { + const { padding, backgroundColor, border = {}, shadow } = panel; + tooltipTheme.padding = normalizePadding(padding); + tooltipTheme.backgroundColor = covertThemeItem(backgroundColor, theme); + tooltipTheme.borderColor = covertThemeItem(border.color, theme); + tooltipTheme.borderRadius = covertThemeItem(border.radius, theme); + tooltipTheme.borderWidth = covertThemeItem(border.width, theme); + tooltipTheme.shadowColor = covertThemeItem(shadow?.color, theme); + tooltipTheme.shadowBlur = covertThemeItem(shadow?.blur, theme); + tooltipTheme.shadowOffsetX = covertThemeItem(shadow?.x, theme); + tooltipTheme.shadowOffsetY = covertThemeItem(shadow?.y, theme); + } + + if (keyLabel) { + const textStyle = {} as any; + const { fontSize, fontFamily, fontColor } = keyLabel; + textStyle.fontSize = covertThemeItem(fontSize, theme); + textStyle.fontFamily = covertThemeItem(fontFamily, theme); + textStyle.fontColor = covertThemeItem(fontColor, theme); + + tooltipTheme.textStyle = textStyle; + } + } + + return { tooltip: tooltipTheme }; +} diff --git a/packages/vchart-theme-converter/src/echarts/componentConverter.ts b/packages/vchart-theme-converter/src/echarts/componentConverter.ts new file mode 100644 index 0000000..c745fcd --- /dev/null +++ b/packages/vchart-theme-converter/src/echarts/componentConverter.ts @@ -0,0 +1,33 @@ +import type { ITheme } from '@visactor/vchart'; +// FIXME: +import { ComponentTypeEnum } from '@visactor/vchart/esm/component/interface/type'; +import { merge } from '@visactor/vutils'; +import { axisConverter } from './component/axis'; +import { titleConverter } from './component/title'; +import { discreteLegendConverter } from './component/discreteLegend'; +import { tooltipConverter } from './component/tooltip'; + +const VCHART_COMPONENT_TYPES = [...Object.keys(ComponentTypeEnum).filter(type => !type.includes('Axis')), 'axis']; + +const componentConverter = { + axis: axisConverter, + title: titleConverter, + discreteLegend: discreteLegendConverter, + tooltip: tooltipConverter +}; + +export function convertComponent(component: ITheme['component'], theme: ITheme) { + if (!component) { + return {}; + } + + let result = {} as any; + + VCHART_COMPONENT_TYPES.forEach(type => { + if (componentConverter[type]) { + result = merge(result, componentConverter[type](component, theme)); + } + }); + + return result; +} diff --git a/packages/vchart-theme-converter/src/echarts/convertMap.ts b/packages/vchart-theme-converter/src/echarts/convertMap.ts new file mode 100644 index 0000000..c0c2ea7 --- /dev/null +++ b/packages/vchart-theme-converter/src/echarts/convertMap.ts @@ -0,0 +1,73 @@ +/** + * File description: + * 维护 vchart 到 echarts 的属性映射关系 + */ + +import { isObject, isString } from '@visactor/vutils'; + +export const attributeMap = { + fill: 'color', + fillOpacity: 'opacity', + stroke: 'borderColor', + strokeJoin: 'borderJoin', + strokeCap: 'borderCap', + lineWidth: 'borderWidth', + lineDash: 'borderDash' +}; + +export const textStyleMap = { + ...attributeMap, + stroke: 'textBorderColor', + lineWidth: 'textBorderWidth', + textAlign: 'align', + textBaseline: 'baseline', + shadowColor: 'textShadowColor', + shadowBlur: 'textShadowBlur', + shadowOffsetX: 'textShadowOffsetX', + shadowOffsetY: 'textShadowOffsetY', + background: 'backgroundColor', + boundsPadding: 'padding' + // not supported + // 'rich': , + // 'tag': , + // 'verticalAlign': , + // 'borderColor': , + // 'borderWidth': , + // 'borderRadius': , +}; + +export const lineStyleMap = { + ...attributeMap, + lineWidth: 'width', + lineCap: 'cap', + lineDash: 'type', + lineJoin: 'join' + // curveType:'type', curveType 在外层处理 +}; + +export const areaStyleMap = { + ...attributeMap + // curveType:'type', curveType 在外层处理 +}; + +export const symbolStyleMap = { + ...attributeMap +}; + +export const axisLineStyleMap = { + ...lineStyleMap, + stroke: 'color' +}; + +export const labelStyleMap = { + ...attributeMap +}; + +export const postProcessors = { + lineHeight: (lineHeight: string | number, context?: any) => { + if (isString(lineHeight) && lineHeight.includes('%')) { + return undefined; + } + return lineHeight; + } +}; diff --git a/packages/vchart-theme-converter/src/echarts/index.ts b/packages/vchart-theme-converter/src/echarts/index.ts new file mode 100644 index 0000000..59e36ba --- /dev/null +++ b/packages/vchart-theme-converter/src/echarts/index.ts @@ -0,0 +1,46 @@ +import type { ITheme as IVChartTheme } from '@visactor/vchart'; +import { convertObjectColor, convertColorPlatte as convertColorPalette } from '../util/color'; +import { isObject, merge } from '@visactor/vutils'; +import { convertTextStyle } from './textStyleConverter'; +import { convertSeries } from './seriesConverter'; +import { convertComponent } from './componentConverter'; + +type IEChartsTheme = Record; + +export function VC2EC(vchartTheme: IVChartTheme): IEChartsTheme { + if (!vchartTheme) { + return {}; + } + + let echartsTheme: IEChartsTheme = {}; + + const { colorScheme, token, background, mark = {}, series, component } = vchartTheme; + + // 1. 色板转换 + const color = convertColorPalette(colorScheme, token); + if (color) { + echartsTheme.color = color; + } + + // 2. 基本转换 + if (background) { + echartsTheme.backgroundColor = isObject(background) ? convertObjectColor(background, vchartTheme) : background; + } + + /** + * 2.1 textStyle + * 目前已知会影响：数据标签、crosshair 标签、图例标签 + * 确认不会影响：标题、轴标签、tooltip 标签 + */ + echartsTheme.textStyle = convertTextStyle(mark.text?.style, vchartTheme); + + // 1.2 系列色板转换 + + // 3. 系列样式转换 + echartsTheme = merge(echartsTheme, convertSeries(series, vchartTheme)); + + // 4. 组件转换 + echartsTheme = merge(echartsTheme, convertComponent(component, vchartTheme)); + + return echartsTheme; +} diff --git a/packages/vchart-theme-converter/src/echarts/series/area.ts b/packages/vchart-theme-converter/src/echarts/series/area.ts new file mode 100644 index 0000000..77d6ad4 --- /dev/null +++ b/packages/vchart-theme-converter/src/echarts/series/area.ts @@ -0,0 +1,29 @@ +import type { ITheme } from '@visactor/vchart'; +import { covertThemeItem } from '../../util/token'; +import { areaStyleMap } from '../convertMap'; +import type { IGradientColor } from '../../util/color'; + +export function areaSeriesConverter(areaSeries: ITheme['series']['area'], theme: ITheme) { + if (!areaSeries) { + return {}; + } + const areaStyle = {} as any; + const { area = {} } = areaSeries; + if (area) { + const { style = {} } = area; + for (const key in style) { + if (areaStyleMap[key]) { + areaStyle[areaStyleMap[key]] = covertThemeItem(style[key], theme); + if (key === 'fill') { + if ('gradient' in (style[key] as IGradientColor)) { + console.warn('[Converter] gradient color is not supported '); + delete areaStyle.color; + areaStyle.opacity = 0.1; + } + } + } + } + } + + return areaStyle; +} diff --git a/packages/vchart-theme-converter/src/echarts/series/line.ts b/packages/vchart-theme-converter/src/echarts/series/line.ts new file mode 100644 index 0000000..b6ba087 --- /dev/null +++ b/packages/vchart-theme-converter/src/echarts/series/line.ts @@ -0,0 +1,59 @@ +import type { ITheme } from '@visactor/vchart'; + +import { covertThemeItem } from '../../util/token'; +import { lineStyleMap, symbolStyleMap } from '../convertMap'; + +export function lineSeriesConverter(lineSeries: ITheme['series']['line'], theme: ITheme) { + if (!lineSeries) { + return {}; + } + const result = {} as any; + const { line = {}, label = {}, point = {} } = lineSeries; + if (line) { + result.lineStyle = {}; + const { style = {} } = line; + for (const key in style) { + if (key === 'curveType') { + const curveType = style[key]; + switch (curveType) { + case 'monotone': + case 'monotoneX': + case 'monotoneY': + result.smooth = true; + break; + case 'step': + result.step = 'middle'; + break; + case 'stepAfter': + result.step = 'end'; + break; + case 'stepBefore': + result.step = 'start'; + } + } else { + result.lineStyle[lineStyleMap[key]] = covertThemeItem(style[key], theme); + } + } + } + + if (point) { + result.itemStyle = {}; + const { style = {} } = point; + for (const key in style) { + const styleValue = style[key]; + if (key === 'symbolType') { + result.symbol = styleValue; + } else if (key === 'size') { + const symbolSize = covertThemeItem(styleValue, theme); + result.symbolSize = symbolSize; + } else { + const attr = symbolStyleMap[key]; + if (attr) { + result.itemStyle[symbolStyleMap[key]] = covertThemeItem(styleValue, theme); + } + } + } + } + + return result; +} diff --git a/packages/vchart-theme-converter/src/echarts/seriesConverter.ts b/packages/vchart-theme-converter/src/echarts/seriesConverter.ts new file mode 100644 index 0000000..f2bf434 --- /dev/null +++ b/packages/vchart-theme-converter/src/echarts/seriesConverter.ts @@ -0,0 +1,32 @@ +import type { ITheme } from '@visactor/vchart'; +import { SeriesTypeEnum } from '@visactor/vchart'; +import { lineSeriesConverter } from './series/line'; +import { merge } from '@visactor/vutils'; +import { areaSeriesConverter } from './series/area'; + +const VCHART_SERIES_TYPES = Object.keys(SeriesTypeEnum); + +const seriesConverter = { + line: lineSeriesConverter, + area: areaSeriesConverter +}; + +export function convertSeries(series: ITheme['series'], theme: ITheme) { + const result = {} as any; + + VCHART_SERIES_TYPES.forEach(type => { + if (seriesConverter[type]) { + // 这里后续可能存在问题：vchart series type 和 echarts series type 不一致 + if (type === 'area') { + if (!result.line) { + result.line = {}; + } + result.line.areaStyle = seriesConverter[type](series[type], theme); + } else { + result[type] = merge(result[type] ?? {}, seriesConverter[type](series[type], theme)); + } + } + }); + + return result; +} diff --git a/packages/vchart-theme-converter/src/echarts/textStyleConverter.ts b/packages/vchart-theme-converter/src/echarts/textStyleConverter.ts new file mode 100644 index 0000000..44d9450 --- /dev/null +++ b/packages/vchart-theme-converter/src/echarts/textStyleConverter.ts @@ -0,0 +1,15 @@ +import type { ITextMarkSpec, ITheme } from '@visactor/vchart'; +import { textStyleMap } from './convertMap'; +import { covertThemeItem } from '../util/token'; + +export function convertTextStyle(textStyle: ITextMarkSpec, theme: ITheme) { + const result = { + fontFamily: covertThemeItem(theme.fontFamily, theme) + }; + + for (const key in textStyle) { + result[textStyleMap[key] ?? key] = covertThemeItem(textStyle[key], theme); + } + + return result; +} diff --git a/packages/vchart-theme-converter/src/echarts/utils.ts b/packages/vchart-theme-converter/src/echarts/utils.ts new file mode 100644 index 0000000..20582ce --- /dev/null +++ b/packages/vchart-theme-converter/src/echarts/utils.ts @@ -0,0 +1,30 @@ +import { IColorKey, ITheme, ITokenKey } from '@visactor/vchart'; +import type { IGradientColor } from '../util/color'; +import { covertThemeItem } from '../util/token'; + +export function convertGradientColor(color: IGradientColor) { + if (color.gradient === 'linear') { + const { gradient, x0, x1, y0, y1, stops } = color; + return { + type: gradient, + x: x0, + y: y0, + x2: x1, + y2: y1, + colorStops: stops + }; + } else if (color.gradient === 'radial') { + // TODO: vchart 还支持 x1/y1/r1，该如何匹配 + const { gradient, x0, r0, y0, stops } = color; + return { + type: gradient, + x: x0, + y: y0, + r: r0, + colorStops: stops + }; + } + + // conical 渐变 echarts 不支持 + return {}; +} diff --git a/packages/vchart-theme-converter/src/global.d.ts b/packages/vchart-theme-converter/src/global.d.ts new file mode 100644 index 0000000..415c2c8 --- /dev/null +++ b/packages/vchart-theme-converter/src/global.d.ts @@ -0,0 +1 @@ +declare const __VERSION__: string; diff --git a/packages/vchart-theme-converter/src/index.ts b/packages/vchart-theme-converter/src/index.ts new file mode 100644 index 0000000..e1a9225 --- /dev/null +++ b/packages/vchart-theme-converter/src/index.ts @@ -0,0 +1 @@ +export * from './echarts/index'; diff --git a/packages/vchart-theme-converter/src/util/color.ts b/packages/vchart-theme-converter/src/util/color.ts new file mode 100644 index 0000000..b16dd05 --- /dev/null +++ b/packages/vchart-theme-converter/src/util/color.ts @@ -0,0 +1,76 @@ +import type { + IColorSchemeStruct, + ITheme as IVChartTheme, + ProgressiveDataScheme, + DataSchemeItem, + ColorScheme, + IColorKey +} from '@visactor/vchart'; +import { isArray, isObject, isString } from '@visactor/vutils'; +import { tokenOrPaletteToValue } from './token'; + +export function convertColorPlatte(colorScheme: IVChartTheme['colorScheme'], token: IVChartTheme['token']): string[] { + if (!colorScheme) { + return []; + } + // process default + const { default: defaultColorScheme } = colorScheme; + if (defaultColorScheme) { + if (isArray(defaultColorScheme)) { + // 简单数组配置 + if (!isProgressiveDataScheme(defaultColorScheme)) { + if (isColorStringArray(defaultColorScheme)) { + return defaultColorScheme; + } + // 处理 palette + return []; + } + // 渐进色板配置 + // ECharts 暂时不支持渐进式色板配置，这里简单取第一项的值 + return (defaultColorScheme as ProgressiveDataScheme)[0].scheme; + } + } + + if (isObject(defaultColorScheme)) { + const { dataScheme } = defaultColorScheme as IColorSchemeStruct; + if (dataScheme) { + if (isArray(dataScheme)) { + // 简单数组配置 + if (!isProgressiveDataScheme(dataScheme)) { + if (isColorStringArray(dataScheme)) { + return dataScheme; + } + // 处理 palette + return []; + } + // 渐进色板配置 + // ECharts 暂时不支持渐进式色板配置，这里简单取第一项的值 + return (dataScheme as ProgressiveDataScheme)[0].scheme; + } + } + } + + // TODO: 支持不同系列配置不同色板 + return []; +} + +function isProgressiveDataScheme( + dataScheme: IColorSchemeStruct['dataScheme'] | ColorScheme +): dataScheme is ProgressiveDataScheme { + return Array.prototype.every.call(dataScheme, color => color.scheme); +} + +function isColorStringArray(colorArr: string[] | DataSchemeItem[]): colorArr is string[] { + return Array.prototype.every.call(colorArr, color => isString(color)); +} + +// TODO: 引入 vrender 类型？ +export type IGradientColor = { gradient: 'linear' | 'radial' | 'conical'; [key: string]: any }; + +export function convertObjectColor(color: IColorKey | IGradientColor, theme: IVChartTheme) { + if ('gradient' in color) { + // TODO: 处理渐变色 + return color; + } + return tokenOrPaletteToValue(color, theme); +} diff --git a/packages/vchart-theme-converter/src/util/token.ts b/packages/vchart-theme-converter/src/util/token.ts new file mode 100644 index 0000000..cb55a82 --- /dev/null +++ b/packages/vchart-theme-converter/src/util/token.ts @@ -0,0 +1,32 @@ +import type { ITokenKey, IColorKey, ITheme as IVChartTheme, IColorSchemeStruct, ITheme } from '@visactor/vchart'; +import { isValid } from '@visactor/vutils'; + +export function tokenOrPaletteToValue(object: ITokenKey | IColorKey, theme: IVChartTheme) { + if (object.type === 'palette') { + const { colorScheme } = theme; + if (colorScheme) { + const { palette } = (colorScheme.default ?? {}) as IColorSchemeStruct; + if (palette) { + return palette[object.key] ?? object.default; + } + // TODO: 处理 l（亮度）/a（透明度） + } + } else if (object.type === 'token') { + const { token } = theme; + if (token) { + return token[object.key]; + } + } + return undefined; +} + +export function isTokenOrPalette(value: ITokenKey | IColorKey | any): boolean { + return value?.type === 'palette' || value?.type === 'token'; +} + +export function covertThemeItem(vchartStyle: ITokenKey | IColorKey | any, theme: ITheme) { + if (!isValid(vchartStyle)) { + return; + } + return isTokenOrPalette(vchartStyle) ? tokenOrPaletteToValue(vchartStyle, theme) : vchartStyle; +} diff --git a/packages/vchart-theme-converter/tsconfig.eslint.json b/packages/vchart-theme-converter/tsconfig.eslint.json new file mode 100644 index 0000000..05b65c2 --- /dev/null +++ b/packages/vchart-theme-converter/tsconfig.eslint.json @@ -0,0 +1,11 @@ +{ + "extends": "@internal/ts-config/tsconfig.base.json", + "compilerOptions": { + "types": ["jest", "offscreencanvas", "node"], + "lib": ["DOM", "ESNext"], + "baseUrl": "./", + "rootDir": "./" + }, + "include": ["src", "demo"] + // "exclude": ["bugserver-config"] +} diff --git a/packages/vchart-theme-converter/tsconfig.json b/packages/vchart-theme-converter/tsconfig.json new file mode 100644 index 0000000..47fb0bf --- /dev/null +++ b/packages/vchart-theme-converter/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "@internal/ts-config/tsconfig.base.json", + "compilerOptions": { + "baseUrl": ".", + "outDir": "output" + }, + "include": [ + "src" + ] +} diff --git a/rush.json b/rush.json index cdd88f5..153b1e0 100644 --- a/rush.json +++ b/rush.json @@ -19,6 +19,11 @@ }, "allowedProjectTags": ["tool", "share", "package", "doc"], "projects": [ + { + "packageName": "@visactor/vchart-theme-converter", + "projectFolder": "packages/vchart-theme-converter", + "shouldPublish": false + }, { "packageName": "@visactor/vchart-theme-demo-component", "projectFolder": "packages/vchart-theme-demo-component", @@ -99,4 +104,4 @@ "shouldPublish": false } ] -} +} \ No newline at end of file diff --git a/share/eslint-config/profile/common.js b/share/eslint-config/profile/common.js index 55f849a..a719b65 100644 --- a/share/eslint-config/profile/common.js +++ b/share/eslint-config/profile/common.js @@ -1,15 +1,11 @@ -var baseFiles = ["*.ts"]; -var baseExtends = [ - "plugin:@typescript-eslint/recommended", - "plugin:promise/recommended", - "prettier", -]; +var baseFiles = ['*.ts']; +var baseExtends = ['plugin:@typescript-eslint/recommended', 'plugin:promise/recommended', 'prettier']; var reactExtends = [ - "plugin:react/recommended", + 'plugin:react/recommended', // https://github.com/jsx-eslint/eslint-plugin-react/blob/HEAD/docs/rules/react-in-jsx-scope.md 'plugin:react/jsx-runtime', - "plugin:react-hooks/recommended", + 'plugin:react-hooks/recommended' ]; /** @@ -24,261 +20,261 @@ module.exports = function buildConfig(type) { var _extends = baseExtends; - if (type === "react") { - baseFiles.push("*.tsx"); + if (type === 'react') { + baseFiles.push('*.tsx'); _extends = baseExtends.concat(reactExtends); isJsx = true; settings.react = { - createClass: "createReactClass", - pragma: "React", - version: "detect", - flowVersion: "0.53", + createClass: 'createReactClass', + pragma: 'React', + version: 'detect', + flowVersion: '0.53' }; reactRules = { - "react/prop-types": "off", - "react-hooks/rules-of-hooks": "warn", - "react/react-in-jsx-scope": "off" + 'react/prop-types': 'off', + 'react-hooks/rules-of-hooks': 'warn', + 'react/react-in-jsx-scope': 'off' }; } return { root: true, // Disable the parser by default - parser: "", + parser: '', env: { browser: true, - es2021: true, + // es2021: true, node: true, - jest: true, + jest: true }, // Manually authored .d.ts files are generally used to describe external APIs that are not expected // to follow our coding conventions. Linting those files tends to produce a lot of spurious suppressions, // so we simply ignore them. - ignorePatterns: ["*.d.ts", "dist/**", "vite/**"], + ignorePatterns: ['*.d.ts', 'dist/**', 'vite/**'], overrides: [ { // Declare an override that applies to TypeScript files only files: baseFiles, - parser: "@typescript-eslint/parser", + parser: '@typescript-eslint/parser', extends: _extends, parserOptions: { // The "project" path is resolved relative to parserOptions.tsconfigRootDir. // Your local .eslintrc.js must specify that parserOptions.tsconfigRootDir=__dirname. - project: "./tsconfig.json", + project: './tsconfig.json', // Allow parsing of newer ECMAScript constructs used in TypeScript source code. Although tsconfig.json // may allow only a small subset of ES2018 features, this liberal setting ensures that ESLint will correctly // parse whatever is encountered. ecmaVersion: 2018, - sourceType: "module", + sourceType: 'module', ecmaFeatures: { - jsx: isJsx, - }, + jsx: isJsx + } }, settings: settings, rules: { - "@typescript-eslint/no-explicit-any": "off", - "@typescript-eslint/ban-ts-comment": "off", - "promise/always-return": "off", - "promise/no-callback-in-promise": "off", + '@typescript-eslint/no-explicit-any': 'off', + '@typescript-eslint/ban-ts-comment': 'off', + 'promise/always-return': 'off', + 'promise/no-callback-in-promise': 'off', // "prettier/prettier": ["error"], // 强制使用 Unix 换行符： \n - "linebreak-style": ["error", "unix"], + 'linebreak-style': ['error', 'unix'], // 强制换行时操作符在行首 // 与prettier冲突 // "operator-linebreak": ["error", "before", { "overrides": { "=": "after" } }], // 允许给能自动推断出类型的primitive类型变量额外添加类型声明 - "@typescript-eslint/no-inferrable-types": "off", + '@typescript-eslint/no-inferrable-types': 'off', // 在类型导入时推荐import type写法 - "@typescript-eslint/consistent-type-imports": "warn", + '@typescript-eslint/consistent-type-imports': 'warn', // 禁止出现空接口定义 - "@typescript-eslint/no-empty-interface": "error", + '@typescript-eslint/no-empty-interface': 'error', // 禁止出现空函数 - "@typescript-eslint/no-empty-function": "error", - "@typescript-eslint/no-this-alias": "off", + '@typescript-eslint/no-empty-function': 'error', + '@typescript-eslint/no-this-alias': 'off', // 禁止使用namespace - "@typescript-eslint/no-namespace": "error", + '@typescript-eslint/no-namespace': 'error', // 禁止使用for-in Array - "@typescript-eslint/no-for-in-array": "error", + '@typescript-eslint/no-for-in-array': 'error', // 禁止在optional chain语句后加非空断言 - "@typescript-eslint/no-non-null-asserted-optional-chain": "error", + '@typescript-eslint/no-non-null-asserted-optional-chain': 'error', // 接口定义中使用函数属性而不是对象方法声明 - "@typescript-eslint/method-signature-style": "error", + '@typescript-eslint/method-signature-style': 'error', // 默认省略除属性以外的public修饰符 - "@typescript-eslint/explicit-member-accessibility": [ - "warn", + '@typescript-eslint/explicit-member-accessibility': [ + 'warn', { overrides: { - accessors: "off", - constructors: "no-public", - methods: "no-public", - properties: "no-public", - parameterProperties: "explicit", - }, - }, + accessors: 'off', + constructors: 'no-public', + methods: 'no-public', + properties: 'no-public', + parameterProperties: 'explicit' + } + } ], - "no-console": [ + 'no-console': [ 2, { - allow: ["warn", "error"], - }, + allow: ['warn', 'error'] + } ], // 如果一个变量不会被重新赋值，最好使用const进行声明 - "prefer-const": 2, + 'prefer-const': 2, // 禁止在条件中使用常量表达式 - "no-constant-condition": 0, - "no-debugger": 2, + 'no-constant-condition': 0, + 'no-debugger': 2, // 禁止对象字面量中出现重复的 key - "no-dupe-keys": 2, + 'no-dupe-keys': 2, // 禁止在正则表达式中使用空字符集 - "no-empty-character-class": 2, + 'no-empty-character-class': 2, // 禁止对 catch 子句的参数重新赋值 - "no-ex-assign": 2, - "no-extra-boolean-cast": 0, + 'no-ex-assign': 2, + 'no-extra-boolean-cast': 0, // 禁止对 function 声明重新赋值 - "no-func-assign": 2, + 'no-func-assign': 2, // 禁止在嵌套的块中出现变量声明或 function 声明 - "no-inner-declarations": 2, + 'no-inner-declarations': 2, // 禁止 RegExp 构造函数中存在无效的正则表达式字符串 - "no-invalid-regexp": 2, + 'no-invalid-regexp': 2, // 禁止对关系运算符的左操作数使用否定操作符 - "no-unsafe-negation": 2, + 'no-unsafe-negation': 2, // 禁止把全局对象作为函数调用 - "no-obj-calls": 2, + 'no-obj-calls': 2, // 禁用稀疏数组 - "no-sparse-arrays": 2, + 'no-sparse-arrays': 2, // 禁止在 return、throw、continue 和 break 语句之后出现不可达代码 - "no-unreachable": 2, + 'no-unreachable': 2, // 要求使用 isNaN() 检查 NaN - "use-isnan": 2, + 'use-isnan': 2, // 强制 typeof 表达式与有效的字符串进行比较 - "valid-typeof": 2, + 'valid-typeof': 2, // 要求使用 === 和 !==，除了与 null 字面量进行比较时 eqeqeq: [ - "error", - "always", + 'error', + 'always', { - null: "ignore", - }, + null: 'ignore' + } ], // 允许 if 语句中 return 语句之后有 else 块 - "no-else-return": 1, + 'no-else-return': 1, // 禁用标签语句 - "no-labels": [ + 'no-labels': [ 2, { // 忽略循环语句中的标签 - allowLoop: true, - }, + allowLoop: true + } ], // 禁用 eval() - "no-eval": 2, + 'no-eval': 2, // 禁止扩展原生类型 - "no-extend-native": 2, + 'no-extend-native': 2, // 禁止不必要的 .bind() 调用 - "no-extra-bind": 0, + 'no-extra-bind': 0, // 禁止使用类似 eval() 的方法 - "no-implied-eval": 2, + 'no-implied-eval': 2, // 禁用 __iterator__ 属性 - "no-iterator": 2, + 'no-iterator': 2, // 禁止不规则的空白 - "no-irregular-whitespace": 2, + 'no-irregular-whitespace': 2, // 禁用不必要的嵌套块 - "no-lone-blocks": 2, + 'no-lone-blocks': 2, // 禁止循环中存在函数 - "no-loop-func": 2, + 'no-loop-func': 2, // 禁止多行字符串 - "no-multi-str": 2, + 'no-multi-str': 2, // 禁止对原生对象或只读的全局对象进行赋值 - "no-global-assign": 2, + 'no-global-assign': 2, // 禁止对 String，Number 和 Boolean 使用 new 操作符 - "no-new-wrappers": 2, + 'no-new-wrappers': 2, // 禁用八进制字面量 - "no-octal": 2, + 'no-octal': 2, // 禁止在字符串中使用八进制转义序列 - "no-octal-escape": 2, + 'no-octal-escape': 2, // 禁用 __proto__ 属性 - "no-proto": 2, + 'no-proto': 2, // 禁止自身比较 - "no-self-compare": 2, + 'no-self-compare': 2, // 禁止可以在有更简单的可替代的表达式时使用三元操作符 - "no-unneeded-ternary": 2, + 'no-unneeded-ternary': 2, // 禁用 with 语句 - "no-with": 2, + 'no-with': 2, // 强制在 parseInt() 使用基数参数 radix: 2, // 要求 IIFE 使用括号括起来 - "wrap-iife": [2, "any"], + 'wrap-iife': [2, 'any'], // 禁止删除变量 - "no-delete-var": 2, + 'no-delete-var': 2, // 禁止 function 定义中出现重名参数 - "no-dupe-args": 2, + 'no-dupe-args': 2, // 禁止出现重复的 case 标签 - "no-duplicate-case": 2, + 'no-duplicate-case': 2, // 不允许标签与变量同名 - "no-label-var": 2, + 'no-label-var': 2, // 禁止将标识符定义为受限的名字 - "no-shadow-restricted-names": 2, + 'no-shadow-restricted-names': 2, // 禁用未声明的变量，除非它们在 /*global */ 注释中被提到 - "no-undef": 2, + 'no-undef': 2, // 禁止将变量初始化为 undefined - "no-undef-init": 2, + 'no-undef-init': 2, // 允许在变量定义之前使用它们 - "no-use-before-define": "off", - "@typescript-eslint/no-use-before-define": 0, + 'no-use-before-define': 'off', + '@typescript-eslint/no-use-before-define': 0, // 强制或禁止调用无参构造函数时有圆括号 - "new-parens": 2, + 'new-parens': 2, // 禁用 Array 构造函数 - "no-array-constructor": 2, + 'no-array-constructor': 2, // 禁用 Object 的构造函数 - "no-new-object": 2, + 'no-new-object': 2, // 禁止不必要的括号 - "no-extra-parens": [2, "functions"], + 'no-extra-parens': [2, 'functions'], // 禁止使用 空格 和 tab 混合缩进 - "no-mixed-spaces-and-tabs": 2, + 'no-mixed-spaces-and-tabs': 2, // 强制函数中的变量在分开声明 - "one-var": [2, "never"], + 'one-var': [2, 'never'], // 建议回调函数最大嵌套深度不超过5 - "max-nested-callbacks": [1, 5], + 'max-nested-callbacks': [1, 5], // 建议可嵌套的块的最大深度不超过6 - "max-depth": [1, 6], + 'max-depth': [1, 6], // 强制一行的最大长度不超过120，不包括注释和url - "max-len": [ - "error", + 'max-len': [ + 'error', { code: 120, ignoreUrls: true, - ignoreComments: true, - }, + ignoreComments: true + } ], // 建议函数定义中最多允许的参数数量不超过15个 - "max-params": [1, 15], + 'max-params': [1, 15], // 强制非一元操作符周围有空格 - "space-infix-ops": 2, + 'space-infix-ops': 2, // 强制尽可能地使用点号 - "dot-notation": [ + 'dot-notation': [ 2, { // 避免对是保留字的属性使用点号 allowKeywords: true, - allowPattern: "^catch$", - }, + allowPattern: '^catch$' + } ], // 强制箭头函数的箭头前后使用一致的空格 - "arrow-spacing": 2, + 'arrow-spacing': 2, // 要求在构造函数中有 super() 的调用 - "constructor-super": 2, + 'constructor-super': 2, // 禁止在可能与比较操作符相混淆的地方使用箭头函数 // 与prettier冲突 // "no-confusing-arrow": [ @@ -289,55 +285,45 @@ module.exports = function buildConfig(type) { // } // ], // 禁止修改类声明的变量 - "no-class-assign": 2, + 'no-class-assign': 2, // 禁止修改 const 声明的变量 - "no-const-assign": 2, + 'no-const-assign': 2, // 允许在构造函数中，在调用 super() 之前使用 this 或 super - "no-this-before-super": 0, + 'no-this-before-super': 0, // 要求使用 let 或 const 而不是 var - "no-var": 2, + 'no-var': 2, // 重复模块导入 - "no-duplicate-imports": 1, + 'no-duplicate-imports': 1, // 建议使用剩余参数而不是 arguments - "prefer-rest-params": 1, + 'prefer-rest-params': 1, // 禁止 Unicode 字节顺序标记 (BOM) - "unicode-bom": 2, + 'unicode-bom': 2, // 强制每一行中所允许的最大语句数量为2 - "max-statements-per-line": 2, + 'max-statements-per-line': 2, // 允许不必要的构造函数 - "no-useless-constructor": 0, + 'no-useless-constructor': 0, // 允许在函数标识符和其调用之间有空格 - "func-call-spacing": "off", - "@typescript-eslint/func-call-spacing": "error", + 'func-call-spacing': 'off', + '@typescript-eslint/func-call-spacing': 'error', // 允许出现未使用过的变量 - "no-unused-vars": "off", - "@typescript-eslint/no-unused-vars": [ + 'no-unused-vars': 'off', + '@typescript-eslint/no-unused-vars': [ 1, { // 仅仅检测本作用域中声明的变量是否使用，允许不使用全局环境中的变量。 - vars: "local", + vars: 'local', // 不检查参数 - args: "none", - }, + args: 'none' + } ], // 禁用特定的全局变量 - "no-restricted-globals": [ - 2, - "event", - "name", - "length", - "orientation", - "top", - "parent", - "location", - "closed", - ], + 'no-restricted-globals': [2, 'event', 'name', 'length', 'orientation', 'top', 'parent', 'location', 'closed'], // 不允许省略大括号 - curly: "error", - "promise/catch-or-return": "warn", - ...reactRules, - }, - }, - ], + curly: 'error', + 'promise/catch-or-return': 'warn', + ...reactRules + } + } + ] }; }; From e1e6213a35e37320f186127667b2481548881edd Mon Sep 17 00:00:00 2001 From: xiaoluoHe Date: Tue, 2 Jul 2024 16:09:29 +0800 Subject: [PATCH 02/16] feat: support funnel series & code refactor --- .../vchart-theme-converter/demo/src/App.tsx | 13 +- .../vchart-theme-converter/demo/src/Chart.tsx | 6 +- .../demo/src/spec/echarts/bar.ts | 116 ++++ .../demo/src/spec/echarts/funnel.ts | 22 + .../demo/src/spec/echarts/line.ts | 11 +- .../demo/src/spec/echarts/pie.ts | 32 ++ .../demo/src/spec/vchart/bar.ts | 542 ++++++++++++++++++ .../demo/src/spec/vchart/funnel.ts | 18 + .../demo/src/spec/vchart/line.ts | 16 +- .../demo/src/spec/vchart/pie.ts | 30 + .../src/echarts/component/crosshair.ts | 45 ++ .../src/echarts/component/discreteLegend.ts | 40 +- .../src/echarts/component/title.ts | 24 +- .../src/echarts/component/tooltip.ts | 5 +- .../src/echarts/componentConverter.ts | 4 +- .../src/echarts/convertMap.ts | 32 +- .../src/echarts/series/area.ts | 38 +- .../src/echarts/series/bar.ts | 50 ++ .../src/echarts/series/funnel.ts | 27 + .../src/echarts/series/line.ts | 79 +-- .../src/echarts/series/pie.ts | 36 ++ .../src/echarts/seriesConverter.ts | 12 +- .../src/echarts/utils.ts | 23 +- .../vchart-theme-converter/src/util/token.ts | 12 +- 24 files changed, 1105 insertions(+), 128 deletions(-) create mode 100644 packages/vchart-theme-converter/demo/src/spec/echarts/bar.ts create mode 100644 packages/vchart-theme-converter/demo/src/spec/echarts/funnel.ts create mode 100644 packages/vchart-theme-converter/demo/src/spec/echarts/pie.ts create mode 100644 packages/vchart-theme-converter/demo/src/spec/vchart/bar.ts create mode 100644 packages/vchart-theme-converter/demo/src/spec/vchart/funnel.ts create mode 100644 packages/vchart-theme-converter/demo/src/spec/vchart/pie.ts create mode 100644 packages/vchart-theme-converter/src/echarts/component/crosshair.ts create mode 100644 packages/vchart-theme-converter/src/echarts/series/bar.ts create mode 100644 packages/vchart-theme-converter/src/echarts/series/funnel.ts create mode 100644 packages/vchart-theme-converter/src/echarts/series/pie.ts diff --git a/packages/vchart-theme-converter/demo/src/App.tsx b/packages/vchart-theme-converter/demo/src/App.tsx index 2eab536..4ecacc8 100644 --- a/packages/vchart-theme-converter/demo/src/App.tsx +++ b/packages/vchart-theme-converter/demo/src/App.tsx @@ -1,10 +1,21 @@ import React from 'react'; import { spec as vchartLineSpec } from './spec/vchart/line'; import { spec as echartsLineOption } from './spec/echarts/line'; +import { spec as vchartBarSpec } from './spec/vchart/bar'; +import { spec as echartsBarOption } from './spec/echarts/bar'; +import { spec as vchartPieSpec } from './spec/vchart/pie'; +import { spec as echartsPieOption } from './spec/echarts/pie'; +import { spec as vchartFunnelSpec } from './spec/vchart/funnel'; +import { spec as echartsFunnelOption } from './spec/echarts/funnel'; import { Charts } from './Chart'; import './index.css'; -const demoList = [{ vchartSpec: vchartLineSpec, echartsOption: echartsLineOption }]; +const demoList = [ + { vchartSpec: vchartLineSpec, echartsOption: echartsLineOption }, + { vchartSpec: vchartBarSpec, echartsOption: echartsBarOption }, + { vchartSpec: vchartPieSpec, echartsOption: echartsPieOption }, + { vchartSpec: vchartFunnelSpec, echartsOption: echartsFunnelOption } +]; function App() { return ( diff --git a/packages/vchart-theme-converter/demo/src/Chart.tsx b/packages/vchart-theme-converter/demo/src/Chart.tsx index 4182753..5598c29 100644 --- a/packages/vchart-theme-converter/demo/src/Chart.tsx +++ b/packages/vchart-theme-converter/demo/src/Chart.tsx @@ -2,10 +2,10 @@ import React, { useEffect, useRef } from 'react'; import * as echarts from 'echarts'; import VChart from '@visactor/vchart'; import { initVChartSemiTheme } from '@visactor/vchart-semi-theme'; -import { ECTheme } from '../public/echarts-theme'; import { VC2EC } from '../../src/index'; initVChartSemiTheme({ isWatchingMode: true }); + const echartsTheme = VC2EC(VChart.ThemeManager.getCurrentTheme()); console.log(echartsTheme); console.log(VChart.ThemeManager.getCurrentTheme()); @@ -54,8 +54,8 @@ export function Charts(props: { echartsOption: any; vchartSpec: any }) { display: 'flex' }} > -
-
+
+
); diff --git a/packages/vchart-theme-converter/demo/src/spec/echarts/bar.ts b/packages/vchart-theme-converter/demo/src/spec/echarts/bar.ts new file mode 100644 index 0000000..96ece11 --- /dev/null +++ b/packages/vchart-theme-converter/demo/src/spec/echarts/bar.ts @@ -0,0 +1,116 @@ +const series = [ + { + data: [154, 153, 151, 135, 997, 984, 943], + type: 'bar', + stack: 'Dessert', + name: 'Cake', + label: { show: true }, + showBackground: true + }, + { + data: [378, 398, 408, 407, 363, 356, 355], + type: 'bar', + stack: 'Dessert', + name: 'Bread', + label: { show: true }, + showBackground: true + }, + { + data: [103, 105, 110, 944, 636, 627, 611], + type: 'bar', + stack: 'Drink', + name: 'Tea', + label: { show: true }, + showBackground: true + }, + { + data: [310, 298, 302, 298, 239, 241, 259], + type: 'bar', + stack: 'Drink', + name: 'Coffee', + label: { show: true }, + showBackground: true + }, + { + data: [419, 416, 400, 343, 204, 231, 230], + type: 'bar', + stack: 'Meat dishes', + name: 'Rib', + label: { show: true }, + showBackground: true + }, + { + data: [810, 796, 811, 771, 641, 646, 666], + type: 'bar', + stack: 'Meat dishes', + name: 'Crayfish', + label: { show: true }, + showBackground: true + }, + { + data: [-365, -522, -352, -471, -319, -346, -326], + type: 'bar', + stack: 'Dessert', + name: 'Cake(last week)', + label: { show: true }, + showBackground: true + }, + { + data: [-235, -258, -760, -535, -570, -373, -879], + type: 'bar', + stack: 'Dessert', + name: 'Bread(last week)', + label: { show: true }, + showBackground: true + }, + { + data: [-832, -689, -332, -319, -532, -582, -219], + type: 'bar', + stack: 'Drink', + name: 'Tea(last week)', + label: { show: true }, + showBackground: true + }, + { + data: [-610, -688, -368, -363, -312, -247, -236], + type: 'bar', + stack: 'Drink', + name: 'Coffee(last week)', + label: { show: true }, + showBackground: true + }, + { + data: [-305, -106, -222, -243, -583, -294, -153], + type: 'bar', + stack: 'Meat dishes', + name: 'Rib(last week)', + label: { show: true }, + showBackground: true + }, + { + data: [-462, -159, -205, -129, -342, -165, -253], + type: 'bar', + stack: 'Meat dishes', + name: 'Crayfish(last week)', + label: { show: true } + } +]; + +export const spec = { + legend: { + bottom: 0, + type: 'scroll', + showBackground: true + }, + xAxis: { + type: 'category', + data: ['2019-08-29', '2019-08-30', '2019-08-31', '2019-09-01', '2019-09-02', '2019-09-03', '2019-09-04'], + showBackground: true + }, + yAxis: { + type: 'value', + name: 'Week-on-week (sales)', + showBackground: true + }, + series +}; diff --git a/packages/vchart-theme-converter/demo/src/spec/echarts/funnel.ts b/packages/vchart-theme-converter/demo/src/spec/echarts/funnel.ts new file mode 100644 index 0000000..3269970 --- /dev/null +++ b/packages/vchart-theme-converter/demo/src/spec/echarts/funnel.ts @@ -0,0 +1,22 @@ +export const spec = { + legend: { + data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order'] + }, + series: [ + { + name: 'Funnel', + type: 'funnel', + label: { + show: true + }, + labelLine: {}, + data: [ + { value: 100, name: 'Show' }, + { value: 80, name: 'Click' }, + { value: 60, name: 'Visit' }, + { value: 40, name: 'Inquiry' }, + { value: 20, name: 'Order' } + ] + } + ] +}; diff --git a/packages/vchart-theme-converter/demo/src/spec/echarts/line.ts b/packages/vchart-theme-converter/demo/src/spec/echarts/line.ts index d0ce203..3f74a9c 100644 --- a/packages/vchart-theme-converter/demo/src/spec/echarts/line.ts +++ b/packages/vchart-theme-converter/demo/src/spec/echarts/line.ts @@ -1,12 +1,9 @@ export const spec = { tooltip: { - trigger: 'axis', - axisPointer: { - type: 'cross', - label: { - backgroundColor: '#6a7985' - } - } + // trigger: 'axis' + }, + axisPointer: { + label: { show: true } }, title: { visible: true, diff --git a/packages/vchart-theme-converter/demo/src/spec/echarts/pie.ts b/packages/vchart-theme-converter/demo/src/spec/echarts/pie.ts new file mode 100644 index 0000000..941e726 --- /dev/null +++ b/packages/vchart-theme-converter/demo/src/spec/echarts/pie.ts @@ -0,0 +1,32 @@ +export const spec = { + legend: { + data: ['Apple', 'Grapes', 'Pineapples', 'Oranges', 'Bananas'] + }, + series: [ + { + type: 'pie', + data: [ + { + value: 335, + name: 'Apple' + }, + { + value: 310, + name: 'Grapes' + }, + { + value: 234, + name: 'Pineapples' + }, + { + value: 135, + name: 'Oranges' + }, + { + value: 1548, + name: 'Bananas' + } + ] + } + ] +}; diff --git a/packages/vchart-theme-converter/demo/src/spec/vchart/bar.ts b/packages/vchart-theme-converter/demo/src/spec/vchart/bar.ts new file mode 100644 index 0000000..3d972e2 --- /dev/null +++ b/packages/vchart-theme-converter/demo/src/spec/vchart/bar.ts @@ -0,0 +1,542 @@ +export const spec = { + type: 'bar', + data: [ + { + id: 'barData', + values: [ + { + date: '2019-08-29', + group: 'Cake', + value: 154, + stack: 'Dessert' + }, + { + date: '2019-08-29', + group: 'Bread', + value: 378, + stack: 'Dessert' + }, + { + date: '2019-08-29', + group: 'Tea', + value: 103, + stack: 'Drink' + }, + { + date: '2019-08-29', + group: 'Coffee', + value: 310, + stack: 'Drink' + }, + { + date: '2019-08-29', + group: 'Rib', + value: 419, + stack: 'Meat dishes' + }, + { + date: '2019-08-29', + group: 'Crayfish', + value: 810, + stack: 'Meat dishes' + }, + { + date: '2019-08-30', + group: 'Cake', + value: 153, + stack: 'Dessert' + }, + { + date: '2019-08-30', + group: 'Bread', + value: 398, + stack: 'Dessert' + }, + { + date: '2019-08-30', + group: 'Tea', + value: 105, + stack: 'Drink' + }, + { + date: '2019-08-30', + group: 'Coffee', + value: 298, + stack: 'Drink' + }, + { + date: '2019-08-30', + group: 'Rib', + value: 416, + stack: 'Meat dishes' + }, + { + date: '2019-08-30', + group: 'Crayfish', + value: 796, + stack: 'Meat dishes' + }, + { + date: '2019-08-31', + group: 'Cake', + value: 151, + stack: 'Dessert' + }, + { + date: '2019-08-31', + group: 'Bread', + value: 408, + stack: 'Dessert' + }, + { + date: '2019-08-31', + group: 'Tea', + value: 110, + stack: 'Drink' + }, + { + date: '2019-08-31', + group: 'Coffee', + value: 302, + stack: 'Drink' + }, + { + date: '2019-08-31', + group: 'Rib', + value: 400, + stack: 'Meat dishes' + }, + { + date: '2019-08-31', + group: 'Crayfish', + value: 811, + stack: 'Meat dishes' + }, + { + date: '2019-09-01', + group: 'Cake', + value: 135, + stack: 'Dessert' + }, + { + date: '2019-09-01', + group: 'Bread', + value: 407, + stack: 'Dessert' + }, + { + date: '2019-09-01', + group: 'Tea', + value: 944, + stack: 'Drink' + }, + { + date: '2019-09-01', + group: 'Coffee', + value: 298, + stack: 'Drink' + }, + { + date: '2019-09-01', + group: 'Rib', + value: 343, + stack: 'Meat dishes' + }, + { + date: '2019-09-01', + group: 'Crayfish', + value: 771, + stack: 'Meat dishes' + }, + { + date: '2019-09-02', + group: 'Cake', + value: 997, + stack: 'Dessert' + }, + { + date: '2019-09-02', + group: 'Bread', + value: 363, + stack: 'Dessert' + }, + { + date: '2019-09-02', + group: 'Tea', + value: 636, + stack: 'Drink' + }, + { + date: '2019-09-02', + group: 'Coffee', + value: 239, + stack: 'Drink' + }, + { + date: '2019-09-02', + group: 'Rib', + value: 204, + stack: 'Meat dishes' + }, + { + date: '2019-09-02', + group: 'Crayfish', + value: 641, + stack: 'Meat dishes' + }, + { + date: '2019-09-03', + group: 'Cake', + value: 984, + stack: 'Dessert' + }, + { + date: '2019-09-03', + group: 'Bread', + value: 356, + stack: 'Dessert' + }, + { + date: '2019-09-03', + group: 'Tea', + value: 627, + stack: 'Drink' + }, + { + date: '2019-09-03', + group: 'Coffee', + value: 241, + stack: 'Drink' + }, + { + date: '2019-09-03', + group: 'Rib', + value: 231, + stack: 'Meat dishes' + }, + { + date: '2019-09-03', + group: 'Crayfish', + value: 646, + stack: 'Meat dishes' + }, + { + date: '2019-09-04', + group: 'Cake', + value: 943, + stack: 'Dessert' + }, + { + date: '2019-09-04', + group: 'Bread', + value: 355, + stack: 'Dessert' + }, + { + date: '2019-09-04', + group: 'Tea', + value: 611, + stack: 'Drink' + }, + { + date: '2019-09-04', + group: 'Coffee', + value: 259, + stack: 'Drink' + }, + { + date: '2019-09-04', + group: 'Rib', + value: 230, + stack: 'Meat dishes' + }, + { + date: '2019-09-04', + group: 'Crayfish', + value: 666, + stack: 'Meat dishes' + }, + { + date: '2019-08-29', + group: 'Cake(last week)', + value: -365, + stack: 'Dessert' + }, + { + date: '2019-08-29', + group: 'Bread(last week)', + value: -235, + stack: 'Dessert' + }, + { + date: '2019-08-29', + group: 'Tea(last week)', + value: -832, + stack: 'Drink' + }, + { + date: '2019-08-29', + group: 'Coffee(last week)', + value: -610, + stack: 'Drink' + }, + { + date: '2019-08-29', + group: 'Rib(last week)', + value: -305, + stack: 'Meat dishes' + }, + { + date: '2019-08-29', + group: 'Crayfish(last week)', + value: -462, + stack: 'Meat dishes' + }, + { + date: '2019-08-30', + group: 'Cake(last week)', + value: -522, + stack: 'Dessert' + }, + { + date: '2019-08-30', + group: 'Bread(last week)', + value: -258, + stack: 'Dessert' + }, + { + date: '2019-08-30', + group: 'Tea(last week)', + value: -689, + stack: 'Drink' + }, + { + date: '2019-08-30', + group: 'Coffee(last week)', + value: -688, + stack: 'Drink' + }, + { + date: '2019-08-30', + group: 'Rib(last week)', + value: -106, + stack: 'Meat dishes' + }, + { + date: '2019-08-30', + group: 'Crayfish(last week)', + value: -159, + stack: 'Meat dishes' + }, + { + date: '2019-08-31', + group: 'Cake(last week)', + value: -352, + stack: 'Dessert' + }, + { + date: '2019-08-31', + group: 'Bread(last week)', + value: -760, + stack: 'Dessert' + }, + { + date: '2019-08-31', + group: 'Tea(last week)', + value: -332, + stack: 'Drink' + }, + { + date: '2019-08-31', + group: 'Coffee(last week)', + value: -368, + stack: 'Drink' + }, + { + date: '2019-08-31', + group: 'Rib(last week)', + value: -222, + stack: 'Meat dishes' + }, + { + date: '2019-08-31', + group: 'Crayfish(last week)', + value: -205, + stack: 'Meat dishes' + }, + { + date: '2019-09-01', + group: 'Cake(last week)', + value: -471, + stack: 'Dessert' + }, + { + date: '2019-09-01', + group: 'Bread(last week)', + value: -535, + stack: 'Dessert' + }, + { + date: '2019-09-01', + group: 'Tea(last week)', + value: -319, + stack: 'Drink' + }, + { + date: '2019-09-01', + group: 'Coffee(last week)', + value: -363, + stack: 'Drink' + }, + { + date: '2019-09-01', + group: 'Rib(last week)', + value: -243, + stack: 'Meat dishes' + }, + { + date: '2019-09-01', + group: 'Crayfish(last week)', + value: -129, + stack: 'Meat dishes' + }, + { + date: '2019-09-02', + group: 'Cake(last week)', + value: -319, + stack: 'Dessert' + }, + { + date: '2019-09-02', + group: 'Bread(last week)', + value: -570, + stack: 'Dessert' + }, + { + date: '2019-09-02', + group: 'Tea(last week)', + value: -532, + stack: 'Drink' + }, + { + date: '2019-09-02', + group: 'Coffee(last week)', + value: -312, + stack: 'Drink' + }, + { + date: '2019-09-02', + group: 'Rib(last week)', + value: -583, + stack: 'Meat dishes' + }, + { + date: '2019-09-02', + group: 'Crayfish(last week)', + value: -342, + stack: 'Meat dishes' + }, + { + date: '2019-09-03', + group: 'Cake(last week)', + value: -346, + stack: 'Dessert' + }, + { + date: '2019-09-03', + group: 'Bread(last week)', + value: -373, + stack: 'Dessert' + }, + { + date: '2019-09-03', + group: 'Tea(last week)', + value: -582, + stack: 'Drink' + }, + { + date: '2019-09-03', + group: 'Coffee(last week)', + value: -247, + stack: 'Drink' + }, + { + date: '2019-09-03', + group: 'Rib(last week)', + value: -294, + stack: 'Meat dishes' + }, + { + date: '2019-09-03', + group: 'Crayfish(last week)', + value: -165, + stack: 'Meat dishes' + }, + { + date: '2019-09-04', + group: 'Cake(last week)', + value: -326, + stack: 'Dessert' + }, + { + date: '2019-09-04', + group: 'Bread(last week)', + value: -879, + stack: 'Dessert' + }, + { + date: '2019-09-04', + group: 'Tea(last week)', + value: -219, + stack: 'Drink' + }, + { + date: '2019-09-04', + group: 'Coffee(last week)', + value: -236, + stack: 'Drink' + }, + { + date: '2019-09-04', + group: 'Rib(last week)', + value: -153, + stack: 'Meat dishes' + }, + { + date: '2019-09-04', + group: 'Crayfish(last week)', + value: -253, + stack: 'Meat dishes' + } + ] + } + ], + xField: ['date', 'stack'], + yField: 'value', + seriesField: 'group', + stack: true, + axes: [ + { + orient: 'left', + title: { + visible: true, + text: 'Week-on-week (sales)' + }, + tick: { + tickCount: 10 + } + }, + { + orient: 'bottom', + domainLine: { + onZero: true // Axis baseline is at value 0 + } + } + ], + label: { visible: true }, + barBackground: { visible: true }, + legends: { + maxRow: 1, + visible: true + } +}; diff --git a/packages/vchart-theme-converter/demo/src/spec/vchart/funnel.ts b/packages/vchart-theme-converter/demo/src/spec/vchart/funnel.ts new file mode 100644 index 0000000..b38de36 --- /dev/null +++ b/packages/vchart-theme-converter/demo/src/spec/vchart/funnel.ts @@ -0,0 +1,18 @@ +export const spec = { + type: 'funnel', + data: { + values: [ + { value: 100, name: 'Show' }, + { value: 80, name: 'Click' }, + { value: 60, name: 'Visit' }, + { value: 40, name: 'Inquiry' }, + { value: 20, name: 'Order' } + ] + }, + categoryField: 'name', + valueField: 'value', + label: { + visible: true + }, + legends: {} +}; diff --git a/packages/vchart-theme-converter/demo/src/spec/vchart/line.ts b/packages/vchart-theme-converter/demo/src/spec/vchart/line.ts index deda74c..a1bc354 100644 --- a/packages/vchart-theme-converter/demo/src/spec/vchart/line.ts +++ b/packages/vchart-theme-converter/demo/src/spec/vchart/line.ts @@ -54,7 +54,21 @@ export const spec = { xField: 'type', yField: 'value', seriesField: 'country', - legends: [{ visible: true, position: 'middle', orient: 'top' }], + legends: [{ visible: true, position: 'middle' }], + crosshair: { + xField: { + visible: true, + label: { + visible: true // label is off by default + } + }, + yField: { + visible: true, + label: { + visible: true // label is off by default + } + } + }, axes: [ { orient: 'bottom', diff --git a/packages/vchart-theme-converter/demo/src/spec/vchart/pie.ts b/packages/vchart-theme-converter/demo/src/spec/vchart/pie.ts new file mode 100644 index 0000000..cb5cef4 --- /dev/null +++ b/packages/vchart-theme-converter/demo/src/spec/vchart/pie.ts @@ -0,0 +1,30 @@ +export const spec = { + legends: {}, + type: 'pie', + categoryField: 'name', + valueField: 'value', + data: { + values: [ + { + value: 335, + name: 'Apple' + }, + { + value: 310, + name: 'Grapes' + }, + { + value: 234, + name: 'Pineapples' + }, + { + value: 135, + name: 'Oranges' + }, + { + value: 1548, + name: 'Bananas' + } + ] + } +}; diff --git a/packages/vchart-theme-converter/src/echarts/component/crosshair.ts b/packages/vchart-theme-converter/src/echarts/component/crosshair.ts new file mode 100644 index 0000000..f875a2c --- /dev/null +++ b/packages/vchart-theme-converter/src/echarts/component/crosshair.ts @@ -0,0 +1,45 @@ +import type { ITheme } from '@visactor/vchart'; +import { attributeMap, labelBackgroundStyleMap } from '../convertMap'; +import { normalizePadding } from '@visactor/vutils'; +import { convertToItemStyle } from '../utils'; + +export function crosshairConverter(component: ITheme['component'], theme: ITheme) { + const axisPointerTheme = { + type: 'shadow', + trigger: 'axis', + show: true + } as any; + + const { crosshair } = component; + + if (crosshair) { + const { xField, bandField } = crosshair; + const baseConfig = bandField ?? xField; + if (baseConfig) { + const { line, label } = baseConfig; + if (line) { + const { style = {} } = line; + const lineStyle = convertToItemStyle(style, attributeMap, theme); + axisPointerTheme.lineStyle = lineStyle; + axisPointerTheme.shadowStyle = lineStyle; + } + if (label) { + const { style, visible, labelBackground } = label; + let echartsLabel = { + show: visible, + ...convertToItemStyle(style, attributeMap, theme) + } as any; + + if (labelBackground) { + const { padding, style = {} } = labelBackground; + echartsLabel.padding = normalizePadding(padding); + + echartsLabel = { ...echartsLabel, ...convertToItemStyle(style, labelBackgroundStyleMap, theme) }; + } + axisPointerTheme.label = echartsLabel; + } + } + } + + return { axisPointer: axisPointerTheme }; +} diff --git a/packages/vchart-theme-converter/src/echarts/component/discreteLegend.ts b/packages/vchart-theme-converter/src/echarts/component/discreteLegend.ts index a3bbff3..dc5e7d6 100644 --- a/packages/vchart-theme-converter/src/echarts/component/discreteLegend.ts +++ b/packages/vchart-theme-converter/src/echarts/component/discreteLegend.ts @@ -1,8 +1,8 @@ import type { ITheme } from '@visactor/vchart'; -import { IDiscreteLegendTheme } from '@visactor/vchart'; -import { labelStyleMap, postProcessors, symbolStyleMap } from '../convertMap'; +import { labelStyleMap, symbolStyleMap } from '../convertMap'; import { covertThemeItem } from '../../util/token'; import type { IPager } from '@visactor/vchart/esm/component/legend'; +import { convertToItemStyle } from '../utils'; export function discreteLegendConverter(component: ITheme['component'], theme: ITheme) { const legendTheme = { @@ -17,6 +17,7 @@ export function discreteLegendConverter(component: ITheme['component'], theme: I } else { legendTheme.orient = 'horizontal'; } + legendTheme[orient] = orient; } if (padding) { legendTheme.padding = padding; @@ -34,29 +35,18 @@ export function discreteLegendConverter(component: ITheme['component'], theme: I if (label) { const { space, style: labelStyle } = label; - legendTheme.textStyle = {}; - for (const key in labelStyle) { - let style = covertThemeItem(labelStyle[key], theme); - if (key === 'lineHeight') { - style = postProcessors[key](style); - } - legendTheme.textStyle[labelStyleMap[key] ?? key] = style; - } + legendTheme.textStyle = convertToItemStyle(labelStyle, labelStyleMap, theme); } if (shape) { const { style, space } = shape; - legendTheme.itemStyle = {}; - for (const key in style) { - const styleValue = covertThemeItem(style[key], theme); - if (key === 'size') { - legendTheme.itemWidth = styleValue; - legendTheme.itemHeight = styleValue; - } else if (key === 'symbolType') { - legendTheme.icon = styleValue; - } else { - legendTheme.itemStyle[symbolStyleMap[key] ?? key] = styleValue; - } + legendTheme.itemStyle = convertToItemStyle(style, symbolStyleMap, theme); + if ('size' in style) { + legendTheme.itemWidth = legendTheme.itemStyle.size; + legendTheme.itemHeight = legendTheme.itemStyle.size; + } + if ('symbolType' in style) { + legendTheme.icon = legendTheme.itemStyle.symbolType; } } @@ -64,13 +54,7 @@ export function discreteLegendConverter(component: ITheme['component'], theme: I const { textStyle, handler, space } = pager as IPager; legendTheme.pageButtonGap = space; if (textStyle) { - for (const key in textStyle) { - let style = covertThemeItem(textStyle[key], theme); - if (key === 'lineHeight') { - style = postProcessors[key](style); - } - legendTheme.pageTextStyle[labelStyleMap[key] ?? key] = style; - } + legendTheme.pageTextStyle = convertToItemStyle(textStyle, labelStyleMap, theme); } if (handler) { diff --git a/packages/vchart-theme-converter/src/echarts/component/title.ts b/packages/vchart-theme-converter/src/echarts/component/title.ts index 318c2c1..626ed8c 100644 --- a/packages/vchart-theme-converter/src/echarts/component/title.ts +++ b/packages/vchart-theme-converter/src/echarts/component/title.ts @@ -1,6 +1,6 @@ import type { ITheme } from '@visactor/vchart'; -import { labelStyleMap, postProcessors } from '../convertMap'; -import { covertThemeItem } from '../../util/token'; +import { labelStyleMap } from '../convertMap'; +import { convertToItemStyle } from '../utils'; export function titleConverter(component: ITheme['component'], theme: ITheme) { const titleTheme = {} as any; @@ -9,27 +9,11 @@ export function titleConverter(component: ITheme['component'], theme: ITheme) { if (title) { const { textStyle: vchartTextStyle, subtextStyle: vchartSubTextStyle } = title; if (vchartTextStyle) { - const textStyle = {}; - for (const key in vchartTextStyle) { - let style = covertThemeItem(vchartTextStyle[key], theme); - if (key === 'lineHeight') { - style = postProcessors[key](style); - } - textStyle[labelStyleMap[key] ?? key] = style; - } - titleTheme.textStyle = textStyle; + titleTheme.textStyle = convertToItemStyle(vchartTextStyle, labelStyleMap, theme); } if (vchartSubTextStyle) { - const subtextStyle = {}; - for (const key in vchartSubTextStyle) { - let style = covertThemeItem(vchartSubTextStyle[key], theme); - if (key === 'lineHeight') { - style = postProcessors[key](style); - } - subtextStyle[labelStyleMap[key] ?? key] = style; - } - titleTheme.subtextStyle = subtextStyle; + titleTheme.subtextStyle = convertToItemStyle(vchartSubTextStyle, labelStyleMap, theme); } } diff --git a/packages/vchart-theme-converter/src/echarts/component/tooltip.ts b/packages/vchart-theme-converter/src/echarts/component/tooltip.ts index 09c3822..d4104c9 100644 --- a/packages/vchart-theme-converter/src/echarts/component/tooltip.ts +++ b/packages/vchart-theme-converter/src/echarts/component/tooltip.ts @@ -1,12 +1,9 @@ import type { ITheme } from '@visactor/vchart'; -import { labelStyleMap, postProcessors } from '../convertMap'; import { covertThemeItem } from '../../util/token'; import { normalizePadding } from '@visactor/vutils'; export function tooltipConverter(component: ITheme['component'], theme: ITheme) { - const tooltipTheme = { - axisPointer: {} - } as any; + const tooltipTheme = {} as any; const { tooltip } = component; diff --git a/packages/vchart-theme-converter/src/echarts/componentConverter.ts b/packages/vchart-theme-converter/src/echarts/componentConverter.ts index c745fcd..18bfc78 100644 --- a/packages/vchart-theme-converter/src/echarts/componentConverter.ts +++ b/packages/vchart-theme-converter/src/echarts/componentConverter.ts @@ -6,6 +6,7 @@ import { axisConverter } from './component/axis'; import { titleConverter } from './component/title'; import { discreteLegendConverter } from './component/discreteLegend'; import { tooltipConverter } from './component/tooltip'; +import { crosshairConverter } from './component/crosshair'; const VCHART_COMPONENT_TYPES = [...Object.keys(ComponentTypeEnum).filter(type => !type.includes('Axis')), 'axis']; @@ -13,7 +14,8 @@ const componentConverter = { axis: axisConverter, title: titleConverter, discreteLegend: discreteLegendConverter, - tooltip: tooltipConverter + tooltip: tooltipConverter, + cartesianCrosshair: crosshairConverter }; export function convertComponent(component: ITheme['component'], theme: ITheme) { diff --git a/packages/vchart-theme-converter/src/echarts/convertMap.ts b/packages/vchart-theme-converter/src/echarts/convertMap.ts index c0c2ea7..7e1d09f 100644 --- a/packages/vchart-theme-converter/src/echarts/convertMap.ts +++ b/packages/vchart-theme-converter/src/echarts/convertMap.ts @@ -3,7 +3,8 @@ * 维护 vchart 到 echarts 的属性映射关系 */ -import { isObject, isString } from '@visactor/vutils'; +import { isString } from '@visactor/vutils'; +import type { IGradientColor } from '../util/color'; export const attributeMap = { fill: 'color', @@ -12,7 +13,8 @@ export const attributeMap = { strokeJoin: 'borderJoin', strokeCap: 'borderCap', lineWidth: 'borderWidth', - lineDash: 'borderDash' + lineDash: 'borderDash', + cornerRadius: 'borderRadius' }; export const textStyleMap = { @@ -60,14 +62,40 @@ export const axisLineStyleMap = { }; export const labelStyleMap = { + ...attributeMap, + stroke: 'textBorderColor', + lineWidth: 'textBorderWidth', + strokeJoin: 'textBorderJoin', + strokeCap: 'textBorderCap', + lineDash: 'textBorderDash' +}; + +export const labelBackgroundStyleMap = { + fill: 'backgroundColor', + stroke: 'textBorderColor', + lineWidth: 'borderWidth' +}; + +export const rectStyleMap = { ...attributeMap + // curveType:'type', curveType 在外层处理 }; export const postProcessors = { lineHeight: (lineHeight: string | number, context?: any) => { if (isString(lineHeight) && lineHeight.includes('%')) { + console.warn('[Converter] percent string `lineHeight` is not supported '); return undefined; } return lineHeight; + }, + fill: (fill: Record, itemStyle: Record) => { + if ('gradient' in (fill as IGradientColor)) { + console.warn('[Converter] gradient color is not supported '); + delete itemStyle.color; + itemStyle.opacity = 0.1; + return undefined; + } + return fill; } }; diff --git a/packages/vchart-theme-converter/src/echarts/series/area.ts b/packages/vchart-theme-converter/src/echarts/series/area.ts index 77d6ad4..e7dd36e 100644 --- a/packages/vchart-theme-converter/src/echarts/series/area.ts +++ b/packages/vchart-theme-converter/src/echarts/series/area.ts @@ -1,29 +1,35 @@ import type { ITheme } from '@visactor/vchart'; -import { covertThemeItem } from '../../util/token'; import { areaStyleMap } from '../convertMap'; -import type { IGradientColor } from '../../util/color'; +import { convertToItemStyle } from '../utils'; export function areaSeriesConverter(areaSeries: ITheme['series']['area'], theme: ITheme) { if (!areaSeries) { return {}; } - const areaStyle = {} as any; - const { area = {} } = areaSeries; + const areaTheme = {} as any; + const { area, line } = areaSeries; if (area) { const { style = {} } = area; - for (const key in style) { - if (areaStyleMap[key]) { - areaStyle[areaStyleMap[key]] = covertThemeItem(style[key], theme); - if (key === 'fill') { - if ('gradient' in (style[key] as IGradientColor)) { - console.warn('[Converter] gradient color is not supported '); - delete areaStyle.color; - areaStyle.opacity = 0.1; - } - } + const areaStyle = convertToItemStyle(style, areaStyleMap, theme); + const curveType = line?.style?.curveType ?? style.curveType; + if (curveType) { + switch (curveType) { + case 'monotone': + case 'monotoneX': + case 'monotoneY': + areaTheme.smooth = true; + break; + case 'step': + areaTheme.step = 'middle'; + break; + case 'stepAfter': + areaTheme.step = 'end'; + break; + case 'stepBefore': + areaTheme.step = 'start'; } } + areaTheme.areaStyle = areaStyle; } - - return areaStyle; + return areaTheme; } diff --git a/packages/vchart-theme-converter/src/echarts/series/bar.ts b/packages/vchart-theme-converter/src/echarts/series/bar.ts new file mode 100644 index 0000000..adcad4f --- /dev/null +++ b/packages/vchart-theme-converter/src/echarts/series/bar.ts @@ -0,0 +1,50 @@ +import type { ITheme } from '@visactor/vchart'; +import { attributeMap, labelStyleMap } from '../convertMap'; +import { convertToItemStyle } from '../utils'; + +export function barSeriesConverter(barSeries: ITheme['series']['bar'], theme: ITheme) { + if (!barSeries) { + return {}; + } + const barTheme = {} as any; + const { bar, label, barWidth, barMinWidth, barMaxWidth, barBackground } = barSeries; + + if (bar) { + const { style = {} } = bar; + barTheme.itemStyle = convertToItemStyle(style, attributeMap, theme); + } + + if (barBackground) { + const { style = {} } = barBackground; + barTheme.backgroundStyle = convertToItemStyle(style, attributeMap, theme); + } + + barTheme.barWidth = barWidth; + barTheme.barMinWidth = barMinWidth; + barTheme.barMaxWidth = barMaxWidth; + + // @ts-ignore + const { barGapInGroup } = barSeries; + barTheme.barCategoryGap = barGapInGroup; + + if (label) { + const { style = {}, position } = label; + const echartsLabel = convertToItemStyle(style, labelStyleMap, theme); + barTheme.label = echartsLabel; + if (position) { + echartsLabel.position = labelPositionMap[position] ?? position; + } + } + return barTheme; +} + +const labelPositionMap = { + 'inside-top': 'insideTop', + 'inside-bottom': 'insideBottom', + 'inside-right': 'insideRight', + 'inside-left': 'insideLeft', + 'top-right': 'topRight', + 'top-left': 'topLeft', + 'bottom-right': 'bottomRight', + 'bottom-left': 'bottomLeft' +}; diff --git a/packages/vchart-theme-converter/src/echarts/series/funnel.ts b/packages/vchart-theme-converter/src/echarts/series/funnel.ts new file mode 100644 index 0000000..334ce56 --- /dev/null +++ b/packages/vchart-theme-converter/src/echarts/series/funnel.ts @@ -0,0 +1,27 @@ +import type { ITheme } from '@visactor/vchart'; +import { attributeMap, labelStyleMap } from '../convertMap'; +import { convertToItemStyle } from '../utils'; + +export function funnelSeriesConverter(funnelSeries: ITheme['series']['funnel'], theme: ITheme) { + if (!funnelSeries) { + return {}; + } + const funnelStyle = {} as any; + const { funnel, label } = funnelSeries; + + if (funnel) { + const { style = {} } = funnel; + funnelStyle.itemStyle = convertToItemStyle(style, attributeMap, theme); + } + + if (label) { + const { style = {} } = label; + const echartsLabel = convertToItemStyle(style, labelStyleMap, theme); + if (!style.fill) { + echartsLabel.color = 'inherit'; + } + echartsLabel.position = 'inside'; + funnelStyle.label = echartsLabel; + } + return funnelStyle; +} diff --git a/packages/vchart-theme-converter/src/echarts/series/line.ts b/packages/vchart-theme-converter/src/echarts/series/line.ts index b6ba087..8b1cca4 100644 --- a/packages/vchart-theme-converter/src/echarts/series/line.ts +++ b/packages/vchart-theme-converter/src/echarts/series/line.ts @@ -1,59 +1,62 @@ import type { ITheme } from '@visactor/vchart'; import { covertThemeItem } from '../../util/token'; -import { lineStyleMap, symbolStyleMap } from '../convertMap'; +import { labelStyleMap, lineStyleMap } from '../convertMap'; +import { convertToItemStyle } from '../utils'; export function lineSeriesConverter(lineSeries: ITheme['series']['line'], theme: ITheme) { if (!lineSeries) { return {}; } - const result = {} as any; + const lineTheme = {} as any; const { line = {}, label = {}, point = {} } = lineSeries; if (line) { - result.lineStyle = {}; const { style = {} } = line; - for (const key in style) { - if (key === 'curveType') { - const curveType = style[key]; - switch (curveType) { - case 'monotone': - case 'monotoneX': - case 'monotoneY': - result.smooth = true; - break; - case 'step': - result.step = 'middle'; - break; - case 'stepAfter': - result.step = 'end'; - break; - case 'stepBefore': - result.step = 'start'; - } - } else { - result.lineStyle[lineStyleMap[key]] = covertThemeItem(style[key], theme); + const lineStyle = convertToItemStyle(style, lineStyleMap, theme); + if ('curveType' in style) { + switch (style.curveType) { + case 'monotone': + case 'monotoneX': + case 'monotoneY': + lineTheme.smooth = true; + break; + case 'step': + lineTheme.step = 'middle'; + break; + case 'stepAfter': + lineTheme.step = 'end'; + break; + case 'stepBefore': + lineTheme.step = 'start'; } } + lineTheme.lineStyle = lineStyle; } if (point) { - result.itemStyle = {}; const { style = {} } = point; - for (const key in style) { - const styleValue = style[key]; - if (key === 'symbolType') { - result.symbol = styleValue; - } else if (key === 'size') { - const symbolSize = covertThemeItem(styleValue, theme); - result.symbolSize = symbolSize; - } else { - const attr = symbolStyleMap[key]; - if (attr) { - result.itemStyle[symbolStyleMap[key]] = covertThemeItem(styleValue, theme); - } - } + const itemStyle = convertToItemStyle(style, lineStyleMap, theme); + lineTheme.itemStyle = itemStyle; + if ('symbolType' in style) { + lineTheme.symbol = style.symbolType; + } + + if ('size' in style) { + const symbolSize = covertThemeItem(style.size, theme); + lineTheme.symbolSize = symbolSize; + } + } + + if (label) { + const { style = {}, position } = label; + const echartsLabel = convertToItemStyle(style, labelStyleMap, theme); + + if (!style.fill) { + echartsLabel.color = 'inherit'; } + echartsLabel.position = position; + lineTheme.label = echartsLabel; } - return result; + return lineTheme; } diff --git a/packages/vchart-theme-converter/src/echarts/series/pie.ts b/packages/vchart-theme-converter/src/echarts/series/pie.ts new file mode 100644 index 0000000..1564820 --- /dev/null +++ b/packages/vchart-theme-converter/src/echarts/series/pie.ts @@ -0,0 +1,36 @@ +import type { ITheme } from '@visactor/vchart'; +import { covertThemeItem } from '../../util/token'; +import { attributeMap, labelStyleMap, postProcessors } from '../convertMap'; +import { IGradientColor } from '../../util/color'; +import { isNumber, isObject } from '@visactor/vutils'; +import { convertToItemStyle } from '../utils'; + +export function pieSeriesConverter(pieSeries: ITheme['series']['pie'], theme: ITheme) { + if (!pieSeries) { + return {}; + } + const pieTheme = {} as any; + const { pie, label, innerRadius, outerRadius } = pieSeries; + + const innerRadiusPercent = isNumber(innerRadius) ? `${innerRadius * 100}%` : undefined; + const outerRadiusPercent = isNumber(outerRadius) ? `${outerRadius * 100}%` : undefined; + + pieTheme.radius = [innerRadiusPercent, outerRadiusPercent]; + + if (pie) { + const { style = {} } = pie; + pieTheme.itemStyle = convertToItemStyle(style, attributeMap, theme); + } + + if (label) { + const { style = {}, position } = label; + const echartsLabel = convertToItemStyle(style, labelStyleMap, theme); + + if (!style.fill) { + echartsLabel.color = 'inherit'; + } + echartsLabel.position = position; + pieTheme.label = echartsLabel; + } + return pieTheme; +} diff --git a/packages/vchart-theme-converter/src/echarts/seriesConverter.ts b/packages/vchart-theme-converter/src/echarts/seriesConverter.ts index f2bf434..9994637 100644 --- a/packages/vchart-theme-converter/src/echarts/seriesConverter.ts +++ b/packages/vchart-theme-converter/src/echarts/seriesConverter.ts @@ -3,12 +3,18 @@ import { SeriesTypeEnum } from '@visactor/vchart'; import { lineSeriesConverter } from './series/line'; import { merge } from '@visactor/vutils'; import { areaSeriesConverter } from './series/area'; +import { barSeriesConverter } from './series/bar'; +import { pieSeriesConverter } from './series/pie'; +import { funnelSeriesConverter } from './series/funnel'; const VCHART_SERIES_TYPES = Object.keys(SeriesTypeEnum); const seriesConverter = { line: lineSeriesConverter, - area: areaSeriesConverter + area: areaSeriesConverter, + bar: barSeriesConverter, + pie: pieSeriesConverter, + funnel: funnelSeriesConverter }; export function convertSeries(series: ITheme['series'], theme: ITheme) { @@ -16,13 +22,13 @@ export function convertSeries(series: ITheme['series'], theme: ITheme) { VCHART_SERIES_TYPES.forEach(type => { if (seriesConverter[type]) { - // 这里后续可能存在问题：vchart series type 和 echarts series type 不一致 if (type === 'area') { if (!result.line) { result.line = {}; } - result.line.areaStyle = seriesConverter[type](series[type], theme); + result.line = merge(result.line, seriesConverter[type](series[type], theme)); } else { + // 这里后续可能存在问题：vchart series type 和 echarts series type 不一致 result[type] = merge(result[type] ?? {}, seriesConverter[type](series[type], theme)); } } diff --git a/packages/vchart-theme-converter/src/echarts/utils.ts b/packages/vchart-theme-converter/src/echarts/utils.ts index 20582ce..9979f50 100644 --- a/packages/vchart-theme-converter/src/echarts/utils.ts +++ b/packages/vchart-theme-converter/src/echarts/utils.ts @@ -1,6 +1,27 @@ -import { IColorKey, ITheme, ITokenKey } from '@visactor/vchart'; +import type { ITheme } from '@visactor/vchart'; import type { IGradientColor } from '../util/color'; +import { isObject } from '@visactor/vutils'; import { covertThemeItem } from '../util/token'; +import { postProcessors } from './convertMap'; + +export function convertToItemStyle( + vchartStyle: Record, + convertMap: Record, + theme: ITheme +) { + const itemStyle = {} as Record; + for (const key in vchartStyle) { + let styleValue = covertThemeItem(vchartStyle[key], theme); + if (key === 'fill' && isObject(styleValue)) { + styleValue = postProcessors.fill(styleValue, itemStyle); + } + if (key === 'lineHeight') { + styleValue = postProcessors.lineHeight(styleValue); + } + itemStyle[convertMap[key] ?? key] = styleValue; + } + return itemStyle; +} export function convertGradientColor(color: IGradientColor) { if (color.gradient === 'linear') { diff --git a/packages/vchart-theme-converter/src/util/token.ts b/packages/vchart-theme-converter/src/util/token.ts index cb55a82..eda4c1e 100644 --- a/packages/vchart-theme-converter/src/util/token.ts +++ b/packages/vchart-theme-converter/src/util/token.ts @@ -1,5 +1,5 @@ import type { ITokenKey, IColorKey, ITheme as IVChartTheme, IColorSchemeStruct, ITheme } from '@visactor/vchart'; -import { isValid } from '@visactor/vutils'; +import { Color, isValid } from '@visactor/vutils'; export function tokenOrPaletteToValue(object: ITokenKey | IColorKey, theme: IVChartTheme) { if (object.type === 'palette') { @@ -7,9 +7,15 @@ export function tokenOrPaletteToValue(object: ITokenKey | IColorKey, theme: IVCh if (colorScheme) { const { palette } = (colorScheme.default ?? {}) as IColorSchemeStruct; if (palette) { - return palette[object.key] ?? object.default; + let color = (palette[object.key] ?? object.default) as string; + if (object.a) { + color = new Color(color).setOpacity(object.a).toRGBA(); + } + if (object.l) { + color = new Color(color).brighter(object.l).toRGBA(); + } + return color; } - // TODO: 处理 l（亮度）/a（透明度） } } else if (object.type === 'token') { const { token } = theme; From e618ecec68b464de22d5548c8f433a543612c2de Mon Sep 17 00:00:00 2001 From: xiaoluoHe Date: Tue, 2 Jul 2024 17:09:04 +0800 Subject: [PATCH 03/16] feat: supply padding convert --- .../vchart-theme-converter/demo/src/Chart.tsx | 2 -- .../vchart-theme-converter/src/echarts/index.ts | 17 +++++++++++++---- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/packages/vchart-theme-converter/demo/src/Chart.tsx b/packages/vchart-theme-converter/demo/src/Chart.tsx index 5598c29..25d608e 100644 --- a/packages/vchart-theme-converter/demo/src/Chart.tsx +++ b/packages/vchart-theme-converter/demo/src/Chart.tsx @@ -7,8 +7,6 @@ import { VC2EC } from '../../src/index'; initVChartSemiTheme({ isWatchingMode: true }); const echartsTheme = VC2EC(VChart.ThemeManager.getCurrentTheme()); -console.log(echartsTheme); -console.log(VChart.ThemeManager.getCurrentTheme()); export function Charts(props: { echartsOption: any; vchartSpec: any }) { const { echartsOption, vchartSpec } = props; diff --git a/packages/vchart-theme-converter/src/echarts/index.ts b/packages/vchart-theme-converter/src/echarts/index.ts index 59e36ba..35de18d 100644 --- a/packages/vchart-theme-converter/src/echarts/index.ts +++ b/packages/vchart-theme-converter/src/echarts/index.ts @@ -1,6 +1,6 @@ import type { ITheme as IVChartTheme } from '@visactor/vchart'; import { convertObjectColor, convertColorPlatte as convertColorPalette } from '../util/color'; -import { isObject, merge } from '@visactor/vutils'; +import { isObject, isValidNumber, merge, normalizePadding } from '@visactor/vutils'; import { convertTextStyle } from './textStyleConverter'; import { convertSeries } from './seriesConverter'; import { convertComponent } from './componentConverter'; @@ -14,7 +14,7 @@ export function VC2EC(vchartTheme: IVChartTheme): IEChartsTheme { let echartsTheme: IEChartsTheme = {}; - const { colorScheme, token, background, mark = {}, series, component } = vchartTheme; + const { colorScheme, token, background, padding, mark = {}, series, component } = vchartTheme; // 1. 色板转换 const color = convertColorPalette(colorScheme, token); @@ -27,6 +27,17 @@ export function VC2EC(vchartTheme: IVChartTheme): IEChartsTheme { echartsTheme.backgroundColor = isObject(background) ? convertObjectColor(background, vchartTheme) : background; } + // padding 效果不一致，暂不转换 + // if (padding) { + // const _padding = normalizePadding(padding as any); + // const grid = {}; + // const direction = ['top', 'right', 'bottom', 'left']; + // _padding.forEach((pad, index) => { + // grid[direction[index]] = pad; + // }); + // echartsTheme.grid = grid; + // } + /** * 2.1 textStyle * 目前已知会影响：数据标签、crosshair 标签、图例标签 @@ -34,8 +45,6 @@ export function VC2EC(vchartTheme: IVChartTheme): IEChartsTheme { */ echartsTheme.textStyle = convertTextStyle(mark.text?.style, vchartTheme); - // 1.2 系列色板转换 - // 3. 系列样式转换 echartsTheme = merge(echartsTheme, convertSeries(series, vchartTheme)); From d3765b626ab461cb0f179111c9cf8949683d3cf9 Mon Sep 17 00:00:00 2001 From: xiaoluoHe Date: Tue, 2 Jul 2024 20:18:39 +0800 Subject: [PATCH 04/16] feat: support echarts theme to vchart theme --- .../vchart-theme-converter/demo/src/Chart.tsx | 13 ++- .../src/echarts/component/axis.ts | 67 ++++++++++++---- .../src/echarts/component/crosshair.ts | 24 +++++- .../src/echarts/component/discreteLegend.ts | 35 ++++++-- .../src/echarts/component/title.ts | 19 ++++- .../src/echarts/component/tooltip.ts | 57 ++++++++++--- .../src/echarts/componentConverter.ts | 18 +++-- .../src/echarts/index.ts | 54 +++++++++++-- .../src/echarts/series/bar.ts | 25 +++++- .../src/echarts/series/funnel.ts | 23 +++++- .../src/echarts/series/line.ts | 80 ++++++++++++++++++- .../src/echarts/series/pie.ts | 31 +++++-- .../src/echarts/seriesConverter.ts | 23 ++++-- .../src/echarts/textStyleConverter.ts | 15 ---- .../src/echarts/utils.ts | 35 +++++++- .../vchart-theme-converter/src/util/token.ts | 2 +- 16 files changed, 433 insertions(+), 88 deletions(-) delete mode 100644 packages/vchart-theme-converter/src/echarts/textStyleConverter.ts diff --git a/packages/vchart-theme-converter/demo/src/Chart.tsx b/packages/vchart-theme-converter/demo/src/Chart.tsx index 25d608e..74ba3db 100644 --- a/packages/vchart-theme-converter/demo/src/Chart.tsx +++ b/packages/vchart-theme-converter/demo/src/Chart.tsx @@ -2,12 +2,19 @@ import React, { useEffect, useRef } from 'react'; import * as echarts from 'echarts'; import VChart from '@visactor/vchart'; import { initVChartSemiTheme } from '@visactor/vchart-semi-theme'; -import { VC2EC } from '../../src/index'; +import { EC2VC, VC2EC } from '../../src/index'; +import { theme as echartsLight } from './theme/echarts-light'; initVChartSemiTheme({ isWatchingMode: true }); -const echartsTheme = VC2EC(VChart.ThemeManager.getCurrentTheme()); +// const echartsTheme = VC2EC(VChart.ThemeManager.getCurrentTheme()); +const echartsTheme = echartsLight; + +VChart.ThemeManager.registerTheme('echarts-light', EC2VC(echartsLight)); +VChart.ThemeManager.setCurrentTheme('echarts-light'); +console.log('echarts theme:', echartsLight); +console.log('vchart theme:', VChart.ThemeManager.getCurrentTheme()); export function Charts(props: { echartsOption: any; vchartSpec: any }) { const { echartsOption, vchartSpec } = props; const ecRef = useRef(null); @@ -24,7 +31,7 @@ export function Charts(props: { echartsOption: any; vchartSpec: any }) { echarts.getInstanceByDom(entry.target).resize(); } }); - console.log('inner theme:', myChart._theme); + // console.log('inner theme:', myChart._theme); resizeOb.observe(ecRef.current); window['echarts'] = myChart; return () => { diff --git a/packages/vchart-theme-converter/src/echarts/component/axis.ts b/packages/vchart-theme-converter/src/echarts/component/axis.ts index b1638cf..a01bf53 100644 --- a/packages/vchart-theme-converter/src/echarts/component/axis.ts +++ b/packages/vchart-theme-converter/src/echarts/component/axis.ts @@ -1,7 +1,9 @@ import type { IAxisCommonTheme, ITheme } from '@visactor/vchart'; import { merge } from '@visactor/vutils'; -import { covertThemeItem } from '../../util/token'; +import { convertThemeTokenItem } from '../../util/token'; import { axisLineStyleMap, labelStyleMap, lineStyleMap, postProcessors } from '../convertMap'; +import type { IEChartsTheme } from '..'; +import { convertToVChartGraphicStyle } from '../utils'; export function axisConverter(component: ITheme['component'], theme: ITheme) { const axisTheme = {} as any; @@ -30,7 +32,7 @@ function convertCategoryAxis(component: ITheme['component'], theme: ITheme) { lineStyle: {} }; for (const key in style) { - categoryAxis.axisLine.lineStyle[axisLineStyleMap[key] ?? key] = covertThemeItem(style[key], theme); + categoryAxis.axisLine.lineStyle[axisLineStyleMap[key] ?? key] = convertThemeTokenItem(style[key], theme); } } @@ -41,7 +43,7 @@ function convertCategoryAxis(component: ITheme['component'], theme: ITheme) { lineStyle: {} }; for (const key in style) { - categoryAxis.splitLine.lineStyle[axisLineStyleMap[key] ?? key] = covertThemeItem(style[key], theme); + categoryAxis.splitLine.lineStyle[axisLineStyleMap[key] ?? key] = convertThemeTokenItem(style[key], theme); } } @@ -52,7 +54,7 @@ function convertCategoryAxis(component: ITheme['component'], theme: ITheme) { lineStyle: {} }; for (const key in style) { - categoryAxis.minorSplitLine[axisLineStyleMap[key] ?? key] = covertThemeItem(style[key], theme); + categoryAxis.minorSplitLine[axisLineStyleMap[key] ?? key] = convertThemeTokenItem(style[key], theme); } } @@ -63,7 +65,7 @@ function convertCategoryAxis(component: ITheme['component'], theme: ITheme) { margin: space }; for (const key in style) { - categoryAxis.axisLabel[labelStyleMap[key] ?? key] = covertThemeItem(style[key], theme); + categoryAxis.axisLabel[labelStyleMap[key] ?? key] = convertThemeTokenItem(style[key], theme); } } if (tick) { @@ -74,7 +76,7 @@ function convertCategoryAxis(component: ITheme['component'], theme: ITheme) { length: tickSize }; for (const key in style) { - categoryAxis.axisTick[lineStyleMap[key] ?? key] = covertThemeItem(style[key], theme); + categoryAxis.axisTick[lineStyleMap[key] ?? key] = convertThemeTokenItem(style[key], theme); } } @@ -86,7 +88,7 @@ function convertCategoryAxis(component: ITheme['component'], theme: ITheme) { splitNumber: tickCount }; for (const key in style) { - categoryAxis.minorTick[lineStyleMap[key] ?? key] = covertThemeItem(style[key], theme); + categoryAxis.minorTick[lineStyleMap[key] ?? key] = convertThemeTokenItem(style[key], theme); } } @@ -97,7 +99,7 @@ function convertCategoryAxis(component: ITheme['component'], theme: ITheme) { categoryAxis.nameGap = space + (categoryAxis.axisLabel?.margin ?? 0) + (categoryAxis.axisTick?.length ?? 0); categoryAxis.nameTextStyle = {}; for (const key in style) { - const styleValue = covertThemeItem(style[key], theme); + const styleValue = convertThemeTokenItem(style[key], theme); if (key === 'lineHeight' && styleValue.includes('%')) { // 百分比 lineHeight 在 echarts 不支持 // TODO: 支持百分比 lineHeight 解析 @@ -127,7 +129,7 @@ function convertLinearAxis(component: ITheme['component'], theme: ITheme) { lineStyle: {} }; for (const key in style) { - valueAxis.axisLine.lineStyle[axisLineStyleMap[key] ?? key] = covertThemeItem(style[key], theme); + valueAxis.axisLine.lineStyle[axisLineStyleMap[key] ?? key] = convertThemeTokenItem(style[key], theme); } } @@ -138,7 +140,7 @@ function convertLinearAxis(component: ITheme['component'], theme: ITheme) { lineStyle: {} }; for (const key in style) { - valueAxis.splitLine.lineStyle[axisLineStyleMap[key] ?? key] = covertThemeItem(style[key], theme); + valueAxis.splitLine.lineStyle[axisLineStyleMap[key] ?? key] = convertThemeTokenItem(style[key], theme); } } @@ -149,7 +151,7 @@ function convertLinearAxis(component: ITheme['component'], theme: ITheme) { lineStyle: {} }; for (const key in style) { - valueAxis.minorSplitLine[axisLineStyleMap[key] ?? key] = covertThemeItem(style[key], theme); + valueAxis.minorSplitLine[axisLineStyleMap[key] ?? key] = convertThemeTokenItem(style[key], theme); } } @@ -160,7 +162,7 @@ function convertLinearAxis(component: ITheme['component'], theme: ITheme) { margin: space }; for (const key in style) { - valueAxis.axisLabel[labelStyleMap[key] ?? key] = covertThemeItem(style[key], theme); + valueAxis.axisLabel[labelStyleMap[key] ?? key] = convertThemeTokenItem(style[key], theme); } } if (tick) { @@ -171,7 +173,7 @@ function convertLinearAxis(component: ITheme['component'], theme: ITheme) { length: tickSize }; for (const key in style) { - valueAxis.axisTick[lineStyleMap[key] ?? key] = covertThemeItem(style[key], theme); + valueAxis.axisTick[axisLineStyleMap[key] ?? key] = convertThemeTokenItem(style[key], theme); } } @@ -183,7 +185,7 @@ function convertLinearAxis(component: ITheme['component'], theme: ITheme) { splitNumber: tickCount }; for (const key in style) { - valueAxis.minorTick[lineStyleMap[key] ?? key] = covertThemeItem(style[key], theme); + valueAxis.minorTick[axisLineStyleMap[key] ?? key] = convertThemeTokenItem(style[key], theme); } } @@ -194,7 +196,7 @@ function convertLinearAxis(component: ITheme['component'], theme: ITheme) { valueAxis.nameGap = space + (valueAxis.axisLabel?.margin ?? 0) + (valueAxis.axisTick?.length ?? 0); valueAxis.nameTextStyle = {}; for (const key in style) { - let styleValue = covertThemeItem(style[key], theme); + let styleValue = convertThemeTokenItem(style[key], theme); if (key === 'lineHeight') { styleValue = postProcessors[key](styleValue); } @@ -204,3 +206,38 @@ function convertLinearAxis(component: ITheme['component'], theme: ITheme) { return valueAxis; } + +export function toVChartAxis(echartsTheme: IEChartsTheme): Partial { + if (!echartsTheme) { + return {}; + } + const { categoryAxis = {}, valueAxis = {} } = echartsTheme; + const axis = (axisConfig: any): IAxisCommonTheme => { + return { + domainLine: { + visible: axisConfig.axisLine?.show, + style: convertToVChartGraphicStyle(axisConfig.axisLine?.lineStyle, axisLineStyleMap) + }, + tick: { + visible: axisConfig.axisTick?.show, + style: convertToVChartGraphicStyle(axisConfig.axisTick?.lineStyle, axisLineStyleMap) + }, + label: { + visible: axisConfig.axisLabel?.show, + style: convertToVChartGraphicStyle(axisConfig.axisLabel, labelStyleMap) + }, + grid: { + visible: axisConfig.splitLine?.show, + style: convertToVChartGraphicStyle(axisConfig.splitLine?.lineStyle, axisLineStyleMap) + }, + title: { + visible: axisConfig.nameTextStyle?.show, + style: convertToVChartGraphicStyle(axisConfig.nameTextStyle, labelStyleMap) + } + }; + }; + const axisBand: IAxisCommonTheme = axis(categoryAxis); + const axisLinear: IAxisCommonTheme = axis(valueAxis); + + return { axisBand, axisLinear }; +} diff --git a/packages/vchart-theme-converter/src/echarts/component/crosshair.ts b/packages/vchart-theme-converter/src/echarts/component/crosshair.ts index f875a2c..e98027c 100644 --- a/packages/vchart-theme-converter/src/echarts/component/crosshair.ts +++ b/packages/vchart-theme-converter/src/echarts/component/crosshair.ts @@ -1,7 +1,8 @@ -import type { ITheme } from '@visactor/vchart'; -import { attributeMap, labelBackgroundStyleMap } from '../convertMap'; +import type { ICrosshairTheme, ITheme } from '@visactor/vchart'; +import { attributeMap, labelBackgroundStyleMap, lineStyleMap } from '../convertMap'; import { normalizePadding } from '@visactor/vutils'; -import { convertToItemStyle } from '../utils'; +import { convertToItemStyle, convertToVChartGraphicStyle } from '../utils'; +import type { IEChartsTheme } from '..'; export function crosshairConverter(component: ITheme['component'], theme: ITheme) { const axisPointerTheme = { @@ -43,3 +44,20 @@ export function crosshairConverter(component: ITheme['component'], theme: ITheme return { axisPointer: axisPointerTheme }; } + +export function toVChartCrosshair(echartsTheme: IEChartsTheme): Partial { + if (!echartsTheme) { + return {}; + } + + const { tooltip = {} } = echartsTheme; + const { axisPointer } = tooltip; + // 无法等价转换 + const crosshair: ICrosshairTheme = { + categoryField: { + line: { style: convertToVChartGraphicStyle(axisPointer?.lineStyle, lineStyleMap) } + } + }; + + return { crosshair }; +} diff --git a/packages/vchart-theme-converter/src/echarts/component/discreteLegend.ts b/packages/vchart-theme-converter/src/echarts/component/discreteLegend.ts index dc5e7d6..2e17786 100644 --- a/packages/vchart-theme-converter/src/echarts/component/discreteLegend.ts +++ b/packages/vchart-theme-converter/src/echarts/component/discreteLegend.ts @@ -1,8 +1,9 @@ import type { ITheme } from '@visactor/vchart'; import { labelStyleMap, symbolStyleMap } from '../convertMap'; -import { covertThemeItem } from '../../util/token'; -import type { IPager } from '@visactor/vchart/esm/component/legend'; -import { convertToItemStyle } from '../utils'; +import { convertThemeTokenItem } from '../../util/token'; +import type { IDiscreteLegendTheme, IPager } from '@visactor/vchart/esm/component/legend'; +import { convertToItemStyle, convertToVChartGraphicStyle } from '../utils'; +import type { IEChartsTheme } from '..'; export function discreteLegendConverter(component: ITheme['component'], theme: ITheme) { const legendTheme = { @@ -64,8 +65,8 @@ export function discreteLegendConverter(component: ITheme['component'], theme: I horizontal: [preShape, nextShape], vertical: [preShape, nextShape] }; - legendTheme.pageIconColor = covertThemeItem(style.fill, theme); - legendTheme.pageIconInactiveColor = covertThemeItem(state.disable.fill, theme); + legendTheme.pageIconColor = convertThemeTokenItem(style.fill, theme); + legendTheme.pageIconInactiveColor = convertThemeTokenItem(state.disable.fill, theme); } } } @@ -73,3 +74,27 @@ export function discreteLegendConverter(component: ITheme['component'], theme: I return { legend: legendTheme }; } + +export function toVChartDiscreteLegend(echartsTheme: IEChartsTheme): Partial { + if (!echartsTheme) { + return {}; + } + + const { legend = {} } = echartsTheme; + const { textStyle, itemStyle, pageTextStyle } = legend; + const discreteLegend: IDiscreteLegendTheme = { + item: { + label: { + style: convertToVChartGraphicStyle(textStyle, labelStyleMap) + }, + shape: { + style: convertToVChartGraphicStyle(itemStyle, symbolStyleMap) + } + }, + pager: { + textStyle: convertToVChartGraphicStyle(pageTextStyle, labelStyleMap) + } + }; + + return { discreteLegend }; +} diff --git a/packages/vchart-theme-converter/src/echarts/component/title.ts b/packages/vchart-theme-converter/src/echarts/component/title.ts index 626ed8c..d73f3ef 100644 --- a/packages/vchart-theme-converter/src/echarts/component/title.ts +++ b/packages/vchart-theme-converter/src/echarts/component/title.ts @@ -1,6 +1,7 @@ -import type { ITheme } from '@visactor/vchart'; +import type { ITheme, ITitleTheme } from '@visactor/vchart'; import { labelStyleMap } from '../convertMap'; -import { convertToItemStyle } from '../utils'; +import { convertToItemStyle, convertToVChartGraphicStyle } from '../utils'; +import type { IEChartsTheme } from '..'; export function titleConverter(component: ITheme['component'], theme: ITheme) { const titleTheme = {} as any; @@ -19,3 +20,17 @@ export function titleConverter(component: ITheme['component'], theme: ITheme) { return { title: titleTheme }; } + +export function toVChartTitle(echartsTheme: IEChartsTheme): Partial { + if (!echartsTheme) { + return {}; + } + + const { title: echartsTitle = {} } = echartsTheme; + const title: ITitleTheme = { + textStyle: convertToVChartGraphicStyle(echartsTitle.textStyle, labelStyleMap), + subtextStyle: convertToVChartGraphicStyle(echartsTitle.subtextStyle, labelStyleMap) + }; + + return { title }; +} diff --git a/packages/vchart-theme-converter/src/echarts/component/tooltip.ts b/packages/vchart-theme-converter/src/echarts/component/tooltip.ts index d4104c9..eca9eae 100644 --- a/packages/vchart-theme-converter/src/echarts/component/tooltip.ts +++ b/packages/vchart-theme-converter/src/echarts/component/tooltip.ts @@ -1,6 +1,7 @@ -import type { ITheme } from '@visactor/vchart'; -import { covertThemeItem } from '../../util/token'; +import type { ITheme, ITooltipTheme } from '@visactor/vchart'; +import { convertThemeTokenItem } from '../../util/token'; import { normalizePadding } from '@visactor/vutils'; +import type { IEChartsTheme } from '..'; export function tooltipConverter(component: ITheme['component'], theme: ITheme) { const tooltipTheme = {} as any; @@ -12,22 +13,22 @@ export function tooltipConverter(component: ITheme['component'], theme: ITheme) if (panel) { const { padding, backgroundColor, border = {}, shadow } = panel; tooltipTheme.padding = normalizePadding(padding); - tooltipTheme.backgroundColor = covertThemeItem(backgroundColor, theme); - tooltipTheme.borderColor = covertThemeItem(border.color, theme); - tooltipTheme.borderRadius = covertThemeItem(border.radius, theme); - tooltipTheme.borderWidth = covertThemeItem(border.width, theme); - tooltipTheme.shadowColor = covertThemeItem(shadow?.color, theme); - tooltipTheme.shadowBlur = covertThemeItem(shadow?.blur, theme); - tooltipTheme.shadowOffsetX = covertThemeItem(shadow?.x, theme); - tooltipTheme.shadowOffsetY = covertThemeItem(shadow?.y, theme); + tooltipTheme.backgroundColor = convertThemeTokenItem(backgroundColor, theme); + tooltipTheme.borderColor = convertThemeTokenItem(border.color, theme); + tooltipTheme.borderRadius = convertThemeTokenItem(border.radius, theme); + tooltipTheme.borderWidth = convertThemeTokenItem(border.width, theme); + tooltipTheme.shadowColor = convertThemeTokenItem(shadow?.color, theme); + tooltipTheme.shadowBlur = convertThemeTokenItem(shadow?.blur, theme); + tooltipTheme.shadowOffsetX = convertThemeTokenItem(shadow?.x, theme); + tooltipTheme.shadowOffsetY = convertThemeTokenItem(shadow?.y, theme); } if (keyLabel) { const textStyle = {} as any; const { fontSize, fontFamily, fontColor } = keyLabel; - textStyle.fontSize = covertThemeItem(fontSize, theme); - textStyle.fontFamily = covertThemeItem(fontFamily, theme); - textStyle.fontColor = covertThemeItem(fontColor, theme); + textStyle.fontSize = convertThemeTokenItem(fontSize, theme); + textStyle.fontFamily = convertThemeTokenItem(fontFamily, theme); + textStyle.fontColor = convertThemeTokenItem(fontColor, theme); tooltipTheme.textStyle = textStyle; } @@ -35,3 +36,33 @@ export function tooltipConverter(component: ITheme['component'], theme: ITheme) return { tooltip: tooltipTheme }; } + +export function toVChartTooltip(echartsTheme: IEChartsTheme): Partial { + if (!echartsTheme) { + return {}; + } + + const { tooltip: echartsTooltip = {} } = echartsTheme; + + const tooltip: ITooltipTheme = { + panel: { + padding: echartsTooltip.padding, + backgroundColor: echartsTooltip.backgroundColor, + border: { + color: echartsTooltip.borderColor, + radius: echartsTooltip.borderRadius, + width: echartsTooltip.borderWidth + }, + // @ts-ignore + shadow: { + color: echartsTooltip?.shadowColor, + blur: echartsTooltip?.shadowBlur, + x: echartsTooltip?.shadowOffsetX, + y: echartsTooltip?.shadowOffsetY + } + } + // TODO: label 无法等价转换 + }; + + return { tooltip }; +} diff --git a/packages/vchart-theme-converter/src/echarts/componentConverter.ts b/packages/vchart-theme-converter/src/echarts/componentConverter.ts index 18bfc78..7dfac4d 100644 --- a/packages/vchart-theme-converter/src/echarts/componentConverter.ts +++ b/packages/vchart-theme-converter/src/echarts/componentConverter.ts @@ -2,11 +2,11 @@ import type { ITheme } from '@visactor/vchart'; // FIXME: import { ComponentTypeEnum } from '@visactor/vchart/esm/component/interface/type'; import { merge } from '@visactor/vutils'; -import { axisConverter } from './component/axis'; -import { titleConverter } from './component/title'; -import { discreteLegendConverter } from './component/discreteLegend'; -import { tooltipConverter } from './component/tooltip'; -import { crosshairConverter } from './component/crosshair'; +import { axisConverter, toVChartAxis } from './component/axis'; +import { titleConverter, toVChartTitle } from './component/title'; +import { discreteLegendConverter, toVChartDiscreteLegend } from './component/discreteLegend'; +import { toVChartTooltip, tooltipConverter } from './component/tooltip'; +import { crosshairConverter, toVChartCrosshair } from './component/crosshair'; const VCHART_COMPONENT_TYPES = [...Object.keys(ComponentTypeEnum).filter(type => !type.includes('Axis')), 'axis']; @@ -18,6 +18,14 @@ const componentConverter = { cartesianCrosshair: crosshairConverter }; +export const toVChartComponentConverter = { + axis: toVChartAxis, + discreteLegend: toVChartDiscreteLegend, + title: toVChartTitle, + crosshair: toVChartCrosshair, + tooltip: toVChartTooltip +}; + export function convertComponent(component: ITheme['component'], theme: ITheme) { if (!component) { return {}; diff --git a/packages/vchart-theme-converter/src/echarts/index.ts b/packages/vchart-theme-converter/src/echarts/index.ts index 35de18d..d9205c1 100644 --- a/packages/vchart-theme-converter/src/echarts/index.ts +++ b/packages/vchart-theme-converter/src/echarts/index.ts @@ -1,11 +1,13 @@ import type { ITheme as IVChartTheme } from '@visactor/vchart'; import { convertObjectColor, convertColorPlatte as convertColorPalette } from '../util/color'; import { isObject, isValidNumber, merge, normalizePadding } from '@visactor/vutils'; -import { convertTextStyle } from './textStyleConverter'; -import { convertSeries } from './seriesConverter'; -import { convertComponent } from './componentConverter'; +import { convertSeries, toVChartConverter } from './seriesConverter'; +import { convertComponent, toVChartComponentConverter } from './componentConverter'; +import { convertThemeTokenItem } from '../util/token'; +import { convertToItemStyle } from './utils'; +import { textStyleMap } from './convertMap'; -type IEChartsTheme = Record; +export type IEChartsTheme = Record; export function VC2EC(vchartTheme: IVChartTheme): IEChartsTheme { if (!vchartTheme) { @@ -43,7 +45,10 @@ export function VC2EC(vchartTheme: IVChartTheme): IEChartsTheme { * 目前已知会影响：数据标签、crosshair 标签、图例标签 * 确认不会影响：标题、轴标签、tooltip 标签 */ - echartsTheme.textStyle = convertTextStyle(mark.text?.style, vchartTheme); + echartsTheme.textStyle = { + fontFamily: convertThemeTokenItem(vchartTheme.fontFamily, vchartTheme), + ...convertToItemStyle(mark.text?.style, textStyleMap, vchartTheme) + }; // 3. 系列样式转换 echartsTheme = merge(echartsTheme, convertSeries(series, vchartTheme)); @@ -53,3 +58,42 @@ export function VC2EC(vchartTheme: IVChartTheme): IEChartsTheme { return echartsTheme; } + +export function EC2VC(echartsTheme: IEChartsTheme): IVChartTheme { + if (!echartsTheme) { + return {}; + } + + const vchartTheme: IVChartTheme = { series: {}, component: {} }; + + const { color, backgroundColor, textStyle } = echartsTheme; + // 1. 色板转换 + vchartTheme.colorScheme = { default: { dataScheme: color } }; + // 2. 基本转换 + vchartTheme.background = backgroundColor; + vchartTheme.mark = { + text: { + style: textStyle + } + }; + + // 3. 系列转换 + ['line', 'pie', 'bar', 'funnel'].forEach(series => { + if (echartsTheme[series] && toVChartConverter[series]) { + vchartTheme.series[series] = toVChartConverter[series](echartsTheme[series]); + if (series === 'line') { + vchartTheme.series.area = vchartTheme.series[series]; + // @ts-ignore + delete vchartTheme.series.line.area; + } + } + }); + + // 4. 组件转换 + Object.values(toVChartComponentConverter).forEach(converter => { + // @ts-ignore + vchartTheme.component = { ...vchartTheme.component, ...converter(echartsTheme) }; + }); + + return vchartTheme; +} diff --git a/packages/vchart-theme-converter/src/echarts/series/bar.ts b/packages/vchart-theme-converter/src/echarts/series/bar.ts index adcad4f..1b2560b 100644 --- a/packages/vchart-theme-converter/src/echarts/series/bar.ts +++ b/packages/vchart-theme-converter/src/echarts/series/bar.ts @@ -1,6 +1,6 @@ import type { ITheme } from '@visactor/vchart'; import { attributeMap, labelStyleMap } from '../convertMap'; -import { convertToItemStyle } from '../utils'; +import { convertToItemStyle, convertToVChartGraphicStyle } from '../utils'; export function barSeriesConverter(barSeries: ITheme['series']['bar'], theme: ITheme) { if (!barSeries) { @@ -48,3 +48,26 @@ const labelPositionMap = { 'bottom-right': 'bottomRight', 'bottom-left': 'bottomLeft' }; + +export function toVChartBar(barSeries: any): ITheme['series']['bar'] { + if (!barSeries) { + return {}; + } + const { itemStyle, labelStyle, barWidth, barMinWidth, barMaxWidth } = barSeries; + const bar = { + barWidth: barWidth, + barMinWidth: barMinWidth, + barMaxWidth: barMaxWidth, + style: { + ...convertToVChartGraphicStyle(itemStyle, attributeMap) + } + } as any; + + const label = { + position: labelStyle?.position ?? 'inside', + style: { + ...convertToVChartGraphicStyle(labelStyle, labelStyleMap) + } + }; + return { bar, label }; +} diff --git a/packages/vchart-theme-converter/src/echarts/series/funnel.ts b/packages/vchart-theme-converter/src/echarts/series/funnel.ts index 334ce56..f3324cb 100644 --- a/packages/vchart-theme-converter/src/echarts/series/funnel.ts +++ b/packages/vchart-theme-converter/src/echarts/series/funnel.ts @@ -1,6 +1,6 @@ import type { ITheme } from '@visactor/vchart'; import { attributeMap, labelStyleMap } from '../convertMap'; -import { convertToItemStyle } from '../utils'; +import { convertToItemStyle, convertToVChartGraphicStyle } from '../utils'; export function funnelSeriesConverter(funnelSeries: ITheme['series']['funnel'], theme: ITheme) { if (!funnelSeries) { @@ -25,3 +25,24 @@ export function funnelSeriesConverter(funnelSeries: ITheme['series']['funnel'], } return funnelStyle; } + +export function toVChartFunnel(funnelSeries: any): ITheme['series']['funnel'] { + if (!funnelSeries) { + return {}; + } + const { itemStyle, label: echartsLabel } = funnelSeries; + const funnel = { + style: { + ...convertToVChartGraphicStyle(itemStyle, attributeMap) + } + } as any; + + const label = { + visible: echartsLabel?.show ?? false, + style: { + ...convertToVChartGraphicStyle(echartsLabel, labelStyleMap) + } + }; + + return { funnel, label }; +} diff --git a/packages/vchart-theme-converter/src/echarts/series/line.ts b/packages/vchart-theme-converter/src/echarts/series/line.ts index 8b1cca4..a12cb94 100644 --- a/packages/vchart-theme-converter/src/echarts/series/line.ts +++ b/packages/vchart-theme-converter/src/echarts/series/line.ts @@ -1,8 +1,9 @@ import type { ITheme } from '@visactor/vchart'; -import { covertThemeItem } from '../../util/token'; -import { labelStyleMap, lineStyleMap } from '../convertMap'; -import { convertToItemStyle } from '../utils'; +import { convertThemeTokenItem } from '../../util/token'; +import { areaStyleMap, labelStyleMap, lineStyleMap, symbolStyleMap } from '../convertMap'; +import type { IEChartsTheme } from '..'; +import { convertToItemStyle, convertToVChartGraphicStyle } from '../utils'; export function lineSeriesConverter(lineSeries: ITheme['series']['line'], theme: ITheme) { if (!lineSeries) { @@ -42,7 +43,7 @@ export function lineSeriesConverter(lineSeries: ITheme['series']['line'], theme: } if ('size' in style) { - const symbolSize = covertThemeItem(style.size, theme); + const symbolSize = convertThemeTokenItem(style.size, theme); lineTheme.symbolSize = symbolSize; } } @@ -60,3 +61,74 @@ export function lineSeriesConverter(lineSeries: ITheme['series']['line'], theme: return lineTheme; } + +export function toVChartLine(lineSeries: IEChartsTheme): ITheme['series']['line'] { + if (!lineSeries) { + return {}; + } + + const { lineStyle = {}, areaStyle = {}, itemStyle = {}, labelStyle = {} } = lineSeries; + const { symbol = 'circle', symbolSize, smooth, step, showSymbol } = lineSeries; + + const line = { + style: { + ...convertToVChartGraphicStyle(lineStyle, lineStyleMap), + curveType: + smooth === true + ? 'monotone' + : (step => { + switch (step) { + case 'middle': + return 'step'; + case 'end': + return 'stepAfter'; + case 'start': + return 'stepBefore'; + default: + return 'linear'; + } + })(step) + } + }; + + const area = { + style: { + ...convertToVChartGraphicStyle(areaStyle, areaStyleMap), + curveType: + smooth === true + ? 'monotone' + : (step => { + switch (step) { + case 'middle': + return 'step'; + case 'end': + return 'stepAfter'; + case 'start': + return 'stepBefore'; + default: + return 'linear'; + } + })(step) + } + }; + + const point = { + visible: showSymbol, + style: { + ...convertToVChartGraphicStyle(itemStyle, symbolStyleMap), + symbolType: symbol === 'emptyCircle' ? 'circle' : symbol, + fill: symbol === 'emptyCircle' ? 'white' : null, + stroke: symbol === 'emptyCircle' ? null : undefined, + size: symbolSize + } + }; + + const label = { + position: labelStyle?.position, + style: { + ...convertToVChartGraphicStyle(labelStyle, labelStyleMap) + } + }; + // @ts-ignore + return { line, point, label, area }; +} diff --git a/packages/vchart-theme-converter/src/echarts/series/pie.ts b/packages/vchart-theme-converter/src/echarts/series/pie.ts index 1564820..bbb87e5 100644 --- a/packages/vchart-theme-converter/src/echarts/series/pie.ts +++ b/packages/vchart-theme-converter/src/echarts/series/pie.ts @@ -1,9 +1,8 @@ import type { ITheme } from '@visactor/vchart'; -import { covertThemeItem } from '../../util/token'; -import { attributeMap, labelStyleMap, postProcessors } from '../convertMap'; -import { IGradientColor } from '../../util/color'; -import { isNumber, isObject } from '@visactor/vutils'; -import { convertToItemStyle } from '../utils'; +import { convertThemeTokenItem } from '../../util/token'; +import { attributeMap, labelStyleMap } from '../convertMap'; +import { isNumber } from '@visactor/vutils'; +import { convertToVChartGraphicStyle, convertToItemStyle } from '../utils'; export function pieSeriesConverter(pieSeries: ITheme['series']['pie'], theme: ITheme) { if (!pieSeries) { @@ -34,3 +33,25 @@ export function pieSeriesConverter(pieSeries: ITheme['series']['pie'], theme: IT } return pieTheme; } + +export function toVChartPie(pieSeries: any): ITheme['series']['pie'] { + if (!pieSeries) { + return {}; + } + const { itemStyle, label: echartsLabel } = pieSeries; + const pie = { + style: { + ...convertToVChartGraphicStyle(itemStyle, attributeMap) + } + } as any; + + const label = { + visible: echartsLabel?.show ?? true, + position: echartsLabel?.position ?? 'outside', + style: { + ...convertToVChartGraphicStyle(echartsLabel, labelStyleMap) + } + }; + // outerRadius: 0.9 echarts 默认值 + return { pie, label, outerRadius: 0.9 }; +} diff --git a/packages/vchart-theme-converter/src/echarts/seriesConverter.ts b/packages/vchart-theme-converter/src/echarts/seriesConverter.ts index 9994637..2f9425f 100644 --- a/packages/vchart-theme-converter/src/echarts/seriesConverter.ts +++ b/packages/vchart-theme-converter/src/echarts/seriesConverter.ts @@ -1,15 +1,15 @@ import type { ITheme } from '@visactor/vchart'; import { SeriesTypeEnum } from '@visactor/vchart'; -import { lineSeriesConverter } from './series/line'; +import { toVChartLine, lineSeriesConverter } from './series/line'; import { merge } from '@visactor/vutils'; import { areaSeriesConverter } from './series/area'; -import { barSeriesConverter } from './series/bar'; -import { pieSeriesConverter } from './series/pie'; -import { funnelSeriesConverter } from './series/funnel'; +import { barSeriesConverter, toVChartBar } from './series/bar'; +import { pieSeriesConverter, toVChartPie } from './series/pie'; +import { funnelSeriesConverter, toVChartFunnel } from './series/funnel'; const VCHART_SERIES_TYPES = Object.keys(SeriesTypeEnum); -const seriesConverter = { +const toEChartsConverter = { line: lineSeriesConverter, area: areaSeriesConverter, bar: barSeriesConverter, @@ -17,19 +17,26 @@ const seriesConverter = { funnel: funnelSeriesConverter }; +export const toVChartConverter = { + line: toVChartLine, + bar: toVChartBar, + pie: toVChartPie, + funnel: toVChartFunnel +}; + export function convertSeries(series: ITheme['series'], theme: ITheme) { const result = {} as any; VCHART_SERIES_TYPES.forEach(type => { - if (seriesConverter[type]) { + if (toEChartsConverter[type]) { if (type === 'area') { if (!result.line) { result.line = {}; } - result.line = merge(result.line, seriesConverter[type](series[type], theme)); + result.line = merge(result.line, toEChartsConverter[type](series[type], theme)); } else { // 这里后续可能存在问题：vchart series type 和 echarts series type 不一致 - result[type] = merge(result[type] ?? {}, seriesConverter[type](series[type], theme)); + result[type] = merge(result[type] ?? {}, toEChartsConverter[type](series[type], theme)); } } }); diff --git a/packages/vchart-theme-converter/src/echarts/textStyleConverter.ts b/packages/vchart-theme-converter/src/echarts/textStyleConverter.ts deleted file mode 100644 index 44d9450..0000000 --- a/packages/vchart-theme-converter/src/echarts/textStyleConverter.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type { ITextMarkSpec, ITheme } from '@visactor/vchart'; -import { textStyleMap } from './convertMap'; -import { covertThemeItem } from '../util/token'; - -export function convertTextStyle(textStyle: ITextMarkSpec, theme: ITheme) { - const result = { - fontFamily: covertThemeItem(theme.fontFamily, theme) - }; - - for (const key in textStyle) { - result[textStyleMap[key] ?? key] = covertThemeItem(textStyle[key], theme); - } - - return result; -} diff --git a/packages/vchart-theme-converter/src/echarts/utils.ts b/packages/vchart-theme-converter/src/echarts/utils.ts index 9979f50..547cc89 100644 --- a/packages/vchart-theme-converter/src/echarts/utils.ts +++ b/packages/vchart-theme-converter/src/echarts/utils.ts @@ -1,17 +1,24 @@ import type { ITheme } from '@visactor/vchart'; import type { IGradientColor } from '../util/color'; import { isObject } from '@visactor/vutils'; -import { covertThemeItem } from '../util/token'; +import { convertThemeTokenItem } from '../util/token'; import { postProcessors } from './convertMap'; +import type { IEChartsTheme } from '.'; +/** + * vchart => echarts 图元属性转换 + */ export function convertToItemStyle( vchartStyle: Record, convertMap: Record, theme: ITheme ) { + if (!vchartStyle) { + return {}; + } const itemStyle = {} as Record; for (const key in vchartStyle) { - let styleValue = covertThemeItem(vchartStyle[key], theme); + let styleValue = convertThemeTokenItem(vchartStyle[key], theme); if (key === 'fill' && isObject(styleValue)) { styleValue = postProcessors.fill(styleValue, itemStyle); } @@ -49,3 +56,27 @@ export function convertGradientColor(color: IGradientColor) { // conical 渐变 echarts 不支持 return {}; } + +/** + * echarts => vchart 图元属性转换 + */ + +export function convertToVChartGraphicStyle(style: IEChartsTheme, convertMap: Record) { + const vchartStyle = {} as any; + const map = reverseObject(convertMap); + for (const key in style) { + const vchartKey = map[key] ?? key; + vchartStyle[vchartKey] = style[key]; + } + return vchartStyle; +} + +function reverseObject(obj: Record) { + const reversedObj = {}; + for (const key in obj) { + if (obj.hasOwnProperty(key)) { + reversedObj[obj[key]] = key; + } + } + return reversedObj; +} diff --git a/packages/vchart-theme-converter/src/util/token.ts b/packages/vchart-theme-converter/src/util/token.ts index eda4c1e..08f6b3c 100644 --- a/packages/vchart-theme-converter/src/util/token.ts +++ b/packages/vchart-theme-converter/src/util/token.ts @@ -30,7 +30,7 @@ export function isTokenOrPalette(value: ITokenKey | IColorKey | any): boolean { return value?.type === 'palette' || value?.type === 'token'; } -export function covertThemeItem(vchartStyle: ITokenKey | IColorKey | any, theme: ITheme) { +export function convertThemeTokenItem(vchartStyle: ITokenKey | IColorKey | any, theme: ITheme) { if (!isValid(vchartStyle)) { return; } From c5324eeb4f4e18105d75a0395c9f9fa869996793 Mon Sep 17 00:00:00 2001 From: xiaoluoHe Date: Tue, 2 Jul 2024 21:06:06 +0800 Subject: [PATCH 05/16] chore: demo support theme change --- common/config/rush/pnpm-lock.yaml | 4 +- .../vchart-theme-converter/demo/src/App.tsx | 57 ++- .../vchart-theme-converter/demo/src/Chart.tsx | 43 ++- .../demo/src/theme/echarts-dark.ts | 354 +++++++++++++++++ .../demo/src/theme/echarts-shine.ts | 354 +++++++++++++++++ .../demo/src/theme/echarts-vintage.ts | 365 ++++++++++++++++++ packages/vchart-theme-converter/package.json | 3 +- .../src/echarts/component/axis.ts | 122 +++--- .../src/echarts/component/discreteLegend.ts | 2 +- .../src/echarts/index.ts | 3 +- 10 files changed, 1211 insertions(+), 96 deletions(-) create mode 100644 packages/vchart-theme-converter/demo/src/theme/echarts-dark.ts create mode 100644 packages/vchart-theme-converter/demo/src/theme/echarts-shine.ts create mode 100644 packages/vchart-theme-converter/demo/src/theme/echarts-vintage.ts diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index def474c..3ea57e7 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -323,6 +323,7 @@ importers: '@visactor/react-vchart': 1.11.0 '@visactor/vchart': 1.11.0 '@visactor/vchart-semi-theme': workspace:1.11.4 + '@visactor/vchart-theme': workspace:1.11.4 '@visactor/vutils': ~0.18.9 '@vitejs/plugin-react': ^4.1.1 '@vitejs/plugin-react-swc': ^3.4.1 @@ -367,7 +368,6 @@ importers: vite: ^4.5.0 vite-plugin-svgr: ^4.1.0 dependencies: - '@visactor/vchart-semi-theme': link:../vchart-semi-theme '@visactor/vutils': 0.18.9 devDependencies: '@arco-design/color': 0.4.0 @@ -397,6 +397,8 @@ importers: '@typescript-eslint/parser': 5.30.0_vwud3sodsb5zxmzckoj7rdwdbq '@visactor/react-vchart': 1.11.0_biqbaboplfbrettd7655fr4n2y '@visactor/vchart': 1.11.0 + '@visactor/vchart-semi-theme': link:../vchart-semi-theme + '@visactor/vchart-theme': link:../vchart-theme '@vitejs/plugin-react': 4.2.1_vite@4.5.3 '@vitejs/plugin-react-swc': 3.6.0_vite@4.5.3 classnames: 2.5.1 diff --git a/packages/vchart-theme-converter/demo/src/App.tsx b/packages/vchart-theme-converter/demo/src/App.tsx index 4ecacc8..5bd930e 100644 --- a/packages/vchart-theme-converter/demo/src/App.tsx +++ b/packages/vchart-theme-converter/demo/src/App.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { spec as vchartLineSpec } from './spec/vchart/line'; import { spec as echartsLineOption } from './spec/echarts/line'; import { spec as vchartBarSpec } from './spec/vchart/bar'; @@ -8,7 +8,14 @@ import { spec as echartsPieOption } from './spec/echarts/pie'; import { spec as vchartFunnelSpec } from './spec/vchart/funnel'; import { spec as echartsFunnelOption } from './spec/echarts/funnel'; import { Charts } from './Chart'; +import { theme as echartsShine } from './theme/echarts-shine'; +import { theme as echartsDark } from './theme/echarts-dark'; +import { theme as echartsVintage } from './theme/echarts-vintage'; +import { chartHubLightTheme } from '@visactor/vchart-theme'; + import './index.css'; +import { EC2VC, VC2EC } from '../../src'; +import { semiDesignDark, semiDesignLight } from '@visactor/vchart-semi-theme'; const demoList = [ { vchartSpec: vchartLineSpec, echartsOption: echartsLineOption }, @@ -17,12 +24,58 @@ const demoList = [ { vchartSpec: vchartFunnelSpec, echartsOption: echartsFunnelOption } ]; +const themeList = [ + { name: 'vchart-semi-light', type: 'light', vchartTheme: semiDesignLight, echartsTheme: VC2EC(semiDesignLight) }, + { name: 'echarts-shine', type: 'light', echartsTheme: echartsShine, vchartTheme: EC2VC(echartsShine) }, + { name: 'echarts-vintage', type: 'light', echartsTheme: echartsVintage, vchartTheme: EC2VC(echartsVintage) }, + { name: 'vchart-chartHub', type: 'light', echartsTheme: VC2EC(chartHubLightTheme), vchartTheme: chartHubLightTheme } + + // { name: 'echarts-dark', type: 'dark', echartsTheme: echartsDark, vchartTheme: EC2VC(echartsLight, 'dark') }, + // { name: 'vchart-semi-dark', type: 'dark', vchartTheme: semiDesignDark, echartsTheme: VC2EC(semiDesignDark) } +]; + +console.log(themeList); + function App() { + const [themeName, setThemeName] = useState('vchart-semi-light'); + const [themeType, setThemeType] = useState('light'); + const [ecTheme, setECTheme] = useState(themeList.find(theme => theme.name === 'vchart-semi-light')?.echartsTheme); + const [vcTheme, setVCTheme] = useState(themeList.find(theme => theme.name === 'vchart-semi-light')?.vchartTheme); + + const handleChange = (event: any) => { + setThemeName(event.target.value); + }; + + useEffect(() => { + const theme = themeList.find(theme => theme.name === themeName); + if (theme) { + const { type, echartsTheme, vchartTheme } = theme; + setThemeType(type); + setECTheme(echartsTheme); + setVCTheme(vchartTheme); + } + }, [themeName]); + return ( <> + {demoList.map((demo, i) => { const { vchartSpec, echartsOption } = demo; - return ; + return ( + + ); })} ); diff --git a/packages/vchart-theme-converter/demo/src/Chart.tsx b/packages/vchart-theme-converter/demo/src/Chart.tsx index 74ba3db..40e9ac5 100644 --- a/packages/vchart-theme-converter/demo/src/Chart.tsx +++ b/packages/vchart-theme-converter/demo/src/Chart.tsx @@ -1,22 +1,17 @@ import React, { useEffect, useRef } from 'react'; import * as echarts from 'echarts'; import VChart from '@visactor/vchart'; -import { initVChartSemiTheme } from '@visactor/vchart-semi-theme'; -import { EC2VC, VC2EC } from '../../src/index'; -import { theme as echartsLight } from './theme/echarts-light'; +import { VC2EC } from '../../src'; -initVChartSemiTheme({ isWatchingMode: true }); - -// const echartsTheme = VC2EC(VChart.ThemeManager.getCurrentTheme()); - -const echartsTheme = echartsLight; - -VChart.ThemeManager.registerTheme('echarts-light', EC2VC(echartsLight)); -VChart.ThemeManager.setCurrentTheme('echarts-light'); -console.log('echarts theme:', echartsLight); -console.log('vchart theme:', VChart.ThemeManager.getCurrentTheme()); -export function Charts(props: { echartsOption: any; vchartSpec: any }) { - const { echartsOption, vchartSpec } = props; +export function Charts(props: { + echartsOption: any; + vchartSpec: any; + themeName: string; + themeType: string; + echartsTheme: any; + vchartTheme: any; +}) { + const { echartsOption, vchartSpec, echartsTheme, themeName, vchartTheme } = props; const ecRef = useRef(null); const vcRef = useRef(null); @@ -24,7 +19,14 @@ export function Charts(props: { echartsOption: any; vchartSpec: any }) { useEffect(() => { if (echartsOption && ecRef.current) { - const myChart = echarts.init(ecRef.current, echartsTheme); + let theme = echartsTheme; + if (themeName.includes('vchart')) { + VChart.ThemeManager.registerTheme('__temp__', vchartTheme); + theme = VC2EC(VChart.ThemeManager.getTheme('__temp__')); + VChart.ThemeManager.removeTheme('__temp__'); + } + console.log(theme, vchartTheme); + const myChart = echarts.init(ecRef.current, theme); myChart.setOption(echartsOption); const resizeOb = new ResizeObserver(entries => { for (const entry of entries) { @@ -42,7 +44,12 @@ export function Charts(props: { echartsOption: any; vchartSpec: any }) { useEffect(() => { if (vchartSpec && vcRef.current) { - const vchart = new VChart(vchartSpec, { dom: vcRef.current }); + // if (!VChart.ThemeManager.getTheme(themeName)) { + // VChart.ThemeManager.registerTheme(themeName, vchartTheme); + // console.log('register theme:', themeName); + // } + // VChart.ThemeManager.setCurrentTheme(themeName); + const vchart = new VChart(vchartSpec, { dom: vcRef.current, theme: vchartTheme }); vchart.renderSync(); window['vchart'] = vchart; @@ -50,7 +57,7 @@ export function Charts(props: { echartsOption: any; vchartSpec: any }) { vchart.release(); }; } - }, []); + }); return ( <> diff --git a/packages/vchart-theme-converter/demo/src/theme/echarts-dark.ts b/packages/vchart-theme-converter/demo/src/theme/echarts-dark.ts new file mode 100644 index 0000000..ee51f84 --- /dev/null +++ b/packages/vchart-theme-converter/demo/src/theme/echarts-dark.ts @@ -0,0 +1,354 @@ +export const theme = { + color: ['#fc97af', '#87f7cf', '#f7f494', '#72ccff', '#f7c5a0', '#d4a4eb', '#d2f5a6', '#76f2f2'], + backgroundColor: 'rgba(41,52,65,1)', + textStyle: {}, + title: { + textStyle: { + color: '#ffffff' + }, + subtextStyle: { + color: '#dddddd' + } + }, + line: { + itemStyle: { + borderWidth: '4' + }, + lineStyle: { + width: '3' + }, + symbolSize: '0', + symbol: 'circle', + smooth: true + }, + radar: { + itemStyle: { + borderWidth: '4' + }, + lineStyle: { + width: '3' + }, + symbolSize: '0', + symbol: 'circle', + smooth: true + }, + bar: { + itemStyle: { + barBorderWidth: 0, + barBorderColor: '#ccc' + } + }, + pie: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + } + }, + scatter: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + } + }, + boxplot: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + } + }, + parallel: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + } + }, + sankey: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + } + }, + funnel: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + } + }, + gauge: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + } + }, + candlestick: { + itemStyle: { + color: '#fc97af', + color0: 'transparent', + borderColor: '#fc97af', + borderColor0: '#87f7cf', + borderWidth: '2' + } + }, + graph: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + }, + lineStyle: { + width: '1', + color: '#ffffff' + }, + symbolSize: '0', + symbol: 'circle', + smooth: true, + color: ['#fc97af', '#87f7cf', '#f7f494', '#72ccff', '#f7c5a0', '#d4a4eb', '#d2f5a6', '#76f2f2'], + label: { + color: '#293441' + } + }, + map: { + itemStyle: { + areaColor: '#f3f3f3', + borderColor: '#999999', + borderWidth: 0.5 + }, + label: { + color: '#893448' + }, + emphasis: { + itemStyle: { + areaColor: 'rgba(255,178,72,1)', + borderColor: '#eb8146', + borderWidth: 1 + }, + label: { + color: 'rgb(137,52,72)' + } + } + }, + geo: { + itemStyle: { + areaColor: '#f3f3f3', + borderColor: '#999999', + borderWidth: 0.5 + }, + label: { + color: '#893448' + }, + emphasis: { + itemStyle: { + areaColor: 'rgba(255,178,72,1)', + borderColor: '#eb8146', + borderWidth: 1 + }, + label: { + color: 'rgb(137,52,72)' + } + } + }, + categoryAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#666666' + } + }, + axisTick: { + show: false, + lineStyle: { + color: '#333' + } + }, + axisLabel: { + show: true, + color: '#aaaaaa' + }, + splitLine: { + show: false, + lineStyle: { + color: ['#e6e6e6'] + } + }, + splitArea: { + show: false, + areaStyle: { + color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'] + } + } + }, + valueAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#666666' + } + }, + axisTick: { + show: false, + lineStyle: { + color: '#333' + } + }, + axisLabel: { + show: true, + color: '#aaaaaa' + }, + splitLine: { + show: false, + lineStyle: { + color: ['#e6e6e6'] + } + }, + splitArea: { + show: false, + areaStyle: { + color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'] + } + } + }, + logAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#666666' + } + }, + axisTick: { + show: false, + lineStyle: { + color: '#333' + } + }, + axisLabel: { + show: true, + color: '#aaaaaa' + }, + splitLine: { + show: false, + lineStyle: { + color: ['#e6e6e6'] + } + }, + splitArea: { + show: false, + areaStyle: { + color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'] + } + } + }, + timeAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#666666' + } + }, + axisTick: { + show: false, + lineStyle: { + color: '#333' + } + }, + axisLabel: { + show: true, + color: '#aaaaaa' + }, + splitLine: { + show: false, + lineStyle: { + color: ['#e6e6e6'] + } + }, + splitArea: { + show: false, + areaStyle: { + color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'] + } + } + }, + toolbox: { + iconStyle: { + borderColor: '#999999' + }, + emphasis: { + iconStyle: { + borderColor: '#666666' + } + } + }, + legend: { + textStyle: { + color: '#999999' + } + }, + tooltip: { + axisPointer: { + lineStyle: { + color: '#cccccc', + width: 1 + }, + crossStyle: { + color: '#cccccc', + width: 1 + } + } + }, + timeline: { + lineStyle: { + color: '#87f7cf', + width: 1 + }, + itemStyle: { + color: '#87f7cf', + borderWidth: 1 + }, + controlStyle: { + color: '#87f7cf', + borderColor: '#87f7cf', + borderWidth: 0.5 + }, + checkpointStyle: { + color: '#fc97af', + borderColor: '#fc97af' + }, + label: { + color: '#87f7cf' + }, + emphasis: { + itemStyle: { + color: '#f7f494' + }, + controlStyle: { + color: '#87f7cf', + borderColor: '#87f7cf', + borderWidth: 0.5 + }, + label: { + color: '#87f7cf' + } + } + }, + visualMap: { + color: ['#fc97af', '#87f7cf'] + }, + dataZoom: { + backgroundColor: 'rgba(255,255,255,0)', + dataBackgroundColor: 'rgba(114,204,255,1)', + fillerColor: 'rgba(114,204,255,0.2)', + handleColor: '#72ccff', + handleSize: '100%', + textStyle: { + color: '#333333' + } + }, + markPoint: { + label: { + color: '#293441' + }, + emphasis: { + label: { + color: '#293441' + } + } + } +}; diff --git a/packages/vchart-theme-converter/demo/src/theme/echarts-shine.ts b/packages/vchart-theme-converter/demo/src/theme/echarts-shine.ts new file mode 100644 index 0000000..4ee1851 --- /dev/null +++ b/packages/vchart-theme-converter/demo/src/theme/echarts-shine.ts @@ -0,0 +1,354 @@ +export const theme = { + color: ['#c12e34', '#e6b600', '#0098d9', '#2b821d', '#005eaa', '#339ca8', '#cda819', '#32a487'], + backgroundColor: 'rgba(0,0,0,0)', + textStyle: {}, + title: { + textStyle: { + color: '#333333' + }, + subtextStyle: { + color: '#aaaaaa' + } + }, + line: { + itemStyle: { + borderWidth: 1 + }, + lineStyle: { + width: 2 + }, + symbolSize: 4, + symbol: 'emptyCircle', + smooth: false + }, + radar: { + itemStyle: { + borderWidth: 1 + }, + lineStyle: { + width: 2 + }, + symbolSize: 4, + symbol: 'emptyCircle', + smooth: false + }, + bar: { + itemStyle: { + barBorderWidth: 0, + barBorderColor: '#ccc' + } + }, + pie: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + } + }, + scatter: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + } + }, + boxplot: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + } + }, + parallel: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + } + }, + sankey: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + } + }, + funnel: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + } + }, + gauge: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + } + }, + candlestick: { + itemStyle: { + color: '#c12e34', + color0: '#2b821d', + borderColor: '#c12e34', + borderColor0: '#2b821d', + borderWidth: 1 + } + }, + graph: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + }, + lineStyle: { + width: 1, + color: '#aaaaaa' + }, + symbolSize: 4, + symbol: 'emptyCircle', + smooth: false, + color: ['#c12e34', '#e6b600', '#0098d9', '#2b821d', '#005eaa', '#339ca8', '#cda819', '#32a487'], + label: { + color: '#eeeeee' + } + }, + map: { + itemStyle: { + areaColor: '#ddd', + borderColor: '#eee', + borderWidth: 0.5 + }, + label: { + color: '#c12e34' + }, + emphasis: { + itemStyle: { + areaColor: '#e6b600', + borderColor: '#ddd', + borderWidth: 1 + }, + label: { + color: '#c12e34' + } + } + }, + geo: { + itemStyle: { + areaColor: '#ddd', + borderColor: '#eee', + borderWidth: 0.5 + }, + label: { + color: '#c12e34' + }, + emphasis: { + itemStyle: { + areaColor: '#e6b600', + borderColor: '#ddd', + borderWidth: 1 + }, + label: { + color: '#c12e34' + } + } + }, + categoryAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#333' + } + }, + axisTick: { + show: true, + lineStyle: { + color: '#333' + } + }, + axisLabel: { + show: true, + color: '#333' + }, + splitLine: { + show: false, + lineStyle: { + color: ['#ccc'] + } + }, + splitArea: { + show: false, + areaStyle: { + color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'] + } + } + }, + valueAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#333' + } + }, + axisTick: { + show: true, + lineStyle: { + color: '#333' + } + }, + axisLabel: { + show: true, + color: '#333' + }, + splitLine: { + show: true, + lineStyle: { + color: ['#ccc'] + } + }, + splitArea: { + show: false, + areaStyle: { + color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'] + } + } + }, + logAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#333' + } + }, + axisTick: { + show: true, + lineStyle: { + color: '#333' + } + }, + axisLabel: { + show: true, + color: '#333' + }, + splitLine: { + show: true, + lineStyle: { + color: ['#ccc'] + } + }, + splitArea: { + show: false, + areaStyle: { + color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'] + } + } + }, + timeAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#333' + } + }, + axisTick: { + show: true, + lineStyle: { + color: '#333' + } + }, + axisLabel: { + show: true, + color: '#333' + }, + splitLine: { + show: true, + lineStyle: { + color: ['#ccc'] + } + }, + splitArea: { + show: false, + areaStyle: { + color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'] + } + } + }, + toolbox: { + iconStyle: { + borderColor: '#06467c' + }, + emphasis: { + iconStyle: { + borderColor: '#4187c2' + } + } + }, + legend: { + textStyle: { + color: '#333333' + } + }, + tooltip: { + axisPointer: { + lineStyle: { + color: '#cccccc', + width: 1 + }, + crossStyle: { + color: '#cccccc', + width: 1 + } + } + }, + timeline: { + lineStyle: { + color: '#005eaa', + width: 1 + }, + itemStyle: { + color: '#005eaa', + borderWidth: 1 + }, + controlStyle: { + color: '#005eaa', + borderColor: '#005eaa', + borderWidth: 0.5 + }, + checkpointStyle: { + color: '#005eaa', + borderColor: '#316bc2' + }, + label: { + color: '#005eaa' + }, + emphasis: { + itemStyle: { + color: '#005eaa' + }, + controlStyle: { + color: '#005eaa', + borderColor: '#005eaa', + borderWidth: 0.5 + }, + label: { + color: '#005eaa' + } + } + }, + visualMap: { + color: ['#1790cf', '#a2d4e6'] + }, + dataZoom: { + backgroundColor: 'rgba(47,69,84,0)', + dataBackgroundColor: 'rgba(47,69,84,0.3)', + fillerColor: 'rgba(167,183,204,0.4)', + handleColor: '#a7b7cc', + handleSize: '100%', + textStyle: { + color: '#333333' + } + }, + markPoint: { + label: { + color: '#eeeeee' + }, + emphasis: { + label: { + color: '#eeeeee' + } + } + } +}; diff --git a/packages/vchart-theme-converter/demo/src/theme/echarts-vintage.ts b/packages/vchart-theme-converter/demo/src/theme/echarts-vintage.ts new file mode 100644 index 0000000..499696b --- /dev/null +++ b/packages/vchart-theme-converter/demo/src/theme/echarts-vintage.ts @@ -0,0 +1,365 @@ +export const theme = { + color: ['#d87c7c', '#919e8b', '#d7ab82', '#6e7074', '#61a0a8', '#efa18d', '#787464', '#cc7e63', '#724e58', '#4b565b'], + backgroundColor: 'rgba(254,248,239,1)', + textStyle: {}, + title: { + textStyle: { + color: '#333333' + }, + subtextStyle: { + color: '#aaaaaa' + } + }, + line: { + itemStyle: { + borderWidth: 1 + }, + lineStyle: { + width: 2 + }, + symbolSize: 4, + symbol: 'emptyCircle', + smooth: false + }, + radar: { + itemStyle: { + borderWidth: 1 + }, + lineStyle: { + width: 2 + }, + symbolSize: 4, + symbol: 'emptyCircle', + smooth: false + }, + bar: { + itemStyle: { + barBorderWidth: 0, + barBorderColor: '#ccc' + } + }, + pie: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + } + }, + scatter: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + } + }, + boxplot: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + } + }, + parallel: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + } + }, + sankey: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + } + }, + funnel: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + } + }, + gauge: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + } + }, + candlestick: { + itemStyle: { + color: '#c23531', + color0: '#314656', + borderColor: '#c23531', + borderColor0: '#314656', + borderWidth: 1 + } + }, + graph: { + itemStyle: { + borderWidth: 0, + borderColor: '#ccc' + }, + lineStyle: { + width: 1, + color: '#aaaaaa' + }, + symbolSize: 4, + symbol: 'emptyCircle', + smooth: false, + color: [ + '#d87c7c', + '#919e8b', + '#d7ab82', + '#6e7074', + '#61a0a8', + '#efa18d', + '#787464', + '#cc7e63', + '#724e58', + '#4b565b' + ], + label: { + color: '#eeeeee' + } + }, + map: { + itemStyle: { + areaColor: '#eeeeee', + borderColor: '#444444', + borderWidth: 0.5 + }, + label: { + color: '#000000' + }, + emphasis: { + itemStyle: { + areaColor: 'rgba(255,215,0,0.8)', + borderColor: '#444444', + borderWidth: 1 + }, + label: { + color: 'rgb(100,0,0)' + } + } + }, + geo: { + itemStyle: { + areaColor: '#eeeeee', + borderColor: '#444444', + borderWidth: 0.5 + }, + label: { + color: '#000000' + }, + emphasis: { + itemStyle: { + areaColor: 'rgba(255,215,0,0.8)', + borderColor: '#444444', + borderWidth: 1 + }, + label: { + color: 'rgb(100,0,0)' + } + } + }, + categoryAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#333' + } + }, + axisTick: { + show: true, + lineStyle: { + color: '#333' + } + }, + axisLabel: { + show: true, + color: '#333' + }, + splitLine: { + show: false, + lineStyle: { + color: ['#ccc'] + } + }, + splitArea: { + show: false, + areaStyle: { + color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'] + } + } + }, + valueAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#333' + } + }, + axisTick: { + show: true, + lineStyle: { + color: '#333' + } + }, + axisLabel: { + show: true, + color: '#333' + }, + splitLine: { + show: true, + lineStyle: { + color: ['#ccc'] + } + }, + splitArea: { + show: false, + areaStyle: { + color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'] + } + } + }, + logAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#333' + } + }, + axisTick: { + show: true, + lineStyle: { + color: '#333' + } + }, + axisLabel: { + show: true, + color: '#333' + }, + splitLine: { + show: true, + lineStyle: { + color: ['#ccc'] + } + }, + splitArea: { + show: false, + areaStyle: { + color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'] + } + } + }, + timeAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#333' + } + }, + axisTick: { + show: true, + lineStyle: { + color: '#333' + } + }, + axisLabel: { + show: true, + color: '#333' + }, + splitLine: { + show: true, + lineStyle: { + color: ['#ccc'] + } + }, + splitArea: { + show: false, + areaStyle: { + color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'] + } + } + }, + toolbox: { + iconStyle: { + borderColor: '#999999' + }, + emphasis: { + iconStyle: { + borderColor: '#666666' + } + } + }, + legend: { + textStyle: { + color: '#333333' + } + }, + tooltip: { + axisPointer: { + lineStyle: { + color: '#cccccc', + width: 1 + }, + crossStyle: { + color: '#cccccc', + width: 1 + } + } + }, + timeline: { + lineStyle: { + color: '#293c55', + width: 1 + }, + itemStyle: { + color: '#293c55', + borderWidth: 1 + }, + controlStyle: { + color: '#293c55', + borderColor: '#293c55', + borderWidth: 0.5 + }, + checkpointStyle: { + color: '#e43c59', + borderColor: '#c23531' + }, + label: { + color: '#293c55' + }, + emphasis: { + itemStyle: { + color: '#a9334c' + }, + controlStyle: { + color: '#293c55', + borderColor: '#293c55', + borderWidth: 0.5 + }, + label: { + color: '#293c55' + } + } + }, + visualMap: { + color: ['#bf444c', '#d88273', '#f6efa6'] + }, + dataZoom: { + backgroundColor: 'rgba(47,69,84,0)', + dataBackgroundColor: 'rgba(47,69,84,0.3)', + fillerColor: 'rgba(167,183,204,0.4)', + handleColor: '#a7b7cc', + handleSize: '100%', + textStyle: { + color: '#333333' + } + }, + markPoint: { + label: { + color: '#eeeeee' + }, + emphasis: { + label: { + color: '#eeeeee' + } + } + } +}; diff --git a/packages/vchart-theme-converter/package.json b/packages/vchart-theme-converter/package.json index 173f8c6..9c9e4b5 100644 --- a/packages/vchart-theme-converter/package.json +++ b/packages/vchart-theme-converter/package.json @@ -20,11 +20,12 @@ "prepublishOnly": "npm run build" }, "dependencies": { - "@visactor/vchart-semi-theme": "workspace:1.11.4", "@visactor/vutils": "~0.18.9" }, "devDependencies": { "@visactor/vchart": "1.11.0", + "@visactor/vchart-semi-theme": "workspace:1.11.4", + "@visactor/vchart-theme": "workspace:1.11.4", "echarts": "5.5.0", "@types/echarts": "4.9.22", "@esbuild-plugins/node-globals-polyfill": "0.1.1", diff --git a/packages/vchart-theme-converter/src/echarts/component/axis.ts b/packages/vchart-theme-converter/src/echarts/component/axis.ts index a01bf53..0556d1d 100644 --- a/packages/vchart-theme-converter/src/echarts/component/axis.ts +++ b/packages/vchart-theme-converter/src/echarts/component/axis.ts @@ -1,9 +1,8 @@ +import type { IEChartsTheme } from './../index'; import type { IAxisCommonTheme, ITheme } from '@visactor/vchart'; -import { merge } from '@visactor/vutils'; -import { convertThemeTokenItem } from '../../util/token'; -import { axisLineStyleMap, labelStyleMap, lineStyleMap, postProcessors } from '../convertMap'; -import type { IEChartsTheme } from '..'; -import { convertToVChartGraphicStyle } from '../utils'; +import { isValid, merge } from '@visactor/vutils'; +import { axisLineStyleMap, labelStyleMap } from '../convertMap'; +import { convertToItemStyle, convertToVChartGraphicStyle } from '../utils'; export function axisConverter(component: ITheme['component'], theme: ITheme) { const axisTheme = {} as any; @@ -28,67 +27,65 @@ function convertCategoryAxis(component: ITheme['component'], theme: ITheme) { if (domainLine) { const { visible, style } = domainLine; categoryAxis.axisLine = { - show: visible, - lineStyle: {} + lineStyle: convertToItemStyle(style, axisLineStyleMap, theme) }; - for (const key in style) { - categoryAxis.axisLine.lineStyle[axisLineStyleMap[key] ?? key] = convertThemeTokenItem(style[key], theme); + if (isValid(visible)) { + categoryAxis.axisLine.show = visible; } } if (grid) { const { visible, style } = grid; categoryAxis.splitLine = { - show: visible, - lineStyle: {} + lineStyle: convertToItemStyle(style, axisLineStyleMap, theme) }; - for (const key in style) { - categoryAxis.splitLine.lineStyle[axisLineStyleMap[key] ?? key] = convertThemeTokenItem(style[key], theme); + if (isValid(visible)) { + categoryAxis.splitLine.show = visible; } } if (subGrid) { const { visible, style } = subGrid; categoryAxis.minorSplitLine = { - show: visible, - lineStyle: {} + lineStyle: convertToItemStyle(style, axisLineStyleMap, theme) }; - for (const key in style) { - categoryAxis.minorSplitLine[axisLineStyleMap[key] ?? key] = convertThemeTokenItem(style[key], theme); + if (isValid(visible)) { + categoryAxis.minorSplitLine.show = visible; } } if (label) { const { visible, style, space } = label; categoryAxis.axisLabel = { - show: visible, - margin: space + margin: space, + ...convertToItemStyle(style, labelStyleMap, theme) }; - for (const key in style) { - categoryAxis.axisLabel[labelStyleMap[key] ?? key] = convertThemeTokenItem(style[key], theme); + if (isValid(visible)) { + categoryAxis.axisLabel.show = visible; } } + if (tick) { const { visible, style, tickSize, alignWithLabel } = tick; categoryAxis.axisTick = { - show: visible, alignWithLabel, - length: tickSize + length: tickSize, + lineStyle: convertToItemStyle(style, axisLineStyleMap, theme) }; - for (const key in style) { - categoryAxis.axisTick[lineStyleMap[key] ?? key] = convertThemeTokenItem(style[key], theme); + if (isValid(visible)) { + categoryAxis.axisTick.show = visible; } } if (subTick) { const { visible, style, tickSize, tickCount } = subTick; categoryAxis.minorTick = { - show: visible, length: tickSize, - splitNumber: tickCount + splitNumber: tickCount, + lineStyle: convertToItemStyle(style, axisLineStyleMap, theme) }; - for (const key in style) { - categoryAxis.minorTick[lineStyleMap[key] ?? key] = convertThemeTokenItem(style[key], theme); + if (isValid(visible)) { + categoryAxis.minorTick.show = visible; } } @@ -97,17 +94,7 @@ function convertCategoryAxis(component: ITheme['component'], theme: ITheme) { categoryAxis.nameLocation = position ?? 'middle'; // nameGap 是标题到轴线的距离 categoryAxis.nameGap = space + (categoryAxis.axisLabel?.margin ?? 0) + (categoryAxis.axisTick?.length ?? 0); - categoryAxis.nameTextStyle = {}; - for (const key in style) { - const styleValue = convertThemeTokenItem(style[key], theme); - if (key === 'lineHeight' && styleValue.includes('%')) { - // 百分比 lineHeight 在 echarts 不支持 - // TODO: 支持百分比 lineHeight 解析 - // categoryAxis.nameTextStyle.lineHeight = 18; // fontSize * percent - } else { - categoryAxis.nameTextStyle[labelStyleMap[key] ?? key] = styleValue; - } - } + categoryAxis.nameTextStyle = convertToItemStyle(style, labelStyleMap, theme); } return categoryAxis; @@ -125,67 +112,65 @@ function convertLinearAxis(component: ITheme['component'], theme: ITheme) { if (domainLine) { const { visible, style } = domainLine; valueAxis.axisLine = { - show: visible, - lineStyle: {} + lineStyle: convertToItemStyle(style, axisLineStyleMap, theme) }; - for (const key in style) { - valueAxis.axisLine.lineStyle[axisLineStyleMap[key] ?? key] = convertThemeTokenItem(style[key], theme); + if (isValid(visible)) { + valueAxis.axisLine.show = visible; } } if (grid) { const { visible, style } = grid; valueAxis.splitLine = { - show: visible, - lineStyle: {} + lineStyle: convertToItemStyle(style, axisLineStyleMap, theme) }; - for (const key in style) { - valueAxis.splitLine.lineStyle[axisLineStyleMap[key] ?? key] = convertThemeTokenItem(style[key], theme); + if (isValid(visible)) { + valueAxis.splitLine.show = visible; } } if (subGrid) { const { visible, style } = subGrid; valueAxis.minorSplitLine = { - show: visible, - lineStyle: {} + lineStyle: convertToItemStyle(style, axisLineStyleMap, theme) }; - for (const key in style) { - valueAxis.minorSplitLine[axisLineStyleMap[key] ?? key] = convertThemeTokenItem(style[key], theme); + if (isValid(visible)) { + valueAxis.minorSplitLine.show = visible; } } if (label) { const { visible, style, space } = label; valueAxis.axisLabel = { - show: visible, - margin: space + margin: space, + ...convertToItemStyle(style, labelStyleMap, theme) }; - for (const key in style) { - valueAxis.axisLabel[labelStyleMap[key] ?? key] = convertThemeTokenItem(style[key], theme); + if (isValid(visible)) { + valueAxis.axisLabel.show = visible; } } + if (tick) { const { visible, style, tickSize, alignWithLabel } = tick; valueAxis.axisTick = { - show: visible, alignWithLabel, - length: tickSize + length: tickSize, + lineStyle: convertToItemStyle(style, axisLineStyleMap, theme) }; - for (const key in style) { - valueAxis.axisTick[axisLineStyleMap[key] ?? key] = convertThemeTokenItem(style[key], theme); + if (isValid(visible)) { + valueAxis.axisTick.show = visible; } } if (subTick) { const { visible, style, tickSize, tickCount } = subTick; valueAxis.minorTick = { - show: visible, length: tickSize, - splitNumber: tickCount + splitNumber: tickCount, + lineStyle: convertToItemStyle(style, axisLineStyleMap, theme) }; - for (const key in style) { - valueAxis.minorTick[axisLineStyleMap[key] ?? key] = convertThemeTokenItem(style[key], theme); + if (isValid(visible)) { + valueAxis.minorTick.show = visible; } } @@ -194,14 +179,7 @@ function convertLinearAxis(component: ITheme['component'], theme: ITheme) { valueAxis.nameLocation = position ?? 'middle'; // nameGap 是标题到轴线的距离 valueAxis.nameGap = space + (valueAxis.axisLabel?.margin ?? 0) + (valueAxis.axisTick?.length ?? 0); - valueAxis.nameTextStyle = {}; - for (const key in style) { - let styleValue = convertThemeTokenItem(style[key], theme); - if (key === 'lineHeight') { - styleValue = postProcessors[key](styleValue); - } - valueAxis.nameTextStyle[labelStyleMap[key] ?? key] = styleValue; - } + valueAxis.nameTextStyle = convertToItemStyle(style, labelStyleMap, theme); } return valueAxis; diff --git a/packages/vchart-theme-converter/src/echarts/component/discreteLegend.ts b/packages/vchart-theme-converter/src/echarts/component/discreteLegend.ts index 2e17786..dd170f9 100644 --- a/packages/vchart-theme-converter/src/echarts/component/discreteLegend.ts +++ b/packages/vchart-theme-converter/src/echarts/component/discreteLegend.ts @@ -66,7 +66,7 @@ export function discreteLegendConverter(component: ITheme['component'], theme: I vertical: [preShape, nextShape] }; legendTheme.pageIconColor = convertThemeTokenItem(style.fill, theme); - legendTheme.pageIconInactiveColor = convertThemeTokenItem(state.disable.fill, theme); + legendTheme.pageIconInactiveColor = convertThemeTokenItem(state.disable?.fill, theme); } } } diff --git a/packages/vchart-theme-converter/src/echarts/index.ts b/packages/vchart-theme-converter/src/echarts/index.ts index d9205c1..b142005 100644 --- a/packages/vchart-theme-converter/src/echarts/index.ts +++ b/packages/vchart-theme-converter/src/echarts/index.ts @@ -59,7 +59,7 @@ export function VC2EC(vchartTheme: IVChartTheme): IEChartsTheme { return echartsTheme; } -export function EC2VC(echartsTheme: IEChartsTheme): IVChartTheme { +export function EC2VC(echartsTheme: IEChartsTheme, type: 'light' | 'dark' = 'light'): IVChartTheme { if (!echartsTheme) { return {}; } @@ -70,6 +70,7 @@ export function EC2VC(echartsTheme: IEChartsTheme): IVChartTheme { // 1. 色板转换 vchartTheme.colorScheme = { default: { dataScheme: color } }; // 2. 基本转换 + vchartTheme.type = type; vchartTheme.background = backgroundColor; vchartTheme.mark = { text: { From 14f26aacd9403a12a547c328a93998edb02ef93b Mon Sep 17 00:00:00 2001 From: xiaoluoHe Date: Wed, 3 Jul 2024 14:23:13 +0800 Subject: [PATCH 06/16] fix: fix legends error --- .../demo/src/spec/echarts/bar.ts | 1 - .../src/echarts/component/discreteLegend.ts | 18 ++++++++++++------ 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/packages/vchart-theme-converter/demo/src/spec/echarts/bar.ts b/packages/vchart-theme-converter/demo/src/spec/echarts/bar.ts index 96ece11..579116c 100644 --- a/packages/vchart-theme-converter/demo/src/spec/echarts/bar.ts +++ b/packages/vchart-theme-converter/demo/src/spec/echarts/bar.ts @@ -98,7 +98,6 @@ const series = [ export const spec = { legend: { - bottom: 0, type: 'scroll', showBackground: true }, diff --git a/packages/vchart-theme-converter/src/echarts/component/discreteLegend.ts b/packages/vchart-theme-converter/src/echarts/component/discreteLegend.ts index dd170f9..507a9e1 100644 --- a/packages/vchart-theme-converter/src/echarts/component/discreteLegend.ts +++ b/packages/vchart-theme-converter/src/echarts/component/discreteLegend.ts @@ -61,12 +61,18 @@ export function discreteLegendConverter(component: ITheme['component'], theme: I if (handler) { const { space, preShape, nextShape, style = {}, state = {} } = handler; legendTheme.pageButtonItemGap = space; - legendTheme.pageIcons = { - horizontal: [preShape, nextShape], - vertical: [preShape, nextShape] - }; - legendTheme.pageIconColor = convertThemeTokenItem(style.fill, theme); - legendTheme.pageIconInactiveColor = convertThemeTokenItem(state.disable?.fill, theme); + if (preShape && nextShape) { + legendTheme.pageIcons = { + horizontal: [preShape, nextShape], + vertical: [preShape, nextShape] + }; + } + if (style.fil) { + legendTheme.pageIconColor = convertThemeTokenItem(style.fill, theme); + } + if (state.disable?.fill) { + legendTheme.pageIconInactiveColor = convertThemeTokenItem(state.disable.fill, theme); + } } } } From e5b6aca551ed53b62e1577ea7d758a5e2aab370d Mon Sep 17 00:00:00 2001 From: xiaoluoHe Date: Fri, 5 Jul 2024 15:57:04 +0800 Subject: [PATCH 07/16] chore: update dev demo --- packages/vchart-theme-converter/demo/src/App.tsx | 7 +++---- packages/vchart-theme-converter/demo/src/Chart.tsx | 4 +++- .../demo/src/spec/echarts/line.ts | 14 +++++++------- 3 files changed, 13 insertions(+), 12 deletions(-) diff --git a/packages/vchart-theme-converter/demo/src/App.tsx b/packages/vchart-theme-converter/demo/src/App.tsx index 5bd930e..cf46751 100644 --- a/packages/vchart-theme-converter/demo/src/App.tsx +++ b/packages/vchart-theme-converter/demo/src/App.tsx @@ -28,10 +28,9 @@ const themeList = [ { name: 'vchart-semi-light', type: 'light', vchartTheme: semiDesignLight, echartsTheme: VC2EC(semiDesignLight) }, { name: 'echarts-shine', type: 'light', echartsTheme: echartsShine, vchartTheme: EC2VC(echartsShine) }, { name: 'echarts-vintage', type: 'light', echartsTheme: echartsVintage, vchartTheme: EC2VC(echartsVintage) }, - { name: 'vchart-chartHub', type: 'light', echartsTheme: VC2EC(chartHubLightTheme), vchartTheme: chartHubLightTheme } - - // { name: 'echarts-dark', type: 'dark', echartsTheme: echartsDark, vchartTheme: EC2VC(echartsLight, 'dark') }, - // { name: 'vchart-semi-dark', type: 'dark', vchartTheme: semiDesignDark, echartsTheme: VC2EC(semiDesignDark) } + { name: 'vchart-chartHub', type: 'light', echartsTheme: VC2EC(chartHubLightTheme), vchartTheme: chartHubLightTheme }, + { name: 'echarts-dark', type: 'dark', echartsTheme: echartsDark, vchartTheme: EC2VC(echartsDark, 'dark') }, + { name: 'vchart-semi-dark', type: 'dark', vchartTheme: semiDesignDark, echartsTheme: VC2EC(semiDesignDark) } ]; console.log(themeList); diff --git a/packages/vchart-theme-converter/demo/src/Chart.tsx b/packages/vchart-theme-converter/demo/src/Chart.tsx index 40e9ac5..5e24823 100644 --- a/packages/vchart-theme-converter/demo/src/Chart.tsx +++ b/packages/vchart-theme-converter/demo/src/Chart.tsx @@ -23,9 +23,11 @@ export function Charts(props: { if (themeName.includes('vchart')) { VChart.ThemeManager.registerTheme('__temp__', vchartTheme); theme = VC2EC(VChart.ThemeManager.getTheme('__temp__')); + console.log(VChart.ThemeManager.getTheme('__temp__'), theme); VChart.ThemeManager.removeTheme('__temp__'); + } else { + console.log(VChart.ThemeManager.getCurrentTheme(), theme); } - console.log(theme, vchartTheme); const myChart = echarts.init(ecRef.current, theme); myChart.setOption(echartsOption); const resizeOb = new ResizeObserver(entries => { diff --git a/packages/vchart-theme-converter/demo/src/spec/echarts/line.ts b/packages/vchart-theme-converter/demo/src/spec/echarts/line.ts index 3f74a9c..b1dee1c 100644 --- a/packages/vchart-theme-converter/demo/src/spec/echarts/line.ts +++ b/packages/vchart-theme-converter/demo/src/spec/echarts/line.ts @@ -17,12 +17,6 @@ export const spec = { saveAsImage: {} } }, - grid: { - left: '3%', - right: '4%', - bottom: '3%', - containLabel: true - }, xAxis: [ { type: 'category', @@ -37,7 +31,13 @@ export const spec = { 'Foundation', 'Lip gloss', 'Mascara' - ] + ], + axisLine: { + lineStyle: { + type: 'solid', + color: ['red'] + } + } } ], yAxis: [ From 8932eafe4a6b5d176b6301ac6431abdd0679ec40 Mon Sep 17 00:00:00 2001 From: xiaoluoHe Date: Wed, 24 Jul 2024 14:16:50 +0800 Subject: [PATCH 08/16] refactor: rename function --- .../vchart-theme-converter/demo/src/App.tsx | 29 ++++++++++++++----- .../vchart-theme-converter/demo/src/Chart.tsx | 4 +-- .../src/echarts/component/axis.ts | 2 +- .../src/echarts/component/crosshair.ts | 2 +- .../src/echarts/component/discreteLegend.ts | 2 +- .../src/echarts/component/title.ts | 2 +- .../src/echarts/component/tooltip.ts | 2 +- .../src/echarts/componentConverter.ts | 20 ++++++------- .../src/echarts/index.ts | 6 ++-- .../src/echarts/series/area.ts | 2 +- .../src/echarts/series/bar.ts | 2 +- .../src/echarts/series/funnel.ts | 2 +- .../src/echarts/series/line.ts | 2 +- .../src/echarts/series/pie.ts | 3 +- .../src/echarts/seriesConverter.ts | 20 ++++++------- 15 files changed, 57 insertions(+), 43 deletions(-) diff --git a/packages/vchart-theme-converter/demo/src/App.tsx b/packages/vchart-theme-converter/demo/src/App.tsx index cf46751..3c96234 100644 --- a/packages/vchart-theme-converter/demo/src/App.tsx +++ b/packages/vchart-theme-converter/demo/src/App.tsx @@ -14,7 +14,7 @@ import { theme as echartsVintage } from './theme/echarts-vintage'; import { chartHubLightTheme } from '@visactor/vchart-theme'; import './index.css'; -import { EC2VC, VC2EC } from '../../src'; +import { echartsToVChart, vchartToEcharts } from '../../src'; import { semiDesignDark, semiDesignLight } from '@visactor/vchart-semi-theme'; const demoList = [ @@ -25,12 +25,27 @@ const demoList = [ ]; const themeList = [ - { name: 'vchart-semi-light', type: 'light', vchartTheme: semiDesignLight, echartsTheme: VC2EC(semiDesignLight) }, - { name: 'echarts-shine', type: 'light', echartsTheme: echartsShine, vchartTheme: EC2VC(echartsShine) }, - { name: 'echarts-vintage', type: 'light', echartsTheme: echartsVintage, vchartTheme: EC2VC(echartsVintage) }, - { name: 'vchart-chartHub', type: 'light', echartsTheme: VC2EC(chartHubLightTheme), vchartTheme: chartHubLightTheme }, - { name: 'echarts-dark', type: 'dark', echartsTheme: echartsDark, vchartTheme: EC2VC(echartsDark, 'dark') }, - { name: 'vchart-semi-dark', type: 'dark', vchartTheme: semiDesignDark, echartsTheme: VC2EC(semiDesignDark) } + { + name: 'vchart-semi-light', + type: 'light', + vchartTheme: semiDesignLight, + echartsTheme: vchartToEcharts(semiDesignLight) + }, + { name: 'echarts-shine', type: 'light', echartsTheme: echartsShine, vchartTheme: echartsToVChart(echartsShine) }, + { + name: 'echarts-vintage', + type: 'light', + echartsTheme: echartsVintage, + vchartTheme: echartsToVChart(echartsVintage) + }, + { + name: 'vchart-chartHub', + type: 'light', + echartsTheme: vchartToEcharts(chartHubLightTheme), + vchartTheme: chartHubLightTheme + }, + { name: 'echarts-dark', type: 'dark', echartsTheme: echartsDark, vchartTheme: echartsToVChart(echartsDark, 'dark') }, + { name: 'vchart-semi-dark', type: 'dark', vchartTheme: semiDesignDark, echartsTheme: vchartToEcharts(semiDesignDark) } ]; console.log(themeList); diff --git a/packages/vchart-theme-converter/demo/src/Chart.tsx b/packages/vchart-theme-converter/demo/src/Chart.tsx index 5e24823..a80528a 100644 --- a/packages/vchart-theme-converter/demo/src/Chart.tsx +++ b/packages/vchart-theme-converter/demo/src/Chart.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useRef } from 'react'; import * as echarts from 'echarts'; import VChart from '@visactor/vchart'; -import { VC2EC } from '../../src'; +import { vchartToEcharts } from '../../src'; export function Charts(props: { echartsOption: any; @@ -22,7 +22,7 @@ export function Charts(props: { let theme = echartsTheme; if (themeName.includes('vchart')) { VChart.ThemeManager.registerTheme('__temp__', vchartTheme); - theme = VC2EC(VChart.ThemeManager.getTheme('__temp__')); + theme = vchartToEcharts(VChart.ThemeManager.getTheme('__temp__')); console.log(VChart.ThemeManager.getTheme('__temp__'), theme); VChart.ThemeManager.removeTheme('__temp__'); } else { diff --git a/packages/vchart-theme-converter/src/echarts/component/axis.ts b/packages/vchart-theme-converter/src/echarts/component/axis.ts index 0556d1d..44493f0 100644 --- a/packages/vchart-theme-converter/src/echarts/component/axis.ts +++ b/packages/vchart-theme-converter/src/echarts/component/axis.ts @@ -4,7 +4,7 @@ import { isValid, merge } from '@visactor/vutils'; import { axisLineStyleMap, labelStyleMap } from '../convertMap'; import { convertToItemStyle, convertToVChartGraphicStyle } from '../utils'; -export function axisConverter(component: ITheme['component'], theme: ITheme) { +export function toEChartsAxis(component: ITheme['component'], theme: ITheme) { const axisTheme = {} as any; axisTheme.categoryAxis = convertCategoryAxis(component, theme); diff --git a/packages/vchart-theme-converter/src/echarts/component/crosshair.ts b/packages/vchart-theme-converter/src/echarts/component/crosshair.ts index e98027c..fe74454 100644 --- a/packages/vchart-theme-converter/src/echarts/component/crosshair.ts +++ b/packages/vchart-theme-converter/src/echarts/component/crosshair.ts @@ -4,7 +4,7 @@ import { normalizePadding } from '@visactor/vutils'; import { convertToItemStyle, convertToVChartGraphicStyle } from '../utils'; import type { IEChartsTheme } from '..'; -export function crosshairConverter(component: ITheme['component'], theme: ITheme) { +export function toEChartsAxisPointer(component: ITheme['component'], theme: ITheme) { const axisPointerTheme = { type: 'shadow', trigger: 'axis', diff --git a/packages/vchart-theme-converter/src/echarts/component/discreteLegend.ts b/packages/vchart-theme-converter/src/echarts/component/discreteLegend.ts index 507a9e1..4188c54 100644 --- a/packages/vchart-theme-converter/src/echarts/component/discreteLegend.ts +++ b/packages/vchart-theme-converter/src/echarts/component/discreteLegend.ts @@ -5,7 +5,7 @@ import type { IDiscreteLegendTheme, IPager } from '@visactor/vchart/esm/componen import { convertToItemStyle, convertToVChartGraphicStyle } from '../utils'; import type { IEChartsTheme } from '..'; -export function discreteLegendConverter(component: ITheme['component'], theme: ITheme) { +export function toEChartsLegend(component: ITheme['component'], theme: ITheme) { const legendTheme = { type: 'scroll' } as any; diff --git a/packages/vchart-theme-converter/src/echarts/component/title.ts b/packages/vchart-theme-converter/src/echarts/component/title.ts index d73f3ef..02542f3 100644 --- a/packages/vchart-theme-converter/src/echarts/component/title.ts +++ b/packages/vchart-theme-converter/src/echarts/component/title.ts @@ -3,7 +3,7 @@ import { labelStyleMap } from '../convertMap'; import { convertToItemStyle, convertToVChartGraphicStyle } from '../utils'; import type { IEChartsTheme } from '..'; -export function titleConverter(component: ITheme['component'], theme: ITheme) { +export function toEChartsTitle(component: ITheme['component'], theme: ITheme) { const titleTheme = {} as any; const { title } = component; diff --git a/packages/vchart-theme-converter/src/echarts/component/tooltip.ts b/packages/vchart-theme-converter/src/echarts/component/tooltip.ts index eca9eae..09aefe4 100644 --- a/packages/vchart-theme-converter/src/echarts/component/tooltip.ts +++ b/packages/vchart-theme-converter/src/echarts/component/tooltip.ts @@ -3,7 +3,7 @@ import { convertThemeTokenItem } from '../../util/token'; import { normalizePadding } from '@visactor/vutils'; import type { IEChartsTheme } from '..'; -export function tooltipConverter(component: ITheme['component'], theme: ITheme) { +export function toEChartsTooltip(component: ITheme['component'], theme: ITheme) { const tooltipTheme = {} as any; const { tooltip } = component; diff --git a/packages/vchart-theme-converter/src/echarts/componentConverter.ts b/packages/vchart-theme-converter/src/echarts/componentConverter.ts index 7dfac4d..849b59a 100644 --- a/packages/vchart-theme-converter/src/echarts/componentConverter.ts +++ b/packages/vchart-theme-converter/src/echarts/componentConverter.ts @@ -2,20 +2,20 @@ import type { ITheme } from '@visactor/vchart'; // FIXME: import { ComponentTypeEnum } from '@visactor/vchart/esm/component/interface/type'; import { merge } from '@visactor/vutils'; -import { axisConverter, toVChartAxis } from './component/axis'; -import { titleConverter, toVChartTitle } from './component/title'; -import { discreteLegendConverter, toVChartDiscreteLegend } from './component/discreteLegend'; -import { toVChartTooltip, tooltipConverter } from './component/tooltip'; -import { crosshairConverter, toVChartCrosshair } from './component/crosshair'; +import { toEChartsAxis, toVChartAxis } from './component/axis'; +import { toEChartsTitle, toVChartTitle } from './component/title'; +import { toEChartsLegend, toVChartDiscreteLegend } from './component/discreteLegend'; +import { toVChartTooltip, toEChartsTooltip } from './component/tooltip'; +import { toEChartsAxisPointer, toVChartCrosshair } from './component/crosshair'; const VCHART_COMPONENT_TYPES = [...Object.keys(ComponentTypeEnum).filter(type => !type.includes('Axis')), 'axis']; const componentConverter = { - axis: axisConverter, - title: titleConverter, - discreteLegend: discreteLegendConverter, - tooltip: tooltipConverter, - cartesianCrosshair: crosshairConverter + axis: toEChartsAxis, + title: toEChartsTitle, + discreteLegend: toEChartsLegend, + tooltip: toEChartsTooltip, + cartesianCrosshair: toEChartsAxisPointer }; export const toVChartComponentConverter = { diff --git a/packages/vchart-theme-converter/src/echarts/index.ts b/packages/vchart-theme-converter/src/echarts/index.ts index b142005..d10e60b 100644 --- a/packages/vchart-theme-converter/src/echarts/index.ts +++ b/packages/vchart-theme-converter/src/echarts/index.ts @@ -1,6 +1,6 @@ import type { ITheme as IVChartTheme } from '@visactor/vchart'; import { convertObjectColor, convertColorPlatte as convertColorPalette } from '../util/color'; -import { isObject, isValidNumber, merge, normalizePadding } from '@visactor/vutils'; +import { isObject, merge } from '@visactor/vutils'; import { convertSeries, toVChartConverter } from './seriesConverter'; import { convertComponent, toVChartComponentConverter } from './componentConverter'; import { convertThemeTokenItem } from '../util/token'; @@ -9,7 +9,7 @@ import { textStyleMap } from './convertMap'; export type IEChartsTheme = Record; -export function VC2EC(vchartTheme: IVChartTheme): IEChartsTheme { +export function vchartToEcharts(vchartTheme: IVChartTheme): IEChartsTheme { if (!vchartTheme) { return {}; } @@ -59,7 +59,7 @@ export function VC2EC(vchartTheme: IVChartTheme): IEChartsTheme { return echartsTheme; } -export function EC2VC(echartsTheme: IEChartsTheme, type: 'light' | 'dark' = 'light'): IVChartTheme { +export function echartsToVChart(echartsTheme: IEChartsTheme, type: 'light' | 'dark' = 'light'): IVChartTheme { if (!echartsTheme) { return {}; } diff --git a/packages/vchart-theme-converter/src/echarts/series/area.ts b/packages/vchart-theme-converter/src/echarts/series/area.ts index e7dd36e..2577ff9 100644 --- a/packages/vchart-theme-converter/src/echarts/series/area.ts +++ b/packages/vchart-theme-converter/src/echarts/series/area.ts @@ -2,7 +2,7 @@ import type { ITheme } from '@visactor/vchart'; import { areaStyleMap } from '../convertMap'; import { convertToItemStyle } from '../utils'; -export function areaSeriesConverter(areaSeries: ITheme['series']['area'], theme: ITheme) { +export function toEChartsArea(areaSeries: ITheme['series']['area'], theme: ITheme) { if (!areaSeries) { return {}; } diff --git a/packages/vchart-theme-converter/src/echarts/series/bar.ts b/packages/vchart-theme-converter/src/echarts/series/bar.ts index 1b2560b..c353d91 100644 --- a/packages/vchart-theme-converter/src/echarts/series/bar.ts +++ b/packages/vchart-theme-converter/src/echarts/series/bar.ts @@ -2,7 +2,7 @@ import type { ITheme } from '@visactor/vchart'; import { attributeMap, labelStyleMap } from '../convertMap'; import { convertToItemStyle, convertToVChartGraphicStyle } from '../utils'; -export function barSeriesConverter(barSeries: ITheme['series']['bar'], theme: ITheme) { +export function toEChartsBar(barSeries: ITheme['series']['bar'], theme: ITheme) { if (!barSeries) { return {}; } diff --git a/packages/vchart-theme-converter/src/echarts/series/funnel.ts b/packages/vchart-theme-converter/src/echarts/series/funnel.ts index f3324cb..917a79a 100644 --- a/packages/vchart-theme-converter/src/echarts/series/funnel.ts +++ b/packages/vchart-theme-converter/src/echarts/series/funnel.ts @@ -2,7 +2,7 @@ import type { ITheme } from '@visactor/vchart'; import { attributeMap, labelStyleMap } from '../convertMap'; import { convertToItemStyle, convertToVChartGraphicStyle } from '../utils'; -export function funnelSeriesConverter(funnelSeries: ITheme['series']['funnel'], theme: ITheme) { +export function toEChartsFunnel(funnelSeries: ITheme['series']['funnel'], theme: ITheme) { if (!funnelSeries) { return {}; } diff --git a/packages/vchart-theme-converter/src/echarts/series/line.ts b/packages/vchart-theme-converter/src/echarts/series/line.ts index a12cb94..a931e37 100644 --- a/packages/vchart-theme-converter/src/echarts/series/line.ts +++ b/packages/vchart-theme-converter/src/echarts/series/line.ts @@ -5,7 +5,7 @@ import { areaStyleMap, labelStyleMap, lineStyleMap, symbolStyleMap } from '../co import type { IEChartsTheme } from '..'; import { convertToItemStyle, convertToVChartGraphicStyle } from '../utils'; -export function lineSeriesConverter(lineSeries: ITheme['series']['line'], theme: ITheme) { +export function toEChartsLine(lineSeries: ITheme['series']['line'], theme: ITheme) { if (!lineSeries) { return {}; } diff --git a/packages/vchart-theme-converter/src/echarts/series/pie.ts b/packages/vchart-theme-converter/src/echarts/series/pie.ts index bbb87e5..db910ba 100644 --- a/packages/vchart-theme-converter/src/echarts/series/pie.ts +++ b/packages/vchart-theme-converter/src/echarts/series/pie.ts @@ -1,10 +1,9 @@ import type { ITheme } from '@visactor/vchart'; -import { convertThemeTokenItem } from '../../util/token'; import { attributeMap, labelStyleMap } from '../convertMap'; import { isNumber } from '@visactor/vutils'; import { convertToVChartGraphicStyle, convertToItemStyle } from '../utils'; -export function pieSeriesConverter(pieSeries: ITheme['series']['pie'], theme: ITheme) { +export function toEChartsPie(pieSeries: ITheme['series']['pie'], theme: ITheme) { if (!pieSeries) { return {}; } diff --git a/packages/vchart-theme-converter/src/echarts/seriesConverter.ts b/packages/vchart-theme-converter/src/echarts/seriesConverter.ts index 2f9425f..dd0b3a8 100644 --- a/packages/vchart-theme-converter/src/echarts/seriesConverter.ts +++ b/packages/vchart-theme-converter/src/echarts/seriesConverter.ts @@ -1,20 +1,20 @@ import type { ITheme } from '@visactor/vchart'; import { SeriesTypeEnum } from '@visactor/vchart'; -import { toVChartLine, lineSeriesConverter } from './series/line'; import { merge } from '@visactor/vutils'; -import { areaSeriesConverter } from './series/area'; -import { barSeriesConverter, toVChartBar } from './series/bar'; -import { pieSeriesConverter, toVChartPie } from './series/pie'; -import { funnelSeriesConverter, toVChartFunnel } from './series/funnel'; +import { toVChartLine, toEChartsLine } from './series/line'; +import { toEChartsArea } from './series/area'; +import { toEChartsBar, toVChartBar } from './series/bar'; +import { toEChartsPie, toVChartPie } from './series/pie'; +import { toEChartsFunnel, toVChartFunnel } from './series/funnel'; const VCHART_SERIES_TYPES = Object.keys(SeriesTypeEnum); const toEChartsConverter = { - line: lineSeriesConverter, - area: areaSeriesConverter, - bar: barSeriesConverter, - pie: pieSeriesConverter, - funnel: funnelSeriesConverter + line: toEChartsLine, + area: toEChartsArea, + bar: toEChartsBar, + pie: toEChartsPie, + funnel: toEChartsFunnel }; export const toVChartConverter = { From 355252c23b15f3b9e13608dcb0933f220c6d3e63 Mon Sep 17 00:00:00 2001 From: xiaoluoHe Date: Wed, 24 Jul 2024 14:22:43 +0800 Subject: [PATCH 09/16] chore: update dependencies version --- common/config/rush/pnpm-lock.yaml | 102 +++++++++---------- packages/vchart-theme-converter/package.json | 6 +- 2 files changed, 54 insertions(+), 54 deletions(-) diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index 3ea57e7..5ffcfb3 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -83,7 +83,7 @@ importers: '@arco-design/webpack-plugin': 1.7.0 '@arco-plugins/vite-plugin-svgr': 0.7.2_vite@4.5.3 '@arco-themes/react-arco-pro': 0.0.7_pa7uxehr42623f73endqjggywi - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@esbuild-plugins/node-globals-polyfill': 0.1.1 '@esbuild-plugins/node-modules-polyfill': 0.1.4 '@internal/bundler': link:../../tools/bundler @@ -189,9 +189,9 @@ importers: dependencies: '@visactor/vchart-theme-utils': link:../vchart-theme-utils devDependencies: - '@babel/runtime': 7.24.7 - '@douyinfe/semi-icons': 2.61.0_react@18.2.0 - '@douyinfe/semi-icons-lab': 2.61.0_biqbaboplfbrettd7655fr4n2y + '@babel/runtime': 7.24.8 + '@douyinfe/semi-icons': 2.62.1_react@18.2.0 + '@douyinfe/semi-icons-lab': 2.62.1_biqbaboplfbrettd7655fr4n2y '@douyinfe/semi-ui': 2.55.5_biqbaboplfbrettd7655fr4n2y '@esbuild-plugins/node-globals-polyfill': 0.1.1 '@esbuild-plugins/node-modules-polyfill': 0.1.4 @@ -321,9 +321,9 @@ importers: '@typescript-eslint/eslint-plugin': 5.30.0 '@typescript-eslint/parser': 5.30.0 '@visactor/react-vchart': 1.11.0 - '@visactor/vchart': 1.11.0 - '@visactor/vchart-semi-theme': workspace:1.11.4 - '@visactor/vchart-theme': workspace:1.11.4 + '@visactor/vchart': 1.11.6 + '@visactor/vchart-semi-theme': workspace:1.11.5 + '@visactor/vchart-theme': workspace:1.11.5 '@visactor/vutils': ~0.18.9 '@vitejs/plugin-react': ^4.1.1 '@vitejs/plugin-react-swc': ^3.4.1 @@ -375,7 +375,7 @@ importers: '@arco-design/webpack-plugin': 1.7.0 '@arco-plugins/vite-plugin-svgr': 0.7.2_vite@4.5.3 '@arco-themes/react-arco-pro': 0.0.7_pa7uxehr42623f73endqjggywi - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@esbuild-plugins/node-globals-polyfill': 0.1.1 '@esbuild-plugins/node-modules-polyfill': 0.1.4 '@internal/bundler': link:../../tools/bundler @@ -396,7 +396,7 @@ importers: '@typescript-eslint/eslint-plugin': 5.30.0_cow5zg7tx6c3eisi5a4ud5kwia '@typescript-eslint/parser': 5.30.0_vwud3sodsb5zxmzckoj7rdwdbq '@visactor/react-vchart': 1.11.0_biqbaboplfbrettd7655fr4n2y - '@visactor/vchart': 1.11.0 + '@visactor/vchart': 1.11.6 '@visactor/vchart-semi-theme': link:../vchart-semi-theme '@visactor/vchart-theme': link:../vchart-theme '@vitejs/plugin-react': 4.2.1_vite@4.5.3 @@ -471,8 +471,8 @@ importers: vite: ^4.5.0 dependencies: '@arco-design/web-react': 2.61.2_42iwexueogtmu5amowprdpoisy - '@douyinfe/semi-icons': 2.61.0_react@18.2.0 - '@douyinfe/semi-icons-lab': 2.61.0_biqbaboplfbrettd7655fr4n2y + '@douyinfe/semi-icons': 2.62.1_react@18.2.0 + '@douyinfe/semi-icons-lab': 2.62.1_biqbaboplfbrettd7655fr4n2y '@douyinfe/semi-ui': 2.55.5_biqbaboplfbrettd7655fr4n2y '@visactor/react-vchart': 1.11.0_biqbaboplfbrettd7655fr4n2y '@visactor/vchart': 1.11.6 @@ -600,9 +600,9 @@ importers: '@visactor/vchart-semi-theme': link:../vchart-semi-theme '@visactor/vchart-theme-utils': link:../vchart-theme-utils devDependencies: - '@babel/runtime': 7.24.7 - '@douyinfe/semi-icons': 2.61.0_react@18.2.0 - '@douyinfe/semi-icons-lab': 2.61.0_biqbaboplfbrettd7655fr4n2y + '@babel/runtime': 7.24.8 + '@douyinfe/semi-icons': 2.62.1_react@18.2.0 + '@douyinfe/semi-icons-lab': 2.62.1_biqbaboplfbrettd7655fr4n2y '@douyinfe/semi-ui': 2.55.5_biqbaboplfbrettd7655fr4n2y '@esbuild-plugins/node-globals-polyfill': 0.1.1 '@esbuild-plugins/node-modules-polyfill': 0.1.4 @@ -716,7 +716,7 @@ importers: '@arco-design/webpack-plugin': 1.7.0 '@arco-plugins/vite-plugin-svgr': 0.7.2_vite@4.5.3 '@arco-themes/react-arco-pro': 0.0.7_pa7uxehr42623f73endqjggywi - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@esbuild-plugins/node-globals-polyfill': 0.1.1 '@esbuild-plugins/node-modules-polyfill': 0.1.4 '@internal/bundler': link:../../tools/bundler @@ -1038,7 +1038,7 @@ packages: react-dom: '>=16' dependencies: '@arco-design/color': 0.4.0 - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 b-tween: 0.3.3 b-validate: 1.5.3 compute-scroll-into-view: 1.0.20 @@ -2282,8 +2282,8 @@ packages: /@babel/regjsgen/0.8.0: resolution: {integrity: sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==} - /@babel/runtime/7.24.7: - resolution: {integrity: sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==} + /@babel/runtime/7.24.8: + resolution: {integrity: sha512-5F7SDGs1T72ZczbRwbGO9lQi0NLjQxzl6i4lJxLxfW9U5UluCSyEJeniWvnhl3/euNiqQVbo8zruhsDfid0esA==} engines: {node: '>=6.9.0'} dependencies: regenerator-runtime: 0.14.1 @@ -2406,8 +2406,8 @@ packages: memoize-one: 5.2.1 scroll-into-view-if-needed: 2.2.31 - /@douyinfe/semi-icons-lab/2.61.0_biqbaboplfbrettd7655fr4n2y: - resolution: {integrity: sha512-Hu8pDc2VdA1Rz0cvbHeZhy5MP0Z2DlAc3ANCI5rgxbWM/w/anAbLUQ9OS5Q+HrN1coeukuqBN8e7uAiFE+UPIg==} + /@douyinfe/semi-icons-lab/2.62.1_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-HHy2Jde6zdi+4Z+YMWjZu5y+wjKjENsMVO8d0p28BzRZJPSLQxQ2FsPCH7MInQJ2O8fgulrgpsCj2+mWSqcWyw==} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -2423,8 +2423,8 @@ packages: classnames: 2.5.1 react: 18.2.0 - /@douyinfe/semi-icons/2.61.0_react@18.2.0: - resolution: {integrity: sha512-5yulqGUDvlOvZ0TMwMCyj+2c6eJScHOcgX3Xoh/5qXyajRJG6AdzjX4vjWHR8Kf5gXHw5BqmYYQy6p8OyzIRhA==} + /@douyinfe/semi-icons/2.62.1_react@18.2.0: + resolution: {integrity: sha512-mwDNe42imzKDmQsVSfikqlilSE/62K0j2TZMvpPuigD3Chu9NoaEWReDzKdYQ2IES7PHBttQ9YJSbb3EtJ1cRw==} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 dependencies: @@ -3057,7 +3057,7 @@ packages: peerDependencies: react: ^16.3.0 || ^17.0.0 || ^18.0.0 dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 hoist-non-react-statics: 3.3.2 react: 18.2.0 react-is: 16.13.1 @@ -4494,7 +4494,7 @@ packages: resolution: {integrity: sha512-mvIJa8V7zVnfOrKDc6v4XLXo5h0vJoPG/US4nakSX+EK4cODbiQg0TCOsJQDHntPRdXx20A5EGp3mRoIOHM6sw==} dependencies: '@visactor/vgrammar-util': 0.13.2 - '@visactor/vutils': 0.18.9 + '@visactor/vutils': 0.18.10 /@visactor/vgrammar-core/0.13.11: resolution: {integrity: sha512-/xYwdqB0qKpJRoAYWq8FybEyhWwHhreIYZUCO0FGpBdffim8tweEgZvbQrkM6yx9daFnhLnRwTnSyZ0c49ZBvQ==} @@ -4536,7 +4536,7 @@ packages: '@visactor/vgrammar-util': 0.13.2 '@visactor/vrender-core': 0.19.0 '@visactor/vrender-kits': 0.19.0 - '@visactor/vutils': 0.18.9 + '@visactor/vutils': 0.18.10 /@visactor/vgrammar-projection/0.13.11: resolution: {integrity: sha512-YMF08v4O6oTyv1x/WHw/rKFjal+JdIgDNqQSGRkNld82kZzCEUu/TbfduUQOmGX0IG6oGIwihyUcMi9zbprLJQ==} @@ -4551,7 +4551,7 @@ packages: dependencies: '@visactor/vgrammar-core': 0.13.2 '@visactor/vgrammar-util': 0.13.2 - '@visactor/vutils': 0.18.9 + '@visactor/vutils': 0.18.10 d3-geo: 1.12.1 /@visactor/vgrammar-sankey/0.13.11: @@ -4570,7 +4570,7 @@ packages: '@visactor/vgrammar-util': 0.13.2 '@visactor/vrender-core': 0.19.0 '@visactor/vrender-kits': 0.19.0 - '@visactor/vutils': 0.18.9 + '@visactor/vutils': 0.18.10 /@visactor/vgrammar-util/0.13.11: resolution: {integrity: sha512-fzQC2b1NzrmdOVkOX1m/ze00XKg0pbPSHoDdYghsAf8RPjVq6/Ho2WYXjQ2NETGppxCsZiXLIgHU9VbWGzbsWg==} @@ -4580,7 +4580,7 @@ packages: /@visactor/vgrammar-util/0.13.2: resolution: {integrity: sha512-UIGLsoFP0q9NcLSfDiSGLIZ6QzB5kOyP8AHqqktZs08bPgqisbobyVtl6zuGVuwsQZBKf1i50knLX1Lnb+sOcw==} dependencies: - '@visactor/vutils': 0.18.9 + '@visactor/vutils': 0.18.10 /@visactor/vgrammar-venn/0.13.11: resolution: {integrity: sha512-IeEsK8RVL1aJOlq1X5DSg+EPktP2+R59OpKZMNN6zcAIKJqQp1/i2PadAa5JbbFb8lQWCXRdQcu+TaDNBk/Ypg==} @@ -4598,7 +4598,7 @@ packages: '@visactor/vgrammar-util': 0.13.2 '@visactor/vrender-core': 0.19.0 '@visactor/vrender-kits': 0.19.0 - '@visactor/vutils': 0.18.9 + '@visactor/vutils': 0.18.10 /@visactor/vgrammar-wordcloud-shape/0.13.11: resolution: {integrity: sha512-ytfTtGtJD39UtiDRadb7PcQPatjgrXXBtYj02ix/7K/dNRNOi2ryDADrxkdDim4fKt/8oQMke+CWuWFcqeL6hg==} @@ -4617,8 +4617,8 @@ packages: '@visactor/vgrammar-util': 0.13.2 '@visactor/vrender-core': 0.19.0 '@visactor/vrender-kits': 0.19.0 - '@visactor/vscale': 0.18.6 - '@visactor/vutils': 0.18.9 + '@visactor/vscale': 0.18.10 + '@visactor/vutils': 0.18.10 /@visactor/vgrammar-wordcloud/0.13.11: resolution: {integrity: sha512-aQ9TjHB2syZ4/SG9Q9cteonE50rLWQo5LDcLOkdO635Nhwp6bRnAfHf2Tfhk1RKMvFw25AgBtj4AgjvZUG2J9g==} @@ -4636,7 +4636,7 @@ packages: '@visactor/vgrammar-util': 0.13.2 '@visactor/vrender-core': 0.19.0 '@visactor/vrender-kits': 0.19.0 - '@visactor/vutils': 0.18.9 + '@visactor/vutils': 0.18.10 /@visactor/vrender-components/0.19.0: resolution: {integrity: sha512-J+Dtw727xVKg+7tTAbFkaM6AzNVdx0ZEXaGH4JYbhGTC6S6gO7rn8X+vGO2l/vilt4MfEWYAhRuGwZkJToiAxA==} @@ -4644,7 +4644,7 @@ packages: '@visactor/vrender-core': 0.19.0 '@visactor/vrender-kits': 0.19.0 '@visactor/vscale': 0.17.5 - '@visactor/vutils': 0.18.9 + '@visactor/vutils': 0.18.10 /@visactor/vrender-components/0.19.14: resolution: {integrity: sha512-QusN+J3hvFBLPbpmlpnTmN4CVKRYZ6TtP4tTVP1emgcMx5NNz34qkiF+B7+oaR70yHQR8oKT7Za/vH+tarMpmQ==} @@ -4703,11 +4703,11 @@ packages: '@visactor/vrender-components': '>=0.18' '@visactor/vrender-core': '>=0.18' dependencies: - '@visactor/vdataset': 0.18.6 + '@visactor/vdataset': 0.18.10 '@visactor/vrender-components': 0.19.0 '@visactor/vrender-core': 0.19.0 - '@visactor/vscale': 0.18.6 - '@visactor/vutils': 0.18.9 + '@visactor/vscale': 0.18.10 + '@visactor/vutils': 0.18.10 /@visactor/vutils-extension/1.11.6: resolution: {integrity: sha512-3K1x5YUP0Ct0fWJpmmbir32HQfr3h99WNYh6Fa7QgQst0ftQ1rpbj5UA/c0u88OrZ8T7Q6z8hqPVhrfvlnzF0Q==} @@ -4749,7 +4749,7 @@ packages: vite: ^4 || ^5 dependencies: '@swc/core': 1.4.13 - vite: 4.5.3_@types+node@20.12.7 + vite: 4.5.3_bby3wderf736tel7qp3evndmrm transitivePeerDependencies: - '@swc/helpers' dev: true @@ -4765,7 +4765,7 @@ packages: '@babel/plugin-transform-react-jsx-source': 7.24.1_@babel+core@7.24.4 '@types/babel__core': 7.20.5 react-refresh: 0.14.0 - vite: 4.5.3_@types+node@20.12.7 + vite: 4.5.3_bby3wderf736tel7qp3evndmrm transitivePeerDependencies: - supports-color dev: true @@ -6196,7 +6196,7 @@ packages: resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==} engines: {node: '>=0.11'} dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 /date-time/3.1.0: resolution: {integrity: sha512-uqCUKXE5q1PNBXjPqvwhwJf9SwMoAHBgWJ6DcrnS5o+W2JOiIILl0JEdVD8SGujrNS02GGxgwAg2PN2zONgtjg==} @@ -6395,7 +6395,7 @@ packages: /dom-helpers/5.2.1: resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==} dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 csstype: 3.1.3 /dom-serializer/0.2.2: @@ -7775,7 +7775,7 @@ packages: /history/4.10.1: resolution: {integrity: sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==} dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 loose-envify: 1.4.0 resolve-pathname: 3.0.0 tiny-invariant: 1.3.3 @@ -10485,7 +10485,7 @@ packages: peerDependencies: react: ^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 react: 18.2.0 /react-color/2.19.3_react@18.2.0: @@ -10553,7 +10553,7 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@types/react': 17.0.80 focus-lock: 1.3.5 prop-types: 15.8.1 @@ -10584,7 +10584,7 @@ packages: react-native: optional: true dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 '@types/react-redux': 7.1.33 hoist-non-react-statics: 3.3.2 loose-envify: 1.4.0 @@ -10615,7 +10615,7 @@ packages: peerDependencies: react: '>=15' dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 history: 4.10.1 loose-envify: 1.4.0 prop-types: 15.8.1 @@ -10630,7 +10630,7 @@ packages: peerDependencies: react: '>=15' dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 history: 4.10.1 hoist-non-react-statics: 3.3.2 loose-envify: 1.4.0 @@ -10648,7 +10648,7 @@ packages: react: '>=16.6.0' react-dom: '>=16.6.0' dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 dom-helpers: 5.2.1 loose-envify: 1.4.0 prop-types: 15.8.1 @@ -10662,7 +10662,7 @@ packages: react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 memoize-one: 5.2.1 react: 18.2.0 react-dom: 18.2.0_react@18.2.0 @@ -10776,7 +10776,7 @@ packages: /redux/4.2.1: resolution: {integrity: sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==} dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 dev: true /regenerate-unicode-properties/10.1.1: @@ -10794,7 +10794,7 @@ packages: /regenerator-transform/0.15.2: resolution: {integrity: sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==} dependencies: - '@babel/runtime': 7.24.7 + '@babel/runtime': 7.24.8 /regex-not/1.0.2: resolution: {integrity: sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==} @@ -12606,7 +12606,7 @@ packages: '@rollup/pluginutils': 5.1.0 '@svgr/core': 8.1.0_typescript@4.9.5 '@svgr/plugin-jsx': 8.1.0_@svgr+core@8.1.0 - vite: 4.5.3_@types+node@20.12.7 + vite: 4.5.3_bby3wderf736tel7qp3evndmrm transitivePeerDependencies: - rollup - supports-color diff --git a/packages/vchart-theme-converter/package.json b/packages/vchart-theme-converter/package.json index 9c9e4b5..7cfde93 100644 --- a/packages/vchart-theme-converter/package.json +++ b/packages/vchart-theme-converter/package.json @@ -23,9 +23,9 @@ "@visactor/vutils": "~0.18.9" }, "devDependencies": { - "@visactor/vchart": "1.11.0", - "@visactor/vchart-semi-theme": "workspace:1.11.4", - "@visactor/vchart-theme": "workspace:1.11.4", + "@visactor/vchart": "1.11.6", + "@visactor/vchart-semi-theme": "workspace:1.11.5", + "@visactor/vchart-theme": "workspace:1.11.5", "echarts": "5.5.0", "@types/echarts": "4.9.22", "@esbuild-plugins/node-globals-polyfill": "0.1.1", From 92d3ca6b0537eaf2a073f0298ac44ef799b7c1d1 Mon Sep 17 00:00:00 2001 From: xiaoluoHe Date: Wed, 24 Jul 2024 14:41:40 +0800 Subject: [PATCH 10/16] docs: update readme --- packages/vchart-theme-converter/README.md | 35 ++++++++++++++++++++++- 1 file changed, 34 insertions(+), 1 deletion(-) diff --git a/packages/vchart-theme-converter/README.md b/packages/vchart-theme-converter/README.md index 9ee97d0..b69a415 100644 --- a/packages/vchart-theme-converter/README.md +++ b/packages/vchart-theme-converter/README.md @@ -2,10 +2,43 @@ ## Description +This plugin currently supports the mutual conversion between VChart themes and ECharts themes. +Currently supported features include(): +- series theme config: line/area/bar/pie/funnel +- component theme config: axis/crosshair/tooltip/title/discreteLegend + +It is important to note that the theme conversion tool cannot completely cover the visual differences between the two chart libraries. ## Usage ```typescript -import { xxx } from '@visactor/vchart-theme-converter'; +import { echartsToVChart, vchartToEcharts } from '@visactor/vchart-theme-converter'; +import { VChart } from '@visactor/vchart'; + + +// convert echarts theme to vchart theme +{ + const echartsTheme = {...} + const vchartTheme = echartsToVChart(echartsTheme); +} + +// convert vchart runtime theme to echarts theme +{ + const vchartTheme = VChart.ThemeManager.getCurrentTheme() + const echartsTheme = vchartToEcharts(echartsTheme); +} + +// convert custom vchart theme to echarts theme +{ + /** + * When registering a custom VChart theme, it merges with the default theme to form a complete theme + * configuration; + * Therefore, it is recommended to register the custom theme first and obtain the complete theme configuration + * before converting a custom VChart theme. + */ + const vchartTheme = {...}; + VChart.ThemeManager.registerTheme('myTheme', vchartTheme); + const echartsTheme = vchartToEcharts(VChart.ThemeManager.getTheme('myTheme')); +} ``` From d9ab5eeb54a189b244194725b03dc136c5f30783 Mon Sep 17 00:00:00 2001 From: xiaoluoHe Date: Wed, 24 Jul 2024 15:12:58 +0800 Subject: [PATCH 11/16] fix: fix type error --- .../src/echarts/component/axis.ts | 34 +++++++++++-------- .../src/echarts/component/crosshair.ts | 8 +++-- .../src/echarts/component/discreteLegend.ts | 9 +++-- .../src/echarts/component/title.ts | 4 +++ .../src/echarts/component/tooltip.ts | 5 ++- .../src/echarts/componentConverter.ts | 2 +- .../src/echarts/index.ts | 8 ++--- .../src/echarts/series/area.ts | 4 +-- .../src/echarts/series/bar.ts | 8 ++--- .../src/echarts/series/funnel.ts | 6 ++-- .../src/echarts/series/line.ts | 9 +++-- .../src/echarts/series/pie.ts | 6 ++-- .../src/echarts/seriesConverter.ts | 9 +++-- 13 files changed, 68 insertions(+), 44 deletions(-) diff --git a/packages/vchart-theme-converter/src/echarts/component/axis.ts b/packages/vchart-theme-converter/src/echarts/component/axis.ts index 44493f0..17428f6 100644 --- a/packages/vchart-theme-converter/src/echarts/component/axis.ts +++ b/packages/vchart-theme-converter/src/echarts/component/axis.ts @@ -13,6 +13,9 @@ export function toEChartsAxis(component: ITheme['component'], theme: ITheme) { } function convertCategoryAxis(component: ITheme['component'], theme: ITheme) { + if (!component) { + return {}; + } const { axis, axisBand } = component; // TODO: how to process axisX/axisY @@ -25,7 +28,7 @@ function convertCategoryAxis(component: ITheme['component'], theme: ITheme) { } as any; if (domainLine) { - const { visible, style } = domainLine; + const { visible, style = {} } = domainLine; categoryAxis.axisLine = { lineStyle: convertToItemStyle(style, axisLineStyleMap, theme) }; @@ -35,7 +38,7 @@ function convertCategoryAxis(component: ITheme['component'], theme: ITheme) { } if (grid) { - const { visible, style } = grid; + const { visible, style = {} } = grid; categoryAxis.splitLine = { lineStyle: convertToItemStyle(style, axisLineStyleMap, theme) }; @@ -45,7 +48,7 @@ function convertCategoryAxis(component: ITheme['component'], theme: ITheme) { } if (subGrid) { - const { visible, style } = subGrid; + const { visible, style = {} } = subGrid; categoryAxis.minorSplitLine = { lineStyle: convertToItemStyle(style, axisLineStyleMap, theme) }; @@ -55,7 +58,7 @@ function convertCategoryAxis(component: ITheme['component'], theme: ITheme) { } if (label) { - const { visible, style, space } = label; + const { visible, style = {}, space } = label; categoryAxis.axisLabel = { margin: space, ...convertToItemStyle(style, labelStyleMap, theme) @@ -66,7 +69,7 @@ function convertCategoryAxis(component: ITheme['component'], theme: ITheme) { } if (tick) { - const { visible, style, tickSize, alignWithLabel } = tick; + const { visible, style = {}, tickSize, alignWithLabel } = tick; categoryAxis.axisTick = { alignWithLabel, length: tickSize, @@ -78,7 +81,7 @@ function convertCategoryAxis(component: ITheme['component'], theme: ITheme) { } if (subTick) { - const { visible, style, tickSize, tickCount } = subTick; + const { visible, style = {}, tickSize, tickCount } = subTick; categoryAxis.minorTick = { length: tickSize, splitNumber: tickCount, @@ -90,7 +93,7 @@ function convertCategoryAxis(component: ITheme['component'], theme: ITheme) { } if (title) { - const { style, space, position } = title; + const { style = {}, space, position } = title; categoryAxis.nameLocation = position ?? 'middle'; // nameGap 是标题到轴线的距离 categoryAxis.nameGap = space + (categoryAxis.axisLabel?.margin ?? 0) + (categoryAxis.axisTick?.length ?? 0); @@ -101,6 +104,9 @@ function convertCategoryAxis(component: ITheme['component'], theme: ITheme) { } function convertLinearAxis(component: ITheme['component'], theme: ITheme) { + if (!component) { + return {}; + } const { axis, axisLinear } = component; // TODO: how to process axisX/axisY @@ -110,7 +116,7 @@ function convertLinearAxis(component: ITheme['component'], theme: ITheme) { const valueAxis = {} as any; if (domainLine) { - const { visible, style } = domainLine; + const { visible, style = {} } = domainLine; valueAxis.axisLine = { lineStyle: convertToItemStyle(style, axisLineStyleMap, theme) }; @@ -120,7 +126,7 @@ function convertLinearAxis(component: ITheme['component'], theme: ITheme) { } if (grid) { - const { visible, style } = grid; + const { visible, style = {} } = grid; valueAxis.splitLine = { lineStyle: convertToItemStyle(style, axisLineStyleMap, theme) }; @@ -130,7 +136,7 @@ function convertLinearAxis(component: ITheme['component'], theme: ITheme) { } if (subGrid) { - const { visible, style } = subGrid; + const { visible, style = {} } = subGrid; valueAxis.minorSplitLine = { lineStyle: convertToItemStyle(style, axisLineStyleMap, theme) }; @@ -140,7 +146,7 @@ function convertLinearAxis(component: ITheme['component'], theme: ITheme) { } if (label) { - const { visible, style, space } = label; + const { visible, style = {}, space } = label; valueAxis.axisLabel = { margin: space, ...convertToItemStyle(style, labelStyleMap, theme) @@ -151,7 +157,7 @@ function convertLinearAxis(component: ITheme['component'], theme: ITheme) { } if (tick) { - const { visible, style, tickSize, alignWithLabel } = tick; + const { visible, style = {}, tickSize, alignWithLabel } = tick; valueAxis.axisTick = { alignWithLabel, length: tickSize, @@ -163,7 +169,7 @@ function convertLinearAxis(component: ITheme['component'], theme: ITheme) { } if (subTick) { - const { visible, style, tickSize, tickCount } = subTick; + const { visible, style = {}, tickSize, tickCount } = subTick; valueAxis.minorTick = { length: tickSize, splitNumber: tickCount, @@ -175,7 +181,7 @@ function convertLinearAxis(component: ITheme['component'], theme: ITheme) { } if (title) { - const { style, space, position } = title; + const { style = {}, space, position } = title; valueAxis.nameLocation = position ?? 'middle'; // nameGap 是标题到轴线的距离 valueAxis.nameGap = space + (valueAxis.axisLabel?.margin ?? 0) + (valueAxis.axisTick?.length ?? 0); diff --git a/packages/vchart-theme-converter/src/echarts/component/crosshair.ts b/packages/vchart-theme-converter/src/echarts/component/crosshair.ts index fe74454..dea5f1c 100644 --- a/packages/vchart-theme-converter/src/echarts/component/crosshair.ts +++ b/packages/vchart-theme-converter/src/echarts/component/crosshair.ts @@ -5,6 +5,10 @@ import { convertToItemStyle, convertToVChartGraphicStyle } from '../utils'; import type { IEChartsTheme } from '..'; export function toEChartsAxisPointer(component: ITheme['component'], theme: ITheme) { + if (!component) { + return {}; + } + const axisPointerTheme = { type: 'shadow', trigger: 'axis', @@ -25,14 +29,14 @@ export function toEChartsAxisPointer(component: ITheme['component'], theme: IThe axisPointerTheme.shadowStyle = lineStyle; } if (label) { - const { style, visible, labelBackground } = label; + const { style = {}, visible, labelBackground } = label; let echartsLabel = { show: visible, ...convertToItemStyle(style, attributeMap, theme) } as any; if (labelBackground) { - const { padding, style = {} } = labelBackground; + const { padding = [], style = {} } = labelBackground; echartsLabel.padding = normalizePadding(padding); echartsLabel = { ...echartsLabel, ...convertToItemStyle(style, labelBackgroundStyleMap, theme) }; diff --git a/packages/vchart-theme-converter/src/echarts/component/discreteLegend.ts b/packages/vchart-theme-converter/src/echarts/component/discreteLegend.ts index 4188c54..14de010 100644 --- a/packages/vchart-theme-converter/src/echarts/component/discreteLegend.ts +++ b/packages/vchart-theme-converter/src/echarts/component/discreteLegend.ts @@ -9,6 +9,11 @@ export function toEChartsLegend(component: ITheme['component'], theme: ITheme) { const legendTheme = { type: 'scroll' } as any; + + if (!component) { + return legendTheme; + } + const { discreteLegend } = component; if (discreteLegend) { const { item, orient, padding, pager } = discreteLegend; @@ -35,12 +40,12 @@ export function toEChartsLegend(component: ITheme['component'], theme: ITheme) { } if (label) { - const { space, style: labelStyle } = label; + const { space, style: labelStyle = {} } = label; legendTheme.textStyle = convertToItemStyle(labelStyle, labelStyleMap, theme); } if (shape) { - const { style, space } = shape; + const { style = {}, space } = shape; legendTheme.itemStyle = convertToItemStyle(style, symbolStyleMap, theme); if ('size' in style) { legendTheme.itemWidth = legendTheme.itemStyle.size; diff --git a/packages/vchart-theme-converter/src/echarts/component/title.ts b/packages/vchart-theme-converter/src/echarts/component/title.ts index 02542f3..eda9c97 100644 --- a/packages/vchart-theme-converter/src/echarts/component/title.ts +++ b/packages/vchart-theme-converter/src/echarts/component/title.ts @@ -4,6 +4,10 @@ import { convertToItemStyle, convertToVChartGraphicStyle } from '../utils'; import type { IEChartsTheme } from '..'; export function toEChartsTitle(component: ITheme['component'], theme: ITheme) { + if (!component) { + return {}; + } + const titleTheme = {} as any; const { title } = component; diff --git a/packages/vchart-theme-converter/src/echarts/component/tooltip.ts b/packages/vchart-theme-converter/src/echarts/component/tooltip.ts index 09aefe4..d0c779e 100644 --- a/packages/vchart-theme-converter/src/echarts/component/tooltip.ts +++ b/packages/vchart-theme-converter/src/echarts/component/tooltip.ts @@ -4,6 +4,9 @@ import { normalizePadding } from '@visactor/vutils'; import type { IEChartsTheme } from '..'; export function toEChartsTooltip(component: ITheme['component'], theme: ITheme) { + if (!component) { + return {}; + } const tooltipTheme = {} as any; const { tooltip } = component; @@ -11,7 +14,7 @@ export function toEChartsTooltip(component: ITheme['component'], theme: ITheme) if (tooltip) { const { panel, shape, titleLabel, keyLabel, valueLabel, spaceRow } = tooltip; if (panel) { - const { padding, backgroundColor, border = {}, shadow } = panel; + const { padding = [], backgroundColor, border = {}, shadow } = panel; tooltipTheme.padding = normalizePadding(padding); tooltipTheme.backgroundColor = convertThemeTokenItem(backgroundColor, theme); tooltipTheme.borderColor = convertThemeTokenItem(border.color, theme); diff --git a/packages/vchart-theme-converter/src/echarts/componentConverter.ts b/packages/vchart-theme-converter/src/echarts/componentConverter.ts index 849b59a..370ac40 100644 --- a/packages/vchart-theme-converter/src/echarts/componentConverter.ts +++ b/packages/vchart-theme-converter/src/echarts/componentConverter.ts @@ -10,7 +10,7 @@ import { toEChartsAxisPointer, toVChartCrosshair } from './component/crosshair'; const VCHART_COMPONENT_TYPES = [...Object.keys(ComponentTypeEnum).filter(type => !type.includes('Axis')), 'axis']; -const componentConverter = { +const componentConverter: Record = { axis: toEChartsAxis, title: toEChartsTitle, discreteLegend: toEChartsLegend, diff --git a/packages/vchart-theme-converter/src/echarts/index.ts b/packages/vchart-theme-converter/src/echarts/index.ts index d10e60b..965e6f9 100644 --- a/packages/vchart-theme-converter/src/echarts/index.ts +++ b/packages/vchart-theme-converter/src/echarts/index.ts @@ -47,7 +47,7 @@ export function vchartToEcharts(vchartTheme: IVChartTheme): IEChartsTheme { */ echartsTheme.textStyle = { fontFamily: convertThemeTokenItem(vchartTheme.fontFamily, vchartTheme), - ...convertToItemStyle(mark.text?.style, textStyleMap, vchartTheme) + ...convertToItemStyle(mark?.text?.style ?? {}, textStyleMap, vchartTheme) }; // 3. 系列样式转换 @@ -64,7 +64,7 @@ export function echartsToVChart(echartsTheme: IEChartsTheme, type: 'light' | 'da return {}; } - const vchartTheme: IVChartTheme = { series: {}, component: {} }; + const vchartTheme = { series: {}, component: {} } as IVChartTheme; const { color, backgroundColor, textStyle } = echartsTheme; // 1. 色板转换 @@ -81,9 +81,9 @@ export function echartsToVChart(echartsTheme: IEChartsTheme, type: 'light' | 'da // 3. 系列转换 ['line', 'pie', 'bar', 'funnel'].forEach(series => { if (echartsTheme[series] && toVChartConverter[series]) { - vchartTheme.series[series] = toVChartConverter[series](echartsTheme[series]); + (vchartTheme.series as any)[series] = toVChartConverter[series](echartsTheme[series]); if (series === 'line') { - vchartTheme.series.area = vchartTheme.series[series]; + vchartTheme.series!.area = vchartTheme.series![series]; // @ts-ignore delete vchartTheme.series.line.area; } diff --git a/packages/vchart-theme-converter/src/echarts/series/area.ts b/packages/vchart-theme-converter/src/echarts/series/area.ts index 2577ff9..b18820e 100644 --- a/packages/vchart-theme-converter/src/echarts/series/area.ts +++ b/packages/vchart-theme-converter/src/echarts/series/area.ts @@ -1,8 +1,8 @@ -import type { ITheme } from '@visactor/vchart'; +import type { ITheme, ISeriesTheme } from '@visactor/vchart'; import { areaStyleMap } from '../convertMap'; import { convertToItemStyle } from '../utils'; -export function toEChartsArea(areaSeries: ITheme['series']['area'], theme: ITheme) { +export function toEChartsArea(areaSeries: ISeriesTheme['area'], theme: ITheme) { if (!areaSeries) { return {}; } diff --git a/packages/vchart-theme-converter/src/echarts/series/bar.ts b/packages/vchart-theme-converter/src/echarts/series/bar.ts index c353d91..2073c45 100644 --- a/packages/vchart-theme-converter/src/echarts/series/bar.ts +++ b/packages/vchart-theme-converter/src/echarts/series/bar.ts @@ -1,8 +1,8 @@ -import type { ITheme } from '@visactor/vchart'; +import type { ITheme, ISeriesTheme } from '@visactor/vchart'; import { attributeMap, labelStyleMap } from '../convertMap'; import { convertToItemStyle, convertToVChartGraphicStyle } from '../utils'; -export function toEChartsBar(barSeries: ITheme['series']['bar'], theme: ITheme) { +export function toEChartsBar(barSeries: ISeriesTheme['bar'], theme: ITheme) { if (!barSeries) { return {}; } @@ -38,7 +38,7 @@ export function toEChartsBar(barSeries: ITheme['series']['bar'], theme: ITheme) return barTheme; } -const labelPositionMap = { +const labelPositionMap: Record = { 'inside-top': 'insideTop', 'inside-bottom': 'insideBottom', 'inside-right': 'insideRight', @@ -49,7 +49,7 @@ const labelPositionMap = { 'bottom-left': 'bottomLeft' }; -export function toVChartBar(barSeries: any): ITheme['series']['bar'] { +export function toVChartBar(barSeries: any): ISeriesTheme['bar'] { if (!barSeries) { return {}; } diff --git a/packages/vchart-theme-converter/src/echarts/series/funnel.ts b/packages/vchart-theme-converter/src/echarts/series/funnel.ts index 917a79a..3cbda4a 100644 --- a/packages/vchart-theme-converter/src/echarts/series/funnel.ts +++ b/packages/vchart-theme-converter/src/echarts/series/funnel.ts @@ -1,8 +1,8 @@ -import type { ITheme } from '@visactor/vchart'; +import type { ISeriesTheme, ITheme } from '@visactor/vchart'; import { attributeMap, labelStyleMap } from '../convertMap'; import { convertToItemStyle, convertToVChartGraphicStyle } from '../utils'; -export function toEChartsFunnel(funnelSeries: ITheme['series']['funnel'], theme: ITheme) { +export function toEChartsFunnel(funnelSeries: ISeriesTheme['funnel'], theme: ITheme) { if (!funnelSeries) { return {}; } @@ -26,7 +26,7 @@ export function toEChartsFunnel(funnelSeries: ITheme['series']['funnel'], theme: return funnelStyle; } -export function toVChartFunnel(funnelSeries: any): ITheme['series']['funnel'] { +export function toVChartFunnel(funnelSeries: any): ISeriesTheme['funnel'] { if (!funnelSeries) { return {}; } diff --git a/packages/vchart-theme-converter/src/echarts/series/line.ts b/packages/vchart-theme-converter/src/echarts/series/line.ts index a931e37..6a42a74 100644 --- a/packages/vchart-theme-converter/src/echarts/series/line.ts +++ b/packages/vchart-theme-converter/src/echarts/series/line.ts @@ -1,11 +1,10 @@ -import type { ITheme } from '@visactor/vchart'; - +import type { ITheme, ISeriesTheme } from '@visactor/vchart'; +import type { IEChartsTheme } from '..'; import { convertThemeTokenItem } from '../../util/token'; import { areaStyleMap, labelStyleMap, lineStyleMap, symbolStyleMap } from '../convertMap'; -import type { IEChartsTheme } from '..'; import { convertToItemStyle, convertToVChartGraphicStyle } from '../utils'; -export function toEChartsLine(lineSeries: ITheme['series']['line'], theme: ITheme) { +export function toEChartsLine(lineSeries: ISeriesTheme['line'], theme: ITheme) { if (!lineSeries) { return {}; } @@ -62,7 +61,7 @@ export function toEChartsLine(lineSeries: ITheme['series']['line'], theme: IThem return lineTheme; } -export function toVChartLine(lineSeries: IEChartsTheme): ITheme['series']['line'] { +export function toVChartLine(lineSeries: IEChartsTheme): ISeriesTheme['line'] { if (!lineSeries) { return {}; } diff --git a/packages/vchart-theme-converter/src/echarts/series/pie.ts b/packages/vchart-theme-converter/src/echarts/series/pie.ts index db910ba..19990f5 100644 --- a/packages/vchart-theme-converter/src/echarts/series/pie.ts +++ b/packages/vchart-theme-converter/src/echarts/series/pie.ts @@ -1,9 +1,9 @@ -import type { ITheme } from '@visactor/vchart'; +import type { ITheme, ISeriesTheme } from '@visactor/vchart'; import { attributeMap, labelStyleMap } from '../convertMap'; import { isNumber } from '@visactor/vutils'; import { convertToVChartGraphicStyle, convertToItemStyle } from '../utils'; -export function toEChartsPie(pieSeries: ITheme['series']['pie'], theme: ITheme) { +export function toEChartsPie(pieSeries: ISeriesTheme['pie'], theme: ITheme) { if (!pieSeries) { return {}; } @@ -33,7 +33,7 @@ export function toEChartsPie(pieSeries: ITheme['series']['pie'], theme: ITheme) return pieTheme; } -export function toVChartPie(pieSeries: any): ITheme['series']['pie'] { +export function toVChartPie(pieSeries: any): ISeriesTheme['pie'] { if (!pieSeries) { return {}; } diff --git a/packages/vchart-theme-converter/src/echarts/seriesConverter.ts b/packages/vchart-theme-converter/src/echarts/seriesConverter.ts index dd0b3a8..4a8c741 100644 --- a/packages/vchart-theme-converter/src/echarts/seriesConverter.ts +++ b/packages/vchart-theme-converter/src/echarts/seriesConverter.ts @@ -9,7 +9,7 @@ import { toEChartsFunnel, toVChartFunnel } from './series/funnel'; const VCHART_SERIES_TYPES = Object.keys(SeriesTypeEnum); -const toEChartsConverter = { +const toEChartsConverter: Record any> = { line: toEChartsLine, area: toEChartsArea, bar: toEChartsBar, @@ -17,7 +17,7 @@ const toEChartsConverter = { funnel: toEChartsFunnel }; -export const toVChartConverter = { +export const toVChartConverter: Record any> = { line: toVChartLine, bar: toVChartBar, pie: toVChartPie, @@ -25,6 +25,9 @@ export const toVChartConverter = { }; export function convertSeries(series: ITheme['series'], theme: ITheme) { + if (!series) { + return {}; + } const result = {} as any; VCHART_SERIES_TYPES.forEach(type => { @@ -36,7 +39,7 @@ export function convertSeries(series: ITheme['series'], theme: ITheme) { result.line = merge(result.line, toEChartsConverter[type](series[type], theme)); } else { // 这里后续可能存在问题：vchart series type 和 echarts series type 不一致 - result[type] = merge(result[type] ?? {}, toEChartsConverter[type](series[type], theme)); + result[type] = merge(result[type] ?? {}, toEChartsConverter[type]((series as any)[type], theme)); } } }); From 6e4c0e53ff0101f3b7774d69cb84491455776889 Mon Sep 17 00:00:00 2001 From: xiaoluoHe Date: Wed, 24 Jul 2024 15:21:22 +0800 Subject: [PATCH 12/16] chore: update rush config --- rush.json | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/rush.json b/rush.json index 153b1e0..42fc846 100644 --- a/rush.json +++ b/rush.json @@ -22,7 +22,9 @@ { "packageName": "@visactor/vchart-theme-converter", "projectFolder": "packages/vchart-theme-converter", - "shouldPublish": false + "tags": ["package"], + "shouldPublish": true, + "versionPolicyName": "vchartThemeMain" }, { "packageName": "@visactor/vchart-theme-demo-component", @@ -104,4 +106,4 @@ "shouldPublish": false } ] -} \ No newline at end of file +} From 2964e50c1b6d595e4652943946e57dbce1d52d06 Mon Sep 17 00:00:00 2001 From: xiaoluoHe Date: Wed, 24 Jul 2024 16:05:26 +0800 Subject: [PATCH 13/16] fix: import type directly from vchart --- common/config/rush/pnpm-lock.yaml | 16 ++++++++-------- .../src/spec/funnelHorizontal.ts | 18 +++++++++--------- .../src/vchart-chart-hub-theme/charts.tsx | 1 + packages/vchart-theme-utils/package.json | 2 +- packages/vchart-theme/package.json | 2 +- .../chart-hub/common/component/data-zoom.ts | 2 +- .../chart-hub/common/component/polar-axis.ts | 2 +- .../src/legacy/legend/color-legend.ts | 2 +- .../src/legacy/legend/continuous.ts | 2 +- .../src/legacy/legend/size-legend.ts | 2 +- .../mobile/common/component/axis/band-axis.ts | 2 +- .../common/component/axis/cartesian-axis.ts | 2 +- .../common/component/axis/common-axis.ts | 2 +- .../common/component/axis/linear-axis.ts | 2 +- .../mobile/common/component/axis/polar-axis.ts | 2 +- .../src/mobile/common/component/crosshair.ts | 16 ++++++---------- .../src/mobile/common/component/data-zoom.ts | 2 +- .../src/mobile/common/component/index.ts | 2 +- .../src/mobile/common/component/indicator.ts | 2 +- .../common/component/legend/color-legend.ts | 2 +- .../common/component/legend/continuous.ts | 2 +- .../common/component/legend/discrete-legend.ts | 2 +- .../common/component/legend/size-legend.ts | 2 +- .../src/mobile/common/component/map-label.ts | 2 +- .../src/mobile/common/component/mark-area.ts | 2 +- .../src/mobile/common/component/mark-line.ts | 2 +- .../src/mobile/common/component/mark-point.ts | 2 +- .../src/mobile/common/component/player.ts | 2 +- .../src/mobile/common/component/poptip.ts | 2 +- .../src/mobile/common/component/title.ts | 2 +- .../src/mobile/common/component/tooltip.ts | 2 +- .../src/mobile/common/component/total-label.ts | 2 +- .../vchart-theme/src/mobile/common/mark.ts | 2 +- packages/vchart-theme/src/theme-map.ts | 2 +- .../src/v-screen/common/color-scheme.ts | 2 +- .../src/v-screen/common/component/axis.ts | 2 +- .../src/v-screen/common/component/crosshair.ts | 2 +- .../src/v-screen/common/component/tooltip.ts | 2 +- .../vchart-theme/src/v-screen/common/mark.ts | 2 +- .../src/v-screen/common/palette.ts | 2 +- .../src/v-screen/common/series/area.ts | 2 +- .../src/v-screen/common/series/bar.ts | 2 +- share/chart-demo/package.json | 2 +- 43 files changed, 63 insertions(+), 66 deletions(-) diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index 5ffcfb3..b9ddf33 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -243,7 +243,7 @@ importers: '@visactor/vchart-arco-theme': workspace:1.11.5 '@visactor/vchart-semi-theme': workspace:1.11.5 '@visactor/vchart-tt-platform-theme': workspace:1.11.5 - '@visactor/vchart-types': 1.11.0 + '@visactor/vchart-types': 1.11.6 '@visactor/vchart-ve-o-theme': workspace:1.11.5 eslint: ~8.18.0 husky: 7.0.4 @@ -275,7 +275,7 @@ importers: '@visactor/vchart-arco-theme': link:../vchart-arco-theme '@visactor/vchart-semi-theme': link:../vchart-semi-theme '@visactor/vchart-tt-platform-theme': link:../vchart-tt-platform-theme - '@visactor/vchart-types': 1.11.0 + '@visactor/vchart-types': 1.11.6 '@visactor/vchart-ve-o-theme': link:../vchart-ve-o-theme eslint: 8.18.0 husky: 7.0.4 @@ -509,7 +509,7 @@ importers: '@types/node': '*' '@types/offscreencanvas': 2019.6.4 '@visactor/vchart': 1.11.6 - '@visactor/vchart-types': 1.11.0 + '@visactor/vchart-types': 1.11.6 eslint: ~8.18.0 husky: 7.0.4 jest: ~29.5.0 @@ -536,7 +536,7 @@ importers: '@types/node': 20.12.7 '@types/offscreencanvas': 2019.6.4 '@visactor/vchart': 1.11.6 - '@visactor/vchart-types': 1.11.0 + '@visactor/vchart-types': 1.11.6 eslint: 8.18.0 husky: 7.0.4 jest: 29.5.0_nfgaym6ygctcxvhgdn7jfhc2pq @@ -787,7 +787,7 @@ importers: '@types/node': '*' '@types/offscreencanvas': 2019.6.4 '@visactor/vchart': 1.11.6 - '@visactor/vchart-types': 1.11.0 + '@visactor/vchart-types': 1.11.6 eslint: ~8.18.0 husky: 7.0.4 jest: ~29.5.0 @@ -812,7 +812,7 @@ importers: '@types/node': 20.12.7 '@types/offscreencanvas': 2019.6.4 '@visactor/vchart': 1.11.6 - '@visactor/vchart-types': 1.11.0 + '@visactor/vchart-types': 1.11.6 eslint: 8.18.0 husky: 7.0.4 jest: 29.5.0_nfgaym6ygctcxvhgdn7jfhc2pq @@ -4400,8 +4400,8 @@ packages: react-dom: 18.2.0_react@18.2.0 react-is: 18.2.0 - /@visactor/vchart-types/1.11.0: - resolution: {integrity: sha512-YAcYvfy2rv/HZYOEFjFb7s/Rcx1kDQs4Q77nZa/2+0lgcLwEhwmJymUFT8giklGxlKzwvqj0dkM0AplUs767uA==} + /@visactor/vchart-types/1.11.6: + resolution: {integrity: sha512-f/zfdMuszfNXwcnUKzLSbcN7IRT1qVd0+KDEFTf3jwEZPUehKbk9BhuJsTGAMWQQKFGzzK0hU5OwMJcNAEeHqw==} dev: true /@visactor/vchart/1.11.0: diff --git a/packages/vchart-theme-demo-component/src/spec/funnelHorizontal.ts b/packages/vchart-theme-demo-component/src/spec/funnelHorizontal.ts index e2da7a0..020aab5 100644 --- a/packages/vchart-theme-demo-component/src/spec/funnelHorizontal.ts +++ b/packages/vchart-theme-demo-component/src/spec/funnelHorizontal.ts @@ -52,10 +52,10 @@ export const horizontalFunnelSpec = { visible: true, style: { lineHeight: 16, - limit: (datum, ctx) => Math.abs(ctx.getPoints(datum)[0].x - ctx.getPoints(datum)[3].x), - text: datum => `${datum.percent * 100}%`, - x: (datum, ctx) => ctx.getPoints(datum)[0].x + 10, - y: (datum, ctx) => ctx.getPoints(datum)[0].y - 10, + limit: (datum: any, ctx: any) => Math.abs(ctx.getPoints(datum)[0].x - ctx.getPoints(datum)[3].x), + text: (datum: any) => `${datum.percent * 100}%`, + x: (datum: any, ctx: any) => ctx.getPoints(datum)[0].x + 10, + y: (datum: any, ctx: any) => ctx.getPoints(datum)[0].y - 10, textAlign: 'left', textBaseline: 'bottom', fontSize: 20, @@ -67,7 +67,7 @@ export const horizontalFunnelSpec = { type: 'polygon', dataId: 'funnel', style: { - points: (datum, ctx) => { + points: (datum: any, ctx: any) => { const start = ctx.getPoints(datum)[1]; const end = { x: start.x, y: 0 }; return [start, end]; @@ -81,7 +81,7 @@ export const horizontalFunnelSpec = { type: 'text', dataId: 'funnel', style: { - text: (datum, ctx) => { + text: (datum: any, ctx: any) => { return { type: 'rich', text: [ @@ -101,8 +101,8 @@ export const horizontalFunnelSpec = { ] }; }, - x: (datum, ctx) => ctx.getPoints(datum)[0].x + 10, - width: (datum, ctx) => { + x: (datum: any, ctx: any) => ctx.getPoints(datum)[0].x + 10, + width: (datum: any, ctx: any) => { return ctx.getPoints(datum)[3].x - ctx.getPoints(datum)[0].x; }, textAlign: 'left', @@ -119,7 +119,7 @@ export const horizontalFunnelSpec = { style: { image: 'https://sf16-scmcdn-sg.ibytedtos.com/obj/static-sg/visactor-site/sg/client/img/visactor/vrender-icon.svg', - x: (datum, ctx) => + x: (datum: any, ctx: any) => ctx.getPoints(datum)[2].x + (ctx.getPoints(datum)[2].x - ctx.getPoints(datum)[1].x) * 0.5 - 36, y: 10, align: 'right', diff --git a/packages/vchart-theme-demo-component/src/vchart-chart-hub-theme/charts.tsx b/packages/vchart-theme-demo-component/src/vchart-chart-hub-theme/charts.tsx index 96c72e7..657fb3c 100644 --- a/packages/vchart-theme-demo-component/src/vchart-chart-hub-theme/charts.tsx +++ b/packages/vchart-theme-demo-component/src/vchart-chart-hub-theme/charts.tsx @@ -68,6 +68,7 @@ export function Charts(props: IProps) { ...chart.spec, height: chartHeight }} + // @ts-ignore options={{ ...chart.option, mode: isMobile ? 'mobile-browser' : 'desktop-browser' diff --git a/packages/vchart-theme-utils/package.json b/packages/vchart-theme-utils/package.json index bb658fd..5577981 100644 --- a/packages/vchart-theme-utils/package.json +++ b/packages/vchart-theme-utils/package.json @@ -37,7 +37,7 @@ "@types/jest": "~29.5.0", "@rushstack/eslint-patch": "~1.1.4", "@visactor/vchart": "1.11.6", - "@visactor/vchart-types": "1.11.0", + "@visactor/vchart-types": "1.11.6", "eslint": "~8.18.0", "vite": "^4.5.0", "typescript": "4.9.5", diff --git a/packages/vchart-theme/package.json b/packages/vchart-theme/package.json index a7ae314..0ee6f00 100644 --- a/packages/vchart-theme/package.json +++ b/packages/vchart-theme/package.json @@ -39,7 +39,7 @@ "@types/jest": "~29.5.0", "@rushstack/eslint-patch": "~1.1.4", "@visactor/vchart": "1.11.6", - "@visactor/vchart-types": "1.11.0", + "@visactor/vchart-types": "1.11.6", "eslint": "~8.18.0", "vite": "^4.5.0", "typescript": "4.9.5", diff --git a/packages/vchart-theme/src/chart-hub/common/component/data-zoom.ts b/packages/vchart-theme/src/chart-hub/common/component/data-zoom.ts index ebc379f..22d2192 100644 --- a/packages/vchart-theme/src/chart-hub/common/component/data-zoom.ts +++ b/packages/vchart-theme/src/chart-hub/common/component/data-zoom.ts @@ -1,4 +1,4 @@ -import type { IDataZoomTheme } from '@visactor/vchart-types'; +import type { IDataZoomTheme } from '@visactor/vchart'; export const dataZoom: IDataZoomTheme = { height: 44, diff --git a/packages/vchart-theme/src/chart-hub/common/component/polar-axis.ts b/packages/vchart-theme/src/chart-hub/common/component/polar-axis.ts index 5fdc831..bc04e25 100644 --- a/packages/vchart-theme/src/chart-hub/common/component/polar-axis.ts +++ b/packages/vchart-theme/src/chart-hub/common/component/polar-axis.ts @@ -1,4 +1,4 @@ -import type { IPolarAxisCommonTheme } from '@visactor/vchart-types'; +import type { IPolarAxisCommonTheme } from '@visactor/vchart'; const axisRadius: IPolarAxisCommonTheme = { domainLine: {}, diff --git a/packages/vchart-theme/src/legacy/legend/color-legend.ts b/packages/vchart-theme/src/legacy/legend/color-legend.ts index 28c022f..e263d40 100644 --- a/packages/vchart-theme/src/legacy/legend/color-legend.ts +++ b/packages/vchart-theme/src/legacy/legend/color-legend.ts @@ -1,4 +1,4 @@ -import type { IColorLegendTheme, IContinuousLegendTheme } from '@visactor/vchart-types'; +import type { IColorLegendTheme, IContinuousLegendTheme } from '@visactor/vchart'; import { DEFAULT_CONTINUOUS_LEGEND_THEME } from './continuous'; const handlerTheme: IContinuousLegendTheme['handler'] = { diff --git a/packages/vchart-theme/src/legacy/legend/continuous.ts b/packages/vchart-theme/src/legacy/legend/continuous.ts index e7839b6..13d19e5 100644 --- a/packages/vchart-theme/src/legacy/legend/continuous.ts +++ b/packages/vchart-theme/src/legacy/legend/continuous.ts @@ -1,4 +1,4 @@ -import type { IContinuousLegendTheme } from '@visactor/vchart-types'; +import type { IContinuousLegendTheme } from '@visactor/vchart'; export const DEFAULT_CONTINUOUS_LEGEND_THEME: IContinuousLegendTheme = { orient: 'right', diff --git a/packages/vchart-theme/src/legacy/legend/size-legend.ts b/packages/vchart-theme/src/legacy/legend/size-legend.ts index 26c7976..7a1f256 100644 --- a/packages/vchart-theme/src/legacy/legend/size-legend.ts +++ b/packages/vchart-theme/src/legacy/legend/size-legend.ts @@ -1,5 +1,5 @@ // eslint-disable-next-line no-duplicate-imports -import type { IContinuousLegendTheme, ISizeLegendTheme } from '@visactor/vchart-types'; +import type { IContinuousLegendTheme, ISizeLegendTheme } from '@visactor/vchart'; import { DEFAULT_CONTINUOUS_LEGEND_THEME } from './continuous'; const getHandlerTheme = (align?: 'top' | 'bottom' | 'left' | 'right'): IContinuousLegendTheme['handler'] => ({ diff --git a/packages/vchart-theme/src/mobile/common/component/axis/band-axis.ts b/packages/vchart-theme/src/mobile/common/component/axis/band-axis.ts index 1ec9369..3de1ea1 100644 --- a/packages/vchart-theme/src/mobile/common/component/axis/band-axis.ts +++ b/packages/vchart-theme/src/mobile/common/component/axis/band-axis.ts @@ -1,4 +1,4 @@ -import type { IBandAxisTheme } from '@visactor/vchart-types'; +import type { IBandAxisTheme } from '@visactor/vchart'; export const axisBand: IBandAxisTheme = { domainLine: { diff --git a/packages/vchart-theme/src/mobile/common/component/axis/cartesian-axis.ts b/packages/vchart-theme/src/mobile/common/component/axis/cartesian-axis.ts index 73a9077..9ffd9e6 100644 --- a/packages/vchart-theme/src/mobile/common/component/axis/cartesian-axis.ts +++ b/packages/vchart-theme/src/mobile/common/component/axis/cartesian-axis.ts @@ -1,4 +1,4 @@ -import type { ICartesianAxisCommonTheme } from '@visactor/vchart-types'; +import type { ICartesianAxisCommonTheme } from '@visactor/vchart'; export const axisX: ICartesianAxisCommonTheme = { label: { diff --git a/packages/vchart-theme/src/mobile/common/component/axis/common-axis.ts b/packages/vchart-theme/src/mobile/common/component/axis/common-axis.ts index fbc5359..2f8ea60 100644 --- a/packages/vchart-theme/src/mobile/common/component/axis/common-axis.ts +++ b/packages/vchart-theme/src/mobile/common/component/axis/common-axis.ts @@ -1,4 +1,4 @@ -import type { IAxisCommonTheme } from '@visactor/vchart-types'; +import type { IAxisCommonTheme } from '@visactor/vchart'; export const commonAxis: IAxisCommonTheme = { domainLine: { diff --git a/packages/vchart-theme/src/mobile/common/component/axis/linear-axis.ts b/packages/vchart-theme/src/mobile/common/component/axis/linear-axis.ts index 985d910..292191d 100644 --- a/packages/vchart-theme/src/mobile/common/component/axis/linear-axis.ts +++ b/packages/vchart-theme/src/mobile/common/component/axis/linear-axis.ts @@ -1,4 +1,4 @@ -import type { IAxisCommonTheme } from '@visactor/vchart-types'; +import type { IAxisCommonTheme } from '@visactor/vchart'; export const axisLinear: IAxisCommonTheme = { domainLine: { diff --git a/packages/vchart-theme/src/mobile/common/component/axis/polar-axis.ts b/packages/vchart-theme/src/mobile/common/component/axis/polar-axis.ts index 2adc3b3..9e989ec 100644 --- a/packages/vchart-theme/src/mobile/common/component/axis/polar-axis.ts +++ b/packages/vchart-theme/src/mobile/common/component/axis/polar-axis.ts @@ -1,4 +1,4 @@ -import type { IPolarAxisCommonTheme } from '@visactor/vchart-types'; +import type { IPolarAxisCommonTheme } from '@visactor/vchart'; export const axisRadius: IPolarAxisCommonTheme = { grid: { diff --git a/packages/vchart-theme/src/mobile/common/component/crosshair.ts b/packages/vchart-theme/src/mobile/common/component/crosshair.ts index 3d089c9..add0541 100644 --- a/packages/vchart-theme/src/mobile/common/component/crosshair.ts +++ b/packages/vchart-theme/src/mobile/common/component/crosshair.ts @@ -1,9 +1,5 @@ -import type { ICrosshairTheme } from '@visactor/vchart-types'; -import type { - ICrosshairCategoryFieldSpec, - ICrosshairLabelSpec, - ICrosshairValueFieldSpec -} from '@visactor/vchart-types/types/component/crosshair'; +import type { ICrosshairTheme } from '@visactor/vchart'; +import type { ICrosshairLabelSpec } from '@visactor/vchart-types/types/component/crosshair'; const getLabelSpec = (): ICrosshairLabelSpec => ({ visible: false, @@ -17,14 +13,14 @@ const getLabelSpec = (): ICrosshairLabelSpec => ({ } }); -const getBandField = (): ICrosshairCategoryFieldSpec => ({ +const getBandField = (): ICrosshairTheme['bandField'] => ({ visible: false, - label: getLabelSpec() + label: getLabelSpec() as any }); -const getLinearField = (): ICrosshairValueFieldSpec => ({ +const getLinearField = (): ICrosshairTheme['linearField'] => ({ visible: false, - label: getLabelSpec() + label: getLabelSpec() as any }); export const crosshair: ICrosshairTheme = { diff --git a/packages/vchart-theme/src/mobile/common/component/data-zoom.ts b/packages/vchart-theme/src/mobile/common/component/data-zoom.ts index 1bec1ff..1a04710 100644 --- a/packages/vchart-theme/src/mobile/common/component/data-zoom.ts +++ b/packages/vchart-theme/src/mobile/common/component/data-zoom.ts @@ -1,4 +1,4 @@ -import type { IDataZoomTheme } from '@visactor/vchart-types'; +import type { IDataZoomTheme } from '@visactor/vchart'; export const dataZoom: IDataZoomTheme = { padding: [12, 0], diff --git a/packages/vchart-theme/src/mobile/common/component/index.ts b/packages/vchart-theme/src/mobile/common/component/index.ts index 7fbd6e6..99cb069 100644 --- a/packages/vchart-theme/src/mobile/common/component/index.ts +++ b/packages/vchart-theme/src/mobile/common/component/index.ts @@ -1,4 +1,4 @@ -import type { IComponentTheme } from '@visactor/vchart-types'; +import type { IComponentTheme } from '@visactor/vchart'; import { axisBand } from './axis/band-axis'; import { axisX, axisY, axisZ } from './axis/cartesian-axis'; import { commonAxis } from './axis/common-axis'; diff --git a/packages/vchart-theme/src/mobile/common/component/indicator.ts b/packages/vchart-theme/src/mobile/common/component/indicator.ts index b99c59a..358935d 100644 --- a/packages/vchart-theme/src/mobile/common/component/indicator.ts +++ b/packages/vchart-theme/src/mobile/common/component/indicator.ts @@ -1,4 +1,4 @@ -import type { IIndicatorTheme } from '@visactor/vchart-types'; +import type { IIndicatorTheme } from '@visactor/vchart'; export const indicator: IIndicatorTheme = { title: { diff --git a/packages/vchart-theme/src/mobile/common/component/legend/color-legend.ts b/packages/vchart-theme/src/mobile/common/component/legend/color-legend.ts index 0898846..31b3003 100644 --- a/packages/vchart-theme/src/mobile/common/component/legend/color-legend.ts +++ b/packages/vchart-theme/src/mobile/common/component/legend/color-legend.ts @@ -1,4 +1,4 @@ -import type { IColorLegendTheme } from '@visactor/vchart-types'; +import type { IColorLegendTheme } from '@visactor/vchart'; import { DEFAULT_CONTINUOUS_LEGEND_THEME } from './continuous'; export const colorLegend: IColorLegendTheme = { diff --git a/packages/vchart-theme/src/mobile/common/component/legend/continuous.ts b/packages/vchart-theme/src/mobile/common/component/legend/continuous.ts index 1cddf86..d2a0fce 100644 --- a/packages/vchart-theme/src/mobile/common/component/legend/continuous.ts +++ b/packages/vchart-theme/src/mobile/common/component/legend/continuous.ts @@ -1,4 +1,4 @@ -import type { IContinuousLegendTheme } from '@visactor/vchart-types'; +import type { IContinuousLegendTheme } from '@visactor/vchart'; export const DEFAULT_CONTINUOUS_LEGEND_THEME: IContinuousLegendTheme = { orient: 'right', diff --git a/packages/vchart-theme/src/mobile/common/component/legend/discrete-legend.ts b/packages/vchart-theme/src/mobile/common/component/legend/discrete-legend.ts index 1e42eab..e88e2ff 100644 --- a/packages/vchart-theme/src/mobile/common/component/legend/discrete-legend.ts +++ b/packages/vchart-theme/src/mobile/common/component/legend/discrete-legend.ts @@ -1,4 +1,4 @@ -import type { IDiscreteLegendTheme } from '@visactor/vchart-types'; +import type { IDiscreteLegendTheme } from '@visactor/vchart'; export const discreteLegend: IDiscreteLegendTheme = { orient: 'top', diff --git a/packages/vchart-theme/src/mobile/common/component/legend/size-legend.ts b/packages/vchart-theme/src/mobile/common/component/legend/size-legend.ts index 1efa83e..1fb3e8a 100644 --- a/packages/vchart-theme/src/mobile/common/component/legend/size-legend.ts +++ b/packages/vchart-theme/src/mobile/common/component/legend/size-legend.ts @@ -1,4 +1,4 @@ -import type { ISizeLegendTheme } from '@visactor/vchart-types'; +import type { ISizeLegendTheme } from '@visactor/vchart'; import { DEFAULT_CONTINUOUS_LEGEND_THEME } from './continuous'; export const sizeLegend: ISizeLegendTheme = { diff --git a/packages/vchart-theme/src/mobile/common/component/map-label.ts b/packages/vchart-theme/src/mobile/common/component/map-label.ts index fbcbd6b..00700cd 100644 --- a/packages/vchart-theme/src/mobile/common/component/map-label.ts +++ b/packages/vchart-theme/src/mobile/common/component/map-label.ts @@ -1,4 +1,4 @@ -import type { IMapLabelTheme } from '@visactor/vchart-types'; +import type { IMapLabelTheme } from '@visactor/vchart'; export const mapLabel: IMapLabelTheme = { visible: true, diff --git a/packages/vchart-theme/src/mobile/common/component/mark-area.ts b/packages/vchart-theme/src/mobile/common/component/mark-area.ts index 5067706..701aa27 100644 --- a/packages/vchart-theme/src/mobile/common/component/mark-area.ts +++ b/packages/vchart-theme/src/mobile/common/component/mark-area.ts @@ -1,4 +1,4 @@ -import type { IMarkAreaTheme } from '@visactor/vchart-types'; +import type { IMarkAreaTheme } from '@visactor/vchart'; export const markArea: IMarkAreaTheme = { label: { diff --git a/packages/vchart-theme/src/mobile/common/component/mark-line.ts b/packages/vchart-theme/src/mobile/common/component/mark-line.ts index e875d59..a5842dc 100644 --- a/packages/vchart-theme/src/mobile/common/component/mark-line.ts +++ b/packages/vchart-theme/src/mobile/common/component/mark-line.ts @@ -1,4 +1,4 @@ -import type { IMarkLineTheme } from '@visactor/vchart-types'; +import type { IMarkLineTheme } from '@visactor/vchart'; export const markLine: IMarkLineTheme = { startSymbol: { diff --git a/packages/vchart-theme/src/mobile/common/component/mark-point.ts b/packages/vchart-theme/src/mobile/common/component/mark-point.ts index 16aabaa..3e4c98d 100644 --- a/packages/vchart-theme/src/mobile/common/component/mark-point.ts +++ b/packages/vchart-theme/src/mobile/common/component/mark-point.ts @@ -1,4 +1,4 @@ -import type { IMarkPointTheme } from '@visactor/vchart-types'; +import type { IMarkPointTheme } from '@visactor/vchart'; export const markPoint: IMarkPointTheme = { itemLine: { diff --git a/packages/vchart-theme/src/mobile/common/component/player.ts b/packages/vchart-theme/src/mobile/common/component/player.ts index ff6a419..a1da490 100644 --- a/packages/vchart-theme/src/mobile/common/component/player.ts +++ b/packages/vchart-theme/src/mobile/common/component/player.ts @@ -1,4 +1,4 @@ -import type { IPlayerTheme } from '@visactor/vchart-types'; +import type { IPlayerTheme } from '@visactor/vchart'; export const player: IPlayerTheme = { visible: true, diff --git a/packages/vchart-theme/src/mobile/common/component/poptip.ts b/packages/vchart-theme/src/mobile/common/component/poptip.ts index c14b685..9b87152 100644 --- a/packages/vchart-theme/src/mobile/common/component/poptip.ts +++ b/packages/vchart-theme/src/mobile/common/component/poptip.ts @@ -1,4 +1,4 @@ -import type { IPoptipTheme } from '@visactor/vchart-types'; +import type { IPoptipTheme } from '@visactor/vchart'; export const poptip: IPoptipTheme = { visible: true, diff --git a/packages/vchart-theme/src/mobile/common/component/title.ts b/packages/vchart-theme/src/mobile/common/component/title.ts index dd3a3e5..af7381d 100644 --- a/packages/vchart-theme/src/mobile/common/component/title.ts +++ b/packages/vchart-theme/src/mobile/common/component/title.ts @@ -1,4 +1,4 @@ -import type { ITitleTheme } from '@visactor/vchart-types'; +import type { ITitleTheme } from '@visactor/vchart'; export const title: ITitleTheme = { padding: { diff --git a/packages/vchart-theme/src/mobile/common/component/tooltip.ts b/packages/vchart-theme/src/mobile/common/component/tooltip.ts index 158d320..4290ed8 100644 --- a/packages/vchart-theme/src/mobile/common/component/tooltip.ts +++ b/packages/vchart-theme/src/mobile/common/component/tooltip.ts @@ -1,4 +1,4 @@ -import type { ITooltipTheme } from '@visactor/vchart-types'; +import type { ITooltipTheme } from '@visactor/vchart'; export const tooltip: ITooltipTheme = { offset: { diff --git a/packages/vchart-theme/src/mobile/common/component/total-label.ts b/packages/vchart-theme/src/mobile/common/component/total-label.ts index 0f0c740..73fb8d1 100644 --- a/packages/vchart-theme/src/mobile/common/component/total-label.ts +++ b/packages/vchart-theme/src/mobile/common/component/total-label.ts @@ -1,4 +1,4 @@ -import type { ITotalLabelTheme } from '@visactor/vchart-types'; +import type { ITotalLabelTheme } from '@visactor/vchart'; export const totalLabel: ITotalLabelTheme = { visible: false, diff --git a/packages/vchart-theme/src/mobile/common/mark.ts b/packages/vchart-theme/src/mobile/common/mark.ts index 5bfb7e8..9a9a793 100644 --- a/packages/vchart-theme/src/mobile/common/mark.ts +++ b/packages/vchart-theme/src/mobile/common/mark.ts @@ -1,4 +1,4 @@ -import type { IGlobalMarkThemeByName, IGlobalMarkThemeByType } from '@visactor/vchart-types'; +import type { IGlobalMarkThemeByName, IGlobalMarkThemeByType } from '@visactor/vchart'; export const markByType: IGlobalMarkThemeByType = { text: { diff --git a/packages/vchart-theme/src/theme-map.ts b/packages/vchart-theme/src/theme-map.ts index 8dbb356..43116de 100644 --- a/packages/vchart-theme/src/theme-map.ts +++ b/packages/vchart-theme/src/theme-map.ts @@ -8,7 +8,7 @@ export const allThemeMap = new Map([ // 移动端主题 [mobileLightTheme.name, mobileLightTheme], [mobileDarkTheme.name, mobileDarkTheme], - // 传统主题 + // // 传统主题 [legacyLightTheme.name, legacyLightTheme], [legacyDarkTheme.name, legacyDarkTheme], // 大屏主题 diff --git a/packages/vchart-theme/src/v-screen/common/color-scheme.ts b/packages/vchart-theme/src/v-screen/common/color-scheme.ts index 9de1b23..2b50ed2 100644 --- a/packages/vchart-theme/src/v-screen/common/color-scheme.ts +++ b/packages/vchart-theme/src/v-screen/common/color-scheme.ts @@ -1,4 +1,4 @@ -import type { IThemeColorScheme } from '@visactor/vchart-types'; +import type { IThemeColorScheme } from '@visactor/vchart'; import { palette } from './palette'; export const getColorScheme = (dataScheme: string[]): IThemeColorScheme => ({ diff --git a/packages/vchart-theme/src/v-screen/common/component/axis.ts b/packages/vchart-theme/src/v-screen/common/component/axis.ts index 694e6a4..3b25d0e 100644 --- a/packages/vchart-theme/src/v-screen/common/component/axis.ts +++ b/packages/vchart-theme/src/v-screen/common/component/axis.ts @@ -1,4 +1,4 @@ -import type { IComponentTheme } from '@visactor/vchart-types'; +import type { IComponentTheme } from '@visactor/vchart'; export const axis: Pick< IComponentTheme, diff --git a/packages/vchart-theme/src/v-screen/common/component/crosshair.ts b/packages/vchart-theme/src/v-screen/common/component/crosshair.ts index e260cec..787b1c2 100644 --- a/packages/vchart-theme/src/v-screen/common/component/crosshair.ts +++ b/packages/vchart-theme/src/v-screen/common/component/crosshair.ts @@ -1,4 +1,4 @@ -import type { ICrosshairTheme } from '@visactor/vchart-types'; +import type { ICrosshairTheme } from '@visactor/vchart'; export const crosshair: ICrosshairTheme = { bandField: { diff --git a/packages/vchart-theme/src/v-screen/common/component/tooltip.ts b/packages/vchart-theme/src/v-screen/common/component/tooltip.ts index 81deb40..6c3ad2e 100644 --- a/packages/vchart-theme/src/v-screen/common/component/tooltip.ts +++ b/packages/vchart-theme/src/v-screen/common/component/tooltip.ts @@ -1,4 +1,4 @@ -import type { ITooltipTheme } from '@visactor/vchart-types'; +import type { ITooltipTheme } from '@visactor/vchart'; export const tooltip: ITooltipTheme = { panel: { diff --git a/packages/vchart-theme/src/v-screen/common/mark.ts b/packages/vchart-theme/src/v-screen/common/mark.ts index 85f91b4..fa52b31 100644 --- a/packages/vchart-theme/src/v-screen/common/mark.ts +++ b/packages/vchart-theme/src/v-screen/common/mark.ts @@ -1,3 +1,3 @@ -import type { IGlobalMarkThemeByName } from '@visactor/vchart-types'; +import type { IGlobalMarkThemeByName } from '@visactor/vchart'; export const markByName: IGlobalMarkThemeByName = {}; diff --git a/packages/vchart-theme/src/v-screen/common/palette.ts b/packages/vchart-theme/src/v-screen/common/palette.ts index ab7847f..a4d180a 100644 --- a/packages/vchart-theme/src/v-screen/common/palette.ts +++ b/packages/vchart-theme/src/v-screen/common/palette.ts @@ -1,4 +1,4 @@ -import type { BuiltinColorPalette } from '@visactor/vchart-types'; +import type { BuiltinColorPalette } from '@visactor/vchart'; export const palette: Partial = { /** 背景色 */ diff --git a/packages/vchart-theme/src/v-screen/common/series/area.ts b/packages/vchart-theme/src/v-screen/common/series/area.ts index d75dfea..3fc310b 100644 --- a/packages/vchart-theme/src/v-screen/common/series/area.ts +++ b/packages/vchart-theme/src/v-screen/common/series/area.ts @@ -1,4 +1,4 @@ -import type { ISeriesTheme, SeriesTypeEnum, SeriesTypeForThemeEnum } from '@visactor/vchart-types'; +import type { ISeriesTheme, SeriesTypeEnum, SeriesTypeForThemeEnum } from '@visactor/vchart'; export const area: Pick< ISeriesTheme, diff --git a/packages/vchart-theme/src/v-screen/common/series/bar.ts b/packages/vchart-theme/src/v-screen/common/series/bar.ts index 8f4a32e..616d4ec 100644 --- a/packages/vchart-theme/src/v-screen/common/series/bar.ts +++ b/packages/vchart-theme/src/v-screen/common/series/bar.ts @@ -1,4 +1,4 @@ -import type { ISeriesTheme, SeriesTypeEnum, SeriesTypeForThemeEnum } from '@visactor/vchart-types'; +import type { ISeriesTheme, SeriesTypeEnum, SeriesTypeForThemeEnum } from '@visactor/vchart'; export const bar: Pick< ISeriesTheme, diff --git a/share/chart-demo/package.json b/share/chart-demo/package.json index b31b6a5..a9a013d 100644 --- a/share/chart-demo/package.json +++ b/share/chart-demo/package.json @@ -26,7 +26,7 @@ }, "devDependencies": { "@visactor/vchart": "1.11.6", - "@visactor/vchart-types": "1.11.0", + "@visactor/vchart-types": "1.11.6", "@internal/bundler": "workspace:*", "@internal/eslint-config": "workspace:*", "@internal/ts-config": "workspace:*", From 1709317ecc3eb750506a1a4d76cb3673c496473c Mon Sep 17 00:00:00 2001 From: xiaoluoHe Date: Wed, 24 Jul 2024 17:06:06 +0800 Subject: [PATCH 14/16] chore: update bundle config & package.json --- .../vchart-theme-converter/bundler.config.js | 10 +++++-- packages/vchart-theme-converter/package.json | 29 ++++++++++++++----- 2 files changed, 30 insertions(+), 9 deletions(-) diff --git a/packages/vchart-theme-converter/bundler.config.js b/packages/vchart-theme-converter/bundler.config.js index d7f1972..3412cc8 100644 --- a/packages/vchart-theme-converter/bundler.config.js +++ b/packages/vchart-theme-converter/bundler.config.js @@ -1,7 +1,13 @@ - /** * @type {Partial} */ module.exports = { - formats: ["cjs", "es", "umd"], + formats: ['cjs', 'es', 'umd'], + outputDir: { + es: 'esm', + cjs: 'cjs', + umd: 'build' + }, + name: 'VChartThemeConverter', + umdOutputFilename: 'index' }; diff --git a/packages/vchart-theme-converter/package.json b/packages/vchart-theme-converter/package.json index 7cfde93..b2e9ea8 100644 --- a/packages/vchart-theme-converter/package.json +++ b/packages/vchart-theme-converter/package.json @@ -1,15 +1,15 @@ { "name": "@visactor/vchart-theme-converter", - "version": "0.0.1", - "description": "", + "version": "1.11.5", + "description": "VChart theme converter between popular visualization libraries", "sideEffects": false, "main": "cjs/index.js", - "module": "es/index.js", - "types": "es/index.d.ts", + "module": "esm/index.js", + "types": "esm/index.d.ts", "files": [ "cjs", - "es", - "dist" + "esm", + "build" ], "scripts": { "compile": "tsc --noEmit", @@ -94,5 +94,20 @@ "stylelint": "^14.1.0", "stylelint-config-prettier": "^9.0.3", "stylelint-config-standard": "^24.0.0" - } + }, + "publishConfig": { + "access": "public" + }, + "homepage": "https://www.visactor.io", + "bugs": "https://github.com/VisActor/vchart-theme/issues", + "repository": { + "type": "git", + "url": "https://github.com/VisActor/vchart-theme.git", + "directory": "packages/vchart-theme-converter" + }, + "author": { + "name": "VisActor", + "url": "https://www.visactor.io/" + }, + "license": "MIT" } From 65ae8f5e21ae657bf662c25f434302d7408b455d Mon Sep 17 00:00:00 2001 From: xiaoluoHe Date: Tue, 13 Aug 2024 16:03:33 +0800 Subject: [PATCH 15/16] fix: fix transform bug --- .../src/echarts/component/crosshair.ts | 2 +- .../vchart-theme-converter/src/echarts/series/line.ts | 5 ++++- .../src/echarts/seriesConverter.ts | 9 +++++---- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/vchart-theme-converter/src/echarts/component/crosshair.ts b/packages/vchart-theme-converter/src/echarts/component/crosshair.ts index dea5f1c..1d321cd 100644 --- a/packages/vchart-theme-converter/src/echarts/component/crosshair.ts +++ b/packages/vchart-theme-converter/src/echarts/component/crosshair.ts @@ -12,7 +12,7 @@ export function toEChartsAxisPointer(component: ITheme['component'], theme: IThe const axisPointerTheme = { type: 'shadow', trigger: 'axis', - show: true + z: 0 } as any; const { crosshair } = component; diff --git a/packages/vchart-theme-converter/src/echarts/series/line.ts b/packages/vchart-theme-converter/src/echarts/series/line.ts index 6a42a74..10b2955 100644 --- a/packages/vchart-theme-converter/src/echarts/series/line.ts +++ b/packages/vchart-theme-converter/src/echarts/series/line.ts @@ -35,7 +35,10 @@ export function toEChartsLine(lineSeries: ISeriesTheme['line'], theme: ITheme) { if (point) { const { style = {} } = point; - const itemStyle = convertToItemStyle(style, lineStyleMap, theme); + const itemStyle = convertToItemStyle(style, symbolStyleMap, theme); + // vchart 的空心点需要配置 color: 'white', stroke: 'auto' (示意)，直接转换到 echarts 会导致 fill 和 stroke 都是白色； + // echarts 的空心点与实心点，通过 symbolType 控制，无法根据主题识别；需要用户自己处理 + delete itemStyle.color; lineTheme.itemStyle = itemStyle; if ('symbolType' in style) { lineTheme.symbol = style.symbolType; diff --git a/packages/vchart-theme-converter/src/echarts/seriesConverter.ts b/packages/vchart-theme-converter/src/echarts/seriesConverter.ts index 4a8c741..047c789 100644 --- a/packages/vchart-theme-converter/src/echarts/seriesConverter.ts +++ b/packages/vchart-theme-converter/src/echarts/seriesConverter.ts @@ -33,10 +33,11 @@ export function convertSeries(series: ITheme['series'], theme: ITheme) { VCHART_SERIES_TYPES.forEach(type => { if (toEChartsConverter[type]) { if (type === 'area') { - if (!result.line) { - result.line = {}; - } - result.line = merge(result.line, toEChartsConverter[type](series[type], theme)); + // 暂不处理 area 系列配置，原因：echarts.line.areaStyle 一旦有默认值，折线图就会默认变成面积图 + // if (!result.line) { + // result.line = {}; + // } + // result.line = merge(result.line, toEChartsConverter[type](series[type], theme)); } else { // 这里后续可能存在问题：vchart series type 和 echarts series type 不一致 result[type] = merge(result[type] ?? {}, toEChartsConverter[type]((series as any)[type], theme)); From 6077ccc21b6b2902966bbf05f5c8162e01e835fa Mon Sep 17 00:00:00 2001 From: xiaoluoHe Date: Wed, 21 Aug 2024 11:18:32 +0800 Subject: [PATCH 16/16] feat: upgrade vchart version --- common/config/rush/pnpm-lock.yaml | 25 ++++++-------------- packages/vchart-theme-converter/package.json | 6 ++--- 2 files changed, 10 insertions(+), 21 deletions(-) diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index dc164e2..5f793cc 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -320,11 +320,11 @@ importers: '@types/react-dom': ^17.0.0 '@typescript-eslint/eslint-plugin': 5.30.0 '@typescript-eslint/parser': 5.30.0 - '@visactor/react-vchart': 1.11.0 - '@visactor/vchart': 1.11.6 + '@visactor/react-vchart': 1.12.1 + '@visactor/vchart': 1.12.1 '@visactor/vchart-semi-theme': workspace:1.11.5 '@visactor/vchart-theme': workspace:1.11.5 - '@visactor/vutils': ~0.18.9 + '@visactor/vutils': ~0.18.15 '@vitejs/plugin-react': ^4.1.1 '@vitejs/plugin-react-swc': ^3.4.1 classnames: ^2.3.1 @@ -368,14 +368,14 @@ importers: vite: ^4.5.0 vite-plugin-svgr: ^4.1.0 dependencies: - '@visactor/vutils': 0.18.9 + '@visactor/vutils': 0.18.15 devDependencies: '@arco-design/color': 0.4.0 '@arco-design/web-react': 2.61.2_42iwexueogtmu5amowprdpoisy '@arco-design/webpack-plugin': 1.7.0 '@arco-plugins/vite-plugin-svgr': 0.7.2_vite@4.5.3 '@arco-themes/react-arco-pro': 0.0.7_pa7uxehr42623f73endqjggywi - '@babel/runtime': 7.24.8 + '@babel/runtime': 7.25.0 '@esbuild-plugins/node-globals-polyfill': 0.1.1 '@esbuild-plugins/node-modules-polyfill': 0.1.4 '@internal/bundler': link:../../tools/bundler @@ -395,8 +395,8 @@ importers: '@types/react-dom': 17.0.25 '@typescript-eslint/eslint-plugin': 5.30.0_cow5zg7tx6c3eisi5a4ud5kwia '@typescript-eslint/parser': 5.30.0_vwud3sodsb5zxmzckoj7rdwdbq - '@visactor/react-vchart': 1.11.0_biqbaboplfbrettd7655fr4n2y - '@visactor/vchart': 1.11.6 + '@visactor/react-vchart': 1.12.1_biqbaboplfbrettd7655fr4n2y + '@visactor/vchart': 1.12.1 '@visactor/vchart-semi-theme': link:../vchart-semi-theme '@visactor/vchart-theme': link:../vchart-theme '@vitejs/plugin-react': 4.2.1_vite@4.5.3 @@ -3959,13 +3959,11 @@ packages: /@turf/helpers/6.5.0: resolution: {integrity: sha512-VbI1dV5bLFzohYYdgqwikdMVpe7pJ9X3E+dlr425wa2/sMJqYDhTO++ec38/pcPvPE6oD9WEEeU3Xu3gza+VPw==} - dev: true /@turf/invariant/6.5.0: resolution: {integrity: sha512-Wv8PRNCtPD31UVbdJE/KVAWKe7l6US+lJItRR/HOEW3eh+U/JwRCSUl/KZ7bmjM/C+zLNoreM2TU6OoLACs4eg==} dependencies: '@turf/helpers': 6.5.0 - dev: true /@turf/meta/3.14.0: resolution: {integrity: sha512-OtXqLQuR9hlQ/HkAF/OdzRea7E0eZK1ay8y8CBXkoO2R6v34CsDrWYLMSo0ZzMsaQDpKo76NPP2GGo+PyG1cSg==} @@ -4599,14 +4597,6 @@ packages: '@turf/helpers': 6.5.0 '@turf/invariant': 6.5.0 eventemitter3: 4.0.7 - dev: true - - /@visactor/vutils/0.18.9: - resolution: {integrity: sha512-+CPwBATTQUPtXQ0KVXFRz8SCwAY9m5aR9QmtsVqya+mgaay3moFaAPNTbdkLBuZM5ewRYVcv/3fsDxuH+NXfFg==} - dependencies: - '@turf/helpers': 6.5.0 - '@turf/invariant': 6.5.0 - eventemitter3: 4.0.7 /@vitejs/plugin-react-swc/3.6.0_vite@4.5.3: resolution: {integrity: sha512-XFRbsGgpGxGzEV5i5+vRiro1bwcIaZDIdBRP16qwm+jP68ue/S8FJTBEgOeojtVDYrbSua3XFp71kC8VJE6v+g==} @@ -6797,7 +6787,6 @@ packages: /eventemitter3/4.0.7: resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==} - dev: true /execa/4.1.0: resolution: {integrity: sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==} diff --git a/packages/vchart-theme-converter/package.json b/packages/vchart-theme-converter/package.json index b2e9ea8..95060a5 100644 --- a/packages/vchart-theme-converter/package.json +++ b/packages/vchart-theme-converter/package.json @@ -20,10 +20,11 @@ "prepublishOnly": "npm run build" }, "dependencies": { - "@visactor/vutils": "~0.18.9" + "@visactor/vutils": "~0.18.15" }, "devDependencies": { - "@visactor/vchart": "1.11.6", + "@visactor/vchart": "1.12.1", + "@visactor/react-vchart": "1.12.1", "@visactor/vchart-semi-theme": "workspace:1.11.5", "@visactor/vchart-theme": "workspace:1.11.5", "echarts": "5.5.0", @@ -74,7 +75,6 @@ "react-router-dom": "^5.2.0", "react-device-detect": "^2.2.2", "redux": "^4.1.2", - "@visactor/react-vchart": "1.11.0", "@arco-design/webpack-plugin": "^1.6.0", "@arco-plugins/vite-plugin-svgr": "^0.7.2", "@svgr/webpack": "^5.5.0",