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

feat(chart): change chart colors when skin is changed

pull/3/head
Vladimir Lugovsky 2015-11-26 20:56:30 +03:00
parent 1691c0a5f9
commit c7048ea360
3 changed files with 57 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,7 @@
blurAdminApp.directive('amChart', function () {
return {
restrict: 'E',
controller: ['$scope', function ($scope) {
controller: ['$scope', 'tplSkinManager', function ($scope, tplSkinManager) {
var chartData = [
{ date: new Date(2012, 11), value: 0, value0: 0 },
{ date: new Date(2013, 0), value: 15000, value0: 19000},
@ -37,16 +37,36 @@ blurAdminApp.directive('amChart', function () {
{ date: new Date(2015, 1), value: 49800, value0: 13000}
];
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',
marginTop: 15,
marginRight: 15,
dataProvider: chartData,
categoryField: 'date',
categoryAxis: {
parseDates: true,
gridAlpha: 0,
color: chartColorProfile.fontColors,
axisColor: chartColorProfile.axisColors
},
valueAxes: [
{
minVerticalGap: 50,
gridAlpha: 0
gridAlpha: 0,
color: chartColorProfile.fontColors,
axisColor: chartColorProfile.axisColors
}
],
graphs: [
@ -75,22 +95,6 @@ blurAdminApp.directive('amChart', function () {
fillColorsField: 'lineColor'
}
],
/* chartScrollbar: {
graph: 'g1',
gridAlpha: 0,
color: '#FF0000',
scrollbarHeight: 55,
backgroundAlpha: 0,
selectedBackgroundAlpha: 0.1,
selectedBackgroundColor: '#ffffff',
graphFillAlpha: 0,
autoGridCount: true,
selectedGraphFillAlpha: 0,
graphLineAlpha: 0.2,
graphLineColor: '#c2c2c2',
selectedGraphLineColor: '#888888',
selectedGraphLineAlpha: 1
},*/
chartCursor: {
categoryBalloonDateFormat: 'MM YYYY',
categoryBalloonColor: '#4285F4',
@ -101,11 +105,6 @@ blurAdminApp.directive('amChart', function () {
valueLineAlpha: 0.5
},
dataDateFormat: 'MM YYYY',
categoryField: 'date',
categoryAxis: {
parseDates: true,
gridAlpha: 0
},
export: {
enabled: true
},

35
src/app/tplSkin/tplSkin.constants.js
View File

@ -11,42 +11,61 @@
{
name: 'Default',
bodyClass: '',
thumbnailUrl: 'img/01_default.jpg'
thumbnailUrl: 'img/01_default.jpg',
chartColorProfile: 'whitePanel'
},
{
name: 'Transparent',
bodyClass: SKIN_CLASS_PREFIX + '-transparent',
thumbnailUrl: 'img/02_transparent.jpg'
thumbnailUrl: 'img/02_transparent.jpg',
chartColorProfile: 'transparent'
},
{
name: 'Blue',
bodyClass: SKIN_CLASS_PREFIX + '-blue',
thumbnailUrl: 'img/03_blue.jpg'
thumbnailUrl: 'img/03_blue.jpg',
chartColorProfile: 'whitePanel'
},
{
name: 'Peachy',
bodyClass: SKIN_CLASS_PREFIX + '-peachy',
thumbnailUrl: 'img/04_peachy.jpg'
thumbnailUrl: 'img/04_peachy.jpg',
chartColorProfile: 'whitePanel'
},
{
name: 'Material',
bodyClass: SKIN_CLASS_PREFIX + '-material',
thumbnailUrl: 'img/05_material.jpg'
thumbnailUrl: 'img/05_material.jpg',
chartColorProfile: 'whitePanel'
},
{
name: 'Transblue',
bodyClass: SKIN_CLASS_PREFIX + '-transblue',
thumbnailUrl: 'img/06_transblue.jpg'
thumbnailUrl: 'img/06_transblue.jpg',
chartColorProfile: 'transparent'
},
{
name: 'Grey',
bodyClass: SKIN_CLASS_PREFIX + '-grey',
thumbnailUrl: 'img/07_grey.jpg'
thumbnailUrl: 'img/07_grey.jpg',
chartColorProfile: 'whitePanel'
}
];
var SKIN_CHART_COLORS = {
whitePanel: {
fontColors: undefined,
axisColors: '#000000'
},
transparent: {
fontColors: '#FFFFFF',
axisColors: '#FFFFFF'
}
};
blurAdminApp
.constant('tplSkinClassPrefix', SKIN_CLASS_PREFIX)
.constant('tplSkinEnum', ADMIN_STYLES);
.constant('tplSkinEnum', ADMIN_STYLES)
.constant('tplSkinChartColors', SKIN_CHART_COLORS);
})();

11
src/app/tplSkin/tplSkinManager.service.js
View File

@ -8,19 +8,24 @@
blurAdminApp
.service('tplSkinManager', tplSkinManager);
tplSkinManager.$inject = ['$document', 'tplSkinClassPrefix'];
function tplSkinManager($document, tplSkinClassPrefix) {
tplSkinManager.$inject = ['$rootScope', '$document', 'tplSkinClassPrefix', 'tplSkinChartColors', 'tplSkinEnum'];
function tplSkinManager($rootScope, $document, tplSkinClassPrefix, tplSkinChartColors, tplSkinEnum) {
var activeSkin = null;
var activeSkin = tplSkinEnum[0];
this.setActiveSkin = function(skin) {
activeSkin = skin;
if (activeSkin) {
_removeSkinBodyClassIfPresent();
_addSkinBodyClass(activeSkin);
$rootScope.$broadcast('tplSkinChanged');
}
};
this.getChartColorProfile = function() {
return tplSkinChartColors[activeSkin.chartColorProfile];
};
function _removeSkinBodyClassIfPresent() {
var body = $document[0].body;
var $body = angular.element(body);