diff --git a/common/changes/@visactor/vchart-aurora-theme/feat-aurora-theme_2026-01-26-10-02.json b/common/changes/@visactor/vchart-aurora-theme/feat-aurora-theme_2026-01-26-10-02.json new file mode 100644 index 0000000..169c01c --- /dev/null +++ b/common/changes/@visactor/vchart-aurora-theme/feat-aurora-theme_2026-01-26-10-02.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "feat: 新增vchart-aurora-theme主题包\n\n新增aurora主题包，包含完整的主题配置和示例代码\n\n", + "type": "none", + "packageName": "@visactor/vchart-aurora-theme" + } + ], + "packageName": "@visactor/vchart-aurora-theme", + "email": "yangxian.x@bytedance.com" +} \ No newline at end of file diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index 701ecc9..4d617b5 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -31,8 +31,8 @@ importers: '@types/react-dom': ^17.0.0 '@typescript-eslint/eslint-plugin': 5.30.0 '@typescript-eslint/parser': 5.30.0 - '@visactor/react-vchart': 1.12.1 - '@visactor/vchart': 1.12.1 + '@visactor/react-vchart': 2.0.19 + '@visactor/vchart': 2.0.19 '@visactor/vchart-theme-utils': workspace:1.12.3 '@vitejs/plugin-react': ^4.1.1 '@vitejs/plugin-react-swc': ^3.4.1 @@ -102,8 +102,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.12.1_biqbaboplfbrettd7655fr4n2y - '@visactor/vchart': 1.12.1 + '@visactor/react-vchart': 2.0.19_biqbaboplfbrettd7655fr4n2y + '@visactor/vchart': 2.0.19 '@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 @@ -146,6 +146,89 @@ importers: vite: 4.5.3_bby3wderf736tel7qp3evndmrm vite-plugin-svgr: 4.2.0_phsvvvlejkpjhjvgxznbnrvcoa + ../../packages/vchart-aurora-theme: + specifiers: + '@babel/runtime': latest + '@douyinfe/semi-icons': latest + '@douyinfe/semi-icons-lab': latest + '@douyinfe/semi-ui': ^2.51.3 + '@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 + '@rushstack/eslint-patch': ~1.1.4 + '@types/jest': ~29.5.0 + '@types/node': '*' + '@types/offscreencanvas': 2019.6.4 + '@visactor/react-vchart': 2.0.19 + '@visactor/vchart': 2.0.19 + '@visactor/vchart-theme-utils': workspace:1.12.3 + '@vitejs/plugin-react': ^4.1.1 + '@vitejs/plugin-react-swc': ^3.4.1 + eslint: ~8.18.0 + husky: 7.0.4 + jest: ~29.5.0 + lint-staged: 12.3.7 + magic-string: ^0.25.7 + prettier: 2.6.1 + react: ^18.0.0 + react-device-detect: ^2.2.2 + react-dom: ^18.0.0 + sass: ^1.63.6 + 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-theme-utils': link:../vchart-theme-utils + devDependencies: + '@babel/runtime': 7.28.6 + '@douyinfe/semi-icons': 2.92.2_react@18.2.0 + '@douyinfe/semi-icons-lab': 2.92.2_biqbaboplfbrettd7655fr4n2y + '@douyinfe/semi-ui': 2.55.5_biqbaboplfbrettd7655fr4n2y + '@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 + '@rushstack/eslint-patch': 1.1.4 + '@types/jest': 29.5.12 + '@types/node': 20.12.7 + '@types/offscreencanvas': 2019.6.4 + '@visactor/react-vchart': 2.0.19_biqbaboplfbrettd7655fr4n2y + '@visactor/vchart': 2.0.19 + '@vitejs/plugin-react': 4.2.1_vite@4.5.3 + '@vitejs/plugin-react-swc': 3.6.0_vite@4.5.3 + eslint: 8.18.0 + husky: 7.0.4 + jest: 29.5.0_nfgaym6ygctcxvhgdn7jfhc2pq + lint-staged: 12.3.7 + magic-string: 0.25.9 + prettier: 2.6.1 + react: 18.2.0 + react-device-detect: 2.2.3_biqbaboplfbrettd7655fr4n2y + react-dom: 18.2.0_react@18.2.0 + sass: 1.98.0 + 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_drwgbx6kncedk3tgksguhmevgq + vite-plugin-svgr: 4.2.0_phsvvvlejkpjhjvgxznbnrvcoa + ../../packages/vchart-semi-theme: specifiers: '@babel/runtime': latest @@ -164,8 +247,8 @@ importers: '@types/jest': ~29.5.0 '@types/node': '*' '@types/offscreencanvas': 2019.6.4 - '@visactor/react-vchart': 1.12.1 - '@visactor/vchart': 1.12.1 + '@visactor/react-vchart': 2.0.19 + '@visactor/vchart': 2.0.19 '@visactor/vchart-theme-utils': workspace:1.12.3 '@vitejs/plugin-react': ^4.1.1 '@vitejs/plugin-react-swc': ^3.4.1 @@ -190,8 +273,8 @@ importers: '@visactor/vchart-theme-utils': link:../vchart-theme-utils devDependencies: '@babel/runtime': 7.28.6 - '@douyinfe/semi-icons': 2.90.13_react@18.2.0 - '@douyinfe/semi-icons-lab': 2.90.13_biqbaboplfbrettd7655fr4n2y + '@douyinfe/semi-icons': 2.92.2_react@18.2.0 + '@douyinfe/semi-icons-lab': 2.92.2_biqbaboplfbrettd7655fr4n2y '@douyinfe/semi-ui': 2.55.5_biqbaboplfbrettd7655fr4n2y '@esbuild-plugins/node-globals-polyfill': 0.1.1 '@esbuild-plugins/node-modules-polyfill': 0.1.4 @@ -205,8 +288,8 @@ importers: '@types/jest': 29.5.12 '@types/node': 20.12.7 '@types/offscreencanvas': 2019.6.4 - '@visactor/react-vchart': 1.12.1_biqbaboplfbrettd7655fr4n2y - '@visactor/vchart': 1.12.1 + '@visactor/react-vchart': 2.0.19_biqbaboplfbrettd7655fr4n2y + '@visactor/vchart': 2.0.19 '@vitejs/plugin-react': 4.2.1_vite@4.5.3 '@vitejs/plugin-react-swc': 3.6.0_vite@4.5.3 eslint: 8.18.0 @@ -239,11 +322,11 @@ importers: '@types/jest': ~29.5.0 '@types/node': '*' '@types/offscreencanvas': 2019.6.4 - '@visactor/vchart': 1.12.1 + '@visactor/vchart': 2.0.19 '@visactor/vchart-arco-theme': workspace:1.12.3 '@visactor/vchart-semi-theme': workspace:1.12.3 '@visactor/vchart-tt-platform-theme': workspace:1.12.3 - '@visactor/vchart-types': 1.12.1 + '@visactor/vchart-types': 2.0.19 '@visactor/vchart-ve-o-theme': workspace:1.12.3 eslint: ~8.18.0 husky: 7.0.4 @@ -271,11 +354,11 @@ importers: '@types/jest': 29.5.12 '@types/node': 20.12.7 '@types/offscreencanvas': 2019.6.4 - '@visactor/vchart': 1.12.1 + '@visactor/vchart': 2.0.19 '@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.12.1 + '@visactor/vchart-types': 2.0.19 '@visactor/vchart-ve-o-theme': link:../vchart-ve-o-theme eslint: 8.18.0 husky: 7.0.4 @@ -320,8 +403,8 @@ importers: '@types/react-dom': ^17.0.0 '@typescript-eslint/eslint-plugin': 5.30.0 '@typescript-eslint/parser': 5.30.0 - '@visactor/react-vchart': 1.12.1 - '@visactor/vchart': 1.12.1 + '@visactor/react-vchart': 2.0.19 + '@visactor/vchart': 2.0.19 '@visactor/vchart-semi-theme': workspace:1.12.3 '@visactor/vchart-theme': workspace:1.12.3 '@visactor/vutils': ~0.18.15 @@ -395,8 +478,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.12.1_biqbaboplfbrettd7655fr4n2y - '@visactor/vchart': 1.12.1 + '@visactor/react-vchart': 2.0.19_biqbaboplfbrettd7655fr4n2y + '@visactor/vchart': 2.0.19 '@visactor/vchart-semi-theme': link:../vchart-semi-theme '@visactor/vchart-theme': link:../vchart-theme '@vitejs/plugin-react': 4.2.1_vite@4.5.3 @@ -458,8 +541,8 @@ importers: '@types/offscreencanvas': 2019.6.4 '@types/react': ^17.0.0 '@types/react-dom': ^17.0.0 - '@visactor/react-vchart': 1.12.1 - '@visactor/vchart': 1.12.1 + '@visactor/react-vchart': 2.0.19 + '@visactor/vchart': 2.0.19 '@visactor/vchart-theme': workspace:1.12.3 '@visactor/vchart-theme-utils': workspace:1.12.3 '@vitejs/plugin-react': ^4.1.1 @@ -471,8 +554,8 @@ importers: vite: ^4.5.0 dependencies: '@arco-design/web-react': 2.61.2_42iwexueogtmu5amowprdpoisy - '@douyinfe/semi-icons': 2.90.13_react@18.2.0 - '@douyinfe/semi-icons-lab': 2.90.13_biqbaboplfbrettd7655fr4n2y + '@douyinfe/semi-icons': 2.92.2_react@18.2.0 + '@douyinfe/semi-icons-lab': 2.92.2_biqbaboplfbrettd7655fr4n2y '@douyinfe/semi-ui': 2.55.5_biqbaboplfbrettd7655fr4n2y '@visactor/vchart-theme': link:../vchart-theme '@visactor/vchart-theme-utils': link:../vchart-theme-utils @@ -487,8 +570,8 @@ importers: '@types/offscreencanvas': 2019.6.4 '@types/react': 17.0.80 '@types/react-dom': 17.0.25 - '@visactor/react-vchart': 1.12.1_biqbaboplfbrettd7655fr4n2y - '@visactor/vchart': 1.12.1 + '@visactor/react-vchart': 2.0.19_biqbaboplfbrettd7655fr4n2y + '@visactor/vchart': 2.0.19 '@vitejs/plugin-react': 4.2.1_vite@4.5.3 eslint: 8.18.0 react: 18.2.0 @@ -508,8 +591,8 @@ importers: '@types/jest': ~29.5.0 '@types/node': '*' '@types/offscreencanvas': 2019.6.4 - '@visactor/vchart': 1.12.1 - '@visactor/vchart-types': 1.12.1 + '@visactor/vchart': 2.0.19 + '@visactor/vchart-types': 2.0.19 eslint: ~8.18.0 husky: 7.0.4 jest: ~29.5.0 @@ -535,8 +618,8 @@ importers: '@types/jest': 29.5.12 '@types/node': 20.12.7 '@types/offscreencanvas': 2019.6.4 - '@visactor/vchart': 1.12.1 - '@visactor/vchart-types': 1.12.1 + '@visactor/vchart': 2.0.19 + '@visactor/vchart-types': 2.0.19 eslint: 8.18.0 husky: 7.0.4 jest: 29.5.0_nfgaym6ygctcxvhgdn7jfhc2pq @@ -572,8 +655,8 @@ importers: '@types/jest': ~29.5.0 '@types/node': '*' '@types/offscreencanvas': 2019.6.4 - '@visactor/react-vchart': 1.12.1 - '@visactor/vchart': 1.12.1 + '@visactor/react-vchart': 2.0.19 + '@visactor/vchart': 2.0.19 '@visactor/vchart-semi-theme': workspace:1.12.3 '@visactor/vchart-theme-utils': workspace:1.12.3 '@vitejs/plugin-react': ^4.1.1 @@ -601,8 +684,8 @@ importers: '@visactor/vchart-theme-utils': link:../vchart-theme-utils devDependencies: '@babel/runtime': 7.28.6 - '@douyinfe/semi-icons': 2.90.13_react@18.2.0 - '@douyinfe/semi-icons-lab': 2.90.13_biqbaboplfbrettd7655fr4n2y + '@douyinfe/semi-icons': 2.92.2_react@18.2.0 + '@douyinfe/semi-icons-lab': 2.92.2_biqbaboplfbrettd7655fr4n2y '@douyinfe/semi-ui': 2.55.5_biqbaboplfbrettd7655fr4n2y '@esbuild-plugins/node-globals-polyfill': 0.1.1 '@esbuild-plugins/node-modules-polyfill': 0.1.4 @@ -617,8 +700,8 @@ importers: '@types/jest': 29.5.12 '@types/node': 20.12.7 '@types/offscreencanvas': 2019.6.4 - '@visactor/react-vchart': 1.12.1_biqbaboplfbrettd7655fr4n2y - '@visactor/vchart': 1.12.1 + '@visactor/react-vchart': 2.0.19_biqbaboplfbrettd7655fr4n2y + '@visactor/vchart': 2.0.19 '@vitejs/plugin-react': 4.2.1_vite@4.5.3 '@vitejs/plugin-react-swc': 3.6.0_vite@4.5.3 eslint: 8.18.0 @@ -666,8 +749,8 @@ importers: '@types/react-dom': ^17.0.0 '@typescript-eslint/eslint-plugin': 5.30.0 '@typescript-eslint/parser': 5.30.0 - '@visactor/react-vchart': 1.12.1 - '@visactor/vchart': 1.12.1 + '@visactor/react-vchart': 2.0.19 + '@visactor/vchart': 2.0.19 '@visactor/vchart-arco-theme': workspace:1.12.3 '@visactor/vchart-theme-utils': workspace:1.12.3 '@vitejs/plugin-react': ^4.1.1 @@ -735,8 +818,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.12.1_biqbaboplfbrettd7655fr4n2y - '@visactor/vchart': 1.12.1 + '@visactor/react-vchart': 2.0.19_biqbaboplfbrettd7655fr4n2y + '@visactor/vchart': 2.0.19 '@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 @@ -786,8 +869,8 @@ importers: '@types/jest': ~29.5.0 '@types/node': '*' '@types/offscreencanvas': 2019.6.4 - '@visactor/vchart': 1.12.1 - '@visactor/vchart-types': 1.12.1 + '@visactor/vchart': 2.0.19 + '@visactor/vchart-types': 2.0.19 eslint: ~8.18.0 husky: 7.0.4 jest: ~29.5.0 @@ -811,8 +894,8 @@ importers: '@types/jest': 29.5.12 '@types/node': 20.12.7 '@types/offscreencanvas': 2019.6.4 - '@visactor/vchart': 1.12.1 - '@visactor/vchart-types': 1.12.1 + '@visactor/vchart': 2.0.19 + '@visactor/vchart-types': 2.0.19 eslint: 8.18.0 husky: 7.0.4 jest: 29.5.0_nfgaym6ygctcxvhgdn7jfhc2pq @@ -2404,8 +2487,8 @@ packages: memoize-one: 5.2.1 scroll-into-view-if-needed: 2.2.31 - /@douyinfe/semi-icons-lab/2.90.13_biqbaboplfbrettd7655fr4n2y: - resolution: {integrity: sha512-/3ihlPM1F2XHB4IucYDyDkkZVQ5h43bSJksAwnnMwiDRCiwvfk1vMPruwWdJ6tFoIBANYo/qjyZHv1MwNH/Gmg==} + /@douyinfe/semi-icons-lab/2.92.2_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-fji8IsmaktOYztG2HSezObFgejz7WEBWT/X52jj48k8Mz3cOJxD6vZyzmttfvpQPKH2/G0KpmxbkQ3cNHOiHFQ==} peerDependencies: react: '>=16.0.0' react-dom: '>=16.0.0' @@ -2421,8 +2504,8 @@ packages: classnames: 2.5.1 react: 18.2.0 - /@douyinfe/semi-icons/2.90.13_react@18.2.0: - resolution: {integrity: sha512-9OiKvleOMB+t0h+Vbq/6Tz90JJPANJDvW5g3XtVWmIwIgScgy/N52fMhWXDf6Avr6wi9MDPcQZ6SYPO2S7m4sQ==} + /@douyinfe/semi-icons/2.92.2_react@18.2.0: + resolution: {integrity: sha512-+fgK2Oe2+uokQZnrd+rHgksmfvDVvqT1fhbl49qJlDsg/xaXRxI2LOQRqBI+x0sOKabGKem+P3lY24Jgd/IGnQ==} peerDependencies: react: '>=16.0.0' dependencies: @@ -3112,6 +3195,149 @@ packages: rimraf: 3.0.2 dev: true + /@parcel/watcher-android-arm64/2.5.6: + resolution: {integrity: sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==} + engines: {node: '>= 10.0.0'} + cpu: [arm64] + os: [android] + requiresBuild: true + dev: true + optional: true + + /@parcel/watcher-darwin-arm64/2.5.6: + resolution: {integrity: sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==} + engines: {node: '>= 10.0.0'} + cpu: [arm64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + + /@parcel/watcher-darwin-x64/2.5.6: + resolution: {integrity: sha512-HgvOf3W9dhithcwOWX9uDZyn1lW9R+7tPZ4sug+NGrGIo4Rk1hAXLEbcH1TQSqxts0NYXXlOWqVpvS1SFS4fRg==} + engines: {node: '>= 10.0.0'} + cpu: [x64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + + /@parcel/watcher-freebsd-x64/2.5.6: + resolution: {integrity: sha512-vJVi8yd/qzJxEKHkeemh7w3YAn6RJCtYlE4HPMoVnCpIXEzSrxErBW5SJBgKLbXU3WdIpkjBTeUNtyBVn8TRng==} + engines: {node: '>= 10.0.0'} + cpu: [x64] + os: [freebsd] + requiresBuild: true + dev: true + optional: true + + /@parcel/watcher-linux-arm-glibc/2.5.6: + resolution: {integrity: sha512-9JiYfB6h6BgV50CCfasfLf/uvOcJskMSwcdH1PHH9rvS1IrNy8zad6IUVPVUfmXr+u+Km9IxcfMLzgdOudz9EQ==} + engines: {node: '>= 10.0.0'} + cpu: [arm] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@parcel/watcher-linux-arm-musl/2.5.6: + resolution: {integrity: sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==} + engines: {node: '>= 10.0.0'} + cpu: [arm] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@parcel/watcher-linux-arm64-glibc/2.5.6: + resolution: {integrity: sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==} + engines: {node: '>= 10.0.0'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@parcel/watcher-linux-arm64-musl/2.5.6: + resolution: {integrity: sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==} + engines: {node: '>= 10.0.0'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@parcel/watcher-linux-x64-glibc/2.5.6: + resolution: {integrity: sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==} + engines: {node: '>= 10.0.0'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@parcel/watcher-linux-x64-musl/2.5.6: + resolution: {integrity: sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==} + engines: {node: '>= 10.0.0'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@parcel/watcher-win32-arm64/2.5.6: + resolution: {integrity: sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==} + engines: {node: '>= 10.0.0'} + cpu: [arm64] + os: [win32] + requiresBuild: true + dev: true + optional: true + + /@parcel/watcher-win32-ia32/2.5.6: + resolution: {integrity: sha512-k35yLp1ZMwwee3Ez/pxBi5cf4AoBKYXj00CZ80jUz5h8prpiaQsiRPKQMxoLstNuqe2vR4RNPEAEcjEFzhEz/g==} + engines: {node: '>= 10.0.0'} + cpu: [ia32] + os: [win32] + requiresBuild: true + dev: true + optional: true + + /@parcel/watcher-win32-x64/2.5.6: + resolution: {integrity: sha512-hbQlYcCq5dlAX9Qx+kFb0FHue6vbjlf0FrNzSKdYK2APUf7tGfGxQCk2ihEREmbR6ZMc0MVAD5RIX/41gpUzTw==} + engines: {node: '>= 10.0.0'} + cpu: [x64] + os: [win32] + requiresBuild: true + dev: true + optional: true + + /@parcel/watcher/2.5.6: + resolution: {integrity: sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==} + engines: {node: '>= 10.0.0'} + requiresBuild: true + dependencies: + detect-libc: 2.1.2 + is-glob: 4.0.3 + node-addon-api: 7.1.1 + picomatch: 4.0.3 + optionalDependencies: + '@parcel/watcher-android-arm64': 2.5.6 + '@parcel/watcher-darwin-arm64': 2.5.6 + '@parcel/watcher-darwin-x64': 2.5.6 + '@parcel/watcher-freebsd-x64': 2.5.6 + '@parcel/watcher-linux-arm-glibc': 2.5.6 + '@parcel/watcher-linux-arm-musl': 2.5.6 + '@parcel/watcher-linux-arm64-glibc': 2.5.6 + '@parcel/watcher-linux-arm64-musl': 2.5.6 + '@parcel/watcher-linux-x64-glibc': 2.5.6 + '@parcel/watcher-linux-x64-musl': 2.5.6 + '@parcel/watcher-win32-arm64': 2.5.6 + '@parcel/watcher-win32-ia32': 2.5.6 + '@parcel/watcher-win32-x64': 2.5.6 + dev: true + optional: true + /@resvg/resvg-js-android-arm-eabi/2.4.1: resolution: {integrity: sha512-AA6f7hS0FAPpvQMhBCf6f1oD1LdlqNXKCxAAPpKh6tR11kqV0YIB9zOlIYgITM14mq2YooLFl6XIbbvmY+jwUw==} engines: {node: '>= 10'} @@ -4402,53 +4628,60 @@ packages: '@typescript-eslint/types': 5.30.0 eslint-visitor-keys: 3.4.3 - /@visactor/react-vchart/1.12.1_biqbaboplfbrettd7655fr4n2y: - resolution: {integrity: sha512-nQLsj6zQf/a6cClABbGKgwFYTSqFJ7ZWBAt0YjePEBHI8xERsVpD2lgEYXFqkA822QIFGv9wk82NeJXRkT8oJA==} + /@visactor/react-vchart/2.0.19_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-gLEJ8Q6DhI21xX6PDUEmhSUu4Ft8+Foho7TktiMMX6Nll5RYgXagjtjRAI1kSSKm6t/7ZXbBsmP4RdL+KaGtNA==} peerDependencies: react: '>=16.0.0' react-dom: '>=16.0.0' dependencies: - '@visactor/vchart': 1.12.1 - '@visactor/vgrammar-core': 0.14.0 - '@visactor/vrender-core': 0.20.0 - '@visactor/vrender-kits': 0.20.0 - '@visactor/vutils': 0.18.15 + '@visactor/vchart': 2.0.19 + '@visactor/vchart-extension': 2.0.19 + '@visactor/vrender-core': 1.0.41 + '@visactor/vrender-kits': 1.0.41 + '@visactor/vutils': 1.0.23 react: 18.2.0 react-dom: 18.2.0_react@18.2.0 react-is: 18.2.0 dev: true - /@visactor/vchart-types/1.12.1: - resolution: {integrity: sha512-jr6yw2kYFVbxAWPT3G50ZykXGm3//NMG0KhVFE7g6/VPDFIhb8HAAVkb5g/taybOxSAVbCZ3yHUbbe2ZhhBWgA==} + /@visactor/vchart-extension/2.0.19: + resolution: {integrity: sha512-SCFysGMRGdNK6wYFKDrvZzGdYbVjGhdbqlWA5t2fdbuVcCN7wNBTDKI+pL4yUL3n9M1ZtVxQp5uOw9I0AjFHZQ==} + dependencies: + '@visactor/vchart': 2.0.19 + '@visactor/vdataset': 1.0.23 + '@visactor/vlayouts': 1.0.23 + '@visactor/vrender-animate': 1.0.41 + '@visactor/vrender-components': 1.0.41 + '@visactor/vrender-core': 1.0.41 + '@visactor/vrender-kits': 1.0.41 + '@visactor/vutils': 1.0.23 + dev: true + + /@visactor/vchart-types/2.0.19: + resolution: {integrity: sha512-G3MaSthmlDPzcTMN/XlqPSzihDneh6lXZZ3MAqEUeamvoOSHPJPAcwe7PFE4tOFwthAgM43j+W3d2sbtujkzOg==} dev: true - /@visactor/vchart/1.12.1: - resolution: {integrity: sha512-/MSNRN2+gL8lgmXw3IQw9oG2ORxp1Kehvd4p4W95yd8EK6CVwYMRqredT84J3kr4jOtpK2a3ylsWNMUNFk8CrQ==} + /@visactor/vchart/2.0.19: + resolution: {integrity: sha512-pPNAHUuNlw1FNgbSSwT9comeJUXpaTAe8yed1MVI5rT+TspIg9Wpio29ZlUjrevUxosQqka5VAD63jQS6PMaOg==} dependencies: - '@visactor/vdataset': 0.18.15 - '@visactor/vgrammar-core': 0.14.0 - '@visactor/vgrammar-hierarchy': 0.14.0 - '@visactor/vgrammar-projection': 0.14.0 - '@visactor/vgrammar-sankey': 0.14.0 - '@visactor/vgrammar-util': 0.14.0 - '@visactor/vgrammar-venn': 0.14.0 - '@visactor/vgrammar-wordcloud': 0.14.0 - '@visactor/vgrammar-wordcloud-shape': 0.14.0 - '@visactor/vrender-components': 0.20.0 - '@visactor/vrender-core': 0.20.0 - '@visactor/vrender-kits': 0.20.0 - '@visactor/vscale': 0.18.15 - '@visactor/vutils': 0.18.15 - '@visactor/vutils-extension': 1.12.1 + '@visactor/vdataset': 1.0.23 + '@visactor/vlayouts': 1.0.23 + '@visactor/vrender-animate': 1.0.41 + '@visactor/vrender-components': 1.0.41 + '@visactor/vrender-core': 1.0.41 + '@visactor/vrender-kits': 1.0.41 + '@visactor/vscale': 1.0.23 + '@visactor/vutils': 1.0.23 + '@visactor/vutils-extension': 2.0.19 dev: true - /@visactor/vdataset/0.18.15: - resolution: {integrity: sha512-LWaaunGetH8ThWjz6CE7NMG/LcFS41lTl76UCNJM1msfQxyIsbtoHim7t+Hdvud76oRZM0rxX/V4iB/+JpMRfw==} + /@visactor/vdataset/1.0.23: + resolution: {integrity: sha512-zrLk9FBUWJoW6b30XnPKzXwAXl8USdLDfed6QZLsmdkylRU8V7yZeXE2aKwU8Lg1U4HmQngqmqOx7/QlbX44Tg==} dependencies: '@turf/flatten': 6.5.0 '@turf/helpers': 6.5.0 '@turf/rewind': 6.5.0 - '@visactor/vutils': 0.18.15 + '@visactor/vutils': 1.0.23 d3-dsv: 2.0.0 d3-geo: 1.12.1 d3-hexbin: 0.2.2 @@ -4464,129 +4697,62 @@ packages: topojson-client: 3.1.0 dev: true - /@visactor/vgrammar-coordinate/0.14.0: - resolution: {integrity: sha512-9ZxQ0BQmcxi70Bl5oHRe2xd4UVPTbjdHhyQOIT1l4X6fVUwyIf2nRibQILHOlQj+KN8AhrdQIuYp1rD6khecpg==} - dependencies: - '@visactor/vgrammar-util': 0.14.0 - '@visactor/vutils': 0.18.15 - dev: true - - /@visactor/vgrammar-core/0.14.0: - resolution: {integrity: sha512-VZu/9cPkjrG6xVx4KeV5zJpEYKfqMR4vov3nIKqgXgIuKgqLcVSrsFsthoYu9qi8xCbPtgZSFI2yo0qiB9wN3g==} - dependencies: - '@visactor/vdataset': 0.18.15 - '@visactor/vgrammar-coordinate': 0.14.0 - '@visactor/vgrammar-util': 0.14.0 - '@visactor/vrender-components': 0.20.0 - '@visactor/vrender-core': 0.20.0 - '@visactor/vrender-kits': 0.20.0 - '@visactor/vscale': 0.18.15 - '@visactor/vutils': 0.18.15 - dev: true - - /@visactor/vgrammar-hierarchy/0.14.0: - resolution: {integrity: sha512-Tme/aCx3m+tKcUu5X5BJLqc654YzNXpCc29s6T97DEev1PCvyGeTf/lvBUirnfSBkgoCbrfDZVpK/zOAUtrC0g==} - dependencies: - '@visactor/vgrammar-core': 0.14.0 - '@visactor/vgrammar-util': 0.14.0 - '@visactor/vrender-core': 0.20.0 - '@visactor/vrender-kits': 0.20.0 - '@visactor/vutils': 0.18.15 - dev: true - - /@visactor/vgrammar-projection/0.14.0: - resolution: {integrity: sha512-/Y1ffjMl1j8X7TXHrni9IBQJkL7q1yzVaFILhXUjY3NnYXWuDGJKEgK1BX3KbJhZzGLjDLeRVATvSYN1pzkO4A==} - dependencies: - '@visactor/vgrammar-core': 0.14.0 - '@visactor/vgrammar-util': 0.14.0 - '@visactor/vutils': 0.18.15 - d3-geo: 1.12.1 - dev: true - - /@visactor/vgrammar-sankey/0.14.0: - resolution: {integrity: sha512-VVnmi7znTYnDQNAxW0stK14LSVFKSQe/flnavkVds91tgtT5+RBLE09Vqz9eH45n23nxHEfwrWA4sHiWfQ8mLg==} + /@visactor/vlayouts/1.0.23: + resolution: {integrity: sha512-fK1f5LmuumhYanLArk5yrT4BZxu4IAmdc8WMwfB/KAvV+2dTPFuBUMWbWnDl0siQoU9SX9l/bLozUnI9n7BwBQ==} dependencies: - '@visactor/vgrammar-core': 0.14.0 - '@visactor/vgrammar-util': 0.14.0 - '@visactor/vrender-core': 0.20.0 - '@visactor/vrender-kits': 0.20.0 - '@visactor/vutils': 0.18.15 - dev: true - - /@visactor/vgrammar-util/0.14.0: - resolution: {integrity: sha512-h838qgT6IFHYtugTf7sC+rRvz2aU/W0EEnXX/cEeyvMAkuBgdC0Jq6vmGYAbmm+hwbhUREC5QvxudwSEEKCelg==} - dependencies: - '@visactor/vrender-core': 0.20.0 - '@visactor/vutils': 0.18.15 - dev: true - - /@visactor/vgrammar-venn/0.14.0: - resolution: {integrity: sha512-l8w802GiSs3oRhn9lvt5YERyQwvgaCHXlOMU26tQqssrR0u6tbdH0Q+crqL6jzLktwzVVfbVPRC3q1pBQU6geQ==} - dependencies: - '@visactor/vgrammar-core': 0.14.0 - '@visactor/vgrammar-util': 0.14.0 - '@visactor/vrender-core': 0.20.0 - '@visactor/vrender-kits': 0.20.0 - '@visactor/vutils': 0.18.15 - dev: true - - /@visactor/vgrammar-wordcloud-shape/0.14.0: - resolution: {integrity: sha512-gDMTVaryB37uTZSXYpf0Zih894lHVJQRrPZYSiHvu5Jj9FZcisqBU+G8Q1Lo4WZJVhfWvCeuv9tYHtR9Gvuw3A==} - dependencies: - '@visactor/vgrammar-core': 0.14.0 - '@visactor/vgrammar-util': 0.14.0 - '@visactor/vrender-core': 0.20.0 - '@visactor/vrender-kits': 0.20.0 - '@visactor/vscale': 0.18.15 - '@visactor/vutils': 0.18.15 + '@turf/helpers': 6.5.0 + '@turf/invariant': 6.5.0 + '@visactor/vscale': 1.0.23 + '@visactor/vutils': 1.0.23 + eventemitter3: 4.0.7 dev: true - /@visactor/vgrammar-wordcloud/0.14.0: - resolution: {integrity: sha512-NYzNS9vKuZJJUvqshxA88ScH7fB57tdO/wvtBYTDwRp249xqK/uzrAtaOgzNj4bJ5vwu//R+i5hYOjzdQABebw==} + /@visactor/vrender-animate/1.0.41: + resolution: {integrity: sha512-kdMoIh7OEo6z4rZfnJHX7d+izBhGVWq6MR22uppk0LPilfdBd/1hSNAEKO6C9JWAy5uROGFpEkh+kk+ar/zSZg==} dependencies: - '@visactor/vgrammar-core': 0.14.0 - '@visactor/vgrammar-util': 0.14.0 - '@visactor/vrender-core': 0.20.0 - '@visactor/vrender-kits': 0.20.0 - '@visactor/vutils': 0.18.15 + '@visactor/vrender-core': 1.0.41 + '@visactor/vutils': 1.0.23 dev: true - /@visactor/vrender-components/0.20.0: - resolution: {integrity: sha512-nZUtFF1Kg8xjDGGIVeBdAOjxWW+jibUV4ltF1G/Z4GaHYUzpYfifWVrPBpo4BFIjaeICaSit2nKvntXhEUzj2w==} + /@visactor/vrender-components/1.0.41: + resolution: {integrity: sha512-B7iXJE1TdkYapPZN6DNxoaErY4FzGf5AbcbG/z6Q0hnzO4Iw1hKdtlTGOIYA1+JXhehDWcyy+D0bnoNQNf+rgw==} dependencies: - '@visactor/vrender-core': 0.20.0 - '@visactor/vrender-kits': 0.20.0 - '@visactor/vscale': 0.18.15 - '@visactor/vutils': 0.18.15 + '@visactor/vrender-animate': 1.0.41 + '@visactor/vrender-core': 1.0.41 + '@visactor/vrender-kits': 1.0.41 + '@visactor/vscale': 1.0.23 + '@visactor/vutils': 1.0.23 dev: true - /@visactor/vrender-core/0.20.0: - resolution: {integrity: sha512-P6Ata06lmVlLu23usSFluILuyxhMydRIgPW5o0zzK/EASstirRdWEx4EghZmobg3XPoipzh0/8O8ddBBtzaflg==} + /@visactor/vrender-core/1.0.41: + resolution: {integrity: sha512-P7YVUJ45vwqPA460W6JJjg201ThvxBrjEgTBJ4tHKaHZPP/nVyF8rPyUOCL8QesEFDB+R0e/sUJUVs+ckHhd2w==} dependencies: - '@visactor/vutils': 0.18.15 + '@visactor/vutils': 1.0.23 color-convert: 2.0.1 dev: true - /@visactor/vrender-kits/0.20.0: - resolution: {integrity: sha512-9r7XQdLoNfCtr+QQU0JpghDXQ7DOaa3CnvJmXrSn1gonkeDmUmTN9yDs8L2URdYEpXrThPUMJsVy/N3Tp3cqCA==} + /@visactor/vrender-kits/1.0.41: + resolution: {integrity: sha512-ffJlKkNseOsnRjvBmxKxQ9dsQXu+K288NFCtB0ZZ2N/mtcTsZUlH5SDCcsAvDhPGEvJ22Ye4MFKcXSEDctpGzA==} dependencies: '@resvg/resvg-js': 2.4.1 - '@visactor/vrender-core': 0.20.0 - '@visactor/vutils': 0.18.15 - roughjs: 4.5.2 + '@visactor/vrender-core': 1.0.41 + '@visactor/vutils': 1.0.23 + gifuct-js: 2.1.2 + lottie-web: 5.13.0 + roughjs: 4.6.6 dev: true - /@visactor/vscale/0.18.15: - resolution: {integrity: sha512-09dDWc6muJbOMxzp4odCsyLjqAF6u3BOx9kAJJ0tEpKE1AuHL4BTejNe697mJAnXqAo2ynAA+dn+cgWYiW1WQg==} + /@visactor/vscale/1.0.23: + resolution: {integrity: sha512-XePhYuRoNAp+8MeSMuEOOvhVAlOwvM1sDT2yFxE6zdwVB2GjZk8mH+5N2xQGQWk75YmGJjlJASFtgwjlb1yWxw==} dependencies: - '@visactor/vutils': 0.18.15 + '@visactor/vutils': 1.0.23 dev: true - /@visactor/vutils-extension/1.12.1: - resolution: {integrity: sha512-4UcTDdlgkCpDNUxO+U1OMWWqkxhYNS9UF8qR3xBC3x5z7Mu2c8ppM7oZDujnTeJEoG7+JKpOIpX/el3pFFh8Rg==} + /@visactor/vutils-extension/2.0.19: + resolution: {integrity: sha512-uRYCZFw7bYFdrSPQNIrYYsEGKuVn7lTMd4zDKBA2qnAfAZ/Y4WeXzZhQKdXgTFu5UGa292CqmVqMlVKFNWjC+A==} dependencies: - '@visactor/vdataset': 0.18.15 - '@visactor/vutils': 0.18.15 + '@visactor/vdataset': 1.0.23 + '@visactor/vutils': 1.0.23 dev: true /@visactor/vutils/0.18.15: @@ -4595,6 +4761,15 @@ packages: '@turf/helpers': 6.5.0 '@turf/invariant': 6.5.0 eventemitter3: 4.0.7 + dev: false + + /@visactor/vutils/1.0.23: + resolution: {integrity: sha512-M8SLqgdHhKN8QmQKTWD1gzEaHptpIV9pvMYvC6+VeOsqYvZZ6UdhSCAAczTYVo+m/uwcEC2JHSUspbrs8rzlRQ==} + dependencies: + '@turf/helpers': 6.5.0 + '@turf/invariant': 6.5.0 + eventemitter3: 4.0.7 + dev: true /@vitejs/plugin-react-swc/3.6.0_vite@4.5.3: resolution: {integrity: sha512-XFRbsGgpGxGzEV5i5+vRiro1bwcIaZDIdBRP16qwm+jP68ue/S8FJTBEgOeojtVDYrbSua3XFp71kC8VJE6v+g==} @@ -5556,6 +5731,13 @@ packages: fsevents: 2.3.3 dev: true + /chokidar/4.0.3: + resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==} + engines: {node: '>= 14.16.0'} + dependencies: + readdirp: 4.1.2 + dev: true + /chownr/2.0.0: resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==} engines: {node: '>=10'} @@ -6211,6 +6393,12 @@ packages: engines: {node: '>=0.10.0'} dev: false + /detect-libc/2.1.2: + resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==} + engines: {node: '>=8'} + dev: true + optional: true + /detect-newline/2.1.0: resolution: {integrity: sha512-CwffZFvlJffUg9zZA0uqrjQayUTC8ob94pnr5sFwaVv3IOmkfUHcWH+jXaQK3askE51Cqe8/9Ql/0uXNwqZ8Zg==} engines: {node: '>=0.10.0'} @@ -7276,6 +7464,12 @@ packages: engines: {node: '>=0.10.0'} dev: false + /gifuct-js/2.1.2: + resolution: {integrity: sha512-rI2asw77u0mGgwhV3qA+OEgYqaDn5UNqgs+Bx0FGwSpuqfYn+Ir6RQY5ENNQ8SbIiG/m5gVa7CD5RriO4f4Lsg==} + dependencies: + js-binary-schema-parser: 2.0.3 + dev: true + /glob-parent/3.1.0: resolution: {integrity: sha512-E8Ak/2+dZY6fnzlR7+ueWvhsH1SjHr4jjss4YS/h4py44jY9MhK/VFdaZJAWDz6BbL21KeteKxFSFpq8OS5gVA==} dependencies: @@ -7326,17 +7520,19 @@ packages: /glob/7.1.7: resolution: {integrity: sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==} + deprecated: Glob versions prior to v9 are no longer supported dependencies: fs.realpath: 1.0.0 inflight: 1.0.6 inherits: 2.0.4 - minimatch: 3.0.8 + minimatch: 3.1.2 once: 1.4.0 path-is-absolute: 1.0.1 dev: true /glob/7.2.3: resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==} + deprecated: Glob versions prior to v9 are no longer supported dependencies: fs.realpath: 1.0.0 inflight: 1.0.6 @@ -7557,6 +7753,10 @@ packages: glogg: 1.0.2 dev: false + /hachure-fill/0.5.2: + resolution: {integrity: sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==} + dev: true + /hard-rejection/2.1.0: resolution: {integrity: sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==} engines: {node: '>=6'} @@ -7768,6 +7968,10 @@ packages: requiresBuild: true optional: true + /immutable/5.1.5: + resolution: {integrity: sha512-t7xcm2siw+hlUM68I+UEOK+z84RzmN59as9DZ7P1l0994DKUWV7UXBMQZVxaoMSRQ+PBZbHCOoBt7a2wxOMt+A==} + dev: true + /import-fresh/3.3.0: resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==} engines: {node: '>=6'} @@ -8736,6 +8940,10 @@ packages: resolution: {integrity: sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==} dev: true + /js-binary-schema-parser/2.0.3: + resolution: {integrity: sha512-xezGJmOb4lk/M1ZZLTR/jaBHQ4gG/lqQnJqdIv4721DMggsa1bDVlHXNeHYogaIEHD9vCRv0fcL4hMA+Coarkg==} + dev: true + /js-string-escape/1.0.1: resolution: {integrity: sha512-Smw4xcfIQ5LVjAOuJCvN/zIodzA/BBSsluuoSykP+lUvScIi4U6RJLfwHet5cxFnCswUjISV8oAXaqaJDY3chg==} engines: {node: '>= 0.8'} @@ -9083,6 +9291,10 @@ packages: dependencies: js-tokens: 4.0.0 + /lottie-web/5.13.0: + resolution: {integrity: sha512-+gfBXl6sxXMPe8tKQm7qzLnUy5DUPJPKIyRHwtpCpyUEYjHYRJC/5gjUvdkuO2c3JllrPtHXH5UJJK8LRYl5yQ==} + dev: true + /loupe/2.3.7: resolution: {integrity: sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==} dependencies: @@ -9586,6 +9798,11 @@ packages: tslib: 2.3.1 dev: true + /node-addon-api/7.1.1: + resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==} + dev: true + optional: true + /node-gyp/8.4.1: resolution: {integrity: sha512-olTJRgUtAb/hOXG0E93wZDs5YiJlgbXxTwQAFHyNlRsXQnYzUaF2aGgujZbw+hR8aF4ZG/rST57bWMWD16jr9w==} engines: {node: '>= 10.12.0'} @@ -10057,6 +10274,12 @@ packages: engines: {node: '>=10'} dev: true + /picomatch/4.0.3: + resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==} + engines: {node: '>=12'} + dev: true + optional: true + /pidtree/0.5.0: resolution: {integrity: sha512-9nxspIM7OpZuhBxPg73Zvyq7j1QMPMPsGKTqRc2XOaFQauDvoNz9fM1Wdkjmeo7l9GXOZiRs97sPkuayl39wjA==} engines: {node: '>=0.10'} @@ -10641,6 +10864,11 @@ packages: picomatch: 2.3.1 dev: true + /readdirp/4.1.2: + resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==} + engines: {node: '>= 14.18.0'} + dev: true + /rechoir/0.6.2: resolution: {integrity: sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==} engines: {node: '>= 0.10'} @@ -10922,9 +11150,10 @@ packages: fsevents: 2.3.3 dev: true - /roughjs/4.5.2: - resolution: {integrity: sha512-2xSlLDKdsWyFxrveYWk9YQ/Y9UfK38EAMRNkYkMqYBJvPX8abCa9PN0x3w02H8Oa6/0bcZICJU+U95VumPqseg==} + /roughjs/4.6.6: + resolution: {integrity: sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ==} dependencies: + hachure-fill: 0.5.2 path-data-parser: 0.1.0 points-on-curve: 0.2.0 points-on-path: 0.2.1 @@ -10988,6 +11217,18 @@ packages: yargs: 17.7.2 dev: true + /sass/1.98.0: + resolution: {integrity: sha512-+4N/u9dZ4PrgzGgPlKnaaRQx64RO0JBKs9sDhQ2pLgN6JQZ25uPQZKQYaBJU48Kd5BxgXoJ4e09Dq7nMcOUW3A==} + engines: {node: '>=14.0.0'} + hasBin: true + dependencies: + chokidar: 4.0.3 + immutable: 5.1.5 + source-map-js: 1.2.0 + optionalDependencies: + '@parcel/watcher': 2.5.6 + dev: true + /sax/1.2.4: resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==} dev: true @@ -12618,6 +12859,43 @@ packages: fsevents: 2.3.3 dev: true + /vite/4.5.3_drwgbx6kncedk3tgksguhmevgq: + resolution: {integrity: sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==} + engines: {node: ^14.18.0 || >=16.0.0} + hasBin: true + peerDependencies: + '@types/node': '>= 14' + less: '*' + lightningcss: ^1.21.0 + sass: '*' + stylus: '*' + sugarss: '*' + terser: ^5.4.0 + peerDependenciesMeta: + '@types/node': + optional: true + less: + optional: true + lightningcss: + optional: true + sass: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + dependencies: + '@types/node': 20.12.7 + esbuild: 0.18.20 + postcss: 8.4.38 + rollup: 3.29.4 + sass: 1.98.0 + optionalDependencies: + fsevents: 2.3.3 + dev: true + /vitest/0.30.1_less@4.1.3+terser@5.17.1: resolution: {integrity: sha512-y35WTrSTlTxfMLttgQk4rHcaDkbHQwDP++SNwPb+7H8yb13Q3cu2EixrtHzF27iZ8v0XCciSsLg00RkPAzB/aA==} engines: {node: '>=v14.18.0'} diff --git a/packages/vchart-arco-theme/package.json b/packages/vchart-arco-theme/package.json index da8720e..a94f171 100644 --- a/packages/vchart-arco-theme/package.json +++ b/packages/vchart-arco-theme/package.json @@ -77,8 +77,8 @@ "react-router-dom": "^5.2.0", "react-device-detect": "^2.2.2", "redux": "^4.1.2", - "@visactor/vchart": "1.12.1", - "@visactor/react-vchart": "1.12.1", + "@visactor/vchart": "2.0.19", + "@visactor/react-vchart": "2.0.19", "@arco-design/webpack-plugin": "^1.6.0", "@arco-plugins/vite-plugin-svgr": "^0.7.2", "@svgr/webpack": "^5.5.0", diff --git a/packages/vchart-aurora-theme/.eslintignore b/packages/vchart-aurora-theme/.eslintignore new file mode 100644 index 0000000..f9724a9 --- /dev/null +++ b/packages/vchart-aurora-theme/.eslintignore @@ -0,0 +1,9 @@ +dist +build +esm +cjs +node_modules +coverage + +# ignore big data files +__tests__/data/* diff --git a/packages/vchart-aurora-theme/.eslintrc.js b/packages/vchart-aurora-theme/.eslintrc.js new file mode 100644 index 0000000..3a552f1 --- /dev/null +++ b/packages/vchart-aurora-theme/.eslintrc.js @@ -0,0 +1,26 @@ +require('@rushstack/eslint-patch/modern-module-resolution'); + +module.exports = { + extends: ['@internal/eslint-config/profile/lib'], + overrides: [ + { + files: ['**/__tests__/**', '**/*.test.ts'], + // 测试文件允许以下规则 + 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', + sourceType: 'module', + ecmaFeatures: { + jsx: true // 让eslint支持jsx语法 + } + }, + ignorePatterns: ['scripts/**', 'bundler.config.js'] +}; diff --git a/packages/vchart-aurora-theme/.trae/AI_DEVELOPMENT_GUIDE.md b/packages/vchart-aurora-theme/.trae/AI_DEVELOPMENT_GUIDE.md new file mode 100644 index 0000000..faa502a --- /dev/null +++ b/packages/vchart-aurora-theme/.trae/AI_DEVELOPMENT_GUIDE.md @@ -0,0 +1,52 @@ +# VChart Aurora Theme 开发指南 (AI Development Guide) + +本文档旨在为 AI 助手提供一套标准的开发、修改与验证流程，确保 VChart 主题包开发的规范性和高效性。 + +## 1. 项目环境 (Environment) + +- **项目根目录**: `/Users/bytedance/rep/vchart-theme/packages/vchart-aurora-theme` +- **Demo 目录**: `/Users/bytedance/rep/vchart-theme/packages/vchart-aurora-theme/demo` +- **启动项目**: 在 `packages/vchart-aurora-theme` 目录下执行 `npm run start`。 +- **运行状态**: 开发服务器启动后 (Vite)，请根据终端输出的 Local 地址访问 Demo 页面（通常为 `http://localhost:5173/` 或 `http://localhost:5174/` 等）。 + +## 2. 核心文件映射 (File Mapping) + +在执行修改任务时，请根据需求类型定位到以下核心文件： + +| 模块 (Module) | 文件路径 (Path) | 关键内容 (Content) | +| :------------ | :--------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **全局色板** | [`src/common/color-scheme.ts`](src/common/color-scheme.ts) | `colorList` (数据色板), `palette` (背景色/字体色/轴线色) | +| **设计变量** | [`src/common/token.ts`](src/common/token.ts) | `fontFamily`, `fontSize`, `borderRadius`, `padding` 等基础 Token | +| **组件样式** | `src/common/component/*.ts` | - [`axis.ts`](src/common/component/axis.ts): 坐标轴
- [`legend.ts`](src/common/component/legend.ts): 图例
- [`tooltip.ts`](src/common/component/tooltip.ts): 提示框
- [`crosshair.ts`](src/common/component/crosshair.ts): 十字准星 | +| **图表系列** | `src/common/series/*.ts` | - [`bar.ts`](src/common/series/bar.ts): 柱状图
- [`line.ts`](src/common/series/line.ts): 折线图
- [`pie.ts`](src/common/series/pie.ts): 饼图
- 其他: `area.ts`, `scatter.ts`, `radar.ts` 等 | +| **测试用例** | [`demo/src/chartSpec.ts`](demo/src/chartSpec.ts) | 包含 `barSpec`, `lineSpec`, `pieSpec` 等测试配置，用于 Demo 展示 | + +## 3. 开发流程 (Workflow) + +### Step 1: 需求分析 + +阅读 `TASKS.md` 或用户指令，明确修改点（例如：“修改背景色”或“调整坐标轴字号”）。 + +### Step 2: 代码修改 + +1. **定位**: 根据映射表找到对应源码文件。 +2. **修改**: 保持代码风格一致，进行最小必要修改。 + - _Tip_: 修改 `color-scheme.ts` 影响全局颜色。 + - _Tip_: 修改 `token.ts` 影响全局尺寸/字体。 + - _Tip_: 修改 `component/series` 文件进行特定组件/图表的精细调整。 + +### Step 3: 验证闭环 + +1. **检查 Demo**: 修改保存后，Vite 会热更新。 +2. **更新用例 (可选)**: 如果现有 Demo 图表无法展示修改效果（例如缺少特定类型的图表），请在 `demo/src/chartSpec.ts` 中添加新的 Spec。 并在 `demo/src/chart-list.ts` 中注册。 +3. **确认**: 启动项目并通过内置浏览器访问 Demo 页面（URL 见启动日志）查看效果，确认是否符合需求。 + +## 4. 辅助工具 (Tools) + +- **VChart 专家助手**: 遇到 VChart 配置问题、需要创建复杂 Demo 或诊断图表问题时，可以使用 `vchart-development-assistant` skill 获取帮助。 + +## 5. 注意事项 + +- **只修改必要文件**: 避免改动构建配置或无关逻辑。 +- **保持类型安全**: 确保 TypeScript 类型检查通过。 +- **实时反馈**: 修改完成后，简要描述改动点并提示用户查看 Demo。 diff --git a/packages/vchart-aurora-theme/.trae/TASKS.md b/packages/vchart-aurora-theme/.trae/TASKS.md new file mode 100644 index 0000000..fac0d8b --- /dev/null +++ b/packages/vchart-aurora-theme/.trae/TASKS.md @@ -0,0 +1,72 @@ +# 任务列表 (Tasks) + +请在此文档中添加开发需求。AI 将会读取此文档，按顺序执行任务并更新状态。 + +## 📝 提需示例 (Request Examples) + +如果你需要提出新需求，请复制以下格式添加到 **[待办任务]** 区域： + +### 示例 1：修改样式 + +```markdown +- [ ] **Task: 调整柱状图默认宽度** + - **描述**: 将柱状图（Bar Chart）的默认 `barMaxWidth` 设置为 20px。 + - **文件**: `src/common/series/bar.ts` + - **验证**: 检查 Demo 中的柱状图是否变宽/变窄。 +``` + +### 示例 2：新增图表配置 + +```markdown +- [ ] **Task: 添加漏斗图测试用例** + - **描述**: 在 Demo 中新增一个漏斗图（Funnel Chart）的 Spec，用于测试漏斗图主题样式。 + - **文件**: `demo/src/chartSpec.ts` + - **验证**: Demo 页面出现漏斗图。 +``` + +--- + +## 🚀 待办任务 (Pending Tasks) + + + +## 🔄 进行中 (In Progress) + + + +--- + +## ✅ 已完成 (Completed) + + + +- [x] **Task: 修复 Line/Area 图例和 Tooltip 颜色渐变问题** + - **描述**: 在 Line 和 Area 图表中，由于 Series 样式使用了渐变色，导致 Legends 和 Tooltip 的图形也呈现渐变。需修改主题配置，使其显示为纯色。 + - **文件**: `src/common/series/line.ts`, `src/common/series/area.ts` + - **优先级**: 高 + +- [x] **Task: 新增柱状图双Y轴Demo** + - **描述**: 新增一个柱状图的demo，包含两个y轴，左边单位金额，右边单位百分比，比如退款金额、退款率。spec参考benchmarkSpec。 + - **文件**: `demo/src/chartSpec.ts`, `demo/src/chart-list.ts` + - **验证**: Demo 页面出现双Y轴柱状图。 + +- [x] **Task: legend取消选中时，shape有border** + - **描述**: legend取消选中时，shape有border，填充色变为白色，边框颜色保持原色。 + - **文件**: `src/common/component/legend.ts` + - **优先级**: 中 + +- [x] **Task: 禁用迷你面积图 Hover 效果 (Demo Only)** + + - **描述**: 修改 Demo 配置，禁用迷你面积图 (`areaSimpleSpec`) 的 Hover 交互。注意：只改 Demo，不改主题。 + - **文件**: `demo/src/chartSpec.ts` + - **优先级**: 中 + +- [x] **Task: 基础折线图增加背景色和圆角 (Demo Only)** + + - **描述**: 修改 Demo 配置，为基础折线图 (`lineSpec`) 添加渐变背景 `linear-gradient(180deg, #F5F9FF 0%, #FFFFFF 97.6%)` 和圆角 `12px`, 只包含图表区域，不包含 xy 轴。注意：只改 Demo，不改主题。 + - **文件**: `demo/src/chartSpec.ts` + - **优先级**: 中 + +- [x] **Task: tooltip 的每项的图形形状改成圆形** + - **描述**: tooltip 的每项的图形形状改成圆形，和 legends 的形状保持一致。在面积图 demo 中完成验证 + - **优先级**: 高 diff --git a/packages/vchart-aurora-theme/README.md b/packages/vchart-aurora-theme/README.md new file mode 100644 index 0000000..405894e --- /dev/null +++ b/packages/vchart-aurora-theme/README.md @@ -0,0 +1,6 @@ +# @visactor/vchart-aurora-theme + + + +- [aurora](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-aurora-theme/public/aurora.json) light theme for ChartHub. + diff --git a/packages/vchart-aurora-theme/__tests__/index.test.ts b/packages/vchart-aurora-theme/__tests__/index.test.ts new file mode 100644 index 0000000..8ee436a --- /dev/null +++ b/packages/vchart-aurora-theme/__tests__/index.test.ts @@ -0,0 +1,6 @@ +describe('vchart-semi-theme', () => { + it('for test.', () => { + const a = 1; + expect(a).toBe(1); + }); +}); diff --git a/packages/vchart-aurora-theme/bundler.config.js b/packages/vchart-aurora-theme/bundler.config.js new file mode 100644 index 0000000..015274e --- /dev/null +++ b/packages/vchart-aurora-theme/bundler.config.js @@ -0,0 +1,13 @@ +/** + * @type {Partial} + */ +module.exports = { + formats: ['cjs', 'es', 'umd'], + outputDir: { + es: 'esm', + cjs: 'cjs', + umd: 'build' + }, + name: 'vchart-aurora-theme', + umdOutputFilename: 'index' +}; diff --git a/packages/vchart-aurora-theme/demo/index.html b/packages/vchart-aurora-theme/demo/index.html new file mode 100644 index 0000000..d0c3420 --- /dev/null +++ b/packages/vchart-aurora-theme/demo/index.html @@ -0,0 +1,23 @@ + + + + + + + React App + + +
+ + + + diff --git a/packages/vchart-aurora-theme/demo/src/chart-list.ts b/packages/vchart-aurora-theme/demo/src/chart-list.ts new file mode 100644 index 0000000..ec1b3db --- /dev/null +++ b/packages/vchart-aurora-theme/demo/src/chart-list.ts @@ -0,0 +1,159 @@ +import type { IChartInfo } from '@internal/chart-demo'; +import { + barSpec, + areaSpec, + areaSimpleSpec, + multiAreaSpec, + barGroupHorizontalSpec, + barGroupSpec, + benchmarkSpec, + dualAxisBarSpec, + barStackedSpec, + funnelSpec, + lineSpec, + pieSpec, + nestPieSpec, + metricPieSpec, + radarSpec +} from './chartSpec'; + +export interface IChartCategory { + key: string; + title: string; + charts: IChartInfo[]; +} + +// 柱状图系列 +export const barCharts: IChartInfo[] = [ + { + title: '基础柱状图', + spec: barSpec + }, + { + title: '基础柱状图', + spec: barGroupSpec + }, + { + title: '堆叠柱状图&Hover总量', + spec: barStackedSpec + }, + { + title: '带同行标杆柱状图', + spec: benchmarkSpec + }, + { + title: '双轴图（金额/比率）', + spec: dualAxisBarSpec + }, + { + title: '水平分组柱状图', + spec: barGroupHorizontalSpec + } +]; + +// 折线图系列 +export const lineCharts: IChartInfo[] = [ + { + title: '基础折线图', + spec: lineSpec + } +]; + +// 面积图系列 +export const areaCharts: IChartInfo[] = [ + { + title: '基础面积图', + spec: areaSpec + }, + { + title: '迷你面积图', + spec: areaSimpleSpec + }, + { + title: '多项面积图', + spec: multiAreaSpec + } +]; + +// 饼图系列 +export const pieCharts: IChartInfo[] = [ + { + title: '基础饼图', + spec: pieSpec + }, + { + title: '定制标签的饼图', + spec: nestPieSpec + }, + { + title: '中心指标饼图', + spec: metricPieSpec + } +]; + +// 雷达图系列 +export const radarCharts: IChartInfo[] = [ + { + title: '基础雷达图', + spec: radarSpec + } +]; + +// 漏斗图系列 +export const funnelCharts: IChartInfo[] = [ + { + title: '基础漏斗图', + spec: funnelSpec + } +]; + +// 所有图表分类 +export const chartCategories: IChartCategory[] = [ + { + key: 'pie', + title: '饼图', + charts: pieCharts + }, + { + key: 'bar', + title: '柱状图', + charts: barCharts + }, + { + key: 'line', + title: '折线图', + charts: lineCharts + }, + { + key: 'area', + title: '面积图', + charts: areaCharts + } + + // { + // key: 'radar', + // title: '雷达图', + // charts: radarCharts + // }, + // { + // key: 'funnel', + // title: '漏斗图', + // charts: funnelCharts + // } +]; + +// 所有图表（向后兼容） +export const charts: IChartInfo[] = [ + ...barCharts, + ...lineCharts, + ...areaCharts, + ...pieCharts, + ...radarCharts, + ...funnelCharts +]; + +// 根据分类 key 获取图表列表 +export function getChartsByCategory(key: string): IChartInfo[] { + const category = chartCategories.find(c => c.key === key); + return category ? category.charts : charts; +} diff --git a/packages/vchart-aurora-theme/demo/src/chartSpec.ts b/packages/vchart-aurora-theme/demo/src/chartSpec.ts new file mode 100644 index 0000000..e50a0cb --- /dev/null +++ b/packages/vchart-aurora-theme/demo/src/chartSpec.ts @@ -0,0 +1,1102 @@ +import { colorList, nestColorList } from '../../src/index'; + +export const barSpec = { + type: 'bar', + data: { + values: [ + { type: 'Autocracies', year: '1930', value: 129 }, + { type: 'Autocracies', year: '1940', value: 133 }, + { type: 'Autocracies', year: '1950', value: 130 }, + { type: 'Autocracies', year: '1960', value: 126 }, + { type: 'Autocracies', year: '1970', value: 117 }, + { type: 'Autocracies', year: '1980', value: 114 }, + { type: 'Autocracies', year: '1990', value: 111 }, + { type: 'Autocracies', year: '2000', value: 0 }, + { type: 'Autocracies', year: '2010', value: 0.1 }, + { type: 'Autocracies', year: '2018', value: 80 } + ] + }, + height: 500, + xField: ['year', 'type'], + yField: 'value', + seriesField: 'type', + axes: [ + { + orient: 'bottom', + visible: true, + domainLine: { visible: true }, + tick: { visible: true } + }, + { + orient: 'left', + visible: true, + domainLine: { visible: false }, + tick: { visible: false } + } + ], + legends: { + visible: true + }, + indicator: { + visible: true + } +}; + +export const barGroupSpec = { + type: 'bar', + data: { + values: [ + { type: 'Autocracies', year: '1930', value: 129 }, + { type: 'Autocracies', year: '1940', value: 133 }, + { type: 'Autocracies', year: '1950', value: 130 }, + { type: 'Autocracies', year: '1960', value: 126 }, + { type: 'Autocracies', year: '1970', value: 117 }, + { type: 'Autocracies', year: '1980', value: 114 }, + { type: 'Autocracies', year: '1990', value: 111 }, + { type: 'Autocracies', year: '2000', value: 89 }, + { type: 'Autocracies', year: '2010', value: 80 }, + { type: 'Autocracies', year: '2018', value: 80 }, + { type: 'Democracies', year: '1930', value: 22 }, + { type: 'Democracies', year: '1940', value: 13 }, + { type: 'Democracies', year: '1950', value: 25 }, + { type: 'Democracies', year: '1960', value: 29 }, + { type: 'Democracies', year: '1970', value: 38 }, + { type: 'Democracies', year: '1980', value: 41 }, + { type: 'Democracies', year: '1990', value: 57 }, + { type: 'Democracies', year: '2000', value: 87 }, + { type: 'Democracies', year: '2010', value: 98 }, + { type: 'Democracies', year: '2018', value: 99 }, + { type: 'Price', year: '1930', value: 0 }, + { type: 'Price', year: '1940', value: 0.1 }, + { type: 'Price', year: '1950', value: 72 }, + { type: 'Price', year: '1960', value: 82 }, + { type: 'Price', year: '1970', value: 67 }, + { type: 'Price', year: '1980', value: 89 }, + { type: 'Price', year: '1990', value: 60 }, + { type: 'Price', year: '2000', value: 123 }, + { type: 'Price', year: '2010', value: 111 }, + { type: 'Price', year: '2018', value: 99 } + ] + }, + height: 500, + xField: ['year', 'type'], + yField: 'value', + seriesField: 'type', + axes: [ + { + orient: 'bottom', + visible: true, + domainLine: { visible: true }, + tick: { visible: true } + }, + { + orient: 'left', + visible: true, + domainLine: { visible: false }, + tick: { visible: false } + } + ], + legends: { + visible: true + }, + indicator: { + visible: true + }, + title: { + text: '柱状图标题', + subtext: '可选展示副标题一到两行文字' + } +}; + +export const barGroupHorizontalSpec = { + type: 'bar', + data: { + values: [ + { type: 'Autocracies', year: '1930', value: 129 }, + { type: 'Autocracies', year: '1940', value: 133 }, + { type: 'Autocracies', year: '1950', value: 130 }, + { type: 'Autocracies', year: '1960', value: 126 }, + { type: 'Autocracies', year: '1970', value: 117 }, + { type: 'Autocracies', year: '1980', value: 114 }, + { type: 'Autocracies', year: '1990', value: 111 }, + { type: 'Democracies', year: '1930', value: 22 }, + { type: 'Democracies', year: '1940', value: 13 }, + { type: 'Democracies', year: '1950', value: 25 }, + { type: 'Democracies', year: '1960', value: 29 }, + { type: 'Democracies', year: '1970', value: 38 }, + { type: 'Democracies', year: '1980', value: 41 }, + { type: 'Democracies', year: '1990', value: 57 } + ] + }, + height: 500, + direction: 'horizontal', + xField: 'value', + yField: ['year', 'type'], + seriesField: 'type', + axes: [ + { + orient: 'left', + visible: true, + domainLine: { visible: true }, + tick: { visible: true } + }, + { + orient: 'bottom', + visible: true, + domainLine: { visible: false }, + tick: { visible: false } + } + ], + legends: { + visible: true + }, + indicator: { + visible: true + }, + label: { + visible: true + } +}; + +export const barStackedSpec = { + type: 'bar', + //stack: true, + data: { + values: [ + { type: 'Autocracies', year: '1930', value: 129 }, + { type: 'Autocracies', year: '1940', value: 133 }, + { type: 'Autocracies', year: '1950', value: 130 }, + { type: 'Autocracies', year: '1960', value: 126 }, + { type: 'Autocracies', year: '1970', value: 117 }, + { type: 'Autocracies', year: '1980', value: 114 }, + { type: 'Autocracies', year: '1990', value: 111 }, + { type: 'Autocracies', year: '2000', value: 89 }, + { type: 'Autocracies', year: '2010', value: 80 }, + { type: 'Autocracies', year: '2018', value: 80 }, + { type: 'Democracies', year: '1930', value: 22 }, + { type: 'Democracies', year: '1940', value: 13 }, + { type: 'Democracies', year: '1950', value: 25 }, + { type: 'Democracies', year: '1960', value: 29 }, + { type: 'Democracies', year: '1970', value: 38 }, + { type: 'Democracies', year: '1980', value: 41 }, + { type: 'Democracies', year: '1990', value: 57 }, + { type: 'Democracies', year: '2000', value: 87 }, + { type: 'Democracies', year: '2010', value: 98 }, + { type: 'Democracies', year: '2018', value: 99 }, + { type: 'Price', year: '1930', value: 56 }, + { type: 'Price', year: '1940', value: 122 }, + { type: 'Price', year: '1950', value: 72 }, + { type: 'Price', year: '1960', value: 82 }, + { type: 'Price', year: '1970', value: 67 }, + { type: 'Price', year: '1980', value: 89 }, + { type: 'Price', year: '1990', value: 60 }, + { type: 'Price', year: '2000', value: 123 }, + { type: 'Price', year: '2010', value: 111 }, + { type: 'Price', year: '2018', value: 99 } + ] + }, + height: 500, + xField: 'year', + yField: 'value', + seriesField: 'type', + axes: [ + { + orient: 'bottom', + visible: true, + domainLine: { visible: true }, + tick: { visible: true } + }, + { + orient: 'left', + visible: true, + domainLine: { visible: false }, + tick: { visible: false } + } + ], + legends: { + visible: true + }, + indicator: { + visible: true + }, + tooltip: { + dimension: { + updateContent: items => { + const total = items.reduce((sum, item) => sum + Number(item.value), 0); + return [ + { key: '总量', value: total, hasShape: false }, // 新增总量项 + ...items + ]; + } + } + } +}; + +export const benchmarkSpec = { + type: 'bar', + data: [ + { + id: 'base', + values: [ + { + reason: '价格问题', + value: 250, + type: '退款金额' + }, + { + reason: '物流问题', + value: 200, + type: '退款金额' + }, + { + reason: '不想要了', + value: 100, + type: '退款金额' + }, + { + reason: '其他', + value: 20, + type: '退款金额' + } + ] + }, + { + id: 'bench', + values: [ + { + reason: '价格问题', + value: 230, + type: '同行标杆' + }, + { + reason: '物流问题', + value: 230, + type: '同行标杆' + }, + { + reason: '不想要了', + value: 120, + type: '同行标杆' + }, + { + reason: '其他', + value: 10, + type: '同行标杆' + } + ] + } + ], + series: [ + { + id: 'base', + type: 'bar', + dataId: 'base', + seriesField: 'type', + xField: 'reason', + yField: 'value', + barMaxWidth: 16, + barGapInGroup: 2 + }, + { + id: 'bench', + type: 'scatter', + dataId: 'bench', + seriesField: 'type', + xField: 'reason', + yField: 'value', + point: { + style: { + shape: 'rect', + size: [16, 2] + } + } + } + ], + legends: { + visible: true + } +}; + +export const barStackedPercentSpec = { + type: 'bar', + stack: true, + percent: true, + data: { + values: [ + { type: 'Autocracies', year: '1930', value: 129 }, + { type: 'Autocracies', year: '1940', value: 133 }, + { type: 'Autocracies', year: '1950', value: 130 }, + { type: 'Autocracies', year: '1960', value: 126 }, + { type: 'Autocracies', year: '1970', value: 117 }, + { type: 'Autocracies', year: '1980', value: 114 }, + { type: 'Autocracies', year: '1990', value: 111 }, + { type: 'Autocracies', year: '2000', value: 89 }, + { type: 'Autocracies', year: '2010', value: 80 }, + { type: 'Autocracies', year: '2018', value: 80 }, + { type: 'Democracies', year: '1930', value: 22 }, + { type: 'Democracies', year: '1940', value: 13 }, + { type: 'Democracies', year: '1950', value: 25 }, + { type: 'Democracies', year: '1960', value: 29 }, + { type: 'Democracies', year: '1970', value: 38 }, + { type: 'Democracies', year: '1980', value: 41 }, + { type: 'Democracies', year: '1990', value: 57 }, + { type: 'Democracies', year: '2000', value: 87 }, + { type: 'Democracies', year: '2010', value: 98 }, + { type: 'Democracies', year: '2018', value: 99 }, + { type: 'Price', year: '1930', value: 56 }, + { type: 'Price', year: '1940', value: 122 }, + { type: 'Price', year: '1950', value: 72 }, + { type: 'Price', year: '1960', value: 82 }, + { type: 'Price', year: '1970', value: 67 }, + { type: 'Price', year: '1980', value: 89 }, + { type: 'Price', year: '1990', value: 60 }, + { type: 'Price', year: '2000', value: 123 }, + { type: 'Price', year: '2010', value: 111 }, + { type: 'Price', year: '2018', value: 99 } + ] + }, + height: 500, + xField: 'year', + yField: 'value', + seriesField: 'type', + axes: [ + { + orient: 'bottom', + visible: true, + domainLine: { visible: true }, + tick: { visible: true } + }, + { + orient: 'left', + visible: true, + domainLine: { visible: false }, + tick: { visible: false } + } + ], + legends: { + visible: true + }, + label: { + visible: true, + position: 'inside' + } +}; + +export const lineSpec = { + type: 'line', + data: { + 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 } + ] + }, + customMark: [ + { + type: 'rect', + zIndex: 1, + style: { + x: (datum, ctx) => { + const region = ctx.chart.getAllRegions()[0]; + return region.getLayoutStartPoint().x; + }, + y: (datum, ctx) => { + const region = ctx.chart.getAllRegions()[0]; + return region.getLayoutStartPoint().y - 12; + }, + width: (datum, ctx) => { + const region = ctx.chart.getAllRegions()[0]; + return region.getLayoutRect().width; + }, + height: (datum, ctx) => { + const region = ctx.chart.getAllRegions()[0]; + return region.getLayoutRect().height + 12; + }, + cornerRadius: 12, + fill: { + gradient: 'linear', + x0: 0, + y0: 0, + x1: 0, + y1: 1, + stops: [ + { + offset: 0, + color: '#F5F9FF' + }, + { + offset: 1, + color: '#fff' + } + ] + } + } + } + ], + height: 600, + xField: ['type'], + yField: 'value', + seriesField: 'country', + legends: { + visible: true + }, + crosshair: { + xField: { + line: { + type: 'line', + width: 1, + style: { + lineWidth: 1, + stroke: '#DCDEE1', + lineDash: [2, 2] + } + } + } + } +}; + +export const pieSpec = { + type: 'pie', + data: [ + { + id: 'id0', + values: [ + { type: 'oxygen', value: '46.60' }, + { type: 'silicon', value: '27.72' }, + { type: 'aluminum', value: '8.13' }, + { type: 'iron', value: '1' }, + { type: 'calcium', value: '3.63' } + ] + } + ], + valueField: 'value', + categoryField: 'type', + title: { + visible: true, + text: '数据分布', + subtext: '可视化图表副标题一到两行文字' + }, + tooltip: { + mark: { + title: { + visible: false + } + } + }, + legends: { + visible: false + }, + label: { + visible: true + } +}; + +const rootDatum = [ + { type: '0~29', value: '126.04' }, + { type: '30~59', value: '128.77' }, + { type: '60 and over', value: '77.09' } +].map((item, index) => ({ ...item, color: nestColorList[index]?.pop() })); + +const subDatum = (() => { + const groupIndexMap = new Map(); + rootDatum.forEach((item, index) => { + groupIndexMap.set(item.type, index); + }); + + const groupItemIndexMap = new Map(); + const rawSubData = [ + { type: '0~9', group: '0~29', value: '39.12' }, + { type: '10~19', group: '0~29', value: '43.01' }, + { type: '20~29', group: '0~29', value: '43.91' }, + { type: '30~39', group: '30~59', value: '45.4' }, + { type: '40~49', group: '30~59', value: '40.89' }, + { type: '50~59', group: '30~59', value: '42.48' }, + { type: '60~69', group: '60 and over', value: '39.63' }, + { type: '70~79', group: '60 and over', value: '25.17' }, + { type: '80 and over', group: '60 and over', value: '12.29' } + ]; + + return rawSubData.map(item => { + const parentIndex = groupIndexMap.get(item.group)!; + const itemIndex = (groupItemIndexMap.get(item.group) ?? -1) + 1; + groupItemIndexMap.set(item.group, itemIndex); + return { ...item, color: nestColorList[parentIndex][itemIndex] }; + }); +})(); + +export const nestPieSpec = { + type: 'common', + data: [ + { + id: 'id0', + values: rootDatum + }, + { + id: 'id1', + values: subDatum + } + ], + title: { + visible: true, + text: '数据分布', + subtext: '可视化图表副标题一到两行文字' + }, + series: [ + { + type: 'pie', + dataIndex: 0, + outerRadius: 0.7, + innerRadius: 0, + valueField: 'value', + categoryField: 'type', + + label: { + interactive: false, + position: 'inside', + formatMethod: (label, data) => { + return data?.type; + }, + + smartInvert: false, + visible: true, + rotate: false, + style: { + fill: '#585858' + } + }, + color: nestColorList.map(item => item[item.length - 1]), + pie: { + state: { + hover: { + outerRadius: 0.7 + }, + selected: { + outerRadius: 0.7 + }, + hover_reverse: { + opacity: 0.5 + } + }, + style: { + fill: datum => { + return datum.color; + } + } + } + }, + { + type: 'pie', + dataIndex: 1, + outerRadius: 0.8, + innerRadius: 0.7, + valueField: 'value', + categoryField: 'type', + label: { + visible: true + }, + pie: { + state: { + hover: { + outerRadius: 0.85 + }, + selected: { + outerRadius: 0.85 + } + }, + style: { + fill: datum => { + return datum.color; + } + } + } + } + ], + legends: { + visible: false + } +}; + +export const metricPieSpec = { + type: 'pie', + data: [ + { + id: 'id0', + values: [ + { type: 'oxygen', value: '46.60' }, + { type: 'silicon', value: '27.72' }, + { type: 'aluminum', value: '8.13' }, + { type: 'iron', value: '1' }, + { type: 'calcium', value: '3.63' } + ] + } + ], + outerRadius: 0.8, + innerRadius: 0.7, + valueField: 'value', + categoryField: 'type', + title: { + visible: true, + text: '数据分布', + subtext: '可视化图表副标题一到两行文字' + }, + indicator: { + visible: true, + trigger: 'hover', + limitRatio: 0.5, // same as inner radius + title: { + visible: true, + autoFit: false, + style: { + fontWeight: '500', + fontFamily: 'douyinNumber', + fill: '#111', + fontSize: 32, + lineHeight: 46, + text: '25%' + } + }, + content: [ + { + visible: true, + autoFit: false, + style: { + fill: '#585858', + fontSize: 14, + lineHeight: 20, + text: '指标名称' + } + } + ] + }, + tooltip: { + mark: { + title: { + visible: false + } + } + }, + legend: { + visible: true, + orient: 'bottom' + }, + label: { + visible: true + } +}; + +export const radarSpec = { + type: 'radar', + data: [ + { + id: 'radarData', + values: [ + { + key: 'Strength', + value: 6, + type: 'Risk' + }, + { + key: 'Speed', + value: 5, + type: 'Risk' + }, + { + key: 'Shooting', + value: 3, + type: 'Risk' + }, + { + key: 'Endurance', + value: 4, + type: 'Risk' + }, + { + key: 'Precision', + value: 5, + type: 'Risk' + }, + { + key: 'Strength', + value: 5, + type: 'Average risk' + }, + { + key: 'Speed', + value: 5, + type: 'Average risk' + }, + { + key: 'Shooting', + value: 5, + type: 'Average risk' + }, + { + key: 'Endurance', + value: 5, + type: 'Average risk' + }, + { + key: 'Precision', + value: 5, + type: 'Average risk' + } + ] + } + ], + categoryField: 'key', + valueField: 'value', + seriesField: 'type', + label: { + visible: true, //展示label + style: { + visible: datum => datum.type !== 'Average risk' + } + }, + point: { + visible: true, // disable point + style: { + visible: datum => datum.type !== 'Average risk' + } + }, + legends: { + visible: true + }, + area: { + visible: true, + style: { + visible: datum => datum.type !== 'Average risk' + } + }, + outerRadius: 1, + axes: [ + { + orient: 'radius', // radius axis + zIndex: 100, + min: 0, + max: 8 + }, + { + orient: 'angle', // angle axis + zIndex: 50 + } + ] +}; + +export const funnelSpec = { + type: 'funnel', + categoryField: 'name', + valueField: 'value', + data: [ + { + id: 'funnel', + values: [ + { + value: 100, + name: 'Step1' + }, + { + value: 80, + name: 'Step2' + }, + { + value: 60, + name: 'Step3' + }, + { + value: 40, + name: 'Step4' + }, + { + value: 20, + name: 'Step5' + } + ] + } + ], + label: { + visible: true + }, + legends: { + visible: true, + orient: 'bottom' + } +}; + +export const dualAxisBarSpec = { + type: 'common', + data: [ + { + id: 'dualAxisDataLeft', + values: [ + { category: '1月', type: '退款金额', value: 12.3 }, + { category: '2月', type: '退款金额', value: 15.8 }, + { category: '3月', type: '退款金额', value: 10.2 }, + { category: '4月', type: '退款金额', value: 18.6 }, + { category: '5月', type: '退款金额', value: 16.4 }, + { category: '6月', type: '退款金额', value: 20.1 } + ] + }, + { + id: 'dualAxisDataRight', + values: [ + { category: '1月', type: '退款率', value: 32.5 }, + { category: '2月', type: '退款率', value: 45.1 }, + { category: '3月', type: '退款率', value: 28.4 }, + { category: '4月', type: '退款率', value: 55.0 }, + { category: '5月', type: '退款率', value: 48.3 }, + { category: '6月', type: '退款率', value: 62.7 } + ] + } + ], + series: [ + { + type: 'bar', + id: 'amountBar', + name: '金额', + dataIndex: 0, + xField: ['category', 'type'], + yField: 'value' + }, + { + type: 'bar', + id: 'percentBar', + name: '占比', + dataIndex: 1, + xField: ['category', 'type'], + yField: 'value' + } + ], + axes: [ + { + orient: 'bottom', + type: 'band', + label: { + visible: true + } + }, + { + orient: 'left', + type: 'linear', + seriesId: ['amountBar'], + label: { + visible: true, + formatMethod: val => val.toFixed(1) + '万' + }, + grid: { + visible: true + } + }, + { + orient: 'right', + type: 'linear', + seriesId: ['percentBar'], + label: { + visible: true, + formatMethod: val => val.toFixed(1) + '%' + }, + grid: { + visible: false + } + } + ], + legends: { + visible: true + } +}; + +export const areaSpec = { + type: 'area', + seriesMark: 'line', + data: { + values: [ + { type: 'Nail polish', country: 'Africa', value: 4229 }, + { type: 'Eyebrow pencil', country: 'Africa', value: 3932 }, + { type: 'Rouge', country: 'Africa', value: 5221 }, + { type: 'Lipstick', country: 'Africa', value: 9256 }, + { type: 'Eyeshadows', country: 'Africa', value: 3308 }, + { type: 'Eyeliner', country: 'Africa', value: 5432 }, + { type: 'Foundation', country: 'Africa', value: 13701 }, + { type: 'Lip gloss', country: 'Africa', value: 4008 }, + { type: 'Mascara', country: 'Africa', value: 18712 } + ] + }, + height: 600, + xField: ['type'], + yField: 'value', + seriesField: 'country', + legends: { + visible: false + }, + indicator: { + visible: true + }, + crosshair: { + xField: { + line: { + type: 'line', + width: 1, + style: { + lineWidth: 1, + stroke: '#DCDEE1', + lineDash: [2, 2] + } + } + } + } +}; + +export const areaSimpleSpec = { + type: 'area', + hover: { + enable: false + }, + seriesMark: 'line', + data: { + values: [ + { type: 'Nail polish', country: 'Africa', value: 4229 }, + { type: 'Eyebrow pencil', country: 'Africa', value: 3932 }, + { type: 'Rouge', country: 'Africa', value: 5221 }, + { type: 'Lipstick', country: 'Africa', value: 9256 }, + { type: 'Eyeshadows', country: 'Africa', value: 3308 }, + { type: 'Eyeliner', country: 'Africa', value: 5432 }, + { type: 'Foundation', country: 'Africa', value: 13701 }, + { type: 'Lip gloss', country: 'Africa', value: 4008 }, + { type: 'Mascara', country: 'Africa', value: 18712 } + ] + }, + axes: [ + { + orient: 'bottom', + visible: false + }, + { + orient: 'left', + visible: false + } + ], + tooltip: { + visible: false + }, + xField: ['type'], + yField: 'value', + seriesField: 'country', + point: { + state: { + dimension_hover: { + visible: false + } + } + }, + legends: { + visible: false + }, + indicator: { + visible: false + }, + crosshair: { + xField: { + visible: false + } + } +}; + +export const multiAreaSpec = { + type: 'area', + seriesMark: 'line', + data: { + 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 } + ] + }, + height: 600, + xField: ['type'], + yField: 'value', + seriesField: 'country', + indicator: { + visible: true + }, + legends: { + visible: true + }, + crosshair: { + xField: { + line: { + type: 'line', + width: 1, + style: { + lineWidth: 1, + stroke: '#DCDEE1', + lineDash: [2, 2] + } + } + } + } +}; diff --git a/packages/vchart-aurora-theme/demo/src/charts.jsx b/packages/vchart-aurora-theme/demo/src/charts.jsx new file mode 100644 index 0000000..c2e884d --- /dev/null +++ b/packages/vchart-aurora-theme/demo/src/charts.jsx @@ -0,0 +1,47 @@ +import React from 'react'; +import { isMobile } from 'react-device-detect'; +import { VChart } from '@visactor/react-vchart'; +import { Card } from '@douyinfe/semi-ui'; + +const chartHeight = 400; + +const Charts = ({ charts = [] }) => { + if (charts.length === 0) { + return
暂无图表数据
; + } + + return ( +
+ {charts?.map((chart, i) => { + return ( +
+ + + +
+ ); + })} +
+ ); +}; + +export default Charts; diff --git a/packages/vchart-aurora-theme/demo/src/createServiceWorker.js b/packages/vchart-aurora-theme/demo/src/createServiceWorker.js new file mode 100644 index 0000000..5445ef5 --- /dev/null +++ b/packages/vchart-aurora-theme/demo/src/createServiceWorker.js @@ -0,0 +1,52 @@ +// In production, we register a service worker to serve assets from local cache. + +// This lets the app load faster on subsequent visits in production, and gives +// it offline capabilities. However, it also means that developers (and users) +// will only see deployed updates on the "N+1" visit to a page, since previously +// cached resources are updated in the background. + +// To learn more about the benefits of this model, read https://goo.gl/KwvDNy. +// This link also includes instructions on opting out of this behavior. + +export default function register() { + if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { + window.addEventListener('load', () => { + const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; + navigator.serviceWorker + .register(swUrl) + .then(registration => { + // eslint-disable-next-line no-param-reassign + registration.onupdatefound = () => { + const installingWorker = registration.installing; + installingWorker.onstatechange = () => { + if (installingWorker.state === 'installed') { + if (navigator.serviceWorker.controller) { + // At this point, the old content will have been purged and + // the fresh content will have been added to the cache. + // It's the perfect time to display a "New content is + // available; please refresh." message in your web app. + console.log('New content is available; please refresh.'); // eslint-disable-line no-console + } else { + // At this point, everything has been precached. + // It's the perfect time to display a + // "Content is cached for offline use." message. + console.log('Content is cached for offline use.'); // eslint-disable-line no-console + } + } + }; + }; + }) + .catch(error => { + console.error('Error during service worker registration:', error); + }); + }); + } +} + +export function unregister() { + if ('serviceWorker' in navigator) { + navigator.serviceWorker.ready.then(registration => { + registration.unregister(); + }); + } +} diff --git a/packages/vchart-aurora-theme/demo/src/font.css b/packages/vchart-aurora-theme/demo/src/font.css new file mode 100644 index 0000000..2946fa4 --- /dev/null +++ b/packages/vchart-aurora-theme/demo/src/font.css @@ -0,0 +1,31 @@ +@font-face { + font-family: 'DouyinNumber'; + src: url('https://lf3-static.bytednsdoc.com/obj/eden-cn/lm-ljuhpssh/ljhwZthlaukjlkulzlp/DouyinNumberABC/DouyinNumberABC-Medium.otf'); + font-weight: 400; + font-style: normal; + font-display: block; +} + +@font-face { + font-family: 'DouyinNumber'; + src: url('https://lf3-static.bytednsdoc.com/obj/eden-cn/lm-ljuhpssh/ljhwZthlaukjlkulzlp/DouyinNumberABC/DouyinNumberABC-Bold.otf'); + font-weight: 500; + font-style: normal; + font-display: block; +} + +@font-face { + font-family: 'DouyinNumber'; + src: url('https://lf3-static.bytednsdoc.com/obj/eden-cn/lm-ljuhpssh/ljhwZthlaukjlkulzlp/DouyinNumberABC/DouyinNumberABC-Bold.otf'); + font-weight: 600; + font-style: normal; + font-display: block; +} + +@font-face { + font-family: 'DouyinNumber'; + src: url('https://lf3-static.bytednsdoc.com/obj/eden-cn/lm-ljuhpssh/ljhwZthlaukjlkulzlp/DouyinNumberABC/DouyinNumberABC-ExtraBold.otf'); + font-weight: 700; + font-style: normal; + font-display: block; +} diff --git a/packages/vchart-aurora-theme/demo/src/frame.jsx b/packages/vchart-aurora-theme/demo/src/frame.jsx new file mode 100644 index 0000000..aa54635 --- /dev/null +++ b/packages/vchart-aurora-theme/demo/src/frame.jsx @@ -0,0 +1,74 @@ +import React, { useState } from 'react'; +import { Nav, Avatar } from '@douyinfe/semi-ui'; +import { IconSemiLogo, IconFeishuLogo, IconHelpCircle, IconBell } from '@douyinfe/semi-icons'; +import styles from './index.module.scss'; +import Charts from './charts.jsx'; +import { chartCategories, getChartsByCategory } from './chart-list'; + +const Frame = () => { + const [selectedKey, setSelectedKey] = useState('bar'); + + const currentCharts = getChartsByCategory(selectedKey); + + const getCategoryTitle = key => { + const category = chartCategories.find(c => c.key === key); + return category ? category.title : '图表展示'; + }; + + return ( +
+
+ ), + text: 'VChart Aurora Theme' + }} + footer={ +
+ + + + + 示例 + +
+ } + className={styles.nav} + > +
+ +
+

{getCategoryTitle(selectedKey)}

+
+ +
+
+
+ + ); +}; + +export default Frame; diff --git a/packages/vchart-aurora-theme/demo/src/index.jsx b/packages/vchart-aurora-theme/demo/src/index.jsx new file mode 100644 index 0000000..89679e6 --- /dev/null +++ b/packages/vchart-aurora-theme/demo/src/index.jsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { createRoot } from 'react-dom/client'; +import Frame from './frame.jsx'; +import './normalize.css'; +import './font.css'; +import VChart from '@visactor/vchart'; +import { chartAuroraTheme } from '../../src/index.ts'; + +VChart.ThemeManager.registerTheme('aurora', chartAuroraTheme); +VChart.ThemeManager.setCurrentTheme('aurora'); + +const dom = document.querySelector('#root'); +const root = createRoot(dom); +root.render(); + +window['VChart'] = VChart; diff --git a/packages/vchart-aurora-theme/demo/src/index.module.scss b/packages/vchart-aurora-theme/demo/src/index.module.scss new file mode 100644 index 0000000..7397e81 --- /dev/null +++ b/packages/vchart-aurora-theme/demo/src/index.module.scss @@ -0,0 +1,130 @@ +.rootSidenav { + align-items: flex-start; + background: var(--semi-color-bg-0); + flex-direction: column; + overflow: hidden; + row-gap: 0; + display: flex; + color: var(--semi-color-text-0); + font-family: Inter; + font-size: 20px; + font-weight: 600; + letter-spacing: -0.6px; + line-height: 28px; + text-align: left; + + .nav { + align-self: stretch; + height: 60px; + + .navigationHeaderLogo { + align-items: flex-start; + column-gap: 0; + display: inline-flex; + flex-shrink: 0; + + .semiIconsSemiLogo { + font-size: 36px; + color: var(--semi-color-text-0); + } + } + + .dIV { + align-items: center; + column-gap: 16px; + display: inline-flex; + flex-shrink: 0; + + .semiIconsFeishuLogo, + .semiIconsHelpCircle, + .semiIconsBell { + font-size: 20px; + color: var(--semi-color-text-2); + } + + .avatar { + height: 32px; + width: 32px; + } + } + } + + .main { + align-items: flex-start; + column-gap: 0; + display: flex; + flex-shrink: 0; + align-self: stretch; + + .left { + height: calc(100vh - 60px); + + .navItem, + .navItem5 { + width: 223px; + + .iconIntro, + .iconRadio { + height: 20px; + position: relative; + width: 20px; + } + } + + .navItem1, + .navItem2, + .navItem3, + .navItem4, + .navItem6, + .navItem7 { + width: 223px; + + .iconHeart, + .iconCalendar, + .iconCheckbox, + .iconCalendar, + .iconList, + .iconToast { + height: 20px; + width: 20px; + } + } + } + + .right { + height: calc(100vh - 60px); + overflow-y: auto; + align-items: flex-start; + display: flex; + flex-basis: 0; + flex-direction: column; + padding: 40px; + row-gap: 24px; + flex-grow: 1; + + .item { + min-width: 90px; + vertical-align: middle; + flex-shrink: 0; + } + + .frame1321317607 { + align-items: center; + background: var(--semi-color-fill-0); + border-radius: 12px; + display: flex; + flex-direction: row; + flex-shrink: 0; + color: var(--semi-color-disabled-text); + font-size: 14px; + letter-spacing: -0.14px; + line-height: 20px; + + .yourContentHere { + vertical-align: middle; + min-width: 123px; + } + } + } + } +} diff --git a/packages/vchart-aurora-theme/demo/src/normalize.css b/packages/vchart-aurora-theme/demo/src/normalize.css new file mode 100644 index 0000000..01a183b --- /dev/null +++ b/packages/vchart-aurora-theme/demo/src/normalize.css @@ -0,0 +1,128 @@ +* { + box-sizing: border-box; +} + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/packages/vchart-aurora-theme/demo/vite.config.js b/packages/vchart-aurora-theme/demo/vite.config.js new file mode 100644 index 0000000..ade9d9d --- /dev/null +++ b/packages/vchart-aurora-theme/demo/vite.config.js @@ -0,0 +1,23 @@ +import { defineConfig } from 'vite'; +import path from 'path'; +import react from '@vitejs/plugin-react-swc'; +import svgr from 'vite-plugin-svgr'; + +export default defineConfig({ + server: { + host: '0.0.0.0', + https: !!process.env.HTTPS, + open: true + }, + define: { + __DEV__: true, + __VERSION__: JSON.stringify(require('../package.json').version) + }, + resolve: { + alias: { + '@visactor/vchart-aurora-theme': path.resolve(__dirname, '../src/index.ts'), + '@visactor/vchart-theme-utils': path.resolve(__dirname, '../../vchart-theme-utils/src/index.ts') + } + }, + plugins: [react(), svgr()] +}); diff --git a/packages/vchart-aurora-theme/jest.config.js b/packages/vchart-aurora-theme/jest.config.js new file mode 100644 index 0000000..47e294b --- /dev/null +++ b/packages/vchart-aurora-theme/jest.config.js @@ -0,0 +1,9 @@ +const path = require('path'); +const baseJestConfig = require('@internal/jest-config/jest.base'); + +module.exports = { + ...baseJestConfig, + moduleNameMapper: { + ...baseJestConfig.moduleNameMapper + } +}; diff --git a/packages/vchart-aurora-theme/package.json b/packages/vchart-aurora-theme/package.json new file mode 100644 index 0000000..da71513 --- /dev/null +++ b/packages/vchart-aurora-theme/package.json @@ -0,0 +1,88 @@ +{ + "name": "@visactor/vchart-aurora-theme", + "version": "1.12.3", + "description": "Extended themes for VChart", + "sideEffects": false, + "main": "cjs/index.js", + "module": "esm/index.js", + "types": "esm/index.d.ts", + "files": [ + "cjs", + "esm", + "build", + "public" + ], + "scripts": { + "compile": "tsc --noEmit", + "eslint": "eslint --debug --fix src/", + "build": "bundle && npm run export", + "export": "ts-node scripts/export-theme.ts", + "dev": "bundle --clean -f es -w", + "start": "vite serve demo", + "test": "jest", + "test-cov": "jest -w 16 --coverage", + "test-live": "npm run test-watch __tests__/unit/", + "test-watch": "DEBUG_MODE=1 jest --watch" + }, + "peerDependencies": { + "@visactor/vchart": ">=1.10.4" + }, + "dependencies": { + "@visactor/vchart-theme-utils": "workspace:1.12.3" + }, + "devDependencies": { + "@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", + "react": "^18.0.0", + "react-dom": "^18.0.0", + "react-device-detect": "^2.2.2", + "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", + "sass": "^1.63.6", + "@babel/runtime": "latest", + "@visactor/vchart": "2.0.19", + "@visactor/react-vchart": "2.0.19", + "@douyinfe/semi-ui": "^2.51.3", + "@douyinfe/semi-icons": "latest", + "@douyinfe/semi-icons-lab": "latest" + }, + "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-aurora-theme" + }, + "author": { + "name": "VisActor", + "url": "https://www.visactor.io/" + }, + "license": "MIT" +} diff --git a/packages/vchart-aurora-theme/scripts/export-theme.ts b/packages/vchart-aurora-theme/scripts/export-theme.ts new file mode 100644 index 0000000..01ff43e --- /dev/null +++ b/packages/vchart-aurora-theme/scripts/export-theme.ts @@ -0,0 +1,55 @@ +/** + * 导出全量 theme json + */ +import fs from 'fs'; +import path from 'path'; +import { ThemeManager } from '@visactor/vchart'; +import { allThemeMap } from '../src'; + +const VCHART_THEME_PROJECT_ROOT = process.cwd(); +const targetPaths = [path.resolve(VCHART_THEME_PROJECT_ROOT, './public')]; + +const result: string[] = []; +allThemeMap.forEach((value, key) => { + let success = true; + if (!ThemeManager.themeExist(key)) { + ThemeManager.registerTheme(key, value); + } + const theme = ThemeManager.getTheme(key); + const themeJson = JSON.stringify(theme); + targetPaths.forEach(targetPath => { + try { + const fileName = path.resolve(targetPath, `${key}.json`); + if (fs.existsSync(fileName)) { + fs.unlinkSync(fileName); + } + fs.writeFileSync(path.resolve(targetPath, `${key}.json`), themeJson); + } catch { + success = false; + } + }); + if (success) { + result.push(key); + } +}); + +// 自动更新 readme +const readmePath = path.resolve(VCHART_THEME_PROJECT_ROOT, './README.md'); +const readme = fs.readFileSync(readmePath, 'utf8'); +const startTag = ''; +const endTag = ''; +const readmeThemeListStart = readme.indexOf(startTag) + startTag.length; +const readmeThemeListEnd = readme.indexOf(endTag); +const newReadme = `${readme.slice(0, readmeThemeListStart)}\n\n${[...allThemeMap.keys()] + .map( + key => + `- [${key}](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-aurora-theme/public/${key}.json) ${ + allThemeMap.get(key)?.description ?? '' + }` + ) + .join('\n')}\n\n${readme.slice(readmeThemeListEnd)}`; +fs.writeFileSync(readmePath, newReadme); + +console.warn(`\x1B[33m + 主题 ${result.join(', ')} 已导出 +\x1B[0m`); diff --git a/packages/vchart-aurora-theme/src/common/color-scheme.ts b/packages/vchart-aurora-theme/src/common/color-scheme.ts new file mode 100644 index 0000000..3c2794f --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/color-scheme.ts @@ -0,0 +1,66 @@ +import type { BuiltinColorPalette, IThemeColorScheme } from '@visactor/vchart'; + +export const colorList = [ + // 定义分类主题色 + '#3377FF', + '#1FE7F9', + '#53F3B3', + '#FFCD50', + '#ADB8D6', + '#867AFF', + '#FAA64D', + '#FF8082', + '#B46FF4' +]; + +export const barColorList = [ + // 定义分类主题色 + '#3377FF', + '#1FE7F9', + '#FFCD50', + '#53F3B3', + '#ADB8D6', + '#867AFF', + '#FAA64D', + '#FF8082', + '#B46FF4' +]; + +export const nestColorList = [ + ['#3377FF', '#5587FD', '#76A4FF', '#A0C0FF', '#BFD4FF', '#E5EEFF'], + ['#1FE7F9', '#71F1FF', '#A2F5FF', '#BCF8FF', '#D2FAFF', '#E5FDFF'], + ['#53F3B3', '#6BFFC4', '#9FFFD9', '#C1FFE6', '#DCFFF1', '#EBFFF7'], + ['#FFCD50', '#FFD971', '#FFE395', '#FFEBB2', '#FEF2D1', '#FFF8E8'], + ['#ADB8D6', '#BEC8E4', '#CBD3ED', '#D9E0F5', '#E7ECFB', '#F2F5FF'], + ['#867AFF', '#9A8DFF', '#ACA1FF', '#C4BCFF', '#DBD6FF', '#EDEBFF'], + ['#FAA64D', '#FFB96F', '#FECB94', '#FFD8AD', '#FFE5C9', '#FFF4E9'], + ['#FF8082', '#FF99A0', '#FFBBBF', '#FFD4D7', '#FFE8EA', '#FFF7F8'], + ['#B46FF4', '#BF80FF', '#D1A4FD', '#E0C1FF', '#EDDAFF', '#F5ECFF'] +]; + +export const colorScheme: IThemeColorScheme = { + default: { + dataScheme: colorList, + palette: { + bandColor: colorList[0], + /** 背景色 */ + backgroundColor: 'transparent', + + /** 主要字色 */ + primaryFontColor: '#17171A', + /** 次要字色 */ + secondaryFontColor: '#5E5F66', + /** 第三字色 */ + tertiaryFontColor: '#888888', + + /** 轴线颜色 */ + axisDomainColor: '#DCDEE1', + /** 轴标签字色 */ + axisLabelFontColor: '#888888', + /** 轴网格线颜色 */ + axisGridColor: '#EFF0F2', + /** 浮层背景区域颜色 */ + popupBackgroundColor: '#ffffff' + } as unknown as BuiltinColorPalette + } +}; diff --git a/packages/vchart-aurora-theme/src/common/component/crosshair.ts b/packages/vchart-aurora-theme/src/common/component/crosshair.ts new file mode 100644 index 0000000..83367d6 --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/component/crosshair.ts @@ -0,0 +1,36 @@ +import type { ICrosshairTheme } from '@visactor/vchart'; + +export const barCrosshair: ICrosshairTheme = { + xField: { + line: { + type: 'rect', // 设置为矩形类型 + style: { + fill: { + gradient: 'linear', // 线性渐变 + x0: 0, + y0: 0, + x1: 0, + y1: 1, + stops: [ + { offset: 0, color: 'rgba(51, 119, 255, 0.1)' }, + { offset: 1, color: 'rgba(118, 164, 255, 0.1)' } + ] + } + } + } + } +}; + +export const lineCrosshair: ICrosshairTheme = { + bandField: { + line: { + type: 'line', + width: 1, + style: { + lineWidth: 1, + stroke: '#DCDEE1', + lineDash: [2, 2] + } + } + } +}; diff --git a/packages/vchart-aurora-theme/src/common/component/legend.ts b/packages/vchart-aurora-theme/src/common/component/legend.ts new file mode 100644 index 0000000..8888e98 --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/component/legend.ts @@ -0,0 +1,50 @@ +import type { IComponentTheme } from '@visactor/vchart'; + +export const legend: Partial = { + discreteLegend: { + visible: true, + orient: 'top', + position: 'middle', + maxRow: 1, + title: { + visible: false + }, + item: { + visible: true, + background: { + visible: false + }, + shape: { + style: { + symbolType: 'circle' + } + } + }, + allowAllCanceled: false + } +}; + +export const lineLegend: Partial = { + discreteLegend: { + visible: true, + orient: 'top', + position: 'middle', + maxRow: 1, + title: { + visible: false + }, + item: { + visible: true, + background: { + visible: false + }, + shape: { + style: { + size: [8, 2], + symbolType: 'rect' + } + } + }, + allowAllCanceled: false + } +}; diff --git a/packages/vchart-aurora-theme/src/common/component/tooltip.ts b/packages/vchart-aurora-theme/src/common/component/tooltip.ts new file mode 100644 index 0000000..4d43ac4 --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/component/tooltip.ts @@ -0,0 +1,13 @@ +import type { ITooltipTheme } from '@visactor/vchart'; + +export const tooltip: ITooltipTheme = { + panel: { + border: { + radius: 8 + } + }, + shape: { + shapeType: 'circle', + size: 8 + } +}; diff --git a/packages/vchart-aurora-theme/src/common/series/area.ts b/packages/vchart-aurora-theme/src/common/series/area.ts new file mode 100644 index 0000000..9dc0fd8 --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/series/area.ts @@ -0,0 +1,52 @@ +import type { ISeriesTheme, SeriesTypeEnum, SeriesTypeForThemeEnum } from '@visactor/vchart'; + +export const area: Pick< + ISeriesTheme, + SeriesTypeEnum.area | SeriesTypeForThemeEnum.area_vertical | SeriesTypeForThemeEnum.area_horizontal +> = { + area: { + seriesMark: 'line', + point: { + style: { + visible: false, + size: 12, + lineWidth: 2, + shadowColor: 'rgba(0, 0, 0, 0.1)', + shadowBlur: 3, + stroke: '#fff' + }, + state: { + dimension_hover: { + visible: true + } + } + }, + line: { + style: { + curveType: 'monotone', + lineWidth: 2 + } + }, + area: { + style: { + fill: { + gradient: 'linear', + x0: 0, + y0: 0, + x1: 0, + y1: 1, + stops: [ + { + offset: 0, + opacity: 0.7 + }, + { + offset: 1, + opacity: 0 + } + ] + } + } + } + } +}; diff --git a/packages/vchart-aurora-theme/src/common/series/bar.ts b/packages/vchart-aurora-theme/src/common/series/bar.ts new file mode 100644 index 0000000..dd497a6 --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/series/bar.ts @@ -0,0 +1,40 @@ +import type { ISeriesTheme, SeriesTypeEnum, SeriesTypeForThemeEnum } from '@visactor/vchart'; + +const bar: ISeriesTheme['bar'] = { + barMaxWidth: 16, + barGapInGroup: 2, + // barMinHeight: 2, + bar: { + style: { + // @ts-ignore + visible: datum => datum.value > 0 // 数据为0时隐藏柱子 + } + } +}; + +const bar_horizontal: ISeriesTheme['bar'] = { + // @ts-ignore + stackCornerRadius: [0, 2, 2, 0], // FIXME: typeError + label: { + position: 'right', + offset: 4 + } +}; + +const bar_vertical: ISeriesTheme['bar'] = { + // @ts-ignore + stackCornerRadius: [2, 2, 0, 0], // FIXME: typeError, + label: { + position: 'top', + offset: 4 + } +}; + +export const barTheme: Pick< + ISeriesTheme, + SeriesTypeEnum.bar | SeriesTypeForThemeEnum.bar_horizontal | SeriesTypeForThemeEnum.bar_vertical +> = { + bar, + bar_horizontal, + bar_vertical +}; diff --git a/packages/vchart-aurora-theme/src/common/series/funnel.ts b/packages/vchart-aurora-theme/src/common/series/funnel.ts new file mode 100644 index 0000000..a35ce0f --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/series/funnel.ts @@ -0,0 +1,30 @@ +import type { ISeriesTheme } from '@visactor/vchart'; + +export const funnel: ISeriesTheme['funnel'] = { + funnel: { + state: { + selected: { + fill: '#1966FF', + stroke: '#3958E0', + strokeOpacity: 0.2, + lineWidth: 4 + } + } + }, + outerLabel: { + style: { + fontSize: 12 + }, + line: { + style: { + lineWidth: 2 + } + } + }, + label: { + style: { + fill: { type: 'palette', key: 'whiteColors100' }, + fontSize: 12 + } + } +}; diff --git a/packages/vchart-aurora-theme/src/common/series/gauge.ts b/packages/vchart-aurora-theme/src/common/series/gauge.ts new file mode 100644 index 0000000..4455cec --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/series/gauge.ts @@ -0,0 +1,27 @@ +import type { ISeriesTheme } from '@visactor/vchart'; + +export const gauge: ISeriesTheme = { + circularProgress: { + // FIXME: not work + // radius: 1, + // innerRadius: 0.1, + progress: { + style: { + cornerRadius: 100 + } + }, + track: { + interactive: false, + style: { + cornerRadius: 100, + fill: '#DCDEE1', + fillOpacity: 1 + } + } + }, + gaugePointer: { + pin: { visible: false }, + pinBackground: { visible: false }, + pointer: { visible: false } + } +}; diff --git a/packages/vchart-aurora-theme/src/common/series/heatmap.ts b/packages/vchart-aurora-theme/src/common/series/heatmap.ts new file mode 100644 index 0000000..01aeb66 --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/series/heatmap.ts @@ -0,0 +1,23 @@ +import type { ISeriesTheme } from '@visactor/vchart'; + +export const heatmap: ISeriesTheme['heatmap'] = { + cell: { + style: { + stroke: { type: 'palette', key: 'whiteColors100' }, + lineWidth: 1 + }, + state: { + hover: { + zIndex: 100, + stroke: '#000' + } + } + }, + label: { + position: 'inside', + style: { + fill: { type: 'palette', key: 'whiteColors100' }, + fontSize: 12 + } + } +}; diff --git a/packages/vchart-aurora-theme/src/common/series/line.ts b/packages/vchart-aurora-theme/src/common/series/line.ts new file mode 100644 index 0000000..b8ec5fb --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/series/line.ts @@ -0,0 +1,25 @@ +import type { ISeriesTheme } from '@visactor/vchart'; + +export const line: ISeriesTheme['line'] = { + line: { + style: { + lineWidth: 2, + curveType: 'monotone' + } + }, + point: { + style: { + visible: false, + size: 12, + lineWidth: 2, + shadowColor: 'rgba(0, 0, 0, 0.1)', + shadowBlur: 3, + stroke: '#fff' + }, + state: { + dimension_hover: { + visible: true + } + } + } +}; diff --git a/packages/vchart-aurora-theme/src/common/series/pie.ts b/packages/vchart-aurora-theme/src/common/series/pie.ts new file mode 100644 index 0000000..1615fa3 --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/series/pie.ts @@ -0,0 +1,74 @@ +import type { ISeriesTheme } from '@visactor/vchart'; + +export const pie: ISeriesTheme['pie'] = { + outerRadius: 0.8, + innerRadius: 0, + pie: { + style: { + padAngle: 0, + stroke: '#fff', + lineWidth: 2, + lineJoin: 'round', + cornerRadius: 2, + // @ts-ignore + visible: datum => datum.value > 0 // 数据为0时隐藏柱子 + }, + state: { + hover: { + outerRadius: 0.85, + lineWidth: 2 + }, + selected: { + outerRadius: 0.85, + lineWidth: 2 + } + } + }, + minAngle: 3, + label: { + visible: true, + position: 'outside', + formatMethod: (label, data) => { + const midAngle = data.__VCHART_ARC_MIDDLE_ANGLE; + const cos = Math.cos(midAngle); + return { + type: 'rich', + text: [ + { + text: `${data?.value}\n`, + fill: '#111', + fontSize: 16, + fontWeight: 500, + fontFamily: 'douyinNumber', + stroke: false, + textAlign: cos < 0 ? 'right' : 'left' + }, + { + text: data?.type, + fill: '#606165', + fontSize: 12, + fontWeight: 400, + stroke: false, + textAlign: cos < 0 ? 'right' : 'left' + } + ] + }; + }, + line: { + style: { + lineWidth: 2 + } + }, + layout: { + align: 'labelLine' + }, + style: { + type: 'rich', + boundsPadding: [6, 0, 6, 0] + }, + legend: { + visible: true, + orient: 'bottom' + } + } +}; diff --git a/packages/vchart-aurora-theme/src/common/series/radar.ts b/packages/vchart-aurora-theme/src/common/series/radar.ts new file mode 100644 index 0000000..59be477 --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/series/radar.ts @@ -0,0 +1,26 @@ +import type { ISeriesTheme } from '@visactor/vchart'; + +export const radar: ISeriesTheme['radar'] = { + line: { + style: { + lineWidth: 1 + } + }, + point: { + style: { + visible: false, + size: 12, + lineWidth: 2, + shadowColor: 'rgba(0, 0, 0, 0.1)', + shadowBlur: 3, + stroke: { type: 'palette', key: 'whiteColors100' } + } + }, + area: { + visible: true + }, + label: { + position: 'top', + offset: 4 + } +}; diff --git a/packages/vchart-aurora-theme/src/common/series/scatter.ts b/packages/vchart-aurora-theme/src/common/series/scatter.ts new file mode 100644 index 0000000..c509aa8 --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/series/scatter.ts @@ -0,0 +1,16 @@ +import type { ISeriesTheme } from '@visactor/vchart'; + +export const scatter: ISeriesTheme['scatter'] = { + point: { + style: { + symbolType: 'circle', + fillOpacity: 0.35, + lineWidth: 1, + size: 8, + stroke: null + } + }, + label: { + position: 'top' + } +}; diff --git a/packages/vchart-aurora-theme/src/common/series/treemap.ts b/packages/vchart-aurora-theme/src/common/series/treemap.ts new file mode 100644 index 0000000..b423600 --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/series/treemap.ts @@ -0,0 +1,22 @@ +import type { ISeriesTheme } from '@visactor/vchart'; + +export const treemap: ISeriesTheme['treemap'] = { + gapWidth: 0, + leaf: { + style: { + lineWidth: 2, + stroke: { type: 'palette', key: 'whiteColors100' } + }, + state: { + hover: { + fillOpacity: 0.8, + lineWidth: 0 + } + } + }, + label: { + style: { + fill: { type: 'palette', key: 'whiteColors100' } + } + } +}; diff --git a/packages/vchart-aurora-theme/src/common/token.ts b/packages/vchart-aurora-theme/src/common/token.ts new file mode 100644 index 0000000..18fbd70 --- /dev/null +++ b/packages/vchart-aurora-theme/src/common/token.ts @@ -0,0 +1,9 @@ +import type { BuiltinTokenMap } from '@visactor/vchart'; + +export const token: Partial = { + fontFamily: + // eslint-disable-next-line max-len + `"PingFang SC", "-apple-system", "Segoe UI", "Helvetica Neue", Arial, + Roboto, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`, + fontSize: 12 +}; diff --git a/packages/vchart-aurora-theme/src/index.ts b/packages/vchart-aurora-theme/src/index.ts new file mode 100644 index 0000000..98292d7 --- /dev/null +++ b/packages/vchart-aurora-theme/src/index.ts @@ -0,0 +1,62 @@ +import type { ITheme } from '@visactor/vchart'; +import { colorScheme, colorList, barColorList, nestColorList } from './common/color-scheme'; + +import { legend, lineLegend } from './common/component/legend'; +import { token } from './common/token'; +import { tooltip } from './common/component/tooltip'; +import { barCrosshair, lineCrosshair } from './common/component/crosshair'; +import { area } from './common/series/area'; +import { barTheme as bar } from './common/series/bar'; +import { line } from './common/series/line'; +import { scatter } from './common/series/scatter'; +import { pie } from './common/series/pie'; +import { funnel } from './common/series/funnel'; +import { treemap } from './common/series/treemap'; +import { gauge } from './common/series/gauge'; +import { heatmap } from './common/series/heatmap'; +import { radar } from './common/series/radar'; + +export const chartAuroraTheme: ITheme = { + name: 'aurora', + type: 'light', + description: 'light theme for Aurora.', + colorScheme, + component: { + ...legend, + tooltip + }, + chart: { + line: { + component: { + crosshair: lineCrosshair, + ...lineLegend + } + }, + area: { + component: { + crosshair: lineCrosshair, + ...lineLegend + } + }, + bar: { + component: { + crosshair: barCrosshair + }, + colorScheme: { + default: { + dataScheme: barColorList + } + } + } + }, + series: { + pie, + ...bar, + ...area, + line + } +}; + +export { colorList, nestColorList }; + +export const allThemeMap = new Map([[chartAuroraTheme.name, chartAuroraTheme]]) as Map; diff --git a/packages/vchart-aurora-theme/tsconfig.eslint.json b/packages/vchart-aurora-theme/tsconfig.eslint.json new file mode 100644 index 0000000..f676daf --- /dev/null +++ b/packages/vchart-aurora-theme/tsconfig.eslint.json @@ -0,0 +1,10 @@ +{ + "extends": "@internal/ts-config/tsconfig.base.json", + "compilerOptions": { + "types": ["jest", "offscreencanvas", "node"], + "lib": ["DOM", "ESNext"], + "baseUrl": "./", + "rootDir": "./" + }, + "include": ["src", "__tests__", "demo"] +} diff --git a/packages/vchart-aurora-theme/tsconfig.json b/packages/vchart-aurora-theme/tsconfig.json new file mode 100644 index 0000000..9288787 --- /dev/null +++ b/packages/vchart-aurora-theme/tsconfig.json @@ -0,0 +1,18 @@ +{ + "extends": "@internal/ts-config/tsconfig.base.json", + "compilerOptions": { + "types": ["jest", "offscreencanvas", "node"], + "lib": ["DOM", "ESNext"], + "baseUrl": "./", + "rootDir": "./src", + "outDir": "./es", + "composite": true + }, + "ts-node": { + "transpileOnly": true, + "compilerOptions": { + "module": "commonjs" + } + }, + "include": ["src"] +} diff --git a/packages/vchart-aurora-theme/tsconfig.test.json b/packages/vchart-aurora-theme/tsconfig.test.json new file mode 100644 index 0000000..89f837a --- /dev/null +++ b/packages/vchart-aurora-theme/tsconfig.test.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "paths": { + "@visactor/vchart-theme-utils": ["../vchart-theme-utils/src"] + } + }, + "references": [] +} diff --git a/packages/vchart-semi-theme/package.json b/packages/vchart-semi-theme/package.json index 05c768e..b344a6a 100644 --- a/packages/vchart-semi-theme/package.json +++ b/packages/vchart-semi-theme/package.json @@ -63,8 +63,8 @@ "vite": "^4.5.0", "vite-plugin-svgr": "^4.1.0", "@babel/runtime": "latest", - "@visactor/vchart": "1.12.1", - "@visactor/react-vchart": "1.12.1", + "@visactor/vchart": "2.0.19", + "@visactor/react-vchart": "2.0.19", "@douyinfe/semi-ui": "^2.51.3", "@douyinfe/semi-icons": "latest", "@douyinfe/semi-icons-lab": "latest" diff --git a/packages/vchart-theme-converter/package.json b/packages/vchart-theme-converter/package.json index f7bfd90..0285bfa 100644 --- a/packages/vchart-theme-converter/package.json +++ b/packages/vchart-theme-converter/package.json @@ -23,8 +23,8 @@ "@visactor/vutils": "~0.18.15" }, "devDependencies": { - "@visactor/vchart": "1.12.1", - "@visactor/react-vchart": "1.12.1", + "@visactor/vchart": "2.0.19", + "@visactor/react-vchart": "2.0.19", "@visactor/vchart-semi-theme": "workspace:1.12.3", "@visactor/vchart-theme": "workspace:1.12.3", "echarts": "5.5.0", diff --git a/packages/vchart-theme-demo-component/package.json b/packages/vchart-theme-demo-component/package.json index fcb8527..1a14e72 100644 --- a/packages/vchart-theme-demo-component/package.json +++ b/packages/vchart-theme-demo-component/package.json @@ -50,8 +50,8 @@ "@types/jest": "~29.5.0", "@types/offscreencanvas": "2019.6.4", "@types/node": "*", - "@visactor/vchart": "1.12.1", - "@visactor/react-vchart": "1.12.1" + "@visactor/vchart": "2.0.19", + "@visactor/react-vchart": "2.0.19" }, "publishConfig": { "access": "public" diff --git a/packages/vchart-theme-utils/package.json b/packages/vchart-theme-utils/package.json index 2e8f306..9953967 100644 --- a/packages/vchart-theme-utils/package.json +++ b/packages/vchart-theme-utils/package.json @@ -36,8 +36,8 @@ "ts-jest": "~29.1.0", "@types/jest": "~29.5.0", "@rushstack/eslint-patch": "~1.1.4", - "@visactor/vchart": "1.12.1", - "@visactor/vchart-types": "1.12.1", + "@visactor/vchart": "2.0.19", + "@visactor/vchart-types": "2.0.19", "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 fa24e06..be4455d 100644 --- a/packages/vchart-theme/package.json +++ b/packages/vchart-theme/package.json @@ -38,8 +38,8 @@ "ts-jest": "~29.1.0", "@types/jest": "~29.5.0", "@rushstack/eslint-patch": "~1.1.4", - "@visactor/vchart": "1.12.1", - "@visactor/vchart-types": "1.12.1", + "@visactor/vchart": "2.0.19", + "@visactor/vchart-types": "2.0.19", "eslint": "~8.18.0", "vite": "^4.5.0", "typescript": "4.9.5", diff --git a/packages/vchart-tt-platform-theme/package.json b/packages/vchart-tt-platform-theme/package.json index 43f0f71..d6687da 100644 --- a/packages/vchart-tt-platform-theme/package.json +++ b/packages/vchart-tt-platform-theme/package.json @@ -65,8 +65,8 @@ "vite-plugin-svgr": "^4.1.0", "node-sass": "^9.0.0", "@babel/runtime": "latest", - "@visactor/vchart": "1.12.1", - "@visactor/react-vchart": "1.12.1", + "@visactor/vchart": "2.0.19", + "@visactor/react-vchart": "2.0.19", "@douyinfe/semi-ui": "^2.51.3", "@douyinfe/semi-icons": "latest", "@douyinfe/semi-icons-lab": "latest", diff --git a/packages/vchart-ve-o-theme/package.json b/packages/vchart-ve-o-theme/package.json index 1a6ca6d..6926d4e 100644 --- a/packages/vchart-ve-o-theme/package.json +++ b/packages/vchart-ve-o-theme/package.json @@ -74,8 +74,8 @@ "react-redux": "^7.2.6", "react-device-detect": "^2.2.2", "redux": "^4.1.2", - "@visactor/vchart": "1.12.1", - "@visactor/react-vchart": "1.12.1", + "@visactor/vchart": "2.0.19", + "@visactor/react-vchart": "2.0.19", "@arco-design/webpack-plugin": "^1.6.0", "@arco-plugins/vite-plugin-svgr": "^0.7.2", "@svgr/webpack": "^5.5.0", diff --git a/rush.json b/rush.json index 42fc846..0d0462c 100644 --- a/rush.json +++ b/rush.json @@ -54,6 +54,13 @@ "shouldPublish": true, "versionPolicyName": "vchartThemeMain" }, + { + "packageName": "@visactor/vchart-aurora-theme", + "projectFolder": "packages/vchart-aurora-theme", + "tags": ["package"], + "shouldPublish": true, + "versionPolicyName": "vchartThemeMain" + }, { "packageName": "@visactor/vchart-arco-theme", "projectFolder": "packages/vchart-arco-theme", diff --git a/share/chart-demo/package.json b/share/chart-demo/package.json index b586357..b87e046 100644 --- a/share/chart-demo/package.json +++ b/share/chart-demo/package.json @@ -25,8 +25,8 @@ "@visactor/vchart": ">=1.10.4" }, "devDependencies": { - "@visactor/vchart": "1.12.1", - "@visactor/vchart-types": "1.12.1", + "@visactor/vchart": "2.0.19", + "@visactor/vchart-types": "2.0.19", "@internal/bundler": "workspace:*", "@internal/eslint-config": "workspace:*", "@internal/ts-config": "workspace:*",