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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Tooltip,
} from 'chart.js';
import 'chart.js/auto';
import { format } from 'date-fns'
import { useEffect, useState } from 'react';
import { Line } from 'react-chartjs-2';
ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
Tooltip
);
export default function LineGraph(props: any) {
const options = {
responsive: true,
scales: {
x: {
grid: {
display: false
}
},
y: {
min: 0,
ticks: {
stepSize: 1,
callback: function(value: any, _index: any, _ticks: any) {
return value + "wps";
},
},
grid: {
display: false
}
},
}
};
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 numDatapoints = 12;
const { data: rawData } = await props.supabase
.from('file')
.select('timestamp').gte('timestamp', timeframeStart.toISOString()).lte('timestamp', timeframeEnd.toISOString());
console.log(rawData)
const startDate = new Date(timeframeStart);
const endDate = new Date(timeframeEnd);
const intervalDuration = (endDate - startDate) / numDatapoints;
let labels = Array(numDatapoints).fill("");
let points = Array(numDatapoints).fill(0);
for (let i = 0; i < numDatapoints; i++) {
const intervalStart = new Date(startDate.getTime() + i * intervalDuration);
const intervalEnd = new Date(startDate.getTime() + (i + 1) * intervalDuration);
// Format the interval start and end as strings for labeling
labels[i] = format(intervalEnd, 'MM/dd - HH:mm');
// Count the number of entries within the current interval
points[i] = rawData.filter(entry => {
const entryDate = new Date(entry.timestamp);
return entryDate >= intervalStart && entryDate < intervalEnd;
}).length;
}
console.log("LABELS", labels)
console.log("POINTS", points)
setData({
labels: labels,
datasets: [{
label: 'Dataset',
data: points,
borderColor: 'rgb(53, 162, 235)',
backgroundColor: 'rgba(53, 162, 235, 0.5)',
}]
})
}
fetchData()
}, [props.timeframe])
return (
<div>
<p className="text-center">{props.name}</p>
<Line data={data} options={options} />
</div>
)
}
|
