HighCharts day -> night mode

2025-01-08 17:37:34 +01:00 · 2019-08-15 21:57:47 +03:00 · 2019-08-15 21:57:47 +03:00 · 6b5d44019e
commit 6b5d44019e
parent 3d1e32fe88
7 changed files with 238 additions and 55 deletions
--- 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<Point> 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) {
--- 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<Point> points) {
+        points.sort(new PointComparator());
        return new LineGraph(points, shouldDisplayGapsInData());
    }

--- 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);
--- 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)
+    }
 }
--- 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 @@
 <!-- Core plugin JavaScript-->
 <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

-<!-- Custom scripts for all pages-->
-<script src="js/sb-admin-2.js"></script>
-<script src="js/xmlhttprequests.js"></script>
-<script src="js/color-selector.js"></script>
-
 <!-- Page level plugins -->
 <script src="vendor/datatables/jquery.dataTables.min.js"></script>
 <script src="vendor/datatables/dataTables.bootstrap4.min.js"></script>
@ -1298,10 +1293,15 @@
 <script src="vendor/highcharts/highcharts-more.js"></script>
 <script src="vendor/highcharts/no-data-to-display.js"></script>

+<!-- Custom scripts for all pages-->
+<script src="js/sb-admin-2.js"></script>
+<script src="js/xmlhttprequests.js"></script>
+<script src="js/color-selector.js"></script>
+
 <!-- Page level custom scripts -->
-<script src="js/network-values.js"></script>
-<script src="js/graphs.js"></script>
 <script src="js/sessionAccordion.js"></script>
+<script src="js/graphs.js"></script>
+<script src="js/network-values.js"></script>

 <script>
    setLoadingText('Calculating values..');
--- a/Plan/common/src/main/resources/assets/plan/web/player.html
+++ b/Plan/common/src/main/resources/assets/plan/web/player.html
@ -763,12 +763,6 @@
 <!-- Core plugin JavaScript-->
 <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

-<!-- Custom scripts for all pages-->
-<script src="js/sb-admin-2.js"></script>
-<script src="js/xmlhttprequests.js"></script>
-<script src="js/color-selector.js"></script>
-<script src="js/graphs.js"></script>
-
 <!-- Page level plugins -->
 <script src="vendor/datatables/jquery.dataTables.min.js"></script>
 <script src="vendor/datatables/dataTables.bootstrap4.min.js"></script>
@ -780,8 +774,14 @@
 <script src='vendor/momentjs/moment.js'></script>
 <script src='vendor/fullcalendar/fullcalendar.min.js'></script>

+<!-- Custom scripts for all pages-->
+<script src="js/sb-admin-2.js"></script>
+<script src="js/xmlhttprequests.js"></script>
+<script src="js/color-selector.js"></script>
+
 <!-- Page level custom scripts -->
 <script src="js/sessionAccordion.js"></script>
+<script src="js/graphs.js"></script>
 <script src="js/player-values.js"></script>

 <script>
--- a/Plan/common/src/main/resources/assets/plan/web/server.html
+++ b/Plan/common/src/main/resources/assets/plan/web/server.html
@ -1350,11 +1350,6 @@
 <!-- Core plugin JavaScript-->
 <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

-<!-- Custom scripts for all pages-->
-<script src="js/sb-admin-2.js"></script>
-<script src="js/xmlhttprequests.js"></script>
-<script src="js/color-selector.js"></script>
-
 <!-- Page level plugins -->
 <script src="vendor/datatables/jquery.dataTables.min.js"></script>
 <script src="vendor/datatables/dataTables.bootstrap4.min.js"></script>
@ -1368,10 +1363,15 @@
 <script src='vendor/momentjs/moment.js'></script>
 <script src='vendor/fullcalendar/fullcalendar.min.js'></script>

+<!-- Custom scripts for all pages-->
+<script src="js/sb-admin-2.js"></script>
+<script src="js/xmlhttprequests.js"></script>
+<script src="js/color-selector.js"></script>
+
 <!-- Page level custom scripts -->
-<script src="js/server-values.js"></script>
-<script src="js/graphs.js"></script>
 <script src="js/sessionAccordion.js"></script>
+<script src="js/graphs.js"></script>
+<script src="js/server-values.js"></script>

 <script>
    var x = document.getElementById("content");
@ -1409,10 +1409,13 @@
            tpsHigh: ${tpsHigh},
            diskMed: ${diskMedium},
            diskHigh: ${diskHigh},
-            firstDay: ${firstDay}
+            firstDay: ${firstDay},
+            timezoneOffset: ${timeZone}
        }
    };

+    Highcharts.setOptions({lang: {noData: "No Data to Display"}, time: {timezoneOffset: v.timezoneOffset * 60}});
+
    // HighCharts Series
    var s = {
        name: {