From 984f7ee28da41128ad4f8e05edac2f15a8a0ea31 Mon Sep 17 00:00:00 2001 From: hal-wang Date: Mon, 25 Jan 2021 19:11:46 +0800 Subject: [PATCH] On-demand including --- web/babel.config.js | 19 ++- web/package.json | 3 +- web/src/main.js | 8 +- web/src/utils/chart.js | 18 ++- web/src/utils/element-ui.js | 47 +++++++ web/src/utils/macarons.js | 240 ++++++++++++++++++++++++++++++++++++ 6 files changed, 316 insertions(+), 19 deletions(-) create mode 100644 web/src/utils/element-ui.js create mode 100644 web/src/utils/macarons.js diff --git a/web/babel.config.js b/web/babel.config.js index 716b0237..2f8796b9 100644 --- a/web/babel.config.js +++ b/web/babel.config.js @@ -1,3 +1,20 @@ module.exports = { - presets: ['@vue/cli-plugin-babel/preset'] + presets: [ + [ + '@vue/cli-plugin-babel/preset', + { + modules: false + } + ] + ], + plugins: [ + [ + 'component', + { + libraryName: 'element-ui', + styleLibraryName: 'theme-chalk' + } + ], + 'equire' + ] } diff --git a/web/package.json b/web/package.json index 9205629b..322af3d1 100644 --- a/web/package.json +++ b/web/package.json @@ -28,7 +28,8 @@ "@vue/cli-plugin-vuex": "~4.5.9", "@vue/cli-service": "~4.5.9", "@vue/eslint-config-standard": "^5.1.2", - "babel-eslint": "^10.1.0", + "babel-plugin-component": "^1.1.1", + "babel-plugin-equire": "^1.1.1", "eslint": "^7.14.0", "eslint-plugin-import": "^2.22.1", "eslint-plugin-node": "^11.1.0", diff --git a/web/src/main.js b/web/src/main.js index 05773bac..c5cecb2c 100644 --- a/web/src/main.js +++ b/web/src/main.js @@ -1,8 +1,4 @@ import Vue from 'vue' -import ElementUI from 'element-ui' -import lang from 'element-ui/lib/locale/lang/en' -import locale from 'element-ui/lib/locale' -import 'element-ui/lib/theme-chalk/index.css' import '@/icons' import '@/styles/index.scss' @@ -11,9 +7,7 @@ import router from './router' import store from '@/store' import 'whatwg-fetch' -locale.use(lang) - -Vue.use(ElementUI) +import '@/utils/element-ui' import fetch from '@/utils/fetch' Vue.prototype.$fetch = fetch diff --git a/web/src/utils/chart.js b/web/src/utils/chart.js index 3b6fe4e0..cc6bf744 100644 --- a/web/src/utils/chart.js +++ b/web/src/utils/chart.js @@ -1,11 +1,9 @@ import Humanize from 'humanize-plus' -import echarts from 'echarts/lib/echarts' -import 'echarts/theme/macarons' -import 'echarts/lib/chart/bar' -import 'echarts/lib/chart/pie' -import 'echarts/lib/component/tooltip' -import 'echarts/lib/component/title' +// eslint-disable-next-line +const echarts = equire(['bar', 'legend', 'title', 'tooltip', 'pie']) + +import './macarons' function DrawTrafficChart(elementId, trafficIn, trafficOut) { const myChart = echarts.init(document.getElementById(elementId), 'macarons') @@ -19,7 +17,7 @@ function DrawTrafficChart(elementId, trafficIn, trafficOut) { }, tooltip: { trigger: 'item', - formatter: function(v) { + formatter: function (v) { return Humanize.fileSize(v.data.value) + ' (' + v.percent + '%)' } }, @@ -82,7 +80,7 @@ function DrawProxyChart(elementId, serverInfo) { }, tooltip: { trigger: 'item', - formatter: function(v) { + formatter: function (v) { return v.data.value } }, @@ -157,7 +155,7 @@ function DrawProxyTrafficChart(elementId, trafficInArr, trafficOutArr) { axisPointer: { type: 'shadow' }, - formatter: function(data) { + formatter: function (data) { let html = '' if (data.length > 0) { html += data[0].name + '
' @@ -189,7 +187,7 @@ function DrawProxyTrafficChart(elementId, trafficInArr, trafficOutArr) { { type: 'value', axisLabel: { - formatter: function(value) { + formatter: function (value) { return Humanize.fileSize(value) } } diff --git a/web/src/utils/element-ui.js b/web/src/utils/element-ui.js new file mode 100644 index 00000000..cb605677 --- /dev/null +++ b/web/src/utils/element-ui.js @@ -0,0 +1,47 @@ +import lang from 'element-ui/lib/locale/lang/en' +import locale from 'element-ui/lib/locale' +import 'element-ui/lib/theme-chalk/index.css' +import Vue from 'vue' + +locale.use(lang) + +import { + Button, + Input, + Message, + Form, + FormItem, + Col, + Row, + Breadcrumb, + BreadcrumbItem, + Menu, + MenuItem, + Submenu, + Scrollbar, + Table, + TableColumn, + Tag, + Popover, + MessageBox +} from 'element-ui' + +Vue.use(Button) +Vue.use(Input) +Vue.use(Form) +Vue.use(FormItem) +Vue.use(Col) +Vue.use(Row) +Vue.use(Breadcrumb) +Vue.use(BreadcrumbItem) +Vue.use(Menu) +Vue.use(MenuItem) +Vue.use(Submenu) +Vue.use(Scrollbar) +Vue.use(Table) +Vue.use(TableColumn) +Vue.use(Tag) +Vue.use(Popover) + +Vue.prototype.$message = Message +Vue.prototype.$confirm = MessageBox.confirm diff --git a/web/src/utils/macarons.js b/web/src/utils/macarons.js new file mode 100644 index 00000000..cbd7efb9 --- /dev/null +++ b/web/src/utils/macarons.js @@ -0,0 +1,240 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +/* eslint-disable no-undef */ +// eslint-disable-next-line no-extra-semi +const echarts = equire(['bar', 'legend', 'title', 'tooltip', 'pie']) // On-demand including +;(function(root, factory) { + if (typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module. + define(['exports', 'echarts'], factory) + } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') { + // CommonJS + factory(exports, echarts) + } else { + // Browser globals + factory({}, echarts) + } +})(this, function(exports, echarts) { + var log = function(msg) { + if (typeof console !== 'undefined') { + console && console.error && console.error(msg) + } + } + if (!echarts) { + log('ECharts is not Loaded') + return + } + + var colorPalette = [ + '#2ec7c9', + '#b6a2de', + '#5ab1ef', + '#ffb980', + '#d87a80', + '#8d98b3', + '#e5cf0d', + '#97b552', + '#95706d', + '#dc69aa', + '#07a2a4', + '#9a7fd1', + '#588dd5', + '#f5994e', + '#c05050', + '#59678c', + '#c9ab00', + '#7eb00a', + '#6f5553', + '#c14089' + ] + + var theme = { + color: colorPalette, + + title: { + textStyle: { + fontWeight: 'normal', + color: '#008acd' + } + }, + + visualMap: { + itemWidth: 15, + color: ['#5ab1ef', '#e0ffff'] + }, + + toolbox: { + iconStyle: { + normal: { + borderColor: colorPalette[0] + } + } + }, + + tooltip: { + backgroundColor: 'rgba(50,50,50,0.5)', + axisPointer: { + type: 'line', + lineStyle: { + color: '#008acd' + }, + crossStyle: { + color: '#008acd' + }, + shadowStyle: { + color: 'rgba(200,200,200,0.2)' + } + } + }, + + dataZoom: { + dataBackgroundColor: '#efefff', + fillerColor: 'rgba(182,162,222,0.2)', + handleColor: '#008acd' + }, + + grid: { + borderColor: '#eee' + }, + + categoryAxis: { + axisLine: { + lineStyle: { + color: '#008acd' + } + }, + splitLine: { + lineStyle: { + color: ['#eee'] + } + } + }, + + valueAxis: { + axisLine: { + lineStyle: { + color: '#008acd' + } + }, + splitArea: { + show: true, + areaStyle: { + color: ['rgba(250,250,250,0.1)', 'rgba(200,200,200,0.1)'] + } + }, + splitLine: { + lineStyle: { + color: ['#eee'] + } + } + }, + + timeline: { + lineStyle: { + color: '#008acd' + }, + controlStyle: { + color: '#008acd', + borderColor: '#008acd' + }, + symbol: 'emptyCircle', + symbolSize: 3 + }, + + line: { + smooth: true, + symbol: 'emptyCircle', + symbolSize: 3 + }, + + candlestick: { + itemStyle: { + color: '#d87a80', + color0: '#2ec7c9' + }, + lineStyle: { + width: 1, + color: '#d87a80', + color0: '#2ec7c9' + }, + areaStyle: { + color: '#2ec7c9', + color0: '#b6a2de' + } + }, + + scatter: { + symbol: 'circle', + symbolSize: 4 + }, + + map: { + itemStyle: { + color: '#ddd' + }, + areaStyle: { + color: '#fe994e' + }, + label: { + color: '#d87a80' + } + }, + + graph: { + itemStyle: { + color: '#d87a80' + }, + linkStyle: { + color: '#2ec7c9' + } + }, + + gauge: { + axisLine: { + lineStyle: { + color: [ + [0.2, '#2ec7c9'], + [0.8, '#5ab1ef'], + [1, '#d87a80'] + ], + width: 10 + } + }, + axisTick: { + splitNumber: 10, + length: 15, + lineStyle: { + color: 'auto' + } + }, + splitLine: { + length: 22, + lineStyle: { + color: 'auto' + } + }, + pointer: { + width: 5 + } + } + } + + echarts.registerTheme('macarons', theme) +})