From d98beae26237ce6a3a4b34a61d7d50e7185c4dbf Mon Sep 17 00:00:00 2001 From: Pig Fang Date: Sun, 22 Aug 2021 12:04:13 +0800 Subject: [PATCH] tweak charts of admin panel --- package.json | 3 +- resources/assets/src/styles/admin.css | 5 +- resources/assets/src/views/admin/Dashboard.ts | 161 ++++++++---------- .../views/admin/widgets/dashboard/chart.twig | 5 +- yarn.lock | 38 ++--- 5 files changed, 97 insertions(+), 115 deletions(-) diff --git a/package.json b/package.json index cb44dffb..abc95240 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/resources/assets/src/styles/admin.css b/resources/assets/src/styles/admin.css index b2ecc36e..49210d22 100644 --- a/resources/assets/src/styles/admin.css +++ b/resources/assets/src/styles/admin.css @@ -1,7 +1,10 @@ -#chart { +.chart { width: 100%; height: 400px; } +.chart:not(:first-of-type) { + margin-top: 12px; +} .stats { font-family: Minecraft; diff --git a/resources/assets/src/views/admin/Dashboard.ts b/resources/assets/src/views/admin/Dashboard.ts index a31ed08d..6fdf2522 100644 --- a/resources/assets/src/views/admin/Dashboard.ts +++ b/resources/assets/src/views/admin/Dashboard.ts @@ -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( + '#chart-users-registration', + ) + const elTexturesUpload = document.querySelector( + '#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('#chart') -if (el) { - createChart(el) -} +main() diff --git a/resources/views/admin/widgets/dashboard/chart.twig b/resources/views/admin/widgets/dashboard/chart.twig index e8f2c22c..482b5f4b 100644 --- a/resources/views/admin/widgets/dashboard/chart.twig +++ b/resources/views/admin/widgets/dashboard/chart.twig @@ -2,5 +2,8 @@

{{ trans('admin.index.overview') }}

-
+
+
+
+
diff --git a/yarn.lock b/yarn.lock index 68ef9225..7275b263 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"