Skip to content

Commit 750df6c

Browse files
kerthcetkerthcet
committed
optimie the dataset page
Signed-off-by: kerthcet <kerthcet@gmail.com>
1 parent ffe2bec commit 750df6c

10 files changed

Lines changed: 162 additions & 162 deletions

File tree

‎dashboard/src/components/dashboard/daily-token-usage-chart.tsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -80,27 +80,27 @@ export function DailyTokenUsageChart({ data, timeRange }: DailyTokenUsageChartPr
8080
}, [chartData]);
8181

8282
return (
83-
<div className="space-y-2">
83+
<div className="space-y-1.5">
8484
<div className="flex items-center justify-between">
85-
<h3 className="text-sm font-semibold">Token Usage</h3>
86-
<div className="text-xs text-muted-foreground">
85+
<h3 className="text-xs font-semibold">Token Usage</h3>
86+
<div className="text-[10px] text-muted-foreground">
8787
Total: {totalTokens.toLocaleString()} ({totalInputTokens.toLocaleString()}↓ {totalOutputTokens.toLocaleString()}↑)
8888
</div>
8989
</div>
9090

91-
<ResponsiveContainer width="100%" height={240}>
92-
<LineChart data={chartData} margin={{ left: 10, right: 15, top: 10, bottom: 5 }}>
91+
<ResponsiveContainer width="100%" height={200}>
92+
<LineChart data={chartData} margin={{ left: 5, right: 10, top: 5, bottom: 0 }}>
9393
<CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" opacity={0.5} />
9494
<XAxis
9595
dataKey="displayDate"
96-
tick={{ fontSize: 10 }}
96+
tick={{ fontSize: 9 }}
9797
angle={-45}
9898
textAnchor="end"
99-
height={50}
99+
height={40}
100100
/>
101101
<YAxis
102-
tick={{ fontSize: 10 }}
103-
width={50}
102+
tick={{ fontSize: 9 }}
103+
width={35}
104104
tickFormatter={(value) =>
105105
value >= 1000000
106106
? `${(value / 1000000).toFixed(1)}M`
@@ -112,8 +112,8 @@ export function DailyTokenUsageChart({ data, timeRange }: DailyTokenUsageChartPr
112112
value: 'Tokens',
113113
angle: -90,
114114
position: 'insideLeft',
115-
offset: -5,
116-
style: { textAnchor: 'middle', fontSize: 11 }
115+
offset: 0,
116+
style: { textAnchor: 'middle', fontSize: 9 }
117117
}}
118118
/>
119119
<Tooltip
@@ -151,11 +151,11 @@ export function DailyTokenUsageChart({ data, timeRange }: DailyTokenUsageChartPr
151151
}}
152152
/>
153153
<Legend
154-
wrapperStyle={{ fontSize: '11px', paddingTop: '2px' }}
154+
wrapperStyle={{ fontSize: '10px', paddingTop: '2px' }}
155155
iconType="circle"
156-
iconSize={8}
156+
iconSize={6}
157157
verticalAlign="bottom"
158-
height={25}
158+
height={20}
159159
/>
160160
<Line
161161
type="monotone"

