refactor(visitors): update js theme

This commit is contained in:
Sergey Andrievskiy 2019-06-21 22:54:55 +03:00
parent 37bf315864
commit 2d9a295d19
3 changed files with 71 additions and 73 deletions

View file

@ -260,60 +260,59 @@ export const CORPORATE_THEME = {
}, },
visitors: { visitors: {
tooltipBg: '#ffffff', tooltipBg: theme.bg,
tooltipLineColor: 'rgba(0, 0, 0, 0)', tooltipLineColor: 'rgba(0, 0, 0, 0)',
tooltipLineWidth: '0', tooltipLineWidth: '1',
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: 'dotted', lineStyle: 'dotted',
lineWidth: '6', lineWidth: '6',
lineGradFrom: '#73a1ff', lineGradFrom: '#ffffff',
lineGradTo: '#73a1ff', lineGradTo: '#ffffff',
lineShadow: 'rgba(0, 0, 0, 0)', lineShadow: 'rgba(0, 0, 0, 0)',
areaGradFrom: 'rgba(146, 181, 252, 1)', areaGradFrom: theme.primary,
areaGradTo: 'rgba(146, 181, 252, 1)', areaGradTo: theme.primaryLight,
shadowLineDarkBg: '#a695ff',
innerLineStyle: 'solid', innerLineStyle: 'solid',
innerLineWidth: '1', innerLineWidth: '1',
innerAreaGradFrom: 'rgba(227, 236, 254, 1)', innerAreaGradFrom: theme.success,
innerAreaGradTo: 'rgba(227, 236, 254, 1)', innerAreaGradTo: theme.success,
}, },
visitorsLegend: { visitorsLegend: {
firstIcon: '#e3ecfe', firstIcon: theme.success,
secondIcon: '#719efc', secondIcon: theme.primary,
}, },
visitorsPie: { visitorsPie: {
firstPieGradientLeft: '#94e2ed', firstPieGradientLeft: theme.success,
firstPieGradientRight: '#94e2ed', firstPieGradientRight: theme.success,
firstPieShadowColor: 'rgba(0, 0, 0, 0)', firstPieShadowColor: 'rgba(0, 0, 0, 0)',
firstPieRadius: ['65%', '90%'], firstPieRadius: ['65%', '90%'],
secondPieGradientLeft: '#719efc', secondPieGradientLeft: theme.warning,
secondPieGradientRight: '#719efc', secondPieGradientRight: theme.warningLight,
secondPieShadowColor: '#b2cafb', secondPieShadowColor: 'rgba(0, 0, 0, 0)',
secondPieRadius: ['63%', '92%'], secondPieRadius: ['63%', '92%'],
shadowOffsetX: '-4', shadowOffsetX: '-4',
shadowOffsetY: '-4', shadowOffsetY: '-4',
}, },
visitorsPieLegend: { visitorsPieLegend: {
firstSection: '#719efc', firstSection: theme.warning,
secondSection: '#99e5ee', secondSection: theme.success,
}, },
earningPie: { earningPie: {

View file

@ -260,59 +260,59 @@ export const COSMIC_THEME = {
}, },
visitors: { visitors: {
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: '1',
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',
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: 'dotted', lineStyle: 'dotted',
lineWidth: '6', lineWidth: '6',
lineGradFrom: '#ffffff', lineGradFrom: '#ffffff',
lineGradTo: '#ffffff', lineGradTo: '#ffffff',
lineShadow: 'rgba(14, 16, 48, 0.4)', lineShadow: 'rgba(0, 0, 0, 0)',
areaGradFrom: 'rgba(188, 92, 255, 1)', areaGradFrom: theme.primary,
areaGradTo: 'rgba(188, 92, 255, 0.5)', areaGradTo: theme.primaryLight,
shadowLineDarkBg: '#a695ff',
innerLineStyle: 'solid', innerLineStyle: 'solid',
innerLineWidth: '1', innerLineWidth: '1',
innerAreaGradFrom: 'rgba(59, 165, 243, 1)', innerAreaGradFrom: theme.success,
innerAreaGradTo: 'rgba(4, 133, 243 , 1)', innerAreaGradTo: theme.success,
}, },
visitorsLegend: { visitorsLegend: {
firstIcon: 'linear-gradient(90deg, #0088ff 0%, #3dafff 100%)', firstIcon: theme.success,
secondIcon: 'linear-gradient(90deg, #a454ff 0%, #7659ff 100%)', secondIcon: theme.primary,
}, },
visitorsPie: { visitorsPie: {
firstPieGradientLeft: '#7bff24', firstPieGradientLeft: theme.success,
firstPieGradientRight: '#2ec7fe', firstPieGradientRight: theme.successLight,
firstPieShadowColor: '#19977E', firstPieShadowColor: 'rgba(0, 0, 0, 0)',
firstPieRadius: ['70%', '90%'], firstPieRadius: ['70%', '90%'],
secondPieGradientLeft: '#ff894a', secondPieGradientLeft: theme.warning,
secondPieGradientRight: '#ffcc10', secondPieGradientRight: theme.warningLight,
secondPieShadowColor: '#cf7c1c', secondPieShadowColor: 'rgba(0, 0, 0, 0)',
secondPieRadius: ['60%', '95%'], secondPieRadius: ['60%', '95%'],
shadowOffsetX: '0', shadowOffsetX: '0',
shadowOffsetY: '3', shadowOffsetY: '3',
}, },
visitorsPieLegend: { visitorsPieLegend: {
firstSection: 'linear-gradient(90deg, #ffcb17 0%, #ff874c 100%)', firstSection: theme.warning,
secondSection: 'linear-gradient(90deg, #00c7c7 0%, #00d977 100%)', secondSection: theme.success,
}, },
earningPie: { earningPie: {

View file

@ -260,51 +260,50 @@ export const DEFAULT_THEME = {
}, },
visitors: { visitors: {
tooltipBg: '#ffffff', tooltipBg: theme.bg,
tooltipLineColor: 'rgba(0, 0, 0, 0)', tooltipLineColor: 'rgba(0, 0, 0, 0)',
tooltipLineWidth: '0', tooltipLineWidth: '1',
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: 'dotted', lineStyle: 'dotted',
lineWidth: '6', lineWidth: '6',
lineGradFrom: '#ffffff', lineGradFrom: '#ffffff',
lineGradTo: '#ffffff', lineGradTo: '#ffffff',
lineShadow: 'rgba(14, 16, 48, 0)', lineShadow: 'rgba(0, 0, 0, 0)',
areaGradFrom: 'rgba(188, 92, 255, 1)', areaGradFrom: theme.primary,
areaGradTo: 'rgba(188, 92, 255, 0.5)', areaGradTo: theme.primaryLight,
shadowLineDarkBg: '#a695ff',
innerLineStyle: 'solid', innerLineStyle: 'solid',
innerLineWidth: '1', innerLineWidth: '1',
innerAreaGradFrom: 'rgba(60, 221, 156, 1)', innerAreaGradFrom: theme.success,
innerAreaGradTo: 'rgba(60, 221, 156, 1)', innerAreaGradTo: theme.success,
}, },
visitorsLegend: { visitorsLegend: {
firstIcon: 'linear-gradient(90deg, #3edd81 0%, #3bddad 100%)', firstIcon: theme.success,
secondIcon: 'linear-gradient(90deg, #8d7fff 0%, #b17fff 100%)', secondIcon: theme.primary,
}, },
visitorsPie: { visitorsPie: {
firstPieGradientLeft: '#8defbb', firstPieGradientLeft: theme.success,
firstPieGradientRight: '#8defbb', firstPieGradientRight: theme.success,
firstPieShadowColor: 'rgba(0, 0, 0, 0)', firstPieShadowColor: 'rgba(0, 0, 0, 0)',
firstPieRadius: ['70%', '90%'], firstPieRadius: ['70%', '90%'],
secondPieGradientLeft: '#ff894a', secondPieGradientLeft: theme.warning,
secondPieGradientRight: '#ffcc10', secondPieGradientRight: theme.warningLight,
secondPieShadowColor: 'rgba(0, 0, 0, 0)', secondPieShadowColor: 'rgba(0, 0, 0, 0)',
secondPieRadius: ['60%', '97%'], secondPieRadius: ['60%', '97%'],
shadowOffsetX: '0', shadowOffsetX: '0',
@ -312,8 +311,8 @@ export const DEFAULT_THEME = {
}, },
visitorsPieLegend: { visitorsPieLegend: {
firstSection: 'linear-gradient(90deg, #ffcb17 0%, #ff874c 100%)', firstSection: theme.warning,
secondSection: '#8defbb', secondSection: theme.success,
}, },
earningPie: { earningPie: {