Leisuretimedock/blessing-skin-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace Chart.js with ECharts

Browse Source
This commit is contained in:
Pig Fang 2019-03-19 19:16:03 +08:00
parent 33d431606d
commit a4c49d6634
9 changed files with 151 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,55 +15,29 @@ use App\Services\Repositories\UserRepository;
class AdminController extends Controller
{
public function index()
public function chartData()
{
$today = Carbon::today()->timestamp;
$xAxis = [];
$userRegistration = [];
$textureUploads = [];
// Prepare data for the graph
$data = [];
$labels = [];
for ($i = 6; $i >= 0; $i--) {
for ($i = 30; $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();
$xAxis[] = $time->format('m-d');
$userRegistration[] = User::like('register_at', $time->toDateString())->count();
$textureUploads[] = Texture::like('upload_at', $time->toDateString())->count();
}
$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'],
return [
'labels' => [
trans('admin.index.user-registration'),
trans('admin.index.texture-uploads')
],
'xAxis' => $xAxis,
'data' => [$userRegistration, $textureUploads]
];
$options = [
'tooltips' => [
'intersect' => false,
'mode' => 'index',
],
];
return view('admin.index', ['chartOptions' => compact('labels', 'datasets', 'options')]);
}
public function customize(Request $request)

11
package.json
View File

@ -20,7 +20,7 @@
"@babel/runtime": "^7.3.4",
"@fortawesome/fontawesome-free": "^5.7.2",
"admin-lte": "^2.4.10",
"chart.js": "^2.7.3",
"echarts": "^4.1.0",
"icheck": "^1.0.2",
"jquery": "^3.3.1",
"skinview3d": "^1.1.0",
@ -38,6 +38,7 @@
"@babel/preset-env": "^7.3.4",
"@babel/preset-typescript": "^7.3.3",
"@gplane/tsconfig": "^1.0.0",
"@types/echarts": "^4.1.7",
"@types/jest": "^24.0.11",
"@types/jquery": "^3.3.9",
"@types/toastr": "^2.1.36",
@ -155,7 +156,13 @@
"no-unused-vars": 0,
"no-invalid-this": 0,
"indent": 0,
"@typescript-eslint/indent": [2, 2, { "SwitchCase": 1 }]
"@typescript-eslint/indent": [
2,
2,
{
"SwitchCase": 1
}
]
}
}
]

95
resources/assets/src/views/admin/Dashboard.ts Normal file
View File

@ -0,0 +1,95 @@
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/dataZoom'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
import { get } from '../../js/net'
interface ChartData {
labels: string[]
xAxis: string[]
data: number[][]
}
async function createChart(el: HTMLCanvasElement) {
const chart = echarts.init(el)
chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985',
},
},
},
dataZoom: [
{ type: 'inside', start: 75 },
{ type: 'slider', start: 75 },
],
legend: {
data: [],
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: [],
},
],
yAxis: [
{
type: 'category',
boundaryGap: false,
},
],
series: [
{
name: '',
type: 'line',
stack: '',
areaStyle: {},
data: [],
},
{
name: '',
type: 'line',
stack: '',
areaStyle: {},
data: [],
},
],
})
const chartData: ChartData = await get('/admin/chart')
chart.setOption({
legend: {
data: chartData.labels,
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: chartData.xAxis,
},
],
series: chartData.labels.map(
(label: string, index: number): echarts.EChartOption.SeriesLine => ({
name: label,
type: 'line',
stack: 'total',
areaStyle: {},
data: chartData.data[index],
smooth: true,
symbol: 'roundRect',
})
),
})
return chart
}
const el = document.querySelector('canvas')
if (el) {
createChart(el)
}

4
resources/assets/src/views/route.ts
View File

