jinql
/
blur-admin
mirror of https://github.com/akveo/blur-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

feat(dashboard redesign): new dashboard layout

pull/3/head
Anastasiya 2015-11-10 17:15:26 +03:00
parent 7ab7c9324a
commit f64ee43138
30 changed files with 591 additions and 654 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/app/components/blurPanel/_blurPanel.scss Normal file
View File

@ -0,0 +1,32 @@
.panel {
border-radius: 0px;
background-color: $panel-bg;
position: relative;
transition: all 0.2s ease;
margin-bottom: 24px;
&:hover {
background: $panel-bg-hover;
}
&.animated {
animation-duration: 0.5s;
}
}
.panel-heading, .panel-default > .panel-heading {
background-color: transparent;
border: none;
padding: 7px 22px 0px;
margin-bottom: -5px;
color: $default-text;
}
.panel-title {
font-weight: normal;
}
.panel-body {
padding: 16px 22px;
@include scrollbars(.5em, #ccc, #fff);
}

8
src/app/components/blurPanel/blurPanel.html Normal file
View File

@ -0,0 +1,8 @@
<div class="panel panel-default invisible" zoom-in>
<div class="panel-heading clearfix" ng-if="title">
<h3 class="panel-title">{{ title }}</h3>
</div>
<div class="panel-body">
<ng-transclude></ng-transclude>
</div>
</div>

15
src/app/components/blurPanel/blurPanel.js Normal file
View File

@ -0,0 +1,15 @@
'use strict';
blurAdminApp.directive('blurPanel', function () {
return {
restrict: 'E',
transclude: true,
scope: {
title: '@'
},
controller: ['$scope', function ($scope) {
}],
templateUrl: 'app/components/blurPanel/blurPanel.html'
};
});

33
src/app/components/widgets/_widgets.scss
View File

@ -3,39 +3,6 @@
backface-visibility: hidden;
}
.panel {
border-radius: 0px;
background-color: $panel-bg;
position: relative;
transition: all 0.2s ease;
margin-bottom: 24px;
&:hover {
background: $panel-bg-hover;
}
&.animated {
animation-duration: 0.5s;
}
}
.panel-heading, .panel-default > .panel-heading {
background-color: transparent;
border: none;
padding: 7px 22px 0px;
margin-bottom: -5px;
color: $default-text;
}
.panel-title {
font-weight: normal;
}
.panel-body {
padding: 16px 22px;
@include scrollbars(.5em, #ccc, #fff);
}
.full-width {
margin: 0 -22px -16px;
}

11
src/app/components/widgets/widgets.html
View File

@ -1,14 +1,9 @@
<div class="widgets">
<div ng-repeat="widgetBlock in ngModel" ng-class="{'row': widgetBlock.widgets.length > 1}">
<div ng-repeat="widgetCol in widgetBlock.widgets" ng-class="{'col-md-6': widgetBlock.widgets.length === 2}" ng-model="widgetCol" class="widgets-block">
<div ng-repeat="widget in widgetCol" class="panel panel-default invisible" zoom-in>
<div class="panel-heading clearfix" ng-if="widget.title">
<h3 class="panel-title">{{ widget.title }}</h3>
</div>
<div class="panel-body">
<div ng-include="widget.url"></div>
</div>
</div>
<blur-panel title="widget.title" ng-repeat="widget in widgetCol" >
<div ng-include="widget.url"></div>
</blur-panel>
</div>
</div>
</div>

51
src/app/pages/dashboard/dashboard.html
View File

@ -1,3 +1,50 @@
<widgets ng-model="widgetBlocks"></widgets>
<pie-charts></pie-charts>
<!--<pie-charts></pie-charts>-->
<div>
<blur-panel>
<div class="row">
<div class="col-sm-6">
<h3>Acquisition Channels</h3>
<traffic-chart></traffic-chart>
</div>
<div class="col-sm-6">
<h3>Users by country</h3>
<am-chart-map></am-chart-map>
</div>
</div>
</blur-panel>
</div>
<div class="row">
<div class="col-sm-9">
<div class="row">
<div class="col-sm-8">
<blur-panel title="Revenue">
<am-chart></am-chart>
</blur-panel>
</div>
<div class="col-sm-4">
<blur-panel>
<popular-app></popular-app>
</blur-panel>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<blur-panel title="ToDo List">
<blur-todo></blur-todo>
</blur-panel>
</div>
<div class="col-sm-8">
<blur-panel title="Calenar">
<blur-calendar></blur-calendar>
</blur-panel>
</div>
</div>
</div>
<div class="col-sm-3">
<blur-panel title="Feed">
<blur-feed></blur-feed>
</blur-panel>
</div>
</div>

35
src/app/pages/dashboard/dashboard.js
View File

@ -9,39 +9,4 @@ angular.module('BlurAdmin.dashboard', ['ngRoute'])
});
}])
.controller('DashboardCtrl', ['$scope', function ($scope) {
$scope.widgetBlocks = [
{
widgets: [
[
{
title: 'Users by Country',
url: 'app/pages/dashboard/widgets/amChartMap/amChartMap.html'
},
{
title: 'Revenue',
url: 'app/pages/dashboard/widgets/amChart/amChart.html'
},
{
title: 'My Calendar',
url: 'app/pages/dashboard/widgets/calendar/calendar.html'
}
],
[
{
title: 'Acquisition Channels',
url: 'app/pages/dashboard/widgets/chart/chart.html'
},
{
title: 'Timeline',
url: 'app/pages/dashboard/widgets/timeline/timeline.html'
},
{
title: 'ToDo List',
url: 'app/pages/dashboard/widgets/todo/todo.html'
}
]
]
}
];
}]);

