fix charts

2025-11-27 16:46:46 +03:30
parent 9ad6dc3a79
commit 0e812a45c5
4 changed files with 111 additions and 26 deletions
--- a/src/app/telemetry/page.tsx
+++ b/src/app/telemetry/page.tsx
@@ -11,6 +11,16 @@ import Loading from '@/components/Loading'
 // زمان به‌روزرسانی خودکار (به میلی‌ثانیه) - می‌توانید این مقدار را تغییر دهید
 const AUTO_REFRESH_INTERVAL = 10 * 1000 // 10 ثانیه

+type TimeRange = '1day' | '1hour' | '2hours' | '6hours' | '10hours'
+
+const TIME_RANGE_OPTIONS: { value: TimeRange; label: string }[] = [
+    { value: '1day', label: 'یک روز' },
+    { value: '1hour', label: 'یک ساعت اخیر' },
+    { value: '2hours', label: 'دو ساعت اخیر' },
+    { value: '6hours', label: '۶ ساعت اخیر' },
+    { value: '10hours', label: '۱۰ ساعت اخیر' }
+]
+
 function useQueryParam(name: string) {
    if (typeof window === 'undefined') return null as string | null
    return new URLSearchParams(window.location.search).get(name)
@@ -21,6 +31,7 @@ export default function TelemetryPage() {
    const [total, setTotal] = useState(0)
    const [loading, setLoading] = useState(true)
    const [lastUpdate, setLastUpdate] = useState<Date | null>(null)
+    const [timeRange, setTimeRange] = useState<TimeRange>('1day')
    const deviceId = Number(useQueryParam('deviceId') ?? '1')
    const dateParam = useQueryParam('date') ?? `${getCurrentPersianYear()}/${getCurrentPersianMonth()}/${getCurrentPersianDay()}`
    const intervalRef = useRef<NodeJS.Timeout | null>(null)
@@ -48,15 +59,43 @@ export default function TelemetryPage() {
        }

        try {
+            let startDate: Date
+            let endDate: Date
+            
+            if (timeRange === '1day') {
+                // برای یک روز، از تاریخ انتخابی استفاده می‌کنیم
                const [year, month, day] = selectedDate.split('/').map(Number)
-            const startDate = persianToGregorian(year, month, day)
+                startDate = persianToGregorian(year, month, day)
                startDate.setHours(0, 0, 0, 0)
-            const endDate = new Date(startDate)
+                endDate = new Date(startDate)
                endDate.setHours(23, 59, 59, 999)
+            } else {
+                // برای بازه‌های زمانی دیگر، از زمان فعلی به عقب می‌رویم
+                endDate = new Date()
+                const now = new Date()
+                
+                switch (timeRange) {
+                    case '1hour':
+                        startDate = new Date(now.getTime() - 60 * 60 * 1000)
+                        break
+                    case '2hours':
+                        startDate = new Date(now.getTime() - 2 * 60 * 60 * 1000)
+                        break
+                    case '6hours':
+                        startDate = new Date(now.getTime() - 6 * 60 * 60 * 1000)
+                        break
+                    case '10hours':
+                        startDate = new Date(now.getTime() - 10 * 60 * 60 * 1000)
+                        break
+                    default:
+                        startDate = new Date(now.getTime() - 24 * 60 * 60 * 1000)
+                }
+            }
+            
            const startUtc = startDate.toISOString()
            const endUtc = endDate.toISOString()

-            const result = await api.listTelemetry({ deviceId, startUtc, endUtc })
+            const result = await api.listTelemetry({ deviceId, startUtc, endUtc, pageSize: 100000 })
            setTelemetry(result.items)
            setTotal(result.totalCount)
            setLastUpdate(new Date())
@@ -67,7 +106,7 @@ export default function TelemetryPage() {
                setLoading(false)
            }
        }
-    }, [deviceId, selectedDate])
+    }, [deviceId, selectedDate, timeRange])

    // بارگذاری اولیه
    useEffect(() => {
@@ -97,13 +136,13 @@ export default function TelemetryPage() {
    }, [selectedDate, loadData])

    const sortedTelemetry = useMemo(() => {
-        return [...telemetry].sort((a, b) => new Date(a.timestampUtc).getTime() - new Date(b.timestampUtc).getTime())
+        return [...telemetry].sort((a, b) => new Date(a.serverTimestampUtc).getTime() - new Date(b.serverTimestampUtc).getTime())
    }, [telemetry])

    // تبدیل timestamp به ساعت (HH:MM:SS)
    const labels = useMemo(() => {
        return sortedTelemetry.map(t => {
-            const date = new Date(t.timestampUtc)
+            const date = new Date(t.serverTimestampUtc)
            const hours = date.getHours().toString().padStart(2, '0')
            const minutes = date.getMinutes().toString().padStart(2, '0')
            const seconds = date.getSeconds().toString().padStart(2, '0')
@@ -150,7 +189,7 @@ export default function TelemetryPage() {
                        <ChevronRight className="w-4 h-4" />
                        بازگشت به تقویم
                    </Link>
-                    <div className="flex items-center justify-between">
+                    <div className="flex items-center justify-between flex-wrap gap-4">
                        <div className="flex items-center gap-3">
                            <div className="inline-flex items-center justify-center w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl shadow-md">
                                <BarChart3 className="w-6 h-6 text-white" />
@@ -166,6 +205,18 @@ export default function TelemetryPage() {
                                )}
                            </div>
                        </div>
+                        <div className="flex items-center gap-3">
+                            <select
+                                value={timeRange}
+                                onChange={(e) => setTimeRange(e.target.value as TimeRange)}
+                                className="px-4 py-2 border border-gray-300 rounded-xl bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent shadow-md hover:shadow-lg transition-shadow"
+                            >
+                                {TIME_RANGE_OPTIONS.map(option => (
+                                    <option key={option.value} value={option.value}>
+                                        {option.label}
+                                    </option>
+                                ))}
+                            </select>
                            <button
                                onClick={() => loadData(true)}
                                disabled={loading}
@@ -177,6 +228,7 @@ export default function TelemetryPage() {
                            </button>
                        </div>
                    </div>
+                </div>
                <DashboardGrid>
                    <Card title="نور (Lux)" icon="💡" value={lux.at(-1) ?? 0} subtitle={`حداکثر: ${Math.max(0, ...lux)} | حداقل: ${Math.min(0, ...lux)}`} />
                    <Card title="گاز CO (ppm)" icon="🫁" value={gas.at(-1) ?? 0} subtitle={`حداکثر: ${Math.max(0, ...gas)} | حداقل: ${Math.min(0, ...gas)}`} />
@@ -188,16 +240,44 @@ export default function TelemetryPage() {

                <div className="grid gap-4 md:grid-cols-2">
                    <Panel title="رطوبت خاک">
-                        <LineChart labels={labels} series={[{ label: 'رطوبت خاک (%)', data: soil, borderColor: '#16a34a', backgroundColor: '#dcfce7', fill: true }]} />
+                        <LineChart 
+                            labels={labels}  
+                            series={[{ label: 'رطوبت خاک (%)', data: soil, borderColor: '#16a34a', backgroundColor: '#dcfce7', fill: true }]} 
+                            yAxisMin={0}
+                            yAxisMax={100}
+                        />
                    </Panel>
-                    <Panel title="دما و رطوبت">
-                        <LineChart labels={labels} series={[{ label: 'دما (°C)', data: temp, borderColor: '#ef4444' }, { label: 'رطوبت (%)', data: hum, borderColor: '#3b82f6' }]} />
+                    <Panel title="رطوبت">
+                        <LineChart 
+                            labels={labels} 
+                            series={[{ label: 'رطوبت (%)', data: hum, borderColor: '#3b82f6', backgroundColor: '#dbeafe', fill: true }]} 
+                            yAxisMin={0}
+                            yAxisMax={100}
+                        />
+                    </Panel>
+                    <Panel title="دما">
+                        <LineChart 
+                            labels={labels} 
+                            series={[{ label: 'دما (°C)', data: temp, borderColor: '#ef4444', backgroundColor: '#fee2e2', fill: true }]} 
+                            yAxisMin={-10}
+                            yAxisMax={80}
+                        />
                    </Panel>
                    <Panel title="نور">
-                        <LineChart labels={labels} series={[{ label: 'Lux', data: lux, borderColor: '#a855f7' }]} />
+                        <LineChart 
+                            labels={labels} 
+                            series={[{ label: 'Lux', data: lux, borderColor: '#a855f7', backgroundColor: '#f3e8ff', fill: true }]} 
+                            yAxisMin={0}
+                            yAxisMax={50000}
+                        />
                    </Panel>
                    <Panel title="گاز CO">
-                        <LineChart labels={labels} series={[{ label: 'CO (ppm)', data: gas, borderColor: '#f59e0b', backgroundColor: '#fef3c7', fill: true }]} />
+                        <LineChart 
+                            labels={labels} 
+                            series={[{ label: 'CO (ppm)', data: gas, borderColor: '#f59e0b', backgroundColor: '#fef3c7', fill: true }]} 
+                            yAxisMin={0}
+                            yAxisMax={100}
+                        />
                    </Panel>
                </div>
            </div>
--- a/src/components/Charts.tsx
+++ b/src/components/Charts.tsx
@@ -25,6 +25,8 @@ type Props = {
    labels: string[]
    series: Series[]
    title?: string
+    yAxisMin?: number
+    yAxisMax?: number
 }

 export function Panel({ title, children }: { title: string; children: React.ReactNode }) {
@@ -40,7 +42,7 @@ export function Panel({ title, children }: { title: string; children: React.Reac
    )
 }

-export function LineChart({ labels, series }: Props) {
+export function LineChart({ labels, series, yAxisMin, yAxisMax }: Props) {
    return (
        <div className="persian-number">
            <Line
@@ -111,6 +113,8 @@ export function LineChart({ labels, series }: Props) {
                        },
                        y: {
                            display: true,
+                            min: yAxisMin !== undefined ? yAxisMin : undefined,
+                            max: yAxisMax !== undefined ? yAxisMax : undefined,
                            ticks: {
                                font: {
                                    family: "'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif",
--- a/src/components/DashboardCards.tsx
+++ b/src/components/DashboardCards.tsx
@@ -65,7 +65,7 @@ function detectColor(title: string, icon?: string): 'light' | 'gas' | 'soil' | '
 }

 export function DashboardGrid({ children }: { children: React.ReactNode }) {
-    return <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">{children}</div>
+    return <div className="grid gap-4 grid-cols-3 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-6">{children}</div>
 }

 export function Card({ title, value, subtitle, icon, color }: CardProps) {
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -24,6 +24,7 @@ export type TelemetryDto = {
    persianMonth: number
    persianDate: string
    deviceName?: string
+    serverTimestampUtc?: string
 }

 export type DeviceSettingsDto = {