blob: 5e95cd25d3d8ffe59963ca6ccfc21a5c03b0d19f (
plain)
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
|
import React from "react";
type IQRData = {
min: number;
q1: number;
median: number;
q3: number;
max: number;
};
type IQRBoxPlotProps = {
data: IQRData;
};
export const IQRBoxPlot: React.FC<IQRBoxPlotProps> = ({data}) => {
const {min, q1, median, q3, max} = data;
const scale = (value: number): number =>
((value - min) / (max - min)) * 100;
return (
<div className="w-full p-4">
<div className="text-sm mb-2 text-muted-foreground">Box Plot</div>
<svg viewBox="0 0 100 20" className="w-full h-12">
<line
x1={scale(min)}
x2={scale(q1)}
y1={10}
y2={10}
stroke="#999"
strokeWidth={1}
/>
<line
x1={scale(q3)}
x2={scale(max)}
y1={10}
y2={10}
stroke="#999"
strokeWidth={1}
/>
<rect
x={scale(q1)}
y={5}
width={scale(q3) - scale(q1)}
height={10}
fill="#e2e8f0"
stroke="#64748b"
strokeWidth={1}
/>
<line
x1={scale(median)}
x2={scale(median)}
y1={5}
y2={15}
stroke="#1e293b"
stroke-width={1.5}
/>
<line
x1={scale(min)}
x2={scale(min)}
y1={7}
y2={13}
stroke="#666"
strokeWidth={1}/>
<line
x1={scale(max)}
x2={scale(max)}
y1={7}
y2={13}
stroke="#666"
strokeWidth={1}/>
</svg>
</div>
)
};
|