‎dashboard/src/components/dashboard/experiments-status-chart.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -45,30 +45,30 @@ export function ExperimentsStatusChart({ experiments }: ExperimentsStatusChartPr
4545
const total = chartData.reduce((sum, item) => sum + item.value, 0);
4646

4747
return (
48-
<div className="space-y-2">
48+
<div className="space-y-1.5">
4949
<div className="flex items-center justify-between">
50-
<h3 className="text-sm font-semibold">Experiments Distribution</h3>
51-
<div className="text-xs text-muted-foreground">
50+
<h3 className="text-xs font-semibold">Experiments Distribution</h3>
51+
<div className="text-[10px] text-muted-foreground">
5252
Total: {total}
5353
</div>
5454
</div>
5555
{chartData.length === 0 ? (
56-
<div className="flex items-center justify-center h-[240px] text-sm text-muted-foreground">
56+
<div className="flex items-center justify-center h-[200px] text-xs text-muted-foreground">
5757
No data available
5858
</div>
5959
) : (
60-
<ResponsiveContainer width="100%" height={240}>
60+
<ResponsiveContainer width="100%" height={200}>
6161
<PieChart>
6262
<Pie
6363
data={chartData}
6464
dataKey="value"
6565
nameKey="name"
6666
cx="50%"
6767
cy="50%"
68-
outerRadius={75}
68+
outerRadius={65}
6969
labelLine={false}
7070
label={(entry) => `${((entry.value / total) * 100).toFixed(1)}%`}
71-
style={{ fontSize: '11px' }}
71+
style={{ fontSize: '10px' }}
7272
>
7373
{chartData.map((entry, index) => (
7474
<Cell key={`cell-${index}`} fill={entry.color} />
@@ -80,10 +80,10 @@ export function ExperimentsStatusChart({ experiments }: ExperimentsStatusChartPr
8080
backgroundColor: 'hsl(var(--card))',
8181
border: '1px solid hsl(var(--border))',
8282
borderRadius: '6px',
83-
fontSize: '11px',
83+
fontSize: '10px',
8484
}}
8585
/>
86-
<Legend wrapperStyle={{ fontSize: '11px' }} />
86+
<Legend wrapperStyle={{ fontSize: '10px' }} />
8787
</PieChart>
8888
</ResponsiveContainer>
8989
)}

‎dashboard/src/components/dashboard/experiments-timeline-chart.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -67,38 +67,38 @@ export function ExperimentsTimelineChart({ experiments, timeRange }: Experiments
6767
}, [experiments]);
6868

6969
return (
70-
<div className="space-y-2">
70+
<div className="space-y-1.5">
7171
<div className="flex items-center justify-between">
72-
<h3 className="text-sm font-semibold">Experiments Timeline</h3>
73-
<div className="text-xs text-muted-foreground">
72+
<h3 className="text-xs font-semibold">Experiments Timeline</h3>
73+
<div className="text-[10px] text-muted-foreground">
7474
Total: {totalExperiments}
7575
</div>
7676
</div>
7777

7878
{chartData.length === 0 ? (
79-
<div className="flex items-center justify-center h-[240px] text-sm text-muted-foreground">
79+
<div className="flex items-center justify-center h-[200px] text-xs text-muted-foreground">
8080
No experiments data available for this time range
8181
</div>
8282
) : (
83-
<ResponsiveContainer width="100%" height={240}>
84-
<LineChart data={chartData} margin={{ left: 10, right: 15, top: 10, bottom: 5 }}>
83+
<ResponsiveContainer width="100%" height={200}>
84+
<LineChart data={chartData} margin={{ left: 5, right: 10, top: 5, bottom: 0 }}>
8585
<CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" opacity={0.5} />
8686
<XAxis
8787
dataKey="displayDate"
88-
tick={{ fontSize: 10 }}
88+
tick={{ fontSize: 9 }}
8989
angle={-45}
9090
textAnchor="end"
91-
height={50}
91+
height={40}
9292
/>
9393
<YAxis
94-
tick={{ fontSize: 10 }}
95-
width={50}
94+
tick={{ fontSize: 9 }}
95+
width={35}
9696
label={{
9797
value: 'Count',
9898
angle: -90,
9999
position: 'insideLeft',
100-
offset: -5,
101-
style: { textAnchor: 'middle', fontSize: 11 }
100+
offset: 0,
101+
style: { textAnchor: 'middle', fontSize: 9 }
102102
}}
103103
/>
104104
<Tooltip
@@ -126,11 +126,11 @@ export function ExperimentsTimelineChart({ experiments, timeRange }: Experiments
126126
}}
127127
/>
128128
<Legend
129-
wrapperStyle={{ fontSize: '11px', paddingTop: '2px' }}
129+
wrapperStyle={{ fontSize: '10px', paddingTop: '2px' }}
130130
iconType="circle"
131-
iconSize={8}
131+
iconSize={6}
132132
verticalAlign="bottom"
133-
height={25}
133+
height={20}
134134
/>
135135
<Line
136136
type="monotone"

‎dashboard/src/components/dashboard/model-distribution-chart.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -37,29 +37,29 @@ export function ModelDistributionChart({ data }: ModelDistributionChartProps) {
3737
})) : [];
3838

3939
return (
40-
<div className="space-y-2">
40+
<div className="space-y-1.5">
4141
<div className="flex items-center justify-between">
42-
<h3 className="text-sm font-semibold">Model Distribution</h3>
43-
<div className="text-xs text-muted-foreground">
42+
<h3 className="text-xs font-semibold">Model Distribution</h3>
43+
<div className="text-[10px] text-muted-foreground">
4444
Total: {total}
4545
</div>
4646
</div>
4747
{!data || data.length === 0 ? (
48-
<div className="flex items-center justify-center h-[240px] text-sm text-muted-foreground">
48+
<div className="flex items-center justify-center h-[200px] text-xs text-muted-foreground">
4949
No model data available
5050
</div>
5151
) : (
52-
<ResponsiveContainer width="100%" height={240}>
52+
<ResponsiveContainer width="100%" height={200}>
5353
<PieChart>
5454
<Pie
5555
data={chartData}
5656
cx="50%"
5757
cy="50%"
5858
labelLine={false}
5959
label={(entry) => `${((entry.value / total) * 100).toFixed(1)}%`}
60-
outerRadius={75}
60+
outerRadius={65}
6161
dataKey="value"
62-
style={{ fontSize: '11px' }}
62+
style={{ fontSize: '10px' }}
6363
>
6464
{chartData.map((entry, index) => (
6565
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
@@ -71,10 +71,10 @@ export function ModelDistributionChart({ data }: ModelDistributionChartProps) {
7171
backgroundColor: 'hsl(var(--card))',
7272
border: '1px solid hsl(var(--border))',
7373
borderRadius: '6px',
74-
fontSize: '11px',
74+
fontSize: '10px',
7575
}}
7676
/>
77-
<Legend wrapperStyle={{ fontSize: '11px' }} />
77+
<Legend wrapperStyle={{ fontSize: '10px' }} />
7878
</PieChart>
7979
</ResponsiveContainer>
8080
)}

‎dashboard/src/pages/dashboard/index.tsx‎

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -68,36 +68,36 @@ export function DashboardPage() {
6868

6969

7070
return (
71-
<div className="space-y-3">
71+
<div className="space-y-2">
7272
{/* Header */}
7373
<div>
7474
<h1 className="text-xl font-semibold tracking-tight text-foreground">Dashboard</h1>
75-
<p className="mt-1 text-sm text-muted-foreground">
75+
<p className="mt-0.5 text-xs text-muted-foreground">
7676
Overview of your team's experiments and activity
7777
</p>
7878
</div>
7979

8080
{/* Overview Section */}
8181
<div>
82-
<h2 className="text-base font-semibold text-foreground mb-2">Overview</h2>
82+
<h2 className="text-sm font-semibold text-foreground mb-1.5">Overview</h2>
8383
</div>
8484

8585
{/* Overview Metrics */}
8686
{teamLoading ? (
87-
<div className="grid grid-cols-1 md:grid-cols-3 gap-2.5">
87+
<div className="grid grid-cols-1 md:grid-cols-3 gap-2">
8888
<Skeleton className="h-14 w-full" />
8989
<Skeleton className="h-14 w-full" />
9090
<Skeleton className="h-14 w-full" />
9191
</div>
9292
) : (
93-
<div className="grid grid-cols-1 md:grid-cols-3 gap-2.5">
93+
<div className="grid grid-cols-1 md:grid-cols-3 gap-2">
9494
{/* Total Experiments */}
9595
<Card>
96-
<CardContent className="p-3">
96+
<CardContent className="p-2.5">
9797
<div className="flex items-center justify-between">
9898
<div className="space-y-0.5">
99-
<p className="text-xs font-medium text-muted-foreground">EXPERIMENTS</p>
100-
<p className="text-lg font-bold tabular-nums text-foreground">{team?.totalExperiments || 0}</p>
99+
<p className="text-[10px] font-medium text-muted-foreground">EXPERIMENTS</p>
100+
<p className="text-base font-bold tabular-nums text-foreground">{team?.totalExperiments || 0}</p>
101101
</div>
102102
<div className="p-1.5 bg-purple-100 rounded-lg">
103103
<FlaskConical className="h-3.5 w-3.5 text-purple-600" />
@@ -108,11 +108,11 @@ export function DashboardPage() {
108108

109109
{/* Total Runs */}
110110
<Card>
111-
<CardContent className="p-3">
111+
<CardContent className="p-2.5">
112112
<div className="flex items-center justify-between">
113113
<div className="space-y-0.5">
114-
<p className="text-xs font-medium text-muted-foreground">RUNS</p>
115-
<p className="text-lg font-bold tabular-nums text-foreground">{team?.totalRuns || 0}</p>
114+
<p className="text-[10px] font-medium text-muted-foreground">RUNS</p>
115+
<p className="text-base font-bold tabular-nums text-foreground">{team?.totalRuns || 0}</p>
116116
</div>
117117
<div className="p-1.5 bg-green-100 rounded-lg">
118118
<Play className="h-3.5 w-3.5 text-green-600" />
@@ -123,13 +123,13 @@ export function DashboardPage() {
123123

124124
{/* Total Tokens */}
125125
<Card>
126-
<CardContent className="p-3">
126+
<CardContent className="p-2.5">
127127
<div className="flex items-center justify-between">
128128
<div className="space-y-0.5">
129-
<p className="text-xs font-medium text-muted-foreground">TOKENS</p>
130-
<p className="text-lg font-bold tabular-nums text-foreground">
129+
<p className="text-[10px] font-medium text-muted-foreground">TOKENS</p>
130+
<p className="text-base font-bold tabular-nums text-foreground">
131131
{(team?.aggregatedTokens?.totalTokens || 0).toLocaleString()}
132-
<span className="text-muted-foreground text-xs ml-1 font-normal">
132+
<span className="text-muted-foreground text-[10px] ml-1 font-normal">
133133
({(team?.aggregatedTokens?.inputTokens || 0).toLocaleString()}↓ {(team?.aggregatedTokens?.outputTokens || 0).toLocaleString()}↑)
134134
</span>
135135
</p>
@@ -144,18 +144,18 @@ export function DashboardPage() {
144144
)}
145145

146146
{/* Experiments Charts */}
147-
<div className="space-y-3">
147+
<div className="space-y-2">
148148
{/* Time Range Selector */}
149149
<div className="flex items-center justify-between">
150-
<h2 className="text-base font-semibold text-foreground">Activity</h2>
150+
<h2 className="text-sm font-semibold text-foreground">Activity</h2>
151151
<div className="flex gap-1">
152152
{TIME_RANGE_OPTIONS.map((option) => (
153153
<Button
154154
key={option.value}
155155
variant="outline"
156156
size="sm"
157157
onClick={() => setTimeRange(option.value)}
158-
className={`h-8 px-2.5 text-xs transition-colors ${timeRange === option.value
158+
className={`h-7 px-2 text-[11px] transition-colors ${timeRange === option.value
159159
? 'bg-blue-50 border-blue-300 text-blue-700 hover:bg-blue-100'
160160
: 'bg-white hover:bg-gray-50'
161161
}`}
@@ -167,12 +167,12 @@ export function DashboardPage() {
167167
</div>
168168

169169
{/* First Row: Experiments Charts */}
170-
<div className="grid gap-3 md:grid-cols-2">
170+
<div className="grid gap-2 md:grid-cols-2">
171171
{/* Status Distribution Pie Chart */}
172172
<Card>
173-
<CardContent className="p-4">
173+
<CardContent className="p-3">
174174
{experimentsLoading ? (
175-
<Skeleton className="h-72 w-full" />
175+
<Skeleton className="h-60 w-full" />
176176
) : (
177177
<ExperimentsStatusChart experiments={filteredExperiments || []} />
178178
)}
@@ -181,9 +181,9 @@ export function DashboardPage() {
181181

182182
{/* Timeline Chart */}
183183
<Card>
184-
<CardContent className="p-4">
184+
<CardContent className="p-3">
185185
{experimentsLoading ? (
186-
<Skeleton className="h-72 w-full" />
186+
<Skeleton className="h-60 w-full" />
187187
) : (
188188
<ExperimentsTimelineChart experiments={filteredExperiments || []} timeRange={timeRange} />
189189
)}
@@ -192,12 +192,12 @@ export function DashboardPage() {
192192
</div>
193193

194194
{/* Second Row: Model Distribution and Token Usage */}
195-
<div className="grid gap-3 md:grid-cols-2">
195+
<div className="grid gap-2 md:grid-cols-2">
196196
{/* Model Distribution Pie Chart */}
197197
<Card>
198-
<CardContent className="p-4">
198+
<CardContent className="p-3">
199199
{modelDistributionsLoading ? (
200-
<Skeleton className="h-72 w-full" />
200+
<Skeleton className="h-60 w-full" />
201201
) : (
202202
<ModelDistributionChart data={modelDistributions || []} />
203203
)}
@@ -206,13 +206,13 @@ export function DashboardPage() {
206206

207207
{/* Token Usage Chart */}
208208
<Card>
209-
<CardContent className="p-4">
209+
<CardContent className="p-3">
210210
{tokenUsageLoading ? (
211-
<Skeleton className="h-72 w-full" />
211+
<Skeleton className="h-60 w-full" />
212212
) : dailyTokenUsage ? (
213213
<DailyTokenUsageChart data={dailyTokenUsage} timeRange={timeRange} />
214214
) : (
215-
<div className="flex items-center justify-center h-72 text-sm text-muted-foreground">
215+
<div className="flex items-center justify-center h-60 text-xs text-muted-foreground">
216216
No token usage data available for this time range
217217
</div>
218218
)}

0 commit comments

Comments
 (0)