diff --git a/web/views/@default/servers/server/stat/clients.js b/web/views/@default/servers/server/stat/clients.js index f2dbb080..70b33b78 100644 --- a/web/views/@default/servers/server/stat/clients.js +++ b/web/views/@default/servers/server/stat/clients.js @@ -1,111 +1,90 @@ Tea.context(function () { - this.$delay(function () { - let that = this + this.$delay(function () { + let that = this - let systemUnit = this.processMaxUnit(this.systemStats) - this.reloadChart("system-chart", "操作系统", this.systemStats, function (v) { - return v.system.name - }, function (args) { - return that.systemStats[args.dataIndex].system.name + ": " + teaweb.formatNumber(that.systemStats[args.dataIndex].rawCount) - }, systemUnit) - window.addEventListener("resize", function () { - that.resizeChart("system-chart") - }) + let systemAxis = teaweb.countAxis(this.systemStats, function (v) { + return v.count + }) + this.reloadChart("system-chart", "操作系统", this.systemStats, function (v) { + return v.system.name + }, function (args) { + return that.systemStats[args.dataIndex].system.name + ": " + teaweb.formatNumber(that.systemStats[args.dataIndex].count) + }, systemAxis) + window.addEventListener("resize", function () { + that.resizeChart("system-chart") + }) - let browserUnit = this.processMaxUnit(this.browserStats) - this.reloadChart("browser-chart", "浏览器", this.browserStats, function (v) { - return v.browser.name - }, function (args) { - return that.browserStats[args.dataIndex].browser.name + ": " + teaweb.formatNumber(that.browserStats[args.dataIndex].rawCount) - }, browserUnit) + let browserAxis = teaweb.countAxis(this.browserStats, function (v) { + return v.count + }) + this.reloadChart("browser-chart", "浏览器", this.browserStats, function (v) { + return v.browser.name + }, function (args) { + return that.browserStats[args.dataIndex].browser.name + ": " + teaweb.formatNumber(that.browserStats[args.dataIndex].count) + }, browserAxis) - window.addEventListener("resize", function () { - that.resizeChart("system-chart") - that.resizeChart("browser-chart") - }) - }) + window.addEventListener("resize", function () { + that.resizeChart("system-chart") + that.resizeChart("browser-chart") + }) + }) - this.reloadChart = function (chartId, name, stats, xFunc, tooltipFunc, unit) { - let chartBox = document.getElementById(chartId) - if (chartBox == null) { - return - } - let chart = echarts.init(chartBox) - let option = { - xAxis: { - data: stats.map(xFunc), - axisLabel: { - interval: 0 - } - }, - yAxis: { - axisLabel: { - formatter: function (value) { - return value + unit - } - } - }, - tooltip: { - show: true, - trigger: "item", - formatter: tooltipFunc - }, - grid: { - left: 40, - top: 10, - right: 20, - bottom: 20 - }, - series: [ - { - name: name, - type: "bar", - data: stats.map(function (v) { - return v.count; - }), - itemStyle: { - color: "#9DD3E8" - }, - barWidth: "20em" - } - ], - animation: true - } - chart.setOption(option) - chart.resize() - } + this.reloadChart = function (chartId, name, stats, xFunc, tooltipFunc, axis) { + let chartBox = document.getElementById(chartId) + if (chartBox == null) { + return + } + let chart = echarts.init(chartBox) + let option = { + xAxis: { + data: stats.map(xFunc), + axisLabel: { + interval: 0 + } + }, + yAxis: { + axisLabel: { + formatter: function (value) { + return value + axis.unit + } + } + }, + tooltip: { + show: true, + trigger: "item", + formatter: tooltipFunc + }, + grid: { + left: 40, + top: 10, + right: 20, + bottom: 20 + }, + series: [ + { + name: name, + type: "bar", + data: stats.map(function (v) { + return v.count / axis.divider; + }), + itemStyle: { + color: "#9DD3E8" + }, + barWidth: "20em" + } + ], + animation: true + } + chart.setOption(option) + chart.resize() + } - this.resizeChart = function (chartId) { - let chartBox = document.getElementById(chartId) - if (chartBox == null) { - return - } - let chart = echarts.init(chartBox) - chart.resize() - } - - this.processMaxUnit = function (stats) { - let max = stats.$map(function (k, v) { - return v.count - }).$max() - let divider = 0 - let unit = "" - if (max >= 1000 * 1000 * 1000) { - unit = "B" - divider = 1000 * 1000 * 1000 - } else if (max >= 1000 * 1000) { - unit = "M" - divider = 1000 * 1000 - } else if (max >= 1000) { - unit = "K" - divider = 1000 - } - stats.forEach(function (v) { - v.rawCount = v.count - if (divider > 0) { - v.count /= divider - } - }) - return unit - } + this.resizeChart = function (chartId) { + let chartBox = document.getElementById(chartId) + if (chartBox == null) { + return + } + let chart = echarts.init(chartBox) + chart.resize() + } }) diff --git a/web/views/@default/servers/server/stat/providers.js b/web/views/@default/servers/server/stat/providers.js index c780b11c..795cd62e 100644 --- a/web/views/@default/servers/server/stat/providers.js +++ b/web/views/@default/servers/server/stat/providers.js @@ -5,20 +5,17 @@ Tea.context(function () { let axis = teaweb.countAxis(this.providerStats, function (v) { return v.count }) - this.providerStats.forEach(function (v) { - v.count /= axis.divider - }) this.reloadChart("provider-chart", "运营商", this.providerStats, function (v) { return v.provider.name }, function (args) { - return that.providerStats[args.dataIndex].provider.name + ": " + teaweb.formatNumber(that.providerStats[args.dataIndex].rawCount) - }, axis.unit) + return that.providerStats[args.dataIndex].provider.name + ": " + teaweb.formatNumber(that.providerStats[args.dataIndex].count) + }, axis) window.addEventListener("resize", function () { that.resizeChart("provider-chart") }) }) - this.reloadChart = function (chartId, name, stats, xFunc, tooltipFunc, unit) { + this.reloadChart = function (chartId, name, stats, xFunc, tooltipFunc, axis) { let chartBox = document.getElementById(chartId) if (chartBox == null) { return @@ -34,7 +31,7 @@ Tea.context(function () { yAxis: { axisLabel: { formatter: function (value) { - return value + unit + return value + axis.unit } } }, @@ -54,7 +51,7 @@ Tea.context(function () { name: name, type: "bar", data: stats.map(function (v) { - return v.count; + return v.count / axis.divider; }), itemStyle: { color: "#9DD3E8" diff --git a/web/views/@default/servers/server/stat/regions.js b/web/views/@default/servers/server/stat/regions.js index 6fea4a6c..4edbdd32 100644 --- a/web/views/@default/servers/server/stat/regions.js +++ b/web/views/@default/servers/server/stat/regions.js @@ -1,116 +1,100 @@ Tea.context(function () { - this.$delay(function () { - let that = this + this.$delay(function () { + let that = this - let countryUnit = this.processMaxUnit(this.countryStats) - this.reloadChart("country-chart", "地区", this.countryStats, function (v) { - return v.country.name - }, function (args) { - return that.countryStats[args.dataIndex].country.name + ": " + teaweb.formatNumber(that.countryStats[args.dataIndex].rawCount) - }, countryUnit) + // 地区 + let countryAxis = teaweb.countAxis(this.countryStats, function (v) { + return v.count + }) + this.reloadChart("country-chart", "地区", this.countryStats, function (v) { + return v.country.name + }, function (args) { + return that.countryStats[args.dataIndex].country.name + ": " + teaweb.formatNumber(that.countryStats[args.dataIndex].count) + }, countryAxis) - let provinceUnit = this.processMaxUnit(this.provinceStats) - this.reloadChart("province-chart", "省市", this.provinceStats, function (v) { - return v.province.name - }, function (args) { - return that.provinceStats[args.dataIndex].country.name + ": " + that.provinceStats[args.dataIndex].province.name + " " + teaweb.formatNumber(that.provinceStats[args.dataIndex].rawCount) - }, provinceUnit) + // 省份 + let provinceAxis = teaweb.countAxis(this.provinceStats, function (v) { + return v.count + }) + this.reloadChart("province-chart", "省市", this.provinceStats, function (v) { + return v.province.name + }, function (args) { + return that.provinceStats[args.dataIndex].country.name + ": " + that.provinceStats[args.dataIndex].province.name + " " + teaweb.formatNumber(that.provinceStats[args.dataIndex].count) + }, provinceAxis) - let cityUnit = this.processMaxUnit(this.cityStats) - this.reloadChart("city-chart", "城市", this.cityStats, function (v) { - return v.city.name - }, function (args) { - return that.cityStats[args.dataIndex].country.name + ": " + that.cityStats[args.dataIndex].province.name + " " + that.cityStats[args.dataIndex].city.name + " " + teaweb.formatNumber(that.cityStats[args.dataIndex].rawCount) - }, cityUnit) + // 城市 + let cityAxis = teaweb.countAxis(this.cityStats, function (v) { + return v.count + }) + this.reloadChart("city-chart", "城市", this.cityStats, function (v) { + return v.city.name + }, function (args) { + return that.cityStats[args.dataIndex].country.name + ": " + that.cityStats[args.dataIndex].province.name + " " + that.cityStats[args.dataIndex].city.name + " " + teaweb.formatNumber(that.cityStats[args.dataIndex].count) + }, cityAxis) - window.addEventListener("resize", function () { - that.resizeChart("country-chart") - that.resizeChart("province-chart") - that.resizeChart("city-chart") - }) - }) + window.addEventListener("resize", function () { + that.resizeChart("country-chart") + that.resizeChart("province-chart") + that.resizeChart("city-chart") + }) + }) - this.reloadChart = function (chartId, name, stats, xFunc, tooltipFunc, unit) { - let chartBox = document.getElementById(chartId) - if (chartBox == null) { - return - } - let chart = echarts.init(chartBox) - let option = { - xAxis: { - data: stats.map(xFunc), - axisLabel: { - interval: 0 - } - }, - yAxis: { - axisLabel: { - formatter: function (value) { - return value + unit - } - } - }, - tooltip: { - show: true, - trigger: "item", - formatter: tooltipFunc - }, - grid: { - left: 40, - top: 10, - right: 20, - bottom: 20 - }, - series: [ - { - name: name, - type: "bar", - data: stats.map(function (v) { - return v.count; - }), - itemStyle: { - color: "#9DD3E8" - }, - barWidth: "20em" - } - ], - animation: true - } - chart.setOption(option) - chart.resize() - } + this.reloadChart = function (chartId, name, stats, xFunc, tooltipFunc, axis) { + let chartBox = document.getElementById(chartId) + if (chartBox == null) { + return + } + let chart = echarts.init(chartBox) + let option = { + xAxis: { + data: stats.map(xFunc), + axisLabel: { + interval: 0 + } + }, + yAxis: { + axisLabel: { + formatter: function (value) { + return value + axis.unit + } + } + }, + tooltip: { + show: true, + trigger: "item", + formatter: tooltipFunc + }, + grid: { + left: 40, + top: 10, + right: 20, + bottom: 20 + }, + series: [ + { + name: name, + type: "bar", + data: stats.map(function (v) { + return v.count / axis.divider; + }), + itemStyle: { + color: "#9DD3E8" + }, + barWidth: "20em" + } + ], + animation: true + } + chart.setOption(option) + chart.resize() + } - this.resizeChart = function (chartId) { - let chartBox = document.getElementById(chartId) - if (chartBox == null) { - return - } - let chart = echarts.init(chartBox) - chart.resize() - } - - this.processMaxUnit = function (stats) { - let max = stats.$map(function (k, v) { - return v.count - }).$max() - let divider = 0 - let unit = "" - if (max >= 1000 * 1000 * 1000) { - unit = "B" - divider = 1000 * 1000 * 1000 - } else if (max >= 1000 * 1000) { - unit = "M" - divider = 1000 * 1000 - } else if (max >= 1000) { - unit = "K" - divider = 1000 - } - stats.forEach(function (v) { - v.rawCount = v.count - if (divider > 0) { - v.count /= divider - } - }) - return unit - } + this.resizeChart = function (chartId) { + let chartBox = document.getElementById(chartId) + if (chartBox == null) { + return + } + let chart = echarts.init(chartBox) + chart.resize() + } })