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

tweak charts of admin panel

Browse Source
This commit is contained in:
Pig Fang 2021-08-22 12:04:13 +08:00
parent 014864e47d
commit d98beae262
No known key found for this signature in database
GPG Key ID: A8198F548DADA9E2
5 changed files with 97 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -26,7 +26,7 @@
"blessing-skin-shell": "^0.3.4",
"cac": "^6.6.1",
"cli-spinners": "^2.5.0",
"echarts": "^4.7.0",
"echarts": "^5.1.2",
"events": "^3.2.0",
"immer": "^7.0.4",
"lodash.debounce": "^4.0.8",
@ -56,7 +56,6 @@
"@testing-library/react": "^11.2.6",
"@types/bootstrap": "^4.3.3",
"@types/css-minimizer-webpack-plugin": "^1.1.0",
"@types/echarts": "^4.6.0",
"@types/jest": "^26.0.23",
"@types/jquery": "^3.3.38",
"@types/js-yaml": "^3.12.4",

5
resources/assets/src/styles/admin.css
View File

@ -1,7 +1,10 @@
#chart {
.chart {
width: 100%;
height: 400px;
}
.chart:not(:first-of-type) {
margin-top: 12px;
}
.stats {
font-family: Minecraft;

161
resources/assets/src/views/admin/Dashboard.ts
View File

@ -1,9 +1,12 @@
import 'zrender/lib/svg/svg'
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 * as echarts from 'echarts/core'
import { SVGRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import {
DataZoomComponent,
GridComponent,
TitleComponent,
TooltipComponent,
} from 'echarts/components'
import { get } from '../../scripts/net'
interface ChartData {
@ -12,36 +15,79 @@ interface ChartData {
data: number[][]
}
async function createChart(el: HTMLDivElement) {
interface SingleChartData {
label: string
xAxis: string[]
data: number[]
}
echarts.use([
SVGRenderer,
LineChart,
DataZoomComponent,
GridComponent,
TitleComponent,
TooltipComponent,
])
async function main() {
const elUsersRegistration = document.querySelector<HTMLDivElement>(
'#chart-users-registration',
)
const elTexturesUpload = document.querySelector<HTMLDivElement>(
'#chart-textures-upload',
)
if (!elUsersRegistration || !elTexturesUpload) {
return
}
const isDarkMode = document.body.classList.contains('dark-mode')
const textColor = isDarkMode ? '#fff' : '#000'
const chart = echarts.init(el, void 0, { renderer: 'svg' })
const chartData: ChartData = await get('/admin/chart')
createLineChart(
elUsersRegistration,
isDarkMode ? '#3498db' : '#17a2b8',
textColor,
{
label: chartData.labels[0]!,
xAxis: chartData.xAxis,
data: chartData.data[0]!.map(() => ~~(Math.random() * 300)),
},
)
createLineChart(elTexturesUpload, '#6f42c1', textColor, {
label: chartData.labels[1]!,
xAxis: chartData.xAxis,
data: chartData.data[1]!.map(() => ~~(Math.random() * 300)),
})
}
function createLineChart(
el: HTMLDivElement,
color: string,
textColor: string,
data: SingleChartData,
) {
const chart = echarts.init(el)
chart.setOption({
title: {
text: data.label,
},
textStyle: {
color: textColor,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
},
},
dataZoom: [
{ type: 'inside', start: 75 },
{ type: 'slider', start: 75 },
],
legend: {
data: [],
textStyle: {
color: textColor,
},
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: [],
data: data.xAxis,
},
],
yAxis: [
@ -49,88 +95,23 @@ async function createChart(el: HTMLDivElement) {
type: 'value',
minInterval: 1,
boundaryGap: false,
position: 'left',
splitLine: {
show: false,
},
axisPointer: {
label: {
precision: 0,
},
},
},
{
type: 'value',
minInterval: 1,
boundaryGap: false,
position: 'right',
splitLine: {
show: false,
},
axisPointer: {
label: {
precision: 0,
},
},
},
],
series: [
{
name: '',
name: data.label,
type: 'line',
stack: '',
itemStyle: {
color: '#B5F079',
color,
},
areaStyle: {
color: '#B5F079',
color,
},
data: [],
},
{
name: '',
type: 'line',
stack: '',
itemStyle: {
color: '#6FADEB',
},
areaStyle: {
color: '#6FADEB',
},
data: [],
},
],
})
const chartData: ChartData = await get('/admin/chart')
chart.setOption({
legend: {
data: chartData.labels,
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: chartData.xAxis,
axisLabel: { margin: 16 },
},
],
series: chartData.labels.map(
(label: string, index: number): echarts.EChartOption.SeriesLine => ({
name: label,
type: 'line',
data: chartData.data[index],
data: data.data,
smooth: true,
symbol: 'circle',
yAxisIndex: index,
}),
),
},
],
})
return chart
}
const el = document.querySelector<HTMLDivElement>('#chart')
if (el) {
createChart(el)
}
main()

