From 1312ca5ca24478dc7008eb87d1258496e272f9da Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Sun, 8 Oct 2023 20:46:14 +0800 Subject: [PATCH 01/48] feat: add checkbox --- common/config/rush/pnpm-lock.yaml | 406 ++++++++++++++++-- docs/package.json | 2 +- packages/vtable/examples/menu.ts | 4 + packages/vtable/examples/type/checkbox.ts | 79 ++++ packages/vtable/package.json | 6 +- .../vtable/src/scenegraph/context/canvas.ts | 3 +- .../vtable/src/scenegraph/context/context.ts | 3 +- .../vtable/src/scenegraph/context/module.ts | 3 +- .../graphic/contributions/chart-render.ts | 3 +- .../group-contribution-render.ts | 3 +- .../image-contribution-render.ts | 3 +- .../scenegraph/graphic/contributions/index.ts | 4 +- .../contributions/rect-contribution-render.ts | 3 +- .../scenegraph/group-creater/cell-helper.ts | 18 + .../group-creater/cell-type/checkbox-cell.ts | 137 ++++++ 15 files changed, 633 insertions(+), 44 deletions(-) create mode 100644 packages/vtable/examples/type/checkbox.ts create mode 100644 packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index c3cbb88df..5a1dffcc5 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -14,7 +14,7 @@ importers: '@types/markdown-it': ^13.0.0 '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 - '@visactor/vchart': 1.4.1-alpha.1 + '@visactor/vchart': 1.4.1 '@visactor/vtable': workspace:* '@vitejs/plugin-react': 3.1.0 axios: ^1.4.0 @@ -35,7 +35,7 @@ importers: yargs: ^17.1.1 dependencies: '@arco-design/web-react': 2.46.1_vnxzf5c44dqo4vncfl2mrh2gwm - '@visactor/vchart': 1.4.1-alpha.1 + '@visactor/vchart': 1.4.1 '@visactor/vtable': link:../packages/vtable axios: 1.5.0 highlight.js: 11.8.0 @@ -77,10 +77,10 @@ importers: '@types/offscreencanvas': 2019.6.4 '@types/react': ^18.0.0 '@types/react-dom': ^18.0.0 - '@visactor/vchart': 1.4.1-alpha.1 + '@visactor/vchart': 1.4.1 '@visactor/vdataset': ~0.15.7 - '@visactor/vrender': 0.15.4 - '@visactor/vrender-components': 0.15.4 + '@visactor/vrender': 0.17.0-alpha.8 + '@visactor/vrender-components': 0.17.0-alpha.8 '@visactor/vscale': ~0.15.7 '@visactor/vutils': ~0.15.7 '@vitejs/plugin-react': 3.1.0 @@ -120,8 +120,8 @@ importers: vite-plugin-markdown: ^2.1.0 dependencies: '@visactor/vdataset': 0.15.11 - '@visactor/vrender': 0.15.4 - '@visactor/vrender-components': 0.15.4 + '@visactor/vrender': 0.17.0-alpha.8 + '@visactor/vrender-components': 0.17.0-alpha.8 '@visactor/vscale': 0.15.11 '@visactor/vutils': 0.15.11 core-js: 3.31.1 @@ -140,7 +140,7 @@ importers: '@types/offscreencanvas': 2019.6.4 '@types/react': 18.2.21 '@types/react-dom': 18.2.7 - '@visactor/vchart': 1.4.1-alpha.1 + '@visactor/vchart': 1.4.1 '@vitejs/plugin-react': 3.1.0_vite@3.2.6 axios: 1.5.0 chai: 4.3.4 @@ -2049,6 +2049,24 @@ packages: '@jridgewell/resolve-uri': 3.1.1 '@jridgewell/sourcemap-codec': 1.4.15 + /@mapbox/node-pre-gyp/1.0.11: + resolution: {integrity: sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==} + hasBin: true + dependencies: + detect-libc: 2.0.2 + https-proxy-agent: 5.0.1 + make-dir: 3.1.0 + node-fetch: 2.6.7 + nopt: 5.0.0 + npmlog: 5.0.1 + rimraf: 3.0.2 + semver: 7.5.4 + tar: 6.2.0 + transitivePeerDependencies: + - encoding + - supports-color + dev: false + /@nodelib/fs.scandir/2.1.5: resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} engines: {node: '>= 8'} @@ -2072,6 +2090,132 @@ packages: engines: {node: '>=14'} dev: false + /@resvg/resvg-js-android-arm-eabi/2.4.1: + resolution: {integrity: sha512-AA6f7hS0FAPpvQMhBCf6f1oD1LdlqNXKCxAAPpKh6tR11kqV0YIB9zOlIYgITM14mq2YooLFl6XIbbvmY+jwUw==} + engines: {node: '>= 10'} + cpu: [arm] + os: [android] + requiresBuild: true + dev: false + optional: true + + /@resvg/resvg-js-android-arm64/2.4.1: + resolution: {integrity: sha512-/QleoRdPfsEuH9jUjilYcDtKK/BkmWcK+1LXM8L2nsnf/CI8EnFyv7ZzCj4xAIvZGAy9dTYr/5NZBcTwxG2HQg==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [android] + requiresBuild: true + dev: false + optional: true + + /@resvg/resvg-js-darwin-arm64/2.4.1: + resolution: {integrity: sha512-U1oMNhea+kAXgiEXgzo7EbFGCD1Edq5aSlQoe6LMly6UjHzgx2W3N5kEXCwU/CgN5FiQhZr7PlSJSlcr7mdhfg==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [darwin] + requiresBuild: true + dev: false + optional: true + + /@resvg/resvg-js-darwin-x64/2.4.1: + resolution: {integrity: sha512-avyVh6DpebBfHHtTQTZYSr6NG1Ur6TEilk1+H0n7V+g4F7x7WPOo8zL00ZhQCeRQ5H4f8WXNWIEKL8fwqcOkYw==} + engines: {node: '>= 10'} + cpu: [x64] + os: [darwin] + requiresBuild: true + dev: false + optional: true + + /@resvg/resvg-js-linux-arm-gnueabihf/2.4.1: + resolution: {integrity: sha512-isY/mdKoBWH4VB5v621co+8l101jxxYjuTkwOLsbW+5RK9EbLciPlCB02M99ThAHzI2MYxIUjXNmNgOW8btXvw==} + engines: {node: '>= 10'} + cpu: [arm] + os: [linux] + requiresBuild: true + dev: false + optional: true + + /@resvg/resvg-js-linux-arm64-gnu/2.4.1: + resolution: {integrity: sha512-uY5voSCrFI8TH95vIYBm5blpkOtltLxLRODyhKJhGfskOI7XkRw5/t1u0sWAGYD8rRSNX+CA+np86otKjubrNg==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: false + optional: true + + /@resvg/resvg-js-linux-arm64-musl/2.4.1: + resolution: {integrity: sha512-6mT0+JBCsermKMdi/O2mMk3m7SqOjwi9TKAwSngRZ/nQoL3Z0Z5zV+572ztgbWr0GODB422uD8e9R9zzz38dRQ==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: false + optional: true + + /@resvg/resvg-js-linux-x64-gnu/2.4.1: + resolution: {integrity: sha512-60KnrscLj6VGhkYOJEmmzPlqqfcw1keDh6U+vMcNDjPhV3B5vRSkpP/D/a8sfokyeh4VEacPSYkWGezvzS2/mg==} + engines: {node: '>= 10'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: false + optional: true + + /@resvg/resvg-js-linux-x64-musl/2.4.1: + resolution: {integrity: sha512-0AMyZSICC1D7ge115cOZQW8Pcad6PjWuZkBFF3FJuSxC6Dgok0MQnLTs2MfMdKBlAcwO9dXsf3bv9tJZj8pATA==} + engines: {node: '>= 10'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: false + optional: true + + /@resvg/resvg-js-win32-arm64-msvc/2.4.1: + resolution: {integrity: sha512-76XDFOFSa3d0QotmcNyChh2xHwk+JTFiEQBVxMlHpHMeq7hNrQJ1IpE1zcHSQvrckvkdfLboKRrlGB86B10Qjw==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [win32] + requiresBuild: true + dev: false + optional: true + + /@resvg/resvg-js-win32-ia32-msvc/2.4.1: + resolution: {integrity: sha512-odyVFGrEWZIzzJ89KdaFtiYWaIJh9hJRW/frcEcG3agJ464VXkN/2oEVF5ulD+5mpGlug9qJg7htzHcKxDN8sg==} + engines: {node: '>= 10'} + cpu: [ia32] + os: [win32] + requiresBuild: true + dev: false + optional: true + + /@resvg/resvg-js-win32-x64-msvc/2.4.1: + resolution: {integrity: sha512-vY4kTLH2S3bP+puU5x7hlAxHv+ulFgcK6Zn3efKSr0M0KnZ9A3qeAjZteIpkowEFfUeMPNg2dvvoFRJA9zqxSw==} + engines: {node: '>= 10'} + cpu: [x64] + os: [win32] + requiresBuild: true + dev: false + optional: true + + /@resvg/resvg-js/2.4.1: + resolution: {integrity: sha512-wTOf1zerZX8qYcMmLZw3czR4paI4hXqPjShNwJRh5DeHxvgffUS5KM7XwxtbIheUW6LVYT5fhT2AJiP6mU7U4A==} + engines: {node: '>= 10'} + optionalDependencies: + '@resvg/resvg-js-android-arm-eabi': 2.4.1 + '@resvg/resvg-js-android-arm64': 2.4.1 + '@resvg/resvg-js-darwin-arm64': 2.4.1 + '@resvg/resvg-js-darwin-x64': 2.4.1 + '@resvg/resvg-js-linux-arm-gnueabihf': 2.4.1 + '@resvg/resvg-js-linux-arm64-gnu': 2.4.1 + '@resvg/resvg-js-linux-arm64-musl': 2.4.1 + '@resvg/resvg-js-linux-x64-gnu': 2.4.1 + '@resvg/resvg-js-linux-x64-musl': 2.4.1 + '@resvg/resvg-js-win32-arm64-msvc': 2.4.1 + '@resvg/resvg-js-win32-ia32-msvc': 2.4.1 + '@resvg/resvg-js-win32-x64-msvc': 2.4.1 + dev: false + /@rollup/plugin-alias/5.0.0_rollup@3.20.5: resolution: {integrity: sha512-l9hY5chSCjuFRPsnRm16twWBiSApl2uYFLsepQYwtBuAxNMQ/1dJqADld40P0Jkqm65GRTLy/AC6hnpVebtLsA==} engines: {node: '>=14.0.0'} @@ -2790,8 +2934,8 @@ packages: resolution: {integrity: sha512-sL/cEvJWAnClXw0wHk85/2L0G6Sj8UB0Ctc1TEMbKSsmpRosqhwj9gWgFRZSrBr2f9tiXISwNhCPmlfqUqyb9Q==} dev: true - /@visactor/vchart/1.4.1-alpha.1: - resolution: {integrity: sha512-krIE6dbipErsCiBTGf77fDJfN3DNSuRgq/BNeyUaT0iuouo2jzh1g0dlKfLU3VVVftmTzYIj5+bAHYbpRXkDwQ==} + /@visactor/vchart/1.4.1: + resolution: {integrity: sha512-ifR7JurcEXI7jkD2FE9mUbS7ZNu2/253jRKl4OZZDOUTwYpRjZKXrq7FADlnOpAbUMbSG5w35zFrRt9ipnFcdg==} dependencies: '@visactor/vdataset': 0.16.1 '@visactor/vgrammar-core': 0.7.6 @@ -2805,7 +2949,7 @@ packages: '@visactor/vrender-components': 0.15.4 '@visactor/vscale': 0.16.1 '@visactor/vutils': 0.16.1 - '@visactor/vutils-extension': 1.4.1-alpha.1 + '@visactor/vutils-extension': 0.0.2 /@visactor/vdataset/0.15.11: resolution: {integrity: sha512-p1VPzlBJlcF4gUGBR9fkU735pd/Zw42XPqcA9R3xHbz+mz+LvdBKapy6dcyu0rvXVgjarHo5TG5HzEvO6dV4ag==} @@ -2921,6 +3065,39 @@ packages: '@visactor/vutils': 0.16.1 inversify: 6.0.1 + /@visactor/vrender-components/0.17.0-alpha.8: + resolution: {integrity: sha512-L1y4+WAfKeuKl0N55+rM21VnPJh9NvhrvLfKKYsJT3CDo82T6N/4oVvtaX0NfGAk75DCMR1Iph9QKRgvJJ5LhQ==} + dependencies: + '@visactor/vrender-core': 0.17.0-alpha.8 + '@visactor/vrender-kits': 0.17.0-alpha.8 + '@visactor/vscale': 0.16.1 + '@visactor/vutils': 0.16.1 + transitivePeerDependencies: + - encoding + - supports-color + dev: false + + /@visactor/vrender-core/0.17.0-alpha.8: + resolution: {integrity: sha512-ZPwSd1H4jKqPJZn/dHKtptY8RPvMzqpg4NaJBkXtZkO0XSzAnLW/WDvb681OmQd27rKvtk/TzDIU/wagUstOaQ==} + dependencies: + '@visactor/vutils': 0.16.1 + color-convert: 2.0.1 + dev: false + + /@visactor/vrender-kits/0.17.0-alpha.8: + resolution: {integrity: sha512-ZC+cwDe76wXqTCnwHdCCJk5Q1W75bQw75PSquv6TRKs8C3g2z3tH6D5krI1KfHCtA7Hq0VmS5fVKRaDqRO+3EA==} + dependencies: + '@resvg/resvg-js': 2.4.1 + '@visactor/vrender-core': 0.17.0-alpha.8 + '@visactor/vutils': 0.16.1 + canvas: 2.11.2 + node-fetch: 2.6.6 + roughjs: 4.5.2 + transitivePeerDependencies: + - encoding + - supports-color + dev: false + /@visactor/vrender/0.15.4: resolution: {integrity: sha512-isJyYyNaameaOWKXJi9aorWIpAgee5+af1GXZ6qo5iVrDODQKokQ3F1ng2Y26x3W+f2FrirWvQ29eDOydVyyUA==} dependencies: @@ -2930,6 +3107,16 @@ packages: fast-xml-parser: 4.2.7 inversify: 6.0.1 + /@visactor/vrender/0.17.0-alpha.8: + resolution: {integrity: sha512-bs5tuEb1KB4wLRNeL1/mDSP43Zv0wYeCwScmcwPCpu7yzZn/g1CyqZ13OTk6iYshFV1xn4Sr+8Tn6I8GzTq4pg==} + dependencies: + '@visactor/vrender-core': 0.17.0-alpha.8 + '@visactor/vrender-kits': 0.17.0-alpha.8 + transitivePeerDependencies: + - encoding + - supports-color + dev: false + /@visactor/vscale/0.15.11: resolution: {integrity: sha512-cHgTxDQq6wz6n/4ZxdaB4hKw3Si7QY3MaQIhBqNUFOY+zK4Vjuslt4LtVrHHMROs3QGJ0TORGL/y2HOdNj16SQ==} dependencies: @@ -2941,8 +3128,8 @@ packages: dependencies: '@visactor/vutils': 0.16.1 - /@visactor/vutils-extension/1.4.1-alpha.1: - resolution: {integrity: sha512-+TL9Q1jaPnGtwWGz4tXPFzGtj9S2UIPENuazezPtShAZY7PIVCswePJ/ZdBJ2c1OhjyLG2qkUOpOa0ABTzH77w==} + /@visactor/vutils-extension/0.0.2: + resolution: {integrity: sha512-LAXOa2tMyosAFNlw4F2+ju1dj5u7zHdLQPcZl4JPvpDUgz8G92EmhkS9Zqw6E0tXzblaWO6t22Mvpx0RsxSA1Q==} dependencies: '@visactor/vrender': 0.15.4 '@visactor/vscale': 0.16.1 @@ -3022,6 +3209,10 @@ packages: resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==} dev: true + /abbrev/1.1.1: + resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==} + dev: false + /abs-svg-path/0.1.1: resolution: {integrity: sha512-d8XPSGjfyzlXC3Xx891DJRyZfqk5JU0BJrDQcsWomFIV1/BIzPW5HDH5iDdWpqWaav0YVIEzT1RHTwWr0FFshA==} @@ -3089,7 +3280,6 @@ packages: debug: 4.3.4 transitivePeerDependencies: - supports-color - dev: true /ajv/6.12.6: resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==} @@ -3201,10 +3391,22 @@ packages: buffer-equal: 1.0.1 dev: false + /aproba/2.0.0: + resolution: {integrity: sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==} + dev: false + /archy/1.0.0: resolution: {integrity: sha512-Xg+9RwCg/0p32teKdGMPTPnVXKD0w3DfHnFTficozsAgsvq2XenPJq/MYpzzQ/v8zrOyJn6Ds39VA4JIDwFfqw==} dev: false + /are-we-there-yet/2.0.0: + resolution: {integrity: sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==} + engines: {node: '>=10'} + dependencies: + delegates: 1.0.0 + readable-stream: 3.6.2 + dev: false + /arg/4.1.3: resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==} @@ -3852,6 +4054,19 @@ packages: /caniuse-lite/1.0.30001528: resolution: {integrity: sha512-0Db4yyjR9QMNlsxh+kKWzQtkyflkG/snYheSzkjmvdEtEXB1+jt7A2HmSEiO6XIJPIbo92lHNGNySvE5pZcs5Q==} + /canvas/2.11.2: + resolution: {integrity: sha512-ItanGBMrmRV7Py2Z+Xhs7cT+FNt5K0vPL4p9EZ/UX/Mu7hFbkxSjKF2KVtPwX7UYWp7dRKnrTvReflgrItJbdw==} + engines: {node: '>=6'} + requiresBuild: true + dependencies: + '@mapbox/node-pre-gyp': 1.0.11 + nan: 2.17.0 + simple-get: 3.1.1 + transitivePeerDependencies: + - encoding + - supports-color + dev: false + /capture-exit/2.0.0: resolution: {integrity: sha512-PiT/hQmTonHhl/HFGN+Lx3JJUznrVYJ3+AQsnthneZbvW7x+f08Tk7yLJTLEOUvBTbduLeeBkxEaYXUOUrRq6g==} engines: {node: 6.* || 8.* || >= 10.*} @@ -3969,6 +4184,11 @@ packages: fsevents: 2.3.3 dev: true + /chownr/2.0.0: + resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==} + engines: {node: '>=10'} + dev: false + /ci-info/2.0.0: resolution: {integrity: sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==} dev: true @@ -4224,6 +4444,10 @@ packages: dev: true optional: true + /console-control-strings/1.1.0: + resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==} + dev: false + /convert-source-map/1.9.0: resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==} @@ -4567,6 +4791,13 @@ packages: mimic-response: 1.0.1 dev: true + /decompress-response/4.2.1: + resolution: {integrity: sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==} + engines: {node: '>=8'} + dependencies: + mimic-response: 2.1.0 + dev: false + /deep-eql/3.0.1: resolution: {integrity: sha512-+QeIQyN5ZuO+3Uk5DYh6/1eKO0m0YmJFGNmFHGACpf1ClL1nmlV/p4gNgbl2pJGxgXb4faqo6UE+M5ACEMyVcw==} engines: {node: '>=0.12'} @@ -4634,11 +4865,20 @@ packages: resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==} engines: {node: '>=0.4.0'} + /delegates/1.0.0: + resolution: {integrity: sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==} + dev: false + /detect-file/1.0.0: resolution: {integrity: sha512-DtCOLG98P007x7wiiOmfI0fi3eIKyWiLTGJ2MDnVi/E04lWGbf+JzrRHMm0rgIIZJGtHpKpbVgLWHrv8xXpc3Q==} engines: {node: '>=0.10.0'} dev: false + /detect-libc/2.0.2: + resolution: {integrity: sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw==} + engines: {node: '>=8'} + dev: false + /detect-newline/2.1.0: resolution: {integrity: sha512-CwffZFvlJffUg9zZA0uqrjQayUTC8ob94pnr5sFwaVv3IOmkfUHcWH+jXaQK3askE51Cqe8/9Ql/0uXNwqZ8Zg==} engines: {node: '>=0.10.0'} @@ -4808,7 +5048,6 @@ packages: /emoji-regex/8.0.0: resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==} - dev: true /encodeurl/1.0.2: resolution: {integrity: sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==} @@ -5836,6 +6075,13 @@ packages: universalify: 0.1.2 dev: true + /fs-minipass/2.1.0: + resolution: {integrity: sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==} + engines: {node: '>= 8'} + dependencies: + minipass: 3.3.6 + dev: false + /fs-mkdirp-stream/1.0.0: resolution: {integrity: sha512-+vSd9frUnapVC2RZYfL3FCB2p3g4TBhaUmrsWlSudsGdnxIuUvBB2QM1VZeBtc49QFwrp+wQLrDs3+xxDgI5gQ==} engines: {node: '>= 0.10'} @@ -5883,6 +6129,21 @@ packages: /functions-have-names/1.2.3: resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==} + /gauge/3.0.2: + resolution: {integrity: sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==} + engines: {node: '>=10'} + dependencies: + aproba: 2.0.0 + color-support: 1.1.3 + console-control-strings: 1.1.0 + has-unicode: 2.0.1 + object-assign: 4.1.1 + signal-exit: 3.0.7 + string-width: 4.2.3 + strip-ansi: 6.0.1 + wide-align: 1.1.5 + dev: false + /generic-names/4.0.0: resolution: {integrity: sha512-ySFolZQfw9FoDb3ed9d80Cm9f0+r7qj+HJkWjeD9RBfpxEVTlVhol+gvaQB/78WbwYfbnNh8nWHHBSlg072y6A==} dependencies: @@ -6331,6 +6592,10 @@ packages: dependencies: has-symbols: 1.0.3 + /has-unicode/2.0.1: + resolution: {integrity: sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==} + dev: false + /has-value/0.3.1: resolution: {integrity: sha512-gpG936j8/MzaeID5Yif+577c17TxaDmhuyVgSwtnL/q8UUTySg8Mecb+8Cf1otgLoD7DDH75axp86ER7LFsf3Q==} engines: {node: '>=0.10.0'} @@ -6451,7 +6716,6 @@ packages: debug: 4.3.4 transitivePeerDependencies: - supports-color - dev: true /human-signals/1.1.1: resolution: {integrity: sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==} @@ -6732,7 +6996,6 @@ packages: /is-fullwidth-code-point/3.0.0: resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==} engines: {node: '>=8'} - dev: true /is-generator-fn/2.1.0: resolution: {integrity: sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==} @@ -8451,6 +8714,11 @@ packages: engines: {node: '>=4'} dev: true + /mimic-response/2.1.0: + resolution: {integrity: sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==} + engines: {node: '>=8'} + dev: false + /minimatch/3.0.4: resolution: {integrity: sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==} dependencies: @@ -8479,6 +8747,26 @@ packages: resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==} dev: true + /minipass/3.3.6: + resolution: {integrity: sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==} + engines: {node: '>=8'} + dependencies: + yallist: 4.0.0 + dev: false + + /minipass/5.0.0: + resolution: {integrity: sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==} + engines: {node: '>=8'} + dev: false + + /minizlib/2.1.2: + resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==} + engines: {node: '>= 8'} + dependencies: + minipass: 3.3.6 + yallist: 4.0.0 + dev: false + /mixin-deep/1.3.2: resolution: {integrity: sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==} engines: {node: '>=0.10.0'} @@ -8497,7 +8785,6 @@ packages: resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==} engines: {node: '>=10'} hasBin: true - dev: true /mlly/1.4.2: resolution: {integrity: sha512-i/Ykufi2t1EZ6NaPLdfnZk2AX8cs0d+mTzVKuPfqPKPatxLApaBoxJQ9x1/uckXtrS/U5oisPMDkNs0yQTaBRg==} @@ -8555,7 +8842,6 @@ packages: /nan/2.17.0: resolution: {integrity: sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==} - optional: true /nanoid/3.1.25: resolution: {integrity: sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q==} @@ -8606,6 +8892,13 @@ packages: resolution: {integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==} dev: true + /node-fetch/2.6.6: + resolution: {integrity: sha512-Z8/6vRlTUChSdIgMa51jxQ4lrw/Jy5SOW10ObaA47/RElsAN2c5Pn8bTgFGWn/ibwzXTE8qwr1Yzx28vsecXEA==} + engines: {node: 4.x || >=6.0.0} + dependencies: + whatwg-url: 5.0.0 + dev: false + /node-fetch/2.6.7: resolution: {integrity: sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==} engines: {node: 4.x || >=6.0.0} @@ -8616,7 +8909,6 @@ packages: optional: true dependencies: whatwg-url: 5.0.0 - dev: true /node-int64/0.4.0: resolution: {integrity: sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==} @@ -8638,6 +8930,14 @@ packages: /node-releases/2.0.13: resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==} + /nopt/5.0.0: + resolution: {integrity: sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==} + engines: {node: '>=6'} + hasBin: true + dependencies: + abbrev: 1.1.1 + dev: false + /normalize-package-data/2.5.0: resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==} dependencies: @@ -8701,6 +9001,15 @@ packages: path-key: 3.1.1 dev: true + /npmlog/5.0.1: + resolution: {integrity: sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==} + dependencies: + are-we-there-yet: 2.0.0 + console-control-strings: 1.1.0 + gauge: 3.0.2 + set-blocking: 2.0.0 + dev: false + /nth-check/2.1.1: resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==} dependencies: @@ -9026,6 +9335,10 @@ packages: /path-browserify/1.0.1: resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==} + /path-data-parser/0.1.0: + resolution: {integrity: sha512-NOnmBpt5Y2RWbuv0LMzsayp3lVylAHLPUTut412ZA3l+C4uw4ZVkQbjShYCQ8TCpUMdPapr4YjUqLYD6v68j+w==} + dev: false + /path-dirname/1.0.2: resolution: {integrity: sha512-ALzNPpyNq9AqXMBjeymIjFDAkAFH06mHJH/cSBHAgU0s4vfpBn6b2nf8tiRLvagKD8RbTpq2FKTBg7cl9l3c7Q==} dev: false @@ -9219,6 +9532,17 @@ packages: isarray: 0.0.1 parse-svg-path: 0.1.2 + /points-on-curve/0.2.0: + resolution: {integrity: sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A==} + dev: false + + /points-on-path/0.2.1: + resolution: {integrity: sha512-25ClnWWuw7JbWZcgqY/gJ4FQWadKxGWk+3kR/7kD0tCaDtPPMj7oHu2ToLaVhfpnHrZzYby2w6tUA0eOIuUg8g==} + dependencies: + path-data-parser: 0.1.0 + points-on-curve: 0.2.0 + dev: false + /posix-character-classes/0.1.1: resolution: {integrity: sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg==} engines: {node: '>=0.10.0'} @@ -10289,6 +10613,14 @@ packages: fsevents: 2.3.3 dev: false + /roughjs/4.5.2: + resolution: {integrity: sha512-2xSlLDKdsWyFxrveYWk9YQ/Y9UfK38EAMRNkYkMqYBJvPX8abCa9PN0x3w02H8Oa6/0bcZICJU+U95VumPqseg==} + dependencies: + path-data-parser: 0.1.0 + points-on-curve: 0.2.0 + points-on-path: 0.2.1 + dev: false + /rsvp/4.8.5: resolution: {integrity: sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==} engines: {node: 6.* || >= 7.*} @@ -10504,6 +10836,18 @@ packages: /signal-exit/3.0.7: resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==} + /simple-concat/1.0.1: + resolution: {integrity: sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==} + dev: false + + /simple-get/3.1.1: + resolution: {integrity: sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==} + dependencies: + decompress-response: 4.2.1 + once: 1.4.0 + simple-concat: 1.0.1 + dev: false + /simple-statistics/7.8.3: resolution: {integrity: sha512-JFvMY00t6SBGtwMuJ+nqgsx9ylkMiJ5JlK9bkj8AdvniIe5615wWQYkKHXe84XtSuc40G/tlrPu0A5/NlJvv8A==} @@ -10769,7 +11113,6 @@ packages: emoji-regex: 8.0.0 is-fullwidth-code-point: 3.0.0 strip-ansi: 6.0.1 - dev: true /string.prototype.matchall/4.0.9: resolution: {integrity: sha512-6i5hL3MqG/K2G43mWXWgP+qizFW/QH/7kCNN13JrJS5q48FN5IKksLDscexKP3dnmB6cdm9jlNgAsWNLpSykmA==} @@ -10976,6 +11319,18 @@ packages: engines: {node: '>=6'} dev: true + /tar/6.2.0: + resolution: {integrity: sha512-/Wo7DcT0u5HUV486xg675HtjNd3BXZ6xDbzsCUZPt5iw8bTQ63bP0Raut3mvro9u+CUyq7YQd8Cx55fsZXxqLQ==} + engines: {node: '>=10'} + dependencies: + chownr: 2.0.0 + fs-minipass: 2.1.0 + minipass: 5.0.0 + minizlib: 2.1.2 + mkdirp: 1.0.4 + yallist: 4.0.0 + dev: false + /terminal-link/2.1.1: resolution: {integrity: sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==} engines: {node: '>=8'} @@ -11188,7 +11543,6 @@ packages: /tr46/0.0.3: resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==} - dev: true /tr46/1.0.1: resolution: {integrity: sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==} @@ -11935,7 +12289,6 @@ packages: /webidl-conversions/3.0.1: resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==} - dev: true /webidl-conversions/4.0.2: resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==} @@ -11971,7 +12324,6 @@ packages: dependencies: tr46: 0.0.3 webidl-conversions: 3.0.1 - dev: true /whatwg-url/6.5.0: resolution: {integrity: sha512-rhRZRqx/TLJQWUpQ6bmrt2UV4f0HCQ463yQuONJqC6fO2VoEb1pTYddbe59SkYq87aoM5A3bdhMZiUiVws+fzQ==} @@ -12047,6 +12399,12 @@ packages: stackback: 0.0.2 dev: true + /wide-align/1.1.5: + resolution: {integrity: sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==} + dependencies: + string-width: 4.2.3 + dev: false + /word-wrap/1.2.5: resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==} engines: {node: '>=0.10.0'} diff --git a/docs/package.json b/docs/package.json index 0b13a85e5..dcba707e1 100644 --- a/docs/package.json +++ b/docs/package.json @@ -11,7 +11,7 @@ "dependencies": { "@arco-design/web-react": "2.46.1", "@visactor/vtable": "workspace:*", - "@visactor/vchart": "1.4.1-alpha.1", + "@visactor/vchart": "1.4.1", "markdown-it": "^13.0.0", "highlight.js": "^11.8.0", "axios": "^1.4.0", diff --git a/packages/vtable/examples/menu.ts b/packages/vtable/examples/menu.ts index 4af8c1270..8024875b9 100644 --- a/packages/vtable/examples/menu.ts +++ b/packages/vtable/examples/menu.ts @@ -184,6 +184,10 @@ export const menus = [ { path: 'type', name: 'chart' + }, + { + path: 'type', + name: 'checkbox' } ] }, diff --git a/packages/vtable/examples/type/checkbox.ts b/packages/vtable/examples/type/checkbox.ts new file mode 100644 index 000000000..f352c7711 --- /dev/null +++ b/packages/vtable/examples/type/checkbox.ts @@ -0,0 +1,79 @@ +import * as VTable from '../../src'; +import { bindDebugTool } from '../../src/scenegraph/debug-tool'; +const ListTable = VTable.ListTable; +const CONTAINER_ID = 'vTable'; + +export function createTable() { + const option: VTable.ListTableConstructorOptions = { + container: document.getElementById(CONTAINER_ID), + columns: [ + { + field: 'value', + title: 'icon', + width: 120, + style: { + color: data => { + if (Number(data.value) > 0) { + return 'rgb(80, 170, 83)'; + } + return 'rgb(216, 88, 89)'; + } + }, + icon: data => { + // if (data.value > 0) return 'up-green'; + // // 1. 直接返回name + // return 'down-red'; + // 2. 返回对象，name+position + // return { + // name: 'down-red', + // position: 0, + // }; + // 3. 返回一个完整的ColumnIconOption对象 + return { + type: 'svg', + svg: '', + width: 12, + height: 12, + name: 'up-green111', + positionType: VTable.TYPES.IconPosition.right + }; + } + }, + { + field: 'percent', + title: 'percent', + width: 120, + cellType: 'progressbar' + }, + { + field: 'percent', + title: 'checkbox', + width: 120, + cellType: 'checkbox' + } + ], + showFrozenIcon: true, //显示VTable内置冻结列图标 + widthMode: 'standard', + allowFrozenColCount: 2 + }; + + const instance = new ListTable(option); + + //设置表格数据 + instance.setRecords([ + { percent: '100%', value: 20 }, + { percent: '80%', value: 18 }, + { percent: '60%', value: 16 }, + { percent: '40%', value: 14 }, + { percent: '20%', value: 12 }, + { percent: '0%', value: 10 }, + { percent: '0%', value: -10 } + ]); + + bindDebugTool(instance.scenegraph.stage as any, { + // customGrapicKeys: ['role', '_updateTag'], + }); + + // 只为了方便控制太调试用，不要拷贝 + window.tableInstance = instance; +} diff --git a/packages/vtable/package.json b/packages/vtable/package.json index 137ae2048..ffc852382 100644 --- a/packages/vtable/package.json +++ b/packages/vtable/package.json @@ -48,8 +48,8 @@ "build:es": "bundle --clean -f es --ignorePostTasks" }, "dependencies": { - "@visactor/vrender": "0.15.4", - "@visactor/vrender-components": "0.15.4", + "@visactor/vrender": "0.17.0-alpha.8", + "@visactor/vrender-components": "0.17.0-alpha.8", "@visactor/vutils": "~0.15.7", "@visactor/vscale": "~0.15.7", "@visactor/vdataset": "~0.15.7", @@ -57,7 +57,7 @@ "core-js": "3.31.1" }, "devDependencies": { - "@visactor/vchart": "1.4.1-alpha.1", + "@visactor/vchart": "1.4.1", "@internal/bundler": "workspace:*", "@internal/eslint-config": "workspace:*", "@internal/ts-config": "workspace:*", diff --git a/packages/vtable/src/scenegraph/context/canvas.ts b/packages/vtable/src/scenegraph/context/canvas.ts index 15e548d59..01ebc7049 100644 --- a/packages/vtable/src/scenegraph/context/canvas.ts +++ b/packages/vtable/src/scenegraph/context/canvas.ts @@ -1,5 +1,4 @@ -import { injectable } from 'inversify'; -import { type ICanvas, type CanvasConfigType, type EnvType, BrowserCanvas } from '@visactor/vrender'; +import { type ICanvas, type CanvasConfigType, type EnvType, BrowserCanvas, injectable } from '@visactor/vrender'; import { Context2dForVTable } from './context'; @injectable() diff --git a/packages/vtable/src/scenegraph/context/context.ts b/packages/vtable/src/scenegraph/context/context.ts index b661bd36c..787f00017 100644 --- a/packages/vtable/src/scenegraph/context/context.ts +++ b/packages/vtable/src/scenegraph/context/context.ts @@ -1,6 +1,5 @@ // 参考konva -import { injectable } from 'inversify'; -import type { IContext2d, EnvType } from '@visactor/vrender'; +import type { IContext2d, EnvType, injectable } from '@visactor/vrender'; import { BrowserContext2d } from '@visactor/vrender'; declare const tt: { diff --git a/packages/vtable/src/scenegraph/context/module.ts b/packages/vtable/src/scenegraph/context/module.ts index 480a13783..6e9f1e3f8 100644 --- a/packages/vtable/src/scenegraph/context/module.ts +++ b/packages/vtable/src/scenegraph/context/module.ts @@ -1,6 +1,5 @@ import type { CanvasConfigType, ICanvas } from '@visactor/vrender'; -import { CanvasFactory, Context2dFactory } from '@visactor/vrender'; -import { ContainerModule } from 'inversify'; +import { CanvasFactory, Context2dFactory, ContainerModule } from '@visactor/vrender'; import { Context2dForVTable } from './context'; import { CanvasForVTable } from './canvas'; diff --git a/packages/vtable/src/scenegraph/graphic/contributions/chart-render.ts b/packages/vtable/src/scenegraph/graphic/contributions/chart-render.ts index caece52a8..0ccbe77aa 100644 --- a/packages/vtable/src/scenegraph/graphic/contributions/chart-render.ts +++ b/packages/vtable/src/scenegraph/graphic/contributions/chart-render.ts @@ -8,8 +8,7 @@ import type { IRenderService, IThemeAttribute } from '@visactor/vrender'; -import { ContributionProvider, getTheme, IGroupRenderContribution, createImage } from '@visactor/vrender'; -import { inject, injectable, named } from 'inversify'; +import { ContributionProvider, getTheme, IGroupRenderContribution, createImage, injectable } from '@visactor/vrender'; import type { Chart } from '../chart'; import { CHART_NUMBER_TYPE } from '../chart'; import { diff --git a/packages/vtable/src/scenegraph/graphic/contributions/group-contribution-render.ts b/packages/vtable/src/scenegraph/graphic/contributions/group-contribution-render.ts index b95d09cef..f2d36f67d 100644 --- a/packages/vtable/src/scenegraph/graphic/contributions/group-contribution-render.ts +++ b/packages/vtable/src/scenegraph/graphic/contributions/group-contribution-render.ts @@ -1,4 +1,3 @@ -import { injectable } from 'inversify'; import type { IGroup, IContext2d, @@ -9,7 +8,7 @@ import type { IGroupRenderContribution, IDrawContext } from '@visactor/vrender'; -import { BaseRenderContributionTime } from '@visactor/vrender'; +import { BaseRenderContributionTime, injectable } from '@visactor/vrender'; import type { Group } from '../group'; import { getCellHoverColor } from '../../../state/hover/is-cell-hover'; import type { BaseTableAPI } from '../../../ts-types/base-table'; diff --git a/packages/vtable/src/scenegraph/graphic/contributions/image-contribution-render.ts b/packages/vtable/src/scenegraph/graphic/contributions/image-contribution-render.ts index 38fa3c2b8..81e607639 100644 --- a/packages/vtable/src/scenegraph/graphic/contributions/image-contribution-render.ts +++ b/packages/vtable/src/scenegraph/graphic/contributions/image-contribution-render.ts @@ -1,4 +1,3 @@ -import { injectable } from 'inversify'; import type { IImage, IContext2d, @@ -9,7 +8,7 @@ import type { IImageRenderContribution, IDrawContext } from '@visactor/vrender'; -import { BaseRenderContributionTime } from '@visactor/vrender'; +import { BaseRenderContributionTime, injectable } from '@visactor/vrender'; /** * @description: image支持绘制部分形状 diff --git a/packages/vtable/src/scenegraph/graphic/contributions/index.ts b/packages/vtable/src/scenegraph/graphic/contributions/index.ts index 54dc1cbce..b99e3dbcb 100644 --- a/packages/vtable/src/scenegraph/graphic/contributions/index.ts +++ b/packages/vtable/src/scenegraph/graphic/contributions/index.ts @@ -1,11 +1,11 @@ -import { ContainerModule } from 'inversify'; import { GraphicRender, GroupRenderContribution, ImageRenderContribution, RectRenderContribution, SplitRectBeforeRenderContribution, - SplitRectAfterRenderContribution + SplitRectAfterRenderContribution, + ContainerModule } from '@visactor/vrender'; import { ChartRender, DefaultCanvasChartRender } from './chart-render'; import { AfterImageRenderContribution, BeforeImageRenderContribution } from './image-contribution-render'; diff --git a/packages/vtable/src/scenegraph/graphic/contributions/rect-contribution-render.ts b/packages/vtable/src/scenegraph/graphic/contributions/rect-contribution-render.ts index bc64a0d49..e89d78fd6 100644 --- a/packages/vtable/src/scenegraph/graphic/contributions/rect-contribution-render.ts +++ b/packages/vtable/src/scenegraph/graphic/contributions/rect-contribution-render.ts @@ -1,4 +1,3 @@ -import { injectable } from 'inversify'; import type { IRect, IContext2d, @@ -11,7 +10,7 @@ import type { IGroupGraphicAttribute, IDrawContext } from '@visactor/vrender'; -import { BaseRenderContributionTime } from '@visactor/vrender'; +import { BaseRenderContributionTime, injectable } from '@visactor/vrender'; import { renderStroke } from './group-contribution-render'; @injectable() diff --git a/packages/vtable/src/scenegraph/group-creater/cell-helper.ts b/packages/vtable/src/scenegraph/group-creater/cell-helper.ts index daf7a814e..13970d5b7 100644 --- a/packages/vtable/src/scenegraph/group-creater/cell-helper.ts +++ b/packages/vtable/src/scenegraph/group-creater/cell-helper.ts @@ -28,6 +28,7 @@ import { isPromise } from '../../tools/helper'; import { dealPromiseData } from '../utils/deal-promise-data'; import { CartesianAxis } from '../../components/axis/axis'; import type { PivotLayoutMap } from '../../layout/pivot-layout'; +import { createCheckboxCellGroup } from './cell-type/checkbox-cell'; export function createCell( type: ColumnTypeOption, @@ -331,6 +332,23 @@ export function createCell( table, cellTheme ); + } else if (type === 'checkbox') { + cellGroup = createCheckboxCellGroup( + null, + columnGroup, + 0, + y, + col, + row, + colWidth, + cellWidth, + cellHeight, + padding, + textAlign, + textBaseline, + table, + cellTheme + ); } return cellGroup; diff --git a/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts b/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts new file mode 100644 index 000000000..d958c2d48 --- /dev/null +++ b/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts @@ -0,0 +1,137 @@ +import type { ILine, ISymbol, IThemeSpec } from '@visactor/vrender'; +import { createLine, createSymbol } from '@visactor/vrender'; +import { PointScale, LinearScale } from '@visactor/vscale'; +import { isValid } from '../../../tools/util'; +import { Group } from '../../graphic/group'; +import type { CellInfo, SparklineSpec } from '../../../ts-types'; +import type { BaseTableAPI } from '../../../ts-types/base-table'; +import { isObject } from '@visactor/vutils'; +import { CheckBox } from '@visactor/vrender-components'; +import { getHierarchyOffset } from '../../utils/get-hierarchy-offset'; + +export function createCheckboxCellGroup( + cellGroup: Group | null, + columnGroup: Group, + xOrigin: number, + yOrigin: number, + col: number, + row: number, + colWidth: number | 'auto', + width: number, + height: number, + padding: number[], + textAlign: CanvasTextAlign, + textBaseline: CanvasTextBaseline, + table: BaseTableAPI, + cellTheme: IThemeSpec +) { + // cell + if (!cellGroup) { + cellGroup = new Group({ + x: xOrigin, + y: yOrigin, + width, + height, + + // 背景相关，cell背景由cellGroup绘制 + lineWidth: cellTheme?.group?.lineWidth ?? undefined, + fill: cellTheme?.group?.fill ?? undefined, + stroke: cellTheme?.group?.stroke ?? undefined, + + strokeArrayWidth: (cellTheme?.group as any)?.strokeArrayWidth ?? undefined, + strokeArrayColor: (cellTheme?.group as any)?.strokeArrayColor ?? undefined, + cursor: (cellTheme?.group as any)?.cursor ?? undefined, + + lineCap: 'square', + + clip: true + } as any); + cellGroup.role = 'cell'; + cellGroup.col = col; + cellGroup.row = row; + columnGroup?.addChild(cellGroup); + } + + // chart + const checkboxComponent = createCheckbox(col, row, colWidth, width, height, padding, cellTheme, table); + if (checkboxComponent) { + cellGroup.appendChild(checkboxComponent); + } + + checkboxComponent.render(); + + width -= padding[1] + padding[3]; + height -= padding[0] + padding[2]; + if (textAlign === 'center') { + checkboxComponent.setAttribute('x', padding[3] + (width - checkboxComponent.AABBBounds.width()) / 2); + } else if (textAlign === 'right') { + checkboxComponent.setAttribute('x', padding[3] + width - checkboxComponent.AABBBounds.width()); + } else { + checkboxComponent.setAttribute('x', padding[3]); + } + + if (textBaseline === 'middle') { + checkboxComponent.setAttribute('y', padding[0] + (height - checkboxComponent.AABBBounds.height()) / 2); + } else if (textBaseline === 'bottom') { + checkboxComponent.setAttribute('y', padding[0] + height - checkboxComponent.AABBBounds.height()); + } else { + checkboxComponent.setAttribute('y', padding[0]); + } + + return cellGroup; +} + +function createCheckbox( + col: number, + row: number, + colWidth: number | 'auto', + cellWidth: number, + cellHeight: number, + padding: number[], + cellTheme: IThemeSpec, + table: BaseTableAPI +) { + const value = table.getCellValue(col, row) as string | { text: string; checked: boolean; disabled: boolean }; + let isChecked = false; + let isDisabled = false; + let text = value as string; + if (isObject(value)) { + isChecked = !!value.checked; + isDisabled = !!value.disabled; + text = value.text; + } + + const hierarchyOffset = getHierarchyOffset(col, row, table); + const cellStyle = table._getCellStyle(col, row); // to be fixed + const autoWrapText = cellStyle.autoWrapText ?? table.internalProps.autoWrapText; + const lineClamp = cellStyle.lineClamp; + const autoColWidth = colWidth === 'auto'; + const autoRowHeight = table.heightMode === 'autoHeight'; + + const attribute = { + text: text.length === 1 && !autoWrapText ? text[0] : text, // 单行(no-autoWrapText)为字符串，多行(autoWrapText)为字符串数组 + maxLineWidth: autoColWidth ? Infinity : cellWidth - (padding[1] + padding[3] + hierarchyOffset), + // fill: true, + // textAlign: 'left', + textBaseline: 'top', + autoWrapText, + lineClamp, + wordBreak: 'break-word', + // widthLimit: autoColWidth ? -1 : colWidth - (padding[1] + padding[3]), + heightLimit: autoRowHeight ? -1 : cellHeight - (padding[0] + padding[2]), + pickable: false, + dx: hierarchyOffset + }; + const testAttribute = cellTheme.text ? (Object.assign({}, cellTheme.text, attribute) as any) : attribute; + + const checkbox = new CheckBox({ + x: 0, + y: 0, + text: testAttribute, + checked: isChecked, + disabled: isDisabled + }); + checkbox.name = 'text'; + + return checkbox; +} From a30892de239f04560997d6e30950105c1b973379 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Mon, 9 Oct 2023 11:39:34 +0800 Subject: [PATCH 02/48] feat: add checkbox config --- packages/vtable/examples/type/checkbox.ts | 26 ++++++++---- .../vtable/src/body-helper/body-helper.ts | 7 +++- .../src/body-helper/style/CheckboxStyle.ts | 34 ++++++++++++++++ .../group-creater/cell-type/checkbox-cell.ts | 40 ++++++++++++++----- packages/vtable/src/ts-types/column/style.ts | 6 +++ packages/vtable/src/ts-types/column/type.ts | 2 +- 6 files changed, 96 insertions(+), 19 deletions(-) create mode 100644 packages/vtable/src/body-helper/style/CheckboxStyle.ts diff --git a/packages/vtable/examples/type/checkbox.ts b/packages/vtable/examples/type/checkbox.ts index f352c7711..be1240209 100644 --- a/packages/vtable/examples/type/checkbox.ts +++ b/packages/vtable/examples/type/checkbox.ts @@ -49,7 +49,19 @@ export function createTable() { field: 'percent', title: 'checkbox', width: 120, + cellType: 'checkbox', + style: { + disable: true + } + }, + { + field: 'check', + title: 'checkbox', + width: 120, cellType: 'checkbox' + // style: { + // disable: true + // } } ], showFrozenIcon: true, //显示VTable内置冻结列图标 @@ -61,13 +73,13 @@ export function createTable() { //设置表格数据 instance.setRecords([ - { percent: '100%', value: 20 }, - { percent: '80%', value: 18 }, - { percent: '60%', value: 16 }, - { percent: '40%', value: 14 }, - { percent: '20%', value: 12 }, - { percent: '0%', value: 10 }, - { percent: '0%', value: -10 } + { percent: '100%', value: 20, check: { text: 'unchecked', checked: false, disable: false } }, + { percent: '80%', value: 18, check: { text: 'checked', checked: true, disable: false } }, + { percent: '60%', value: 16, check: { text: 'disable', checked: true, disable: true } }, + { percent: '40%', value: 14, check: { text: 'disable', checked: false, disable: true } }, + { percent: '20%', value: 12, check: { text: 'checked', checked: false, disable: false } }, + { percent: '0%', value: 10, check: { text: 'checked', checked: false, disable: false } }, + { percent: '0%', value: -10, check: { text: 'checked', checked: false, disable: false } } ]); bindDebugTool(instance.scenegraph.stage as any, { diff --git a/packages/vtable/src/body-helper/body-helper.ts b/packages/vtable/src/body-helper/body-helper.ts index b45bf9aaf..432dde6f3 100644 --- a/packages/vtable/src/body-helper/body-helper.ts +++ b/packages/vtable/src/body-helper/body-helper.ts @@ -8,6 +8,7 @@ import { ImageStyle } from './style/ImageStyle'; import type { BaseTableAPI } from '../ts-types/base-table'; import * as icons from '../tools/icons'; import { obj } from '../tools/helper'; +import { CheckboxStyle } from './style/CheckboxStyle'; export class BodyHelper { expandIcon: SvgIcon; collapseIcon: SvgIcon; @@ -80,7 +81,9 @@ export class BodyHelper { return iconArr; } - getStyleClass(cellType: 'text' | 'link' | 'image' | 'video' | 'chart' | 'sparkline' | 'progressbar' | 'chart') { + getStyleClass( + cellType: 'text' | 'link' | 'image' | 'video' | 'chart' | 'sparkline' | 'progressbar' | 'chart' | 'checkbox' + ) { switch (cellType) { case 'text': return TextStyle; @@ -96,6 +99,8 @@ export class BodyHelper { return Style; case 'progressbar': return ProgressBarStyle; + case 'checkbox': + return CheckboxStyle; } } getCellIconFromRecordValue(icon: ColumnIconOption, col: number, row: number): ColumnIconOption; diff --git a/packages/vtable/src/body-helper/style/CheckboxStyle.ts b/packages/vtable/src/body-helper/style/CheckboxStyle.ts new file mode 100644 index 000000000..4b9e37d85 --- /dev/null +++ b/packages/vtable/src/body-helper/style/CheckboxStyle.ts @@ -0,0 +1,34 @@ +import type { CheckboxStyleOption, IStyleOption, StylePropertyFunctionArg } from '../../ts-types'; +import { Style } from './Style'; +let defaultStyle: CheckboxStyle; + +export class CheckboxStyle extends Style { + private _checked: boolean | ((args: StylePropertyFunctionArg) => boolean); + private _disable: boolean | ((args: StylePropertyFunctionArg) => boolean); + + static get DEFAULT(): CheckboxStyle { + return defaultStyle ? defaultStyle : (defaultStyle = new CheckboxStyle()); + } + constructor(style: CheckboxStyleOption = {}, bodyStyle: IStyleOption = {}) { + super(style, bodyStyle); + this._checked = style.checked; + this._disable = style.disable; + } + get checked(): boolean | ((args: StylePropertyFunctionArg) => boolean) { + return this._checked; + } + set checked(value: boolean | ((args: StylePropertyFunctionArg) => boolean)) { + this._checked = value; + //this.doChangeStyle(); + } + get disable(): boolean | ((args: StylePropertyFunctionArg) => boolean) { + return this._disable; + } + set disable(value: boolean | ((args: StylePropertyFunctionArg) => boolean)) { + this._disable = value; + //this.doChangeStyle(); + } + clone(): CheckboxStyle { + return new CheckboxStyle(this, null); + } +} diff --git a/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts b/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts index d958c2d48..2b66ab0c6 100644 --- a/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts +++ b/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts @@ -3,11 +3,12 @@ import { createLine, createSymbol } from '@visactor/vrender'; import { PointScale, LinearScale } from '@visactor/vscale'; import { isValid } from '../../../tools/util'; import { Group } from '../../graphic/group'; -import type { CellInfo, SparklineSpec } from '../../../ts-types'; +import type { CellInfo, CheckboxStyleOption, SparklineSpec } from '../../../ts-types'; import type { BaseTableAPI } from '../../../ts-types/base-table'; import { isObject } from '@visactor/vutils'; import { CheckBox } from '@visactor/vrender-components'; import { getHierarchyOffset } from '../../utils/get-hierarchy-offset'; +import { getOrApply } from '../../../tools/helper'; export function createCheckboxCellGroup( cellGroup: Group | null, @@ -91,20 +92,39 @@ function createCheckbox( cellTheme: IThemeSpec, table: BaseTableAPI ) { - const value = table.getCellValue(col, row) as string | { text: string; checked: boolean; disabled: boolean }; - let isChecked = false; - let isDisabled = false; + const value = table.getCellValue(col, row) as string | { text: string; checked: boolean; disable: boolean }; + const dataValue = table.getCellOriginValue(col, row); + let isChecked; + let isDisabled; let text = value as string; if (isObject(value)) { - isChecked = !!value.checked; - isDisabled = !!value.disabled; + isChecked = value.checked; + isDisabled = value.disable; text = value.text; } const hierarchyOffset = getHierarchyOffset(col, row, table); - const cellStyle = table._getCellStyle(col, row); // to be fixed + const cellStyle = table._getCellStyle(col, row) as CheckboxStyleOption; // to be fixed const autoWrapText = cellStyle.autoWrapText ?? table.internalProps.autoWrapText; - const lineClamp = cellStyle.lineClamp; + const { lineClamp, checked, disable } = cellStyle; + + const globalChecked = getOrApply(checked as any, { + col, + row, + table, + context: null, + value, + dataValue + }); + const globalDisable = getOrApply(disable as any, { + col, + row, + table, + context: null, + value, + dataValue + }); + const autoColWidth = colWidth === 'auto'; const autoRowHeight = table.heightMode === 'autoHeight'; @@ -128,8 +148,8 @@ function createCheckbox( x: 0, y: 0, text: testAttribute, - checked: isChecked, - disabled: isDisabled + checked: isChecked ?? globalChecked ?? false, + disabled: isDisabled ?? globalDisable ?? false }); checkbox.name = 'text'; diff --git a/packages/vtable/src/ts-types/column/style.ts b/packages/vtable/src/ts-types/column/style.ts index fa4e3cb3d..5e71fb313 100644 --- a/packages/vtable/src/ts-types/column/style.ts +++ b/packages/vtable/src/ts-types/column/style.ts @@ -115,6 +115,7 @@ export type ColumnStyleOption = | ITextStyleOption | IImageStyleOption | ProgressBarStyleOption + | CheckboxStyleOption | ((styleArg: StylePropertyFunctionArg) => IStyleOption | ITextStyleOption | IImageStyleOption); export type HeaderStyleOption = @@ -176,3 +177,8 @@ export interface ProgressBarStyleOption extends IStyleOption { // 进度条标记位置 barMarkPosition?: 'right' | 'bottom'; } + +export interface CheckboxStyleOption extends ITextStyleOption { + checked?: boolean | ((args: StylePropertyFunctionArg) => boolean); + disable?: boolean | ((args: StylePropertyFunctionArg) => boolean); +} diff --git a/packages/vtable/src/ts-types/column/type.ts b/packages/vtable/src/ts-types/column/type.ts index 04d5d75c5..da5332ac5 100644 --- a/packages/vtable/src/ts-types/column/type.ts +++ b/packages/vtable/src/ts-types/column/type.ts @@ -1,2 +1,2 @@ -export type ColumnTypeOption = 'text' | 'image' | 'video' | 'link' | 'chart' | 'sparkline' | 'progressbar'; +export type ColumnTypeOption = 'text' | 'image' | 'video' | 'link' | 'chart' | 'sparkline' | 'progressbar' | 'checkbox'; export type HeaderTypeOption = 'text' | 'image' | 'video' | 'link'; From 197c5e7faeee176e160f1bed85c5ec1e9628ed88 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Wed, 11 Oct 2023 16:46:01 +0800 Subject: [PATCH 03/48] feat: add checkbox event --- packages/vtable/examples/type/checkbox.ts | 5 +++++ packages/vtable/src/core/TABLE_EVENT_TYPE.ts | 6 +++++- packages/vtable/src/event/event.ts | 4 ++++ .../vtable/src/event/listener/table-group.ts | 16 +++++++++++++++- .../group-creater/cell-type/checkbox-cell.ts | 2 +- packages/vtable/src/ts-types/events.ts | 3 +++ 6 files changed, 33 insertions(+), 3 deletions(-) diff --git a/packages/vtable/examples/type/checkbox.ts b/packages/vtable/examples/type/checkbox.ts index be1240209..008a4f06f 100644 --- a/packages/vtable/examples/type/checkbox.ts +++ b/packages/vtable/examples/type/checkbox.ts @@ -86,6 +86,11 @@ export function createTable() { // customGrapicKeys: ['role', '_updateTag'], }); + const { CHECKBOX_STATE_CHANGE } = VTable.ListTable.EVENT_TYPE; + instance.on(CHECKBOX_STATE_CHANGE, e => { + console.log(e.col, e.row, e.checked); + }); + // 只为了方便控制太调试用，不要拷贝 window.tableInstance = instance; } diff --git a/packages/vtable/src/core/TABLE_EVENT_TYPE.ts b/packages/vtable/src/core/TABLE_EVENT_TYPE.ts index 8a6a0aeeb..24fe8158c 100644 --- a/packages/vtable/src/core/TABLE_EVENT_TYPE.ts +++ b/packages/vtable/src/core/TABLE_EVENT_TYPE.ts @@ -118,6 +118,8 @@ export interface TableEvents { MOUSELEAVE_AXIS: 'mouseleave_axis'; AFTER_STAGE_RENDER: 'after_stage_render'; + + CHECKBOX_STATE_CHANGE: 'checkbox_state_change'; } /** * Table event types @@ -163,5 +165,7 @@ export const TABLE_EVENT_TYPE: TableEvents = { MOUSEENTER_AXIS: 'mouseenter_axis', MOUSELEAVE_AXIS: 'mouseleave_axis', - AFTER_STAGE_RENDER: 'after_stage_render' + AFTER_STAGE_RENDER: 'after_stage_render', + + CHECKBOX_STATE_CHANGE: 'checkbox_state_change' } as TableEvents; diff --git a/packages/vtable/src/event/event.ts b/packages/vtable/src/event/event.ts index bcde85422..c094bd0fb 100644 --- a/packages/vtable/src/event/event.ts +++ b/packages/vtable/src/event/event.ts @@ -163,6 +163,10 @@ export class EventManeger { const { eventArgs } = eventArgsSet; if (eventArgs) { + if (eventArgs.target.name === 'checkbox') { + return false; + } + // 注意：如果启用下面这句代码逻辑 则在点击选中单元格时失效hover效果。但是会导致chart实例的click事件失效，所以先特殊处理这个逻辑 if (!this.table.isPivotChart() && eventArgsSet?.eventArgs?.target.type !== 'chart') { this.table.stateManeger.updateHoverPos(-1, -1); diff --git a/packages/vtable/src/event/listener/table-group.ts b/packages/vtable/src/event/listener/table-group.ts index 98233e399..023357239 100644 --- a/packages/vtable/src/event/listener/table-group.ts +++ b/packages/vtable/src/event/listener/table-group.ts @@ -1,5 +1,5 @@ import type { FederatedPointerEvent } from '@visactor/vrender'; -import type { MousePointerMultiCellEvent, MousePointerSparklineEvent } from '../../ts-types'; +import type { MousePointerCellEvent, MousePointerMultiCellEvent, MousePointerSparklineEvent } from '../../ts-types'; import { InteractionState } from '../../ts-types'; import type { SceneEvent } from '../util'; import { getCellEventArgsSet } from '../util'; @@ -555,6 +555,20 @@ export function bindTableGroupListener(eventManeger: EventManeger) { table.fireListeners(TABLE_EVENT_TYPE.DBLCLICK_CELL, cellsEvent); } }); + + table.scenegraph.tableGroup.addEventListener('checkbox_state_change', (e: FederatedPointerEvent) => { + const eventArgsSet: SceneEvent = getCellEventArgsSet(e); + const { col, row } = eventArgsSet.eventArgs; + const cellInfo = table.getCellInfo(col, row); + + const cellsEvent: MousePointerCellEvent & { checked: boolean } = { + ...cellInfo, + event: e.nativeEvent, + target: eventArgsSet?.eventArgs?.target, + checked: (e.detail as unknown as { checked: boolean }).checked + }; + table.fireListeners(TABLE_EVENT_TYPE.CHECKBOX_STATE_CHANGE, cellsEvent); + }); } function endResizeCol(table: BaseTableAPI) { diff --git a/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts b/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts index 2b66ab0c6..1c1b72644 100644 --- a/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts +++ b/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts @@ -151,7 +151,7 @@ function createCheckbox( checked: isChecked ?? globalChecked ?? false, disabled: isDisabled ?? globalDisable ?? false }); - checkbox.name = 'text'; + checkbox.name = 'checkbox'; return checkbox; } diff --git a/packages/vtable/src/ts-types/events.ts b/packages/vtable/src/ts-types/events.ts index 798b637e8..71160758a 100644 --- a/packages/vtable/src/ts-types/events.ts +++ b/packages/vtable/src/ts-types/events.ts @@ -155,6 +155,8 @@ export interface TableEventHandlersEventArgumentMap { mouseleave_axis: MousePointerCellEvent & { axisPosition: 'left' | 'right' | 'top' | 'bottom' }; after_stage_render: null; + + checkbox_state_change: MousePointerCellEvent & { checked: boolean }; } export interface DrillMenuEventInfo { dimensionKey: string | number; @@ -217,4 +219,5 @@ export interface TableEventHandlersReturnMap { mouseleave_axis: void; after_stage_render: void; + checkbox_state_change: void; } From 4a41c70203c4d56b6caac4e526fec264c5b14541 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Thu, 12 Oct 2023 15:22:32 +0800 Subject: [PATCH 04/48] feat: change checkbox config --- .../feat-checkbox_2023-10-12-02-55.json | 10 ++++++ packages/vtable/examples/type/checkbox.ts | 9 ++--- .../src/body-helper/style/CheckboxStyle.ts | 36 +++++++++---------- .../scenegraph/group-creater/cell-helper.ts | 4 ++- .../group-creater/cell-type/checkbox-cell.ts | 11 +++--- packages/vtable/src/ts-types/column/style.ts | 5 +-- .../list-table/define/checkbox-define.ts | 10 ++++++ .../src/ts-types/list-table/define/index.ts | 4 +++ .../indicator/checkbox-indicator.ts | 10 ++++++ .../ts-types/pivot-table/indicator/index.ts | 2 ++ 10 files changed, 68 insertions(+), 33 deletions(-) create mode 100644 common/changes/@visactor/vtable/feat-checkbox_2023-10-12-02-55.json create mode 100644 packages/vtable/src/ts-types/list-table/define/checkbox-define.ts create mode 100644 packages/vtable/src/ts-types/pivot-table/indicator/checkbox-indicator.ts diff --git a/common/changes/@visactor/vtable/feat-checkbox_2023-10-12-02-55.json b/common/changes/@visactor/vtable/feat-checkbox_2023-10-12-02-55.json new file mode 100644 index 000000000..e2ca3f1e8 --- /dev/null +++ b/common/changes/@visactor/vtable/feat-checkbox_2023-10-12-02-55.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@visactor/vtable", + "comment": "feat: add checkbox cell type", + "type": "patch" + } + ], + "packageName": "@visactor/vtable" +} \ No newline at end of file diff --git a/packages/vtable/examples/type/checkbox.ts b/packages/vtable/examples/type/checkbox.ts index 008a4f06f..7660aab93 100644 --- a/packages/vtable/examples/type/checkbox.ts +++ b/packages/vtable/examples/type/checkbox.ts @@ -50,18 +50,15 @@ export function createTable() { title: 'checkbox', width: 120, cellType: 'checkbox', - style: { - disable: true - } + disable: true, + checked: true }, { field: 'check', title: 'checkbox', width: 120, cellType: 'checkbox' - // style: { - // disable: true - // } + // disable: true } ], showFrozenIcon: true, //显示VTable内置冻结列图标 diff --git a/packages/vtable/src/body-helper/style/CheckboxStyle.ts b/packages/vtable/src/body-helper/style/CheckboxStyle.ts index 4b9e37d85..2d9624af8 100644 --- a/packages/vtable/src/body-helper/style/CheckboxStyle.ts +++ b/packages/vtable/src/body-helper/style/CheckboxStyle.ts @@ -3,31 +3,31 @@ import { Style } from './Style'; let defaultStyle: CheckboxStyle; export class CheckboxStyle extends Style { - private _checked: boolean | ((args: StylePropertyFunctionArg) => boolean); - private _disable: boolean | ((args: StylePropertyFunctionArg) => boolean); + // private _checked: boolean | ((args: StylePropertyFunctionArg) => boolean); + // private _disable: boolean | ((args: StylePropertyFunctionArg) => boolean); static get DEFAULT(): CheckboxStyle { return defaultStyle ? defaultStyle : (defaultStyle = new CheckboxStyle()); } constructor(style: CheckboxStyleOption = {}, bodyStyle: IStyleOption = {}) { super(style, bodyStyle); - this._checked = style.checked; - this._disable = style.disable; - } - get checked(): boolean | ((args: StylePropertyFunctionArg) => boolean) { - return this._checked; - } - set checked(value: boolean | ((args: StylePropertyFunctionArg) => boolean)) { - this._checked = value; - //this.doChangeStyle(); - } - get disable(): boolean | ((args: StylePropertyFunctionArg) => boolean) { - return this._disable; - } - set disable(value: boolean | ((args: StylePropertyFunctionArg) => boolean)) { - this._disable = value; - //this.doChangeStyle(); + // this._checked = style.checked; + // this._disable = style.disable; } + // get checked(): boolean | ((args: StylePropertyFunctionArg) => boolean) { + // return this._checked; + // } + // set checked(value: boolean | ((args: StylePropertyFunctionArg) => boolean)) { + // this._checked = value; + // //this.doChangeStyle(); + // } + // get disable(): boolean | ((args: StylePropertyFunctionArg) => boolean) { + // return this._disable; + // } + // set disable(value: boolean | ((args: StylePropertyFunctionArg) => boolean)) { + // this._disable = value; + // //this.doChangeStyle(); + // } clone(): CheckboxStyle { return new CheckboxStyle(this, null); } diff --git a/packages/vtable/src/scenegraph/group-creater/cell-helper.ts b/packages/vtable/src/scenegraph/group-creater/cell-helper.ts index 388bf3a78..fed48eeb2 100644 --- a/packages/vtable/src/scenegraph/group-creater/cell-helper.ts +++ b/packages/vtable/src/scenegraph/group-creater/cell-helper.ts @@ -4,6 +4,7 @@ import { regUrl } from '../../tools/global'; import type { CellRange, ChartColumnDefine, + CheckboxColumnDefine, ColumnDefine, ColumnTypeOption, ICustomRender, @@ -348,7 +349,8 @@ export function createCell( textAlign, textBaseline, table, - cellTheme + cellTheme, + define as CheckboxColumnDefine ); } diff --git a/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts b/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts index 1c1b72644..3835022b7 100644 --- a/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts +++ b/packages/vtable/src/scenegraph/group-creater/cell-type/checkbox-cell.ts @@ -3,7 +3,7 @@ import { createLine, createSymbol } from '@visactor/vrender'; import { PointScale, LinearScale } from '@visactor/vscale'; import { isValid } from '../../../tools/util'; import { Group } from '../../graphic/group'; -import type { CellInfo, CheckboxStyleOption, SparklineSpec } from '../../../ts-types'; +import type { CellInfo, CheckboxColumnDefine, CheckboxStyleOption, SparklineSpec } from '../../../ts-types'; import type { BaseTableAPI } from '../../../ts-types/base-table'; import { isObject } from '@visactor/vutils'; import { CheckBox } from '@visactor/vrender-components'; @@ -24,7 +24,8 @@ export function createCheckboxCellGroup( textAlign: CanvasTextAlign, textBaseline: CanvasTextBaseline, table: BaseTableAPI, - cellTheme: IThemeSpec + cellTheme: IThemeSpec, + define: CheckboxColumnDefine ) { // cell if (!cellGroup) { @@ -54,7 +55,7 @@ export function createCheckboxCellGroup( } // chart - const checkboxComponent = createCheckbox(col, row, colWidth, width, height, padding, cellTheme, table); + const checkboxComponent = createCheckbox(col, row, colWidth, width, height, padding, cellTheme, define, table); if (checkboxComponent) { cellGroup.appendChild(checkboxComponent); } @@ -90,6 +91,7 @@ function createCheckbox( cellHeight: number, padding: number[], cellTheme: IThemeSpec, + define: CheckboxColumnDefine, table: BaseTableAPI ) { const value = table.getCellValue(col, row) as string | { text: string; checked: boolean; disable: boolean }; @@ -106,7 +108,8 @@ function createCheckbox( const hierarchyOffset = getHierarchyOffset(col, row, table); const cellStyle = table._getCellStyle(col, row) as CheckboxStyleOption; // to be fixed const autoWrapText = cellStyle.autoWrapText ?? table.internalProps.autoWrapText; - const { lineClamp, checked, disable } = cellStyle; + const { lineClamp } = cellStyle; + const { checked, disable } = define; const globalChecked = getOrApply(checked as any, { col, diff --git a/packages/vtable/src/ts-types/column/style.ts b/packages/vtable/src/ts-types/column/style.ts index 5e71fb313..fd808f127 100644 --- a/packages/vtable/src/ts-types/column/style.ts +++ b/packages/vtable/src/ts-types/column/style.ts @@ -178,7 +178,4 @@ export interface ProgressBarStyleOption extends IStyleOption { barMarkPosition?: 'right' | 'bottom'; } -export interface CheckboxStyleOption extends ITextStyleOption { - checked?: boolean | ((args: StylePropertyFunctionArg) => boolean); - disable?: boolean | ((args: StylePropertyFunctionArg) => boolean); -} +export type CheckboxStyleOption = ITextStyleOption; diff --git a/packages/vtable/src/ts-types/list-table/define/checkbox-define.ts b/packages/vtable/src/ts-types/list-table/define/checkbox-define.ts new file mode 100644 index 000000000..73e5cb277 --- /dev/null +++ b/packages/vtable/src/ts-types/list-table/define/checkbox-define.ts @@ -0,0 +1,10 @@ +import type { CheckboxStyleOption } from '../../column'; +import type { StylePropertyFunctionArg } from '../../style-define'; +import type { IBasicColumnBodyDefine } from './basic-define'; + +export interface ICheckboxColumnBodyDefine extends IBasicColumnBodyDefine { + style?: CheckboxStyleOption | ((styleArg: StylePropertyFunctionArg) => CheckboxStyleOption); + cellType: 'checkbox'; + checked?: boolean | ((args: StylePropertyFunctionArg) => boolean); + disable?: boolean | ((args: StylePropertyFunctionArg) => boolean); +} diff --git a/packages/vtable/src/ts-types/list-table/define/index.ts b/packages/vtable/src/ts-types/list-table/define/index.ts index aa10b1131..f259d6049 100644 --- a/packages/vtable/src/ts-types/list-table/define/index.ts +++ b/packages/vtable/src/ts-types/list-table/define/index.ts @@ -1,6 +1,7 @@ import type { Either } from '../../../tools/helper'; import type { ICompositeColumnBodyDefine } from './Composite-define'; import type { IChartColumnBodyDefine } from './chart-define'; +import type { ICheckboxColumnBodyDefine } from './checkbox-define'; import type { IImageColumnBodyDefine, IImageHeaderDefine } from './image-define'; import type { ILinkColumnBodyDefine, ILinkHeaderDefine } from './link-define'; import type { ITextColumnBodyDefine, ITextHeaderDefine } from './multilinetext-define'; @@ -14,6 +15,7 @@ export type ColumnBodyDefine = | IImageColumnBodyDefine | ISparklineColumnBodyDefine | IProgressbarColumnBodyDefine + | ICheckboxColumnBodyDefine | IChartColumnBodyDefine | ITextColumnBodyDefine; export type TextColumnDefine = ITextColumnBodyDefine & HeaderDefine; @@ -21,6 +23,7 @@ export type LinkColumnDefine = ILinkColumnBodyDefine & HeaderDefine; export type ImageColumnDefine = IImageColumnBodyDefine & HeaderDefine; export type SparklineColumnDefine = ISparklineColumnBodyDefine & HeaderDefine; export type ProgressbarColumnDefine = IProgressbarColumnBodyDefine & HeaderDefine; +export type CheckboxColumnDefine = ICheckboxColumnBodyDefine & HeaderDefine; export type ChartColumnDefine = IChartColumnBodyDefine & HeaderDefine; export type CompositeColumnDefine = ICompositeColumnBodyDefine & HeaderDefine; // export type GroupColumnDefine = IChartColumnBodyDefine & HeaderDefine; @@ -33,6 +36,7 @@ export type ColumnDefine = Either< | ImageColumnDefine | SparklineColumnDefine | ProgressbarColumnDefine + | CheckboxColumnDefine | ChartColumnDefine | TextColumnDefine | CompositeColumnDefine, diff --git a/packages/vtable/src/ts-types/pivot-table/indicator/checkbox-indicator.ts b/packages/vtable/src/ts-types/pivot-table/indicator/checkbox-indicator.ts new file mode 100644 index 000000000..818ac2798 --- /dev/null +++ b/packages/vtable/src/ts-types/pivot-table/indicator/checkbox-indicator.ts @@ -0,0 +1,10 @@ +import type { CheckboxStyleOption } from '../../column'; +import type { StylePropertyFunctionArg } from '../../style-define'; +import type { IBasicColumnIndicator } from './basic-indicator'; + +export interface ICheckboxColumnIndicator extends IBasicColumnIndicator { + cellType: 'checkbox'; // body指标值显示类型 + style?: CheckboxStyleOption | ((styleArg: StylePropertyFunctionArg) => CheckboxStyleOption); // body部分指标值显示样式 + checked?: boolean | ((args: StylePropertyFunctionArg) => boolean); + disable?: boolean | ((args: StylePropertyFunctionArg) => boolean); +} diff --git a/packages/vtable/src/ts-types/pivot-table/indicator/index.ts b/packages/vtable/src/ts-types/pivot-table/indicator/index.ts index fcdedcaae..39c016a83 100644 --- a/packages/vtable/src/ts-types/pivot-table/indicator/index.ts +++ b/packages/vtable/src/ts-types/pivot-table/indicator/index.ts @@ -1,4 +1,5 @@ import type { IChartColumnIndicator } from './chart-indicator'; +import type { ICheckboxColumnIndicator } from './checkbox-indicator'; import type { ICompositeColumnIndicator } from './composite-indicator'; import type { IImageColumnIndicator, IImageHeaderIndicator } from './image-indicator'; import type { ILinkColumnIndicator, ILinkHeaderIndicator } from './link-indicator'; @@ -13,6 +14,7 @@ export type ColumnIndicator = | IImageColumnIndicator | ISparklineColumnIndicator | IProgressbarColumnIndicator + | ICheckboxColumnIndicator | IChartColumnIndicator | ITextColumnIndicator | ICompositeColumnIndicator; From 34f8b93ad18a640d62aec9ba37b7ba62b69cbd9d Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Thu, 12 Oct 2023 17:48:33 +0800 Subject: [PATCH 05/48] docs: add checkbox docs and demo --- docs/assets/demo/en/cell-type/checkbox.md | 60 ++++++++++++++++++ docs/assets/demo/menu.json | 16 +++++ docs/assets/demo/zh/cell-type/checkbox.md | 60 ++++++++++++++++++ docs/assets/guide/en/cell_type/checkbox.md | 61 +++++++++++++++++++ docs/assets/guide/menu.json | 7 +++ docs/assets/guide/zh/cell_type/checkbox.md | 61 +++++++++++++++++++ .../option/en/column/checkbox-column-type.md | 26 ++++++++ docs/assets/option/en/column/column-define.md | 4 ++ .../option/zh/column/checkbox-column-type.md | 26 ++++++++ docs/assets/option/zh/column/column-define.md | 4 ++ packages/vtable/examples/type/checkbox.ts | 38 +----------- 11 files changed, 327 insertions(+), 36 deletions(-) create mode 100644 docs/assets/demo/en/cell-type/checkbox.md create mode 100644 docs/assets/demo/zh/cell-type/checkbox.md create mode 100644 docs/assets/guide/en/cell_type/checkbox.md create mode 100644 docs/assets/guide/zh/cell_type/checkbox.md create mode 100644 docs/assets/option/en/column/checkbox-column-type.md create mode 100644 docs/assets/option/zh/column/checkbox-column-type.md diff --git a/docs/assets/demo/en/cell-type/checkbox.md b/docs/assets/demo/en/cell-type/checkbox.md new file mode 100644 index 000000000..af7581c5a --- /dev/null +++ b/docs/assets/demo/en/cell-type/checkbox.md @@ -0,0 +1,60 @@ +--- +category: examples +group: Cell Type +title: Checkbox Type +cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/checkbox.png +order: 2-2 +link: '../guide/cell_type/checkbox' +--- + +# Data Bar Type + +Demonstrate multiple ways to use checkbox + +## Critical Configuration + +cellType: 'checkbox'; + +## Code Demo + +```javascript livedemo template=vtable + +const records = [ + { percent: '100%', value: 20, check: { text: 'unchecked', checked: false, disable: false } }, + { percent: '80%', value: 18, check: { text: 'checked', checked: true, disable: false } }, + { percent: '60%', value: 16, check: { text: 'disable', checked: true, disable: true } }, + { percent: '40%', value: 14, check: { text: 'disable', checked: false, disable: true } }, + { percent: '20%', value: 12, check: { text: 'checked', checked: false, disable: false } }, + { percent: '0%', value: 10, check: { text: 'checked', checked: false, disable: false } }, + { percent: '0%', value: -10, check: { text: 'checked', checked: false, disable: false } } + ]; + +const columns = [ + { + field: 'percent', + title: 'percent', + width: 120 + }, + { + field: 'percent', + title: 'checkbox', + width: 120, + cellType: 'checkbox', + disable: true, + checked: true + }, + { + field: 'check', + title: 'checkbox', + width: 120, + cellType: 'checkbox' + // disable: true + } +]; +const option = { + records, + columns +}; +const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option); +window['tableInstance'] = tableInstance; +``` diff --git a/docs/assets/demo/menu.json b/docs/assets/demo/menu.json index bb061b3e3..df43ac4fc 100644 --- a/docs/assets/demo/menu.json +++ b/docs/assets/demo/menu.json @@ -202,6 +202,22 @@ "option": "" } }, + { + "path": "checkbox", + "title": { + "zh": "选择框类型", + "en": "Checkbox Type" + }, + "meta": { + "title": "Checkbox Type", + "keywords": "", + "category": "demo", + "group": "Cell Type", + "cover": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/checkbox.png", + "link": "'../../guide/column_type/checkbox'", + "option": "" + } + }, { "path": "chart", "title": { diff --git a/docs/assets/demo/zh/cell-type/checkbox.md b/docs/assets/demo/zh/cell-type/checkbox.md new file mode 100644 index 000000000..554113ea2 --- /dev/null +++ b/docs/assets/demo/zh/cell-type/checkbox.md @@ -0,0 +1,60 @@ +--- +category: examples +group: Cell Type +title: 选择框类型 +cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/checkbox.png +order: 2-2 +link: '../guide/cell_type/checkbox' +--- + +# 数据条类型 + +展示选择框类型的多种使用方式 + +## 关键配置 + +cellType: 'checkbox'; + +## 代码演示 + +```javascript livedemo template=vtable + +const records = [ + { percent: '100%', value: 20, check: { text: 'unchecked', checked: false, disable: false } }, + { percent: '80%', value: 18, check: { text: 'checked', checked: true, disable: false } }, + { percent: '60%', value: 16, check: { text: 'disable', checked: true, disable: true } }, + { percent: '40%', value: 14, check: { text: 'disable', checked: false, disable: true } }, + { percent: '20%', value: 12, check: { text: 'checked', checked: false, disable: false } }, + { percent: '0%', value: 10, check: { text: 'checked', checked: false, disable: false } }, + { percent: '0%', value: -10, check: { text: 'checked', checked: false, disable: false } } + ]; + +const columns = [ + { + field: 'percent', + title: 'percent', + width: 120 + }, + { + field: 'percent', + title: 'checkbox', + width: 120, + cellType: 'checkbox', + disable: true, + checked: true + }, + { + field: 'check', + title: 'checkbox', + width: 120, + cellType: 'checkbox' + // disable: true + } +]; +const option = { + records, + columns +}; +const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option); +window['tableInstance'] = tableInstance; +``` diff --git a/docs/assets/guide/en/cell_type/checkbox.md b/docs/assets/guide/en/cell_type/checkbox.md new file mode 100644 index 000000000..01739bbbb --- /dev/null +++ b/docs/assets/guide/en/cell_type/checkbox.md @@ -0,0 +1,61 @@ +# Checkbox Type + +Selection box type cells are suitable for use in tables to provide multiple selection options and allow the user to select or deselect one or more items. Checkbox type cells are widely used in many applications, including task management, data filtering, permission settings, etc. + +The advantages of selecting box cells in tables are as follows: + +1. The use of selection box type cells is very intuitive and flexible. Users can select one or more options to perform specific actions or filter data based on their needs. This interaction method enables users to control their operations more finely, improving user experience and efficiency. +2. Selection box type cells usually use different icons or colors to indicate selected and unselected states, providing visual feedback. This way the user can easily identify which options have been selected and which have not. + +![image](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/checkbox.png) + +## Introduction of exclusive configuration items for checkbox + +The specific configuration items of the checkbox in the configuration are as follows: + +1. `checked`: Whether the cell is selected. The default value is false. Configuration functions are supported. Different cell configurations are different. +2. `disable`: Whether the cell selection box can disable clicks. The default value is false. It supports configuration functions and has different configurations for different cells. + +Example: +```javascript +{ + cellType: 'checkbox', + field: 'check', + checked: true, + disbaled: false +} +``` + +## Introduction of data for checkbox + +The data corresponding to the checkbox supports strings or objects, in which the following attributes can be configured in the object: + +* text: The text displayed in the cell selection box +* checked: Whether the cell selection box is selected +* disable: whether the cell selection box is disabled + +Example: +```javasxript +const records = [ + { + percent: '100%', + check: { + text: 'unchecked', + checked: false, + disable: false + } + }, + { + percent: '80%', + check: { + text: 'checked', + checked: true, + disable: false + } + } +]; +``` + +`checked` and `disable` support configuration in both data and `column`. The priority of configuration in data is higher than the configuration in `column`. + +Through the above introduction, you have learned how to use the checkbox type in the VTable table for data display, I hope it will be helpful to you. \ No newline at end of file diff --git a/docs/assets/guide/menu.json b/docs/assets/guide/menu.json index 4fc953007..23ac4e9b5 100644 --- a/docs/assets/guide/menu.json +++ b/docs/assets/guide/menu.json @@ -163,6 +163,13 @@ "en": "progressbar" } }, + { + "path": "checkbox", + "title": { + "zh": "选择框", + "en": "checkbox" + } + }, { "path": "sparkline", "title": { diff --git a/docs/assets/guide/zh/cell_type/checkbox.md b/docs/assets/guide/zh/cell_type/checkbox.md new file mode 100644 index 000000000..a3ef6198d --- /dev/null +++ b/docs/assets/guide/zh/cell_type/checkbox.md @@ -0,0 +1,61 @@ +# checkbox选择框类型 + +选择框类型单元格适用于在表格中用于提供多选选项，并允许用户选择或取消选择一个或多个项目。复选框类型单元格在许多应用中被广泛使用，包括任务管理、数据筛选、权限设置等。 + +在表格中选择框单元格的优点如下： + +1. 选择框类型单元格的使用非常直观和灵活。用户可以根据自己的需求选择一个或多个选项，以进行特定操作或过滤数据。这种交互方式使得用户能够更加精细地控制其操作，提高了用户体验和效率。 +2. 选择框类型单元格通常使用不同的图标或颜色来表示选中和未选中的状态，提供可视化的反馈。这样用户可以轻松地识别哪些选项已经被选择，哪些选项未被选择。 + +![image](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/checkbox.png) + +## checkbox选择框的专属配置项介绍 + +checkbox 选择框类型在配置中的特有配置项如下： + +1. `checked`：单元格是否处于选中状态，默认值为 false，支持配置函数，不同单元格配置不同。 +2. `disable`：单元格选择框是否可禁用点击，默认值为 false，支持配置函数，不同单元格配置不同。 + +示例： +```javascript +{ + cellType: 'checkbox', + field: 'check', + checked: true, + disbaled: false +} +``` + +## checkbox选择框的专属数据类型介绍 + +checkbox 对应的数据，支持字符串或对象，其中对象中支持配置以下属性： + +* text: 该单元格选择框中显示的文字 +* checked: 该单元格选择框是否被选中 +* disable: 该单元格选择框是否被禁用 + +示例： +```javasxript +const records = [ + { + percent: '100%', + check: { + text: 'unchecked', + checked: false, + disable: false + } + }, + { + percent: '80%', + check: { + text: 'checked', + checked: true, + disable: false + } + } +]; +``` + +`checked`和`disable`同时支持在数据中和在`column`中配置，数据中配置的优先级高于`column`中的配置。 + +通过以上介绍，您已学会了如何在 VTable 表格中使用 checkbox 选择框类型进行数据展示，希望对您有所帮助。 \ No newline at end of file diff --git a/docs/assets/option/en/column/checkbox-column-type.md b/docs/assets/option/en/column/checkbox-column-type.md new file mode 100644 index 000000000..75d2bb750 --- /dev/null +++ b/docs/assets/option/en/column/checkbox-column-type.md @@ -0,0 +1,26 @@ +{{ target: checkbox-cell-type }} + +#${prefix} columns.checkbox(string) + +Specify the column type as 'checkbox', cellType can be omitted and defaults to 'text' + +##${prefix} cellType(string) = 'checkbox' + +Specify the column type as 'checkbox', cellType can be omitted and defaults to 'text' + +{{ use: base-cell-type( + prefix = '##'+${prefix}, + isCheckbox = true +) }} + +##${prefix} checked(boolean|Function) = false + +**Configuration item exclusive to checkbox type** + +Whether the checkbook is in checked status + +##${prefix} disable(boolean|Function) = false + +**Configuration item exclusive to checkbox type** + +Whether the checkbook is in a disabled interactive state diff --git a/docs/assets/option/en/column/column-define.md b/docs/assets/option/en/column/column-define.md index 1a23bcc23..cce4ce6e0 100644 --- a/docs/assets/option/en/column/column-define.md +++ b/docs/assets/option/en/column/column-define.md @@ -32,6 +32,10 @@ Table column configuration, each column needs to set configuration items separat prefix = ${prefix} ) }} +{{ use: checkbox-cell-type( + prefix = ${prefix} +) }} + {{ use: composite-cell-type( prefix = ${prefix} ) }} \ No newline at end of file diff --git a/docs/assets/option/zh/column/checkbox-column-type.md b/docs/assets/option/zh/column/checkbox-column-type.md new file mode 100644 index 000000000..e5a5f27bd --- /dev/null +++ b/docs/assets/option/zh/column/checkbox-column-type.md @@ -0,0 +1,26 @@ +{{ target: checkbox-cell-type }} + +#${prefix} columns.checkbox(string) + +指定该列或该行单元格类型为'checkbox'，cellType 缺省的话会被默认为'text' + +##${prefix} cellType(string) = 'checkbox' + +指定该列或该行单元格类型为'checkbox'，cellType 缺省的话会被默认为'text' + +{{ use: base-cell-type( + prefix = '##'+${prefix}, + isCheckbox = true +) }} + +##${prefix} checked(boolean|Function) = false + +**checkbox 类型专属配置项** + +checkbook是否处于checked状态 + +##${prefix} disable(boolean|Function) = false + +**checkbox 类型专属配置项** + +checkbook是否处于禁止交互状态 diff --git a/docs/assets/option/zh/column/column-define.md b/docs/assets/option/zh/column/column-define.md index 1146b0053..d7c5f643d 100644 --- a/docs/assets/option/zh/column/column-define.md +++ b/docs/assets/option/zh/column/column-define.md @@ -33,6 +33,10 @@ prefix = ${prefix} ) }} +{{ use: checkbox-cell-type( + prefix = ${prefix} +) }} + {{ use: composite-cell-type( prefix = ${prefix} ) }} diff --git a/packages/vtable/examples/type/checkbox.ts b/packages/vtable/examples/type/checkbox.ts index 7660aab93..8e2203cf6 100644 --- a/packages/vtable/examples/type/checkbox.ts +++ b/packages/vtable/examples/type/checkbox.ts @@ -7,43 +7,10 @@ export function createTable() { const option: VTable.ListTableConstructorOptions = { container: document.getElementById(CONTAINER_ID), columns: [ - { - field: 'value', - title: 'icon', - width: 120, - style: { - color: data => { - if (Number(data.value) > 0) { - return 'rgb(80, 170, 83)'; - } - return 'rgb(216, 88, 89)'; - } - }, - icon: data => { - // if (data.value > 0) return 'up-green'; - // // 1. 直接返回name - // return 'down-red'; - // 2. 返回对象，name+position - // return { - // name: 'down-red', - // position: 0, - // }; - // 3. 返回一个完整的ColumnIconOption对象 - return { - type: 'svg', - svg: '', - width: 12, - height: 12, - name: 'up-green111', - positionType: VTable.TYPES.IconPosition.right - }; - } - }, { field: 'percent', title: 'percent', - width: 120, - cellType: 'progressbar' + width: 120 }, { field: 'percent', @@ -62,8 +29,7 @@ export function createTable() { } ], showFrozenIcon: true, //显示VTable内置冻结列图标 - widthMode: 'standard', - allowFrozenColCount: 2 + widthMode: 'standard' }; const instance = new ListTable(option); From c2d61eb001906ec2c7c4226202a5cfcbcdb1a536 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Tue, 17 Oct 2023 16:09:32 +0800 Subject: [PATCH 06/48] feat: add basic nodejs env support --- .gitignore | 2 + common/config/rush/pnpm-lock.yaml | 365 ++++++++++++++++-- packages/vtable/.eslintrc.js | 2 +- packages/vtable/nodejs/index.ts | 5 + packages/vtable/nodejs/list-table.ts | 98 +++++ packages/vtable/nodejs/small-table.ts | 58 +++ packages/vtable/package.json | 9 +- packages/vtable/src/ListTable.ts | 6 +- .../menu/dom/logic/MenuElementStyle.ts | 5 + .../logic/BubbleTooltipElementStyle.ts | 5 + packages/vtable/src/core/BaseTable.ts | 74 ++-- packages/vtable/src/core/style.ts | 5 + packages/vtable/src/event/event.ts | 4 + packages/vtable/src/index.ts | 2 +- packages/vtable/src/scenegraph/scenegraph.ts | 17 +- packages/vtable/src/ts-types/base-table.ts | 10 + 16 files changed, 601 insertions(+), 66 deletions(-) create mode 100644 packages/vtable/nodejs/index.ts create mode 100644 packages/vtable/nodejs/list-table.ts create mode 100644 packages/vtable/nodejs/small-table.ts diff --git a/.gitignore b/.gitignore index 40dd9b7bb..2fcae7704 100644 --- a/.gitignore +++ b/.gitignore @@ -100,3 +100,5 @@ common/scripts/pre-commit # generated documents docs/public/documents + +packages/vtable/nodejs/*.png \ No newline at end of file diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index 38a047361..6ecf08d97 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -69,6 +69,7 @@ importers: '@internal/bundler': workspace:* '@internal/eslint-config': workspace:* '@internal/ts-config': workspace:* + '@resvg/resvg-js': ^2.5.0 '@rushstack/eslint-patch': ~1.1.4 '@types/chai': 4.2.22 '@types/jest': ^26.0.0 @@ -86,6 +87,7 @@ importers: '@visactor/vutils-extension': 1.5.1-alpha.0 '@vitejs/plugin-react': 3.1.0 axios: ^1.4.0 + canvas: ^2.11.2 chai: 4.3.4 cssfontparser: ^1.2.1 d3-array: 3.2.3 @@ -132,6 +134,7 @@ importers: '@internal/bundler': link:../../tools/bundler '@internal/eslint-config': link:../../share/eslint-config '@internal/ts-config': link:../../share/ts-config + '@resvg/resvg-js': 2.5.0 '@rushstack/eslint-patch': 1.1.4 '@types/chai': 4.2.22 '@types/jest': 26.0.24 @@ -143,6 +146,7 @@ importers: '@visactor/vchart': 1.5.1-alpha.0 '@vitejs/plugin-react': 3.1.0_vite@3.2.6 axios: 1.5.1 + canvas: 2.11.2 chai: 4.3.4 d3-array: 3.2.3 d3-dsv: 3.0.1 @@ -152,7 +156,7 @@ importers: eslint: 8.18.0 form-data: 4.0.0 inversify: 6.0.1 - jest: 26.6.3_ts-node@10.9.0 + jest: 26.6.3_xxvpynkn5i4ehycnunrxxsezu4 jest-electron: 0.1.12_jest@26.6.3 jest-transform-stub: 2.0.0 json-formatter-js: 2.3.4 @@ -1755,7 +1759,7 @@ packages: slash: 3.0.0 dev: true - /@jest/core/26.6.3_ts-node@10.9.0: + /@jest/core/26.6.3_xxvpynkn5i4ehycnunrxxsezu4: resolution: {integrity: sha512-xvV1kKbhfUqFVuZ8Cyo+JPpipAHHAV3kcDBftiduK8EICXmTFddryy3P7NfZt8Pv37rA9nEJBKCCkglCPt/Xjw==} engines: {node: '>= 10.14.2'} dependencies: @@ -1770,14 +1774,14 @@ packages: exit: 0.1.2 graceful-fs: 4.2.11 jest-changed-files: 26.6.2 - jest-config: 26.6.3_ts-node@10.9.0 + jest-config: 26.6.3_xxvpynkn5i4ehycnunrxxsezu4 jest-haste-map: 26.6.2 jest-message-util: 26.6.2 jest-regex-util: 26.0.0 jest-resolve: 26.6.2 jest-resolve-dependencies: 26.6.3 - jest-runner: 26.6.3_ts-node@10.9.0 - jest-runtime: 26.6.3_ts-node@10.9.0 + jest-runner: 26.6.3_xxvpynkn5i4ehycnunrxxsezu4 + jest-runtime: 26.6.3_xxvpynkn5i4ehycnunrxxsezu4 jest-snapshot: 26.6.2 jest-util: 26.6.2 jest-validate: 26.6.2 @@ -1930,15 +1934,15 @@ packages: - supports-color dev: true - /@jest/test-sequencer/26.6.3_ts-node@10.9.0: + /@jest/test-sequencer/26.6.3_xxvpynkn5i4ehycnunrxxsezu4: resolution: {integrity: sha512-YHlVIjP5nfEyjlrSr8t/YdNfU/1XEt7c5b4OxcXCjyRhjzLYu/rO69/WHPuYcbCWkz8kAeZVZp2N2+IOLLEPGw==} engines: {node: '>= 10.14.2'} dependencies: '@jest/test-result': 26.6.2 graceful-fs: 4.2.11 jest-haste-map: 26.6.2 - jest-runner: 26.6.3_ts-node@10.9.0 - jest-runtime: 26.6.3_ts-node@10.9.0 + jest-runner: 26.6.3_xxvpynkn5i4ehycnunrxxsezu4 + jest-runtime: 26.6.3_xxvpynkn5i4ehycnunrxxsezu4 transitivePeerDependencies: - bufferutil - canvas @@ -2051,6 +2055,24 @@ packages: '@jridgewell/resolve-uri': 3.1.1 '@jridgewell/sourcemap-codec': 1.4.15 + /@mapbox/node-pre-gyp/1.0.11: + resolution: {integrity: sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==} + hasBin: true + dependencies: + detect-libc: 2.0.2 + https-proxy-agent: 5.0.1 + make-dir: 3.1.0 + node-fetch: 2.6.7 + nopt: 5.0.0 + npmlog: 5.0.1 + rimraf: 3.0.2 + semver: 7.5.4 + tar: 6.2.0 + transitivePeerDependencies: + - encoding + - supports-color + dev: true + /@nodelib/fs.scandir/2.1.5: resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} engines: {node: '>= 8'} @@ -2082,6 +2104,15 @@ packages: requiresBuild: true optional: true + /@resvg/resvg-js-android-arm-eabi/2.5.0: + resolution: {integrity: sha512-zqcJJLijd+SRYH+oHMijKIiDgECm9cfnanhPqp/9S8X0k28E6EviFvRDaXlZPS9La184ywOK5fR8D2BU0YopaQ==} + engines: {node: '>= 10'} + cpu: [arm] + os: [android] + requiresBuild: true + dev: true + optional: true + /@resvg/resvg-js-android-arm64/2.4.1: resolution: {integrity: sha512-/QleoRdPfsEuH9jUjilYcDtKK/BkmWcK+1LXM8L2nsnf/CI8EnFyv7ZzCj4xAIvZGAy9dTYr/5NZBcTwxG2HQg==} engines: {node: '>= 10'} @@ -2090,6 +2121,15 @@ packages: requiresBuild: true optional: true + /@resvg/resvg-js-android-arm64/2.5.0: + resolution: {integrity: sha512-9yfavDnQ3WMeAdQQr7/29viqcrqAgJ6o3QTIm0VMrqaUm7Xm+BylWvafluT+o3J8f+1+iMvqmbf/lyReWFHpkQ==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [android] + requiresBuild: true + dev: true + optional: true + /@resvg/resvg-js-darwin-arm64/2.4.1: resolution: {integrity: sha512-U1oMNhea+kAXgiEXgzo7EbFGCD1Edq5aSlQoe6LMly6UjHzgx2W3N5kEXCwU/CgN5FiQhZr7PlSJSlcr7mdhfg==} engines: {node: '>= 10'} @@ -2098,6 +2138,15 @@ packages: requiresBuild: true optional: true + /@resvg/resvg-js-darwin-arm64/2.5.0: + resolution: {integrity: sha512-qbk50BM/bd/eEtnQp5W5xNPoCOsb0WJMZy6wOOATljYzgvKZOOBtwHU/ej9m4w5DfFa67qdWZh0iw35y4VUzBQ==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + /@resvg/resvg-js-darwin-x64/2.4.1: resolution: {integrity: sha512-avyVh6DpebBfHHtTQTZYSr6NG1Ur6TEilk1+H0n7V+g4F7x7WPOo8zL00ZhQCeRQ5H4f8WXNWIEKL8fwqcOkYw==} engines: {node: '>= 10'} @@ -2106,6 +2155,15 @@ packages: requiresBuild: true optional: true + /@resvg/resvg-js-darwin-x64/2.5.0: + resolution: {integrity: sha512-r3qtM0NKNEgEG0oM7uAwxsHfaoueJzL4AeQ/ukLRvzepnrnL6VMQC7yj4LaPmzB43i25FBKXJEO4ck44m8Q75A==} + engines: {node: '>= 10'} + cpu: [x64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + /@resvg/resvg-js-linux-arm-gnueabihf/2.4.1: resolution: {integrity: sha512-isY/mdKoBWH4VB5v621co+8l101jxxYjuTkwOLsbW+5RK9EbLciPlCB02M99ThAHzI2MYxIUjXNmNgOW8btXvw==} engines: {node: '>= 10'} @@ -2114,6 +2172,15 @@ packages: requiresBuild: true optional: true + /@resvg/resvg-js-linux-arm-gnueabihf/2.5.0: + resolution: {integrity: sha512-LP1Sq1PIVyOClVu6qPmvZUP4JY5505X6JZs5ycDAZMSHhn0JP1w/jAJtEQFdZuJBUleAgxXkwNW1MVJhE6MQTA==} + engines: {node: '>= 10'} + cpu: [arm] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@resvg/resvg-js-linux-arm64-gnu/2.4.1: resolution: {integrity: sha512-uY5voSCrFI8TH95vIYBm5blpkOtltLxLRODyhKJhGfskOI7XkRw5/t1u0sWAGYD8rRSNX+CA+np86otKjubrNg==} engines: {node: '>= 10'} @@ -2122,6 +2189,15 @@ packages: requiresBuild: true optional: true + /@resvg/resvg-js-linux-arm64-gnu/2.5.0: + resolution: {integrity: sha512-soZ8QE4bllca5eVwMR5BRU5jODjFpR5KRD4yBRwG/8TXLsU3Lx2glLrB+cZIfosqt7BKUGSakTG15Mpbglru7A==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@resvg/resvg-js-linux-arm64-musl/2.4.1: resolution: {integrity: sha512-6mT0+JBCsermKMdi/O2mMk3m7SqOjwi9TKAwSngRZ/nQoL3Z0Z5zV+572ztgbWr0GODB422uD8e9R9zzz38dRQ==} engines: {node: '>= 10'} @@ -2130,6 +2206,15 @@ packages: requiresBuild: true optional: true + /@resvg/resvg-js-linux-arm64-musl/2.5.0: + resolution: {integrity: sha512-IhigcvJbtwyyLoFQAeOrxxbNv6EbBJDE72JZrzKt4ywsEMF+FzLQKIVtI7zZRwG5RX0JQmjdAOS9/95YyN449g==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@resvg/resvg-js-linux-x64-gnu/2.4.1: resolution: {integrity: sha512-60KnrscLj6VGhkYOJEmmzPlqqfcw1keDh6U+vMcNDjPhV3B5vRSkpP/D/a8sfokyeh4VEacPSYkWGezvzS2/mg==} engines: {node: '>= 10'} @@ -2138,6 +2223,15 @@ packages: requiresBuild: true optional: true + /@resvg/resvg-js-linux-x64-gnu/2.5.0: + resolution: {integrity: sha512-Zl1GI+046jMYGDWeG2R1ika2gquLNlH57L1ceWEsfjJWVA1yBawB50roUyDEfATclrO0dUTLJellLbOwm2/iBg==} + engines: {node: '>= 10'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@resvg/resvg-js-linux-x64-musl/2.4.1: resolution: {integrity: sha512-0AMyZSICC1D7ge115cOZQW8Pcad6PjWuZkBFF3FJuSxC6Dgok0MQnLTs2MfMdKBlAcwO9dXsf3bv9tJZj8pATA==} engines: {node: '>= 10'} @@ -2146,6 +2240,15 @@ packages: requiresBuild: true optional: true + /@resvg/resvg-js-linux-x64-musl/2.5.0: + resolution: {integrity: sha512-P/Sl040LAbI5r2IB/87OzpAckAmtDI626HejnTBE8i0VZZiXsv7RS5tK7krAF4PAiQaGV787lE6EU5hSB/a5lg==} + engines: {node: '>= 10'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@resvg/resvg-js-win32-arm64-msvc/2.4.1: resolution: {integrity: sha512-76XDFOFSa3d0QotmcNyChh2xHwk+JTFiEQBVxMlHpHMeq7hNrQJ1IpE1zcHSQvrckvkdfLboKRrlGB86B10Qjw==} engines: {node: '>= 10'} @@ -2154,6 +2257,15 @@ packages: requiresBuild: true optional: true + /@resvg/resvg-js-win32-arm64-msvc/2.5.0: + resolution: {integrity: sha512-AsgdH2naTIeFsAyJLNhZ/bHISw4ykXzgk4DIDrt6D9ESkhjskTw5Fz3nyiEvgC/7DAgQFKqYOkCF2ua9y5Wv4g==} + engines: {node: '>= 10'} + cpu: [arm64] + os: [win32] + requiresBuild: true + dev: true + optional: true + /@resvg/resvg-js-win32-ia32-msvc/2.4.1: resolution: {integrity: sha512-odyVFGrEWZIzzJ89KdaFtiYWaIJh9hJRW/frcEcG3agJ464VXkN/2oEVF5ulD+5mpGlug9qJg7htzHcKxDN8sg==} engines: {node: '>= 10'} @@ -2162,6 +2274,15 @@ packages: requiresBuild: true optional: true + /@resvg/resvg-js-win32-ia32-msvc/2.5.0: + resolution: {integrity: sha512-RST2Amt9qJMtLIspfO5VZDKiCtZp9ZZOTlVQkSotcfZ/jw71t5amwvG6N1oCk3jt0OyGXQcUMmZykeHM/ZnOBQ==} + engines: {node: '>= 10'} + cpu: [ia32] + os: [win32] + requiresBuild: true + dev: true + optional: true + /@resvg/resvg-js-win32-x64-msvc/2.4.1: resolution: {integrity: sha512-vY4kTLH2S3bP+puU5x7hlAxHv+ulFgcK6Zn3efKSr0M0KnZ9A3qeAjZteIpkowEFfUeMPNg2dvvoFRJA9zqxSw==} engines: {node: '>= 10'} @@ -2170,6 +2291,15 @@ packages: requiresBuild: true optional: true + /@resvg/resvg-js-win32-x64-msvc/2.5.0: + resolution: {integrity: sha512-oyfZzog1PrfFx7dCI7qeNCvhLyKau/4buqlBFv6O4biZZCFJSRlYNb9t+9oWKFRSVyMjdvqq4yjLwc4hyPMmFQ==} + engines: {node: '>= 10'} + cpu: [x64] + os: [win32] + requiresBuild: true + dev: true + optional: true + /@resvg/resvg-js/2.4.1: resolution: {integrity: sha512-wTOf1zerZX8qYcMmLZw3czR4paI4hXqPjShNwJRh5DeHxvgffUS5KM7XwxtbIheUW6LVYT5fhT2AJiP6mU7U4A==} engines: {node: '>= 10'} @@ -2187,6 +2317,24 @@ packages: '@resvg/resvg-js-win32-ia32-msvc': 2.4.1 '@resvg/resvg-js-win32-x64-msvc': 2.4.1 + /@resvg/resvg-js/2.5.0: + resolution: {integrity: sha512-Um0F9XfKZfhltIrcnScl/h5C31HDIn4MriZkVBa/E7C0cdkH2teLAzWBW/Z0WBIG9oa0U+JjzmpwJlF+UtKr1A==} + engines: {node: '>= 10'} + optionalDependencies: + '@resvg/resvg-js-android-arm-eabi': 2.5.0 + '@resvg/resvg-js-android-arm64': 2.5.0 + '@resvg/resvg-js-darwin-arm64': 2.5.0 + '@resvg/resvg-js-darwin-x64': 2.5.0 + '@resvg/resvg-js-linux-arm-gnueabihf': 2.5.0 + '@resvg/resvg-js-linux-arm64-gnu': 2.5.0 + '@resvg/resvg-js-linux-arm64-musl': 2.5.0 + '@resvg/resvg-js-linux-x64-gnu': 2.5.0 + '@resvg/resvg-js-linux-x64-musl': 2.5.0 + '@resvg/resvg-js-win32-arm64-msvc': 2.5.0 + '@resvg/resvg-js-win32-ia32-msvc': 2.5.0 + '@resvg/resvg-js-win32-x64-msvc': 2.5.0 + dev: true + /@rollup/plugin-alias/5.0.0_rollup@3.20.5: resolution: {integrity: sha512-l9hY5chSCjuFRPsnRm16twWBiSApl2uYFLsepQYwtBuAxNMQ/1dJqADld40P0Jkqm65GRTLy/AC6hnpVebtLsA==} engines: {node: '>=14.0.0'} @@ -3191,6 +3339,10 @@ packages: resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==} dev: true + /abbrev/1.1.1: + resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==} + dev: true + /abs-svg-path/0.1.1: resolution: {integrity: sha512-d8XPSGjfyzlXC3Xx891DJRyZfqk5JU0BJrDQcsWomFIV1/BIzPW5HDH5iDdWpqWaav0YVIEzT1RHTwWr0FFshA==} @@ -3370,10 +3522,22 @@ packages: buffer-equal: 1.0.1 dev: false + /aproba/2.0.0: + resolution: {integrity: sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==} + dev: true + /archy/1.0.0: resolution: {integrity: sha512-Xg+9RwCg/0p32teKdGMPTPnVXKD0w3DfHnFTficozsAgsvq2XenPJq/MYpzzQ/v8zrOyJn6Ds39VA4JIDwFfqw==} dev: false + /are-we-there-yet/2.0.0: + resolution: {integrity: sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==} + engines: {node: '>=10'} + dependencies: + delegates: 1.0.0 + readable-stream: 3.6.2 + dev: true + /arg/4.1.3: resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==} @@ -4021,6 +4185,19 @@ packages: /caniuse-lite/1.0.30001546: resolution: {integrity: sha512-zvtSJwuQFpewSyRrI3AsftF6rM0X80mZkChIt1spBGEvRglCrjTniXvinc8JKRoqTwXAgvqTImaN9igfSMtUBw==} + /canvas/2.11.2: + resolution: {integrity: sha512-ItanGBMrmRV7Py2Z+Xhs7cT+FNt5K0vPL4p9EZ/UX/Mu7hFbkxSjKF2KVtPwX7UYWp7dRKnrTvReflgrItJbdw==} + engines: {node: '>=6'} + requiresBuild: true + dependencies: + '@mapbox/node-pre-gyp': 1.0.11 + nan: 2.17.0 + simple-get: 3.1.1 + transitivePeerDependencies: + - encoding + - supports-color + dev: true + /capture-exit/2.0.0: resolution: {integrity: sha512-PiT/hQmTonHhl/HFGN+Lx3JJUznrVYJ3+AQsnthneZbvW7x+f08Tk7yLJTLEOUvBTbduLeeBkxEaYXUOUrRq6g==} engines: {node: 6.* || 8.* || >= 10.*} @@ -4140,6 +4317,11 @@ packages: fsevents: 2.3.3 dev: true + /chownr/2.0.0: + resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==} + engines: {node: '>=10'} + dev: true + /ci-info/2.0.0: resolution: {integrity: sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==} dev: true @@ -4297,7 +4479,6 @@ packages: /color-support/1.1.3: resolution: {integrity: sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==} hasBin: true - dev: false /color/3.2.1: resolution: {integrity: sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==} @@ -4395,6 +4576,10 @@ packages: dev: true optional: true + /console-control-strings/1.1.0: + resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==} + dev: true + /convert-source-map/1.9.0: resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==} @@ -4734,6 +4919,13 @@ packages: mimic-response: 1.0.1 dev: true + /decompress-response/4.2.1: + resolution: {integrity: sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==} + engines: {node: '>=8'} + dependencies: + mimic-response: 2.1.0 + dev: true + /deep-eql/3.0.1: resolution: {integrity: sha512-+QeIQyN5ZuO+3Uk5DYh6/1eKO0m0YmJFGNmFHGACpf1ClL1nmlV/p4gNgbl2pJGxgXb4faqo6UE+M5ACEMyVcw==} engines: {node: '>=0.12'} @@ -4810,11 +5002,20 @@ packages: resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==} engines: {node: '>=0.4.0'} + /delegates/1.0.0: + resolution: {integrity: sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==} + dev: true + /detect-file/1.0.0: resolution: {integrity: sha512-DtCOLG98P007x7wiiOmfI0fi3eIKyWiLTGJ2MDnVi/E04lWGbf+JzrRHMm0rgIIZJGtHpKpbVgLWHrv8xXpc3Q==} engines: {node: '>=0.10.0'} dev: false + /detect-libc/2.0.2: + resolution: {integrity: sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw==} + engines: {node: '>=8'} + dev: true + /detect-newline/2.1.0: resolution: {integrity: sha512-CwffZFvlJffUg9zZA0uqrjQayUTC8ob94pnr5sFwaVv3IOmkfUHcWH+jXaQK3askE51Cqe8/9Ql/0uXNwqZ8Zg==} engines: {node: '>=0.10.0'} @@ -6006,6 +6207,13 @@ packages: universalify: 0.1.2 dev: true + /fs-minipass/2.1.0: + resolution: {integrity: sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==} + engines: {node: '>= 8'} + dependencies: + minipass: 3.3.6 + dev: true + /fs-mkdirp-stream/1.0.0: resolution: {integrity: sha512-+vSd9frUnapVC2RZYfL3FCB2p3g4TBhaUmrsWlSudsGdnxIuUvBB2QM1VZeBtc49QFwrp+wQLrDs3+xxDgI5gQ==} engines: {node: '>= 0.10'} @@ -6053,6 +6261,21 @@ packages: /functions-have-names/1.2.3: resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==} + /gauge/3.0.2: + resolution: {integrity: sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==} + engines: {node: '>=10'} + dependencies: + aproba: 2.0.0 + color-support: 1.1.3 + console-control-strings: 1.1.0 + has-unicode: 2.0.1 + object-assign: 4.1.1 + signal-exit: 3.0.7 + string-width: 4.2.3 + strip-ansi: 6.0.1 + wide-align: 1.1.5 + dev: true + /generic-names/4.0.0: resolution: {integrity: sha512-ySFolZQfw9FoDb3ed9d80Cm9f0+r7qj+HJkWjeD9RBfpxEVTlVhol+gvaQB/78WbwYfbnNh8nWHHBSlg072y6A==} dependencies: @@ -6501,6 +6724,10 @@ packages: dependencies: has-symbols: 1.0.3 + /has-unicode/2.0.1: + resolution: {integrity: sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==} + dev: true + /has-value/0.3.1: resolution: {integrity: sha512-gpG936j8/MzaeID5Yif+577c17TxaDmhuyVgSwtnL/q8UUTySg8Mecb+8Cf1otgLoD7DDH75axp86ER7LFsf3Q==} engines: {node: '>=0.10.0'} @@ -7198,12 +7425,12 @@ packages: throat: 5.0.0 dev: true - /jest-cli/26.6.3_ts-node@10.9.0: + /jest-cli/26.6.3_xxvpynkn5i4ehycnunrxxsezu4: resolution: {integrity: sha512-GF9noBSa9t08pSyl3CY4frMrqp+aQXFGFkf5hEPbh/pIUFYWMK6ZLTfbmadxJVcJrdRoChlWQsA2VkJcDFK8hg==} engines: {node: '>= 10.14.2'} hasBin: true dependencies: - '@jest/core': 26.6.3_ts-node@10.9.0 + '@jest/core': 26.6.3_xxvpynkn5i4ehycnunrxxsezu4 '@jest/test-result': 26.6.2 '@jest/types': 26.6.2 chalk: 4.1.2 @@ -7211,7 +7438,7 @@ packages: graceful-fs: 4.2.11 import-local: 3.1.0 is-ci: 2.0.0 - jest-config: 26.6.3_ts-node@10.9.0 + jest-config: 26.6.3_xxvpynkn5i4ehycnunrxxsezu4 jest-util: 26.6.2 jest-validate: 26.6.2 prompts: 2.4.2 @@ -7249,7 +7476,7 @@ packages: - supports-color dev: true - /jest-config/26.6.3_ts-node@10.9.0: + /jest-config/26.6.3_xxvpynkn5i4ehycnunrxxsezu4: resolution: {integrity: sha512-t5qdIj/bCj2j7NFVHb2nFB4aUdfucDn3JRKgrZnplb8nieAirAzRSHP8uDEd+qV6ygzg9Pz4YG7UTJf94LPSyg==} engines: {node: '>= 10.14.2'} peerDependencies: @@ -7259,17 +7486,17 @@ packages: optional: true dependencies: '@babel/core': 7.20.12 - '@jest/test-sequencer': 26.6.3_ts-node@10.9.0 + '@jest/test-sequencer': 26.6.3_xxvpynkn5i4ehycnunrxxsezu4 '@jest/types': 26.6.2 babel-jest: 26.6.3_@babel+core@7.20.12 chalk: 4.1.2 deepmerge: 4.3.1 glob: 7.2.3 graceful-fs: 4.2.11 - jest-environment-jsdom: 26.6.2 + jest-environment-jsdom: 26.6.2_canvas@2.11.2 jest-environment-node: 26.6.2 jest-get-type: 26.3.0 - jest-jasmine2: 26.6.3_ts-node@10.9.0 + jest-jasmine2: 26.6.3_xxvpynkn5i4ehycnunrxxsezu4 jest-regex-util: 26.0.0 jest-resolve: 26.6.2 jest-util: 26.6.2 @@ -7346,7 +7573,7 @@ packages: jest: ^24.0.0 dependencies: electron: 11.5.0 - jest: 26.6.3_ts-node@10.9.0 + jest: 26.6.3_xxvpynkn5i4ehycnunrxxsezu4 jest-haste-map: 24.9.0 jest-message-util: 24.9.0 jest-mock: 24.9.0 @@ -7374,7 +7601,7 @@ packages: - supports-color dev: true - /jest-environment-jsdom/26.6.2: + /jest-environment-jsdom/26.6.2_canvas@2.11.2: resolution: {integrity: sha512-jgPqCruTlt3Kwqg5/WVFyHIOJHsiAvhcp2qiR2QQstuG9yWox5+iHpU3ZrcBxW14T4fe5Z68jAfLRh7joCSP2Q==} engines: {node: '>= 10.14.2'} dependencies: @@ -7384,7 +7611,7 @@ packages: '@types/node': 20.8.2 jest-mock: 26.6.2 jest-util: 26.6.2 - jsdom: 16.7.0 + jsdom: 16.7.0_canvas@2.11.2 transitivePeerDependencies: - bufferutil - canvas @@ -7491,7 +7718,7 @@ packages: - supports-color dev: true - /jest-jasmine2/26.6.3_ts-node@10.9.0: + /jest-jasmine2/26.6.3_xxvpynkn5i4ehycnunrxxsezu4: resolution: {integrity: sha512-kPKUrQtc8aYwBV7CqBg5pu+tmYXlvFlSFYn18ev4gPFtrRzB15N2gW/Roew3187q2w2eHuu0MU9TJz6w0/nPEg==} engines: {node: '>= 10.14.2'} dependencies: @@ -7508,7 +7735,7 @@ packages: jest-each: 26.6.2 jest-matcher-utils: 26.6.2 jest-message-util: 26.6.2 - jest-runtime: 26.6.3_ts-node@10.9.0 + jest-runtime: 26.6.3_xxvpynkn5i4ehycnunrxxsezu4 jest-snapshot: 26.6.2 jest-util: 26.6.2 pretty-format: 26.6.2 @@ -7696,7 +7923,7 @@ packages: - supports-color dev: true - /jest-runner/26.6.3_ts-node@10.9.0: + /jest-runner/26.6.3_xxvpynkn5i4ehycnunrxxsezu4: resolution: {integrity: sha512-atgKpRHnaA2OvByG/HpGA4g6CSPS/1LK0jK3gATJAoptC1ojltpmVlYC3TYgdmGp+GLuhzpH30Gvs36szSL2JQ==} engines: {node: '>= 10.14.2'} dependencies: @@ -7709,13 +7936,13 @@ packages: emittery: 0.7.2 exit: 0.1.2 graceful-fs: 4.2.11 - jest-config: 26.6.3_ts-node@10.9.0 + jest-config: 26.6.3_xxvpynkn5i4ehycnunrxxsezu4 jest-docblock: 26.0.0 jest-haste-map: 26.6.2 jest-leak-detector: 26.6.2 jest-message-util: 26.6.2 jest-resolve: 26.6.2 - jest-runtime: 26.6.3_ts-node@10.9.0 + jest-runtime: 26.6.3_xxvpynkn5i4ehycnunrxxsezu4 jest-util: 26.6.2 jest-worker: 26.6.2 source-map-support: 0.5.21 @@ -7760,7 +7987,7 @@ packages: - supports-color dev: true - /jest-runtime/26.6.3_ts-node@10.9.0: + /jest-runtime/26.6.3_xxvpynkn5i4ehycnunrxxsezu4: resolution: {integrity: sha512-lrzyR3N8sacTAMeonbqpnSka1dHNux2uk0qqDXVkMv2c/A3wYnvQ4EXuI013Y6+gSKSCxdaczvf4HF0mVXHRdw==} engines: {node: '>= 10.14.2'} hasBin: true @@ -7780,7 +8007,7 @@ packages: exit: 0.1.2 glob: 7.2.3 graceful-fs: 4.2.11 - jest-config: 26.6.3_ts-node@10.9.0 + jest-config: 26.6.3_xxvpynkn5i4ehycnunrxxsezu4 jest-haste-map: 26.6.2 jest-message-util: 26.6.2 jest-mock: 26.6.2 @@ -7942,14 +8169,14 @@ packages: supports-color: 7.2.0 dev: true - /jest/26.6.3_ts-node@10.9.0: + /jest/26.6.3_xxvpynkn5i4ehycnunrxxsezu4: resolution: {integrity: sha512-lGS5PXGAzR4RF7V5+XObhqz2KZIDUA1yD0DG6pBVmy10eh0ZIXQImRuzocsI/N2XZ1GrLFwTS27In2i2jlpq1Q==} engines: {node: '>= 10.14.2'} hasBin: true dependencies: - '@jest/core': 26.6.3_ts-node@10.9.0 + '@jest/core': 26.6.3_xxvpynkn5i4ehycnunrxxsezu4 import-local: 3.1.0 - jest-cli: 26.6.3_ts-node@10.9.0 + jest-cli: 26.6.3_xxvpynkn5i4ehycnunrxxsezu4 transitivePeerDependencies: - bufferutil - canvas @@ -8015,7 +8242,7 @@ packages: xml-name-validator: 3.0.0 dev: true - /jsdom/16.7.0: + /jsdom/16.7.0_canvas@2.11.2: resolution: {integrity: sha512-u9Smc2G1USStM+s/x1ru5Sxrl6mPYCbByG1U/hUmqaVsm4tbNyS7CicOSRyuGQYZhTu0h84qkZZQ/I+dzizSVw==} engines: {node: '>=10'} peerDependencies: @@ -8027,6 +8254,7 @@ packages: abab: 2.0.6 acorn: 8.10.0 acorn-globals: 6.0.0 + canvas: 2.11.2 cssom: 0.4.4 cssstyle: 2.3.0 data-urls: 2.0.0 @@ -8449,7 +8677,6 @@ packages: engines: {node: '>=8'} dependencies: semver: 6.3.1 - dev: false /make-dir/4.0.0: resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==} @@ -8620,6 +8847,11 @@ packages: engines: {node: '>=4'} dev: true + /mimic-response/2.1.0: + resolution: {integrity: sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==} + engines: {node: '>=8'} + dev: true + /minimatch/3.0.4: resolution: {integrity: sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==} dependencies: @@ -8648,6 +8880,26 @@ packages: resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==} dev: true + /minipass/3.3.6: + resolution: {integrity: sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==} + engines: {node: '>=8'} + dependencies: + yallist: 4.0.0 + dev: true + + /minipass/5.0.0: + resolution: {integrity: sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==} + engines: {node: '>=8'} + dev: true + + /minizlib/2.1.2: + resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==} + engines: {node: '>= 8'} + dependencies: + minipass: 3.3.6 + yallist: 4.0.0 + dev: true + /mixin-deep/1.3.2: resolution: {integrity: sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==} engines: {node: '>=0.10.0'} @@ -8724,7 +8976,6 @@ packages: /nan/2.17.0: resolution: {integrity: sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==} - optional: true /nanoid/3.1.25: resolution: {integrity: sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q==} @@ -8807,6 +9058,14 @@ packages: /node-releases/2.0.13: resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==} + /nopt/5.0.0: + resolution: {integrity: sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==} + engines: {node: '>=6'} + hasBin: true + dependencies: + abbrev: 1.1.1 + dev: true + /normalize-package-data/2.5.0: resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==} dependencies: @@ -8870,6 +9129,15 @@ packages: path-key: 3.1.1 dev: true + /npmlog/5.0.1: + resolution: {integrity: sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==} + dependencies: + are-we-there-yet: 2.0.0 + console-control-strings: 1.1.0 + gauge: 3.0.2 + set-blocking: 2.0.0 + dev: true + /nth-check/2.1.1: resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==} dependencies: @@ -8896,7 +9164,6 @@ packages: /object-assign/4.1.1: resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} engines: {node: '>=0.10.0'} - dev: false /object-copy/0.1.0: resolution: {integrity: sha512-79LYn6VAb63zgtmAteVOWo9Vdj71ZVBy3Pbse+VqxDpEP83XuujMrGqHIwAXJ5I/aM0zU7dIyIAhifVTPrNItQ==} @@ -10700,6 +10967,18 @@ packages: /signal-exit/3.0.7: resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==} + /simple-concat/1.0.1: + resolution: {integrity: sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==} + dev: true + + /simple-get/3.1.1: + resolution: {integrity: sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==} + dependencies: + decompress-response: 4.2.1 + once: 1.4.0 + simple-concat: 1.0.1 + dev: true + /simple-statistics/7.8.3: resolution: {integrity: sha512-JFvMY00t6SBGtwMuJ+nqgsx9ylkMiJ5JlK9bkj8AdvniIe5615wWQYkKHXe84XtSuc40G/tlrPu0A5/NlJvv8A==} @@ -11170,6 +11449,18 @@ packages: engines: {node: '>=6'} dev: true + /tar/6.2.0: + resolution: {integrity: sha512-/Wo7DcT0u5HUV486xg675HtjNd3BXZ6xDbzsCUZPt5iw8bTQ63bP0Raut3mvro9u+CUyq7YQd8Cx55fsZXxqLQ==} + engines: {node: '>=10'} + dependencies: + chownr: 2.0.0 + fs-minipass: 2.1.0 + minipass: 5.0.0 + minizlib: 2.1.2 + mkdirp: 1.0.4 + yallist: 4.0.0 + dev: true + /terminal-link/2.1.1: resolution: {integrity: sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==} engines: {node: '>=8'} @@ -11408,7 +11699,7 @@ packages: bs-logger: 0.2.6 buffer-from: 1.1.2 fast-json-stable-stringify: 2.1.0 - jest: 26.6.3_ts-node@10.9.0 + jest: 26.6.3_xxvpynkn5i4ehycnunrxxsezu4 jest-util: 26.6.2 json5: 2.2.3 lodash: 4.17.21 @@ -12241,6 +12532,12 @@ packages: stackback: 0.0.2 dev: true + /wide-align/1.1.5: + resolution: {integrity: sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==} + dependencies: + string-width: 4.2.3 + dev: true + /word-wrap/1.2.5: resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==} engines: {node: '>=0.10.0'} diff --git a/packages/vtable/.eslintrc.js b/packages/vtable/.eslintrc.js index 599c22ec1..00183723b 100644 --- a/packages/vtable/.eslintrc.js +++ b/packages/vtable/.eslintrc.js @@ -28,7 +28,7 @@ module.exports = { } } ], - ignorePatterns: ['scripts/**', 'bundler.config.js', '*.tsx'], + ignorePatterns: ['scripts/**', 'nodejs/**', 'bundler.config.js', '*.tsx'], rules: { 'prettier/prettier': ['warn'], // 强制使用 Unix 换行符： \n diff --git a/packages/vtable/nodejs/index.ts b/packages/vtable/nodejs/index.ts new file mode 100644 index 000000000..94ff88a6f --- /dev/null +++ b/packages/vtable/nodejs/index.ts @@ -0,0 +1,5 @@ +import { createListTable } from './list-table'; +import { createSmallTable } from './small-table'; + +// createSmallTable(); +createListTable(); diff --git a/packages/vtable/nodejs/list-table.ts b/packages/vtable/nodejs/list-table.ts new file mode 100644 index 000000000..336d9c968 --- /dev/null +++ b/packages/vtable/nodejs/list-table.ts @@ -0,0 +1,98 @@ +/* eslint-disable */ +import fs from 'fs'; +import canvas from 'canvas'; +import * as VTable from '../src/index'; +import { Resvg } from '@resvg/resvg-js'; + +const generatePersons = count => { + return Array.from(new Array(count)).map((_, i) => ({ + id: i + 1, + email1: `${i + 1}@xxx.com`, + name: `小明${i + 1}`, + lastName: '王', + date1: '2022年9月1日', + tel: '000-0000-0000', + sex: i % 2 === 0 ? 'boy' : 'girl', + work: i % 2 === 0 ? 'back-end engineer' : 'front-end engineer', + city: 'beijing' + })); +}; + +export function createListTable() { + const records = generatePersons(20); + const columns: VTable.ColumnsDefine = [ + { + field: 'id', + title: 'ID ff', + width: '1%', + minWidth: 200, + sort: true + }, + { + field: 'email1', + title: 'email', + width: 200, + sort: true + }, + { + title: 'full name', + columns: [ + { + field: 'name', + title: 'First Name', + width: 200 + }, + { + field: 'name', + title: 'Last Name', + width: 200 + } + ] + }, + { + field: 'date1', + title: 'birthday', + width: 200 + }, + { + field: 'sex', + title: 'sex', + width: 100 + }, + { + field: 'tel', + title: 'telephone', + width: 150 + }, + { + field: 'work', + title: 'job', + width: 200 + }, + { + field: 'city', + title: 'city', + width: 150 + } + ]; + const option: VTable.ListTableConstructorOptions = { + records, + columns, + // pixelRatio: 2, + + // for nodejs + mode: 'node', + modeParams: { + createCanvas: canvas.createCanvas, + createImageData: canvas.createImageData, + loadImage: canvas.loadImage, + Resvg: Resvg + }, + canvasWidth: 1000, + canvasHeight: 700 + }; + const tableInstance = new VTable.ListTable(option); + + const buffer = tableInstance.getImageBuffer(); + fs.writeFileSync(`${__dirname}/list-table.png`, buffer); +} diff --git a/packages/vtable/nodejs/small-table.ts b/packages/vtable/nodejs/small-table.ts new file mode 100644 index 000000000..62fdfd307 --- /dev/null +++ b/packages/vtable/nodejs/small-table.ts @@ -0,0 +1,58 @@ +/* eslint-disable */ +import fs from 'fs'; +import canvas from 'canvas'; +import * as VTable from '../src/index'; +import { Resvg } from '@resvg/resvg-js'; + +const generatePersons = count => { + return Array.from(new Array(count)).map((_, i) => ({ + id: i + 1, + email1: `${i + 1}@xxx.com`, + name: `小明${i + 1}`, + lastName: '王', + date1: '2022年9月1日', + tel: '000-0000-0000', + sex: i % 2 === 0 ? 'boy' : 'girl', + work: i % 2 === 0 ? 'back-end engineer' : 'front-end engineer', + city: 'beijing' + })); +}; + +export function createSmallTable() { + const records = generatePersons(3); + const columns: VTable.ColumnsDefine = [ + { + field: 'id', + title: 'ID ff', + width: '1%', + minWidth: 200, + sort: true + }, + { + field: 'email1', + title: 'email', + width: 200, + sort: true + } + ]; + const option: VTable.ListTableConstructorOptions = { + records, + columns, + pixelRatio: 2, + + // for nodejs + mode: 'node', + modeParams: { + createCanvas: canvas.createCanvas, + createImageData: canvas.createImageData, + loadImage: canvas.loadImage, + Resvg: Resvg + }, + canvasWidth: 500, + canvasHeight: 300 + }; + const tableInstance = new VTable.ListTable(option); + + const buffer = tableInstance.getImageBuffer(); + fs.writeFileSync(`${__dirname}/small-table.png`, buffer); +} diff --git a/packages/vtable/package.json b/packages/vtable/package.json index ced564d4f..a06d3e2cd 100644 --- a/packages/vtable/package.json +++ b/packages/vtable/package.json @@ -45,7 +45,8 @@ "test": "jest --silent", "test-cov": "jest --coverage", "ci": "ts-node --transpileOnly --skipProject ./scripts/trigger-test.ts", - "build:es": "bundle --clean -f es --ignorePostTasks" + "build:es": "bundle --clean -f es --ignorePostTasks", + "test-nodejs": "ts-node --transpileOnly --skipProject ./nodejs/index.ts" }, "dependencies": { "@visactor/vrender": "0.16.2", @@ -103,7 +104,9 @@ "d3-array": "3.2.3", "d3-geo": "^3.0.1", "d3-hexbin": "^0.2.2", - "d3-hierarchy": "^3.1.1" + "d3-hierarchy": "^3.1.1", + "canvas": "^2.11.2", + "@resvg/resvg-js": "^2.5.0" }, "unpkg": "latest", "unpkgFiles": [ @@ -112,4 +115,4 @@ "publishConfig": { "access": "public" } -} +} \ No newline at end of file diff --git a/packages/vtable/src/ListTable.ts b/packages/vtable/src/ListTable.ts index e1e8ae82c..a83c9c795 100644 --- a/packages/vtable/src/ListTable.ts +++ b/packages/vtable/src/ListTable.ts @@ -23,6 +23,7 @@ import type { ListTableProtected } from './ts-types/base-table'; import { TABLE_EVENT_TYPE } from './core/TABLE_EVENT_TYPE'; import { Title } from './components/title/title'; import { cloneDeep } from '@visactor/vutils'; +import { Env } from './tools/env'; export class ListTable extends BaseTable implements ListTableAPI { declare internalProps: ListTableProtected; @@ -35,7 +36,10 @@ export class ListTable extends BaseTable implements ListTableAPI { constructor(options: ListTableConstructorOptions); constructor(container: HTMLElement, options: ListTableConstructorOptions); constructor(container?: HTMLElement | ListTableConstructorOptions, options?: ListTableConstructorOptions) { - if (!(container instanceof HTMLElement)) { + if (Env.mode === 'node') { + options = container as ListTableConstructorOptions; + container = null; + } else if (!(container instanceof HTMLElement)) { options = container as ListTableConstructorOptions; if ((container as ListTableConstructorOptions).container) { container = (container as ListTableConstructorOptions).container; diff --git a/packages/vtable/src/components/menu/dom/logic/MenuElementStyle.ts b/packages/vtable/src/components/menu/dom/logic/MenuElementStyle.ts index 5971ab98e..180deb32b 100644 --- a/packages/vtable/src/components/menu/dom/logic/MenuElementStyle.ts +++ b/packages/vtable/src/components/menu/dom/logic/MenuElementStyle.ts @@ -1,4 +1,9 @@ +import { Env } from '../../../../tools/env'; + export function importStyle() { + if (Env.mode === 'node') { + return -1; + } const styleElement = document.createElement('style'); styleElement.id = 'vtable-menu-styleSheet'; styleElement.textContent = ` diff --git a/packages/vtable/src/components/tooltip/logic/BubbleTooltipElementStyle.ts b/packages/vtable/src/components/tooltip/logic/BubbleTooltipElementStyle.ts index 5de9ab156..744557ff1 100644 --- a/packages/vtable/src/components/tooltip/logic/BubbleTooltipElementStyle.ts +++ b/packages/vtable/src/components/tooltip/logic/BubbleTooltipElementStyle.ts @@ -1,4 +1,9 @@ +import { Env } from '../../../tools/env'; + export function importStyle() { + if (Env.mode === 'node') { + return -1; + } const styleElement = document.createElement('style'); styleElement.id = 'vtable-tooltip-styleSheet'; styleElement.textContent = ` diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts index f1b3f1230..22d989f49 100644 --- a/packages/vtable/src/core/BaseTable.ts +++ b/packages/vtable/src/core/BaseTable.ts @@ -134,7 +134,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { */ readonly options: BaseTableConstructorOptions; - version = __VERSION__; + // version = __VERSION__; pagination?: IPagination | undefined; @@ -154,7 +154,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { constructor(container: HTMLElement, options: BaseTableConstructorOptions = {}) { super(); - if (!container) { + if (!container && options.mode !== 'node') { throw new Error("vtable's container is undefined"); } const { @@ -185,7 +185,12 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { customRender, pixelRatio = defaultPixelRatio, renderChartAsync, - renderChartAsyncBatchCount + renderChartAsyncBatchCount, + + mode, + modeParams, + canvasWidth, + canvasHeight } = options; this.container = container; this.options = options; @@ -212,6 +217,8 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { this.tableNoFrameWidth = 0; this.tableNoFrameHeight = 0; + this.canvasWidth = canvasWidth; + this.canvasHeight = canvasHeight; const internalProps = (this.internalProps = {} as IBaseTableProtected); // style.initDocument(scrollBar); @@ -224,16 +231,16 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { //设置是否自动撑开的配置 // internalProps.autoRowHeight = options.autoRowHeight ?? false; - internalProps.handler = new EventHandler(); - internalProps.element = createRootElement(this.padding); - internalProps.focusControl = new FocusInput(this, internalProps.element); + if (Env.mode !== 'node') { + internalProps.element = createRootElement(this.padding); + internalProps.focusControl = new FocusInput(this, internalProps.element); + internalProps.canvas = document.createElement('canvas'); + internalProps.element.appendChild(internalProps.canvas); + internalProps.context = internalProps.canvas.getContext('2d')!; + } + internalProps.handler = new EventHandler(); internalProps.pixelRatio = pixelRatio; - internalProps.canvas = document.createElement('canvas'); - internalProps.element.appendChild(internalProps.canvas); - - internalProps.context = internalProps.canvas.getContext('2d')!; - internalProps.frozenColCount = frozenColCount; internalProps.defaultRowHeight = defaultRowHeight; @@ -249,11 +256,9 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { internalProps.renderChartAsync = renderChartAsync; setBatchRenderChartCount(renderChartAsyncBatchCount); - ///// internalProps._rowHeightsMap = new NumberMap(); internalProps._rowRangeHeightsMap = new Map(); internalProps._colRangeWidthsMap = new Map(); - internalProps._widthResizedColMap = new Set(); this.colWidthsMap = new NumberMap(); @@ -263,6 +268,9 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { internalProps.calcWidthContext = { _: internalProps, get full(): number { + if (Env.mode === 'node') { + return canvasWidth / (pixelRatio ?? 1); + } return this._.canvas.width / ((this._.context as any).pixelRatio ?? window.devicePixelRatio); } // get em(): number { @@ -272,11 +280,8 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { internalProps.cellTextOverflows = {}; internalProps.focusedTable = false; - internalProps.theme = themes.of(options.theme ?? themes.DEFAULT); //原来在listTable文件中 - // internalProps.element.appendChild(internalProps.scrollable.getElement()); - if (container) { //先清空 container.innerHTML = ''; @@ -309,13 +314,6 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { y: this.tableY }); } - // if (options.title) { - // internalProps.title = new Title(options.title, this); - // this.scenegraph.tableGroup.setAttributes({ - // x: this.tableX, - // y: this.tableY - // }); - // } //原有的toolTip提示框处理，主要在文字绘制不全的时候 出来全文本提示信息 需要加个字段设置是否有效 internalProps.tooltip = Object.assign( @@ -3393,4 +3391,34 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { } return base64Image; } + + /** + * 目前仅支持 node 环境，用于 node 端的图片导出 + * @returns + */ + getImageBuffer(type: string = 'image/png') { + if (this.options.mode !== 'node') { + console.error(new TypeError('getImageBuffer() now only support node environment.')); + return; + } + const stage = this.scenegraph.stage; + if (stage) { + const contentWidth = this.tableX + this.getAllColsWidth(); + const contentHeight = this.tableY + this.getAllRowsHeight(); + if (contentWidth >= this.canvasWidth && contentHeight >= this.canvasHeight) { + stage.render(); + const buffer = stage.window.getImageBuffer(type); + return buffer; + } + const newCanvas = this.scenegraph.stage.toCanvas( + false, + new AABBBounds().set(0, 0, Math.min(this.canvasWidth, contentWidth), Math.min(this.canvasHeight, contentHeight)) + ); + const buffer = (newCanvas as any).toBuffer(type); + return buffer; + } + console.error(new ReferenceError(`stage is not defined`)); + + return null; + } } diff --git a/packages/vtable/src/core/style.ts b/packages/vtable/src/core/style.ts index 08daed7a6..829337360 100644 --- a/packages/vtable/src/core/style.ts +++ b/packages/vtable/src/core/style.ts @@ -1,4 +1,9 @@ +import { Env } from '../tools/env'; + export function importStyle() { + if (Env.mode === 'node') { + return -1; + } const styleElement = document.createElement('style'); styleElement.id = 'vtable-style-styleSheet'; styleElement.textContent = ` diff --git a/packages/vtable/src/event/event.ts b/packages/vtable/src/event/event.ts index eeec5fc8f..9bd332a16 100644 --- a/packages/vtable/src/event/event.ts +++ b/packages/vtable/src/event/event.ts @@ -21,6 +21,7 @@ import { getCellEventArgsSet, type SceneEvent } from './util'; import { bindAxisClickEvent } from './pivot-chart/axis-click'; import { bindAxisHoverEvent } from './pivot-chart/axis-hover'; import type { PivotTable } from '../PivotTable'; +import { Env } from '../tools/env'; export class EventManeger { table: BaseTableAPI; @@ -38,6 +39,9 @@ export class EventManeger { touchMove: boolean; // is touch listener working, use to disable document touch scrolling function constructor(table: BaseTableAPI) { this.table = table; + if (Env.mode === 'node') { + return; + } this.bindOuterEvent(); setTimeout(() => { this.bindSelfEvent(); diff --git a/packages/vtable/src/index.ts b/packages/vtable/src/index.ts index 13ad16eff..2604b7995 100644 --- a/packages/vtable/src/index.ts +++ b/packages/vtable/src/index.ts @@ -36,7 +36,7 @@ import * as CustomLayout from './render/layout'; export { getDataCellPath } from './tools/get-data-path'; export * from './render/jsx'; -export const version = __VERSION__; +// export const version = __VERSION__; /** * @namespace VTable */ diff --git a/packages/vtable/src/scenegraph/scenegraph.ts b/packages/vtable/src/scenegraph/scenegraph.ts index a1ddfe4f7..f10d99757 100644 --- a/packages/vtable/src/scenegraph/scenegraph.ts +++ b/packages/vtable/src/scenegraph/scenegraph.ts @@ -43,6 +43,7 @@ import { updateContainerChildrenX } from './utils/update-container'; import { loadPoptip, setPoptipTheme } from '@visactor/vrender-components'; import textMeasureModule from './utils/text-measure'; import renderServiceModule from './utils/render-service'; +import { Env } from '../tools/env'; // import { contextModule } from './context/module'; // VChart poptip theme @@ -133,11 +134,21 @@ export class Scenegraph { this.mergeMap = new Map(); setPoptipTheme(poptipStyle as any); - vglobal.setEnv('browser'); + let width; + let height; + if (Env.mode === 'node') { + vglobal.setEnv('node', table.options.modeParams); + width = table.canvasWidth; + height = table.canvasHeight; + } else { + vglobal.setEnv('browser'); + width = table.canvas.width; + height = table.canvas.height; + } this.stage = createStage({ canvas: table.canvas, - width: table.canvas.width, - height: table.canvas.height, + width, + height, disableDirtyBounds: false, background: table.theme.underlayBackgroundColor, dpr: table.internalProps.pixelRatio, diff --git a/packages/vtable/src/ts-types/base-table.ts b/packages/vtable/src/ts-types/base-table.ts index 8afc32646..26bd98462 100644 --- a/packages/vtable/src/ts-types/base-table.ts +++ b/packages/vtable/src/ts-types/base-table.ts @@ -324,6 +324,12 @@ export interface BaseTableConstructorOptions { renderChartAsync?: boolean; // 开启图表异步渲染 每批次渐进渲染图表个数 renderChartAsyncBatchCount?: number; + + // for nodejs + mode?: 'node' | 'broswer'; + modeParams?: any; + canvasWidth?: number; + canvasHeight?: number; } export interface BaseTableAPI { /** 表格的行数 */ @@ -415,6 +421,10 @@ export interface BaseTableAPI { rowHeaderLevelCount: number; /** 列表头的层数 */ columnHeaderLevelCount: number; + + canvasWidth?: number; + canvasHeight?: number; + /** 获取表格绘制的范围 不包括frame的宽度 */ getDrawRange: () => Rect; /** 将鼠标坐标值 转换成表格坐标系中的坐标位置 */ From 608f3b0434f62f11d551fa3383f0c96a0ae6e199 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Tue, 17 Oct 2023 16:18:59 +0800 Subject: [PATCH 07/48] feat: add pivot table nodejs env support --- packages/vtable/nodejs/index.ts | 4 +- packages/vtable/nodejs/pivot-table.ts | 503 ++++++++++++++++++++++++++ packages/vtable/src/PivotTable.ts | 6 +- 3 files changed, 511 insertions(+), 2 deletions(-) create mode 100644 packages/vtable/nodejs/pivot-table.ts diff --git a/packages/vtable/nodejs/index.ts b/packages/vtable/nodejs/index.ts index 94ff88a6f..3c733cdc1 100644 --- a/packages/vtable/nodejs/index.ts +++ b/packages/vtable/nodejs/index.ts @@ -1,5 +1,7 @@ import { createListTable } from './list-table'; +import { createPivotTable } from './pivot-table'; import { createSmallTable } from './small-table'; // createSmallTable(); -createListTable(); +// createListTable(); +createPivotTable(); diff --git a/packages/vtable/nodejs/pivot-table.ts b/packages/vtable/nodejs/pivot-table.ts new file mode 100644 index 000000000..306f35dca --- /dev/null +++ b/packages/vtable/nodejs/pivot-table.ts @@ -0,0 +1,503 @@ +/* eslint-disable */ +import fs from 'fs'; +import canvas from 'canvas'; +import * as VTable from '../src/index'; +import { Resvg } from '@resvg/resvg-js'; + +function generatePivotDataSource(num, colCount) { + const array = new Array(num); + for (let i = 0; i < num; i++) { + const data = new Array(colCount); + for (let j = 0; j < colCount; j++) { + data[j] = i + j; + } + array[i] = data; + } + return array; +} +const DEFAULT_BAR_COLOR = data => { + const num = (data.percentile ?? 0) * 100; + if (num > 80) { + return '#20a8d8'; + } + if (num > 50) { + return '#4dbd74'; + } + if (num > 20) { + return '#ffc107'; + } + return '#f86c6b'; +}; + +export function createPivotTable() { + const records = generatePivotDataSource(19, 18); + const theme: VTable.TYPES.ITableThemeDefine = { + underlayBackgroundColor: '#F6F6F6', + defaultStyle: { + borderColor: '#000', + color: '#000', + bgColor: '#F6F6F6' + }, + headerStyle: { + bgColor: '#F5F6FA', + frameStyle: { + borderColor: '#00ffff', + borderLineWidth: 2 + } + }, + selectionStyle: { + cellBgColor: 'rgba(130,178,245, 0.2)', + cellBorderColor: '#003fff', + cellBorderLineWidth: 2 + }, + rowHeaderStyle: { + bgColor: '#F3F8FF', + frameStyle: { + borderColor: '#ff00ff', + borderLineWidth: 2 + } + }, + cornerHeaderStyle: { + bgColor: '#CCE0FF', + fontSize: 20, + fontFamily: 'sans-serif', + frameStyle: { + borderColor: '#00ff00', + borderLineWidth: 2 + } + }, + bodyStyle: { + hover: { + cellBgColor: '#CCE0FF', + inlineRowBgColor: '#F3F8FF', + inlineColumnBgColor: '#F3F8FF' + }, + frameStyle: { + borderColor: '#ffff00', + borderLineWidth: 5 + } + }, + frameStyle: { + borderColor: '#000', + borderLineWidth: 1, + borderLineDash: [] + }, + columnResize: { + lineWidth: 1, + lineColor: '#416EFF', + bgColor: '#D9E2FF', + width: 3 + }, + frozenColumnLine: { + shadow: { + width: 24, + startColor: 'rgba(00, 24, 47, 0.06)', + endColor: 'rgba(00, 24, 47, 0)' + } + } + // menuStyle: { + // color: '#000', + // highlightColor: '#2E68CF', + // font: '12px sans-serif', + // highlightFont: '12px sans-serif', + // hoverBgColor: '#EEE' + // } + }; + const option: VTable.PivotTableConstructorOptions = { + columnHeaderTitle: { + title: true, + headerStyle: { + textStick: true + } + }, + columns: [ + { + dimensionKey: '地区', + title: '地区', + headerFormat(value) { + return `${value}地区`; + }, + description(args) { + return args.value; + }, + cornerDescription: '地区维度', + headerStyle: { + textAlign: 'center', + borderColor: 'blue', + color: 'pink', + textStick: true, + bgColor(arg) { + if (arg.cellHeaderPaths.colHeaderPaths && arg.cellHeaderPaths.colHeaderPaths[0].value === '东北') { + return '#bd422a'; + } + if (arg.cellHeaderPaths.colHeaderPaths && arg.cellHeaderPaths.colHeaderPaths[0].value === '华北') { + return '#ff9900'; + } + return 'gray'; + } + }, + // 指标菜单 + dropDownMenu: ['升序排序I', '降序排序I', '冻结列I'], + // corner菜单 + cornerDropDownMenu: ['升序排序C', '降序排序C', '冻结列C'], + drillDown: true + }, + { + dimensionKey: '邮寄方式', + title: '邮寄方式11', + headerFormat(value) { + return `${value}邮寄方式`; + }, + headerStyle: { + textAlign: 'left', + borderColor: 'blue', + color: 'pink', + // lineHeight: '2em', + fontSize: 16, + fontStyle: 'bold', + fontFamily: 'sans-serif', + underline: true, + textStick: true, + bgColor(arg) { + if (arg.cellHeaderPaths.colHeaderPaths && arg.cellHeaderPaths.colHeaderPaths[0].value === '东北') { + return '#bd422a'; + } + if (arg.cellHeaderPaths.colHeaderPaths && arg.cellHeaderPaths.colHeaderPaths[0].value === '华北') { + return '#ff9900'; + } + return 'gray'; + } + }, + drillUp: false + } + ], + rows: [ + { + dimensionKey: '类别', + title: '类别', + drillUp: true, + width: 'auto', + headerStyle: { + textAlign: 'center', + borderColor: 'blue', + color: 'purple', + textBaseline: 'top', + textStick: true, + bgColor: '#6cd26f' + } + }, + { + dimensionKey: '子类别', + title: '子类别', + headerStyle: { + textAlign: 'center', + color: 'blue', + bgColor: '#45b89f' + }, + width: 'auto', + dropDownMenu: ['升序排序I', '降序排序I', '冻结列I'] + // headerType: 'MULTILINETEXT', + } + ], + indicators: [ + { + indicatorKey: '1', + title: '销售额', + format(rec) { + return `${rec.dataValue}%`; + }, + headerStyle: { + color: 'red', + bgColor(arg) { + if (arg.cellHeaderPaths.colHeaderPaths && arg.cellHeaderPaths.colHeaderPaths[0].value === '东北') { + return '#bd422a'; + } + if (arg.cellHeaderPaths.colHeaderPaths && arg.cellHeaderPaths.colHeaderPaths[0].value === '华北') { + return '#ff9900'; + } + return 'gray'; + } + }, + style: { + barHeight: '100%', + // barBgColor: '#aaa', + // barColor: '#444', + barBgColor: data => { + return `rgb(${100 + 100 * (1 - (data.percentile ?? 0))},${100 + 100 * (1 - (data.percentile ?? 0))},${ + 255 * (1 - (data.percentile ?? 0)) + })`; + }, + barColor: 'transparent' + }, + cellType: 'progressbar', + showSort: true + // headerType: 'MULTILINETEXT', + }, + { + indicatorKey: '2', + title: '利润', + format(rec) { + // if (rec.rowDimensions[0].value === '东北') return `${rec.dataValue}%`; + return rec.dataValue; + }, + cellType: 'progressbar', + style: { + barHeight: '50%', + barBottom: 20, + barColor: DEFAULT_BAR_COLOR + }, + showSort: true, + dropDownMenu: ['利润升序排序I', '利润降序排序I', '利润冻结列I'] + } + ], + columnTree: [ + { + dimensionKey: '地区', + value: '东北', + children: [ + { + dimensionKey: '邮寄方式', + value: '一级', + children: [ + { + // dimensionKey: '指标名称', + indicatorKey: '1', + value: '销售额' + }, + { + // dimensionKey: '指标名称', + indicatorKey: '2', + value: '利润' + } + ] + }, + { + dimensionKey: '邮寄方式', + value: '二级', + children: [ + { + // dimensionKey: '指标名称', + indicatorKey: '1', + value: '销售额' + }, + { + // dimensionKey: '指标名称', + indicatorKey: '2', + value: '利润' + } + ] + }, + { + dimensionKey: '邮寄方式', + value: '三级', + children: [ + { + // dimensionKey: '指标名称', + indicatorKey: '1', + value: '销售额' + }, + { + // dimensionKey: '指标名称', + indicatorKey: '2', + value: '利润' + } + ] + } + ] + }, + { + dimensionKey: '地区', + value: '华北', + children: [ + { + dimensionKey: '邮寄方式', + value: '一级', + children: [ + { + indicatorKey: '1', + value: '销售额' + }, + { + indicatorKey: '2', + value: '利润' + } + ] + }, + { + dimensionKey: '邮寄方式', + value: '二级', + children: [ + { + indicatorKey: '1', + value: '销售额' + }, + { + indicatorKey: '2', + value: '利润' + } + ] + }, + { + dimensionKey: '邮寄方式', + value: '三级', + children: [ + { + // dimensionKey: '指标名称', + indicatorKey: '1', + value: '销售额' + }, + { + // dimensionKey: '指标名称', + indicatorKey: '2', + value: '利润' + } + ] + } + ] + }, + { + dimensionKey: '地区', + value: '中南', + children: [ + { + dimensionKey: '邮寄方式', + value: '一级', + children: [ + { + // dimensionKey: '指标名称', + indicatorKey: '1', + value: '销售额' + }, + { + // dimensionKey: '指标名称', + indicatorKey: '2', + value: '利润' + } + ] + }, + { + dimensionKey: '邮寄方式', + value: '二级', + children: [ + { + // dimensionKey: '指标名称', + indicatorKey: '1', + value: '销售额' + }, + { + // dimensionKey: '指标名称', + indicatorKey: '2', + value: '利润' + } + ] + }, + { + dimensionKey: '邮寄方式', + value: '三级', + children: [ + { + // dimensionKey: '指标名称', + indicatorKey: '1', + value: '销售额' + }, + { + // dimensionKey: '指标名称', + indicatorKey: '2', + value: '利润' + } + ] + } + ] + } + ], + rowTree: [ + { + dimensionKey: '类别', + value: '办公用品', + children: [ + { dimensionKey: '子类别', value: '电脑' }, + { dimensionKey: '子类别', value: '装订机' }, + { dimensionKey: '子类别', value: '签字笔' }, + { dimensionKey: '子类别', value: '标签' }, + { dimensionKey: '子类别', value: '收纳柜' }, + { dimensionKey: '子类别', value: '纸张' }, + { dimensionKey: '子类别', value: '电灯' } + ] + }, + { + dimensionKey: '类别', + value: '家具', + children: [ + { dimensionKey: '子类别', value: '衣柜' }, + { dimensionKey: '子类别', value: '沙发' }, + { dimensionKey: '子类别', value: '餐桌' }, + { dimensionKey: '子类别', value: '椅子' }, + { dimensionKey: '子类别', value: '桌子' } + ] + }, + { + dimensionKey: '类别', + value: '餐饮', + children: [ + { dimensionKey: '子类别', value: '锅具' }, + { + dimensionKey: '子类别', + value: '油盐酱醋' + }, + { dimensionKey: '子类别', value: '米面' } + ] + }, + { + dimensionKey: '类别', + value: '技术', + children: [ + { dimensionKey: '子类别', value: '设备' }, + { dimensionKey: '子类别', value: '配件' }, + { dimensionKey: '子类别', value: '电话' }, + { dimensionKey: '子类别', value: '复印机' } + ] + } + ], + corner: { + titleOnDimension: 'column', + headerStyle: { + textAlign: 'center', + borderColor: 'red', + color: 'yellow', + underline: true, + fontSize: 16, + fontStyle: 'bold', + fontFamily: 'sans-serif' + // lineHeight: '20px' + } + }, + indicatorTitle: '指标名称', + // indicatorsAsCol: false, + records, + theme, + showFrozenIcon: false, //显示VTable内置冻结列图标 + allowFrozenColCount: 2, + widthMode: 'autoWidth', // 宽度模式：standard 标准模式； adaptive 自动填满容器 + defaultRowHeight: 80, + columnResizeType: 'indicator', // 'column' | 'indicator' | 'all' + tooltip: { + isShowOverflowTextTooltip: true + }, + + // for nodejs + mode: 'node', + modeParams: { + createCanvas: canvas.createCanvas, + createImageData: canvas.createImageData, + loadImage: canvas.loadImage, + Resvg: Resvg + }, + canvasWidth: 1000, + canvasHeight: 700 + }; + + const tableInstance = new VTable.PivotTable(option); + + const buffer = tableInstance.getImageBuffer(); + fs.writeFileSync(`${__dirname}/pivot-table.png`, buffer); +} diff --git a/packages/vtable/src/PivotTable.ts b/packages/vtable/src/PivotTable.ts index bcea5b58c..25daac59c 100644 --- a/packages/vtable/src/PivotTable.ts +++ b/packages/vtable/src/PivotTable.ts @@ -27,6 +27,7 @@ import { BaseTable } from './core/BaseTable'; import type { PivotTableProtected } from './ts-types/base-table'; import { Title } from './components/title/title'; import { cloneDeep } from '@visactor/vutils'; +import { Env } from './tools/env'; export class PivotTable extends BaseTable implements PivotTableAPI { declare internalProps: PivotTableProtected; @@ -40,7 +41,10 @@ export class PivotTable extends BaseTable implements PivotTableAPI { constructor(options: PivotTableConstructorOptions); constructor(container: HTMLElement, options: PivotTableConstructorOptions); constructor(container?: HTMLElement | PivotTableConstructorOptions, options?: PivotTableConstructorOptions) { - if (!(container instanceof HTMLElement)) { + if (Env.mode === 'node') { + options = container as PivotTableConstructorOptions; + container = null; + } else if (!(container instanceof HTMLElement)) { options = container as PivotTableConstructorOptions; if ((container as PivotTableConstructorOptions).container) { container = (container as PivotTableConstructorOptions).container; From f483ed29a288255af202015c35748e1adda39cbc Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Tue, 17 Oct 2023 17:16:04 +0800 Subject: [PATCH 08/48] feat: add pivot chart nodejs env support --- packages/vtable/nodejs/index.ts | 4 +- packages/vtable/nodejs/pivot-chart.ts | 2351 +++++++++++++++++ packages/vtable/src/PivotChart.ts | 6 +- .../vtable/src/scenegraph/graphic/chart.ts | 5 +- .../group-creater/cell-type/chart-cell.ts | 2 + 5 files changed, 2365 insertions(+), 3 deletions(-) create mode 100644 packages/vtable/nodejs/pivot-chart.ts diff --git a/packages/vtable/nodejs/index.ts b/packages/vtable/nodejs/index.ts index 3c733cdc1..a114ab4e5 100644 --- a/packages/vtable/nodejs/index.ts +++ b/packages/vtable/nodejs/index.ts @@ -1,7 +1,9 @@ import { createListTable } from './list-table'; +import { createPivotChart } from './pivot-chart'; import { createPivotTable } from './pivot-table'; import { createSmallTable } from './small-table'; // createSmallTable(); // createListTable(); -createPivotTable(); +// createPivotTable(); +createPivotChart(); diff --git a/packages/vtable/nodejs/pivot-chart.ts b/packages/vtable/nodejs/pivot-chart.ts new file mode 100644 index 000000000..8a6b5f975 --- /dev/null +++ b/packages/vtable/nodejs/pivot-chart.ts @@ -0,0 +1,2351 @@ +/* eslint-disable */ +import fs from 'fs'; +import canvas from 'canvas'; +import * as VTable from '../src/index'; +import VChart from '@visactor/vchart'; +import { Resvg } from '@resvg/resvg-js'; + +VTable.register.chartModule('vchart', VChart); + +export function createPivotChart() { + const option: VTable.TYPES.PivotChartConstructorOptions = { + widthMode: 'adaptive', + heightMode: 'adaptive', + columnTree: [], + rowTree: [ + { + dimensionKey: '231010205143009', + value: '一级', + children: [ + { + dimensionKey: '231010171607024', + value: '公司' + }, + { + dimensionKey: '231010171607024', + value: '小型企业' + }, + { + dimensionKey: '231010171607024', + value: '消费者' + } + ] + }, + { + dimensionKey: '231010205143009', + value: '二级', + children: [ + { + dimensionKey: '231010171607024', + value: '公司' + }, + { + dimensionKey: '231010171607024', + value: '小型企业' + }, + { + dimensionKey: '231010171607024', + value: '消费者' + } + ] + }, + { + dimensionKey: '231010205143009', + value: '当日', + children: [ + { + dimensionKey: '231010171607024', + value: '公司' + }, + { + dimensionKey: '231010171607024', + value: '小型企业' + }, + { + dimensionKey: '231010171607024', + value: '消费者' + } + ] + }, + { + dimensionKey: '231010205143009', + value: '标准级', + children: [ + { + dimensionKey: '231010171607024', + value: '公司' + }, + { + dimensionKey: '231010171607024', + value: '小型企业' + }, + { + dimensionKey: '231010171607024', + value: '消费者' + } + ] + } + ], + columns: [], + rows: [ + { + dimensionKey: '231010205143009', + title: '邮寄方式' + }, + { + dimensionKey: '231010171607024', + title: '细分' + } + ], + 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' + } + }, + sampling: false, + zIndex: 200, + label: { + visible: true, + space: 8, + style: { + fontSize: 12, + fill: '#6F6F6F', + angle: 0, + fontWeight: 'normal', + direction: 'horizontal' + }, + autoHide: true, + autoHideMethod: 'greedy', + flush: 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] + } + ], + indicators: [ + { + indicatorKey: '0', + width: 'auto', + title: '', + cellType: 'chart', + chartModule: 'vchart', + chartSpec: { + type: 'common', + axes: [ + { + id: 'main-0', + type: 'linear', + tick: { + visible: false, + tickMode: 'd3', + 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: true, + text: '利润', + space: 8, + style: { + fontSize: 12, + fill: '#363839', + fontWeight: 'normal' + } + }, + sampling: false, + label: { + visible: true, + space: 4, + flush: true, + padding: 0, + style: { + fontSize: 12, + maxLineWidth: 174, + fill: '#6F6F6F', + angle: 0, + fontWeight: 'normal', + dy: -1, + direction: 'horizontal' + }, + autoHide: true, + autoHideMethod: 'greedy' + }, + hover: false, + background: { + visible: true, + state: { + hover: { + fillOpacity: 0.08, + fill: '#141414' + }, + hover_reverse: { + fillOpacity: 0.08, + fill: '#141414' + } + } + }, + zero: true, + sync: { + axisId: 'sub-0', + zeroAlign: true, + tickAlign: false + } + }, + { + id: 'sub-0', + type: 'linear', + tick: { + visible: false, + tickMode: 'd3', + style: { + stroke: 'rgba(255, 255, 255, 0)' + } + }, + niceType: 'accurateFirst', + zIndex: 200, + grid: { + visible: false, + style: { + zIndex: 150, + stroke: '#DADCDD', + lineWidth: 1, + lineDash: [4, 2] + } + }, + orient: 'top', + visible: true, + domainLine: { + visible: true, + style: { + lineWidth: 1, + stroke: 'rgba(255, 255, 255, 0)' + } + }, + title: { + visible: true, + text: '利润', + space: 8, + style: { + fontSize: 12, + fill: '#363839', + fontWeight: 'normal' + } + }, + sampling: false, + label: { + visible: true, + space: 4, + flush: true, + padding: 0, + style: { + fontSize: 12, + maxLineWidth: 174, + fill: '#6F6F6F', + angle: 0, + fontWeight: 'normal', + dy: -1, + direction: 'horizontal' + }, + autoHide: true, + autoHideMethod: 'greedy' + }, + hover: false, + background: { + visible: true, + state: { + hover: { + fillOpacity: 0.08, + fill: '#141414' + }, + hover_reverse: { + fillOpacity: 0.08, + fill: '#141414' + } + } + }, + zero: true, + nice: true + } + ], + stackInverse: false, + series: [ + { + type: 'bar', + yField: ['231010112314020', '10001'], + xField: '10011', + seriesField: '20001', + direction: 'horizontal', + data: { + id: 'main-data', + fields: { + '10001': { + alias: '指标名称 ' + }, + '10011': { + alias: '指标值(主轴) ' + }, + '10012': { + alias: '指标值(次轴) ' + }, + '20001': { + alias: '图例项 ', + domain: ['利润'], + sortIndex: 0, + lockStatisticsByDomain: true + }, + '231010112314020': { + alias: '地区', + domain: ['中南', '华东', '华北', '地区-dongbei', '西北', '西南'], + sortIndex: 0, + lockStatisticsByDomain: true + }, + '231010171607024': { + alias: '细分' + }, + '231010190513015': { + alias: '利润' + }, + '231010205143009': { + alias: '邮寄方式' + }, + '231010205143014': { + alias: '利润' + } + } + }, + stackInverse: false, + line: { + style: { + curveType: { + type: 'ordinal', + field: '20001', + range: ['linear'], + domain: ['利润'] + }, + lineWidth: { + type: 'ordinal', + field: '20001', + range: [3], + domain: ['利润'] + }, + lineDash: { + type: 'ordinal', + field: '20001', + range: [[0, 0]], + domain: ['利润'] + } + } + }, + area: { + style: { + curveType: { + type: 'ordinal', + field: '20001', + range: ['linear'], + domain: ['利润'] + } + } + }, + point: { + style: { + shape: { + type: 'ordinal', + field: '20001', + range: ['circle'], + domain: ['利润'] + }, + size: { + type: 'ordinal', + field: '20001', + range: [7.0898154036220635], + domain: ['利润'] + }, + strokeOpacity: { + type: 'ordinal', + field: '20001', + range: [1], + domain: ['利润'] + }, + fillOpacity: { + type: 'ordinal', + field: '20001', + range: [1], + domain: ['利润'] + } + }, + state: { + hover: { + lineWidth: 2, + fillOpacity: 1, + strokeOpacity: 1, + scaleX: 1.5, + scaleY: 1.5 + } + } + }, + invalidType: 'break', + 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, + strokeWidth: 0.3 + } + } + }, + label: { + visible: false, + overlap: { + hideOnHit: true, + avoidBaseMark: false, + strategy: [ + { + type: 'moveY', + offset: [ + -20, -19, -18, -17, -16, -15, -14, -13, -12, -11, -10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, + 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 + ] + }, + { + type: 'moveX', + offset: [ + -20, -19, -18, -17, -16, -15, -14, -13, -12, -11, -10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, + 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 + ] + } + ], + clampForce: true + }, + style: { + fontSize: 12, + fontWeight: 'normal', + zIndex: 400, + fill: '#363839', + stroke: 'rgba(255, 255, 255, 0.8)', + lineWidth: 2, + strokeOpacity: 1 + }, + position: 'outside', + smartInvert: false + } + }, + { + type: 'line', + yField: ['231010112314020', '10001'], + xField: '10012', + seriesField: '20001', + direction: 'horizontal', + data: { + sortIndex: 0, + id: 'sub-data', + fields: { + '10001': { + alias: '指标名称 ' + }, + '10011': { + alias: '指标值(主轴) ' + }, + '10012': { + alias: '指标值(次轴) ' + }, + '20001': { + alias: '图例项 ', + domain: ['利润'], + sortIndex: 0, + lockStatisticsByDomain: true + }, + '231010112314020': { + alias: '地区', + domain: ['中南', '华东', '华北', '地区-dongbei', '西北', '西南'], + sortIndex: 0, + lockStatisticsByDomain: true + }, + '231010171607024': { + alias: '细分' + }, + '231010190513015': { + alias: '利润' + }, + '231010205143009': { + alias: '邮寄方式' + }, + '231010205143014': { + alias: '利润' + } + } + }, + stackInverse: false, + line: { + style: { + curveType: { + type: 'ordinal', + field: '20001', + range: ['linear'], + domain: ['利润'] + }, + lineWidth: { + type: 'ordinal', + field: '20001', + range: [3], + domain: ['利润'] + }, + lineDash: { + type: 'ordinal', + field: '20001', + range: [[0, 0]], + domain: ['利润'] + } + } + }, + area: { + style: { + curveType: { + type: 'ordinal', + field: '20001', + range: ['linear'], + domain: ['利润'] + } + } + }, + point: { + style: { + shape: { + type: 'ordinal', + field: '20001', + range: ['circle'], + domain: ['利润'] + }, + size: { + type: 'ordinal', + field: '20001', + range: [7.0898154036220635], + domain: ['利润'] + }, + strokeOpacity: { + type: 'ordinal', + field: '20001', + range: [1], + domain: ['利润'] + }, + fillOpacity: { + type: 'ordinal', + field: '20001', + range: [1], + domain: ['利润'] + } + }, + state: { + hover: { + lineWidth: 2, + fillOpacity: 1, + strokeOpacity: 1, + scaleX: 1.5, + scaleY: 1.5 + } + } + }, + invalidType: 'break', + 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, + strokeWidth: 0.3 + } + } + }, + label: { + visible: false, + overlap: { + hideOnHit: true, + avoidBaseMark: false, + strategy: [ + { + type: 'moveY', + offset: [ + -20, -19, -18, -17, -16, -15, -14, -13, -12, -11, -10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, + 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 + ] + }, + { + type: 'moveX', + offset: [ + -20, -19, -18, -17, -16, -15, -14, -13, -12, -11, -10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, + 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 + ] + } + ], + clampForce: true + }, + style: { + fontSize: 12, + fontWeight: 'normal', + zIndex: 400, + fill: '#363839', + stroke: 'rgba(255, 255, 255, 0.8)', + lineWidth: 2, + strokeOpacity: 1 + }, + position: 'outside', + smartInvert: false + } + } + ], + tooltip: { + handler: {} + }, + seriesField: '20001', + color: { + field: '20001', + type: 'ordinal', + range: ['#2E62F1'], + specified: {}, + domain: ['利润'] + }, + crosshair: { + yField: { + visible: true + }, + gridZIndex: 100 + } + } + } + ], + indicatorsAsCol: true, + records: { + '0': [ + { + '10001': '利润', + '10003': '231010190513015', + '10011': '29552.69842272997', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '公司', + '231010190513015': '29552.69842272997', + '231010205143009': '一级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '14869.259436711669', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '公司', + '231010190513015': '14869.259436711669', + '231010205143009': '一级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '13720.042139291763', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '公司', + '231010190513015': '13720.042139291763', + '231010205143009': '一级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '10807.019856154919', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '公司', + '231010190513015': '10807.019856154919', + '231010205143009': '一级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '1502.228010892868', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '公司', + '231010190513015': '1502.228010892868', + '231010205143009': '一级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '-10060.35078561306', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '公司', + '231010190513015': '-10060.35078561306', + '231010205143009': '一级' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '29552.69842272997', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '公司', + '231010205143009': '一级', + '231010205143014': '29552.69842272997' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '14869.259436711669', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '公司', + '231010205143009': '一级', + '231010205143014': '14869.259436711669' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '13720.042139291763', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '公司', + '231010205143009': '一级', + '231010205143014': '13720.042139291763' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '10807.019856154919', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '公司', + '231010205143009': '一级', + '231010205143014': '10807.019856154919' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '1502.228010892868', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '公司', + '231010205143009': '一级', + '231010205143014': '1502.228010892868' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '-10060.35078561306', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '公司', + '231010205143009': '一级', + '231010205143014': '-10060.35078561306' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '21340.899931192398', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '小型企业', + '231010190513015': '21340.899931192398', + '231010205143009': '一级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '15056.691901683807', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '小型企业', + '231010190513015': '15056.691901683807', + '231010205143009': '一级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '5877.844171881676', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '小型企业', + '231010190513015': '5877.844171881676', + '231010205143009': '一级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '5169.304051876068', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '小型企业', + '231010190513015': '5169.304051876068', + '231010205143009': '一级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '2820.3279762268066', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '小型企业', + '231010190513015': '2820.3279762268066', + '231010205143009': '一级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '1471.259955406189', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '小型企业', + '231010190513015': '1471.259955406189', + '231010205143009': '一级' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '21340.899931192398', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '小型企业', + '231010205143009': '一级', + '231010205143014': '21340.899931192398' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '15056.691901683807', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '小型企业', + '231010205143009': '一级', + '231010205143014': '15056.691901683807' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '5877.844171881676', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '小型企业', + '231010205143009': '一级', + '231010205143014': '5877.844171881676' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '5169.304051876068', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '小型企业', + '231010205143009': '一级', + '231010205143014': '5169.304051876068' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '2820.3279762268066', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '小型企业', + '231010205143009': '一级', + '231010205143014': '2820.3279762268066' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '1471.259955406189', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '小型企业', + '231010205143009': '一级', + '231010205143014': '1471.259955406189' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '64387.98809123039', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '消费者', + '231010190513015': '64387.98809123039', + '231010205143009': '一级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '48468.23799917102', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '消费者', + '231010190513015': '48468.23799917102', + '231010205143009': '一级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '22280.20186841488', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '消费者', + '231010190513015': '22280.20186841488', + '231010205143009': '一级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '20700.868910312653', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '消费者', + '231010190513015': '20700.868910312653', + '231010205143009': '一级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '4222.623946420848', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '消费者', + '231010190513015': '4222.623946420848', + '231010205143009': '一级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '4093.964047908783', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '消费者', + '231010190513015': '4093.964047908783', + '231010205143009': '一级' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '64387.98809123039', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '消费者', + '231010205143009': '一级', + '231010205143014': '64387.98809123039' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '48468.23799917102', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '消费者', + '231010205143009': '一级', + '231010205143014': '48468.23799917102' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '22280.20186841488', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '消费者', + '231010205143009': '一级', + '231010205143014': '22280.20186841488' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '20700.868910312653', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '消费者', + '231010205143009': '一级', + '231010205143014': '20700.868910312653' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '4222.623946420848', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '消费者', + '231010205143009': '一级', + '231010205143014': '4222.623946420848' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '4093.964047908783', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '消费者', + '231010205143009': '一级', + '231010205143014': '4093.964047908783' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '39134.7112814188', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '公司', + '231010190513015': '39134.7112814188', + '231010205143009': '二级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '39131.42789667845', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '公司', + '231010190513015': '39131.42789667845', + '231010205143009': '二级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '34600.132201075554', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '公司', + '231010190513015': '34600.132201075554', + '231010205143009': '二级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '24406.01051365584', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '公司', + '231010190513015': '24406.01051365584', + '231010205143009': '二级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '1774.9199981689453', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '公司', + '231010190513015': '1774.9199981689453', + '231010205143009': '二级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '-1690.0240671634674', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '公司', + '231010190513015': '-1690.0240671634674', + '231010205143009': '二级' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '39134.7112814188', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '公司', + '231010205143009': '二级', + '231010205143014': '39134.7112814188' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '39131.42789667845', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '公司', + '231010205143009': '二级', + '231010205143014': '39131.42789667845' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '34600.132201075554', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '公司', + '231010205143009': '二级', + '231010205143014': '34600.132201075554' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '24406.01051365584', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '公司', + '231010205143009': '二级', + '231010205143014': '24406.01051365584' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '1774.9199981689453', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '公司', + '231010205143009': '二级', + '231010205143014': '1774.9199981689453' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '-1690.0240671634674', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '公司', + '231010205143009': '二级', + '231010205143014': '-1690.0240671634674' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '36975.93182075024', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '小型企业', + '231010190513015': '36975.93182075024', + '231010205143009': '二级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '23235.631998449564', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '小型企业', + '231010190513015': '23235.631998449564', + '231010205143009': '二级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '14651.370790958405', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '小型企业', + '231010190513015': '14651.370790958405', + '231010205143009': '二级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '12670.811906427145', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '小型企业', + '231010190513015': '12670.811906427145', + '231010205143009': '二级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '4730.656059741974', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '小型企业', + '231010190513015': '4730.656059741974', + '231010205143009': '二级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '-3066.671887397766', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '小型企业', + '231010190513015': '-3066.671887397766', + '231010205143009': '二级' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '36975.93182075024', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '小型企业', + '231010205143009': '二级', + '231010205143014': '36975.93182075024' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '23235.631998449564', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '小型企业', + '231010205143009': '二级', + '231010205143014': '23235.631998449564' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '14651.370790958405', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '小型企业', + '231010205143009': '二级', + '231010205143014': '14651.370790958405' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '12670.811906427145', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '小型企业', + '231010205143009': '二级', + '231010205143014': '12670.811906427145' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '4730.656059741974', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '小型企业', + '231010205143009': '二级', + '231010205143014': '4730.656059741974' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '-3066.671887397766', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '小型企业', + '231010205143009': '二级', + '231010205143014': '-3066.671887397766' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '82380.8867816925', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '消费者', + '231010190513015': '82380.8867816925', + '231010205143009': '二级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '50585.779735803604', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '消费者', + '231010190513015': '50585.779735803604', + '231010205143009': '二级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '44140.46036553383', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '消费者', + '231010190513015': '44140.46036553383', + '231010205143009': '二级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '43945.29997563362', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '消费者', + '231010190513015': '43945.29997563362', + '231010205143009': '二级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '17045.55988186598', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '消费者', + '231010190513015': '17045.55988186598', + '231010205143009': '二级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '11236.2601313591', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '消费者', + '231010190513015': '11236.2601313591', + '231010205143009': '二级' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '82380.8867816925', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '消费者', + '231010205143009': '二级', + '231010205143014': '82380.8867816925' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '50585.779735803604', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '消费者', + '231010205143009': '二级', + '231010205143014': '50585.779735803604' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '44140.46036553383', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '消费者', + '231010205143009': '二级', + '231010205143014': '44140.46036553383' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '43945.29997563362', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '消费者', + '231010205143009': '二级', + '231010205143014': '43945.29997563362' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '17045.55988186598', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '消费者', + '231010205143009': '二级', + '231010205143014': '17045.55988186598' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '11236.2601313591', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '消费者', + '231010205143009': '二级', + '231010205143014': '11236.2601313591' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '22255.897431716323', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '公司', + '231010190513015': '22255.897431716323', + '231010205143009': '当日' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '18356.99584555626', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '公司', + '231010190513015': '18356.99584555626', + '231010205143009': '当日' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '13119.539881706238', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '公司', + '231010190513015': '13119.539881706238', + '231010205143009': '当日' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '5692.119945526123', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '公司', + '231010190513015': '5692.119945526123', + '231010205143009': '当日' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '3108.4690698310733', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '公司', + '231010190513015': '3108.4690698310733', + '231010205143009': '当日' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '-3322.95596408844', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '公司', + '231010190513015': '-3322.95596408844', + '231010205143009': '当日' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '22255.897431716323', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '公司', + '231010205143009': '当日', + '231010205143014': '22255.897431716323' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '18356.99584555626', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '公司', + '231010205143009': '当日', + '231010205143014': '18356.99584555626' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '13119.539881706238', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '公司', + '231010205143009': '当日', + '231010205143014': '13119.539881706238' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '5692.119945526123', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '公司', + '231010205143009': '当日', + '231010205143014': '5692.119945526123' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '3108.4690698310733', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '公司', + '231010205143009': '当日', + '231010205143014': '3108.4690698310733' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '-3322.95596408844', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '公司', + '231010205143009': '当日', + '231010205143014': '-3322.95596408844' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '11269.272097229958', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '小型企业', + '231010190513015': '11269.272097229958', + '231010205143009': '当日' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '6759.164978027344', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '小型企业', + '231010190513015': '6759.164978027344', + '231010205143009': '当日' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '2055.508020401001', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '小型企业', + '231010190513015': '2055.508020401001', + '231010205143009': '当日' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '1721.5800495147705', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '小型企业', + '231010190513015': '1721.5800495147705', + '231010205143009': '当日' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '1248.3519949913025', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '小型企业', + '231010190513015': '1248.3519949913025', + '231010205143009': '当日' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '577.4999907016754', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '小型企业', + '231010190513015': '577.4999907016754', + '231010205143009': '当日' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '11269.272097229958', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '小型企业', + '231010205143009': '当日', + '231010205143014': '11269.272097229958' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '6759.164978027344', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '小型企业', + '231010205143009': '当日', + '231010205143014': '6759.164978027344' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '2055.508020401001', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '小型企业', + '231010205143009': '当日', + '231010205143014': '2055.508020401001' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '1721.5800495147705', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '小型企业', + '231010205143009': '当日', + '231010205143014': '1721.5800495147705' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '1248.3519949913025', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '小型企业', + '231010205143009': '当日', + '231010205143014': '1248.3519949913025' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '577.4999907016754', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '小型企业', + '231010205143009': '当日', + '231010205143014': '577.4999907016754' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '18896.080198287964', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '消费者', + '231010190513015': '18896.080198287964', + '231010205143009': '当日' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '16592.814119160175', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '消费者', + '231010190513015': '16592.814119160175', + '231010205143009': '当日' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '10673.79599237442', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '消费者', + '231010190513015': '10673.79599237442', + '231010205143009': '当日' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '2528.400135964155', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '消费者', + '231010190513015': '2528.400135964155', + '231010205143009': '当日' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '1458.996036529541', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '消费者', + '231010190513015': '1458.996036529541', + '231010205143009': '当日' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '1382.7799935340881', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '消费者', + '231010190513015': '1382.7799935340881', + '231010205143009': '当日' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '18896.080198287964', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '消费者', + '231010205143009': '当日', + '231010205143014': '18896.080198287964' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '16592.814119160175', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '消费者', + '231010205143009': '当日', + '231010205143014': '16592.814119160175' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '10673.79599237442', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '消费者', + '231010205143009': '当日', + '231010205143014': '10673.79599237442' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '2528.400135964155', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '消费者', + '231010205143009': '当日', + '231010205143014': '2528.400135964155' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '1458.996036529541', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '消费者', + '231010205143009': '当日', + '231010205143014': '1458.996036529541' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '1382.7799935340881', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '消费者', + '231010205143009': '当日', + '231010205143014': '1382.7799935340881' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '118087.98317557573', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '公司', + '231010190513015': '118087.98317557573', + '231010205143009': '标准级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '106918.77745839208', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '公司', + '231010190513015': '106918.77745839208', + '231010205143009': '标准级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '105005.49484279752', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '公司', + '231010190513015': '105005.49484279752', + '231010205143009': '标准级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '39524.19761827588', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '公司', + '231010190513015': '39524.19761827588', + '231010205143009': '标准级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '35121.29611492157', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '公司', + '231010190513015': '35121.29611492157', + '231010205143009': '标准级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '20351.74444913864', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '公司', + '231010190513015': '20351.74444913864', + '231010205143009': '标准级' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '118087.98317557573', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '公司', + '231010205143009': '标准级', + '231010205143014': '118087.98317557573' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '106918.77745839208', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '公司', + '231010205143009': '标准级', + '231010205143014': '106918.77745839208' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '105005.49484279752', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '公司', + '231010205143009': '标准级', + '231010205143014': '105005.49484279752' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '39524.19761827588', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '公司', + '231010205143009': '标准级', + '231010205143014': '39524.19761827588' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '35121.29611492157', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '公司', + '231010205143009': '标准级', + '231010205143014': '35121.29611492157' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '20351.74444913864', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '公司', + '231010205143009': '标准级', + '231010205143014': '20351.74444913864' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '88442.71798437834', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '小型企业', + '231010190513015': '88442.71798437834', + '231010205143009': '标准级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '53928.448032945395', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '小型企业', + '231010190513015': '53928.448032945395', + '231010205143009': '标准级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '50717.0440325737', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '小型企业', + '231010190513015': '50717.0440325737', + '231010205143009': '标准级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '44391.907398581505', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '小型企业', + '231010190513015': '44391.907398581505', + '231010205143009': '标准级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '6468.615869402885', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '小型企业', + '231010190513015': '6468.615869402885', + '231010205143009': '标准级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '3964.4918270111084', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '小型企业', + '231010190513015': '3964.4918270111084', + '231010205143009': '标准级' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '88442.71798437834', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '小型企业', + '231010205143009': '标准级', + '231010205143014': '88442.71798437834' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '53928.448032945395', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '小型企业', + '231010205143009': '标准级', + '231010205143014': '53928.448032945395' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '50717.0440325737', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '小型企业', + '231010205143009': '标准级', + '231010205143014': '50717.0440325737' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '44391.907398581505', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '小型企业', + '231010205143009': '标准级', + '231010205143014': '44391.907398581505' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '6468.615869402885', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '小型企业', + '231010205143009': '标准级', + '231010205143014': '6468.615869402885' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '3964.4918270111084', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '小型企业', + '231010205143009': '标准级', + '231010205143014': '3964.4918270111084' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '210141.89068495482', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '消费者', + '231010190513015': '210141.89068495482', + '231010205143009': '标准级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '145396.04913766682', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '消费者', + '231010190513015': '145396.04913766682', + '231010205143009': '标准级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '116499.65626353025', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '消费者', + '231010190513015': '116499.65626353025', + '231010205143009': '标准级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '52270.36535333097', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '消费者', + '231010190513015': '52270.36535333097', + '231010205143009': '标准级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '37391.45208977163', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '消费者', + '231010190513015': '37391.45208977163', + '231010205143009': '标准级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '26372.219661466777', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '消费者', + '231010190513015': '26372.219661466777', + '231010205143009': '标准级' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '210141.89068495482', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '消费者', + '231010205143009': '标准级', + '231010205143014': '210141.89068495482' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '145396.04913766682', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '消费者', + '231010205143009': '标准级', + '231010205143014': '145396.04913766682' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '116499.65626353025', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '消费者', + '231010205143009': '标准级', + '231010205143014': '116499.65626353025' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '52270.36535333097', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '消费者', + '231010205143009': '标准级', + '231010205143014': '52270.36535333097' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '37391.45208977163', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '消费者', + '231010205143009': '标准级', + '231010205143014': '37391.45208977163' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '26372.219661466777', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '消费者', + '231010205143009': '标准级', + '231010205143014': '26372.219661466777' + } + ] + }, + defaultHeaderColWidth: [80, 'auto'], + indicatorTitle: '', + autoWrapText: true, + legends: { + type: 'discrete', + id: 'legend-discrete', + orient: 'bottom', + position: 'middle', + layoutType: 'normal', + visible: true, + maxRow: 1, + title: { + textStyle: { + fontSize: 12, + fill: '#6F6F6F' + } + }, + layoutLevel: 50, + 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' + } + } + }, + pager: { + layout: 'horizontal', + padding: 0, + textStyle: {}, + space: 0, + handler: { + preShape: 'triangleLeft', + nextShape: 'triangleRight', + style: {}, + state: { + disable: {} + } + } + }, + padding: [16, 0, 0, 0], + data: [ + { + label: '利润', + shape: { + fill: '#2E62F1', + symbolType: 'square' + } + } + ] + }, + corner: { + titleOnDimension: 'row' + }, + title: { + text: '', + align: 'center', + orient: 'top', + padding: [3, 0, 5, 0], + textStyle: { + fontSize: 12, + fill: '#333333', + fontWeight: 'bold' + } + }, + theme: { + bodyStyle: { + borderColor: 'rgba(0,4,20,0.2)', + borderLineWidth: [1, 0, 0, 1], + padding: 1 + }, + headerStyle: { + borderColor: 'rgba(0,4,20,0.2)', + fontSize: 12, + color: '#333333', + textAlign: 'center', + borderLineWidth: [0, 0, 1, 1], + padding: [4, 0, 4, 0], + hover: { + cellBgColor: '#eceded' + } + }, + rowHeaderStyle: { + borderColor: 'rgba(0,4,20,0.2)', + fontSize: 12, + color: '#333333', + padding: [0, 0, 0, 4], + borderLineWidth: [1, 1, 0, 0], + hover: { + cellBgColor: '#eceded' + } + }, + cornerHeaderStyle: { + borderColor: 'rgba(0,4,20,0.2)', + textAlign: 'center', + fontSize: 12, + color: '#333333', + fontWeight: 'bold', + borderLineWidth: [0, 1, 1, 0], + padding: 0, + hover: { + cellBgColor: '' + } + }, + cornerRightTopCellStyle: { + borderColor: 'rgba(0,4,20,0.2)', + borderLineWidth: [0, 0, 1, 1], + padding: 0, + hover: { + cellBgColor: '' + } + }, + cornerLeftBottomCellStyle: { + borderColor: 'rgba(0,4,20,0.2)', + borderLineWidth: [1, 0, 0, 0], + hover: { + cellBgColor: '' + } + }, + cornerRightBottomCellStyle: { + borderColor: 'rgba(0,4,20,0.2)', + borderLineWidth: [1, 0, 0, 1], + hover: { + cellBgColor: '' + } + }, + rightFrozenStyle: { + borderColor: 'rgba(0,4,20,0.2)', + borderLineWidth: [1, 0, 1, 1], + hover: { + cellBgColor: '#eceded' + } + }, + bottomFrozenStyle: { + borderColor: 'rgba(0,4,20,0.2)', + borderLineWidth: [1, 0, 0, 1], + padding: 0, + hover: { + cellBgColor: '#eceded' + } + }, + selectionStyle: { + cellBgColor: '', + cellBorderColor: '' + }, + frameStyle: { + borderLineWidth: 0 + } + }, + + // for nodejs + mode: 'node', + modeParams: { + createCanvas: canvas.createCanvas, + createImageData: canvas.createImageData, + loadImage: canvas.loadImage, + Resvg: Resvg + }, + canvasWidth: 1000, + canvasHeight: 700 + }; + + const tableInstance = new VTable.PivotChart(option); + + setTimeout(() => { + const buffer = tableInstance.getImageBuffer(); + fs.writeFileSync(`${__dirname}/pivot-chart.png`, buffer); + }, 0); +} diff --git a/packages/vtable/src/PivotChart.ts b/packages/vtable/src/PivotChart.ts index 1c8bf4538..89244a6b0 100644 --- a/packages/vtable/src/PivotChart.ts +++ b/packages/vtable/src/PivotChart.ts @@ -39,6 +39,7 @@ import type { ITableAxisOption } from './ts-types/component/axis'; import { cloneDeep, isArray } from '@visactor/vutils'; import type { DiscreteLegend } from '@visactor/vrender-components'; import { Title } from './components/title/title'; +import { Env } from './tools/env'; export class PivotChart extends BaseTable implements PivotChartAPI { declare internalProps: PivotChartProtected; @@ -55,7 +56,10 @@ export class PivotChart extends BaseTable implements PivotChartAPI { constructor(options: PivotChartConstructorOptions); constructor(container: HTMLElement, options: PivotChartConstructorOptions); constructor(container?: HTMLElement | PivotChartConstructorOptions, options?: PivotChartConstructorOptions) { - if (!(container instanceof HTMLElement)) { + if (Env.mode === 'node') { + options = container as PivotChartConstructorOptions; + container = null; + } else if (!(container instanceof HTMLElement)) { options = container as PivotChartConstructorOptions; if ((container as PivotChartConstructorOptions).container) { container = (container as PivotChartConstructorOptions).container; diff --git a/packages/vtable/src/scenegraph/graphic/chart.ts b/packages/vtable/src/scenegraph/graphic/chart.ts index b6b074823..8bd16460b 100644 --- a/packages/vtable/src/scenegraph/graphic/chart.ts +++ b/packages/vtable/src/scenegraph/graphic/chart.ts @@ -13,6 +13,8 @@ interface IChartGraphicAttribute extends IGroupGraphicAttribute { ClassType: any; chartInstance: any; cellPadding: number[]; + mode: string; + modeParams: any; // viewBox: { // x1: number; // y1: number; @@ -39,7 +41,8 @@ export class Chart extends Group { if (!params.chartInstance) { params.chartInstance = this.chartInstance = new params.ClassType(params.spec, { renderCanvas: params.canvas, - mode: 'desktop-browser', + mode: (this.attribute.mode = 'node' ? 'node' : 'desktop-browser'), + modeParams: this.attribute.modeParams, canvasControled: false, viewBox: { x1: 0, x2: 0, y1: 0, y2: 0 }, // viewBox: params.viewBox, diff --git a/packages/vtable/src/scenegraph/group-creater/cell-type/chart-cell.ts b/packages/vtable/src/scenegraph/group-creater/cell-type/chart-cell.ts index e3e9ec0d4..c4b9e2c67 100644 --- a/packages/vtable/src/scenegraph/group-creater/cell-type/chart-cell.ts +++ b/packages/vtable/src/scenegraph/group-creater/cell-type/chart-cell.ts @@ -63,6 +63,8 @@ export function createChartCellGroup( x: padding[3], y: padding[0], canvas: table.canvas, + mode: table.options.mode, + modeParams: table.options.modeParams, spec: chartSpec, ClassType, width: width - padding[3] - padding[1], From 38415dfe265ca222e641b4568960ef98a2468dce Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Tue, 17 Oct 2023 18:04:17 +0800 Subject: [PATCH 09/48] test: add cjs test cases --- packages/vtable/nodejs/index.js | 10 + packages/vtable/nodejs/list-table.js | 98 ++ packages/vtable/nodejs/pivot-chart.js | 2350 +++++++++++++++++++++++++ packages/vtable/nodejs/pivot-table.js | 502 ++++++ packages/vtable/nodejs/small-table.js | 58 + packages/vtable/src/core/BaseTable.ts | 2 +- packages/vtable/src/index.ts | 2 +- 7 files changed, 3020 insertions(+), 2 deletions(-) create mode 100644 packages/vtable/nodejs/index.js create mode 100644 packages/vtable/nodejs/list-table.js create mode 100644 packages/vtable/nodejs/pivot-chart.js create mode 100644 packages/vtable/nodejs/pivot-table.js create mode 100644 packages/vtable/nodejs/small-table.js diff --git a/packages/vtable/nodejs/index.js b/packages/vtable/nodejs/index.js new file mode 100644 index 000000000..bca82b5be --- /dev/null +++ b/packages/vtable/nodejs/index.js @@ -0,0 +1,10 @@ +"use strict"; +exports.__esModule = true; +var small_table = require("./small-table"); +var list_table = require("./list-table"); +var pivot_table = require("./pivot-table"); +var pivot_chart = require("./pivot-chart"); +// small_table.createSmallTable(); +// list_table.createListTable(); +// pivot_table.createPivotTable(); +pivot_chart.createPivotChart(); diff --git a/packages/vtable/nodejs/list-table.js b/packages/vtable/nodejs/list-table.js new file mode 100644 index 000000000..4f13fc2b4 --- /dev/null +++ b/packages/vtable/nodejs/list-table.js @@ -0,0 +1,98 @@ +"use strict"; +exports.__esModule = true; +exports.createListTable = void 0; +/* eslint-disable */ +var fs_1 = require("fs"); +var canvas_1 = require("canvas"); +var VTable = require("../cjs/index"); +var resvg_js_1 = require("@resvg/resvg-js"); +var generatePersons = function (count) { + return Array.from(new Array(count)).map(function (_, i) { return ({ + id: i + 1, + email1: "".concat(i + 1, "@xxx.com"), + name: "\u5C0F\u660E".concat(i + 1), + lastName: '王', + date1: '2022年9月1日', + tel: '000-0000-0000', + sex: i % 2 === 0 ? 'boy' : 'girl', + work: i % 2 === 0 ? 'back-end engineer' : 'front-end engineer', + city: 'beijing' + }); }); +}; +function createListTable() { + var records = generatePersons(20); + var columns = [ + { + field: 'id', + title: 'ID ff', + width: '1%', + minWidth: 200, + sort: true + }, + { + field: 'email1', + title: 'email', + width: 200, + sort: true + }, + { + title: 'full name', + columns: [ + { + field: 'name', + title: 'First Name', + width: 200 + }, + { + field: 'name', + title: 'Last Name', + width: 200 + } + ] + }, + { + field: 'date1', + title: 'birthday', + width: 200 + }, + { + field: 'sex', + title: 'sex', + width: 100 + }, + { + field: 'tel', + title: 'telephone', + width: 150 + }, + { + field: 'work', + title: 'job', + width: 200 + }, + { + field: 'city', + title: 'city', + width: 150 + } + ]; + var option = { + records: records, + columns: columns, + // pixelRatio: 2, + // for nodejs + mode: 'node', + modeParams: { + createCanvas: canvas_1.createCanvas, + createImageData: canvas_1.createImageData, + loadImage: canvas_1.loadImage, + Resvg: resvg_js_1.Resvg + }, + canvasWidth: 1000, + canvasHeight: 700 + }; + var tableInstance = new VTable.ListTable(option); + var buffer = tableInstance.getImageBuffer(); + fs_1.writeFileSync("".concat(__dirname, "/list-table.png"), buffer); +} +exports.createListTable = createListTable; diff --git a/packages/vtable/nodejs/pivot-chart.js b/packages/vtable/nodejs/pivot-chart.js new file mode 100644 index 000000000..c9ee5c3ad --- /dev/null +++ b/packages/vtable/nodejs/pivot-chart.js @@ -0,0 +1,2350 @@ +"use strict"; +exports.__esModule = true; +exports.createPivotChart = void 0; +/* eslint-disable */ +var fs_1 = require("fs"); +var canvas_1 = require("canvas"); +var VTable = require("../cjs/index"); +var vchart_1 = require("@visactor/vchart"); +var resvg_js_1 = require("@resvg/resvg-js"); +VTable.register.chartModule('vchart', vchart_1.default); +function createPivotChart() { + var option = { + widthMode: 'adaptive', + heightMode: 'adaptive', + columnTree: [], + rowTree: [ + { + dimensionKey: '231010205143009', + value: '一级', + children: [ + { + dimensionKey: '231010171607024', + value: '公司' + }, + { + dimensionKey: '231010171607024', + value: '小型企业' + }, + { + dimensionKey: '231010171607024', + value: '消费者' + } + ] + }, + { + dimensionKey: '231010205143009', + value: '二级', + children: [ + { + dimensionKey: '231010171607024', + value: '公司' + }, + { + dimensionKey: '231010171607024', + value: '小型企业' + }, + { + dimensionKey: '231010171607024', + value: '消费者' + } + ] + }, + { + dimensionKey: '231010205143009', + value: '当日', + children: [ + { + dimensionKey: '231010171607024', + value: '公司' + }, + { + dimensionKey: '231010171607024', + value: '小型企业' + }, + { + dimensionKey: '231010171607024', + value: '消费者' + } + ] + }, + { + dimensionKey: '231010205143009', + value: '标准级', + children: [ + { + dimensionKey: '231010171607024', + value: '公司' + }, + { + dimensionKey: '231010171607024', + value: '小型企业' + }, + { + dimensionKey: '231010171607024', + value: '消费者' + } + ] + } + ], + columns: [], + rows: [ + { + dimensionKey: '231010205143009', + title: '邮寄方式' + }, + { + dimensionKey: '231010171607024', + title: '细分' + } + ], + 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' + } + }, + sampling: false, + zIndex: 200, + label: { + visible: true, + space: 8, + style: { + fontSize: 12, + fill: '#6F6F6F', + angle: 0, + fontWeight: 'normal', + direction: 'horizontal' + }, + autoHide: true, + autoHideMethod: 'greedy', + flush: 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] + } + ], + indicators: [ + { + indicatorKey: '0', + width: 'auto', + title: '', + cellType: 'chart', + chartModule: 'vchart', + chartSpec: { + type: 'common', + axes: [ + { + id: 'main-0', + type: 'linear', + tick: { + visible: false, + tickMode: 'd3', + 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: true, + text: '利润', + space: 8, + style: { + fontSize: 12, + fill: '#363839', + fontWeight: 'normal' + } + }, + sampling: false, + label: { + visible: true, + space: 4, + flush: true, + padding: 0, + style: { + fontSize: 12, + maxLineWidth: 174, + fill: '#6F6F6F', + angle: 0, + fontWeight: 'normal', + dy: -1, + direction: 'horizontal' + }, + autoHide: true, + autoHideMethod: 'greedy' + }, + hover: false, + background: { + visible: true, + state: { + hover: { + fillOpacity: 0.08, + fill: '#141414' + }, + hover_reverse: { + fillOpacity: 0.08, + fill: '#141414' + } + } + }, + zero: true, + sync: { + axisId: 'sub-0', + zeroAlign: true, + tickAlign: false + } + }, + { + id: 'sub-0', + type: 'linear', + tick: { + visible: false, + tickMode: 'd3', + style: { + stroke: 'rgba(255, 255, 255, 0)' + } + }, + niceType: 'accurateFirst', + zIndex: 200, + grid: { + visible: false, + style: { + zIndex: 150, + stroke: '#DADCDD', + lineWidth: 1, + lineDash: [4, 2] + } + }, + orient: 'top', + visible: true, + domainLine: { + visible: true, + style: { + lineWidth: 1, + stroke: 'rgba(255, 255, 255, 0)' + } + }, + title: { + visible: true, + text: '利润', + space: 8, + style: { + fontSize: 12, + fill: '#363839', + fontWeight: 'normal' + } + }, + sampling: false, + label: { + visible: true, + space: 4, + flush: true, + padding: 0, + style: { + fontSize: 12, + maxLineWidth: 174, + fill: '#6F6F6F', + angle: 0, + fontWeight: 'normal', + dy: -1, + direction: 'horizontal' + }, + autoHide: true, + autoHideMethod: 'greedy' + }, + hover: false, + background: { + visible: true, + state: { + hover: { + fillOpacity: 0.08, + fill: '#141414' + }, + hover_reverse: { + fillOpacity: 0.08, + fill: '#141414' + } + } + }, + zero: true, + nice: true + } + ], + stackInverse: false, + series: [ + { + type: 'bar', + yField: ['231010112314020', '10001'], + xField: '10011', + seriesField: '20001', + direction: 'horizontal', + data: { + id: 'main-data', + fields: { + '10001': { + alias: '指标名称 ' + }, + '10011': { + alias: '指标值(主轴) ' + }, + '10012': { + alias: '指标值(次轴) ' + }, + '20001': { + alias: '图例项 ', + domain: ['利润'], + sortIndex: 0, + lockStatisticsByDomain: true + }, + '231010112314020': { + alias: '地区', + domain: ['中南', '华东', '华北', '地区-dongbei', '西北', '西南'], + sortIndex: 0, + lockStatisticsByDomain: true + }, + '231010171607024': { + alias: '细分' + }, + '231010190513015': { + alias: '利润' + }, + '231010205143009': { + alias: '邮寄方式' + }, + '231010205143014': { + alias: '利润' + } + } + }, + stackInverse: false, + line: { + style: { + curveType: { + type: 'ordinal', + field: '20001', + range: ['linear'], + domain: ['利润'] + }, + lineWidth: { + type: 'ordinal', + field: '20001', + range: [3], + domain: ['利润'] + }, + lineDash: { + type: 'ordinal', + field: '20001', + range: [[0, 0]], + domain: ['利润'] + } + } + }, + area: { + style: { + curveType: { + type: 'ordinal', + field: '20001', + range: ['linear'], + domain: ['利润'] + } + } + }, + point: { + style: { + shape: { + type: 'ordinal', + field: '20001', + range: ['circle'], + domain: ['利润'] + }, + size: { + type: 'ordinal', + field: '20001', + range: [7.0898154036220635], + domain: ['利润'] + }, + strokeOpacity: { + type: 'ordinal', + field: '20001', + range: [1], + domain: ['利润'] + }, + fillOpacity: { + type: 'ordinal', + field: '20001', + range: [1], + domain: ['利润'] + } + }, + state: { + hover: { + lineWidth: 2, + fillOpacity: 1, + strokeOpacity: 1, + scaleX: 1.5, + scaleY: 1.5 + } + } + }, + invalidType: 'break', + 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, + strokeWidth: 0.3 + } + } + }, + label: { + visible: false, + overlap: { + hideOnHit: true, + avoidBaseMark: false, + strategy: [ + { + type: 'moveY', + offset: [ + -20, -19, -18, -17, -16, -15, -14, -13, -12, -11, -10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, + 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 + ] + }, + { + type: 'moveX', + offset: [ + -20, -19, -18, -17, -16, -15, -14, -13, -12, -11, -10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, + 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 + ] + } + ], + clampForce: true + }, + style: { + fontSize: 12, + fontWeight: 'normal', + zIndex: 400, + fill: '#363839', + stroke: 'rgba(255, 255, 255, 0.8)', + lineWidth: 2, + strokeOpacity: 1 + }, + position: 'outside', + smartInvert: false + } + }, + { + type: 'line', + yField: ['231010112314020', '10001'], + xField: '10012', + seriesField: '20001', + direction: 'horizontal', + data: { + sortIndex: 0, + id: 'sub-data', + fields: { + '10001': { + alias: '指标名称 ' + }, + '10011': { + alias: '指标值(主轴) ' + }, + '10012': { + alias: '指标值(次轴) ' + }, + '20001': { + alias: '图例项 ', + domain: ['利润'], + sortIndex: 0, + lockStatisticsByDomain: true + }, + '231010112314020': { + alias: '地区', + domain: ['中南', '华东', '华北', '地区-dongbei', '西北', '西南'], + sortIndex: 0, + lockStatisticsByDomain: true + }, + '231010171607024': { + alias: '细分' + }, + '231010190513015': { + alias: '利润' + }, + '231010205143009': { + alias: '邮寄方式' + }, + '231010205143014': { + alias: '利润' + } + } + }, + stackInverse: false, + line: { + style: { + curveType: { + type: 'ordinal', + field: '20001', + range: ['linear'], + domain: ['利润'] + }, + lineWidth: { + type: 'ordinal', + field: '20001', + range: [3], + domain: ['利润'] + }, + lineDash: { + type: 'ordinal', + field: '20001', + range: [[0, 0]], + domain: ['利润'] + } + } + }, + area: { + style: { + curveType: { + type: 'ordinal', + field: '20001', + range: ['linear'], + domain: ['利润'] + } + } + }, + point: { + style: { + shape: { + type: 'ordinal', + field: '20001', + range: ['circle'], + domain: ['利润'] + }, + size: { + type: 'ordinal', + field: '20001', + range: [7.0898154036220635], + domain: ['利润'] + }, + strokeOpacity: { + type: 'ordinal', + field: '20001', + range: [1], + domain: ['利润'] + }, + fillOpacity: { + type: 'ordinal', + field: '20001', + range: [1], + domain: ['利润'] + } + }, + state: { + hover: { + lineWidth: 2, + fillOpacity: 1, + strokeOpacity: 1, + scaleX: 1.5, + scaleY: 1.5 + } + } + }, + invalidType: 'break', + 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, + strokeWidth: 0.3 + } + } + }, + label: { + visible: false, + overlap: { + hideOnHit: true, + avoidBaseMark: false, + strategy: [ + { + type: 'moveY', + offset: [ + -20, -19, -18, -17, -16, -15, -14, -13, -12, -11, -10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, + 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 + ] + }, + { + type: 'moveX', + offset: [ + -20, -19, -18, -17, -16, -15, -14, -13, -12, -11, -10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, + 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 + ] + } + ], + clampForce: true + }, + style: { + fontSize: 12, + fontWeight: 'normal', + zIndex: 400, + fill: '#363839', + stroke: 'rgba(255, 255, 255, 0.8)', + lineWidth: 2, + strokeOpacity: 1 + }, + position: 'outside', + smartInvert: false + } + } + ], + tooltip: { + handler: {} + }, + seriesField: '20001', + color: { + field: '20001', + type: 'ordinal', + range: ['#2E62F1'], + specified: {}, + domain: ['利润'] + }, + crosshair: { + yField: { + visible: true + }, + gridZIndex: 100 + } + } + } + ], + indicatorsAsCol: true, + records: { + '0': [ + { + '10001': '利润', + '10003': '231010190513015', + '10011': '29552.69842272997', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '公司', + '231010190513015': '29552.69842272997', + '231010205143009': '一级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '14869.259436711669', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '公司', + '231010190513015': '14869.259436711669', + '231010205143009': '一级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '13720.042139291763', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '公司', + '231010190513015': '13720.042139291763', + '231010205143009': '一级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '10807.019856154919', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '公司', + '231010190513015': '10807.019856154919', + '231010205143009': '一级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '1502.228010892868', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '公司', + '231010190513015': '1502.228010892868', + '231010205143009': '一级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '-10060.35078561306', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '公司', + '231010190513015': '-10060.35078561306', + '231010205143009': '一级' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '29552.69842272997', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '公司', + '231010205143009': '一级', + '231010205143014': '29552.69842272997' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '14869.259436711669', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '公司', + '231010205143009': '一级', + '231010205143014': '14869.259436711669' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '13720.042139291763', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '公司', + '231010205143009': '一级', + '231010205143014': '13720.042139291763' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '10807.019856154919', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '公司', + '231010205143009': '一级', + '231010205143014': '10807.019856154919' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '1502.228010892868', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '公司', + '231010205143009': '一级', + '231010205143014': '1502.228010892868' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '-10060.35078561306', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '公司', + '231010205143009': '一级', + '231010205143014': '-10060.35078561306' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '21340.899931192398', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '小型企业', + '231010190513015': '21340.899931192398', + '231010205143009': '一级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '15056.691901683807', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '小型企业', + '231010190513015': '15056.691901683807', + '231010205143009': '一级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '5877.844171881676', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '小型企业', + '231010190513015': '5877.844171881676', + '231010205143009': '一级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '5169.304051876068', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '小型企业', + '231010190513015': '5169.304051876068', + '231010205143009': '一级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '2820.3279762268066', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '小型企业', + '231010190513015': '2820.3279762268066', + '231010205143009': '一级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '1471.259955406189', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '小型企业', + '231010190513015': '1471.259955406189', + '231010205143009': '一级' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '21340.899931192398', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '小型企业', + '231010205143009': '一级', + '231010205143014': '21340.899931192398' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '15056.691901683807', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '小型企业', + '231010205143009': '一级', + '231010205143014': '15056.691901683807' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '5877.844171881676', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '小型企业', + '231010205143009': '一级', + '231010205143014': '5877.844171881676' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '5169.304051876068', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '小型企业', + '231010205143009': '一级', + '231010205143014': '5169.304051876068' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '2820.3279762268066', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '小型企业', + '231010205143009': '一级', + '231010205143014': '2820.3279762268066' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '1471.259955406189', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '小型企业', + '231010205143009': '一级', + '231010205143014': '1471.259955406189' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '64387.98809123039', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '消费者', + '231010190513015': '64387.98809123039', + '231010205143009': '一级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '48468.23799917102', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '消费者', + '231010190513015': '48468.23799917102', + '231010205143009': '一级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '22280.20186841488', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '消费者', + '231010190513015': '22280.20186841488', + '231010205143009': '一级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '20700.868910312653', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '消费者', + '231010190513015': '20700.868910312653', + '231010205143009': '一级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '4222.623946420848', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '消费者', + '231010190513015': '4222.623946420848', + '231010205143009': '一级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '4093.964047908783', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '消费者', + '231010190513015': '4093.964047908783', + '231010205143009': '一级' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '64387.98809123039', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '消费者', + '231010205143009': '一级', + '231010205143014': '64387.98809123039' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '48468.23799917102', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '消费者', + '231010205143009': '一级', + '231010205143014': '48468.23799917102' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '22280.20186841488', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '消费者', + '231010205143009': '一级', + '231010205143014': '22280.20186841488' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '20700.868910312653', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '消费者', + '231010205143009': '一级', + '231010205143014': '20700.868910312653' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '4222.623946420848', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '消费者', + '231010205143009': '一级', + '231010205143014': '4222.623946420848' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '4093.964047908783', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '消费者', + '231010205143009': '一级', + '231010205143014': '4093.964047908783' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '39134.7112814188', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '公司', + '231010190513015': '39134.7112814188', + '231010205143009': '二级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '39131.42789667845', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '公司', + '231010190513015': '39131.42789667845', + '231010205143009': '二级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '34600.132201075554', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '公司', + '231010190513015': '34600.132201075554', + '231010205143009': '二级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '24406.01051365584', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '公司', + '231010190513015': '24406.01051365584', + '231010205143009': '二级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '1774.9199981689453', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '公司', + '231010190513015': '1774.9199981689453', + '231010205143009': '二级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '-1690.0240671634674', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '公司', + '231010190513015': '-1690.0240671634674', + '231010205143009': '二级' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '39134.7112814188', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '公司', + '231010205143009': '二级', + '231010205143014': '39134.7112814188' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '39131.42789667845', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '公司', + '231010205143009': '二级', + '231010205143014': '39131.42789667845' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '34600.132201075554', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '公司', + '231010205143009': '二级', + '231010205143014': '34600.132201075554' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '24406.01051365584', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '公司', + '231010205143009': '二级', + '231010205143014': '24406.01051365584' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '1774.9199981689453', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '公司', + '231010205143009': '二级', + '231010205143014': '1774.9199981689453' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '-1690.0240671634674', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '公司', + '231010205143009': '二级', + '231010205143014': '-1690.0240671634674' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '36975.93182075024', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '小型企业', + '231010190513015': '36975.93182075024', + '231010205143009': '二级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '23235.631998449564', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '小型企业', + '231010190513015': '23235.631998449564', + '231010205143009': '二级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '14651.370790958405', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '小型企业', + '231010190513015': '14651.370790958405', + '231010205143009': '二级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '12670.811906427145', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '小型企业', + '231010190513015': '12670.811906427145', + '231010205143009': '二级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '4730.656059741974', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '小型企业', + '231010190513015': '4730.656059741974', + '231010205143009': '二级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '-3066.671887397766', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '小型企业', + '231010190513015': '-3066.671887397766', + '231010205143009': '二级' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '36975.93182075024', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '小型企业', + '231010205143009': '二级', + '231010205143014': '36975.93182075024' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '23235.631998449564', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '小型企业', + '231010205143009': '二级', + '231010205143014': '23235.631998449564' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '14651.370790958405', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '小型企业', + '231010205143009': '二级', + '231010205143014': '14651.370790958405' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '12670.811906427145', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '小型企业', + '231010205143009': '二级', + '231010205143014': '12670.811906427145' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '4730.656059741974', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '小型企业', + '231010205143009': '二级', + '231010205143014': '4730.656059741974' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '-3066.671887397766', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '小型企业', + '231010205143009': '二级', + '231010205143014': '-3066.671887397766' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '82380.8867816925', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '消费者', + '231010190513015': '82380.8867816925', + '231010205143009': '二级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '50585.779735803604', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '消费者', + '231010190513015': '50585.779735803604', + '231010205143009': '二级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '44140.46036553383', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '消费者', + '231010190513015': '44140.46036553383', + '231010205143009': '二级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '43945.29997563362', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '消费者', + '231010190513015': '43945.29997563362', + '231010205143009': '二级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '17045.55988186598', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '消费者', + '231010190513015': '17045.55988186598', + '231010205143009': '二级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '11236.2601313591', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '消费者', + '231010190513015': '11236.2601313591', + '231010205143009': '二级' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '82380.8867816925', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '消费者', + '231010205143009': '二级', + '231010205143014': '82380.8867816925' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '50585.779735803604', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '消费者', + '231010205143009': '二级', + '231010205143014': '50585.779735803604' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '44140.46036553383', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '消费者', + '231010205143009': '二级', + '231010205143014': '44140.46036553383' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '43945.29997563362', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '消费者', + '231010205143009': '二级', + '231010205143014': '43945.29997563362' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '17045.55988186598', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '消费者', + '231010205143009': '二级', + '231010205143014': '17045.55988186598' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '11236.2601313591', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '消费者', + '231010205143009': '二级', + '231010205143014': '11236.2601313591' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '22255.897431716323', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '公司', + '231010190513015': '22255.897431716323', + '231010205143009': '当日' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '18356.99584555626', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '公司', + '231010190513015': '18356.99584555626', + '231010205143009': '当日' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '13119.539881706238', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '公司', + '231010190513015': '13119.539881706238', + '231010205143009': '当日' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '5692.119945526123', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '公司', + '231010190513015': '5692.119945526123', + '231010205143009': '当日' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '3108.4690698310733', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '公司', + '231010190513015': '3108.4690698310733', + '231010205143009': '当日' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '-3322.95596408844', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '公司', + '231010190513015': '-3322.95596408844', + '231010205143009': '当日' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '22255.897431716323', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '公司', + '231010205143009': '当日', + '231010205143014': '22255.897431716323' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '18356.99584555626', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '公司', + '231010205143009': '当日', + '231010205143014': '18356.99584555626' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '13119.539881706238', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '公司', + '231010205143009': '当日', + '231010205143014': '13119.539881706238' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '5692.119945526123', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '公司', + '231010205143009': '当日', + '231010205143014': '5692.119945526123' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '3108.4690698310733', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '公司', + '231010205143009': '当日', + '231010205143014': '3108.4690698310733' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '-3322.95596408844', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '公司', + '231010205143009': '当日', + '231010205143014': '-3322.95596408844' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '11269.272097229958', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '小型企业', + '231010190513015': '11269.272097229958', + '231010205143009': '当日' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '6759.164978027344', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '小型企业', + '231010190513015': '6759.164978027344', + '231010205143009': '当日' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '2055.508020401001', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '小型企业', + '231010190513015': '2055.508020401001', + '231010205143009': '当日' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '1721.5800495147705', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '小型企业', + '231010190513015': '1721.5800495147705', + '231010205143009': '当日' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '1248.3519949913025', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '小型企业', + '231010190513015': '1248.3519949913025', + '231010205143009': '当日' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '577.4999907016754', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '小型企业', + '231010190513015': '577.4999907016754', + '231010205143009': '当日' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '11269.272097229958', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '小型企业', + '231010205143009': '当日', + '231010205143014': '11269.272097229958' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '6759.164978027344', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '小型企业', + '231010205143009': '当日', + '231010205143014': '6759.164978027344' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '2055.508020401001', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '小型企业', + '231010205143009': '当日', + '231010205143014': '2055.508020401001' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '1721.5800495147705', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '小型企业', + '231010205143009': '当日', + '231010205143014': '1721.5800495147705' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '1248.3519949913025', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '小型企业', + '231010205143009': '当日', + '231010205143014': '1248.3519949913025' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '577.4999907016754', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '小型企业', + '231010205143009': '当日', + '231010205143014': '577.4999907016754' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '18896.080198287964', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '消费者', + '231010190513015': '18896.080198287964', + '231010205143009': '当日' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '16592.814119160175', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '消费者', + '231010190513015': '16592.814119160175', + '231010205143009': '当日' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '10673.79599237442', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '消费者', + '231010190513015': '10673.79599237442', + '231010205143009': '当日' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '2528.400135964155', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '消费者', + '231010190513015': '2528.400135964155', + '231010205143009': '当日' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '1458.996036529541', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '消费者', + '231010190513015': '1458.996036529541', + '231010205143009': '当日' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '1382.7799935340881', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '消费者', + '231010190513015': '1382.7799935340881', + '231010205143009': '当日' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '18896.080198287964', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '消费者', + '231010205143009': '当日', + '231010205143014': '18896.080198287964' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '16592.814119160175', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '消费者', + '231010205143009': '当日', + '231010205143014': '16592.814119160175' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '10673.79599237442', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '消费者', + '231010205143009': '当日', + '231010205143014': '10673.79599237442' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '2528.400135964155', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '消费者', + '231010205143009': '当日', + '231010205143014': '2528.400135964155' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '1458.996036529541', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '消费者', + '231010205143009': '当日', + '231010205143014': '1458.996036529541' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '1382.7799935340881', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '消费者', + '231010205143009': '当日', + '231010205143014': '1382.7799935340881' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '118087.98317557573', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '公司', + '231010190513015': '118087.98317557573', + '231010205143009': '标准级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '106918.77745839208', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '公司', + '231010190513015': '106918.77745839208', + '231010205143009': '标准级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '105005.49484279752', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '公司', + '231010190513015': '105005.49484279752', + '231010205143009': '标准级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '39524.19761827588', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '公司', + '231010190513015': '39524.19761827588', + '231010205143009': '标准级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '35121.29611492157', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '公司', + '231010190513015': '35121.29611492157', + '231010205143009': '标准级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '20351.74444913864', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '公司', + '231010190513015': '20351.74444913864', + '231010205143009': '标准级' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '118087.98317557573', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '公司', + '231010205143009': '标准级', + '231010205143014': '118087.98317557573' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '106918.77745839208', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '公司', + '231010205143009': '标准级', + '231010205143014': '106918.77745839208' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '105005.49484279752', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '公司', + '231010205143009': '标准级', + '231010205143014': '105005.49484279752' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '39524.19761827588', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '公司', + '231010205143009': '标准级', + '231010205143014': '39524.19761827588' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '35121.29611492157', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '公司', + '231010205143009': '标准级', + '231010205143014': '35121.29611492157' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '20351.74444913864', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '公司', + '231010205143009': '标准级', + '231010205143014': '20351.74444913864' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '88442.71798437834', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '小型企业', + '231010190513015': '88442.71798437834', + '231010205143009': '标准级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '53928.448032945395', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '小型企业', + '231010190513015': '53928.448032945395', + '231010205143009': '标准级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '50717.0440325737', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '小型企业', + '231010190513015': '50717.0440325737', + '231010205143009': '标准级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '44391.907398581505', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '小型企业', + '231010190513015': '44391.907398581505', + '231010205143009': '标准级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '6468.615869402885', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '小型企业', + '231010190513015': '6468.615869402885', + '231010205143009': '标准级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '3964.4918270111084', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '小型企业', + '231010190513015': '3964.4918270111084', + '231010205143009': '标准级' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '88442.71798437834', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '小型企业', + '231010205143009': '标准级', + '231010205143014': '88442.71798437834' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '53928.448032945395', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '小型企业', + '231010205143009': '标准级', + '231010205143014': '53928.448032945395' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '50717.0440325737', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '小型企业', + '231010205143009': '标准级', + '231010205143014': '50717.0440325737' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '44391.907398581505', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '小型企业', + '231010205143009': '标准级', + '231010205143014': '44391.907398581505' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '6468.615869402885', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '小型企业', + '231010205143009': '标准级', + '231010205143014': '6468.615869402885' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '3964.4918270111084', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '小型企业', + '231010205143009': '标准级', + '231010205143014': '3964.4918270111084' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '210141.89068495482', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '消费者', + '231010190513015': '210141.89068495482', + '231010205143009': '标准级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '145396.04913766682', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '消费者', + '231010190513015': '145396.04913766682', + '231010205143009': '标准级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '116499.65626353025', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '消费者', + '231010190513015': '116499.65626353025', + '231010205143009': '标准级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '52270.36535333097', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '消费者', + '231010190513015': '52270.36535333097', + '231010205143009': '标准级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '37391.45208977163', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '消费者', + '231010190513015': '37391.45208977163', + '231010205143009': '标准级' + }, + { + '10001': '利润', + '10003': '231010190513015', + '10011': '26372.219661466777', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '消费者', + '231010190513015': '26372.219661466777', + '231010205143009': '标准级' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '210141.89068495482', + '20001': '利润', + '231010112314020': '中南', + '231010171607024': '消费者', + '231010205143009': '标准级', + '231010205143014': '210141.89068495482' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '145396.04913766682', + '20001': '利润', + '231010112314020': '华东', + '231010171607024': '消费者', + '231010205143009': '标准级', + '231010205143014': '145396.04913766682' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '116499.65626353025', + '20001': '利润', + '231010112314020': '华北', + '231010171607024': '消费者', + '231010205143009': '标准级', + '231010205143014': '116499.65626353025' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '52270.36535333097', + '20001': '利润', + '231010112314020': '地区-dongbei', + '231010171607024': '消费者', + '231010205143009': '标准级', + '231010205143014': '52270.36535333097' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '37391.45208977163', + '20001': '利润', + '231010112314020': '西南', + '231010171607024': '消费者', + '231010205143009': '标准级', + '231010205143014': '37391.45208977163' + }, + { + '10001': '利润', + '10003': '231010205143014', + '10012': '26372.219661466777', + '20001': '利润', + '231010112314020': '西北', + '231010171607024': '消费者', + '231010205143009': '标准级', + '231010205143014': '26372.219661466777' + } + ] + }, + defaultHeaderColWidth: [80, 'auto'], + indicatorTitle: '', + autoWrapText: true, + legends: { + type: 'discrete', + id: 'legend-discrete', + orient: 'bottom', + position: 'middle', + layoutType: 'normal', + visible: true, + maxRow: 1, + title: { + textStyle: { + fontSize: 12, + fill: '#6F6F6F' + } + }, + layoutLevel: 50, + 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' + } + } + }, + pager: { + layout: 'horizontal', + padding: 0, + textStyle: {}, + space: 0, + handler: { + preShape: 'triangleLeft', + nextShape: 'triangleRight', + style: {}, + state: { + disable: {} + } + } + }, + padding: [16, 0, 0, 0], + data: [ + { + label: '利润', + shape: { + fill: '#2E62F1', + symbolType: 'square' + } + } + ] + }, + corner: { + titleOnDimension: 'row' + }, + title: { + text: '', + align: 'center', + orient: 'top', + padding: [3, 0, 5, 0], + textStyle: { + fontSize: 12, + fill: '#333333', + fontWeight: 'bold' + } + }, + theme: { + bodyStyle: { + borderColor: 'rgba(0,4,20,0.2)', + borderLineWidth: [1, 0, 0, 1], + padding: 1 + }, + headerStyle: { + borderColor: 'rgba(0,4,20,0.2)', + fontSize: 12, + color: '#333333', + textAlign: 'center', + borderLineWidth: [0, 0, 1, 1], + padding: [4, 0, 4, 0], + hover: { + cellBgColor: '#eceded' + } + }, + rowHeaderStyle: { + borderColor: 'rgba(0,4,20,0.2)', + fontSize: 12, + color: '#333333', + padding: [0, 0, 0, 4], + borderLineWidth: [1, 1, 0, 0], + hover: { + cellBgColor: '#eceded' + } + }, + cornerHeaderStyle: { + borderColor: 'rgba(0,4,20,0.2)', + textAlign: 'center', + fontSize: 12, + color: '#333333', + fontWeight: 'bold', + borderLineWidth: [0, 1, 1, 0], + padding: 0, + hover: { + cellBgColor: '' + } + }, + cornerRightTopCellStyle: { + borderColor: 'rgba(0,4,20,0.2)', + borderLineWidth: [0, 0, 1, 1], + padding: 0, + hover: { + cellBgColor: '' + } + }, + cornerLeftBottomCellStyle: { + borderColor: 'rgba(0,4,20,0.2)', + borderLineWidth: [1, 0, 0, 0], + hover: { + cellBgColor: '' + } + }, + cornerRightBottomCellStyle: { + borderColor: 'rgba(0,4,20,0.2)', + borderLineWidth: [1, 0, 0, 1], + hover: { + cellBgColor: '' + } + }, + rightFrozenStyle: { + borderColor: 'rgba(0,4,20,0.2)', + borderLineWidth: [1, 0, 1, 1], + hover: { + cellBgColor: '#eceded' + } + }, + bottomFrozenStyle: { + borderColor: 'rgba(0,4,20,0.2)', + borderLineWidth: [1, 0, 0, 1], + padding: 0, + hover: { + cellBgColor: '#eceded' + } + }, + selectionStyle: { + cellBgColor: '', + cellBorderColor: '' + }, + frameStyle: { + borderLineWidth: 0 + } + }, + // for nodejs + mode: 'node', + modeParams: { + createCanvas: canvas_1.createCanvas, + createImageData: canvas_1.createImageData, + loadImage: canvas_1.loadImage, + Resvg: resvg_js_1.Resvg + }, + canvasWidth: 1000, + canvasHeight: 700 + }; + var tableInstance = new VTable.PivotChart(option); + setTimeout(function () { + var buffer = tableInstance.getImageBuffer(); + fs_1.writeFileSync("".concat(__dirname, "/pivot-chart.png"), buffer); + }, 0); +} +exports.createPivotChart = createPivotChart; diff --git a/packages/vtable/nodejs/pivot-table.js b/packages/vtable/nodejs/pivot-table.js new file mode 100644 index 000000000..f23dae9bc --- /dev/null +++ b/packages/vtable/nodejs/pivot-table.js @@ -0,0 +1,502 @@ +"use strict"; +exports.__esModule = true; +exports.createPivotTable = void 0; +/* eslint-disable */ +var fs_1 = require("fs"); +var canvas_1 = require("canvas"); +var VTable = require("../cjs/index"); +var resvg_js_1 = require("@resvg/resvg-js"); +function generatePivotDataSource(num, colCount) { + var array = new Array(num); + for (var i = 0; i < num; i++) { + var data = new Array(colCount); + for (var j = 0; j < colCount; j++) { + data[j] = i + j; + } + array[i] = data; + } + return array; +} +var DEFAULT_BAR_COLOR = function (data) { + var _a; + var num = ((_a = data.percentile) !== null && _a !== void 0 ? _a : 0) * 100; + if (num > 80) { + return '#20a8d8'; + } + if (num > 50) { + return '#4dbd74'; + } + if (num > 20) { + return '#ffc107'; + } + return '#f86c6b'; +}; +function createPivotTable() { + var records = generatePivotDataSource(19, 18); + var theme = { + underlayBackgroundColor: '#F6F6F6', + defaultStyle: { + borderColor: '#000', + color: '#000', + bgColor: '#F6F6F6' + }, + headerStyle: { + bgColor: '#F5F6FA', + frameStyle: { + borderColor: '#00ffff', + borderLineWidth: 2 + } + }, + selectionStyle: { + cellBgColor: 'rgba(130,178,245, 0.2)', + cellBorderColor: '#003fff', + cellBorderLineWidth: 2 + }, + rowHeaderStyle: { + bgColor: '#F3F8FF', + frameStyle: { + borderColor: '#ff00ff', + borderLineWidth: 2 + } + }, + cornerHeaderStyle: { + bgColor: '#CCE0FF', + fontSize: 20, + fontFamily: 'sans-serif', + frameStyle: { + borderColor: '#00ff00', + borderLineWidth: 2 + } + }, + bodyStyle: { + hover: { + cellBgColor: '#CCE0FF', + inlineRowBgColor: '#F3F8FF', + inlineColumnBgColor: '#F3F8FF' + }, + frameStyle: { + borderColor: '#ffff00', + borderLineWidth: 5 + } + }, + frameStyle: { + borderColor: '#000', + borderLineWidth: 1, + borderLineDash: [] + }, + columnResize: { + lineWidth: 1, + lineColor: '#416EFF', + bgColor: '#D9E2FF', + width: 3 + }, + frozenColumnLine: { + shadow: { + width: 24, + startColor: 'rgba(00, 24, 47, 0.06)', + endColor: 'rgba(00, 24, 47, 0)' + } + } + // menuStyle: { + // color: '#000', + // highlightColor: '#2E68CF', + // font: '12px sans-serif', + // highlightFont: '12px sans-serif', + // hoverBgColor: '#EEE' + // } + }; + var option = { + columnHeaderTitle: { + title: true, + headerStyle: { + textStick: true + } + }, + columns: [ + { + dimensionKey: '地区', + title: '地区', + headerFormat: function (value) { + return "".concat(value, "\u5730\u533A"); + }, + description: function (args) { + return args.value; + }, + cornerDescription: '地区维度', + headerStyle: { + textAlign: 'center', + borderColor: 'blue', + color: 'pink', + textStick: true, + bgColor: function (arg) { + if (arg.cellHeaderPaths.colHeaderPaths && arg.cellHeaderPaths.colHeaderPaths[0].value === '东北') { + return '#bd422a'; + } + if (arg.cellHeaderPaths.colHeaderPaths && arg.cellHeaderPaths.colHeaderPaths[0].value === '华北') { + return '#ff9900'; + } + return 'gray'; + } + }, + // 指标菜单 + dropDownMenu: ['升序排序I', '降序排序I', '冻结列I'], + // corner菜单 + cornerDropDownMenu: ['升序排序C', '降序排序C', '冻结列C'], + drillDown: true + }, + { + dimensionKey: '邮寄方式', + title: '邮寄方式11', + headerFormat: function (value) { + return "".concat(value, "\u90AE\u5BC4\u65B9\u5F0F"); + }, + headerStyle: { + textAlign: 'left', + borderColor: 'blue', + color: 'pink', + // lineHeight: '2em', + fontSize: 16, + fontStyle: 'bold', + fontFamily: 'sans-serif', + underline: true, + textStick: true, + bgColor: function (arg) { + if (arg.cellHeaderPaths.colHeaderPaths && arg.cellHeaderPaths.colHeaderPaths[0].value === '东北') { + return '#bd422a'; + } + if (arg.cellHeaderPaths.colHeaderPaths && arg.cellHeaderPaths.colHeaderPaths[0].value === '华北') { + return '#ff9900'; + } + return 'gray'; + } + }, + drillUp: false + } + ], + rows: [ + { + dimensionKey: '类别', + title: '类别', + drillUp: true, + width: 'auto', + headerStyle: { + textAlign: 'center', + borderColor: 'blue', + color: 'purple', + textBaseline: 'top', + textStick: true, + bgColor: '#6cd26f' + } + }, + { + dimensionKey: '子类别', + title: '子类别', + headerStyle: { + textAlign: 'center', + color: 'blue', + bgColor: '#45b89f' + }, + width: 'auto', + dropDownMenu: ['升序排序I', '降序排序I', '冻结列I'] + // headerType: 'MULTILINETEXT', + } + ], + indicators: [ + { + indicatorKey: '1', + title: '销售额', + format: function (rec) { + return "".concat(rec.dataValue, "%"); + }, + headerStyle: { + color: 'red', + bgColor: function (arg) { + if (arg.cellHeaderPaths.colHeaderPaths && arg.cellHeaderPaths.colHeaderPaths[0].value === '东北') { + return '#bd422a'; + } + if (arg.cellHeaderPaths.colHeaderPaths && arg.cellHeaderPaths.colHeaderPaths[0].value === '华北') { + return '#ff9900'; + } + return 'gray'; + } + }, + style: { + barHeight: '100%', + // barBgColor: '#aaa', + // barColor: '#444', + barBgColor: function (data) { + var _a, _b, _c; + return "rgb(".concat(100 + 100 * (1 - ((_a = data.percentile) !== null && _a !== void 0 ? _a : 0)), ",").concat(100 + 100 * (1 - ((_b = data.percentile) !== null && _b !== void 0 ? _b : 0)), ",").concat(255 * (1 - ((_c = data.percentile) !== null && _c !== void 0 ? _c : 0)), ")"); + }, + barColor: 'transparent' + }, + cellType: 'progressbar', + showSort: true + // headerType: 'MULTILINETEXT', + }, + { + indicatorKey: '2', + title: '利润', + format: function (rec) { + // if (rec.rowDimensions[0].value === '东北') return `${rec.dataValue}%`; + return rec.dataValue; + }, + cellType: 'progressbar', + style: { + barHeight: '50%', + barBottom: 20, + barColor: DEFAULT_BAR_COLOR + }, + showSort: true, + dropDownMenu: ['利润升序排序I', '利润降序排序I', '利润冻结列I'] + } + ], + columnTree: [ + { + dimensionKey: '地区', + value: '东北', + children: [ + { + dimensionKey: '邮寄方式', + value: '一级', + children: [ + { + // dimensionKey: '指标名称', + indicatorKey: '1', + value: '销售额' + }, + { + // dimensionKey: '指标名称', + indicatorKey: '2', + value: '利润' + } + ] + }, + { + dimensionKey: '邮寄方式', + value: '二级', + children: [ + { + // dimensionKey: '指标名称', + indicatorKey: '1', + value: '销售额' + }, + { + // dimensionKey: '指标名称', + indicatorKey: '2', + value: '利润' + } + ] + }, + { + dimensionKey: '邮寄方式', + value: '三级', + children: [ + { + // dimensionKey: '指标名称', + indicatorKey: '1', + value: '销售额' + }, + { + // dimensionKey: '指标名称', + indicatorKey: '2', + value: '利润' + } + ] + } + ] + }, + { + dimensionKey: '地区', + value: '华北', + children: [ + { + dimensionKey: '邮寄方式', + value: '一级', + children: [ + { + indicatorKey: '1', + value: '销售额' + }, + { + indicatorKey: '2', + value: '利润' + } + ] + }, + { + dimensionKey: '邮寄方式', + value: '二级', + children: [ + { + indicatorKey: '1', + value: '销售额' + }, + { + indicatorKey: '2', + value: '利润' + } + ] + }, + { + dimensionKey: '邮寄方式', + value: '三级', + children: [ + { + // dimensionKey: '指标名称', + indicatorKey: '1', + value: '销售额' + }, + { + // dimensionKey: '指标名称', + indicatorKey: '2', + value: '利润' + } + ] + } + ] + }, + { + dimensionKey: '地区', + value: '中南', + children: [ + { + dimensionKey: '邮寄方式', + value: '一级', + children: [ + { + // dimensionKey: '指标名称', + indicatorKey: '1', + value: '销售额' + }, + { + // dimensionKey: '指标名称', + indicatorKey: '2', + value: '利润' + } + ] + }, + { + dimensionKey: '邮寄方式', + value: '二级', + children: [ + { + // dimensionKey: '指标名称', + indicatorKey: '1', + value: '销售额' + }, + { + // dimensionKey: '指标名称', + indicatorKey: '2', + value: '利润' + } + ] + }, + { + dimensionKey: '邮寄方式', + value: '三级', + children: [ + { + // dimensionKey: '指标名称', + indicatorKey: '1', + value: '销售额' + }, + { + // dimensionKey: '指标名称', + indicatorKey: '2', + value: '利润' + } + ] + } + ] + } + ], + rowTree: [ + { + dimensionKey: '类别', + value: '办公用品', + children: [ + { dimensionKey: '子类别', value: '电脑' }, + { dimensionKey: '子类别', value: '装订机' }, + { dimensionKey: '子类别', value: '签字笔' }, + { dimensionKey: '子类别', value: '标签' }, + { dimensionKey: '子类别', value: '收纳柜' }, + { dimensionKey: '子类别', value: '纸张' }, + { dimensionKey: '子类别', value: '电灯' } + ] + }, + { + dimensionKey: '类别', + value: '家具', + children: [ + { dimensionKey: '子类别', value: '衣柜' }, + { dimensionKey: '子类别', value: '沙发' }, + { dimensionKey: '子类别', value: '餐桌' }, + { dimensionKey: '子类别', value: '椅子' }, + { dimensionKey: '子类别', value: '桌子' } + ] + }, + { + dimensionKey: '类别', + value: '餐饮', + children: [ + { dimensionKey: '子类别', value: '锅具' }, + { + dimensionKey: '子类别', + value: '油盐酱醋' + }, + { dimensionKey: '子类别', value: '米面' } + ] + }, + { + dimensionKey: '类别', + value: '技术', + children: [ + { dimensionKey: '子类别', value: '设备' }, + { dimensionKey: '子类别', value: '配件' }, + { dimensionKey: '子类别', value: '电话' }, + { dimensionKey: '子类别', value: '复印机' } + ] + } + ], + corner: { + titleOnDimension: 'column', + headerStyle: { + textAlign: 'center', + borderColor: 'red', + color: 'yellow', + underline: true, + fontSize: 16, + fontStyle: 'bold', + fontFamily: 'sans-serif' + // lineHeight: '20px' + } + }, + indicatorTitle: '指标名称', + // indicatorsAsCol: false, + records: records, + theme: theme, + showFrozenIcon: false, + allowFrozenColCount: 2, + widthMode: 'autoWidth', + defaultRowHeight: 80, + columnResizeType: 'indicator', + tooltip: { + isShowOverflowTextTooltip: true + }, + // for nodejs + mode: 'node', + modeParams: { + createCanvas: canvas_1.createCanvas, + createImageData: canvas_1.createImageData, + loadImage: canvas_1.loadImage, + Resvg: resvg_js_1.Resvg + }, + canvasWidth: 1000, + canvasHeight: 700 + }; + var tableInstance = new VTable.PivotTable(option); + var buffer = tableInstance.getImageBuffer(); + fs_1.writeFileSync("".concat(__dirname, "/pivot-table.png"), buffer); +} +exports.createPivotTable = createPivotTable; diff --git a/packages/vtable/nodejs/small-table.js b/packages/vtable/nodejs/small-table.js new file mode 100644 index 000000000..916ca257b --- /dev/null +++ b/packages/vtable/nodejs/small-table.js @@ -0,0 +1,58 @@ +"use strict"; +exports.__esModule = true; +exports.createSmallTable = void 0; +/* eslint-disable */ +var fs_1 = require("fs"); +var canvas_1 = require("canvas"); +var VTable = require("../cjs/index"); +var resvg_js_1 = require("@resvg/resvg-js"); +var generatePersons = function (count) { + return Array.from(new Array(count)).map(function (_, i) { return ({ + id: i + 1, + email1: "".concat(i + 1, "@xxx.com"), + name: "\u5C0F\u660E".concat(i + 1), + lastName: '王', + date1: '2022年9月1日', + tel: '000-0000-0000', + sex: i % 2 === 0 ? 'boy' : 'girl', + work: i % 2 === 0 ? 'back-end engineer' : 'front-end engineer', + city: 'beijing' + }); }); +}; +function createSmallTable() { + var records = generatePersons(3); + var columns = [ + { + field: 'id', + title: 'ID ff', + width: '1%', + minWidth: 200, + sort: true + }, + { + field: 'email1', + title: 'email', + width: 200, + sort: true + } + ]; + var option = { + records: records, + columns: columns, + pixelRatio: 2, + // for nodejs + mode: 'node', + modeParams: { + createCanvas: canvas_1.createCanvas, + createImageData: canvas_1.createImageData, + loadImage: canvas_1.loadImage, + Resvg: resvg_js_1.Resvg + }, + canvasWidth: 500, + canvasHeight: 300 + }; + var tableInstance = new VTable.ListTable(option); + var buffer = tableInstance.getImageBuffer(); + fs_1.writeFileSync("".concat(__dirname, "/small-table.png"), buffer); +} +exports.createSmallTable = createSmallTable; diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts index 22d989f49..ba4ee2f25 100644 --- a/packages/vtable/src/core/BaseTable.ts +++ b/packages/vtable/src/core/BaseTable.ts @@ -134,7 +134,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { */ readonly options: BaseTableConstructorOptions; - // version = __VERSION__; + version = __VERSION__; pagination?: IPagination | undefined; diff --git a/packages/vtable/src/index.ts b/packages/vtable/src/index.ts index 2604b7995..13ad16eff 100644 --- a/packages/vtable/src/index.ts +++ b/packages/vtable/src/index.ts @@ -36,7 +36,7 @@ import * as CustomLayout from './render/layout'; export { getDataCellPath } from './tools/get-data-path'; export * from './render/jsx'; -// export const version = __VERSION__; +export const version = __VERSION__; /** * @namespace VTable */ From 4fdd6f3e46f0b1b280d3a0055021ee2e7312b024 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Tue, 17 Oct 2023 18:05:20 +0800 Subject: [PATCH 10/48] fix: fix ts problem for broswer env --- .../vtable/src/components/menu/dom/logic/MenuElementStyle.ts | 2 +- .../src/components/tooltip/logic/BubbleTooltipElementStyle.ts | 2 +- packages/vtable/src/core/style.ts | 2 +- packages/vtable/src/scenegraph/graphic/chart.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/vtable/src/components/menu/dom/logic/MenuElementStyle.ts b/packages/vtable/src/components/menu/dom/logic/MenuElementStyle.ts index 180deb32b..15bc2f500 100644 --- a/packages/vtable/src/components/menu/dom/logic/MenuElementStyle.ts +++ b/packages/vtable/src/components/menu/dom/logic/MenuElementStyle.ts @@ -2,7 +2,7 @@ import { Env } from '../../../../tools/env'; export function importStyle() { if (Env.mode === 'node') { - return -1; + return; } const styleElement = document.createElement('style'); styleElement.id = 'vtable-menu-styleSheet'; diff --git a/packages/vtable/src/components/tooltip/logic/BubbleTooltipElementStyle.ts b/packages/vtable/src/components/tooltip/logic/BubbleTooltipElementStyle.ts index 744557ff1..c81427eae 100644 --- a/packages/vtable/src/components/tooltip/logic/BubbleTooltipElementStyle.ts +++ b/packages/vtable/src/components/tooltip/logic/BubbleTooltipElementStyle.ts @@ -2,7 +2,7 @@ import { Env } from '../../../tools/env'; export function importStyle() { if (Env.mode === 'node') { - return -1; + return; } const styleElement = document.createElement('style'); styleElement.id = 'vtable-tooltip-styleSheet'; diff --git a/packages/vtable/src/core/style.ts b/packages/vtable/src/core/style.ts index 829337360..05b6125bb 100644 --- a/packages/vtable/src/core/style.ts +++ b/packages/vtable/src/core/style.ts @@ -2,7 +2,7 @@ import { Env } from '../tools/env'; export function importStyle() { if (Env.mode === 'node') { - return -1; + return; } const styleElement = document.createElement('style'); styleElement.id = 'vtable-style-styleSheet'; diff --git a/packages/vtable/src/scenegraph/graphic/chart.ts b/packages/vtable/src/scenegraph/graphic/chart.ts index 8bd16460b..00a8755bc 100644 --- a/packages/vtable/src/scenegraph/graphic/chart.ts +++ b/packages/vtable/src/scenegraph/graphic/chart.ts @@ -41,7 +41,7 @@ export class Chart extends Group { if (!params.chartInstance) { params.chartInstance = this.chartInstance = new params.ClassType(params.spec, { renderCanvas: params.canvas, - mode: (this.attribute.mode = 'node' ? 'node' : 'desktop-browser'), + mode: this.attribute.mode === 'node' ? 'node' : 'desktop-browser', modeParams: this.attribute.modeParams, canvasControled: false, viewBox: { x1: 0, x2: 0, y1: 0, y2: 0 }, From 97a79dc04fec7eb94f57c3739cedf52e6935eb21 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Thu, 19 Oct 2023 14:42:58 +0800 Subject: [PATCH 11/48] feat: add initialized event #301 --- packages/vtable/examples/list/list-100w.ts | 3 +++ .../examples/pivot-chart/pivot-chart-event.ts | 6 +++--- packages/vtable/src/ListTable.ts | 14 ++++++++------ packages/vtable/src/core/BaseTable.ts | 8 +++++++- packages/vtable/src/core/TABLE_EVENT_TYPE.ts | 11 ++++++++--- packages/vtable/src/scenegraph/scenegraph.ts | 3 ++- packages/vtable/src/ts-types/events.ts | 5 +++-- 7 files changed, 34 insertions(+), 16 deletions(-) diff --git a/packages/vtable/examples/list/list-100w.ts b/packages/vtable/examples/list/list-100w.ts index ef9a1449a..ed850d3f1 100644 --- a/packages/vtable/examples/list/list-100w.ts +++ b/packages/vtable/examples/list/list-100w.ts @@ -176,5 +176,8 @@ export function createTable() { autoWrapText: true }; const tableInstance = new VTable.ListTable(option); + tableInstance.on('initialized', args => { + console.log('initialized'); + }); window.tableInstance = tableInstance; } diff --git a/packages/vtable/examples/pivot-chart/pivot-chart-event.ts b/packages/vtable/examples/pivot-chart/pivot-chart-event.ts index 2244f1764..3b7f7e56d 100644 --- a/packages/vtable/examples/pivot-chart/pivot-chart-event.ts +++ b/packages/vtable/examples/pivot-chart/pivot-chart-event.ts @@ -762,13 +762,13 @@ export function createTable() { window.tableInstance = tableInstance; bindDebugTool(tableInstance.scenegraph.stage, {}); - const { SCROLL, AFTER_STAGE_RENDER } = VTable.PivotChart.EVENT_TYPE; + const { SCROLL, AFTER_RENDER } = VTable.PivotChart.EVENT_TYPE; tableInstance.on(SCROLL, e => { console.log('scroll', e); }); - tableInstance.on(AFTER_STAGE_RENDER, () => { - console.log('render'); + tableInstance.on(AFTER_RENDER, () => { + console.log('AFTER_RENDER'); }); const targetData = { diff --git a/packages/vtable/src/ListTable.ts b/packages/vtable/src/ListTable.ts index 9d13d25a1..06b116643 100644 --- a/packages/vtable/src/ListTable.ts +++ b/packages/vtable/src/ListTable.ts @@ -72,6 +72,10 @@ export class ListTable extends BaseTable implements ListTableAPI { internalProps.title = new Title(options.title, this); this.scenegraph.resize(); } + //为了确保用户监听得到这个事件 这里做了异步 确保vtable实例已经初始化完成 + setTimeout(() => { + this.fireListeners(TABLE_EVENT_TYPE.INITIALIZED, null); + }, 0); } isListTable(): true { return true; @@ -112,7 +116,7 @@ export class ListTable extends BaseTable implements ListTableAPI { this.headerStyleCache = new Map(); this.bodyStyleCache = new Map(); this.scenegraph.createSceneGraph(); - this.render(); + this.renderAsync(); } /** *@deprecated 请使用columns @@ -128,9 +132,7 @@ export class ListTable extends BaseTable implements ListTableAPI { this.options.header = header; this.refreshHeader(); //需要异步等待其他事情都完成后再绘制 - setTimeout(() => { - this.render(); - }, 0); + this.renderAsync(); } /** * Get the transpose. @@ -154,7 +156,7 @@ export class ListTable extends BaseTable implements ListTableAPI { // 转置后为行布局，列宽只支持依据该列所有内容自适应宽度 this._resetFrozenColCount(); - this.render(); + this.renderAsync(); } } /** 获取单元格展示值 */ @@ -283,7 +285,7 @@ export class ListTable extends BaseTable implements ListTableAPI { this.refreshRowColCount(); // 生成单元格场景树 this.scenegraph.createSceneGraph(); - this.render(); + this.renderAsync(); } } /** @private */ diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts index f1b3f1230..c72b70ff8 100644 --- a/packages/vtable/src/core/BaseTable.ts +++ b/packages/vtable/src/core/BaseTable.ts @@ -1534,11 +1534,17 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { } /** - * 重绘表格 + * 重绘表格(同步绘制) */ render(): void { this.scenegraph.renderSceneGraph(); } + /** + * 异步重绘表格 + */ + renderAsync(): void { + this.scenegraph.updateNextFrame(); + } /** * 转换成视觉相对table左上角的坐标 如滚动超出表格上方 y将为负值 * @param absoluteRect diff --git a/packages/vtable/src/core/TABLE_EVENT_TYPE.ts b/packages/vtable/src/core/TABLE_EVENT_TYPE.ts index 8a6a0aeeb..0c0e0a1d5 100644 --- a/packages/vtable/src/core/TABLE_EVENT_TYPE.ts +++ b/packages/vtable/src/core/TABLE_EVENT_TYPE.ts @@ -116,8 +116,12 @@ export interface TableEvents { MOUSEENTER_AXIS: 'mouseenter_axis'; MOUSELEAVE_AXIS: 'mouseleave_axis'; - - AFTER_STAGE_RENDER: 'after_stage_render'; + //#region lifecircle + /** 每次渲染完成触发 */ + AFTER_RENDER: 'after_render'; + /** 表格实例初始化完成 */ + INITIALIZED: 'initialized'; + //#endregion } /** * Table event types @@ -163,5 +167,6 @@ export const TABLE_EVENT_TYPE: TableEvents = { MOUSEENTER_AXIS: 'mouseenter_axis', MOUSELEAVE_AXIS: 'mouseleave_axis', - AFTER_STAGE_RENDER: 'after_stage_render' + AFTER_RENDER: 'after_render', + INITIALIZED: 'initialized' } as TableEvents; diff --git a/packages/vtable/src/scenegraph/scenegraph.ts b/packages/vtable/src/scenegraph/scenegraph.ts index a1ddfe4f7..9f83c5a4b 100644 --- a/packages/vtable/src/scenegraph/scenegraph.ts +++ b/packages/vtable/src/scenegraph/scenegraph.ts @@ -144,7 +144,8 @@ export class Scenegraph { enableLayout: true, pluginList: table.isPivotChart() ? ['poptipForText'] : undefined, afterRender: () => { - this.table.fireListeners('after_stage_render', null); + this.table.fireListeners('after_render', null); + // console.trace('after_render'); } // autoRender: true }); diff --git a/packages/vtable/src/ts-types/events.ts b/packages/vtable/src/ts-types/events.ts index 798b637e8..baf748da6 100644 --- a/packages/vtable/src/ts-types/events.ts +++ b/packages/vtable/src/ts-types/events.ts @@ -154,7 +154,8 @@ export interface TableEventHandlersEventArgumentMap { mouseenter_axis: MousePointerCellEvent & { axisPosition: 'left' | 'right' | 'top' | 'bottom' }; mouseleave_axis: MousePointerCellEvent & { axisPosition: 'left' | 'right' | 'top' | 'bottom' }; - after_stage_render: null; + after_render: null; + initialized: null; } export interface DrillMenuEventInfo { dimensionKey: string | number; @@ -216,5 +217,5 @@ export interface TableEventHandlersReturnMap { mouseenter_axis: void; mouseleave_axis: void; - after_stage_render: void; + after_render: void; } From d51f9077c087f42d80ed429bc974ba41f5406997 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Thu, 19 Oct 2023 14:43:25 +0800 Subject: [PATCH 12/48] docs: update changlog of rush --- ...le-rendering-to-finished-api_2023-10-19-06-43.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/@visactor/vtable/301-feature-add-vtable-rendering-to-finished-api_2023-10-19-06-43.json diff --git a/common/changes/@visactor/vtable/301-feature-add-vtable-rendering-to-finished-api_2023-10-19-06-43.json b/common/changes/@visactor/vtable/301-feature-add-vtable-rendering-to-finished-api_2023-10-19-06-43.json new file mode 100644 index 000000000..7fc1c81f3 --- /dev/null +++ b/common/changes/@visactor/vtable/301-feature-add-vtable-rendering-to-finished-api_2023-10-19-06-43.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "feat: add initialized event #301\n\n", + "type": "patch", + "packageName": "@visactor/vtable" + } + ], + "packageName": "@visactor/vtable", + "email": "892739385@qq.com" +} \ No newline at end of file From 10624423a07a58284a1d827e8d1911ea90d88f4b Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Thu, 19 Oct 2023 14:45:29 +0800 Subject: [PATCH 13/48] feat: add initialized event #301 --- packages/vtable/src/ts-types/events.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/vtable/src/ts-types/events.ts b/packages/vtable/src/ts-types/events.ts index baf748da6..14edeef2d 100644 --- a/packages/vtable/src/ts-types/events.ts +++ b/packages/vtable/src/ts-types/events.ts @@ -218,4 +218,5 @@ export interface TableEventHandlersReturnMap { mouseleave_axis: void; after_render: void; + initialized: void; } From 65842d6ca8d1bd51f191e5558a742d456cf53c25 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Thu, 19 Oct 2023 15:06:52 +0800 Subject: [PATCH 14/48] docs: add event api --- docs/assets/api/en/event/event.md | 9 +++++++-- docs/assets/api/zh/event/event.md | 7 ++++++- docs/assets/demo/en/component/dropdown.md | 4 ++-- docs/assets/demo/en/component/tooltip.md | 2 +- docs/assets/demo/en/interaction/context-menu.md | 2 +- docs/assets/guide/en/Event/event_list.md | 2 +- docs/assets/guide/zh/Event/event_list.md | 4 +++- .../vtable/examples/frozen/pivot-table-both-frozen.ts | 2 +- .../vtable/examples/frozen/pivot-table-bottom-frozen.ts | 2 +- .../vtable/examples/frozen/pivot-table-right-frozen.ts | 2 +- packages/vtable/examples/pivot-chart/aeolus.ts | 4 ++-- 11 files changed, 26 insertions(+), 14 deletions(-) diff --git a/docs/assets/api/en/event/event.md b/docs/assets/api/en/event/event.md index 8faa3e275..9da7bf2b2 100644 --- a/docs/assets/api/en/event/event.md +++ b/docs/assets/api/en/event/event.md @@ -344,10 +344,15 @@ The mouse leaves the axis event. **Axis-specific events** The parameter type of the event callback function: Same as **MOUSEENTER_AXIS** +## INITIALIZED +Triggered after successful initialization is completed -##onVChartEvent +## AFTER_RENDER +Triggered after each rendering is completed -Listen to vchart events, specific event types can refer to (VChart events)[ff] +## onVChartEvent + +Listen to vchart events, specific event types can refer to [VChart Events](https://visactor.io/vchart/api/API/event) ``` /** diff --git a/docs/assets/api/zh/event/event.md b/docs/assets/api/zh/event/event.md index 70fb30ea8..0c3f24264 100644 --- a/docs/assets/api/zh/event/event.md +++ b/docs/assets/api/zh/event/event.md @@ -370,9 +370,14 @@ icon 图标点击事件。 事件回调函数的参数类型: 同**MOUSEENTER_AXIS** +## INITIALIZED +成功初始化完成后触发 +## AFTER_RENDER +每次渲染完成后触发 + ## onVChartEvent -监听 vchart 事件，具体事件类型可参考(VChart 事件)[ff] +监听 vchart 事件，具体事件类型可参考[VChart 事件](https://visactor.io/vchart/api/API/event) ``` /** diff --git a/docs/assets/demo/en/component/dropdown.md b/docs/assets/demo/en/component/dropdown.md index 20bd5f43e..57038e091 100644 --- a/docs/assets/demo/en/component/dropdown.md +++ b/docs/assets/demo/en/component/dropdown.md @@ -156,7 +156,7 @@ const option = { tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option); window['tableInstance'] = tableInstance; -tableInstance.listen('click_cell', (args) => { +tableInstance.on('click_cell', (args) => { const { col, row, targetIcon } = args; if(col===0&&row>=1&&targetIcon?.name==='order'){ const { left, top, width, height, bottom, right } = targetIcon.position; @@ -220,7 +220,7 @@ tableInstance.listen('click_cell', (args) => { }); } }); - tableInstance.listen('dropdownmenu_click', (args) => { + tableInstance.on('dropdownmenu_click', (args) => { console.log('dropdownmenu_click',args); tableInstance.setDropDownMenuHighlight([args]); }) diff --git a/docs/assets/demo/en/component/tooltip.md b/docs/assets/demo/en/component/tooltip.md index 312f83cba..1b1ad3592 100644 --- a/docs/assets/demo/en/component/tooltip.md +++ b/docs/assets/demo/en/component/tooltip.md @@ -95,7 +95,7 @@ const columns =[ }; tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option); window['tableInstance'] = tableInstance; - tableInstance.listen('mouseenter_cell', (args) => { + tableInstance.on('mouseenter_cell', (args) => { const { col, row, targetIcon } = args; if(col===0&&row>=1){ const rect = tableInstance.getVisibleCellRangeRelativeRect({ col, row }); diff --git a/docs/assets/demo/en/interaction/context-menu.md b/docs/assets/demo/en/interaction/context-menu.md index 1e279c841..112d530da 100644 --- a/docs/assets/demo/en/interaction/context-menu.md +++ b/docs/assets/demo/en/interaction/context-menu.md @@ -95,7 +95,7 @@ tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), opti window['tableInstance'] = tableInstance; -tableInstance.listen('dropdownmenu_click', (args) => { +tableInstance.on('dropdownmenu_click', (args) => { console.log('dropdownmenu_click',args); }) }) diff --git a/docs/assets/guide/en/Event/event_list.md b/docs/assets/guide/en/Event/event_list.md index 1e2423b3f..daff4f041 100644 --- a/docs/assets/guide/en/Event/event_list.md +++ b/docs/assets/guide/en/Event/event_list.md @@ -62,4 +62,4 @@ The specific return data of the event can be actually tested to observe whether CONTEXTMENU_CELL, } = VTable.ListGrid.EVENT_TYPE; const tableInstance =new ListGrid(options); - tableInstance.listen(CLICK_CELL, (...args) => console.log(CLICK_CELL, args)); + tableInstance.on(CLICK_CELL, (...args) => console.log(CLICK_CELL, args)); diff --git a/docs/assets/guide/zh/Event/event_list.md b/docs/assets/guide/zh/Event/event_list.md index 49cf5239a..e543c566e 100644 --- a/docs/assets/guide/zh/Event/event_list.md +++ b/docs/assets/guide/zh/Event/event_list.md @@ -36,6 +36,8 @@ |图例项unhover|LEGEND\_ITEM\_UNHOVER|鼠标离开hover的图例项| |鼠标进入坐标轴|MOUSEENTER\_AXIS|鼠标进入坐标轴组件| |鼠标离开坐标轴|MOUSELEAVE\_AXIS|鼠标离开坐标轴组件| +|生命周期事件：完成初始化|INITIALIZED|生命周期事件：成功初始化完成后触发| +|渲染完成|AFTER\_RENDER|每次渲染完成触发| ## 事件监听方式 @@ -63,5 +65,5 @@ const { CONTEXTMENU_CELL, } = VTable.ListGrid.EVENT_TYPE; const tableInstance =new ListGrid(options); - tableInstance.listen(CLICK_CELL, (...args) => console.log(CLICK_CELL, args)); + tableInstance.on(CLICK_CELL, (...args) => console.log(CLICK_CELL, args)); ``` diff --git a/packages/vtable/examples/frozen/pivot-table-both-frozen.ts b/packages/vtable/examples/frozen/pivot-table-both-frozen.ts index a0c2e338b..e673a9cef 100644 --- a/packages/vtable/examples/frozen/pivot-table-both-frozen.ts +++ b/packages/vtable/examples/frozen/pivot-table-both-frozen.ts @@ -495,7 +495,7 @@ export function createTable() { window.tableInstance = instance; const { PIVOT_SORT_CLICK } = VTable.PivotTable.EVENT_TYPE; - instance.listen(PIVOT_SORT_CLICK, e => { + instance.on(PIVOT_SORT_CLICK, e => { const order = e.order === 'asc' ? 'desc' : e.order === 'desc' ? 'normal' : 'asc'; instance.updatePivotSortState([{ dimensions: e.dimensionInfo, order }]); }); diff --git a/packages/vtable/examples/frozen/pivot-table-bottom-frozen.ts b/packages/vtable/examples/frozen/pivot-table-bottom-frozen.ts index 50a322352..6f61024db 100644 --- a/packages/vtable/examples/frozen/pivot-table-bottom-frozen.ts +++ b/packages/vtable/examples/frozen/pivot-table-bottom-frozen.ts @@ -494,7 +494,7 @@ export function createTable() { window.tableInstance = instance; const { PIVOT_SORT_CLICK } = VTable.PivotTable.EVENT_TYPE; - instance.listen(PIVOT_SORT_CLICK, e => { + instance.on(PIVOT_SORT_CLICK, e => { const order = e.order === 'asc' ? 'desc' : e.order === 'desc' ? 'normal' : 'asc'; instance.updatePivotSortState([{ dimensions: e.dimensionInfo, order }]); }); diff --git a/packages/vtable/examples/frozen/pivot-table-right-frozen.ts b/packages/vtable/examples/frozen/pivot-table-right-frozen.ts index 793ee1396..12444fe88 100644 --- a/packages/vtable/examples/frozen/pivot-table-right-frozen.ts +++ b/packages/vtable/examples/frozen/pivot-table-right-frozen.ts @@ -494,7 +494,7 @@ export function createTable() { window.tableInstance = instance; const { PIVOT_SORT_CLICK } = VTable.PivotTable.EVENT_TYPE; - instance.listen(PIVOT_SORT_CLICK, e => { + instance.on(PIVOT_SORT_CLICK, e => { const order = e.order === 'asc' ? 'desc' : e.order === 'desc' ? 'normal' : 'asc'; instance.updatePivotSortState([{ dimensions: e.dimensionInfo, order }]); }); diff --git a/packages/vtable/examples/pivot-chart/aeolus.ts b/packages/vtable/examples/pivot-chart/aeolus.ts index a19e0a225..981cd2a1a 100644 --- a/packages/vtable/examples/pivot-chart/aeolus.ts +++ b/packages/vtable/examples/pivot-chart/aeolus.ts @@ -1427,10 +1427,10 @@ export function createTable() { hash: '1dcb9dc2d848ceaf060295843bfceeaf' }; const tableInstance = new VTable.PivotChart(document.getElementById(CONTAINER_ID), option); - // tableInstance.listenChart('click', args => { + // tableInstance.onVChartEvent('click', args => { // console.log('listenChart click', args); // }); - // tableInstance.listenChart('mouseover', args => { + // tableInstance.onVChartEvent('mouseover', args => { // console.log('listenChart mouseover', args); // }); window.tableInstance = tableInstance; From 5908d65fdbfa8319b3bda0f9d92db0e7f12c9e00 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Thu, 19 Oct 2023 15:07:14 +0800 Subject: [PATCH 15/48] docs: update changlog of rush --- ...le-rendering-to-finished-api_2023-10-19-07-07.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/@visactor/vtable/301-feature-add-vtable-rendering-to-finished-api_2023-10-19-07-07.json diff --git a/common/changes/@visactor/vtable/301-feature-add-vtable-rendering-to-finished-api_2023-10-19-07-07.json b/common/changes/@visactor/vtable/301-feature-add-vtable-rendering-to-finished-api_2023-10-19-07-07.json new file mode 100644 index 000000000..2af0c4240 --- /dev/null +++ b/common/changes/@visactor/vtable/301-feature-add-vtable-rendering-to-finished-api_2023-10-19-07-07.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "docs: add event api\n\n", + "type": "patch", + "packageName": "@visactor/vtable" + } + ], + "packageName": "@visactor/vtable", + "email": "892739385@qq.com" +} \ No newline at end of file From d12185633d589f2ac5c815becb3233a00ada67ed Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Thu, 19 Oct 2023 15:14:53 +0800 Subject: [PATCH 16/48] fix: frozen column progress index error --- .../src/scenegraph/group-creater/progress/proxy.ts | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/vtable/src/scenegraph/group-creater/progress/proxy.ts b/packages/vtable/src/scenegraph/group-creater/progress/proxy.ts index e0d9f524f..e8d890025 100644 --- a/packages/vtable/src/scenegraph/group-creater/progress/proxy.ts +++ b/packages/vtable/src/scenegraph/group-creater/progress/proxy.ts @@ -80,7 +80,8 @@ export class SceneProxy { } setParamsForColumn() { - this.bodyLeftCol = this.table.rowHeaderLevelCount; + // this.bodyLeftCol = this.table.rowHeaderLevelCount; + this.bodyLeftCol = this.table.frozenColCount; // this.bodyRightCol = this.table.colCount - 1; this.bodyRightCol = this.table.colCount - 1 - this.table.rightFrozenColCount; @@ -224,12 +225,12 @@ export class SceneProxy { // compute rows height computeRowsHeight(this.table, this.currentRow + 1, endRow, false); - if (this.table.rowHeaderLevelCount) { + if (this.table.frozenColCount) { // create row header row cellGroup let maxHeight = 0; - for (let col = 0; col < this.table.rowHeaderLevelCount; col++) { + for (let col = 0; col < this.table.frozenColCount; col++) { const colGroup = this.table.scenegraph.getColGroup(col); - const cellLocation = 'rowHeader'; + const cellLocation = this.table.isListTable() ? 'body' : 'rowHeader'; const { height } = createComplexColumn( colGroup, col, @@ -251,7 +252,7 @@ export class SceneProxy { let maxHeight = 0; for (let col = this.table.colCount - this.table.rightFrozenColCount; col < this.table.colCount; col++) { const colGroup = this.table.scenegraph.getColGroup(col); - const cellLocation = 'rowHeader'; + const cellLocation = this.table.isListTable() ? 'body' : 'rowHeader'; const { height } = createComplexColumn( colGroup, col, @@ -272,6 +273,9 @@ export class SceneProxy { let maxHeight = 0; for (let col = this.bodyLeftCol; col <= this.bodyRightCol; col++) { const colGroup = this.table.scenegraph.getColGroup(col); + if (!colGroup) { + continue; + } const cellLocation = 'body'; const { height } = createComplexColumn( colGroup, From 65f3897e4cd5eb828d4f0f5b580ac670820caee4 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Thu, 19 Oct 2023 17:33:56 +0800 Subject: [PATCH 17/48] fix: when use customlayout function, after resize col width the row height changed #427 --- packages/vtable/src/scenegraph/layout/update-width.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vtable/src/scenegraph/layout/update-width.ts b/packages/vtable/src/scenegraph/layout/update-width.ts index 525fe93c2..1e4c3fa3f 100644 --- a/packages/vtable/src/scenegraph/layout/update-width.ts +++ b/packages/vtable/src/scenegraph/layout/update-width.ts @@ -363,7 +363,7 @@ function updateCellWidth( } } - return isHeightChange; + return autoRowHeight ? isHeightChange : false; } /** From 60e111b10ee397fbb290dd5d182a4a3e4d6eaa75 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Thu, 19 Oct 2023 17:34:23 +0800 Subject: [PATCH 18/48] docs: update changlog of rush --- .../427-bug-row-height-changed_2023-10-19-09-34.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/@visactor/vtable/427-bug-row-height-changed_2023-10-19-09-34.json diff --git a/common/changes/@visactor/vtable/427-bug-row-height-changed_2023-10-19-09-34.json b/common/changes/@visactor/vtable/427-bug-row-height-changed_2023-10-19-09-34.json new file mode 100644 index 000000000..b9466e316 --- /dev/null +++ b/common/changes/@visactor/vtable/427-bug-row-height-changed_2023-10-19-09-34.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "fix: when use customlayout function, after resize col width the row height changed #427\n\n", + "type": "patch", + "packageName": "@visactor/vtable" + } + ], + "packageName": "@visactor/vtable", + "email": "892739385@qq.com" +} \ No newline at end of file From dc97304149c17867e093e5995ccaa83177ac49ff Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Thu, 19 Oct 2023 18:16:31 +0800 Subject: [PATCH 19/48] feat: add option headerSelectMode --- docs/assets/demo/en/interaction/select.md | 8 +++++++- docs/assets/demo/zh/interaction/select.md | 8 +++++++- docs/assets/guide/en/interaction/select.md | 4 +++- docs/assets/guide/zh/interaction/select.md | 4 +++- docs/assets/option/en/common/option-secondary.md | 6 ++++++ docs/assets/option/zh/common/option-secondary.md | 6 ++++++ packages/vtable/src/state/select/update-position.ts | 8 ++++---- packages/vtable/src/state/state.ts | 7 +++++++ packages/vtable/src/ts-types/base-table.ts | 2 ++ .../vtable/src/ts-types/list-table/define/basic-define.ts | 2 ++ 10 files changed, 47 insertions(+), 8 deletions(-) diff --git a/docs/assets/demo/en/interaction/select.md b/docs/assets/demo/en/interaction/select.md index bb385d7c0..59d1624a0 100644 --- a/docs/assets/demo/en/interaction/select.md +++ b/docs/assets/demo/en/interaction/select.md @@ -10,7 +10,13 @@ option: keyboardOptions.selectAllOnCtrlA # Select cell -Select the cell, press and hold ctrl or shift multiple selection, or open shortcut for ctrlA all selection. +Click on a cell to make a single selection, and drag to make a brush selection. + +Hold down ctrl or shift to make multiple selections. + +Turn on the shortcut key selectAllOnCtrlA configuration to select all. + +Clicking on the header cell will select the entire row or column by default. If you only want to select the current cell, you can set select.headerSelectMode to 'cell'. ## Key Configurations diff --git a/docs/assets/demo/zh/interaction/select.md b/docs/assets/demo/zh/interaction/select.md index 60520d610..92795543f 100644 --- a/docs/assets/demo/zh/interaction/select.md +++ b/docs/assets/demo/zh/interaction/select.md @@ -10,7 +10,13 @@ option: keyboardOptions.selectAllOnCtrlA # 选择单元格 -选中单元格，按住ctrl或者shift多选，也可开启快捷键进行ctrlA全选。 +点击单元格进行单选，拖拽进行刷选。 + +按住ctrl或者shift进行多选。 + +开启快捷键selectAllOnCtrlA配置进行全选。 + +点击表头单元格的行为默认会选中整行或者整列，如果只想选中当前单元格可以设置select.headerSelectMode为'cell'。 ## 关键配置 diff --git a/docs/assets/guide/en/interaction/select.md b/docs/assets/guide/en/interaction/select.md index af54e3fba..69832622d 100644 --- a/docs/assets/guide/en/interaction/select.md +++ b/docs/assets/guide/en/interaction/select.md @@ -5,11 +5,13 @@ When using VTable for data analytics, individual cells can be selected with a mouse click. Once a cell is selected, you can manipulate the cell or get the corresponding data. By default, VTable allows click-to-select cells. ![image](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/48c337ece11d289fc4644a20d.png) + As shown above, after clicking on cell (2,3), the cell is selected. +Clicking on the header cell will select the entire row or column by default. If you only want to select the current cell, you can set select.headerSelectMode to 'cell'. ## Mouse box selection -In addition to clicking on a single cell, VTable also supports mouse box selection, which can select multiple cells by dragging the mouse. This feature allows the user to select multiple cells at once. By default, VTable has mouse box selection turned on. +In addition to clicking on a single cell, VTable also supports mouse box selection, which can select multiple cells by dragging the mouse. This feature allows the user to select multiple cells at once (Hold down ctrl or shift to make multiple selections). By default, VTable has mouse box selection turned on. ![image](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/eb08aeafba39ab34c8a08c60f.png) diff --git a/docs/assets/guide/zh/interaction/select.md b/docs/assets/guide/zh/interaction/select.md index 27f505081..c846b0164 100644 --- a/docs/assets/guide/zh/interaction/select.md +++ b/docs/assets/guide/zh/interaction/select.md @@ -5,11 +5,13 @@ 在使用 VTable 进行数据分析时，可以通过鼠标点击选择单个单元格。选择某个单元格后，可以对该单元进行操作或获取应数据。默认情况下，VTable 允许点击选择单元格。 ![image](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/48c337ece11d289fc4644a20d.png) + 如上图所示，点击单元格 (2, 3) 后，该单元格被选中。 +点击表头单元格的行为默认会选中整行或者整列，如果只想选中当前单元格可以设置select.headerSelectMode为'cell'。 ## 鼠标框选 -除了点击单个单元格外，VTable 还支持鼠标框选，可以通过拖动鼠标选择多个单元格。此功能允许用户一次性选择并多个单元格。默认情况下，VTable 开启了鼠标框选功能。 +除了点击单个单元格外，VTable 还支持鼠标框选，可以通过拖动鼠标选择多个单元格。此功能允许用户一次性选择并多个单元格(按住ctrl或者shift进行多选)。默认情况下，VTable 开启了鼠标框选功能。 ![image](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/eb08aeafba39ab34c8a08c60f.png) diff --git a/docs/assets/option/en/common/option-secondary.md b/docs/assets/option/en/common/option-secondary.md index c01bfac72..e1177b36a 100644 --- a/docs/assets/option/en/common/option-secondary.md +++ b/docs/assets/option/en/common/option-secondary.md @@ -136,6 +136,12 @@ Separately set the header not to respond to mouse hover interaction. Cell selection interaction configuration, specific configuration items as follows: +##${prefix} headerSelectMode ('inline' | 'cell') = 'inline' + +When you click on the header cell, the entire row or column of the body will be selected, or only the current cell will be selected. By default, the entire row or column will be selected. + +Optional values: 'inline' | 'cell'. + ##${prefix} disableSelect (boolean) = false Do not respond to mouse select interaction. diff --git a/docs/assets/option/zh/common/option-secondary.md b/docs/assets/option/zh/common/option-secondary.md index a43293539..b389d5aa7 100644 --- a/docs/assets/option/zh/common/option-secondary.md +++ b/docs/assets/option/zh/common/option-secondary.md @@ -131,6 +131,12 @@ hover 交互响应模式：十字交叉、整列、整行或者单个单元格 选择单元格交互配置，具体配置项如下： +##${prefix} headerSelectMode ('inline' | 'cell') = 'inline' + +点击表头单元格时连带body整行或整列选中 或仅选中当前单元格，默认或整行或整列选中。 + +可选值：'inline' | 'cell'。 + ##${prefix} disableSelect (boolean) = false 不响应鼠标 select 交互。 diff --git a/packages/vtable/src/state/select/update-position.ts b/packages/vtable/src/state/select/update-position.ts index 1fa8dd966..e50c16e77 100644 --- a/packages/vtable/src/state/select/update-position.ts +++ b/packages/vtable/src/state/select/update-position.ts @@ -76,7 +76,7 @@ export function updateSelectPosition( } else if (interactionState === InteractionState.default) { const currentRange = state.select.ranges[state.select.ranges.length - 1]; if (isShift && currentRange) { - if (table.isColumnHeader(col, row)) { + if (state.select.headerSelectMode !== 'cell' && table.isColumnHeader(col, row)) { const startCol = Math.min(currentRange.start.col, currentRange.end.col, col); const endCol = Math.max(currentRange.start.col, currentRange.end.col, col); const startRow = Math.min(currentRange.start.row, currentRange.end.row, row); @@ -84,7 +84,7 @@ export function updateSelectPosition( currentRange.start = { col: startCol, row: startRow }; currentRange.end = { col: endCol, row: endRow }; - } else if (table.isRowHeader(col, row)) { + } else if (state.select.headerSelectMode !== 'cell' && table.isRowHeader(col, row)) { const startCol = Math.min(currentRange.start.col, currentRange.end.col, col); const endCol = table.colCount - 1; const startRow = Math.min(currentRange.start.row, currentRange.end.row, row); @@ -122,12 +122,12 @@ export function updateSelectPosition( state.select.ranges = []; scenegraph.deleteAllSelectBorder(); } - if (table.isColumnHeader(col, row)) { + if (state.select.headerSelectMode !== 'cell' && table.isColumnHeader(col, row)) { state.select.ranges.push({ start: { col, row }, end: { col, row: table.rowCount - 1 } }); - } else if (table.isRowHeader(col, row)) { + } else if (state.select.headerSelectMode !== 'cell' && table.isRowHeader(col, row)) { state.select.ranges.push({ start: { col, row }, end: { col: table.colCount - 1, row } diff --git a/packages/vtable/src/state/state.ts b/packages/vtable/src/state/state.ts index a4561d31f..c0060966a 100644 --- a/packages/vtable/src/state/state.ts +++ b/packages/vtable/src/state/state.ts @@ -58,6 +58,8 @@ export class StateManeger { // cellPosEnd: CellPosition; singleStyle?: boolean; // select当前单元格是否使用单独样式 disableHeader?: boolean; // 是否禁用表头select + /** 点击表头单元格时连带body整行或整列选中 或仅选中当前单元格，默认或整行或整列选中*/ + headerSelectMode?: 'inline' | 'cell'; selecting: boolean; }; hover: { @@ -264,9 +266,13 @@ export class StateManeger { const { // enableRowHighlight, // enableColumnHighlight, + /** 点击表头单元格时连带body整行或整列选中 或仅选中当前单元格，默认或整行或整列选中*/ + headerSelectMode, disableSelect, disableHeaderSelect } = this.table.options?.select ?? { + /** 点击表头单元格时连带body整行或整列选中 或仅选中当前单元格，默认或整行或整列选中*/ + headerSelectMode: 'inline', disableSelect: false, disableHeaderSelect: false }; @@ -286,6 +292,7 @@ export class StateManeger { this.select.singleStyle = !disableSelect; this.select.disableHeader = disableHeaderSelect; + this.select.headerSelectMode = headerSelectMode; } isSelected(col: number, row: number): boolean { diff --git a/packages/vtable/src/ts-types/base-table.ts b/packages/vtable/src/ts-types/base-table.ts index 0e432da7a..139443e1f 100644 --- a/packages/vtable/src/ts-types/base-table.ts +++ b/packages/vtable/src/ts-types/base-table.ts @@ -254,6 +254,8 @@ export interface BaseTableConstructorOptions { }; /** 选择单元格交互配置 */ select?: { + /** 点击表头单元格时连带body整行或整列选中 或仅选中当前单元格，默认或整行或整列选中*/ + headerSelectMode?: 'inline' | 'cell'; /** 不响应鼠标select交互 */ disableSelect?: boolean; /** 单独设置表头不响应鼠标select交互 */ diff --git a/packages/vtable/src/ts-types/list-table/define/basic-define.ts b/packages/vtable/src/ts-types/list-table/define/basic-define.ts index 680917ad9..b63b7b118 100644 --- a/packages/vtable/src/ts-types/list-table/define/basic-define.ts +++ b/packages/vtable/src/ts-types/list-table/define/basic-define.ts @@ -27,6 +27,8 @@ export interface IBasicHeaderDefine { showSort?: boolean; /** 该列不支持hover交互行为 */ disableHover?: boolean; + /** 点击表头单元格时连带body整行或整列选中 或仅选中当前单元格，默认或整行或整列选中*/ + headerSelectMode?: 'inline' | 'cell'; /** 该列不支持选中 */ disableSelect?: boolean; /** 该列表头不支持hover交互行为 */ From c59ebc6c3a09e5ee9e843ca756e45c6306ce5de7 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Thu, 19 Oct 2023 18:17:40 +0800 Subject: [PATCH 20/48] docs: update changlog of rush --- ...391-feature-headerSelectMode_2023-10-19-10-17.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/@visactor/vtable/391-feature-headerSelectMode_2023-10-19-10-17.json diff --git a/common/changes/@visactor/vtable/391-feature-headerSelectMode_2023-10-19-10-17.json b/common/changes/@visactor/vtable/391-feature-headerSelectMode_2023-10-19-10-17.json new file mode 100644 index 000000000..4c9412093 --- /dev/null +++ b/common/changes/@visactor/vtable/391-feature-headerSelectMode_2023-10-19-10-17.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "feat: add option headerSelectMode\n\n", + "type": "minor", + "packageName": "@visactor/vtable" + } + ], + "packageName": "@visactor/vtable", + "email": "892739385@qq.com" +} \ No newline at end of file From cda92e8d7af41a22ffddfe8b9385ddf8315d7be8 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Thu, 19 Oct 2023 19:59:04 +0800 Subject: [PATCH 21/48] feat: change frozen column method --- .../vtable/__tests__/pivotTable-tree.test.ts | 2 +- .../progress/create-group-for-first-screen.ts | 135 +++++++++--------- .../vtable/src/scenegraph/layout/frozen.ts | 14 +- packages/vtable/src/scenegraph/scenegraph.ts | 16 ++- 4 files changed, 83 insertions(+), 84 deletions(-) diff --git a/packages/vtable/__tests__/pivotTable-tree.test.ts b/packages/vtable/__tests__/pivotTable-tree.test.ts index bd1222f39..9d04e5e6c 100644 --- a/packages/vtable/__tests__/pivotTable-tree.test.ts +++ b/packages/vtable/__tests__/pivotTable-tree.test.ts @@ -8,7 +8,7 @@ global.__VERSION__ = 'none'; describe('pivotTableTree init test', () => { const containerDom: HTMLElement = createDiv(); containerDom.style.position = 'relative'; - containerDom.style.width = '500px'; + containerDom.style.width = '700px'; containerDom.style.height = '500px'; const option = { diff --git a/packages/vtable/src/scenegraph/group-creater/progress/create-group-for-first-screen.ts b/packages/vtable/src/scenegraph/group-creater/progress/create-group-for-first-screen.ts index 7263656b7..e32a919f6 100644 --- a/packages/vtable/src/scenegraph/group-creater/progress/create-group-for-first-screen.ts +++ b/packages/vtable/src/scenegraph/group-creater/progress/create-group-for-first-screen.ts @@ -15,43 +15,36 @@ export async function createGroupForFirstScreen( yOrigin: number, proxy: SceneProxy ) { - const { leftBottomCornerGroup, rightTopCornerGroup, rightBottomCornerGroup } = proxy.table.scenegraph; + const { table } = proxy; + const { leftBottomCornerGroup, rightTopCornerGroup, rightBottomCornerGroup } = table.scenegraph; // compute parameters proxy.setParamsForRow(); proxy.setParamsForColumn(); // compute colums width in first screen - computeColsWidth(proxy.table, 0, Math.min(proxy.firstScreenColLimit, proxy.table.colCount - 1)); + computeColsWidth(table, 0, Math.min(proxy.firstScreenColLimit, table.colCount - 1)); // compute rows height in first screen - computeRowsHeight(proxy.table, 0, Math.min(proxy.firstScreenRowLimit, proxy.table.rowCount - 1)); + computeRowsHeight(table, 0, Math.min(proxy.firstScreenRowLimit, table.rowCount - 1)); - if (proxy.table.rightFrozenColCount > 0 && proxy.table.colCount - 1 > proxy.firstScreenColLimit) { + if (table.rightFrozenColCount > 0 && table.colCount - 1 > proxy.firstScreenColLimit) { // compute right frozen row height - computeColsWidth( - proxy.table, - proxy.table.colCount - 1 - proxy.table.rightFrozenColCount + 1, - proxy.table.colCount - 1 - ); + computeColsWidth(table, table.colCount - 1 - table.rightFrozenColCount + 1, table.colCount - 1); } - if (proxy.table.bottomFrozenRowCount > 0 && proxy.table.rowCount - 1 > proxy.firstScreenRowLimit) { + if (table.bottomFrozenRowCount > 0 && table.rowCount - 1 > proxy.firstScreenRowLimit) { // compute bottom frozen row height - computeColsWidth( - proxy.table, - proxy.table.rowCount - 1 - proxy.table.bottomFrozenRowCount + 1, - proxy.table.rowCount - 1 - ); + computeColsWidth(table, table.rowCount - 1 - table.bottomFrozenRowCount + 1, table.rowCount - 1); } // update colHeaderGroup rowHeaderGroup bodyGroup position - proxy.table.scenegraph.colHeaderGroup.setAttribute('x', proxy.table.getFrozenColsWidth()); - proxy.table.scenegraph.rowHeaderGroup.setAttribute('y', proxy.table.getFrozenRowsHeight()); - proxy.table.scenegraph.bottomFrozenGroup.setAttribute('x', proxy.table.getFrozenColsWidth()); - proxy.table.scenegraph.rightFrozenGroup.setAttribute('y', proxy.table.getFrozenRowsHeight()); - proxy.table.scenegraph.bodyGroup.setAttributes({ - x: proxy.table.getFrozenColsWidth(), - y: proxy.table.getFrozenRowsHeight() + table.scenegraph.colHeaderGroup.setAttribute('x', table.getFrozenColsWidth()); + table.scenegraph.rowHeaderGroup.setAttribute('y', table.getFrozenRowsHeight()); + table.scenegraph.bottomFrozenGroup.setAttribute('x', table.getFrozenColsWidth()); + table.scenegraph.rightFrozenGroup.setAttribute('y', table.getFrozenRowsHeight()); + table.scenegraph.bodyGroup.setAttributes({ + x: table.getFrozenColsWidth(), + y: table.getFrozenRowsHeight() }); // create cornerHeaderGroup @@ -60,11 +53,11 @@ export async function createGroupForFirstScreen( xOrigin, yOrigin, 0, // colStart - proxy.table.rowHeaderLevelCount - 1, // colEnd + table.frozenColCount - 1, // colEnd 0, // rowStart - proxy.table.columnHeaderLevelCount - 1, // rowEnd - 'cornerHeader', // CellType - proxy.table + table.columnHeaderLevelCount - 1, // rowEnd + table.isListTable() ? 'columnHeader' : 'cornerHeader', // CellType + table ); // create colHeaderGroup @@ -72,12 +65,12 @@ export async function createGroupForFirstScreen( colHeaderGroup, xOrigin, yOrigin, - proxy.table.rowHeaderLevelCount, // colStart - Math.min(proxy.firstScreenColLimit, proxy.table.colCount - 1 - proxy.table.rightFrozenColCount), // colEnd + table.frozenColCount, // colStart + Math.min(proxy.firstScreenColLimit, table.colCount - 1 - table.rightFrozenColCount), // colEnd 0, // rowStart - proxy.table.columnHeaderLevelCount - 1, // rowEnd + table.columnHeaderLevelCount - 1, // rowEnd 'columnHeader', // isHeader - proxy.table + table ); // create rowHeaderGroup @@ -86,26 +79,26 @@ export async function createGroupForFirstScreen( xOrigin, yOrigin, 0, // colStart - proxy.table.rowHeaderLevelCount - 1, // colEnd - proxy.table.columnHeaderLevelCount, // rowStart - Math.min(proxy.firstScreenRowLimit, proxy.table.rowCount - 1 - proxy.table.bottomFrozenRowCount), // rowEnd - 'rowHeader', // isHeader - proxy.table + table.frozenColCount - 1, // colEnd + table.columnHeaderLevelCount, // rowStart + Math.min(proxy.firstScreenRowLimit, table.rowCount - 1 - table.bottomFrozenRowCount), // rowEnd + table.isListTable() ? 'body' : 'rowHeader', // isHeader + table ); - if (proxy.table.bottomFrozenRowCount > 0) { - if (!proxy.table.isPivotChart()) { + if (table.bottomFrozenRowCount > 0) { + if (!table.isPivotChart()) { // create left bottom frozen createColGroup( leftBottomCornerGroup, xOrigin, yOrigin, 0, // colStart - proxy.table.rowHeaderLevelCount - 1, // colEnd - proxy.table.rowCount - 1 - proxy.table.bottomFrozenRowCount + 1, // rowStart - proxy.table.rowCount - 1, // rowEnd - 'rowHeader', // isHeader - proxy.table + table.frozenColCount - 1, // colEnd + table.rowCount - 1 - table.bottomFrozenRowCount + 1, // rowStart + table.rowCount - 1, // rowEnd + table.isListTable() ? 'body' : 'rowHeader', // isHeader + table ); } // create bottomFrozenGroup @@ -113,28 +106,28 @@ export async function createGroupForFirstScreen( bottomFrozenGroup, xOrigin, yOrigin, - proxy.table.rowHeaderLevelCount, // colStart - Math.min(proxy.firstScreenColLimit, proxy.table.colCount - 1 - proxy.table.rightFrozenColCount), // colEnd - proxy.table.rowCount - 1 - proxy.table.bottomFrozenRowCount + 1, // rowStart - proxy.table.rowCount - 1, // rowEnd - 'body', // isHeader - proxy.table + table.frozenColCount, // colStart + Math.min(proxy.firstScreenColLimit, table.colCount - 1 - table.rightFrozenColCount), // colEnd + table.rowCount - 1 - table.bottomFrozenRowCount + 1, // rowStart + table.rowCount - 1, // rowEnd + table.isPivotChart() ? 'rowHeader' : 'body', // isHeader + table ); } - if (proxy.table.rightFrozenColCount > 0) { - if (!proxy.table.isPivotChart()) { + if (table.rightFrozenColCount > 0) { + if (!table.isPivotChart()) { // create right top frozen Group createColGroup( rightTopCornerGroup, xOrigin, yOrigin, - proxy.table.colCount - 1 - proxy.table.rightFrozenColCount + 1, // colStart - proxy.table.colCount - 1, // colEnd + table.colCount - 1 - table.rightFrozenColCount + 1, // colStart + table.colCount - 1, // colEnd 0, // rowStart - proxy.table.columnHeaderLevelCount - 1, // rowEnd + table.columnHeaderLevelCount - 1, // rowEnd 'columnHeader', // isHeader - proxy.table + table ); } // create rightFrozenGroup @@ -142,27 +135,27 @@ export async function createGroupForFirstScreen( rightFrozenGroup, xOrigin, yOrigin, - proxy.table.colCount - 1 - proxy.table.rightFrozenColCount + 1, // colStart - proxy.table.colCount - 1, // colEnd - proxy.table.columnHeaderLevelCount, // rowStart - Math.min(proxy.firstScreenRowLimit, proxy.table.rowCount - 1 - proxy.table.bottomFrozenRowCount), // rowEnd - 'body', // isHeader - proxy.table + table.colCount - 1 - table.rightFrozenColCount + 1, // colStart + table.colCount - 1, // colEnd + table.columnHeaderLevelCount, // rowStart + Math.min(proxy.firstScreenRowLimit, table.rowCount - 1 - table.bottomFrozenRowCount), // rowEnd + table.isPivotChart() ? 'rowHeader' : 'body', // isHeader + table ); } - if (proxy.table.bottomFrozenRowCount > 0 && proxy.table.rightFrozenColCount > 0 && !proxy.table.isPivotChart()) { + if (table.bottomFrozenRowCount > 0 && table.rightFrozenColCount > 0 && !table.isPivotChart()) { // create right bottom frozen Group createColGroup( rightBottomCornerGroup, xOrigin, yOrigin, - proxy.table.colCount - 1 - proxy.table.rightFrozenColCount + 1, // colStart - proxy.table.colCount - 1, // colEnd - proxy.table.rowCount - 1 - proxy.table.bottomFrozenRowCount + 1, // rowStart - proxy.table.rowCount - 1, // rowEnd + table.colCount - 1 - table.rightFrozenColCount + 1, // colStart + table.colCount - 1, // colEnd + table.rowCount - 1 - table.bottomFrozenRowCount + 1, // rowStart + table.rowCount - 1, // rowEnd 'body', // isHeader - proxy.table + table ); } @@ -171,12 +164,12 @@ export async function createGroupForFirstScreen( bodyGroup, xOrigin, yOrigin, - proxy.table.rowHeaderLevelCount, // colStart - Math.min(proxy.firstScreenColLimit, proxy.table.colCount - 1 - proxy.table.rightFrozenColCount), // colEnd - proxy.table.columnHeaderLevelCount, // rowStart - Math.min(proxy.firstScreenRowLimit, proxy.table.rowCount - 1 - proxy.table.bottomFrozenRowCount), // rowEnd + table.frozenColCount, // colStart + Math.min(proxy.firstScreenColLimit, table.colCount - 1 - table.rightFrozenColCount), // colEnd + table.columnHeaderLevelCount, // rowStart + Math.min(proxy.firstScreenRowLimit, table.rowCount - 1 - table.bottomFrozenRowCount), // rowEnd 'body', // isHeader - proxy.table + table ); // update progress information diff --git a/packages/vtable/src/scenegraph/layout/frozen.ts b/packages/vtable/src/scenegraph/layout/frozen.ts index 94503bfde..7993611e0 100644 --- a/packages/vtable/src/scenegraph/layout/frozen.ts +++ b/packages/vtable/src/scenegraph/layout/frozen.ts @@ -38,19 +38,19 @@ export function dealFrozen(scene: Scenegraph) { } export function resetFrozen(scene: Scenegraph) { - if (scene.frozenColCount > scene.table.rowHeaderLevelCount) { + if (scene.frozenColCount > scene.table.frozenColCount) { // move columnGroup from rowHeaderGroup into bodyGroup(from cornerHeaderGroup into colHeaderGroup) - for (let i = 0; i < scene.frozenColCount - scene.table.rowHeaderLevelCount; i++) { + for (let i = 0; i < scene.frozenColCount - scene.table.frozenColCount; i++) { moveColumnFromRowHeaderToBody(scene); moveColumnFromCornerHeaderToColHeader(scene); moveColumnFromLeftBottomCornerToBottom(scene); } - } else if (scene.frozenColCount < scene.table.rowHeaderLevelCount) { + } else if (scene.frozenColCount < scene.table.frozenColCount) { // move columnGroup from bodyGroup into rowHeaderGroup(from colHeaderGroup into cornerHeaderGroup) scene.rowHeaderGroup.setAttribute('height', scene.bodyGroup.attribute.height); scene.rowHeaderGroup.setAttribute('y', scene.bodyGroup.attribute.y); scene.cornerHeaderGroup.setAttribute('height', scene.colHeaderGroup.attribute.height); - for (let i = 0; i < scene.table.rowHeaderLevelCount - scene.frozenColCount; i++) { + for (let i = 0; i < scene.table.frozenColCount - scene.frozenColCount; i++) { moveColumnFromBodyToRowHeader(scene); moveColumnFromColHeaderToCornerHeader(scene); moveColumnFromBottomToLeftBottomCorner(scene); @@ -68,7 +68,7 @@ export function resetFrozen(scene: Scenegraph) { scene.hasFrozen = true; // scene.frozenColCount = scene.rowHeaderGroup.childrenCount; - scene.frozenColCount = scene.table.rowHeaderLevelCount; + scene.frozenColCount = scene.table.frozenColCount; scene.frozenRowCount = scene.colHeaderGroup.firstChild?.childrenCount ?? 0; } @@ -261,7 +261,7 @@ export function dealBottomFrozen(distBottomFrozenRow: number, scene: Scenegraph) 0, 0, 0, // colStart - table.rowHeaderLevelCount - 1, // colEnd + table.frozenColCount - 1, // colEnd 0, // rowStart -1, // rowEnd 'rowHeader', // isHeader @@ -295,7 +295,7 @@ export function dealBottomFrozen(distBottomFrozenRow: number, scene: Scenegraph) const currentBottomFrozenRow = scene.table.bottomFrozenRowCount; if (distBottomFrozenRow > currentBottomFrozenRow) { // row header -> left bottom - for (let col = 0; col < table.rowHeaderLevelCount; col++) { + for (let col = 0; col < table.frozenColCount; col++) { const bottomFrozenColumnGroup = scene.getColGroupInLeftBottomCorner(col); // move cell for (let row = table.rowCount - currentBottomFrozenRow - 1; row >= table.rowCount - distBottomFrozenRow; row--) { diff --git a/packages/vtable/src/scenegraph/scenegraph.ts b/packages/vtable/src/scenegraph/scenegraph.ts index 9f83c5a4b..b7ab6e25a 100644 --- a/packages/vtable/src/scenegraph/scenegraph.ts +++ b/packages/vtable/src/scenegraph/scenegraph.ts @@ -318,7 +318,8 @@ export class Scenegraph { */ createSceneGraph() { this.clear = false; - this.frozenColCount = this.table.rowHeaderLevelCount; + // this.frozenColCount = this.table.rowHeaderLevelCount; + this.frozenColCount = this.table.frozenColCount; this.frozenRowCount = this.table.columnHeaderLevelCount; this.proxy = new SceneProxy(this.table); @@ -796,7 +797,7 @@ export class Scenegraph { this.dealWidthMode(); this.dealHeightMode(); this.resetFrozen(); - this.dealFrozen(); + // this.dealFrozen(); this.updateTableSize(); this.updateBorderSizeAndPosition(); this.component.updateScrollBar(); @@ -1027,8 +1028,13 @@ export class Scenegraph { // this.dealWidthMode(); // this.dealHeightMode(); // 处理冻结 - this.resetFrozen(); - this.dealFrozen(); + // this.resetFrozen(); + // this.dealFrozen(); + + if (!this.isPivot && !this.transpose) { + this.component.setFrozenColumnShadow(this.table.frozenColCount - 1); + } + this.table.stateManeger.checkFrozen(); // 处理frame border this.createFrameBorder(); @@ -1403,7 +1409,7 @@ export class Scenegraph { return; } this.resetFrozen(); - this.dealFrozen(); + // this.dealFrozen(); this.component.updateScrollBar(); } From 530fc2d7103c885bfbb4e82fcaababca8dda253f Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Thu, 19 Oct 2023 20:03:58 +0800 Subject: [PATCH 22/48] fix: add getColWidth return defaultColWidth --- packages/vtable/src/core/BaseTable.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts index c72b70ff8..2da137e1c 100644 --- a/packages/vtable/src/core/BaseTable.ts +++ b/packages/vtable/src/core/BaseTable.ts @@ -1053,7 +1053,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { */ getColWidth(col: number): number { // const width = this.getColWidthDefine(col); - const width = this.colWidthsMap.get(col) ?? 0; + const width = this.colWidthsMap.get(col) ?? this.defaultColWidth; if ( (this.widthMode === 'adaptive' && typeof width === 'number') || ((this as any).transpose && typeof width === 'number') From 6cc1f60d2b6140d538ec9c73ab66bf35e7e32f18 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Thu, 19 Oct 2023 20:18:08 +0800 Subject: [PATCH 23/48] fix: fix transpose listtable cellLocation --- .../group-creater/progress/create-group-for-first-screen.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vtable/src/scenegraph/group-creater/progress/create-group-for-first-screen.ts b/packages/vtable/src/scenegraph/group-creater/progress/create-group-for-first-screen.ts index e32a919f6..2b6bfc38b 100644 --- a/packages/vtable/src/scenegraph/group-creater/progress/create-group-for-first-screen.ts +++ b/packages/vtable/src/scenegraph/group-creater/progress/create-group-for-first-screen.ts @@ -82,7 +82,7 @@ export async function createGroupForFirstScreen( table.frozenColCount - 1, // colEnd table.columnHeaderLevelCount, // rowStart Math.min(proxy.firstScreenRowLimit, table.rowCount - 1 - table.bottomFrozenRowCount), // rowEnd - table.isListTable() ? 'body' : 'rowHeader', // isHeader + table.isListTable() && !table.internalProps.transpose ? 'body' : 'rowHeader', // isHeader table ); From 84917b4e293603df26a5ab2a642d7d763c23e476 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Thu, 19 Oct 2023 20:33:41 +0800 Subject: [PATCH 24/48] fix: fix updateContainer() timing --- packages/vtable/src/scenegraph/scenegraph.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/vtable/src/scenegraph/scenegraph.ts b/packages/vtable/src/scenegraph/scenegraph.ts index b7ab6e25a..f5136c9d6 100644 --- a/packages/vtable/src/scenegraph/scenegraph.ts +++ b/packages/vtable/src/scenegraph/scenegraph.ts @@ -1035,6 +1035,7 @@ export class Scenegraph { this.component.setFrozenColumnShadow(this.table.frozenColCount - 1); } this.table.stateManeger.checkFrozen(); + this.updateContainer(); // 处理frame border this.createFrameBorder(); From bdada38bd18621afac7c99409f305588fc005ed5 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Fri, 20 Oct 2023 11:19:45 +0800 Subject: [PATCH 25/48] fix: fix resize compute col width logic #432 --- packages/vtable/src/scenegraph/scenegraph.ts | 22 ++++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/vtable/src/scenegraph/scenegraph.ts b/packages/vtable/src/scenegraph/scenegraph.ts index 9f83c5a4b..5145e5e15 100644 --- a/packages/vtable/src/scenegraph/scenegraph.ts +++ b/packages/vtable/src/scenegraph/scenegraph.ts @@ -780,18 +780,18 @@ export class Scenegraph { } resize() { - if (this.table.widthMode === 'adaptive' || this.table.autoFillWidth) { - this.recalculateColWidths(); - } - if (this.table.heightMode === 'adaptive' || this.table.autoFillHeight) { - this.recalculateRowHeights(); - } - // widthMode === 'adaptive' 时，computeColsWidth()中已经有高度更新计算 - // else if (this.table.widthMode === 'adaptive') { - // this.table.clearRowHeightCache(); - // computeRowsHeight(this.table, 0, this.table.columnHeaderLevelCount - 1); - // computeRowsHeight(this.table, this.proxy.rowStart, this.proxy.rowEnd); + // if (this.table.widthMode === 'adaptive' || this.table.autoFillWidth) { + // this.recalculateColWidths(); + // } + // if (this.table.heightMode === 'adaptive' || this.table.autoFillHeight) { + // this.recalculateRowHeights(); // } + // // widthMode === 'adaptive' 时，computeColsWidth()中已经有高度更新计算 + // // else if (this.table.widthMode === 'adaptive') { + // // this.table.clearRowHeightCache(); + // // computeRowsHeight(this.table, 0, this.table.columnHeaderLevelCount - 1); + // // computeRowsHeight(this.table, this.proxy.rowStart, this.proxy.rowEnd); + // // } this.dealWidthMode(); this.dealHeightMode(); From 43872088816cac6477621e512c434b3cdbde37f9 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Fri, 20 Oct 2023 11:20:06 +0800 Subject: [PATCH 26/48] docs: update changlog of rush --- ...size-compute-col-width-logic_2023-10-20-03-20.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/@visactor/vtable/432-bug-fix-resize-compute-col-width-logic_2023-10-20-03-20.json diff --git a/common/changes/@visactor/vtable/432-bug-fix-resize-compute-col-width-logic_2023-10-20-03-20.json b/common/changes/@visactor/vtable/432-bug-fix-resize-compute-col-width-logic_2023-10-20-03-20.json new file mode 100644 index 000000000..ef2f50c51 --- /dev/null +++ b/common/changes/@visactor/vtable/432-bug-fix-resize-compute-col-width-logic_2023-10-20-03-20.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "fix: fix resize compute col width logic #432\n\n", + "type": "patch", + "packageName": "@visactor/vtable" + } + ], + "packageName": "@visactor/vtable", + "email": "892739385@qq.com" +} \ No newline at end of file From 2b1101e29486006bdeee30b3b32ba0d4159b9982 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Fri, 20 Oct 2023 12:11:24 +0800 Subject: [PATCH 27/48] fix: fix axis label angle problem --- .../vtable/examples/pivot-chart/aeolus.ts | 2844 +++++++++++------ .../components/axis/get-axis-attributes.ts | 8 +- .../axis/get-axis-component-size.ts | 38 +- 3 files changed, 1880 insertions(+), 1010 deletions(-) diff --git a/packages/vtable/examples/pivot-chart/aeolus.ts b/packages/vtable/examples/pivot-chart/aeolus.ts index 981cd2a1a..7c6058a4f 100644 --- a/packages/vtable/examples/pivot-chart/aeolus.ts +++ b/packages/vtable/examples/pivot-chart/aeolus.ts @@ -9,31 +9,26 @@ export function createTable() { const option = { widthMode: 'adaptive', heightMode: 'adaptive', - columnTree: [ + columnTree: [], + rowTree: [ { - dimensionKey: '231016182255023', - value: '公司' + dimensionKey: '230222193538950', + value: '抖极' }, { - dimensionKey: '231016182255023', - value: '小型企业' - }, - { - dimensionKey: '231016182255023', - value: '消费者' + dimensionKey: '230222193538950', + value: '抖极/抖音' } ], - rowTree: [], - columns: [ + columns: [], + rows: [ { - dimensionKey: '231016182255023', - title: '细分' + dimensionKey: '230222193538950', + title: 'APP' } ], - rows: [], axes: [ { - id: 'dimensionAxis', type: 'band', tick: { visible: false @@ -59,7 +54,7 @@ export function createTable() { title: { visible: false, space: 5, - text: '地区', + text: 'p_date', style: { fontSize: 12, fill: '#363839', @@ -74,13 +69,13 @@ export function createTable() { style: { fontSize: 12, fill: '#6F6F6F', - angle: 0, + angle: 90, fontWeight: 'normal', direction: 'horizontal' }, autoHide: true, autoHideMethod: 'greedy', - flush: true + flush: false }, hover: true, background: { @@ -96,11 +91,10 @@ export function createTable() { } } }, - paddingInner: [0.15, 0.1], - paddingOuter: [0.075, 0.1] + paddingInner: 0.36249999999999993, + paddingOuter: 0.175 }, { - id: 'measureAxisLeft', type: 'linear', tick: { visible: false, @@ -130,84 +124,8 @@ export function createTable() { } }, title: { - visible: true, - text: '销售额', - space: 8, - style: { - fontSize: 12, - fill: '#363839', - fontWeight: 'normal' - } - }, - sampling: false, - label: { - visible: true, - space: 6, - flush: true, - padding: 0, - style: { - fontSize: 12, - maxLineWidth: 174, - fill: '#6F6F6F', - angle: 0, - fontWeight: 'normal', - dy: -1, - direction: 'horizontal' - }, - autoHide: true, - autoHideMethod: 'greedy' - }, - hover: true, - background: { - visible: true, - state: { - hover: { - fillOpacity: 0.08, - fill: '#141414' - }, - hover_reverse: { - fillOpacity: 0.08, - fill: '#141414' - } - } - }, - zero: true, - nice: true, - seriesId: ['mainSeries', 'subSeries'] - }, - { - id: 'measureAxisRight', - type: 'linear', - tick: { - visible: false, - tickMode: 'd3', - style: { - stroke: 'rgba(255, 255, 255, 0)' - } - }, - niceType: 'accurateFirst', - zIndex: 200, - grid: { visible: false, - style: { - zIndex: 150, - stroke: '#DADCDD', - lineWidth: 1, - lineDash: [4, 2] - } - }, - orient: 'right', - visible: true, - domainLine: { - visible: true, - style: { - lineWidth: 1, - stroke: 'rgba(255, 255, 255, 0)' - } - }, - title: { - visible: true, - text: '利润', + text: '商城渗透率', space: 8, style: { fontSize: 12, @@ -247,13 +165,8 @@ export function createTable() { } } }, - zero: true, - nice: true, - seriesId: ['mainSeries', 'subSeries'], - sync: { - axisId: 'measureAxisLeft', - zeroAlign: true - } + zero: false, + nice: true } ], indicators: [ @@ -267,375 +180,12 @@ export function createTable() { padding: [1, 1, 0, 1] }, chartSpec: { - type: 'common', - series: [ - { - id: 'mainSeries', - type: 'bar', - xField: ['231016182255020', '10001'], - yField: '10011', - zIndex: 200, - seriesField: '20001', - data: { - id: 'mainSeriesData', - values: [], - fields: { - '10001': { - alias: '指标名称 ' - }, - '10011': { - alias: '指标值(主轴) ' - }, - '10012': { - alias: '指标值(次轴) ' - }, - '20001': { - alias: '图例项 ', - domain: ['销售额', '利润'], - sortIndex: 0, - lockStatisticsByDomain: true - }, - '231016182255014': { - alias: '销售额' - }, - '231016182255017': { - alias: '利润' - }, - '231016182255020': { - alias: '地区' - }, - '231016182255023': { - alias: '细分' - } - } - }, - stackInverse: true, - label: { - visible: false, - overlap: { - hideOnHit: true, - avoidBaseMark: false, - strategy: [ - { - type: 'moveY', - offset: [ - -20, -19, -18, -17, -16, -15, -14, -13, -12, -11, -10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, - 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 - ] - }, - { - type: 'moveX', - offset: [ - -20, -19, -18, -17, -16, -15, -14, -13, -12, -11, -10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, - 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 - ] - } - ], - clampForce: true - }, - style: { - fontSize: 12, - fontWeight: 'normal', - zIndex: 400, - fill: null, - strokeOpacity: 1 - }, - position: 'inside', - smartInvert: false - }, - line: { - style: { - curveType: { - type: 'ordinal', - field: '20001', - range: ['linear'], - domain: ['销售额', '利润'] - }, - lineWidth: { - type: 'ordinal', - field: '20001', - range: [3], - domain: ['销售额', '利润'] - }, - lineDash: { - type: 'ordinal', - field: '20001', - range: [[0, 0]], - domain: ['销售额', '利润'] - } - } - }, - area: { - style: { - fillOpacity: 0.35 - }, - visible: true - }, - point: { - style: { - shape: { - type: 'ordinal', - field: '20001', - range: ['circle'], - domain: ['销售额', '利润'] - }, - size: { - type: 'ordinal', - field: '20001', - range: [7.0898154036220635], - domain: ['销售额', '利润'] - }, - stroke: { - field: '20001', - type: 'ordinal', - range: ['#2E62F1', '#4DC36A'], - specified: {}, - domain: ['销售额', '利润'] - }, - strokeOpacity: { - type: 'ordinal', - field: '20001', - range: [1], - domain: ['销售额', '利润'] - }, - fillOpacity: { - type: 'ordinal', - field: '20001', - range: [1], - domain: ['销售额', '利润'] - } - }, - state: { - hover: { - lineWidth: 2, - fillOpacity: 1, - strokeOpacity: 1, - scaleX: 1.5, - scaleY: 1.5 - } - } - }, - 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, - strokeWidth: 0.3 - } - } - }, - invalidType: 'break', - seriesMark: 'point', - region: [ - { - clip: true - } - ], - background: 'rgba(255, 255, 255, 0)', - animation: false - }, - { - id: 'subSeries', - type: 'line', - xField: '231016182255020', - yField: '10012', - zIndex: 300, - seriesField: '20001', - data: { - id: 'subSeriesData', - values: [], - fields: { - '10001': { - alias: '指标名称 ' - }, - '10011': { - alias: '指标值(主轴) ' - }, - '10012': { - alias: '指标值(次轴) ' - }, - '20001': { - alias: '图例项 ', - domain: ['销售额', '利润'], - sortIndex: 0, - lockStatisticsByDomain: true - }, - '231016182255014': { - alias: '销售额' - }, - '231016182255017': { - alias: '利润' - }, - '231016182255020': { - alias: '地区' - }, - '231016182255023': { - alias: '细分' - } - } - }, - stackInverse: true, - label: { - visible: false, - overlap: { - hideOnHit: true, - avoidBaseMark: false, - strategy: [ - { - type: 'moveY', - offset: [ - -20, -19, -18, -17, -16, -15, -14, -13, -12, -11, -10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, - 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 - ] - }, - { - type: 'moveX', - offset: [ - -20, -19, -18, -17, -16, -15, -14, -13, -12, -11, -10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, - 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 - ] - } - ], - clampForce: true - }, - style: { - fontSize: 12, - fontWeight: 'normal', - zIndex: 400, - fill: null, - strokeOpacity: 1 - }, - position: 'top', - smartInvert: false - }, - line: { - style: { - curveType: { - type: 'ordinal', - field: '20001', - range: ['linear'], - domain: ['销售额', '利润'] - }, - lineWidth: { - type: 'ordinal', - field: '20001', - range: [3], - domain: ['销售额', '利润'] - }, - lineDash: { - type: 'ordinal', - field: '20001', - range: [[0, 0]], - domain: ['销售额', '利润'] - } - } - }, - area: { - style: { - fillOpacity: 0.35 - }, - visible: true - }, - point: { - style: { - shape: { - type: 'ordinal', - field: '20001', - range: ['circle'], - domain: ['销售额', '利润'] - }, - size: { - type: 'ordinal', - field: '20001', - range: [7.0898154036220635], - domain: ['销售额', '利润'] - }, - stroke: { - field: '20001', - type: 'ordinal', - range: ['#2E62F1', '#4DC36A'], - specified: {}, - domain: ['销售额', '利润'] - }, - strokeOpacity: { - type: 'ordinal', - field: '20001', - range: [1], - domain: ['销售额', '利润'] - }, - fillOpacity: { - type: 'ordinal', - field: '20001', - range: [1], - domain: ['销售额', '利润'] - } - }, - state: { - hover: { - lineWidth: 2, - fillOpacity: 1, - strokeOpacity: 1, - scaleX: 1.5, - scaleY: 1.5 - } - } - }, - 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, - strokeWidth: 0.3 - } - } - }, - invalidType: 'break', - seriesMark: 'point', - region: [ - { - clip: true - } - ], - background: 'rgba(255, 255, 255, 0)', - animation: false - } - ], + type: 'line', + xField: ['230222193539240'], + yField: ['10002'], + direction: 'vertical', + sortDataByAxis: true, + seriesField: '20001', padding: 0, labelLayout: 'region', data: { @@ -644,36 +194,116 @@ export function createTable() { '10001': { alias: '指标名称 ' }, - '10011': { - alias: '指标值(主轴) ' - }, - '10012': { - alias: '指标值(次轴) ' + '10002': { + alias: '指标值 ' }, '20001': { alias: '图例项 ', - domain: ['销售额', '利润'], + domain: ['抖极', '抖极/抖音'], sortIndex: 0, lockStatisticsByDomain: true }, - '231016182255014': { - alias: '销售额' + '230222193538536': { + alias: 'APP' }, - '231016182255017': { - alias: '利润' + '230222193538917': { + alias: '商城渗透率' }, - '231016182255020': { - alias: '地区' + '230222193538950': { + alias: 'APP' }, - '231016182255023': { - alias: '细分' + '230222193539240': { + alias: 'p_date', + domain: [ + '2023-08-01', + '2023-08-02', + '2023-08-03', + '2023-08-04', + '2023-08-05', + '2023-08-06', + '2023-08-07', + '2023-08-08', + '2023-08-09', + '2023-08-10', + '2023-08-11', + '2023-08-12', + '2023-08-13', + '2023-08-14', + '2023-08-15', + '2023-08-16', + '2023-08-17', + '2023-08-18', + '2023-08-19', + '2023-08-20', + '2023-08-21', + '2023-08-22', + '2023-08-23', + '2023-08-24', + '2023-08-25', + '2023-08-26', + '2023-08-27', + '2023-08-28', + '2023-08-29', + '2023-08-30', + '2023-08-31', + '2023-09-01', + '2023-09-02', + '2023-09-03', + '2023-09-04', + '2023-09-05', + '2023-09-06', + '2023-09-07', + '2023-09-08', + '2023-09-09', + '2023-09-10', + '2023-09-11', + '2023-09-12', + '2023-09-13', + '2023-09-14', + '2023-09-15', + '2023-09-16', + '2023-09-17', + '2023-09-18', + '2023-09-19', + '2023-09-20', + '2023-09-21', + '2023-09-22', + '2023-09-23', + '2023-09-24', + '2023-09-25', + '2023-09-26', + '2023-09-27', + '2023-09-28', + '2023-09-29', + '2023-09-30', + '2023-10-01', + '2023-10-02', + '2023-10-03', + '2023-10-04', + '2023-10-05', + '2023-10-06', + '2023-10-07', + '2023-10-08', + '2023-10-09', + '2023-10-10', + '2023-10-11', + '2023-10-12', + '2023-10-13', + '2023-10-14', + '2023-10-15', + '2023-10-16', + '2023-10-17', + '2023-10-18', + '2023-10-19' + ], + sortIndex: 0, + lockStatisticsByDomain: true } } }, stackInverse: true, axes: [ { - id: 'dimensionAxis', type: 'band', tick: { visible: false @@ -699,7 +329,7 @@ export function createTable() { title: { visible: false, space: 5, - text: '地区', + text: 'p_date', style: { fontSize: 12, fill: '#363839', @@ -714,13 +344,13 @@ export function createTable() { style: { fontSize: 12, fill: '#6F6F6F', - angle: 0, + angle: 90, fontWeight: 'normal', direction: 'horizontal' }, autoHide: true, autoHideMethod: 'greedy', - flush: true + flush: false }, hover: false, background: { @@ -736,11 +366,10 @@ export function createTable() { } } }, - paddingInner: [0.15, 0.1], - paddingOuter: [0.075, 0.1] + paddingInner: 0.36249999999999993, + paddingOuter: 0.175 }, { - id: 'measureAxisLeft', type: 'linear', tick: { visible: false, @@ -770,8 +399,8 @@ export function createTable() { } }, title: { - visible: true, - text: '销售额', + visible: false, + text: '商城渗透率', space: 8, style: { fontSize: 12, @@ -811,102 +440,147 @@ export function createTable() { } } }, - zero: true, - nice: true, - seriesId: ['mainSeries', 'subSeries'] - }, - { - id: 'measureAxisRight', - type: 'linear', - tick: { - visible: false, - tickMode: 'd3', - style: { - stroke: 'rgba(255, 255, 255, 0)' + zero: false, + nice: true + } + ], + color: { + field: '20001', + type: 'ordinal', + range: ['#2E62F1', '#4DC36A'], + specified: {}, + domain: ['抖极', '抖极/抖音'] + }, + label: { + visible: false, + overlap: { + hideOnHit: true, + avoidBaseMark: false, + strategy: [ + { + type: 'moveY', + offset: [ + -20, -19, -18, -17, -16, -15, -14, -13, -12, -11, -10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, 2, + 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 + ] + }, + { + type: 'moveX', + offset: [ + -20, -19, -18, -17, -16, -15, -14, -13, -12, -11, -10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, 2, + 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 + ] } + ], + clampForce: true + }, + style: { + fontSize: 12, + fontWeight: 'normal', + zIndex: 400, + 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: ['抖极', '抖极/抖音'] }, - niceType: 'accurateFirst', - zIndex: 200, - grid: { - visible: false, - style: { - zIndex: 150, - stroke: '#DADCDD', - lineWidth: 1, - lineDash: [4, 2] - } + size: { + type: 'ordinal', + field: '20001', + range: [7.0898154036220635], + domain: ['抖极', '抖极/抖音'] }, - orient: 'right', - visible: true, - domainLine: { - visible: true, - style: { - lineWidth: 1, - stroke: 'rgba(255, 255, 255, 0)' - } + fill: { + field: '20001', + type: 'ordinal', + range: ['#2E62F1', '#4DC36A'], + specified: {}, + domain: ['抖极', '抖极/抖音'] }, - title: { - visible: true, - text: '利润', - space: 8, - style: { - fontSize: 12, - fill: '#363839', - fontWeight: 'normal' - } + stroke: { + field: '20001', + type: 'ordinal', + range: ['#2E62F1', '#4DC36A'], + specified: {}, + domain: ['抖极', '抖极/抖音'] }, - sampling: false, - label: { - visible: true, - space: 6, - flush: true, - padding: 0, - style: { - fontSize: 12, - maxLineWidth: 174, - fill: '#6F6F6F', - angle: 0, - fontWeight: 'normal', - dy: -1, - direction: 'horizontal' - }, - autoHide: true, - autoHideMethod: 'greedy' + strokeOpacity: { + type: 'ordinal', + field: '20001', + range: [1], + domain: ['抖极', '抖极/抖音'] }, - hover: false, - background: { - visible: true, - state: { - hover: { - fillOpacity: 0.08, - fill: '#141414' - }, - hover_reverse: { - fillOpacity: 0.08, - fill: '#141414' - } - } + fillOpacity: { + type: 'ordinal', + field: '20001', + range: [1], + domain: ['抖极', '抖极/抖音'] + } + }, + state: { + hover: { + lineWidth: 2, + fillOpacity: 1, + strokeOpacity: 1, + scaleX: 1.5, + scaleY: 1.5 + } + } + }, + seriesMark: 'point', + line: { + style: { + curveType: { + type: 'ordinal', + field: '20001', + range: ['linear'], + domain: ['抖极', '抖极/抖音'] + }, + lineWidth: { + type: 'ordinal', + field: '20001', + range: [3], + domain: ['抖极', '抖极/抖音'] }, - zero: true, - nice: true, - seriesId: ['mainSeries', 'subSeries'], - sync: { - axisId: 'measureAxisLeft', - zeroAlign: true + lineDash: { + type: 'ordinal', + field: '20001', + range: [[0, 0]], + domain: ['抖极', '抖极/抖音'] } } - ], - seriesField: '20001', - color: { - field: '20001', - type: 'ordinal', - range: ['#2E62F1', '#4DC36A'], - specified: {}, - domain: ['销售额', '利润'] }, - tooltip: { - handler: {} + region: [ + { + clip: true + } + ], + background: 'rgba(255, 255, 255, 0)', + area: { + style: { + curveType: { + type: 'ordinal', + field: '20001', + range: ['linear'], + domain: ['抖极', '抖极/抖音'] + } + } }, + invalidType: 'break', + animation: false, crosshair: { xField: { visible: true @@ -919,418 +593,1614 @@ export function createTable() { indicatorsAsCol: false, records: [ { - '10001': '销售额', - '10003': '231016182255014', - '10011': '469341.68548202515', - '20001': '销售额', - '231016182255014': '469341.68548202515', - '231016182255020': '西南', - '231016182255023': '公司' - }, - { - '10001': '销售额', - '10003': '231016182255014', - '10011': '1335665.32513237', - '20001': '销售额', - '231016182255014': '1335665.32513237', - '231016182255020': '中南', - '231016182255023': '公司' - }, - { - '10001': '销售额', - '10003': '231016182255014', - '10011': '253458.18463516235', - '20001': '销售额', - '231016182255014': '253458.18463516235', - '231016182255020': '西北', - '231016182255023': '公司' - }, - { - '10001': '销售额', - '10003': '231016182255014', - '10011': '804769.4678850174', - '20001': '销售额', - '231016182255014': '804769.4678850174', - '231016182255020': '华北', - '231016182255023': '公司' - }, - { - '10001': '销售额', - '10003': '231016182255014', - '10011': '1454715.804889679', - '20001': '销售额', - '231016182255014': '1454715.804889679', - '231016182255020': '华东', - '231016182255023': '公司' - }, - { - '10001': '销售额', - '10003': '231016182255014', - '10011': '834842.828546524', - '20001': '销售额', - '231016182255014': '834842.828546524', - '231016182255020': '地区-dongbei', - '231016182255023': '公司' - }, - { - '10001': '利润', - '10003': '231016182255017', - '10012': '30208.023854598403', - '20001': '利润', - '231016182255017': '30208.023854598403', - '231016182255020': '西南', - '231016182255023': '公司' - }, - { - '10001': '利润', - '10003': '231016182255017', - '10012': '197862.08459425718', - '20001': '利润', - '231016182255017': '197862.08459425718', - '231016182255020': '中南', - '231016182255023': '公司' - }, - { - '10001': '利润', - '10003': '231016182255017', - '10012': '44090.564069509506', - '20001': '利润', - '231016182255017': '44090.564069509506', - '231016182255020': '西北', - '231016182255023': '公司' - }, - { - '10001': '利润', - '10003': '231016182255017', - '10012': '166445.20906487107', - '20001': '利润', - '231016182255017': '166445.20906487107', - '231016182255020': '华北', - '231016182255023': '公司' - }, - { - '10001': '利润', - '10003': '231016182255017', - '10012': '186383.42677396536', - '20001': '利润', - '231016182255017': '186383.42677396536', - '231016182255020': '华东', - '231016182255023': '公司' - }, - { - '10001': '利润', - '10003': '231016182255017', - '10012': '56978.326416149735', - '20001': '利润', - '231016182255017': '56978.326416149735', - '231016182255020': '地区-dongbei', - '231016182255023': '公司' - }, - { - '10001': '销售额', - '10003': '231016182255014', - '10011': '522739.03513240814', - '20001': '销售额', - '231016182255014': '522739.03513240814', - '231016182255020': '地区-dongbei', - '231016182255023': '小型企业' - }, - { - '10001': '销售额', - '10003': '231016182255014', - '10011': '743813.0075492859', - '20001': '销售额', - '231016182255014': '743813.0075492859', - '231016182255020': '中南', - '231016182255023': '小型企业' - }, - { - '10001': '销售额', - '10003': '231016182255014', - '10011': '103523.30778121948', - '20001': '销售额', - '231016182255014': '103523.30778121948', - '231016182255020': '西北', - '231016182255023': '小型企业' - }, - { - '10001': '销售额', - '10003': '231016182255014', - '10011': '942432.3721942902', - '20001': '销售额', - '231016182255014': '942432.3721942902', - '231016182255020': '华东', - '231016182255023': '小型企业' - }, - { - '10001': '销售额', - '10003': '231016182255014', - '10011': '422100.9874534607', - '20001': '销售额', - '231016182255014': '422100.9874534607', - '231016182255020': '华北', - '231016182255023': '小型企业' - }, - { - '10001': '销售额', - '10003': '231016182255014', - '10011': '156479.9320793152', - '20001': '销售额', - '231016182255014': '156479.9320793152', - '231016182255020': '西南', - '231016182255023': '小型企业' - }, - { - '10001': '利润', - '10003': '231016182255017', - '10012': '64188.91547188163', - '20001': '利润', - '231016182255017': '64188.91547188163', - '231016182255020': '地区-dongbei', - '231016182255023': '小型企业' - }, - { - '10001': '利润', - '10003': '231016182255017', - '10012': '147234.50668483973', - '20001': '利润', - '231016182255017': '147234.50668483973', - '231016182255020': '中南', - '231016182255023': '小型企业' - }, - { - '10001': '利润', - '10003': '231016182255017', - '10012': '5439.727965354919', - '20001': '利润', - '231016182255017': '5439.727965354919', - '231016182255020': '西北', - '231016182255023': '小型企业' - }, - { - '10001': '利润', - '10003': '231016182255017', - '10012': '109774.25205981731', - '20001': '利润', - '231016182255017': '109774.25205981731', - '231016182255020': '华东', - '231016182255023': '小型企业' - }, - { - '10001': '利润', - '10003': '231016182255017', - '10012': '72593.22689580917', - '20001': '利润', - '231016182255017': '72593.22689580917', - '231016182255020': '华北', - '231016182255023': '小型企业' - }, - { - '10001': '利润', - '10003': '231016182255017', - '10012': '13248.031875252724', - '20001': '利润', - '231016182255017': '13248.031875252724', - '231016182255020': '西南', - '231016182255023': '小型企业' - }, - { - '10001': '销售额', - '10003': '231016182255014', - '10011': '2057936.7624292374', - '20001': '销售额', - '231016182255014': '2057936.7624292374', - '231016182255020': '中南', - '231016182255023': '消费者' - }, - { - '10001': '销售额', - '10003': '231016182255014', - '10011': '677302.8914031982', - '20001': '销售额', - '231016182255014': '677302.8914031982', - '231016182255020': '西南', - '231016182255023': '消费者' - }, - { - '10001': '销售额', - '10003': '231016182255014', - '10011': '2287358.2651634216', - '20001': '销售额', - '231016182255014': '2287358.2651634216', - '231016182255020': '华东', - '231016182255023': '消费者' - }, - { - '10001': '销售额', - '10003': '231016182255014', - '10011': '458058.10551834106', - '20001': '销售额', - '231016182255014': '458058.10551834106', - '231016182255020': '西北', - '231016182255023': '消费者' - }, - { - '10001': '销售额', - '10003': '231016182255014', - '10011': '1323985.6108589172', - '20001': '销售额', - '231016182255014': '1323985.6108589172', - '231016182255020': '地区-dongbei', - '231016182255023': '消费者' - }, - { - '10001': '销售额', - '10003': '231016182255014', - '10011': '1220430.5587997437', - '20001': '销售额', - '231016182255014': '1220430.5587997437', - '231016182255020': '华北', - '231016182255023': '消费者' - }, - { - '10001': '利润', - '10003': '231016182255017', - '10012': '325788.7225390896', - '20001': '利润', - '231016182255017': '325788.7225390896', - '231016182255020': '中南', - '231016182255023': '消费者' - }, - { - '10001': '利润', - '10003': '231016182255017', - '10012': '54180.67230556905', - '20001': '利润', - '231016182255017': '54180.67230556905', - '231016182255020': '西南', - '231016182255023': '消费者' - }, - { - '10001': '利润', - '10003': '231016182255017', - '10012': '311061.0042088777', - '20001': '利润', - '231016182255017': '311061.0042088777', - '231016182255020': '华东', - '231016182255023': '消费者' - }, - { - '10001': '利润', - '10003': '231016182255017', - '10012': '49023.18348328769', - '20001': '利润', - '231016182255017': '49023.18348328769', - '231016182255020': '西北', - '231016182255023': '消费者' - }, - { - '10001': '利润', - '10003': '231016182255017', - '10012': '121024.26733334363', - '20001': '利润', - '231016182255017': '121024.26733334363', - '231016182255020': '地区-dongbei', - '231016182255023': '消费者' - }, - { - '10001': '利润', - '10003': '231016182255017', - '10012': '192014.78153175116', - '20001': '利润', - '231016182255017': '192014.78153175116', - '231016182255020': '华北', - '231016182255023': '消费者' + '10001': '商城渗透率', + '10002': '0.2318117582940963', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.2318117582940963', + '230222193538950': '抖极', + '230222193539240': '2023-09-19' + }, + { + '10001': '商城渗透率', + '10002': '0.22217248185563748', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.22217248185563748', + '230222193538950': '抖极', + '230222193539240': '2023-09-08' + }, + { + '10001': '商城渗透率', + '10002': '0.2065198017099237', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.2065198017099237', + '230222193538950': '抖极', + '230222193539240': '2023-09-05' + }, + { + '10001': '商城渗透率', + '10002': '0.23864837584655121', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.23864837584655121', + '230222193538950': '抖极', + '230222193539240': '2023-10-18' + }, + { + '10001': '商城渗透率', + '10002': '0.2366173476231954', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.2366173476231954', + '230222193538950': '抖极', + '230222193539240': '2023-10-08' + }, + { + '10001': '商城渗透率', + '10002': '0.23871157098628473', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.23871157098628473', + '230222193538950': '抖极', + '230222193539240': '2023-09-25' + }, + { + '10001': '商城渗透率', + '10002': '0.17261296013784208', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.17261296013784208', + '230222193538950': '抖极', + '230222193539240': '2023-08-04' + }, + { + '10001': '商城渗透率', + '10002': '0.20277901511130775', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.20277901511130775', + '230222193538950': '抖极', + '230222193539240': '2023-08-25' + }, + { + '10001': '商城渗透率', + '10002': '0.23731970696103855', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.23731970696103855', + '230222193538950': '抖极', + '230222193539240': '2023-10-10' + }, + { + '10001': '商城渗透率', + '10002': '0.2256556412458524', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.2256556412458524', + '230222193538950': '抖极', + '230222193539240': '2023-09-11' + }, + { + '10001': '商城渗透率', + '10002': '0.20129971287672108', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.20129971287672108', + '230222193538950': '抖极', + '230222193539240': '2023-08-19' + }, + { + '10001': '商城渗透率', + '10002': '0.23425990892248685', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.23425990892248685', + '230222193538950': '抖极', + '230222193539240': '2023-10-13' + }, + { + '10001': '商城渗透率', + '10002': '0.18949483573507225', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.18949483573507225', + '230222193538950': '抖极', + '230222193539240': '2023-08-10' + }, + { + '10001': '商城渗透率', + '10002': '0.1991680214913069', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.1991680214913069', + '230222193538950': '抖极', + '230222193539240': '2023-08-14' + }, + { + '10001': '商城渗透率', + '10002': '0.20100354328269168', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.20100354328269168', + '230222193538950': '抖极', + '230222193539240': '2023-08-15' + }, + { + '10001': '商城渗透率', + '10002': '0.2268284960212396', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.2268284960212396', + '230222193538950': '抖极', + '230222193539240': '2023-09-15' + }, + { + '10001': '商城渗透率', + '10002': '0.23659004198574798', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.23659004198574798', + '230222193538950': '抖极', + '230222193539240': '2023-10-14' + }, + { + '10001': '商城渗透率', + '10002': '0.2034183233284108', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.2034183233284108', + '230222193538950': '抖极', + '230222193539240': '2023-08-29' + }, + { + '10001': '商城渗透率', + '10002': '0.2261126870186753', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.2261126870186753', + '230222193538950': '抖极', + '230222193539240': '2023-09-29' + }, + { + '10001': '商城渗透率', + '10002': '0.2310907001874962', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.2310907001874962', + '230222193538950': '抖极', + '230222193539240': '2023-10-04' + }, + { + '10001': '商城渗透率', + '10002': '0.2010290479612299', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.2010290479612299', + '230222193538950': '抖极', + '230222193539240': '2023-09-01' + }, + { + '10001': '商城渗透率', + '10002': '0.22678566971228734', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.22678566971228734', + '230222193538950': '抖极', + '230222193539240': '2023-09-12' + }, + { + '10001': '商城渗透率', + '10002': '0.23646583873623994', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.23646583873623994', + '230222193538950': '抖极', + '230222193539240': '2023-10-17' + }, + { + '10001': '商城渗透率', + '10002': '0.23906000041934092', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.23906000041934092', + '230222193538950': '抖极', + '230222193539240': '2023-09-23' + }, + { + '10001': '商城渗透率', + '10002': '0.2309453430633655', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.2309453430633655', + '230222193538950': '抖极', + '230222193539240': '2023-09-20' + }, + { + '10001': '商城渗透率', + '10002': '0.17180859490711836', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.17180859490711836', + '230222193538950': '抖极', + '230222193539240': '2023-08-07' + }, + { + '10001': '商城渗透率', + '10002': '0.20212395425160293', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.20212395425160293', + '230222193538950': '抖极', + '230222193539240': '2023-08-22' + }, + { + '10001': '商城渗透率', + '10002': '0.22679773667675554', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.22679773667675554', + '230222193538950': '抖极', + '230222193539240': '2023-09-14' + }, + { + '10001': '商城渗透率', + '10002': '0.20031514485735427', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.20031514485735427', + '230222193538950': '抖极', + '230222193539240': '2023-08-16' + }, + { + '10001': '商城渗透率', + '10002': '0.20052374219233174', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.20052374219233174', + '230222193538950': '抖极', + '230222193539240': '2023-08-13' + }, + { + '10001': '商城渗透率', + '10002': '0.22777522966911345', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.22777522966911345', + '230222193538950': '抖极', + '230222193539240': '2023-09-18' + }, + { + '10001': '商城渗透率', + '10002': '0.20081965364805346', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.20081965364805346', + '230222193538950': '抖极', + '230222193539240': '2023-08-31' + }, + { + '10001': '商城渗透率', + '10002': '0.23231437566898297', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.23231437566898297', + '230222193538950': '抖极', + '230222193539240': '2023-10-05' + }, + { + '10001': '商城渗透率', + '10002': '0.22866654336895842', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.22866654336895842', + '230222193538950': '抖极', + '230222193539240': '2023-09-28' + }, + { + '10001': '商城渗透率', + '10002': '0.2033633303362314', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.2033633303362314', + '230222193538950': '抖极', + '230222193539240': '2023-08-30' + }, + { + '10001': '商城渗透率', + '10002': '0.199131540838565', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.199131540838565', + '230222193538950': '抖极', + '230222193539240': '2023-08-17' + }, + { + '10001': '商城渗透率', + '10002': '0.1981296710590386', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.1981296710590386', + '230222193538950': '抖极', + '230222193539240': '2023-08-12' + }, + { + '10001': '商城渗透率', + '10002': '0.2313945149213188', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.2313945149213188', + '230222193538950': '抖极', + '230222193539240': '2023-09-17' + }, + { + '10001': '商城渗透率', + '10002': '0.2370206168342279', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.2370206168342279', + '230222193538950': '抖极', + '230222193539240': '2023-10-16' + }, + { + '10001': '商城渗透率', + '10002': '0.2264348645971501', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.2264348645971501', + '230222193538950': '抖极', + '230222193539240': '2023-09-13' + }, + { + '10001': '商城渗透率', + '10002': '0.2319618686995096', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.2319618686995096', + '230222193538950': '抖极', + '230222193539240': '2023-10-01' + }, + { + '10001': '商城渗透率', + '10002': '0.17303231859015752', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.17303231859015752', + '230222193538950': '抖极', + '230222193539240': '2023-08-02' + }, + { + '10001': '商城渗透率', + '10002': '0.2082174941177632', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.2082174941177632', + '230222193538950': '抖极', + '230222193539240': '2023-08-27' + }, + { + '10001': '商城渗透率', + '10002': '0.20578520757421845', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.20578520757421845', + '230222193538950': '抖极', + '230222193539240': '2023-09-03' + }, + { + '10001': '商城渗透率', + '10002': '0.23041559227499897', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.23041559227499897', + '230222193538950': '抖极', + '230222193539240': '2023-10-02' + }, + { + '10001': '商城渗透率', + '10002': '0.23570515247616877', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.23570515247616877', + '230222193538950': '抖极', + '230222193539240': '2023-09-26' + }, + { + '10001': '商城渗透率', + '10002': '0.1740721485275524', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.1740721485275524', + '230222193538950': '抖极', + '230222193539240': '2023-08-05' + }, + { + '10001': '商城渗透率', + '10002': '0.20278439749084207', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.20278439749084207', + '230222193538950': '抖极', + '230222193539240': '2023-08-24' + }, + { + '10001': '商城渗透率', + '10002': '0.21672314321808755', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.21672314321808755', + '230222193538950': '抖极', + '230222193539240': '2023-09-06' + }, + { + '10001': '商城渗透率', + '10002': '0.2352826489483675', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.2352826489483675', + '230222193538950': '抖极', + '230222193539240': '2023-10-07' + }, + { + '10001': '商城渗透率', + '10002': '0.22805986560481253', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.22805986560481253', + '230222193538950': '抖极', + '230222193539240': '2023-09-16' + }, + { + '10001': '商城渗透率', + '10002': '0.19466149321838902', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.19466149321838902', + '230222193538950': '抖极', + '230222193539240': '2023-08-11' + }, + { + '10001': '商城渗透率', + '10002': '0.24023619871260474', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.24023619871260474', + '230222193538950': '抖极', + '230222193539240': '2023-10-15' + }, + { + '10001': '商城渗透率', + '10002': '0.16992801130296434', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.16992801130296434', + '230222193538950': '抖极', + '230222193539240': '2023-08-08' + }, + { + '10001': '商城渗透率', + '10002': '0.2250487871068522', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.2250487871068522', + '230222193538950': '抖极', + '230222193539240': '2023-09-07' + }, + { + '10001': '商城渗透率', + '10002': '0.20187611223255222', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.20187611223255222', + '230222193538950': '抖极', + '230222193539240': '2023-08-23' + }, + { + '10001': '商城渗透率', + '10002': '0.1754704830752902', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.1754704830752902', + '230222193538950': '抖极', + '230222193539240': '2023-08-06' + }, + { + '10001': '商城渗透率', + '10002': '0.20130341152950187', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.20130341152950187', + '230222193538950': '抖极', + '230222193539240': '2023-09-04' + }, + { + '10001': '商城渗透率', + '10002': '0.23455592376966233', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.23455592376966233', + '230222193538950': '抖极', + '230222193539240': '2023-10-06' + }, + { + '10001': '商城渗透率', + '10002': '0.23379125299783915', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.23379125299783915', + '230222193538950': '抖极', + '230222193539240': '2023-09-27' + }, + { + '10001': '商城渗透率', + '10002': '0.22640764742366154', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.22640764742366154', + '230222193538950': '抖极', + '230222193539240': '2023-09-09' + }, + { + '10001': '商城渗透率', + '10002': '0.23413176847680775', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.23413176847680775', + '230222193538950': '抖极', + '230222193539240': '2023-09-22' + }, + { + '10001': '商城渗透率', + '10002': '0.1756200872092219', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.1756200872092219', + '230222193538950': '抖极', + '230222193539240': '2023-08-09' + }, + { + '10001': '商城渗透率', + '10002': '0.22902070741226982', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.22902070741226982', + '230222193538950': '抖极', + '230222193539240': '2023-09-30' + }, + { + '10001': '商城渗透率', + '10002': '0.2421416963772006', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.2421416963772006', + '230222193538950': '抖极', + '230222193539240': '2023-10-19' + }, + { + '10001': '商城渗透率', + '10002': '0.17382371800432558', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.17382371800432558', + '230222193538950': '抖极', + '230222193539240': '2023-08-03' + }, + { + '10001': '商城渗透率', + '10002': '0.1737502106176051', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.1737502106176051', + '230222193538950': '抖极', + '230222193539240': '2023-08-01' + }, + { + '10001': '商城渗透率', + '10002': '0.24549107596232694', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.24549107596232694', + '230222193538950': '抖极', + '230222193539240': '2023-09-24' + }, + { + '10001': '商城渗透率', + '10002': '0.20209126657690388', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.20209126657690388', + '230222193538950': '抖极', + '230222193539240': '2023-08-21' + }, + { + '10001': '商城渗透率', + '10002': '0.23321608876983443', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.23321608876983443', + '230222193538950': '抖极', + '230222193539240': '2023-09-21' + }, + { + '10001': '商城渗透率', + '10002': '0.23591602268497', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.23591602268497', + '230222193538950': '抖极', + '230222193539240': '2023-10-11' + }, + { + '10001': '商城渗透率', + '10002': '0.229293133422245', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.229293133422245', + '230222193538950': '抖极', + '230222193539240': '2023-10-03' + }, + { + '10001': '商城渗透率', + '10002': '0.23446840989666698', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.23446840989666698', + '230222193538950': '抖极', + '230222193539240': '2023-10-12' + }, + { + '10001': '商城渗透率', + '10002': '0.20381735609603377', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.20381735609603377', + '230222193538950': '抖极', + '230222193539240': '2023-09-02' + }, + { + '10001': '商城渗透率', + '10002': '0.2365559510040793', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.2365559510040793', + '230222193538950': '抖极', + '230222193539240': '2023-10-09' + }, + { + '10001': '商城渗透率', + '10002': '0.19902777636013919', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.19902777636013919', + '230222193538950': '抖极', + '230222193539240': '2023-08-18' + }, + { + '10001': '商城渗透率', + '10002': '0.2295089166249945', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.2295089166249945', + '230222193538950': '抖极', + '230222193539240': '2023-09-10' + }, + { + '10001': '商城渗透率', + '10002': '0.2062298147614055', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.2062298147614055', + '230222193538950': '抖极', + '230222193539240': '2023-08-26' + }, + { + '10001': '商城渗透率', + '10002': '0.20370473233142222', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.20370473233142222', + '230222193538950': '抖极', + '230222193539240': '2023-08-20' + }, + { + '10001': '商城渗透率', + '10002': '0.20353446669960187', + '10003': '230222193538917', + '20001': '抖极', + '230222193538536': '抖极', + '230222193538917': '0.20353446669960187', + '230222193538950': '抖极', + '230222193539240': '2023-08-28' + }, + { + '10001': '商城渗透率', + '10002': '0.7546229646346796', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.7546229646346796', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-09-05' + }, + { + '10001': '商城渗透率', + '10002': '0.8808953600427452', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.8808953600427452', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-09-27' + }, + { + '10001': '商城渗透率', + '10002': '0.7359305265330341', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.7359305265330341', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-08-25' + }, + { + '10001': '商城渗透率', + '10002': '0.7122024823558044', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.7122024823558044', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-08-11' + }, + { + '10001': '商城渗透率', + '10002': '0.8686998566434446', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.8686998566434446', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-10-12' + }, + { + '10001': '商城渗透率', + '10002': '0.876874087411286', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.876874087411286', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-10-06' + }, + { + '10001': '商城渗透率', + '10002': '0.7243895041172977', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.7243895041172977', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-08-19' + }, + { + '10001': '商城渗透率', + '10002': '0.6322938644335722', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.6322938644335722', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-08-05' + }, + { + '10001': '商城渗透率', + '10002': '0.6274694292257582', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.6274694292257582', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-08-07' + }, + { + '10001': '商城渗透率', + '10002': '0.8857798296859495', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.8857798296859495', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-10-04' + }, + { + '10001': '商城渗透率', + '10002': '0.7366245672272722', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.7366245672272722', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-08-15' + }, + { + '10001': '商城渗透率', + '10002': '0.8860424450326317', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.8860424450326317', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-09-25' + }, + { + '10001': '商城渗透率', + '10002': '0.8850207226961051', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.8850207226961051', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-10-07' + }, + { + '10001': '商城渗透率', + '10002': '0.8649845807027654', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.8649845807027654', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-10-14' + }, + { + '10001': '商城渗透率', + '10002': '0.7343330406940715', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.7343330406940715', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-08-26' + }, + { + '10001': '商城渗透率', + '10002': '0.725961849128294', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.725961849128294', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-08-17' + }, + { + '10001': '商城渗透率', + '10002': '0.7241660623640319', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.7241660623640319', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-08-13' + }, + { + '10001': '商城渗透率', + '10002': '0.7316154339087715', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.7316154339087715', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-08-14' + }, + { + '10001': '商城渗透率', + '10002': '0.8312474265304364', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.8312474265304364', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-09-14' + }, + { + '10001': '商城渗透率', + '10002': '0.8626584563924208', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.8626584563924208', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-10-15' + }, + { + '10001': '商城渗透率', + '10002': '0.8707284476659172', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.8707284476659172', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-10-16' + }, + { + '10001': '商城渗透率', + '10002': '0.7161234024877561', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.7161234024877561', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-08-18' + }, + { + '10001': '商城渗透率', + '10002': '0.865362397227174', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.865362397227174', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-09-24' + }, + { + '10001': '商城渗透率', + '10002': '0.832832306147395', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.832832306147395', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-09-16' + }, + { + '10001': '商城渗透率', + '10002': '0.8749132425324904', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.8749132425324904', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-09-26' + }, + { + '10001': '商城渗透率', + '10002': '0.8283935592884683', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.8283935592884683', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-09-15' + }, + { + '10001': '商城渗透率', + '10002': '0.8413418794914673', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.8413418794914673', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-09-17' + }, + { + '10001': '商城渗透率', + '10002': '0.7417291469171622', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.7417291469171622', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-09-04' + }, + { + '10001': '商城渗透率', + '10002': '0.7327930774872933', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.7327930774872933', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-08-23' + }, + { + '10001': '商城渗透率', + '10002': '0.7282383553840975', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.7282383553840975', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-08-16' + }, + { + '10001': '商城渗透率', + '10002': '0.8708809578372066', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.8708809578372066', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-10-17' + }, + { + '10001': '商城渗透率', + '10002': '0.7914497227480662', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.7914497227480662', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-09-06' + }, + { + '10001': '商城渗透率', + '10002': '0.7184655354493447', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.7184655354493447', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-08-12' + }, + { + '10001': '商城渗透率', + '10002': '0.6368235414002689', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.6368235414002689', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-08-03' + }, + { + '10001': '商城渗透率', + '10002': '0.8760626741793771', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.8760626741793771', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-10-01' + }, + { + '10001': '商城渗透率', + '10002': '0.8849466309186563', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.8849466309186563', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-10-09' + }, + { + '10001': '商城渗透率', + '10002': '0.8581010710975644', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.8581010710975644', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-09-20' + }, + { + '10001': '商城渗透率', + '10002': '0.8236398708889023', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.8236398708889023', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-09-08' + }, + { + '10001': '商城渗透率', + '10002': '0.6296941712365406', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.6296941712365406', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-08-02' + }, + { + '10001': '商城渗透率', + '10002': '0.8659725475573574', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.8659725475573574', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-09-22' + }, + { + '10001': '商城渗透率', + '10002': '0.884450679739481', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.884450679739481', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-10-03' + }, + { + '10001': '商城渗透率', + '10002': '0.7246333355902257', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.7246333355902257', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-08-30' + }, + { + '10001': '商城渗透率', + '10002': '0.8842913102566153', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.8842913102566153', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-10-02' + }, + { + '10001': '商城渗透率', + '10002': '0.7402620853325078', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.7402620853325078', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-08-29' + }, + { + '10001': '商城渗透率', + '10002': '0.6282238761926621', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.6282238761926621', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-08-01' + }, + { + '10001': '商城渗透率', + '10002': '0.833253571724829', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.833253571724829', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-09-11' + }, + { + '10001': '商城渗透率', + '10002': '0.8663559182013446', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.8663559182013446', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-09-21' + }, + { + '10001': '商城渗透率', + '10002': '0.8826076973121915', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.8826076973121915', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-10-05' + }, + { + '10001': '商城渗透率', + '10002': '0.7377842969744838', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.7377842969744838', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-08-28' + }, + { + '10001': '商城渗透率', + '10002': '0.8799597096270254', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.8799597096270254', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-09-23' + }, + { + '10001': '商城渗透率', + '10002': '0.8736580018791107', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.8736580018791107', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-10-18' + }, + { + '10001': '商城渗透率', + '10002': '0.8231528168020219', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.8231528168020219', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-09-09' + }, + { + '10001': '商城渗透率', + '10002': '0.7399187891258704', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.7399187891258704', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-08-27' + }, + { + '10001': '商城渗透率', + '10002': '0.8764569348690208', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.8764569348690208', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-10-19' + }, + { + '10001': '商城渗透率', + '10002': '0.8240297423571524', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.8240297423571524', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-09-10' + }, + { + '10001': '商城渗透率', + '10002': '0.8204224790244495', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.8204224790244495', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-09-07' + }, + { + '10001': '商城渗透率', + '10002': '0.7339764499189375', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.7339764499189375', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-08-24' + }, + { + '10001': '商城渗透率', + '10002': '0.8818393738194361', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.8818393738194361', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-10-10' + }, + { + '10001': '商城渗透率', + '10002': '0.7297888844899786', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.7297888844899786', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-08-31' + }, + { + '10001': '商城渗透率', + '10002': '0.885710757305164', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.885710757305164', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-10-08' + }, + { + '10001': '商城渗透率', + '10002': '0.8739902914484162', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.8739902914484162', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-09-30' + }, + { + '10001': '商城渗透率', + '10002': '0.8668584666910091', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.8668584666910091', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-10-13' + }, + { + '10001': '商城渗透率', + '10002': '0.7302895609881791', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.7302895609881791', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-08-20' + }, + { + '10001': '商城渗透率', + '10002': '0.8526022499928435', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.8526022499928435', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-09-19' + }, + { + '10001': '商城渗透率', + '10002': '0.6286079774441242', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.6286079774441242', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-08-08' + }, + { + '10001': '商城渗透率', + '10002': '0.7372141331842955', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.7372141331842955', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-08-22' + }, + { + '10001': '商城渗透率', + '10002': '0.883691756837258', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.883691756837258', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-10-11' + }, + { + '10001': '商城渗透率', + '10002': '0.7313610909767345', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.7313610909767345', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-09-01' + }, + { + '10001': '商城渗透率', + '10002': '0.8227987476582422', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.8227987476582422', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-09-13' + }, + { + '10001': '商城渗透率', + '10002': '0.8571021262009334', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.8571021262009334', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-09-28' + }, + { + '10001': '商城渗透率', + '10002': '0.7333618378329722', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.7333618378329722', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-09-02' + }, + { + '10001': '商城渗透率', + '10002': '0.849026702435392', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.849026702435392', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-09-18' + }, + { + '10001': '商城渗透率', + '10002': '0.8620804392130766', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.8620804392130766', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-09-29' + }, + { + '10001': '商城渗透率', + '10002': '0.8293572831883245', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.8293572831883245', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-09-12' + }, + { + '10001': '商城渗透率', + '10002': '0.7387730849526256', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.7387730849526256', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-09-03' + }, + { + '10001': '商城渗透率', + '10002': '0.6542260177971903', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.6542260177971903', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-08-09' + }, + { + '10001': '商城渗透率', + '10002': '0.6324733831422756', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.6324733831422756', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-08-04' + }, + { + '10001': '商城渗透率', + '10002': '0.7364577993984468', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.7364577993984468', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-08-21' + }, + { + '10001': '商城渗透率', + '10002': '0.6985245260895055', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.6985245260895055', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-08-10' + }, + { + '10001': '商城渗透率', + '10002': '0.6286031042128603', + '10003': '230222193538917', + '20001': '抖极/抖音', + '230222193538536': '抖极/抖音', + '230222193538917': '0.6286031042128603', + '230222193538950': '抖极/抖音', + '230222193539240': '2023-08-06' } ], - defaultHeaderColWidth: ['auto'], + defaultHeaderColWidth: [80, 'auto'], indicatorTitle: '', autoWrapText: true, - legends: { - type: 'discrete', - id: 'legend-discrete', - orient: 'bottom', - position: 'middle', - layoutType: 'normal', - visible: true, - maxRow: 1, - title: { - textStyle: { - fontSize: 12, - fill: '#6F6F6F' - } - }, - layoutLevel: 50, - 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' - } - } - }, - pager: { - layout: 'horizontal', - padding: 0, - textStyle: {}, - space: 0, - handler: { - preShape: 'triangleLeft', - nextShape: 'triangleRight', - style: {}, - state: { - disable: {} - } - } - }, - padding: [16, 0, 0, 0], - data: [ - { - label: '销售额', - shape: { - fill: '#2E62F1', - symbolType: 'square' - } - }, - { - label: '利润', - shape: { - fill: '#4DC36A', - symbolType: 'square' - } - } - ] - }, corner: { titleOnDimension: 'row' }, title: { - text: '细分', + text: '', align: 'center', orient: 'top', padding: [3, 0, 5, 0], @@ -1424,7 +2294,7 @@ export function createTable() { borderLineWidth: 0 } }, - hash: '1dcb9dc2d848ceaf060295843bfceeaf' + hash: '568656966c360f7834320c684da98649' }; const tableInstance = new VTable.PivotChart(document.getElementById(CONTAINER_ID), option); // tableInstance.onVChartEvent('click', args => { diff --git a/packages/vtable/src/components/axis/get-axis-attributes.ts b/packages/vtable/src/components/axis/get-axis-attributes.ts index fc30ce407..bca9c780d 100644 --- a/packages/vtable/src/components/axis/get-axis-attributes.ts +++ b/packages/vtable/src/components/axis/get-axis-attributes.ts @@ -15,11 +15,11 @@ const DEFAULT_TITLE_STYLE = { angle: {} }; -const DEFAULT_TEXT_FONT_FAMILY = +export const DEFAULT_TEXT_FONT_FAMILY = // eslint-disable-next-line max-len 'PingFang SC,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif, apple color emoji,segoe ui emoji,segoe ui symbol'; -const DEFAULT_TEXT_FONT_SIZE = 14; +export const DEFAULT_TEXT_FONT_SIZE = 14; const THEME_CONSTANTS = { FONT_FAMILY: DEFAULT_TEXT_FONT_FAMILY, @@ -96,8 +96,8 @@ export const commonAxis = { }; export function getAxisAttributes(option: ICellAxisOption) { - // const spec = merge({}, option, commonAxis); - const spec = option; + const spec = merge({}, option); + // const spec = option; let titleAngle = spec.title?.angle ?? 0; let titleTextStyle; if (spec.orient === 'left' || spec.orient === 'right') { diff --git a/packages/vtable/src/components/axis/get-axis-component-size.ts b/packages/vtable/src/components/axis/get-axis-component-size.ts index a7fa2a6ff..62a217349 100644 --- a/packages/vtable/src/components/axis/get-axis-component-size.ts +++ b/packages/vtable/src/components/axis/get-axis-component-size.ts @@ -1,7 +1,7 @@ import { isArray, merge } from '@visactor/vutils'; import type { BaseTableAPI } from '../../ts-types/base-table'; import type { ICellAxisOption } from '../../ts-types/component/axis'; -import { commonAxis } from './get-axis-attributes'; +import { DEFAULT_TEXT_FONT_FAMILY, DEFAULT_TEXT_FONT_SIZE, commonAxis } from './get-axis-attributes'; /** * @description: compuational vertical axis width @@ -26,9 +26,9 @@ export function computeAxisComponentWidth(config: ICellAxisOption, table: BaseTa text = attribute.label.formatMethod(text); } const { width, height } = table.measureText(text, { - fontSize: attribute.label?.style?.fontSize, - fontWeight: attribute.label?.style?.fontWeight, - fontFamily: attribute.label?.style?.fontFamily + fontSize: attribute.label?.style?.fontSize ?? DEFAULT_TEXT_FONT_SIZE, + fontWeight: attribute.label?.style?.fontWeight ?? 'normal', + fontFamily: attribute.label?.style?.fontFamily ?? DEFAULT_TEXT_FONT_FAMILY }); const widthLimit = attribute.label?.style?.maxLineWidth || Infinity; const angel = @@ -54,9 +54,9 @@ export function computeAxisComponentWidth(config: ICellAxisOption, table: BaseTa text = attribute.label.formatMethod(text); } const { width, height } = table.measureText(text, { - fontSize: attribute.label?.style?.fontSize, - fontWeight: attribute.label?.style?.fontWeight, - fontFamily: attribute.label?.style?.fontFamily + fontSize: attribute.label?.style?.fontSize ?? DEFAULT_TEXT_FONT_SIZE, + fontWeight: attribute.label?.style?.fontWeight ?? 'normal', + fontFamily: attribute.label?.style?.fontFamily ?? DEFAULT_TEXT_FONT_FAMILY }); const widthLimit = attribute.label?.style?.maxLineWidth || Infinity; const angle = @@ -71,9 +71,9 @@ export function computeAxisComponentWidth(config: ICellAxisOption, table: BaseTa let titleWidth = 0; if (attribute.title.visible && attribute.title.text) { const { width, height } = table.measureText(attribute.title.text, { - fontSize: attribute.title?.style?.fontSize, - fontWeight: attribute.title?.style?.fontWeight, - fontFamily: attribute.title?.style?.fontFamily + fontSize: attribute.title?.style?.fontSize ?? DEFAULT_TEXT_FONT_SIZE, + fontWeight: attribute.title?.style?.fontWeight ?? 'normal', + fontFamily: attribute.title?.style?.fontFamily ?? DEFAULT_TEXT_FONT_FAMILY }); const widthLimit = attribute.label?.style?.maxLineWidth || Infinity; const size = getSizeAfterResize(Math.min(width, widthLimit), height, attribute.title?.style?.angle); @@ -111,9 +111,9 @@ export function computeAxisComponentHeight(config: ICellAxisOption, table: BaseT text = attribute.label.formatMethod(text); } const { width, height } = table.measureText(text, { - fontSize: attribute.label?.style?.fontSize, - fontWeight: attribute.label?.style?.fontWeight, - fontFamily: attribute.label?.style?.fontFamily + fontSize: attribute.label?.style?.fontSize ?? DEFAULT_TEXT_FONT_SIZE, + fontWeight: attribute.label?.style?.fontWeight ?? 'normal', + fontFamily: attribute.label?.style?.fontFamily ?? DEFAULT_TEXT_FONT_FAMILY }); const widthLimit = attribute.label?.style?.maxLineWidth || Infinity; const angle = @@ -139,9 +139,9 @@ export function computeAxisComponentHeight(config: ICellAxisOption, table: BaseT text = attribute.label.formatMethod(text); } const { width, height } = table.measureText(text, { - fontSize: attribute.label?.style?.fontSize, - fontWeight: attribute.label?.style?.fontWeight, - fontFamily: attribute.label?.style?.fontFamily + fontSize: attribute.label?.style?.fontSize ?? DEFAULT_TEXT_FONT_SIZE, + fontWeight: attribute.label?.style?.fontWeight ?? 'normal', + fontFamily: attribute.label?.style?.fontFamily ?? DEFAULT_TEXT_FONT_FAMILY }); const widthLimit = attribute.label?.style?.maxLineWidth || Infinity; const angle = @@ -156,9 +156,9 @@ export function computeAxisComponentHeight(config: ICellAxisOption, table: BaseT let titleHeight = 0; if (attribute.title.visible && attribute.title.text) { const { width, height } = table.measureText(attribute.title.text, { - fontSize: attribute.title?.style?.fontSize, - fontWeight: attribute.title?.style?.fontWeight, - fontFamily: attribute.title?.style?.fontFamily + fontSize: attribute.title?.style?.fontSize ?? DEFAULT_TEXT_FONT_SIZE, + fontWeight: attribute.title?.style?.fontWeight ?? 'normal', + fontFamily: attribute.title?.style?.fontFamily ?? DEFAULT_TEXT_FONT_FAMILY }); const widthLimit = attribute.label?.style?.maxLineWidth || Infinity; const size = getSizeAfterResize(Math.min(width, widthLimit), height, attribute.title?.style?.angle); From 48dda5ec30e8d57af5e9056f52e9606186e82e86 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Fri, 20 Oct 2023 14:13:04 +0800 Subject: [PATCH 28/48] fix: fix resize compute col width logic #432 --- packages/vtable/src/scenegraph/scenegraph.ts | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/vtable/src/scenegraph/scenegraph.ts b/packages/vtable/src/scenegraph/scenegraph.ts index 5145e5e15..71adc59da 100644 --- a/packages/vtable/src/scenegraph/scenegraph.ts +++ b/packages/vtable/src/scenegraph/scenegraph.ts @@ -780,12 +780,16 @@ export class Scenegraph { } resize() { - // if (this.table.widthMode === 'adaptive' || this.table.autoFillWidth) { - // this.recalculateColWidths(); - // } - // if (this.table.heightMode === 'adaptive' || this.table.autoFillHeight) { - // this.recalculateRowHeights(); - // } + if (this.table.internalProps._widthResizedColMap.size === 0) { + //如果没有手动调整过行高列宽 则重新计算一遍并重新分配 + if (this.table.widthMode === 'adaptive' || this.table.autoFillWidth) { + this.recalculateColWidths(); + } + + if (this.table.heightMode === 'adaptive' || this.table.autoFillHeight) { + this.recalculateRowHeights(); + } + } // // widthMode === 'adaptive' 时，computeColsWidth()中已经有高度更新计算 // // else if (this.table.widthMode === 'adaptive') { // // this.table.clearRowHeightCache(); From 9b4ecc508362bb55fc2da7ebe004c8b3692e0b3e Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Fri, 20 Oct 2023 14:51:37 +0800 Subject: [PATCH 29/48] feat: use @visactor/vutils --- packages/vtable/src/ListTable.ts | 2 +- packages/vtable/src/body-helper/style.ts | 2 +- packages/vtable/src/components/menu/dom/logic/MenuElement.ts | 2 +- packages/vtable/src/core/BaseTable.ts | 5 ++--- packages/vtable/src/data/DataSource.ts | 3 ++- packages/vtable/src/dataset/dataset.ts | 1 - packages/vtable/src/event/EventTarget.ts | 2 +- packages/vtable/src/header-helper/style.ts | 2 +- packages/vtable/src/layout/pivot-header-layout.ts | 4 ++-- packages/vtable/src/layout/simple-header-layout.ts | 2 +- packages/vtable/src/render/layout/container.ts | 2 +- packages/vtable/src/render/layout/icon.ts | 2 +- packages/vtable/src/render/layout/image.ts | 2 -- packages/vtable/src/scenegraph/component/custom.ts | 2 +- .../scenegraph/graphic/contributions/chart-render-helper.ts | 3 +-- .../src/scenegraph/group-creater/cell-type/chart-cell.ts | 2 +- .../src/scenegraph/group-creater/cell-type/image-cell.ts | 2 +- .../scenegraph/group-creater/cell-type/spark-line-cell.ts | 2 +- .../src/scenegraph/group-creater/cell-type/text-cell.ts | 2 +- .../src/scenegraph/group-creater/cell-type/video-cell.ts | 2 +- .../group-creater/progress/update-position/dynamic-set-y.ts | 1 - packages/vtable/src/scenegraph/utils/get-prop.ts | 2 +- packages/vtable/src/state/state.ts | 5 ++--- packages/vtable/src/tools/NumberMap.ts | 2 +- 24 files changed, 25 insertions(+), 31 deletions(-) diff --git a/packages/vtable/src/ListTable.ts b/packages/vtable/src/ListTable.ts index 06b116643..faa97c839 100644 --- a/packages/vtable/src/ListTable.ts +++ b/packages/vtable/src/ListTable.ts @@ -16,7 +16,7 @@ import type { } from './ts-types'; import { HierarchyState } from './ts-types'; import { SimpleHeaderLayoutMap } from './layout'; -import { isValid } from './tools/util'; +import { isValid } from '@visactor/vutils'; import { _setDataSource } from './core/tableHelper'; import { BaseTable } from './core'; import type { ListTableProtected } from './ts-types/base-table'; diff --git a/packages/vtable/src/body-helper/style.ts b/packages/vtable/src/body-helper/style.ts index ae6dd6d28..79e919076 100644 --- a/packages/vtable/src/body-helper/style.ts +++ b/packages/vtable/src/body-helper/style.ts @@ -1,4 +1,4 @@ -import { isValid } from '../tools/util'; +import { isValid } from '@visactor/vutils'; import type { ColumnStyle, ColumnStyleOption, diff --git a/packages/vtable/src/components/menu/dom/logic/MenuElement.ts b/packages/vtable/src/components/menu/dom/logic/MenuElement.ts index e62664d8d..c18ed623b 100644 --- a/packages/vtable/src/components/menu/dom/logic/MenuElement.ts +++ b/packages/vtable/src/components/menu/dom/logic/MenuElement.ts @@ -11,7 +11,7 @@ import { createElement } from '../../../../tools/dom'; import { importStyle } from './MenuElementStyle'; import { TABLE_EVENT_TYPE } from '../../../../core/TABLE_EVENT_TYPE'; import { cellInRange } from '../../../../tools/helper'; -import { isValid } from '../../../../tools/util'; +import { isValid } from '@visactor/vutils'; import type { PivotHeaderLayoutMap } from '../../../../layout/pivot-header-layout'; import { regUrl } from '../../../../tools/global'; import type { BaseTableAPI } from '../../../../ts-types/base-table'; diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts index c72b70ff8..6eb6114fd 100644 --- a/packages/vtable/src/core/BaseTable.ts +++ b/packages/vtable/src/core/BaseTable.ts @@ -2,7 +2,6 @@ import * as columnStyleContents from '../body-helper/style'; import * as headerStyleContents from '../header-helper/style'; import { importStyle } from './style'; import * as style from '../tools/style'; -import { AABBBounds, isNumber } from '@visactor/vutils'; import { type CellAddress, type CellRange, @@ -47,7 +46,7 @@ import { EventTarget } from '../event/EventTarget'; import { NumberMap } from '../tools/NumberMap'; import { Rect } from '../tools/Rect'; import type { TableTheme } from '../themes/theme'; -import { defaultOrderFn, isValid, throttle2 } from '../tools/util'; +import { defaultOrderFn, throttle2 } from '../tools/util'; import themes from '../themes'; import { Env } from '../tools/env'; import { Scenegraph } from '../scenegraph/scenegraph'; @@ -58,7 +57,7 @@ import { HeaderHelper } from '../header-helper/header-helper'; import type { PivotHeaderLayoutMap } from '../layout/pivot-header-layout'; import { TooltipHandler } from '../components/tooltip/TooltipHandler'; import type { CachedDataSource, DataSource } from '../data'; -import { isBoolean, isFunction, type ITextSize } from '@visactor/vutils'; +import { AABBBounds, isNumber, isBoolean, isFunction, type ITextSize, isValid } from '@visactor/vutils'; import { textMeasure } from '../scenegraph/utils/text-measure'; import { getProp } from '../scenegraph/utils/get-prop'; import type { diff --git a/packages/vtable/src/data/DataSource.ts b/packages/vtable/src/data/DataSource.ts index 1aa4677c4..00c196203 100644 --- a/packages/vtable/src/data/DataSource.ts +++ b/packages/vtable/src/data/DataSource.ts @@ -13,8 +13,9 @@ import type { import { HierarchyState } from '../ts-types'; import { applyChainSafe, getOrApply, obj, isPromise, emptyFn } from '../tools/helper'; import { EventTarget } from '../event/EventTarget'; -import { getValueByPath, isValid } from '../tools/util'; +import { getValueByPath } from '../tools/util'; import { diffCellIndices } from '../tools/diff-cell'; +import { isValid } from '@visactor/vutils'; /** * 判断字段数据是否为访问器的格式 diff --git a/packages/vtable/src/dataset/dataset.ts b/packages/vtable/src/dataset/dataset.ts index de8d38e0a..538ff4600 100644 --- a/packages/vtable/src/dataset/dataset.ts +++ b/packages/vtable/src/dataset/dataset.ts @@ -1,5 +1,4 @@ import { isArray } from '@visactor/vutils'; -import { isValid } from '../tools/util'; import type { FilterRules, IDataConfig, diff --git a/packages/vtable/src/event/EventTarget.ts b/packages/vtable/src/event/EventTarget.ts index 2645e21b8..b632e7c2e 100644 --- a/packages/vtable/src/event/EventTarget.ts +++ b/packages/vtable/src/event/EventTarget.ts @@ -9,7 +9,7 @@ import type { TableEventHandlersEventArgumentMap, TableEventHandlersReturnMap } from '../ts-types'; -import { isValid } from '../tools/util'; +import { isValid } from '@visactor/vutils'; let idCount = 1; diff --git a/packages/vtable/src/header-helper/style.ts b/packages/vtable/src/header-helper/style.ts index c6ae9eae9..bf2f401de 100644 --- a/packages/vtable/src/header-helper/style.ts +++ b/packages/vtable/src/header-helper/style.ts @@ -1,4 +1,4 @@ -import { isValid } from '../tools/util'; +import { isValid } from '@visactor/vutils'; import type { FullExtendStyle, HeaderStyleOption, StylePropertyFunctionArg } from '../ts-types'; import { TextHeaderStyle } from './style/MultilineTextHeaderStyle'; // import { SortHeaderStyle } from "./style/SortHeaderStyle"; diff --git a/packages/vtable/src/layout/pivot-header-layout.ts b/packages/vtable/src/layout/pivot-header-layout.ts index b1bd65b37..ed7d5ae09 100644 --- a/packages/vtable/src/layout/pivot-header-layout.ts +++ b/packages/vtable/src/layout/pivot-header-layout.ts @@ -1,5 +1,5 @@ /* eslint-disable sort-imports */ -import { isValid, transpose } from '../tools/util'; +import { transpose } from '../tools/util'; import type { CellAddress, CellRange, @@ -35,7 +35,7 @@ import { getChartAxes, getChartDataId, getChartSpec, getRawChartSpec } from './c import type { IPivotLayoutHeadNode } from './pivot-layout-helper'; import { DimensionTree } from './pivot-layout-helper'; import type { Dataset } from '../dataset/dataset'; -import { cloneDeep, isArray } from '@visactor/vutils'; +import { cloneDeep, isArray, isValid } from '@visactor/vutils'; import type { TextStyle } from '../body-helper/style'; import type { ITableAxisOption } from '../ts-types/component/axis'; import { getQuadProps } from '../scenegraph/utils/padding'; diff --git a/packages/vtable/src/layout/simple-header-layout.ts b/packages/vtable/src/layout/simple-header-layout.ts index bef85b99c..439eda31a 100644 --- a/packages/vtable/src/layout/simple-header-layout.ts +++ b/packages/vtable/src/layout/simple-header-layout.ts @@ -1,7 +1,7 @@ /* eslint-disable sort-imports */ +import { isValid } from '@visactor/vutils'; import type { ListTable } from '../ListTable'; import { DefaultSparklineSpec } from '../tools/global'; -import { isValid } from '../tools/util'; import type { CellAddress, CellRange, CellLocation, IListTableCellHeaderPaths, LayoutObjectId } from '../ts-types'; import type { ColumnsDefine, TextColumnDefine } from '../ts-types/list-table/define'; import type { diff --git a/packages/vtable/src/render/layout/container.ts b/packages/vtable/src/render/layout/container.ts index 0376f47c2..0db0405af 100644 --- a/packages/vtable/src/render/layout/container.ts +++ b/packages/vtable/src/render/layout/container.ts @@ -1,4 +1,4 @@ -import { isNumber } from '../../tools/util'; +import { isNumber } from '@visactor/vutils'; import type { BaseTableAPI } from '../../ts-types/base-table'; import type { DirectionKey } from './direction'; import { DIRECTION_KEY } from './direction'; diff --git a/packages/vtable/src/render/layout/icon.ts b/packages/vtable/src/render/layout/icon.ts index 26762c571..31200eec6 100644 --- a/packages/vtable/src/render/layout/icon.ts +++ b/packages/vtable/src/render/layout/icon.ts @@ -1,4 +1,4 @@ -import { isString } from '../../tools/util'; +import { isString } from '@visactor/vutils'; import type { ElementOptions } from './element'; import { BaseElement } from './element'; import * as registerIcons from '../../icons'; diff --git a/packages/vtable/src/render/layout/image.ts b/packages/vtable/src/render/layout/image.ts index dbee865f0..dbddf8e5b 100644 --- a/packages/vtable/src/render/layout/image.ts +++ b/packages/vtable/src/render/layout/image.ts @@ -1,7 +1,5 @@ -import { isString } from '../../tools/util'; import type { ElementOptions } from './element'; import { BaseElement } from './element'; -import * as registerIcons from '../../icons'; import type { ColumnIconOption } from '../../ts-types'; type ImageOptions = { diff --git a/packages/vtable/src/scenegraph/component/custom.ts b/packages/vtable/src/scenegraph/component/custom.ts index 1ac65f3ba..26a74b32b 100644 --- a/packages/vtable/src/scenegraph/component/custom.ts +++ b/packages/vtable/src/scenegraph/component/custom.ts @@ -1,6 +1,6 @@ import type { Cursor } from '@visactor/vrender'; import { createArc, createCircle, createLine, createRect, Group as VGroup } from '@visactor/vrender'; -import { isFunction, isString, isValid } from '../../tools/util'; +import { isFunction, isString, isValid } from '@visactor/vutils'; import type { ICustomLayout, ICustomRender, ICustomRenderElement, ICustomRenderElements } from '../../ts-types'; import { Group } from '../graphic/group'; import { Icon } from '../graphic/icon'; diff --git a/packages/vtable/src/scenegraph/graphic/contributions/chart-render-helper.ts b/packages/vtable/src/scenegraph/graphic/contributions/chart-render-helper.ts index e6397dfe3..86e9086b0 100644 --- a/packages/vtable/src/scenegraph/graphic/contributions/chart-render-helper.ts +++ b/packages/vtable/src/scenegraph/graphic/contributions/chart-render-helper.ts @@ -1,7 +1,6 @@ import type { IStage } from '@visactor/vrender'; -import { isValid } from '../../../tools/util'; import type { Chart } from '../chart'; -import { Bounds } from '@visactor/vutils'; +import { Bounds, isValid } from '@visactor/vutils'; export const cancelRenderChartQueue = false; export const chartRenderKeys: string[] = []; export const chartRenderQueueList: Chart[] = []; diff --git a/packages/vtable/src/scenegraph/group-creater/cell-type/chart-cell.ts b/packages/vtable/src/scenegraph/group-creater/cell-type/chart-cell.ts index e3e9ec0d4..ea1c53f07 100644 --- a/packages/vtable/src/scenegraph/group-creater/cell-type/chart-cell.ts +++ b/packages/vtable/src/scenegraph/group-creater/cell-type/chart-cell.ts @@ -2,7 +2,7 @@ import { Group } from '../../graphic/group'; import { Chart } from '../../graphic/chart'; import * as registerChartTypes from '../../../chartModule'; import { getFunctionalProp } from '../../utils/get-prop'; -import { isValid } from '../../../tools/util'; +import { isValid } from '@visactor/vutils'; import type { BaseTableAPI } from '../../../ts-types/base-table'; import type { IThemeSpec } from '@visactor/vrender'; export function createChartCellGroup( diff --git a/packages/vtable/src/scenegraph/group-creater/cell-type/image-cell.ts b/packages/vtable/src/scenegraph/group-creater/cell-type/image-cell.ts index 15ab0779f..9b3243f3a 100644 --- a/packages/vtable/src/scenegraph/group-creater/cell-type/image-cell.ts +++ b/packages/vtable/src/scenegraph/group-creater/cell-type/image-cell.ts @@ -9,7 +9,7 @@ import { calcKeepAspectRatioSize } from '../../utils/keep-aspect-ratio'; import { calcStartPosition } from '../../utils/cell-pos'; import type { Scenegraph } from '../../scenegraph'; import { getProp, getFunctionalProp } from '../../utils/get-prop'; -import { isValid } from '../../../tools/util'; +import { isValid } from '@visactor/vutils'; import { getQuadProps } from '../../utils/padding'; const regedIcons = icons.get(); diff --git a/packages/vtable/src/scenegraph/group-creater/cell-type/spark-line-cell.ts b/packages/vtable/src/scenegraph/group-creater/cell-type/spark-line-cell.ts index 862ab2a8b..d3b4bfbbe 100644 --- a/packages/vtable/src/scenegraph/group-creater/cell-type/spark-line-cell.ts +++ b/packages/vtable/src/scenegraph/group-creater/cell-type/spark-line-cell.ts @@ -1,7 +1,7 @@ import type { ILine, ISymbol, IThemeSpec } from '@visactor/vrender'; import { createLine, createSymbol } from '@visactor/vrender'; import { PointScale, LinearScale } from '@visactor/vscale'; -import { isValid } from '../../../tools/util'; +import { isValid } from '@visactor/vutils'; import { Group } from '../../graphic/group'; import type { CellInfo, SparklineSpec } from '../../../ts-types'; import type { BaseTableAPI } from '../../../ts-types/base-table'; diff --git a/packages/vtable/src/scenegraph/group-creater/cell-type/text-cell.ts b/packages/vtable/src/scenegraph/group-creater/cell-type/text-cell.ts index 18f409981..74d225580 100644 --- a/packages/vtable/src/scenegraph/group-creater/cell-type/text-cell.ts +++ b/packages/vtable/src/scenegraph/group-creater/cell-type/text-cell.ts @@ -1,7 +1,7 @@ /* eslint-disable no-undef */ import type { IThemeSpec } from '@visactor/vrender'; import { createArc } from '@visactor/vrender'; -import { isValid } from '../../../tools/util'; +import { isValid } from '@visactor/vutils'; import { Group } from '../../graphic/group'; // import { parseFont } from '../../utils/font'; import { getFunctionalProp } from '../../utils/get-prop'; diff --git a/packages/vtable/src/scenegraph/group-creater/cell-type/video-cell.ts b/packages/vtable/src/scenegraph/group-creater/cell-type/video-cell.ts index 723170b69..8459e14ed 100644 --- a/packages/vtable/src/scenegraph/group-creater/cell-type/video-cell.ts +++ b/packages/vtable/src/scenegraph/group-creater/cell-type/video-cell.ts @@ -8,7 +8,7 @@ import { Icon } from '../../graphic/icon'; import { calcStartPosition } from '../../utils/cell-pos'; import { _adjustWidthHeight } from './image-cell'; import { getFunctionalProp, getProp } from '../../utils/get-prop'; -import { isValid } from '../../../tools/util'; +import { isValid } from '@visactor/vutils'; import type { BaseTableAPI } from '../../../ts-types/base-table'; const regedIcons = icons.get(); diff --git a/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-y.ts b/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-y.ts index 987c71927..016ec1a07 100644 --- a/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-y.ts +++ b/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-y.ts @@ -1,4 +1,3 @@ -import { isValid } from '../../../../tools/util'; import type { Group } from '../../../graphic/group'; import { computeRowsHeight } from '../../../layout/compute-row-height'; import type { SceneProxy } from '../proxy'; diff --git a/packages/vtable/src/scenegraph/utils/get-prop.ts b/packages/vtable/src/scenegraph/utils/get-prop.ts index feb6fb7f8..e8712c037 100644 --- a/packages/vtable/src/scenegraph/utils/get-prop.ts +++ b/packages/vtable/src/scenegraph/utils/get-prop.ts @@ -1,4 +1,4 @@ -import { isValid } from '../../tools/util'; +import { isValid } from '@visactor/vutils'; import type { StylePropertyFunctionArg } from '../../ts-types'; import type { BaseTableAPI } from '../../ts-types/base-table'; diff --git a/packages/vtable/src/state/state.ts b/packages/vtable/src/state/state.ts index a4561d31f..7958e292b 100644 --- a/packages/vtable/src/state/state.ts +++ b/packages/vtable/src/state/state.ts @@ -26,7 +26,7 @@ import type { ListTable } from '../ListTable'; import { PIVOT_TABLE_EVENT_TYPE } from '../ts-types/pivot-table/PIVOT_TABLE_EVENT_TYPE'; import type { PivotHeaderLayoutMap } from '../layout/pivot-header-layout'; import { TABLE_EVENT_TYPE } from '../core/TABLE_EVENT_TYPE'; -import { Bounds } from '@visactor/vutils'; +import { Bounds, isObject, isString, isValid } from '@visactor/vutils'; import { updateDrill } from './drill'; import { clearChartHover, updateChartHover } from './spark-line'; import { endMoveCol, startMoveCol, updateMoveCol } from './cell-move'; @@ -34,7 +34,6 @@ import type { FederatedEvent } from '@visactor/vrender'; import type { TooltipOptions } from '../ts-types/tooltip'; import { getIconAndPositionFromTarget } from '../scenegraph/utils/icon'; import type { BaseTableAPI } from '../ts-types/base-table'; -import { isObject, isString, isValid } from '../tools/util'; import { debounce } from '../tools/debounce'; import { updateResizeColumn } from './resize/update-resize-column'; @@ -791,7 +790,7 @@ export class StateManeger { if (dropDownMenu) { for (let i = 0; i < dropDownMenu.length; i++) { const item: any = dropDownMenu[i]; - if (isObject(item) && (item.menuKey || item.text) === (menuKey || '') && i === index) { + if (isObject(item) && ((item as any).menuKey || (item as any).text) === (menuKey || '') && i === index) { // return i === index; return true; } else if (isString(item) && item === menuKey && i === index) { diff --git a/packages/vtable/src/tools/NumberMap.ts b/packages/vtable/src/tools/NumberMap.ts index 77b7cfd18..5f79dc684 100644 --- a/packages/vtable/src/tools/NumberMap.ts +++ b/packages/vtable/src/tools/NumberMap.ts @@ -1,4 +1,4 @@ -import { isValid } from '../tools/util'; +import { isValid } from '@visactor/vutils'; const indexFirst = (arr: number[], elm: number): number => { let low = 0; From 4c62d7d117055a2c993ee03bef86ad8fcb873e65 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Fri, 20 Oct 2023 17:52:39 +0800 Subject: [PATCH 30/48] fix: fix row progress --- .../scenegraph/group-creater/progress/proxy.ts | 12 +++++++----- .../progress/update-position/dynamic-set-y.ts | 16 +++++++++------- packages/vtable/src/scenegraph/layout/frozen.ts | 10 ++++++---- 3 files changed, 22 insertions(+), 16 deletions(-) diff --git a/packages/vtable/src/scenegraph/group-creater/progress/proxy.ts b/packages/vtable/src/scenegraph/group-creater/progress/proxy.ts index e8d890025..5c607e4e7 100644 --- a/packages/vtable/src/scenegraph/group-creater/progress/proxy.ts +++ b/packages/vtable/src/scenegraph/group-creater/progress/proxy.ts @@ -38,7 +38,7 @@ export class SceneProxy { deltaY: number = 0; colLimit = 100; - bodyLeftCol: number; // table body部分的第一列col number + // bodyLeftCol: number; // table body部分的第一列col number bodyRightCol: number; // table body部分的最后一列col number totalCol: number; // 渐进完成最后一列的col number colStart: number; // 当前维护的部分第一列的col number @@ -79,10 +79,12 @@ export class SceneProxy { } } + get bodyLeftCol(): number { + return this.table.frozenColCount; + } + setParamsForColumn() { - // this.bodyLeftCol = this.table.rowHeaderLevelCount; - this.bodyLeftCol = this.table.frozenColCount; - // this.bodyRightCol = this.table.colCount - 1; + // this.bodyLeftCol = this.table.frozenColCount; this.bodyRightCol = this.table.colCount - 1 - this.table.rightFrozenColCount; // compute the column info about progress creation @@ -550,7 +552,7 @@ export class SceneProxy { } if ( - col >= this.table.rowHeaderLevelCount && // not row header + col >= this.table.frozenColCount && // not row header col < this.table.colCount - this.table.rightFrozenColCount && // not right frozen (col < this.colStart || col > this.colEnd) // not in proxy col range ) { diff --git a/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-y.ts b/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-y.ts index 016ec1a07..d32bd6da0 100644 --- a/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-y.ts +++ b/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-y.ts @@ -64,10 +64,12 @@ async function moveCell( syncBottomRow = distEndRow; } else { const topRow = Math.max(proxy.bodyTopRow, screenTopRow - proxy.screenRowCount * 1); - const BottomRow = Math.min(proxy.bodyBottomRow, screenTopRow + proxy.screenRowCount * 2); + const bottomRow = Math.min(proxy.bodyBottomRow, screenTopRow + proxy.screenRowCount * 2); // get coincide of distStartRow&distEndRow and topRow&BottomRow - syncTopRow = Math.max(distStartRow, topRow); - syncBottomRow = Math.min(distEndRow, BottomRow); + // syncTopRow = Math.max(distStartRow, topRow); + // syncBottomRow = Math.min(distEndRow, bottomRow); + syncTopRow = topRow; + syncBottomRow = bottomRow; } // const syncTopRow = Math.max(proxy.bodyTopRow, screenTopRow - proxy.screenRowCount * 1); @@ -102,7 +104,7 @@ async function moveCell( proxy.currentRow = direction === 'up' ? proxy.currentRow + count : proxy.currentRow - count; proxy.totalRow = direction === 'up' ? proxy.totalRow + count : proxy.totalRow - count; proxy.referenceRow = proxy.rowStart + Math.floor((proxy.rowEnd - proxy.rowStart) / 2); - proxy.rowUpdatePos = distStartRow; + proxy.rowUpdatePos = Math.min(proxy.rowUpdatePos, distStartRow); proxy.rowUpdateDirection = direction; proxy.table.scenegraph.updateNextFrame(); @@ -163,7 +165,7 @@ async function moveCell( function updatePartRowPosition(startRow: number, endRow: number, direction: 'up' | 'down', proxy: SceneProxy) { // row header group - for (let col = 0; col < proxy.table.rowHeaderLevelCount; col++) { + for (let col = 0; col < proxy.table.frozenColCount; col++) { const colGroup = proxy.table.scenegraph.getColGroup(col); for (let row = startRow; row <= endRow; row++) { updateCellGroupPosition(colGroup, direction, proxy); @@ -207,7 +209,7 @@ function updateCellGroupPosition(colGroup: Group, direction: 'up' | 'down', prox function updateAllRowPosition(distStartRowY: number, count: number, direction: 'up' | 'down', proxy: SceneProxy) { // row header group - for (let col = 0; col < proxy.table.rowHeaderLevelCount; col++) { + for (let col = 0; col < proxy.table.frozenColCount; col++) { const colGroup = proxy.table.scenegraph.getColGroup(col); colGroup?.forEachChildren((cellGroup: Group, index) => { // 这里使用colGroup变量而不是for proxy.rowStart to proxy.rowEndproxy.rowEnd是因为在更新内可能出现row号码重复的情况 @@ -252,7 +254,7 @@ function updateAllRowPosition(distStartRowY: number, count: number, direction: ' export function updateRowContent(syncTopRow: number, syncBottomRow: number, proxy: SceneProxy) { // row header group - for (let col = 0; col < proxy.table.rowHeaderLevelCount; col++) { + for (let col = 0; col < proxy.table.frozenColCount; col++) { for (let row = syncTopRow; row <= syncBottomRow; row++) { // const cellGroup = proxy.table.scenegraph.getCell(col, row); const cellGroup = proxy.highPerformanceGetCell(col, row, true); diff --git a/packages/vtable/src/scenegraph/layout/frozen.ts b/packages/vtable/src/scenegraph/layout/frozen.ts index 7993611e0..2ccf82520 100644 --- a/packages/vtable/src/scenegraph/layout/frozen.ts +++ b/packages/vtable/src/scenegraph/layout/frozen.ts @@ -56,6 +56,12 @@ export function resetFrozen(scene: Scenegraph) { moveColumnFromBottomToLeftBottomCorner(scene); } } + + // scene.frozenColCount = scene.rowHeaderGroup.childrenCount; + scene.frozenColCount = scene.table.frozenColCount; + scene.frozenRowCount = scene.colHeaderGroup.firstChild?.childrenCount ?? 0; + scene.proxy.colStart = scene.table.frozenColCount; + scene.bodyGroup.setAttribute('x', scene.rowHeaderGroup.attribute.width); scene.colHeaderGroup.setAttribute('x', scene.cornerHeaderGroup.attribute.width); @@ -66,10 +72,6 @@ export function resetFrozen(scene: Scenegraph) { scene.component.setFrozenColumnShadow(scene.table.frozenColCount - 1); } scene.hasFrozen = true; - - // scene.frozenColCount = scene.rowHeaderGroup.childrenCount; - scene.frozenColCount = scene.table.frozenColCount; - scene.frozenRowCount = scene.colHeaderGroup.firstChild?.childrenCount ?? 0; } function moveColumnFromBodyToRowHeader(scene: Scenegraph) { From 4982cd30abf361e248f0f903ffd2a1e84e9840b8 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Fri, 20 Oct 2023 18:16:19 +0800 Subject: [PATCH 31/48] fix: fix transpose row header --- packages/vtable/src/core/BaseTable.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts index edc10a102..31df6bd23 100644 --- a/packages/vtable/src/core/BaseTable.ts +++ b/packages/vtable/src/core/BaseTable.ts @@ -2566,6 +2566,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { _setRecords(this, records); } + this.internalProps.frozenColCount = this.rowHeaderLevelCount; // 生成单元格场景树 this.scenegraph.createSceneGraph(); From 5b23ebfcceb1fbe15ade72713fc3cc2557bc59f1 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Fri, 20 Oct 2023 18:26:23 +0800 Subject: [PATCH 32/48] fix: fix transpose row header --- packages/vtable/src/core/BaseTable.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts index 31df6bd23..13e935d8e 100644 --- a/packages/vtable/src/core/BaseTable.ts +++ b/packages/vtable/src/core/BaseTable.ts @@ -2566,7 +2566,7 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { _setRecords(this, records); } - this.internalProps.frozenColCount = this.rowHeaderLevelCount; + this.internalProps.frozenColCount = this.options.frozenColCount || this.rowHeaderLevelCount; // 生成单元格场景树 this.scenegraph.createSceneGraph(); From b8b9f37000c0dd18c3cc87cd6a644ec9c446ad5a Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Mon, 23 Oct 2023 16:06:28 +0800 Subject: [PATCH 33/48] =?UTF-8?q?fix:=20when=20columns=20is=20blank=20and?= =?UTF-8?q?=20set=20indicatorsAsCol=3Dfalse=EF=BC=8Cpivot=20show=20total?= =?UTF-8?q?=20value=20#440?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/vtable/src/dataset/dataset.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/vtable/src/dataset/dataset.ts b/packages/vtable/src/dataset/dataset.ts index 538ff4600..6287a2012 100644 --- a/packages/vtable/src/dataset/dataset.ts +++ b/packages/vtable/src/dataset/dataset.ts @@ -226,9 +226,7 @@ export class Dataset { this.rows, indicatorsAsCol ? undefined : indicators, this.rowsIsTotal, - this?.totals?.row?.showGrandTotals || - (!indicatorsAsCol && this.columns.length === 0) || - (indicatorsAsCol && this.rows.length === 0), + this?.totals?.row?.showGrandTotals || (indicatorsAsCol && this.rows.length === 0), this.rowGrandTotalLabel, this.rowSubTotalLabel ); @@ -245,7 +243,7 @@ export class Dataset { this.columns, indicatorsAsCol ? indicators : undefined, this.colsIsTotal, - this.totals?.column?.showGrandTotals, // || this.rows.length === 0,//todo 这里原有逻辑暂时注释掉 + this.totals?.column?.showGrandTotals || (!indicatorsAsCol && this.columns.length === 0), // || this.rows.length === 0,//todo 这里原有逻辑暂时注释掉 this.colGrandTotalLabel, this.colSubTotalLabel ); From cf20f185f360b4383583efc3e9fe6aadb4e2ad27 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Mon, 23 Oct 2023 18:34:27 +0800 Subject: [PATCH 34/48] refactor: [refactor] judge when use isHorizontalScrollable isVerticalScrollable #443 --- packages/vtable/src/event/listener/touch.ts | 4 ++-- packages/vtable/src/event/scroll.ts | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/vtable/src/event/listener/touch.ts b/packages/vtable/src/event/listener/touch.ts index ad10c08bd..06979fd1e 100644 --- a/packages/vtable/src/event/listener/touch.ts +++ b/packages/vtable/src/event/listener/touch.ts @@ -52,8 +52,8 @@ export function bindTouchListener(eventManeger: EventManeger) { if ( e.cancelable && - ((deltaY !== 0 && isVerticalScrollable(deltaY, stateManeger)) || - (deltaX !== 0 && isHorizontalScrollable(deltaX, stateManeger))) + ((Math.abs(deltaY) >= Math.abs(deltaX) && deltaY !== 0 && isVerticalScrollable(deltaY, stateManeger)) || + (Math.abs(deltaY) <= Math.abs(deltaX) && deltaX !== 0 && isHorizontalScrollable(deltaX, stateManeger))) ) { e.preventDefault(); } diff --git a/packages/vtable/src/event/scroll.ts b/packages/vtable/src/event/scroll.ts index 96c861a4d..6de578e55 100644 --- a/packages/vtable/src/event/scroll.ts +++ b/packages/vtable/src/event/scroll.ts @@ -27,7 +27,8 @@ export function handleWhell(event: WheelEvent, state: StateManeger) { state.resetInteractionState(); if ( event.cancelable && - ((deltaY !== 0 && isVerticalScrollable(deltaY, state)) || (deltaX !== 0 && isHorizontalScrollable(deltaX, state))) + ((Math.abs(deltaY) >= Math.abs(deltaX) && deltaY !== 0 && isVerticalScrollable(deltaY, state)) || + (Math.abs(deltaY) <= Math.abs(deltaX) && deltaX !== 0 && isHorizontalScrollable(deltaX, state))) ) { event.preventDefault(); } From a48cacbe24092ee814b9d84e75d32c919941d3bf Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Mon, 23 Oct 2023 18:54:29 +0800 Subject: [PATCH 35/48] fix: noRows indicator in col error --- packages/vtable/src/layout/pivot-header-layout.ts | 4 ++-- packages/vtable/src/scenegraph/refresh-node/update-chart.ts | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/vtable/src/layout/pivot-header-layout.ts b/packages/vtable/src/layout/pivot-header-layout.ts index ed7d5ae09..4ce5c9054 100644 --- a/packages/vtable/src/layout/pivot-header-layout.ts +++ b/packages/vtable/src/layout/pivot-header-layout.ts @@ -1194,8 +1194,8 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { return this.columnDimensionTree.tree.size + this.rowHeaderLevelCount + this.rightFrozenColCount; } get rowCount(): number { - // return this.rowDimensionTree.tree.size + this.columnHeaderLevelCount + this.bottomFrozenRowCount; - return (this._rowHeaderCellIds?.length ?? 0) + this.columnHeaderLevelCount + this.bottomFrozenRowCount; + return this.rowDimensionTree.tree.size + this.columnHeaderLevelCount + this.bottomFrozenRowCount; + // return (this._rowHeaderCellIds?.length ?? 0) + this.columnHeaderLevelCount + this.bottomFrozenRowCount; } get bodyRowCount() { return this.rowDimensionTree.tree.size; diff --git a/packages/vtable/src/scenegraph/refresh-node/update-chart.ts b/packages/vtable/src/scenegraph/refresh-node/update-chart.ts index b69be5dde..b323d67a5 100644 --- a/packages/vtable/src/scenegraph/refresh-node/update-chart.ts +++ b/packages/vtable/src/scenegraph/refresh-node/update-chart.ts @@ -14,7 +14,7 @@ export function updateChartSize(scenegraph: Scenegraph, col: number) { const columnGroup = scenegraph.getColGroup(c); // const chartInstance = (columnGroup.attribute as any)?.chartInstance; // if (chartInstance) { - columnGroup.getChildren()?.forEach((cellNode: Group) => { + columnGroup?.getChildren()?.forEach((cellNode: Group) => { const width = scenegraph.table.getColWidth(cellNode.col); const height = scenegraph.table.getRowHeight(cellNode.row); @@ -68,7 +68,7 @@ export function clearChartCacheImage(scenegraph: Scenegraph) { // 将调整列宽的后面的面也都一起需要调整viewbox。 TODO：columnResizeType支持后需要根据变化的列去调整，范围可能变多或者变少 for (let c = scenegraph.proxy.colStart; c <= scenegraph.proxy.colEnd; c++) { const columnGroup = scenegraph.getColGroup(c); - columnGroup.getChildren()?.forEach((cellNode: Group) => { + columnGroup?.getChildren()?.forEach((cellNode: Group) => { cellNode.children.forEach((node: Chart) => { if ((node as any).type === 'chart') { node.cacheCanvas = null; @@ -85,7 +85,7 @@ export function updateChartData(scenegraph: Scenegraph) { // 将调整列宽的后面的面也都一起需要调整viewbox。 TODO：columnResizeType支持后需要根据变化的列去调整，范围可能变多或者变少 for (let c = scenegraph.proxy.colStart; c <= scenegraph.proxy.colEnd; c++) { const columnGroup = scenegraph.getColGroup(c); - columnGroup.getChildren()?.forEach((cellNode: Group) => { + columnGroup?.getChildren()?.forEach((cellNode: Group) => { const col = cellNode.col; const row = cellNode.row; cellNode.children.forEach((node: Chart) => { From eb7bf6463c84bdb1c0908e2a2ff8510c8e2bea03 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Mon, 23 Oct 2023 20:07:05 +0800 Subject: [PATCH 36/48] fix: noRows indicator in col error --- packages/vtable/src/layout/pivot-header-layout.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/vtable/src/layout/pivot-header-layout.ts b/packages/vtable/src/layout/pivot-header-layout.ts index 4ce5c9054..a32e3efeb 100644 --- a/packages/vtable/src/layout/pivot-header-layout.ts +++ b/packages/vtable/src/layout/pivot-header-layout.ts @@ -1194,7 +1194,13 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { return this.columnDimensionTree.tree.size + this.rowHeaderLevelCount + this.rightFrozenColCount; } get rowCount(): number { - return this.rowDimensionTree.tree.size + this.columnHeaderLevelCount + this.bottomFrozenRowCount; + return ( + ((Array.isArray(this.dataset.records) ? this.dataset.records.length > 0 : true) && this._indicators?.length > 0 // 有展示的body值的情况 需要展示body row 否则只有表头 + ? this.rowDimensionTree.tree.size //兼容bugserver: https://bugserver.cn.goofy.app/case?product=VTable&fileid=65364a57173c354c242a7c4f + : this._rowHeaderCellIds?.length ?? 0) + //兼容 bugserver：https://bugserver.cn.goofy.app/case?product=VTable&fileid=6527ac0695c0cdbd788cf17d + this.columnHeaderLevelCount + + this.bottomFrozenRowCount + ); // return (this._rowHeaderCellIds?.length ?? 0) + this.columnHeaderLevelCount + this.bottomFrozenRowCount; } get bodyRowCount() { From 1633c940f4c9a55d73bd97e15a578d0e0a7e7b98 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Mon, 23 Oct 2023 20:21:08 +0800 Subject: [PATCH 37/48] fix: noRows indicator in col error --- packages/vtable/src/layout/pivot-header-layout.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vtable/src/layout/pivot-header-layout.ts b/packages/vtable/src/layout/pivot-header-layout.ts index a32e3efeb..3968b0bcd 100644 --- a/packages/vtable/src/layout/pivot-header-layout.ts +++ b/packages/vtable/src/layout/pivot-header-layout.ts @@ -1195,7 +1195,7 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { } get rowCount(): number { return ( - ((Array.isArray(this.dataset.records) ? this.dataset.records.length > 0 : true) && this._indicators?.length > 0 // 有展示的body值的情况 需要展示body row 否则只有表头 + ((Array.isArray(this._table.records) ? this._table.records.length > 0 : true) && this._indicators?.length > 0 // 有展示的body值的情况 需要展示body row 否则只有表头 ? this.rowDimensionTree.tree.size //兼容bugserver: https://bugserver.cn.goofy.app/case?product=VTable&fileid=65364a57173c354c242a7c4f : this._rowHeaderCellIds?.length ?? 0) + //兼容 bugserver：https://bugserver.cn.goofy.app/case?product=VTable&fileid=6527ac0695c0cdbd788cf17d this.columnHeaderLevelCount + From 348837b6be14c3b58662f6f0eec36ffe20e7edd9 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Tue, 24 Oct 2023 10:08:45 +0800 Subject: [PATCH 38/48] fix: noRows indicator in col error --- packages/vtable/src/layout/pivot-header-layout.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/vtable/src/layout/pivot-header-layout.ts b/packages/vtable/src/layout/pivot-header-layout.ts index 3968b0bcd..290f71646 100644 --- a/packages/vtable/src/layout/pivot-header-layout.ts +++ b/packages/vtable/src/layout/pivot-header-layout.ts @@ -1195,8 +1195,10 @@ export class PivotHeaderLayoutMap implements LayoutMapAPI { } get rowCount(): number { return ( - ((Array.isArray(this._table.records) ? this._table.records.length > 0 : true) && this._indicators?.length > 0 // 有展示的body值的情况 需要展示body row 否则只有表头 - ? this.rowDimensionTree.tree.size //兼容bugserver: https://bugserver.cn.goofy.app/case?product=VTable&fileid=65364a57173c354c242a7c4f + ((Array.isArray(this._table.records) ? this._table.records.length > 0 : true) && + this._indicators?.length > 0 && // 前两个判断条件来判断 有展示的body值的情况 需要展示body row + !this._rowHeaderCellIds?.length // 需要展示body值 但 _rowHeaderCellIds的长度维度为0 无rows 行表头为空 + ? 1 //兼容bugserver: https://bugserver.cn.goofy.app/case?product=VTable&fileid=65364a57173c354c242a7c4f : this._rowHeaderCellIds?.length ?? 0) + //兼容 bugserver：https://bugserver.cn.goofy.app/case?product=VTable&fileid=6527ac0695c0cdbd788cf17d this.columnHeaderLevelCount + this.bottomFrozenRowCount From d2991229068623f80d2747ef3c6348c9d6251a42 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Tue, 24 Oct 2023 11:31:11 +0800 Subject: [PATCH 39/48] feat: add log axis type --- .../vtable/examples/pivot-chart/aeolus.ts | 2 +- packages/vtable/src/components/axis/axis.ts | 17 ++++-- .../src/components/axis/linear-scale.ts | 58 ++++++++++++++++--- .../layout/chart-helper/get-axis-config.ts | 40 ++++++++++--- .../layout/chart-helper/get-axis-domain.ts | 19 +++++- .../src/layout/chart-helper/get-chart-spec.ts | 4 +- 6 files changed, 115 insertions(+), 25 deletions(-) diff --git a/packages/vtable/examples/pivot-chart/aeolus.ts b/packages/vtable/examples/pivot-chart/aeolus.ts index 7c6058a4f..ad4e38e28 100644 --- a/packages/vtable/examples/pivot-chart/aeolus.ts +++ b/packages/vtable/examples/pivot-chart/aeolus.ts @@ -370,7 +370,7 @@ export function createTable() { paddingOuter: 0.175 }, { - type: 'linear', + type: 'symlog', tick: { visible: false, tickMode: 'd3', diff --git a/packages/vtable/src/components/axis/axis.ts b/packages/vtable/src/components/axis/axis.ts index d507448cc..1130c6beb 100644 --- a/packages/vtable/src/components/axis/axis.ts +++ b/packages/vtable/src/components/axis/axis.ts @@ -28,7 +28,7 @@ export class CartesianAxis { option: ICellAxisOption; orient: IOrientType; visible: boolean; - type: 'linear' | 'band' | 'time'; + type: 'linear' | 'band' | 'point' | 'time' | 'log' | 'symlog'; inverse: boolean; data?: any[]; tickData: DataView; @@ -58,7 +58,7 @@ export class CartesianAxis { initScale() { const option = this.option as any; - if (this.type === 'band') { + if (this.type === 'band' || this.type === 'point') { this.scale = new BandAxisScale(); this.scale.bandPadding = option.bandPadding; this.scale.paddingInner = option.paddingInner; @@ -66,9 +66,16 @@ export class CartesianAxis { this.scale.calcScales(DEFAULT_BAND_INNER_PADDING, DEFAULT_BAND_OUTER_PADDING); // 0.1 0.3 this.scale.updateScaleDomain(this.data); this.updateScaleRange(); - } else if (this.type === 'linear' || this.type === 'time') { - this.scale = new LinearAxisScale(); - this.scale.setExtraAttrFromSpec(option.nice, option.zero, option.range, option.expand); + } else if (this.type === 'linear' || this.type === 'time' || this.type === 'log' || this.type === 'symlog') { + this.scale = new LinearAxisScale(this.type); + this.scale.setExtraAttrFromSpec( + option.nice, + option.zero, + option.range, + option.expand, + option.base, + option.constant + ); this.scale.transformScaleDomain(); this.scale.updateScaleDomain(); this.updateScaleRange(); diff --git a/packages/vtable/src/components/axis/linear-scale.ts b/packages/vtable/src/components/axis/linear-scale.ts index da82fbbc6..c9e9fd70a 100644 --- a/packages/vtable/src/components/axis/linear-scale.ts +++ b/packages/vtable/src/components/axis/linear-scale.ts @@ -1,4 +1,4 @@ -import { LinearScale } from '@visactor/vscale'; +import { LinearScale, LogScale, SymlogScale } from '@visactor/vscale'; import { isNil, isValid, maxInArray, minInArray } from '@visactor/vutils'; const e10 = Math.sqrt(50); @@ -8,8 +8,8 @@ const e2 = Math.sqrt(2); type IRange = { max?: number; min?: number }; export class LinearAxisScale { protected _extend: { [key: string]: number } = {}; - _scale: LinearScale; - _scales: LinearScale[]; + _scale: LinearScale | LogScale | SymlogScale; + _scales: (LinearScale | LogScale | SymlogScale)[]; nice: boolean; zero: boolean; domain: Required; @@ -17,13 +17,28 @@ export class LinearAxisScale { forceTickCount?: number; tickCount?: number; niceType?: 'tickCountFirst' | 'accurateFirst'; + type?: 'linear' | 'time' | 'log' | 'symlog'; - constructor() { - this._scale = new LinearScale(); + constructor(type?: 'linear' | 'time' | 'log' | 'symlog') { + this.type = type ?? 'linear'; + if (type === 'log') { + this._scale = new LogScale(); + } else if (type === 'symlog') { + this._scale = new SymlogScale(); + } else { + this._scale = new LinearScale(); + } this._scales = [this._scale]; } - setExtraAttrFromSpec(nice: boolean, zero: boolean, range: Required, expand?: IRange) { + setExtraAttrFromSpec( + nice: boolean, + zero: boolean, + range: Required, + expand?: IRange, + base?: number, + constant?: number + ) { // this.nice = nice; this.nice = false; // nice deal in getAxisDomainRangeAndLabels() this.zero = zero; @@ -34,12 +49,41 @@ export class LinearAxisScale { } this.domain = range; this.expand = expand; + + if (this.type === 'log') { + (this._scale as LogScale).base(base ?? 10); + } else if (this.type === 'symlog') { + (this._scale as SymlogScale).constant(constant ?? 10); + } } transformScaleDomain() { - this.setScaleNice(); + if (this.type === 'symlog' || this.type === 'log') { + // do nothing + } else { + this.setScaleNice(); + } } + setScaleNice() { + if (this.type === 'log') { + this.setLogScaleNice(); + } else { + this.setLinearScaleNice(); + } + } + + setLogScaleNice() { + if (isNil(this.domain?.min) && isNil(this.domain?.max)) { + this.nice && this._scale.nice(); + } else if (isValid(this.domain?.min) && isNil(this.domain?.max)) { + this.nice && this._scale.niceMax(); + } else if (isNil(this.domain?.min) && isValid(this.domain?.max)) { + this.nice && this._scale.niceMin(); + } + } + + setLinearScaleNice() { let tickCount = this.forceTickCount ?? this.tickCount ?? 10; // 如果配置了精度优先，那么最低是10 // 否则就直接使用tickCount即可 diff --git a/packages/vtable/src/layout/chart-helper/get-axis-config.ts b/packages/vtable/src/layout/chart-helper/get-axis-config.ts index ced949d41..81351dab4 100644 --- a/packages/vtable/src/layout/chart-helper/get-axis-config.ts +++ b/packages/vtable/src/layout/chart-helper/get-axis-config.ts @@ -75,9 +75,15 @@ export function getAxisConfigInPivotChart(col: number, row: number, layout: Pivo if (isNumber(axisOption?.min)) { range.min = axisOption.min; + if (range.min > 0) { + axisOption.zero = false; + } } if (isNumber(axisOption?.max)) { range.max = axisOption.max; + if (range.max < 0) { + axisOption.zero = false; + } } // 顶部副指标轴 return merge( @@ -87,7 +93,7 @@ export function getAxisConfigInPivotChart(col: number, row: number, layout: Pivo axisOption, { orient: 'top', - type: 'linear', + type: axisOption.type || 'linear', label: { flush: true }, @@ -157,10 +163,16 @@ export function getAxisConfigInPivotChart(col: number, row: number, layout: Pivo range.max = !isNaN(niceRange[1]) ? niceRange[1] : 1; if (isNumber(axisOption?.min)) { - (range as any).min = axisOption.min; + range.min = axisOption.min; + if (range.min > 0) { + axisOption.zero = false; + } } if (isNumber(axisOption?.max)) { - (range as any).max = axisOption.max; + range.max = axisOption.max; + if (range.max < 0) { + axisOption.zero = false; + } } // 底侧指标轴 return merge( @@ -175,7 +187,7 @@ export function getAxisConfigInPivotChart(col: number, row: number, layout: Pivo axisOption, { orient: 'bottom', - type: 'linear', + type: axisOption.type || 'linear', label: { flush: true }, @@ -278,9 +290,15 @@ export function getAxisConfigInPivotChart(col: number, row: number, layout: Pivo if (isNumber(axisOption?.min)) { range.min = axisOption.min; + if (range.min > 0) { + axisOption.zero = false; + } } if (isNumber(axisOption?.max)) { range.max = axisOption.max; + if (range.max < 0) { + axisOption.zero = false; + } } // 左侧指标轴 return merge( @@ -295,7 +313,7 @@ export function getAxisConfigInPivotChart(col: number, row: number, layout: Pivo axisOption, { orient: 'left', - type: 'linear', + type: axisOption.type || 'linear', label: { flush: true }, @@ -359,10 +377,16 @@ export function getAxisConfigInPivotChart(col: number, row: number, layout: Pivo range.max = !isNaN(niceRange[1]) ? niceRange[1] : 1; if (isNumber(axisOption?.min)) { - (range as any).min = axisOption.min; + range.min = axisOption.min; + if (range.min > 0) { + axisOption.zero = false; + } } if (isNumber(axisOption?.max)) { - (range as any).max = axisOption.max; + range.max = axisOption.max; + if (range.max < 0) { + axisOption.zero = false; + } } // 右侧副指标轴 return merge( @@ -375,7 +399,7 @@ export function getAxisConfigInPivotChart(col: number, row: number, layout: Pivo axisOption, { orient: 'right', - type: 'linear', + type: axisOption.type || 'linear', label: { flush: true }, diff --git a/packages/vtable/src/layout/chart-helper/get-axis-domain.ts b/packages/vtable/src/layout/chart-helper/get-axis-domain.ts index 07a4d4997..af679b503 100644 --- a/packages/vtable/src/layout/chart-helper/get-axis-domain.ts +++ b/packages/vtable/src/layout/chart-helper/get-axis-domain.ts @@ -1,4 +1,4 @@ -import { LinearScale } from '@visactor/vscale'; +import { LinearScale, LogScale, SymlogScale } from '@visactor/vscale'; import { isFunction, isNil, isNumber, isValid } from '@visactor/vutils'; const DEFAULT_CONTINUOUS_TICK_COUNT = 5; @@ -20,8 +20,23 @@ export function getAxisDomainRangeAndLabels( min = Math.min(min, 0); max = Math.max(max, 0); } + if (isNumber(axisOption?.min)) { + min = axisOption.min; + } + if (isNumber(axisOption?.max)) { + max = axisOption.max; + } - const scale = new LinearScale(); + let scale; + if (axisOption.type === 'log') { + scale = new LogScale(); + scale.base(axisOption.base ?? 10); + } else if (axisOption.type === 'symlog') { + scale = new SymlogScale(); + scale.constant(axisOption.constant ?? 10); + } else { + scale = new LinearScale(); + } scale.domain([min, max], !!axisOption?.nice); if (axisOption?.nice && !isZeroAlign) { diff --git a/packages/vtable/src/layout/chart-helper/get-chart-spec.ts b/packages/vtable/src/layout/chart-helper/get-chart-spec.ts index ccf72ed26..d2a981575 100644 --- a/packages/vtable/src/layout/chart-helper/get-chart-spec.ts +++ b/packages/vtable/src/layout/chart-helper/get-chart-spec.ts @@ -99,7 +99,7 @@ export function getChartAxes(col: number, row: number, layout: PivotHeaderLayout }, axisOption, { - type: 'linear', + type: axisOption.type || 'linear', orient: index === 0 ? 'bottom' : 'top', // visible: true, label: { visible: false }, @@ -206,7 +206,7 @@ export function getChartAxes(col: number, row: number, layout: PivotHeaderLayout }, axisOption, { - type: 'linear', + type: axisOption.type || 'linear', orient: index === 0 ? 'left' : 'right', // visible: true, label: { visible: false }, From e4c624431976d8abaf41bcba954602ff94d5c72b Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Tue, 24 Oct 2023 11:52:55 +0800 Subject: [PATCH 40/48] refactor: theme's defaultfontFamily change to 'Arial,sans-serif' #448 --- .../tooltip/logic/BubbleTooltipElement.ts | 5 ++++- packages/vtable/src/render/layout/text.ts | 2 +- .../vtable/src/scenegraph/component/menu.ts | 2 ++ .../src/scenegraph/utils/text-measure.ts | 8 ++++---- packages/vtable/src/themes/ARCO.ts | 18 +++++++++--------- packages/vtable/src/themes/BRIGHT.ts | 18 +++++++++--------- packages/vtable/src/themes/DARK.ts | 17 +++++++++-------- packages/vtable/src/themes/DEFAULT.ts | 17 +++++++++-------- packages/vtable/src/themes/theme.ts | 8 +++++--- packages/vtable/src/tools/global.ts | 4 ++-- packages/vtable/src/ts-types/theme.ts | 9 ++++++--- packages/vtable/src/ts-types/tooltip.ts | 3 ++- 12 files changed, 62 insertions(+), 49 deletions(-) diff --git a/packages/vtable/src/components/tooltip/logic/BubbleTooltipElement.ts b/packages/vtable/src/components/tooltip/logic/BubbleTooltipElement.ts index 32b41cff6..b7ea356b4 100644 --- a/packages/vtable/src/components/tooltip/logic/BubbleTooltipElement.ts +++ b/packages/vtable/src/components/tooltip/logic/BubbleTooltipElement.ts @@ -50,7 +50,10 @@ export class BubbleTooltipElement { (messageElement.style.backgroundColor = tooltipInstanceInfo?.style?.bgColor); tooltipInstanceInfo?.style?.bgColor && (triangle.style.backgroundColor = tooltipInstanceInfo?.style?.bgColor); triangle.style.display = tooltipInstanceInfo?.style?.arrowMark === true ? 'block' : 'none'; - tooltipInstanceInfo?.style?.font && (messageElement.style.font = tooltipInstanceInfo?.style?.font); + tooltipInstanceInfo?.style?.fontSize && + (messageElement.style.fontSize = (tooltipInstanceInfo?.style?.fontSize ?? 12) + 'px'); + tooltipInstanceInfo?.style?.fontFamily && + (messageElement.style.fontFamily = tooltipInstanceInfo?.style?.fontFamily); tooltipInstanceInfo?.style?.color && (messageElement.style.color = tooltipInstanceInfo?.style?.color); tooltipInstanceInfo?.style?.padding && (messageElement.style.padding = `${tooltipInstanceInfo?.style?.padding.join('px ')}px`); diff --git a/packages/vtable/src/render/layout/text.ts b/packages/vtable/src/render/layout/text.ts index 2157b2c0c..ca1173c5d 100644 --- a/packages/vtable/src/render/layout/text.ts +++ b/packages/vtable/src/render/layout/text.ts @@ -51,7 +51,7 @@ export class Text extends BaseElement { super(options); this.text = options.text; this.fontSize = options.fontSize || 12; - this.fontFamily = options.fontFamily || 'sans-serif'; + this.fontFamily = options.fontFamily || 'Arial,sans-serif'; this.fill = options.color || options.fill || 'black'; this.textBaseline = options.textBaseline || 'top'; this.textAlign = options.textAlign || 'left'; diff --git a/packages/vtable/src/scenegraph/component/menu.ts b/packages/vtable/src/scenegraph/component/menu.ts index 493c3f1aa..52d0087a8 100644 --- a/packages/vtable/src/scenegraph/component/menu.ts +++ b/packages/vtable/src/scenegraph/component/menu.ts @@ -22,6 +22,7 @@ type MenuInfo = MenuListItem[]; const menuStyle = { fontSize: 12, + fontFamily: 'Arial,sans-serif', color: '#000', highlightColor: '#2E68CF', hoverBgColor: '#EEE', @@ -201,6 +202,7 @@ export class MenuHandler { text, textBaseline: 'top', fontSize: menuStyle.fontSize, + fontFamily: menuStyle.fontFamily, pickable: false, maxLineWidth: menuStyle.maxLineWidth, ellipsis: '…' diff --git a/packages/vtable/src/scenegraph/utils/text-measure.ts b/packages/vtable/src/scenegraph/utils/text-measure.ts index 88c68393c..2cdd0831a 100644 --- a/packages/vtable/src/scenegraph/utils/text-measure.ts +++ b/packages/vtable/src/scenegraph/utils/text-measure.ts @@ -78,7 +78,7 @@ export class FastTextMeasureContribution extends DefaultTextMeasureContribution // const textMeasure = this.context.measureText(text); // return textMeasure.width; - const { fontSize, fontFamily = 'sans-serif', fontWeight = 'normal', fontStyle = 'normal' } = options; + const { fontSize, fontFamily = 'Arial,sans-serif', fontWeight = 'normal', fontStyle = 'normal' } = options; const fastTextMeasure = getFastTextMeasure(fontSize, fontWeight, fontFamily, fontStyle); const textMeasure = fastTextMeasure.measure(text); return textMeasure.width; @@ -96,7 +96,7 @@ export class FastTextMeasureContribution extends DefaultTextMeasureContribution // this.context.setTextStyleWithoutAlignBaseline(options); // return this.context.measureText(text); - const { fontSize, fontFamily = 'sans-serif', fontWeight = 'normal', fontStyle = 'normal' } = options; + const { fontSize, fontFamily = 'Arial,sans-serif', fontWeight = 'normal', fontStyle = 'normal' } = options; const fastTextMeasure = getFastTextMeasure(fontSize, fontWeight, fontFamily, fontStyle); const textMeasure = fastTextMeasure.measure(text); return textMeasure; @@ -110,7 +110,7 @@ export class TextMeasureTool { * @param options */ measureText(text: string, options: ITextGraphicAttribute): ITextSize { - const { fontSize, fontFamily = 'sans-serif', fontWeight = 'normal', fontStyle = 'normal' } = options; + const { fontSize, fontFamily = 'Arial,sans-serif', fontWeight = 'normal', fontStyle = 'normal' } = options; const fastTextMeasure = getFastTextMeasure(fontSize, fontWeight, fontFamily, fontStyle); const textMeasure = fastTextMeasure.measure(text); return textMeasure; @@ -122,7 +122,7 @@ export class TextMeasureTool { * @param options */ measureTextWidth(text: string, options: ITextGraphicAttribute): number { - const { fontSize, fontFamily = 'sans-serif', fontWeight = 'normal', fontStyle = 'normal' } = options; + const { fontSize, fontFamily = 'Arial,sans-serif', fontWeight = 'normal', fontStyle = 'normal' } = options; const fastTextMeasure = getFastTextMeasure(fontSize, fontWeight, fontFamily, fontStyle); const textMeasure = fastTextMeasure.measure(text); return textMeasure.width; diff --git a/packages/vtable/src/themes/ARCO.ts b/packages/vtable/src/themes/ARCO.ts index 3f6fc8e6d..4bb075113 100644 --- a/packages/vtable/src/themes/ARCO.ts +++ b/packages/vtable/src/themes/ARCO.ts @@ -131,15 +131,15 @@ export default { endColor: 'rgba(00, 24, 47, 0)' } }, - menuStyle: { - color: '#000', - highlightColor: '#2E68CF', - // font: '12px sans-serif', - fontSize: 12, - fontFamily: 'sans-serif', - highlightFont: '12px sans-serif', - hoverBgColor: '#EEE' - }, + // menuStyle: { + // color: '#000', + // highlightColor: '#2E68CF', + // fontSize: 12, + // fontFamily: 'Arial,sans-serif', + // highlightFontSize: 12, + // highlightFontFamily: 'Arial,sans-serif', + // hoverBgColor: '#EEE' + // }, selectionStyle: { cellBgColor: 'rgba(0, 0, 255,0.1)', cellBorderLineWidth: 2, diff --git a/packages/vtable/src/themes/BRIGHT.ts b/packages/vtable/src/themes/BRIGHT.ts index 54cdd3e8c..091df1c29 100644 --- a/packages/vtable/src/themes/BRIGHT.ts +++ b/packages/vtable/src/themes/BRIGHT.ts @@ -78,15 +78,15 @@ export default { endColor: '#CBDCFE' } }, - menuStyle: { - color: '#000', - highlightColor: '#2E68CF', - // font: '12px sans-serif', - fontSize: 12, - fontFamily: 'sans-serif', - highlightFont: '12px sans-serif', - hoverBgColor: '#EEE' - }, + // menuStyle: { + // color: '#000', + // highlightColor: '#2E68CF', + // fontSize: 12, + // fontFamily: 'Arial,sans-serif', + // highlightFontSize: 12, + // highlightFontFamily: 'Arial,sans-serif', + // hoverBgColor: '#EEE' + // }, selectionStyle: { cellBgColor: 'rgba(0, 0, 255,0.1)' } diff --git a/packages/vtable/src/themes/DARK.ts b/packages/vtable/src/themes/DARK.ts index b374da084..a310e3d3b 100644 --- a/packages/vtable/src/themes/DARK.ts +++ b/packages/vtable/src/themes/DARK.ts @@ -102,14 +102,15 @@ export default { endColor: 'rgba(00, 24, 47, 0)' } }, - menuStyle: { - color: '#000', - highlightColor: '#2E68CF', - fontSize: 12, - fontFamily: 'sans-serif', - highlightFont: '12px sans-serif', - hoverBgColor: '#EEE' - }, + // menuStyle: { + // color: '#000', + // highlightColor: '#2E68CF', + // fontSize: 12, + // fontFamily: 'Arial,sans-serif', + // highlightFontSize: 12, + // highlightFontFamily: 'Arial,sans-serif', + // hoverBgColor: '#EEE' + // }, selectionStyle: { cellBgColor: 'rgba(255, 255, 255, 0.1)', // inlineColumnBgColor: "#82b2f5", diff --git a/packages/vtable/src/themes/DEFAULT.ts b/packages/vtable/src/themes/DEFAULT.ts index 45f87e1c4..66b8b122f 100644 --- a/packages/vtable/src/themes/DEFAULT.ts +++ b/packages/vtable/src/themes/DEFAULT.ts @@ -106,14 +106,15 @@ export default { endColor: 'rgba(225, 228, 232, 0.6)' } }, - menuStyle: { - color: '#000', - highlightColor: '#2E68CF', - fontSize: 12, - fontFamily: 'sans-serif', - highlightFont: '12px sans-serif', - hoverBgColor: '#EEE' - }, + // menuStyle: { + // color: '#000', + // highlightColor: '#2E68CF', + // fontSize: 12, + // fontFamily: 'Arial,sans-serif', + // highlightFontSize: 12, + // highlightFontFamily: 'Arial,sans-serif', + // hoverBgColor: '#EEE' + // }, selectionStyle: { cellBgColor: 'rgba(0, 0, 255,0.1)', cellBorderLineWidth: 2, diff --git a/packages/vtable/src/themes/theme.ts b/packages/vtable/src/themes/theme.ts index 7172c8b8e..f85b7521f 100644 --- a/packages/vtable/src/themes/theme.ts +++ b/packages/vtable/src/themes/theme.ts @@ -42,7 +42,6 @@ import { DEFAULTBORDERCOLOR, DEFAULTBORDERLINEDASH, DEFAULTBORDERLINEWIDTH, - DEFAULTFONT, DEFAULTFONTCOLOR, DEFAULTFONTFAMILY, DEFAULTFONTSIZE @@ -452,8 +451,11 @@ export class TableTheme implements ITableThemeDefine { const { obj, superTheme } = this.internalTheme; const tooltip: TooltipStyle = ingoreNoneValueMerge({}, superTheme.tooltipStyle, obj.tooltipStyle); this._tooltip = { - get font(): string | undefined { - return tooltip.font ?? DEFAULTFONT; + get fontFamily(): string | undefined { + return tooltip.fontFamily ?? DEFAULTFONTFAMILY; + }, + get fontSize(): number | undefined { + return tooltip.fontSize ?? DEFAULTFONTSIZE; }, get bgColor(): string | undefined { return tooltip.bgColor ?? '#000'; diff --git a/packages/vtable/src/tools/global.ts b/packages/vtable/src/tools/global.ts index 88820313c..2e69d1814 100644 --- a/packages/vtable/src/tools/global.ts +++ b/packages/vtable/src/tools/global.ts @@ -1,8 +1,8 @@ import type { SparklineSpec } from '../ts-types'; -export const DEFAULTFONT = '16px sans-serif'; //默认字体 +// export const DEFAULTFONT = '16px sans-serif'; //默认字体 export const DEFAULTFONTSIZE = 16; //默认字号 -export const DEFAULTFONTFAMILY = 'sans-serif'; //默认字体 +export const DEFAULTFONTFAMILY = 'Arial,sans-serif'; //默认字体 export const DEFAULTBGCOLOR = '#FFF'; //默认背景色 export const DEFAULTBORDERCOLOR = '#000'; //默认边框颜色 export const DEFAULTBORDERLINEWIDTH = 1; //默认边框线宽 diff --git a/packages/vtable/src/ts-types/theme.ts b/packages/vtable/src/ts-types/theme.ts index 7dea3d329..77aa4e580 100644 --- a/packages/vtable/src/ts-types/theme.ts +++ b/packages/vtable/src/ts-types/theme.ts @@ -36,8 +36,10 @@ export type TableFrameStyle = FrameStyle & { export type menuStyle = { color?: string; highlightColor?: string; - font?: string; - highlightFont?: string; + fontSize?: number; + fontFamily?: string; + highlightFontSize?: number; + highlightFontFamily?: string; hoverBgColor?: string; }; export type ScrollStyle = { @@ -56,7 +58,8 @@ export type ScrollStyle = { * 气泡框，按钮的的解释信息 */ export type TooltipStyle = { - font?: string; + fontFamily?: string; + fontSize?: number; color?: string; padding?: number[]; bgColor?: string; diff --git a/packages/vtable/src/ts-types/tooltip.ts b/packages/vtable/src/ts-types/tooltip.ts index bf39a9302..ee3633a37 100644 --- a/packages/vtable/src/ts-types/tooltip.ts +++ b/packages/vtable/src/ts-types/tooltip.ts @@ -21,7 +21,8 @@ export type TooltipOptions = { /** 设置tooltip的样式 */ style?: { bgColor?: string; - font?: string; + fontSize?: number; + fontFamily?: string; color?: string; padding?: number[]; arrowMark?: boolean; From a1c030476e8c71e06a9409f2cd5626aa6dd4cb1d Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Tue, 24 Oct 2023 11:57:22 +0800 Subject: [PATCH 41/48] refactor: theme's defaultfontFamily change to 'Arial,sans-serif' #448 --- .../vtable/__tests__/options/listTable-autoRowHeight.test.ts | 2 +- packages/vtable/__tests__/pivotTable.test.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/vtable/__tests__/options/listTable-autoRowHeight.test.ts b/packages/vtable/__tests__/options/listTable-autoRowHeight.test.ts index 58152b27a..a7d181d34 100644 --- a/packages/vtable/__tests__/options/listTable-autoRowHeight.test.ts +++ b/packages/vtable/__tests__/options/listTable-autoRowHeight.test.ts @@ -104,7 +104,7 @@ describe('listTable-autoRowHeight init test', () => { bgColor: '#FAF9FB', color: '#000', fontSize: 14, - fontFamily: 'sans-serif', + fontFamily: 'Arial,sans-serif', lineHeight: 14, autoWrapText: true, lineClamp: 'auto', diff --git a/packages/vtable/__tests__/pivotTable.test.ts b/packages/vtable/__tests__/pivotTable.test.ts index 5d76bb053..3977f7809 100644 --- a/packages/vtable/__tests__/pivotTable.test.ts +++ b/packages/vtable/__tests__/pivotTable.test.ts @@ -486,7 +486,7 @@ describe('pivotTable init test', () => { borderColor: '#E1E4E8', borderLineWidth: 1, borderLineDash: [], - fontFamily: 'sans-serif', + fontFamily: 'Arial,sans-serif', fontSize: 16, fontStyle: undefined, fontVariant: undefined, @@ -511,7 +511,7 @@ describe('pivotTable init test', () => { borderColor: 'red', borderLineWidth: 1, borderLineDash: [], - fontFamily: 'sans-serif', + fontFamily: 'Arial,sans-serif', fontSize: 14, fontStyle: undefined, fontVariant: undefined, From 0c35c964e9bcb796bde52ce920b2ec1d9ff65f85 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Tue, 24 Oct 2023 14:11:41 +0800 Subject: [PATCH 42/48] feat: add getLegendSelected api --- packages/vtable/src/PivotChart.ts | 5 ++++- .../vtable/src/layout/chart-helper/get-axis-config.ts | 8 ++++---- .../vtable/src/layout/chart-helper/get-axis-domain.ts | 8 ++++---- packages/vtable/src/layout/chart-helper/get-chart-spec.ts | 4 ++-- 4 files changed, 14 insertions(+), 11 deletions(-) diff --git a/packages/vtable/src/PivotChart.ts b/packages/vtable/src/PivotChart.ts index 1c8bf4538..9bed9b975 100644 --- a/packages/vtable/src/PivotChart.ts +++ b/packages/vtable/src/PivotChart.ts @@ -945,7 +945,10 @@ export class PivotChart extends BaseTable implements PivotChartAPI { updateChartData(this.scenegraph); this.render(); } - /** 设置图例的选择状态。设置完后同步图表的状态需要配合updateFilterRules接口使用 */ + /** 获取图例的选择状态 */ + getLegendSelected() { + return (this.internalProps.legends.legendComponent as any)._getSelectedLegends().map((d: any) => d.label); + } setLegendSelected(selectedData: (string | number)[]) { (this.internalProps.legends.legendComponent as DiscreteLegend).setSelected(selectedData); // this.updateFilterRules([{ filterKey: '20001', filteredValues: selectedData }]); diff --git a/packages/vtable/src/layout/chart-helper/get-axis-config.ts b/packages/vtable/src/layout/chart-helper/get-axis-config.ts index 81351dab4..8551a097c 100644 --- a/packages/vtable/src/layout/chart-helper/get-axis-config.ts +++ b/packages/vtable/src/layout/chart-helper/get-axis-config.ts @@ -93,7 +93,7 @@ export function getAxisConfigInPivotChart(col: number, row: number, layout: Pivo axisOption, { orient: 'top', - type: axisOption.type || 'linear', + type: axisOption?.type || 'linear', label: { flush: true }, @@ -187,7 +187,7 @@ export function getAxisConfigInPivotChart(col: number, row: number, layout: Pivo axisOption, { orient: 'bottom', - type: axisOption.type || 'linear', + type: axisOption?.type || 'linear', label: { flush: true }, @@ -313,7 +313,7 @@ export function getAxisConfigInPivotChart(col: number, row: number, layout: Pivo axisOption, { orient: 'left', - type: axisOption.type || 'linear', + type: axisOption?.type || 'linear', label: { flush: true }, @@ -399,7 +399,7 @@ export function getAxisConfigInPivotChart(col: number, row: number, layout: Pivo axisOption, { orient: 'right', - type: axisOption.type || 'linear', + type: axisOption?.type || 'linear', label: { flush: true }, diff --git a/packages/vtable/src/layout/chart-helper/get-axis-domain.ts b/packages/vtable/src/layout/chart-helper/get-axis-domain.ts index af679b503..efb11d120 100644 --- a/packages/vtable/src/layout/chart-helper/get-axis-domain.ts +++ b/packages/vtable/src/layout/chart-helper/get-axis-domain.ts @@ -28,12 +28,12 @@ export function getAxisDomainRangeAndLabels( } let scale; - if (axisOption.type === 'log') { + if (axisOption?.type === 'log') { scale = new LogScale(); - scale.base(axisOption.base ?? 10); - } else if (axisOption.type === 'symlog') { + scale.base(axisOption?.base ?? 10); + } else if (axisOption?.type === 'symlog') { scale = new SymlogScale(); - scale.constant(axisOption.constant ?? 10); + scale.constant(axisOption?.constant ?? 10); } else { scale = new LinearScale(); } diff --git a/packages/vtable/src/layout/chart-helper/get-chart-spec.ts b/packages/vtable/src/layout/chart-helper/get-chart-spec.ts index d2a981575..ba7f9299d 100644 --- a/packages/vtable/src/layout/chart-helper/get-chart-spec.ts +++ b/packages/vtable/src/layout/chart-helper/get-chart-spec.ts @@ -99,7 +99,7 @@ export function getChartAxes(col: number, row: number, layout: PivotHeaderLayout }, axisOption, { - type: axisOption.type || 'linear', + type: axisOption?.type || 'linear', orient: index === 0 ? 'bottom' : 'top', // visible: true, label: { visible: false }, @@ -206,7 +206,7 @@ export function getChartAxes(col: number, row: number, layout: PivotHeaderLayout }, axisOption, { - type: axisOption.type || 'linear', + type: axisOption?.type || 'linear', orient: index === 0 ? 'left' : 'right', // visible: true, label: { visible: false }, From 20f39a3656b022cffeadf8519a75def590f02f03 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Tue, 24 Oct 2023 14:12:54 +0800 Subject: [PATCH 43/48] feat: add exportCanvas() --- packages/vtable/src/core/BaseTable.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/vtable/src/core/BaseTable.ts b/packages/vtable/src/core/BaseTable.ts index 13e935d8e..6973d52e7 100644 --- a/packages/vtable/src/core/BaseTable.ts +++ b/packages/vtable/src/core/BaseTable.ts @@ -3399,4 +3399,9 @@ export abstract class BaseTable extends EventTarget implements BaseTableAPI { } return base64Image; } + + exportCanvas() { + const c = this.scenegraph.stage.toCanvas(); + return c; + } } From 4b3624d495fac732070b00e2a7f2b3a48f732001 Mon Sep 17 00:00:00 2001 From: Rui-Sun Date: Tue, 24 Oct 2023 20:10:12 +0800 Subject: [PATCH 44/48] feat: move chart viewbox in deactivate() --- packages/vtable/src/scenegraph/graphic/chart.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/vtable/src/scenegraph/graphic/chart.ts b/packages/vtable/src/scenegraph/graphic/chart.ts index 00a8755bc..06dea6e13 100644 --- a/packages/vtable/src/scenegraph/graphic/chart.ts +++ b/packages/vtable/src/scenegraph/graphic/chart.ts @@ -149,6 +149,18 @@ export class Chart extends Group { */ deactivate() { this.active = false; + // move active chart view box out of broswer view + // to avoid async render when chart is releasd + this.activeChartInstance.updateViewBox( + { + x1: -2000, + x2: -1000, + y1: -2000, + y2: -1000 + }, + false, + false + ); this.activeChartInstance.release(); this.activeChartInstance = null; } From 194fcd18ecc33f9727b25c7fc520d992e6a8fe53 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Wed, 25 Oct 2023 11:20:35 +0800 Subject: [PATCH 45/48] fix: set records blank scroll error #458 --- .../vtable/src/scenegraph/group-creater/progress/proxy.ts | 4 ++-- .../group-creater/progress/update-position/dynamic-set-x.ts | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/vtable/src/scenegraph/group-creater/progress/proxy.ts b/packages/vtable/src/scenegraph/group-creater/progress/proxy.ts index 5c607e4e7..1e56c92a4 100644 --- a/packages/vtable/src/scenegraph/group-creater/progress/proxy.ts +++ b/packages/vtable/src/scenegraph/group-creater/progress/proxy.ts @@ -103,7 +103,7 @@ export class SceneProxy { // 确定首屏高度范围 const widthLimit = this.table.tableNoFrameWidth * 5; this.screenColCount = Math.ceil(this.table.tableNoFrameWidth / defaultColWidth); - this.firstScreenColLimit = this.bodyLeftCol + Math.ceil(widthLimit / defaultColWidth); + this.firstScreenColLimit = this.bodyLeftCol + Math.min(this.colLimit, Math.ceil(widthLimit / defaultColWidth)); // this.firstScreenRowLimit = this.bodyBottomRow; this.colUpdatePos = this.bodyRightCol; @@ -132,7 +132,7 @@ export class SceneProxy { // 确定首屏高度范围 const heightLimit = this.table.tableNoFrameHeight * 5; this.screenRowCount = Math.ceil(this.table.tableNoFrameHeight / defaultRowHeight); - this.firstScreenRowLimit = this.bodyTopRow + Math.ceil(heightLimit / defaultRowHeight); + this.firstScreenRowLimit = this.bodyTopRow + Math.min(this.rowLimit, Math.ceil(heightLimit / defaultRowHeight)); // this.firstScreenRowLimit = this.bodyBottomRow; this.rowUpdatePos = this.bodyBottomRow; diff --git a/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-x.ts b/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-x.ts index 1a086fb7e..dd6e2a418 100644 --- a/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-x.ts +++ b/packages/vtable/src/scenegraph/group-creater/progress/update-position/dynamic-set-x.ts @@ -80,7 +80,8 @@ async function moveColumn( direction ); - const colGroup = proxy.table.scenegraph.getColGroup(screenLeftCol); + const colGroup = + proxy.table.scenegraph.getColGroup(screenLeftCol) || proxy.table.scenegraph.getColGroup(screenLeftCol, true); const deltaX = screenLeftX - (colGroup.attribute.x + proxy.table.getFrozenColsWidth() + proxy.table.scenegraph.proxy.deltaX); proxy.table.scenegraph.proxy.deltaX += deltaX; From 7909d3dd8a60c84c5aee3d98d580746e270834a1 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Wed, 25 Oct 2023 11:24:47 +0800 Subject: [PATCH 46/48] fix: just to trigger bugserver --- packages/vtable/src/scenegraph/graphic/chart.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/vtable/src/scenegraph/graphic/chart.ts b/packages/vtable/src/scenegraph/graphic/chart.ts index 06dea6e13..f19731a32 100644 --- a/packages/vtable/src/scenegraph/graphic/chart.ts +++ b/packages/vtable/src/scenegraph/graphic/chart.ts @@ -153,10 +153,10 @@ export class Chart extends Group { // to avoid async render when chart is releasd this.activeChartInstance.updateViewBox( { - x1: -2000, - x2: -1000, - y1: -2000, - y2: -1000 + x1: -1000, + x2: -800, + y1: -1000, + y2: -800 }, false, false From 512a23a279b4d75a7d4baad2033b4a2d676ac6d6 Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Wed, 25 Oct 2023 12:01:33 +0800 Subject: [PATCH 47/48] fix: [Bug] set records blank scroll error #458 --- .../progress/create-group-for-first-screen.ts | 5 +++-- .../scenegraph/group-creater/progress/proxy.ts | 15 +++++++++++---- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/packages/vtable/src/scenegraph/group-creater/progress/create-group-for-first-screen.ts b/packages/vtable/src/scenegraph/group-creater/progress/create-group-for-first-screen.ts index 2b6bfc38b..b86f93e21 100644 --- a/packages/vtable/src/scenegraph/group-creater/progress/create-group-for-first-screen.ts +++ b/packages/vtable/src/scenegraph/group-creater/progress/create-group-for-first-screen.ts @@ -173,7 +173,7 @@ export async function createGroupForFirstScreen( ); // update progress information - if (!bodyGroup.firstChild) { + if (!bodyGroup.firstChild && !colHeaderGroup.firstChild) { // 无数据 proxy.currentRow = proxy.totalRow; proxy.rowEnd = proxy.currentRow; @@ -190,7 +190,8 @@ export async function createGroupForFirstScreen( proxy.rowUpdatePos = proxy.rowEnd; proxy.referenceRow = proxy.rowStart + Math.floor((proxy.rowEnd - proxy.rowStart) / 2); - proxy.currentCol = (bodyGroup.lastChild as Group)?.col ?? proxy.totalCol; + proxy.currentCol = + (bodyGroup.lastChild as Group)?.col ?? (colHeaderGroup.lastChild as Group)?.col ?? proxy.totalCol; proxy.colEnd = proxy.currentCol; proxy.colUpdatePos = proxy.colEnd; proxy.referenceCol = proxy.colStart + Math.floor((proxy.colEnd - proxy.colStart) / 2); diff --git a/packages/vtable/src/scenegraph/group-creater/progress/proxy.ts b/packages/vtable/src/scenegraph/group-creater/progress/proxy.ts index 1e56c92a4..00cc4ff62 100644 --- a/packages/vtable/src/scenegraph/group-creater/progress/proxy.ts +++ b/packages/vtable/src/scenegraph/group-creater/progress/proxy.ts @@ -363,11 +363,18 @@ export class SceneProxy { ); } // create colGroup - const lastColumnGroup = ( - this.table.scenegraph.bodyGroup.lastChild instanceof Group + let lastColumnGroup = + this.table.scenegraph.bodyGroup.lastChild && + ((this.table.scenegraph.bodyGroup.lastChild instanceof Group ? this.table.scenegraph.bodyGroup.lastChild - : this.table.scenegraph.bodyGroup.lastChild._prev - ) as Group; + : this.table.scenegraph.bodyGroup.lastChild._prev) as Group); + if (!lastColumnGroup) { + lastColumnGroup = + this.table.scenegraph.colHeaderGroup.lastChild && + ((this.table.scenegraph.colHeaderGroup.lastChild instanceof Group + ? this.table.scenegraph.colHeaderGroup.lastChild + : this.table.scenegraph.colHeaderGroup.lastChild._prev) as Group); + } const xOrigin = lastColumnGroup.attribute.x + lastColumnGroup.attribute.width; const yOrigin = lastColumnGroup.attribute.y; // create bodyGroup From 01385265e140a8685b4bdd2d7de790bf9c7db3be Mon Sep 17 00:00:00 2001 From: fangsmile <892739385@qq.com> Date: Wed, 25 Oct 2023 12:01:50 +0800 Subject: [PATCH 48/48] docs: update changlog of rush --- ...t-records-blank-scroll-error_2023-10-25-04-01.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/@visactor/vtable/458-bug-set-records-blank-scroll-error_2023-10-25-04-01.json diff --git a/common/changes/@visactor/vtable/458-bug-set-records-blank-scroll-error_2023-10-25-04-01.json b/common/changes/@visactor/vtable/458-bug-set-records-blank-scroll-error_2023-10-25-04-01.json new file mode 100644 index 000000000..c94fa95d0 --- /dev/null +++ b/common/changes/@visactor/vtable/458-bug-set-records-blank-scroll-error_2023-10-25-04-01.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "fix: [Bug] set records blank scroll error #458\n\n", + "type": "patch", + "packageName": "@visactor/vtable" + } + ], + "packageName": "@visactor/vtable", + "email": "892739385@qq.com" +} \ No newline at end of file