2
src/app/pages/dashboard/widgets/amChart/amChart.html
View File

@ -1 +1 @@
<div id="amchart" style="" ng-controller="amChartCtrl"></div>
<div id="amchart"></div>

279
src/app/pages/dashboard/widgets/amChart/amChart.js
View File

@ -1,142 +1,147 @@
'use strict';
blurAdminApp.controller('amChartCtrl', ['$scope', '$timeout', '$element', function ($scope, $timeout, $element) {
var chartData = [
{ date: new Date(2011, 0), value: -30700},
{ date: new Date(2011, 1), value: -16800},
{ date: new Date(2011, 2), value: -7300},
{ date: new Date(2011, 3), value: -2700},
{ date: new Date(2011, 4), value: -25100},
{ date: new Date(2011, 5), value: -28100},
{ date: new Date(2011, 6), value: -34800},
{ date: new Date(2011, 7), value: -7400},
{ date: new Date(2011, 8), value: -1100},
{ date: new Date(2011, 9), value: -7400},
{ date: new Date(2011, 10), value: -12400},
{ date: new Date(2011, 11), value: -2400},
{ date: new Date(2012, 0), value: -2200},
{ date: new Date(2012, 1), value: 0},
{ date: new Date(2012, 2), value: -29600},
{ date: new Date(2012, 3), value: -21700},
{ date: new Date(2012, 4), value: -14700},
{ date: new Date(2012, 5), value: -1500},
{ date: new Date(2012, 6), value: -1600},
{ date: new Date(2012, 7), value: -1100},
{ date: new Date(2012, 8), value: -6800},
{ date: new Date(2012, 9), value: -1900},
{ date: new Date(2012, 10), value: -5600},
{ date: new Date(2012, 11), value: -7700},
{ date: new Date(2013, 0), value: -21300},
{ date: new Date(2013, 1), value: -13700},
{ date: new Date(2013, 2), value: -300},
{ date: new Date(2013, 3), value: 10900},
{ date: new Date(2013, 4), value: 20300},
{ date: new Date(2013, 5), value: 25500},
{ date: new Date(2013, 6), value: 10700},
{ date: new Date(2013, 7), value: -4200},
{ date: new Date(2013, 8), value: -5000},
{ date: new Date(2013, 9), value: 17700},
{ date: new Date(2013, 10), value: 25100},
{ date: new Date(2013, 11), value: 37000},
{ date: new Date(2014, 0), value: 300},
{ date: new Date(2014, 1), value: 17900},
{ date: new Date(2014, 2), value: 1800},
{ date: new Date(2014, 3), value: 10400},
{ date: new Date(2014, 4), value: 25500},
{ date: new Date(2014, 5), value: 2100},
{ date: new Date(2014, 6), value: 6500},
{ date: new Date(2014, 7), value: 1100},
{ date: new Date(2014, 8), value: 17200},
{ date: new Date(2014, 9), value: 26900},
{ date: new Date(2014, 10), value: 14100},
{ date: new Date(2014, 11), value: 35300},
{ date: new Date(2015, 0), value: 54800},
{ date: new Date(2015, 1), value: 29800},
{ date: new Date(2015, 2), value: 26700},
{ date: new Date(2015, 3), value: 41100},
{ date: new Date(2015, 4), value: 46200},
{ date: new Date(2015, 5), value: 4700},
{ date: new Date(2015, 6), value: 44500},
{ date: new Date(2015, 7), value: 4700}
];
blurAdminApp.directive('amChart', function () {
return {
restrict: 'E',
controller: ['$scope', function ($scope) {
var chartData = [
{ date: new Date(2011, 0), value: -30700},
{ date: new Date(2011, 1), value: -16800},
{ date: new Date(2011, 2), value: -7300},
{ date: new Date(2011, 3), value: -2700},
{ date: new Date(2011, 4), value: -25100},
{ date: new Date(2011, 5), value: -28100},
{ date: new Date(2011, 6), value: -34800},
{ date: new Date(2011, 7), value: -7400},
{ date: new Date(2011, 8), value: -1100},
{ date: new Date(2011, 9), value: -7400},
{ date: new Date(2011, 10), value: -12400},
{ date: new Date(2011, 11), value: -2400},
{ date: new Date(2012, 0), value: -2200},
{ date: new Date(2012, 1), value: 0},
{ date: new Date(2012, 2), value: -29600},
{ date: new Date(2012, 3), value: -21700},
{ date: new Date(2012, 4), value: -14700},
{ date: new Date(2012, 5), value: -1500},
{ date: new Date(2012, 6), value: -1600},
{ date: new Date(2012, 7), value: -1100},
{ date: new Date(2012, 8), value: -6800},
{ date: new Date(2012, 9), value: -1900},
{ date: new Date(2012, 10), value: -5600},
{ date: new Date(2012, 11), value: -7700},
{ date: new Date(2013, 0), value: -21300},
{ date: new Date(2013, 1), value: -13700},
{ date: new Date(2013, 2), value: -300},
{ date: new Date(2013, 3), value: 10900},
{ date: new Date(2013, 4), value: 20300},
{ date: new Date(2013, 5), value: 25500},
{ date: new Date(2013, 6), value: 10700},
{ date: new Date(2013, 7), value: -4200},
{ date: new Date(2013, 8), value: -5000},
{ date: new Date(2013, 9), value: 17700},
{ date: new Date(2013, 10), value: 25100},
{ date: new Date(2013, 11), value: 37000},
{ date: new Date(2014, 0), value: 300},
{ date: new Date(2014, 1), value: 17900},
{ date: new Date(2014, 2), value: 1800},
{ date: new Date(2014, 3), value: 10400},
{ date: new Date(2014, 4), value: 25500},
{ date: new Date(2014, 5), value: 2100},
{ date: new Date(2014, 6), value: 6500},
{ date: new Date(2014, 7), value: 1100},
{ date: new Date(2014, 8), value: 17200},
{ date: new Date(2014, 9), value: 26900},
{ date: new Date(2014, 10), value: 14100},
{ date: new Date(2014, 11), value: 35300},
{ date: new Date(2015, 0), value: 54800},
{ date: new Date(2015, 1), value: 29800},
{ date: new Date(2015, 2), value: 26700},
{ date: new Date(2015, 3), value: 41100},
{ date: new Date(2015, 4), value: 46200},
{ date: new Date(2015, 5), value: 4700},
{ date: new Date(2015, 6), value: 44500},
{ date: new Date(2015, 7), value: 4700}
];
var id = $element[0].getAttribute('id');
var chart = AmCharts.makeChart(id, {
type: 'serial',
theme: 'blur',
marginTop: 0,
marginRight: 15,
dataProvider: chartData,
valueAxes: [
{
gridAlpha: 0
var chart = AmCharts.makeChart('amchart', {
type: 'serial',
theme: 'blur',
marginTop: 0,
marginRight: 15,
dataProvider: chartData,
valueAxes: [
{
gridAlpha: 0
}
],
graphs: [
{
id: 'g1',
bullet: 'round',
bulletSize: 8,
useLineColorForBulletBorder: true,
lineColor: colorSuccess,
lineThickness: 1,
negativeLineColor: colorDanger,
type: 'smoothedLine',
valueField: 'value',
fillAlphas: 0.3,
fillColorsField: 'lineColor'
}
],
chartScrollbar: {
graph: 'g1',
gridAlpha: 0,
color: '#888888',
scrollbarHeight: 55,
backgroundAlpha: 0,
selectedBackgroundAlpha: 0.1,
selectedBackgroundColor: '#ffffff',
graphFillAlpha: 0,
autoGridCount: true,
selectedGraphFillAlpha: 0,
graphLineAlpha: 0.2,
graphLineColor: '#c2c2c2',
selectedGraphLineColor: '#888888',
selectedGraphLineAlpha: 1
},
chartCursor: {
categoryBalloonDateFormat: 'MM YYYY',
categoryBalloonColor: '#4285F4',
categoryBalloonAlpha: 0.7,
cursorAlpha: 0,
valueLineEnabled: true,
valueLineBalloonEnabled: true,
valueLineAlpha: 0.5
},
dataDateFormat: 'MM YYYY',
categoryField: 'date',
categoryAxis: {
parseDates: true,
gridAlpha: 0
},
export: {
enabled: true
},
creditsPosition: 'bottom-right',
zoomOutButton: {
backgroundColor: '#fff',
backgroundAlpha: 0
},
zoomOutText: '',
pathToImages: 'img/'
});
function zoomChart() {
chart.zoomToDates(new Date(2013, 3), new Date(2013, 10));
}
],
graphs: [
{
id: 'g1',
bullet: 'round',
bulletSize: 8,
useLineColorForBulletBorder: true,
lineColor: colorSuccess,
lineThickness: 1,
negativeLineColor: colorDanger,
type: 'smoothedLine',
valueField: 'value',
fillAlphas: 0.3,
fillColorsField: 'lineColor'
chart.addListener('rendered', zoomChart);
zoomChart();
if (chart.zoomChart) {
chart.zoomChart();
}
],
chartScrollbar: {
graph: 'g1',
gridAlpha: 0,
color: '#888888',
scrollbarHeight: 55,
backgroundAlpha: 0,
selectedBackgroundAlpha: 0.1,
selectedBackgroundColor: '#ffffff',
graphFillAlpha: 0,
autoGridCount: true,
selectedGraphFillAlpha: 0,
graphLineAlpha: 0.2,
graphLineColor: '#c2c2c2',
selectedGraphLineColor: '#888888',
selectedGraphLineAlpha: 1
},
chartCursor: {
categoryBalloonDateFormat: 'MM YYYY',
categoryBalloonColor: '#4285F4',
categoryBalloonAlpha: 0.7,
cursorAlpha: 0,
valueLineEnabled: true,
valueLineBalloonEnabled: true,
valueLineAlpha: 0.5
},
dataDateFormat: 'MM YYYY',
categoryField: 'date',
categoryAxis: {
parseDates: true,
gridAlpha: 0
},
export: {
enabled: true
},
creditsPosition: 'bottom-right',
zoomOutButton: {
backgroundColor: '#fff',
backgroundAlpha: 0
},
zoomOutText: '',
pathToImages: 'img/'
});
function zoomChart() {
chart.zoomToDates(new Date(2013, 3), new Date(2013, 10));
}
chart.addListener('rendered', zoomChart);
zoomChart();
if (chart.zoomChart) {
chart.zoomChart();
}
}]);
}],
templateUrl: 'app/pages/dashboard/widgets/amChart/amChart.html'
};
});

2
src/app/pages/dashboard/widgets/amChartMap/amChartMap.html
View File

@ -1 +1 @@
<div id="amChartMap" ng-controller="amMapCtrl"></div>
<div id="amChartMap"></div>

339
src/app/pages/dashboard/widgets/amChartMap/amChartMap.js
View File

@ -1,263 +1,98 @@
'use strict';
blurAdminApp.controller('amMapCtrl', ['$scope', '$timeout', '$element', function ($scope, $timeout, $element) {
var id = $element[0].getAttribute('id');
var map = AmCharts.makeChart(id, {
blurAdminApp.directive('amChartMap', function () {
return {
restrict: 'E',
controller: function () {
type: 'map',
theme: 'blur',
var map = AmCharts.makeChart('amChartMap', {
type: 'map',
theme: 'blur',
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'
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'}
]
},
{
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'
areasSettings: {
rollOverOutlineColor: '#FFFFFF',
rollOverColor: colorPrimaryDark,
alpha: 0.8,
unlistedAreasAlpha: 0.1,
balloonText: '[[title]]: [[customData]] users'
},
{
title: 'Romania',
id: 'RO',
color: colorSuccess,
customData: '302',
groupId: '3'
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
}
]
},
{
title: 'Bulgaria',
id: 'BG',
color: colorSuccess,
customData: '102',
groupId: '3'
export: {
enabled: true
},
{
title: 'Slovenia',
id: 'SI',
color: colorDanger,
customData: '23',
groupId: '4'
},
{
title: 'Croatia',
id: 'HR',
color: colorDanger,
customData: '96',
groupId: '4'
}
]
creditsPosition: 'bottom-right',
pathToImages: 'img/'
});
},
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'
};
});

3
src/app/pages/dashboard/widgets/blurFeed/_blurFeed.scss Normal file
View File

@ -0,0 +1,3 @@
.blur-feed {
height: 983px;
}

3
src/app/pages/dashboard/widgets/blurFeed/blurFeed.html Normal file
View File

@ -0,0 +1,3 @@
<div class="blur-feed">
</div>

11
src/app/pages/dashboard/widgets/blurFeed/blurFeed.js Normal file
View File

@ -0,0 +1,11 @@
'use strict';
blurAdminApp.directive('blurFeed', function () {
return {
restrict: 'E',
controller: ['$scope', function ($scope) {
}],
templateUrl: 'app/pages/dashboard/widgets/blurFeed/blurFeed.html'
};
});

2
src/app/pages/dashboard/widgets/calendar/calendar.html
View File

@ -1 +1 @@
<div id='calendar' ng-controller="calendarCtrl"></div>
<div id='calendar'></div>

171
src/app/pages/dashboard/widgets/calendar/calendar.js
View File

@ -1,83 +1,94 @@
'use strict';
blurAdminApp.directive('blurCalendar', function () {
return {
restrict: 'E',
controller: ['$scope', function ($scope) {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2015-07-12',
selectable: true,
selectHelper: true,
select: function (start, end) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$element.fullCalendar('renderEvent', eventData, true); // stick? = true
}
$element.fullCalendar('unselect');
},
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2015-07-01'
},
{
title: 'Long Event',
start: '2015-07-07',
end: '2015-07-10',
color: colorDanger
},
{
id: 999,
title: 'Repeating Event',
start: '2015-07-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-07-16T16:00:00'
},
{
title: 'Conference',
start: '2015-07-11',
end: '2015-07-13',
color: colorSuccessLight
},
{
title: 'Meeting',
start: '2015-07-12T10:30:00',
end: '2015-07-12T12:30:00',
color: colorDanger
},
{
title: 'Meeting',
start: '2015-07-14T14:30:00',
color: colorSuccessLight
},
{
title: 'Dinner',
start: '2015-07-14T20:00:00',
color: colorSuccess
},
{
title: 'Birthday Party',
start: '2015-07-13T07:00:00',
color: colorSuccess
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2015-07-28'
}
]
});
}],
templateUrl: 'app/pages/dashboard/widgets/calendar/calendar.html'
};
});
/*
blurAdminApp.controller('calendarCtrl', ['$scope', '$timeout', '$element', function ($scope, $timeout, $element) {
$element.fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2015-07-12',
selectable: true,
selectHelper: true,
select: function (start, end) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$element.fullCalendar('renderEvent', eventData, true); // stick? = true
}
$element.fullCalendar('unselect');
},
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2015-07-01'
},
{
title: 'Long Event',
start: '2015-07-07',
end: '2015-07-10',
color: colorDanger
},
{
id: 999,
title: 'Repeating Event',
start: '2015-07-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-07-16T16:00:00'
},
{
title: 'Conference',
start: '2015-07-11',
end: '2015-07-13',
color: colorSuccessLight
},
{
title: 'Meeting',
start: '2015-07-12T10:30:00',
end: '2015-07-12T12:30:00',
color: colorDanger
},
{
title: 'Meeting',
start: '2015-07-14T14:30:00',
color: colorSuccessLight
},
{
title: 'Dinner',
start: '2015-07-14T20:00:00',
color: colorSuccess
},
{
title: 'Birthday Party',
start: '2015-07-13T07:00:00',
color: colorSuccess
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2015-07-28'
}
]
});
}]);
}]);*/

