Skip to content

Commit

Permalink
Merge pull request #18 from VisActor/release/1.9.0
Browse files Browse the repository at this point in the history
[Auto release] release 1.9.0
  • Loading branch information
zamhown authored Jan 29, 2024
2 parents e17842e + 264b8e3 commit 5d2b179
Show file tree
Hide file tree
Showing 45 changed files with 729 additions and 671 deletions.
972 changes: 486 additions & 486 deletions common/config/rush/pnpm-lock.yaml

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion common/config/rush/version-policies.json
Original file line number Diff line number Diff line change
@@ -1 +1 @@
[{"definitionName":"lockStepVersion","policyName":"vchartThemeMain","version":"1.7.4","nextBump":"patch"}]
[{"definitionName":"lockStepVersion","policyName":"vchartThemeMain","version":"1.9.0","nextBump":"minor"}]
12 changes: 3 additions & 9 deletions packages/vchart-arco-theme/CHANGELOG.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,9 @@
"name": "@visactor/vchart-arco-theme",
"entries": [
{
"version": "1.7.4",
"tag": "@visactor/vchart-arco-theme_v1.7.4",
"date": "Fri, 19 Jan 2024 09:03:41 GMT",
"comments": {}
},
{
"version": "1.7.3",
"tag": "@visactor/vchart-arco-theme_v1.7.3",
"date": "Fri, 19 Jan 2024 07:47:09 GMT",
"version": "1.9.0",
"tag": "@visactor/vchart-arco-theme_v1.9.0",
"date": "Mon, 29 Jan 2024 12:38:02 GMT",
"comments": {}
}
]
Expand Down
11 changes: 3 additions & 8 deletions packages/vchart-arco-theme/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,9 @@
# Change Log - @visactor/vchart-arco-theme

This log was last generated on Fri, 19 Jan 2024 09:03:41 GMT and should not be manually modified.
This log was last generated on Mon, 29 Jan 2024 12:38:02 GMT and should not be manually modified.

## 1.7.4
Fri, 19 Jan 2024 09:03:41 GMT

_Version update only_

## 1.7.3
Fri, 19 Jan 2024 07:47:09 GMT
## 1.9.0
Mon, 29 Jan 2024 12:38:02 GMT

_Initial release_

