Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import React, { useMemo } from "react";
import { RegionEvolutionPoint } from "../../../models/RegionEvolution";
import { colorForRegion } from "./timeseries.utils";
import "./TimeSeries.css";
type Props = {
regionName: string;
regionDetails: RegionEvolutionPoint[];
hoverYear?: number;
showClose?: boolean;
onClose?: () => void;
};
export const TimeSeriesDetails: React.FC<Props> = ({
regionName,
regionDetails,
hoverYear,
showClose,
onClose,
}) => {
const stats = useMemo(() => {
const rates = regionDetails.map((p) => p.rate);
const min = Math.min(...rates);
const max = Math.max(...rates);
const avg = rates.reduce((s, v) => s + v, 0) / rates.length;
return { min, max, avg, count: regionDetails.length };
}, [regionDetails]);
return (
<div className="details-panel">
<div className="details-header">
<h3 className="details-title">{regionName}</h3>
<div
className="details-color-indicator"
style={{ backgroundColor: colorForRegion(regionName) }}
/>
</div>
<div className="details-stats">
<div className="stat-card">
<span className="stat-label">Nombre de points</span>
<span className="stat-value">{stats.count}</span>
</div>
<div className="stat-card">
<span className="stat-label">Taux min</span>
<span className="stat-value">{stats.min.toFixed(2)}</span>
</div>
<div className="stat-card">
<span className="stat-label">Taux max</span>
<span className="stat-value">{stats.max.toFixed(2)}</span>
</div>
<div className="stat-card">
<span className="stat-label">Taux moyen</span>
<span className="stat-value">{stats.avg.toFixed(2)}</span>
</div>
</div>
<div className="details-table-wrapper">
<table className="details-table">
<thead>
<tr>
<th>Année</th>
<th>Taux</th>
<th>Code région</th>
</tr>
</thead>
<tbody>
{regionDetails.map((point) => (
<tr
key={point.id}
className={hoverYear === point.year ? "highlighted" : ""}
>
<td>{point.year}</td>
<td>{point.rate.toFixed(2)}</td>
<td>{point.regionCode}</td>
</tr>
))}
</tbody>
</table>
</div>
{showClose && (
<button className="close-details-button" onClick={onClose} type="button">
Fermer les détails
</button>
)}
</div>
);
};