52
src/app/pages/dashboard/widgets/chart/chart.js
View File

@ -1,52 +0,0 @@
'use strict';
blurAdminApp.controller('trafficChartCtrl', [function () {
var doughnutData = [
{
value: 2000,
color: colorPrimary,
highlight: colorPrimaryDark,
label: 'Ad Campaigns'
},
{
value: 1500,
color: colorDanger,
highlight: colorDangerDark,
label: 'Search engines'
},
{
value: 1000,
color: colorSuccessLight,
highlight: '#6c9c3f',
label: 'Direct Traffic'
},
{
value: 1200,
color: colorSuccess,
highlight: colorSuccessDark,
label: 'Referral Traffic'
},
{
value: 400,
color: colorWarning,
highlight: colorWarningDark,
label: 'Other'
}
];
var ctx = document.getElementById('chart-area').getContext('2d');
window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
responsive: true,
legendTemplate: '<ul class="<%=name.toLowerCase()%>-legend clearfix">' +
'<% for (var i=0; i<segments.length; i++){%>' +
'<li class="clearfix">' +
'<span style="background-color:<%=segments[i].fillColor%>"></span>' +
'<%if(segments[i].label){%><%=segments[i].label%><%}%>' +
'</li><%}%>' +
'</ul>'
});
var legend = window.myDoughnut.generateLegend();
$('.traffic-legend').html(legend);
}]);

