valitydev/koffing
14
0
Fork 0
mirror of https://github.com/valitydev/koffing.git synced 2024-11-06 17:25:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

FE-24: Added Chart.js, added dashboard form, added static charts

Browse Source
This commit is contained in:
Ildar Galeev 2016-07-19 18:39:20 +03:00
parent ec0fd6789e
commit df16b8d4e4
13 changed files with 162 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/assets/styles.less Normal file
View File

@ -0,0 +1,9 @@
.dashboard_stats_count {
font-size: 33px;
line-height: 40px;
font-weight: 600;
}
.outlet {
min-height: 900px;
}

7
app/components/app/app.pug
View File

@ -2,8 +2,5 @@
.main_container
sidebar
top-panel
.right_col(style="min-height:800px")
ng-outlet
footer
.pull-right @Copyright
.clearfix
.right_col.outlet
ng-outlet

11
app/components/dashboard/dashboard.js
View File

@ -1,8 +1,15 @@
var dashboard = angular.module('dashboard', []);
var dashboard = angular.module('dashboard', ['turnover', 'paymentMethods', 'paymentConversion', 'geolocation']);
dashboard.component('dashboard', {
templateUrl: 'components/dashboard/dashboard.html',
controller: function () {
this.testField = 'Test';
this.statisticInfo = [
{title: 'Баланс', count: '63 000', bottom: 'Рублей'},
{title: 'Оборот', count: '1 325 000', bottom: 'Рублей'},
{title: 'Успешные', count: '1 274 300', bottom: 'Рублей'},
{title: 'Незавершенные', count: '50 700', bottom: 'Рублей'},
{title: 'Средний чек', count: '8 700', bottom: 'Рублей'},
{title: 'Плательщиков', count: '598', bottom: ''}
];
}
});

34
app/components/dashboard/dashboard.pug
View File

@ -1,2 +1,34 @@
.row
.col-md-12 {{$ctrl.testField}}
.tile_count
.col-md-2.col-sm-4.col-xs-6.tile_stats_count(ng-repeat="info in $ctrl.statisticInfo")
span.count_top {{info.title}}
.dashboard_stats_count {{info.count}}
span.count_bottom {{info.bottom}}
.row
.col-md-12.col-sm-12.col-xs-12
.x_panel.tile
.x_title
h3 Оборот
.x_content
turnover
.row
.col-md-6.col-sm-6.col-xs-12
.x_panel.tile
.x_title
h3 Способы оплаты
.x_content
payment-methods
.col-md-6.col-sm-6.col-xs-12
.x_panel.tile
.x_title
h3 Геолокация
.x_content
geolocation
.row
.col-md-12.col-sm-12.col-xs-12
.x_panel.tile
.x_title
h3 Конверсия оплат
.x_content
payment-conversion

15
app/components/dashboard/geolocation/geolocation.js Normal file
View File

@ -0,0 +1,15 @@
var geolocation = angular.module('geolocation', ['chart.js']);
geolocation.component('geolocation', {
template: `<div><canvas class="chart chart-doughnut" chart-data="$ctrl.data" chart-labels="$ctrl.labels" chart-options="$ctrl.options"></canvas> </div>`,
controller: function () {
this.labels = ['Москва', 'Санкт-Петербург', 'Ростов', 'Самара', 'Краснодар'];
this.data = [9343, 3000, 1237, 1179, 978];
this.options = {
legend: {
display: true,
position: 'left'
}
}
}
});

41
app/components/dashboard/payment-conversion/payment-conversion.js Normal file
View File

@ -0,0 +1,41 @@
var paymentConversion = angular.module('paymentConversion', ['chart.js']);
paymentConversion.component('paymentConversion', {
template: `<div><canvas class="chart chart-line" chart-data="$ctrl.data" chart-labels="$ctrl.labels"
chart-series="$ctrl.series" chart-options="$ctrl.options" chart-dataset-override="$ctrl.datasetOverride"
chart-click="$ctrl.onClick" height="80"></canvas></div>`,
controller: function () {
this.labels = ["01.06.16", "02.06.16", "03.06.16", "04.06.16", "05.06.16", "06.06.16", "07.06.16"];
this.series = ['Начатые', 'Успешные', 'Незавершенные'];
this.data = [
[23, 34, 33, 23, 56, 55, 40],
[28, 44, 50, 35, 86, 27, 46],
[22, 54, 23, 76, 56, 33, 23]
];
this.onClick = function (points, evt) {
console.log(points, evt);
};
this.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];
this.options = {
scales: {
yAxes: [
{
id: 'y-axis-1',
type: 'linear',
display: true,
position: 'left'
},
{
id: 'y-axis-2',
type: 'linear',
display: true,
position: 'right'
}
]
},
legend: {
display: true
}
};
}
});

16
app/components/dashboard/payment-methods/payment-methods.js Normal file
View File