@ -19,6 +19,10 @@ export default [
component: () => import('./user/Profile.vue'),
el: '.content',
},
{
path: 'admin',
script: () => import('./admin/Dashboard'),
},
{
path: 'admin/users',
component: () => import('./admin/Users.vue'),

21
resources/views/admin/index.blade.php
View File

@ -67,14 +67,9 @@
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">@lang('admin.index.overview')</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fas fa-minus"></i></button>
<button class="btn btn-box-tool" data-widget="remove"><i class="fas fa-times"></i></button>
</div>
</div>
<div class="box-body">
<canvas id="overview" width="400" height="200"></canvas>
<div class="chart"></div>
<canvas height="500" width="600" id="chart"></canvas>
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>
@ -82,18 +77,4 @@
</section><!-- /.content -->
</div><!-- /.content-wrapper -->
<script src="{{ webpack_assets('Chart.min.js') }}"></script>
<script>
var chartOptions = {!! json_encode($chartOptions) !!};
var chart = new Chart(document.getElementById('overview').getContext('2d'), {
type: 'line',
data: {
labels: chartOptions.labels,
datasets: chartOptions.datasets
},
options: chartOptions.options
});
</script>
@endsection

3
routes/web.php
View File

@ -97,7 +97,8 @@ Route::group(['prefix' => 'skinlib'], function () {
* Admin Panel
*/
Route::group(['middleware' => ['auth', 'admin'], 'prefix' => 'admin'], function () {
Route::get('/', 'AdminController@index');
Route::view('/', 'admin.index');
Route::get('/chart', 'AdminController@chartData');
Route::any('/customize', 'AdminController@customize');
Route::any('/score', 'AdminController@score');

4
tests/AdminControllerTest.php
View File

@ -20,9 +20,9 @@ class AdminControllerTest extends BrowserKitTestCase
$this->actAs('admin');
}
public function testIndex()
public function testChartData()
{
$this->visit('/admin')->seePageIs('/admin');
$this->getJson('/admin/chart')->seeJsonStructure(['labels', 'xAxis', 'data']);
}
public function testCustomize()

1
webpack.config.js
View File

@ -120,7 +120,6 @@ const config = {
to: 'skins',
flatten: true,
},
'node_modules/chart.js/dist/Chart.min.js',
'resources/assets/src/images/bg.jpg',
'resources/assets/src/images/favicon.ico',
]),

52
yarn.lock
View File

@ -939,6 +939,13 @@
dependencies:
"@babel/types" "^7.3.0"
"@types/echarts@^4.1.7":
version "4.1.7"
resolved "https://registry.npmjs.org/@types/echarts/-/echarts-4.1.7.tgz#40df9d259272a57e9299eef127d417d49af12aeb"
integrity sha512-Kc3n0r7Hdz/3ASAZD1lRyo5Kd8boMAkOboopNqf5Lwj+yc+MjiMvVBcFho5g26Kc+lXfgT2E76m4Rw2ERvDNNg==
dependencies:
"@types/zrender" "*"
"@types/istanbul-lib-coverage@^1.1.0":
version "1.1.0"
resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-1.1.0.tgz#2cc2ca41051498382b43157c8227fea60363f94a"
@ -1017,6 +1024,11 @@
resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-12.0.9.tgz#693e76a52f61a2f1e7fb48c0eef167b95ea4ffd0"
integrity sha512-sCZy4SxP9rN2w30Hlmg5dtdRwgYQfYRiLo9usw8X9cxlf+H4FqM1xX7+sNH7NNKVdbXMJWqva7iyy+fxh/V7fA==
"@types/zrender@*":
version "4.0.0"
resolved "https://registry.npmjs.org/@types/zrender/-/zrender-4.0.0.tgz#a6806f12ec4eccaaebd9b0d816f049aca6188fbd"
integrity sha512-s89GOIeKFiod2KSqHkfd2rzx+T2DVu7ihZCBEBnhFrzvQPUmzvDSBot9Fi1DfMQm9Odg+rTqoMGC38RvrwJK2w==
"@typescript-eslint/eslint-plugin@^1.4.2":
version "1.4.2"
resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-1.4.2.tgz#370bc32022d1cc884a5dcf62624ef2024182769d"
@ -2156,26 +2168,6 @@ 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.3:
version "2.7.3"
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.7.3.tgz#cdb61618830bf216dc887e2f7b1b3c228b73c57e"
dependencies:
chartjs-color "^2.1.0"
moment "^2.10.2"
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.1.0:
version "2.2.0"
resolved "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.2.0.tgz#84a2fb755787ed85c39dd6dd8c7b1d88429baeae"
dependencies:
chartjs-color-string "^0.5.0"
color-convert "^0.5.3"
chokidar@^2.0.0:
version "2.1.2"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.2.tgz#9c23ea40b01638439e0513864d362aeacc5ad058"
@ -2317,10 +2309,6 @@ 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, color-convert@^1.9.1:
version "1.9.3"
resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@ -3146,6 +3134,13 @@ ecc-jsbn@~0.1.1:
jsbn "~0.1.0"
safer-buffer "^2.1.0"
echarts@^4.1.0:
version "4.1.0"
resolved "https://registry.npmjs.org/echarts/-/echarts-4.1.0.tgz#d588c95f73c1a9928b9c73d5b769751c3185bcdc"
integrity sha512-gP1e1fNnAj9KJpTDLXV21brklbfJlqeINmpQDJCDta9TX3cPoqyQOiDVcEPzbOVHqgBRgTOwNxC5iGwJ89014A==
dependencies:
zrender "4.0.4"
ee-first@1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@ -5865,10 +5860,6 @@ module-deps@^6.0.0:
through2 "^2.0.0"
xtend "^4.0.0"
moment@^2.10.2:
version "2.22.2"
resolved "https://registry.npmjs.org/moment/-/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66"
moment@^2.24.0:
version "2.24.0"
resolved "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
@ -8947,3 +8938,8 @@ yargs@^12.0.2, yargs@^12.0.4:
which-module "^2.0.0"
y18n "^3.2.1 || ^4.0.0"
yargs-parser "^11.1.1"
zrender@4.0.4:
version "4.0.4"
resolved "https://registry.npmjs.org/zrender/-/zrender-4.0.4.tgz#910e60d888f00c9599073f23758dd23345fe48fd"
integrity sha512-03Vd/BDl/cPXp8E61f5+Xbgr/a4vDyFA+uUtUc1s+5KgcPbyY2m+78R/9LQwkR6QwFYHG8qk25Q8ESGs/qpkZw==