34
src/app/pages/dashboard/widgets/pieCharts/_pieCharts.scss
View File

@ -1,11 +1,4 @@
.pie-charts {
white-space: nowrap;
min-width: 84px * 4;
padding: 0 300px 0;
position: absolute;
top: 24px;
left: 0;
width: 100%;
.pie-chart-item {
text-align: center;
display: inline-block;
@ -51,29 +44,4 @@
.angular .chart {
margin-top: 0;
}
}
@media (max-width: $resXXL) and (min-width: $resL), (max-width: $resS) {
.pie-charts {
padding: 0 250px;
}
}
@media (max-width: $resL) {
.pie-charts {
position: relative;
top: 0;
left: 0;
width: 100%;
padding: 0;
}
}
@media (max-width: $resXXS) {
.pie-charts {
white-space: normal;
.pie-chart-item {
width: 49%;
}
}
}
}

46
src/app/pages/dashboard/widgets/pieCharts/pieCharts.html
View File

@ -1,18 +1,38 @@
<div class="pie-charts invisible clearfix" zoom-in>
<div class="pie-chart-item" id="chart1">
<span class="chart" rel="#41bee9" data-percent="60"> <span class="percent"></span> </span>
<h6>New Visits</h6>
<div class="row">
<!-- todo: ng-repeat -->
<div class="col-sm-3">
<blur-panel>
<div class="pie-chart-item" id="chart1">
<span class="chart" rel="#41bee9" data-percent="60"> <span class="percent"></span> </span>
<h6>New Visits</h6>
</div>
</blur-panel>
</div>
<div class="pie-chart-item" id="chart2">
<span class="chart" rel="#9D498C" data-percent="50"> <span class="percent"></span> </span>
<h6>New Purchases</h6>
<div class="col-sm-3">
<blur-panel>
<div class="pie-chart-item" id="chart2">
<span class="chart" rel="#9D498C" data-percent="60"> <span class="percent"></span> </span>
<h6>New Purchases</h6>
</div>
</blur-panel>
</div>
<div class="pie-chart-item" id="chart3">
<span class="chart" rel="#bbcb50" data-percent="40"> <span class="percent"></span> </span>
<h6>Active Users</h6>
<div class="col-sm-3">
<blur-panel>
<div class="pie-chart-item" id="chart3">
<span class="chart" rel="#bbcb50" data-percent="60"> <span class="percent"></span> </span>
<h6>Active Users</h6>
</div>
</blur-panel>
</div>
<div class="pie-chart-item" id="chart4">
<span class="chart" rel="#5FBCBB" data-percent="70"> <span class="percent"></span> </span>
<h6>Server Load</h6>
<div class="col-sm-3">
<blur-panel>
<div class="pie-chart-item" id="chart4">
<span class="chart" rel="#5FBCBB" data-percent="60"> <span class="percent"></span> </span>
<h6>Server Load</h6>
</div>
</blur-panel>
</div>
</div>

