diff --git a/Plan/common/src/main/java/com/djrapitops/plan/system/json/GraphJSONParser.java b/Plan/common/src/main/java/com/djrapitops/plan/system/json/GraphJSONParser.java index 36d83ae15..bec699728 100644 --- a/Plan/common/src/main/java/com/djrapitops/plan/system/json/GraphJSONParser.java +++ b/Plan/common/src/main/java/com/djrapitops/plan/system/json/GraphJSONParser.java @@ -30,11 +30,9 @@ import com.djrapitops.plan.db.access.queries.analysis.PlayerCountQueries; import com.djrapitops.plan.db.access.queries.objects.*; import com.djrapitops.plan.system.database.DBSystem; import com.djrapitops.plan.system.settings.config.PlanConfig; -import com.djrapitops.plan.system.settings.paths.DisplaySettings; import com.djrapitops.plan.system.settings.paths.TimeSettings; import com.djrapitops.plan.utilities.html.graphs.Graphs; import com.djrapitops.plan.utilities.html.graphs.bar.BarGraph; -import com.djrapitops.plan.utilities.html.graphs.line.LineGraph; import com.djrapitops.plan.utilities.html.graphs.line.LineGraphFactory; import com.djrapitops.plan.utilities.html.graphs.line.PingGraph; import com.djrapitops.plan.utilities.html.graphs.line.Point; @@ -97,12 +95,11 @@ public class GraphJSONParser { Database db = dbSystem.getDatabase(); long now = System.currentTimeMillis(); long halfYearAgo = now - TimeUnit.DAYS.toMillis(180L); - Boolean displayGaps = config.get(DisplaySettings.GAPS_IN_GRAPH_DATA); List points = db.query(TPSQueries.fetchPlayersOnlineOfServer(halfYearAgo, now, serverUUID)).stream() .map(point -> new Point(point.getDate(), point.getValue())) .collect(Collectors.toList()); - return "{\"playersOnline\":" + new LineGraph(points, displayGaps).toHighChartsSeries() + '}'; + return "{\"playersOnline\":" + graphs.line().lineGraph(points).toHighChartsSeries() + '}'; } public String uniqueAndNewGraphJSON(UUID serverUUID) { diff --git a/Plan/common/src/main/java/com/djrapitops/plan/utilities/html/graphs/line/LineGraphFactory.java b/Plan/common/src/main/java/com/djrapitops/plan/utilities/html/graphs/line/LineGraphFactory.java index e92a2fc30..9f19d1464 100644 --- a/Plan/common/src/main/java/com/djrapitops/plan/utilities/html/graphs/line/LineGraphFactory.java +++ b/Plan/common/src/main/java/com/djrapitops/plan/utilities/html/graphs/line/LineGraphFactory.java @@ -20,6 +20,7 @@ import com.djrapitops.plan.data.container.Ping; import com.djrapitops.plan.data.store.mutators.TPSMutator; import com.djrapitops.plan.system.settings.config.PlanConfig; import com.djrapitops.plan.system.settings.paths.DisplaySettings; +import com.djrapitops.plan.utilities.comparators.PointComparator; import javax.inject.Inject; import javax.inject.Singleton; @@ -43,6 +44,7 @@ public class LineGraphFactory { } public LineGraph lineGraph(List points) { + points.sort(new PointComparator()); return new LineGraph(points, shouldDisplayGapsInData()); } diff --git a/Plan/common/src/main/resources/assets/plan/web/js/color-selector.js b/Plan/common/src/main/resources/assets/plan/web/js/color-selector.js index fc4380415..174a66b9e 100644 --- a/Plan/common/src/main/resources/assets/plan/web/js/color-selector.js +++ b/Plan/common/src/main/resources/assets/plan/web/js/color-selector.js @@ -101,7 +101,179 @@ } } + function changeHighChartsNightMode() { + try { + console.log(Highcharts.getOptions()); + Highcharts.theme = nightMode ? { + chart: { + backgroundColor: '#44475a', + plotBorderColor: '#606063' + }, + title: { + style: { + color: '#eee8d5' + } + }, + subtitle: { + style: { + color: '#eee8d5' + } + }, + xAxis: { + gridLineColor: '#707073', + labels: { + style: { + color: '#eee8d5' + } + }, + lineColor: '#707073', + minorGridLineColor: '#505053', + tickColor: '#707073', + title: { + style: { + color: '#eee8d5' + } + } + }, + yAxis: { + gridLineColor: '#707073', + labels: { + style: { + color: '#eee8d5' + } + }, + lineColor: '#707073', + minorGridLineColor: '#505053', + tickColor: '#707073', + tickWidth: 1, + title: { + style: { + color: '#eee8d5' + } + } + }, + tooltip: { + backgroundColor: '#44475a', + style: { + color: '#eee8d5' + } + }, + plotOptions: { + series: { + dataLabels: { + color: '#B0B0B3' + }, + marker: { + lineColor: '#333' + } + } + }, + legend: { + itemStyle: { + color: '#eee8d5' + }, + itemHoverStyle: { + color: '#eee8d5' + }, + itemHiddenStyle: { + color: '#606063' + } + }, + labels: { + style: { + color: '#eee8d5' + } + }, + drilldown: { + activeAxisLabelStyle: { + color: '#eee8d5' + }, + activeDataLabelStyle: { + color: '#eee8d5' + } + }, + navigation: { + buttonOptions: { + symbolStroke: '#eee8d5', + theme: { + fill: '#44475a' + } + } + }, + // scroll charts + rangeSelector: { + buttonTheme: { + fill: '#505053', + stroke: '#646e8c', + style: { + color: '#CCC' + }, + states: { + hover: { + fill: '#707073', + stroke: '#000000', + style: { + color: 'white' + } + }, + select: { + fill: '#646e9d', + stroke: '#646e8c', + style: { + color: 'white' + } + } + } + }, + inputBoxBorderColor: '#505053', + inputStyle: { + backgroundColor: '#333', + color: 'silver' + }, + labelStyle: { + color: 'silver' + } + }, + + navigator: { + handles: { + backgroundColor: '#666', + borderColor: '#AAA' + }, + outlineColor: '#CCC', + maskFill: 'rgba(255,255,255,0.1)', + series: { + color: '#7798BF', + lineColor: '#A6C7ED' + }, + xAxis: { + gridLineColor: '#505053' + } + }, + + scrollbar: { + barBackgroundColor: '#808083', + barBorderColor: '#808083', + buttonArrowColor: '#CCC', + buttonBackgroundColor: '#606063', + buttonBorderColor: '#606063', + rifleColor: '#FFF', + trackBackgroundColor: '#404043', + trackBorderColor: '#404043' + } + } : { + chart: { + backgroundColor: '#fff' + } // TODO Get the defaults from print above + }; + Highcharts.setOptions(Highcharts.theme); + updateGraphs(); + } catch (e) { + } + } + changeNightModeCSS(); + changeHighChartsNightMode(); function toggleNightMode() { if (nightMode) { @@ -111,6 +283,7 @@ } window.localStorage.setItem('nightMode', nightMode); changeNightModeCSS(); + changeHighChartsNightMode(); } $('#night-mode-toggle').on('click', toggleNightMode); diff --git a/Plan/common/src/main/resources/assets/plan/web/js/graphs.js b/Plan/common/src/main/resources/assets/plan/web/js/graphs.js index 759957b42..2de686ce8 100644 --- a/Plan/common/src/main/resources/assets/plan/web/js/graphs.js +++ b/Plan/common/src/main/resources/assets/plan/web/js/graphs.js @@ -19,8 +19,10 @@ var linegraphButtons = [{ text: 'All' }]; +var graphs = []; + function activityPie(id, activitySeries) { - Highcharts.chart(id, { + graphs.push(Highcharts.chart(id, { chart: { plotBackgroundColor: null, plotBorderWidth: null, @@ -42,11 +44,11 @@ function activityPie(id, activitySeries) { } }, series: [activitySeries] - }); + })); } function diskChart(id, series) { - Highcharts.stockChart(id, { + graphs.push(Highcharts.stockChart(id, { rangeSelector: { selected: 2, buttons: linegraphButtons @@ -65,11 +67,11 @@ function diskChart(id, series) { enabled: true }, series: series - }); + })); } function horizontalBarChart(id, categories, series, text) { - Highcharts.chart(id, { + graphs.push(Highcharts.chart(id, { chart: { type: 'bar' }, @@ -106,11 +108,11 @@ function horizontalBarChart(id, categories, series, text) { enabled: true }, series: series - }); + })); } function lineChart(id, series) { - Highcharts.stockChart(id, { + graphs.push(Highcharts.stockChart(id, { rangeSelector: { selected: 2, buttons: linegraphButtons @@ -124,7 +126,7 @@ function lineChart(id, series) { enabled: true }, series: series - }); + })); } function onlineActivityCalendar(id, events, firstDay) { @@ -156,7 +158,7 @@ function onlineActivityCalendar(id, events, firstDay) { } function performanceChart(id, playersOnlineSeries, tpsSeries, cpuSeries, ramSeries, entitySeries, chunkSeries) { - Highcharts.stockChart(id, { + graphs.push(Highcharts.stockChart(id, { rangeSelector: { selected: 2, buttons: linegraphButtons @@ -206,11 +208,11 @@ function performanceChart(id, playersOnlineSeries, tpsSeries, cpuSeries, ramSeri enabled: true }, series: [playersOnlineSeries, tpsSeries, cpuSeries, ramSeries, entitySeries, chunkSeries] - }); + })); } function playersChart(id, playersOnlineSeries, sel) { - Highcharts.stockChart(id, { + graphs.push(Highcharts.stockChart(id, { rangeSelector: { selected: sel, buttons: linegraphButtons @@ -226,11 +228,11 @@ function playersChart(id, playersOnlineSeries, sel) { } }, series: [playersOnlineSeries] - }); + })); } function playersChartNoNav(id, playersOnlineSeries) { - Highcharts.stockChart(id, { + graphs.push(Highcharts.stockChart(id, { rangeSelector: { selected: 3, buttons: linegraphButtons @@ -249,11 +251,11 @@ function playersChartNoNav(id, playersOnlineSeries) { } }, series: [playersOnlineSeries] - }); + })); } function punchCard(id, punchcardSeries) { - Highcharts.chart(id, { + graphs.push(Highcharts.chart(id, { chart: { defaultSeriesType: 'scatter' }, @@ -280,11 +282,11 @@ function punchCard(id, punchcardSeries) { pointFormat: 'Activity: {point.z}' }, series: [punchcardSeries] - }); + })); } function resourceChart(id, cpuSeries, ramSeries, playersOnlineSeries) { - Highcharts.stockChart(id, { + graphs.push(Highcharts.stockChart(id, { rangeSelector: { selected: 1, buttons: linegraphButtons @@ -322,11 +324,11 @@ function resourceChart(id, cpuSeries, ramSeries, playersOnlineSeries) { enabled: true }, series: [cpuSeries, ramSeries, playersOnlineSeries] - }); + })); } function serverPie(id, serverSeries) { - Highcharts.chart(id, { + graphs.push(Highcharts.chart(id, { chart: { plotBackgroundColor: null, plotBorderWidth: null, @@ -350,7 +352,7 @@ function serverPie(id, serverSeries) { } }, series: [serverSeries] - }); + })); } function formatTimeAmount(ms) { @@ -411,7 +413,7 @@ function sessionCalendar(id, events, firstDay) { } function stackChart(id, categories, series, label) { - Highcharts.chart(id, { + graphs.push(Highcharts.chart(id, { chart: { type: 'area' }, @@ -448,11 +450,11 @@ function stackChart(id, categories, series, label) { } }, series: series - }); + })); } function tpsChart(id, tpsSeries, playersOnlineSeries) { - Highcharts.stockChart(id, { + graphs.push(Highcharts.stockChart(id, { rangeSelector: { selected: 1, buttons: linegraphButtons @@ -484,11 +486,11 @@ function tpsChart(id, tpsSeries, playersOnlineSeries) { enabled: true }, series: [tpsSeries, playersOnlineSeries] - }); + })); } function worldChart(id, entitySeries, chunkSeries, playersOnlineSeries) { - Highcharts.stockChart(id, { + graphs.push(Highcharts.stockChart(id, { rangeSelector: { selected: 1, buttons: linegraphButtons @@ -526,11 +528,11 @@ function worldChart(id, entitySeries, chunkSeries, playersOnlineSeries) { enabled: true }, series: [entitySeries, chunkSeries, playersOnlineSeries] - }); + })); } function worldMap(id, colorMin, colorMax, mapSeries) { - Highcharts.mapChart(id, { + graphs.push(Highcharts.mapChart(id, { chart: { animation: true }, @@ -548,14 +550,14 @@ function worldMap(id, colorMin, colorMax, mapSeries) { maxColor: colorMax }, series: [mapSeries] - }); + })); } function worldPie(id, worldSeries, gmSeries) { var defaultTitle = ''; var defaultSubtitle = 'Click the slices to view used GameMode'; - var chart = Highcharts.chart(id, { + graphs.push(Highcharts.chart(id, { chart: { plotBackgroundColor: null, plotBorderWidth: null, @@ -595,5 +597,11 @@ function worldPie(id, worldSeries, gmSeries) { return {name: d.name, id: d.id, colors: gmPieColors, data: d.data} }) } - }); + })); +} + +function updateGraphs() { + for (var i = 0; i < graphs.length; i++) { + graphs[i].update(Highcharts.theme) + } } \ No newline at end of file diff --git a/Plan/common/src/main/resources/assets/plan/web/network.html b/Plan/common/src/main/resources/assets/plan/web/network.html index 09ae225d0..6d1d3f092 100644 --- a/Plan/common/src/main/resources/assets/plan/web/network.html +++ b/Plan/common/src/main/resources/assets/plan/web/network.html @@ -1283,11 +1283,6 @@ - - - - - @@ -1298,10 +1293,15 @@ + + + + + - - + + - - - - - - @@ -780,8 +774,14 @@ + + + + + + - - - - - @@ -1368,10 +1363,15 @@ + + + + + - - + +