5
resources/views/admin/widgets/dashboard/chart.twig
View File

@ -2,5 +2,8 @@
<div class="card-header">
<h3 class="card-title">{{ trans('admin.index.overview') }}</h3>
</div>
<div class="card-body"><div id="chart"></div></div>
<div class="card-body">
<div class="chart" id="chart-users-registration"></div>
<div class="chart" id="chart-textures-upload"></div>
</div>
</div>

38
yarn.lock
View File

@ -1375,13 +1375,6 @@
dependencies:
postcss "5 - 7"
"@types/echarts@^4.6.0":
version "4.6.0"
resolved "https://registry.yarnpkg.com/@types/echarts/-/echarts-4.6.0.tgz#0dbf5c35db16ed23f9e61370179989fcd62c2678"
integrity sha512-Unz/VUdQ3KwD3vtCh8bI295F3p6rFSApivwGPQJ1Mu6837xeit7C1YuX+75gRwfahotbaazmG8e2rLBNEzrfFg==
dependencies:
"@types/zrender" "*"
"@types/eslint-scope@^3.7.0":
version "3.7.0"
resolved "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.0.tgz#4792816e31119ebd506902a482caec4951fabd86"
@ -1751,11 +1744,6 @@
dependencies:
"@types/yargs-parser" "*"
"@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@^3.6.0":
version "3.6.0"
resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-3.6.0.tgz#ba2b6cae478b8fca3f2e58ff1313e4198eea2d8a"
@ -3481,12 +3469,13 @@ dot-case@^3.0.3:
no-case "^3.0.3"
tslib "^1.10.0"
echarts@^4.7.0:
version "4.7.0"
resolved "https://registry.yarnpkg.com/echarts/-/echarts-4.7.0.tgz#5b3875a4c2f91e3929425fabab9eace7e4098b3f"
integrity sha512-NlOTdUcAsIyCCG+N4uh0ZEvXtrPW2jvcuqf03RyqYeCKzyPbiOQ4I3MdKXMhxG3lBdqQNdNXVT71SB4KTQjN0A==
echarts@^5.1.2:
version "5.1.2"
resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.1.2.tgz#aa1ab0cef5b74fa2f7c620261a5f286893d30fd1"
integrity sha512-okUhO4sw22vwZp+rTPNjd/bvTdpug4K4sHNHyrV8NdAncIX9/AarlolFqtJCAYKGFYhUBNjIWu1EznFrSWTFxg==
dependencies:
zrender "4.3.0"
tslib "2.0.3"
zrender "5.1.1"
ee-first@1.1.1:
version "1.1.1"
@ -8269,6 +8258,11 @@ ts-node@^10.0.0:
source-map-support "^0.5.17"
yn "3.1.1"
tslib@2.0.3:
version "2.0.3"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c"
integrity sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==
tslib@^1.10.0:
version "1.14.1"
resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
@ -8927,7 +8921,9 @@ yocto-queue@^0.1.0:
resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
zrender@4.3.0:
version "4.3.0"
resolved "https://registry.yarnpkg.com/zrender/-/zrender-4.3.0.tgz#9f056121b20bbae44414d287bf6a119ff7042661"
integrity sha512-Dii6j2bDsPkxQayuVf2DXJeruIB/mKVxxcGRZQ9GExiBd4c3w7+oBuvo1O/JGHeFeA1nCmSDVDs/S7yKZG1nrA==
zrender@5.1.1:
version "5.1.1"
resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.1.1.tgz#0515f4f8cc0f4742f02a6b8819550a6d13d64c5c"
integrity sha512-oeWlmUZPQdS9f5hK4pV21tHPqA3wgQ7CkKkw7l0CCBgWlJ/FP+lRgLFtUBW6yam4JX8y9CdHJo1o587VVrbcoQ==
dependencies:
tslib "2.0.3"