chore: add pinia + radar demo

This commit is contained in:
Justineo
2023-06-13 20:24:53 +08:00
parent 9c34d682c4
commit 47f7885f19
5 changed files with 284 additions and 64 deletions

View File

@ -46,6 +46,7 @@
"eslint": "^7.32.0",
"eslint-plugin-prettier": "^3.4.1",
"eslint-plugin-vue": "^8.7.1",
"pinia": "^2.1.3",
"postcss": "^8.4.14",
"postcss-loader": "^5.3.0",
"postcss-nested": "^5.0.6",
@ -61,7 +62,7 @@
"rollup-plugin-ts": "^2.0.7",
"tslib": "^2.4.0",
"typescript": "4.6.4",
"vue": "^3.2.37",
"vue": "^3.3.4",
"vue2": "npm:vue@^2.7.14",
"webpack": "^5.73.0"
},

211
pnpm-lock.yaml generated
View File

@ -1,12 +1,16 @@
lockfileVersion: '6.0'
settings:
autoInstallPeers: true
excludeLinksFromLockfile: false
dependencies:
resize-detector:
specifier: ^0.3.0
version: 0.3.0
vue-demi:
specifier: ^0.13.2
version: 0.13.2(@vue/composition-api@1.7.0)(vue@3.2.37)
version: 0.13.2(@vue/composition-api@1.7.0)(vue@3.3.4)
devDependencies:
'@babel/core':
@ -26,13 +30,13 @@ devDependencies:
version: 4.33.0(eslint@7.32.0)(typescript@4.6.4)
'@vue/cli-plugin-babel':
specifier: ^5.0.7
version: 5.0.7(@vue/cli-service@5.0.7)(core-js@3.23.3)(vue@3.2.37)
version: 5.0.7(@vue/cli-service@5.0.7)(core-js@3.23.3)(vue@3.3.4)
'@vue/cli-plugin-eslint':
specifier: ^5.0.7
version: 5.0.7(@vue/cli-service@5.0.7)(eslint@7.32.0)
'@vue/cli-plugin-typescript':
specifier: ^5.0.7
version: 5.0.7(@vue/cli-service@5.0.7)(eslint@7.32.0)(typescript@4.6.4)(vue@3.2.37)
version: 5.0.7(@vue/cli-service@5.0.7)(eslint@7.32.0)(typescript@4.6.4)(vue@3.3.4)
'@vue/cli-service':
specifier: ^5.0.7
version: 5.0.7(@babel/core@7.18.6)(@vue/compiler-sfc@3.2.37)(raw-loader@4.0.2)
@ -41,7 +45,7 @@ devDependencies:
version: 3.2.37
'@vue/composition-api':
specifier: ^1.7.0
version: 1.7.0(vue@3.2.37)
version: 1.7.0(vue@3.3.4)
'@vue/eslint-config-prettier':
specifier: ^6.0.0
version: 6.0.0(eslint-plugin-prettier@3.4.1)(eslint@7.32.0)(prettier@2.7.1)
@ -69,6 +73,9 @@ devDependencies:
eslint-plugin-vue:
specifier: ^8.7.1
version: 8.7.1(eslint@7.32.0)
pinia:
specifier: ^2.1.3
version: 2.1.3(@vue/composition-api@1.7.0)(typescript@4.6.4)(vue@3.3.4)
postcss:
specifier: ^8.4.14
version: 8.4.14
@ -112,8 +119,8 @@ devDependencies:
specifier: 4.6.4
version: 4.6.4
vue:
specifier: ^3.2.37
version: 3.2.37
specifier: ^3.3.4
version: 3.3.4
vue2:
specifier: npm:vue@^2.7.14
version: /vue@2.7.14
@ -386,16 +393,15 @@ packages:
/@babel/helper-string-parser@7.19.4:
resolution: {integrity: sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==}
engines: {node: '>=6.9.0'}
dev: true
/@babel/helper-validator-identifier@7.18.6:
resolution: {integrity: sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==}
engines: {node: '>=6.9.0'}
dev: true
/@babel/helper-validator-identifier@7.19.1:
resolution: {integrity: sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==}
engines: {node: '>=6.9.0'}
dev: true
/@babel/helper-validator-option@7.18.6:
resolution: {integrity: sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==}
@ -440,6 +446,7 @@ packages:
hasBin: true
dependencies:
'@babel/types': 7.18.7
dev: true
/@babel/parser@7.20.7:
resolution: {integrity: sha512-T3Z9oHybU+0vZlY9CiDSJQTD5ZapcW18ZctFMi0MOAl/4BjFF4ul7NVSARLdbGO5vDqy9eQiGTV0LtKfvCYvcg==}
@ -449,6 +456,13 @@ packages:
'@babel/types': 7.20.7
dev: true
/@babel/parser@7.22.5:
resolution: {integrity: sha512-DFZMC9LJUG9PLOclRC32G63UXwzqS2koQC8dkx+PLdmt1xSePYpbT/NbsrJy8Q/muXz7o/h/d4A7Fuyixm559Q==}
engines: {node: '>=6.0.0'}
hasBin: true
dependencies:
'@babel/types': 7.20.7
/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.18.6(@babel/core@7.18.6):
resolution: {integrity: sha512-Dgxsyg54Fx1d4Nge8UnvTrED63vrwOdPmyvPzlNN/boaliRP54pm3pGzZD1SJUwrBA+Cs/xdG8kXX6Mn/RfISQ==}
engines: {node: '>=6.9.0'}
@ -1348,6 +1362,7 @@ packages:
dependencies:
'@babel/helper-validator-identifier': 7.18.6
to-fast-properties: 2.0.0
dev: true
/@babel/types@7.20.7:
resolution: {integrity: sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg==}
@ -1356,7 +1371,6 @@ packages:
'@babel/helper-string-parser': 7.19.4
'@babel/helper-validator-identifier': 7.19.1
to-fast-properties: 2.0.0
dev: true
/@eslint/eslintrc@0.4.3:
resolution: {integrity: sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==}
@ -1436,7 +1450,6 @@ packages:
/@jridgewell/sourcemap-codec@1.4.14:
resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
dev: true
/@jridgewell/trace-mapping@0.3.14:
resolution: {integrity: sha512-bJWEfQ9lPTvm3SneWwRFVLzrh6nhjwqw7TUFFBEMzwvg7t7PCDenf2lDwqo4NQXzdpgBXyFgDWnQA+2vkruksQ==}
@ -2035,7 +2048,7 @@ packages:
svg-tags: 1.0.0
dev: true
/@vue/babel-preset-app@5.0.7(@babel/core@7.18.6)(core-js@3.23.3)(vue@3.2.37):
/@vue/babel-preset-app@5.0.7(@babel/core@7.18.6)(core-js@3.23.3)(vue@3.3.4):
resolution: {integrity: sha512-oepDJNWbYxosfopP7SPDZTBQl0k7KN5xs/uGWT12K+ih6f54Qo/4gEEoIVI8p2yuCRLIIc46SIhZn3AugOgx1g==}
peerDependencies:
'@babel/core': '*'
@ -2063,7 +2076,7 @@ packages:
core-js: 3.23.3
core-js-compat: 3.23.3
semver: 7.3.7
vue: 3.2.37
vue: 3.3.4
transitivePeerDependencies:
- supports-color
dev: true
@ -2149,13 +2162,13 @@ packages:
resolution: {integrity: sha512-Fz0C0TnJI5ARYV7U9DtE9XnYb7OHGhtKv1Wh1fJ8Ugy97kFMnHnXHl+/MCISx/EKdCaKJf0zs7ylHoZGhRhhfg==}
dev: true
/@vue/cli-plugin-babel@5.0.7(@vue/cli-service@5.0.7)(core-js@3.23.3)(vue@3.2.37):
/@vue/cli-plugin-babel@5.0.7(@vue/cli-service@5.0.7)(core-js@3.23.3)(vue@3.3.4):
resolution: {integrity: sha512-qWrwhX7rZ8vQq6+niKG8OkBak0vDhIWzJsLXH5i+xzm04mcudPJwPZhQOBpN3XXkipsic1ZCkhS9d3+VjsWQYg==}
peerDependencies:
'@vue/cli-service': ^3.0.0 || ^4.0.0 || ^5.0.0-0
dependencies:
'@babel/core': 7.18.6
'@vue/babel-preset-app': 5.0.7(@babel/core@7.18.6)(core-js@3.23.3)(vue@3.2.37)
'@vue/babel-preset-app': 5.0.7(@babel/core@7.18.6)(core-js@3.23.3)(vue@3.3.4)
'@vue/cli-service': 5.0.7(@babel/core@7.18.6)(@vue/compiler-sfc@3.2.37)(raw-loader@4.0.2)
'@vue/cli-shared-utils': 5.0.7
babel-loader: 8.2.5(@babel/core@7.18.6)(webpack@5.73.0)
@ -2204,7 +2217,7 @@ packages:
- encoding
dev: true
/@vue/cli-plugin-typescript@5.0.7(@vue/cli-service@5.0.7)(eslint@7.32.0)(typescript@4.6.4)(vue@3.2.37):
/@vue/cli-plugin-typescript@5.0.7(@vue/cli-service@5.0.7)(eslint@7.32.0)(typescript@4.6.4)(vue@3.3.4):
resolution: {integrity: sha512-5BhJ1dFsF7toUQKqqmN5i0au1Y6pi192dYWKnhHOeOkSApgPwDtFYoFYUkdjBsI64ILCBfC1zKj/L2cmaoMyPQ==}
peerDependencies:
'@vue/cli-service': ^3.0.0 || ^4.0.0 || ^5.0.0-0
@ -2228,7 +2241,7 @@ packages:
thread-loader: 3.0.4(webpack@5.73.0)
ts-loader: 9.3.1(typescript@4.6.4)(webpack@5.73.0)
typescript: 4.6.4
vue: 3.2.37
vue: 3.3.4
webpack: 5.73.0
transitivePeerDependencies:
- '@swc/core'
@ -2430,12 +2443,28 @@ packages:
'@vue/shared': 3.2.37
estree-walker: 2.0.2
source-map: 0.6.1
dev: true
/@vue/compiler-core@3.3.4:
resolution: {integrity: sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==}
dependencies:
'@babel/parser': 7.22.5
'@vue/shared': 3.3.4
estree-walker: 2.0.2
source-map-js: 1.0.2
/@vue/compiler-dom@3.2.37:
resolution: {integrity: sha512-yxJLH167fucHKxaqXpYk7x8z7mMEnXOw3G2q62FTkmsvNxu4FQSu5+3UMb+L7fjKa26DEzhrmCxAgFLLIzVfqQ==}
dependencies:
'@vue/compiler-core': 3.2.37
'@vue/shared': 3.2.37
dev: true
/@vue/compiler-dom@3.3.4:
resolution: {integrity: sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==}
dependencies:
'@vue/compiler-core': 3.3.4
'@vue/shared': 3.3.4
/@vue/compiler-sfc@2.7.14:
resolution: {integrity: sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==}
@ -2458,12 +2487,34 @@ packages:
magic-string: 0.25.9
postcss: 8.4.14
source-map: 0.6.1
dev: true
/@vue/compiler-sfc@3.3.4:
resolution: {integrity: sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==}
dependencies:
'@babel/parser': 7.22.5
'@vue/compiler-core': 3.3.4
'@vue/compiler-dom': 3.3.4
'@vue/compiler-ssr': 3.3.4
'@vue/reactivity-transform': 3.3.4
'@vue/shared': 3.3.4
estree-walker: 2.0.2
magic-string: 0.30.0
postcss: 8.4.21
source-map-js: 1.0.2
/@vue/compiler-ssr@3.2.37:
resolution: {integrity: sha512-7mQJD7HdXxQjktmsWp/J67lThEIcxLemz1Vb5I6rYJHR5vI+lON3nPGOH3ubmbvYGt8xEUaAr1j7/tIFWiEOqw==}
dependencies:
'@vue/compiler-dom': 3.2.37
'@vue/shared': 3.2.37
dev: true
/@vue/compiler-ssr@3.3.4:
resolution: {integrity: sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==}
dependencies:
'@vue/compiler-dom': 3.3.4
'@vue/shared': 3.3.4
/@vue/component-compiler-utils@3.3.0:
resolution: {integrity: sha512-97sfH2mYNU+2PzGrmK2haqffDpVASuib9/w2/noxiFi31Z54hW+q3izKQXXQZSNhtiUpAI36uSuYepeBe4wpHQ==}
@ -2534,12 +2585,16 @@ packages:
- whiskers
dev: true
/@vue/composition-api@1.7.0(vue@3.2.37):
/@vue/composition-api@1.7.0(vue@3.3.4):
resolution: {integrity: sha512-hxOgLYR+wjuPX9bkP2pAPlqUs98XxBoa9DSLyp1z6+YR92wC42PZcZKs4d+VRtcv4udOv041Kss+F6ap5nj8YA==}
peerDependencies:
vue: '>= 2.5 < 2.7'
dependencies:
vue: 3.2.37
vue: 3.3.4
/@vue/devtools-api@6.5.0:
resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
dev: true
/@vue/eslint-config-prettier@6.0.0(eslint-plugin-prettier@3.4.1)(eslint@7.32.0)(prettier@2.7.1):
resolution: {integrity: sha512-wFQmv45c3ige5EA+ngijq40YpVcIkAy0Lihupnsnd1Dao5CBbPyfCzqtejFLZX1EwH/kCJdpz3t6s+5wd3+KxQ==}
@ -2583,36 +2638,50 @@ packages:
'@vue/shared': 3.2.37
estree-walker: 2.0.2
magic-string: 0.25.9
dev: true
/@vue/reactivity@3.2.37:
resolution: {integrity: sha512-/7WRafBOshOc6m3F7plwzPeCu/RCVv9uMpOwa/5PiY1Zz+WLVRWiy0MYKwmg19KBdGtFWsmZ4cD+LOdVPcs52A==}
/@vue/reactivity-transform@3.3.4:
resolution: {integrity: sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==}
dependencies:
'@vue/shared': 3.2.37
'@babel/parser': 7.22.5
'@vue/compiler-core': 3.3.4
'@vue/shared': 3.3.4
estree-walker: 2.0.2
magic-string: 0.30.0
/@vue/runtime-core@3.2.37:
resolution: {integrity: sha512-JPcd9kFyEdXLl/i0ClS7lwgcs0QpUAWj+SKX2ZC3ANKi1U4DOtiEr6cRqFXsPwY5u1L9fAjkinIdB8Rz3FoYNQ==}
/@vue/reactivity@3.3.4:
resolution: {integrity: sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==}
dependencies:
'@vue/reactivity': 3.2.37
'@vue/shared': 3.2.37
'@vue/shared': 3.3.4
/@vue/runtime-dom@3.2.37:
resolution: {integrity: sha512-HimKdh9BepShW6YozwRKAYjYQWg9mQn63RGEiSswMbW+ssIht1MILYlVGkAGGQbkhSh31PCdoUcfiu4apXJoPw==}
/@vue/runtime-core@3.3.4:
resolution: {integrity: sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==}
dependencies:
'@vue/runtime-core': 3.2.37
'@vue/shared': 3.2.37
csstype: 2.6.20
'@vue/reactivity': 3.3.4
'@vue/shared': 3.3.4
/@vue/server-renderer@3.2.37(vue@3.2.37):
resolution: {integrity: sha512-kLITEJvaYgZQ2h47hIzPh2K3jG8c1zCVbp/o/bzQOyvzaKiCquKS7AaioPI28GNxIsE/zSx+EwWYsNxDCX95MA==}
/@vue/runtime-dom@3.3.4:
resolution: {integrity: sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==}
dependencies:
'@vue/runtime-core': 3.3.4
'@vue/shared': 3.3.4
csstype: 3.1.1
/@vue/server-renderer@3.3.4(vue@3.3.4):
resolution: {integrity: sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==}
peerDependencies:
vue: 3.2.37
vue: 3.3.4
dependencies:
'@vue/compiler-ssr': 3.2.37
'@vue/shared': 3.2.37
vue: 3.2.37
'@vue/compiler-ssr': 3.3.4
'@vue/shared': 3.3.4
vue: 3.3.4
/@vue/shared@3.2.37:
resolution: {integrity: sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw==}
dev: true
/@vue/shared@3.3.4:
resolution: {integrity: sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==}
/@vue/web-component-wrapper@1.3.0:
resolution: {integrity: sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==}
@ -3904,12 +3973,8 @@ packages:
css-tree: 1.1.3
dev: true
/csstype@2.6.20:
resolution: {integrity: sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==}
/csstype@3.1.1:
resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==}
dev: true
/debug@2.6.9:
resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
@ -5475,6 +5540,7 @@ packages:
resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
dependencies:
sourcemap-codec: 1.4.8
dev: true
/magic-string@0.26.2:
resolution: {integrity: sha512-NzzlXpclt5zAbmo6h6jNc8zl2gNRGHvmsZW4IvZhTC4W7k4OlLP+S5YLussa/r3ixNT66KOQfNORlXHSOy/X4A==}
@ -5490,6 +5556,12 @@ packages:
'@jridgewell/sourcemap-codec': 1.4.14
dev: true
/magic-string@0.30.0:
resolution: {integrity: sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==}
engines: {node: '>=12'}
dependencies:
'@jridgewell/sourcemap-codec': 1.4.14
/make-dir@3.1.0:
resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
engines: {node: '>=8'}
@ -5995,6 +6067,25 @@ packages:
engines: {node: '>=8.6'}
dev: true
/pinia@2.1.3(@vue/composition-api@1.7.0)(typescript@4.6.4)(vue@3.3.4):
resolution: {integrity: sha512-XNA/z/ye4P5rU1pieVmh0g/hSuDO98/a5UC8oSP0DNdvt6YtetJNHTrXwpwsQuflkGT34qKxAEcp7lSxXNjf/A==}
peerDependencies:
'@vue/composition-api': ^1.4.0
typescript: '>=4.4.4'
vue: ^2.6.14 || ^3.3.0
peerDependenciesMeta:
'@vue/composition-api':
optional: true
typescript:
optional: true
dependencies:
'@vue/composition-api': 1.7.0(vue@3.3.4)
'@vue/devtools-api': 6.5.0
typescript: 4.6.4
vue: 3.3.4
vue-demi: 0.14.5(@vue/composition-api@1.7.0)(vue@3.3.4)
dev: true
/pkg-dir@4.2.0:
resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==}
engines: {node: '>=8'}
@ -6724,6 +6815,7 @@ packages:
nanoid: 3.3.4
picocolors: 1.0.0
source-map-js: 1.0.2
dev: true
/postcss@8.4.21:
resolution: {integrity: sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==}
@ -6732,7 +6824,6 @@ packages:
nanoid: 3.3.4
picocolors: 1.0.0
source-map-js: 1.0.2
dev: true
/prelude-ls@1.2.1:
resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
@ -7399,9 +7490,11 @@ packages:
/source-map@0.6.1:
resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
engines: {node: '>=0.10.0'}
dev: true
/sourcemap-codec@1.4.8:
resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
dev: true
/spdx-correct@3.1.1:
resolution: {integrity: sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==}
@ -7907,7 +8000,7 @@ packages:
engines: {node: '>= 0.8'}
dev: true
/vue-demi@0.13.2(@vue/composition-api@1.7.0)(vue@3.2.37):
/vue-demi@0.13.2(@vue/composition-api@1.7.0)(vue@3.3.4):
resolution: {integrity: sha512-41ukrclEbMddAyP7PvxMSYqnOSzPV6r7GNnyTSKSCNTaz19GehxmTiXyP9kwHSUv2+Dr6hHqiUiF7L1VAw2KdQ==}
engines: {node: '>=12'}
hasBin: true
@ -7919,10 +8012,26 @@ packages:
'@vue/composition-api':
optional: true
dependencies:
'@vue/composition-api': 1.7.0(vue@3.2.37)
vue: 3.2.37
'@vue/composition-api': 1.7.0(vue@3.3.4)
vue: 3.3.4
dev: false
/vue-demi@0.14.5(@vue/composition-api@1.7.0)(vue@3.3.4):
resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==}
engines: {node: '>=12'}
hasBin: true
requiresBuild: true
peerDependencies:
'@vue/composition-api': ^1.0.0-rc.1
vue: ^3.0.0-0 || ^2.6.0
peerDependenciesMeta:
'@vue/composition-api':
optional: true
dependencies:
'@vue/composition-api': 1.7.0(vue@3.3.4)
vue: 3.3.4
dev: true
/vue-eslint-parser@8.3.0(eslint@7.32.0):
resolution: {integrity: sha512-dzHGG3+sYwSf6zFBa0Gi9ZDshD7+ad14DGOdTLjruRVgZXe2J+DcZ9iUhyR48z5g1PqRa20yt3Njna/veLJL/g==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@ -8054,14 +8163,14 @@ packages:
csstype: 3.1.1
dev: true
/vue@3.2.37:
resolution: {integrity: sha512-bOKEZxrm8Eh+fveCqS1/NkG/n6aMidsI6hahas7pa0w/l7jkbssJVsRhVDs07IdDq7h9KHswZOgItnwJAgtVtQ==}
/vue@3.3.4:
resolution: {integrity: sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==}
dependencies:
'@vue/compiler-dom': 3.2.37
'@vue/compiler-sfc': 3.2.37
'@vue/runtime-dom': 3.2.37
'@vue/server-renderer': 3.2.37(vue@3.2.37)
'@vue/shared': 3.2.37
'@vue/compiler-dom': 3.3.4
'@vue/compiler-sfc': 3.3.4
'@vue/runtime-dom': 3.3.4
'@vue/server-renderer': 3.3.4(vue@3.3.4)
'@vue/shared': 3.3.4
/watchpack@2.4.0:
resolution: {integrity: sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==}

View File

@ -165,8 +165,8 @@
</p>
</section>
<!-- <h2 id="radar">
<a href="#radar">Radar chart <small>(with Vuex integration)</small></a>
<h2 id="radar">
<a href="#radar">Radar chart <small>(with Pinia integration)</small></a>
<button
:class="{
round: true,
@ -179,20 +179,35 @@
<section v-if="expand.radar">
<figure>
<v-chart
class="echarts" :option="scoreRadar" :init-options="initOptions" autoresize />
:option="getRadarData(metricIndex)"
:init-options="initOptions"
autoresize
/>
</figure>
<p>
<select v-model="metricIndex">
<option v-for="(metric, index) in metrics" :value="index" :key="index"
>{{ metric }}
<option
v-for="(metric, index) in metrics"
:value="index"
:key="index"
>
{{ metric }}
</option>
</select>
<button @click="increase(1)" :disabled="isMax">Increase</button>
<button @click="increase(-1)" :disabled="isMin">Decrease</button>
<input id="async" type="checkbox" v-model="asyncCount" />
<label for="async">Async</label>
<button
@click="increase(metricIndex, 1)"
:disabled="isMax(metricIndex)"
>
Increase
</button>
<button
@click="increase(metricIndex, -1)"
:disabled="isMin(metricIndex)"
>
Decrease
</button>
</p>
</section>-->
</section>
<h2 id="connect">
<a href="#connect">Connectable charts</a>
@ -334,6 +349,7 @@ import {
} from "echarts/components";
import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
import "echarts-liquidfill";
import { mapState, mapActions } from "pinia";
import logo from "./data/logo";
import getBar from "./data/bar";
import pie from "./data/pie";
@ -341,6 +357,7 @@ import polar from "./data/polar";
import scatter from "./data/scatter";
import map from "./data/map";
import { c1, c2 } from "./data/connect";
import { useScoreStore } from "./store";
// custom theme
import theme from "./theme.json";
@ -434,6 +451,15 @@ export default {
}
};
},
computed: {
autoresize() {
return { throttle: 200, onResize: this.handleResize };
},
...mapState(useScoreStore, ["scores"]),
metrics() {
return this.scores.map(({ name }) => name);
}
},
methods: {
handleClick(...args) {
console.log("click from echarts", ...args);
@ -441,6 +467,9 @@ export default {
handleZrClick(...args) {
console.log("click from zrender", ...args);
},
handleResize() {
console.log("resize");
},
refresh() {
// simulating async data from server
this.seconds = 3;
@ -566,7 +595,8 @@ export default {
},
stopActions() {
clearInterval(this.actionTimer);
}
},
...mapActions(useScoreStore, ["getRadarData", "increase", "isMax", "isMin"])
},
watch: {
connected: {

View File

@ -1,4 +1,8 @@
import { createApp } from "vue";
import { createPinia } from "pinia";
import Demo from "./Demo.vue";
createApp(Demo).mount("#app");
const pinia = createPinia();
const app = createApp(Demo);
app.use(pinia);
app.mount("#app");

76
src/demo/store.ts Normal file
View File

@ -0,0 +1,76 @@
import { defineStore } from "pinia";
export const useScoreStore = defineStore("score", {
state: () => {
return {
scores: [
{ name: "Attack", max: 20, value: 19 },
{ name: "Defense", max: 20, value: 9 },
{ name: "Speed", max: 20, value: 18 },
{ name: "Strength", max: 20, value: 16 },
{ name: "Endurance", max: 20, value: 16 },
{ name: "Agility", max: 20, value: 20 }
],
index: 0
};
},
getters: {
scoreRadar({ scores }) {
return {
title: {
text: "Player Ability"
},
tooltip: {},
radar: {
indicator: scores.map(({ name, max }) => {
return { name, max };
})
},
series: [
{
name: "Value",
type: "radar",
data: [{ value: scores.map(({ value }) => value) }]
}
]
};
}
},
actions: {
getRadarData(activeIndex: number) {
return {
animation: false,
title: {
text: "Player Ability"
},
tooltip: {},
radar: {
indicator: this.scores.map(({ name, max }, index) => {
if (index === activeIndex) {
return { name, max, color: "goldenrod" };
}
return { name, max };
})
},
series: [
{
name: "Value",
type: "radar",
data: [{ value: this.scores.map(({ value }) => value) }]
}
]
};
},
increase(index: number, amount: number) {
const metric = this.scores[index];
metric.value = Math.max(Math.min(metric.value + amount, metric.max), 0);
},
isMax(index: number) {
const { value, max } = this.scores[index];
return value === max;
},
isMin(index: number) {
return this.scores[index].value === 0;
}
}
});