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
|
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Tooltip,
} from 'chart.js';
import 'chart.js/auto';
import { useEffect, useState } from 'react';
import { PolarArea } from 'react-chartjs-2';
import * as ss from 'simple-statistics';
import NoData from '../Other/NoData';
ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
Tooltip
);
export default function LineGraph(props: any) {
const options = {
responsive: true,
};
const [data, setData] = useState({
labels: [],
datasets: []
});
useEffect(() => {
const fetchData = async () => {
const timeframeEnd = props.timeframe.end.toDate();
const timeframeStart = props.timeframe.start.toDate();
timeframeStart.setHours(timeframeStart.getHours() - 12)
const { data: rawData } = await props.supabase
.from('file')
.select('contents').gte('timestamp', timeframeStart.toISOString()).lte('timestamp', timeframeEnd.toISOString());
console.log("RAWDATA", rawData)
if (rawData.length === 0) {
return;
}
let sortedLengths = rawData.map((element) => element.contents.length).sort((a, b) => a - b);
console.log("TOP LENGTHS", sortedLengths)
let p25Value = ss.quantileSorted(sortedLengths, 0.25);
let p50Value = ss.quantileSorted(sortedLengths, 0.50);
let p75Value = ss.quantileSorted(sortedLengths, 0.75);
let p100Value = ss.quantileSorted(sortedLengths, 1.00);
console.log("p25: ", p25Value)
console.log("p50: ", p50Value)
console.log("p75: ", p75Value)
console.log("p100: ", p100Value)
setData({
labels: ['p25', 'p50', 'p75', 'p100'],
datasets: [{
data: [p25Value, p50Value, p75Value, p100Value]
}]
})
}
fetchData()
}, [props.timeframe]);
console.log("length: aaa", data.datasets.length)
return (
<div className="flex-grow flex-1">
<p className="text-center">{props.name}</p>
{data.datasets.length > 0 ?
<PolarArea data={data} options={options} />
:
<NoData />}
</div>
)
}
|
