feat(panel): added reason tooltips to the player drops page

tabarra · Oct 5, 2024 · e76c062 · e76c062
1 parent 2e79d12
commit e76c062
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 12 deletions.
diff --git a/panel/src/lib/playerDropCategories.ts b/panel/src/lib/playerDropCategories.ts
@@ -2,6 +2,7 @@ import { color } from "d3";
 
 export type PlayerDropCategoryType = {
     label: string;
+    description: string;
     color: string;
     border: string;
     expected: boolean;
@@ -28,36 +29,42 @@ export const playerDropCategoryDefaultColor = BaseColors.Default;
 export const playerDropCategories: PlayerDropCategoriesType = {
     player: {
         label: 'Player',
+        description: 'Player left by quitting the game, leaving the server or other normal means.',
         color: BaseColors.Green,
         border: border(BaseColors.Green),
         expected: true,
     },
     resource: {
         label: 'Resource',
+        description: 'Player kicked out of the server by a resource.',
         color: BaseColors.Blue,
         border: border(BaseColors.Blue),
         expected: true,
     },
     timeout: {
         label: 'Timeout',
+        description: 'Player connection timed out due to networking issues or client crash.',
         color: BaseColors.Cream,
         border: border(BaseColors.Cream),
         expected: false,
     },
     crash: {
         label: 'Crash',
+        description: 'Player left due to a game crash, but was still able to inform the server the crash reason.',
         color: BaseColors.Orange,
         border: border(BaseColors.Orange),
         expected: false,
     },
     security: {
         label: 'Security',
+        description: 'Player kicked out of the server due to suspect behavior such as sending too many commands or losing connection to the Cfx.re backend services.',
         color: BaseColors.Red,
         border: border(BaseColors.Red),
         expected: false,
     },
     unknown: {
         label: 'Unknown',
+        description: 'Player left the server for an unknown reason.',
         color: BaseColors.Purple,
         border: border(BaseColors.Purple),
         expected: false,

diff --git a/panel/src/pages/PlayerDropsPage/DrilldownOverviewSubcard.tsx b/panel/src/pages/PlayerDropsPage/DrilldownOverviewSubcard.tsx
@@ -2,9 +2,11 @@ import { useMemo } from "react";
 import { numberToLocaleString } from "@/lib/utils";
 import { PlayerDropsMessage } from "./PlayerDropsGenericSubcards";
 import { playerDropCategories } from "@/lib/playerDropCategories";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 
 type DisplayCategoryDatum = {
     label: string;
+    tooltip: string;
     color: string;
     count: number;
 }
@@ -22,6 +24,7 @@ export default function DrilldownOverviewSubcard({ dropTypes }: DrilldownOvervie
             if (!(cat in playerDropCategories)) continue;
             categories[cat] = {
                 label: playerDropCategories[cat].label,
+                tooltip: playerDropCategories[cat].description,
                 color: playerDropCategories[cat].color,
                 count: cnt,
             };
@@ -39,18 +42,25 @@ export default function DrilldownOverviewSubcard({ dropTypes }: DrilldownOvervie
     return (
         <div className="px-4 py-4 flex flex-wrap justify-evenly gap-4 text-muted-foreground">
             {categories.map(([reasonId, reasonData]) => (
-                <div
-                    key={reasonId}
-                    className="px-4 flex flex-col gap-1 items-center justify-center"
-                >
-                    <span
-                        className="text-xl tracking-wider border-b-2 font-semibold"
-                        style={{ borderColor: reasonData.color }}
-                    >{reasonData.label}</span>
-                    <span>
-                        {numberToLocaleString(reasonData.count)} <small className="opacity-75">({numberToLocaleString((reasonData.count / totalDrops) * 100, 1)}%)</small>
-                    </span>
-                </div>
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <div
+                            key={reasonId}
+                            className="px-4 flex flex-col gap-1 items-center justify-center"
+                        >
+                            <span
+                                className="text-xl tracking-wider border-b-2 font-semibold"
+                                style={{ borderColor: reasonData.color }}
+                            >{reasonData.label}</span>
+                            <span>
+                                {numberToLocaleString(reasonData.count)} <small className="opacity-75">({numberToLocaleString((reasonData.count / totalDrops) * 100, 1)}%)</small>
+                            </span>
+                        </div>
+                    </TooltipTrigger>
+                    <TooltipContent className="max-w-96 text-center">
+                        <p>{reasonData.tooltip}</p>
+                    </TooltipContent>
+                </Tooltip>
             ))}
         </div>
     );