mirror of https://github.com/akveo/blur-admin
feat(dashboard redesign): new dashboard layout
Anastasiya
parent
7ab7c9324a
commit
f64ee43138
|
|
@ -0,0 +1,32 @@
|
||||||
|
.panel {
|
||||||
|
border-radius: 0px;
|
||||||
|
background-color: $panel-bg;
|
||||||
|
position: relative;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $panel-bg-hover;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.animated {
|
||||||
|
animation-duration: 0.5s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-heading, .panel-default > .panel-heading {
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
padding: 7px 22px 0px;
|
||||||
|
margin-bottom: -5px;
|
||||||
|
color: $default-text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-title {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-body {
|
||||||
|
padding: 16px 22px;
|
||||||
|
@include scrollbars(.5em, #ccc, #fff);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
<div class="panel panel-default invisible" zoom-in>
|
||||||
|
<div class="panel-heading clearfix" ng-if="title">
|
||||||
|
<h3 class="panel-title">{{ title }}</h3>
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<ng-transclude></ng-transclude>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
blurAdminApp.directive('blurPanel', function () {
|
||||||
|
return {
|
||||||
|
restrict: 'E',
|
||||||
|
transclude: true,
|
||||||
|
scope: {
|
||||||
|
title: '@'
|
||||||
|
},
|
||||||
|
controller: ['$scope', function ($scope) {
|
||||||
|
}],
|
||||||
|
templateUrl: 'app/components/blurPanel/blurPanel.html'
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
|
@ -3,39 +3,6 @@
|
||||||
backface-visibility: hidden;
|
backface-visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel {
|
|
||||||
border-radius: 0px;
|
|
||||||
background-color: $panel-bg;
|
|
||||||
position: relative;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $panel-bg-hover;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.animated {
|
|
||||||
animation-duration: 0.5s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-heading, .panel-default > .panel-heading {
|
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
|
||||||
padding: 7px 22px 0px;
|
|
||||||
margin-bottom: -5px;
|
|
||||||
color: $default-text;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-title {
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-body {
|
|
||||||
padding: 16px 22px;
|
|
||||||
@include scrollbars(.5em, #ccc, #fff);
|
|
||||||
}
|
|
||||||
|
|
||||||
.full-width {
|
.full-width {
|
||||||
margin: 0 -22px -16px;
|
margin: 0 -22px -16px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,9 @@
|
||||||
<div class="widgets">
|
<div class="widgets">
|
||||||
<div ng-repeat="widgetBlock in ngModel" ng-class="{'row': widgetBlock.widgets.length > 1}">
|
<div ng-repeat="widgetBlock in ngModel" ng-class="{'row': widgetBlock.widgets.length > 1}">
|
||||||
<div ng-repeat="widgetCol in widgetBlock.widgets" ng-class="{'col-md-6': widgetBlock.widgets.length === 2}" ng-model="widgetCol" class="widgets-block">
|
<div ng-repeat="widgetCol in widgetBlock.widgets" ng-class="{'col-md-6': widgetBlock.widgets.length === 2}" ng-model="widgetCol" class="widgets-block">
|
||||||
<div ng-repeat="widget in widgetCol" class="panel panel-default invisible" zoom-in>
|
<blur-panel title="widget.title" ng-repeat="widget in widgetCol" >
|
||||||
<div class="panel-heading clearfix" ng-if="widget.title">
|
<div ng-include="widget.url"></div>
|
||||||
<h3 class="panel-title">{{ widget.title }}</h3>
|
</blur-panel>
|
||||||
</div>
|
|
||||||
<div class="panel-body">
|
|
||||||
<div ng-include="widget.url"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,50 @@
|
||||||
<widgets ng-model="widgetBlocks"></widgets>
|
<pie-charts></pie-charts>
|
||||||
|
|
||||||
<!--<pie-charts></pie-charts>-->
|
<div>
|
||||||
|
<blur-panel>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<h3>Acquisition Channels</h3>
|
||||||
|
<traffic-chart></traffic-chart>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<h3>Users by country</h3>
|
||||||
|
<am-chart-map></am-chart-map>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</blur-panel>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-9">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<blur-panel title="Revenue">
|
||||||
|
<am-chart></am-chart>
|
||||||
|
</blur-panel>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<blur-panel>
|
||||||
|
<popular-app></popular-app>
|
||||||
|
</blur-panel>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<blur-panel title="ToDo List">
|
||||||
|
<blur-todo></blur-todo>
|
||||||
|
</blur-panel>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<blur-panel title="Calenar">
|
||||||
|
<blur-calendar></blur-calendar>
|
||||||
|
</blur-panel>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-3">
|
||||||
|
<blur-panel title="Feed">
|
||||||
|
<blur-feed></blur-feed>
|
||||||
|
</blur-panel>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -9,39 +9,4 @@ angular.module('BlurAdmin.dashboard', ['ngRoute'])
|
||||||
});
|
});
|
||||||
}])
|
}])
|
||||||
.controller('DashboardCtrl', ['$scope', function ($scope) {
|
.controller('DashboardCtrl', ['$scope', function ($scope) {
|
||||||
|
|
||||||
$scope.widgetBlocks = [
|
|
||||||
{
|
|
||||||
widgets: [
|
|
||||||
[
|
|
||||||
{
|
|
||||||
title: 'Users by Country',
|
|
||||||
url: 'app/pages/dashboard/widgets/amChartMap/amChartMap.html'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Revenue',
|
|
||||||
url: 'app/pages/dashboard/widgets/amChart/amChart.html'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'My Calendar',
|
|
||||||
url: 'app/pages/dashboard/widgets/calendar/calendar.html'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
[
|
|
||||||
{
|
|
||||||
title: 'Acquisition Channels',
|
|
||||||
url: 'app/pages/dashboard/widgets/chart/chart.html'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Timeline',
|
|
||||||
url: 'app/pages/dashboard/widgets/timeline/timeline.html'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'ToDo List',
|
|
||||||
url: 'app/pages/dashboard/widgets/todo/todo.html'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
];
|
|
||||||
}]);
|
}]);
|
||||||
|
|
@ -1 +1 @@
|
||||||
<div id="amchart" style="" ng-controller="amChartCtrl"></div>
|
<div id="amchart"></div>
|
||||||
|
|
@ -1,142 +1,147 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
blurAdminApp.controller('amChartCtrl', ['$scope', '$timeout', '$element', function ($scope, $timeout, $element) {
|
blurAdminApp.directive('amChart', function () {
|
||||||
var chartData = [
|
return {
|
||||||
{ date: new Date(2011, 0), value: -30700},
|
restrict: 'E',
|
||||||
{ date: new Date(2011, 1), value: -16800},
|
controller: ['$scope', function ($scope) {
|
||||||
{ date: new Date(2011, 2), value: -7300},
|
var chartData = [
|
||||||
{ date: new Date(2011, 3), value: -2700},
|
{ date: new Date(2011, 0), value: -30700},
|
||||||
{ date: new Date(2011, 4), value: -25100},
|
{ date: new Date(2011, 1), value: -16800},
|
||||||
{ date: new Date(2011, 5), value: -28100},
|
{ date: new Date(2011, 2), value: -7300},
|
||||||
{ date: new Date(2011, 6), value: -34800},
|
{ date: new Date(2011, 3), value: -2700},
|
||||||
{ date: new Date(2011, 7), value: -7400},
|
{ date: new Date(2011, 4), value: -25100},
|
||||||
{ date: new Date(2011, 8), value: -1100},
|
{ date: new Date(2011, 5), value: -28100},
|
||||||
{ date: new Date(2011, 9), value: -7400},
|
{ date: new Date(2011, 6), value: -34800},
|
||||||
{ date: new Date(2011, 10), value: -12400},
|
{ date: new Date(2011, 7), value: -7400},
|
||||||
{ date: new Date(2011, 11), value: -2400},
|
{ date: new Date(2011, 8), value: -1100},
|
||||||
{ date: new Date(2012, 0), value: -2200},
|
{ date: new Date(2011, 9), value: -7400},
|
||||||
{ date: new Date(2012, 1), value: 0},
|
{ date: new Date(2011, 10), value: -12400},
|
||||||
{ date: new Date(2012, 2), value: -29600},
|
{ date: new Date(2011, 11), value: -2400},
|
||||||
{ date: new Date(2012, 3), value: -21700},
|
{ date: new Date(2012, 0), value: -2200},
|
||||||
{ date: new Date(2012, 4), value: -14700},
|
{ date: new Date(2012, 1), value: 0},
|
||||||
{ date: new Date(2012, 5), value: -1500},
|
{ date: new Date(2012, 2), value: -29600},
|
||||||
{ date: new Date(2012, 6), value: -1600},
|
{ date: new Date(2012, 3), value: -21700},
|
||||||
{ date: new Date(2012, 7), value: -1100},
|
{ date: new Date(2012, 4), value: -14700},
|
||||||
{ date: new Date(2012, 8), value: -6800},
|
{ date: new Date(2012, 5), value: -1500},
|
||||||
{ date: new Date(2012, 9), value: -1900},
|
{ date: new Date(2012, 6), value: -1600},
|
||||||
{ date: new Date(2012, 10), value: -5600},
|
{ date: new Date(2012, 7), value: -1100},
|
||||||
{ date: new Date(2012, 11), value: -7700},
|
{ date: new Date(2012, 8), value: -6800},
|
||||||
{ date: new Date(2013, 0), value: -21300},
|
{ date: new Date(2012, 9), value: -1900},
|
||||||
{ date: new Date(2013, 1), value: -13700},
|
{ date: new Date(2012, 10), value: -5600},
|
||||||
{ date: new Date(2013, 2), value: -300},
|
{ date: new Date(2012, 11), value: -7700},
|
||||||
{ date: new Date(2013, 3), value: 10900},
|
{ date: new Date(2013, 0), value: -21300},
|
||||||
{ date: new Date(2013, 4), value: 20300},
|
{ date: new Date(2013, 1), value: -13700},
|
||||||
{ date: new Date(2013, 5), value: 25500},
|
{ date: new Date(2013, 2), value: -300},
|
||||||
{ date: new Date(2013, 6), value: 10700},
|
{ date: new Date(2013, 3), value: 10900},
|
||||||
{ date: new Date(2013, 7), value: -4200},
|
{ date: new Date(2013, 4), value: 20300},
|
||||||
{ date: new Date(2013, 8), value: -5000},
|
{ date: new Date(2013, 5), value: 25500},
|
||||||
{ date: new Date(2013, 9), value: 17700},
|
{ date: new Date(2013, 6), value: 10700},
|
||||||
{ date: new Date(2013, 10), value: 25100},
|
{ date: new Date(2013, 7), value: -4200},
|
||||||
{ date: new Date(2013, 11), value: 37000},
|
{ date: new Date(2013, 8), value: -5000},
|
||||||
{ date: new Date(2014, 0), value: 300},
|
{ date: new Date(2013, 9), value: 17700},
|
||||||
{ date: new Date(2014, 1), value: 17900},
|
{ date: new Date(2013, 10), value: 25100},
|
||||||
{ date: new Date(2014, 2), value: 1800},
|
{ date: new Date(2013, 11), value: 37000},
|
||||||
{ date: new Date(2014, 3), value: 10400},
|
{ date: new Date(2014, 0), value: 300},
|
||||||
{ date: new Date(2014, 4), value: 25500},
|
{ date: new Date(2014, 1), value: 17900},
|
||||||
{ date: new Date(2014, 5), value: 2100},
|
{ date: new Date(2014, 2), value: 1800},
|
||||||
{ date: new Date(2014, 6), value: 6500},
|
{ date: new Date(2014, 3), value: 10400},
|
||||||
{ date: new Date(2014, 7), value: 1100},
|
{ date: new Date(2014, 4), value: 25500},
|
||||||
{ date: new Date(2014, 8), value: 17200},
|
{ date: new Date(2014, 5), value: 2100},
|
||||||
{ date: new Date(2014, 9), value: 26900},
|
{ date: new Date(2014, 6), value: 6500},
|
||||||
{ date: new Date(2014, 10), value: 14100},
|
{ date: new Date(2014, 7), value: 1100},
|
||||||
{ date: new Date(2014, 11), value: 35300},
|
{ date: new Date(2014, 8), value: 17200},
|
||||||
{ date: new Date(2015, 0), value: 54800},
|
{ date: new Date(2014, 9), value: 26900},
|
||||||
{ date: new Date(2015, 1), value: 29800},
|
{ date: new Date(2014, 10), value: 14100},
|
||||||
{ date: new Date(2015, 2), value: 26700},
|
{ date: new Date(2014, 11), value: 35300},
|
||||||
{ date: new Date(2015, 3), value: 41100},
|
{ date: new Date(2015, 0), value: 54800},
|
||||||
{ date: new Date(2015, 4), value: 46200},
|
{ date: new Date(2015, 1), value: 29800},
|
||||||
{ date: new Date(2015, 5), value: 4700},
|
{ date: new Date(2015, 2), value: 26700},
|
||||||
{ date: new Date(2015, 6), value: 44500},
|
{ date: new Date(2015, 3), value: 41100},
|
||||||
{ date: new Date(2015, 7), value: 4700}
|
{ date: new Date(2015, 4), value: 46200},
|
||||||
];
|
{ date: new Date(2015, 5), value: 4700},
|
||||||
|
{ date: new Date(2015, 6), value: 44500},
|
||||||
|
{ date: new Date(2015, 7), value: 4700}
|
||||||
|
];
|
||||||
|
|
||||||
var id = $element[0].getAttribute('id');
|
var chart = AmCharts.makeChart('amchart', {
|
||||||
var chart = AmCharts.makeChart(id, {
|
type: 'serial',
|
||||||
type: 'serial',
|
theme: 'blur',
|
||||||
theme: 'blur',
|
marginTop: 0,
|
||||||
marginTop: 0,
|
marginRight: 15,
|
||||||
marginRight: 15,
|
dataProvider: chartData,
|
||||||
dataProvider: chartData,
|
valueAxes: [
|
||||||
valueAxes: [
|
{
|
||||||
{
|
gridAlpha: 0
|
||||||
gridAlpha: 0
|
}
|
||||||
|
],
|
||||||
|
graphs: [
|
||||||
|
{
|
||||||
|
id: 'g1',
|
||||||
|
bullet: 'round',
|
||||||
|
bulletSize: 8,
|
||||||
|
useLineColorForBulletBorder: true,
|
||||||
|
lineColor: colorSuccess,
|
||||||
|
lineThickness: 1,
|
||||||
|
negativeLineColor: colorDanger,
|
||||||
|
type: 'smoothedLine',
|
||||||
|
valueField: 'value',
|
||||||
|
fillAlphas: 0.3,
|
||||||
|
fillColorsField: 'lineColor'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
chartScrollbar: {
|
||||||
|
graph: 'g1',
|
||||||
|
gridAlpha: 0,
|
||||||
|
color: '#888888',
|
||||||
|
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',
|
||||||
|
categoryBalloonAlpha: 0.7,
|
||||||
|
cursorAlpha: 0,
|
||||||
|
valueLineEnabled: true,
|
||||||
|
valueLineBalloonEnabled: true,
|
||||||
|
valueLineAlpha: 0.5
|
||||||
|
},
|
||||||
|
dataDateFormat: 'MM YYYY',
|
||||||
|
categoryField: 'date',
|
||||||
|
categoryAxis: {
|
||||||
|
parseDates: true,
|
||||||
|
gridAlpha: 0
|
||||||
|
},
|
||||||
|
export: {
|
||||||
|
enabled: true
|
||||||
|
},
|
||||||
|
creditsPosition: 'bottom-right',
|
||||||
|
zoomOutButton: {
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
backgroundAlpha: 0
|
||||||
|
},
|
||||||
|
zoomOutText: '',
|
||||||
|
pathToImages: 'img/'
|
||||||
|
});
|
||||||
|
|
||||||
|
function zoomChart() {
|
||||||
|
chart.zoomToDates(new Date(2013, 3), new Date(2013, 10));
|
||||||
}
|
}
|
||||||
],
|
|
||||||
graphs: [
|
chart.addListener('rendered', zoomChart);
|
||||||
{
|
zoomChart();
|
||||||
id: 'g1',
|
if (chart.zoomChart) {
|
||||||
bullet: 'round',
|
chart.zoomChart();
|
||||||
bulletSize: 8,
|
|
||||||
useLineColorForBulletBorder: true,
|
|
||||||
lineColor: colorSuccess,
|
|
||||||
lineThickness: 1,
|
|
||||||
negativeLineColor: colorDanger,
|
|
||||||
type: 'smoothedLine',
|
|
||||||
valueField: 'value',
|
|
||||||
fillAlphas: 0.3,
|
|
||||||
fillColorsField: 'lineColor'
|
|
||||||
}
|
}
|
||||||
],
|
}],
|
||||||
chartScrollbar: {
|
templateUrl: 'app/pages/dashboard/widgets/amChart/amChart.html'
|
||||||
graph: 'g1',
|
};
|
||||||
gridAlpha: 0,
|
});
|
||||||
color: '#888888',
|
|
||||||
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',
|
|
||||||
categoryBalloonAlpha: 0.7,
|
|
||||||
cursorAlpha: 0,
|
|
||||||
valueLineEnabled: true,
|
|
||||||
valueLineBalloonEnabled: true,
|
|
||||||
valueLineAlpha: 0.5
|
|
||||||
},
|
|
||||||
dataDateFormat: 'MM YYYY',
|
|
||||||
categoryField: 'date',
|
|
||||||
categoryAxis: {
|
|
||||||
parseDates: true,
|
|
||||||
gridAlpha: 0
|
|
||||||
},
|
|
||||||
export: {
|
|
||||||
enabled: true
|
|
||||||
},
|
|
||||||
creditsPosition: 'bottom-right',
|
|
||||||
zoomOutButton: {
|
|
||||||
backgroundColor: '#fff',
|
|
||||||
backgroundAlpha: 0
|
|
||||||
},
|
|
||||||
zoomOutText: '',
|
|
||||||
pathToImages: 'img/'
|
|
||||||
});
|
|
||||||
|
|
||||||
function zoomChart() {
|
|
||||||
chart.zoomToDates(new Date(2013, 3), new Date(2013, 10));
|
|
||||||
}
|
|
||||||
|
|
||||||
chart.addListener('rendered', zoomChart);
|
|
||||||
zoomChart();
|
|
||||||
if (chart.zoomChart) {
|
|
||||||
chart.zoomChart();
|
|
||||||
}
|
|
||||||
}]);
|
|
||||||
|
|
@ -1 +1 @@
|
||||||
<div id="amChartMap" ng-controller="amMapCtrl"></div>
|
<div id="amChartMap"></div>
|
||||||
|
|
@ -1,263 +1,98 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
blurAdminApp.controller('amMapCtrl', ['$scope', '$timeout', '$element', function ($scope, $timeout, $element) {
|
blurAdminApp.directive('amChartMap', function () {
|
||||||
var id = $element[0].getAttribute('id');
|
return {
|
||||||
var map = AmCharts.makeChart(id, {
|
restrict: 'E',
|
||||||
|
controller: function () {
|
||||||
|
|
||||||
type: 'map',
|
var map = AmCharts.makeChart('amChartMap', {
|
||||||
theme: 'blur',
|
type: 'map',
|
||||||
|
theme: 'blur',
|
||||||
|
|
||||||
dataProvider: {
|
dataProvider: {
|
||||||
map: 'worldLow',
|
map: 'worldLow',
|
||||||
zoomLevel: 3.5,
|
zoomLevel: 3.5,
|
||||||
zoomLongitude: 10,
|
zoomLongitude: 10,
|
||||||
zoomLatitude: 52,
|
zoomLatitude: 52,
|
||||||
areas: [
|
areas: [
|
||||||
{
|
{ title: 'Austria', id: 'AT', color: colorPrimary, customData: '1 244', groupId: '1'},
|
||||||
title: 'Austria',
|
{ title: 'Ireland', id: 'IE', color: colorPrimary, customData: '1 342', groupId: '1'},
|
||||||
id: 'AT',
|
{ title: 'Denmark', id: 'DK', color: colorPrimary, customData: '1 973', groupId: '1'},
|
||||||
color: colorPrimary,
|
{ title: 'Finland', id: 'FI', color: colorPrimary, customData: '1 573', groupId: '1'},
|
||||||
customData: '1 244',
|
{ title: 'Sweden', id: 'SE', color: colorPrimary, customData: '1 084', groupId: '1'},
|
||||||
groupId: '1'
|
{ title: 'Great Britain', id: 'GB', color: colorPrimary, customData: '1 452', groupId: '1'},
|
||||||
},
|
{ title: 'Italy', id: 'IT', color: colorPrimary, customData: '1 321', groupId: '1'},
|
||||||
{
|
{ title: 'France', id: 'FR', color: colorPrimary, customData: '1 112', groupId: '1'},
|
||||||
title: 'Ireland',
|
{ title: 'Spain', id: 'ES', color: colorPrimary, customData: '1 865', groupId: '1'},
|
||||||
id: 'IE',
|
{ title: 'Greece', id: 'GR', color: colorPrimary, customData: '1 453', groupId: '1'},
|
||||||
color: colorPrimary,
|
{ title: 'Germany', id: 'DE', color: colorPrimary, customData: '1 957', groupId: '1'},
|
||||||
customData: '1 342',
|
{ title: 'Belgium', id: 'BE', color: colorPrimary, customData: '1 011', groupId: '1'},
|
||||||
groupId: '1'
|
{ title: 'Luxembourg', id: 'LU', color: colorPrimary, customData: '1 011', groupId: '1'},
|
||||||
},
|
{ title: 'Netherlands', id: 'NL', color: colorPrimary, customData: '1 213', groupId: '1'},
|
||||||
{
|
{ title: 'Portugal', id: 'PT', color: colorPrimary, customData: '1 291', groupId: '1'},
|
||||||
title: 'Denmark',
|
{ title: 'Lithuania', id: 'LT', color: colorSuccessLight, customData: '567', groupId: '2'},
|
||||||
id: 'DK',
|
{ title: 'Latvia', id: 'LV', color: colorSuccessLight, customData: '589', groupId: '2'},
|
||||||
color: colorPrimary,
|
{ title: 'Czech Republic ', id: 'CZ', color: colorSuccessLight, customData: '785', groupId: '2'},
|
||||||
customData: '1 973',
|
{ title: 'Slovakia', id: 'SK', color: colorSuccessLight, customData: '965', groupId: '2'},
|
||||||
groupId: '1'
|
{ title: 'Estonia', id: 'EE', color: colorSuccessLight, customData: '685', groupId: '2'},
|
||||||
},
|
{ title: 'Hungary', id: 'HU', color: colorSuccessLight, customData: '854', groupId: '2'},
|
||||||
{
|
{ title: 'Cyprus', id: 'CY', color: colorSuccessLight, customData: '754', groupId: '2'},
|
||||||
title: 'Finland',
|
{ title: 'Malta', id: 'MT', color: colorSuccessLight, customData: '867', groupId: '2'},
|
||||||
id: 'FI',
|
{ title: 'Poland', id: 'PL', color: colorSuccessLight, customData: '759', groupId: '2'},
|
||||||
color: colorPrimary,
|
{ title: 'Romania', id: 'RO', color: colorSuccess, customData: '302', groupId: '3'},
|
||||||
customData: '1 573',
|
{ title: 'Bulgaria', id: 'BG', color: colorSuccess, customData: '102', groupId: '3'},
|
||||||
groupId: '1'
|
{ title: 'Slovenia', id: 'SI', color: colorDanger, customData: '23', groupId: '4'},
|
||||||
},
|
{ title: 'Croatia', id: 'HR', color: colorDanger, customData: '96', groupId: '4'}
|
||||||
{
|
]
|
||||||
title: 'Sweden',
|
|
||||||
id: 'SE',
|
|
||||||
color: colorPrimary,
|
|
||||||
customData: '1 084',
|
|
||||||
groupId: '1'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Great Britain',
|
|
||||||
id: 'GB',
|
|
||||||
color: colorPrimary,
|
|
||||||
customData: '1 452',
|
|
||||||
groupId: '1'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Italy',
|
|
||||||
id: 'IT',
|
|
||||||
color: colorPrimary,
|
|
||||||
customData: '1 321',
|
|
||||||
groupId: '1'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'France',
|
|
||||||
id: 'FR',
|
|
||||||
color: colorPrimary,
|
|
||||||
customData: '1 112',
|
|
||||||
groupId: '1'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Spain',
|
|
||||||
id: 'ES',
|
|
||||||
color: colorPrimary,
|
|
||||||
customData: '1 865',
|
|
||||||
groupId: '1'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Greece',
|
|
||||||
id: 'GR',
|
|
||||||
color: colorPrimary,
|
|
||||||
customData: '1 453',
|
|
||||||
groupId: '1'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Germany',
|
|
||||||
id: 'DE',
|
|
||||||
color: colorPrimary,
|
|
||||||
customData: '1 957',
|
|
||||||
groupId: '1'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Belgium',
|
|
||||||
id: 'BE',
|
|
||||||
color: colorPrimary,
|
|
||||||
customData: '1 011',
|
|
||||||
groupId: '1'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Luxembourg',
|
|
||||||
id: 'LU',
|
|
||||||
color: colorPrimary,
|
|
||||||
customData: '1 011',
|
|
||||||
groupId: '1'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Netherlands',
|
|
||||||
id: 'NL',
|
|
||||||
color: colorPrimary,
|
|
||||||
customData: '1 213',
|
|
||||||
groupId: '1'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Portugal',
|
|
||||||
id: 'PT',
|
|
||||||
color: colorPrimary,
|
|
||||||
customData: '1 291',
|
|
||||||
groupId: '1'
|
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
areasSettings: {
|
||||||
title: 'Lithuania',
|
rollOverOutlineColor: '#FFFFFF',
|
||||||
id: 'LT',
|
rollOverColor: colorPrimaryDark,
|
||||||
color: colorSuccessLight,
|
alpha: 0.8,
|
||||||
customData: '567',
|
unlistedAreasAlpha: 0.1,
|
||||||
groupId: '2'
|
balloonText: '[[title]]: [[customData]] users'
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Latvia',
|
|
||||||
id: 'LV',
|
|
||||||
color: colorSuccessLight,
|
|
||||||
customData: '589',
|
|
||||||
groupId: '2'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Czech Republic ',
|
|
||||||
id: 'CZ',
|
|
||||||
color: colorSuccessLight,
|
|
||||||
customData: '785',
|
|
||||||
groupId: '2'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Slovakia',
|
|
||||||
id: 'SK',
|
|
||||||
color: colorSuccessLight,
|
|
||||||
customData: '965',
|
|
||||||
groupId: '2'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Estonia',
|
|
||||||
id: 'EE',
|
|
||||||
color: colorSuccessLight,
|
|
||||||
customData: '685',
|
|
||||||
groupId: '2'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Hungary',
|
|
||||||
id: 'HU',
|
|
||||||
color: colorSuccessLight,
|
|
||||||
customData: '854',
|
|
||||||
groupId: '2'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Cyprus',
|
|
||||||
id: 'CY',
|
|
||||||
color: colorSuccessLight,
|
|
||||||
customData: '754',
|
|
||||||
groupId: '2'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Malta',
|
|
||||||
id: 'MT',
|
|
||||||
color: colorSuccessLight,
|
|
||||||
customData: '867',
|
|
||||||
groupId: '2'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Poland',
|
|
||||||
id: 'PL',
|
|
||||||
color: colorSuccessLight,
|
|
||||||
customData: '759',
|
|
||||||
groupId: '2'
|
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
|
||||||
title: 'Romania',
|
legend: {
|
||||||
id: 'RO',
|
width: '100%',
|
||||||
color: colorSuccess,
|
marginRight: 27,
|
||||||
customData: '302',
|
marginLeft: 27,
|
||||||
groupId: '3'
|
equalWidths: false,
|
||||||
|
backgroundAlpha: 0.5,
|
||||||
|
backgroundColor: '#FFFFFF',
|
||||||
|
borderColor: '#ffffff',
|
||||||
|
borderAlpha: 1,
|
||||||
|
top: 362,
|
||||||
|
left: 0,
|
||||||
|
horizontalGap: 10,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
title: 'over 1 000 users',
|
||||||
|
color: colorPrimary
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '500 - 1 000 users',
|
||||||
|
color: colorSuccessLight
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '100 - 500 users',
|
||||||
|
color: colorSuccess
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '0 - 100 users',
|
||||||
|
color: colorDanger
|
||||||
|
}
|
||||||
|
]
|
||||||
},
|
},
|
||||||
{
|
export: {
|
||||||
title: 'Bulgaria',
|
enabled: true
|
||||||
id: 'BG',
|
|
||||||
color: colorSuccess,
|
|
||||||
customData: '102',
|
|
||||||
groupId: '3'
|
|
||||||
},
|
},
|
||||||
{
|
creditsPosition: 'bottom-right',
|
||||||
title: 'Slovenia',
|
pathToImages: 'img/'
|
||||||
id: 'SI',
|
});
|
||||||
color: colorDanger,
|
|
||||||
customData: '23',
|
|
||||||
groupId: '4'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Croatia',
|
|
||||||
id: 'HR',
|
|
||||||
color: colorDanger,
|
|
||||||
customData: '96',
|
|
||||||
groupId: '4'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
|
templateUrl: 'app/pages/dashboard/widgets/amChartMap/amChartMap.html'
|
||||||
areasSettings: {
|
};
|
||||||
rollOverOutlineColor: '#FFFFFF',
|
});
|
||||||
rollOverColor: colorPrimaryDark,
|
|
||||||
alpha: 0.8,
|
|
||||||
unlistedAreasAlpha: 0.1,
|
|
||||||
balloonText: '[[title]]: [[customData]] users'
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
legend: {
|
|
||||||
width: '100%',
|
|
||||||
marginRight: 27,
|
|
||||||
marginLeft: 27,
|
|
||||||
equalWidths: false,
|
|
||||||
backgroundAlpha: 0.5,
|
|
||||||
backgroundColor: '#FFFFFF',
|
|
||||||
borderColor: '#ffffff',
|
|
||||||
borderAlpha: 1,
|
|
||||||
top: 362,
|
|
||||||
left: 0,
|
|
||||||
horizontalGap: 10,
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
title: 'over 1 000 users',
|
|
||||||
color: colorPrimary
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '500 - 1 000 users',
|
|
||||||
color: colorSuccessLight
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '100 - 500 users',
|
|
||||||
color: colorSuccess
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '0 - 100 users',
|
|
||||||
color: colorDanger
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
export: {
|
|
||||||
enabled: true
|
|
||||||
},
|
|
||||||
creditsPosition: 'bottom-right',
|
|
||||||
pathToImages: 'img/'
|
|
||||||
});
|
|
||||||
}]);
|
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
.blur-feed {
|
||||||
|
height: 983px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
<div class="blur-feed">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
blurAdminApp.directive('blurFeed', function () {
|
||||||
|
return {
|
||||||
|
restrict: 'E',
|
||||||
|
controller: ['$scope', function ($scope) {
|
||||||
|
}],
|
||||||
|
templateUrl: 'app/pages/dashboard/widgets/blurFeed/blurFeed.html'
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
|
@ -1 +1 @@
|
||||||
<div id='calendar' ng-controller="calendarCtrl"></div>
|
<div id='calendar'></div>
|
||||||
|
|
@ -1,83 +1,94 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
|
blurAdminApp.directive('blurCalendar', function () {
|
||||||
|
return {
|
||||||
|
restrict: 'E',
|
||||||
|
controller: ['$scope', function ($scope) {
|
||||||
|
$('#calendar').fullCalendar({
|
||||||
|
header: {
|
||||||
|
left: 'prev,next today',
|
||||||
|
center: 'title',
|
||||||
|
right: 'month,agendaWeek,agendaDay'
|
||||||
|
},
|
||||||
|
defaultDate: '2015-07-12',
|
||||||
|
selectable: true,
|
||||||
|
selectHelper: true,
|
||||||
|
select: function (start, end) {
|
||||||
|
var title = prompt('Event Title:');
|
||||||
|
var eventData;
|
||||||
|
if (title) {
|
||||||
|
eventData = {
|
||||||
|
title: title,
|
||||||
|
start: start,
|
||||||
|
end: end
|
||||||
|
};
|
||||||
|
$element.fullCalendar('renderEvent', eventData, true); // stick? = true
|
||||||
|
}
|
||||||
|
$element.fullCalendar('unselect');
|
||||||
|
},
|
||||||
|
editable: true,
|
||||||
|
eventLimit: true, // allow "more" link when too many events
|
||||||
|
events: [
|
||||||
|
{
|
||||||
|
title: 'All Day Event',
|
||||||
|
start: '2015-07-01'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Long Event',
|
||||||
|
start: '2015-07-07',
|
||||||
|
end: '2015-07-10',
|
||||||
|
color: colorDanger
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 999,
|
||||||
|
title: 'Repeating Event',
|
||||||
|
start: '2015-07-09T16:00:00'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 999,
|
||||||
|
title: 'Repeating Event',
|
||||||
|
start: '2015-07-16T16:00:00'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Conference',
|
||||||
|
start: '2015-07-11',
|
||||||
|
end: '2015-07-13',
|
||||||
|
color: colorSuccessLight
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Meeting',
|
||||||
|
start: '2015-07-12T10:30:00',
|
||||||
|
end: '2015-07-12T12:30:00',
|
||||||
|
color: colorDanger
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Meeting',
|
||||||
|
start: '2015-07-14T14:30:00',
|
||||||
|
color: colorSuccessLight
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Dinner',
|
||||||
|
start: '2015-07-14T20:00:00',
|
||||||
|
color: colorSuccess
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Birthday Party',
|
||||||
|
start: '2015-07-13T07:00:00',
|
||||||
|
color: colorSuccess
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Click for Google',
|
||||||
|
url: 'http://google.com/',
|
||||||
|
start: '2015-07-28'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
}],
|
||||||
|
templateUrl: 'app/pages/dashboard/widgets/calendar/calendar.html'
|
||||||
|
};
|
||||||
|
});
|
||||||
|
/*
|
||||||
|
|
||||||
blurAdminApp.controller('calendarCtrl', ['$scope', '$timeout', '$element', function ($scope, $timeout, $element) {
|
blurAdminApp.controller('calendarCtrl', ['$scope', '$timeout', '$element', function ($scope, $timeout, $element) {
|
||||||
$element.fullCalendar({
|
|
||||||
header: {
|
}]);*/
|
||||||
left: 'prev,next today',
|
|
||||||
center: 'title',
|
|
||||||
right: 'month,agendaWeek,agendaDay'
|
|
||||||
},
|
|
||||||
defaultDate: '2015-07-12',
|
|
||||||
selectable: true,
|
|
||||||
selectHelper: true,
|
|
||||||
select: function (start, end) {
|
|
||||||
var title = prompt('Event Title:');
|
|
||||||
var eventData;
|
|
||||||
if (title) {
|
|
||||||
eventData = {
|
|
||||||
title: title,
|
|
||||||
start: start,
|
|
||||||
end: end
|
|
||||||
};
|
|
||||||
$element.fullCalendar('renderEvent', eventData, true); // stick? = true
|
|
||||||
}
|
|
||||||
$element.fullCalendar('unselect');
|
|
||||||
},
|
|
||||||
editable: true,
|
|
||||||
eventLimit: true, // allow "more" link when too many events
|
|
||||||
events: [
|
|
||||||
{
|
|
||||||
title: 'All Day Event',
|
|
||||||
start: '2015-07-01'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Long Event',
|
|
||||||
start: '2015-07-07',
|
|
||||||
end: '2015-07-10',
|
|
||||||
color: colorDanger
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 999,
|
|
||||||
title: 'Repeating Event',
|
|
||||||
start: '2015-07-09T16:00:00'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 999,
|
|
||||||
title: 'Repeating Event',
|
|
||||||
start: '2015-07-16T16:00:00'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Conference',
|
|
||||||
start: '2015-07-11',
|
|
||||||
end: '2015-07-13',
|
|
||||||
color: colorSuccessLight
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Meeting',
|
|
||||||
start: '2015-07-12T10:30:00',
|
|
||||||
end: '2015-07-12T12:30:00',
|
|
||||||
color: colorDanger
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Meeting',
|
|
||||||
start: '2015-07-14T14:30:00',
|
|
||||||
color: colorSuccessLight
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Dinner',
|
|
||||||
start: '2015-07-14T20:00:00',
|
|
||||||
color: colorSuccess
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Birthday Party',
|
|
||||||
start: '2015-07-13T07:00:00',
|
|
||||||
color: colorSuccess
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Click for Google',
|
|
||||||
url: 'http://google.com/',
|
|
||||||
start: '2015-07-28'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
});
|
|
||||||
}]);
|
|
||||||
|
|
|
||||||
|
|
@ -1,52 +0,0 @@
|
||||||
'use strict';
|
|
||||||
|
|
||||||
blurAdminApp.controller('trafficChartCtrl', [function () {
|
|
||||||
|
|
||||||
var doughnutData = [
|
|
||||||
{
|
|
||||||
value: 2000,
|
|
||||||
color: colorPrimary,
|
|
||||||
highlight: colorPrimaryDark,
|
|
||||||
label: 'Ad Campaigns'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 1500,
|
|
||||||
color: colorDanger,
|
|
||||||
highlight: colorDangerDark,
|
|
||||||
label: 'Search engines'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 1000,
|
|
||||||
color: colorSuccessLight,
|
|
||||||
highlight: '#6c9c3f',
|
|
||||||
label: 'Direct Traffic'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 1200,
|
|
||||||
color: colorSuccess,
|
|
||||||
highlight: colorSuccessDark,
|
|
||||||
label: 'Referral Traffic'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 400,
|
|
||||||
color: colorWarning,
|
|
||||||
highlight: colorWarningDark,
|
|
||||||
label: 'Other'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
var ctx = document.getElementById('chart-area').getContext('2d');
|
|
||||||
window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
|
|
||||||
responsive: true,
|
|
||||||
legendTemplate: '<ul class="<%=name.toLowerCase()%>-legend clearfix">' +
|
|
||||||
'<% for (var i=0; i<segments.length; i++){%>' +
|
|
||||||
'<li class="clearfix">' +
|
|
||||||
'<span style="background-color:<%=segments[i].fillColor%>"></span>' +
|
|
||||||
'<%if(segments[i].label){%><%=segments[i].label%><%}%>' +
|
|
||||||
'</li><%}%>' +
|
|
||||||
'</ul>'
|
|
||||||
});
|
|
||||||
|
|
||||||
var legend = window.myDoughnut.generateLegend();
|
|
||||||
$('.traffic-legend').html(legend);
|
|
||||||
}]);
|
|
||||||
|
|
@ -1,11 +1,4 @@
|
||||||
.pie-charts {
|
.pie-charts {
|
||||||
white-space: nowrap;
|
|
||||||
min-width: 84px * 4;
|
|
||||||
padding: 0 300px 0;
|
|
||||||
position: absolute;
|
|
||||||
top: 24px;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
.pie-chart-item {
|
.pie-chart-item {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
@ -51,29 +44,4 @@
|
||||||
.angular .chart {
|
.angular .chart {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: $resXXL) and (min-width: $resL), (max-width: $resS) {
|
|
||||||
.pie-charts {
|
|
||||||
padding: 0 250px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: $resL) {
|
|
||||||
.pie-charts {
|
|
||||||
position: relative;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: $resXXS) {
|
|
||||||
.pie-charts {
|
|
||||||
white-space: normal;
|
|
||||||
.pie-chart-item {
|
|
||||||
width: 49%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,18 +1,38 @@
|
||||||
<div class="pie-charts invisible clearfix" zoom-in>
|
<div class="row">
|
||||||
<div class="pie-chart-item" id="chart1">
|
<!-- todo: ng-repeat -->
|
||||||
<span class="chart" rel="#41bee9" data-percent="60"> <span class="percent"></span> </span>
|
<div class="col-sm-3">
|
||||||
<h6>New Visits</h6>
|
<blur-panel>
|
||||||
|
<div class="pie-chart-item" id="chart1">
|
||||||
|
<span class="chart" rel="#41bee9" data-percent="60"> <span class="percent"></span> </span>
|
||||||
|
<h6>New Visits</h6>
|
||||||
|
</div>
|
||||||
|
</blur-panel>
|
||||||
</div>
|
</div>
|
||||||
<div class="pie-chart-item" id="chart2">
|
|
||||||
<span class="chart" rel="#9D498C" data-percent="50"> <span class="percent"></span> </span>
|
<div class="col-sm-3">
|
||||||
<h6>New Purchases</h6>
|
<blur-panel>
|
||||||
|
<div class="pie-chart-item" id="chart2">
|
||||||
|
<span class="chart" rel="#9D498C" data-percent="60"> <span class="percent"></span> </span>
|
||||||
|
<h6>New Purchases</h6>
|
||||||
|
</div>
|
||||||
|
</blur-panel>
|
||||||
</div>
|
</div>
|
||||||
<div class="pie-chart-item" id="chart3">
|
|
||||||
<span class="chart" rel="#bbcb50" data-percent="40"> <span class="percent"></span> </span>
|
<div class="col-sm-3">
|
||||||
<h6>Active Users</h6>
|
<blur-panel>
|
||||||
|
<div class="pie-chart-item" id="chart3">
|
||||||
|
<span class="chart" rel="#bbcb50" data-percent="60"> <span class="percent"></span> </span>
|
||||||
|
<h6>Active Users</h6>
|
||||||
|
</div>
|
||||||
|
</blur-panel>
|
||||||
</div>
|
</div>
|
||||||
<div class="pie-chart-item" id="chart4">
|
|
||||||
<span class="chart" rel="#5FBCBB" data-percent="70"> <span class="percent"></span> </span>
|
<div class="col-sm-3">
|
||||||
<h6>Server Load</h6>
|
<blur-panel>
|
||||||
|
<div class="pie-chart-item" id="chart4">
|
||||||
|
<span class="chart" rel="#5FBCBB" data-percent="60"> <span class="percent"></span> </span>
|
||||||
|
<h6>Server Load</h6>
|
||||||
|
</div>
|
||||||
|
</blur-panel>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
.popular-app {
|
||||||
|
height: 444px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
<div class="popular-app">
|
||||||
|
<div class="popular-app-img">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="popular-app-main">
|
||||||
|
<div class="popular-app-top">
|
||||||
|
<h4>Most Popular App</h4>
|
||||||
|
<p>17$</p>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<h6>Total Visits</h6>
|
||||||
|
<p>47,512</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<h6>New Visits</h6>
|
||||||
|
<p>9,217</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<h6>Sales</h6>
|
||||||
|
<p>2,928</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
blurAdminApp.directive('popularApp', function () {
|
||||||
|
return {
|
||||||
|
restrict: 'E',
|
||||||
|
controller: ['$scope', function ($scope) {
|
||||||
|
|
||||||
|
}],
|
||||||
|
templateUrl: 'app/pages/dashboard/widgets/popularApp/popularApp.html'
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
<!-- todo: remove whole block -->
|
||||||
<section id="cd-timeline" class="cd-container cssanimations" ng-controller="timelineCtrl">
|
<section id="cd-timeline" class="cd-container cssanimations" ng-controller="timelineCtrl">
|
||||||
<div class="cd-timeline-block">
|
<div class="cd-timeline-block">
|
||||||
<div class="cd-timeline-img cd-picture">
|
<div class="cd-timeline-img cd-picture">
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,8 @@ input.task-todo {
|
||||||
ul.todo-list {
|
ul.todo-list {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
height: 435px;
|
||||||
|
overflow: auto;
|
||||||
.placeholder, .ui-sortable-placeholder {
|
.placeholder, .ui-sortable-placeholder {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<input type="text" value="" class="form-control task-todo" placeholder="Task to do" ng-keyup="addToDoItem($event)" ng-model="newTodoText"/>
|
<input type="text" value="" class="form-control task-todo" placeholder="Task to do" ng-keyup="addToDoItem($event)" ng-model="newTodoText"/>
|
||||||
<ul class="todo-list" blur-todo ui-sortable ng-model="todoList">
|
<ul class="todo-list" ui-sortable ng-model="todoList">
|
||||||
<li ng-repeat="item in todoList" ng-if="!item.deleted" ng-class="{checked: isChecked}" class="{{ getMarkColor(item.markId) }}">
|
<li ng-repeat="item in todoList" ng-if="!item.deleted" ng-class="{checked: isChecked}" class="{{ getMarkColor(item.markId) }}">
|
||||||
<i class="mark" ng-click="changeColor(item)"></i>
|
<i class="mark" ng-click="changeColor(item)"></i>
|
||||||
<label class="todo-checkbox custom-checkbox custom-input-success">
|
<label class="todo-checkbox custom-checkbox custom-input-success">
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
blurAdminApp.directive('blurTodo', function () {
|
blurAdminApp.directive('blurTodo', function () {
|
||||||
return {
|
return {
|
||||||
restrict: 'A',
|
restrict: 'EA',
|
||||||
controller: ['$scope', function ($scope) {
|
controller: ['$scope', function ($scope) {
|
||||||
|
|
||||||
$scope.marks = [
|
$scope.marks = [
|
||||||
|
|
@ -101,7 +101,6 @@ blurAdminApp.directive('blurTodo', function () {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}],
|
}],
|
||||||
link: function ($scope, $element, $attrs) {
|
templateUrl: 'app/pages/dashboard/widgets/todo/todo.html'
|
||||||
}
|
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<div class="channels-block" ng-controller="trafficChartCtrl">
|
<div class="channels-block">
|
||||||
|
|
||||||
<div class="channels-info">
|
<div class="channels-info">
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
blurAdminApp.directive('trafficChart', function () {
|
||||||
|
return {
|
||||||
|
restrict: 'E',
|
||||||
|
controller: [function () {
|
||||||
|
|
||||||
|
var doughnutData = [
|
||||||
|
{
|
||||||
|
value: 2000,
|
||||||
|
color: colorPrimary,
|
||||||
|
highlight: colorPrimaryDark,
|
||||||
|
label: 'Ad Campaigns'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 1500,
|
||||||
|
color: colorDanger,
|
||||||
|
highlight: colorDangerDark,
|
||||||
|
label: 'Search engines'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 1000,
|
||||||
|
color: colorSuccessLight,
|
||||||
|
highlight: '#6c9c3f',
|
||||||
|
label: 'Direct Traffic'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 1200,
|
||||||
|
color: colorSuccess,
|
||||||
|
highlight: colorSuccessDark,
|
||||||
|
label: 'Referral Traffic'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 400,
|
||||||
|
color: colorWarning,
|
||||||
|
highlight: colorWarningDark,
|
||||||
|
label: 'Other'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
var ctx = document.getElementById('chart-area').getContext('2d');
|
||||||
|
window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
|
||||||
|
responsive: true,
|
||||||
|
legendTemplate: '<ul class="<%=name.toLowerCase()%>-legend clearfix">' +
|
||||||
|
'<% for (var i=0; i<segments.length; i++){%>' +
|
||||||
|
'<li class="clearfix">' +
|
||||||
|
'<span style="background-color:<%=segments[i].fillColor%>"></span>' +
|
||||||
|
'<%if(segments[i].label){%><%=segments[i].label%><%}%>' +
|
||||||
|
'</li><%}%>' +
|
||||||
|
'</ul>'
|
||||||
|
});
|
||||||
|
|
||||||
|
var legend = window.myDoughnut.generateLegend();
|
||||||
|
$('.traffic-legend').html(legend);
|
||||||
|
|
||||||
|
}],
|
||||||
|
templateUrl: 'app/pages/dashboard/widgets/trafficChart/trafficChart.html'
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
|
@ -17,13 +17,16 @@
|
||||||
"../../app/components/sidebar/sidebar.scss",
|
"../../app/components/sidebar/sidebar.scss",
|
||||||
"../../app/components/backTop/backTop.scss",
|
"../../app/components/backTop/backTop.scss",
|
||||||
"../../app/components/msgCenter/msgCenter.scss",
|
"../../app/components/msgCenter/msgCenter.scss",
|
||||||
|
"../../app/components/blurPanel/blurPanel.scss",
|
||||||
"../../app/pages/dashboard/widgets/calendar/calendar.scss",
|
"../../app/pages/dashboard/widgets/calendar/calendar.scss",
|
||||||
"../../app/pages/dashboard/widgets/pieCharts/pieCharts.scss",
|
"../../app/pages/dashboard/widgets/pieCharts/pieCharts.scss",
|
||||||
"../../app/pages/dashboard/widgets/amChart/amChart.scss",
|
"../../app/pages/dashboard/widgets/amChart/amChart.scss",
|
||||||
"../../app/pages/dashboard/widgets/todo/todo.scss",
|
"../../app/pages/dashboard/widgets/todo/todo.scss",
|
||||||
"../../app/pages/dashboard/widgets/amChartMap/amChartMap.scss",
|
"../../app/pages/dashboard/widgets/amChartMap/amChartMap.scss",
|
||||||
"../../app/pages/dashboard/widgets/timeline/timeline.scss",
|
"../../app/pages/dashboard/widgets/timeline/timeline.scss",
|
||||||
"../../app/pages/dashboard/widgets/chart/chart.scss",
|
"../../app/pages/dashboard/widgets/trafficChart/trafficChart.scss",
|
||||||
|
"../../app/pages/dashboard/widgets/popularApp/popularApp.scss",
|
||||||
|
"../../app/pages/dashboard/widgets/blurFeed/blurFeed.scss",
|
||||||
"../../app/pages/maps/widgets/leaflet/leaflet.scss",
|
"../../app/pages/maps/widgets/leaflet/leaflet.scss",
|
||||||
"../../app/pages/maps/widgets/google-maps/google-maps.scss",
|
"../../app/pages/maps/widgets/google-maps/google-maps.scss",
|
||||||
"../../app/pages/maps/widgets/map-bubbles/map-bubbles.scss",
|
"../../app/pages/maps/widgets/map-bubbles/map-bubbles.scss",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue