Use a bigger pie chart for over 7 worlds or servers

Affects issues:
- Fixed #4489

Author: AuroraLS3

Plan/react/dashboard/src/components/graphs/ServerPie.jsx

@@ -10,6 +10,7 @@ import {usePreferences} from "../../hooks/preferencesHook.jsx";
 import {useTimePreferences} from "../text/FormattedTime.jsx";
 import {formatTimeAmount} from "../../util/format/TimeAmountFormat.js";
 import {localeService} from "../../service/localeService.js";
+import {classNames} from "../../util/classNames.ts";
 
 const ServerPie = ({colors, series}) => {
     const {t} = useTranslation();
@@ -64,7 +65,7 @@ const ServerPie = ({colors, series}) => {
 
     if (!preferencesLoaded) return <Loader/>;
 
-    return (<div className="chart-pie" id="server-pie"/>);
+    return (<div className={classNames("chart-pie", series.length > 7 ? 'big' : undefined)} id="server-pie"/>);
 }
 
 export default ServerPie;

Plan/react/dashboard/src/components/graphs/WorldPie.jsx

@@ -12,6 +12,7 @@ import {usePreferences} from "../../hooks/preferencesHook.jsx";
 import Loader from "../navigation/Loader.jsx";
 import {formatTimeAmount} from "../../util/format/TimeAmountFormat.js";
 import {useThemeStorage} from "../../hooks/context/themeContextHook.tsx";
+import {classNames} from "../../util/classNames.ts";
 
 const WorldPie = ({id, worldSeries, gmSeries}) => {
     const {t} = useTranslation();
@@ -88,7 +89,7 @@ const WorldPie = ({id, worldSeries, gmSeries}) => {
 
     if (!preferencesLoaded) return <Loader/>;
 
-    return (<div className="chart-pie" id={id}/>)
+    return (<div className={classNames("chart-pie", worldSeries.length > 7 ? 'big' : undefined)} id={id}/>)
 }
 
 export default WorldPie;

Plan/react/dashboard/src/style/sb-admin-2.css

@@ -281,6 +281,10 @@ img {
     width: 100%;
 }
 
+.chart-pie.big {
+    height: 27rem;
+}
+
 /*!
  * Start Bootstrap - SB Admin 2 v4.1.3 (https://startbootstrap.com/theme/sb-admin-2)
  * Copyright 2013-2020 Start Bootstrap

Plan/react/dashboard/src/util/classNames.ts

@@ -0,0 +1,5 @@
+type stringOrUndefined = string | undefined
+
+export const classNames = (...names: stringOrUndefined[]) => {
+    return names.filter(Boolean).join(' ');
+}