image/tdesign-vue-next-starter
1
0
Fork 1
mirror of https://github.com/Tencent/tdesign-vue-next-starter.git synced 2024-12-23 08:56:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: use tvision color in charts

Browse Source
This commit is contained in:
Uyarn 2021-12-23 01:33:04 +08:00 committed by uyarnchen
parent 8ab5ec409f
commit f8aef31369
4 changed files with 49 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/assets-setting-auto.svg
View File

@ -1,5 +1,5 @@
<svg width="88" height="48" viewBox="0 0 88 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="88" height="48" viewBox="0 0 88 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0H88V48H0V0Z" fill="none"/> <path d="M0 0H88V48H0V0Z" fill="var(--td-component-border)"/>
<path d="M42.8627 14.0518V16.7601H44.4877V14.0518H42.8627Z" fill="var(--td-text-color-primary)"/> <path d="M42.8627 14.0518V16.7601H44.4877V14.0518H42.8627Z" fill="var(--td-text-color-primary)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.3488 23.9824C38.3488 21.0407 40.7335 18.656 43.6752 18.656C46.6168 18.656 49.0015 21.0407 49.0015 23.9824C49.0015 26.9241 46.6168 29.3088 43.6752 29.3088C40.7335 29.3088 38.3488 26.9241 38.3488 23.9824ZM43.6752 20.281C41.6309 20.281 39.9738 21.9382 39.9738 23.9824C39.9738 26.0266 41.6309 27.6838 43.6752 27.6838C45.7194 27.6838 47.3766 26.0266 47.3766 23.9824C47.3766 21.9382 45.7194 20.281 43.6752 20.281Z" fill="var(--td-text-color-primary)"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M38.3488 23.9824C38.3488 21.0407 40.7335 18.656 43.6752 18.656C46.6168 18.656 49.0015 21.0407 49.0015 23.9824C49.0015 26.9241 46.6168 29.3088 43.6752 29.3088C40.7335 29.3088 38.3488 26.9241 38.3488 23.9824ZM43.6752 20.281C41.6309 20.281 39.9738 21.9382 39.9738 23.9824C39.9738 26.0266 41.6309 27.6838 43.6752 27.6838C45.7194 27.6838 47.3766 26.0266 47.3766 23.9824C47.3766 21.9382 45.7194 20.281 43.6752 20.281Z" fill="var(--td-text-color-primary)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M52.208 26.781H49.5867L47.5262 33.48L49.0794 33.9577L49.5903 32.2968H52.2045L52.7154 33.9577L54.2686 33.48L52.208 26.781ZM51.7047 30.6718L51.0077 28.406H50.787L50.0901 30.6718H51.7047Z" fill="var(--td-text-color-primary)"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M52.208 26.781H49.5867L47.5262 33.48L49.0794 33.9577L49.5903 32.2968H52.2045L52.7154 33.9577L54.2686 33.48L52.208 26.781ZM51.7047 30.6718L51.0077 28.406H50.787L50.0901 30.6718H51.7047Z" fill="var(--td-text-color-primary)"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

20
src/assets/assets-setting-light.svg
View File

@ -1,13 +1,13 @@
<svg width="88" height="48" viewBox="0 0 88 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="88" height="48" viewBox="0 0 88 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="88" height="48" fill="none"/> <rect width="88" height="48" fill="var(--td-component-border)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M43.9999 20.583C42.1129 20.583 40.5832 22.1127 40.5832 23.9997C40.5832 25.8867 42.1129 27.4163 43.9999 27.4163C45.8869 27.4163 47.4166 25.8867 47.4166 23.9997C47.4166 22.1127 45.8869 20.583 43.9999 20.583ZM39.0832 23.9997C39.0832 21.2843 41.2845 19.083 43.9999 19.083C46.7153 19.083 48.9166 21.2843 48.9166 23.9997C48.9166 26.7151 46.7153 28.9163 43.9999 28.9163C41.2845 28.9163 39.0832 26.7151 39.0832 23.9997Z" fill="var(--td-brand-color)"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M43.9999 20.583C42.1129 20.583 40.5832 22.1127 40.5832 23.9997C40.5832 25.8867 42.1129 27.4163 43.9999 27.4163C45.8869 27.4163 47.4166 25.8867 47.4166 23.9997C47.4166 22.1127 45.8869 20.583 43.9999 20.583ZM39.0832 23.9997C39.0832 21.2843 41.2845 19.083 43.9999 19.083C46.7153 19.083 48.9166 21.2843 48.9166 23.9997C48.9166 26.7151 46.7153 28.9163 43.9999 28.9163C41.2845 28.9163 39.0832 26.7151 39.0832 23.9997Z" fill="var(--td-text-color-primary)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M43.2499 17.333V14.833H44.7499V17.333H43.2499Z" fill="var(--td-brand-color)"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M43.2499 17.333V14.833H44.7499V17.333H43.2499Z" fill="var(--td-text-color-primary)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M48.1838 18.7552L49.9513 16.9877L51.0119 18.0483L49.2444 19.8158L48.1838 18.7552Z" fill="var(--td-brand-color)"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M48.1838 18.7552L49.9513 16.9877L51.0119 18.0483L49.2444 19.8158L48.1838 18.7552Z" fill="var(--td-text-color-primary)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M50.6666 23.2497H53.1666V24.7497H50.6666V23.2497Z" fill="var(--td-brand-color)"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M50.6666 23.2497H53.1666V24.7497H50.6666V23.2497Z" fill="var(--td-text-color-primary)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M49.2444 28.1835L51.0119 29.951L49.9513 31.0117L48.1838 29.2442L49.2444 28.1835Z" fill="var(--td-brand-color)"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M49.2444 28.1835L51.0119 29.951L49.9513 31.0117L48.1838 29.2442L49.2444 28.1835Z" fill="var(--td-text-color-primary)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M44.7499 30.6663V33.1663H43.2499V30.6663H44.7499Z" fill="var(--td-brand-color)"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M44.7499 30.6663V33.1663H43.2499V30.6663H44.7499Z" fill="var(--td-text-color-primary)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M39.8162 29.2442L38.0487 31.0117L36.988 29.951L38.7555 28.1835L39.8162 29.2442Z" fill="var(--td-brand-color)"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M39.8162 29.2442L38.0487 31.0117L36.988 29.951L38.7555 28.1835L39.8162 29.2442Z" fill="var(--td-text-color-primary)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M37.3333 24.7497H34.8333V23.2497H37.3333V24.7497Z" fill="var(--td-brand-color)"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M37.3333 24.7497H34.8333V23.2497H37.3333V24.7497Z" fill="var(--td-text-color-primary)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.7555 19.8158L36.988 18.0483L38.0487 16.9877L39.8162 18.7552L38.7555 19.8158Z" fill="var(--td-brand-color)"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M38.7555 19.8158L36.988 18.0483L38.0487 16.9877L39.8162 18.7552L38.7555 19.8158Z" fill="var(--td-text-color-primary)"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

