From 1606d870a2782c7371004f4c77504b243d1618b3 Mon Sep 17 00:00:00 2001 From: alex Date: Mon, 21 Dec 2015 13:29:30 +0300 Subject: [PATCH] stopable interval for animations --- .../pages/charts/chartJs/chartJsWaveCtrl.js | 4 +- src/app/pages/charts/morris/morris.html | 88 ++++++------------- src/app/pages/charts/morris/morrisCtrl.js | 40 ++++++++- src/app/pages/tree/tree.html | 10 +++ src/app/pages/tree/tree.module.js | 3 + src/app/theme/services/stopableInterval.js | 21 ++++- src/sass/app/_chartsPage.scss | 19 +++- 7 files changed, 116 insertions(+), 69 deletions(-) create mode 100644 src/app/pages/tree/tree.html create mode 100644 src/app/pages/tree/tree.module.js diff --git a/src/app/pages/charts/chartJs/chartJsWaveCtrl.js b/src/app/pages/charts/chartJs/chartJsWaveCtrl.js index 171fb92dd..f440e3bdc 100644 --- a/src/app/pages/charts/chartJs/chartJsWaveCtrl.js +++ b/src/app/pages/charts/chartJs/chartJsWaveCtrl.js @@ -9,13 +9,13 @@ .controller('chartJsWaveCtrl', chartJsWaveCtrl); /** @ngInject */ - function chartJsWaveCtrl($scope, $interval) { + 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){ return Math.sin(e) * 25 +25; })]; - $interval(function(){ + stopableInterval.start($interval, function(){ $scope.data[0].unshift($scope.data[0].pop()); }, 300) } diff --git a/src/app/pages/charts/morris/morris.html b/src/app/pages/charts/morris/morris.html index cc327332c..7f22a5a97 100644 --- a/src/app/pages/charts/morris/morris.html +++ b/src/app/pages/charts/morris/morris.html @@ -1,18 +1,32 @@
-
+
+ +
Simple Line Chart
+
+
+
Area Chart
+
+
+ +
+
-
- +
+
+
+
-
-
- -
-
- -
-
- -
-
- -
-
\ No newline at end of file diff --git a/src/app/pages/charts/morris/morrisCtrl.js b/src/app/pages/charts/morris/morrisCtrl.js index a8e3c95a2..38f751332 100644 --- a/src/app/pages/charts/morris/morrisCtrl.js +++ b/src/app/pages/charts/morris/morrisCtrl.js @@ -9,8 +9,44 @@ .controller('morrisCtrl', morrisCtrl); /** @ngInject */ - function morrisCtrl($scope,layoutColors) { - $scope.colors = [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.default, layoutColors.primaryDark]; + function morrisCtrl($scope, $window, layoutColors) { + $scope.colors = [layoutColors.primary, layoutColors.danger, layoutColors.success, layoutColors.warning, layoutColors.default, layoutColors.primaryDark]; + $scope.lineData = [ + {y: "2006", a: 100, b: 90}, + {y: "2007", a: 75, b: 65}, + {y: "2008", a: 50, b: 40}, + {y: "2009", a: 75, b: 65}, + {y: "2010", a: 50, b: 40}, + {y: "2011", a: 75, b: 65}, + {y: "2012", a: 100, b: 90} + ]; + $scope.areaData = [ + {y: "2006", a: 100, b: 90}, + {y: "2007", a: 75, b: 65}, + {y: "2008", a: 50, b: 40}, + {y: "2009", a: 75, b: 65}, + {y: "2010", a: 50, b: 40}, + {y: "2011", a: 75, b: 65}, + {y: "2012", a: 100, b: 90} + ]; + $scope.barData = [ + {y: "2006", a: 100, b: 90}, + {y: "2007", a: 75, b: 65}, + {y: "2008", a: 50, b: 40}, + {y: "2009", a: 75, b: 65}, + {y: "2010", a: 50, b: 40}, + {y: "2011", a: 75, b: 65}, + {y: "2012", a: 100, b: 90} + ]; + $scope.donutData = [ + {label: "Download Sales", value: 12}, + {label: "In-Store Sales", value: 30}, + {label: "Mail-Order Sales", value: 20} + ]; + + angular.element($window).bind('resize', function () { + //$window.Morris.Grid.prototype.redraw(); + }); } })(); \ No newline at end of file diff --git a/src/app/pages/tree/tree.html b/src/app/pages/tree/tree.html new file mode 100644 index 000000000..3fb197e43 --- /dev/null +++ b/src/app/pages/tree/tree.html @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/app/pages/tree/tree.module.js b/src/app/pages/tree/tree.module.js new file mode 100644 index 000000000..9d48c2d7f --- /dev/null +++ b/src/app/pages/tree/tree.module.js @@ -0,0 +1,3 @@ +/** + * Created by alex on 12/21/15. + */ diff --git a/src/app/theme/services/stopableInterval.js b/src/app/theme/services/stopableInterval.js index 8b43eb3b6..0c787336a 100644 --- a/src/app/theme/services/stopableInterval.js +++ b/src/app/theme/services/stopableInterval.js @@ -5,12 +5,29 @@ (function () { 'use strict'; - angular.module('theme') + angular.module('BlurAdmin.theme') .service('stopableInterval', stopableInterval); /** @ngInject */ - function stopableInterval() { + function stopableInterval($window) { + return { + start: function (interval, calback, time) { + function startInterval() { + return interval(calback, time); + } + var i = startInterval(); + + angular.element($window).bind('focus', function () { + if (i) interval.cancel(i); + i = startInterval(); + }); + + angular.element($window).bind('blur', function () { + if (i) interval.cancel(i); + }); + } + } } })(); \ No newline at end of file diff --git a/src/sass/app/_chartsPage.scss b/src/sass/app/_chartsPage.scss index 6883f443b..da0213034 100644 --- a/src/sass/app/_chartsPage.scss +++ b/src/sass/app/_chartsPage.scss @@ -73,19 +73,19 @@ .ct-series-c { .ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie { - stroke: $warning; + stroke: $danger; } .ct-slice-pie, .ct-area{ - fill: $warning; + fill: $danger; } } .ct-series-d { .ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie { - stroke: $danger; + stroke: $warning; } .ct-slice-pie, .ct-area{ - fill: $danger; + fill: $warning; } } @@ -98,6 +98,17 @@ fill: $info; } } +@media screen and (min-width: 992px) { + .row.morris-up { + > div { + margin-top: -434px; + } + } +} + +.area-morris-header{ + margin-top: 20px; +} .stacked-bar .ct-bar{ stroke-width: 30px;