Skip to content

Commit 283b8f1

Browse files
Patel230Patel230
committed
Enhance dashboard with professional styling and visual improvements
- Create professional containers for pie and radar charts with gradients - Add hover animations and interactive effects to chart containers - Implement eye-catching color scheme for dashboard headers and sections - Enhance main dashboard title with gold color and gradient subtitle - Add modern colors to section headers (cyan, orange, hotpink, goldenrod) - Reduce pie chart size from 500px to 350px for better proportion - Compress legend spacing and typography for compact design - Add pulsing status indicators with glow effects - Improve visual hierarchy with better spacing and typography - Create professional yet vibrant dashboard appearance
1 parent 8e24356 commit 283b8f1

1 file changed

Lines changed: 120 additions & 91 deletions

File tree

‎packages/web/src/components/ListView.tsx‎

Lines changed: 120 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1193,8 +1193,8 @@ export function ListView() {
11931193
}}
11941194
>
11951195
<svg
1196-
width="500"
1197-
height="500"
1196+
width="350"
1197+
height="350"
11981198
viewBox="0 0 100 100"
11991199
>
12001200
{filteredData.map((item, index) => {
@@ -1223,12 +1223,12 @@ export function ListView() {
12231223
</div>
12241224
</div>
12251225
{/* Legend section */}
1226-
<div className="mt-6">
1226+
<div className="mt-4">
12271227
{(() => {
12281228
// Determine chart type and set appropriate grid
12291229
const isPriorityChart = filteredData.some(item => ['Critical', 'High', 'Moderate', 'Low', 'Minimal'].includes(item.label));
12301230
const isStatusChart = filteredData.some(item => ['Proposed', 'Planned', 'In Progress', 'Completed', 'Blocked'].includes(item.label));
1231-
const gridCols = (isPriorityChart || isStatusChart) ? "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-3" : "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3";
1231+
const gridCols = (isPriorityChart || isStatusChart) ? "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-2" : "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2";
12321232

12331233
return (
12341234
<div className={gridCols}>
@@ -1259,14 +1259,14 @@ export function ListView() {
12591259
};
12601260

12611261
return (
1262-
<div key={index} className="bg-gray-700 rounded p-3">
1263-
<div className="flex items-center mb-2">
1262+
<div key={index} className="bg-gray-700 hover:bg-gray-650 rounded p-2 transition-all duration-200 hover:scale-105 hover:shadow-lg border border-gray-600 hover:border-gray-500">
1263+
<div className="flex items-center mb-1">
12641264
{getIcon(item.label)}
1265-
<span className="text-gray-200 text-base ml-2">{item.label}</span>
1265+
<span className="text-gray-200 text-sm ml-2">{item.label}</span>
12661266
</div>
12671267
<div className="text-right">
1268-
<span className="text-xl font-bold text-white">{item.value}</span>
1269-
<span className="text-base text-gray-400 ml-1">({percentage}%)</span>
1268+
<span className="text-lg font-bold text-white">{item.value}</span>
1269+
<span className="text-sm text-gray-400 ml-1">({percentage}%)</span>
12701270
</div>
12711271
</div>
12721272
);
@@ -1404,99 +1404,128 @@ export function ListView() {
14041404
</div>
14051405
</div>
14061406

1407-
{/* Charts Section */}
1408-
<div className="space-y-8">
1409-
{/* Charts Header */}
1410-
<div className="mb-6 text-center">
1411-
<h2 className="text-2xl font-bold text-white">Analytics Dashboard</h2>
1412-
</div>
1413-
1414-
{/* First Row - Status Distribution */}
1415-
<div className="flex flex-col items-center">
1416-
<h2 className="text-2xl font-bold text-white mb-4">Status Distribution</h2>
1417-
<div className="w-full">
1418-
<PieChart
1419-
title=""
1420-
data={[
1421-
{ label: 'Proposed', value: stats.proposed, color: '#22d3ee' },
1422-
{ label: 'Planned', value: stats.planned, color: '#c084fc' },
1423-
{ label: 'In Progress', value: stats.inProgress, color: '#facc15' },
1424-
{ label: 'Completed', value: stats.completed, color: '#4ade80' },
1425-
{ label: 'Blocked', value: stats.blocked, color: '#ef4444' }
1426-
]}
1427-
/>
1407+
{/* Analytics Dashboard */}
1408+
<div className="space-y-8 relative">
1409+
{/* Dashboard Header */}
1410+
<div className="text-center relative">
1411+
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-blue-500/10 to-transparent rounded-lg"></div>
1412+
<div className="relative py-4">
1413+
<h2 className="text-2xl font-bold mb-1" style={{ color: 'gold' }}>Analytics Dashboard</h2>
1414+
<p className="text-sm font-medium" style={{ color: 'mediumspringgreen' }}>Project metrics and distributions</p>
14281415
</div>
14291416
</div>
14301417

1431-
{/* Second Row - Priority Distribution */}
1432-
<div className="flex flex-col items-center">
1433-
<h2 className="text-2xl font-bold text-white mb-4">Priority Distribution</h2>
1434-
<div className="w-full">
1435-
<PieChart
1436-
title=""
1437-
data={[
1438-
{ label: 'Critical', value: stats.priorityStats.critical, color: '#ef4444' },
1439-
{ label: 'High', value: stats.priorityStats.high, color: '#f97316' },
1440-
{ label: 'Moderate', value: stats.priorityStats.moderate, color: '#eab308' },
1441-
{ label: 'Low', value: stats.priorityStats.low, color: '#3b82f6' },
1442-
{ label: 'Minimal', value: stats.priorityStats.minimal, color: '#22c55e' }
1443-
]}
1444-
/>
1418+
{/* Pie Charts Container */}
1419+
<div className="bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-600 rounded-lg p-6 shadow-xl hover:shadow-2xl transition-all duration-300 hover:border-gray-500">
1420+
<div className="flex items-center justify-between mb-6">
1421+
<div>
1422+
<h3 className="text-lg font-semibold" style={{ color: '#00FFFF' }}>Distribution Overview</h3>
1423+
<p className="text-xs" style={{ color: '#FF6B35' }}>Statistical breakdown by status, priority, and type</p>
1424+
</div>
1425+
<div className="flex items-center space-x-2">
1426+
<div className="w-2 h-2 bg-blue-500 rounded-full animate-pulse shadow-lg shadow-blue-500/50"></div>
1427+
<span className="text-xs text-gray-300 font-medium">Pie Charts</span>
1428+
</div>
14451429
</div>
1446-
</div>
1430+
1431+
<div className="space-y-8">
1432+
{/* Status Distribution */}
1433+
<div className="flex flex-col items-center">
1434+
<h4 className="text-base font-semibold text-white mb-4 tracking-wide">Status Distribution</h4>
1435+
<div className="w-full">
1436+
<PieChart
1437+
title=""
1438+
data={[
1439+
{ label: 'Proposed', value: stats.proposed, color: '#22d3ee' },
1440+
{ label: 'Planned', value: stats.planned, color: '#c084fc' },
1441+
{ label: 'In Progress', value: stats.inProgress, color: '#facc15' },
1442+
{ label: 'Completed', value: stats.completed, color: '#4ade80' },
1443+
{ label: 'Blocked', value: stats.blocked, color: '#ef4444' }
1444+
]}
1445+
/>
1446+
</div>
1447+
</div>
14471448

1448-
{/* Third Row - Node Distribution */}
1449-
<div className="flex flex-col items-center">
1450-
<h2 className="text-2xl font-bold text-white mb-4">Node Distribution</h2>
1451-
<div className="w-full">
1452-
<PieChart
1453-
title=""
1454-
data={Object.entries(stats.typeStats)
1455-
.filter(([, count]) => count > 0)
1456-
.map(([type, count]) => ({
1457-
label: formatLabel(type),
1458-
value: count,
1459-
color: type === 'EPIC' ? '#c084fc' :
1460-
type === 'MILESTONE' ? '#fb923c' :
1461-
type === 'OUTCOME' ? '#818cf8' :
1462-
type === 'FEATURE' ? '#38bdf8' :
1463-
type === 'TASK' ? '#4ade80' :
1464-
type === 'BUG' ? '#ef4444' :
1465-
type === 'IDEA' ? '#fde047' :
1466-
type === 'RESEARCH' ? '#2dd4bf' : '#6b7280'
1467-
}))}
1468-
/>
1469-
</div>
1470-
</div>
1449+
{/* Priority Distribution */}
1450+
<div className="flex flex-col items-center">
1451+
<h4 className="text-base font-semibold text-white mb-4 tracking-wide">Priority Distribution</h4>
1452+
<div className="w-full">
1453+
<PieChart
1454+
title=""
1455+
data={[
1456+
{ label: 'Critical', value: stats.priorityStats.critical, color: '#ef4444' },
1457+
{ label: 'High', value: stats.priorityStats.high, color: '#f97316' },
1458+
{ label: 'Moderate', value: stats.priorityStats.moderate, color: '#eab308' },
1459+
{ label: 'Low', value: stats.priorityStats.low, color: '#3b82f6' },
1460+
{ label: 'Minimal', value: stats.priorityStats.minimal, color: '#22c55e' }
1461+
]}
1462+
/>
1463+
</div>
1464+
</div>
14711465

1472-
{/* First Radar Row - Task Distribution Radar */}
1473-
<div className="mt-12">
1474-
<div className="flex flex-col items-center">
1475-
<h2 className="text-2xl font-bold text-white mb-4">Task Category Distribution</h2>
1476-
<div className="w-full">
1477-
<TaskDistributionRadar showLegend={false} />
1466+
{/* Node Distribution */}
1467+
<div className="flex flex-col items-center">
1468+
<h4 className="text-base font-semibold text-white mb-4 tracking-wide">Node Distribution</h4>
1469+
<div className="w-full">
1470+
<PieChart
1471+
title=""
1472+
data={Object.entries(stats.typeStats)
1473+
.filter(([, count]) => count > 0)
1474+
.map(([type, count]) => ({
1475+
label: formatLabel(type),
1476+
value: count,
1477+
color: type === 'EPIC' ? '#c084fc' :
1478+
type === 'MILESTONE' ? '#fb923c' :
1479+
type === 'OUTCOME' ? '#818cf8' :
1480+
type === 'FEATURE' ? '#38bdf8' :
1481+
type === 'TASK' ? '#4ade80' :
1482+
type === 'BUG' ? '#ef4444' :
1483+
type === 'IDEA' ? '#fde047' :
1484+
type === 'RESEARCH' ? '#2dd4bf' : '#6b7280'
1485+
}))}
1486+
/>
1487+
</div>
14781488
</div>
14791489
</div>
14801490
</div>
14811491

1482-
</div>
1483-
1484-
{/* Second Radar Row - Priority Distribution Radar */}
1485-
<div className="mt-12">
1486-
<div className="flex flex-col items-center">
1487-
<h2 className="text-2xl font-bold text-white mb-4">Priority Category Distribution</h2>
1488-
<div className="w-full">
1489-
<PriorityDistributionRadar showLegend={false} />
1492+
{/* Radar Charts Container */}
1493+
<div className="bg-gradient-to-br from-gray-900 to-gray-800 border border-gray-600 rounded-lg p-6 shadow-xl hover:shadow-2xl transition-all duration-300 hover:border-gray-500">
1494+
<div className="flex items-center justify-between mb-6">
1495+
<div>
1496+
<h3 className="text-lg font-semibold" style={{ color: 'hotpink' }}>Radar Analysis</h3>
1497+
<p className="text-xs" style={{ color: 'goldenrod' }}>Multi-dimensional data patterns</p>
1498+
</div>
1499+
<div className="flex items-center space-x-2">
1500+
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse shadow-lg shadow-green-500/50"></div>
1501+
<span className="text-xs text-gray-300 font-medium">Radar Charts</span>
1502+
</div>
14901503
</div>
1491-
</div>
1492-
</div>
1493-
1494-
{/* Third Radar Row - Node Distribution Radar */}
1495-
<div className="mt-12">
1496-
<div className="flex flex-col items-center">
1497-
<h2 className="text-2xl font-bold text-white mb-4">Node Category Distribution</h2>
1498-
<div className="w-full">
1499-
<NodeDistributionRadar showLegend={false} />
1504+
1505+
<div className="space-y-8">
1506+
{/* Task Category Distribution Radar */}
1507+
<div className="flex flex-col items-center">
1508+
<h4 className="text-base font-semibold text-white mb-4 tracking-wide">Task Category Distribution</h4>
1509+
<div className="w-full">
1510+
<TaskDistributionRadar showLegend={false} />
1511+
</div>
1512+
</div>
1513+
1514+
{/* Priority Category Distribution Radar */}
1515+
<div className="flex flex-col items-center">
1516+
<h4 className="text-base font-semibold text-white mb-4 tracking-wide">Priority Category Distribution</h4>
1517+
<div className="w-full">
1518+
<PriorityDistributionRadar showLegend={false} />
1519+
</div>
1520+
</div>
1521+
1522+
{/* Node Category Distribution Radar */}
1523+
<div className="flex flex-col items-center">
1524+
<h4 className="text-base font-semibold text-white mb-4 tracking-wide">Node Category Distribution</h4>
1525+
<div className="w-full">
1526+
<NodeDistributionRadar showLegend={false} />
1527+
</div>
1528+
</div>
15001529
</div>
15011530
</div>
15021531
</div>

0 commit comments

Comments
 (0)