21
src/config/color.ts
View File

@ -3,6 +3,27 @@ import hexToHsl from 'hex-to-hsl';
export type ColorToken = Record<string, string>; export type ColorToken = Record<string, string>;
export type ColorSeries = Record<string, ColorToken>; export type ColorSeries = Record<string, ColorToken>;
export const defaultLightColor = [
'#0052d9',
'#0594fa',
'#00a870',
'#ebb105',
'#ed7b2f',
'#e34d59',
'#ed49b4',
'#834ec2',
];
export const defaultDarkColor = [
'#4582e6',
'#29a4fb',
'#03a56f',
'#ca8d03',
'#ed7b2f',
'#ea7b84',
'#f172c5',
'#ab87d5',
];
export const BACKGROUND_TOKEN: ColorSeries = { export const BACKGROUND_TOKEN: ColorSeries = {
BLUE_GREY: { BLUE_GREY: {
'@gray-color-1': '#F1F2F5', '@gray-color-1': '#F1F2F5',

40
src/pages/dashboard/base/index.ts
View File

@ -1,7 +1,7 @@
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import * as echarts from 'echarts/core'; import * as echarts from 'echarts/core';
import { Color } from 'tvision-color'; import { Color } from 'tvision-color';
import { getBrandColor, generateColorMap } from '@/config/color'; import { getBrandColor, defaultLightColor, defaultDarkColor } from '@/config/color';
import store from '@/store'; import store from '@/store';
const { state } = store; const { state } = store;
@ -16,31 +16,25 @@ const { state } = store;
export function getColorFromTheme(theme: string) { export function getColorFromTheme(theme: string) {
const { setting } = state as any; const { setting } = state as any;
const { colorList, mode } = setting; const { colorList, mode } = setting;
let themeColor = getBrandColor(theme, colorList); const isDarkMode = mode === 'dark';
let themeColorList = [];
const themeColor = getBrandColor(theme, colorList);
if (theme === 'dynamic' || (!/^#[A-F\d]{6}$/i.test(theme) && mode === 'dark')) { if (!/^#[A-F\d]{6}$/i.test(theme)) {
theme = themeColor?.['@brand-color-1'] || '#0052D9'; theme = themeColor?.['@brand-color'] || '#0052D9';
const themIdx = defaultLightColor.indexOf(theme.toLocaleLowerCase());
const defaultGradients = !isDarkMode ? defaultLightColor : defaultDarkColor;
const newPalette = Color.getPaletteByGradation({ const spliceThemeList = defaultGradients.slice(0, themIdx);
colors: [theme], themeColorList = defaultGradients.slice(themIdx, defaultGradients.length).concat(spliceThemeList);
step: 10, } else {
})[0]; theme = themeColor?.['@brand-color'];
themeColorList = Color.getRandomPalette({
themeColor = generateColorMap(theme, newPalette, mode); color: theme,
colorGamut: 'bright',
number: 8,
});
} }
// theme = themeColor?.['@brand-color'];
const themeColorList: Array<string> = [];
// eslint-disable-next-line no-restricted-syntax
for (const key in themeColor) {
if (Object.prototype.hasOwnProperty.call(themeColor, key)) {
const elementColor: string = themeColor[key];
themeColorList.push(elementColor);
}
}
// console.log(themeColorList, 'themeColorList');
// console.log(theme, 'theme');
return themeColorList; return themeColorList;
} }