@ -0,0 +1,16 @@
var paymentMathods = angular.module('paymentMethods', ['chart.js']);
paymentMathods.component('paymentMethods', {
template: `<div><canvas class="chart chart-doughnut" chart-data="$ctrl.data" chart-labels="$ctrl.labels" chart-options="$ctrl.options"></canvas></div>`,
controller: function () {
this.labels = ["Терминалы", "Салоны связи", "Прочее"];
this.data = [15, 40, 45];
this.options = {
legend: {
display: true,
position: 'left'
}
}
}
});

18
app/components/dashboard/turnover/turnover.js Normal file
View File

@ -0,0 +1,18 @@
var turnover = angular.module('turnover', ['chart.js']);
turnover.component('turnover', {
template: `<div><canvas class="chart chart-line" chart-data="$ctrl.data" chart-labels="$ctrl.labels"
chart-series="$ctrl.series" chart-options="$ctrl.options" chart-dataset-override="$ctrl.datasetOverride"
chart-click="$ctrl.onClick" height="80"></canvas></div>`,
controller: function () {
this.labels = ["January", "February", "March", "April", "May", "June", "July"];
this.data = [
[137, 138, 140, 143, 140, 144, 140]
];
this.onClick = function (points, evt) {
console.log(points, evt);
};
this.options = {
};
}
});

4
app/components/sidebar/sidebar.js
View File

@ -2,7 +2,7 @@ var sidebar = angular.module('sidebar', []);
sidebar.component('sidebar', {
templateUrl: 'components/sidebar/sidebar.html',
controller: function () {
controller: function ($location) {
this.isActive = location => location === $location.path();
}
});

2
app/components/sidebar/sidebar.pug
View File

@ -7,7 +7,7 @@
#sidebar-menu.main_menu_side.hidden-print.main_menu
.menu_section
ul.nav.side-menu
li.active
li(ng-class="{active: $ctrl.isActive('/dashboard')}")
a(ng-link="[\'Dashboard\']")
i.fa.fa-home
| Обзор

1
app/index.pug
View File

@ -5,6 +5,7 @@ html(ng-app="koffing" lang="en")
base(href="/")
title Private Office
link(href="vendor.min.css" rel="stylesheet")
link(href="styles.css" rel="stylesheet")
body.nav-md
app
script(src="vendor.min.js")

15
gulpfile.js
View File

@ -8,6 +8,7 @@ const templateCache = require('gulp-angular-templatecache');
const addStream = require('add-stream');
const uglify = require('gulp-uglify');
const cleanCSS = require('gulp-clean-css');
const less = require('gulp-less');
function prepareTemplates() {
return gulp.src('app/**/*.pug')
@ -33,13 +34,22 @@ gulp.task('sources', () => {
.pipe(livereload());
});
gulp.task('styles', () => {
return gulp.src('app/assets/styles.less')
.pipe(less())
.pipe(gulp.dest('dist'))
.pipe(livereload());
});
gulp.task('vendorScripts', () => {
return gulp.src([
'node_modules/jquery/dist/jquery.js',
'node_modules/bootstrap/dist/js/bootstrap.js',
'node_modules/gentelella/build/js/custom.js',
'node_modules/angular/angular.js',
'node_modules/@angular/router/angular1/angular_1_router.js'
'node_modules/@angular/router/angular1/angular_1_router.js',
'node_modules/angular-chart.js/node_modules/chart.js/dist/Chart.bundle.js',
'node_modules/angular-chart.js/dist/angular-chart.js'
])
.pipe(uglify())
.pipe(concat('vendor.min.js'))
@ -79,7 +89,8 @@ gulp.task('watch', () => {
livereload.listen();
gulp.watch(['app/**/*.js', 'app/**/*.pug'], ['sources']);
gulp.watch('app/index.pug', ['index']);
gulp.watch('app/assets/**/*.less', ['styles']);
});
gulp.task('build', ['index', 'sources', 'vendorScripts', 'vendorStyles']);
gulp.task('build', ['index', 'sources', 'styles', 'vendorScripts', 'vendorStyles']);
gulp.task('default', ['connect', 'watch', 'build']);

2
package.json
View File

@ -14,6 +14,7 @@
"gulp-clean-css": "^2.0.11",
"gulp-concat": "^2.6.0",
"gulp-connect": "^4.1.0",
"gulp-less": "^3.1.0",
"gulp-livereload": "^3.8.1",
"gulp-pug": "^3.0.3",
"gulp-sourcemaps": "^1.6.0",
@ -22,6 +23,7 @@
"dependencies": {
"@angular/router": "^0.2.0",
"angular": "^1.5.7",
"angular-chart.js": "^1.0.0-alpha8",
"bootstrap": "^3.3.6",
"gentelella": "^1.3.0",
"jquery": "^2.2.3"