feat: refine Jira dashboard analytics with period filtering
- Introduced period filtering for analytics in `JiraDashboardPageClient` using `filterAnalyticsByPeriod` and `getPeriodInfo` for enhanced data visualization. - Updated state management for selected period to use `PeriodFilter` type for better type safety. - Improved UI to display period information alongside project metrics, enhancing user experience.
This commit is contained in:
@@ -1,9 +1,10 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useState, useEffect, useMemo } from 'react';
|
||||
import { JiraConfig } from '@/lib/types';
|
||||
import { useJiraAnalytics } from '@/hooks/useJiraAnalytics';
|
||||
import { useJiraExport } from '@/hooks/useJiraExport';
|
||||
import { filterAnalyticsByPeriod, getPeriodInfo, type PeriodFilter } from '@/lib/jira-period-filter';
|
||||
import { Header } from '@/components/ui/Header';
|
||||
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
@@ -24,9 +25,18 @@ interface JiraDashboardPageClientProps {
|
||||
}
|
||||
|
||||
export function JiraDashboardPageClient({ initialJiraConfig }: JiraDashboardPageClientProps) {
|
||||
const { analytics, isLoading, error, loadAnalytics, refreshAnalytics } = useJiraAnalytics();
|
||||
const { analytics: rawAnalytics, isLoading, error, loadAnalytics, refreshAnalytics } = useJiraAnalytics();
|
||||
const { isExporting, error: exportError, exportCSV, exportJSON } = useJiraExport();
|
||||
const [selectedPeriod, setSelectedPeriod] = useState<'7d' | '30d' | '3m' | 'current'>('current');
|
||||
const [selectedPeriod, setSelectedPeriod] = useState<PeriodFilter>('current');
|
||||
|
||||
// Filtrer les analytics selon la période sélectionnée
|
||||
const analytics = useMemo(() => {
|
||||
if (!rawAnalytics) return null;
|
||||
return filterAnalyticsByPeriod(rawAnalytics, selectedPeriod);
|
||||
}, [rawAnalytics, selectedPeriod]);
|
||||
|
||||
// Informations sur la période pour l'affichage
|
||||
const periodInfo = getPeriodInfo(selectedPeriod);
|
||||
|
||||
useEffect(() => {
|
||||
// Charger les analytics au montage si Jira est configuré avec un projet
|
||||
@@ -131,9 +141,16 @@ export function JiraDashboardPageClient({ initialJiraConfig }: JiraDashboardPage
|
||||
<h1 className="text-2xl font-mono font-bold text-[var(--foreground)] mb-2">
|
||||
📊 Analytics d'équipe
|
||||
</h1>
|
||||
<p className="text-[var(--muted-foreground)]">
|
||||
Surveillance en temps réel du projet {initialJiraConfig.projectKey}
|
||||
</p>
|
||||
<div className="space-y-1">
|
||||
<p className="text-[var(--muted-foreground)]">
|
||||
Surveillance en temps réel du projet {initialJiraConfig.projectKey}
|
||||
</p>
|
||||
<p className="text-sm text-[var(--primary)] flex items-center gap-1">
|
||||
<span>{periodInfo.icon}</span>
|
||||
<span>{periodInfo.label}</span>
|
||||
<span className="text-[var(--muted-foreground)]">• {periodInfo.description}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
@@ -147,7 +164,7 @@ export function JiraDashboardPageClient({ initialJiraConfig }: JiraDashboardPage
|
||||
].map((period: { value: string; label: string }) => (
|
||||
<button
|
||||
key={period.value}
|
||||
onClick={() => setSelectedPeriod(period.value as '7d' | '30d' | '3m' | 'current')}
|
||||
onClick={() => setSelectedPeriod(period.value as PeriodFilter)}
|
||||
className={`px-3 py-1 text-sm rounded transition-all ${
|
||||
selectedPeriod === period.value
|
||||
? 'bg-[var(--primary)] text-[var(--primary-foreground)]'
|
||||
|
||||
Reference in New Issue
Block a user