jinql
/
blur-admin
mirror of https://github.com/akveo/blur-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

fix(skin): add ability to change background styles

pull/3/head
Vladimir Lugovsky 2015-11-27 14:27:43 +03:00
parent 20a036ef73
commit 6d5cbfab5b
8 changed files with 86 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/pages/charts/widgets/areaChart/areaChart.js
View File

@ -1,6 +1,6 @@
'use strict';
blurAdminApp.controller('areaChartCtrl', ['$scope', '$timeout', '$element', function($scope, $timeout, $element) {
blurAdminApp.controller('areaChartCtrl', ['$scope', '$timeout', '$element', 'tplSkinChartWatcherHelper', function($scope, $timeout, $element, tplSkinChartWatcherHelper) {
var id = $element[0].getAttribute('id');
var areaChart = AmCharts.makeChart(id, {
type: 'serial',
@ -125,6 +125,8 @@ blurAdminApp.controller('areaChartCtrl', ['$scope', '$timeout', '$element', func
pathToImages: 'img/'
});
tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, areaChart);
areaChart.addListener('dataUpdated', zoomAreaChart);
function zoomAreaChart() {

4
src/app/pages/charts/widgets/barChart/barChart.js
View File

@ -1,6 +1,6 @@
'use strict';
blurAdminApp.controller('barChartCtrl', ['$scope', '$timeout', '$element', function($scope, $timeout, $element) {
blurAdminApp.controller('barChartCtrl', ['$scope', '$timeout', '$element', 'tplSkinChartWatcherHelper', function($scope, $timeout, $element, tplSkinChartWatcherHelper) {
var id = $element[0].getAttribute('id');
var barChart = AmCharts.makeChart(id, {
type: 'serial',
@ -72,4 +72,6 @@ blurAdminApp.controller('barChartCtrl', ['$scope', '$timeout', '$element', funct
creditsPosition: 'top-right',
pathToImages: 'img/'
});
tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, barChart);
}]);

4
src/app/pages/charts/widgets/funnelChart/funnelChart.js
View File

@ -1,6 +1,6 @@
'use strict';
blurAdminApp.controller('funnelChartCtrl', ['$scope', '$timeout', '$element', function($scope, $timeout, $element) {
blurAdminApp.controller('funnelChartCtrl', ['$scope', '$timeout', '$element', 'tplSkinChartWatcherHelper', function($scope, $timeout, $element, tplSkinChartWatcherHelper) {
var id = $element[0].getAttribute('id');
var funnelChart = AmCharts.makeChart(id, {
type: 'funnel',
@ -53,4 +53,6 @@ blurAdminApp.controller('funnelChartCtrl', ['$scope', '$timeout', '$element', fu
creditsPosition: 'bottom-left',
pathToImages: 'img/'
});
tplSkinChartWatcherHelper.watchFunnelChanges($scope, funnelChart);
}]);

4
src/app/pages/charts/widgets/lineChart/lineChart.js
View File

@ -1,6 +1,6 @@
'use strict';
blurAdminApp.controller('lineChartCtrl', ['$scope', '$timeout', '$element', function($scope, $timeout, $element) {
blurAdminApp.controller('lineChartCtrl', ['$scope', '$timeout', '$element', 'tplSkinChartWatcherHelper', function($scope, $timeout, $element, tplSkinChartWatcherHelper) {
var id = $element[0].getAttribute('id');
var lineChart = AmCharts.makeChart(id, {
type: 'serial',
@ -131,6 +131,8 @@ blurAdminApp.controller('lineChartCtrl', ['$scope', '$timeout', '$element', func
pathToImages: 'img/'
});
tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, lineChart);
lineChart.addListener('rendered', zoomChart);
if (lineChart.zoomChart) {
lineChart.zoomChart();

4
src/app/pages/charts/widgets/pieChart/pieChart.js
View File

@ -1,6 +1,6 @@
'use strict';
blurAdminApp.controller('pieChartCtrl', ['$scope', '$timeout', '$element', function($scope, $timeout, $element) {
blurAdminApp.controller('pieChartCtrl', ['$scope', '$timeout', '$element', 'tplSkinChartWatcherHelper', function($scope, $timeout, $element, tplSkinChartWatcherHelper) {
var id = $element[0].getAttribute('id');
var pieChart = AmCharts.makeChart(id, {
type: 'pie',
@ -116,6 +116,8 @@ blurAdminApp.controller('pieChartCtrl', ['$scope', '$timeout', '$element', funct
}
});
tplSkinChartWatcherHelper.watchDonutChanges($scope, pieChart);
pieChart.addListener('init', handleInit);
pieChart.addListener('rollOverSlice', function (e) {

13
src/app/pages/dashboard/widgets/amChart/amChart.js
View File

@ -3,7 +3,7 @@
blurAdminApp.directive('amChart', function () {
return {
restrict: 'E',
controller: ['$scope', 'tplSkinManager', function ($scope, tplSkinManager) {
controller: ['$scope', 'tplSkinManager', 'tplSkinChartWatcherHelper', function ($scope, tplSkinManager, tplSkinChartWatcherHelper) {
var chartData = [
{ date: new Date(2012, 11), value: 0, value0: 0 },
{ date: new Date(2013, 0), value: 15000, value0: 19000},
@ -39,15 +39,6 @@ blurAdminApp.directive('amChart', function () {
var chartColorProfile = tplSkinManager.getChartColorProfile();
$scope.$on('tplSkinChanged', function() {
chartColorProfile = tplSkinManager.getChartColorProfile();
chart.categoryAxis.color = chartColorProfile.fontColors;
chart.categoryAxis.axisColor = chartColorProfile.axisColors;
chart.valueAxes[0].color = chartColorProfile.fontColors;
chart.valueAxes[0].axisColor = chartColorProfile.axisColors;
chart.drawChart();
});
var chart = AmCharts.makeChart('amchart', {
type: 'serial',
theme: 'blur',
@ -117,6 +108,8 @@ blurAdminApp.directive('amChart', function () {
pathToImages: 'img/'
});
tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, chart);
function zoomChart() {
chart.zoomToDates(new Date(2013, 3), new Date(2014, 0));
}

67
src/app/tplSkin/tplSkinChartWatcherHelper.service.js Normal file
View File

@ -0,0 +1,67 @@
/**
* @author v.lugovsky
* created on 27.11.2015
*/
(function() {
'use strict';
blurAdminApp
.service('tplSkinChartWatcherHelper', tplSkinChartWatcherHelper);
tplSkinChartWatcherHelper.$inject = ['tplSkinManager'];
function tplSkinChartWatcherHelper(tplSkinManager) {
this.watchAxisChartStyleChanges = function(scope, chart) {
_doUpdateStyles();
scope.$on('tplSkinChanged', _doUpdateStyles);
function _doUpdateStyles() {
var chartColorProfile = tplSkinManager.getChartColorProfile();
chart.color = chartColorProfile.fontColors;
chart.categoryAxis.color = chartColorProfile.fontColors;
chart.categoryAxis.axisColor = chartColorProfile.axisColors;
chart.valueAxes[0].color = chartColorProfile.fontColors;
chart.valueAxes[0].axisColor = chartColorProfile.axisColors;
chart.validateNow();
}
};
this.watchChartColorChanges = function(scope, chart) {
_doUpdateStyles();
scope.$on('tplSkinChanged', _doUpdateStyles);
function _doUpdateStyles() {
var chartColorProfile = tplSkinManager.getChartColorProfile();
chart.color = chartColorProfile.fontColors;
chart.validateNow();
}
};
this.watchDonutChanges = function(scope, chart) {
_doUpdateStyles();
scope.$on('tplSkinChanged', _doUpdateStyles);
function _doUpdateStyles() {
var chartColorProfile = tplSkinManager.getChartColorProfile();
chart.color = chartColorProfile.fontColors;
chart.legend.color = chartColorProfile.fontColors;
chart.labelTickColor = chartColorProfile.axisColors;
chart.validateNow();
}
};
this.watchFunnelChanges = function(scope, chart) {
_doUpdateStyles();
scope.$on('tplSkinChanged', _doUpdateStyles);
function _doUpdateStyles() {
var chartColorProfile = tplSkinManager.getChartColorProfile();
chart.color = chartColorProfile.fontColors;
chart.labelTickColor = chartColorProfile.axisColors;
chart.validateNow();
}
};
}
})();

2
src/assets/css/skins/skins.scss
View File

@ -1,7 +1,7 @@
@mixin overrideColors($color) {
color: $color;
p,.pie-charts,.panel-heading>.dropdown .dropdown-toggle, .panel-title, .panel-title>.small, .panel-title>.small>a, .panel-title>a, .panel-title>small, .panel-title>small>a,.traffic-text span {
p,.pie-charts,.panel-heading>.dropdown .dropdown-toggle, .panel-title, .panel-title>.small, .panel-title>.small>a, .panel-title>a, .panel-title>small, .panel-title>small>a,.traffic-text span, .form-group label {
color: $color;
}
.traffic-text {