10 changes: 5 additions & 5 deletions packages/vchart-arco-theme/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@visactor/vchart-arco-theme",
"version": "1.8.8",
"version": "1.9.0",
"description": "Extended themes for VChart",
"sideEffects": false,
"main": "cjs/index.js",
Expand All @@ -25,10 +25,10 @@
"test-watch": "DEBUG_MODE=1 jest --watch"
},
"peerDependencies": {
"@visactor/vchart": "~1.8.8"
"@visactor/vchart": "~1.9.0"
},
"dependencies": {
"@visactor/vchart-theme-utils": "workspace:1.8.8"
"@visactor/vchart-theme-utils": "workspace:1.9.0"
},
"devDependencies": {
"@esbuild-plugins/node-globals-polyfill": "0.1.1",
Expand Down Expand Up @@ -79,8 +79,8 @@
"react-router-dom": "^5.2.0",
"react-device-detect": "^2.2.2",
"redux": "^4.1.2",
"@visactor/vchart": "~1.8.8",
"@visactor/react-vchart": "~1.8.8",
"@visactor/vchart": "~1.9.0",
"@visactor/react-vchart": "~1.9.0",
"@arco-design/webpack-plugin": "^1.6.0",
"@arco-plugins/vite-plugin-svgr": "^0.7.2",
"@svgr/webpack": "^5.5.0",
Expand Down
2 changes: 1 addition & 1 deletion packages/vchart-arco-theme/public/arcoDesignDark.json

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/vchart-arco-theme/public/arcoDesignLight.json

Large diffs are not rendered by default.

194 changes: 100 additions & 94 deletions packages/vchart-arco-theme/src/common/token-map.ts
Original file line number Diff line number Diff line change
@@ -1,103 +1,109 @@
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',
export const getPaletteTokenMap = (prefix?: string): PaletteTokenMap => {
const prefixStr = prefix ? `${prefix}${prefix[prefix.length - 1] === '-' ? '' : '-'}` : '';
return {
/** 背景色 */
backgroundColor: `--${prefixStr}color-bg-1`,
/** 图表边框色 */
borderColor: `--${prefixStr}color-border`,
/** 鼠标 hover 项背景颜色 */
hoverBackgroundColor: `--${prefixStr}color-secondary-hover`,
/** 滑块类组件背景条填充颜色 */
sliderRailColor: `--${prefixStr}color-fill-3`,
/** 滑块类组件滑块填充颜色 */
sliderHandleColor: `--${prefixStr}color-bg-2`,
/** 滑块类组件已选范围填充颜色 */
sliderTrackColor: '--primary-6',
/** 浮层背景区域颜色 */
popupBackgroundColor: `--${prefixStr}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',
/** 主要字色 */
primaryFontColor: `--${prefixStr}color-text-1`,
/** 次要字色 */
secondaryFontColor: `--${prefixStr}color-text-2`,
/** 第三字色 */
tertiaryFontColor: `--${prefixStr}color-text-3`,
/** 轴标签字色 */
axisLabelFontColor: `--${prefixStr}color-text-3`,
/** 禁用字色 */
disableFontColor: `--${prefixStr}color-text-4`,
/** 轴高亮标记字色 */
axisMarkerFontColor: `--${prefixStr}color-bg-1`,

/** 轴网格线颜色 */
axisGridColor: '--color-border',
/** 轴线颜色 */
axisDomainColor: '--color-neutral-3',
/** 缩略轴滑块描边颜色 */
dataZoomHandlerStrokeColor: '--color-neutral-5',
/** 缩略轴图表区域颜色 */
dataZoomChartColor: '--color-fill-4',
/** 轴网格线颜色 */
axisGridColor: `--${prefixStr}color-border`,
/** 轴线颜色 */
axisDomainColor: `--${prefixStr}color-neutral-3`,
/** 缩略轴滑块描边颜色 */
dataZoomHandlerStrokeColor: `--${prefixStr}color-neutral-5`,
/** 缩略轴图表区域颜色 */
dataZoomChartColor: `--${prefixStr}color-fill-4`,

/** 播放器控制器填充颜色 */
playerControllerColor: '--primary-6',
/** 播放器控制器填充颜色 */
playerControllerColor: '--primary-6',

/** 轴高亮标记背景色 */
axisMarkerBackgroundColor: '--color-text-1',
/** 标注标签背景颜色 */
markLabelBackgroundColor: '--color-border',
/** 标注线颜色 */
markLineStrokeColor: '--color-text-2',
/** 轴高亮标记背景色 */
axisMarkerBackgroundColor: `--${prefixStr}color-text-1`,
/** 标注标签背景颜色 */
markLabelBackgroundColor: `--${prefixStr}color-border`,
/** 标注线颜色 */
markLineStrokeColor: `--${prefixStr}color-text-2`,

/** 危险色 */
dangerColor: '--danger-6',
/** 警告色 */
warningColor: '--warning-6',
/** 成功色 */
successColor: '--success-6',
/** 信息色 */
infoColor: '--arcoblue-6'
/** 危险色 */
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'
]
}
];
export const getDataSchemeTokenMap = (prefix?: string): DataSchemeTokenMap => {
const prefixStr = prefix ? `${prefix}${prefix[prefix.length - 1] === '-' ? '' : '-'}` : '';
return [
// 第一档颜色(数据项 <= 10)
{
maxDomainLength: 10,
scheme: [
`--${prefixStr}color-data-1`,
`--${prefixStr}color-data-3`,
`--${prefixStr}color-data-5`,
`--${prefixStr}color-data-7`,
`--${prefixStr}color-data-9`,
`--${prefixStr}color-data-11`,
`--${prefixStr}color-data-13`,
`--${prefixStr}color-data-15`,
`--${prefixStr}color-data-17`,
`--${prefixStr}color-data-19`
]
},
// 第二档颜色(数据项 > 10)
{
scheme: [
`--${prefixStr}color-data-1`,
`--${prefixStr}color-data-2`,
`--${prefixStr}color-data-3`,
`--${prefixStr}color-data-4`,
`--${prefixStr}color-data-5`,
`--${prefixStr}color-data-6`,
`--${prefixStr}color-data-7`,
`--${prefixStr}color-data-8`,
`--${prefixStr}color-data-9`,
`--${prefixStr}color-data-10`,
`--${prefixStr}color-data-11`,
`--${prefixStr}color-data-12`,
`--${prefixStr}color-data-13`,
`--${prefixStr}color-data-14`,
`--${prefixStr}color-data-15`,
`--${prefixStr}color-data-16`,
`--${prefixStr}color-data-17`,
`--${prefixStr}color-data-18`,
`--${prefixStr}color-data-19`,
`--${prefixStr}color-data-20`
]
}
];
};
12 changes: 8 additions & 4 deletions packages/vchart-arco-theme/src/generator.ts
Original file line number Diff line number Diff line change
@@ -1,26 +1,30 @@
import type { IColorSchemeStruct, ITheme, IThemeColorScheme, ProgressiveDataScheme } from '@visactor/vchart';
import { arcoDesignDark } from './dark';
import { arcoDesignLight } from './light';
import { dataSchemeTokenMap, paletteTokenMap } from './common/token-map';
import { getDataSchemeTokenMap, getPaletteTokenMap } from './common/token-map';
import { generateDataScheme, generatePalette } from '@visactor/vchart-theme-utils';

const baseThemeMap = {
light: arcoDesignLight,
dark: arcoDesignDark
};

export const generateVChartArcoTheme = (mode: 'light' | 'dark', chartContainer?: HTMLElement): ITheme => {
export const generateVChartArcoTheme = (
mode: 'light' | 'dark',
prefix?: string,
chartContainer?: HTMLElement
): ITheme => {
const baseTheme = baseThemeMap[mode];
const { dataScheme, palette } = baseTheme.colorScheme.default as IColorSchemeStruct;
const colorScheme: IThemeColorScheme = {
default: {
dataScheme: generateDataScheme(
mode,
dataSchemeTokenMap,
getDataSchemeTokenMap(prefix),
dataScheme as ProgressiveDataScheme<string>,
chartContainer
),
palette: generatePalette(mode, paletteTokenMap, palette, chartContainer)
palette: generatePalette(mode, getPaletteTokenMap(prefix), palette, chartContainer)
}
};
return {
Expand Down
26 changes: 16 additions & 10 deletions packages/vchart-arco-theme/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { ITheme } from '@visactor/vchart';
// eslint-disable-next-line no-duplicate-imports
import VChart from '@visactor/vchart';
import { ThemeManager } from '@visactor/vchart';
import type { IInitVChartArcoThemeOption } from './interface';
import { generateThemeName, getCurrentMode, observeAttribute } from './util';
import { generateVChartArcoTheme } from './generator';
Expand All @@ -11,27 +11,33 @@ export * from './light';
export * from './dark';

export const initVChartArcoTheme = (options?: IInitVChartArcoThemeOption) => {
const { defaultMode, isWatchingMode = true } = options ?? {};
const { defaultMode, isWatchingMode = true, prefix, themeManager = ThemeManager } = options ?? {};

switchVChartArcoTheme(false, defaultMode);
switchVChartArcoTheme(themeManager, prefix, false, defaultMode);

if (isWatchingMode) {
observeAttribute(document.body, 'arco-theme', () => switchVChartArcoTheme());
observeAttribute(document.body, 'arco-theme', () => switchVChartArcoTheme(themeManager, prefix));
}
};

export const switchVChartArcoTheme = (force?: boolean, mode?: 'light' | 'dark', theme?: ITheme) => {
export const switchVChartArcoTheme = (
themeManager: typeof ThemeManager,
prefix?: string,
force?: boolean,
mode?: 'light' | 'dark',
theme?: ITheme
) => {
if (!mode) {
mode = getCurrentMode();
}
const themeName = generateThemeName(mode);
if (!force && VChart.ThemeManager.getCurrentTheme() === themeName) {
if (!force && themeManager.getCurrentTheme() === themeName) {
return;
} else if (force) {
VChart.ThemeManager.removeTheme(themeName);
themeManager.removeTheme(themeName);
}
if (!VChart.ThemeManager.themeExist(themeName)) {
VChart.ThemeManager.registerTheme(themeName, theme ?? generateVChartArcoTheme(mode));
if (!themeManager.themeExist(themeName)) {
themeManager.registerTheme(themeName, theme ?? generateVChartArcoTheme(mode, prefix));
}
VChart.ThemeManager.setCurrentTheme(themeName);
themeManager.setCurrentTheme(themeName);
};
6 changes: 6 additions & 0 deletions packages/vchart-arco-theme/src/interface.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
import type { ThemeManager } from '@visactor/vchart';

export interface IInitVChartArcoThemeOption {
/** 初始亮暗色模式 */
defaultMode?: 'light' | 'dark';
/** 是否监听亮暗色模式自动更改图表主题 */
isWatchingMode?: boolean;
/** 指定 ThemeManager,一般不用指定,如果遇到多版本 vchart 共存时需要指定 */
themeManager?: typeof ThemeManager;
/** arco css 变量前缀,例如:原始变量名为`--color-data-1`,配置为`"arco"`后变为`--arco-color-data-1` */
prefix?: string;
}
6 changes: 6 additions & 0 deletions packages/vchart-semi-theme/CHANGELOG.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
{
"name": "@visactor/vchart-semi-theme",
"entries": [
{
"version": "1.9.0",
"tag": "@visactor/vchart-semi-theme_v1.9.0",
"date": "Mon, 29 Jan 2024 12:38:02 GMT",
"comments": {}
},
{
"version": "1.7.4",
"tag": "@visactor/vchart-semi-theme_v1.7.4",
Expand Down
Loading

0 comments on commit 5d2b179

Please sign in to comment.