From 3d5d62db94d5b6b704817595a31f794a0c793f29 Mon Sep 17 00:00:00 2001 From: nixa <4dmitr@gmail.com> Date: Thu, 19 May 2016 17:06:15 +0300 Subject: [PATCH] chart styles updates --- .../dashboard/pieChart/pieChart.service.ts | 2 +- .../dashboard/trafficChart/trafficChart.scss | 102 +++++++++--------- src/app/theme/theme.configProvider.ts | 3 +- 3 files changed, 52 insertions(+), 55 deletions(-) diff --git a/src/app/pages/dashboard/pieChart/pieChart.service.ts b/src/app/pages/dashboard/pieChart/pieChart.service.ts index 13ba0124..49c0b574 100644 --- a/src/app/pages/dashboard/pieChart/pieChart.service.ts +++ b/src/app/pages/dashboard/pieChart/pieChart.service.ts @@ -8,7 +8,7 @@ export class PieChartService { } getData() { - let pieColor = colorHelper.hexToRgbA(this._baConfig.get().colors.defaultText, 0.2); + let pieColor = this._baConfig.get().colors.custom.dashboardPieChart; return [ { color: pieColor, diff --git a/src/app/pages/dashboard/trafficChart/trafficChart.scss b/src/app/pages/dashboard/trafficChart/trafficChart.scss index 63fc384a..f5275b9d 100644 --- a/src/app/pages/dashboard/trafficChart/trafficChart.scss +++ b/src/app/pages/dashboard/trafficChart/trafficChart.scss @@ -5,21 +5,25 @@ position: relative; } + +.chart-bg { + position: absolute; + width: 180px; + height: 180px; + left: 60px; + top: 60px; + background-color: transparent; + border-radius: 100px; +} + .ng2, .blur { .traffic-chart canvas { border: 15px solid rgba(0, 0, 0, 0.2); - //box-shadow: 0 0 5px 0 rgb(0, 0, 0) inset; border-radius: 150px; } .chart-bg { - position: absolute; - width: 180px; - height: 180px; - left: 60px; - top: 60px; background-color: rgba(0, 0, 0, 0.4); - border-radius: 100px; } } @@ -57,7 +61,7 @@ .traffic-legend { display: inline-block; - padding: 70px 0 0 0px; + padding: 70px 0 0 0; width: 160px; } @@ -143,67 +147,59 @@ height: auto; } - .channels-block { - div.channels-info { - display: block; - width: calc(100% - 88px); - margin-top: -65px; - margin-bottom: 10px; - } - .traffic-chart { - position: inherit; - float: none; - margin: 0 auto; - } - .chart-bg { - left: calc(50% - 90px); - } + div.channels-info { + display: block; + width: calc(100% - 88px); + margin-top: -65px; + margin-bottom: 10px; + } + .traffic-chart { + position: inherit; + float: none; + margin: 0 auto; + } + .chart-bg { + left: calc(50% - 90px); } } @media (max-width: 1465px) and (min-width: 1199px) { - .channels-block { - .channels-info { - display: none; - } - .traffic-chart { - position: inherit; - float: none; - margin: 0 auto; - } + .channels-info { + display: none; + } + .traffic-chart { + position: inherit; + float: none; + margin: 0 auto; + } - .chart-bg { - left: calc(50% - 90px); - } + .chart-bg { + left: calc(50% - 90px); } } @media (max-width: 380px) { - .channels-block { - .traffic-chart { - width: 240px; - } + .traffic-chart { + width: 240px; + } - .canvas-holder { - width: 240px; - height: 240px; - } + .canvas-holder { + width: 240px; + height: 240px; + } - .chart-bg { - top: 30px; - } + .chart-bg { + top: 30px; } } @media (max-width: 320px) { - .channels-block { - .chart-bg { - left: 50px; - top: 50px; - width: 142px; - height: 142px; - } + .chart-bg { + left: 50px; + top: 50px; + width: 142px; + height: 142px; } } diff --git a/src/app/theme/theme.configProvider.ts b/src/app/theme/theme.configProvider.ts index 2a613675..4eb404ba 100644 --- a/src/app/theme/theme.configProvider.ts +++ b/src/app/theme/theme.configProvider.ts @@ -66,7 +66,8 @@ export class BaThemeConfigProvider { }, custom: { - dashboardLineChart: '#fff', + dashboardLineChart: this.basic.defaultText, + dashboardPieChart: colorHelper.hexToRgbA(this.basic.defaultText, 0.8) } } };