From 252136fabfed744830d79db3a10c42782760512c Mon Sep 17 00:00:00 2001 From: Rsl1122 Date: Sun, 9 Jun 2019 11:33:37 +0300 Subject: [PATCH] Added chart files and tested players chart --- .../assets/plan/web/css/sb-admin-2.css | 4 +- .../assets/plan/web/js/charts/activityPie.js | 25 ++++ .../assets/plan/web/js/charts/diskGraph.js | 41 ++++++ .../assets/plan/web/js/charts/healthGauge.js | 101 +++++++++++++ .../plan/web/js/charts/horizontalBarGraph.js | 40 ++++++ .../assets/plan/web/js/charts/lineGraph.js | 36 +++++ .../web/js/charts/onlineActivityCalendar.js | 28 ++++ .../plan/web/js/charts/performanceGraph.js | 72 ++++++++++ .../assets/plan/web/js/charts/playerGraph.js | 38 +++++ .../plan/web/js/charts/playerGraphNoNav.js | 41 ++++++ .../assets/plan/web/js/charts/punchCard.js | 30 ++++ .../plan/web/js/charts/resourceGraph.js | 60 ++++++++ .../assets/plan/web/js/charts/serverPie.js | 53 +++++++ .../plan/web/js/charts/sessionCalendar.js | 30 ++++ .../assets/plan/web/js/charts/stackGraph.js | 40 ++++++ .../assets/plan/web/js/charts/tpsGraph.js | 54 +++++++ .../assets/plan/web/js/charts/worldGraph.js | 60 ++++++++ .../assets/plan/web/js/charts/worldMap.js | 21 +++ .../assets/plan/web/js/charts/worldPie.js | 70 +++++++++ .../resources/assets/plan/web/server.html | 136 +++++++++++++++++- 20 files changed, 973 insertions(+), 7 deletions(-) create mode 100644 Plan/common/src/main/resources/assets/plan/web/js/charts/activityPie.js create mode 100644 Plan/common/src/main/resources/assets/plan/web/js/charts/diskGraph.js create mode 100644 Plan/common/src/main/resources/assets/plan/web/js/charts/healthGauge.js create mode 100644 Plan/common/src/main/resources/assets/plan/web/js/charts/horizontalBarGraph.js create mode 100644 Plan/common/src/main/resources/assets/plan/web/js/charts/lineGraph.js create mode 100644 Plan/common/src/main/resources/assets/plan/web/js/charts/onlineActivityCalendar.js create mode 100644 Plan/common/src/main/resources/assets/plan/web/js/charts/performanceGraph.js create mode 100644 Plan/common/src/main/resources/assets/plan/web/js/charts/playerGraph.js create mode 100644 Plan/common/src/main/resources/assets/plan/web/js/charts/playerGraphNoNav.js create mode 100644 Plan/common/src/main/resources/assets/plan/web/js/charts/punchCard.js create mode 100644 Plan/common/src/main/resources/assets/plan/web/js/charts/resourceGraph.js create mode 100644 Plan/common/src/main/resources/assets/plan/web/js/charts/serverPie.js create mode 100644 Plan/common/src/main/resources/assets/plan/web/js/charts/sessionCalendar.js create mode 100644 Plan/common/src/main/resources/assets/plan/web/js/charts/stackGraph.js create mode 100644 Plan/common/src/main/resources/assets/plan/web/js/charts/tpsGraph.js create mode 100644 Plan/common/src/main/resources/assets/plan/web/js/charts/worldGraph.js create mode 100644 Plan/common/src/main/resources/assets/plan/web/js/charts/worldMap.js create mode 100644 Plan/common/src/main/resources/assets/plan/web/js/charts/worldPie.js diff --git a/Plan/common/src/main/resources/assets/plan/web/css/sb-admin-2.css b/Plan/common/src/main/resources/assets/plan/web/css/sb-admin-2.css index 6bf0163ef..5857803b0 100644 --- a/Plan/common/src/main/resources/assets/plan/web/css/sb-admin-2.css +++ b/Plan/common/src/main/resources/assets/plan/web/css/sb-admin-2.css @@ -12084,13 +12084,13 @@ a:focus { .chart-area { position: relative; - height: 10rem; + height: 12rem; width: 100%; } @media (min-width: 768px) { .chart-area { - height: 20rem; + height: 22rem; } } diff --git a/Plan/common/src/main/resources/assets/plan/web/js/charts/activityPie.js b/Plan/common/src/main/resources/assets/plan/web/js/charts/activityPie.js new file mode 100644 index 000000000..48e61be79 --- /dev/null +++ b/Plan/common/src/main/resources/assets/plan/web/js/charts/activityPie.js @@ -0,0 +1,25 @@ +function activityPie(id, activitySeries) { + Highcharts.chart(id, { + chart: { + plotBackgroundColor: null, + plotBorderWidth: null, + plotShadow: false, + type: 'pie' + }, + title: {text: ''}, + tooltip: { + pointFormat: '{series.name}: {point.y}' + }, + plotOptions: { + pie: { + allowPointSelect: true, + cursor: 'pointer', + dataLabels: { + enabled: false + }, + showInLegend: true + } + }, + series: [activitySeries] + }); +} \ No newline at end of file diff --git a/Plan/common/src/main/resources/assets/plan/web/js/charts/diskGraph.js b/Plan/common/src/main/resources/assets/plan/web/js/charts/diskGraph.js new file mode 100644 index 000000000..93a9d27a6 --- /dev/null +++ b/Plan/common/src/main/resources/assets/plan/web/js/charts/diskGraph.js @@ -0,0 +1,41 @@ +function diskChart(id, series) { + Highcharts.stockChart(id, { + rangeSelector: { + selected: 2, + buttons: [{ + type: 'hour', + count: 12, + text: '12h' + }, { + type: 'hour', + count: 24, + text: '24h' + }, { + type: 'day', + count: 7, + text: '7d' + }, { + type: 'month', + count: 1, + text: '30d' + }, { + type: 'all', + text: 'All' + }] + }, + yAxis: { + labels: { + formatter: function () { + return this.value + ' Mb'; + } + }, + softMax: 2, + softMin: 0 + }, + title: {text: ''}, + legend: { + enabled: true + }, + series: series + }); +} \ No newline at end of file diff --git a/Plan/common/src/main/resources/assets/plan/web/js/charts/healthGauge.js b/Plan/common/src/main/resources/assets/plan/web/js/charts/healthGauge.js new file mode 100644 index 000000000..a060370bf --- /dev/null +++ b/Plan/common/src/main/resources/assets/plan/web/js/charts/healthGauge.js @@ -0,0 +1,101 @@ +function healthGauge(id, healthData) { + var gaugeOptions = { + + chart: { + type: 'solidgauge' + }, + + title: null, + + pane: { + center: ['50%', '85%'], + size: '140%', + startAngle: -90, + endAngle: 90, + background: { + backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE', + innerRadius: '60%', + outerRadius: '100%', + shape: 'arc' + } + }, + + tooltip: { + enabled: false + }, + + // the value axis + yAxis: { + stops: [ + [0.1, '#DF5353'], // red + [0.5, '#DDDF0D'], // yellow + [0.9, '#55BF3B'] // green + ], + lineWidth: 0, + minorTickInterval: null, + tickAmount: 2, + title: { + y: -70 + }, + labels: { + y: 16 + } + }, + + plotOptions: { + solidgauge: { + dataLabels: { + y: 5, + borderWidth: 0, + useHTML: true + } + } + } + }; + + var chartSpeed = Highcharts.chart(id, Highcharts.merge(gaugeOptions, { + yAxis: { + min: 0, + max: 100, + title: { + text: 'Server Health' + }, + visible: false + }, + + credits: { + enabled: false + }, + + series: [{ + name: 'health', + data: healthData, + dataLabels: { + formatter: function () { + return '
' + (this.y).toFixed(2) + '
' + + '' + getLabel(this.y) + '
'; + } + } + }] + + })); +} + +function getLabel(index) { + if (index >= 80) { + return 'Very Healthy'; + } + if (index >= 60) { + return 'Healthy'; + } + if (index >= 50) { + return 'Good'; + } + if (index >= 30) { + return 'OK'; + } + if (index >= 0) { + return 'Poor'; + } +} \ No newline at end of file diff --git a/Plan/common/src/main/resources/assets/plan/web/js/charts/horizontalBarGraph.js b/Plan/common/src/main/resources/assets/plan/web/js/charts/horizontalBarGraph.js new file mode 100644 index 000000000..f4566f3e5 --- /dev/null +++ b/Plan/common/src/main/resources/assets/plan/web/js/charts/horizontalBarGraph.js @@ -0,0 +1,40 @@ +function horizontalBarChart(id, categories, series, text) { + Highcharts.chart(id, { + chart: { + type: 'bar' + }, + title: { + text: '' + }, + xAxis: { + categories: categories, + title: { + text: null + } + }, + yAxis: { + min: 0, + title: { + text: text, + align: 'high' + }, + labels: { + overflow: 'justify' + } + }, + legend: { + enabled: false + }, + plotOptions: { + bar: { + dataLabels: { + enabled: true + } + } + }, + credits: { + enabled: true + }, + series: series + }); +} \ No newline at end of file diff --git a/Plan/common/src/main/resources/assets/plan/web/js/charts/lineGraph.js b/Plan/common/src/main/resources/assets/plan/web/js/charts/lineGraph.js new file mode 100644 index 000000000..3dc505205 --- /dev/null +++ b/Plan/common/src/main/resources/assets/plan/web/js/charts/lineGraph.js @@ -0,0 +1,36 @@ +function lineChart(id, series) { + Highcharts.stockChart(id, { + rangeSelector: { + selected: 2, + buttons: [{ + type: 'hour', + count: 12, + text: '12h' + }, { + type: 'hour', + count: 24, + text: '24h' + }, { + type: 'day', + count: 7, + text: '7d' + }, { + type: 'month', + count: 1, + text: '30d' + }, { + type: 'all', + text: 'All' + }] + }, + yAxis: { + softMax: 2, + softMin: 0 + }, + title: {text: ''}, + legend: { + enabled: true + }, + series: series + }); +} \ No newline at end of file diff --git a/Plan/common/src/main/resources/assets/plan/web/js/charts/onlineActivityCalendar.js b/Plan/common/src/main/resources/assets/plan/web/js/charts/onlineActivityCalendar.js new file mode 100644 index 000000000..4d3c64074 --- /dev/null +++ b/Plan/common/src/main/resources/assets/plan/web/js/charts/onlineActivityCalendar.js @@ -0,0 +1,28 @@ +function onlineActivityCalendar(id, events, firstDay) { + $(id).fullCalendar({ + eventColor: '#2196F3', + firstDay: firstDay, + + eventRender: function (eventObj, $el) { + $el.popover({ + content: eventObj.title, + trigger: 'hover', + placement: 'top', + container: 'body' + }); + }, + + events: events, + + height: 'parent', + header: { + left: 'title', + center: '', + right: 'month prev,next' + } + }); + + setTimeout(function () { + $(id).fullCalendar('render') + }, 1000); +} \ No newline at end of file diff --git a/Plan/common/src/main/resources/assets/plan/web/js/charts/performanceGraph.js b/Plan/common/src/main/resources/assets/plan/web/js/charts/performanceGraph.js new file mode 100644 index 000000000..4914a317a --- /dev/null +++ b/Plan/common/src/main/resources/assets/plan/web/js/charts/performanceGraph.js @@ -0,0 +1,72 @@ +function performanceChart(id, playersOnlineSeries, tpsSeries, cpuSeries, ramSeries, entitySeries, chunkSeries) { + Highcharts.stockChart(id, { + rangeSelector: { + selected: 2, + buttons: [{ + type: 'hour', + count: 12, + text: '12h' + }, { + type: 'hour', + count: 24, + text: '24h' + }, { + type: 'day', + count: 7, + text: '7d' + }, { + type: 'month', + count: 1, + text: '30d' + }, { + type: 'all', + text: 'All' + }] + }, + title: {text: ''}, + yAxis: [{ + labels: { + formatter: function () { + return this.value + ' P'; + } + } + }, { + opposite: true, + labels: { + formatter: function () { + return this.value + ' TPS'; + } + } + }, { + opposite: true, + labels: { + formatter: function () { + return this.value + '%'; + } + } + }, { + labels: { + formatter: function () { + return this.value + ' MB'; + } + } + }, { + opposite: true, + labels: { + formatter: function () { + return this.value + ' E'; + } + } + }, { + labels: { + formatter: function () { + return this.value + ' C'; + } + } + }], + legend: { + enabled: true + }, + series: [playersOnlineSeries, tpsSeries, cpuSeries, ramSeries, entitySeries, chunkSeries] + }); +} \ No newline at end of file diff --git a/Plan/common/src/main/resources/assets/plan/web/js/charts/playerGraph.js b/Plan/common/src/main/resources/assets/plan/web/js/charts/playerGraph.js new file mode 100644 index 000000000..d5bf20ad5 --- /dev/null +++ b/Plan/common/src/main/resources/assets/plan/web/js/charts/playerGraph.js @@ -0,0 +1,38 @@ +function playersChart(id, playersOnlineSeries, sel) { + Highcharts.stockChart(id, { + rangeSelector: { + selected: sel, + buttons: [{ + type: 'hour', + count: 12, + text: '12h' + }, { + type: 'hour', + count: 24, + text: '24h' + }, { + type: 'day', + count: 7, + text: '7d' + }, { + type: 'month', + count: 1, + text: '30d' + }, { + type: 'all', + text: 'All' + }] + }, + yAxis: { + softMax: 2, + softMin: 0 + }, + title: {text: ''}, + plotOptions: { + areaspline: { + fillOpacity: 0.4 + } + }, + series: [playersOnlineSeries] + }); +} \ No newline at end of file diff --git a/Plan/common/src/main/resources/assets/plan/web/js/charts/playerGraphNoNav.js b/Plan/common/src/main/resources/assets/plan/web/js/charts/playerGraphNoNav.js new file mode 100644 index 000000000..2b08045d5 --- /dev/null +++ b/Plan/common/src/main/resources/assets/plan/web/js/charts/playerGraphNoNav.js @@ -0,0 +1,41 @@ +function playersChartNoNav(id, playersOnlineSeries) { + Highcharts.stockChart(id, { + rangeSelector: { + selected: 3, + buttons: [{ + type: 'hour', + count: 12, + text: '12h' + }, { + type: 'hour', + count: 24, + text: '24h' + }, { + type: 'day', + count: 7, + text: '7d' + }, { + type: 'month', + count: 1, + text: '30d' + }, { + type: 'all', + text: 'All' + }] + }, + navigator: { + enabled: false + }, + yAxis: { + softMax: 2, + softMin: 0 + }, + title: {text: ''}, + plotOptions: { + areaspline: { + fillOpacity: 0.4 + } + }, + series: [playersOnlineSeries] + }); +} \ No newline at end of file diff --git a/Plan/common/src/main/resources/assets/plan/web/js/charts/punchCard.js b/Plan/common/src/main/resources/assets/plan/web/js/charts/punchCard.js new file mode 100644 index 000000000..f7c3280f9 --- /dev/null +++ b/Plan/common/src/main/resources/assets/plan/web/js/charts/punchCard.js @@ -0,0 +1,30 @@ +function punchCard(id, punchcardSeries) { + Highcharts.chart(id, { + chart: { + defaultSeriesType: 'scatter' + }, + title: {text: ''}, + xAxis: { + type: 'datetime', + dateTimeLabelFormats: { + hour: '%I %P', + day: '%H %P' + }, + tickInterval: 3600000 + }, + time: { + timezoneOffset: 0 + }, + yAxis: { + title: { + text: "Day of the Week" + }, + reversed: true, + categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'] + }, + tooltip: { + pointFormat: 'Activity: {point.z}' + }, + series: [punchcardSeries] + }); +} \ No newline at end of file diff --git a/Plan/common/src/main/resources/assets/plan/web/js/charts/resourceGraph.js b/Plan/common/src/main/resources/assets/plan/web/js/charts/resourceGraph.js new file mode 100644 index 000000000..723bb00f7 --- /dev/null +++ b/Plan/common/src/main/resources/assets/plan/web/js/charts/resourceGraph.js @@ -0,0 +1,60 @@ +function resourceChart(id, cpuSeries, ramSeries, playersOnlineSeries) { + Highcharts.stockChart(id, { + rangeSelector: { + selected: 1, + buttons: [{ + type: 'hour', + count: 12, + text: '12h' + }, { + type: 'hour', + count: 24, + text: '24h' + }, { + type: 'day', + count: 7, + text: '7d' + }, { + type: 'month', + count: 1, + text: '30d' + }, { + type: 'all', + text: 'All' + }] + }, + tooltip: { + split: true + }, + title: {text: ''}, + plotOptions: { + areaspline: { + fillOpacity: 0.4 + } + }, + yAxis: [{ + labels: { + formatter: function () { + return this.value + ' Players'; + } + } + }, { + opposite: true, + labels: { + formatter: function () { + return this.value + '%'; + } + } + }, { + labels: { + formatter: function () { + return this.value + ' Mb'; + } + } + }], + legend: { + enabled: true + }, + series: [cpuSeries, ramSeries, playersOnlineSeries] + }); +} \ No newline at end of file diff --git a/Plan/common/src/main/resources/assets/plan/web/js/charts/serverPie.js b/Plan/common/src/main/resources/assets/plan/web/js/charts/serverPie.js new file mode 100644 index 000000000..e94a809f1 --- /dev/null +++ b/Plan/common/src/main/resources/assets/plan/web/js/charts/serverPie.js @@ -0,0 +1,53 @@ +function serverPie(id, serverSeries) { + Highcharts.chart(id, { + chart: { + plotBackgroundColor: null, + plotBorderWidth: null, + plotShadow: false, + type: 'pie' + }, + title: {text: ''}, + plotOptions: { + pie: { + allowPointSelect: true, + cursor: 'pointer', + dataLabels: { + enabled: false + }, + showInLegend: true + } + }, + tooltip: { + formatter: function () { + return '' + this.point.name + ': ' + formatTimeAmount(this.y) + ' (' + this.percentage.toFixed(2) + '%)'; + } + }, + series: [serverSeries] + }); +} + +function formatTimeAmount(ms) { + var out = ""; + + var seconds = Math.floor(ms / 1000); + + var dd = Math.floor(seconds / 86400); + seconds -= (dd * 86400); + var dh = Math.floor(seconds / 3600); + seconds -= (dh * 3600); + var dm = Math.floor(seconds / 60); + seconds -= (dm * 60); + seconds = Math.floor(seconds); + if (dd !== 0) { + out += dd.toString() + "d "; + } + if (dh !== 0) { + out += dh.toString() + "h "; + } + if (dm !== 0) { + out += dm.toString() + "m "; + } + out += seconds.toString() + "s "; + + return out; +} \ No newline at end of file diff --git a/Plan/common/src/main/resources/assets/plan/web/js/charts/sessionCalendar.js b/Plan/common/src/main/resources/assets/plan/web/js/charts/sessionCalendar.js new file mode 100644 index 000000000..d12c02d97 --- /dev/null +++ b/Plan/common/src/main/resources/assets/plan/web/js/charts/sessionCalendar.js @@ -0,0 +1,30 @@ +function sessionCalendar(id, events, firstDay) { + $(id).fullCalendar({ + eventColor: '#009688', + eventLimit: 4, + firstDay: firstDay, + + eventRender: function (eventObj, $el) { + $el.popover({ + content: eventObj.title, + trigger: 'hover', + placement: 'top', + container: 'body' + }); + }, + + events: events, + + navLinks: true, + height: 'parent', + header: { + left: 'title', + center: '', + right: 'month agendaWeek agendaDay today prev,next' + } + }); + + setTimeout(function () { + $(id).fullCalendar('render') + }, 1000); +} \ No newline at end of file diff --git a/Plan/common/src/main/resources/assets/plan/web/js/charts/stackGraph.js b/Plan/common/src/main/resources/assets/plan/web/js/charts/stackGraph.js new file mode 100644 index 000000000..23efde59d --- /dev/null +++ b/Plan/common/src/main/resources/assets/plan/web/js/charts/stackGraph.js @@ -0,0 +1,40 @@ +function stackChart(id, categories, series, label) { + Highcharts.chart(id, { + chart: { + type: 'area' + }, + title: { + text: '' + }, + xAxis: { + categories: categories, + tickmarkPlacement: 'on', + title: { + enabled: false + } + }, + yAxis: { + title: { + text: label + }, + labels: { + formatter: function () { + return this.value; + } + }, + softMax: 2, + softMin: 0 + }, + tooltip: { + split: true, + valueSuffix: ' ' + label + }, + plotOptions: { + area: { + stacking: 'normal', + lineWidth: 1 + } + }, + series: series + }); +} \ No newline at end of file diff --git a/Plan/common/src/main/resources/assets/plan/web/js/charts/tpsGraph.js b/Plan/common/src/main/resources/assets/plan/web/js/charts/tpsGraph.js new file mode 100644 index 000000000..5985a1566 --- /dev/null +++ b/Plan/common/src/main/resources/assets/plan/web/js/charts/tpsGraph.js @@ -0,0 +1,54 @@ +function tpsChart(id, tpsSeries, playersOnlineSeries) { + Highcharts.stockChart(id, { + rangeSelector: { + selected: 1, + buttons: [{ + type: 'hour', + count: 12, + text: '12h' + }, { + type: 'hour', + count: 24, + text: '24h' + }, { + type: 'day', + count: 7, + text: '7d' + }, { + type: 'month', + count: 1, + text: '30d' + }, { + type: 'all', + text: 'All' + }] + }, + tooltip: { + split: true + }, + title: {text: ''}, + plotOptions: { + areaspline: { + fillOpacity: 0.4 + } + }, + yAxis: [{ + labels: { + formatter: function () { + return this.value + ' Players'; + } + } + }, { + opposite: true, + labels: { + formatter: function () { + return this.value + ' TPS'; + } + } + }], + legend: { + enabled: true + }, + series: [tpsSeries, playersOnlineSeries] + }); +} \ No newline at end of file diff --git a/Plan/common/src/main/resources/assets/plan/web/js/charts/worldGraph.js b/Plan/common/src/main/resources/assets/plan/web/js/charts/worldGraph.js new file mode 100644 index 000000000..32b85cc66 --- /dev/null +++ b/Plan/common/src/main/resources/assets/plan/web/js/charts/worldGraph.js @@ -0,0 +1,60 @@ +function worldChart(id, entitySeries, chunkSeries, playersOnlineSeries) { + Highcharts.stockChart(id, { + rangeSelector: { + selected: 1, + buttons: [{ + type: 'hour', + count: 12, + text: '12h' + }, { + type: 'hour', + count: 24, + text: '24h' + }, { + type: 'day', + count: 7, + text: '7d' + }, { + type: 'month', + count: 1, + text: '30d' + }, { + type: 'all', + text: 'All' + }] + }, + tooltip: { + split: true + }, + title: {text: ''}, + plotOptions: { + areaspline: { + fillOpacity: 0.4 + } + }, + yAxis: [{ + labels: { + formatter: function () { + return this.value + ' Players'; + } + } + }, { + opposite: true, + labels: { + formatter: function () { + return this.value + ' Entities'; + } + } + }, { + labels: { + formatter: function () { + return this.value + ' Chunks'; + } + } + }], + legend: { + enabled: true + }, + series: [entitySeries, chunkSeries, playersOnlineSeries] + }); +} \ No newline at end of file diff --git a/Plan/common/src/main/resources/assets/plan/web/js/charts/worldMap.js b/Plan/common/src/main/resources/assets/plan/web/js/charts/worldMap.js new file mode 100644 index 000000000..4fc5ed8bf --- /dev/null +++ b/Plan/common/src/main/resources/assets/plan/web/js/charts/worldMap.js @@ -0,0 +1,21 @@ +function worldMap(id, colorMin, colorMax, mapSeries) { + Highcharts.mapChart(id, { + chart: { + animation: true + }, + title: {text: ''}, + + mapNavigation: { + enabled: true, + enableDoubleClickZoomTo: true + }, + + colorAxis: { + min: 1, + type: 'logarithmic', + minColor: colorMin, + maxColor: colorMax + }, + series: [mapSeries] + }); +} \ No newline at end of file diff --git a/Plan/common/src/main/resources/assets/plan/web/js/charts/worldPie.js b/Plan/common/src/main/resources/assets/plan/web/js/charts/worldPie.js new file mode 100644 index 000000000..e00c5b447 --- /dev/null +++ b/Plan/common/src/main/resources/assets/plan/web/js/charts/worldPie.js @@ -0,0 +1,70 @@ +function worldPie(id, worldSeries, gmSeries) { + var defaultTitle = ''; + var defaultSubtitle = 'Click the slices to view used GameMode'; + + var chart = Highcharts.chart(id, { + chart: { + plotBackgroundColor: null, + plotBorderWidth: null, + plotShadow: false, + type: 'pie', + events: { + drilldown: function (e) { + chart.setTitle({text: '' + e.point.name}, {text: ''}); + }, + drillup: function (e) { + chart.setTitle({text: defaultTitle}, {text: defaultSubtitle}); + } + } + }, + title: {text: defaultTitle}, + subtitle: { + text: defaultSubtitle + }, + plotOptions: { + pie: { + allowPointSelect: true, + cursor: 'pointer', + dataLabels: { + enabled: false + }, + showInLegend: true + } + }, + tooltip: { + formatter: function () { + return '' + this.point.name + ': ' + formatTimeAmount(this.y) + ' (' + this.percentage.toFixed(2) + '%)'; + } + }, + series: [worldSeries], + drilldown: { + series: gmSeries + } + }); +} + +function formatTimeAmount(ms) { + var out = ""; + + var seconds = Math.floor(ms / 1000); + + var dd = Math.floor(seconds / 86400); + seconds -= (dd * 86400); + var dh = Math.floor(seconds / 3600); + seconds -= (dh * 3600); + var dm = Math.floor(seconds / 60); + seconds -= (dm * 60); + seconds = Math.floor(seconds); + if (dd !== 0) { + out += dd.toString() + "d "; + } + if (dh !== 0) { + out += dh.toString() + "h "; + } + if (dm !== 0) { + out += dm.toString() + "m "; + } + out += seconds.toString() + "s "; + + return out; +} \ No newline at end of file diff --git a/Plan/common/src/main/resources/assets/plan/web/server.html b/Plan/common/src/main/resources/assets/plan/web/server.html index 085d3b702..d7008d20c 100644 --- a/Plan/common/src/main/resources/assets/plan/web/server.html +++ b/Plan/common/src/main/resources/assets/plan/web/server.html @@ -25,10 +25,13 @@ - +
-

Please wait.. + Please wait..

@@ -172,9 +175,7 @@ class="fas fa-fw fa-chart-area col-blue"> Online Activity -
- -
+
@@ -1482,9 +1483,17 @@ + + + + + + + +