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="row">
|
||||||
<div class="col-md-7 col-sm-12">
|
<div class="col-md-7 col-sm-12">
|
||||||
|
@ -8,7 +8,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-5 col-sm-12">
|
<div class="col-md-5 col-sm-12">
|
||||||
<blur-panel title="Users by Country" class-container="medium-panel">
|
<blur-panel title="Users by Country" class-container="medium-panel">
|
||||||
<am-chart-map></am-chart-map>
|
<dashboard-map></dashboard-map>
|
||||||
</blur-panel>
|
</blur-panel>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -18,7 +18,7 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-7 col-md-12 col-sm-7 col-xs-12">
|
<div class="col-lg-7 col-md-12 col-sm-7 col-xs-12">
|
||||||
<blur-panel title="Revenue" class-container="medium-panel">
|
<blur-panel title="Revenue" class-container="medium-panel">
|
||||||
<am-chart></am-chart>
|
<dashboard-line-chart></dashboard-line-chart>
|
||||||
</blur-panel>
|
</blur-panel>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-lg-5 col-md-12 col-sm-5 col-xs-12">
|
<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="row shift-up">
|
||||||
<div class="col-lg-3 col-md-6 col-xs-12">
|
<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-panel title="To Do List" class-container="xmedium-panel feed-comply-panel with-scroll">
|
||||||
<blur-todo></blur-todo>
|
<dashboard-todo></dashboard-todo>
|
||||||
</blur-panel>
|
</blur-panel>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-lg-5 col-md-6 col-xs-12">
|
<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-panel title="Calendar" class-container="xmedium-panel feed-comply-panel with-scroll">
|
||||||
<blur-calendar></blur-calendar>
|
<dashboard-calendar></dashboard-calendar>
|
||||||
</blur-panel>
|
</blur-panel>
|
||||||
</div>
|
</div>
|
||||||
</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