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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
|
import { useState, useEffect } from "react";
import { invoke } from "@tauri-apps/api/core";
import PacmanLoader from "react-spinners/PacmanLoader";
import {
BarChart,
Bar,
XAxis,
YAxis,
Tooltip,
ResponsiveContainer,
} from "recharts";
function renderLoading() {
return (
<div className="flex items-center justify-center h-full">
<PacmanLoader color="#26bd65" />
</div>
);
}
function TopTable({ stats }: any) {
console.log(stats);
return (
<div className="px-4 sm:px-6 lg:px-8">
<div className="flex items-center">
<div className="flex-auto">
<h1 className="text-base font-semibold">Top commands</h1>
</div>
</div>
<div className="mt-4 flow-root">
<div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div className="inline-block min-w-full py-2 align-middle">
<table className="min-w-full divide-y divide-gray-300">
<thead>
<tr>
<th
scope="col"
className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 lg:pl-8"
>
Command
</th>
<th
scope="col"
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
>
Count
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200 bg-white">
{stats.map((stat) => (
<tr>
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 lg:pl-8">
{stat[0][0]}
</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
{stat[1]}
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
</div>
);
}
export default function Stats() {
const [stats, setStats]: any = useState([]);
const [top, setTop]: any = useState([]);
const [chart, setChart]: any = useState([]);
useEffect(() => {
if (stats.length != 0) return;
invoke("global_stats")
.then((s: any) => {
console.log(s.daily);
setStats([
{
name: "Total history",
stat: s.total_history.toLocaleString(),
},
{
name: "Unique history",
stat: s.stats.unique_commands.toLocaleString(),
},
{
name: "Last 1d",
stat: s.last_1d.toLocaleString(),
},
{
name: "Last 7d",
stat: s.last_7d.toLocaleString(),
},
{
name: "Last 30d",
stat: s.last_30d.toLocaleString(),
},
]);
setChart(s.daily);
setTop(s.stats);
})
.catch((e) => {
console.log(e);
});
}, []);
console.log(top);
if (stats.length == 0) {
return renderLoading();
}
return (
<div className="flex flex-col overflow-y-scroll">
<div className="flexfull">
<dl className="grid grid-cols-1 sm:grid-cols-5 w-full">
{stats.map((item: any) => (
<div
key={item.name}
className="overflow-hidden bg-white px-4 py-5 shadow sm:p-6"
>
<dt className="truncate text-sm font-medium text-gray-500">
{item.name}
</dt>
<dd className="mt-1 text-3xl font-semibold tracking-tight text-gray-900">
{item.stat}
</dd>
</div>
))}
</dl>
</div>
<div className="flex flex-col h-54 py-4 pl-5">
<div className="flex flex-col h-48 pt-5 pr-5">
<ResponsiveContainer width="100%" height="100%">
<BarChart width={500} height={300} data={chart}>
<XAxis dataKey="name" hide={true} />
<YAxis />
<Tooltip />
<Bar dataKey="value" fill="#26bd65" />
</BarChart>
</ResponsiveContainer>
</div>
</div>
<div>
<TopTable stats={top.top} />
</div>
</div>
);
}
|
