Fix %Diff labels (#169)

* Move listing and sale table components * Fix labeling issues for %Diff values Fixes #1394 (see follow-ups) * Clarify label and fix tooltip sizing
Universalis-FFXIV · Dec 9, 2024 · 49301a7 · 49301a7
1 parent 09594bb
commit 49301a7
Show file tree

Hide file tree

Showing 10 changed files with 266 additions and 142 deletions.
diff --git a/components/List/ListItemMarket/ListItemMarket.tsx b/components/List/ListItemMarket/ListItemMarket.tsx
@@ -5,8 +5,8 @@ import { sprintf } from 'sprintf-js';
 import { Item } from '../../../types/game/Item';
 import { Language } from '../../../types/universalis/lang';
 import ErrorBoundary from '../../ErrorBoundary/ErrorBoundary';
-import ListingsTable from '../../ListingsTable/ListingsTable';
-import SalesTable from '../../SalesTable/SalesTable';
+import ListingsTable from '../../Market/ListingsTable/ListingsTable';
+import SalesTable from '../../Market/SalesTable/SalesTable';
 
 interface ListItemMarketProps {
   item?: Item;

diff --git a/components/ListingsTable/ListingsTable.tsx → ...ts/Market/ListingsTable/ListingsTable.tsx b/components/ListingsTable/ListingsTable.tsx → ...ts/Market/ListingsTable/ListingsTable.tsx
@@ -1,13 +1,20 @@
 import { Trans } from '@lingui/macro';
 import Image from 'next/image';
 import { CSSProperties, Fragment, PropsWithChildren, useCallback } from 'react';
-import { DataCenter } from '../../types/game/DataCenter';
-import { Language } from '../../types/universalis/lang';
-import GameCityIcon from '../GameCityIcon/GameCityIcon';
-import GameMateria from '../GameMateria/GameMateria';
-import SortTable from '../SortTable/SortTable';
-import Tooltip from '../Tooltip/Tooltip';
-import useSettings from '../../hooks/useSettings';
+import { DataCenter } from '../../../types/game/DataCenter';
+import { Language } from '../../../types/universalis/lang';
+import GameCityIcon from '../../GameCityIcon/GameCityIcon';
+import GameMateria from '../../GameMateria/GameMateria';
+import SortTable from '../../SortTable/SortTable';
+import Tooltip from '../../Tooltip/Tooltip';
+import useSettings from '../../../hooks/useSettings';
+import {
+  formatPercentDiffSimple,
+  getPercentDiffLabelClass,
+  PercentDiffTooltipBody,
+  Quality,
+  shouldDisplayDiffTooltopEver,
+} from '../utils';
 
 interface ListingsTableProps {
   listings: any[];
@@ -102,31 +109,22 @@ function ListingsTableRow({ listing, includeGst }: ListingsTableRowProps) {
       <td className="price-qty">{listing.quantity.toLocaleString()}</td>
       <td className="price-total">{listing.total.toLocaleString()}</td>
       {listing.diff != null && (
-        <td
-          className={`price-diff ${
-            Math.ceil(listing.diff) >= 20
-              ? 'price-diff-bad'
-              : Math.ceil(listing.diff) < -10
-              ? 'price-diff-good'
-              : ''
-          }`}
-        >
+        <td className={`price-diff ${getPercentDiffLabelClass(listing.diff)}`}>
           <Tooltip
+            enabled={shouldDisplayDiffTooltopEver(listing.diff)}
             label={
-              <div style={{ textAlign: 'center' }}>
-                This listing is {listing.diff > 0 ? '+' : ''}
-                {listing.diff === 0 ? '-' : Math.round(listing.diff).toLocaleString() + '%'}{' '}
-                {listing.diff > 0 ? 'more' : 'less'} than the current <br />
-                <strong>Avg. Price Per Unit</strong>: {listing.hq ? '(HQ)' : '(NQ)'}{' '}
-                {Math.round(listing.average!).toLocaleString()}
+              <div style={{ textAlign: 'center', width: '200px' }}>
+                <PercentDiffTooltipBody
+                  diff={listing.diff}
+                  nounSingular="listing"
+                  price={listing.pricePerUnit}
+                  referencePrice={listing.average!}
+                  quality={listing.hq ? Quality.HighQuality : Quality.NormalQuality}
+                />
               </div>
             }
           >
-            <span style={{ width: '100%' }}>
-              {listing.diff == 0
-                ? '-'
-                : (listing.diff > 0 ? '+' : '') + Math.ceil(listing.diff).toLocaleString() + '%'}
-            </span>
+            <span style={{ width: '100%' }}>{formatPercentDiffSimple(listing.diff)}</span>
           </Tooltip>
         </td>
       )}

diff --git a/components/Market/MarketDataCenter/MarketDataCenter.tsx b/components/Market/MarketDataCenter/MarketDataCenter.tsx
@@ -4,8 +4,8 @@ import { sprintf } from 'sprintf-js';
 import { DataCenter } from '../../../types/game/DataCenter';
 import { Item } from '../../../types/game/Item';
 import { Language } from '../../../types/universalis/lang';
-import ListingsTable from '../../ListingsTable/ListingsTable';
-import SalesTable from '../../SalesTable/SalesTable';
+import ListingsTable from '../ListingsTable/ListingsTable';
+import SalesTable from '../SalesTable/SalesTable';
 import MarketAverages from '../MarketAverages/MarketAverages';
 import MarketCheapest from '../MarketCheapest/MarketCheapest';
 import MarketHistoryGraph from '../MarketHistoryGraph/MarketHistoryGraph';

diff --git a/components/Market/MarketRegion/MarketRegion.tsx b/components/Market/MarketRegion/MarketRegion.tsx
@@ -4,8 +4,8 @@ import { sprintf } from 'sprintf-js';
 import { DataCenter } from '../../../types/game/DataCenter';
 import { Item } from '../../../types/game/Item';
 import { Language } from '../../../types/universalis/lang';
-import ListingsTable from '../../ListingsTable/ListingsTable';
-import SalesTable from '../../SalesTable/SalesTable';
+import ListingsTable from '../ListingsTable/ListingsTable';
+import SalesTable from '../SalesTable/SalesTable';
 import MarketAverages from '../MarketAverages/MarketAverages';
 import MarketCheapest from '../MarketCheapest/MarketCheapest';
 import MarketHistoryGraph from '../MarketHistoryGraph/MarketHistoryGraph';

diff --git a/components/Market/MarketWorld/MarketWorld.tsx b/components/Market/MarketWorld/MarketWorld.tsx
@@ -4,8 +4,8 @@ import ago from 's-ago';
 import { Item } from '../../../types/game/Item';
 import { World } from '../../../types/game/World';
 import { Language } from '../../../types/universalis/lang';
-import ListingsTable from '../../ListingsTable/ListingsTable';
-import SalesTable from '../../SalesTable/SalesTable';
+import ListingsTable from '../ListingsTable/ListingsTable';
+import SalesTable from '../SalesTable/SalesTable';
 import MarketHistoryGraph from '../MarketHistoryGraph/MarketHistoryGraph';
 import MarketStackSizeHistogram from '../MarketStackSizeHistogram/MarketStackSizeHistogram';
 import NoMarketData from '../NoMarketData/NoMarketData';

diff --git a/components/SalesTable/SalesTable.tsx → components/Market/SalesTable/SalesTable.tsx b/components/SalesTable/SalesTable.tsx → components/Market/SalesTable/SalesTable.tsx
@@ -1,10 +1,17 @@
 import { Trans } from '@lingui/macro';
 import { PropsWithChildren, Suspense } from 'react';
-import SortTable from '../SortTable/SortTable';
-import Tooltip from '../Tooltip/Tooltip';
+import SortTable from '../../SortTable/SortTable';
+import Tooltip from '../../Tooltip/Tooltip';
 import Image from 'next/image';
 import ago from 's-ago';
-import { DataCenter } from '../../types/game/DataCenter';
+import { DataCenter } from '../../../types/game/DataCenter';
+import {
+  formatPercentDiffSimple,
+  getPercentDiffLabelClass,
+  PercentDiffTooltipBody,
+  Quality,
+  shouldDisplayDiffTooltopEver,
+} from '../utils';
 
 interface SalesTableProps {
   sales: any[];
@@ -72,31 +79,22 @@ function SalesTableRow({ sale }: { sale: SaleRow }) {
       <td className="price-qty">{sale.quantity.toLocaleString()}</td>
       <td className="price-total">{sale.total.toLocaleString()}</td>
       {sale.diff != null && (
-        <td
-          className={`price-diff ${
-            Math.ceil(sale.diff) >= 20
-              ? 'price-diff-bad'
-              : Math.ceil(sale.diff) < -10
-              ? 'price-diff-good'
-              : ''
-          }`}
-        >
+        <td className={`price-diff ${getPercentDiffLabelClass(sale.diff)}`}>
           <Tooltip
+            enabled={shouldDisplayDiffTooltopEver(sale.diff)}
             label={
-              <div style={{ textAlign: 'center' }}>
-                This listing is {sale.diff > 0 ? '+' : ''}
-                {sale.diff === 0 ? '-' : Math.round(sale.diff).toLocaleString() + '%'}{' '}
-                {sale.diff > 0 ? 'more' : 'less'} than the current <br />
-                <strong>Avg. Price Per Unit</strong>: {sale.hq ? '(HQ)' : '(NQ)'}{' '}
-                {Math.round(sale.average!).toLocaleString()}
+              <div style={{ textAlign: 'center', width: '200px' }}>
+                <PercentDiffTooltipBody
+                  diff={sale.diff}
+                  nounSingular="sale"
+                  price={sale.pricePerUnit}
+                  referencePrice={sale.average!}
+                  quality={sale.hq ? Quality.HighQuality : Quality.NormalQuality}
+                />
               </div>
             }
           >
-            <span style={{ width: '100%' }}>
-              {sale.diff == 0
-                ? '-'
-                : (sale.diff > 0 ? '+' : '') + Math.ceil(sale.diff).toLocaleString() + '%'}
-            </span>
+            <span style={{ width: '100%' }}>{formatPercentDiffSimple(sale.diff)}</span>
           </Tooltip>
         </td>
       )}

diff --git a/components/Market/utils.ts b/components/Market/utils.ts