From a25c9df3113a426392a1c8f541b447d9b5aae7a5 Mon Sep 17 00:00:00 2001 From: kkxxkk2019 Date: Tue, 1 Apr 2025 13:30:07 +0800 Subject: [PATCH 01/19] chore: update rush change log --- common/config/rush/pnpm-config.json | 8 +- common/config/rush/pnpm-lock.yaml | 151 +++++++++++-------------- docs/package.json | 6 +- packages/openinula-vchart/package.json | 6 +- packages/react-vchart/package.json | 6 +- packages/vchart-extension/package.json | 8 +- packages/vchart/package.json | 8 +- packages/vstory/package.json | 6 +- tools/story-player/package.json | 8 +- 9 files changed, 93 insertions(+), 114 deletions(-) diff --git a/common/config/rush/pnpm-config.json b/common/config/rush/pnpm-config.json index 1ab89a9366..8bc1b2e2ac 100644 --- a/common/config/rush/pnpm-config.json +++ b/common/config/rush/pnpm-config.json @@ -83,9 +83,9 @@ * PNPM documentation: https://pnpm.io/package_json#pnpmoverrides */ "globalOverrides": { - // "@visactor/vrender-core": "0.22.3", - // "@visactor/vrender-kits": "0.22.3", - // "@visactor/vrender-components": "0.22.3" + "@visactor/vrender-core": "0.22.7-alpha.2", + "@visactor/vrender-kits": "0.22.7-alpha.2", + "@visactor/vrender-components": "0.22.7-alpha.2" }, /** * The `globalPeerDependencyRules` setting provides various settings for suppressing validation errors @@ -190,4 +190,4 @@ // }, // "pnpm": { "futurePnpmFeature": true } } -} +} \ No newline at end of file diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index 9523e10817..dc13dbef8e 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -1,5 +1,10 @@ lockfileVersion: 5.4 +overrides: + '@visactor/vrender-core': 0.22.7-alpha.2 + '@visactor/vrender-kits': 0.22.7-alpha.2 + '@visactor/vrender-components': 0.22.7-alpha.2 + importers: .: @@ -23,8 +28,8 @@ importers: '@visactor/vchart-theme': ~1.6.6 '@visactor/vgrammar': 0.16.3 '@visactor/vmind': 1.2.4-alpha.5 - '@visactor/vrender': 0.22.6 - '@visactor/vrender-kits': 0.22.6 + '@visactor/vrender': 0.22.7-alpha.2 + '@visactor/vrender-kits': 0.22.7-alpha.2 '@visactor/vtable': 1.12.0 '@visactor/vtable-calendar': 1.12.0 '@visactor/vtable-editors': 1.12.0 @@ -61,8 +66,8 @@ importers: '@visactor/vchart-theme': 1.6.9 '@visactor/vgrammar': 0.16.3 '@visactor/vmind': 1.2.4-alpha.5 - '@visactor/vrender': 0.22.6 - '@visactor/vrender-kits': 0.22.6 + '@visactor/vrender': 0.22.7-alpha.2 + '@visactor/vrender-kits': 0.22.7-alpha.2 '@visactor/vtable': 1.12.0 '@visactor/vtable-calendar': 1.12.0 '@visactor/vtable-editors': 1.12.0 @@ -147,8 +152,8 @@ importers: '@types/react-is': ^17.0.3 '@visactor/vchart': workspace:1.13.8 '@visactor/vgrammar-core': 0.16.3 - '@visactor/vrender-core': 0.22.6 - '@visactor/vrender-kits': 0.22.6 + '@visactor/vrender-core': 0.22.7-alpha.2 + '@visactor/vrender-kits': 0.22.7-alpha.2 '@visactor/vutils': ~0.19.4 '@vitejs/plugin-react': 3.1.0 eslint: ~8.18.0 @@ -168,8 +173,8 @@ importers: dependencies: '@visactor/vchart': link:../vchart '@visactor/vgrammar-core': 0.16.3 - '@visactor/vrender-core': 0.22.6 - '@visactor/vrender-kits': 0.22.6 + '@visactor/vrender-core': 0.22.7-alpha.2 + '@visactor/vrender-kits': 0.22.7-alpha.2 '@visactor/vutils': 0.19.4 react-is: 18.3.1 devDependencies: @@ -212,8 +217,8 @@ importers: '@types/react-is': ^17.0.3 '@visactor/vchart': workspace:1.13.8 '@visactor/vgrammar-core': 0.16.3 - '@visactor/vrender-core': 0.22.6 - '@visactor/vrender-kits': 0.22.6 + '@visactor/vrender-core': 0.22.7-alpha.2 + '@visactor/vrender-kits': 0.22.7-alpha.2 '@visactor/vutils': ~0.19.4 '@vitejs/plugin-react': 3.1.0 eslint: ~8.18.0 @@ -234,8 +239,8 @@ importers: dependencies: '@visactor/vchart': link:../vchart '@visactor/vgrammar-core': 0.16.3 - '@visactor/vrender-core': 0.22.6 - '@visactor/vrender-kits': 0.22.6 + '@visactor/vrender-core': 0.22.7-alpha.2 + '@visactor/vrender-kits': 0.22.7-alpha.2 '@visactor/vutils': 0.19.4 react-is: 18.3.1 devDependencies: @@ -380,9 +385,9 @@ importers: '@visactor/vgrammar-venn': 0.16.3 '@visactor/vgrammar-wordcloud': 0.16.3 '@visactor/vgrammar-wordcloud-shape': 0.16.3 - '@visactor/vrender-components': 0.22.6 - '@visactor/vrender-core': 0.22.6 - '@visactor/vrender-kits': 0.22.6 + '@visactor/vrender-components': 0.22.7-alpha.2 + '@visactor/vrender-core': 0.22.7-alpha.2 + '@visactor/vrender-kits': 0.22.7-alpha.2 '@visactor/vscale': ~0.19.4 '@visactor/vutils': ~0.19.4 '@visactor/vutils-extension': workspace:1.13.8 @@ -428,9 +433,9 @@ importers: '@visactor/vgrammar-venn': 0.16.3 '@visactor/vgrammar-wordcloud': 0.16.3 '@visactor/vgrammar-wordcloud-shape': 0.16.3 - '@visactor/vrender-components': 0.22.6 - '@visactor/vrender-core': 0.22.6 - '@visactor/vrender-kits': 0.22.6 + '@visactor/vrender-components': 0.22.7-alpha.2 + '@visactor/vrender-core': 0.22.7-alpha.2 + '@visactor/vrender-kits': 0.22.7-alpha.2 '@visactor/vscale': 0.19.4 '@visactor/vutils': 0.19.4 '@visactor/vutils-extension': link:../vutils-extension @@ -492,9 +497,9 @@ importers: '@visactor/vchart': workspace:1.13.8 '@visactor/vdataset': ~0.19.4 '@visactor/vgrammar-core': 0.16.3 - '@visactor/vrender-components': 0.22.6 - '@visactor/vrender-core': 0.22.6 - '@visactor/vrender-kits': 0.22.6 + '@visactor/vrender-components': 0.22.7-alpha.2 + '@visactor/vrender-core': 0.22.7-alpha.2 + '@visactor/vrender-kits': 0.22.7-alpha.2 '@visactor/vutils': ~0.19.4 '@vitejs/plugin-react': 3.1.0 canvas: 2.11.2 @@ -516,9 +521,9 @@ importers: '@visactor/vchart': link:../vchart '@visactor/vdataset': 0.19.4 '@visactor/vgrammar-core': 0.16.3 - '@visactor/vrender-components': 0.22.6 - '@visactor/vrender-core': 0.22.6 - '@visactor/vrender-kits': 0.22.6 + '@visactor/vrender-components': 0.22.7-alpha.2 + '@visactor/vrender-core': 0.22.7-alpha.2 + '@visactor/vrender-kits': 0.22.7-alpha.2 '@visactor/vutils': 0.19.4 devDependencies: '@internal/bundler': link:../../tools/bundler @@ -890,9 +895,9 @@ importers: '@typescript-eslint/eslint-plugin': 5.30.0 '@typescript-eslint/parser': 5.30.0 '@visactor/vchart': workspace:1.13.8 - '@visactor/vrender': 0.22.6 - '@visactor/vrender-core': 0.22.6 - '@visactor/vrender-kits': 0.22.6 + '@visactor/vrender': 0.22.7-alpha.2 + '@visactor/vrender-core': 0.22.7-alpha.2 + '@visactor/vrender-kits': 0.22.7-alpha.2 '@visactor/vutils': ~0.19.4 cross-env: ^7.0.3 eslint: ~8.18.0 @@ -905,9 +910,9 @@ importers: vite: 3.2.6 dependencies: '@visactor/vchart': link:../../packages/vchart - '@visactor/vrender': 0.22.6 - '@visactor/vrender-core': 0.22.6 - '@visactor/vrender-kits': 0.22.6 + '@visactor/vrender': 0.22.7-alpha.2 + '@visactor/vrender-core': 0.22.7-alpha.2 + '@visactor/vrender-kits': 0.22.7-alpha.2 '@visactor/vutils': 0.19.4 devDependencies: '@internal/bundler': link:../bundler @@ -4874,9 +4879,9 @@ packages: '@visactor/vdataset': 0.19.4 '@visactor/vgrammar-coordinate': 0.16.3 '@visactor/vgrammar-util': 0.16.3 - '@visactor/vrender-components': 0.22.6 - '@visactor/vrender-core': 0.22.6 - '@visactor/vrender-kits': 0.22.6 + '@visactor/vrender-components': 0.22.7-alpha.2 + '@visactor/vrender-core': 0.22.7-alpha.2 + '@visactor/vrender-kits': 0.22.7-alpha.2 '@visactor/vscale': 0.19.4 '@visactor/vutils': 0.19.4 dev: false @@ -4886,8 +4891,8 @@ packages: dependencies: '@visactor/vgrammar-core': 0.16.3 '@visactor/vgrammar-util': 0.16.3 - '@visactor/vrender-core': 0.22.6 - '@visactor/vrender-kits': 0.22.6 + '@visactor/vrender-core': 0.22.7-alpha.2 + '@visactor/vrender-kits': 0.22.7-alpha.2 '@visactor/vutils': 0.19.4 dev: false @@ -4905,15 +4910,15 @@ packages: dependencies: '@visactor/vgrammar-core': 0.16.3 '@visactor/vgrammar-util': 0.16.3 - '@visactor/vrender-core': 0.22.6 - '@visactor/vrender-kits': 0.22.6 + '@visactor/vrender-core': 0.22.7-alpha.2 + '@visactor/vrender-kits': 0.22.7-alpha.2 '@visactor/vutils': 0.19.4 dev: false /@visactor/vgrammar-util/0.16.3: resolution: {integrity: sha512-aF9MqjTR7YvBAVDtp1A/CDVcXFGlO+TxkHVPEQVrn7cVu2DGRXCZnu/iQ+AUhttVYaWlSRflZj4cnQrKS4zy4g==} dependencies: - '@visactor/vrender-core': 0.22.6 + '@visactor/vrender-core': 0.22.7-alpha.2 '@visactor/vutils': 0.19.4 dev: false @@ -4922,8 +4927,8 @@ packages: dependencies: '@visactor/vgrammar-core': 0.16.3 '@visactor/vgrammar-util': 0.16.3 - '@visactor/vrender-core': 0.22.6 - '@visactor/vrender-kits': 0.22.6 + '@visactor/vrender-core': 0.22.7-alpha.2 + '@visactor/vrender-kits': 0.22.7-alpha.2 '@visactor/vutils': 0.19.4 dev: false @@ -4932,8 +4937,8 @@ packages: dependencies: '@visactor/vgrammar-core': 0.16.3 '@visactor/vgrammar-util': 0.16.3 - '@visactor/vrender-core': 0.22.6 - '@visactor/vrender-kits': 0.22.6 + '@visactor/vrender-core': 0.22.7-alpha.2 + '@visactor/vrender-kits': 0.22.7-alpha.2 '@visactor/vscale': 0.19.4 '@visactor/vutils': 0.19.4 dev: false @@ -4943,8 +4948,8 @@ packages: dependencies: '@visactor/vgrammar-core': 0.16.3 '@visactor/vgrammar-util': 0.16.3 - '@visactor/vrender-core': 0.22.6 - '@visactor/vrender-kits': 0.22.6 + '@visactor/vrender-core': 0.22.7-alpha.2 + '@visactor/vrender-kits': 0.22.7-alpha.2 '@visactor/vutils': 0.19.4 dev: false @@ -4972,64 +4977,38 @@ packages: - debug dev: false - /@visactor/vrender-components/0.21.0-alpha.4: - resolution: {integrity: sha512-vVI/Xt0qK50FeTloLfczEMr9CBnpzoRNAsKPZvUgh67i1mBiefJouQSpxQcpWeGrKO8WHNBPVFsQqQBoutmLkQ==} + /@visactor/vrender-components/0.22.7-alpha.2: + resolution: {integrity: sha512-VwiAuHyw66u5bi/LjfFraYUx2y+XuEDnEjSKI+BsEARCPnhL9rFJtsqj6pEjLNs/90J96QcWWFDRHikBZAnKFw==} dependencies: - '@visactor/vrender-core': 0.21.0-alpha.4 - '@visactor/vrender-kits': 0.21.0-alpha.4 - '@visactor/vscale': 0.18.18 - '@visactor/vutils': 0.18.18 - gifuct-js: 2.1.2 - dev: false - - /@visactor/vrender-components/0.22.6: - resolution: {integrity: sha512-YHLjA2GzP5LQxAAgzo2iniBxDldy9GtEzjm/sCXrrOGzzwMFlyhAeXCbUVEIMhTTfpRdK5LocAP1PSJsv4BObA==} - dependencies: - '@visactor/vrender-core': 0.22.6 - '@visactor/vrender-kits': 0.22.6 + '@visactor/vrender-core': 0.22.7-alpha.2 + '@visactor/vrender-kits': 0.22.7-alpha.2 '@visactor/vscale': 0.19.4 '@visactor/vutils': 0.19.4 dev: false - /@visactor/vrender-core/0.21.0-alpha.4: - resolution: {integrity: sha512-kZk5HiJSvAfZLb3GZXvRykFWjhTXlpt0i/+e5kU8AoLYt9T15H9xRv/w7jYEe94dBXd+yCVH4soN2Ad4YXQO6g==} - dependencies: - '@visactor/vutils': 0.18.18 - color-convert: 2.0.1 - dev: false - - /@visactor/vrender-core/0.22.6: - resolution: {integrity: sha512-R/MPjAuF9vT5atn7tAqhA5K1FMqYzv2SOhREsJpgP6QbJSnGR2uMTrNENRFvrM81ikR6yeh7WeTx6Fh2av+M4A==} + /@visactor/vrender-core/0.22.7-alpha.2: + resolution: {integrity: sha512-fo+dcGsE/Wd4an1eGwJONcBYeVunErzajkfMDFnNAfOJdsIXbeCYN8YHhTg4tRyjbJf6Qzkg+a1O4FP5w4RXfg==} dependencies: '@visactor/vutils': 0.19.4 color-convert: 2.0.1 dev: false - /@visactor/vrender-kits/0.21.0-alpha.4: - resolution: {integrity: sha512-OCFruyiXBjrxDulbRcmphMCzzMFFJK7gN1C25M1YwsM43bKA18olr/0HL7fQt0zQZUcTPmVHDVuOTi55YARVCg==} - dependencies: - '@resvg/resvg-js': 2.4.1 - '@visactor/vrender-core': 0.21.0-alpha.4 - '@visactor/vutils': 0.18.18 - roughjs: 4.5.2 - dev: false - - /@visactor/vrender-kits/0.22.6: - resolution: {integrity: sha512-0yRvhMhnT3JeFKCOi8riubkuKjNMIlzcW1FQV+kIyOGGV6nCSjvFL4+XDuEGalHlHt76BSlM1/cmxnmRNTHCRQ==} + /@visactor/vrender-kits/0.22.7-alpha.2: + resolution: {integrity: sha512-w3Z094VD7bOhpvMIL063K3kEWIOgUU2uwtdq8SiaCkYkESgj+sCjutEVm/kt5tYjv77Kj0dMPe2iRqYuC/vNdQ==} dependencies: '@resvg/resvg-js': 2.4.1 - '@visactor/vrender-core': 0.22.6 + '@visactor/vrender-core': 0.22.7-alpha.2 '@visactor/vutils': 0.19.4 gifuct-js: 2.1.2 lottie-web: 5.12.2 roughjs: 4.5.2 dev: false - /@visactor/vrender/0.22.6: - resolution: {integrity: sha512-hcLE3jGJxACBQXwiw4xjOEE2fcLuwTpGQn5m5wDULhgMGG7VuNJoXZNHjcRw2zHiw0J/PRIqAAU7pdamxYw6uA==} + /@visactor/vrender/0.22.7-alpha.2: + resolution: {integrity: sha512-1sG1j/QYd+a94FLPcu64QSD6eCSm2KWZ9yEuMwg9R5ATvHjI7Yqa0wbgZIRdsoVECYDGlZbKljsBEbIy/jBlgQ==} dependencies: - '@visactor/vrender-core': 0.22.6 - '@visactor/vrender-kits': 0.22.6 + '@visactor/vrender-core': 0.22.7-alpha.2 + '@visactor/vrender-kits': 0.22.7-alpha.2 dev: false /@visactor/vscale/0.18.18: @@ -5071,9 +5050,9 @@ packages: resolution: {integrity: sha512-yK33y0RP/K3SNPJMJ3nb6dPyWtBXXJy39RvkJYOa7yqb6c46o+/lP9d1fxdBXDgxNkNuIOPC2pVqyEhOiq3XGw==} dependencies: '@visactor/vdataset': 0.18.18 - '@visactor/vrender-components': 0.21.0-alpha.4 - '@visactor/vrender-core': 0.21.0-alpha.4 - '@visactor/vrender-kits': 0.21.0-alpha.4 + '@visactor/vrender-components': 0.22.7-alpha.2 + '@visactor/vrender-core': 0.22.7-alpha.2 + '@visactor/vrender-kits': 0.22.7-alpha.2 '@visactor/vscale': 0.18.18 '@visactor/vtable-editors': 1.12.0 '@visactor/vutils': 0.18.18 diff --git a/docs/package.json b/docs/package.json index d595435d03..fed4de3e99 100644 --- a/docs/package.json +++ b/docs/package.json @@ -19,8 +19,8 @@ "@visactor/vchart-theme": "~1.6.6", "@visactor/vmind": "1.2.4-alpha.5", "@visactor/vutils": "~0.19.4", - "@visactor/vrender": "0.22.6", - "@visactor/vrender-kits": "0.22.6", + "@visactor/vrender": "0.22.7-alpha.2", + "@visactor/vrender-kits": "0.22.7-alpha.2", "@visactor/vgrammar": "0.16.3", "@visactor/vtable": "1.12.0", "@visactor/vtable-editors": "1.12.0", @@ -59,4 +59,4 @@ "react-device-detect": "^2.2.2", "minimist": "1.2.8" } -} +} \ No newline at end of file diff --git a/packages/openinula-vchart/package.json b/packages/openinula-vchart/package.json index 621c0b43ee..8450bb9dbd 100644 --- a/packages/openinula-vchart/package.json +++ b/packages/openinula-vchart/package.json @@ -30,8 +30,8 @@ "dependencies": { "@visactor/vchart": "workspace:1.13.8", "@visactor/vutils": "~0.19.4", - "@visactor/vrender-core": "0.22.6", - "@visactor/vrender-kits": "0.22.6", + "@visactor/vrender-core": "0.22.7-alpha.2", + "@visactor/vrender-kits": "0.22.7-alpha.2", "@visactor/vgrammar-core": "0.16.3", "react-is": "^18.2.0" }, @@ -79,4 +79,4 @@ "access": "public", "registry": "https://registry.npmjs.org/" } -} +} \ No newline at end of file diff --git a/packages/react-vchart/package.json b/packages/react-vchart/package.json index bd4703bf06..4bdfcd647b 100644 --- a/packages/react-vchart/package.json +++ b/packages/react-vchart/package.json @@ -30,8 +30,8 @@ "dependencies": { "@visactor/vchart": "workspace:1.13.8", "@visactor/vutils": "~0.19.4", - "@visactor/vrender-core": "0.22.6", - "@visactor/vrender-kits": "0.22.6", + "@visactor/vrender-core": "0.22.7-alpha.2", + "@visactor/vrender-kits": "0.22.7-alpha.2", "@visactor/vgrammar-core": "0.16.3", "react-is": "^18.2.0" }, @@ -83,4 +83,4 @@ "access": "public", "registry": "https://registry.npmjs.org/" } -} +} \ No newline at end of file diff --git a/packages/vchart-extension/package.json b/packages/vchart-extension/package.json index a8aed0ca94..91823b7be1 100644 --- a/packages/vchart-extension/package.json +++ b/packages/vchart-extension/package.json @@ -21,9 +21,9 @@ "start": "ts-node __tests__/runtime/browser/scripts/initVite.ts && vite serve __tests__/runtime/browser" }, "dependencies": { - "@visactor/vrender-core": "0.22.6", - "@visactor/vrender-kits": "0.22.6", - "@visactor/vrender-components": "0.22.6", + "@visactor/vrender-core": "0.22.7-alpha.2", + "@visactor/vrender-kits": "0.22.7-alpha.2", + "@visactor/vrender-components": "0.22.7-alpha.2", "@visactor/vgrammar-core": "0.16.3", "@visactor/vutils": "~0.19.4", "@visactor/vdataset": "~0.19.4", @@ -60,4 +60,4 @@ "registry": "https://registry.npmjs.org/" }, "license": "MIT" -} +} \ No newline at end of file diff --git a/packages/vchart/package.json b/packages/vchart/package.json index 33d8232e0e..b567b67c33 100644 --- a/packages/vchart/package.json +++ b/packages/vchart/package.json @@ -121,9 +121,9 @@ "@visactor/vutils": "~0.19.4", "@visactor/vdataset": "~0.19.4", "@visactor/vscale": "~0.19.4", - "@visactor/vrender-core": "0.22.6", - "@visactor/vrender-kits": "0.22.6", - "@visactor/vrender-components": "0.22.6", + "@visactor/vrender-core": "0.22.7-alpha.2", + "@visactor/vrender-kits": "0.22.7-alpha.2", + "@visactor/vrender-components": "0.22.7-alpha.2", "@visactor/vgrammar-core": "0.16.3", "@visactor/vgrammar-projection": "0.16.3", "@visactor/vgrammar-wordcloud": "0.16.3", @@ -138,4 +138,4 @@ "access": "public", "registry": "https://registry.npmjs.org/" } -} +} \ No newline at end of file diff --git a/packages/vstory/package.json b/packages/vstory/package.json index c843ef3885..2a7208852d 100644 --- a/packages/vstory/package.json +++ b/packages/vstory/package.json @@ -21,9 +21,9 @@ }, "dependencies": { "@visactor/vchart": "workspace:1.11.0", - "@visactor/vrender-core": "0.22.6", - "@visactor/vrender-kits": "0.22.6", - "@visactor/vrender-components": "0.22.6", + "@visactor/vrender-core": "0.22.7-alpha.2", + "@visactor/vrender-kits": "0.22.7-alpha.2", + "@visactor/vrender-components": "0.22.7-alpha.2", "@visactor/vutils": "~0.19.4" }, "devDependencies": { diff --git a/tools/story-player/package.json b/tools/story-player/package.json index 6be0042412..f5e8f37965 100644 --- a/tools/story-player/package.json +++ b/tools/story-player/package.json @@ -56,10 +56,10 @@ "vite": "3.2.6" }, "dependencies": { - "@visactor/vrender-core": "0.22.6", - "@visactor/vrender-kits": "0.22.6", + "@visactor/vrender-core": "0.22.7-alpha.2", + "@visactor/vrender-kits": "0.22.7-alpha.2", "@visactor/vchart": "workspace:1.13.8", - "@visactor/vrender": "0.22.6", + "@visactor/vrender": "0.22.7-alpha.2", "@visactor/vutils": "~0.19.4" } -} +} \ No newline at end of file From 10a162a68eaddaf27505b83887be4686a2379281 Mon Sep 17 00:00:00 2001 From: kkxxkk2019 Date: Tue, 1 Apr 2025 13:51:10 +0800 Subject: [PATCH 02/19] feat: markLine and markArea's label can define more than one, closed #3868 --- .../marker/mark-area/base-mark-area.ts | 41 +++++++++------- .../marker/mark-area/interface/theme.ts | 14 +++--- .../marker/mark-line/base-mark-line.ts | 43 +++++++++-------- .../marker/mark-line/cartesian-mark-line.ts | 48 ++++++++++--------- .../marker/mark-line/interface/theme.ts | 14 +++--- 5 files changed, 90 insertions(+), 70 deletions(-) diff --git a/packages/vchart/src/component/marker/mark-area/base-mark-area.ts b/packages/vchart/src/component/marker/mark-area/base-mark-area.ts index b7e99c906f..44a9a4ae7b 100644 --- a/packages/vchart/src/component/marker/mark-area/base-mark-area.ts +++ b/packages/vchart/src/component/marker/mark-area/base-mark-area.ts @@ -13,6 +13,7 @@ import { transformToGraphic } from '../../../util/style'; import { BaseMarker } from '../base-marker'; import { LayoutZIndex } from '../../../constant/layout'; import type { IGroup } from '@visactor/vrender-core'; +import { array } from '@visactor/vutils'; export abstract class BaseMarkArea extends BaseMarker implements IMarkArea { static specKey = 'markArea'; specKey = 'markArea'; @@ -35,7 +36,7 @@ export abstract class BaseMarkArea extends BaseMarker implements } protected _createMarkerComponent() { - const label = this._spec.label ?? {}; + const label = array(this._spec.label ?? {}); const markAreaAttrs: MarkAreaAttrs | MarkArcAreaAttrs = { zIndex: this.layoutZIndex, interactive: this._spec.interactive ?? true, @@ -61,15 +62,17 @@ export abstract class BaseMarkArea extends BaseMarker implements this._markAttributeContext ), clipInRange: this._spec.clip ?? false, - label: transformLabelAttributes(label, this._markerData, this._markAttributeContext), + label: label.map((labelItem: any) => { + return transformLabelAttributes(labelItem, this._markerData, this._markAttributeContext); + }), state: { area: transformState(this._spec.area?.state, this._markerData, this._markAttributeContext), - label: transformState(this._spec.label?.state, this._markerData, this._markAttributeContext), - labelBackground: transformState( - this._spec?.label?.labelBackground?.state, - this._markerData, - this._markAttributeContext - ) + label: label.map((labelItem: any) => { + return transformState(labelItem.state, this._markerData, this._markAttributeContext); + }), + labelBackground: label.map((labelItem: any) => { + return transformState(labelItem.labelBackground?.state, this._markerData, this._markAttributeContext); + }) }, animation: this._spec.animation ?? false, animationEnter: this._spec.animationEnter, @@ -98,7 +101,7 @@ export abstract class BaseMarkArea extends BaseMarker implements : seriesData; let limitRect; - if (spec.clip || spec.label?.confine) { + if (spec.clip || array(spec.label).some(labelCfg => labelCfg?.confine)) { const { minX, maxX, minY, maxY } = computeClipRange([ startRelativeSeries.getRegion(), endRelativeSeries.getRegion(), @@ -113,15 +116,21 @@ export abstract class BaseMarkArea extends BaseMarker implements } if (this._markerComponent) { + const prevLabelAttrs = array(this._markerComponent.attribute?.label); + const specLabels = array(this._spec.label); + this._markerComponent.setAttributes({ ...pointsAttr, - label: { - ...this._markerComponent.attribute?.label, - text: this._spec.label.formatMethod - ? // type error here will be fixed in components - (this._spec.label.formatMethod(dataPoints, seriesData) as any) - : this._markerComponent.attribute?.label?.text - }, + label: prevLabelAttrs.map((prevLabel, index) => { + const specLabel = specLabels[index] || {}; + return { + ...prevLabel, + text: specLabel.formatMethod + ? // type error here will be fixed in components + (specLabel.formatMethod(dataPoints, seriesData) as any) + : prevLabel?.text + }; + }), limitRect, dx: this._layoutOffsetX, dy: this._layoutOffsetY diff --git a/packages/vchart/src/component/marker/mark-area/interface/theme.ts b/packages/vchart/src/component/marker/mark-area/interface/theme.ts index 07987497d7..1c6a7926ec 100644 --- a/packages/vchart/src/component/marker/mark-area/interface/theme.ts +++ b/packages/vchart/src/component/marker/mark-area/interface/theme.ts @@ -2,6 +2,13 @@ import type { IMarkAreaLabelPosition, IMarkCommonArcLabelPosition } from '@visac import type { IArcMarkSpec, IPolygonMarkSpec } from '../../../../typings'; import type { IMarkerLabelWithoutRefSpec, IMarkerState } from '../../interface'; +export type IMarkAreaLabel = { + /** + * label整体 - 相对line的位置 + */ + position?: keyof typeof IMarkAreaLabelPosition | IMarkCommonArcLabelPosition; +} & IMarkerLabelWithoutRefSpec; + export interface IMarkAreaTheme { /** * 标记区域的样式 @@ -10,10 +17,5 @@ export interface IMarkAreaTheme { /** * 标记区域的标签样式配置 */ - label?: { - /** - * label整体 - 相对line的位置 - */ - position?: keyof typeof IMarkAreaLabelPosition | IMarkCommonArcLabelPosition; - } & IMarkerLabelWithoutRefSpec; + label?: IMarkAreaLabel | IMarkAreaLabel[]; } diff --git a/packages/vchart/src/component/marker/mark-line/base-mark-line.ts b/packages/vchart/src/component/marker/mark-line/base-mark-line.ts index 8312250c81..be268c5a25 100644 --- a/packages/vchart/src/component/marker/mark-line/base-mark-line.ts +++ b/packages/vchart/src/component/marker/mark-line/base-mark-line.ts @@ -19,6 +19,7 @@ import type { IMarkerSymbol } from '../interface'; import { markerRegression } from '../../../data/transforms/regression'; import { LayoutZIndex } from '../../../constant/layout'; import { markerFilter } from '../../../data/transforms/marker-filter'; +import { array } from '@visactor/vutils'; export abstract class BaseMarkLine extends BaseMarker implements IMarkLine { static specKey = 'markLine'; @@ -49,11 +50,8 @@ export abstract class BaseMarkLine extends BaseMarker implements } protected _createMarkerComponent() { - const { - label = {}, - startSymbol = {} as IMarkerSymbol, - endSymbol = {} as IMarkerSymbol - } = this._spec as IMarkLineSpec; + const { startSymbol = {} as IMarkerSymbol, endSymbol = {} as IMarkerSymbol } = this._spec as IMarkLineSpec; + const label = array(this._spec.label ?? {}); const markLineAttrs: MarkLineAttrs | MarkArcLineAttrs = { zIndex: this.layoutZIndex, @@ -77,7 +75,9 @@ export abstract class BaseMarkLine extends BaseMarker implements this._markAttributeContext ), clipInRange: this._spec.clip ?? false, - label: transformLabelAttributes(label, this._markerData, this._markAttributeContext), + label: label.map(labelItem => { + return transformLabelAttributes(labelItem, this._markerData, this._markAttributeContext); + }), state: { line: transformState(this._spec.line?.state ?? {}, this._markerData, this._markAttributeContext), lineStartSymbol: transformState( @@ -86,12 +86,12 @@ export abstract class BaseMarkLine extends BaseMarker implements this._markAttributeContext ), lineEndSymbol: transformState(this._spec.endSymbol?.state ?? {}, this._markerData, this._markAttributeContext), - label: transformState(this._spec?.label?.state ?? {}, this._markerData, this._markAttributeContext), - labelBackground: transformState( - this._spec?.label?.labelBackground?.state ?? {}, - this._markerData, - this._markAttributeContext - ) + label: label.map(labelItem => { + return transformState(labelItem.state ?? {}, this._markerData, this._markAttributeContext); + }), + labelBackground: label.map(labelItem => { + return transformState(labelItem.labelBackground?.state ?? {}, this._markerData, this._markAttributeContext); + }) }, animation: this._spec.animation ?? false, animationEnter: this._spec.animationEnter, @@ -140,7 +140,7 @@ export abstract class BaseMarkLine extends BaseMarker implements data.latestData[0] && data.latestData[0].latestData ? data.latestData[0].latestData : data.latestData; let limitRect; - if (spec.clip || spec.label?.confine) { + if (spec.clip || array(spec.label).some(labelCfg => labelCfg?.confine)) { const { minX, maxX, minY, maxY } = computeClipRange([ startRelativeSeries.getRegion(), endRelativeSeries.getRegion(), @@ -154,13 +154,16 @@ export abstract class BaseMarkLine extends BaseMarker implements }; } const markerComponentAttr = this._markerComponent?.attribute ?? {}; - const labelAttrs = { - ...markerComponentAttr.label, - text: this._spec.label.formatMethod - ? this._spec.label.formatMethod(dataPoints, seriesData) - : markerComponentAttr.label?.text - }; - + const prevLabelAttrs = array(markerComponentAttr.label); + const specLabels = array(this._spec.label); + + const labelAttrs = prevLabelAttrs.map((prevLabel, index) => { + const specLabel = specLabels[index] || {}; + return { + ...prevLabel, + text: specLabel.formatMethod ? (specLabel.formatMethod(dataPoints, seriesData) as any) : prevLabel?.text + }; + }); return { ...pointsAttr, label: labelAttrs as MarkLineComponent['attribute']['label'], diff --git a/packages/vchart/src/component/marker/mark-line/cartesian-mark-line.ts b/packages/vchart/src/component/marker/mark-line/cartesian-mark-line.ts index 2f33da2f9d..2cf997c27f 100644 --- a/packages/vchart/src/component/marker/mark-line/cartesian-mark-line.ts +++ b/packages/vchart/src/component/marker/mark-line/cartesian-mark-line.ts @@ -8,7 +8,7 @@ import { MarkLine as MarkLineComponent, registerMarkLineAnimate } from '@visactor/vrender-components'; -import { isValid, isValidNumber } from '@visactor/vutils'; +import { array, isValid, isValidNumber } from '@visactor/vutils'; import type { IDataPos, IMarkProcessOptions } from '../interface'; import { getInsertPoints, getTextOffset } from './util'; import { Factory } from '../../../core/factory'; @@ -105,7 +105,7 @@ export class CartesianMarkLine extends BaseMarkLine { } else { expandDistanceValue = expandDistance as number; } - const { points, label, limitRect } = updateAttrs; + const { points, limitRect } = updateAttrs; const joinPoints = getInsertPoints( (points as IPoint[])[0], @@ -133,19 +133,9 @@ export class CartesianMarkLine extends BaseMarkLine { }; } - if (isValidNumber(this._spec.label?.refX)) { - labelPositionAttrs.refX += this._spec.label.refX; - } - if (isValidNumber(this._spec.label?.refY)) { - labelPositionAttrs.refY += this._spec.label.refY; - } - if (isValidNumber(this._spec.label?.dx)) { - labelPositionAttrs.dx = (labelPositionAttrs.dx || 0) + this._spec.label.dx; - } - if (isValidNumber(this._spec.label?.dy)) { - labelPositionAttrs.dy = (labelPositionAttrs.dy || 0) + this._spec.label.dy; - } const markerComponentAttr = this._markerComponent?.attribute ?? {}; + const prevLabelAttrs = array(markerComponentAttr.label); + const label = array(updateAttrs.label ?? {}); this._markerComponent?.setAttributes({ points: multiSegment ? [ @@ -154,15 +144,29 @@ export class CartesianMarkLine extends BaseMarkLine { [joinPoints[2], joinPoints[3]] ] : joinPoints, - label: { - ...label, - ...labelPositionAttrs, - textStyle: { - ...markerComponentAttr.label.textStyle, - textAlign: 'center', - textBaseline: 'middle' + label: label.map((labelItem, index) => { + if (isValidNumber(labelItem?.refX)) { + labelPositionAttrs.refX += labelItem.refX; + } + if (isValidNumber(labelItem?.refY)) { + labelPositionAttrs.refY += labelItem.refY; + } + if (isValidNumber(labelItem?.dx)) { + labelPositionAttrs.dx = (labelPositionAttrs.dx || 0) + labelItem.dx; + } + if (isValidNumber(labelItem?.dy)) { + labelPositionAttrs.dy = (labelPositionAttrs.dy || 0) + labelItem.dy; } - }, + return { + ...labelItem, + ...labelPositionAttrs, + textStyle: { + ...prevLabelAttrs[index]?.textStyle, + textAlign: 'center', + textBaseline: 'middle' + } + }; + }), limitRect, multiSegment, mainSegmentIndex, diff --git a/packages/vchart/src/component/marker/mark-line/interface/theme.ts b/packages/vchart/src/component/marker/mark-line/interface/theme.ts index 54688f2e1e..ad0e6b1219 100644 --- a/packages/vchart/src/component/marker/mark-line/interface/theme.ts +++ b/packages/vchart/src/component/marker/mark-line/interface/theme.ts @@ -2,6 +2,13 @@ import type { IMarkCommonArcLabelPosition, IMarkLineLabelPosition } from '@visac import type { IArcMarkSpec, ILineMarkSpec } from '../../../../typings'; import type { IMarkerLabelSpec, IMarkerState, IMarkerSymbol } from '../../interface'; +export type IMarkLineLabel = { + /** + * label整体 - 相对line的位置 + */ + position?: keyof typeof IMarkLineLabelPosition | IMarkCommonArcLabelPosition; +} & IMarkerLabelSpec; + export interface IMarkLineTheme { /** * 标注线的线样式 @@ -10,12 +17,7 @@ export interface IMarkLineTheme { /** * 标注线的标签样式 */ - label?: { - /** - * label整体 - 相对line的位置 - */ - position?: keyof typeof IMarkLineLabelPosition | IMarkCommonArcLabelPosition; - } & IMarkerLabelSpec; + label?: IMarkLineLabel | IMarkLineLabel[]; /** * 线标注起点symbol样式 From 6e6b0989008fd3f7558553125d8f355b4883a66a Mon Sep 17 00:00:00 2001 From: kkxxkk2019 Date: Tue, 1 Apr 2025 16:24:57 +0800 Subject: [PATCH 03/19] fix: type-step markline label update error fix --- .../runtime/browser/test-page/debug.ts | 612 +++++++----------- .../marker/mark-line/cartesian-mark-line.ts | 38 +- 2 files changed, 270 insertions(+), 380 deletions(-) diff --git a/packages/vchart/__tests__/runtime/browser/test-page/debug.ts b/packages/vchart/__tests__/runtime/browser/test-page/debug.ts index 5c8edf8cf8..34662bdbb4 100644 --- a/packages/vchart/__tests__/runtime/browser/test-page/debug.ts +++ b/packages/vchart/__tests__/runtime/browser/test-page/debug.ts @@ -2,312 +2,15 @@ import { default as VChart } from '../../../../src/index'; const CONTAINER_ID = 'chart'; const run = async () => { - // const spec = { - // direction: 'vertical', - // type: 'common', - // color: ['#00295C', '#2568BD', '#9F9F9F', '#C5C5C5', '#00B0F0', '#4BCFFF', '#C2C2C2', '#D7D7D7'], - // series: [ - // { - // type: 'bar', - // stack: true, - // direction: 'vertical', - // bar: { - // style: { - // stroke: '', - // lineWidth: 1 - // }, - // state: { - // hover: { - // stroke: '#000', - // lineWidth: 1 - // } - // } - // }, - // barBackground: { - // style: { - // stroke: '', - // lineWidth: 1 - // } - // }, - // label: { - // visible: true, - // position: 'inside', - // style: { - // lineHeight: '100%', - // fontSize: 16, - // fontWeight: 'bold' - // }, - // overlap: { - // strategy: [] - // }, - // smartInvert: true, - // formatConfig: {}, - // interactive: true - // }, - // totalLabel: { - // visible: true, - // position: 'top', - // overlap: false, - // clampForce: false, - // formatConfig: { - // fixed: 0, - // content: 'value' - // }, - // style: { - // lineHeight: '100%', - // lineWidth: 1, - // fill: '#1F2329', - // stroke: '#ffffff', - // fontSize: 16, - // fontWeight: 'bold' - // }, - // interactive: true - // }, - // seriesLabel: { - // visible: true, - // position: 'end', - // label: { - // style: { - // lineHeight: '100%', - // lineWidth: 1, - // stroke: '#ffffff', - // fontSize: 16, - // fontWeight: 'bold' - // }, - // space: 10 - // } - // }, - // xField: '_editor_dimension_field', - // yField: '_editor_value_field', - // dataId: '0', - // id: 'series-0', - // EDITOR_SERIES_DATA_KEY: '销量', - // seriesField: '_editor_type_field' - // } - // ], - // legends: { - // id: 'legend-discrete', - // visible: false, - // autoPage: false, - // position: 'start', - // interactive: false, - // item: { - // label: { - // style: { - // fill: '#1F2329', - // fontSize: 16 - // } - // } - // }, - // _originalVisible: false - // }, - // region: [ - // { - // id: 'region-0' - // } - // ], - // tooltip: { - // visible: true, - // mark: { - // content: [{}], - // title: {} - // }, - // dimension: { - // content: [{}], - // title: {} - // } - // }, - // axes: [ - // { - // orient: 'left', - // id: 'axis-left', - // type: 'linear', - // label: { - // autoLimit: false, - // style: { - // fill: '#1F2329', - // fontSize: 16 - // }, - // formatConfig: {} - // }, - // domainLine: { - // visible: true, - // style: { - // stroke: '#000000' - // } - // }, - // tick: { - // visible: true, - // style: { - // stroke: '#000000' - // } - // }, - // grid: { - // visible: false, - // style: { - // stroke: '#bbbfc4' - // } - // }, - // autoIndent: false, - // maxWidth: null, - // maxHeight: null, - // inverse: true - // }, - // { - // orient: 'bottom', - // id: 'axis-bottom', - // type: 'band', - // label: { - // autoLimit: false, - // style: { - // fill: '#1F2329', - // fontSize: 16 - // }, - // formatConfig: {} - // }, - // domainLine: { - // visible: true, - // style: { - // stroke: '#000000' - // }, - // onZero: true - // }, - // tick: { - // visible: true, - // style: { - // stroke: '#000000' - // } - // }, - // grid: { - // visible: false, - // style: { - // stroke: '#bbbfc4' - // } - // }, - // autoIndent: false, - // maxWidth: null, - // maxHeight: null, - // trimPadding: false, - // paddingInner: [0.2, 0], - // paddingOuter: [0.2, 0] - // } - // ], - // data: [ - // { - // id: '0', - // sourceKey: '销量', - // values: [ - // { - // _editor_dimension_field: '1 月', - // _editor_value_field: 2354, - // _editor_type_field: '销量' - // }, - // { - // _editor_dimension_field: '2 月', - // _editor_value_field: 1902, - // _editor_type_field: '销量' - // }, - // { - // _editor_dimension_field: '3 月', - // _editor_value_field: 3524, - // _editor_type_field: '销量' - // }, - // { - // _editor_dimension_field: '4 月', - // _editor_value_field: 2698, - // _editor_type_field: '销量' - // }, - // { - // _editor_dimension_field: '5 月', - // _editor_value_field: 2896, - // _editor_type_field: '销量' - // }, - // { - // _editor_dimension_field: '6 月', - // _editor_value_field: 2563, - // _editor_type_field: '销量' - // }, - // { - // _editor_dimension_field: '7 月', - // _editor_value_field: 3156, - // _editor_type_field: '销量' - // }, - // { - // _editor_dimension_field: '8 月', - // _editor_value_field: 2896, - // _editor_type_field: '销量' - // }, - // { - // _editor_dimension_field: '9 月', - // _editor_value_field: 3621, - // _editor_type_field: '销量' - // }, - // { - // _editor_dimension_field: '10 月', - // _editor_value_field: 2635, - // _editor_type_field: '销量' - // }, - // { - // _editor_dimension_field: '11 月', - // _editor_value_field: 2963, - // _editor_type_field: '销量' - // }, - // { - // _editor_dimension_field: '12 月', - // _editor_value_field: 2789, - // _editor_type_field: '销量' - // } - // ], - // specField: { - // _editor_dimension_field: { - // type: 'dimension', - // order: 0 - // }, - // _editor_type_field: { - // type: 'series', - // order: 0 - // }, - // _editor_value_field: { - // type: 'value', - // order: 0 - // } - // } - // } - // ], - // labelLayout: 'region', - // customMark: [ - // { - // type: 'component', - // componentType: 'seriesLabel', - // interactive: false, - // style: { - // id: 'a4fdf1eb-5315-48e7-b601-58e095324da6', - // position: 'end', - // label: { - // space: 10, - // style: { - // lineHeight: '100%', - // lineWidth: 1, - // stroke: '#ffffff', - // fontSize: 16, - // fontWeight: 'bold' - // } - // } - // } - // } - // ], - // background: 'transparent' - // }; const spec = { - // direction: 'horizontal', + direction: 'vertical', type: 'common', - // padding: [24, 400, 24, 24], color: ['#00295C', '#2568BD', '#9F9F9F', '#C5C5C5', '#00B0F0', '#4BCFFF', '#C2C2C2', '#D7D7D7'], series: [ { type: 'bar', stack: true, - direction: 'horizontal', + direction: 'vertical', bar: { style: { stroke: '', @@ -332,7 +35,8 @@ const run = async () => { style: { lineHeight: '100%', fontSize: 16, - fontWeight: 'bold' + fontWeight: 'bold', + pickMode: 'imprecise' }, overlap: { strategy: [] @@ -356,13 +60,14 @@ const run = async () => { fill: '#1F2329', stroke: '#ffffff', fontSize: 16, - fontWeight: 'bold' + fontWeight: 'bold', + pickMode: 'imprecise' }, interactive: true }, seriesLabel: { visible: true, - position: 'start', + position: 'end', label: { style: { lineHeight: '100%', @@ -374,11 +79,90 @@ const run = async () => { space: 10 } }, - xField: '_editor_value_field', - yField: '_editor_dimension_field', + xField: '_editor_dimension_field', + yField: '_editor_value_field', dataId: '0', id: 'series-0', - EDITOR_SERIES_DATA_KEY: '2023年库存数量', + EDITOR_SERIES_DATA_KEY: 'a', + seriesField: '_editor_type_field' + }, + { + type: 'bar', + stack: true, + direction: 'vertical', + bar: { + style: { + stroke: '', + lineWidth: 1 + }, + state: { + hover: { + stroke: '#000', + lineWidth: 1 + } + } + }, + barBackground: { + style: { + stroke: '', + lineWidth: 1 + } + }, + label: { + visible: true, + position: 'inside', + style: { + lineHeight: '100%', + fontSize: 16, + fontWeight: 'bold', + pickMode: 'imprecise' + }, + overlap: { + strategy: [] + }, + smartInvert: true, + formatConfig: {}, + interactive: true + }, + totalLabel: { + visible: true, + position: 'top', + overlap: false, + clampForce: false, + formatConfig: { + fixed: 0, + content: 'value' + }, + style: { + lineHeight: '100%', + lineWidth: 1, + fill: '#1F2329', + stroke: '#ffffff', + fontSize: 16, + fontWeight: 'bold', + pickMode: 'imprecise' + }, + interactive: true + }, + seriesLabel: { + visible: true, + position: 'end', + label: { + style: { + lineHeight: '100%', + lineWidth: 1, + stroke: '#ffffff', + fontSize: 16, + fontWeight: 'bold' + }, + space: 10 + } + }, + xField: '_editor_dimension_field', + yField: '_editor_value_field', + dataId: '1', + id: 'series-1', + EDITOR_SERIES_DATA_KEY: 'b', seriesField: '_editor_type_field' } ], @@ -392,7 +176,8 @@ const run = async () => { label: { style: { fill: '#1F2329', - fontSize: 16 + fontSize: 16, + lineWidth: 1 } } }, @@ -400,7 +185,8 @@ const run = async () => { }, region: [ { - id: 'region-0' + id: 'region-0', + stackInverse: true } ], tooltip: { @@ -412,28 +198,37 @@ const run = async () => { dimension: { content: [{}], title: {} + }, + enterable: true, + showDelay: 0, + style: { + maxContentHeight: '95%' } }, axes: [ { - orient: 'right', + orient: 'left', id: 'axis-left', - type: 'band', - trimPadding: false, + type: 'linear', label: { autoLimit: false, style: { fill: '#1F2329', - fontSize: 16 + fontSize: 16, + lineWidth: 1 }, - formatConfig: {} + formatConfig: {}, + _originStyle: { + fill: '#1F2329', + fontSize: 16, + lineWidth: 1 + } }, domainLine: { visible: true, style: { stroke: '#000000' - }, - onZero: true + } }, tick: { visible: true, @@ -454,20 +249,27 @@ const run = async () => { { orient: 'bottom', id: 'axis-bottom', - type: 'linear', + type: 'band', label: { autoLimit: false, style: { fill: '#1F2329', - fontSize: 16 + fontSize: 16, + lineWidth: 1 }, - formatConfig: {} + formatConfig: {}, + _originStyle: { + fill: '#1F2329', + fontSize: 16, + lineWidth: 1 + } }, domainLine: { visible: true, style: { stroke: '#000000' - } + }, + onZero: true }, tick: { visible: true, @@ -484,68 +286,65 @@ const run = async () => { autoIndent: false, maxWidth: null, maxHeight: null, - inverse: true + trimPadding: false, + paddingInner: [0.2, 0], + paddingOuter: [0.2, 0] } ], data: [ { id: '0', - sourceKey: '2023年库存数量', + sourceKey: 'a', values: [ { - _editor_dimension_field: '0-3', - _editor_value_field: 210, - _editor_type_field: '2023年库存数量' - }, - { - _editor_dimension_field: '4-6', - _editor_value_field: 350, - _editor_type_field: '2023年库存数量' + _editor_value_field: 20, + _editor_type_field: 'a', + _editor_dimension_field: 'x1' }, { - _editor_dimension_field: '7-9', - _editor_value_field: 500, - _editor_type_field: '2023年库存数量' + _editor_value_field: 23, + _editor_type_field: 'a', + _editor_dimension_field: 'x2' }, { - _editor_dimension_field: '10-12', - _editor_value_field: 850, - _editor_type_field: '2023年库存数量' - }, - { - _editor_dimension_field: '13-15', - _editor_value_field: 1180, - _editor_type_field: '2023年库存数量' - }, - { - _editor_dimension_field: '16-18', - _editor_value_field: 1450, - _editor_type_field: '2023年库存数量' - }, - { - _editor_dimension_field: '19-21', - _editor_value_field: 1190, - _editor_type_field: '2023年库存数量' + _editor_value_field: 26, + _editor_type_field: 'a', + _editor_dimension_field: 'x3' + } + ], + specField: { + _editor_dimension_field: { + type: 'dimension', + order: 0 }, - { - _editor_dimension_field: '22-24', - _editor_value_field: 950, - _editor_type_field: '2023年库存数量' + _editor_type_field: { + type: 'series', + order: 0 }, + _editor_value_field: { + type: 'value', + order: 0 + } + } + }, + { + id: '1', + sourceKey: 'b', + values: [ { - _editor_dimension_field: '25-27', - _editor_value_field: 700, - _editor_type_field: '2023年库存数量' + _editor_value_field: 20, + _editor_type_field: 'b', + _editor_dimension_field: 'x1' }, { - _editor_dimension_field: '28-30', - _editor_value_field: 400, - _editor_type_field: '2023年库存数量' + _editor_value_field: 24, + _editor_type_field: 'b', + _editor_dimension_field: 'x2' }, { - _editor_dimension_field: '31-33', - _editor_value_field: 300, - _editor_type_field: '2023年库存数量' + _editor_value_field: 29, + _editor_type_field: 'b', + _editor_dimension_field: 'x3' } ], specField: { @@ -564,9 +363,94 @@ const run = async () => { } } ], + markArea: [ + { + id: '17bd0d32-3070-4679-bc39-b0ce3426add8', + name: 'v-area', + interactive: true, + x: '0%', + x1: '50%', + area: { + style: { + fill: '#005DFF', + fillOpacity: '0.1' + } + }, + label: [ + { + position: 'top', + text: 'x1 - x2', + labelBackground: { + visible: true, + style: { + fill: '#fff', + fillOpacity: 1, + stroke: '#000', + lineWidth: 1, + cornerRadius: 4 + } + }, + style: { + fill: '#1F2329', + fontSize: 16, + fontWeight: 'bold' + }, + dy: -6, + pickable: true, + childrenPickable: false + }, + { + position: 'left', + text: 'x1 - x2', + labelBackground: { + visible: true, + style: { + fill: '#fff', + fillOpacity: 1, + stroke: '#000', + lineWidth: 1, + cornerRadius: 4 + } + }, + style: { + fill: '#1F2329', + fontSize: 16, + fontWeight: 'bold' + }, + dx: -6, + pickable: true, + childrenPickable: false + } + ], + _originValue_: ['x1', 'x2'], + _editor_marker_label_: 'x1 - x2', + zIndex: 500 + } + ], + markLine: [], + markPoint: [], labelLayout: 'region', - - background: 'transparent' + customMark: [ + { + type: 'component', + componentType: 'seriesLabel', + interactive: false, + style: { + id: '13643b25-e719-4de6-874c-a4587015f1aa', + position: 'end', + label: { + space: 10, + style: { + lineHeight: '100%', + lineWidth: 1, + stroke: '#ffffff', + fontSize: 16, + fontWeight: 'bold' + } + } + } + } + ] }; const vchart = new VChart(spec, { dom: CONTAINER_ID }); vchart.renderSync(); diff --git a/packages/vchart/src/component/marker/mark-line/cartesian-mark-line.ts b/packages/vchart/src/component/marker/mark-line/cartesian-mark-line.ts index 2cf997c27f..9ec7131e0a 100644 --- a/packages/vchart/src/component/marker/mark-line/cartesian-mark-line.ts +++ b/packages/vchart/src/component/marker/mark-line/cartesian-mark-line.ts @@ -119,23 +119,20 @@ export class CartesianMarkLine extends BaseMarkLine { // 如果用户配置了主线段，则不进行 label 的偏移处理，直接显示在主线段中间 labelPositionAttrs = { position: 'middle', - autoRotate: false, - refX: 0, - refY: 0 + autoRotate: false }; } else { labelPositionAttrs = { position: 'start', autoRotate: false, - ...getTextOffset((points as IPoint[])[0], (points as IPoint[])[1], connectDirection, expandDistanceValue), - refX: 0, - refY: 0 + ...getTextOffset((points as IPoint[])[0], (points as IPoint[])[1], connectDirection, expandDistanceValue) }; } const markerComponentAttr = this._markerComponent?.attribute ?? {}; const prevLabelAttrs = array(markerComponentAttr.label); - const label = array(updateAttrs.label ?? {}); + const updateLabels = array(updateAttrs.label); + const labelsInSpec = array(this._spec.label); this._markerComponent?.setAttributes({ points: multiSegment ? [ @@ -144,22 +141,31 @@ export class CartesianMarkLine extends BaseMarkLine { [joinPoints[2], joinPoints[3]] ] : joinPoints, - label: label.map((labelItem, index) => { - if (isValidNumber(labelItem?.refX)) { - labelPositionAttrs.refX += labelItem.refX; + label: updateLabels.map((labelItem, index) => { + let refX = 0; + let refY = 0; + let dx = labelPositionAttrs.dx ?? 0; + let dy = labelPositionAttrs.dy ?? 0; + const labelSpec = labelsInSpec[index] ?? labelsInSpec[0]; + if (isValidNumber(labelSpec?.refX)) { + refX += labelSpec.refX; } - if (isValidNumber(labelItem?.refY)) { - labelPositionAttrs.refY += labelItem.refY; + if (isValidNumber(labelSpec?.refY)) { + refY += labelSpec.refY; } - if (isValidNumber(labelItem?.dx)) { - labelPositionAttrs.dx = (labelPositionAttrs.dx || 0) + labelItem.dx; + if (isValidNumber(labelSpec?.dx)) { + dx += labelSpec.dx; } - if (isValidNumber(labelItem?.dy)) { - labelPositionAttrs.dy = (labelPositionAttrs.dy || 0) + labelItem.dy; + if (isValidNumber(labelSpec?.dy)) { + dy += labelSpec.dy; } return { ...labelItem, ...labelPositionAttrs, + refX, + refY, + dx, + dy, textStyle: { ...prevLabelAttrs[index]?.textStyle, textAlign: 'center', From 69bbf0be0752a09317a2580569d8eb9c8f90669b Mon Sep 17 00:00:00 2001 From: kkxxkk2019 Date: Mon, 14 Apr 2025 10:29:59 +0800 Subject: [PATCH 04/19] chore: upgrade vrender version --- common/config/rush/pnpm-config.json | 6 +- common/config/rush/pnpm-lock.yaml | 150 ++++++++++++++----------- docs/package.json | 4 +- packages/openinula-vchart/package.json | 4 +- packages/react-vchart/package.json | 4 +- packages/vchart-extension/package.json | 6 +- packages/vchart/package.json | 6 +- packages/vstory/package.json | 6 +- tools/story-player/package.json | 6 +- 9 files changed, 103 insertions(+), 89 deletions(-) diff --git a/common/config/rush/pnpm-config.json b/common/config/rush/pnpm-config.json index 8bc1b2e2ac..c869ecadc3 100644 --- a/common/config/rush/pnpm-config.json +++ b/common/config/rush/pnpm-config.json @@ -83,9 +83,9 @@ * PNPM documentation: https://pnpm.io/package_json#pnpmoverrides */ "globalOverrides": { - "@visactor/vrender-core": "0.22.7-alpha.2", - "@visactor/vrender-kits": "0.22.7-alpha.2", - "@visactor/vrender-components": "0.22.7-alpha.2" + "@visactor/vrender-core": "0.22.7", + "@visactor/vrender-kits": "0.22.7", + "@visactor/vrender-components": "0.22.7" }, /** * The `globalPeerDependencyRules` setting provides various settings for suppressing validation errors diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index dc13dbef8e..95c4c09f10 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -1,9 +1,9 @@ lockfileVersion: 5.4 overrides: - '@visactor/vrender-core': 0.22.7-alpha.2 - '@visactor/vrender-kits': 0.22.7-alpha.2 - '@visactor/vrender-components': 0.22.7-alpha.2 + '@visactor/vrender-core': 0.22.7 + '@visactor/vrender-kits': 0.22.7 + '@visactor/vrender-components': 0.22.7 importers: @@ -28,8 +28,8 @@ importers: '@visactor/vchart-theme': ~1.6.6 '@visactor/vgrammar': 0.16.3 '@visactor/vmind': 1.2.4-alpha.5 - '@visactor/vrender': 0.22.7-alpha.2 - '@visactor/vrender-kits': 0.22.7-alpha.2 + '@visactor/vrender': 0.22.7 + '@visactor/vrender-kits': 0.22.7 '@visactor/vtable': 1.12.0 '@visactor/vtable-calendar': 1.12.0 '@visactor/vtable-editors': 1.12.0 @@ -66,8 +66,8 @@ importers: '@visactor/vchart-theme': 1.6.9 '@visactor/vgrammar': 0.16.3 '@visactor/vmind': 1.2.4-alpha.5 - '@visactor/vrender': 0.22.7-alpha.2 - '@visactor/vrender-kits': 0.22.7-alpha.2 + '@visactor/vrender': 0.22.7 + '@visactor/vrender-kits': 0.22.7 '@visactor/vtable': 1.12.0 '@visactor/vtable-calendar': 1.12.0 '@visactor/vtable-editors': 1.12.0 @@ -152,8 +152,8 @@ importers: '@types/react-is': ^17.0.3 '@visactor/vchart': workspace:1.13.8 '@visactor/vgrammar-core': 0.16.3 - '@visactor/vrender-core': 0.22.7-alpha.2 - '@visactor/vrender-kits': 0.22.7-alpha.2 + '@visactor/vrender-core': 0.22.7 + '@visactor/vrender-kits': 0.22.7 '@visactor/vutils': ~0.19.4 '@vitejs/plugin-react': 3.1.0 eslint: ~8.18.0 @@ -173,8 +173,8 @@ importers: dependencies: '@visactor/vchart': link:../vchart '@visactor/vgrammar-core': 0.16.3 - '@visactor/vrender-core': 0.22.7-alpha.2 - '@visactor/vrender-kits': 0.22.7-alpha.2 + '@visactor/vrender-core': 0.22.7 + '@visactor/vrender-kits': 0.22.7 '@visactor/vutils': 0.19.4 react-is: 18.3.1 devDependencies: @@ -217,8 +217,8 @@ importers: '@types/react-is': ^17.0.3 '@visactor/vchart': workspace:1.13.8 '@visactor/vgrammar-core': 0.16.3 - '@visactor/vrender-core': 0.22.7-alpha.2 - '@visactor/vrender-kits': 0.22.7-alpha.2 + '@visactor/vrender-core': 0.22.7 + '@visactor/vrender-kits': 0.22.7 '@visactor/vutils': ~0.19.4 '@vitejs/plugin-react': 3.1.0 eslint: ~8.18.0 @@ -239,8 +239,8 @@ importers: dependencies: '@visactor/vchart': link:../vchart '@visactor/vgrammar-core': 0.16.3 - '@visactor/vrender-core': 0.22.7-alpha.2 - '@visactor/vrender-kits': 0.22.7-alpha.2 + '@visactor/vrender-core': 0.22.7 + '@visactor/vrender-kits': 0.22.7 '@visactor/vutils': 0.19.4 react-is: 18.3.1 devDependencies: @@ -385,9 +385,9 @@ importers: '@visactor/vgrammar-venn': 0.16.3 '@visactor/vgrammar-wordcloud': 0.16.3 '@visactor/vgrammar-wordcloud-shape': 0.16.3 - '@visactor/vrender-components': 0.22.7-alpha.2 - '@visactor/vrender-core': 0.22.7-alpha.2 - '@visactor/vrender-kits': 0.22.7-alpha.2 + '@visactor/vrender-components': 0.22.7 + '@visactor/vrender-core': 0.22.7 + '@visactor/vrender-kits': 0.22.7 '@visactor/vscale': ~0.19.4 '@visactor/vutils': ~0.19.4 '@visactor/vutils-extension': workspace:1.13.8 @@ -433,9 +433,9 @@ importers: '@visactor/vgrammar-venn': 0.16.3 '@visactor/vgrammar-wordcloud': 0.16.3 '@visactor/vgrammar-wordcloud-shape': 0.16.3 - '@visactor/vrender-components': 0.22.7-alpha.2 - '@visactor/vrender-core': 0.22.7-alpha.2 - '@visactor/vrender-kits': 0.22.7-alpha.2 + '@visactor/vrender-components': 0.22.7 + '@visactor/vrender-core': 0.22.7 + '@visactor/vrender-kits': 0.22.7 '@visactor/vscale': 0.19.4 '@visactor/vutils': 0.19.4 '@visactor/vutils-extension': link:../vutils-extension @@ -497,9 +497,9 @@ importers: '@visactor/vchart': workspace:1.13.8 '@visactor/vdataset': ~0.19.4 '@visactor/vgrammar-core': 0.16.3 - '@visactor/vrender-components': 0.22.7-alpha.2 - '@visactor/vrender-core': 0.22.7-alpha.2 - '@visactor/vrender-kits': 0.22.7-alpha.2 + '@visactor/vrender-components': 0.22.7 + '@visactor/vrender-core': 0.22.7 + '@visactor/vrender-kits': 0.22.7 '@visactor/vutils': ~0.19.4 '@vitejs/plugin-react': 3.1.0 canvas: 2.11.2 @@ -521,9 +521,9 @@ importers: '@visactor/vchart': link:../vchart '@visactor/vdataset': 0.19.4 '@visactor/vgrammar-core': 0.16.3 - '@visactor/vrender-components': 0.22.7-alpha.2 - '@visactor/vrender-core': 0.22.7-alpha.2 - '@visactor/vrender-kits': 0.22.7-alpha.2 + '@visactor/vrender-components': 0.22.7 + '@visactor/vrender-core': 0.22.7 + '@visactor/vrender-kits': 0.22.7 '@visactor/vutils': 0.19.4 devDependencies: '@internal/bundler': link:../../tools/bundler @@ -895,9 +895,9 @@ importers: '@typescript-eslint/eslint-plugin': 5.30.0 '@typescript-eslint/parser': 5.30.0 '@visactor/vchart': workspace:1.13.8 - '@visactor/vrender': 0.22.7-alpha.2 - '@visactor/vrender-core': 0.22.7-alpha.2 - '@visactor/vrender-kits': 0.22.7-alpha.2 + '@visactor/vrender': 0.22.7 + '@visactor/vrender-core': 0.22.7 + '@visactor/vrender-kits': 0.22.7 '@visactor/vutils': ~0.19.4 cross-env: ^7.0.3 eslint: ~8.18.0 @@ -910,9 +910,9 @@ importers: vite: 3.2.6 dependencies: '@visactor/vchart': link:../../packages/vchart - '@visactor/vrender': 0.22.7-alpha.2 - '@visactor/vrender-core': 0.22.7-alpha.2 - '@visactor/vrender-kits': 0.22.7-alpha.2 + '@visactor/vrender': 0.22.7 + '@visactor/vrender-core': 0.22.7 + '@visactor/vrender-kits': 0.22.7 '@visactor/vutils': 0.19.4 devDependencies: '@internal/bundler': link:../bundler @@ -4870,7 +4870,7 @@ packages: resolution: {integrity: sha512-tfDSi3WgY/GWDvbf67eus4a7jR74y7OMod3JrTqyDVzSNZUOgUtS3ieEM71f9yipxjY8gxo53GPDpH/advxUZw==} dependencies: '@visactor/vgrammar-util': 0.16.3 - '@visactor/vutils': 0.19.4 + '@visactor/vutils': 0.19.5 dev: false /@visactor/vgrammar-core/0.16.3: @@ -4879,9 +4879,9 @@ packages: '@visactor/vdataset': 0.19.4 '@visactor/vgrammar-coordinate': 0.16.3 '@visactor/vgrammar-util': 0.16.3 - '@visactor/vrender-components': 0.22.7-alpha.2 - '@visactor/vrender-core': 0.22.7-alpha.2 - '@visactor/vrender-kits': 0.22.7-alpha.2 + '@visactor/vrender-components': 0.22.7 + '@visactor/vrender-core': 0.22.7 + '@visactor/vrender-kits': 0.22.7 '@visactor/vscale': 0.19.4 '@visactor/vutils': 0.19.4 dev: false @@ -4891,8 +4891,8 @@ packages: dependencies: '@visactor/vgrammar-core': 0.16.3 '@visactor/vgrammar-util': 0.16.3 - '@visactor/vrender-core': 0.22.7-alpha.2 - '@visactor/vrender-kits': 0.22.7-alpha.2 + '@visactor/vrender-core': 0.22.7 + '@visactor/vrender-kits': 0.22.7 '@visactor/vutils': 0.19.4 dev: false @@ -4910,15 +4910,15 @@ packages: dependencies: '@visactor/vgrammar-core': 0.16.3 '@visactor/vgrammar-util': 0.16.3 - '@visactor/vrender-core': 0.22.7-alpha.2 - '@visactor/vrender-kits': 0.22.7-alpha.2 + '@visactor/vrender-core': 0.22.7 + '@visactor/vrender-kits': 0.22.7 '@visactor/vutils': 0.19.4 dev: false /@visactor/vgrammar-util/0.16.3: resolution: {integrity: sha512-aF9MqjTR7YvBAVDtp1A/CDVcXFGlO+TxkHVPEQVrn7cVu2DGRXCZnu/iQ+AUhttVYaWlSRflZj4cnQrKS4zy4g==} dependencies: - '@visactor/vrender-core': 0.22.7-alpha.2 + '@visactor/vrender-core': 0.22.7 '@visactor/vutils': 0.19.4 dev: false @@ -4927,8 +4927,8 @@ packages: dependencies: '@visactor/vgrammar-core': 0.16.3 '@visactor/vgrammar-util': 0.16.3 - '@visactor/vrender-core': 0.22.7-alpha.2 - '@visactor/vrender-kits': 0.22.7-alpha.2 + '@visactor/vrender-core': 0.22.7 + '@visactor/vrender-kits': 0.22.7 '@visactor/vutils': 0.19.4 dev: false @@ -4937,8 +4937,8 @@ packages: dependencies: '@visactor/vgrammar-core': 0.16.3 '@visactor/vgrammar-util': 0.16.3 - '@visactor/vrender-core': 0.22.7-alpha.2 - '@visactor/vrender-kits': 0.22.7-alpha.2 + '@visactor/vrender-core': 0.22.7 + '@visactor/vrender-kits': 0.22.7 '@visactor/vscale': 0.19.4 '@visactor/vutils': 0.19.4 dev: false @@ -4948,8 +4948,8 @@ packages: dependencies: '@visactor/vgrammar-core': 0.16.3 '@visactor/vgrammar-util': 0.16.3 - '@visactor/vrender-core': 0.22.7-alpha.2 - '@visactor/vrender-kits': 0.22.7-alpha.2 + '@visactor/vrender-core': 0.22.7 + '@visactor/vrender-kits': 0.22.7 '@visactor/vutils': 0.19.4 dev: false @@ -4977,38 +4977,38 @@ packages: - debug dev: false - /@visactor/vrender-components/0.22.7-alpha.2: - resolution: {integrity: sha512-VwiAuHyw66u5bi/LjfFraYUx2y+XuEDnEjSKI+BsEARCPnhL9rFJtsqj6pEjLNs/90J96QcWWFDRHikBZAnKFw==} + /@visactor/vrender-components/0.22.7: + resolution: {integrity: sha512-34YIWcGK9ltEw+41FZp9CHOpUuMKNzUnno3PE9FrBIapkS1pN89IZhghfwqcqxlP7HFLH78Fsiy5+aDWfNC+TA==} dependencies: - '@visactor/vrender-core': 0.22.7-alpha.2 - '@visactor/vrender-kits': 0.22.7-alpha.2 - '@visactor/vscale': 0.19.4 - '@visactor/vutils': 0.19.4 + '@visactor/vrender-core': 0.22.7 + '@visactor/vrender-kits': 0.22.7 + '@visactor/vscale': 0.19.5 + '@visactor/vutils': 0.19.5 dev: false - /@visactor/vrender-core/0.22.7-alpha.2: - resolution: {integrity: sha512-fo+dcGsE/Wd4an1eGwJONcBYeVunErzajkfMDFnNAfOJdsIXbeCYN8YHhTg4tRyjbJf6Qzkg+a1O4FP5w4RXfg==} + /@visactor/vrender-core/0.22.7: + resolution: {integrity: sha512-1PAmNWIz3r99WpbtRjF4vG7U1ft2/chCPd4c5nDfkWZ1fT+t2TvMAMh8L5NWszxCFT9kDvYpfsmtseX/09nznA==} dependencies: - '@visactor/vutils': 0.19.4 + '@visactor/vutils': 0.19.5 color-convert: 2.0.1 dev: false - /@visactor/vrender-kits/0.22.7-alpha.2: - resolution: {integrity: sha512-w3Z094VD7bOhpvMIL063K3kEWIOgUU2uwtdq8SiaCkYkESgj+sCjutEVm/kt5tYjv77Kj0dMPe2iRqYuC/vNdQ==} + /@visactor/vrender-kits/0.22.7: + resolution: {integrity: sha512-mOcm2O0qH42x5R2zVy2vkQ+s3/DEI0ZiqvoahVvQ//8oHWzrIbhmdj90Oi6Xh2styfvRrh3P2QfuDLU7tug9EA==} dependencies: '@resvg/resvg-js': 2.4.1 - '@visactor/vrender-core': 0.22.7-alpha.2 - '@visactor/vutils': 0.19.4 + '@visactor/vrender-core': 0.22.7 + '@visactor/vutils': 0.19.5 gifuct-js: 2.1.2 lottie-web: 5.12.2 roughjs: 4.5.2 dev: false - /@visactor/vrender/0.22.7-alpha.2: - resolution: {integrity: sha512-1sG1j/QYd+a94FLPcu64QSD6eCSm2KWZ9yEuMwg9R5ATvHjI7Yqa0wbgZIRdsoVECYDGlZbKljsBEbIy/jBlgQ==} + /@visactor/vrender/0.22.7: + resolution: {integrity: sha512-HBeQaf4TwpAl9v1L145d+q2EWcUbn0zawl+a0s1OY1MP6HTAQpy/1GSEiAvw6HrezedmCE3ga7XM9dmlnLP6Dg==} dependencies: - '@visactor/vrender-core': 0.22.7-alpha.2 - '@visactor/vrender-kits': 0.22.7-alpha.2 + '@visactor/vrender-core': 0.22.7 + '@visactor/vrender-kits': 0.22.7 dev: false /@visactor/vscale/0.18.18: @@ -5023,6 +5023,12 @@ packages: '@visactor/vutils': 0.19.4 dev: false + /@visactor/vscale/0.19.5: + resolution: {integrity: sha512-KiXrn184Fh5aJBl/IcOK5irkJr0jwrpNjLPJ/0wfepYSycyEF5z7lDdfnvoJFEcMoljYjDQVg6Fxg9Adozc6vg==} + dependencies: + '@visactor/vutils': 0.19.5 + dev: false + /@visactor/vtable-calendar/1.12.0: resolution: {integrity: sha512-pp+eTnSzXsN0Hj09syGhdtiohBTchc0pBxZoOUx5Fudts3aDErNQkW6FEUZDMoEDFiORzKq2iaLYU/IzrgSvVA==} dependencies: @@ -5050,9 +5056,9 @@ packages: resolution: {integrity: sha512-yK33y0RP/K3SNPJMJ3nb6dPyWtBXXJy39RvkJYOa7yqb6c46o+/lP9d1fxdBXDgxNkNuIOPC2pVqyEhOiq3XGw==} dependencies: '@visactor/vdataset': 0.18.18 - '@visactor/vrender-components': 0.22.7-alpha.2 - '@visactor/vrender-core': 0.22.7-alpha.2 - '@visactor/vrender-kits': 0.22.7-alpha.2 + '@visactor/vrender-components': 0.22.7 + '@visactor/vrender-core': 0.22.7 + '@visactor/vrender-kits': 0.22.7 '@visactor/vscale': 0.18.18 '@visactor/vtable-editors': 1.12.0 '@visactor/vutils': 0.18.18 @@ -5092,6 +5098,14 @@ packages: eventemitter3: 4.0.7 dev: false + /@visactor/vutils/0.19.5: + resolution: {integrity: sha512-sSU9Gnmnej7LgkENKkdmVqx1I3ZYVugDbGP0KEzgo8j+txAwrthEQTSeFwZcVS0iYrAvSzpmAVuN0/NRo6+vpg==} + dependencies: + '@turf/helpers': 6.5.0 + '@turf/invariant': 6.5.0 + eventemitter3: 4.0.7 + dev: false + /@vitejs/plugin-react/3.1.0_vite@3.2.6: resolution: {integrity: sha512-AfgcRL8ZBhAlc3BFdigClmTUMISmmzHn7sB2h9U1odvc5U/MjWXsAaz18b/WoppUTDBzxOJwo2VdClfUcItu9g==} engines: {node: ^14.18.0 || >=16.0.0} diff --git a/docs/package.json b/docs/package.json index fed4de3e99..36674d59d5 100644 --- a/docs/package.json +++ b/docs/package.json @@ -19,8 +19,8 @@ "@visactor/vchart-theme": "~1.6.6", "@visactor/vmind": "1.2.4-alpha.5", "@visactor/vutils": "~0.19.4", - "@visactor/vrender": "0.22.7-alpha.2", - "@visactor/vrender-kits": "0.22.7-alpha.2", + "@visactor/vrender": "0.22.7", + "@visactor/vrender-kits": "0.22.7", "@visactor/vgrammar": "0.16.3", "@visactor/vtable": "1.12.0", "@visactor/vtable-editors": "1.12.0", diff --git a/packages/openinula-vchart/package.json b/packages/openinula-vchart/package.json index 8450bb9dbd..6d8a2fd628 100644 --- a/packages/openinula-vchart/package.json +++ b/packages/openinula-vchart/package.json @@ -30,8 +30,8 @@ "dependencies": { "@visactor/vchart": "workspace:1.13.8", "@visactor/vutils": "~0.19.4", - "@visactor/vrender-core": "0.22.7-alpha.2", - "@visactor/vrender-kits": "0.22.7-alpha.2", + "@visactor/vrender-core": "0.22.7", + "@visactor/vrender-kits": "0.22.7", "@visactor/vgrammar-core": "0.16.3", "react-is": "^18.2.0" }, diff --git a/packages/react-vchart/package.json b/packages/react-vchart/package.json index 4bdfcd647b..8ddea90ac2 100644 --- a/packages/react-vchart/package.json +++ b/packages/react-vchart/package.json @@ -30,8 +30,8 @@ "dependencies": { "@visactor/vchart": "workspace:1.13.8", "@visactor/vutils": "~0.19.4", - "@visactor/vrender-core": "0.22.7-alpha.2", - "@visactor/vrender-kits": "0.22.7-alpha.2", + "@visactor/vrender-core": "0.22.7", + "@visactor/vrender-kits": "0.22.7", "@visactor/vgrammar-core": "0.16.3", "react-is": "^18.2.0" }, diff --git a/packages/vchart-extension/package.json b/packages/vchart-extension/package.json index 91823b7be1..7bf248df20 100644 --- a/packages/vchart-extension/package.json +++ b/packages/vchart-extension/package.json @@ -21,9 +21,9 @@ "start": "ts-node __tests__/runtime/browser/scripts/initVite.ts && vite serve __tests__/runtime/browser" }, "dependencies": { - "@visactor/vrender-core": "0.22.7-alpha.2", - "@visactor/vrender-kits": "0.22.7-alpha.2", - "@visactor/vrender-components": "0.22.7-alpha.2", + "@visactor/vrender-core": "0.22.7", + "@visactor/vrender-kits": "0.22.7", + "@visactor/vrender-components": "0.22.7", "@visactor/vgrammar-core": "0.16.3", "@visactor/vutils": "~0.19.4", "@visactor/vdataset": "~0.19.4", diff --git a/packages/vchart/package.json b/packages/vchart/package.json index b567b67c33..6ce48ac17a 100644 --- a/packages/vchart/package.json +++ b/packages/vchart/package.json @@ -121,9 +121,9 @@ "@visactor/vutils": "~0.19.4", "@visactor/vdataset": "~0.19.4", "@visactor/vscale": "~0.19.4", - "@visactor/vrender-core": "0.22.7-alpha.2", - "@visactor/vrender-kits": "0.22.7-alpha.2", - "@visactor/vrender-components": "0.22.7-alpha.2", + "@visactor/vrender-core": "0.22.7", + "@visactor/vrender-kits": "0.22.7", + "@visactor/vrender-components": "0.22.7", "@visactor/vgrammar-core": "0.16.3", "@visactor/vgrammar-projection": "0.16.3", "@visactor/vgrammar-wordcloud": "0.16.3", diff --git a/packages/vstory/package.json b/packages/vstory/package.json index 2a7208852d..b6081711ea 100644 --- a/packages/vstory/package.json +++ b/packages/vstory/package.json @@ -21,9 +21,9 @@ }, "dependencies": { "@visactor/vchart": "workspace:1.11.0", - "@visactor/vrender-core": "0.22.7-alpha.2", - "@visactor/vrender-kits": "0.22.7-alpha.2", - "@visactor/vrender-components": "0.22.7-alpha.2", + "@visactor/vrender-core": "0.22.7", + "@visactor/vrender-kits": "0.22.7", + "@visactor/vrender-components": "0.22.7", "@visactor/vutils": "~0.19.4" }, "devDependencies": { diff --git a/tools/story-player/package.json b/tools/story-player/package.json index f5e8f37965..cbe2617031 100644 --- a/tools/story-player/package.json +++ b/tools/story-player/package.json @@ -56,10 +56,10 @@ "vite": "3.2.6" }, "dependencies": { - "@visactor/vrender-core": "0.22.7-alpha.2", - "@visactor/vrender-kits": "0.22.7-alpha.2", + "@visactor/vrender-core": "0.22.7", + "@visactor/vrender-kits": "0.22.7", "@visactor/vchart": "workspace:1.13.8", - "@visactor/vrender": "0.22.7-alpha.2", + "@visactor/vrender": "0.22.7", "@visactor/vutils": "~0.19.4" } } \ No newline at end of file From eb2f54696d30b2b91c2071ad7a875ac926af02e8 Mon Sep 17 00:00:00 2001 From: kkxxkk2019 Date: Mon, 14 Apr 2025 14:13:21 +0800 Subject: [PATCH 05/19] docs: add comments and docs --- docs/assets/option/en/component/mark-area.md | 3 ++- docs/assets/option/en/component/mark-line.md | 3 ++- docs/assets/option/zh/component/mark-area.md | 3 ++- docs/assets/option/zh/component/mark-line.md | 3 ++- .../vchart/src/component/marker/mark-area/interface/theme.ts | 3 ++- .../vchart/src/component/marker/mark-line/interface/theme.ts | 3 ++- 6 files changed, 12 insertions(+), 6 deletions(-) diff --git a/docs/assets/option/en/component/mark-area.md b/docs/assets/option/en/component/mark-area.md index f67164a03b..93590763bb 100644 --- a/docs/assets/option/en/component/mark-area.md +++ b/docs/assets/option/en/component/mark-area.md @@ -137,9 +137,10 @@ The area style for the label area. prefix = '####' ) }} -### label(Object) +### label(Array|Object) Label style for dimension lines. +Since `1.13.9`, configuring multiple labels is supported. #### position(Object) diff --git a/docs/assets/option/en/component/mark-line.md b/docs/assets/option/en/component/mark-line.md index 3af3a85c6c..c0b6ed00e3 100644 --- a/docs/assets/option/en/component/mark-line.md +++ b/docs/assets/option/en/component/mark-line.md @@ -219,9 +219,10 @@ The line style of the dimension line. When performing multi-section configuratio prefix = '####' ) }} -### label(Object) +### label(Array|Object) Label style for dimension lines. +Since `1.13.9`, configuring multiple labels is supported. #### position(Object) diff --git a/docs/assets/option/zh/component/mark-area.md b/docs/assets/option/zh/component/mark-area.md index bbf1b0a826..0e59ae94f9 100644 --- a/docs/assets/option/zh/component/mark-area.md +++ b/docs/assets/option/zh/component/mark-area.md @@ -137,9 +137,10 @@ y 轴上的标注区域边界，与 markArea.y 共同构造标注区域。可以 prefix = '####' ) }} -### label(Object) +### label(Array|Object) 标注线的标签样式。 +自 `1.13.9` 版本开始，支持配置多个标签。 #### position(Object) diff --git a/docs/assets/option/zh/component/mark-line.md b/docs/assets/option/zh/component/mark-line.md index 94a31d7cbc..719b7a4812 100644 --- a/docs/assets/option/zh/component/mark-line.md +++ b/docs/assets/option/zh/component/mark-line.md @@ -219,9 +219,10 @@ x 轴上的参考线。可以配置参考线在 x 轴上的值，或者聚合计 prefix = '####' ) }} -### label(Object) +### label(Array|Object) 标注线的标签样式。 +自 `1.13.9` 版本开始，支持配置多个标签。 #### position(Object) diff --git a/packages/vchart/src/component/marker/mark-area/interface/theme.ts b/packages/vchart/src/component/marker/mark-area/interface/theme.ts index 1c6a7926ec..c61c81874c 100644 --- a/packages/vchart/src/component/marker/mark-area/interface/theme.ts +++ b/packages/vchart/src/component/marker/mark-area/interface/theme.ts @@ -15,7 +15,8 @@ export interface IMarkAreaTheme { */ area?: Partial>; /** - * 标记区域的标签样式配置 + * 标记区域的标签样式配置。 + * 自 1.13.9 版本开始，支持创建多个标签 */ label?: IMarkAreaLabel | IMarkAreaLabel[]; } diff --git a/packages/vchart/src/component/marker/mark-line/interface/theme.ts b/packages/vchart/src/component/marker/mark-line/interface/theme.ts index ad0e6b1219..34c5aedfef 100644 --- a/packages/vchart/src/component/marker/mark-line/interface/theme.ts +++ b/packages/vchart/src/component/marker/mark-line/interface/theme.ts @@ -15,7 +15,8 @@ export interface IMarkLineTheme { */ line?: Partial>; /** - * 标注线的标签样式 + * 标注线的标签样式。 + * 自 1.13.9 版本开始，支持创建多个标签。 */ label?: IMarkLineLabel | IMarkLineLabel[]; From 259733083e006667e1c525d753677137fbbe81db Mon Sep 17 00:00:00 2001 From: kkxxkk2019 Date: Mon, 14 Apr 2025 14:38:29 +0800 Subject: [PATCH 06/19] chore: update rush changelog --- .../vchart/feat-issue-3868_2025-04-14-06-37.json | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 common/changes/@visactor/vchart/feat-issue-3868_2025-04-14-06-37.json diff --git a/common/changes/@visactor/vchart/feat-issue-3868_2025-04-14-06-37.json b/common/changes/@visactor/vchart/feat-issue-3868_2025-04-14-06-37.json new file mode 100644 index 0000000000..99a4c67af5 --- /dev/null +++ b/common/changes/@visactor/vchart/feat-issue-3868_2025-04-14-06-37.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@visactor/vchart", + "comment": "feat: markLine and markArea supports render multiple labels", + "type": "none" + } + ], + "packageName": "@visactor/vchart" +} \ No newline at end of file From a10621c25b22bede90723f9864a3a0649e8b536f Mon Sep 17 00:00:00 2001 From: kkxxkk2019 Date: Thu, 17 Apr 2025 15:39:07 +0800 Subject: [PATCH 07/19] chore: upgrade deps version --- common/config/rush/pnpm-config.json | 6 +- common/config/rush/pnpm-lock.yaml | 357 +++++++++++++------------ docs/package.json | 8 +- packages/openinula-vchart/package.json | 8 +- packages/react-vchart/package.json | 8 +- packages/vchart-extension/package.json | 12 +- packages/vchart/package.json | 28 +- packages/vstory/package.json | 8 +- packages/vutils-extension/package.json | 6 +- tools/story-player/package.json | 8 +- 10 files changed, 228 insertions(+), 221 deletions(-) diff --git a/common/config/rush/pnpm-config.json b/common/config/rush/pnpm-config.json index c869ecadc3..39db9e6211 100644 --- a/common/config/rush/pnpm-config.json +++ b/common/config/rush/pnpm-config.json @@ -83,9 +83,9 @@ * PNPM documentation: https://pnpm.io/package_json#pnpmoverrides */ "globalOverrides": { - "@visactor/vrender-core": "0.22.7", - "@visactor/vrender-kits": "0.22.7", - "@visactor/vrender-components": "0.22.7" + // "@visactor/vrender-core": "0.22.8", + // "@visactor/vrender-kits": "0.22.8", + // "@visactor/vrender-components": "0.22.8" }, /** * The `globalPeerDependencyRules` setting provides various settings for suppressing validation errors diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index 95c4c09f10..20397ecfaa 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -1,10 +1,5 @@ lockfileVersion: 5.4 -overrides: - '@visactor/vrender-core': 0.22.7 - '@visactor/vrender-kits': 0.22.7 - '@visactor/vrender-components': 0.22.7 - importers: .: @@ -26,15 +21,15 @@ importers: '@visactor/vchart': workspace:1.13.8 '@visactor/vchart-extension': workspace:1.13.8 '@visactor/vchart-theme': ~1.6.6 - '@visactor/vgrammar': 0.16.3 + '@visactor/vgrammar': 0.16.4 '@visactor/vmind': 1.2.4-alpha.5 - '@visactor/vrender': 0.22.7 - '@visactor/vrender-kits': 0.22.7 + '@visactor/vrender': 0.22.8 + '@visactor/vrender-kits': 0.22.8 '@visactor/vtable': 1.12.0 '@visactor/vtable-calendar': 1.12.0 '@visactor/vtable-editors': 1.12.0 '@visactor/vtable-gantt': 1.12.0 - '@visactor/vutils': ~0.19.4 + '@visactor/vutils': ~0.19.5 '@vitejs/plugin-react': 3.1.0 axios: ^1.4.0 buble: ^0.20.0 @@ -64,15 +59,15 @@ importers: '@visactor/vchart': link:../packages/vchart '@visactor/vchart-extension': link:../packages/vchart-extension '@visactor/vchart-theme': 1.6.9 - '@visactor/vgrammar': 0.16.3 + '@visactor/vgrammar': 0.16.4 '@visactor/vmind': 1.2.4-alpha.5 - '@visactor/vrender': 0.22.7 - '@visactor/vrender-kits': 0.22.7 + '@visactor/vrender': 0.22.8 + '@visactor/vrender-kits': 0.22.8 '@visactor/vtable': 1.12.0 '@visactor/vtable-calendar': 1.12.0 '@visactor/vtable-editors': 1.12.0 '@visactor/vtable-gantt': 1.12.0 - '@visactor/vutils': 0.19.4 + '@visactor/vutils': 0.19.5 axios: 1.7.9 buble: 0.20.0 highlight.js: 11.11.1 @@ -151,10 +146,10 @@ importers: '@types/offscreencanvas': 2019.6.4 '@types/react-is': ^17.0.3 '@visactor/vchart': workspace:1.13.8 - '@visactor/vgrammar-core': 0.16.3 - '@visactor/vrender-core': 0.22.7 - '@visactor/vrender-kits': 0.22.7 - '@visactor/vutils': ~0.19.4 + '@visactor/vgrammar-core': 0.16.4 + '@visactor/vrender-core': 0.22.8 + '@visactor/vrender-kits': 0.22.8 + '@visactor/vutils': ~0.19.5 '@vitejs/plugin-react': 3.1.0 eslint: ~8.18.0 eslint-config-prettier: 8.5.0 @@ -172,10 +167,10 @@ importers: vite: 3.2.6 dependencies: '@visactor/vchart': link:../vchart - '@visactor/vgrammar-core': 0.16.3 - '@visactor/vrender-core': 0.22.7 - '@visactor/vrender-kits': 0.22.7 - '@visactor/vutils': 0.19.4 + '@visactor/vgrammar-core': 0.16.4 + '@visactor/vrender-core': 0.22.8 + '@visactor/vrender-kits': 0.22.8 + '@visactor/vutils': 0.19.5 react-is: 18.3.1 devDependencies: '@internal/bundler': link:../../tools/bundler @@ -216,10 +211,10 @@ importers: '@types/react-dom': ^18.0.0 '@types/react-is': ^17.0.3 '@visactor/vchart': workspace:1.13.8 - '@visactor/vgrammar-core': 0.16.3 - '@visactor/vrender-core': 0.22.7 - '@visactor/vrender-kits': 0.22.7 - '@visactor/vutils': ~0.19.4 + '@visactor/vgrammar-core': 0.16.4 + '@visactor/vrender-core': 0.22.8 + '@visactor/vrender-kits': 0.22.8 + '@visactor/vutils': ~0.19.5 '@vitejs/plugin-react': 3.1.0 eslint: ~8.18.0 eslint-config-prettier: 8.5.0 @@ -238,10 +233,10 @@ importers: vite: 3.2.6 dependencies: '@visactor/vchart': link:../vchart - '@visactor/vgrammar-core': 0.16.3 - '@visactor/vrender-core': 0.22.7 - '@visactor/vrender-kits': 0.22.7 - '@visactor/vutils': 0.19.4 + '@visactor/vgrammar-core': 0.16.4 + '@visactor/vrender-core': 0.22.8 + '@visactor/vrender-kits': 0.22.8 + '@visactor/vutils': 0.19.5 react-is: 18.3.1 devDependencies: '@internal/bundler': link:../../tools/bundler @@ -376,20 +371,20 @@ importers: '@types/jest': ^26.0.0 '@types/node': '*' '@types/offscreencanvas': 2019.6.4 - '@visactor/vdataset': ~0.19.4 - '@visactor/vgrammar-core': 0.16.3 - '@visactor/vgrammar-hierarchy': 0.16.3 - '@visactor/vgrammar-projection': 0.16.3 - '@visactor/vgrammar-sankey': 0.16.3 - '@visactor/vgrammar-util': 0.16.3 - '@visactor/vgrammar-venn': 0.16.3 - '@visactor/vgrammar-wordcloud': 0.16.3 - '@visactor/vgrammar-wordcloud-shape': 0.16.3 - '@visactor/vrender-components': 0.22.7 - '@visactor/vrender-core': 0.22.7 - '@visactor/vrender-kits': 0.22.7 - '@visactor/vscale': ~0.19.4 - '@visactor/vutils': ~0.19.4 + '@visactor/vdataset': ~0.19.5 + '@visactor/vgrammar-core': 0.16.4 + '@visactor/vgrammar-hierarchy': 0.16.4 + '@visactor/vgrammar-projection': 0.16.4 + '@visactor/vgrammar-sankey': 0.16.4 + '@visactor/vgrammar-util': 0.16.4 + '@visactor/vgrammar-venn': 0.16.4 + '@visactor/vgrammar-wordcloud': 0.16.4 + '@visactor/vgrammar-wordcloud-shape': 0.16.4 + '@visactor/vrender-components': 0.22.8 + '@visactor/vrender-core': 0.22.8 + '@visactor/vrender-kits': 0.22.8 + '@visactor/vscale': ~0.19.5 + '@visactor/vutils': ~0.19.5 '@visactor/vutils-extension': workspace:1.13.8 canvas: 2.11.2 cross-env: ^7.0.3 @@ -424,20 +419,20 @@ importers: typescript: 4.9.5 vite: 3.2.6 dependencies: - '@visactor/vdataset': 0.19.4 - '@visactor/vgrammar-core': 0.16.3 - '@visactor/vgrammar-hierarchy': 0.16.3 - '@visactor/vgrammar-projection': 0.16.3 - '@visactor/vgrammar-sankey': 0.16.3 - '@visactor/vgrammar-util': 0.16.3 - '@visactor/vgrammar-venn': 0.16.3 - '@visactor/vgrammar-wordcloud': 0.16.3 - '@visactor/vgrammar-wordcloud-shape': 0.16.3 - '@visactor/vrender-components': 0.22.7 - '@visactor/vrender-core': 0.22.7 - '@visactor/vrender-kits': 0.22.7 - '@visactor/vscale': 0.19.4 - '@visactor/vutils': 0.19.4 + '@visactor/vdataset': 0.19.5 + '@visactor/vgrammar-core': 0.16.4 + '@visactor/vgrammar-hierarchy': 0.16.4 + '@visactor/vgrammar-projection': 0.16.4 + '@visactor/vgrammar-sankey': 0.16.4 + '@visactor/vgrammar-util': 0.16.4 + '@visactor/vgrammar-venn': 0.16.4 + '@visactor/vgrammar-wordcloud': 0.16.4 + '@visactor/vgrammar-wordcloud-shape': 0.16.4 + '@visactor/vrender-components': 0.22.8 + '@visactor/vrender-core': 0.22.8 + '@visactor/vrender-kits': 0.22.8 + '@visactor/vscale': 0.19.5 + '@visactor/vutils': 0.19.5 '@visactor/vutils-extension': link:../vutils-extension devDependencies: '@esbuild-plugins/node-globals-polyfill': 0.1.1 @@ -495,12 +490,12 @@ importers: '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 '@visactor/vchart': workspace:1.13.8 - '@visactor/vdataset': ~0.19.4 - '@visactor/vgrammar-core': 0.16.3 - '@visactor/vrender-components': 0.22.7 - '@visactor/vrender-core': 0.22.7 - '@visactor/vrender-kits': 0.22.7 - '@visactor/vutils': ~0.19.4 + '@visactor/vdataset': ~0.19.5 + '@visactor/vgrammar-core': 0.16.4 + '@visactor/vrender-components': 0.22.8 + '@visactor/vrender-core': 0.22.8 + '@visactor/vrender-kits': 0.22.8 + '@visactor/vutils': ~0.19.5 '@vitejs/plugin-react': 3.1.0 canvas: 2.11.2 eslint: ~8.18.0 @@ -519,12 +514,12 @@ importers: vite: 3.2.6 dependencies: '@visactor/vchart': link:../vchart - '@visactor/vdataset': 0.19.4 - '@visactor/vgrammar-core': 0.16.3 - '@visactor/vrender-components': 0.22.7 - '@visactor/vrender-core': 0.22.7 - '@visactor/vrender-kits': 0.22.7 - '@visactor/vutils': 0.19.4 + '@visactor/vdataset': 0.19.5 + '@visactor/vgrammar-core': 0.16.4 + '@visactor/vrender-components': 0.22.8 + '@visactor/vrender-core': 0.22.8 + '@visactor/vrender-kits': 0.22.8 + '@visactor/vutils': 0.19.5 devDependencies: '@internal/bundler': link:../../tools/bundler '@internal/eslint-config': link:../../share/eslint-config @@ -598,8 +593,8 @@ importers: '@types/jest': ^26.0.0 '@types/node': '*' '@types/offscreencanvas': 2019.6.4 - '@visactor/vdataset': ~0.19.4 - '@visactor/vutils': ~0.19.4 + '@visactor/vdataset': ~0.19.5 + '@visactor/vutils': ~0.19.5 eslint: ~8.18.0 husky: 7.0.4 jest: ^26.0.0 @@ -616,8 +611,8 @@ importers: typescript: 4.9.5 vite: 3.2.6 dependencies: - '@visactor/vdataset': 0.19.4 - '@visactor/vutils': 0.19.4 + '@visactor/vdataset': 0.19.5 + '@visactor/vutils': 0.19.5 devDependencies: '@internal/bundler': link:../../tools/bundler '@internal/eslint-config': link:../../share/eslint-config @@ -895,10 +890,10 @@ importers: '@typescript-eslint/eslint-plugin': 5.30.0 '@typescript-eslint/parser': 5.30.0 '@visactor/vchart': workspace:1.13.8 - '@visactor/vrender': 0.22.7 - '@visactor/vrender-core': 0.22.7 - '@visactor/vrender-kits': 0.22.7 - '@visactor/vutils': ~0.19.4 + '@visactor/vrender': 0.22.8 + '@visactor/vrender-core': 0.22.8 + '@visactor/vrender-kits': 0.22.8 + '@visactor/vutils': ~0.19.5 cross-env: ^7.0.3 eslint: ~8.18.0 jest: ^26.0.0 @@ -910,10 +905,10 @@ importers: vite: 3.2.6 dependencies: '@visactor/vchart': link:../../packages/vchart - '@visactor/vrender': 0.22.7 - '@visactor/vrender-core': 0.22.7 - '@visactor/vrender-kits': 0.22.7 - '@visactor/vutils': 0.19.4 + '@visactor/vrender': 0.22.8 + '@visactor/vrender-core': 0.22.8 + '@visactor/vrender-kits': 0.22.8 + '@visactor/vutils': 0.19.5 devDependencies: '@internal/bundler': link:../bundler '@internal/eslint-config': link:../../share/eslint-config @@ -4844,13 +4839,13 @@ packages: topojson-client: 3.1.0 dev: false - /@visactor/vdataset/0.19.4: - resolution: {integrity: sha512-xxglcFtvho5jWiQPKwTolKXbNOG8f77CrK7TJhfiqNlzoe27qO8B+A6lUKlLMt1kZaCH7ZNrFFkHyPjnnZ/gng==} + /@visactor/vdataset/0.19.5: + resolution: {integrity: sha512-8sOzJKHRLTdjmCDGemroxo3t3iWYrw4aDgPaCUbV1GiKuttC4CdTJlVsfq/JLdSldvMgNDTAmovAchVgjBNH6Q==} dependencies: '@turf/flatten': 6.5.0 '@turf/helpers': 6.5.0 '@turf/rewind': 6.5.0 - '@visactor/vutils': 0.19.4 + '@visactor/vutils': 0.19.5 d3-dsv: 2.0.0 d3-geo: 1.12.1 d3-hexbin: 0.2.2 @@ -4866,97 +4861,97 @@ packages: topojson-client: 3.1.0 dev: false - /@visactor/vgrammar-coordinate/0.16.3: - resolution: {integrity: sha512-tfDSi3WgY/GWDvbf67eus4a7jR74y7OMod3JrTqyDVzSNZUOgUtS3ieEM71f9yipxjY8gxo53GPDpH/advxUZw==} + /@visactor/vgrammar-coordinate/0.16.4: + resolution: {integrity: sha512-R4c+LjuM7QARv+X47zuJk2hOb6PlkV7CrvQB1pdlq+WUZuGQv5Nv7jRuRPrX9ENzIrlf0S+luH1efm84NR9dSw==} dependencies: - '@visactor/vgrammar-util': 0.16.3 + '@visactor/vgrammar-util': 0.16.4 '@visactor/vutils': 0.19.5 dev: false - /@visactor/vgrammar-core/0.16.3: - resolution: {integrity: sha512-cd7hmh9JobbCDUJPOshmQB5V0KVM0GLTPBe/ZySJDi1cUSWpukAgRrLozEk/M5XgDbVIT+4pjqe6siacCad8dg==} + /@visactor/vgrammar-core/0.16.4: + resolution: {integrity: sha512-eKHDqWDY76ddrkHCJJFJZ3xfVyp0YsGEd8mFPXq9Z8p4gderASmK7hHoWgG+AJ+JVDXwDzMRE1d2b3XXOa8twA==} dependencies: - '@visactor/vdataset': 0.19.4 - '@visactor/vgrammar-coordinate': 0.16.3 - '@visactor/vgrammar-util': 0.16.3 - '@visactor/vrender-components': 0.22.7 - '@visactor/vrender-core': 0.22.7 - '@visactor/vrender-kits': 0.22.7 - '@visactor/vscale': 0.19.4 - '@visactor/vutils': 0.19.4 + '@visactor/vdataset': 0.19.5 + '@visactor/vgrammar-coordinate': 0.16.4 + '@visactor/vgrammar-util': 0.16.4 + '@visactor/vrender-components': 0.22.8 + '@visactor/vrender-core': 0.22.8 + '@visactor/vrender-kits': 0.22.8 + '@visactor/vscale': 0.19.5 + '@visactor/vutils': 0.19.5 dev: false - /@visactor/vgrammar-hierarchy/0.16.3: - resolution: {integrity: sha512-qnfSWRt1PErkVPTtet8DVc4MY+WwmgJoNNW2FALFht1qUfPdglTqT96drPbkurwiZMzSk+Xfr7+IPUA8ZQwWag==} + /@visactor/vgrammar-hierarchy/0.16.4: + resolution: {integrity: sha512-vwDHAdHgJG/bKfMAsROSDcQh4QWc0kWx0r8vAQ70po0xlJKFwoc07GW52PfRBbZAs82MY4KGYtUB7YZXyIVjGQ==} dependencies: - '@visactor/vgrammar-core': 0.16.3 - '@visactor/vgrammar-util': 0.16.3 - '@visactor/vrender-core': 0.22.7 - '@visactor/vrender-kits': 0.22.7 - '@visactor/vutils': 0.19.4 + '@visactor/vgrammar-core': 0.16.4 + '@visactor/vgrammar-util': 0.16.4 + '@visactor/vrender-core': 0.22.8 + '@visactor/vrender-kits': 0.22.8 + '@visactor/vutils': 0.19.5 dev: false - /@visactor/vgrammar-projection/0.16.3: - resolution: {integrity: sha512-c+MJ3qgtsNQHwZCDBVT7fNahNxe0g827IiytQWvrtMxavLIrtJqeul5H+6BYrGvYk8d81ByxNZdoVNn/mfNtDw==} + /@visactor/vgrammar-projection/0.16.4: + resolution: {integrity: sha512-5tluO34qgF8U3fvaSbASrouiwIlRm9lHfghMw/wLnLLLhQMDNOkf9+J3+MwzOSeC9xpxEvj4mL5GJm1DrBdLgQ==} dependencies: - '@visactor/vgrammar-core': 0.16.3 - '@visactor/vgrammar-util': 0.16.3 - '@visactor/vutils': 0.19.4 + '@visactor/vgrammar-core': 0.16.4 + '@visactor/vgrammar-util': 0.16.4 + '@visactor/vutils': 0.19.5 d3-geo: 1.12.1 dev: false - /@visactor/vgrammar-sankey/0.16.3: - resolution: {integrity: sha512-7j0xx77Yn2KzY4EcZ27qFF6R1KTcmy3BtQQewOHA1uoUX8ZRsfe57eziYRiBhyVrzdFWoa0IJqzH7Yk/zITvuQ==} + /@visactor/vgrammar-sankey/0.16.4: + resolution: {integrity: sha512-pQBLvRfsQJOLlTRps7V1bYPrITqTC/DTRZ3uBZ2vY9vtGn8ZHHaWozTsRDQqc9+rsNbuPe9y0t3SdMFhQyQv7g==} dependencies: - '@visactor/vgrammar-core': 0.16.3 - '@visactor/vgrammar-util': 0.16.3 - '@visactor/vrender-core': 0.22.7 - '@visactor/vrender-kits': 0.22.7 - '@visactor/vutils': 0.19.4 + '@visactor/vgrammar-core': 0.16.4 + '@visactor/vgrammar-util': 0.16.4 + '@visactor/vrender-core': 0.22.8 + '@visactor/vrender-kits': 0.22.8 + '@visactor/vutils': 0.19.5 dev: false - /@visactor/vgrammar-util/0.16.3: - resolution: {integrity: sha512-aF9MqjTR7YvBAVDtp1A/CDVcXFGlO+TxkHVPEQVrn7cVu2DGRXCZnu/iQ+AUhttVYaWlSRflZj4cnQrKS4zy4g==} + /@visactor/vgrammar-util/0.16.4: + resolution: {integrity: sha512-T40YzizF0B69GwxSqIqQTIX52CqqjedGJphmkd5pVha9yFiPaftO17u8lYhro9/m/zu+RDFc/Z5Vj9Grqwpqgw==} dependencies: - '@visactor/vrender-core': 0.22.7 - '@visactor/vutils': 0.19.4 + '@visactor/vrender-core': 0.22.8 + '@visactor/vutils': 0.19.5 dev: false - /@visactor/vgrammar-venn/0.16.3: - resolution: {integrity: sha512-M6mtCrpOcPrD6nkQFZ3Fl0Z2zPaKFTyRIPeO235vDwB/ZzefN5BObh85UGsv0swK46L5yu3daBxW0VtrGMBZRA==} + /@visactor/vgrammar-venn/0.16.4: + resolution: {integrity: sha512-Qw5SsdtXFQLHGKmXP14/4QEx2oNEI3Ikj7c9b+Y13ir7aiiqApkNptrUQ9fFi9jKVYR3eDXkKUW10StSOgfCxQ==} dependencies: - '@visactor/vgrammar-core': 0.16.3 - '@visactor/vgrammar-util': 0.16.3 - '@visactor/vrender-core': 0.22.7 - '@visactor/vrender-kits': 0.22.7 - '@visactor/vutils': 0.19.4 + '@visactor/vgrammar-core': 0.16.4 + '@visactor/vgrammar-util': 0.16.4 + '@visactor/vrender-core': 0.22.8 + '@visactor/vrender-kits': 0.22.8 + '@visactor/vutils': 0.19.5 dev: false - /@visactor/vgrammar-wordcloud-shape/0.16.3: - resolution: {integrity: sha512-ZWRHbec4WM2W3v2t57gRaX1IUGy+nDRjumcctgzSvmCpmR3nORgLKmMhxXYEA0VwcpY+umM0lVcd42iqPH8c7g==} + /@visactor/vgrammar-wordcloud-shape/0.16.4: + resolution: {integrity: sha512-XpD+e7OE/mkHKiHEows5nKJtu+mB9C+c5o5n27ZWQF4CjNPiDh2gkv+64W/VqcUpzQommXrGQIVaDxtLlffAdw==} dependencies: - '@visactor/vgrammar-core': 0.16.3 - '@visactor/vgrammar-util': 0.16.3 - '@visactor/vrender-core': 0.22.7 - '@visactor/vrender-kits': 0.22.7 - '@visactor/vscale': 0.19.4 - '@visactor/vutils': 0.19.4 + '@visactor/vgrammar-core': 0.16.4 + '@visactor/vgrammar-util': 0.16.4 + '@visactor/vrender-core': 0.22.8 + '@visactor/vrender-kits': 0.22.8 + '@visactor/vscale': 0.19.5 + '@visactor/vutils': 0.19.5 dev: false - /@visactor/vgrammar-wordcloud/0.16.3: - resolution: {integrity: sha512-uIHUJ3CGir+IjDjv4SpJR5SZvWSIYU2VoBdoCvFdhP9j8t15wadGYfe0/br9d6xOM3laiSCFYvPdhy0Ke5sP4w==} + /@visactor/vgrammar-wordcloud/0.16.4: + resolution: {integrity: sha512-sT+ntTnJHFrqQ80KhQQ41RQ0MTUmfnB0qCPby+jI83OL7fRTShBUcDMkUrHiPyKSKkAdTErnzFrxf3TbnuXD+Q==} dependencies: - '@visactor/vgrammar-core': 0.16.3 - '@visactor/vgrammar-util': 0.16.3 - '@visactor/vrender-core': 0.22.7 - '@visactor/vrender-kits': 0.22.7 - '@visactor/vutils': 0.19.4 + '@visactor/vgrammar-core': 0.16.4 + '@visactor/vgrammar-util': 0.16.4 + '@visactor/vrender-core': 0.22.8 + '@visactor/vrender-kits': 0.22.8 + '@visactor/vutils': 0.19.5 dev: false - /@visactor/vgrammar/0.16.3: - resolution: {integrity: sha512-hUeJliljIPQVHos1WgEwY64VHrc47dd2avKhhGiNgKg66er5CLaapMAKC2S1su4V2+BmdfzKGLM6J93raqbjeA==} + /@visactor/vgrammar/0.16.4: + resolution: {integrity: sha512-1+HQ9DMq7S7AM5ettNVv9B23BV4hUnlipW6DM6DKlpw27UbvISgKpTxesPVddSaOOSOIEz8Ovk4NoSa2Ra4JZw==} dependencies: - '@visactor/vgrammar-core': 0.16.3 + '@visactor/vgrammar-core': 0.16.4 dev: false /@visactor/vmind/1.2.4-alpha.5: @@ -4977,38 +4972,64 @@ packages: - debug dev: false - /@visactor/vrender-components/0.22.7: - resolution: {integrity: sha512-34YIWcGK9ltEw+41FZp9CHOpUuMKNzUnno3PE9FrBIapkS1pN89IZhghfwqcqxlP7HFLH78Fsiy5+aDWfNC+TA==} + /@visactor/vrender-components/0.21.0-alpha.4: + resolution: {integrity: sha512-vVI/Xt0qK50FeTloLfczEMr9CBnpzoRNAsKPZvUgh67i1mBiefJouQSpxQcpWeGrKO8WHNBPVFsQqQBoutmLkQ==} + dependencies: + '@visactor/vrender-core': 0.21.0-alpha.4 + '@visactor/vrender-kits': 0.21.0-alpha.4 + '@visactor/vscale': 0.18.18 + '@visactor/vutils': 0.18.18 + gifuct-js: 2.1.2 + dev: false + + /@visactor/vrender-components/0.22.8: + resolution: {integrity: sha512-DqJ4oEcCvlPkfgoCCk0tqa0N9hJd13EeuVzQTB4n30OUp4uSkws2CML+6Xv+Th0m5xzGOsZLXdMZsyXjxrwBaQ==} dependencies: - '@visactor/vrender-core': 0.22.7 - '@visactor/vrender-kits': 0.22.7 + '@visactor/vrender-core': 0.22.8 + '@visactor/vrender-kits': 0.22.8 '@visactor/vscale': 0.19.5 '@visactor/vutils': 0.19.5 dev: false - /@visactor/vrender-core/0.22.7: - resolution: {integrity: sha512-1PAmNWIz3r99WpbtRjF4vG7U1ft2/chCPd4c5nDfkWZ1fT+t2TvMAMh8L5NWszxCFT9kDvYpfsmtseX/09nznA==} + /@visactor/vrender-core/0.21.0-alpha.4: + resolution: {integrity: sha512-kZk5HiJSvAfZLb3GZXvRykFWjhTXlpt0i/+e5kU8AoLYt9T15H9xRv/w7jYEe94dBXd+yCVH4soN2Ad4YXQO6g==} + dependencies: + '@visactor/vutils': 0.18.18 + color-convert: 2.0.1 + dev: false + + /@visactor/vrender-core/0.22.8: + resolution: {integrity: sha512-sQmZ+uTJ0M6s6Jhkhkz0/uiYiBTiFnLyDxIhZvPNADEMsjkPLj3hFHrhnxe1LrDHfz+IMoLMASD4IxzCGdjNpw==} dependencies: '@visactor/vutils': 0.19.5 color-convert: 2.0.1 dev: false - /@visactor/vrender-kits/0.22.7: - resolution: {integrity: sha512-mOcm2O0qH42x5R2zVy2vkQ+s3/DEI0ZiqvoahVvQ//8oHWzrIbhmdj90Oi6Xh2styfvRrh3P2QfuDLU7tug9EA==} + /@visactor/vrender-kits/0.21.0-alpha.4: + resolution: {integrity: sha512-OCFruyiXBjrxDulbRcmphMCzzMFFJK7gN1C25M1YwsM43bKA18olr/0HL7fQt0zQZUcTPmVHDVuOTi55YARVCg==} dependencies: '@resvg/resvg-js': 2.4.1 - '@visactor/vrender-core': 0.22.7 + '@visactor/vrender-core': 0.21.0-alpha.4 + '@visactor/vutils': 0.18.18 + roughjs: 4.5.2 + dev: false + + /@visactor/vrender-kits/0.22.8: + resolution: {integrity: sha512-k5QiOoFVBr88XMKVNHigBKGPWF63D8pUsUwi74hJNph+Gxy1ML9373eGgUkTEed/LUK/FvJxFwHO0oN23ZWJtg==} + dependencies: + '@resvg/resvg-js': 2.4.1 + '@visactor/vrender-core': 0.22.8 '@visactor/vutils': 0.19.5 gifuct-js: 2.1.2 lottie-web: 5.12.2 roughjs: 4.5.2 dev: false - /@visactor/vrender/0.22.7: - resolution: {integrity: sha512-HBeQaf4TwpAl9v1L145d+q2EWcUbn0zawl+a0s1OY1MP6HTAQpy/1GSEiAvw6HrezedmCE3ga7XM9dmlnLP6Dg==} + /@visactor/vrender/0.22.8: + resolution: {integrity: sha512-XievbxN4oy57m5GrmPZSGhOzrt3ae6cgwplzWo+YiC0bmpgppQwb8PxvbnIeO93lqg7IhuUGGMQDuBfTj5W3dw==} dependencies: - '@visactor/vrender-core': 0.22.7 - '@visactor/vrender-kits': 0.22.7 + '@visactor/vrender-core': 0.22.8 + '@visactor/vrender-kits': 0.22.8 dev: false /@visactor/vscale/0.18.18: @@ -5017,12 +5038,6 @@ packages: '@visactor/vutils': 0.18.18 dev: false - /@visactor/vscale/0.19.4: - resolution: {integrity: sha512-kp69hPMof3GBKRuUiXSR9+9K+Z8ZXsTlOAwcnknXmiiZDhdcDkPlv27/d+Xx1Wi/iqw+BS2S7YIjHmfzdiVQ/Q==} - dependencies: - '@visactor/vutils': 0.19.4 - dev: false - /@visactor/vscale/0.19.5: resolution: {integrity: sha512-KiXrn184Fh5aJBl/IcOK5irkJr0jwrpNjLPJ/0wfepYSycyEF5z7lDdfnvoJFEcMoljYjDQVg6Fxg9Adozc6vg==} dependencies: @@ -5056,9 +5071,9 @@ packages: resolution: {integrity: sha512-yK33y0RP/K3SNPJMJ3nb6dPyWtBXXJy39RvkJYOa7yqb6c46o+/lP9d1fxdBXDgxNkNuIOPC2pVqyEhOiq3XGw==} dependencies: '@visactor/vdataset': 0.18.18 - '@visactor/vrender-components': 0.22.7 - '@visactor/vrender-core': 0.22.7 - '@visactor/vrender-kits': 0.22.7 + '@visactor/vrender-components': 0.21.0-alpha.4 + '@visactor/vrender-core': 0.21.0-alpha.4 + '@visactor/vrender-kits': 0.21.0-alpha.4 '@visactor/vscale': 0.18.18 '@visactor/vtable-editors': 1.12.0 '@visactor/vutils': 0.18.18 @@ -5090,14 +5105,6 @@ packages: eventemitter3: 4.0.7 dev: false - /@visactor/vutils/0.19.4: - resolution: {integrity: sha512-kLbcsTe1/3HSSvEJvJikzGD0plY0gdHbpxt98oo7W6OrianfYd97nm/w7rFXcq/S49e6C5d1SdU4MZk/PYxhEQ==} - dependencies: - '@turf/helpers': 6.5.0 - '@turf/invariant': 6.5.0 - eventemitter3: 4.0.7 - dev: false - /@visactor/vutils/0.19.5: resolution: {integrity: sha512-sSU9Gnmnej7LgkENKkdmVqx1I3ZYVugDbGP0KEzgo8j+txAwrthEQTSeFwZcVS0iYrAvSzpmAVuN0/NRo6+vpg==} dependencies: diff --git a/docs/package.json b/docs/package.json index 36674d59d5..0975864cbe 100644 --- a/docs/package.json +++ b/docs/package.json @@ -18,10 +18,10 @@ "@visactor/vchart-extension": "workspace:1.13.8", "@visactor/vchart-theme": "~1.6.6", "@visactor/vmind": "1.2.4-alpha.5", - "@visactor/vutils": "~0.19.4", - "@visactor/vrender": "0.22.7", - "@visactor/vrender-kits": "0.22.7", - "@visactor/vgrammar": "0.16.3", + "@visactor/vutils": "~0.19.5", + "@visactor/vrender": "0.22.8", + "@visactor/vrender-kits": "0.22.8", + "@visactor/vgrammar": "0.16.4", "@visactor/vtable": "1.12.0", "@visactor/vtable-editors": "1.12.0", "@visactor/vtable-gantt": "1.12.0", diff --git a/packages/openinula-vchart/package.json b/packages/openinula-vchart/package.json index 6d8a2fd628..473b054eba 100644 --- a/packages/openinula-vchart/package.json +++ b/packages/openinula-vchart/package.json @@ -29,10 +29,10 @@ }, "dependencies": { "@visactor/vchart": "workspace:1.13.8", - "@visactor/vutils": "~0.19.4", - "@visactor/vrender-core": "0.22.7", - "@visactor/vrender-kits": "0.22.7", - "@visactor/vgrammar-core": "0.16.3", + "@visactor/vutils": "~0.19.5", + "@visactor/vrender-core": "0.22.8", + "@visactor/vrender-kits": "0.22.8", + "@visactor/vgrammar-core": "0.16.4", "react-is": "^18.2.0" }, "devDependencies": { diff --git a/packages/react-vchart/package.json b/packages/react-vchart/package.json index 8ddea90ac2..db337e67f1 100644 --- a/packages/react-vchart/package.json +++ b/packages/react-vchart/package.json @@ -29,10 +29,10 @@ }, "dependencies": { "@visactor/vchart": "workspace:1.13.8", - "@visactor/vutils": "~0.19.4", - "@visactor/vrender-core": "0.22.7", - "@visactor/vrender-kits": "0.22.7", - "@visactor/vgrammar-core": "0.16.3", + "@visactor/vutils": "~0.19.5", + "@visactor/vrender-core": "0.22.8", + "@visactor/vrender-kits": "0.22.8", + "@visactor/vgrammar-core": "0.16.4", "react-is": "^18.2.0" }, "devDependencies": { diff --git a/packages/vchart-extension/package.json b/packages/vchart-extension/package.json index 7bf248df20..dca06f26a7 100644 --- a/packages/vchart-extension/package.json +++ b/packages/vchart-extension/package.json @@ -21,12 +21,12 @@ "start": "ts-node __tests__/runtime/browser/scripts/initVite.ts && vite serve __tests__/runtime/browser" }, "dependencies": { - "@visactor/vrender-core": "0.22.7", - "@visactor/vrender-kits": "0.22.7", - "@visactor/vrender-components": "0.22.7", - "@visactor/vgrammar-core": "0.16.3", - "@visactor/vutils": "~0.19.4", - "@visactor/vdataset": "~0.19.4", + "@visactor/vrender-core": "0.22.8", + "@visactor/vrender-kits": "0.22.8", + "@visactor/vrender-components": "0.22.8", + "@visactor/vgrammar-core": "0.16.4", + "@visactor/vutils": "~0.19.5", + "@visactor/vdataset": "~0.19.5", "@visactor/vchart": "workspace:1.13.8" }, "devDependencies": { diff --git a/packages/vchart/package.json b/packages/vchart/package.json index 6ce48ac17a..568c43a193 100644 --- a/packages/vchart/package.json +++ b/packages/vchart/package.json @@ -118,20 +118,20 @@ "cross-env": "^7.0.3" }, "dependencies": { - "@visactor/vutils": "~0.19.4", - "@visactor/vdataset": "~0.19.4", - "@visactor/vscale": "~0.19.4", - "@visactor/vrender-core": "0.22.7", - "@visactor/vrender-kits": "0.22.7", - "@visactor/vrender-components": "0.22.7", - "@visactor/vgrammar-core": "0.16.3", - "@visactor/vgrammar-projection": "0.16.3", - "@visactor/vgrammar-wordcloud": "0.16.3", - "@visactor/vgrammar-wordcloud-shape": "0.16.3", - "@visactor/vgrammar-hierarchy": "0.16.3", - "@visactor/vgrammar-sankey": "0.16.3", - "@visactor/vgrammar-venn": "0.16.3", - "@visactor/vgrammar-util": "0.16.3", + "@visactor/vutils": "~0.19.5", + "@visactor/vdataset": "~0.19.5", + "@visactor/vscale": "~0.19.5", + "@visactor/vrender-core": "0.22.8", + "@visactor/vrender-kits": "0.22.8", + "@visactor/vrender-components": "0.22.8", + "@visactor/vgrammar-core": "0.16.4", + "@visactor/vgrammar-projection": "0.16.4", + "@visactor/vgrammar-wordcloud": "0.16.4", + "@visactor/vgrammar-wordcloud-shape": "0.16.4", + "@visactor/vgrammar-hierarchy": "0.16.4", + "@visactor/vgrammar-sankey": "0.16.4", + "@visactor/vgrammar-venn": "0.16.4", + "@visactor/vgrammar-util": "0.16.4", "@visactor/vutils-extension": "workspace:1.13.8" }, "publishConfig": { diff --git a/packages/vstory/package.json b/packages/vstory/package.json index b6081711ea..aedd7acd35 100644 --- a/packages/vstory/package.json +++ b/packages/vstory/package.json @@ -21,10 +21,10 @@ }, "dependencies": { "@visactor/vchart": "workspace:1.11.0", - "@visactor/vrender-core": "0.22.7", - "@visactor/vrender-kits": "0.22.7", - "@visactor/vrender-components": "0.22.7", - "@visactor/vutils": "~0.19.4" + "@visactor/vrender-core": "0.22.8", + "@visactor/vrender-kits": "0.22.8", + "@visactor/vrender-components": "0.22.8", + "@visactor/vutils": "~0.19.5" }, "devDependencies": { "@internal/bundler": "workspace:*", diff --git a/packages/vutils-extension/package.json b/packages/vutils-extension/package.json index bbe4003203..6f1b3c7540 100644 --- a/packages/vutils-extension/package.json +++ b/packages/vutils-extension/package.json @@ -25,8 +25,8 @@ "test-watch": "DEBUG_MODE=1 jest --watch" }, "dependencies": { - "@visactor/vutils": "~0.19.4", - "@visactor/vdataset": "~0.19.4" + "@visactor/vutils": "~0.19.5", + "@visactor/vdataset": "~0.19.5" }, "devDependencies": { "@internal/bundler": "workspace:*", @@ -67,4 +67,4 @@ "url": "https://www.visactor.io/" }, "license": "MIT" -} +} \ No newline at end of file diff --git a/tools/story-player/package.json b/tools/story-player/package.json index cbe2617031..ecc35fc205 100644 --- a/tools/story-player/package.json +++ b/tools/story-player/package.json @@ -56,10 +56,10 @@ "vite": "3.2.6" }, "dependencies": { - "@visactor/vrender-core": "0.22.7", - "@visactor/vrender-kits": "0.22.7", + "@visactor/vrender-core": "0.22.8", + "@visactor/vrender-kits": "0.22.8", "@visactor/vchart": "workspace:1.13.8", - "@visactor/vrender": "0.22.7", - "@visactor/vutils": "~0.19.4" + "@visactor/vrender": "0.22.8", + "@visactor/vutils": "~0.19.5" } } \ No newline at end of file From cb5153478362b17f3739f0f7e8889347df0e0837 Mon Sep 17 00:00:00 2001 From: skie1997 Date: Thu, 3 Apr 2025 14:16:22 +0800 Subject: [PATCH 08/19] docs: supply interface of docs. fix#3877 --- .../fix-sequence-chart-docs_2025-04-03-06-12.json | 10 ++++++++++ docs/assets/option/en/chart/sequence.md | 4 ++-- docs/assets/option/zh/chart/sequence.md | 4 ++-- packages/vchart/src/typings/visual.ts | 2 +- 4 files changed, 15 insertions(+), 5 deletions(-) create mode 100644 common/changes/@visactor/vchart/fix-sequence-chart-docs_2025-04-03-06-12.json diff --git a/common/changes/@visactor/vchart/fix-sequence-chart-docs_2025-04-03-06-12.json b/common/changes/@visactor/vchart/fix-sequence-chart-docs_2025-04-03-06-12.json new file mode 100644 index 0000000000..19b2285e57 --- /dev/null +++ b/common/changes/@visactor/vchart/fix-sequence-chart-docs_2025-04-03-06-12.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@visactor/vchart", + "comment": "docs: supply interface of docs. fix#3877", + "type": "none" + } + ], + "packageName": "@visactor/vchart" +} \ No newline at end of file diff --git a/docs/assets/option/en/chart/sequence.md b/docs/assets/option/en/chart/sequence.md index 8e7fe8051b..efc8b254b5 100644 --- a/docs/assets/option/en/chart/sequence.md +++ b/docs/assets/option/en/chart/sequence.md @@ -9,7 +9,7 @@ Sequence Chart chartType = 'sequence' ) }} -## appendPadding(number) +## appendPadding(number|Object) This property is used to configure the chart's inner padding. It is recommended to configure this, otherwise the event link series' title will overlap with the gridline. @@ -38,4 +38,4 @@ In the sequence chart, it is recommended to configure at least one pair of event {{ use: chart-component( axisType = 'cartesian', noBandAxis = true -) }} \ No newline at end of file +) }} diff --git a/docs/assets/option/zh/chart/sequence.md b/docs/assets/option/zh/chart/sequence.md index 4c9fa694c3..1d2bc343f5 100644 --- a/docs/assets/option/zh/chart/sequence.md +++ b/docs/assets/option/zh/chart/sequence.md @@ -9,7 +9,7 @@ chartType = 'sequence' ) }} -## appendPadding(number) +## appendPadding(number|Object) 属性用于配置图表的内边距， 建议配置， 否则事件link 系列的 title 将会与 gridline 重叠。 @@ -38,4 +38,4 @@ {{ use: chart-component( axisType = 'cartesian', noBandAxis = true -) }} \ No newline at end of file +) }} diff --git a/packages/vchart/src/typings/visual.ts b/packages/vchart/src/typings/visual.ts index 6ac1eb7bb1..e204fe29b2 100644 --- a/packages/vchart/src/typings/visual.ts +++ b/packages/vchart/src/typings/visual.ts @@ -178,7 +178,7 @@ export interface ICommonSpec { * @todo 隔离主题和 spec 配置 * IColorKey 类型只适用于主题 */ - stroke?: string | IGradient | false | (number | boolean)[] | IColorKey; + stroke?: string | IGradient | false | (number | boolean)[] | IColorKey | null; /** * 描边透明度 */ From 49ccc5edb2b48b2127eb4662d5be4a4519a22e00 Mon Sep 17 00:00:00 2001 From: xiaoluoHe Date: Tue, 8 Apr 2025 15:29:38 +0800 Subject: [PATCH 09/19] fix: clear event listener for normal animation when updateSpec --- ...ix-clear-normal-animate-event_2025-04-08-07-28.json | 10 ++++++++++ packages/vchart/src/compile/mark/compilable-mark.ts | 4 ++++ packages/vchart/src/model/base-model.ts | 4 ++++ 3 files changed, 18 insertions(+) create mode 100644 common/changes/@visactor/vchart/fix-clear-normal-animate-event_2025-04-08-07-28.json diff --git a/common/changes/@visactor/vchart/fix-clear-normal-animate-event_2025-04-08-07-28.json b/common/changes/@visactor/vchart/fix-clear-normal-animate-event_2025-04-08-07-28.json new file mode 100644 index 0000000000..54c00b30b4 --- /dev/null +++ b/common/changes/@visactor/vchart/fix-clear-normal-animate-event_2025-04-08-07-28.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@visactor/vchart", + "comment": "fix: clear event listener for normal animation when updateSpec, #3881", + "type": "none" + } + ], + "packageName": "@visactor/vchart" +} \ No newline at end of file diff --git a/packages/vchart/src/compile/mark/compilable-mark.ts b/packages/vchart/src/compile/mark/compilable-mark.ts index 4cf8dc773a..ff54058018 100644 --- a/packages/vchart/src/compile/mark/compilable-mark.ts +++ b/packages/vchart/src/compile/mark/compilable-mark.ts @@ -469,6 +469,10 @@ export abstract class CompilableMark extends GrammarItem implements ICompilableM return undefined; } + clear() { + this._event.off(VGRAMMAR_HOOK_EVENT.AFTER_DO_RENDER); + } + release() { super.release(); this.state.release(); diff --git a/packages/vchart/src/model/base-model.ts b/packages/vchart/src/model/base-model.ts index ae28eab5f1..059f1596ea 100644 --- a/packages/vchart/src/model/base-model.ts +++ b/packages/vchart/src/model/base-model.ts @@ -159,6 +159,10 @@ export abstract class BaseModel extends CompilableBase imp // do nothing } + clear() { + this.getMarks().forEach(m => m.clear?.()); + } + release() { this._releaseEvent(); this._spec = undefined; From 14410f2907f13e92e692f17443b044861bf83e30 Mon Sep 17 00:00:00 2001 From: xile611 Date: Tue, 8 Apr 2025 11:13:06 +0800 Subject: [PATCH 10/19] fix: fix type error of datazoom texts --- .../vchart/src/component/data-zoom/data-zoom/interface.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/vchart/src/component/data-zoom/data-zoom/interface.ts b/packages/vchart/src/component/data-zoom/data-zoom/interface.ts index 3fa8180582..bed39677da 100644 --- a/packages/vchart/src/component/data-zoom/data-zoom/interface.ts +++ b/packages/vchart/src/component/data-zoom/data-zoom/interface.ts @@ -141,7 +141,7 @@ export interface IDataZoomSpec extends IDataZoomStyle, IDataFilterComponentSpec /** * 起点文字文本样式配置 */ - style?: IMarkSpec; + style?: ITextMarkSpec; /** * 起点文字格式化配置，使用回调函数的形式配置。 */ @@ -161,7 +161,7 @@ export interface IDataZoomSpec extends IDataZoomStyle, IDataFilterComponentSpec /** * 终点文字文本样式配置 */ - style?: IMarkSpec; + style?: ITextMarkSpec; /** * * 终点文字格式化配置, 使用回调函数的形式配置 From e77bfb04b3b23fc2eeb38ab927c9c29e287362e0 Mon Sep 17 00:00:00 2001 From: xile611 Date: Tue, 8 Apr 2025 11:13:43 +0800 Subject: [PATCH 11/19] docs: update changlog of rush --- .../fix-datazoom-text-type_2025-04-08-03-13.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/@visactor/vchart/fix-datazoom-text-type_2025-04-08-03-13.json diff --git a/common/changes/@visactor/vchart/fix-datazoom-text-type_2025-04-08-03-13.json b/common/changes/@visactor/vchart/fix-datazoom-text-type_2025-04-08-03-13.json new file mode 100644 index 0000000000..9134e7ad07 --- /dev/null +++ b/common/changes/@visactor/vchart/fix-datazoom-text-type_2025-04-08-03-13.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "fix: fix type error of datazoom texts\n\n", + "type": "none", + "packageName": "@visactor/vchart" + } + ], + "packageName": "@visactor/vchart", + "email": "dingling112@gmail.com" +} \ No newline at end of file From 95f35020c0178003b045ca510a405a1a3fbd83b5 Mon Sep 17 00:00:00 2001 From: xile611 Date: Wed, 2 Apr 2025 14:32:07 +0800 Subject: [PATCH 12/19] fix: empty placeholder should update after data is updated, fix #3855 --- packages/vchart/src/data/transforms/pie.ts | 2 +- packages/vchart/src/series/pie/pie.ts | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/vchart/src/data/transforms/pie.ts b/packages/vchart/src/data/transforms/pie.ts index 88179fa41e..3c0e8ee65d 100644 --- a/packages/vchart/src/data/transforms/pie.ts +++ b/packages/vchart/src/data/transforms/pie.ts @@ -55,7 +55,7 @@ export const pie = (originData: Array, op: IPieOpt) => { } if (!showAllZero && showEmptyCircle && isDataEmpty(data, angleField, supportNegative)) { - return data; + return []; } const appendArcInfo = (data: Datum, startAngle: number, angle: number) => { diff --git a/packages/vchart/src/series/pie/pie.ts b/packages/vchart/src/series/pie/pie.ts index 402b8a3310..da843cb6a1 100644 --- a/packages/vchart/src/series/pie/pie.ts +++ b/packages/vchart/src/series/pie/pie.ts @@ -204,6 +204,8 @@ export class BasePieSeries extends PolarSeries dataView: false } ) as IArcMark; + + this._emptyArcMark.setDepend(this._pieMark); } } @@ -258,8 +260,8 @@ export class BasePieSeries extends PolarSeries { ...initialStyle, visible: () => { - const angleField = this.getAngleField()[0]; - return isDataEmpty(this.getViewData().latestData, angleField, this._supportNegative); + const data = this.getViewData().latestData; + return !data || !data.length; } }, 'normal', From f04f3529c7d9b338dcff6d8f9d82594ead118fa3 Mon Sep 17 00:00:00 2001 From: xile611 Date: Wed, 2 Apr 2025 14:33:08 +0800 Subject: [PATCH 13/19] docs: update changlog of rush --- .../fix-pie-empty-placeholder_2025-04-02-06-33.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/@visactor/vchart/fix-pie-empty-placeholder_2025-04-02-06-33.json diff --git a/common/changes/@visactor/vchart/fix-pie-empty-placeholder_2025-04-02-06-33.json b/common/changes/@visactor/vchart/fix-pie-empty-placeholder_2025-04-02-06-33.json new file mode 100644 index 0000000000..a761d50734 --- /dev/null +++ b/common/changes/@visactor/vchart/fix-pie-empty-placeholder_2025-04-02-06-33.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "fix: empty placeholder should update after data is updated, fix #3855\n\n", + "type": "none", + "packageName": "@visactor/vchart" + } + ], + "packageName": "@visactor/vchart", + "email": "dingling112@gmail.com" +} \ No newline at end of file From fe73ba0504d22f6d49f7b7a7610f6720d7fadd95 Mon Sep 17 00:00:00 2001 From: xile611 Date: Thu, 3 Apr 2025 18:14:50 +0800 Subject: [PATCH 14/19] feat: add new api `filterGraphicsByDatum` to BaseChart --- packages/vchart/src/chart/base/base-chart.ts | 138 ++++++++++++------- packages/vchart/src/chart/interface/chart.ts | 16 ++- packages/vchart/src/chart/sankey/sankey.ts | 78 +++++------ 3 files changed, 135 insertions(+), 97 deletions(-) diff --git a/packages/vchart/src/chart/base/base-chart.ts b/packages/vchart/src/chart/base/base-chart.ts index 6f2c01e021..3bf99a30f5 100644 --- a/packages/vchart/src/chart/base/base-chart.ts +++ b/packages/vchart/src/chart/base/base-chart.ts @@ -1226,65 +1226,105 @@ export class BaseChart extends CompilableBase implements I }); } - protected _setStateInDatum( - stateKey: string, - checkReverse: boolean, + filterGraphicsByDatum( datum: MaybeArray | null, - filter?: (series: ISeries, mark: IMark) => boolean, - region?: IRegionQuerier + opt: { + filter?: (series: ISeries, mark: IMark) => boolean; + region?: IRegionQuerier; + getDatum?: (el: IElement, mark: IMark, s: ISeries, r: IRegion) => Datum; + callback?: (el: IElement, mark: IMark, s: ISeries, r: IRegion) => void; + regionCallback?: (pickElements: IElement[], r: IRegion) => void; + } = {} ) { datum = datum ? array(datum) : null; - const keys = !datum ? null : Object.keys(datum[0]); - this.getRegionsInQuerier(region).forEach(r => { - if (!datum) { - r.interaction.clearEventElement(stateKey, true); - return; - } - r.getSeries().forEach(s => { - s.getMarks().forEach(m => { - if (!m.getProduct()) { - return; - } - if (!filter || (isFunction(filter) && filter(s, m))) { - const isCollect = m.getProduct().isCollectionMark(); - const elements = m.getProduct().elements; - let pickElements = [] as IElement[]; - if (isCollect) { - pickElements = elements.filter(e => { - const elDatum = e.getDatum(); - // eslint-disable-next-line max-nested-callbacks, eqeqeq - (datum as Datum[]).every((d, index) => keys.every(k => d[k] == elDatum[index][k])); - }); - } else { - if (datum.length > 1) { - const datumTemp = (datum as Datum[]).slice(); - pickElements = elements.filter(e => { - if (datumTemp.length === 0) { - return false; - } - const elDatum = e.getDatum(); + const keys = !datum ? null : Object.keys((datum as Datum[])[0]); + const allElements = [] as IElement[]; + const getDatumOfElement = opt.getDatum ?? ((el: IElement) => el.getDatum()); + + this.getRegionsInQuerier(opt.region).forEach(r => { + const pickElements = [] as IElement[]; + datum && + r.getSeries().forEach(s => { + s.getMarks().forEach(m => { + if (!m.getProduct()) { + return; + } + if (!opt.filter || (isFunction(opt.filter) && opt.filter(s, m))) { + const isCollect = m.getProduct().isCollectionMark(); + const elements = m.getProduct().elements; + if (isCollect) { + elements.filter(e => { + const elDatum = getDatumOfElement(e, m, s, r); // eslint-disable-next-line max-nested-callbacks, eqeqeq - const index = datumTemp.findIndex(d => keys.every(k => d[k] == elDatum[k])); - if (index >= 0) { - datumTemp.splice(index, 1); - return true; + const isPick = (datum as Datum[]).every((d, index) => keys.every(k => d[k] == elDatum[index][k])); + + if (isPick) { + pickElements.push(e); + allElements.push(e); + opt.callback && opt.callback(e, m, s, r); } - return false; }); } else { - // eslint-disable-next-line eqeqeq - const el = elements.find(e => keys.every(k => datum[0][k] == e.getDatum()[k])); - el && (pickElements = [el]); + if (datum.length > 1) { + const datumTemp = (datum as Datum[]).slice(); + + elements.forEach(e => { + const elDatum = getDatumOfElement(e, m, s, r); + // eslint-disable-next-line max-nested-callbacks, eqeqeq + const index = datumTemp.findIndex(d => keys.every(k => d[k] == elDatum[k])); + if (index >= 0) { + datumTemp.splice(index, 1); + + pickElements.push(e); + allElements.push(e); + opt.callback && opt.callback(e, m, s, r); + } + }); + } else { + const el = elements.find(e => + // eslint-disable-next-line eqeqeq + keys.every(k => (datum as Datum[])[0][k] == getDatumOfElement(e, m, s, r)[k]) + ); + + if (el) { + pickElements.push(el); + allElements.push(el); + opt.callback && opt.callback(el, m, s, r); + } + } } } - pickElements.forEach(element => { - r.interaction.startInteraction(stateKey, element); - }); - } + }); }); - }); - if (checkReverse) { - r.interaction.reverseEventElement(stateKey); + + opt.regionCallback && opt.regionCallback(pickElements, r); + }); + + return allElements; + } + + protected _setStateInDatum( + stateKey: string, + checkReverse: boolean, + datum: MaybeArray | null, + filter?: (series: ISeries, mark: IMark) => boolean, + region?: IRegionQuerier + ) { + this.filterGraphicsByDatum(datum, { + filter, + region, + regionCallback: (elements, r) => { + if (!datum) { + r.interaction.clearEventElement(stateKey, true); + } else if (elements.length) { + elements.forEach(e => { + r.interaction.startInteraction(stateKey, e); + }); + + if (checkReverse) { + r.interaction.reverseEventElement(stateKey); + } + } } }); } diff --git a/packages/vchart/src/chart/interface/chart.ts b/packages/vchart/src/chart/interface/chart.ts index 718fed8b45..cd66a63d2b 100644 --- a/packages/vchart/src/chart/interface/chart.ts +++ b/packages/vchart/src/chart/interface/chart.ts @@ -1,6 +1,6 @@ import type { IEvent } from '../../event/interface'; import type { LayoutCallBack } from '../../layout/interface'; -import type { IView } from '@visactor/vgrammar-core'; +import type { IElement, IView } from '@visactor/vgrammar-core'; import type { IParserOptions } from '@visactor/vdataset'; import type { IComponent, IComponentConstructor } from '../../component/interface'; import type { IMark } from '../../mark/interface'; @@ -210,6 +210,20 @@ export interface IChart extends ICompilable { getSeriesData: (id: StringOrNumber | undefined, index: number | undefined) => DataView | undefined; // setDimensionIndex setDimensionIndex: (value: StringOrNumber, opt: DimensionIndexOption) => void; + /** + * 根据数据筛选图元 + * @since 1.13.9 + */ + filterGraphicsByDatum: ( + datum: MaybeArray | null, + opt?: { + filter?: (series: ISeries, mark: IMark) => boolean; + region?: IRegionQuerier; + getDatum?: (el: IElement, mark: IMark, s: ISeries, r: IRegion) => Datum; + callback?: (el: IElement, mark: IMark, s: ISeries, r: IRegion) => void; + regionCallback?: (pickElements: IElement[], r: IRegion) => void; + } + ) => IElement[]; } export interface IChartSpecTransformer { diff --git a/packages/vchart/src/chart/sankey/sankey.ts b/packages/vchart/src/chart/sankey/sankey.ts index 80f8e3f5c0..1827b2ecf9 100644 --- a/packages/vchart/src/chart/sankey/sankey.ts +++ b/packages/vchart/src/chart/sankey/sankey.ts @@ -9,7 +9,7 @@ import type { Datum, MaybeArray } from '../../typings/common'; import type { ISeries } from '../../series/interface'; import type { IMark } from '../../mark/interface/common'; import type { IRegionQuerier } from '../../typings/params'; -import { isArray, isFunction } from '@visactor/vutils'; +import { isArray } from '@visactor/vutils'; import { loadScrollbar } from '@visactor/vrender-components'; export class SankeyChart extends BaseChart { @@ -29,57 +29,41 @@ export class SankeyChart extends ) { // 桑基图暂时只支持单选 const activeDatum = isArray(datum) ? datum[0] : datum; - const keys = !activeDatum ? null : Object.keys(activeDatum); - this.getRegionsInQuerier(region).forEach(r => { - if (!activeDatum) { - r.interaction.clearEventElement(stateKey, true); - return; - } - let hasPick = false; - r.getSeries().forEach(s => { - let activeNodeOrLink = null; - - s.getMarksWithoutRoot().forEach(m => { - if (m.type === 'text') { - return; - } - - let pickElement = null; - const mark = m.getProduct(); - if (!mark) { - return; - } - if (!filter || (isFunction(filter) && filter(s, m))) { - pickElement = mark.elements.find((e: any) => - keys.every(k => { - let datum = e.getDatum()?.datum; + const markFilter = (series: ISeries, mark: IMark) => { + return mark.type !== 'text' && mark.getProduct() && (!filter || filter(series, mark)); + }; - if (isArray(datum)) { - // data of link - datum = datum[0]; - } + this.filterGraphicsByDatum(activeDatum, { + filter: markFilter, + region, + getDatum: e => { + let d = e.getDatum()?.datum; - // eslint-disable-next-line eqeqeq - return activeDatum[k] == datum?.[k]; - }) - ); - } - if (pickElement) { - hasPick = true; - r.interaction.startInteraction(stateKey, pickElement); + if (isArray(d)) { + // data of link + d = d[0]; + } + return d; + }, + callback: (element, mark, s, r) => { + const id = mark.getProduct()?.id(); + if (id && (id.includes('node') || id.includes('link'))) { + (s as any)._handleEmphasisElement?.({ item: element }); + } + }, + regionCallback: (elements, r) => { + if (!activeDatum) { + r.interaction.clearEventElement(stateKey, true); + return; + } else if (elements.length) { + elements.forEach(e => { + r.interaction.startInteraction(stateKey, e); + }); - if (mark.id().includes('node') || mark.id().includes('link')) { - activeNodeOrLink = pickElement; - } + if (checkReverse) { + r.interaction.reverseEventElement(stateKey); } - }); - - if (activeNodeOrLink) { - (s as any)._handleEmphasisElement?.({ item: activeNodeOrLink }); } - }); - if (checkReverse && hasPick) { - r.interaction.reverseEventElement(stateKey); } }); } From 604dc8a88783876873e39a8d7567546cf14c33ca Mon Sep 17 00:00:00 2001 From: xile611 Date: Thu, 3 Apr 2025 18:24:13 +0800 Subject: [PATCH 15/19] fix: optimize the `filterGraphicsByDatum` about empty data --- packages/vchart/src/chart/base/base-chart.ts | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/vchart/src/chart/base/base-chart.ts b/packages/vchart/src/chart/base/base-chart.ts index 3bf99a30f5..a41a884182 100644 --- a/packages/vchart/src/chart/base/base-chart.ts +++ b/packages/vchart/src/chart/base/base-chart.ts @@ -1255,8 +1255,9 @@ export class BaseChart extends CompilableBase implements I if (isCollect) { elements.filter(e => { const elDatum = getDatumOfElement(e, m, s, r); - // eslint-disable-next-line max-nested-callbacks, eqeqeq - const isPick = (datum as Datum[]).every((d, index) => keys.every(k => d[k] == elDatum[index][k])); + const isPick = + // eslint-disable-next-line max-nested-callbacks, eqeqeq + elDatum && (datum as Datum[]).every((d, index) => keys.every(k => d[k] == elDatum[index][k])); if (isPick) { pickElements.push(e); @@ -1271,7 +1272,7 @@ export class BaseChart extends CompilableBase implements I elements.forEach(e => { const elDatum = getDatumOfElement(e, m, s, r); // eslint-disable-next-line max-nested-callbacks, eqeqeq - const index = datumTemp.findIndex(d => keys.every(k => d[k] == elDatum[k])); + const index = elDatum && datumTemp.findIndex(d => keys.every(k => d[k] == elDatum[k])); if (index >= 0) { datumTemp.splice(index, 1); @@ -1281,10 +1282,11 @@ export class BaseChart extends CompilableBase implements I } }); } else { - const el = elements.find(e => + const el = elements.find(e => { + const elDatum = getDatumOfElement(e, m, s, r); // eslint-disable-next-line eqeqeq - keys.every(k => (datum as Datum[])[0][k] == getDatumOfElement(e, m, s, r)[k]) - ); + return elDatum && keys.every(k => (datum as Datum[])[0][k] == elDatum[k]); + }); if (el) { pickElements.push(el); From 55898969dc88a1f4d406133d64afeeed623ca72d Mon Sep 17 00:00:00 2001 From: skie1997 Date: Mon, 14 Apr 2025 17:40:55 +0800 Subject: [PATCH 16/19] refactor: brush interactive. close#3765 & #3262 & #2802 --- .../refactor-brush_2025-04-14-09-40.json | 10 + .../browser/test-page/brush-summary.ts | 1527 +++++++++++++++++ packages/vchart/src/component/brush/brush.ts | 650 +++---- .../vchart/src/component/brush/interface.ts | 15 +- packages/vchart/src/constant/event.ts | 1 + 5 files changed, 1881 insertions(+), 322 deletions(-) create mode 100644 common/changes/@visactor/vchart/refactor-brush_2025-04-14-09-40.json create mode 100644 packages/vchart/__tests__/runtime/browser/test-page/brush-summary.ts diff --git a/common/changes/@visactor/vchart/refactor-brush_2025-04-14-09-40.json b/common/changes/@visactor/vchart/refactor-brush_2025-04-14-09-40.json new file mode 100644 index 0000000000..956e711d1a --- /dev/null +++ b/common/changes/@visactor/vchart/refactor-brush_2025-04-14-09-40.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@visactor/vchart", + "comment": "refactor: brush interactive. close#3765 & #3262 & #2802", + "type": "none" + } + ], + "packageName": "@visactor/vchart" +} \ No newline at end of file diff --git a/packages/vchart/__tests__/runtime/browser/test-page/brush-summary.ts b/packages/vchart/__tests__/runtime/browser/test-page/brush-summary.ts new file mode 100644 index 0000000000..95d71c10ec --- /dev/null +++ b/packages/vchart/__tests__/runtime/browser/test-page/brush-summary.ts @@ -0,0 +1,1527 @@ +import { isMobile } from 'react-device-detect'; +import { default as VChart } from '../../../../src/index'; +import { DataSet, DataView, csvParser } from '@visactor/vdataset'; + +const run = async () => { + const dataSet = new DataSet(); + dataSet.registerParser('csv', csvParser); + const dataView = new DataView(dataSet); + const type1 = ['A', 'B']; + const type2 = ['A', 'B']; + const color = { + A: { + A: 'A', + B: 'B' + }, + B: { + A: 'C', + B: 'D' + } + }; + + let data = 'y,x,y2,type,type2,color'; + type2.forEach(t2 => { + type1.forEach(t => { + for (let i = 0; i < 10; i++) { + data += `\n${Math.floor(Math.random() * 300) + 600},${i},0,${t},${t2},${color[t][t2]}`; + } + }); + }); + + dataView.parse(data, { + type: 'csv' + }); + const spec = { + type: 'line', + xField: ['250109111947088'], + yField: ['10002'], + direction: 'vertical', + seriesField: '20001', + padding: 0, + labelLayout: 'region', + data: [ + { + id: 'data', + values: [ + { + '10001': 'sales', + '10002': '572.88', + '10003': '250109111947091', + '20001': 'sales', + '250109111947088': '2017-01-01', + '250109111947091': '572.88' + }, + { + '10001': 'sales', + '10002': '3599.9880000000003', + '10003': '250109111947091', + '20001': 'sales', + '250109111947088': '2017-01-03', + '250109111947091': '3599.9880000000003' + }, + { + '10001': 'sales', + '10002': '15928.248', + '10003': '250109111947091', + '20001': 'sales', + '250109111947088': '2017-01-04', + '250109111947091': '15928.248' + }, + { + '10001': 'sales', + '10002': '3593.9680000000003', + '10003': '250109111947091', + '20001': 'sales', + '250109111947088': '2017-01-05', + '250109111947091': '3593.9680000000003' + }, + { + '10001': 'sales', + '10002': '9932.328000000001', + '10003': '250109111947091', + '20001': 'sales', + '250109111947088': '2017-01-06', + '250109111947091': '9932.328000000001' + }, + { + '10001': 'sales', + '10002': '186.396', + '10003': '250109111947091', + '20001': 'sales', + '250109111947088': '2017-01-08', + '250109111947091': '186.396' + }, + { + '10001': 'sales', + '10002': '541.8', + '10003': '250109111947091', + '20001': 'sales', + '250109111947088': '2017-01-09', + '250109111947091': '541.8' + }, + { + '10001': 'sales', + '10002': '7029.958', + '10003': '250109111947091', + '20001': 'sales', + '250109111947088': '2017-01-10', + '250109111947091': '7029.958' + }, + { + '10001': 'sales', + '10002': '56.448', + '10003': '250109111947091', + '20001': 'sales', + '250109111947088': '2017-01-11', + '250109111947091': '56.448' + }, + { + '10001': 'sales', + '10002': '3004.6800000000003', + '10003': '250109111947091', + '20001': 'sales', + '250109111947088': '2017-01-12', + '250109111947091': '3004.6800000000003' + }, + { + '10001': 'sales', + '10002': '4945.756', + '10003': '250109111947091', + '20001': 'sales', + '250109111947088': '2017-01-14', + '250109111947091': '4945.756' + }, + { + '10001': 'sales', + '10002': '12221', + '10003': '250109111947091', + '20001': 'sales', + '250109111947088': '2017-01-16', + '250109111947091': '12221' + }, + { + '10001': 'sales', + '10002': '9317.868', + '10003': '250109111947091', + '20001': 'sales', + '250109111947088': '2017-01-17', + '250109111947091': '9317.868' + }, + { + '10001': 'sales', + '10002': '7425.824', + '10003': '250109111947091', + '20001': 'sales', + '250109111947088': '2017-01-18', + '250109111947091': '7425.824' + }, + { + '10001': 'sales', + '10002': '2919.2799999999997', + '10003': '250109111947091', + '20001': 'sales', + '250109111947088': '2017-01-20', + '250109111947091': '2919.2799999999997' + }, + { + '10001': 'sales', + '10002': '600.908', + '10003': '250109111947091', + '20001': 'sales', + '250109111947088': '2017-01-21', + '250109111947091': '600.908' + }, + { + '10001': 'sales', + '10002': '25273.829999999998', + '10003': '250109111947091', + '20001': 'sales', + '250109111947088': '2017-01-23', + '250109111947091': '25273.829999999998' + }, + { + '10001': 'sales', + '10002': '6008.099999999999', + '10003': '250109111947091', + '20001': 'sales', + '250109111947088': '2017-01-24', + '250109111947091': '6008.099999999999' + }, + { + '10001': 'sales', + '10002': '2753.46', + '10003': '250109111947091', + '20001': 'sales', + '250109111947088': '2017-01-25', + '250109111947091': '2753.46' + }, + { + '10001': 'sales', + '10002': '24794.174', + '10003': '250109111947091', + '20001': 'sales', + '250109111947088': '2017-01-26', + '250109111947091': '24794.174' + }, + { + '10001': 'sales', + '10002': '17047.379999999997', + '10003': '250109111947091', + '20001': 'sales', + '250109111947088': '2017-01-27', + '250109111947091': '17047.379999999997' + }, + { + '10001': 'sales', + '10002': '711.48', + '10003': '250109111947091', + '20001': 'sales', + '250109111947088': '2017-01-29', + '250109111947091': '711.48' + } + ], + fields: { + '10001': { + alias: '指标名称 ' + }, + '10002': { + alias: '指标值 ' + }, + '20001': { + alias: '图例项 ', + domain: ['sales'], + sortIndex: 0, + lockStatisticsByDomain: true + }, + '250109111947088': { + alias: 'order_date', + domain: [ + '2017-01-01', + '2017-01-03', + '2017-01-04', + '2017-01-05', + '2017-01-06', + '2017-01-08', + '2017-01-09', + '2017-01-10', + '2017-01-11', + '2017-01-12', + '2017-01-14', + '2017-01-16', + '2017-01-17', + '2017-01-18', + '2017-01-20', + '2017-01-21', + '2017-01-23', + '2017-01-24', + '2017-01-25', + '2017-01-26', + '2017-01-27', + '2017-01-29' + ], + sortIndex: 0, + lockStatisticsByDomain: true + }, + '250109111947091': { + alias: 'sales' + } + } + } + ], + stackInverse: true, + axes: [ + { + type: 'band', + tick: { + visible: false + }, + grid: { + visible: false, + style: { + zIndex: 150, + stroke: '#DADCDD', + lineWidth: 1, + lineDash: [4, 2] + } + }, + orient: 'bottom', + visible: true, + domainLine: { + visible: true, + style: { + lineWidth: 1, + stroke: '#989999' + } + }, + title: { + visible: false, + space: 5, + text: 'order_date', + style: { + fontSize: 12, + fill: '#363839', + fontWeight: 'normal' + } + }, + maxHeight: null, + autoIndent: false, + sampling: false, + zIndex: 200, + label: { + visible: true, + space: 4, + style: { + fontSize: 12, + fill: '#6F6F6F', + angle: 0, + fontWeight: 'normal', + direction: 'horizontal', + maxLineWidth: 174 + }, + autoHide: true, + autoHideMethod: 'greedy', + flush: true, + lastVisible: true + }, + hover: true, + background: { + visible: true, + state: { + hover: { + fillOpacity: 0.08, + fill: '#141414' + }, + hover_reverse: { + fillOpacity: 0.08, + fill: '#141414' + } + } + }, + paddingInner: 0.36249999999999993, + paddingOuter: 0.175 + }, + { + type: 'linear', + tick: { + visible: false, + style: { + stroke: 'rgba(255, 255, 255, 0)' + } + }, + niceType: 'accurateFirst', + zIndex: 200, + grid: { + visible: true, + style: { + zIndex: 150, + stroke: '#DADCDD', + lineWidth: 1, + lineDash: [4, 2] + } + }, + orient: 'left', + visible: true, + domainLine: { + visible: true, + style: { + lineWidth: 1, + stroke: 'rgba(255, 255, 255, 0)' + } + }, + title: { + visible: false, + text: 'sales', + space: 8, + style: { + fontSize: 12, + fill: '#363839', + fontWeight: 'normal' + } + }, + autoIndent: false, + sampling: false, + label: { + visible: true, + space: 6, + flush: true, + padding: 0, + style: { + fontSize: 12, + maxLineWidth: 174, + fill: '#6F6F6F', + angle: 0, + fontWeight: 'normal', + dy: 0, + direction: 'horizontal' + }, + autoHide: true, + autoHideMethod: 'greedy' + }, + background: { + visible: true, + state: { + hover: { + fillOpacity: 0.08, + fill: '#141414' + }, + hover_reverse: { + fillOpacity: 0.08, + fill: '#141414' + } + } + }, + innerOffset: { + top: 4.4311346272637895 + }, + zero: true, + nice: true + } + ], + color: { + field: '20001', + type: 'ordinal', + range: ['#2E62F1'], + specified: {}, + domain: ['sales'] + }, + legends: [ + { + type: 'discrete', + visible: true, + id: 'legend-discrete', + orient: 'right', + position: 'start', + layoutType: 'normal', + maxCol: 1, + title: { + textStyle: { + fontSize: 12, + fill: '#6F6F6F' + } + }, + layoutLevel: 60, + item: { + focus: true, + focusIconStyle: { + size: 14 + }, + maxWidth: 398, + spaceRow: 0, + spaceCol: 0, + padding: { + top: 1, + bottom: 2, + left: 3, + right: 2 + }, + background: { + visible: false, + style: { + fillOpacity: 0.001 + } + }, + label: { + style: { + fontSize: 12, + fill: '#6F6F6F' + } + }, + shape: { + style: { + lineWidth: 0, + symbolType: 'circle', + fillOpacity: 1, + size: 10 + } + } + }, + pager: { + type: 'default', + layout: 'horizontal', + padding: { + left: -18 + }, + textStyle: {}, + space: 0, + handler: { + preShape: 'triangleLeft', + nextShape: 'triangleRight', + style: {}, + state: { + disable: {} + } + } + }, + alignSelf: 'end', + padding: { + top: 0, + bottom: 12, + left: 16, + right: 0 + } + } + ], + label: { + visible: false, + offset: 3, + overlap: { + hideOnHit: true, + avoidBaseMark: false, + strategy: [ + { + type: 'position', + position: ['top', 'bottom'] + } + ], + clampForce: true + }, + style: { + fontSize: 12, + fontWeight: 'normal', + zIndex: 400, + lineHeight: '100%', + boundsPadding: [1, 0, 0, 0], + fill: '#363839', + stroke: 'rgba(255, 255, 255, 0.8)', + lineWidth: 2, + strokeOpacity: 1 + }, + position: 'top', + smartInvert: false + }, + tooltip: { + handler: {} + }, + point: { + style: { + shape: { + type: 'ordinal', + field: '20001', + range: ['circle'], + domain: ['sales'] + }, + size: { + type: 'ordinal', + field: '20001', + range: [7.0898154036220635], + domain: ['sales'] + }, + fill: { + field: '20001', + type: 'ordinal', + range: ['#2E62F1'], + specified: {}, + domain: ['sales'] + }, + stroke: { + field: '20001', + type: 'ordinal', + range: ['#2E62F1'], + specified: {}, + domain: ['sales'] + }, + strokeOpacity: { + type: 'ordinal', + field: '20001', + range: [1], + domain: ['sales'] + }, + fillOpacity: { + type: 'ordinal', + field: '20001', + range: [1], + domain: ['sales'] + } + }, + state: { + hover: { + lineWidth: 2, + fillOpacity: 1, + strokeOpacity: 1, + scaleX: 1.5, + scaleY: 1.5, + cursor: 'pointer' + }, + dimension_hover: { + visible: true + } + } + }, + line: { + style: { + curveType: { + type: 'ordinal', + field: '20001', + range: ['linear'], + domain: ['sales'] + }, + lineWidth: { + type: 'ordinal', + field: '20001', + range: [3], + domain: ['sales'] + }, + lineDash: { + type: 'ordinal', + field: '20001', + range: [[0, 0]], + domain: ['sales'] + } + } + }, + seriesMark: 'line', + markOverlap: true, + region: [ + { + clip: true + } + ], + background: 'rgba(255, 255, 255, 0)', + area: { + style: { + curveType: { + type: 'ordinal', + field: '20001', + range: ['linear'], + domain: ['sales'] + } + } + }, + invalidType: 'break', + animation: false, + brush: { + // markTypeFilter: ['line'], + endTrigger: ['pointerup', 'pointerupoutside'], + sizeThreshold: 50, + inBrush: { + fillOpacity: 1, + strokeOpacity: 1, + colorAlpha: 1 + }, + outOfBrush: { + colorAlpha: 0.2, + fillOpacity: 0.3 + } + }, + crosshair: { + xField: { + visible: true, + line: { + type: 'rect', + style: { + fillOpacity: 0.2, + fill: '#b2bacf' + } + } + }, + gridZIndex: 100 + }, + hash: '3d3f5254de2551eaf32c946dd44bb42e' + }; + + const cs = new VChart(spec, { + dataSet, + dom: document.getElementById('chart'), + mode: isMobile ? 'mobile-browser' : 'desktop-browser' + }); + console.time('renderTime'); + cs.renderAsync().then(() => { + console.timeEnd('renderTime'); + cs.on('brushStart', (...e) => console.log('brushStart', e)); + cs.on('brushEnd', (...e) => console.log('brushEnd', e)); + cs.on('brushClear', (...e) => console.log('brushClear', e)); + cs.on('brushActive', (...e) => console.log('brushActive', e)); + }); + + const response = await fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/brush-data.json'); + const dataBrush = await response.json(); + + const row = 4; + const col = 4; + const region = []; + const layoutElements = []; + const series = []; + const axes = []; + const rowHeight = []; + for (let k = 0; k < row * col; k++) { + region.push({ + id: `${k}_Region` + }); + + const seriesRow = Math.floor(k / col) + Math.floor(k / col); + const seriesCol = k - Math.floor(k / col) * col; + + // 系列行 + layoutElements.push({ + row: seriesRow, + col: seriesCol + seriesCol + 1, + modelId: `${k}_Region` + }); + + series.push({ + id: `${k}_Region`, + type: 'scatter', + xField: 'x', + yField: 'y', + seriesField: 'type', + data: { id: `${k}_Data`, values: dataBrush[k] }, + regionId: `${k}_Region`, + size: 5 + }); + + axes.push({ + id: `${k}_Left`, + orient: 'left', + regionId: `${k}_Region`, + seriesId: [`${k}_Region`], + zero: false + }); + + layoutElements.push({ + row: seriesRow, + col: seriesCol + seriesCol, + modelId: `${k}_Left` + }); + + axes.push({ + id: `${k}_Bottom`, + orient: 'bottom', + regionId: `${k}_Region`, + seriesId: [`${k}_Region`], + type: 'linear', + zero: false + }); + + layoutElements.push({ + row: seriesRow + 1, + col: seriesCol + seriesCol + 1, + modelId: `${k}_Bottom` + }); + + if (seriesCol === 0) { + rowHeight.push({ + index: seriesRow + 1, + size: 30 + }); + } + } + + const spec2 = { + type: 'common', + padding: 30, + region, + layout: { + type: 'grid', + col: col * 2, + row: row * 2, + elements: layoutElements, + rowHeight + }, + axes, + tooltip: false, + series, + brush: { + seriesIndex: Array.from({ length: 16 }, (v, k) => k), + brushType: 'rect', + brushLinkSeriesIndex: Array.from({ length: 16 }, (v, k) => k), + inBrush: { + colorAlpha: 1 + }, + outOfBrush: { + colorAlpha: 0.2 + } + } + }; + + const cs2 = new VChart(spec2, { + dataSet, + dom: document.getElementById('chart'), + mode: isMobile ? 'mobile-browser' : 'desktop-browser' + }); + console.time('renderTime'); + cs2.renderAsync().then(() => { + console.timeEnd('renderTime'); + cs2.on('brushStart', (...e) => console.log('brushStart-2', e)); + cs2.on('brushEnd', (...e) => console.log('brushEnd-2', e)); + cs2.on('brushClear', (...e) => console.log('brushClear-2', e)); + cs2.on('brushActive', (...e) => console.log('brushActive-2', e)); + }); + window['vchart2'] = cs; + console.log(cs); + + const spec3 = { + type: 'scatter', + data: [ + { + values: [ + { x: 936196, size: 83431, y: 1371, type: 'Technology', area: 'Northeast' }, + { x: 1270911, size: 219815, y: 5590, type: 'office supplies', area: 'Zhongnan' }, + { x: 453898, size: 19061, y: 727, type: 'Technology', area: 'Southwest' }, + { x: 919743, size: 148800, y: 1199, type: 'furniture', area: 'North China' }, + { x: 1676224, size: 163453, y: 2517, type: 'furniture', area: 'East China' }, + { x: 1466575, size: 251487, y: 2087, type: 'Technology', area: 'Zhongnan' }, + { x: 824673, size: 86067, y: 3622, type: 'office supplies', area: 'Northeast' }, + { x: 230956, size: 24016, y: 347, type: 'Technology', area: 'Northwest' }, + { x: 1599653, size: 228179, y: 2183, type: 'Technology', area: 'East China' }, + { x: 745813, size: 137265, y: 3020, type: 'office supplies', area: 'North China' }, + { x: 267870, size: 49633, y: 970, type: 'office supplies', area: 'Northwest' }, + { x: 1408628, size: 215585, y: 6341, type: 'office supplies', area: 'East China' }, + { x: 781743, size: 144986, y: 927, type: 'Technology', area: 'North China' }, + { x: 501533, size: 29303, y: 814, type: 'furniture', area: 'Southwest' }, + { x: 920698, size: 72692, y: 1470, type: 'furniture', area: 'Northeast' }, + { x: 316212, size: 24903, y: 468, type: 'furniture', area: 'Northwest' }, + { x: 1399928, size: 199582, y: 2023, type: 'furniture', area: 'Zhongnan' }, + { x: 347692, size: 49272, y: 1858, type: 'office supplies', area: 'Southwest' } + ] + } + ], + xField: 'x', + yField: 'y', + seriesField: 'type', + sizeField: 'size', + size: [10, 25], + shapeField: 'type', + shape: ['circle', 'triangle'], + axes: [ + { orient: 'left', range: { min: 0 }, type: 'linear' }, + { orient: 'bottom', label: { visible: true }, type: 'linear' } + ], + legends: [ + { + visible: true, + orient: 'left', + position: 'start', + title: { + visible: true, + style: { + text: 'title' + } + }, + item: { + visible: true + } + } + ], + direction: 'horizontal', + brush: { + brushMode: 'multiple', + brushType: 'rect', + inBrush: { + colorAlpha: 1 + }, + outOfBrush: { + colorAlpha: 0.2 + } + } + }; + const cs3 = new VChart(spec3, { + dataSet, + dom: document.getElementById('chart'), + mode: isMobile ? 'mobile-browser' : 'desktop-browser' + }); + console.time('renderTime'); + cs3.renderAsync().then(() => { + console.timeEnd('renderTime'); + cs3.on('brushStart', (...e) => console.log('brushStart-3', e)); + cs3.on('brushEnd', (...e) => console.log('brushEnd-3', e)); + cs3.on('brushClear', (...e) => console.log('brushClear-3', e)); + cs3.on('brushActive', (...e) => console.log('brushActive-3', e)); + }); + window['vchart3'] = cs3; + + const spec4 = { + type: 'bar', + xField: ['10002'], + yField: ['241216184524145', '20001'], + direction: 'horizontal', + seriesField: '20001', + padding: 0, + labelLayout: 'region', + data: [ + { + id: 'data', + values: [ + { + '10001': '销售额', + '10002': '710386.2080000001', + '10003': '241216184524139', + '20001': '公司-销售额', + '241216184524139': '710386.2080000001', + '241216184524145': '2019', + '241216184524148': '公司' + }, + { + '10001': '利润', + '10002': '96740.72800000002', + '10003': '241216184524142', + '20001': '公司-利润', + '241216184524142': '96740.72800000002', + '241216184524145': '2019', + '241216184524148': '公司' + }, + { + '10001': '销售额', + '10002': '401978.82199999975', + '10003': '241216184524139', + '20001': '小型企业-销售额', + '241216184524139': '401978.82199999975', + '241216184524145': '2019', + '241216184524148': '小型企业' + }, + { + '10001': '利润', + '10002': '70445.662', + '10003': '241216184524142', + '20001': '小型企业-利润', + '241216184524142': '70445.662', + '241216184524145': '2019', + '241216184524148': '小型企业' + }, + { + '10001': '销售额', + '10002': '1209267.4509999994', + '10003': '241216184524139', + '20001': '消费者-销售额', + '241216184524139': '1209267.4509999994', + '241216184524145': '2019', + '241216184524148': '消费者' + }, + { + '10001': '利润', + '10002': '130523.21100000004', + '10003': '241216184524142', + '20001': '消费者-利润', + '241216184524142': '130523.21100000004', + '241216184524145': '2019', + '241216184524148': '消费者' + }, + { + '10001': '销售额', + '10002': '1194097.982', + '10003': '241216184524139', + '20001': '公司-销售额', + '241216184524139': '1194097.982', + '241216184524145': '2020', + '241216184524148': '公司' + }, + { + '10001': '利润', + '10002': '156066.722', + '10003': '241216184524142', + '20001': '公司-利润', + '241216184524142': '156066.722', + '241216184524145': '2020', + '241216184524148': '公司' + }, + { + '10001': '销售额', + '10002': '612662.176', + '10003': '241216184524139', + '20001': '小型企业-销售额', + '241216184524139': '612662.176', + '241216184524145': '2020', + '241216184524148': '小型企业' + }, + { + '10001': '利润', + '10002': '70031.83600000002', + '10003': '241216184524142', + '20001': '小型企业-利润', + '241216184524142': '70031.83600000002', + '241216184524145': '2020', + '241216184524148': '小型企业' + }, + { + '10001': '销售额', + '10002': '1547854.518', + '10003': '241216184524139', + '20001': '消费者-销售额', + '241216184524139': '1547854.518', + '241216184524145': '2020', + '241216184524148': '消费者' + }, + { + '10001': '利润', + '10002': '224529.71799999976', + '10003': '241216184524142', + '20001': '消费者-利润', + '241216184524142': '224529.71799999976', + '241216184524145': '2020', + '241216184524148': '消费者' + }, + { + '10001': '销售额', + '10002': '751827.4890000003', + '10003': '241216184524139', + '20001': '小型企业-销售额', + '241216184524139': '751827.4890000003', + '241216184524145': '2021', + '241216184524148': '小型企业' + }, + { + '10001': '利润', + '10002': '104185.24900000016', + '10003': '241216184524142', + '20001': '小型企业-利润', + '241216184524142': '104185.24900000016', + '241216184524145': '2021', + '241216184524148': '小型企业' + }, + { + '10001': '销售额', + '10002': '1232049.7069999985', + '10003': '241216184524139', + '20001': '公司-销售额', + '241216184524139': '1232049.7069999985', + '241216184524145': '2021', + '241216184524148': '公司' + }, + { + '10001': '利润', + '10002': '170255.82699999984', + '10003': '241216184524142', + '20001': '公司-利润', + '241216184524142': '170255.82699999984', + '241216184524145': '2021', + '241216184524148': '公司' + }, + { + '10001': '销售额', + '10002': '2009897.834', + '10003': '241216184524139', + '20001': '消费者-销售额', + '241216184524139': '2009897.834', + '241216184524145': '2021', + '241216184524148': '消费者' + }, + { + '10001': '利润', + '10002': '297288.05400000047', + '10003': '241216184524142', + '20001': '消费者-利润', + '241216184524142': '297288.05400000047', + '241216184524145': '2021', + '241216184524148': '消费者' + }, + { + '10001': '销售额', + '10002': '1707242.6979999992', + '10003': '241216184524139', + '20001': '公司-销售额', + '241216184524139': '1707242.6979999992', + '241216184524145': '2022', + '241216184524148': '公司' + }, + { + '10001': '利润', + '10002': '198663.45799999998', + '10003': '241216184524142', + '20001': '公司-利润', + '241216184524142': '198663.45799999998', + '241216184524145': '2022', + '241216184524148': '公司' + }, + { + '10001': '销售额', + '10002': '2849279.1179999993', + '10003': '241216184524139', + '20001': '消费者-销售额', + '241216184524139': '2849279.1179999993', + '241216184524145': '2022', + '241216184524148': '消费者' + }, + { + '10001': '利润', + '10002': '378567.09799999924', + '10003': '241216184524142', + '20001': '消费者-利润', + '241216184524142': '378567.09799999924', + '241216184524145': '2022', + '241216184524148': '消费者' + }, + { + '10001': '销售额', + '10002': '972806.0580000003', + '10003': '241216184524139', + '20001': '小型企业-销售额', + '241216184524139': '972806.0580000003', + '241216184524145': '2022', + '241216184524148': '小型企业' + }, + { + '10001': '利润', + '10002': '146603.898', + '10003': '241216184524142', + '20001': '小型企业-利润', + '241216184524142': '146603.898', + '241216184524145': '2022', + '241216184524148': '小型企业' + }, + { + '10001': '销售额', + '10002': '309016.701', + '10003': '241216184524139', + '20001': '公司-销售额', + '241216184524139': '309016.701', + '241216184524145': '2023', + '241216184524148': '公司' + }, + { + '10001': '利润', + '10002': '60240.901000000005', + '10003': '241216184524142', + '20001': '公司-利润', + '241216184524142': '60240.901000000005', + '241216184524145': '2023', + '241216184524148': '公司' + }, + { + '10001': '销售额', + '10002': '151814.09599999996', + '10003': '241216184524139', + '20001': '小型企业-销售额', + '241216184524139': '151814.09599999996', + '241216184524145': '2023', + '241216184524148': '小型企业' + }, + { + '10001': '利润', + '10002': '21212.016', + '10003': '241216184524142', + '20001': '小型企业-利润', + '241216184524142': '21212.016', + '241216184524145': '2023', + '241216184524148': '小型企业' + }, + { + '10001': '销售额', + '10002': '408773.2670000001', + '10003': '241216184524139', + '20001': '消费者-销售额', + '241216184524139': '408773.2670000001', + '241216184524145': '2023', + '241216184524148': '消费者' + }, + { + '10001': '利润', + '10002': '22184.54699999999', + '10003': '241216184524142', + '20001': '消费者-利润', + '241216184524142': '22184.54699999999', + '241216184524145': '2023', + '241216184524148': '消费者' + } + ], + fields: { + '10001': { + alias: '指标名称 ' + }, + '10002': { + alias: '指标值 ' + }, + '20001': { + alias: '图例项 ', + domain: ['公司-销售额', '小型企业-销售额', '消费者-销售额', '公司-利润', '小型企业-利润', '消费者-利润'], + sortIndex: 0, + lockStatisticsByDomain: true + }, + '241216184524139': { + alias: '销售额' + }, + '241216184524142': { + alias: '利润' + }, + '241216184524145': { + alias: '订单日期', + domain: ['2019', '2020', '2021', '2022', '2023'], + sortIndex: 0, + lockStatisticsByDomain: true + }, + '241216184524148': { + alias: '细分' + } + } + } + ], + stackInverse: true, + axes: [ + { + type: 'band', + tick: { + visible: false + }, + grid: { + visible: false, + style: { + zIndex: 150, + stroke: '#DADCDD', + lineWidth: 1, + lineDash: [4, 2] + } + }, + orient: 'left', + visible: true, + domainLine: { + visible: true, + style: { + lineWidth: 1, + stroke: '#989999' + } + }, + title: { + visible: false, + space: 5, + text: '订单日期', + style: { + fontSize: 12, + fill: '#363839', + fontWeight: 'normal' + } + }, + maxHeight: null, + autoIndent: false, + sampling: false, + zIndex: 200, + label: { + visible: true, + space: 8, + style: { + fontSize: 12, + fill: '#6F6F6F', + angle: 0, + fontWeight: 'normal', + direction: 'horizontal', + maxLineWidth: 174 + }, + autoHide: true, + autoHideMethod: 'greedy', + flush: true, + lastVisible: true + }, + hover: true, + background: { + visible: true, + state: { + hover: { + fillOpacity: 0.08, + fill: '#141414' + }, + hover_reverse: { + fillOpacity: 0.08, + fill: '#141414' + } + } + }, + paddingInner: [0.15, 0.1], + paddingOuter: [0.075, 0.1] + }, + { + type: 'linear', + tick: { + visible: false, + style: { + stroke: 'rgba(255, 255, 255, 0)' + } + }, + niceType: 'accurateFirst', + zIndex: 200, + grid: { + visible: true, + style: { + zIndex: 150, + stroke: '#DADCDD', + lineWidth: 1, + lineDash: [4, 2] + } + }, + orient: 'bottom', + visible: true, + domainLine: { + visible: true, + style: { + lineWidth: 1, + stroke: 'rgba(255, 255, 255, 0)' + } + }, + title: { + visible: false, + text: '销售额', + space: 8, + style: { + fontSize: 12, + fill: '#363839', + fontWeight: 'normal' + } + }, + autoIndent: false, + sampling: false, + label: { + visible: true, + space: 4, + flush: true, + padding: 0, + style: { + fontSize: 12, + maxLineWidth: 174, + fill: '#6F6F6F', + angle: 0, + fontWeight: 'normal', + dy: 0, + direction: 'horizontal' + }, + autoHide: true, + autoHideMethod: 'greedy' + }, + background: { + visible: true, + state: { + hover: { + fillOpacity: 0.08, + fill: '#141414' + }, + hover_reverse: { + fillOpacity: 0.08, + fill: '#141414' + } + } + }, + zero: true, + nice: true + } + ], + color: { + field: '20001', + type: 'ordinal', + range: ['#2E62F1', '#4DC36A', '#FF8406', '#FFCC00', '#4F44CF', '#5AC8FA'], + specified: {}, + domain: ['公司-销售额', '小型企业-销售额', '消费者-销售额', '公司-利润', '小型企业-利润', '消费者-利润'] + }, + legends: [ + { + type: 'discrete', + visible: true, + id: 'legend-discrete', + orient: 'bottom', + position: 'middle', + layoutType: 'normal', + maxRow: 1, + title: { + textStyle: { + fontSize: 12, + fill: '#6F6F6F' + } + }, + layoutLevel: 30, + item: { + focus: true, + focusIconStyle: { + size: 14 + }, + maxWidth: 400, + spaceRow: 0, + spaceCol: 0, + padding: { + top: 1, + bottom: 1, + left: 1, + right: 1 + }, + background: { + visible: false, + style: { + fillOpacity: 0.001 + } + }, + label: { + style: { + fontSize: 12, + fill: '#6F6F6F' + } + }, + shape: { + style: { + lineWidth: 0, + symbolType: 'square', + size: 10, + fillOpacity: 1 + } + } + }, + pager: { + type: 'default', + layout: 'horizontal', + padding: 0, + textStyle: {}, + space: 0, + handler: { + preShape: 'triangleLeft', + nextShape: 'triangleRight', + style: {}, + state: { + disable: {} + } + } + }, + alignSelf: 'start', + padding: { + top: 16, + bottom: 0, + left: 0, + right: 0 + } + } + ], + label: { + visible: false, + offset: 3, + overlap: { + hideOnHit: true, + avoidBaseMark: false, + strategy: [ + { + type: 'position', + position: [] + } + ], + clampForce: true + }, + style: { + fontSize: 12, + fontWeight: 'normal', + zIndex: 400, + lineHeight: '100%', + boundsPadding: [1, 0, 0, 0], + fill: '#363839', + stroke: 'rgba(255, 255, 255, 0.8)', + lineWidth: 2, + strokeOpacity: 1 + }, + position: 'outside', + smartInvert: false + }, + tooltip: { + handler: {} + }, + hover: { + enable: true + }, + select: { + enable: true + }, + bar: { + state: { + hover: { + cursor: 'pointer', + fillOpacity: 0.8, + stroke: '#58595B', + lineWidth: 1, + zIndex: 500 + }, + selected: { + cursor: 'pointer', + fillOpacity: 1, + stroke: '#58595B', + lineWidth: 1 + }, + selected_reverse: { + fillOpacity: 0.3, + lineWidth: 0.3 + } + }, + style: { + cornerRadius: 0 + } + }, + region: [ + { + clip: true + } + ], + background: 'rgba(255, 255, 255, 0)', + animation: false, + brush: { + inBrush: { + fillOpacity: 1, + stroke: '#58595B', + lineWidth: 1, + strokeOpacity: 1, + colorAlpha: 1 + }, + outOfBrush: { + colorAlpha: 0.2, + fillOpacity: 0.3, + lineWidth: 0.3 + }, + endTrigger: ['pointerup', 'pointerupoutside'] + }, + crosshair: { + yField: { + visible: true, + line: { + type: 'rect', + style: { + fillOpacity: 0.2, + fill: '#b2bacf' + } + } + }, + gridZIndex: 100 + }, + hash: 'a1fc9f11b63b517f25ee509322421bb5' + }; + + const cs4 = new VChart(spec4, { + dataSet, + dom: document.getElementById('chart'), + mode: isMobile ? 'mobile-browser' : 'desktop-browser' + }); + console.time('renderTime'); + cs4.renderAsync().then(() => { + console.timeEnd('renderTime'); + cs4.on('brushStart', (...e) => console.log('brushStart-4', e)); + cs4.on('brushEnd', (...e) => console.log('brushEnd-4', e)); + cs4.on('brushClear', (...e) => console.log('brushClear-4', e)); + cs4.on('brushActive', (...e) => console.log('brushActive-4', e)); + }); +}; +run(); diff --git a/packages/vchart/src/component/brush/brush.ts b/packages/vchart/src/component/brush/brush.ts index fa08de8541..0071f0e867 100644 --- a/packages/vchart/src/component/brush/brush.ts +++ b/packages/vchart/src/component/brush/brush.ts @@ -5,12 +5,12 @@ import { BaseComponent } from '../base/base-component'; // eslint-disable-next-line no-duplicate-imports import { ComponentTypeEnum } from '../interface/type'; import { Brush as BrushComponent, IOperateType as BrushEvent } from '@visactor/vrender-components'; -import type { IPointLike, Maybe } from '@visactor/vutils'; +import type { IBounds, IPointLike, Maybe } from '@visactor/vutils'; // eslint-disable-next-line no-duplicate-imports -import { array, polygonIntersectPolygon, isValid, last } from '@visactor/vutils'; +import { array, polygonIntersectPolygon, isValid, last, cloneDeep } from '@visactor/vutils'; import type { IModelRenderOption, IModelSpecInfo } from '../../model/interface'; import type { IRegion } from '../../region/interface'; -import type { IGraphic, IGroup, INode, IPolygon, ISymbolGraphicAttribute } from '@visactor/vrender-core'; +import type { IGraphic, IGroup, INode, IPolygon } from '@visactor/vrender-core'; import { transformToGraphic } from '../../util/style'; import type { ISeries } from '../../series/interface'; import type { IMark } from '../../mark/interface'; @@ -53,7 +53,6 @@ export class Brush extends BaseComponent i protected _linkedInBrushElementsMap: { [brushName: string]: { [elementKey: string]: IElement } } = {}; protected _linkedOutOfBrushElementsMap: { [elementKey: string]: IElement } = {}; - private _needInitOutState: boolean = true; private _cacheInteractiveRangeAttrs: BrushInteractiveRangeAttr[] = []; private _needDisablePickable: boolean = false; @@ -73,10 +72,17 @@ export class Brush extends BaseComponent i endValue: number | string; }[] = []; + static getSpecInfo(chartSpec: any): Maybe { + return getSpecInfo(chartSpec, this.specKey, this.type, (s: IBrushSpec) => { + return s.visible !== false; + }); + } + + /*** start: abstract pipe ***/ init() { const inBrushMarkAttr = this._transformBrushedMarkAttr(this._spec.inBrush); const outOfBrushMarkAttr = this._transformBrushedMarkAttr(this._spec.outOfBrush); - // 写入mark state, 便于后续state管理 + // 注册mark state, 便于后续state管理 this._option.getAllSeries().forEach((s: ISeries) => { s.getActiveMarks().forEach((m: IMark) => { if (m) { @@ -100,17 +106,31 @@ export class Brush extends BaseComponent i }); }); } + private _initNeedOperatedItem() { + const seriesUserId = this._spec.seriesId; + const seriesIndex = this._spec.seriesIndex; + this._relativeRegions.forEach(r => { + const allMarks: IMark[] = []; + r.getSeries().forEach((s: ISeries) => { + if ( + (seriesUserId && array(seriesUserId).includes(s.userId.toString())) || + (seriesIndex && array(seriesIndex).includes(s.getSpecIndex())) || + (!seriesIndex && !seriesUserId) + ) { + allMarks.push(...s.getMarksWithoutRoot()); + } + this._itemMap[r.id] = allMarks; + }); + }); - static getSpecInfo(chartSpec: any): Maybe { - return getSpecInfo(chartSpec, this.specKey, this.type, (s: IBrushSpec) => { - return s.visible !== false; + this._linkedSeries.forEach(s => { + this._linkedItemMap[s.id] = s.getMarksWithoutRoot(); }); } created() { super.created(); - // event this.initEvent(); this._bindRegions(); this._bindLinkedSeries(); @@ -119,62 +139,117 @@ export class Brush extends BaseComponent i this._initNeedOperatedItem(); } - protected _extendDataInBrush(elementsMap: { [brushName: string]: { [elementKey: string]: IElement } }) { - const data = []; - for (const brushName in elementsMap) { - for (const elementKey in elementsMap[brushName]) { - data.push({ - ...elementsMap[brushName][elementKey]?.data?.[0] - }); - } + protected _bindRegions() { + if (isValid(this._spec.regionId) && isValid(this._spec.regionIndex)) { + this._relativeRegions = this._option.getAllRegions(); } - return data; + this._relativeRegions = this._option.getRegionsInUserIdOrIndex( + array(this._spec.regionId), + array(this._spec.regionIndex) + ); } - protected _extendDatumOutOfBrush(elementsMap: { [elementKey: string]: IElement }) { - const data = []; - for (const elementKey in elementsMap) { - // 图例筛选后, elementKey未更新, 导致data可能为null - // FIXME: brush透出的map维护逻辑有待优化 - data.push(elementsMap[elementKey].data?.[0]); + protected _bindLinkedSeries() { + if (!isValid(this._spec.brushLinkSeriesId) && !isValid(this._spec.brushLinkSeriesIndex)) { + return; } - return data; + this._linkedSeries = this._option.getSeriesInUserIdOrIndex( + array(this._spec.brushLinkSeriesId), + array(this._spec.brushLinkSeriesIndex) + ); } - protected _getBrushInteractiveAttr(region: IRegion) { - const regionLayoutPosition = region.getLayoutStartPoint(); - const regionLayoutRect = region.getLayoutRect(); - const seriesRegionStartX = regionLayoutPosition.x; - const seriesRegionEndX = seriesRegionStartX + regionLayoutRect.width; - const seriesRegionStartY = regionLayoutPosition.y; - const seriesRegionEndY = seriesRegionStartY + regionLayoutRect.height; - return { - interactiveRange: { - minY: seriesRegionStartY, - maxY: seriesRegionEndY, - minX: seriesRegionStartX, - maxX: seriesRegionEndX - }, - xRange: [seriesRegionStartX, seriesRegionEndX], - yRange: [seriesRegionStartY, seriesRegionEndY] - } as BrushInteractiveRangeAttr; + private _initRegionAxisMap() { + // 如果配置了axis，则按配置 + // 如果没有配置axis，则默认所有axis + if (isValid(this._spec.axisId)) { + array(this._spec.axisId).forEach((axisId: string) => { + this._releatedAxes.push(this._option.getComponentByUserId(axisId) as AxisComponent); + }); + } else if (isValid(this._spec.axisIndex)) { + array(this._spec.axisIndex).forEach((axisIndex: number) => { + this._releatedAxes.push(this._option.getComponentByIndex('axes', axisIndex) as AxisComponent); + }); + } else { + this._releatedAxes = this._option.getComponentsByKey('axes') as AxisComponent[]; + } + + // 按照region进行分组，便于brush找到关联axis (brush -> region -> axis) + this._releatedAxes.forEach((axis: AxisComponent) => { + axis?.getRegions().forEach((region: IRegion) => { + if (this._regionAxisMap['region_' + region.id]) { + this._regionAxisMap['region_' + region.id].push(axis); + } else { + this._regionAxisMap['region_' + region.id] = [axis]; + } + }); + }); + } + + private _initAxisDataZoomMap() { + (this._option.getComponentsByKey('dataZoom') as DataZoom[]).forEach((dz: DataZoom) => { + if (dz.relatedAxisComponent) { + this._axisDataZoomMap[(dz.relatedAxisComponent as AxisComponent).id] = dz; + } + }); + } + + protected initEvent() { + // do nothing + } + onRender(ctx: IModelRenderOption): void { + // do nothing + } + changeRegions(regions: IRegion[]): void { + // do nothing + } + + _compareSpec(spec: T, prevSpec: T) { + if (this._brushComponents) { + // FIXME: 这个逻辑放在这个方法里不太妥当？ + this._relativeRegions.forEach((region: IRegion, index: number) => { + this._updateBrushComponent(region, index); + }); + } + const result = super._compareSpec(spec, prevSpec); + if (!isEqual(prevSpec, spec)) { + result.reRender = true; + result.reMake = true; + } + return result; } + onLayoutEnd(ctx: any): void { + super.onLayoutEnd(ctx); + if (this._option.disableTriggerEvent) { + return; + } + const brushVisible = this._spec.visible ?? true; + if (brushVisible) { + if (!this._brushComponents) { + this._brushComponents = []; + this._relativeRegions.forEach((region: IRegion, index: number) => { + this._createBrushComponent(region, index); + }); + } else { + this._relativeRegions.forEach((region: IRegion, index: number) => { + this._updateBrushComponent(region, index); + }); + } + } + } + /*** end: abstract pipe ***/ + + /*** start: brush component ***/ protected _updateBrushComponent(region: IRegion, componentIndex: number) { const interactiveAttr = this._getBrushInteractiveAttr(region); // 布局变化后, 更新可交互范围 const brushComponent = this._brushComponents[componentIndex]; brushComponent.setAttributes(interactiveAttr as any); - // 布局变化后, 更新brush 和 图元状态 - // 方案一: - // TODO: 更新mask位置（保持选框在画布中的相对位置） - // TODO: 是否更新mask大小有待商榷（保持选框位置和图元高亮区域一致） - - // 方案二: 清空brushMask 和 图元高亮状态 + // 布局变化后，清空brushMask 和 重置图元高亮状态 this._initMarkBrushState(componentIndex, ''); brushComponent.children[0].removeAllChild(); - this._needInitOutState = true; } protected _createBrushComponent(region: IRegion, componentIndex: number) { @@ -188,11 +263,15 @@ export class Brush extends BaseComponent i }); brush.id = this._spec.id ?? `brush-${this.id}`; this.getContainer().add(brush as unknown as INode); - const { brushMode = 'single' } = this._spec; this._brushComponents.push(brush); this._cacheInteractiveRangeAttrs.push(interactiveAttr); - brush.addEventListener(BrushEvent.drawStart, (e: any) => { + brush.addEventListener(BrushEvent.brushActive, (e: any) => { + this._initMarkBrushState(componentIndex, OUT_BRUSH_STATE); + this._emitEvent(ChartEvent.brushActive, region); + }); + + brush.addEventListener(BrushEvent.brushStart, (e: any) => { this._emitEvent(ChartEvent.brushStart, region); }); @@ -201,38 +280,25 @@ export class Brush extends BaseComponent i }); brush.addEventListener(BrushEvent.drawing, (e: any) => { - // 需要重置out状态的情况： - // _needInitOutState：框选模式为'single' 且 开始后的第一次drawing时（这里不选择drawStart而选择第一次触发drawing的时机是因为点击空白处也会触发drawStart）, 需要重置图元状态 - if (this._needInitOutState && brushMode === 'single') { - this._initMarkBrushState(componentIndex, OUT_BRUSH_STATE); - } - this._needInitOutState = false; this._needDisablePickable = true; - - this._handleBrushChange(ChartEvent.brushChange, region, e); + this._handleBrushChange(region, e); this._emitEvent(ChartEvent.brushChange, region); }); brush.addEventListener(BrushEvent.moving, (e: any) => { - this._handleBrushChange(ChartEvent.brushChange, region, e); + this._handleBrushChange(region, e); this._emitEvent(ChartEvent.brushChange, region); }); brush.addEventListener(BrushEvent.brushClear, (e: any) => { this._initMarkBrushState(componentIndex, ''); - this._needInitOutState = true; this._needDisablePickable = false; - this._handleBrushChange(ChartEvent.brushChange, region, e); - this._handleBrushChange(ChartEvent.brushClear, region, e); - this._emitEvent(ChartEvent.brushChange, region); this._emitEvent(ChartEvent.brushClear, region); }); brush.addEventListener(BrushEvent.drawEnd, (e: any) => { - this._needInitOutState = true; this._needDisablePickable = false; const { operateMask } = e.detail as any; - this._handleBrushChange(ChartEvent.brushEnd, region, e); const inBrushData = this._extendDataInBrush(this._inBrushElementsMap); if (!this._spec.zoomWhenEmpty && inBrushData.length > 0) { this._setAxisAndDataZoom(operateMask, region); @@ -242,7 +308,6 @@ export class Brush extends BaseComponent i brush.addEventListener(BrushEvent.moveEnd, (e: any) => { const { operateMask } = e.detail as any; - this._handleBrushChange(ChartEvent.brushEnd, region, e); const inBrushData = this._extendDataInBrush(this._inBrushElementsMap); if (!this._spec.zoomWhenEmpty && inBrushData.length > 0) { this._setAxisAndDataZoom(operateMask, region); @@ -251,12 +316,75 @@ export class Brush extends BaseComponent i }); } - private _handleBrushChange(eventType: string, region: IRegion, e: any) { + protected _getBrushInteractiveAttr(region: IRegion) { + const regionLayoutPosition = region.getLayoutStartPoint(); + const regionLayoutRect = region.getLayoutRect(); + const seriesRegionStartX = regionLayoutPosition.x; + const seriesRegionEndX = seriesRegionStartX + regionLayoutRect.width; + const seriesRegionStartY = regionLayoutPosition.y; + const seriesRegionEndY = seriesRegionStartY + regionLayoutRect.height; + return { + interactiveRange: { + minY: seriesRegionStartY, + maxY: seriesRegionEndY, + minX: seriesRegionStartX, + maxX: seriesRegionEndX + }, + xRange: [seriesRegionStartX, seriesRegionEndX], + yRange: [seriesRegionStartY, seriesRegionEndY] + } as BrushInteractiveRangeAttr; + } + + private _transformBrushedMarkAttr(brushedStyle: selectedItemStyle) { + const styleResult: any = {}; + if (brushedStyle?.symbol) { + styleResult.symbolType = brushedStyle.symbol; + } + if (brushedStyle?.symbolSize) { + styleResult.size = brushedStyle.symbolSize; + } + if (brushedStyle?.color) { + styleResult.fill = brushedStyle.color; + } + if (brushedStyle?.colorAlpha) { + styleResult.fillOpacity = brushedStyle.colorAlpha; + } + return { + ...transformToGraphic(brushedStyle), + ...styleResult + }; + } + /*** end: brush component ***/ + + /*** start: event dispatch ***/ + private _handleBrushChange(region: IRegion, e: any) { const { operateMask } = e.detail as any; this._reconfigItem(operateMask, region); this._reconfigLinkedItem(operateMask, region); } + protected _extendDataInBrush(elementsMap: { [brushName: string]: { [elementKey: string]: IElement } }) { + const data = []; + for (const brushName in elementsMap) { + for (const elementKey in elementsMap[brushName]) { + data.push({ + ...elementsMap[brushName][elementKey]?.data?.[0] + }); + } + } + return data; + } + + protected _extendDatumOutOfBrush(elementsMap: { [elementKey: string]: IElement }) { + const data = []; + for (const elementKey in elementsMap) { + // 图例筛选后, elementKey未更新, 导致data可能为null + // FIXME: brush透出的map维护逻辑有待优化 + data.push(elementsMap[elementKey].data?.[0]); + } + return data; + } + private _emitEvent(eventType: string, region: IRegion) { this.event.emit(eventType, { model: this, @@ -283,40 +411,44 @@ export class Brush extends BaseComponent i linkedOutOfBrushElementsMap: this._linkedOutOfBrushElementsMap, // 缩放记录 zoomRecord: this._zoomRecord - } + }, + vchart: this._option?.globalInstance }); } + /*** end: event dispatch ***/ - private _transformBrushedMarkAttr(brushedStyle: selectedItemStyle) { - const styleResult: any = {}; - if (brushedStyle?.symbol) { - styleResult.symbolType = brushedStyle.symbol; - } - if (brushedStyle?.symbolSize) { - styleResult.size = brushedStyle.symbolSize; - } - if (brushedStyle?.color) { - styleResult.fill = brushedStyle.color; - } - if (brushedStyle?.colorAlpha) { - styleResult.fillOpacity = brushedStyle.colorAlpha; + /** start: set mark state ***/ + private _reconfigItem(operateMask: IPolygon, region: IRegion) { + if (!operateMask?.globalTransMatrix || !operateMask?.attribute?.points) { + return; } - return { - ...transformToGraphic(brushedStyle), - ...styleResult - }; - } - private _reconfigItem(operateMask: IPolygon, region: IRegion) { + // 根据变换矩阵得到brushMask的实际坐标 + const points = operateMask?.attribute?.points ?? []; + const { a, b, c, d, e, f } = operateMask.globalTransMatrix; + const pointsCoord = points.map((p: IPointLike) => { + return { + x: a * p.x + c * p.y + e, + y: b * p.x + d * p.y + f + }; + }); + const { markTypeFilter = [] } = this._spec; + // 遍历图元, 更新状态 this._itemMap[region.id].forEach((mark: IMark) => { + if (markTypeFilter.includes(mark.type)) { + return; + } const grammarMark = mark.getProduct(); + if (!grammarMark || !grammarMark.elements || !grammarMark.elements.length) { return; } + const elements = grammarMark.elements; elements.forEach((el: IElement) => { const graphicItem = el.getGraphicItem(); + const elementKey = mark.id + '_' + el.key; // 判断逻辑: // 应该被置为inBrush状态的图元: @@ -326,17 +458,15 @@ export class Brush extends BaseComponent i // 应该被置为outOfBrush状态的图元: // before: 在当前brush 的 in brush element map中, 即在当前brush中 // now: 不在当前brush中 - if (this._outOfBrushElementsMap?.[elementKey] && this._isBrushContainItem(operateMask, graphicItem)) { + const isBrushContainItem = this._isBrushContainItem(operateMask.globalAABBBounds, pointsCoord, graphicItem); + if (this._outOfBrushElementsMap?.[elementKey] && isBrushContainItem) { el.addState(IN_BRUSH_STATE); if (!this._inBrushElementsMap[operateMask?.name]) { this._inBrushElementsMap[operateMask?.name] = {}; } this._inBrushElementsMap[operateMask?.name][elementKey] = el; delete this._outOfBrushElementsMap[elementKey]; - } else if ( - this._inBrushElementsMap?.[operateMask?.name]?.[elementKey] && - !this._isBrushContainItem(operateMask, graphicItem) - ) { + } else if (this._inBrushElementsMap?.[operateMask?.name]?.[elementKey] && !isBrushContainItem) { el.removeState(IN_BRUSH_STATE); el.addState(OUT_BRUSH_STATE); this._outOfBrushElementsMap[elementKey] = el; @@ -348,6 +478,10 @@ export class Brush extends BaseComponent i } private _reconfigLinkedItem(operateMask: IPolygon, region: IRegion) { + if (!operateMask?.globalTransMatrix || !operateMask?.attribute?.points) { + return; + } + const regionLayoutPos = region.getLayoutStartPoint(); const seriesId = region.getSeries().map(s => s.id); this._linkedSeries.forEach((s: ISeries) => { @@ -357,7 +491,34 @@ export class Brush extends BaseComponent i const regionOffsetX = sRegionLayoutPos.x - regionLayoutPos.x; const regionOffsetY = sRegionLayoutPos.y - regionLayoutPos.y; + // 根据变换矩阵得到brushMask的实际坐标 + const points = operateMask?.attribute?.points ?? []; + const { a, b, c, d, e, f } = operateMask.globalTransMatrix; + + const dx = regionOffsetX || 0; + const dy = regionOffsetY || 0; + + const pointsCoord = points.map((p: IPointLike) => { + return { + x: a * p.x + c * p.y + e + dx, + y: b * p.x + d * p.y + f + dy + }; + }); + + operateMask.globalAABBBounds + .clone() + .set( + operateMask.globalAABBBounds.x1 + dx, + operateMask.globalAABBBounds.y1 + dy, + operateMask.globalAABBBounds.x2 + dx, + operateMask.globalAABBBounds.y2 + dy + ); + + const { markTypeFilter = [] } = this._spec; this._linkedItemMap[s.id].forEach((mark: IMark) => { + if (markTypeFilter.includes(mark.type)) { + return; + } const grammarMark = mark.getProduct(); if (!grammarMark || !grammarMark.elements || !grammarMark.elements.length) { return; @@ -376,7 +537,7 @@ export class Brush extends BaseComponent i // now: 不在当前brush中 if ( this._linkedOutOfBrushElementsMap?.[elementKey] && - this._isBrushContainItem(operateMask, graphicItem, { dx: regionOffsetX, dy: regionOffsetY }) + this._isBrushContainItem(operateMask.globalAABBBounds, pointsCoord, graphicItem) ) { el.addState(IN_BRUSH_STATE); if (!this._linkedInBrushElementsMap[operateMask?.name]) { @@ -386,7 +547,7 @@ export class Brush extends BaseComponent i delete this._linkedOutOfBrushElementsMap[elementKey]; } else if ( this._linkedInBrushElementsMap?.[operateMask?.name]?.[elementKey] && - !this._isBrushContainItem(operateMask, graphicItem, { dx: regionOffsetX, dy: regionOffsetY }) + !this._isBrushContainItem(operateMask.globalAABBBounds, pointsCoord, graphicItem) ) { el.removeState(IN_BRUSH_STATE); el.addState(OUT_BRUSH_STATE); @@ -399,89 +560,89 @@ export class Brush extends BaseComponent i }); } - private _isBrushContainItem(brushMask: IPolygon, item: IGraphic, linkedOffset?: { dx: number; dy: number }) { - if (!brushMask?.globalTransMatrix || !brushMask?.attribute?.points) { - return false; - } - - // 根据变换矩阵得到brushMask的实际坐标 - const points = brushMask?.attribute?.points ?? []; - const { a, b, c, d, e, f } = brushMask.globalTransMatrix; - - const dx = linkedOffset?.dx || 0; - const dy = linkedOffset?.dy || 0; - - const pointsCoord = points.map((p: IPointLike) => { - return { - x: a * p.x + c * p.y + e + dx, - y: b * p.x + d * p.y + f + dy - }; - }); - - brushMask.globalAABBBounds - .clone() - .set( - brushMask.globalAABBBounds.x1 + dx, - brushMask.globalAABBBounds.y1 + dy, - brushMask.globalAABBBounds.x2 + dx, - brushMask.globalAABBBounds.y2 + dy - ); - - // 根据变换矩阵得到item的实际坐标 - const x = item.globalTransMatrix.e; - const y = item.globalTransMatrix.f; - + private _isBrushContainItem(brushMaskAABBBounds: IBounds, brushMaskPointsCoord: IPointLike[], item: IGraphic) { // brush与图表图元进行相交 或 包含判断 let itemBounds: { x: number; y: number }[] = []; - if (item.type === 'symbol') { - const { size: itemSize = 0 } = item?.attribute as ISymbolGraphicAttribute; - const size = array(itemSize)[0] / 2; + if (['symbol', 'rect'].includes(item.type)) { + const { x1, x2, y1, y2 } = item?.globalAABBBounds; itemBounds = [ { - x: x - size, - y: y - size + x: x1, + y: y1 }, { - x: x + size, - y: y - size + x: x2, + y: y1 }, { - x: x + size, - y: y + size + x: x2, + y: y2 }, { - x: x - size, - y: y + size + x: x1, + y: y2 } ]; - return polygonIntersectPolygon(pointsCoord, itemBounds); - } else if (item.type === 'rect') { - const { x1, x2, y1, y2 } = item?.AABBBounds; - const width = Math.abs(x1 - x2); - const height = Math.abs(y1 - y2); - itemBounds = [ - { - x: x, - y: y - }, - { - x: x + width, - y: y - }, - { - x: x + width, - y: y + height - }, - { - x: x, - y: y + height - } - ]; - return polygonIntersectPolygon(pointsCoord, itemBounds); + return polygonIntersectPolygon(brushMaskPointsCoord, itemBounds); } - return brushMask.globalAABBBounds.intersects(item.globalAABBBounds); + return brushMaskAABBBounds.intersects(item.globalAABBBounds); } + protected _initMarkBrushState(componentIndex: number, stateName: string) { + this._brushComponents.forEach((brush, index) => { + if (index !== componentIndex) { + brush.children[0].removeAllChild(); + } + }); + + this._inBrushElementsMap = {}; + this._outOfBrushElementsMap = {}; + this._linkedInBrushElementsMap = {}; + this._linkedOutOfBrushElementsMap = {}; + const { markTypeFilter = [] } = this._spec; + + Object.entries(this._itemMap).forEach(([regionId, marks]) => { + marks.forEach((mark: IMark) => { + if (markTypeFilter.includes(mark.type)) { + return; + } + const grammarMark = mark.getProduct(); + if (!grammarMark || !grammarMark.elements || !grammarMark.elements.length) { + return; + } + const elements = grammarMark.elements; + elements.forEach((el: IElement) => { + const elementKey = mark.id + '_' + el.key; + el.removeState(IN_BRUSH_STATE); + el.removeState(OUT_BRUSH_STATE); + el.addState(stateName); + this._outOfBrushElementsMap[elementKey] = el; + }); + }); + }); + Object.entries(this._linkedItemMap).forEach(([seriesId, marks]) => { + marks.forEach((mark: IMark) => { + if (markTypeFilter.includes(mark.type)) { + return; + } + const grammarMark = mark.getProduct(); + if (!grammarMark || !grammarMark.elements || !grammarMark.elements.length) { + return; + } + const elements = grammarMark.elements; + elements.forEach((el: IElement) => { + const elementKey = mark.id + '_' + el.key; + el.removeState(IN_BRUSH_STATE); + el.removeState(OUT_BRUSH_STATE); + el.addState(stateName); + this._linkedOutOfBrushElementsMap[elementKey] = el; + }); + }); + }); + } + /** end: set mark state ***/ + + /** start: control data zoom ***/ private _stateClamp(state: number) { return Math.min(Math.max(0, state), 1); } @@ -559,167 +720,12 @@ export class Brush extends BaseComponent i } } - protected _bindRegions() { - if (isValid(this._spec.regionId) && isValid(this._spec.regionIndex)) { - this._relativeRegions = this._option.getAllRegions(); - } - this._relativeRegions = this._option.getRegionsInUserIdOrIndex( - array(this._spec.regionId), - array(this._spec.regionIndex) - ); - } - - protected _bindLinkedSeries() { - if (isValid(this._spec.brushLinkSeriesId) && isValid(this._spec.brushLinkSeriesIndex)) { - return; - } - this._linkedSeries = this._option.getSeriesInUserIdOrIndex( - array(this._spec.brushLinkSeriesId), - array(this._spec.brushLinkSeriesIndex) - ); - } - - private _initRegionAxisMap() { - // 如果配置了axis，则按配置 - // 如果没有配置axis，则默认所有axis - if (isValid(this._spec.axisId)) { - array(this._spec.axisId).forEach((axisId: string) => { - this._releatedAxes.push(this._option.getComponentByUserId(axisId) as AxisComponent); - }); - } else if (isValid(this._spec.axisIndex)) { - array(this._spec.axisIndex).forEach((axisIndex: number) => { - this._releatedAxes.push(this._option.getComponentByIndex('axes', axisIndex) as AxisComponent); - }); - } else { - this._releatedAxes = this._option.getComponentsByKey('axes') as AxisComponent[]; - } - - // 按照region进行分组，便于brush找到关联axis (brush -> region -> axis) - this._releatedAxes.forEach((axis: AxisComponent) => { - axis?.getRegions().forEach((region: IRegion) => { - if (this._regionAxisMap['region_' + region.id]) { - this._regionAxisMap['region_' + region.id].push(axis); - } else { - this._regionAxisMap['region_' + region.id] = [axis]; - } - }); - }); - } - - private _initAxisDataZoomMap() { - (this._option.getComponentsByKey('dataZoom') as DataZoom[]).forEach((dz: DataZoom) => { - if (dz.relatedAxisComponent) { - this._axisDataZoomMap[(dz.relatedAxisComponent as AxisComponent).id] = dz; - } - }); - } - - private _initNeedOperatedItem() { - const seriesUserId = this._spec.seriesId; - const seriesIndex = this._spec.seriesIndex; - this._relativeRegions.forEach(r => { - const allMarks: IMark[] = []; - r.getSeries().forEach((s: ISeries) => { - if ( - (seriesUserId && array(seriesUserId).includes(s.userId.toString())) || - (seriesIndex && array(seriesIndex).includes(s.getSpecIndex())) || - (!seriesIndex && !seriesUserId) - ) { - allMarks.push(...s.getMarksWithoutRoot()); - } - this._itemMap[r.id] = allMarks; - }); - }); - - this._linkedSeries.forEach(s => { - this._linkedItemMap[s.id] = s.getMarksWithoutRoot(); - }); - } - - protected _initMarkBrushState(componentIndex: number, stateName: string) { - this._brushComponents.forEach((brush, index) => { - if (index !== componentIndex) { - brush.children[0].removeAllChild(); - } - }); - - this._inBrushElementsMap = {}; - this._outOfBrushElementsMap = {}; - this._linkedInBrushElementsMap = {}; - this._linkedOutOfBrushElementsMap = {}; - - this._option.getAllSeries().forEach((s: ISeries) => { - s.getMarksWithoutRoot().forEach((mark: IMark) => { - const grammarMark = mark.getProduct(); - if (!grammarMark || !grammarMark.elements || !grammarMark.elements.length) { - return; - } - const elements = grammarMark.elements; - elements.forEach((el: IElement) => { - const elementKey = mark.id + '_' + el.key; - el.removeState(IN_BRUSH_STATE); - el.removeState(OUT_BRUSH_STATE); - el.addState(stateName); - this._outOfBrushElementsMap[elementKey] = el; - this._linkedOutOfBrushElementsMap[elementKey] = el; - }); - }); - }); - } - - protected initEvent() { - // do nothing - } - onRender(ctx: IModelRenderOption): void { - // do nothing - } - changeRegions(regions: IRegion[]): void { - // do nothing - } + /** end: control data zoom ***/ protected _getNeedClearVRenderComponents(): IGraphic[] { return this._brushComponents as unknown as IGroup[]; } - /** - * updateSpec - */ - _compareSpec(spec: T, prevSpec: T) { - if (this._brushComponents) { - // FIXME: 这个逻辑放在这个方法里不太妥当？ - this._relativeRegions.forEach((region: IRegion, index: number) => { - this._updateBrushComponent(region, index); - }); - } - const result = super._compareSpec(spec, prevSpec); - if (!isEqual(prevSpec, spec)) { - result.reRender = true; - result.reMake = true; - } - return result; - } - - onLayoutEnd(ctx: any): void { - super.onLayoutEnd(ctx); - if (this._option.disableTriggerEvent) { - return; - } - const brushVisible = this._spec.visible ?? true; - if (brushVisible) { - // 创建或更新marker组件 - if (!this._brushComponents) { - this._brushComponents = []; - this._relativeRegions.forEach((region: IRegion, index: number) => { - this._createBrushComponent(region, index); - }); - } else { - this._relativeRegions.forEach((region: IRegion, index: number) => { - this._updateBrushComponent(region, index); - }); - } - } - } - clearGraphic(): void { if (this._brushComponents) { this._brushComponents.forEach(brush => { @@ -731,7 +737,11 @@ export class Brush extends BaseComponent i clear(): void { if (this._brushComponents) { const container = this.getContainer(); - this._brushComponents.forEach(brush => { + this._brushComponents.forEach((brush, index) => { + // 清空元素状态 + this._initMarkBrushState(index, ''); + this._needDisablePickable = false; + brush.removeAllChild(); brush.releaseBrushEvents(); diff --git a/packages/vchart/src/component/brush/interface.ts b/packages/vchart/src/component/brush/interface.ts index c261a364e1..0000522db2 100644 --- a/packages/vchart/src/component/brush/interface.ts +++ b/packages/vchart/src/component/brush/interface.ts @@ -15,11 +15,11 @@ interface IBrushDataBindSpec { */ regionId?: string | string[]; // 默认为所有region /** - * 可刷取的seriesIndex + * 可刷取的seriesIndex（在可刷取的region范围内） */ seriesIndex?: number | number[]; // 默认为所有系列 /** - * 可刷取的seriesId + * 可刷取的seriesId（在可刷取的region范围内） */ seriesId?: string | string[]; // 默认为所有系列 /** @@ -117,6 +117,17 @@ export interface IBrushTheme { * @since 1.2.0 */ sizeThreshold?: number; + /** + * 不需要被brush操作的mark类型 + * @since 1.13.9 + */ + markTypeFilter?: ('symbol' | 'rect' | 'line' | 'area')[]; + /** + * 自定义change事件 + * 返回true, 则清空brush + * @since 1.13.9 + */ + onBrushChange: ({}) => boolean; } export interface IBrushSpec extends IBrushTheme, IBrushDataBindSpec { diff --git a/packages/vchart/src/constant/event.ts b/packages/vchart/src/constant/event.ts index c5d3673507..b8511c417c 100644 --- a/packages/vchart/src/constant/event.ts +++ b/packages/vchart/src/constant/event.ts @@ -96,6 +96,7 @@ export enum ChartEvent { brushStart = 'brushStart', brushChange = 'brushChange', brushEnd = 'brushEnd', + brushActive = 'brushActive', brushClear = 'brushClear', // legend legendSelectedDataChange = 'legendSelectedDataChange', From b04990ef563993372197ab73c71a81c4223a3318 Mon Sep 17 00:00:00 2001 From: skie1997 Date: Mon, 14 Apr 2025 17:45:04 +0800 Subject: [PATCH 17/19] fix: brush type error --- packages/vchart/src/component/brush/interface.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vchart/src/component/brush/interface.ts b/packages/vchart/src/component/brush/interface.ts index 0000522db2..91e08dbbd1 100644 --- a/packages/vchart/src/component/brush/interface.ts +++ b/packages/vchart/src/component/brush/interface.ts @@ -121,7 +121,7 @@ export interface IBrushTheme { * 不需要被brush操作的mark类型 * @since 1.13.9 */ - markTypeFilter?: ('symbol' | 'rect' | 'line' | 'area')[]; + markTypeFilter?: string[]; /** * 自定义change事件 * 返回true, 则清空brush From 71930a6ba856e53eee07b2ce7519b068b170e646 Mon Sep 17 00:00:00 2001 From: skie1997 Date: Mon, 14 Apr 2025 17:48:27 +0800 Subject: [PATCH 18/19] chore: rush change --- .../@visactor/vchart/refactor-brush_2025-04-14-09-40.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/common/changes/@visactor/vchart/refactor-brush_2025-04-14-09-40.json b/common/changes/@visactor/vchart/refactor-brush_2025-04-14-09-40.json index 956e711d1a..63e25d6469 100644 --- a/common/changes/@visactor/vchart/refactor-brush_2025-04-14-09-40.json +++ b/common/changes/@visactor/vchart/refactor-brush_2025-04-14-09-40.json @@ -2,7 +2,7 @@ "changes": [ { "packageName": "@visactor/vchart", - "comment": "refactor: brush interactive. close#3765 & #3262 & #2802", + "comment": "refactor: brush interactive. close#3765 & #3262 & #2802 & #3885", "type": "none" } ], From 6871b41725f883a075433e7cf93855dacf337ce9 Mon Sep 17 00:00:00 2001 From: skie1997 Date: Mon, 14 Apr 2025 19:52:15 +0800 Subject: [PATCH 19/19] feat: support on brush end event. close#3765 --- .../browser/test-page/brush-summary.ts | 4 ++++ packages/vchart/src/component/brush/brush.ts | 21 +++++++++++++++---- .../vchart/src/component/brush/interface.ts | 4 ++-- 3 files changed, 23 insertions(+), 6 deletions(-) diff --git a/packages/vchart/__tests__/runtime/browser/test-page/brush-summary.ts b/packages/vchart/__tests__/runtime/browser/test-page/brush-summary.ts index 95d71c10ec..9f9c1eb216 100644 --- a/packages/vchart/__tests__/runtime/browser/test-page/brush-summary.ts +++ b/packages/vchart/__tests__/runtime/browser/test-page/brush-summary.ts @@ -630,6 +630,10 @@ const run = async () => { invalidType: 'break', animation: false, brush: { + onBrushEnd: () => { + console.log('onBrushEnd'); + return true; + }, // markTypeFilter: ['line'], endTrigger: ['pointerup', 'pointerupoutside'], sizeThreshold: 50, diff --git a/packages/vchart/src/component/brush/brush.ts b/packages/vchart/src/component/brush/brush.ts index 0071f0e867..1216ea8ae6 100644 --- a/packages/vchart/src/component/brush/brush.ts +++ b/packages/vchart/src/component/brush/brush.ts @@ -299,11 +299,24 @@ export class Brush extends BaseComponent i brush.addEventListener(BrushEvent.drawEnd, (e: any) => { this._needDisablePickable = false; const { operateMask } = e.detail as any; - const inBrushData = this._extendDataInBrush(this._inBrushElementsMap); - if (!this._spec.zoomWhenEmpty && inBrushData.length > 0) { - this._setAxisAndDataZoom(operateMask, region); + if (this._spec?.onBrushEnd) { + // 如果onBrushEnd返回true，则清空brush， 并抛出clear事件 + if (this._spec.onBrushEnd(e) === true) { + this.clearGraphic(); + this._initMarkBrushState(componentIndex, ''); + this._needDisablePickable = false; + this._emitEvent(ChartEvent.brushClear, region); + } else { + this._spec.onBrushEnd(e); + this._emitEvent(ChartEvent.brushEnd, region); + } + } else { + const inBrushData = this._extendDataInBrush(this._inBrushElementsMap); + if (!this._spec.zoomWhenEmpty && inBrushData.length > 0) { + this._setAxisAndDataZoom(operateMask, region); + } + this._emitEvent(ChartEvent.brushEnd, region); } - this._emitEvent(ChartEvent.brushEnd, region); }); brush.addEventListener(BrushEvent.moveEnd, (e: any) => { diff --git a/packages/vchart/src/component/brush/interface.ts b/packages/vchart/src/component/brush/interface.ts index 91e08dbbd1..b20255f73f 100644 --- a/packages/vchart/src/component/brush/interface.ts +++ b/packages/vchart/src/component/brush/interface.ts @@ -123,11 +123,11 @@ export interface IBrushTheme { */ markTypeFilter?: string[]; /** - * 自定义change事件 + * 自定义brush事件, 触发时机: 框选结束 * 返回true, 则清空brush * @since 1.13.9 */ - onBrushChange: ({}) => boolean; + onBrushEnd: (e: any) => boolean; } export interface IBrushSpec extends IBrushTheme, IBrushDataBindSpec {