zhangyuheng/blessing-skin-server
1
0
Fork 0
forked from mirror/blessing-skin-server
Code Pull Requests Activity

Use laravelchartjs package to generate overview chart

Browse Source
This commit is contained in:
printempw 2018-02-24 13:32:30 +08:00
parent 4d8856e0f4
commit 31391be8c3
13 changed files with 148 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
app/Http/Controllers/AdminController.php
View File

@ -5,6 +5,7 @@ namespace App\Http\Controllers;
use Option;
use Datatables;
use App\Events;
use Carbon\Carbon;
use App\Models\User;
use App\Models\Player;
use App\Models\Texture;
@ -16,7 +17,57 @@ class AdminController extends Controller
{
public function index()
{
return view('admin.index');
$today = Carbon::today()->timestamp;
// Prepare data for the graph
$data = [];
$labels = [];
for ($i = 6; $i >= 0; $i--) {
$time = Carbon::createFromTimestamp($today - $i * 86400);
$labels[] = $time->format('m-d');
$data['user_registration'][] = User::like('register_at', $time->toDateString())->count();
$data['texture_uploads'][] = Texture::like('upload_at', $time->toDateString())->count();
}
$chart = app()->chartjs
->name('overview_chart')
->type('line')
->size(['width' => 400, 'height' => 200])
->labels($labels)
->datasets([
[
'label' => trans('admin.index.user-registration'),
'backgroundColor' => 'rgba(60, 141, 188, 0.6)',
'borderColor' => '#3c8dbc',
'pointRadius' => 0,
'pointBorderColor' => '#3c8dbc',
'pointBackgroundColor' => '#3c8dbc',
'pointHoverBackgroundColor' => '#3c8dbc',
'pointHoverBorderColor' => '#3c8dbc',
'data' => $data['user_registration'],
],
[
'label' => trans('admin.index.texture-uploads'),
'backgroundColor' => 'rgba(210, 214, 222, 0.6)',
'borderColor' => '#d2d6de',
'pointRadius' => 0,
'pointBorderColor' => '#c1c7d1',
'pointBackgroundColor' => '#c1c7d1',
'pointHoverBackgroundColor' => '#c1c7d1',
'pointHoverBorderColor' => '#c1c7d1',
'data' => $data['texture_uploads'],
]
])
->options([
'tooltips' => [
'intersect' => false,
'mode' => 'index'
]
]);
return view('admin.index', compact('chart'));
}
public function customize(Request $request)

3
composer.json
View File

@ -12,7 +12,8 @@
"doctrine/inflector": "1.1.0",
"laravel/framework": "5.2.*",
"devitek/yaml-translation": "^2.0",
"printempw/laravel-datatables-lite": "^1.0"
"printempw/laravel-datatables-lite": "^1.0",
"fx3costa/laravelchartjs": "^2.5"
},
"require-dev": {
"fzaninotto/faker": "~1.4",

54
composer.lock generated
View File

@ -4,7 +4,7 @@
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file",
"This file is @generated automatically"
],
"content-hash": "7cc7aede94ac363755668bb4198c9ca4",
"content-hash": "93065cb8a9e776fe417866c9741f35e5",
"packages": [
{
"name": "classpreloader/classpreloader",
@ -301,6 +301,58 @@
],
"time": "2017-10-15T13:05:10+00:00"
},
{
"name": "fx3costa/laravelchartjs",
"version": "2.5.0",
"source": {
"type": "git",
"url": "https://github.com/fxcosta/laravel-chartjs.git",
"reference": "21eaf327118ca512b6503979d4ae75ad3a463e68"
},
"dist": {
"type": "zip",
"url": "https://files.phpcomposer.com/files/fxcosta/laravel-chartjs/21eaf327118ca512b6503979d4ae75ad3a463e68.zip",
"reference": "21eaf327118ca512b6503979d4ae75ad3a463e68",
"shasum": ""
},
"require": {
"illuminate/support": "5.1.* || 5.2.* || 5.3.* || 5.4.* || 5.5.* || 5.6.*",
"php": ">=5.6.4"
},
"type": "library",
"extra": {
"laravel": {
"providers": [
"Fx3costa\\LaravelChartJs\\Providers\\ChartjsServiceProvider"
]
}
},
"autoload": {
"psr-4": {
"Fx3costa\\LaravelChartJs\\": "src/"
}
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Felix",
"email": "fx3costa@gmail.com"
}
],
"description": "Simple package to facilitate and automate the use of charts in Laravel 5.x using Chartjs v2 library",
"keywords": [
"chart",
"chartjs",
"fx3costa",
"graphics",
"laravel5",
"reports"
],
"time": "2018-02-20T17:00:36+00:00"
},
{
"name": "gregwar/captcha",
"version": "v1.1.5",

1
config/app.php
View File

@ -162,6 +162,7 @@ return [
Devitek\Core\Translation\TranslationServiceProvider::class,
Swiggles\Memcache\MemcacheServiceProvider::class,
Yajra\Datatables\DatatablesServiceProvider::class,
Fx3costa\LaravelChartJs\Providers\ChartjsServiceProvider::class,
/**
* Application Service Providers...

7
gulpfile.js
View File

@ -117,14 +117,15 @@ gulp.task('publish-vendor', ['compile-es6'], callback => {
gulp.src(convertNpmRelativePath(images))
.pipe(gulp.dest(`${distPath}/images/`));
// AdminLTE skins
gulp.src('node_modules/admin-lte/dist/css/skins/*.min.css')
gulp.src(convertNpmRelativePath(['admin-lte/dist/css/skins/*.min.css']))
.pipe(gulp.dest(`${distPath}/css/skins/`));
// 3D skin preview
gulp.src(convertNpmRelativePath(['three/build/three.min.js', 'skinview3d/build/skinview3d.min.js']))
.pipe(concat('skinview3d.js'))
.pipe(gulp.dest(`${distPath}/js/`));
// TODO: remove this
gulp.src(['Chart.min.js'].map(path => `${srcPath}/vendor/${path}`))
// Chart.js
gulp.src(convertNpmRelativePath(['chart.js/dist/Chart.min.js']))
.pipe(concat('chart.js'))
.pipe(gulp.dest(`${distPath}/js/`));
callback();

1
package.json
View File

@ -23,6 +23,7 @@
"admin-lte": "^2.4.2",
"bootstrap": "^3.3.7",
"bootstrap-fileinput": "^4.4.7",
"chart.js": "^2.7.1",
"datatables.net-bs": "^1.10.16",
"es6-promise": "^4.2.4",
"font-awesome": "^4.7.0",

11
resources/assets/src/vendor/Chart.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
resources/lang/en/admin.yml
View File

@ -4,6 +4,8 @@ index:
total-textures: Uploaded Textures
disk-usage: Disk Usage
overview: Overview
texture-uploads: Texture Uploads
user-registration: User Registration
users:
players-count:

4
resources/lang/en/locale.js
View File

@ -167,10 +167,6 @@
changePlayerNameNotice: 'Please input new player name:',
emptyPlayerName: 'Player name cannot be empty.',
// Index
textureUploads: 'Texture Uploads',
userRegistration: 'User Registration',
// Plugins
configurePlugin: 'Configure',
noPluginConfigNotice: 'The plugin has been disabled or no configuration is provided.',

2
resources/lang/zh_CN/admin.yml
View File

@ -4,6 +4,8 @@ index:
total-textures: 上传材质总数
disk-usage: 占用空间大小
overview: 概览
texture-uploads: 材质上传
user-registration: 用户注册
users:
players-count:

4
resources/lang/zh_CN/locale.js
View File

@ -169,10 +169,6 @@
changePlayerNameNotice: '请输入新的角色名：',
emptyPlayerName: '您还没填写角色名呢',
// Index
textureUploads: '材质上传',
userRegistration: '用户注册',
// Plugins
configurePlugin: '插件配置',
noPluginConfigNotice: '插件已被禁用或无配置页',

77
resources/views/admin/index.tpl
View File

@ -72,7 +72,7 @@
</div>
<div class="box-body">
<div class="chart">
<canvas id="areaChart" style="height:250px"></canvas>
{!! $chart->render() !!}
</div>
</div><!-- /.box-body -->
</div><!-- /.box -->
@ -82,78 +82,5 @@
</section><!-- /.content -->
</div><!-- /.content-wrapper -->
<script type="text/javascript" src="{{ assets('js/Chart.min.js') }}"></script>
@endsection
@section('script')
<?php
$today = Carbon\Carbon::today()->timestamp;
$data = [];
$labels = [];
// Prepare data for the graph
for ($i = 6; $i >= 0; $i--) {
$time = Carbon\Carbon::createFromTimestamp($today - $i * 86400);
$labels[] = $time->format('m-d');
$data['user_register'][] = App\Models\User::like('register_at', $time->toDateString())->count();
$data['texture_upload'][] = App\Models\Texture::like('upload_at', $time->toDateString())->count();
}
?>
<script>
$(function () {
var areaChartCanvas = $("#areaChart").get(0).getContext("2d");
var areaChart = new Chart(areaChartCanvas);
var areaChartData = {
labels: {!! json_encode($labels) !!},
datasets: [
{
label: trans("admin.textureUploads"),
fillColor: "rgba(210, 214, 222, 1)",
strokeColor: "rgba(210, 214, 222, 1)",
pointColor: "rgba(210, 214, 222, 1)",
pointStrokeColor: "#c1c7d1",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: {!! json_encode($data['texture_upload']) !!}
},
{
label: trans("admin.userRegistration"),
fillColor: "rgba(60,141,188,0.9)",
strokeColor: "rgba(60,141,188,0.8)",
pointColor: "#3b8bba",
pointStrokeColor: "rgba(60,141,188,1)",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(60,141,188,1)",
data: {!! json_encode($data['user_register']) !!}
}
]
};
var areaChartOptions = {
showScale: true,
scaleShowGridLines: false,
scaleGridLineColor: "rgba(0,0,0,.05)",
scaleGridLineWidth: 1,
scaleShowHorizontalLines: true,
scaleShowVerticalLines: true,
bezierCurve: true,
bezierCurveTension: 0.3,
pointDot: false,
pointDotRadius: 4,
pointDotStrokeWidth: 1,
pointHitDetectionRadius: 20,
datasetStroke: true,
datasetStrokeWidth: 2,
datasetFill: true,
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
maintainAspectRatio: true,
responsive: true
};
areaChart.Line(areaChartData, areaChartOptions);
});
</script>
<script type="text/javascript" src="{{ assets('js/chart.js') }}"></script>
@endsection

30
yarn.lock
View File

@ -1297,6 +1297,26 @@ chart.js@1.0.*:
version "1.0.2"
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-1.0.2.tgz#ad57d2229cfd8ccf5955147e8121b4911e69dfe7"
chart.js@^2.7.1:
version "2.7.1"
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.7.1.tgz#ae90b4aa4ff1f02decd6b1a2a8dabfd73c9f9886"
dependencies:
chartjs-color "~2.2.0"
moment "~2.18.0"
chartjs-color-string@^0.5.0:
version "0.5.0"
resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.5.0.tgz#8d3752d8581d86687c35bfe2cb80ac5213ceb8c1"
dependencies:
color-name "^1.0.0"
chartjs-color@~2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.2.0.tgz#84a2fb755787ed85c39dd6dd8c7b1d88429baeae"
dependencies:
chartjs-color-string "^0.5.0"
color-convert "^0.5.3"
ci-info@^1.0.0:
version "1.1.2"
resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.1.2.tgz#03561259db48d0474c8bdc90f5b47b068b6bbfb4"
@ -1416,13 +1436,17 @@ collection-visit@^1.0.0:
map-visit "^1.0.0"
object-visit "^1.0.0"
color-convert@^0.5.3:
version "0.5.3"
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd"
color-convert@^1.9.0:
version "1.9.1"
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.1.tgz#c1261107aeb2f294ebffec9ed9ecad529a6097ed"
dependencies:
color-name "^1.1.1"
color-name@^1.1.1:
color-name@^1.0.0, color-name@^1.1.1:
version "1.1.3"
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
@ -4213,6 +4237,10 @@ moment@^2.18.1, moment@^2.9.0:
version "2.20.1"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.20.1.tgz#d6eb1a46cbcc14a2b2f9434112c1ff8907f313fd"
moment@~2.18.0:
version "2.18.1"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.18.1.tgz#c36193dd3ce1c2eed2adb7c802dbbc77a81b1c0f"
morris.js@^0.5.0:
version "0.5.0"
resolved "https://registry.yarnpkg.com/morris.js/-/morris.js-0.5.0.tgz#725767135cfae059aae75999bb2ce6a1c5d1b44b"