refac

src/lib/components/admin/Analytics/Dashboard.svelte

@@ -158,6 +158,11 @@
 		if (modelOrderBy === 'name') {
 			return modelDirection === 'asc' ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
 		}
+		if (modelOrderBy === 'tokens') {
+			const aTokens = tokenStats[a.model_id]?.total_tokens ?? 0;
+			const bTokens = tokenStats[b.model_id]?.total_tokens ?? 0;
+			return modelDirection === 'asc' ? aTokens - bTokens : bTokens - aTokens;
+		}
 		return modelDirection === 'asc' ? a.count - b.count : b.count - a.count;
 	});
 
@@ -167,6 +172,11 @@
 			const nameB = b.name || b.user_id;
 			return userDirection === 'asc' ? nameA.localeCompare(nameB) : nameB.localeCompare(nameA);
 		}
+		if (userOrderBy === 'tokens') {
+			const aTokens = a.total_tokens ?? 0;
+			const bTokens = b.total_tokens ?? 0;
+			return userDirection === 'asc' ? aTokens - bTokens : bTokens - aTokens;
+		}
 		return userDirection === 'asc' ? a.count - b.count : b.count - a.count;
 	});
 
@@ -329,8 +339,42 @@
 									{/if}
 								</div>
 							</th>
-							<th scope="col" class="px-2.5 py-2 text-right">{$i18n.t('Tokens')}</th>
+							<th
-							<th scope="col" class="px-2.5 py-2 text-right w-16">%</th>
+								scope="col"
+								class="px-2.5 py-2 cursor-pointer select-none text-right"
+								on:click={() => toggleModelSort('tokens')}
+							>
+								<div class="flex gap-1.5 items-center justify-end">
+									{$i18n.t('Tokens')}
+									{#if modelOrderBy === 'tokens'}
+										<span class="font-normal">
+											{#if modelDirection === 'asc'}<ChevronUp
+													className="size-2"
+												/>{:else}<ChevronDown className="size-2" />{/if}
+										</span>
+									{:else}
+										<span class="invisible"><ChevronUp className="size-2" /></span>
+									{/if}
+								</div>
+							</th>
+							<th
+								scope="col"
+								class="px-2.5 py-2 cursor-pointer select-none text-right w-16"
+								on:click={() => toggleModelSort('percentage')}
+							>
+								<div class="flex gap-1.5 items-center justify-end">
+									%
+									{#if modelOrderBy === 'percentage'}
+										<span class="font-normal">
+											{#if modelDirection === 'asc'}<ChevronUp
+													className="size-2"
+												/>{:else}<ChevronDown className="size-2" />{/if}
+										</span>
+									{:else}
+										<span class="invisible"><ChevronUp className="size-2" /></span>
+									{/if}
+								</div>
+							</th>
 						</tr>
 					</thead>
 					<tbody>
@@ -425,7 +469,24 @@
 									{/if}
 								</div>
 							</th>
-							<th scope="col" class="px-2.5 py-2 text-right">{$i18n.t('Tokens')}</th>
+							<th
+								scope="col"
+								class="px-2.5 py-2 cursor-pointer select-none text-right"
+								on:click={() => toggleUserSort('tokens')}
+							>
+								<div class="flex gap-1.5 items-center justify-end">
+									{$i18n.t('Tokens')}
+									{#if userOrderBy === 'tokens'}
+										<span class="font-normal">
+											{#if userDirection === 'asc'}<ChevronUp
+													className="size-2"
+												/>{:else}<ChevronDown className="size-2" />{/if}
+										</span>
+									{:else}
+										<span class="invisible"><ChevronUp className="size-2" /></span>
+									{/if}
+								</div>
+							</th>
 						</tr>
 					</thead>
 					<tbody>

src/lib/components/admin/Analytics/ModelUsage.svelte

@@ -114,7 +114,22 @@
 							{/if}
 						</div>
 					</th>
-					<th scope="col" class="px-2.5 py-2 text-right w-24">{$i18n.t('Share')}</th>
+					<th
+						scope="col"
+						class="px-2.5 py-2 cursor-pointer select-none text-right w-24"
+						on:click={() => toggleSort('percentage')}
+					>
+						<div class="flex gap-1.5 items-center justify-end">
+							{$i18n.t('Share')}
+							{#if orderBy === 'percentage'}
+								{#if direction === 'asc'}<ChevronUp className="size-2" />{:else}<ChevronDown
+										className="size-2"
+									/>{/if}
+							{:else}
+								<span class="invisible"><ChevronUp className="size-2" /></span>
+							{/if}
+						</div>
+					</th>
 				</tr>
 			</thead>
 			<tbody>

src/lib/components/admin/Analytics/UserUsage.svelte

@@ -109,7 +109,22 @@
 							{/if}
 						</div>
 					</th>
-					<th scope="col" class="px-2.5 py-2 text-right w-24">{$i18n.t('Share')}</th>
+					<th
+						scope="col"
+						class="px-2.5 py-2 cursor-pointer select-none text-right w-24"
+						on:click={() => toggleSort('percentage')}
+					>
+						<div class="flex gap-1.5 items-center justify-end">
+							{$i18n.t('Share')}
+							{#if orderBy === 'percentage'}
+								{#if direction === 'asc'}<ChevronUp className="size-2" />{:else}<ChevronDown
+										className="size-2"
+									/>{/if}
+							{:else}
+								<span class="invisible"><ChevronUp className="size-2" /></span>
+							{/if}
+						</div>
+					</th>
 				</tr>
 			</thead>
 			<tbody>