@@ -74,21 +74,23 @@ export function PerformancePanel({ jobs, events }: PerformancePanelProps) {
7474 < div className = "h-56 w-full" >
7575 < ResponsiveContainer width = "100%" height = "100%" >
7676 < BarChart data = { rows } margin = { { top : 4 , right : 8 , bottom : 4 , left : 0 } } >
77- < CartesianGrid strokeDasharray = "3 3" stroke = "#78767133 " />
78- < XAxis dataKey = "name" tick = { { fontSize : 11 , fill : '#787671 ' } } />
79- < YAxis tick = { { fontSize : 11 , fill : '#787671 ' } } unit = "s" width = { 44 } />
77+ < CartesianGrid strokeDasharray = "3 3" stroke = "#8f8d8833 " />
78+ < XAxis dataKey = "name" tick = { { fontSize : 11 , fill : '#8f8d88 ' } } />
79+ < YAxis tick = { { fontSize : 11 , fill : '#8f8d88 ' } } unit = "s" width = { 44 } />
8080 < Tooltip
81- cursor = { { fill : '#f6f5f4 ' } }
81+ cursor = { { fill : '#161614 ' } }
8282 contentStyle = { {
8383 borderRadius : 6 ,
84- border : '1px solid #78767133 ' ,
84+ border : '1px solid #8f8d8833 ' ,
8585 fontSize : 12 ,
86+ backgroundColor : '#161614' ,
87+ color : '#e8e6e3' ,
8688 } }
8789 />
8890 < Legend wrapperStyle = { { fontSize : 12 } } />
8991 { /* Solid palette only: steel for waiting, primary for doing. */ }
90- < Bar dataKey = "Queue (s)" stackId = "time" fill = "#787671 " radius = { [ 0 , 0 , 0 , 0 ] } />
91- < Bar dataKey = "Execution (s)" stackId = "time" fill = "#5645d4 " radius = { [ 6 , 6 , 0 , 0 ] } />
92+ < Bar dataKey = "Queue (s)" stackId = "time" fill = "#8f8d88 " radius = { [ 0 , 0 , 0 , 0 ] } />
93+ < Bar dataKey = "Execution (s)" stackId = "time" fill = "#6a59e8 " radius = { [ 6 , 6 , 0 , 0 ] } />
9294 </ BarChart >
9395 </ ResponsiveContainer >
9496 </ div >
@@ -99,19 +101,21 @@ export function PerformancePanel({ jobs, events }: PerformancePanelProps) {
99101 < div className = "h-40 w-full" >
100102 < ResponsiveContainer width = "100%" height = "100%" >
101103 < BarChart data = { cpuData } margin = { { top : 4 , right : 8 , bottom : 4 , left : 0 } } >
102- < CartesianGrid strokeDasharray = "3 3" stroke = "#78767133 " />
103- < XAxis dataKey = "name" tick = { { fontSize : 11 , fill : '#787671 ' } } />
104- < YAxis tick = { { fontSize : 11 , fill : '#787671 ' } } unit = "%" width = { 44 } />
104+ < CartesianGrid strokeDasharray = "3 3" stroke = "#8f8d8833 " />
105+ < XAxis dataKey = "name" tick = { { fontSize : 11 , fill : '#8f8d88 ' } } />
106+ < YAxis tick = { { fontSize : 11 , fill : '#8f8d88 ' } } unit = "%" width = { 44 } />
105107 < Tooltip
106- cursor = { { fill : '#f6f5f4 ' } }
108+ cursor = { { fill : '#161614 ' } }
107109 contentStyle = { {
108110 borderRadius : 6 ,
109- border : '1px solid #78767133 ' ,
111+ border : '1px solid #8f8d8833 ' ,
110112 fontSize : 12 ,
113+ backgroundColor : '#161614' ,
114+ color : '#e8e6e3' ,
111115 } }
112116 />
113117 { /* 100% = one full core; multi-core jobs exceed it. */ }
114- < Bar dataKey = "CPU peak (%)" fill = "#5645d4 " radius = { [ 6 , 6 , 0 , 0 ] } />
118+ < Bar dataKey = "CPU peak (%)" fill = "#6a59e8 " radius = { [ 6 , 6 , 0 , 0 ] } />
115119 </ BarChart >
116120 </ ResponsiveContainer >
117121 </ div >
0 commit comments