diff --git a/src/app/pages/charts/chartJs/chartJs.html b/src/app/pages/charts/chartJs/chartJs.html index be1194786..70a2a8cca 100644 --- a/src/app/pages/charts/chartJs/chartJs.html +++ b/src/app/pages/charts/chartJs/chartJs.html @@ -1,66 +1,81 @@
-
-
- - +
+
+
+ + +
+
-
-
-
- - +
+
+
+ + +
+
-
-
-
- - +
+
+
+ + +
+
-
-
-
- +
+
+
+ +
+ +
-
-
-
- +
+
+
+ +
+
-
-
-
- - +
+
+
+ + +
+
-
-
-
- +
+
+
+ +
+
-
-
-
- - +
+
+
+ + +
+
-
- diff --git a/src/app/pages/charts/chartJs/chartJs.module.js b/src/app/pages/charts/chartJs/chartJs.module.js index 4bc24c6cf..3e6ce2a6a 100644 --- a/src/app/pages/charts/chartJs/chartJs.module.js +++ b/src/app/pages/charts/chartJs/chartJs.module.js @@ -3,38 +3,70 @@ * created on 12/16/15 */ (function () { - 'use strict'; + 'use strict'; - angular.module('BlurAdmin.pages.charts.chartJs', []) - .config(routeConfig).config(chartJsConfig); + angular.module('BlurAdmin.pages.charts.chartJs', []) + .config(routeConfig).config(chartJsConfig); - /** @ngInject */ - function routeConfig($stateProvider) { - $stateProvider - .state('charts.chartJs', { - url: '/chartJs', - templateUrl: 'app/pages/charts/chartJs/chartJs.html', - title: 'Chart.js', - sidebarMeta: { - order: 200, - }, - }); - } + /** @ngInject */ + function routeConfig($stateProvider) { + $stateProvider + .state('charts.chartJs', { + url: '/chartJs', + templateUrl: 'app/pages/charts/chartJs/chartJs.html', + title: 'Chart.js', + sidebarMeta: { + order: 200 + } + }); + } - function chartJsConfig(ChartJsProvider, baConfigProvider) { - var layoutColors = baConfigProvider.colors; - // Configure all charts - ChartJsProvider.setOptions({ - colours: [ layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.successDark, layoutColors.warningLight, layoutColors.successLight, layoutColors.primaryLight], - responsive: true, - scaleFontColor: layoutColors.defaultText, - scaleLineColor: layoutColors.border, - pointLabelFontColor: layoutColors.defaultText - }); - // Configure all line charts - ChartJsProvider.setOptions('Line', { - datasetFill: false - }); - } + function chartJsConfig(ChartJsProvider, baConfigProvider) { + var layoutColors = baConfigProvider.colors; + // Configure all charts + ChartJsProvider.setOptions({ + chartColors: [ + layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.successDark, layoutColors.warningLight, layoutColors.successLight, layoutColors.primaryLight], + responsive: true, + maintainAspectRatio: false, + animation: { + duration: 2500 + }, + scale: { + gridLines: { + color: layoutColors.border + }, + scaleLabel: { + fontColor: layoutColors.defaultText + }, + ticks: { + fontColor: layoutColors.defaultText, + showLabelBackdrop: false + } + } + }); + // Configure all line charts + ChartJsProvider.setOptions('Line', { + datasetFill: false + }); + // Configure all radar charts + ChartJsProvider.setOptions('radar', { + scale: { + pointLabels: { + fontColor: layoutColors.defaultText + }, + ticks: { + maxTicksLimit: 5, + display: false + } + } + }); + // Configure all bar charts + ChartJsProvider.setOptions('bar', { + tooltips: { + enabled: false + } + }); + } })(); \ No newline at end of file diff --git a/src/app/pages/charts/chartJs/chartJs1DCtrl.js b/src/app/pages/charts/chartJs/chartJs1DCtrl.js index 1bb20b6fd..5f62869c8 100644 --- a/src/app/pages/charts/chartJs/chartJs1DCtrl.js +++ b/src/app/pages/charts/chartJs/chartJs1DCtrl.js @@ -9,17 +9,24 @@ .controller('chartJs1DCtrl', chartJs1DCtrl); /** @ngInject */ - function chartJs1DCtrl($scope) { + function chartJs1DCtrl($scope, baConfig) { + var layoutColors = baConfig.colors; $scope.labels =["Sleeping", "Designing", "Coding", "Cycling"]; $scope.data = [20, 40, 5, 35]; $scope.options = { - segmentShowStroke : false - }; - - $scope.polarOptions = { - scaleShowLabelBackdrop : false, - segmentShowStroke : false + elements: { + arc: { + borderWidth: 0 + } + }, + legend: { + display: true, + position: 'bottom', + labels: { + fontColor: layoutColors.defaultText + } + } }; $scope.changeData = function () { diff --git a/src/app/pages/charts/chartJs/chartJs2DCtrl.js b/src/app/pages/charts/chartJs/chartJs2DCtrl.js index e72792605..17b05ba59 100644 --- a/src/app/pages/charts/chartJs/chartJs2DCtrl.js +++ b/src/app/pages/charts/chartJs/chartJs2DCtrl.js @@ -10,10 +10,10 @@ /** @ngInject */ function chartJs2DCtrl($scope) { - $scope.labels =["May", "June", "Jule", "August", "September", "October", "November"]; + $scope.labels =["May", "Jun", "Jul", "Aug", "Sep"]; $scope.data = [ - [65, 59, 90, 81, 56, 55, 40], - [28, 48, 40, 19, 88, 27, 45] + [65, 59, 90, 81, 56], + [28, 48, 40, 19, 88] ]; $scope.series = ['Product A', 'Product B']; diff --git a/src/app/pages/charts/chartJs/chartJsWaveCtrl.js b/src/app/pages/charts/chartJs/chartJsWaveCtrl.js index f440e3bdc..bfa9bc368 100644 --- a/src/app/pages/charts/chartJs/chartJsWaveCtrl.js +++ b/src/app/pages/charts/chartJs/chartJsWaveCtrl.js @@ -10,14 +10,20 @@ /** @ngInject */ function chartJsWaveCtrl($scope, $interval, stopableInterval) { - $scope.labels =["April", "May", "June", "Jule", "August", "September", "October", "November", "December"]; - $scope.data = [[1, 9, 3, 4, 5, 6, 7, 8, 2].map(function(e){ + $scope.labels =["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; + $scope.data = [1, 9, 3, 4, 5, 6, 7, 8, 2].map(function(e){ return Math.sin(e) * 25 +25; - })]; + }); stopableInterval.start($interval, function(){ - $scope.data[0].unshift($scope.data[0].pop()); - }, 300) + var tempArray = []; + var lastElement = $scope.data[$scope.data.length-1]; + for(var i = $scope.data.length-1; i > 0; i--){ + tempArray[i] = $scope.data[i-1]; + } + tempArray[0] = lastElement; + $scope.data = tempArray; + }, 400) } })(); \ No newline at end of file diff --git a/src/app/pages/dashboard/trafficChart/TrafficChartCtrl.js b/src/app/pages/dashboard/trafficChart/TrafficChartCtrl.js index cc74e3793..4f922e5f7 100644 --- a/src/app/pages/dashboard/trafficChart/TrafficChartCtrl.js +++ b/src/app/pages/dashboard/trafficChart/TrafficChartCtrl.js @@ -11,52 +11,51 @@ /** @ngInject */ function TrafficChartCtrl($scope, baConfig, colorHelper) { - $scope.transparent = baConfig.theme.blur; - var dashboardColors = baConfig.colors.dashboard; - $scope.doughnutData = [ - { - value: 2000, - color: dashboardColors.white, - highlight: colorHelper.shade(dashboardColors.white, 15), - label: 'Other', - percentage: 87, - order: 1, - }, { - value: 1500, - color: dashboardColors.blueStone, - highlight: colorHelper.shade(dashboardColors.blueStone, 15), - label: 'Search engines', - percentage: 22, - order: 4, - }, { - value: 1000, - color: dashboardColors.surfieGreen, - highlight: colorHelper.shade(dashboardColors.surfieGreen, 15), - label: 'Referral Traffic', - percentage: 70, - order: 3, - }, { - value: 1200, - color: dashboardColors.silverTree, - highlight: colorHelper.shade(dashboardColors.silverTree, 15), - label: 'Direct Traffic', - percentage: 38, - order: 2, - }, { - value: 400, - color: dashboardColors.gossip, - highlight: colorHelper.shade(dashboardColors.gossip, 15), - label: 'Ad Campaigns', - percentage: 17, - order: 0, - }, - ]; + $scope.transparent = baConfig.theme.blur; + var dashboardColors = baConfig.colors.dashboard; + $scope.doughnutData = { + labels: [ + 'Other', + 'Search engines', + 'Referral Traffic', + 'Direct Traffic', + 'Ad Campaigns' + ], + datasets: [ + { + data: [2000, 1500, 1000, 1200, 400], + backgroundColor: [ + dashboardColors.white, + dashboardColors.blueStone, + dashboardColors.surfieGreen, + dashboardColors.silverTree, + dashboardColors.gossip - var ctx = document.getElementById('chart-area').getContext('2d'); - window.myDoughnut = new Chart(ctx).Doughnut($scope.doughnutData, { - segmentShowStroke: false, - percentageInnerCutout : 64, - responsive: true - }); + ], + hoverBackgroundColor: [ + colorHelper.shade(dashboardColors.white, 15), + colorHelper.shade(dashboardColors.blueStone, 15), + colorHelper.shade(dashboardColors.surfieGreen, 15), + colorHelper.shade(dashboardColors.silverTree, 15), + colorHelper.shade(dashboardColors.gossip, 15) + ], + percentage: [87, 22, 70, 38, 17] + }] + }; + + var ctx = document.getElementById('chart-area').getContext('2d'); + window.myDoughnut = new Chart(ctx, { + type: 'doughnut', + data: $scope.doughnutData, + options: { + cutoutPercentage: 64, + responsive: true, + elements: { + arc: { + borderWidth: 0 + } + } + } + }); } })(); \ No newline at end of file diff --git a/src/app/pages/dashboard/trafficChart/trafficChart.html b/src/app/pages/dashboard/trafficChart/trafficChart.html index 1e10e5b07..ca3719577 100644 --- a/src/app/pages/dashboard/trafficChart/trafficChart.html +++ b/src/app/pages/dashboard/trafficChart/trafficChart.html @@ -11,18 +11,20 @@
-
-
-
-
-

{{::item.label}}+{{item.percentage}}%

-
-
-
+
+
+
+
+

{{::label}}+{{data.percentage[i]}}%

+
+
+
+
+
-
-
diff --git a/src/sass/app/_chartsPage.scss b/src/sass/app/_chartsPage.scss index 0e1af6210..927538f65 100644 --- a/src/sass/app/_chartsPage.scss +++ b/src/sass/app/_chartsPage.scss @@ -162,4 +162,16 @@ .chartist h5 { font-weight: $font-normal; +} + +.chartjs-canvas-holder-first-row { + height: 300px; +} + +.chartjs-canvas-holder-second-row { + height: 350px; +} + +.chartjs-canvas-holder-third-row { + height: 250px; } \ No newline at end of file