mirror of https://github.com/akveo/blur-admin
refactor(dashboard): change dashboard items definitions
parent
da24a782e4
commit
cf4d8c9eb8
|
@ -0,0 +1,72 @@
|
|||
/**
|
||||
* @author v.lugovksy
|
||||
* created on 16.12.2015
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('BlurAdmin.pages.dashboard')
|
||||
.controller('BlurFeedCtrl', BlurFeedCtrl);
|
||||
|
||||
/** @ngInject */
|
||||
function BlurFeedCtrl($scope) {
|
||||
$scope.feed = [
|
||||
{
|
||||
type: 'text-message',
|
||||
author: 'Kostya',
|
||||
header: 'posted new message',
|
||||
text: 'Guys, check this out: \nA police officer found a perfect hiding place for watching for speeding motorists. One day, the officer was amazed when everyone was under the speed limit, so he investigated and found the problem. A 10 years old boy was standing on the side of the road with a huge hand painted sign which said "Radar Trap Ahead." A little more investigative work led the officer to the boy\'s accomplice: another boy about 100 yards beyond the radar trap with a sign reading "TIPS" and a bucket at his feet full of change.',
|
||||
time: 'Today 11:55 pm',
|
||||
ago: '25 minutes ago',
|
||||
}, {
|
||||
type: 'video-message',
|
||||
author: 'Andrey',
|
||||
header: 'added new video',
|
||||
text: 'Vader and Me',
|
||||
preview: 'vader-and-me-preview',
|
||||
link: 'https://www.youtube.com/watch?v=IfcpzBbbamk',
|
||||
time: 'Today 9:30 pm',
|
||||
ago: '3 hrs ago',
|
||||
}, {
|
||||
type: 'image-message',
|
||||
author: 'Vlad',
|
||||
header: 'added new image',
|
||||
text: 'My little kitten',
|
||||
preview: 'my-little-kitten',
|
||||
link: 'http://api.ning.com/files/DtcI2O2Ry7A7VhVxeiWfGU9WkHcMy4WSTWZ79oxJq*h0iXvVGndfD7CIYy-Ax-UAFCBCdqXI4GCBw3FOLKTTjQc*2cmpdOXJ/1082127884.jpeg',
|
||||
time: 'Today 2:20 pm',
|
||||
ago: '10 hrs ago',
|
||||
}, {
|
||||
type: 'text-message',
|
||||
author: 'Nasta',
|
||||
header: 'posted new message',
|
||||
text: 'Haha lol',
|
||||
time: '11.11.2015',
|
||||
ago: '2 days ago',
|
||||
}, {
|
||||
type: 'geo-message',
|
||||
author: 'Nick',
|
||||
header: 'posted location',
|
||||
text: 'New York, USA',
|
||||
preview: 'new-york-location',
|
||||
link: 'https://www.google.by/maps/place/New+York,+NY,+USA/@40.7201111,-73.9893872,14z',
|
||||
time: '11.11.2015',
|
||||
ago: '2 days ago',
|
||||
}, {
|
||||
type: 'text-message',
|
||||
author: 'Vlad',
|
||||
header: 'posted new message',
|
||||
text: "First snake: I hope I'm not poisonous. Second snake: Why? First snake: Because I bit my lip!",
|
||||
time: '12.11.2015',
|
||||
ago: '3 days ago',
|
||||
}, {
|
||||
type: 'text-message',
|
||||
author: 'Andrey',
|
||||
header: 'posted new message',
|
||||
text: 'How do you smuggle an elephant across the border? Put a slice of bread on each side, and call him "lunch".',
|
||||
time: '14.11.2015',
|
||||
ago: '5 days ago',
|
||||
}
|
||||
];
|
||||
}
|
||||
})();
|
|
@ -0,0 +1,19 @@
|
|||
/**
|
||||
* @author v.lugovksy
|
||||
* created on 16.12.2015
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('BlurAdmin.pages.dashboard')
|
||||
.directive('blurFeed', blurFeed);
|
||||
|
||||
/** @ngInject */
|
||||
function blurFeed() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
controller: 'BlurFeedCtrl',
|
||||
templateUrl: 'app/pages/dashboard/blurFeed/blurFeed.html'
|
||||
};
|
||||
}
|
||||
})();
|
|
@ -1,4 +1,4 @@
|
|||
<pie-charts></pie-charts>
|
||||
<dashboard-pie-chart></dashboard-pie-chart>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-7 col-sm-12">
|
||||
|
@ -8,7 +8,7 @@
|
|||
</div>
|
||||
<div class="col-md-5 col-sm-12">
|
||||
<blur-panel title="Users by Country" class-container="medium-panel">
|
||||
<am-chart-map></am-chart-map>
|
||||
<dashboard-map></dashboard-map>
|
||||
</blur-panel>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -18,7 +18,7 @@
|
|||
<div class="row">
|
||||
<div class="col-lg-7 col-md-12 col-sm-7 col-xs-12">
|
||||
<blur-panel title="Revenue" class-container="medium-panel">
|
||||
<am-chart></am-chart>
|
||||
<dashboard-line-chart></dashboard-line-chart>
|
||||
</blur-panel>
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-12 col-sm-5 col-xs-12">
|
||||
|
@ -38,12 +38,12 @@
|
|||
<div class="row shift-up">
|
||||
<div class="col-lg-3 col-md-6 col-xs-12">
|
||||
<blur-panel title="To Do List" class-container="xmedium-panel feed-comply-panel with-scroll">
|
||||
<blur-todo></blur-todo>
|
||||
<dashboard-todo></dashboard-todo>
|
||||
</blur-panel>
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-6 col-xs-12">
|
||||
<blur-panel title="Calendar" class-container="xmedium-panel feed-comply-panel with-scroll">
|
||||
<blur-calendar></blur-calendar>
|
||||
<dashboard-calendar></dashboard-calendar>
|
||||
</blur-panel>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -0,0 +1,94 @@
|
|||
/**
|
||||
* @author v.lugovksy
|
||||
* created on 16.12.2015
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('BlurAdmin.pages.dashboard')
|
||||
.controller('DashboardCalendarCtrl', DashboardCalendarCtrl);
|
||||
|
||||
/** @ngInject */
|
||||
function DashboardCalendarCtrl($scope) {
|
||||
var $element = $('#calendar').fullCalendar({
|
||||
//height: 335,
|
||||
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'
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
})();
|
|
@ -0,0 +1,19 @@
|
|||
/**
|
||||
* @author v.lugovksy
|
||||
* created on 16.12.2015
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('BlurAdmin.pages.dashboard')
|
||||
.directive('dashboardCalendar', dashboardCalendar);
|
||||
|
||||
/** @ngInject */
|
||||
function dashboardCalendar() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
controller: 'DashboardCalendarCtrl',
|
||||
templateUrl: 'app/pages/dashboard/dashboardCalendar/dashboardCalendar.html'
|
||||
};
|
||||
}
|
||||
})();
|
|
@ -0,0 +1,129 @@
|
|||
/**
|
||||
* @author v.lugovksy
|
||||
* created on 16.12.2015
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('BlurAdmin.pages.dashboard')
|
||||
.controller('DashboardLineChartCtrl', DashboardLineChartCtrl);
|
||||
|
||||
/** @ngInject */
|
||||
function DashboardLineChartCtrl($scope, tplSkinManager, tplSkinChartWatcherHelper) {
|
||||
var chartData = [
|
||||
{ date: new Date(2012, 11), value: 0, value0: 0 },
|
||||
{ date: new Date(2013, 0), value: 15000, value0: 19000},
|
||||
{ date: new Date(2013, 1), value: 30000, value0: 20000},
|
||||
|
||||
|
||||
{ date: new Date(2013, 2), value: 25000, value0: 22000},
|
||||
{ date: new Date(2013, 3), value: 21000, value0: 25000},
|
||||
{ date: new Date(2013, 4), value: 24000, value0: 29000},
|
||||
{ date: new Date(2013, 5), value: 31000, value0: 26000},
|
||||
{ date: new Date(2013, 6), value: 40000, value0: 25000},
|
||||
{ date: new Date(2013, 7), value: 37000, value0: 20000},
|
||||
{ date: new Date(2013, 8), value: 18000, value0: 22000},
|
||||
{ date: new Date(2013, 9), value: 5000, value0: 26000},
|
||||
{ date: new Date(2013, 10), value: 40000, value0: 30000},
|
||||
{ date: new Date(2013, 11), value: 20000, value0: 25000},
|
||||
{ date: new Date(2014, 0), value: 5000, value0: 13000},
|
||||
|
||||
{ date: new Date(2014, 1), value: 3000, value0: 13000},
|
||||
{ date: new Date(2014, 2), value: 1800, value0: 13000},
|
||||
{ date: new Date(2014, 3), value: 10400, value0: 13000},
|
||||
{ date: new Date(2014, 4), value: 25500, value0: 13000},
|
||||
{ date: new Date(2014, 5), value: 2100, value0: 13000},
|
||||
{ date: new Date(2014, 6), value: 6500, value0: 13000},
|
||||
{ date: new Date(2014, 7), value: 1100, value0: 13000},
|
||||
{ date: new Date(2014, 8), value: 17200, value0: 13000},
|
||||
{ date: new Date(2014, 9), value: 26900, value0: 13000},
|
||||
{ date: new Date(2014, 10), value: 14100, value0: 13000},
|
||||
{ date: new Date(2014, 11), value: 35300, value0: 13000},
|
||||
{ date: new Date(2015, 0), value: 54800, value0: 13000},
|
||||
{ date: new Date(2015, 1), value: 49800, value0: 13000}
|
||||
];
|
||||
|
||||
var chartColorProfile = tplSkinManager.getChartColorProfile();
|
||||
|
||||
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,
|
||||
color: chartColorProfile.fontColors,
|
||||
axisColor: chartColorProfile.axisColors
|
||||
}
|
||||
],
|
||||
graphs: [
|
||||
{
|
||||
id: 'g0',
|
||||
bullet: 'none',
|
||||
useLineColorForBulletBorder: true,
|
||||
lineColor: colorDefault,
|
||||
lineThickness: 1,
|
||||
negativeLineColor: colorDanger,
|
||||
type: 'smoothedLine',
|
||||
valueField: 'value0',
|
||||
fillAlphas: 1,
|
||||
fillColorsField: 'lineColor'
|
||||
},
|
||||
{
|
||||
id: 'g1',
|
||||
bullet: 'none',
|
||||
useLineColorForBulletBorder: true,
|
||||
lineColor: colorPrimary,
|
||||
lineThickness: 1,
|
||||
negativeLineColor: colorDanger,
|
||||
type: 'smoothedLine',
|
||||
valueField: 'value',
|
||||
fillAlphas: 1,
|
||||
fillColorsField: 'lineColor'
|
||||
}
|
||||
],
|
||||
chartCursor: {
|
||||
categoryBalloonDateFormat: 'MM YYYY',
|
||||
categoryBalloonColor: '#4285F4',
|
||||
categoryBalloonAlpha: 0.7,
|
||||
cursorAlpha: 0,
|
||||
valueLineEnabled: true,
|
||||
valueLineBalloonEnabled: true,
|
||||
valueLineAlpha: 0.5
|
||||
},
|
||||
dataDateFormat: 'MM YYYY',
|
||||
export: {
|
||||
enabled: true
|
||||
},
|
||||
creditsPosition: 'bottom-right',
|
||||
zoomOutButton: {
|
||||
backgroundColor: '#fff',
|
||||
backgroundAlpha: 0
|
||||
},
|
||||
zoomOutText: '',
|
||||
pathToImages: 'img/'
|
||||
});
|
||||
|
||||
tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, chart);
|
||||
|
||||
function zoomChart() {
|
||||
chart.zoomToDates(new Date(2013, 3), new Date(2014, 0));
|
||||
}
|
||||
|
||||
chart.addListener('rendered', zoomChart);
|
||||
zoomChart();
|
||||
if (chart.zoomChart) {
|
||||
chart.zoomChart();
|
||||
}
|
||||
}
|
||||
})();
|
|
@ -0,0 +1,19 @@
|
|||
/**
|
||||
* @author v.lugovksy
|
||||
* created on 16.12.2015
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('BlurAdmin.pages.dashboard')
|
||||
.directive('dashboardLineChart', dashboardLineChart);
|
||||
|
||||
/** @ngInject */
|
||||
function dashboardLineChart() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
controller: 'DashboardLineChartCtrl',
|
||||
templateUrl: 'app/pages/dashboard/dashboardLineChart/dashboardLineChart.html'
|
||||
};
|
||||
}
|
||||
})();
|
|
@ -0,0 +1,102 @@
|
|||
/**
|
||||
* @author v.lugovksy
|
||||
* created on 16.12.2015
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('BlurAdmin.pages.dashboard')
|
||||
.controller('DashboardMapCtrl', DashboardMapCtrl);
|
||||
|
||||
/** @ngInject */
|
||||
function DashboardMapCtrl() {
|
||||
var map = AmCharts.makeChart('amChartMap', {
|
||||
type: 'map',
|
||||
theme: 'blur',
|
||||
zoomControl: { zoomControlEnabled: false, panControlEnabled: false },
|
||||
|
||||
dataProvider: {
|
||||
map: 'worldLow',
|
||||
zoomLevel: 3.5,
|
||||
zoomLongitude: 10,
|
||||
zoomLatitude: 52,
|
||||
areas: [
|
||||
{ title: 'Austria', id: 'AT', color: colorPrimary, customData: '1 244', groupId: '1'},
|
||||
{ title: 'Ireland', id: 'IE', color: colorPrimary, customData: '1 342', groupId: '1'},
|
||||
{ title: 'Denmark', id: 'DK', color: colorPrimary, customData: '1 973', groupId: '1'},
|
||||
{ title: 'Finland', id: 'FI', color: colorPrimary, customData: '1 573', groupId: '1'},
|
||||
{ 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'},
|
||||
{ title: 'Lithuania', id: 'LT', color: colorSuccessLight, customData: '567', groupId: '2'},
|
||||
{ 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', id: 'RO', color: colorSuccess, customData: '302', groupId: '3'},
|
||||
{ title: 'Bulgaria', id: 'BG', color: colorSuccess, customData: '102', groupId: '3'},
|
||||
{ title: 'Slovenia', id: 'SI', color: colorDanger, customData: '23', groupId: '4'},
|
||||
{ title: 'Croatia', id: 'HR', color: colorDanger, customData: '96', groupId: '4'}
|
||||
]
|
||||
},
|
||||
|
||||
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,19 @@
|
|||
/**
|
||||
* @author v.lugovksy
|
||||
* created on 16.12.2015
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('BlurAdmin.pages.dashboard')
|
||||
.directive('dashboardMap', dashboardMap);
|
||||
|
||||
/** @ngInject */
|
||||
function dashboardMap() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
controller: 'DashboardMapCtrl',
|
||||
templateUrl: 'app/pages/dashboard/dashboardMap/dashboardMap.html'
|
||||
};
|
||||
}
|
||||
})();
|
|
@ -0,0 +1,74 @@
|
|||
/**
|
||||
* @author v.lugovksy
|
||||
* created on 16.12.2015
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('BlurAdmin.pages.dashboard')
|
||||
.controller('DashboardPieChartCtrl', DashboardPieChartCtrl);
|
||||
|
||||
/** @ngInject */
|
||||
function DashboardPieChartCtrl($scope, $element, $window, $timeout) {
|
||||
$scope.charts = [{
|
||||
color: '#41bee9',
|
||||
description: 'New Visits',
|
||||
stats: '57,820',
|
||||
icon: 'person',
|
||||
}, {
|
||||
color: '#9D498C',
|
||||
description: 'New Purchases',
|
||||
stats: '$ 89,745',
|
||||
icon: 'money',
|
||||
}, {
|
||||
color: '#bbcb50',
|
||||
description: 'Active Users',
|
||||
stats: '178,391',
|
||||
icon: 'face',
|
||||
}, {
|
||||
color: '#5FBCBB',
|
||||
description: 'Returned Visitors',
|
||||
stats: '32,592',
|
||||
icon: 'refresh',
|
||||
}
|
||||
];
|
||||
|
||||
function getRandomArbitrary(min, max) {
|
||||
return Math.random() * (max - min) + min;
|
||||
}
|
||||
|
||||
function loadPieCharts() {
|
||||
$('.chart').each(function () {
|
||||
var chart = $(this);
|
||||
chart.easyPieChart({
|
||||
easing: 'easeOutBounce',
|
||||
onStep: function (from, to, percent) {
|
||||
$(this.el).find('.percent').text(Math.round(percent));
|
||||
},
|
||||
barColor: chart.attr('rel'),
|
||||
trackColor: 'rgba(0,0,0,0)',
|
||||
size: 84,
|
||||
scaleLength: 0,
|
||||
animation: 2000,
|
||||
lineWidth: 9,
|
||||
lineCap: 'square',
|
||||
});
|
||||
});
|
||||
|
||||
$('.refresh-data').on('click', function () {
|
||||
updatePieCharts();
|
||||
});
|
||||
}
|
||||
|
||||
function updatePieCharts() {
|
||||
$('.pie-charts .chart').each(function(index, chart) {
|
||||
$(chart).data('easyPieChart').update(getRandomArbitrary(55, 90));
|
||||
});
|
||||
}
|
||||
|
||||
$timeout(function () {
|
||||
loadPieCharts();
|
||||
updatePieCharts();
|
||||
}, 1000);
|
||||
}
|
||||
})();
|
|
@ -0,0 +1,19 @@
|
|||
/**
|
||||
* @author v.lugovksy
|
||||
* created on 16.12.2015
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('BlurAdmin.pages.dashboard')
|
||||
.directive('dashboardPieChart', dashboardPieChart);
|
||||
|
||||
/** @ngInject */
|
||||
function dashboardPieChart() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
controller: 'DashboardPieChartCtrl',
|
||||
templateUrl: 'app/pages/dashboard/dashboardPieChart/dashboardPieChart.html'
|
||||
};
|
||||
}
|
||||
})();
|
|
@ -0,0 +1,119 @@
|
|||
/**
|
||||
* @author v.lugovksy
|
||||
* created on 16.12.2015
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('BlurAdmin.pages.dashboard')
|
||||
.controller('DashboardTodoCtrl', DashboardTodoCtrl);
|
||||
|
||||
/** @ngInject */
|
||||
function DashboardTodoCtrl($scope) {
|
||||
$scope.marks = [
|
||||
{
|
||||
id: 0,
|
||||
color: 'default'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
color: 'primary'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
color: 'success'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
color: 'warning'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
color: 'danger'
|
||||
}
|
||||
];
|
||||
|
||||
$scope.todoList = [
|
||||
{
|
||||
text: 'Check me out',
|
||||
edit: false, // todo: remove edit
|
||||
markId: 4
|
||||
},
|
||||
{
|
||||
text: 'Lorem ipsum dolor sit amet, possit denique oportere at his, etiam corpora deseruisse te pro',
|
||||
edit: false,
|
||||
markId: 3
|
||||
},
|
||||
{
|
||||
text: 'Ex has semper alterum, expetenda dignissim',
|
||||
edit: false,
|
||||
markId: 2
|
||||
},
|
||||
{
|
||||
text: 'Vim an eius ocurreret abhorreant, id nam aeque persius ornatus.',
|
||||
edit: false,
|
||||
markId: 1
|
||||
},
|
||||
{
|
||||
text: 'Simul erroribus ad usu',
|
||||
edit: false,
|
||||
markId: 0
|
||||
},
|
||||
{
|
||||
text: 'Ei cum solet appareat, ex est graeci mediocritatem',
|
||||
edit: false,
|
||||
markId: 4
|
||||
},
|
||||
{
|
||||
text: 'Get in touch with akveo team',
|
||||
edit: false,
|
||||
markId: 1
|
||||
},
|
||||
{
|
||||
text: 'Write email to contact@akveo.com',
|
||||
edit: false,
|
||||
markId: 3
|
||||
},
|
||||
{
|
||||
text: 'Have fun with blur admin',
|
||||
edit: false,
|
||||
markId: 2
|
||||
},
|
||||
];
|
||||
|
||||
$scope.getMarkColor = function (id) {
|
||||
return $scope.marks.filter(function (item) {
|
||||
return item.id === id;
|
||||
})[0].color || '';
|
||||
};
|
||||
|
||||
$scope.changeColor = function (todo) {
|
||||
for (var i = 0; i < $scope.marks.length; ++i) {
|
||||
if ($scope.marks[i].id === todo.markId) {
|
||||
var next = (i + 1 !== $scope.marks.length) ? i + 1 : 0;
|
||||
todo.markId = $scope.marks[next].id;
|
||||
return false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$scope.blurOnEnter = function (event, item) {
|
||||
if (event.which === 13) {
|
||||
item.edit = false;
|
||||
}
|
||||
};
|
||||
|
||||
$scope.newTodoText = '';
|
||||
|
||||
$scope.addToDoItem = function (event) {
|
||||
if (event.which === 13) {
|
||||
$scope.todoList.unshift({
|
||||
text: $scope.newTodoText,
|
||||
edit: false,
|
||||
markId: 0
|
||||
});
|
||||
$scope.newTodoText = '';
|
||||
}
|
||||
};
|
||||
}
|
||||
})();
|
|
@ -0,0 +1,19 @@
|
|||
/**
|
||||
* @author v.lugovksy
|
||||
* created on 16.12.2015
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('BlurAdmin.pages.dashboard')
|
||||
.directive('dashboardTodo', dashboardTodo);
|
||||
|
||||
/** @ngInject */
|
||||
function dashboardTodo() {
|
||||
return {
|
||||
restrict: 'EA',
|
||||
controller: 'DashboardTodoCtrl',
|
||||
templateUrl: 'app/pages/dashboard/dashboardTodo/dashboardTodo.html'
|
||||
};
|
||||
}
|
||||
})();
|
|
@ -0,0 +1,18 @@
|
|||
/**
|
||||
* @author v.lugovksy
|
||||
* created on 16.12.2015
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('BlurAdmin.pages.dashboard')
|
||||
.directive('popularApp', popularApp);
|
||||
|
||||
/** @ngInject */
|
||||
function popularApp() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
templateUrl: 'app/pages/dashboard/popularApp/popularApp.html'
|
||||
};
|
||||
}
|
||||
})();
|
Before Width: | Height: | Size: 394 B After Width: | Height: | Size: 394 B |
Before Width: | Height: | Size: 442 B After Width: | Height: | Size: 442 B |
Before Width: | Height: | Size: 507 B After Width: | Height: | Size: 507 B |
|
@ -0,0 +1,62 @@
|
|||
/**
|
||||
* @author v.lugovksy
|
||||
* created on 16.12.2015
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('BlurAdmin.pages.dashboard')
|
||||
.controller('TrafficChartCtrl', TrafficChartCtrl);
|
||||
|
||||
/** @ngInject */
|
||||
function TrafficChartCtrl() {
|
||||
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, {
|
||||
segmentShowStroke: false,
|
||||
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);
|
||||
}
|
||||
})();
|
|
@ -0,0 +1,19 @@
|
|||
/**
|
||||
* @author v.lugovksy
|
||||
* created on 16.12.2015
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('BlurAdmin.pages.dashboard')
|
||||
.directive('trafficChart', trafficChart);
|
||||
|
||||
/** @ngInject */
|
||||
function trafficChart() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
controller: 'TrafficChartCtrl',
|
||||
templateUrl: 'app/pages/dashboard/trafficChart/trafficChart.html'
|
||||
};
|
||||
}
|
||||
})();
|
|
@ -0,0 +1,144 @@
|
|||
/**
|
||||
* @author v.lugovksy
|
||||
* created on 16.12.2015
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('BlurAdmin.pages.dashboard')
|
||||
.controller('WeatherCtrl', WeatherCtrl);
|
||||
|
||||
/** @ngInject */
|
||||
function WeatherCtrl($scope, $http, $timeout, $element) {
|
||||
var url = 'http://api.openweathermap.org/data/2.5/forecast';
|
||||
var method = 'GET';
|
||||
var key = '2de143494c0b295cca9337e1e96b00e0';
|
||||
var middleOfTheDay = 15;
|
||||
$scope.units = 'metric';
|
||||
$scope.weatherIcons = {
|
||||
'01d': 'ion-ios-sunny-outline',
|
||||
'02d': 'ion-ios-partlysunny-outline',
|
||||
'03d': 'ion-ios-cloud-outline',
|
||||
'04d': 'ion-ios-cloud',
|
||||
'09d': 'ion-ios-rainy',
|
||||
'10d': 'ion-ios-rainy-outline',
|
||||
'11d': 'ion-ios-thunderstorm-outline',
|
||||
'13d': 'ion-ios-snowy',
|
||||
'50d': 'ion-ios-cloudy-outline',
|
||||
'01n': 'ion-ios-cloudy-night-outline',
|
||||
'02n': 'ion-ios-cloudy-night',
|
||||
'03n': 'ion-ios-cloud-outline',
|
||||
'04n': 'ion-ios-cloud',
|
||||
'09n': 'ion-ios-rainy',
|
||||
'10n': 'ion-ios-rainy-outline',
|
||||
'11n': 'ion-ios-thunderstorm',
|
||||
'13n': 'ion-ios-snowy',
|
||||
'50n': 'ion-ios-cloudy-outline'
|
||||
};
|
||||
$scope.weather = {};
|
||||
|
||||
$scope.switchUnits = function (name) {
|
||||
$scope.units = name;
|
||||
$scope.updateWeather();
|
||||
};
|
||||
|
||||
$scope.switchDay = function (day) {
|
||||
$scope.weather.current = day;
|
||||
makeChart($scope.weather.days[$scope.weather.current].timeTemp)
|
||||
};
|
||||
|
||||
$scope.updateWeather = function () {
|
||||
$http({
|
||||
method: method, url: url, params: {
|
||||
appid: key,
|
||||
lat: $scope.geoData.geoplugin_latitude,
|
||||
lon: $scope.geoData.geoplugin_longitude,
|
||||
units: $scope.units
|
||||
}
|
||||
}).then(function success(response) {
|
||||
saveWeatherData(response.data);
|
||||
makeChart($scope.weather.days[$scope.weather.current].timeTemp)
|
||||
}, function error() {
|
||||
console.log("WEATHER FAILED")
|
||||
});
|
||||
};
|
||||
|
||||
function updateGeoData() {
|
||||
$http.jsonp('http://www.geoplugin.net/json.gp?jsoncallback=JSON_CALLBACK').then(function success(response) {
|
||||
$scope.geoData = response.data;
|
||||
$scope.updateWeather();
|
||||
}, function error() {
|
||||
console.log("GEO FAILED")
|
||||
});
|
||||
}
|
||||
|
||||
function makeChart(data) {
|
||||
AmCharts.makeChart('tempChart', {
|
||||
type: 'serial',
|
||||
theme: 'blur',
|
||||
handDrawn: true,
|
||||
categoryField: 'time',
|
||||
dataProvider: data,
|
||||
valueAxes: [
|
||||
{
|
||||
axisAlpha: 0.3,
|
||||
gridAlpha: 0
|
||||
}
|
||||
],
|
||||
graphs: [
|
||||
{
|
||||
bullet: 'square',
|
||||
fillAlphas: 0.3,
|
||||
fillColorsField: 'lineColor',
|
||||
legendValueText: '[[value]]',
|
||||
lineColorField: 'lineColor',
|
||||
title: 'Temp',
|
||||
valueField: 'temp'
|
||||
}
|
||||
],
|
||||
categoryAxis: {
|
||||
gridAlpha: 0,
|
||||
axisAlpha: 0.3
|
||||
}
|
||||
}).write('tempChart');
|
||||
}
|
||||
|
||||
function saveWeatherData(data) {
|
||||
var firstItem = data.list[0];
|
||||
var weather = {
|
||||
days: [{
|
||||
date: new Date(),
|
||||
timeTemp: [],
|
||||
main: firstItem.weather[0].main,
|
||||
description: firstItem.weather[0].description,
|
||||
icon: firstItem.weather[0].icon,
|
||||
temp: firstItem.main.temp
|
||||
}], current: 0
|
||||
};
|
||||
data.list.forEach(function (item, i) {
|
||||
var itemDate = new Date(item.dt_txt);
|
||||
if (itemDate.getDate() !== weather.days[weather.days.length - 1].date.getDate()) {
|
||||
weather.days.push({date: itemDate, timeTemp: []});
|
||||
}
|
||||
var lastItem = weather.days[weather.days.length - 1];
|
||||
lastItem.timeTemp.push({
|
||||
time: itemDate.getHours(),
|
||||
temp: item.main.temp
|
||||
});
|
||||
if ((weather.days.length > 1 && itemDate.getHours() == middleOfTheDay) || i == data.list.length - 1) {
|
||||
lastItem.main = item.weather[0].main;
|
||||
lastItem.description = item.weather[0].description;
|
||||
lastItem.icon = item.weather[0].icon;
|
||||
lastItem.temp = item.main.temp;
|
||||
lastItem.date.setHours(i == data.list.length - 1 ? 0 : middleOfTheDay);
|
||||
lastItem.date.setMinutes(0);
|
||||
}
|
||||
});
|
||||
console.log(weather.days[weather.current].date);
|
||||
weather.days = weather.days.slice(0, $element.attr('forecast') || 5);
|
||||
$scope.weather = weather;
|
||||
}
|
||||
|
||||
updateGeoData();
|
||||
}
|
||||
})();
|
|
@ -0,0 +1,19 @@
|
|||
/**
|
||||
* @author v.lugovksy
|
||||
* created on 16.12.2015
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('BlurAdmin.pages.dashboard')
|
||||
.directive('weather', weather);
|
||||
|
||||
/** @ngInject */
|
||||
function weather() {
|
||||
return {
|
||||
restrict: 'EA',
|
||||
controller: 'WeatherCtrl',
|
||||
templateUrl: 'app/pages/dashboard/weather/weather.html'
|
||||
};
|
||||
}
|
||||
})();
|
|
@ -1,125 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
blurAdminApp.directive('amChart', function () {
|
||||
return {
|
||||
restrict: 'E',
|
||||
controller: ['$scope', 'tplSkinManager', 'tplSkinChartWatcherHelper', function ($scope, tplSkinManager, tplSkinChartWatcherHelper) {
|
||||
var chartData = [
|
||||
{ date: new Date(2012, 11), value: 0, value0: 0 },
|
||||
{ date: new Date(2013, 0), value: 15000, value0: 19000},
|
||||
{ date: new Date(2013, 1), value: 30000, value0: 20000},
|
||||
|
||||
|
||||
{ date: new Date(2013, 2), value: 25000, value0: 22000},
|
||||
{ date: new Date(2013, 3), value: 21000, value0: 25000},
|
||||
{ date: new Date(2013, 4), value: 24000, value0: 29000},
|
||||
{ date: new Date(2013, 5), value: 31000, value0: 26000},
|
||||
{ date: new Date(2013, 6), value: 40000, value0: 25000},
|
||||
{ date: new Date(2013, 7), value: 37000, value0: 20000},
|
||||
{ date: new Date(2013, 8), value: 18000, value0: 22000},
|
||||
{ date: new Date(2013, 9), value: 5000, value0: 26000},
|
||||
{ date: new Date(2013, 10), value: 40000, value0: 30000},
|
||||
{ date: new Date(2013, 11), value: 20000, value0: 25000},
|
||||
{ date: new Date(2014, 0), value: 5000, value0: 13000},
|
||||
|
||||
{ date: new Date(2014, 1), value: 3000, value0: 13000},
|
||||
{ date: new Date(2014, 2), value: 1800, value0: 13000},
|
||||
{ date: new Date(2014, 3), value: 10400, value0: 13000},
|
||||
{ date: new Date(2014, 4), value: 25500, value0: 13000},
|
||||
{ date: new Date(2014, 5), value: 2100, value0: 13000},
|
||||
{ date: new Date(2014, 6), value: 6500, value0: 13000},
|
||||
{ date: new Date(2014, 7), value: 1100, value0: 13000},
|
||||
{ date: new Date(2014, 8), value: 17200, value0: 13000},
|
||||
{ date: new Date(2014, 9), value: 26900, value0: 13000},
|
||||
{ date: new Date(2014, 10), value: 14100, value0: 13000},
|
||||
{ date: new Date(2014, 11), value: 35300, value0: 13000},
|
||||
{ date: new Date(2015, 0), value: 54800, value0: 13000},
|
||||
{ date: new Date(2015, 1), value: 49800, value0: 13000}
|
||||
];
|
||||
|
||||
var chartColorProfile = tplSkinManager.getChartColorProfile();
|
||||
|
||||
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,
|
||||
color: chartColorProfile.fontColors,
|
||||
axisColor: chartColorProfile.axisColors
|
||||
}
|
||||
],
|
||||
graphs: [
|
||||
{
|
||||
id: 'g0',
|
||||
bullet: 'none',
|
||||
useLineColorForBulletBorder: true,
|
||||
lineColor: colorDefault,
|
||||
lineThickness: 1,
|
||||
negativeLineColor: colorDanger,
|
||||
type: 'smoothedLine',
|
||||
valueField: 'value0',
|
||||
fillAlphas: 1,
|
||||
fillColorsField: 'lineColor'
|
||||
},
|
||||
{
|
||||
id: 'g1',
|
||||
bullet: 'none',
|
||||
useLineColorForBulletBorder: true,
|
||||
lineColor: colorPrimary,
|
||||
lineThickness: 1,
|
||||
negativeLineColor: colorDanger,
|
||||
type: 'smoothedLine',
|
||||
valueField: 'value',
|
||||
fillAlphas: 1,
|
||||
fillColorsField: 'lineColor'
|
||||
}
|
||||
],
|
||||
chartCursor: {
|
||||
categoryBalloonDateFormat: 'MM YYYY',
|
||||
categoryBalloonColor: '#4285F4',
|
||||
categoryBalloonAlpha: 0.7,
|
||||
cursorAlpha: 0,
|
||||
valueLineEnabled: true,
|
||||
valueLineBalloonEnabled: true,
|
||||
valueLineAlpha: 0.5
|
||||
},
|
||||
dataDateFormat: 'MM YYYY',
|
||||
export: {
|
||||
enabled: true
|
||||
},
|
||||
creditsPosition: 'bottom-right',
|
||||
zoomOutButton: {
|
||||
backgroundColor: '#fff',
|
||||
backgroundAlpha: 0
|
||||
},
|
||||
zoomOutText: '',
|
||||
pathToImages: 'img/'
|
||||
});
|
||||
|
||||
tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, chart);
|
||||
|
||||
function zoomChart() {
|
||||
chart.zoomToDates(new Date(2013, 3), new Date(2014, 0));
|
||||
}
|
||||
|
||||
chart.addListener('rendered', zoomChart);
|
||||
zoomChart();
|
||||
if (chart.zoomChart) {
|
||||
chart.zoomChart();
|
||||
}
|
||||
}],
|
||||
templateUrl: 'app/pages/dashboard/widgets/amChart/amChart.html'
|
||||
};
|
||||
});
|
|
@ -1,99 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
blurAdminApp.directive('amChartMap', function () {
|
||||
return {
|
||||
restrict: 'E',
|
||||
controller: function () {
|
||||
|
||||
var map = AmCharts.makeChart('amChartMap', {
|
||||
type: 'map',
|
||||
theme: 'blur',
|
||||
zoomControl: { zoomControlEnabled: false, panControlEnabled: false },
|
||||
|
||||
dataProvider: {
|
||||
map: 'worldLow',
|
||||
zoomLevel: 3.5,
|
||||
zoomLongitude: 10,
|
||||
zoomLatitude: 52,
|
||||
areas: [
|
||||
{ title: 'Austria', id: 'AT', color: colorPrimary, customData: '1 244', groupId: '1'},
|
||||
{ title: 'Ireland', id: 'IE', color: colorPrimary, customData: '1 342', groupId: '1'},
|
||||
{ title: 'Denmark', id: 'DK', color: colorPrimary, customData: '1 973', groupId: '1'},
|
||||
{ title: 'Finland', id: 'FI', color: colorPrimary, customData: '1 573', groupId: '1'},
|
||||
{ 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'},
|
||||
{ title: 'Lithuania', id: 'LT', color: colorSuccessLight, customData: '567', groupId: '2'},
|
||||
{ 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', id: 'RO', color: colorSuccess, customData: '302', groupId: '3'},
|
||||
{ title: 'Bulgaria', id: 'BG', color: colorSuccess, customData: '102', groupId: '3'},
|
||||
{ title: 'Slovenia', id: 'SI', color: colorDanger, customData: '23', groupId: '4'},
|
||||
{ title: 'Croatia', id: 'HR', color: colorDanger, customData: '96', groupId: '4'}
|
||||
]
|
||||
},
|
||||
|
||||
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/'
|
||||
});
|
||||
},
|
||||
templateUrl: 'app/pages/dashboard/widgets/amChartMap/amChartMap.html'
|
||||
};
|
||||
});
|
|
@ -1,69 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
blurAdminApp.directive('blurFeed', function () {
|
||||
return {
|
||||
restrict: 'E',
|
||||
controller: ['$scope', function ($scope) {
|
||||
$scope.feed = [
|
||||
{
|
||||
type: 'text-message',
|
||||
author: 'Kostya',
|
||||
header: 'posted new message',
|
||||
text: 'Guys, check this out: \nA police officer found a perfect hiding place for watching for speeding motorists. One day, the officer was amazed when everyone was under the speed limit, so he investigated and found the problem. A 10 years old boy was standing on the side of the road with a huge hand painted sign which said "Radar Trap Ahead." A little more investigative work led the officer to the boy\'s accomplice: another boy about 100 yards beyond the radar trap with a sign reading "TIPS" and a bucket at his feet full of change.',
|
||||
time: 'Today 11:55 pm',
|
||||
ago: '25 minutes ago',
|
||||
}, {
|
||||
type: 'video-message',
|
||||
author: 'Andrey',
|
||||
header: 'added new video',
|
||||
text: 'Vader and Me',
|
||||
preview: 'vader-and-me-preview',
|
||||
link: 'https://www.youtube.com/watch?v=IfcpzBbbamk',
|
||||
time: 'Today 9:30 pm',
|
||||
ago: '3 hrs ago',
|
||||
}, {
|
||||
type: 'image-message',
|
||||
author: 'Vlad',
|
||||
header: 'added new image',
|
||||
text: 'My little kitten',
|
||||
preview: 'my-little-kitten',
|
||||
link: 'http://api.ning.com/files/DtcI2O2Ry7A7VhVxeiWfGU9WkHcMy4WSTWZ79oxJq*h0iXvVGndfD7CIYy-Ax-UAFCBCdqXI4GCBw3FOLKTTjQc*2cmpdOXJ/1082127884.jpeg',
|
||||
time: 'Today 2:20 pm',
|
||||
ago: '10 hrs ago',
|
||||
}, {
|
||||
type: 'text-message',
|
||||
author: 'Nasta',
|
||||
header: 'posted new message',
|
||||
text: 'Haha lol',
|
||||
time: '11.11.2015',
|
||||
ago: '2 days ago',
|
||||
}, {
|
||||
type: 'geo-message',
|
||||
author: 'Nick',
|
||||
header: 'posted location',
|
||||
text: 'New York, USA',
|
||||
preview: 'new-york-location',
|
||||
link: 'https://www.google.by/maps/place/New+York,+NY,+USA/@40.7201111,-73.9893872,14z',
|
||||
time: '11.11.2015',
|
||||
ago: '2 days ago',
|
||||
}, {
|
||||
type: 'text-message',
|
||||
author: 'Vlad',
|
||||
header: 'posted new message',
|
||||
text: "First snake: I hope I'm not poisonous. Second snake: Why? First snake: Because I bit my lip!",
|
||||
time: '12.11.2015',
|
||||
ago: '3 days ago',
|
||||
}, {
|
||||
type: 'text-message',
|
||||
author: 'Andrey',
|
||||
header: 'posted new message',
|
||||
text: 'How do you smuggle an elephant across the border? Put a slice of bread on each side, and call him "lunch".',
|
||||
time: '14.11.2015',
|
||||
ago: '5 days ago',
|
||||
}
|
||||
];
|
||||
}],
|
||||
templateUrl: 'app/pages/dashboard/widgets/blurFeed/blurFeed.html'
|
||||
};
|
||||
});
|
||||
|
|
@ -1,95 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
blurAdminApp.directive('blurCalendar', function () {
|
||||
return {
|
||||
restrict: 'E',
|
||||
controller: ['$scope', function ($scope) {
|
||||
var $element = $('#calendar').fullCalendar({
|
||||
//height: 335,
|
||||
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) {
|
||||
|
||||
}]);*/
|
|
@ -1,71 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
blurAdminApp.directive('pieCharts', function () {
|
||||
return {
|
||||
restrict: 'E',
|
||||
controller: ['$scope', '$element', '$window', '$timeout', function ($scope, $element, $window, $timeout) {
|
||||
|
||||
$scope.charts = [{
|
||||
color: '#41bee9',
|
||||
description: 'New Visits',
|
||||
stats: '57,820',
|
||||
icon: 'person',
|
||||
}, {
|
||||
color: '#9D498C',
|
||||
description: 'New Purchases',
|
||||
stats: '$ 89,745',
|
||||
icon: 'money',
|
||||
}, {
|
||||
color: '#bbcb50',
|
||||
description: 'Active Users',
|
||||
stats: '178,391',
|
||||
icon: 'face',
|
||||
}, {
|
||||
color: '#5FBCBB',
|
||||
description: 'Returned Visitors',
|
||||
stats: '32,592',
|
||||
icon: 'refresh',
|
||||
}
|
||||
];
|
||||
|
||||
function getRandomArbitrary(min, max) {
|
||||
return Math.random() * (max - min) + min;
|
||||
}
|
||||
|
||||
function loadPieCharts() {
|
||||
$('.chart').each(function () {
|
||||
var chart = $(this);
|
||||
chart.easyPieChart({
|
||||
easing: 'easeOutBounce',
|
||||
onStep: function (from, to, percent) {
|
||||
$(this.el).find('.percent').text(Math.round(percent));
|
||||
},
|
||||
barColor: chart.attr('rel'),
|
||||
trackColor: 'rgba(0,0,0,0)',
|
||||
size: 84,
|
||||
scaleLength: 0,
|
||||
animation: 2000,
|
||||
lineWidth: 9,
|
||||
lineCap: 'square',
|
||||
});
|
||||
});
|
||||
|
||||
$('.refresh-data').on('click', function () {
|
||||
updatePieCharts();
|
||||
});
|
||||
}
|
||||
|
||||
function updatePieCharts() {
|
||||
$('.pie-charts .chart').each(function(index, chart) {
|
||||
$(chart).data('easyPieChart').update(getRandomArbitrary(55, 90));
|
||||
});
|
||||
}
|
||||
|
||||
$timeout(function () {
|
||||
loadPieCharts();
|
||||
updatePieCharts();
|
||||
}, 1000);
|
||||
}],
|
||||
templateUrl: 'app/pages/dashboard/widgets/pieCharts/pieCharts.html'
|
||||
};
|
||||
});
|
|
@ -1,11 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
blurAdminApp.directive('popularApp', function () {
|
||||
return {
|
||||
restrict: 'E',
|
||||
controller: ['$scope', function ($scope) {
|
||||
|
||||
}],
|
||||
templateUrl: 'app/pages/dashboard/widgets/popularApp/popularApp.html'
|
||||
};
|
||||
});
|
|
@ -1,116 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
blurAdminApp.directive('blurTodo', function () {
|
||||
return {
|
||||
restrict: 'EA',
|
||||
controller: ['$scope', function ($scope) {
|
||||
|
||||
$scope.marks = [
|
||||
{
|
||||
id: 0,
|
||||
color: 'default'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
color: 'primary'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
color: 'success'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
color: 'warning'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
color: 'danger'
|
||||
}
|
||||
];
|
||||
|
||||
$scope.todoList = [
|
||||
{
|
||||
text: 'Check me out',
|
||||
edit: false, // todo: remove edit
|
||||
markId: 4
|
||||
},
|
||||
{
|
||||
text: 'Lorem ipsum dolor sit amet, possit denique oportere at his, etiam corpora deseruisse te pro',
|
||||
edit: false,
|
||||
markId: 3
|
||||
},
|
||||
{
|
||||
text: 'Ex has semper alterum, expetenda dignissim',
|
||||
edit: false,
|
||||
markId: 2
|
||||
},
|
||||
{
|
||||
text: 'Vim an eius ocurreret abhorreant, id nam aeque persius ornatus.',
|
||||
edit: false,
|
||||
markId: 1
|
||||
},
|
||||
{
|
||||
text: 'Simul erroribus ad usu',
|
||||
edit: false,
|
||||
markId: 0
|
||||
},
|
||||
{
|
||||
text: 'Ei cum solet appareat, ex est graeci mediocritatem',
|
||||
edit: false,
|
||||
markId: 4
|
||||
},
|
||||
{
|
||||
text: 'Get in touch with akveo team',
|
||||
edit: false,
|
||||
markId: 1
|
||||
},
|
||||
{
|
||||
text: 'Write email to contact@akveo.com',
|
||||
edit: false,
|
||||
markId: 3
|
||||
},
|
||||
{
|
||||
text: 'Have fun with blur admin',
|
||||
edit: false,
|
||||
markId: 2
|
||||
},
|
||||
];
|
||||
|
||||
$scope.getMarkColor = function (id) {
|
||||
return $scope.marks.filter(function (item) {
|
||||
return item.id === id;
|
||||
})[0].color || '';
|
||||
};
|
||||
|
||||
$scope.changeColor = function (todo) {
|
||||
for (var i = 0; i < $scope.marks.length; ++i) {
|
||||
if ($scope.marks[i].id === todo.markId) {
|
||||
var next = (i + 1 !== $scope.marks.length) ? i + 1 : 0;
|
||||
todo.markId = $scope.marks[next].id;
|
||||
return false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$scope.blurOnEnter = function (event, item) {
|
||||
if (event.which === 13) {
|
||||
item.edit = false;
|
||||
}
|
||||
};
|
||||
|
||||
$scope.newTodoText = '';
|
||||
|
||||
$scope.addToDoItem = function (event) {
|
||||
if (event.which === 13) {
|
||||
$scope.todoList.unshift({
|
||||
text: $scope.newTodoText,
|
||||
edit: false,
|
||||
markId: 0
|
||||
});
|
||||
$scope.newTodoText = '';
|
||||
}
|
||||
};
|
||||
}],
|
||||
templateUrl: 'app/pages/dashboard/widgets/todo/todo.html'
|
||||
};
|
||||
});
|
|
@ -1,61 +0,0 @@
|
|||
'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, {
|
||||
segmentShowStroke: false,
|
||||
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'
|
||||
};
|
||||
});
|
||||
|
|
@ -1,141 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
blurAdminApp.directive('blurWeather', function () {
|
||||
return {
|
||||
restrict: 'EA',
|
||||
controller: ['$scope', '$http', '$timeout', '$element', function ($scope, $http, $timeout, $element) {
|
||||
var url = 'http://api.openweathermap.org/data/2.5/forecast';
|
||||
var method = 'GET';
|
||||
var key = '2de143494c0b295cca9337e1e96b00e0';
|
||||
var middleOfTheDay = 15;
|
||||
$scope.units = 'metric';
|
||||
$scope.weatherIcons = {
|
||||
'01d': 'ion-ios-sunny-outline',
|
||||
'02d': 'ion-ios-partlysunny-outline',
|
||||
'03d': 'ion-ios-cloud-outline',
|
||||
'04d': 'ion-ios-cloud',
|
||||
'09d': 'ion-ios-rainy',
|
||||
'10d': 'ion-ios-rainy-outline',
|
||||
'11d': 'ion-ios-thunderstorm-outline',
|
||||
'13d': 'ion-ios-snowy',
|
||||
'50d': 'ion-ios-cloudy-outline',
|
||||
'01n': 'ion-ios-cloudy-night-outline',
|
||||
'02n': 'ion-ios-cloudy-night',
|
||||
'03n': 'ion-ios-cloud-outline',
|
||||
'04n': 'ion-ios-cloud',
|
||||
'09n': 'ion-ios-rainy',
|
||||
'10n': 'ion-ios-rainy-outline',
|
||||
'11n': 'ion-ios-thunderstorm',
|
||||
'13n': 'ion-ios-snowy',
|
||||
'50n': 'ion-ios-cloudy-outline'
|
||||
};
|
||||
$scope.weather = {};
|
||||
|
||||
$scope.switchUnits = function (name) {
|
||||
$scope.units = name;
|
||||
$scope.updateWeather();
|
||||
};
|
||||
|
||||
$scope.switchDay = function (day) {
|
||||
$scope.weather.current = day;
|
||||
makeChart($scope.weather.days[$scope.weather.current].timeTemp)
|
||||
};
|
||||
|
||||
$scope.updateWeather = function () {
|
||||
$http({
|
||||
method: method, url: url, params: {
|
||||
appid: key,
|
||||
lat: $scope.geoData.geoplugin_latitude,
|
||||
lon: $scope.geoData.geoplugin_longitude,
|
||||
units: $scope.units
|
||||
}
|
||||
}).then(function success(response) {
|
||||
saveWeatherData(response.data);
|
||||
makeChart($scope.weather.days[$scope.weather.current].timeTemp)
|
||||
}, function error() {
|
||||
console.log("WEATHER FAILED")
|
||||
});
|
||||
};
|
||||
|
||||
function updateGeoData() {
|
||||
$http.jsonp('http://www.geoplugin.net/json.gp?jsoncallback=JSON_CALLBACK').then(function success(response) {
|
||||
$scope.geoData = response.data;
|
||||
$scope.updateWeather();
|
||||
}, function error() {
|
||||
console.log("GEO FAILED")
|
||||
});
|
||||
}
|
||||
|
||||
function makeChart(data) {
|
||||
AmCharts.makeChart('tempChart', {
|
||||
type: 'serial',
|
||||
theme: 'blur',
|
||||
handDrawn: true,
|
||||
categoryField: 'time',
|
||||
dataProvider: data,
|
||||
valueAxes: [
|
||||
{
|
||||
axisAlpha: 0.3,
|
||||
gridAlpha: 0
|
||||
}
|
||||
],
|
||||
graphs: [
|
||||
{
|
||||
bullet: 'square',
|
||||
fillAlphas: 0.3,
|
||||
fillColorsField: 'lineColor',
|
||||
legendValueText: '[[value]]',
|
||||
lineColorField: 'lineColor',
|
||||
title: 'Temp',
|
||||
valueField: 'temp'
|
||||
}
|
||||
],
|
||||
categoryAxis: {
|
||||
gridAlpha: 0,
|
||||
axisAlpha: 0.3
|
||||
}
|
||||
}).write('tempChart');
|
||||
}
|
||||
|
||||
function saveWeatherData(data) {
|
||||
var firstItem = data.list[0];
|
||||
var weather = {
|
||||
days: [{
|
||||
date: new Date(),
|
||||
timeTemp: [],
|
||||
main: firstItem.weather[0].main,
|
||||
description: firstItem.weather[0].description,
|
||||
icon: firstItem.weather[0].icon,
|
||||
temp: firstItem.main.temp
|
||||
}], current: 0
|
||||
};
|
||||
data.list.forEach(function (item, i) {
|
||||
var itemDate = new Date(item.dt_txt);
|
||||
if (itemDate.getDate() !== weather.days[weather.days.length - 1].date.getDate()) {
|
||||
weather.days.push({date: itemDate, timeTemp: []});
|
||||
}
|
||||
var lastItem = weather.days[weather.days.length - 1];
|
||||
lastItem.timeTemp.push({
|
||||
time: itemDate.getHours(),
|
||||
temp: item.main.temp
|
||||
});
|
||||
if ((weather.days.length > 1 && itemDate.getHours() == middleOfTheDay) || i == data.list.length - 1) {
|
||||
lastItem.main = item.weather[0].main;
|
||||
lastItem.description = item.weather[0].description;
|
||||
lastItem.icon = item.weather[0].icon;
|
||||
lastItem.temp = item.main.temp;
|
||||
lastItem.date.setHours(i == data.list.length - 1 ? 0 : middleOfTheDay);
|
||||
lastItem.date.setMinutes(0);
|
||||
}
|
||||
});
|
||||
console.log(weather.days[weather.current].date);
|
||||
weather.days = weather.days.slice(0, $element.attr('forecast') || 5);
|
||||
$scope.weather = weather;
|
||||
}
|
||||
|
||||
updateGeoData();
|
||||
|
||||
}],
|
||||
templateUrl: 'app/pages/dashboard/widgets/weather/weather.html'
|
||||
};
|
||||
});
|
Loading…
Reference in New Issue