diff --git a/src/app/tools/compare/page.tsx b/src/app/tools/compare/page.tsx
index 565a2763b..62fba5e97 100644
--- a/src/app/tools/compare/page.tsx
+++ b/src/app/tools/compare/page.tsx
@@ -1,6 +1,12 @@
'use client';
-import { PlusIcon, TrashIcon } from '@radix-ui/react-icons';
+import {
+ CaretLeftIcon,
+ CaretRightIcon,
+ CaretSortIcon,
+ PlusIcon,
+ TrashIcon,
+} from '@radix-ui/react-icons';
import {
Button,
Dialog,
@@ -45,6 +51,7 @@ export default function Page() {
const searchParams = useSearchParams();
const members = useCompareTemporary((state) => state.members);
const [addTankDialogOpen, setAddTankDialogOpen] = useState(false);
+ const sorting = useCompareTemporary((state) => state.sorting);
const awaitedModelDefinitions = use(modelDefinitions);
const awaitedEquipmentDefinitions = use(equipmentDefinitions);
const awaitedProvisionDefinitions = use(provisionDefinitions);
@@ -132,7 +139,7 @@ export default function Page() {
deltaNominalDisplay?: (delta: number) => string | number;
}) {
const values = stats.map((stat) =>
- typeof value === 'function' ? value(stat) : (stat[value] as number),
+ typeof value === 'function' ? value(stat)! : (stat[value] as number),
);
return (
@@ -140,18 +147,57 @@ export default function Page() {
+ {
+ mutateCompareTemporary((draft) => {
+ draft.members.sort((memberA, memberB) => {
+ const indexA = draft.members.indexOf(memberA);
+ const indexB = draft.members.indexOf(memberB);
+ const valueA = values[indexA];
+ const valueB = values[indexB];
+
+ return draft.sorting?.direction === 'ascending' &&
+ draft.sorting.by === name
+ ? valueA - valueB
+ : valueB - valueA;
+ });
+
+ draft.sorting = {
+ by: name,
+ direction:
+ draft.sorting?.direction === 'ascending' &&
+ draft.sorting.by === name
+ ? 'descending'
+ : 'ascending',
+ };
+ });
+ }}
+ >
+ {(sorting === undefined || sorting.by !== name) && (
+
+ )}
+ {sorting?.by === name && (
+ <>
+ {sorting.direction === 'ascending' && }
+ {sorting.direction === 'descending' && }
+ >
+ )}
+
+
{name}
{values.map((value, index) => {
- const delta = (value ?? 0) - (values[0] ?? 0);
- const deltaPercentage = (value ?? 1) / (values[0] ?? 1) - 1;
+ const delta = value - values[0];
+ const deltaPercentage = value / values[0] - 1;
const normalizedDeltaPercentage = Math.round(
Math.min(100, Math.abs(deltaPercentage) * 2 * 100 + 25),
);
diff --git a/src/stores/compare.ts b/src/stores/compare.ts
index b51d5bfde..edd6b62b7 100644
--- a/src/stores/compare.ts
+++ b/src/stores/compare.ts
@@ -11,6 +11,10 @@ export interface CompareMember extends DuelMember {
export interface CompareTemporary {
members: CompareMember[];
+ sorting?: {
+ direction: 'ascending' | 'descending';
+ by: string;
+ };
}
export type DeltaMode = 'none' | 'percentage' | 'nominal';