import React, { useEffect, useState, useMemo } from 'react'; import { BarChart, Bar, XAxis, YAxis, Tooltip, Legend, ResponsiveContainer, PieChart, Pie, Cell, LineChart, Line, AreaChart, Area, CartesianGrid, } from 'recharts'; import { BarChart2, PieChart as PieChartIcon, Clock, Smartphone, Activity, ChevronDown, Search, X, } from 'lucide-react'; import DeviceFarmApiService from '../../api-service'; import { IBuild } from '../../interfaces/IBuild'; import { ISession } from '../../interfaces/ISession'; import { format, parse, isValid } from 'date-fns'; const COLORS = { success: ['#22c55e', '#15803d'], // Green gradient for Pass warning: ['#fbbf24', '#d97706'], // Yellow gradient for Unmarked danger: ['#ef4444', '#b91c1c'], // Red gradient for Fail accent: [ ['#8b5cf6', '#6d28d9'], // Purple gradient ['#ec4899', '#be185d'], // Pink gradient ['#06b6d4', '#0891b2'], // Cyan gradient ['#10b981', '#047857'], // Emerald gradient ['#f59e0b', '#d97706'], // Amber gradient ], }; const gradientDefs = ( {/* Pass gradient */} {/* Fail gradient */} {/* Unmarked gradient */} {/* Device Usage gradients */} {COLORS.accent.map((colorPair, i) => ( ))} {/* Duration gradient */} {/* Count gradient */} ); const Card = ({ children, title, icon: Icon, }: { children: React.ReactNode; title: string; icon: React.ElementType; }) => (

{/* Gradient overlay */}

{/* Glow effect */}

{/* Content */}

{Icon && (

)} {title}

{children}

); const CustomDropdown = ({ value, onChange, options, }: { value: string; onChange: (value: string) => void; options: { value: string; label: string }[]; }) => { const [isOpen, setIsOpen] = useState(false); const [searchTerm, setSearchTerm] = useState(''); const selectedOption = options.find((opt) => opt.value === value); const filteredOptions = options.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()), ); return (

{/* Selected Value Button */} {/* Dropdown Panel */} {isOpen && (

{/* Search Input */}

setSearchTerm(e.target.value)} placeholder="Search builds..." className="w-full bg-transparent border-none text-sm text-white placeholder-gray-400 focus:outline-none focus:ring-0" /> {searchTerm && ( )}

{/* Options List */}

{filteredOptions.length === 0 ? (

No builds found

) : ( filteredOptions.map((option) => ( )) )}

)}

); }; const safeParseDate = (dateString: string): Date | null => { if (!dateString) return null; try { const date = new Date(dateString); return isValid(date) ? date : null; } catch { return null; } }; const formatDate = (dateString: string): string => { const parsedDate = safeParseDate(dateString); return parsedDate instanceof Date ? format(parsedDate, 'dd/MM/yyyy HH:mm') : dateString; }; const formatDateOnly = (dateString: string): string => { const parsedDate = safeParseDate(dateString); return parsedDate instanceof Date ? format(parsedDate, 'dd/MM/yyyy') : dateString; }; const chartStyle = { color: '#ffffff', fontFamily: 'Inter, system-ui, sans-serif', }; const modernChartConfig = { tooltipStyle: { backgroundColor: 'rgba(255, 255, 255, 0.95)', backdropFilter: 'blur(8px)', border: '1px solid rgba(255, 255, 255, 0.2)', boxShadow: '0 8px 32px rgba(0, 0, 0, 0.2)', padding: '12px 16px', fontFamily: 'Inter, system-ui, sans-serif', fontSize: '13px', color: '#1f2937', }, axisStyle: { stroke: '#6b7280', fontSize: '12px', fontWeight: 500, fontFamily: 'Inter, system-ui, sans-serif', }, gridStyle: { stroke: 'rgba(75, 85, 99, 0.15)', strokeDasharray: '6 6', }, legendStyle: { fontSize: '13px', fontWeight: 500, fontFamily: 'Inter, system-ui, sans-serif', }, }; export function EnhancedTrends() { const [builds, setBuilds] = useState([]); const [sessions, setSessions] = useState([]); const [selectedBuild, setSelectedBuild] = useState(null); useEffect(() => { async function fetchData() { try { const [fetchedBuilds, fetchedSessions] = await Promise.all([ DeviceFarmApiService.getBuilds(), DeviceFarmApiService.getSessions(), ]); setBuilds(fetchedBuilds); setSessions(fetchedSessions); if (fetchedBuilds.length > 0) { setSelectedBuild(fetchedBuilds[0].id); } } catch (error) { console.error('Error fetching data:', error); } } fetchData(); }, []); const getChartData = useMemo(() => { return builds.map((build) => { const buildSessions = sessions.filter((session) => session.buildId === build.id); const passed = buildSessions.filter((session) => session.status === 'passed').length; const failed = buildSessions.filter((session) => session.status === 'failed').length; const unmarked = buildSessions.filter( (session) => session.status === 'unmarked' || !session.status, ).length; return { name: build.name || build.id, Pass: passed, Fail: failed, Unmarked: unmarked, }; }); }, [builds, sessions]); const getPieData = useMemo(() => { if (!selectedBuild) return []; const buildSessions = sessions.filter((session) => session.buildId === selectedBuild); const passed = buildSessions.filter((session) => session.status === 'passed').length; const failed = buildSessions.filter((session) => session.status !== 'passed').length; return [ { name: 'Pass', value: passed }, { name: 'Fail', value: failed }, ]; }, [selectedBuild, sessions]); const getTestDurationData = useMemo(() => { const groupedByDate: { [key: string]: number[] } = sessions .filter((session) => { const startDate = safeParseDate(session.startTime); const endDate = safeParseDate(session.endTime || ''); return startDate && endDate; }) .reduce( (acc, session) => { const startDate = safeParseDate(session.startTime)!; const endDate = safeParseDate(session.endTime || '')!; const dateKey = format(startDate, 'dd/MM/yyyy'); const duration = Math.round((endDate.getTime() - startDate.getTime()) / (1000 * 60)); if (!acc[dateKey]) { acc[dateKey] = []; } acc[dateKey].push(duration); return acc; }, {} as { [key: string]: number[] }, ); return Object.entries(groupedByDate) .map(([date, durations]) => ({ name: date, duration: Math.round(durations.reduce((sum, val) => sum + val, 0) / durations.length), count: durations.length, })) .sort((a, b) => a.name.localeCompare(b.name)); }, [sessions]); const getDeviceUsageData = useMemo(() => { const deviceUsage: { [key: string]: number } = {}; sessions.forEach((session) => { if (!deviceUsage[session.deviceName]) { deviceUsage[session.deviceName] = 0; } deviceUsage[session.deviceName]++; }); return Object.entries(deviceUsage).map(([name, value]) => ({ name, value })); }, [sessions]); const getTestCountOverTime = useMemo(() => { const countOverTime = builds .map((build) => { const buildSessions = sessions.filter((session) => session.buildId === build.id); return { name: build.name || build.id, count: buildSessions.length, }; }) .sort((a, b) => a.name.localeCompare(b.name)); return countOverTime; }, [builds, sessions]); const getTestDurationDistribution = useMemo(() => { const durationRanges = { '0-5min': 0, '5-15min': 0, '15-30min': 0, '30-60min': 0, '60+min': 0, }; sessions.forEach((session) => { const startDate = safeParseDate(session.startTime); const endDate = safeParseDate(session.endTime || ''); if (startDate && endDate) { const duration = Math.round((endDate.getTime() - startDate.getTime()) / (1000 * 60)); if (duration <= 5) durationRanges['0-5min']++; else if (duration <= 15) durationRanges['5-15min']++; else if (duration <= 30) durationRanges['15-30min']++; else if (duration <= 60) durationRanges['30-60min']++; else durationRanges['60+min']++; } }); return Object.entries(durationRanges).map(([range, count]) => ({ name: range, count, })); }, [sessions]); const getDeviceSuccessRate = useMemo(() => { const deviceStats: { [key: string]: { total: number; passed: number } } = {}; sessions.forEach((session) => { if (!deviceStats[session.deviceName]) { deviceStats[session.deviceName] = { total: 0, passed: 0 }; } deviceStats[session.deviceName].total++; if (session.status === 'passed') { deviceStats[session.deviceName].passed++; } }); return Object.entries(deviceStats) .map(([device, stats]) => ({ name: device, successRate: (stats.passed / stats.total) * 100, total: stats.total, })) .sort((a, b) => b.successRate - a.successRate); }, [sessions]); return (

{/* Test Trends - Full Width */} {gradientDefs} [`${value} tests`, name]} labelStyle={{ color: '#4b5563' }} /> {/* Build Statistics and Device Usage */}

({ value: build.id, label: build.name || build.id, }))} /> {gradientDefs} `${name} ${(percent * 100).toFixed(0)}%`} > {getPieData.map((entry, index) => ( ))} [`${value} tests`, name]} labelStyle={{ color: '#4b5563' }} /> {gradientDefs} `${name} ${(percent * 100).toFixed(0)}%`} > {getDeviceUsageData.map((entry, index) => ( ))} [`${value} tests`, 'Device Usage']} labelStyle={{ color: '#4b5563' }} />

