tweak(panel/playerDrops): small changes - read desc

Increased timeline legend offset.
Increased timeline mouse event debouncing delay.
Fixed drilldown loader cards order.
Added the script to generate the player drops stats file v2.

Author: tabarra

panel/src/pages/PlayerDropsPage/DrilldownCard.tsx

@@ -32,17 +32,17 @@ export function DrilldownCardLoading({ isError }: { isError?: boolean }) {
                 </div>
                 <div className="flex flex-col flex-shrink px-1 sm:px-4 py-2 space-y-4 border-t border-b bg-secondary/35">
                     <div className="flex items-center space-x-2">
-                        <div className='hidden xs:block'><SkullIcon className="size-4" /></div>
-                        <h2 className="font-mono text-sm">Crash Reasons</h2>
+                        <div className='hidden xs:block'><ShapesIcon className="size-4" /></div>
+                        <h2 className="font-mono text-sm">Environment Changes</h2>
                     </div>
                 </div>
                 <div className="px-4 pt-2 pb-4">
                     <PlayerDropsLoadingSpinner isError={isError} />
                 </div>
                 <div className="flex flex-col flex-shrink px-1 sm:px-4 py-2 space-y-4 border-t border-b bg-secondary/35">
                     <div className="flex items-center space-x-2">
-                        <div className='hidden xs:block'><ShapesIcon className="size-4" /></div>
-                        <h2 className="font-mono text-sm">Environment Changes</h2>
+                        <div className='hidden xs:block'><SkullIcon className="size-4" /></div>
+                        <h2 className="font-mono text-sm">Crash Reasons</h2>
                     </div>
                 </div>
                 <div className="px-4 pt-2 pb-4 space-y-4">

panel/src/pages/PlayerDropsPage/drawDropsTimeline.ts

@@ -163,6 +163,7 @@ export default function drawDropsTimeline({
         ctx.setLineDash([]);
 
         //Drawing the timeline
+        let barsRendered = 0;
         ctx.lineWidth = 1;
         for (const intervalData of data.log) {
             const baseX = timeScale(intervalData.startDate);
@@ -173,6 +174,7 @@ export default function drawDropsTimeline({
             const renderOffsetX = baseX - renderStartX;
             const barWidth = Math.round(intervalWidth + renderOffsetX) + 1 - barCenterOffset - barPadding;
             if (barWidth < 1) continue;
+            barsRendered++;
 
             //Draw the count blocks
             let dropSum = 0;
@@ -221,6 +223,7 @@ export default function drawDropsTimeline({
         }
         if (isFirstRender) {
             console.timeEnd('drawing canvas timeline');
+            console.log('Bars rendered:', barsRendered);
         }
     }
     drawCanvasTimeline();
@@ -400,8 +403,9 @@ export default function drawDropsTimeline({
             wasTransitionDisabled = true;
         }
         const legendWidth = legendRef.clientWidth;
-        let legendX = datumStartX - legendWidth - 10 + margins.left;
-        if (legendX < margins.left) legendX = datumStartX + 10 + margins.left;
+        const legendOffset = 36;
+        let legendX = datumStartX - legendWidth - legendOffset + margins.left;
+        if (legendX < margins.left) legendX = datumStartX + legendOffset + margins.left;
         legendRef.style.left = `${legendX}px`;
         legendRef.style.opacity = '1';
         if (wasTransitionDisabled) {
@@ -468,7 +472,7 @@ export default function drawDropsTimeline({
 
     // Handle svg mouse events
     let isEventInCooldown = false;
-    const cooldownTime = 20;
+    const cooldownTime = 75;
     chartGroup.on('mousemove', function (event) {
         const [pointerX] = d3.pointer(event);
         if (!isEventInCooldown) {

scripts/dev/updatePlayerDropsV2.code.ts

@@ -0,0 +1,35 @@
+/**
+ * This script is used to merge multiple stats_playerDrop files into a single file with the last 336 hours of data.
+ * NOTE: use npx tsx scripts/dev/makeOldStatsFile.local.ts to run this script
+ */
+import fs from 'node:fs';
+import { PDLChangeEventType, PDLFileType } from '../../core/modules/Metrics/playerDrop/playerDropSchemas';
+import * as d3 from 'd3';
+
+// const hours = d3.timeHour.offset()
+const currentHour = d3.timeHour.floor(new Date());
+export default (sourceFile: string, targetFileName: string) => {
+    const fileData = JSON.parse(fs.readFileSync(sourceFile, 'utf8')) as PDLFileType;
+
+    let lastHour = d3.timeHour.offset(currentHour, -1);
+    for (let i = fileData.log.length - 1; i >= 0; i--) {
+        const log = fileData.log[i];
+        const logHour = new Date(log.hour);
+        const newHour = d3.timeHour.offset(lastHour, -1);
+        const hourDiff = newHour.getTime() - logHour.getTime();
+        log.hour = newHour.toISOString();
+        lastHour = newHour;
+        for (const change of log.changes) {
+            if ('ts' in change) {
+                change.ts = change.ts - hourDiff;
+            }
+        }
+        console.log('Updated', logHour.toISOString(), 'to', newHour.toISOString());
+    }
+    fileData.lastResourceList = [];
+    fileData.lastUnknownReasons = [];
+
+    //Write new file
+    console.log('Writing file', targetFileName);
+    fs.writeFileSync(targetFileName, JSON.stringify(fileData));
+}

scripts/dev/updatePlayerDropsV2.ts

@@ -0,0 +1,15 @@
+/**
+ * This script is used to update the timestamps of a stats_playerDrop.json v2 file
+ * 
+ * NOTE: RENAME TO updatePlayerDropsV2.local.ts
+ * NOTE: THEN RUN npx tsx scripts/dev/updatePlayerDropsV2.local.ts
+ * NOTE: Add --overwrite to overwrite the actual stats_playerDrop.json file instead of creating a timestamped copy
+ */
+import updatePlayerDropsV2 from "./updatePlayerDropsV2.code";
+
+const sourceFile = 'xxxxx/stats_playerDrop.json';
+const baseTargetPath = 'xxxxxxxx/txData/default/data/stats_playerDrop.json';
+const overwrite = process.argv.includes('--overwrite');
+const formattedTimestamp = new Date().toISOString().replace(/:/g, '-').split('.')[0];
+const targetFileName = overwrite ? baseTargetPath : `${baseTargetPath}.${formattedTimestamp}`;
+updatePlayerDropsV2(sourceFile, targetFileName);