- Added Express server with SQLite database connection. - Created API endpoints to fetch categories, KPIs, measurements, and statistics. - Implemented error handling for database operations. feat: Create ChartModal component for visualizing KPI data - Developed ChartModal to display line charts for KPI measurements. - Integrated Chart.js for rendering charts with responsive design. - Added styling for modal and chart components. feat: Add ExportModal component for exporting KPI data - Implemented ExportModal to allow users to select data ranges for export. - Included radio buttons for predefined time ranges (last week, month, year, all data). - Styled modal for better user experience. feat: Introduce RangeChartModal for dynamic range selection - Created RangeChartModal to visualize KPI data over user-selected time ranges. - Integrated radio buttons for selecting different time ranges. - Enhanced chart rendering with Chart.js. refactor: Create useSQLiteDatabase hook for data fetching - Developed custom hook to manage fetching categories, KPIs, and measurements. - Improved error handling and loading states for better user feedback. style: Add CSS styles for modals and charts - Created styles for ChartModal, ExportModal, and RangeChartModal. - Ensured responsive design for various screen sizes.
114 lines
2.9 KiB
TypeScript
114 lines
2.9 KiB
TypeScript
import { useState, useEffect, useCallback } from 'react';
|
|
|
|
const API_BASE = 'http://localhost:3001/api';
|
|
|
|
export interface Category {
|
|
id: number;
|
|
name: string;
|
|
emoji: string;
|
|
description?: string;
|
|
}
|
|
|
|
export interface KPI {
|
|
id: number;
|
|
category_id: number;
|
|
name: string;
|
|
unit: string;
|
|
target?: number;
|
|
formula?: string;
|
|
description?: string;
|
|
frequency?: string;
|
|
}
|
|
|
|
export interface Measurement {
|
|
id?: number;
|
|
kpi_id: number;
|
|
measurement_date: string;
|
|
value: number;
|
|
status?: string;
|
|
}
|
|
|
|
export const useSQLiteDatabase = () => {
|
|
const [categories, setCategories] = useState<Category[]>([]);
|
|
const [kpis, setKpis] = useState<KPI[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
// Charger les catégories et KPI au démarrage
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const [categoriesRes, kpisRes] = await Promise.all([
|
|
fetch(`${API_BASE}/categories`),
|
|
fetch(`${API_BASE}/kpis`)
|
|
]);
|
|
|
|
if (!categoriesRes.ok || !kpisRes.ok) {
|
|
throw new Error('Erreur lors du chargement des données');
|
|
}
|
|
|
|
const categoriesData = await categoriesRes.json();
|
|
const kpisData = await kpisRes.json();
|
|
|
|
setCategories(categoriesData);
|
|
setKpis(kpisData);
|
|
setError(null);
|
|
} catch (err: any) {
|
|
setError(err.message || 'Erreur de connexion à la base de données');
|
|
console.error('❌ Erreur:', err);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchData();
|
|
}, []);
|
|
|
|
// Obtenir les mesures pour un KPI
|
|
const getMeasurementsForKPI = useCallback(async (kpiId: number, days: number = 30) => {
|
|
try {
|
|
const res = await fetch(`${API_BASE}/measurements/${kpiId}?days=${days}`);
|
|
if (!res.ok) throw new Error('Erreur de chargement des mesures');
|
|
return await res.json();
|
|
} catch (err: any) {
|
|
console.error('Erreur getMeasurementsForKPI:', err);
|
|
return [];
|
|
}
|
|
}, []);
|
|
|
|
// Obtenir la dernière mesure pour un KPI
|
|
const getLatestMeasurement = useCallback(async (kpiId: number) => {
|
|
try {
|
|
const res = await fetch(`${API_BASE}/latest/${kpiId}`);
|
|
if (!res.ok) throw new Error('Erreur de chargement');
|
|
return await res.json();
|
|
} catch (err: any) {
|
|
console.error('Erreur getLatestMeasurement:', err);
|
|
return null;
|
|
}
|
|
}, []);
|
|
|
|
// Obtenir les statistiques pour un KPI
|
|
const getKPIStats = useCallback(async (kpiId: number, days: number = 30) => {
|
|
try {
|
|
const res = await fetch(`${API_BASE}/stats/${kpiId}?days=${days}`);
|
|
if (!res.ok) throw new Error('Erreur de chargement');
|
|
return await res.json();
|
|
} catch (err: any) {
|
|
console.error('Erreur getKPIStats:', err);
|
|
return null;
|
|
}
|
|
}, []);
|
|
|
|
return {
|
|
categories,
|
|
kpis,
|
|
loading,
|
|
error,
|
|
getMeasurementsForKPI,
|
|
getLatestMeasurement,
|
|
getKPIStats
|
|
};
|
|
};
|