mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-22 18:30:14 +01:00
refactor(orders): update js theme
This commit is contained in:
parent
8e957099f4
commit
d055527172
3 changed files with 106 additions and 107 deletions
|
|
@ -187,40 +187,40 @@ export const CORPORATE_THEME = {
|
||||||
},
|
},
|
||||||
|
|
||||||
orders: {
|
orders: {
|
||||||
tooltipBg: '#ffffff',
|
tooltipBg: theme.bg,
|
||||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||||
tooltipLineWidth: '0',
|
tooltipLineWidth: '0',
|
||||||
tooltipBorderColor: '#ebeef2',
|
tooltipBorderColor: theme.border2,
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||||
tooltipTextColor: '#2a2a2a',
|
tooltipTextColor: theme.fgText,
|
||||||
tooltipFontWeight: 'bolder',
|
tooltipFontWeight: 'normal',
|
||||||
tooltipFontSize: '20',
|
tooltipFontSize: '20',
|
||||||
|
|
||||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
axisLineColor: theme.border4,
|
||||||
axisFontSize: '16',
|
axisFontSize: '16',
|
||||||
axisTextColor: '#b2bac2',
|
axisTextColor: theme.fg,
|
||||||
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
|
yAxisSplitLine: theme.separator,
|
||||||
|
|
||||||
itemBorderColor: '#73a1ff',
|
itemBorderColor: theme.primary,
|
||||||
lineStyle: 'solid',
|
lineStyle: 'solid',
|
||||||
lineWidth: '4',
|
lineWidth: '4',
|
||||||
|
|
||||||
// first line
|
// first line
|
||||||
firstAreaGradFrom: 'rgba(227, 236, 254, 0.7)',
|
firstAreaGradFrom: theme.bg3,
|
||||||
firstAreaGradTo: 'rgba(227, 236, 254, 0.7)',
|
firstAreaGradTo: theme.bg3,
|
||||||
firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
// second line
|
// second line
|
||||||
secondLineGradFrom: 'rgba(93, 207, 227, 1)',
|
secondLineGradFrom: theme.primary,
|
||||||
secondLineGradTo: 'rgba(93, 207, 227, 1)',
|
secondLineGradTo: theme.primary,
|
||||||
|
|
||||||
secondAreaGradFrom: 'rgba(0, 0, 0, 0)',
|
secondAreaGradFrom: 'rgba(0, 0, 0, 0)',
|
||||||
secondAreaGradTo: 'rgba(0, 0, 0, 0)',
|
secondAreaGradTo: 'rgba(0, 0, 0, 0)',
|
||||||
secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
// third line
|
// third line
|
||||||
thirdLineGradFrom: 'rgba(113, 158, 252, 1)',
|
thirdLineGradFrom: theme.success,
|
||||||
thirdLineGradTo: 'rgba(113, 158, 252, 1)',
|
thirdLineGradTo: theme.successLight,
|
||||||
|
|
||||||
thirdAreaGradFrom: 'rgba(0, 0, 0, 0)',
|
thirdAreaGradFrom: 'rgba(0, 0, 0, 0)',
|
||||||
thirdAreaGradTo: 'rgba(0, 0, 0, 0)',
|
thirdAreaGradTo: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
@ -228,35 +228,35 @@ export const CORPORATE_THEME = {
|
||||||
},
|
},
|
||||||
|
|
||||||
profit: {
|
profit: {
|
||||||
bg: '#ffffff',
|
bg: theme.bg,
|
||||||
textColor: '#ffffff',
|
textColor: theme.fgText,
|
||||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
axisLineColor: theme.border4,
|
||||||
splitLineColor: 'rgba(161, 161 ,229, 0.2)',
|
splitLineColor: theme.separator,
|
||||||
areaOpacity: '1',
|
areaOpacity: '1',
|
||||||
|
|
||||||
axisFontSize: '16',
|
axisFontSize: '16',
|
||||||
axisTextColor: '#b2bac2',
|
axisTextColor: theme.fg,
|
||||||
|
|
||||||
// first bar
|
// first bar
|
||||||
firstLineGradFrom: '#719efc',
|
firstLineGradFrom: theme.bg3,
|
||||||
firstLineGradTo: '#719efc',
|
firstLineGradTo: theme.bg3,
|
||||||
firstLineShadow: 'rgba(14, 16, 48, 0.4)',
|
firstLineShadow: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
// second bar
|
// second bar
|
||||||
secondLineGradFrom: '#5dcfe3',
|
secondLineGradFrom: theme.primary,
|
||||||
secondLineGradTo: '#5dcfe3',
|
secondLineGradTo: theme.primary,
|
||||||
secondLineShadow: 'rgba(14, 16, 48, 0.4)',
|
secondLineShadow: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
// third bar
|
// third bar
|
||||||
thirdLineGradFrom: '#e3ecfe',
|
thirdLineGradFrom: theme.success,
|
||||||
thirdLineGradTo: '#e3ecfe',
|
thirdLineGradTo: theme.success,
|
||||||
thirdLineShadow: 'rgba(14, 16, 48, 0.4)',
|
thirdLineShadow: 'rgba(0, 0, 0, 0)',
|
||||||
},
|
},
|
||||||
|
|
||||||
orderProfitLegend: {
|
orderProfitLegend: {
|
||||||
firstItem: '#719efc',
|
firstItem: theme.success,
|
||||||
secondItem: '#5dcfe3',
|
secondItem: theme.primary,
|
||||||
thirdItem: '#e3ecfe',
|
thirdItem: theme.bg3,
|
||||||
},
|
},
|
||||||
|
|
||||||
visitors: {
|
visitors: {
|
||||||
|
|
|
||||||
|
|
@ -187,76 +187,76 @@ export const COSMIC_THEME = {
|
||||||
},
|
},
|
||||||
|
|
||||||
orders: {
|
orders: {
|
||||||
tooltipBg: 'rgba(0, 255, 170, 0.35)',
|
tooltipBg: theme.bg,
|
||||||
tooltipLineColor: 'rgba(255, 255, 255, 0.1)',
|
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||||
tooltipLineWidth: '1',
|
tooltipLineWidth: '0',
|
||||||
tooltipBorderColor: '#00d977',
|
tooltipBorderColor: theme.border2,
|
||||||
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 8px 24px;',
|
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||||
tooltipTextColor: '#ffffff',
|
tooltipTextColor: theme.fgText,
|
||||||
tooltipFontWeight: 'normal',
|
tooltipFontWeight: 'normal',
|
||||||
tooltipFontSize: '20',
|
tooltipFontSize: '20',
|
||||||
|
|
||||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
axisLineColor: theme.border4,
|
||||||
axisFontSize: '16',
|
axisFontSize: '16',
|
||||||
axisTextColor: '#a1a1e5',
|
axisTextColor: theme.fg,
|
||||||
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
|
yAxisSplitLine: theme.separator,
|
||||||
|
|
||||||
itemBorderColor: '#ffffff',
|
itemBorderColor: theme.primary,
|
||||||
lineStyle: 'solid',
|
lineStyle: 'solid',
|
||||||
lineWidth: '4',
|
lineWidth: '4',
|
||||||
|
|
||||||
// first line
|
// first line
|
||||||
firstAreaGradFrom: 'rgba(78, 64, 164, 1)',
|
firstAreaGradFrom: theme.bg2,
|
||||||
firstAreaGradTo: 'rgba(78, 64, 164, 1)',
|
firstAreaGradTo: theme.bg2,
|
||||||
firstShadowLineDarkBg: '#018dff',
|
firstShadowLineDarkBg: theme.bg2,
|
||||||
|
|
||||||
// second line
|
// second line
|
||||||
secondLineGradFrom: '#00bece',
|
secondLineGradFrom: theme.primary,
|
||||||
secondLineGradTo: '#00da78',
|
secondLineGradTo: theme.primary,
|
||||||
|
|
||||||
secondAreaGradFrom: 'rgba(38, 139, 145, 0.8)',
|
secondAreaGradFrom: 'rgba(161, 110, 255, 0.8)',
|
||||||
secondAreaGradTo: 'rgba(38, 139, 145, 0.5)',
|
secondAreaGradTo: 'rgba(161, 110, 255, 0.5)',
|
||||||
secondShadowLineDarkBg: '#2c5a85',
|
secondShadowLineDarkBg: theme.primary,
|
||||||
|
|
||||||
// third line
|
// third line
|
||||||
thirdLineGradFrom: '#8069ff',
|
thirdLineGradFrom: theme.success,
|
||||||
thirdLineGradTo: '#8357ff',
|
thirdLineGradTo: theme.successLight,
|
||||||
|
|
||||||
thirdAreaGradFrom: 'rgba(118, 73, 208, 0.7)',
|
thirdAreaGradFrom: 'rgba(0, 214, 143, 0.7)',
|
||||||
thirdAreaGradTo: 'rgba(188, 92, 255, 0.4)',
|
thirdAreaGradTo: 'rgba(0, 214, 143, 0.4)',
|
||||||
thirdShadowLineDarkBg: '#a695ff',
|
thirdShadowLineDarkBg: theme.success,
|
||||||
},
|
},
|
||||||
|
|
||||||
profit: {
|
profit: {
|
||||||
bg: '#3d3780',
|
bg: theme.bg,
|
||||||
textColor: '#ffffff',
|
textColor: theme.fgText,
|
||||||
axisLineColor: '#a1a1e5',
|
axisLineColor: theme.border4,
|
||||||
splitLineColor: '#342e73',
|
splitLineColor: theme.separator,
|
||||||
areaOpacity: '1',
|
areaOpacity: '1',
|
||||||
|
|
||||||
axisFontSize: '16',
|
axisFontSize: '16',
|
||||||
axisTextColor: '#a1a1e5',
|
axisTextColor: theme.fg,
|
||||||
|
|
||||||
// first bar
|
// first bar
|
||||||
firstLineGradFrom: '#00bece',
|
firstLineGradFrom: theme.bg2,
|
||||||
firstLineGradTo: '#00da78',
|
firstLineGradTo: theme.bg2,
|
||||||
firstLineShadow: 'rgba(14, 16, 48, 0.4)',
|
firstLineShadow: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
// second bar
|
// second bar
|
||||||
secondLineGradFrom: '#8069ff',
|
secondLineGradFrom: theme.primary,
|
||||||
secondLineGradTo: '#8357ff',
|
secondLineGradTo: theme.primary,
|
||||||
secondLineShadow: 'rgba(14, 16, 48, 0.4)',
|
secondLineShadow: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
// third bar
|
// third bar
|
||||||
thirdLineGradFrom: '#4e40a4',
|
thirdLineGradFrom: theme.success,
|
||||||
thirdLineGradTo: '#4e40a4',
|
thirdLineGradTo: theme.successLight,
|
||||||
thirdLineShadow: 'rgba(14, 16, 48, 0.4)',
|
thirdLineShadow: 'rgba(0, 0, 0, 0)',
|
||||||
},
|
},
|
||||||
|
|
||||||
orderProfitLegend: {
|
orderProfitLegend: {
|
||||||
firstItem: 'linear-gradient(90deg, #00c7c7 0%, #00d977 100%)',
|
firstItem: theme.success,
|
||||||
secondItem: 'linear-gradient(90deg, #a454ff 0%, #7659ff 100%)',
|
secondItem: theme.primary,
|
||||||
thirdItem: '#4e40a4',
|
thirdItem: theme.bg2,
|
||||||
},
|
},
|
||||||
|
|
||||||
visitors: {
|
visitors: {
|
||||||
|
|
|
||||||
|
|
@ -187,77 +187,76 @@ export const DEFAULT_THEME = {
|
||||||
},
|
},
|
||||||
|
|
||||||
orders: {
|
orders: {
|
||||||
tooltipBg: '#ffffff',
|
tooltipBg: theme.bg,
|
||||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||||
tooltipLineWidth: '0',
|
tooltipLineWidth: '0',
|
||||||
tooltipBorderColor: '#ebeef2',
|
tooltipBorderColor: theme.border2,
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||||
tooltipTextColor: '#2a2a2a',
|
tooltipTextColor: theme.fgText,
|
||||||
tooltipFontWeight: 'bolder',
|
tooltipFontWeight: 'normal',
|
||||||
tooltipFontSize: '20',
|
tooltipFontSize: '20',
|
||||||
|
|
||||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
axisLineColor: theme.border4,
|
||||||
axisFontSize: '16',
|
axisFontSize: '16',
|
||||||
axisTextColor: '#b2bac2',
|
axisTextColor: theme.fg,
|
||||||
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
|
yAxisSplitLine: theme.separator,
|
||||||
|
|
||||||
itemBorderColor: '#42db7d',
|
itemBorderColor: theme.primary,
|
||||||
lineStyle: 'solid',
|
lineStyle: 'solid',
|
||||||
lineWidth: '4',
|
lineWidth: '4',
|
||||||
|
|
||||||
// first line
|
// first line
|
||||||
firstAreaGradFrom: 'rgba(236, 242, 245, 0.8)',
|
firstAreaGradFrom: theme.bg3,
|
||||||
firstAreaGradTo: 'rgba(236, 242, 245, 0.8)',
|
firstAreaGradTo: theme.bg3,
|
||||||
firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
// second line
|
// second line
|
||||||
secondLineGradFrom: 'rgba(164, 123, 255, 1)',
|
secondLineGradFrom: theme.primary,
|
||||||
secondLineGradTo: 'rgba(164, 123, 255, 1)',
|
secondLineGradTo: theme.primary,
|
||||||
|
|
||||||
secondAreaGradFrom: 'rgba(188, 92, 255, 0.2)',
|
secondAreaGradFrom: 'rgba(51, 102, 255, 0.2)',
|
||||||
secondAreaGradTo: 'rgba(188, 92, 255, 0)',
|
secondAreaGradTo: 'rgba(51, 102, 255, 0)',
|
||||||
secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
// third line
|
// third line
|
||||||
thirdLineGradFrom: 'rgba(55, 220, 136, 1)',
|
thirdLineGradFrom: theme.success,
|
||||||
thirdLineGradTo: 'rgba(55, 220, 136, 1)',
|
thirdLineGradTo: theme.successLight,
|
||||||
|
|
||||||
thirdAreaGradFrom: 'rgba(31 ,106, 124, 0.2)',
|
thirdAreaGradFrom: 'rgba(0, 214, 143, 0.2)',
|
||||||
thirdAreaGradTo: 'rgba(4, 126, 230, 0)',
|
thirdAreaGradTo: 'rgba(0, 214, 143, 0)',
|
||||||
thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||||
},
|
},
|
||||||
|
|
||||||
// TODO: need design for default theme
|
|
||||||
profit: {
|
profit: {
|
||||||
bg: '#ffffff',
|
bg: theme.bg,
|
||||||
textColor: '#ffffff',
|
textColor: theme.fgText,
|
||||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
axisLineColor: theme.border4,
|
||||||
splitLineColor: 'rgba(161, 161 ,229, 0.2)',
|
splitLineColor: theme.separator,
|
||||||
areaOpacity: '1',
|
areaOpacity: '1',
|
||||||
|
|
||||||
axisFontSize: '16',
|
axisFontSize: '16',
|
||||||
axisTextColor: '#b2bac2',
|
axisTextColor: theme.fg,
|
||||||
|
|
||||||
// first bar
|
// first bar
|
||||||
firstLineGradFrom: '#00bece',
|
firstLineGradFrom: theme.bg3,
|
||||||
firstLineGradTo: '#00da78',
|
firstLineGradTo: theme.bg3,
|
||||||
firstLineShadow: 'rgba(14, 16, 48, 0.4)',
|
firstLineShadow: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
// second bar
|
// second bar
|
||||||
secondLineGradFrom: '#8069ff',
|
secondLineGradFrom: theme.primary,
|
||||||
secondLineGradTo: '#8357ff',
|
secondLineGradTo: theme.primary,
|
||||||
secondLineShadow: 'rgba(14, 16, 48, 0.4)',
|
secondLineShadow: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
// third bar
|
// third bar
|
||||||
thirdLineGradFrom: 'rgba(236, 242, 245, 0.8)',
|
thirdLineGradFrom: theme.success,
|
||||||
thirdLineGradTo: 'rgba(236, 242, 245, 0.8)',
|
thirdLineGradTo: theme.successLight,
|
||||||
thirdLineShadow: 'rgba(14, 16, 48, 0.4)',
|
thirdLineShadow: 'rgba(0, 0, 0, 0)',
|
||||||
},
|
},
|
||||||
|
|
||||||
orderProfitLegend: {
|
orderProfitLegend: {
|
||||||
firstItem: 'linear-gradient(90deg, #3edd81 0%, #3bddad 100%)',
|
firstItem: theme.success,
|
||||||
secondItem: 'linear-gradient(90deg, #8d7fff 0%, #b17fff 100%)',
|
secondItem: theme.primary,
|
||||||
thirdItem: 'rgba(236, 242, 245, 0.8)',
|
thirdItem: theme.bg3,
|
||||||
},
|
},
|
||||||
|
|
||||||
visitors: {
|
visitors: {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue