Skip to content

Commit aa8b787

Browse files
kerthcetkerthcet
authored
Optimize the pie chart (#167)
* update the color Signed-off-by: kerthcet <kerthcet@gmail.com> * optimize the chart Signed-off-by: kerthcet <kerthcet@gmail.com> --------- Signed-off-by: kerthcet <kerthcet@gmail.com>
1 parent 2de6bd4 commit aa8b787

16 files changed

Lines changed: 89 additions & 61 deletions

File tree

‎dashboard/src/components/comparison/metrics-overlay.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -130,17 +130,22 @@ export function MetricsOverlay({ experimentIds }: MetricsOverlayProps) {
130130
<CartesianGrid strokeDasharray="3 3" />
131131
<XAxis
132132
dataKey="time"
133-
label={{ value: 'Time', position: 'insideBottom', offset: -5 }}
133+
tick={{ fontSize: 10 }}
134+
label={{ value: 'Time', position: 'insideBottom', offset: -5, style: { fontSize: 10 } }}
135+
/>
136+
<YAxis
137+
tick={{ fontSize: 10 }}
138+
label={{ value: 'Value', angle: -90, position: 'insideLeft', style: { fontSize: 10 } }}
134139
/>
135-
<YAxis label={{ value: 'Value', angle: -90, position: 'insideLeft' }} />
136140
<Tooltip
137141
contentStyle={{
138142
backgroundColor: 'hsl(var(--card))',
139143
border: '1px solid hsl(var(--border))',
140144
borderRadius: '0.5rem',
145+
fontSize: '10px',
141146
}}
142147
/>
143-
<Legend />
148+
<Legend wrapperStyle={{ fontSize: '10px' }} />
144149
{metricKeys.map((key, index) => (
145150
<Line
146151
key={key}

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export function DailyTokenUsageChart({ data, timeRange }: DailyTokenUsageChartPr
8989
</div>
9090

9191
<ResponsiveContainer width="100%" height={260}>
92-
<LineChart data={chartData} margin={{ left: 0, right: 15, top: 15, bottom: 15 }}>
92+
<LineChart data={chartData} margin={{ left: 10, right: 15, top: 15, bottom: 15 }}>
9393
<CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" opacity={0.5} />
9494
<XAxis
9595
dataKey="displayDate"
@@ -100,7 +100,7 @@ export function DailyTokenUsageChart({ data, timeRange }: DailyTokenUsageChartPr
100100
/>
101101
<YAxis
102102
tick={{ fontSize: 10 }}
103-
width={40}
103+
width={50}
104104
tickFormatter={(value) =>
105105
value >= 1000000
106106
? `${(value / 1000000).toFixed(1)}M`
@@ -112,7 +112,7 @@ export function DailyTokenUsageChart({ data, timeRange }: DailyTokenUsageChartPr
112112
value: 'Tokens',
113113
angle: -90,
114114
position: 'insideLeft',
115-
offset: 8,
115+
offset: -5,
116116
style: { textAnchor: 'middle', fontSize: 11 }
117117
}}
118118
/>
@@ -121,15 +121,15 @@ export function DailyTokenUsageChart({ data, timeRange }: DailyTokenUsageChartPr
121121
backgroundColor: 'hsl(var(--card))',
122122
border: '1px solid hsl(var(--border))',
123123
borderRadius: '6px',
124-
fontSize: '12px',
124+
fontSize: '10px',
125125
}}
126126
content={({ active, payload, label }) => {
127127
if (!active || !payload || !payload.length) return null;
128128
const data = payload[0].payload;
129129
return (
130130
<div className="bg-card border border-border rounded-md p-2 shadow-sm">
131-
<div className="text-xs font-medium mb-1.5">{label}</div>
132-
<div className="space-y-0.5 text-xs">
131+
<div className="text-[10px] font-medium mb-1.5">{label}</div>
132+
<div className="space-y-0.5 text-[10px]">
133133
<div className="flex items-center gap-2">
134134
<div className="w-2 h-2 rounded-full bg-blue-500"></div>
135135
<span className="text-muted-foreground">Total:</span>
@@ -151,7 +151,7 @@ export function DailyTokenUsageChart({ data, timeRange }: DailyTokenUsageChartPr
151151
}}
152152
/>
153153
<Legend
154-
wrapperStyle={{ fontSize: '11px' }}
154+
wrapperStyle={{ fontSize: '10px' }}
155155
iconType="circle"
156156
iconSize={8}
157157
/>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ export function ExperimentsStatusChart({ experiments }: ExperimentsStatusChartPr
6262
cy="48%"
6363
outerRadius={58}
6464
label={({ name, value }) => `${name}: ${value}`}
65-
style={{ fontSize: '11px' }}
65+
style={{ fontSize: '10px' }}
6666
>
6767
{chartData.map((entry, index) => (
6868
<Cell key={`cell-${index}`} fill={entry.color} />
@@ -73,10 +73,10 @@ export function ExperimentsStatusChart({ experiments }: ExperimentsStatusChartPr
7373
backgroundColor: 'hsl(var(--card))',
7474
border: '1px solid hsl(var(--border))',
7575
borderRadius: '6px',
76-
fontSize: '11px',
76+
fontSize: '10px',
7777
}}
7878
/>
79-
<Legend wrapperStyle={{ fontSize: '11px' }} />
79+
<Legend wrapperStyle={{ fontSize: '10px' }} />
8080
</PieChart>
8181
</ResponsiveContainer>
8282
</div>

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -101,15 +101,15 @@ export function ExperimentsTimelineChart({ experiments, timeRange }: Experiments
101101
backgroundColor: 'hsl(var(--card))',
102102
border: '1px solid hsl(var(--border))',
103103
borderRadius: '6px',
104-
fontSize: '12px',
104+
fontSize: '10px',
105105
}}
106106
content={({ active, payload, label }) => {
107107
if (!active || !payload || !payload.length) return null;
108108
const data = payload[0].payload;
109109
return (
110110
<div className="bg-card border border-border rounded-md p-2 shadow-sm">
111-
<div className="text-xs font-medium mb-1.5">{label}</div>
112-
<div className="space-y-0.5 text-xs">
111+
<div className="text-[10px] font-medium mb-1.5">{label}</div>
112+
<div className="space-y-0.5 text-[10px]">
113113
<div className="flex items-center gap-2">
114114
<div className="w-2 h-2 rounded-full bg-purple-400"></div>
115115
<span className="text-muted-foreground">Launched:</span>
@@ -121,7 +121,7 @@ export function ExperimentsTimelineChart({ experiments, timeRange }: Experiments
121121
}}
122122
/>
123123
<Legend
124-
wrapperStyle={{ fontSize: '11px' }}
124+
wrapperStyle={{ fontSize: '10px' }}
125125
iconType="circle"
126126
iconSize={8}
127127
/>

‎dashboard/src/components/metrics/metrics-chart.tsx‎

Lines changed: 26 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -345,18 +345,26 @@ export function MetricsChart({ metrics, experimentId, title = 'Metrics', descrip
345345
{/* View mode toggle */}
346346
<div className="flex gap-1">
347347
<Button
348-
variant={viewMode === 'timeline' ? 'default' : 'outline'}
348+
variant="outline"
349349
size="sm"
350350
onClick={() => setViewMode('timeline')}
351-
className="h-7 px-3 text-xs"
351+
className={`h-7 px-3 text-xs transition-colors ${
352+
viewMode === 'timeline'
353+
? 'bg-blue-50 border-blue-300 text-blue-700 hover:bg-blue-100'
354+
: 'bg-white hover:bg-gray-50'
355+
}`}
352356
>
353357
Timeline
354358
</Button>
355359
<Button
356-
variant={viewMode === 'pareto' ? 'default' : 'outline'}
360+
variant="outline"
357361
size="sm"
358362
onClick={() => setViewMode('pareto')}
359-
className="h-7 px-3 text-xs"
363+
className={`h-7 px-3 text-xs transition-colors ${
364+
viewMode === 'pareto'
365+
? 'bg-blue-50 border-blue-300 text-blue-700 hover:bg-blue-100'
366+
: 'bg-white hover:bg-gray-50'
367+
}`}
360368
>
361369
Pareto
362370
</Button>
@@ -477,14 +485,14 @@ export function MetricsChart({ metrics, experimentId, title = 'Metrics', descrip
477485
<CartesianGrid strokeDasharray="3 3" />
478486
<XAxis
479487
dataKey="index"
480-
label={{ value: 'Index', position: 'insideBottom', offset: -5, style: { fontSize: 12 } }}
488+
label={{ value: 'Index', position: 'insideBottom', offset: -5, style: { fontSize: 10 } }}
481489
type="number"
482490
domain={['dataMin', 'dataMax']}
483-
tick={{ fontSize: 11 }}
491+
tick={{ fontSize: 10 }}
484492
/>
485493
<YAxis
486-
label={{ value: 'Value', angle: -90, position: 'insideLeft', style: { fontSize: 12 } }}
487-
tick={{ fontSize: 11 }}
494+
label={{ value: 'Value', angle: -90, position: 'insideLeft', style: { fontSize: 10 } }}
495+
tick={{ fontSize: 10 }}
488496
/>
489497
<Tooltip
490498
cursor={{ strokeDasharray: '5 5', stroke: '#94a3b8', strokeWidth: 1 }}
@@ -510,10 +518,10 @@ export function MetricsChart({ metrics, experimentId, title = 'Metrics', descrip
510518
lineHeight: '1.4',
511519
}}
512520
>
513-
<div style={{ fontWeight: 600, fontSize: '12px' }}>
521+
<div style={{ fontWeight: 600, fontSize: '10px' }}>
514522
Run: {data.runId}
515523
</div>
516-
<div style={{ fontSize: '12px' }}>
524+
<div style={{ fontSize: '10px' }}>
517525
{selectedKey}: {typeof data.value === 'number' ? data.value.toFixed(4) : data.value}
518526
</div>
519527
</div>
@@ -599,7 +607,7 @@ export function MetricsChart({ metrics, experimentId, title = 'Metrics', descrip
599607
xaxis: {
600608
title: {
601609
text: `${paretoMetrics[0].key} (${paretoMetrics[0].direction})`,
602-
font: { size: 12, color: '#374151', family: 'system-ui' },
610+
font: { size: 10, color: '#374151', family: 'system-ui' },
603611
},
604612
gridcolor: '#e5e7eb',
605613
gridwidth: 1,
@@ -610,7 +618,7 @@ export function MetricsChart({ metrics, experimentId, title = 'Metrics', descrip
610618
yaxis: {
611619
title: {
612620
text: `${paretoMetrics[1].key} (${paretoMetrics[1].direction})`,
613-
font: { size: 12, color: '#374151', family: 'system-ui' },
621+
font: { size: 10, color: '#374151', family: 'system-ui' },
614622
},
615623
gridcolor: '#e5e7eb',
616624
gridwidth: 1,
@@ -621,7 +629,7 @@ export function MetricsChart({ metrics, experimentId, title = 'Metrics', descrip
621629
zaxis: {
622630
title: {
623631
text: `${paretoMetrics[2].key} (${paretoMetrics[2].direction})`,
624-
font: { size: 12, color: '#374151', family: 'system-ui' },
632+
font: { size: 10, color: '#374151', family: 'system-ui' },
625633
},
626634
gridcolor: '#e5e7eb',
627635
gridwidth: 1,
@@ -672,9 +680,9 @@ export function MetricsChart({ metrics, experimentId, title = 'Metrics', descrip
672680
value: `${paretoMetrics[0].key} (${paretoMetrics[0].direction})`,
673681
position: 'insideBottom',
674682
offset: -10,
675-
style: { fontSize: 12, fill: '#374151' }
683+
style: { fontSize: 10, fill: '#374151' }
676684
}}
677-
tick={{ fontSize: 11, fill: '#6b7280' }}
685+
tick={{ fontSize: 10, fill: '#6b7280' }}
678686
domain={['dataMin - 0.1 * abs(dataMin)', 'dataMax + 0.1 * abs(dataMax)']}
679687
/>
680688
<YAxis
@@ -685,9 +693,9 @@ export function MetricsChart({ metrics, experimentId, title = 'Metrics', descrip
685693
value: `${paretoMetrics[1].key} (${paretoMetrics[1].direction})`,
686694
angle: -90,
687695
position: 'insideLeft',
688-
style: { fontSize: 12, fill: '#374151' }
696+
style: { fontSize: 10, fill: '#374151' }
689697
}}
690-
tick={{ fontSize: 11, fill: '#6b7280' }}
698+
tick={{ fontSize: 10, fill: '#6b7280' }}
691699
domain={['dataMin - 0.1 * abs(dataMin)', 'dataMax + 0.1 * abs(dataMax)']}
692700
/>
693701
<Tooltip
@@ -709,7 +717,7 @@ export function MetricsChart({ metrics, experimentId, title = 'Metrics', descrip
709717
borderRadius: '6px',
710718
padding: '8px 12px',
711719
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
712-
fontSize: '12px',
720+
fontSize: '10px',
713721
}}
714722
>
715723
<div style={{ fontWeight: 600, marginBottom: '4px' }}>

‎dashboard/src/components/ui/badge.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from 'react';
22
import { cn } from '../../lib/utils';
33

44
export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
5-
variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'unknown';
5+
variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'unknown' | 'info';
66
}
77

88
function Badge({ className, variant = 'default', ...props }: BadgeProps) {
@@ -14,6 +14,7 @@ function Badge({ className, variant = 'default', ...props }: BadgeProps) {
1414
success: 'border-transparent bg-green-500 text-white hover:bg-green-600',
1515
warning: 'border-transparent bg-yellow-500 text-white hover:bg-yellow-600',
1616
unknown: 'border-transparent bg-purple-100 text-purple-700 hover:bg-purple-200',
17+
info: 'border-transparent bg-blue-500 text-white hover:bg-blue-600',
1718
};
1819

1920
return (

‎dashboard/src/pages/experiments/[id].tsx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,10 @@ import { formatDistanceToNow } from 'date-fns';
2929
import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from 'recharts';
3030
import type { Status } from '../../types';
3131

32-
const STATUS_VARIANTS: Record<Status, 'default' | 'secondary' | 'success' | 'warning' | 'destructive' | 'unknown'> = {
32+
const STATUS_VARIANTS: Record<Status, 'default' | 'secondary' | 'success' | 'warning' | 'destructive' | 'unknown' | 'info'> = {
3333
UNKNOWN: 'unknown',
3434
PENDING: 'warning',
35-
RUNNING: 'default',
35+
RUNNING: 'info',
3636
CANCELLED: 'secondary',
3737
COMPLETED: 'success',
3838
FAILED: 'destructive',
@@ -260,14 +260,21 @@ export function ExperimentDetailPage() {
260260
cy="48%"
261261
outerRadius={48}
262262
label={({ name, value }) => `${name}: ${value}`}
263-
style={{ fontSize: '12px' }}
263+
style={{ fontSize: '10px' }}
264264
>
265265
{runStatsData.map((entry, index) => (
266266
<Cell key={`cell-${index}`} fill={entry.color} />
267267
))}
268268
</Pie>
269-
<Tooltip />
270-
<Legend wrapperStyle={{ fontSize: '12px' }} />
269+
<Tooltip
270+
contentStyle={{
271+
fontSize: '10px',
272+
backgroundColor: 'hsl(var(--card))',
273+
border: '1px solid hsl(var(--border))',
274+
borderRadius: '6px',
275+
}}
276+
/>
277+
<Legend wrapperStyle={{ fontSize: '10px' }} />
271278
</PieChart>
272279
</ResponsiveContainer>
273280
</div>

‎dashboard/src/pages/experiments/compare.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@ import { ParameterDiff } from '../../components/comparison/parameter-diff';
1414
import { MetricsOverlay } from '../../components/comparison/metrics-overlay';
1515
import type { Status } from '../../types';
1616

17-
const STATUS_VARIANTS: Record<Status, 'default' | 'secondary' | 'success' | 'warning' | 'destructive' | 'unknown'> = {
17+
const STATUS_VARIANTS: Record<Status, 'default' | 'secondary' | 'success' | 'warning' | 'destructive' | 'unknown' | 'info'> = {
1818
UNKNOWN: 'unknown',
1919
PENDING: 'warning',
20-
RUNNING: 'default',
20+
RUNNING: 'info',
2121
CANCELLED: 'secondary',
2222
COMPLETED: 'success',
2323
FAILED: 'destructive',

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,10 @@ import { Button } from '../../components/ui/button';
2323
import { formatDistanceToNow } from 'date-fns';
2424
import type { Status } from '../../types';
2525

26-
const STATUS_VARIANTS: Record<Status, 'default' | 'secondary' | 'success' | 'warning' | 'destructive' | 'unknown'> = {
26+
const STATUS_VARIANTS: Record<Status, 'default' | 'secondary' | 'success' | 'warning' | 'destructive' | 'unknown' | 'info'> = {
2727
UNKNOWN: 'unknown',
2828
PENDING: 'warning',
29-
RUNNING: 'default',
29+
RUNNING: 'info',
3030
CANCELLED: 'secondary',
3131
COMPLETED: 'success',
3232
FAILED: 'destructive',

‎dashboard/src/pages/projects/[id].tsx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,10 @@ import { formatDistanceToNow } from 'date-fns';
2727
import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from 'recharts';
2828
import type { Status } from '../../types';
2929

30-
const STATUS_VARIANTS: Record<Status, 'default' | 'secondary' | 'success' | 'warning' | 'destructive' | 'unknown'> = {
30+
const STATUS_VARIANTS: Record<Status, 'default' | 'secondary' | 'success' | 'warning' | 'destructive' | 'unknown' | 'info'> = {
3131
UNKNOWN: 'unknown',
3232
PENDING: 'warning',
33-
RUNNING: 'default',
33+
RUNNING: 'info',
3434
CANCELLED: 'secondary',
3535
COMPLETED: 'success',
3636
FAILED: 'destructive',
@@ -211,14 +211,21 @@ export function ProjectDetailPage() {
211211
cy="48%"
212212
outerRadius={48}
213213
label={({ name, value }) => `${name}: ${value}`}
214-
style={{ fontSize: '12px' }}
214+
style={{ fontSize: '10px' }}
215215
>
216216
{experimentStatsData.map((entry, index) => (
217217
<Cell key={`cell-${index}`} fill={entry.color} />
218218
))}
219219
</Pie>
220-
<Tooltip />
221-
<Legend wrapperStyle={{ fontSize: '12px' }} />
220+
<Tooltip
221+
contentStyle={{
222+
fontSize: '10px',
223+
backgroundColor: 'hsl(var(--card))',
224+
border: '1px solid hsl(var(--border))',
225+
borderRadius: '6px',
226+
}}
227+
/>
228+
<Legend wrapperStyle={{ fontSize: '10px' }} />
222229
</PieChart>
223230
</ResponsiveContainer>
224231
</div>

0 commit comments

Comments
 (0)