Merge branch 'feat/player-drops-page-improvements' into develop

Author: tabarra

panel/src/pages/PlayerDropsPage/DrilldownCard.tsx

@@ -11,6 +11,7 @@ import DrilldownOverviewSubcard from "./DrilldownOverviewSubcard";
 import { DisplayLodType, DrilldownRangeSelectionType } from "./PlayerDropsPage";
 import InlineCode from "@/components/InlineCode";
 import DrilldownResourcesSubcard from "./DrilldownResourcesSubcard";
+import { DynamicNewItem } from "@/components/DynamicNewBadge";
 
 
 export function DrilldownCardLoading({ isError }: { isError?: boolean }) {
@@ -31,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">
@@ -113,6 +114,9 @@ const DrilldownCardInner = function DrilldownCard({
                         <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>
+                            <DynamicNewItem featName="playerDropsEnvChangesReversed" durationDays={14}>
+                                <span className="text-2xs text-warning-inline/80">Note: This list now shows the most recent changes first.</span>
+                            </DynamicNewItem>
                         </div>
                     </div>
                     <DrilldownChangesSubcard changes={windowData.changes} />

panel/src/pages/PlayerDropsPage/DrilldownChangesSubcard.tsx

@@ -107,7 +107,7 @@ export default function DrilldownChangesSubcard({ changes }: DrilldownChangesSub
     };
 
     const sortedChanges = useMemo(() => {
-        return changes.sort((a, b) => a.ts - b.ts);
+        return changes.sort((a, b) => b.ts - a.ts);
     }, [changes]);
 
     if (!changes.length) {

panel/src/pages/PlayerDropsPage/TimelineCard.tsx

@@ -38,12 +38,14 @@ const TimelineCard = memo(({
         const endDate = new Date(dataTs);
         if (displayLod === 'day') {
             // 14d window, 12h+15m padding start
-            startDate.setHours(-(14 * 24) - 12, -15, 0, 0);
+            const chartDurationHours = (14 - 1) * 24; //minus 1 day
+            startDate.setHours(-chartDurationHours - 12, 0, 0, 0);
             endDate.setHours(12, 0, 0, 0);
         } else {
             // 7d window, 30m+15m padding start
-            startDate.setHours(startDate.getHours() - 7 * 24, -45, 0, 0);
-            endDate.setMinutes(30, 0, 0);
+            const chartDurationHours = (7 * 24) + 1; //plus 1 hour
+            startDate.setHours(startDate.getHours() - chartDurationHours, 15, 0, 0);
+            endDate.setMinutes(endDate.getMinutes() + 30, 0, 0);
         }
         const processed = processDropsSummary(summaryData, displayLod, startDate);
         if (!processed) return;

panel/src/pages/PlayerDropsPage/chartingUtils.ts

@@ -5,6 +5,14 @@ import { DisplayLodType } from "./PlayerDropsPage";
 
 export type PlayerDropsCategoryCount = [category: string, count: number];
 
+// Helper function to floor a date to the start of the day
+const floorToStartOfDay = (dateString: string) => {
+    const date = new Date(dateString);
+    date.setHours(0, 0, 0, 0);
+    return date.toISOString();
+};
+
+
 /**
  * Processes the player drops summary api data to return the data for the timeline chart.
  * 
@@ -31,17 +39,22 @@ export const processDropsSummary = (apiData: PlayerDropsSummaryHour[], displayLo
         let currDayData: PlayerDropsSummaryHour | undefined;
         for (const hourData of windowData) {
             const hourDayOfMonth = (new Date(hourData.hour)).getDate();
+            const hourDayStart = floorToStartOfDay(hourData.hour);
             if (!currDayData) {
                 currDayOfMonth = hourDayOfMonth;
                 currDayData = {
-                    hour: hourData.hour,
+                    hour: hourDayStart,
                     changes: 0,
                     dropTypes: [],
                 };
             } else if (hourDayOfMonth !== currDayOfMonth) {
                 binnedData.push(currDayData);
                 currDayOfMonth = hourDayOfMonth;
-                currDayData = structuredClone(hourData);
+                currDayData = {
+                    hour: hourDayStart,
+                    changes: hourData.changes,
+                    dropTypes: structuredClone(hourData.dropTypes),
+                };
                 continue;
             }
 

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);