From 4c53a9a406eccdf9dd41186e2f1c3626e8f68ffc Mon Sep 17 00:00:00 2001 From: Aurora Lahtela <24460436+AuroraLS3@users.noreply.github.com> Date: Sat, 27 Aug 2022 22:26:30 +0300 Subject: [PATCH] Enabled React server page in Frontend BETA Various fixes to React frontend - Implemented Extension DataTables table support - Fixed colors in night mode - Fixed DataTables night mode - Fixed chart opacity in night mode (HighCharts doesn't like hsl values) - Fixed color selector buttons in night mode - Translated Login button - Added license to package.json - Changed Extension endpoint table representation to objects to allow value formatting --- .../datatransfer/extension/TableCellDto.java | 71 +++++++++++++++++ .../datatransfer/extension/TableDto.java | 14 ++-- .../html/structure/DynamicHtmlTable.java | 1 + .../rendering/html/structure/HtmlTable.java | 15 ++-- .../structure/HtmlTableWithColoredHeader.java | 16 ++-- .../delivery/rendering/pages/PageFactory.java | 6 ++ Plan/react/dashboard/package.json | 1 + .../components/accordion/SessionAccordion.js | 3 +- .../components/extensions/ExtensionCard.js | 29 +------ .../components/extensions/ExtensionIcon.js | 4 + .../components/extensions/ExtensionTable.js | 77 +++++++++++++++++++ .../src/components/graphs/LineGraph.js | 6 +- .../src/components/graphs/PlayerPingGraph.js | 11 ++- .../src/components/graphs/PunchCard.js | 7 +- .../src/components/graphs/TimeByTimeGraph.js | 9 ++- .../graphs/performance/AllPerformanceGraph.js | 4 +- .../performance/CpuRamPerformanceGraph.js | 4 +- .../performance/DiskPerformanceGraph.js | 8 +- .../graphs/performance/TpsPerformanceGraph.js | 4 +- .../performance/WorldPerformanceGraph.js | 4 +- .../components/modal/ColorSelectorModal.js | 2 +- .../src/components/table/DataTablesTable.js | 5 +- Plan/react/dashboard/src/style/style.css | 24 ++++++ Plan/react/dashboard/src/util/colors.js | 2 +- .../dashboard/src/views/layout/LoginPage.js | 2 +- 25 files changed, 251 insertions(+), 78 deletions(-) create mode 100644 Plan/common/src/main/java/com/djrapitops/plan/delivery/domain/datatransfer/extension/TableCellDto.java create mode 100644 Plan/react/dashboard/src/components/extensions/ExtensionTable.js diff --git a/Plan/common/src/main/java/com/djrapitops/plan/delivery/domain/datatransfer/extension/TableCellDto.java b/Plan/common/src/main/java/com/djrapitops/plan/delivery/domain/datatransfer/extension/TableCellDto.java new file mode 100644 index 000000000..440e6e149 --- /dev/null +++ b/Plan/common/src/main/java/com/djrapitops/plan/delivery/domain/datatransfer/extension/TableCellDto.java @@ -0,0 +1,71 @@ +/* + * This file is part of Player Analytics (Plan). + * + * Plan is free software: you can redistribute it and/or modify + * it under the terms of the GNU Lesser General Public License v3 as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * Plan is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with Plan. If not, see . + */ +package com.djrapitops.plan.delivery.domain.datatransfer.extension; + +import org.jetbrains.annotations.Nullable; + +import java.util.Objects; + +/** + * @author AuroraLS3 + */ +public class TableCellDto { + + private final String value; + @Nullable + private final Object valueUnformatted; + + public TableCellDto(String value) { + this.value = value; + this.valueUnformatted = null; + } + + public TableCellDto(String value, @Nullable Object valueUnformatted) { + this.value = value; + this.valueUnformatted = valueUnformatted; + } + + public String getValue() { + return value; + } + + @Nullable + public Object getValueUnformatted() { + return valueUnformatted; + } + + @Override + public boolean equals(Object o) { + if (this == o) return true; + if (o == null || getClass() != o.getClass()) return false; + TableCellDto that = (TableCellDto) o; + return Objects.equals(getValue(), that.getValue()) && Objects.equals(getValueUnformatted(), that.getValueUnformatted()); + } + + @Override + public int hashCode() { + return Objects.hash(getValue(), getValueUnformatted()); + } + + @Override + public String toString() { + return "TableCellDto{" + + "value='" + value + '\'' + + ", valueUnformatted=" + valueUnformatted + + '}'; + } +} diff --git a/Plan/common/src/main/java/com/djrapitops/plan/delivery/domain/datatransfer/extension/TableDto.java b/Plan/common/src/main/java/com/djrapitops/plan/delivery/domain/datatransfer/extension/TableDto.java index 050e8bc21..d2b099500 100644 --- a/Plan/common/src/main/java/com/djrapitops/plan/delivery/domain/datatransfer/extension/TableDto.java +++ b/Plan/common/src/main/java/com/djrapitops/plan/delivery/domain/datatransfer/extension/TableDto.java @@ -30,7 +30,7 @@ public class TableDto { private final List columns; private final List icons; - private final List> rows; + private final List> rows; public TableDto(Table table) { columns = Arrays.stream(table.getColumns()) @@ -46,17 +46,17 @@ public class TableDto { .collect(Collectors.toList()); } - private List constructRow(List columns, Object[] row) { - List constructedRow = new ArrayList<>(); + private List constructRow(List columns, TableCellDto[] row) { + List constructedRow = new ArrayList<>(); int headerLength = row.length - 1; int columnCount = columns.size(); for (int i = 0; i < columnCount; i++) { if (i > headerLength) { - constructedRow.add("-"); + constructedRow.add(new TableCellDto("-")); } else { - Object value = row[i]; - constructedRow.add(value != null ? value : '-'); + TableCellDto cell = row[i]; + constructedRow.add(cell != null ? cell : new TableCellDto("-")); } } return constructedRow; @@ -70,7 +70,7 @@ public class TableDto { return icons; } - public List> getRows() { + public List> getRows() { return rows; } diff --git a/Plan/common/src/main/java/com/djrapitops/plan/delivery/rendering/html/structure/DynamicHtmlTable.java b/Plan/common/src/main/java/com/djrapitops/plan/delivery/rendering/html/structure/DynamicHtmlTable.java index bb5c6fa3e..b8074ef00 100644 --- a/Plan/common/src/main/java/com/djrapitops/plan/delivery/rendering/html/structure/DynamicHtmlTable.java +++ b/Plan/common/src/main/java/com/djrapitops/plan/delivery/rendering/html/structure/DynamicHtmlTable.java @@ -23,6 +23,7 @@ import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.List; +@Deprecated public class DynamicHtmlTable implements HtmlTable { private final Header[] headers; private final List rows; diff --git a/Plan/common/src/main/java/com/djrapitops/plan/delivery/rendering/html/structure/HtmlTable.java b/Plan/common/src/main/java/com/djrapitops/plan/delivery/rendering/html/structure/HtmlTable.java index 7985de0f0..3ae9b80b7 100644 --- a/Plan/common/src/main/java/com/djrapitops/plan/delivery/rendering/html/structure/HtmlTable.java +++ b/Plan/common/src/main/java/com/djrapitops/plan/delivery/rendering/html/structure/HtmlTable.java @@ -16,6 +16,7 @@ */ package com.djrapitops.plan.delivery.rendering.html.structure; +import com.djrapitops.plan.delivery.domain.datatransfer.extension.TableCellDto; import com.djrapitops.plan.delivery.formatting.Formatters; import com.djrapitops.plan.delivery.rendering.html.Html; import com.djrapitops.plan.delivery.rendering.html.icon.Color; @@ -25,8 +26,10 @@ import com.djrapitops.plan.extension.table.TableColumnFormat; import java.util.ArrayList; import java.util.List; +import java.util.Objects; import java.util.stream.Collectors; +@Deprecated public interface HtmlTable { static HtmlTable fromExtensionTable(Table table, com.djrapitops.plan.extension.icon.Color tableColor) { @@ -57,25 +60,25 @@ public interface HtmlTable { return headers.toArray(new Header[0]); } - static List mapToRows(List rows, TableColumnFormat[] tableColumnFormats) { + static List mapToRows(List rows, TableColumnFormat[] tableColumnFormats) { return rows.stream() .map(row -> { - List mapped = new ArrayList<>(row.length); + List mapped = new ArrayList<>(row.length); for (int i = 0; i < row.length; i++) { Object value = row[i]; if (value == null) { mapped.add(null); } else { TableColumnFormat format = tableColumnFormats[i]; - mapped.add(applyFormat(format, value)); + mapped.add(new TableCellDto(applyFormat(format, value), value)); } } - return mapped.toArray(); + return mapped.toArray(new TableCellDto[0]); }) .collect(Collectors.toList()); } - static Object applyFormat(TableColumnFormat format, Object value) { + static String applyFormat(TableColumnFormat format, Object value) { try { switch (format) { case TIME_MILLISECONDS: @@ -90,7 +93,7 @@ public interface HtmlTable { return Html.swapColorCodesToSpan(value.toString()); } } catch (Exception e) { - return value; + return Objects.toString(value); } } diff --git a/Plan/common/src/main/java/com/djrapitops/plan/delivery/rendering/html/structure/HtmlTableWithColoredHeader.java b/Plan/common/src/main/java/com/djrapitops/plan/delivery/rendering/html/structure/HtmlTableWithColoredHeader.java index 263667815..ff3a1fb99 100644 --- a/Plan/common/src/main/java/com/djrapitops/plan/delivery/rendering/html/structure/HtmlTableWithColoredHeader.java +++ b/Plan/common/src/main/java/com/djrapitops/plan/delivery/rendering/html/structure/HtmlTableWithColoredHeader.java @@ -16,17 +16,19 @@ */ package com.djrapitops.plan.delivery.rendering.html.structure; +import com.djrapitops.plan.delivery.domain.datatransfer.extension.TableCellDto; import com.djrapitops.plan.delivery.rendering.html.icon.Color; import com.djrapitops.plan.extension.table.Table; import java.util.List; +@Deprecated public class HtmlTableWithColoredHeader implements HtmlTable { private final Header[] headers; private final Color headerColor; - private final List rows; + private final List rows; - public HtmlTableWithColoredHeader(Header[] headers, Color headerColor, List rows) { + public HtmlTableWithColoredHeader(Header[] headers, Color headerColor, List rows) { this.headers = headers; this.headerColor = headerColor; this.rows = rows; @@ -63,15 +65,15 @@ public class HtmlTableWithColoredHeader implements HtmlTable { StringBuilder builtBody = new StringBuilder(); builtBody.append(""); if (rows.isEmpty()) { - appendRow(builtBody, "No Data"); + appendRow(builtBody, new TableCellDto("No Data")); } - for (Object[] row : rows) { + for (TableCellDto[] row : rows) { appendRow(builtBody, row); } return builtBody.append("").toString(); } - private void appendRow(StringBuilder builtBody, Object... row) { + private void appendRow(StringBuilder builtBody, TableCellDto... row) { int headerLength = row.length - 1; builtBody.append(""); for (int i = 0; i < headers.length; i++) { @@ -80,8 +82,8 @@ public class HtmlTableWithColoredHeader implements HtmlTable { builtBody.append("-"); } else { builtBody.append(""); - Object value = row[i]; - builtBody.append(value != null ? value : '-'); + TableCellDto cell = row[i]; + builtBody.append(cell != null ? cell.getValue() : '-'); } builtBody.append(""); } catch (ClassCastException | ArrayIndexOutOfBoundsException e) { diff --git a/Plan/common/src/main/java/com/djrapitops/plan/delivery/rendering/pages/PageFactory.java b/Plan/common/src/main/java/com/djrapitops/plan/delivery/rendering/pages/PageFactory.java index 30e622ae9..35d96af8b 100644 --- a/Plan/common/src/main/java/com/djrapitops/plan/delivery/rendering/pages/PageFactory.java +++ b/Plan/common/src/main/java/com/djrapitops/plan/delivery/rendering/pages/PageFactory.java @@ -107,6 +107,12 @@ public class PageFactory { public Page serverPage(ServerUUID serverUUID) throws IOException { Server server = dbSystem.get().getDatabase().query(ServerQueries.fetchServerMatchingIdentifier(serverUUID)) .orElseThrow(() -> new NotFoundException("Server not found in the database")); + + if (config.get().isTrue(PluginSettings.FRONTEND_BETA)) { + String reactHtml = getResource("index.html"); + return () -> reactHtml; + } + return new ServerPage( getResource("server.html"), server, diff --git a/Plan/react/dashboard/package.json b/Plan/react/dashboard/package.json index 54fef9ff7..20e32cf59 100644 --- a/Plan/react/dashboard/package.json +++ b/Plan/react/dashboard/package.json @@ -1,4 +1,5 @@ { + "license": "LGPL-3.0-or-later", "name": "dashboard", "version": "0.1.0", "private": true, diff --git a/Plan/react/dashboard/src/components/accordion/SessionAccordion.js b/Plan/react/dashboard/src/components/accordion/SessionAccordion.js index 48a61adc2..b3a5081aa 100644 --- a/Plan/react/dashboard/src/components/accordion/SessionAccordion.js +++ b/Plan/react/dashboard/src/components/accordion/SessionAccordion.js @@ -9,6 +9,7 @@ import KillsTable from "../table/KillsTable"; import Accordion from "./Accordion"; import {useTranslation} from "react-i18next"; import {baseAddress} from "../../service/backendConfiguration"; +import {ChartLoader} from "../navigation/Loader"; const SessionHeader = ({session}) => { return ( @@ -88,7 +89,7 @@ const SessionAccordion = ( ) => { const {t} = useTranslation(); - if (!sessions) return <> + if (!sessions) return const firstColumn = isPlayer ? (<> {t('html.label.player')}) : (<> {t('html.label.server')}) diff --git a/Plan/react/dashboard/src/components/extensions/ExtensionCard.js b/Plan/react/dashboard/src/components/extensions/ExtensionCard.js index e1077f29a..960c24188 100644 --- a/Plan/react/dashboard/src/components/extensions/ExtensionCard.js +++ b/Plan/react/dashboard/src/components/extensions/ExtensionCard.js @@ -3,8 +3,7 @@ import {Card, Col} from "react-bootstrap-v5"; import ExtensionIcon from "./ExtensionIcon"; import Datapoint from "../Datapoint"; import Masonry from 'masonry-layout' -import {useTheme} from "../../hooks/themeHook"; -import {useTranslation} from "react-i18next"; +import ExtensionTable from "./ExtensionTable"; export const ExtensionCardWrapper = ({extension, children}) => { const [windowWidth, setWindowWidth] = useState(window.innerWidth); @@ -65,32 +64,6 @@ const ExtensionValues = ({tab}) => { ) } -const ExtensionTable = ({table}) => { - const {nightModeEnabled} = useTheme(); - const {t} = useTranslation(); - - const columns = table.table.rows.length ? table.table.rows.map((row, i) => {row.map((value, j) => {value})}) : - {table.table.columns.map((column, i) => - {i === 0 ? t('generic.noData') : '-'})} - - - return ( - - - - {table.table.columns.map((column, i) => )} - - - - {columns} - -
{column} -
- ) -} - const ExtensionTables = ({tab}) => { return (<> {tab.tableData.map((table, i) => ( diff --git a/Plan/react/dashboard/src/components/extensions/ExtensionIcon.js b/Plan/react/dashboard/src/components/extensions/ExtensionIcon.js index e3025a898..87a54894c 100644 --- a/Plan/react/dashboard/src/components/extensions/ExtensionIcon.js +++ b/Plan/react/dashboard/src/components/extensions/ExtensionIcon.js @@ -11,4 +11,8 @@ const ExtensionIcon = ({icon}) => ( /> ) +export const toExtensionIconHtmlString = ({icon}) => { + return icon ? `` : ''; +} + export default ExtensionIcon; diff --git a/Plan/react/dashboard/src/components/extensions/ExtensionTable.js b/Plan/react/dashboard/src/components/extensions/ExtensionTable.js new file mode 100644 index 000000000..d8196f1e8 --- /dev/null +++ b/Plan/react/dashboard/src/components/extensions/ExtensionTable.js @@ -0,0 +1,77 @@ +import React, {useState} from 'react'; +import {useTheme} from "../../hooks/themeHook"; +import {useTranslation} from "react-i18next"; +import ExtensionIcon, {toExtensionIconHtmlString} from "./ExtensionIcon"; +import DataTablesTable from "../table/DataTablesTable"; + +const ExtensionDataTable = ({table}) => { + const [id] = useState("extension-table-" + new Date().getTime() + "-" + (Math.floor(Math.random() * 100000))); + + const data = { + columns: table.table.columns.map((column, i) => { + return { + title: toExtensionIconHtmlString(table.table.icons[i]) + ' ' + column, + data: { + "_": `col${i}.v`, + display: `col${i}.d` + }, + }; + }), + data: table.table.rows.map((row) => { + const dataRow = {}; + row.forEach((cell, j) => dataRow[`col${j}`] = { + v: cell['valueUnformatted'] || cell.value || cell, + d: cell.value || cell + }); + return dataRow; + }) + }; + const options = { + responsive: true, + deferRender: true, + columns: data.columns, + data: data.data, + order: [[1, "desc"]] + } + return ( + + ) +} + +const ExtensionColoredTable = ({table}) => { + const {nightModeEnabled} = useTheme(); + const {t} = useTranslation(); + + const rows = table.table.rows.length ? table.table.rows.map((row, i) => {row.map((value, j) => {value.value || String(value)})}) : + {table.table.columns.map((column, i) => + {i === 0 ? t('generic.noData') : '-'})} + + + return ( + + + + {table.table.columns.map((column, i) => )} + + + + {rows} + +
{column} +
+ ) +} + +const ExtensionTable = ({table}) => { + const tableLength = table.table.rows.length; + + if (tableLength > 25) { + return + } else { + return + } +} + +export default ExtensionTable \ No newline at end of file diff --git a/Plan/react/dashboard/src/components/graphs/LineGraph.js b/Plan/react/dashboard/src/components/graphs/LineGraph.js index a5dff1ef8..6d05db467 100644 --- a/Plan/react/dashboard/src/components/graphs/LineGraph.js +++ b/Plan/react/dashboard/src/components/graphs/LineGraph.js @@ -8,7 +8,7 @@ import {useTranslation} from "react-i18next"; const LineGraph = ({id, series}) => { const {t} = useTranslation() - const {graphTheming} = useTheme(); + const {graphTheming, nightModeEnabled} = useTheme(); useEffect(() => { NoDataDisplay(Highcharts); @@ -27,12 +27,12 @@ const LineGraph = ({id, series}) => { title: {text: ''}, plotOptions: { areaspline: { - fillOpacity: 0.4 + fillOpacity: nightModeEnabled ? 0.2 : 0.4 } }, series: series }) - }, [series, graphTheming, id, t]) + }, [series, graphTheming, id, t, nightModeEnabled]) return (
diff --git a/Plan/react/dashboard/src/components/graphs/PlayerPingGraph.js b/Plan/react/dashboard/src/components/graphs/PlayerPingGraph.js index 689458744..92cc3f8d2 100644 --- a/Plan/react/dashboard/src/components/graphs/PlayerPingGraph.js +++ b/Plan/react/dashboard/src/components/graphs/PlayerPingGraph.js @@ -2,10 +2,13 @@ import React, {useEffect, useState} from "react"; import {useTranslation} from "react-i18next"; import {tooltip} from "../../util/graphs"; import LineGraph from "./LineGraph"; +import {useTheme} from "../../hooks/themeHook"; +import {withReducedSaturation} from "../../util/colors"; const PlayerPingGraph = ({data}) => { const {t} = useTranslation(); const [series, setSeries] = useState([]); + const {nightModeEnabled} = useTheme(); useEffect(() => { const avgPingSeries = { @@ -13,23 +16,23 @@ const PlayerPingGraph = ({data}) => { type: 'spline', tooltip: tooltip.twoDecimals, data: data.avg_ping_series, - color: data.colors.avg + color: nightModeEnabled ? withReducedSaturation(data.colors.avg) : data.colors.avg } const maxPingSeries = { name: t('html.label.worstPing'), type: 'spline', tooltip: tooltip.twoDecimals, data: data.max_ping_series, - color: data.colors.max + color: nightModeEnabled ? withReducedSaturation(data.colors.max) : data.colors.max } const minPingSeries = { name: t('html.label.bestPing'), type: 'spline', tooltip: tooltip.twoDecimals, data: data.min_ping_series, - color: data.colors.min + color: nightModeEnabled ? withReducedSaturation(data.colors.min) : data.colors.min } - setSeries([avgPingSeries, maxPingSeries, minPingSeries]); + setSeries([avgPingSeries, maxPingSeries, minPingSeries, nightModeEnabled]); }, [data, t]) return ( diff --git a/Plan/react/dashboard/src/components/graphs/PunchCard.js b/Plan/react/dashboard/src/components/graphs/PunchCard.js index de1b7af7a..8b8b45ddf 100644 --- a/Plan/react/dashboard/src/components/graphs/PunchCard.js +++ b/Plan/react/dashboard/src/components/graphs/PunchCard.js @@ -3,14 +3,15 @@ import Highcharts from 'highcharts'; import {useTheme} from "../../hooks/themeHook"; import {useTranslation} from "react-i18next"; import Accessibility from "highcharts/modules/accessibility"; +import {withReducedSaturation} from "../../util/colors"; const PunchCard = ({series}) => { const {t} = useTranslation(); - const {graphTheming} = useTheme(); + const {graphTheming, nightModeEnabled} = useTheme(); useEffect(() => { const punchCard = { name: t('html.label.relativeJoinActivity'), - color: '#222', + color: nightModeEnabled ? withReducedSaturation('#222') : '#222', data: series }; Accessibility(Highcharts); @@ -46,7 +47,7 @@ const PunchCard = ({series}) => { }, series: [punchCard] }), 25) - }, [series, graphTheming, t]) + }, [series, graphTheming, t, nightModeEnabled]) return (
diff --git a/Plan/react/dashboard/src/components/graphs/TimeByTimeGraph.js b/Plan/react/dashboard/src/components/graphs/TimeByTimeGraph.js index fca0889a4..23c979320 100644 --- a/Plan/react/dashboard/src/components/graphs/TimeByTimeGraph.js +++ b/Plan/react/dashboard/src/components/graphs/TimeByTimeGraph.js @@ -2,10 +2,13 @@ import {useTranslation} from "react-i18next"; import React, {useEffect, useState} from "react"; import {tooltip} from "../../util/graphs"; import LineGraph from "./LineGraph"; +import {useTheme} from "../../hooks/themeHook"; +import {withReducedSaturation} from "../../util/colors"; const TimeByTimeGraph = ({data}) => { const {t} = useTranslation(); const [series, setSeries] = useState([]); + const {nightModeEnabled} = useTheme(); useEffect(() => { const uniquePlayers = { @@ -13,16 +16,16 @@ const TimeByTimeGraph = ({data}) => { type: 'spline', tooltip: tooltip.zeroDecimals, data: data.uniquePlayers, - color: data.colors.playersOnline + color: nightModeEnabled ? withReducedSaturation(data.colors.playersOnline) : data.colors.playersOnline }; const newPlayers = { name: t('html.label.newPlayers'), type: 'spline', tooltip: tooltip.zeroDecimals, data: data.newPlayers, - color: data.colors.newPlayers + color: nightModeEnabled ? withReducedSaturation(data.colors.newPlayers) : data.colors.newPlayers }; - setSeries([uniquePlayers, newPlayers]); + setSeries([uniquePlayers, newPlayers, nightModeEnabled]); }, [data, t]) return ( diff --git a/Plan/react/dashboard/src/components/graphs/performance/AllPerformanceGraph.js b/Plan/react/dashboard/src/components/graphs/performance/AllPerformanceGraph.js index b03f673d0..59c6b9a46 100644 --- a/Plan/react/dashboard/src/components/graphs/performance/AllPerformanceGraph.js +++ b/Plan/react/dashboard/src/components/graphs/performance/AllPerformanceGraph.js @@ -110,7 +110,7 @@ const AllPerformanceGraph = ({id, data, dataSeries}) => { type: 'areaspline', tooltip: tooltip.zeroDecimals, data: dataSeries.playersOnline, - color: nightModeEnabled ? withReducedSaturation(data.colors.playersOnline) : data.colors.playersOnline, + color: data.colors.playersOnline, yAxis: 0 }, tps: { name: t('html.label.tps'), @@ -164,7 +164,7 @@ const AllPerformanceGraph = ({id, data, dataSeries}) => { title: {text: ''}, plotOptions: { areaspline: { - fillOpacity: 0.4 + fillOpacity: nightModeEnabled ? 0.2 : 0.4 } }, legend: { diff --git a/Plan/react/dashboard/src/components/graphs/performance/CpuRamPerformanceGraph.js b/Plan/react/dashboard/src/components/graphs/performance/CpuRamPerformanceGraph.js index 09589fec2..313fa86b5 100644 --- a/Plan/react/dashboard/src/components/graphs/performance/CpuRamPerformanceGraph.js +++ b/Plan/react/dashboard/src/components/graphs/performance/CpuRamPerformanceGraph.js @@ -21,7 +21,7 @@ const CpuRamPerformanceGraph = ({id, data, dataSeries}) => { type: 'areaspline', tooltip: tooltip.zeroDecimals, data: dataSeries.playersOnline, - color: nightModeEnabled ? withReducedSaturation(data.colors.playersOnline) : data.colors.playersOnline, + color: data.colors.playersOnline, yAxis: 0 }, cpu: { name: t('html.label.cpu'), @@ -76,7 +76,7 @@ const CpuRamPerformanceGraph = ({id, data, dataSeries}) => { title: {text: ''}, plotOptions: { areaspline: { - fillOpacity: 0.4 + fillOpacity: nightModeEnabled ? 0.2 : 0.4 } }, legend: { diff --git a/Plan/react/dashboard/src/components/graphs/performance/DiskPerformanceGraph.js b/Plan/react/dashboard/src/components/graphs/performance/DiskPerformanceGraph.js index 103aad39a..1ff2fac55 100644 --- a/Plan/react/dashboard/src/components/graphs/performance/DiskPerformanceGraph.js +++ b/Plan/react/dashboard/src/components/graphs/performance/DiskPerformanceGraph.js @@ -16,13 +16,13 @@ const DiskPerformanceGraph = ({id, data, dataSeries}) => { const zones = { disk: [{ value: data.zones.diskThresholdMed, - color: nightModeEnabled ? withReducedSaturation(data.colors.low) : data.colors.low + color: data.colors.low }, { value: data.zones.diskThresholdHigh, - color: nightModeEnabled ? withReducedSaturation(data.colors.med) : data.colors.med + color: data.colors.med }, { value: Number.MAX_VALUE, - color: nightModeEnabled ? withReducedSaturation(data.colors.high) : data.colors.high + color: data.colors.high }] }; @@ -57,7 +57,7 @@ const DiskPerformanceGraph = ({id, data, dataSeries}) => { title: {text: ''}, plotOptions: { areaspline: { - fillOpacity: 0.4 + fillOpacity: nightModeEnabled ? 0.2 : 0.4 } }, legend: { diff --git a/Plan/react/dashboard/src/components/graphs/performance/TpsPerformanceGraph.js b/Plan/react/dashboard/src/components/graphs/performance/TpsPerformanceGraph.js index 1398904f0..3118e9f94 100644 --- a/Plan/react/dashboard/src/components/graphs/performance/TpsPerformanceGraph.js +++ b/Plan/react/dashboard/src/components/graphs/performance/TpsPerformanceGraph.js @@ -33,7 +33,7 @@ const TpsPerformanceGraph = ({id, data, dataSeries}) => { type: 'areaspline', tooltip: tooltip.zeroDecimals, data: dataSeries.playersOnline, - color: nightModeEnabled ? withReducedSaturation(data.colors.playersOnline) : data.colors.playersOnline, + color: data.colors.playersOnline, yAxis: 0 }, tps: { name: t('html.label.tps'), @@ -73,7 +73,7 @@ const TpsPerformanceGraph = ({id, data, dataSeries}) => { title: {text: ''}, plotOptions: { areaspline: { - fillOpacity: 0.4 + fillOpacity: nightModeEnabled ? 0.2 : 0.4 } }, legend: { diff --git a/Plan/react/dashboard/src/components/graphs/performance/WorldPerformanceGraph.js b/Plan/react/dashboard/src/components/graphs/performance/WorldPerformanceGraph.js index 1cba448cb..6f239c29d 100644 --- a/Plan/react/dashboard/src/components/graphs/performance/WorldPerformanceGraph.js +++ b/Plan/react/dashboard/src/components/graphs/performance/WorldPerformanceGraph.js @@ -21,7 +21,7 @@ const WorldPerformanceGraph = ({id, data, dataSeries}) => { type: 'areaspline', tooltip: tooltip.zeroDecimals, data: dataSeries.playersOnline, - color: nightModeEnabled ? withReducedSaturation(data.colors.playersOnline) : data.colors.playersOnline, + color: data.colors.playersOnline, yAxis: 0 }, entities: { name: t('html.label.loadedEntities'), @@ -75,7 +75,7 @@ const WorldPerformanceGraph = ({id, data, dataSeries}) => { title: {text: ''}, plotOptions: { areaspline: { - fillOpacity: 0.4 + fillOpacity: nightModeEnabled ? 0.2 : 0.4 } }, legend: { diff --git a/Plan/react/dashboard/src/components/modal/ColorSelectorModal.js b/Plan/react/dashboard/src/components/modal/ColorSelectorModal.js index ed377765a..5963ae44e 100644 --- a/Plan/react/dashboard/src/components/modal/ColorSelectorModal.js +++ b/Plan/react/dashboard/src/components/modal/ColorSelectorModal.js @@ -7,7 +7,7 @@ import {Modal} from "react-bootstrap-v5"; import {useTranslation} from "react-i18next"; const ColorSelectorButton = ({color, setColor, disabled}) => -