3
src/app/pages/dashboard/widgets/popularApp/_popularApp.scss Normal file
View File

@ -0,0 +1,3 @@
.popular-app {
height: 444px;
}

25
src/app/pages/dashboard/widgets/popularApp/popularApp.html Normal file
View File

@ -0,0 +1,25 @@
<div class="popular-app">
<div class="popular-app-img">
</div>
<div class="popular-app-main">
<div class="popular-app-top">
<h4>Most Popular App</h4>
<p>17$</p>
</div>
<div class="row">
<div class="col-sm-4">
<h6>Total Visits</h6>
<p>47,512</p>
</div>
<div class="col-sm-4">
<h6>New Visits</h6>
<p>9,217</p>
</div>
<div class="col-sm-4">
<h6>Sales</h6>
<p>2,928</p>
</div>
</div>
</div>
</div>

11
src/app/pages/dashboard/widgets/popularApp/popularApp.js Normal file
View File

@ -0,0 +1,11 @@
'use strict';
blurAdminApp.directive('popularApp', function () {
return {
restrict: 'E',
controller: ['$scope', function ($scope) {
}],
templateUrl: 'app/pages/dashboard/widgets/popularApp/popularApp.html'
};
});

1
src/app/pages/dashboard/widgets/timeline/timeline.html
View File

