mirror of https://github.com/akveo/blur-admin
stopable interval for animations
alex
parent
1e027c0f1c
commit
1606d870a2
|
|
@ -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)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,32 @@
|
|||
<section ng-controller="morrisCtrl">
|
||||
<div class="row">
|
||||
<div class="col-md-6 ">
|
||||
<div class="col-md-6">
|
||||
<blur-panel title="Line Charts" class-container="with-scroll">
|
||||
<h5>Simple Line Chart</h5>
|
||||
<div
|
||||
line-chart
|
||||
line-data='lineData'
|
||||
line-xkey='y'
|
||||
line-ykeys='["a", "b"]'
|
||||
line-labels='["Serie A", "Serie B"]'
|
||||
line-colors='colors'>
|
||||
</div>
|
||||
<h5 class="area-morris-header">Area Chart</h5>
|
||||
<div
|
||||
area-chart
|
||||
area-data='areaData'
|
||||
area-xkey='y'
|
||||
area-ykeys='["a", "b"]'%
|
||||
area-labels='["Serie A", "Serie B"]'
|
||||
line-colors='colors'>
|
||||
</div>
|
||||
</blur-panel>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<blur-panel title="Bar Chart" class-container="with-scroll ">
|
||||
<div
|
||||
bar-chart
|
||||
bar-data='[
|
||||
{ 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 }
|
||||
]'
|
||||
bar-data='barData'
|
||||
bar-x='y'
|
||||
bar-y='["a", "b"]'
|
||||
bar-labels='["Series A", "Series B"]'
|
||||
|
|
@ -20,61 +34,17 @@
|
|||
</div>
|
||||
</blur-panel>
|
||||
</div>
|
||||
<div class="col-md-6 ">
|
||||
<blur-panel title="Donut" class-container="with-scroll ">
|
||||
</div>
|
||||
<div class="row morris-up">
|
||||
<div class="col-md-6 col-md-offset-6 col-sd-offset-0 col-sm-12">
|
||||
<blur-panel title="Donut Chart" class-container="with-scroll ">
|
||||
<div
|
||||
donut-chart
|
||||
donut-data='[
|
||||
{label: "Download Sales", value: 12},
|
||||
{label: "In-Store Sales",value: 30},
|
||||
{label: "Mail-Order Sales", value: 20}
|
||||
]'
|
||||
donut-data='donutData'
|
||||
donut-colors='colors'
|
||||
donut-formatter='"currency"'>
|
||||
</div>
|
||||
</blur-panel>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 ">
|
||||
<blur-panel title="Line Chart" class-container="with-scroll ">
|
||||
<div
|
||||
line-chart
|
||||
line-data='[
|
||||
{ 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 }
|
||||
]'
|
||||
line-xkey='y'
|
||||
line-ykeys='["a", "b"]'
|
||||
line-labels='["Serie A", "Serie B"]'
|
||||
line-colors='colors'>
|
||||
</div>
|
||||
</blur-panel>
|
||||
</div>
|
||||
<div class="col-md-6 ">
|
||||
<blur-panel title="Area Chart" class-container="with-scroll ">
|
||||
<div
|
||||
area-chart
|
||||
area-data='[
|
||||
{ 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 }
|
||||
]'
|
||||
area-xkey='y'
|
||||
area-ykeys='["a", "b"]'
|
||||
area-labels='["Serie A", "Serie B"]'
|
||||
line-colors='colors'>
|
||||
</div>
|
||||
</blur-panel>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -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();
|
||||
});
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
/**
|
||||
* Created by alex on 12/21/15.
|
||||
*/
|
||||
|
|
@ -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);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue