Merge pull request #1027 from kaitranntt/kai/fix/1008-usage-trends-order

fix: chronological ordering in usage trends chart (#1008)

ui/src/components/analytics/usage-trend-chart.tsx

@@ -17,6 +17,7 @@ import {
   AreaChart,
 } from 'recharts';
 import { format } from 'date-fns';
+import { useTranslation } from 'react-i18next';
 import { Skeleton } from '@/components/ui/skeleton';
 import { cn } from '@/lib/utils';
 import type { DailyUsage, HourlyUsage } from '@/hooks/use-usage';
@@ -39,14 +40,13 @@ export function UsageTrendChart({
   className,
 }: UsageTrendChartProps) {
   const { privacyMode } = usePrivacy();
-  // TODO i18n: uncomment when keys for "No usage data for today" / "No usage data available" are added
-  // const { t } = useTranslation();
+  const { t } = useTranslation();
 
   const chartData = useMemo(() => {
     if (!data || data.length === 0) return [];
 
     // For hourly data, already sorted ascending from API
-    const sortedData = granularity === 'hourly' ? data : [...data].reverse();
+    const sortedData = data;
 
     return sortedData.map((item) => {
       // Handle hourly vs daily data format
@@ -67,8 +67,7 @@ export function UsageTrendChart({
     return (
       <div className={cn('h-full flex items-center justify-center', className)}>
         <p className="text-muted-foreground">
-          {/* TODO i18n: missing keys for "No usage data for today" / "No usage data available" */}
-          {granularity === 'hourly' ? 'No usage data for today' : 'No usage data available'}
+          {granularity === 'hourly' ? t('analytics.noDailyUsage') : t('analytics.noUsageData')}
         </p>
       </div>
     );

ui/src/lib/i18n.ts

@@ -1064,6 +1064,8 @@ const resources = {
       },
       analytics: {
         title: 'Analytics',
+        noDailyUsage: 'No usage data for today',
+        noUsageData: 'No usage data available',
         subtitle: 'Track usage and insights',
         month: 'Month',
         allTime: 'All Time',
@@ -3467,6 +3469,8 @@ const resources = {
       },
       analytics: {
         title: '分析',
+        noDailyUsage: '今日无使用数据',
+        noUsageData: '无可用使用数据',
         subtitle: '追踪使用情况与洞察',
         month: '本月',
         allTime: '全部时间',
@@ -5908,6 +5912,8 @@ const resources = {
       },
       analytics: {
         title: 'Phân tích',
+        noDailyUsage: 'Không có dữ liệu sử dụng cho hôm nay',
+        noUsageData: 'Không có dữ liệu sử dụng',
         subtitle: 'Theo dõi việc sử dụng và thông tin chi tiết',
         month: 'Tháng',
         allTime: 'Tất cả thời gian',
@@ -8377,6 +8383,8 @@ const resources = {
       },
       analytics: {
         title: '分析',
+        noDailyUsage: '本日の使用データはありません',
+        noUsageData: '利用可能な使用データはありません',
         subtitle: '利用状況とインサイトを確認',
         month: '月',
         allTime: '全期間',