{/* Test Duration Trend and Test Count Over Time */}

[ `${value} minutes (${props.payload.count} tests)`, 'Average Duration', ]} labelStyle={{ color: '#4b5563' }} /> [`${value} tests`, 'Test Count']} labelStyle={{ color: '#4b5563' }} />

{/* Test Duration Distribution and Device Pass Percentage */}

{gradientDefs} [`${value} tests`, 'Duration Range']} cursor={{ fill: 'rgba(255, 255, 255, 0.02)' }} labelStyle={{ color: '#4b5563' }} /> {gradientDefs} `${value}%`} /> [ `${value.toFixed(1)}% (${props.payload.total} tests)`, 'Pass Rate', ]} cursor={{ fill: 'rgba(255, 255, 255, 0.02)' }} labelStyle={{ color: '#4b5563' }} /> {getDeviceSuccessRate.map((entry, index) => ( = 80 ? '#passGradient' : entry.successRate >= 60 ? '#unmarkedGradient' : '#failGradient' })`} style={{ filter: `drop-shadow(0px 0px 10px ${ entry.successRate >= 80 ? 'rgba(34, 197, 94, 0.2)' : entry.successRate >= 60 ? 'rgba(251, 191, 36, 0.2)' : 'rgba(239, 68, 68, 0.2)' })`, }} /> ))}

); } export default EnhancedTrends;

{Icon && ( )} {title}

{Icon && (

)} {title}