From bd1c0671d49d16be5c72259e5a0be656f5b3c242 Mon Sep 17 00:00:00 2001 From: TechQuery Date: Wed, 28 Feb 2024 23:38:43 +0800 Subject: [PATCH] [migrate] replace ECharts components with ECharts-JSX 1.0 [optimize] update Upstream packages --- package.json | 17 +- pnpm-lock.yaml | 190 ++++++++++++---------- source/component/ECharts/Chart.tsx | 196 ----------------------- source/component/ECharts/Option.tsx | 119 -------------- source/component/ECharts/Proxy.ts | 51 ------ source/component/ECharts/index.ts | 3 - source/component/ECharts/utility.ts | 94 ----------- source/page/Map/component/VirusChart.tsx | 2 +- tsconfig.json | 8 +- 9 files changed, 121 insertions(+), 559 deletions(-) delete mode 100644 source/component/ECharts/Chart.tsx delete mode 100644 source/component/ECharts/Option.tsx delete mode 100644 source/component/ECharts/Proxy.ts delete mode 100644 source/component/ECharts/index.ts delete mode 100644 source/component/ECharts/utility.ts diff --git a/package.json b/package.json index eee4c2f..4bb0635 100644 --- a/package.json +++ b/package.json @@ -18,10 +18,11 @@ "cell-router": "^3.0.0-rc.5", "classnames": "^2.5.1", "dom-renderer": "^2.1.4", - "echarts": "^5.4.3", + "echarts": "^5.5.0", + "echarts-jsx": "^1.0.0-rc.4", "github-web-widget": "^4.0.0-rc.2", "iterable-observer": "^1.0.1", - "js-base64": "^3.7.6", + "js-base64": "^3.7.7", "koajax": "^0.9.6", "lodash.debounce": "^4.0.8", "lodash.memoize": "^4.1.2", @@ -29,10 +30,10 @@ "mobx": "^6.12.0", "web-cell": "^3.0.0-rc.15", "web-utility": "^4.3.0", - "yaml": "^2.3.4" + "yaml": "^2.4.0" }, "devDependencies": { - "@octokit/openapi-types": "^19.1.0", + "@octokit/openapi-types": "^20.0.0", "@parcel/config-default": "~2.11.0", "@parcel/packager-raw-url": "~2.11.0", "@parcel/transformer-less": "~2.11.0", @@ -40,12 +41,12 @@ "@parcel/transformer-webmanifest": "~2.11.0", "@types/lodash.debounce": "^4.0.9", "@types/lodash.memoize": "^4.1.9", - "@types/node": "^18.19.17", - "@typescript-eslint/eslint-plugin": "^7.0.1", - "@typescript-eslint/parser": "^7.0.1", + "@types/node": "^18.19.19", + "@typescript-eslint/eslint-plugin": "^7.1.0", + "@typescript-eslint/parser": "^7.1.0", "buffer": "^6.0.3", "cross-env": "^7.0.3", - "eslint": "^8.56.0", + "eslint": "^8.57.0", "eslint-config-prettier": "^9.1.0", "husky": "^9.0.11", "lint-staged": "^15.2.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 507d7c2..46e2e80 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -21,8 +21,11 @@ dependencies: specifier: ^2.1.4 version: 2.1.4(typescript@5.3.3) echarts: - specifier: ^5.4.3 - version: 5.4.3 + specifier: ^5.5.0 + version: 5.5.0 + echarts-jsx: + specifier: ^1.0.0-rc.4 + version: 1.0.0-rc.4(typescript@5.3.3) github-web-widget: specifier: ^4.0.0-rc.2 version: 4.0.0-rc.2(typescript@5.3.3) @@ -30,8 +33,8 @@ dependencies: specifier: ^1.0.1 version: 1.0.1 js-base64: - specifier: ^3.7.6 - version: 3.7.6 + specifier: ^3.7.7 + version: 3.7.7 koajax: specifier: ^0.9.6 version: 0.9.6(typescript@5.3.3) @@ -54,13 +57,13 @@ dependencies: specifier: ^4.3.0 version: 4.3.0(typescript@5.3.3) yaml: - specifier: ^2.3.4 - version: 2.3.4 + specifier: ^2.4.0 + version: 2.4.0 devDependencies: '@octokit/openapi-types': - specifier: ^19.1.0 - version: 19.1.0 + specifier: ^20.0.0 + version: 20.0.0 '@parcel/config-default': specifier: ~2.11.0 version: 2.11.0(@parcel/core@2.11.0)(typescript@5.3.3) @@ -83,14 +86,14 @@ devDependencies: specifier: ^4.1.9 version: 4.1.9 '@types/node': - specifier: ^18.19.17 - version: 18.19.17 + specifier: ^18.19.19 + version: 18.19.19 '@typescript-eslint/eslint-plugin': - specifier: ^7.0.1 - version: 7.0.1(@typescript-eslint/parser@7.0.1)(eslint@8.56.0)(typescript@5.3.3) + specifier: ^7.1.0 + version: 7.1.0(@typescript-eslint/parser@7.1.0)(eslint@8.57.0)(typescript@5.3.3) '@typescript-eslint/parser': - specifier: ^7.0.1 - version: 7.0.1(eslint@8.56.0)(typescript@5.3.3) + specifier: ^7.1.0 + version: 7.1.0(eslint@8.57.0)(typescript@5.3.3) buffer: specifier: ^6.0.3 version: 6.0.3 @@ -98,11 +101,11 @@ devDependencies: specifier: ^7.0.3 version: 7.0.3 eslint: - specifier: ^8.56.0 - version: 8.56.0 + specifier: ^8.57.0 + version: 8.57.0 eslint-config-prettier: specifier: ^9.1.0 - version: 9.1.0(eslint@8.56.0) + version: 9.1.0(eslint@8.57.0) husky: specifier: ^9.0.11 version: 9.0.11 @@ -1530,13 +1533,13 @@ packages: dev: true optional: true - /@eslint-community/eslint-utils@4.4.0(eslint@8.56.0): + /@eslint-community/eslint-utils@4.4.0(eslint@8.57.0): resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: ^6.0.0 || ^7.0.0 || >=8.0.0 dependencies: - eslint: 8.56.0 + eslint: 8.57.0 eslint-visitor-keys: 3.4.3 dev: true @@ -1562,8 +1565,8 @@ packages: - supports-color dev: true - /@eslint/js@8.56.0: - resolution: {integrity: sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==} + /@eslint/js@8.57.0: + resolution: {integrity: sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: true @@ -1760,8 +1763,8 @@ packages: fastq: 1.17.1 dev: true - /@octokit/openapi-types@19.1.0: - resolution: {integrity: sha512-6G+ywGClliGQwRsjvqVYpklIfa7oRPA0vyhPQG/1Feh+B+wU0vGH1JiJ5T25d3g1JZYBHzR2qefLi9x8Gt+cpw==} + /@octokit/openapi-types@20.0.0: + resolution: {integrity: sha512-EtqRBEjp1dL/15V7WiX5LJMIxxkdiGJnabzYx5Apx4FkQIFgAfKumXeYAqqJCj1s+BMX4cPFIFC4OLCR6stlnA==} dev: true /@parcel/bundler-default@2.11.0: @@ -2853,7 +2856,7 @@ packages: /@types/keyv@3.1.4: resolution: {integrity: sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==} dependencies: - '@types/node': 18.19.17 + '@types/node': 18.19.19 dev: true /@types/lodash.debounce@4.0.9: @@ -2880,8 +2883,8 @@ packages: resolution: {integrity: sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag==} dev: true - /@types/node@18.19.17: - resolution: {integrity: sha512-SzyGKgwPzuWp2SHhlpXKzCX0pIOfcI4V2eF37nNBJOhwlegQ83omtVQ1XxZpDE06V/d6AQvfQdPfnw0tRC//Ng==} + /@types/node@18.19.19: + resolution: {integrity: sha512-qqV6hSy9zACEhQUy5CEGeuXAZN0fNjqLWRIvOXOwdFYhFoKBiY08VKR5kgchr90+TitLVhpUEb54hk4bYaArUw==} dependencies: undici-types: 5.26.5 dev: true @@ -2893,13 +2896,13 @@ packages: /@types/resolve@1.17.1: resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==} dependencies: - '@types/node': 18.19.17 + '@types/node': 18.19.19 dev: true /@types/responselike@1.0.3: resolution: {integrity: sha512-H/+L+UkTV33uf49PH5pCAUBVPNj2nDBXTN+qS1dOwyyg24l3CcicicCA7ca+HMvJBZcFgl5r8e+RR6elsb4Lyw==} dependencies: - '@types/node': 18.19.17 + '@types/node': 18.19.19 dev: true /@types/semver@7.5.7: @@ -2910,8 +2913,8 @@ packages: resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==} dev: true - /@typescript-eslint/eslint-plugin@7.0.1(@typescript-eslint/parser@7.0.1)(eslint@8.56.0)(typescript@5.3.3): - resolution: {integrity: sha512-OLvgeBv3vXlnnJGIAgCLYKjgMEU+wBGj07MQ/nxAaON+3mLzX7mJbhRYrVGiVvFiXtwFlkcBa/TtmglHy0UbzQ==} + /@typescript-eslint/eslint-plugin@7.1.0(@typescript-eslint/parser@7.1.0)(eslint@8.57.0)(typescript@5.3.3): + resolution: {integrity: sha512-j6vT/kCulhG5wBmGtstKeiVr1rdXE4nk+DT1k6trYkwlrvW9eOF5ZbgKnd/YR6PcM4uTEXa0h6Fcvf6X7Dxl0w==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: '@typescript-eslint/parser': ^7.0.0 @@ -2922,13 +2925,13 @@ packages: optional: true dependencies: '@eslint-community/regexpp': 4.10.0 - '@typescript-eslint/parser': 7.0.1(eslint@8.56.0)(typescript@5.3.3) - '@typescript-eslint/scope-manager': 7.0.1 - '@typescript-eslint/type-utils': 7.0.1(eslint@8.56.0)(typescript@5.3.3) - '@typescript-eslint/utils': 7.0.1(eslint@8.56.0)(typescript@5.3.3) - '@typescript-eslint/visitor-keys': 7.0.1 + '@typescript-eslint/parser': 7.1.0(eslint@8.57.0)(typescript@5.3.3) + '@typescript-eslint/scope-manager': 7.1.0 + '@typescript-eslint/type-utils': 7.1.0(eslint@8.57.0)(typescript@5.3.3) + '@typescript-eslint/utils': 7.1.0(eslint@8.57.0)(typescript@5.3.3) + '@typescript-eslint/visitor-keys': 7.1.0 debug: 4.3.4 - eslint: 8.56.0 + eslint: 8.57.0 graphemer: 1.4.0 ignore: 5.3.1 natural-compare: 1.4.0 @@ -2939,8 +2942,8 @@ packages: - supports-color dev: true - /@typescript-eslint/parser@7.0.1(eslint@8.56.0)(typescript@5.3.3): - resolution: {integrity: sha512-8GcRRZNzaHxKzBPU3tKtFNing571/GwPBeCvmAUw0yBtfE2XVd0zFKJIMSWkHJcPQi0ekxjIts6L/rrZq5cxGQ==} + /@typescript-eslint/parser@7.1.0(eslint@8.57.0)(typescript@5.3.3): + resolution: {integrity: sha512-V1EknKUubZ1gWFjiOZhDSNToOjs63/9O0puCgGS8aDOgpZY326fzFu15QAUjwaXzRZjf/qdsdBrckYdv9YxB8w==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: eslint: ^8.56.0 @@ -2949,27 +2952,27 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/scope-manager': 7.0.1 - '@typescript-eslint/types': 7.0.1 - '@typescript-eslint/typescript-estree': 7.0.1(typescript@5.3.3) - '@typescript-eslint/visitor-keys': 7.0.1 + '@typescript-eslint/scope-manager': 7.1.0 + '@typescript-eslint/types': 7.1.0 + '@typescript-eslint/typescript-estree': 7.1.0(typescript@5.3.3) + '@typescript-eslint/visitor-keys': 7.1.0 debug: 4.3.4 - eslint: 8.56.0 + eslint: 8.57.0 typescript: 5.3.3 transitivePeerDependencies: - supports-color dev: true - /@typescript-eslint/scope-manager@7.0.1: - resolution: {integrity: sha512-v7/T7As10g3bcWOOPAcbnMDuvctHzCFYCG/8R4bK4iYzdFqsZTbXGln0cZNVcwQcwewsYU2BJLay8j0/4zOk4w==} + /@typescript-eslint/scope-manager@7.1.0: + resolution: {integrity: sha512-6TmN4OJiohHfoOdGZ3huuLhpiUgOGTpgXNUPJgeZOZR3DnIpdSgtt83RS35OYNNXxM4TScVlpVKC9jyQSETR1A==} engines: {node: ^16.0.0 || >=18.0.0} dependencies: - '@typescript-eslint/types': 7.0.1 - '@typescript-eslint/visitor-keys': 7.0.1 + '@typescript-eslint/types': 7.1.0 + '@typescript-eslint/visitor-keys': 7.1.0 dev: true - /@typescript-eslint/type-utils@7.0.1(eslint@8.56.0)(typescript@5.3.3): - resolution: {integrity: sha512-YtT9UcstTG5Yqy4xtLiClm1ZpM/pWVGFnkAa90UfdkkZsR1eP2mR/1jbHeYp8Ay1l1JHPyGvoUYR6o3On5Nhmw==} + /@typescript-eslint/type-utils@7.1.0(eslint@8.57.0)(typescript@5.3.3): + resolution: {integrity: sha512-UZIhv8G+5b5skkcuhgvxYWHjk7FW7/JP5lPASMEUoliAPwIH/rxoUSQPia2cuOj9AmDZmwUl1usKm85t5VUMew==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: eslint: ^8.56.0 @@ -2978,23 +2981,23 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/typescript-estree': 7.0.1(typescript@5.3.3) - '@typescript-eslint/utils': 7.0.1(eslint@8.56.0)(typescript@5.3.3) + '@typescript-eslint/typescript-estree': 7.1.0(typescript@5.3.3) + '@typescript-eslint/utils': 7.1.0(eslint@8.57.0)(typescript@5.3.3) debug: 4.3.4 - eslint: 8.56.0 + eslint: 8.57.0 ts-api-utils: 1.2.1(typescript@5.3.3) typescript: 5.3.3 transitivePeerDependencies: - supports-color dev: true - /@typescript-eslint/types@7.0.1: - resolution: {integrity: sha512-uJDfmirz4FHib6ENju/7cz9SdMSkeVvJDK3VcMFvf/hAShg8C74FW+06MaQPODHfDJp/z/zHfgawIJRjlu0RLg==} + /@typescript-eslint/types@7.1.0: + resolution: {integrity: sha512-qTWjWieJ1tRJkxgZYXx6WUYtWlBc48YRxgY2JN1aGeVpkhmnopq+SUC8UEVGNXIvWH7XyuTjwALfG6bFEgCkQA==} engines: {node: ^16.0.0 || >=18.0.0} dev: true - /@typescript-eslint/typescript-estree@7.0.1(typescript@5.3.3): - resolution: {integrity: sha512-SO9wHb6ph0/FN5OJxH4MiPscGah5wjOd0RRpaLvuBv9g8565Fgu0uMySFEPqwPHiQU90yzJ2FjRYKGrAhS1xig==} + /@typescript-eslint/typescript-estree@7.1.0(typescript@5.3.3): + resolution: {integrity: sha512-k7MyrbD6E463CBbSpcOnwa8oXRdHzH1WiVzOipK3L5KSML92ZKgUBrTlehdi7PEIMT8k0bQixHUGXggPAlKnOQ==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: typescript: '*' @@ -3002,8 +3005,8 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/types': 7.0.1 - '@typescript-eslint/visitor-keys': 7.0.1 + '@typescript-eslint/types': 7.1.0 + '@typescript-eslint/visitor-keys': 7.1.0 debug: 4.3.4 globby: 11.1.0 is-glob: 4.0.3 @@ -3015,30 +3018,30 @@ packages: - supports-color dev: true - /@typescript-eslint/utils@7.0.1(eslint@8.56.0)(typescript@5.3.3): - resolution: {integrity: sha512-oe4his30JgPbnv+9Vef1h48jm0S6ft4mNwi9wj7bX10joGn07QRfqIqFHoMiajrtoU88cIhXf8ahwgrcbNLgPA==} + /@typescript-eslint/utils@7.1.0(eslint@8.57.0)(typescript@5.3.3): + resolution: {integrity: sha512-WUFba6PZC5OCGEmbweGpnNJytJiLG7ZvDBJJoUcX4qZYf1mGZ97mO2Mps6O2efxJcJdRNpqweCistDbZMwIVHw==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: eslint: ^8.56.0 dependencies: - '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0) + '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0) '@types/json-schema': 7.0.15 '@types/semver': 7.5.7 - '@typescript-eslint/scope-manager': 7.0.1 - '@typescript-eslint/types': 7.0.1 - '@typescript-eslint/typescript-estree': 7.0.1(typescript@5.3.3) - eslint: 8.56.0 + '@typescript-eslint/scope-manager': 7.1.0 + '@typescript-eslint/types': 7.1.0 + '@typescript-eslint/typescript-estree': 7.1.0(typescript@5.3.3) + eslint: 8.57.0 semver: 7.6.0 transitivePeerDependencies: - supports-color - typescript dev: true - /@typescript-eslint/visitor-keys@7.0.1: - resolution: {integrity: sha512-hwAgrOyk++RTXrP4KzCg7zB2U0xt7RUU0ZdMSCsqF3eKUwkdXUMyTb0qdCuji7VIbcpG62kKTU9M1J1c9UpFBw==} + /@typescript-eslint/visitor-keys@7.1.0: + resolution: {integrity: sha512-FhUqNWluiGNzlvnDZiXad4mZRhtghdoKW6e98GoEOYSu5cND+E39rG5KwJMUzeENwm1ztYBRqof8wMLP+wNPIA==} engines: {node: ^16.0.0 || >=18.0.0} dependencies: - '@typescript-eslint/types': 7.0.1 + '@typescript-eslint/types': 7.1.0 eslint-visitor-keys: 3.4.3 dev: true @@ -3841,11 +3844,26 @@ packages: resolution: {integrity: sha512-1A8za6ws41LQgv9HrE/66jyC5yuSjQ3L/KOpFtoBilsAK2iA2wuS5rTt1OCzIvtS2V7nVmedsUU+DGRcjBmOYA==} dev: true - /echarts@5.4.3: - resolution: {integrity: sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==} + /echarts-jsx@1.0.0-rc.4(typescript@5.3.3): + resolution: {integrity: sha512-zdKyneCQdmvQDnCr1oTSZd08LtCQ1ffMmYie7Nv6U/Q8DbU0y1R4samVxCowMH+08KO5brhpuBzDt36dfoMqgw==} + engines: {node: '>=16'} + peerDependencies: + '@webcomponents/webcomponentsjs': ^2.8 + dependencies: + dom-renderer: 2.1.4(typescript@5.3.3) + echarts: 5.5.0 + iterable-observer: 1.0.1 + lodash: 4.17.21 + web-utility: 4.3.0(typescript@5.3.3) + transitivePeerDependencies: + - typescript + dev: false + + /echarts@5.5.0: + resolution: {integrity: sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==} dependencies: tslib: 2.3.0 - zrender: 5.4.4 + zrender: 5.5.0 dev: false /ejs@3.1.9: @@ -4030,13 +4048,13 @@ packages: engines: {node: '>=10'} dev: true - /eslint-config-prettier@9.1.0(eslint@8.56.0): + /eslint-config-prettier@9.1.0(eslint@8.57.0): resolution: {integrity: sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==} hasBin: true peerDependencies: eslint: '>=7.0.0' dependencies: - eslint: 8.56.0 + eslint: 8.57.0 dev: true /eslint-scope@7.2.2: @@ -4052,15 +4070,15 @@ packages: engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: true - /eslint@8.56.0: - resolution: {integrity: sha512-Go19xM6T9puCOWntie1/P997aXxFsOi37JIHRWI514Hc6ZnaHGKY9xFhrU65RT6CcBEzZoGG1e6Nq+DT04ZtZQ==} + /eslint@8.57.0: + resolution: {integrity: sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} hasBin: true dependencies: - '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0) + '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0) '@eslint-community/regexpp': 4.10.0 '@eslint/eslintrc': 2.1.4 - '@eslint/js': 8.56.0 + '@eslint/js': 8.57.0 '@humanwhocodes/config-array': 0.11.14 '@humanwhocodes/module-importer': 1.0.1 '@nodelib/fs.walk': 1.2.8 @@ -4953,13 +4971,13 @@ packages: resolution: {integrity: sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==} engines: {node: '>= 10.13.0'} dependencies: - '@types/node': 18.19.17 + '@types/node': 18.19.19 merge-stream: 2.0.0 supports-color: 7.2.0 dev: true - /js-base64@3.7.6: - resolution: {integrity: sha512-NPrWuHFxFUknr1KqJRDgUQPexQF0uIJWjeT+2KjEePhitQxQEx5EJBG1lVn5/hc8aLycTpXrDOgPQ6Zq+EDiTA==} + /js-base64@3.7.7: + resolution: {integrity: sha512-7rCnleh0z2CkXhH67J8K1Ytz0b2Y+yxTPL+/KOJoa20hfnVQ/3/T6W/KflYI4bRHRagNeXeU2bkNGI3v1oS/lw==} dev: false /js-tokens@4.0.0: @@ -5287,7 +5305,6 @@ packages: /lodash@4.17.21: resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==} - dev: true /log-symbols@4.1.0: resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==} @@ -7116,6 +7133,13 @@ packages: /yaml@2.3.4: resolution: {integrity: sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==} engines: {node: '>= 14'} + dev: true + + /yaml@2.4.0: + resolution: {integrity: sha512-j9iR8g+/t0lArF4V6NE/QCfT+CO7iLqrXAHZbJdo+LfjqP1vR8Fg5bSiaq6Q2lOD1AUEVrEVIgABvBFYojJVYQ==} + engines: {node: '>= 14'} + hasBin: true + dev: false /yargs-parser@18.1.3: resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==} @@ -7130,8 +7154,8 @@ packages: engines: {node: '>=10'} dev: true - /zrender@5.4.4: - resolution: {integrity: sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==} + /zrender@5.5.0: + resolution: {integrity: sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==} dependencies: tslib: 2.3.0 dev: false diff --git a/source/component/ECharts/Chart.tsx b/source/component/ECharts/Chart.tsx deleted file mode 100644 index b262e9a..0000000 --- a/source/component/ECharts/Chart.tsx +++ /dev/null @@ -1,196 +0,0 @@ -import { JsxProps } from 'dom-renderer'; -import { EChartsOption, ResizeOpts } from 'echarts'; -import { ECharts, init } from 'echarts/core'; -import { ECBasicOption } from 'echarts/types/dist/shared'; -import { Observable } from 'iterable-observer'; -import debounce from 'lodash.debounce'; -import { CustomElement, parseDOM, sleep } from 'web-utility'; - -import { ProxyElement } from './Proxy'; -import { - BUILTIN_CHARTS_MAP, - BUITIN_COMPONENTS_MAP, - ChartType, - ECChartOptionName, - ECComponentOptionName, - ZRElementEventHandler, - ZRElementEventName, - loadChart, - loadComponent, - loadRenderer -} from './utility'; - -export type EChartsElementEventHandler = Partial< - Record<`on${Capitalize}`, ZRElementEventHandler> ->; -export interface EChartsElementProps - extends ECBasicOption, - EChartsElementEventHandler { - theme?: Parameters[1]; - initOptions?: Parameters[2]; - resizeOptions?: ResizeOpts; -} - -export type EChartsElementState = EChartsElementProps & EChartsOption; - -const DefaultOptions: EChartsOption = { - grid: {} -}; - -export class EChartsElement - extends ProxyElement - implements CustomElement -{ - #type: ChartType; - #core?: ECharts; - #eventHandlers: [ZRElementEventName, ZRElementEventHandler, string?][] = []; - #eventData = []; - - set type(value: ChartType) { - this.#type = value; - this.setAttribute('type', value); - this.#init(value); - } - - get type() { - return this.#type; - } - - get options() { - return this.#core.getOption(); - } - - constructor() { - super(); - - this.attachShadow({ mode: 'open' }).append( - parseDOM('
')[0] - ); - this.#boot(); - } - - connectedCallback() { - this.type ||= 'svg'; - - globalThis.addEventListener?.('resize', this.handleResize); - } - - disconnectedCallback() { - globalThis.removeEventListener?.('resize', this.handleResize); - - this.#core?.dispose(); - } - - async #init(type: ChartType) { - await loadRenderer(type); - - const { theme, initOptions, ...props } = this.toJSON(); - - this.#core = init( - this.shadowRoot.firstElementChild as HTMLDivElement, - theme, - initOptions - ); - this.setOption(props); - - for (const [event, handler, selector] of this.#eventHandlers) - if (selector) this.onChild(event, selector, handler); - else this.listen(event, handler); - - this.#eventHandlers.length = 0; - - for (const option of this.#eventData) this.setOption(option); - - this.#eventData.length = 0; - } - - async #boot() { - for await (const { detail } of Observable.fromEvent( - this, - 'optionchange' - )) { - this.setOption(detail); - await sleep(0.5); - } - } - - async setOption(data: EChartsOption) { - if (!this.#core) { - this.#eventData.push(data); - return; - } - - for (const key of Object.keys(data)) - if (key in BUITIN_COMPONENTS_MAP) - await loadComponent(key as ECComponentOptionName); - else if (key in BUILTIN_CHARTS_MAP) - await loadChart(key as ECChartOptionName); - - this.#core.setOption({ ...DefaultOptions, ...data }, false, true); - } - - setProperty(key: string, value: any) { - super.setProperty(key, value); - - this.setOption(this.toJSON()); - } - - listen(event: ZRElementEventName, handler: ZRElementEventHandler) { - if (this.#core) this.#core.getZr().on(event, handler); - else this.#eventHandlers.push([event, handler]); - } - - onChild( - event: ZRElementEventName, - selector: string, - handler: ZRElementEventHandler - ) { - if (this.#core) this.#core.on(event, selector, handler); - else this.#eventHandlers.push([event, handler, selector]); - } - - forget(event: ZRElementEventName, handler: ZRElementEventHandler) { - if (this.#core) this.#core.getZr().off(event, handler); - else { - const index = this.#eventHandlers.findIndex( - item => item[0] === event && item[1] === handler && !item[2] - ); - if (index > -1) this.#eventHandlers.splice(index, 1); - } - } - - offChild( - event: ZRElementEventName, - selector: string, - handler: ZRElementEventHandler - ) { - if (this.#core) this.#core.off(event, handler); - else { - const index = this.#eventHandlers.findIndex( - item => - item[0] === event && - item[1] === handler && - item[2] === selector - ); - if (index > -1) this.#eventHandlers.splice(index, 1); - } - } - - handleResize = debounce(() => - this.#core.resize(this.toJSON().resizeOptions) - ); -} - -customElements.define('ec-chart', EChartsElement); - -declare global { - namespace JSX { - interface IntrinsicElements { - 'ec-chart': Omit< - JsxProps, - keyof EChartsElementEventHandler - > & - EChartsElementProps; - } - } -} diff --git a/source/component/ECharts/Option.tsx b/source/component/ECharts/Option.tsx deleted file mode 100644 index b654a30..0000000 --- a/source/component/ECharts/Option.tsx +++ /dev/null @@ -1,119 +0,0 @@ -import { JsxProps } from 'dom-renderer'; -import { EChartsOption } from 'echarts'; -import { - CustomElement, - HyphenCase, - PickSingle, - toCamelCase, - toHyphenCase -} from 'web-utility'; - -import { EChartsElement } from './Chart'; -import { ProxyElement } from './Proxy'; -import { - BUILTIN_CHARTS_MAP, - BUITIN_COMPONENTS_MAP, - ECChartOptionName, - ECComponentOptionName, - EventKeyPattern, - ZRElementEventHandler, - ZRElementEventName -} from './utility'; - -export abstract class ECOptionElement - extends ProxyElement - implements CustomElement -{ - get chartTagName() { - return toCamelCase(this.tagName.replace(/^ec-/i, '').toLowerCase()); - } - - get isSeries() { - return this.chartTagName === 'series'; - } - - get eventSelector() { - return [this.chartTagName, this['type']].filter(Boolean).join('.'); - } - - connectedCallback() { - for (const [key, value] of Object.entries(this.toJSON())) - if (EventKeyPattern.test(key) && typeof value === 'function') - this.listen( - key.slice(2) as ZRElementEventName, - value as ZRElementEventHandler - ); - this.update(); - } - - setProperty(key: string, value: any) { - super.setProperty(key, value); - - if (this.isConnected) this.update(); - } - - update() { - const data = this.toJSON(); - - this.dispatchEvent( - new CustomEvent('optionchange', { - bubbles: true, - detail: { - [this.chartTagName]: this.isSeries ? [data] : data - } - }) - ); - } - - listen(event: ZRElementEventName, handler: ZRElementEventHandler) { - if (this.isConnected) - this.closest('ec-chart')?.onChild( - event, - this.eventSelector, - handler - ); - } - - forget(event: ZRElementEventName, handler: ZRElementEventHandler) { - if (this.isConnected) - this.closest('ec-chart')?.offChild( - event, - this.eventSelector, - handler - ); - } - - setAttribute(name: string, value: string) { - super.setAttribute(name, value); - - const key = toCamelCase(name); - - if (key in Object.getPrototypeOf(this)) return; - - this[key] = name === value || value; - } -} - -const ECOptionNames = [ - ...Object.keys({ ...BUITIN_COMPONENTS_MAP, ...BUILTIN_CHARTS_MAP }), - 'series' -]; - -for (const name of ECOptionNames) - customElements.define( - `ec-${toHyphenCase(name)}`, - class extends ECOptionElement {} - ); - -type ECOptionName = ECComponentOptionName | ECChartOptionName | 'series'; - -type ECOptionElements = { - [K in ECOptionName as `ec-${HyphenCase}`]: JsxProps & - PickSingle; -}; - -declare global { - namespace JSX { - interface IntrinsicElements extends ECOptionElements {} - } -} diff --git a/source/component/ECharts/Proxy.ts b/source/component/ECharts/Proxy.ts deleted file mode 100644 index 2258a21..0000000 --- a/source/component/ECharts/Proxy.ts +++ /dev/null @@ -1,51 +0,0 @@ -import { ECElementEvent } from 'echarts'; -import { proxyPrototype, toHyphenCase } from 'web-utility'; - -import { EventKeyPattern } from './utility'; - -export abstract class ProxyElement extends HTMLElement { - #data = {} as T; - - toJSON() { - return this.#data; - } - - constructor() { - super(); - - proxyPrototype(this, this.#data, (key, value) => - this.setProperty(key.toString(), value) - ); - } - - abstract listen(event: string, handler: (event: any) => any): any; - abstract forget(event: string, handler: (event: any) => any): any; - - setProperty(key: string, value: any) { - const oldValue = this.#data[key], - name = toHyphenCase(key), - eventName = key.slice(2) as ECElementEvent['type']; - this.#data[key] = value; - - switch (typeof value) { - case 'object': - if (!value) this.removeAttribute(name); - break; - case 'boolean': - if (value) super.setAttribute(name, name + ''); - else super.removeAttribute(name); - break; - case 'function': - if (EventKeyPattern.test(key)) this.listen(eventName, value); - break; - default: - if (value != null) super.setAttribute(name, value + ''); - else if ( - EventKeyPattern.test(key) && - typeof oldValue === 'function' - ) - this.forget(eventName, value); - else super.removeAttribute(name); - } - } -} diff --git a/source/component/ECharts/index.ts b/source/component/ECharts/index.ts deleted file mode 100644 index 1c66c65..0000000 --- a/source/component/ECharts/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './utility'; -export * from './Option'; -export * from './Chart'; diff --git a/source/component/ECharts/utility.ts b/source/component/ECharts/utility.ts deleted file mode 100644 index 97e38b7..0000000 --- a/source/component/ECharts/utility.ts +++ /dev/null @@ -1,94 +0,0 @@ -import { ECElementEvent, use } from 'echarts/core'; -import memoize from 'lodash.memoize'; - -export const EventKeyPattern = /^on(\w+)/; - -export type ZRElementEventName = ECElementEvent['type']; -export type ZRElementEventHandler = (event: ECElementEvent) => boolean | void; - -/** - * @see {@link https://github.com/apache/echarts/blob/031a908fafaa57e2277b2f720087195925ec38cf/src/model/Global.ts#L83-L111} - */ -export const BUITIN_COMPONENTS_MAP = { - grid: 'GridComponent', - polar: 'PolarComponent', - geo: 'GeoComponent', - singleAxis: 'SingleAxisComponent', - parallel: 'ParallelComponent', - calendar: 'CalendarComponent', - graphic: 'GraphicComponent', - toolbox: 'ToolboxComponent', - tooltip: 'TooltipComponent', - axisPointer: 'AxisPointerComponent', - brush: 'BrushComponent', - title: 'TitleComponent', - timeline: 'TimelineComponent', - markPoint: 'MarkPointComponent', - markLine: 'MarkLineComponent', - markArea: 'MarkAreaComponent', - legend: 'LegendComponent', - dataZoom: 'DataZoomComponent', - visualMap: 'VisualMapComponent', - // aria: 'AriaComponent', - // dataset: 'DatasetComponent', - - // Dependencies - xAxis: 'GridComponent', - yAxis: 'GridComponent', - angleAxis: 'PolarComponent', - radiusAxis: 'PolarComponent' -} as const; - -export type ECComponentOptionName = keyof typeof BUITIN_COMPONENTS_MAP; - -export const loadComponent = memoize(async (name: ECComponentOptionName) => { - const componentName = BUITIN_COMPONENTS_MAP[name]; - const { [componentName]: component } = await import('echarts/components'); - - use(component); -}); - -/** - * @see {@link https://github.com/apache/echarts/blob/031a908fafaa57e2277b2f720087195925ec38cf/src/model/Global.ts#L113-L136} - */ -export const BUILTIN_CHARTS_MAP = { - line: 'LineChart', - bar: 'BarChart', - pie: 'PieChart', - scatter: 'ScatterChart', - radar: 'RadarChart', - map: 'MapChart', - tree: 'TreeChart', - treemap: 'TreemapChart', - graph: 'GraphChart', - gauge: 'GaugeChart', - funnel: 'FunnelChart', - parallel: 'ParallelChart', - sankey: 'SankeyChart', - boxplot: 'BoxplotChart', - candlestick: 'CandlestickChart', - effectScatter: 'EffectScatterChart', - lines: 'LinesChart', - heatmap: 'HeatmapChart', - pictorialBar: 'PictorialBarChart', - themeRiver: 'ThemeRiverChart', - sunburst: 'SunburstChart', - custom: 'CustomChart' -} as const; - -export type ECChartOptionName = keyof typeof BUILTIN_CHARTS_MAP; - -export const loadChart = memoize(async (name: ECChartOptionName) => { - const chartName = BUILTIN_CHARTS_MAP[name]; - const { [chartName]: chart } = await import('echarts/charts'); - - use(chart); -}); - -export type ChartType = 'svg' | 'canvas'; - -export const loadRenderer = memoize(async (type: ChartType) => { - const { SVGRenderer, CanvasRenderer } = await import('echarts/renderers'); - - use(type === 'svg' ? SVGRenderer : CanvasRenderer); -}); diff --git a/source/page/Map/component/VirusChart.tsx b/source/page/Map/component/VirusChart.tsx index c9b9305..da65669 100644 --- a/source/page/Map/component/VirusChart.tsx +++ b/source/page/Map/component/VirusChart.tsx @@ -1,7 +1,7 @@ import { WebCell, component, attribute, observer } from 'web-cell'; import { observable } from 'mobx'; import { EChartsOption } from 'echarts'; -import '../../../component/ECharts'; +import 'echarts-jsx/grid'; import { isLandscape } from '../utility'; import { diff --git a/tsconfig.json b/tsconfig.json index c56a2f5..5e1317d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,13 +1,13 @@ { "compilerOptions": { - "rootDir": "source/", "target": "ES6", - "module": "ES2020", - "moduleResolution": "Node", + "module": "Node16", + "moduleResolution": "Node16", "allowSyntheticDefaultImports": true, "useDefineForClassFields": true, "jsx": "react-jsx", "jsxImportSource": "dom-renderer", "lib": ["ES2023", "DOM"] - } + }, + "include": ["source/**/*", "*.ts"] }