mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-23 19:00:13 +01:00
feat(dashboard): add new E-commerce dashboard (#1754)
This commit is contained in:
ESadouski
Dmitry Nehaychik
parent
3482404b88
commit
56e4709a55
106 changed files with 6333 additions and 19 deletions
|
|
@ -105,6 +105,28 @@
|
|||
}
|
||||
}
|
||||
|
||||
/deep/ nb-menu {
|
||||
& > .menu-items {
|
||||
& > .menu-item:first-child {
|
||||
.menu-title {
|
||||
&::after {
|
||||
content: 'new';
|
||||
color: nb-theme(color-white);
|
||||
margin-left: 1rem;
|
||||
background: nb-theme(color-danger);
|
||||
padding: 0 0.5rem;
|
||||
border-radius: nb-theme(radius);
|
||||
font-size: nb-theme(font-size-sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nb-e-commerce {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.compacted {
|
||||
|
||||
/deep/ nb-sidebar-header {
|
||||
|
|
|
|||
|
|
@ -2,3 +2,4 @@ export * from './capitalize.pipe';
|
|||
export * from './plural.pipe';
|
||||
export * from './round.pipe';
|
||||
export * from './timing.pipe';
|
||||
export * from './number-with-commas.pipe';
|
||||
|
|
|
|||
9
src/app/@theme/pipes/number-with-commas.pipe.ts
Normal file
9
src/app/@theme/pipes/number-with-commas.pipe.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import { Pipe, PipeTransform } from '@angular/core';
|
||||
|
||||
@Pipe({ name: 'ngxNumberWithCommas' })
|
||||
export class NumberWithCommasPipe implements PipeTransform {
|
||||
|
||||
transform(input: number): string {
|
||||
return new Intl.NumberFormat().format(input);
|
||||
}
|
||||
}
|
||||
|
|
@ -18,14 +18,14 @@ export const CORPORATE_THEME = {
|
|||
},
|
||||
|
||||
traffic: {
|
||||
colorBlack: '#000000',
|
||||
colorBlack: '#ffffff',
|
||||
tooltipBg: '#eef2f5',
|
||||
tooltipBorderColor: '#eef2f5',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: '400',
|
||||
|
||||
lineBg: '#c0c8d1',
|
||||
lineBg: '#cae6f3',
|
||||
lineShadowBlur: '0',
|
||||
itemColor: '#bcc3cc',
|
||||
itemBorderColor: '#bcc3cc',
|
||||
|
|
@ -68,6 +68,62 @@ export const CORPORATE_THEME = {
|
|||
areaBorderColor: '#ebeef2',
|
||||
},
|
||||
|
||||
profitBarAnimationEchart: {
|
||||
textColor: '#b2bac2',
|
||||
|
||||
firstAnimationBarColor: '#719efc',
|
||||
secondAnimationBarColor: '#5dcfe3',
|
||||
|
||||
splitLineStyleOpacity: '0.06',
|
||||
splitLineStyleWidth: '1',
|
||||
splitLineStyleColor: '#000000',
|
||||
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: '400',
|
||||
tooltipFontSize: '16',
|
||||
tooltipBg: '#eef2f5',
|
||||
tooltipBorderColor: '#eef2f5',
|
||||
tooltipBorderWidth: '3',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
},
|
||||
|
||||
trafficBarEchart: {
|
||||
gradientFrom: '#ff8ea0',
|
||||
gradientTo: '#ffa36b',
|
||||
shadow: 'rgba(0, 0, 0, 0)',
|
||||
shadowBlur: '0',
|
||||
|
||||
axisTextColor: '#b2bac2',
|
||||
axisFontSize: '12',
|
||||
|
||||
tooltipBg: '#edf0f4',
|
||||
tooltipBorderColor: '#ebeef2',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: 'bolder',
|
||||
},
|
||||
|
||||
countryOrders: {
|
||||
countryBorderColor: 'rgba(255, 255, 255, 1)',
|
||||
countryFillColor: 'rgba(236, 242, 245, 1)',
|
||||
countryBorderWidth: '1',
|
||||
hoveredCountryBorderColor: 'rgba(113, 158, 252, 1)',
|
||||
hoveredCountryFillColor: 'rgba(199, 216, 247, 1)',
|
||||
hoveredCountryBorderWidth: '3',
|
||||
|
||||
chartAxisLineColor: 'rgba(0, 0, 0, 0)',
|
||||
chartAxisTextColor: '#b2bac2',
|
||||
chartAxisFontSize: '16',
|
||||
chartGradientTo: 'rgba(113, 158, 252, 1)',
|
||||
chartGradientFrom: 'rgba(113, 158, 252, 1)',
|
||||
chartAxisSplitLine: '#ebeef2',
|
||||
chartShadowLineColor: '#2f296b',
|
||||
|
||||
chartLineBottomShadowColor: 'rgba(113, 158, 252, 1)',
|
||||
|
||||
chartInnerLineColor: '#eceff4',
|
||||
},
|
||||
|
||||
echarts: {
|
||||
bg: '#ffffff',
|
||||
textColor: '#484848',
|
||||
|
|
@ -82,5 +138,167 @@ export const CORPORATE_THEME = {
|
|||
axisLineColor: '#cccccc',
|
||||
textColor: '#484848',
|
||||
},
|
||||
|
||||
orders: {
|
||||
tooltipBg: '#ffffff',
|
||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: '#ebeef2',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: 'bolder',
|
||||
tooltipFontSize: '20',
|
||||
|
||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
||||
axisFontSize: '16',
|
||||
axisTextColor: '#b2bac2',
|
||||
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
|
||||
|
||||
itemBorderColor: '#73a1ff',
|
||||
lineStyle: 'solid',
|
||||
lineWidth: '4',
|
||||
|
||||
// first line
|
||||
firstAreaGradFrom: 'rgba(227, 236, 254, 0.7)',
|
||||
firstAreaGradTo: 'rgba(227, 236, 254, 0.7)',
|
||||
firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// second line
|
||||
secondLineGradFrom: 'rgba(93, 207, 227, 1)',
|
||||
secondLineGradTo: 'rgba(93, 207, 227, 1)',
|
||||
|
||||
secondAreaGradFrom: 'rgba(0, 0, 0, 0)',
|
||||
secondAreaGradTo: 'rgba(0, 0, 0, 0)',
|
||||
secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// third line
|
||||
thirdLineGradFrom: 'rgba(113, 158, 252, 1)',
|
||||
thirdLineGradTo: 'rgba(113, 158, 252, 1)',
|
||||
|
||||
thirdAreaGradFrom: 'rgba(0, 0, 0, 0)',
|
||||
thirdAreaGradTo: 'rgba(0, 0, 0, 0)',
|
||||
thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
profit: {
|
||||
bg: '#ffffff',
|
||||
textColor: '#ffffff',
|
||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
||||
splitLineColor: 'rgba(161, 161 ,229, 0.2)',
|
||||
areaOpacity: '1',
|
||||
|
||||
axisFontSize: '16',
|
||||
axisTextColor: '#b2bac2',
|
||||
|
||||
// first bar
|
||||
firstLineGradFrom: '#719efc',
|
||||
firstLineGradTo: '#719efc',
|
||||
firstLineShadow: 'rgba(14, 16, 48, 0.4)',
|
||||
|
||||
// second bar
|
||||
secondLineGradFrom: '#5dcfe3',
|
||||
secondLineGradTo: '#5dcfe3',
|
||||
secondLineShadow: 'rgba(14, 16, 48, 0.4)',
|
||||
|
||||
// third bar
|
||||
thirdLineGradFrom: '#e3ecfe',
|
||||
thirdLineGradTo: '#e3ecfe',
|
||||
thirdLineShadow: 'rgba(14, 16, 48, 0.4)',
|
||||
},
|
||||
|
||||
orderProfitLegend: {
|
||||
firstItem: '#719efc',
|
||||
secondItem: '#5dcfe3',
|
||||
thirdItem: '#e3ecfe',
|
||||
},
|
||||
|
||||
visitors: {
|
||||
tooltipBg: '#ffffff',
|
||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: '#ebeef2',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: 'bolder',
|
||||
tooltipFontSize: '20',
|
||||
|
||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
||||
axisFontSize: '16',
|
||||
axisTextColor: '#b2bac2',
|
||||
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
|
||||
|
||||
itemBorderColor: '#73a1ff',
|
||||
lineStyle: 'dotted',
|
||||
lineWidth: '6',
|
||||
lineGradFrom: '#73a1ff',
|
||||
lineGradTo: '#73a1ff',
|
||||
lineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
areaGradFrom: 'rgba(146, 181, 252, 1)',
|
||||
areaGradTo: 'rgba(146, 181, 252, 1)',
|
||||
shadowLineDarkBg: '#a695ff',
|
||||
|
||||
innerLineStyle: 'solid',
|
||||
innerLineWidth: '1',
|
||||
|
||||
innerAreaGradFrom: 'rgba(227, 236, 254, 1)',
|
||||
innerAreaGradTo: 'rgba(227, 236, 254, 1)',
|
||||
},
|
||||
|
||||
visitorsLegend: {
|
||||
firstIcon: '#e3ecfe',
|
||||
secondIcon: '#719efc',
|
||||
},
|
||||
|
||||
visitorsPie: {
|
||||
firstPieGradientLeft: '#94e2ed',
|
||||
firstPieGradientRight: '#94e2ed',
|
||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
firstPieRadius: ['65%', '90%'],
|
||||
|
||||
secondPieGradientLeft: '#719efc',
|
||||
secondPieGradientRight: '#719efc',
|
||||
secondPieShadowColor: '#b2cafb',
|
||||
secondPieRadius: ['63%', '92%'],
|
||||
shadowOffsetX: '-4',
|
||||
shadowOffsetY: '-4',
|
||||
},
|
||||
|
||||
visitorsPieLegend: {
|
||||
firstSection: '#719efc',
|
||||
secondSection: '#99e5ee',
|
||||
},
|
||||
|
||||
earningPie: {
|
||||
radius: ['65%', '100%'],
|
||||
center: ['50%', '50%'],
|
||||
|
||||
fontSize: '22',
|
||||
|
||||
firstPieGradientLeft: '#719efc',
|
||||
firstPieGradientRight: '#719efc',
|
||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
secondPieGradientLeft: '#ff9f6f',
|
||||
secondPieGradientRight: '#ff9f6f',
|
||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
thirdPieGradientLeft: '#ff5e83',
|
||||
thirdPieGradientRight: '#ff5e83',
|
||||
thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
earningLine: {
|
||||
gradFrom: '#e3ecfe',
|
||||
gradTo: '#e3ecfe',
|
||||
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: '400',
|
||||
tooltipFontSize: '16',
|
||||
tooltipBg: '#eef2f5',
|
||||
tooltipBorderColor: '#eef2f5',
|
||||
tooltipBorderWidth: '3',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -69,6 +69,62 @@ export const COSMIC_THEME = {
|
|||
areaBorderColor: '#654ddb',
|
||||
},
|
||||
|
||||
profitBarAnimationEchart: {
|
||||
textColor: '#ffffff',
|
||||
|
||||
firstAnimationBarColor: '#0088ff',
|
||||
secondAnimationBarColor: '#7659ff',
|
||||
|
||||
splitLineStyleOpacity: '0.06',
|
||||
splitLineStyleWidth: '1',
|
||||
splitLineStyleColor: '#000000',
|
||||
|
||||
tooltipTextColor: '#ffffff',
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '16',
|
||||
tooltipBg: 'rgba(0, 255, 170, 0.35)',
|
||||
tooltipBorderColor: '#00d977',
|
||||
tooltipBorderWidth: '3',
|
||||
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 4px 16px;',
|
||||
},
|
||||
|
||||
trafficBarEchart: {
|
||||
gradientFrom: '#fc0',
|
||||
gradientTo: '#ffa100',
|
||||
shadow: '#ffb600',
|
||||
shadowBlur: '5',
|
||||
|
||||
axisTextColor: '#a1a1e5',
|
||||
axisFontSize: '12',
|
||||
|
||||
tooltipBg: 'rgba(0, 255, 170, 0.35)',
|
||||
tooltipBorderColor: '#00d977',
|
||||
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 4px 16px;',
|
||||
tooltipTextColor: '#ffffff',
|
||||
tooltipFontWeight: 'normal',
|
||||
},
|
||||
|
||||
countryOrders: {
|
||||
countryBorderColor: '#525dbd',
|
||||
countryFillColor: '#4f41a6',
|
||||
countryBorderWidth: '2',
|
||||
hoveredCountryBorderColor: '#00f9a6',
|
||||
hoveredCountryFillColor: '#377aa7',
|
||||
hoveredCountryBorderWidth: '3',
|
||||
|
||||
chartAxisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
||||
chartAxisTextColor: '#a1a1e5',
|
||||
chartAxisFontSize: '16',
|
||||
chartGradientTo: '#00c7c7',
|
||||
chartGradientFrom: '#00d977',
|
||||
chartAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
|
||||
chartShadowBarColor: '#2f296b',
|
||||
|
||||
chartLineBottomShadowColor: '#00977e',
|
||||
|
||||
chartInnerLineColor: '#2f296b',
|
||||
},
|
||||
|
||||
echarts: {
|
||||
bg: '#3d3780',
|
||||
textColor: '#ffffff',
|
||||
|
|
@ -83,5 +139,166 @@ export const COSMIC_THEME = {
|
|||
axisLineColor: '#a1a1e5',
|
||||
textColor: '#ffffff',
|
||||
},
|
||||
|
||||
orders: {
|
||||
tooltipBg: 'rgba(0, 255, 170, 0.35)',
|
||||
tooltipLineColor: 'rgba(255, 255, 255, 0.1)',
|
||||
tooltipLineWidth: '1',
|
||||
tooltipBorderColor: '#00d977',
|
||||
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: '#ffffff',
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '20',
|
||||
|
||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
||||
axisFontSize: '16',
|
||||
axisTextColor: '#a1a1e5',
|
||||
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
|
||||
|
||||
itemBorderColor: '#ffffff',
|
||||
lineStyle: 'solid',
|
||||
lineWidth: '4',
|
||||
|
||||
// first line
|
||||
firstAreaGradFrom: 'rgba(78, 64, 164, 1)',
|
||||
firstAreaGradTo: 'rgba(78, 64, 164, 1)',
|
||||
firstShadowLineDarkBg: '#018dff',
|
||||
|
||||
// second line
|
||||
secondLineGradFrom: '#00bece',
|
||||
secondLineGradTo: '#00da78',
|
||||
|
||||
secondAreaGradFrom: 'rgba(38, 139, 145, 0.8)',
|
||||
secondAreaGradTo: 'rgba(38, 139, 145, 0.5)',
|
||||
secondShadowLineDarkBg: '#2c5a85',
|
||||
|
||||
// third line
|
||||
thirdLineGradFrom: '#8069ff',
|
||||
thirdLineGradTo: '#8357ff',
|
||||
|
||||
thirdAreaGradFrom: 'rgba(118, 73, 208, 0.7)',
|
||||
thirdAreaGradTo: 'rgba(188, 92, 255, 0.4)',
|
||||
thirdShadowLineDarkBg: '#a695ff',
|
||||
},
|
||||
|
||||
profit: {
|
||||
bg: '#3d3780',
|
||||
textColor: '#ffffff',
|
||||
axisLineColor: '#a1a1e5',
|
||||
splitLineColor: '#342e73',
|
||||
areaOpacity: '1',
|
||||
|
||||
axisFontSize: '16',
|
||||
axisTextColor: '#a1a1e5',
|
||||
|
||||
// first bar
|
||||
firstLineGradFrom: '#00bece',
|
||||
firstLineGradTo: '#00da78',
|
||||
firstLineShadow: 'rgba(14, 16, 48, 0.4)',
|
||||
|
||||
// second bar
|
||||
secondLineGradFrom: '#8069ff',
|
||||
secondLineGradTo: '#8357ff',
|
||||
secondLineShadow: 'rgba(14, 16, 48, 0.4)',
|
||||
|
||||
// third bar
|
||||
thirdLineGradFrom: '#4e40a4',
|
||||
thirdLineGradTo: '#4e40a4',
|
||||
thirdLineShadow: 'rgba(14, 16, 48, 0.4)',
|
||||
},
|
||||
|
||||
orderProfitLegend: {
|
||||
firstItem: 'linear-gradient(90deg, #00c7c7 0%, #00d977 100%)',
|
||||
secondItem: 'linear-gradient(90deg, #a454ff 0%, #7659ff 100%)',
|
||||
thirdItem: '#4e40a4',
|
||||
},
|
||||
|
||||
visitors: {
|
||||
tooltipBg: 'rgba(0, 255, 170, 0.35)',
|
||||
tooltipLineColor: 'rgba(255, 255, 255, 0.1)',
|
||||
tooltipLineWidth: '1',
|
||||
tooltipBorderColor: '#00d977',
|
||||
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: '#ffffff',
|
||||
tooltipFontWeight: 'normal',
|
||||
|
||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
||||
axisFontSize: '16',
|
||||
axisTextColor: '#a1a1e5',
|
||||
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
|
||||
|
||||
itemBorderColor: '#ffffff',
|
||||
lineStyle: 'dotted',
|
||||
lineWidth: '6',
|
||||
lineGradFrom: '#ffffff',
|
||||
lineGradTo: '#ffffff',
|
||||
lineShadow: 'rgba(14, 16, 48, 0.4)',
|
||||
|
||||
areaGradFrom: 'rgba(188, 92, 255, 1)',
|
||||
areaGradTo: 'rgba(188, 92, 255, 0.5)',
|
||||
shadowLineDarkBg: '#a695ff',
|
||||
|
||||
innerLineStyle: 'solid',
|
||||
innerLineWidth: '1',
|
||||
|
||||
innerAreaGradFrom: 'rgba(59, 165, 243, 1)',
|
||||
innerAreaGradTo: 'rgba(4, 133, 243 , 1)',
|
||||
},
|
||||
|
||||
visitorsLegend: {
|
||||
firstIcon: 'linear-gradient(90deg, #0088ff 0%, #3dafff 100%)',
|
||||
secondIcon: 'linear-gradient(90deg, #a454ff 0%, #7659ff 100%)',
|
||||
},
|
||||
|
||||
visitorsPie: {
|
||||
firstPieGradientLeft: '#7bff24',
|
||||
firstPieGradientRight: '#2ec7fe',
|
||||
firstPieShadowColor: '#19977E',
|
||||
firstPieRadius: ['70%', '90%'],
|
||||
|
||||
secondPieGradientLeft: '#ff894a',
|
||||
secondPieGradientRight: '#ffcc10',
|
||||
secondPieShadowColor: '#cf7c1c',
|
||||
secondPieRadius: ['60%', '95%'],
|
||||
shadowOffsetX: '0',
|
||||
shadowOffsetY: '3',
|
||||
},
|
||||
|
||||
visitorsPieLegend: {
|
||||
firstSection: 'linear-gradient(90deg, #ffcb17 0%, #ff874c 100%)',
|
||||
secondSection: 'linear-gradient(90deg, #00c7c7 0%, #00d977 100%)',
|
||||
},
|
||||
|
||||
earningPie: {
|
||||
radius: ['65%', '100%'],
|
||||
center: ['50%', '50%'],
|
||||
|
||||
fontSize: '22',
|
||||
|
||||
firstPieGradientLeft: '#00d77f',
|
||||
firstPieGradientRight: '#00d77f',
|
||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
secondPieGradientLeft: '#7756f7',
|
||||
secondPieGradientRight: '#7756f7',
|
||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
thirdPieGradientLeft: '#ffca00',
|
||||
thirdPieGradientRight: '#ffca00',
|
||||
thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
earningLine: {
|
||||
gradFrom: 'rgba(118, 89, 255, 0.4)',
|
||||
gradTo: 'rgba(164, 84, 255, 0.5)',
|
||||
|
||||
tooltipTextColor: '#ffffff',
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '16',
|
||||
tooltipBg: 'rgba(0, 255, 170, 0.35)',
|
||||
tooltipBorderColor: '#00d977',
|
||||
tooltipBorderWidth: '3',
|
||||
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 4px 16px;',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -70,6 +70,62 @@ export const DEFAULT_THEME = {
|
|||
areaBorderColor: '#ebeef2',
|
||||
},
|
||||
|
||||
profitBarAnimationEchart: {
|
||||
textColor: '#484848',
|
||||
|
||||
firstAnimationBarColor: '#3edd81',
|
||||
secondAnimationBarColor: '#8d7fff',
|
||||
|
||||
splitLineStyleOpacity: '0.06',
|
||||
splitLineStyleWidth: '1',
|
||||
splitLineStyleColor: '#000000',
|
||||
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: 'bolder',
|
||||
tooltipFontSize: '16',
|
||||
tooltipBg: '#ffffff',
|
||||
tooltipBorderColor: '#c0c8d1',
|
||||
tooltipBorderWidth: '3',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
},
|
||||
|
||||
trafficBarEchart: {
|
||||
gradientFrom: '#fc0',
|
||||
gradientTo: '#ffa100',
|
||||
shadow: '#ffb600',
|
||||
shadowBlur: '0',
|
||||
|
||||
axisTextColor: '#b2bac2',
|
||||
axisFontSize: '12',
|
||||
|
||||
tooltipBg: '#ffffff',
|
||||
tooltipBorderColor: '#c0c8d1',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: 'bolder',
|
||||
},
|
||||
|
||||
countryOrders: {
|
||||
countryBorderColor: 'rgba(255, 255, 255, 1)',
|
||||
countryFillColor: 'rgba(236, 242, 245, 1)',
|
||||
countryBorderWidth: '1',
|
||||
hoveredCountryBorderColor: '#40dc7e',
|
||||
hoveredCountryFillColor: '#c7f4d9',
|
||||
hoveredCountryBorderWidth: '3',
|
||||
|
||||
chartAxisLineColor: 'rgba(0, 0, 0, 0)',
|
||||
chartAxisTextColor: '#b2bac2',
|
||||
chartAxisFontSize: '16',
|
||||
chartGradientTo: '#3edd81',
|
||||
chartGradientFrom: '#3bddaf',
|
||||
chartAxisSplitLine: '#ebeef2',
|
||||
chartShadowLineColor: '#2f296b',
|
||||
|
||||
chartLineBottomShadowColor: '#eceff4',
|
||||
|
||||
chartInnerLineColor: '#eceff4',
|
||||
},
|
||||
|
||||
echarts: {
|
||||
bg: '#ffffff',
|
||||
textColor: '#484848',
|
||||
|
|
@ -84,5 +140,168 @@ export const DEFAULT_THEME = {
|
|||
axisLineColor: '#cccccc',
|
||||
textColor: '#484848',
|
||||
},
|
||||
|
||||
orders: {
|
||||
tooltipBg: '#ffffff',
|
||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: '#ebeef2',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: 'bolder',
|
||||
tooltipFontSize: '20',
|
||||
|
||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
||||
axisFontSize: '16',
|
||||
axisTextColor: '#b2bac2',
|
||||
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
|
||||
|
||||
itemBorderColor: '#42db7d',
|
||||
lineStyle: 'solid',
|
||||
lineWidth: '4',
|
||||
|
||||
// first line
|
||||
firstAreaGradFrom: 'rgba(236, 242, 245, 0.8)',
|
||||
firstAreaGradTo: 'rgba(236, 242, 245, 0.8)',
|
||||
firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// second line
|
||||
secondLineGradFrom: 'rgba(164, 123, 255, 1)',
|
||||
secondLineGradTo: 'rgba(164, 123, 255, 1)',
|
||||
|
||||
secondAreaGradFrom: 'rgba(188, 92, 255, 0.2)',
|
||||
secondAreaGradTo: 'rgba(188, 92, 255, 0)',
|
||||
secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// third line
|
||||
thirdLineGradFrom: 'rgba(55, 220, 136, 1)',
|
||||
thirdLineGradTo: 'rgba(55, 220, 136, 1)',
|
||||
|
||||
thirdAreaGradFrom: 'rgba(31 ,106, 124, 0.2)',
|
||||
thirdAreaGradTo: 'rgba(4, 126, 230, 0)',
|
||||
thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
// TODO: need design for default theme
|
||||
profit: {
|
||||
bg: '#ffffff',
|
||||
textColor: '#ffffff',
|
||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
||||
splitLineColor: 'rgba(161, 161 ,229, 0.2)',
|
||||
areaOpacity: '1',
|
||||
|
||||
axisFontSize: '16',
|
||||
axisTextColor: '#b2bac2',
|
||||
|
||||
// first bar
|
||||
firstLineGradFrom: '#00bece',
|
||||
firstLineGradTo: '#00da78',
|
||||
firstLineShadow: 'rgba(14, 16, 48, 0.4)',
|
||||
|
||||
// second bar
|
||||
secondLineGradFrom: '#8069ff',
|
||||
secondLineGradTo: '#8357ff',
|
||||
secondLineShadow: 'rgba(14, 16, 48, 0.4)',
|
||||
|
||||
// third bar
|
||||
thirdLineGradFrom: 'rgba(236, 242, 245, 0.8)',
|
||||
thirdLineGradTo: 'rgba(236, 242, 245, 0.8)',
|
||||
thirdLineShadow: 'rgba(14, 16, 48, 0.4)',
|
||||
},
|
||||
|
||||
orderProfitLegend: {
|
||||
firstItem: 'linear-gradient(90deg, #3edd81 0%, #3bddad 100%)',
|
||||
secondItem: 'linear-gradient(90deg, #8d7fff 0%, #b17fff 100%)',
|
||||
thirdItem: 'rgba(236, 242, 245, 0.8)',
|
||||
},
|
||||
|
||||
visitors: {
|
||||
tooltipBg: '#ffffff',
|
||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: '#ebeef2',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: 'bolder',
|
||||
tooltipFontSize: '20',
|
||||
|
||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
||||
axisFontSize: '16',
|
||||
axisTextColor: '#b2bac2',
|
||||
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
|
||||
|
||||
itemBorderColor: '#42db7d',
|
||||
lineStyle: 'dotted',
|
||||
lineWidth: '6',
|
||||
lineGradFrom: '#ffffff',
|
||||
lineGradTo: '#ffffff',
|
||||
lineShadow: 'rgba(14, 16, 48, 0)',
|
||||
|
||||
areaGradFrom: 'rgba(188, 92, 255, 1)',
|
||||
areaGradTo: 'rgba(188, 92, 255, 0.5)',
|
||||
shadowLineDarkBg: '#a695ff',
|
||||
|
||||
innerLineStyle: 'solid',
|
||||
innerLineWidth: '1',
|
||||
|
||||
innerAreaGradFrom: 'rgba(60, 221, 156, 1)',
|
||||
innerAreaGradTo: 'rgba(60, 221, 156, 1)',
|
||||
},
|
||||
|
||||
visitorsLegend: {
|
||||
firstIcon: 'linear-gradient(90deg, #3edd81 0%, #3bddad 100%)',
|
||||
secondIcon: 'linear-gradient(90deg, #8d7fff 0%, #b17fff 100%)',
|
||||
},
|
||||
|
||||
visitorsPie: {
|
||||
firstPieGradientLeft: '#8defbb',
|
||||
firstPieGradientRight: '#8defbb',
|
||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
firstPieRadius: ['70%', '90%'],
|
||||
|
||||
secondPieGradientLeft: '#ff894a',
|
||||
secondPieGradientRight: '#ffcc10',
|
||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
secondPieRadius: ['60%', '97%'],
|
||||
shadowOffsetX: '0',
|
||||
shadowOffsetY: '0',
|
||||
},
|
||||
|
||||
visitorsPieLegend: {
|
||||
firstSection: 'linear-gradient(90deg, #ffcb17 0%, #ff874c 100%)',
|
||||
secondSection: '#8defbb',
|
||||
},
|
||||
|
||||
earningPie: {
|
||||
radius: ['65%', '100%'],
|
||||
center: ['50%', '50%'],
|
||||
|
||||
fontSize: '22',
|
||||
|
||||
firstPieGradientLeft: '#00d77f',
|
||||
firstPieGradientRight: '#00d77f',
|
||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
secondPieGradientLeft: '#7756f7',
|
||||
secondPieGradientRight: '#7756f7',
|
||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
thirdPieGradientLeft: '#ffca00',
|
||||
thirdPieGradientRight: '#ffca00',
|
||||
thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
earningLine: {
|
||||
gradFrom: 'rgba(188, 92, 255, 0.5)',
|
||||
gradTo: 'rgba(188, 92, 255, 0.5)',
|
||||
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: 'bolder',
|
||||
tooltipFontSize: '16',
|
||||
tooltipBg: '#ffffff',
|
||||
tooltipBorderColor: '#c0c8d1',
|
||||
tooltipBorderWidth: '3',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -18,6 +18,22 @@ $nb-themes: nb-register-theme((
|
|||
switcher-background: #ebeff5,
|
||||
switcher-background-percentage: 50%,
|
||||
drops-icon-line-gadient: -webkit-linear-gradient(#01dbb5, #0bbb79),
|
||||
|
||||
list-item-border-width: 1px,
|
||||
|
||||
slide-out-container-width: 30%,
|
||||
slide-out-background: linear-gradient(270deg, #f7fafb 0%, #ecf2f5 100%),
|
||||
slide-out-shadow-color: 0 4px 14px 0 #a2d2c8,
|
||||
slide-out-shadow-color-rtl: 0 4px 14px 0 #a2d2c8,
|
||||
|
||||
chart-panel-summary-box-shadow: none,
|
||||
chart-panel-summary-background-color: #ecf2f5,
|
||||
chart-panel-summary-border-color: #ebeff1,
|
||||
chart-panel-summary-border-width: 1px,
|
||||
|
||||
ecommerce-card-border-width: 1px,
|
||||
|
||||
progress-bar-background: linear-gradient(90deg, #3edd81 0%, #3bddaf 100%),
|
||||
), default, default);
|
||||
|
||||
$nb-themes: nb-register-theme((
|
||||
|
|
@ -32,6 +48,22 @@ $nb-themes: nb-register-theme((
|
|||
switcher-background: #4e41a5,
|
||||
switcher-background-percentage: 14%,
|
||||
drops-icon-line-gadient: -webkit-linear-gradient(#a258fe, #7958fa),
|
||||
|
||||
list-item-border-width: 1px,
|
||||
|
||||
slide-out-container-width: 30%,
|
||||
slide-out-background: radial-gradient(circle, #302c6e 0%, #423f8c 100%),
|
||||
slide-out-shadow-color: 2px 0 3px rgba(19, 19, 94, 0.9),
|
||||
slide-out-shadow-color-rtl: -2px 0 3px rgba(19, 19, 94, 0.9),
|
||||
|
||||
chart-panel-summary-box-shadow: none,
|
||||
chart-panel-summary-background-color: rgba(0, 0, 0, 0.1),
|
||||
chart-panel-summary-border-color: #332e73,
|
||||
chart-panel-summary-border-width: 1px,
|
||||
|
||||
ecommerce-card-border-width: 1px,
|
||||
|
||||
progress-bar-background: linear-gradient(90deg, #00c7c7 0%, #00d977 100%),
|
||||
), cosmic, cosmic);
|
||||
|
||||
$nb-themes: nb-register-theme((
|
||||
|
|
@ -46,4 +78,20 @@ $nb-themes: nb-register-theme((
|
|||
switcher-background: #2b2d34,
|
||||
switcher-background-percentage: 14%,
|
||||
drops-icon-line-gadient: -webkit-linear-gradient(#e9e8eb, #a7a2be),
|
||||
|
||||
list-item-border-width: 1px,
|
||||
|
||||
slide-out-container-width: 30%,
|
||||
slide-out-background: linear-gradient(270deg, #f7fafb 0%, #ecf2f5 100%),
|
||||
slide-out-shadow-color: 0 4px 14px 0 #a2d2c8,
|
||||
slide-out-shadow-color-rtl: 0 4px 14px 0 #a2d2c8,
|
||||
|
||||
chart-panel-summary-box-shadow: none,
|
||||
chart-panel-summary-background-color: #f7fafb,
|
||||
chart-panel-summary-border-color: #ebeff1,
|
||||
chart-panel-summary-border-width: 1px,
|
||||
|
||||
ecommerce-card-border-width: 1px,
|
||||
|
||||
progress-bar-background: linear-gradient(90deg, #ff9f6f 0%, #ff8b97 100%),
|
||||
), corporate, corporate);
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ import {
|
|||
NbCheckboxModule,
|
||||
NbPopoverModule,
|
||||
NbContextMenuModule,
|
||||
NbProgressBarModule,
|
||||
} from '@nebular/theme';
|
||||
|
||||
import { NbSecurityModule } from '@nebular/security';
|
||||
|
|
@ -32,7 +33,13 @@ import {
|
|||
TinyMCEComponent,
|
||||
ThemeSwitcherListComponent,
|
||||
} from './components';
|
||||
import { CapitalizePipe, PluralPipe, RoundPipe, TimingPipe } from './pipes';
|
||||
import {
|
||||
CapitalizePipe,
|
||||
PluralPipe,
|
||||
RoundPipe,
|
||||
TimingPipe,
|
||||
NumberWithCommasPipe,
|
||||
} from './pipes';
|
||||
import {
|
||||
OneColumnLayoutComponent,
|
||||
SampleLayoutComponent,
|
||||
|
|
@ -59,7 +66,8 @@ const NB_MODULES = [
|
|||
NbPopoverModule,
|
||||
NbContextMenuModule,
|
||||
NgbModule,
|
||||
NbSecurityModule, // *nbIsGranted directive
|
||||
NbSecurityModule, // *nbIsGranted directive,
|
||||
NbProgressBarModule,
|
||||
];
|
||||
|
||||
const COMPONENTS = [
|
||||
|
|
@ -87,6 +95,7 @@ const PIPES = [
|
|||
PluralPipe,
|
||||
RoundPipe,
|
||||
TimingPipe,
|
||||
NumberWithCommasPipe,
|
||||
];
|
||||
|
||||
const NB_THEME_PROVIDERS = [
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue