diff --git a/.github/labeler.yml b/.github/labeler.yml index a3b72a9..0284d89 100644 --- a/.github/labeler.yml +++ b/.github/labeler.yml @@ -2,10 +2,18 @@ vchart-theme: - packages/vchart-theme/** +# Add 'vchart-theme-utils' label to any change within the 'vchart-theme-utils' package +vchart-theme-utils: + - packages/vchart-theme-utils/** + # Add 'vchart-semi-theme' label to any change within the 'vchart-semi-theme' package vchart-semi-theme: - packages/vchart-semi-theme/** +# Add 'vchart-arco-theme' label to any change within the 'vchart-arco-theme' package +vchart-arco-theme: + - packages/vchart-arco-theme/** + # Add 'test' label to any change to packages/*/__tests__/* files within the source dir test: - packages/*/__tests__/* diff --git a/.github/workflows/label.yml b/.github/workflows/label.yml index 8881051..a3ab94f 100644 --- a/.github/workflows/label.yml +++ b/.github/workflows/label.yml @@ -16,6 +16,6 @@ jobs: pull-requests: write steps: - - uses: actions/labeler@master + - uses: actions/labeler@v4 with: repo-token: '${{ secrets.GITHUB_TOKEN }}' diff --git a/README.md b/README.md index 4be23fd..a4e6413 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,13 @@ Extended themes for VChart [![npm Version](https://img.shields.io/npm/v/@visactor/vchart-semi-theme.svg)](https://www.npmjs.com/package/@visactor/vchart-semi-theme) [![npm Download](https://img.shields.io/npm/dm/@visactor/vchart-semi-theme.svg)](https://www.npmjs.com/package/@visactor/vchart-semi-theme) -[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/visactor/vchart-theme/blob/main/LICENSE) +[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/visactor/vchart-semi-theme/blob/main/LICENSE) + +[@visactor/vchart-arco-theme](https://github.com/VisActor/vchart-arco-theme/tree/main/packages/vchart-arco-theme) + +[![npm Version](https://img.shields.io/npm/v/@visactor/vchart-arco-theme.svg)](https://www.npmjs.com/package/@visactor/vchart-arco-theme) +[![npm Download](https://img.shields.io/npm/dm/@visactor/vchart-arco-theme.svg)](https://www.npmjs.com/package/@visactor/vchart-arco-theme) +[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/visactor/vchart-arco-theme/blob/main/LICENSE) diff --git a/README.zh-CN.md b/README.zh-CN.md index 2f5b47f..4c13dee 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -25,7 +25,13 @@ VChart 的扩展主题。 [![npm Version](https://img.shields.io/npm/v/@visactor/vchart-semi-theme.svg)](https://www.npmjs.com/package/@visactor/vchart-semi-theme) [![npm Download](https://img.shields.io/npm/dm/@visactor/vchart-semi-theme.svg)](https://www.npmjs.com/package/@visactor/vchart-semi-theme) -[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/visactor/vchart-theme/blob/main/LICENSE) +[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/visactor/vchart-semi-theme/blob/main/LICENSE) + +[@visactor/vchart-arco-theme](https://github.com/VisActor/vchart-arco-theme/tree/main/packages/vchart-arco-theme) + +[![npm Version](https://img.shields.io/npm/v/@visactor/vchart-arco-theme.svg)](https://www.npmjs.com/package/@visactor/vchart-arco-theme) +[![npm Download](https://img.shields.io/npm/dm/@visactor/vchart-arco-theme.svg)](https://www.npmjs.com/package/@visactor/vchart-arco-theme) +[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/visactor/vchart-arco-theme/blob/main/LICENSE) @@ -53,10 +59,10 @@ VChart 的扩展主题。 [npm package](https://www.npmjs.com/package/@visactor/vchart-theme) ```bash -// npm +# npm npm install @visactor/vchart-theme -// yarn +# yarn yarn add @visactor/vchart-theme ``` diff --git a/common/config/rush/command-line.json b/common/config/rush/command-line.json index 1833856..d938d2f 100644 --- a/common/config/rush/command-line.json +++ b/common/config/rush/command-line.json @@ -102,6 +102,15 @@ "shellCommand": "rush run -p @visactor/vchart-semi-theme -s start" }, + { + "commandKind": "global", + + "name": "arco", + "summary": "Start the development server", + "description": "Run this command to start vchart-arco-theme development server", + + "shellCommand": "rush run -p @visactor/vchart-arco-theme -s start" + }, { "name": "change-all", "commandKind": "global", diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index 7dee8f0..9a6deb3 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -5,6 +5,85 @@ importers: .: specifiers: {} + ../../packages/vchart-arco-theme: + specifiers: + '@babel/runtime': latest + '@douyinfe/semi-icons': latest + '@douyinfe/semi-icons-lab': latest + '@douyinfe/semi-ui': ^2.46.1 + '@esbuild-plugins/node-globals-polyfill': 0.1.1 + '@esbuild-plugins/node-modules-polyfill': 0.1.4 + '@internal/bundler': workspace:* + '@internal/eslint-config': workspace:* + '@internal/jest-config': workspace:* + '@internal/ts-config': workspace:* + '@jest/globals': ~29.5.0 + '@rushstack/eslint-patch': ~1.1.4 + '@types/jest': ~29.5.0 + '@types/node': '*' + '@types/offscreencanvas': 2019.6.4 + '@visactor/react-vchart': ~1.7.2 + '@visactor/vchart': ~1.7.2 + '@visactor/vchart-theme-utils': workspace:1.7.2 + '@vitejs/plugin-react': ^4.1.1 + '@vitejs/plugin-react-swc': ^3.4.1 + eslint: ~8.18.0 + husky: 7.0.4 + jest: ~29.5.0 + lint-staged: 12.3.7 + magic-string: ^0.25.7 + prettier: 2.6.1 + react: ^18.0.0 + react-device-detect: ^2.2.2 + react-dom: ^18.0.0 + ts-jest: ~29.1.0 + ts-loader: 8.0.2 + ts-node: 10.9.0 + tslib: 2.3.1 + tslint: 5.12.1 + typescript: 4.9.5 + vite: ^4.5.0 + vite-plugin-svgr: ^4.1.0 + dependencies: + '@visactor/vchart-theme-utils': link:../vchart-theme-utils + devDependencies: + '@babel/runtime': 7.23.8 + '@douyinfe/semi-icons': 2.50.1_react@18.2.0 + '@douyinfe/semi-icons-lab': 2.50.1_biqbaboplfbrettd7655fr4n2y + '@douyinfe/semi-ui': 2.47.1_biqbaboplfbrettd7655fr4n2y + '@esbuild-plugins/node-globals-polyfill': 0.1.1 + '@esbuild-plugins/node-modules-polyfill': 0.1.4 + '@internal/bundler': link:../../tools/bundler + '@internal/eslint-config': link:../../share/eslint-config + '@internal/jest-config': link:../../share/jest-config + '@internal/ts-config': link:../../share/ts-config + '@jest/globals': 29.5.0 + '@rushstack/eslint-patch': 1.1.4 + '@types/jest': 29.5.10 + '@types/node': 20.10.1 + '@types/offscreencanvas': 2019.6.4 + '@visactor/react-vchart': 1.7.2_biqbaboplfbrettd7655fr4n2y + '@visactor/vchart': 1.7.2 + '@vitejs/plugin-react': 4.2.0_vite@4.5.0 + '@vitejs/plugin-react-swc': 3.5.0_vite@4.5.0 + eslint: 8.18.0 + husky: 7.0.4 + jest: 29.5.0_6yoywmac55il2i4kkpbisa4jai + lint-staged: 12.3.7 + magic-string: 0.25.9 + prettier: 2.6.1 + react: 18.2.0 + react-device-detect: 2.2.3_biqbaboplfbrettd7655fr4n2y + react-dom: 18.2.0_react@18.2.0 + ts-jest: 29.1.1_doipufordlnvh5g4adbwayvyvy + ts-loader: 8.0.2_typescript@4.9.5 + ts-node: 10.9.0_rl57fpuzwlxwxrsbfrpy2clfky + tslib: 2.3.1 + tslint: 5.12.1_typescript@4.9.5 + typescript: 4.9.5 + vite: 4.5.0_@types+node@20.10.1 + vite-plugin-svgr: 4.2.0_sberx2hmayz3ondyqd3rv3bd2m + ../../packages/vchart-semi-theme: specifiers: '@babel/runtime': latest @@ -24,6 +103,7 @@ importers: '@types/offscreencanvas': 2019.6.4 '@visactor/react-vchart': ~1.7.2 '@visactor/vchart': ~1.7.2 + '@visactor/vchart-theme-utils': workspace:1.7.2 '@vitejs/plugin-react': ^4.1.1 '@vitejs/plugin-react-swc': ^3.4.1 eslint: ~8.18.0 @@ -43,10 +123,12 @@ importers: typescript: 4.9.5 vite: ^4.5.0 vite-plugin-svgr: ^4.1.0 + dependencies: + '@visactor/vchart-theme-utils': link:../vchart-theme-utils devDependencies: - '@babel/runtime': 7.23.5 - '@douyinfe/semi-icons': 2.47.1_react@18.2.0 - '@douyinfe/semi-icons-lab': 2.47.1_biqbaboplfbrettd7655fr4n2y + '@babel/runtime': 7.23.8 + '@douyinfe/semi-icons': 2.50.1_react@18.2.0 + '@douyinfe/semi-icons-lab': 2.50.1_biqbaboplfbrettd7655fr4n2y '@douyinfe/semi-ui': 2.47.1_biqbaboplfbrettd7655fr4n2y '@esbuild-plugins/node-globals-polyfill': 0.1.1 '@esbuild-plugins/node-modules-polyfill': 0.1.4 @@ -137,6 +219,62 @@ importers: typescript: 4.9.5 vite: 4.5.0_@types+node@20.10.1 + ../../packages/vchart-theme-utils: + specifiers: + '@internal/bundler': workspace:* + '@internal/eslint-config': workspace:* + '@internal/jest-config': workspace:* + '@internal/ts-config': workspace:* + '@jest/globals': ~29.5.0 + '@rushstack/eslint-patch': ~1.1.4 + '@types/jest': ~29.5.0 + '@types/node': '*' + '@types/offscreencanvas': 2019.6.4 + '@visactor/vchart': ~1.7.2 + '@visactor/vchart-types': ~1.7.2 + eslint: ~8.18.0 + husky: 7.0.4 + jest: ~29.5.0 + lint-staged: 12.3.7 + magic-string: ^0.25.7 + prettier: 2.6.1 + react: ^18.0.0 + react-device-detect: ^2.2.2 + ts-jest: ~29.1.0 + ts-loader: 8.0.2 + ts-node: 10.9.0 + tslib: 2.3.1 + tslint: 5.12.1 + typescript: 4.9.5 + vite: ^4.5.0 + devDependencies: + '@internal/bundler': link:../../tools/bundler + '@internal/eslint-config': link:../../share/eslint-config + '@internal/jest-config': link:../../share/jest-config + '@internal/ts-config': link:../../share/ts-config + '@jest/globals': 29.5.0 + '@rushstack/eslint-patch': 1.1.4 + '@types/jest': 29.5.10 + '@types/node': 20.10.1 + '@types/offscreencanvas': 2019.6.4 + '@visactor/vchart': 1.7.2 + '@visactor/vchart-types': 1.7.2 + eslint: 8.18.0 + husky: 7.0.4 + jest: 29.5.0_6yoywmac55il2i4kkpbisa4jai + lint-staged: 12.3.7 + magic-string: 0.25.9 + prettier: 2.6.1 + react: 18.2.0 + react-device-detect: 2.2.3_react@18.2.0 + ts-jest: 29.1.1_doipufordlnvh5g4adbwayvyvy + ts-loader: 8.0.2_typescript@4.9.5 + ts-node: 10.9.0_rl57fpuzwlxwxrsbfrpy2clfky + tslib: 2.3.1 + tslint: 5.12.1_typescript@4.9.5 + typescript: 4.9.5 + vite: 4.5.0_@types+node@20.10.1 + ../../share/eslint-config: specifiers: '@typescript-eslint/eslint-plugin': 5.30.0 @@ -1595,8 +1733,8 @@ packages: resolution: {integrity: sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==} dev: false - /@babel/runtime/7.23.5: - resolution: {integrity: sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==} + /@babel/runtime/7.23.8: + resolution: {integrity: sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==} engines: {node: '>=6.9.0'} dependencies: regenerator-runtime: 0.14.0 @@ -1717,8 +1855,8 @@ packages: scroll-into-view-if-needed: 2.2.31 dev: true - /@douyinfe/semi-icons-lab/2.47.1_biqbaboplfbrettd7655fr4n2y: - resolution: {integrity: sha512-UYAtDQjdHk3ymLAPmiHjk+XGLn6ppghpzRnMMxq7TUucJw8enysOM6lvr6bH34VNk0SKrzHBQyKgG7rhQL3gmw==} + /@douyinfe/semi-icons-lab/2.50.1_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-YT7sZhFGI2cWbLRFRUSaiO/xCDEVjCt33tjRLypj1Rr8OEd87/xpzYgSTDsTW3ebMUmfCj5SKHKy71+0Sghj/g==} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -1736,6 +1874,15 @@ packages: react: 18.2.0 dev: true + /@douyinfe/semi-icons/2.50.1_react@18.2.0: + resolution: {integrity: sha512-gf4nFrBaUJHx57z4yWEASzL39NrmfNA8HbFPvtTzOC6tqtGUcwhBBw9MyvfwTtRerVfRh1xzki+VGjkfrx8kMQ==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + dependencies: + classnames: 2.3.2 + react: 18.2.0 + dev: true + /@douyinfe/semi-illustrations/2.47.1_react@18.2.0: resolution: {integrity: sha512-ouhdAHzcBEW5kv5EFvHQsITSHIxlL0mnCMz63TVIywGA6QnCcxyMG6er0rlChAnu76FhlERR/Ys5Dlf2e5VhSQ==} peerDependencies: @@ -4736,7 +4883,7 @@ packages: resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==} engines: {node: '>=0.11'} dependencies: - '@babel/runtime': 7.23.5 + '@babel/runtime': 7.23.8 dev: true /date-time/3.1.0: @@ -8332,7 +8479,7 @@ packages: react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 dependencies: - '@babel/runtime': 7.23.5 + '@babel/runtime': 7.23.8 memoize-one: 5.2.1 react: 18.2.0 react-dom: 18.2.0_react@18.2.0 @@ -8430,7 +8577,7 @@ packages: /regenerator-transform/0.15.2: resolution: {integrity: sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==} dependencies: - '@babel/runtime': 7.23.5 + '@babel/runtime': 7.23.8 dev: false /regex-not/1.0.2: diff --git a/common/scripts/version-policies.js b/common/scripts/version-policies.js index 34d5bcc..c9aa97c 100644 --- a/common/scripts/version-policies.js +++ b/common/scripts/version-policies.js @@ -45,7 +45,9 @@ const writeNextBump = ( const readNextBumpFromChanges = () => { const changeRoots = [ path.join(__dirname, '../changes/@visactor/vchart-theme'), - path.join(__dirname, '../changes/@visactor/vchart-semi-theme') + path.join(__dirname, '../changes/@visactor/vchart-theme-utils'), + path.join(__dirname, '../changes/@visactor/vchart-semi-theme'), + path.join(__dirname, '../changes/@visactor/vchart-arco-theme') ]; const changeType = []; diff --git a/packages/vchart-arco-theme/.eslintignore b/packages/vchart-arco-theme/.eslintignore new file mode 100644 index 0000000..f9724a9 --- /dev/null +++ b/packages/vchart-arco-theme/.eslintignore @@ -0,0 +1,9 @@ +dist +build +esm +cjs +node_modules +coverage + +# ignore big data files +__tests__/data/* diff --git a/packages/vchart-arco-theme/.eslintrc.js b/packages/vchart-arco-theme/.eslintrc.js new file mode 100644 index 0000000..3a552f1 --- /dev/null +++ b/packages/vchart-arco-theme/.eslintrc.js @@ -0,0 +1,26 @@ +require('@rushstack/eslint-patch/modern-module-resolution'); + +module.exports = { + extends: ['@internal/eslint-config/profile/lib'], + overrides: [ + { + files: ['**/__tests__/**', '**/*.test.ts'], + // 测试文件允许以下规则 + rules: { + '@typescript-eslint/no-empty-function': 'off', + 'no-console': 'off', + 'dot-notation': 'off', + 'promise/catch-or-return': 'off' + } + } + ], + parserOptions: { + tsconfigRootDir: __dirname, + project: './tsconfig.eslint.json', + sourceType: 'module', + ecmaFeatures: { + jsx: true // 让eslint支持jsx语法 + } + }, + ignorePatterns: ['scripts/**', 'bundler.config.js'] +}; diff --git a/packages/vchart-arco-theme/README.md b/packages/vchart-arco-theme/README.md new file mode 100644 index 0000000..1bea933 --- /dev/null +++ b/packages/vchart-arco-theme/README.md @@ -0,0 +1,52 @@ +# @visactor/vchart-theme + +## Description + +The extension themes for [VChart](https://github.com/VisActor/VChart). + +The list of themes included here is as follows, with links to the theme JSON files: + + + +- [semiDesignLight](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-semi-theme/public/semiDesignLight.json) Semi Design - light +- [semiDesignDark](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-semi-theme/public/semiDesignDark.json) Semi Design - dark + + + +## Usage + +Import the full theme map and register them in sequence: + +```typescript +import { allThemeMap } from '@visactor/vchart-theme'; +import VChart from '@visactor/vchart'; + +// register themes +allThemeMap.forEach((theme, name) => { + VChart.ThemeManager.registerTheme(name, theme); +}); + +// apply a theme +VChart.ThemeManager.setCurrentTheme('vScreenVolcanoBlue'); +``` + +If you only use a specific theme, you can also obtain the specific theme JSON from this package and place it under your project for reference: + +```typescript +import vScreenVolcanoBlue from 'xxx'; // your json path +import VChart from '@visactor/vchart'; + +// register the theme +VChart.ThemeManager.registerTheme('vScreenVolcanoBlue', vScreenVolcanoBlue); + +// apply the theme +VChart.ThemeManager.setCurrentTheme('vScreenVolcanoBlue'); +``` + +## Debug + +Run the following command from any location in the project to start the dev server: + +``` +rush theme +``` diff --git a/packages/vchart-arco-theme/__tests__/index.test.ts b/packages/vchart-arco-theme/__tests__/index.test.ts new file mode 100644 index 0000000..e014e87 --- /dev/null +++ b/packages/vchart-arco-theme/__tests__/index.test.ts @@ -0,0 +1,6 @@ +describe('vchart-arco-theme', () => { + it('for test.', () => { + const a = 1; + expect(a).toBe(1); + }); +}); diff --git a/packages/vchart-arco-theme/__tests__/runtime/browser/index.html b/packages/vchart-arco-theme/__tests__/runtime/browser/index.html new file mode 100644 index 0000000..d0c3420 --- /dev/null +++ b/packages/vchart-arco-theme/__tests__/runtime/browser/index.html @@ -0,0 +1,23 @@ + + + + + + + React App + + +
+ + + + diff --git a/packages/vchart-arco-theme/__tests__/runtime/browser/src/chart-list.ts b/packages/vchart-arco-theme/__tests__/runtime/browser/src/chart-list.ts new file mode 100644 index 0000000..be2567d --- /dev/null +++ b/packages/vchart-arco-theme/__tests__/runtime/browser/src/chart-list.ts @@ -0,0 +1,30 @@ +import type { IChartInfo } from '../../../../../vchart-theme/__tests__/runtime/browser/test-page/charts/interface'; +import area from '../../../../../vchart-theme/__tests__/runtime/browser/test-page/charts/area'; +import bar from '../../../../../vchart-theme/__tests__/runtime/browser/test-page/charts/bar'; +import column from '../../../../../vchart-theme/__tests__/runtime/browser/test-page/charts/column'; +import pie from '../../../../../vchart-theme/__tests__/runtime/browser/test-page/charts/pie'; +import rose from '../../../../../vchart-theme/__tests__/runtime/browser/test-page/charts/rose'; +import radar from '../../../../../vchart-theme/__tests__/runtime/browser/test-page/charts/radar'; +import scatter from '../../../../../vchart-theme/__tests__/runtime/browser/test-page/charts/scatter'; +import heatmap from '../../../../../vchart-theme/__tests__/runtime/browser/test-page/charts/heatmap'; +import markArea from '../../../../../vchart-theme/__tests__/runtime/browser/test-page/charts/mark-area'; +import markLine from '../../../../../vchart-theme/__tests__/runtime/browser/test-page/charts/mark-line'; +import markPoint from '../../../../../vchart-theme/__tests__/runtime/browser/test-page/charts/mark-point'; +import gauge from '../../../../../vchart-theme/__tests__/runtime/browser/test-page/charts/gauge'; +import funnel from '../../../../../vchart-theme/__tests__/runtime/browser/test-page/charts/funnel'; + +export const charts: IChartInfo[] = [ + area, + column, + pie, + bar, + rose, + radar, + scatter, + //heatmap, + gauge, + funnel, + markArea, + markLine, + markPoint +]; diff --git a/packages/vchart-arco-theme/__tests__/runtime/browser/src/charts.jsx b/packages/vchart-arco-theme/__tests__/runtime/browser/src/charts.jsx new file mode 100644 index 0000000..8f1a1e6 --- /dev/null +++ b/packages/vchart-arco-theme/__tests__/runtime/browser/src/charts.jsx @@ -0,0 +1,43 @@ +import React from 'react'; +import { isMobile } from 'react-device-detect'; +import { charts } from './chart-list'; +import { VChart } from '@visactor/react-vchart'; + +const chartHeight = 400; + +const Charts = () => { + return ( +
+ {charts.map((chart, i) => { + return ( +
+
+ +
+
+ ); + })} +
+ ); +}; + +export default Charts; diff --git a/packages/vchart-arco-theme/__tests__/runtime/browser/src/createServiceWorker.js b/packages/vchart-arco-theme/__tests__/runtime/browser/src/createServiceWorker.js new file mode 100644 index 0000000..5445ef5 --- /dev/null +++ b/packages/vchart-arco-theme/__tests__/runtime/browser/src/createServiceWorker.js @@ -0,0 +1,52 @@ +// In production, we register a service worker to serve assets from local cache. + +// This lets the app load faster on subsequent visits in production, and gives +// it offline capabilities. However, it also means that developers (and users) +// will only see deployed updates on the "N+1" visit to a page, since previously +// cached resources are updated in the background. + +// To learn more about the benefits of this model, read https://goo.gl/KwvDNy. +// This link also includes instructions on opting out of this behavior. + +export default function register() { + if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { + window.addEventListener('load', () => { + const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; + navigator.serviceWorker + .register(swUrl) + .then(registration => { + // eslint-disable-next-line no-param-reassign + registration.onupdatefound = () => { + const installingWorker = registration.installing; + installingWorker.onstatechange = () => { + if (installingWorker.state === 'installed') { + if (navigator.serviceWorker.controller) { + // At this point, the old content will have been purged and + // the fresh content will have been added to the cache. + // It's the perfect time to display a "New content is + // available; please refresh." message in your web app. + console.log('New content is available; please refresh.'); // eslint-disable-line no-console + } else { + // At this point, everything has been precached. + // It's the perfect time to display a + // "Content is cached for offline use." message. + console.log('Content is cached for offline use.'); // eslint-disable-line no-console + } + } + }; + }; + }) + .catch(error => { + console.error('Error during service worker registration:', error); + }); + }); + } +} + +export function unregister() { + if ('serviceWorker' in navigator) { + navigator.serviceWorker.ready.then(registration => { + registration.unregister(); + }); + } +} diff --git a/packages/vchart-arco-theme/__tests__/runtime/browser/src/frame.jsx b/packages/vchart-arco-theme/__tests__/runtime/browser/src/frame.jsx new file mode 100644 index 0000000..80ded80 --- /dev/null +++ b/packages/vchart-arco-theme/__tests__/runtime/browser/src/frame.jsx @@ -0,0 +1,148 @@ +import React from 'react'; +import { Nav, Avatar, Button } from '@douyinfe/semi-ui'; +import { IconSemiLogo, IconFeishuLogo, IconHelpCircle, IconBell } from '@douyinfe/semi-icons'; +import { + IconIntro, + IconHeart, + IconCalendar, + IconCheckbox, + IconRadio, + IconList, + IconToast +} from '@douyinfe/semi-icons-lab'; +import styles from './index.module.scss'; +import Charts from './charts.jsx'; + +const Frame = () => { + return ( +
+
+ ), + text: 'Semi Templates' + }} + footer={ +
+ + + + + 示例 + +
+ } + className={styles.nav} + > + + + +
+ +
+

Reporting

+
+ +
+
+
+ + ); +}; + +export default Frame; diff --git a/packages/vchart-arco-theme/__tests__/runtime/browser/src/index.jsx b/packages/vchart-arco-theme/__tests__/runtime/browser/src/index.jsx new file mode 100644 index 0000000..dac6ab6 --- /dev/null +++ b/packages/vchart-arco-theme/__tests__/runtime/browser/src/index.jsx @@ -0,0 +1,33 @@ +import React from 'react'; +import { createRoot } from 'react-dom/client'; +import Frame from './frame.jsx'; +import './normalize.css'; +import { initVChartSemiTheme } from '../../../../src'; +import VChart from '@visactor/vchart'; + +initVChartSemiTheme({ + isWatchingThemeSwitch: true +}); + +// 匹配系统亮暗模式 +const mql = window.matchMedia('(prefers-color-scheme: dark)'); +function matchMode(e) { + const body = document.body; + if (e.matches) { + if (!body.hasAttribute('theme-mode')) { + body.setAttribute('theme-mode', 'dark'); + } + } else { + if (body.hasAttribute('theme-mode')) { + body.removeAttribute('theme-mode'); + } + } +} +matchMode(mql); +mql.addListener(matchMode); + +const dom = document.querySelector('#root'); +const root = createRoot(dom); +root.render(); + +window['VChart'] = VChart; diff --git a/packages/vchart-arco-theme/__tests__/runtime/browser/src/index.module.scss b/packages/vchart-arco-theme/__tests__/runtime/browser/src/index.module.scss new file mode 100644 index 0000000..7397e81 --- /dev/null +++ b/packages/vchart-arco-theme/__tests__/runtime/browser/src/index.module.scss @@ -0,0 +1,130 @@ +.rootSidenav { + align-items: flex-start; + background: var(--semi-color-bg-0); + flex-direction: column; + overflow: hidden; + row-gap: 0; + display: flex; + color: var(--semi-color-text-0); + font-family: Inter; + font-size: 20px; + font-weight: 600; + letter-spacing: -0.6px; + line-height: 28px; + text-align: left; + + .nav { + align-self: stretch; + height: 60px; + + .navigationHeaderLogo { + align-items: flex-start; + column-gap: 0; + display: inline-flex; + flex-shrink: 0; + + .semiIconsSemiLogo { + font-size: 36px; + color: var(--semi-color-text-0); + } + } + + .dIV { + align-items: center; + column-gap: 16px; + display: inline-flex; + flex-shrink: 0; + + .semiIconsFeishuLogo, + .semiIconsHelpCircle, + .semiIconsBell { + font-size: 20px; + color: var(--semi-color-text-2); + } + + .avatar { + height: 32px; + width: 32px; + } + } + } + + .main { + align-items: flex-start; + column-gap: 0; + display: flex; + flex-shrink: 0; + align-self: stretch; + + .left { + height: calc(100vh - 60px); + + .navItem, + .navItem5 { + width: 223px; + + .iconIntro, + .iconRadio { + height: 20px; + position: relative; + width: 20px; + } + } + + .navItem1, + .navItem2, + .navItem3, + .navItem4, + .navItem6, + .navItem7 { + width: 223px; + + .iconHeart, + .iconCalendar, + .iconCheckbox, + .iconCalendar, + .iconList, + .iconToast { + height: 20px; + width: 20px; + } + } + } + + .right { + height: calc(100vh - 60px); + overflow-y: auto; + align-items: flex-start; + display: flex; + flex-basis: 0; + flex-direction: column; + padding: 40px; + row-gap: 24px; + flex-grow: 1; + + .item { + min-width: 90px; + vertical-align: middle; + flex-shrink: 0; + } + + .frame1321317607 { + align-items: center; + background: var(--semi-color-fill-0); + border-radius: 12px; + display: flex; + flex-direction: row; + flex-shrink: 0; + color: var(--semi-color-disabled-text); + font-size: 14px; + letter-spacing: -0.14px; + line-height: 20px; + + .yourContentHere { + vertical-align: middle; + min-width: 123px; + } + } + } + } +} diff --git a/packages/vchart-arco-theme/__tests__/runtime/browser/src/normalize.css b/packages/vchart-arco-theme/__tests__/runtime/browser/src/normalize.css new file mode 100644 index 0000000..01a183b --- /dev/null +++ b/packages/vchart-arco-theme/__tests__/runtime/browser/src/normalize.css @@ -0,0 +1,128 @@ +* { + box-sizing: border-box; +} + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/packages/vchart-arco-theme/__tests__/runtime/browser/tsconfig.json b/packages/vchart-arco-theme/__tests__/runtime/browser/tsconfig.json new file mode 100644 index 0000000..5f84ead --- /dev/null +++ b/packages/vchart-arco-theme/__tests__/runtime/browser/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "target": "ESNext", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": false, + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "noFallthroughCasesInSwitch": true, + "jsx": "react-jsx", + "types": ["vite/client", "vite-plugin-svgr/client", "node"] + }, + "exclude": ["node_modules"], + "ts-node": { + // Tell ts-node CLI to install the --loader automatically, explained below + "esm": true + } +} diff --git a/packages/vchart-arco-theme/__tests__/runtime/browser/vite.config.js b/packages/vchart-arco-theme/__tests__/runtime/browser/vite.config.js new file mode 100644 index 0000000..eb5ab37 --- /dev/null +++ b/packages/vchart-arco-theme/__tests__/runtime/browser/vite.config.js @@ -0,0 +1,16 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react-swc'; +import svgr from 'vite-plugin-svgr'; + +export default defineConfig({ + server: { + host: '0.0.0.0', + https: !!process.env.HTTPS, + open: true + }, + define: { + __DEV__: true, + __VERSION__: JSON.stringify(require('../../../package.json').version) + }, + plugins: [react(), svgr()] +}); diff --git a/packages/vchart-arco-theme/bundler.config.js b/packages/vchart-arco-theme/bundler.config.js new file mode 100644 index 0000000..05c40fd --- /dev/null +++ b/packages/vchart-arco-theme/bundler.config.js @@ -0,0 +1,13 @@ +/** + * @type {Partial} + */ +module.exports = { + formats: ['cjs', 'es', 'umd'], + outputDir: { + es: 'esm', + cjs: 'cjs', + umd: 'build' + }, + name: 'vchart-arco-theme', + umdOutputFilename: 'index' +}; diff --git a/packages/vchart-arco-theme/jest.config.js b/packages/vchart-arco-theme/jest.config.js new file mode 100644 index 0000000..47e294b --- /dev/null +++ b/packages/vchart-arco-theme/jest.config.js @@ -0,0 +1,9 @@ +const path = require('path'); +const baseJestConfig = require('@internal/jest-config/jest.base'); + +module.exports = { + ...baseJestConfig, + moduleNameMapper: { + ...baseJestConfig.moduleNameMapper + } +}; diff --git a/packages/vchart-arco-theme/package.json b/packages/vchart-arco-theme/package.json new file mode 100644 index 0000000..da86022 --- /dev/null +++ b/packages/vchart-arco-theme/package.json @@ -0,0 +1,87 @@ +{ + "name": "@visactor/vchart-arco-theme", + "version": "1.7.2", + "description": "Extended themes for VChart", + "sideEffects": false, + "main": "cjs/index.js", + "module": "esm/index.js", + "types": "esm/index.d.ts", + "files": [ + "cjs", + "esm", + "build", + "public" + ], + "scripts": { + "compile": "tsc --noEmit", + "eslint": "eslint --debug --fix src/", + "build": "bundle && npm run export", + "export": "ts-node scripts/export-theme.ts", + "dev": "bundle --clean -f es -w", + "start": "vite serve __tests__/runtime/browser", + "test": "jest", + "test-cov": "jest -w 16 --coverage", + "test-live": "npm run test-watch __tests__/unit/", + "test-watch": "DEBUG_MODE=1 jest --watch" + }, + "peerDependencies": { + "@visactor/vchart": "~1.7.2", + "@douyinfe/semi-ui": "^2.46.1" + }, + "dependencies": { + "@visactor/vchart-theme-utils": "workspace:1.7.2" + }, + "devDependencies": { + "@esbuild-plugins/node-globals-polyfill": "0.1.1", + "@esbuild-plugins/node-modules-polyfill": "0.1.4", + "@internal/bundler": "workspace:*", + "@internal/eslint-config": "workspace:*", + "@internal/ts-config": "workspace:*", + "@internal/jest-config": "workspace:*", + "jest": "~29.5.0", + "@jest/globals": "~29.5.0", + "ts-jest": "~29.1.0", + "@types/jest": "~29.5.0", + "@rushstack/eslint-patch": "~1.1.4", + "eslint": "~8.18.0", + "typescript": "4.9.5", + "@types/node": "*", + "@types/offscreencanvas": "2019.6.4", + "husky": "7.0.4", + "lint-staged": "12.3.7", + "magic-string": "^0.25.7", + "prettier": "2.6.1", + "react": "^18.0.0", + "react-dom": "^18.0.0", + "react-device-detect": "^2.2.2", + "ts-loader": "8.0.2", + "ts-node": "10.9.0", + "tslib": "2.3.1", + "tslint": "5.12.1", + "@vitejs/plugin-react": "^4.1.1", + "@vitejs/plugin-react-swc": "^3.4.1", + "vite": "^4.5.0", + "vite-plugin-svgr": "^4.1.0", + "@babel/runtime": "latest", + "@visactor/vchart": "~1.7.2", + "@visactor/react-vchart": "~1.7.2", + "@douyinfe/semi-ui": "^2.46.1", + "@douyinfe/semi-icons": "latest", + "@douyinfe/semi-icons-lab": "latest" + }, + "publishConfig": { + "access": "public" + }, + "homepage": "https://www.visactor.io", + "bugs": "https://github.com/VisActor/vchart-arco-theme/issues", + "repository": { + "type": "git", + "url": "https://github.com/VisActor/vchart-arco-theme.git", + "directory": "packages/vchart-arco-theme" + }, + "author": { + "name": "VisActor", + "url": "https://www.visactor.io/" + }, + "license": "MIT" +} diff --git a/packages/vchart-arco-theme/public/semiDesignDark.json b/packages/vchart-arco-theme/public/semiDesignDark.json new file mode 100644 index 0000000..50b2875 --- /dev/null +++ b/packages/vchart-arco-theme/public/semiDesignDark.json @@ -0,0 +1 @@ +{"colorScheme":{"default":{"dataScheme":[{"maxDomainLength":10,"scheme":["#1664FF","#1AC6FF","#FF8A00","#3CC780","#7442D4","#FFC400","#304D77","#B48DEB","#009488","#FF7DDA"]},{"scheme":["#1664FF","#B2CFFF","#1AC6FF","#94EFFF","#FF8A00","#FFCE7A","#3CC780","#B9EDCD","#7442D4","#DDC5FA","#FFC400","#FAE878","#304D77","#8B959E","#B48DEB","#EFE3FF","#009488","#59BAA8","#FF7DDA","#FFCFEE"]}],"palette":{"backgroundColor":"#16161a","borderColor":"rgba(255,255,255,0.08)","shadowColor":"rgba(0,0,0,0.25)","hoverBackgroundColor":"rgba(255,255,255,0.12)","sliderRailColor":"rgba(255,255,255,0.12)","sliderHandleColor":"#e4e7f5","sliderTrackColor":"rgba(84,169,255,1)","popupBackgroundColor":"#43444a","primaryFontColor":"rgba(249,249,249,1)","secondaryFontColor":"rgba(249,249,249,0.8)","tertiaryFontColor":"rgba(249,249,249,0.6)","axisLabelFontColor":"rgba(249,249,249,0.6)","disableFontColor":"rgba(249,249,249,0.35)","axisMarkerFontColor":"#16161a","axisGridColor":"rgba(255,255,255,0.08)","axisDomainColor":"rgba(255,255,255,0.15)","dataZoomHandleStrokeColor":"rgba(46,50,56,0.13)","dataZoomChartColor":"rgba(255,255,255,0.16)","playerControllerColor":"rgba(84,169,255,1)","scrollBarSliderColor":"rgba(0,0,0,0.3)","axisMarkerBackgroundColor":"rgba(249,249,249,1)","markLabelBackgroundColor":"rgba(255,255,255,0.08)","markLineStrokeColor":"rgba(249,249,249,0.8)","dangerColor":"rgba(252,114,90,1)","warningColor":"rgba(255,174,67,1)","successColor":"rgba(93,194,100,1)","infoColor":"rgba(84,169,255,1)"}}},"series":{"scatter":{"point":{"style":{"size":8,"stroke":{"type":"palette","key":"backgroundColor"},"lineWidth":0,"fillOpacity":0.8,"symbolType":"circle"}},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"lineWidth":2,"stroke":{"type":"palette","key":"backgroundColor"}},"visible":false,"offset":5,"position":"top"}},"line":{"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"lineWidth":2,"stroke":{"type":"palette","key":"backgroundColor"}},"visible":false,"position":"top","offset":5},"point":{"style":{"size":8,"stroke":{"type":"palette","key":"backgroundColor"},"lineWidth":1,"fillOpacity":1,"symbolType":"circle"}},"line":{"style":{"lineWidth":2,"lineCap":"round","lineJoin":"round"}}},"area":{"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"stroke":{"type":"palette","key":"backgroundColor"},"lineWidth":2},"visible":false,"offset":5,"position":"top"},"point":{"style":{"size":8,"stroke":{"type":"palette","key":"backgroundColor"},"lineWidth":1,"fillOpacity":1,"symbolType":"circle"}},"line":{"style":{"lineWidth":2,"lineCap":"round","lineJoin":"round"}},"area":{"style":{"fillOpacity":0.2}}},"bar":{"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"lineWidth":2,"stroke":{"type":"palette","key":"backgroundColor"}},"visible":false,"position":"outside","offset":5},"bar":{},"barBackground":{"visible":false,"style":{"fill":{"type":"palette","key":"primaryFontColor","a":0.06}}}},"bar3d":{"bar3d":{"style":{"length":3}},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"offset":12,"position":"outside"},"visible":false}},"pie":{"outerRadius":0.6,"pie":{"style":{"fillOpacity":1}},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"stroke":{"type":"palette","key":"backgroundColor"}},"visible":false,"position":"outside"},"innerLabel":{"style":{"lineWidth":2}},"labelLine":{}},"pie3d":{"outerRadius":0.6,"pie3d":{"style":{"height":10,"fillOpacity":1}},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1},"visible":false,"position":"outside"},"labelLine":{}},"map":{"defaultFillColor":"#f3f3f3","area":{"style":{"fillOpacity":1,"lineWidth":0.5,"strokeOpacity":1,"stroke":"black"}},"label":{"style":{"fontSize":10,"lineHeight":"120%","fontWeight":"normal","fillOpacity":1,"textBaseline":"middle","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"},"stroke":{"type":"palette","key":"backgroundColor"}},"interactive":false}},"radar":{"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"lineWidth":2,"stroke":{"type":"palette","key":"backgroundColor"}},"visible":false,"offset":5},"point":{"style":{"size":8,"stroke":{"type":"palette","key":"backgroundColor"},"lineWidth":1,"fillOpacity":1,"symbolType":"circle"}},"line":{"style":{"lineWidth":2,"lineCap":"round","lineJoin":"round"}},"area":{"style":{"fillOpacity":0.2}}},"dot":{"dot":{"style":{"size":10,"fillOpacity":1}},"symbol":{"style":{"size":10}},"title":{"style":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fillOpacity":1,"textAlign":"left","textBaseline":"middle"}},"subTitle":{"style":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fillOpacity":1,"textAlign":"left","textBaseline":"top"}},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}},"group":{},"grid":{},"gridBackground":{}},"link":{"arrow":{"style":{"size":10}},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}},"group":{},"link":{}},"wordCloud":{"word":{"style":{"fontSize":null,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"textAlign":"center","textBaseline":"alphabetic"},"padding":1},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}},"fillingWord":{"style":{"fontSize":null,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}}},"wordCloud3d":{"word":{"style":{"fontSize":null,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"textAlign":"center","textBaseline":"alphabetic"},"padding":1},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}},"fillingWord":{"style":{"fontSize":null,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}}},"funnel":{"transform":{"style":{"fill":{"type":"palette","key":"axisGridColor"}}},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"fill":"white","textBaseline":"middle","lineWidth":2}},"outerLabel":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"fill":{"type":"palette","key":"secondaryFontColor"}},"line":{"style":{"stroke":{"type":"palette","key":"axisDomainColor"}}}},"transformLabel":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"fill":{"type":"palette","key":"secondaryFontColor"},"textBaseline":"middle"}},"funnel":{},"outerLabelLine":{}},"funnel3d":{"transform3d":{"style":{"fill":"#f5f5f5"}},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"fill":"white","textBaseline":"middle","lineWidth":2}},"outerLabel":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"fill":"#707070"},"line":{"style":{"stroke":{"type":"palette","key":"axisDomainColor"}}}},"transformLabel":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"fill":"#707070","textBaseline":"middle"}},"funnel3d":{"style":{"stroke":false}},"outerLabelLine":{}},"linearProgress":{"bandWidth":30,"progress":{"style":{"fillOpacity":1}},"track":{"style":{"fill":"#E7EBED","fillOpacity":1}},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}},"group":{}},"circularProgress":{"outerRadius":0.8,"innerRadius":0.6,"progress":{"style":{"fillOpacity":1}},"track":{"style":{"fillOpacity":0.2}},"tickMask":{"visible":false,"angle":3,"offsetAngle":0,"forceAlign":true},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}},"group":{}},"waterfall":{"seriesFieldName":{"total":"total","increase":"increase","decrease":"decrease"},"leaderLine":{"style":{"stroke":"black","lineWidth":1,"lineDash":[4,4]}},"stackLabel":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"fill":"black"},"visible":true,"offset":12,"position":"withChange"},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1},"visible":false,"offset":12,"position":"inside"},"bar":{},"barBackground":{"visible":false,"style":{"fill":{"type":"palette","key":"primaryFontColor","a":0.06}}}},"gauge":{"outerRadius":0.8,"innerRadius":0.6,"padAngle":1.146,"segment":{"style":{"fillOpacity":1}},"tickMask":{"visible":false,"angle":3,"offsetAngle":0,"forceAlign":true},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}},"group":{},"track":{}},"gaugePointer":{"pointer":{"type":"path","width":0.4,"height":0.4,"style":{"path":"M-0.020059 -0.978425 C-0.018029 -0.9888053 -0.013378 -1 0 -1 C0.01342 -1 0.01812 -0.989146 0.0201 -0.978425 C0.02161 -0.9702819 0.0692 -0.459505 0.09486 -0.184807 C0.10298 -0.097849 0.1089 -0.034548 0.11047 -0.018339 C0.11698 0.04908 0.07373 0.11111 0.00002 0.11111 C-0.07369 0.11111 -0.117184 0.04991 -0.110423 -0.018339 C-0.103662 -0.086591 -0.022089 -0.9680447 -0.020059 -0.978425Z"}},"pin":{"width":0.025,"height":0.025,"style":{"path":"M1 0 C1 0.55228 0.55228 1 0 1 C-0.552285 1 -1 0.55228 -1 0 C-1 -0.552285 -0.552285 -1 0 -1 C0.55228 -1 1 -0.552285 1 0Z","fill":"#888"}},"pinBackground":{"width":0.06,"height":0.06,"style":{"path":"M1 0 C1 0.55228 0.55228 1 0 1 C-0.552285 1 -1 0.55228 -1 0 C-1 -0.552285 -0.552285 -1 0 -1 C0.55228 -1 1 -0.552285 1 0Z","fill":"#ddd"}},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}}},"treemap":{"gapWidth":1,"nodePadding":[5],"nonLeaf":{"visible":false,"style":{"fillOpacity":0.5}},"label":{"style":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fillOpacity":1,"fill":"white","textBaseline":"middle","textAlign":"center"}},"nonLeafLabel":{"style":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fillOpacity":1,"fill":"black","stroke":{"type":"palette","key":"backgroundColor"},"lineWidth":2,"textBaseline":"middle","textAlign":"center"},"padding":24},"leaf":{}},"sunburst":{"innerRadius":0,"outerRadius":1,"startAngle":-90,"endAngle":270,"gap":0,"labelLayout":{"align":"center","offset":0,"rotate":"radial"},"sunburst":{"style":{"lineWidth":1,"stroke":{"type":"palette","key":"backgroundColor"},"fillOpacity":1,"cursor":"pointer"}},"label":{"style":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fillOpacity":1,"cursor":"pointer","fill":{"type":"palette","key":"primaryFontColor"}},"visible":true}},"rangeColumn":{"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"fill":{"type":"palette","key":"axisMarkerFontColor"}},"visible":false,"offset":5,"position":"inside","minLabel":{"position":"end"},"maxLabel":{"position":"start"}},"bar":{},"barBackground":{"visible":false,"style":{"fill":{"type":"palette","key":"primaryFontColor","a":0.06}}},"minLabel":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}},"maxLabel":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}}},"circlePacking":{"layoutPadding":5,"circlePacking":{"style":{"lineWidth":1,"stroke":{"type":"palette","key":"backgroundColor"},"cursor":"pointer"},"visible":true},"label":{"style":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fillOpacity":1,"cursor":"pointer","fill":"black","stroke":{"type":"palette","key":"backgroundColor"},"lineWidth":2},"visible":true}},"heatmap":{"cell":{"style":{"shape":"square","fillOpacity":1}},"cellBackground":{"visible":false},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}}},"sankey":{"link":{"style":{"fillOpacity":0.15,"round":true}},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}},"node":{}},"rose":{"rose":{"style":{"fillOpacity":1}},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"lineWidth":2,"stroke":{"type":"palette","key":"backgroundColor"},"textAlign":"center","textBaseline":"middle"}}},"boxPlot":{"boxPlot":{"style":{"lineWidth":1}},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}},"outlier":{}},"correlation":{"centerLabel":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"fill":"#fff","text":""},"visible":true,"position":"center"},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"fill":"#000"},"visible":true,"position":"bottom"},"nodePoint":{},"ripplePoint":{},"centerPoint":{}},"geo":{"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}}},"rangeColumn3d":{"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}},"bar3d":{},"minLabel":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}},"maxLabel":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}}},"rangeArea":{"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}},"point":{"style":{"size":8,"stroke":{"type":"palette","key":"backgroundColor"},"lineWidth":1,"fillOpacity":1}},"line":{"style":{"lineWidth":2,"lineCap":"round","lineJoin":"round"}},"area":{"style":{"fillOpacity":0.2}}}},"name":"semiDesignDark","background":{"type":"palette","key":"backgroundColor"},"padding":20,"fontFamily":"Inter,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif","mark":{"text":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}}},"markByName":{"label":{"style":{"fontSize":14,"fontWeight":"normal","fillOpacity":1}},"area":{"style":{"fillOpacity":0.2}},"line":{"style":{"lineWidth":2,"lineCap":"round","lineJoin":"round"}},"point":{"style":{"size":8,"stroke":{"type":"palette","key":"backgroundColor"},"lineWidth":1,"fillOpacity":1}},"word":{"style":{"fontSize":null}},"fillingWord":{"style":{"fontSize":null}},"sunburst":{"style":{"lineWidth":1,"stroke":{"type":"palette","key":"backgroundColor"}}},"circlePacking":{"style":{"lineWidth":1,"stroke":{"type":"palette","key":"backgroundColor"}}},"funnel3d":{"style":{"stroke":false}},"barBackground":{"visible":false,"style":{"fill":{"type":"palette","key":"primaryFontColor","a":0.06}}}},"component":{"discreteLegend":{"orient":"bottom","position":"middle","padding":[16,24],"title":{"visible":false,"padding":0,"textStyle":{"fontSize":12,"lineHeight":"130%","fill":{"type":"palette","key":"primaryFontColor"},"fontWeight":"normal"},"space":12},"item":{"visible":true,"spaceCol":10,"spaceRow":6,"padding":2,"background":{"state":{"selectedHover":{"fill":{"type":"palette","key":"hoverBackgroundColor"}},"unSelectedHover":{"fill":{"type":"palette","key":"hoverBackgroundColor"}}}},"shape":{"space":6,"style":{"lineWidth":0,"fillOpacity":1,"opacity":1},"state":{"unSelected":{"fillOpacity":0.2,"opacity":1}}},"label":{"space":6,"style":{"fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"},"fontSize":12,"lineHeight":"130%","opacity":1},"state":{"unSelected":{"fill":{"type":"palette","key":"disableFontColor"},"opacity":1}}}},"allowAllCanceled":false},"colorLegend":{"horizontal":{"orient":"right","position":"middle","padding":[16,24],"title":{"visible":false,"padding":0,"textStyle":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fill":{"type":"palette","key":"primaryFontColor"}},"space":12},"handler":{"style":{"symbolType":"circle","lineWidth":0,"outerBorder":{"lineWidth":2,"distance":0.8,"stroke":"#ffffff"},"shadowBlur":12,"shadowOffsetX":0,"shadowOffsetY":4,"shadowColor":{"type":"palette","key":"shadowColor"}}},"startText":{"style":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"endText":{"style":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"handlerText":{"style":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"rail":{"width":200,"height":8,"style":{"fill":{"type":"palette","key":"sliderRailColor"}}}},"vertical":{"orient":"right","position":"middle","padding":[16,24],"title":{"visible":false,"padding":0,"textStyle":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fill":{"type":"palette","key":"primaryFontColor"}},"space":12},"handler":{"style":{"symbolType":"circle","lineWidth":0,"outerBorder":{"lineWidth":2,"distance":0.8,"stroke":"#ffffff"},"shadowBlur":12,"shadowOffsetX":0,"shadowOffsetY":4,"shadowColor":{"type":"palette","key":"shadowColor"}}},"startText":{"style":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"endText":{"style":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"handlerText":{"style":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"rail":{"width":8,"height":200,"style":{"fill":{"type":"palette","key":"sliderRailColor"}}}}},"sizeLegend":{"horizontal":{"orient":"right","position":"middle","padding":[16,24],"title":{"visible":false,"padding":0,"textStyle":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fill":{"type":"palette","key":"primaryFontColor"}},"space":12},"handler":{"style":{"symbolType":"circle","lineWidth":0,"outerBorder":{"lineWidth":2,"distance":0.8,"stroke":{"type":"palette","key":"sliderTrackColor"}},"fill":{"type":"palette","key":"sliderHandleColor"}}},"startText":{"style":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"endText":{"style":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"handlerText":{"style":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"sizeBackground":{"fill":{"type":"palette","key":"dataZoomChartColor"}},"track":{"style":{"fill":{"type":"palette","key":"sliderTrackColor","a":0.8}}},"rail":{"width":200,"height":4,"style":{"fill":{"type":"palette","key":"sliderRailColor"}}}},"vertical":{"orient":"right","position":"middle","padding":[16,24],"title":{"visible":false,"padding":0,"textStyle":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fill":{"type":"palette","key":"primaryFontColor"}},"space":12},"handler":{"style":{"symbolType":"circle","lineWidth":0,"outerBorder":{"lineWidth":2,"distance":0.8,"stroke":{"type":"palette","key":"sliderTrackColor"}},"fill":{"type":"palette","key":"sliderHandleColor"}}},"startText":{"style":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"endText":{"style":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"handlerText":{"style":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"sizeBackground":{"fill":{"type":"palette","key":"dataZoomChartColor"}},"track":{"style":{"fill":{"type":"palette","key":"sliderTrackColor","a":0.8}}},"rail":{"width":4,"height":200,"style":{"fill":{"type":"palette","key":"sliderRailColor"}}}}},"axis":{"domainLine":{"visible":true,"style":{"lineWidth":1,"stroke":{"type":"palette","key":"axisDomainColor"},"strokeOpacity":1}},"grid":{"visible":true,"style":{"lineWidth":1,"stroke":{"type":"palette","key":"axisGridColor"},"strokeOpacity":1,"lineDash":[]}},"subGrid":{"visible":false,"style":{"lineWidth":1,"stroke":{"type":"palette","key":"axisGridColor"},"strokeOpacity":1,"lineDash":[4,4]}},"tick":{"visible":true,"tickSize":4,"style":{"lineWidth":1,"stroke":{"type":"palette","key":"axisDomainColor"},"strokeOpacity":1}},"subTick":{"visible":false,"tickSize":2,"style":{"lineWidth":1,"stroke":{"type":"palette","key":"axisDomainColor"},"strokeOpacity":1}},"label":{"visible":true,"space":10,"style":{"fontSize":12,"fill":{"type":"palette","key":"axisLabelFontColor"},"fontWeight":"normal","fillOpacity":1}},"title":{"space":10,"style":{"fontSize":12,"lineHeight":"130%","fill":{"type":"palette","key":"secondaryFontColor"},"fontWeight":"normal","fillOpacity":1}}},"axisBand":{"domainLine":{"visible":true},"grid":{"visible":false},"subGrid":{"visible":false},"tick":{"visible":true},"subTick":{"visible":false}},"axisLinear":{"domainLine":{"visible":false},"grid":{"visible":true},"subGrid":{"visible":false},"tick":{"visible":false},"subTick":{"visible":false}},"axisX":{"label":{"space":8},"title":{"space":8},"maxHeight":"30%","unit":{"visible":false,"style":{"fontSize":12,"fill":{"type":"palette","key":"axisLabelFontColor"},"fontWeight":"normal","fillOpacity":1}}},"axisY":{"label":{"space":12,"autoLimit":true},"title":{"space":12,"autoRotate":true},"maxWidth":"30%","unit":{"visible":false,"style":{"fontSize":12,"fill":{"type":"palette","key":"axisLabelFontColor"},"fontWeight":"normal","fillOpacity":1}}},"axisAngle":{"grid":{"visible":true,"style":{"lineDash":[6,6]}},"label":{"space":5}},"axisRadius":{"grid":{"smooth":true,"visible":true},"subGrid":{"smooth":true,"visible":false}},"markLine":{"line":{"style":{"lineDash":[3,3],"stroke":{"type":"palette","key":"markLineStrokeColor"}}},"startSymbol":{"visible":false,"symbolType":"triangle","size":10,"style":{"fill":{"type":"palette","key":"markLineStrokeColor"},"stroke":null,"lineWidth":0}},"endSymbol":{"visible":true,"symbolType":"triangle","size":10,"style":{"fill":{"type":"palette","key":"markLineStrokeColor"},"stroke":null,"lineWidth":0}},"label":{"refY":5,"style":{"fontSize":14,"fontWeight":"normal","fontStyle":"normal","fill":{"type":"palette","key":"primaryFontColor"}},"labelBackground":{"padding":{"top":2,"bottom":2,"right":4,"left":4},"style":{"cornerRadius":3,"fill":{"type":"palette","key":"markLabelBackgroundColor"}}}}},"markArea":{"area":{"style":{"fill":{"type":"palette","key":"axisDomainColor","a":0.25}}},"label":{"style":{"fontSize":14,"fontWeight":"normal","fontStyle":"normal","fill":{"type":"palette","key":"primaryFontColor"}},"labelBackground":{"padding":{"top":2,"bottom":2,"right":4,"left":4},"style":{"cornerRadius":3,"fill":{"type":"palette","key":"markLabelBackgroundColor"}}}}},"markPoint":{"itemLine":{"decorativeLine":{"visible":false},"startSymbol":{"size":5,"visible":true,"style":{"fill":{"type":"palette","key":"markLineStrokeColor"},"stroke":null,"lineWidth":0}},"endSymbol":{"style":{"fill":{"type":"palette","key":"markLineStrokeColor"},"stroke":null,"lineWidth":0}},"line":{"style":{"stroke":{"type":"palette","key":"markLineStrokeColor"}}}},"itemContent":{"offsetY":-50}},"tooltip":{"offset":{"x":10,"y":10},"panel":{"padding":{"top":10,"left":10,"right":10,"bottom":10},"backgroundColor":{"type":"palette","key":"popupBackgroundColor"},"border":{"color":{"type":"palette","key":"popupBackgroundColor"},"width":0,"radius":3},"shadow":{"x":0,"y":4,"blur":12,"spread":0,"color":{"type":"palette","key":"shadowColor"}}},"spaceRow":6,"titleLabel":{"fontSize":14,"lineHeight":"150%","fontColor":{"type":"palette","key":"primaryFontColor"},"fontWeight":"bold","textAlign":"left","textBaseline":"middle","spacing":0},"shape":{"size":8,"spacing":6},"keyLabel":{"fontSize":14,"lineHeight":"150%","fontColor":{"type":"palette","key":"secondaryFontColor"},"textAlign":"left","textBaseline":"middle","spacing":26},"valueLabel":{"fontSize":14,"lineHeight":"150%","fontColor":{"type":"palette","key":"primaryFontColor"},"fontWeight":"bold","textBaseline":"middle","spacing":0}},"dataZoom":{"padding":[12,0],"showDetail":"auto","brushSelect":false,"middleHandler":{"visible":false,"background":{"size":6,"style":{"stroke":{"type":"palette","key":"dataZoomHandleStrokeColor"},"cornerRadius":2}},"icon":{"style":{"size":4,"fill":{"type":"palette","key":"sliderHandleColor"},"stroke":{"type":"palette","key":"dataZoomHandleStrokeColor"},"symbolType":"M 0.3 -0.5 C 0.41 -0.5 0.5 -0.41 0.5 -0.3 C 0.5 -0.3 0.5 0.3 0.5 0.3 C 0.5 0.41 0.41 0.5 0.3 0.5 C 0.3 0.5 -0.3 0.5 -0.3 0.5 C -0.41 0.5 -0.5 0.41 -0.5 0.3 C -0.5 0.3 -0.5 -0.3 -0.5 -0.3 C -0.5 -0.41 -0.41 -0.5 -0.3 -0.5 C -0.3 -0.5 0.3 -0.5 0.3 -0.5 Z","lineWidth":0.5}}},"background":{"size":20,"style":{"fill":{"type":"palette","key":"sliderRailColor"},"lineWidth":0}},"selectedBackground":{"style":{"fill":{"type":"palette","key":"sliderTrackColor"},"fillOpacity":0.1,"outerBorder":{"stroke":{"type":"palette","key":"sliderTrackColor"},"strokeOpacity":0.2,"distance":-0.5,"lineWidth":1}}},"selectedBackgroundChart":{"area":{"style":{"visible":false,"stroke":false,"fill":{"type":"palette","key":"dataZoomChartColor"}}},"line":{"style":{"visible":false,"stroke":{"type":"palette","key":"dataZoomChartColor"},"lineWidth":1}}},"startHandler":{"style":{"symbolType":"M-0.5-2.4h0.9c0.4,0,0.7,0.3,0.7,0.7v3.3c0,0.4-0.3,0.7-0.7,0.7h-0.9c-0.4,0-0.7-0.3-0.7-0.7v-3.3\nC-1.2-2-0.9-2.4-0.5-2.4z M-0.4-1.4L-0.4-1.4c0,0,0,0.1,0,0.1v2.6c0,0.1,0,0.1,0,0.1l0,0c0,0,0-0.1,0-0.1v-2.6\nC-0.4-1.4-0.4-1.4-0.4-1.4z M0.3-1.4L0.3-1.4c0,0,0,0.1,0,0.1v2.6c0,0.1,0,0.1,0,0.1l0,0c0,0,0-0.1,0-0.1v-2.6\nC0.3-1.4,0.3-1.4,0.3-1.4z;","fill":{"type":"palette","key":"sliderHandleColor"},"scaleX":1.2,"scaleY":1.2,"stroke":{"type":"palette","key":"dataZoomHandleStrokeColor"},"lineWidth":1,"zIndex":100}},"endHandler":{"style":{"symbolType":"M-0.5-2.4h0.9c0.4,0,0.7,0.3,0.7,0.7v3.3c0,0.4-0.3,0.7-0.7,0.7h-0.9c-0.4,0-0.7-0.3-0.7-0.7v-3.3\nC-1.2-2-0.9-2.4-0.5-2.4z M-0.4-1.4L-0.4-1.4c0,0,0,0.1,0,0.1v2.6c0,0.1,0,0.1,0,0.1l0,0c0,0,0-0.1,0-0.1v-2.6\nC-0.4-1.4-0.4-1.4-0.4-1.4z M0.3-1.4L0.3-1.4c0,0,0,0.1,0,0.1v2.6c0,0.1,0,0.1,0,0.1l0,0c0,0,0-0.1,0-0.1v-2.6\nC0.3-1.4,0.3-1.4,0.3-1.4z;","fill":{"type":"palette","key":"sliderHandleColor"},"scaleX":1.2,"scaleY":1.2,"stroke":{"type":"palette","key":"dataZoomHandleStrokeColor"},"lineWidth":1,"zIndex":100}},"startText":{"padding":8,"style":{"fontSize":12,"lineHeight":"130%","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}}},"endText":{"padding":8,"style":{"fontSize":12,"lineHeight":"130%","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}}},"backgroundChart":{"area":{"style":{"stroke":false,"fill":{"type":"palette","key":"dataZoomChartColor"}}},"line":{"style":{"stroke":{"type":"palette","key":"dataZoomChartColor"},"lineWidth":1}}}},"crosshair":{"trigger":"hover","bandField":{"visible":false,"line":{"type":"rect","visible":true,"style":{"fill":{"type":"palette","key":"axisGridColor"},"opacity":0.7,"lineDash":[]}},"label":{"visible":false,"style":{"fontWeight":"normal","fill":{"type":"palette","key":"axisMarkerFontColor"},"fontSize":12},"labelBackground":{"padding":{"bottom":0,"top":0,"left":2,"right":2},"style":{"fill":{"type":"palette","key":"axisMarkerBackgroundColor"},"outerBorder":{"stroke":{"type":"palette","key":"axisMarkerBackgroundColor"},"distance":0,"lineWidth":3},"cornerRadius":1}}}},"linearField":{"visible":false,"line":{"type":"line","visible":true,"style":{"stroke":{"type":"palette","key":"markLineStrokeColor"},"opacity":0.7,"lineDash":[2,3]}},"label":{"visible":false,"style":{"fontWeight":"normal","fill":{"type":"palette","key":"axisMarkerFontColor"},"fontSize":12},"labelBackground":{"padding":{"bottom":0,"top":0,"left":2,"right":2},"style":{"fill":{"type":"palette","key":"axisMarkerBackgroundColor"},"outerBorder":{"stroke":{"type":"palette","key":"axisMarkerBackgroundColor"},"distance":0,"lineWidth":3},"cornerRadius":1}}}}},"player":{"visible":true,"position":"start","padding":{"top":20,"bottom":20},"slider":{"space":10,"trackStyle":{"fill":{"type":"palette","key":"sliderTrackColor"},"fillOpacity":0.8},"railStyle":{"fill":{"type":"palette","key":"sliderRailColor"}},"handlerStyle":{"size":15,"stroke":{"type":"palette","key":"backgroundColor"},"lineWidth":2,"fill":{"type":"palette","key":"playerControllerColor"}}},"controller":{"start":{"order":0,"space":0,"style":{"size":25,"fill":{"type":"palette","key":"playerControllerColor"},"fillOpacity":0.8}},"pause":{"order":0,"space":0,"style":{"size":25,"fill":{"type":"palette","key":"playerControllerColor"},"fillOpacity":0.8}},"backward":{"order":0,"space":10,"position":"start","style":{"size":12,"fill":{"type":"palette","key":"playerControllerColor"},"fillOpacity":0.8}},"forward":{"order":0,"space":10,"position":"end","style":{"size":12,"fill":{"type":"palette","key":"playerControllerColor"},"fillOpacity":0.8}}}},"brush":{"style":{"fill":"#B0C8F9","fillOpacity":0.2,"stroke":"#B0C8F9","lineWidth":2},"brushMode":"single","brushType":"rect","brushMoved":true,"removeOnClick":true,"delayType":"throttle","delayTime":0},"indicator":{"title":{"visible":true,"autoLimit":false,"autoFit":false,"style":{"fontSize":32,"fill":{"type":"palette","key":"primaryFontColor"},"fontWeight":"normal","fillOpacity":1,"textBaseline":"top","textAlign":"center"}},"content":{"visible":true,"style":{"fontSize":20,"fill":{"type":"palette","key":"tertiaryFontColor"},"fontWeight":"normal","fillOpacity":1,"textBaseline":"top","textAlign":"center"}}},"title":{"padding":{"top":4,"bottom":20},"textStyle":{"fontSize":16,"lineHeight":"150%","fill":{"type":"palette","key":"primaryFontColor"}},"subtextStyle":{"fontSize":14,"lineHeight":"150%","fill":{"type":"palette","key":"tertiaryFontColor"}}},"mapLabel":{"visible":true,"offset":12,"position":"top","space":10,"nameLabel":{"visible":true,"style":{"textBaseline":"middle","textAlign":"left","fill":"black","fontSize":10}},"valueLabel":{"visible":true,"style":{"textBaseline":"middle","textAlign":"left","fill":"black","fontSize":10}},"background":{"visible":true,"padding":{"top":4,"bottom":4,"left":6,"right":6},"style":{"cornerRadius":2,"lineWidth":1,"fill":"white","stroke":"grey"}},"leader":{"visible":false,"style":{"lineWidth":1,"stroke":"red"}}},"poptip":{"visible":true,"position":"auto","padding":8,"titleStyle":{"fontSize":12,"fontWeight":"bold","fill":{"type":"palette","key":"primaryFontColor"}},"contentStyle":{"fontSize":12,"fill":{"type":"palette","key":"primaryFontColor"}},"panel":{"visible":true,"fill":{"type":"palette","key":"popupBackgroundColor"},"cornerRadius":3,"lineWidth":0,"shadowBlur":12,"shadowOffsetX":0,"shadowOffsetY":4,"shadowColor":{"type":"palette","key":"shadowColor"},"size":0,"space":12}},"totalLabel":{"visible":false,"offset":5,"overlap":{"clampForce":true,"strategy":[]},"smartInvert":false,"animation":false,"style":{"fontSize":14,"fill":{"type":"palette","key":"primaryFontColor"}}},"scrollBar":{"horizontal":{"height":10,"slider":{"style":{"fill":{"type":"palette","key":"scrollBarSliderColor"}}}},"vertical":{"width":10,"slider":{"style":{"fill":{"type":"palette","key":"scrollBarSliderColor"}}}}}},"animationThreshold":2000,"description":"Semi Design - dark","type":"dark"} \ No newline at end of file diff --git a/packages/vchart-arco-theme/public/semiDesignLight.json b/packages/vchart-arco-theme/public/semiDesignLight.json new file mode 100644 index 0000000..98be887 --- /dev/null +++ b/packages/vchart-arco-theme/public/semiDesignLight.json @@ -0,0 +1 @@ +{"colorScheme":{"default":{"dataScheme":[{"maxDomainLength":10,"scheme":["#1664FF","#1AC6FF","#FF8A00","#3CC780","#7442D4","#FFC400","#304D77","#B48DEB","#009488","#FF7DDA"]},{"scheme":["#1664FF","#B2CFFF","#1AC6FF","#94EFFF","#FF8A00","#FFCE7A","#3CC780","#B9EDCD","#7442D4","#DDC5FA","#FFC400","#FAE878","#304D77","#8B959E","#B48DEB","#EFE3FF","#009488","#59BAA8","#FF7DDA","#FFCFEE"]}],"palette":{"backgroundColor":"rgba(255,255,255,1)","borderColor":"rgba(28,31,35,0.08)","shadowColor":"rgba(0,0,0,0.1)","hoverBackgroundColor":"rgba(46,50,56,0.05)","sliderRailColor":"rgba(46,50,56,0.05)","sliderHandleColor":"rgba(255,255,255,1)","sliderTrackColor":"rgba(0,100,250,1)","popupBackgroundColor":"rgba(255,255,255,1)","primaryFontColor":"rgba(28,31,35,1)","secondaryFontColor":"rgba(28,31,35,0.8)","tertiaryFontColor":"rgba(28,31,35,0.62)","axisLabelFontColor":"rgba(28,31,35,0.62)","disableFontColor":"rgba(28,31,35,0.35)","axisMarkerFontColor":"rgba(255,255,255,1)","axisGridColor":"rgba(28,31,35,0.08)","axisDomainColor":"rgba(28,31,35,0.15)","dataZoomHandleStrokeColor":"rgba(46,50,56,0.13)","dataZoomChartColor":"rgba(46,50,56,0.09)","playerControllerColor":"rgba(0,100,250,1)","scrollBarSliderColor":"rgba(0,0,0,0.3)","axisMarkerBackgroundColor":"rgba(28,31,35,1)","markLabelBackgroundColor":"rgba(28,31,35,0.08)","markLineStrokeColor":"rgba(28,31,35,0.8)","dangerColor":"rgba(249,57,32,1)","warningColor":"rgba(252,136,0,1)","successColor":"rgba(59,179,70,1)","infoColor":"rgba(0,100,250,1)"}}},"series":{"scatter":{"point":{"style":{"size":8,"stroke":{"type":"palette","key":"backgroundColor"},"lineWidth":0,"fillOpacity":0.8,"symbolType":"circle"}},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"lineWidth":2,"stroke":{"type":"palette","key":"backgroundColor"}},"visible":false,"offset":5,"position":"top"}},"line":{"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"lineWidth":2,"stroke":{"type":"palette","key":"backgroundColor"}},"visible":false,"position":"top","offset":5},"point":{"style":{"size":8,"stroke":{"type":"palette","key":"backgroundColor"},"lineWidth":1,"fillOpacity":1,"symbolType":"circle"}},"line":{"style":{"lineWidth":2,"lineCap":"round","lineJoin":"round"}}},"area":{"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"stroke":{"type":"palette","key":"backgroundColor"},"lineWidth":2},"visible":false,"offset":5,"position":"top"},"point":{"style":{"size":8,"stroke":{"type":"palette","key":"backgroundColor"},"lineWidth":1,"fillOpacity":1,"symbolType":"circle"}},"line":{"style":{"lineWidth":2,"lineCap":"round","lineJoin":"round"}},"area":{"style":{"fillOpacity":0.2}}},"bar":{"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"lineWidth":2,"stroke":{"type":"palette","key":"backgroundColor"}},"visible":false,"position":"outside","offset":5},"bar":{},"barBackground":{"visible":false,"style":{"fill":{"type":"palette","key":"primaryFontColor","a":0.06}}}},"bar3d":{"bar3d":{"style":{"length":3}},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"offset":12,"position":"outside"},"visible":false}},"pie":{"outerRadius":0.6,"pie":{"style":{"fillOpacity":1}},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"stroke":{"type":"palette","key":"backgroundColor"}},"visible":false,"position":"outside"},"innerLabel":{"style":{"lineWidth":2}},"labelLine":{}},"pie3d":{"outerRadius":0.6,"pie3d":{"style":{"height":10,"fillOpacity":1}},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1},"visible":false,"position":"outside"},"labelLine":{}},"map":{"defaultFillColor":"#f3f3f3","area":{"style":{"fillOpacity":1,"lineWidth":0.5,"strokeOpacity":1,"stroke":"black"}},"label":{"style":{"fontSize":10,"lineHeight":"120%","fontWeight":"normal","fillOpacity":1,"textBaseline":"middle","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"},"stroke":{"type":"palette","key":"backgroundColor"}},"interactive":false}},"radar":{"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"lineWidth":2,"stroke":{"type":"palette","key":"backgroundColor"}},"visible":false,"offset":5},"point":{"style":{"size":8,"stroke":{"type":"palette","key":"backgroundColor"},"lineWidth":1,"fillOpacity":1,"symbolType":"circle"}},"line":{"style":{"lineWidth":2,"lineCap":"round","lineJoin":"round"}},"area":{"style":{"fillOpacity":0.2}}},"dot":{"dot":{"style":{"size":10,"fillOpacity":1}},"symbol":{"style":{"size":10}},"title":{"style":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fillOpacity":1,"textAlign":"left","textBaseline":"middle"}},"subTitle":{"style":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fillOpacity":1,"textAlign":"left","textBaseline":"top"}},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}},"group":{},"grid":{},"gridBackground":{}},"link":{"arrow":{"style":{"size":10}},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}},"group":{},"link":{}},"wordCloud":{"word":{"style":{"fontSize":null,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"textAlign":"center","textBaseline":"alphabetic"},"padding":1},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}},"fillingWord":{"style":{"fontSize":null,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}}},"wordCloud3d":{"word":{"style":{"fontSize":null,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"textAlign":"center","textBaseline":"alphabetic"},"padding":1},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}},"fillingWord":{"style":{"fontSize":null,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}}},"funnel":{"transform":{"style":{"fill":{"type":"palette","key":"axisGridColor"}}},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"fill":"white","textBaseline":"middle","lineWidth":2}},"outerLabel":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"fill":{"type":"palette","key":"secondaryFontColor"}},"line":{"style":{"stroke":{"type":"palette","key":"axisDomainColor"}}}},"transformLabel":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"fill":{"type":"palette","key":"secondaryFontColor"},"textBaseline":"middle"}},"funnel":{},"outerLabelLine":{}},"funnel3d":{"transform3d":{"style":{"fill":"#f5f5f5"}},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"fill":"white","textBaseline":"middle","lineWidth":2}},"outerLabel":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"fill":"#707070"},"line":{"style":{"stroke":{"type":"palette","key":"axisDomainColor"}}}},"transformLabel":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"fill":"#707070","textBaseline":"middle"}},"funnel3d":{"style":{"stroke":false}},"outerLabelLine":{}},"linearProgress":{"bandWidth":30,"progress":{"style":{"fillOpacity":1}},"track":{"style":{"fill":"#E7EBED","fillOpacity":1}},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}},"group":{}},"circularProgress":{"outerRadius":0.8,"innerRadius":0.6,"progress":{"style":{"fillOpacity":1}},"track":{"style":{"fillOpacity":0.2}},"tickMask":{"visible":false,"angle":3,"offsetAngle":0,"forceAlign":true},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}},"group":{}},"waterfall":{"seriesFieldName":{"total":"total","increase":"increase","decrease":"decrease"},"leaderLine":{"style":{"stroke":"black","lineWidth":1,"lineDash":[4,4]}},"stackLabel":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"fill":"black"},"visible":true,"offset":12,"position":"withChange"},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1},"visible":false,"offset":12,"position":"inside"},"bar":{},"barBackground":{"visible":false,"style":{"fill":{"type":"palette","key":"primaryFontColor","a":0.06}}}},"gauge":{"outerRadius":0.8,"innerRadius":0.6,"padAngle":1.146,"segment":{"style":{"fillOpacity":1}},"tickMask":{"visible":false,"angle":3,"offsetAngle":0,"forceAlign":true},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}},"group":{},"track":{}},"gaugePointer":{"pointer":{"type":"path","width":0.4,"height":0.4,"style":{"path":"M-0.020059 -0.978425 C-0.018029 -0.9888053 -0.013378 -1 0 -1 C0.01342 -1 0.01812 -0.989146 0.0201 -0.978425 C0.02161 -0.9702819 0.0692 -0.459505 0.09486 -0.184807 C0.10298 -0.097849 0.1089 -0.034548 0.11047 -0.018339 C0.11698 0.04908 0.07373 0.11111 0.00002 0.11111 C-0.07369 0.11111 -0.117184 0.04991 -0.110423 -0.018339 C-0.103662 -0.086591 -0.022089 -0.9680447 -0.020059 -0.978425Z"}},"pin":{"width":0.025,"height":0.025,"style":{"path":"M1 0 C1 0.55228 0.55228 1 0 1 C-0.552285 1 -1 0.55228 -1 0 C-1 -0.552285 -0.552285 -1 0 -1 C0.55228 -1 1 -0.552285 1 0Z","fill":"#888"}},"pinBackground":{"width":0.06,"height":0.06,"style":{"path":"M1 0 C1 0.55228 0.55228 1 0 1 C-0.552285 1 -1 0.55228 -1 0 C-1 -0.552285 -0.552285 -1 0 -1 C0.55228 -1 1 -0.552285 1 0Z","fill":"#ddd"}},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}}},"treemap":{"gapWidth":1,"nodePadding":[5],"nonLeaf":{"visible":false,"style":{"fillOpacity":0.5}},"label":{"style":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fillOpacity":1,"fill":"white","textBaseline":"middle","textAlign":"center"}},"nonLeafLabel":{"style":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fillOpacity":1,"fill":"black","stroke":{"type":"palette","key":"backgroundColor"},"lineWidth":2,"textBaseline":"middle","textAlign":"center"},"padding":24},"leaf":{}},"sunburst":{"innerRadius":0,"outerRadius":1,"startAngle":-90,"endAngle":270,"gap":0,"labelLayout":{"align":"center","offset":0,"rotate":"radial"},"sunburst":{"style":{"lineWidth":1,"stroke":{"type":"palette","key":"backgroundColor"},"fillOpacity":1,"cursor":"pointer"}},"label":{"style":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fillOpacity":1,"cursor":"pointer","fill":{"type":"palette","key":"primaryFontColor"}},"visible":true}},"rangeColumn":{"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"fill":{"type":"palette","key":"axisMarkerFontColor"}},"visible":false,"offset":5,"position":"inside","minLabel":{"position":"end"},"maxLabel":{"position":"start"}},"bar":{},"barBackground":{"visible":false,"style":{"fill":{"type":"palette","key":"primaryFontColor","a":0.06}}},"minLabel":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}},"maxLabel":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}}},"circlePacking":{"layoutPadding":5,"circlePacking":{"style":{"lineWidth":1,"stroke":{"type":"palette","key":"backgroundColor"},"cursor":"pointer"},"visible":true},"label":{"style":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fillOpacity":1,"cursor":"pointer","fill":"black","stroke":{"type":"palette","key":"backgroundColor"},"lineWidth":2},"visible":true}},"heatmap":{"cell":{"style":{"shape":"square","fillOpacity":1}},"cellBackground":{"visible":false},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}}},"sankey":{"link":{"style":{"fillOpacity":0.15,"round":true}},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}},"node":{}},"rose":{"rose":{"style":{"fillOpacity":1}},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"lineWidth":2,"stroke":{"type":"palette","key":"backgroundColor"},"textAlign":"center","textBaseline":"middle"}}},"boxPlot":{"boxPlot":{"style":{"lineWidth":1}},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}},"outlier":{}},"correlation":{"centerLabel":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"fill":"#fff","text":""},"visible":true,"position":"center"},"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1,"fill":"#000"},"visible":true,"position":"bottom"},"nodePoint":{},"ripplePoint":{},"centerPoint":{}},"geo":{"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}}},"rangeColumn3d":{"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}},"bar3d":{},"minLabel":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}},"maxLabel":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}}},"rangeArea":{"label":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}},"point":{"style":{"size":8,"stroke":{"type":"palette","key":"backgroundColor"},"lineWidth":1,"fillOpacity":1}},"line":{"style":{"lineWidth":2,"lineCap":"round","lineJoin":"round"}},"area":{"style":{"fillOpacity":0.2}}}},"name":"semiDesignLight","background":{"type":"palette","key":"backgroundColor"},"padding":20,"fontFamily":"Inter,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif","mark":{"text":{"style":{"fontSize":14,"lineHeight":"150%","fontWeight":"normal","fillOpacity":1}}},"markByName":{"label":{"style":{"fontSize":14,"fontWeight":"normal","fillOpacity":1}},"area":{"style":{"fillOpacity":0.2}},"line":{"style":{"lineWidth":2,"lineCap":"round","lineJoin":"round"}},"point":{"style":{"size":8,"stroke":{"type":"palette","key":"backgroundColor"},"lineWidth":1,"fillOpacity":1}},"word":{"style":{"fontSize":null}},"fillingWord":{"style":{"fontSize":null}},"sunburst":{"style":{"lineWidth":1,"stroke":{"type":"palette","key":"backgroundColor"}}},"circlePacking":{"style":{"lineWidth":1,"stroke":{"type":"palette","key":"backgroundColor"}}},"funnel3d":{"style":{"stroke":false}},"barBackground":{"visible":false,"style":{"fill":{"type":"palette","key":"primaryFontColor","a":0.06}}}},"component":{"discreteLegend":{"orient":"bottom","position":"middle","padding":[16,24],"title":{"visible":false,"padding":0,"textStyle":{"fontSize":12,"lineHeight":"130%","fill":{"type":"palette","key":"primaryFontColor"},"fontWeight":"normal"},"space":12},"item":{"visible":true,"spaceCol":10,"spaceRow":6,"padding":2,"background":{"state":{"selectedHover":{"fill":{"type":"palette","key":"hoverBackgroundColor"}},"unSelectedHover":{"fill":{"type":"palette","key":"hoverBackgroundColor"}}}},"shape":{"space":6,"style":{"lineWidth":0,"fillOpacity":1,"opacity":1},"state":{"unSelected":{"fillOpacity":0.2,"opacity":1}}},"label":{"space":6,"style":{"fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"},"fontSize":12,"lineHeight":"130%","opacity":1},"state":{"unSelected":{"fill":{"type":"palette","key":"disableFontColor"},"opacity":1}}}},"allowAllCanceled":false},"colorLegend":{"horizontal":{"orient":"right","position":"middle","padding":[16,24],"title":{"visible":false,"padding":0,"textStyle":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fill":{"type":"palette","key":"primaryFontColor"}},"space":12},"handler":{"style":{"symbolType":"circle","lineWidth":0,"outerBorder":{"lineWidth":2,"distance":0.8,"stroke":"#ffffff"},"shadowBlur":12,"shadowOffsetX":0,"shadowOffsetY":4,"shadowColor":{"type":"palette","key":"shadowColor"}}},"startText":{"style":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"endText":{"style":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"handlerText":{"style":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"rail":{"width":200,"height":8,"style":{"fill":{"type":"palette","key":"sliderRailColor"}}}},"vertical":{"orient":"right","position":"middle","padding":[16,24],"title":{"visible":false,"padding":0,"textStyle":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fill":{"type":"palette","key":"primaryFontColor"}},"space":12},"handler":{"style":{"symbolType":"circle","lineWidth":0,"outerBorder":{"lineWidth":2,"distance":0.8,"stroke":"#ffffff"},"shadowBlur":12,"shadowOffsetX":0,"shadowOffsetY":4,"shadowColor":{"type":"palette","key":"shadowColor"}}},"startText":{"style":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"endText":{"style":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"handlerText":{"style":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"rail":{"width":8,"height":200,"style":{"fill":{"type":"palette","key":"sliderRailColor"}}}}},"sizeLegend":{"horizontal":{"orient":"right","position":"middle","padding":[16,24],"title":{"visible":false,"padding":0,"textStyle":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fill":{"type":"palette","key":"primaryFontColor"}},"space":12},"handler":{"style":{"symbolType":"circle","lineWidth":0,"outerBorder":{"lineWidth":2,"distance":0.8,"stroke":{"type":"palette","key":"sliderTrackColor"}},"fill":{"type":"palette","key":"sliderHandleColor"}}},"startText":{"style":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"endText":{"style":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"handlerText":{"style":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"sizeBackground":{"fill":{"type":"palette","key":"dataZoomChartColor"}},"track":{"style":{"fill":{"type":"palette","key":"sliderTrackColor","a":0.8}}},"rail":{"width":200,"height":4,"style":{"fill":{"type":"palette","key":"sliderRailColor"}}}},"vertical":{"orient":"right","position":"middle","padding":[16,24],"title":{"visible":false,"padding":0,"textStyle":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fill":{"type":"palette","key":"primaryFontColor"}},"space":12},"handler":{"style":{"symbolType":"circle","lineWidth":0,"outerBorder":{"lineWidth":2,"distance":0.8,"stroke":{"type":"palette","key":"sliderTrackColor"}},"fill":{"type":"palette","key":"sliderHandleColor"}}},"startText":{"style":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"endText":{"style":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"handlerText":{"style":{"fontSize":12,"lineHeight":"130%","fontWeight":"normal","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}},"space":6},"sizeBackground":{"fill":{"type":"palette","key":"dataZoomChartColor"}},"track":{"style":{"fill":{"type":"palette","key":"sliderTrackColor","a":0.8}}},"rail":{"width":4,"height":200,"style":{"fill":{"type":"palette","key":"sliderRailColor"}}}}},"axis":{"domainLine":{"visible":true,"style":{"lineWidth":1,"stroke":{"type":"palette","key":"axisDomainColor"},"strokeOpacity":1}},"grid":{"visible":true,"style":{"lineWidth":1,"stroke":{"type":"palette","key":"axisGridColor"},"strokeOpacity":1,"lineDash":[]}},"subGrid":{"visible":false,"style":{"lineWidth":1,"stroke":{"type":"palette","key":"axisGridColor"},"strokeOpacity":1,"lineDash":[4,4]}},"tick":{"visible":true,"tickSize":4,"style":{"lineWidth":1,"stroke":{"type":"palette","key":"axisDomainColor"},"strokeOpacity":1}},"subTick":{"visible":false,"tickSize":2,"style":{"lineWidth":1,"stroke":{"type":"palette","key":"axisDomainColor"},"strokeOpacity":1}},"label":{"visible":true,"space":10,"style":{"fontSize":12,"fill":{"type":"palette","key":"axisLabelFontColor"},"fontWeight":"normal","fillOpacity":1}},"title":{"space":10,"style":{"fontSize":12,"lineHeight":"130%","fill":{"type":"palette","key":"secondaryFontColor"},"fontWeight":"normal","fillOpacity":1}}},"axisBand":{"domainLine":{"visible":true},"grid":{"visible":false},"subGrid":{"visible":false},"tick":{"visible":true},"subTick":{"visible":false}},"axisLinear":{"domainLine":{"visible":false},"grid":{"visible":true},"subGrid":{"visible":false},"tick":{"visible":false},"subTick":{"visible":false}},"axisX":{"label":{"space":8},"title":{"space":8},"maxHeight":"30%","unit":{"visible":false,"style":{"fontSize":12,"fill":{"type":"palette","key":"axisLabelFontColor"},"fontWeight":"normal","fillOpacity":1}}},"axisY":{"label":{"space":12,"autoLimit":true},"title":{"space":12,"autoRotate":true},"maxWidth":"30%","unit":{"visible":false,"style":{"fontSize":12,"fill":{"type":"palette","key":"axisLabelFontColor"},"fontWeight":"normal","fillOpacity":1}}},"axisAngle":{"grid":{"visible":true,"style":{"lineDash":[6,6]}},"label":{"space":5}},"axisRadius":{"grid":{"smooth":true,"visible":true},"subGrid":{"smooth":true,"visible":false}},"markLine":{"line":{"style":{"lineDash":[3,3],"stroke":{"type":"palette","key":"markLineStrokeColor"}}},"startSymbol":{"visible":false,"symbolType":"triangle","size":10,"style":{"fill":{"type":"palette","key":"markLineStrokeColor"},"stroke":null,"lineWidth":0}},"endSymbol":{"visible":true,"symbolType":"triangle","size":10,"style":{"fill":{"type":"palette","key":"markLineStrokeColor"},"stroke":null,"lineWidth":0}},"label":{"refY":5,"style":{"fontSize":14,"fontWeight":"normal","fontStyle":"normal","fill":{"type":"palette","key":"primaryFontColor"}},"labelBackground":{"padding":{"top":2,"bottom":2,"right":4,"left":4},"style":{"cornerRadius":3,"fill":{"type":"palette","key":"markLabelBackgroundColor"}}}}},"markArea":{"area":{"style":{"fill":{"type":"palette","key":"axisDomainColor","a":0.25}}},"label":{"style":{"fontSize":14,"fontWeight":"normal","fontStyle":"normal","fill":{"type":"palette","key":"primaryFontColor"}},"labelBackground":{"padding":{"top":2,"bottom":2,"right":4,"left":4},"style":{"cornerRadius":3,"fill":{"type":"palette","key":"markLabelBackgroundColor"}}}}},"markPoint":{"itemLine":{"decorativeLine":{"visible":false},"startSymbol":{"size":5,"visible":true,"style":{"fill":{"type":"palette","key":"markLineStrokeColor"},"stroke":null,"lineWidth":0}},"endSymbol":{"style":{"fill":{"type":"palette","key":"markLineStrokeColor"},"stroke":null,"lineWidth":0}},"line":{"style":{"stroke":{"type":"palette","key":"markLineStrokeColor"}}}},"itemContent":{"offsetY":-50}},"tooltip":{"offset":{"x":10,"y":10},"panel":{"padding":{"top":10,"left":10,"right":10,"bottom":10},"backgroundColor":{"type":"palette","key":"popupBackgroundColor"},"border":{"color":{"type":"palette","key":"popupBackgroundColor"},"width":0,"radius":3},"shadow":{"x":0,"y":4,"blur":12,"spread":0,"color":{"type":"palette","key":"shadowColor"}}},"spaceRow":6,"titleLabel":{"fontSize":14,"lineHeight":"150%","fontColor":{"type":"palette","key":"primaryFontColor"},"fontWeight":"bold","textAlign":"left","textBaseline":"middle","spacing":0},"shape":{"size":8,"spacing":6},"keyLabel":{"fontSize":14,"lineHeight":"150%","fontColor":{"type":"palette","key":"secondaryFontColor"},"textAlign":"left","textBaseline":"middle","spacing":26},"valueLabel":{"fontSize":14,"lineHeight":"150%","fontColor":{"type":"palette","key":"primaryFontColor"},"fontWeight":"bold","textBaseline":"middle","spacing":0}},"dataZoom":{"padding":[12,0],"showDetail":"auto","brushSelect":false,"middleHandler":{"visible":false,"background":{"size":6,"style":{"stroke":{"type":"palette","key":"dataZoomHandleStrokeColor"},"cornerRadius":2}},"icon":{"style":{"size":4,"fill":{"type":"palette","key":"sliderHandleColor"},"stroke":{"type":"palette","key":"dataZoomHandleStrokeColor"},"symbolType":"M 0.3 -0.5 C 0.41 -0.5 0.5 -0.41 0.5 -0.3 C 0.5 -0.3 0.5 0.3 0.5 0.3 C 0.5 0.41 0.41 0.5 0.3 0.5 C 0.3 0.5 -0.3 0.5 -0.3 0.5 C -0.41 0.5 -0.5 0.41 -0.5 0.3 C -0.5 0.3 -0.5 -0.3 -0.5 -0.3 C -0.5 -0.41 -0.41 -0.5 -0.3 -0.5 C -0.3 -0.5 0.3 -0.5 0.3 -0.5 Z","lineWidth":0.5}}},"background":{"size":20,"style":{"fill":{"type":"palette","key":"sliderRailColor"},"lineWidth":0}},"selectedBackground":{"style":{"fill":{"type":"palette","key":"sliderTrackColor"},"fillOpacity":0.1,"outerBorder":{"stroke":{"type":"palette","key":"sliderTrackColor"},"strokeOpacity":0.2,"distance":-0.5,"lineWidth":1}}},"selectedBackgroundChart":{"area":{"style":{"visible":false,"stroke":false,"fill":{"type":"palette","key":"dataZoomChartColor"}}},"line":{"style":{"visible":false,"stroke":{"type":"palette","key":"dataZoomChartColor"},"lineWidth":1}}},"startHandler":{"style":{"symbolType":"M-0.5-2.4h0.9c0.4,0,0.7,0.3,0.7,0.7v3.3c0,0.4-0.3,0.7-0.7,0.7h-0.9c-0.4,0-0.7-0.3-0.7-0.7v-3.3\nC-1.2-2-0.9-2.4-0.5-2.4z M-0.4-1.4L-0.4-1.4c0,0,0,0.1,0,0.1v2.6c0,0.1,0,0.1,0,0.1l0,0c0,0,0-0.1,0-0.1v-2.6\nC-0.4-1.4-0.4-1.4-0.4-1.4z M0.3-1.4L0.3-1.4c0,0,0,0.1,0,0.1v2.6c0,0.1,0,0.1,0,0.1l0,0c0,0,0-0.1,0-0.1v-2.6\nC0.3-1.4,0.3-1.4,0.3-1.4z;","fill":{"type":"palette","key":"sliderHandleColor"},"scaleX":1.2,"scaleY":1.2,"stroke":{"type":"palette","key":"dataZoomHandleStrokeColor"},"lineWidth":1,"zIndex":100}},"endHandler":{"style":{"symbolType":"M-0.5-2.4h0.9c0.4,0,0.7,0.3,0.7,0.7v3.3c0,0.4-0.3,0.7-0.7,0.7h-0.9c-0.4,0-0.7-0.3-0.7-0.7v-3.3\nC-1.2-2-0.9-2.4-0.5-2.4z M-0.4-1.4L-0.4-1.4c0,0,0,0.1,0,0.1v2.6c0,0.1,0,0.1,0,0.1l0,0c0,0,0-0.1,0-0.1v-2.6\nC-0.4-1.4-0.4-1.4-0.4-1.4z M0.3-1.4L0.3-1.4c0,0,0,0.1,0,0.1v2.6c0,0.1,0,0.1,0,0.1l0,0c0,0,0-0.1,0-0.1v-2.6\nC0.3-1.4,0.3-1.4,0.3-1.4z;","fill":{"type":"palette","key":"sliderHandleColor"},"scaleX":1.2,"scaleY":1.2,"stroke":{"type":"palette","key":"dataZoomHandleStrokeColor"},"lineWidth":1,"zIndex":100}},"startText":{"padding":8,"style":{"fontSize":12,"lineHeight":"130%","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}}},"endText":{"padding":8,"style":{"fontSize":12,"lineHeight":"130%","fill":{"type":"palette","key":"secondaryFontColor","default":"#89909d"}}},"backgroundChart":{"area":{"style":{"stroke":false,"fill":{"type":"palette","key":"dataZoomChartColor"}}},"line":{"style":{"stroke":{"type":"palette","key":"dataZoomChartColor"},"lineWidth":1}}}},"crosshair":{"trigger":"hover","bandField":{"visible":false,"line":{"type":"rect","visible":true,"style":{"fill":{"type":"palette","key":"axisGridColor"},"opacity":0.7,"lineDash":[]}},"label":{"visible":false,"style":{"fontWeight":"normal","fill":{"type":"palette","key":"axisMarkerFontColor"},"fontSize":12},"labelBackground":{"padding":{"bottom":0,"top":0,"left":2,"right":2},"style":{"fill":{"type":"palette","key":"axisMarkerBackgroundColor"},"outerBorder":{"stroke":{"type":"palette","key":"axisMarkerBackgroundColor"},"distance":0,"lineWidth":3},"cornerRadius":1}}}},"linearField":{"visible":false,"line":{"type":"line","visible":true,"style":{"stroke":{"type":"palette","key":"markLineStrokeColor"},"opacity":0.7,"lineDash":[2,3]}},"label":{"visible":false,"style":{"fontWeight":"normal","fill":{"type":"palette","key":"axisMarkerFontColor"},"fontSize":12},"labelBackground":{"padding":{"bottom":0,"top":0,"left":2,"right":2},"style":{"fill":{"type":"palette","key":"axisMarkerBackgroundColor"},"outerBorder":{"stroke":{"type":"palette","key":"axisMarkerBackgroundColor"},"distance":0,"lineWidth":3},"cornerRadius":1}}}}},"player":{"visible":true,"position":"start","padding":{"top":20,"bottom":20},"slider":{"space":10,"trackStyle":{"fill":{"type":"palette","key":"sliderTrackColor"},"fillOpacity":0.8},"railStyle":{"fill":{"type":"palette","key":"sliderRailColor"}},"handlerStyle":{"size":15,"stroke":{"type":"palette","key":"backgroundColor"},"lineWidth":2,"fill":{"type":"palette","key":"playerControllerColor"}}},"controller":{"start":{"order":0,"space":0,"style":{"size":25,"fill":{"type":"palette","key":"playerControllerColor"},"fillOpacity":0.8}},"pause":{"order":0,"space":0,"style":{"size":25,"fill":{"type":"palette","key":"playerControllerColor"},"fillOpacity":0.8}},"backward":{"order":0,"space":10,"position":"start","style":{"size":12,"fill":{"type":"palette","key":"playerControllerColor"},"fillOpacity":0.8}},"forward":{"order":0,"space":10,"position":"end","style":{"size":12,"fill":{"type":"palette","key":"playerControllerColor"},"fillOpacity":0.8}}}},"brush":{"style":{"fill":"#B0C8F9","fillOpacity":0.2,"stroke":"#B0C8F9","lineWidth":2},"brushMode":"single","brushType":"rect","brushMoved":true,"removeOnClick":true,"delayType":"throttle","delayTime":0},"indicator":{"title":{"visible":true,"autoLimit":false,"autoFit":false,"style":{"fontSize":32,"fill":{"type":"palette","key":"primaryFontColor"},"fontWeight":"normal","fillOpacity":1,"textBaseline":"top","textAlign":"center"}},"content":{"visible":true,"style":{"fontSize":20,"fill":{"type":"palette","key":"tertiaryFontColor"},"fontWeight":"normal","fillOpacity":1,"textBaseline":"top","textAlign":"center"}}},"title":{"padding":{"top":4,"bottom":20},"textStyle":{"fontSize":16,"lineHeight":"150%","fill":{"type":"palette","key":"primaryFontColor"}},"subtextStyle":{"fontSize":14,"lineHeight":"150%","fill":{"type":"palette","key":"tertiaryFontColor"}}},"mapLabel":{"visible":true,"offset":12,"position":"top","space":10,"nameLabel":{"visible":true,"style":{"textBaseline":"middle","textAlign":"left","fill":"black","fontSize":10}},"valueLabel":{"visible":true,"style":{"textBaseline":"middle","textAlign":"left","fill":"black","fontSize":10}},"background":{"visible":true,"padding":{"top":4,"bottom":4,"left":6,"right":6},"style":{"cornerRadius":2,"lineWidth":1,"fill":"white","stroke":"grey"}},"leader":{"visible":false,"style":{"lineWidth":1,"stroke":"red"}}},"poptip":{"visible":true,"position":"auto","padding":8,"titleStyle":{"fontSize":12,"fontWeight":"bold","fill":{"type":"palette","key":"primaryFontColor"}},"contentStyle":{"fontSize":12,"fill":{"type":"palette","key":"primaryFontColor"}},"panel":{"visible":true,"fill":{"type":"palette","key":"popupBackgroundColor"},"cornerRadius":3,"lineWidth":0,"shadowBlur":12,"shadowOffsetX":0,"shadowOffsetY":4,"shadowColor":{"type":"palette","key":"shadowColor"},"size":0,"space":12}},"totalLabel":{"visible":false,"offset":5,"overlap":{"clampForce":true,"strategy":[]},"smartInvert":false,"animation":false,"style":{"fontSize":14,"fill":{"type":"palette","key":"primaryFontColor"}}},"scrollBar":{"horizontal":{"height":10,"slider":{"style":{"fill":{"type":"palette","key":"scrollBarSliderColor"}}}},"vertical":{"width":10,"slider":{"style":{"fill":{"type":"palette","key":"scrollBarSliderColor"}}}}}},"animationThreshold":2000,"description":"Semi Design - light","type":"light"} \ No newline at end of file diff --git a/packages/vchart-arco-theme/scripts/export-theme.ts b/packages/vchart-arco-theme/scripts/export-theme.ts new file mode 100644 index 0000000..b6261f9 --- /dev/null +++ b/packages/vchart-arco-theme/scripts/export-theme.ts @@ -0,0 +1,55 @@ +/** + * 导出全量 theme json + */ +import fs from 'fs'; +import path from 'path'; +import { ThemeManager } from '@visactor/vchart'; +import { allThemeMap } from '../src'; + +const VCHART_THEME_PROJECT_ROOT = process.cwd(); +const targetPaths = [path.resolve(VCHART_THEME_PROJECT_ROOT, './public')]; + +const result: string[] = []; +allThemeMap.forEach((value, key) => { + let success = true; + if (!ThemeManager.themeExist(key)) { + ThemeManager.registerTheme(key, value); + } + const theme = ThemeManager.getTheme(key); + const themeJson = JSON.stringify(theme); + targetPaths.forEach(targetPath => { + try { + const fileName = path.resolve(targetPath, `${key}.json`); + if (fs.existsSync(fileName)) { + fs.unlinkSync(fileName); + } + fs.writeFileSync(path.resolve(targetPath, `${key}.json`), themeJson); + } catch { + success = false; + } + }); + if (success) { + result.push(key); + } +}); + +// 自动更新 readme +const readmePath = path.resolve(VCHART_THEME_PROJECT_ROOT, './README.md'); +const readme = fs.readFileSync(readmePath, 'utf8'); +const startTag = ''; +const endTag = ''; +const readmeThemeListStart = readme.indexOf(startTag) + startTag.length; +const readmeThemeListEnd = readme.indexOf(endTag); +const newReadme = `${readme.slice(0, readmeThemeListStart)}\n\n${[...allThemeMap.keys()] + .map( + key => + `- [${key}](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-semi-theme/public/${key}.json) ${ + allThemeMap.get(key)?.description ?? '' + }` + ) + .join('\n')}\n\n${readme.slice(readmeThemeListEnd)}`; +fs.writeFileSync(readmePath, newReadme); + +console.warn(`\x1B[33m + 主题 ${result.join(', ')} 已导出 +\x1B[0m`); diff --git a/packages/vchart-arco-theme/src/common/constants.ts b/packages/vchart-arco-theme/src/common/constants.ts new file mode 100644 index 0000000..dc0ace2 --- /dev/null +++ b/packages/vchart-arco-theme/src/common/constants.ts @@ -0,0 +1,3 @@ +export const ARCO_FONT_FAMILY = + // eslint-disable-next-line max-len + 'Inter,-apple-system,BlinkMacSystemFont,PingFang SC,Hiragino Sans GB,noto sans,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif'; diff --git a/packages/vchart-arco-theme/src/common/data-scheme.ts b/packages/vchart-arco-theme/src/common/data-scheme.ts new file mode 100644 index 0000000..f97f027 --- /dev/null +++ b/packages/vchart-arco-theme/src/common/data-scheme.ts @@ -0,0 +1,46 @@ +import type { DataSchemeItem, ProgressiveDataScheme } from '@visactor/vchart'; + +/** 标准色板 */ +export const dataScheme: ProgressiveDataScheme = [ + // 第一档颜色（数据项 <= 10） + { + maxDomainLength: 10, + scheme: [ + '#4080FF', + '#57A9FB', + '#FF7D00', + '#4CD263', + '#A871E3', + '#F7BA1E', + '#9FDB1D', + '#F979B7', + '#0FC6C2', + '#E865DF' + ] + }, + // 第二档颜色（数据项 > 10） + { + scheme: [ + '#4080FF', + '#94BFFF', + '#57A9FB', + '#9FD4FD', + '#FF7D00', + '#FFCF8B', + '#4CD263', + '#7BE188', + '#A871E3', + '#C396ED', + '#F7BA1E', + '#FADC6D', + '#9FDB1D', + '#C9E968', + '#F979B7', + '#FB9DC7', + '#0FC6C2', + '#86E8DD', + '#E865DF', + '#F7BAEF' + ] + } +]; diff --git a/packages/vchart-arco-theme/src/common/token-map.ts b/packages/vchart-arco-theme/src/common/token-map.ts new file mode 100644 index 0000000..948affc --- /dev/null +++ b/packages/vchart-arco-theme/src/common/token-map.ts @@ -0,0 +1,103 @@ +import type { DataSchemeTokenMap, PaletteTokenMap } from '@visactor/vchart-theme-utils/esm/interface'; + +export const paletteTokenMap: PaletteTokenMap = { + /** 背景色 */ + backgroundColor: '--color-bg-1', + /** 图表边框色 */ + borderColor: '--color-border', + /** 鼠标 hover 项背景颜色 */ + hoverBackgroundColor: '--color-secondary-hover', + /** 滑块类组件背景条填充颜色 */ + sliderRailColor: '--color-fill-3', + /** 滑块类组件滑块填充颜色 */ + sliderHandleColor: '--color-bg-2', + /** 滑块类组件已选范围填充颜色 */ + sliderTrackColor: '--primary-6', + /** 浮层背景区域颜色 */ + popupBackgroundColor: '--color-bg-popup', + + /** 主要字色 */ + primaryFontColor: '--color-text-1', + /** 次要字色 */ + secondaryFontColor: '--color-text-2', + /** 第三字色 */ + tertiaryFontColor: '--color-text-3', + /** 轴标签字色 */ + axisLabelFontColor: '--color-text-3', + /** 禁用字色 */ + disableFontColor: '--color-text-4', + /** 轴高亮标记字色 */ + axisMarkerFontColor: '--color-bg-1', + + /** 轴网格线颜色 */ + axisGridColor: '--color-border', + /** 轴线颜色 */ + axisDomainColor: '--color-neutral-3', + /** 缩略轴滑块描边颜色 */ + dataZoomHandlerStrokeColor: '--color-neutral-5', + /** 缩略轴图表区域颜色 */ + dataZoomChartColor: '--color-fill-4', + + /** 播放器控制器填充颜色 */ + playerControllerColor: '--primary-6', + + /** 轴高亮标记背景色 */ + axisMarkerBackgroundColor: '--color-text-1', + /** 标注标签背景颜色 */ + markLabelBackgroundColor: '--color-border', + /** 标注线颜色 */ + markLineStrokeColor: '--color-text-2', + + /** 危险色 */ + dangerColor: '--danger-6', + /** 警告色 */ + warningColor: '--warning-6', + /** 成功色 */ + successColor: '--success-6', + /** 信息色 */ + infoColor: '--arcoblue-6' +}; + +export const dataSchemeTokenMap: DataSchemeTokenMap = [ + // 第一档颜色（数据项 <= 10） + { + maxDomainLength: 10, + scheme: [ + '--color-data-1', + '--color-data-3', + '--color-data-5', + '--color-data-7', + '--color-data-9', + '--color-data-11', + '--color-data-13', + '--color-data-15', + '--color-data-17', + '--color-data-19' + ] + }, + // 第二档颜色（数据项 > 10） + { + scheme: [ + '--color-data-1', + '--color-data-2', + '--color-data-3', + '--color-data-4', + '--color-data-5', + '--color-data-6', + '--color-data-7', + '--color-data-8', + '--color-data-9', + '--color-data-10', + '--color-data-11', + '--color-data-12', + '--color-data-13', + '--color-data-14', + '--color-data-15', + '--color-data-16', + '--color-data-17', + '--color-data-18', + '--color-data-19', + '--color-data-20' + ] + } +]; diff --git a/packages/vchart-arco-theme/src/dark/color-scheme.ts b/packages/vchart-arco-theme/src/dark/color-scheme.ts new file mode 100644 index 0000000..fe09918 --- /dev/null +++ b/packages/vchart-arco-theme/src/dark/color-scheme.ts @@ -0,0 +1,68 @@ +import type { BuiltinColorPalette, IThemeColorScheme } from '@visactor/vchart'; +import { dataScheme } from '../common/data-scheme'; + +export const colorScheme: IThemeColorScheme = { + default: { + dataScheme, + palette: { + /** 背景色 */ + backgroundColor: '#17171a', + /** 图表边框色 */ + borderColor: '#333335', + /** 默认阴影颜色 */ + shadowColor: 'rgba(0,0,0,0.1)', + /** 鼠标 hover 项背景颜色 */ + hoverBackgroundColor: 'rgba(197,197,197,0.16)', + /** 滑块类组件背景条填充颜色 */ + sliderRailColor: 'hsla(0,0%,100%,0.12)', + /** 滑块类组件滑块填充颜色 */ + sliderHandleColor: '#232324', + /** 滑块类组件已选范围填充颜色 */ + sliderTrackColor: 'rgba(60,126,255,1)', + /** 浮层背景区域颜色 */ + popupBackgroundColor: '#373739', + + /** 主要字色 */ + primaryFontColor: 'hsla(0,0%,100%,0.9)', + /** 次要字色 */ + secondaryFontColor: 'hsla(0,0%,100%,0.7)', + /** 第三字色 */ + tertiaryFontColor: 'hsla(0,0%,100%,0.5)', + /** 轴标签字色 */ + axisLabelFontColor: 'hsla(0,0%,100%,0.5)', + /** 禁用字色 */ + disableFontColor: 'hsla(0,0%,100%,0.3)', + /** 轴高亮标记字色 */ + axisMarkerFontColor: '#17171a', + + /** 轴网格线颜色 */ + axisGridColor: '#333335', + /** 轴线颜色 */ + axisDomainColor: 'rgba(72,72,73,1)', + + /** 缩略轴滑块描边颜色 */ + dataZoomHandleStrokeColor: 'rgba(120,120,122,1)', + /** 缩略轴图表区域颜色 */ + dataZoomChartColor: 'hsla(0,0%,100%,0.16)', + + /** 播放器控制器填充颜色 */ + playerControllerColor: 'rgba(60,126,255,1)', + + /** 轴高亮标记背景色 */ + axisMarkerBackgroundColor: 'hsla(0,0%,100%,0.9)', + /** 标注标签背景颜色 */ + markLabelBackgroundColor: '#333335', + /** 标注线颜色 */ + markLineStrokeColor: 'hsla(0,0%,100%,0.7)', + + /** 危险色 */ + dangerColor: 'rgba(247,105,101,1)', + /** 警告色 */ + warningColor: 'rgba(255,150,38,1)', + /** 成功色 */ + successColor: 'rgba(39,195,70,1)', + /** 信息色 */ + infoColor: 'rgba(60,126,255,1)' + } as Partial + } +}; diff --git a/packages/vchart-arco-theme/src/dark/index.ts b/packages/vchart-arco-theme/src/dark/index.ts new file mode 100644 index 0000000..6ec9038 --- /dev/null +++ b/packages/vchart-arco-theme/src/dark/index.ts @@ -0,0 +1,11 @@ +import type { ITheme } from '@visactor/vchart'; +import { colorScheme } from './color-scheme'; +import { ARCO_FONT_FAMILY } from '../common/constants'; + +export const semiDesignDark: ITheme = { + name: 'semiDesignDark', + description: 'Semi Design - dark', + type: 'dark', + fontFamily: ARCO_FONT_FAMILY, + colorScheme +}; diff --git a/packages/vchart-arco-theme/src/generator.ts b/packages/vchart-arco-theme/src/generator.ts new file mode 100644 index 0000000..97dda66 --- /dev/null +++ b/packages/vchart-arco-theme/src/generator.ts @@ -0,0 +1,30 @@ +import type { IColorSchemeStruct, ITheme, IThemeColorScheme, ProgressiveDataScheme } from '@visactor/vchart'; +import { semiDesignDark } from './dark'; +import { semiDesignLight } from './light'; +import { dataSchemeTokenMap, paletteTokenMap } from './common/token-map'; +import { generateDataScheme, generatePalette } from '@visactor/vchart-theme-utils'; + +const baseThemeMap = { + light: semiDesignLight, + dark: semiDesignDark +}; + +export const generateVChartSemiTheme = (mode: 'light' | 'dark', chartContainer?: HTMLElement): ITheme => { + const baseTheme = baseThemeMap[mode]; + const { dataScheme, palette } = baseTheme.colorScheme.default as IColorSchemeStruct; + const colorScheme: IThemeColorScheme = { + default: { + dataScheme: generateDataScheme( + mode, + dataSchemeTokenMap, + dataScheme as ProgressiveDataScheme, + chartContainer + ), + palette: generatePalette(mode, paletteTokenMap, palette, chartContainer) + } + }; + return { + ...baseTheme, + colorScheme + }; +}; diff --git a/packages/vchart-arco-theme/src/index.ts b/packages/vchart-arco-theme/src/index.ts new file mode 100644 index 0000000..16491cd --- /dev/null +++ b/packages/vchart-arco-theme/src/index.ts @@ -0,0 +1,53 @@ +import type { ITheme } from '@visactor/vchart'; +// eslint-disable-next-line no-duplicate-imports +import VChart from '@visactor/vchart'; +import type { IInitVChartSemiThemeOption } from './interface'; +import { generateThemeName, getCurrentMode, observeAttribute, observeThemeSwitch } from './util'; +import { generateVChartSemiTheme } from './generator'; + +export * from './theme-map'; +export * from './generator'; +export * from './light'; +export * from './dark'; + +export const initVChartSemiTheme = (options?: IInitVChartSemiThemeOption) => { + const { defaultMode, isWatchingMode = true, isWatchingThemeSwitch = false } = options ?? {}; + + switchVChartSemiTheme(false, defaultMode); + + if (isWatchingMode) { + observeAttribute(document.body, 'theme-mode', () => switchVChartSemiTheme()); + } + if (isWatchingThemeSwitch) { + observeThemeSwitch(() => { + const mode = getCurrentMode(); + const cacheColorScheme = JSON.stringify(generateVChartSemiTheme(mode).colorScheme); + // 轮询直到监测到主题变化 + let times = 0; + const timer = setInterval(() => { + const theme = generateVChartSemiTheme(mode); + if (times > 50 || cacheColorScheme !== JSON.stringify(theme.colorScheme)) { + switchVChartSemiTheme(true, mode, theme); + clearInterval(timer); + } + times++; + }, 100); + }); + } +}; + +export const switchVChartSemiTheme = (force?: boolean, mode?: 'light' | 'dark', theme?: ITheme) => { + if (!mode) { + mode = getCurrentMode(); + } + const themeName = generateThemeName(mode); + if (!force && VChart.ThemeManager.getCurrentTheme() === themeName) { + return; + } else if (force) { + VChart.ThemeManager.removeTheme(themeName); + } + if (!VChart.ThemeManager.themeExist(themeName)) { + VChart.ThemeManager.registerTheme(themeName, theme ?? generateVChartSemiTheme(mode)); + } + VChart.ThemeManager.setCurrentTheme(themeName); +}; diff --git a/packages/vchart-arco-theme/src/interface.ts b/packages/vchart-arco-theme/src/interface.ts new file mode 100644 index 0000000..0503daf --- /dev/null +++ b/packages/vchart-arco-theme/src/interface.ts @@ -0,0 +1,8 @@ +export interface IInitVChartSemiThemeOption { + /** 初始亮暗色模式 */ + defaultMode?: 'light' | 'dark'; + /** 是否监听亮暗色模式自动更改图表主题 */ + isWatchingMode?: boolean; + /** 是否监听主题变化自动更改图表主题（适用于 semi 官方主题切换接口：https://semi.design/dsm/install_switcher）*/ + isWatchingThemeSwitch?: boolean; +} diff --git a/packages/vchart-arco-theme/src/light/color-scheme.ts b/packages/vchart-arco-theme/src/light/color-scheme.ts new file mode 100644 index 0000000..10f735d --- /dev/null +++ b/packages/vchart-arco-theme/src/light/color-scheme.ts @@ -0,0 +1,68 @@ +import type { BuiltinColorPalette, IThemeColorScheme } from '@visactor/vchart'; +import { dataScheme } from '../common/data-scheme'; + +export const colorScheme: IThemeColorScheme = { + default: { + dataScheme, + palette: { + /** 背景色 */ + backgroundColor: 'rgba(255,255,255,1)', + /** 图表边框色 */ + borderColor: 'rgba(229,230,235,1)', + /** 默认阴影颜色 */ + shadowColor: 'rgba(0,0,0,0.1)', + /** 鼠标 hover 项背景颜色 */ + hoverBackgroundColor: 'rgba(229,230,235,1)', + /** 滑块类组件背景条填充颜色 */ + sliderRailColor: 'rgba(229,230,235,1)', + /** 滑块类组件滑块填充颜色 */ + sliderHandleColor: 'rgba(255,255,255,1)', + /** 滑块类组件已选范围填充颜色 */ + sliderTrackColor: 'rgba(22,93,255,1)', + /** 浮层背景区域颜色 */ + popupBackgroundColor: 'rgba(255,255,255,1)', + + /** 主要字色 */ + primaryFontColor: 'rgba(29,33,41,1)', + /** 次要字色 */ + secondaryFontColor: 'rgba(78,89,105,1)', + /** 第三字色 */ + tertiaryFontColor: 'rgba(134,144,156,1)', + /** 轴标签字色 */ + axisLabelFontColor: 'rgba(134,144,156,1)', + /** 禁用字色 */ + disableFontColor: 'rgba(201,205,212,1)', + /** 轴高亮标记字色 */ + axisMarkerFontColor: 'rgba(255,255,255,1)', + + /** 轴网格线颜色 */ + axisGridColor: 'rgba(229,230,235,1)', + /** 轴线颜色 */ + axisDomainColor: 'rgba(229,230,235,1)', + + /** 缩略轴滑块描边颜色 */ + dataZoomHandleStrokeColor: 'rgba(169,174,184,1)', + /** 缩略轴图表区域颜色 */ + dataZoomChartColor: 'rgba(201,205,212,1)', + + /** 播放器控制器填充颜色 */ + playerControllerColor: 'rgba(22,93,255,1)', + + /** 轴高亮标记背景色 */ + axisMarkerBackgroundColor: 'rgba(29,33,41,1)', + /** 标注标签背景颜色 */ + markLabelBackgroundColor: 'rgba(229,230,235,1)', + /** 标注线颜色 */ + markLineStrokeColor: 'rgba(78,89,105,1)', + + /** 危险色 */ + dangerColor: 'rgba(245,63,63,1)', + /** 警告色 */ + warningColor: 'rgba(255,125,0,1)', + /** 成功色 */ + successColor: 'rgba(0,180,42,1)', + /** 信息色 */ + infoColor: 'rgba(22,93,255,1)' + } as Partial + } +}; diff --git a/packages/vchart-arco-theme/src/light/index.ts b/packages/vchart-arco-theme/src/light/index.ts new file mode 100644 index 0000000..57cb8eb --- /dev/null +++ b/packages/vchart-arco-theme/src/light/index.ts @@ -0,0 +1,11 @@ +import type { ITheme } from '@visactor/vchart'; +import { colorScheme } from './color-scheme'; +import { ARCO_FONT_FAMILY } from '../common/constants'; + +export const semiDesignLight: ITheme = { + name: 'semiDesignLight', + description: 'Semi Design - light', + type: 'light', + fontFamily: ARCO_FONT_FAMILY, + colorScheme +}; diff --git a/packages/vchart-arco-theme/src/theme-map.ts b/packages/vchart-arco-theme/src/theme-map.ts new file mode 100644 index 0000000..4298c0f --- /dev/null +++ b/packages/vchart-arco-theme/src/theme-map.ts @@ -0,0 +1,9 @@ +import type { ITheme } from '@visactor/vchart'; +import { semiDesignLight } from './light'; +import { semiDesignDark } from './dark'; + +export const allThemeMap = new Map([ + // semi design 主题 + [semiDesignLight.name, semiDesignLight], + [semiDesignDark.name, semiDesignDark] +]) as Map; diff --git a/packages/vchart-arco-theme/src/util.ts b/packages/vchart-arco-theme/src/util.ts new file mode 100644 index 0000000..811a16c --- /dev/null +++ b/packages/vchart-arco-theme/src/util.ts @@ -0,0 +1,20 @@ +export * from '@visactor/vchart-theme-utils'; + +export const getCurrentMode = () => + document.body.hasAttribute('theme-mode') && document.body.getAttribute('theme-mode') === 'dark' ? 'dark' : 'light'; + +export const generateThemeName = (mode: 'light' | 'dark') => `semiDesign${mode[0].toUpperCase()}${mode.slice(1)}`; + +export const observeThemeSwitch = (callback: (mutation: MutationRecord, node: HTMLLinkElement) => void) => { + const observer = new MutationObserver(mutations => { + mutations.forEach(mutation => { + if (mutation.addedNodes.length === 1) { + const node = mutation.addedNodes[0] as HTMLLinkElement; + if (node.tagName === 'LINK' && node.getAttribute?.('semi-theme-switcher') === 'true') { + callback(mutation, node); + } + } + }); + }); + observer.observe(document.body, { childList: true }); +}; diff --git a/packages/vchart-arco-theme/tsconfig.eslint.json b/packages/vchart-arco-theme/tsconfig.eslint.json new file mode 100644 index 0000000..a841f84 --- /dev/null +++ b/packages/vchart-arco-theme/tsconfig.eslint.json @@ -0,0 +1,11 @@ +{ + "extends": "@internal/ts-config/tsconfig.base.json", + "compilerOptions": { + "types": ["jest", "offscreencanvas", "node"], + "lib": ["DOM", "ESNext"], + "baseUrl": "./", + "rootDir": "./" + }, + "include": ["src", "__tests__"] + // "exclude": ["bugserver-config"] +} diff --git a/packages/vchart-arco-theme/tsconfig.json b/packages/vchart-arco-theme/tsconfig.json new file mode 100644 index 0000000..9288787 --- /dev/null +++ b/packages/vchart-arco-theme/tsconfig.json @@ -0,0 +1,18 @@ +{ + "extends": "@internal/ts-config/tsconfig.base.json", + "compilerOptions": { + "types": ["jest", "offscreencanvas", "node"], + "lib": ["DOM", "ESNext"], + "baseUrl": "./", + "rootDir": "./src", + "outDir": "./es", + "composite": true + }, + "ts-node": { + "transpileOnly": true, + "compilerOptions": { + "module": "commonjs" + } + }, + "include": ["src"] +} diff --git a/packages/vchart-arco-theme/tsconfig.test.json b/packages/vchart-arco-theme/tsconfig.test.json new file mode 100644 index 0000000..37837cb --- /dev/null +++ b/packages/vchart-arco-theme/tsconfig.test.json @@ -0,0 +1,5 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": {}, + "references": [] +} diff --git a/packages/vchart-semi-theme/package.json b/packages/vchart-semi-theme/package.json index 5c91ef0..27d7c87 100644 --- a/packages/vchart-semi-theme/package.json +++ b/packages/vchart-semi-theme/package.json @@ -28,6 +28,9 @@ "@visactor/vchart": "~1.7.2", "@douyinfe/semi-ui": "^2.46.1" }, + "dependencies": { + "@visactor/vchart-theme-utils": "workspace:1.7.2" + }, "devDependencies": { "@esbuild-plugins/node-globals-polyfill": "0.1.1", "@esbuild-plugins/node-modules-polyfill": "0.1.4", diff --git a/packages/vchart-semi-theme/src/common/token-map.ts b/packages/vchart-semi-theme/src/common/token-map.ts index 367c345..1c62178 100644 --- a/packages/vchart-semi-theme/src/common/token-map.ts +++ b/packages/vchart-semi-theme/src/common/token-map.ts @@ -1,13 +1,6 @@ -import type { BuiltinColorPalette, ProgressiveDataScheme } from '@visactor/vchart'; +import type { DataSchemeTokenMap, PaletteTokenMap } from '@visactor/vchart-theme-utils/esm/interface'; -export const paletteTokenMap: Record< - keyof BuiltinColorPalette, - | string - | { - light: string; - dark: string; - } -> = { +export const paletteTokenMap: PaletteTokenMap = { /** 背景色 */ backgroundColor: '--semi-color-bg-0', /** 图表边框色 */ @@ -66,7 +59,7 @@ export const paletteTokenMap: Record< infoColor: '--semi-color-info' }; -export const dataSchemeTokenMap: ProgressiveDataScheme = [ +export const dataSchemeTokenMap: DataSchemeTokenMap = [ // 第一档颜色（数据项 <= 10） { maxDomainLength: 10, diff --git a/packages/vchart-semi-theme/src/generator.ts b/packages/vchart-semi-theme/src/generator.ts index c81cbf2..97dda66 100644 --- a/packages/vchart-semi-theme/src/generator.ts +++ b/packages/vchart-semi-theme/src/generator.ts @@ -1,14 +1,8 @@ -import type { - IColorSchemeStruct, - IProgressiveDataSchemeCase, - ITheme, - IThemeColorScheme, - ProgressiveDataScheme -} from '@visactor/vchart'; +import type { IColorSchemeStruct, ITheme, IThemeColorScheme, ProgressiveDataScheme } from '@visactor/vchart'; import { semiDesignDark } from './dark'; import { semiDesignLight } from './light'; import { dataSchemeTokenMap, paletteTokenMap } from './common/token-map'; -import { getTokenValue } from './util'; +import { generateDataScheme, generatePalette } from '@visactor/vchart-theme-utils'; const baseThemeMap = { light: semiDesignLight, @@ -17,10 +11,16 @@ const baseThemeMap = { export const generateVChartSemiTheme = (mode: 'light' | 'dark', chartContainer?: HTMLElement): ITheme => { const baseTheme = baseThemeMap[mode]; + const { dataScheme, palette } = baseTheme.colorScheme.default as IColorSchemeStruct; const colorScheme: IThemeColorScheme = { default: { - dataScheme: generateDataScheme(mode, chartContainer), - palette: generatePalette(mode, chartContainer) + dataScheme: generateDataScheme( + mode, + dataSchemeTokenMap, + dataScheme as ProgressiveDataScheme, + chartContainer + ), + palette: generatePalette(mode, paletteTokenMap, palette, chartContainer) } }; return { @@ -28,32 +28,3 @@ export const generateVChartSemiTheme = (mode: 'light' | 'dark', chartContainer?: colorScheme }; }; - -/** 生成数据色板 */ -const generateDataScheme = (mode: 'light' | 'dark', chartContainer?: HTMLElement): ProgressiveDataScheme => { - const baseTheme = baseThemeMap[mode]; - return dataSchemeTokenMap.map((item, i) => { - const { scheme } = (baseTheme.colorScheme.default as IColorSchemeStruct).dataScheme[ - i - ] as IProgressiveDataSchemeCase; - return { - ...item, - scheme: item.scheme.map((token, j) => getTokenValue(token, scheme?.[j], chartContainer)) - }; - }); -}; - -/** 生成语义色板 */ -const generatePalette = (mode: 'light' | 'dark', chartContainer?: HTMLElement): any => { - const baseTheme = baseThemeMap[mode]; - const newPalette = {}; - Object.keys(paletteTokenMap).forEach(key => { - const token = typeof paletteTokenMap[key] === 'object' ? paletteTokenMap[key][mode] : paletteTokenMap[key]; - newPalette[key] = getTokenValue( - token, - (baseTheme.colorScheme.default as IColorSchemeStruct).palette[key], - chartContainer - ); - }); - return newPalette; -}; diff --git a/packages/vchart-semi-theme/src/util.ts b/packages/vchart-semi-theme/src/util.ts index b1f2229..811a16c 100644 --- a/packages/vchart-semi-theme/src/util.ts +++ b/packages/vchart-semi-theme/src/util.ts @@ -1,31 +1,10 @@ -export const getTokenValue = (token: string, defaultValue?: T, chartContainer?: HTMLElement): T | string => { - const value = getComputedStyle(chartContainer ?? document.body).getPropertyValue(token) || defaultValue; - if (value && !isNaN(value[0])) { - return `rgba(${value})`; - } - return value; -}; +export * from '@visactor/vchart-theme-utils'; export const getCurrentMode = () => document.body.hasAttribute('theme-mode') && document.body.getAttribute('theme-mode') === 'dark' ? 'dark' : 'light'; export const generateThemeName = (mode: 'light' | 'dark') => `semiDesign${mode[0].toUpperCase()}${mode.slice(1)}`; -export const observeAttribute = ( - element: HTMLElement, - attribute: string, - callback: (mutation: MutationRecord) => void -) => { - const observer = new MutationObserver(mutations => { - mutations.forEach(mutation => { - if (mutation.attributeName === attribute) { - callback(mutation); - } - }); - }); - observer.observe(element, { attributes: true }); -}; - export const observeThemeSwitch = (callback: (mutation: MutationRecord, node: HTMLLinkElement) => void) => { const observer = new MutationObserver(mutations => { mutations.forEach(mutation => { diff --git a/packages/vchart-theme-utils/.eslintignore b/packages/vchart-theme-utils/.eslintignore new file mode 100644 index 0000000..f9724a9 --- /dev/null +++ b/packages/vchart-theme-utils/.eslintignore @@ -0,0 +1,9 @@ +dist +build +esm +cjs +node_modules +coverage + +# ignore big data files +__tests__/data/* diff --git a/packages/vchart-theme-utils/.eslintrc.js b/packages/vchart-theme-utils/.eslintrc.js new file mode 100644 index 0000000..a32edaf --- /dev/null +++ b/packages/vchart-theme-utils/.eslintrc.js @@ -0,0 +1,19 @@ +require('@rushstack/eslint-patch/modern-module-resolution'); + +module.exports = { + extends: ['@internal/eslint-config/profile/lib'], + overrides: [ + { + files: ['**/__tests__/**', '**/*.test.ts'], + // 测试文件允许以下规则 + rules: { + '@typescript-eslint/no-empty-function': 'off', + 'no-console': 'off', + 'dot-notation': 'off', + 'promise/catch-or-return': 'off' + } + } + ], + parserOptions: { tsconfigRootDir: __dirname, project: './tsconfig.eslint.json' }, + ignorePatterns: ['scripts/**', 'bundler.config.js'] +}; diff --git a/packages/vchart-theme-utils/CHANGELOG.json b/packages/vchart-theme-utils/CHANGELOG.json new file mode 100644 index 0000000..9393455 --- /dev/null +++ b/packages/vchart-theme-utils/CHANGELOG.json @@ -0,0 +1,11 @@ +{ + "name": "@visactor/vchart-theme", + "entries": [ + { + "version": "1.7.2", + "tag": "@visactor/vchart-theme_v1.7.2", + "date": "Wed, 29 Nov 2023 21:46:11 GMT", + "comments": {} + } + ] +} diff --git a/packages/vchart-theme-utils/CHANGELOG.md b/packages/vchart-theme-utils/CHANGELOG.md new file mode 100644 index 0000000..b8df95e --- /dev/null +++ b/packages/vchart-theme-utils/CHANGELOG.md @@ -0,0 +1,9 @@ +# Change Log - @visactor/vchart-theme + +This log was last generated on Wed, 29 Nov 2023 21:46:11 GMT and should not be manually modified. + +## 1.7.2 +Wed, 29 Nov 2023 21:46:11 GMT + +_Initial release_ + diff --git a/packages/vchart-theme-utils/README.md b/packages/vchart-theme-utils/README.md new file mode 100644 index 0000000..acf7e92 --- /dev/null +++ b/packages/vchart-theme-utils/README.md @@ -0,0 +1,61 @@ +# @visactor/vchart-theme + +## Description + +The extension themes for [VChart](https://github.com/VisActor/VChart). + +The list of themes included here is as follows, with links to the theme JSON files: + + + + +- [vScreenVolcanoBlue](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/vScreenVolcanoBlue.json) 大屏-火山蓝 +- [vScreenClean](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/vScreenClean.json) 大屏-清新蜡笔 +- [vScreenOutskirts](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/vScreenOutskirts.json) 大屏-郊外 +- [vScreenBlueOrange](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/vScreenBlueOrange.json) 大屏-汽车蓝橙 +- [vScreenFinanceYellow](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/vScreenFinanceYellow.json) 大屏-金融黄 +- [vScreenWenLvCyan](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/vScreenWenLvCyan.json) 大屏-文旅青 +- [vScreenElectricGreen](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/vScreenElectricGreen.json) 大屏-电力绿 +- [vScreenECommercePurple](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/vScreenECommercePurple.json) 大屏-电商紫 +- [vScreenRedBlue](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/vScreenRedBlue.json) 大屏-红蓝 +- [vScreenPartyRed](https://raw.githubusercontent.com/VisActor/vchart-theme/main/packages/vchart-theme/public/vScreenPartyRed.json) 大屏-党建红 + + + +## Usage + +Import the full theme map and register them in sequence: + +```typescript +import { allThemeMap } from '@visactor/vchart-theme'; +import VChart from '@visactor/vchart'; + +// register themes +allThemeMap.forEach((theme, name) => { + VChart.ThemeManager.registerTheme(name, theme); +}); + +// apply a theme +VChart.ThemeManager.setCurrentTheme('vScreenVolcanoBlue'); +``` + +If you only use a specific theme, you can also import the specific theme JSON from this package: + +```typescript +import vScreenVolcanoBlue from '@visactor/vchart-theme/public/vScreenVolcanoBlue.json'; +import VChart from '@visactor/vchart'; + +// register the theme +VChart.ThemeManager.registerTheme('vScreenVolcanoBlue', vScreenVolcanoBlue); + +// apply the theme +VChart.ThemeManager.setCurrentTheme('vScreenVolcanoBlue'); +``` + +## Debug + +Run the following command from any location in the project to start the dev server: + +``` +rush theme +``` diff --git a/packages/vchart-theme-utils/__tests__/index.test.ts b/packages/vchart-theme-utils/__tests__/index.test.ts new file mode 100644 index 0000000..efc4c58 --- /dev/null +++ b/packages/vchart-theme-utils/__tests__/index.test.ts @@ -0,0 +1,6 @@ +describe('vchart-theme', () => { + it('for test.', () => { + const a = 1; + expect(a).toBe(1); + }); +}); diff --git a/packages/vchart-theme-utils/bundler.config.js b/packages/vchart-theme-utils/bundler.config.js new file mode 100644 index 0000000..0d944a8 --- /dev/null +++ b/packages/vchart-theme-utils/bundler.config.js @@ -0,0 +1,13 @@ +/** + * @type {Partial} + */ +module.exports = { + formats: ['cjs', 'es', 'umd'], + outputDir: { + es: 'esm', + cjs: 'cjs', + umd: 'build' + }, + name: 'vchart-theme', + umdOutputFilename: 'index' +}; diff --git a/packages/vchart-theme-utils/jest.config.js b/packages/vchart-theme-utils/jest.config.js new file mode 100644 index 0000000..47e294b --- /dev/null +++ b/packages/vchart-theme-utils/jest.config.js @@ -0,0 +1,9 @@ +const path = require('path'); +const baseJestConfig = require('@internal/jest-config/jest.base'); + +module.exports = { + ...baseJestConfig, + moduleNameMapper: { + ...baseJestConfig.moduleNameMapper + } +}; diff --git a/packages/vchart-theme-utils/package.json b/packages/vchart-theme-utils/package.json new file mode 100644 index 0000000..a94dfd8 --- /dev/null +++ b/packages/vchart-theme-utils/package.json @@ -0,0 +1,70 @@ +{ + "name": "@visactor/vchart-theme-utils", + "version": "1.7.2", + "description": "Utils of extended themes for VChart", + "sideEffects": false, + "main": "cjs/index.js", + "module": "esm/index.js", + "types": "esm/index.d.ts", + "files": [ + "cjs", + "esm", + "build" + ], + "scripts": { + "compile": "tsc --noEmit", + "eslint": "eslint --debug --fix src/", + "build": "bundle", + "dev": "bundle --clean -f es -w", + "test": "jest", + "test-cov": "jest -w 16 --coverage", + "test-live": "npm run test-watch __tests__/unit/", + "test-watch": "DEBUG_MODE=1 jest --watch" + }, + "peerDependencies": { + "@visactor/vchart": "~1.7.2" + }, + "devDependencies": { + "@internal/bundler": "workspace:*", + "@internal/eslint-config": "workspace:*", + "@internal/ts-config": "workspace:*", + "@internal/jest-config": "workspace:*", + "jest": "~29.5.0", + "@jest/globals": "~29.5.0", + "ts-jest": "~29.1.0", + "@types/jest": "~29.5.0", + "@rushstack/eslint-patch": "~1.1.4", + "@visactor/vchart": "~1.7.2", + "@visactor/vchart-types": "~1.7.2", + "eslint": "~8.18.0", + "vite": "^4.5.0", + "typescript": "4.9.5", + "@types/node": "*", + "@types/offscreencanvas": "2019.6.4", + "husky": "7.0.4", + "lint-staged": "12.3.7", + "magic-string": "^0.25.7", + "prettier": "2.6.1", + "react": "^18.0.0", + "react-device-detect": "^2.2.2", + "ts-loader": "8.0.2", + "ts-node": "10.9.0", + "tslib": "2.3.1", + "tslint": "5.12.1" + }, + "publishConfig": { + "access": "public" + }, + "homepage": "https://www.visactor.io", + "bugs": "https://github.com/VisActor/vchart-theme/issues", + "repository": { + "type": "git", + "url": "https://github.com/VisActor/vchart-theme.git", + "directory": "packages/vchart-theme-utils" + }, + "author": { + "name": "VisActor", + "url": "https://www.visactor.io/" + }, + "license": "MIT" +} diff --git a/packages/vchart-theme-utils/src/generator.ts b/packages/vchart-theme-utils/src/generator.ts new file mode 100644 index 0000000..b605b69 --- /dev/null +++ b/packages/vchart-theme-utils/src/generator.ts @@ -0,0 +1,36 @@ +import type { IProgressiveDataSchemeCase, ProgressiveDataScheme } from '@visactor/vchart'; +import { getTokenValue } from './utils'; +import type { DataSchemeTokenMap, PaletteTokenMap } from './interface'; + +/** 生成数据色板 */ +export const generateDataScheme = ( + mode: 'light' | 'dark', + tokenMap: DataSchemeTokenMap, + baseDataScheme: ProgressiveDataScheme, + chartContainer?: HTMLElement +): ProgressiveDataScheme => { + return tokenMap.map((item, i) => { + const { scheme } = baseDataScheme[i] as IProgressiveDataSchemeCase; + return { + ...item, + scheme: item.scheme.map((token, j) => { + return getTokenValue(typeof token === 'object' ? token[mode] : token, scheme?.[j], chartContainer); + }) + }; + }); +}; + +/** 生成语义色板 */ +export const generatePalette = ( + mode: 'light' | 'dark', + tokenMap: PaletteTokenMap, + basePalette: Record, + chartContainer?: HTMLElement +): any => { + const newPalette = {}; + Object.keys(tokenMap).forEach(key => { + const token = typeof tokenMap[key] === 'object' ? tokenMap[key][mode] : tokenMap[key]; + newPalette[key] = getTokenValue(token, basePalette[key], chartContainer); + }); + return newPalette; +}; diff --git a/packages/vchart-theme-utils/src/index.ts b/packages/vchart-theme-utils/src/index.ts new file mode 100644 index 0000000..212701a --- /dev/null +++ b/packages/vchart-theme-utils/src/index.ts @@ -0,0 +1,2 @@ +export * from './utils'; +export * from './generator'; diff --git a/packages/vchart-theme-utils/src/interface.ts b/packages/vchart-theme-utils/src/interface.ts new file mode 100644 index 0000000..c846280 --- /dev/null +++ b/packages/vchart-theme-utils/src/interface.ts @@ -0,0 +1,12 @@ +import type { ProgressiveDataScheme, BuiltinColorPalette } from '@visactor/vchart'; + +export type DataSchemeTokenMap = ProgressiveDataScheme; + +export type PaletteTokenMap = Record; + +export type Token = + | string + | { + light: string; + dark: string; + }; diff --git a/packages/vchart-theme-utils/src/utils/get-token-value.ts b/packages/vchart-theme-utils/src/utils/get-token-value.ts new file mode 100644 index 0000000..c5e5fdb --- /dev/null +++ b/packages/vchart-theme-utils/src/utils/get-token-value.ts @@ -0,0 +1,8 @@ +/** 从当前页面环境中读取 token 的值 */ +export const getTokenValue = (token: string, defaultValue?: T, chartContainer?: HTMLElement): T | string => { + const value = getComputedStyle(chartContainer ?? document.body).getPropertyValue(token) || defaultValue; + if (value && !isNaN(value[0])) { + return `rgba(${value})`; + } + return value; +}; diff --git a/packages/vchart-theme-utils/src/utils/index.ts b/packages/vchart-theme-utils/src/utils/index.ts new file mode 100644 index 0000000..e4ff61a --- /dev/null +++ b/packages/vchart-theme-utils/src/utils/index.ts @@ -0,0 +1,2 @@ +export * from './get-token-value'; +export * from './observe-attribute'; diff --git a/packages/vchart-theme-utils/src/utils/observe-attribute.ts b/packages/vchart-theme-utils/src/utils/observe-attribute.ts new file mode 100644 index 0000000..a8dd214 --- /dev/null +++ b/packages/vchart-theme-utils/src/utils/observe-attribute.ts @@ -0,0 +1,15 @@ +/** 监听 dom 元素 attribute 更新 */ +export const observeAttribute = ( + element: HTMLElement, + attribute: string, + callback: (mutation: MutationRecord) => void +) => { + const observer = new MutationObserver(mutations => { + mutations.forEach(mutation => { + if (mutation.attributeName === attribute) { + callback(mutation); + } + }); + }); + observer.observe(element, { attributes: true }); +}; diff --git a/packages/vchart-theme-utils/tsconfig.eslint.json b/packages/vchart-theme-utils/tsconfig.eslint.json new file mode 100644 index 0000000..a841f84 --- /dev/null +++ b/packages/vchart-theme-utils/tsconfig.eslint.json @@ -0,0 +1,11 @@ +{ + "extends": "@internal/ts-config/tsconfig.base.json", + "compilerOptions": { + "types": ["jest", "offscreencanvas", "node"], + "lib": ["DOM", "ESNext"], + "baseUrl": "./", + "rootDir": "./" + }, + "include": ["src", "__tests__"] + // "exclude": ["bugserver-config"] +} diff --git a/packages/vchart-theme-utils/tsconfig.json b/packages/vchart-theme-utils/tsconfig.json new file mode 100644 index 0000000..9288787 --- /dev/null +++ b/packages/vchart-theme-utils/tsconfig.json @@ -0,0 +1,18 @@ +{ + "extends": "@internal/ts-config/tsconfig.base.json", + "compilerOptions": { + "types": ["jest", "offscreencanvas", "node"], + "lib": ["DOM", "ESNext"], + "baseUrl": "./", + "rootDir": "./src", + "outDir": "./es", + "composite": true + }, + "ts-node": { + "transpileOnly": true, + "compilerOptions": { + "module": "commonjs" + } + }, + "include": ["src"] +} diff --git a/packages/vchart-theme-utils/tsconfig.test.json b/packages/vchart-theme-utils/tsconfig.test.json new file mode 100644 index 0000000..37837cb --- /dev/null +++ b/packages/vchart-theme-utils/tsconfig.test.json @@ -0,0 +1,5 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": {}, + "references": [] +} diff --git a/packages/vchart-theme/README.md b/packages/vchart-theme/README.md index aaffbc2..15bf2b1 100644 --- a/packages/vchart-theme/README.md +++ b/packages/vchart-theme/README.md @@ -38,10 +38,10 @@ allThemeMap.forEach((theme, name) => { VChart.ThemeManager.setCurrentTheme('vScreenVolcanoBlue'); ``` -If you only use a specific theme, you can also obtain the specific theme JSON from this package and place it under your project for reference: +If you only use a specific theme, you can also import the specific theme JSON from this package: ```typescript -import vScreenVolcanoBlue from 'xxx'; // your json path +import vScreenVolcanoBlue from '@visactor/vchart-theme/public/vScreenVolcanoBlue.json'; import VChart from '@visactor/vchart'; // register the theme diff --git a/rush.json b/rush.json index ee99054..cbf6f5c 100644 --- a/rush.json +++ b/rush.json @@ -26,6 +26,13 @@ "shouldPublish": true, "versionPolicyName": "vchartThemeMain" }, + { + "packageName": "@visactor/vchart-theme-utils", + "projectFolder": "packages/vchart-theme-utils", + "tags": ["package"], + "shouldPublish": true, + "versionPolicyName": "vchartThemeMain" + }, { "packageName": "@visactor/vchart-semi-theme", "projectFolder": "packages/vchart-semi-theme", @@ -33,6 +40,13 @@ "shouldPublish": true, "versionPolicyName": "vchartThemeMain" }, + { + "packageName": "@visactor/vchart-arco-theme", + "projectFolder": "packages/vchart-arco-theme", + "tags": ["package"], + "shouldPublish": true, + "versionPolicyName": "vchartThemeMain" + }, { "packageName": "@internal/bundler", "projectFolder": "tools/bundler",