@ -1,3 +1,4 @@
<!-- todo: remove whole block -->
<section id="cd-timeline" class="cd-container cssanimations" ng-controller="timelineCtrl">
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-picture">

2
src/app/pages/dashboard/widgets/todo/_todo.scss
View File

@ -6,6 +6,8 @@ input.task-todo {
ul.todo-list {
margin: 0;
padding: 0;
height: 435px;
overflow: auto;
.placeholder, .ui-sortable-placeholder {
background: #fff;
}

2
src/app/pages/dashboard/widgets/todo/todo.html
View File

@ -1,5 +1,5 @@
<input type="text" value="" class="form-control task-todo" placeholder="Task to do" ng-keyup="addToDoItem($event)" ng-model="newTodoText"/>
<ul class="todo-list" blur-todo ui-sortable ng-model="todoList">
<ul class="todo-list" ui-sortable ng-model="todoList">
<li ng-repeat="item in todoList" ng-if="!item.deleted" ng-class="{checked: isChecked}" class="{{ getMarkColor(item.markId) }}">
<i class="mark" ng-click="changeColor(item)"></i>
<label class="todo-checkbox custom-checkbox custom-input-success">

5
src/app/pages/dashboard/widgets/todo/todo.js
View File

@ -2,7 +2,7 @@
blurAdminApp.directive('blurTodo', function () {
return {
restrict: 'A',
restrict: 'EA',
controller: ['$scope', function ($scope) {
$scope.marks = [
@ -101,7 +101,6 @@ blurAdminApp.directive('blurTodo', function () {
}
};
}],
link: function ($scope, $element, $attrs) {
}
templateUrl: 'app/pages/dashboard/widgets/todo/todo.html'
};
});

0
src/app/pages/dashboard/widgets/chart/_chart.scss → src/app/pages/dashboard/widgets/trafficChart/_trafficChart.scss
View File

2
src/app/pages/dashboard/widgets/chart/chart.html → src/app/pages/dashboard/widgets/trafficChart/trafficChart.html
View File

@ -1,4 +1,4 @@
<div class="channels-block" ng-controller="trafficChartCtrl">
<div class="channels-block">
<div class="channels-info">
<div>

60
src/app/pages/dashboard/widgets/trafficChart/trafficChart.js Normal file
View File

@ -0,0 +1,60 @@
'use strict';
blurAdminApp.directive('trafficChart', function () {
return {
restrict: 'E',
controller: [function () {
var doughnutData = [
{
value: 2000,
color: colorPrimary,
highlight: colorPrimaryDark,
label: 'Ad Campaigns'
},
{
value: 1500,
color: colorDanger,
highlight: colorDangerDark,
label: 'Search engines'
},
{
value: 1000,
color: colorSuccessLight,
highlight: '#6c9c3f',
label: 'Direct Traffic'
},
{
value: 1200,
color: colorSuccess,
highlight: colorSuccessDark,
label: 'Referral Traffic'
},
{
value: 400,
color: colorWarning,
highlight: colorWarningDark,
label: 'Other'
}
];
var ctx = document.getElementById('chart-area').getContext('2d');
window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
responsive: true,
legendTemplate: '<ul class="<%=name.toLowerCase()%>-legend clearfix">' +
'<% for (var i=0; i<segments.length; i++){%>' +
'<li class="clearfix">' +
'<span style="background-color:<%=segments[i].fillColor%>"></span>' +
'<%if(segments[i].label){%><%=segments[i].label%><%}%>' +
'</li><%}%>' +
'</ul>'
});
var legend = window.myDoughnut.generateLegend();
$('.traffic-legend').html(legend);
}],
templateUrl: 'app/pages/dashboard/widgets/trafficChart/trafficChart.html'
};
});

5
src/assets/css/main.scss
View File

@ -17,13 +17,16 @@
"../../app/components/sidebar/sidebar.scss",
"../../app/components/backTop/backTop.scss",
"../../app/components/msgCenter/msgCenter.scss",
"../../app/components/blurPanel/blurPanel.scss",
"../../app/pages/dashboard/widgets/calendar/calendar.scss",
"../../app/pages/dashboard/widgets/pieCharts/pieCharts.scss",
"../../app/pages/dashboard/widgets/amChart/amChart.scss",
"../../app/pages/dashboard/widgets/todo/todo.scss",
"../../app/pages/dashboard/widgets/amChartMap/amChartMap.scss",
"../../app/pages/dashboard/widgets/timeline/timeline.scss",
"../../app/pages/dashboard/widgets/chart/chart.scss",
"../../app/pages/dashboard/widgets/trafficChart/trafficChart.scss",
"../../app/pages/dashboard/widgets/popularApp/popularApp.scss",
"../../app/pages/dashboard/widgets/blurFeed/blurFeed.scss",
"../../app/pages/maps/widgets/leaflet/leaflet.scss",
"../../app/pages/maps/widgets/google-maps/google-maps.scss",
"../../app/pages/maps/widgets/map-bubbles/map-bubbles.scss",